HTML5 desde el principio

PIXABAY

La obsolescencia programada no es algo presente únicamente en un cable pésimamente soldado o en un circuito de mala calidad diseñado bajo las premisas que alaban el coste más bajo posible por encima de todo.

El código y la programación son otro de los pilares que sustentan o limitan la calidad de algo, a día de hoy existen muchos lenguajes para controlar a todos los aparatos por donde circulan electrones y regular su comportamiento.

---

Elegir alguno para empezar a mostrar cómo funciona la programación moderna era tan difícil como decidir el sexo de los ángeles, pero para variar, decidimos salirnos por la tangente y comenzar por un curso del que sin duda es el emperador de todo y a su vez no gobierna nada: HTML

Y ya puestos, irnos a HTML5 directamente, ¿Por qué?

Este lenguaje nace como una nueva concepción, no es una mejora de versiones anteriores para programar en Internet o crear nuevas aplicaciones, es una visión diferente y mejorada para un mundo que combina un universo conectado en red con dispositivos móviles e interacción y almacenamiento en la nube virtual.

El lenguaje HTML surgió con la intención de estructurar el contenido de la red y compartir la información por medio de páginas con reglas básicas que permitieran dicha función. Pero estas primeras versiones se crearon con la intención de crear las estructuras esenciales que pronto empezarían a quedar limitadas. Estas limitaciones alentaron a varias compañías a crear nuevos lenguajes y programas que suplieran las carencias del HTML.

Estas empresas pronto comenzaron a crecer, pues su popularidad se debió a que consiguieron implementar funciones nunca antes vistas y se convirtieron en complementos necesarios, más allá de realizar juegos sencillos o presentaciones más vistosas se tornaron en sofisticadas aplicaciones que poco a poco cambiaron el concepto de la red y nos adentraron en el mundo móvil.

PIXABAY

En un primer momento la interacción con la web era bastante simple y estas nuevas tecnologías replantearían los conceptos, Flash y Java se quedaron para marcar un nuevo camino, adoptadas rápidamente por los desarrolladores se convirtieron en el futuro de la red.

Pronto Internet maduró y pasó de interconectar universidades, profesionales o aficionados a los ordenadores a transformarse en una pieza clave para los negocios, interconectar a especialistas  y convertirse en una herramienta para la interconexión social.

Esta masificación en su uso dejó ver rápidamente las carencias de estos dos lenguajes ya que no tenían una integración y comunicación suficiente entre las aplicaciones y los documentos.

Y de esta manera nació Javascript  un lenguaje sin las limitaciones de los plu-gins  de Flash o Java. Javascript comparte espacio con HTML y  los navegadores lo interpretan.

Era una buena idea para mejorar la interacción y la funcionalidad  de la web ya que disponía de más integración con el entorno HTML. A pesar de todo después de malas promociones a nivel profesional y algunos usos con intenciones cuanto menos abusivas provocaron que nunca se adoptara por completo. Los detractores crecieron y no les faltaba razón, Javascript no podía alcanzar la misma funcionalidad de Flash o Java.

Por ejemplo diremos que Flash y Java eran las únicas herramientas de programación  que podían realizar ciertas funciones de una manera efectiva como la reproducción de video que estaba alcanzando  mucha popularidad hasta el punto de ser parte irrenunciable de la red…

Con el tiempo Java  comenzó a volverse obsoleto, no evolucionaba de la forma que se necesitaba  y su complejidad unida a su falta de integración hicieron que ganara la partida Flash, relegándose Java a un plano totalmente secundario en la web ,aunque tal vez algún día tengan que compartir destino definitivamente.

En la imagen podemos observar el resaltado de la sintaxis. PIXABAY

Y claro con esta competición los navegadores no dejaron de evolucionar, cada vez se alcanzó más potencia y la implementación de nuevas funciones, unos intérpretes de Javascript mejores allanaron el camino para su regreso, de forma que  algunos desarrolladores comenzaron a dejar de lado Flash y Java aprovechando las últimas ventajas de los navegadores y Javascript comenzó a verse con otros ojos, los desarrolladores empezaron a explotar todo su potencial haciendo un efecto llamada sobre otros desarrolladores.

Una nueva visión de la red

Con la conciencia de haber llegado a una nueva  era gracias al aumento de potencia y desarrollo alcanzamos la web 2.0, Javascript alcanzó una increíble reputación y fuerza,  fue un lenguaje que permitió innovar y hacer cosas que no se habían podido imaginar antes. Conforme el número de programadores en Javascript aumentó, nacieron nuevas técnicas e ideas que superaron definitivamente sus deficiencias dando lugar a un cóctel que se podría considerar el más completo e integrado  para la evolución de la red de redes: HTML, CSS y Javascript.

Ahora viene lo bueno ; ¿Porqué decimos esto?

HTML5 mejora este cóctel, es algo primigenio, es el armazón donde todas estas tecnologías se unen dotando de una estandarización y un propósito claro a cada uno de estos lenguajes, CSS la convertiría en algo manejable y bello a los ojos del público, mientras que Javascript se convierte en la pieza clave para la interacción con el usuario, dotando a la web de la funcionalidad necesaria en cada tipo de aplicación solicitada.

Las barreras de antaño entre las aplicaciones y los sitios web desaparecen de este modo y con estas tecnologías cohesionadas, el futuro  se muestra muy prometedor con quien domine HTML5 en los próximos años.

Así que sin duda, si tenemos que comenzar por un lenguaje de programación para poder comprender un poco este apartado tecnológico y ver sus mecanismos de funcionamiento y uso, nada mejor que comenzar por entender cómo se programa lo que tenemos delante de nuestros ojos.

La combinación perfecta para desarrollar páginas con un alto nivel de calidad. PIXABAY
 
En este preciso instante aún no todos los navegadores actualmente en funcionamiento soportan todas sus funcionalidades, debido a la coexistencia de infinidad de dispositivos y versiones de las distintas épocas de internet,  por esta razón y  como siempre ha sido, a la hora de comprobar el código es aconsejable probarlos en el mayor número de navegadores posible y en diferentes versiones.

Si se trata de comprobar el funcionamiento con las últimas actualizaciones aconsejamos Chrome y Firefox porque enseguida han ido implementado las funciones de este estándar. Aunque sea cual sea el que uses normalmente, es aconsejable siempre con mentalidad de programador que los puedas probar en el mayor número posible de variantes.

Con todo esto HTML5 nos muestra el camino de baldosas amarillas a seguir, eso no quiere decir que no vallamos a tratar pronto otros lenguajes más dirigidos a las máquinas, la electrónica pura o los ordenadores, pero el HTML tiene algo que ningún otro tiene: es sin duda el lenguaje más común en nuestras vidas junto al código máquina del núcleo de cualquier aparato independientemente de si tenemos un PC, Apple, Android, vemos internet en el teléfono, nuestro coche o la nevera, así que  comencemos pues…

Capitulo 1 ¿Cómo es el código en HTML5?

1.a Componentes básicos

HTML5 está considerado a su vez una combinación de HTML, CSS y Javascript al proveer de estructura, estilo y funcionalidad, siendo dependientes entre los tres, pero siempre bajo las especificaciones de HTML5
HTML nos daría el armazón y la estructura que todo lo sostiene, CSS nos lo mostraría en pantalla  de una manera bella y Javascript entraría en acción cuando quisiésemos interactuar, todo en una perfecta simbiosis.

La estructura es el pilar esencial de un documento que nos da los elementos necesarios para localizar el contenido estático o dinámico, actúa de base para las aplicaciones y cobra más importancia que nunca dada la cantidad de dispositivos navegadores y tamaños de pantalla, la estructura y la capacidad de ésta para adaptarse es vital, y esto debe ser lo primero que aprendamos. Una base estructural fuerte nos permitirá aprovechar mejor todas sus funciones conforme avancemos.

Herramientas iniciales

Como antes hemos dicho los navegadores son pieza clave a la hora de comprobar el código,  pero para empezar necesitamos un lugar donde escribir nuestro código, es decir un editor de texto plano, no un procesador de textos como Word u otros, porque estos pueden aplicar formatos al texto que escribimos, es decir lo que escribimos no es más que una parte de un archivo mucho mayor donde están contenidas las características de ese texto (código en nuestro caso) que escribimos.

A la izquierda esta el notepad ++ y a la derecha el pspad editor ambos gratuitos

El bloc de notas sobra para empezar, si bien los conocidos como editores de código como por ejemplo Notepad ++ , pspad editor u otros tienen funciones extras que nos facilitarían el trabajo.

No te vamos a aconsejar uno concreto para empezar desde cero, porque no es ese nuestro objetivo, si ya has programado anteriormente, ya tendrás tus propias opciones y preferencias, más adelante tenemos pensado hacer análisis de editores, pero en este punto carece de sentido si eres un principiante, sería ganas de complicarte la vida y probablemente no entenderías las diferencias, que además llegado el punto alcanzan el plano subjetivo de cada uno o de nuestro bolsillo.

Si no es tan importante, ¿Qué ventaja tienen entonces?

Funciones como conteo de líneas, resaltado de sintaxis, autocompletar…que quiere decir en esencia que analizan el código que estamos escribiendo, advirtiéndonos en la medida de su nivel, de los errores que cometes al introducir el código tanto en la sintaxis del lenguaje que usemos (como un corrector ortográfico) y en la estructura, facilitando y acelerando el proceso para detectar errores que hayamos cometido o depurar la calidad de ese código.

Hay muchos y muy diferentes, si sois muy nuevos en esto, decidir usar uno con el que os sintáis cómodos a vuestra elección y que tenga soporte para la sintaxis del lenguaje de programación que vayáis a usar… vamos, elegir  el que al final os haga ser más productivos y cometer menos errores, no el que os prometa las funciones más avanzadas.
 
Nuestro primer archivo

Ahora sí, crearemos un archivo de texto con el editor seleccionado y de esta manera iremos probando el código aprendido y fijándolo mejor en nuestra mente, el documento lo guardaremos con la extensión .html  y el nombre que queramos quedando de la siguiente manera:

nombreelegido.html

Así de sencillo, ya tenemos un archivo donde meter nuestro código para que lo ejecute un navegador.
 
1.b La estructura y el armazón –visión general-
Ahora bien, no podemos escribir el código como nos plazca, la estructura HTML  debe estar perfectamente organizada mediante las etiquetas específicas, como vamos a crear nosotros mismos en el documento html que dijimos y en el que usaremos los nuevos elementos de HTML5.
Comenzaremos por lo más básico diciéndole a nuestro documento de que tipo es y lo haremos con la siguiente etiqueta (para empezar y simplificar, una etiqueta es algo así como una instrucción u orden de programación de toda la vida).

<!DOCTYPE>

Y a esta etiqueta le añadiremos un atributo de html quedando de la siguiente manera

          <!DOCTYPE html>

Esta será la primera línea, activando las nuevas funciones de HTML5 y activando el modo estándar de nuestro navegador.
La siguiente etiqueta que deberemos usar es <html> y dentro de ella quedará encerrado todo el código que introduzcamos:

 La etiqueta <html> solo tiene un atributo que le podemos añadir y este es:

“lang” el cual define el idioma de nuestro documento, Inglés, Español, Árabe…

Por ejemplo:

De esta manera con el atributo “lang”  y el valor “es” indicaríamos al navegador que el documento está escrito para el lenguaje Español.

Como veréis, el lenguaje HTML es un lenguaje extremadamente sencillo, haciéndolo muy fácil de aprender, las órdenes y comandos en HTML se dan mediante los comandos llamados etiquetas que acabáis de ver. Podemos partir de aquí sin más…

<ETIQUETA>

<!DOCTYPE>                                      

O

<ETIQUETA>TEXTO</ETIQUETA>

<html>aquí lo que quieras poner</html>

Como podemos observar estas etiquetas van siempre entre los símbolos “<” menor que y “>” mayor que.
Y como podemos ver en el esquema superior, observamos que la primera es una sola etiqueta mientras que la segunda consta de una de apertura <html> y otra de cierre </html> en la cual se le añade la barra invertida “/”.

Estas etiquetas a parte de dar órdenes sencillas pueden dar órdenes más específicas mediante los atributos, por ejemplo:

<ETIQUETA ATRIBUTO=”VALOR”>

<!DOCTYPE html>

O

<ETIQUETA ATRIBUTO=”VALOR”>TEXTO<ETIQUETA>

<html lang=”es”>aquí texto, lo que quieras poner</html>

Sigamos estructurando nuestra plantilla

La cabecera

El código de la página delimitado por la etiqueta <html> se divide en dos grandes bloques, la cabecera y el cuerpo, (igual que en versiones anteriores de HTML) primero irá la cabecera que igual que la anterior etiqueta vista  constará de etiqueta de apertura y cierre:

Dentro de la etiqueta <head> se escribirá el nombre de la página web, elegiremos el juego de caracteres apropiado para nuestro idioma y daremos información general del documento, a la vez que enlazaremos a los archivos externos con estilos y códigos Javascript o incluso imágenes necesarias para generar la página en la pantalla. Todo lo que esté dentro de esta etiqueta será invisible para el usuario a excepción del título y algún icono.
 
El cuerpo
 
La siguiente etiqueta será <body> que es el segundo bloque del que está formado la página y esta etiqueta constará a su vez de nuevo de etiqueta de apertura y de cierre. Entre estas etiquetas estará la parte visible de la página.

Recapitulemos

HTML no es secuencial como otros lenguajes de programación (que van ejecutando el código más o menos, línea a línea), funciona como hemos dicho por unos “comandos” llamados etiquetas, las cuales son palabras clave, que pueden contener atributos y estos atributos valores. Estas etiquetas pueden ser contenidas unas dentro de otras formando una estructura anidada.

Así por ejemplo al principio del código la línea <html lang=”eng”>

html es la palabra clave

lang es el atributo

eng el valor

La etiqueta <meta>

En el siguiente ejemplo, en la primera línea se puede ver una etiqueta simple, la que indica el tipo de documento y seguidamente la etiqueta de apertura <html lang=”es”> esta etiqueta y la de cierre </html> indican el principio y el final del código HTML.

Entre las etiquetas <html> encontraremos dos grandes bloques delimitados por dos pares de etiquetas, la etiqueta <head> que es la cabecera y <body> para el cuerpo del documento.

Llegado a este punto veamos las posibilidades de la cabecera del documento la cual ha sufrido actualizaciones como la etiqueta que define el juego de caracteres. Esta es una etiqueta llamada <meta> que en el ejemplo especifica como el texto será presentado en pantalla y a la que más adelante le dedicaremos su correspondiente capítulo.

La definición de los juegos de caracteres para cada idioma se hace así, más simple, aquí por ejemplo escogemos UTF-8 es más amplio que iso-8859-1 por que recoge más idiomas y como hispanohablantes no encontraremos problemas con nuestra querida “Ñ”, la elección de un juego u otro ya es un debate que no vamos a iniciar ahora.
 
La evolución de la etiqueta <meta> como todo en HTML5, tiende normalmente a la simplificación, de hecho la nueva etiqueta <meta> para la definición del tipo de caracteres es más corta y a su vez simplificada.

Además de charset  podremos agregar más etiquetas como author, description o keywords para definir más aspectos de la página.
 
El atributo “name” dentro de esta etiqueta especifica su tipo y “content” el valor que le asignamos
 
Respectivamente son “author” que hace referencia a quien a escrito el código que en este caso es NegociosContra, con “description” describiremos la temática de nuestro sitio web y es de vital importancia porque es la información que mostrará el buscador en sus resultados, esta descripción deberá tener un mínimo de 50 caracteres y un máximo de 156 y por último hemos colocado la etiqueta “keywords” que sería la etiqueta donde colocaríamos las palabras clave, toda esta información no será mostrada normalmente por el navegador, no será mostrada al usuario, pero es necesaria para los motores de búsqueda o para que los navegadores realicen un sumario o una vista previa de la página.
Así que como comentamos anteriormente, aparte del título y algunos iconos, la mayoría de la información insertada entre las etiquetas <head> no es visible para los usuarios.
 
Las etiquetas <meta> son muchas más que estas que acabamos de describir, si bien en otro artículo las explicaremos todas, ahora mismo carece de importancia para iniciar el curso y sería dar mucha información sobre un tema que se nos antoja secundario ir más allá en este momento.
 
<title>
 
La siguiente etiqueta dentro de la cabecera sería <title> e indicará en la pestaña del navegador el título de nuestra página, la sintaxis será la siguiente:

<link>

Este es otro elemento importante dentro de la cabecera del documento y se usa para agregar imágenes, estilos procedentes de archivos CSS, gráficos, iconos contenidos en archivos externos o código de Javascript.

En HTML5, siguiendo su política de simplificación se eliminó un atributo conocido por quien ya conozca el HTML,  me refiero al atributo type. En la versión 5 solo necesitaremos dos atributos para traer nuestro archivo de estilos: rel y href

rel

El atributo obviamente significa “relación”, refiriéndose a la relación entre el documento y el archivo que estamos incorporando a través de href. En el ejemplo que os ponemos a continuación al atributo rel le asignamos el valor stylesheet donde el navegador es informado de que el archivo estilosdenegocioscontra.css es un archivo CSS con los estilos que se usarán para presentar nuestra página en la pantalla.

Por cierto, si alguno no sabe que son los “estilos” esos de los que llevamos hablando en toda esta introducción, se puede decir que es un conjunto de reglas que dirán al navegador el aspecto y la apariencia de nuestra página web, si no incluimos este archivo donde irá por ejemplo el color y el tamaño de nuestras fuentes de letra, el navegador usará los que lleve programados por omisión. Estos estilos son unas reglas muy simples que se describen rápidamente, aunque no es necesario asignar un archivo externo, es una buena práctica que ayuda a trabajar con más sencillez y comodidad el cuerpo principal, organizarlo correctamente e incluso incrementar la velocidad de carga.

Y con esto terminamos la introducción y la primera parte de nuestro curso-taller de HTML5, en el próximo capítulo seguiremos ya con la estructura del cuerpo de nuestra página web, esperamos que os guste nuestra propuesta para iniciarse a programar de una forma fácil y sencilla.
Ahora ya lo sabéis, solo necesitáis un procesador de textos sencillo como el notepad, un navegador para probar vuestro código y poco más, en capítulos posteriores, poco a poco iremos desarrollando las distintas etiquetas, estructura, aclaraciones y explicaciones necesarias para que en poco tiempo podáis ejecutar vuestro propio código en cualquier ordenador, tablet o teléfono y así podáis comprender desde la práctica los principios de la programación.
 
¿Te gusta escribir?
Rubén Luna S. - Madrid

Temas relacionados: Programación, Redacción independiente, ¿Te gusta escribir?

Reconocimientos y más información sobre la obra gráfica
ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.