Sintaxis

Clase 10 de 42 • Curso de Preprocesadores CSS

Clase anteriorSiguiente clase

Cesar Galindo

student•

Si quieres utilizar pug sin prepros y por terminal debes:

Instalarlo npm i pug-cli -g
Compilar pug -w --pretty landing.pug

Bernardo Aguayo Ortega

student•

Gracias!!!

Maricruz Pizaña Solano

student•

Gracias.

Hans Olivas

student•

Si quieren compilar los archivos Pug primero necesitan instalar NodeJS. Luego desde la terminal instalar pug :

>>npm install pug-cli -g

y ya pueden compilar desde visual studio code


pug archivo.pug  
 compila una sola vez

pug -w archivo.pug
 compila cada vez que el archivo cambia, genera un HTML minificado

pug -w --pretty archivo.pug
 compila un HTML identado

pug directorio
 compila todos los archivos dentro de ese directorio

yo lo hice desde windows 10 :D

David Alejandro García Graterón

student•

Si es mucho mas fácil. (= Gracias por compartir información.

Andrés David Solarte Vidal

student•

Gracias, es una parte del curso que noe estaba.

Jhonny Lincol Quispe Navarro

student•

No me gustan los pre procesadores para HTML es más tardado para mi gusto. Prefiero para el CSS 😉.

Andrés Madrigal

student•

La verdad prefiero el HTML puro y tal vez hacer algunas invocaciones de HTML por JS pero nada mas. El CSS me gusta aislado

Hugo Gomez Tinoco

student•

Para páginas estáticas no hay mucho problema en no usarlos, no te pierdes de mucho, pero para páginas dinámicas que cambian la información conectándose con el Backend es fundamental aprenderlo

Sneider Sanchez

student•

Video de Tabs vs Spaces que comenta el profe:

Tabs vs Spaces

Eva Gutiérrez

student•

Gracias

Disl B

student•

Esa serie está muy buena 😁

Luis Armando Zamaniego Valenzuela

student•

**Pug me parece una excelente herramienta para el desarrollo. ** Las ventajas que veo:

Ver los cambios en tiempo real
Escanear el código QR y verlo desde mi dispositivo móvil con cambios en tiempo real literalmente es “MAGIA”, lo veo bastante útil para metodología “Mobile First”
Ahorramos tiempo y fácilmente tenemos una buena semántica en HTML

**Nota: La versión actual de PUG, no tiene ningún problema con diferenciar tab y espacios. Puedes usar ambos, sin ningún problema. **

andrés eduardo betancourt bescanza

student•

Hola, cabe destacar que desde vs puedes ver los cambios en tiempo real utilizando live server, sin necesidad de usar pug, tambien puedes ver tu index desde tu dispositivo creando un servidor desde tu terminal, para esto solo necesitas seguir os siguientes pasos:

instalar node.js 
instalar el servidor:   npm -g install static-server
Go to the folder you want to serve
Run the server static-server```

Luis Armando Zamaniego Valenzuela

student•

Tienes razón Andres, cabe mencionar que también utilizó live server, y es muy practico.

Andrei Rubio

student•

Wow, tenía miedo de entrar a los preprocesadores porque pensaba que podían ser muy difíciles o poco útiles (soy de los que prefiero hacer todo el código sin usar ningún tipo de ayuda), pero toda esa mentalidad se ha ido a la basura con estas clases.

Danilo Fernandez

student•

Sigues con el mismo pensamiento? Estoy recién comenzando.

Lorgio Roda

student•

Yo igual, vi esta clase y mi cabeza hizo bom al ver la facilidad y el tiempo que ahorras, ahora soy del team TAB!.

Don riata Sabrozon

student•

¿No es más tardado usar un preprocesador para html en lugar de los atajos de vscode con EMMET?

Con vscode, al empezar un documento con HTML 5 basta con usar html:5 y tabulador y crea toda la estructura básica y con atributos de cada meta y links.

Si se usa un preprocesador como PUG hay que hacerlo todo paso por paso

¿O me equivoco?

Gracias.

David Behar

student•

VScode también tiene el atajo html:5 de emmet en PUG, no estoy seguro de que tenga otros atajos de emmet

Eduardo Reyes

student•

Yo creia lo mismo, instalé esta extension en VSCode y todos los atajos de emmet ahora salen tambien PUG.

Crhistian Jackson Ovalle Gamba

student•

Excelente clase, muchas gracias.

Si usan VisualStudio Code recomiendo tener instalado Live Server para ver los cambios automáticamente entre el .pug vs .html:

David Alejandro García Graterón

student•

Buenas Noches, Yo estoy haciendo eso pero cuando realizo un cambio al archivo .pug no se actualiza en el .html, Hay que instalar algo más ?

Crhistian Jackson Ovalle Gamba

student•

Hola @ale1716

Creo que son 2 cosas:

1 Sincronizar cambios pug/html: para que los cambios que haces en el archivo pug se reflejen en el html debes tener abierto el preprocesaror (yo tengo prepos que es el recomendado en el curso).

2 Sincronizar cambios HTML en el navegador: para esto hacemos uso del plugin de Live Server.

Una vez instalado, basta con hacer clic derecho sobre el archivo html y luego** Open with Live Server**

Aqui podemos ver el esquema completo:

Espero haber contribuido a responder tu interrogante.

Juan Ignacio Echenique Olsina

student•

Debo ser al unico que le gusta este preprocesador solo porque le hace sentir como estar programando en python jajaa

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

student•

Pug trabaja por indentación; es Html con una sintaxis "sencilla"

Sólo tienes que poner la etiqueta un espacio y su contenido.
Los atributos se escriben entre paréntesis. Si quieres poner varios atributos tienen que ir separados con una (,).
Para incluir una clase, la etiqueta va seguida de un (.) y el nombre de la clase; y si queremos agregar un id en lugar de punto se pone un (#).
Para anidar, tenemos que empezar en una nueva linea y dar un espacio con el tabulador.
Anidación en una linea div: p: span Hola!

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

student•

Emmet también funciona en PUG, haciendo que sea aun mas fácil la sintaxis.

Miguel Angel Reyes Moreno

student•

Qué interesante, pero honestamente no me está agradando pug, quizás en clases futuras mi opinión cambie.

Cristofher Jumbo Jimenez

student•

Dam...por qué ?

Miguel Angel Reyes Moreno

student•

Quizás sea la costumbre de manejar HTML 🤔

Andrés David Loaiza Zamudio

student•

Hay ciertas brechas en este curso, creo que la instalación de PUG es muy necesaria porque no todos sabemos o estamos al mismo nivel, me ha tocado averiguar en la red a ver como instalarlo y creo que son tiempos perdidos para el estudiante, hasta ahora no tengo nada conciso para resolverlo, sabe alguien como se instala???? Donde debo correr el código que aparece en la pagina de PUG????

Diego Iván Centeno

student•

Hola:wave: Si tienes instalado node.js puedes correr el comando:

npm install pug

Y el código lo puedes correr desde tu editor de código, VSCode o cualquiera. Espero que te sea de ayuda, saludos:v:

Andrés Gómez

student•

Sinceramente, ya probe el pug sin prepos y se me hace super rapido y eficiente, la verdad me gusto mucho, prefiero usar la terminal que prepos para pug sinceramente

Para instalar en terminal Ubuntu necesitas instalar node js y su manejador de packetes npm

Recuerda haber actualizado antes de instalar estos packetes

sudo apt-get update
sudo apt-get upgrade

Y para instalar nodejs y npm

sudo apt install nodejs
sudo apt install npm

Y luego instala el pug

npm i pug-cli -g

SI no te deja instalarlo asi normal, dale permisos root escibiendole primero "sudo", asi:

sudo npm i pug-cli -g

Y listo, los comandos para complar son estos:

pug archivo.pug

*compila una sola vez

pug -w archivo.pug

*compila cada vez que el archivo cambia, genera un HTML minificado

pug -w --pretty archivo.pug

*compila un HTML identado

pug directorio

*compila todos los archivos dentro de ese directorio

Stiven Jiménez

student•

Aqui les dejo el video de tab vs space silicon valley https://www.youtube.com/watch?v=SsoOG6ZeyUI

¿y tú eres una persona de tab o de 2space? yo amo usar tab <3

Leonardo David Martinez Hernandez

student•

Aun no entiendo que está solucionado PUG, pues siento que usarlo es doble trabajo. todo eso sale en VSC con emmet y ya es el documento html. Alguna otra opinión?

Germán González

student•

Por ahora solo nos esta ahorrando codigo, pero creo que nos servira de algo en un futuro.

Josue Zafra

student•

Aparte de que hace que escribas html elegante, creo que te ayuda a escribir menos caracteres, lo cual lo hace mas facil de entender, incluso para alguien que no este familiarizado con html

Karla

student•

Debes elegir entre utilizar TAB o 2 espacios, si usas ambos no funcionará.

Gabriel Escribá

student•

Protip: Si quieres ahorrar aun mas codigo y tipear menos, emmet es compatible para extender la sintaxis de pug les dejo el codigo del final abreviado, para usarlo

Copien y peguen
Borren una letra y vuelvanla a escribir
Aprenten tab
escriban la ruta del archivo de estilos

html>head>meta:utf+link:css^body>header>h1{PlatziGames}+a.boton{Registro}```

Irving Juárez

student•

Pro-tip

Solo coloca doc y un enter para que pug te complete la estructura básica de un archivo html . Esta estructura es la de la foto de abajo

Anfernee Valera

student•

Ya decía yo que era imposible que no hubiera un atajo como este. Muchas gracias :D

Irving Juárez

student•

Y estoy seguro que hay mas, pero aun no los hemos encontrado

Mariam Levy

student•

Nunca está demás conocer cosas nuevas aun así cuando creas que no las vas a utilizar.

Andres Velasquez

student•

Así es. Hasta lo que creemos que no nos va a aportar nos termina ampliando la mente y las posibilidades. En eso se basa la creatividad.

Yefri Enmanuel Encarnación Jiménez

student•

Sintaxis de pug

1- Nos olvidamos de las signos de <> / y solamente ponemos el nombre de la etiqueta que deseamos usar una sola vez y al lado de ellas su contenido.

h1 Titulo

2- Si queremos que una etiqueta sea hija de otra simplemente usamos espacios (debajo de la etiqueta padre) o el tabulador, sin embargo tiene que ser solo uno de los dos durante todo el proyecto de otra forma nos dará error.

section 
	h1 titulo
	p contenido
	div 
		img
section 
	h2

3- Si queremos usar atributos dentro de las etiquetas o elementos simple usamos parentesis y dentro el atributo (o los atributos) como en html. Si los atributos que queremos añadir son clases o ids no necistamos parentesis simplemente podemos poner .punto para clases y #numeral para ids.

div.MyBlock
	p#Myp

Sintaxis

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