Hola visitante de diseño web Alicante y Murcia - DwAlicante, Le presentamos los mejores proyectos y formatos gráficos de alta calidad con un montón de características.

LA ESPECIFICACIÓN HTML5

El diseño HTML5 aporta nuevos elementos dirigidos a mejorar diversos aspectos del lenguaje, como: la presentación, el diseño de la estructura de la página (layout), la inclusión de audio y vídeo, la construcción de formularios, la geolocalización del sitio Web, etc. Pero esta especificación no solo incluye nuevos elementos, también tiene por objeto convertirse en una plataforma de desarrollo que integre todas las tecnologías Web existentes, evitando los problemas de compatibilidad que suelen presentarse con algunos navegadores. Para ello, del diseño html5 incorpora una API (Application Program Interface) suficientemente amplia como para que todos los navegadores se comporten de igual forma al interpretar los diferentes elementos de las páginas.

La sintaxis del lenguaje es muy flexible y, lo que es más importante, pone punto final a un proceso de alejamiento que se había producido entre las sintaxis de las especificaciones de HTML y las de XHTML. De este modo, se convierte, por tanto, en un único estándar para el desarrollo de páginas y sitios Web. Dado que el diseño HTML5 es una especificación del lenguaje HTML en proceso de construcción, algunos de sus elementos y atributos aún no son completamente soportados por todos los navegadores. Sin embargo, la amplia aceptación que ha conseguido entre desarrolladores y usuarios, hace que se esté convirtiendo poco a poco en ese deseado estándar unificado.

Las líneas maestras en la que se basa el diseño HTML5, son las siguientes:

 

  • HTML5 es una evolución que mejora ciertos aspectos. Ha sido diseñado para asegurar la compatibilidad con todo lo desarrollado hasta el presente para la Web.
  • A pesar de que el código es menos formal que XHTML, continúa existiendo un código propio, respetuoso con las reglas fundamentales del etiquetado.
  • La separación entre el contenido y la presentación se ve reforzada. Desaparecen las etiquetas y atributos de presentación de HTML4.0. Las hojas de estilo CSS se consideran elementos inseparables del diseño HTML5. Se espera que el mayor aprovechamiento de las nuevas hojas de estilo CSS3 transforme la interfaz de usuario en los próximos años.
  • La simplificación del código trata de evitar cualquier complicación inútil en el código. Esta simplificación se pone de manifiesto, por ejemplo, en una nueva declaración del tipo de documento doctype, o en el código que no incluye ningún aspecto de presentación.
  • La integración directa en el navegador de elementos que, hasta ahora, necesitaban plug-ins para su presentación. Las nuevas etiquetas de audio y de vídeo son un buen ejemplo.
  • El reconocimiento de JavaScript como socio inseparable del diseño HTML5.
  • La integración de funcionalidades avanzadas como la geolocalización, el almacenamiento de datos en local, la consulta en modo desconectado, etc. a través de una API.

Concretamente, algunas de las novedades que aporta del diseño HTML5 son las siguientes:

 

  • Un nuevo doctype, simplificado y unificado.
  • Supresión de etiquetas y atributos de presentación.
  • Nuevas etiquetas HTML5 semánticas o de organización.
  • Nuevas etiquetas de audio y de vídeo que ya no necesitan más plug-ins dedicados.
  • Nuevos tipos de campos para los formularios y ampliación de las funcionalidades en los ya existentes.
  • Diseño 2D mediante la nueva etiqueta <canvas>.

 

ETIQUETAS DE SECCIÓN DE PÁGINA

Las etiquetas de sección de página están destinadas principalmente a la organización del diseño HTML5 de la página con el objetivo de poder distinguir con mayor facilidad las secciones en el código.

Etiquetas <header>, <nav>, <footer> y <aside>

El diseño HTML5 incorpora nuevas etiquetas para identificar de manera clara y rápida las secciones o los bloques que permiten organizar el diseño de la página. Estas etiquetas son:

<header> Agrupa los elementos del encabezado de página. Esta etiqueta puede reemplazar el código <div id="header"> que se encuentra con frecuencia en las páginas.

<nav> Especifica la sección donde se sitúan los elementos de un menú de navegación.

<footer> Indica los elementos que forman la sección del pie de página. Esta etiqueta HTML5 puede reemplazar al código <div id="footer"> que aparece con frecuencia en las páginas.

<aside> Especifica los elementos anexos al contenido.

El siguiente código de ejemplo presenta un diseño HTML5 bastante habitual que incluye: una imagen de logotipo, un nombre del sitio web, una sección que incluye los enlaces de navegación dentro del sitio, el contenido que incluye el título de la página y un pie de página.

html5

La única función que tienen las nuevas etiquetas de sección, que forman parte del grupo de las denominadas etiquetas semánticas de HTML5, es aportar claridad y organización al código. No proporcionan ninguna funcionalidad que permita dar formato a la presentación visual de la página. Es decir, las etiquetas de sección no se pueden, por si mismas, resolver la composición o estructura visual de las secciones que conforman una página Web. Su función es, exclusivamente, mejorar la organización y la lectura del código por parte de los diseñadores y programadores. Ahora bien, sí que es posible asociar las propiedades de las hojas de estilo CSS a las etiquetas de sección del diseño HTML5, para resolver la composición visual de las secciones y la maquetación de la página Web. En el siguiente ejemplo se proporciona formato a las etiquetas de sección de HTML5 mediante el uso de las hojas de estilo CSS:

seccion html5

El ejemplo anterior, produce el siguiente resultado en la ventana de visualización del navegador:

layout html5

 

Etiquetas <section> y <article>

El contenido principal de una página Web puede organizarse en distintas partes, mediante el uso de las etiquetas <section> y <article>:

<section> Define una parte del contenido de la página que se refiere a un tema concreto.

<article> Especifica un contenido del documento que posee una identidad independiente dentro de la página, como puede ser: el artículo de un blog, un post en un foro, etc.

pagina html5

El anterior diseño HTML5 produce el siguiente resultado en la ventana de visualización del navegador:

ejemplo html5

 

FORMULARIOS HTML5

En un diseño HTML5 se incorporan nuevas etiquetas y atributos que permiten definir nuevos tipos de campos en los formularios. Además, se incorporan nuevas funcionalidades para realizar la validación de los datos de los campos en los formularios. En este apartado, se estudian algunas de las nuevas características de los formularios con HTML5. Ahora bien, es necesario tener en cuenta que no todos los navegadores soportan todas estas novedades.

 

Etiquetado de los campos de formulario

La etiqueta <label> asocia un texto de título a un campo de formulario en particular. De modo que se asocia una etiqueta de texto junto delante de un elemento del formulario. Las etiquetas <label> son particularmente útiles en el ámbito de la accesibilidad Web.

label

El anterior diseño HTML5, produce el siguiente resultado en la ventana de visualización del navegador:

ejemplo label

 

Campo de texto con lista de sugerencias

La etiqueta <datalist>, agregada a un campo de texto, permite crear una lista de sugerencias para introducir el dato sobre el que se ha situado el foco. Este comportamiento es similar al de Google Suggest a la hora de introducir alguna palabra clave en la barra de búsqueda.

Una etiqueta <datalist> queda ligada a un campo de texto a través de un identificador. La etiqueta HTML5 <datalist> contiene una lista de etiquetas <option> con las sugerencias. Cada etiqueta <option> especifica una sugerencia a través del atributo value. Por ejemplo:

datalist

El ejemplo anterior, produce las siguiente presentación del diseño HTML5

ejemplo datalist

Campo de texto para la dirección de correo electrónico

La etiqueta <input type="email"> permite introducir y validar una dirección de correo electrónico directamente en el navegador.

etiqueta emal

Si se intenta enviar una dirección de correo electrónico mal formada, el navegador informará de que la dirección es incorrecta. Este diseño HTML5 produce el siguiente resultado en la ventana de visualización del navegador:

ejemplo etiqueta email

Además, el atributo required especifica que se trata de un campo obligatorio, por lo que si se intenta enviar un valor vacío es este campo del formulario se informará del error.

 

Campo de texto con formato numérico

Otro nuevo tipo de campo nuevo que incorpora cualquier diseño HTML5 es el contador numérico. Para ello, se utiliza la etiqueta <input type="number"> que tiene los siguientes atributos específicos:

min. Indica el valor mínimo del contador.

max. Indica el valor máximo del contador.

step. Determina el incremento del contador cada vez que se hace clic en las flechas.

value. Indica el valor inicial del contador.

La funcionalidad completa de este tipo de campo no es compatible con todos los navegadores. En los casos de navegadores no compatibles, simplemente incluyen un campo de texto normal.

etiqueta number

El ejemplo anterior, produce el siguiente resultado en la ventana de visualización del navegador:

ejemplo etiqueta number

Campo de texto con formato de fecha

El uso de los valores de tipo fecha y de los calendarios ha cobrado especial relevancia en el desarrollo de aplicaciones de la Web interactivas. Su uso es necesario en aplicaciones Web del tipo: reservas de hoteles, tiendas on-line, compra de billetes para medios de transporte, compra de entradas para espectáculos, etc.

La etiqueta <input type=”date”> proporciona un tipo de campo de formulario adaptados, especialmente, a la introducción de fechas por parte del usuario directamente en el navegador. Se trata de uno de los avances más importantes en un diseño HTML5 en cuando al desarrollo Web.

La funcionalidad completa de este tipo de campo no es compatible con todos los navegadores. En los casos de navegadores no compatibles, simplemente incluyen un campo de texto normal

etiqueta date

El ejemplo anterior, produce el siguiente resultado en la ventana de visualización del navegador:

ejemplo etiqueta date

Campo de rango

Los campos de rango son herramientas intuitivas que permiten fijar un valor concreto en muchas aplicaciones de software, generalmente de procesamiento numérico. Los campos de rango se introducen en el diseño HTML5 mediante la etiqueta <input type="range">. Esta etiqueta tiene atributos específicos, que son idénticos a los de la etiqueta <input type="number">. La funcionalidad completa de este tipo de campo no es compatible con todos los navegadores. En los casos de navegadores no compatibles, simplemente incluyen un campo de texto normal.

etiqueta cursor

El ejemplo anterior, produce el siguiente resultado en la ventana de visualización del navegador:

ejemplo etiqueta cursor

MULTIMEDIA en un diseño HTML5

Para algunas páginas y sitios Web la incorporación de vídeo en su contenido es esencial, por ejemplo, YouTube, Vimeo, Dreezer, Spotify, Netflix, etc. Sin embargo, en general, la incorporación en HTML5 de contenido multimedia es un elemento característico del servicio de información Web, debido a su concepción como medio de información multimedia. Así, en la actualidad, cualquiera que sea la temática de una página o un sitio Web, suelen agregarse diversos recursos multimedia.

Hasta la llegada del diseño HTML5 no existía un único estándar para agregar sonido o vídeo en una página o sitio Web. Esta operación se realizaba mediante un plug-in, por ejemplo: QuickTime, RealPlayer, Flash, etc. aunque no todos los navegadores disponían de los mismos plug-ins. La especificación HTML5 incluye soporte nativo multimedia, es decir, permite reproducir sonidos y vídeos sin necesidad de tener instalado ningún plug-in. Las nuevas etiquetas <video> y <audio> permiten agregar contenido multimedia fácilmente a las páginas Web y, además, la etiqueta <source> permite especificar el tipo de fuente multimedia a reproducir en la página.

 

Etiqueta <video>

Un diseño HTML5 incorpora la etiqueta <video> para reproducir los archivos de vídeo, independientemente de los plug-ins instalados en el dispositivo que utiliza el usuario. Por ejemplo:

etiqueta video

En el código del ejemplo anterior, puede apreciarse que se ha incluido un texto que se mosytrará en el caso de que el navegador no pueda interpretar la etiqueta <video>. También puede apreciarse que la ruta al archivo de vídeo se ha especificado de forma relativa desde la carpeta en la que se encuentra la página. De modo que el archivo de vídeo debe encontrarse en la carpeta /recursos que estará situada en la misma carpeta que la página.

 

Los atributos de la etiqueta <video> son:

src. Es obligatorio. Define la ruta del archivo de vídeo. Se recomienda especificarla de forma relativa.

width. Determina la anchura del vídeo.

height. Determina la altura del vídeo. Al igual que con la etiqueta HTML5 <img>, se puede definir las dimensiones de la presentación del vídeo. Si no se especifican la altura y anchura, se mostrará con la altura y la anchura predeterminadas del vídeo.

poster. Permite especificar una imagen que el navegador usará mientras se está descargando el vídeo o hasta que el usuario inicie su reproducción.

controls. Muestra las funciones de reproducción del vídeo: inicio de reproducción, pausa, avance y volumen.

autoplay. Especifica la reproducción automática del archivo de vídeo una vez esté disponible, tras la carga de la página.

loop. Especifica la reproducción en bucle del archivo de vídeo.

preload. Indica al navegador dentro del contexto de un diseño HTML5 que se debe descargar el archivo de vídeo durante la carga de la página, de modo que esté disponible su reproducción de forma inmediata. Puede tomar los siguientes valores: none, especifica que no existe carga previa; metadata, especifica la carga previa de los metadatos asociados al archivo; y, auto, especifica la carga previa automática. Este atributo se ignora si está presente el atributo autoplay.

En la actualidad, algunos de los formatos de los archivos de vídeo más extendidos son los siguientes: mp4, ogv, H.264, WebM, etc. Los navegadores existentes soportan de manera desigual los distintos formatos de vídeo existentes.

 

Etiqueta <audio>

En un diseño HTML5 se puede incorporar la etiqueta <audio> para reproducir los archivos de audio, independientemente de los plug-ins instalados en el dispositivo que utiliza el usuario. Por ejemplo:

etiqueta audio

Los atributos de la etiqueta <audio> son: src, controls, autoplay, loop y preload. Estos atributos tienen un significado similar al que ya se ha descrito para la etiqueta <video>, pero en este caso referidos a la reproducción de archivos de audio.

En la actualidad, algunos de los formatos de los archivos de audio más extendidos son los siguientes: mp3, ogg, acc, wav, Weba, Flac, etc. Los navegadores existentes soportan de manera desigual los distintos formatos de vídeo existentes.

 

Etiqueta <source>

La etiqueta <source> dentro de un diseño HTML5 nos permite resolver la problemática existente en cuanto a la existencia de los distintos formatos de archivo. Se utiliza conjuntamente tanto con la etiqueta <video> como con la etiqueta <audio>. La etiqueta <source> especifica varios tipos de archivos de vídeo o de audio. Cada navegador escogerá el formato que mejor le convenga o el que pueda reproducir.

etiqueta source

A continuación, se analiza el código que se emplea en el diseño HTML5. Para ello, se va a suponer que se visita esta página con el navegador Safari, que no soporta el formato ogv. Safari ignorará la etiqueta <source> que especifica un archivo de tipo ogv. Pasará a la segunda etiqueta <source> que propone un archivo mp4. Como el formato mp4 es soportado por Safari, este será el recurso que utilizará para reproducir el archivo de vídeo. Por el contrario, Firefox o Edge soportan los archivos ogv, de modo que utilizarán el primer recurso y las demás etiquetas <source> serán ignoradas.

Las etiquetas <source> de cualquier diseño HTML5 se leen en el orden en que han sido escritas en el código. El navegador usará el primero de los recursos especificados que soporte.

La existencia en el código de varias etiquetas <source> aseguran una reproducción del archivo de vídeo o de audio en sus diversos formatos, por parte de los navegadores. Sin embargo, esta solución que propone el diseño HTML5 supone que se debe convertir y preparar el mismo archivo de vídeo, o de audio, en los distintos formatos para asegurar la compatibilidad entre los distintos formatos y navegadores.

Para más información sobre diseño HTML5 visite W3Schools

Comentarios

Escriba un comentario

Deje aquí su comentario respetando las normas de buena conducta.

Código de seguridad
Refescar