Duración estimada: 18 h => ~ 4,5 semanas

Lenguajes de marcas en entornos web. HTML5¶

Herramientas de diseño web.¶

Bloc de notas (Recomendado Notepad++).
Navegador web (Recomendado Firefox).

Para aprender usaremos codi.link o [codepen.io]

Para desarrollos más allá, podremos utilizar vs code + plugin live preview.

Estándares web. Versiones. Clasificación.¶

HTML, CSS y JavaScript: Una aplicación web, es una aplicación creada usando como base el lenguaje HTML. Por lo tanto, se trata de una aplicación que se ejecuta en un navegador de Internet.

Las aplicaciones web utilizan lenguajes que apoyan la labor de HTML y que son traducibles por parte de los navegadores. Esencialmente las aplicaciones web actuales utilizan:

HTML. Para dar significado a los contenidos de la aplicación web. Permite indicar qué textos son títulos, cuáles son párrafos normales, cuáles son celdas de una tabla, cuáles son imágenes, etc.

CSS. Lenguaje que permite dar formato y maquetación a los contenidos. Color, tamaño de letra, posición, etc.

JavaScript. Permite diseñar la interactividad de la página. Permite que las acciones del usuario se puedan capturar y que la página reaccione a ellas. Ejemplos de sus posibilidades que cuando el usuario arrime el ratón a una imagen esta se ilumine, o que cuando el usuario haga clic en un título se muestre el contenido relacionado si estaba oculto o que el usuario pueda aumentar el tamaño de la letra de la página haciendo clic en un icono. Fuente: Jorge Sánchez

Versiones¶

HTML: ha evolucionado desde la 1.2 (sí, 1.2) hasta la actual versión 5 donde el salto fundamental con respecto a la 4 ha sido la separación de la presentación de los datos. Aunque soportado, no deben utilizarse las marcas de formato/presentación, ya que de ello nos encargaremos con CSS.
CSS:
v1: primera separación. Representación muy simple.
v2: mejora de las capacidades de representación. Definido a veces como una revolución visual.
v3: grandes avances visuales, pero se centra en separación de módulos. Destacaría el manejo vectorial y las propiedades flexbox (fluído) y grid (rejilla).
JS:
ES1 (1997): primera versión. Aporta dinamismo a la web.
ES3 (1999): Algunos avances relevantes como try/catch.
ES5 (2009): Modo estricto y JSON sobresalen y cambian paradigmas.
ES6: Desde 2015 hasta hoy, con pequeñas revisiones cada año para una evolución más rápida. Destacando:
- ES2015 -> Clases y módulos que cambian la forma de programar permitiendo realizar proyectos grandes de forma organizada.
- ES2017 -> Async/await que modifican el tratamiento de tareas asíncronas.
- ES2024 -> ultima versión.

Primeros pasos con HTML.¶

El mundo de las etiquetas¶

Estructura de una etiqueta HTML Fuente: Manz.dev

Atributos comunes¶

Atributos

id: es un identificador único de elemento. Viene a sustituir name ya deprecated (-> “deprecado” -> obsoleto).
class: es un identificador de grupo utilizado para asignar estilos a todos los elementos de un grupo. Todo tag (etiqueta) puede tener o no uno o varias clases asignadas (separadas por espacios). P.e.: <button class="boton azul"> pertenecerá a las clases “boton” y “azul”.
style: permite asignar estilos css sobre el mismo elemento. Nosotros no lo utilizaremos ya que vamos a establecer la separación absoluta de contenido-presentación-acción con html-css-js respectivamente.

Estructura¶

estructura Fuente: Manz

Hola mundo¶

<html>
  <head>
    <!-- esto es un comentario -->
    <title>Mi primera web</title>
  </head>
  <body>
    Hola mundo. 

    ¡Que gran emoción tengo! 

    Saludos desde España.
  </body>
</html>

Algunos caracteres se ven mal...

Seleccionemos un juego de caracteres que soporte los caracteres españoles. Para eso sólo tenemos que añadir en el head la etiqueta <meta charset="UTF-8">.

Depuración / Validación¶

Para comenzar a depurar abriremos las herramientas para desarrolladores F12 o ⌃ Control + ⇧ Shift + I

Podemos ver el aviso Quirks Mode, donde el navegador indica que se encuentra en un modo retrocompatible con web antiguas.

Para solucionarlo sólo tenemos que añadir al comienzo la declaración de tipo <!DOCTYPE html>.

Validación¶

w3c - World Wide Web Consortium

Como podréis comprobar, la validación de nuestra sencilla web nos arroja un warning respecto al idioma, que si bien no es damático, si deberemos solucionar simplemente añadiendo el idioma a la etiqueta <html>, quedando tal que así <html lang="es">.

Estructura de un documento HTML.¶

Veíamos en el ejemplo las 2 partes fundamentales de un documento html: cabeceras y cuerpo.

Dentro del cuerpo, html5 nos ofrece una estructuración semántica según las etiquetas semánticas encabezado <header>, navegación <nav>, lateral <aside>, pie <footer> y principal <main>,y dentro de éste elementos como <article>, <section> y los clásicos <div> (bloques).

Ver mdn.

Ejercicio¶

Modifica la página básica para añadir dichos elementos y dar forma a nuestra web.

HTML5 vs ...¶

Un mínimo visual¶

Estamos en html5 por lo que no vamos a utilizar etiquetas visuales y por tanto para dar algo de style a nuestra web vamos a introducir un pié en el CSS (tema 3).

Añadiremos al <head> la hoja de estilo default.css que tenéis disponible aquí y ¡magia! <link rel="stylesheet" type="text/css" href="https://luisferreira.top/2024/assets/lmsgi/default.css" media="screen" />

Enlaces¶

Ver en uniwebsidad

tag <a></a>
atributo obligatorio href="marca.com"
otros atributos:
target="_blank"
download="archivo.txt"
Enlaces internos href="#idDelElemento"

Rutas¶

Partiremos de la definición de la dirección base con <base href="./uno/dos/"> (de forma relativa a la ubicación del archivo actual) o <base href="https://marca.com"> (de forma absoluta).

Si no se define la etiqueta base las referencias serán respecto al archivo actual.

Tipo	Formato	Significado
implícita	“foto.jpg”	se encuentra en la dirección `base`
relativa	“./foto.jpg”	relativa a la dirección `base`
relativa	“../foto.jpg”	relativa al padre de la dirección `base`
absoluta local	“/home/usuario/foto.jpg”	absoluta a la raíz del sistema (no recomendable)
absoluta a URL	“https://marca.com/foto.jpg”	desde internet

Respecto a las absolutas desde internet, debemos saber más cosas.

Elementos del HTML¶

Manual de Referencia de etiquetas en w3schools.

Los elementos del HTML están definidos en la norma HTML living standard, del WHATWG. Esta norma se puede consultar en la web en su versión paginada o en su versión de una sola página.

A cada elemento corresponde una etiqueta (también llamadas marcas), por lo que estos tres términos (elementos, etiqueta y marca) son intercambiables.

En la norma, las diferentes etiquetas están agrupadas en las siguientes categorías:

Elemento raíz¶

El elemento raíz de una página web es el elemento <html>, que abarca todo el documento excepto la declaración de tipo de documento inicial.

El elemento raíz contiene dos elementos: <head> (la parte no visible de la página) y <body> (la parte visible).

El elemento raíz <html> se comenta en la lección Raíz y metadatos.

Secciones¶

Las secciones son las partes temáticas en las que se puede dividir el contenido de una página web.

La sección más importante es <body> que abarca todo el contenido de la página web que se visualiza en el navegador. Los otros tipos de secciones son <body>, <article>, <section>, <nav>, <aside>, <h1> ...<h6>, <hgroup>, <header>, <footer> y <address>.

Las secciones se comentan en la lección Secciones.

Bloques de contenido¶

Las etiquetas de bloque permiten definir bloques de contenido coherente, formado por texto e imágenes. Visualmente, cada bloque se suele mostrar separado del resto de bloques.

El bloque de contenido más simple es el párrafo (etiqueta <p>), pero existen otros tipos como <hr>, <pre>, <blockquote>, <figure>, <figcaption>, <div> y <main>, además de los diferentes tipos de lista <ol>, <ul> y <dl> (y sus componentes <li>, <dt> y <dd>).

Los bloques de contenido se comentan en las lecciones Bloques de contenido y Listas.

Texto en línea¶

Las etiquetas de texto en línea son las más numerosas y se emplean para identificar fragmentos de texto que tienen un significado especial. Normalmente, los elementos de texto en línea se encuentran dentro de elementos de bloque, modificaciones o tablas.

Las etiquetas de texto en línea más habituales son <br>, <span>, <em> y <strong>, así como la etiqueta de enlace <a>.

Otras etiquetas que se utilizan menos son <small>, <s>, <cite>, <q>, <dfn>, <abbr>, <time>, <kbd>, <sub>, <sup>, <i>, <b> y <mark>.

Las etiquetas de texto en línea utilizadas más raramente son <data>, <code>, <var>, <samp>, <u>, <ruby>, <rb>, <rt>, <rtc>, <rp>, <bdi>, <bdo> y <wbr>.

Los elementos de texto en línea se comentan en las lecciones Texto en línea y Otros.

Metadatos¶

Los metadatos son información de carácter general que no se muestra en la ventana del navegador. Las etiquetas de metadatos son: <head>, <title>, <base>, <link>, <meta> y <style>.

Los metadatos se encuentran dentro de la sección <head>.

Los metadatos se comentan en la lección Raíz y metadatos.

Modificaciones¶

Esta categoría incluye únicamente dos etiquetas, <del> y <ins>, pensadas para identificar las modificaciones que se han realizado en un texto.

Las modificaciones se comentan en la lección Modificaciones.

Contenido incrustado¶

Una página web es un documento de texto, pero puede contener elementos "incrustados" como imágenes, vídeo, audio, etc.

La principal etiqueta es la etiqueta <img>, que permite incluir imágenes, pero existen etiquetas para otros tipos de formatos: <picture>, <source>, <iframe>, <embed>, <object>, <param>, <video>, <audio>, <track>, <map> y <area>.

Los contenidos incrustados se comentan en las lecciones Imágenes (formatos) y Objetos.

Tablas¶

Una página web puede mostrar información en formato de tabla, con filas y columnas.

Las etiquetas que permiten definir las tablas son: <table>, <td>, <th> <tr> <thead>, <tbody> <tfoot>, <caption>, <col> y <colspan>.

Las tablas se comentan en la lección Tablas.

Fuente: MCLibre - Bartolomé Sintes

Tablas con `DIV`s¶

Lo trabajaremos en la ut3 sobre CSS - enlace

Formularios¶

Una página web puede contener formularios, que permiten al usuario proporcionar información. Normalmente dicha información se envía a un servidor para ser procesada por un programa, aunque también puede ser procesada en el navegador mediante un programa escrito en el lenguaje JavaScript.

Las etiquetas relacionadas con formularios son: <form>, <fieldset>, <label>, <input>, <button>, <textarea> y <select>.

Los formularios se comentan en la lección Formularios y formularios 2

Elementos interactivos¶

Los elementos HTML son normalmente elementos fijos y su posible interactividad se consigue mediante JavaScript, pero existen un par de elementos que permiten cierta interactividad (muy limitada) sin necesidad de JavaScript: <details>, <summary> y <dialog>.

Los elementos interactivos se comentan en la lección Interactivos.

Scripts¶

Los navegadores son capaces de ejecutar programas escritos en el lenguaje de programación JavaScript. Estos programas se suelen denominar scripts. Varias etiquetas permiten integrar estos programas en una página web: <script>, <noscript>, <template>, <slot> y <canvas>.

Fuente: MCLibre - Bartolomé Sintes

Tag `script`¶

En la web actual se refiere a scripts de JavaScript, pero existen (o existían) otros lenguajes de script como VBSript (variante de Visual Basic).

Veremos en profundidad los scprit en la UT5.

Tag `<noscript>`¶

Dentro de los scripts podemos incluir el tag <noscript> para compatibilidad con navegadores antiguos o por accesibilidad como lectores de pantalla, navegadores textuales, etc.

Tag `<canvas>`¶

El tag <canvas> permite dibujar gráficos y animaciones mediante la canvas scripting API o el WebGL API.

Modelo de Objetos de Documento - DOM¶

DOM Es la representación lógica de la estructura del documento. Es fundamental para la manipulación por parte de scripts.

Shadow DOM¶

Shadow DOM El “DOM en la Sombra” es un DOM que puede ser asociado a un elemento del DOM principal, pero que no es mostrado (en la sombra) hasta que no se manipula con JavaScript.

Tags `<template>` y `<slot>`¶

El tag <template> es un mecanismo para mantener fragmentos HTML en el shadow DOM preparados para fusionar con en el DOM. La fusión se realiza mediante JavaScript.

El elemento HTML <slot>, parte del conjunto de tecnologías de componentes web, es un marcador de posición dentro de un componente web que puede rellenar con su propio marcado, lo que le permite crear árboles DOM separados y presentarlos juntos.

Escapado de caracteres¶

En ocasiones se puede dar que queramos utilizar caracteres que utilizamos como marcas de html, p.e. <, >, un espacio .

Result	Description	Name	Number
‘ ‘	non-breaking space	` `	` `
<	less than	`<`	`<`
>	greater than	`>`	`>`
&	ampersand	`&`	`&`
"	double quotation mark	`"`	`"`
'	single quotation mark	`'`	`'`
¢	cent	`¢`	`¢`
£	pound	`£`	`£`
¥	yen	`¥`	`¥`
€	euro	`€`	`€`
©	copyright	`©`	`©`
®	trademark	`®`	`®`

Fuente: w3schools

Podremos utilizar el código o el nombre para la sustitución que el navegador sustituirá por su carácter correspondiente.

Antiguamente, antes de la codificación utf-8 requeríamos escapar los caracteres típicos españoles como “ñ“ ñ, “á“ &aacute o las olvidadas comillas españolas “«“ « y “»“ ». Tabla completa.

Accesibilidad¶

Existen algunas cosas que podemos realizar para mejorar la accesibilidad de nuestra web para personas con deficiencias visuales.

La más sencilla y rápida es añadir el atributo alt en imágenes lo cual garantiza que se mostrará una descripción en aquellos navegadores que no muestren la imagen, facilitando la accesibilidad. P.e. <img src="imagen_que_no_se_muestra.png" alt="Esta imagen aclara el concepto de mejora de la accesibilidad en html" />:

Texto ambiguo que requiere una imagen aclaratoria
Esta imagen aclara el concepto de mejora de la accesibilidad en html

Por otro lado, también tenemos la etiqueta title que podremos utilizar en imágenes y enlaces para describir su función. P.e. <img src="https://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" title="Esta imagen aclara el concepto de mejora de la accesibilidad en html" /> mostrará la descripción al pasar por encima... pero si tenemos un navegador adaptado será lo que nos muestre:

Texto ambiguo que requiere una imagen aclaratoria

Ir

Transcripciones ¶

A menudo, la mejor forma de facilitar el consumo de nuestro contenido a personas con dificultades visuales (o simplemente a personas que están conduciendo o cocinando) es la transcripción de texto a voz.

Un servicio que puede facilitarnos la tarea puede ser TTSMAKER

Otros¶

SVG: SVG (1) - SVG (2)
Formas básicas - Formas avanzadas
Texto
MathML

Obsoletas¶

Puedes consultar las etiquetas que no debemos utilizar y el reemplazo a realizar si te las encuentras.

Práctica: Haz tu blog de noticias¶

Ver tarea en MOODLE

El uso del formulario con el destino facilitado y el campo añadido asegurará que tu formulario es recibido, procesado, registrado y valorado.

[!NOTE] Sólo será valorado el último envío que realices. Asegúrate que es el correcto leyendo que he recibido y la puntuación otorgada a cada apartado.

[!IMPORTANT] Según la tabla aportada, estima que necesitarás 30 puntos para que el formulario sea considerado suficiente. De ahí para arriba podrás añadir lo que quieras.

Forma de entrega¶

Se realizará a través de Moodle
Deberá contener únicamente archivos html e imágenes asociadas.
Deberá enlazar a css proporcionado por CDN <link rel="stylesheet" type="text/css" href="https://luisferreira.top/2024/assets/lmsgi/default.css" media="screen" />
El formulario deberá remitir los datos a https://lmsgi.luisferreira.top/recibe_formulario.php
El punto de entrada al mismo será un archivo denominado index.html

Evaluación y calificación¶

La dimensión y profundidad de esta práctica es libre y competitiva repartiendo la probabilidad de contratarte para la redacción de mi web entre todos los alumnos de 0 a 3 puntos (de décima en décima).
Utilización rica de etiquetas y atributos: 5 puntos.
Contenido: 2 puntos.
Respeto del estándar HTML5: restará 1 punto por warning y 3 por error.

Referencias¶

Notas al pie¶

[^1]: en realidad la dirección queda calculada respecto a la dirección base si es especificada mediante el tag <base href="https://url.es/lo_que_sea">.

[^2]: inserta un campo con una clase específica para el indicador, p.e. rojo, naranja, amarillo, verde, que luego “maquillaremos” con css en la ut3.

Result	Description	Name	Number
‘ ‘	non-breaking space	` `	` `
<	less than	`<`	`<`
>	greater than	`>`	`>`
&	ampersand	`&`	`&`
"	double quotation mark	`"`	`"`
'	single quotation mark	`'`	`'`
¢	cent	`¢`	`¢`
£	pound	`£`	`£`
¥	yen	`¥`	`¥`
€	euro	`€`	`€`
©	copyright	`©`	`©`
®	trademark	`®`	`®`

Result	Description	Name	Number
‘ ‘	non-breaking space	` `	` `
<	less than	`<`	`<`
>	greater than	`>`	`>`
&	ampersand	`&`	`&`
"	double quotation mark	`"`	`"`
'	single quotation mark	`'`	`'`
¢	cent	`¢`	`¢`
£	pound	`£`	`£`
¥	yen	`¥`	`¥`
€	euro	`€`	`€`
©	copyright	`©`	`©`
®	trademark	`®`	`®`

Lenguajes de marcas en entornos web. HTML5¶

Herramientas de diseño web.¶

Estándares web. Versiones. Clasificación.¶

Versiones¶

Primeros pasos con HTML.¶

El mundo de las etiquetas¶

Atributos comunes¶

Estructura¶

Hola mundo¶

Depuración / Validación¶

Validación¶

Estructura de un documento HTML.¶

Ejercicio¶

HTML5 vs ...¶

Un mínimo visual¶

Enlaces¶

Rutas¶

Elementos del HTML¶

Elemento raíz¶

Secciones¶

Bloques de contenido¶

Texto en línea¶

Metadatos¶

Modificaciones¶

Contenido incrustado¶

Tablas¶

Tablas con DIVs¶

Formularios¶

Elementos interactivos¶

Scripts¶

Tag script¶

Tag <noscript>¶

Tag <canvas>¶