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