Variables
Clase 12 de 42 • Curso de Preprocesadores CSS
Contenido del curso
Gonzalo Pimentel
student•
hace 6 años
Miguel Angel Lozano Alvarez
student•
hace 6 años
Camilo Ernesto Hurtado Cataño
student•
hace 6 años
Clase 12 de 42 • Curso de Preprocesadores CSS
Contenido del curso
Gonzalo Pimentel
Miguel Angel Lozano Alvarez
Camilo Ernesto Hurtado Cataño
William Condori
Addi Alberto Salazar Espinosa
Maricruz Pizaña Solano
Ivan Francisco Barco Perez
Juan Esteban Galvis
Platzi Team
Addi Alberto Salazar Espinosa
Héctor Aguilar Mogollan
Sergio Naranjo Morales
Víctor Hugo Torres Fierro
Sneider Sanchez
Bernardo Aguayo Ortega
Asis Melgarejo Lopez
Christian David Sánchez
Addi Alberto Salazar Espinosa
Maricruz Pizaña Solano
Luis Angel
César Palma
Daniel Alejandro Romero
Nils Loor
Fredy Espinoza Pérez
Nelson Gonzalez Escalante
Ángel David Roque Ayala
Jose Ortiz
Fernando Torres
Andrew Alfaro Carrillo
Lázaro Ventancor Cressatti
Víctor Hugo Torres Fierro
Sebastian Alejo Becerra
Cristian Leonardo Castañeda Olarte
Irving Juárez
Jorge Eduardo González Campos
Franklin Peñafiel
Aldo Miguel Ortiz Parodi
Jonathan Castillo Flores
Diego Rubio
Israel Aboutboul
Mmmmm no me termino de convencer aún para cambiarme a utilizar PUG pero vamos siguiendooo
Ya somos dos
Pienso lo mismo, no encuentro hasta ahora como aplicarlo para un proyecto real
-var titulo = "Subtítulo Principal" -var titulos = ["Título Principal", "Subtitulo 1", "Subtitulo 2", "Subtitulo 3"]
Gracias! :D
Excelente, gracias.
mi no convencer pug usar.
Para concatenar texto y variables es con '+' así por ejemplo:
-var Subtitulo = "Subtitulo" -var ArraySubtitulos = [ Subtitulo +" 1", Subtitulo +" 2", Subtitulo +" 3"] p #{ArraySubtitulos[0]} p #{ArraySubtitulos[1]} p #{ArraySubtitulos[2]}
Resultado en HTML:
<p>Subtitulo 1</p> <p>Subtitulo 2</p> <p>Subtitulo 3</p>
Gran aporte compañero, muchas gracias
Super! :)
no veo razón para meter variables en HTML, no encuentro el beneficio
x2
¿No? Querrás cambiar todos los textos, títulos etc, a mano uno por uno. Sobre todo en proyectos grandes.
Ahora puedes poner variables
I know! es asombroso
Pug le da funcionalidades de un lenguaje de programación.
Apuntes
Cuando renderizamos las variables, tenemos que colocar un igual, el cual debe esta pegado al nombre de la etiqueta. Ejemplo: h1= titulo
Otra forma h2 #{titulo}
Gracias! buen dato!
Excelente, gracias.
Muchas personas aquí tal vez comentan que no ven la utilidad al momento de usar pug, pero, considerando que existen proyectos realmente grandes en los que uno puede encontrar numerosos HTML con cientos y hasta miles de líneas de código, HTML se hace bastante difícil de leer y de mantener, por lo que Pug ofrece algo más legible a la vista de un programador, utilizando menos caracteres (como por ejemplo eliminando los cierres de etiqueta) y eliminando las redundancias de textos (al usar variables por ejemplo), además de que la identación correcta del código obligatoria en Pug ayuda a entender mucho más rápido el código que lo que pueda estar escrito en un HTML.
no compañero, ahora existen los componentes y los template engines son parte de código legacy
yo era de los que no estaba convencido de usar pug pero después de esta clase:
Novato(tú y yo): html y css son leguajes de programación PROFECIONAL: NO LO SON… a no ser que uses preprocesadores
profeSional
No me convence pug :(
Por el momento me qeuedo con HTML 5
cuando declaro una variable con el -var me cambian todos los colores de la etiqueta y todo me queda en blanco, es muy dificil leer el codigo asi, sin embargo las variables funcionan. a alguien mas le paso esto y encontro una solucion?
José, yo estoy utilizando VS Code con el plugin/theme de Synthwave '84 y aunque sí ocurre el cambio de color, no es un cambio total a blanco y es legible el código. Pruebalo, tal vez te sirva.
Intenta poner " ; " al final de cada variable. Ej:
-var titulo = "Titulo Principal";
Veo que Pug es demasiado complicado, y no representa (hasta ahora) ninguna ventaja significativa a HTML normal...
¿no?, ¿qué tal ahorrar tiempo de tu vida? Todo esfuerzo que libere tiempo para alocarlo en más actividades productivas es una gran ventaja amigo. ¿Complicado? es mucho más sencillo que el HTML "vanilla"; quizá su semejanza con JavaScript te lo haga parecer complicado pero te aseguro que no lo es.
no es tan complicado, pero si concuerdo que no le veo una gran ventaja. A menos que la web sea gigante, pero gigante enserio, no es mucho el tiempo que te podes ahorrar.
Probando me di cuenta que no es tan necesario colocar un arreglo con subtitulo 1, sub2, sub3 … Sino solamente uno y concatenar el numero asi.
-var subtitulos = ["subtitulo"] // no es necesario el arreglo xd h1 #{subtitulos[0] + " 1"} // subtitulo 1 h1 #{tsubitulos[0] + " 2"} // subtitulo 2 h1 #{subtitulos[0] + " 3"} // subtitulo 3
Eso esta cool, pero a mi me gusta mas como lo hace el profe, creo que se ve mas limpio que si lo hago con + " 1", + " 2", + " 3"
No tiene sentido utilizar arreglos en ese caso... podrías haberle puesto
- var subitutlos = "subtitulo"
Le quitas el sentido a utilizar arreglos de esa manera.
Al usar las variables se puede encontrar muchos beneficios y aquí indicaré en los que más me beneficia a mi por el momento.
La mayoría de beneficios que encuentro, de momento, es para cuando nos piden información genérica y el logo, con la práctica iré analizando si hay otros beneficios.
12. Variables:
Les comparto el código de la clase en .pug, a los que les parece muy raro usar variables con HTML, piénsenlo como aplicar el principio DRY (don't repeat yourself), y poder reutilizar el código, esto aplica a proyectos de mediana o gran escala, no aplica a páginas pequeñas donde lo más "práctico" será usar HTML puro.
Código PUG:
-var titulo = "Titulo Principal"; -var titulos = ["Título Principal", "Subtítulo 1", "Subtítulo 2", "Subtítulo 3"]; 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 #{titulos[0]} 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
Gracias Aldo. Estoy siguiendo tus consejos de cerca.
PUG esta buenisimo creo que lo implementaré de aqui en adelante a todos mis proyectos personales.
el profesor es muy agradable, y maneja muy bien los contenidos del curso
Preprocesador = HTML combinado con javascript