Curso responsive web design - Redradix School

RESPONSIVE WEB DESIGN

2

UN POCO DE HISTORIA

3

1440GUTENBERG INVENTALA IMPRENTA MODERNA

4

BERNERS-LEE PROPONEEL LENGUAJE HTML

1991

20

5

PAPEL

600

DIGITAL

6

CAMBIOS

RGB

PX

COLOR

FUENTES

DIMENSIONES

CMYK

MM

7

EL CAMBIO

PAPEL LIENZO PANTALLA

8

DIMENSIONES CERRADASEN LAS QUE DEFINIR Y

ESTRUCTURAR EL CONTENIDO

9

PRIMERA DECISIÓN

.wrapper{ width: 960px; margin: 0 auto;}

10

1024X768

20082009201020112012

40%

32%

24%

18%

14%

13@globalmoxie

14@brad_frost

15@brad_frost

16@brad_frost

20

17

PAPEL

600

DIGITAL

18

ADAPTARNOS AL NUEVO MEDIOEMPLEANDO

TÉCNICAS VIEJAS

19

ADAPTARNOS A TODOS LOS MEDIOS

EMPLEANDOTÉCNICAS NUEVAS

20

A LIST APART

@rwd

@beep

22

RWD

ESTRUCTURA FLUIDA

MEDIOS FLEXIBLES

FUENTES

MEDIAQUERIES

VIEWPORT

23

RWD

ESTRUCTURA FLUIDA

MEDIOS FLEXIBLES

FUENTES

MEDIAQUERIES

VIEWPORT

CSS

CSS

CSS

CSS

HTML

24

OLVÍDATE DELPIXEL

Y PIENSA ENPROPORCIONES

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

SMASHING MAGAZINE

27

RWD

ADAPTIVE

28

DESKTOP FIRST

29

MOBILE FIRST

30

PROGRESSIVEENHANCEMENT

HMTL

CSS JS

31

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

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

33

DEMO

2

RWD

ESTRUCTURA FLUIDA

MEDIOS FLEXIBLES

FUENTES

MEDIAQUERIES

VIEWPORT

CSS

CSS

CSS

CSS

HTML

CSS 3

ESTRUCTURA FLUIDAUSO DE PORCENTAJES

% SOBRE ANCHO DEL PADRE

AFECTA AL EJE VERTICAL*

fluid_layout_01.html

CSS 4

ESTRUCTURA FLUIDAMODELO DE CAJA

MARGIN + BORDER + PADDING

BOX-SIZING: BORDER-BOX

fluid_layout_02.html

CSS 5

ESTRUCTURA FLUIDAUSO DE PIXEL

SOLO PARA DETALLES

ELEMENTOS FIJOS

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.

7

ESTRUCTURA FLUIDA

ELEMENTO / CONTEXTO = PER (*100)

CSS 8

ESTRUCTURA FLUIDAFRAMEWORKS

BASADOS EN SASS

EXTERNOS: BOURBON, INUIT

PROPIOS

grids_demo.html

9

PORCENTAJESHORIZONTALES

EMVERTICALES

BUENAS PRÁCTICAS

CSS 10

MEDIOS FLEXIBLESETIQUETA <IMG>

MAX-WIDTH: 100%;

WIDTH: 100%;

HEIGHT: AUTO;

fluid_media_01.html

CSS 12

FUENTES EMUNIDAD DE MEDIDA RELATIVA

1em = 16px

SE HEREDA

AFECTA A PADDING Y MARGIN

fluid_typeface_01.html

CSS 13

FUENTES EMUNIDAD DE MEDIDA RELATIVA

FONT-SIZE: 1.3125em (21px)

PROPORCIONES

CSS 14

MEDIA QUERIESCAMBIAR LA DISPOSICIÓN

@media screen and ( condición )

min-width (PA)

max-width (GD)

media_queries_01.html

CSS 15

MEDIA QUERIESUNIDADES DE MEDIDA

@media ( min-width: 36em )

CSS 16

MEDIA QUERIESMULTIPLES ESCENARIOS

@media ( orientation: portrait )

orientation, device-aspect-ratio,

scan, device-pixel-ratio

media_queries_03.html

CSS 17

MEDIA QUERIESCONCATENACIÓN

@media ( orientation: portrait )

and (min-width:42em)

CSS 18

MEDIA QUERIESSIN ATACAR A DISPOSITIVOS

EL CONTENIDO DICTA EL

PUNTO DE CORTE

(BREAKPOINT)

http://screensiz.es

HTML 19

VIEWPORT<meta name="viewport"

content="width=device-width,

initial-scale=1">

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

20

RWD

ESTRUCTURA FLUIDA

MEDIOS FLEXIBLES

FUENTES

MEDIAQUERIES

VIEWPORT

CSS

CSS

CSS

CSS

HTML

MOBILE FIRST

DESKTOP FIRST

DESKTOP FIRSTVENTAJAS

LO CONOCEMOS

MODERNIZAR SIN REHACER

DESKTOP FIRSTDESVENTAJAS

MÁS ESFUERZO (HTML Y CSS)

TIEMPOS DE CARGA

OCULTACIÓN DE CONTENIDOS

MOBILE FIRST

MOBILE FIRSTDESVENTAJAS

NO LO CONOCEMOS

TAMAÑO DE PANTALLA

VELOCIDAD DE CONEXIÓN

MODOS DE USO (CONTEXTO)

CONVERTIR LOS INCONVENIENTES

ENVENTAJAS


TAMAÑO DE PANTALLA

VELOCIDAD DE CONEXIÓN

MODOS DE USO (CONTEXTO)


TAMAÑO DE PANTALLA CONTENIDO

VELOCIDAD DE CONEXIÓN RAPIDEZ

MODOS DE USO (CONTEXTO) UX

10

CONTENIDOPOCO ESPACIO = IMPRESCINDIBLE

NO SUPERFLUO

COMUNICACIÓN MÁS DIRECTA

LEGIBILIDAD

11

DEATH TO BULLSHIT

12

VELOCIDAD DE CARGA

“THE WEB SHOULD BE FAST” GOOGLE

13

VELOCIDAD DE CARGAELIMINAR REDIRECCIONES

MINIMIZAR PETICIONES

CSS (SPRITES, CSS3)

FONTFACE

COMPACTAR RECURSOS

14

CONTEXTODESKTOP

ATENCIÓN ELEVADA

PANTALLA GRANDE

CONEXIÓN RÁPIDA

POSICIÓN ESTÁTICA

15

CONTEXTOMOVIL

POCA ATENCIÓN

PANTALLA PEQUEÑA

CONEXIÓN LENTA

POSICIÓN DINÁMICA

16

CONTEXTOMOVIL

UN OJO, UN DEDO

INPUT TÁCTIL

SENSORES

17

CONTEXTO

1 OJO, UN DEDO

INPUT TÁCTIL

SENSORES

DISEÑO VISUAL

UX

PERSONALIZACIÓN

18

DIMENSIONES

APPLE

MICROSOFT

44PX

34PX

19

GESTOS

TAP DOBLE TAP

20

GESTOS

SWIPE FAST SWIPE

21

GESTOS

PINCH SPREAD

22

GESTOS

LOS GESTOS SON LOS

ATAJOS DE TECLADO

EN DISPOSITIVOS TÁCTILES

23

INPUT TÁCTILNUI

EL CONTENIDO ES LA UI

ELIMINAMOS ABSTRACCIONES

CURVA DE APRENDIZAJE

REDUCIR SUPERFLUOS

24

SENSORESACELERÓMETRO, GIROSCOPIO,

GEOLOCALIZACIÓN, GESTOS,

ORIENTACIÓN DE PANTALLA,

VIDEO, AUDIO, CONECTIVIDAD...

HTML 5

2

NOVEDADESDECLARACIÓN

NUEVAS ETIQUETAS

NUEVOS ATRIBUTOS

REGLAS

JS APIs

DECLARACIÓN<!DOCTYPE HTML>

HTML Y PUNTO

NUESTRA RESPONSABILIDAD

EL NAVEGADOR CONFÍA

3

ETIQUETASSEMÁNTICAS Y ESTRUCTURALES

DEFINEN ESTRUCTURA

AFECTAN AL OUTLINE

DIV PARA DECORACIÓN

4

ETIQUETASSEMÁNTICAS Y ESTRUCTURALES

ARTICLE, ASIDE, FIGURE,

FIGCAPTION, FOOTER, HEADER,

HGROUP, NAV, SECTION, TIME,

AUDIO, VIDEO, CANVAS,

MAIN?, PICTURE? 5

ETIQUETASSECTION

CONTENIDO GENÉRICO

ESTRUCTURADO

ARTICLE, ASIDE, NAV6

ETIQUETASARTICLE

CONTENIDO ESTRUCTURAL

DISTRIBUIBLE DE MANERA

INDEPENDIENTE

7article_01.html

ETIQUETASASIDE

CONTENIDO SECUNDARIO

RELACIONADO A ELEMENTO

8aside_01.html

ETIQUETASNAV

SECCIÓN RELATIVA A ENLACES

DENTRO DEL DOCUMENTO O DE

LA PÁGINA

9nav_01.html

ETIQUETASFIGURE

SECCIÓN DE CONTENIDO VISUAL

MULTIPLES MEDIOS

10figure_01.html

ETIQUETASFIGCAPTION

LEYENDA O PIE RELATIVO AL

CONTENIDO VISUAL DE FIGURE

UNICO POR FIGCAPTION

PUEDE CONTENER SEMÁNTICA11figure_01.html

ETIQUETASHEADER

CONTENIDO INTRODUCTORIO

ELEMENTOS NAVEGACIÓN

SUELE CONTENER H

12header_01.html

ETIQUETASFOOTER

CONTENIDO SECUNDARIO

NO PRESCINDIBLE

13footer_01.html

14

LA SEMÁNTICADE LAS ETIQUETAS

NO DEFINE SU POSICIÓN

EN EL LAYOUT

ETIQUETASTIME

CONTENIDO RELATIVO A TIEMPO

HORAS, SEMANAS, AÑOS...

CONTEXTO ESCRITO

15time_01.html

ETIQUETASVIDEO & AUDIO

NATIVO, SIN PLUGIN FLASH

USABILIDAD

ATRIBUTOS ESPECÍFICOS

FALLBACK 16video_01.html

ETIQUETASCANVAS

DEPENDIENTE DE JS

DINÁMICOS / INTERACTIVOS

JUEGOS

17canvas_01.html

ATRIBUTOSMÁS ESPECÍFICOS

FUNCIONALES -> UX

18

ATRIBUTOSFORMULARIOS

EMAIL, TEL, NUMBER, URL,

SEARCH, COLOR, DATE, RANGE

AUTOFOCUS, REQUIRED, MAX,

MIN, PLACEHOLDER 19

REGLASMAYOR Y MEJOR SEMÁNTICA

CIERRE DE ETIQUETAS

ANIDACIÓN

ELIMINAR REDUNDANCIA

20

JS APIS

21

COMPLEJIDAD EN CLIENTE

PERSONALIZANDO EXPERIENCIA

MAYOR CONTROL

JS APISDRAG AND DROP, HISTORY,

STORAGE, FULLSCREEN,

GETUSERMEDIA, BATTERY,

CONTENTEDITABLE...

22

2

NOVEDADES

DESCARGA DE GRÁFICOS

CONDICIONALES

PRESENTACIÓN (MÁS Y MEJOR)

CAMBIANTES

PREFIJOS PROPIETARIOS

CSS3

MÚLTIPLES FONDOS

EJE Z PROXIMIDAD

TODAS LAS REGLAS

3background_01.html

CSS3

BACKGROUND-SIZE

COVER

CONTAIN

% & PX

4background_02.html

CSS3

BORDER-RADIUS

% & PX

TL, TR, BR, BL

5border_01.html

CSS3

BOX-SHADOW

OFFSET X OFFSET Y BLUR

[SPREAD] COLOR [INSET]

6boxshadow_01.html

CSS3

COLOR

RGB

RGBA

HSL

TRANSPARENT7color_01.html

CSS3

FONT-FACE

ESTANDARIZACIÓN

EOT, SVG, TTF, WOFF

TYPEKIT, GOOGLE FONTS

ICONOS!8fontface_01.html

CSS3

DEGRADADOS

SINTAXIS VARIABLE

ES BACKGROUND-IMAGE

FALLBACK

9gradient_01.html

CSS3

MEDIA QUERIES

EM

MIN-WIDTH (MOBILE FIRST)

POSIBILIDADES

10media_queries_03.html

CSS3

MÚLTIPLES COLUMNAS

COLUMNS

COLUMN-GAP

11columns_01.html

CSS3

OPACITY

ESTANDAR

0 A 1

12

CSS3

POINTER-EVENTS

AUTO/NONE

ELIMINAMOS FUNCIONALIDAD

SIN EMPLEAR JS13

CSS3

TEXT-OVERFLOW

CLIP

ELLIPSIS

“...”

14textoverflow_01.html

CSS3

TEXT-SHADOW

OFFSET X OFFSET Y BLUR

COLOR

15textshadow_01.html

PSEUDOSELECTORES

:after

:before

CSS3

TRANSFORMACIONES 2D

TRANSLATE, SKEW,

ROTATE, SCALE

TRANSFORM-ORIGIN

17transform2D_01.html

CSS3

TRANSFORMACIONES 3D

PERSPECTIVE (DEPTH)

TRANSFORM-STYLE: PRESERVE-3D

TRANSITION

18transform3D_01.html

TRANSICIONES

PROPERTY (ALL), DURATION

TIMING-FUNCTION, DELAY

CSS3

19

ANIMACIONES

ANIMATION

KEYFRAMES

CSS3

20

ANIMATION ANIMACIONES

DELAY, DIRECTION, DURATION

ITERATION-COUNT, NAME

PLAY-STATE, FILL-MODE,

TIMING-FUNCTION

CSS3

21

KEYFRAMES ANIMACIONES

DIRECTRIZ @

FROM, TO (SIMPLES)

POSICIÓN EN EL TIEMPO %

CSS3

22

23

BUENAS PRÁCTICAS

FALLBACK

MODERNIZR.JS

REQUIRE.JS

PREFIJOS PROPIETARIOS

ANIMACIÓN POR CLASES

S SSAC

2

PREPROCESOCAPA DE ABSTRACCIÓN

SEPARACIÓN: DEV - PROD

LENGUAJE DE PROGRAMACIÓN

ESCALABILIDAD

TIME SAVER

3

HERRAMIENTAS

CODEKIT PREPROS

SASSVARIABLES

$COLOR : #32CBFF

$PADDING: 1em

OPERADORES Y MÉTODOS

4

SASSANIDACIÓN

SELECTORES DESCENDENTES

MEDIA QUERIES

5

SASSESTRUCTURA

ESCALABILIDAD

ORGANIZACIÓN

@IMPORT

6

SASSMIXINS FUNCIONES

@MIXIN DECLARACIÓN

@INCLUDE LLAMADA

ACEPTAN PARÁMETROS

7

SASSEXTEND CLASES

@EXTEND .REGLA

COMPILA SELECTORES MÚLTIPLES

8

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

SASSSENTENCIAS

@IF

@FOR

@EACH

@WHILE10

SASSMÉTODOS

COLOR

NUMBER

LIST

11

SASSCOLOR MÉTODOS

RGBA, LIGHTEN, DARKEN,

INVERT, GRAYSCALE,

DESATURATE, ALPHA

12

SASSNUMBER MÉTODOS

PERCENTAGE, ROUND, CEIL,

FLOOR, ABS

13

SASSLIST MÉTODOS

LENGTH, NTH, JOIN, APPEND,

INDEX

14

15

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

ATOMIC DESIGN

@brad_frost

2

SISTEMAS DE DISEÑO

GUIAS DE ESTILO

COMPONENTES

FRAMEWORKS

ATOMIC DESIGN

GUIAS DE ESTILO

MODULARIDAD

TIPOGRAFÍAS

COLORES

REJILLA

ELEMENTOS3

COMPONENTES

INVENTARIO

ESTILO VISUAL

PERSONALIZACIÓN

UI

BIBLIOTECA DE RECURSOS4

FRAMEWORKS

INVENTARIO

FOUNDATION

BOOTSTRAP

INUIT MOLA!

5

6

“TINY BOOTSTRAPS,

FOR EVERY CLIENT”

DAVE RUPERT

7

“RESPONSIVE DELIVERABLES SHOULD LOOK A LOT LIKE

FULLY-FUNCTIONING BOOTSTRAP-STYLE SYSTEMS

CUSTOM TAILORED FOR YOUR CLIENT’S NEEDS”

DAVE RUPERT

8

TOMEMOS UN FRAMEWORK

COMO PUNTO DE PARTIDA

FRAMEWORKS

VENTAJAS

FÁCIL DE PROBAR

WORKFLOW DEFINIDO

SINTAXIS SIMILAR

FUENTE DE APRENDIZAJE9

FRAMEWORKS

DESVENTAJAS

CONVENCIONES AJENAS

GLOBALES

IMPERSONALIZABLES

INCOMPATIBILIDADES10

11

“RESPONSIVE DELIVERABLES SHOULD LOOK A LOT LIKE

FULLY-FUNCTIONING BOOTSTRAP-STYLE SYSTEMS

CUSTOM TAILORED FOR YOUR CLIENT’S NEEDS”

DAVE RUPERT

12

CREEMOS NUESTRO PROPIO

FRAMEWORK

13

ATOMIC DESIGN

ATOMIC DESIGN

14

ÁTOMOS MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS

ÁTOMOS

15


ÁTOMOS

ELEMENTOS BÁSICOS ETIQUETAS

ABSTRACCIÓN

NO SEGMENTABLES

POCO ÚTILES EN SI MISMOS

FÁCIL MANIPULACIÓN

16

MOLÉCULAS

17


MOLÉCULAS

GRUPO DE ÁTOMOS UNIDO

MÁS ESPECÍFICOS

PUEDEN REPETIRSE

SON LOS HUESOS DEL ESQUELETO

ESCALABILIDAD

18

ORGANISMOS

19


ORGANISMOS

COMPUESTOS POR MOLÉCULAS

ENTIDAD PROPIA

REUSABLES

ESCALABLES

PERSONALIZABLES

20

PLANTILLAS

21


PLANTILLAS

WIREFRAMES

DOCUMENTO HTML

MUY CONCRETO

VISIBILIDAD CLIENTE=DECISIONES

FUTURIBLE PROYECTO FINAL

22

PÁGINAS

23


PÁGINAS

INSTANCIAS ESPECÍFICA

CONTENIDO FINAL

PROCESO DE TESTING

PROYECTO FINAL

24

ATOMIC DESIGN

25


ATOMIC DESIGN

26


ETIQUETAS CLASES SECCIONES WIREFRAMES VISTAS

ATOMIC DESIGN

METODOLOGÍA

SISTEMA DE DISEÑO EFICAZ

TRANSVERSAL

CONSTRUCTIVO

27

28

HERRAMIENTASY LENGUAJES

29

PHP STYLUS COMPASS CODEKIT HAMMER LESS SASS EMMET GIT JADE

HAML SUBLIME INCLUDE BOURBON JQUERY

MODERNIZR POLYFILLS

RESPONSIVEIMAGES

EL COMIENZO

2

IMG

{

MAX-WIDTH: 100%;

}

PROBLEMAS

3

RENDIMIENTO

PESO

ENCUADRE

FACTORES

4

ENCUADRE

TIEMPOS DE CARGA

SEMÁNTICA

TECNOLOGÍA HDPI

5

LO IDEAL

SOLUCIONES

6

PICTURE

SIMILAR A VIDEO

JS

SRCSET

SOPORTE W3C

7

<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>

PICTURE

SOLUCIONES

8

CARGA POSTERIOR

MOBILE FIRST

JS

HDPI

PERSONALIZABLE

9

<img class=”responsive-image” src="small.jpg">

if ( layout == “medium”){

replaceImages(‘medium’);}else if ( layout == “large”){

replaceImages(‘large’);}

CARGA POSTERIOR

SOLUCIONES

10

COMPRESSIVE IMAGES

ALTA CALIDAD FUENTE

PHOTOSHOP

IMÁGENES DE FONDO

COMPRESORES

11

HTTP://PNGMINI.COM/

HTTP://IMAGEOPTIM.COM

HTTP://TINYPNG.ORG

HTTP://JPEGMINI.COM

AMPLIANDOLA

EXPERIENCIA

PUNTO DE PARTIDA

2

MOBILE FIRST

INVENTARIO DE CONTENIDOS

ESTRATEGIA DE CONTENIDOS

JAVASCRIPT

METODOLOGÍAS

3

DEGRADACIÓN ELEGANTE

VS

AMPLIACIÓN PROGRESIVA

HACIA ABAJO

4

MODERNIZR

POLYFILLS

COMENTARIOS CONDICIONALES

CSS HACKS

HACIA ABAJO

5

MODERNIZR

CSS

YEP / NOPE

TOUCH

HACIA ABAJO

6

POLYFILLS

JS PLUGINS

SHIV / SHIM

HACIA ABAJO

7

COMENTARIOS CONDICIONALES



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

HACIA ABAJO

8

CSS HACKS

* html p { margin: 1em; }

p { _margin: 1em; }

p { *margin: 1em; }

<IE7

<IE8

<IE9

HACIA ARRIBA

9

CUTTING THE MUSTARD

AJAX

10

CUTTING THE MUSTARD

BBC

EXPERIENCIA BASE

EXPERIENCIA PREMIUM

HACIA ARRIBA

if ( 'querySelector' in document &&

'localStorage' in window &&

'addEventListener' in window)

{

}

CUT THE MUSTARD!

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

13

IE8-

BLACKBERRY OS5-

NOKIA S60 V6-

NOKIA S40

ALL OTHER SYMBIAN VARIANTS

WINDOWS 7 PHONE (PRE-MANGO)

NAVEGADORES??

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

MEJOR JS

16

AJAX

CONTENIDO ADICIONAL

FUNCIONALIDAD ADICIONAL

MEDIA QUERIES

ATRIBUTO DATA

HACIA ARRIBA

TOUCH EVENTS

EVENTOS

2

TOUCHSTART

TOUCHMOVE

TOUCHEND

E.TOUCHES -> TOUCHLIST

e.pageX, e.pageY

OPTIMIZANDO

DOS FRENTES

4

CLIENTE

VS

SERVIDOR

CLIENTE

5

SPRITES

@FONT-FACE (ICONOS)

COMPACTAR ARCHIVOS

REDUCIR PETICIONES

CSS3

SERVIDOR

6

CACHEAR ASSETS

GZIP

PÁGINAS ESTÁTICAS

EMPLEAR CDN

HERRAMIENTAS

7

GTMETRIX

PAGESPEED

YSLOW

W3 TOTAL CACHE (wordpress)

Curso responsive web design - Redradix School

Technology

Transcript of Curso responsive web design - Redradix School