Cursos Empresas Blog Live Conf Precios

Bonus: html, css, js

Clase 6 de 25 • Curso de Sistemas de Diseño para Desarrolladores

Clase anteriorSiguiente clase

Juan Castro

teacher•

Pug nos permite utilizar una sintaxis un poco diferente al HTML común y corriente, pero es más amigable, en vez de encerrar las etiquetas dentro de otras etiquetas podemos simplemente tabular (dejar espacios) y automáticamente nuestro html funcionara a la perfección, también podemos utilizar las funciones extends y block para definir layouts o templates que podemos modificar cuando necesitemos:

html
	head
		link(rel="stylesheet" href="...") // los atributos van entre ()
		// al tabular obtenemos un resultado másomenos así:
		// <html>
		// 		<head>
		// 		 <link ...etc />
		// 		</head>
		// </html>
	body
		block content // cuando utilicemos este template podemos definr el contenido de aquí :o

Harold David Avila Sabogal

student•

que buena información gracias

Christian Velázquez

student•

El curso de Preprocesadores, te ayudará a practicar distintas formas de utilizar "PUG", con "SASS", "LESS"...etc. Muy recomendable.

Never Andrés Aparicio Hernandéz

student•

En el curso de preprocesadores que por cierto me gusto, enseñan pug

Juan Esteban Galvis

student•

El curso de preprocesadores explica muy bien lo de Pug y otros preprocesadores para CSS como Sass, Less y Stylus.

Christian Velázquez

student•

Te dejo el "link", para la herramienta Prepros (https://prepros.io/)

Antony C. Medina

student•

Creo que me saltado clases... Aunque no las veo, ¿Hay clases sobre Pug? ¿En qué momento instaló todo eso?😱

Juan Manuel Martínez Ortiz

student•

Lo instalo todo en la clase anterior "Instalación y flujos de trabajo"

Harold David Avila Sabogal

student•

todo esta en las clases anteriores

Alvise Leal

student•

Pug se puede tomar como un motor de plantillas ¿no? Porque actualmente utilizo Nunjucks, ya que había leído que es muy potente (aún no le exprimo todo el jugo). Pero tengo la curiosidad de saber que tan versátil es Pug funcionaría como motor de plantillas y ver sus principales pros y contras.

Harold David Avila Sabogal

student•

interesante pregunta

Danelia Sanchez Sanchez

student•

Pug es muy estricto en cuanto los espacios y tabuladores. No puedes mezclar ambos. Tener cuidado con la indentación ya que podría haber errores en la compilación.

Natalia Gutierrez

student•

Esta es la documentacion del sistema de plantillas pug: https://github.com/pugjs/pug

Andres Alvarez Becerra

student•

Hola, si quieren aprender un poco más sobre el uso de bloques, les recomiendo este video y la lista de videos sobre este tema en el siguiente link: https://www.youtube.com/watch?v=CNwvi8jbgcc&list=PLROIqh_5RZeCFvLRw6_L7IGXFU_GahWhL&index=9

Juan Diego Prieto Rodríguez

student•

Que interesante es ver como se puede trabajar con HTML de distintas formas, esta pequeña explicación de como usar pug me motivo bastante a estudiar el curso con mucho detenimiento :D

Beto Toro

student•

Les recomiendo muchisimo pasar primero por el curso de Preprocesadores

Mario Alejandro Crespo Reyes

student•

Esto es lo que me sale luego de darle al comando npm install express

iMac-de-Tribu:~ Tribu$ npm install express npm WARN saveError ENOENT: no such file or directory, open '/Users/tribu/package.json' npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN enoent ENOENT: no such file or directory, open '/Users/tribu/package.json' npm WARN tribu No description npm WARN tribu No repository field. npm WARN tribu No README data npm WARN tribu No license field.

express@4.17.1 added 50 packages from 37 contributors and audited 126 packages in 1.375s found 0 vulnerabilities

Daniel Virguez

student•

esto quiere decir, en /Users/tribu/ no ha podido crear el documento packages.json, ok cuando ejecutaste el comando npm install puede que haya echo falta que incluyeras el sub elemento que da permisos a esta instancia, puede ser que hizo falta : 1 ) npm install : ejecutar primero. sudo npm install si no has instalado o no haz echo el llamado para crear el arbol de dependecias ejecuta : sudo npm init

2 ) el archivo tiene permisos de ejecución o escritura y no de lectura

cuando hayas creado el archivo con npm init el package.json te darás cuenta que dentro del archivo hay attributos que se relacionan con el error, que no es error sino que indica que no estan agreganto los elementos al atributo : npm WARN enoent ENOENT: no such file or directory, open '/Users/tribu/package.json’ npm WARN tribu No description npm WARN tribu No repository field. npm WARN tribu No README data npm WARN tribu No license field

Ejemplo del package.json

{
  "name": "html",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "dependencies": {
    
  },
  "devDependencies": {

  },
  "scripts": {
    
  },
  "keywords": [],
  "author": "",
  "license": ""
}

cuando haya creado este archivo ejecuta npm install y ahi es donde puedes instalar las dependencias.

espero que hayas solucionado.

saludos.

Wilson Orlando Capacho Carmona

student•

Te tengo la solución....a mi me pasaba lo mismo...pero era porque no estaba ejecutando el comando desde la carpeta donde estaba el proyecto...entre a la carpeta donde tenia todas las dependencias y archivos que se descargan y desde esa raiz ejecute el comando nmp start y me salio...claro al principio no me salio pero espere un rato y refresque la pagina y ya me salio normal...de todos modos prueba esta opcion

Kevin Parra Lopez

student•

doctype html
-var title = 'Design System🤞';

html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

![](

Diego Alvaro Parra Abad

student•

Soy Rulótico González y quizás me recuerden por cursos como HTML y CSS, Sistemas de Diseño y más Sistemas de Diseño. Será para la siguiente iteración.

Naldo Duran

student•

f