Variables

Clase 12 de 42 • Curso de Preprocesadores CSS

Resumen

Las variables no vienen de forma nativa en HTML pero con PUG podemos usarlas. En ellas almacenamos datos y los reutilizarlos en todo nuestro archivo HTML evitándonos tener que escribir lo mismo una y otra vez.

Gonzalo Pimentel

student•

Mmmmm no me termino de convencer aún para cambiarme a utilizar PUG pero vamos siguiendooo

Miguel Angel Lozano Alvarez

student•

Ya somos dos

Camilo Ernesto Hurtado Cataño

student•

Pienso lo mismo, no encuentro hasta ahora como aplicarlo para un proyecto real

William Condori

student•

sintaxis para declarar una variable en pug.

-var titulo = &quot;Subtítulo Principal&quot;
-var titulos = [&quot;Título Principal&quot;, &quot;Subtitulo 1&quot;, &quot;Subtitulo 2&quot;, &quot;Subtitulo 3&quot;]

formas de llamar a las variables y los arreglos

Addi Alberto Salazar Espinosa

student•

Gracias! :D

Maricruz Pizaña Solano

student•

Excelente, gracias.

Ivan Francisco Barco Perez

student•

mi no convencer pug usar.

Juan Esteban Galvis

student•

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>

Platzi Team

student•

Gran aporte compañero, muchas gracias

Addi Alberto Salazar Espinosa

student•

Super! :)

Héctor Aguilar Mogollan

student•

no veo razón para meter variables en HTML, no encuentro el beneficio

Sergio Naranjo Morales

student•

Víctor Hugo Torres Fierro

student•

¿No? Querrás cambiar todos los textos, títulos etc, a mano uno por uno. Sobre todo en proyectos grandes.

Sneider Sanchez

student•

Ahora puedes poner variables

Bernardo Aguayo Ortega

student•

I know! es asombroso

Asis Melgarejo Lopez

student•

Pug le da funcionalidades de un lenguaje de programación.

Christian David Sánchez

student•

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}

Addi Alberto Salazar Espinosa

student•

Gracias! buen dato!

Maricruz Pizaña Solano

student•

Excelente, gracias.

Luis Angel

student•

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.

César Palma

student•

no compañero, ahora existen los componentes y los template engines son parte de código legacy

Daniel Alejandro Romero

student•

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

Nils Loor

student•

profeSional

Fredy Espinoza Pérez

student•

No me convence pug :(

Nelson Gonzalez Escalante

student•

Por el momento me qeuedo con HTML 5

Ángel David Roque Ayala

student•

jose ortiz

student•

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?

Fer Torres

student•

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.

Andrew Alfaro Carrillo

student•

Intenta poner " ; " al final de cada variable. Ej:

-var titulo = "Titulo Principal";

Lázaro Ventancor Cressatti

student•

Veo que Pug es demasiado complicado, y no representa (hasta ahora) ninguna ventaja significativa a HTML normal...

Víctor Hugo Torres Fierro

student•

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

Sebastian Alejo Becerra

student•

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.

Cristian Leonardo Castañeda Olarte

student•

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

Irving Juárez

student•

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"

Jorge Eduardo González Campos

student•

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.

Franklin Peñafiel

student•

Al usar las variables se puede encontrar muchos beneficios y aquí indicaré en los que más me beneficia a mi por el momento.

Nombre de la página, cuando se empieza a maquetar a veces no nos dan el nombre de la página final, y cambiar a mano todas las veces que se ha llamado es complicado.
Logo de la web. Lo mismo que el anterior.
texto predefinido para párrafos u otras partes de la web. aquí utilizaría mucho los arrays
Imágenes de prueba, ne ha pasado mucho que a veces me dan imágenes para probar y a la semana me la cambian

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.

Aldo Miguel Ortiz Parodi

student•

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

Jonathan Castillo Flores

student•

Gracias Aldo. Estoy siguiendo tus consejos de cerca.

Diego Rubio

student•

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

Israel Aboutboul

student•

Preprocesador = HTML combinado con javascript