RESPONSIVEOU

ADAPTIVE?Qualamelhorpratica?

RESPONSIVEDESIGN

OResponsiveDesignéprovenientedasmelhorespráticasdodesenvolvimentoweb.Permitequeoslayoutsdossitesse

ajustemautomaticamenteaosdispositivos,sejamelesDesktops,SmartphonesouTablets.

ADAPTIVEDESIGNNoAdaptiveDesign,temosalgomeioque

engessado.Osblocosterãomedidasfixaseumtipodefolhadeestiloparacadatipoderesolução.Tornando

assimalgobemmaistrabalhoso

MASQUALOMELHORASEUSAR?

OU

AWEBDEVESERACESSÍVELPORQUALQUERPESSOAEEMQUALQUERLUGAR.

EntãoomelhorparaissoemenostrabalhososeriaResponsiveDesign.

MASPORQUÊ?

PORQUENÃOADAPTIVE?

Noadaptivetoparemoscomcircunstânciasqueserãomuitomaistrabalhosasenemsempre

seráagradávelpoiscadavezquesurgirumanovaresoluçãovocêteráqueadaptarnovamenteseuestilo

paraassimtornaroseusitemaisamigávelpossívelparaaquelaresolução.

COMOFAZERDEFATOUMSITERESPONSIVO

GridflexívelImagensemídiasflexíveisMediaqueries

GRIDFLEXÍVELGridéumconjuntodelinhasbasesquefornecemumaestruturaparaseulayout.

EXEMPLODEGRIDFLEXÍVEL

FORMULAPARAGRIDFLEXÍVELEisaformulamágica:

Objeto÷Contexto=RESULTADO

RESULTADOPARAUMGRIDFLEXÍVELEisafórmulamágica:

Objeto÷Contexto=RESULTADO

↓300px÷960px=0.3125

Coloqueopontoduascasasparaadireitaeacrescentea%ficandoassim31.25%.

FONTESFLEXÍVEISOsvaloresdetamnhodasfontesdevemsersubstituídosdePXparaEM

Ovalorpadrãodasfontesconsideradaspelobrowseré16px,exemplo:

.contenth1{font-size:30px;color:#333;margin:2%;}

CRIANDOFONTESFLEXÍVEISAformulaéamesma:

Objeto÷Contexto=RESULTADO↓

30px÷16px=1.875

Nocasodasfontesnãoénecessárioposicionaropontoparaadireitaeoresultadoé1.875em.

IMAGENSFLEXÍVEISAsimagenstambémnecessitamseadaptarconformeo

tamanhodatela,poispodemsairforadolayout:

img{max-width:100%;}

Omesmoserveparaoutroselementosdohtml:

img,embed,object,iframe,video{max-width:100%;}

MEDIAQUERIESAsMediaTypesdefinemparaqualtipodemediaoCSSserádirecionado.

OHTMLfoicriadoparaserportável,ouseja,eledeveserlidoeinterpretado

porqualquertipodedispositivo.CadadispositivoexibeoHTMLdeumamaneira.

AformaqueesteHTMLéformatadoemcadadispositivoédiferente.Logo,

ocódigoCSSserádiferenteparacadaumdestesdispositivos.

LISTADEMEDIASAll-Paratodososdispositivos.

Braille-Paradispositivostáteis.

Embossed-Paradispositivosque“imprimem”embraille.

Handheld-Paradispositivosdemão.Normalmentecomtelaspequenasebandalimitada.

Print-Paraimpressãoempapel.

Projection-Paraapresentações,comoPowerPoint.

Screen-Paramonitoresououtrosdispositivoscomtelascoloridasecomresoluçãoadequada.

Speech-Parasintetizadoresdevoz.OCSS2temumaespecificaçãodeCSSchamadaAural,

ondepodemos“formatar”avozdossintetizadores.

Tty-Paradispositivosqueutilizamumagradefixaparaexibiçãodecaracteres,comoporexemplo,

teletypes,terminais,dispositivosportáteiscomdisplaylimitado

Tv-Paradispositivoscomotelevisores,ouseja,combaixaresolução,quantidadedecoresescrolllimitado.

ASOLUÇÃO–MEDIAQUERIESAsMediaQueriesdefinemcondiçõesparaautilizaçãodeumCSSespecífico.Seessas

condiçõesforemaprovadas,ouseja,seodispositivodeadequaratodasascondições,oCSS

seráaplicado.

<linkrel="stylesheet"href="estilo.css"media="screenand(color)"/>

Nestecódigo,porexemplo,oCSSseráaplicadoemdispositivosdemediascreen,quetenhamumacaracterísticacolor.

Logo,esteCSSnãoseráaplicadoemaparelhosMonocromáticos.

OPERADORESLÓGICOSOsOperadoresLógicostepossibilitarãocriarmediaqueriesdiversas.Osoperadores

são:not,andeonly.

Onotiráfazerumasentençadenegação.Porexemplo:

<linkrel="stylesheet"href="estilo.css"media="alland(notcolor)"/>

Oonlyiráesconderosestilosdebrowsersquenãoreconhecemmediaqueries.Antesda

sentença,vocêcolocaoonly:

<linkrel="stylesheet"href="estilo.css"media="onlyscreenand(color)"/>

OPERADORESLÓGICOSÉpossíveltambémagruparváriasmediaqueries

separando-oscom,(vírgula).Sequalquerumadasqueriesforemverdadeiras,oCSSseráaplicado.Entãoavírgulafuncionacomoumoperadoror.

<linkrel="stylesheet"href="estilo.css"media="screenand(color),

projectionand(color)"/>

MEDIAFEATURESParaentãodistinguirumdispositivodooutro,vocêutilizaráascaracterísticasdecadaum.

<linkrel="stylesheet"href="estilo.css"media="screenand(max-width:480px)"/>

Háumalistadecaracterísticasquevocêpodeutilizaraquiparaselecionarosdispositivosquevocêquiser:

colorcolor-indexmonochromeresolutionscangrid

widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratio

MEDIANOCSS/*Smartphones(portraitandlandscape)-----------*/

@mediaonlyscreenand(min-device-width:320px)and(max-device-width:480px)

/*Smartphones(landscape)-----------*/

@mediaonlyscreenand(min-width:321px){}

/*Smartphones(portrait)-----------*/

@mediaonlyscreenand(max-width:320px){}

/*iPads(portraitandlandscape)-----------*/

@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px){}

/*iPads(landscape)-----------*/

@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:landscape){}

/*iPads(portrait)-----------*/

@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:portrait){}

TAGMETAVIEWPORTOssmartphonestemtelaspequenaspodemdificultaraleiturase

fizermosumsistemaplanejadoparagrandesresoluções.Porissoé

interessantequepossamoscustomizaroviewportparaqueelese

adequearealidadedessesdispositivos.Éaíqueentraametatag

viewport.

Comessametatagiremoscustomizararesoluçãoinicialqueo

browserdeverenderizardoviewportdodispositivo.Dessaforma,

podemosprepararwebsitescomresoluçõespersonalizadaspara

smartphoneseoutrosaparelhos.

VALORESDATAGMETAVIEWPORT

<metaname="viewport"content="">

Osvaloresdecontentsãoosqueseguemabaixo:

Asintaxeémuitosimplesedevesercolocada,comosempre,nataghead:

Valor Descrição

width Defineumalarguraparaoviewport.OsvalorespodemseremPXou“device-width”,quedeterminaautomaticamenteumvalorigualalarguradateladodispositivo.

height Defineumaalturaparaoviewport.OsvalorespodemseremPXou“device-height”,quedeterminaautomaticamenteumvalorigualaalturadateladodispositivo.

initial-scale

Defineaescalainicialdoviewport.

user-scalable

Defineapossibilidadedeousuáriofazer“zoom”emumdeterminadolugardatela.Éativadoquandoousuáriobateduasvezescomodedoemumlugardatela.

REMOTEDEBUGGINGONANDROIDOdesenvolvimentodepáginawebmobileédifícildetestarporenvolveroutrosaparelhos.

Masosbrowsersmaisnovosjápossuemrecursodedebugremoto.AlémdoiOS,oChrome

Mobiletambémtrazesserecurso.

EmboraaindanãohajasuportenativoparadebugdobrowserpadrãodoAndroid,osuporteno

Chromeémuitobom.EleapenasparaAndroid4ejáfoianunciadocomofuturosubstitutodo

browserpadrãodoAndroid.

PRÉ-REQUISITOSInstaleoChromeMobilenoseuAndroid4.

BaixeoAndroidSDKprasuamáquina.

InstaleoGoogleChromenoseuDesktop.

TenhaumcaboUSBàmãopraconectarodispositivonocomputador.

CONFIGURAÇÃODOSDEVICES

AbraoChromeMobilenocelulareváemsuasConfigurações.

EntrenomenuFerramentasparadesenvolvedoreslánofinal.

Lá,habiliteaopçãoAtivaradepuraçãodawebviaUSB

VánasConfiguraçõesdesistemadoAndroideentreemOpçõesdoDesenvolvedor.

Lá,habiliteaopçãoDepuraçãoUSB:

DEBUGDODEVICEVIADESKTOP

Porfim,bastairnoseuChromeDesktopeabriroendereçohttp://localhost:9222.

Todasasabasabertasnocelularserãolistadas.Selecioneumaparadebugar:

PlugueocelularnocomputadorusandoocaboUSB.

Noterminal,entrenapastaquevocêinstalouoAndroidSDKeemplatform-tools.

(opcional)RodeoADBpralistarosdispositivoseverseseucelularfoireconhecido:./adbdevices

Senãoforreconhecido,verifiqueseadepuraçãoUSBestáhabilitadaetenteplugá-lonovamente.

AindausandooADB,rodeocomandoquehabilitaodebugremotonoChrome:

./adbforwardtcp:9222localabstract:chrome_devtools_remote

WEBINSPECTOROWebInspectorseráabertonoseuChromenoDesktopmaslinkado

comoChromenocelular.Vocêpodedebugarnormalmenteefazer

alteraçõesevê-lasemtemporealnoaparelho:

PORFIMCriarumsiteresponsivonãoéfácil.Trabalharcomflexibilidadeeadaptaçãoébemmais

complicadoqueumsitefixoempixels.Asferramentasdedesenhoaindanãoestão

preparadaseosdesignergráficoscostumamterdificuldadesparacriarcomresponsividade

emmente.

Ocódigoficamaiscomplexotambém.Hádificuldadesparasetrabalharcomimagensevídeos

responsivos.ÉbastantecomplicadoadaptarumsiteDesktopjáexistenteparaserresponsivo.

Apesardetudoisso,designsresposivossãoofuturo.PelosimplesmotivodequeaWebé

únicaecriarsitesseparadosparacadacategoriadedispositivoséimpossível.

DÚVIDAS?

OBRIGADO!CláudiodoNascimentoSilva(Soldado)

Developer

code@justdigital.com.br

+55(11)5181-5170

www.justdigital.com.br

blog.justdigital.com.br