responsive ou adaptive design - just digital
DESCRIPTION
Palestra ministrada pelo Cláudio Nascimento, mais conhecido como Soldado aqui na Just Digital. Esta palestra aborda o tema de portabilidade dos sites para multiplataforma, diferentes devices, questionando os conceitos de Responsive Design e Adaptative Design, para o desenvolvimento de interface html + css + javascript.TRANSCRIPT
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
+55(11)5181-5170
www.justdigital.com.br
blog.justdigital.com.br