O documento discute pré-processadores CSS e ferramentas. Ele aborda as fraquezas do CSS, características e sintaxes de pré-processadores como Sass, Less e Stylus, além de conceitos como variáveis, mixins, imports e sprites. O documento também trata de erros comuns e ferramentas como Compass.
Internet of Things (IoT) y su evolución aplicada a la salud: Internet of Me -...GeneXus
Repasaremos el concepto de Internet of Things, su estado del arte y tendencias. Posteriormente se desarrollará la evolución de este concepto aplicado a la industria de la Salud donde se convierte en Internet of Me. Analizaremos su integración con la Historia Clínica Electrónica y sus perspectivas de aplicación en Uruguay.
Zach Shelby, Director of Technology for IoT at ARM and previously the co-founder of Sensinode gives and an in-depth tutrorial of the Constrained Application Protocol (CoAP) for the Internet of Things. Updates to this tutorial made on April 30th, 2014.
Internet of Things (IoT) y su evolución aplicada a la salud: Internet of Me -...GeneXus
Repasaremos el concepto de Internet of Things, su estado del arte y tendencias. Posteriormente se desarrollará la evolución de este concepto aplicado a la industria de la Salud donde se convierte en Internet of Me. Analizaremos su integración con la Historia Clínica Electrónica y sus perspectivas de aplicación en Uruguay.
Zach Shelby, Director of Technology for IoT at ARM and previously the co-founder of Sensinode gives and an in-depth tutrorial of the Constrained Application Protocol (CoAP) for the Internet of Things. Updates to this tutorial made on April 30th, 2014.
Less é uma linguagem dinamica de estilo, básicamente baseado em CSS.
Nos slide irei abordadar conceitos sobre a liguagem e suas vantagens de se usar Less em seus projetos.
Hoje em dia quando o assunto é CSS muito se fala em modularização e arquitetura de código. Mas o que de fato é isso? Quais abordagens podemos utilizar para tornar o código do nosso CSS mais organizado?
Nessa apresentação procuro passar uma visão geral das técnicas mais populares, detalhando suas particularidades e a ideologia por traz de cada uma.
Também falo de técnicas mais recentes que abordam o desenvolvimento de CSS de perspectivas diferentes e algumas dicas gerais de como deixar seu código mais flexível a mudanças.
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012André Paulovich
Nesta palestra, vamos abordar um tema muito comum e de fácil aprendizagem. Todo desenvolvedor que trabalhe com internet hoje em dia, precisa aprender a tornar a linguagem de marcação CSS (Cascading Style Sheets) utilizada para definir a apresentação dos documentos HTML em uma linguagem completamente nova e poderosa, capaz de oferecer grande produtividade. Vamos explorar diferentes frameworks como SASS e LESS e suas vantagens e desvantagens.
Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018Renato Groffe
Apresentação sobre o uso do Azure Cosmos DB como solução NoSQL para Desenvolvedores de Software. Palestra realizada durente o evento "From Hero to Zero: NoSQL & Azure Cosmos DB", um evento que aconteceu em São Paulo-SP no dia 17/03/2018.
Material de apoio do curso de verão sobre Ruby on Rails.
Os slides fazem mais sentido com as explicações em sala mas, ainda assim, podem ser usados como material para consulta.
SMACSS e CSS faz BEM, muito BEM! Veja como trabalhar melhor com o seu front-end. Como organizar, como usar padrões e como ser feliz e fazer o BEM usando SMACSS.
Less é uma linguagem dinamica de estilo, básicamente baseado em CSS.
Nos slide irei abordadar conceitos sobre a liguagem e suas vantagens de se usar Less em seus projetos.
Hoje em dia quando o assunto é CSS muito se fala em modularização e arquitetura de código. Mas o que de fato é isso? Quais abordagens podemos utilizar para tornar o código do nosso CSS mais organizado?
Nessa apresentação procuro passar uma visão geral das técnicas mais populares, detalhando suas particularidades e a ideologia por traz de cada uma.
Também falo de técnicas mais recentes que abordam o desenvolvimento de CSS de perspectivas diferentes e algumas dicas gerais de como deixar seu código mais flexível a mudanças.
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012André Paulovich
Nesta palestra, vamos abordar um tema muito comum e de fácil aprendizagem. Todo desenvolvedor que trabalhe com internet hoje em dia, precisa aprender a tornar a linguagem de marcação CSS (Cascading Style Sheets) utilizada para definir a apresentação dos documentos HTML em uma linguagem completamente nova e poderosa, capaz de oferecer grande produtividade. Vamos explorar diferentes frameworks como SASS e LESS e suas vantagens e desvantagens.
Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018Renato Groffe
Apresentação sobre o uso do Azure Cosmos DB como solução NoSQL para Desenvolvedores de Software. Palestra realizada durente o evento "From Hero to Zero: NoSQL & Azure Cosmos DB", um evento que aconteceu em São Paulo-SP no dia 17/03/2018.
Material de apoio do curso de verão sobre Ruby on Rails.
Os slides fazem mais sentido com as explicações em sala mas, ainda assim, podem ser usados como material para consulta.
SMACSS e CSS faz BEM, muito BEM! Veja como trabalhar melhor com o seu front-end. Como organizar, como usar padrões e como ser feliz e fazer o BEM usando SMACSS.
4. Cronograma
•Fraquezas do CSS
•Caracteristicas dos Pré-processadores
•Ferramentas gráficas
•Plugins
•Erros comuns
•Técnicas e Fluxos de trabalho
sexta-feira, 5 de outubro de 12
6. 3 grandes fraquezas do CSS
•Falta de recursos essenciais básicos
ex.: variáveis ou operadores matemáticas
sexta-feira, 5 de outubro de 12
7. 3 grandes fraquezas do CSS
•Falta de recursos essenciais básicos
ex.: variáveis ou operadores matemáticas
•Dificuldade de manutenção
sexta-feira, 5 de outubro de 12
8. 3 grandes fraquezas do CSS
•Falta de recursos essenciais básicos
ex.: variáveis ou operadores matemáticas
•Dificuldade de manutenção
•Repetições do mesmo código
sexta-feira, 5 de outubro de 12
16. Trabalhar com multiplos CSS
•Essencial para a manutenção.
•Facilita o trabalho colaborativo.
sexta-feira, 5 de outubro de 12
17. Trabalhar com multiplos CSS
•Essencial para a manutenção.
•Facilita o trabalho colaborativo.
•Requer uma organização colaborativa.
sexta-feira, 5 de outubro de 12
18. Trabalhar com multiplos CSS
•Essencial para a manutenção.
•Facilita o trabalho colaborativo.
•Requer uma organização colaborativa.
•Precisamos otimizar esse fluxo de trabalho.
sexta-feira, 5 de outubro de 12
23. Caracteristicas
•Compatibilidade entre Less, Sass e Stylus
sexta-feira, 5 de outubro de 12
24. Caracteristicas
•Compatibilidade entre Less, Sass e Stylus
•Não aumenta a capacidade do CSS
sexta-feira, 5 de outubro de 12
25. Caracteristicas
•Compatibilidade entre Less, Sass e Stylus
•Não aumenta a capacidade do CSS
•Melhora o fluxo de trabalho
sexta-feira, 5 de outubro de 12
34. Operadores e Funcões
Matemáticos e operações com cor
width: 25px * 4 + 100px / 2 - 50px; // = 100px
color: #990033 + #666666; // = #FF66CC
sexta-feira, 5 de outubro de 12
35. Operadores e Funcões
Matemáticos e operações com cor
width: 25px * 4 + 100px / 2 - 50px; // = 100px
color: #990033 + #666666; // = #FF66CC
Funcões para cores
$azul_claro: lighten($meu_azul, 20%)
$azul_gremio: saturate($meu_azul, 50%)
sexta-feira, 5 de outubro de 12
37. Mixins
Qual a diferença entre função e mixins ?
sexta-feira, 5 de outubro de 12
38. Mixins
Qual a diferença entre função e mixins ?
• Função retorna um valor processado
• Mixin retorna código CSS
sexta-feira, 5 de outubro de 12
39. Mixins
Qual a diferença entre função e mixins ?
• Função retorna um valor processado
• Mixin retorna código CSS
@mixin border-radius($radius: 10px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.botao {
@include border-radius(5px)
}
sexta-feira, 5 de outubro de 12
43. Herança
CSS padrão
p,ul,li {
margin: 10px; padding: 5px;
}
sexta-feira, 5 de outubro de 12
44. Herança
CSS padrão
p,ul,li {
margin: 10px; padding: 5px;
}
Sass e Stylus LESS
.block { .block {
margin: 10px; margin: 10px;
padding: 5px; padding: 5px;
} }
.p { .p {
@extend .block; .block;
border-color: red; border-color: red;
} }
.ul, li { .ul, li {
@extend .block; .block;
overflow: hidden; overflow: hidden;
} }
sexta-feira, 5 de outubro de 12
45. Herança
CSS padrão
p,ul,li {
margin: 10px; padding: 5px;
}
Sass e Stylus LESS
.block { .block {
margin: 10px; margin: 10px;
padding: 5px; padding: 5px;
} }
.p { .p {
@extend .block; .block;
border-color: red; border-color: red;
} }
.ul, li { .ul, li {
@extend .block; .block;
overflow: hidden; overflow: hidden;
} }
sexta-feira, 5 de outubro de 12
46. 3 grandes fraquezas do CSS
•Falta de recursos essenciais básicos
ex.: variáveis ou operadores matemáticas
•Dificuldade de manutenção
•Repetições do mesmo código
sexta-feira, 5 de outubro de 12
48. Imports e minificação
@import não tem custos de performance
@import “colors.css”;
@import “typography.css”;
@import “layout.css”;
CSS limpos e minificados
.glb-block{margin:0 auto;padding:
0;overflow:hidden;}.p{color:#0000FF;margin:
0;padding:0;}
sexta-feira, 5 de outubro de 12
50. Erros Comuns
•Preciso de Ruby ou NodeJS no backend.
sexta-feira, 5 de outubro de 12
51. Erros Comuns
•Preciso de Ruby ou NodeJS no backend.
•Sass é escrito em Ruby
•LESS e Stylus são escritos em JS
sexta-feira, 5 de outubro de 12
52. Erros Comuns
•Preciso de Ruby ou NodeJS no backend.
•Sass é escrito em Ruby
•LESS e Stylus são escritos em JS
•Ruby e NodeJS em produção.
sexta-feira, 5 de outubro de 12
53. Erros Comuns
•Preciso de Ruby ou NodeJS no backend.
•Sass é escrito em Ruby
•LESS e Stylus são escritos em JS
•Ruby e NodeJS em produção.
Ambiente de desenvolvimento
sexta-feira, 5 de outubro de 12
61. Qual escolher ?
Justificativa fraca
•Sintaxe parecida com o CSS padrão
sexta-feira, 5 de outubro de 12
62. Qual escolher ?
Justificativa fraca
•Sintaxe parecida com o CSS padrão
•Twitter Bootstrap é em LESS
sexta-feira, 5 de outubro de 12
63. Qual escolher ?
Justificativa fraca
•Sintaxe parecida com o CSS padrão
•Twitter Bootstrap é em LESS
sexta-feira, 5 de outubro de 12
64. Qual escolher ?
Justificativa fraca
•Sintaxe parecida com o CSS padrão
•Twitter Bootstrap é em LESS
•Twitter Bootstrap compilado em Sass !
sexta-feira, 5 de outubro de 12
65. Qual escolher ?
Justificativa fraca
•Sintaxe parecida com o CSS padrão
•Twitter Bootstrap é em LESS
•Twitter Bootstrap compilado em Sass !
Justificativa forte
•Funcionalidades disponíveis (Sass e Stylus)
sexta-feira, 5 de outubro de 12
66. Qual escolher ?
Justificativa fraca
•Sintaxe parecida com o CSS padrão
•Twitter Bootstrap é em LESS
•Twitter Bootstrap compilado em Sass !
Justificativa forte
•Funcionalidades disponíveis (Sass e Stylus)
•Comunidade e documentação (Sass e LESS)
sexta-feira, 5 de outubro de 12
67. Qual escolher ?
Justificativa fraca
•Sintaxe parecida com o CSS padrão
•Twitter Bootstrap é em LESS
•Twitter Bootstrap compilado em Sass !
Justificativa forte
•Funcionalidades disponíveis (Sass e Stylus)
•Comunidade e documentação (Sass e LESS)
•Ruby vs JS, qual sua escolha ?
sexta-feira, 5 de outubro de 12
83. Fluxo de trabalho
Apenas o Sass
> gem install sass
> sass --watch <path>
sexta-feira, 5 de outubro de 12
84. Fluxo de trabalho
Apenas o Sass
> gem install sass
> sass --watch <path>
Sass + Compass
> gem install compass
> compass create <path>
> compass watch
sexta-feira, 5 de outubro de 12
91. Editores e IDEs
Com suporte ao Sass, Less, Stylus
VIM, Emacs, Sublime Text 2, TextMate, Eclipse, NetBeans,
WebStorm, Visual Studio, Pycharm, RadRails, RubyMine,
Komodo, Coda, GEdit...
sexta-feira, 5 de outubro de 12
93. Estrutura de um projeto
scss/ css/
global.scss global.css
style.scss style.css
global/
_colors.scss
_helpers.scss
_mixins.scss
_reset.scss
_typography.scss
components/
_buttons.scss
_popups.scss
sexta-feira, 5 de outubro de 12
97. Técnicas de uso
Conversões
De pixel para “em”
font-size: (18px / $context) * 1em // 1.125em
sexta-feira, 5 de outubro de 12
98. Técnicas de uso
Conversões
De pixel para “em”
font-size: (18px / $context) * 1em // 1.125em
De pixel para %
$ct-width: 1440px;
.responsive-grid {
width: percentage(200px / $ct-width)
margin: percentage(15px / $ct-width)
}
sexta-feira, 5 de outubro de 12
100. Técnicas de uso
Aninhamento e Media Queries
.glb-menu {
display: inline-block;
@media screen and (max-width: 480px) {
display: block;
}
}
Sass 3.2 - mixin-like
.glb-menu {
display: inline-block;
@media respond-to(small-screen){display: block;}
}
sexta-feira, 5 de outubro de 12
115. Independente de qual for a sua
escolha, os pré-processadores de CSS
estão aqui para ajudar você a ter um
fluxo de trabalho mais organizado e
otimizado.
sexta-feira, 5 de outubro de 12
116. kenjiyamamoto.com
kenji@corp.globo.com
@kenjiyamamoto
sexta-feira, 5 de outubro de 12 obrigado
117. SASS / COMPASS
http://sass-lang.com/
http://thesassway.com/
LESS
http://lesscss.org/
STYLUS
http://learnboost.github.com/stylus/
Ferramentas:
http://incident57.com/codekit/
http://compass.handlino.com/
http://crunchapp.net/
http://livereload.com/
http://mhs.github.com/scout-app/
Referências:
http://css-tricks.com/sass-vs-less/
http://bit.ly/x8BaZy
sexta-feira, 5 de outubro de 12