Interpolación

Clase 11 de 42 • Curso de Preprocesadores CSS

Contenido del curso

Introducción

Evolución de las Tecnologías de Front-End

Preprocesadores para HTML

Less

Sass

Stylus

Desarrollo del proyecto Platzi Games

Conclusiones y Cierre

42
Conclusiones y Cierre
01:24 min

Tomar examen

Resumen

En esta clase vemos cómo anidar elementos dentro de otros en PUG y cómo trabajar con textos de múltiples lineas.

Comentarios

Mariana Cortés

student•

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. ;)

Efraín Hernández García

student•

Excelente tip muchas gracias

Maricruz Pizaña Solano

student•

Buen tip, gracias.

Alex Camacho

teacher•

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.

Pablo Nicolás Alonso

student•

Heroina sin capa.

Omar Quiroz

student•

¿Cómo es posible qué esto no se aclare? Lo comenta un miembro de Platzi Team y no hacen nada por aclararlo, arreglarlo o modificar el video. Soy nuevo en platzi y creo que lo enseñan está bien fundamentado. Con estas "evidencias". Están tirando al suelo el buen concepto que tengo de ustedes con este tipo de cosas! @platzi

Aaron Joel Limachi Quispe

student•

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

Max Camargo

student•

Siento lo mismo, pienso que Emmet puede ser mejor herramienta. De igual manera le daré una oportunidad, no sea que me este perdiendo de algo bueno.

Reiberth Perez

student•

Concluyo lo mismo, pero esta bueno ver como se usa si por ahi te contratan en una empresa y el grupo de desarrolladores te lo exijen, pues bueno ya sabes como usarlo.

andrés eduardo betancourt bescanza

student•

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 👍🦾

Wilson Delgado

student•

La vieja confiable

andrés eduardo betancourt bescanza

student•

@WilsonDelgado jajajaja no falla

Christian David Sánchez

student•

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.

Addi Alberto Salazar Espinosa

student•

Gracias! :D

Bernardo Aguayo Ortega

student•

Gracias hermano!

Kamerr Ezz

student•

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

Jhonatan David Ibarra Lavado

student•

exacto más sencillo :D jajaja

Bernardo Aguayo Ortega

student•

ñaca ñaca

Holman H Galeano Caballero

student•

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

#[span y el texto y ya]

David Alejandro Mosquera Moreno

student•

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

Anfernee Valera

student•

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.

Miguel Medina

student•

La verdad que es un dolor de cabeza querer entender el pug.. prefiero al menos Yo, seguir viendo el curso pero viendo el codigo en html.. si quieren simplificarse la vida haciendo una web, entonces háganse un curso de Wordpress.

Sebastian Llanes

student•

Estoy de acuerdo con vos. Creo que para nuestro punto de vista es mejor emmet que pug

Elvis Milan

student•

Inter....

Sneider Sanchez

student•

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.

Miguel Angel Reyes Moreno

student•

En VS code solamente con escribir "Lorem" te genera un texto de estos.

Belén Sosa

student•

Hola, saben como se pude escribir un comentario utilizando pug?

Ramiro Contreras León

student•

@belensosa lo podes hacer con: control + }

Lucas Alejandro Moreno Olivos

student•

con //

div
	//este es un comentario :D
	img(src="#")

Juan David Vanegas Roldán

student•

Con pulsar alt + z se ajusta el texto al tamaño de la ventana, no hace falta bajarlo línea a línea como muestran acá.

Raúl Adolfo Sánchez Rodríguez

student•

Cuando un elemento tiene un ícono hijo, al hijo lo podemos nombrar en PUG así:

Javier Luján Blanco

student•

El tema es que este curso está dentro de la ruta de desarrollo web, y me parece, sin tener mucha idea del asunto porque prácticamente acabo de empezar, que está muy desactualizado. Ir buscando con el ratón en el texto y darle enter.... con VSCode simplemente alt+z y se adapta al tamaño de tu ventana. Hay que repasar cursos viejos y actualizarse.

Christian Quilagüy Díaz

student•

Semánticamente se debería usar <figure/> como etiqueta contenedora de <img/>. No se si es por costumbre pero no le estoy viendo mucha utiliadad a PUG

Santiago Andres Alvarez Cuadros

student•

En realidad, <figure> se usa únicamente si <img> va acompañada de un <figcaption>. Si no es así, no es necesario utilizar <figure> para contener a <img>.

Carlos Lefin Henriquez

student•

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;
}

Irving Juárez

student•

¿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

Aldo Miguel Ortiz Parodi

student•

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

Kevin Andres Curruchich Xocop

student•

Por el momento no le encuentro un mayor beneficio a preprocesador de HTML, espero que conforme siga el curso mi opinion sea otra 😥

Aldo Miguel Ortiz Parodi

student•

En ese sentido yo tampoco lo veía pero mira, imagínate que gestiones un proyecto grande, donde cada página tenga 20 o 30 subpáginas, y debes hacer constantamente cambios, pues con Pug simplemente te vas al archivo pug, haces los cambios necesarios y eso se refleja en el HTML

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

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

Interpolación

Introducción

Qué aprenderás sobre preprocesadores

Conceptos básicos de CSS

Selectores de CSS

Evolución de las Tecnologías de Front-End

Introducción a los Preprocesadores

Metodologías para estructurar código

Introducción a BEM

Guías para creación y mantenimiento de código

Instalación de herramientas de compilación

Preprocesadores para HTML

Introducción a Pug

Sintaxis

Interpolación

Variables

Condicionales y Loops

Mixins

Includes y Extends

Finalizando ejercicio de Landing Page

Less

Introducción a Less

Anidamiento e imports

Variables

Funciones

Mixins

Finalizando ejercicio de página de artículos

Sass

Introducción a Sass

Variables

Imports y Extends

Mixins

Funciones

Condicionales y Loops

Finalizando ejercicio de perfil de usuario

Stylus

Introducción a Stylus

Variables

Mixins

Funciones

Condicionales y Loops

Desarrollo del proyecto Platzi Games

Introducción al proyecto

Plantillas modulares con PUG: Header

Plantillas modulares con PUG: Footer

Grid System con Sass

Mixins para manejo de fuentes responsivas

Funciones para media queries

Finalizando el proyecto

Conclusiones y Cierre

Conclusiones y Cierre