Aprenderemos a armar un sitio, organizar los archivos y posteriormente crear un cabezal de página, utilizando Dreamwever, HTML y CSS. La idea es mostrar como se trabaja en Dreamweaver utilizando estos dos lenguajes con el objetivo de explotar al máximo las bondades del programa y así facilitar las tareas de armado.

Los videos están en HD y es recomendable verlos a pantalla completa.

¡Espero le puedan sacar provecho!

Desde acá pueden descargar los archivos que mostramos en el videotutorial.

Seguir leyendo »

Publicado por: negro

 

Interesante ¿no?; este menú no utiliza imágenes ni javascript. Únicamente está compuesto por una lista de definición “dl” con listas desordenadas “ul” anidadas, CSS2 y CSS3 para aplicar el diseño.

Ustedes se preguntarán, ¿Se puede ver bien en todos los navegadores?, la respuesta es si; el objetivo es que este menú se vea correctamente en todos los navegadores; evidentemente existen versiones de navegadores en los cuales no se pueden ver detalles realizados con CSS3, pero lo importante es que el menú siga siendo funcional y usable. También habrán navegadores en los cuales no luzca con las esquinas redondeadas, pero en estos las esquinas aparecerán rectas sin alterar nada de su funcionalidad.

Por tanto, el famoso cross browsing deja de ser un problema cuando se contempla que para los navegadores más viejos, se mantenga la funcionalidad y no se desvirtúe la estética.

Hoy día, CSS3 nos permite diseñar prácticamente todo con estilos, de hecho este menú, ni siquiera fue bocetado antes, sino que el resultado decanta de experimentar con etiquetas HTML y propiedades de CSS.

En los comentarios del código pueden leer que hacen las diferentes propiedades y como se aplican.

Importante:
En IE6 los ítems ya aparecen desplegados, dado que esa versión solo soporta pseudo-clases en la etiqueta “a”.
En algunas versiones de IE, puede que no se vean las esquinas redondeadas, los efectos de sombra o degradados.

Ver HTML de ejemplo

¡Hasta pronto!

Seguir leyendo »

Publicado por: negro

 

El décimo desafío de ABC ha abordado el retoque fotográfico, esta vez el objetivo era intervenir el retrato de una interesante anciana del pueblo de Candelario, España. Felicitaciones al ganador, osvaldo y a todos los que se animaron a participar, presentando trabajos muy interesantes. Los desafíos no hacen más que permitirnos aprender, mostrar nuestro trabajo, divertirnos y porque no, ganarnos un humilde premio ;)

Acá pueden ver todos los trabajos ganadores y debajo, la imagen del antes y el después del trabajo ganador:

retoque ganador

¡Hasta pronto!

Publicado por: negro

 

En este artículo aprendimos a realizar nuestros propios iconos; ahora, si no dispones del tiempo suficiente o no te resulta rentable hacer tus propios iconos, acá te brindamos una amplica gama de packs de iconos gratuitos para que puedas descargar y utilizarlos en tus proyectos.

Iconos Super realistas

Los iconos super realistas son aquellos realizados a partir de ilustraciones que rozan la realidad, muy cercanos a una fotografía. Denotan un arduo trabajo de expresión, representan fielmente la iluminación, texturas y formas. Estan lejos de la caricatura, no exageran la realidad sino que tratan de imitarla. No son iconos recomendables para representar conceptos, ya que no abstraen practicamente nada. Pueden ser utilizados como elementos ilustrativos que acompañen contenidos de texto.

iconos Super realistas
Descargar | Fuente: Solo Ubuntu

Seguir leyendo »

Publicado por: negro

 

Cuando hablamos de tendencias de diseño, nos refereimos hacia dónde se dirige el diseño en estos días; como son las nuevas interfaces gráficas, su estética y usabilidad sumada a la capacidad de funcionamiento. Posiblemente este sea el artículo que más fácil pierda validéz en el tiempo; esto está estrechamente relacionado a los avances tecnológicos en Internet. Las tendencias en el diseño web dependen en su gran mayoría de estos avances informáticos; aunque también son impuestos indirectamente por empresas líder en el mercado tales como Apple, Google, Microsoft, Yahoo, etc.

Cuando los diseñadores hacen su trabajo, siempre tienen presente (o deberían) que están diseñando para los usuarios, por lo tanto, no están realizando una obra de arte personal sino una interfáz que será usada por cientos, miles o millones de usuarios, y que el éxito de su trabajo, dependerá casi exclusivamente de su capacidad para seducir a la mayor cantidad de usuarios.

Los avances tecnológicos en el área de la informática insiden de forma tan directa sobre el diseño y desarrollo de los sitios web que se convierten prácticamente en revoluciones. Veamos un ejemplo de esto; cuando Macromedia en el año 2003 desarrolla el formato FLV de video, se produce un cambio radical en cuanto a la utilización de video en Internet, los videos lograron bajar sensiblemente su peso y se podían empezar a ver utilizando streaming (miro el video mientras termina de cargar). A partir de ese momento comienzan a aparecer una serie de aplicaciónes nuevas, entre las que se encuentra la principal de todas, Youtube.
Los sitios desarrollados en flash empezaron a mostrar dentro de sus composiciones, clips de videos compuestos junto a los demás elementos gráficos. Esto antes era impensado, ya que no existía un formato de video tan versátil.

Este ha sido un pequeño ejemplo que nos da la pauta, de como los avances en la informática influyen casi directamente en el desarrollo de sitios web y por supuesto también en nuestro trabajo diario como diseñadores.

He seleccionado algunos sitios con distintas características, simplemente con el objetivo de mostrar la dirección que está tomando Internet y el diseño en estos días. Los mismos no solo marcan tendencia sino que logran resolver a la perfección el objetivo que se trazaron utilizando los avances de la tecnología a su disposición.

Greenpeace – A New Warrior

http://anewwarrior.greenpeace.org/

Greenpeace

Este es el sitio que ha creado Greenpeace para mostrar el proyecto del barco “A new warrior” y permitirle a los usuarios participar de la fabricación del mismo comprando sus piezas.
Esta una increíble experiencia de video, sonido, animación, 3D y gráficos de planos de construcción; creado en Flash con AS3.
Los videos explotan al máximo el espacio del navegador y forman parte de la gráfica del diseño, no utilizan players sino que aparecen como pequeños clips que se componen con el resto de los elementos, botones, iconos, títulos, etc. En la home podemos seleccionar una sección del barco desplazarnos a lo largo de la pantalla y aplicando una máscara sobre la imagen real del barco, de esta manera podremos ver el esqueleto y dirigirnos a los planos de cada sector y ahí seleccionar una parte para efectuar el proceso de checkout como en cualquier sitio de comercio electrónico.

Seguir leyendo »

Publicado por: negro