• 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

html5

Diseño web: Una selección de listas con lo mejor del 2012

Sebastián Thüer · 03.01.2013 ·

Es un clásico. A esta altura del año salen las clásicas listas de recopilación que repasan lo mejor y lo peor de cada rubro ¿Qué hay del diseño web? Varios sitios especializados han armado sus catálogos para presentar lo más destacado del 2012.

Podemos encontrar dos tipos de listas: las ilustrativas, que pretenden recoger los mejores diseños; y las conceptuales, que analizan las tendencias. Aquí una selección de estos listados que siempre conviene repasar para reconocer el contexto en el cual estamos haciendo diseño web.

Best of Web Design in 2012

best2012-01

Esta recopilación del blog especializado Web Design Ledger hace una selección de los diseños que más comentarios y debates despertaron en sus lectores. La selección es variada con cierta predominancia de diseños minimalistas, uso de grande fotos y tipografías y, en menor medida, algo de collage.

[tf_button link=»http://webdesignledger.com/inspiration/best-of-web-design-in-2012″ align=»center»]Ver[/tf_button]

The 30 Best Web Design Gallery Picks of 2012

best2012-02

La presencia cada vez más fuerte de HTML5, CSS3 y el diseño web adaptativo fueron las principales características del diseño web en 2012 según Design Shack que armó su propio listado donde sobresalen los sitios con amplias imágenes, tipografía preponderante y aquellos que tienen hacen uso del espacio con una cuidada composición.

[tf_button link=»http://designshack.net/articles/inspiration/the-30-best-web-design-gallery-picks-of-2012/» align=»center»]Ver[/tf_button] 

40 Super Creative And Crazily Unique Web Designer Portfolios: 2012

best2012-03

Si sos diseñador web y estás pensando en renovar tu portfolio deberías mirar este post de 1st Web Designer que recopila algunos de los trabajos online más creativos donde sobresale el uso de metáforas, el humor y especialmente un estilo propio que se advierte desde la misma página principal de cada sitio.

[tf_button link=»http://www.1stwebdesigner.com/inspiration/web-designer-portfolios-2012/» align=»center»]Ver[/tf_button]

15 top web design anddevelopment trends for 2012

best2012-04

En lugar de hacer una presentación de sitios este artículo propone reflexionar sobre cuáles fueron las principales tendencias del diseño web en el 2012 desde el punto de vista conceptual. Las mejoras progresivas gracias a HTML5 y CSS3, diseño web adaptativo y la recuperación de Flash como tecnología para animación y 3D son algunos de los elementos salientes junto a la importancia cada vez mayor de la optimización para dispositivos móviles.

[tf_button link=»http://www.netmagazine.com/features/15-top-web-design-and-development-trends-2012″ align=»center»]Ver[/tf_button]

50 Unique and Inspiring Website Designs 2012

best2012-05

En lugar de concentrarse en las tendencias este post propone revisar lo contrario: aquellos sitios que se destacaron por alejarse de las propuestas mayoritarias. Diseños coloridos, divertidos y artísticos predominaron en este original listado.

[tf_button link=»http://blog.wezile.com/2012/01/50-unique-and-inspiring-website-designs/» align=»center»]Ver[/tf_button]

20 experiential web design trends for 2012

best2012-06

«El diseño web sigue evolucionando por su propia naturaleza, como debe ser, para sacar el máximo provecho de los navegadores modernos y usar HTML5, CSS3 y jQuery para proporcionar una experiencia de usuario maravillosa para los propietarios de teléfonos inteligentes y tabletas», comienza diciendo este artículo que analiza las tendencias del año que pasó. Experiencia de usuario independiente del dispositivo, elementos fijados en pantalla, diseños para tocar, uso de grillas al estilo Pinterest, formularios de registro ultrarápidos y buscar una conexión emocional con el usuario son algunas de las claves que reconoce en el diseño web actual.

[tf_button link=»http://econsultancy.com/ar/blog/11005-20-experiential-web-design-trends-for-2012″ align=»center»]Ver[/tf_button]

Flowplayer, un reproductor de video en HTML5 listo para usar

Sebastián Thüer · 08.11.2012 ·

Flowplayer, reproductor de video con HTML5
Se acabaron los viejos tiempo de usar Flash para reproducir video. Con la llegada del HTML5 el uso de multimedia en la web no require de plugins adicionales sino que el propio lenguaje permite manipular elemetnos com video, imágenes vectoriales (con CSS3) y audio.

FlowPlayer es un reproductor de video que funciona sobre HTML5, CSS3 y JavaScript y tiene varias cosas interesantes. Se puede elegir entre tres interfases (skins) que se pueden personalizar, se adapta automáticamente al tamaño del dispositivo que reproduce el video -pantalla gandre, tablet o smart phone- y tiene bastantes funciones incorporadas: pantalla completa, uso de atajos de teclado, listas de reproducción, integración con Google Analytics para contabilizar las reproducciones de cada video y la posibilidad de crear enlaces hacia un punto específico (cuepoints).

El reproductor se incluye con un código bastante simple sin necesidad de las viejas etiquetas como IFRAME. Además, al estar basado en HTML5 es apto para la reproducción en iPad, iPhone y toda la gama de dispositos de Apple que no soporta la tecnología Flash. Aquí se puede ver a FlowPlayer en acción.

Además, el reproductor tiene una API para pasarle parámetros a través de JavaScript y se permite ser embebido al estilo YouTube. Se pueden descargar dos versiones: una gratuita con licencia GPL que incluye el logo de FlowPlayer y otra comercial para insertar la propia imagen corporativa.

El único problema: embeber un video con Flowplayer en WordPress da algunos problemas. Si bien existe un plugin, la verdad no es muy cómodo para alguien que enlace videos de terceros de forma ocasional.

Comprendiendo la semántica del HTML5 a través de un diagrama de flujo

Sebastián Thüer · 13.02.2012 ·

Logo HTML5Una de las principales características de HTML5 son sus posibilidades semánticas. Si antes usábamos DIV para dividir las diferentes unidades de información sin importarnos muchos sobre el tipo de contenido que había dentro, HTML5 nos ofrece un abanicio bastante más amplio: NAV, ARTICLE, ASIDE, SECTION, FIGURE y más.

La semántica es importantes porque ayuda a definir la naturaleza del contenido que se está mostrando. Si bien visualmente no hay grandes diferencias -podemos usar DIVs y modelarlo con CSS- desde el punto de vista lógico es mucho mejor que un intérprete como el el navegador pueda detrminar si lo que estamos mostrando es un menú para acceder a diferentes secciones, el artículo principal de una nota, una información complementaria o la sección de una monografía. En el futuro, seguramente los diferentes dispositivos harán uso intensivo de la semántica.

El problema para los diseñadores web es que a veces no está demasiado claro qué etiqueta utilizar en función del contenido que irá dentro. ¿Si es una noticia tengo que utilizar ARTICLE? ¿Si es la segunda parte de una nota en serie tengo que utilizar SECTION? ¿FIGURE se utiliza para tablas, ilustraciones, fotos o para todo?

Para ayudar a comprender mejor el funcionamiento de cada etiqueta el sitio HTML5 Doctor  ha elaborado un diagrama de flujo bastante clarificador. Para quienes no sepa cómo funciona esto es bastante simple: Se comienza en Start y hay que ir respondiendo las preguntas para deterinar qué etiqueta conviene utilizar. Ojo, si el contenido no tiene ningun valor semántico seguimos utilizando el viejo y conocido DIV.

Diagrama de flujo semántica HMLT5

HTML5: Qué herramientas conviene usar ahora y cuáles deben esperar

Sebastián Thüer · 01.02.2012 ·

Logo sitio html5please.us
Varias veces en este blog hablé sobre la conveniencia de comenzar a utilizar HTML5 en el diseño web. Desde la Guía de HTML5 para diseñadores web, esta presentación sobre HTML5 en 15 minutos hasta el listado de recursos HTML5 para comenzar ya.

De todas maneras, antes de correr a estudiar HTML5 hay que tomar nota que se trata de una versión de HTML en pleno desarrollo y que todavía hay algunas funcionalidades en modo experimental o que se van corrigiendo sobre la marcha. Por eso es interesantes darse una vuelta por HTML5please.us donde hay un buen listado de todas las funcionalidades del lenguaje, su estado de desarrollo y nivel de compatibilidad.

Por ejemplo, ya es hora de comenzar a utilizar border-radius para las esquinas curvas en lugar de emplear imágenes, pero hay que evitar siemprea que sea posible la etiqueta filters porque su sintaxis todavía no está fijada. Para utilizar tipografías online se recomienda @font-face pero asegurando la compatibilidad para navegadores que no soportan esta propiedad.

Captura pantalla sitio html5please.us
Captura pantalla sitio html5please.us

Lo mejor de todo es que la información funciona al estilo WIKI pero con un formato mucho más amigable y rápido para la consulta: se puede editar la información publicada, consultar qué navegadores soportan determinadas etiquetas y obtener enlaces para ampliar la información.

Ya estás informado: antes de lanzarte de lleno al HTML5 conviene darte una vuelta por HTML5please.us para verificar que las propiedades y etiquetas a utilizar sean soportadas de un modo estándar por los navegadores más modernos.

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.

  • Página 1
  • Página 2
  • Página 3
  • Ir a la página siguiente »

Sebastián Thüer

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