• Saltar a la navegación principal
  • Saltar al contenido principal

Sebastián Thüer

Comunicación, diseño y tecnología

  • Acerca
  • Blog
  • Contacto
  • Show Search
Hide Search

Diseño Web

Edge, una herramienta de Adobe para animaciones con CSS

Sebastián Thüer · 05.08.2011 ·


Una de las características novedosas de CSS3 es la posibilidad de realizar animaciones. Básicamente, a través de un conjunto de instrucciones es posible manipular un objeto para rotarlo, desplazarlo por la pantalla y modificar algunas de sus propiedades. Sin embargo, puede ser una tarea bastante compleja y abstracta para realizarlo desde una línea de código.

Consciente de ello Adobe Labs acaba de lanzar Edge, una herramienta destinada a que los diseñadores puedan animar contenido mediante una interfaz visual sencilla y fácil de manejar. Si vemos la captura de pantalla que han publicado en hacks.mozilla.org, la interfaz recuerda bastante a las primeras versiones de Flash:

Esta versión de Edge hace foco fundamentalmente en agregar animación enriquecida a proyectos de HTML para que se vean bien en diferentes dispositivos. Entre otras cosas ofrece:

  • Herramientas de dibujo y texto
  • Importar gráficos en formato SVG, PNG; JPG y GIF
  • Editor con línea de tiempo para animar modificando posición, tamaño, color, forma, rotación y más propiedades
  • Agregar animación a un proyecto existente sin modificar el diseño en HTML/CSS existente
  • Copiar y pegar transiciones, invertirlas y escoger entre más de 25 efectos predeterminados

Primeras impresiones

Las diferentes evaluaciones que hay de esta herramienta parecen orientarse en dos direcciones. Por un lado, los entusiastas de Adobe lo ven como el próximo estandard en animaciones simples para la web ya que realemente es sencillo de operar y permite realzar visualmente una diseño en poco tiempo.

Del lado más crítico, señalan que el código es bastante enredado y se basa en superpoblar de DIVs la página con lo cual seguir el código puede ser bastante complejo. Agregan, que en realidad no usa CSS puro sino que utiliza también la biblioteca jQuery. Los más puristas, también le achacan que no se utilice el poder semántico de HTML5.

Adobe Edge está en beta y se ofrece de forma gratuita para los usuarios registrados en Adobe.

Contrast Rebellion, manifiesto contra el bajo contraste en la web

Sebastián Thüer · 03.08.2011 ·

Hay sitios que son fabulosos. Un diseño cuidado hasta el último detalle, gran organización del espacio, composición equilibrada y un gran estilo. Pero descuidan un aspecto crucial: el contraste para la lectura.

Contrast Rebellion es un manifiesto para favorecer el buen uso del contraste en el diseño web. Construido como una única página con scroll vertical, a lo largo de las diferentes pantallas se van desplegando argumento convincentes sobre por qué tener en cuenta un adecuado contraste que favorezca la lectura.

Además del contenido del sitio, los recursos utilizados en el sitio son muy interesantes e inspiradores. Me gusta especialmente la animación inicial del puño que gira el círculo partido en blanco y negro.

Comparando diferentes tipos de diseñadores y desarrolladores [infografía]

Sebastián Thüer · 25.06.2011 ·

Diseñadores gráficos, desarrolladores web, diseñadores web y desarrolladores de software. Esta infografía compara estas cuatro orientaciones laborales según indicadores demográficos básicos como genero, ubicación geográfica y nivel de ingresos.

Así tenemos que un diseñador web en Estados Unidos tiene un ingreso anual promedio de $64.000 dólares, contra $58.000 de su colega en Reino Unido o $9.000 en India. Donde los diseñadores gráficos ganan mejor es en Australia con un ingreso promedio de $74.000 dólares. Tanto en Estados Unidos como Australia es una profesión donde la mayoría (60% y 65% respectivamente) son hombres, mientras que en Reino Unido e India la prevalencia de hombres sube por arriba del 70%.

¿Cómo están los diseñadores web respecto de sus colegas en gráfica? Ganan algo menos -excepto en India-, hay más prevalencia de mujeres. Los desarrolladores -tanto web como de software- tienen un nivel de ingresos algo mejor y la proporción de hombres respecto de mujeres está cerca de 4 a 1.

Vía OneXtraPixel.com

HTML Email Boilerplate: Una plantilla para comenzar a diseñar newsletters

Sebastián Thüer · 16.06.2011 ·

El diseño de emails o newsletters es un área específica del diseño web. Lo que funciona para una página no se comporta de la misma manera en un mensaje de correo. Para los diseñadores suele ser un dolor de cabeza: de la misma manera que cada navegador implementa de forma diferente diferentes etiquetas y especificaciones, cada cliente de correo -ya sea de escritorio o web- tiene su propia manera de visualizar el código.

HTML Email Boilerplate es un interesante punto de partida que recoge hacks, trucos y recomendaciones para evitar tanto como es posible los problemas de visualización derivados de las múltiples plataformas de correo. Forzar a Hotmail a mostrar el correo en el ancho de pantalla total, visualizar correctamente los enlaces en Outlook, mostrar sin problemas el título y tamaño de los encabezados de texto (h1, h2, h3, etc.), evitar los colores que agrega Yahoo a los atajos de teclado y organizar el contenido correctamente en tablas son algunas de los temas que aparecen cubiertos en esta interesante plantilla que viene muy bien para comenzar a diseñar un newsletter.

Si te interesa el tema del diseño de newsletter y correos electrónicos aquí hay una buena presentación que resume bastante de los aspectos clave:

Email Workshop – Powell/Masterson (#11NTCEmail)

TN3 Gallery, un nuevo sistema galería de fotos en jQuery muy flexible

Sebastián Thüer · 08.06.2011 ·

El lunes presentaba una novedoso sistema de galería de fotos desarrollado puramente en CSS3. Sin embargo, cuando queremos algunas funciones más avanzadas o necesitamos garantizar compatibilidad con navegadores más antiguos necesariamente hay que recurrir a a Javascript.

A los múltiples sistemas de galería de fotos que hay se presenta uno nuevo: TN3 Gallery. Basado en jQuery, tiene muchas opciones de configuración y el diseño está cuidado en todos sus detalles.

La versión básica es gratuita y se puede descargar desde el propio sitio, mientras que la versión PRO cuesta USD $37 y la Multisite $97. Los múltiples efectos de transición, la precarga de imágenes, que tenga una API para trabajar con otras aplicaciones -características que no todos tienen- están presentes en la versión gratuita.

¿Qué obtenemos con la versión full, entonces? Básicamente, soporte prioritario y la posibilidad de remover los créditos ademas de otras características adicionales.

  • « Ir a la página anterior
  • Página 1
  • Páginas intermedias omitidas …
  • Página 11
  • Página 12
  • Página 13
  • Página 14
  • Página 15
  • Páginas intermedias omitidas …
  • Página 38
  • Ir a la página siguiente »

Sebastián Thüer

Creative Commons Atribución 4.0 Internacional © 2025 · Less Is More · Acceder