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 Espíritus Enmascarados Video Juegos www.maximiliano.cl

Qué es Sprites Espíritus Enmascarados Video Juegos Mapas de Bit www.maximiliano.cl

Qué es Sprites Espíritus Enmascarados Video Juegos Transparentes Mapas de Bit www.maximiliano.cl

Qué es Sprites Espíritus Enmascarados www.maximiliano.cl

Qué es Sprites 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

Sprites en Web 2003 Petr Stanicek Republica Checa wellstyled.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="" 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> <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="" 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> <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')"> <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> 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> <body id=”” onLoad="MM_preloadImages('imag/boto/ <body id=””> 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')"> <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 { background-position: -314px 0; } www.maximiliano.cl

Menú HTML/CSS Comportamiento con Pseudoclases #menu a { #menu a background: url("button.gif") 0 0 no-repeat; } #menu a:hover { background-position: -157px 0; } #menu a:active { background-position: -314px 0; } www.maximiliano.cl

Menú HTML/CSS Comportamiento con Pseudoclases #menu a { background: url("button.gif") 0 0 no-repeat; } #menu a:hover { #menu a:hover background-position: -157px 0; } #menu a:active { background-position: -314px 0; } www.maximiliano.cl

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 #menu a:active { background-position: -314px 0; } www.maximiliano.cl

Objetivo Optimización de nuestro sitio ahorrando ancho de banda www.maximiliano.cl

Objetivo Optimización de nuestro sitio ahorrando ancho de banda Rollover Javascript HTML JS www.maximiliano.cl

Objetivo Optimización de nuestro sitio ahorrando ancho de banda Rollover Rollover Javascript CSS/imágenes HTML JS HTML CSS www.maximiliano.cl

Objetivo Optimización de nuestro sitio ahorrando ancho de banda 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 Reducir las peticiones al servidor HTML Conexión + Petición + Respuesta por cada archivo CSS www.maximiliano.cl

Objetivo Reducir las peticiones al servidor HTML Conexión + Petición + Respuesta por cada archivo CSS Cargar 10 elementos de 4kb NO es igual a cargar 1 de 40kb www.maximiliano.cl

Objetivo Reducir las peticiones al servidor HTML Conexión + Petición + Respuesta por cada archivo CSS 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 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 Dimensiones: 420 x 1700px Cantidad de imágenes: 82 Tipo: Iconos www.maximiliano.cl

Ejemplos4 x 4300px Background Yahoo.com Sprites: 14 Nombre Archivo: trough_2.2.gif Peso: 20 Kb Dimensiones: 420 x 1700px Cantidad de imágenes: 82 Tipo: Iconos www.maximiliano.cl

Ejemplos4 x 4300px Background Yahoo.com 108 x 27px Botones Sprites: 14 Nombre Archivo: trough_2.2.gif Peso: 20 Kb Dimensiones: 420 x 1700px Cantidad de imágenes: 82 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 Dimensiones: 420 x 1700px Cantidad de imágenes: 82 Tipo: Iconos www.maximiliano.cl

Ejemplos Yahoo.com Sprites: 14 Nombre Archivo: trough_2.2.gif Peso: 20 Kb Dimensiones: 420 x 1700px Cantidad de imágenes: 82 Tipo: Iconos www.maximiliano.cl

Ejemplos Sofatutor.de Sprites: 8 Nombre Archivo: iconTran.png Peso: 4 Kb Dimensiones: 525 x 525px Cantidad de imágenes: 15 Tipo: Iconos www.maximiliano.cl

Ejemplos Sofatutor.de 430 x 3200px Botones Sprites: 8 Nombre Archivo: iconTran.png Peso: 4 Kb Dimensiones: 525 x 525px Cantidad de imágenes: 15 Tipo: Iconos www.maximiliano.cl

Ejemplos Sofatutor.de Sprites: 8 Nombre Archivo: iconTran.png Peso: 4 Kb Dimensiones: 525 x 525px Cantidad de imágenes: 15 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 www.maximiliano.cl

Y cómo se produce? Interfaces Front HTML Imagenes Tipo CSS www.maximiliano.cl

Y cómo se produce? Interfaces Front HTML Imagenes Tipo CSS Escribir Clases ✓Botones ✓Iconos ✓Backgrounds ✓Ilustraciones ✓Esquina ✓etc. www.maximiliano.cl

Y cómo se produce? Interfaces Front HTML Imagenes Tipo CSS 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 HTML Imagenes Tipo CSS 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? Interfaces Front Sprites Re Escribir Clases ✓Sobreescribir ✓Clases Nuevas ✓Background-Position ✓Height ✓Width ✓etc. www.maximiliano.cl

Y cómo se produce? Interfaces Front Sprites 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 { background: url("button.gif") 0 0 no-repeat; <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 { background-position: -157px 0; color: #E9BE75; } #menu a:active { background-position: -314px 0; color: #FFF; } www.maximiliano.cl

Técnicas www.maximiliano.cl

Técnicas Grilla Simple Grilla Grilla XY Espaciada Diagonal www.maximiliano.cl

Técnicas Grilla Simple Grilla Grilla XY Espaciada Diagonal ✓Botones ✓Esquinas de cajas ✓Iconos ✓Animaciones www.maximiliano.cl

Técnicas Grilla Simple Grilla Grilla XY Espaciada Diagonal ✓Botones ✓Iconos ✓Esquinas de cajas ✓Backgrounds ✓Iconos ✓Ilustraciones ✓Animaciones www.maximiliano.cl

Técnicas Grilla Simple Grilla Grilla XY Espaciada Diagonal ✓Botones ✓Iconos ✓Iconos ✓Esquinas de cajas ✓Backgrounds ✓Ilustraciones ✓Iconos ✓Ilustraciones ✓Animaciones www.maximiliano.cl

Técnicas Grilla Simple XY ✓Botones ✓Esquinas de cajas ✓Iconos ✓Animaciones www.maximiliano.cl

Técnicas Grilla Simple XY ๏Contra ✓Botones ✓Esquinas de cajas ✓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 ✓Online con muchos parámetros ✓Instalables ✓Simples (Upload Imag) www.maximiliano.cl

Herramientas ✓Online con muchos parámetros ✓Instalables ✓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

http://www.maximiliano.cl	348
http://www.laboratoriodemedios.cl	96
http://www.slideshare.net	5

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

by Maximiliano Martin on Nov 02, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 449

Statistics

Qué es Sprites y por qué debería interesarme — Presentation Transcript