Blogger Magazine

Crea Widgets Para tu Blog o Web

Tener un sitio diferente al de los demás es difícil, el tema es que no es que faltan ideas, sino que puede ser que no sepas de programación y se te haga problemático expresarte.

Cada dia salen nuevas herramientas para que en un par de clicks tengas un sitio (con limitaciones que se ven tarde claro). Hoy vamos a ver una herramienta para crear widgets.

¿Que son los widgets? Son funcionalidades, multimedia, para hacer tu sitio mas vistoso, y que los visitantes se diviertan usándolos.

Sprout nos permite diseñar y crear widgets a nuestro gusto, solo debes apretar sobre “Get Started!”, luego en “Start Building Now” (esa pagina solo es para decirnos que el servicio es gratis y no necesita registro).

Ahora se nos abre un pop-up que contiene varias plantillas, la mayoria de 300×250 pixeles, pero puedes poner “Blank Slate” el cual es una pagina en blanco que podemos adaptar nosotros.

Ahora viene lo bueno:

El editor parece complicado, pero es que tiene muchas opciones, dejare a tu sentido común saber para que sirven, porque las que quiero desarrollar son los “Componets” (componentes), que son las funcionalidades que se pueden agregar.

Entre estas funcionalidades tenemos: audio, imágenes, video, una reproductor de audio con lista de reproducción, botones, calendario, cuenta regresiva, marco, barra de progreso, lista de feeds, animación de imagenes, un menú de pantallazos y un contador de tiempo.

También podemos agregar servicios como Google Charts, ChipIn, Google Forms, PollDaddy, Pownce, Ribbit Call Button, Seesmic Video, Twitter y Yahoo! Maps.

Cada una de las cosas que le agregues puedes configurarlas en “Properties”. Para obtener el widget una vez terminado, aprieta sobre “Publish”, tienes dos tipos de servicio, el gratuito en el que aparecerá una “sutil” barra de sprout, y la paga (actualmente gratuita) en la que no aparecerá la barra hasta que la promoción termine. Y si hay que registrarse para obtener el widget.

Luego te dará el código del widget para que pegues en tu sitio, seleccionando que plataforma usas (no se encuentra wordpress).

Acá hay algo rápido:

Yo prefiero algo mas artesanal :P, seguiré haciéndolos yo mismo…

Sitios Flash para nombrar…

Las web mejor diseñadas, con un entorno atrapante, y que cuando aprietas sobre algo dices “Guauuu” por la hermosura de lo que apareció… están echas en Flash, la plataforma de las imágenes y animaciones, en donde si encuentras un enlace solo de texto el sitio ya ha sido corrompido :P.

Muy lindo, muy lindo, pero estos sitios suelen ser pesados, y carecen de opciones (sobre todo si usas I.E.). Esto es la que los para, ademas de su difícil desarrollo y aceptación de masas.

Para que veas lo maravillosos que pueden ser estos sitios extraje los 21 incredibly Creative Flash Websites

• National Grid
• Mathieu Badimon
• The Eco Zoo
• Lacoste Future
• Section Seven
• DVEIN
• Kid’s Cold Aid
• VodaFone Journey
• Virtual Knee Surgery
• Get The Glass
• Our Vice
• The Happiness Factory
• Bergmann Metallbau
• Toyota Yaris Virtual Test Drive
• Proxonic Visuals
• 99 Rooms
• Turbo Chef
• Uniqlo
• Dave Werner
• Levitated
• Help the Honey Bees

Bueno, disfruten cada una, y saquen ideas para sus diseños…

Herramientas de seleccion en Gimp

Vamos a empezar otro tuto de Gimp (atrasado una semana), esta vez vamos a ver las herramientas de selección, que son varias:

Iré nombrándolas por orden de izquierda a derecha, y explicare un poco que opciones tienen (no repetiré dos veces las mismas opciones).

Selección Rectangular: bueno, como el nombre lo dice selecciona un área rectangular, que marquemos.

Modo - cambia el modo de selección, el primero es el mas simple: solo puedes hacer una seleccion asi (reemplaza la otra selección). El segundo agrega una selección a lo ya seleccionado anteriormente. El tercero quita la seccion seleccionada de la anterior seleccion. Y el cuarto retiene solo la seccion seleccionada de la seleccion anterior. Es dificil de entender, asi que si no entendieron solo experimenten.

Alisado - alisa los bordes

Difuminar los bordes - si lo aplicamos, “mezclara” los bordes en el radio que le indiquemos (el control del radio aparece cuando aplicamos la opción).

Esquinas redondeadas - eliminara las puntas del rectángulo, redondeandolas al radio indicado (el control del radio aparece cuando aplicamos la opción).

Expandir desde el centro - cuando seleccionamos empezamos por un costado, esta opción permite empezar desde el centro, expandiéndolo hacia afuera.

Fijo - permite poner medidas predeterminadas a la selección (antes de seleccionar). Tenemos proporción de aspecto (en este caso esta en 1:1, un cuadrado, la altura y el ancho son iguales). Anchura, Altura y tamaño nos permiten poner la medida deseada para cada caso.

Posicionar - determinar la posición de la selección en la capa.

Tamaño - nos permite cambiar el tamaño de la selección activa (luego de haberla hecho).

Selección - si la aplicamos muestra oscurecido todo aquello que no este seleccionado.

Guías - si aplicamos alguna, nos mostrara lineas en la selección actual.

Encoger lo fusionado - cuando seleccionamos y encojemos la misma, solo lo hacemos en la capa que estemos “parados”, si aplicas esta opción, lo harás en todas las capas.

Selección elíptica: selecciona un área elíptica que indiquemos. (ya parezco la ayuda de windows vista).

Las opciones son exactamente las mismas que la de selección rectangular, ya que son herramientas iguales, salvo que ya no esta “esquinas redondeadas” (por algo obvio no?).

Selección Libre: nos permite seleccionar zonas como si estuviéramos usando un lápiz, a mano alzada. Si no terminamos de cerrar la selección, Gimp uniera el punto de partida y el final para cerrarla.

Sus dos opciones (alisado y difuminar bordes) ya las hemos visto.

Selección Difusa (o mágica): selecciona el área de colores parecidos (solo el área cercana donde hagamos click).

Aquí aparecen 4 opciones nuevas:

Selección de área trasparente - podremos seleccionar zonas en las que no aya completamente nada, que estén transparentes.

Muestra combinada - esta herramienta solo selecciona en la capa que estemos usando, pero si aplicamos esta opción, podremos seleccionar lo que este mas arriba en las capas, sin necesidad de estar en ella.

Umbral - al subir el grado de umbral, la herramienta sera menos sensible, seleccionando también colores parecidos.

Seleccionar por - aplicar esta herramienta solo a tonos específicos de colores.

Selección por color: igual a la herramienta “selección difusa”, salvo que se aplica globalmente, cuando hagamos click en algún color, se seleccionara en todo la imagen.

Sus opciones ya las hemos visto en “selección difusa”.

Tijera de selección: puedes seleccionar formas, con un ajuste de bordes inteligente, también puedes modificar los puntos en los cuales has hecho click.

Sus opciones ya son sabidas.

———–

Nos quedan dos herramientas por ver, pero como no nos serán útiles por ahora y son mas complejas que las demás, las dejaremos para después.

No se asusten, no todo sera teoría, ya se vendrá lo divertido…

Etiquetas: herramientas de seleccion en gimp, tutorial de gimp

Bordes de CSS

La base de un buen post es una buena imagen que acompañe, claro esta que tienes que escribir algo interesante y no usar la misma imagen que 500 sitios, algo obvio, pero poco respetado…

El problema cuando la imagen no tiene el mismo fondo que el blog, queda re colgada (como si fuera una publicidad). Para eso sirven los bordes, pero modificarlas una una es un trabajo tedioso. Digamos que para este problema, la solución es CSS.

El CSS es un lenguaje de estilo, no es que este a la moda, sino que permite agregarle estilo a todo lo que este dentro del blog.

En Web Designer Wall han publicado una linda galeria de estos bordes hechos en CSS, y nos explica como agregarlos a nuestras imagenes.

Logo facil, con Logo ease

Un sitio web, tomado desde el punto de vista de como un producto,  es recordado por varias razones, pero una de las importantes es tener un logo que a la gente le guste, uno simple, profesional, y que resuma el producto/web en imagenes.

Como no todos tienen el tiempo y capacidad de crear un buen logo (ni yo :P, sino miren los de esta red), para eso tenemos a Logo ease, un servicio web gratis (con niveles de servicio pagos) en donde podremos crear nuestro propio logo en poco tiempo y esfuerzo.

Tu haces click en “Start your logo” y te abrirá una nueva ventana (tendrás que desbloquearla si utilizas firefox), en el cual en tres pasos podrás tener tu logo terminado. Primero debas seleccionar una imagen, luego escribes lo que quieras y por ultimo lo guardas. Realmente es algo simple, pero es mejor que solo letras.

Vía | tendenciasdigitales

Capas en Gimp

¿¿¿¿¿Que es lo que hace Gimp que es tan diferente del paint?????

Una de las cosas diferentes es que en paint solo tienes una capa para hacer tus diseños o retoques, en Gimp tienes infinitas capas.

Las capas son como si fueran hojas de trabajo una arriba de la otra, en las que puedes hacer modificaciones en una sin alterar las demás. Para entenderlo mejor analizaremos un ejemplo.

La imagen esta compuesta por 8 capas:

La que dice “fondo” es la capa que viene por defecto al crear una nueva hoja, esta modificada, pintada de un color en el medio y borrada la parte de abajo.

ATENCIÓN:  lo que se ve como cuadrados grises en realidad es transparente.

Luego cree las otras capas con el primer botón debajo de la ventana “capas”.

Las capas que dicen letra “x” contienen las letras de GIMP. Las dos que tienen un ovalo blanco, una es la original y la otra es la copia creada con el cuarto botón debajo, la copia esta movida. Ambas capas están a un 30,2% de opacacidad (creo que invente una palabra), esto es lo mismo que transparencia, y lo podemos manejar en la ventana capas.

Hay una capa en especial, la “mancha roja”, la cual no se ve, es porque apretando sobre el ojo a la izquierda de la capa, esta deja de estar visible.

En este caso el orden de los factores SI altera el producto, si ponemos una capa encima de la otra, esta, en el área que tenga algo, tapara a la de abajo.

Método de guardado…

Cuando guardes la imagen podrás seleccionar el tipo de extencion que quieras:

En el caso que quieras que la imagen se guarde en capas, para modificarlas después, tienes que guardarla en .xcf, el formato de Gimp.

Bueno… creo que ya esta todo lo basico para manejar capas, luego veremos como manejar mascaras y canales alfa. Si falto algo aqui o quieren hacer un aporte solo comentenlo.

El logo de Google

Hoy al levantarme he enchufado el odenador y mi sorpresa, al igual que ayer, ha sido ver el logo de google cambiado.

Me he dado una vuelta por la red y he intentado averiguar a que se debia tal cambio. Ayer, ya estube haciéndolo, pensé en postearlo, pero al final lo dejé. Pero hoy, gracias a Adseok y a abadiadigital, si que me he decidio a postearlo, porque dos cambios en dos dias, son muchos cambios!!

Así pues, parece ser que el logo de Google de hoy, es debido a que hoy celebran el aniversario de la invención del primer láser. El aspecto del logo es algo futurista, bastante inusual en Google. El especto del logo, no es que me apasione. Yo soy algo mas “normal”. Por ejemplo, me gustaba mucho mas el de ayer.

Así pues, este es el aspecto que ayer podiamos encontrar en Google. Como he dicho, a mi me gustan mucho mas este tipo de logos. Mas sencillitos, mas tradicionales. La razon por la cual Google cambió el logo de ayer, es la misma que hoy. Ayer celebraran la primera proyección cinematográfica, que tuvo lugar en 1896.

¿Queres una MacBook Air mas 1000 euros?

Bueno, ponte las pilas y diseña!!! Ya que Liceo Grafico ha abierto un concurso para encontrarle dueño a la solitaria Air.

Debes diseñar el nuevo logotipo que identificara a la empresa y a su pagina web, puede participar cualquiera y tiene un tope de dos diseños por participante. Tienes hasta el 15 de junio del 2008 para enviar tus diseños.

Si no ganas, no importa (mentira si que importa), a todos los participantes de darán un bono de descuento de 100 euros para trabajos superiores a 300 euros en el liceo gráfico.

Suerte!!!!

Web | Liceo Gráfico

Tutoriales de Gimp

Con este primer post empezamos el proyecto de una serie de tutoriales.

En este caso elegí empezar con el programa de diseño Gimp, el cual es multiplataforma y con licencia libre, en el cual podemos realizar todo tipo de diseños y retoques en imagenes o fotos. Este programa seria una alternativa libre de ya conocido Photoshop.

Este tutorial abarcara TODO Gimp, sera bastante largo, pero valdrá la pena, también pienso recopilar los mejores tutoriales para realizar templates, logos, efectos, tipografias, etc. y los mejores agregados, como pinceles, degradados,efectos, scripts (los cuales aprenderemos a crearlos), fuentes, etc. Al final de cada entrega podrán descargarse el correspondiente tutorial en formato PDF.

Damos Inicio al Tutorial:

Preparando todo:

1. Descarga…

La forma de obtener Gimp varía según el sistema operativo que tengas (Linux, Mac, Windows), En todos los casos su utilización es completamente libre y gratuita.

Linux

No es necesario descargarlo por nuestros medios

Windows

Podrás encontrar la descarga aquí

2. Instalación…

Linux

Algunas distribuciones linux tienen el programa llamado “Añadir o quitar programas”, puedes buscarlo e instalarlo desde allí.

Otra forma es pegando la linea que corresponda a tu distribución, en la consola.

• En Debian y derivadas: apt-get update && apt-get install gimp

• En SuSE y OpenSuSE: yast -i gimp

• En RedHat, Fedora y derivadas: yum install gimp

• En Mandriva y derivadas: urpmi.update -a && urpmi gimp

• En Gentoo y derivadas: emerge –sync && emerge -u gimp

Y ya esta instalado listo para usar.

Windows

Ya teniendo el archivo descargado, haces click sobre el.

Aparecerá el asistente de instalación, apretamos dos veces “Next” y luego en “Install Now”, y así terminamos la instalación y ya lo tendremos listo para utilizar.

Espero que aya sido lo bastante claro, y cualquier consulta usen los comentarios.

Uno bueno… Open Movie Editor

Si hace tiempo que usas GNU/Linux te habrías dado cuenta que carece de programas para edición de video lineal (con esto me refiero a crear un video con clips, fotos, transiciones, texto, etc). Capaz probaste varios, pero ninguno te dio los resultados esperados, por ejemplo: Lives (pocas opciones), cinelerra (difícil de entender), diva (discontinuidad del desarrollo), kde en live (pocas transiciones), etc.

Trate de instalar algún programa de plataforma windows, pero tampoco pude.

Hasta que me entero de la existencia de Open Movie Editor…

Puedes descargarlo para el sistema operativo y distribución GNU/Linux que quieras, desde aquí.

(si tienes algún derivado de Debian: sudo aptitude install libgavl openmovieeditor)

Y los efectos aqui (gracias a el amigo Karlinux por crear el .deb)

Via | KARLINUX

Web | Open Movie Editor