SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (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
 

Ähnlich wie 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
 

Ähnlich wie 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
 

Kürzlich hochgeladen

Desarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - EstradaDesarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - EstradaRicardoEstrada90
 
Tipos de datos en Microsoft Access de Base de Datos
Tipos de datos en Microsoft Access de Base de DatosTipos de datos en Microsoft Access de Base de Datos
Tipos de datos en Microsoft Access de Base de DatosYOMIRAVILLARREAL1
 
Uso de las TIC en la vida cotidiana .
Uso de las TIC en la vida cotidiana       .Uso de las TIC en la vida cotidiana       .
Uso de las TIC en la vida cotidiana .itzyrivera61103
 
De Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptxDe Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptxdoloresolmosantiago
 
innovacion banking & warehouse 2024 blog
innovacion banking & warehouse 2024 bloginnovacion banking & warehouse 2024 blog
innovacion banking & warehouse 2024 blogManuel Diaz
 
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptxAVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptxdulcemonterroza
 
CARPETA PEDAGOGICA DE TOE.docbbbbbbbbbbbx
CARPETA PEDAGOGICA DE TOE.docbbbbbbbbbbbxCARPETA PEDAGOGICA DE TOE.docbbbbbbbbbbbx
CARPETA PEDAGOGICA DE TOE.docbbbbbbbbbbbxCesarAntonioGascoTiz1
 
Introduccion-a-la-electronica-industrial.pptx
Introduccion-a-la-electronica-industrial.pptxIntroduccion-a-la-electronica-industrial.pptx
Introduccion-a-la-electronica-industrial.pptxcj12paz
 
el uso de las TIC en la vida cotidiana.pptx
el uso de las TIC en la vida cotidiana.pptxel uso de las TIC en la vida cotidiana.pptx
el uso de las TIC en la vida cotidiana.pptx221112876
 
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUALJORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUALGuadalinfoHuscarGuad
 
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...dramosbrise1403
 
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptxTarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptxVICTORMANUELBEASAGUI
 
herramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaherramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaJadeVilcscordova
 
Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024NicolleAndrade7
 
Imágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la informaciónImágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la informaciónUniversidad de Sonora
 
Actividad 6/Las TIC en la Vida Cotidiana.
Actividad 6/Las TIC en la Vida Cotidiana.Actividad 6/Las TIC en la Vida Cotidiana.
Actividad 6/Las TIC en la Vida Cotidiana.241534381
 
editorial de informática de los sueños.docx
editorial de informática de los sueños.docxeditorial de informática de los sueños.docx
editorial de informática de los sueños.docxssusere34b451
 
VelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiC
VelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiCVelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiC
VelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiC6dwwcgtpfx
 
BUSCADORES DE INTERNET (Universidad de Sonora).
BUSCADORES DE INTERNET (Universidad de Sonora).BUSCADORES DE INTERNET (Universidad de Sonora).
BUSCADORES DE INTERNET (Universidad de Sonora).jcaballerosamayoa
 
10°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-810°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-8antoniopalmieriluna
 

Kürzlich hochgeladen (20)

Desarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - EstradaDesarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - Estrada
 
Tipos de datos en Microsoft Access de Base de Datos
Tipos de datos en Microsoft Access de Base de DatosTipos de datos en Microsoft Access de Base de Datos
Tipos de datos en Microsoft Access de Base de Datos
 
Uso de las TIC en la vida cotidiana .
Uso de las TIC en la vida cotidiana       .Uso de las TIC en la vida cotidiana       .
Uso de las TIC en la vida cotidiana .
 
De Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptxDe Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptx
 
innovacion banking & warehouse 2024 blog
innovacion banking & warehouse 2024 bloginnovacion banking & warehouse 2024 blog
innovacion banking & warehouse 2024 blog
 
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptxAVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
 
CARPETA PEDAGOGICA DE TOE.docbbbbbbbbbbbx
CARPETA PEDAGOGICA DE TOE.docbbbbbbbbbbbxCARPETA PEDAGOGICA DE TOE.docbbbbbbbbbbbx
CARPETA PEDAGOGICA DE TOE.docbbbbbbbbbbbx
 
Introduccion-a-la-electronica-industrial.pptx
Introduccion-a-la-electronica-industrial.pptxIntroduccion-a-la-electronica-industrial.pptx
Introduccion-a-la-electronica-industrial.pptx
 
el uso de las TIC en la vida cotidiana.pptx
el uso de las TIC en la vida cotidiana.pptxel uso de las TIC en la vida cotidiana.pptx
el uso de las TIC en la vida cotidiana.pptx
 
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUALJORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
 
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
 
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptxTarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
 
herramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaherramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el tema
 
Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024
 
Imágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la informaciónImágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la información
 
Actividad 6/Las TIC en la Vida Cotidiana.
Actividad 6/Las TIC en la Vida Cotidiana.Actividad 6/Las TIC en la Vida Cotidiana.
Actividad 6/Las TIC en la Vida Cotidiana.
 
editorial de informática de los sueños.docx
editorial de informática de los sueños.docxeditorial de informática de los sueños.docx
editorial de informática de los sueños.docx
 
VelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiC
VelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiCVelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiC
VelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiC
 
BUSCADORES DE INTERNET (Universidad de Sonora).
BUSCADORES DE INTERNET (Universidad de Sonora).BUSCADORES DE INTERNET (Universidad de Sonora).
BUSCADORES DE INTERNET (Universidad de Sonora).
 
10°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-810°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-8
 

Haml y Sass