Download (Gauchat, 2012). 1.1 HTML5 Para (Gauchat, 2012)

HTML5
“El pegamento que une todo” (Gauchat, 2012).
1.1 HTML5
Para (Gauchat, 2012):
HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, ni siquiera
una mejora de esta ya antigua tecnología, sino un nuevo concepto para la
construcción de sitios web y aplicaciones en una era que combina
dispositivos móviles, computación en la nube y trabajos en red.
HTML5 viene a revolucionar la presentación de sitios web en todo el mundo, ya que
los programadores encontraron aquella integridad a través de JavaScript, un
JavaScript que creció de manera silenciosa mientras que el mercado estaba volcado
en la atención de Flash y Java.
Hace mucho tiempo fue propuesta una versión simple de HTML con el objetivo de
que los usuarios compartieran información a través de páginas web de una forma
simple. La limitación de HTML motivó a compañías para crear nuevos lenguajes
para agregar características que nunca se habían visto en la web. Algunas de las
propuestas fueron Java y Flash, que al principio eran plugins los cuales compartían
la misma estructura de una página web más NO eran íntegras.
El crecimiento lento de Java tornó a que los programadores se inclinaran hacia el
uso de Flash el cual es una plataforma de Adobe Systems Incorporated, destinada
a la creación de aplicaciones a base de animaciones, al respecto (Clic, 1999-2014)
menciona: “Flash fue creado con el objeto de realizar animaciones y diseños
vistosos para la web, y gráficos interactivos.”, aunque no todo el contenido creado
en esta plataforma es indexable por los principales motores de búsqueda, y el futuro
de esta plataforma depende de Adobe; este factor puede perjudicar a los sitios web
que aun usan Flash.
(Gauchat, 2012) Encontró que mientras la competencia silenciosa que se
desarrollaba entre Flash y Java; el software para acceder a la web (navegadores)
continuaba evolucionando junto con nuevas funciones y técnicas rápidas de acceso
a la red, los navegadores también mejoraron gradualmente sus intérpretes
JavaScript. Más potencia trajo más oportunidades y este lenguaje estaba listo para
aprovecharlas.
Fue evidente para los desarrolladores que la integridad y compatibilidad que ellos
buscaban, fue encontrada en el uso de JavaScript en sus sitios web, con la
optimización de interpretación de JavaScript en los principales navegadores web;
los programadores comenzaron a utilizar JavaScript en sus aplicaciones de un
modo nunca antes visto. Al respecto (Gauchat, 2012) menciona: “La innovación y
los increíbles resultados obtenidos llamaron la atención de más programadores.
Pronto lo que fue llamado la “Web 2.0” nació y la percepción de JavaScript en la
comunidad de programadores cambió radicalmente.”.
Gracias a las nuevas implementaciones, JavaScript, HTML y CSS; también
conocidos como “HTML y amigos”, la perfecta unión para el desarrollo web. Al
respecto (Gauchat, 2012) menciona: “JavaScript, HTML y CSS se convirtieron
pronto en la más perfecta combinación para la necesaria evolución de la web.”.
El poder y la integridad que HTML5 proporciona a los desarrolladores de sitios web,
es impresionante ya que no es necesario instalar ningún plugin, es compatible con
la mayoría de navegadores de sitios web, con móviles, y monitores de distintas
resoluciones. Al mismo tiempo vuelve a internet en la plataforma líder de desarrollo.
Al respecto (Gauchat, 2012) menciona: “HTML provee los elementos
estructurales, CSS se encuentra concentrado en cómo volver esa estructura
utilizable y atractiva a la vista, y JavaScript tiene todo el poder necesario para
proveer
dinamismo
y
construir
aplicaciones
web
completamente
funcionales.”.
HTML5 es la última evolución de la norma que define HTML. El término representa
dos conceptos diferentes.
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. Este conjunto se le
llama HTML5 y amigos y, a menudo reducido a sólo HTML5.
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.

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.

Rendimiento e Integración: proporcionar una mayor optimización de la
velocidad y un mejor uso del hardware del equipo.
1.2 ESTRUCTURA BÁSICA DE HTML5
Para (Gauchat, 2012, pág. 1):
HTML5 provee básicamente tres características: estructura, estilo y
funcionalidad. Nunca fue declarado oficialmente pero, incluso cuando
algunas APIs (Interface de Programación de Aplicaciones) y la especificación
de CSS3 por completo no son parte del mismo, HTML5 es considerado el
producto de la combinación de HTML, CSS y JavaScript.
Los documentos HTML son estrictamente organizados y cada parte del código tiene
una razón de ser.
1.2.1 <!DOCTYPE>
La primera línea de código es muy importante, ya que se indicará el tipo de
documento que se realizará, para indicar que se creará código HTML5 es muy
sencillo:
<!DOCTYPE html>
1.2.2 <html>
La primera etiqueta para comenzar a construir la estructura tipo árbol es <html>. El
cual envuelve al resto del código.
<!DOCTYPE html>
<html lang=”es”>
</html>
“El atributo lang en la etiqueta de apertura <html> es el único atributo que
necesitamos especificar en HTML5. Este atributo define el idioma humano del
contenido del documento que estamos creando, en este caso es por español.”
(Gauchat, 2012, pág. 2)
Gauchat (2012) menciona que HTML usa un lenguaje de etiquetas para construir
páginas web. Estas etiquetas HTML son palabras clave y atributos rodeados de los
signos mayor y menor (por ejemplo, (<html lang=”es”>). html es la palabra clave
y lang es el atributo con el valor es. Y cada etiqueta es acompañada por una
etiqueta de cierre, en el caso del ejemplo anterior es </html>.
1.2.3 <head>
El código HTML que estará entre las etiquetas <html> tiene que estar dividido entre
dos secciones principales. La primera sección es la cabecera y la segunda es el
cuerpo. Por lo tanto las siguientes secciones en el código básico en HTML5 será
insertar las etiquetas <head> y <body>:
<!DOCTYPE html>
<html lang=”es”>
<head>
</head>
<body>
</body>
</html>
(Gauchat, 2012, pág. 4) Menciona acerca de la etiqueta <head>: “La etiqueta no
cambió desde versiones anteriores y su propósito sigue siendo exactamente el
mismo.”
Dentro de la etiqueta <head> se definirá el título de la página web, se declarará el
set de caracteres correspondiente, se insertará información general acerca del
documento y se podrá incorporar los archivos externos de estilos, JavaScript o
incluso imágenes.
1.2.4 <body>
La siguiente gran sección que es parte principal de la organización de un documento
HTML es el cuerpo. El cuerpo representa la parte visible de todo documento y es
especificado entre etiquetas <body>.
1.2.5 <meta>
Ésta es una etiqueta <meta> define el juego de caracteres a utilizar para mostrar el
documento:
<!DOCTYPE html>
<html lang="es">
<head>
1.2.6 <meta>
<meta charset=”iso-8859-1”>
“La innovación de este elemento en HTML5, como en la mayoría de los casos, es
solo simplificación.” (Gauchat, 2012, pág. 5).
Esta etiqueta para la definición de caracteres es más corta y simple. También se
pueden agregar otras etiquetas <meta> con atributos como description o
keywords para definir otros aspectos de la página web, por ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="ARCOTECHO, somos fabricantes de
arcotecho o techos sin estructura…>
</head>
<body>
</body>
</html>
Recordemos que esta información no es mostrada en la pantalla del navegador,
esta información es exclusiva para motores de búsqueda.
“En HTML5 no es necesario cerrar etiquetas simples con una barra al final, pero
recomendamos utilizarlas por razones de compatibilidad.” (Gauchat, 2012, pág. 6).
1.2.7 <title>
La etiqueta <title> especificará el titulo del documento, el cual será mostrado en la
pestaña del navegador.
<title>ARCOTECHO | KR-18 | Arcoperfiles Industriales</title>
1.2.8 <link>
Otro importante elemento que va dentro de la cabecera del documento es <link>.
Este elemento es usado para incorporar estilos, códigos Javascript, imágenes o
iconos desde archivos externos. Uno de los usos más comunes para <link> es la
incorporación de archivos con estilos CSS. Por ejemplo:
<link rel="stylesheet" href="engine1/style.css" />
En HTML5 ya no es necesario especificar qué tipo de estilos estamos insertando,
por tanto el atributo type fue eliminado. Solo necesitamos los atributos rel y href. El
atributo rel significa “relación” y es de la relación entre el documento y el archivo
que estamos incorporando por medio de href. El atributo rel tiene el valor
“stylesheet”, el cual le dice al navegador que el archivo engine1/style.css es un
archivo css con estilos creados para presentar la página en pantalla.
1.3 ESTRUCTURA DEL CUERPO
“La estructura del cuerpo (el código entre las etiquetas <body>) generará la parte
visible del documento. Este es el código que producirá nuestra página web.”
(Gauchat, 2012, pág. 8).
Gauchat (2012) mencionó que HTML ofreció diferentes formas de construir y
organizar la información dentro de un documento. Una de las formas más populares
para estructurar y presentar la información en una página web, fueron las tablas con
la etiqueta <table>, la cual brindaba varios beneficios, ya que los desarrolladores
podían acomodar datos, imágenes, texto, etc. Aunque no hubiesen sido creadas
para ese propósito.
En los primeros días de la web las tablas revolucionaron el estilo de programar una
página web y también fue un gran paso hacia adelante conrespecto a la
visualización de los documentos y ofrecía una experiencia completamente distinta
a los usuarios.
Con el paso del tiempo las tablas han ido desapareciendo ya que la inclusión de
una nueva etiqueta <div>, es posible realizar más, escribiendo menos código;
aunque aún existen desarrolladores que utilizan las tablas como un recurso para
maquetar la información.
Más adelante surgió la etiqueta <div> la cual es más flexible que una tabla,
permitiendo aceptar más atributos que una tabla, esta etiqueta no proporciona tanta
información del documento web. Al respecto (Gauchat, 2012, pág. 8) menciona:
“El elemento <div> comenzó a dominar la escena. Con el surgimiento de
webs más interactivas y la integración de HTML, CSS y JavaScript, el uso de
<div> se volvió una práctica común. Pero este elemento, así como <table>,
no provee demasiada información acerca de las parte del cuerpo que está
representando. Desde imágenes a menús, textos, enlaces, códigos,
formularios, cualquier cosa puede ir entre las etiquetas de apertura y cierre
de un elemento <div>. En otras palabras, la palabra clave div solo especifica
una división en el cuerpo, como la celda de una tabla, pero no ofrece indicio
alguno sobre qué clase de división es, cuál es su propósito o qué contiene.”
Para los usuarios finales que visualizan el sitio web estos indicios no son
importantes, ya que es muy posible que ni siquiera noten alguna diferencia, pero
para los navegadores, esto puede ser crucial ya que puede marcar la experiencia
de un usuario al visitar el sitio web.
“HTML5 incorpora sus nuevas etiquetas las cuales ayudarán a identificar cada parte
del documento y organizar el cuerpo del mismo.” (Gauchat, 2012, pág. 12).
1.4 ETIQUETAS HTML5
1.4.1 <header>
Es uno de los nuevos elementos en HTML5. Este no debe de ser confundido con
<head>, el cual es usado para construir la cabeza del documento. Al respecto
(Gauchat, 2012) Menciona: “Del mismo modo que <head>, la intención de <header>
es proveer información introductoria (títulos, subtítulos, logos), pero difiere con
respecto a <head> en su alcance.”. La etiqueta <head> tiene la función de proveer
información de todo el documento, mientras que <header> es usado solo para
partes específicas dentro del cuerpo. Por ejemplo:
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
</body>
1.4.2 <nav>
Este elemento definirá la barra de navegación de la página web. Siguiendo el
ejemplo anterior, queda de la siguiente forma:
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
(Gauchat, 2012, pág. 14) Menciona: “El elemento <nav> fue creado para ofrecer
ayuda para la navegación, como en menús principales o grandes bloques de
enlaces, y debería ser utilizado de esa manera.”.
1.4.3 <section>
Este elemento sirve para especificar las secciones principales del documento
HTML. Al respecto (Gauchat, 2012) Menciona: “contiene la información más
relevante del documento y puede ser encontrada en diferentes formas (por ejemplo,
dividida en varios bloques o columnas).”. Y puede ser representado de la siguiente
forma:
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
1.4.4 <aside>
El elemento <aside> sirve para diferenciar elementos NO relevantes, por ejemplo:
al programar una web con un contenido que puede ser de ayuda para para el
visitante, más NO lo que realmente busca, para estructurar esta información se
usará la etiqueta <aside>.
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
1.4.5 <footer>
Para finalizar la construcción de la plantilla del sitio web solo hace falta un elemento.
Para otorgar un final al cuerpo del documento, existe un elemento llamado <footer>;
puede ser representado de la siguiente manera:
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
</aside>
<footer>
Derechos Reservados &copy; 2010-2014
</footer>
1.4.6 <article>
Este elemento permite identificar cada una de las partes relevantes dentro de un
documento HTML5, los cuales comparten características similares. Al respecto
(Gauchat, 2012, pág. 18), menciona:” Del mismo modo que los blogs están divididos
en entradas, sitios web normalmente presentan información relevante dividida en
partes que comparten similares características. El elemento <article> nos permite
identificar cada una de estas partes”. Por ejemplo:
<section>
<article>
Este es el texto de mi primer mensaje
</article>
<article>
Este es el texto de mi segundo mensaje
</article>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
Las etiquetas article pueden pertenecer a un <section>, funcionando como sus
hijos, también pueden permanecer fuera de un section, siendo hijos de <body>.
(Gauchat, 2012) Menciona:
Por ejemplo, en un típico documento HTML el elemento <body> es hijo del
elemento <html> y hermano del elemento <head>. Ambos, <body> y
<head>, tienen al elemento <html> como su padre.
Figura 1-4. Representación visual de las etiquetas <article> que fueron incluidas
para contener información relevante de la página web. (Gauchat, 2012, pág. 20).
REFERENCIAS:
Clic, A. (1999-2014). aulaClic. Recuperado el 7 de Julio de 2014, de
http://www.aulaclic.es/flash-cs5/t_1_2.htm
Gauchat, J. D. (2012). El gran libro de HTML5, CSS3 y Javascript. Barcelona:
Publidisa. Recuperado el 10 de Junio de 2014