Diseño web en HTML5
Resumen: El diseño web en HTML5 todavía está muy reciente, pero hay que empezar a tomar más en serio este lenguaje y aprender a aplicarlo. En un futuro lo veremos en la mayoría de páginas web.
HTML5 promete ser el futuro del diseño web. Nos abre un repertorio de posibilidades que en algunos casos hasta ahora sólo podían usarse con lenguajes propietarios como Flash, o métodos no demasiado ortodoxos, como es el caso de los embed para incrustar elementos multimedia como videos.
Lo cierto es que el diseño web en HTML5 todavía está en pañales. Hace apenas unos años que empieza a surgir su desarrollo y aunque cada vez está calando con más fuerza en la comunidad de desarrolladores y los navegadores empiezan a darle soporte, aún no está suficientemente extendido y sobretodo soportado, como para usarlo a la ligera.
No sé si es el momento de lanzar proyectos en HTML5, o esperar a ver que pasa con las especificaciones y los modos de interpretarlas que vayan consolidándose por los navegadores. De lo que sí es el momento es de empezar a aprender y a experimentar con él. Yo personalmente lo estoy probando en alguno de mis proyectos.
El diseño web en HTML5 es más semántico
Personalmente me gusta mucho toda la parte de semántica que se le ha añadido al código HTML con la llegada de HTML5. Esa simplicidad por medio de etiquetas como <header> <article> o <footer> va a ahorrar a muchos diseñadores web la famosa divitis, o lo que es lo mismo, el usar divs para todo de manera excesiva. Ya no va a hacer falta poner algo como:
<div id="header">
Contenido del encabezado de la página
</div>
En HTML5 será esto lo que usemos:
<header>
Contenido del encabezado de la página
</header>
Como vemos, el diseño de una página web en HTML5 va a dotar al código fuente de mayor simplicidad y significado. Ya tan sólo el doctype que se usa al diseñar en HTML5 nos puede dar una idea de lo que han buscado con esta nueva versión: hacer las cosas sencillas, y sobre todo sencillas de entender.
El doctype típico en HTML o XHTML es este:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
Y este es el que se usa al diseñar con HTML5:
<!DOCTYPE html>
Como se puede apreciar, claramente simplificado.
Ser un diseñador web preparado para HTML5
El caso es que los diseñadores web, las agencias de diseño web profesional tienen que empezar a adaptarse a los cambios e ir integrando con cautela esta valiosa herramienta en sus desarrollos, en los servicios que se ofrecen a los cliente. A la mayoría les dará igual con qué lenguaje se desarrolla su proyecto, lo importante es el resultado, pero con el tiempo agradecerán ver sus páginas web más veloces o mejor posicionadas en Google.
Los diseñadores web debemos prepararnos para diseñar en HTML5, así que para abrir boca, os dejo el link a una cheatsheet (chuleta) de HTML5 con las etiquetas principales, su uso y atributos, o esta otra en la que están resaltadas las diferencias con HTML4. Yo la tengo imprimida desde hace mes.
Como no, no podemos olvidarnos de los maravillosos, resets de CSS, que nos hacen la vida mucho más fácil a la hora de maquetar una web. En este caso, ya tenemos reset para HTML5.
No olvidarse de CSS3
El uso de HTML5 va a ir de la mano de CSS3, así que no hay que olvidarse tampoco de preparase para este lenguaje que nos trae cosas tan útiles como bordes redondeados, degradados o textos animados, textos sombreados, simplemente con CSS puro. Cosas que hasta ahora necesitaban de uso de imágenes, javascript o incluso flash, ralentizando nuestras páginas web.
Publicado el 27/08/2010, última actualización 24/10/2011.
Seguir @laweberaLicencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.
Autor: Verónica Milán
URL: LaWebera.es :: Diseño Web
Añadir Comentario
Manuales y Artículos Web
- Manual de Diseño Web
- 8 Consejos para el diseño de un buen layout o estructura web
- Breve guía para iniciarse en el diseño web
- Principios de diseño web
- El balance en el diseño web
- El contraste en el diseño web
- Énfasis en el diseño web
- Ritmo o repetición en los diseños web
- El principio de la proximidad en el diseño web
- Utilización del espacio en blanco en el diseño de una web
- Empleo del color en el diseño de páginas web
- Tipografía aplicada al diseño web
- Simbolismo de los colores y su uso en el diseño web
- Cómo hacer un diseño web de carga rápida
- Un elemento clave en el éxito de una página web: la navegabilidad
- Diseñar una página web para varias resoluciones de pantalla
- Elementos de diseño web: la línea
- El diseño de la interfaz
- Elementos de diseño web: la textura
- 7 Consejos para diseñar tu web de forma eficaz
- Elementos de diseño web: la forma
- Diseño de la interface web: diseño de la información
- Estructura de páginas web: Marcado semántico de contenidos
- Estructura de páginas web: Cómo hacer para que lo importante aparezca primero
- Estructura de una página web: Como estructurar los archivos
- Estructura de una página web: Estructura del diseño
- Herramientas para diseñadores web: Editores HTML
- Selección de la paleta de colores para un diseño web
- El equilibrio en el diseño web
- Estructura de una página web: diseño de plantilla
- Diseño de páginas web: Diseño del documento
- Diseño visual de una página web
- Estilizar la tipografía de las páginas web con CSS
- Optimización de imágenes para páginas web
- Redacción de textos para páginas web
- Diseño web en HTML5
- Fases del diseño Web, usuarios satisfechos
- La seguridad también es un tema de los diseñadores de páginas web (primera parte)
- La seguridad también es un tema de los diseñadores de páginas web (segunda parte)
- 10 pistas para un diseño web eficiente
- Consejos sobre HTML para principiantes, Parte 1
- Te puede interesar
- Diseño Web
7 Cometarios
Muy buena la informacion gracias de verdad que me encanta esto del diseño web aunque todavia no se mucho pero gracias a tanto informacion en linea estoy aprendiendo cada dia mas sobre diseño de paginas web…saludos
Miércoles, 29 de septiembre 2010
muchisimas gracias por tu informacion me parecio superclara ademas de que con esa chuleta me ayudaste mucho, ya que recientemente me eh interesado por el diseño web y estoy tratando de aprender por mi cuenta
Domingo, 3 de octubre 2010
no cabe duda que como pasa el tiempo cada dia me adientro mas a lo del diseño web e creado algunas algunas paginas y la verdad HTML es algo muy facil rapido y sencillo.
tu informacion me fue muy util para comensar en este circulo.
Domingo, 28 de noviembre 2010
Te felicito por el contenido de tu Sitio, dado que abarcas un abanico muy grande de temas y esto nos ayuda a seguir creciendo cada día más.
Jueves, 23 de diciembre 2010
Hola… Soy diseñador web desde hace ya unos cuantos años… utilizo flash casi a dirario para presentaciones, cabeceras, banners y ese tipo de aplicaciones web sencillas.
Estoy valorando el matricaularme en un curso de HTML5 y me gustaría saber si:
¿es realmente es aconsejable HTML5 para un diseñador que trabaja con programadores ???
¿Que resultados se consiguen en comparación con Flash?
¿Sería quizá mejor subir el nivel de flash? (mirando al futuro)
Se que son unas preguntas un tanto personales… pero busco algo de orientación
Muchas gracias!
PD: los programadores de mi empresa tb harán el curso
Miércoles, 27 de julio 2011
Contesto esta pregunta con muchísimo retraso… pero para la gente que tenga la misma duda:
Sin duda, estudia HTML5. Flash es una tecnología obsoleta que va en contra de la accesibilidad, el SEO y las buenas prácticas en general. HTML5 es la evolución más moderna de HTML, el lenguaje por defacto de la web a nivel global. Es el futuro del diseño web.
Todo diseñador que se precie debería saber HTML, y eso incluye HTML5. En realidad, los diseñadores deberían saber también CSS (y CSS3). Tener un perfil mixto también es el futuro de esta profesión, donde está muy bien especializarse, pero antes pararse a aprender de todo. No hay que empezar la casa por el tejado.
El diseño de una interfaz cambia radicalmente cuando entiendes el código que la construirá.
Saludos,
Martes, 4 de octubre 2011
Interesante web, se va a favoritos :D
Sábado, 17 de marzo 2012