• 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

recursos

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.

Iconos gratis sobre WordPress

Sebastián Thüer · 10.05.2011 ·

Envanto está celebrando que su sitio ThemeForest llegó a los 1000 temas para WordPress con una colección de iconos relacionados con este sistema de gestión de contenidos. No creo que sirvan demasiado para ponerlos en producción, pero sin interesantes de analizar desde el punto de vista conceptual y gráfica porque  salen un poco de lo común y exploran nuevas metáforas.

La estrategia de promoción elegida es presentarlos como una contienda entre dos estudios de diseño. Los usuarios pueden votar el set que más le gusta además de descargarse ambos paquetes con licencia GPL. Una propuesta original y de calidad.

Set I por SoftFacade

Sett II por TurboMilk

Ir a la página 1000 WP Themes

Una herramienta para manejar las resoluciones de pantalla en diseño web

Sebastián Thüer · 02.05.2011 ·

Uno de los dolores de cabeza más frecuentes en el diseño web es lidiar con las resoluciones de pantalla. Mientras en la gráfica optimizamos la composición para un tamaño determinado, los diseños que salen por pantalla pueden ser reproducidos en infinidad de condiciones: desde la pantalla de un smartphone hasta un LCD de 42 pulgadas.

No es solamente una cuestión de tamaño. El problema también afecta al ratio, es decir, la relación entre el alto y el ancho de la pantalla. Podemos tener ratios que van del 3:5 al 16:9 con lo cual las proporciones y distribución de los elementos varía considerablemente.

Punchcut es una empresa de diseño especializada en experiencias móviles y convergencia de dispositivos que ha puesto a disposición de los diseñadores un interesante set de recursos para contemplar el diseño con múltiples dispositivos. En un ZIP ofrecen una serie de PSD de base con el diseño en los dispositivos más frecuentes, un archivo con los ratios y resoluciones más habituales un archivo TPL para Photoshop con los preseteos para cada caso.

  • Ir Punchcut

Diseño web con HTML5: 10 recursos para comenzar ya

Sebastián Thüer · 21.02.2011 ·

El HTML5 está a la vuelta de la esquina. Aunque la especificación todavía no está aprobada, cada vez más diseñadores y desarrolladores web se animan a iniciar sus proyectos con el futuro estándar. Para que iniciar un proyecto en HTML5 no sea un quebradero de cabeza, acá hay una recopilación de diferentes recursos que permiten comenzar rápidamente el diseño web en la nueva versión del HTML.

Está lista actualiza el viejo post de 2009 con 5+5 recursos para HTML5. Si no tenés idea de HTML5, mirá primero HTML5 para diseñadores web.

1. Modernizr

Moderniz es una librería JavaScript que permite incorporar HTML5 y CSS3 a tus proyectos sin que los antiguos navegadores que no soportan las nuevas tecnologías queden imposibilitados de ver tu sitio. Por ejemplo, se pueden utilizar los nuevos tags semánticos como HEADER, SECTION o FOOTER sin tener que preocuparse por no estar soportados en Internet Explorer.

  • Más sobre Modernizr

2. HTML5 Shiv

Una librería específicamente desarrollada para que las etiquetas HTML5 y CSS3 puedan ser interpretadas por Internet Explorer. El proyecto está hosteado en Google Code y no que hay que descargar ni configurar nada. Basta incluir unas líneas en el código y es suficiente.

  • Más sobre HTML5 Shiv

3. HTML5 Boilerplate

Es una plantilla HTML5 para desarrollar rápidamente un proyecto con las opciones y configuraciones más habituales. No es un framework, sino solo una recopilación de diferentes técnicas y trucos comunes en todo proyecto web que utilice HTML y CSS3.

  • Más sobre HTML5 Boilerplate

4. Initializr

Es un proyecto que funciona como una recopilación de diferentes librerías y recursos de HTML5. En su página web elegimos una serie de opciones a partir de las cuales nos genera un ZIP con todos los archivos necesarios. Puede incluir Modernizr, HTML5 Shiv, jQuery, configuración para .htaccess y más.

  • Más sobre Initializr

5. HTML5 Reset

Se trata de una completa plantilla que incluye todos los elementos más habituales en un proyecto con HTML5. Incluye HTML, CSS y JavaScript. Hay tres versiones disponibles que van desde la completa con comentarios muy buenos para aprender y la básica solamente con la estructura general.

  • Más sobre HTML5 Reset

6. Switch To HTML5

Un sencillo generador online de HTML5 basado en una serie de opciones que puede definir el usuario. Ideal para comenzar y obtener resultados rápidos sin complicarse demasiado.

  • Más sobre Switch To HTML5

7. HTML5 Lint

Con HTML5 la validación del código es un asunto delicado. En lugar de la consistencia que proponía el escricto estándar XHTML, HTML5 vuelve a ser más laxo y mantener el código coherente se hace más difícil. HTML5 Lint ayuda a los desarrolladores a mantener la consistencia original en HTML5 a través de una serie de opciones que validan la escritura en minúscula, el uso de comillas para los valores de atributos, el cierre de todas las etiquetas y otras reglas de sintaxis. Ideal para puristas del código.

  • Más sobre HTML5 Lint

8. HTML5 Doctor

Uno de los primeros sitios dedicados a HTML5 que se ha convertido en una verdadera fuente te recursos para este lenguaje con publicación regular de artículos, novedades y algunos tutoriales. También es interesante su sitio hermano HTML5 Gallery con una muy buena selección de sitios web que implementan HTML5.

  • Ir a HTML5 Doctor

9. HTML5 Rocks

Otro excelente centro de recursos sobre HTML5 con el auspicio de Google y del que ya publiqué una presentación sobre HTML5. HTML5 Rocks combina información con tutoriales y al mismo tiempo nos deja ver en vivo las mejoras que ofrece el nuevo lenguaje de la web. Para pasar un buen rato recorriendo y aprendiendo.

  • Ir a HTML5 Rocks

10. HTML5 Reference Poster

Un impresionante poster de 10 x 7 metros con un buen resumen de las especificaciones del HTML5. Un diseño equiibrado y armonioso junto a el uso de iconos ayuda a identificar fácilmente los diferentes aspectos de la nueva especificación. Un buen recurso de decoración-consulta en la oficina y para clases de tecnología.

  • Ver HTML 5 Reference Poster

#Bonus: HTML5 for Beginners

HTML5 for Beginners

HTML5 for Beginners es un libro escrito por Jeremy Keith especialmente para diseñadores web que quieran iniciarse en los futuros estándares de la web. De manera ágil y sencilla, Keith introduce las principales novedades de HTML5 con ejemplos y casos prácticos. Un texto breves pero tremendamente útil publicado por A Book Apart. Cuesta 18 dólares más envío en versión papel y 9 dólares el eBook (ePub y PDF abierto sin restricciones).

Ilustración principal a partir de una imagen de BigStockPhoto

Interfaz gráfica en PSD para el diseño en móviles

Sebastián Thüer · 25.01.2011 ·

La creación de interfaz para aplicaciones de smartphones o teléfonos móviles inteligentes es un interesante campo de trabajo que se abre a muchos diseñadores de interacción o UX. Una vez realizado el wireframe llega la hora de componer el diseño de pantalla para que los desarrolladores puedan ver con claridad como lucirá la aplicación en marcha. Es en estos casos que resulta intesante contar con los cada vez más populares kits que reúnen todo los elementos de la interfaz gráfica de un dispositivo.

iPhone 4 GUI (retina) por Rich Hemsley

Ver iPhone 4 GUI (retina)

iPhone PSD Vector Kit

Ver iPhone PSD Vector Kit

iPhone GUI PSD Version 4

Ver iPhone GUI PSD Version 4

RIM BlackBerry

Ver RIM BlackBerry GUI

BlackBerry Storm

Ver BlackBerry Storm GUI

BlackBerry Bold

Ver BlackBerry Bold GUI

Android GUI PSD

Ver Android GUI PSD

Google Nexus One GUI

Ver Goole Nexus One GUI

HTC Diamond

Ver HTC Diamond GUI

Motorola Droid

Ver Motorola Droid GUI

LG KS360

Ver LG KS360 GUI

Nokia 5800 Xpress Music

Ver Nokia 5800 Xpress Music GUI

¿Encontraste un kit para algún otro modelo? ¿Tenés un aporte propio? Dejá en enlace en los comentarios.

  • « Ir a la página anterior
  • Página 1
  • Página 2
  • Página 3
  • Página 4
  • Página 5
  • Página 6
  • Página 7
  • Ir a la página siguiente »

Sebastián Thüer

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