• Like
Curso responsive web design  - Redradix School
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Curso responsive web design - Redradix School

  • 2,192 views
Published

Documentación utilizada para el curso de Responsive Web Design

Documentación utilizada para el curso de Responsive Web Design

Published in Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,192
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
95
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. RESPONSIVE WEB DESIGN
  • 2. UN POCO DE HISTORIA 2
  • 3. 1440 GUTENBERG INVENTA LA IMPRENTA MODERNA 3
  • 4. BERNERS-LEE PROPONE EL LENGUAJE HTML 1991 4
  • 5. PAPEL DIGITAL 600 20 5
  • 6. CAMBIOS CMYK COLOR RGB FUENTES MM DIMENSIONES PX 6
  • 7. EL CAMBIO PAPEL LIENZO PANTALLA 7
  • 8. DIMENSIONES CERRADAS EN LAS QUE DEFINIR Y ESTRUCTURAR EL CONTENIDO 8
  • 9. PRIMERA DECISIÓN .wrapper { width: 960px; margin: 0 auto; } 9
  • 10. 1024X768 2008 2009 2010 2011 2012 40% 32% 24% 18% 14% 10
  • 11. 11
  • 12. 12
  • 13. 13 @globalmoxie
  • 14. @brad_frost 14
  • 15. @brad_frost 15
  • 16. @brad_frost 16
  • 17. PAPEL DIGITAL 600 20 17
  • 18. ADAPTARNOS AL NUEVO MEDIO EMPLEANDO TÉCNICAS VIEJAS 18
  • 19. ADAPTARNOS A TODOS LOS MEDIOS EMPLEANDO TÉCNICAS NUEVAS 19
  • 20. A LIST APART @rwd @beep 20
  • 21. RESPONSIVE WEB DESIGN
  • 22. RWD ESTRUCTURA FLUIDA MEDIOS FLEXIBLES FUENTES MEDIAQUERIES VIEWPORT 22
  • 23. RWD CSS CSS CSS CSS HTML ESTRUCTURA FLUIDA MEDIOS FLEXIBLES FUENTES MEDIAQUERIES VIEWPORT 23
  • 24. OLVÍDATE DEL PIXEL Y PIENSA EN PROPORCIONES 24
  • 25. “IT'S NOT ENOUGH TO SIMPLY MODIFY THE LAYOUT BY MOVING STUFF AROUND ON THE SCREEN AND ENLARGING OR DIMINISHING PARTICULAR DESIGN ELEMENTS” JACOB NIELSEN 25
  • 26. SMASHING MAGAZINE 26
  • 27. ADAPTIVE RWD 27
  • 28. DESKTOP FIRST 28
  • 29. MOBILE FIRST 29
  • 30. PROGRESSIVE ENHANCEMENT HMTL CSS JS 30
  • 31. http://www.besquare.me/session/cutting-the-mustard/ 31 https://speakerdeck.com/tmaslen/cutting-the-mustard-future-friendly-browser-support
  • 32. “IF SOMEONE SAYS THERE'S ONLY ONE TRUE WAY OF WORKING AND DESIGNING ONLINE, LOOK AT THEM FUNNY” ETHAN MARCOTTE 32
  • 33. DEMO 33
  • 34. RESPONSIVE WEB DESIGN
  • 35. RWD CSS CSS CSS CSS HTML ESTRUCTURA FLUIDA MEDIOS FLEXIBLES FUENTES MEDIAQUERIES VIEWPORT 2
  • 36. ESTRUCTURA FLUIDA USO DE PORCENTAJES % SOBRE ANCHO DEL PADRE AFECTA AL EJE VERTICAL* CSS fluid_layout_01.html 3
  • 37. ESTRUCTURA FLUIDA MODELO DE CAJA MARGIN + BORDER + PADDING BOX-SIZING: BORDER-BOX CSS fluid_layout_02.html 4
  • 38. ESTRUCTURA FLUIDA USO DE PIXEL SOLO PARA DETALLES ELEMENTOS FIJOS CSS 5
  • 39. ATENCIÓN! A CONTINUACIÓN SE VA A MOSTRAR UNA FÓRMULA MATEMÁTICA. SI SIENTE MAREOS O NÁUSEAS, APARTE LA MIRADA HASTA NUEVO AVISO. 6
  • 40. ESTRUCTURA FLUIDA ELEMENTO / CONTEXTO = PER (*100) 7
  • 41. ESTRUCTURA FLUIDA FRAMEWORKS BASADOS EN SASS EXTERNOS: BOURBON, INUIT PROPIOS CSS grids_demo.html 8
  • 42. BUENAS PRÁCTICAS PORCENTAJES HORIZONTALES EM VERTICALES 9
  • 43. MEDIOS FLEXIBLES ETIQUETA <IMG> MAX-WIDTH: 100%; WIDTH: 100%; HEIGHT: AUTO; CSS fluid_media_01.html 10
  • 44. FUENTES EM UNIDAD DE MEDIDA RELATIVA 1em = 16px SE HEREDA AFECTA A PADDING Y MARGIN CSS fluid_typeface_01.html 12
  • 45. FUENTES EM UNIDAD DE MEDIDA RELATIVA FONT-SIZE: 1.3125em (21px) PROPORCIONES CSS 13
  • 46. MEDIA QUERIES CAMBIAR LA DISPOSICIÓN @media screen and ( condición ) min-width (PA) max-width (GD) CSS media_queries_01.html 14
  • 47. MEDIA QUERIES UNIDADES DE MEDIDA @media ( min-width: 36em ) CSS 15
  • 48. MEDIA QUERIES MULTIPLES ESCENARIOS @media ( orientation: portrait ) orientation, device-aspect-ratio, scan, device-pixel-ratio CSS media_queries_03.html 16
  • 49. MEDIA QUERIES CONCATENACIÓN @media ( orientation: portrait ) and (min-width:42em) CSS 17
  • 50. MEDIA QUERIES SIN ATACAR A DISPOSITIVOS EL CONTENIDO DICTA EL PUNTO DE CORTE (BREAKPOINT) CSS http://screensiz.es 18
  • 51. VIEWPORT <meta name="viewport" content="width=device-width, initial-scale=1"> HTML min-scale=1, max-scale=1, user-scalable=no 19
  • 52. RWD CSS CSS CSS CSS HTML ESTRUCTURA FLUIDA MEDIOS FLEXIBLES FUENTES MEDIAQUERIES VIEWPORT 20
  • 53. MOBILE FIRST
  • 54. DESKTOP FIRST
  • 55. DESKTOP FIRST VENTAJAS LO CONOCEMOS MODERNIZAR SIN REHACER
  • 56. DESKTOP FIRST DESVENTAJAS MÁS ESFUERZO (HTML Y CSS) TIEMPOS DE CARGA OCULTACIÓN DE CONTENIDOS
  • 57. MOBILE FIRST
  • 58. MOBILE FIRST DESVENTAJAS NO LO CONOCEMOS TAMAÑO DE PANTALLA VELOCIDAD DE CONEXIÓN MODOS DE USO (CONTEXTO)
  • 59. CONVERTIR LOS INCONVENIENTES EN VENTAJAS
  • 60. MOBILE FIRST DESVENTAJAS TAMAÑO DE PANTALLA VELOCIDAD DE CONEXIÓN MODOS DE USO (CONTEXTO)
  • 61. MOBILE FIRST DESVENTAJAS TAMAÑO DE PANTALLA CONTENIDO VELOCIDAD DE CONEXIÓN RAPIDEZ MODOS DE USO (CONTEXTO) UX
  • 62. CONTENIDO POCO ESPACIO = IMPRESCINDIBLE NO SUPERFLUO COMUNICACIÓN MÁS DIRECTA LEGIBILIDAD 10
  • 63. DEATH TO BULLSHIT 11
  • 64. VELOCIDAD DE CARGA “THE WEB SHOULD BE FAST” GOOGLE 12
  • 65. VELOCIDAD DE CARGA ELIMINAR REDIRECCIONES MINIMIZAR PETICIONES CSS (SPRITES, CSS3) FONTFACE COMPACTAR RECURSOS 13
  • 66. CONTEXTO DESKTOP ATENCIÓN ELEVADA PANTALLA GRANDE CONEXIÓN RÁPIDA POSICIÓN ESTÁTICA 14
  • 67. CONTEXTO MOVIL POCA ATENCIÓN PANTALLA PEQUEÑA CONEXIÓN LENTA POSICIÓN DINÁMICA 15
  • 68. CONTEXTO MOVIL UN OJO, UN DEDO INPUT TÁCTIL SENSORES 16
  • 69. CONTEXTO 1 OJO, UN DEDO DISEÑO VISUAL INPUT TÁCTIL UX SENSORES PERSONALIZACIÓN 17
  • 70. DIMENSIONES APPLE 44PX MICROSOFT 34PX 18
  • 71. GESTOS TAP DOBLE TAP 19
  • 72. GESTOS SWIPE FAST SWIPE 20
  • 73. GESTOS PINCH SPREAD 21
  • 74. GESTOS LOS GESTOS SON LOS ATAJOS DE TECLADO EN DISPOSITIVOS TÁCTILES 22
  • 75. INPUT TÁCTIL NUI EL CONTENIDO ES LA UI ELIMINAMOS ABSTRACCIONES CURVA DE APRENDIZAJE REDUCIR SUPERFLUOS 23
  • 76. SENSORES ACELERÓMETRO, GIROSCOPIO, GEOLOCALIZACIÓN, GESTOS, ORIENTACIÓN DE PANTALLA, VIDEO, AUDIO, CONECTIVIDAD... 24
  • 77. HTML 5
  • 78. NOVEDADES DECLARACIÓN NUEVAS ETIQUETAS NUEVOS ATRIBUTOS REGLAS JS APIs 2
  • 79. DECLARACIÓN <!DOCTYPE HTML> HTML Y PUNTO NUESTRA RESPONSABILIDAD EL NAVEGADOR CONFÍA 3
  • 80. ETIQUETAS SEMÁNTICAS Y ESTRUCTURALES DEFINEN ESTRUCTURA AFECTAN AL OUTLINE DIV PARA DECORACIÓN 4
  • 81. ETIQUETAS SEMÁNTICAS Y ESTRUCTURALES ARTICLE, ASIDE, FIGURE, FIGCAPTION, FOOTER, HEADER, HGROUP, NAV, SECTION, TIME, AUDIO, VIDEO, CANVAS, MAIN?, PICTURE? 5
  • 82. ETIQUETAS SECTION CONTENIDO GENÉRICO ESTRUCTURADO ARTICLE, ASIDE, NAV 6
  • 83. ETIQUETAS ARTICLE CONTENIDO ESTRUCTURAL DISTRIBUIBLE DE MANERA INDEPENDIENTE article_01.html 7
  • 84. ETIQUETAS ASIDE CONTENIDO SECUNDARIO RELACIONADO A ELEMENTO aside_01.html 8
  • 85. ETIQUETAS NAV SECCIÓN RELATIVA A ENLACES DENTRO DEL DOCUMENTO O DE LA PÁGINA nav_01.html 9
  • 86. ETIQUETAS FIGURE SECCIÓN DE CONTENIDO VISUAL MULTIPLES MEDIOS figure_01.html 10
  • 87. ETIQUETAS FIGCAPTION LEYENDA O PIE RELATIVO AL CONTENIDO VISUAL DE FIGURE UNICO POR FIGCAPTION PUEDE CONTENER SEMÁNTICA figure_01.html 11
  • 88. ETIQUETAS HEADER CONTENIDO INTRODUCTORIO ELEMENTOS NAVEGACIÓN SUELE CONTENER H header_01.html 12
  • 89. ETIQUETAS FOOTER CONTENIDO SECUNDARIO NO PRESCINDIBLE footer_01.html 13
  • 90. LA SEMÁNTICA DE LAS ETIQUETAS NO DEFINE SU POSICIÓN EN EL LAYOUT 14
  • 91. ETIQUETAS TIME CONTENIDO RELATIVO A TIEMPO HORAS, SEMANAS, AÑOS... CONTEXTO ESCRITO time_01.html 15
  • 92. ETIQUETAS VIDEO & AUDIO NATIVO, SIN PLUGIN FLASH USABILIDAD ATRIBUTOS ESPECÍFICOS FALLBACK video_01.html 16
  • 93. ETIQUETAS CANVAS DEPENDIENTE DE JS DINÁMICOS / INTERACTIVOS JUEGOS canvas_01.html 17
  • 94. ATRIBUTOS MÁS ESPECÍFICOS FUNCIONALES -> UX 18
  • 95. ATRIBUTOS FORMULARIOS EMAIL, TEL, NUMBER, URL, SEARCH, COLOR, DATE, RANGE AUTOFOCUS, REQUIRED, MAX, MIN, PLACEHOLDER 19
  • 96. REGLAS MAYOR Y MEJOR SEMÁNTICA CIERRE DE ETIQUETAS ANIDACIÓN ELIMINAR REDUNDANCIA 20
  • 97. JS APIS COMPLEJIDAD EN CLIENTE PERSONALIZANDO EXPERIENCIA MAYOR CONTROL 21
  • 98. JS APIS DRAG AND DROP, HISTORY, STORAGE, FULLSCREEN, GETUSERMEDIA, BATTERY, CONTENTEDITABLE... 22
  • 99. CSS 3
  • 100. NOVEDADES DESCARGA DE GRÁFICOS CONDICIONALES PRESENTACIÓN (MÁS Y MEJOR) CAMBIANTES PREFIJOS PROPIETARIOS 2
  • 101. CSS3 MÚLTIPLES FONDOS EJE Z PROXIMIDAD TODAS LAS REGLAS background_01.html 3
  • 102. CSS3 BACKGROUND-SIZE COVER CONTAIN % & PX background_02.html 4
  • 103. CSS3 BORDER-RADIUS % & PX TL, TR, BR, BL border_01.html 5
  • 104. CSS3 BOX-SHADOW OFFSET X OFFSET Y BLUR [SPREAD] COLOR [INSET] boxshadow_01.html 6
  • 105. CSS3 COLOR RGB RGBA HSL TRANSPARENT color_01.html 7
  • 106. CSS3 FONT-FACE ESTANDARIZACIÓN EOT, SVG, TTF, WOFF TYPEKIT, GOOGLE FONTS ICONOS! fontface_01.html 8
  • 107. CSS3 DEGRADADOS SINTAXIS VARIABLE ES BACKGROUND-IMAGE FALLBACK gradient_01.html 9
  • 108. CSS3 MEDIA QUERIES EM MIN-WIDTH (MOBILE FIRST) POSIBILIDADES media_queries_03.html 10
  • 109. CSS3 MÚLTIPLES COLUMNAS COLUMNS COLUMN-GAP columns_01.html 11
  • 110. CSS3 OPACITY ESTANDAR 0A1 12
  • 111. CSS3 POINTER-EVENTS AUTO/NONE ELIMINAMOS FUNCIONALIDAD SIN EMPLEAR JS 13
  • 112. CSS3 TEXT-OVERFLOW CLIP ELLIPSIS “...” textoverflow_01.html 14
  • 113. CSS3 TEXT-SHADOW OFFSET X OFFSET Y COLOR BLUR textshadow_01.html 15
  • 114. :before PSEUDO SELECTORES :after
  • 115. CSS3 TRANSFORMACIONES 2D TRANSLATE, SKEW, ROTATE, SCALE TRANSFORM-ORIGIN transform2D_01.html 17
  • 116. CSS3 TRANSFORMACIONES 3D PERSPECTIVE (DEPTH) TRANSFORM-STYLE: PRESERVE-3D TRANSITION transform3D_01.html 18
  • 117. CSS3 TRANSICIONES PROPERTY (ALL), DURATION TIMING-FUNCTION, DELAY 19
  • 118. CSS3 ANIMACIONES ANIMATION KEYFRAMES 20
  • 119. CSS3 ANIMATION ANIMACIONES DELAY, DIRECTION, DURATION ITERATION-COUNT, NAME PLAY-STATE, FILL-MODE, TIMING-FUNCTION 21
  • 120. CSS3 KEYFRAMES ANIMACIONES DIRECTRIZ @ FROM, TO (SIMPLES) POSICIÓN EN EL TIEMPO % 22
  • 121. BUENAS PRÁCTICAS FALLBACK MODERNIZR.JS REQUIRE.JS PREFIJOS PROPIETARIOS ANIMACIÓN POR CLASES 23
  • 122. A SS SC
  • 123. PREPROCESO CAPA DE ABSTRACCIÓN SEPARACIÓN: DEV - PROD LENGUAJE DE PROGRAMACIÓN ESCALABILIDAD TIME SAVER 2
  • 124. HERRAMIENTAS CODEKIT PREPROS 3
  • 125. SASS VARIABLES $COLOR : #32CBFF $PADDING: 1em OPERADORES Y MÉTODOS 4
  • 126. SASS ANIDACIÓN SELECTORES DESCENDENTES MEDIA QUERIES 5
  • 127. SASS ESTRUCTURA ESCALABILIDAD ORGANIZACIÓN @IMPORT 6
  • 128. SASS MIXINS FUNCIONES @MIXIN DECLARACIÓN @INCLUDE LLAMADA ACEPTAN PARÁMETROS 7
  • 129. SASS EXTEND CLASES @EXTEND .REGLA COMPILA SELECTORES MÚLTIPLES 8
  • 130. MIXIN vs EXTEND @mixin module { background: #fff; color: #444; } .main_module { @include module; min-height: 3em; } .sidebar_module { @include module; min-height: 2em; } .main_module { background: #fff; color: #444; min-height: 3em; } .sidebar_module { background: #fff; color: #444; min-height: 2em; } .module { background: #fff; color: #444; } .module, .main_module, .sidebar_module { background: #fff; color: #444; } .main_module { @extend .module; min-height: 3em; } .main_module { min-height: 3em; } .sidebar_module { @extend .module; min-height: 2em; } .sidebar_module { min-height: 2em; } 9
  • 131. SASS SENTENCIAS @IF @FOR @EACH @WHILE 10
  • 132. SASS MÉTODOS COLOR NUMBER LIST 11
  • 133. SASS COLOR MÉTODOS RGBA, LIGHTEN, DARKEN, INVERT, GRAYSCALE, DESATURATE, ALPHA 12
  • 134. SASS NUMBER MÉTODOS PERCENTAGE, ROUND, CEIL, FLOOR, ABS 13
  • 135. SASS LIST MÉTODOS LENGTH, NTH, JOIN, APPEND, INDEX 14
  • 136. SASS API http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html 15
  • 137. ATOMIC DESIGN @brad_frost
  • 138. SISTEMAS DE DISEÑO GUIAS DE ESTILO COMPONENTES FRAMEWORKS ATOMIC DESIGN 2
  • 139. GUIAS DE ESTILO MODULARIDAD TIPOGRAFÍAS COLORES REJILLA ELEMENTOS 3
  • 140. COMPONENTES INVENTARIO ESTILO VISUAL PERSONALIZACIÓN UI BIBLIOTECA DE RECURSOS 4
  • 141. FRAMEWORKS INVENTARIO FOUNDATION BOOTSTRAP INUIT MOLA! 5
  • 142. “TINY BOOTSTRAPS, FOR EVERY CLIENT” DAVE RUPERT 6
  • 143. “RESPONSIVE DELIVERABLES SHOULD LOOK A LOT LIKE FULLY-FUNCTIONING BOOTSTRAP-STYLE SYSTEMS CUSTOM TAILORED FOR YOUR CLIENT’S NEEDS” DAVE RUPERT 7
  • 144. TOMEMOS UN FRAMEWORK COMO PUNTO DE PARTIDA 8
  • 145. FRAMEWORKS VENTAJAS FÁCIL DE PROBAR WORKFLOW DEFINIDO SINTAXIS SIMILAR FUENTE DE APRENDIZAJE 9
  • 146. FRAMEWORKS DESVENTAJAS CONVENCIONES AJENAS GLOBALES IMPERSONALIZABLES INCOMPATIBILIDADES 10
  • 147. “RESPONSIVE DELIVERABLES SHOULD LOOK A LOT LIKE FULLY-FUNCTIONING BOOTSTRAP-STYLE SYSTEMS CUSTOM TAILORED FOR YOUR CLIENT’S NEEDS” DAVE RUPERT 11
  • 148. CREEMOS NUESTRO PROPIO FRAMEWORK 12
  • 149. ATOMIC DESIGN 13
  • 150. ATOMIC DESIGN ÁTOMOS MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS 14
  • 151. ÁTOMOS ÁTOMOS MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS 15
  • 152. ÁTOMOS ELEMENTOS BÁSICOS ETIQUETAS ABSTRACCIÓN NO SEGMENTABLES POCO ÚTILES EN SI MISMOS FÁCIL MANIPULACIÓN 16
  • 153. MOLÉCULAS ÁTOMOS MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS 17
  • 154. MOLÉCULAS GRUPO DE ÁTOMOS UNIDO MÁS ESPECÍFICOS PUEDEN REPETIRSE SON LOS HUESOS DEL ESQUELETO ESCALABILIDAD 18
  • 155. ORGANISMOS ÁTOMOS MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS 19
  • 156. ORGANISMOS COMPUESTOS POR MOLÉCULAS ENTIDAD PROPIA REUSABLES ESCALABLES PERSONALIZABLES 20
  • 157. PLANTILLAS ÁTOMOS MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS 21
  • 158. PLANTILLAS WIREFRAMES DOCUMENTO HTML MUY CONCRETO VISIBILIDAD CLIENTE=DECISIONES FUTURIBLE PROYECTO FINAL 22
  • 159. PÁGINAS ÁTOMOS MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS 23
  • 160. PÁGINAS INSTANCIAS ESPECÍFICA CONTENIDO FINAL PROCESO DE TESTING PROYECTO FINAL 24
  • 161. ATOMIC DESIGN ÁTOMOS MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS 25
  • 162. ATOMIC DESIGN ÁTOMOS MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS ETIQUETAS CLASES SECCIONES WIREFRAMES VISTAS 26
  • 163. ATOMIC DESIGN METODOLOGÍA SISTEMA DE DISEÑO EFICAZ TRANSVERSAL CONSTRUCTIVO 27
  • 164. HERRAMIENTAS Y LENGUAJES 28
  • 165. PHP STYLUS COMPASS CODEKIT HAMMER LESS SASS EMMET GIT JADE HAML SUBLIME INCLUDE BOURBON JQUERY MODERNIZR POLYFILLS 29
  • 166. RESPONSIVE IMAGES
  • 167. EL COMIENZO IMG { MAX-WIDTH: 100%; } 2
  • 168. PROBLEMAS RENDIMIENTO PESO ENCUADRE 3
  • 169. FACTORES ENCUADRE TIEMPOS DE CARGA SEMÁNTICA TECNOLOGÍA HDPI 4
  • 170. LO IDEAL 5
  • 171. SOLUCIONES PICTURE SIMILAR A VIDEO JS SRCSET SOPORTE W3C 6
  • 172. PICTURE <picture> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="medium.jpg"> <source src="small.jpg"> <img src="small.jpg" alt=""> <p>Accessible text</p> </picture> <picture width="500" height="500"> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x"> <source media="(min-width: 18em)" srcset="medium1.jpg 1x, medium2.jpg 2x"> <source srcset="small1.jpg 1x, small2.jpg 2x"> <img src="small1.jpg" alt=""> <p>Accessible text</p> </picture> 7
  • 173. SOLUCIONES CARGA POSTERIOR MOBILE FIRST JS HDPI PERSONALIZABLE 8
  • 174. CARGA POSTERIOR <img class=”responsive-image” src="small.jpg"> if ( layout == “medium”) { replaceImages(‘medium’); } else if ( layout == “large”) { replaceImages(‘large’); } 9
  • 175. SOLUCIONES COMPRESSIVE IMAGES ALTA CALIDAD FUENTE PHOTOSHOP IMÁGENES DE FONDO 10
  • 176. COMPRESORES HTTP://PNGMINI.COM/ HTTP://IMAGEOPTIM.COM HTTP://TINYPNG.ORG HTTP://JPEGMINI.COM 11
  • 177. AMPLIANDO LA EXPERIENCIA
  • 178. PUNTO DE PARTIDA MOBILE FIRST INVENTARIO DE CONTENIDOS ESTRATEGIA DE CONTENIDOS JAVASCRIPT 2
  • 179. METODOLOGÍAS DEGRADACIÓN ELEGANTE VS AMPLIACIÓN PROGRESIVA 3
  • 180. HACIA ABAJO MODERNIZR POLYFILLS COMENTARIOS CONDICIONALES CSS HACKS 4
  • 181. HACIA ABAJO MODERNIZR CSS YEP / NOPE TOUCH 5
  • 182. HACIA ABAJO POLYFILLS JS PLUGINS SHIV / SHIM 6
  • 183. HACIA ABAJO COMENTARIOS CONDICIONALES <!--[if IE]> ... <![endif]--> lt, gt, lte, gte, !, |, & 7
  • 184. HACIA ABAJO CSS HACKS * html p { margin: 1em; } p { _margin: 1em; } p { *margin: 1em; } <IE7 <IE8 <IE9 8
  • 185. HACIA ARRIBA CUTTING THE MUSTARD AJAX 9
  • 186. HACIA ARRIBA CUTTING THE MUSTARD BBC EXPERIENCIA BASE EXPERIENCIA PREMIUM 10
  • 187. if ( 'querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { CUT THE MUSTARD! }
  • 188. NAVEGADORES IE9+ FIREFOX 3.5+ OPERA 9+ SAFARI 4+ CHROME 1+ IPHONE IOS1+ IPAD IOS1+ ANDROID PHONE 2.1+ ANDROID TABLETS 2.1+ BLACKBERRY OS6+ WINDOWS 7.5+ MOBILE FIREFOX OPERA MOBILE 12
  • 189. NAVEGADORES?? IE8BLACKBERRY OS5NOKIA S60 V6NOKIA S40 ALL OTHER SYMBIAN VARIANTS WINDOWS 7 PHONE (PRE-MANGO) 13
  • 190. MEJOR JS if ( 'querySelector' in document && 'localStorage' in window && Array.prototype.forEach) {} 14
  • 191. MEJOR JS var lista = document.querySelectorAll('.trabajo'); [].forEach.call(lista, function (trabajo) { trabajo.addEventListener('click', loquesea) }); 15
  • 192. HACIA ARRIBA AJAX CONTENIDO ADICIONAL FUNCIONALIDAD ADICIONAL MEDIA QUERIES ATRIBUTO DATA 16
  • 193. TOUCH EVENTS
  • 194. EVENTOS TOUCHSTART TOUCHMOVE TOUCHEND E.TOUCHES -> TOUCHLIST e.pageX, e.pageY 2
  • 195. OPTIMIZANDO
  • 196. DOS FRENTES CLIENTE VS SERVIDOR 4
  • 197. CLIENTE SPRITES @FONT-FACE (ICONOS) COMPACTAR ARCHIVOS REDUCIR PETICIONES CSS3 5
  • 198. SERVIDOR CACHEAR ASSETS GZIP PÁGINAS ESTÁTICAS EMPLEAR CDN 6
  • 199. HERRAMIENTAS GTMETRIX PAGESPEED YSLOW W3 TOTAL CACHE (wordpress) 7