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

La accesibilidad y nuestra responsabilidad como desarrolladores

39/43
Recursos

Debemos pensar en esas personas con una discapacidad visual que no tienen la posibilidad de ver lo mismo que la mayoría de nosotros. Estas personas no siempre usan el mouse, sino lectores de pantalla.

Un Lector de Pantalla se encarga de leer toda la aplicación elemento por elemento. Que los lectores de pantalla funcionen es responsabilidad de las y los desarrolladores: debemos tener muy buena semántica, usar las etiquetas y atributos adecuados entre otras.

Aportes 121

Preguntas 2

Ordenar por:

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

¿Algún curso en Platzi que profundice sobre la accesibilidad?

Muy buena clase y la teacher muy simpatica 😊😊! el solo gesto de inculcar una cultura filantropica de manera profesional es una muestra de calidad!.Denotar estos valores vale el esfuerzo!💝

Esto es importante cuando estemos trabajando en páginas con alto tráfico como páginas informativas de gobierno, universidades y demás instituciones.

Me pareció muy interesante lo que hizo banco w en su menu para las personas que son sordas. https://www.bancow.com.co/

Muy buena clase, la verdad nunca nos enfocamos en esto, pero con esta clase te das cuenta de los problemas que pueden llegar a tener si no lo contemplamos.

Ésto es un punto muy importante, pero que lastimosamente no se tiene en cuenta :c
Me fue bastante difícil saber en qué parte de la web estaba sin verla, solamente escuchando los elementos.

La accesibilidad web desmuestra responsabilidad social y tambien tiene otras ventajas aqui hay algunas:

Reduce los costes de desarrollo y mantenimiento del sitio.

Mejora del motor de búsqueda del sitio.

Reutilización de contenidos.

Gestiona la carga del servidor (hojas de estilo, vínculos mejor definidos, alternativas textuales…).

Por eso es importante usar HTML semántico y usar siempre los alt y demás atributos de manera correcta desde que se hace el layout básico de tu página.

Bastante interesante el tema, considero es la responsabilidad de uno como Programador el hacer llegar una web de la mejor forma para todos. También la importancia de ALT="", del código semántico y lo que nos ayuda esto con SEO. Excelente clase!!

Excelente lo de la Accesibilidad, es cierto lo que tu dices, es nuestra responsabilidad como ingenieros pensar no solo en las personas que tienen todas sus capacidades sino tambien en aquellas que carecen de alguna de ellas.

Es increíble la poca importancia que se le tiene al tema de la accesibilidad. Hay que crear una técnica para hacer m´de verdad accesible el uso de la web, tal vez con un asistente con IA

Estudio medicina y es muy importante que facilitemos el acceso a aplicaciones y herramientas web a las personas que presentan alguna dificultad visual, auditiva y demás. Excelente enfoque

Que bien que se toque este tema, en lo particular ni si quiera sabia que existían estas herramientas. Muchas gracias por la información.

Con razón todos los slides están en azul y amarillo! para que la gente con daltonismo también pueda verlos, o me equivoco? 😲 Me encantó este apartado 👏.

Responsabilidad como desarrolladores: hacer uso de una buena semántica.

Wow esto si fue interesante algo en lo que nunca avia pensado.

Para las personas con discapacidades visuales, es muy dificíl acceder a diferentes contenidos que existen en internet. Por lo que se vuelve necesario para nosotros cómo programadores, hacer herrramientas para ayudarles a esas personas a acceder más fácil a la información.

Muy muy interesate, la verdad admiro a las personas que a pesar de las dificultades puedan salir adelante, cerre los ojos y se me dificulto entender donde estaba.

De todas las cosas aprendidas, creo que esto es lo mejor que he podido recibir. Que seamos conscientes y realmente creemos cosas con inclusión real. Gracias teffcode!!!

nunca lo pense antes que buen detalle

como profesional del área con una hija con discapacidad visual vivo la importancia de esto, y siempre trato de hacerlo mejor para que ella pueda disfrutar de la tecnología tanto como yo.

En este proyecto se han llevados muchas cosas que no van en corriente con la la accesibilidad, inicialmente los texto están en medidas absolutas tal caso que una persona tenga problemas para ver de cerca nunca podrá ver mas grande el texto lo mejor es utilizar medidas como REM o EM.

Recomiendo leer la Web Content Accessibility Guidelines (WCAG) un estandar de la w3 para accesibilidad web.

https://www.w3.org/WAI/standards-guidelines/wcag/

Genial, también pensar en accesibilidad te da puntos en cuanto a SEO, esto porque a Google le gusta que las páginas estén adaptadas para todo tipo de personas y por tanto “te premia” con una buena indexación, es por eso que siempre se debe usar código semántico

El color tiene un papel muy importante.
les recomiendo el curso de uso y manejo del color: https://platzi.com/clases/color/

Es algo que no piensa uno al momento de desarrollar una pagina web.

para los que no entendieron, aprendan ingles p

Ese tipo de cosas casi no se piensan, que genial que este en este curso.

Una web accesible proporciona las siguientes ventajas a su organización:

  • Incrementa la cuota de mercado y audiencia de la web
  • Mejora la usabilidad de la web para todo tipo de usuarios.
  • Permite mejorar el acceso a los contenidos Web a las personas mayores.
  • Mejora los resultados en los buscadores.
  • Permite la reutilización de contenidos por múltiples formatos o dispositivos.
  • Incrementa el soporte para el mercado internacional (subtítulos, idioma alternativos, contenidos universales…).
  • Ayuda a reducir la llamada brecha digital.
    Mejora la eficiencia y el tiempo de respuesta
  • Reduce los costes de desarrollo y mantenimiento del sitio.
  • Mejora del motor de búsqueda del sitio.
  • Reutilización de contenidos.
  • Gestiona la carga del servidor (hojas de estilo, vínculos mejor definidos, alternativas textuales…).
  • Gestiona el ancho de banda del servidor.
  • Demuestra responsabilidad social

Refuerza positivamente la imagen empresarial.
Permite diferenciarse de la competencia.
Posibilita llegar a una proporción influyente de la población (3,5 millones de personas en España demandan servicios y entornos accesibles).

Curso para profundizar esta clase:

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

Increible este asunto de la accesibilidad.
Uno da por hecho que hay algo que hace posible que una web sea leible por una persona invidente; sin embargo, durante el desarrollo hay que pensar en ello.

En mi anterior trabajo, nosotros no sabíamos de accesibilidad, pero un día me puse a investigar y empezamos a aplicar este tema en todas nuestras webs, nos ha ayudado mucho tener en cuenta que no todos podemos ver los elementos, o que no todos los vemos de la misma manera

Me parece muy bueno enfocar el desarrollo de nuestras aplicaciones tambien a personas con alguna discapacidad, debemos pensar en todos!

Genial, estas herramientas y pensar en implementarlas para hacer que muchas mas personas puedan ser incluidas en la tecnologia y no se vean afectados en no poder acceder a los contenidos

Gracias por tocar un punto súper importante para hacernos crecer cómo sociedad

vaya, fue muy buen ejercicio el de cerrar los ojos mientras el lector describía la web. Como desarrolladores hay una gran responsabilidad

No sabia que era tan complicado para estas personas. muy importane la semantica.

Un tema demasiado importante y sí, muy olvidado. Hace falta más inclusión en lo que construyamos.

Excelente el enseñar esta parte del desarrollo, fundamental para un internet mas accesible

wow … justo lo que en clases anteriores se comento, con el sass vi que se facilita hacer css de temas. Llegue a pensar que eso funcionaria para la gente con alguna discapacidad visual, pero esto no lo había pensado.

Muchas gracias.

Me gusta el tema de la accesibilidad porque se trata de que la web realmente pueda llegar a todos. El uso de la semántica es muy importante porque podemos ayudar a simplificar un poco la navegación y experiencia de aquellas personas con una condición especial. No es mero capricho, así que a apostar por buenas prácticas en el desarrollo web. 👍🏻

En le caso de personas con discapacidad visual y auditiva se utiliza una pantalla braile mejor conocidas como “linea braile” en donde se pueden mostrar una o varias lineas (entre mas lineas es mas caro el dispositivo)

Muy guapa la profesora

Herramienta ANDY para ayudarnos con la ACCESIBILIDAD de nuestros sitios web.

no sabia lo util de los lectores de pantalla

Qué geniaaal!!

Maravillosa clase!!

que buen ejercicio!

Excelente¡

Aquí pueden encontrar mas información sobre accesibilidad https://www.w3.org/WAI/

Ez buena idea, pero super hacer software para la comunidad que sufre este problema

recomiendo ver el curso de accesibilidad web https://platzi.com/clases/accesibilidad-web/
es muy bueno

Accessibility

Screen Reader

  • Screen readers are software applications that attempt to convey what is seen on a screen display in a non-visual way, usually as text to speech, but also into braille or sound icons. Screen readers are essential to people who are blind, as well as useful to people who are visually impaired, illiterate, or have a learning disability.

    https://developer.mozilla.org/en-US/docs/Glossary/Screen_reader

Advice for Accessibility

  1. Execute the fundamentals flawlessly

  2. Enable keyboard navigation for web design

  3. Prioritize Text Clarity

  4. Don’t rely exclusively on color

  5. Order content in HTML for screen readers:

    Ever since the separation of HTML and CSS, developers are able to alter what users see without changing the structure of the code. In addition to simplifying the design process, this also allows for better usability with screen readers.

    While sighted users can simply scan the page and click on their preferred selection, users with screen readers must sit through the screen readers explaining every element on the page. Imagine the frustration with clicking a link to an article and having to sift through the entire navigation menu.

    With the separation of HTML and CSS, though, you can reorganize the code to suit screen readers without changing the screen layout at all. The navigation menu can stay at the top, best for sighted users, while the code for it stays at the bottom, best for screen readers.

  6. Explanatory link text

  7. Use a 40x40 pt. clickable area for touch controls

  8. Follow the accessibility checklist

https://www.uxpin.com/studio/blog/8-website-accessibility-best-practices-to-improve-ux/

En serio despues de ver esta clase me ha puesto a reflexionar que tenemos que pensar en todas las personas que poseen alguna discapacidad visual o cualquier otro problema para poder entrar a nuestras aplicaciones realizadas como desarrollador muchas gracias por enseñar esto de la accesibilidad me parece muy importante implementarlo

Que buena herramienta, siempre hay que pensar en la inclusión de personas con algún tipo de discapacidad. 😄

Es importante tener en cuenta toda la población al momento de realizar una página web. Personalmente no conocia este tema, sin embargo me parece que es demasiado importante.

Genial

que tema más increible la verdad nunca lo había tomado en cuenta.

exelente opcion

Que bueno aprender sobre este tema

Super!

😃

Sin duda es muy importante la accesibilidad a nuestros proyectos tanto moralmente

Muy importante!

Nunca había pensado en eso. Gracias por hablar acerca del tema

Me encanto esté vídeo

Excelente pensar en la accesibilidad del sitio es muy importante para ayudar ha aquellas personas que sufren de la vista 👍.

muy buen tema

Muy importante.

Excelente !

genial

A la hora de diseñar debemos pensar en todo tipo de personas

Gran tema y olvidado por mucho 😦

Excelente tema 👍

Muy buen tema, la verdad nunca había pensado en eso; pero gracias a esto, sé que realmente es necesario.

Ante todo es bueno pensar en las personas que tienen alguna discapacidad para poder brindarles una web amigable con todas ellas.

genial introducir esto en nuestros proyectos para que le lleguen a mas personas!

Que genial!!

En mi universidad se están centrando mucho en las personas Sordomudas

Gracias, sos la mejor mis

Gernial

El curso de accesibilidad es muy genial.

Pueden conocer más de la accesibilidad en la web con el WCAG
https://www.w3.org/TR/WCAG21/

muy bueno, hay que hacer nuestro web site lo mas accesible posible

realmente muy buen pensamiento!!

Nunca había pensado en estos casos

Nunca habia pensado en eso! Excelente

Excelente!

Muy bien pensado 😄

Jamás había pensado en este tema, pero es cierto y super importante!

interesante el tema de accesibilidad.

es decir que nuestros proyectos son aptos para todo publico =)

wow, nunca había visto nada de esto

Excelente poder trabajar con esas herramientas.

Importantísimo y olvidado, desde ahora a poner en práctica!!!