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

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
23H
59M
52S

Textos

52/55
Recursos

Aportes 123

Preguntas 13

Ordenar por:

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

o inicia sesi贸n.

Otro aspecto importante con los textos para accesibilidad es que tenga un buen contraste con el fondo.

Dejo un tutorial que hice sobre el tema: notion. so/Contraste-en-Web-c5f242b0cc114401aaca8b615d3a8e32

Me quede as铆 cuando al fin supe por que rem en lugar de p铆xeles 锛銈溿兗銈

TEXTOS
Se recomienda fuertemente usar medidas relativas como rem, para poder incrementar el tama帽o del texto para personas con visibilidad disminuida. Las opciones de navegador que cambian el tama帽o de las fuentes no funcionan cuando las fuentes de html en el texto est谩n en pixeles (px).

No me cargaba la clase, pero una chica comento que cambi谩ramos a el Server A y si funciona.
Todos los cr茅ditos para ella.
Solo lo comparto por si alguien tambi茅n tiene el mismo problema 馃槂

Para accesibilidad es recomendable utilizar medidas relativas (como rem) en vez de medidas absolutas (como px).
.
Adicional a esto, hay otros aspectos importantes a considerar como lo son la accesibilidad en color, la accesibilidad en teclado y en formularios (por mencionar algunas):

  1. Contrast and Color Accessibility
  2. Keyboard Accessibility
  3. Creating Accessible Forms

Muy buenos datos!!!

62.5% = 10px (en base al navegador)
1rem = 10px
1.6rem = 16px
etc.

Realmente considero que ya no hay necesidad de usar 鈥減x鈥 (o al menos usarlo en casos extremadamente espec铆ficos) con este 鈥渉ack鈥 de los rem que aprendimos pr谩cticamente que ya no es necesario, creo que este es uno de los temas que m谩s me encanta jaja, ya quiero llegar al curso de accesibilidad!

Con esta clase entend铆 mejor la utilidad de rem y me parece genial!

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.

La vuelta es nunca trabajar TEXTO con px, siempre rem

Texto

Siempre debemos usar medidas relativas al momento de darle un tama帽o a nuestros textos. Esto permitir谩 a los usuarios incrementar el tama帽o de la fuente de ser necesario, lo cual no sucede si usamos medidas absolutas.

ahora si por fin siento que el rem es util

Muy bueno. El curso me sirvi贸 mucho para repasar conceptos que ya conoc铆a, pero jam谩s hab铆a escuchado el tema de la accesibilidad, ahora incluso conozco su importancia y bueno, a seguir repasando jeje.

no puedo ver este video 馃槮 se queda cargando

De verdad que despu茅s de escuchar el podcast de platzi donde entrevistan a diego, empec茅 a admirar m谩s su trabajo. Se los recomiendo a todos.

Sinceramente me encanta cuando en clases como esta, le encuentro el sentido a utilizar una herramienta digamos y cual es el beneficio que aporta 馃槃 me encant贸 el curso.

Ahora **REM **si hace sentido

44. Mis apuntes sobre: 鈥淭extos鈥

Siempre se deben usar medidas relativas en el texto (em / rem) en vez de px, que es una medida absoluta.

Les comparto el c贸digo de la clase:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident optio, molestiae earum obcaecati voluptatem dolore aperiam, voluptatibus itaque sunt illo in neque hic amet fuga minima, rem voluptate nobis quasi.</p>
</body>
</html>

CSS:

/*RESET*/
html {
    font-size: 62.5%;
}
h1 {
    font-size: 3rem;
}
p {
    font-size: 1.8rem;
}

Uff, no sab铆a el poder de las medidas relativas.

Que importante es todo esto la verdad. Programar una p谩gina web es m谩s que solo escribir c贸digo.

Principales errores que se comenten en Accesibilidad

  • Im谩genes: El atributo ALT no proporcionar una descripci贸n adecuada.
  • Colores: No usar el contraste adecuado entre colores.

Es bueno darse cuenta de que como desarrollador debes pensar en la accesibilidad. Las herramientas que creamos son para la gente y eso incluye a todos.

Me ancanto la clase anterior porque encontre a un nuevo amigo!
EL WIDTH: 100% !!!
jajaja

Cuando lo explicaste en clases pasadas no not茅 la importancia que podr铆a tener ese peque帽o cambio. Excelente!

Un tema que tambien debemos tener en cuenta es la accesibilidad para las personas que padece de daltonismo
aqui unos tips para mejorar las pagians en estos aspectos:

Woo no conoc铆a ese detalle al manejar medidas absolutas en el texto, este es un curso muy completo !

En esta parte, el profe Diego se refiere a implementar medidas relativas como rem :)

No hab铆a pensado en esa posibilidad de ayudar a las personas con dificultades en accesibilidad, usaba las medidas relativas pero no me imaginaba que pod铆an ser tan 煤tiles.

Les recomiendo el Curso de Accesibilidad web es algo que no hay que dejar para el final del proyecto y puede distinguirnos de forma importante de otros desarrolladores.

Gracias Diego por ense帽arnos buenas pr谩cticas con las que podamos llevar la informaci贸n y/o el producto a m谩s personas entendiendo sus dificultades.

Antes de esta clase, no hab铆a reparado en este tema de los textos y la ayuda visual que representa para muchas personas, 隆gracias, Diego por esta clase!

Este tema es muy importante.

Incluso la fuente es esencial.
En el curso de Introducci贸n al dise帽o se recomiendan las Sans-Serif para digital y Serif para impresiones

鉁 Utilizar en textos medidas relativas y no absolutas.

Lo curioso es que la home de Platzi esta construida con px :c

52.-Textos

Aqu铆 nos referimos a la medida de los textos. Todos los developers est谩n acostumbrados a usar pixeles para sus fuentes lo que genera un problema de accesibilidad, porque si queremos aumentar el texto de un proyecto esto no va a poder pasar (porque es absoluta).

Es importante que usemos medidas relativas como rem. De esta manera les damos a las personas con alguna discapacidad un oportunidad de visualizar de mejor manera nuestro producto.

  • Respecto a los textos en mejor usar medidas relativas, como rem, en lugar de medidas absolutas. Esto mejora la accesibilidad visual.

En este link hablan de los par谩metros de accesibilidad
https://www.w3.org/TR/WCAG20/

Esto me aclara que la mejor pr谩ctica para manejar los tama帽os de las fuentes es con la medida rem.

Tambi茅n pueden modificar el tama帽o de la letra en html a 6.25%, as铆 un rem valdr谩 1, en vez de 10.

Sal铆 triste de esta clase, tanto desarrollos que hice con fuentes en pixeles 馃様

Otro truco que desconoc铆a, tomando nota y aprendiendo. Me ha encantado este curso. 馃お馃憤馃徎馃懆馃徎鈥嶐煉烩渽馃搱馃殌馃敟馃檰馃徎鈥嶁檪锔忊湆

Si quedaban dudas en utilizar o no pixeles luego de la clase de REM, en esta es evidente el uso que debemos hacer de las medidas relativas.

Exacto, mientras m谩s claro y preciso, es mejor para el usuario.

En temas de accesibilidad podemos ver como rem nos ayuda mucho.

Muy genial este conocimiento 鈿

Ya estoy very perdido, el instructor dice que px es una medida absoluta, pero dice que no usemos Px. Pero en el minuto 5:20 dice que implementemos medidas absolutas. Jajajaja, que procede ah铆?

mi miop铆a y astigmatismo te lo agradece

Resumen SM 馃殌


No usar medidas absolutas para el texto (o sea pixeles) sino que es mejor usar medidas relativas (Preferiblemente REM), ya que permite que el dispositivo de las personas que necesiten ver mas grande los textos los puedan configurar sin necesidad de que la persona siempre tenga que hacer zoom.

馃憤馃挭馃憤

Si gestionamos los textos en p铆xeles en nuestros documentos CSS, la gente que tenga problemas de la vista y quiera agrandar los textos haciendo uso de la herramienta Opciones que da el navegador, no podr谩 hacerlo, porque los valores en p铆xeles permanecen fijos, ya que son valores absolutos. Por eso, la soluci贸n es siempre manejar los textos en REM, que es un valor relativo. Fijando previamente el selector de HTML a 62.5%, (donde 1 rem = 10 px) al inicio de nuestro documento style.css.

Excelente clase porque se piensa en la generaci贸n de contenidos inlcuyente, para todos

Todos los desarrolladores estan acostumbrados a usar pixeles en sus fuentes.Esto nos genera un problema de accesibilidad,le estamos quitando oportunidades a personas de baja vision que quieran consumir nuestro contenido.

Tienes mucha raz贸n. El contraste de los colores debe ser el correcto para evitar la difcultad al leer.

Minuto 5: Medidas relativas como REM (correcci贸n)

Yo creo que el px es mejor para condiciones, y para el tama帽o de las palabras y demas es mejor utilizar medidas relativas como rem

se ve que es necesario cambiar de px a medidas relativas como rem

El uso de rem permite que el navegador manipule el tama帽o del texto, lo que es conveninete para la accesibilidad. Por lo tanto, es buena pr谩ctica siempre usar rem como unidad de medida para los t茅xtos.

Para hacer uso de textos en nuestros proyectos, se aconseja manejarlos con medidas relativas.

La importancia de las medidas Relativas son:

  1. Las medidas relativas permiten tener efecto en configuraciones del dispositivo o navegado web
  2. Con las medidas relativas podemos proporcionar o habilitar esta opci贸n para todo tipo de usuario persona.

隆Al fin entend铆 el por qu茅 del rem! :3

gracias por la aclaraci贸n!

Super este tema de accesibilidad.

Una vez m谩s debo cambiar mis px por rem

Excelente clase鈥

Definitivamente un tema muy importante.

hay un error en el servidor c no me carga el v铆deo espero lo arreglen plis no puedo ver la clase!!!

Este es un gran aporte, definitivamente quisiera tomar el curso de accesibilidad

La primera vez que alguien me explica porque usar los REM antes que los PX, supremamente claro CSS, muchisimas gracias Diego 馃槂

.

REM鈥EEMPLAZA A PX EN 3,2,1 鈥

Es importante entender la importancia de usar medidas relativas (como 鈥渞em鈥) en lugar de usar pixeles, para conseguir un dise帽o que se adapte a distintos tama帽os de pantalla.

Unidades relativas como 鈥渞em鈥 permiten a los dise帽adores y desarrolladores web aplicar estilos de manera consistente a trav茅s de todas las p谩ginas de su sitio web. Esto significa que el dise帽o se ver谩 igual en todos los dispositivos, ya sean m贸viles, tablets, ordenadores, etc.

Adem谩s, usar unidades relativas significa que los usuarios pueden ajustar el tama帽o de la fuente a sus preferencias. Esto tambi茅n es beneficioso para las personas con discapacidades visuales, ya que pueden aumentar el tama帽o de la fuente para hacer que el contenido sea m谩s legible.

Clase 52 - Textos


驴El manejo del texto es importante en la accesibilidad de un producto/proyecto web?

  • S铆.

驴Qu茅 aspecto debemos manejar en los textos para que nuestro producto/ proyecto web sea accesible a los dem谩s?

  • Las medias que usamos para definir el tama帽o de estos textos.

驴Qu茅 medida debemos de usar para que los textos de nuestro producto/proyecto web sea accesible?

  • Rem.

驴Por qu茅 debemos de usar la media rem para que los textos de nuestros productos/proyectos web sean accesibles?

  • Porque los textos tambi茅n crecer谩n si el usuario aumenta el tama帽o del texto por medio de una configuraci贸n desde el navegador, cosa que no podemos hacer con medidas absolutas como los px.

que genial 馃槉

Ahora si que he entendido mejor este tema de medidas absolutas y relativas.
https://desarrolloweb.com/articulos/unidades-medida-css-relativas-absolutas.html

REM es GOD.

En CSS, una unidad de medida rem se refiere a la fuente por defecto del documento. Esto significa que si la fuente por defecto del documento es de 16 p铆xeles, entonces una unidad de rem equivale a 16 p铆xeles. Sin embargo, esto puede variar dependiendo de la configuraci贸n de la fuente por defecto en el documento en cuesti贸n. En general, es importante tener en cuenta que las unidades de medida en CSS son relativas, lo que significa que se basan en el tama帽o de la fuente o de otras propiedades en lugar de en una medida absoluta. Esto permite que el dise帽o sea m谩s adaptable y responsive a diferentes dispositivos y tama帽os de pantalla.

Ahora todo tiene sentido sobre medidas absolutas :v

Me parece increible como el conocimiento te permite que haya crear espacios en este caso digitales inclusivos con las personas!, eso me encanta y gracias por eso!..

muy buena clase

Como apoyo pueden consultar este video, que lo explica m谩s ampliamente. https://www.youtube.com/watch?v=nz6DIeBdZtY

en la clase de REM, me segui como un enfermo sin darle tanta importancia y ahora que llegue a esta clase me tuve que regresar :C a quien mas le paso?

Quiso decir relativas, REM/EM/% son medidas relativas, no absolutas.

RESUMEN CLASE 52:
TEXTOS

Usar textos con medidas realtivas con 鈥渞em鈥 para poder escalar.

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>Accesibilidad texto</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
        <h1>Soy un titulo ejemplo</h1>
        <section>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima, culpa. Nesciunt soluta ratione unde explicabo molestiae. Libero accusamus iste recusandae dolores voluptate distinctio repellendus possimus. Optio, amet! Alias, cupiditate voluptatem!
            </p>
        </section>
    </main>
</body>
</html>

CSS

html {
    font-size: 62.5%;
}

h1 {
    font-size: 3rem;
}

p {
    font-size: 1.8rem;
}

Si aplicamos los texto desde el inicio con rem la accesibilidad de texto estar谩 activado

Informaci贸n resumida de esta clase
#EstudiantesDePlatzi

  • El tama帽o del texto lo debo manejar con medidas relativas, es decir, usar el rem para definir los tama帽os

  • Si manejamos el tama帽o del texto con dimensiones absolutas como son los px, no permitimos que nuestro proyecto tenga accesibilidad para algunas personas con problemas visuales

Vuelvo a dejarles una maravillosa herramienta (ANDI) dise帽ada para crear paginas siempre teniendo en cuenta la accesibilidad: https://www.ssa.gov/accessibility/andi/help/install.html

Lo aprendido en esta clase lo voy a implementar simplemente porque tambi茅n lo uso y me siento incluido uwu

Muy interesante

Esto explica por qu茅 darle uso al rem en lugar de px, jaja

Ahora entiendo porqu茅 hay p谩ginas en donde el texto no crece pero la p谩gina s铆 馃槷

ahora entiendo la necesidad de usar medidas relativas para los font-size con el rem 馃挌

rem; texto puede incrementar su tama帽o
pc; texto de tama帽o fijo

Muy interesante esta parta parte la desconocia. Ahora a usar todo en rem.

Las medidas de texto deben ser relativas para evitar problemas de accesibilidad. Ya que con medidas absolutas como pixeles no se puede aumentar el tama帽o del texto. Utilizando medias relativas como rem que garantiza una buena UX.

Excelente explicaci贸n de por qu茅 usar rem en lugar de px!!!

Chicos espero y les sirva, no se ni como di con eso, ah铆 les dejo la liga para que vean el c贸digo:

https://iecgerman.github.io/accesibilidad/claseTextos/index.html

Esto es importante, dependiendo la animaci贸n que quieran, se debe de ir incluyendo y se parando con |

estas son buenas practicas, pensando en personas adultas y personas con capacidades diferentes.

apliquen colegas. Y la web ser谩 mas interactiva :technologist:

Muy importante el tema de accesibilidad.

Creo que tiene un error en el minuto 5:21 dice que rem es una medida absoluta cuando en realidad es una medida relativa.

Gracias por ense帽ar este tema de accesibilidad, siempre me agrada que los consumidores puedan tener acceso a todo