Seminario "Adaptando CSS a los programadores: SASS y Compass", presentado por Luis Calvo el 30 de octubre 2013 en la Universidad CEU San Pablo de Madrid.
Mas información: http://www.paradigmatecnologico.com/seminarios/adaptando-css-a-los-programadores-sass-y-compass/
Una charla introductoria a Sass donde se descubrirán novedades en el código y una gran variedad de recursos y herramientas que te permiten modificar el diseño de tu web o aplicación, haciendo que resulte más cómodo, rápido, eficaz, personalizado y fácilmente llamativo. “Don’t repeat yourself” y “CSS con superpoderes” son una filosofía y una de las descripciones de Sass. Siendo así, ¿por qué no probarlo? Una forma sencilla de introducir a los asistentes a la maquetación web o ampliar sus conocimientos.
Variables nativas CSS, Front-End con superpoderes para tu WordPressWordPress Tarragona
Haremos una introducción a las variables CSS y veremos algunos ejemplos sobre cómo usarlas para poder sacarles todo su potencial: tanto por parte del programador como del visitante de la web. A continuación veremos cómo podemos aplicarlo fácilmente a WordPress aprendiendo a crear un plugin o un tema hijo con unas pocas líneas de código.
Pequeña introducción al uso de los Frameworks CSS.
Desde la problemática al desarrollo CSS al empleo de algunos frameworks (1kb CSS Grid, 960.gs, Blueprint, Foundation y Bootstrap) como mejora de la productividad.
La arquitectura de microservicios persigue maximizar la adaptabilidad de las soluciones mediante la distribución de las responsabilidades del software en servicios con ciclo de vida independiente.
Lograr la independencia de los microservicios es clave para beneficiarse de las ventajas de la arquitectura. Esto exige un profundo entendimiento del dominio funcional, lo que se logra mediante DDD.
Por otro lado la arquitectura hexagonal nos permite estructurar el software de manera que la capa de código relacionada con el dominio funcional no se vea interferida por aspectos tecnológicos, es decir, que dicha capa sólo exprese el Ubiquitous Language, es decir el lenguaje del modelo en según lo llama DDD.
Dicha separación en capas y el invertir las dependencias permite además garantizar la máxima portabilidad del código.
¿Qué vamos a ver?
1. Beneficios
2. Domain Driven Design.
- Conceptos - Big Picture.
- Conceptos - Code architecture.
- Event Storming.
3. Clean Code Architecture.
- Hexagonal Architecture.
- Onion Architecture.
Bots 3.0: Dejando atrás los bots conversacionales con Dialogflow.Paradigma Digital
Atención personalizada y automatización de operativas con IA de forma sencilla con DialogFlow. Al terminar esta charla serás capaz de crear un bot con Dialogflow que solucione tareas sencillas.
En esta charla veremos:
- Cuales son las necesidades de negocio que satisface este tipo de soluciones
- Alternativas en el mercado
- Solución de la necesidad con DialogFlow
Ponente: Alex Asensio - Business Lead en Paradigma Digital
Pragmático y siempre enfocado a objetivos de negocio. Enamorado de la tecnología pero también con la forma en que entregamos software a nuestros clientes, basada en el "empirismo". Tech + Biz mano a mano es la fórmula de éxito que queremos compartir con ellos.
Más contenido relacionado
Similar a Adaptando CSS a los programadores: SASS y Compass
Una charla introductoria a Sass donde se descubrirán novedades en el código y una gran variedad de recursos y herramientas que te permiten modificar el diseño de tu web o aplicación, haciendo que resulte más cómodo, rápido, eficaz, personalizado y fácilmente llamativo. “Don’t repeat yourself” y “CSS con superpoderes” son una filosofía y una de las descripciones de Sass. Siendo así, ¿por qué no probarlo? Una forma sencilla de introducir a los asistentes a la maquetación web o ampliar sus conocimientos.
Variables nativas CSS, Front-End con superpoderes para tu WordPressWordPress Tarragona
Haremos una introducción a las variables CSS y veremos algunos ejemplos sobre cómo usarlas para poder sacarles todo su potencial: tanto por parte del programador como del visitante de la web. A continuación veremos cómo podemos aplicarlo fácilmente a WordPress aprendiendo a crear un plugin o un tema hijo con unas pocas líneas de código.
Pequeña introducción al uso de los Frameworks CSS.
Desde la problemática al desarrollo CSS al empleo de algunos frameworks (1kb CSS Grid, 960.gs, Blueprint, Foundation y Bootstrap) como mejora de la productividad.
La arquitectura de microservicios persigue maximizar la adaptabilidad de las soluciones mediante la distribución de las responsabilidades del software en servicios con ciclo de vida independiente.
Lograr la independencia de los microservicios es clave para beneficiarse de las ventajas de la arquitectura. Esto exige un profundo entendimiento del dominio funcional, lo que se logra mediante DDD.
Por otro lado la arquitectura hexagonal nos permite estructurar el software de manera que la capa de código relacionada con el dominio funcional no se vea interferida por aspectos tecnológicos, es decir, que dicha capa sólo exprese el Ubiquitous Language, es decir el lenguaje del modelo en según lo llama DDD.
Dicha separación en capas y el invertir las dependencias permite además garantizar la máxima portabilidad del código.
¿Qué vamos a ver?
1. Beneficios
2. Domain Driven Design.
- Conceptos - Big Picture.
- Conceptos - Code architecture.
- Event Storming.
3. Clean Code Architecture.
- Hexagonal Architecture.
- Onion Architecture.
Bots 3.0: Dejando atrás los bots conversacionales con Dialogflow.Paradigma Digital
Atención personalizada y automatización de operativas con IA de forma sencilla con DialogFlow. Al terminar esta charla serás capaz de crear un bot con Dialogflow que solucione tareas sencillas.
En esta charla veremos:
- Cuales son las necesidades de negocio que satisface este tipo de soluciones
- Alternativas en el mercado
- Solución de la necesidad con DialogFlow
Ponente: Alex Asensio - Business Lead en Paradigma Digital
Pragmático y siempre enfocado a objetivos de negocio. Enamorado de la tecnología pero también con la forma en que entregamos software a nuestros clientes, basada en el "empirismo". Tech + Biz mano a mano es la fórmula de éxito que queremos compartir con ellos.
En esta nueva entrega sobre service-mesh veremos el que probablemente se convertirá en el producto de referencia: Istio.
Analizaremos las funcionalidades que aporta, su arquitectura interna, la integración con productos de terceros así como su repercusión
dentro de las arquitecturas actuales. Realizaremos algunos ejemplos para mostrar la funcionalidad y configuración
Ponente:
Abraham Rodríguez está especializado en soluciones cloud native con arquitecturas de microservicios, stack con el que ha trabajado en diversos proyectos. Apasionado defensor de todo lo relacionado con cloud, metodologías ágiles, software libre y devops.
En esta presentación hablamos de Linkerd, uno de los pioneros en el ámbito de las "arquitecturas Service Mesh". Haremos un repaso por la historia de este producto, conoceremos sus principales funcionalidades y tendremos una parte práctica en la que mostraremos su integración en arquitecturas distribuidas junto a Docker y Kubernetes.
¿Cómo hago que mis APIs sean usables?
A través de un ejemplo desarrollado en Spring veremos como realizar todo el proceso de diseño aplicando un conjunto de buenas prácticas que te ayuden en el proceso de toma de decisión a la hora de enfrentarte al diseño de APIs.
En este meetup vamos a analizar uno de los pilares básicos en el proceso de transformación digital de las empresas: API Management. Para ello, explicaremos en qué consiste esta estrategia, y los diferentes conceptos y componentes que intervienen en la misma.Además, para completar esta visión con un caso práctico, mostraremos un ejemplo de implementación mediante uno de los productos OpenSource de API Management más exitoso del mercado: WSO2.
https://www.meetup.com/Microservicios
¿Cómo se despliega y autoescala Couchbase en Cloud? ¡Aprende de manera práctica!Paradigma Digital
En el pasado Meetup, presentamos Couchbase de manera general, pero ha llegado el momento de ir ahondando en los detalles del producto para conocer todas sus capacidades. Esto nos permitirá estar en mejor disposición para adoptarlo en nuestros proyectos.
En esta ocasión, se hablará de la capa de operaciones y despliegue de Couchbase aunque no con un enfoque tradicional en máquinas físicas, sino siguiendo las buenas prácticas del mercado. Explicaremos y haremos el despliegue en Google Cloud con escalabilidad horizontal elástica y automática.
Para llevar a cabo esto haremos uso, entre otras, de las siguientes tecnologías: Google Cloud, Kubernetes, Python y, por supuesto, Couchbase.
Pondremos a prueba nuestra infraestructura con una pequeña aplicación, si queréis ver los resultados, no os lo podéis perder!
Google Analytics es una herramienta de analítica la que se conoce sólo una parte de su potencial. Además de medir audiencias y su comportamiento, Google Analytics permite priorizar las inversiones en marketing online, recoger comportamientos de Single Page Applications y visualizar datos offline, por ejemplo de CRM y combinarlos con los de visitas online. También es posible recoger datos en tiempo real de ventas, por ejemplo de ecommerce y de dispositivos físicos como bluetooth beacons. Las funcionalidades de Google Analytics, en combinación con Big Query y otros servicios de Google Cloud Platform, la convierte en una de las plataformas más interesantes de analítica para la transformación digital.
Si quieres ver el vídeo en el que fue usada esta presentación, pulsa aquí: https://www.youtube.com/watch?v=2mfIU-NXGXI
Para ver la convocatoria en nuestra web, clic aquí: https://www.paradigmadigital.com/eventos/usar-google-analytics/
La convocatoria a través del grupo de Meetup.com, clic aquí: https://www.meetup.com/es-ES/Front-end-Developers-Madrid/events/231793469/
¿Cómo definir el roadmap de transformación digital? En Paradigma llevamos más de 20 años ayudando a grandes compañías en su camino hacia la digitalización.
Esta presentación nos muestra qué es la programación reactiva, en qué consiste, qué nos permite hacer y por qué está tan de moda. Además, podemos ver el uso concreto de esta programación utilizando RxJava.
Autor: Juan Pablo González de Gracia.
En Paradigma creemos que los grandes dragones digitales han desbancado a las empresas tradicionales. La clave para combatir esos dragones es la transformación digital.
1. Adaptando CSS a los programadores
SASS y COMPASS
30 de octubre de 2013 - Escuela Politécnica Superior de la Universidad CEU San Pablo
Luis Calvo Díaz (@LuisCalvoDiaz)
2. Adaptando CSS a los programadores SASS y COMPASS
Índice
1.
2.
3.
4.
5.
6.
Introducción
Instalar Sass
Sass básico
Compass
Instalar Compass
Usando Compass
Luis Calvo Díaz (@LuisCalvoDiaz)
Senior Front-end developer
lcalvo@paradigmatecnologico.com
3. Adaptando CSS a los programadores SASS y COMPASS
1
Introducción
4. 1. Introducción
Syntactically Awesome Style Sheets
Meta-lenguaje construido sobre CSS que
se utiliza para describir el estilo de un
documento de manera limpia y estructurada
Nos ayuda a reducir la repetición de
código y a ser más productivos
Don’t repeat
yourself!!
Adaptando CSS a los programadores SASS y COMPASS
5. 1. Introducción
no
CSS
es un lenguaje
de programación
simple
CSS es muy
,
no necesitamos usar
ninguna herramienta
Adaptando CSS a los programadores SASS y COMPASS
6. 1. Introducción
no puedes usar variables
no puedes hacer opera-
no se puede debuggear
no necesitas usar la consola
ciones entre valores
Adaptando CSS a los programadores SASS y COMPASS
7. Adaptando CSS a los programadores SASS y COMPASS
2
Instalar Sass
8. 2. Instalar Saas
Para poder instalar Sass necesitamos tener
instalado Ruby.
• En Mac, Ruby ya está instalado
• Para Windows http://rubyinstaller.org
Tras instalar Ruby abrimos la consola y
tecleamos:
$ gem install sass
Para procesar y generar el css:
$ sass --watch estilos.scss:estilos.css
Adaptando CSS a los programadores SASS y COMPASS
16. 3. Sass básico
Mixins (II)
SASS
CSS
@mixin envuelve {
.wrapper {
border:1px solid #bed1a3;
padding:10px;
float:left;
& + .wrapper {
margin-left:15px;
}
@content;
}
}
@include envuelve {
h1 {
font-size:20px;
}
div {
width:15%;
p {
line-height:15px;
}
}
}
.wrapper {
border: 1px solid #bed1a3;
padding: 10px;
float: left;
}
.wrapper + .wrapper {
margin-left: 15px;
}
.wrapper h1 {
font-size: 20px;
}
.wrapper div {
width: 15%;
}
.wrapper div p {
line-height: 15px;
}
Adaptando CSS a los programadores SASS y COMPASS
17. 3. Sass básico
Funciones
SASS
CSS
@function porcent($target, $container)
{
@return ($target / $container) * 100%;
}
.caja {
width: 50%;
}
.caja {
width: porcent(480px, 960px)
}
Hay un buen número de Funciones predefinidas en Sass.
Más detalles en http://sass-lang.com/documentation/Sass/Script/Functions.html
Adaptando CSS a los programadores SASS y COMPASS
21. 4. Compass
Compass es un framework para trabajar con
Sass.
Consiste es un conjunto de partials,
funciones y mixins
•
•
•
•
•
•
CSS3
Helpers
Layout
Reset
Typography
Utilities
Más detalles en
http://compass-style.org/reference/compass/
Adaptando CSS a los programadores SASS y COMPASS
22. Adaptando CSS a los programadores SASS y COMPASS
5
Instalar Compass
23. 5. Instalar Compass
Para instalar Compass
$ gem install compass
Para crear un nuevo proyecto en Compass:
$ compass create <nombreDelProyecto>
Compass genera las carpetas para los archivos .scss / .css así como
un archivo config.rb con parámetros de compilación y uso.
config.rb
css_dir = "css" # Carpeta en donde guardar los .css
sass_dir = "sass" # Carpeta en donde guardar los .scss
images_dir = "images" # Carpeta en donde glas imagenes
output_style = :expanded # :expanded, :nested, :compact, :compressed
Adaptando CSS a los programadores SASS y COMPASS
24. Adaptando CSS a los programadores SASS y COMPASS
6
Usando Compass
25. 6. Usando Compass
Compilar
Nos situamos en la carpeta donde se ubica el fichero config.rb
$ compass compile
También podemos hacer que “vigile” por si hay cambios:
$ compass watch
Si Compass está ha compilado o está “vigilando” no es necesario
hacerlo con Sass
Adaptando CSS a los programadores SASS y COMPASS
26. 6. Usando Compass
El módulo CSS3
Compass
@import "compass/css3";
.box_gradient {
@include background-image(linear-gradient(top, #444, #999));
}
.box_transition {
@include transition(all 0.3s ease-out);
}
.box_shadow {
@include box-shadow(0px 0px 4px #fff);
}
Adaptando CSS a los programadores SASS y COMPASS
27. 6. Usando Compass
El módulo CSS3
CSS
.box_gradient {
background-image: -webkit-linear-gradient(top,
background-image:
-moz-linear-gradient(top,
background-image:
-ms-linear-gradient(top,
background-image:
-o-linear-gradient(top,
background-image:
linear-gradient(top,
}
.box_transition {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.box_shadow {
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
#444444,
#444444,
#444444,
#444444,
#444444,
#999999);
#999999);
#999999);
#999999);
#999999);
Más mixins del módulo CSS3 en:
http://compass-style.org/reference/compass/css3/
Adaptando CSS a los programadores SASS y COMPASS
28. 6. Usando Compass
Usando CSS Sprites
1 Tener generados los
iconos, individualmente,
con la misma extensión
2 Crear el fichero .scss
@import "compass/utilities/sprites"
@import "browsers/*.png";
Adaptando CSS a los programadores SASS y COMPASS
29. 6. Usando Compass
Usando CSS Sprites
Podemos indicar la orientación del sprite con “$<map>-layout”
$browsers-layout:horizontal;
@import "browsers/*.png";
$browsers-layout:vertical;
@import "browsers/*.png";
Adaptando CSS a los programadores SASS y COMPASS
$browsers-layout:diagonal;
@import "browsers/*.png";
31. 6. Usando Compass
Extensiones
Otra ventaja de Compass es la posibilidad de crear extensiones que
pueden ser compartidas
Fancy buttons
960 grid
Susy (responsive grid)
Compass Recipes
compass-magick
Patterner
compass-html5-boilerplate
compass-twitter-bootstrap
compass-css-lightbox
Adaptando CSS a los programadores SASS y COMPASS
32. Adaptando CSS a los programadores SASS y COMPASS
7
¿Preguntas?
33. Esto es todo
Muchas gracias :)
Luis Calvo Díaz (@LuisCalvoDiaz)
Senior Front-end developer
lcalvo@paradigmatecnologico.com