Responsive Web Design (Diseño Web Adaptable)
-
Upload
adolfo-sanz-de-diego -
Category
Design
-
view
2.244 -
download
3
description
Transcript of Responsive Web Design (Diseño Web Adaptable)
![Page 1: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/1.jpg)
RESPONSIVEWEBDESIGN
ADOLFOSANZDEDIEGOSEPTIEMBRE2014
![Page 2: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/2.jpg)
1ELAUTOR
![Page 3: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/3.jpg)
1.1ADOLFOSANZDEDIEGOAntiguoprogramadorwebJEE(6años)Hoyendía:ProfesordeFP(6años):Hardware,SistemasOperativosRedes,Programación
FormadorFreelance(3años):Java,AndroidJavaScript,jQueryJSF,Spring,HibernateGroovy&Grails
![Page 4: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/4.jpg)
1.2ALGUNOSPROYECTOSFundadory/ocreador:HackathonLovers:TweetsSentiment:MarkdownSlides:
Co-fundadory/oco-creador:PeliTweets:PasswordManagerGenerator:
http://hackathonlovers.comhttp://tweetssentiment.com
https://github.com/asanzdiego/markdownslides
http://pelitweets.com
http://pasmangen.github.io
![Page 5: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/5.jpg)
1.3¿DONDEENCONTRARME?Minick:asanzdiegoAboutMe:GitHub:Twitter:Blog:LinkedIn:Google+:
http://about.me/asanzdiegohttp://github.com/asanzdiegohttp://twitter.com/asanzdiego
http://asanzdiego.blogspot.com.eshttp://www.linkedin.com/in/asanzdiego
http://plus.google.com/+AdolfoSanzDeDiego
![Page 6: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/6.jpg)
2INTRODUCCIÓN
![Page 7: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/7.jpg)
2.1ESTONOESLAWEB
Estonoeslaweb.Fuente:bradfostweb.com
![Page 8: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/8.jpg)
2.2ESTOESLAWEB
Estoeslaweb.Fuente:bradfostweb.com
![Page 9: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/9.jpg)
2.3¿SERÁESTOLAWEB?
¿Seráestolaweb?.Fuente:bradfostweb.com
![Page 10: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/10.jpg)
2.4ESTADÍSTICAS
Estadísticas.Fuente:gs.statcounter.com
![Page 11: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/11.jpg)
2.5ELDESARROLLADOR
![Page 12: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/12.jpg)
2.6RESPONSIVEWEBDESIGN
ResponsiveWebDesign.Fuente:
![Page 13: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/13.jpg)
2.7CONTENTISLIKEWATER
![Page 14: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/14.jpg)
2.8GRACEFULDEGRADATIONSedesarrollaparalosúltimosnavegadores,conlaposibilidaddequefuncioneennavegadoresantiguos.
Gracefuldegradation.Fuente:bradfostweb.com
![Page 15: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/15.jpg)
2.9PROGESSIVEENHANCEMENTSedesarrollaunaversiónbásicacompletamenteoperativa,conlaposibilidaddeirañadiendomejorasparalosúltimosnavegadores.
Progressiveenhancement.Fuente:bradfostweb.com
![Page 16: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/16.jpg)
2.10BENEFICIOS(I)Reduccióndecostos.Puesnohayquehacervariasversionesdeunamismapágina.Eficienciaenlaactualización.Elsitiosolosedebeactualizarunavezysevereflejadaentodaslasplataformas.Mejoralausabilidad.Elusuariovaatenerexperienciasdeusuarioparecidasindependientementedeldispositivoqueestéusandoencadamomento
![Page 17: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/17.jpg)
2.11BENEFICIOS(II)MejoraelSEO.SegúnlasGuidelinesdeGoogleeltenerunawebqueseveacorrectamenteenmóvilesesunfactorquetienenencuentaalahoradeelaborarlosrankings.Impactoenelvisitante.Estatecnologíaporsernuevageneraimpactoenlaspersonasquelaveanenacción,loquepermitiráasociaralamarcaconcreatividadeinnovación.
![Page 18: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/18.jpg)
3EJEMPLOS
![Page 19: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/19.jpg)
3.1MATTKERSLEYPáginadetesteodeMattKersleyhttp://mattkersley.com/responsive
![Page 20: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/20.jpg)
3.2DCONSTRUCT2011http://2011.dconstruct.org
EjemploRWD:dConstruct2011.Fuente:ecbloguer.com
![Page 21: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/21.jpg)
3.3BOSTONGLOBEhttp://www.bostonglobe.com
EjemploRWD:BostonGlobe.Fuente:ecbloguer.com
![Page 22: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/22.jpg)
3.4FOODSENSEhttp://foodsense.is
EjemploRWD:FoodSense.Fuente:ecbloguer.com
![Page 23: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/23.jpg)
3.5DERENKESKINhttp://www.deren.me
EjemploRWD:DerenKeskin.Fuente:ecbloguer.com
![Page 24: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/24.jpg)
4DISEÑOFLUIDO
![Page 25: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/25.jpg)
4.1DEPXAEMFormula:target÷context=resulttarget-font-sizequetenemosenpíxelescontext-font-sizebase(pordefecto16pxenlamayoríadelosnavegadores)result-resultadoqueobtenemosenem
EsrecomendableindicarelcálculorealizadojuntoalaregladeCSS.
![Page 26: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/26.jpg)
4.2ONLINEhttp://pxtoem.com
![Page 27: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/27.jpg)
4.3EJEMPLOEjemploparaponer13pxpordefectoyluego18pxparah1enem:body{font:13px;}
h1{font-size:1.3846em;/*18px/13px=1.3846em*/}
![Page 28: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/28.jpg)
4.4EMSEHEREDAImportante:lasmedidasemseheredan,esdecir,unelementodentrodeunelementotomarácomoreferenciaelsuperiorparacalcularcuántoesunem.Porejemplo,sitenemosunacajadondehemosdefinidounafuentecomo0.5emydentrodeesacajaotraconunafuente0.25em,estaúltimafuentetendrá1/4detamañorespectoala1/2detamañodelafuentegeneral.
![Page 29: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/29.jpg)
4.5DEPXA%
Cálculoporcentajes.Fuente:aloud.es
![Page 30: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/30.jpg)
5SISTEMADEREJILLA
![Page 31: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/31.jpg)
5.1EJEMPLO1columnaparaxs(<768px)2columnasparasm(≥768px)3columnasparamd(≥992px)4columnasparalg(≥1200px)
![Page 32: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/32.jpg)
5.2USODECLASESUsodeclasesenelHTMLcomoBootstraphttp://getbootstrap.com/css
![Page 33: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/33.jpg)
5.3EJEMPLOBOOTSTRAP<divclass="row"><divclass="col-xs-12col-sm-6col-md-4col-lg-3">1</div><divclass="col-xs-12col-sm-6col-md-4col-lg-3">2</div><divclass="col-xs-12col-sm-6col-md-4col-lg-3">3</div><divclass="col-xs-12col-sm-6col-md-4col-lg-3">4</div></div>
![Page 34: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/34.jpg)
5.4SEMÁNTICOTheSemanticGridSystem:Mediantelayouts,ysinnecesidaddeusarclasesenHTML.http://semantic.gs
![Page 35: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/35.jpg)
5.5EJEMPLOSEMANTIC.GS(HTML)<header>...</header><article>...</article><aside>...</aside>
![Page 36: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/36.jpg)
5.6EJEMPLOSEMANTIC.GS(CSS)@column-width:60;@gutter-width:20;@columns:12;
header{.column(12);}article{.column(9);}aside{.column(3);}
@media(max-device-width:960px){article{.column(12);}aside{.column(12);}}
![Page 37: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/37.jpg)
6IMÁGENESFLUIDAS
![Page 38: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/38.jpg)
6.1TAMAÑOMÁXIMOFijaruntamañomáximo(silaimagennollega,sequedaconsutamaño):img{max-width:400px;}
![Page 39: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/39.jpg)
6.2ANCHODELCONTENEDOR(I)Ocuparelanchodelcontenedor(silaimagennollega,sedeforma):img{width:100%;}
![Page 40: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/40.jpg)
6.3ANCHODELCONTENEDOR(II)Ocuparelanchodelcontenedor(silaimagennollega,sequedaconsutamaño):img{max-width:100%;}
![Page 41: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/41.jpg)
6.4ANCHODELCONTENEDOR(III)Ocuparelanchodelcontenedorhastaunmáximo(silaimagennollega,sedeforma):img{width:100%;max-width:400px;}
![Page 42: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/42.jpg)
6.5BACKGROUNDSParalosbackgroundusarcover
.background-fluid{width:100%;background-image:url(img/water.jpg);background-size:cover;}
![Page 43: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/43.jpg)
7VIEWPORT
![Page 44: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/44.jpg)
7.1ORÍGENESLaetiquetametaparaelviewportfueintroducidaporAppleenSafariparamóvilesenelaño2007,paraayudaralosdesarrolladoresamejorarlapresentacióndesusaplicacioneswebenuniPhone.Hoyendíahasidoampliamenteadoptadaporelrestodenavegadoresmóviles,convirtiéndoseenunestándardefacto.
![Page 45: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/45.jpg)
7.2¿QUÉNOSPERMITE?Laetiquetaviewportnospermitedefinirelancho,altoyescaladeláreausadaporelnavegadorparamostrarcontenido.
![Page 46: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/46.jpg)
7.3TAMAÑOAlfijarelancho(width)oalto(height)delviewport,podemosusarunnúmerofijodepixeles(ej:320px,480px,etc)ousardosconstantes,device-widthydevice-heightrespectivamente.Seconsideraunabuenaprácticaconfigurarelviewportcondevice-widthydevice-height,enlugardeutilizarunanchooaltofijo.
![Page 47: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/47.jpg)
7.4ESCALALapropiedadinitial-scalecontrolaelniveldezoominicialalcargarselapágina.Laspropiedadesmaximum-scale,minimum-scalecontrolanelnivelmáximoymínimodezoomqueselevaapermitirusaralusuario.Lapropiedaduser-scalable[yes|no]controlansielusuariopuedeonohacerzoomsobrelapágina.
![Page 48: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/48.jpg)
7.5ACCESIBILIDADEsunabuenaprácticadeaccesibilidadnobloquearlasopcionesdezoomalusuario.
![Page 49: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/49.jpg)
7.6EJEMPLOUnejemploadaptableyaccesiblesería:
<metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=yes">
![Page 50: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/50.jpg)
8MEDIAQUERIES
![Page 51: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/51.jpg)
8.1¿QUÉSON?UnMediaQuerynosólonospermiteseleccionareltipodemedio(all,braille,print,proyection,
screen,tty,tv,etc.),sinoademásconsultarotrascaracterísticassobreeldispositivoqueesta
mostrandolapágina.
![Page 52: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/52.jpg)
8.2EJEMPLOEjemplo:aplicardistintasreglasCSScuandoeláreadevisualizaciónseamayorque480px.
![Page 53: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/53.jpg)
8.3DISTINTOSCSSSolución1:cargardistintasCSS:
<linkrel="stylesheet"type="text/css"media="alland(min-width:480px)"href="tablet.css"/>
<!--tablet.cssesunCSSconreglasparacuandoeláreadevisualizaciónseamayorque480px-->
![Page 54: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/54.jpg)
8.4MISMOCSSSolución2:definirdistintaspropiedadesdentrodelmismoCSS:@mediaalland(min-width:480px){
/*aquíponerlasreglasCSSparacuandoeláreadevisualizaciónseamayorque480px*/}
![Page 55: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/55.jpg)
8.5IMPORTARCSSSolución3:importardistintashojasdeestilodentrodelmismoCSS:@importurl("tablet.css")alland(min-width:480px);
/*tablet.cssesunCSSconreglasparacuandoeláreadevisualizaciónseamayorque480px*/}
![Page 56: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/56.jpg)
8.6OPERADORANDEsusadoparacombinarmúltiplesmediafeaturesenunsóloMediaQuery,requiriendoquecadafuncióndevuelvetrueparaqueelQuerytambiénlosea.
![Page 57: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/57.jpg)
8.7EJEMPLOAND@mediatvand(min-width:700px)and(orientation:landscape){
/*reglasquequeremosqueseapliquenparatelevisionesconáreasdevisualizaciónmayoresde700pxsiemprequelapantallaestéenmodolandscape*/}
![Page 58: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/58.jpg)
8.8OPERADOR'OR'SepuedencombinarmúltiplesMediaQueriesseparadosporcomasenunalista,detalformaquesialgunadelasMediaQueriesdevuelvetrue,todolasentenciadevolverátrue.Estoesequivalenteaunoperadoror.CadaMediaQueryseparadoporcomasenlalistasetrataindividualmente.
![Page 59: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/59.jpg)
8.9EJEMPLO'OR'@mediatv,(min-width:700px),(orientation:landscape){
/*reglasquequeremosqueseapliquenparatelevisiones,oparadispositivosconáreasdevisualizaciónmayoresde700px,ocuandolapantallaestáenmodolandscape*/}
![Page 60: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/60.jpg)
8.10OPERADORNOTSeutilizaparanegarunMediaQuerycompleto.Nosepuedenegarunacaracterísticaindividualmente,sinosolamenteelMediaQuerycompleto.
![Page 61: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/61.jpg)
8.11EJEMPLONOT(I)@medianottvandmax-width(800px),notscreenandmax-width(400px){
/*reglasquequeremosqueseapliquenparadispositivosquenoseannitelevisionesconáreasdevisualizaciónmenoresde800px,nipantallasconáreasdevisualizaciónmenoresde400px*/}
![Page 62: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/62.jpg)
8.12EJEMPLONOT(II)Elanteriorejemploseríaequivalentea:
@medianot(tvandmax-width(800px)),not(screenandmax-width(400px)){
...}
![Page 63: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/63.jpg)
8.13CARACTERÍSTICAS(I)Característicasquehacenreferenciaaláreadevisualización:widthheightaspect-ratio[4/3|16/9|...]orientation[portrait|landscape]
![Page 64: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/64.jpg)
8.14CARACTERÍSTICAS(II)Característicasquehacenreferenciaalapantalladeldispositivo:device-widthdevice-heightdevice-aspect-ratio[4/3|16/9|...]
![Page 65: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/65.jpg)
8.15CARACTERÍSTICAS(III)Otrascaracterísticas:color:Elnúmerodebitsdeprofundidaddecolormonocrome:Elnúmerodebitsdeprofundidaddecolor,endispotivosmonocromáticosresolution:Densidaddepixelseneldispositivo,medidoendpi
![Page 66: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/66.jpg)
8.16MIN-YMAX-Acasitodaslascaracterísticasselespuedeadjuntarlosprefijosmin-ymax-Dehecholohabitualesusardichosprefijos.
![Page 67: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/67.jpg)
9METODOLOGÍAS
![Page 68: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/68.jpg)
9.1DESKTOPVSMOBILE
DesktopfirstVSMobilefirst.Fuente:brettjankord.com
![Page 69: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/69.jpg)
9.2DESKTOPFIRSTConsisteendesarrollarparapantallasgrandesyposteriormenteadaptareldiseñoapantallaspequeñas.
![Page 70: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/70.jpg)
9.3DF:UTILIZAMAX-WIDTHNormalmentelosMediaQueriesutilizanmax-width,simplificandoyajustandoparalaspantallasmáspequeñas.@mediaalland(max-width:320px){/*Estilosparaanchosmenoresa320px*/}@mediaalland(max-width:768px){/*Estilosparaanchosmenoresa768px*/}
![Page 71: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/71.jpg)
9.4DF:PROBLEMASLosMediaQuerynoestánsoportadosportodoslosmóviles.Laversiónmóvilterminasiendounaversióndescafeinadadelaweboriginal.
![Page 72: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/72.jpg)
9.5MOBILEFIRSTConsisteendesarrollarparapantallaspequeñasyposteriormenteadaptareldiseñoapantallasgrandes.
![Page 73: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/73.jpg)
9.6MF:UTILIZAMIN-WIDTHAhoralosMediaQueriesutilizanmin-width,paraajustareldiseñoamedidaqueaumentaeltamañodepantalla.@mediaalland(min-width:320px){/*Estilosparaanchossuperioresa320px*/}@mediaalland(min-width:768px){/*Estilosparaanchossuperioresa768px*/}
![Page 74: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/74.jpg)
9.7MF:VENTAJASFuncionaenmóvilesy/onavegadoresantiguosquenosoportanlosMediaQueries.Normalmentelahojadeestilosresultantesuelesermássencillaqueusandolaotravía.Empezarporelmóvilnosserviráparadeterminardeunamaneramásclaracualeselcontenidorealmenteimportantedenuestraweb.
![Page 75: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/75.jpg)
9.8PUNTOSDEROTURA(I)Normalmente:320pxparaelmóvil,768pxparaeltablet,1024pxparaelportatil,1200pxparaelsobremesa.
![Page 76: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/76.jpg)
9.9PUNTOSDEROTURA(II)LomejorseríaquelospuntosderoturaqueaplicamosenlosMediaQuery,fueranenfuncióndenuestrocontenido,envezdeenfuncióndeltamañodeldispositivomásvendido.Lamaneradehacerlo:ircambiandopocoapocoelanchodelnavegadorydondelawebserompa,aplicarunMediaQuery.
![Page 77: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/77.jpg)
10ACERCADE
![Page 78: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/78.jpg)
10.1LICENCIAEstastransparenciasestánhechascon:MarkdownSlides:
EstastransparenciasestánbajounalicenciaCreativeCommonsReconocimiento-CompartirIgual3.0:
https://github.com/asanzdiego/markdownslides
http://creativecommons.org/licenses/by-sa/3.0/es
![Page 79: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/79.jpg)
10.2FUENTESTransparencias:
Código:
https://github.com/asanzdiego/curso-interfaces-web-2014/tree/master/03-rwd/slides
https://github.com/asanzdiego/curso-interfaces-web-2014/tree/master/03-rwd/src
![Page 80: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/80.jpg)
10.3BIBLIOGRAFÍA(I)ResponsiveWebDesign
IntroducciónalDiseñoWebAdaptableoResponsiveWebDesign
Tutorial:ResponsiveWebDesign
http://www.arkaitzgarro.com/responsive-web-design/index.html
http://www.emenia.es/diseno-web-adaptable-o-responsive-web-design
http://www.mmfilesi.com/blog/tutorial-responsive-web-design-i
![Page 81: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/81.jpg)
10.4BIBLIOGRAFÍA(II)Tutorial:TransformatuwebenResponsiveDesign
Cursoresponsivewebdesign-RedradixSchool
TodoloquenecesitasabersobreResponsiveWebDesign
http://blog.ikhuerta.com/transforma-tu-web-en-responsive-design
http://www.slideshare.net/Redradix/curso-responsive-web-design-redradix-school
http://www.ecbloguer.com/marketingdigital/?p=2635
![Page 82: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/82.jpg)
10.5BIBLIOGRAFÍA(III)DiseñowebfluidoyplantillafluidaconHTML5yCSS3
BeneficiosdelResponsiveWebDesignenSEO
ResponsiveWebDesignTestingTool
http://www.aloud.es/diseno-web-fluido-y-plantilla-fluida
http://madridnyc.com/blog/2013/01/29/beneficios-del-responsive-web-design-en-seo
http://mattkersley.com/responsive
![Page 83: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/83.jpg)
10.6BIBLIOGRAFÍA(IV)ResponsiveWebDesign
ResponsiveDesignyaccesibilidad.Buenasymalasprácticas.Errorescomunes.
Diseñowebadaptativo:mejoresprácticas
http://www.ricardocastillo.com/rwd.pdf
http://olgacarreras.blogspot.com.es/2014/01/responsive-design-y-accesibilidad.html
http://www.emenia.es/diseno-web-adaptativo-mejores-practicas
![Page 84: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/84.jpg)
10.7BIBLIOGRAFÍA(V)Traducciónde"ResponsiveWebDesign"de"AListApart"
ResponsiveDesignExercisehttp://diseñowebresponsivo.com.ar
http://blog.garciaechegaray.com/2013/11/29/responsive-design-exercise.html
![Page 85: Responsive Web Design (Diseño Web Adaptable)](https://reader033.fdocuments.ec/reader033/viewer/2022050802/557b4982d8b42a13388b4def/html5/thumbnails/85.jpg)
10.8BIBLIOGRAFÍA(VI)EstadísticasdeStatCounter
PáginadetesteodeMattKersleyhttp://gs.statcounter.com
http://mattkersley.com/responsive