Sintaxis
Clase 10 de 42 • Curso de Preprocesadores CSS
Contenido del curso
Cesar Galindo
student•
hace 6 años
Bernardo Aguayo Ortega
student•
hace 6 años
Maricruz Pizaña Solano
student•
hace 6 años
Clase 10 de 42 • Curso de Preprocesadores CSS
Contenido del curso
Cesar Galindo
Bernardo Aguayo Ortega
Maricruz Pizaña Solano
Hans Olivas
David Alejandro García Graterón
Andrés David Solarte Vidal
Jhonny Lincol Quispe Navarro
Andrés Madrigal
Hugo Gomez Tinoco
Sneider Sanchez
Eva Gutiérrez
Disl B
Luis Armando Zamaniego Valenzuela
andrés eduardo betancourt bescanza
Luis Armando Zamaniego Valenzuela
Andrei Rubio
Danilo Fernandez
Lorgio Roda
Don riata Sabrozon
David Behar
Eduardo Reyes
Crhistian Jackson Ovalle Gamba
David Alejandro García Graterón
Crhistian Jackson Ovalle Gamba
Juan Ignacio Echenique Olsina
JUAN SEBASTIAN RODRIGUEZ JIMENEZ
JUAN SEBASTIAN RODRIGUEZ JIMENEZ
Miguel Angel Reyes Moreno
Cristofher Jumbo Jimenez
Miguel Angel Reyes Moreno
Andrés David Loaiza Zamudio
Diego Iván Centeno
Andrés Gómez
Stiven Jiménez
Leonardo David Martinez Hernandez
Germán González
Josue Zafra
Karla
Gabriel Escribá
Irving Juárez
Anfernee Valera
Irving Juárez
Mariam Levy
Andres Velasquez
Yefri Enmanuel Encarnación Jiménez
Si quieres utilizar pug sin prepros y por terminal debes:
npm i pug-cli -gpug -w --pretty landing.pugGracias!!!
Gracias.
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
Si es mucho mas fácil. (= Gracias por compartir información.
Gracias, es una parte del curso que noe estaba.
No me gustan los pre procesadores para HTML es más tardado para mi gusto. Prefiero para el CSS 😉.
La verdad prefiero el HTML puro y tal vez hacer algunas invocaciones de HTML por JS pero nada mas. El CSS me gusta aislado
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
Video de Tabs vs Spaces que comenta el profe:
Tabs vs Spaces
Gracias
Esa serie está muy buena 😁
**Pug me parece una excelente herramienta para el desarrollo. ** Las ventajas que veo:
**Nota: La versión actual de PUG, no tiene ningún problema con diferenciar tab y espacios. Puedes usar ambos, sin ningún problema. **
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```
Tienes razón Andres, cabe mencionar que también utilizó live server, y es muy practico.
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.
Sigues con el mismo pensamiento? Estoy recién comenzando.
Yo igual, vi esta clase y mi cabeza hizo bom al ver la facilidad y el tiempo que ahorras, ahora soy del team TAB!.
¿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.
VScode también tiene el atajo html:5 de emmet en PUG, no estoy seguro de que tenga otros atajos de emmet
Yo creia lo mismo, instalé esta extension en VSCode y todos los atajos de emmet ahora salen tambien PUG.
Excelente clase, muchas gracias.
Si usan VisualStudio Code recomiendo tener instalado Live Server para ver los cambios automáticamente entre el .pug vs .html:
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 ?
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.
Debo ser al unico que le gusta este preprocesador solo porque le hace sentir como estar programando en python jajaa
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!
Emmet también funciona en PUG, haciendo que sea aun mas fácil la sintaxis.
Qué interesante, pero honestamente no me está agradando pug, quizás en clases futuras mi opinión cambie.
Dam...por qué ?
Quizás sea la costumbre de manejar HTML 🤔
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????
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:
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
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
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?
Por ahora solo nos esta ahorrando codigo, pero creo que nos servira de algo en un futuro.
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
Debes elegir entre utilizar TAB o 2 espacios, si usas ambos no funcionará.
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}```
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
Ya decía yo que era imposible que no hubiera un atajo como este. Muchas gracias :D
Y estoy seguro que hay mas, pero aun no los hemos encontrado
Nunca está demás conocer cosas nuevas aun así cuando creas que no las vas a utilizar.
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.
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