Introducción

No nos detendremos demasiado en este tema, que ya está muy presente en la vida cotidiana de nuestros lectores. Vamos a introducir los Markup Language y la noción de web semántica, para no centrarnos de forma tan inmediata en la sempiterna cuestión de «cómo crear páginas web».

En la parte que viene a continuación, hemos decidido ofrecerle algunos puntos de referencia siguiendo en el espíritu de TL;DR.

Conocimiento, ontología, Markup Language, web semántica

El propósito de esta breve introducción no es recorrer la historia de la Web, sino que persigue un objetivo didáctico: ayudar a comprender cómo se estructura la información en ella.

Uno de los pilares de la World Wide Web, lanzada en 1989, es el uso de un viejo concepto, el hipertexto, caracterizado por la introducción de enlaces que pueden seguirse en un documento hasta otra parte de este (un ancla) o hasta otro documento situado localmente o en otro lugar.

Diez años antes, ya se habían identificado las ventajas de estructurar los documentos en forma de árboles que representaban su estructura interna (título, subtítulo, etc.) hasta llegar a la propia información en forma de texto.

En esta fase, la idea era separar «el contenido de la forma» para poder crear documentos aparentemente diferentes, pero basados en el mismo contenido. Esto conduce inevitablemente a la creación de hojas de estilo que definen el aspecto de estas estructuras en función de cómo se vayan a presentar.

Muy pronto se hizo una segunda observación: ciertas estructuras y ciertos elementos de información se repiten y, de hecho, representan árboles taxonómicos similares que sería interesante identificar y, a continuación, imponer en los documentos que manejan a menudo los mismos tipos de información. Por ejemplo, podríamos definir un concepto de dirección que debería seguir sistemáticamente una estructura determinada, sobre la que se podrían imponer reglas, como por ejemplo «un país debe pertenecer a una lista de países existentes«, «un código postal se compone de tales letras y números...».

dirección  
  persona o entidad  
  ubicación en la localidad  
  localidad  
  código postal  
  país

Podemos ver que esta información está estructurada, pero menos que la incluida en las bases de datos relacionales. Por eso se le ha dado la etiqueta un tanto imprecisa de datos semiestructurados.

Por tanto, las hojas de estilo también pueden aplicarse a estructuras con significado, y no solo a los niveles de ruptura de un documento (título...

HTML5 y CSS3

1. En pocas palabras

HTML (HyperText Markup Language) es un lenguaje de markup utilizado para presentar contenidos en la web. Dicho de otro modo, HTML proporciona un conjunto de etiquetas (de apertura y cierre) que pueden utilizarse para estipular la naturaleza de lo designado, en este caso enmarcado, por sus etiquetas.

Estas son algunas de las etiquetas más utilizadas:

títulos de distintos niveles (<h1>, <h2>, <h3>);
párrafo (<p>);
enlaces (<a>);
imágenes (<img>);
listas (lista no ordenada <ul>, lista ordenada <ol>, línea <li>);
tablas (tabla <table>, fila <tr>, celda <td>);
formularios de entrada (formulario <form>, entrada <input>, menú <select>);
zonas «div» (<div>).

Las zonas div se utilizan para separar partes de la página según su función, comportamiento o aspecto. Su uso no es obligatorio. Las zonas div pueden contener otros elementos HTML, como párrafos, imágenes, listas, formularios, etc. También pueden tener estilos dedicados aplicados mediante CSS para personalizar su apariencia. Pueden anidarse de forma que el flujo de trabajo de la página resista los cambios de tamaño cuando se minimiza la ventana del navegador o cuando la página se visualiza en un smartphone. Los frameworks de creación de sitios web le liberan de la tarea algo complicada de gestionar estas zonas y también facilitan la gestión de las interacciones entre el servidor y el usuario (entradas, formularios, get/post, etc.). Estos frameworks gestionan sus prototipos de página (plantillas) y los rellenan en el momento del intercambio HTTP.

HTML5 es una versión reciente de HTML. HTML5 añade nuevas funciones a la antigua versión HTML 4, como elementos de sintaxis HTML para datos audiovisuales, formularios interactivos, gráficos vectoriales y anotaciones.

Estas son algunas de las novedades de HTML5 :

Las etiquetas HTML se han ampliado para incluir nuevas funciones, como <video> y <audio> para medios de audio y vídeo, <canvas>para gráficos vectoriales y <section> para definir secciones de contenido.
El atributo placeholder permite definir un texto de sustitución para los campos de formulario hasta que sean rellenados...

El DOM

El Document Object Model (DOM) es una representación jerárquica de todos los elementos de una página web. Sirve para manipular los elementos de las páginas web y lo utilizan los navegadores para mostrar correctamente estas páginas.

El DOM se divide en varios artefactos.

Documento: es el nivel superior del DOM, que contiene todos los demás elementos. Está representado por un objeto llamado Document, que refleja nuestra página.
Elementos HTML: representan los elementos estructurales de una página web, como las etiquetas HTML. Los elementos HTML se representan mediante objetos heredados de la clase Element.
Atributos HTML: son los atributos asociados a los elementos HTML; por ejemplo, el atributo href para los enlaces. Los atributos se representan mediante pares clave-valor.
Textos y comentarios: son los textos y comentarios presentes en el código HTML, que no son característicos de HTML. Los textos se representan mediante objetos de tipo Text, mientras que los comentarios se representan mediante objetos de tipo Comment.
Nodos: el DOM también se compone de nodos (Nodes), que son puntos de convergencia entre los distintos elementos del documento. Los nodos pueden ser elementos HTML, texto, comentarios o espacios en blanco.
Árbol DOM: el árbol DOM es una representación del DOM en forma de grafo, donde cada elemento está representado por un nodo, y las relaciones...

JavaScript

JavaScript, que en ningún caso debe confundirse con Java, es desde hace tiempo el lenguaje preferido para el desarrollo web nativo. Vamos a compararlo rápidamente con Python en varios aspectos.

Sintaxis: similar a C++, la sintaxis de JavaScript utiliza llaves para definir bloques de código y punto y coma para terminar las líneas, mientras que Python utiliza sangrías (desplazamientos) para estructurar su código.
Naturaleza dinámica: al igual que Python, JavaScript es un lenguaje de programación de tipado dinámico, lo que significa que no es necesario declarar variables antes de utilizarlas.
Orientado a objetos: al igual que Python, JavaScript es un lenguaje orientado a objetos, lo que significa que todo en el lenguaje se considera un objeto, incluidos los artefactos no declarados como tales. En términos de programación de objetos, los dos lenguajes tienen algunos conceptos similares, como clases, objetos, atributos y métodos.
Funciones de primer orden: al igual que Python, JavaScript permite definir funciones de primer orden, que pueden asignarse a variables, pasarse como argumentos a otras funciones e incluso ser devueltas por funciones. Ambos lenguajes también permiten definir funciones recursivas.
Asíncrono: JavaScript es de forma nativa un lenguaje asíncrono, mientras que Python ha evolucionado parcialmente en esta dirección. Esto permite realizar operaciones de red, animar gráficos y actualizar la interfaz de usuario sin bloquear el thread de ejecución principal.
Ejecución en el servidor en contextos web: de forma nativa, JavaScript se ejecutaba en la estación de trabajo cliente, pero desde hace tiempo se utilizan ampliamente entornos profesionales como Node.js, que permiten la ejecución de JavaScript en el lado del servidor. De manera similar, en los contextos web en los que se ha decidido utilizar Python, encontrará numerosas configuraciones, por ejemplo basadas en frameworks como Flask o Django, que también permiten ejecutar código Python en el servidor dentro de un contexto web.

De hecho, incluso cuando se utiliza un framework web no JavaScript, suele aparecer algo de código JavaScript en alguna parte de la aplicación, ya que la cantidad de código, widgets y soluciones creadas con JavaScript para el desarrollo web es considerable.

El código y la Web