Manual práctico Web ‘How to’ – HTML5 · CSS3 · JavaScript

Sobre el documento

Este documento plantea tareas desde el punto de vista de las guías comúnmente conocidas como «how to». Su objetivo es que el usuario pueda encontrar la solución a tareas comunes que no encontraría buscando a repasando etiquetas HTML, reglas CSS o instrucciones JS. El motivo es que las tareas aquí se encuentran detalladas y tituladas con palabras que el usuario puede comprender inmediatamente, y también encontrarlas con una búsqueda dentro de la página (Ctrl+F).

Requisitos previos

Introducción a CSS y sintaxis básica

Es recomendable para comprender los aspectos básicos de CSS. Para qué sirve, cómo se utiliza, qué diferentes formas hay de implementarlo y nociones básicas de su sintaxis.

Tareas comunes de formato

Ocultar elementos con la propiedad display

display: none. Oculta un elemento, produciendo el efecto de que este simplemente desaparece, junto con el espacio que ocupaba. visibility: hidden. Oculta un elemento; sin embargo este, aunque invisible, continúa ocupando el mismo espacio que antes.

La propiedad shape-outside, o como ubicar texto alrededor de una imagen

En el sitio MDN nos explican la propiedad shape-outside al detalle.

Imágenes

Cómo insertar correctamente una imagen en la web

La forma en la que mostramos la inserción de una imagen no se limita a los atributos obligatorios de esta, sino también aquellos que vayan a optimizar la imagen para un buen rendimiento en la web, y un diseño responsive.

<img
    src="ruta_a_la_imagen_ejemplo.jpg"
    alt="Descripción de la imagen"
    width="600"
    height="400"
    decoding="async"
    loading="lazy"
    srcset="imagen-ejemplo-400.jpg 400w, imagen-ejemplo-600.jpg 600w, imagen-ejemplo-800.jpg 800w"
sizes="(max-width: 600px) 100vw, 600px">

src. La ruta en forma de URL que conduce a la imagen.

alt. Es un texto alternativo que se muestra cuando la imagen no puede verse. Se trata de un atributo muy importante, tanto por cuestiones de accesibilidad como para ayudar a los motores de búsqueda a comprender el contenido de la imagen.

width y height. Ancho y alto de la imagen en píxeles, donde w se refiere a la «anchura en píxeles» (de width). Aunque no es obligatorio, indicar estos valores ayudará a que el navegador reserve el espacio correspondiente durante la carga de la página. Aunque pueden especificarse valores inferiores en la web a los de la imagen real, lo ideal es que la imagen sea del mismo tamaño o muy cercano al especificado.

decoding=»async». Con el valor async, que es el recomendado en la mayoría de casos, la imagen se decodifica de manera asíncrona, permitiendo que el navegador continúe procesando otros elementos de la página mientras la imagen se decodifica.

loading=»lazy». La imagen no se cargará hasta que el esté a punto de aparecer en pantalla. Esto reduce el tiempo de carga inicial de la página. Los atributos decoding=»async» y loading=»lazy» mejoran el tiempo de carga, al no bloquear la carga de otros elementos.

srcset. Resulta ideal para mostrar la imagen en diferentes tamaños, dependiendo del tamaño del visor/dispositivo desde el cual se está viendo. El ejemplo muestra una imagen para un visor de 400w, otra para uno de 600w, y otra para 800w. Esto carga la imagen más pequeña que es necesaria en cada caso.

width y height, y el problema de la imagen no responsiva

Si añade width y height a una imagen, esta se convertirá en una imagen no responsiva, es decir, no adaptada a diferentes tamaños de pantalla y especialmente dispositivos móviles. Con un altura fija, la imagen se deformará cuando el visor/pantalla se estreche. Para evitar esto, aplicamos la siguiente regla CSS:

img {
    max-width: 100%;
    height: auto;
}

Esto creará una imagen completamente responsive, que no puede medir más del 100% del ancho del visor (max-width: 100%;), y el alto se mantendrá en automático (height: auto;); esto es, su altura será simpre en relación a su anchura.

Utilizar varias imágenes de fondo para cualquier elemento

Usando CSS3 podemos declarar varios fondos para un mismo elemento. Para ello, simplemente los declaramos separados por comas en la misma instrucción:

<!-- HTML -->
<div id="capa-contenedor">

/* CSS */
#capa-contenedor  {
    background: url(imagen-fondo-1.jpg) bottom right no-repeat,
    url(imagen-fondo-2.jpg) center no-repeat,
    url(imagen-fondo-3.jpg) center repeat;
}

Cómo escalar y recortar imágenes con la propiedad object-fit de CSS

En ocasiones existe la necesidad de cambiar la relación de aspecto o proporción de una imagen sin tocar esta, y sin que aparezca deformada, solo con CSS.

Una solución común y tradicional a este problema ha sido utilizar la propiedad background-image. Otra solución consiste en utilizar object-fit.

Los valores de object-fit:

• fill. No preservar la proporción de la imagen. Así, esta aparece deformada.
• cover. La imagen conserva su proporción, aunque partes de esta quedarán fuera de visión.
• contain. La imagen conserva su proporción, y será reducida lo necesario para no exceder los límites de su contenedor.
• scale-down. La propiedad object-position: Cuando una imagen se ajusta con el valor cover, a veces desaparecen partes cruciales de la imagen. La propiedad object-position puede ayudar en esto. Esta ubica la imagen donde queremos.

Media Queries CSS

Las media queries CSS pueden ser usadas para verificar diferentes cosas, como el ancho y alto del visor/pantalla, del dispositivo, orientación (apaisado o retrato), resolución. Se trata de una técnica común que permite crear hojas de estilos personalizadas para cada dispositivo: móvil (iphone, Android, …), tablet, portátiles, de escritorio, …

• W3schools CSS Media Queries
• @media en Developer Mozilla Network

Sintaxis:

@media <media_query> { <grupo_de_reglas> }

Tipos de medios

• all. Aplicable a todos los dispositivos.
• print. Destinado a páginas en modo vista previa de impresión
• screen. Destinado a pantallas de computadora en color.
• speech. Destinado a sintetizadores de voz

Crear páginas web imprimibles con las media Queries CSS (@media print)

El siguiente es un ejemplo de fragmento CSS que se aplica al tema DIVI/Extra de ElegantThemes de WordPress. Solo afecta a la vista previa de impresión y corrige algunos problemas de visualización:

@media print { header.header, .post-footer, .post-nav, #footer, .related-posts, .wpml-ls-statics-post_translations { display: none; } .container { max-width: none; width: 100%; } }

El código: ‘.wpml-ls-statics-post_translations’ se aplica solo a sitios con el plugin WPML instalado.

[WordPressDoc] Styling for Print

Animaciones

Efecto zoom al hacer hover sobre una imagen (al pasar el puntero del ratón) CSS

CSS. En HTML, la capa hijo está dentro de la capa padre:

.padre	{
   padding: 0;
   overflow: hidden;
}
.hijo {
   background-image: url("ruta/imagen.jpg");
   background-position: center;
   background-size: cover;
   height: 100%;
}
.padre:hover .hijo  {
   transform: scale(1.2); /* Produce el zoom */
   transition: all .5s;  /* Procude que la transición de zoom sea suave */
}

Multimedia

Inserción de vídeos

La forma más fácil de insertar vídeos en páginas web es a través de YouTube.

Clic con el botón derecho ratón sobre el vídeo de YouTube deseado > opción «Copiar código de inserción» > pegar ese texto HTML en la página deseada.