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 119

Preguntas 19

Ordenar por:

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

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

“La 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

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

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.

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>>

¡El mejor curso de html y css que he tomado!
Muy contento por el contenido 😎

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

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

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 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.

“Somos responsables que todo lo que construimos sea consumido por cualquier tipo de usuario”.

**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:

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.

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

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 💚

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 “arañ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!

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

Recuerden que el alt="" les ayudará también a posicionarse mejor en buscadores. 💻

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

Es un gran aspecto en el que reflexionar.

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.

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.

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!

<h4>45. Mis apuntes sobre: “Labels, alt y title”</h4>

El id que le demos al <input> debe ser igual al atributo “for” 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=“Es un perrito” —> Cuando el usuario haga hover encima de la imagen, se mostrará un recuadro indicando el texto.

alt=“Es 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.

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.

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.

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

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/)

“En 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.

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.

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

Para activar el Asistente de Voz en Android presiona al mismo tiempo “Volumen +” y “Volumen -”

Me funciona en mi Samsung A10S

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

“La 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.”

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: “Es un perrito muy lindo” y alguien pone “perrito 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=“Par de zapatos rojos.”>

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

Ejemplo:
<img src=“asd.png” title=“sus”>

Considero que la accesibilidad como la “Inclusió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. “title” 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 accesibilidad” Gracias 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 “grá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?

Esto de las etiquetas es un factor importante en el posicionamiento de la pagina Organico. segun Google es un elemento que se toma en cuenta.

Muy bueno el atributo title="", no lo había tomado en cuenta. Que buena clase

RESUMEN CLASE 53:
LABELS ALT y TITLE

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LabelsAltTitle</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
        <h1>MI FORMULARIO</h1>
        <form action="">
            <label for="name">
                <span>Cual es tu nombre?</span>
                <input id="name" type="text">
            </label>
            <label for="started-studying">
                <span>Que dia empezaste con Platzi?</span>
                <input id="started-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="./aston-martin-medium.jpg" alt="Es un Auto Aston Martin" title="Es un Auto Aston Martin">
        </section>
    </main>
</body>
</html>

CSS

* {
    box-sizing: content-box;
    margin: 0;
    padding: 0;
}

img {
    width: 450px;
}

Información resumida de esta clase
#EstudiantesDePlatzi

  • Alt y title son atributos de etiquetas

  • Label la utilizamos junto con una etiqueta de input y se comporta como el contenedor

  • Es importante usar alt, ya que lo que esté allí dentro puede ser leído por el navegador y también aparece una descripción de la imagen

  • con el title si me posiciono encima de una imagen me aparece una descripción

Gracias

no tenia ni idea, gracias!

¿Saben?

Una de las cosas que más me gusta de platzi es que por cada duda, inquietud o sugerencia que puedas tener, te ofrecen un curso jaja, es más que genial que puedas volverte un conocedor de temas a más profundidad con este aporte de sus profesores y su misma comunidad

Excelente Excelente Curso!!!
Un tremendo profesor Diego de Granda!

Estos detalles te hacen mas profesional

La etiqueta title está bastante buena

La documentación de title:

Entonces title es lo que hace wikipedia en sus hipervincuos cierto?

Me encanta que hayan mencionado esto. A veces damos por hecho que la usuario o usuario no tienen algún tipo de discapacidad y eso les limita demasiado.

SIEMPRE ES BUENO PENSAR EN MAS USUARIOS

Me parece que no hay necesidad del atributo for dentro de los labels, pues el input está estructuralmente enlazado al label.

Deberían inventar una IA que describa las imágenes y automáticamente las inserte en los alt.