Bloque de HTML
Comenzamos con este bloque de HTML:
Instalando Visual Studio Code (VSC)
Existen multitud de editores de código que nos permiten trabajar con Markdown, realizar webs o aplicaciones. En este caso, nosotros durante este curso vamos a utilizar a Visual Studio Code como entorno de desarrollo (IDE). 🚨¡IMPORTANTE, no confundir con Visual Studio!🚨
Y durante su instalación (siguiente, siguiente…) es muy importante que marquemos las siguientes opciones:
Una vez instalado, ya podemos abrirlo:
Visual Studio Code Web
En la actualidad además de trabajar con el IDE VSC en su versión desktop, también es posible trabajar desde la versión web.
Para ello, bastaría con visitar la siguiente URL: https://vscode.dev/
Instalando plugins en Visual Studio Code
Bien, tras tener instalado Visual Studio Code (VSC) vamos a instalar una serie de plugins que nos permitirán trabajar mejor con varias tecnologías como son Git, HTML 5, CSS 3, JavaScript… Para instalarlos basta con ir a la barra izquierda de VSC y pulsar sobre el último botón (en el que nos aparece 4 cubitos):
Una vez dentro de esta ventana, simplemente tendremos que buscar uno a uno los plugins que queremos instalar (por ejemplo, Auto Rename Tag) y finalmente pulsar sobre cualquiera de los botones en los que ponga instalar:
📌 ️ — Cuando acabemos de instalar todos los plugins, es necesario reiniciar el VSC para que dichos plugins estén operativos.
Los plugins a instalar son:
- Auto Rename Tag: nos permite modificar la etiqueta de apertura y de cierre de nuestros documentos HTML simultáneamente. Evitando tener que modificar ambas una a una de forma manual.
Vamos a ver un ejemplo:
- Blockman — Highlight Nested Code Blocks: DBG
- Prettier — Code formatter: nos permite formatear el código para que su mantenimiento y legibilidad sea mucho más sencilla de realizar.
Vamos a ver un ejemplo:
- Material Icon Theme: nos pondrá iconos en los ficheros en función de su extensión (HTML, CSS, JS…) para que sea más sencillo identificar ante que tipo de archivo estamos trabajando HTML5, CSS, JS…
Por ejemplo, cuando creemos los ficheros, podremos ver que nos salen los siguientes iconos:
- Colorize: nos permite visualizar los colores dentro de los ficheros CSS para que sea más sencillo identificar a dicho color.
Vamos a ver un ejemplo:
- Better Comments: nos permite escribir comentarios en distintos colores.
Vamos a ver un ejemplo:
- Indent Rainbow: nos permitirá añadir color en función del nivel de tabulación con la finalidad de identificarlas mejor.
Vamos a ver un ejemplo:
- Live Server: nos permite crear un servidor local (localhost) con tan solo pulsar un botón. Es ideal para poder ejecutar un sitio web sin mucha dificultad en que requiera de servidor. O bien cuando queramos que los cambios se apliquen automáticamente sobre nuestro browser cosa que no pasa si abrimos la página sin Live Server. Vamos a ver un ejemplo
Para iniciar el servidor vamos a:
- Live Preview:
Y finalmente, si ahora realizamos cambios en los ficheros de nuestro proyecto podemos ver en la pestaña en la que tenemos ejecutando la versión de Live server sí que se actualiza automáticamente. En cambio, en la que hemos abierto manualmente nosotros desde la carpeta tendremos que realizar una recarga nosotros de forma manual:
- Code runner: nos permite ejecutar el código de nuestros ficheros Javascript, Java, TypeScript, etc. Directamente desde nuestro terminal de VSC.
Para utilizarlo es necesario instalar NodeJS (se aconseja instalar la versión LTS). Una vez instalado node, abrimos Nodde.js command prompt:
Y realizamos un node --v para verificar que tenemos node corectamente instalado:
Tras la instalación de node, ahora si instalamos el plugin de VSC:
Y realizamos lo siguiente:
- Minify: nos permite reducir el tamaño de nuestros archivos comprimiéndolos al máximo. Para ello, la minificación elimina los espacios innecesarios (saltos de línea, espacios innecesarios, etc.) dentro de nuestros documentos.
Vamos a ver un ejemplo:
Sitios recomendados para obtener información
Mozilla Developer Network (o MDN WebDocs): es el sitio oficial de Mozilla y contiene una plataforma de aprendizaje para tecnologías Web y el software con el que funciona la web. Tal y como nos dice su web contiene “Recursos para developers escritos por developers” tales cómo tutoriales, ejemplos, documentación…
W3Schools: aunque no es una web oficial hace referencia al estándar, pero
además, añade tutoriales que nos pueden servir para profundizar un poco en el aprendizaje sobre la tecnología.
W3 (o W3C): como ya hemos visto, es la encargada de realizar el estándar. Es decir, de definir y escribir una serie de normas (protocolos y directrices) sobre lo que se define y lo que no.
FreeCodeCamp: Es una web bastante interesante ya que es totalmente gratuita, ya que es una organización sin animo de lucro que se mantiene a base de contribuciones que la gente realiza.
Otro de los aspectos por lo que destaca esta web es debido a que si completamos alguna de sus certificaciones obtendremos un certificado de forma totalmente gratuita.
Existen distintos certificados que nos permite profundizar en aspectos como: el diseño responsive de webs, JavaScript, desarrollo de API’s…
Codecademy: Intenta simplificar el acceso a la programación. Para ello, contiene algunas lecciones interactivas, además de ello, destaca por tener un temario muy sencillo de leer. Lo que le ha llevado a recibir numerosas criticas positivas de multitud de sitios como por ejemplo el New York Times. Algunos de sus cursos son de pago.
Instalando browsers (navegadores)
Los navegadores que vamos a instalar son:
Cuota de mercado de los browsers:
Actualmente y según StatCounter, las estadísticas globales nos indican que el navegador más popular a nivel mundial es el Chrome:
¿Por qué las webs se ven diferente en los distintos navegadores?
Existen multitud de factores que provocan que una web se vea diferente en un dispositivo u en otro.
Principalmente afectan 3 motivos:
- El sistema operativo de la visita (SO).
- La resolución de pantalla de la visita y el tipo de dispositivo.
- La forma en la cual el navegador (cliente) interpreta el contenido.
La experiencia de navegación que nos proporciona un sitio web depende en gran medida de aspectos físicos como son los componentes (pantalla, resolución…) ya que no es posible que un sitio web nos brinde la misma experiencia en el móvil y en la web. Y menos aún, lo hará si la web no es responsive, es decir, no se adapta al tamaño de la pantalla.
Las webs no se ven igual en todos los dispositivos debido a que cada navegador utiliza un motor de representación (rendering engine) diferente.
Rendering Engine (o “motor de renderizado”): “renderizar” significa “interpretar” por tanto, el rendering engine es el motor de renderizado que tiene el navegador para interpretar el código HTML y CSS de nuestras página web. Y posteriormente, mostrarlo en la pantalla. no es más que un componente de software.
JavaScript Engine: es el programa que convierte el JavaScritpt en código de bajo nivel o código máquina. Por tanto, podría decirse se ejecuta nuestro JavaScript
Los navegadores no procesan las páginas pixel por pixel. Leen el código completo y producen una versión completa dependiendo del código. Por lo cual, existen diferencias en el código de interpretación y, por este motivo, es necesario revisar cómo se visualiza el contenido en diferentes navegadores y sistemas operativos.
Una página web completa debería de verse igual en cualquier navegador.
Desafortunadamente no hay una solución sencilla para esto. Es necesario revisar las especificaciones de cada navegador periódicamente y hacer los cambios necesarios en el código.
En resumen, es necesario revisar tu página web en tantos navegadores y sistemas operativos como sea posible.
Presentando a HTML
📌 ️ — HTML (o Hyper Text Markup Languaje) es el Lenguaje de Marcado de Hipertexto encargado de definir la estructura de las páginas web
🚨MUY IMPORANTE🚨, HTML es solamente un lenguaje de marcado (NO ES CONSIDERADO COMO UN LENGUAJE DE PROGRAMACIÓN ya que no nos permite realizar la declaración de variables, no tienes estructuras de control, etc.) así que, si veis a este hombre ¡Por el amor de dios, no firméis!
📌 ️ — HTML es un lenguaje de estructura o el 💀“esqueleto”💀 de la web, o inclusive por decirlo así, la columna vertebral de Internet.
Pero hay que destacar que HTML no se encarga del aspecto visual de la página. Si queremos que nuestras webs sean bonitas lo realizaremos por medio otros lenguajes como CSS (Cascading Style Sheets). Por tanto, si comparamos una página que tenga solamente HTML con un cuerpo de un humano tanto la web como la persona no lucirán ya que el resultado tanto en una web como en una persona (bastante fea vamos) ya que solamente tendrá el 💀 esqueleto💀.
Un ejemplo de una web realiza solamente con HTML es la primera página web de la historia:
De hecho, si comparamos esta imagen realizada en 2022 con la imagen más antigua que se conserva (No hay capturas de pantalla de la página original, pero esta es la copia más cercana) tomada en 1992. Podemos apreciar que prácticamente luce igual como los fósiles de los esqueletos de los dinosaurios ya que el 💀esqueleto💀 es lo que se conserva:
Las capas de “core” del Front (HTML, CSS y JS)
En la actualidad HTML se utiliza principalmente para otorgar una estructura básica y contenido a nuestra web.
Posteriormente, lo combinaremos con otras capas como CSS (mediante a hojas de estilo) que nos proporcionarán la parte estética y JavaScript (JS) que otorgará la inteligencia, el dinamismo, la acción, es decir, la funcionalidad.
Es decir, separamos cada una de las capas en función de la funcionalidad que estás tienen sobre el documento. El propósito de esto, es el de ante un error (que no sea de HTML) tratar de asegurar que la estructura de nuestro HTML pueda ser al menos visualizada por el navegador. Además de ello, nos proporciona un desacoplamiento que le da un orden a nuestros archivos con la finalidad de reducir sus dimensiones.
Historia de HTML
Como ya dijimos HTML, se puso en funcionamiento el 6 de agosto de 1991.
Desde entonces, HTML ha pasado por distintas versiones hasta llegar a la actualmente sigue vigente HTML 5
HTML posee una gran documentación y una sintaxis muy extensa, pero que es tan simple que se puede aprender en una tarde, pero a su vez, tan completo que puede llevar años dominarlo.
HTML la columna vertebral de la web
📌 ️ — Aunque no sea un lenguaje de programación, lo que realmente importa es que siempre tenemos HTML en primer lugar, ya que es el lenguaje universal con el que están creadas todas las webs del mundo. O en caso de no estar creadas en HTML; finamente están serán renderizadas a HTML por el propio navegador
Por ejemplo, si trabajamos sobre framework populares como React, Angular, Vue.js, o lenguajes como PHP o .NET (junto a Blazor), etc. Podremos ver que finalmente de una manera u otra:
Blazor (es un framework que nos permite crear webs con C# en vez de con JavaScript) pero como .NET no puede ejecutarse por si solo en internet ya que no puede interactuar con el DOM del navegador directamente utiliza como pegamento Javascript con la finalidad de representar a dicho HTML.
💥 Para una página web, HTML es siempre el “producto final”, es decir el lenguaje de salida de las páginas web que finalmente se visualizará en el navegador💥
📌 ️ — Por tanto, toda web independientemente del lenguaje en el que esté desarrollada finalmente es interpretada a HTML. HTML sería como la base de una pizza en la que encima añadimos el resto de capas (o ingredientes en caso de ser una pizza).
¿Cuál es el objetivo del lenguaje?
Indicar tanto al navegador como a los motores de búsqueda cuál es la estructura de los documentos, elementos, organización, etc.
Creando un proyecto de HTML en VSC
Una vez instalados los plugins, creamos una carpeta en el Escritorio con Nuevo > Carpeta:
Una vez creado el directorio, vamos a arrastrarlo al Explorer de nuestro VSC:
Y, finalmente, vamos a decirle que que confié en los archivos de este fichero:
Creando nuestro primero fichero HTML
Una vez creado el proyecto, finalmente, vamos a a crear el primer documento HTML. Para realizar el proceso de creación del documento HTML, existen distintas maneras. Vamos a verlas:
📌 ️ — Los ficheros HTML pueden tener la extensión
.htmlo.htm
Si cuando abrimos el directorio del proyecto no visualizamos la extensión del documento de HTML (.html o .htm) que acabamos de crear, es porque tenemos que modificar la configuración de Windows. Para modificarla, realizamos lo siguiente:
Y si nos fijamos, ahora sí que podemos ver la extensión (.html o .htm) del documento de HTML:
📌 ️ — En este caso en concreto, mediante a la extensión del fichero (
.html) podemos identificar que se trata de un documento deHTML.
¿Qué es un elemento HTML?
📌 ️ — Un elemento, etiqueta (o TAG en inglés) es cada una de las 🧩“piezas”🧩 que nos permiten construir a nuestro documento
HTML. Imaginaros a un documentoHTMLcomo una especie de “construcción de lego” sobre la que vamos añadiendo cada uno de estos elementos para ir dando forma a la estructura de nuestro documentoHTML.
Un ejemplo de un elemento de encabezado principal (H1), podría ser el siguiente:
📌 ️ — Los elementos deben de ser escritos en minúsculas.
Cuando visitamos una web y corremos la cortina, es decir, abrimos las Dev Tools y vamos a la pestaña de Elements (elementos), podemos ver los distintos elementos que forman parte de dicho documento HTML:
Los TAGs/Etiquetas de HTML son la manera mediante a la cual construimos los elementos de HTML.
Por tanto, los TAGs HTML son algo similar a 🧱“ladrillos o bloques”🧱 que nos permitirán 👷🏽♂️construir la estructura de nuestro documento HTML👷🏽♂️
Por lo que lo que somos una especies de 👷🏽♂️“albañiles”👷🏽♂️ del HTML:
Podríamos definir las etiquetas como botecitos que contienen lo necesario para que cuando el intérprete del navegador los “lea”, sepa que tiene que hacer con cada una de las etiquetas. Las etiquetas de inicio y de cierre nos permitirá delimitar/almacenar lo que hay en su interior (y sería algo similar a ponerle un nombre a un bote para identificar qué hacemos con su contenido).
📌 ️ — Los navegadores no muestran los
HTML Tags, pero sí que los usan para renderizar (“construir”) el contenido de la página.
Estructura básica de un documento HTML
La estructura básica de documento de HTML 5, está estructurado de la siguiente manera:
- DOCTYPE: la etiqueta permite indicar que el documento es de tipo
HTML 5. - HTML: esta etiqueta nos permite indicarle al navegador que vamos a abrir el documento
HTML - Head: contiene información técnica para el navegador
- Body: contiene el contenido que aparecerá en la página web
Vamos a ver un ejemplo de una estructura básica:
Aunque, si ejecutamos el código veremos que no se muestra nada por la pantalla:
Ya que solamente hemos construido la estructura, pero aún no hemos añadido ningún elemento al documento.
Si añadimos el TITLE (titulo) de la página (dentro del HEAD del documento) y, por ejemplo, un encabezado principal H1 (dentro del BODY del documento) el resultado será el siguiente:
Ahora sí, que podemos visualizar el contenido que hemo añadido en el interior de nuestra estructura del documento HTML:
Formas de abrir un documento HTML
Para visualizar un fichero HTML tenemos dos opciones:
- La primera sería abrir el fichero desde el directorio correspondiente y hacer doble clic sobre el documento HTML a abrir:
Lo que nos abrirá el fichero en el navegador, pero si nos fijamos, si hacemos clic sobre la info del archivo, el navegador, no informa de que estamos viendo un archivo local o compartido.
Abrir así los ficheros en local y sin un servidor se alejado totalmente de lo que sería el funcionamiento usual de una web. Ya que estamos abriendo un documento sin utilizar el protocolo HTTP ni nada ¡Como el que abre un Word vamos! Por tanto, lo recomendable sería utilizar siempre un servidor ya que las páginas web están pensadas para poder ejecutarse desde un servidor web y no abrirlas como si fueran un archivo de texto.
- La segunda y la más recomendada es utilizar un servidor en local como el que hemos instalado anteriormente Live server:
Para ejecutarlo nos situamos sobre la barra inferior y seleccionamos Go Live
Una vez hagamos clic, el texto Go Live cambiará por el puerto:
Y se nos abrirá automáticamente el servidor y nos realizará una petición al HTTP hacía dicho fichero ahora sí que tal y como está pensado que se ejecuten las webs en el navegador mediante un servidor. Vamos a verlo:
También podemos acceder utilizando el localhost del que ya hablemos anteriormente:
Finalmente, si queremos parar el servidor, solamente tenemos que hacer un clic sobre la siguiente opción:
📌 ️ — Siempre que desarrollemos es más que recomendable el utilizar un servidor de desarrollo en local.
Además, otro de los beneficios que nos proporciona Live Server es que nos ofrece recarga automática cuando realizamos los cambios. En cambio, las webs que abrimos desde el sistema de directorios tienen que ser recargadas para visualizar dichos cambios. Vamos a ver un ejemplo:
¿Qué es Emmet?
Emmet es un código de snippets (fragmentos) que nos ayuda a escribir HTML más fácilmente que nos facilitan la edición de páginas web. Emmet está incluido en Visual Studio Code por lo que no se necesita instalar ninguna extensión para poder utilizarlo.
Por ejemplo, si escribimos H1 dentro del body del HTML y pulsamos ENTER o TABULADOR, podemos ver que Emmet nos crea la etiqueta:
El Lorem Ipsum es el texto que se usa habitualmente como texto de relleno cuando aún no tenemos el contenido principal creado antes de insertar el texto final. Es muy habitual en diseño gráfico, fuentes, webs, etc.
Para escribir un Lorem Ipsum con Emmet realizamos lo siguiente:
Más adelante durante el curso, explicaremos más “tips” para trabajar con él.
Construyendo la estructura básica de un HTML con Emmet
Para escribir la estructura básica de un HTML, podemos utilizar Emmet y bastaría con escribir HTML para que nos muestre la estructura básica completa de un documento HTML:
Otra alternativa es la de escribir el símbolo de exclamación ! y pulsar ENTER:
Lo que nos generará la misma estructura que hemos generado anteriormente, pero con algunos elementos más dentro del HEAD:
Sobre estos elementos que se han añadido dentro del head del HTML hablaremos más a detalle a lo largo del curso.
Ejercicio 01📋: corrige el siguiente documento HTML para que tenga una estructura correcta:
Encabezados (o HTML Headings) y párrafos (o paragraphs) en HTML
Los encabezados en HTML van del H1 al H6. Vamos a ver un ejemplo:
Si abrimos el navegador podremos cual es el resultado:
Si nos fijamos cada uno de ellos se ve con un tamaño distinto, el encabezado H1 es el más grande; y, por tanto, será el que tenga mayor importancia tiene en el documento. Posteriormente, el segundo más relevante es el encabezado H2, y así sucesivamente hasta llegar al encabezado H6 (el cual es el encabezado con menos relevancia que podemos tener en una web).
Cada uno de los encabezados del H1 alH6 tiene una representación semántica distinta. Por ello, no deben utilizarse en función de su tamaño de fuente para representar algo con mayor o menor tamaño de fuente.
Y recordad que un H2 debe de pertenece a un H1; que un H3, debe de pertenecer a un H2, etc.
Ejemplo de encabezados en una web real
Para encontrar elementos como por ejemplo lo son los encabezados (H1,H2, H3…) en un documento HTML ya existente tenemos varias opciones.
La primera y la que para mí es más rápida sería la siguiente: Abrimos el inspector (Dev Tools) y vamos a la pestaña de Elements:
Una vez dentro pulsamos control + F y realizamos la búsqueda de los tags:
Este tipo de búsqueda es ideal para buscar por texto o bien por elemento, en mi caso como quiero buscar un encabezado H1, realizaría lo siguiente:
Si nos fijamos, en este caso, podemos ver que el encabezado principal es ciencia. Podríamos poner ABC como encabezado principal pero nos encontramos con el problema que es el logo de la web:
La 2ª opción sería seleccionar el elemento que nos creemos que es un H1, para finalmente confirmarlo desde la pestaña de Elementos:
El elemento párrafo <P> nos permite distribuir un texto en distintos párrafos.
Vamos a ver un ejemplo:
Ejercicio 08📋: Crea una web con el nombre de ejercicio08.html y clona la siguiente web🧙♂:
- Observaciones para realizar el ejercicio: fíjate en los tamaños de los textos para escoger que encabezados utilizar.
💥Finalmente, sube el fichero al repositorio HTML-Tags💥
Etiquetas inventadas/personalizadas
Hasta ahora hemos visto etiquetas que han sido aprobadas por la W3, es decir, que forman parte del estándar.
Pero ¿Qué pasaría si escribo un encabezado H7? ¿O una etiqueta con mi nombre?
En el caso del encabezado <h7></h7>, tal y como hemos dicho el navegador interpreta semánticamente hablando del H1 al H6. Por lo que, si escribimos un H7 nos estaríamos saltando el estándar del W3 Consorcium.
En el caos de la etiqueta con mi nombre <david></david>, ocurriría lo mismo que en el caso anterior. Y nos estaríamos saltando de nuevo el estándar de la W3C.
Validación de un documento HTML
Pero ¿Qué consecuencias puede suponer eso sobre mi documento el añadir etiquetas personalizadas?
- La página no validará correctamente en caso de que la pasemos por un validador.
- Podemos tener problemas con futuras actualizaciones de navegadores y/o HTML.
- En versiones anteriores a Internet Explorer 8 generaría problemas.
En este caso, y ejecutándola sobre el navegador Brave, vamos a ver el resultado:
Si nos fijamos, no tenemos un formato predefinido para ellas, ya que al no estar definidas en el estándar, el navegador no sabe que hacer con ellas. Por ello, les aplica un estilo nativo a estos elementos y las interpreta “escupiéndolas como sea” (sin saber muy bien que hacer con ellas) dentro del documento. Por lo que utilizar etiquetas
📌 ️ — Las etiquetas personalizadas no son compatibles con ninguna versión de HTML. Pese a ello, no dará ningún error si usa dicho marcado en su HTML.
Aunque para detectar los fallos dentro de nuestros documentos HTML podemos utilizar la validación que nos ofrece la W3, el validator w3 org. Dentro de este validador, en el que podemos ver si nuestra web cumple con el estándar definido por la W3.
Para ello, tenemos 3 opciones:
- Utilizar una dirección URL desde la pestaña Validate by URI
- Utilizar la validación vía fichero desde la pestaña Validate by File Upload
- Utilizar la validación del código pegandolo directamente en el validador desde la pestaña de Validate by Direct Input
En nuestro caso, al ser un documento pequeño, la validación la realizaremos copiando y pegando la web.
Si la web pasa correctamente la validación obtendremos:
En caso contrario, recibiremos un mensaje similar al siguiente:
Comentarios en HTML
Los comentarios en HTML nos permiten realizar anotaciones dentro del código o incluso ofrecen la posibilidad de comentar una parte para que no se ejecute. En HTML, solamente disponemos de un solo tipo de comentarios.
Su etiqueta es la siguiente:
📌 ️ — Fijaros que en la parte inicial del comentario inéditamente después del corchete de apertura hay un signo de exclamación (!) en la etiqueta inicial, pero no en la etiqueta final.
Vamos a ver un ejemplo:
Si nos fijamos, podemos que los comentarios no se muestran en el documento. Pero en cambio, si abrimos la Dev Tool y vamos al apartado de Elements, podemos ver que allí si que se muestran y que por lo tanto son visibles:
¡Así que cuidado con lo que escribís en ellos!
También, los podemos utilizar para comentar partes de nuestro documento con la finalidad de que estás no se ejecuten. Vamos a ver un ejemplo, que, por cierto, además es un comentario multilínea ya que hasta ahora solamente habíamos realizado comentarios de una sola línea:
O bien, añadirlos dentro de una misma línea, inclusive hasta dentro de un bloque de contenido de un elemento sin problema alguno:
¿Qué son los caracteres especiales?
Una vez hemos trabajado con ellos, vamos a explicarlos. En algunas ocasiones tenemos que insertar símbolos que tienen un significado especial en HTML por ejemplo el código el mayor o menor que (<>). Para ello disponemos de los caracteres especiales.
Dentro de la manera de escribirlos en un documento tenemos dos opciones. Utilizar el nombre u el número:
Vamos a ver un ejemplo en el que trabajamos con ambos tipos(nombre y número):
Como podéis apreciar, el resultado será el mismo en ambos encabezados:
Ejercicio 09📋: Crea una web con el nombre de ejercicio09.html y con apoyo de la siguiente web duplica la siguiente ejercicio:
💥Finalmente, sube el fichero al repositorio HTML-Tags💥
Arte ASCII dentro de un comentarios HTML
Una manera muy popular aprender sobre el mundo web es observar otras webs con las Dev Tools del browser, pero cuidado porque si corremos el telón y miramos detrás de la cortina nos podemos llevar alguna que otra sorpresa…😯
Existe una antigua y artística moda de escribir comentarios que hace muchos años se hizo bastante popular.
Algunos ejemplos de ello, es el que hace muchos muchos años tenía Mozilla:
En otros casos, podías encontrar un mensaje referente a una oferta de trabajo como Developer tal y como pasó en la web de “The Guardian” hace ya tiempo:
Aunque el más famoso de todos en lo referente a las ofertas laborales sin duda es el de Apple:
“¡Hola! Nos encontraste. Estamos buscando un ingeniero talentoso para desarrollar un componente de infraestructura crítica que será una parte clave del ecosistema de Apple”.
También era un motivo para enfatizar el logo de una compañía:
En algunas ocasiones aún se continúa viendo. Por ejemplo, cuando las empresas consiguen grandes hitos. Un ejemplo de ello, es el 30 aniversario de Super Mario Bros en 2011. Por cierto, la web aún está disponible ¡Por si la queréis visitar!
O inclusive mensajes fuera de tonos como el que aún podemos ver en la web The OATMEAL:
O incluso para escribir quejas hacía la compañía como la siguiente:
“La compañía no paga bonos, olvídalo amigo. ¡No vengas! ¡Estoy listo para irme! Este proyecto contiene una gran cantidad de errores. ¡No te quedarás mucho tiempo! ¡Chau! ¡La mejor de las suertes!”
¡Hemos visto de todo!
Hasta un patito haciendo MEOW en la web de Amazon:
📌 ️ — Para muchos ¡Era un arte!
📌 ️ — Que no supone (o al menos, no se requiere) que tenga un valor funcional. En cambio, para otros era algo innecesario que lo único que hacía era aumentar el tamaño de las páginas haciendo sufrir a esos prehistóricos servidores y a esas primeras conexiones a internet y que nada tenían que ver con las velocidades actuales.
Me ha recordado a la siguiente escena de los Simpsons en la que Homer crea un proveedor de internet que funciona más rápido que otros:
Y mete dicha publicidad durante la carga de un web para adultos:
Ejercicio 10📋: Crea una web con el nombre de ejercicio10.html. Y con apoyo de alguna web siguiente web realiza tu propio comentario en ASCII:
💥Finalmente, sube el fichero al repositorio HTML-Tags💥
Actualmente, esta práctica esta moda está prácticamente en desuso. Y, por tanto, no es usual encontrar un mensaje. Ya que, el peso de una web es un factor determinante en la velocidad de carga de nuestras webs que afecta en el posicionamiento de los buscadores (SEO).
¿Qué es la minificación?
Por ello, en ocasiones, las webs deciden minificar, un proceso que compacta un archivo eliminando todos los caracteres innecesarios sin perder funcionalidades. Eliminando todos los espacios, saltos de línea, etc.
📌 ️ — La minificación es el proceso de hacer pequeño un fichero, de ahí que dicho proceso reciba el nombre de MINIficar.
Ejemplo de minificación de un archivo HTML
Vamos a aprender a minificar (minify en inglés) un archivo HTML. Para ello, tenemos varias opciones.
- Utilizar alguna web desde el propio navegador. Para ello, vamos a Google, escribimos minify HTML y vamos a alguna de las páginas que nos aparezcan:
Y una vez dentro pegamos el documento HTML a minificar:
O en su alternativa, utilizar el plugin que hemos instalado desde VSC:
📌 ️ — ¡Si nos fijamos, podemos ver que se ha reducido el tamaño del fichero considerablemente de 585 bytes a 488 bytes!
Ejercicio 11📋: Copia el contenido del ejercicio08.html y crea una web con el nombre de ejercicio11.html y pega su contenido. Posteriormente, minifica el documento y guárdalo como ejercicio11-minificado.html y compara. Además compara el tamaño de ambos ficheros.
💥Finalmente, sube ambos ficheros al repositorio HTML-Tags💥
Tipos de elementos en HTML (Selft-closing TAGs VS Not Selft-closing TAGs)
Dentro de las etiquetas/tags tenemos diferentes tipos de etiquetas. Si las clasificamos según su estructura de etiqueta tenemos dos grandes bloques:
- Not selft-closing TAGs (TAGs sin autocierre): un elemento que tiene las etiquetas de apertura y cierre. Este tipo de elemento está formado por 3 partes. Vamos a ver un ejemplo:
Si queremos crear el encabezado principal en una página web utilizamos la etiqueta H1:
- Selft-closing TAGs (TAGs con auto cierre): son elementos que no requieren una etiqueta de apertura y cierre, sino únicamente una etiqueta de apertura. El Self-closing tags es válido en HTML5.
Estructuras de sección de contenido: header, main y footer
Anteriormente ya hemos visto como construir párrafos (etiqueta P) y títulos (etiqueta H1…H6). Pero en una página web
Pero en una página web real no basta con utilizar párrafos y títulos sino que necesitamos estructurar el contenido de una forma que los navegadores sean capaces de interpretar el contenido.
Antes de que se crearan estas etiquetas, en la versión HTML 4 se trabajaba con DIVs el principal problema de esto era que no había un estándar de como se tenían que llamar a los elementos. Por ello, se crearon las estructuras de sección de contenido.
📌 ️ — Que también son conocidas como elementos semánticos (o semantic Tags).
Aunque existen más estructuras, en este caso, vamos a hablar de 3 etiquetas básicas de estructuras de sección de contenido como son:
- Header: este elemento se utiliza para identificar al contenido la cabecera de la página. Suele contener elementos como menús, redes sociales (Facebook, Twitter, Instagram…), el logotipo de la página…
- Main: este elemento englobará el contenido principal de la página. Solamente puede ser usado una vez por página.
- Footer: este elemento se utiliza para identificar al contenido que forma parte del pie de la página. Suele contener
Un ejemplo de esto podría ser el siguiente:
El resultado será el siguiente 3 partes bien separadas en 3 estructuras de contenido distintas:
📌 ️ — Existen alternativas para construir esto con un mejor significado semántico pero para ello tendremos que ver más etiquetas de estructuración de contenido. Aunque esto será un poco más adelante en el curso.
Estructura de contenido nav:
Dentro del header es donde situamos el menú de navegación. Este menú, debe ir englobado entre la etiqueta nav. Vamos a ver un ejemplo:
El resultado será el siguiente:
Estructuras de sección de contenido: Section y Article
Section y article son dos estructuras de sección bastantes complejas de entender. Por ello, vamos a comenzar con unas descripciones aunque posteriormente veremos varios ejemplos:
Section: nos permite separar/agrupar, es decir, formar un grupo con la intención de separar una información que tenga relación entre si. Una sección no es un grupo de contenido que pueda valerse por sí mismo, sino que suele ser una parte de algo más grande.
Article: nos permite contener piezas de contenido independientes, es decir que no tienen relevancia entre si.
¿Section contiene a Article? o ¿Article contiene a Section? Ambas son correctas. Existente multitud de formas válidas de realizar esto. Vamos a verlo mediante una serie de ejemplos:
Ejemplo de section que agrupa a distintos articles dentro sin header en los article
Finalmente, si validamos en el validador de la W3 veremos que pasa la validación correctamente:
Ejemplo de section que agrupa distintas sections que agrupan a distintos articles
Finalmente, si validamos en el validador de la W3 veremos que pasa la validación correctamente:
Ejemplo de article con diferentes sections en su interior
Finalmente, si validamos en el validador de la W3 veremos que pasa la validación correctamente:
Estructura de sección Aside
Se utiliza para almacenar contenido que está relacionado directamente con el contenido del main. Por ello, está indirectamente relacionado.
📌 ️ — Aside puede estar fuera o dentro del main ambas son aceptadas por la W3C
Vamos a ver un ejemplo:
Elementos de bloque VS Elementos de línea
Las especificaciones HTML de W3 nunca especifican valores de propiedad CSS predeterminados para ningún elemento. Sino que, proporcionan una “hoja de estilo predeterminada” para HTML 4, y solamente recomienda a los desarrolladores que la usen; no es un requisito ni ningún tipo de mandato. Las especificaciones de HTML 5 indican “propiedades de visualización predeterminadas típicas” pero, de nuevo, no son necesarias (también tenga en cuenta que HTML 5 sigue siendo un borrador de trabajo de todos modos).
Eso deja todos los valores predeterminados al navegador y cómo los desarrolladores realmente sienten que los elementos deben mostrarse a un usuario. Nadie puede garantizar que un elemento específico se mostrará como inline o blocko de otra manera en el navegador de alguien. Por lo que siempre debemos configurarlo explícitamente si desea que suceda. Y no confiar en los valores "predeterminados".
Por tanto, la manera en la que se posicionan/distribuyen estos elementos HTML dentro de un documento HTML, depende del navegador y no del consorcio de la W3. Pese a ello, la gran mayoría de navegadores suelen seguir las recomendaciones de la W3 para ese elemento en concreto.
📌 ️ — Pese a ello, más adelante, durante el bloque de CSS veremos que podemos modificar estos valores predefinidos por la W3.
Pero por defecto los elementos son:
Elemento en bloque: cuando un elemento empieza al principio de la línea y ocupa “toda la línea”, es decir, el ancho del documento incluso en situaciones en las que su contenido no lo requiera. Algunos ejemplos son algunos elementos que ya hemos vistos durante el curso: encabezados H1–H6 o los párrafos P.
Elemento en línea: cuando un elemento no empieza al principio de la línea y ocupa solamente lo necesario de dicha línea. Algunos ejemplos de algunos elementos (que de momento no han sido vistos durante el curso) son los enlaces A y las imágenes IMG.
Ejemplos de elementos en bloque y elementos en línea
Algunos ejemplos de los atributos que tiene un elemento en línea o en bloque son:
¿Cómo identificar si un elemento es en línea o en bloque?
Basándonos en el siguiente documento:
📌 ️ — Aunque aún ni siquiera hemos trabajado con hojas de estilo CSS. Si realizamos el proceso que vamos a realizar, es importante asegurarse de que no hemos tocado propiedades de los elementos mediante a una hojas de estilos CSS. Ya que si cambiamos propiedades iniciales de los elementos, es posible que modifiquemos alguna propiedad del display y que esto nos afecta para saber si el elemento es en bloque o en línea. Ya que, no sabremos si las propiedades son las originales de dicho elemento o las que hemos modificado con CSS. Por lo que nosotros vamos a partir de que no hemos tocado ninguna propiedad.
Para saber si un elemento es en línea o en bloque, podemos ir a la pestaña de Styles. Vamos a ver un ejemplo:
O también, desde la pestaña de Computed:
Además, podemos ver que el elemento ocupa toda la línea pese ni a requerirlo:
En algunas circunstancias los elementos en bloque necesitan utilizar toda la línea como nos está pasando en el caso del párrafo del ejemplo. Ya que, su contenido así lo requiere:
Y aunque ya sabemos como confirmar que es un elemento en bloque:
También podemos hacer lo siguiente, reducir el texto del párrafo desde el propio navegador. Eso sí, cuando recarguemos la web el navegador volverá a interpretar (leer) el código del HTML del fichero original y borrará los cambios que hemos realizado directamente en el HTML:
En el caso de los elementos de línea, en muchas ocasiones, si tenemos más de un elemento en línea seguidos y caben en la misma línea ya nos basta para identificar que estamos ante un elemento en línea.
En caso contrario, simplemente tendríamos que utilizar la forma que ya conocemos:
Finalmente, existe un pequeño “tip” (siempre que no hayamos tocado los elementos con CSS) que es mirar el margen del elemento.
Si el elemento tiene un margen superior e inferior el elemento por defecto será en bloque.
Si el elemento no tiene márgenes superiores e inferiores será en línea:
Niveles de jerarquía dentro de un texto: small, normal, em y bold
Dentro del contenido de un texto, existe un mecanismo para indicarle al navegador que tiene de relevancia tiene el texto respecto al resto del texto.
Vamos a ver un ejemplo de texto normal:
Vamos a suponer que el texto ahora tiene un nivel 0 en la jerarquía.
<em></em> nos permite subir un nivel en la importancia del texto englobado entre estás etiquetas, es decir, le otorgamos más énfasis al texto respecto al texto normal. Vamos a ver un ejemplo:
📌 ️ — En este caso, el ¡Ya! tendrá más importancia para el navegador que el resto del texto.
El resultado será el siguiente:
📌 ️ — Pese a que <em></em> modifica el texto a cursiva, no debemos utilizarlo para ello. Ya que, para cambiar propiedad de un elemento, como veremos más adelante, utilizaremos CSS. Lo que hacemos con <em></em> es indicar al navegador que el nivel de importancia del texto es un nivel superior respecto al texto normal.
<strong></strong> nos permite subir aún más el énfasis. Es decir, subir otro nivel en la importancia de la jerarquía respecto a <em></em> y dos respecto al texto normal. Vamos a ver un ejemplo:
El resultado será el siguiente:
📌 ️ — Pese a que <strong></strong> modifica el texto a negrita no debemos utilizarlo para ello. Ya que, para cambiar propiedad de un elemento, como veremos más adelante, utilizaremos CSS. Lo que hacemos con <strong></strong> es indicar al navegador que el nivel de importancia del texto es un nivel superior respecto al texto con énfasis y dos niveles respecto al texto normal.
<small></small> nos permite disminuir en un nivel el énfasis respecto al texto normal. Es decir, si un texto normal vale 1 para el navegador, un texto englobado entre las etiquetas de <small></small> vale 0. Vamos a ver un ejemplo:
El resultado será el siguiente:
📌 ️ — Pese a que <small></small> modifica el tamaño del texto no debemos utilizarlo para ello. Ya que, para cambiar propiedad de un elemento, como veremos más adelante, utilizaremos CSS. Lo que hacemos con <small></small> es indicar al navegador que el nivel de importancia del texto es un nivel inferior respecto al texto con normal, por lo que con <small></small> tendremos una diferencia de dos niveles respecto al texto <em></em> y de tres niveles respecto <strong></strong>.
Resumen de SMALL, EM y STRONG
En 𝑯𝑻𝑴𝑳 5, las etiquetas 𝑺𝑴𝑨𝑳𝑳, 𝑬𝑴 y 𝑺𝑻𝑹𝑶𝑵𝑮, nos permiten indicarle al navegador cual es el nivel de relevancia que tendrá un texto para el navegador.
❌Un error bastante habitual es utilizarlas para formatear el texto. Ya que, al utilizar dichas etiquetas el navegador modifica algunas propiedades del texto❌:
- 𝑺𝑴𝑨𝑳𝑳: reduce el tamaño del texto
- 𝑬𝑴: pone el texto en cursiva
- 𝑺𝑻𝑹𝑶𝑵𝑮: pone el texto en negrita
✅Lo correcto para formatear nuestros textos es utilizar CSS ✅
- Un texto normal tiene una relevancia 1
- Un texto en 𝑺𝑴𝑨𝑳𝑳 tiene una relevancia -1
- Un texto en 𝑬𝑴 tiene una relevancia 2
- Un texto en 𝑺𝑻𝑹𝑶𝑵𝑮 tiene una relevancia 3
Saltos de línea <br> y <wbr>
Los <br> son saltos de línea (o retornos de carro) que nos permiten separar contenidos. Algunos ejemplo podrían ser poemas o una dirección postal.
No es correcto el utilizar para incrementar el espacio entre dos líneas de texto, para ello utilizaremos CSS o en determinadas situamos tambié podemos crear varios párrafos.
Cuando escribimos un texto con la etiqueta párrafo. El contenido de este, se va a adaptar al tamaño que tenga el navegador.
Basándonos en este siguiente HTML con un poema de Federico García Lorca:
Podemos ver que el contenido de cada párrafo se adapta al ancho del navegador y que no hay los característicos saltos de línea que habitualmente hay en los poemas:
En algunas ocasiones como al del poema necesitamos romper el texto en un punto concreto. Para eso utilizamos la etiqueta <br> que hará que el navegador fuerte un salto de línea.
Para realizarlos, utilizamos lo siguiente:
Un ejemplo de un uso ❌incorrecto❌ de <br> es el siguiente:
El elemento <wbr> (Word Break Opportunity) nos permite romper una palabra o un enlace (es decir, un texto que este todo seguido) en una posición determinada ante el caso que nuestra palabra o enlace sea superior a la dimensiones del navegador evitando así que la cadena de texto supere el ancho de la pantalla.
Vamos a ver un ejemplo:
Si abrimos el navegador, vemos que mediante a <wbr> rompe nuestra cadena de texto sin espacios en trozos cuando no cabe en la pantalla:
También se comporta como un Word Break Opportunity <wbr>el guión — cuando tenemos una cadena de texto sin espacios que supera el espacio de la pantalla. Vamos a verlo:
Ejercicio XX: Escribe un documento web y duplica lo siguiente:
Ejercicio XX: Crea una web y escribe un párrafo y añade el siguiente contenido http://this.is.a.really.long.example.com/With/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages y utiliza los <WBR> antes de cada . y antes de cada / para que cuando el texto supere el tamaño de la pantalla se rompa en distintos trocos.
Ejercicio XX: Analiza ¿Por qué no es recomendable contener elementos en bloque dentro de elementos en línea?
Horizontal Rule (HR)
HR proviene de Horizontal Rule y nos permite indicarle al navegador que cambiamos de tema. Es decir, que tenemos dos contenidos que no tienen relación alguna.
El resultado será el siguiente:
📌 ️ — Si nos fijamos, podemos ver que HR se representa como una _____ Aunque no sería correcto utilizarla para crear líneas. Sino más bien para indicar que cambamos, es decir que “rompemos” con el tema anterior, hacía otro nuevo.
Etiqueta <time></time>
Se utiliza para representar un periodo una fecha, una hora o una fecha y hora. Algunos de sus usos pueden ser cuando publicamos una publicación en un blog o cuando escribimos un comentario en un blog.
Vamos a ver algunos ejemplos:
El resultado será el siguiente:
Si nos fijamos aparece con un formato de texto normal no se modifican propiedades. Pero esto sirve para indicarle al navegador que el texto introducido entre los elementos representa una fecha.
Italic / Bold / Underline
Aunque hemos hecho bastante hincapié en que no debemos utilizar las etiquetas HTML para dar estilos a nuestro documento. Ya que dicha función recae sobre las hojas de estilos CSS.
Existen unas etiquetas con las que si que sería correcto otorgar estilos desde HTML. Por lo que sería válido utilizarlas para dar estilos según el estándar de la W3.
Las etiquetas son:
- <i></i>: pone el texto contenido entre los tags en cursiva
- <b></b>: pone el texto contenido entre los tags en negrita
- <u></u>: subraya el texto contenido entre los tags
📌 ️ — Estás etiquetas surgen en las primeras versiones de HTML.
Vamos a ver un ejemplo:
El resultado será el siguiente:
Aunque no suele ser habitual realizar esto desde el HTML ya que lo podemos hacer desde CSS dejando el documento HTML mucho más limpio.
📌 ️ — En algunas ocasiones se utiliza la etiqueta <i> para añadir iconos a las webs. Un ejemplo de ello es font awesome (aunque lo veremos más adelante más adelante durante el curso).
Superindice y subindice
Nos permite escribir formulas químicas, elevar un número, etc.
Vamos a ver un ejemplo:
El resultado será el siguiente:
Atributos de un elemento HTML
Los atributos son una parte de un elemento de HTML que nos permite añadir valores adicionales mediante a los cuales podemos o bien configurar los elementos o en caso contrario ajustar su comportamiento.
Dentro de los atributos tenemos dos tipos:
- Atributos comunes (commons): su sintaxis es
atributo="valor"
Un atributo está formado por dos partes:
- La para en la que se define el tipo de atributo
- La parte en la que se asigna un valor al atributo
Vamos a ver un ejemplos que contiene varios atributos sobre los que ya hemos trabajado:
- Atributos booleanos (booleans): La presencia de un atributo booleano en un elemento representa el valor verdadero y la ausencia representa el valor falso
Vamos a ver un ejemplo de atributo booleano sobre un formulario (aunque aún no están explicados y hablaremos más a detalle sobre ellos más adelante):
Esto representa un formulario y podemos ver el botón de envío tiene el atributo disabled como atributo booleano y eso hace que el botón sea deshabilitado y por tanto que no lo podamos enviar.
Si quitamos dicho atributo podemos ver que el botón ahora si funciona:
Atributos globales principales de un elemento
Existen muchos atributos, algunos son específicos para cada uno de los elementos y otros, en cambio, son utilizados por la gran mayoría de elementos y por tanto, los conocemos como “atributos globales”.
Para saber los atributos que tiene un elemento basta con situarnos sobre dicho elemento e ir al enlace de la MDN. Vamos a verlo:
Aunque aquí tenemos una enlace a todos los atributos globales de la MDN, los principales atributos globales son:
- class: nos permite trabajar con JS, otorgar estilos a través de CSS, etc. Aunque la idea es no explicar CSS hasta llegar al correspondiente bloque, aquí no nos queda más remedio que hacerlo. Vamos a ver un ejemplo:
El resultado será el siguiente:
- id: nos permite identificar un elemento de nuestro documento HTML como único. Con la finalidad de otorgar estilos a través de CSS, trabajar con JavaScript, etc. Además de todo ello, también nos permite realizar lo que se conoce como navegación a través de anclas (lo veremos más detenidamente en el apartado de enlaces).
Un enlace ancla es un tipo de enlace html que, al pinchar sobre el, te lleva a una parte concreta de la página web ya sea propia o externa.
📌 ️ — Un ID es un identificador que tiene que ser único en un documento
Aunque la idea es no explicar CSS hasta llegar al correspondiente bloque, aquí no nos queda más remedio que hacerlo. Vamos a ver un ejemplo:
El resultado será el siguiente:
- title: nos permite añadir al elemento un tooltip.
Los tooltips son unas pequeñas etiquetas emergentes que se muestran cuando el cursor del ratón queda parado durante unos instantes encima de un componente visual de una ventana. Son muy prácticos para suministrar una información adicional relacionada a este componente.
En HTML es fácil crear un tooltip con el atributo title. El atributo title es válido para todos los elementos de HTML, por lo cual se puede poner un tooltip a absolutamente todo. Con el elemento SPAN es incluso posible añadir un tooltip a un texto sin más.
Vamos a ver un ejemplo:
El resultado será el siguiente:
- data-*: nos permite guardar un valor dentro de la etiqueta HTML.
Aunque la idea es no explicar JavaScriipt hasta llegar al correspondiente bloque, aquí no nos queda más remedio que hacerlo. Vamos a ver un ejemplo:
El resultado será el siguiente:
Enlaces
Los enlaces son una parte fundamental dentro de la WWW (World Wide Web). Muestra de ello, es que si buscamos en Google MDN podemos ver que tenemos un montón de enlaces:
Cada uno de estos enlaces nos llevará a un sitio distinto. Si no fuera por este sistema basado en hipertextos que nos permite comunicar de manera tan sencilla de comunicar las webs sería difícil concebir las webs tal y como son actualmente.
📌 ️ — Los enlaces son también conocidos como anchor (ancla) o link (debido al sistema de hiperlink/hipertexto que utilizan para poder comunicarse en la web).
Un enlace de forma predefinida tiene un formato especifico que aunque se puede cambiar desde CSS. Por defecto es el siguiente:
📌 ️ — El objetivo de los enlaces es conectar una página web con distintos puntos de dicha web, con otra página web o incluso con un recurso (tanto interno como externo).
La estructura de un enlace es la siguiente:
Vamos a ver un ejemplo:
<a href="www.google.es" title="Visitar a Goole">Ir a google</a>
📌 ️ — El atributo HREF, es un atributo obligatorio, ya que es el atributo mediante al cual le indicamos a donde (fichero o web) debe ir nuestro enlace.
El # sin nada más, nos permite realizar dead links o enlaces muertos que, aunque no nos lleva a ninguna parte, si que nos ofrece la posibilidad de definir un enlace “provisional” durante la fase de desarrollo con la finalidad de que dicho enlace se muestre con su correspondiente formato.
<a href="#" title="Visitar a Goole">Ir a google</a>📌 ️ — De hecho, si nos situamos encima del # desde el inspector de elementos, podemos ver que nos lleva a la misma ruta en la que estamos situados actualmente por lo que el navegador no hace nada al estar en ella actualmente:
Enlaces que no apuntan a una URL: existen un tipo de enlaces que no apuntan a una URL sino a un email, a un teléfono, etc.
Vamos a ver algunos ejemplos:
- Mailto: nos permite asociado un enlace a un email.
<a href="mailto: email@example.com">Send Email</a>El resultado será el siguiente:
- Teléfono: es muy útil en dispositivos móviles:
<a href="tel:+34678567876">Reserva teléfonica</a>El resultado será el siguiente:
- Enviar un SMS: también podemos enviar un mensaje de texto
<a href="sms:+34123456789;?&body=Me gustaría que os pusierais en contacto conmigo">Enviar SMS para que me contacten</a>El resultado será el siguiente:
- Enviar un WhatsApp: También podemos
<a href="whatsapp://send?text=Hola me gustaría recibir más información&phone=+34123456789">Contactar vía WhatsApp</a>El resultado será el siguiente:
Lo que nos llevará a:
Rutas relativas VS rutas absolutas
Para pasamos un valor al atributo HREF de una ruta, es muy importante entender bien las diferencias entre rutas relativas y rutas absolutas.
Rutas absolutas: son URL que utilizan el protocolo HTTP o HTTP/s. Y, que, por tanto, son únicas. Se utilizan principalmente cuando queremos “salir al exterior”, es decir, acceder a rutas externas como por ejemplo ir otra dirección web o a un recurso que no es nuestro.
Y es bastante extraño y poco común utilizarlas para ir desde nuestra web a otra página de nuestra web. Para ello, habitualmente se suelen utilizan las rutas relativas.
La anatomía completa de una ruta absoluta es la siguiente:
Un ejemplo de uso de una ruta absoluta es el siguiente:
<a href="https://www.google.es" title="Visitar a Google">Ir a google</a>Si nos fijamos, le estamos indicando el protocolo que utiliza al navegador. Para que este pueda identificar que tiene que viajar/salir del proyecto actual hacía el exterior a un recurso o una web.
Rutas relativas: Las rutas relativas nos permiten no utilizan el protocolo HTTP o HTTPS.
Por lo que, por ejemplo, si intentamos acceder a www.google.es sin definir el protocolo:
<a href="www.google.es" title="Visitar a Goole">Ir a google</a>Podemos ver que nos aparece lo siguiente:
Ya que, el navegador al no tener un protocolo definido, está intentando buscar un fichero dentro de nuestro proyecto en local:
Podemos hacer la prueba creando un fichero vacío con el nombre www.google.es:
Si nuevamente volvemos a realizar una petición, podemos ver que en este caso, el navegador entiende que el contenido es un recurso y nos pregunta donde queremos guardar dicho recurso:
Existen dos tipos de rutas relativas:
- Relativas al directorio en el que nos encontramos: cuando no utilizan la /
Imaginaos que tenemos el siguiente sistema de carpetas con dos documentos HTML y queremos crear un enlace del directorio index.html hacía el documento noticias.html
En el documento noticias.html de dentro de la carpeta de noticias, contendrá lo siguiente:
El fichero de noticias.html que está al mismo nivel que index.html contendrá lo siguiente:
Ahora, vamos a crear un enlace desde nuestro index.html y dependiendo de la ruta que especifiquemos en dicho enlace, accederemos a un fichero u otro:
El resultado será el siguiente:
Pero ¿Y si queremos ir desde las webs de noticias hacía atrás?
Comenzamos con el noticias.html que está al mismo nivel que la web. En este caso, solamente tenemos que apuntar al directorio que está al mismo nivel. Por lo que el proceso es sencillo:
El resultado será el siguiente:
Si queremos hacer lo mismo desde el noticias.html que está situado dentro de la carpeta de noticias, tenemos que realizar lo siguiente:
El resultado será el siguiente:
📌 ️ — Con los ../ podemos ir un directorio hacía arriba (subir).
El principal problema de este tipo de rutas es que cuanto tenemos muchos subdirectorios las rutas se vuelven muy largas ../../../../index.html por lo que se aconseja siempre el trabajar con rutas relativas a la raíz con la finalidad de evitar esto.
- Relativas al directorio raíz: cuando utilizan la /
Para el navegador y el IDE, nuestra ruta relativa es en la que se encuentra el fichero index.html. En este caso:
En este caso, si quisiéramos trabajar con rutas raíz en el index.html, solamente tendriamos que realizar lo siguiente:
En el fichero noticias.html que está al mismo nivel, podríamos realizar lo siguiente:
<a href="/index.html" title="Index">Ir a Index</a><a href="/" title="Index">Ir a Index</a>
Ambas maneras nos llevarán al directorio raíz.
Y finalmente, en el fichero noticias.html que está en el directorio noticias. También realizaríamos lo mismo:
<a href="/index.html" title="Index">Ir a Index</a><a href="/" title="Index">Ir a Index</a>
Por lo que vemos que trabajando de esta manera, el trabajo con rutas es mucho más sencillo.
Atributo target de un enlace:
Nos permite configurar la forma en la que queremos abrir el recurso solicitado (web, fichero…). Aunque existen varios atributos para target. Los dos más utilizados con diferencia son:
_self: Carga la URL en la misma pestaña/ventana donde estamos situados ahora mismo. Es el comportamiento predeterminado por lo que no haría falta especificarlo para utilizarlo:
<a href="http://www.google.es" title="Visitar a Google" target="_self">Ir a google</a>Un ejemplo podría ser el comportamiento del ejemplo anterior:
📌 ️ — Si queremos utilizar este tipo de ventana usualmente no haría falta especificar dicho atributo, ya que es el por defecto. Además es el que utilizamos habitualmente para desplazarnos entre las distintas páginas de nuestra web.
_blank: carga la URL en otra pestaña o en otra ventana del navegador. Dependiendo de la configuración del usuario.
<a href="http://www.google.es" title="Visitar a Google" target="_blank">Ir a google</a>Un ejemplo podría ser el siguiente:
📌 ️ — Es el que utilizamos habitualmente para desplazarnos entre hacía webs externas. Ya que, en principio, no queremos perder la visita, es decir, que se vaya el usuario en la pestaña en la que tiene nuestra web actualmente abierta.
_download: existe otro atributo de tipo booleano que nos permite descargar un recurso solicitado siempre y que este esté dentro de nuestro servidor.
Para ello, primeramente añadimos el recurso (una web, una imagen…) a nuestro proyecto:
Y posteriormente realizamos lo siguiente:
<a href="/pagina.html" download>Descargar pagina.html</a>
<a href="/HTML5.png" download="ImagenHTML5.png">Descargar imagen de HTML 5</a>Si nos fijamos, tenemos dos descargas. El primer enlace es el que descargará el fichero con el nombre que tiene actualmente:
Y el segundo enlace es el que descargará el fichero con el nombre que hemos definido inmediatamente después del download.
Aunque es más correcto crear un directorio llamado assets en el que guardar todos nuestros recursos externos, imágenes, videos, iconos, etc.
Separados en distintas carpetas:
<a href="/pagina.html" download>Descargar pagina.html</a>
<a href="/assets/img/HTML5.png" download="ImagenHTML5.png">Descargar imagen de HTML 5</a>En algunas ocasiones, el si el fichero se guardará automáticamente o no, dependerá de la configuración que tengamos actualmente en nuestro navegador. En la gran mayoría de ocasiones, actualmente tendremos que confirmar que queremos guardar dicho fichero ya que nuestro navegador así lo tendrá configurado por temas de seguridad ya que se producían ataques habitualmente desde webs que descargaban ficheros automáticamente desde el navegador con el peligro que esto supone:
Pero si desmarcamos el check, al estar dicho fichero en nuestro servidor se descargaría automáticamente.
En cambio, si modificamos las rutas hacía un servidor externo:
<a href="https://www.google.es" download target="_blank">Descargar Google.es</a>
<a href="https://www.google.es/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" download="ImagenHTML5.png" target="_blank">Descargar imagen de Google</a>Independientemente de si tenemos la descarga automática activada o no, el navegador detectará que es un recurso que se encuentra en otro servidor, ya que estamos trabajando con una ruta absoluta y al no ser rutas relativas no no nos cargará el fichero en una nueva pestaña ya que no puede descargarlo. Por ello, como no queremos que el usuario salga de nuestra web, ponemos el atributo target=”_blank”. Vamos a ver el resultado:
Navegación con anclas
Anteriormente, cuando hablábamos de atributos globales principales de un elemento hemos hablado que mediante el atributo id podemos realizar lo que se conoce como navegación pro anclas.
Este tipo de navegación nos permite desplazarnos a un punto especifico de una web tanto de la misma página como de otra página. Vamos a ver un ejemplo:
El resultado será el siguiente:
📌 ️ — Si quisiéramos ir a un punto especifico de una pagina web desde otra, tendríamos que añadir a la ruta HREF del enlace la URL junto al #id correspondiente.
Ejercicio: a partir del ejemplo que acabamos de ver, añade un 🔝 en cada uno de los elementos H2 que nos desplace al menú inicial la página.
Ejercicio: crea tu propio menú de navegación de anclas en la propia web y además, crea otra página web que nos llegue a puntos a distintos puntos de nuestro documento.
Listas
Las listas nos permiten crear conjunto de elementos en forma de lista dentro de una página.
📌 ️ — En función del tipo de lista sobre le que trabajemos irán precedidos de un bullet (•), número (1,2,3), etc.
Dentro de las listas HTML tenemos los siguientes tipos:
- Unordened List (UL o Listas desordenadas): utilizan el tag <ul></ul>. Y, se utiliza para situaciones en la que el orden de los elementos de nuestro listado no es importante
- Ordened List (OL o Listas ordenadas): utilizan el tag <ol></ol>. Y se utiliza para situaciones en las que el orden de los elementos del listado si es importante.
- Definition List (DL o Listas de definiciones): utilizan el tag <dl></dl>. Se utiliza para realizar listas de “diccionario”, es decir listas que contienen definiciones.
📌 ️ — Dentro de listas UL u OL, cada elemento de la lista va englobado sobre un elemento LI (List Item). Los items, se definirán de la siguiente manera:<li>Item</li> anidados dentro de la lista UL u OL.
📌 ️ — Es muy importante poder analizar cuando es necesario utilizar un tipo de lista u otro para poder trabajar con el máximo valor semántico.
Listas desordenadas (Unordened List) UL
Las listas UL, nos permiten listar elementos cuyo orden no tiene importancia. Por ejemplo, si realizamos un listado de la documentación que una persona debe entregar a una compañía:
El resultado será el siguiente:
Si nos fijamos, podemos ver que el navegador utiliza el bullet (•) por defecto. Ya que, interpreta que al ser una lista UL (desordenada), no importa el orden de nuestro listado.
📌 ️ — Aunque el tipo de carácter que utilizar el navegador para la lista se puede cambiar posteriormente desde HTML/CSS, es muy importante que utilicemos este tipo de listas para realizar listado en los que el orden no sea importante, ya que será así como lo interpretará el browser.
Estás listas, son además las que se utilizan habitualmente para realizar menús de navegación. Vamos a ver un ejemplo:
El resultado será el siguiente:
Atributos de una lista UL
En las listas UL (desordenadas) no podemos definir un orden. Por lo que, desde HTML (desde CSS se pueden realizar más cosas) solamente podemos utilizar el atributo type para cambiar la apariencia con la que se visualizará el listado.
El atributo type lo podemos utilizar de forma genérica aplicándolo sobre el UL:
<ul type="square">
<li>Documento de DNI</li>
<li>Carnet de conducir</li>
<li>Certificido médico (visión, habilidad, audición, etc.)</li>
</ul>
O de forma individual sobre cada item:
<li type="disc">Documento de DNI</li>
<li type="square">Carnet de conducir</li>
<li type="circle">Certificido médico (visión, habilidad, audición, etc.)</li>
📌 ️ — Tal y como decíamos si quisiéramos podríamos hacerlo desde CSS lo que nos ofrece muchas más opciones. Tales como: poner otro carácter, poner una imagen, modificar el formato, etc.
Listas ordenadas (Ordened List) OL
Las listas OL, nos permiten listar elementos cuyo orden sí que tiene importancia. Por ejemplo, si necesitamos sacarnos el carnet de conducir, necesitamos realizar una serie de pasos en un cierto orden. Vamos a verlo:
El resultado será el siguiente:
Atributos de una lista OL
En las listas OL (ordenadas) podemos varios parametros desde HTML (desde CSS se pueden realizar más cosas).
Atributo type: para cambiar la apariencia con la que se visualizará el listado. En este caso no ofrece más opciones:
El valor por defecto de type es 1, por lo que es lo mismo que no poner nada.
<ol type="1">
<li>Estudiar la teoría</li>
<li>Realiza un certificado médico</li>
<li>Aprueba el examen teorico</li>
<li>Aprueba el examen practico</li>
</ol>
Si ponemos A nos devolverá A,B,C…
<ol type="A">
<li>Estudiar la teoría</li>
<li>Realiza un certificado médico</li>
<li>Aprueba el examen teorico</li>
<li>Aprueba el examen practico</li>
</ol>
Si ponemos a nos devolverá a,b,c…
<ol type="a">
<li>Estudiar la teoría</li>
<li>Realiza un certificado médico</li>
<li>Aprueba el examen teorico</li>
<li>Aprueba el examen practico</li>
</ol>
Si ponemos I nos devolverá los items en números romanos I, II, III…
<ol type="I">
<li>Estudiar la teoría</li>
<li>Realiza un certificado médico</li>
<li>Aprueba el examen teorico</li>
<li>Aprueba el examen practico</li>
</ol>
Si ponemos i nos devolverá los items en números romanos en minúsculas i, ii, iii…
<ol type="i">
<li>Estudiar la teoría</li>
<li>Realiza un certificado médico</li>
<li>Aprueba el examen teorico</li>
<li>Aprueba el examen practico</li>
</ol>
Atributo start
El atributo start nos permite indicar cual será el número correspondiente al primer elemento (item) de nuestra lista. Por tanto, nos permite indicar cuál será el número pro el que empezará nuestra lista. Vamos a ver un ejemplo:
<ol start="3">
<li>Estudiar la teoría</li>
<li>Realiza un certificado médico</li>
<li>Aprueba el examen teorico</li>
<li>Aprueba el examen practico</li>
</ol>El resultado será el siguiente:
Listas de definición (Definition List) DL
Las DL, también conocidas popularmente como “listas de diccionario” nos permiten definir elementos con la siguiente estructura:
- DT = Definition Term: contiene el termino que vamos a definir.
- DD = Definition Description: contiene la descripción correspondiente al termino definido.
Vamos a ver un ejemplo:
El resultado será el siguiente:
Listas anidadas
Existe la posibilidad de anidar listas, las posibilidades de combinaciones son mutiples (OL, con UL, LU con OL con UL…). Vamos a ver un ejemplo:
El resultado será el siguiente:
Ejercicio: crea un repositorio de Git llamado MozillaIsCool y duplica la siguiente web. La URL debe de ir a la web oficial de Mozilla y una vez finalizada, súbela al repositorio.
Cuando abramos el repositorio, además, se deberá de visualizar un fichero MD (Markdown) en el que deberás de añadir el titulo MozillaIsCool, la imagen del layout que hemos clonado y el subtitulo clone by acompañado de tu nombre.
Ejercicio: A partir de la siguiente imagen:
Realiza la siguiente web:
Tablas
Las tablas es una estructura basada en filas y columnas que nos permite organizar nuestros datos.
📌 ️ — En sus orígenes, las tablas se utilizaban para colocar todo posicionar los elementos dentro de una web. Más tarde, con la evolución del tiempo, esto fue evolucionando y se empezó a posicionar los elementos de HTML mediante al elemento DIV, para finalmente dar paso a los elementos de posicionamiento que ya hemos explicado (header, main, footer…) acompañados de CSS.
La estructura más básica de una tabla está formada por:
<table>nos permite indicarle al navegador que queremos crear una tabla<tr>TR proviene de Table Row y nos permite indicarle al navegador que queremos crear una fila dentro de una tabla.<td>TD proviene de Table Data y nos permite indicarle al navegador que queremos crear una celda dentro de una tabla.
Vamos a ver un ejemplo de la estructura más básica de una tabla:
<table>
<tr>
<td>Celda/Row 1</td>
<td>Celda/Row 2</td>
</tr>
<tr>
<td>Celda/Row 1</td>
<td>Celda/Row 2</td>
</tr>
<tr>
<td>Celda/Row 1</td>
<td>Celda/Row 2</td>
</tr>
</table>El resultado será el siguiente:
Pese a que no se ve, si utilizamos el inspector podemos ver las filas y las celdas que tenemos. Vamos a verlo:
📌 ️ — Por tanto, con table construimos la estructura en sí, pero está no tendrá formato alguno por lo que no tendrá bordes, ni colores, etc. Todo ello, lo deberíamos de definir a posteriori desde CSS.
Anatomía completa de una tabla
Hasta ahora hemos visto la estructura más básica de una tabla pero podemos trabajar con más elementos. Vamos a verlos:
<caption>se utiliza para definir el título en una tabla. Debe colocarse inmediatamente después del inicio de la tabla y es una etiqueta opcional. Ya que, no siempre necesitaremos añadir un título a nuestra tabla.<thead>se utiliza para agrupar el encabezado (la primera fila) de una tabla. Dentro de<thead>seguimos trabajando con filas<tr>a las que deberemos de añadir las columnas con<th>(de Table Head) en vez de con<td>que sería las que utilizamos para el resto de las columnas de las tabla.<tbody>etiqueta se utiliza para agrupar el contenido de una tabla.<tfoot>etiqueta se utiliza para definir el footer (pie de tabla) de una tabla. Debe colocarse inmediatamente después del inicio de la tabla y es una etiqueta opcional. Ya que, no siempre necesitaremos añadir un título a nuestra tabla.
Los elementos <thead>, <tbody>y <tfoot> no afectarán el diseño de la tabla de manera predeterminada. Sino que solamente son un mecanismo mediante el cuál separar en distintos grupos las distintas partes de una tabla.
📌 ️ — Cuando en nuestra tabla trabajamos con el elemento
<thead>, es obligatorio también definir un<tbody>
Vamos a ver un ejemplo:
El resultado será el siguiente:
Si nos fijamos, podemos ver que podemos añadirle borde a la tabla mediante CSS de la siguiente manera:
Aunque de momento no formatearemos la tabla ya que no es el objetivo del curso.
Agrupando celdas con Colspan, Rowspan
En algunas ocasiones es común que queramos agrupar celdas. Para ello, disponemos de:
- Rowspan: indica el número de filas que ocupará la celda. Por defecto, cualquier celda ocupa solamente una fila, por lo es como si pusiéramos un rowspan con 1 como valor.
<td rowspan="1">Formularios</td>- Colspan: indica el número de columnas que ocupará la celda. Por defecto, cualquier celda ocupa solamente una columna, por lo es como si pusiéramos un colspan con 1 como valor.
<td rowspan="1">Formularios</td>Vamos a ver un ejemplo. Pero para ello, primeramente, vamos a analizar la tabla del ejemplo anterior. En la que desde el propio navegador vamos a añadir un borde a la celda del <tfoot>, con la finalidad de ver la celda que queremos ampliar una columna más englobada entre un borde. Aunque cuando recarguemos la página, al no estar guardado en el fichero esta modificación del CSS se borrará:
Si queremos que dicha celda ocupe dos columnas y que quede de la siguiente manera:
Debemos de trabajar con el atributo colspan e indicarle al <td> correspondiente que tiene que ocupar dos columnas en este caso.
El código sería el siguiente:
Y el resultado (volviendo a añadir un borde con CSS en la celda desde el navegador) será el siguiente:
En algunas ocasiones si no construimos bien la tabla, y por ejemplo le decimos a alguna celda de nuestra tabla que ocupe dos columnas y no eliminamos la columna de abajo, podemos ver que la tabla no pueda encajar su contenido y lo rompa como pueda. Vamos a ver un ejemplo:
Para solucionar esto, tenemos varias soluciones eliminar la columna adicional para que todas las filas tengan la misma cantidad de columnas, hacer que determinadas columnas ocupen varias celdas, etc.
Ejercicio: a partir de la tabla del ejemplo anterior, realiza las modificacciones necesarias para que la celda de 80 horas de HTML sea compartida tanto para HTML y CSS.
TIP: realizado con Rowspan
Colgroup
Colgroup, nos permite agrupar una o más columnas de una tabla. Partiendo de la siguiente tabla:
Si queremos realizar un grupo de columnas debemos realizar un colgroup, por defecto, cada col que añadamos equivaldrá a una columna. Vamos a ver un ejemplo:
Si la tabla tiene 4 columnas, vamos a empezar a entender el concepto más básico realizando 4 columnas:
Cada una de las columnas se representa mediante a col. El resultado será el siguiente:
Actualmente, cada una de estas col que tenemos dentro del colgroup representa una columna. Vamos a ver un ejemplo en el que cambiamos el color de fondo mediante a CSS de cada una de estas col para poder entenderlo mejor:
Hasta ahora, en nuestro colgroup, hemos trabajado con un col por cada una de las columnas de una tabla. Pero existe la posibilidad de realizar agrupaciones de columnas mediante a span. Vamos a ver un ejemplo:
Vamos a volver a recurrir a modificar los colores desde CSS desde el propio navegador para entender el funcionamiento de span:
Más elementos HTML: Address, blockquote, q, pre, code div, span
Address: nos permite aportar información respecto a un contacto. Esta información estará asociada a un articule o en caso contrario al body.
Vamos a ver un ejemplo en el que la dirección está asociada al articulo:
El resultado será el siguiente:
Y si queremos tener un address asociado al body realizariamos lo siguiente:
El resultado será el siguiente:
Blockquote: nos permite crear citas en bloque, para referenciar a otros autores o documentos. Vamos a ver un ejemplo:
Suponiendo que vamos a la web de Flutter y queremos hacer la cita del texto marcado en rojo:
La manera más sencilla de hacer una cita es utilizar solamente el elemento blockquote sin atributos es la siguiente:
<blockquote>With codelabs, YouTube videos, detailed docs, and more, find everything you need to get started with Flutter or continue your learning journey.</blockquote>El resultado será el siguiente:
Aunque además de ello, podemos utilizar de forma opcional el atributo cite para referenciar a la URL de la que proviene dicha cita. Y además, en este caso, también podemos indicarle que el lenguaje es español con el atributo ya conocido como lang. Vamos a verlo:
El resultado será el siguiente:
📌 ️ — Una cosa a matizar, es que con blockquote no se realiza un enlace a dicho documento, por lo que si hacemos click en él no nos va a llevar a ninguna parte. Sino que solamente se le indica al navegador que es una cita, y si además, definimos el atributo cite le indicamos que está asociada a dicha URL.
Q: nos permite crear citas corta en línea.
📌 ️ — Q es la alternativa a blockquote utilizada para cuando queremos trabajar con elementos en línea y no en bloque.
Vamos a ver un ejemplo:
<q cite="http://www.kuppers.com/1/frases_que_me_gustan_1134784.html">Cuando camines, camina; cuando comas, come.</q>📌 ️ — Este tipo de citas además, nos englobará la cita entre “”.
El resultado será el siguiente:
Abbr: nos permite definir una abreviatura, es decir, la forma abreviada de una palabra o grupo de palabras.
Vamos a ver un ejemplo:
<p><abbr title="Hyper Text Markup Language">HTML</abbr> es un lenguaje de marcas que nos permite definir la estructura de nuestras webs.</p>El resultado será el siguiente:
Y si nos situamos encima de la abreviatura vemos que nos aparece un witget de placeholder con el significado al completo de la abreviatura:
Pre: se utiliza para trabajar con representar texto preformateado. Por lo que, la forma en la que está escrito el texto, es decir, los espacios, tabulaciones que contiene afectaran a como se visualizará dicho texto en nuestro documento HTML. Ya que se representará tal cuál lo hemos escrito.
📌 ️ — Cuando trabajamos con PRE, por t, no necesitamos utilizar a BR para realizar saltos de línea.
Vamos a ver un ejemplo:
El resultado será el siguiente:
📌 ️ — Es muy común utilizar pre (texto preformateado) combinado junto a la etiqueta code que vamos a ver a continuación.
Code: nos sirve para insertar texto que representa código de computadora (HTML, CSS, JS…). Se utiliza con la finalidad de indicarle al navegador que queremos representar el código de una forma visual. Vamos a ver un ejemplo:
El resultado será el siguiente:
📌 ️ — Si además de trabajar con code, añadimos un pre, representamos con su formato actual (espacios, saltos de línea, etc.).
Aunque es muy habitual, tal y como decíamos, que la etiqueta code vaya anidada dentro de un pre:
El resultado será el siguiente:
Details: nos permite definir un encabezado mediante el cual ver u ocultar los detalles. Vamos a ver un ejemplo:
<h1>Examen de HTML</h1>
<ol>
<li>¿Qué significa HTML?</li>
<ul>
<li>a) Hyper Text Markup Language</li>
<li>b) Hard Text Mask Language</li>
<li>c) Hyper Transform Mask Language</li>
<li>d) Hard Text Markup Language</li>
</ul>
</ol><details>
<summary>Ver respuesta</summary>
<p>La respuesta correcta es Hyper Text Markup Language</p>
</details>
El resultado será el siguiente:
Mark: representa un texto marcado o resaltado como referencia o anotación, debido a su relevancia o importancia en un contexto particular.
Vamos a ver un ejemplo:
<h1>Cambio en la normativa de terrazas:</h1>
<p><mark>Algunos ayuntamientos españoles aplican una medida para acabar con el uso del espacio público,</mark> que consiste en imponer una <mark>multa</mark> de varios cientos de euros a quienes la practican. La sanción puede llegar a los <mark>500 €</mark>.</p>El resultado será el siguiente:
Div: la palabra div proviene de División, ya que nos permite separar contenido. El elemento DIV semánticamente hablando no significa nada. Y no es nada más y nada menos que un contenedor, es decir, una especie de “caja” en el que contendremos el resto de elementos y habitualmente se usa para anidar el elementos, por tanto, agrupa varios elementos (párrafos, encabezados, listas, tablas, divisiones, etc.) con la intención de posteriormente trabajar con ellos mediante a JavaScript o CSS.
Hubo un tiempo, (en HTML 4 y antes de que se crearan los elementos semánticos que ya vimos) en los que los DIVs se utilizan para realizar esa función.
Una vez creados esos elementos de secciones, actualmente, se utilizan para el mismo propósito que anteriormente, para separar contenido que no está relacionado entre si.
Vamos a ver un ejemplo:
El resultado será el siguiente:
De hecho, si cambiamos el color de fondo del div situándonos sobre la etiqueta, podemos ver que engloba a todo el contenido de su interior.
Span: de la misma forma que un DIV es un contenedor en bloque, tenemos span como un contenedor en línea. Se utiliza principalmente para englobar una serie de palabras/textos con la finalidad de darles estilos posteriormente desde CSS.
📌 ️ — De la mismo forma que un DIV no tenía significado semántico, SPAN, tampoco significa nada semánticamente hablando.
Vamos a ver un ejemplo:
<p>Este es un parrafo de ejemplo.<span> Y, esto, un span dentro de un párrafo.</span></p>El resultado será el siguiente:
Y de la misma forma que en caso anterior, podríamos dar formato, etc. Vamos a ver un ejemplo de como cambiar el color del texto a rojo:
Formularios en HTML
Hasta ahora, por decirlo así, solamente hemos “añadido/pintado” información en el interior de la estructura de nuestro HTML. Pero hemos llegado al punto en el que vamos a ver los formularios, lo que nos permitirá ver como interactúa una página con el usuario que la visita. Realizando por ejemplo: recolección de datos, registro e inicio de sesiones, etc.
Todas las webs a excepción de las webs que solo muestran contenido (webs informativas) tienen formularios. Ya sea el típico formulario de contacto, el de inicio de sesión, un formulario de conversión de divisas, etc.
La estructura básica de un formulario
La estructura básica de un formulario está compuesta por:
Form: nos permite indicarle al navegador que vamos a crear un formulario. Para ello, realizamos lo siguiente:
<form action="">
<!-- Aquí irán los elementos del formulario -->
</form>Si miramos la web, podemos ver que aún no aparece nada:
Esto se produce ya que el formulario está vacío y por tanto sus dimensiones actualmente en la resolución en la que se ve son width (ancho) de 232.571px y 0 px de height (altura). Por tanto, al no tener nada en su interior, el ancho es igual a 0 lo que supone que no ocupe nada y por ello no lo podemos ver.
Si nos fijamos, podemos ver que tenemos un atributo action en el formulario, esto nos permite indicar la URL hacía donde queremos enviar el formulario. Por el momento, como no lo vamos a enviar a ninguna parte utilizaremos un dead link (#) como valor para el atributo action.
<form action="#">
<!-- Aquí irán los elementos del formulario -->
</form>📌 ️ — Un Píxel (de Picture Element) o px, es la unidad más pequeña de una pantalla de un dispositivo.
Una vez empecemos a añadir contenido, veremos que si que podremos visualizarlo correctamente.
Label: nos permite indicar el nombre que tendrá un campo de un formulario. Veremos el ejemplo en el siguiente punto junto al input ya que al trabajar juntos están estrechamente relacionados.
Input: nos permite crear un campo que permitirá al usuario interactuar con el formulario. Vamos a ver un ejemplo:
<form action="#">
<label for="nombre">Nombre: </label>
<input id="nombre" type="text">
</form>El resultado será el siguiente:
Existe una alternativa que también es correcta que consiste en meter el input anidado en el interior del label. Que aunque es menos convencional de ver, en algunas ocasiones puede que sea necesario es completamente valido según la especificación de la W3.
Vamos a ver un ejemplo:
El resultado será el siguiente:
Cuando definimos un input, es recomendable definir el atributo id con un valor, en este caso nombre. Ya que el definir un ID nos permitirá poder asociado dicho input con la label mediante al atributo For en el que definiremos el valor del ID que queremos asociar. De hecho, si hacemos click sobre el label correspondiente al input, podemos ver que no sitúa en el interior de dicho input. Vamos a verlo:
Button: nos permite crear un botón mediante el cual poder enviar el formulario. Vamos a ver un ejemplo:
<form action="#">
<label for="nombre">Nombre: </label>
<input id="nombre" type="text">
<button>Enviar</button>
</form>El resultado será el siguiente:
Pese a que no tenemos una ruta definida en el atributo action=”#” ya que hemos definido definido un dead link, podemos ver que el si hacemos click sobre el botón de enviar, la página se recarga.
📌 ️ — Esto es debido a que el comportamiento por defecto de un formulario es recargar al página. Si no queremos que esto pase, lo podemos controlar desde JavaScript.
Ejemplo de formulario:
Normalmente, la ruta que definimos como valor en el atributo form debe de apuntar hacía una aplicación de servidor, es decir, hacía un Back End (como por ejemplo Java, PHP, Node.JS, etc.). O bien, otra alternativa es capturar el formulario desde JavaScript y realizas las modificaciones que necesitemos desde JS para finalmente, enviar dicho formulario desde JS.
<form action="#">
<label for="nombre">Nombre: </label>
<input id="nombre" type="text">
<button>Enviar</button>
</form>Existen distintas webs que nos permiten capturar esos datos, como por ejemplo FormSubmit. Vamos a ver un ejemplo:
<form action="https://formsubmit.co/tucorreo@gmail.com" method="POST" >
<label for="nombre">Nombre: </label>
<input id="nombre" type="text">
<button>Enviar</button>
</form>Si nos fijamos estamos realizado un envío por POST (que como ya explicamos hace la petición “por debajo” para que no se vean los datos en la URL). Y si realizamos el envío, podemos ver que nos aparece que tenemos que confirmar el email:
Para ello, vamos al correo y activamos la cuenta:
Y tras activar el correo:
Es aconsejable utilizar el código que tenemos asignado a nuestro correo para reemplazarlo por dicho correo dentro del formulario. Ya que así, nadie pueda saber cual es nuestro correo por razones de seguridad:
El realizar esta modificación (es opcional) ya que si dejamos el email también funcionará el envío del email:
<form action="https://formsubmit.co/ca4d4d87XXXXXXXXXX987ade5" method="POST" >
<label for="nombre">Nombre: </label>
<input id="nombre" type="text">
<button>Enviar</button>
</form>Finalmente, si realizamos una prueba con la siguiente información:
Tendremos que confirmar que no somos un robot:
Podemos ver que recibiremos un email que nos confirmará que se ha realizado el envío del formulario:
Y si vamos al correo correspondiente, podemos confirmar que hemos recibido el email:
Tipos de inputs
Dentro de los inputs, existen distintos tipos y aunque existen muchos más, en esta sección vamos a ver los principales. Aquí os adjunto un listado con todos los inputs al completo. Vamos a ver los más importantes:
- <input type=”text”> Hasta ahora hemos visto el input más utilizado de todos, el <input type=”text”> que, es el valor predeterminado cuando no especificamos nada dentro de un input <input>.
- <input type=”button”> visualmente hace lo mismo <button> pero cuando pulsamos sobre dicho botón no se envía el fomulario.
📌 ️ — Por tanto, existe una diferencia que hace que en determinados casos sea más recomendable utilizar uno u otro. Si escribimos un <input type=”button”> y hacemos clic en dicho botón, no se enviará el formulario. En cambio, si hacemos clic en <button> si. Por lo que, en determinados casos será más recomendable utilizar button (cuando queramos envíar el formulario directamente) y en determinados caso será mejor utilizar <input type=”button”> (cuando querramos trabajar con el formulario desde JS y posteriormente enviarlo).
Vamos a ver un ejemplo en el que comparamos el funcionamiento de button vs input type=”button”:
El resultado será el siguiente:
Inputs de fechas
Dentro de los inputs de fechas tenemos distintos tipos:
- <input type=”date”> nos mostrará un input en el que podremos asignar una fecha. Vamos a ver un ejemplo:
<form action="">
<input type="date">
<button>Enviar</button>
</form>El resultado será el siguiente:
- <input type=”time”> nos mostrará un input en el que podremos asignar una fecha y una hora. Vamos a ver un ejemplo:
<form action="">
<input type="time">
<button>Enviar</button>
</form>El resultado será el siguiente:
- <input type=”datetime”> nos mostrará un input en el que podremos asignar una fecha y una hora. Vamos a ver un ejemplo:
<form action="">
<input type="datetime">
<button>Enviar</button>
</form>El resultado será el siguiente:
- <input type=”datetime-local”> está obsoleto por lo que nos mostrará simplemente el típico campo de input tradicional de texto. Vamos a ver un ejemplo:
<form action="">
<input type="datetime-local">
<button>Enviar</button>
</form>El resultado será el siguiente:
El problema de este tipo de input es que no es compatible con algunas versiones de firefox. Vamos a verlo en canIUse:
Por lo que en determinadas circunstancias, si la compatibilidad es muy importante con versiones anteriores de dicho browser, sería recomendable realizar un campo <input type=”date”> y otro campo <input type=”time”> separados:
<form action="">
<input type="date">
<input type="time">
<button>Enviar</button>
</form>El resultado será el siguiente:
- <input type=”month”> nos mostrará un input en el que podremos añadir un mes y un año. Vamos a ver un ejemplo:
<form action="">
<input type="month">
<button>Enviar</button>
</form>El resultado será el siguiente:
- <input type=”week”> nos mostrará un input en el que podremos añadir una semana y un año. Vamos a ver un ejemplo:
<form action="">
<input type="week">
<button>Enviar</button>
</form>El resultado será el siguiente:
Cómo acceder a nuestra web desde otro dispositivo de la red + Visualización de los inputs en función del dispositivo
No todos los inputs se ven igual en todos los dispositivos, en algunas ocasiones esto se produce debido al navegador (Chrome, Firefox, Mozilla…) que estamos utilizado, en otras por el tipo de dispositivo (desktop, mobile, tablet…).
De hecho, si tenemos el servidor local (Live Server) activado, siempre y que estemos conectados a la misma red tanto desde el móvil que estemos trabajando como en la computadora, podemos acceder al servidor local que tenemos levantado en la IP correspondiente. Para ello, primeramente abrimos el CMD y realizamos un ip config:
En mi caso la IP que tengo asociada al PC es la 192.168.1.43:
Finalmente, aseguramos que tenemos una web corriendo vamos a cargarla.
Por lo que si nos metemos en el Visual Studio Code podemos ver que tenemos el servidor corriendo y para confirmarlo, finalmente, aseguramos que tenemos una web corriendo vamos a cargarla.
Realmente lo que estamos haciendo con la IP de loopback 127.1.0.1:5500 es llamar “a si mismo”, es decir, llamar a la IP correspondiente a dicho equipo. Por tanto, llamar a 127.1.0.1:5500/index.html es equivalente a llamar a 192.168.1.43:5500/index.html siempre y que la llamada se haga desde dicho equipo.
📌 ️ — Por lo que si estamos conectados a una red con ambos dispositivos, el ordenador y el dispositivo móvil, realmente podremos acceder a la web desde el móvil apuntando a 192.168.1.43:5500/index.html.
Cuando levantamos un 𝐬𝐞𝐫𝐯𝐢𝐝𝐨𝐫 𝐰𝐞𝐛 𝐞𝐧 𝐥𝐨𝐜𝐚𝐥 𝐜𝐨𝐧 𝐋𝐢𝐯𝐞 𝐒𝐞𝐫𝐯𝐞𝐫, 𝐩𝐨𝐝𝐞𝐦𝐨𝐬 𝐯𝐞𝐫 𝐜𝐨𝐦𝐨 𝐬𝐞 𝐯𝐢𝐬𝐮𝐚𝐥𝐢𝐳𝐚 𝐥𝐚 𝐰𝐞𝐛 𝐝𝐞𝐬𝐝𝐞 𝐮𝐧 𝐝𝐢𝐬𝐩𝐨𝐬𝐢𝐭𝐢𝐯𝐨 𝐪𝐮𝐞 𝐩𝐞𝐫𝐭𝐞𝐧𝐞𝐳𝐜𝐚 𝐚 𝐥𝐚 𝐦𝐢𝐬𝐦𝐚 𝐫𝐞𝐝 que dicha computadora. 𝐏𝐨𝐫 𝐞𝐣𝐞𝐦𝐩𝐥𝐨, podemos visualizar nuestra web desde 𝐮𝐧 📱𝐝𝐢𝐬𝐩𝐨𝐬𝐢𝐭𝐢𝐯𝐨 𝐦ó𝐯𝐢𝐥📱con la finalidad de ver como se adapta a dicho dispositivo.
Los pasos a realizar son:
1. 𝐀𝐜𝐭𝐢𝐯𝐚𝐫 𝐞𝐥 𝐋𝐢𝐯𝐞 𝐒𝐞𝐫𝐯𝐞𝐫 𝐝𝐞𝐬𝐝𝐞 𝐕𝐒𝐂
2. Testeamos que la web funcioné desde el computador
3. Abrimos un 𝐂𝐌𝐃 y 𝐞𝐣𝐞𝐜𝐮𝐭𝐚𝐦𝐨𝐬 𝐞𝐥 𝐜𝐨𝐦𝐚𝐧𝐝𝐨 𝐈𝐏 𝐂𝐎𝐍𝐅𝐈𝐆
4. 𝐕𝐞𝐫𝐢𝐟𝐢𝐜𝐚𝐦𝐨𝐬 𝐪𝐮𝐞 𝐞𝐥 𝐦ó𝐯𝐢𝐥 𝐞𝐬𝐭é 𝐜𝐨𝐧𝐞𝐜𝐭𝐚𝐝𝐨 𝐚 𝐥𝐚 𝐦𝐢𝐬𝐦𝐚 𝐫𝐞𝐝
5. Vamos al dispositivo móvil y escribimos la IP acompañada del número de puerto y del archivo a acceder ¡Y tachan!🤳🏼🤳🏼🤳🏼
Vamos a ver un ejemplo:
📌 ️ — Ante el caso que intentemos entrar a la IP 127.1.0.1 desde el dispositivo móvil, dicha IP ya no apuntaría a la IP del PC, sino que apuntaría a al IpP del móvil, es decir, así mismo por lo que no podríamos acceder desde allí. Ya que, dicha ip de loopback nos permite acceder solamente al dispositivo propio. Y en el dispositivo móvil no hemos levantado un servidor.
Inputs adaptados a móviles
Bueno, ahora, que ya hemos visto como acceder desde un móvil a un dispositivo. Vamos a ver los distintos inputs que se visualizar de una forma distinta a la web que a los dispositivos móviles. Ya es estos inputs, se “adaptaran” en cierta medida a la vista móvil.
Vamos a verlos:
Input de tipo search: nos permite introducir un buscador, aunque no son campos de texto tradicionales, ya que mediante al search, le indicamos al navegador que nos encontramos ante un campo de búsqueda. Y aunque son funcionalmente hablando idénticos a los inputs de texto, el browser en determinadas situaciones, como por ejemplo cuando se visualizan desde un móvil, puede realizar modificaciones adaptándose a dicho dispositivo.
Vamos a ver un ejemplo:
<form action="">
<label for="buscador">Buscador:</label>
<input id="buscador" type="search" name="buscador">
</form>Si lo abrimos desde un dispositivo móvil, podemos ver que el teclado se adapta a dicho input y que nos muestra una 🔍lupa🔍 dentro del teclado:
En cambio, si visualizamos el input desde el navegador, podemos ver cuando nos situamos sobre el input, tiene un funcionamiento prácticamente idéntico a un input de texto tradicional. A excepción de que cuando ponemos un contenido aparece una X para eliminarlo:
Esta X también aparece en la vista mobile cuando escribimos:
Por lo que aunque tiene un comportamiento similar a input de tipo text, semánticamente hablando como ya hemos visto, no serán lo mismo. Y, por tanto, en determinadas situaciones el navegador lo adaptará en función del dispositivo en el que abramos dicha web.
Input de tipo teléfono: representa un campo de un número telefónico. Este campo, simplemente aceptará una sola línea de texto. El valor introducido puede ser tanto texto como números y no se validará automáticamente. Ya que debido a la gran varidad de números telefónicos que hay a nivel mundial la W3, ha decidido que las restricciones son inapropiedas. Y que es mejor que este campo de input acepte el texto sin requerimientos particulares.
📌 ️ — Existe una forma de realizar validaciones mediante al atributo
patternmediante a las expresiones regulares (Regex) aunque esto lo veremos más adelante en el apartado de atributos.
Vamos a ver un ejemplo:
<form action="">
<label for="telefono">Teléfono:</label>
<input id="telefono" type="tel" name="telefono">
</form>El resultado visto desde una vista de escritorio será el siguiente:
En cambio, si lo visualizamos desde un dispositivo mobile, podemos ver que se realiza una adaptación:
Y que en este caso en concreto, estamos algo más limitados desde el móvil que desde el ordenador, ya que no nos deja introducir letras (aunque si pegarlas):
Input de tipo email: Se utilizan para que el usuario ingrese una dirección de correo, o si se especifica el atributo múltiple una lista de direcciones.
Vamos a ver un ejemplo:
<form action="">
<label for="email">Email:</label>
<input id="email" type="email" name="email">
</form>El resultado desde un escritorio será el siguiente:
En cambio, desde un dispositivo mobile, podemos ver que en sugerencias al identificar el browser que es un email nos aparecen sugerencias de correos además de una @ en el teclado:
Input de tipo URL: nos permite escribir una URL.
Vamos a ver un ejemplo:
<form action="">
<label for="enlace">Enlace:</label>
<input id="enlace" type="url" name="enlace">
</form>El resultado desde escritorio si no escribimos correctamente la URL y pulsamos ENTER (lo que hará que enviemos el formulario) podremos ver que nos aparece un witget con el siguiente mensaje:
Si escribimos, correctamente el formulario, y pulsamos ENTER podemos ver como se
En cambio, desde un dispositivo mobile, podemos ver que nos aparece la / con la que acaban las URLs y un botón de envío de la petición:
Tips para organizar un formulario
Cuando realizamos un formulario como el siguiente:
<form action="">
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" name="nombre">
<label for="apellidos">Apellidos:</label>
<input id="apellidos" type="text" name="apellidos">
</form>Es bastante habitual que en según que resoluciones (móvil o una pantalla reducida) el contenido de nuestra ventana no se adapte como a nosotros nos gustaría en nuestra web:
Para ello, aunque podríamos usar CSS, también podríamos utilizar <br> o bien, englobar el input y la label dentro de un div. Vamos a verlo:
<form action="">
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" name="nombre"><br>
<label for="apellidos">Apellidos:</label>
<input id="apellidos" type="text" name="apellidos"><br>
</form>El resultado será el siguiente:
Y si lo hiciéramos con DIVs:
<form action="">
<div>
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" name="nombre">
</div>
<div>
<label for="apellidos">Apellidos:</label>
<input id="apellidos" type="text" name="apellidos">
</div>
</form>El resultado será muy similar:
Input tipo password: nos permite introducir una contraseña de forma de forma que el texto introducido no puede ser leído se substituye por asteriscos (*) o un puntos (•) en función del navegador en el que se ejecute.
Vamos a ver un ejemplo:
<form action=””>
<label for=”password”>Password:</label>
<input id=”password” type=”password” name="password">
</form>El resultado desde un escritorio será el siguiente:
Y desde la vista mobile, también podemos ver que nos aparece una especie de llave 🗝️. Si hacemos clic en ella:
Podemos ver que podemos realizar una sugerencia de contraseña segura:
Pese a que este tipo de input es evidentemente más seguro que un input de tipo texto, ya que al menos no vemos la información directamente en la pantalla. Podría ser modificado desde el editor de HTML para convertirse en un input de tipo texto lo que provocaría que la tenemos una contraseña introducida en el input pudiera ser visualizada. Vamos a ver un ejemplo:
¿Por qué utilizar tantos tipos de inputs?
La finalidad/objetivo de utilizar tantos inputs distintos es la de indicarle al navegador que tipo de dato se va de introducir en cada una de los campos. Una vez hacemos esto, el navegador se adaptará en función del tipo de input en función del dispositivo. Por ejemplo, en el caso de la vista mobile, si el input es de tipo email nos pondrá la @ para que no la tengamos que buscar.
📌 ️ — Por tanto, para mejorar la accesibilidad de nuestra web, es muy importante definir el tipo de input correctamente para que nuestro navegador sea capaz de adaptarse correctamente al tipo de dato que queremos recibir en dicho input.
Popurrí de Inputs
Seguimos viendo más inputs, en este caso en concreto algunos que no sabemos bien donde categorizarlos:
Input de tipo numérico: nos permite nos permiten introducir números. Si nos fijamos este tipo de input, no acepta textos y además tiene dos witgets (las flechitas) que nos permiten incrementar o reducir el número actual. Aunque también podemos escribirlo mediante a los valores numéricos. Vamos a ver un ejemplo:
<form action="">
<label for="numero">Edad:</label>
<input id="numero" type="number" name="numero">
</form>El resultado será el siguiente:
Input de tipo color: nos permite realizar lo que se conoce como un color picker (selector de color). Es muy útil cuando por ejemplo cuando el usuario quiere configurar el color de fondo de la web. Vamos a ver un ejemplo:
<form action="">
<label for="colorPicker">Color Picker:</label>
<input id="colorPicker" type="color" name="colorPicker">
</form>El resultado será el siguiente:
Input de tipo rango: nos permite trabajar con rangos, es decir, con números. Vamos a ver un ejemplo:
<form action="">
<label for="rango">Valor:</label>
<input id="rango" type="range" min="0" max="100" name="rango">
</form>El resultado será el siguiente:
Por defecto, los valores se incrementan de uno en uno, aunque nosotros podemos modificarlos mediante el atributo step para que, por ejemplo, se realicen saltos de 20 en 20. Vamos a ver un ejemplo:
<form action="">
<label for="rango">Valor:</label>
<input id="rango" type="range" min="0" max="100" step="20" name="rango">
</form>El resultado será el siguiente:
Input de tipo reset: nos permite borrar los datos introducidos dentro de nuestro formulario, tal y como se realiza cuando recargamos una página con actualizar (F5), pero sin la necesidad de tener que recargar el formulario. Habitualmente, este botón, se pone a la derecha del botón de envía (submit). Vamos a ver un ejemplo:
<form action="">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" name="nombre"><br>
<label for="nombre">Apellidos:</label>
<input type="text" name="apellidos" id="apellidos" name="apellidos"><br>
<input type="submit" value="Enviar">
<input type="reset" value="Limpiar">
</form>El resultado será el siguiente:
Input de tipo hidden: permite ocultar un campo para que cuando los usuarios carguen la página no puedan verlo. Habitualmente, se utiliza por ejemplo en encuestas y en función de una determinada respuesta se substituye el tipo valor de input de hidden a text para que aparezca en el formulario. Vamos a ver un ejemplo:
<form action=””>
<input type=”hidden” name="elementoOculto"><br>
</form>Si cargamos el formulario podemos ver que no aparece nada, aunque nosotros podemos hacer lo que en un futuro haremos desde JS e ir al código del HTML desde el inspector y modificar el valor del input de hidden a text para que se muestre:
Input de tipo radio: los inputs de tipo radio, generalmente se utilizan para realizar grupos de radios buttons en los que introduciremos múltiples opciones, es decir varios elementos con la finalidad que el usuario coja una o varias (en función de la configuración). Vamos a ver un ejemplo:
<form action="">
<h1>¿Qué marca de móvil tienes?</h1>
<label for="iphone">Iphone</label>
<input type="radio" name="iphone" id="iphone" value="1">
<label for="android">Android</label>
<input type="radio" name="android" id="android" value="2">
</form>El resultado será el siguiente:
Aunque si os fijáis ¡Podemos marcar ambos radio options! Por lo que, para que seleccionar solamente uno de los dos, ambos radio optitons tendrán que tener el mismo valor en name y de esta forma será como el navegador interprete que forman parte del mismo grupo. Vamos a ver un ejemplo:
<form action="">
<h1>¿Qué marca de móvil tienes?</h1>
<label for="iphone">Iphone</label>
<input type="radio" name="mobile" id="iphone" value="1">
<label for="android">Android</label>
<input type="radio" name="mobile" id="android" value="2">
</form>📌 ️ — El atributo value, nos permite indicar el valor que recibirá el servidor cuando se marque dicho radio option. No es necesario que coincida con el valor que hemos definido en name ni en el id.
El resultado será el siguiente, ahora solamente nos dejará seleccionar un elemento:
📌 ️ — Los botones de opción (radio options) generalmente se representan como pequeños círculos, que se rellenan o resaltan cuando se seleccionan.
Si por ejemplo analizamos los datos de un “hipotetico estudio” (nos lo acabamos de inventar) que el total de usuarios que usan Android es un 70 % frene a un 30 % que usan Iphone. Quizás tendría sentido marcar un elemento por defecto. Cuando queremos marcar un radio option por defecto cuando se cargue el formulario utilizaremos el atributo booleano checked.
Vamos a ver un ejemplo:
El resultado cuando cargamos la página es el siguiente:
Si nos fijamos ya tenemos una opción predefinida por defecto.
Input de tipo checkbox: nos permite insertar varias opciones de una forma similar a los radio button pero con la diferencia que este tipo de input nos va a permitir seleccionar varias opciones. Vamos a ver un ejemplo:
📌 ️ — El funcionamiento es similar la radio button, por lo que tendremos que definir un name en especifico para el conjunto de opciones para que el navegador interprete que son de la misma categoría y un valor para cuando envíenos el formulario al servidor.
El resultado será el siguiente:
Y podemos marcar uno u varios o inclusive todos sin problema:
También podemos utilizar el atributo checked de la misma forma que lo hacíamos anteriormente para marcar algunos valores por defecto. Pero en este caso, como podemos hacer una selección multiple, podremos aplicar varios checked. Vamos a ver un ejemplo:
El resultado será el siguiente:
Select: aunque no es un input, actúa de una forma muy similar a un input nos permite representa un menú de opciones. Dentro de este menú las opciones deben ir representadas mediante a elementos option. Y en función de la configuración del select, podremos seleccionar 1 sola opción o varias opciones. Vamos a ver un ejemplo:
<form action="">
<label for="colores">Selecciona una opción:</label>
<select name="color" id="colores">
<option value="Rojo">Rojo</option>
<option value="Verde">Verde</option>
<option value="Azul">Azul</option>
<option value="Amarillo">Amarillo</option>
</select>
</form>En este caso, solamente podemos seleccionar una opción. Y, el resultado será el siguiente:
Si nos fijamos no está desplegado automáticamente, por lo que tenemos que hacer clic en el select, para poder ver el conjunto de opciones:
Si quisiéramos poder marcar varias opciones en vez de solamente 1, podemos utilizar el atributo múltiple. Vamos a ver un ejemplo:
<form action="">
<label for="colores">Selecciona una opción:</label>
<select name="color" id="colores" multiple>
<option value="Rojo">Rojo</option>
<option value="Verde">Verde</option>
<option value="Azul">Azul</option>
<option value="Amarillo">Amarillo</option>
</select>
</form>El resultado será el mismo, aunque directamente lo tendremos desplegado y no aparecerá la flechita. Además, si pulsamos la tecla CONTROL mientras hacemos la selección, o SHIFT para seleccionar varios elementos consecutivos, podremos marcar varios elementos. Vamos a verlo:
Existe otra opción algo más avanzada de trabajar con el elemento select que mediante al elemento optgroup, que nos permite crear distintos grupos/categorías dentro de las opciones mediante al atributo label. Vamos a ver un ejemplo:
<form action="">
<label for="colores">Selecciona una opción:</label>
<select name="color" id="colores"><optgroup label="Colores parchis">
<option value="Rojo">Rojo</option>
<option value="Verde">Verde</option>
<option value="Azul">Azul</option>
<option value="Amarillo">Amarillo</option>
</optgroup> <optgroup label="Colores ajedrez">
<option value="Blanco">Blanco</option>
<option value="Negro">Negro</option>
</optgroup> <optgroup label="Colores tres en raya">
<option value="Amarillo">Amarillo</option>
<option value="Rojo">Rojo</option>
</optgroup>
</select>
</form>
El resultado será el siguiente:
📌 ️ — Utilizar el elemento
<optgroup>dentro de un<select>, es ideal para los casos en los que tenemos muchas opciones y queremos agrupar en distintas categorías.
Input de tipo list: funciona de forma muy similar al select anterior, pero con la peculiaridad de que solamente nos deja seleccionar un elemento. El principal beneficio de este input frente al select anterior, es que, nos permite realizar búsquedas desde el propio campo. Vamos a ver un ejemplo:
<form action="">
<label for="browserSelected">¿Qué navegador estás utilizando?
<input list="browsersOpt" name="myBrowser" id="browserSelected" />
</label>
<datalist id="browsersOpt">
<option value="Brave"></option>
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Internet Explorer"></option>
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Microsoft Edge"></option>
</datalist>
</form>El resultado será el siguiente:
📌 ️ — Aunque también podemos seleccionar los elementos de forma tradicional. El buscador, además nos permite realizar búsquedas de un carácter o conjunto de caracteres, nos muestra todas las opciones que contengan dicho o dichos caracteres. Independientemente de la posición en la que este situado el texto que estamos buscado. Si alguna opción la contenido lo muestra sin importar en que posición. Un posible ejemplo de uso que se me ocurre, es cuando cuando por ejemplo, realizamos una web de alimentación y queremos que el usuario pueda realizar búsquedas dentro de las opciones. Filtrando así su contenido y facilitando por tanto, la elección del producto.
Además, en los inputs de tipo list, también podemos utilizar otro formato conocido como “value & description”. Vamos a ver un ejemplo:
<form action="">
<label for="browserSelected">¿Qué navegador estás utilizando?
<input list="browsersOpt" name="myBrowser" id="browserSelected" /></label>
<datalist id="browsersOpt">
<option value="Brave">Brave Browser</option>
<option value="Chrome">Chrome Browser</option>
<option value="Firefox">Firefox Browser</option>
<option value="Internet Explorer">Explorer Browser</option>
<option value="Opera">Opera Browser</option>
<option value="Safari">Safari Browser</option>
<option value="Microsoft Edge">Edge Browser</option>
</datalist>
</form>El resultado será el siguiente:
Input de tipo file: nos permite cargar archivos desde un formulario con la finalidad de poder posteriormente enviarlos al servidor. Vamos a ver un ejemplo:
<form action="">
<label for="fileInput">Introduce un fichero</label>
<input type="file" name="fileInput" id="fileInput">
</form>El resultado será el siguiente:
Existe la posibilidad de utilizar el atributo de aceptación de validaciones desde HTML con definir el tipo de fichero se espera que introduzca el usuario. El atributo de aceptación no debe usarse como una herramienta de validación. Las cargas de archivos deben validarse en el servidor o desde cliente con JS. Podemos definir como valor del atributo una o varias extensiones. Vamos a ver un ejemplo:
<form action="">
<label for="fileInput">Introduce un fichero</label>
<input type="file" name="fileInput" id="fileInput" accept="image/*">
<button>Submit</button>
</form>El resultado será que cuando pulsamos en seleccionar un fichero, por defecto, nos mostrará solamente los tipos de fichero que le hemos indicado. En este caso, por defecto el selector de fichero nos muestra solamente los ficheros que son imágenes:
Aunque eso no significa que no se puede cambiar, y seleccionar otro archivo de otro tipo:
Vemos que es aceptado otro tipo de fichero, ya que el atributo accept es utilizado principalmente para que cuando el usuario pulse sobre el botón le aparezcan directamente los ficheros que son aceptados.
Más elementos de formularios
Text area: nos permite introducir un texto multilínea sin formato. Vamos a ver un ejemplo:
<form action="">
<label for="jobTxt">Explica el porque te interesa el puesto</label><br>
<textarea name="jobTxt" id="jobTxt" cols="30" rows="10"></textarea>
<br>
<button>Submit</button>
</form>El resultado será el siguiente:
📌 ️ — El atributo col nos permite definir las columnas que ocupará el text area y el atributo row las filas. Aunque, el ancho del text area también podría ser modificado desde CSS.
Podemos también añadir un texto dentro del text area de la siguiente manera:
<form action="">
<label for="jobTxt">Explica el porque te interesa el puesto</label><br>
<textarea name="jobTxt" id="jobTxt" cols="80" rows="15">Bla Bla Bla...</textarea>
<br>
<button>Submit</button>
</form>El resultado será el siguiente:
Progress: se utiliza para representar una barra de progreso, que por ejemplo, nos puede servir para visualizar el progreso de una tarea. Si no tocamos la barra desde CSS, los detalles del diseño de dicha barra, es decir como se visualiza depende directamente del navegador que utiliza el cliente. Vamos a ver un ejemplo:
<form action="">
<label for=""></label>
<progress max="10" min="0"></progress>
<button>Submit</button>
</form>Como no hemos especificado un valor mediante el atributo value, podemos ver que la barra aparece de la siguiente manera:
📌 ️ — Esta barra, con este comportamiento (desplazándose hacía los lados) nos puede ir muy bien para realizar efectos de carga más adelante.
Para evitar que esto pase, es necesario utilizar un value. Vamos a verlo:
<form action="">
<label for=""></label>
<progress max="10" min="0" value="5"></progress>
<button>Submit</button>
</form>El resultado será el siguiente:
Aunque lo más recomendable es realizar una doble validación (JS y HTML), y combinarlo con CSS ya que como hemos visto con el input de password anteriormente, las validaciones desde HTML pueden ser eliminadas por el usuario desde el inspector.
Meter: nos sirve para representar una medida dentro de un rango conocido. Tiene un comportamiento muy similar a progress, pero mucho más avanzando ya que nos permite llegar a realizar barras de tareas mucho más complejas. Vamos a ver un ejemplo:
<form action="">
<label for="bateria">Bateria del dispositivo:</label>
<meter id="bateria" value="50" min="0" max="100">
</meter>
</form>El resultado será el siguiente:
Actualmente da igual que valor introduzcamos un valor que sea muy grande como el 98 % de esta captura:
O muy pequeño como el 5% que hemos definido en esta captura:
La barra en todo los casos se ve del mismo color. Pero existe la posibilidad de añadir los atributos low (bajo), high (alto) y optimim (recomendado) con la finalidad de poder hacer que esta barra cambie de colores en función del valor que le asingamos. Vamos a ver un ejemplo:
<form action="">
<label for="bateria">Bateria del dispositivo:</label>
<meter id="bateria" value="24" min="0" max="100" low="25" high="75" optimum="50"></meter>
</form>Cuando el valor (value) definido en el meter sea menor que el valor definido en lo la barra se verá en amarillo. En este caso, con 24 como valor podemos ver que es amarillo ya que no supera el low:
Cuando el meter tenga un valor entre el low (25 en este caso) y hasta una vez superado el valor high (75 en este caso), la parte que indica el total se pondrá en verde:
Si superamos el valor high (75) el color volverá a ser amarillo. Por ejemplo si ponemos 76 con las condiciones de este meter, podemos ver que el color vuelve a cambiar a amarillo:
Por tanto, y en resumen:
- Si el valor se encuentra entre low y high se verá en verde
- Si el valor es inferior a low o superior a high se verá amarillo
📌 ️ — Vamos a explicar porque cambia de color el meter en determinadas circunstancias. Aunque aún no hemos hablado de ello, el culpable de que la barra realmente cambie de color es el valor optimum. Mediante a optimum definimos que valor numérico que para nosotros será el óptimo. Este valor, en función de si lo definimos entre LOW & HIGH, por encima de LOW & HIGH o por debajo de LOW & HIGH, tendrá consecuencias estéticas sobre nuestro meter.
Se pueden llegar a crear 3 rangos a partir de optimum que tendrán 3 colores distintos: AMARILLO, VERDE y ROJO. Vamos a ver un ejemplo para acabar de entender porque cambia en ocasiones el color y su funcionamiento al 100%:
El resultado será el siguiente:
Fieldset: si lo traducimos del inglés sería conjunto/grupo de campos. Este elemento, nos permite agrupar campos de un formulario. Vamos a ver un ejemplo:
<form action="">
<fieldset>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre"><br>
<label for="apellidos">Apellidos:</label>
<input type="text" id="apellidos"><br>
<button>Enviar</button>
</fieldset>
</form>El resultado será el siguiente:
📌 ️ — La estructura que por defecto nos ofrece fieldset, puede ser modificada posteriormente desde CSS.
Mediante el elemento legend, podemos ponerle una etiqueta que nos permite definir un nombre a dicha agrupación. La finalidad de utilizar legend, es hacer el fieldset más entendible, tanto el usuario como para el browser. Vamos a ver un ejemplo:
<form action="">
<fieldset>
<legend>Datos personales:</legend>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre"><br>
<label for="apellidos">Apellidos:</label>
<input type="text" id="apellidos"><br>
<button>Enviar</button>
</fieldset>
</form>El resultado será el siguiente:
Atributos de los formularios:
Hasta ahora hemos visto algunos atributos de formularios, en este apartado aunque no los veremos todos (os dejo la lista aquí con todos los atributos) vamos a profundizar un poco más en ellos.
Required: el atributo booleano required, nos permite indicar al formulario que un campo sea obligatorio. Vamos a ver un ejemplo:
<form>
<label for="nombre">Introduce tu nombre:</label>
<input type="text" name="nombre" id="nombre" required>
<button>Enviar</button>
</form>Si pulsamos sobre enviar con un campo required (requerido) sin rellenar, el navegador no nos dejará realizar el envío del formulario y nos arrojará una advertencia en el campo:
📌 ️ — Igualmente, habrá que realizar una validación en el servidor para confirmar que este campo se recibe bien, ya que si editamos el código podríamos eliminar el required. Por lo que, es simplemente la primera medida de seguridad de cliente. Pero lo recomendable sería el realizar más validaciones.
Pattern: nos permite definir una expresión regular que el input deberá de validar para que el formulario pueda ser enviado.
📌 ️ — El atributo de pattern se puede utilizar sobre los campos de texto, teléfono, correo electrónico, URL, contraseña y de búsqueda.
Vamos a ver un ejemplo:
<form action="#">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" pattern="[A-ZÑa-zñ]{3,}"><br>
<input type="submit">
</form>El resultado será el siguiente:
Placerholder: hasta ahora hemos visto como indicar que un campo es requerido y como realizar una válidación desde regex con pattern. El placehoder nos permite darle una pista al usuario del texto que tiene que introducir en dicho campo el usuario.
Para ello, se introduce un texto en el campo que aunque depende del navegador usualmente estará en un color gris suave y que se mostrará hasta que el usuario haga focus (se situé sobre el campo). Un ejemplo de ello, podría ser cuando queremos que el usuario deba introducir un DNI/NIE y queremos indicarle el formato. Vamos a ver dicho ejemplo:
<form>
<label for="dni">Documento de Identidad:</label>
<input type="text" name="dni" id="dni" required placeholder="Ej. 12345678-A o X-12345678">
<button>Enviar</button></form>
El resultado será el siguiente:
📌 ️ — El atributo
placeholderse puede utilizar en sobre los elementosinputytextarea. Y suele ser un texto temporal que permanecerá allí hasta que el usuario haga focus en el campo.
Si nos fijamos, inmediatamente después de hacer clic en el input y poner el focus en dicho campo, el placeholder desaparece y el campo nos deja rellenarlo sin problema:
Readonly: es un atributo booleano que nos permite indicar que el campo es solo de lectura. Pese a ello, podremos hacer focus en el input con dicho atributo e incluso copiar su contenido. Lo que no podremos realizar es editar el valor, hasta que se cumpla una determinada condición (aunque si que podemos copiar su valor). Vamos a ver un ejemplo:
<form>
<label for="pais">País:</label>
<input type="text" name="pais" id="pais"><br>
<label for="ciudad">Ciudad:</label>
<input type="text" name="ciudad" id="ciudad" readonly
value="Introduce un país"><br>
<button>Enviar</button>
</form>El resultado será el siguiente:
Usualmente, el atributo readonly, será eliminado cuando el usuario cumpla una determinada condición (o varias). Como por ejemplo, rellenar un campo que sea necesario para poder rellenar dicho campo, marcar una casilla de verificación, etc. Una vez cumplida dicha condición, desde JavaScript podemos eliminar el atributo de readonly haciendo que el campo pueda ser editado.
📌 ️ —Pese a que se trata de un campo de solo lectura, cuando pulsemos el botón de enviar, el formulario si que enviará este campo hacía el servidor.
Disabled: Desactiva un campo, no se podrá escribir en él, ni tampoco se enviará al servidor cuando envíenos el formulario. Vamos a ver un ejemplo:
<form>
<!-- Disabled sin value -->
<label for="pais">País:</label>
<input type="text" name="pais" id="pais" disabled
value=""><br>
<!-- Disabled con value -->
<label for="ciudad">Ciudad:</label>
<input type="text" name="ciudad" id="ciudad" disabled
value="Disabled con value"><br>
<button>Enviar</button>
</form>El resultado será el siguiente:
📌 ️ — Si no lo queremos enviar un input al formulario, podemos disabled, en cambio, si queremos enviar dicho input utilizaremos el atributo readonly.
Min-Max: mediante a los atributos min y max, podemos controlar el rango de números que puede aceptar un input de tipo numérico. Ante el caso que el valor del input no cumpla alguna de las dos condiciones, mostrará una advertencia (witget). Vamos a ver un ejemplo:
<form>
<label for="edad">Edad:</label>
<input type="number" name="edad" id="edad" min="0" max="120">
<br>
<button>Enviar</button>
</form>El resultado será el siguiente:
Y tal y como hemos definido dicho campo, tenemos 3 casuísticas:
- Que el campo sea más grande que el atributo max, lo que tras enviar el formulario mostrará un mensaje con una advertencia como la siguiente:
- Que el campo sea más pequeño que el atributo min, lo que tras enviar el formulario mostrará un mensaje con una advertencia como la siguiente:
- Que el valor, este aceptado entre ambos atributos min y max. Y por lo tanto, tras enviar el formulario se envíe hacía el servidor:
📌 ️ — No es necesario trabajar con ambos atributos a la vez. Podemos trabajar solamente con uno sin problemas.
Minlength-Maxlength: de la misma forma que trabajamos con los atributos max y min en los campos numéricos, lo podemos hacer minlength y maxlength en los campos de texto. Vamos a ver un ejemplo:
<form>
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" minlength="3"
maxlength="40"><br>
<button>Enviar</button>
</form>El resultado será el siguiente:
OnInvalid: nos permite personalizar el mensaje de advertencia (witget). Para modificar el texto, además, es necesario llamar al método setCustomValidaty con this delante. Vamos a ver un ejemplo:
<form>
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" required
oninvalid="this.setCustomValidity('Escribemelo mejor que no te
escucho')"><br>
<button>Enviar</button>
</form>El resultado será el siguiente:
Autofocus: cuando tenemos varios campos dentro de un formulario, es posible que quisiéramos que por defecto cuando el formulario se cargue, haga focus, es decir, se situé sobre uno de esos campos automáticamente. Vamos a ver el código:
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" autofocus><br>
<label for="apellidos">Apellidos:</label>
<input type="text" id="apellidos" name="apellidos"><br>
<button>Enviar</button>
</form>El resultado cuando se cargue el formulario será el siguiente:
Selected: el atributo booleano selected, nos permite establecer un elemento por defecto, es decir, nos permite indicarle al navegador cual será el elemento que se visualizará en el select cuando cargemos la página. Vamos a ver un ejemplo:
<form>
<label for="coche">Selecciona un coche:</label>
<select id="coche">
<option value="mercedes">Mercedes</option>
<option value="bmv">BMV</option>
<option value="audi" selected>Audi</option>
</select>
<button>Enviar</button>
</form>El resultado será el siguiente:
Abreviaturas avanzadas con Emmet
Child (>):
Nos permite crear varios elementos anidados uno dentro de otro.
div>ul>liEl resultante será el siguiente:
<div>
<ul>
<li></li>
</ul>
</div>Sibling(+):
Nos permite crear varios elementos en el mismo nivel.
div+p+bqEl resultante será el siguiente:
<div></div>
<p></p>
<blockquote></blockquote>Climb-up: ^
Si realizamos lo siguiente:
div+div>p>span+emEl resultado será el siguiente:
<div></div>
<div>
<p>
<span></span>
<em></em>
</p>
</div>Pero si queremos subir un nivel evitando así que elemento continué anidándose el elemento que vamos a crear dentro del elemento P utilizaríamos el operador ^ y realizaríamos lo siguiente:
div+div>p>span+em^bqEl resultado será el siguiente:
<div></div>
<div>
<p>
<span></span>
<em></em>
</p>
<blockquote></blockquote>
</div>Si nos fijamos hemos sacado el elemento BLOCKQUOTE del interior del elemento P.
En cambio, si realizamos lo siguiente:
div+div>p>span+em+bqEl resultado sería el siguiente:
<div></div>
<div>
<p>
<span></span>
<em></em>
<blockquote></blockquote>
</p>
</div>Y podemos observar que el elemento BLOCKQUOTE está dentro del elemento P.
Si basándonos en el mismo ejemplo queremos sacar el elemento BLOCKQUOTE del interior del elemento podemos realizando concatenando varios ^ con la finalidad de subir varios niveles. Vamos a ver un ejemplo:
div+div>p>span+em^^bqEl resultado será el siguiente:
<div></div>
<div>
<p>
<span></span>
<em></em>
</p>
</div>
<blockquote></blockquote>Si nos fijamos, ahora si hemos sacado el BLOCKQUOTE fuera del div.
Multiplicación:*
Con el * podemos crear varios elementos a la vez. Por ejemplo, si queremos crear una lista UL con 4 LI en su interior, podemos hacer lo siguiente:
ul>li*4El resultado será el siguiente:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>Texto:{}
Para crear un elemento por ejemplo un párrafo y a la vez añadir contenido realizamos lo siguiente:
p{Mi primer párrafo}El resultante será el siguiente:
<p>Mi primer párrafo</p>Se pueden combinar varios elemento con texto en su interior. Vamos a ver un ejemplo:
p>{Haz click }+a{aquí}+{ para continuar}El resultado será el siguiente:
<p>Haz click <a href="">aquí</a> para continuar</p>Agrupamiento:()
También podemos utilizar () para crear grupos. Vamos a ver un ejemplo:
(header>nav>ul>li*2>a)+(main>h1{Titulo 1})+footer>p{Copyrith 2022}El resultado será el siguiente:
<header>
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header><main>
<h1>Titulo 1</h1>
</main><footer>
<p>Copyrith 2022</p>
</footer>
Attribute operators
ID
Para crear un elemento con el atributo ID hacemos lo siguiente:
p#firstPEl resultado será el siguiente:
<p id="firstP"></p>Si no especificamos el elemento automáticamente se creará un DIV. Vamos a ver un ejemplo:
#exampleEl resultado será el siguiente.
<div id="example"></div>CLASS
Para crear un elemento con el atributo CLASS hacemos lo siguiente:
p.articleEl resultado será el siguiente:
<p class="article"></p>Si no especificamos el elemento automáticamente se creará un DIV. Vamos a ver un ejemplo:
.exampleEl resultado será el siguiente.
<div class="example"></div>También podemos añadir más de una clase de la siguiente manera:
p.article.text-red.bg-yellowEl resultado será el siguiente:
<p class="article text-red bg-yellow"></p>Custom attributes
También podemos añadir otros atributos:
abbr[title="Hyper Text Markup Language"]{HTML}El resultado será el siguiente:
<abbr title="Hyper Text Markup Language">HTML</abbr>Si no especificamos un elemento, nuevamente nos creará un DIV. Vamos a ver un ejemplo:
[class="englishTxt" lang="en"]El resultado será el siguiente:
<div class="englishTxt" lang="en"></div>Item numbering: $
Si combinamos el operador de multiplicación * con el operador $ podemos numerar los ids, las clases o el contenido de un item. Vamos a ver un ejemplo:
ol>li#item$*4El resultado será el siguiente:
<ol>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
</ol>Si queremos añadir más dígitos ponemos un $ por cada uno de los dígitos. Vamos a ver un ejemplo:
h${Header $$}*3El resultado será el siguiente:
<h1>Header 01</h1>
<h2>Header 02</h2>
<h3>Header 03</h3>Changing numbering base and direction
Si utilizamos el $@-*4 le estamos diciendo a Emmet que invierta el orden, es decir que empiece por el primer item con item4, después item3, item2… Vamos a ver un ejemplo:
ul>li.item$@-*4El resultado será el siguiente:
<ul>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>Si quisiéramos que no empezará en el primer número y que por ejemplo empezará en el 3, haríamos lo siguiente:
ul>li.item$@2*4El resultado será el siguiente:
<li class="item4"></li><li class="item5"></li><li class="item6"></li>
Verbo HTTP GET vs Verbo HTTP POST
Anteriormente, en el bloque de Fundamentos previos al desarrollo de páginas webs ya expliquemos los verbos HTTP. En esta sección, vamos a profundizar, es decir, a hablar más a detalle sobre las diferencias entre enviar un formulario (GET y POST).
El atributo encargado de indicarle al navegador como se realizará el envío del formulario es method. Si no especificamos un valor por defecto, el envío hacía el servidor se realizará mediante a GET. Por tanto, mediante el valor que asígnanos el atributo method definimos la forma en la que se va a enviar dicho formulario hacía el servidor.
Además de un método de envío, si no capturamos el envío del formulario desde JS, y por tanto, el formulario se mandará directamente desde el HTML hacía un servidor, es necesario definir mediante a action la ruta a la enviaremos dicho formulario.
Profundizando en el método GET
Vamos a comenzar viendo un ejemplo de envío por GET:
<form action="/server.php" method="get">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" autofocus><br>
<label for="apellidos">Apellidos:</label>
<input type="text" id="apellidos" name="apellidos"><br>
<button>Enviar</button>
</form>El resultado será el siguiente:
Si nos fijamos a detalle, podemos ver que cuando realizamos el envío por GET, ante el caso que no se encuentre el formulario se recibe un “Cannot GET + URL”
Y que además, independientemente de si trabajamos con el método de envío POST o GET, es muy importante que los elementos que vayamos a mandar hacía el servidor siempre tengan el atributo name, ya que sino, al no tener un nombre especificado no se podrán mandar hacía el servidor, porque este no sería capaz de identificar ante que input .
Si por ejemplo realizo una petición de envío del formulario con los siguientes datos:
Podemos ver que la URL con GET muestra dichos datos en la pantalla
En el caso al realizarse un envío mediante al método GET, podemos ver que cuando enviamos el formulario, se utiliza la ruta que hemos mandado en el action junto a un ?. Y, posteriormente, el nombre definido como valor en el atributo name seguido del valor enviado. En el caso que tengamos más de un input en el form, los elementos son concatenados a través del atributo &.
Vamos a ver el analizar el funcionamiento de GET de una forma más visual:
Este tipo de envío por tanto, se realiza mediante a la barra de navegación y el principal problema de estos tipos de envíos es que la información es visible desde el navegador. Por lo que su seguridad es menor que cuando realizamos el envío por POST.
📌 ️ — Cada vez que hacemos una petición a una URL de Google u otra página desde la URL, estamos utilizando el método GET.
Si por ejemplo, quitáramos el atributo name podemos ver que:
<form action="/server.php" method="get">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="" autofocus><br>
<label for="apellidos">Apellidos:</label>
<input type="text" id="apellidos" name=""><br>
<button>Enviar</button>
</form>Podemos ver que cuando envíamos el formulario:
No se envía nada. Y, por tanto, tampoco se recibirán en el servidor:
Profundizando en el método POST
El envío de un formulario mediante al método POST, sería por la parte de atrás, es decir, no puede ser visualizado directamente desde el navegador (a excepción de que abramos el inspector).
Vamos a ver un ejemplo de envío por POST:
<form action="/server.php" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" autofocus><br>
<label for="apellidos">Apellidos:</label>
<input type="text" id="apellidos" name="apellidos"><br>
<button>Enviar</button>
</form>Ante el caso que realicemos una petición mediante el método POST y no seamos capaces de comunicarnos con el servidor, podemos ver que el tipo de mensaje que aparece cambia completamente por: “Está pagina no funciona…” el cual, además, irá acompañada del código de error (status code). En este caso, HTTP ERROR 405 ya que no es capaz de comunicarse con el servidor. Vamos a verlo:
Pese a no haber podido comunicarse con el servidor, si nos fijamos en la URL es literalmente la definida en el action. Por lo que los datos no pueden verse en la barra de direccionamiento con este tipo de envíos:
Para realizar la visualización de los datos que enviamos mediante al método POST, vamos al inspector y abrimos Network, y finalmente nos situamos en Payload. Es necesario tener abierto el inspector previamente antes de realizar la petición para poder capturarla y que se muestre en la pestaña de Network. Vamos a ver un ejemplo:
Contenido embebido/incrustado
El contenido incrustado o embebido, es todo aquel contenido que se añade a nuestro documento HTML. Por tanto, todo lo que no está dentro de nuestro documento HTML. Ya sean imágenes, videos, documentos PDF, archivos de Word…
Por ejemplo, si abrimos el inspector del browser y nos metemos en la web de Google, buscamos “Pulp fiction” podemos ver algunos de los ficheros embebidos a nuestro documento como GIFs u otro tipo de imágenes:
Pese a que estos ficheros no están dentro del HTML, sino que vienen de una fuente externa, si que están llamados desde el HTML para poder introducirlos dentro de nuestro documento.
Si nos metemos en el aparatado de imágenes, por ejemplo, podemos marcar la pestaña de IMG para ver las imágenes que Google ha embebido en dicha página. E inclusive las podemos ordenar en función del tamaño que ocupa cada una de las imágenes:
Los elementos embebidos suelen ser lo que más peso le otorga a una web. Ya que sino, las webs serían prácticamente texto con un poquito de formato y su tamaño se reduciría en gran medida, pero su estética sería mucho menos atractiva para el usuario que visita la página.
Los principales elementos que son incrustados dentro de las webs son: Imágenes, audio, vídeo…
Existe un tipo de elemento que se podría considerarse que está en tierra de nadie a medio camino entre los elementos embebidos es el elemento iframe. Iframe, nos permite crear una especie de contenedor/marco dentro del documento en el que incrustar otra página HTML.
Imágenes:
Suelen ser el elemento embebido más utilizado y el que más problema suele dar.
Las imágenes las podemos subdividir principalmente en dos categorías:
Imágenes vectoriales (Vector graphics): su uso es recomendado siempre y que sea posible.
📌 ️ — Las imágenes vectoriales tienen como extensión .svg que son las iniciales de Scalable Vector Graphics
El principal beneficio de las imágenes vectoriales respecto a las imágenes de mapas de bits es que cuando hacemos zoom en la imagen, el vector al utilizar formulas matemáticas para representar el contenido no se pixela. En cambio, si hacemos zoom en una imagen de tipo el bitmap podemos observar que se empieza a presentar los cuadraditos (pixeles) y que se genera lo que conoce como “dientes de hoja de sierra” o también conocido como “escalera de pixeles”.
📌 ️ —En los bitmap, cuanto peor sea la calidad de la imagen, mayor será distorsión cuando se hace zoom/expande. Esto pasa inclusive hasta en las imágenes con mayor calidad aunque en menor proporción. En cambio, cuando una imagen vectorial se expande, las formas se agrandan proporcionalmente evitando así que se pixele la imagen.
Otro de los beneficios de los vectores es que estás etiquetas es que se puede crear/editar. Además, al dibujarse mediante a coordenadas matemáticas, si la imagen es sencilla reduce en gran medida el peso de dicha img. Por tanto, en las situaciones que acabamos de comentar, los archivos SVG pesan poco, y también destacan por soportan estilos CSS.
📌 ️ — Normalmente las imágenes vectoriales se suelen abrir desde el browser
¿Por qué no se pixelan los vectores?
Al basarse en coordenadas matemáticas que definen su posición, forma, color y otros atributos. Estás imágenes se componen de vectores, que son unas figuras geométricas que pueden ser puntos, líneas, polígonos o segmentos.
Las imágenes vectoriales se basan en una serie de coordenadas matemáticas que definen su posición, forma, color y otros atributos. Estas imágenes se componen de vectores, que son unas figuras geométricas que pueden ser puntos, líneas, polígonos o segmentos. Por ejemplo, un rectángulo está definido por dos puntos, el círculo por un centro y un radio, mientras que una curva por varios puntos y una ecuación.
Cuando realizamos zoom en una pagina web con una imagen el navegador vuelve a calcular las coordenadas matemáticas adaptando la imagen vectorial y, por tanto, visualizándose correctamente.
¿Cuándo es recomendable utilizar un vector?
Cuando trabajamos con imágenes poco pesadas como logotipos, iconos o imágenes que no tengan muchos detalles lo recomendable es utilizar imágenes vectoriales.
Un ejemplo en el que si que podríamos vectorizar una imagen es el siguiente:
En cambio, no es recomendable trabajar con imágenes vectoriales cuando trabajamos con imágenes complejas como la siguiente:
Transformando una imagen de tipo bitmap a vectorial
Esta imagen de bitmap con extensión JPG:
Si hacemos zoom en la imagen podemos ver que se empieza a difuminar.
Si la transformamos a un vector, con algún conversor como por ejemplo Vectormagic, aunque es de pago aunque es la mejor herramienta actualmente.
Aunque existen otras gratuitas como por ejemplo Vectorizer que también nos permiten hacer lo mismo:
Podemos ver que si hacemos zoom en la imagen la que es un vector en formato SVG se continua viendo nítida. En cambio, la otra se empieza a difuminar
Si comparamos el tamaño podemos observar que el tamaño, en este caso, podemos observar que no aumenta prácticamente para el beneficio de calidad que nos supone:
📌 ️ — Para transformar una imagen de bitmap a vector, siempre será recomendado el utilizar una imagen de bitmap con una alta calidad, ya que a mayor calidad, mejor será el resultado que obtendremos de la transformación de bitmap a vector.
Cargando una imagen SVG en un HTML
Para cargar una imagen de tipo vectorial con formato SVG en la web tenemos dos opciones:
- Asociar el SVG con el elemento img:
<img src="/assets/img/lady_result.svg" alt="Lady">El resultado será el siguiente:
🚨Esta manera de trabajar con imágenes vectorizadas se utiliza principalmente en situaciones en las que solamente queremos mostrar una imagen pero no tenemos intenciones de realizar modificaciones del SVG desde CSS/JS. Ya que el HTML quedará mucho más limpio.
2. La segunda opción es realizar clic la imagen vectorial desde VSC y posteriormente pegar dicho código dentro de nuestro HTML:
El resultado será el mismo que el que hemos obtenido anteriormente:
🚨Esta manera de trabajar con imágenes vectorizadas se utiliza principalmente en situaciones en las que además de mostrar una imagen, tenemos intenciones de realizar modificaciones del SVG desde CSS/JS.
📌 ️ — El atributo SRC en una imagen nos sirve para indicar la ruta en la que se encuentra dicha imagen.
El atributo ALT es el atributo que utilizan los motores de búsqueda la utiliza para identificar el contenido de la imagen. Por lo que, el uso de el atributo ALT puede ayudar a posicionar una web en los buscadores, es decir, al SEO de la página. Además, también es utilizado para los usuario con discapacidad visual que utilizan programas de lectura.
🚨Habitualmente el atributo ALT suele contener un texto que represente lo que la imagen quiere representar o lo que queremos transmitir dentro de dicha imagen.🚨
El atributo ALT es obligatorio ya que así lo definió el W3C en el estándar de HTML. Pese a ello, si no lo definimos nuestras webs continuarán funcionando sin problemas. Aunque si validamos dicho documento mediante al validador que nos ofrece la W3C podemos ver que si no tiene dicho atributo la web no puede ser validada correctamente. Vamos a ver un ejemplo:
📌 ️ — En caso de que la ruta de la imagen no pueda ser cargada, (ya sea porque se ha eliminado la imagen, el servidor esté caído, etc.) se mostrará una especie de icono con una imagen “roat” que indica que la imagen no puede ser cargada junto al texto introducido en el atributo alt.
Imágenes rasterizadas o mapa de bits (Bitmap image): se recomienda su uso cuando no no sea posible utilizar las imágenes vectoriales. Las situaciones en las que se suelen utilizar este tipos de imágenes suelen ser en las que no se puede utilizar
📌 ️ — Las imágenes de mapas de bits también son conocidas como imágenes ráster: son imágenes pixeladas, es decir que están formadas por un conjunto de puntos (píxeles) contenidos en una tabla.
📌 ️ — Un Píxel por tanto, será un punto que componen nuestra imagen. Por tanto, un mapa de bits está formado por una sucesión de pixeles. Cuanto mayor resolución tenga una imagen mayor será la cantidad de pixeles que tendrá lo que supone que podremos hacer más zoom sin que se notén los pixeles.
Este tipo de imagen suelen tener formatos como:
- JPG → se utiliza cuando queremos comprimir el tamaño de la imagen y no necesitamos utilizar realizar transparencias ni animaciones. Vamos a ver un ejemplo de un uso de un JPG:
<img src="/assets/img/interstellar.jpeg" alt="Matt Damon en el espacio">
📌 ️ — JPG = Joint Photographic Experts Group
- PNG → se utilizan cuando necesitamos trabajar con transparencias. Habitualmente, estas transparencias suelen ser el fondo de la imagen. Vamos a ver un ejemplo:
Para poder quitar el background de una imagen podemos utilizar aplicaciones como remove.bg la cual hará el trabajo “sucio” por nosotros.
Si nos fijamos, ahora cuando abrimos la imagen que acabamos de descargar podemos observar que el background de la imagen es transparente:
Y finalmente, añadimos dicho PNG a nuestro documento de la siguiente manera:
<img src="/assets/img/interstellar.png" alt="Maty Damon en el espacio">El resultado será el siguiente:
📌 ️ — PNG = Portable Network Graphics
- GIF → se utilizan cuando necesitamos realizar animaciones.
Existe una plataforma que está muy bien para conseguir fichero GIF llamada Giphy. Vamos a ver un ejemplo de como cargar un GIF dentro de un HTML:
<img src="/assets/img/giphy.gif" alt="Celebración noturna">El resultado será el siguiente:
📌 ️ — GIF = Graphics Interchange Format
- WEBP → creado por Google soporta animaciones, transparencias.
Y por si todo esto fuera poco, además, comprime las imágenes de una forma superior a lo que lo hace JPG.
Tal y como podemos ver en la siguiente web usualmente las imágenes WEBP son un 30% más pequeñas que las JPG:
¿Por qué trabajar con WEBP siempre que sea posible?
El trabajar con imágenes optimizadas para que pesen poco en la web es muy importante ya que si una imagen es muy pesada el proceso de carga de la web más lento y esto afecta al posicionamiento de nuestra web en los buscadores, en la experiencia de usuario, en necesitar un mayor alojamiento en el servidor, etc.
Por ello, siempre que trabajemos con mapas de bits es altamente recomendable el uso del format WEBP. Por tanto, si tenemos una imagen de otro tipo GIF, JPG o PNG lo más recomendable es utilizar un conversor para transformarla a WEBP.
Transformando un bitmap (PNG, JPG, GIF…) a WEBP
Para transformar una imagen en otro formato de bitmap a WEBP vamos a utilizar alguna de las muchas webs gratuitas como por ejemplo: imagen.onlinve-convert.com o aconvert.com
Si nos fijamos, en este caso, hemos conseguido reducir el tamaño de la imagen ¡Casi un 20 %!
El principal problema que presentan este tipo de imágenes es que no son soportadas por algunas versiones antiguas de algunos navegadores:
Aunque, principalmente tenemos el problema con versiones muy muy antiguas o con Internet Explorer. Pero hace poco Microsoft lanzó un comunicado en el informaban que finalmente el 15 de junio de 2022 se retirará del mercado por lo que ¡Muchas gracias Bill Gates!
Realizando nuestro primer fallback
Aunque existe una solución conocida como fallback que nos permite utilizar este tipo de formatos solamente cuando no se produzca un error y en caso contrario utilizar otra imagen en otro formato como JPG, PNG, GIF…
Vamos a ver como realizar esto ya que nos puede ser útil en múltiples situaciones no solo en esa sino cuando no se carga una imagen:
<img src="/assets/img/lady_result.svg" alt="Lady"
onerror="this.src='/assets/img/html5.png'">Aunque es difícil testearlo ya que Microsoft no al dejar de mantener Internet Explorer no quiere que lo descargué en mi computadora con Windows 11.
Pero podemos poner una ruta que no exista en la primera URL y así cargar la ruta de la 2ª img vamos a ver un ejemplo:
<img src="/ruta/quenoexiste/imgnoexistente.svg" alt="Lady" onerror="this.src='/assets/img/image-not-found.jpg'">El resultado cuando no encuentre la ruta de la imagen será la ruta que le hemos definido en onerror. Vamos a verlo:
En cambio, si ponemos una ruta hacía la imagen directamente y tampoco hay ningún problema de compatibilidad, podemos ver que se ejecutará la imagen que tenemos asociada al atributo SRC y no la del atributo onerror:
<img src="/assets/img/lady_result.svg" alt="Lady"
onerror="this.src='/assets/img/image-not-found.jpg'">Al poner una ruta correcta y el navegador ser compatible con las imágenes SVG podemos ver que se abre correctamente:
Creación de formas primitivas de vectores mediante al elemento SVG
Vamos a ver un ejemplo de como escribir algunas formas básicas con SVG. Los gráficos de vectores, utilizan XML para realizar formas. Vamos a ver como
Para escribir un SVG, utilizamos el elemento SVG para indicarle al browser lo que queremos realizar:
<svg>
<!-- Mi SVG -->
</svg>Usualmente además dentro del elemento SVG añadimos los valores witdh y height mediante a los cuales definimos el ancho y el alto que ocupará dicho elemento:
<svg width="100" height="100">
<!-- Mi SVG -->
</svg>
Aunque si no definimos un alto y un largo de nuestro elemento SVG, este se adaptará a lo que metamos en su interior. En el caso en el que definamos un width y un height, si el elemento dibujado en el interior del SVG es mayor que las dimensiones del elemento SVG el elemento de su interior será cortado.
Dentro de los vectores podemos utilizar distintas figuras para realizar nuestros diseños. Vamos a ver algunas bastante primitivas:
Circle: Para crear un circulo o un punto ya que ambos son un circulo realizamos lo siguiente:
<svg width="100" height="100">
<circle cx="50" cy="50" r="10" fill="black"/>
</svg>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="4"
fill="yellow" />
</svg>
Line: nos permite representar una línea. Los gráficos realizados con el elemento SVG utilizan 3 ejes de coordenadas: X, Y y Z.
Vamos a ver un ejemplo trabajando solamente con las coordenadas X:
<svg width="100" height="100">
<line x1="0"x2="200" style="stroke:black;stroke-width:1"/>
</svg>
Si queremos podemos trabajar con varios ejes:
<svg width="100" height="100">
<line x1="0" y1="0" x2="200" y2="500"
style="stroke:black;stroke-width:1"/>
</svg>
Rect: nos permite representar una rectángulo. Vamos a ver un ejemplo:
<svg width="200" height="100">
<rect width="200" height="100" style="fill:chocolate;stroke-
width:10;stroke:black;" />
</svg>El resultado será el siguiente:
Rect con los lados redondeados: también podemos redondear los lados de un rectángulo de la siguiente manera:
<svg>
<rect x="50" y="20" rx="20" ry="20" width="150" height="100"
style="fill:chocolate;stroke:darkseagreen;
stroke-width:5;opacity:0.5" />
</svg>El resultado será el siguiente:
Star: nos permite crear una estrella. Vamos a ver un ejemplo:
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:darkgoldenrod;stroke:black;stroke-width:5;
fill-rule:evenodd;" />
</svg>El resultado será el siguiente:
Metadatos con el elemento meta
Cuando creemos la estructura con Emmet, automáticamente nos añadió algunas etiquetas de metadatos. Vamos a explicarlas más a detalle:
El elemento <meta> (abreviatura de metadatos) nos permite definir metadatos que afectaran a un documento HTML. Los metadatos, no son nada más y nada menos, que un conjunto de datos (información) sobre datos.
📌 ️ — Aunque los metadatos no se mostrarán en la página, pero si que son analizables por el navegador.
Todas las etiquetas meta empiezan con la palabra meta acompañada de un nombre que nos permite indicarle al navegador sobre que tipo de metadato estamos trabajando.
Algunos usos de los metadatos en navegadores se utilizan para: definir el nivel de zoom que se debe utilizar en el documento, recargar una página, proporcionar una serie de palabras claves para posicionar nuestra web en buscadores, es decir, hacer SEO en los motores de búsqueda, etc.
<meta charset=”UTF-8">
Para entender esta etiqueta primeramente es necesario hablar de la codificación de caracteres.
La información que se introduce en un ordenador, ya sean números, textos o imágenes, se almacena en lenguaje binario, es decir, como unos y ceros (01000101).
El código ASCII (American Standard Code for Information Interchange) se desarrolló para poder establecer un formato estandarizado en el que se pudieran almacenar estos caracteres alfanuméricos. Y es el código estándar estadounidense para el intercambio de información.
Si visitamos a la siguiente web podemos ver una tabla con que muestra los distintos valores/códigos que pertenecen a ASCII. Si nos fijamos, los valores van del 0 al 127:
El estándar ASCII define diversos caracteres en siete bits, es decir, siete posiciones que muestran 0 o 1. El octavo bit, que pertenece a un byte completo, se utiliza normalmente para los análisis.
Por lo que si elevamos 2⁷, podemos ver que el resultado es 128:
Posteriormente a ASCII se añadió el ASCII extendido utilizando un octavo bit:
Por lo que tenemos en total 128x2 = 256 posibilidades.
📌 ️ — Aunque en informática el primer valor siempre empieza en el 0. Por ello, el primer valor es 0 y el último 255 (formando pues los 256 valores en total).
Si nos fijamos, además, podemos observar que los caracteres están clasificados en categorías y son:
- Caracteres de control (0–31 & 127)
- Caracteres especiales (32–47 / 58–64 / 91–96 / 123–126)
- Números (30–39)
- Letras (65–90 / 97–122)
Si queremos mostrar algunos de estos caracteres, y tenemos un teclado que integra la parte numérica aparte de la alfanumérica.
Primeramente, tendremos que pulsar sobre la tecla Num Lock y mirar si tenemos activado el teclado numérico.
Y, posteriormente, tendremos que pulsar ALT (y sin soltarlo) pulsar el número correspondiente al carácter ASCII. Por ejemplo, si quiero mostrar el símbolo de @, tendríamos que pulsar la tecla ALT y posteriormente (y sin soltar la tecla ALT) pulsar sobre 64 (desde la parte del teclado numérico del teclado).
📌 ️ — Si por H o por B esto no nos funciona, posiblemente, es que estamos trabajando sobre un portátil o que no tenemos el driver del teclado instalado correctamente.
Realmente estos números como el 64 que corresponde a la @ realmente se transfieren/envían al dispositivo en base binaria (es decir en una combinación de ceros y unos) ya que la máquina no es capaz de entender otra cosa.
Realmente estos dígitos provienen de la combinación de 0 y 1 (sistema binario). Ya que un ordenador solamente es capaz de entender código binario (base 2). Si nos fijamos el 64 de la @ realmente es 0100 0000:
Si utilizamos un conversor de binario a ASCII, podemos ver que realmente este número sale del binario:
Si queréis podéis verificar los siguientes números también:
Ejercicio 03📋: a partir de la calculadora convierte estos números binarios a enteros y mira en la tabla ASCII a que caracteres corresponden estás palabras:
- 01100010 01101001 01101110 01100001 01110010 01111001
- 01101000 01110100 01101101 01101100
- 01101000 01101111 01101100 01100001
Ejercicio 04📋: Verifica que has realizado correctamente la conversión de caracteres transformando el binario a ASCII desde la siguiente web.
📌 ️ — ASCII fue el primer conjunto de caracteres (estándar de codificación) utilizado entre computadoras en Internet. Por tanto, todos los conjuntos de caracteres utilizados en las computadoras, en HTML y en el resto de Internet, están basados en ASCII.
El principal problema que tiene ASCII, es que solo puede almacenar 256 caracteres y que está basado en el alfabeto europeo. Por lo tanto, no era capaz de almacenar todos los caracteres para poder realizar comunicaciones a nivel internacional. Y no contenían caracteres árabes, japoneses, etc.
Para solucionar esto y basado en ASCII nace UNICODE. Unicode se puede implementar mediante diferentes codificaciones de caracteres. El estándar Unicode define los formatos de transformación Unicode (UTF): UTF-8, UTF-16 y UTF-32.
Unicode está destinado a abordar la necesidad de una codificación de texto mundial confiable y viable. Unicode podría describirse aproximadamente como “ASCII de cuerpo ancho” que se ha ampliado a 16 bits para abarcar los caracteres de todos los idiomas vivos del mundo. En un diseño diseñado adecuadamente, 16 bits por carácter son más que suficientes para este propósito.
Si abrimos el mapa de caracteres de Windows:
Podemos ver que encontramos caracteres que no estaban disponibles en ASCII.
De hecho, con el código que nos pone debajo, podemos de la misma forma que con los caracteres ASCII (ALT + 0769 en este caso) escribir caracteres.
📌 ️ — ISO-8859–1 es la codificación predeterminada en HTML 4.01 y UTF-8 la predeterminada en HTML5, ambas se basan en ASCII.
Si trabajamos sobre un documento de HTML 5, es decir si incluimos el <!DOCTYPE html>en la parte superior de su archivo HTML, la codificación por defecto si no se especifica nada es UTF-8, a excepción de que se indique lo contrario. No obstante, es el navegador el que finalmente decide la codificación a utilizar. Para evitar un visionado incorrecto en algunos navegadores o navegadores mal configurados, es recomendable continuar incluyendo siempre la etiqueta meta charset en la primera línea del head.
Windows-1252 vs ISO-8859
Posteriormente a ASCII y mientras se trabajaba en el futuro ANSI mediante a un borrador mientras tanto Windows interpretó dicho borrador y diseñó un código para cubrir dichas necesidades de evolución, el conocido como sistema de codificación Windows 1252 (o latin-1).
El diseño de Windows 1252 es una referencia al borrador ANSI (ANSI Draft).
Más tarde, el borrador de ANSI se convirtió en un estándar internacional formal: ISO 8859–1
Es decir, Windows 1252 se diseñó antes de que se convirtiera en el estándar oficial ISO 8859–1, por lo que es fácil comprender que Windows 1252 e ISO 8859–1 no son exactamente equivalentes, aunque sí muy similares. Ya que sólo se diferencian en 32 caracteres.
📌 ️ — HTML5 admite: UTF-8, UTF-16, Windows-1252 e ISO-8859. Aunque la especificación de HTML5 nos recomienda encarecidamente utilizar el conjunto de caracteres UTF-8, ya que cubre casi todos los caracteres y símbolos del mundo. Ocupando un tamaño menor que documentos de HTML5 que trabaja con la codificación UTF-16.
Diferencias entre UTF-8, UTF-16, Windows-1252 e ISO-8859
- UTF-8: es variable de 1 a 4 bytes.
- UTF-16: es variable de 2 o 4 bytes.
UTF-8 vs UTF-16
1. Ambos sistemas de codificación (UTF-8 y UTF-16) se utilizan para codificar caracteres.
2. UTF-8 utiliza un como mínimo 1 y como máximo 4 bytes para codificar los caracteres, mientras que UTF-16 utiliza como mínimo 2 y como máximo 2. Por lo que los ficheros que trabajan con la codificación UTF-16, en principio son más grandes que los que trabajan con UTF-8.
3. Un archivo codificado en UTF-8 tiende a ser más pequeño que un archivo codificado en UTF-16. Ya que los ficheros que trabajan con codificación UTF-16, en principio son más grandes
4. UTF-8 es compatible con ASCII mientras que UTF-16 es incompatible con ASCII
5. UTF-8 está orientado a bytes, mientras que UTF-16 no está
6. UTF-8 es mejor en la recuperación de errores en comparación con UTF-16
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
Dependiendo de los navegadores de Microsoft sobre los que queramos tener compatibilidad, es posible que no necesitemos utilizar la etiqueta de meta que nos permite que los navegadores Internet Explorer (IE) en sus versiones 8 y 9 (, le recomendaría usar la etiqueta. Si solo es compatible con los navegadores más recientes (IE11 y / o Edge), consideraría descartar esta etiqueta por completo.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
En sus orígenes la web tal y como vimos durante la explicación de la historia de la WWW, la web, solamente era accesible desde los navegadores de los ordenadores.
Con el paso del tiempo, empezaron a salir al mercado nuevos dispositivos con distintas resoluciones como: móviles, tablets, etc. Y, por tanto, surgió la necesidad de acceder a la web desde dichos dispositivos.
Por lo que, la web tubo que evolucionar a multi-dispositivo ya que tendría que ser accesible desde mobile, desktop, tablets… Y, a “responsive design”, es decir, que tiene un diseño web adaptable o diseño web flexible.
Es importante conocer esta situación. Ya que nos va a condicionar en la manera en la que desarrollamos nuestras Webs.
La etiqueta viewport es muy importante ya que nos permite preparar nuestro layout (diseño) HTML para que sea adaptable. Por tanto, proporciona al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página.
Para ello, deberemos incluir dentro del <head> un metatag «viewport» para adaptar la web a las diferentes resoluciones de los dispositivos móviles/tablet.
¿Qué es el viewport?
Dentro de un navegador web, el viewport, es la dimensión que ocupa nuestro navegador excluyendo la interfaz de usuariro, la barra de menú, etc.
Por tanto, es la zona donde se sitúan nuestro documento HTML cuando los estamos visualizando.
<meta name="viewport">Con ello, estamos seleccionando el viewport del navegador.
Además de ello, deberíamos añadir cual es la anchura que queremos que tenga el navegador, en este caso, <meta name="viewport">
<meta name="viewport" content="width=device-width"> establece el ancho del viewport (parte en la que se sitúa la web dentro del navegador) será el ancho correspondiente a la pantalla del dispositivo (esta anchura variará en función del tamaño de la pantalla del dispositivo).
Por tanto, con content="width=device-width" le indicamos al navegador, que inicialmente fuerce el ancho de la web al ancho correspondiente a la pantalla (device screen) del dispositivo.
Pero si quisiéramos, podríamos definir otro valor lo podríamos hacer de hecho, vamos a ver un ejemplo basándonos en el siguiente documento HTML 5:
Vamos a activar la vista mobile y vamos a cambiar el width a otros valores fijos para ver cómo reacciona nuestro documento.
📌 ️ — Los valores fijos pueden ir con el valor solamente o acompañados del valor y px (de pixel)
De hecho, si ponemos el mismo valor que se está pasando actualmente vía metadatos:
Podemos ver que se visualiza igual:
Y que por tanto, solamente cambia cuando podemos valores superiores o inferiores al actual.
También podemos ver la resolución que tenemos desde:
Finalmente, añadiendo la coletilla, initial-scale=1.0 es decir dejando la etiqueta de metadatos de la siguiente manera: <meta name="viewport" content="width=device-width, initial-scale=1.0"> le decimos al browser que la escala inicial es decir, el nivel de zoom cuando el navegador carga la página por primera vez sea 1.0 (equivale a 1).
Los valores válidos para initial-scale deben de estar entre 0.1–5.0 lo que significa el nivel de escala inicial (zoom).
Vamos a ver como modificar los valores sobre basándonos en el siguiente ejemplo:
Y realizaremos lo siguiente:
<meta name=“description” content=“Texto que aparecerá en el buscador”>
Cuando realizamos una búsqueda en Google, podemos ver que Google nos proporciona una serie de enlaces acompañados una descripción.
De hecho, si nos metemos en la web, podemos ver que tenemos la etiqueta meta decription con dicho texto:
Si no especificamos una descripción en nuestra web, los buscadores nos asignarán una automáticamente. Aunque lo recomendable es definir dicho metadato para personalizar el texto que aparecerá en los buscadores como Google.
Vamos a ver un ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<meta name="description" content="A la hora de escribir una meta
descripción, manténla entre 140 y 160 caracteres para que Google
pueda mostrar tu mensaje completo. ¡No olvides incluir tu
palabra clave!">
</head><body>
<h1>Mi HTML</h1>
</body>
</html>
Aunque el resultado no lo podremos observar hasta que no subamos la web a los buscadores.
Existe la posibilidad de utilizar otros metadatos. En estos casos, vais a investigar vosotros mismos con realizar las tareas.
Enlaces de apoyo para realizar los ejercicios:
Ejercicio 05📋: Investiga sobre como redireccionar (ir a otra web) mediante al a etiqueta meta después de 5 segundos. Y posteriormente, crea web con el nombre de ejercicio05.html que contenga la estructura básica de un HTML 5. Además, dentro del body, introduce un elemento H1 que tenga como contenido “Mi primera redirección”.
💥Finalmente, crea un repositorio llamado HTML-Tags y sube el fichero a dicho repositorio.💥
Ejercicio 06📋: Investiga sobre cómo evitar que la “araña” de Google indexe una web en Google mediante al a etiqueta meta. Y posteriormente, crea una web con el nombre de ejercicio06.html que contenga la estructura básica de un HTML 5. Además, dentro del body, introduce un elemento H1 que tenga como contenido “Mi primera web no indexada”.
💥Finalmente, sube el fichero al repositorio HTML-Tags💥
Además de ello, y aunque hablaremos más detenidamente de los atributos más abajo, si nos fijamos tenemos el atributo lang dentro de la etiqueta HTML podemos observar que está utilizando como lenguaje EN (de ENglish).
Este atributo de la etiqueta, nos permite definir el del lenguaje del elemento (en este caso del documento HTML).
Si nos ponemos encima, podemos ver el link que nos lleva a una documentación y podemos buscar Spanish, en nuestro caso será el que utilicemos en nuestros documentos HTML:
📌 ️ — El utilizar el lenguaje correcto de nuestra web es muy importante, ya que es un metadato importante que utiliza Google para posicionar nuestra web en una determinada búsqueda en función del idioma que se defina en este atributo.
Ejercicio 07📋: Investiga sobre cómo modificar el idioma de una web al francés. Y posteriormente, crea una web con el nombre de ejercicio07.html que contenga la estructura básica de un HTML 5. Además, dentro del body, introduce un elemento H1 que tenga como contenido “Mon premier site web en français”.
💥Finalmente, sube el fichero al repositorio HTML-Tags💥
Device Pixel Ratio
Para entender que es el DPR (Device Pixel Ratio) es necesario empezar hablando de distintos conceptos.
Un pixel ya no es igual a un pixel, ya que desde que se crearon pantallas de alta densidad, esto cambió.
La culpable y a su vez la pionera de ello, fue Apple cuando creó una pantalla Retina, en la que dividía el concepto de pixeles de hardware y pixeles de software.
Ya que posiblemente en gran parte os puede desconcertar ver que un Iphone 13 tiene una mayor resolución en un dispositivo mobile que muchos de nuestros ordenadores.
PPI (Pixels Per Inch o Pixeles Por pulgada)
A partir de entonces cada fabricante en cada dispositivo que utiliza dicha tecnología debía de determinar cuantos píxeles CSS (de software) que contenía un píxel de hardware. Por ejemplo en sus inicios, en las pantallas de retina de Apple, un solo píxel de CSS contenía cuatro píxeles de hardware (2 píxeles de ancho y 2 píxeles de alto), lo que significa que la proporción de píxeles del dispositivo es 2.
En esta imagen, vemos que un Pixel de CSS en una pantalla estándar contiene 4 pixeles de hardware. En cambio, en la pantalla Retina (Apple) un píxel contiene 16 pixeles de hardware.
Por tanto, ahora un pixel CSS podría ser cuatro, ocho… ¡O incluso más píxeles de hardware!
📌 ️ — Lo que hizo Apple por decirlo así es hacer una especie de subdivisión de un píxel (lógicos) en varios píxeles (físicos).
Vamos a verlo:
Debido a la división de pixeles de hardware y de pixeles de software (también conocidos como pixeles CSS o como o píxeles independientes del dispositivo) un desarrollador web no puede basarse en la resolución de la pantalla de un dispositivo (es decir, los pixeles de hardware) para saber qué tan ancha debe ser una página. Sino que debe utilizar los píxeles CSS:
Un píxel CSS, está diseñado para ser más o menos equivalente en todos los dispositivos. Si carga el mismo sitio web en dispositivos uno al lado del otro con dimensiones físicas similares, pero diferentes proporciones de píxeles, el sitio web parecerá tener aproximadamente el mismo tamaño visual.
📌 ️ — La representación de un Pixel CSS es manejada automáticamente por el navegador; no necesitamos hacer nada para realizar dicha función.
Entonces, ¿Qué beneficios tienen los píxeles CSS? Si los píxeles de CSS realmente no han cambiado en absoluto, ¿Cuál es el beneficio de las densidades de píxeles más altas? Algunos de los beneficios son: Texto e Iconos más nítidos o imágenes de alta resolución. Ya que si trabajamos con uno o varios píxeles de CSS, esto se “traducirá” (es decir, se renderizará) automáticamente por el browser transformándose a bastantes píxeles más de hardware. Por ejemplo una fuente de 14 px ocupará 14 píxeles CSS pero en función de la pantalla, se renderizará a 28/56/112 px de hardware en función de la proporción de píxeles del dispositivo.
📌 ️ — Un píxel de software, también llamado píxel CSS en el mundo web, es una unidad de medida.
¿De que depende la densidad de pixeles?
La densidad de píxeles depende de dos factores:
- La resolución
- El tamaño de la pantalla
Y nos permite conocer la cantidad de pixeles que es capaz de mostrar un smartphone en una pulgada.
📌 ️ —Un pixel, no es nada más y nada menos que un puntito, muy diminuto en el que puede emitirse una luz de un solo color.
Cuando por ejemplo tenemos una imagen con una resolución de 12 MP, esto quiere decir que está compuesta por 12 millones de píxeles, es decir, 12 millones de puntitos. Cuanto mayor sea la cantidad de píxeles (o puntitos), mejor calidad tendrá la imagen.
📌 ️ — El ojo humano no es capaz de apreciar diferencias más allá de los 300 ó 350 pixeles por pulgada.
Dentro de las densidades tenemos varios tipos:
Si tenemos dos smartphones con la misma resolución de pantalla pero tamaños distintos cuanta mayor sea la densidad de píxeles PPI mayor nitidez tendrá dicho terminal respecto a otro con una densidad de píxeles menor. Esto se nota mucho cuando visualizamos dos dispositivos con un mismo tamaño pero uno es de gama baja y el otro de gama alta.
Por tanto, y en resumidas cuentas, la densidad de píxeles es un dato calculado en función de la resolución y el tamaño de la pantalla que nos permite conocer el número de pixeles que es capaz de mostrar un smartphone en una pulgada.
Podríamos comparar el valor del DPR con un ✏️lápiz✏️, cuanto más alto sea el valor más fina será su punta. Pero eso no significa necesariamente que vayamos a hacer la letra más pequeña.
DPR = Device Pixel Ratio o Proporción de píxeles del dispositivo (DPR)
EL DPR representa la relación entre pixeles físicos (es decir de nuestro los de nuestro dispositivo) y los pixeles que tenemos disponible en nuestro viewport para poder utilizar con nuestros elementos. Esta relación es muy importante cuando se quiere adaptar una web a un dispositivo móvil y de ahí que pongamos la etiqueta <meta name=”viewport” content=”width=device-width, initial-scale=1.0"> en nuestros documentos. Ya que es la encargada de ayudarnos a controlar esto inicialmente.
Presentando la formula del DPR
La formular para calcular el DPR es la siguiente:
DPR= píxeles físicos / píxeles lógico
Obteniendo el DPR desde la consola del browser
Y si abrimos las Devs Tools del browser, podemos ver que el DPR actual del navegador. Para ello, vamos a la consola y escribimos devicePixelRatio lo que nos retornará el DPR actual del browser:
🚨Es muy importante para poder continuar con el calculo del DPR de forma manual el no hacer zoom (ya sea ampliar o reducir). Ya que, si modificamos el el DPR cambiaría. 🚨
Obteniendo los pixeles físicos
Para calcular esto, tenemos que mirar cual es la resolución del dispositivo para saber cuales son los píxeles físicos. En este caso si miramos la resolución tenemos 1920x1080.
Obteniendo los pixeles lógicos
Para obtener los pixeles lógicos, vamos a maximizar el navegador y desacoplar la consola del navegador manteniendo las dimensiones actuales del navegador al máximo posible:
Posteriormente, desde el apartado de consola vamos a escribir lo siguiente:
O bien, escribir window y buscar los elementos innerHeight e innerWidth:
Aunque el tamaño de la pestaña puede cambiaren cualquier momento, en este será en el que se base nuestra formula matemática para realizar el DPR. Y solamente cambiará cuando hagamos zoom.
Utilizando webs para obtener pixeles lógicos
Existen muchas webs como por ejemplo Whatismyviewport o Yesviz que nos pueden ayudar a recopilar ambos datos de una forma más sencilla.
Aunque es importante no confundir el viewport con la resolución gráfica. Ya que un viewport es tamaño de la resolución gráfica que le queda a la web para poder visualizarse. Después de quitar la barra de windows, la barra de navegación del browser, la barra de marcadores, etc.
Realizando el calculo del DPR de forma manual
Una vez tenemos los píxeles físicos y los píxeles lógicos, ahora tan solo nos falta aplicar la formula que anteriormente ya hemos presentado:
DPR= píxeles físicos / píxeles lógicos
Para realizar el calculo correctamente tenemos que basarnos en uno de las medidas la de la anchura o la de la altura en ambos dispositivos.
El resultado será el siguiente:
Y podemos comprobar que es exactamente lo mismo que nos devuelve el devicePixelRatio:
📌 ️ — EL DPR es la proporción de píxeles físicos (píxeles del dispositivo) a píxeles lógicos. En el caso de los sitios web, es el número de píxeles físicos que equivale al tamaño de un píxel CSS (
px).
Por tanto el resultado es correcto si dividimos ambos valores que representan el ancho, vemos que otorga el mismo resultado:
Si hacemos zoom un 10% el devicePixelRatio augmentará un 10% y tendremos que multiplicar el valor que teníamos por un 1,10 para calcular el nuevo valor:
📌 ️ — Por tanto, cada vez que utilizamos la lupa para augmentar (hacer zoom) estamos augmentando el DPR. Y cada vez que reducimos el zoom disminuimos el DPR.
Si trabajamos desde un móvil inclusive podemos realizar lo siguiente para obtener el device pixel ratio:
Usualmente los computadores tienen un DRP de 1 ya que prácticamente tenemos toda la pantalla para dibujar. En cambio, cuándo trabajamos con móviles, no suele ser 1 el DPR sino que suele estar entre los 2.4 y 2.6 aunque en algunos casos puede llegar a ser superior a 3.
Por ejemplo en mi Xiaomi Mi 10 Lite 5G el DPR es 2.75:
En este caso, si nos metemos la web myviewport.com podemos ver los valores que tenemos en dicho dispositivo para poder realizar el cálculo mas rápidamente:
Y podemos ver que el viewport es el mismo:
Pero ¿Por qué es tan importante el DPR? Cuando trabajamos con imágenes, podemos utilizar los atributos de HTML height y width para controlar el ancho de dicha imagen:
Por ejemplo en este caso, la resolución de la imagen es de 1000px de ancho y 450px de alto:
Si añadimos dicha imagen dentro de un documento de HTML podemos ver que en determinadas resoluciones no se adaptará bien a nuestro dispositivo.
En esta resolución al superar dicha resolución, vemos que se adapta correctamente:
Pero si reducimos la pantalla nos encontramos podemos ver que cortamos la imagen ya que la pantalla es más pequeña que nuestra imagen y no cabe al completo:
Y si pasamos a la vista mobile podemos instalar algún plugin en el navegador Responsive Viewer:
Para ver como se vería la imagen en distintos dispositivos mobile:
Aunque la forma de trabajar todo esto correctamente es CSS. Para poder explicar todo esto, es necesario que trabajemos con atributos como witdh y height que aunque se pueden utilizar desde HTML lo más recomendable es usarlos en el CSS o la etiqueta style que nos permite añadir estilos CSS dentro de nuestro documento. Aunque nuevamente lo más recomendable es realizar esto desde un documento CSS externo al que llamaremos desde el HTML.
Para ello, lo primero que se nos puede ocurrir es controlar el ancho y el alto de la imagen con witdh y height. Vamos a verlo:
<img src="/assets/img/ragnar.jpg" alt="Ragnar" width="350">Ahora vemos se se visualiza en todos los dispositivos, pero no se adapta a ellos:
Si hacemos zoom podemos ver que la imagen continua ocupando un tamaño de 300px independientemente de si hacemos un zoom x1, x2, x3, x4…:
Por tanto, cuando trabajamos con un DPR de 1 la imagen en principio se debería de ver bien y así lo hace. El problema es que cuando la imagen llega un determinado zoom provoca que dicha imagen se desborde activando el schroll bar tan lateral con inferior:
Existe una solución mejor que es controlar que el ancho de la imagen no sobrepase el 100 % de nuestra pantalla. Para ello, realizamos lo siguiente:
<img src="/assets/img/ragnar.jpg" alt="Ragnar" style="max-width: 100%;">
Y podemos ver que la imagen se adapta al ancho del dispositivo perfectamente:
Y aunque esto es correcto, existe otra posibilidad mucho más optima mediante a la cual podríamos adaptar el tamaño de la imagen en función del DPR que tengamos en el dispositivo.
Ya que como os podéis imaginar, no tiene mucho sentido cargar una imagen de 1000px para un dispositivo de 300px y después reducirla (mediante a width y height o mediante a max-width).
Esto es un error muy habitual en el desarrollo web ya que no tiene sentido utilizar la misma imagen para webs que necesitan una cierta calidad y que por tanto tienen que utilizar archivos más grandes que webs que son más pequeñas y en las cuales podemos utilizar imágenes más pequeñas.
Si actualmente realizamos una petición con la pestaña de Network abierta, podemos ver lo que actualmente tarda la web en cargar con la imagen actual:
Si realizamos lo siguiente podemos reducir la imagen de forma muy sencilla:
Y vemos que la imagen ahora pesa prácticamente la mitad de lo que pesaba anteriormente:
Ahora vamos a hacer que la imagen que se cargue cuando tengamos un DPR igual o mayor que 2 sea la de la versión mobile y cuando el DPR sea menor que 2 se cargue la versión de desktop:
<img srcset="/assets/img/ragnar.jpg 1x, /assets/img/ragnar_mobile.jpg 2x" alt="Ragnar" >Para ello, es decir, para indicarle al navegador cual es la imagen que se debe cargar en función del DPR utilizamos el atributo SRCSET, que nos permite cargar un SET de rutas (sources) en vez de una sola ruta como era habitual cuando trabajábamos con una imagen mediante a SRC. SRC nos permite indicar la ruta de una imagen, en cambio SRCSET nos permite definir un grupo con la finalidad de posteriormente a partir de una condición cargar una u otra imagen en función del DPR que tengamos en dicho dispositivo.
Si actualmente cargamos la web con la resolución desktop, podemos ver que se carga de la siguiente manera:
En cambio si ampliamos a la vista mobile o aplicamos un zoom superior al 200% lo que sería equivalente a un DPR de 2. Podemos ver que se nos aplica la imagen de la vista mobile.
🚨Es posible que podamos tener problemas cuando ya tengamos la página cargada por ello, es aconsejable cambiar el zoom y abrir otra pestaña. Ya que, habitualmente los navegadores están optimizados para que una vez se carga una imagen no se modifique por una condición.🚨
Vamos a ver como proceder ante un caso así:
También podríamos realizar lo mismo con varios DPR:
De la siguiente manera:
<img srcset="/assets/img/ragnar.jpg 1x, /assets/img/ragnar_mobile.jpg 2x, /assets/img/ragnar_mobile_2.jpg 3x" alt="Ragnar">
Finalmente, si vamos a caniuse, podemos ver que EI y algunos navegadores que no están actualizados no son compatibles con el atributo SRCSET:
Por lo que podemos realizar lo siguiente:
<img srcset=”/assets/img/ragnar.jpg 1x, /assets/img/ragnar_mobile.jpg 2x, /assets/img/ragnar_mobile_2.jpg 3x” src=”/assets/img/ragnar.jpg” alt=”Ragnar”>El resultado en el caso que no sea compatible el browser con SRCSET será que el elemento IMG cargará la ruta definida dentro del SRC. También es una manera de hacer un fallback en caso en los que trabajamos con imágenes con formato webp, para curarnos en salud de que están podrán ser cargadas desde cualquier navegador.
Por tanto, y en resumidas cuentas, mediante al uso del del atributo SRCSET en las imágenes podemos optimizar el contenido en función del DPR del dispositivo para hacerlo más ligero cuando así sea necesario (vista en móviles o tablets) y más grande cuando el DPR sea 1 haciendo las imágenes más pesadas (vista escritorio).
Etiqueta Picture
Existe una forma alternativa de realizar lo mismo que hemos realizado con la etiqueta IMG junto al atributo SRCSET.
La forma alternativa utiliza PICTURE es una etiqueta más completa y bastante más nueva que la forma que la del ejemplo anterior. Aunque, en determinadas situaciones trabajar con PICTURE no puede valernos ya que al ser más nueva, es menos compatible. Y por tanto la incompatibilidad con algunas versiones antiguas del ordenador puede ser el detonante para utilizar SRCSET. Aunque si no necesitamos dicha compatibilidad, y lo recomendable sería navegador PICTURE, ya que es mucho más potente que SRCSET.
Para este ejemplo vamos a tener 4 imágenes (las dos anteriores) en JPG, más dos más, que son literalmente las mismas convertidas con un conversor al formato WEBP:
Para que funcione la etiqueta, debemos meter dentro de la etiqueta PICTURE los sources dentro de la etiqueta SOURCE de una forma similar a lo que hacíamos con SRCSET. En este caso, además, hemos añadido el atributo media que nos permite controlar si la pantalla tiene una resolución mayor o menor que 600px. Y, finalmente es necesario definir un IMG SRC con la imagen por defecto. En este caso, además en el IMG SRC hemos añadido un fallback para cargar una imagen en WEBP siempre que se pueda y si el navegador no es compatible que cargue la imagen en formato JPG:
<picture>
<source srcset="/assets/img/ragnar_mobile.webp,
/assets/img/ragnar_mobile.jpg" media="(max-width: 600px)">
<img src="/assets/img/ragnar.webp"
onerror="this.src='/assets/img/rargnar.jpg'" alt="Ragnar IMG>
</picture>En resumidas cuentas
El resultado será el siguiente:
📌 ️ — PD: Aunque no lo hemos visto, la etiqueta IMAGE, también es compatible con el uso del 2x, 3x…
Etiquetas de audio y vídeo
Para introducir audios dentro de nuestro HTML utilizamos la etiqueta audio.
Los principales que utilizamos como atributos de es etiqueta principalmente son:
- Autoplay: nos permite que el audio se auto reproduzca el audio al abrir el HTML. El principal problema de este atributo es que habitualmente la gran mayoría de navegadores bloquean el autoplay para evitar que se moleste al usuario sin su permiso.
- Controls: nos permite añadir controles del audio (un reproductor). Si no utilizamos esta etiqueta no podremos ver que tenemos una etiqueta de audio. Por lo que usualmente siempre va puesta.
- Mute: nos permite silenciar el audio.
- Loop: nos permite que el audio se reproduzca nuevamente una vez acabe.
Vamos a ver un ejemplo:
<audio src="/assets/audio/ocean-wave.mp3" controls loop>
Your browser does not support the <code>audio</code> element.</audio>El resultado será el siguiente:
La etiqueta video, nos permite realizar lo mismo que lo que acabamos de hacer con al anterior pero con archivos de vídeo.
Podemos utilizar todos los atributos que hemos visto hasta ahora, además de:
- Poster: que nos permite definir una imagen para cuando el vídeo no se reproduzca.
Vamos a ver un ejemplo:
<video src="/assets/video/video.mp4" autoplay>
Tu navegador no admite el elemento <code>video</code>.
</video>El resultado, podemos ver que no se adapta a la pantalla:
Podemos arreglarlo de la siguiente manera:
<video src="/assets/video/video.mp4" autoplay="true" loop style="max-width: 85%;">
Tu navegador no admite el elemento <code>video</code>.
</video>El resultado será el siguiente:
Si queremos por ejemplo poner un poster y añadir los controles del reproductor haríamos lo siguiente:
<video src="/assets/video/video.mp4" loop poster="/assets/img/ragnar.jpg" controls style="max-width: 85%;">
Tu navegador no admite el elemento <code>video</code>.
</video>🚨 IMPORTANTE: si ponemos el atributo autoplay, la imagen de poster no es recomendada. Ya que, también se visualizará aunque solo será unos milisegundos pero cortaría el vídeo🚨
El resultado será el siguiente:
Y cuando reproduzcamos el vídeo, pulsando sobre el botón de play, empezará el vídeo:
📌 ️ — Si os fijáis, en este caso, la imagen de poster y la del vídeo no tienen el mismo tamaño lo cuál provoca que se produzca un salto en el tamaño del reproductor. Lo ideal sería que ambos recursos tuvieran el mismo tamaño.
Iframe
La etiqueta iframe nos permite incrustar una página HTML dentro de nuestra página.
Habitualmente este tipo de elementos, no se crean desde 0, ya que si por ejemplo intentamos crear un iframe que apunte a Google y lo creamos nosotros por nuestra cuenta vemos que la conexión es rechazada:
<h1>Mi web</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora rem quisquam labore repellendus eius velit necessitatibus eum commodi libero eveniet harum dolorem porro fuga, hic, modi deleniti nisi eaque eos?</p><h2>Iframe</h2>
<iframe src="https://www.google.es/" frameborder="0"></iframe>
Ya que habitualmente hay que pegar un código que nos proporciona la propia página. Podemos utilizar iframes que apuntes a Facebook, Youtube, Spotify, Instagram…
Por ejemplo, si queremos añadir Spotify a nuestra web realizaríamos lo siguiente:
Vamos a ver un ejemplo:
<h1>Chuck Berry</h1>
<p>Charles Edward Anderson Berry (San Luis, Misuri, 18 de octubre de 1926-Wentzville, Misuri, 18 de marzo de 2017),12 conocido artísticamente como Chuck Berry, fue un compositor, intérprete, cantante y guitarrista estadounidense. Es considerado uno de los músicos más influyentes de la historia del rock and roll,3 siendo uno de los pioneros de dicho género musical.</p><h2>Spotify list:</h2>
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/artist/293zczrfYafIItmnmM3coR?utm_source=generator" width="100%" height="380" frameborder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>
El resultado será el siguiente:
El principal problema de esto, es que cargamos otra web al completo con el contenido de Spotify en el interior de nuestra página de HTML:
Por tanto, en determinadas circunstancias si que tiene sentido pero no es recomendable abusar de ello, ya que haría que nuestra web sea mucho más pesada.
Podemos ver como afecta al rendimiento si comentamos el iframe y ejecutamos la web, podemos ver que tarda:
En cambio, si hacemos lo mismo con el iframe puesto:
Figure: nos permite añadir un contenido que está estrechamente relacionado un artículo pero el cual es independiente. Es decir, que aunque tiene relación con el artículo, se utiliza para añadir una información adicional. Por lo que si dicho contenido desapareciera del artículo, el artículo continuaría teniendo sentido. Podría ser desde una imagen, un diagrama, un gráfico de resultados, un esquema, un fragmento de código, etc. Aunque su uso más común/habitual es sobre imágenes.
📌 ️ — La etiqueta figure, además, puede contener un atributo figcaption que aunque es opcional se utiliza para definir un pie de página sobre el contenido.
Vamos a ver un ejemplo:
<h1>Los vikingos más famosos:</h1>
<p>Existen muchos guerreros vikingos. Aunque sin duda alguna los más famosos son:</p>
<h2>Rangar</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium quaerat veritatis pariatur voluptatem excepturi totam quisquam asperiores, animi repellendus odit culpa cumque, voluptate ratione. Error veritatis illum inventore nesciunt dignissimos.</p>
<figure>
<img src="/assets/img/ragnar_mobile.jpg" alt="Ragnar">
<figcaption>Ragnar en la batalla</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum qui iusto incidunt ducimus mollitia quod libero voluptatem culpa maiores, quibusdam ipsam necessitatibus expedita enim impedit aperiam? Odio cumque earum cum!</p>El resultado será el siguiente:
Favicon
Los favicon son pequeñas imágenes, generalmente de 16×16 pixeles, utilizados por la mayoría de los navegadores en la parte izquierda de las pestañas de los sitios web.
📌 ️ —Si no especificamos uno en nuestros documentos, el favicon que aparece en las páginas webs por defecto es la bola del mundo 🌎.
Los favicon, nacieron en 1999 en Internet Explorer 5 como una pequeña imagen que represente el sitio. Y tras ser utilizados en la gran mayoría de sitios web, finalmente ser introducidos por la W3C dentro del estándar de HTML.
Existen múltiples webs para generar iconos por ejemplo Favicon-generator, Favicomatic o Realfavicongenerator. Vamos a crear un icono a partir de la siguiente imagen:
La web que vamos a utilizar en este ejemplo va a ser Realfavicongenerator si nos metemos y adjuntamos la imagen:
Veremos que nos muestra hasta una vista previa de como se verán los iconos en los distintos dispositivos:
Si bajamos al final del todo de dicha página, tendremos un botón para descargar los iconos:
Se nos descargará un zip que contiene una serie de iconos en distintas resoluciones y formatos:
Que tendremos que descomprimir y poner dentro del directorio del proyecto:
Para substituir dicho icono por uno personalizados, tenemos dos opciones:
FORMA 1. La sencilla que solamente funcionará con los navegadores que estén actualizados.
📌 ️ — Aunque los archivos .ico funcionan, actualmente suelen estar en desuso, y se suele trabajar con imágenes PNG en distintos formatos.
Vamos a ver un ejemplo de como cargar un fichero ICO:
<head>
<link rel="shortcut icon" href="/assets/icons/favicon.ico"
type="image/x-icon">
</head>El resultado será el siguiente:
Y si cargamos un favicon en formato PNG:
<head>
<link rel="shortcut icon" href="/assets/icons/favicon-16x16.png"
type="image/x-icon">
</head>El resultado será el siguiente:
FORMA 2. Vamos a explicar el porque no es recomendable utilizar esta primera forma explicando una de algunas las situaciones en las que esta forma de trabajar con iconos no funcionaría correctamente. Y, finalmente, vamos a explicar como trabajar de una forma correcta con iconos.
Si por ejemplo un usuario crea un acceso directo hacía nuestra web desde su dispositivo mobile (Android/iOs) podemos ver que el icono no aparece correctamente:
Y que además, si intentamos crear un acceso directo tampoco se ve el icono correctamente:
En cambio, si pegamos lo siguiente substituyendo las rutas por las correctas:
<head>
<link rel="apple-touch-icon" sizes="180x180"
href="/assets/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32"
href="/assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16"
href="/assets/icons/favicon-16x16.png">
<link rel="manifest" href="/assets/icons/site.webmanifest">
<link rel="mask-icon" href="/assets/icons/safari-pinned-tab.svg"
color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
</head>Podemos ver que el resultado será completamente distintos:
Por lo que siempre es aconsejable trabajar con esta 2ª forma.
Font Awesome
En muchas ocasiones queremos realizar menús con iconos, poner iconos junto a un texto, etc. Y, para ello, existen lo que se conoce como librerías de iconos.
Aunque existen otras muchas alternativas, en este apartado, nos vamos a centrar en explicar una de las más popular como es Font Awesome.
Para trabajar con las librerías de iconos, usualmente se utiliza una CDN (Content Delivery Network o Red de Distribución de Contenido) que no es nada más y nada menos, que un conjunto de servidores que en función de la ubicación en la que nos encontremos nos proveerán un link para poder utilizar dicha librería.
Para poder utilizar el CDN de FontAwesome, primeramente es necesario registrarse y activar la cuenta:
Y recibiriemos un email a dicha cuenta mediante el cual podremos activar
Paso1) Añadir el script del CDN al head del documento HTML:
Paso 2) Buscamos el icono que queremos pegar:
Dentro de los iconos existen dos tipos, los gratuitos y los de pago. Para identificar cuales son de pago y cuales no hacemos lo siguiente:
Si por ejemplo queremos trabajar con el icono de HTML:
Paso 3) Pegamos el elemento de HTML Italic (I) que tiene varias clases dentro de nuestro body:
Y finalmente, podemos ver que el icono aparece correctamente en nuestro HTML:
Estos iconos también pueden ser modificados desde CSS. Por ejemplo, si quisiéramos cambiar el color del icono, realizaríamos lo siguiente:
Accesibilidad web
La accesibilidad el asegurar que nuestras webs sea accesible para todos los usuarios, independientemente de sus condiciones físicas. Inclusive cuando dicho usuario tenga deficiencias visuales, de movimientos, etc.
📌 ️ — Por tanto, principalmente está enfocada en ayudar a que todos colectivos con alguna deficiencias puedan realizar la navegación en nuestras webs.
Para ello, por ejemplo, las personas con deficiencia visuales suelen utilizan un tipo de navegador especiales que dictaran el texto contenido de la web para realizar su lectura. Como alternativas a estos navegadores, también se pueden añadir plugins sobre el navegador o dispositivos que son especializados para un problema en concreto.
Además, también existe la posibilidad de utilizar navegadores de terminal:
Entendiendo la accesibilidad
Ahora que conocemos los atributos de HTML, es muy importante dar un uso correcto sementicamente hablado a los distintos elementos de HTML.
Si por ejemplo realizamos el siguiente documento HTML:
<h1>Mi título principal</h1>
<h2>Subtitulo</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati, dolor laudantium. Nobis est deleniti mollitia ipsa, laudantium magnam. Aliquam optio neque aspernatur excepturi quidem impedit molestias dolore perferendis necessitatibus veritatis.</p>
<div>Mi botón</div>El resultado será el siguiente:
Si intentamos desplazarnos a través de la página, podemos ver que no entramos dentro del documento. En cambio, si realizamos lo siguiente:
Vemos que la web se carga nuevamente:
Pero esta vez si pulsamos sobre TAB podemos ver que si que se situa sobre nuestro botón y que podemos pulsarlo mediante a la tecla ENTER.
Este comportamiento de poder situarnos sobre un elemento de HTML se utiliza automáticamente sobre botones, enlaces, inputs… Es decir, sobre elementos sobre el navegador sabe que se debe de situar el usuario para rellenar una información o que requieren una interacción.
TABINDEX
Pese a ello, también existen otros elementos que por defecto no tienen este comportamiento, pero a los que le podemos otorgar dicho comportamiento mediante al atributo TABINDEX, que nos permitirá realizar esto sobre otros elementos.
Vamos a ver un ejemplo en el que utilizamos TABINDEX sobre los elementos P que no tienen dicha propiedad por defecto:
El resultado será el mismo que con el anterior y podremos seleccionar dichos elementos:
📌 ️ —También podríamos modificar el orden de los tabs sin problema cambiando el orden 3,2,1 o 1,3,2…
Si ahora por ejemplo vamos a la web store de Chrome, podemos descargar un plugin como el siguiente:
Y podemos ver que ahora si hacemos TAB y nos desplazamos sobre los distintos elementos (también podemos hacer click) el plugin nos lee el contenido.
Aria-label
Nos permite subtituir el texto que contiene un elemento por una información más detalla que proporcionará un mejor contexto a alguien con deficiencias visuales y que utilice un Screen reader.
Vamos a ver un ejemplo:
<a href=”#”>Google</a>
Con este texto si nos situamos encima nos dirá Enlace Google. En cambio, si realizamos lo siguiente:
<a href="#" aria-label="Ir al buscador Google">Google</a>El mensaje que dirá el lector de la página será Enlace Ir al buscador Google.
Role
Se utiliza para describir el propósito de cada elemento, es decir, nos permitir indicar al navegador con que con la intención de dar un mayor contexto a la navegación para que el browser, sea capaz de adaptarse mejor a esas personas proporcionando una experiencia mucho más agradable.
Vamos a ver un ejemplo:
<form action="" role="form">
<label for="nombre" role="text">Nombre:</label>
<input type="text" role="textbox" id="nombre">
<button role="button">Enviar</button>
</form>El resultado será el siguiente:
Por ejemplo si nos ponemos sobre el input del nombre nos dirá casi Nombre Cuadro de texto autocompletar.
Open graph protocol
El protocolo Open Graph es un protocolo que fue creado en 2007 por Facebook. Open Graph, nos permite definir la estructura con la que queremos presentar una URL cuando la compartimos en una red social como Facebook, Instagram, Twitter, etc.
📌 ️ —Aunque como veremos en el siguiente apartado Twitter tiene su propio protocolo, pero si no lo definimos, utilizará lo definido mediante a Open Graph para presentar la publicación.
Basándonos en el ejemplo de IMDb que nos ofrece Open Graph en su web:
Podemos ver que mediante una serie de meta datos podemos definir como será presentada la URL cuando la compartamos en una red social:
El resultado será el siguiente:
Los metadatos más básicos son los siguientes:
Aunque podemos acceder al conjunt completo de metadatos accediendo a la web oficial del protocolo: OGP.me
Este protocolo, por tanto, nos permite definir que queremos presentar y como lo queremos hacer cuando compartimos una URL en una red social. Si no definimos nada, será la red social la encarga de decidir que contenido se va a mostrar. Y usualmente, simplemente mostrará la URL sin más.
Vamos a ver un ejemplo:
Twitter Card
Tal y como habíamos explicado en el protocolo anterior, existe un protocolo que nos permite realizar lo mismo que hacemos con el protocolo Open Graph, pero específicamente para la red social Twitter.
Aunque como ya hemos dicho existen algunas etiquetas equivalentes entre Open Graph y Twitter.
Su uso se centra principalmente en algunas ocasiones, en las que es posible que queramos personalizar solamente la presentación de Twitter. En esos casos, tiene sentido combinar el uso del protocolo Open Graph junto el de Twitter Card.
Aunque existen distintos tipos de cards, un ejemplo podría ser el siguiente:
Finalmente, existe la posibilidad de validar las cards que creamos mediante el Twitter Card Validator. Vamos a ver un ejemplo:
