Arquitectura del header en HTML

5/26
Recursos
Transcripci贸n

Aportes 68

Preguntas 9

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 鈥渇undamentos de javascript鈥 y 鈥渏avascript 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.

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.

Es todo tan b谩sico, pero degranda lo hace ver tan interesante. Gran maestro 馃懆馃徎鈥嶐煆

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

Les recomiendo esta herramienta (an谩lisis del dise帽o).
https://zeplin.io/
Ya no es necesaria para los que, usan programas como: 鈥淎dobe XD鈥, 鈥淪cketch鈥濃tc.

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

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/

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>

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

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>

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>

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.

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鈥 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鈥

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

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

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.

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

First step 鉁


HTML

    <header>
        <section class="navbar-container">
            <ul class="navbar">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </section>

        <section class="about-container">

             <div class="img-container">
                 <img src="assets/img/logo.png" alt="" class="img">
             </div>

             <div class="aboutMe-container">
                 <a href="#" class="aboutMe">Sobre m铆</a>
             </div>
        </section>
    </header> 

CSS

  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
         }

         header {

            display: grid;
            grid-template-rows: repeat(2,minmax(75px, 1fr))
         }
        
        .navbar-container {

            display: flex;
            justify-content: flex-end;
            background-color: #41c7a4;
        }

        .navbar {

            display: flex;
            justify-content: space-around;
            list-style: none;
            width: 32%;
            margin: auto 0;
            column-gap: 4px;

        }

        .about-container {

            display: grid;
            grid-template-columns: minmax(200px, 3fr) 2fr;
            /* margin-top: auto 0; */
        }

        .aboutMe-container {

            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            margin: auto 0;
        }

        .aboutMe {

            grid-column: 3/4;
            color: #5a585c;
        }

        .img-container{

            margin: auto 0;
        }

        .img {

            object-fit: contain;
            width: 30%;
        }

驴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.

Live Server x2

Excelente manera de explicar, se le da naturalmente 馃槂

muy importante <link rel=鈥渟tylesheet鈥 href=鈥渃ss/main.css鈥>

<header>
<section>
<a href="/">facebook</a>
<a href="/">Twitter</a>
<a href="/">Instagram</a>
<a href="/">Linkedin</a>
<a href="/">Youtube</a>
</section>
/5 ETIQUETAS EN LA BARRA DE NAVEGACION QUE SERIA LOS BOTONES
/TENEMOS LISTO EL HEADER DE NUESTRA PAGINA

Yo recomiendo ir haciendo las clases tipo BEM para ir practicando con todo, realmente trabajo ya en todos los cursos con BEM y Sass para hacer los estilos y me resulta facil

este curso es aburrido

<!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>My Blog</title>
</head>
<body>
    <!-- BARRA DE NAVEGACION -->
    <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 m铆</a>
            </section>
        </nav>
    </header>
    
</body>
</html>
En esta clase aprend铆 como escribir la misma etiqueta la veces que necesite de forma abreviada.( a*5) .
<!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.

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

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

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