Upload
adolfo-sanz-de-diego
View
2.253
Download
3
Embed Size (px)
DESCRIPTION
En primer lugar hago una introducción, contando que es eso del 'Responsive Web Design' (Diseño Web Adaptable), que beneficios tiene, y cuento la diferencia entre 'Graceful degradation' y 'Progessive enhancement'. Seguidamente, expongo varios ejemplos de sitios web realizados con esa filosofía. Luego entro más en detalle en como conseguir sitios web adaptables: diseño fluido, sistemas de rejilla, imágenes fluidas, viewport, media queries. Para terminar enumero las 2 metodologías más utilizadas hoy en día para hacer diseños adaptables: 'Desktop First' y 'Mobile first'
Citation preview
RESPONSIVEWEBDESIGN
ADOLFOSANZDEDIEGOSEPTIEMBRE2014
1ELAUTOR
1.1ADOLFOSANZDEDIEGOAntiguoprogramadorwebJEE(6años)Hoyendía:ProfesordeFP(6años):Hardware,SistemasOperativosRedes,Programación
FormadorFreelance(3años):Java,AndroidJavaScript,jQueryJSF,Spring,HibernateGroovy&Grails
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
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
2INTRODUCCIÓN
2.1ESTONOESLAWEB
Estonoeslaweb.Fuente:bradfostweb.com
2.2ESTOESLAWEB
Estoeslaweb.Fuente:bradfostweb.com
2.3¿SERÁESTOLAWEB?
¿Seráestolaweb?.Fuente:bradfostweb.com
2.4ESTADÍSTICAS
Estadísticas.Fuente:gs.statcounter.com
2.5ELDESARROLLADOR
2.6RESPONSIVEWEBDESIGN
ResponsiveWebDesign.Fuente:
2.7CONTENTISLIKEWATER
2.8GRACEFULDEGRADATIONSedesarrollaparalosúltimosnavegadores,conlaposibilidaddequefuncioneennavegadoresantiguos.
Gracefuldegradation.Fuente:bradfostweb.com
2.9PROGESSIVEENHANCEMENTSedesarrollaunaversiónbásicacompletamenteoperativa,conlaposibilidaddeirañadiendomejorasparalosúltimosnavegadores.
Progressiveenhancement.Fuente:bradfostweb.com
2.10BENEFICIOS(I)Reduccióndecostos.Puesnohayquehacervariasversionesdeunamismapágina.Eficienciaenlaactualización.Elsitiosolosedebeactualizarunavezysevereflejadaentodaslasplataformas.Mejoralausabilidad.Elusuariovaatenerexperienciasdeusuarioparecidasindependientementedeldispositivoqueestéusandoencadamomento
2.11BENEFICIOS(II)MejoraelSEO.SegúnlasGuidelinesdeGoogleeltenerunawebqueseveacorrectamenteenmóvilesesunfactorquetienenencuentaalahoradeelaborarlosrankings.Impactoenelvisitante.Estatecnologíaporsernuevageneraimpactoenlaspersonasquelaveanenacción,loquepermitiráasociaralamarcaconcreatividadeinnovación.
3EJEMPLOS
3.1MATTKERSLEYPáginadetesteodeMattKersleyhttp://mattkersley.com/responsive
3.2DCONSTRUCT2011http://2011.dconstruct.org
EjemploRWD:dConstruct2011.Fuente:ecbloguer.com
3.3BOSTONGLOBEhttp://www.bostonglobe.com
EjemploRWD:BostonGlobe.Fuente:ecbloguer.com
3.4FOODSENSEhttp://foodsense.is
EjemploRWD:FoodSense.Fuente:ecbloguer.com
3.5DERENKESKINhttp://www.deren.me
EjemploRWD:DerenKeskin.Fuente:ecbloguer.com
4DISEÑOFLUIDO
4.1DEPXAEMFormula:target÷context=resulttarget-font-sizequetenemosenpíxelescontext-font-sizebase(pordefecto16pxenlamayoríadelosnavegadores)result-resultadoqueobtenemosenem
EsrecomendableindicarelcálculorealizadojuntoalaregladeCSS.
4.2ONLINEhttp://pxtoem.com
4.3EJEMPLOEjemploparaponer13pxpordefectoyluego18pxparah1enem:body{font:13px;}
h1{font-size:1.3846em;/*18px/13px=1.3846em*/}
4.4EMSEHEREDAImportante:lasmedidasemseheredan,esdecir,unelementodentrodeunelementotomarácomoreferenciaelsuperiorparacalcularcuántoesunem.Porejemplo,sitenemosunacajadondehemosdefinidounafuentecomo0.5emydentrodeesacajaotraconunafuente0.25em,estaúltimafuentetendrá1/4detamañorespectoala1/2detamañodelafuentegeneral.
4.5DEPXA%
Cálculoporcentajes.Fuente:aloud.es
5SISTEMADEREJILLA
5.1EJEMPLO1columnaparaxs(<768px)2columnasparasm(≥768px)3columnasparamd(≥992px)4columnasparalg(≥1200px)
5.2USODECLASESUsodeclasesenelHTMLcomoBootstraphttp://getbootstrap.com/css
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>
5.4SEMÁNTICOTheSemanticGridSystem:Mediantelayouts,ysinnecesidaddeusarclasesenHTML.http://semantic.gs
5.5EJEMPLOSEMANTIC.GS(HTML)<header>...</header><article>...</article><aside>...</aside>
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);}}
6IMÁGENESFLUIDAS
6.1TAMAÑOMÁXIMOFijaruntamañomáximo(silaimagennollega,sequedaconsutamaño):img{max-width:400px;}
6.2ANCHODELCONTENEDOR(I)Ocuparelanchodelcontenedor(silaimagennollega,sedeforma):img{width:100%;}
6.3ANCHODELCONTENEDOR(II)Ocuparelanchodelcontenedor(silaimagennollega,sequedaconsutamaño):img{max-width:100%;}
6.4ANCHODELCONTENEDOR(III)Ocuparelanchodelcontenedorhastaunmáximo(silaimagennollega,sedeforma):img{width:100%;max-width:400px;}
6.5BACKGROUNDSParalosbackgroundusarcover
.background-fluid{width:100%;background-image:url(img/water.jpg);background-size:cover;}
7VIEWPORT
7.1ORÍGENESLaetiquetametaparaelviewportfueintroducidaporAppleenSafariparamóvilesenelaño2007,paraayudaralosdesarrolladoresamejorarlapresentacióndesusaplicacioneswebenuniPhone.Hoyendíahasidoampliamenteadoptadaporelrestodenavegadoresmóviles,convirtiéndoseenunestándardefacto.
7.2¿QUÉNOSPERMITE?Laetiquetaviewportnospermitedefinirelancho,altoyescaladeláreausadaporelnavegadorparamostrarcontenido.
7.3TAMAÑOAlfijarelancho(width)oalto(height)delviewport,podemosusarunnúmerofijodepixeles(ej:320px,480px,etc)ousardosconstantes,device-widthydevice-heightrespectivamente.Seconsideraunabuenaprácticaconfigurarelviewportcondevice-widthydevice-height,enlugardeutilizarunanchooaltofijo.
7.4ESCALALapropiedadinitial-scalecontrolaelniveldezoominicialalcargarselapágina.Laspropiedadesmaximum-scale,minimum-scalecontrolanelnivelmáximoymínimodezoomqueselevaapermitirusaralusuario.Lapropiedaduser-scalable[yes|no]controlansielusuariopuedeonohacerzoomsobrelapágina.
7.5ACCESIBILIDADEsunabuenaprácticadeaccesibilidadnobloquearlasopcionesdezoomalusuario.
7.6EJEMPLOUnejemploadaptableyaccesiblesería:
<metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=yes">
8MEDIAQUERIES
8.1¿QUÉSON?UnMediaQuerynosólonospermiteseleccionareltipodemedio(all,braille,print,proyection,
screen,tty,tv,etc.),sinoademásconsultarotrascaracterísticassobreeldispositivoqueesta
mostrandolapágina.
8.2EJEMPLOEjemplo:aplicardistintasreglasCSScuandoeláreadevisualizaciónseamayorque480px.
8.3DISTINTOSCSSSolución1:cargardistintasCSS:
<linkrel="stylesheet"type="text/css"media="alland(min-width:480px)"href="tablet.css"/>
<!--tablet.cssesunCSSconreglasparacuandoeláreadevisualizaciónseamayorque480px-->
8.4MISMOCSSSolución2:definirdistintaspropiedadesdentrodelmismoCSS:@mediaalland(min-width:480px){
/*aquíponerlasreglasCSSparacuandoeláreadevisualizaciónseamayorque480px*/}
8.5IMPORTARCSSSolución3:importardistintashojasdeestilodentrodelmismoCSS:@importurl("tablet.css")alland(min-width:480px);
/*tablet.cssesunCSSconreglasparacuandoeláreadevisualizaciónseamayorque480px*/}
8.6OPERADORANDEsusadoparacombinarmúltiplesmediafeaturesenunsóloMediaQuery,requiriendoquecadafuncióndevuelvetrueparaqueelQuerytambiénlosea.
8.7EJEMPLOAND@mediatvand(min-width:700px)and(orientation:landscape){
/*reglasquequeremosqueseapliquenparatelevisionesconáreasdevisualizaciónmayoresde700pxsiemprequelapantallaestéenmodolandscape*/}
8.8OPERADOR'OR'SepuedencombinarmúltiplesMediaQueriesseparadosporcomasenunalista,detalformaquesialgunadelasMediaQueriesdevuelvetrue,todolasentenciadevolverátrue.Estoesequivalenteaunoperadoror.CadaMediaQueryseparadoporcomasenlalistasetrataindividualmente.
8.9EJEMPLO'OR'@mediatv,(min-width:700px),(orientation:landscape){
/*reglasquequeremosqueseapliquenparatelevisiones,oparadispositivosconáreasdevisualizaciónmayoresde700px,ocuandolapantallaestáenmodolandscape*/}
8.10OPERADORNOTSeutilizaparanegarunMediaQuerycompleto.Nosepuedenegarunacaracterísticaindividualmente,sinosolamenteelMediaQuerycompleto.
8.11EJEMPLONOT(I)@medianottvandmax-width(800px),notscreenandmax-width(400px){
/*reglasquequeremosqueseapliquenparadispositivosquenoseannitelevisionesconáreasdevisualizaciónmenoresde800px,nipantallasconáreasdevisualizaciónmenoresde400px*/}
8.12EJEMPLONOT(II)Elanteriorejemploseríaequivalentea:
@medianot(tvandmax-width(800px)),not(screenandmax-width(400px)){
...}
8.13CARACTERÍSTICAS(I)Característicasquehacenreferenciaaláreadevisualización:widthheightaspect-ratio[4/3|16/9|...]orientation[portrait|landscape]
8.14CARACTERÍSTICAS(II)Característicasquehacenreferenciaalapantalladeldispositivo:device-widthdevice-heightdevice-aspect-ratio[4/3|16/9|...]
8.15CARACTERÍSTICAS(III)Otrascaracterísticas:color:Elnúmerodebitsdeprofundidaddecolormonocrome:Elnúmerodebitsdeprofundidaddecolor,endispotivosmonocromáticosresolution:Densidaddepixelseneldispositivo,medidoendpi
8.16MIN-YMAX-Acasitodaslascaracterísticasselespuedeadjuntarlosprefijosmin-ymax-Dehecholohabitualesusardichosprefijos.
9METODOLOGÍAS
9.1DESKTOPVSMOBILE
DesktopfirstVSMobilefirst.Fuente:brettjankord.com
9.2DESKTOPFIRSTConsisteendesarrollarparapantallasgrandesyposteriormenteadaptareldiseñoapantallaspequeñas.
9.3DF:UTILIZAMAX-WIDTHNormalmentelosMediaQueriesutilizanmax-width,simplificandoyajustandoparalaspantallasmáspequeñas.@mediaalland(max-width:320px){/*Estilosparaanchosmenoresa320px*/}@mediaalland(max-width:768px){/*Estilosparaanchosmenoresa768px*/}
9.4DF:PROBLEMASLosMediaQuerynoestánsoportadosportodoslosmóviles.Laversiónmóvilterminasiendounaversióndescafeinadadelaweboriginal.
9.5MOBILEFIRSTConsisteendesarrollarparapantallaspequeñasyposteriormenteadaptareldiseñoapantallasgrandes.
9.6MF:UTILIZAMIN-WIDTHAhoralosMediaQueriesutilizanmin-width,paraajustareldiseñoamedidaqueaumentaeltamañodepantalla.@mediaalland(min-width:320px){/*Estilosparaanchossuperioresa320px*/}@mediaalland(min-width:768px){/*Estilosparaanchossuperioresa768px*/}
9.7MF:VENTAJASFuncionaenmóvilesy/onavegadoresantiguosquenosoportanlosMediaQueries.Normalmentelahojadeestilosresultantesuelesermássencillaqueusandolaotravía.Empezarporelmóvilnosserviráparadeterminardeunamaneramásclaracualeselcontenidorealmenteimportantedenuestraweb.
9.8PUNTOSDEROTURA(I)Normalmente:320pxparaelmóvil,768pxparaeltablet,1024pxparaelportatil,1200pxparaelsobremesa.
9.9PUNTOSDEROTURA(II)LomejorseríaquelospuntosderoturaqueaplicamosenlosMediaQuery,fueranenfuncióndenuestrocontenido,envezdeenfuncióndeltamañodeldispositivomásvendido.Lamaneradehacerlo:ircambiandopocoapocoelanchodelnavegadorydondelawebserompa,aplicarunMediaQuery.
10ACERCADE
10.1LICENCIAEstastransparenciasestánhechascon:MarkdownSlides:
EstastransparenciasestánbajounalicenciaCreativeCommonsReconocimiento-CompartirIgual3.0:
https://github.com/asanzdiego/markdownslides
http://creativecommons.org/licenses/by-sa/3.0/es
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
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
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
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
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
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
10.8BIBLIOGRAFÍA(VI)EstadísticasdeStatCounter
PáginadetesteodeMattKersleyhttp://gs.statcounter.com
http://mattkersley.com/responsive