Interpolación

Si están usando VSCode, recuerden que gracias a Emmet (que viene por defecto) ustedes pueden escribir

Lorem7

Y al darle ENTER les va a poner las 7 primeras palabras del “Lorem Ipsum”. Ese número lo pueden cambiar. 😉

Esto no es la interpolación, la interpolación es cuando se tienen variables y se le quiere concatenar texto que usualmente ser haría así

- var user = "Alejandra"; 
h1 "Hola " + user + ", cómo estas?"

Se realice de la siguiente forma

h1 Hola #{user}, cómo estas?

Por favor no confundan términos, esta información esta en la misma web de Pug.

TRUCAZO

Una de las buenas caracteristicas que tiene visual studio code es que te permite ajustar tu texto, dependiendo del tamano que tengas el editor, esto se hace de la siguiente manera.

Supongamos que tienes abierto el editor:

Solo te tienes que ir a la seccion que dice View y seleccionar Toogle word wrap:

y listo, el texto se ajustara al ancho de tu editor 👍🦾

No me parece ofrecer muchas ventajas el uso de pug frente al HTML plano de toda la vida.

Apuntes

Para que pug detecte que una etiqueta tiene un hijo debemos tener en
cuenta la tabulación
div
span

PARA DECLARAR UN DIV SE UTILIZA
div.intro__imagen
O ÚNICAMENTE EL NOMBRE DE LA CLASE
.intro__imagen

Esto aplica cuando el elemento solo tiene un hijo
div.intro__imagen: img(src=“images/imagen.png”, alt=“Imagen Intro”)

PARA TEXTOS LARGOS COLOCAR PUNTO(.) DESPUÉS DEL NOMBRE DE LA ETIQUETA
EJEMPLO
p.
Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Sit
nobis pariatur sapiente quod,
laboriosam minus facilis hic,
voluptatum veniam provident,
earum inventore eveniet quis animi
perferendis ad dolor amet tempora.

Otra forma es:
p
| Lorem ipsum dolor sit, amet
| consectetur adipisicing elit. Sit
| nobis pariatur sapiente quod,
| laboriosam minus facilis hic,
| voluptatum veniam provident,
| earum inventore eveniet quis animi
| perferendis ad dolor amet tempora.

es bueno saber eso, aun que en vscode con **alt + z **, hace los mismo en cierto modo.

Más información para seguir aprendiendo sobre interpolación { ’ } ’ }
.

En mi caso no funciono lo del span entonces lo solucione así:

#[span y el texto y ya]

Inter…

Codigo del cuerpo de la etiqueta 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.

La interpolación es cuando se tienen variables y se le quiere concatenar texto.

En este caso:

- var titulo= "Las locuras del emperador";
- var director= " Mark Dindal";

h1= titulo
p Dirigido con amor por #{director}

Otra manera de hacerlo incluyendo es en la etiqueta, o Tag Interpolation

p.
  y aquí colocamos un texto interpolado con un atributo:
  #[q(lang="es") ¡Hola Mundo!]

Espero los ayude a complementar, pero no se olviden de lo primero:

La interpolación es cuando se tienen variables y se le quiere concatenar texto.

una aclaracion acerca de la etiqueta <span>, por si sola no vuelve en NEGRITA los parrafos, lo que pasa es que hay un estilo en el archivo CSS que lo vuelve NEGRITA

.intro__contenido span {
	display: block;
	++font-weight: bold;++
	font-style: italic;
}

¿Que es la interpolacion en pug?

.
Entre las propiedades que pug nos ofrece son:

• Escribir menos lineas de codigo cuando un elemento solo tiene un hijo. Esto se hace de la siguiente manera: .bloc__element: img(src="./"). Aqui lo que paso es que en vez de bajar una linea, en la misma linea escribirmos a el elemento hijo. Cuando son dos o mas elementos hijos, tenemos que bajar una linea obligatoriamente.
• Poder ver todo el contenido de un elemento. Esto en pug lo podemos hacer con un ., despues de la etiqueta que va a tener el contenido. Un ejemplo de esto es:

p.
    Lorem ipsu...
    Lorem ipsu...
    Lorem ipsu...
    Lorem ipsu...	

Todo el contenido es visible para nosotros… Esto tambien lo puedes hacer con Ctrl + z en Visual Studio Code

11. Interpolación:

Concuerdo por el momento con varios compañeros, no me termina de convencer Pug, capaz si conozco más características me termina pareciendo mejor.
Les comparto el código que hice de la clase en PUG:

doctype html
html
    head
        meta(charset="UTF-8")
        link(rel="stylesheet", href="../css/ejercicio-pug.css")
    body
        header
            h1 PlatziGames
            a.boton Registro
        section.intro
            .intro__imagen: img(src="../images/imagen.png")
            .intro__contenido
                h2 Título Principal
                p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias quos veritatis eligendi? Ex maiores rerum exercitationem consectetur, porro eaque culpa quisquam labore
                 span debitis ab esse doloremque, dolor odio unde tempora.
                a.boton Leer más

Yo para evitar usar este símbolo | en VS recurro a
Alt + Z y me ajusta el contenido de mi código.

me esta gustando mucho este curso!!

doctype html
html
  head
    meta(charset="UFT-8")
    link(rel="stylesheet", href="css/ejercicio-pug.css")
  body
    header
    h1 PlatziGames
    a.boton Registro
  section.intro
    .intro__imagen
      img(src="images/imagen.png")
    .intro__contenido
      h2 Titulo 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.
      span.
        Proin sed urna quis orci interdum 
      a.boton Leer Mas```

En el caso del párrafo utilice Toggle Word Wrap (Alt +Z) y me funcionó. En este caso se va ajustando automáticamente el ancho del contenido de la etiqueta p. Sólo te posicionas en el caso en cuestión, presionas Alt + Z y listo.

Me gusto!

VS da la opcion de ajustar el texto con un tipo de toggle. Pero es bueno aprender otras formas.

Apuntes de la clase II

• elemento p

Para indentar texto de p es necesario usar un punto y bajar la línea como en el siguiente ejercicio:

p.
  Lorem ipsum dolor sit, 
  amet consectetur adipisicing elit. 
   Expedita, dolorum? Ipsa, excepturi! 
   Earum libero dicta iure praesentium. 
   Vel saepe, laboriosam, praesentium dicta,
   totam dolorem officia placeat aut repellat 
   adipisci odit?

Ventajas:
Facilita la lectura del código.

• Otra forma es usa | en vez de usar .

p 
  | Lorem ipsum dolor sit, 
  | amet consectetur adipisicing elit. 
  | Expedita, dolorum? Ipsa, excepturi! 
  | Earum libero dicta iure praesentium. 
  | Vel saepe, laboriosam, praesentium dicta,
  | totam dolorem officia placeat aut repellat 
  | adipisci odit?

Ventajas de usar | en vez de .
| te deja anida más elementos en su interior. Además, usar | indica que todo el texto que está delante de él será un texto y lo que está debajo será un elemento.

Ejemplo:

p 
  | Lorem ipsum dolor sit, 
  | amet consectetur adipisicing elit. 
  | Expedita, dolorum? Ipsa, excepturi! 
  | Earum libero dicta iure praesentium. 
  | Vel saepe, laboriosam, praesentium dicta,
  | totam dolorem officia placeat aut repellat 
  | adipisci odit?
  span nuevo texto

Apuntes de la clase

Interpolación de etiquetas

Ver como pug maneja la anidación de elementos dentro de otros elementos.

• Caso: div

section.intro
  div.intro__imagen

El código anterior es igual a este:

section.intro
  .intro__imagen

¿Por qué sucede esto?

Debido a que .Pug identifica a .intro__imagen como un div, por qué está indentado debajo de un bloque (section) y lleva una clase.

ventajas:
Intrepreta .clase como div.

• Padre e hijo único/ padre e hijos.

Se usa para indentar a un único elemento hijo dentro del elemento padre, ejemplo:

section.intro
  .intro__imagen: img ()

ventajas:
Ahorra líneas de código.

y cuando se presentan más elementos hijos se recurre a la indentación ordinaria.

section.intro
  .intro__imagen: img ()
  .intro__contenido
        h2 Título Principal
        p Lorem ipsum
        a.boton Leer Mas

Gracias por el truco para el ajuste de párrafos, pero si usamos VScode me gustaría aportar que tiene una herramienta llamada "Ajuste de palabra" que podemos acceder a ella entrando al menú superior “Ver” o usando la combinación de teclado:
alt + Z
Prácticamente vuelve responsive el texto dentro de nuestra ventana del editor de código. Así no importa que tan ancho o delgado el espacio de trabajo, siempre podrá visualizarse el contenido de cada bloque de código.

Solo una cosa, no me agrada que la etiqueta <h1> este junta a la etiqueta <a>

![](

me gusta que este separadas

![](

Creo que en caso de tener mucho contenido en el Visual Studio Code, puede usarse Alt + Z
Se acomoda el texto al espacio de trabajo.
Creo que es más sencillo.
Saludos

No me termina de convencer pug.
El tener que escribir mi html en pug, luego revisar que el html sea compilado correctamente y al final revisar la interpretación del navegador, me parece que es algo redundante.

Si usas VS code y para evitar tooooodo el drama que hizo el instructor al modificar el texto del Lorem Ipsum(min 4:48) y la línea te queda muy larga presiona:
Alt + z
y automáticamente te va a ajustar el texto al ancho de pantalla que le hayas asignado y se ajusta automáticamente.

Aún un poco extraña usando Pug. Considero que visualmente es más “elegante”, pero en términos de escribir el código parece más fácil hacerlo directamente con VSC y sus propias extensiones. Veremos si cambio de opinión en las próximas clases.

Alt + z también puede ser usado para darle mejor vista al texto

Definicion de Pug: es un motor de plantillas de NodeJS, el cual brinda la posibilidad de preprocesar código HTML de una forma más rápida y amigable. Nos otorga una sintaxis menos compleja y muy poderosa en la que se incluyen nuevas características tales como ciclos, variables, mixins, entre otros.

En VSCode puede presionar alt + z para que el contenido se ajuste al tamaño de la ventana.

doctype html
html
  head
    meta(charset="UTF-8")
    link(rel="stylesheet", href='css/ejercicio_pug.css')
  body
    header
      h1 PlatziGames
      a.boton Registro
    section.intro
      //Eso le dice a pug que cree un div y luego tenga de hijo una imagen 
      .intro__imagen: img(src="images/imagen.png")
      .intro__contenido
        h2 Titulo Principal
        // | el pipe indica que el texto esta dentro de p
        p
          | Lorem ipsum dolor sit amet consectetur adipisicing elit. 
          | Unde nobis distinctio maxime praesentium sit animi ad saepe 
          | sapiente ipsam veniam voluptatibus nihil, corporis temporibus 
          | consequatur libero! Consequuntur impedit excepturi distinctio!
          span Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, consequuntur.
        a.boton Leer Más```

Excelente clase 🚀

Excelente material

No me funcionó lo del span en negrita pero lo hice con un strong…

excelente clase cada ves me parece mas interesante pug

<!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="css/ejercicio-pug.css")
		title Document
	body
		header
			h1 PlatziGames
			a.boton Registro
		section.intro
			.intro__imagen: img(src="images/imagen.png", alt="")
			.intro__contenido
				h2 Titulo Principal
				p
					| Lorem ipsum dolor sit amet 
					| consectetur adipisicing elit. 
					| Dolorum ratione molestiae vitae 
					| unde. Labore, provident porro 
					| minima sequi blanditiis, eius nobis delectus amet ad 
					| ullam laudantium eos error consectetur atque.
					span.
						Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
						Nesciunt rem ab ipsa inventore? Accusantium, nemo ad nobis
				a.boton leer Mas```

Me encantó!!

El VSC tiene una opción para que el texto siempre este en pantalla
![](

En Windows con alt + z se activa el word wrap de VS Code y es más facil de leer

Tambien pueden utilizar alt+z en VSCode para que se vea de forma mas legible.

Wow, me empieza a gustar pug! 😄

Me está gustando mucho Pug, excelente clase.

Así me quedo a mí:

<!DOCTYPE html>
html(lang="en")
	head
		meta(charset="UTF-8")
		meta(name="viewport", content="width=device-width, initial-scale=1.0")
		title Document
		link(rel="stylesheet", href="css/ejercicio-pug.css")
	body
		header
			h1 Platzi Games
			a.boton Registro
		section.intro
			.intro__imagen: img(src="images/imagen.png")
			.intro__contenido
				h2 Título Principal
				p Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi illum quisquam consequatur dignissimos! Minus eos eaque mollitia ab ut vero dolorum quis. Consequuntur magni accusantium eum natus esse doloribus beatae?
					span Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus fugit labore repellendus nam ipsa aliquid perferendis corporis.
				a.boton Leer Más```

Adicional a lo que comentan mis compañeros respecto de activar el toggle wrap para lo del acomodo de las líneas ¿Qué pasa si queremos por ejemplo poner negritas dentro de una etiqueta p? Algo así:

<p>Lorem ipsum dolor <strong>sit amet consectetur</strong> adipisicing elit. </p>

La solución es precisamente el salto de línea para incorporar la etiqueta <strong> y luego, nuevamente un salto de línea utilizando el pipe (|) para indicar que ese resto del texto sigue siendo parte de la etiqueta p.

p Lorem ipsum dolor 
  strong sit amet consectetur
  | adipisicing elit.

Buena clase, eso si hay que aclarar que con ALT + Z pones el texto sobre el campo visible de VSC, no veo tan necesario lo que dice el profe pero igual es genial saberlo

Alguien sabe como se puede hacer para que los cambios se apliquen en tiempo real. Ya tengo instalado Live Server pero tampoco me sirve me sale esto

no me agarra los estilos css

¿Se puede usar Prettier en pug?

Existe otra forma de usar una etiqueta dentro de otra etiqueta
p este es un #[span ejemplo].

Así se puede usar la notación de punto para manejar las etiquetas y no repetir el | en cada una de las líneas.

Poco a poco me esta interesando más pug, buena clase 👍🏻📈📖🤓✌💪✅