SlideShare uma empresa Scribd logo
1 de 28
Rails para diseñadores
¿Qué es Haml y Sass? Alternativa a .erb Según el sitio oficial de Haml,  está basado en la idea de que el “código de descripcion de páginas debe ser hermoso”. Pensando en la simplicidad de Ruby y la elegancia de Rails.
Hamlgenera.html Sassgenera.css
El objetivo de Haml y Sass es un incremento de productividad, que se logra por medio de tres factores:
1 Simplificación del código. Haml simplemente requiere escribir menos código
2 Representación visual de la jerarquía del documento. Esto permite que el código sea visualmente más claro, así como eliminar la redundancia de cerrar todas las etiquetas. A cambio se tiene la desventaja de que el intérprete deHaml es MUY estricto en cuanto a la indentación.
3 Compatibilidad. Haml puede coexistir con las vistas rhtml e incluso mezclar código ERb y Haml
Hay que indentar o indentar no hay otra opción
¿Cómo se escribe Haml?
Html <tag>Contenido</tag> Haml %tagcontenido
Html <h1>Hola mundo!</h1> Haml %h1 Hola mundo
¿Cómo se escribe Sass?
Comentarios
Compass es un verdadero framework para el trabajo de hojas de estilo (css) con algunas cosas que lenguajes de comunes manejan. Este framework soporta variables, estilos predefinidos que soportan parámetros y operaciones aritméticas. Esto debido a que utiliza Sass que es parte del proyecto Haml
Fin

Mais conteúdo relacionado

Destaque

Destaque (20)

Taller de html
Taller de htmlTaller de html
Taller de html
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
SEO - Posicionamiento en buscadores
SEO - Posicionamiento en buscadoresSEO - Posicionamiento en buscadores
SEO - Posicionamiento en buscadores
 
Diseño Web 02
Diseño Web 02Diseño Web 02
Diseño Web 02
 
Conceptos basicos prog web introduccion a html y css
Conceptos basicos prog web   introduccion a html y cssConceptos basicos prog web   introduccion a html y css
Conceptos basicos prog web introduccion a html y css
 
Ruby on Rails
Ruby on RailsRuby on Rails
Ruby on Rails
 
Code Blast 2012 - Ruby on Rails v.2012
Code Blast 2012 - Ruby on Rails v.2012Code Blast 2012 - Ruby on Rails v.2012
Code Blast 2012 - Ruby on Rails v.2012
 
Desarrollo de Apps Web en Ruby on Rails
Desarrollo de Apps Web en Ruby on RailsDesarrollo de Apps Web en Ruby on Rails
Desarrollo de Apps Web en Ruby on Rails
 
Ruby on Rails - ETyC 2011
Ruby on Rails - ETyC 2011Ruby on Rails - ETyC 2011
Ruby on Rails - ETyC 2011
 
CSS Tutorial
CSS TutorialCSS Tutorial
CSS Tutorial
 
Inicio al HTML
Inicio al HTMLInicio al HTML
Inicio al HTML
 
Curso CSS Avanzado
Curso CSS AvanzadoCurso CSS Avanzado
Curso CSS Avanzado
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
 
Diapositivas Html
Diapositivas HtmlDiapositivas Html
Diapositivas Html
 
Introducción a HTML y CSS
Introducción a HTML y CSSIntroducción a HTML y CSS
Introducción a HTML y CSS
 
Introducción al lenguaje HTML
Introducción al lenguaje HTMLIntroducción al lenguaje HTML
Introducción al lenguaje HTML
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?
 
Curso HTML y CSS, parte 2
Curso HTML y CSS, parte 2Curso HTML y CSS, parte 2
Curso HTML y CSS, parte 2
 
Html+css 2013
Html+css 2013Html+css 2013
Html+css 2013
 

Semelhante a Haml y Sass

Lineas separadoras etiquetas hr comentarios html atributos noshade
Lineas separadoras etiquetas hr comentarios html atributos noshadeLineas separadoras etiquetas hr comentarios html atributos noshade
Lineas separadoras etiquetas hr comentarios html atributos noshadenoelia alarcon
 
Curso Html no creado por mi
Curso Html no creado por miCurso Html no creado por mi
Curso Html no creado por midiegoacalero0
 
El diseño web, sus tendencias y criterios de evaluación
El diseño web, sus tendencias y criterios de evaluaciónEl diseño web, sus tendencias y criterios de evaluación
El diseño web, sus tendencias y criterios de evaluaciónJhon Edison Quintero Santa
 
Html wendy martinez
Html wendy martinezHtml wendy martinez
Html wendy martinezcaradeburro
 
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas webalbafa1995
 
Diversas características generales
Diversas características generalesDiversas características generales
Diversas características generalesga12007
 
Diferencia de html y xml
Diferencia de html y xmlDiferencia de html y xml
Diferencia de html y xmlgracejaz07
 
Karol cortez normas apa
Karol cortez normas apaKarol cortez normas apa
Karol cortez normas apaKarolCortes7
 

Semelhante a Haml y Sass (15)

html
htmlhtml
html
 
Ht ml
Ht mlHt ml
Ht ml
 
Lineas separadoras etiquetas hr comentarios html atributos noshade
Lineas separadoras etiquetas hr comentarios html atributos noshadeLineas separadoras etiquetas hr comentarios html atributos noshade
Lineas separadoras etiquetas hr comentarios html atributos noshade
 
Introducción al HTML
Introducción al HTML Introducción al HTML
Introducción al HTML
 
Curso Html no creado por mi
Curso Html no creado por miCurso Html no creado por mi
Curso Html no creado por mi
 
El diseño web, sus tendencias y criterios de evaluación
El diseño web, sus tendencias y criterios de evaluaciónEl diseño web, sus tendencias y criterios de evaluación
El diseño web, sus tendencias y criterios de evaluación
 
Html wendy martinez
Html wendy martinezHtml wendy martinez
Html wendy martinez
 
Formato de guia undecimo sistemas
Formato de guia undecimo sistemasFormato de guia undecimo sistemas
Formato de guia undecimo sistemas
 
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas web
 
¿Qué es HTML5?
¿Qué es HTML5?¿Qué es HTML5?
¿Qué es HTML5?
 
Diversas características generales
Diversas características generalesDiversas características generales
Diversas características generales
 
Estructurabasica
EstructurabasicaEstructurabasica
Estructurabasica
 
Html – básico 1
Html – básico 1Html – básico 1
Html – básico 1
 
Diferencia de html y xml
Diferencia de html y xmlDiferencia de html y xml
Diferencia de html y xml
 
Karol cortez normas apa
Karol cortez normas apaKarol cortez normas apa
Karol cortez normas apa
 

Último

Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...JohnRamos830530
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxJorgeParada26
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanamcerpam
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxAlan779941
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfvladimiroflores1
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxMiguelAtencio10
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21mariacbr99
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITMaricarmen Sánchez Ruiz
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estossgonzalezp1
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.FlorenciaCattelani
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfAnnimoUno1
 

Último (11)

Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 

Haml y Sass