Diseño y Maquetación Web en HTML5

Diseño web con HTML5

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (21 votos, promedio: 0,86 de 5)
Cargando...

El diseño web en HTML5 te da una cantidad de herramientas poderosas para hacer tus páginas web sin la necesidad de usar tecnologías mas anticuadas como Flash. En esta introducción te enseñamos las principales características y ventajas que tiene hacer una web con HTML5

HTML5 nos abre un repertorio de posibilidades que en algunos casos 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 ha mejorado mucho nuestras vidas a la hora de desarrollar un proyecto. Ya es el momento de lanzar proyectos en HTML5, su uso y soporte en navegadores se ha consolidado en los últimos años.

Así que si no lo has hecho ya, es el momento es de aprender HTML5 y experimentar con él.

¿Qué es HTML5?

HTML5 es un lenguaje de marcado que se utiliza para el desarrollo de contenidos para la red mundial y es un elemento muy importante del Internet moderno. En pocas palabras, es el lenguaje que se encarga de describir cómo debe lucir una página en base a su estructura.

HTML5 es el más emocionante paso adelante que se ha dado en los últimos años en lo que ha desarrollo web se refiere, ya que desde el lanzamiento de XHTML 1.0 no había existido un avance de tal magnitud.

HTML5 representa el futuro y el presente, y no es todavía un estándar definitivo, pero se puede implementar sin ningún problema en estos momentos, debido a que la gran mayoría de los navegadores modernos soportan ya las más importantes de sus novedades.

Comparación con HTML4

En comparación con HTML5, la versión 4 de HTML es limitada en funciones y al utilizarlo los desarrolladores tenían que depender de Flash o Java plugins para añadir contenido rico a sus sitios web.

HTML5 tiene entre sus objetivos el no utilizar plugins de Flash, lo que ahorra en gran escala el consumo de CPU.

Introducción a diseñar una web con HTML5

Hasta hace un par de años para poder hablar a profundidad sobre HTML se necesitaba desempolvar libros y manuales escritos hace ya más de una década.

Historia de HTML5

El lenguaje de marcado, que da origen a todas las páginas web en su estructura fundamental, fue abandonado y apartado de innovación desde finales de la década de los 90s, por lo que su uso se volvió más una obligación que una solución.

Cuando todo apuntaba a la muerte definitiva de este lenguaje surge HTML5, ganando la contienda a XHTML y trayendo de vuelta los estándares con los que la web inició, aportando nuevos elementos, secciones y etiquetas que se incorporan de manera perfecta al tipo de páginas web que se manejan en la actualidad.

En 2004 la W3C estableció la necesidad de contar con un nuevo estándar para la web, por lo que se propuso crear una nueva versión del estándar XHTML que se había venido utilizando desde principios de la década de los 2000s.

En ese momento XHTML representó una solución para muchos de los problemas que se presentaban con HTML, permitió dar un paso importante para la evolución de otros lenguajes y creación de frameworks, sin embargo no era realmente utilizado por todos y no desarrollar en base a sus reglas era algo que al navegador no le importaba, por lo que la propuesta de un nuevo estándar fue necesaria y eso llevo a la primera edificación de XHTML2.

Por su parte empresas como Apple, Mozilla y Opera decidieron retomar el proyecto abandonado para la creación de una quinta versión de HTML, y empezaron a trabajar sobre ello para lograr una mejor compatibilidad con las tecnologías de la actualidad.

Fue en 2006 cuando la W3C volvió a interesarse en HTML5 y finalmente en 2007 se unió al grupo que se encontraba trabajando en esta versión, para así unificar proyectos. Sin embargo, en la W3C aún existía rechazo hacia esta versión, por lo que también se siguió trabajando en XHTML2 de forma paralela, llevando así una carrera por ser el nuevo estándar de la web.

El entusiasmo por XHTML2 fue desapareciendo por el lento desarrollo y HTML5 tomo mucha fuerza impulsado por las compañías que estuvieron detrás de su desarrollo, contando con varias presentaciones y sitios que fueron hechos únicamente para mostrar su potencial, finalmente en 2009 no se renueva el proyecto para desarrollar XHTML2 y en 2010 se da la popularización de HTML5.

Ventajas y desventajas de usar HTML5

HTML5 tiene muchas nuevas y poderosas características, las cuales pueden llegar a tener un gran alcance, tanto para los desarrolladores como para los usuarios.

Al igual que cualquier otro software, tiene también inconvenientes las cuales tienen que ser tomadas en consideración a la hora de desarrollar una aplicación web.

Ventajas:

  • No hay necesidad de utilizar plugins los cuales pueden llevar a la desaceleración de la computadora y consumen la batería del dispositivo.
  • Se puede tener acceso al hardware del dispositivo, como por ejemplo el micrófono, la cámara o datos como la ubicación del usuario
  • Se tiene un código base para poder aplicarse en muchas plataformas

Desventajas:

  • Poca disponibilidad de herramientas para la edición y creación de contenidos interactivos.
  • Peor rendimiento en comparación con las aplicaciones nativas.

¿Se puede usar HTML5 hoy?

HTML5 ha sido una de las tecnologías de moda en estos últimos años, cientos de artículos, documentos e inclusivo sitios enteros se han creado para explicar su funcionamiento y los beneficios que su aplicación puede traer.

Sin embargo, su desempeño muchas veces se ha puesto en tela de juicio, principalmente por su problema de compatibilidad, lo que ha obstaculizado su total aceptación por parte de los diseñadores y desarrolladores web. A día de hoy, la compatibilidad de navegadores ya no es un problema.

HTML5 dejó de ser una nueva versión de un viejo lenguaje de marcado, para convertirse en un nuevo concepto para el desarrollo de sitios web y aplicaciones, enfocado en resolver los problemas presentes en la era de los dispositivos móviles, la computación en la nube y el networking.

Gracias a la constante promoción de empresas como Google y decisiones como las que tomó Apple de no dar soporte a Flash en sus nuevos dispositivos móviles, el mundo web empezó a moverse a HTML5 y considerarlo un proyecto más serio.

Debido a este respaldo proporcionado por varias empresas grandes, otras se vieron atraídas por la tecnología y muchos más empezaron a unirse a este soporte.

Características de HTML5

Entre las características principales de HTML5 encontramos cambios drásticos en el marcado y la estructura de los sitios, se incluye nuevos elementos que aumentan el valor semántico de nuestro código.

Los formularios son optimizados y su validación se vuelve más sencilla, se incluye el soporte a elementos de tipo audio y video sin tener que recurrir a plugins o flash. Es en este grupo donde se encuentran las características que más soporte tienen en los navegadores actuales.

También existen otras características que si bien son parte del estándar, necesitan de la implementación de otros lenguajes como JavaScript para un correcto funcionamiento, tal es el caso del almacenaje local, funcionamiento offline de las aplicaciones y mensajería. Estos son temas un poco más avanzados por lo que trataremos de verlos a fondo más adelante.

A la par con HTML5 se han venido desarrollando otra clase estándares que van de la mano con esta versión y aumentan la genealidad de los diseños web, tal es el caso del lenguaje CSS3, imágenes SVG2 y la geolocalización, los cuales han causado que en más de una ocasión se les considere como características de HTML5, sin embargo son proyectos totalmente independientes que se han aunado al progreso producido en forma de conjunto.

A lo largo de este manual trataremos de ir analizando cada una de estas características y adentrarnos por completo al estudio de este nuevo estándar que ha maravillado a la comunidad de la Web.

Casos de uso

Si necesitas elaborar un juego mediante un forma de desarrollo sencilla y cuyo resultado sea un producto ligero, HTML5 es la respuesta para ti.

Puedes intentar elaborar juegos utilizando Canvas, pero es posible que te llegues a encontrar con algunos problemas, como el rendimiento del elemento cuando los juegos son complejos. Una solución puede consistir en reescribir algunas partes y utilizar algún DOM renderer y para mejorar el rendimiento puedes utilizar animaciones con sprites.

HTML5 también es una buena opción cuando necesitas elaborar una aplicación para dispositivos que no tengan acceso a internet, gracias a su funcionalidad de local storage.

Se pueden utilizar características de HTML5 que te permitan tener toda una aplicación guardada localmente en caso de no tener conectividad.

Se pueden utilizar etiquetas de vídeo y audio para reproducir archivos y contenido que no se encuentre en línea.

Fundamentos de uso de HTML5

Debido a su relativa reciente incorporación al mundo del desarrollo, son pocos los que conocen a ciencia exacta las propiedades completas de este nuevo lenguaje.

Es por ello que en este artículo nos hemos decidido a mencionar las principales características de este lenguaje de marcado, para así establecer las bases necesarias para un correcto desarrollo.

Son varios los nuevos elementos que incluye este lenguaje, los cuales en la actualidad son compatibles con todos los navegadores populares en sus versiones más modernas. Firefox, Chrome, Safari y Opera han dado soporte a este lenguaje desde tiempo atrás, mientras que Internet Explorer dio soporte desde septiembre de 2010 con la versión beta de IE9.

HTML 5 y el contenido multimedia

HTML5 presenta dos nuevas etiquetas multimedia cuyos nombres son “audio” y “video”, su función es permitirnos añadir sonido y vídeos a una página web, sin tener que usar largos códigos “embed”, como comúnmente se hacía en la actualidad para incluir videos en flash o precargados en un servidor.

La etiqueta “video” trae consigo varios atributos, entre los cuales encontramos “control”, “autoplay”, “src”, “height”, “width”, “loop”, “preload” y “audio”, lo que nos da la oportunidad de modificar el reproductor a nuestro gusto sin necesidad de recurrir a CSS o Javascript.

Además de esto, “video” nos permite la adición de texto entre la apertura y cierre de la etiqueta.

Por su parte, la etiqueta “audio” funciona de manera similar para el contenido de sonido y tiene cinco atributos por su propia cuenta, “autoplay”, “controls”, “loop”, “preload” y “src”.

Estructura del sitio con HTML 5

Con nuevas etiquetas como “section”, “footer”, “header”, “nav”, “article”, “aside” y “figure”, HTML5 establece nuevos niveles de estructuración. Estas etiquetas se encargan de definir las distintas secciones de una página web, y muchas de ellas vienen con su propia posición en la página definida.

estructura semantica HTML5

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:

&amp;lt;div id="header"&amp;gt;
    Contenido del encabezado de la página
&amp;lt;/div&amp;gt;

En HTML5 será esto lo que usemos:

&amp;lt;header&amp;gt;
    Contenido del encabezado de la página
&amp;lt;;/header&amp;gt;

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:

&amp;lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&amp;amp;amp;gt;
&amp;amp;amp;lt;html xmlns="http://www.w3.org/1999/xhtml"&amp;gt;

Y este es el que se usa al diseñar con HTML5:

&amp;lt;!DOCTYPE html&amp;gt;

Como se puede apreciar, claramente simplificado.

Tiene sus ventajas como el hecho de usar un sólo tipo de DOCTYPE (<!DOCTYPE html>), implementar el getElementByClassName en el DOM, y las ya mencionadas etiquetas de estructura.

Etiquetas como <header> (cabecera), <article> (artículo), <section> (sección), <nav> (menú de navegación), <aside> (barra lateral), <footer> (pie de página), pasan a reemplazar los <div> extras que utilizábamos para darle forma a la página, delimitando mejor la función y el contenido de cada uno.

Utilizando estas etiquetas HTML5 pretende crear una estructura de vistas más homogeneizada y que el manejo de metadata sea mejor, tratando de emigrar a lo que en algún tiempo se denomino como “web semántica”.

Los que ven desventajas en el hecho de manejar tantas capas (a lo que muchos llaman “etiquetas inservibles”, “divitis”, etc.), les será de agrado la nueva forma de maquetar una página web que implementará HTML 5.

Como comento, al momento de manejar alguna herramienta semántica esto ayudará en gran medida.

Formularios con HTML 5

En lo que se refiere a formularios, la etiqueta “input” sigue siendo la base de todo, pero con la diferencia de que ahora cuenta con nuevas maneras de declarar su tipo, lo que agrega flexibilidad y facilita la validación.

En total son veintitrés los tipos de “input” que podemos utilizar en un formulario, entre los cuales podemos encontrar los tipos “date,” “datetime,” “datetimelocal”, “time”, “month”, “week”, “url”, “range”, “number” y “email” que fueron incluidos con esta versión.

Con esto no habrá necesidad de declarar un input tipo “text”, condicionar los caracteres que recibe con Javascript y después validar del lado servidor el valor que realmente estamos esperando, basta con definir bien el tipo y el propio navegador se encargará de procesar correctamente los datos.

Elementos inline

Las etiquetas “meter”, “time”, “mark” y “progress” fueron incluidas para ser usadas en representaciones de figuras, fechas, hora, listas o barras de progreso, y asi lograr una mejor estructura semántica.

Generalmente se utilizan para envolver contenido similar, y como su propio nombre lo dice cada una de ellas tiene un tipo de contenido relacionado.

Diseñar gráficos con HTML5

Quizás uno de los mejores proyectos que se presenta HTML5 es la etiqueta “canvas”, considerados por mucho el bebé consentido de este nuevo estándar debido a su potencial y gran capacidad de uso.

La etiqueta “canvas” nos permite mostrar gráficos mediante código plano, a igual que nos da la oportunidad de definir una altura y anchura para el área de trazo, permite el uso de eventos HTML5 y al momento de combinarlo con Javascript se puede crear magia pura.

Su accedemos a esta etiqueta a través de las funciones de trazo de Javascript, nos sirve como superficie de dibujo en 2D para la presentación de gráficos, juegos, animaciones y composiciones de imágenes.

Elementos HTML5 interactivos

Para esta función se presentan etiquetas como “datagrid”, la cual puede ser utilizada para proporcionar un conjunto interactivo de datos. También contamos con la etiqueta “details” nos permite proporcionar consejos y otra información útil.

La etiqueta “menu”, que previamente había sido declarada obsoleta, vuelve con una nueva funcionalidad. Cuenta con dos atributos, los cuales son “label” y “type”, y se utiliza para definir las listas de menú con elementos de mando.

Cambios en los atributos de elementos ya existentes en HMTL 5

HTML5 agregó algunos atributos nuevos a los elementos que ya existían en la versión anterior del lenguaje.

Por ejemplo, los elementos de tipo anclaje como “a” y los elementos de tipo “area” han recibido un nuevo atributo que lleva por nombre “media”, el elemento “base” ahora tiene un atributo “target” y el elemento “meta” tiene a “charset” como atributo.

Por otra parte hay ciertos atributos que se deprecaron, tal es el caso del atributo “language” de la etiqueta “script”, “border” de la etiqueta “inc”, “name” de los tipo anclaje “a” y “type” como atributo de “style” y “script”,

Elementos deprecados en HTML 5

Existen varios elementos que quedaro al margen de esta nueva versión, etiquetas tradicionales como “font” pasaron a mejor vida, acompletan la lista las etiquetas “acronym” “applet”, “basefont”, “big”, “center”, “dir”, “font”, “frame”, “frameset”, “isindex”, “noframes”, “noscript”, “s”, “strike”, “tt” y “u”.

Ser un diseñador web preparado para HTML5

El caso es que los diseñadores web, las agencias de diseño web profesional, si no lo han hecho ya,  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.

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.

Renovarse o morir

No cabe duda que la incursión total de HTML5 es imparable, gracias al apoyo de compañías como Google que incluyó la codificación de su proyecto Google Wave en HTML5, el estándar logró ganar su primera batalla y ahora se proyecta para desbancar a otros productos de licencia como Flash.

Lo cierto es que HTML5 en combinación con otro relativamente nuevo estándar, como CSS3, puede generar un paquete de herramientas muy potente para el lado cliente que ayudará a todo el mundo informático, tanto a los usuarios, servidores, vendedores, buscadores y sobre todo a los desarrolladores.

No olvidarse de CSS3

El uso de HTML5 va de la mano de CSS3, así que no hay que olvidarse tampoco de aprender 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.

 

12 respuestas

  1. ¿Estaremos usando? Perdona, pero todavía le queda muchísimo camino por recorrer. Aunque Adobe haya sacado versiones de flash para crear HTML 5 no es más que una estrategia de mercado.

  2. Hola que tal, me gustó su introducción de toda la historia, pero mi pregunta es, la verdad no he programado a fondo en ningún tipo de lenguaje web, ahora me ha interesado aprender porque he visto que ya todo es por la red y las empresas van creando mas y mas sistemas de intranet, transferencias y publicidad, y los programadores ganan mucho dinero.

    Por eso me he dado a la tarea de unirme a aprender a desarrollar Paginas web, mi pregunta es, ¿ podría ya empezar cuanto antes con esta nueva tecnología de HTML5 sin haber programado fuerte en html? Gracias espero su respuesta.

  3. Hola, soy diseñador web desde hace ya unos cuantos años… utilizo flash casi a diario 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 ???

    ¿Qué 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 también harán el curso

    1. 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 defecto 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 conocer las distintas disciplinas. 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,

  4. 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.

  5. No cabe duda que según pasa el tiempo, cada día me adentro más en el diseño web. He creado algunas páginas y la verdad HTML es algo muy fácil, rápido y sencillo.
    Tu información me fue muy útil para comenzar en este círculo.

  6. Muchísimas gracias por tu información me pareció superclara, ademas de que con esa chuleta me ayudaste mucho, ya que recientemente me he interesado por el diseño web y estoy tratando de aprender por mi cuenta.

  7. Muy buena la información, gracias de verdad, que me encanta esto del diseño web aunque todavía no se mucho pero gracias a tanto información en linea estoy aprendiendo cada día mas sobre diseño de paginas web…saludos

Deja una respuesta