CSS eficaz y SEO friendly con {LESS}
¿Qué es eso del {LESS} ?
¿ Un pre-procesador de código CSS ?

$ lessc entrada.less > salida.css

CSS
Trabajar con {LESS} es casi como escribir CSS:
CSS generado:

.contenedor .foo {
/* Reglas CSS */
}
{LESS} tiene variables:
CSS generado::
generado
.foo {
color: red; blue;
background: red; blue;
}
{LESS} tiene mixins:

.circulo (@radio, @color) {
height: @radio;
width: @radio;
border-radius: @radio;
background: @color...
{LESS} tiene funciones:
darken(red, 30%);
lighten(blue, 30%);

Y también hace aritmética:

width: 100px;
width: 100px + 1e...
{LESS} usa @import y namespaces:
#namespace {
#ie-hacks {
.mixin-1 {
.inline-block () {
display:inline-block;
// Reglas CS...
Las palabra mágica @media:
.contenedor {
// Reglas CSS
@media only screen
and (min-device-width : 768px)
and (max-device-w...
La palabra mágica: when
La palabra mágica: when
.bucle(@it) when (@it > 0) {
.span-@{it} {
// CSS de .span-X
}
.bucle((@counter – 1));
}
.loop(4);
Organizando el código con @import:
Lorem ipsum dolor
Lorem ipsum dolor
sit amet, consectetur
sit amet,elit. Duis
consectet...
HTML 5 y el problema del SEO

HTML 5 quiere ser semántico

SEO necesita ser semántico
¿Qué aporta {LESS}?
@import 'layout.less'
header, section, footer {
.row ();
}

section > article {
.span-3 ();
}
Más {LESS} ?
OpenKnowledgeNetwork.com
Upcoming SlideShare
Loading in …5
×

LESS y SEO (TechFest)

274 views
198 views

Published on

Presentación de la charla "CSS eficaz y SEO friendly" del Tech3Fest 2014

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
274
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

LESS y SEO (TechFest)

  1. 1. CSS eficaz y SEO friendly con {LESS}
  2. 2. ¿Qué es eso del {LESS} ? ¿ Un pre-procesador de código CSS ? $ lessc entrada.less > salida.css CSS
  3. 3. Trabajar con {LESS} es casi como escribir CSS: CSS generado: .contenedor .foo { /* Reglas CSS */ }
  4. 4. {LESS} tiene variables: CSS generado:: generado .foo { color: red; blue; background: red; blue; }
  5. 5. {LESS} tiene mixins: .circulo (@radio, @color) { height: @radio; width: @radio; border-radius: @radio; background: @color; } .circular { .circulo(200px, green); } ?
  6. 6. {LESS} tiene funciones: darken(red, 30%); lighten(blue, 30%); Y también hace aritmética: width: 100px; width: 100px + 1em;
  7. 7. {LESS} usa @import y namespaces: #namespace { #ie-hacks { .mixin-1 { .inline-block () { display:inline-block; // Reglas CSS *zoom:1; }*display:inline; } .mixin-2 { .clearfix () { clear: both;CSS // Reglas overflow: auto; }Zoom:1; …} } } @import 'ie-fix.less'; .contenedor { .img-left{ #namespace > .mixin-1 (); float:left; } #ie-hacs > clearfix(); }
  8. 8. Las palabra mágica @media: .contenedor { // Reglas CSS @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { // Rectificamos para iPad } } @import "library.less" screen and (max-width: 400px);
  9. 9. La palabra mágica: when
  10. 10. La palabra mágica: when .bucle(@it) when (@it > 0) { .span-@{it} { // CSS de .span-X } .bucle((@counter – 1)); } .loop(4);
  11. 11. Organizando el código con @import: Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur sit amet,elit. Duis consectetur adipiscing posuere rhoncus suscipit. adipiscing elit. Duis Praesent rhoncus posuere diam dolor, suscipit. imperdiet sed est et, Praesent diam dolor, rutrum mattis ligula. Donec commodo purus, imperdiet sed est et, eu placerat rutrum in. nisi ligula. mattis dapibus Donec commodo purus, Lorem ipsum dolor eu placerat nisi sit amet, consectetur dapibus in. Duis adipiscing elit. Normalize, ie-hacks ... custom.less layout.less posuere rhoncus suscipit. Lorem ipsum dolor sit amet, dolor Lorem ipsum consectetur sit amet, consectetur adipiscing elit. Duis posuere rhoncus suscipit. modules.less
  12. 12. HTML 5 y el problema del SEO HTML 5 quiere ser semántico SEO necesita ser semántico
  13. 13. ¿Qué aporta {LESS}? @import 'layout.less' header, section, footer { .row (); } section > article { .span-3 (); }
  14. 14. Más {LESS} ?
  15. 15. OpenKnowledgeNetwork.com

×