Lenguaje de programación HTML5

HTML5  es la última evolución de la norma que define HTML. 

El HTML5 se trata de una nueva versión del lenguaje HTML, con nuevos elementos, atributos y comportamientos,y un conjunto más amplio de tecnologías que permite a los sitios Web y las aplicaciones más diversas y de gran alcance.

Diseñado para ser utilizable por todos los desarrolladores de Open Web, esta referencia página enlaza numerosos recursos sobre las tecnologías de HTML5, que se clasifican en varios grupos según su función, son los siguientes:

"Las Open Web  son esencialmente diferentes de sitios web estándar o páginas Web. Se construyen utilizando tecnologías web abiertas estándar"

• Semántica: lo que le permite describir con mayor precisión cuál es su contenido.
• Conectividad: lo que le permite comunicarse con el servidor de formas nuevas e innovadoras.
• Desconectado y almacenamiento: permite a páginas web almacenar datos, localmente, en el lado del cliente y operar fuera de línea de manera más eficiente.
• Multimedia : permite hacer vídeo y audio de ciudadanos de primera clase en la Web abierta.
• Gráficos y efectos 2D/3D: permite una gama mucho más amplia de opciones de presentación.
• Dispositivo de Acceso : admite el uso de varios dispositivos de entrada y salida.
• Styling : deja a los autores escribir temas más sofisticados.
• Rendimiento e integración: proporcionar una mayor optimización de la velocidad y un mejor uso del hardware del equipo.

Principales estándares en el lenguaje HTML

HTML4

Posiblemente el lenguaje mas usado en las paginas de Internet es el HTML4, a pesar de estar ya casi obsoleto debido a sus limitaciones.

Muchos CMS (software hechos para crear de forma fácil paginas web en Internet), están diseñados para crear las paginas usando dicha especificación, por lo que se siguen sumando muchas de ellas a los millones acumuladas en los servidores de Internet.

Una página escrita en HTML4 puede ser que se muestre de forma diferente en distintos navegadores, o que no se muestre en lo absoluto.

Es imposible representar en dicho lenguaje multitud de caracteres especiales como los Unicode, que son tan comunes en las páginas de este sitio.

 XHTML

Después del HTML4 surge el XHTML en dos versiones, Transitional y Strict, lenguaje desde sus inicio considerado de transición y de uso temporal, no obstante representa un adelanto enorme respecto a las posibilidades que introduce, limitado siempre al tratar de mantener la compatibilidad con la especificación anterior. 

Es más ligero y compatible con cualquier navegador, su desventaja es que posee muchas restricciones, por lo que muchos no se habituaron fácilmente, al salto que representó su introducción y aun siguen atrapados en el lenguaje anterior.

La mayor parte de las páginas de este sitio han sido escritas usando este lenguaje, desde hace un tiempo acá todas las que se crean. utilizan HTML5.

HTML5

Finalmente llega HTML5, recoge todas las ventajas que introdujo el XHTML y elimina bastante restricciones y limitaciones.

Es más ligero al ser más sencillo y simple el código, lo que permite que las paginas escritas en este lenguaje carguen mas rápido en el navegador.

Si aun no fuera suficiente, introduce infinidad de opciones que hasta ahora estaban vedadas a las páginas web, como insertar directamente video (no flash), música, y casi cualquier elemento.

Si te interesa el posicionamiento de tu pagina en Google, debes saber que una pagina escrita en este lenguaje es priorizada por el buscador, respecto a otras con el mismo contenido pero escritas usando otros lenguajes.

Diferencias del código de HTML5 con lenguajes anteriores

Solo algunas de las diferencias más notables son las siguientes:

✔ No es necesario el cierre de las etiquetas img, br, hr, input, etc.
Por ejemplo:
<br /> ahora se sustituye por: <br>
<hr /> por: <hr>
<img src=""……/> por: <img src=""……> 
<input …./> por: <input ….>

✔ Se puede usar tanto minúsculas como mayúsculas en el código a diferencia del XHTML que solo admite minúsculas.
✔ El Doctype o declaración del documento está completamente minimizado, en HTML5 solo es necesario emplear:
<!DOCTYPE html>
✔ Introduce nuevos marcadores para sumarlos a los existentes <div> en usos específicos, por ejemplo: <nav>, <footer>, <audio>, <video>, etc.

¿Por qué usar el lenguaje HTML5 en las páginas web?

Escribir páginas usando HTML 5 nos brinda varios beneficios, por ejemplo:

✓ Al ser el código más sencillo y simplificado, cargan más rápido las páginas en el navegador.

✓ Las páginas y los elementos que contienen, se ven perfectamente en todos los navegadores. La gran mayoría de los navegadores de los teléfonos Smartphone y las tabletas, son compatibles con HTML5, si posees uno de estos dispositivos puedes comprobarlo, accediendo con él a la siguiente página: Detector e identificador de dispositivos móviles

✓ Los plugins, widgets y botones que ofrecen los desarrolladores de las redes como Facebook, Twitter y otras, escritos en HTML 5 funcionan excelentemente, con más opciones que los clásicos en XHTML o que los iframes.

✓ Es posible insertar directamente videos en las páginas sin tener que acudir a los iframes o usar la etiqueta object.

✓ HTML 5 incluye etiquetas orientadas principalmente a los buscadores, para facilitarles comprender el contenido de las páginas, lo que nos beneficia, por ejemplo: header, footer, article, nav, etc.

✓ Permite la Geolocalizacion del usuario.

✓ Otras de las razones es el empleo del microformato en las páginas web, que algunos son totalmente incompatibles con otros lenguajes por lo que no validan correctamente a no ser que se use HTML5. 

Marcado semántico y diseño de página

Los elementos semánticos describen su significado o propósito claramente al navegador y al desarrollador. Compárese con (por ejemplo) la etiqueta <div>. La etiqueta <div> define una división o una sección de un documento HTML, pero no nos dice nada acerca de su contenido o transmite sentido claro alguno.

< div >

Los programadores suelen utilizar Identificadores y/o nombres de clase con estas etiquetas <div>. Esto da más significado a los desarrolladores, pero por desgracia, tampoco ayuda a los navegadores a derivar el propósito de ese marcado.

< div id ="header">

En HTML5 hay nuevos elementos semánticos enriquecidos que transmiten el propósito del elemento a ambos desarrolladores y navegadores.

< header >

El W3C obtuvo datos de miles de millones de páginas web existentes para descubrir los ID y nombres de clase que los desarrolladores ya estaban utilizando. Una vez que se descartó div1, div2, etc. , tuvieron con una lista de elementos enriquecidos descriptivos que ya se estaban utilizando y esos fueron los que convirtieron en normas.

Aquí están algunos de los nuevos elementos semánticos en HTML5:
article
aside
figcaption
figure
footer
header
hgroup
mark
nav
section
time

Debido a la riqueza semántica, probablemente pueda adivinar lo que la mayoría de estos elementos hacen.

Pero por si acaso, aquí va una visualización:

Los Headers y footers resultan claros, mientras que nav crea una barra de menú o navegación. Puede utilizar sections y articles para agrupar su contenido. Por último, el elemento aside puede ser usado para contenido secundario, por ejemplo, una barra lateral de enlaces relacionados.

SEMÁNTICA

Estructura básica de un documento de HTML5.

 Todos tenemos una estructura basica al realizar un sitio web y en HTML5 

 no hay excepción, lo que es muy facil de hacer ya que HTML5 tiende a ser 

 una estructura muy semantica y es lo mejor de todo, sus etiquetas son muy 

 básicas por eso vamos a ver como es una Estructura basica de un 

 documento de HTML5. Este lenguaje tiende a hacerse mas simple y 

 humano al escribir el código.

Lo primero que debemos de saber antes de comenzar a diseñar en html5 es como se crea   su estructura,  para ello debemos tener en cuenta los siguientes pasos: 1.  Saber el tipo de documento en el cual se ejecutara nuestras sintaxis; esto  permitirá al explorador identificar que tipo de lenguaje de hypertexto estamos usado. 2.  Crear la etiqueta html y el tipo de idioma que se usara.  3.  Crear su cabecera, la cual contendrá todas las definiciones, enlaces. que afectaran la estructura de nuestro documento html. 4.  Crear el cuerpo del documento en el cual se escribirán todas las etiquetas que  nos permitirá darle una estructura definida a nuestra pagina. Así se vería la estructura html: <!doctype html>  ........................................... TIPO DE DOCUMENTO <html lang="ES-es"> .................................... HTML Y EL TIPO DE LENGUAJE      <head>  ..................................................... CABECERA         <meta charset="utf-8"> ........................ ESTÁNDAR DE CARACTERES ESPECIALES         <title> Estructura html</title> .............. TITULO DEL DOCUMENTO     </head> ..................................................... CIERRE DE LA CABECERA     <body> ...................................................... CUERPO              ........................................................... CONTENIDO     </body> .................................................... CIERRE DEL CUERPO </html> ......................................................... CIERRE DEL HTML

Acceso al dispositivo.

Introducción a la API de la cámara 

A través de la API de la cámara , es posible tomar fotos con la cámara de tu dispositivo y subirlos a la página web actual. Esto se logra a través de una entrada de elemento con type = "file" y un aceptar atributo a declarar que acepta imágenes. El HTML se ve así: 

< input tipo = " archivo " de id = " tomar-foto " aceptar = " imagen 

Cuando los usuarios deciden activar este elemento HTML, se les presenta una opción para elegir un archivo, donde la cámara del dispositivo es una de las opciones. Si selecciona la cámara, entra en el modo de toma de fotografías. Después se ha tomado la imagen, el usuario se presenta con la opción de aceptar o descartarlo. Si se acepta, que se envía a la <input type = "file"> elemento y su onchange evento se dispara. 

Utilizando geolocalización

La API de geolocalización permite al usuario proporcionar su ubicación a las aplicaciones web si así lo desean. Por razones de privacidad, el usuario se le pide permiso para reportar la información de ubicación. 

El objeto de geolocalización

La API de geolocalización se publica a través de la navigator.geolocation objeto.Si el objeto existe, servicios de geolocalización están disponibles. Usted puede probar la presencia de geolocalización de esta manera:

if ("geolocation" in navigator) {


/* geolocation is available */


} else {


/* geolocation IS NOT available */


Pointer Lock API

Cerradura Pointer (antes llamado bloqueo del ratón) proporciona métodos de entrada basados ​​en el movimiento del ratón a través del tiempo (es decir, deltas), no sólo la posición absoluta del cursor del ratón en la ventana gráfica. Le da acceso a movimiento del ratón prima, bloquea el objetivo de eventos de ratón a un solo elemento, elimina límites sobre hasta qué punto el movimiento del ratón puede ir en una sola dirección, y elimina el cursor de la vista. Es ideal para primera persona juegos en 3D, por ejemplo.

Más que eso, la API es útil para las aplicaciones que requieren una aportación significativa ratón para controlar los movimientos, rotación de objetos, y cambiar las entradas, por ejemplo, permitiendo a los usuarios controlar el ángulo de visión con sólo mover el ratón alrededor sin ningún botón de clic. Los botones son luego liberados para otras acciones. Otros ejemplos incluyen aplicaciones para ver mapas o imágenes de satélite.