SlideShare una empresa de 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

Más contenido relacionado

Destacado

Destacado (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
 

Similar 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
 

Similar 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

Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024GiovanniJavierHidalg
 
Arenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxArenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxJOSEFERNANDOARENASCA
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxpabonheidy28
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxNombre Apellidos
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxazmysanros90
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA241531640
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafiosFundación YOD YOD
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfSergioMendoza354770
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxaylincamaho
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadMiguelAngelVillanuev48
 
R1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaR1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaarkananubis
 
El uso de las tic en la vida ,lo importante que son
El uso de las tic en la vida ,lo importante  que sonEl uso de las tic en la vida ,lo importante  que son
El uso de las tic en la vida ,lo importante que son241514984
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.241514949
 
Mapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMidwarHenryLOZAFLORE
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdfIsabellaMontaomurill
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...FacuMeza2
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx241523733
 
El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELmaryfer27m
 
FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx241522327
 
dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptMiguelAtencio10
 

Último (20)

Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024
 
Arenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxArenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptx
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docx
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptx
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafios
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidad
 
R1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaR1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en mina
 
El uso de las tic en la vida ,lo importante que son
El uso de las tic en la vida ,lo importante  que sonEl uso de las tic en la vida ,lo importante  que son
El uso de las tic en la vida ,lo importante que son
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.
 
Mapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptx
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx
 
El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFEL
 
FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx
 
dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.ppt
 

Haml y Sass