A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Variables

12/42
Recursos

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.

Aportes 71

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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

  • sintaxis para declarar una variable en pug.
-var titulo = "Subt铆tulo Principal"
-var titulos = ["T铆tulo Principal", "Subtitulo 1", "Subtitulo 2", "Subtitulo 3"]
  • formas de llamar a las variables y los arreglos

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>

Ahora puedes poner variables

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

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}

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.

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

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

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鈥檛 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 鈥減r谩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

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

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?

Preprocesador = HTML combinado con javascript

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

Por el momento me qeuedo con HTML 5

No me convence pug 馃槮

Es realmente Incre铆ble 馃槑

casi me habia olvidado de esto!

Que buena clase y esos datos de pug lo hacen muy poderoso

primeras variables con pug!!!

驴C贸mo se declara una variable en pug?

Se declara en la parte superior del documento, y se declara asi:

-var nombreVariable = 鈥渧alorVariable鈥
-var titulo = 鈥T铆tulo Principal鈥

驴C贸mo mandarla a llamar?

vas al elemento y haces lo siguiente

h2= nombreVariable
h2= titulo

Muy importante tener el elemento pegado al signo igual:

h2=
p=

Otra forma de llamar la variable es:

h2 #{nombreVariable}
h2 #{titulo}

Aqu铆 es importante dejar un espacio entre el elemento y el #

Declarar varios datos en una variable; un arreglo.

-var titulos = [鈥淭铆tulo principal鈥, 鈥subt1鈥, subt2鈥, subt3鈥漖

Llamando un array:

Hay que tener en cuenta que dentro del array, o arreglo, la primera posicion inicia de 0 en adelante.
Para este array tenemos 4 elementos, posiciones: 0,1,2,3

h2 #{titulos[0]}  = T铆tulo Principal

Si usamos un segundo corchete seleccionaremos:

[el primer elemento] [de ese primer elemento la posici贸n determinada por el n煤mero que des]
En este caso el segundo corchete se entender谩 que es un string o cadena de texto y seleccionar谩 la letra en la posici贸n 1. Siendo i esta.

h2 #{titulos[0] [1]} = i

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.

Genial. Dos opciones para modificar el t铆tulo
-var titulo = "T铆tulo Principal"
h2= titulo
h2 #{titulo}

Las variables en pug son como las variables en cualquier otro lenguaje, si estas viendo esto es probable que quieras ser frontend developer as铆 que haz de saber sobre lo que tratan las variables, pues en pug es muy similar a js

Las variables nos sirven para poder reutilizar codigo mucho m谩s f谩cilmente, lo esencial es que hay que declararlas antes que inicie el html como una muy buena practica y para no confundirnos a la hora de escribir codigo html

Lo que me parece es que todo esto eventualmente ser谩 absorbido por nuevas funcionalidades nativas de HTML.

estoy muy emocionada con este curso, la verdad tenia miedo de hacerlo pero ahora no puedo paraaaaaaaaaar jajaja.
a alguien mas le pasa?

b

No hay tanta diferencia al declarar variables en HTML y Javascript:

HTML
-var titulo = "T茅cnicas para aprender"
JavaScript
var titulo = "T茅cnicas para aprender";

Y para almacenar muchos datos dentro de una variable:

HTML
-var titulos = ["Mejorar tu ingl茅s", "T茅cnicas para aprender",]
JavaScript
var  titulos = ["Mejorar tu ingl茅s", "T茅cnicas para aprender",];

pug es beneficioso al momento de cambiar contenido en proyectos de gran escala, en mini proyectos no tan fundamental utilizarlo

Ya empiezo a entender m谩s los beneficios que da usar pug, esta bastante bueno poder usar variables para evitar tener que cambiar todo. De igual forma esto se ve que es super 煤til para proyectos muuy grandes

12.-Variables

No son nativas de HTML, las podemos usar para t铆tulos y las podemos declarar de la siguiente manera:

  • Se hace antes de empezar el HTML.
  • se usa "-var nombreVariable = valor " para declararla.
  • y para usarla se usa elemento=nombreVariable Pj. h2=titulo. NO USAR ESPACIO DESPU脡S DEL ELEMENTO.
  • otra forma seria 鈥渉2 #{titulo}鈥.

Se pueden declarar varios datos en una misma variable (arreglo) de la siguiente manera:

var t铆tulos = [鈥淭itulo Principal鈥,鈥淪ubtitulo 1鈥,鈥淪ubtitulo 2鈥,鈥淪ubtitulo 3鈥漖

y para usarlo:

h2= t铆tulos[0] el 0 es la posici贸n

Se puede usar h2= t铆tulos[0][1] y nos dar铆a el primer elemento en este caso la letra i

Incre铆ble el poder utilizar variables en HTML. Es verdad que apenas dando mis primeros pasos en Pug todav铆a no le veo el caso de uso. Pero estoy motivado en seguir aprendiendo!

No lo s茅, pero veo a pug como complicarse la vida de manera innecesaria. Siento que todo es mas sencillo en HTML normal, y que cualquier problema lo puedo solucionar mas f谩cil al tener una comunidad mas grande.

Que son?

Las variables en los preprocesadores son muy similares a las variables de JavaScript ya que en ambos puedes ingresar valores dentro de una cajita en la cual puedes poner textos , n煤meros , listas , arreglos etc. , en el caso de uso de las variables en los preprocesadores son muy 煤tiles para poner textos que quiz谩s luego tengas que cambiar y para guardar valores que har谩n tu trabajo mas sencillo al agregar nuevos elementos en tu C贸digo .

Y Como las uso ?

-var text = 鈥淟os valores o datos que quiero poner.鈥

-var text  = "Los valores o datos que quiero poner."

#Pero Tambien podemos poner valores num茅ricos  o incluso listas

-var lista = ["titulo1", "titulo2", 1 , 2 ]
```

En un inicio no me convenc铆a usar este preprocesador, pero al ver que PUG le da un poder de uso de variables como se hace en los lenguajes de programaci贸n le estoy encontrando el sentido sobre todo para proyectos grandes

Es mejor mandar a llamar al variable con #{}

Para mi es mas 谩gil utilizar emmet

Variables

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.


sintaxis para declarar una variable en pug.
-var titulos = ['Titulo Principal', 'Subtitulo 1', 'Subtitulo 2', 'Subtitulo 3']
-var usuario = 'David'
-var enlaces = ['Acerca','Noticias','Contacto']
//Los arreglos tambi茅n son permitidos en las variables.

Cuando trabajamos con PUG podemos acceder a un elemento o posici贸n espec铆fica de la variable:

var titulos = -var titulos = ['Titulo Principal', 'Subtitulo 1', 'Subtitulo 2', 'Subtitulo 3']
h2 #{titulos[0][3]}

Variables en Pug

Las variables son 煤tiles para reutilizar c贸digo. Mas que nada, pug nos ayuda a escribir menos c贸digo y de cierta forma hacerlo de una manera mucho mas limpia. Entonces, cosas a tener en cuenta al momento de usar variables:

  • Escr铆belas siempre al principio de tu c贸digo html. Esto no es obligatorio, pero es buena practica.
  • Las variables pueden ser arrays con Strings u otros tipos de variables.

.

驴C贸mo usar las variables en pug?

Para poder usar las variables en pug, se pueden hacer de dos formas distintas

  • Con el signo = despu茅s del elemento. Ejemplo: p= nombre_variable
  • Con el signo numeral mas corchetes: #{}. Ejemplo: p #{nombre_variable}. En este caso es importante que el numeral tenga un espacio, si no no funciona.

.
Con el numeral y corchetes #{} podemos ingresar a los elementos de un array. Un ejemplo de esto lo podemos ver a continuaci贸n

h2 #{titulos[posicion_elemento_en_array]}

Justo como en JavaScript

Sigue sin convencerme pug no le veo porque aplicarlo pero aqui seguimos porque recien inicia y para aprender de todo

Notas de la clase

Bueno, ya le estoy viendo el poder y utilidad de usar PUG, pero sigo sin saber como compilarlo 馃槄

Prepros es pago ahora. Alguien sabe alguna alternativa?

  • sintaxis para declarar una variable en pug.
-var titulo ="Titulo principal"
-var titulos = ["titulo Principal", "subtitulo 1", "subtitulo 2", "subtitulo 3"]
  • formas de llamar a las variables y los arreglos
Pug:
h2= titulo             
h2 #{titulo}
h2 #{titulos[0]}
h2 #{titulos[0][1]}

HTML:
<h2>Titulo Principal</h2>
<h2>Titulo Principal</h2>
<h2>titulo Principal</h2>
<h2>i</h2>

Este tema de las variables es un game changer definitivamente, hace varios a帽os he visto c贸digo que las utiliza y es brutal.

Dato que es de vital importancia los arreglos en pug pueden contenter distintos tipos de datos

incre铆ble ya me esta gustando pug

Excelente clase, me encant贸. Gracias.

Me gust贸 el poder agregar variables e arrays. Pero, me est谩 costando trabajo no poner (<,> etc鈥). Ya me hab铆a acostumbrado a trabajar de esa forma.

Completamente enamorado de esta forma de hacer html mucho mas facil, dos cosas que he notado no se tiene que dejar espacios despues de cada declaracion de los elementos ya que los interpreta tambien, otra cosa si en algun caso no te te aparece la sintaxis que quieres borra todo y vuelvelo a escri bir asi me funciono todo muy bien

Para agregar comentarios en pug su sintaxis es asi:

<code>             h2= titulo 
            //- h2 #{titulo} > Otra forma de llamar Variables en Pug

el comentario no puede estar en la misma linea de la etiqueta

Me gusto mucho pug aunque aun tarto de no poner los 鈥<>鈥, de ahi todo muy bien.

Buen d铆a a todos, una pregunta 驴Porque me cambia de color todos los elementos de mi HTML al momento de declarar las variable?, 驴saben como podr铆a arreglarlo?

Resulta conveniente usar pug cuando trabajo con bootstrap?

Genial, cada vez se pone mas interesante

estoy fascinado por esta clase!

Debo decir que esta funcionalidad si me atrae. Hasta el momento no me habia convencido.

excelente clase 馃槃

que buenos tips para mejorar nuestro codigo desde html

Ahora si ya comienzo a ver el potencial de usar pug. 馃槷

Personalmente no me gustaba PUG pero ahora esto cambia todo

Utilizar PUG para nombrar variables es un ahorro y orden para proyectos grandes brutal. Solo imagino las millones de posibilidades jajaja.

Buenos datos! 馃槃

Por lo que voy aprendiendo. Aprender a ocupar Pre procesadores, te ayuda a que tu c贸digo sea reutilizable y mejorar la productividad.

Creo que seria una buena herramienta, cuando tengas que manejar 50 sitios web y tengas que ser r谩pido en los requerimientos.

Damm que sencillo es pug y la agilidad que este aporta a la hora de crear un projecto html

驴Los arrays pueden ser multil铆nea?

Me gusta PUG porque es mucho m谩s sencillo, y no tenemos que estar guardando dentro de las llaves de cierre el contenido, hace m谩s r谩pido el trabajo. Y tambi茅n nos da el archivo en HTML para que el equipo pueda observar el trabajo de manera habitual.

-var subtitulo = "Sub-titulo Principal"
-var titulos = ["Titulo Principal", "Subtitulo 1", "Subtitulo2", "Subtitulo3"]
doctype html
html
 head
   meta(charset="UFT-8")
   link(rel="stylesheet", href="css/ejercicio-pug.css")
 body
     h2 #{titulos[0]}
     h2= subtitulo```