Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

Maquetación de la pantalla de login: Estilización con CSS

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Mejorando la accesibilidad de nuestra página de inicio

40/43
Recursos

Aportes 143

Preguntas 11

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Creo que el tema de la accesibilidad da para un curso entero (sugerencia) 😉

Para activar el lector de pantalla en Windows es: WINDOWS+CTRL+ENTER

Lo que detectan son errores de nivel A (HTML semántico) y a veces AA (por ejemplo que las imágenes incluyan un atributo alt que las describa)… La real accesibilidad llega en el tercer nivel, el AAA, donde todo ya es un poco más verborrágico quizá para nosotrs pero que le avisamos de todas las acciones al usuario… Un ejemplo de esto sería en un carrito de compras, decirle no solamente el nombre del producto, sino también por ejemplo el color, cantidad, precio, y qué ocurrirá al darle click a cada cosa…

No es lo mismo que lea ‘link Editar, visited’ que ‘link Haciendo click en este botón podrá Editar el producto’… Para lograr dicho tambio solamente tuve que ponerle al anchor los siguientes atributos…

<a href="#" aria-label="Haciendo click en este botón podrá Editar el producto">Editar</a>

No cambió nada en lo estético, pero hice que el screen reader le explicara qué hará…

Otra cosa muy importante es por ejemplo avisar cuándo se abrirá un modal, y en el momento en que lo hace…

Por regla, solamente deben ser seleccionables los elementos ‘accionables’… Ponerle un tabindex 0 a una imagen rompe los principios de usabilidad para la persona no vidente… Lo ideal sería simplemente extender los aria-label de los inputs… Accesible según la documentación no habla de accesible para gente no vidente, sino accesibles por el teclado…

  • tabindex ="0" Permite darle un orden a los elementos en la pantalla segun la posición relativa que tiene cada elemento.
  • aria-label ="Nombre" Permite que el screen-reader lea el nombre del input según el nombre que se le otorga.
  • alt ="Platzi Video" Le da una descripción a las imágenes .

Esta extensión de Chrome también es muy buena para testear accesibilidad

AXE

que curioso a mi no me arrojo errores…

Gran detalle, el hecho de que empiecen a enseñar mas acerca de la accesibilidad.

¡Gran trabajo Platzi 💚!

¡Reto aceptado!

Se me hizo muy largo este curso a comparación de otros jaja pero aprendí demasiado eso me motivo para hacer otros cursos más!

La accesibilidad es un tema muy importante y pensar que no le he tomado mucha atencion

Definitivamente hay mucho por apreder ya me programe para los proximos 2 años

Qué gran herramienta ANDI!! 👌🏻👏🏻👏🏻

Para los que trabajamos con Linux recomiendo el complemento de GoogleChrome ChromeVox Classic Extension

Importante información no conocía esto de los tabindex.

"El atributo global tabindex indica si su elemento puede ser enfocado, y si participa en la navegación secuencial del teclado (usualmente con la tecla Tab, de ahí el nombre). Acepta un entero como valor, con diferentes resultados que dependen de dicho valor:

  • un valor negativo (usualmente tabindex="-1") significa que el elemento debe ser enfocado, pero no debe de ser accesible a través de la navegación secuencial del teclado. Es útil para crear widgets accesibles con JavaScript.
  • tabindex=“0” significa que el elemento debe ser enfocado y ser accesible a través de la navegación secuencial del teclado, pero su orden relativo es definido por convención de la plataforma.
  • un valor positivo significa que debe poder recoger el foco y alcanzable a través de la navegación secuencial del teclado; su orden relativo es definido por el valor del atributo: la secuencia sigue el aumento del número de tabindex. Si varios elementos comparten el mismo tabindex, su orden relativo sigue la posición relativa en el documento.
  • Un elemento con valor 0, un valor inválido o sin valor de tabindex, debe de ser posicionado después de elementos con un tabindex postivo en el orden de navegación secuencial del teclado."

Lighthouse of Chrome Devtools also helps us to identify problems and their accessibility solutions on our page.

ANDI (Accessible Name & Description Inspector) is a free tool to test web content for accessibility.

ANDI is a “favelet” or “bookmarklet” that will:
• Provide automated detection of accessibility issues
• Reveal what a screen reader should say for interactive elements
• Give practical suggestions to improve accessibility and check 508 compliance

Excelente uso de la herramienta de accesibilidad…lo curioso aqui es que si usan ANDI en esta pagina salen un reguero de errores de accesibilidad. XD

Yo siempre borraba los aria-label porque no les veía una utilidad a nivel gráfico, ahora todo cobra mucho sentido.

Muy interesante la verdad, nunca se me pasó por la mente la accesibilidad que deben tener nuestros sitios web.

Excelente clase. No tenía idea de como revisar la accesibilidad de la página y menos como corregir los errores.

Woow, esta muy útil esta herramienta. Yo solo conocía la herramienta de Lighthouse, que ya viene en el navegador de Google Chrome por defecto. Sin embargo, me gusta mas esta herramienta de Andi

Sin duda es un gran apoarte!

Demasiado importante la accesibilidad, debería ser un estandar al momento de maquetar páginas web.

Los interesados en este importante tema de la accesibilidad, pueden encontrar un curso de ello aquí mismo:
(https://platzi.com/clases/accesibilidad-web/)
Buena suerte! 😄

Impresionante!!!
Con esto ya puedo decir que es un curso muy muy bueno ya que esto aunque es una introducción a la accesibilidad y aun falta mucho por aprender.
Me llevo algo super valioso 😄
Estos fueron mis resultados obtenidos de Lighthouse de Chrome.

Web sin Accesibilidad

Web con Accesibilidad

Utilizando la herramienta ANDI podremos detectar en que orden se leen los elementos de nuestro proyecto y también que errores podrían tener.

Fantástico, sin duda la accesibilidad es algo que hay que tomarlo con mucha importancia.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="imagenes/estilos.css/style1.css">
    <title>Registro</title>
</head>
    <body>
        <header class="header">
            <img tabindex="0" class="header__img" src="./imagenes/log1.jpg" alt="logoangie">
        </header>
        <section class="login">
            <section class="login__container">
                <h2 tabindex="0">Regístrate</h2>
                <form class="login__container--form"> 
                    <input class="input" type="text" placeholder="Nombre">
                    <input class="input" type="email" placeholder="Correo">
                    <input class="input" type="password" placeholder="Contraseña">
                    <button class="button">Registrarme</button>
                
                <a class="login__container--register" href="" >Iniciar sesión</a>

        </section>
        <footer>
            <a href="/">Términos de uso</a>
            <a href="/">Declaración de privacidad</a>
            <a href="/">Centro de ayuda</a>
        </footer>
</body>
</html>

uy no, tremendo este tema, hay que profundizar con el curso que ya esta disponible

Entre las devtools de Firefox hay un inspector de Accesibilidad que ayuda mucho para esto y también hay opciones en los selectores de colores para ver si la combinación elegida cumple con las recomendaciones de WCAG sobre texto accesible.

https://www.youtube.com/watch?v=7mqqgIxX_NU

https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector

https://hacks.mozilla.org/2019/10/auditing-for-accessibility-problems-with-firefox-developer-tools/

Estovo sencillo, aunque si reconozco que me cuesta un poco pensar en nuevos términos, es decir. la mayoría de personas no somos invidentes y estamos demasiado acostumbrados a trabajar con una obviedad que no es.

Listo! Reto completado

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
    <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./CLase29-Reto-Register.css">
</head>
<body>
    <header class="header">
        <img tabindex="0" aria-label="ImagenPlatziVideo" class="header__img" src="./Clase14_3_logo-platzi-video-BW2.png" alt="Platzi Video">
    </header>
    <section class="Register">
        <section class="Register__container">
            <h2 tabindex="0">Regístrate</h2>
            <form class="Register__container--form">
                <input aria-label="Correo" class="input" type="text" placeholder="Correo">
                <input aria-label="Contraseña" class="input" type="text" placeholder="Contraseña">
                <input aria-label="RepetirContraseña" class="input" type="text" placeholder="Repetir Contraseña">
                <button class="button">Registrarme</button>
            </form>
            <div class="Register__container--IniciaSesion">
                    <a href="./">Inicia Sesión</a>
            </div>
        </section>
    </section>
    <footer class="footer">
        <a href="./">Términos de uso</a>
        <a href="./">Declaración de privacidad</a>
        <a href="./">Centro de ayuda</a>
    </footer>
</body>
</html>```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Font -->
    <link rel="stylesheet" href="../styles.css">
    <!-- Title -->
    <title>Crear cuenta</title>
</head>
<body>
    <header class="header">
        <img  tabindex="0" class="header__img" src="../assets/logo-platzi-video-BW2.png" alt="Platzi Video">
    </header>
    <section class="register">
        <section class="register__container">
            <h2  tabindex="0">Registrate</h2>
            <form class="register__container--form">
                <input aria-label="Usuario" class="input" type="text" placeholder="Usuario">
                <input aria-label="Nombre y Apellido" class="input" type="text" placeholder="Nombre y Apellido">
                <input aria-label="Correo" class="input" type="text" placeholder="Correo">
                <input aria-label="Pais" class="input" type="text" placeholder="Pais">
                <input aria-label="Contraseña" class="input" type="password" placeholder="Contraseña">
                <input aria-label="Repite la Contraseña" class="input" type="password" placeholder="Repite la Contraseña">
                <button  tabindex="0" class="button">Registrar</button>
            </form>
            <section class="login__container--social-media">
                <div><img  tabindex="0" src="../assets/google-icon.png" alt="Google">Inicia sesion con Google</div>
                <div><img  tabindex="0" src="../assets/twitter-icon.png" alt="Twitter">Inicia sesion con Twitter</div>
            </section>
            <p  tabindex="0" class="login__container--register">Tienes cuenta? <a href="">Ingresa</a></p>
        </section>
    </section>
    <footer class="footer">
        <a  tabindex="0" href="/">Términos de uso</a>
        <a  tabindex="0" href="/">Declaración de privacidad</a>
        <a  tabindex="0" href="/">Centro de ayuda</a>
    </footer>
</body>
</html>```

Excelente herramienta!

Wow pero que increíble herramienta, había escuchado de accesibilidad pero no sabia como se implementaba. Estuvo buen la clase.

Hay varios aspectos a tener en cuenta para accesibilidad, una de ellas es el contraste de color de nuestro sitio para que las personas con baja visión lean correctamente y para que al pasar las pantallas a alto contraste los colores funcionen bien, una herramienta para ello es contrast-ratio.com, que nos da un puntaje de accesibilidad entre el contraste de dos colores que elijamos, esto entre otros aspectos importantes

Tambíen es muy Importante dar el debido uso semántico a las etiquetas como lo dice la profe, por ejemplo no usar anchor para tabuladores, pues esto puede confundir al usuario que está navegando con lectores de pantalla.

Muy bien que expliquen esto realmente se deben de tomar en cuenta todos estos aspectos para poder ayudar a cualquier persona a utilizar la tecnología.

Aunque puede ser un poco demorado y molesto al inicio, creo que deberíamos empezar a programar de esa forma. Esto si es una verdadera inclusión 😍 Gracias teffcode por tanto conocimiento

Interesante la herramienta y las etiquetas para la accesibilidad 👍 .

seria mejor colocar, en el aria-label algo como --> ingresar correo, o ingresar contraseña???

Magnifico, simplemente, magnifico, jamas lo hubiera pensado.
Esteffany, seres increíbles, no me cansare de decirlo.
Ya te empece a amar ❤️

Esto de voiceover usando esos atributos de html esta muy bueno y no sabìa que se podìa hacer.

<h1>Este el resultado que obtuve una vez hice los arreglos de accesibilidad.</h1>

Todo lo que hay frente a una página web. Me emocionó esta clase, saber que podemos contribuir siempre a una mejor forma de poder llegar a todas las personas

Si quiero hacer accesible esta pag, ¿Qué tag debería utilizar para que lea el titulo y párrafos? gracias

aria-label para que los lectores lean en caso de no querer usar label

Genial ver que las páginas también pueden ser inclusivas y que existen herramientas para ello

Me agrada mucho la idea de tener en cuenta estos conceptos al momento de desarrollar. una muy buena practica

excelente, estupenda aplicación, es increíble como uno aprende tantas cosas en menos de 5m

colocando andi para mejorar la accesiblidad de nuestra sitio 😃

Buena Clase! es importante tomar en consideración la usuabilidad.

Me salió muy bien

😮 Increible esto, tengo que aprender esto de Accesibilidad, ahora que conozco la herramienta andy voy a poner a prueba muchas paginas

el problema en el form es que no hizo el formulario incluyendo los elementos label como lo enseña el profesor De Granda.


</retocumplido>

Muy util la herramienta ANDI de ahora en adelante todas mís aplicaciones web van a tener implementado la accesibilidad

Reto completado

Buena herramienta ANDI.

que curso tan importante e interesante.

curso de accesibilidad de platzi

https://platzi.com/clases/accesibilidad-web/

Muy buena clase!

Se agrega un tabindex="0" para arreglar el problema de accesibilidad.

Muy buena clase sobre accesibilidad

este link es interesante sobre conceptos de disño web https://www.lawebera.es/diseno-web

Muy interesante, ahora veo lo útil que es este tema.

Me encanto esta clase ❤❤❤❤❤

Desconocía el tema

¿Soy el único que no puedo abrir este enlace?
https://www.ssa.gov/accessibility/andi/help/install.html

Tema muy olvidado…pero supremamente importante…😃

En windows tenemos un narrador también, sólo tenemos que dar Windows+CTRL+ENTER

woooow excelente clase, nuestras p+aginas siempre deben ser accesibles.

Qué buenas herramientas.

Buenas practicas que hacen la diferencia…

La pagina de Andi no me funciona.

Genial, lo voy a integrar de ahora en adelante en mis proyectos. Gracias 😄

Excelente herramienta.

Gran herramienta.

Buena herramienta de ANDI

Listo!

Kudos for ANDI

Programar pensando en la accesibilidad

Muy útil.

Understood! …and done!

<img tabindex=“0” class=“header__img” src=“file:///C:/Users/sergioandres/Desktop/Sergio/Platzi/Front-end/images%20test/logo-platzi-video-BW2.png” alt=“logo”>
</header>
<section class=“register”>
<section class=“register__container”>
<h2>Regístrate</h2>
<form class=“register__container–form”>
<input aria-label=“Nombre” class=“input” type=“text” placeholder=“Nombre”>
<input aria-label=“Correo” class=“input” type=“e-mail” placeholder=“Correo”>
<input aria-label=“Contraseña” class=“input” type=“password” placeholder=“Contraseña”>
<button Class=“button”>Registrarme</button>

Me gusto esta clase, es algo que casi nunca ponemos atencion

Son aspectos importantes a tener en cuenta muy buen dato.

ANDI una herramienta tremenda, incluyendo a todos los proyectos 😉

Muy interesante el tema de accesibilidad web

Wow, interesante herramienta !

Excelente herramienta

Me encanta esto, siempre incluyentes.

Muy útil todo esto

Super! nunca tuve esto en cuenta Muy buena clase!!!

Muy buena la herramienta, no sabía que la accesibilidad era tan importante