Qué es Sprites y por qué debería interesarme

Qué es Sprites
y por qué debería interesarme

para Laboratorio de Medios UDP

por Maximiliano Martin - www.maximiliano.cl

Qué es Sprites

www.maximiliano.cl

Qué es Sprites

Espíritus

www.maximiliano.cl

Qué es Sprites

Espíritus Enmascarados

www.maximiliano.cl

Qué es Sprites


Video Juegos

www.maximiliano.cl

Qué es Sprites


Video Juegos

Mapas de Bit

www.maximiliano.cl

Qué es Sprites


Video Juegos Transparentes

Mapas de Bit

www.maximiliano.cl

Qué es Sprites

1980

www.maximiliano.cl

Qué es Sprites

1980 1992

www.maximiliano.cl

Qué es Sprites
3D

www.maximiliano.cl

Sprites en Web

www.maximiliano.cl

Sprites en Web

2003
Petr Stanicek
Republica Checa
wellstyled.com

www.maximiliano.cl

Sprites en Web

2003 2004
Petr Stanicek Dave Shea
Republica Checa Canada
wellstyled.com alistapart.com

www.maximiliano.cl

Menú HTML/CSS

www.maximiliano.cl

Menú HTML/CSS

button.gif

button-over.gif

button-active.gif

www.maximiliano.cl

Menú HTML/CSS
Antes Despues

www.maximiliano.cl

Menú HTML/CSS
Antes Despues
<a href=""
onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapIm
age('Image16','','imag/boto/boto_menu_empr_b.jpg',1)">
<img src="imag/boto/boto_menu_empr_a.jpg" alt=""
name="Image16" width="148" height="21" border="0"></a>

www.maximiliano.cl

Menú HTML/CSS
Antes Despues
<a href=""

<body id=”” onLoad="MM_preloadImages('imag/boto/
boto_engl_over_01.jpg','imag/boto/boto_av_over.jpg','imag/
boto/boto_menu_empr_b.jpg','imag/boto/
boto_menu_hoga_b.jpg','imag/boto/boto_menu_vest_b.jpg','imag/
boto/boto_menu_vent_b.jpg','imag/boto/
boto_menu_cont_b.jpg')">

www.maximiliano.cl

Menú HTML/CSS
Antes Despues
<a href=""

<body id=”” onLoad="MM_preloadImages('imag/boto/

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i+
+) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j+
+].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
www.maximiliano.cl x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
if(!(x=d[n])&&d.all)

Menú HTML/CSS
Antes Despues
<a href=""
onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapIm <a href="" alt=””>Menu item 1</a>

<body id=”” onLoad="MM_preloadImages('imag/boto/ <body id=””>

<script language="JavaScript" type="text/JavaScript"> JavaScript para otros fines por ejemplo JQuery
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i+
+) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j+
+].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
www.maximiliano.cl x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
if(!(x=d[n])&&d.all)

Menú HTML/CSS
Comportamiento con
Pseudoclases

#menu a {
background: url("button.gif") 0 0 no-repeat;
}

#menu a:hover {
background-position: -157px 0;
}

#menu a:active {
}

www.maximiliano.cl

Menú HTML/CSS
Comportamiento con
Pseudoclases

#menu a {
#menu a background: url("button.gif") 0 0 no-repeat;
}

#menu a:hover {
}

#menu a:active {
}

www.maximiliano.cl

Menú HTML/CSS
Comportamiento con
Pseudoclases

#menu a {
}

#menu a:hover {
#menu a:hover background-position: -157px 0;
}

#menu a:active {
}

www.maximiliano.cl

Menú HTML/CSS
Comportamiento con
Pseudoclases

#menu a {
}

#menu a:hover {
}

#menu a:active #menu a:active {
}

www.maximiliano.cl

Objetivo
Optimización de nuestro sitio
ahorrando ancho de banda

www.maximiliano.cl

Objetivo

Rollover
Javascript

HTML JS

www.maximiliano.cl

Objetivo

Rollover Rollover
Javascript CSS/imágenes

HTML JS HTML CSS

www.maximiliano.cl

Objetivo

Rollover Rollover Rollover
Javascript CSS/imágenes SpritesCSS

HTML JS HTML CSS HTML CSS

www.maximiliano.cl

Objetivo

www.maximiliano.cl

Objetivo
Reducir las peticiones al servidor

www.maximiliano.cl

Objetivo

HTML
Conexión + Petición + Respuesta
por cada archivo CSS

www.maximiliano.cl

Objetivo

HTML

Cargar 10 elementos de 4kb
NO es igual a cargar 1 de 40kb

www.maximiliano.cl

Objetivo

HTML

Cargar 10 elementos de 4kb
NO es igual a cargar 1 de 40kb

10 elementos de 4kb
es mucho más que
1 de 16kb
www.maximiliano.cl

Menú HTML/CSS
Antes 10 peticiones
HTTP

www.maximiliano.cl

Menú HTML/CSS
40 KB
Antes 10 peticiones
HTTP en imágenes

www.maximiliano.cl

Menú HTML/CSS
40 KB
Antes 10 peticiones
HTTP en imágenes

Despues
1 petición
HTTP

www.maximiliano.cl

Menú HTML/CSS
40 KB
Antes 10 peticiones
HTTP en imágenes

Despues 16 KB
1 petición
HTTP en imágenes

www.maximiliano.cl

Ejemplos
Google / resultado de búsqueda
Sprites: 1
Nombre Archivo: nav_logo7.png
Peso: 8 Kb
Dimensiones: 164 x 106px
Cantidad de imágenes: 32
Tipo: Iconos, Logos, Botones.

www.maximiliano.cl

Ejemplos
Yahoo.com
Sprites: 14
Nombre Archivo: trough_2.2.gif
Peso: 20 Kb
Tipo: Iconos

www.maximiliano.cl

Ejemplos4 x 4300px
Background
Yahoo.com
Sprites: 14
Peso: 20 Kb
Tipo: Iconos

www.maximiliano.cl

Ejemplos4 x 4300px
Background
Yahoo.com 108 x 27px
Botones
Sprites: 14
Peso: 20 Kb
Tipo: Iconos

www.maximiliano.cl

Ejemplos4 x 4300px
Background
Yahoo.com 108 x 27px
Botones
Sprites: 14
Nombre Archivo: trough_2.2.gif 45 x 1100px
Peso: 20 Kb Iconos
Tipo: Iconos

www.maximiliano.cl

Ejemplos
Sofatutor.de
Sprites: 8
Nombre Archivo: iconTran.png
Peso: 4 Kb
Tipo: Iconos

www.maximiliano.cl

Ejemplos
Sofatutor.de 430 x 3200px Botones
Sprites: 8
Nombre Archivo: iconTran.png
Peso: 4 Kb
Tipo: Iconos

www.maximiliano.cl

Y cómo se produce?

www.maximiliano.cl

Y cómo se produce?
Interfaces Front Sprites

www.maximiliano.cl

Y cómo se produce?
Interfaces

www.maximiliano.cl

Y cómo se produce?
Interfaces
Identiﬁcar
✓Contenido
✓Diseño

www.maximiliano.cl

Y cómo se produce?
Interfaces
Identiﬁcar Reconocer
✓Contenido ✓Botones
✓Diseño ✓Iconos
✓Backgrounds
✓Ilustraciones
✓Esquina
✓

www.maximiliano.cl

Y cómo se produce?
Interfaces
Identiﬁcar Reconocer y Asociar
✓Contenido ✓Botones
✓Diseño ✓Iconos
✓Backgrounds
✓Ilustraciones
✓Esquina
✓

www.maximiliano.cl

Y cómo se produce?
Interfaces
Identiﬁcar Reconocer y Asociar Visualizar
✓Contenido ✓Botones ✓Contextos
✓Diseño ✓Iconos ✓Situaciones
✓Backgrounds ✓Estados
✓Ilustraciones
✓Esquina
✓

www.maximiliano.cl

Y cómo se produce?
Interfaces
Identiﬁcar Reconocer y Asociar Visualizar Proyectar
✓Contenido ✓Botones ✓Contextos ✓Escalabilidad
✓Diseño ✓Iconos ✓Situaciones ✓Imponderables
✓Backgrounds ✓Estados
✓Ilustraciones
✓Esquina
✓

www.maximiliano.cl

Y cómo se produce?
Interfaces Front
HTML Imagenes Tipo CSS

www.maximiliano.cl

Y cómo se produce?
Interfaces Front

Escribir Clases
✓Botones
✓Iconos
✓Backgrounds
✓Ilustraciones
✓Esquina
✓etc.

www.maximiliano.cl

Y cómo se produce?
Interfaces Front

Escribir Clases Deﬁnir reglas
✓Botones ✓Repeat
✓Iconos ✓Background-position
✓Backgrounds ✓Display
✓Ilustraciones ✓Border
✓Esquina ✓Margin
✓etc. ✓Padding
✓etc.

www.maximiliano.cl

Y cómo se produce?
Interfaces Front

Escribir Clases Deﬁnir reglas Crear Familias
✓Botones ✓Repeat ✓Iconos SideBar
✓Iconos ✓Background-position ✓Iconos Contenido
✓Backgrounds ✓Display ✓Iconos Footer
✓Ilustraciones ✓Border ✓Botones Formularios
✓Esquina ✓Margin ✓Botones Contenido
✓etc. ✓Padding ✓Cajas Sidebar
✓etc. ✓Cajas Contenido

www.maximiliano.cl

Y cómo se produce?
Interfaces Front

www.maximiliano.cl

Y cómo se produce?

Re Escribir Clases
✓Sobreescribir
✓Clases Nuevas
✓Background-Position
✓Height
✓Width
✓etc.

www.maximiliano.cl

Y cómo se produce?

Re Escribir Clases Fusionar imágenes
✓Sobreescribir ✓Manual
✓Clases Nuevas ✓Automática
✓Background-Position
✓Height
✓Width
✓etc.

www.maximiliano.cl

Imágenes

www.maximiliano.cl

Coordenadas (X,Y)
Según estado

www.maximiliano.cl

Coordenadas (X,Y)
Según estado
#menu a: 0 0;

www.maximiliano.cl

Coordenadas (X,Y)
Según estado
#menu a: 0 0;
#menu a:hover: -157px 0;

www.maximiliano.cl

Coordenadas (X,Y)
Según estado
#menu a: 0 0;
#menu a:hover: -157px 0;
#menu a:active: -314px 0;

www.maximiliano.cl

Menú HTML/CSS
HTML CSS
<ul id="menu">
#menu a {
<li><a href="" alt=””>Menu item 1</a></li> width:120px;
<li><a href... margin: 1em 0;
padding: 7px 0 10px 20px;
...</li> color:#c60;
</ul> display:block;
text-decoration: none;
}
#menu a:hover {
color: #E9BE75;
}
#menu a:active {
color: #FFF;
}

www.maximiliano.cl

Técnicas

www.maximiliano.cl

Técnicas
Grilla Simple Grilla Grilla
XY Espaciada Diagonal

www.maximiliano.cl

Técnicas
✓Botones
✓Esquinas de cajas
✓Iconos
✓Animaciones

www.maximiliano.cl

Técnicas
✓Botones ✓Iconos
✓Esquinas de cajas ✓Backgrounds
✓Iconos ✓Ilustraciones
✓Animaciones

www.maximiliano.cl

Técnicas
✓Botones ✓Iconos ✓Iconos
✓Esquinas de cajas ✓Backgrounds ✓Ilustraciones
✓Iconos ✓Ilustraciones
✓Animaciones

www.maximiliano.cl

Técnicas
Grilla Simple
XY
✓Botones
✓Iconos
✓Animaciones

www.maximiliano.cl

Técnicas
Grilla Simple
XY ๏Contra
✓Botones
✓Iconos
✓Animaciones

www.maximiliano.cl

Técnicas
Grilla
Espaciada
✓Iconos
✓Backgrounds
✓Ilustraciones

www.maximiliano.cl

Técnicas
Grilla
Diagonal
✓Iconos
✓Ilustraciones

www.maximiliano.cl

Qué es Sprites
Una técnica de optimización de sitios basada en la
fusión de imágenes a una sola para posteriormente
ser separadas mediante CSS.

y por qué debería interesarme
✓ Reduce principalmente el peso de mis páginas
✓ Disminuye de manera considerable las peticiones HTTP
✓ Minimiza sustancialmente la cantidad de imágenes y
✓ Optimiza el peso total de los archivos externos al HTML

www.maximiliano.cl

Herramientas

www.maximiliano.cl

Herramientas
✓Online con muchos parámetros

www.maximiliano.cl

Herramientas
✓Online con muchos parámetros ✓Instalables

www.maximiliano.cl

Herramientas

✓Simples (Upload Imag)

www.maximiliano.cl

Herramientas

✓Simples (Upload Imag) ✓Curioso

www.maximiliano.cl

Recursos
Petr Stanicek Dave Shea
✓http://wellstyled.com/css-nopreload-rollovers.html ✓http://www.alistapart.com/articles/sprites/

Artículos/Tutoriales/Listas/ScreenCast
✓http://www.cssblog.es/distintos-metodos-para-utilizar-css-sprites/ ✓http://www.tufuncion.com/css-sprites/
✓http://www.pixelovers.com/css-sprites-mejora-rendimiento-web-i-37249/ ✓http://css-tricks.com/css-sprites/
✓http://www.from-the-couch.com/post.cfm/title/how-to-use-css-sprites/ ✓http://www.alistapart.com/articles/sprites2/
✓http://www.romancortes.com/blog/la-tecnica-de-sprites-css/ ✓http://www.csslessons.com/
✓http://css-tricks.com/video-screencasts/43-how-to-use-css-sprites/ ✓http://adamducker.com/blog/7/use-css-sprites/
✓http://www.from-the-couch.com/post.cfm/title/how-to-use-css-sprites/
✓http://borkweb.com/story/faster-page-loads-with-image-concatenation/
✓http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/
✓http://www.from-the-couch.com/post.cfm/title/creating-rounded-buttons-with-css-sprites/
✓http://trevordavis.net/blog/tutorial/how-to-preload-images-when-you-cant-use-css-sprites/
✓http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials

Generadores de Sprites/CSS/Imagenes
✓http://spriteme.org/
✓http://css-sprit.es/
✓http://printf.ru/spritr/
✓http://www.ﬂoweringmind.com/sprite-creator/index.php
✓http://drupal.org/project/sprites
✓http://www.csssprites.com/
✓http://es.spritegen.website-performance.org/
✓http://csssprites.org/

www.maximiliano.cl

Gracias
Maximiliano Martin
www.maximiliano.cl

www.maximiliano.cl

Qué es Sprites y por qué debería interesarme

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von Maximiliano Martin

Mehr von Maximiliano Martin (18)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Qué es Sprites y por qué debería interesarme