Post on 27-Jan-2015
description
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%
11
12
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
RESPONSIVE WEB DESIGN
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
RESPONSIVE WEB DESIGN
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
MOBILE FIRSTDESVENTAJAS
TAMAÑO DE PANTALLA
VELOCIDAD DE CONEXIÓN
MODOS DE USO (CONTEXTO)
MOBILE FIRSTDESVENTAJAS
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
CSS 3
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 MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS
ÁTOMOS
ELEMENTOS BÁSICOS ETIQUETAS
ABSTRACCIÓN
NO SEGMENTABLES
POCO ÚTILES EN SI MISMOS
FÁCIL MANIPULACIÓN
16
MOLÉCULAS
17
ÁTOMOS MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS
MOLÉCULAS
GRUPO DE ÁTOMOS UNIDO
MÁS ESPECÍFICOS
PUEDEN REPETIRSE
SON LOS HUESOS DEL ESQUELETO
ESCALABILIDAD
18
ORGANISMOS
19
ÁTOMOS MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS
ORGANISMOS
COMPUESTOS POR MOLÉCULAS
ENTIDAD PROPIA
REUSABLES
ESCALABLES
PERSONALIZABLES
20
PLANTILLAS
21
ÁTOMOS MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS
PLANTILLAS
WIREFRAMES
DOCUMENTO HTML
MUY CONCRETO
VISIBILIDAD CLIENTE=DECISIONES
FUTURIBLE PROYECTO FINAL
22
PÁGINAS
23
ÁTOMOS MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS
PÁGINAS
INSTANCIAS ESPECÍFICA
CONTENIDO FINAL
PROCESO DE TESTING
PROYECTO FINAL
24
ATOMIC DESIGN
25
ÁTOMOS MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS
ATOMIC DESIGN
26
ÁTOMOS MOLÉCULAS ORGANISMOS PLANTILLAS PÁGINAS
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
<!--[if IE]> ... <![endif]-->
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)