• 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

Pure CSS3 Lightbox: Galería de fotos en una sóla página sin JavaScript

Sebastián Thüer · 06.06.2011 ·


Probablemente Ligthbox se uno de los plugins de JavaScript más extendidos en los diseñadores web. Si no lo conocés, se trata de un código JavaScript que sirve para generar galería de imágenes donde el usuario puede previsualizar y ampliar fotografía en mayor tamaño sin necesidad de recargar la página.

Se utiliza en muchos sitios web porque se trata de una solución práctica, sencilla y muy elegante. En el sitio de mi estudio de diseño web podés ver un ejemplo.

Sin embargo, la potencia de CSS3 permite que un comportamiento bastante similar pueda emularse sin necesidad de JavaScript ¿Las ventajas? Velocidad, facilidad de mantenimiento y código más liviano. El estudio Deaxon presenta este interesante experimento de emular a LightBox sin una sola línea de JavaScript.

Si bien todavía no todos los navegadores tienen soporte total para CSS3, el futuro parece estar en esa dirección: cada vez más efectos visuales en CSS.

El código del ejemplo anterior lo encontrás aquí (clic en la pestaña Source Code).

LayerStyle: Crear efectos con CSS3 como si fuesen capas de Photoshop

Sebastián Thüer · 03.06.2011 ·

Si el HTML dio un salto con HTML5, CSS hace lo mismo con CSS3 ¿Qué hay de nuevo en esta versión del archivo de estilo? Básicamente, muchos cosas que antes requería de ciertos trucos ahora se pueden hacer directamente desde CSS sin la necesidad de utilizar imágenes.

Bordes redondeados, sombras y fondos degradados ahora se pueden trabajar de manera directa en CSS. Eso sí, la sintaxis también se ha hecho algo más compleja porque -como toda novedad en la industria- los desarrolladores de navegadores no se ponen de acuerdo y hay que utilizar propiedas específicas.

Seguramente que para el trabajo detallado es necesario aprender la sintaxis, pero como un primer acercamiento no está demás mirar algunas herramietnas como LayerStyles que se encargan de generar el código automáticamente utilizando una interfaz mucho más amigable para un diseñador: la ventana de capas de Photoshop.

Aunque ciertamente no es 100% igual, se acerca bastante el código generado sirve para los diferentes motores de navegadores que soporten CSS3 como WebKit (Chrome, Safari) , Gecko (Firefox, Camino) y el nuevo Internet Explorer 9.

El resulta es bastante bueno, aunque a veces puede que la pantalla del navegador se congele si agregamos demasiados efectos. Igualmente el proyecto de Felix Nicklas es de código abierto con lo cual es esperable que se vaya mejorando.

Obviamente, esta herramienta utiliza HTML5.

La historia del diseño web

Sebastián Thüer · 26.05.2011 ·

El tema de una «historia del diseño web» está comenzando a surgir con cierta fuerza en muchos blogs y publicaciones del sector, un indicio que muestra claramente la consolidación de esta disciplina y cómo es capaz de revisarse a sí misma para encontrar ciertos hilos o ejes a lo largo de los cuales se ha estructurado esta especialidad del diseño.

Si bien todavía muchas de estas revisiones están basadas en un recorrido visual por las páginas a lo largo de la historia, un rápido repaso comienza a mostrar como el campo ha evolucionado desde las primeras páginas que tenían enorme limitaciones en el diseño visual por los fuertes condicionamientos técnicos, a las posibilidades que brindan las tecnologías de hoy donde -desde mi punto de vista- muchos recursos estéticos propios de la web han llegado a la gráfica.

Web design history, a complete journey es un impresionante post publicado por Web Design Shock donde hay un recorrido bastante exhaustivo que comienza en los 90 y donde pueden verse algunas pequeñas joyas como esta portada del sitio de Mc Donalds que hoy hasta nos parece dañino para la vista.

De los colores en 16bits, tipografía de sistema y enlaces azules hemos pasado un intensivo tratamiento del color, las tipografías web embebidas y, fundamentalmente, el CSS que fue imprescindible para que toda la historia del diseño visual no quedase de lado en la web.

Un caso particular es el de Apple, probablemente la empresa que más fuerte marca tendencia en el diseño. En The Evolution of Apple.com podemos apreciar la evolución del sitio web donde encontramos las principales tendencias del momento. Sin embargo, hay constantes: el minimalismo, la temprana apuesta a las pestañas como elementos central de navegación, el cuidado uso del blanco y la referencialidad de las imágenes.

¿Qué otros elementos recordás de los primeros sitios web? ¿Qué cosas han cambiado para bien? ¿Y para mal?

HTML5 Snippets, porciones de código HTML y CSS listo para usar

Sebastián Thüer · 19.05.2011 ·

En el diseño o desarrollo para la web es bastante habitual reutilizar porciones de código con cuestiones que ya hemos resulto. Un formulario de login o de contacto, un sistema de paginación para una tabla con mucho datos o un menú de navegación son opciones que están presentes en muchos proyectos. 

Una solución para la gente organizada consiste en crearse una pequeña librería de snippets, es decir, porciones de código con cada uno de los recursos a los que necesitaremos recurrir a futuro. Sin embargo, una biblioteca privada tiene poco que ver con la web 2.0 de hoy en día.

Por eso la idea es HTML5Snippets es muy sencilla pero potente: crear una repositorio donde buscar y compartir estas pequeñas porciones de código. Además de HTML, también hay CSS.

Algunas fragmentos de código interesantes que encontré:

  • Realizar geolocalización con Google Maps
  • Caja con sombra simétrica por CSS
  • Manipular imágenes por CSS (rotación)

En fin, el proyecto todavía está en estado alpha y que, espero, prospere.

Guías de estilo sobre interfaces de usuario

Sebastián Thüer · 12.05.2011 ·

En el campo de comunicación los documentos sobre cómo confeccionar un producto son una constante. Desde la investigación científica -donde suele haber estrictos formularios para completar con el fin de pedir subvenciones y ayudas- hasta la práctica periodística y la comunicación visual.

En general, el objetivo detrás de estas guías es establecer una serie de pautas comunes que garanticen un mínimo de calidad y, a la vez, permitan estandarizar prácticas y consolidar la información en grandes organizaciones. 

En las interfaces de usuario hay muchas cuestiones que resolver que a veces no están tan a la vista para quienes no trabajan en esta área ¿Debo mostrar el botón de aceptar a la derecha o izquierda? ¿En qué casos abro una nueva ventana y cuándo muestro la información dentro de la actual? ¿Hay alguna restricción sobre el tamaño de las imágenes? ¿De qué tamaño son los iconos?

Las grandes empresas tienen normas estrictas acerca de cómo deben lucir las aplicaciones, plugins o software que se ejecute dentro de sus sistemas. En The UX Bookmark han recopilado una lista bastante exhaustiva sobre guías de estilo para diseñar interfases gráfica y de usuario. Apple, BBC, BlackBerry, Cambridge University, Microsfot, Nokia, Yale University y Yahoo son algunas de las organizaciones que integran esta lista.

La utilidad de esta guía no reside solamente en decirnos cómo diseñar para tal o cual sistema o plataforma, sino para analizar como se han sistematizado un conjunto de prácticas relacionadas con el diseño de interfaces y, si interesa, servir cómo punto de partida para construir nuestra propia guía.

  • A huge list of Style Guides and UI Guidelines

  • « Ir a la página anterior
  • Página 1
  • Páginas intermedias omitidas …
  • Página 19
  • Página 20
  • Página 21
  • Página 22
  • Página 23
  • 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