Platzi
Platzi

LA EDUCACIÓN ES UN REGALO ¡ACCEDE AL PRECIO ESPECIAL!

Antes: $249
$149
Currency
Antes: $249
Ahorras: $100
COMIENZA AHORA
Termina en: 15D : 6H : 22M : 40S

Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Arquitectura del header en HTML

5/26
Recursos

Aportes 62

Preguntas 7

Ordenar por:

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

Arquitectura de elementos de una página web
Cuando se empieza a maquetar o diseñar una página web, hay que tomar en cuenta un diseño preliminar. Dicho diseño deberá ser analizado para determinar sus compsiciones.
En el desarrollo moderno web, tenemos que considerar el desarrollo responsivo o, inclusive, PWA. Determinando, en la mayoría de los casos, colores, disposiciones, etc.
El profesor utiliza, section y div para agrupar elementos. Sin embargo, considero que no se debe tomar tan a la ligera ese tipo de notaciones ya que son diferentes, más en el uso estricto del texto.
Section, se utiliza para agrupar elementos con algún significado y el Div para aquellos sin uno o como comodín.

Este profesor debería dictar el curso de “fundamentos de javascript” y “javascript profesional” también explica muy bien y se le da de forma natural, no se le nota presionado

les comparto url de iconos/imagenes

La mas popular:
https://www.flaticon.es/

muy util:
http://www.iconarchive.com/

De una diseñadora:
https://undraw.co/illustrations

Imagenes de Marcas:
https://svgporn.com/

Recuerden que la semántica al momento de crear nuestro sitio web es súper importante más adelante con fines de SEO.

Abrir nuestro archivo en el navegador de la manera que lo hizo el profe es instalando la extensión Live Server en Visual Studio Code.

Les recomiendo esta herramienta (análisis del diseño).
https://zeplin.io/
Ya no es necesaria para los que, usan programas como: “Adobe XD”, “Scketch”…etc.

Por si alguien está interesado en ver más íconos. https://www.iconfinder.com/abstract-icons

Es todo tan básico, pero degranda lo hace ver tan interesante. Gran maestro 👨🏻‍🏫

Etiquetas semánticas HTML
Semántica se refiere a todo aquello que tiene que ver con el significado de una palabra u expresión. En HTML, existen etiquetas con significado semántico, etiquetas que por si mismas brindan un poco de información sobre que tipo de contenido hay dentro de ellas.
|
El correcto etiquetado del contenido, con los tags que brindan una descripción de lo que hay entre la etiqueta de apertura y la etiqueta de cierre, permite dar información rápida sobre el contenido de cada etiqueta semántica, mediante el nombre de la propia etiqueta.
|
¿Porqué es importante el buen uso de las etiquetas semánticas dentro de HTML?
🔶Permite una mejor legibilidad del contenido de un documento HTML, tanto para el desarrollador, como para un indexador de contenido.
🔶Al mejorar la legibilidad para los motores de búsqueda mejorará su posicionamiento.
🔶Permite el desarrollo de contenido escalable.
🔶Contenido ordenado y estructurado.
|
¿Cómo hacer uso correcto de la semántica HTML?
Selecciona la etiqueta que describa el significado del contenido que deseas marcar, gracias a que existe una gran variedad de etiquetas para poder usar, esto no será muy complicado.
|
🔴Etiquetas no semánticas <div> y <span> No describen nada sobre su contenido.

🟢Etiquetas semánticas <table> y <p> Describen claramente su contenido.
|
Algunas etiquetas semánticas: **
🔹
p:** Define un parrafo.
🔹form: Define un formulario.
🔹table: Define una tabla.
🔹style: Define estilos para el documento.
🔹header: Define la típica sección de encabezado que normalmente contiene el logo y el menu de navegación .
🔹nav: Elemento que contiene los lincks de navegación.
🔹section: Define una sección en concreto del documento.
🔹footer: Define el píe de página de un documento o seccón.
🔹main: Define el contenido principal de un documento.
🔹aside: Define contenido relacionado con el contenido principal, pero que no forma parte de manera relevante para él.

Súper buena la clase, a medida que voy practicando, voy asimilando la forma en la que se debe pensar un maquetado para llevarlo a código 😄
PD: Me voló la cabeza el atajo de escribir <etiqueta> * n para escribirla n veces 🤯

En los assets que subieron en Dropbox para este proyecto, el diseño del home es distinto… La segunda sección del header aparece con un fondo transparente

Es bueno recordar un poco de semantica, suelo usar divs para todo en vez de las verdaderas etiquetas que corresponden a cada parte de mi html

Genial que lo pasaran a React o Vue, tipo escuela js

.

Como buena práctica, cada vez que utilizamos un <section> debería tener un encabezado <h*> por lo que en el ejemplo que utiliza el profesor deberá utilizar un
en vez de <section>

¿Existe algún curso donde expliquen exactamente los niveles de las etiquetas? Para tener una idea o metodología al usarlas, de modo que se tenga un html semántico de la mejor calidad.

Me acabo de dar cuenta de que se pueden crear n etiquetas iguales con solo poner la etiqueta seguido de un * y el número de etiquetas que queremos. Ejemplo:

  • section*2

Esto les ayudara a trabajar mas rapidpo para la creacion de etiquetas https://docs.emmet.io/cheat-sheet/

La verdad, no es por ser malo pero no me agrada del todo como Diego coloca muchos section y div en una sola parte, seguire el curso pero le cambiare algunas cosas en el transcurso en lo personal 😃. asi me quedo la maquetacion del header, vease que cambie el segundo nav a el main ya que en dropbox se ve que esta en el main con un justify-content: space-between;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blog</title>
    <link rel="stylesheet" href="./css/main.css">
  </head>
  <body>
    <header>
      <nav class="navtop">
        <a href="">Facebook</a>
        <a href="">Twitter</a>
        <a href="">Instagram</a>
        <a href="">Linkedin</a>
        <a href="">Youtube</a>
      </nav>
    </header>
    <main>
        <nav class="navbottom">
            <a href="">logo</a>
            <a href="./profile.html">Sobre mí</a>
        </nav>
    </main>
  </body>
</html>

Tenemos la estructura del header ❤️

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>index</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width= device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./css/main.css">
    </head>
    <body>
        <header>
            <section>
                <div>
                    <a href="">Facebook</a>
                    <a href="https://bit.ly/34cRaHz">Twitter</a>
                    <a href="">Instagram</a>
                    <a href="https://bit.ly/31mapg9">Linkedin</a>
                    <a href="">Youtube</a>
                </div>
            </section>
            <nav>
                <section>
                    <a href="./index.html">Logo</a>
                </section>
                <section>
                    <a href="./perfil.html">Sobre mí</a>
                </section>
            </nav>
        </header>
    </body>
</html>

Live Server x2

Excelente manera de explicar, se le da naturalmente 😃

First step ✅

Si se sienten muy nuevos en esto del diseño inicial con relacion a las imagenes y los iconos , entonces deberias comenzar buscando UI kits , que son como paquetes que traen todo tipo de iconos , imagenes y fuentes para poder diseñar tu pagina

CCS

No es un lenguaje de programación, es un lenguaje que me permite dar estilos a lo que maquetamos en HTML.

Usamos selectores de etiquetas solo por la palabra, selectores de clase mediante .nombredeClase, y por ID mediante #nombreId

DevTools

Es una serie de herramientas que facilitan el proceso de desarrollo. Podemos ver en tiempo real que estamos haciendo con CSS,JS, podemos ver peticiones, imágenes y demás. Incluso podemos hacer debuggin para hallar problemas al momento de renderizarse.

Semántica

se refiere a todo aquello que tiene que ver con el significado de una palabra u expresión. En HTML, existen etiquetas con significado semántico, etiquetas que por si mismas brindan un poco de información sobre que tipo de contenido hay dentro de ellas. El correcto etiquetado del contenido, con los tags que brindan una descripción de lo que hay entre la etiqueta de apertura y la etiqueta de cierre, permite dar información rápida sobre el contenido de cada etiqueta semántica, mediante el nombre de la propia etiqueta.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Blog</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <header>
    <section>
      <a href="">Facebook</a>
      <a href="">Twitter</a>
      <a href="">Instagram</a>
      <a href="">LinkedIn</a>
      <a href="">YouTube</a>
    </section>
    <nav>
      <section>
        <a href="/">Logo</a>
      </section>
      <section>
        <a href="perfil.html">About me</a>
      </section>
    </nav>
  </header>
  
</body>
</html>```

Excelente repasando

Continuamos.

Excelente clase!!

Live Server x4

Live Server X5

Todo bien de momento! 👍

+2

Estupendo sigamos 😄

Explica de una manera muy comprensiva profe. La forma correcta para organizar mi archivo html

utiliza el atributo alt en html para el logo y sobre mi!!

Excelente el la forma de hacer el html semántico, muy buena forma de hacer la maquetacion

Excelente clase!!

Interesante y práctico.

Muchas gracias por la explicación de la estructura inicial del header instructor Diego.

Diego explica muy bien!

una excelente clase la preparación de la estructura del contenido

siento que estaba esperando estos conceptos hace mucho, se ordenan mucho mejor las cosas, en mi opinión, este curso debería ser de los primeros, me encanta!

Sigamos 😄

Muy buena la herramienta del LiveServer

Vamos empezando a maquetar!

Continuemos 😄 muy bueno

Genial!, que práctico. Continuemos.

La clase es enriquecedora, sin embargo, veo malas prácticas a la hora de maquetar. Un ejemplo claro es; Al hacer el header, degranda, abusa de la etiqueta <section> (mala práctica), el nav, por sí solo, ya tiene una connotación específica (hacer un menú de navegación), y no debe llevar sections por dentro. nav, semánticamente hablando, está dirigido a contener etiquetas ul y li. Hacer uso de section para definir espacios, más que aportar, en realidad solo hace más lento el proceso y menos efectivo.

No es una queja, es una observación respecto a la case 😃

Lo que realmente me impresiona es que la lectura del código usado por Diego es sumamente entendible y la impresión es porque hace meses atrás me costaba entender dichas lecturas. Hoy puedo decir con seguridad que domino la estructura de hrml y eso me llena de alegría, se que aun tengo que aprender pero voy por buen camino. Ojo! Mi esctructura y código seria diferente a la del profesor. 🤓👨🏻‍💻📈 cada quien programa a su formal.

<!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="../assets/css/main.css">
    <title>Mi Blog</title>
</head>
<body>
    <header>
        <section>
            <div>
                <a href="/">Facebook</a>
                <a href="/">Twitter</a>
                <a href="/">Instagram</a>
                <a href="/">linkedin</a>
                <a href="/">Youtube</a>
            </div>
        </section>
        <nav>
            <section>
                <a href="/">Logo</a>
            </section>
            <section>
                <a href="./perfil.html">Sobre mi</a>
            </section>
        </nav>
    </header>
</body>
</html>```

solo como comentario , me gustaría que se unieran a hacer un cambio y empezar a darle mas valor a nuestro lenguaje que hablamos… entiendo que la mayoría de lenguajes están en ingles…y que se utilize mucho las palabras en ingles, pero me da mucha tristeza escuchar a los maestros decir palabras que no existen como por ejemplo linkear , que por lo que veo se refería a enlazar y así hay muchas otras , debes de empezar a tirar odio asía los demás y simplemente ver esto como un comentario que si bien se unen podemos aser el cambio…

Con que extensión el profesor puede poner 5 enlaces con un solo comando?
a*5
en el minuto 4:31

Si quieren usar iconos les recomiendo usar Fontawesome y les dejo un tutorial de como agregar iconos de Fontawesome

Aquí mi header

<header class="header">
            <section class="header_social">
                <div class="header_social-container">
                    <a class="icon" href="/">Facebook</a>
                    <a class="icon" href="/">Instagram</a>
                    <a class="icon" href="/">Twitter</a>
                    <a class="icon" href="/">Linkedin</a>
                    <a class="icon" href="/">Youtube</a>
                </div>
            </section>
            <nav class="header_nav">
                <section>
                    <a href="/" >Here shoul be a logo</a>
                </section>
                <section>
                    <a href="./pages/perfil.html" >About Me</a>
                </section>
            </nav>
        </header>```

4. Arquitectura del header en HTML:

El usar emmet los va a ayudar mucho a comenzar a hacer la estructura de su web en HTML más rápido:

Por ejemplo, si quiero hacer un header con clase header, que dentro tenga un section con clase section y un nav con clase nav, el siguiente código emmet (el emmet viene por defecto en visual studio code), solo escribiéndolo y presionando enter lo generará:

header.header>section.section+nav.nav

Para mayor referencia en el uso de emmet, lean esta guía rápida (está en inglés):

[Emmet Cheat Sheet](https://docs.emmet.io/cheatsheet-a5.pdf](https://docs.emmet.io/cheatsheet-a5.pdf)

Este es el código que tenemos por el momento (no puedo vivir sin poner clases, por eso ya las puse, pero son libres de usarlas o no):

<!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">
    <link rel="stylesheet" href="./css/main.css">
    <title>Mi blog by Aldo Ortiz</title>
</head>
<body>
    <header class="header">
        <section class="header-section">
            <div class="header-social-icons-container">
                <a href="">Facebook</a>
                <a href="">Twitter</a>
                <a href="">Instagram</a>
                <a href="">Linkedin</a>
                <a href="">Youtube</a>
            </div>
        </section>
        <nav class="header-nav">
            <section class="header-section">
                <a href="">Logo</a>
            </section>
            <section class="header-section">
                <a href="/perfil.html">Sobre mí</a>
            </section>
        </nav>
    </header>
</body>
</html>

Codigo de la clase:



    <link rel="stylesheet" href="/css/main.css">
    +
     </head>
     <body>
    -
    +   <header>
    +       <section>
    +           <div>
    +               <a href="">Facebook</a>
    +               <a href=""> Instagram</a>
    +               <a href=""> Linkedin</a>
    +               <a href="">Github</a>
    +           </div>
    +       </section>
    +       <nav>
    +           <section>
    +             <a href="">LOGO</a>
    +           </section>
    +           <section>
    +            <a href="perfil.html">Sobre mi</a>
    +           </section>
    +       </nav>
    +   </header>
    

Shortcuts de teclado a la hora de codear que facilitan el trabajo:
Comentarios de linea ctrl + /
Comentarios de bloque ctrl + shift + /
tab poner indentacion (hacia la derecha)
shift + tab recorrer indentacion (hacia la izquierda)
alt + fecha hacia arriba/abajo mueves la linea o bloque de lugar
shift + alt + fecha hacia arriba/abajo copias la linea o bloque de lugar
Considero mas utiles, ademas de guardar y deshacer
NOTA: (debes de configurarlo en tu editor) saludos 😃

Genial estar en este punto y haber hecho git init para llevar orden con todo,like si lo hiciste tu tambien sino ya sabes el Curso de Git y Github