HTML Básico

2021
Who i am?
Javier Samper Arias

https://github.com/Jsamper92

https://www.linkedin.com/in/javiersamperarias/
Índice
1. Sintaxis
2. Estructura
3. Bloques de contenido
4. Bloques de texto
5. Data Atributos
6. Listados
7. Enlaces
8. Imágenes, audio y video
9. Tablas
10. Formularios
1. Sintaxis

Sintaxis

HTML Básico 4
2. Estructura
Estructura

Diccionario: https://codepen.io/manz/full/maVXvv

HTML Básico 5
Estructura - Head

HTML Básico 6
3. Bloques de contenido

Bloques de contenido
En bloque

En línea
4. Bloques de texto

Bloques de texto

Ejemplo: https://codepen.io/na7acha/pen/bGbZMrM
HTML Básico 8
5. Data Atributos

Elementos - Atributos

https://www.w3schools.com/tags/att_data-.asp
https://developer.mozilla.org/es/docs/Web/CSS/attr()
HTML Básico 9
6. Listados

Listados
● Lista no ordenada ● Lista ordenada

● Listado de descripción

Ejemplos:
https://codepen.io/na7acha/pen/gOYEjZw

HTML Básico 10
7. Enlaces

Enlaces

Url destino Tooltip Dónde se abrirá el documento

HTML Básico 11
8. Imágenes, audio y vídeo

Imágenes, audio y video

HTML Básico 12
 Imágenes - Figure

https://codepen.io/na7acha/pen/VwZREwr

HTML Básico 13
9. Tablas

Tablas

https://codepen.io/na7acha/pen/dybrgeK

HTML Básico 14
10. Formulario

Formularios

Atributos de un formulario

● action
● method

Etiquetas incluidas en un formulario

● Fieldset
● Legend

Ejemplos: https://codepen.io/na7acha/pen/dybrQex?editors=1010

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

HTML Básico 15
Formularios - Elementos

1. Input 4. Button 6. Output

2. Select
5. Datalist

3. Textarea

HTML Básico 16
Formularios – Input types

Type: Radio Type: Checkbox

Type: Text Type: Password

Type: File
Type: Number

HTML Básico 17
Formularios – Input attributes

HTML Básico 18
Etiquetas de formateo
¡¡Recomendable usar hoja de estilos para formatear
texto!!

HTML Básico 19
Práctica

https://github.com/Jsamper92/AcademiaDEX-HTML-CSS-ACCESIBILIDAD-JA
VASCRIPT

HTML Básico 20
Bibliografía
1. https://developer.mozilla.org/es/docs/HTML/HTML5
2. https://www.w3schools.com/html/default.asp
3. https://www.w3.org/
4. https://validator.w3.org/

HTML Básico 21
 CSS Básico

CSS Básico 22
2019
Bloque CSS
1. Usos
2. Sintaxis
3. Selectores
4. Especificidad
5. Cascada y herencia
6. Box model
7. Custom Properties
8. Selectores
9. Unidades
10. Posicionamiento
11. Pseudo-clases
12. Pseudo-elementos
13. Overflow
14. Diseño Responsive

CSS Básico 23
Usos
Estilos en línea

Hoja de estilos externa Hoja de estilos interna

CSS Básico 24
Sintaxis

CSS Básico 25
Cascada y herencia

https://www.w3schools.com/css/exercise.asp?filename=exercise_howto1

CSS Básico 26
 Especificidad

https://specificity.keegan.st/ 🡪 Calculadora de especificidad

CSS Básico 27
Box Model
Cada elemento que definimos en un HTML se mostrará en el navegador como una caja

Todo bloque de HTML, ocupa un espacio que

podemos definir mediante las instrucciones:
• Width
• Max-width
• Height
• Max-height

CSS Básico 28
Position - Position

Ejemplo: https://codepen.io/bthehuman/pen/BNraLo

CSS Básico 29
Pseudo-clases

CSS Básico 30
Pseudo-elementos

CSS Básico 31
 Overflow – Overflow contenido

Scroll-behavior
https://www.campusmvp.es/recursos/post/como-suavizar-scrolls-automaticos-solo-con-CSS-y-scroll-behavior.a
spx
 
Ejercicio Scroll-behavior:
https://codepen.io/jsamper92/pen/YzqQeaa
CSS Básico 32
 Overflow – Overflow textos
White-space: determina como se maneja el espacio en blanco dentro de un elemento.

CSS Básico 33
 Fuentes
En este apartado se comentan las propiedades que permiten describir el tipo de letra (la fuente) en una página web o aplicacion:

● Interlineado: line-height (no es propiamente una característica del tipo de letra, pero se comenta en esta lección)
● La propiedad compuesta font
● Tipo de letra: font-family
● Tamaño del tipo de letra: font-size
● Grosor del trazo (negrita): font-weight

CSS Básico 34
Texto - Unidades

CSS Básico 35
Custom properties

CSS Básico 36
 CSS – Diseño Responsive

2020
Diseño Responsive

● https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS Básico 38
Diseño Responsive - Media queries

https://codepen.io/TrentWalton/full/kqxDy 🡪 Ejemplo
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp🡪Más info

CSS Básico 39
Diseño Responsive - Grid

CSS Básico 40
Diseño Responsive – CSS Grid

● https://css-tricks.com/snippets/css/complete-guide-grid/ 🡪 documentación
● https://codepen.io/IbanVeiss/pen/KJgbJE 🡪 Ejemplo básico Grid

CSS Básico 41
Referencias
1. https://www.w3schools.com/css/default.asp
2. https://developer.mozilla.org/en-US/docs/Learn/CSS
3. https://jigsaw.w3.org/css-validator/
4. https://css-tricks.com
5. https://caniuse.com
6. https://www.w3.org/TR/selectors/#specificity

CSS Básico 42
 CSS - Framework

2021
Índice

1. Qué es un framework CSS

2. Ventajas y desventajas de su uso

3. Boostrap CSS

4. Cómo implementar boostrap en nuestro proyecto

¿Qué es un framework CSS?
Un framework CSS es una biblioteca de estilos visuales genéricos que se emplean para desarrollar una página web.
Además de estos estilos visuales los frameworks CSS, suelen añadir una serie de utilidades, como componentes para hacer cuadros
de diálogo, tablas, carrusel de imágenes, etcétera.

Normalmente podremos instalarlos a través de un link al CDN del framework, o bien mediante su instalación por módulo NPM que nos
suele venir indicado en la documentación del framewok.

Cuando decidimos utilizar un framework CSS hay que tener en cuenta las ventajas y las desventajas que nos aporta el mismo, para
poder decidir si nos compensa usar uno o es mejor usar otras opciones.
Ventajas
Las principales ventajas que nos aporta son las siguientes:

● Acelera el desarrollo de las páginas web, ya que conociendo un poco el framework CSS, se pueden desarrollar las páginas de
una manera más rápida que si lo hacemos desde cero, ya que al tener hecha la estructura base, solo debemos re-estilizarlo.

● Facilita el trabajo en equipo, ya que si hemos desarrollado una página y sus estilos usando un framework, si posteriormente
otra persona necesita modificarlos y conoce ese framework, puede mantener la misma línea de desarrollo de las hojas de estilo y
esa página web.

● Garantiza que todo lo que se desarrolle sea compatible con todos los navegadores, lo que si tuviéramos que hacer nosotros
mismos supondría más tiempo y esfuerzo, y nos da una garantía extra de seguridad, ya que están muy testeados en este
aspecto.

● Los frameworks son mantenidos y evolucionados por la comunidad, por lo que los posibles errores son corregidos y sus
funciones van ampliándose, de manera que si decidimos usarlos, deberemos estar pendientes de los cambios de versión, para
ver si nos compensa actualizarnos o no.
Desventajas
A la hora de utilizar un framework no todo son ventajas, ya que hay una serie de desventajas que hay que tener en cuenta:

● Al emplear un framework estamos importándonos muchos estilos y librerías, de las que no empleamos todas. Este uso, de
una gran cantidad de elementos, hace que nuestra página web pese más y tarde más en descargarse.

● Si utilizamos un framework CSS, salvo que lo personalicemos, lo que requiere más conocimientos, nuestra página web se va a
parecer mucho a millones de páginas web diferentes que se han hecho con el mismo framework.

● Un framework CSS tiene una curva de aprendizaje, por lo que si queremos utilizarlo primero tenemos que aprender a hacerlo.

● Otra desventaja muy importante, aunque pueda no parecerlo, es que si utilizamos un framework sin haber aprendido CSS, no
vamos a saber hacer cualquier modificación sin el framework, ya que vamos a desconocer la base sobre la que funciona.
Frameworks CSS
Estos 4 frameworks, son un ejemplo de las librerías css más usadas, partiendo de las
más nuevas y menos consolidadas (Tailwind 2019 y Bulma 2016), a las más veteranas y
por tanto de mayor uso, (Foundation y Boostrap (ambos en 2011)

Estos 4 frameworks, y por norma general, la mayoría de las librerías, tienen estas
características en común:

● Son opensource, de manera que son contribuidas por la comunidad y gratuitas,

(aunque algunas pueden tener versiones de pago)

● Se basan en el principio “Mobile first”(responsive)

● Emplean la distribución de cajas mediante Flexbox o Css grid

● Disponen de su propia librería de componentes prehechos compatibles con los

principales navegadores y con mayor o menor grado de accesibilidad
Boostrap - 2011 Twitter
Bootstrap es el resultado de la solución interna para solucionar las inconsistencias en el desarrollo dentro del equipo de ingeniería de
Twitter. Ofrece una amplia variedad de plantillas de página y componentes de interfaz de usuario (fragmentos de HTML que podemos
agregar a nuestro código) y toneladas de opciones de estilización, además, ofrece plantillas que incluyen JavaScript para interactividad
y animaciones.
Entre sus principales características podemos encontrar:

- Tiene su propia librería de iconos svg

- Dispone de una store propia donde comprar themes hechos para tu web, con una configuracion de personalizacion bastante
sencilla

- Pertenece a una comunidad de desarrolladores opensource tremenda, de manera que recibe constantes mejoras y
actualizaciones.

- Se encuentra escrito en Sass y flexbox

- Tiene integraciones con los frameworks frontend más populares - Tanto en React, como en Angular o Nuxt (El framework de Vue)
podemos encontrar adaptaciones directas que integran Bootstrap en componentes escritos para dichos lenguajes, haciendo su
inclusión más rápida y sencilla.

Como contras, si bien es relativamente simple comenzar, la gran cantidad de opciones puede hacer que sea fácil perderse como
principiante, además de que se ha vuelto tan omnipresente que a algunos desarrolladores les preocupa que los sitios web diseñados con
él no se destaquen.
Referencias
● Tailwind CSS:
https://tailwindcss.com/

● Bulma
https://bulma.io/documentation/overview/

● Foundation
https://get.foundation/

● Boostratp
https://getbootstrap.com/
 CSS - Animaciones

2020
Índice

1. Introducción
2. Ventajas e inconvenientes
3. CSS Triggers
4. Transiciones
5. Animaciones
6. Will-change
7. Cubic-bezier
8. Buenas prácticas
Introducción
Las animaciones CSS3 permiten animar la transición entre un estilo CSS y otro. Las
animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto
de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la
misma.
Ventajas e inconvenientes

Ventajas

● Nos permite construir páginas web más dinámicas haciendo más atractiva y vistosa la propia
aplicación
● Al formar parte del estándar de la W3C heredan una sintaxis familiar y cuya implementación
es bastante simple, por lo que tiene una baja curva de aprendizaje.

Inconvenientes

● La excesiva inserción de animaciones podrían perjudicar el rendimiento de la aplicación

 CSS Triggers

Son los cambios que ocurren en el navegador cuando una

propiedad CSS cambia. Tiene las siguientes etapas:
● Layout (geometria y posición de los elementos)
● Paint (pinta los pixeles)
● Composite (composición capas, el navegador separa la capa y
la aisla haciendo el cambio de estado)

https://csstriggers.com/
Propiedades
Las propiedades tienen un valor por defecto. Por lo tanto, para hacer una animación siempre debe existir un
valor inicial.

https://cssreference.io/
Transición
Las transiciones nos permiten animar propiedades CSS por medio de un disparador durante un
periodo de tiempo establecido.

Propiedades:
● Transition-property: elegimos la propiedad que cambiamos o elegir todas poniendo "all".
● Por performance es mejor elegir la propiedad concreta que queremos animar, en el caso de que no todas
las propiedades tengamos pensado animar. Aunque el valor por defecto es all, con lo cual, si tenemos
que animar todas nos podemos evitar poner all y escribir simplemente -> transition: .5s; en vez de
transition: all .5s;
● Transition-duration: en segundos.
● Transition-timing-function: Elegimos la función de la curva de velocidad. Ease-in.ease-out, etc...
● Transition-delay: elegimos el tiempo que va a tardar hasta que empiece la animación.
● Transition: engloba todas las propiedades en una.
● Sintaxis:
Transition: transition-property transition-duration transition-delay transition-time-function;
Disparadores
Las transiciones se disparan cuando una propiedad CSS cambia su valor, sin importar que
desencadenó (trigger) ese cambio de valor. Los posibles triggers pueden ser:
● Eventos js
● Pseudo clases css
○ :hover
○ :active
○ :target
○ :focus
○ :checked
○ :invalid :valid
○ :in-range :out-of-range
○ :required :optional

https://codepen.io/jsamper92/pen/wvoaPLp
 Animaciones
Las animaciones nos permiten animar propiedades CSS por medio de un disparador durante un periodo de tiempo establecido.
Propiedades minimas:
● Animation-name: nombre
● Animation-duration: 0s, no acepta valores negativos

Resto de propiedades en animaciones:

● Animation-iteration-count: numero | infinite (acepta numero no enteros)
● Animation-timing-function: ease-in, ease-out, etc.
● Animation-direction: normal, reverse, alternate, alternate-reverse
● Animation-delay: 0s, time
● Animation-fill-mode: es la manera que tenemos de decir en que puntos queremos que se quede al terminar la animación
○ Forwards -> Le decimos que se quede en la posición final
○ Backwards -> Le decimos que se quede en la posición inicial (conseguimos lo mismo si no le ponemos nada)

Sintaxis para unificar todas las propiedades:

Animation: animation-name animation-duration animation-timing-function animation-delay animation-direction animation-fill-
mode

https://codepen.io/jsamper92/pen/LYbVzoM
 Cubic-bezier
Es una curva que controla la relación tiempo / cambio en la animación.
● Eje X (Horizontal) -> tiempo
● Eje Y (Vertical) -> cambio de propiedades

La función cubic-bezier() recibe cuatro parámetros que son las coordenadas de los puntos de control de la curva
● Los dos primeros valores es la curva de entrada y los dos valores finales es la curva de la salida. Ejemplo:
○ Cubic-bezier(.25, .01, .25, 1)

https://cubic-bezier.com/#.17,.67,.83,.67
 Buenas prácticas
● Debug y rendimiento
○ Framerate: Es la cantidad de cuadros que tiene por segundo. Una animación debe ir a 60fps
● Waterfall(cascada): le ofrece información sobre el tipo de cosas que hace el navegador mientras ejecuta su aplicación. Se
basa en la idea de que las cosas que hace un navegador cuando ejecuta un sitio se pueden dividir en: ejecutar js,
actualizar diseño, etc…
○ Recalculate style -> Recalcular el estilo, al cambiar un color recalcula el estilo
○ Layout -> Crea el layout que son todos lo cambios geométricos, margenes, etc
○ Paint -> Una vez hecho estos cambios geométricos pinta estos estilos calculadas
● Propiedad will-change: Propiedad que permite mejorar rendimiento de una app mandandola al hilo compositor. No mandar
will-change a todos los elementos. Ponerlo cuando sepamos que el elemento va a cambiar
 Accesibilidad Web

2021
Índice

1. ¿Qué es la accesibilidad web?

2. ¿Qué beneficios nos aporta? - Convence al cliente
3. ¿Qué es la WCAG? - Cómo consultarla
4. Técnica ARIA - Roles en la accesibilidad y tips a tener en cuenta
5. Accesibilidad en frameworks (React vs Angular)
6. Auditorías de accesibilidad – ¿Qué son y cómo se hacen?
7. Herramientas de testing automático.
8. Referencias.
¿Qué es la accesibilidad web?
Cuando hablamos de accesibilidad web, hacemos referencia al diseño web que
permite a personas con algún tipo de discapacidad percibir, entender, navegar e
interactuar con dicha Web, permitiéndoles intercambiar contenido como
cualquier otro usuario normalizado.

Estos tipos de discapacidad pueden ser:

- Problemas visuales (ceguera, daltonismo…)

- Problemas auditivos (baja audición, sordera…)
- Problemas físicos (ausencia de un miembro o impedimentos de movilidad como la artrosis o lesiones crónicas)
- Problemas cognitivos (discapacidad mental),
- Problemas neurológicos (epilepsia, parkinson)
- Problemas del habla (derrame cerebral) 

Hacer nuestras webs accesibles no sólo beneficia a este tipo de personas, nos beneficia a todos, ya que a veces por
circunstancias que escapan a nuestro control como una conexión lenta, un brazo roto o simplemente la vejez, no
podemos hacer un uso normalizado de la web.
¿Cómo convenzo al cliente?
1º Impulsa la innovación:
“Las funciones de accesibilidad en productos y servicios, a menudo
resuelven problemas imprevistos”

2º Mejora la marca:
“La diversidad es un concepto que cada vez está cobrando más
importancia en el mundo empresarial, de manera que emplear a
personas con algún tipo de discapacidad o incluir una declaración
de accesibilidad real, hace que las empresas obtengan un mayor
reconocimiento social y por extensión, la marca, ya que la población
cada vez está más concienciada y volcada con la inclusión de este
tipo de personas que hasta hace unos años quedaban
prácticamente excluidas de la gran mayoría de las actividades u
oportunidades laborales.“
¿Cómo convenzo al cliente?
3º Extiende el alcance del mercado
“El mercado global de personas con discapacidades es de más de mil
millones de personas, de manera que si pudiésemos “llegar” a ellas
haciendo nuestras webs accesibles, podríamos cubrir una cuota de
mercado que generaría unos 5 billones de euros de beneficio.”

4º Minimiza el riesgo legal:

“Cada vez más son los países que ponen foco en regular la accesibilidad digital”
¿Qué es la WCAG?
Los documentos WCAG (Web Content Accessibility Guidelines) son documentos técnicos que contienen un conjunto de políticas o
pautas, que debemos seguir para hacer que el contenido de nuestra web sea accesible para las personas con discapacidad, la cual,
como hemos hablado antes, no tiene por qué ser crónica o temporal.

Actualmente tenemos 2 versiones en las que apoyarnos, la WCAG 2.0 (2008) y la WCAG 2.1 (2018), que no es más que una
actualización de la 2.0.(También existe la WCAG 2.2 que aún está en fase de borrador pero que en breve tiempo, pasará a ser el
estándar).

Estos documentos, son generados por la WAI (Web Accessibility Initiative) que forma parte de la W3C (World Wide Consortium,
principal organización que rige los estándares de internet) y constan de unas 12-13 pautas organizadas bajo los 4 principios de la
accesibilidad (Perceptible, Operable, Comprensible y Robusto).

Para cada pauta, existen criterios de éxito comprobables mediante la combinación de pruebas automatizadas y evaluación humana,
(por ejemplo la usabilidad), distribuidos en tres niveles, según el nivel de conformidad/aceptación de los criterios que tienen como
requisitos y son : A, AA y AAA.

Como documento de consulta, podéis usar la siguiente guía:

https://www.w3.org/WAI/WCAG21/quickref/
¿Qué es la WCAG?
¿Qué es ARIA?
Según la W3C, las aplicaciones de Internet enriquecidas accesibles (ARIA - Accessible Rich Internet
Applications)  son un conjunto de atributos que definen formas de hacer que el contenido web y las aplicaciones web
(especialmente las desarrolladas con JavaScript) sean más accesibles para las personas con discapacidad.

 Para esto, ARIA, ofrece a los desarrolladores la opción de agregar  información semántica complementaria a nuestros
desarrollos que seran interpretados por la mayoría de las diferentes tecnologías de asistencia:

- Roles para describir el tipo de widget presentado, como "menú", "elemento de árbol", "control deslizante" y "barra de
progreso".

- Roles para describir la estructura de la página web, como encabezados, regiones, áreas de búsqueda y áreas de
navegación.

- Las propiedades para describir los widgets de estado se encuentran, como "marcada" para una casilla de verificación,
"haspopup" para un menú que representa un submenú u otra ventana emergente y "expandido / contraído" para un nodo de
árbol.

- Propiedades para definir regiones activas de una página que probablemente recibirán actualizaciones ( como cotizaciones de
bolsa), así como una política de interrupción para esas actualizaciones.

- Propiedades para arrastrar y soltar que describen las fuentes de arrastre y los objetivos de colocación(dragganddrop)

- Proporcionar un método para la navegación por teclado en widgets.(precisan de una navegación interna, independizada de la general)
Ejemplo
A tener en cuenta
A pesar de que ARIA nos permite modificar sutilmente (o radicalmente) el árbol de accesibilidad de cualquier elemento de la
página, es lo único que cambia, es decir:

- ARIA no mejora nada del comportamiento inherente del elemento.

- ARIA no hará que el elemento pueda tener el foco ni le brindará gestores de eventos de teclado. (Esa sigue siendo parte de
nuestra tarea de desarrollo)

- No es necesario definir aria en los elementos nativos. Es decir, un elemento <input type="checkbox"> no necesita un atributo de
ARIA role="checkbox" adicional para anunciarse correctamente.

- También vale la pena mencionar que ciertos elementos HTML tienen restricciones sobre los roles y atributos de ARIA que se
pueden usar en ellos. Por ejemplo, a un elemento <input type=“password"> no se le puede aplicar un rol, como vemos en al
imagen.
Accesibilidad en frameworks - React vs Angular

https://es.reactjs.org/docs/accessibility.ht https://angular.io/guide/accessibility
ml#___gatsby

https://material.angular.io/cdk
/a11y/overview
Auditorías

En el equipo Fron-tech, nos basamos en la metodología de evaluación de la accesibilidad WCAG-EM 1.0 publicada

formalmente como Nota informativa del W3C en julio de 2014.

Esta metodología recoge un conjunto de requisitos y procedimientos para que la evaluación sea lo más fiable posible. 

En resumen las etapas de la evaluación son: 

1. Definir el alcance de la evaluación - (Estimación)

2. Explorar el sitio web - (Análisis)
3. Seleccionar una muestra representativa - (Selección)
4. Auditoría de la muestra seleccionada - (Pruebas)
5. Informe de los resultados - (Informe resumen)
Auditorías - Iberia
Auditorías - Iberia
Auditorías - Iberia
Auditorías - Iberia
Herramientas de validación - W3C

Ambos, son empleados como verificación inicial, ya que nos indican los errores de nuestro
código a un nivel técnico y semántico. ( Es recomendable pasarlos antes que las demás herramientas.)
Herramientas de validación - TAW

TAW es una herramienta automática on-line para analizar la accesibilidad de sitios web. Creada
teniendo como referencia técnica las pautas de accesibilidad al contenido web ( WCAG 2.0) del 
W3C.
Cuenta con más de 15 años, siendo la herramienta de referencia en habla hispana.
Herramientas de validación - WAVE

WAVE es un conjunto de herramientas de

evaluación que se basa en la WCAG. 
Podemos ejecutarla:
-  De forma online https://wave.webaim.org/
-  A través de las extensiones de Chrome y
Mozilla https://wave.webaim.org/extension/
(Recomendado si tu app no está en producción o
necesitas logado)
Su funcionamiento es bastante sencillo, le
proporcionamos una url mediante entrada
directa y nos genera un documento al
detalle o activamos el plugin con click con
la web abierta a auditar.

Además, incluye un validador de contraste

que indica los diferentes grados que
cumple tu app.
Herramientas de validación - LIGHTHOUSE

Lighthouse es una herramienta automatizada

de código abierto diseñada para mejorar la
calidad de las webs. 

Podemos ejecutarla como:

-  Extensión de Chrome (pestaña "Audits" F12)
-  Instalandonosla como dependencia npm,
ejecutando npm install -g lighthouse

Su funcionamiento es bastante sencillo, le

proporcionamos a Lighthouse una URL que
queramos auditar, y automáticamente ejecuta
una serie de pruebas contra la página,
que genera un informe sobre el rendimiento
de la página, que podemos usar como guía
para mejorar nuestra app.
Práctica
Referencias
● Introducción a la Accesibilidad web:
https://www.w3c.es/Traducciones/es/WAI/intro/accessibility

● Casos de negocio accesibles:

https://www.w3.org/WAI/business-case/

● Cómo cumplir con WCAG (Referencia rápida)

https://www.w3.org/WAI/WCAG21/quickref/

● Roles y  atributos aria

https://www.w3.org/WAI/PF/aria/roles
https://www.w3.org/TR/html-aria/#index-aria-global
https://www.w3.org/TR/html-aria/#sec-strong-native-semantics

● Legislación sobre Accesibilidad web:

https://www.w3.org/WAI/policies/

● Validadores adicionales
https://www.usableyaccesible.com/recurso_misvalidadores.php

● Carrusel accesible:
https://www.w3.org/WAI/tutorials/carousels/
 Arquitectura CSS

2020
¿Quién soy?
Indice
1. Construcción del modelo de datos (cómo funciona el CSS por detrás)
2. Herencia, cascada y especificidad
3. BEM
4. ITCSS
5. Sass
6. Buenas prácticas
Construcción del modelo de datos
Cómo funciona CSS por dentro (DOM y CSSOM)
Flujo de ejecución motor de renderizado
Motores de renderizado
Herencia, cascada y especificidad ???
Herencia
Especificidad
Cascada

En su nivel más básico indica que el orden de las reglas CSS importa,
pero es algo más que eso. Que prevalezcan unos selectores sobre
otros en la cascada depende de tres factores (en orden de importancia.
Los primeros prevalecen sobre los últimos):
1. Orden del código/Herencia o cascada
2. Especificidad
3. Importancia
Cascada - Orden en el código
Cascada - Especificidad
La Especificidad es en sí una medida de cómo de específico es un selector.
La especificidad que tiene un selector se mide mediante 4 valores.
¿CÓMO COMBATIMOS LAS
ESPECIFICIDAD?
 Metodologías CSS
OOCSS (Oriented Object CSS) : metodología basada en el concepto de “objeto” CSS, es decir un patrón
repetitivo que puede encapsularse en un pedazo independiente de HTML/CSS.

BEM (Bloque-Elemento-Modificador) : esta metodología se basa en dividir el layout de una página en

bloques indepedientes. Cada bloque está constituido por elementos relacionado semántica y funcionalmente.
Tanto bloques como elementos podrán tener modificaciones que determinarán su apariencia, su estado y su
comportamiento.
Con estos tres conceptos, se crea una serie de convenciones de naming que ayudan a la predecibilidad del
código, así como al mantenimiento y escalabilidad. El concepto bloque ayuda a la reutilización

ITCSS (Inverted Triangle CSS) : esta metodología se basa en fijar la forma en la que se estructura el código
que generamos. Se conciben una serie de secciones o capas que se organizan con la forma de un triángulo
invertido
BEM (Block Element Modifier)
Es una metodología que te ayuda a crear componentes reutilizables y compartir códigos en el desarrollo
de aplicaciones.

- Fácil
- Modular
- Flexible
- Reusable
- Estructurado

Bloque. Unidad que es relevante por sí misma. (header, container, menu, checkbox, input)
Elemento. Es parte de un bloque que no tiene sentido por sí mismo y está semánticamente relacionado
con su respectivo bloque (menu item, list item, checkbox caption, header title)

Modificador. son variantes de componentes o elementos que modifican su aspecto sin llegar a cambiar su
significado, como, background de un botón, color de una alerta,... (alert--success, button--primary, ..)
BEM (Block Element Modifier)
Práctica
Ejercicio 1
1. Dada la estructura base, analizar el archivo index.html y migrar la
nomenclatura bajo la metodología BEM, clonando estas nuevas
clases en el archivo assets/styles/style.css
2. Una vez hecho esto comprobar el visual

https://github.com/Jsamper92/AcademiaDEX-HTML-CSS-ACCESIBILID
AD-JAVASCRIPT/tree/sass-block
ITCSS - Inverted Triangle css architecture
ITCSS - Inverted Triangle css architecture
Settings. Aquí se definen las variables al utilizar un preprocesador. No genera CSS

$main-color: #6834cb

Tools. Si se utiliza preprocesador, las funciones y mixins se definen en esta capa. Al igual que
la anterior, no genera CSS

@function sum($numbers...) {
$sum: 0;
@each $number in $numbers {
$sum: $sum + $number;
}
@return $sum;
}
Generic. Se refiere al código genérico, aquel que sirve para resetear o estandarizar los estilos base de los
navegadores. Por ejemplo un reset css o un normalize iría aquí.

* {
padding: 0;
margin: 0;
}

Element. Reglas que afectan a los tags HTML.

h1 {
color: $main-color;
font-size: 24px;
}
Components. Los componentes, al contrario que los objetos, son partes específicas de la interfaz. Un ejemplo de
componente sería una barra de búsqueda o el header de nuestra aplicación. Los estilos que definamos para un
componente, sólo afectarán a ese componente.

.search-bar {
background-color: $pearl;
color: $light-grey;
font-size: 22px;
}

Utils (trump): engloba a todas aquellas reglas que anulan cualquier otra que se haya definido en las capas anteriores.
Es la única capa en donde se permite utilizar !important. Un ejemplo sería tener una clase que nos permita ocultar
elementos mediante un display: none.

.d-none {
display:none!important;
}
SASS
 SASS es el mejor ayudante para el desarrollador web a la hora de
trabajar en CSS gracias a sus múltiples funcionalidades: mixins,
variables, funciones, herencia, nesting.

¿Qué hace potente a SASS?

La principal ventaja de SASS es la posibilidad de convertir los CSS en algo

dinámico
-100% compatible con CSS3
-Permite el uso de variables, anidamiento de estilos y mixins.
-Incluye numerosas funciones para manipular con facilidad colores y otros valores
-Permite el uso de elementos básicos de programación como las directivas (if, for,..)
-Genera archivos css bien formateados y permite configurar su formato
-Tiene una api de javascript para dar más libertad a las compilaciones
SASS O SCSS

Hay una gran confusión con respecto a la semántica del nombre Sass, y por
una buena razón. Sass nombra tanto al preprocesador como a su propia
sintaxis.

Sass
- Fuerte tabulación, nos evitamos las
llaves, puntos y coma
- Extensión: .sass
Scss
- La sintaxis funciona igual que CSS,
por tanto no hay prácticamente curva
de aprendizaje
- Extensión: .scss
Linea de comandos - Instalación sass
Instalamos sass en nuestro entorno de trabajo
npm install -g sass

Si queremos ver la versión de sass que se nos ha instalado

sass --version
sass: Trabajamos con una carpeta llamadas sasss
css: a la ruta donde se van a enviar los ficheros compilados
Enlazamos nuestros archivos
--watch: para que no estemos cambiando los cambios y refrescando
sass --watch sass:css nuestro sitio web

Una vez lanzado nos indica que para parar dicho proceso
Compiled sass\styles.scss to css\styles.css
Press Crtl-C to stop

Para obtener todo tipo de ayuda se utliza

sass --help
Reglas de anidadas

Su principal característica es su forma de escritura anidada, ya que no

tendremos que estar repitiendo los prefijos una y otra vez.
Por tanto, cada vez somos más específicos en los selectores.
Sintaxis – Creación de variables
Las variables nos ahorran la tarea de estar escribiendo y modificando atributos repetidas
veces. Además si deseamos cambiar alguno de ellos solo lo cambiamos en la variable y listo!
Sintaxis – Referenciado a los selectores padre
(&)
En ocasiones queremos modificar el comportamiento por defecto de ciertos selectores, por
ejemplo en el caso de que una opcion de menu esté activa
Sintaxis – Propiedades anidadas
CSS define varias propiedades cuyos nombres paracen estar agrupados de forma lógica. Así por
ejemplo, las propiedades font-family, font-size y font-weight están todas relacionadas con el
grupo font
Sintaxis – Comentarios
Sass soporta el mismo tipo de comentarios que CSS

// Comentarios de una sola linea

/* pueden comentar una o
varias lineas */

Al compilar únicamente se mostrarán los comentarios de tradicionales /* */

Sintaxis – SassCript: Tipos de datos
Ademas de la extensión básica de CSS, Sass incluye una serie de extensiones más
avanzadas llamadas SassScript
SassScript soporta seis tipos de datos:
●Números (ejemplo: 1.2, 13, 10px)
●Cadenas de texto con o sin comillas simples o dobles (ejemplo "foo", 'bar', baz)
●Colores (ejemplo blue, #04a3f9, rgba(255, 0, 0, 0.5))
●Valores lógicos o booleanos (ejemplo true, false)
●Valores nulos (ejemplo null)
●Listas de valores, separados por espacios en blanco o comas (ejemplo 1.5em 1em 0 2em,
Helvetica, Arial, sans-serif)
●Pares formados por una clave y un valor separados por : (ejemplo (key1: value1, key2:
value2))
Sintaxis – SassCript: Variables
SassScritp usa variables para almacenar valores que se utilizan en las hojas de estilos, se le
añade $ delante del nombre de la variable.

Hay que tener cuidad a la hora de definir estas variables, porque si las definimos dentro de una regla
anidada, solo funcionará dentro de ese anidamiento, para que tengan un mayor potencial hay que
definirlas fuera de los selectores
Sintaxis – SassCript: Cadenas de texto
Podemos tener cadenas de texto por ‘Hola’ o “Hola” o por
ejemplo las que no tienes comillas como en el caso de bold,
sans-serif, …

SassScript soporta y reconoce estos dos tipos de cadenas. En

general, el archivo CSS compilado mantendrá el mismo tipo de
cadena que el que se utilizó en el archivo Sass original.
Exception cuando se utiliza #{}
Sintaxis – SassCript: Listas
Las listas son el tipo de datos que Sass usa para representar
los valores que normalmente se usan en los margin, padding,
font-family,.. Son colecciones de valores separados por comas
Sintaxis - SassScript - Mapas

Se puede considerar como colecciones de clave:valor, usando map-

get($map, $Key)
Sintaxis - SassScript - Interpolación

Las variables definidas se pueden usar incluso en los nombres de los

selectores y de las propiedades
Sintaxis – Organización de ficheros
Tendremos que organizar nuestros archivos de la mejor manera posibles, y SASS trae
una función que nos facilitará la vida al momento de separar en varios archivos nuestro
código CSS
Nombramos los ficheros con _variables.scss
Y luego los tenemos que llamar @import 'variables';
Sintaxis - Extend

En ocasiones hay clases que necesitas tener dos estilos aplicados, la

solución habitual es crear dos estilos independientes, que definan cada uno
de los estados 
Sintaxis - Directivas

Directiva @if: evalúa una expresion y solo

incluye los estilos en su interior si la expresión
devuelve un valor distinto de a false o null

Directiva @each: each recorre una toda la

lista y en cada iteración se le asigna un valor
diferente a la variable
@each $var in <lista o mapa>
Sintaxis – Directivas
Directiva @mixin: Los Mixin permiten reutilizar estilos y propiedades para que
escribamos menos código y podamos acceder fácilmente a su edición.

Dentro de los mixins se definen los parametros que usaremos para definir ciertos valores
Sintaxis – Directivas
Directiva @function: Se pueden definir directivas propias para que se pueden
utilizar en las hojas de estilos
Sintaxis – Directivas

El ciclo @while no tiene ningún caso de uso en ningún proyecto real de

Sass, puesto que no hay ninguna manera de romper un bucle desde el
interior. No lo utilices.
 Práctica 2
Crea una nueva carpeta en Visual Studio Code llamada Ejercicio1 con las siguientes características:
1. Se facilita archivo index.html para hacer las siguiente práctica.
2. Debe incluir las carpetas llamadas css, sass.
3. Dentro de la carpeta css crearemos el archivo style.css.
4. Dentro de la carpeta sass crearemos el archivo style.scss.
5. Añade los estilos que consideres necesarios a cada archivo correspondiente.
6. Instalar sass si no se tiene y vincular las carpetas (sass –watch sass:css)
7. Cuando guardemos datos, comprobarás que se habrán creado archivos asociados
en la carpeta correspondiente.
8. Referencia a cada html su hoja de estilos css correspondiente.
9. Comprueba el resultado del html en el navegador.
Solución - Práctica 2
Solución - Práctica 3
Solución - Práctica 4
Cierre bloque sass

@extend .javascript;
Buenas prácticas

● DRY: Don`t repeat yourself

● KISS: Keep it Simple Stupid
● YAGNI: You Ain`t Gonna Need It
● SR: Single Responsability
● OS: Open-close objects are open to extension but close to modification
everis.com