Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

Maquetación de la pantalla de login: Estilización con CSS

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

La importancia del código semántico

9/43
Recursos

Es importante que como desarrolladores tengamos claro el significado de escribir código. Debes ser consciente de que la manera en la que codeas tenga sentido.

La semántica HTML no es más que darle sentido y estructura a lo que estas escribiendo. Muy importante para el navegador. No todos los elementos deberían ser un div.

Aportes 271

Preguntas 13

Ordenar por:

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

Algo importante que hay que tener en cuenta es que mas que el desarrollador que entre a nuestro HTML lo entineda, es por SEO, por elemplo cuando ella compara “<em>” con “<i>”, entonces “<i>” solo modifica el texto para nosotros, por otro lado “<em>”, le notifica al SEO de google que el texto de alli es relevante

Otros de los beneficios significativos del HTML semántico son:

  • Los motores de búsqueda considerarán tu contenido como palabras clave importantes para influir en los rankings de búsqueda de la página (SEO).
  • Los lectores de pantalla pueden usarlo como una señal para ayudar a los usuarios con discapacidad visual a navegar por una página (Accesibilidad).

El HTML semántico agrega significado al código para que las máquinas puedan reconocer bloques de navegación, encabezados, pies de página, tablas o videos.
|

|

denle al inspector, esta pagina creo que es un buen ejemplo de semantica en el codigo

-> https://motherfuckingwebsite.com/

Nota Mental: Para mejorar el SEO (En español, nuestro ranking en los buscadores) es mejor usar los componentes que corresponden para cada necesidad. Al Cesar lo que es del Cesar.

Me encantó la mención de la importancia de crear contenido accesible para personas con discapacidad visual. Bien ahí.

Soy Licenciado en Educación Especial y estudiante de Platzi. Me agrada que la profesora hable de accesibilidad y de que esta industria también está abierta para las personas que presentan alguna discapacidad.

Que tengamos demasiadas herramientas para hacer algo, y funcione, no quiere decir que voy a usar un martillo para cortar un pedazo de carne. Hay que saber utilizar sabiamente la herramienta que mejor se acople a la necesidad.

Algunas ventajas del codigo semantico:

  • Posicionamiento en buscadores. Los motores de búsqueda analizan el código para saber qué clase de contenido muestran (y así, saber cómo mostrarlo). La semántica del código todavía puede ser un factor secundario, pero indudablemente es cada vez más importante.

  • Accesibilidad. Los lectores de pantalla para usuarios ciegos organizan la lectura del contenido de acuerdo con la estructura del código.

  • Practicidad. El código semántico es más fácil de entender y mantener.

  • Reusabilidad. La separación del contenido de la presentación permite que una página sea rediseñada cambiando sólo el CSS.

Fuente: Importarcia del código semántico

Genial, el código semántico es muy importante incluso para SEO, un caso similar son las etiquetas <b> y <strong> siendo strong la que da el énfasis, y es muy importante siempre mantener el código semántico por estas y muchas otras razones más

También es una muy buena práctica para el SEO.

Vaya no había considerado el hecho, y no sólo por buenas prácticas, de que el uso de código semántico también tenga un fin inclusivo. Que buen punto.

Entonces, utilizar código semántico, es decir, utilizar las etiquetas que se tienen que utilizar para lo que verdaderamente debemos utilizarlas, tiene cuatro beneficios importantes a saber:

  • Posicionamiento en buscadores, como mencionan ya algunos compañeros.
  • Accesibilidad: Hacer inclusiva la navegación para personas con discapacidad visual.
  • Mantenibilidad: Un código semántico es más fácil de entender para otros desarrolladores. Ahora no lo vemos, pero si navegamos entre los elementos de una página compleja veremos una estructura con múltiples niveles de profunidad que a la larga hacen MUY difícil el proceso de mantener un sitio web.
  • Reusabilidad: Este aspecto forma parte de la mantenibilidad. Es más fácil cambiar el diseño de un sitio semántico a través del uso de CSS que en uno cuya estructura sale fuera de los estándares.
    Fuente: esta clase y este enlace

Siempre que maqueto uso la siguiente estructura.

<body>
	<header>
		<nav></nav>
		<aside></aside>
	</header>
	<main>
		<section>
			<article> ... </article>
		</section>
	</main>
	<footer></footer>
</body>

Por lo general <aside> es el menu para mobile que esta oculto.

Complementos para VSCODE que les recomiendo:

Auto Rename tag
Auto Close Tag
Live Server
Atom Key Map
Emmet
Live Server
Guides
Increment Section

Recomiendo utilizar LiveServer complemento de vscode, para no tener que estar actualizando al navegador.

Las páginas antiguas son geniales.
Le ponían la semántica en el id ( <div id=‘cabecera’> ) jaja
Yo he visto muchisimas páginas así.
xD

Algo importante de la semántica y saber el uso adecuado es que da instrucciones correctas a los robots de los motores de búsqueda (como google) de que es el contenido de cada etiqueta es relevante o no para el posicionamiento ademas de la accesibilidad.

Buena semántica —> SEO

Con qué software hace los dibujos que está mostrando en las dispositivas?

Emmet es el plugin que se usa para generar código más rápido en nuestros sitios. les dejo el enlace de su documentación https://docs.emmet.io/cheat-sheet/. Si quieren usar otro editor les recomiendo también http://brackets.io/ y tiene una gran variedad de plugin también al igual que VSCode. Por acá les dejo otros 2 https://www.sublimetext.com/, https://atom.io/ para mi éstos son los mejores editores que existen.
Saludos.

Algo util que pueden hacer para no hacer un refresh manual en VS Code, es usar una extension que se llama Live Server. Esta te crea un localhost y cuando haces un cambio en tu codigo esta se refresca automaticamente y te muestra el resultado en tiempo real.

Recuerda que pasamos un 85 % de nuestro tiempo aproximadamente leyendo codigo, debemos tener buenas practicas de escritura y no escribir por escribir…

Saludos .

El término «semántica» se refiere al significado de los signos lingüísticos, como símbolos, palabras, expresiones y representaciones formales. A través de los años, el lenguaje HTML fue volviéndose cada vez más semántico: sus etiquetas tienen un significado cada vez más importante. Que una etiqueta tenga significado no quiere decir que se refleja con un aspecto visual determinado en el navegador (algo que corresponde a las hojas de estilo en cascada), sino que define la naturaleza del contenido que debe incluirse en ella. Por ejemplo, tanto la etiqueta <em> como la etiqueta <i> hacen que el texto encerrado en ellas se vea con itálicas. Sin embargo, <i> solo influye en el aspecto visual de la tipografía, mientras que <em> (por emphasis), además de lograr ese efecto, indica que quisimos darle énfasis al texto. Por eso, <em> es una etiqueta más semántica que <i>.

Usar HTML semántico significa aplicar a cada parte del contenido la etiqueta más adecuada a su tipo. Por ejemplo, para los párrafos se usa <p> y para las listas, <ol> o <ul>. Adoptar esta práctica implica entender que HTML tiene que ver cada vez más con la estructura que con la presentación, por lo cual etiquetas como <i> (que es puramente de presentación) deben dejar de utilizarse.

De manera similar, la etiqueta <table> puede permitir diseñar una plantilla tan bien como (o en ocasiones mejor que) la etiqueta <div>. Pero, aunque el resultado visual sea el mismo, <table> solo es adecuada para presentar información tabular (por ejemplo, un cuadro de doble entrada). En cambio, etiquetas como <div>, <section>, <header> y <footer> se crearon específicamente para separar secciones dentro de una página, por lo que en este caso aportan semántica. Utilizar código semántico ofrece varias ventajas:

Posicionamiento en buscadores. Los motores de búsqueda analizan el código para saber qué clase de contenido muestran (y así, saber cómo mostrarlo). La semántica del código todavía puede ser un factor secundario, pero indudablemente es cada vez más importante.
Accesibilidad. Los lectores de pantalla para usuarios ciegos organizan la lectura del contenido de acuerdo con la estructura del código.
Practicidad. El código semántico es más fácil de entender y mantener.
Reusabilidad. La separación del contenido de la presentación permite que una página sea rediseñada cambiando sólo el CSS.
En la medida en que los desarrolladores mejoren el significado de su código avanzaremos hacia la Web Semántica, una era en la que el contenido esté tan bien etiquetado que los buscadores puedan encontrar exactamente lo que el usuario desea.

si debuggeo el codigo en consola con:
bash -v nombreArchivo.html

Darle el sentido adecuado a una de cada esas etiquetas´No es colocar <div> porque eso funciona´

Es importante el código semántico; dar accesibilidad que otras personas lo puedan entender.

Se debe tener en cuenta la semántica en nuestro código para que cualquier persona pueda entender nuestro sitio web. Excelente

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Curso frontend Developer</title>
  </head>
  <body>
    <div>
      <header>
        <div>Temario del curso</div>
        <nav>
          <ol>
            <li>estructura html</li>
            <li>parrafos</li>
            <li>importancia del codico semantico</li>
          </ol>
        </nav>
      </header>
      <section>
        <p>imagenes:</p>
        <img src="infograma.png" alt="Rendertree">
      </section>
      <footer><i>contactanos</i></footer>
    </div>
  </body>
</html>

En el curso de programación se me ha enseñado que es una buena práctica usar /> para las etiquetas que no tienen cierre por ejemplo <img src=“gato.jpg” alt=“felino” />

Esta clase es de suma importancia para el SEO de la pagina web. Facilitar la lectura al buscador nos brindara mejor posicionamiento web.

Codigo semantico
Darle sentido a cada etiqueta

<!DOCTYPE html> <!-- asegura que el documento sea analizado en los diferentes navegadores->
<html lang="es"> <!-- conocida como route element, donde tenemos todos nuestros elementos, el head y el body, html es el padre o madre y los hijos son head y body-->
<head> <!--no tiene elementos visuales-->
  <meta charset="UTF-8"> <!--tiene la códificación de los caracteres-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--nos ayuda a que nuestra página sea responsive, ajustando el contenido a la pantalla, se complementa con media queries de CSS-->
  <title>My First Web Page</title> <!--título de nuestra página, se visualiza en la pestaña del navegador -->
  <style></style> <!-- aquí puedo escribir mi css -->
</head>
<body> <!-- cuerpo de nuestra página, visible-->
  <header> <!--aquí va nuestra cabecera-->
    <ol>
      <li>Inicio</li>
      <li>Cuenta</li>
    </ol>
  </header>
  <section>
    <em>Hola</em> <!--hace enfasis en la palabra y no solamente la posición italica, mejor para SEO-->
    <i>Hola</i> <!--solo hace la posición italica, se enfoca en la fuente-->
  </section>
  <footer>
    Contáctanos
  </footer>
  <!-- <h1>Esta es mi primera etiqueta HTML</h1>
  <div> Un DIV es como una caja, todos los elementos, especial para envolver los elementos, útilizamos la etiqueta P= parrafo para solo texto
    <p>Estoy muy felíz de escribir este párrafo</p> -->
  </div>
</body>
</html>```

Me ha tocado ver menus construido totalmente con “div”, y creanme es un dolor de ojos ver eso. 😦
Las buenas practicas que nunca mueran. ❤️

Importante no solo programar para nosotros si no para que todos, puedan entender de manera simple nuestro código y la pagina que diseñemos.

Código semántico: Lo que estemos escribiendo tenga sentido, y dentro del contexto de lo que queremos hacer. Ejemplo: no es buena práctica escribir un párrafo fuera de la etiqueta párrafo.

este año en el Google IO, Se anuncio que se el navegador Google le dará mayor importancia a todas aquellas páginas con un mejor SEO. Ahora mas que nunca es importante tener cuidado con nuestro código semántico. Vean este video para que estén al tanto de esto y muchas cosas más que son importantes para nosotros los Devs web.

Las etiquetas <i> y <em> visualmente muestra lo mismo, pero la primera solo se refiere a darle formato italico al texto en cambio la seguna, da un sentido semantido, de que estoy haciendo enfasis en ese texto que está dentro de ella…

igual como pequeño consejo descarguen la extensión go live server en vscode para no refrescar la página en automático 😄

Tomando en cuenta ciertas practicas de SEO, el código semántico nos ayuda a indicarle a Google la arquitectura interna de una página web, y esto nos pueda ayudar para conseguir un mejor posicionamiento en buscadores.

Algo un poco irrelevante, pero que puede ser de ayuda, es que si en algún momento buscan duplicar una línea de código como vimos en el video, la forma más rápida es usar SHIFT + ALT, seguido de flecha hacia abajo

<em> se enfoca en el enfasis que le queremos dar al texto, es para darle la importancia del enfasis en la semantica

La diferencia basicamente es la semantica, cuando se quiere dar el enfasis propio se escribe, em o strong, cuando solo nos interesa el estilo se usa i o b.

Entender el significado semántico de etiquetas permite estructurar con detalle el esquema del documento. Lo que ayuda al lector a visualizar y entender mejor el contenido.
Tambien ayuda a que el contenido se muestre de manera consistente en diferentes aplicaciones y contextos, además de ser fundamental para otorgar accesibilidad y funcionalidad con tecnología de asistencia como lectores de contenido.

Una pregunta, como puedo habilitar en ATOM el plugin para que me aparezca la descripción de las etiquetas?Una pregunta, como puedo habilitar en ATOM el plugin para que me aparezca la descripción de las etiquetas?

Utilizar código semántico ofrece varias ventajas:
• Posicionamiento en buscadores. Los motores de búsqueda analizan el código para saber qué clase de contenido muestran . La semántica del código todavía puede ser un factor secundario, pero indudablemente es cada vez más importante.
• Accesibilidad. Los lectores de pantalla para usuarios ciegos organizan la lectura del contenido de acuerdo con la estructura del código.
• Practicidad. El código semántico es más fácil de entender y mantener.
• Reusabilidad. La separación del contenido de la presentación permite que una página sea rediseñada cambiando sólo el CSS.

No sé si alguien ya aportó este link. Dentro de los diversos sitios donde podemos encontrar referencias HTML a mi me encanta este, de la comunidad Mozilla, está en inglés pero las definiciones son súper buenas y es muy fácil encontrar la etiqueta que necesiten. https://developer.mozilla.org/en-US/docs/Web/HTML/Element

También en general la página https://developer.mozilla.org Es un sitio excelente a la hora de documentarnos y aclarar dudas.

Happy Coding compañeros!

Esto es ORO puro, al semantica es muy importante al momento de desarrollas nuestras paginas web

Semantica HTML => es darle sentido y una estructura a nuestro código HTML.

Si usamos muchos div nos dará divitis xp

Muy buena clase

insisto que falta el main 😕

Estructura tradicional de una pagina HTML5

Muy bueno, es muy importante estructurar bien nuestra pagina web

Su voz me relaja, Gracias.

Me gusta que haga énfasis en las personas con discapacidades.

muy buena clase bien explicada

Súper importante para la posición SEO en los navegadores!

La mejor profesora de Platzi sin dudas

La semántica nos ayuda a darle un sentido y una estructura a nuestra pagina.

Muy buena clase porfió entendí esto de la semántica.

<!DOCTYPE html>
<html>
   <head lang="es">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Semantica</title>
   </head>
   <body>
      <header>
         <ol>
            <li>Inicio</li>
            <li>Cuenta</li>
         </ol>
      </header>

      <section>
         <em>Hola (enfasis en la palabra) em </em><br>
         <i>Hola (texto en italica - solo tipografia) i</i>
      </section>

      <section>
         <div>Esto aparenta ser un texto, pero en el fondo es un div ¡cuidao!</div>
         <p>Esto aparenta ser un texto, y si es un texto(parrafo)</p>
      </section>
      
      <section>
         <h3>Importancia del codigo semantico</h3>
         <h4>Una de las importancias...</h4>
         <p>
            <em>No todo es visual... otros oyen</em><br> 
            una persona que no puede ver hace uso de screen readers <br> 
            para poder interacctuar con una pagina, estos screen readers <br>
            le va diciendo que es lo que contiene la pagina, como esto es un <br> 
            titulo o subtitulo, esta en la seccion tal o estas en el footer, etc <br>
            no seria agradable escuchar esto es un div y esto otro tambien <br>
            es un div, y esto de aca es un div... 
         </p>
      </section>

      <footer>
         <p>footer</p>
         <p>contactanos</p>
      </footer>



   </body>
</html>```

CODIGO SEMANTICO

- Darle una estructura a nuestra página (IMAGEN 5), ya que hay etiquetas especiales para cada sección que van dentro del BODY, como <nav>, <article>, etc.
- Un ejemplo es <i> e <em> visualmente hacen lo mismo, pero <em> hace que se le de énfasis a esa palabra dentro del párrafo, mientras que <i> solo cambia el tipo de texto
- También es importante para darle mantenimiento al código, que otra persona no llegue y no sepa que demonios hiciste

Voy inspeccionando los documentos html de las páginas web que visito para ir aprendiendo un poco más de los demás… Y tengo una pregunta que solo busca satisfacer mi curiosidad…¿Por qué en el <div id= “video-content”> del código html de esta página hay un comentario en el que hay dibujado un pato que dice “MEOW”?

codigo semantico

  • buenas práctias
  • ayuda a los discapacitados visuales (accesibilidad)
  • SEO

como se usa el <div> y como saber cuando usarlo?? y para que usarlos?

Qué bueno que se hace énfasis desde el principio en programar de forma correcta pensando en otros desarrolladores o en las personas con discapacidad visual. Son prácticas que es mejor aprenderlas desde el inicio y que se hagan un hábito.

Me gusto mucho el énfasis de codiar una buena estructura, para que cualquier persona pueda disfrutar de la experiencia de nuestra web app

Buenas practicas, recordemos que normalmente trabajamos en equipo y nuestro código debe ser legible por otro compañero programador

También el código semántico ayuda un poco en el SEO (search engine optimization), para poder mejorar el posicionamiento de la página en el buscador.

Donde quedo la etiqueta main que importancia tiene ?

Muy buen video. Todo muy quedo claro. 😃

Que hace VS code mejor que sublime text?
veo que se usa mucho últimamente.

me encanta esta profesora

Se que voy poco, pero hasta ahora me encanta la escuela de javascript, de lo mejor que ha creado platzi

De hecho esa lista ordenada debería estar dentro de un <nav>, porque sería un menú de navegación. 🙂

Código semántico = Buenas prácticas

Estan muy bacanos los ejemplos y semcillos de entender

muy buena explicacion

No me quedo del todo claro la diferencia entre <em> y <i>

Hay que recalcar que la semántica también es muy importante para que los Buscadores “lean” e “interpreten” correctamente el contenido de nuestra web y también puedan mostrarlo en sus resultados de forma acorde.

siempre tener presente que vamos a pasar mas tiempo leyendo texto que escribiéndolo, así que las buenas practicas nos van a hacer que la elaboración de nuestros proyectos sea mucho mas amigable.

En pocas palabras, si no usamos html, google le va a dar una mala puntuacion a nuestra pagina, y no la recomendara, y nos morimos de hambre.
Ya saben chavos, a usar html semantico.

Tag em for <em> How beauty you are teacher 😉 </em>

Cierto no hay que olvidar que los divs son comodines pero pues es mejor seguir las buenas practicas 😄

Bajo que circunstancias uno debería utilizar el div?

ES IMPORTANTE USAR CÓDIGO SEMÁNTICO: Esto trae muchas ventajas, entre las más destacadas, es la posibilidad de que otras personas que lean nuestro código puedan entender más fácilmente que quisimos hacer. También, poder mejorar la accesibilidad de nuestro sitio, ya que al usar un código semántico,estamos mejorando el SEO de nuestro sitio.

Por ejemplo:
• Las etiquetas <em> y <i> imprimen lo mismo en el navegador, sin embargo, es la etiqueta <em> la que da el sentido de énfasis en el texto dentro de esa etiqueta, lo que denota una mayor importancia y es percibido por los motores de búsqueda.
• Las etiquetas <strong> y <b> también es otro caso como el anterior, pero es <strong>, quien denota mayor importancia en el texto.

No sabia acerca de Screen Reader por lo que me pareció interesante y fui a buscar información,
para los que les gustaría saber mas aquí les dejo el link de una persona con incapacidad mostrándonos cuando un sitio web fue desarrollado semánticamente vs uno que no 😱

Screen Reader

La verdad que me hizo reflexionar para ser un desarrollador con mejores practicas

¿Qué significa escribir HTML semántico?
.
Usar HTML semántico significa utilizar etiquetas de el lenguaje de tal forma que de ellas se pueda extraer información acerca de su contenido y la función que éste tiene dentro de una página web. Por supuesto, esto facilita el trabajo de los desarrolladores, los motores de búsqueda y también las herramientas de accesibilidad.

Al igual que usamos header o footer, deberíamos usar la etiqueta main

<main>
</main>

https://htmlreference.io/element/main/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

Un ejemplo de buena semantica

Se puede hacer asi:
<div>Reproducir vídeo</div>
Pero tiene mas sentido asi:
<button>Reproducir vídeo</button>

Antes yo hacia codigo con puros divs , es lo peor que un novato puede hacer , no hay orden, ni por donde leer, es muy importante el codigo semantico para tener orden, ademas de todo lo demas que dijo la profesora

El significado semántico solo define cómo el motor de búsqueda va a interpretar el elemento, logrando así un mejor posicionado de nuestra web en los buscadores. Por eso es una buena practica usar las etiquetas adecuadas en nuestra web.

😊👍🏽

Excelente explicación

codigo mantenible siempre