Qué es Sprites y por qué debería interesarme
-
Upload
maximiliano-martin -
Category
Technology
-
view
2.742 -
download
4
description
Transcript of Qué es Sprites y por qué debería interesarme
![Page 1: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/1.jpg)
Qué es Spritesy por qué debería interesarme
por Maximiliano Martin - www.maximiliano.cl
para Laboratorio de Medios UDP
![Page 5: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/5.jpg)
Espíritus Enmascarados
Qué es Sprites
www.maximiliano.cl
![Page 6: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/6.jpg)
Espíritus
Video Juegos
Enmascarados
Qué es Sprites
www.maximiliano.cl
![Page 7: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/7.jpg)
Espíritus
Video Juegos
Mapas de Bit
Enmascarados
Qué es Sprites
www.maximiliano.cl
![Page 8: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/8.jpg)
Espíritus
Video Juegos
Mapas de Bit
Transparentes
Enmascarados
Qué es Sprites
www.maximiliano.cl
![Page 9: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/9.jpg)
Espíritus Enmascarados
Qué es Sprites
www.maximiliano.cl
![Page 17: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/17.jpg)
Sprites en Web
2003 Petr Stanicek
Republica Checawellstyled.com
www.maximiliano.cl
![Page 18: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/18.jpg)
Sprites en Web
2003 Petr Stanicek
Republica Checawellstyled.com
2004 Dave Shea
Canadaalistapart.com
www.maximiliano.cl
![Page 19: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/19.jpg)
Sprites en Web
2003 Petr Stanicek
Republica Checawellstyled.com
2004 Dave Shea
Canadaalistapart.com
www.maximiliano.cl
![Page 20: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/20.jpg)
Sprites en Web
2003 Petr Stanicek
Republica Checawellstyled.com
www.maximiliano.cl
![Page 24: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/24.jpg)
Menú HTML/CSS
www.maximiliano.cl
button.gif
button-over.gif
button-active.gif
![Page 26: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/26.jpg)
Menú HTML/CSS
<a href="" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('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
Antes Despues
![Page 27: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/27.jpg)
Menú HTML/CSS
<a href="" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('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
Antes Despues
![Page 28: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/28.jpg)
Menú HTML/CSS
<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')">
<a href="" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('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
Antes Despues
![Page 29: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/29.jpg)
Menú HTML/CSS
<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')">
<a href="" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('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
Antes Despues
![Page 30: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/30.jpg)
Menú HTML/CSS
<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);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}//--></script>
<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')">
<a href="" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('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
Antes Despues
![Page 31: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/31.jpg)
Menú HTML/CSS
<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);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}//--></script>
<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')">
<a href="" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('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
Antes Despues
<a href="" alt=””>Menu item 1</a>
<body id=””>
JavaScript para otros fines por ejemplo JQuery
![Page 32: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/32.jpg)
Menú HTML/CSS
www.maximiliano.cl
#menu a { background: url("button.gif") 0 0 no-repeat; }
#menu a:hover { background-position: -157px 0;}
#menu a:active { background-position: -314px 0; }
Comportamiento con Pseudoclases
![Page 33: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/33.jpg)
Menú HTML/CSS
www.maximiliano.cl
#menu a { background: url("button.gif") 0 0 no-repeat; }
#menu a:hover { background-position: -157px 0;}
#menu a:active { background-position: -314px 0; }
Comportamiento con Pseudoclases
![Page 34: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/34.jpg)
Menú HTML/CSS
www.maximiliano.cl
#menu a { background: url("button.gif") 0 0 no-repeat; }
#menu a
#menu a:hover { background-position: -157px 0;}
#menu a:active { background-position: -314px 0; }
Comportamiento con Pseudoclases
![Page 35: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/35.jpg)
#menu a:hover
Menú HTML/CSS
www.maximiliano.cl
#menu a { background: url("button.gif") 0 0 no-repeat; }
#menu a:hover { background-position: -157px 0;}
#menu a:active { background-position: -314px 0; }
Comportamiento con Pseudoclases
![Page 36: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/36.jpg)
#menu a:active
Menú HTML/CSS
www.maximiliano.cl
#menu a { background: url("button.gif") 0 0 no-repeat; }
#menu a:hover { background-position: -157px 0;}
#menu a:active { background-position: -314px 0; }
Comportamiento con Pseudoclases
![Page 37: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/37.jpg)
Objetivo
www.maximiliano.cl
Optimización de nuestro sitioahorrando ancho de banda
![Page 38: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/38.jpg)
Objetivo
www.maximiliano.cl
Rollover Javascript
HTML JS
Optimización de nuestro sitioahorrando ancho de banda
![Page 39: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/39.jpg)
Objetivo
www.maximiliano.cl
Rollover Javascript
HTML JS
Rollover CSS/imágenes
HTML CSS
Optimización de nuestro sitioahorrando ancho de banda
![Page 40: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/40.jpg)
Objetivo
www.maximiliano.cl
Rollover Javascript
HTML JS
Rollover SpritesCSS
HTML CSS
Rollover CSS/imágenes
HTML CSS
Optimización de nuestro sitioahorrando ancho de banda
![Page 42: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/42.jpg)
www.maximiliano.cl
ObjetivoReducir las peticiones al servidor
![Page 43: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/43.jpg)
www.maximiliano.cl
HTML
CSS
ObjetivoReducir las peticiones al servidor
Conexión + Petición + Respuestapor cada archivo
![Page 44: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/44.jpg)
www.maximiliano.cl
HTML
CSS
ObjetivoReducir las peticiones al servidor
Conexión + Petición + Respuestapor cada archivo
Cargar 10 elementos de 4kb NO es igual a cargar 1 de 40kb
![Page 45: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/45.jpg)
www.maximiliano.cl
HTML
CSS
ObjetivoReducir las peticiones al servidor
Conexión + Petición + Respuestapor cada archivo
Cargar 10 elementos de 4kb NO es igual a cargar 1 de 40kb
![Page 46: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/46.jpg)
www.maximiliano.cl
HTML
CSS
ObjetivoReducir las peticiones al servidor
Conexión + Petición + Respuestapor cada archivo
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
![Page 49: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/49.jpg)
peticiones HTTP 10
Menú HTML/CSS
www.maximiliano.cl
Antes
![Page 50: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/50.jpg)
peticiones HTTP 10
Menú HTML/CSS
www.maximiliano.cl
Antes en imágenes 40 KB
![Page 51: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/51.jpg)
peticiones HTTP 10
Menú HTML/CSS
www.maximiliano.cl
Antes
Despues
en imágenes 40 KB
petición HTTP 1
![Page 52: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/52.jpg)
peticiones HTTP 10
Menú HTML/CSS
www.maximiliano.cl
Antes
Despues
en imágenes 40 KB
petición HTTP 1 en imágenes
16 KB
![Page 53: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/53.jpg)
EjemplosGoogle / resultado de búsquedaSprites: 1 Nombre Archivo: nav_logo7.pngPeso: 8 KbDimensiones: 164 x 106pxCantidad de imágenes: 32Tipo: Iconos, Logos, Botones.
www.maximiliano.cl
![Page 54: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/54.jpg)
EjemplosYahoo.comSprites: 14Nombre Archivo: trough_2.2.gifPeso: 20 KbDimensiones: 420 x 1700pxCantidad de imágenes: 82Tipo: Iconos
www.maximiliano.cl
![Page 55: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/55.jpg)
EjemplosYahoo.comSprites: 14Nombre Archivo: trough_2.2.gifPeso: 20 KbDimensiones: 420 x 1700pxCantidad de imágenes: 82Tipo: Iconos
4 x 4300pxBackground
www.maximiliano.cl
![Page 56: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/56.jpg)
EjemplosYahoo.comSprites: 14Nombre Archivo: trough_2.2.gifPeso: 20 KbDimensiones: 420 x 1700pxCantidad de imágenes: 82Tipo: Iconos
4 x 4300pxBackground
108 x 27pxBotones
www.maximiliano.cl
![Page 57: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/57.jpg)
EjemplosYahoo.comSprites: 14Nombre Archivo: trough_2.2.gifPeso: 20 KbDimensiones: 420 x 1700pxCantidad de imágenes: 82Tipo: Iconos
4 x 4300pxBackground
108 x 27pxBotones
45 x 1100pxIconos
www.maximiliano.cl
![Page 58: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/58.jpg)
EjemplosYahoo.comSprites: 14Nombre Archivo: trough_2.2.gifPeso: 20 KbDimensiones: 420 x 1700pxCantidad de imágenes: 82Tipo: Iconos
www.maximiliano.cl
![Page 59: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/59.jpg)
EjemplosSofatutor.deSprites: 8Nombre Archivo: iconTran.pngPeso: 4 KbDimensiones: 525 x 525pxCantidad de imágenes: 15Tipo: Iconos
www.maximiliano.cl
![Page 60: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/60.jpg)
EjemplosSofatutor.deSprites: 8Nombre Archivo: iconTran.pngPeso: 4 KbDimensiones: 525 x 525pxCantidad de imágenes: 15Tipo: Iconos
430 x 3200px Botones
www.maximiliano.cl
![Page 61: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/61.jpg)
EjemplosSofatutor.deSprites: 8Nombre Archivo: iconTran.pngPeso: 4 KbDimensiones: 525 x 525pxCantidad de imágenes: 15Tipo: Iconos
www.maximiliano.cl
![Page 63: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/63.jpg)
Y cómo se produce?
Interfaces Front Sprites
www.maximiliano.cl
![Page 64: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/64.jpg)
Y cómo se produce?
Interfaces
www.maximiliano.cl
![Page 65: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/65.jpg)
Y cómo se produce?
Interfaces
www.maximiliano.cl
![Page 66: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/66.jpg)
Y cómo se produce?
Interfaces
www.maximiliano.cl
![Page 67: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/67.jpg)
Y cómo se produce?
Interfaces
www.maximiliano.cl
![Page 68: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/68.jpg)
Y cómo se produce?
Interfaces
www.maximiliano.cl
![Page 69: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/69.jpg)
Y cómo se produce?
Interfaces
www.maximiliano.cl
![Page 70: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/70.jpg)
Y cómo se produce?
Interfaces
www.maximiliano.cl
![Page 71: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/71.jpg)
Y cómo se produce?
Interfaces
www.maximiliano.cl
![Page 72: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/72.jpg)
Y cómo se produce?
Interfaces
www.maximiliano.cl
![Page 73: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/73.jpg)
Y cómo se produce?
Interfaces
www.maximiliano.cl
✓Contenido✓Diseño
Identificar
![Page 74: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/74.jpg)
Y cómo se produce?
Interfaces
www.maximiliano.cl
✓Contenido✓Diseño
Identificar✓Botones✓Iconos✓Backgrounds✓Ilustraciones✓Esquina✓
Reconocer
![Page 75: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/75.jpg)
Y cómo se produce?
Interfaces
www.maximiliano.cl
✓Contenido✓Diseño
Identificar✓Botones✓Iconos✓Backgrounds✓Ilustraciones✓Esquina✓
Reconocer y Asociar
![Page 76: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/76.jpg)
Y cómo se produce?
Interfaces
www.maximiliano.cl
✓Contenido✓Diseño
Identificar✓Botones✓Iconos✓Backgrounds✓Ilustraciones✓Esquina✓
Reconocer y Asociar Visualizar✓Contextos✓Situaciones✓Estados
![Page 77: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/77.jpg)
Y cómo se produce?
Interfaces
www.maximiliano.cl
✓Contenido✓Diseño
Identificar✓Botones✓Iconos✓Backgrounds✓Ilustraciones✓Esquina✓
Reconocer y Asociar Visualizar Proyectar✓Contextos✓Situaciones✓Estados
✓Escalabilidad✓Imponderables
![Page 78: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/78.jpg)
Y cómo se produce?
www.maximiliano.cl
Interfaces
![Page 79: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/79.jpg)
Y cómo se produce?
www.maximiliano.cl
Interfaces FrontHTML Imagenes Tipo CSS
![Page 80: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/80.jpg)
Y cómo se produce?
www.maximiliano.cl
Interfaces Front
Escribir Clases✓Botones✓Iconos✓Backgrounds✓Ilustraciones✓Esquina✓etc.
HTML Imagenes Tipo CSS
![Page 81: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/81.jpg)
Y cómo se produce?
www.maximiliano.cl
Interfaces Front
Escribir Clases✓Botones✓Iconos✓Backgrounds✓Ilustraciones✓Esquina✓etc.
Definir reglas✓Repeat✓Background-position✓Display✓Border✓Margin✓Padding✓etc.
HTML Imagenes Tipo CSS
![Page 82: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/82.jpg)
Y cómo se produce?
www.maximiliano.cl
Interfaces Front
Escribir Clases✓Botones✓Iconos✓Backgrounds✓Ilustraciones✓Esquina✓etc.
Definir reglas Crear Familias✓Repeat✓Background-position✓Display✓Border✓Margin✓Padding✓etc.
✓Iconos SideBar✓Iconos Contenido✓Iconos Footer✓Botones Formularios✓Botones Contenido✓Cajas Sidebar✓Cajas Contenido
HTML Imagenes Tipo CSS
![Page 83: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/83.jpg)
Y cómo se produce?
www.maximiliano.cl
Interfaces Front
![Page 84: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/84.jpg)
Y cómo se produce?
www.maximiliano.cl
Interfaces Front Sprites
Re Escribir Clases✓Sobreescribir✓Clases Nuevas✓Background-Position✓Height ✓Width✓etc.
![Page 85: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/85.jpg)
Y cómo se produce?
www.maximiliano.cl
Interfaces Front Sprites
Re Escribir Clases✓Sobreescribir✓Clases Nuevas✓Background-Position✓Height ✓Width✓etc.
Fusionar imágenes✓Manual✓Automática
![Page 91: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/91.jpg)
Coordenadas (X,Y)
www.maximiliano.cl
Según estado
![Page 92: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/92.jpg)
Coordenadas (X,Y)
www.maximiliano.cl
Según estado
![Page 93: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/93.jpg)
Coordenadas (X,Y)
www.maximiliano.cl
Según estado
![Page 94: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/94.jpg)
Coordenadas (X,Y)
www.maximiliano.cl
#menu a: 0 0;
Según estado
![Page 95: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/95.jpg)
Coordenadas (X,Y)
www.maximiliano.cl
#menu a:hover: -157px 0;#menu a: 0 0;
Según estado
![Page 96: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/96.jpg)
Coordenadas (X,Y)
www.maximiliano.cl
#menu a:hover: -157px 0;
#menu a:active: -314px 0;
#menu a: 0 0;
Según estado
![Page 97: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/97.jpg)
Menú HTML/CSS
www.maximiliano.cl
#menu a:hover {background-position: -157px 0;color: #E9BE75;
}
#menu a:active {background-position: -314px 0;color: #FFF;
}
#menu a {background: url("button.gif") 0 0 no-repeat;width:120px;margin: 1em 0; padding: 7px 0 10px 20px;color:#c60;display:block; text-decoration: none;
}
HTML CSS
<ul id="menu"> <li><a href="" alt=””>Menu item 1</a></li> <li><a href...
...</li></ul>
![Page 99: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/99.jpg)
Técnicas
Grilla Simple XY
www.maximiliano.cl
Grilla Espaciada
Grilla Diagonal
![Page 100: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/100.jpg)
Técnicas
Grilla Simple XY
www.maximiliano.cl
Grilla Espaciada
Grilla Diagonal
✓Botones✓Esquinas de cajas✓Iconos✓Animaciones
![Page 101: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/101.jpg)
Técnicas
Grilla Simple XY
www.maximiliano.cl
Grilla Espaciada
Grilla Diagonal
✓Botones✓Esquinas de cajas✓Iconos✓Animaciones
✓Iconos✓Backgrounds✓Ilustraciones
![Page 102: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/102.jpg)
Técnicas
Grilla Simple XY
www.maximiliano.cl
Grilla Espaciada
Grilla Diagonal
✓Botones✓Esquinas de cajas✓Iconos✓Animaciones
✓Iconos✓Backgrounds✓Ilustraciones
✓Iconos✓Ilustraciones
![Page 103: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/103.jpg)
Técnicas
Grilla Simple XY
www.maximiliano.cl
✓Botones✓Esquinas de cajas✓Iconos✓Animaciones
![Page 104: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/104.jpg)
Técnicas
Grilla Simple XY
www.maximiliano.cl
✓Botones✓Esquinas de cajas✓Iconos✓Animaciones
![Page 105: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/105.jpg)
Técnicas
Grilla Simple XY
www.maximiliano.cl
✓Botones✓Esquinas de cajas✓Iconos✓Animaciones
๏Contra
![Page 106: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/106.jpg)
Técnicas
www.maximiliano.cl
Grilla Espaciada✓Iconos✓Backgrounds✓Ilustraciones
![Page 107: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/107.jpg)
Técnicas
www.maximiliano.cl
Grilla Espaciada✓Iconos✓Backgrounds✓Ilustraciones
![Page 108: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/108.jpg)
Técnicas
www.maximiliano.cl
Grilla Espaciada✓Iconos✓Backgrounds✓Ilustraciones
![Page 109: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/109.jpg)
Técnicas
www.maximiliano.cl
Grilla Espaciada✓Iconos✓Backgrounds✓Ilustraciones
![Page 110: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/110.jpg)
Técnicas
www.maximiliano.cl
Grilla Diagonal✓Iconos✓Ilustraciones
![Page 111: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/111.jpg)
Técnicas
www.maximiliano.cl
Grilla Diagonal✓Iconos✓Ilustraciones
![Page 112: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/112.jpg)
Técnicas
www.maximiliano.cl
Grilla Diagonal✓Iconos✓Ilustraciones
![Page 113: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/113.jpg)
Técnicas
www.maximiliano.cl
Grilla Diagonal✓Iconos✓Ilustraciones
![Page 114: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/114.jpg)
Técnicas
www.maximiliano.cl
Grilla Diagonal✓Iconos✓Ilustraciones
![Page 115: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/115.jpg)
Qué es Sprites
y por qué debería interesarme
www.maximiliano.cl
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.
✓ 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
![Page 117: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/117.jpg)
Herramientas
www.maximiliano.cl
✓Online con muchos parámetros
![Page 118: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/118.jpg)
Herramientas
www.maximiliano.cl
✓Instalables✓Online con muchos parámetros
![Page 119: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/119.jpg)
Herramientas
www.maximiliano.cl
✓Instalables
✓Simples (Upload Imag)
✓Online con muchos parámetros
![Page 120: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/120.jpg)
Herramientas
www.maximiliano.cl
✓Instalables
✓Simples (Upload Imag)
✓Online con muchos parámetros
✓Curioso
![Page 121: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/121.jpg)
Recursos
www.maximiliano.cl
✓http://wellstyled.com/css-nopreload-rollovers.htmlPetr Stanicek
✓http://www.alistapart.com/articles/sprites/Dave Shea
✓http://www.cssblog.es/distintos-metodos-para-utilizar-css-sprites/✓http://www.pixelovers.com/css-sprites-mejora-rendimiento-web-i-37249/
✓http://www.from-the-couch.com/post.cfm/title/how-to-use-css-sprites/
✓http://www.romancortes.com/blog/la-tecnica-de-sprites-css/
✓http://css-tricks.com/video-screencasts/43-how-to-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
Artículos/Tutoriales/Listas/ScreenCast
✓http://spriteme.org/✓http://css-sprit.es/
✓http://printf.ru/spritr/
✓http://www.floweringmind.com/sprite-creator/index.php
✓http://drupal.org/project/sprites
✓http://www.csssprites.com/
✓http://es.spritegen.website-performance.org/
✓http://csssprites.org/
Generadores de Sprites/CSS/Imagenes
✓http://www.tufuncion.com/css-sprites/✓http://css-tricks.com/css-sprites/
✓http://www.alistapart.com/articles/sprites2/
✓http://www.csslessons.com/
✓http://adamducker.com/blog/7/use-css-sprites/
![Page 122: Qué es Sprites y por qué debería interesarme](https://reader030.fdocuments.es/reader030/viewer/2022013011/557ba4aad8b42ac9248b5361/html5/thumbnails/122.jpg)
GraciasMaximiliano Martin
www.maximiliano.cl
www.maximiliano.cl