Manual

de Diseño Web
con HTML5, CSS3
y JavaScript

1 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO II – HTML. Etiquetas y atributos
 1* 2 HTML
Etiquetas y atributos
3
HTML
Introducción HTML
Etiquetas de contenido

4 5 HTML
6
Formularios
HTML CSS
Etiquetas estructurales Introducción

7 8 CSS
Unidades de medida
9 CSS
CSS Reset CSS/Normalizadores
Selectores
 10 11 12CSS
Propiedades Box-model CSS
CSS Position
Tipografía

13 14 15
CSS
Flex/Flexbox CSS
Color
CSS
Grid

16 17 18
CSS
Imágenes de fondo
CSS
CSS
Animaciones
Efectos visuales
19 20 21 JAVASCRIPT
Introducción JAVASCRIPT
CSS Constantes, variables y
Media Queries scope

22 23 24 JAVASCRIPT
Arrays

JAVASCRIPT JAVASCRIPT
Tipos de datos Objetos

25 26 27 JAVASCRIPT
Operadores
JAVASCRIPT JAVASCRIPT
Funciones Fechas
28 29 30
JAVASCRIPT
JAVASCRIPT
Math
JAVASCRIPT Bucles
Condiciones

31 33
JAVASCRIPT
BOM
32
JAVASCRIPT
DOM
JAVASCRIPT
JSON

34 35 36
JAVASCRIPT
Fetch JAVASCRIPT
Timers
JAVASCRIPT
Storage
 HTML
Módulo I–
Introducción

Página oficial en MDN

https://developer.mozilla.org/es/docs/
Web/HTML

HTML (Hypertext Markup Language) es

el lenguaje de marcado estándar utiliza-
do para la creación de páginas web. Per-
mite describir la estructura de un do-
cumento web, mediante etiquetas que
especifican elementos tales como enca-
bezados, párrafos, enlaces, imágenes, en-
tre otros.
En su definición más simple, hipertexto
es un texto que contiene enlaces a otros
textos, sin embargo, en la actualidad, la
naturaleza de esos textos es completa-
mente multimedia, siendo una especie
de contenidos relacionados entre sí que
pueden consumirse prácticamente en
cualquier orden. Un lenguaje de etique-
tas nos permite definir o darle significa-
do a partes de un texto utilizando unas
secuencias de caracteres predefinidos
(las etiquetas).
Utilizando HTML vamos a definir/repre-
sentar la estructura y el contenido de un
documento web mediante etiquetas.

6 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO I – HTML. Introducción
 HTML
Módulo II–
Etiquetas
y atributos

HTML utiliza etiquetas para definir los di-

ferentes elementos en una página web,
como imágenes, texto y enlaces. Cada
etiqueta puede contener varios atribu-
tos, que proporcionan información adi-
cional o especifican características del
elemento.
Es habitual pensar que si la web se visua-
liza bien y ese elemento que has añadi-
do aparece bien ya está bien lo que he-
mos escrito pero comprender cómo fun-
cionan conjuntamente las etiquetas y
atributos es crucial para crear documen-
tos HTML, si la semántica del documen-
to HTML no está bien relacionada HTML
no tiene sentido.

Etiquetas
Página oficial en MDN
https://developer.mozilla.org/es/docs/
Web/HTML/Element

Una etiqueta nos permite delimitar o ha-

cer referencia a un elemento, ya sea se-
mántico o estructural. Están delimitadas
por los símbolos de menor y mayor que:
< y >, y entre ellas está una palabra o le-

7 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO II – HTML. Etiquetas y atributos
tra que representa el tipo de elemento, por ejemplo: <p> representa un párrafo (pa-
ragraph).
Existen varios tipos de etiquetas:
• Etiquetas de apertura <elemento> que representan el punto en donde inicia un
elemento, etiquetas de cierre </elemento> que representan el punto en donde
termina un elemento.
• Etiquetas (vacías) que se cierran a sí mismas <elemento /> las cuales se utilizan pa-
ra elementos que hacen referencia a entidades no textuales, como imágenes, en-
tre otras.

Atributos
Página oficial en MDN
https://developer.mozilla.org/es/docs/Web/HTML/Attributes

Un atributo define una característica de un elemento; siempre se encuentran en la

etiqueta de apertura y están compuestos de un nombre, un símbolo de igualdad y el
valor del atributo entre comillas.

La estructura básica de un documento HTML es la siguiente:

8 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO II – HTML. Etiquetas y atributos
 HTML
Módulo III–
Etiquetas
de contenido

Página oficial en MDN

https://developer.mozilla.org/es/docs/
Web/HTML/Element

Las etiquetas de contenido en HTML son

fundamentales para estructurar y pre-
sentar la información en una página web.
Desde texto y enlaces hasta imágenes y
listas, estas etiquetas permiten organizar
el contenido de manera coherente y ac-
cesible.

Encabezados (headings)
Página oficial en MDN
https: //developer.mozilla.org/en-US/
docs/Web/HTML/Element/Heading_Ele-
ments

Los encabezados en HTML, que van des-

de <h1> hasta <h6>, definen la jerarquía
del contenido en una página. <h1> se uti-
liza para el título principal, mientras que
<h2> a <h6> se utilizan para subtítulos y
encabezados secundarios, decreciendo

9 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO III – HTML. Etiquetas de contenido
en importancia y generalmente en tamaño. El uso adecuado de los encabezados fa-
cilita una estructura clara y accesible.

Una confusión común es pensar que los números representan tamaño (fácil de caer
en ella por la manera nativa de representarlos del navegador), sin embargo represen-
tan jerarquías: los h2 titularán secciones de algo titulado con h1, los h3 titularán sec-
ciones dentro de las secciones tituladas con h2, y así sucesivamente.

Párrafos
La etiqueta <p> define bloques de texto en forma de párrafos. Esta etiqueta ayuda a
separar y organizar el contenido textual en segmentos legibles y coherentes. Además
de mejorar la legibilidad, el uso correcto de <p> es fundamental para garantizar una
estructura lógica y una experiencia de usuario óptima.
Un error habitual es añadir un <p> con una palabra, o frases de tres palabras, que no
deberían estar en un <p>.

Hipervínculos
La etiqueta <a>, o etiqueta de anclaje, define hipervínculos en HTML. Los hipervíncu-
los permiten a los usuarios navegar entre diferentes páginas web o recursos, crean-
do una red interconectada de información. También puede contener atributos como
href, que especifica la URL del recurso vinculado o title que define una descripción
del propio enlace.

10 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO III – HTML. Etiquetas de contenido
Imágenes
La etiqueta <img> incorpora imágenes en una página web y utiliza el atributo src pa-
ra especificar la dirección de la imagen. El atributo alt proporciona una descripción
textual de la imagen, mostrada si la imagen no puede cargarse y útil para la accesi-
bilidad.
Para optimizar la presentación de las imágenes, se pueden usar atributos como width
y height para definir las dimensiones.
Es importante considerar aspectos como la resolución y el formato de archivo para
asegurar una carga rápida y una visualización adecuada en diferentes dispositivos.
El atributo src (source) le indica al navegador la URL (Uniform Resource Locator) de la
imagen, y puede ser de dos tipos: relativa y absoluta.

11 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO III – HTML. Etiquetas de contenido
Tablas
La etiqueta <table> crea tablas en HTML, estructurando datos en filas y columnas.
Una tabla se compone de filas (<tr>), y cada fila contiene celdas (<td> o <th>) para da-
tos y encabezados de columna respectivamente. Las tablas son herramientas para la
presentación de datos de manera ordenada y coherente.

12 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO III – HTML. Etiquetas de contenido
 HTML
Módulo IV–
Etiquetas
estructurales

Página oficial en MDN

https://developer.mozilla.org/es/docs/
Web/HTML/Element

Elementos estructurales
Existen dos elementos estructurales en
HTML, los cuales se utilizan para agru-
par, o en algunos casos separar, unos ele-
mentos de otros:
• div son elementos que permiten de-
limitar, agrupar o contener otros ele-
mentos, son elementos de tipo block.
• span son elementos que permiten
delimitar, agrupar o contener letras o
palabras, son elementos de tipo inline.

Elementos estructurales-
semánticos
Existe otra serie de elementos que nos
permiten delimitar, agrupar o contener
otros elementos, pero que a diferencia
de los div, cumplen una función semán-
tica específica, los más importantes:
• header contiene todos los elemen-
tos que forman la cabecera del docu-
mento.

13 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO IV – HTML. Etiquetas estructurales
• footer contiene todos los elementos que forman el pie del documento.
• nav contiene todos los elementos que forman la navegación de la web.
• section contiene todos los elementos que forman una sección del documento, su
uso depende en gran medida del contenido.
• article contiene todos los elementos que forman un artículo en el documento, su
uso depende en gran medida del contenido.
Además de header, footer, nav, section y article existen otras etiquetas semánticas
como aside, que se utiliza para contenido tangencial o secundario, y main, para es-
pecificar el contenido principal del documento. Otras etiquetas incluyen figure para
referenciar contenido multimedia y figcaption para proporcionar una leyenda a di-
chos contenidos.

Listas
Las listas son elementos estructurales que por dentro llevan elementos de conteni-
do, existen varios tipos de listas aunque habitualmente se usan las desordenadas y
las ordenadas.
• Listas no ordenadas
• Listas ordenadas
• Listas de definiciones

14 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO IV – HTML. Etiquetas estructurales
 HTML
Módulo V–
Formularios

Página oficial en MDN

https://developer.mozilla.org/es/docs/Learn/Forms

Representan un formulario a enviar por el usuario, el mismo debe contener campos

a rellenar por el usuario.
Debe tener dos atributos: method y action; method define el método HTTP a utilizar
en el momento del envío (GET o POST) y action representa a dónde enviará (URL) los
datos el formulario.

Inputs
Página oficial en MDN
https://developer.mozilla.org/es/docs/Web/HTML/Element/input

Los elementos input pueden tener diversos atributos que controlan su comporta-
miento y presentación. Además de name, value, y placeholder, atributos como rea-

15 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO V – HTML. Formularios
donly y disabled controlan la interacción del usuario. readonly hace que un campo
de entrada sea de solo lectura, mientras que disabled desactiva el campo. Otros atri-
butos incluyen maxlength, que limita la cantidad de caracteres permitidos, y requi-
red, que indica que el campo debe ser llenado antes de enviar el formulario.
Pueden tener otros atributos opcionales, entre los más importantes:
• name define el nombre del input.
• value define el valor predeterminado del input.
• placeholder define un texto sustitutivo para guiar al usuario.
A continuación, los tipos de input más importantes con sus atributos relacionados
(en donde aplique):

16 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO V – HTML. Formularios
Otras etiquetas de formulario
También existen otras etiquetas como:
• select permite seleccionar a partir de una lista de opciones
• textarea permite escribir un texto de longitud superior a un simple campo de ti-
po text
Además de select y textarea, existen otras etiquetas relacionadas con formularios.
La etiqueta button define botones clicables, mientras que label proporciona una eti-
queta textual para un elemento de formulario.

17 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO V – HTML. Formularios
 CSS
Módulo VI–
Introducción

Introducción
Página oficial en MDN
https://developer.mozilla.org/es/docs/
Web/CSS

CSS,quesignificaCascadingStyleSheets(Ho-
jas de Estilo en Cascada), es un lenguaje
de diseño que se utiliza para describir la
presentación de documentos escritos en
HTML o XML. Al separar el contenido del
diseño, CSS permite a los desarrolladores
controlar aspectos visuales como el color,
la disposición y el tamaño de los elemen-
tos en una página web, mejorando la ac-
cesibilidad y permitiendo una experien-
cia de usuario más rica y coherente.
Este lenguaje es una parte integral del
desarrollo web y facilita la creación de in-
terfaces de usuario visualmente atracti-
vas y responsivas. CSS se ha expandido y
evolucionado a lo largo del tiempo, con
varias especificaciones y módulos que se
añaden para ofrecer mayor control y fle-
xibilidad en el diseño web.

18 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO VI – CSS. Introducción
Selector
Página oficial en MDN
https://developer.mozilla.org/es/docs/Web/CSS/CSS_selectors

Los selectores en CSS son patrones que se utilizan para seleccionar y manipular ele-
mentos HTML.
Pueden hacer referencia a tipos de etiquetas específicas, identificadores, clases, atri-
butos o estados de un elemento. Al determinar el alcance de la aplicación de una re-
gla de estilo, los selectores ofrecen gran precisión y flexibilidad en el diseño.

Propiedad
Una propiedad en CSS define qué aspecto del elemento HTML se va a estilizar. Ca-
da propiedad tiene un nombre y está asociada con un valor específico. Por ejemplo,
la propiedad color controla el color del texto, mientras que font-size determina el ta-
maño de la fuente. Las propiedades y sus valores permiten a los desarrolladores con-
trolar detalladamente el estilo de los elementos en una página.

Regla
Una regla en CSS se compone de un selector y un bloque de declaración. El bloque
de declaración contiene una o más declaraciones, cada una compuesta por una pro-
piedad y un valor. Por ejemplo, la regla p {color: blue;} especifica que todos los pá-
rrafos (<p>) deben tener un color de texto azul. Las reglas permiten aplicar estilos de
manera coherente y modular.

Usando CSS
Integrar CSS con HTML es crucial para diseñar y estilizar páginas web de manera efec-
tiva. Hay diferentes métodos para incluir estilos CSS en documentos HTML, y cada
uno de ellos tiene sus propias ventajas y casos de uso.

19 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO VI – CSS. Introducción
Formas de usar CSS en HTML:
1. Etiqueta link: utiliza la etiqueta <link> en el <head> del documento HTML para re-
ferenciar un archivo externo de CSS. Este método es recomendable para mante-
ner los estilos separados del contenido, facilitando la mantenibilidad del código.
2. Etiqueta style: este método incluye el código CSS directamente dentro del docu-
mento HTML utilizando la etiqueta <style>. Resulta útil para estilos específicos de
una página en particular.
3. Atributo style: se pueden aplicar estilos directamente a un elemento HTML espe-
cífico usando el atributo style. Esto se utiliza generalmente para estilos únicos y es-
pecíficos que no se repetirán en otros lugares.

20 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO VI – CSS. Introducción
 CSS
Módulo VII–
Selectores

Página oficial en MDN

https://developer.mozilla.org/en-US/docs/
Learn/CSS/Building_blocks/Selectors

Los selectores en CSS son fundamen-

tales para aplicar estilos a distintos ele-
mentos HTML de una página web.
Al funcionar como un criterio de búsque-
da, permiten identificar elementos espe-
cíficos en el árbol del documento y, por
ende, determinar a qué elementos se les
aplicará un conjunto de reglas de estilo.
Los selectores pueden ser desde simples,
como seleccionar por tipo de etiqueta,
hasta complejos, como seleccionar el pri-
mer hijo de un elemento.
Existen diversos tipos de selectores, cada
uno con su propio nivel de especificidad
y funcionalidad.

Especificidad
La especificidad en CSS se refiere a la
prioridad que tiene una regla de estilo
en relación con otras. Cuando múltiples
reglas se aplican a un mismo elemento,
la especificidad determina cuál de ellas
prevalecerá.

21 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO VII – CSS. Selectores
Esta se calcula según una jerarquía: los selectores de ID tienen una especificidad ma-
yor que los selectores de clase, atributo y tipo, que a su vez tienen una especificidad
mayor que los selectores universales.

Selectores básicos
Los selectores básicos son los pilares para empezar a aplicar estilos en CSS. Permiten
seleccionar elementos basándose en su ID, clase, tipo de etiqueta o de forma univer-
sal.
• Selector de ID: selecciona un elemento basado en su atributo id. Tiene alta espe-
cificidad (0,1,0,0).
• Selector de Clase: selecciona elementos basados en su atributo class. Su especi-
ficidad es media (0,0,1,0).
• Selector de Etiqueta: selecciona elementos basados en su tipo de etiqueta. Tiene
baja especificidad (0,0,0,1).
• Selector Universal: selecciona todos los elementos. Tiene la especificidad más ba-
ja (0,0,0,0).

Pseudo-selectores
Los pseudoselectores en CSS permiten seleccionar elementos basándose en su esta-
do o posición relativa en el documento. Ofrecen una gran versatilidad al permitir apli-
car estilos sin modificar la estructura HTML.
• :hover: selecciona un elemento cuando el cursor está sobre él.
• :first-child: selecciona el primer hijo de un elemento.
• :last-child: selecciona el último hijo de un elemento.

22 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO VII – CSS. Selectores
Pseudo-elementos
Los pseudo-elementos en CSS permiten estilizar partes específicas de un elemento,
como su primera línea o su primer carácter, que no serían seleccionables de otra ma-
nera.
• ::before: inserta contenido antes del contenido de un elemento.
• ::after: inserta contenido después del contenido de un elemento.
• ::first-line: selecciona la primera línea de un bloque de texto.

23 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO VII – CSS. Selectores
 CSS
Módulo VIII–
Unidades
de medida

Página oficial en MDN

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_
units

Las unidades de medida en CSS son esenciales para establecer valores precisos pa-
ra diversas propiedades. Permiten que los desarrolladores definan tamaños, espacios,
márgenes, y otros aspectos visuales de los elementos de una página web de manera
consistente y adaptable a diferentes tamaños de pantalla y resoluciones.

Cuando hablamos de medidas en CSS y tenemos en cuenta las principales, observa-

mos como a nivel de accesibilidad la mejor de ellas es la medida em como medida
general para cualquier propiedad.

24 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO VIII – CSS. Unidades de medida
En la vida real el «em» puede darnos varios problemas, como recalcular margin o pad-
ding si configuramos el font-size de un elemento, por ello si no utilizamos em para to-
do podemos definir que:
• em es la medida ideal para tipografías (font-size)
• rem es la medida ideal para propiedades box-model (margin, padding, gap, bor-
der...)
• % es la medida ideal para anchos (width) y alturas (height)
• px es la medida ideal para valores muy pequeños como 1px, 2px
• fr es la ideal para configurar la propiedad grid-template-columns con display:grid

calc
La función calc() en CSS permite realizar cálculos directamente en las hojas de esti-
lo para determinar el valor de una propiedad. Es útil cuando se desean combinar di-
ferentes unidades de medida o realizar cálculos entre ellas. Es importante tener en
cuenta que debe haber un espacio antes y después del operador utilizado en calc(),
de lo contrario, el valor de la propiedad se considerará inválido.

25 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO VIII – CSS. Unidades de medida
 CSS
Módulo IX–
Reset CSS/
Normalizadores

El uso de Reset CSS o normalizadores es

esencial para crear una experiencia de
usuario coherente en diferentes nave-
gadores y plataformas. Los estilos prede-
terminados de los navegadores pueden
variar significativamente, y usar un con-
junto de reglas de reseteo ayuda a esta-
blecer un punto de partida común, eli-
minando inconsistencias y permitiendo
que los diseñadores web tengan un ma-
yor control sobre la apariencia de los ele-
mentos.
Lista de algunos resets:
1. Reset de Meyer: es uno de los resets
más conocidos, creado por Eric Me-
yer. Este reset aborda una amplia ga-
ma de elementos y propiedades.
2. Normalize.css: a diferencia de un re-
set tradicional, normalize.css no eli-
mina todos los estilos predetermina-
dos sino que los hace más consisten-
tes entre los navegadores.
3. Reset CSS PRO: es un reset que ho-
mogeniza los estilos de las cajas, tipo-
grafías y evita problemas en formula-
rios.
4. MiniReset.css: es una versión más li-
gera y minimalista que solo resetea
los estilos esenciales.

26 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO IX – CSS. Reset CSS
5. Bootstrap Reboot: Bootstrap incluye su propio conjunto de reglas de reseteo lla-
mado Reboot, que se basa en normalize.css pero con algunos ajustes adicionales.

27 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO IX – CSS. Reset CSS
 CSS
Módulo X–
Propiedades
Box-model

Página oficial en MDN

https://developer.mozilla.org/en-US/docs/
Learn/CSS/Building_blocks/The_box_
model

Ancho y alto
El ancho (width) y el alto (height) de un ele-
mento HTML son propiedades funda-
mentales en CSS que permiten contro-
lar las dimensiones de dicho elemento.
Estas propiedades pueden tener valores
fijos (como px, em, rem) o porcentuales
(%) en relación con el contenedor padre.
• width: define el ancho de un elemen-
to.
• height: define el alto de un elemento.
• max-width: establece el ancho máxi-
mo de un elemento.
• min-width: establece el ancho míni-
mo de un elemento.
• max-height: establece la altura máxi-
ma de un elemento.
• min-height: establece la altura míni-
ma de un elemento.

28 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO X – CSS. Propiedades Box-model
Margin
La propiedad margin en CSS se utiliza para crear espacio alrededor de los elementos,
fuera de los bordes definidos. Es una manera efectiva de ajustar la distribución y ali-
neación de los elementos dentro de un diseño.
• margin-top: establece el margen superior.
• margin-right: establece el margen derecho.
• margin-bottom: establece el margen inferior.
• margin-left: establece el margen izquierdo.

Padding
La propiedad padding se utiliza para generar espacio entre el contenido de un ele-
mento y su borde. A diferencia de margin, padding agrega espacio dentro del ele-
mento.
• padding-top: define el relleno superior.
• padding-right: define el relleno derecho.
• padding-bottom: define el relleno inferior.
• padding-left: define el relleno izquierdo.

29 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO X – CSS. Propiedades Box-model
Border
La propiedad border en CSS permite especificar el estilo, el ancho y el color del bor-
de de un elemento.
Estas propiedades de border se especifican generalmente en un orden determinado:
primero el ancho, luego el estilo y finalmente el color.
El borde de un elemento no solo proporciona una delimitación visual, sino que tam-
bién puede influir en el espaciado y el diseño, especialmente cuando se combinan
con margin y padding.

30 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO X – CSS. Propiedades Box-model
 CSS
Módulo XI–
Tipografía

Página oficial en MDN

https: //developer.mozilla.org/en-US/
docs/Web/CSS/font

Font
La tipografía es un elemento crucial en
el diseño web y la propiedad font en CSS
permite a los desarrolladores controlar el
estilo, tamaño y familia de la fuente utili-
zada en un sitio web. Esta propiedad es,
en realidad, un atajo que permite esta-
blecer varias propiedades relacionadas
con la fuente en una sola línea.
• font-family: define la familia de la fuen-
te a utilizar.
• font-size: establece el tamaño de la
fuente.
• font-weight: controla el grosor de los
caracteres.
• font-style: determina el estilo de la fuen-
te, como cursiva o normal.
• font-variant: controla la variante de la
fuente, como pequeñas mayúsculas.
• line-height: establece la altura de lí-
nea.

31 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XI – CSS. Tipografía
• font-stretch: permite ajustar el ancho de la fuente.

Text
Las propiedades de texto en CSS proporcionan control sobre la presentación del con-
tenido textual en la web, permitiendo ajustar aspectos como la alineación, el espacia-
do entre letras y el color del texto.
• text-align: establece la alineación horizontal del texto.
• text-decoration: aplica decoración al texto como subrayado, línea sobre el texto,
etc.
• text-indent: establece el sangrado de la primera línea de un bloque de texto.
• text-transform: controla la capitalización del texto.
• letter-spacing: ajusta el espacio entre caracteres.
• word-spacing: ajusta el espacio entre palabras.
• text-shadow: aplica sombra al texto.
• color: define el color del texto.

32 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XI – CSS. Tipografía
 CSS
Módulo XII–
Position

Página oficial en MDN

https://developer.mozilla.org/es/docs/
Web/CSS/position

La propiedad position en CSS se utili-

za para controlar el método de posicio-
namiento de un elemento dentro de su
contenedor. Esta propiedad define có-
mo se colocan y se solapan los elemen-
tos, permitiendo un control más preciso
sobre la disposición de los elementos en
la página.
• static: este es el valor por defecto. Los
elementos se posicionan de acuerdo
con el flujo normal del documento.
• relative: el elemento se posiciona en
relación con su posición original en el
flujo del documento.
• absolute: el elemento se posiciona
en relación con su contenedor padre
más cercano que tiene un posiciona-
miento distinto a static.
• fixed: el elemento se posiciona en re-
lación con la ventana del navegador y
permanece fijo al hacer scroll.
• sticky: es una mezcla entre relative y
fixed. El elemento se trata como rela-

33 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XII – CSS. Position
 tive hasta que su bloque contenedor alcanza un punto de desplazamiento deter-
minado en la pantalla.

Flow
Cuando hablamos del flujo (Flow) podemos definir que cada position tiene uno con-
creto:
• Position static: flujo normal o normal flow
• Position relative: flujo impuesto o removed flow
• Position absolute: flujo impuesto o removed flow
• Position fixed: flujo impuesto o removed flow

34 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XII – CSS. Position
 CSS
Módulo XIII–
Flex/Flexbox

Página oficial en MDN

https://developer.mozilla.org/es/docs/
Learn/CSS/CSS_layout/Flexbox

Flexbox, o el modelo de caja flexible, es

un enfoque moderno en CSS para el di-
seño de estructuras complejas y alinea-
ción de elementos en una forma más
predecible y eficiente en comparación
con los modelos de diseño tradicionales.
Se orienta principalmente a proporcio-
nar una distribución óptima del espacio
a lo largo de un eje principal, que puede
ser tanto horizontal como vertical.
El uso de Flexbox facilita la creación de
diseños responsivos sin tener que recu-
rrir a técnicas como flotados o posiciona-
mientos, lo cual puede resultar complica-
do y propenso a errores. Es especialmen-
te útil en aplicaciones web complejas y
en pequeños componentes.

Propiedades
container
Para utilizar Flexbox, se define un con-
tenedor flex utilizando la propiedad dis-

35 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XIII – CSS. Flex/Flexbox
play con el valor flex o inline-flex. A continuación se describen las propiedades apli-
cables a los contenedores flex:
• display: define un elemento como bloque flexible (flex) o bloque flexible en línea
(inline-flex).
• flex-direction: define la dirección principal en la que se quieren alinear los elemen-
tos flexibles.
• flex-wrap: define si los elementos flexibles deben saltar de línea o no.
• flex-flow: es una propiedad abreviada para flex-direction y flex-wrap.
• justify-content: alinea los elementos hijos a lo largo del eje principal.
• align-items: alinea los elementos hijos a lo largo del eje transversal.
• align-content: alinea las líneas flex cuando el espacio del contenedor excede al de
los elementos.

Propiedades Item
Las propiedades de los elementos flexibles permiten ajustar el comportamiento de
estos dentro de un contenedor flex:
• order: define el orden de aparición del elemento en el contenedor.
• flex-grow: define la habilidad del elemento para crecer si es necesario.
• flex-shrink: define cómo debe reducirse el tamaño del elemento.
• flex-basis: define el tamaño base del elemento antes de distribuir el espacio res-
tante.
• flex: es una propiedad abreviada para flex-grow, flex-shrink y flex-basis.
• align-self: permite la alineación predeterminada del elemento o anula la align-
items del contenedor.

36 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XIII – CSS. Flex/Flexbox
37 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XIII – CSS. Flex/Flexbox
 CSS
Módulo XIV–
Grid

Página oficial en MDN

https://developer.mozilla.org/es/docs/
Web/CSS/grid

CSS Grid Layout es un sistema bidimen-

sional de diseño que transforma el con-
tenedor en una «cuadrícula» imagina-
ria donde se pueden posicionar elemen-
tos de manera más flexible y controlada.
Grid permite crear layouts complejos y
responsivos con una sintaxis más clara y
menos propensa a errores, lo que lo ha-
ce una herramienta poderosa y eficiente
para diseñadores y desarrolladores.
A diferencia de otros sistemas de diseño,
como Flexbox, que se centra en la distri-
bución a lo largo de un eje, Grid permi-
te controlar simultáneamente las filas y
columnas de la estructura, facilitando la
creación de diseños que antes requerían
el uso de múltiples herramientas y técni-
cas complicadas.

38 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XIV– CSS. Grid
Propiedades container
Para convertir un elemento en un contenedor Grid, se usa la propiedad display con
el valor grid o inline-grid. Aquí se describen las propiedades aplicables a los contene-
dores Grid:
• display: establece el elemento como una cuadrícula (grid) o cuadrícula en línea
(inline-grid).
• grid-template-columns / grid-template-rows: define el tamaño de las columnas
y filas.
• grid-template-areas: define áreas y las asocia a un nombre.
• grid-template: es una propiedad abreviada para grid-template-rows, grid-tem-
plate-columns y grid-template-areas.
• grid-column-gap / grid-row-gap: define el espacio entre las columnas y filas.
• grid-gap: es una propiedad abreviada para grid-column-gap y grid-row-gap.
• justify-items: alinea los elementos a lo largo del eje de las columnas.
• align-items: alinea los elementos a lo largo del eje de las filas.
• place-items: es una propiedad abreviada para align-items y justify-items.
• justify-content: alinea la cuadrícula a lo largo del eje de las columnas.
• align-content: alinea la cuadrícula a lo largo del eje de las filas.
• place-content: es una propiedad abreviada para align-content y justify-content.

Propiedades Item
Las propiedades de los elementos Grid permiten controlar la ubicación y el tamaño
de los items dentro del contenedor Grid:
• grid-column-start / grid-column-end / grid-row-start / grid-row-end: define la
ubicación de un elemento en la cuadrícula.
• grid-column / grid-row: son propiedades abreviadas para grid-column-start /
grid-column-end y grid-row-start / grid-row-end, respectivamente.

39 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XIV– CSS. Grid
• grid-area: define el nombre del área al cual pertenece el elemento o especifica sus
posiciones en la cuadrícula.
• justify-self: alinea un elemento dentro de su área en el eje de las columnas.
• align-self: alinea un elemento dentro de su área en el eje de las filas.
• place-self: es una propiedad abreviada para align-self y justify-self.

40 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XIV– CSS. Grid
 CSS
Módulo XV–
Color

Página oficial en MDN

https://developer.mozilla.org/es/docs/
Web/CSS/color_value

Color
El uso del color en CSS permite perso-
nalizar el aspecto visual de un sitio web,
afectando tanto el texto como los ele-
mentos gráficos. Existen diferentes ma-
neras de especificar colores en CSS, y es-
tas pueden ser utilizadas según las nece-
sidades del diseñador.
• color: define el color del texto de un
elemento.
• border-color: define el color del borde
de un elemento.
Especificación de colores:
• Palabras clave: como red, blue, green,
etc.
• Hexadecimal: como #FF5733, #333, etc.
• RGB: como rgb(255, 87, 51).
• RGBA: como rgba(255, 87, 51, 0.5) (in-
cluye canal alfa para opacidad).
• HSL: como hsl(12, 100%, 60%).
• HSLA: como hsla(12, 100%, 60%, 0.5)

41 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XV– CSS. Color
Background-color
El color de fondo de un elemento se puede especificar utilizando la propiedad back-
ground-color. Ésta permite aplicar un color sólido que cubre el área del contenido, el
padding y el borde del elemento.
• background-color: Define el color de fondo de un elemento.
Especificación de colores: similar a la propiedad color, puede utilizar palabras clave,
valores hexadecimales, RGB, RGBA, HSL, y HSLA.

Opacidad
La propiedad opacity en CSS permite ajustar la opacidad de un elemento, lo cual de-
termina cuán «transparente» aparece dicho elemento en la página.
• opacity: establece el nivel de opacidad de un elemento, con valores que van desde
0 (completamente transparente) hasta 1 (completamente opaco).

42 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XV– CSS. Color
 CSS
Módulo XVI–
Imágenes
de fondo

Página oficial de MDN

https: //developer.mozilla.org/en-US/
docs/Web/CSS/background

La propiedad background- en CSS per-

mite establecer una o más imágenes co-
mo fondo de un elemento. Al usar imá-
genes de fondo, se pueden crear efectos
visuales interesantes y mejorar la expe-
riencia del usuario sin la necesidad de re-
currir a imágenes incrustadas en el HT-
ML.
Las propiedades que están asociadas a
ella son:
• background-image: define una o más
imágenes a utilizar como fondo.
• background-repeat: establece si/how
una imagen de fondo se repetirá.
• background-size: define el tamaño de
la imagen de fondo.
• background-position: establece la po-
sición inicial de una imagen de fondo.
• background-attachment: determina
si una imagen de fondo se desplaza-
rá con el resto de la página o queda-
rá fija.

43 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XVI– CSS. Imágenes de fondo
• background-clip: define hasta dónde llegará el fondo (borde, padding, contenido).
• background-origin: establece la caja de referencia para la posición y el tamaño del
fondo.

44 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XVI– CSS. Imágenes de fondo
 CSS
Módulo XVII–
Efectos visuales

Degradados CSS
Página oficial de MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient

Los degradados en CSS proporcionan la capacidad de mostrar transiciones suaves

entre dos o más colores. Esto permite crear efectos visuales ricos sin necesidad de
imágenes y existen varios tipos:
• linear-gradient: crea un degradado lineal.
• radial-gradient: crea un degradado radial.
• conic-gradient: crea un degradado cónico.
• repeating-linear-gradient: crea un degradado lineal repetitivo.
• repeating-radial-gradient: crea un degradado radial repetitivo.

45 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XVII– CSS. Efectos visuales
Sombras
Página oficial de MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

CSS permite aplicar sombras a elementos, creando una sensación de profundidad y

dimensión.
• box-shadow: aplica una sombra a la caja de un elemento.
• text-shadow: aplica una sombra al texto de un elemento.

Modos de fusión
Página oficial de MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Los modos de fusión determinan cómo se combinan los píxeles de dos elementos
que se superponen.
• mix-blend-mode: define cómo se mezcla el contenido de un elemento con su
fondo.

46 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XVII– CSS. Efectos visuales
Filtros
Página oficial de MDN
https://developer.mozilla.org/es/docs/Web/CSS/filter

CSS proporciona filtros que permiten ajustar la apariencia de los elementos de ma-
nera no destructiva.

• filter: aplica operaciones gráficas (como desenfoque o brillo) a un elemento.

Transformaciones
Página oficial de MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Las transformaciones en CSS permiten modificar la posición, tamaño y forma de un

elemento.
• transform: aplica una transformación 2D o 3D a un elemento.
• transform-origin: cambia el punto de origen de la transformación.

47 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XVII– CSS. Efectos visuales
 CSS
Módulo XVIII–
Animaciones

Página oficial de MDN

https: //developer.mozilla.org/en-US/
docs/Web/CSS/animation

Las animaciones en CSS permiten crear

transiciones fluidas y dinámicas entre di-
ferentes estilos de un elemento.
Se pueden utilizar para mejorar la inte-
ractividad y la experiencia del usuario en
una página web y a diferencia de las sim-
ples transiciones CSS, las animaciones
ofrecen un control más preciso sobre los
diferentes estados de un elemento du-
rante el período de la animación.

Animation
Las animaciones en CSS se crean combi-
nando dos componentes principales: la
propiedad animation y la regla @keyfra-
mes.
• animation-name: define el nombre
de la animación.
• animation-duration: establece cuán-
to tiempo tardará en completarse una
iteración de la animación.

48 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XVIII– CSS. Animaciones
• animation-timing-function: define la velocidad de la animación.
• animation-delay: especifica el tiempo que debe esperar antes de iniciar la anima-
ción.
• animation-iteration-count: define cuántas veces se repetirá la animación.
• animation-direction: establece si la animación debe reproducirse en reversa, al-
ternar, etc.
• animation-fill-mode: define el estado de la animación cuando no está reprodu-
ciéndose.
• animation-play-state: define si la animación está en ejecución o pausada.

Keyframes
La regla @keyframes se utiliza para crear animaciones estableciendo diferentes pun-
tos (keyframes) a lo largo de la animación.

• from/to: establece el punto de inicio (0%) y finalización (100%) de la animación.

• % (porcentaje): especifica los estilos en diferentes puntos a lo largo de la anima-
ción.

49 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XVIII– CSS. Animaciones
 CSS
Módulo XIX–
Media Queries

Página oficial de MDN

https://developer.mozilla.org/es/docs/
Web/CSS/CSS_media_queries/Using_
media_queries

Los Media Queries son una característica

de CSS3 que permite aplicar estilos con-
dicionalmente en función de ciertas pro-
piedades del dispositivo de visualización,
como su ancho, alto, resolución, etc. Es-
to hace posible la creación de diseño res-
ponsivo, donde el contenido de una pági-
na web se ajusta y optimiza para diferen-
tes tamaños de pantalla y dispositivos.
El uso de Media Queries ha revolucionado
la forma en que se diseñan las páginas
web, permitiendo a los desarrolladores
crear experiencias de usuario más fluidas
y adaptativas. Con esta técnica, se puede
cambiar el estilo de la página de acuerdo
a las características del dispositivo que se
esté utilizando para visualizarla, garanti-
zando así una experiencia de usuario co-
herente en diferentes plataformas.

50 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XIX– CSS. Media Queries
Breakpoints
Los breakpoints son puntos específicos de medida, como un ancho de pantalla, don-
de el contenido de una página cambia su disposición para adaptarse mejor al espa-
cio disponible y debes tomarlos como una referencia, no como medidas absolutas.
• Extra pequeño (xs): <360px, para teléfonos móviles pequeños
• Pequeño (sm): ≥480px, para teléfonos móviles
• Mediano (md): ≥768px, para tablets en orientación horizontal y algunos ordena-
dores.
• Grande (lg): ≥1200px, para ordenadores de escritorio
• Extra grande (xl): ≥1600px, para pantallas grandes.

Media-Query
La regla @media en CSS se utiliza para definir Media Queries. Dentro de esta regla, se
especifican los estilos que deben aplicarse condicionalmente.
Tipos de Media Queries:
• max-width: aplica estilos para dispositivos con una anchura de pantalla máxima
especificada.
• min-width: aplica estilos para dispositivos con una anchura de pantalla mínima
especificada.
• orientation: aplica estilos según la orientación del dispositivo (landscape o portrait).
• resolution: aplica estilos según la resolución de la pantalla.

51 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XIX– CSS. Media Queries
 JAVASCRIPT
Módulo XX–
Introducción

Página oficial en MDN

https://developer.mozilla.org/es/docs/
Web/JavaScript

JavaScript es un lenguaje de programa-

ción de alto nivel, interpretado y dinámi-
camente tipado, que ha evolucionado
desde su creación para manipular pági-
nas web hasta convertirse en una herra-
mienta omnipresente en el desarrollo
moderno, tanto en el lado del cliente co-
mo del servidor.
Originalmente diseñado por Brendan
Eich en 1995, JavaScript se ha estandari-
zado bajo el nombre de ECMAScript. EC-
MAScript actúa como la base sobre la
cual se construye JavaScript, y sus espe-
cificaciones, publicadas por ECMA Inter-
national, han ido introduciendo a lo largo
de los años mejoras y nuevas característi-
cas que han enriquecido y modernizado
el lenguaje.

52 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XX– JS. Introducción
Modos de uso: Floppy dolos en tiempo de ejecución. Por otro
lado, el modo estricto introduce restric-
Mode y «use strict» ciones adicionales y convierte algunos
errores silenciosos en errores explícitos,
JavaScript puede operar en dos modos facilitando la detección de problemas en
distintos: el modo tradicional, conocido las etapas iniciales del desarrollo. Este úl-
informalmente como «Floppy Mode», y el timo modo, al ser más riguroso, ayuda a
modo estricto, activado con la directiva los desarrolladores a escribir código más
«use strict». limpio y predecible, al tiempo que pre-
El modo Floppy es más permisivo y tole- viene ciertas acciones potencialmente
rante con ciertos errores, autocorrigién- problemáticas.

53 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XX– JS. Introducción
 JAVASCRIPT
Módulo XXI–
Constantes,
variables y scope

Variables
Página oficial en MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

Los usamos para guardar (almacenar) un valor que puede cambiar a lo largo del có-
digo y su declaración estará relacionada con donde se pueden usar, es decir su scope.

Constantes
Página oficial en MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/
const

54 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXI– JS. Constantes, variables...
Las usamos para guardar (almacenar) un valor que no cambia y su declaración esta-
rá relacionada con donde se pueden usar, es decir su scope.

En el caso tanto de las variables let como de las constantes recuerda que no pode-
mos acceder a ellas antes de declararlas; es decir, no tienen hoisting sino TDZ (Tem-
poral Dead Zone).

Scope
Página oficial en MDN
https://developer.mozilla.org/es/docs/Glossary/Scope

Define desde dónde se puede acceder, y manipular, tanto a variables como a cons-
tantes dentro del código de JavaScript, en otras palabras: desde dónde podemos ac-
ceder a ellas para usarlas. Existen varios tipos:
• Global
• Local
• Bloque

55 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXI– JS. Constantes, variables...
SCOPE GLOBAL variables locales solo son reconocidas por
su función, se permite reutilizar el mismo
Las variables (let,var) o constantes decla- nombre en diferentes funciones.
radas fuera de una función son de tipo
GLOBAL. Las variables globales son acce- Además, estas variables se crean cuando
sibles en todas las funciones y cualquier la función se ejecuta y se eliminan una
parte del script de esa misma página. vez la función se ha completado.

SCOPE LOCAL SCOPE BLOQUE

Las variables (let,var) o constantes decla- Las variables (let) o constantes declara-
radas dentro de una función son de tipo das dentro de bloques como condiciona-
LOCAL. Las variables locales solo pueden les o bucles for son de tipo BLOQUE y só-
utilizarse dentro de la función. Ya que las lo funcionarán dentro de él.

56 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXI– JS. Constantes, variables...
 JAVASCRIPT
Módulo XXII–
Tipos de datos

Página oficial en MDN

https://developer.mozilla.org/es/docs/Web/JavaScript/Data_structures

Es la información que podemos usar dentro de JavaScript y tienen características

propias.
Veremos los tipos de datos:
• Primitivos
• Referencia

57 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXII– JS. Tipos de datos
Primitivos
STRING
Un string (o cadena de texto) es una serie de caracteres, como, por ejemplo, “Hola,
Mundo”. Los string se escriben siempre entre comillas (dobles o simples).

También pueden escribirse unas comillas dentro de otras, siempre y cuando no coin-
cidan entre sí dentro de la cadena:

NUMBER
El tipo de dato Number son números y representan cualquier tipo de número (ente-
ros, con decimales, negativos…)

BOOLEAN
Es un tipo de dato con sólo dos posibles valores, true o false, y tendrán mucha impor-
tancia al ver los condicionales.

58 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXII– JS. Tipos de datos
Referencia
Se guardan en memoria, son mutables y existen varios tipos:
• Arrays
• Objetos

ARRAYS
Es un tipo de dato que puede guardar múltiples valores; es decir, una lista de valores.
Siempre debe especificarse con el símbolo [ ] (corchetes) y cada elemento debe es-
tar separado por , (comas).

Más adelante entraremos en detalle sobre los arrays.

OBJETOS
Un object (u objeto) siempre debe especificarse con el símbolo { } (llaves) y cada pro-
piedad del elemento debe estar separado por , (comas) y pares de “nombre: valor”
(en inglés “key : value”).

Más adelante entraremos en detalle sobre los objetos.

59 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXII– JS. Tipos de datos
Otros tipos
Existen otros tipos de datos que nos encontraremos cuando programemos en Java-
Script:
• Undefined: un undefined (o valor indefinido) ocurre cuando una variable no po-
see ningún valor.
• Empty: un empty (o vacío) no tiene nada que ver con un “undefined” ya que un
empty ocurre cuando el tipo de dato es string pero no posee valor alguno.
• Null: un null (o nulo) es literalmente “nada”. Se supone que es algún valor que ni
siquiera existe.
• NaN: Not a Number.

Conversión de tipos
En ciertos casos nos veremos en la necesidad de convertir un tipo de dato en otro. Por
ejemplo, si queremos hacer algún cálculo, no podremos sumar strings, por ejemplo:

60 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXII– JS. Tipos de datos
Truthy/ Falsy
Página oficial en MDN
https://developer.mozilla.org/en-US/docs/Glossary/Falsy
https://developer.mozilla.org/es/docs/Glossary/Truthy

Algunos de los valores son evaluados automáticamente como verdaderos o falsos en

contextos booleanos, como las declaraciones condicionales
Los valores que son evaluados como falsos en un contexto booleano se conocen co-
mo Falsy. Estos incluyen false, 0, “” (cadena vacía), null, undefined y NaN.
Por otro lado, los valores que son evaluados como verdaderos en un contexto boolea-
no se denominan Truthy. Cualquier valor que no sea Falsy es considerado Truthy.
Esto incluye objetos, arrays, funciones y cualquier número o cadena no vacía. Enten-
der la diferencia entre valores Truthy y Falsy es crucial para la escritura efectiva de con-
dicionales y la evaluación lógica en JavaScript.

61 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXII– JS. Tipos de datos
 JAVASCRIPT
Módulo XXIII–
Arrays

Página oficial en MDN

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/
Array

Los arrays se utilizan para almacenar múltiples valores en una misma variable.
Son un tipo espacial de “contenedor”, ya que puede almacenar diferentes valores al
mismo tiempo. Si tenemos una lista de elementos, podemos almacenarlos todos sin
necesidad de crear variables independientes.

Creación
La forma más fácil de utilizar un array es creando un array literal o la posibilidad de
utilizar la palabra reservada “new”.

62 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXIII– JS. Arrays
Acceder a los elementos de un array
Podemos acceder a datos concretos de un array haciendo referencia a su posición
entre los indices del mismo.

Propiedades
Podemos acceder al número de valores de un array gracias al atributo length.

Métodos de arrays
Los arrays tienen múltiples métodos que podemos usar, revisemos algunos de los
más usados.

63 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXIII– JS. Arrays
UNSHIFT
Nos permite añadir un valor al inicio del array.

PUSH
Nos permite añadir un valor al final del array.

SPLICE
El método splice puede usarse para añadir nuevos elementos a un array o ambién
puede usarse splice() para eliminar elementos del array sin dejar “huecos” en el array.

INDEXOF
El método indexOf() busca un valor concreto dentro de un conjunto de valores (array,
texto...) y devuelve su posición.
Si el valor de un indexOf() no se encuentra devolverá el valor -1, en caso positivo
devolverá el índice de su posición.

64 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXIII– JS. Arrays
REVERSE
Nos permite darle la vuelta a los valores del array.

JOIN
Nos permite generar un string uniendo los valores de un array.

FOREACH
Nos permite recorrer un array de elementos dándonos acceso tanto al valor como a la
posición de ese valor. Este método no devuelve nada.

65 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXIII– JS. Arrays
MAP
Nos permite recorrer un array de elementos dándonos acceso tanto al valor como a la
posición de ese valor. Este método devuelve todos los valores (si se lo aplicamos).

FIND
Nos permite recorrer un array de elementos dándonos acceso al valor.
Cuando encuentra un valor con la condición que le damos, devuelve ese valor y pa-
ra de buscar.

SOME
Nos permite recorrer un array de elementos tenemos acceso al valor.
Cuando encuentra un valor con la condición que le damos, devuelve true/false y para
de buscar.

FILTER
Nos permite recorrer un array de elementos dándonos acceso al valor.

66 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXIII– JS. Arrays
Cuando encuentra un valor con la condición que le damos, devuelve el valor y sigue
buscando.

DECONSTRUCCIÓN
Podemos sacar cada uno de los valores sin mencionar las posiciones de un array. Es
decir podemos usar nombres para cada valor. Esto es importante para ReactJS.

67 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXIII– JS. Arrays
 JAVASCRIPT
Módulo XXIV–
Objetos

Página oficial en MDN

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Ob-
ject

Un objeto es un conjunto de propiedades (variables) y métodos (funciones).

Propiedades
Los valores de las propiedades de un objeto pueden ser cualquier tipo de dato: Strings,
Boolean, Number...

68 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXIV– JS. Objetos
ACCEDER A LAS PROPIEDADES

DECONSTRUCCIÓN DE PROPIEDADES
Nos permite guardar en una variable una propiedad de un objeto. Se suele usar mu-
cho en React.

69 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXIV– JS. Objetos
METODOS
Los métodos son las funciones definidas dentro de un objeto.

70 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXIV– JS. Objetos
 JAVASCRIPT
Módulo XXV–
Funciones

Página oficial en MDN

https: //developer.mozilla.org/en-US/
docs/Web/JavaScript/Reference/Global_
Objects/Function

Una función es un bloque de código di-

señado para realizar una tarea concreta.
Solo se ejecutan cuando se las “invoca”
(se las llama).
Cuando se desarrolla una aplicación
compleja, es muy habitual utilizar una y
otra vez las mismas instrucciones. Cuan-
do una serie de instrucciones se repiten
una y otra vez, se complica demasiado el
código fuente de la aplicación, ya que:
• El código de la aplicación es mucho
más largo porque muchas instruccio-
nes están repetidas.
• Si se quiere modificar alguna de las
instrucciones repetidas, se deben ha-
cer tantas modificaciones como veces
se haya escrito esa instrucción, lo que
se convierte en un trabajo muy pesa-
do y muy propenso a cometer errores.

71 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXV– JS. Funciones
Sintaxis
Las funciones se definen con la palabra reservada “function”, seguida de un nombre
y, a su vez, seguido de un ( ) (paréntesis). Los nombres de las funciones pueden con-
te- ner letras, dígitos, barra baja y símbolo de dólar (al igual que las variables).
El paréntesis puede incluir parámetros separados por comas: (parametro1, parame-
tro2...).
El código que debe ejecutarse una vez se invoque a la función se programará dentro
del símbolo { } (llaves).

Invocación
El código dentro de la función se ejecutará solo si “algo” lo invoca (llama):
• Cuando las funciones de JavaScript alcanzan el punto de un return, la función de-
jará de ejecutarse. Si la función fue invocada, devolverá los datos que le pidamos.
• Cuando ocurre un evento (p. ej.: el usuario hace “click” sobre algo). Cuando se le in-
voca directamente desde el código JavaScript.
• Automáticamente (self-invoked).

Return
Cuando las funciones de JavaScript alcanzan el punto de un return, la función dejará
de ejecutarse. Si la función fue invocada, devolverá los datos que le pidamos.

72 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXV– JS. Funciones
Ejemplo de invocación + return

Tipos de funciones
Las funciones pueden ser definidas de diversas maneras como:
• Las funciones nombradas son declaradas con un nombre.
• Las funciones anónimas carecen de nombre y suelen utilizarse como argumento
de otras funciones o como expresiones inmediatas.
• Las funciones generadoras se definen usando function* y permiten realizar ope-
raciones de iteración pausada mediante el uso de yield.
• Las funciones Arrow (() => {}) introducidas en ES6 ofrecen una sintaxis concisa y no
tienen su propio this, tomando el this del contexto circundante.
• LasIIFE(ImmediatelyInvokedFunctionExpression)sonfuncionesqueseejecutaninme-
diatamente después de ser definidas, encapsulando variables y protegiendo el al-
cance global
Cada tipo de función tiene su propio caso de uso, permitiendo a los desarrolladores
escribir código más flexible y legible.

73 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXV– JS. Funciones
 JAVASCRIPT
Módulo XXVI–
Operadores

Página oficial en MDN

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators

Los operadores nos permiten realizar acciones con los diferentes tipos de datos y su
funcionalidad depende tanto del tipo de dato como de la operación que queramos
ejecutar.
Existen varios tipos de operadores en JavaScript:
• Asignación
• Aritméticos
• Lógicos
• Comparación

Asignación

74 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXVI– JS. Operadores
Aritméticos

Lógicos
Recuerda que algunos de estos operadores se usan con valores de JavaScript que
consideramos tanto Truthy como Falsy.
.

Verificación de tipos

75 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXVI– JS. Operadores
 JAVASCRIPT
Módulo XXVII–
Fechas

Página oficial en MDN

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Date

JavaScript posee varios métodos integrados que nos permiten, de una manera muy
sencilla, poder trabajar con fechas y horas. Esto resulta muy útil para poder controlar
todo tipo de información (horas de conexión de usuarios, logs, cuenta-atrás...).
Estos métodos pueden utilizarse para obtener información sobre una fecha:

76 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXVII– JS. Fechas
 JAVASCRIPT
Módulo XXVIII–
Math

Página oficial en MDN

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Math

El objeto Math permite realizar tareas matemáticas de una manera muy ágil y sen-
cilla.

Propiedades

77 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXVIII– JS. Math
Métodos
ROUND
Función para redondear un número al entero más cercano o a una cantidad especí-
fica de decimales.

POW
Función para calcular la potencia de un número, elevando una base a un exponen-
te dado.

RANDOM
Función para generar un número aleatorio en un rango determinado.

SQRT
Función para calcular la raíz cuadrada de un número.

78 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXVIII– JS. Math
 JAVASCRIPT
Módulo XXIX–
Condiciones

Página oficial en MDN

https://developer.mozilla.org/es/docs/
Web/JavaScript/Reference/Statements/
if...else

Las sentencias condicionales se utilizan

para realizar diferentes acciones y com-
probaciones según se cumplan o no cier-
tos requisitos.
Cuando escribimos código, dependien-
do de ciertas “decisiones”, desearemos
que se ejecuten unas acciones u otras.
Es ahí donde entran en juego las condi-
ciones. Podemos crear condiciones pa-
ra realizar las siguientes acciones depen-
diendo de lo que queramos comprobar:
• Usaremos “if” para especificar un blo-
que de código que se ejecutará si una
condición específica se cumple.
• Usaremos “else” para especificar un
bloque de código que se ejecutará si
esa misma condición no se cumple.

79 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXIX– JS. Condiciones
• Usaremos “else if” para especificar una nueva condición para probar nuevamente
si la primera condición no se cumple.
• Usaremos “switch” para especificar varios bloques alternativos de código que pue-
den ejecutarse (es una alternativa al ”if” pero ofrece muchas más limitaciones y
tarda más en ejecutarse, por lo que cada vez se usa menos en JavaScript).

If

Else

80 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXIX– JS. Condiciones
Else if

81 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXIX– JS. Condiciones
 JAVASCRIPT
Módulo XXX–
Bucles

Página oficial en MDN

https://developer.mozilla.org/es/docs/
Web/JavaScript/Guide/Loops_and_itera-
tion

Los bucles son prácticos, si deseamos eje-

cutar el mismo código una y otra vez, y
cada vez con un valor diferente. Son blo-
ques de código que se ejecutan un nú-
mero X de veces. Existen diferentes tipos
de bucles:
• for
• while (no muy usado en JavaScript
pero sí en PHP)
• do... while (en desuso)
• forEach() (visto anteriormente en los
arrays)

For
• Inicio del contador: se ejecuta (una
vez) antes de la ejecución del bloque
de código.
• Condición: define la condición que
debe cumplirse para seguir ejecutan-
do el código.

82 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXX– JS. Bucles
• Fin de Iteración: se ejecuta (cada vez) después de que el bloque de código se ha-
ya ejecutado.

EJEMPLO:

83 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXX– JS. Bucles
 JAVASCRIPT
Módulo XXXI–
BOM

El BOM (Browser Object Model) permite a JavaScript comunicarse con el navegador.

No existe un estándar oficial para el BOM, pero desde que los navegadores moder-
nos han implementado (casi) los mismos métodos y propiedades para la interactivi-
dad con JavaScript se puede utilizar sin mayor inconveniente en todos los navegado-
res modernos..

Objeto window
Página oficial en MDN
https://developer.mozilla.org/es/docs/Web/API/Window

El objeto “window” está soportado en todos los navegadores. Representa la propia ven-
tana del navegador y posee además, algunos métodos integrados:

84 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXXI– JS. BOM
 JAVASCRIPT
Módulo XXXII–
DOM

Página oficial en MDN

https://developer.mozilla.org/es/docs/
Web/API/Document

Con el DOM (Document Object Model) de

HTML, JavaScript puede acceder y reali-
zar cambios en todos los elementos de
un documento HTML.
A las acciones que el DOM puede realizar
sobre los elementos de HTML se les lla-
ma métodos y a los valores que pueden
tomar, propiedades.
Al tener acceso a dichos métodos y pro-
piedades, el DOM puede especificarlos o
cambiarlos con total libertad.

Selección
de elementos
Cuando seleccionamos elementos, guar-
damos en una variable un elemento de
HTML.
Si guardamos varios elementos, enton-
ces se genera una Lista de Nodos

85 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXXII– JS. DOM
Clases
La propiedad classList nos permite ejecutar acciones con las clases de un elemento.

Eventos
Los eventos son acciones que les ocurren a los elementos HTML. Cuando se usa Ja-
vaScript en las páginas HTML, éste puede “reaccionar” a esos eventos.

86 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXXII– JS. DOM
ASIGNAR EVENTOS
Podemos añadir eventos a una o varias etiquetas HTML.

TIPOS DE EVENTOS
Existen múltiples tipos de eventos, dependiendo de la acción que busquemos ejecutar.

Crear HTML desde JS

Cuando creamos elementos siempre realizaremos los siguientes pasos:
• Usar createElement() dentro de una variable
• Asignar los atributos necesarios
• Añadir esa variable a algún elemento HTML

87 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXXII– JS. DOM
 JAVASCRIPT
Módulo XXXIII–
JSON

Página oficial en MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/
JSON
JavaScript Object Notation o JSON, es un tipo de sintaxis específica de JavaScript pa-
ra almacenar e intercambiar datos.
De por sí, no existen arrays asociativos en JavaScript, ya que a este tipo de arrays en
JavaScript se les conoce como Objetos, concretamente objetos JSON.

88 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXXIII– JS. JSON
Si poseemos datos almacenados en un objeto, podemos convertir dicho objeto en
JSON y, por ejemplo, enviar sus datos al servidor. Ejemplo:

Por otro lado, si queremos recibir datos en formato JSON, también podemos conver-
tir dichos datos en un objeto JSON.

89 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXXIII– JS. JSON
 JAVASCRIPT
Módulo XXXIV–
Fetch

Página oficial en MDN

https://developer.mozilla.org/es/docs/
Web/API/Fetch_API

Ahora que conocemos JSON vamos al

funcionamiento de una petición y cada
una de sus partes como:
• Request
• Response
• Promesas
• Fetch

Request
Es un objeto de JavaScript usado pa-
ra crear una petición de recursos (datos)
hacia una URL (normalmente una API).

90 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXXIV– JS. Fetch
Response
Es un objeto de JavaScript que genera una respuesta. El valor de la respuesta al con-
vertirlo usando el método .json() genera una promesa.

Promesas
Es un valor con métodos asociados el cual nos promete que recibiremos un valor en al-
gún momento.

91 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXXIV– JS. Fetch
Fetch
Su uso más habitual es para enviar/recibir los datos de una API externa mediante una
Request y recibiendo una Response.

OPTIONS
Podemos enviar datos extra, como un controlador para cancelar la petición, el tipo de
método o los datos extras como los headers.

92 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXXIV– JS. Fetch
CANCELANDO UNA PETICIÓN

El objeto AbortController nos permite definir cuándo cancelamos la petición para no

dejar la conexión abierta.

93 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXXIV– JS. Fetch
 JAVASCRIPT
Módulo XXXV–
Storage

Página oficial en MDN

https://developer.mozilla.org/es/docs/
Web/API/Storage

La propiedad sessionStorage permite

acceder a un objeto Storage asociado a
la sesión actual.
La propiedad sessionStorage es similar
a localStorage, la única diferencia es que
la información almacenada en localSto-
rage no posee tiempo de expiración; por
el contrario la información almacenada
en sessionStorage es eliminada al finali-
zar la sesión de la página. La sesión de la
página perdura mientras el navegador se
encuentra abierto.
Abrir una página en una nueva pestaña
o ventana iniciará una nueva sesión, lo
que difiere en la forma en que trabajan
las cookies de sesión.
Con sessionStorage los datos persis-
ten sólo en la ventana/tab que los creó,
mientras que con localStorage los datos
persisten entre ventanas/tabs con el mis-
mo origen.

94 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXXV– JS. Storage
Debe tenerse en cuenta que los datos almacenados tanto en localStorage como en
sessionStorage son específicos del protocolo de la página.
Las claves y los valores son siempre cadenas de texto (ten en cuenta que, al igual que
con los objetos, las claves de enteros se convertirán automáticamente en cadenas de
texto).

95 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXXV– JS. Storage
 JAVASCRIPT
Módulo XXXVI–
Timers

Los timers en JavaScript son mecanismos que permiten ejecutar código de manera
diferida en un momento específico o repetidamente en intervalos definidos. Hay dos
tipos principales de timers en JavaScript: setTimeout() y setInterval().

setTimeOut
Página oficial en MDN
https://developer.mozilla.org/es/docs/Web/API/setTimeout

Nos permite ejecutar una función de forma retardada, es decir aplazar la ejecución
de una función definiendo los milisegundos que tarda en ejecutarse.

96 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXXVI– JS. Timers
setInterval
Página oficial en MDN
https://developer.mozilla.org/es/docs/Web/API/setInterval

Basándonos en la sintaxis de setTimeout también existe setInterval que nos permi-

te ejecutar una función de forma cíclica (en bucle) midiendo el tiempo en milisegun-
dos.

97 MANUAL DE DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT /MÓDULO XXXVI– JS. Timers
 * El índice de este manual es interactivo. Si clicas
en cada capítulo o epígrafe te mandará hasta allí.
Y si clicas en el numero de página en la esquina
inferior izquierda de cada página, volverás al ín-
dice.

volver al índice

98 MANUAL DE DISEÑO WEB CON HTML, CSS Y JAVASCRIPT /MÓDULO I – Introducción al diseño web