Finalizando ejercicio de Landing Page

Clase 16 de 42 • Curso de Preprocesadores CSS

Clase anteriorSiguiente clase

Resumen

Imagen del reto:

Daniel Esteban Santos Mendez

student•

Interesante pug verdad, pero no me gusta.

Enrique Devars

teacher•

Hola ¿Por qué no te gusta?

Daniel Esteban Santos Mendez

student•

Se me hace complejo de leer, igual creo que si es costumbre mia pero, me agrada el como se el HTML puro.

JORGE CARRILLO LOPEZ

student•

Aunque entiendo la relevancia de poner h1 en el footer, creo y me corrigen si estoy mal por favor, esta sería una mala practica para SEO. Aunque fácilmente en footer podría llevar un h4 por ejemplo y fin de la mala práctica.

Wilson Sánchez

teacher•

Sip, tienes toda la razón. En este caso lo realizamos de esta forma para re-utilizar código CSS y enfocarnos más en la parte de PUG en el ejercicio. Sin embargo, semánticamente un H4 es lo más recomendando ya al momento de un proyecto en producción. ¡Gracias por la observación!

Juan Castro

teacher•

:wave: ¡Hola, Jota! Mira que también pensaba eso, pero por tu comentario investigué un poco y me encontré con este artículo: La Verdad Sobre Múltiples Etiquetas H1 en la Era de HTML5. :scream::thinking:

Francisco J. López

student•

PUG Tutorial

Interpolation

Example:

section.intro
    .intro__image: img(src=&quot;images/image.png&quot;)

String Multiple

Example:

p.
  Lorem ipsum dolor sit amet,
  consectetur adipisicing elit.
  Quod repellendus ipsum laborum voluptates nostrum,
  qui aspernatur quos perferendis quae recusandae pariatur
  suscipit sint quidem sit, sequi asperiores sunt accusamus dolorum.

p
  | Lorem ipsum dolor sit amet,
  | consectetur adipisicing elit.
  | Quod repellendus ipsum laborum voluptates nostrum,
  | qui aspernatur quos perferendis quae recusandae pariatur
  | suscipit sint quidem sit, sequi asperiores sunt accusamus dolorum.
  span
    | Lorem ipsum dolor sit amet,
    | consectetur adipisicing elit consectetur adipisicing elit.

Variables

Example

Notes: Variables, mixins and functions must be declared before the html doctype tag

-var title = &quot;Main Title&quot;
-var titles = [&quot;Titulo Principal&quot;, &quot;Subtitulo 1&quot;, &quot;Subtitulo 2&quot;, &quot;Subtitulo 3&quot;]
doctype html
    body
    h2= title
    h2 #{title}
    h2 #{titles[0][1]}

Loops

Example

ul
  each title in titles
    li=title

Conditional

Example

-var user = 'Paco'
doctype html
  body
    if user
      a Hola #{user}
    else
      a.boton Registro

Mixins

Example

mixin caja(imagen, titulo, contenido)
  .caja
    .caja__imagen: img(src=&quot;images/&quot;+imagen)
    .caja__contenido
      h3= titulo
      p= contenido
      a.buton Leer Más
doctype html
  body
    +caja('imagen.png', titles[1], 'Lorem ipsum dolor sit amet')
    +caja('imagen.png', titles[2], 'Lorem ipsum dolor sit amet')
    +caja('imagen.png', titles[3], 'Lorem ipsum dolor sit amet')

Includes

Example

Notes: Create a head.pug component first

	include components/head.pug

Extends

Example Notes: Create a template.pug component first

//template.pug
-var title = &quot;Sub-titulo Principal&quot;
-var titles = [&quot;Titulo Principal&quot;, &quot;Subtitulo 1&quot;, &quot;Subtitulo 2&quot;, &quot;Subtitulo 3&quot;]
-var user = 'Paco'
mixin caja(imagen, titulo, contenido)
	.caja
		.caja__imagen: img(src=&quot;images/&quot;+imagen)
		.caja__contenido
			h3= titulo
			p= contenido
			a.buton Leer Más
doctype html
html
	include head.pug
	body
		header
			h1 PlatziGames
			if user
				a Hola #{user}
			else
				a.boton Registro
    block content


//Use
extend components/template.pug
block content

Addi Alberto Salazar Espinosa

student•

Gracias! :D

Maricruz Pizaña Solano

student•

Cool, muchas gracias :D

Emiliano Kuyen Arturo Pacheco Montero

student•

Pienso mucho en vue y como muchas de las cosas de pug ya no se necesitarían por ejemplo condicionales y ciclos en el html, en pug son algo más estáticas pero no suficientemente dinamicas como lo pueden ser en los frameworks modernos.

Creo que para crear sitios estáticos como landing pages sería una forma más profesional usar pug, pero hasta ahí.

Wilson Sánchez

teacher•

Felicidades y aplausos a ustedes 👏 ¡Excelentes trabajos con esos retos!

Irving Juárez

student•

Hay muchos comentarios diciendo que "Mejor me quedo con mi archivo.html", brothers, aun no han hecho proyectos con al menos 3 archivos html? Eso de tener que cambiar un link varias veces en cada pagina es una perdida de tiempo. . Lo que ofrece pug es que "optimización de código", además de una mayor legibilidad, es valioso.

José Ángel Martinez Frias

student•

siempre me quedo la duda como seleccionaba todo y lo identaba. aquí les dejo como:

para quitar espacios teclas SHIF+TAB

para agregar espacios: tecla TAB

José Luis Encastin Flores

student•

Siempre había tenido esa duda. ¡Gracias!

Enrique Orozco Gaytán

student•

Addi Alberto Salazar Espinosa

student•

Muy bien! :D

Maricruz Pizaña Solano

student•

Te quedo muy cool! ;)

Asis Melgarejo Lopez

student•

Lo que hice fue crear más mixins y reutilizar variables:

Addi Alberto Salazar Espinosa

student•

Super!

Maricruz Pizaña Solano

student•

Te quedo muy bien :D

MATTHEUV OSORIO CARDONA

student•

// ARCHIVO CSS

.container{
	display:flex;

}

.container__menu{

	width: 35%;
	background: #F1F3F9;
	padding: 40px;
}

.container__menu ul{
	margin-top:30px;
}
.container__menu li{
	list-style-type: none;
	font-weight: bold;
	margin-top:20px;
	color: #012178;
}

.container__content{
	width: 65%;
	padding:20px;
}

.container__content .boton{
	margin-top: 20px;
}

// ARCHIVO PUG

extend components/plantilla.pug
block contenidos
    .container
        .container__menu
            h3 Menú
            ul
            each enlace in enlaces
                li #{enlace}
        .container__content
            h1  Título Principal
            p
            |  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            |   Proin ex mi, gravida sit amet imperdiet vel, sodales a mi. 
            |   Proin sit amet tellus nec nisl bibendum ornare nec at augue. 
            |   Integer semper feugiat varius.
            p
            |  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            |   Proin ex mi, gravida sit amet imperdiet vel, sodales a mi. 
            a.boton hola amigos

Addi Alberto Salazar Espinosa

student•

Super! :D

Maricruz Pizaña Solano

student•

Genial!

Fernando Andres Muñoz Suazo

student•

Reto cumplido:

Maricruz Pizaña Solano

student•

Genial! :D

Bernardo Aguayo Ortega

student•

Igual!

Eduardo Antonio Rivero Rivera

student•

homepage.pug

include ../components/configs.pug
&lt;!DOCTYPE html&gt;
html(lang=&quot;en&quot;)
  include ../components/head.pug
  body
    include ../components/header.pug
    .contenido
      .contenido__side
        h2 Menu
        ul
          each menu in menus
            li=menu
      .contenido__principal
        h2 Titulo Principal
        p Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus expedita eum tempora. Inventore ipsum provident sint voluptatibus sapiente architecto officiis incidunt at, iste non, deserunt similique repellat quaerat laudantium voluptatem!
        p Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus expedita eum tempora. Inventore ipsum provident sint voluptatibus sapiente architecto officiis incidunt at, iste non, deserunt similique repellat quaerat laudantium voluptatem!
        a.boton Ver Más
  include ../components/footer.pug

.contenido{
	display: grid;
	grid-template-columns: 1fr 3fr;
	height: 75vh;
}

.contenido__side{
	display: flex;
	flex-direction: column;
	text-transform: uppercase;
	font-weight: bold;
	justify-content: center;
	background-color: #EEF1F8;
	padding: 35px;
	width: 100%;
	height: 100%;
}
.contenido__side ul{
	height: 50%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	color:#012179;
	list-style: none;
	padding: 0;
}

.contenido__principal{
	padding: 50px;
}

Addi Alberto Salazar Espinosa

student•

Buen aporte! :D

Maricruz Pizaña Solano

student•

Excelente!!

Fadith Enrique Escorcia Mujica

student•

Tengan mucho cuidado con no dejar espacios extra al final de sus componentes. Si no se los marcara como error.

Sebastian Vizcarra

student•

Cuando usas React supongo que no es necesario Pug ¿Alguien que me confirme o corrija?

Omar Jalil Fierro López

student•

No para nada. Pug es unicamente un preprocesador de HTML. Existen muchos, pero también puedes usar React únicamente con JSX

Andres Alvarez Becerra

student•

Hola, cuando hacemos un proyecto y lo subimos a GitHub, debemos subir los archivos .pug y .sass, los html y css o se suben todos?

Bernardo Ayala Montezuma

student•

Hola Andrés,

Por lo general no se suben los outputs compilados a los repositorios, pero eso siempre depende del objetivo. En el caso de este curso, tenerlos en el repo es útil.

En un proyecto normal tendrías todos los archivos .pug, .sass y .js sin compilar dentro de una carpeta llamada src y todo el output compilado lo mandarías a una carpeta dist, la cual excluirías del repo con .gitignore

Gabriel Hernández Valdez

student•

¿Vale la pena aprender y usar pug?. Aun no se nada de react, vue o angular, desconozco si con estos pug se hace innecesario.

Arturo Alejandro Buentello Gutiérrez

student•

Yo conocí pug por medio de nuxt.js, por que me daba la opción de usarlo, y puedo comentar que a mi gusto, se hace un poco más legible el código. Si, embargo me di cuenta de que es más importante tener buenas practicas para mejorar la legibilidad, y con el tiempo dejé de usar pug por que sentí que ya no lo necesitaba, después de que mejoré mi forma de escribir código.

andrés eduardo betancourt bescanza

student•

Hoy en dia yo diria que no es muy recomendable, como dice el companero es mas importante tener buenas practicas.

Alberto Castro Flores

student•

Como mueve todo hacia la izquierda en 3:05?

CRISTIAN BARBERO PÉREZ

student•

Shift + Tab 😀

Franklin Peñafiel

student•

Hace poco maqueté un proyecto de 3 páginas, todos tenían enlaces internos que se repetían por estar en servidor de desarrollo y en dos archivos se compartía un bloque diferente de información que estaba dentro de otro archivo. Cuando llegó la hora de entregar el proyecto fue una pesadilla porque tuve que cambiar los enlaces de prueba por los enlaces de producción. Aparte de eso hubo cambios en el header y algunos bloques más. Pug me hubiera salvado en ese entonces, pero no tenía ni idea de su existencia.
Aunque el curso fue muy básico, lo que sigue ahora es practicar e ir conociendo el resto de beneficios que ofrece pug porque para ser tan conocido debe existir una gran cantidad de funcionalidades

Gracias por el curso, fue excelente

Gabriel Ortiz

student•

Reto realizado :)

Leonardo Alain

student•

Me gusto bastante la parte de corroborar la clase anterior, lo sentí muy personal, como si se pusiera en mi lugar. Genial por eso. No creo que sea muy relevante para le curso pero pienso vale la pena decirlo. 😎

alam angel gutierrez vazquez

student•

Comparto esa sensación, se elimina la incertidumbre