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