Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es FullStack?

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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Semántica

51/55
Recursos

Aportes 66

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Les vuelvo a dejar esta página Tabla Periódica para HTML para que tengan más contexto y mayor accesibilidad a la documentación en cuanto a semántica o todas las etiquetas que hay :3

Garantizar la accesibilidad a nuestro contenido es un gesto democratico (para todos) e inclusivo (para habilidades diferentes). Asi se adquiere conocimiento, se desarrolla tecnología e implementan instrumentos desde diversas disiciplinas que benefician a todos. Sin ciencia no hay futuro.

Aquí tenemos un claro ejemplo de problemas de accesibilidad

Y aquí es donde mejoramos la accesibilidad.

Por acá les comparto esta información sobre accesibilidad que les puede ser muy útil:

  1. Accessibility (Fundamentals) by Google
  2. The Accessibility Tree by Google
<h1>Accesibilidad</h1>

Productos para todos: Todas las personas pueden acceder a nuestro producto.

Semántica

La semántica está relacionada con las etiquetas contenedoras en HTML5, por ejemplo: header, main, sidebar y footer. Estas agregan información importante para aquellos que tengan problemas con la visualización de la página. Les permite a estos usuarios orientarse en qué sección de la página se encuentran.

  • Por eso, es importante utilizar las diferentes etiquetas que HTML5 ofrece para tener la mejor semántica posible y la accesibilidad.

La accesibilidad es MUY importante, y siempre deberías tenerla en cuenta, y si realmente no te preocupa porque sientes que a ti no te afecta, entonces hazlo por el SEO, el SEO tiene muy en cuenta la accesibilidad, y si no tienes una buena accesibilidad en tu página entonces para Google prácticamente no existes.

la accesibilidad es un tema muy importante en USA es por ley obligatorio.

En los formularios, la propiedad tabindex="" se agrega en los inputs para indicar el flujo de la tecla tab del teclado en tu página. Esto mejora la experiencia de usuario, y también la accesibilidad.

<input  type="text" tabindex="1"/>

Tabindex | MDN

HTML refernce para una cheat sheet de las etiquetas, sus usos, y ejemplos.
Incluye clasificacion de las semanticas
https://htmlreference.io/

Las WCAG se organizan sobre la base de cuatro principios a menudo llamados con la palabra POUR:

Perceptible: ¿pueden los usuarios percibir el contenido? Esto nos ayuda a tener en cuenta que solo porque algo sea perceptible con un sentido, como la vista, no significa que todos los usuarios puedan percibirlo.

Manejable: ¿pueden los usuarios componentes de IU y navegar por el contenido? Por ejemplo, alguien que no puede usar mouse o pantalla táctil no puede manejar algo que demanda interacción de desplazamiento.

Comprensible: ¿pueden los usuarios comprender el contenido? ¿Pueden los usuarios comprender la interfaz y es esta lo suficientemente consistente como para evitar confusiones?

Sólido: ¿puede una amplia variedad de usuarios-agentes (navegadores) consumir el contenido? ¿Funciona con tecnología asistencial?

Jamas había pensado en Utilizar una buena semántica para personas con alguna capacidad diferente!
Muy bien explicado ese punto y no solo desde el lado abstracto de que es buena practica.
Claro que es buena practica pero también que bueno que se hable de otros casos de los que nadie menciona y por eso los que vamos empezando no tenemos en mente.
Grande Diego 😃

Pensé que la web semántica era importante sólo para SEO.
“Soy todo orejas”

Solo teniendo buen HTML semántico nos ahorramos muchos problemas de accesibilidad

Esta etiquetas las compartió el equipo de desarrollo web

Para tener una pagina accesible se debe tener en cuenta:

  1. La semántica de HTML
  2. Textos (enamoremonos del Rem , ya es hora de abandonar el px 😛)
  3. labels - alt - tiitles

Compañeros les comparto una pagina donde les explican mas a fondo como utilizar correctamente la semántica en html.

GRACIAS

Accesibilidad

Semántica: ayuda al software a leer la pantalla, y le dice al usuario en que sección de la página esta.

  • HTML Semántico es usar las etiquetas de html en lugar de usar muchos div.
  • La semántica nos indica en que sección del documento nos encontramos y esto es muy importante cuando implementamos la accesibilidad en nuestra aplicación web.
  • La etiqueta div, debe usarse, cuando haya una etiqueta de html, para la sección que quieras implementar.

🐱‍💻 HTML semántico significa aplicar a cada parte del contenido la etiqueta más adecuada a su tipo.

¿Qué es NVDA?

NVDA (Non Visual Desktop Access) es un lector de pantalla libre y gratuito desarrollado por NV Access que permite a las personas ciegas y con discapacidad visual usar ordenadores. Para ello lee el texto que se muestra en pantalla mediante una voz sintética. Se puede controlar lo que NVDA lee moviendo el cursor al área relevante que contiene el texto, tanto poniendo el ratón encima como usando las flechas del teclado.

NVDA también puede convertir el texto en braille si el usuario del ordenador posee un dispositivo llamado «pantalla braille».

NVDA abre la puerta de la educación y el empleo a muchas personas ciegas. También da acceso a las redes sociales, la banca, compras en línea y noticias.

NVDA funciona con Microsoft Windows. Puedes descargarlo e instalarlo en tu ordenador, o llevarlo en una unidad USB a todas partes.

Normalmente los lectores de pantalla son muy caros, volviéndose inasequibles para muchas personas. NVDA es gratis. Ya se ha descargado más de 70000 veces, y está traducido a más de 43 idiomas.

La accesibilidad web combina la programación, el diseño y la tecnología para construir un Internet sin barreras que permita a todos los usuarios el entendimiento, el aprendizaje, la navegación y la plena interacción con la web

Resumen del capitulo en Notion
https://acortar.link/8N4WSA

Un proyecto WEB profesional debe estar optimizado para que personas con diferentes tipos de discapacidades o condiciones puedan acceder y comprender la información en el sitio WEB y garantizar una buena UX. Esto se consigue generando una estructura semántica del HTML utilizando las etiquetas adecuadas para cada tipo de contenedor.

Básicamente, el código semántico 1 es aquel en el que los elementos marcan los contenidos de acuerdo con su estructura. … Se ha empleado una tabla para maquetar el contenido, cuando las tablas se crearon para marcar semánticamente datos tabulares. El encabezado se ha marcado como un párrafo, y no como un encabezado.

Estructurar nuestro html de forma semántica es una forma de estar en conciencia de los demás, es ética técnica que beneficiará a los otros sin conocerlos.

Súper recomendable el Curso de Accesibilidad Web, en ese curso entiendes y te concientisas de porque necesitas respetar la semántica y para que sirve respetarla.

Cuando Diego dice que hay mucho contenido detrás de “Accesibilidad”, lo dice en serio. Hay toda una rama de la tecnología que se dedica a hacer esta más accesible para todas las personas, y es importante incorporar lo más posible a nuestros proyectos, por más pequeños que sean.

<h4>44. Mis apuntes sobre: “Accesibilidad”</h4>

En la accesibilidad es importante usar la semántica:

Esto ayuda al software de accesibilidad, si usamos solo <div>, esto hará que el usuario no sepa dónde está.

Aquí el curso de accesibildad web
Curso de accesibilidad WEb

Semantica: Hace referencia a todas las etiquetas que nos indican en qué parte del proyecto/Sitio web estamos ubicados.

Ahora más que nunca entiendo la necesidad de la semántica HTML y las buenas prácticas en todo momento. Excelente cierre al curso con este tema tan importante.

Se más empatetico and keep in mind that people de todo el mundo verá tu página.

Que es la accesibilidad?: Garantizar la accesibilidad de nuestro sitio es hacerlo inclusivo. Permitir que personas con discapacidades puedan acceder y disfrutar el contenido de una forma fácil para ellos.

¡Gracias Diego! muy importante que como desarrolladores seamos participes de lograr adaptar la información a distintos públicos y con ello dar más oportunidades de acceder a dicha información. La accesibilidad debe ser uno de los ítems presentes a la hora de crear entornos web.

Ya se tiene un curso.Revisen la ESCUELA DE DESARROLLO WEB (Curso de Accesibilidad Web).

Me gusto mas esta explicación de la semántica porque por lo general lo explican desde una forma muy abstracta

Nunca había pensado en la importancia de las etiquetas hasta ahora. No solo sirven para dividir nuestro proyecto.

Vi muchas páginas que solo están llenas de div. Creo que no le hace nada bueno al SEO luego

Me encanta que se añadan secciones para hablar de esto, de verdad que es un tema de gran importancia al que no se le da la visibilidad que se debería. Esto si que es verdadera inclusividad.

APUNTES:
*Para cada contenido hay una etiqueta.
*Utilizar la etiqueta div, como comodín y/o en
ocasiones especificas.
*¡Productos para todos!

CONCLUSIÓN: cuando hablamos de HTML semántico, nos referimos a utilizar todas y cada una de las etiquetas según el contenido. Y no saturar el contenido con repetidas etiquetas.

Pienso que la semántica nos ayuda a mejorar nuestro posicionamiento SEO y a supersivar nuestro código con ayuda de software externo para dar una mejor experiencia a todo tipo de usuario.

51.-Semántica

Son todas las etiquetas que nos indican donde estamos. Esto es importante porque existen ciertos softwares (si tenemos alguna discapacidad) que nos ayudan a leer la pantalla y si tiene buena semántica le puede decir al usuario en que sección están. Solo usar los <div> cuando tengamos contenedores de algo muy específico.

Muy importante la accesibilidad

Siempre creí que html semántico era para optimización SEO, por eso lo usaba. Ahora me doy cuenta de la verdadera razon.

Información resumida de esta clase
#EstudiantesDePlatzi

  • HTML semántico es utilizar las etiquetas correspondientes a cada caso de manera correcta y esto es importante

  • Algunas etiquetas importantes son: Header, logo,navegation, main, sidebar, footer

  • Los div son etiquetas que usaremos para casos muy específicos y no debemos abusar de ella

Les dejo una maravillosa herramienta Lamada ANDI, diseñada para crear (testear) paginas web siempre teniendo en cuenta el tema de la accesibilidad: https://www.ssa.gov/accessibility/andi/help/install.html

El tema de accesibilidad tiene que ver mucho con la inclusion y como vinculamos a todos los usuarios a navegar nuestro producto web sin importar si tienen discapacidades. Un tema que sin duda si o si debe saber a profundidad un buen programador Web. continuamos aprendiendo.

EXCELENTE CLASE DE REPASO 😄

🤖🤖🤖
https://allthetags.com
🤖🤖🤖

Esto si es evolución, estos detalles cambian todo 👏👏👏

Semantica para accesibilidad

gracias

Muy buena clase!

Muy buenos principios que uno puede implementar

¡Qué buena clase!

Accesibilidad first

Dark Mode hace parte de la accesibilidad?

Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test

genial !

Accesibilidad

👌👌

El master Diego nos ha enseñado mucho y lo que aun falta.