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
Web Developer Fundamentals
Qué aprenderás sobre HTML y CSS
¿Qué es el Frontend?
¿Qué es Backend?
¿Qué es Full Stack?
Páginas Estáticas vs. Dinámicas
Quiz: Web Developer Fundamentals
HTML
HTML: anatomía de una página web
Index y su estructura básica: head
Index y su estructura básica: body
Reto: crea tu lista de compras del supermercado
Anatomía de una etiqueta de HTML
Quiz: HTML
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Quiz: Etiquetas multimedia
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
Quiz: Formularios
CSS
¿Qué es CSS?
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
Pseudo clases y pseudo elementos
Anatomía de una regla de CSS
Modelo de caja
Herencia
Especificidad en selectores
Demo de especificidad y orden en selectores
Más sobre selectores
Combinadores: Adjacent Siblings (combinators)
Combinadores: General Sibling
Combinadores: Hijo y Descendiente
Medidas
Medidas EM
Medidas REM
Max/Min width
Position
Display
Desafío: Layout 1
Display Flex
Flexbox layouts
Variables
Web fonts
Quiz: CSS
Responsive Design
Responsive design: media queries
Estrategias de responsive: mostly fluid
Implementando mostly fluid
Layout shifter CSS
Column drop
Buenas prácticas y ejemplos de responsive
Imágenes responsive
Quiz: Responsive Design
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
Contribución realizada con los aportes de: Natalia Molina
Aportes 74
Preguntas 8
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.
Por acá les comparto esta información sobre accesibilidad que les puede ser muy útil:
Aquí tenemos un claro ejemplo de problemas de accesibilidad
Y aquí es donde mejoramos 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.
Productos para todos: Todas las personas pueden acceder a nuestro producto.
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.
la accesibilidad es un tema muy importante en USA es por ley obligatorio.
Una página web que me ha servido bastante
https://www.mclibre.org/consultar/htmlcss/html/html-secciones.html
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"/>
En la lista. ✨✨ https://platzi.com/clases/accesibilidad-web/
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”
HTML refernce para una cheat sheet de las etiquetas, sus usos, y ejemplos.
Incluye clasificacion de las semanticas
https://htmlreference.io/
Esta etiquetas las compartió el equipo de desarrollo web
Compañeros les comparto una pagina donde les explican mas a fondo como utilizar correctamente la semántica en html.
Solo teniendo buen HTML semántico nos ahorramos muchos problemas de accesibilidad
¿Para qué nos sirve la accesibilidad?
¿Necesitamos JavaScript para implementar una buena accesibilidad en nuestros productos?
¿Qué es HTML semántico en desarrollo web?
¿Por qué es importante usar HTML Semántico en cuanto al tema de accesibilidad?
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.
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.
¿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.
Para tener una pagina accesible se debe tener en cuenta:
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.
div
.div
, debe usarse, cuando haya una etiqueta de html, para la sección que quieras implementar.GRACIAS
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 significa aplicar a cada parte del contenido la etiqueta más adecuada a su tipo.
Es un aspecto que no debemos pasar de largo al Hacer nuestros proyectos, esto incluso tiene obligación legal en Estados Unidos: Sección 508
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
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.
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.
Muy importante la accesibilidad
Muy buena explicación profe…
Les dejo una Tabla por si quieren explorar para que sirve cada etiqueta…
Tabla Periodica
Mi conclusión de todo lo aprendido sobre accesibilidad.
<!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>Document</title>
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<section>
<article></article>
</section>
<aside></aside>
</main>
<footer></footer>
</body>
</html>
Semántica se refiere al uso correcto de todas las etiquetas de HTML de acuerdo a cada parte del sitio web, con los nombres adecuados y evitando usar demasiado ciertas etiquetas como <div>. De manera que sólo coloques divs para contenedores específicos o que sean cosas que no tienen una etiqueta específica a la cual referirse dentro de la sección <main> o <body>, por ejemplo.
RESUMEN CLASE 51:
SEMANTICA
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
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.