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

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

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

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

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

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

Textos

52/55
Recursos

Aportes 132

Preguntas 13

Ordenar por:

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

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

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

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

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.

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.

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.

Ahora **REM **si hace sentido

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.

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 !

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

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!

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.

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.

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

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.

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

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

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

Cuando trabajas con textos en CSS, hay varias propiedades que puedes utilizar para controlar su apariencia y dise帽o. Aqu铆 hay algunas propiedades comunes de CSS que se utilizan para estilizar textos:

Color del Texto:

La propiedad color establece el color del texto.
css
Copy code
p {
color: #333; /* Color del texto en hexadecimal */
}
Tama帽o del Texto:

La propiedad font-size define el tama帽o del texto.
css
Copy code
h1 {
font-size: 24px; /* Tama帽o del texto en p铆xeles */
}
Tipo de Fuente:

La propiedad font-family especifica la fuente utilizada para el texto.
css
Copy code
body {
font-family: 鈥楢rial鈥, sans-serif; /* Fuente principal y fuentes de respaldo */
}
Estilo del Texto:

La propiedad font-style define el estilo del texto (normal, cursiva, oblicua).
css
Copy code
em {
font-style: italic; /* Texto en cursiva */
}
Peso de la Fuente (Negrita):

La propiedad font-weight establece el grosor del texto (normal, negrita, n煤meros entre 100 y 900).
css
Copy code
strong {
font-weight: bold; /* Texto en negrita */
}
Espaciado entre L铆neas:

La propiedad line-height controla el espacio entre l铆neas.
css
Copy code
p {
line-height: 1.5; /* Espaciado entre l铆neas como un m煤ltiplo del tama帽o de fuente */
}
Espaciado entre Letras:

La propiedad letter-spacing ajusta el espacio entre letras.
css
Copy code
h2 {
letter-spacing: 2px; /* Espaciado entre letras en p铆xeles */
}
Transformaciones de Texto:

La propiedad text-transform modifica el capitalizado del texto (may煤sculas, min煤sculas, capitalizado).
css
Copy code
.uppercase {
text-transform: uppercase; /* Texto en may煤sculas */
}
Decoraci贸n del Texto:

La propiedad text-decoration controla la decoraci贸n del texto (subrayado, tachado, ninguno).
css
Copy code
a {
text-decoration: underline; /* Subrayado para enlaces */
}
Alineaci贸n del Texto:

La propiedad text-align define la alineaci贸n del texto (izquierda, derecha, centrado, justificado).
css
Copy code
p {
text-align: justify; /* Texto justificado */
}
Estas son solo algunas de las propiedades de CSS que puedes utilizar para estilizar textos. Puedes combinar y ajustar estas propiedades seg煤n tus necesidades para lograr el dise帽o de texto deseado en tu p谩gina web.

INSERTE GIFT

Esta clase me vol贸 la mente鈥 LITERAL.

He estado haciendo las cosas mal en accesibilidad de textos, me cost贸 entender el REM al principio y ahora s茅 porque es SERIAMENTE IMPORTANTE. Me he sentido ignroante por todo estos a帽os鈥 comenzar茅 a aplicarlo a partir de ahora.

Texto = Medidas Relativas = REM 馃挌

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

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

Importancia de Utilizar Medidas Relativas en el Tama帽o de Texto

  • La accesibilidad es un aspecto fundamental en el dise帽o web, y la elecci贸n de las unidades de medida para el tama帽o de texto juega un papel crucial en la experiencia del usuario.

Problema de las Medidas Absolutas en el Tama帽o de Texto

  • Tradicionalmente, los desarrolladores han utilizado unidades de medida absolutas, como p铆xeles (px), para establecer el tama帽o de fuente en sus proyectos.
  • Sin embargo, el uso de medidas absolutas presenta limitaciones en t茅rminos de accesibilidad, ya que impide que los usuarios aumenten el tama帽o del texto seg煤n sus necesidades visuales.

Ventajas de Utilizar Medidas Relativas, como REM

  • Las medidas relativas, como REM (root em), permiten establecer el tama帽o de fuente en relaci贸n con el tama帽o del elemento ra铆z (generalmente el tama帽o de fuente predeterminado del navegador).
  • Utilizar REM en lugar de p铆xeles proporciona flexibilidad y escalabilidad, ya que el tama帽o del texto se ajusta autom谩ticamente seg煤n las preferencias del usuario y el dispositivo utilizado.

Implementaci贸n de Medidas Relativas en el Tama帽o de Texto

  • Al dise帽ar un proyecto web, es recomendable utilizar REM para definir el tama帽o de fuente de manera consistente en todo el sitio.
  • Configurar el tama帽o de fuente del elemento ra铆z (html) en un porcentaje (por ejemplo, 62.5%) facilita el c谩lculo de valores REM equivalentes a p铆xeles.
  • Es posible especificar el tama帽o de fuente de elementos individuales, como encabezados (h1, h2, etc.) y p谩rrafos, utilizando valores REM en lugar de p铆xeles.

Beneficios de Utilizar REM para la Accesibilidad

  • Al emplear medidas relativas en el tama帽o de texto, se mejora la accesibilidad del sitio al permitir que los usuarios ajusten el texto seg煤n sus necesidades visuales.
  • La implementaci贸n de REM garantiza una experiencia de usuario consistente y adaptable en una variedad de dispositivos y entornos de visualizaci贸n.

Pr贸ximos Pasos

  • Integrar medidas relativas, como REM, en el dise帽o y desarrollo de proyectos web para mejorar la accesibilidad y la experiencia del usuario.
  • Explorar otras pr谩cticas recomendadas en la maquetaci贸n HTML y CSS para optimizar la usabilidad y la accesibilidad del sitio.
  • Continuar aprendiendo sobre t茅cnicas de dise帽o web inclusivas y centradas en el usuario para crear productos digitales accesibles para todos los usuarios.
Realmente me encanta esta idea de usar rem en lugar de usar px, funciona muy bien para ajustar los textos

buen aporte, en lo poco que le logrado captar en el curso, lo del rem ya lo practico

Gracias profe鈥

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

rem siempre lo veia como una medida mas, pero despues de esta clase, me volo la cabeza, simplemente fascinante鈥

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.

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