No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Maquetaci贸n del header

8/32
Recursos

驴Qu茅 estructura tendremos que crear en nuestro header? Vamos a analizar el dise帽o en Figma para determinar las etiquetas que necesitamos en el archivo HTML del proyecto en curso.

C贸mo hacer la maquetaci贸n en Figma

Lo primero es crear una etiqueta img dentro del header para el logo.
Luego un contenedor div que contenga:

  • h1 para el t铆tulo principal
  • p para el p谩rrafo
  • Una etiqueta a para el call to action, que contenga tambi茅n una etiqueta span para el peque帽o 铆cono a su lado.

Tendr铆amos un c贸digo as铆:

    <header>
        <img src="" alt="">
        <div>
            <h1>La pr贸xima revoluci贸n en el intercambio de criptomonedas</h1>
            <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
            <a href="">Conoce nuestros planes <span></span></a>
        </div>
    </header>

El siguiente paso es aplicar clases para llamarlas desde CSS y empezar a aplicar estilos.

Contribuci贸n creada por: Jos茅 Miguel Veintimilla (Platzi Contributor).

Aportes 54

Preguntas 26

Ordenar por:

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

o inicia sesi贸n.

para agilizar el trabajo al momento de poner los textos de figma, con darle click al texto al lado derecho tenemos la opci贸n de copy en content.

solo un H1 por pagina, eso no sabia, buen dato.

Para los que estamos trabajando con Git y GitHub, y aun tienen dudas acerca de la mala practica de subir archivos binarios al repo, les dejo este enlace que me ayudo a entender cuando NUNCA subirlos, y cuando no hay problema en subirlos.

En este caso concluyo que no hay problema, ya que nuestros SVG pesan NADA y ademas no es un proyecto que vamos a estar cambiando mucho en el futuro. Lo que podemos hacer es crear un archivo .gitignore ignorando todos los tipos de imagenes, asi git los ignora y no los commiteamos, pero si podemos subirlos al repo remoto directamente desde GitHub.

  • Si estoy equivocado en algo por favor hacermelo saber. 馃槃

Para ahorrar tiempo, les dejo un ejemplo de lo que hace Emmet en VSCode y el link para m谩s trucos

<header>
        img>div>h1+p+a>span
</header>

Aqui tienen todo y la imagen en un URL para los que estemos usando GitHub! 鉂わ笍

    <header>
        <img src="https://i.postimg.cc/5yRRYxRd/logotipo-vertical.png" alt="">
        <div>
            <h1>La pr贸xima revoluci贸n en el intercambio de criptomonedas.</h1>
            <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
        </div>
        <a href="">Conoce Nuestros Planes <span>i</span></a>
    </header>```

Para una mejor semantica, la etiqueta 鈥渋mg鈥, debe ir dentro de una etiqueta 鈥渇igure鈥 asi.

<figure>
  <img src=" " alt=" "/>
</figure>

Composici贸n de header:

  1. Logotipo
  2. Encabezado
  3. P谩rrafo
  4. Bot贸n flotante

C贸digo de header:

        <img src="" alt="" />
        <div>
            <h1></h1>
            <p></p>
            <a href=""><span></span></a>
        </div>

En el inspector de elementos de figma, se puede copiar el texto.

Para que solo copien y peguen el texto del (h1, p y a) del header 馃槂.

  • Titulo principal: La pr贸xima revoluci贸n en el intercambio de criptomonedas.
  • Parrafo: Batatabit te ayuda a navegar entre los diferentes precios y tendencias.
  • Bot贸n: Conoce nuestros planes
  • Las etiquetas ancla <a href=''></a>, nos permiten utilizar su atributo href para navegar entre las diferentes secciones.
  • Las etiquetas <span></span>, es una etiqueta comodin que podemos utilizarla para incluir iconos.
  • Las p谩ginas web solo deben tener un <h1> por temas de SEO.

Por buenas pr谩cticas cualquier p谩gina, pantalla solo puede tener un h1 por temas de SEO.
El 铆cono lo meteremos dentro de la etiqueta span, es una etiqueta comod铆n que nos ayuda justo para ese tipo de textos o iconos que incluso van adentro de una etiqueta.

 <a href="">Conoce Nuestros Planes <span></span></a>```

Mauqetacion del Header

 <header>
        <img src="" alt="">
        <div>
            <h1>La pr贸xima revoluci贸n en el intercambio de criptomonedas.</h1>
            <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
            <a href="">Conoce Nuestros Planes <span>i</span></a>
        </div>
        
    </header>
Aqu铆 es donde vemos m谩s el uso del div, si no llevas toda la.vida usandolo, para m铆 que nunca lo hab铆a usado se.usa m谩s como etiqueta contenedora que por defecto tiene display block

Como buena practica se recomienda comentar el c贸digo, esto facilita la comunicaci贸n con el equipo ya que tus compa帽eros no perder谩n el tiempo pregunt谩ndote para la funciona del c贸digo.

A la hora de Maquetar una de las manera que tenemos, es separar el contenido en etiquetas contenedoras.

La imagen va junto al texto? 驴Tienen relaci贸n? se puede tomar esto como una de las tantas maneras para poder dar forma al c贸digo.

Esto ayudar谩 cuando se apliquen estilos para hacer un display, por ejemplo con flexbox, es necesario aplicarle a un padre el display flex para que sus hijos se vuelvan item flexibles, y poder manipularlos con facilidad.

Estos son mis estilos
Yo envolv铆 mi <img/> en un <figure></figure> creen que sea correcto eso?

C贸digo

<header>
            <figure>
                <img src="./assets/icons/logo.svg" alt="Logotipo"/>
            </figure>
            <div class="container">

                <h1>La pr贸xima revoluci贸n en el intercambio de criptomonedas.</h1>
                <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
                <a href="#">conoce nuestros planes <span>i</span></a>
            </div>
        </header>

Por si a alguien le interesa la creaci贸n del header mediante Emmet 馃榿
header>img+div>h1+p+a

Los textos se pueden copiar y pegar directamente de Figma (Para ahorrar tiempo si gustan!!!).

No sab铆a lo de la etiqueta de <span></span> para iconos, excelente.

驴Cuando debo usar la etiqueta a para convertirla en un bot贸n y cuando usar la etiqueta botton?

no entiendo, por que no usan las entidades html para los acentos鈥

asi quedaria el texto:

<h1>La pr&oacute;xima revoluci&oacute;n en el intercambio de criptomonedas.</h1>

Cuando tenemos iconos en los CTA es recomendable utilizar la etiqueta SPAN / Esta etiqueta nos ayudan con teste tipo de textos o iconos que se encuentran dentro de otra etiqueta.

Por buenas practicas, cualquier pagina solo puede tener un H1. Por cuestiones de SEO.-

Jaja que increible es ver como se empiezan a aplicar las cosas que aprendes

Termin茅 la landing page sin ver el curso xd

馃摙馃摙 AVISO IMPORTANTE 鉂椻潡

El header por los momentos鈥

vamos bien vamos bien hasta ahorita todo bien

Hola. Les comparto este repositorio que sirve de gu铆a para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificaci贸n y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 馃槃.
Platzi-Test

Notion - Maquetaci贸n del header

No es mucho, pero es trabajo honesto, comparto mis apuntes en Notion de esta clase, con parte del avance de mi proyecto.

CODIGO HTML (HEADER)

<header>
    <img src="" alt="">
        <div>
            <h1>La pr贸xima revoluci贸n en el
                intercambio de criptomonedas</h1>
            <p>Batatabit te ayuda a navegar entre
               los diferentes precios y tendencias.</p>
            <a href="">Conoce nuestros planes <span>i</span></a>
        </div>
</header>

Les comparto el c贸digo de la clase:

    <header class="header">
        <img src="" alt="">
        <div>
            <h1>La pr贸xima revoluci贸n en el intercambio de criptomonedas.</h1>
            <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
            <a href="">Conoce nuestros planes <span>i</span></a>
        </div>
    </header>

Recuerden los atajos de EMMET

img+div>h1+p+a>span

En este caso el img es la primera l铆nea, al darle el + le indicamos que lo que sigue va en otra l铆nea de c贸digo, el div contiene los elementos (h1+p+a) al darle el s铆mbolo > y a la misma vez (h1+p+a) vienen en 3 l铆neas de c贸digo diferentes porque tienen el +, el span viene contenido porque el a tiene el s铆mbolo Z 鉁岎煒

Para la flecha que va hacia abajo pueden usar font awesome (la CDN la saque de aqu铆):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

<i class="fas fa-chevron-down"></i>
Dejen de comentar cosas innecesarias en el dise帽o parece Grafiti de barrio jajajaja.
Con el texto pod铆a simplemente copiar y pegar desde Figma. 馃榿

Notas de la clase

  • Slide 1

  • Slide 2

  • Slide 3

  • Slide 4

  • Slide 5

  • Slide 6

  • Slide 7

No sabia el dato de solo un H1 por pagina, gracias por comentarlo.

<!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">
    <!-- FONTS -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet"> 
    <title>Web App | Mobile First</title>
</head>
<body>
    <header>
        <img src="" alt="">
        <div>
            <h1>la proxima revolucion en el intercambio de criptomonedas</h1>
            <p>batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
            <a href="">conoce nuestros planes <span>i</span> </a>
        </div>
    </header>
    <main>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer></footer>
</body>
</html>


maquetando la extructura header

Muy buen curso! El profesor nos muestra las buenas practicas de un proyecto de una empresa real! Un valor agregado! Gracias Platzi y gracias Diego De Granda

Super, Es una manera pr谩ctica de ver y hacer鈥 lomejor

Comparto la estructura del header

   <header>
        <img src="" alt="">
        <div>
            <h1>La proxima revoluci贸n en el intercambio de criptomonedas.</h1>
            <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
            <a href="">Conce nuestros planes <span>i</span></a>
        </div>
    </header>

Creo que ser铆a buena idea incluir en el dise帽o en Figma la parte de prototipado con el enlace del bot贸n a la parte del dise帽o que tiene que mostrar.
https://www.figma.com/community/file/919353340841181691

Si estas utilizando el preprocesador Pug, para colocar el span dentro de la etiqueta a:

a(href="") Conoce nuestros planes #[span i] 

maquetando nuestro header

<header>
        <img src="" alt="">
        <div>
            <h1>La pr贸xima revoluci贸n en el intercambio de criptomonedas.</h1>
            <p>Batatabit te ayuda a navergar entre los diferentes precios y tendencias.</p>
            <a href="">Conoce nuestros planes <span>i</span></a>
        </div>
    </header>

NOTA IMPORTANTE: cada p谩gina debe tener s贸lo un H1 por temas de SEO.

Good class. Header is ok!

Alguien sabe en donde esta el repo del curso?

https://www.youtube.com/watch?v=1AcZ5uQGATs
Aqu铆 un video que explica lo que es SEO (Search Engine Optimization)

馃憣

驴la etiqueta img no deberia estar dentro del contenedor figure por buenas practicas?

Buena pr谩ctica para SEO. Buena recomendaci贸n.