Curso Responsive Design

8/15/2019 Curso Responsive Design

1/200

RESPONSIVE

WEB DESIGN


2/200

2

UN POCO DEHISTORIA


3/200

3

1440GUTENBERG INVENTA

LA IMPRENTA MODERNA


4/200

4

BERNERS-LEE PROPONEEL LENGUAJE HTML

1991


5/200

20

5

PAPEL

600

DIGITAL


6/200

6

CAMBIOS

RGB

PX

COLOR

FUENTES

DIMENSIONES

CMYK

MM


7/200

7

EL CAMBIO

PAPEL LIENZO PANTALLA


8/200

8

DIMENSIONESCERRADAS

EN LAS QUE

DEFINIR YESTRUCTURAR

EL CONTENIDO


9/200

9

PRIMERA DECISIÓN.wrapper

{

width: 960px;

margin: 0 auto;

}


10/200

10

1024X768

2008

2009

20102011

2012

40%

32%

24%18%

14%


11/200

11


12/200

12


13/200

13


14/200

14@brad_frost


15/200

15@brad_frost


16/200

16@brad_frost


17/200

20

17

PAPEL

600

DIGITAL


18/200

18

ADAPTARNOS ALNUEVO MEDIO

EMPLEANDOTÉCNICAS VIEJAS


19/200

19

ADAPTARNOS ATODOS LOS MEDIOS

EMPLEANDOTÉCNICAS NUEVAS


20/200

20

A LIST APART

@rwd

@beep


21/200

RESPONSIVE WEB DESIGN


22/200

22

RWDESTRUCTURA FLUIDA

MEDIOS FLEXIBLESFUENTES

MEDIAQUERIES

VIEWPORT


23/200

23



MEDIAQUERIES

VIEWPORT

CSS

CSSCSS

CSS

HTML


24/200

24

OLVÍDATE DELPIXEL

Y PIENSA ENPROPORCIONES


25/200

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


26/200

26

SMASHING MAGAZINE


27/200

27

RWD

ADAPTIVE


28/200

28

DESKTOP FIRST


29/200

29

MOBILE FIRST


30/200

30

PROGRESSIVEENHANCEMENT

HMTL

CSS JS


31/200

31http://www.besquare.me/session/cutting-the-mustard/

https://speakerdeck.com/tmaslen/cutting-the-mustard-future-friendly-browser-support


32/200

32

“IF SOMEONE SAYS THERE'S

ONLY ONE TRUE WAY

OF WORKING AND

DESIGNING ONLINE,

LOOK AT THEM FUNNY”

ETHAN MARCOTTE


33/200

33

DEMO


34/200

RESPONSIVE WEB DESIGN


35/200

2



MEDIAQUERIES

VIEWPORT

CSS

CSSCSS

CSS

HTML


36/200

3

ESTRUCTURA FLUIDAUSO DE PORCENTAJES

% SOBRE ANCHO DEL PADRE

AFECTA AL EJE VERTICAL*

fluid_layout_01.html


37/200

4

ESTRUCTURA FLUIDAMODELO DE CAJA

MARGIN + BORDER + PADDING

BOX-SIZING: BORDER-BOX

fluid_layout_02.html


38/200

5

ESTRUCTURA FLUIDAUSO DE PIXEL

SOLO PARA DETALLES

ELEMENTOS FIJOS


39/200

6

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.


40/200

7

ESTRUCTURA FLUIDA

ELEMENTO / CONTEXTO = PER (*100)


41/200

8

ESTRUCTURA FLUIDAFRAMEWORKS

BASADOS EN SASS

EXTERNOS: BOURBON, INUIT

PROPIOS

grids_demo.html


42/200

9

PORCENTAJES

HORIZONTALESEM

VERTICALES

BUENAS PRÁCTICAS


43/200

10

MEDIOS FLEXIBLESETIQUETA

MAX-WIDTH: 100%;

WIDTH: 100%;

HEIGHT: AUTO;

fluid_media_01.html


44/200


45/200

12

FUENTES EMUNIDAD DE MEDIDA RELATIVA

1em = 16px

SE HEREDA

AFECTA A PADDING Y MARGIN

fluid_typeface_01.html


46/200

13

FUENTES EMUNIDAD DE MEDIDA RELATIVA

FONT-SIZE: 1.3125em (21px)

PROPORCIONES


47/200

14

MEDIA QUERIESCAMBIAR LA DISPOSICIÓN

@media screen and ( condición )

min-width (PA)

max-width (GD)

media_queries_01.html


48/200

15

MEDIA QUERIESUNIDADES DE MEDIDA

@media ( min-width: 36em )


49/200

16

MEDIA QUERIESMULTIPLES ESCENARIOS

@media ( orientation: portrait )

orientation, device-aspect-ratio,

scan, device-pixel-ratio

media_queries_03.html


50/200

17

MEDIA QUERIESCONCATENACIÓN

@media ( orientation: portrait )

and (min-width:42em)


51/200

18

MEDIA QUERIESSIN ATACAR A DISPOSITIVOS

EL CONTENIDO DICTA EL

PUNTO DE CORTE

(BREAKPOINT)

http://screensiz.es


52/200

19

VIEWPORT

min-scale=1, max-scale=1, user-scalable=no


53/200

20



MEDIAQUERIES

VIEWPORT

CSS

CSSCSS

CSS

HTML


54/200

MOBILE FIRST


55/200

DESKTOP FIRST


56/200

DESKTOP FIRSTVENTAJAS

LO CONOCEMOS

MODERNIZAR SIN REHACER


57/200

DESKTOP FIRSTDESVENTAJAS

MÁS ESFUERZO (HTML Y CSS)

TIEMPOS DE CARGA

OCULTACIÓN DE CONTENIDOS


58/200

MOBILE FIRST


59/200

MOBILE FIRSTDESVENTAJAS

NO LO CONOCEMOS

TAMAÑO DE PANTALLA

VELOCIDAD DE CONEXIÓN

MODOS DE USO (CONTEXTO)


60/200

CONVERTIR LOSINCONVENIENTES

ENVENTAJAS


61/200

MOBILE FIRSTDESVENTAJAS

TAMAÑO DE PANTALLA

VELOCIDAD DE CONEXIÓN

MODOS DE USO (CONTEXTO)


62/200

MOBILE FIRSTVENTAJAS

TAMAÑO DE PANTALLA CONTENIDO

VELOCIDAD DE CONEXIÓN RAPIDEZ

MODOS DE USO (CONTEXTO) UX


63/200

10

CONTENIDOPOCO ESPACIO = IMPRESCINDIBLENO SUPERFLUO

COMUNICACIÓN MÁS DIRECTA

LEGIBILIDAD


64/200

11

DEATH TO BULLSHIT


65/200

12

VELOCIDAD DE CARGA

“THE WEB SHOULD BE FAST” GOOGLE


66/200

13

VELOCIDAD DE CARGAELIMINAR REDIRECCIONESMINIMIZAR PETICIONES

CSS (SPRITES, CSS3)

FONTFACE

COMPACTAR RECURSOS


67/200

14

CONTEXTO

DESKTOP

ATENCIÓN ELEVADA

PANTALLA GRANDE

CONEXIÓN RÁPIDA

POSICIÓN ESTÁTICA


68/200

15

CONTEXTO

MOVIL

POCA ATENCIÓN

PANTALLA PEQUEÑA

CONEXIÓN LENTA

POSICIÓN DINÁMICA


69/200

16

CONTEXTO

MOVIL

UN OJO, UN DEDO

INPUT TÁCTIL

SENSORES


70/200

17

CONTEXTO

1 OJO, UN DEDO

INPUT TÁCTIL

SENSORES

DISEÑO VISUAL

UX

PERSONALIZACIÓN


71/200

18

DIMENSIONES

APPLE

MICROSOFT

44PX

34PX


72/200

19

GESTOS

TAP DOBLE TAP


73/200

20

GESTOS

SWIPE FAST SWIPE


74/200

21

GESTOS

PINCH SPREAD


75/200

22

GESTOS

LOS GESTOS SON LOS

ATAJOS DE TECLADOEN DISPOSITIVOS TÁCTILES


76/200

23

INPUT TÁCTIL

NUI

EL CONTENIDO ES LA UI

ELIMINAMOS ABSTRACCIONES CURVA DE APRENDIZAJE

REDUCIR SUPERFLUOS


77/200

24

SENSORES

ACELERÓMETRO, GIROSCOPIO,

GEOLOCALIZACIÓN, GESTOS,

ORIENTACIÓN DE PANTALLA,VIDEO, AUDIO, CONECTIVIDAD...


78/200

HTML 5


79/200

2

NOVEDADES

DECLARACIÓN

NUEVAS ETIQUETAS

NUEVOS ATRIBUTOSREGLAS

JS APIs


80/200

DECLARACIÓN

HTML Y PUNTO

NUESTRA RESPONSABILIDAD EL NAVEGADOR CONFÍA

3


81/200

ETIQUETAS

SEMÁNTICAS Y ESTRUCTURALES

DEFINEN ESTRUCTURA

AFECTAN AL OUTLINE DIV PARA DECORACIÓN

4


82/200

ETIQUETASSEMÁNTICAS Y ESTRUCTURALES

ARTICLE, ASIDE, FIGURE,

FIGCAPTION, FOOTER, HEADER,HGROUP, NAV, SECTION, TIME,

AUDIO, VIDEO, CANVAS,

MAIN?, PICTURE? 5


83/200

ETIQUETASSECTION

CONTENIDO GENÉRICO

ESTRUCTURADO

ARTICLE, ASIDE, NAV6


84/200

ETIQUETASARTICLE

CONTENIDO ESTRUCTURAL

DISTRIBUIBLE DE MANERAINDEPENDIENTE

7article_01.html


85/200

ETIQUETASASIDE

CONTENIDO SECUNDARIO

RELACIONADO A ELEMENTO

8aside_01.html


86/200

ETIQUETASNAV

SECCIÓN RELATIVA A ENLACES

DENTRO DEL DOCUMENTO O DELA PÁGINA

9nav_01.html


87/200

ETIQUETASFIGURE

SECCIÓN DE CONTENIDO VISUAL

MULTIPLES MEDIOS

10figure_01.html


88/200

ETIQUETASFIGCAPTION

LEYENDA O PIE RELATIVO AL

CONTENIDO VISUAL DE FIGUREUNICO POR FIGCAPTION

PUEDE CONTENER SEMÁNTICA11figure_01.html


89/200

ETIQUETASHEADER

CONTENIDO INTRODUCTORIO

ELEMENTOS NAVEGACIÓNSUELE CONTENER H

12header_01.html


90/200

ETIQUETASFOOTER

CONTENIDO SECUNDARIO

NO PRESCINDIBLE

13footer_01.html


91/200

14

LA SEMÁNTICADE LAS ETIQUETAS

NO DEFINE SUPOSICIÓN EN EL LAYOUT


92/200

ETIQUETASTIME

CONTENIDO RELATIVO A TIEMPO

HORAS, SEMANAS, AÑOS...CONTEXTO ESCRITO

15time_01.html


93/200

ETIQUETASVIDEO & AUDIO

NATIVO, SIN PLUGIN FLASH

USABILIDADATRIBUTOS ESPECÍFICOS

FALLBACK 16video_01.html


94/200

ETIQUETASCANVAS

DEPENDIENTE DE JS

DINÁMICOS / INTERACTIVOSJUEGOS

17canvas_01.html


95/200

ATRIBUTOS

MÁS ESPECÍFICOS

FUNCIONALES -> UX

18


96/200

ATRIBUTOS

FORMULARIOS

EMAIL, TEL, NUMBER, URL,

SEARCH, COLOR, DATE, RANGE

AUTOFOCUS, REQUIRED, MAX,

MIN, PLACEHOLDER 19


97/200

REGLAS

MAYOR Y MEJOR SEMÁNTICA

CIERRE DE ETIQUETAS

ANIDACIÓN ELIMINAR REDUNDANCIA

20


98/200

JS APIS

21

COMPLEJIDAD EN CLIENTE

PERSONALIZANDO EXPERIENCIAMAYOR CONTROL


99/200

JS APIS

DRAG AND DROP, HISTORY,

STORAGE, FULLSCREEN,

GETUSERMEDIA, BATTERY,CONTENTEDITABLE...

22


100/200

CSS 3


101/200

2

NOVEDADES

DESCARGA DE GRÁFICOS

CONDICIONALES

PRESENTACIÓN (MÁS Y MEJOR)CAMBIANTES

PREFIJOS PROPIETARIOS


102/200

CSS3MÚLTIPLES FONDOS

EJE Z PROXIMIDAD

TODAS LAS REGLAS

3background_01.html


103/200

CSS3BACKGROUND-SIZE

COVER

CONTAIN % & PX

4background_02.html


104/200

CSS3BORDER-RADIUS

% & PX

TL, TR, BR, BL

5border_01.html


105/200

CSS3BOX-SHADOW

OFFSET X OFFSET Y BLUR

[SPREAD] COLOR [INSET]

6boxshadow_01.html


106/200

CSS3COLOR

RGB

RGBA HSL

TRANSPARENT7color_01.html


107/200

CSS3FONT-FACE

ESTANDARIZACIÓN

EOT, SVG, TTF, WOFF TYPEKIT, GOOGLE FONTS

ICONOS!8fontface_01.html


108/200

CSS3DEGRADADOS

SINTAXIS VARIABLE

ES BACKGROUND-IMAGE FALLBACK

9gradient_01.html


109/200

CSS3MEDIA QUERIES

EM

MIN-WIDTH (MOBILE FIRST) POSIBILIDADES

10media_queries_03.html


110/200

CSS3MÚLTIPLES COLUMNAS

COLUMNS

COLUMN-GAP

11columns_01.html


111/200

CSS3OPACITY

ESTANDAR

0 A 1

12


112/200

CSS3POINTER-EVENTS

AUTO/NONE

ELIMINAMOS FUNCIONALIDAD

SIN EMPLEAR JS13


113/200

CSS3TEXT-OVERFLOW

CLIP

ELLIPSIS “...”

14textoverflow_01.html


114/200

CSS3TEXT-SHADOW

OFFSET X OFFSET Y BLUR

COLOR

15textshadow_01.html


115/200

PSEUDO

SELECTORES:after

:before


116/200

CSS3TRANSFORMACIONES 2D

TRANSLATE, SKEW,

ROTATE, SCALE

TRANSFORM-ORIGIN

17transform2D_01.html


117/200

CSS3TRANSFORMACIONES 3D

PERSPECTIVE (DEPTH)

TRANSFORM-STYLE: PRESERVE-3D TRANSITION

18transform3D_01.html


118/200

TRANSICIONES

PROPERTY (ALL), DURATION

TIMING-FUNCTION, DELAY

CSS3

19


119/200

ANIMACIONES

ANIMATION

KEYFRAMES

CSS3

20


120/200

ANIMATION ANIMACIONES

DELAY, DIRECTION, DURATION

ITERATION-COUNT, NAME PLAY-STATE, FILL-MODE,

TIMING-FUNCTION

CSS3

21


121/200

KEYFRAMES ANIMACIONES

DIRECTRIZ @

FROM, TO (SIMPLES) POSICIÓN EN EL TIEMPO %

CSS3

22


122/200

23

BUENAS PRÁCTICAS

FALLBACK

MODERNIZR.JS

REQUIRE.JSPREFIJOS PROPIETARIOS

ANIMACIÓN POR CLASES


123/200

S SS

A

C


124/200

2

PREPROCESO

CAPA DE ABSTRACCIÓN

SEPARACIÓN: DEV - PROD

LENGUAJE DE PROGRAMACIÓNESCALABILIDAD

TIME SAVER


125/200

3

HERRAMIENTAS

CODEKIT PREPROS


126/200

SASS

VARIABLES

$COLOR : #32CBFF

$PADDING: 1em OPERADORES Y MÉTODOS

4


127/200

SASS

ANIDACIÓN

SELECTORES DESCENDENTES

MEDIA QUERIES

5


128/200

SASS

ESTRUCTURA

ESCALABILIDAD

ORGANIZACIÓN

@IMPORT

6


129/200

SASS

MIXINS FUNCIONES

@MIXIN DECLARACIÓN

@INCLUDE LLAMADA

ACEPTAN PARÁMETROS

7


130/200

SASS

EXTEND CLASES

@EXTEND .REGLA

COMPILA SELECTORES MÚLTIPLES

8


131/200

9

MIXIN vs EXTEND

.module{ background: #fff; color: #444; }

.main_module{ @extend .module; min-height: 3em; }

.sidebar_module{ @extend .module; min-height: 2em; }

.module, .main_module, .sidebar_module{ background: #fff; color: #444; }

.main_module{ min-height: 3em; }

.sidebar_module{ min-height: 2em; }

@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; }


132/200

SASS

SENTENCIAS

@IF

@FOR @EACH

@WHILE10


133/200

SASS

MÉTODOS

COLOR

NUMBER LIST

11


134/200

SASS

COLOR MÉTODOS

RGBA, LIGHTEN, DARKEN,

INVERT, GRAYSCALE,DESATURATE, ALPHA

12


135/200

SASS

NUMBER MÉTODOS

PERCENTAGE, ROUND, CEIL,

FLOOR, ABS

13


136/200

SASS

LIST MÉTODOS

LENGTH, NTH, JOIN, APPEND,

INDEX

14


137/200

15

SASS APIhttp://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html


138/200

ATOMIC

DESIGN

@brad_frost


139/200

2

SISTEMAS DE DISEÑO

GUIAS DE ESTILO

COMPONENTES

FRAMEWORKSATOMIC DESIGN


140/200

GUIAS DE ESTILOMODULARIDAD

TIPOGRAFÍAS

COLORES REJILLA

ELEMENTOS3


141/200

COMPONENTESINVENTARIO

ESTILO VISUAL

PERSONALIZACIÓN UI

BIBLIOTECA DE RECURSOS4


142/200

FRAMEWORKSINVENTARIO

FOUNDATION

BOOTSTRAP INUIT MOLA!

5


143/200

6

“TINY BOOTSTRAPS,

FOR EVERY CLIENT”

DAVE RUPERT


144/200

7

“RESPONSIVE DELIVERABLES

SHOULD LOOK A LOT LIKEFULLY-FUNCTIONING

BOOTSTRAP-STYLE SYSTEMSCUSTOM TAILORED FOR YOUR

CLIENT’S NEEDS”

DAVE RUPERT


145/200

8

TOMEMOS UN FRAMEWORKCOMO PUNTO DE PARTIDA


146/200

FRAMEWORKSVENTAJAS

FÁCIL DE PROBAR

WORKFLOW DEFINIDO SINTAXIS SIMILAR

FUENTE DE APRENDIZAJE9


147/200

FRAMEWORKSDESVENTAJAS

CONVENCIONES AJENAS

GLOBALES IMPERSONALIZABLES

INCOMPATIBILIDADES10


148/200

11

“RESPONSIVE DELIVERABLES

SHOULD LOOK A LOT LIKEFULLY-FUNCTIONING

BOOTSTRAP-STYLE SYSTEMSCUSTOM TAILORED FOR YOUR

CLIENT’S NEEDS”

DAVE RUPERT


149/200

12

CREEMOSNUESTRO

PROPIOFRAMEWORK


150/200

13

ATOMIC DESIGN


151/200

ATOMIC DESIGN

14

ÁTOMOS MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS

Á


152/200

ÁTOMOS

15


Á


153/200

ÁTOMOS

ELEMENTOS BÁSICOS ETIQUETAS

ABSTRACCIÓN

NO SEGMENTABLESPOCO ÚTILES EN SI MISMOS

FÁCIL MANIPULACIÓN

16

É


154/200

MOLÉCULAS

17


É


155/200

MOLÉCULAS

GRUPO DE ÁTOMOS UNIDO

MÁS ESPECÍFICOS

PUEDEN REPETIRSESON LOS HUESOS DEL ESQUELETO

ESCALABILIDAD

18


156/200

ORGANISMOS

19



157/200

ORGANISMOS

COMPUESTOS POR MOLÉCULAS

ENTIDAD PROPIA

REUSABLESESCALABLES

PERSONALIZABLES

20


158/200

PLANTILLAS

21



159/200

PLANTILLAS

WIREFRAMES

DOCUMENTO HTML

MUY CONCRETOVISIBILIDAD CLIENTE=DECISIONES

FUTURIBLE PROYECTO FINAL

22

ÁG


160/200

PÁGINAS

23


PÁGINAS


161/200

PÁGINAS

INSTANCIAS ESPECÍFICA

CONTENIDO FINAL

PROCESO DE TESTINGPROYECTO FINAL

24

ATOMIC DESIGN


162/200

ATOMIC DESIGN

25


ATOMIC DESIGN


163/200

ATOMIC DESIGN

26


ETIQUETAS CLASES SECCIONES WIREFRAMES VISTAS


164/200


165/200

28

HERRAMIENTAS

Y LENGUAJES

PHP STYLUSCOMPASS


166/200

29

PHP STYLUS COMPASS

CODEKIT HAMMER LESS

SASS EMMETGIT JADE

HAML SUBLIME INCLUDEBOURBONJQUERY

MODERNIZR POLYFILLS


167/200

RESPONSIVE

IMAGES

EL COMIENZO


168/200

EL COMIENZO

2

IMG

{

MAX-WIDTH: 100%;

}

PROBLEMAS


169/200

PROBLEMAS

3

RENDIMIENTO

PESOENCUADRE

FACTORES


170/200

FACTORES

4

ENCUADRE

TIEMPOS DE CARGA

SEMÁNTICA

TECNOLOGÍA HDPI

LO IDEAL


171/200

5

LO IDEAL

SOLUCIONES


172/200

SOLUCIONES

6

PICTURE

SIMILAR A VIDEO

JS SRCSET

SOPORTE W3C

PICTURE


173/200

7

Accessible text

Accessible text

PICTURE

SOLUCIONES


174/200

SOLUCIONES

8

CARGA POSTERIOR

MOBILE FIRST

JS HDPI

PERSONALIZABLE

CARGA POSTERIOR


175/200

9

if ( layout == “medium”)

{

replaceImages(‘medium’);

}

else if ( layout == “large”)

{

replaceImages(‘large’);

}

CARGA POSTERIOR

SOLUCIONES


176/200

SOLUCIONES

10

COMPRESSIVE IMAGES

ALTA CALIDAD FUENTE

PHOTOSHOP IMÁGENES DE FONDO

COMPRESORES


177/200

COMPRESORES

11

HTTP://PNGMINI.COM/

HTTP://IMAGEOPTIM.COM

HTTP://TINYPNG.ORG

HTTP://JPEGMINI.COM


178/200

AMPLIANDOLA

EXPERIENCIA

PUNTO DE PARTIDA


179/200

PUNTO DE PARTIDA

2

MOBILE FIRST

INVENTARIO DE CONTENIDOS

ESTRATEGIA DE CONTENIDOS

JAVASCRIPT

METODOLOGÍAS


180/200

METODOLOGÍAS

3

DEGRADACIÓN ELEGANTE

VSAMPLIACIÓN PROGRESIVA

HACIA ABAJO


181/200

HACIA ABAJO

4

MODERNIZR

POLYFILLS

COMENTARIOS CONDICIONALES

CSS HACKS

HACIA ABAJO


182/200

HACIA ABAJO

5

MODERNIZR

CSS

YEP / NOPE

TOUCH

HACIA ABAJO


183/200

HACIA ABAJO

6

POLYFILLS

JS PLUGINS

SHIV / SHIM

HACIA ABAJO


184/200

HACIA ABAJO

7

COMENTARIOS CONDICIONALES

lt, gt, lte, gte, !, |, &

HACIA ABAJO


185/200

HACIA ABAJO

8

CSS HACKS

* html p { margin: 1em; }

p { _margin: 1em; }p { *margin: 1em; }


186/200

HACIA ARRIBA

9

CUTTING THE MUSTARD

AJAX

HACIA ARRIBA


187/200

10

CUTTING THE MUSTARD

BBC

EXPERIENCIA BASE EXPERIENCIA PREMIUM

HACIA ARRIBA


188/200

NAVEGADORES


189/200

12

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

NAVEGADORES

NAVEGADORES??


190/200

13

IE8-

BLACKBERRY OS5-

NOKIA S60 V6-

NOKIA S40ALL OTHER SYMBIAN VARIANTS

WINDOWS 7 PHONE (PRE-MANGO)

NAVEGADORES??

MEJOR JS


191/200

if ( 'querySelector' in document &&

'localStorage' in window &&

Array.prototype.forEach)

{}

14

MEJOR JS

MEJOR JS


192/200

var lista = document.querySelectorAll('.trabajo');

[].forEach.call(lista, function (trabajo)

{

trabajo.addEventListener('click', loquesea)

});

15

MEJOR JS

HACIA ARRIBA


193/200

16

AJAX

CONTENIDO ADICIONAL

FUNCIONALIDAD ADICIONAL MEDIA QUERIES

ATRIBUTO DATA

HACIA ARRIBA


194/200

TOUCH

EVENTS

EVENTOS


195/200

EVENTOS

2

TOUCHSTART

TOUCHMOVE

TOUCHENDE.TOUCHES -> TOUCHLIST

e.pageX, e.pageY


196/200

OPTIMIZANDO

DOS FRENTES


197/200

DOS FRENTES

4

CLIENTE

VSSERVIDOR

CLIENTE


198/200

CLIENTE

5

SPRITES

@FONT-FACE (ICONOS)

COMPACTAR ARCHIVOSREDUCIR PETICIONES

CSS3

SERVIDOR


199/200

SERVIDOR

6

CACHEAR ASSETS

GZIP

PÁGINAS ESTÁTICAS

EMPLEAR CDN

HERRAMIENTAS


200/200

HERRAMIENTAS

GTMETRIX

PAGESPEED

YSLOW

W3 TOTAL CACHE (wordpress)

Documents

Curso Responsive Design