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 ...
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-friendl...
“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 ...
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....
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-r...
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-scalab...
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...
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
fi...
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; }
.sideb...
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’...
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’...
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">
<...
SOLUCIONES
CARGA POSTERIOR
MOBILE FIRST
JS
HDPI
PERSONALIZABLE
8
CARGA POSTERIOR
<img class=”responsive-image” src="small.jpg">

if ( layout == “medium”)
{
replaceImages(‘medium’);
}
else...
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...
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.addEventLi...
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
Curso responsive web design  - Redradix School
Upcoming SlideShare
Loading in...5
×

Curso responsive web design - Redradix School

2,609

Published on

Documentación utilizada para el curso de Responsive Web Design

Published in: Technology, Education

Curso responsive web design - Redradix School

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

    Clipping is a handy way to collect important slides you want to go back to later.

×