Web Developer Fundamentals

1

Qu茅 aprender谩s sobre HTML y CSS

2

驴Qu茅 es el Frontend?

3

驴Qu茅 es Backend?

4

驴Qu茅 es Full Stack?

5

P谩ginas Est谩ticas vs. Din谩micas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatom铆a de una p谩gina web

7

Index y su estructura b谩sica: head

8

Index y su estructura b谩sica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatom铆a de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

驴Qu茅 es CSS?

22

驴C贸mo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatom铆a de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

M谩s sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desaf铆o: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas pr谩cticas y ejemplos de responsive

50

Im谩genes responsive

Quiz: Responsive Design

Accesibilidad

51

Sem谩ntica

52

Textos

53

Labels, alt y title

Pr贸ximos pasos

54

Pr贸ximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Labels, alt y title

53/55
Recursos

Aportes 139

Preguntas 22

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Un punto importante de Accesibilidad no solo hay que pensar en nosotros, hay que pensar en los dem谩s usuarios que podr铆an incluso tener una capacidad diferente.
En este curso me lleve mucho aprendizaje, pero esta lecci贸n es la mas importante.
Y desde ahora dar茅 lo mejor de mi para ofrecer servicios al alcance de todos.

Mis puntos m谩s importantes sobre estas clases de accesibilidad

鈥淟a accesibilidad es una acto de democratizaci贸n al acceso de productos digitales, es la reivindicaci贸n del derecho de una persona con ciertas capacidades diferentes a acceder a las mismas plataformas.鈥

-La sem谩ntica jugar谩 un papel importante en la lectura de la plataforma por parte de un software
-Es recomendable en cualquier situaci贸n el uso de medidas relativas (REM, EM) pues estas modificar谩n su tama帽o en nuestra p谩gina cuando un usuario modifique el tama帽o de las letras en la configuraci贸n de su navegador.
-El uso de <label> en los formularios facilita la interacci贸n de las personas y software con ellos. Por ejemplo al apretar la barra de espacio en un input que despligue un submen煤, este se mostrar谩.
-alt en las im谩genes proporciona una descripci贸n para un lector de contenido.
-El atributo title puede ser usado en las etiquetas img y a para dar una descripci贸n de sus contenidos al hacer hover.

Para mejorar la accesibilidad:

  1. Labels en los inputs que utilicemos (se usa mucho en formularios) - Si quieres saber mas sobre lables te dejo este par de recursos: label - MDN y HTML <label> Tag
  2. El atributo alt (en las im谩genes) - El **alt** facilita que un una persona con limitaci贸n visual que usa un software para leer la p谩gina web pueda escuchar de que se trata la imagen.
  3. El atributo title que se usa en la etiqueta de anchor (<a>) y en la etiqueta imagen (<img>).
    .
    Tambi茅n me gustar铆a compartir los siguientes recursos de los que se puede aprender a como realizar auditorias de accesibilidad y alternativas de texto para im谩genes:
  4. Accessibility audits
  5. How To Do an Accessibility Review
  6. Text Alternatives for Images

La que mas me gusta es el title, sobretodo porque casi nadie lo conoce, lo puse es los aportes de una clase pasada pero es muy importante, deber铆an usar title cuando quieren dar una descripci贸n al hacer hover sobre un elemento, mejora mucho la accesibilidad y la verdad es que yo como usuario lo uso mucho cuando quiero saber qu茅 hace tal cosa

Hola amigos aqu铆 les comparto algunas extensiones de Chrome para ayudar en el tema de la accesibilidad de nuestro sitio web:

  1. WAVE evaluation tool, eval煤a nuestro sitio y nos dice que tan accesible es para personas con discapacidad.

  2. WCAG Color contrast checker, nos ayuda para que el contraste color sea el ideal .

  3. NoCoffee, esta extensi贸n nos ayuda a simular ciertas discapacidades visuales.

Si deseas verificar o auditar de forma r谩pida tu accesibilidad puedes hacerlo de dos maneras:

  1. Con las DevTools, vas a inspector de elementos buscas Lighthouse, seleccionas las categor铆as y dispositivo que deseas en el informe y listo.
  2. Puedes hacer el an谩lisis con este recurso para mejorar la velocidad de tu pagina: https://developers.google.com/speed/pagespeed/insights/?hl=es

隆El mejor curso de html y css que he tomado!
Muy contento por el contenido 馃槑

Un atributo s煤per interesante que no conoc铆a y que no vi en el curso es fieldset y es perfecto para contener el form. Otra cosa es que el span no es necesario ya que se puede poner esto mismo entre las etiquetas <label> y </label> como en el ejemplo.

<<form>
	<fieldset>
		<div>
			<label for="firstname">Firstname</label>
			<input id="firstname" name="firstname" title="Es obligatorio que ingreses tu nombre" required>
		</div>>

Aqu铆 les dejo mis apuntes sobre puntos nuevos e importantes de este gran curso, espero les sirva como a mi.

Pude ver que en algunos sitios usan la etiqueta title para poner el copyright de la fotograf铆a. 驴Eso es de buena pr谩ctica?

El buen desarrollador siempre debe ponerse en los zapatos de la persona que usa su herramienta.

  • El label ayuda a que se pueda enfocar r谩pidamente en el input del formulario.
  • En el atributo alt de la etiqueta img, de debe colocar una descripci贸n r谩pida de lo que contiene la imagen, ya que esto ser谩 le铆do por el software para accesibilidad auditiva.
  • El atributo de title, de la etiqueta img, le agrega una descripci贸n a la imagen cuando el cursor se pone encima de ella.

鈥淪omos responsables que todo lo que construimos sea consumido por cualquier tipo de usuario鈥.

Tras haber estudiado la carrera de UX, creo que la accesibilidad es el puente entre el UX y la programaci贸n. No me parece muy dif铆cil de implementar y sin embargo, cambia la vida a muchas personas: perfil t茅cnico-emp谩tico

**ACCESIBILIDAD **

La accesibilidad es demasiado importante en un proyecto para ofrecer una mayor experiencia de usuario para aquellos que tienen cierta dificultad con la tecnolog铆a, alg煤n tipo de patolog铆a o falencia relacionada.

Para mejorar este apartado es bueno hacer uso de la medida relativa ** rem** para adaptar el texto tal como lo visualiza el usuario con la configuraci贸n de su navegador.

Usar etiquetas y atributos como las siguientes:

Clase 53 - Labels, alt y title


驴Qu茅 elementos y etiqueta nos pueden servir en mejorar la accesibilidad de un producto/proyecto web?

  • Atributos:
    • Alt.
    • Title.
  • Etiqueta
    • <label>.

驴Por qu茅 la etiqueta <label> nos ayuda a la accesibilidad de nuestros productos/proyectos web?

  • Porque esta etiqueta la podemos usar como contenedor de los elementos input y span de un formulario, lo cual le permite al usuario darle clic solo al texto de ayuda y el foco ir谩 inmediatamente hacia el input.
  • Tambi茅n le puede ayudar a los usuarios con discapacidades auditivas y visuales y que usen lectores de pantalla a que le lea el campo y a llenarlo.

驴Para qu茅 nos sirve el atributo alt?

  • Este atributo nos permite agregar una descripci贸n a im谩genes para que un lector de pantalla le indique al usuario de qu茅 trata la imagen, adem谩s en caso de que la imagen no se renderice, el valor de este atributo ser谩 el que se renderiza en la pantalla.

驴Para qu茅 nos sirve el atributo title?

  • Este atributo nos permite agregar una peque帽a descripci贸n de un elemento de imagen o link para que el usuario sepa de qu茅 trata este elemento cuando pase su cursor por encima del elemento.

Me parece brutal que se Ense帽en este tipo de cosas en Platzi. Yo pas茅 20 a帽os de mi vida con discapacidad visual y para poder disfrutar de un contenido web ten铆a que estar como a 5 cm de la pantalla del computador.

Labels, alt y title

Son atributos que agregamos a las etiquetas para mejorar la accesibilidad. Este tipo de atributos ayudan a las personas con discapacidades a tener un mejor acceso al producto.

  • Label: permite posicionarnos directamente en el input de lo que se est茅 trabajando.
  • alt: breve descripci贸n de lo que se espera ver en la imagen contenida en la etiqueta img.
  • title: peque帽a descripci贸n de un elemento que aparece al pasar el curso por encima de este.

El curso es super completo, pero esta unidad es de las m谩s importantes, ya que esto te da herramientas para que todas las personas tenga acceso a contenido digital.

Siempre me pregunte como hacia para darle esa info a mi pagina, gracias a esta clase se que era con title. Cada dia aprendo nuevas cosas, me encanta Platzi 馃挌

Recuerden que el alt="" les ayudar谩 tambi茅n a posicionarse mejor en buscadores. 馃捇

En un curso de FrontEnd aprendi tambien la accecibilidad a colocarle:

tabindex="0"

a los textos para que sean le铆dos por otros softwares
un ejemplo es andi

El atributo 鈥Alt鈥 en las im谩genes, adem谩s de ser una buena pr谩ctica de accesibilidad, tambi茅n es muy importante a nivel de SEO (Search Engine Optimization). El cual nos ayuda a la hora de posicionar nuestro sitio web en internet y que las 鈥渁ra帽as web鈥 indexen de mejor manera nuestras p谩ginas.

Muy interesante las buenas pr谩cticas. Por fin terminando este curso. Seguro Platzi tiene m谩s!

Para activar el Asistente de Voz en Android presiona al mismo tiempo 鈥淰olumen +鈥 y 鈥淰olumen -鈥

Me funciona en mi Samsung A10S

Algo importante que descubr铆 es que podemos agregarle estilos de texto, por ejemplo: Font-family, etc; a la etiqueta de la imagen para que la descripci贸n que se renderiza a trav茅s del atributo alt tome esos estilos.

Lo que dice Diego es verdad, a nadie le ense帽an este tema tan importante como la Accesibilidad, de ahora en adelante mis proyectos estaran pensandos para todos los usuarios

Sin duda toda la informaci贸n del curso es muy completa pero lo que m谩s me sorprendi贸 fueron las buenas pr谩cticas que te ense帽an para que sea un desarrollador con excelentes conocimientos y buen resposive adem谩s que te nutren de la importancia de accesibilidad para todo tipo de usuarios. Uno de los mejores cursos sin duda!

De cara al tema de la accesibilidad, en esta web hay un enlace para descargar GRATIS un libro en PDF o EPUB que habla sobre la Accesibilidad Web. Actualizado a 2018

Una pagina web, no solo debe ser creada o pensada solo para personas que tienen baja o nula visi贸n, hay muchas personas que tienen otro tipo de discapacidad, ellos, tambi茅n merecen tener ese tipo de accesibilidad, cuando se est谩 desarrollando una pagina web, no hay que solo pensar en utilizar las medidas relativas para los tama帽os de los texto o utilizar algunas etiquetas pensadas para la sem谩ntica, 茅stas etiquetas deben contener las WAI-ARIA, para mejorar la accesibilidad etc. Aqu铆 dejo el enlace para aprender un poco m谩s sobre la utilizaci贸n b谩sica de las WAI-ARIA. https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics

El atributo de title no lo conoc铆a, me parece excelente.

Es un gran aspecto en el que reflexionar.

Con el siguiente c贸digo, pueden configurar un snippet (atajo de teclado) para escribir toda la parte de CSS que establece el reinicio de m谩rgenes y font para utilizar el Rem que nos ense帽贸 el profesor en este curso.
.
en mi caso, us茅 la palabra casca (personaje de berserk) como atajo de teclado para que me escriba todo lo que se ve en 鈥渂ody鈥
.

.
Lo pueden configurar desde el la siguiente opci贸n en el apartado de Settings
.

鈥淟a accesibilidad es una acto de democratizaci贸n al acceso de productos digitales, es la reivindicaci贸n del derecho de una persona con ciertas capacidades diferentes a acceder a las mismas plataformas.鈥

para los que quiz谩s no recuerden la p谩gina de las imagenes aqu铆 est谩: https://www.pexels.com/es-es/

Saludos compa帽eros

53.-Labels, alt y title

Son algunos atributos que se le agregan a las etiquetas.

  • Label: Como es el contenedor de todo el input al darle click al label y autom谩ticamente pone un focus en el input. Por ejemplo cuando un software de lectura, al momento que se pare en el label autom谩ticamente se selecciona el input. SIMPRE USARLO PARA LOS INPUTS/FORMULARIOS.

  • Alt: Al igual que en el anterior, al llegar el software a la imagen lo que har谩 es que leer谩 la descripci贸n que venga dentro del alt. Hay que ser descriptivos. Que tambi茅n sirve cuando la imagen no carga como vimos en clases pasadas.

  • Title: Este se puede agregar a diferentes etiquetas como por ejemplo <a> o <img> esta es otra peque帽a descripci贸n que sale al momento de hacer un hover en la imagen o hiperv铆nculo.

<h4>45. Mis apuntes sobre: 鈥淟abels, alt y title鈥</h4>

El id que le demos al <input> debe ser igual al atributo 鈥渇or鈥 de la etiqueta <label> que contiene este input.

Nos va a ayudar a enfocar m谩s r谩pido en los input.

Respecto a las im谩genes, podemos (y debemos) usar dos atributos:

title=鈥淓s un perrito鈥 鈥> Cuando el usuario haga hover encima de la imagen, se mostrar谩 un recuadro indicando el texto.

alt=鈥淓s un perrito con antenas鈥 鈥> Cuando no se cargue la imagen (o hiperv铆nculo con la etiqueta <a>) se mostrar谩 ese texto, tambi茅n ayuda al software de accesibilidad decir qu茅 hay en esa imagen.

Alt, Title, Labels.
Estas etiquetas apoyan a los usuarios con problemas de lectura para entender mejor nuestra p谩gina, a trav茅s de un software de lectura de p谩ginas como screen reader.

Alt le dice al usuario de que trata la im谩gen.
title es un atributo que se puede agregar a las etiquetas de ancla (a) o a las etiquetas de im谩genes. Esta muestra una descripci贸n de la imagen al momento que se hace hover en ella.
label Es una etiqueta que aporta mucho en accesibilidad por qu茅 al momento de darle click a cualquier texto que est茅 contenido en esta, se redirigir谩 el focus al input respectivo de la etiqueta.

Excelente punto a tener en cuenta, ya que no todos cuentan con las mismas capacidades nuestras; y como desarrolladores tenemos que pensar en el alcance global que hoy dia pueden tener nuestros proyectos, y en que todos los usuarios independientemente de su capacidad o incapacidad, puedan tener una buena experiencia.

Aparte que el atributo ALT en las imgs es perfecto para posicionar en SEO. Es lo que la maquina de Gooogle entiende sobre la imagen y la posiciona para sus resultados de b煤squeda.

Es la primera vez que veo el atributo title, se me hizo muy interesante!

Aqui se encuentra el curso de accesibilidad de Platzi, para que la mayor cantidad de personas puedan disfrutar de sus maravillosas creaciones!

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

鈥淓n accesibilidad siempre es bueno pensar en mas usuarios, no solamente en nosotros鈥

Teniendo en cuenta esto desde un principio, ayuda que los dise帽os vaya mas all谩 de que se vea bien visualmente sino que sea lo mas legiblemente posible. En experiencia del usuario

Estaba pensando que Title puede no ser tan 煤til porque la letra se visualiza de forma muy reducida, sin embargo, me parece que esos tama帽os tambi茅n se modifican desde la configuraci贸n del navegador. En el caso de las personas que tienen problemas visuales.

El comentario final es tan cierto! tenemos un compromiso con la gente de distintas capacidades para que puedan consumir de nuestro contenido sin problemas!

Recomendaciones de Accesibilidad:

Colocar las etiquetas, respetando la sem谩ntica.
Usar medidas relativas para los textos.
Agregar siempre labels, alt y title.

Gran forma de cerrar este incre铆ble curso con este m贸dulo de accesibilidad.

Un punto importante de Accesibilidad no solo hay que pensar en nosotros, hay que pensar en los dem谩s usuarios que podr铆an incluso tener una capacidad diferente.
En este curso me lleve mucho aprendizaje, pero esta lecci贸n es la mas importante.
Y desde ahora dar茅 lo mejor de mi para ofrecer servicios al alcance de todos.

Este tema es muy bueno y muy 煤til ya que ayuda a muchas personas, de ahora en mas voy a aumentar la accesibilidad de las paginas que hago en mi trabajo.

Felicidades por el curso. Ven铆a de estudiar HTML y CSS de otra escuela y la verdad que se me hizo muy tedioso porque no aterrizaban los cursos a casos pr谩cticos como lo hizo el profe ac谩. Recomendado al 100%

Parte de este curso me ense帽贸 a crear un producto para todo tipo de personas pensando en sus necesidades para que la p谩gina llegue a posicionar primero en el buscador

Excelentes herramientas para hacer nuestros proyectos aptos para todos.

Siempre hab铆a visto este tema de los alts y titles como para efectos de un buen SEO, por el hecho de que los buscadores no leen im谩genes sino texto, pero con esto de los screen reader me he quedado con la boca abierta y recapacitado en la gran responsabilidad que tenemos los developers para transmitir el contenido y brindar la mejor experiencia a todos los usuarios.

Esta parte parte de accesibilidad fue de mucha ayuda, no conoc铆a mucho sobre el tema y veo la gran importancia que tiene para que m谩s personas puedan consumir nuestros proyectos 馃槂

Adem谩s de lo mencionado por Diego, tambi茅n el soporte a idiomas es importante si queremos que el producto sea internacional.

si alguien me puede ayudar por favor ago todos los pasos pero cuando pongo el mouse sobre la imagen no me aprace la descripcion.
dejo mi codigo

<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
        <form action="">
            <label for="name">
                <span>驴Cual es tu nombr?</span>
                <input id="name" type="text">
            </label>
            <label for="staeted-studying">
                <span>驴Que dia comenzaste con platzi?</span>
                <input id="staeted-studying" type="date">
            </label>
            <label for="time-to-study">
                <span>驴En que horario estudias?</span>
                <input id="time-to-study" type="time">
            </label>
        </form>
        
        <section>
            <img src="./small.jpeg" alt="es una iglesia" title="es una iglesia grande">
        </section>
        
    </main>
</body>
</html>
>

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
img{
width: 350px;
}

`<code>

Este es el primer curso tan completo de desarrollo web que he tomado, que superescuela

Hola a todos, quer铆a compartierles una p谩gina que se llama 鈥https://loremflickr.com鈥. Esta p谩gina permite colocar src de im谩genes aleatorias con ciertas dimensiones para probar y testear lo que vayas haciendo sin tener que preocuparte por descargar.

Por ejemplo, si quieres incluir la imagen en la parte del section lo 煤nico que haces es lo siguiente:

<section>
      <img src="https://loremflickr.com/320/240" alt="">
</section>

El valor del 320 y del 240 que aparece en la ruta de la p谩gina web, son los tama帽os de ancho y alto de la imagen, estos valores se pueden cambiar por los que necesites incluir en tu proyecto, por ejemplo src="https://loremflickr.com/640/640" te trae una imagen con un tama帽o de 640x640.

Espero que les sirva la info, saludos y nunca paren de aprender 馃挌

buen铆sima clase, estoy haciendo un bootcamp de programaci贸n web y no recuerdo que nos explicaran la importancia de este tipo de etiquetas鈥

El atributo title no lo conoc铆a鈥asta el final del curso el prof dando unos consejos de infarto鈥racias profesor.

Importante y muy interesante tomar en cuenta 茅ste aspecto. Ya cerca de acabar el curso :'v

Cada vez el numero de usuarios de la web y en general de la tecnolog铆a aumenta, por lo que estos temas de accesibilidad toman mas relevancia. As铆 que a usar las etiquetas label, alt y title, adem谩s de usar medidas relativas para las dimensiones de los textos.

Para aquellos que depronto no han visto mi mensaje, vuelvo a dejarles una maravillosa herramienta llamada ANDI, dise帽ada para testear paginas web siempre teniendo en cuenta el tema de la accesibilidad: https://www.ssa.gov/accessibility/andi/help/install.html

S煤per interesante esta clase y la tem谩tica tratada. Es siempre bueno pensar en todas las personas que puedan llegar a visitar nuestra p谩gina.

La buenas practicas de accesibilidad tambi茅n es importante para el SEO de la pagina. Los robots de google leen toda la semantica y alt name para posicionarlo en el navegador.

Para que quede mas claro, si escribes: 鈥淓s un perrito muy lindo鈥 y alguien pone 鈥減errito lindo鈥, nada por haber agregado esa metadata el buscador para poder posicionar las im谩genes con dichas caracter铆sticas y por comentar, no es lo 煤nico que importa en su posicionamiento.

Labels
Es prudente poner en la parte de 芦<label for="">禄 algo que se pueda rellenar de manera autom谩tica: name, direction, postal code, number, etcetera.

alt
Dar una descripci贸n breve en 芦alt禄 para que usuarios incapaces de ver la imagen puedan verla.
Ejemplo:
<img alt=鈥淧ar de zapatos rojos.鈥>

Title
Es una peque帽a descripci贸n que aparece al momento de hacer un hover sobre una imagen.

Ejemplo:
<img src=鈥渁sd.png鈥 title=鈥渟us鈥>

Considero que la accesibilidad como la 鈥淚nclusi贸n para usuarios鈥 visto desde el punto de desarrollo front end.

Estuve todo el curso esperando saber como hacer esto鈥 el momento en que explico. 鈥渢itle鈥 BOOOM. Demasiado genial, increible curso.
Muchas gracias.

Much铆simas gracias

si se aprendi贸 bastante, ahora a practicar!!

peque帽as cosas que hacen grandes cambios en accesibilidadGracias Diego, es un deber y una responsabilidad darle a personas con algunas dificultades o mejor con capacidades distintas, la oportunidad de tener las mismas posibilidades de acceso a contenido e informaci贸n.

Esto de la accesibilidad es de suma importancia, y es algo que en ninguna otra plataforma de ense帽anza he visto. Valiosa informaci贸n y sobre todo reflexi贸n. Excelente!

Excelente estas clases de Accesibilidad. Qu茅 buena ense帽anza para complementar a todo el conocimiento que deja el curso.

Hay personas que a煤n con un zoom al m谩ximo deben acercarse a la pantalla de su dispositivo. Por eso la importancia de la accesibilidad en nuestros proyectos

Los labels: funcionan junto a los inputs. Es importante porque al envolver el input en un label, este le da un foco especial que permite hacer click sobre el label y nos lleva a rellenar la informaci贸n del input. Le ayuda mucho a algunos software de lectura a enfocarse en el input directamente.
.
.
El atributo alt: nos ayuda a leer la descripci贸n de las imagenes para personas con discapacidades visuales. Tambi茅n sirve para agregar un texto alternativo en caso que la imagen no se carge.
.
.
El atributo title: puede ser usado en varias etiquetas HTML como img o a y su funci贸n es agregar una descripci贸n para cuando el usuario haga hover sobre alg煤n elemento.

Desarrollar productos digitales pensando en la accesibilidad para todo tipo de personas, y todo eso se logrando sabiendo usar las etiquetas correctas y las buenas pr谩cticas que el profe Diego nos comparti贸 durante el curso.
excelente!!

Hay un dato interesante que sucede en Instagram y otras redes sociales. Cuando por alguna raz贸n no se carga la imagen muestra un texto en el lugar de la imagen, describi茅ndola. Por la forma en la que las describe posiblemente sea una inteligencia artificial.

Clase bastante importante, la importancia de nosotros como programadores para ser inclusivos a personas con discapacidad鈥 Super!!!

Aumenta la accesibilidad de tu p谩gina teniendo usando las siguiente propiedades html:
.
馃暥 Label (uso: formularios)

Permite que software de terceros (screen readers) accedan m谩s f谩cilmente al input en un formulario, ya que, seleccionando el label se selecciona directamente el input
.

馃Л Alt (uso: im谩genes)

Permite que los screen readers describan una im谩gen. Por ello se tiene que ser 鈥済r谩ficamente descriptivo鈥 al escribirlo.
.

馃挰 Title (uso: hiperv铆nculos y im谩genes)

Muestra un texto al lado del mouse cuando el usuario hace un hover (poner el mouse en en cima de un elemento). 脷til para aclarar el paradero de un hiperv铆nculo.
.

En el curso de accesibilidad web realmente ir profundizan en el tema, pero es importante tambi茅n considerar aspectos como contraste de colores y dependiendo del enfoque de nuestro proyecto, llegar a tener opciones que permitan a nuestros usuarios tener algunas personalizaciones.

Creo que debemos gastar ese tiempo de mas para poder implementar todos estos recursos 馃檶

Excelente curso =D ahora por mas =)

este curso fue muy genial

Te amo diego, gracias jajaj

馃憣

Interesante, esta clase.

Pienso que el tema de accesibilidad es el CSS de muchas personas.

Impresionante

Interesante

excelente video muy intuitivo

Cuando debo usar title y cuando usar el tooltip?

El mejor curso que he tomado de HTML & CSS

Este es el link para obtener a profundidad documentacion acerca de Accesibilidad.

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

Excelente clase, no habia pensado demasiado en las personas con algunas discapacidades, por lo cual se deben sentir frustrados por no encontrar paginas responsivas y acceder al contenido. Aplicar estos conceptos nos volver谩 m谩s profesionales sin duda alguna!

Estas etiquetas realmente nos ayudan a comunicarnos mejor con todos, que nuestra p谩gina est茅 totalmente adapta para cualquier usuario deber铆a ser la norma.

importancia del label en el input, le da foco al tocar el label y a la hora de la lectura de pantalla mediante un software, le es mas facil, lo que el software le vaya indicando al usuario.
alt nos ayuda a indicarle al software (screen reader), la descripcion de lo que esta imagen. Esto como buenas practicas; tambien muestra la descripcion que coloquemos en caso de que se rompa la imagen.
titles da descripcion de hacia donde nos lleva la imagen.

En todo sitio debe existir actualmente la ayuda auditiva, para sacar mayor provecho a la etiqueta Alt el cual servira para la lectura del texto descriptivo que hemos agregado a la imagen.

Prof. Diego De Granda, mil gracias por este curso, que estuvo completo y con los ejercicios me ayudaron mucho. Gracias

Hola amigxs! Estos son mis apuntes a modo de manual de consulta para todos ustedes. Est谩 dividido en 3 partes:** HTML, CSS y Resposive design** que he estado dise帽ando a lo largo del curso, y que estar茅 actualizando conforme vaya encontrando m谩s info y recursos que puedan servirle para sus proyectos. Espero que lo disfruten ^^

https://lauragconsuegra.notion.site/Curso-definitivo-HTML-y-CSS-c928210f7df740bc8ec1a18dc3610b23

  • Son pequenas cosas que podemos agregar al momento de estar haciendo la amquetacion de nuestro proyecto que pueden hacer grandes cambios en tema de Accesibilidad.

  • Si no tenemos Alt, si no estamos ocupando un label o un titles pueden haber muchas personas que tengas problemas visuales que ocupan ese tipo de softwar que simplemente se van a perder de nuestro contenido y eso tenemos que evitar por que somos responsables 100% de que nosotros construimos pueda ser consumido por cualquier tipo de ususario.