Manual de Responsive Web Design - mardeasa.es

Manual de Responsive Web Design

http://desarrolloweb.com/manuales/responsive-web-design.html Página 1 de 59



Introducción:ManualdeResponsiveWebDesign

EsteesunmanualdeResponsiveWebDesign,latécnicaquepermitehacerwebsadaptablesalascondicionesdelordenadorodispositivoquelasestáaccediendo.Tambiénlasconocemoscomotécnicasadaptativas,focalizadasprincipalmentealasdimensionesdelapantalla.

ResponsiveWebDesignnoesunaúnicatécnica,sinosonunconjuntodeellasquenossirvenparahacerdiseñosadaptablesalmediodondesevanaconsumir.Portanto,estemanualnotieneunprincipioyunfinquepudieraestarperfectamentedefinido,sinoquesepodríaampliarsucontenidoenfuncióndelasnecesidadesdelossitioswebenlaactualidad,experienciadelosescritoresolasnovedadesenlosestándarescomoHTMLyCSSparafacilitarlaadaptabilidaddeldiseñoweb.

EnInternetnohemosencontradounainformacióncompletayordenadadeprincipioafin,enespañol,sobreResponsiveWebDesign,porloquenoshemosdecididoaescribirestetextoqueesperamossirvadereferenciaparaquiencomienzaainteresarseporlaadaptabilidaddeldiseñooinclusoparaquienyaaplicael"Responsive".

Encuentrasestemanualonlineen:http://desarrolloweb.com/manuales/responsive-web-design.html

http://desarrolloweb.com/manuales/responsive-web-design.html



Autoresdelmanual

Lassiguientespersonashanparticipadocomoautoresescribiendoartículosdeestemanual.

MiguelAngelAlvarez

MiguelesfundadordeDesarrolloWeb.comylaplataformadeformaciónonlineEscuelaIT.Comenzóenelmundodeldesarrollowebenelaño1997,transformandosuhobbyensutrabajo.

DanielMartínez

Diseñadorgráficoconvertidoaweb



Conceptosfundamentalesdeldiseñoresponsive

Comenzamosporunaseriedeartículosqueexplicanlosmotivosporlosquehoyeldiseñowebdebedeseradaptable,analizandolosconceptosmásfundamentales.Elobjetivoesentenderquedebemosdiseñarparatodoslostiposdepantalla,perotambiénparatodaslasvelocidadesdeconexión,todoslosnavegadores,etc.

QuéesResponsiveWebDesign

ComenzamosconunadescripcióngeneraldeltérminoResponsiveWebDesigndemodoquetodospodamosentenderdedóndevieneyporquéestanimportanteenelmundoactualdeldesarrollo.

ResponsiveWebDesigneslatécnicaquenospermitecrearsitiosadaptablesalascondicionesdelordenadorodispositivodesdedondesevanaacceder,sobretodoenloquetienerelaciónconlapantalladelsistemadondeseestánvisualizando.Aunqueeltérminoessuficientementegeneralcomoparapoderreferirseaunaadaptabilidadentornoacualquiercondición.Enesteartículovamosaintentaraclarareltérminoparaqueloslectoressepanbienaquénosreferimos.

Antesdepensarenlaweb,podemosentendereltérmino"responsive"engeneral.Eslacaracterísticadeunsistemaquetienerespuestahaciaelmedioquelerodea.Noesalgoespecíficodelaweb,sinoqueloencontramoseneldíaadía.Porejemplo,unaluzqueseenciendecuandoalgunapersonapasaallado,unapuertaqueseabrecuandonossituamoscercaparaentrarounsemáforoqueseponeenrojocuandopasauncocheavelocidadmayordelapermitida.Todoellosonsistemas"responsive",quetienenunarespuestaconformealmedioolascondicionesdondeseencuentran.

Latraducciónpodríaser"Responsivo",quesíseencuentraeneldiccionariodelaRealAcademiaEspañolaysignifica"Pertenecienteorelativoalarespuesta".Sinembargoentérminosdeunapáginawebseríamásadecuadousarlapalabra"Adaptable",pueslapáginaescapazdeadaptarsealdispositivouordenadordondeseencuentra.Enfin,eltérminoessuficientementeconocidoeningléscomoparausarlapalabra"Responsive"yquetodoslosquevayanaleerestetextocaptenperfectamenteaquénosreferimos,porlo



quepreferimosnotraducirlo.

MarcoactualdondesurgeelResponsiveWebDesign

TenemosquepensarenlascondicionesactualesdelaWeb.AntesexistíansoloordenadoresdondeseconsumíanloscontenidosysinembargohoypodemosconsultarInternetencualquiertipodedispositivo.Móviles,tablets,televisores,libroselectrónicos,relojeseinclusoneveraspermitenaccederalaWebysusservicios.Sonmúltiplesmedioscondistintascaracterísticasylosdiseñadoreswebdebenpreocuparseporquelossitiosseveanbienencualquieradeellos.

¿Versiónparamóviles?

Tradicionalmenteenlaweblossitiosestabanoptimizadosparaordenadoresdeescritorio.Luego,alpopularizarseelaccesoaInternetenmóviles,oalintroducirseelmercadodelostablets,lohabitualeralaexistenciadediversasversionesdeunmismositio,creadasyoptimizadasespecíficamenteparateléfonos,tabletasyordenadorespersonales.

AúnseguimosviendoesasoluciónenlaInternetdehoyeimportantessitiosmantienenversionesdistintasparasuweb.Esaformadetrabajareramayoritariahastaelaño2010aproximadamente,sinembargo,noespráctica.Nosobligabaadiseñarunawebvariasvecesymantenerlayoutsparadiversostiposdedispositivos.Eltrabajoportantoseduplicabaotriplicabaynosoloeldecreacióndelsitio,sinoloqueespeor,eldemantenimiento.Sieldueñodeunawebdecidíacrearunanuevasección,oreformularunaexistente,estabaobligadoaactualizarlaswebsdecadaunodelossistemasparalosquehabíacreadoversionesdistintas.

PeroelproblemaseagravóconlallegadadelaInternetenlatelevisión,enelcoche,etc.¿Quénostoca?¿hacerunaversiónwebparacadaunodelosdispositivosnuevosquevayanapareciendo?Elcaminonovaporahí.

Paraatenderalasnecesidadesactualesyfuturas,necesitamoscrearsitioswebqueseanadaptablesacualquiermediodondequeramosconsumirlas,presentesyfuturos.Tenerunaúnicawebeslamejorsituaciónyjustamentelamejorventajaquenosofreceel"responsive".

Tecnologíaquesurgeparacubrirlasnecesidadesdeadaptabilidad

Aparentemente,eltrabajodeadaptarunawebnoestancomplicado,perohacefaltatecnologíaquenospermitarealizarlo.EnlasegundaytercerageneracióndesitiosyantesdelaimplantacióndelasCSS3,teníamospocasherramientasparaconseguirladeseadaadaptabilidad.ExistíanlosdiseñosfluidosyenDesarrolloWeb.comyahablábamosdeellosen2001,queencontraposicióndelossistemasrígidospermitíantenerlayoutscapacesdeutilizartodoelanchodelapantalla.Eralomásparecidoaunsitioresponsivedehoy.

Laspáginasfluidasseconstruíanconcontenedoresqueteníanlaanchuradelaventanadondeestabanvisualizándose.Sinembargo,estabanpensadosparaqueunawebseviesebienenpantallasde800,1024o1280píxelesdeancho.Noestabaningenidadosconlascaracterísticasdelosmóvilesenlacabeza.Hacerqueunatabla(enaquelmomentoaúnsellevabalamaquetacióncontablasyseestabacomenzandoaverlamaquetaciónconCSS)ounelementoDIVtengalaanchuradelapantallaesmuysencillo,puesrequieresolounatributodeestilo,sinembargo,conseguirquetudiseñoseveabonitoencualquierdimensiónyanoestanfácil.

http://www.desarrolloweb.com/articulos/473.php

http://www.desarrolloweb.com/manuales/maquetacion-css.html



Sobretodohayquepensarqueconlallegadadelosmóvileselrangodedimensioneshabitualesdelaspantallasesmuchomásabarcante.Tenemospantallasquevandesdelos300píxelesdeanchoalos2000ypico.Hoyinclusohaypantallasquesuperanlos5000píxelesdeancho.Siestirasundiseñoconcebidopara300píxelesdeancho,parallevarloadimensionesdeldobledeanchura,eltriple,omás,enlamayoríadeloscasostendrásundiseñohorrible.Comonohabíatecnologíaparapodercrearsitioselásticosquesevieranbienencualquierdimensióndepantalla,losautoresdewebestablanobligadosacreardiferentesversionesdelaspáginas.

Enresumen,CSS3vinoparasolucionaralgunasdelasnecesidadesactuales,pormediodenuevosatributosyconstruccionescapacesderesponderalentornodondeseencuentran.NosreferimossobretodoalasMediaQueriesoaatributostansimplescomomax-widthomin-width(aunqueestosúltimospertenencenaCSS2.1).Graciasaestasutilidadessomoscapacesdereaccionarantedistintascircunstanciascomolaanchuradelapantalla,ventanaocontenedordondeestánaquelloselementosamaquetar.LosveremosconcalmaalolargodelManualdeResponsiveWebDesign.

TérminoporEthanMarcotte

Nopodemosterminaresteartículosindarcréditoaldiseñadorqueacuñóeltérminode"ResponsiveWebDesign".SetratadeEthanMarcottequepublicóunposten"ListApart"yunlibrodondeexplicabatodaslascircunstanciasytécnicasrelacionadasconeldiseñoadaptable.Noesqueseaelprimerdiseñadorquepensóenlanecesidaddeadaptarellayoutdelaswebsalasdiferentespantallas(dehecholoscreadoresdelestándarCSSyahabíancreadotecnologíasparaproducirsitiosadaptables),sinoquefueelqueusóesetérminoquehoyestanpopular.

EnDesarrolloWeb.comsomosdelospionerosenacercareltérminoenespañolalacomunidad,endiversoseventosendirectoyconferencias.EnEscuelaITseofrecióelprimercursodeResponsiveWebDesignenespañol.

Enresumenycomoconclusiónpodemosdecirque"Responsive"englobamuchoscampos,pensamientos,prácticas,tencologíasytécnicasquepuedeninclusocrecerconeltiempo.Amedidaqueaparecennuevossistemasydispositivossingulares,surgennuevasnecesidades,alasquesedarespuestayaseacontécnicasreformuladas,usandotecnologíasexistentes,ocontecnologíasyestándaresnuevos.Todoelloloiremoscubriendoenestemanual.

EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen19/01/2015Disponibleonlineenhttp://desarrolloweb.com/articulos/que-es-responsive-web-design.html

Diseñoresponsiveesdiseñoweb

Lawebsoloseconcibesiesadaptable,hablardeundiseñoresponsiveeshablardediseñoweb,nohaywebsinohayresponsive.

Esteartículopretendedarunavisiónpersonal,ynosolamentemía,sinodelacomunidaddeDesarrolloWeb.comengeneralyporsupuesto,deDanielMartínez@Wakkosenparticular.Adicionalmentequeremosestablecerunaseriedeconsejosútilesparaeldiseñowebengeneralqueteserviránparahacer

http://www.desarrolloweb.com/articulos/css-media-queries.html

http://www.desarrolloweb.com/articulos/taller-responsive-web-design.html

http://www.desarrolloweb.com/manuales/videotutoriales-responsive-web-design.html

http://escuela.it/cursos/responsive-web-design/

http://desarrolloweb.com/articulos/que-es-responsive-web-design.html



diseñosadaptablesenparticular.

Cuandocomenzamoslacorrientedel"responsive"ygraciasaDanielrealizamoslosprimeroseventosendirectoenlosquehacetresañosyaloveníamosdiciendo.

"Eldiseñoresponsiveesdiseñoweb"

AhoratodosqueremoshacerdiseñoResponsiveyasíescomodebedeser.Peroojo,cuandohacesundiseñoresponsiverealmentenoestáshaciendonadadelotromundo,sinosimplementelocorrecto.

Adondevoyesquehablarderesponsivequedamuybonito,noshaceparecermásentendidos,perorealmentedeloqueestamoshablandoesdediseñowebynadamás.Lawebesunmediodondeparticipantodotipodeterminales,dispositivos,miltiposdepantallas,etc.Debemospensarentodoselloscuandoestamosdiseñandounawebynosolamenteenmóvilesosolamenteenordenadoresdeescritorio.

Esnuestrotrabajoyresponsabilidadcomodiseñadores.Esunamaneradehacernosunfavoranuestrosproyectos,anuestrosclientesyporendealosusuariosquevisitanlaswebsquefabricamos.

Asípues,enadelante,cuandonosrefiramosal"diseñoresponsive"(pornuestrapartealolargodelManualdeResponsive)entendámoslocomounamaneradedecirqueellayoutdelapáginavaaadaptarsealaventanadondeestamosvisualizándola.Peronoperdamoslanociónqueessimplementelamaneradeactuarquedeberíatenercualquierprofesionalquesedediquealdesarrollodesitiosweb.

"Noseentiendeeldiseñowebsinoesresponsive"

Consejosparaqueeldiseñowebadaptableseamásfácildeproducir

NuestratareaalolargodelManualdeResponsiveesestablecerlasguíasyexplicarlastécnicasparaquecualquierpersonapuedacomenzaraimplementarelresponsivedeunamaneramássencilla,menostraumática.

Novamosaexplicarteenesteartículolastécnicasesenciales,seríaimposibleporlalongituddeltexto,perosídartealgunosconsejosqueesperamospuedasseguirenadelante.Reparaademásquetodasestasbuenasprácticassoncomúnesacualquiertrabajodediseñoweb,nosolamentealosdiseñosadaptables,porloqueserviránparacualquierdiseñador.

Nousesestilosin-line:LosestilosinlinesonaquellosquesecolocanenelpropioHTML,sobretodoenelatributostyledelaetiqueta.TambiénporsupuestoesinadecuadousarcualquieratributoHTMLquesirvaparaaplicarunformato,comoalign="center".Esosestilosinlinevanaseruncorséquequizásnoseadapte

http://www.desarrolloweb.com/manuales/responsive-web-design.html



atodaslascircunstancias.Igualuntextoqueaparececentradoenciertaresoluciónyquedabien,resultahorribleenunaresolucióndiferenteysituetiquetatienemarcadoeseestiloinlinenolopodráscambiarcuandolonecesites,entusmediaqueriesqueveremosmásadelante.

Lawebnonecesariamentesedebeverigualentodoslosdispositivosynavegadores:Elresponsiveesjustamenteeso,adaptarsealmedio,peroloquequierodecirahoraesqueunawebnonecesitaverseigualentodoslosclientesweb.Debepoderleersebienentodosypermitiralosusuariosconsumirsucontenido,peronodebemosempeñarnosenqueseveaigualenInternetExplorer8queenGoogleChrome.Entendamosquesonnavegadoresdiferentesyportantolawebesnormalqueseveadiferente.Notratemosdemarearlaperdizparaconseguirunsin-sentido.

Nodiseñesparaunaplataforma:Cuandohacesresponsiveocuandohaceswebengeneralnosetratadediseñaruoptimizarunawebenundispositivo,navegadorosistemaoperativodado.GeneralmenteesunaequivocaciónandardescubriendosiesInternetExplorerosiesAndroidosiestalcosaotalotraelsistemaquenosvisita.Sibasastuoptimizaciónenplataformas¿Quépasacuandoaparezcaunanueva?ounaversiónnueva?vuelvesaoptimizar?Estonoquieredecirqueparasolucionarunproblemapuntualnopuedaspreguntartesiestásentalsistema,algoqueavecespuedesalvarnoslavida,sinomásbiendecimosquenosedebeasumircomounaestrategiadediseñoengeneral.

UsarelJavascriptparaloquees:AvecestratamosdesolucionarproblemasconlasherramientasquenosonadecuadasyJavascriptseprestaaello.Porejemplo,unaanimaciónJavascriptenvezdeunaanimaciónCSS.Oundiseñodefilasenformatocebra,alternandocolores.SisepuedehacerconCSSespreferiblequeapliquesCSS,porqueseráscapazdemodificaresosestilosfácilmentedependiendodelascaracterísticasdeldispositivoquetevisita,algoquenoestanrápidootansencillosilohacesconJavascript.EsonoquitaqueseuseJavascriptenciertassituaciones,sobretodoamododefallbacks,parafacilitarunasegundavíaennavegadoresquenolasoportan.Porejemplo,hacerunaanimaciónconJavascriptcuandoelnavegadordelusuarionoaceptelasanimacionesCSS.Aunquequizásantesnosdebemospreguntar¿realmenteesnecesariaesaanimaciónenaquelsistemaquenolasoporta?

Nota:Siteinteresasaberlamaneracorrectadedetectarlascapacidadesdelosnavegadores,deberíasleerelManualdeModernizr.

¿Yatehemosdichoquenousestablasparamaquetar?:Creoqueadíadehoyyanoesnecesario,onodeberíaserlo,incidirenestetema.Peroporsilasmoscas,nocuestanadavolveramencionarlo.Nosedebemaquetarcontablas.Envezdeeso,usacontenedorescomoDIV,osiencajantodavíaesmejorusarlossemánticoscomoARTICLE,SECTION,MAIN,etc.Esverdadquelastablassonmuycómodasparacrearunaestructuradecolumnasdondecolocarcontenido,peronosonnadaflexiblesparaundiseñoresponsive.Todoloquetengasentablaslovasatenerquecambiartardeotempranoporotrostiposdecontenedores,paraluegomedianteCSSdefinirlaestructuradecolumnas,unaovarias,segúnlasdimensionesdelapantallaoelnavegador.Asíqueconvienequecuantoantesteacostumbresadesecharlastablas,siesquetodavíalasusas.EstonoquieredecirquenuncamásvasapoderusarlaetiquetaTABLE,nimuchomenos.TABLEesidealparamostrarinformacióntabulada,porejemplounlistadoderegistros,unatabladecaracterísticasdeproducto,dondesabesseguroquesiempresevanavisualizarloscontenidostabulados.Enesecaso,hastaTABLEtieneuncorrectovalorsemántico.


http://www.desarrolloweb.com/manuales/manual-modernizr.html

http://www.desarrolloweb.com/articulos/etiquetas-semanticas-html5.html



Nota:TenencuentaqueinclusocontenedorescomoDIV,ocualquierotraetiquetaqueenglobecontenido,puedeteneruncomportamientodetabla,siesquelonecesitasparatumaquetaciónparahacercosascomoalineadovertical.Enesecaso,puedesmedianteCSSasignaresecomportamientocondisplay:tableycompañía.

Unidadesrelativas:Sinolohacesya,convienequetevayasacostumbrandoausarunidadesdeCSSdelasrelativas,como%,em,rem.Estotefacilitarálaasignacióndeespaciosytamañosmásquelasunidadesabsolutascomopx,cm,pt…Elmotivoesporqueenundiseñoresponsivenosabeseltamañoquevasatenerparadesplegaruncontenido.Porejemplo,siasignasaunacajaunaanchurade600px¿quécreesquepasarásilavesenundispositivoquetieneunapantallade320pxdeancho?.Sienvezdeellohubiesesdefinidoesaanchuracomo80%,nohabríastenidoquizásproblemas.

VolveremosseguramenteaincidirsobretodosestospuntosenelfuturoenelmanualdeResponsiveWebDesign.

EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen26/01/2015Disponibleonlineenhttp://desarrolloweb.com/articulos/diseno-responsive-web.html

Lostrespilaresdeoptimizacióndeldiseñoresponsive

Cuandodiseñamosunawebdebemosfijarnosentrescosasfundamentales,diseñoparatodoslosnavegadoresysistemas,todaslasresolucionesdepantallaytodaslasvelocidadesdeconexión.

Anteriormenteexplicamosque"diseñoresponsive"esdiseñoweb,asíqueenlíneasgeneralestodoloquevamosacomentarsirvetambiénparaeldiseñowebengeneral.Puesbien,cuandodiseñamosunaweb,queremosqueseafácilmenteusableyconsumibleyporellodebemosoptimizarlaenvariossentidos.Elobjetivoeseldesiempre,quelaspersonasaprovechenlapágina,tenganunaexperienciadeusuariogratayaccedanaloscontenidosquenosotrosqueremos.

Diseñoresponsivenoessolamentehacerqueunawebseadaptetantoalaspantallasdeordenadorescomoalasdelosmóviles,quetambiénloes.Enrealidadhaymuchomáspordetrásylovamosaverenformadetrespilaresfundamentalesquedescribiremosalolargodeesteartículo.Losenumeramosacontinuación:

Lastécnicasresponsivesefocalizanendiseñarpara:

Todoslosnavegadoresysistemas

Todaslasresolucionesytamañosdepantalla

Todaslasvelocidadesdeconexión

http://www.desarrolloweb.com/articulos/modelo-tabla-css-propiedad-display-explicaciones-ejemplos.html


http://desarrolloweb.com/articulos/diseno-responsive-web.html

http://www.desarrolloweb.com/articulos/diseno-responsive-web.html



Todoslosnavegadoresysistemasoperativos

LosnavegadoresconlosqueseaccedeaInternettienendiferenciaslosunosconlosotrosydebemosserconscientesdeellasparaquelaspáginaswebseveancorrectamentesiempre.Haymultitudaspectosquedebensertenidosencuenta,peroengeneralnosdebemosdeasegurarqueelcontenidoseaaccesibleentodoslosbrowsers.

Perolasdiferenciasnosoloestánrelacionadasconlosnavegadores,tambiénconlossistemasoperativos.HubountiempoenelquelaspersonasteníanmayoritariamenteWindowsypodíamosestarsegurosquesinuestrosistemaestabaoptimizadoparaelSOdeMicrosoftestábamosalcanzandoelnoventaytantosporcientodelosposiblesusuariosoclientes.Sinembargoesepanoramahacambiadomuchoenlaactualidad,yaquehoyelsistemaMacOSXesbastantepopular,asícomoelsistemaLinux.

Perolacosanoacabaahí,puestoquelosteléfonosmóvilesotabletasseusanparanavegaryelusodeInternetdesdedispositivosdemovilidadrepresentayalamayoríadeltráficoenalgunospaíses.Estosdispositivostienensuspropiossistemasoperativos,quetambiéndebemostenerencuenta.

Todaslasdimensiones/resolucionesdepantalla

Quizásseaésteelapartadoquetodospensamoscuandonoshablande"Responsive",diseñarunawebqueseadaptaalapantalladeordenadoresydispositivos.Nohacefaltahablarmuchodeello,porqueeslaimagenmentalquetodostenemos:Usarlasmediaqueriesparaquetodoslosordenadoresymóvilesveanlawebconloselementosdispuestosdemaneraquesefacilitelalectura.

Noqueremosdecirqueestepuntonotengaimportancia,perohaybastantemásdetrás.Noobstante,lamayorpartedelastécnicasqueseaprendenenrelaciónallenguajeCSSvanorientadasaestepuntoyeselqueveremosconmásdetallealolargodelManualdeResponsive.Portodoello,sobranlaspalabrasdemomentoparadescribirestepunto.

Todaslasvelocidadesdeconexión

Cuandopensamosendiseñomóvilnodebemospensarsoloenlolimitadodeltamañodelapantalladeldispositivo.Nonospodemosolvidarquemuchagentenavegaenelmóvilconconexionesdelimitadoanchodebanda,oincluso,aunquetengananchodebandaamplioenmuchoscasos,casisiempreexistenplanosdedatosquetienenlimitadalacantidaddemegasogigasquesepuedenconsumiralmes.

Portanto,hoyvolvemosaencontrarnosenlanecesidaddeoptimizarlawebparaquetengamenospesoy


http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


http://www.desarrolloweb.com/manuales/diseno-web-dispositivos-moviles.html



searápidadetransferir,comoenlaépocadelaccesoaInternetenlaslíneastelefónicasconlosmódemsdeantaño.Debemosoptimizarelcódigo,HTML,CSSyJavascript,asícomolasimágenesycualquierotroelementoqueformepartedelapágina.Peronosoloeso,tambiéntenemosque"optimizar"elcontenido.Aquílapalabra"optimizar"noestaríatanbienutilizadayaunquenodejadeserunaoptimización,setratamásquenadadeelegirbienelcontenidoquesedeseamostrarencadamomento.

Esmás,sabiendoquelaspersonasesperandemediatansolo5segundosparadesistirenelaccesoaunaweb,conmayormotivodebemosmanteneracotadalacantidaddecontenidoamostrar.

Enestepuntohabríaqueseñalarquelaseleccióndeuncontenidocorrecto,conciso,claro,breveparaqueseafácildedescargar,perolosuficientementeextensoparaqueayudecorrectamenteavenderunproducto,unamarcaounapersona,esunadisciplinacompleta.Existenpersonasquesehanespecializadoenestudiarelcontenidoyasegurarsequesiempreseaelcorrectoeinclusohaypersonasquesabenoptimizarlodecaraalaventa,otrasdecaraalacomunicacióncorporativa,etc.

Además,cuandosetratadeoptimizacióndecontenidomuchasveceshayquetirarmanodeprogramacióninformática.Existentécnicaspuramenteligadasalacomunicaciónescrita,asícomoalaspectoestético,comolaoptimizacióndegráficos.Peroademáshaytécnicasdeprogramación,comoAjax,quepuedenayudarateneruncontenidooptimizadoparaunadescargadelapáginamásbreve.

TambiénesimportantelaminimizacióndelcódigoJavascriptoCSS.Enresumen,existenmuchospuntosinteresantes,queveremosmásadelanteenotroartículo,paramejorarlacargadeunawebentérminosdeajustarelcontenidocorrectamente.

Conclusión

Eldiseñowebnecesitaadaptarseatodaslascondicionesdondepuedeserconsumido.Noestamoshablandosolamentedelaspantallas,tambiéndelnavegadorodelsistemaoperativodelordenadorodispositivo.Perotambiénelcontenidodebeserpensadodemaneraquenoseofrezcainformacióninnecesariaquenoagregavalorenlaestrategiadecomunicación.Elcontenidoeselrey,perotambiéntienepeso,ynosoloeso:muchocontenidopuededespistardelorealmenteimportante.Enelcasodeuncomercioelectrónicopuedeacabarprovocandoqueelusuariosesatureconmuchasopcioneselloderiveenlapérdidadeunaventa.

EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen16/02/2015Disponibleonlineenhttp://desarrolloweb.com/articulos/tres-fundamentos-responsive-web-design.html

http://desarrolloweb.com/articulos/tres-fundamentos-responsive-web-design.html



Procedimientoshabitualeseneldiseñoadaptable

AhoravamosaanalizarlosmecanismosoflujosdetrabajohabitualescuandoestamosimplementandoResponsiveWebDesign,indicandocuálessonlosprocedimientosaseguirysusdiversasvariantes.Elobjetivoesentenderquépasosrealizaundiseñadorparacrearunsitiowebadaptablefacilitandolalabordedesarrolloymejorandolasprestacionesdeldiseñoproducido.

Flujodedesarrollodeunsitioresponsive

Cómosedesarrollaunsitioadaptativo,aproximacióndelosprocesosusadosparalacreacióndeundiseñoResponsiveWebDesign.

EnelManualdeResponsivehemosconocidomuchascaracterísticasdeseablesdelossitiosdeInternetdehoyengeneralydelossitiosadaptablesenparticular.Ahoravamosacomenzarconunaaproximaciónalflujodetrabajoquesepodríarealizarparalacreacióndeun"layoutresponsive".Claroquehaymuchastécnicasquedeberemosconocerparapoderproducirlos,yaencódigo,perononosvamosametertodavíaconexplicacionesdemasiadotécnicas,sinoaestudiarlosposiblesprocesosdediseño.

Coneltérmino"procesodediseño"demomentonosreferimosalprocedimientoconelquesepuedeconstruirunsitio,desdesuconcepciónhastasuejecución.Aunquedemomentonosquedaremosenlasfilosofíasoestrategiasposiblesparasolucionarlosproblemasdelawebdehoy.

Problemáticadelawebdehoy

Yahemoshabladodeellaenartículosanteriores,porloquenovamosaintroducirnosdenuevoenlascircunstanciasdelawebactual,solocaberecordarquehoyaldiseñar"páginasweb"tenemosqueconseguirqueéstasseanmedianamenteinteligentesparapoderadaptarseacualquiertipodesituación.

Debequedarclaroqueexistendecenas,ocientos,dedispositivosqueseconectanconunsitiowebyquelosdesarrollosdebenpoderversecorrectamenteentodosellos.Esavariedaddeordenadoresydispositivos




tienenunascaracterísticasmuydistintasyademásunnúmerosiemprecreciente.

Pasosparadiseñarunsitioresponsive

Debendeexistirdecenasdeaproximacionesoflujosdetrabajoparadesarrollarunsitio"responsive"quetenganencuentalaproblemáticaactualdescritaanteriormente.Aquíyadependedecadadiseñadorydesuscostumbres,preferenciasoformación.Vamosaintroduciracontinuaciónaproximacionesgenéricasquesoncomúnmenteaceptadasyaplicadasanivelprofesionalymásadelanteenfuturosartículosnosdedicaremosadescribirlasendetalleyapreciarlasventajaseinconvenientesdecadauna.

Nota:Suponemosqueantesdecomenzarsetieneclaroelobjetivodelsitio,sehahechounprototipo(wireframe),enpapelocualquierotraherramientadeprototipadoytantoelclientecomoeldesarrolladorhanllegadoaunconsensosobrecómodebeserlawebyquéelementosdebecontener.Estepuntonoestrivialysobreélhablaremosmásadelante,cuandoexpliquemosfilosofíascomo"MobileFirst",perobásicamentepodemosadelantarquedebemosserbastanteconcisosconloscontenidosquesedebenmostrar,eliminandoaquelloqueseasuperfluooinnecesario.Explicaremosmásadelantequeundiseñoresponsivetenemosquecomenzarpormontarlawebparaqueseveabienenmóvilesysicargamosexcesivamentedecontenidolapáginanonosvaacabertodoenlapequeñapantalladeundispositivo.Esunatendenciahabitualqueelclienteoelequipodemarketingquieraincorporarmuchainformación,perohayquepensarquenosiempreesnecesarioeinclusohabráocasionesenlaquedemasiadainformaciónpuedasercontraproducente.Asíqueesteprocesocomienzaporracionalizarelcontenidoquedebetenerlaweb,algoquenovamosatratarenesteartículo.

1)CrearunHTMLconelcontenidoquedeseamosmostrar

EncualquieradeloscaminosdebemospartirdeunmismoHTML.Comosabes,elcontenidoseescribeconHTMLydebesercomúnparatodoslostiposdedispositivoseinclusoparalosordenadoresconpantallasenormes.EllenguajeCSSeselquenospermiteaplicarunformatoadecuadoparalapresentacióndeesecontenidoyallíesdondepodremosaplicarnuestrasreglas,quepermitiránqueeldiseñoseadapteacadatipodesistemadondedebaserconsumidoelcontenido.

Nota:DesarrollarconHTMLdistintoparalocadatipodesistema,móvil,tablet,ordenadordeescritorio,etc.,dijimosquenoeralaideadetrásdelastécnicasresponsive.LógicamenteestamoshablandodeunmismoHTMLparaunsitioweb.

Aserposible,elHTMLtienequeserbastantesemántico,algoqueaportaelHTML5.EsalgodeseablepordiversosmotivoscomoyahemoshabladoendecenasdeartículosenDesarrolloWeb.comyprogramasendirecto.

ComoresultadodeestepuntodebestenerunHTMLsencillo,enelquehabrássituadoelcontenidocompletodetusitioyaquellasinterfacesparalasfuncionalidadesnecesarias.Merefieroprincipalmentealosbloquesdecontenido,puestoquelomásseguroesquehayascolocadotextosfalsos(lostípicoslorem)eimágenesqueposiblementenotienennadaquever,conlaintencióndeocuparlosespaciosquevasausarentudiseño.Loquetendrástambiénsonlasimágenesdecabeceraopie,comoellogodelaempresa,iconossociales,barrasdenavegación,etc.Enresumen,todoloquesehaacordadoenelprototipoquedeberíasincluirenlapáginawebaconstruir.

http://www.desarrolloweb.com/articulos/prototipado-diseno-web.html

http://www.desarrolloweb.com/articulos/etiquetas-semanticas-html5-compatibilidad.html



Demomento,sitienesdudassobresiuncontenidodeberíaestaronoeneldiseñoinicial,esmejorquenolopongas.Osiesuncontenidoquesolosevaaverenordenadoresdeescritorio,tampocolopongas,puestoquenosvamosacentrarprimeroenencajartodoenlaspantallaspequeñas.

2)AplicarCSS

HacerelHTMLeslapartemenosdivertida.ConelCSScomenzarálafiestaypodrásempezaradisfrutarlamejorpartedeldiseñoweb.Comosabes,elCSSsirveparaaplicarunformatoalapágina,tantoenloquerespectaalaposicióndeloselementoscomoalestilooaspectoquedebentener.Enestepuntodebescomenzaraaplicarlosestilosnecesariosalapágina,pocoapoco,paraquecomienceaversecomotúquerías.

AlolargodelManualdeResponsivedeDesarrolloWeb.comiremosexplicandocadaunadelastécnicasyherramientasqueteayudaránaconstruirunCSSoptimizadoquenospermitacrearunlayoutadaptable.Existenmuchainformaciónqueseguramentequerrássaber,peroesimposiblecontarlatodaenelmismoartículo.Demomentovamosadescribirlasdificultadesqueencontrarás,puesnosolodebesconocerafondoelfuncionamientodelasCSSsinotambiéncómolosnavegadoreslosoportan,puesnotodosentiendenlasmismasreglasdeestilos.

Cadanavegadorentiendeunconjuntodereglasdeestilosyaquellasquenosoporta,pordesconocerlas,simplementelasignora.Ahíesdondecomienzalapartemáscomplejadeldiseñowebydondepodremosaplicarprincipalmentedosflujosdetrabajodiferentes.Peroantesdeexplicarlosqueremosanalizarlosdostiposdecircunstanciasenlasquedebemosencontrarsoluciones.

A)Recursosdediseñoestéticos

Sonaquellosestilosqueseagreganparamejorarlaestéticadeunsitio,comofuentestipográficasespeciales,cajasconesquinasredondeadas,sombrasentextosocajas,etc.Estetipodeelementosnorequierenunaespecialadaptabilidad.Sonmenospreocupantes,porquenovanaafectaralaaccesibilidaddeuncontenido.Soninteresantesparaqueunsitioseveaespecialmentebonito,perosiunnavegadornopuederenderizaresetipodeestilosnorepresentaráunproblemadegravedad.Porejemplo,siInternetExplorer8noescapazdemostrarunborderedondeado,novaapasarabsolutamentenada,puestoquelosusuariosseráncapacesdeverlascajas,aunquetenganesquinasconángulosrectos.

Nota:Aquíunosyotrospuedenteneropinionesonecesidadesdistintas.QuizásnuestroclientequierequelawebseveaigualenunnavegadordeúltimageneraciónyenunnavegadoranticuadocomoIE8.Quizásnuestrojefeloexija,peroennuestraopinión(yladelamayoríadelosdiseñadoresmásimportantesdelmomento)tenemosotrascosasmásimportantesenlasquecentrarnos.HemoshabladoendecenasdeprogramasendirectoennuestrocanaldeYoutubesobreestascircunstanciasynuestroobjetivonoesdiscutirunavezmássobreello.Aunque,demaneraobjetiva,lomásimportantedeunawebeselcontenidoyloquedebenexigirnoslosjefes,clientes,ynosotrosmismos,esqueelcontenidoseaaccesibledesdecualquiersistema,notantoqueseveaigual.Sihayunnavegadorquenosoportasombras,porejemplo,noseacabaelmundo.Alcontrario,deberíamosserconscientesdelasdiferenciasdecadaunoyaceptarlas.

B)Diseñodelayout

Sonaquellosestilosqueseencargandepresentarlainformaciónconunaestructuradefinida,porcolumnas,

http://www.desarrolloweb.com/articulos/css-separar-contenido-presentacion.html




cabecera,pie,etc.Ellayout,alquenosreferimostambiéncomoplantilla,nospermitejerarquizarlainformaciónydesplegarlademaneraqueelusuariolapuedaentendermejor,puedaapreciarlaimportanciadecadacosaycentrarseenloquenosotrospreferimosqueseapreciemás.Porejemplo,siunawebtieneunabarralateraldondehaybannersyotrascosasconmenorimportancia(loqueconocemoscomo"aside")entodoslossistemasdeberíamospoderremarcarlamenorimportanciadeesecontenido.Siunnavegadornoescapazdesituaresabarralateralensulugar,porlomenosdebemoscentrarnosenquenoaparezcaantesqueotrasinformacionesmásimportantes.Oinclusomásimportanteseríaque,siunnavegadornoconsiguerespetareldiseñodelayout,queporlomenosnoaparezcanunoselementosencimadeotros,dificultandolalecturadelcontenido.

EnresumenyComosabes,enelmundodelaweb,atodoslosniveles,loimportanteeselcontenido.Silaestéticadeunawebnoesigualentodoslosnavegadorespodemosseguirviviendotranquilos.Sinembargo,sihaydiferenciasdelayoutéstaspuedenprovocarqueelcontenidonoseaaccesible,oentendible,yesosírepresentaríaunproblemamayorquedeberíamoscorregir.

AproximacionespararesolverlosproblemasdecompatibilidaddelCSS

HemosdichoquenosdebemospreocuparmásporlosproblemasdelayoutderivadosdelasdiferenciasdenavegadoresysusoporteconCSS,aunqueestastécnicastambiénpuedenayudarteaencontrarvíasdesolucióndeproblemasestéticos.

Ahoradeberíamosintroducirdosnuevosconceptosquesonvariacionesdiferentespararesolverunmismoproblema,lasincompatibilidadesenelCSS:ProgressiveEnhancementoGracefulDegradation.Sinembargo,sonconceptosytécnicaslosuficientementeimportantesparaverlosdemaneraindependiente,porloquelodejaremosparaelpróximoartículo.AunquedemomentocabedecirqueestastécnicasnosonalgoespecíficodeResponsiveWebDesign,sinoquelasaprendimoscuandoestudiamosHTML5eneldiseñoweb.

SiquieressabermásterecomendamosverelvídeosobreHTML5ycompatibilidadconlosdistintosnavegadores.

EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen02/02/2015Disponibleonlineenhttp://desarrolloweb.com/articulos/flujo-desarrollo-responsive-web-design.html

ProgressiveEnhancementVsGracefulDegradation

Dostécnicas,oflujosdetrabajo,quenosayudanaresolverlosproblemasdecompatibilidaddelosdistintosnavegadoresfrentealestándarCSS,explicadasenelmarcodeldiseñoadaptable.

EnelartículoanteriorestuvimosanalizandoelFlujodedesarrollodeundiseñoresponsiveyaunquequedóclaroqueestemaamplio,motivodeestudioendiferentesartículosquevamosaabordarduranteelManualdeResponsivewebdesign,comentamosqueexistíandosvariantescomúnmenteusadasparasolucionarlosproblemasdecompatibilidadentrelosnavegadores.

EnelpresenteartículovamosaexpolartantolaaproximaciónProgressiveEnhancementcomoGraceful

http://www.desarrolloweb.com/articulos/video-compatibilidad-html5.html

http://desarrolloweb.com/articulos/flujo-desarrollo-responsive-web-design.html

http://www.desarrolloweb.com/articulos/flujo-desarrollo-responsive-web-design.html




Degradation,aunqueantesdebequedarclaroquesetratadedostécnicasquenoseusansolamenteeneldiseñoresponsive,sinoquelasconocimosyacuandohaceañoscomenzamosaexplicarHTML5enDesarrolloWeb.com.

Básicamente,loquehacemosconestasdosaproximaciones,essolucionarlasdiferenciasentrenavegadorescuandointerpretanunmismocódigo.Comosabes,alolargodelosañossehanidopresentandodiferentesversionesdenavegadoresquesoncapacesdeentenderunconjuntodiferentedeetiquetasHTML,atributosdeestilosCSSyJavascript.Antelasdiferenciasdenavegadores,susversionesylossistemasoperativosdondefuncionan,yconlaintencióndehaceruncontenidoaccesibleparatodosellos,nosvemosenlanecesidaddeaplicarestastécnicas,quenospermitenqueuncontenidoseveacorrectamenteentodoslossistemasposibles.

Ambastécnicastepuedenayudar,inclusopuedequeprefierasenunmismoproyectoaplicarlasalavezparasolucionardiferentesproblemas.Tododependedetuspreferenciasolasnecesidadesdeldesarrollo.Ahondaremossobreestepuntoalfinaldelartículo.Perocomencemosdescribiendolasaproximacionesmotivodeestudiodeestetexto.

Nota:Comodecimos,ProgressiveEnhancementyGracefulDegradationsonaproximacionesparasolucionarproblemasdecompatibilidadentreHTML,CSSyJavascript(quesonloslenguajesqueentiendenlosnavegadores).Noobstante,enelmarcodeldiseñoadaptativo,nosinteresamásquenadaelCSSyporelloesentérminosdeCSSquevamosaconocerestasfilosofías.

ProgresiveEnchancement

Sediseñaunsitiowebcentrándoseenlossistemasmásanticuados,yportantoconmenossoportedelasCSS.ElCSSqueutilizaremosseráelbásicoqueestádisponibleenesosviejossistemasysimplementenospreocuparemosporqueelcontenidoseaaccesible.Apartirdeahíiremosimplementandomáscomplejidadaldiseño,aplicandoCSSquesoportansololosnavegadoresestándaractuales.EseCSSnoserásoportadoporsistemasantiguos,porloquesimplementenolesafectará.ComoúltimopasoaplicaremosCSSquesepuedaverenlasversionespunterasdelosnavegadores,quizásseanlasversionesexperimentalesquesoportanunCSSquequizástodavíanoformapartedelestándaractualmenterecomendadoparasuimplementaciónporlaW3C.

EnestaaproximaciónpartimosdeunmismoHTMLyvamosagregandocapasaldesarrollo,preparadasparalosdistintosnavegadoresdelmercado.Amedidaquenoscentramosenunconjuntodenavegadoresmásavanzado,vamosagregandonuevascapasqueaprovechanlascaracterísticasmásnovedosasyque



simplementesonignoradasporlosnavegadoresmásantiguos.Estatécnicaloqueproduceesuna"mejoraprogresiva"delossitiosweb,visibleenlosnavegadoresquelasoporten,manteniendounproductodebaseaccesibleparalosnavegadoresmenosactuales.

Porconcretarloconunejemplo,podríascomenzarenunaprimeraetapaporestilizartuHTMLconCSScompatiblecontodoslosnavegadoreshistóricos,probandoeldesarrolloenInternetExplorer8,porejemplo.Unaveztengastuwebmodestaperocorrecta,pasarásaunnavegadormásactual,porejemploInternetExplorer9osuperior(IE10,11oelqueseaquedeseesfocalizarte)oinclusoenversionesactualesdeFirefoxoChrome,aplicandoreglasdeestilosquesabesquenoestánsoportadasenIE8peroquesíformanpartedelestándarpresente.Despuésdeesesegundopasotendrásunawebbonita,quesecomportaráfantásticamenteennavegadoresquesoportanelestándaractual.Podrásirunpocomáslejos,enunaterceraetapa,silodeseasyaplicarásestilosCSSexperimentales,quesoloestándisponiblesendeterminadosnavegadoresmáspunteros,quizásutilizandolosprefijospropietariosdelasreglasdeestiloquetodavíanoestánenelestándarrecomendado.

Gracefuldegradation

Estaaproximaciónrecorremásomenoselcaminoensentidoinverso.BásicamentedesarrollaselCSSdetuweb(recuerdaqueelHTMLeselmismosiempre)atendiendoalascaracterísticasmásactualesdelosnavegadores.Tecentrasenhacerunsitiowebtalcomoatitegustaríaqueseviera,contodoslosdetallesdediseñoquehaspensadoaplicarparatuasombrosaweb.Duranteesaprimeraetapaprobarástuwebenunnavegadoractual,aplicandotodotipodereglas,aunquesepasquealgunasnosevanapoderverennavegadoresosistemasoperativosanticuados.

Unavezestássatisfechoconeldiseñoquetehasalidoyhasvistoqueenlasversionesdenavegadoresmodernossevetalcomodeseabas,acontinuaciónpruebaselsitiowebennavegadoresmenosavanzadosyrealizaslastareasqueseannecesariasparaqueelsitioseveadecentemente.

EsastareasdeadaptacióndelawebparasistemashistóricosenocasionesincluyenlainstalacióndealgúnscriptJavascriptquepermitaquelosnavegadoresantiguosentiendancaracterísticasdelasCSSquenosonsoportadasdemaneranativa.Quizásinclusodefinirásestilosalternativosquedebenaplicarsesoloalosnavegadoresquenoentiendenlosestilosquetúqueríasaplicarenunprincipio.

Nota:LosscriptsJavascriptquetesirvenparasuplirlascarenciasdelosnavegadoresantiguossellaman"Polyfills"(rellena-huecos)ylaestrategiacorrecta,parasuinstalaciónúnicamenteennavegadoresdondesenecesiten,pasaporusarunalibreríacomoModernizr,delaquehemoshabladoyaenelManualdeModernizr.

Comodecimos,comienzasdesarrollandotuwebyprobándolaenunnavegadoractual,ChromeoFirefoxsonlosprincipalescandidatos,puestoqueseactualizanautomáticamenteyporlotantoesdesuponerquetengassuúltimaversión,perotambiénpodríashacerloenInternetExplorerenversión10,11olamásmodernaqueencuentresenestemomento.Luegolavasprobandoennavegadoresantiguosyvassolventandolosproblemasdevisualizaciónquevayasencontrando.PuedesprobarlaenunasegundaetapaenInternetExplorer9yenunaterceraenInternetExplorer8yasíhaciaabajohastadondequierasllegar.

¿Cuáleslamejor?

http://www.desarrolloweb.com/manuales/manual-modernizr.html



LosdiseñadoresmásdestacadosapoyanmáslaaproximaciónbasadaenProgressiveEnhancementporqueopinanquelosflujosdetrabajoestánmásoptimizados.Hayunalecturadeestasdosprácticasencontraposiciónqueesinteresanteyquedebemospensar.

ProgressiveEnhancementpartedelabasedeundiseñobásicoyaccesible.Amedidaquesevadisponiendodetecnologíasuperiorsomoscapacesdeañadircapasporencimaalproductoanterior,connuevosestilosquesoloseveránenlosnavegadoresmásmodernosyavanzados.

Porsuparte,GracefulDegradationyacomienzaconunniveldecomplejidadgrandeyelprocesodeconseguirundiseñoqueseveacorrectamenteennavegadoresantiguosserealizamuchasvecesenbaseaparcheareldesarrollodemaneraqueseadaptetambiénanavegadoresantiguos.

BajoeseprismapodríamosdecirqueProgressiveEnhancementmirahaciaadelanteenelflujodedesarrollo,mientrasqueGracefulDegradationempiezadelanteymirahaciaatrás.Teóricamente,cuandosaquenenelfuturonuevosclienteswebconnuevascaracterísticasseríamásfácilmenteincorporadaseneldiseñoconunaaproximaciónProgressiveEnhancement,añadiendosimplementeunacapaporencimaanuestroCSS.Portanto,mirarhaciaelfuturonuncaestádemás.

Nota:TécnicamenteyentérminosdediseñoCSSañadirunacapaporencimanoesmásqueañadiralfinaldelcódigoCSSnuevosestilos.AlestaralfinaldelcódigoCSS,ydebidoalacascada,esacapadeestilosnuevosmandaránsobrelosanteriores,aunquesololosinterpretaránlosnavegadoresnuevos,quelosconocen.Losantiguossimplementelosignorarán.

Algunosdiseñadoressonmásradicalesenestesentidoyseoponenalgracefuldegradationbajoelargumentoquelosprofesionalesnodeberíamosperdertiempoensolucionarlosproblemasderivadosdenavegadoresantiguos,aplicandoparcheso"polyfills",porqueesoprovocaquelosusuariosdenavegadoresobsoletosnosepreocupenporactualizarsussistemas.

Mivisiónpersonal

Entrelasdosaproximacionescomentadas,ProgressiveEnhancementoGracefulDegradation,enmiopiniónpersonalnohayunaquesealamejorolamásadecuada.Insistoqueestoyaesunaopiniónyqueunosdiseñadoresodesarrolladorespuedenpensardeunamaneraodeotra.Inclusopuedehaberprofesionalesquemezclenunayotrafilosofíallegandoanuevosflujosdetrabajoperfectamenteválidos.

Enmicaso,cuandodesarrollounaweb,hoyprefierocentrarmeennavegadoresactuales,diseñandocomorealmentequieroqueseconsumalawebyolvidándomedelosnavegadoresantiguos.AplicoelCSSquerealmentequieroquetengalawebyluego,cuandoyalatengolista,laprueboenInternetExplorer,enversionesantiguas,modificandoaquellascosasquesonnecesariasparaquesepuedaconsumircorrectamente,yaseanJavascriptsoestilosCSSalternativos.Osea,prefieroimplementarGracefulDegradation.

Nota:ParacolocarestilosalternativosennavegadoresantiguostieneslaposibilidaddeusarModernizr,quetrabajandodelamaneracorrectanotedaráningúnproblemademachacarestilosquerealmentequierasparalosnavegadoresavanzados.



Yopersonalmentedisfrutomásdiseñandounawebpensandoenunnavegadoractualyluegometomolatareanotanagradecidade"apagarfuegos",solventandolosproblemasdevisualizacióndenavegadoresantiguos.Paraquenosentendamos,escomocomenzarlacomidaporlospostresyluegocomertelosplatosquetegustanmenos,quizásnosealomejor,peroescomomásmegustatrabajar.

Además,noveoproblemaenmezclarambasaproximaciones.PuedeshabercreadoeldiseñodeunsitiowebsiguiendolafilosofíaGracefulDegradationydosañosdespuésaplicarleporencimaunacapanueva,conCSSpensadoparanavegadores,oversiones,quehayanaparecidorecientemente,loqueseríaProgressiveEnhancement.

¿Ylostamañosdepantalla?¿estastécnicasnoaplican?

Comotehabrásdadocuenta,todavíanonosestamospreocupandodelosdiferentestamañosdepantalla,yahabrátiempodehablardeellosenelManualdeResponsivedeDesarrolloWeb.com.Demomentoestaaproximaciónquedamásquenadaenloqueseríaunflujodetrabajocomúnmenteaceptado.

Noobstante,algunosautorestambiénidentificanlastécnicasProgressiveEnhancement/GracefulDegradationenrelaciónaldiseñoadaptable.Lohacenenelsentidodediseño"MobileFirst"o"DesktopFirst",osea,sisediseñapensandoenelmóvilalprincipioyluegoenordenadoresdeescritorio,obiensediseñaprimeramenteparapantallasgrandesysevaadaptandoapantallaspequeñas.Enestecaso"MobileFirst"seríamáspróximaalafilosofíaProgressiveEnhancementy"Desktopfirst"máspróximaaGracefulDegradation.

Sinembargo,noveomucharelacióndeestostérminosenestesentido,deldiseñoparadistintostamañosdepantallas.Enesteáreanoencuentromuchadiscusiónyhayunconsensoprácticamentetotalenquelaaproximaciónadecuadaes"mobilefirst",delaquehablaremosmásadelantecondetalle.

Conclusión

Comoconsideraciónfinalinsistirenquenotodoesblancoonegro,cadadiseñadorodesarrolladordebeconocerambasaproximacionesparadecidircuáleslaqueseadaptaasumododepensarodeactuar.Inclusopuedequeendeterminadosproyectosoaplicacioneswebseamejorunaaproximaciónquelaotra.Loquetodoscoinciden,oalmenoslamayoríadelosgrandesdiseñadores,esquedebemoscentrarnosenadaptarlossitiosparasolventaraquellosproblemasderivadosdellayoutynotantoadaptarlosrecursosestéticosparaqueunawebseveaigualentodotipodenavegadores.

EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen08/02/2015Disponibleonlineenhttp://desarrolloweb.com/articulos/progressive-enhancement-graceful-degradation.html

MobileFirst

MobileFirstesunafilosofía,unamaneradeencarareltrabajoyunaformadefacilitarnoslalaborduranteeldiseñoresponsive,comenzandosiempreporlosdispositivos,conpantallasmenores.

http://desarrolloweb.com/articulos/progressive-enhancement-graceful-degradation.html



"MobileFirst"esenrealidadunconceptobastantesimple:diseñarpensandoenlosmóvilesprimero.Asíseresumeesteartículoquevieneaexplicarlosmotivosporlosquedebemoscomenzarsiemprecentrándonosenlosdispositivosconpantallasmáspequeñasygeneralmenteconmenoranchodebandadisponibleparalanavegación.

Cuandodiseñasunsitiowebresponsivodebestenerenlacabezaunaenormecantidaddecontextosdondetucontenidovaaserconsumido.ParanoperderseyparaalfinalconseguirunasoluciónoptimizadaparatodoelmundodebemosaplicarlafilosofíaMobileFirst.

AlolargodetodoelManualdeResponsiveWebDesignvamosdandopinceladasquenosorientanhacialaideadelmobilefirst.Desdelaeleccióndelcontenido,quedándoseconlainformaciónmásesencialyrechazandolosuperfluo,hastalasetapasdelaejecucióndeundiseño,sehacenconestafilosofíaenlacabeza.

Contenido

Enunmóvilnotecabetodalainformacióndelmundoynotienesentidoqueunusuariodebahacerunscrollcasiinfinitohastaencontraraquelloqueresultadeimportancia.Enelartículodelostrespilaresfundamentalesdeldiseñoresponsiveyahablamosbastanteacercadeestoyexplicamosmuchosmotivosporlosquenodebemosconcentrarenunapáginamuchacantidaddeinformación.

Ahora,bajolafilosofíadeMobileFirstagregaremoslatareaderealizaruna"especificacióndelcontenido"deunapágina,quecontienesimplementeunlistado(enpalabras)detodosloscontenidosquequeremosenglobardentrodeunapágina,yasealahomeounadelaspáginasinterioresdelsitio.Esarelacióndecontenidotenemosquepensarlaconelmóvilenlacabezaysupantalladedimensionesreducidas,quenoescapazdealbergarunacantidadenormedeinformación.

Nota:Laespecificacióndelcontenidonoserefiereanadagráfico,nisiquieraaesquemasdeinformación,jerarquías,seccionesdelsitioenelárboldecontenidoositemaps.Porsupuestotampocoawireframesoprototiposdondesedistribuyalainformación.Essimplementeunlistadodeelementosquepodríamosescribirconletrasenunblockdenotas.Esuninventariodeelementos,algocomologotipo,buscador,navegadorconlasprincipalessecciones,imagenconelproductoprincipalolos3productosprincipales,etc.

Porsupuesto,esadefinicióndeelementosladebemoshacerconelclienteyseguramentesaldránmuchascosasyquizásalgunasseanprescindibles.Enlacabeceraenunmóviligualnocabeellogotipo+navegador


http://www.desarrolloweb.com/articulos/tres-fundamentos-responsive-web-design.html



+formulariodelogin+buscador.Entoncesdebemosintentarreducirtodoaquelloqueessuperfluooprescindible,eliminándolodellistado.Quizáslopodemossustituirporuniconode"opciones"y,unavezpulsadoqueseveanaquellascosasquenoentranenlapáginaparamóviles.

Diseño

Laetapacreativa,cuandosediseñalainterfaz,yaseaenpapelduranteelprototipadooenHTML+CSSenlaejecución,tambiénsehacecomenzandoporaquelloqueveríamoscuandolawebseconsultadesdeunmóvil.

Resultamuchomássencillodiseñarunawebparaunmóvil,quetienemuypocoselementos,queparaunordenadordeescritoriodondetenemosespacioparacolocarmuchasotrascosas.Porelloesunabuenaideaque,cuandodiseñemos,nospongamosdelantedeunespacioreducidoyveamosquécosassonlasqueentraneneldiseñoyquécosaspuedenserprescindibles.

SiestásejecutandoeldiseñoenHTML+CSScomenzarásreduciendolaventanadelnavegadoralasdimensionesdeanchuraquepuedatenerunmóvil,quizásunos320píxelesdeancho(ahoranovamosadiscutirsobredimensiones),paraacomodarloselementosdetuinventariodecontenido.Quizástedescuentaquenecesitasprescindirdenuevoselementosquesondifícilesdeacomodaryquenoerantanesencialesdespuésdetodo.

Nota:Tambiénpuedesconectarelmóvilalordenadoryverdirectamenteentudispositivocómoseestávisualizandolaweb.Nocabedudaqueelresultadoylaexperienciadenavegaciónesmuchomásfielcuandovesloqueestásdesarrollandodirectamenteenundispositivoquetienelasdimensionesdeanchuraaproximadasalasqueestásfocalizandotudiseño.Existenvariasherramientasquetepuedenayudarahacerdepuenteentreelmóvilyelordenador,demodoquepuedasverenvivotodosloscambiosqueestáshaciendoentusCSSoentuHTML.Ahoranoeselmomentodeexplicarlas,peronoospreocupéispuestendremostiempoparaelloenunfuturoartículoenDesarrolloWeb.com.

Unaveztengaseldiseñoqueseveabienenunaventanaconanchurareducida,entoncesirásestirandolaventanahastaquetedescuentaquetudiseñocomienzaaversefeo.Entonceseselmomentodeponerun"breakpoint"(puntoderuptura)ydefinirmediaqueriesparapantallasquetengandimensionesmayoresqueesaanchura.

Nota:Hablaremosmásadelantesobrelosbreakpointsylasmediaqueries.Demomentonosquedamosmásenlapartedeconceptosyflujosdetrabajoyenpocotiempopodremosvercómoseimplementanencódigo.

MobileFirstesunacuestióndecomodidad,puestudiseñoirádemenosamásyportantogradualmenteirásacomodandolascosasyadaptandoellayoutalasnecesidadesdecadaanchuradepantalla.Peronosoloeso,tambiénessentidocomún,puesesmuchomásfácilcomenzarporunapantallapequeñadondeaparecenpocoselementosypocosdetalleseiragregandocosasamedidaquevancabiendoenellayout.Esdecir,resultamássencillotenerpocoselementoseiragregandomáscosasamedidaquevancabiendo,queempezarporeldiseñoparapantallasgrandesyluegoirquitandocosascuandonotecaben.

Esmásfácildiseñarenpequeñitoalprincipio.Cuandotienesmásespacioverásquetuscosassiguencabiendo.Sidiseñasengrande,cuandotengasmenosespaciolascosasnoteentrarányseguramentetendrás




quehacermuchosmásesfuerzosparaacomodarlas.Enestepuntotodoslosdiseñadoresestándeacuerdo,asíquenolopiensesmucho,comienzadiseñandoparamóviles.

EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen23/02/2015Disponibleonlineenhttp://desarrolloweb.com/articulos/mobile-first-responsive.html

http://desarrolloweb.com/articulos/mobile-first-responsive.html



MediaQueries

CuandopensamosendiseñoResponsiveinmediatamentesenosvienenalacabezalasmediaqueriesCSS3,pueséstassonlasherramientasfundamentalesparaespecificarestilosconrespectoadiversascondicionesdelclientewebqueestávisitandoelsitio.EnlossiguientesartículosteexplicamoscondetallequésonlasMediaqueriesyteofrecemosinformaciónvaliosasobrecómoaplicarlas,creandolosbreakpointsmásadecuadosparatuslayouts.

CSSMediaQueries

LasMediaQueries,incorporadasenCSS3,sonlasprimerasconstruccionesdellenguajeCSSquenospermitendefinirestiloscondicionales,aplicablesúnicamenteendeterminadassituaciones.

LasMediaQueriesson,enunatraducciónrápida,consultasdelascaracterísticasdelmediodondeseestávisualizandounawebynossirvenparadefinirestiloscondicionales,quesoloseaplicaránencasoqueesaconsultadelmedioseasatisfactoria.

Sonunadelasherramientasfundamentalesparaimplementarel"ResponsiveWebDesign"yhanllegadodelamanodelasCSS3,convirtiéndoseenunaliadofundamentaldecualquierdiseñadorweb.

EnlamayoríadeloscasoslasMediaQueriessirvenparadefinirestilosdiferentesparadistintostamañosdelapantalla.Sonsencillasdeentenderyaplicar,aunqueelestándaresbastantesofisticado,condiversasposibilidades.Existenmuchosusos,algunosnotanhabitualesenelmundodeldiseñoactual,peroquepodrántenersuprotagonismoenalgúnmomento.

Nota:Amododecuriosidad,puesrealmentenoseusamuchoeneldiseñoactual,lasmediaqueriespuedendecirnossieldispositivotieneunarelacióndepantalla4:3o16/9,ounaprofundidaddecolordada,porejemplo.Enesteartículonosencargaremosdeconocerloscasosmáscomunesdeusoymásadelantenosadentraremosenestasotrascaracterísticasadicionales.



PasoalfrentedelasCSS

LasMediaQueriesrepresentanunaevoluciónimportantedeCSS,puestoquesuponenlaprimeraestructuracondicionalenellenguaje.SabemosqueCSSnoesunlenguajedeprogramación,nitienemotivosparaparecerse,peroexistenmuchascosasqueseimplementanenloslenguajesdeprogramaciónyquenosvendríanbieneneldesarrolloconCSS,comoeselcasodeloscondicionales.

"Siocurreésto,entonceshaztalcosa"

Unaconstruccióncondicionalcomoestaestanútilybásicaque,aunqueCSSnoseaunlenguajedeprogramación,necesitaincorporarlas.Ejemplosdecasosenlosquenosvendríabienuncondicional:

Silapantalladelusuariotieneestascaracterísticas,entoncesaplicaestosestilosSiseimprimeeldocumentoenlaimpresora,aplicaestosestilos.Silapantalladeldispositivotieneestasdimensionesyademásestásituadoenposiciónhorizontal(landscape),entoncesaplicaesteCSS.

SituacionescomoesassonbásicasylosdiseñadorespuedenresolverlasusandolasMediaQueries.Sonunpasoalfrenteencuantoalaseparaciónentreelcontenidoysurepresentación,puestoquenosfacilitanqueelcontenidodeunapáginapuedaadaptarsealmediodondeseestáreproduciendo,sóloatravésdeladefinicióndeestilos,sintenerquetocarelHTMLparanada.

AlternativasparaimplementarMediaQueries

Aunquelautilidadesnovedosa,lasintaxisesparecidaaloqueyaconocemosdelasCSS,porloquenosresultarábiensencilla.

ParaproducirMediaQueriesdebemostenersiempreenmentelaexpresióncondicional,aquellaquedebecumplirseparaqueseapliquenciertosestilos.Ademáslaexpresióncondicionalpuedetenerinclusovariascondiciones,usandooperadoreslógicoscomo"and"paracombinarlas.DemodoquelascircunstanciasquesedebancumplirparaaplicarunasreglasCSSseandelomásvariadas.

Alternativa1:LaprimeraalternativadelasMediaQueriesesatravésdelatributomediadelaetiquetaLINK.Comosabemos,esaetiquetaeslaqueseusaparaenlazarunahojadeestiloconundocumentoHTML.Eneseenlacepodemosespecificarcondicionalesquedebencumplirseparaquelosestilosenlazadosseapliquen.Porejemplo,queseestéimprimiendoundocumentooquelapantallatengaciertaanchuramínima.

Recordamos,laetiquetaLINKtieneestaforma:

<link rel="stylesheet" href="estilos-generales.css">

Puesahorasimplementelepodemosagregarelatributo"media"indicandolacondiciónquesedebecumplirparaqueestosestilosseapliquen:

<link rel="stylesheet" href="estilo-imprimir.css" media="print">



Esteatributomedia="print"quieredecirquelosestilosdebenaplicarsesólocuandolapáginaseestánmostrandoparalaimpresión.

Nota:EsteusoyalovimosanteriormenteenelartículoEstilosespecíficosparaimpresión.

<link rel="stylesheet" href="estilo-pantallas-grandes.css" media="(min-width:1200px)">

Esteusoseráseguramentemásnovedosoparati.Quieredecirqueesosestilosdebenaplicarsesólocuandolapantalladelusuario(Encasodeordenadoresdeescritorio,laventanadelnavegador)tengaunaanchuramínimade1200píxeles.

ElproblemadeescribirtusMediaQueriesasíesquetienesarchivosdeCSSseparados.Esdecir,aquellosestilosparaimpresiónoparapantallasde1200pxestánenarchivosindependientes,loqueessencillodeadministrarparanosotros,perounamalaprácticaentérminosdeoptimizacióndelaweb,puestoquesetienenquerealizarsevariassolicitudesalservidordistintasparatraerselosCSS.EnlaprácticaralentizalacargadelapáginaenrelaciónahacerunaúnicasolicituddeunarchivoCSSquecontengatodoelcódigodelosestilos.

Alternativa2:Estemétodoquevamosaverahoraesmásinteresanteyeselqueseusahabitualmenteanivelprofesional.Consisteenincorporarlosestilosenunaconstrucción@mediadondeseapliquenentrellavestodoslosestilosquequeremosparaunaconsultademediodada.

@media (min-width: 500px) {

h1{

margin: 1%;

}

.estiloresponsive{

float: right;

padding-left: 15px;

}

}

Comopuedesver,tenemoslasentencia@mediaenlaquepodemosindicarentreparéntesislascondicionesquedebencumplirseparaqueseapliqueestamediaquery.Enestecasoseráparapantallasquetenganunaanchuramínimade500píxeles.

LuegoentrellavescolocamostodaslasreglasyatributosdeestilosCSSquenecesitemosaplicarenestasituación.Lasreglasdeestilossonlasmismasquepondríasfueradelaestructuracondicional.Cuandolasentenciaentreparéntesisseevalúecomoverdadera,seaplicarántodasellas.

OperadoreslógicosparalasMediaQueries

Paracombinardiversascondicionespodemosusarlosoperadoreslógicos,deunamanerasimilaracomoseusanenlenguajesdeprogramación.Losquetenemosdisponiblesson:

http://www.desarrolloweb.com/articulos/css-para-imprimir-pagina-web.html



*Operadorand:

*Operadornot:

*Operadoronly:

*Operadoror:

@media (max-width: 600px) and (orientation: landscape) {

h1{

color: red;

}

}

Estareglaseaplicaríaparapantallasconunaanchuramáximade600píxelesycuandolaorientaciónestáenhorizontal.

Nota:Tenencuentaquelamayoríadesmartphonessimulantamañosdepantallamayores,haciendounaespeciededimensionesvirtualesquefacilitenlalecturadewebsquenoestándiseñadasparaResponsiveWebDesign.Porello,lomásseguroesquetengasqueponerel"viewport"eneldocumentoHTMLaalgocomo:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Sineseviewporttumóvilsimularíaquetieneunasdimensionesdeunos980píxeles,cuandoquizáslapantallasolotengaunaanchurarealde320o500píxeles.Esteasuntoyaseexplicócondetalleenelartículosobreelviewport.

Paraverenfuncionamientolapartedelorientation(landscapeoportrait),tienesqueusarunmóvilotabletycambiarlaposicióndelapantalla,paraqueestéenhorizontalovertical.

Nota:Sitienesunordenadorquenoreconozcaelcambiodeorientaciónlaposiciónsiempreseráconsideradaserálandscape.

@media tv and (min-width: 1200px){

h1{

margin: 10%;

}

}

Estareglaaplicaríaendispositivosdetipotelevisiónycuyaresoluciónminimadeanchuraseade1200píxeles.

http://www.desarrolloweb.com/articulos/etiqueta-meta-viewport.html



@media (min-width: 600px), handheld and (orientation: portrait) {

h1{

color: green;

}

}

Estemediaqueryserviráparapantallasdeminimasdimensiones600píxelytambiénparatodosaquellosdispositivoshandheldqueesténenposiciónvertical.

Nota:Handheldesuntérminoinglésquesirveparaespecificaraquellosdispositivosquesondemano.Pequeñosordenadoresquesellevanenlamano,comolospalmoagendaselectrónicasqueaparecieronantesdepopularizarselossmartphonesotablets.Pormispruebashandheldnoaplicaalosmóvilesotablets.

LasMediaQueriestienenmuchasmásposibilidadesquenocubrimosconesteartículo.Lasveremosmásadelante,perosindudaconloqueahorasabespodrásresolverel98%delasnecesidadesquetepuedasencontrarenelmundodeldiseñoweb.

Siteinteresasabermássobreestetema,enesteotroartículodeDesarrolloWeb.comtecontamoslaestrategiaparaaplicarlasMediaQueriesenResponsiveWebDesign.

EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen07/01/2015Disponibleonlineenhttp://desarrolloweb.com/articulos/css-media-queries.html

GuíasdeusodelasMediaQueriesenResponsiveWebDesign

Vamosaconocermuchasdelastécnicasrelacionadasconlasmediaqueriesquepuedesaplicarparasitiosqueseadaptenatodotipodepantallasymedios.

EnelManualdeResponsiveWebDesigndeDesarrolloWeb.comhemosabordadoyamuchosasuntosimportantesyenconcretoenelcasodelasMediaQuerieslashemosanalizadodesdeunpuntodevistatécnico,centrándonosenlasintaxisdelasCSSparaMediaQueries.Hasidogenial,porqueyasabemosmuchascosasquepodemosrealizargraciasalasMediaQueriesycómoimplementarlasaniveldecódigoCSS.

Noobstantesobretodoparalaspersonasqueseestániniciandohaymuchascosasquelesarrojarándudasoproblemasyquevamosaintentarresolverenelpresenteartículo.Portanto,estásanteuntextomenostécnicoperollenodeconsejosyguíasparaquepuedasaplicarloentusdiseñosadaptables.

http://www.desarrolloweb.com/articulos/guias-uso-media-queries-rwd.html

http://desarrolloweb.com/articulos/css-media-queries.html





ConfigurarunbuenViewport

Elviewportesunadefiniciónodeclaraciónsobrediferentesparámetrosdelavisualizacióndeunapáginaweb,queafectasobretodoalosdispositivos.SetratadeunaetiquetaMETAatravésdelacualsepuededefinirsielusuariopuedeonohacerzoomenlapágina,quézoominicialdebeaplicarsealentrar,laanchuraquedebesimularlapantalladeldispositivo.Esalgolargodecontar,sisequiereexplicarbien,porloqueterecomendamosleerelartículodedicadoalViewportparaencontrarlainformacióndetallada.

DemomentotepuedesquedarconqueelViewportsirveparaquelapáginanosemuestreenpequeñitoeneldispositivo(Habrásapreciadoquecuandoentrasenunsitioquenoes"responsive"sevetodomuypequeño).Cuandotrabajasconunsitioadaptabletienesqueobligaraldispositivoanosimularquetienemásanchuradepantalladelaquerealmentetieneyparaellotienesquedefinirunviewportadecuado.

Esunfallocomúncuandoestásempezandoesnotenerunviewportdefinido.Elsíntomaesquetupáginanoteestáaceptandolasmediaqueriesqueestásdefiniendo.Sitepasaesonotevuelvaslocoydefineunviewportadecuado.Consultaelartículomencionadoparaencontrarlainformacióncompletasobrecómosedefine.

Elordendecolocacióndelosmediaqueries

Ordendelasmediaqueriesesimportanteyportantodebestenercuidadoconello.Paraentendercómoordenartusmediaqueriestienesquetenerencuentadoscosas:

1.Lacascadaque,aniveldeCSS,afectaatodaslasreglasdeestilo2.LareglacomentadaanteriormentequellamamosMobileFirst

Nota:Aunqueesunconocimientobásico,loaclaramosporsiacaso.LacascadaenCSSesaquellamaneradeprocesarlosestilosqueproducequesepuedansobrescribir.Osea,sienunpuntodetuhojadeestilosdefinesunCSSparaunelementoymásadelanteenelcódigoCSSlosobreescribescolocandocualquierotrovaloreneseestilo,elquesetieneencuentaeselquesedefinióporúltimolugar(amenosqueuses"important"enlaprimeraregla).Enresumen,sidosvaloresenatributosdeCSSsecontradicen,porlaregladelacascada,elquesetieneencuentaeselquesecolocóporúltimolugar.

Asípues,elordenqueseusanormalmenteparalasmediaquieries(MQ)es:

1.Colocartodoslosestilosaaplicardemaneraglobal,fueradecualquierMQ.Losestilosquecoloquessin


http://www.desarrolloweb.com/articulos/mobile-first-responsive.html

http://www.desarrolloweb.com/articulos/declaracion-important-css.html



MQseráncomo"MQglobales"queafectaránatodoslosdispositivos,contodaslasanchurasdepantalla.PorlaregladelMobileFirst,lasconfiguracionesquepondrásentuCSSglobal(ausenciadeMQ)seránlasqueseapliquenalosmóviles,osea,alosdispositivosconmenoranchuradepantalla.(Veraclaraciónmásabajo)2.Luegocolocarás,comoprimerMQ,elestilonecesarioparalosdispositivosdelasiguienteanchuradepantallaquenecesites.3.IráscolocandolosMQenordendeanchurasdepantallaascendentes.TerminarássiempreporelMQquecoloquesparalasanchurasdepantallamayores,ordenadoresconpantallasdealtaresolución.

Nota:Estaguía,basadaenlafilosofíaMobileFirst,eslaqueponeenprácticalamayoríadelosdiseñadores,porconsiderarsemásútilyversátil.Lógicamentetúpodríasaplicarlafilosofíaquetevengaengana,siempreycuandosigaslaregladelacascada,queeslaqueverdaderamentetemarcaellenguajeCSS.

Rangosdemediaqueries

Puedesperfectamenteespecificarrangosdemediaqueries.Paraellousasmin-widthymax-widthalavez.Quizásnoesalgomuyhabitual,perolomencionamosporsituvierasnecesidaddeello.Lasintaxisseríalasiguiente:

@media (min-width: 700px) and (max-width: 800px){

.lateral{

width: 33%;

float: right;

background-color: #6ee;

}

}

Esosestilosparalaclase"lateral"losvisualizaríasenanchurasdepantallaquecumplanlasdoscondicionesalavez,osea,quesuanchuramínimasean700píxelesylasanchuramáximasea800píxeles.Esdecir,elrangode101píxelesquevandesdelos700hastalos800pixel.

Anchuradelapantalladeldispositivo

Hastaahorahemosdefinidolosmediaqueriesconrespectoaunaanchuradelapantallaquepuedastenerenunmomentodado,perotambiénpuedesdefinirlasparalaanchuratotaldelapantalla,independientementedelaconfiguraciónactual.Loconsiguesconmax-device-widthymin-device-widthynoafectanalaanchuradelapantallaactual,sinoaladeldispositivo.

Nota:Recuerdaquecuandodecimosanchurageneralmentequeremosreferirnosaanchuraoaltura.Generalmentelasmediaqueriesseaplicanalaanchura,perotambiénlaspuedesaplicaralaaltura,min-height,max-height.Recuerdatambiénqueconmediaqueriespuedesespecificarsiseaplicanadispositivosqueesténposicionadosenhorizontaloenvertical(landscapeoportrait).Todoesosemencionóenelanteriorartículodelasmediaqueries.




Aclaraciónsobrelas"MediaQueriesglobales"

Anteshemoscomentadoacercade"mediaqueriesglobales".Esteesunconcepto"verdadamedias",puestoquenoexistenmediaqueriesglobales,queafectenatodaslasresolucionespantallaytodoslostiposdedispositivos.Perosiloanalizasmásdecercaobservarásque,sinoexisteningunamediaqueriedefinidaentusCSS,entoncestusreglasdeestiloestaránsiendoaplicadasdemaneraglobal.Dichodeotromodo,cuandonodefinesningúnmediaquerieenrealidadestásdefiniendoestilosCSSqueafectanatodoslosposiblesestados,pantallas,medios,dispositivos,etc.

EsaausenciadeMediaQueriesesjustamentetudeclaración"global",aplicableentodosloscontextos,queafectaatodoslossistemas.

Conclusión

Contodoesteconocimientoyaestásencondicionesdeponertemanosalaobrayaplicarmediaqueriesatudiseñowebyadaptarloatusnecesidades.HaymuchascosaspordelantequeconocerparaaprovecharlasposibilidadesdelResponsiveWebDesign,peroestamossegurosquepodrásaplicarunmontóndeutilidadesparaadaptartodotipodesitiosatodotipodepantallas.Seguroquedisfrutarásdelaexperiencia.Seguiremostrabajandoparallevartemuchosotrosconocimientosytécnicasesencialesparaeldiseñoweb.

EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen04/03/2015Disponibleonlineenhttp://desarrolloweb.com/articulos/guias-uso-media-queries-rwd.html

BreakpointsparadiseñoResponsive

LospuntosomedidasdeanchuradondesepuedencrearsaltoseneldiseñoResponsive,llamadoscomúnmentebreakpoints,apartirdedondeaplicarlasmediaqueriesparaResponsiveWebDesing.

ResponsiveWebDesignsonmuchascosas,esoptimizaciónparatreselementosfundamentales,navegadoresysistemasoperativos,velocidadesyanchurasdepantalla.Enestecasovamosatratarsobrelaoptimizaciónparapantallas,lostiposdepantallasylossaltosqueeldiseñodebepegarparairadaptándose.

Observarásqueundiseñoadaptableesresponsivoaloscambiosdelaventanadelnavegador.Amedidaquelahacemosmayoromenorlaplantilladelapáginavacambiandoparaadaptarsemejoralasnuevasdimensiones.Alestirarlapantallaobservarásque,deunaúnicacolumnaendefinicionespequeñas,pasaaserdedoscolumnasenunaanchuradepantallamayor,luegopasaatenertrescolumnascuandoampliastodavíamáselespacioyasíindefinidamente,talcomoeldiseñadorhayadefinido.

http://desarrolloweb.com/articulos/guias-uso-media-queries-rwd.html

http://www.desarrolloweb.com/articulos/tres-fundamentos-responsive-web-design.html



Aesossaltosenlosqueundiseñocambiadeunlayoutaotro,amedidaquevaagrandándoselaventanadelnavegadorlesllamamosbreakpointsyseproducengraciasalasmediaqueries.Enesteartículohablaremosdelosbreakpointsysobrecuálessonlospuntosidealesenlosquerealizarlos.

Losbreakpointsnodebenorientarseadispositivos

Esteeselpuntomásimportantedelartículo,puestoquegeneralmentelaspersonasconmenosexperienciaenResponsiveWebDesigntiendenaasumirqueexistenunasmedidasestándarenlasquesedebenaplicarlosbreakpoints.Podríahaberlasconformealasdimensionesdediversosdispositivos,comoiPhone,iPad,ordenadoresconpantallasestándaryluegohablaremosdeellas,perolarealidadolarecomendaciónvaporotrolado.

ComovimosenloscapítulosdeintroducciónenelManualdeResponsive,unodelosmotivosporlosqueexisteestafilosofíadediseñoeseldenocrearversionesdistintasparadistintostiposdesistemas.Nocreamosunaversiónparamóviles,otraparatabletasyotraparaordenadores.Esodebehaberquedadoclaro.Puesdelamismamanera,nocreamosbreakpointsorientadosadispositivos.Elmotivoeselmismo:esimposiblequepuedasgenerartantossaltoscomotiposdepantallasysusresoluciones,etc.

Siteempeñasesencrearbreakpointsconlasdimensionesdedispositivosenlacabeza,vasatenerquecrearsaltosparacientosdedispositivos.Cuandosaquenunnuevomodeloounanuevamarcaseguroquenoquieresactualizartussaltosparaquelawebseveabienenellos.Esimposiblealcanzaratodoslosdispositivos,todaslasmarcasymodelos.Esimposiblequeconozcastodaslasdimensionesdepantalla,lasexistenteshoyylasquepuedanexistirmañana.

Cómosaberellugardondecolocarunbreakpoint

Sinohacesbreakpointsorientadosadispositivos,¿cómosaberdóndecolocarlos?Larespuestateladatudiseño.Enotraspalabras,breakpointdebeestarorientadoaldiseñoparticulardetuweb.

Parasaberdóndecolocarlossaltosconlasmediaqueriesdebesestirarlaventanadelnavegador,partiendodelaventanacondimensionesreducidas(mobilefirst)vasestirandolaanchurahastaquecomienzasaapreciarquetudiseñoestáviéndosepeor.Noesquelosusuariossedediquenacambiarlasdimensionesdelaventanadelnavegador,esalgoquehacemoslosdiseñadores,paraimitarrápidamentedistintostamañosdepantallademóvilesotablets.

Tomacualquierpáginawebadaptable,comoladeDesarrolloWeb.com,yponlaendimensionesdeanchurapequeñas.Entoncesagrandalaventanayapreciarásqueendeterminadomomentosurgemuchoespaciovacíooquelascolumnascomienzanaserdemasiadograndes.Entonces,enesemomento,pocoantesopocodespués,verásque"zas",cambiaellayout.





Osea,vashaciendolapáginamásanchaycuandotudiseñoempiezaaempeorar,olosespacioscomienzanaestarpeordistribuidos,entonceseselmomentoadecuadodecolocarunbreakpoint.

Breakpointsgrandesypequeños

Laregladeoroesnolimitarnosanosotrosmismosaunnúmerodebreakpointsdeterminado.Nodebesescatimaralahoradehacerbreakpoints.Nolosveascomopuntosdondecambiasdelayout,orientadoamóviles,tabletsomonitoresdeordenadordealtadefinición.Comohemosdicho,noeseseelobjetivo,crearversionesdeldiseño,aunquemantengasunúnicoHTML.Avecesunbreakpointpuedesersimplementecambiarlaalineacióndeunelemento,lamedidadeuntextoenuntitular,etc.Lospuntosdondecolocasmediaqueriespuedenserparacualquiercosaquenecesites.Avecesesalgotansimplecomounaimagen,queapartirdedeterminadasdimensiones,quieresqueflote(float)paraqueeltextoalrededorlarodee.Ounaumentominúsculoenlafuentedelapágina.Noimportaquetanpequeñoeselcambio,sivesquebeneficiaalaspectodetupágina,esmotivoparacrearunnuevo"mediaqueries".

Portanto,haytantobreakpointsgrandes,quetecambiaránellayoutdelapáginayportantoafectandemaneramásradicalaldiseñoyotrospequeñospuntosderupturaintermedios,querealizaránpequeñosajustesparasolucionardetallesquemerezcalapenaretocar.Portodoeso,volvemosaremarcarelpuntoanterior,esimportantequelosbreakpointsloshagasenfuncióndetudiseño,apreciandoelmomentoadecuadoparaproducirlos,agrandandoyempequeñeciendolaventanadelnavegadorparadecidircómoycuándo.

Medidasestándarparamediaqueries

Haydiseñadoresque,apesardetodolodichoanteriormente,aúnsepreguntansiexistenmedidasestándarparaunapágina,enlosquecrearsusbreakpoints.Nopodemosdarteesasmedidas,entreotrascosasporquenopretendemoscontradecirnosanosotrosmismos,almenosnoenesteartículo.Peronodesesperesporquerealmentenolasnecesitas.

Volvemosainsistir,lasvecesquehagafalta,quelasmediaqueriesnosedebendefinirparaoptimizarundiseñoparaiPadoiPhone,etc.sinoquedebenseraquellasqueproduzcanunaadaptabilidadmejordeldiseño.Yesosololoconsiguesconociendotupropiodiseñoynoconociendolossoportesdesdedondelovanaacceder.Recuerdaademásquecualquiercoleccióndedispositivosquepuedastenersiemprevaserparcial,puestoqueesimposiblereunirtodoslostamañosdepantallayresolucionesenningúndocumento.Básicamenteademásporquenecesitaríamosestaractualizandoesalistacasidiariamente.

EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen05/05/2015Disponibleonlineenhttp://desarrolloweb.com/articulos/breakpoints-responsive-web-design.html

Medidasestándardepantallasparatusmediaqueries

ListadodepantallasyviewportscomunesdedispositivosyordenadoresdeescritorioparahacernosunaideadehaciadóndepodríanapuntarnuestrasmediaqueriesCSS.

Hepensadobastanteantesderedactaresteartículo,analizandohastaquépuntodeberíaonoescribirlo.

http://desarrolloweb.com/articulos/breakpoints-responsive-web-design.html



Comosabemos,losbreakpointsdeundiseñoResponsiveWebDesignparacreartusMediaQueriesnodebenorientarseatamañosdepantallaestándar,sinodebeseralgoespecíficoparatupropiodiseñoweb.Sinembargo,muchaspersonasquierensaber,almenosamodoorientativo,quémedidasdepantallashabitualessepuedenencontrarenlosdispositivos.

LoquenoquieroquesepienseesqueestepuntocontradicetodolodichoanteriormenteenelManualdeResponsiveWebDesign.Poresoesbuenoinsistirqueestasmedidassonsolamenteamodoorientativo,paraaquellaspersonasquetienencuriosidadsobrelasdimensionesdelosdispositivos"estándar".

Recordandoquecualquiercoleccióndemedidasparamediaqueriesestásiempredesactualizadaeincompleta,porqueesimposiblealbergartodasycadaunadelasmedidasdepantallaquehayenelmercadodeordenadoresydispositivosyademás,cuandosepubliqueoleaestetexto,quizásyahayanaparecidonuevosdispositivoscondimensionesdiferentesalasquesemencionan.Asíquetomaestasmedidasdeviewportcomounareferenciaúnicamenteorientativaysobretodoparcial.Entiendeademásquenopretendemosquediseñesparaningunadeestasdimensiones,puestoqueseríaunerror.

Nota:Muyimportante,loquesemuestraacontinuacióneseltamañodelViewport.Lasmedidasencentímetrosopulgadasdelapantallanotienenqueverconlasmedidasqueelteléfonotieneenpíxeles.Peroademás,elmóvilpuedetenerunaresoluciónenpíxelesdiferentequesuviewport,porquemuchosmóvilesusanvariospíxelesdepantallapararepresentarunpíxeldeimagen,debidoasu"devicepixelratio"oelratiodepixelsqueeldispositivousaparamostrarunpixeldecomputableenmedidasdeviewport.Porejemplo,lapantalladelNexus5esFullHD,loqueimplicaunaresoluciónde1080x1920pixels.Sinembargo,almostrarunapáginawebelNexus5tieneunviewportde360x598.Todoestoesunpocodelío,peroesporquelasdensidadesenpíxlesdelaspantallasahorasonmayoresypararepresentarunpíxelusanvariospuntos.

Medidasdeteléfonosmóviles

LagamaiPhonetienemedidasquesonfactiblesderecopilar,puestoquelosmodelosquehanaparecidoenelmercadosonlimitados.Sinembargo,lagamaAndroiddebetenerdecenasdemilesdetiposdepantallasdistintas,porloquesimplementepodemoshacerunresumendemodelosmástípicos.

iPhone4y4S:320x480iPhone5y5S:320x568iPhone6:375x667iPhone6+:414x736Nexus4:384x598Nexus5:360x598GalaxyS3,S4,S5:360x640HTCOne:360x640

Medidasdetablets

Pasaunpocolomismo,podemosindicarmedidasdeviewportparalostabletsdeApple,peroesimposible

http://www.desarrolloweb.com/articulos/breakpoints-responsive-web-design.html





dartodaslasmedidasqueencontrarásenunAndroid.Recuerdaque,asícomolosmóviles,puedessituarlapantallaenverticaluhorizontal,asíqueesunpocolomismoquedigamosqueuniPadtieneunasdimensionesde768x1024ode1024x768.

Además,porladensidaddepíxelesdelaspantallas,aunqueiPad1,2,3y4,inclusoeliPadMini,tenganelmismoviewport,lospíxelesderesolucióndesuspantallassondiferentes,loquecambiaeselpixelaspectratio.Enestecasoconcreto,losiPadMiniylosiPad1y2tienenundevice-pixel-ratiode1mientrasqueiPad3enadelantetieneundevice-pixel-ratiode2.

iPadtodoslosmodelos,asícomoiPadMini:1024x768GalaxyTab2y3(7.0pulgadas):600x1024GalaxyTab2y3(10.1pulgadas):800x1280Nexus7:603x966Nexus10:800x1280MicrosoftSurfaceW8RT:768x1366MicrosoftSurfaceW8Pro:720x1280

Ordenadoresdeescritorio

Enelcasodelosordenadoresdeescritoriocontamosconlasresolucionesdepantallatípicasdetodalavida,aunquetambiénentraenjuegorecientementeladensidaddepíxelesqueaumentaenordenadoresmodernos,comolaspantallasRetinaenlosMac.

Pantallaspequeñas(usadasporejemploennetbooks):1024x600Pantallasmedianas:1280x720/1280x800Pantallasgrandes:anchosuperiora1400píxeles,ejemplo1400x900o1600x1200.

Relojes

Aquíyalacosaseponecomplicada,puestoqueelviewportesmuyreducido,porloquelaexperienciadeusuariodebeajustarsemucho,peroesoesotrotema.

AppleWatch:42mmdeanchuradepantalla,viewportde256px(calculadoenrelaciónaltamañodepantalladeliPhone)360MotoWatch:218x281

Conclusión

Demomentoesoestodo.Noquieroacabarsinvolverainsistirenqueestarecopilaciónnopretendesercompleta,yaquelasMedidasestándarparabreakpointsnoexisten,puesdependedeldiseñodetupágina.

Haydosreferenciasquemeparecenmuyútilesyqueheutilizadocomodocumentaciónparaconstruirestelistado.PorunaparteelsitiowebViewportSizes,quetieneunaestupendareferenciadeunacantidadenormededispositivos.PorotraparteelartículoMediaQueriesforStandardDevicesdeCSS-Tricks,quetevieneconuncódigodelosmedia-queriesquedeberíasusarparadefinirestilosparaundispositivo,loquenospareceunpocoerrorporlosmotivosqueyahemoscomentado,peroquepodríanserdeutilidadalosinteresados(soloporcapricho)deaplicarestilosespecíficosparaunmodeloparticular.

EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen30/06/2015Disponibleonlineenhttp://desarrolloweb.com/articulos/medidas-estandar-pantallas-media-queries.html

http://viewportsizes.com/

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://desarrolloweb.com/articulos/medidas-estandar-pantallas-media-queries.html



Todosobreunidadesdemedidaparaeldiseñoadaptable

CSSdisponedeungrancatálogodeunidadesdemedidaquesepuedenadaptaradiversasnecesidades.EnloquerespectaaResponsiveWebDesign¿Cuálessonlasunidadesdemedidamásinteresantes?¿Enquécasosdebemosusarcadauna?

UnidadesdemedidaenCSS:relativasyabsolutas

DiscusiónsobrelasunidadesdemedidaCSS,distinasunidadesconsusexplicacionesyladiferenciaciónentreunidadesrelativasyabsolutas.

LasunidadesdemedidasonalgoquevienedeCSS,tienenqueverconellenguajedelashojasdeestiloynoespecialmenteconlastécnicasenglobadasen"responsive".Portanto,yahansidoobjetodeestudioenotrosartículosdeDesarrolloWeb.com.SiquieressaberlobásicoconvieneleerelartículodeunidadesdemedidaCSShttp://www.desarrolloweb.com/articulos/185.phpsinosabéisaquénosreferimos.

SinembargoenResponsiveWebDesigndebemosusarunidadesdemedidaconmayorcuidado,sicabe,parasacarlomejordecadauna.Quizáshabéisescuchadoqueenlíneasgeneralessedebeintentarusarunidadesdemedidarelativasy,aunqueesciertoenmuchascircunstancias,nosiempreescorrectoniportantolomásadecuado.

Lasunidadestienendiversascaracterísticasquedebemosconocer,parausarlasconcriterioyescogerlasmásadecuadasencadacaso.Deesoesloquetrataesteartículo.Además,tambiénqueremosactualizarlainformacióndeDesarrolloWeb.com,puestoqueenlosúltimosañoshanaparecidonuevasunidades,ennuevasespecificacionesdeCSS,delasquenohemoshabladoenartículos.

Nota:EnprogramasenvivodelosqueemitimosporhangouttodaslassemanassíhemosidoactualizandolainformaciónacercadeunidadesdemedidaCSS.Porejemploterecomendamosel#designIO:UnidadesdemedidaCSS.


http://www.desarrolloweb.com/en-directo/unidades-de-medida-css-designio-8273.html



Medidasfijasymedidasrelativas

Loprimeroquetenemosquesaberdistinguiresentreunidadesrelativasyunidadesfijas.Porsiacaso,vamosadescribirlasyconstatarcuálessonlasunidadesCSSmáshabitualesdecadatipo.

Unidadesfijas:

Sonaquellasqueespecificanunamedidaentérminosabsolutos,sintenerencuentaelcontextodondeseestánaplicando.Porejemplo300px(300píxeles)esalgobastantefijo,quetendráunvalorindependientementededóndesehayadefinido.300pxsonsiempreeso,300px,independientementedesitucontenedortieneunaanchurade2000pxode500px.

Nota:Enmuchosdeloscasoscuandodecimos300pxenCSScorrespondecon300puntosenlapantalla,peronoessiempreasípueshabríaquediscutiracercadepantallasconmayordensidaddepíxeles,comolaspantallasretina.EndeterminadaspantallasunpxdeCSSnotienesiemprequecorresponderconunpuntoenlapantalla,perononosvamosametertodavíaenello.

Lassiguientesunidadessonunidadesfijas:

px:Píxelesin:Pulgadas(1inesiguala96px)pt:Puntos(1ptesiguala1/72in)cm:Centímetrosmm:Milímetrospc:Picas

Unidadesrelativas:

LasunidadesrelativasdeCSSsonaquellasquetienenencuentaelcontextodondeseencuentran.Sonrelativasalasdimensionesdelcontenedordondesehandefinido.Porejemplo%,esunaunidadrelativa,puestoque30%deanchonoserálomismoparaunelementosituadodentrodeuncontenedorde2000pxdeanchuraosobreuncontenedorde1000pxdeanchura.

%:porcentajeem:Alturadelafuenterem:Root-emvw:Viewportwidthvh:ViewportHeightvmin:Viewportmenor,entrealturaoanchuravmax:Viewportmayor,entrealturaoanchuraex:anchuradelafuenteparalaletra"x"ch:laanchuradelcarácter"0"(cero)

Nota:Sigueleyendoparaencontrarexplicacionesdetalladasdeestasmedidas.

Unidadesrelativas¿aqué?

Sisabeslarespuestaoalmenostehashechoesapreguntatepuedesdarporsatisfechopuesesunabuenareflexión.Cadaunidadpuedeserrelativaaunacosadistinta,oinclusomedidascomoelporcentajepuedenserrelativasavariascosas.

Elporcentajeesrelativoalapropiamedidaheredada.Porejemplo,siestamosdefiniendotamañosde



fuentesydecimosquees150%,entoncesesamedidaesrelativaalpropiotamañodelafuentedelelementoqueheredadelcontenedor(unavezymediaeltamañodelafuentequehabríaenelelementoantesdeaplicarleelestilo).Perolamismaunidaddeporcentaje,aplicadaalapropiedadwidthdeunacajaserárelativaaltamañodelcontenedorensuanchura.

Porsuparte,launidademesrelativaaltamañodeltextodelcontenedordondeestáaquelelementodondeseleaplicaesaunidad.Ysiempreesrelativoaltamañodeltexto,aunqueseapliqueenunapropiedadcomowidthqueafectaalaanchuradelelemento.

Nota:"em"esunaunidadqueequivalealtamañodeltextoenuncontenedor.1emeseltamañodelafuentedefinidoenuncontenedor.Eltamañodeltextopredeterminadoenunnavegadoresde16píxeles,portantoyanoserquelocambiemos,1emenelbodyseráequivalentea16px.

Porejemplo,sidefinimosqueuntextosea2emparacalculareltamañoefectivohabráquesabercuáleseltamañodeltextoenelcontenedorymultiplicarlopordos.Igualmente,siestamosdefiniendounaanchurayleasignamos10em,paracalcularlaanchuraefectivaenpíxelestendremosquesabercuáleseltamañodelafuentedelcontenedor.

Porejemplo,tenemosunelementoDIVqueeshijodirectodeBODY.SinosehamodificadoeltamañodeltextodelBODYesequivalentea16px.SieseDIVtieneunwidthde10em,laanchuraefectivadeelementoseráde10x16píxeles=160px.

Lointeresanteaquíesque,paraelcasodelasdimensionesdeloselementos,podemosespecificarlasanchurasoalturasrelativastantoenemcomoen%.Siusasemseránrelativasaltamañodetextoysiusas%seránrelativasaltamañodelcontenedor,llegandoafórmulasdistintas:

Valor%=(dimensiónobjetivo/dimensióndelcontenedor)x100Valorem=(dimensiónobjetivo/fuentecontenedor)

Dichoconpalabras:Siquieresqueunelementotenga200píxelesdeanchoylasdimensionesdelcontenedorenunmomentodadosonde1000píxeles,elvaloren%seráde200/1000=0.2*100=20%

Siquieresqueunelementotenga200píxelesyeltamañodelafuenteensucontenedoresde16píxeles,enemtendríasquedarleelvalor200/16=12.5em

Lasfórmulasessolocuestióndeaplicarlas,loimportantequedeberíasquedarteenestepuntoesque,dependiendodelaunidad,éstassonrelativasaunascosasyavecesaotras.¿Cuálusar?Laquetevengabien.Generalmenteparaanchurasrelativasdeelementosteserámásfácildistribuirlosespaciosusando%,peroquierestenerunelementoquetengaalturaaproximadadeltexto,puedesusarem.Porejemplo,unspanqueseaunpocomásaltoqueeltextoquetienedentro.

Acontinuacióntienesuncuadroresumendelasunidadesrelativas,conrespectoalamedidaalaquesonrelativas.%:Porcentaje,puedeserrelativofrenteavarioselementos,sitrabajamosconfuentesesrelativoalafuente,perosiloaplicamosawidthesrelativoalaanchuradelcontenedor,porponerdosejemplos.

em:Relativaaltamañodelafuentedelelementoactualrem:Relativaaltamañodelafuentedelelementoraíz(HTML)vw:ViewportWidth,relativaaltamañodelviewport,seríael1%delaanchuradelviewport



vh:ViewportHeight,relativaaltamañodelviewport,seríael1%delaalturadelviewportvmin:Relativaaltamañodelviewport,elvalormínimoentresualturayalturavmax:Relativaaltamañodelviewport,elvalormáximoentresualturayalturaex:Relativaalafuentedefinidaenelcontenedor,tamañodelaletra"x"enlaanchurach:Relativaalafuente,igualqueexperoconlaanchuradelcaracter0(cero)

Nota:ParaaclararvminyvmaxpensemosenunViewportdeejemplo320x480(Silotenemosenvertical"portrait",sería480x320silotenemosenhorizontal"landscape").SilotenemosenPortraitelvwseráequivalentea3.2pxyvhsería4.8px.Encualquieradeloscasos,tantohorizontalcomoverticalvminseríaelmenorentrevwyvhqueseríaequivalentea3.2pxyvmaxseríaequivalentea4.8px.

Enelsiguienteartículoseguiremoshablandodeunidadesdemedida,explicandoalgunasunidadesnotanusadasyvalorandolaconvenienciadelasunidadesrelativasyabsolutasendiversassituaciones.

EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen10/08/2015Disponibleonlineenhttp://desarrolloweb.com/articulos/unidades-medida-css-relativas-absolutas.html

UnidadesdemedidaCSSmásadecuadasparaelResponsiveWebDesign

Explicacionessobrelasmejoresunidadesdemedidaydiscusiónsobrecuándodebemosusarunasuotrasparasacarlomejordelashojasdeestiloyeldiseñoadaptable.

EnelanteriorcapítulodelManualdeResponsiveWebDesignestuvimoshaciendounaprimeraaproximaciónalasunidadesdemedidadeCSSyexplicandolosgrandesgruposdeunidades,queseríanlasunidadesdemedidarelativasyabsolutas.

Estetextovieneacontinuarconloqueveníamoshablando,haciendounespecialhincapiéenexplicarunidadesdemedidanotanutilizadasenlaactualidad,peroquetienenuncomportamientomuyadecuadoparalossitiosadaptables.

Comenzaremosofreciendounaexplicaciónsobrelasunidades"em","rem",asícomo"vw"y"vh".

Unidades"em"

http://desarrolloweb.com/articulos/unidades-medida-css-relativas-absolutas.html

http://www.desarrolloweb.com/articulos/unidades-medida-css-relativas-absolutas.html



EnelartículoanterioryaexplicamosmuchascosassobreestaunaunidaddemedidaCSS,asíquenonosvamosarepetir.Solorecordarqueemcorrespondeconlamedidaactualdelafuenteenuncontenedor.Porejemplo,sihasmodificadoeltamañodelafuenteenunelementoylehasasignadofont-size:20px,entoncesdentrodeesecontenedor(ysushijossinoredefinimosesetamaño,1emseráiguala20px.

Ademáscomentamosqueeltamañodefuentepredeterminadoenelnavegadoresusualmentede16px,porloque,sinolohasalteradoenalgúnlugardetuCSS,1emequivalea16px.Peroojo,tómalosolocomounareferencia,yaqueesetamañodefinidopordefectoesalgopropiodelnavegadoryquepodríacambiarentremarcasdenavegadores,versiones,modelos,sistemasoperativosoconfiguracionesdelusuario.

Unidades"rem"

Ahoraquehasentendido"em",puedesentenderlaunidad"rem",queesrelativaaltamañodelafuentecomoem,peroenestecasotieneencuentaeltamañodelafuentedelelementoHTMLynolaheredadaodefinidaenelelementodondeseencuentreaquellocuyasdimensionesestásdefiniendo.

Elproblemaderemeslacompatibilidadconnavegadoresantiguos,IE8oanteriores,puestoqueesunaunidaddefinidaennuevasversionesdeCSS.Poresemotivo,siquieresusarremyasegurarlacompatibilidadhaciaatrás,deberíasdefinirprimerolasmedidasencualquierunidadcompatiblecontodoslosnavegadores,comopxoemyluegodefinirlasmedidasconrem.

Nota:Comoveseltrabajodeusarremseduplicaportenerqueespecificarlasunidadesdosveces.PeroestolopodríassolucionardeunamaneraprácticayeleganteconpreprocesadoresdeCSS,delosquenohablaremosahora.

Launidadremesunaexcelentemaneradedefinirtamañosdefuentes,puessuelesermuchomásfácildeorganizaryteevitasorpresasodudashabitualesalusarem,yaqueremsiempretendráencuentaunaúnicamedidaparacalculareltamañofinaldelafuenteencualquierlugar.

Unidadesvwyvh

EstastambiénsonunasunidadesderecienteapariciónenelestándarCSS.Sunombre,vwyvhcorrespondenconlassiglas"viewportwidth"y"viewportheight".Podríamosdecirquesecorrespondeconlaanchuraylaalturadelapantalladeldispositivo,perononecesariamentecorrespondejustamenteconlasdimensionesreales,puestoqueaveceselviewportpuedesimularqueeldispositivotieneunasdimensionesdiferentesdelospíxelesdelapantalla.Estoseentiendemejorsiconoceselconceptodeviewportquehemosexplicadoanteriormente.

Estasunidadessonrelativas,aunqueenestecasolosonalapantalladeldispositivo.1vweslacentésimapartedelaanchuradelviewportdeldispositivo,demodoque100vwseríalaanchuratotal.Delmismomodo1vhseríalacentésimapartedelaalturadelviewport.

Enlaprácticaesespecialmenteútilparaconseguirqueunelementoocupetodalaalturadisponibleenlapantalladeundispositivo.Comosabemosunheight:100%tieneuncomportamientomuyerrático,nofuncionandoenlamayoríadeloscasosparalosobjetivosdeseados.Porellopodemosusarelvhcomounidad,comosigue:




.lateral{

width: 200px;

height: 100vh;

background-color: #4ff;

}

Lapartemenosinteresanteesquenofuncionaenpantallasdeordenadores,porloquetendrásqueaplicarestilosalternativossiquieresqueunelementoocupatodalaanchuradelapantalla.

Nota:TenemosunartículocompletodondeseexplicanestasunidadesViewportWidthyViewportHeight.

CuálessonmejoresunidadesCSS,fijasorelativas?

Otradelaspreguntastípicasquenospodemoshacer.Entonces,despuésdetodo,¿Cuálessonlasunidadesrecomendadas,lasfijasolasrelativas?Puesmetemoquenohayunarespuestaexactaquesirvaentodaslassituaciones.Debemosconocerlascaracterísticasdecadaunaparasabercuálusar.

Noobstante,debidoaldesarrolloresponsiveylaimposibilidaddeconocerdeantemanolasdimensionesexactasdelapantalla,generalmenteusarásunidadesdemedidarelativas.Perorepitoquenolopodemostomarcomounareglageneral.

Cuandodefinasunaanchuradeunelementoqueformapartedeunlayoutusaráshabitualmentelasunidadesrelativas,paraquealagrandarodisminuirelespaciosigaadaptándosebienysedistribuyancorrectamentelascajasparalasdimensionesactualesdelnavegador.Estoenloquetienequeverconlaanchura,puestoquealturasrelativasnosesuelentrabajar,yaquesabemosquelaalturasecalculaenfuncióndelcontenidoquehayaquecolocarenloscontenedores.

Enladefinicióndetamañosdelasfuentestambiénesmuyútiltrabajarconunidadesrelativas,dadoqueasítodoslostamañosdeltextoseadaptaránalelementoraíz.Experimentarásqueesmuyútil,llegadaaunaanchuradadadepantalla,aumentar(odisminuir)todoslostamañosdelostextosdelapágina,parafacilitarlalectura.Sihasusadosiemprefuentescontamañosrelativosseríamuyfácildeconseguir,cambiandosimplementeelvalordelelementoBODYoHTML.EnelsiguienteartículovamosaampliarelusoadecuadodelasunidadesCSSparafuentesendiseñosadaptables.

Peroaveceshayelementosquepornecesidadtienendimensionesfijas,comoimágenesquequizásnodeseamosqueseestirenoseencojandependiendodelapantalla,columnasquedebentenersiempreunasmismasdimensionesfijas,elementosdeinterfazgráficaquenodeseamosquealterensuforma,etc.

Engeneralcomoves,encontrarásmáscasosenlosqueaplicarunidadesrelativas,aunquenosignificaquedebamosconsiderarlocomounareglageneraldeobligadocumplimiento,pueshabrámuchasocasionesdondeseránnecesariaslasunidadesfijas.

EsteartículoesobradeMiguelAngelAlvarez

http://www.desarrolloweb.com/articulos/unidades-css-viewportwidth-viewportheight.html

http://www.desarrolloweb.com/articulos/unidades-medida-css-responsive.html



Fuepublicadoporprimeravezen31/08/2015Disponibleonlineenhttp://desarrolloweb.com/articulos/unidades-css-adecuadas-diseno-adaptable.html

UnidadesdemedidaCSSparafuentesResponsiveWebDesign

LasmejoresunidadesdemedidadeCSSparatrabajarcontamañosparatipografíasenResponsiveWebDesign,ventajas,inconvenientesysolucionesalaunidadrem.

LasunidadesdeCSSnotienenmuchomisterio,yaqueestándocumentadasencientosdesitiosweb,sinirmáslejosenDesarrolloWeb.comtenemosvariosartículossobreeltema.Peroenlaprácticasurgendudassobreestosasuntosporque,aveces,laspersonasnotenemosclarocuándoutilizaremorem,porcentaje,etc.cuandosetratadedartamañoalostextos.

Sobreesteasunto,DanielMartínezestuvoexponiendolasrespuestasalosproblemasmástípicosalahoradeasignartamañosalasfuentes,siempreconunidadesdemedidaparalashojasdeestiloqueseadaptenaldispositivo,paraelResponsiveWebDesign.

Nota:esteartículoesunextratoparcialdelprogramacompleto,emitidoendirectoquerealizamosenDesarrolloWeb.com,#designIOsobreUnidadesdemedidaCSS.

LasmejoresunidadesdemedidaparalostextosenCSS

Comodebemosdesaber,cuandotrabajamoscondiseñosadaptables,debemosusarsiempremedidasrelativas,paraqueéstasseadaptenalasdimensionesdelaspantallasdondepuedaverseelsitioweb.Estonosobligaadescartarpx,cm,peronosquedanvariasotrasdondeelegir.

Básicamente,lamejorunidadparatrabajartextosadaptablesenCSSeselrem,"launidadperfecta".Estaunidaddemedidaquieredecir"rootem",yesaquellaquenosremitealtamañodefuentequetenemosenlaraíz.Porejemplo,sinosotrostomamoselBODYytieneunfont sizede100%(loquecorresponderágeneralmenteconunos16píxeles),sabemosquesiempreremseráequivalenteaesos16píxeles,lopongasdondelopongas.

Porquéremesmásútilqueem

http://desarrolloweb.com/articulos/unidades-css-adecuadas-diseno-adaptable.html




Hastahacepoco,estoysegurodequemuchosdelosdesarrolladoresveníanutilizandounidadesdemedidaenem,pero¿cuáleraelproblemaconestosem?puesqueelemdependedeltamañodelafuentedelcontenedor,odeltamañodefuentedeclaradoenalgunodeloscontenedorespadredeéste.

Launidademesrelativaalpadre,quesitieneasuvezotraunidadenem,sehacerelativaalpadreyasí,enlajerarquíadeelementoshastallegaralelementoraíz,elBODY.Esto,quepuederesultarfácildeentender,enlaprácticaavecesnospuededaralgúnquebraderodecabezaalcalcularquémedidaesexactamenteunemenuncontenedor,porquedichotamañodependedeunainnumerablecantidaddecontenedoresquepuedenestaranidados,hastallegaralcontenedordondeestamosindicandolasmedidas.Deestemodo,paracambiareltamañodelafuentedeeseelemento,tenemosquetenerencuentamuchasotrasmedidasquepuedahabersedadoacualquieradelospadresenlapágina.

Calculandounvalorenem

Veamosestoennúmerosparadarnoscuentadecómosedebecalculareltamañodeunafuenteusandoem,parahacerlacorresponderaltamañodepíxelesdeseado.

Imaginemoseltamañobasedelafuenteesde16píxeles.EltamañodeunH1imaginemosqueloqueremosde24píxeles,quesería1.5em.¿Porqué?puestenemosqueaplicarlaregla"target/context"eltargeteslamedidaquelequeremosdaralH1,24pxyelcontextoeslamedidadelcontenedordondeestamos16px.DemodoquelamedidaqueletenemosqueponeralH1seríade24/16=1.5em.

PeroahoraimaginemosquedentrodelH1tenemosunlinkyqueremosdarleuntamañodeletramenor,digamos12px.Ahorayanopodemosdividir12/16parasabereltamañodeesamedidaenem,ahoratendríamosquetenerencuentaeltamañodelH1quehabíamosquedadoqueera1.5em.Sinosabemosqueesoequivaleenestecasoa24px,primerodeberíamosdecalculareltamañodelH1parallegaralos24pxquetenía.Targetsería12pxycontext24px,demodoque12/24=0.5emeltamañoenemquedeberíamosponeralenlace.

Perolacosasepuedecomplicartodoloquequeramos.AhorapodemosimaginarquedentrodellinkhayunSPAN,alquequeremosdarleotrotamañodefuentedistinto.SiqueremosacertarconeltamañodeseadotendremosquetenerencuentaeltamañodelBODY,eldefinidoluegoparaelH1,eldefinidoparaelenlaceyfinalmentecalculareltamañodelSPAN.

Pensandoenotrosdispositivos

Pensemosademásendiferentesdispositivos.EltamañodeunafuenteenunmóvilpodríasersisedeseaunpoquitomenorqueeltamañodefuenteenunIpad.

Nota:AquípodríamospensarquealserelmóvildemenortamañoqueelIpad,lafuenteyadeporsivaaversemenor,perodebemostenerencuentaqueunmóvilsiemprelotendremosmáspegadoalacara,conloquerealmenteadmiteuntamañodefuentemenor.

SiqueremosentoncesreducirlafuentepodríamosasignaralBODY,pormediode"mediaqueries"parapantallaspequeñas,untamañode80%eneltamañodelafuente.Comotodaslasfuentesestándefinidasconmedidasrelativas,encontraremosquesereducenentodalapágina,peroenlaprácticaobservaremos



quesenosempiezaadescuadrar,quelostamañosnocasan.

Estossonlostípicosproblemasqueevitamosconrem.

CómofuncionanlasunidadesRem

Remnofuncionademanerarelativaasucontenedor,sinodemanerarelativaaltamañodefinidoenlaraíz.Deesaforma,cuandoquierocalcularunamedidadeunelemento,notengoquepensareneltamañodesupadreoeneltamañodelpadredelpadre.

Laregladel"target/context"siguevaliendoperfectamente,peropuedohacerlacuentasiempreconrespectoaltamañodefinidoenlaraíz.

SienelelementoBODYteníamos16pxdetamañoyquiero24pxenelH1,tengoquecalcular24/16=1.5rem.SiluegoenelenlacequehabíadentrodelH1quieroquesea12px,tengoquecalcularcomocontext16px(queeraelequivalenteal100%definidocomotamañodelaraíz)ynoeltamañodelH1.Osea,enestecasosería12/16=0.75rem.

CompatibilidadconlasunidadesdemedidaRemyfallback

Infelizmente,existeunproblemaconlasunidadesdemedidaespecificadasenremynoesotroqueInternetExplorer8yporsupuesto,lasversionesanterioresaéste.LosIEantiguosnosoncompatiblesconlasunidadesrem.

Lasoluciónessencillayserealizaporloquesedenominafallback,quesebasaenespecificarcódigoalternativoencasodequenofuncioneeloriginal.Enestecasoelfallbackestansencillocomoespecificarlasmedidasendosunidades.

fontsize: 16px;

fontsize: 1rem;

Losnavegadoresantiguosquenoentiendenremsequedaránconfont size16px(porqueignoranlasegundalínea,yaquenosoncompatiblesconesaunidad).Losqueentiendenremsimplementeleenlasegundalíneaysobreescribenelvalorespecificadoenlaprimera.

Nota:¿Porquénospodemospermitirescribirenpíxelesesamedidafallback?porquenosresultacómodoutilizarlos,yaquenotenemosquehacerningúncálculo.ComoesamedidasololavanainterpretarenlosIE8oinferior,ysonordenadoresdeescritorio,nonosmolesta.

Ciertamentenosdaunpocomásdetrabajoespecificarporpartidadobletodaslasmedidas,peroaquíencontramosunadelasventajasdeusarlosllamadospreprocesadoresCSS.ÉstostienenlaposibilidaddeescribirunmixinpormediodelcualpodemosindicarennuestrosCSS,siempremedidasenpíxelesyluegoqueelpropiopreprocesadorseaelquelaconviertaarem,mediantelareglatarget/contextyescribalasdosunidadesdemedida,tantoenremparalosnavegadoresmodernosypíxelescomofallbackparalosInternet



Explorerantiguos.

Conclusión

Demomento,conestasinformaciónesesperamosquetengassuficienteparaempezaraexperimentarconlosremyasignardemaneramássencillalostamañosdelasfuentesdetussitiosweb.

Sitehainteresadoesteartículodebessaberquesimplementetehemosresumidolosprimeros14minutosdelprograma.EstuvimoshablandosobremuchasotrasmedidasyunidadesenCSS,nosolamenteparalasfuentes,sinoparaotrostiposdeatributos,comoaltura,anchura,etc.Todoesoloencontrarásenel#designIOsobreunidadesdemedidaCSS.

EsteartículoesobradeDanielMartínezFuepublicadoporprimeravezen10/07/2013Disponibleonlineenhttp://desarrolloweb.com/articulos/unidades-medida-css-responsive.html

UnidadesCSSviewportwidthyviewportheight

NuevasunidadesdeCSS3:viewportwidthyviewportheight.Cómopodemoshacerunútilusodeellasalaplicarlasatamañosdelastipografías.

EnesteartículovamosahablarosdedosunidadesnuevasdeCSS,quetienenespecialutilidadeneldiseñoadaptable(conocidocomo"responsive")yquevienenasolucionaralgunasnecesidadesalahoradedefinirtamañosendispositivos,sobretodoútilesparalasfuentes(otipografías).SetratadelasunidadesCSS3"viewportwidth"y"viewportheight",quesonrelativasalaanchurayalturadeldispositivo,respectivamente.

Estasunidadessonunaopcióninteresanteparadefiniralturasyanchurasendispositivos.Lasunidadessonabrevidadasconlassiglas"vw"y"vh".Sumedidaesequivalenteauncentésimodelaanchuraoalturadeldispositivodondeseestávisualizandolaweb.Porejemplo,sideseamosasignarleaunelementounaalturaigualaltamañocompletodeldispositivo,leaplicaremoselvalor100vp.

Porexpresarlomedianteporcentajes,1vw=1%delaanchuradeldispositivo.Porsuparte,1vh=1%delaalturadeldispositivo.


http://desarrolloweb.com/articulos/unidades-medida-css-responsive.html



Nota:Paraentendermejorestasmedidas,siesquenolosabesya,teinteresasaberloqueesel"Viewport".Enresumen,viewportesigualalasdimensionesdelapantalladetumóvilotableta,mientrasqueenordenadoresdeescritorioseríanlasdimensionesdelaventanadelnavegador.

Lapegadelviewportheight,bastanteimportante,esquesolofuncionaendispositivosmóvilesynoenordenadoresdeescritorio.Peroaunasímerecelapenaconoceryaplicarcuandorealmentelepodamossacarpartido,siempreenteléfonosytabletas,porqueendesktoptieneunoscomportamientosunpocoerráticos.

Usodeviewportheightparadefiniralturasdeunamaneracómoda

LasalturasenCSSsiempresonunquebraderodecabezacuandosequiereusarmedidasrelativas,conunidadescomo"%"deCSS.Seguramentequesitenemosalgodeexperienciasobremaquetaciónwebsesabedeloqueestamoshablando.Paratenerlasalturas"controladas"conunidadesrelativasdeCSStenemosquedarledimensionesdealturaatodosloscontenedores.Osea,definirlasdimensionesdeheightdetodosloselementosdelajerarquíadeldocumentohastallegaralelementoquerealmentequeramosdefinirsualturaconunvalorporcentual.Laopciónparaalturaseselviewportheight

Elcorrespondiente"compañero"deViewportheightparalasanchuras,viewportwidth,noestancrucialparadefinirlasdimensioneswidth,debidoaqueloscomportamientosdeunidadesCSSparalasanchurasnonosdanningúnproblema.Peronoconvieneperderlodevista,especialmentepensandoenlastipografías.

Medidas"viewport"paratipografías

Estasmedidas,tantoviewportheightcomoviewportwidth,tienenuncomportamientoespecialquemerecelapenamencionar.¡Sepuedeusarenlatipografía!Estoquieredecirquepodemosasignarlemedidasenviewportwidthauntextoyéstesiempretemedirálomismoentodaslaspantallas,relativamentealasdimensionesdelapantallaquetengamos.Paraquenosenteremos,sidefinimoseltamañodeunafuenteconviewportwidth,ysienundispositivovemosqueocupaun50%delaanchuradesupantalla,podemostenercertezadeque,entodoslosdispositivosocuparámásomenosesemismoporcentajedeanchuradelapantalla,aunqueestemostrabajandoconunaresolucióndiferente.

Loasombrosodetodoestoesqueeltamañodelaletraes"responsive",oencastellano"adaptable",sinnecesidaddeutilizarningúnscriptparaconseguirloodeotrastécnicascomomediaqueriesquesepodríanaplicarconCSSparaintentarconseguireseefectodefluidez.

OsanimamosaprobarestasmedidasdeCSSparasacarvuestrasconclusiones.Suusonodifieredecualquierotroquepuedasestartrabajandoentushojasdeestilo.

body{

fontsize: 2.5vw

}

h1{

fontsize: 4.8vh

}




Esunamaravillaquepodemosusaryalmenosendispositivosnosdarálatranquilidaddequeesasfuentessevanaverigualdegrandes,relativamentealtamañodelapantalladondeseestémostrandolapágina.

Nota:EstainformaciónlahemosextractadodeleventotransmitidoendirectoUnidadesdemedidaCSS#designIO,realizadoenDesarrolloWeb.comconlaparticipacióndeDanielMartínez@WakkosyDanielRuiz@MrViSiOn2,quenosofrecieronmuchainformaciónsobreunidadesdemedidaenhojasdeestiloencascadayconlamenteeneldiseñoadaptable.SiteinteresanlasmedidasCSSmásadecuadasparadiseñosadaptablesterecomendamosleertambiénelartículoUnidadesdemedidaCSSparafuentesResponsiveWebDesign.

EsteartículoesobradeDanielMartínezFuepublicadoporprimeravezen16/09/2013Disponibleonlineenhttp://desarrolloweb.com/articulos/unidades-css-viewportwidth-viewportheight.html


http://www.desarrolloweb.com/articulos/unidades-medida-css-responsive.html

http://desarrolloweb.com/articulos/unidades-css-viewportwidth-viewportheight.html



PracticandoconCSSparaResponsiveWebDesign

Porfinaterrizamosalcódigo,comenzandoavertécnicas,estilosyrecursosprácticosparapodercomponerdiseñosadaptables.Peroojo,todoloqueyaconocesdelasCSSestádisponibleyesaplicableenprincipioaldiseñoresponsive,porloquenoslimitaremosaverlascosasquerepresentanunanovedadenlosdiseñosadaptables.ParacomplementarestainformacióntesugerimostambiénquebusquesenotrosmanualesdeCSSenDesarrolloWeb.com.

EstilosCSSbásicosparaResponsiveWebDesign

Estilos,atributosyvaloresdeCSSqueresultanesencialesparaelResponsiveWebDesignyqueexistendesdelasversionesantiguasdelestándardelashojasdeestilo.

CuandopensamosenCSSparaResponsiveWebDesignnosvienenalacabezamultituddeherramientasdisponiblesenellenguaje.QuizásaquelloquemásresultarepresentativoseanlasMediaQueriesyesciertoqueéstassonlasquenospermitenhacerlamayorpartedela"magia"paraconseguirsitioswebqueseadaptanatodotipodepantallas.Sinembargo,elmundodelasCSSesenormeydebemosaplicarmuchasotrastécnicasyestilosparaconseguirproducirsitiosresponsivos.Enesteartículovamosarepasarunascuantas.

Nopretendemosofrecertécnicasenordendeimportanciaoenelordenquelasdebesdeconocer,tampocoexplicaracercadeflujosdetrabajo,puesdetodoesoyasehablaendetalleenotraseriedeartículosdelManualdeResponsive.Másbiensetratadeexponerunalistadepropiedadesdeestilo,amododecajóndesastre.

Comocasisiemprequehablamosdediseñoresponsive,losconsejosqueencontrarásenesteartículosepuedenaplicar,ysedebenaplicar,paraunmejordiseñowebengeneral,asíquelasdebestenerpresentesinclusosinoestáshaciendositiosadaptables.

Variacionesdelmodelodecajaentrelosnavegadores

http://www.desarrolloweb.com/css/





Unadelasprimerascosasquedebemosentender,yaprender,cuandonosincursionamosenelmundodelasCSSeselmodelodecaja.Supongoquesiestásleyendoestetextoalgunasnocionesdebesdetener.Loquenosésisabessonlasdiferenciasqueexistenentrelosnavegadores,principalmentelasversionesantiguasdeInternetExplorer.

Elatributobox-sizing,aparecidoenlaespecificaciónCSS3,nospermiteindicarcómodeseamosqueseinterpreteelmodelodecaja,evitandoquecadanavegadorloentiendaasumodo.

Enconcretonossirveparaalterarelmodoenelquelosnavegadorescalculanlasdimensionesdeunacaja(unelementodelapáginaentérminosgenerales),esdecir,sualturayanchura.Elproblemaesqueunosnavegadoresparahaceresecálculotienenencuentaelpaddingyotrosno,asícomolasdimensionesdelborde.Sinodefinimosunbox-sizingdemaneraglobalparatodoelsitioweb,corremosunserioriesgoquelaspáginasdelsitioseveandemaneradiferenteencadanavegador,loquegeneralmentenoesdeseable.

Obviamente,estasdiferenciassonmuyimportantesalahorademaquetar.Básicamenteporquesinolastienesencuentapuedequetengasquerehacermuchotrabajocuandopruebastupáginaenotrosnavegadores.Estoesporquegeneralmentevamosmaquetandoyprobandolapáginaenunnavegadoryluego,cuandoprobamoslapáginaenotronavegadorquenoentiendeelmodelodecajadelamismamanera,vemosquemuchascosasquedanfueradellugardondelescorresponde.

Noesnuestroobjetivoexplicardetenidamentelasdistintasalternativasdebox-sizing,perosíteindicamoscuáleslarecomendación:

box-sizing: border-box

Eseatributolotendrásqueespecificarparatodosloselementosdelapágina,asíquepuedesusarelselector*paraseleccionarlosatodos.

Lasposibilidadesdedisplaytableparamaquetación

Esetitularnosignificaqueestemosapoyandolamaquetacióncontablas,nimuchomenos.Unacosaeseldisplay:tabledeCSSyotrabiendistintalastablasdeHTMLrealizadasconlaetiquetaTABLE.Larecomendaciónsiguesiendolamisma,usarTABLEparamostrarinformacióntabulada,sinembargodisplay:tablenossirveparafacilitarlasposibilidadesdelastablastradicionalesenelusodeHTMLsemánticamentecorrecto.

Comoestoyalohemosexplicadoenotrasocasionesnotienesentidoquelovolvamosarepetiraquí,simplementerecomendarlalecturadelartículosobredisplaytable.

MaquetaciónFlexbox

OtradelascosasnuevasquenostraeCSSyquesirvenparamaquetardemaneramuchomásversátil,rápidayevitandomuchosdelosproblemashabitualesdelposicionamientodeelementos,esusarlastécnicasFlexbox.

Flexboxestáconnosotrosdesdehacetiempo,elproblemaesquenavegadoresmuyantiguosnolosoportantodavía.Enconcretoycomosueleocurrir,InternetExplorereselquedalosproblemas,puestoquesólose

http://www.desarrolloweb.com/articulos/modelo-caja-en-css.html

http://www.desarrolloweb.com/articulos/modelo-tabla-css-propiedad-display-explicaciones-ejemplos.html



encuentradisponibleFlexboxapartirdelaversión10.Aunquedichoseadepaso,IE10todavíateobligaatrabajarconprefijospropietarios"ms-"ytieneunsoporteparcial.ElestándardemaquetaciónFlexboxlodisfrutarásdesdeInternetExplorer11ydemaneraglobalentodoslosotrosnavegadoresdelmercado.Siesenorepresentaunproblemaparati,lomejorparamaquetaresaprovecharFlexboxporqueteofreceunasposibilidadesincreíbleshastaelmomento.

ParasabermásdeFlexboxterecomiendoverteunaclaseendirectoenlaqueexplicamoslasposibilidadesdeesteestándar.

Atributosmin-widthymax-width/min-heightymax-height

EstosatributosestándisponiblesdesdehacemuchotiempoenlasCSSasíquedeberíasconocerlos.Sonespecialmenteútilesenlosdiseñosresponsiveporqueloscontenedoresseestiranyseencogen,paraadaptarsealasdimensionesdelasventanasopantallas.Generalmenteeselcomportamientodeseado,loqueocurreesqueenmuchoscasosnodeseasqueeseencogeroagrandarlleguehastaciertoslímites.

Estásdiseñandounawebymuchasvecesnodeseasquelaanchurallegueallímiteposibledeunmonitordealtaresolución,porejemplo2.500píxeles.Nodigoquenosedebahacer,esunadecisióndediseño.

.dimensiones-maximas{

max-width: 1600px;

}

Avecessetratadeunacolumnaquenodebemedirmásqueunasdimensionesdeanchura,quieresquealhacergrandelaventanaseestire,peroquenollegueapasardeunvalordeterminado.Ounaimagenqueseadaptaalanchodeuncontenedorperonoquieresquellegueasertangrandequesesobrepasesuresolución.

.img-banner-aside{

width: 100%;

max-width: 300px;

}

Conalturaspasaunpocolomismo,aunqueenestecasonoseagrandandebidoacambiosenlasdimensionesdelapantallaoventana,sinodebidoalcontenidoquetienen.Avecestienesunlistadodeartículos,porejemplo.Elpropionavegadorharáquelascajasdondeloscoloquesseandelaalturanecesariaparaquequepaladescripcióndelartículo,perounostienenmástextoqueotrosyportantopuedeocurrirquelasalturasquedendescompensadas.Muchasvecesnosignificaráunproblema,sobretodocuandoestánunodebajodelotro,perosiquedaunoalladodelotroylascajastienenuncolordefondopuedequeelefectoseamásfeo(EseproblemasesolucionaconFlexboxocondisplaytable).Incluso,aunqueesténunodebajodelotro,avecessiunostienentextomuypequeño,lacajaquedacontanpocaalturaqueseveridículaencomparaciónconotrasyporelloquieresquetengaunaalturamínima.

.article-home{

background-color: #ddd;

min-height: 225px;

http://www.desarrolloweb.com/en-directo/layout-flexible-flexbox-designio-8904.html



}

Endefinitiva,entodosesoscasosymuchosmásquetepuedasencontrar,convieneteneramanolosatributosmax-widthymin-width,asícomomax-heightymin-height.

Conclusión

EnesteartículohemoscomentadodiversoscriteriosdeCSSyherramientasdellenguajequeseusanmuchoparalosdiseñosresponsive.Porsupuestonosonlosúnicos!solounoscuantosquedebesusarsíosí,ysinllegaralacomplejidadypotenciadelasMediaQueriesquetesolucionanlosproblemasdeunamaneradiferente.

Enelpróximoartículotenemosquehablartedeotroelementofundamentalcuandotrabajascondiseñosresponsive.NoesunCSS,sinounaetiquetaMETAqueesnecesariaparaquetupáginaseadaptecompletamentealapantalladeunmóvil:elViewport.

EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen13/11/2015Disponibleonlineenhttp://desarrolloweb.com/articulos/estilos-css-rwd.html

EtiquetametaViewport

ElViewportesunadelasetiquetasmásrepresentativasdelawebmóvil,quenospermiteconfigurarcómodebeinterpretarunapáginaelnavegadorwebparamóviles.

InicialmentecreadaporAppleparadefinirdiversasdirectricessobrecómoeliPhonedeberenderizarundocumentoweb,elviewportesunaetiquetaMETAquesehaconvertidoenunestándarenelmomentoactual.Lamayoríadedispositivosmóvileslasoportanenlamayorgamadesistemasoperativos,loquelaconvierteenunintegranteimprescindibleparacualquierpáginaqueestépensadaparaversetambiénendispositivosenmovilidad.

Elviewportesunodeesosconceptosquecuestamásdeexplicarquedeentender,oporlomenosamímeloparece.QuizástampocoseaelinterlocutormásadecuadoparahablardeestaetiquetaMETA,peroalguienlatienequetratarconeldetallequesemereceenelManualparaeldiseñowebenmóviles.Asíque¡vamosmanosalaobra!

Básicamente,sirveparadefinirquéáreadepantallaestádisponiblealrenderizarundocumento,cuálesniveldeescaladoquepuederealizarelusuario,asícomosielnavegadordebemostrarlaconalgúnzoominicial.TodoelloseindicaatravésdevariosparámetrosenlapropiaetiquetaMETA,comoveremosenelpresenteartículo.

Entenderelviewport

Comencemosporentenderquéeselviewport.Ycomoveremos,setratadeunconceptobiensencillo,puescorrespondeconeláreaqueestádisponibleenlapantalladelnavegador.


http://desarrolloweb.com/articulos/estilos-css-rwd.html

http://www.desarrolloweb.com/manuales/diseno-web-dispositivos-moviles.html



Aunqueelviewportesalgopropiodenavegadoresparamóvilesycobrasentidojustamentecuandoestemospensandoenestosdispositivosconpantallasreducidas,podemosentenderloprimeroenelcontextodeunnavegadordeescritorio.

Elviewportenunnavegadorencualquierordenadorconsistemastradicionalesesigualaláreadelaventana,omejordicho,aláreadisponiblepararenderizareldocumentoweb(osea,lerestamostodalainterfazdelnavegador,comobotones,barradedirecciones,barrademenús,barrasdedesplazamiento,etc.)Dichodeotromodo,eseláreaútildondesemostrarálapáginaweb.

¿Sencillo?Esperoquesí.Peroahorapensemosenmóvil.Quizássepasquecuandosevenlaspáginasenunadispositivoamenudosereducenloscontenidos,paraconseguirqueseajustenalreducidoespaciodelaventanadelnavegador.Esdecir,paramostrartodalapáginaenelespaciodisponibledelapantalladeldispositivo,sehaceunescaladodelaweb,demodoquesevetodoenpequeñito.

EstaeslamaneraenlaqueseveríaelsitioactualdeDesarrolloWeb.comqueestáoptimizadoparaordenadoresdeescritorioynotienedefinidaningunaetiquetaviewport.



Bien,pueselviewportcuandoestamoshablandodedispositivosmóviles,nocorrespondealtamañorealdelapantallaenpíxeles,sinoalespacioquelapantallaestáemulandoquetiene.Porejemplo,enuniPhone,aunquelapantallaenverticaltieneunasdimensionesde320píxeles,enrealidadeldispositivoestáemulandotener980píxeles.Estohacequeciertaspáginasweb(optimizadasparanavegadoresdeescritorio)quepanenunapantallade320píxeles,porqueenrealidadelSafariparaiOSestáemulandotenerunespaciode980píxeles.

Puesbien,elviewportenestoscasoseselespacioqueeldispositivoemulatener,nolaresoluciónrealenpíxelesquetienelapantalla.Lointeresanteenestecasoesquelosdesarrolladoressomoscapacesdealterarelviewportquevieneconfiguradoenelnavegador,algoqueresultatotalmentenecesariosiqueremosquenuestrapáginaseveacorrectamenteendispositivosdemovilidad.

EstaimagentienelamismafotoquesemuestraenlapantalladeuniPhone.Supongamosquelafotomide320píxelesdeancho.Enlapartedeladerechatendríamoslafotoatamañoreal,queescomoseveríasituviéramosunviewportconfiguradoa320píxelesdeancho.PeroalverlaenuniPhoneconunviewportconfiguradoa980píxelesdeancho,laimagenseverábastantemáspequeña.

ConfigurarlaetiquetaViewport

CuandoSafarideiOSrenderizaundocumentoweb,haceunescaladodeloscontenidosparaquelaspáginasdiseñadasparasistemasdeescritorioseveanmásomenosbienenunteléfonomóvil.Comopudisteapreciarenlaprimeraimagendeesteartículo,alverseelsitiowebdeDesarrolloWeb.com,loscontenidosaparecíanmuypequeñitosyellonosobligaahacerzoomparapoderleerlos.Sinembargo,nosotrospodemosconfigurarelviewportparadecirleaSafari,ocualquierotronavegadorparamóviles,quédebehacerenestesentido.



Nota:Insistimosenque,cuandohablamosdeSafari,enrealidadnosreferimosacualquiernavegadorparamóviles,yaseanendispositivosiOS,Android,Blackberry,etc.,yaquelaetiquetaviewportessoportadaactualmenteporlamayorgamadesistemasparamóviles.Enrealidad,decimosSafarisolamenteporquefueelprimeroenutilizarla.

Esaltamenterecomendablequesealterelaetiquetaviewportparaconseguirquetunavegadorsecomportecomotúdeseas,especialmenteenelcasodelaspáginasqueestamosdiseñandoparaversecorrectamenteenpantallaspequeñas.ParaellodisponemosdelossiguientesparámetrosenlaetiquetaMETA.

Width:anchuravirtual(emulada)delapantallaoanchuradelviewport.Height:alturavirtualdelapantallaoanchuradelviewport.Initial-scale:laescalainicialdeldocumento.Minimum-scale:laescalamínimaquesepuedeponereneldocumento.Maximum-scale:laescalamáximaconfigurableeneldocumento.User-scalable:sisepermiteonoalusuariohacerzoom.

Comopuedesver,enlaMETAviewportnoseindicasimplementelasdimensionesdelapantallaemulada,sinotambiénelniveldezoomquesepuedeestarconfigurandoinicialmenteyelniveldezoomquesepermitiríatener.

Nota:recordarqueelusuariopuedehacerzoomenlapáginaweb,conelgestotípicoenlapantallatáctil.Alhacerzoom,realmentenoestaríacambiandoelviewport,sinolaescalaconlaquesevisualizaeldocumento.



Enestaterceraimagentenemosunviewportde320píxeles,sinembargohemosdefinidoun"initial-scale"de1.5,poresolaimagenquemedíarealmente320píxelesdeanchonocabeenlapantalladeliPhone.

Unejemplodeetiquetaviewportseríaelsiguiente:

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">

Laanchuraylaalturadelviewportdebenquedarmásomenosclaros,puesserefierensimplementealasdimensionesfijasdelviewportinicial.Sinembargo,esasdosmedidasnosesuelenindicar,siendomáshabitualdefinirúnicamentelaanchuraconelvalor"device-width",queesunamedidaquehacereferenciaalaanchuradelapantalladeldispositivo.

Asíqueconwidth=device-widthconseguimosqueelviewportseaigualalaanchurarealdelapantalladeldispositivo,demodoquenosetratarádeemularunapantallamayordeloquerealmenteesyveremoslospíxelesreales.

Coninitial-scale=1conseguimosquenosehagazoomsobreeldocumento.Esbiensimple,elcontenidodelawebnosetransformará,niseagrandará,niseharámenor.



Conuser-scalable=noconseguimosqueelusuarionopuedahacerzoomenlapágina,conloquesiempresemantendránlasmedidasquenosotroshemosdefinidoalconstruirlaweb.

Nota:desactivarelzoomconuser-scalable=nonosfacilitatenersiemprelaescalaacomonosotroshayamosdefinidoenlaetiquetaMETAviewport,loquepuedesimplificarnoslavidaalahoradedefinircómosedebeverunaweb.Sinembargo,estaremoslimitandolaposibilidaddequeelusuariohagazoompuntualmenteparaagrandaroempequeñeceralgunacosa.Portodoello,cabesopesarbienquéesloquequeremospermitirysirealmentedefiniendounmaximum-scaleyminimum-scale,estamosacotandobienelusodenuestraweb.

Conclusión

Elviewportrequiereunestudiopormenorizadoyalgodeprácticaparaentenderbiensusposibilidadesylamaneradeconfigurarlo,demodoqueseoptimicelaformaconelquenuestrawebsedebedeverenlosdispositivosmóviles.Comosehapodidocomprobar,haymuchasydiversasposibilidadesparaexplorar.

Esperamosqueenesteartículotehayamossacadodedudas,sinembargoposiblementepodríamosestarhablandodelviewportduranteunlargoratopararesolvertodaslasnecesidadesdelosdesarrolladoresylasdudasdeaquellaspersonasqueestándiseñandowebsoptimizadasparamóvilesoadaptablesatodoslosdispositivos(responsivedesign).

Paramayoresreferencias,sepuedeconsultarlapáginaweb"ConfiguringViewport"deladocumentacióndeAppleiOSparadesarrolladores.

EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen19/07/2012Disponibleonlineenhttp://desarrolloweb.com/articulos/etiqueta-meta-viewport.html

ImágenesresponsiveconlaetiquetaPicture

CómousarlaetiquetaPictureparacrearimágenesresponsive,unnuevoelementodeHTML5quepermitequelasimágenesysuresoluciónseadaptenatodotipodepantallas.

Unodelosprincipalescomponentesconlosquetenemosquelidiarentodawebsonlasimágenesysutratamientoparaproducirsitiosadaptablesesclave.ParaadaptarunaimagenmuchasvecesessuficienteconasignarleconCSSunaanchurarelativa,demodoquesisucontenedoraumentadetamaño,laimagentambiénaumentará.

Laproblemáticasobretodolaencontramosconimágenespesadas,comofotografías,dondelaeleccióndesutamañoycalidaddependerádelapantalladondesevisualicen.Sipensamosqueesaimagendebemostrarseenpantallasgrandes,tendremosquegenerarunarchivodegrantamaño.Peroesearchivodeproporcionesgrandesrepresentaundesperdiciodetransferenciasipensamosqueesaimagensevaaverenunmóvilconunapantallarealmentepequeña.

http://www.desarrolloweb.com/articulos/taller-responsive-web-design.html

http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

http://desarrolloweb.com/articulos/etiqueta-meta-viewport.html



Loidealespoderdistribuirimágenesacordeconeltamañodelapantallaynosolamentesuspulgadas,sinoavecestambiénladensidaddepíxelesimporta.EnelpasadoaparecieronalgunospluginJavascriptespecialesparahacerimágenesresponsive,tambiénCSShacksoinclusoserviciosweb,quenospermitíandiscriminarporeltamañodelapantalla,ovelocidad,entregandoalnavegadorelarchivoconelficherodeimagenmásadecuadodependiendodelosdiferentesescenarios.SolucionespropietariasqueacabarándesersustituidasporlanuevaetiquetaPICTURE.

Elobjetivo,enresumidascuentaseselsiguiente:

Poderindicarunaimagenyvariosarchivosdealternativaparadistintosescenarios:pantallaspequeñas,medianasograndes,velocidadesdeconexión,etc.Queelnavegadorsólodescargueunadelasimágenesposiblesynotodas.Osea,siunaimagentienetresalternativasdetamaños,seleentreguealnavegadorsolamenteunadeellas,ahorrandoladescargadelosotrostamañosalternativosquenonecesita.

ElementoPICTURE

ElelementoPICTUREensínorepresentacontenidoalguno,sirvesólocomouncontenedorparaescribirvariasimágenesyqueseaelpropionavegadorelqueelijalamásapropiadaencadacaso.

ParaindicarlasimágenesdentrodePICTUREseindicaránvariasetiquetasSOURCE.SeparecealgoalaetiquetaVIDEOoAUDIO,enelquesepuedenindicarvariosarchivosdiferentes,demodoqueelnavegadorlocaliceaquelqueconsigareproducirconsuconjuntodecodecs.Peroenestecasoenvezdevídeosseindicaránarchivosgráficos.

Además,amododefallback,dentrodelaetiquetaPICTUREseencontraráunaimagencorriente,conlaetiquetaIMG,queserárepresentadaportodonavegadorquetodavíanoimplementeeltagHTML5PICTURE.

ParaquecadanavegadorsepacuáleselarchivomásinteresantesegúnsuscondicionesalasetiquetasSOURCEselesdebeescribirunatributo"media",indicandounamediaqueryCSSquedeberíacumplirseparausaresearchivofuente.

Esmuysencillo.Loveremosmejoralavistadelsiguienteejemplo:

<picture>

<source media="(min-width: 900px)" srcset="grande.png">

<source media="(min-width: 550px)" srcset="media.png">

<img src="archivo-pequeno.jpg">




</picture>

Estecódigofuncionaráentodoslosnavegadores.LosqueesténfamiliarizadosconeltagPICTUREmostraránlaimagenadecuadaencadacaso.LosquenoesténfamiliarizadossimplementemostraránlaimagenquesehayaindicadoenIMG.

SOURCEelement

AhoraveamoselelementoSOURCE,usadoparaindicarcadaunadelasvariasimágenes.

Básicamentenospermiteindicarvariosarchivosgráficos.Elnavegadoriráleyéndolosunoauno,desdeelprimerohastaelúltimo,enordendecolocación,hastaqueencuentreunoqueseaposibleusar.Usaráelprimeroqueseaposible,descartandolosdemásquepuedahaberpordebajo.

Incluyelossiguientesatributos.

srcset:Contieneelarchivodeimagenquedebevisualizarse.Esuncamporequerido.

<source media="(max-width: 300px)" srcset="archivo-hasta-300px.jpg">

Peroademás,podríamosindicarvariasalternativasdeimágenes,separadasporcomas,paraindicarversionesdelamismaparadistintasdensidadesdepíxeles.Estoesmuyinteresanteparalosmóvilesmodernos,quetienenpantallasconviewportpequeñosperoquerealmentetienenmuchosmáspíxelesdelosqueaparentan.Tambiénparalosmonitores"retina"uotrasmarcasquetienendensidadesdepíxelesdistintas.Paramarcarladensidaddepíxelesindicamosalgocomo"2x"o"3x"dependiendosiduplicanotriplicanladensidadestándar.(Sinoseindicanadaseentiendequeesearchivoesparaladensidadnormaldepíxeles.

<source media="(min-width: 900px)" srcset="foto.jpg, foto-hd.jpg x2"

Enelcasoanteriorsedistribuirálaimagenfoto.jpgenpantallascondensidaddepíxelescomúnyfoto-hd.jpgparalasdensidadesdepíxelesmayores.

Media:Esteatributosoportacualquiermediaqueryquepodríasusarenunselectordeltipo@media.Sepuedeindicarsoloencasoquesenecesiteysinoseindicanada,afectaráatodoslostiposdepantallas.

Nota:ComosonmediaqueriesCSSpodríamosindicarmásconceptos,comoqueelmododedisposicióndelapantalla,portraitolandscape.Asímismo,podríamosusarcualquiertipodemedidaenlasreglasdeMediaquerires,ademásdelospíxeles(px).EnunartículoanteriorpodríamosaccederaexplicacionesdetalladasdeMediaqueries.

DadalaformaconlaqueseseleccionaelarchivoentrelosdistintosSOURCEsedebetenerencuentaquepodríahabervariasimágenesqueelnavegadorpodríarepresentar,perosoloseindicarálaprimeraqueseadaptealasreglasenlamediaquery.




Sabiendoesto,podríaserinteresantequitarelmediaquerydealgúnSOURCE,paraqueseuseesedemanerapredeterminada.EnesecasolológicoseríacolocarelSOURCEsinmediaqueryalfinaldeltodo.

<picture>

<source media="(min-width: 900px)" srcset="grande.png">

<source media="(min-width: 550px)" srcset="media.png">

<source srcset="peque.png">

<img src="predeterminado.png">

</picture>

Enelcódigoanteriorseusaríagrande.pngparapantallasde900píxelesenadelante.Seusaríamedia.pngenpantallasde550píxelesyhasta899píxelesdeanchura.Seusaríapeque.pngentodaslasdemáspantallas.Porúltimoseusaríapredeterminado.pngencualquiernavegadorquenoseacapazdeinterpretarelelementoPICTURE.

Sizes:Esteatributonosayudaráarealizarunaseleccióndelaimagenapropiadadeunamaneradistinta.Esunpocomássofisticadoyporellopuedeparecerunpocomáscomplejo,peroenlaprácticaestamosdelegandomásalnavegadorlaeleccióndelaimagenqueiráautilizar,porloquenodebecausarproblemas.

Hastaelmomentoalnavegadorleestamosindicandolasimágenesquedebeusarparacadarangodepíxeles.Ademássobrequéimágenesdebenaplicarseparadistintasdensidadesdepíxeles.Ahoraconelatriburo"sizes"podemosindicarlaanchuradelaimagenydejaralnavegadorqueescojalaimagenenfuncióndevariosarchivosproporcionados.Elnavegadorseráelresponsablede,atendiendoaltamañodelaventanayladensidaddepíxeles,escogerlamejoralternativa.

Esteatributosecombinaconelatributodeantes,"srcset"paraindicarlasdistintasalternativasdearchivosgráficos.

<picture>

<source media="(min-width: 600px)" sizes="65vw" srcset="peque.png 256w, media.png 456w, grande.png 856w, gigante.png 1280w">

<img src="media.png" sizes="65vw" srcset="peque.png 256w, media.png 456w, grande.png 856w, gigante.png 1280w">

</picture>

Nota:Comovesenelanteriorcódigo,losdosatributos"sizes"y"srcset"puedenaplicarsetambiénaunaimagen(etiquetaIMG)sinnecesidaddeincluiréstaenunelementoPICTURE.Sondosatributosnuevosdelasimágenesquepodemosusarparagenerarimágenesresponsive,oparasermásdetallistasalahoradeaplicarlosdiferentesarchivosgráficos.

Paraelcódigoanterior.Anchurasdepantallasuperioresa600pxaplicaloindicadoenlaetiquetaSOURCEyparapantallasmenoresseaplicaloindicadoenlaetiquetaIMG.Esunpocoredundante,perotambiénpodríaocurrirqueunnavegadornoconozcaPICTUREperosílosatributos"sizes"y"srcset".

Nota:Alprobarestecódigoparaimágenesresponsivelonormalesquehagamosgrandeypequeñala



ventanadelnavegador.Enlamayoríadecasosapreciaremosquelaimagenvacambiando,haciéndosegrandeamedidaqueaumentamoslaventana.Noobstante,debidoalsistemadecaché,ylainteligenciadelnavegador,puedequeenocasionesparezcaquenotemuestralaimagenquedebería.Estoesporque,sielnavegadorhadescargadoyalaimagendealtaresolución,aunquereduzcaslaventana,teseguirámostrandoesaimagengrandequesesuponequeeslademáscalidad(anoserqueindiquesotracosaconlasmediaquerydelatributo"media").

type:Esteatributopermiteindicareltipodeunaimagen,demodoqueelnavegadorpuedaseleccionarlosiesqueconoceeseformatodearchivo.

Compatibilidadconelelementopicture

Estenuevoelementoestádisponibleyaenlamayoríadelosnavegadores.SolofaltacompatibilidadconInternetExplorer,SafariparaiOSyOperaMini.Sinembargo,debidoalfallbackqueseindicaconlaetiquetaIMG,nohaymotivoparadejardeusarlo.

Esperfectamenteusableyamismoporquelosnavegadoresquelointerpretengozarándelaposibilidaddetenerimágenesadaptadasaresoluciones.Losqueaunnoloimplementensimplementeloignorarán,dejandotodalaresponsabilidadsobrelaimagenindicadaenlaetiquetaIMGdetodalavida.

Noobstante,siqueremosdarsoporteparaquealgúnnavegadorantiguotambiénpuedaimplementarimágenesresponsiveconelelementopicture,podemoscargarelcorrespondientepolyfill.Esteproyectollamado"Picturefill"contieneunscriptparaquemedianteJavascriptsepuedadarsoporteaPICTURE,asícomolosatribtos"srcset"y"sizes".

EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen12/04/2016Disponibleonlineenhttp://desarrolloweb.com/articulos/imagenes-responsive-etiqueta-picture.html

https://github.com/scottjehl/picturefill

http://desarrolloweb.com/articulos/imagenes-responsive-etiqueta-picture.html

Manual de Responsive Web Design - mardeasa.es

Documents

Transcript of Manual de Responsive Web Design - mardeasa.es