• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Curso responsive web design  - Redradix School
 

Curso responsive web design - Redradix School

on

  • 1,629 views

Documentación utilizada para el curso de Responsive Web Design

Documentación utilizada para el curso de Responsive Web Design

Statistics

Views

Total Views
1,629
Views on SlideShare
1,609
Embed Views
20

Actions

Likes
5
Downloads
71
Comments
0

1 Embed 20

https://twitter.com 20

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Curso responsive web design  - Redradix School Curso responsive web design - Redradix School Presentation Transcript

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