Curso responsive web design - Redradix School
•
5 gostaram•3,481 visualizações
Este documento trata sobre el diseño web responsivo (RWD). Explica los principios básicos del RWD como estructuras fluidas, medios flexibles, fuentes escalables, uso de media queries y viewport. También cubre temas como mobile first, progresive enhancement, y las ventajas e inconvenientes de los enfoques desktop first y mobile first.
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (12)
Semelhante a Curso responsive web design - Redradix School
Semelhante a Curso responsive web design - Redradix School (20)
Mais de Redradix
Mais de Redradix (9)
Último
Último (10)
Curso responsive web design - Redradix School
- 3. 1440 GUTENBERG INVENTA LA IMPRENTA MODERNA 3
- 4. BERNERS-LEE PROPONE EL LENGUAJE HTML 1991 4
- 6. CAMBIOS CMYK COLOR RGB FUENTES MM DIMENSIONES PX 6
- 8. DIMENSIONES CERRADAS EN LAS QUE DEFINIR Y ESTRUCTURAR EL CONTENIDO 8
- 9. PRIMERA DECISIÓN .wrapper { width: 960px; margin: 0 auto; } 9
- 11. 11
- 12. 12
- 13. 13 @globalmoxie
- 14. @brad_frost 14
- 15. @brad_frost 15
- 16. @brad_frost 16
- 18. ADAPTARNOS AL NUEVO MEDIO EMPLEANDO TÉCNICAS VIEJAS 18
- 19. ADAPTARNOS A TODOS LOS MEDIOS EMPLEANDO TÉCNICAS NUEVAS 19
- 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
- 27. ADAPTIVE RWD 27
- 28. DESKTOP FIRST 28
- 29. MOBILE FIRST 29
- 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
- 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
- 43. MEDIOS FLEXIBLES ETIQUETA <IMG> MAX-WIDTH: 100%; WIDTH: 100%; HEIGHT: AUTO; CSS fluid_media_01.html 10
- 45. FUENTES EM UNIDAD DE MEDIDA RELATIVA 1em = 16px SE HEREDA AFECTA A PADDING Y MARGIN CSS fluid_typeface_01.html 12
- 46. FUENTES EM UNIDAD DE MEDIDA RELATIVA FONT-SIZE: 1.3125em (21px) PROPORCIONES CSS 13
- 47. MEDIA QUERIES CAMBIAR LA DISPOSICIÓN @media screen and ( condición ) min-width (PA) max-width (GD) CSS media_queries_01.html 14
- 48. MEDIA QUERIES UNIDADES DE MEDIDA @media ( min-width: 36em ) CSS 15
- 49. MEDIA QUERIES MULTIPLES ESCENARIOS @media ( orientation: portrait ) orientation, device-aspect-ratio, scan, device-pixel-ratio CSS media_queries_03.html 16
- 50. MEDIA QUERIES CONCATENACIÓN @media ( orientation: portrait ) and (min-width:42em) CSS 17
- 51. MEDIA QUERIES SIN ATACAR A DISPOSITIVOS EL CONTENIDO DICTA EL PUNTO DE CORTE (BREAKPOINT) CSS http://screensiz.es 18
- 52. VIEWPORT <meta name="viewport" content="width=device-width, initial-scale=1"> HTML min-scale=1, max-scale=1, user-scalable=no 19
- 54. MOBILE FIRST
- 55. DESKTOP FIRST
- 56. DESKTOP FIRST VENTAJAS LO CONOCEMOS MODERNIZAR SIN REHACER
- 57. DESKTOP FIRST DESVENTAJAS MÁS ESFUERZO (HTML Y CSS) TIEMPOS DE CARGA OCULTACIÓN DE CONTENIDOS
- 58. MOBILE FIRST
- 59. MOBILE FIRST DESVENTAJAS NO LO CONOCEMOS TAMAÑO DE PANTALLA VELOCIDAD DE CONEXIÓN MODOS DE USO (CONTEXTO)
- 61. MOBILE FIRST DESVENTAJAS TAMAÑO DE PANTALLA VELOCIDAD DE CONEXIÓN MODOS DE USO (CONTEXTO)
- 62. MOBILE FIRST DESVENTAJAS TAMAÑO DE PANTALLA CONTENIDO VELOCIDAD DE CONEXIÓN RAPIDEZ MODOS DE USO (CONTEXTO) UX
- 63. CONTENIDO POCO ESPACIO = IMPRESCINDIBLE NO SUPERFLUO COMUNICACIÓN MÁS DIRECTA LEGIBILIDAD 10
- 65. VELOCIDAD DE CARGA “THE WEB SHOULD BE FAST” GOOGLE 12
- 66. VELOCIDAD DE CARGA ELIMINAR REDIRECCIONES MINIMIZAR PETICIONES CSS (SPRITES, CSS3) FONTFACE COMPACTAR RECURSOS 13
- 67. CONTEXTO DESKTOP ATENCIÓN ELEVADA PANTALLA GRANDE CONEXIÓN RÁPIDA POSICIÓN ESTÁTICA 14
- 68. CONTEXTO MOVIL POCA ATENCIÓN PANTALLA PEQUEÑA CONEXIÓN LENTA POSICIÓN DINÁMICA 15
- 69. CONTEXTO MOVIL UN OJO, UN DEDO INPUT TÁCTIL SENSORES 16
- 70. CONTEXTO 1 OJO, UN DEDO DISEÑO VISUAL INPUT TÁCTIL UX SENSORES PERSONALIZACIÓN 17
- 75. GESTOS LOS GESTOS SON LOS ATAJOS DE TECLADO EN DISPOSITIVOS TÁCTILES 22
- 76. INPUT TÁCTIL NUI EL CONTENIDO ES LA UI ELIMINAMOS ABSTRACCIONES CURVA DE APRENDIZAJE REDUCIR SUPERFLUOS 23
- 77. SENSORES ACELERÓMETRO, GIROSCOPIO, GEOLOCALIZACIÓN, GESTOS, ORIENTACIÓN DE PANTALLA, VIDEO, AUDIO, CONECTIVIDAD... 24
- 78. HTML 5
- 80. DECLARACIÓN <!DOCTYPE HTML> HTML Y PUNTO NUESTRA RESPONSABILIDAD EL NAVEGADOR CONFÍA 3
- 81. ETIQUETAS SEMÁNTICAS Y ESTRUCTURALES DEFINEN ESTRUCTURA AFECTAN AL OUTLINE DIV PARA DECORACIÓN 4
- 82. ETIQUETAS SEMÁNTICAS Y ESTRUCTURALES ARTICLE, ASIDE, FIGURE, FIGCAPTION, FOOTER, HEADER, HGROUP, NAV, SECTION, TIME, AUDIO, VIDEO, CANVAS, MAIN?, PICTURE? 5
- 84. ETIQUETAS ARTICLE CONTENIDO ESTRUCTURAL DISTRIBUIBLE DE MANERA INDEPENDIENTE article_01.html 7
- 85. ETIQUETAS ASIDE CONTENIDO SECUNDARIO RELACIONADO A ELEMENTO aside_01.html 8
- 86. ETIQUETAS NAV SECCIÓN RELATIVA A ENLACES DENTRO DEL DOCUMENTO O DE LA PÁGINA nav_01.html 9
- 87. ETIQUETAS FIGURE SECCIÓN DE CONTENIDO VISUAL MULTIPLES MEDIOS figure_01.html 10
- 88. ETIQUETAS FIGCAPTION LEYENDA O PIE RELATIVO AL CONTENIDO VISUAL DE FIGURE UNICO POR FIGCAPTION PUEDE CONTENER SEMÁNTICA figure_01.html 11
- 89. ETIQUETAS HEADER CONTENIDO INTRODUCTORIO ELEMENTOS NAVEGACIÓN SUELE CONTENER H header_01.html 12
- 91. LA SEMÁNTICA DE LAS ETIQUETAS NO DEFINE SU POSICIÓN EN EL LAYOUT 14
- 92. ETIQUETAS TIME CONTENIDO RELATIVO A TIEMPO HORAS, SEMANAS, AÑOS... CONTEXTO ESCRITO time_01.html 15
- 93. ETIQUETAS VIDEO & AUDIO NATIVO, SIN PLUGIN FLASH USABILIDAD ATRIBUTOS ESPECÍFICOS FALLBACK video_01.html 16
- 94. ETIQUETAS CANVAS DEPENDIENTE DE JS DINÁMICOS / INTERACTIVOS JUEGOS canvas_01.html 17
- 95. ATRIBUTOS MÁS ESPECÍFICOS FUNCIONALES -> UX 18
- 96. ATRIBUTOS FORMULARIOS EMAIL, TEL, NUMBER, URL, SEARCH, COLOR, DATE, RANGE AUTOFOCUS, REQUIRED, MAX, MIN, PLACEHOLDER 19
- 97. REGLAS MAYOR Y MEJOR SEMÁNTICA CIERRE DE ETIQUETAS ANIDACIÓN ELIMINAR REDUNDANCIA 20
- 98. JS APIS COMPLEJIDAD EN CLIENTE PERSONALIZANDO EXPERIENCIA MAYOR CONTROL 21
- 99. JS APIS DRAG AND DROP, HISTORY, STORAGE, FULLSCREEN, GETUSERMEDIA, BATTERY, CONTENTEDITABLE... 22
- 100. CSS 3
- 101. NOVEDADES DESCARGA DE GRÁFICOS CONDICIONALES PRESENTACIÓN (MÁS Y MEJOR) CAMBIANTES PREFIJOS PROPIETARIOS 2
- 102. CSS3 MÚLTIPLES FONDOS EJE Z PROXIMIDAD TODAS LAS REGLAS background_01.html 3
- 104. CSS3 BORDER-RADIUS % & PX TL, TR, BR, BL border_01.html 5
- 105. CSS3 BOX-SHADOW OFFSET X OFFSET Y BLUR [SPREAD] COLOR [INSET] boxshadow_01.html 6
- 107. CSS3 FONT-FACE ESTANDARIZACIÓN EOT, SVG, TTF, WOFF TYPEKIT, GOOGLE FONTS ICONOS! fontface_01.html 8
- 109. CSS3 MEDIA QUERIES EM MIN-WIDTH (MOBILE FIRST) POSIBILIDADES media_queries_03.html 10
- 114. CSS3 TEXT-SHADOW OFFSET X OFFSET Y COLOR BLUR textshadow_01.html 15
- 116. CSS3 TRANSFORMACIONES 2D TRANSLATE, SKEW, ROTATE, SCALE TRANSFORM-ORIGIN transform2D_01.html 17
- 117. CSS3 TRANSFORMACIONES 3D PERSPECTIVE (DEPTH) TRANSFORM-STYLE: PRESERVE-3D TRANSITION transform3D_01.html 18
- 120. CSS3 ANIMATION ANIMACIONES DELAY, DIRECTION, DURATION ITERATION-COUNT, NAME PLAY-STATE, FILL-MODE, TIMING-FUNCTION 21
- 121. CSS3 KEYFRAMES ANIMACIONES DIRECTRIZ @ FROM, TO (SIMPLES) POSICIÓN EN EL TIEMPO % 22
- 122. BUENAS PRÁCTICAS FALLBACK MODERNIZR.JS REQUIRE.JS PREFIJOS PROPIETARIOS ANIMACIÓN POR CLASES 23
- 123. A SS SC
- 124. PREPROCESO CAPA DE ABSTRACCIÓN SEPARACIÓN: DEV - PROD LENGUAJE DE PROGRAMACIÓN ESCALABILIDAD TIME SAVER 2
- 126. SASS VARIABLES $COLOR : #32CBFF $PADDING: 1em OPERADORES Y MÉTODOS 4
- 129. SASS MIXINS FUNCIONES @MIXIN DECLARACIÓN @INCLUDE LLAMADA ACEPTAN PARÁMETROS 7
- 130. SASS EXTEND CLASES @EXTEND .REGLA COMPILA SELECTORES MÚLTIPLES 8
- 131. 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
- 134. SASS COLOR MÉTODOS RGBA, LIGHTEN, DARKEN, INVERT, GRAYSCALE, DESATURATE, ALPHA 12
- 135. SASS NUMBER MÉTODOS PERCENTAGE, ROUND, CEIL, FLOOR, ABS 13
- 136. SASS LIST MÉTODOS LENGTH, NTH, JOIN, APPEND, INDEX 14
- 139. SISTEMAS DE DISEÑO GUIAS DE ESTILO COMPONENTES FRAMEWORKS ATOMIC DESIGN 2
- 143. “TINY BOOTSTRAPS, FOR EVERY CLIENT” DAVE RUPERT 6
- 144. “RESPONSIVE DELIVERABLES SHOULD LOOK A LOT LIKE FULLY-FUNCTIONING BOOTSTRAP-STYLE SYSTEMS CUSTOM TAILORED FOR YOUR CLIENT’S NEEDS” DAVE RUPERT 7
- 145. TOMEMOS UN FRAMEWORK COMO PUNTO DE PARTIDA 8
- 146. FRAMEWORKS VENTAJAS FÁCIL DE PROBAR WORKFLOW DEFINIDO SINTAXIS SIMILAR FUENTE DE APRENDIZAJE 9
- 148. “RESPONSIVE DELIVERABLES SHOULD LOOK A LOT LIKE FULLY-FUNCTIONING BOOTSTRAP-STYLE SYSTEMS CUSTOM TAILORED FOR YOUR CLIENT’S NEEDS” DAVE RUPERT 11
- 150. ATOMIC DESIGN 13
- 153. ÁTOMOS ELEMENTOS BÁSICOS ETIQUETAS ABSTRACCIÓN NO SEGMENTABLES POCO ÚTILES EN SI MISMOS FÁCIL MANIPULACIÓN 16
- 155. MOLÉCULAS GRUPO DE ÁTOMOS UNIDO MÁS ESPECÍFICOS PUEDEN REPETIRSE SON LOS HUESOS DEL ESQUELETO ESCALABILIDAD 18
- 157. ORGANISMOS COMPUESTOS POR MOLÉCULAS ENTIDAD PROPIA REUSABLES ESCALABLES PERSONALIZABLES 20
- 159. PLANTILLAS WIREFRAMES DOCUMENTO HTML MUY CONCRETO VISIBILIDAD CLIENTE=DECISIONES FUTURIBLE PROYECTO FINAL 22
- 161. PÁGINAS INSTANCIAS ESPECÍFICA CONTENIDO FINAL PROCESO DE TESTING PROYECTO FINAL 24
- 164. ATOMIC DESIGN METODOLOGÍA SISTEMA DE DISEÑO EFICAZ TRANSVERSAL CONSTRUCTIVO 27
- 166. PHP STYLUS COMPASS CODEKIT HAMMER LESS SASS EMMET GIT JADE HAML SUBLIME INCLUDE BOURBON JQUERY MODERNIZR POLYFILLS 29
- 167. RESPONSIVE IMAGES
- 171. LO IDEAL 5
- 173. 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
- 175. CARGA POSTERIOR <img class=”responsive-image” src="small.jpg"> if ( layout == “medium”) { replaceImages(‘medium’); } else if ( layout == “large”) { replaceImages(‘large’); } 9
- 176. SOLUCIONES COMPRESSIVE IMAGES ALTA CALIDAD FUENTE PHOTOSHOP IMÁGENES DE FONDO 10
- 177. COMPRESORES HTTP://PNGMINI.COM/ HTTP://IMAGEOPTIM.COM HTTP://TINYPNG.ORG HTTP://JPEGMINI.COM 11
- 179. PUNTO DE PARTIDA MOBILE FIRST INVENTARIO DE CONTENIDOS ESTRATEGIA DE CONTENIDOS JAVASCRIPT 2
- 182. HACIA ABAJO MODERNIZR CSS YEP / NOPE TOUCH 5
- 183. HACIA ABAJO POLYFILLS JS PLUGINS SHIV / SHIM 6
- 184. HACIA ABAJO COMENTARIOS CONDICIONALES <!--[if IE]> ... <![endif]--> lt, gt, lte, gte, !, |, & 7
- 185. HACIA ABAJO CSS HACKS * html p { margin: 1em; } p { _margin: 1em; } p { *margin: 1em; } <IE7 <IE8 <IE9 8
- 186. HACIA ARRIBA CUTTING THE MUSTARD AJAX 9
- 187. HACIA ARRIBA CUTTING THE MUSTARD BBC EXPERIENCIA BASE EXPERIENCIA PREMIUM 10
- 188. if ( 'querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { CUT THE MUSTARD! }
- 189. 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
- 190. NAVEGADORES?? IE8BLACKBERRY OS5NOKIA S60 V6NOKIA S40 ALL OTHER SYMBIAN VARIANTS WINDOWS 7 PHONE (PRE-MANGO) 13
- 191. MEJOR JS if ( 'querySelector' in document && 'localStorage' in window && Array.prototype.forEach) {} 14
- 192. MEJOR JS var lista = document.querySelectorAll('.trabajo'); [].forEach.call(lista, function (trabajo) { trabajo.addEventListener('click', loquesea) }); 15
- 193. HACIA ARRIBA AJAX CONTENIDO ADICIONAL FUNCIONALIDAD ADICIONAL MEDIA QUERIES ATRIBUTO DATA 16
- 194. TOUCH EVENTS
- 196. OPTIMIZANDO
- 198. CLIENTE SPRITES @FONT-FACE (ICONOS) COMPACTAR ARCHIVOS REDUCIR PETICIONES CSS3 5
- 200. HERRAMIENTAS GTMETRIX PAGESPEED YSLOW W3 TOTAL CACHE (wordpress) 7