‫Instructor: Empecemos
‫ahora a crear realmente nuestra plantilla base.
‫Entonces, la plantilla en la que se basarán todas
‫las demás plantillas más adelante.
‫Básicamente, estaremos convirtiendo un archivo html normal, que
‫está en los archivos de inicio, a una plantilla Pug.
‫Básicamente, comenzaremos a crear
‫el diseño de esta página.
‫Así que este encabezado aquí y también el pie de página.
‫De acuerdo, no el contenido, por supuesto,
‫porque luego lo construiremos de manera más dinámica un poco
‫más tarde, de acuerdo.
‫Pero dejaremos todo listo,
‫para que luego podamos inyectar todo este contenido real
‫en esa plantilla base general.
‫Entonces, hagámoslo ahora.
‫Y comencemos por deshacernos de
‫todo este contenido que teníamos aquí.
‫Así que esto fue
‫solo para mostrarte las diferentes características de Pug.
‫Y ahora, abramos esta descripción general. html, de modo
‫que básicamente podamos convertirlo aquí a Pug.
‫Bien, ese fue el archivo html original que
‫creé para diseñar la página de descripción general que
‫acabamos de ver renderizada dinámicamente.
‫Bien, esto es lo que tenemos en la cabeza
‫y, de hecho, sigamos adelante y copiemos todo este código, para que
‫luego podamos convertir lo que falta aquí.
‫Bien, entonces el contenido de nuestro título es
‫este, entonces copiémoslo, luego eliminémoslo,
‫y este es el contenido de la página principal, ¿verdad?
‫Entonces ya tenemos el favicon, y también el estilo.
‫Entonces, lo que nos falta es básicamente estas
‫cosas aquí, para la respuesta
‫del desarrollo web, y también este enlace de fuente de Google, está bien.
‫Entonces, comenzando
‫con eso, inculque una
‫hoja de estilo, y luego tomemos esta
‫referencia y reemplácela con comillas simples.
‫Bien, entonces también quiero definir estos dos, así
‫que cortémoslos aquí,
‫y simplemente convierta lo que tengamos aquí.
‫Está bien.
‫Ah, y también las comillas simples.
‫Bien, pongamos este al final,
‫y ese es nuestro sombrero para nuestra plantilla.
‫A continuación, echemos un vistazo al encabezado.
‫Bien, básicamente tenemos todo este elemento aquí, con solo
‫un encabezado, de modo que la barra gris oscura que vio en
‫la parte superior de la página.
‫Entonces copiemos
‫esto y pongámoslo aquí.
‫Entonces, eso es mucho
‫código y verá cuán poco código será en realidad más adelante,
‫una vez que lo traduzcamos a Pug.
‫De acuerdo, y aquí vamos a poner
‫un comentario visible en nuestro html, que diga HEADER.
‫Está bien, y en realidad, eso es sin el guión.
‫Entonces, en el código VS, cuando presiono el atajo
‫de comentarios, automáticamente crea un comentario de Pug.
‫Pero aquí, realmente solo quiero un comentario,
‫que también está disponible en la salida html.
‫De todos modos, creemos ahora el elemento de encabezado
‫y veamos qué tenemos aquí.
‫Entonces tenemos encabezado con la clase de encabezado.
‫Y todo lo que tenemos que hacer para especificar
‫una clase es DOT y luego el nombre de la clase.
‫Entonces, encabezado de nuevo.
‫Luego, ahí, tenemos un elemento nav.
‫Y así, sangría y luego navegación. nav, que es el nombre de la
‫clase aquí de nuevo, y
‫luego también tenemos otro nombre de clase,
‫y así, otro punto.
‫Y eso es.
‫Entonces recorridos de navegación.
‫Entonces, si está familiarizado un poco con la arquitectura CSS, tal
‫vez esté viendo que estoy usando la arquitectura BEM.
‫Entonces, nav es el bloque
‫y luego aquí este tour es un modificador.
‫Y aquí, estos subrayados subrayados significan que se
‫trata de un bloque o
‫en realidad un elemento.
‫Entonces bloque, elemento y modificador.
‫Bien, eso no es
‫realmente importante, pero solo quería mencionarlo.
‫De todos modos, dentro de la navegación,
‫tenemos un elemento de enlace.
‫Entonces, a, con la clase de nav__el.
‫Entonces aquí, tenemos este atributo href, por lo
‫que recuerde que usamos paréntesis, y luego
‫href,
‫y lo establecemos en nada.
‫Básicamente, eso es lo que significa este hash aquí.
‫Y luego, simplemente el contenido,
‫todos los recorridos.
‫A continuación, tenemos este formulario aquí, pero
‫en realidad no lo vamos a
‫implementar en este momento.
‫Así que deshagámonos de eso.
‫Muy bien, esta es nuestra navegación.
‫Entonces, este código
‫aquí es básicamente equivalente a esto.
‫Y a continuación, tenemos este logotipo de encabezado.
‫Entonces, nueva línea, pero un nivel atrás, en
‫la sangría para que esté en el mismo
‫nivel que la navegación.
‫Entonces, tal como está aquí, correcto.
‫Ahora, cuando es
‫un div, ni siquiera tenemos que decir div. headerlogo, en este caso.
‫Entonces, cuando es
‫un div, que es una especie de elemento de bloque estándar en
‫html, todo lo que necesitamos es el
‫punto y luego eso creará automáticamente un elemento div.
‫Luego, tenemos esta imagen, y eso,
‫por supuesto, necesita un par de atributos, que es
‫el primero, la fuente.
‫Entonces imagen, logo, blanco. png, y luego también
‫el texto alternativo, de acuerdo.
‫A continuación, tenemos esta otra navegación aquí, y nuevamente, está
‫en el mismo nivel que
‫la primera navegación y este div.
‫Así que retroceda un nivel en
‫la sangría y cree un nuevo elemento de navegación con la
‫clase nav y el usuario de clase nav.
‫Luego, hay un enlace,
‫muy similar
‫a este, así que copiémoslo para ahorrarnos algo de tiempo.
‫Y luego aquí dice, Mis reservas.
‫Luego otro, y de hecho vamos a copiarlo de nuevo
‫con la diferencia de que no
‫tiene este contenido, sino que tiene más contenido dentro.
‫Así que esto.
‫Entonces, muy fácil de nuevo, imagen,
‫con la fuente,. jpg.
‫Y también tiene un nombre
‫de clase, así que editemos aquí con el punto.
‫Entonces, nav, imagen de usuario.
‫Y luego simplemente un lapso diciendo Jonas.
‫Y, como
‫puede ver, esta será la parte dinámica
‫de este encabezado.
‫Y entonces, en realidad, todo esto aquí se convertirá
‫en un punto al principio.
‫Bien, pero de todos modos, terminemos de codificar esta parte aquí.
‫Básicamente, estos dos botones, el
‫botón de inicio de sesión y el botón de registro.
‫Entonces, por supuesto, no tendrá el botón
‫de inicio de sesión y de registro al mismo
‫tiempo que tiene esta navegación de usuario aquí.
‫Entonces mis reservas y luego el nombre del usuario, está bien.
‫Pero nuevamente, pongamos eso aquí por ahora, y
‫luego comentemos lo que no necesitamos.
‫Entonces, botón, elemento de navegación y también elemento de
‫navegación y luego el modificador cta para registrarse.
‫Y en realidad también hay uno antes de eso para iniciar sesión, ¿verdad?
‫Entonces, ese es este.
‫Está bien y eso es todo.
‫Así que ese
‫es el encabezado, y ves que
‫este código aquí es equivalente a todo lo que tenemos
‫aquí, que parece mucho más confuso, si
‫me preguntas al menos.
‫Entonces, elimine eso, y como dije, esta
‫navegación de usuario aquí, esta
‫parte solo estará disponible cuando alguien
‫haya iniciado sesión.
‫Y por ahora, comentemos completamente todo esto.
‫Muy bien, a continuación tenemos el contenido y agreguemos otro comentario aquí y
‫en nuestro html,
‫en realidad todo lo que
‫vamos a agregar ahora es
‫esta sección aquí con la clase de descripción general.
‫Porque ahí es donde tenemos
‫todas estas tarjetas de
‫contenido, que nuevamente, por ahora, no incluiremos allí.
‫Entonces, nuevamente, lo que estamos
‫haciendo ahora es realmente solo un esqueleto, por así decirlo.
‫Muy bien, sección. visión de conjunto.
‫Visión general.
‫Y por ahora, simplemente pongamos un h1 aquí
‫con el nombre de la gira que viene como variable.
‫Está bien y, por supuesto, esta
‫sección aquí debe estar al mismo nivel que este encabezado, genial.
‫Así que todo lo que nos falta ahora es el pie
‫de página al final de la página.
‫Así que vayamos allí y aquí vamos.
‫Tomemos todo esto.
‫Y esto debería ser un elemento de pie de página,
‫no solo un div regular.
‫Entonces, un elemento de pie de página con la clase de pie de página, luego
‫un div, con la clase de logotipo de pie
‫de página, y de nuevo, ni siquiera necesito especificar el elemento div.
‫Entonces tenemos una imagen aquí. png, por lo
‫que espero que escribir todo esto usted mismo, básicamente a mano, le ayude a
‫mantener este conocimiento sobre cómo funciona todo esto un poco mejor.
‫Bien, entonces esto es alt y ahora esta navegación de
‫pie de página, entonces una lista desordenada,
‫y ahora ahí, tenemos un par de elementos de
‫elementos de lista.
‫Entonces, enumere el elemento, y luego hay un enlace en
‫cada uno de ellos.
‫Entonces, básicamente, con el href de ninguna parte.
‫Y luego, Acerca de nosotros.
‫Ahora, aquí en esta situación, necesitar
‫esta línea adicional
‫solo para especificar este li, no es realmente ideal.
‫Entonces, lo que podemos
‫hacer aquí es usar dos
‫puntos, como este, y luego básicamente ponerlo todo en la misma línea.
‫Y entonces esto seguirá funcionando como si hubiera una
‫nueva línea con una sangría,
‫pero básicamente permitiéndonos hacerlo todo en la misma línea.
‫De acuerdo, entonces, por alguna razón, el resaltado
‫de sintaxis deja de
‫funcionar, pero bueno, eso no es tan importante.
‫Así que descarga las aplicaciones, conviértete
‫en guía, carreras.
‫Y eso es todo.
‫A continuación, tenemos este pie de
‫página, derechos de autor, y aquí solo tenemos un montón de texto.
‫Entonces especifica el símbolo
‫de copyright aquí, y es de Jonas Schmedtmann.
‫Entonces, ese soy yo y, al igual que en todos
‫mis otros cursos, quiero que sepas que básicamente puedes
‫usar este proyecto para ti.
‫Básicamente, para ponerlo en tu portafolio o para
‫mostrarle a quien quieras, que construiste este
‫proyecto en mi curso.
‫Ahora lo que no puede hacer es crear su propio curso
‫basado en este proyecto.
‫Y es triste que incluso tenga que decir esto,
‫pero claro que ha habido personas que
‫usaron mi proyecto, básicamente para poner algunos cursos
‫gratuitos en YouTube, donde copiaron mis proyectos, uno por uno.
‫Bien, déjame escribir eso aquí.
‫Para sus propios fines, excepto para
‫producir, por supuesto, sus propios cursos o tutoriales.
‫Está bien y eso es todo.
‫Muy bien, esa
‫es la traducción del esqueleto básicamente que
‫tenemos aquí, por supuesto, excepto el contenido.
‫Bien, ya no lo necesitamos.
‫Y, solo para terminar, echemos un vistazo rápido
‫y, de hecho, aquí va nuestro contenido.
‫Ahora bien, esto de aquí parece un poco fuera de lugar porque este
‫texto de derechos de autor aquí es muy largo.
‫Entonces, esta navegación de pie de página básicamente.
‫Pero dado que es un contenedor flexible,
‫deberíamos poder solucionarlo con
‫contenido justificado, flex-end, no este.
‫De acuerdo, y no se preocupe si no está
‫familiarizado con CSS, o incluso con Flexbox, esto es
‫solo para solucionar
‫visualmente el pequeño problema que tuvimos aquí.
‫Así que busquemos el pie de página aquí.
‫Aquí estamos.
‫Arregle eso aquí, y
‫si ahora
‫recargamos, sí, entonces estamos bien, perfectos.