Top Banner
CSS eficaz y SEO friendly con {LESS}
15

LESS y SEO (TechFest)

Jul 14, 2015

Download

Technology

Victor Santiago
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: LESS y SEO (TechFest)

CSS eficaz y SEO friendly con {LESS}

Page 2: LESS y SEO (TechFest)

¿Qué es eso del {LESS} ?

¿ Un pre-procesador de código CSS ?

CSS$ lessc entrada.less > salida.css

Page 3: LESS y SEO (TechFest)

Trabajar con {LESS} es casi como escribir CSS:

.contenedor .foo {

/* Reglas CSS */

}

CSS generado:

Page 4: LESS y SEO (TechFest)

{LESS} tiene variables:

CSS generado:

.foo {

color: red; blue;background: red; blue;

}

CSS generado:

Page 5: LESS y SEO (TechFest)

{LESS} tiene mixins:

?.circulo (@radio, @color) {

height: @radio;width: @radio;border-radius: @radio;background: @color;

}

.circular {

.circulo(200px, green);

}

Page 6: LESS y SEO (TechFest)

{LESS} tiene funciones:

lighten(blue, 30%);

darken(red, 30%);

Y también hace aritmética:

width: 100px;width: 100px + 1em;

Page 7: LESS y SEO (TechFest)

{LESS} usa @import y namespaces:

#namespace {

.mixin-1 {

// Reglas CSS

}

.mixin-2 {

// Reglas CSS

}…

}

#namespace > .mixin-1 ();

#ie-hacks {

.inline-block () {display:inline-block;*zoom:1;*display:inline;

}

.clearfix () {clear: both; overflow: auto;Zoom:1;

}

}

@import 'ie-fix.less';

.contenedor {

.img-left{

float:left;

}

#ie-hacs > clearfix();

}

Page 8: LESS y SEO (TechFest)

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);

Page 9: LESS y SEO (TechFest)

La palabra mágica: when

Page 10: LESS y SEO (TechFest)

La palabra mágica: when

.bucle(@it) when (@it > 0) {

.span-@{it} {

// CSS de .span-X}

.bucle((@counter – 1));

}

.loop(4);

Page 11: LESS y SEO (TechFest)

Organizando el código con @import:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere rhoncus suscipit. Praesent diam dolor, imperdiet sed est et, rutrum mattis ligula. Donec commodo purus, eu placerat nisi dapibus in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere rhoncus suscipit.

Normalize, ie-hacks ...

layout.less

modules.less

custom.less

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere rhoncus suscipit. Praesent diam dolor, imperdiet sed est et, rutrum mattis ligula. Donec commodo purus, eu placerat nisi dapibus in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere rhoncus suscipit.

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere rhoncus suscipit. Praesent diam dolor, imperdiet sed est et, rutrum mattis ligula. Donec commodo purus, eu placerat nisi dapibus in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere rhoncus suscipit.

Lorem ipsum dolor sit amet, consectetur

Page 12: LESS y SEO (TechFest)

HTML 5 y el problema del SEO

HTML 5 quiere ser semántico

SEO necesita ser semántico

Page 13: LESS y SEO (TechFest)

¿Qué aporta {LESS}?

header, section, footer {.row ();

}

section > article {.span-3 ();

}

@import 'layout.less'

Page 14: LESS y SEO (TechFest)

Más {LESS} ?

Page 15: LESS y SEO (TechFest)

OpenKnowledgeNetwork.com