To Mobile Web

IniciandonoDesenvolvimentoMobileWeb
XIISemanadaComputaoUniderpAnhanguera/27/09/201001/10/2010
XIISemanada ComputaoUniderp Anhanguera

27/09/201001/10/2010
JeraSoftwaregilwww.jera.com.br CursoDesenvolvimentoMobileWeb,apostilacriadaporBrunoFernandesPorKariaPgina1de22
TermodeUso
Vocpode copiar,distribuir,exibireexecutaraobra
criarobrasderivadas Sobasseguintescondies Atribuio.Vocdevedarcrditoaoautororiginal,daformaespecificada peloautoroulicenciante.

Paracadanovousooudistribuio,vocdevedeixarclaroparaoutrosostermosdalicenadesta obra. Qualquerumadestascondiespodemserrenunciadas,desdequeVocobtenhapermissodo autor. Nadanestalicenaprejudicaourestringeosdireitosmoraisdoautor. Qualquerdireitodeusolegtimo(ou"fairuse")concedidoporlei,ouqualqueroutrodireito protegidopelalegislaolocal,nosoemhiptesealgumaafetadospelodispostoacima. EsteumsumrioparaleigosdaLicenaJurdica(nantegra). http://creativecommons.org/licenses/by/2.5/br/
Contedoprogramtico
OqueoDesenvolvimentoMobileWeb Preparandooambiente CriaodeSiteMobile AprocuradopadroSiteMobile Criandoumsiteinstitucionalsimples Criandooprojeto Escrevendoocdigo Testando Identificandoodispositivomveleseusrecursos IsMobile TeraWURFL IntegraocomGateWayparaenviodeSMS cURL CriaodeQRCode
OqueDesenvolvimentoMobileWeb
DesenvolvimentoMobileWebdesenvolverumaaplicaoquesejaviveloseuacesso viabrowserdeumdispositivomvel O Desenvolvimento Mobile Web criar aplicaes para dispositivos mveis que vo utilizarainternetcomobase.Ofatodeterawebcomobasejnoslevaaaplicaes aondepodemosutilizarobrowsercomoportadeentrada(clientside)eservidorespara processarasrequisiesdanossaaplicao(serverside).Issonosfazpensaroquede fato temos de diferente do tradicional Desenvolvimento Web, os conceitos para o desenvolvimento mobile web partem do desenvolvimento web, porm com algumas limitaes,novosproblemasecomissonovassolues. Paranotararealdiferenaprecisofalarsobreostrstpicosquecompeessenovo conceito:Usurios,MercadodeTrabalhoeFerramentasparaoDesenvolvimento.
Usurios
Aocontrriodosusuriosdesktopquesomultitarefas,quetemnoseucomportamento a caracterstica de acessar a sua aplicao e vrias outras ao mesmo tempo, por exemplo: Ouve msica, checa email, orkut, twitter, fica no msn e se deixar assiste televisojunto. JousuriomobilejsabecomofuncionaaWeb,eleaindanomultitarefas,elesabe ainformaoqueestbuscandoenoquerencontrarbarreirasparachegaratela.Esse usurioprocurasemprealgoespecificoetemmuitomenospacinciadequeumusurio desktop, pois pode desistir de acessar o seu site rapidamente. S que hoje ainda comumosusuriosaceitaremsitesnoteremumaversomobile,masacreditoqueisso vdurarpoucotempo,poisapartirdomomentoqueoconcorrentetiverumsitemobile,os clientescomearoaquestionar,porqueaquelesiteaindanotem? Ecomotempoosusuriosmobiletendemaevoluiroseucomportamentoparaalguns aspectosqueosusuriosdesktopjpraticam,comofazercomprasonline.Squepara isso acontecer vrios novos problemas de segurana e software precisam evoluir no mundomobile,masmesmoassimteremosadiferenaentreessesusurios.
MercadodeTrabalho
Semprequeumanovatendnciatecnolgicacomeaasepopularizar,ummercadode trabalhocomeaaseformarjuntoouatmesmoantes.fatoquehouveumagrande popularizaodousodedispositivosmveisnoBrasil,principalmenteocelular,agora estamosentrandonapopularizaodoacessoainternetbandalarga. ComtudoissooMobileBussinesvemcrescendomuitoevriosserviosvempipocando nomercadodetrabalho,ensdesenvolvedores,temosqueficaratentosaessasnovas oportunidades, entre os servios mais populares esto: Mobile Marketing, Mobile Advertising,Integradoras(EnviodeSMSeMMS),SitesMobile,MobilePayment,Servios baseadosnasualocalizao,Cdigo2D(QRcode)eetc. Essesnovosservioscriamumanovademandadeprofissionaisnomercado,quetenham oconhecimentodetodososrecursosqueessesdispositivosmveispodeoferecer. O ltimo tpico o que coloca o Desenvolvimento Mobile Web mais prximo do DesenvolvimentoWebparaosprogramadores,poisoecossistemadedesenvolvimentoe as ferramentas utilizadas no so to diferentes, na verdade voc acrescenta novas ferramentas. Vamosutilizarcomoexemplooecossistemadeumdesenvolvedorwebquetem:IDE, Controledeversodecdigoebanco,Bancodedados,Frameworkeetc Paraodesenvolvermobilewebnsiriamosacrescentarapenasumambientedeteste diferente,queenvolvevriosaparelhosdecelularouumamquinavirtualparasimularo ambiente. Apesar de trabalharmos com o browser, ainda temos diferenas entre os browsersdosdispositivos,umexemplosoosbrowsersdoBlackberryouentoointernet explorermobile,queinsistememnoseguirospadres. Masacreditoqueestamoscaminhandoparaumaevoluonaturaldosbrowsers,poisse formosolharparaoquetemosdepontanomundodoscelulares,IphoneeAndroidj utilizambrowsersdignos,comoSafarieChrome. E com o passar do tempo vo aparecendo frameworks para desenvolvimento mobile, comooWall4PHPebibliotecascomooTeraWURFL.Ouseja,osdesenvolvedoresvo criandosoluesvoltadasparaosnovosproblemasdomundomobile.
XIISemanadaComputaoUniderpAnhanguera/27/09/201001/10/2010 PortantooDesenvolvimentoMobileWebentramuitomaiscomoumconceitoasevender no mercado, um nome para procurar profissionais, que iro precisar no s ter o conhecimento no desenvolvimento web, mas saber como funciona o desenvolvimento mobile. Entoparaaquelesquejtemexperincianodesenvolvimentoweb,esseumpasso paraumanovaespecializao.
PreparandooAmbiente
Antesdepartirparaocdigo,vamosconfiguraronossoambientededesenvolvimento, instalandoeconfigurandoossoftwaresqueiremosutilizarduranteessecurso. Eporquenoterdeixadoissotudoprontoeinstaladonoscomputadoresdolaboratrio? Poisalgumasdasferramentasimportantevocaprenderoprocessodeinstalao, configuraoeatmesmoconhecermelhoroprojetoepodercontribuir. UserAgentSwitcher umaddonparaoFirefoxquealteraovalordoUserAgentdobrowser Download:https://addons.mozilla.org/enUS/firefox/addon/59/ ImportarlistardeUserAgents: http://techpatterns.com/downloads/firefox/useragentswitcher.xml OperaMobileEmulator ParavoctestaredebugarassuasaplicaesmobilewebnoOperaMobilenoseu MacouPC Download:http://www.opera.com/developer/tools/
XIISemanadaComputaoUniderpAnhanguera/27/09/201001/10/2010 AndroidVD VamosutilizaroVirtualDevicedoAndroidparatestes. Tutorialdecomobaixareinstalar: NoLinuxhttp://www.oandroid.com.br/comocomecarinstalandoadtnoeclipse linux/ NoWindowshttp://www.oandroid.com.br/comocomecarinstalandoadtnoeclipse windows/ EscrevendoumHelloWorldhttp://www.oandroid.com.br/helloworldnoandroidnao fujadopadrao/
CriaodeSiteMobile
AportaquemaisestabertanomundodoDesenvolvimentoMobileWebcomcerteza essa.Acriao/customizaodesitesparamobile.Enessaondadedemandasque comeamasurgirosproblemaseassolues.
AprocuradopadroSiteMobile
Comanaturalevoluoepopularizaodainternet,ossitesforammudandoecriando padresdelayoutaolongodosanos,estamosprximosdacriaodemaisumpadro,o padromobile,masantesdechegarnessadiscusso,vamosfazerumtourpelos padresjconsagradosnainternet. PadroPortal
XIISemanadaComputaoUniderpAnhanguera/27/09/201001/10/2010 Oconsagradotemplatedeportal,queremcolocartudodentrodele,todainformao possveltinhaqueentrarnosite,menusimensosemuitomaiscontedodoquevoc poderiaabsorverduranteanos.Masessaaintenodeportais,temanternositeo maiortempopossvel. PadroAberturae/ousitetodoemFLASH Foiapocaaondeascrianasaprenderamausarogizdeceraeacolaglitter.No queriaretrataressepadro,queriapoderapagareledahistria,masquerendoounoele foiimportante,foiomomentoaondeosdesignersforamvencidospelobomsenso.At entoelescomemoravamvitriacomoslayoutspulandoepiscando.Massepudessem verofuturo
Futuroaondeasimplicidadeeclarezaforamganhandomaisespao,ositeprecisavater umobjetivoclaro,oportalmuitogenrico,sitescomaberturasemflashjnosomais novidades,eningummaistinhapacincia,todosqueremacessorpidoefcilao contedo.SitesemflashatcausamoefeitoUAU!squetodossabemosquena primeiravezissolegal,nasegundanemtanto,naterceirajumsaco.

XIISemanadaComputaoUniderpAnhanguera/27/09/201001/10/2010 Efoiaquecomeouaeradosblogs,cadaumpoderiaescreversobreoassuntoquetem conhecimento,vocnoprecisamaisficargarimpandoemportaisparaencontrara pessoaquefalamsobredeterminadoassunto,hojevocvaidiretonoblogdela. PadroBlog
Oformatoblogtrouxeumobjetivoclaroediretoparaumsite.Vocpodeselecionarmais facilmenteainformaoquequerconsumireinteragirdiretocomescritor,algobem interessanteparaquemproduzcontedoparaainternet,agoracomesseformatoficou muitomaisfcilreceberumfeedbackdousurio.
XIISemanadaComputaoUniderpAnhanguera/27/09/201001/10/2010 PadroWeb2.0
Aquifoiagrandesacadadaweb,quetornouaredemundialdecomputadoresemuma redemundialdeusurios.Finalmenteaspessoasestoseconectandoecompartilhando conhecimento.EaWeb2.0isso,possibilitaraousuriototalinteraoeparticipaono seusite.Deixareleselecionarqualcontedoeleacharelevante,oqueelequerlere acessar. Juntocomessatendncia,antigospadresseadaptaramaessarealidade,comopor exemploosportais,bastavocacessarumportalcomooG1everoquantoelemudou daqueleantigopadrodeportal,ecomoeleestmuitomaisinterativoefuncional. PadroMobile? Aindaestamosevoluindoparaisso,masacreditoqueporumbomtempoteremosvrios padresmobile,peladiversidadededispositivosmveisquetemosnomercado.Isso levaaconstruodesitescomdiferenteslayouts,voucitarosdoisexemplosmais populares,quesoosSmartphoneseTouchscreens,slembrandoqueessadiferena notcnica,apenasparailustraradiferenaestticaentreessesdoiscelulares.
XIISemanadaComputaoUniderpAnhanguera/27/09/201001/10/2010 Smartphone
AprimeiracoisaqueousuriovisualizaaoacessarositedaEmpresaAweiummapa dasualocalizaoeseutelefone.Eapenasmaisduasopesparaconhecerumpouco daempresaeumformulriodecontato,poucainformao,pormobjetiva.Considere SmartphonescelularescomoNokiaE71,Blackberryeetc. Touchscreen
XIISemanadaComputaoUniderpAnhanguera/27/09/201001/10/2010 Commaisespaoodisplayecommaisrecursosnobrowser,podemosaprimorara experinciadousuriononossomobilesite,adicionandoopesparainteragircomo mapadelocalizaodaempresaporexemplo.fatoqueoIphoneparmetrodecelular touchscreenparaosoutros,entolevamoselecomobaseparaessepadro,pois tendnciaqueosdemaissigamgrandepartedatimausabilidadequeoIphonetrouxe. Estamosmuitolongedopadro? Ossitesmobileaindanotematrativossuficientesparaprenderaatenodousuriopor muitotempo,contacomalimitaodebrowsersecomissoossitespossuempouca interatividadeeaindaestamosbrigandocomosdesignerspelobomsensonolayout.S queassimcomotodosospadresquevimospassaramporumaevoluoouextino,o dossitesmobilesseromuitomaisrpidosparaevoluirousumirdomercado,porconta darpidaevoluodosaparelhos. Oimportanteparaquemtrabalhacomdesenvolvimentomobilewebacompanharmuito depertoaevoluodosaparelhoseamovimentaodomercado,issonodifcil,s assinarmeiadziadefeedsquevocficaatualizado,sigamasrefernciasdessepost, acreditoserumbomcomeo.
Criandoumsiteinstitucionalsimples
Vamosseguiropadromobilequefoiapresentadoacima,paraatendertanto smartphones,quantocelularestouchscreen.Adicionandoasinformaesbsicasdasua empresa. Antesdeentrarnocdigo,voucriarumwireframedatelaqueiriamosdesenvolver,que atelainicialdosite,queseressa:
Agoravamoscodar:)
Testandooseusite/aplicaomobile
AW3CtemumainiciativachamadadeMobileWebInitiative,quegerouaferramenta W3CmobileOKChecker,quetemcomoobjetivovalidareajudarosdesenvolvedoresde sitesmobile. Exemplo: http://m.jera.com.br
URL:http://validator.w3.org/mobile/
Identificandoodispositivomveleseusrecursos
Esseoproblemamaiscomumeprovavelmenteoprimeiroemquevocvaisedeparar nodesenvolvimentomobileweb.DetodasassoluesqueencontreiparaPHP,todasse baseiamnasinformaesobtidaspelavarivelprdefinaa$_SERVER,quenadamais queumarrayqueguardaasinformaesdoservidoredoambientedeexecuo. EntreosvaloresestaHTTP_USER_AGENTquearmazenaumastringcominformaes comoobrowsereosistemaoperacionaldousurioetemostambmaHTTP_ACCEPT quetemumalistadeMIMETypessuportadopeloUser_Agent. Vamosaumexemplo: Vamoscodar:) Acessandodeumcomputadornormal,nocasoomeu,vaiimprimir:
Useragent:Mozilla/5.0(X11;U;Linuxi686;enUS;rv:1.9.1.5)Gecko/20091102Firefox/3.5.5 HTTPAccept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Acessandodeumdispositivomvel,nocasoumNokiaE71,vaiimprimir:
Useragent:Mozilla/5.0(SymbianOS/9.2;U;Series60/3.1NokiaE713/200.21.118;Profile/MIDP 2.0Configuration/CLDC1.1)AppleWebKit/413(KHTML,likeGecko)Safari/413 HTTPAccept:text/html,text/css,multipart/mixed,application/javaarchive,application/java, application/xjavaarchive,text/vnd.sun.j2me.appdescriptor,application/vnd.oma.drm.message, application/vnd.oma.drm.content,application/vnd.oma.dd+xml,application/vnd.oma.drm.rights+xml ,application/vnd.oma.drm.rights+wbxml,application/xnokiawidget,*/*
Notaseadiferenaentreosvalores,debrowser,sistemaoperacionalemimetype
XIISemanadaComputaoUniderpAnhanguera/27/09/201001/10/2010 listadospelouseragent. Agoraspegaressasinformaes,compararedescobrirseumdispositivomvel. Mascompararcomoque?VamosaumexemploFaavocmesmoparaesclarecer essadvida. Vamoscodar:) Vocpodeficaralternandoovalordastring$user_agentparatestar,daprafrentecom voc,ouvocfazasuaprpriasoluooupodeutilizaralgumaprontaeadaptarparaa suanecessidade.
IsMobile
Detectaqualdispositivomvelestacessandoseusite.Recursos: Interfaceparavocimplementaroseucdigodelog Suporteparaidentificaodosprincipaisdispositivosmveisdomercado,como iPad,HTC(Android),Nokia,BlackBerryeetc Vamoscodar:) EssefoiumexemploutilizandoaclasseIsMobile,paraidentificarseousurioest acessandooseusitedeumiPadouumcelularNokia.Porserumaclasseficamaisfcile organizandodevocimplementaremumsite/sistemaquejestejafuncionando,tambm jvemumarraypopuladocomosprincipaisdispositivosmveisdomercado,uma interfaceparaimplementarlogeagoraseguindooCodingStandardsdaPEAR.
TeraWURFL
NesseexemplonsidentificaremosseocelularumiPhone,ealteramosoCSSdosite deacordocomotamanhododisplaydodispositivo. Vamoscodar:)
XIISemanadaComputaoUniderpAnhanguera/27/09/201001/10/2010 Oquetornaessaidentificaoavanada,apossibilidadesabertodoosrecursosqueo dispositivomveltem,comotamanhodatela,setemsuporteabluetooth,mp3,acessovia wifi,modelodobrowsereporavai.Semfalarqueeleimportatodososdadosdoarquivo xmlWURFLparaumabasededadosmySQL,facilitandomuitooacessoaosdadose rapideznoretornodasinformaes.
IntegraocomGateWayparaenviodeSMS
Otermointegraogatewayvemdeempresasqueprestamoserviodeintegradora entreasuaaplicaoeaoperadanoenviodedados(sms,mmseetc). AintegradoraaempresaqueresponsvelpelatarifaodoSMS,queverificajuntoa operadoraseoclientetemcrdito,gerenciaesupervisionaoenviodosms,reportando paraasuaaplicaoosucessoouqualquerfalhanoenviodosms.
cURL
OPHPsuportaalibcurl,umabibliotecacriadaporDanielStenberg,quepermitea vocconectarecomunicarcomvriostiposdiferentesdeservidorcomvriostipos diferentesdeprotocolos,libcurlatualmentesuportaosprotocoloshttp,https,ftp,gopher, telnet,dict,file,eldap.libcurltambmsuportacertificadosHTTPS,HTTPPOST,HTTP PUT,uploadcomFTP(istotambmpodeserfeitocomaextensodeftpdoPHP),upload baseadoemformulrioHTTP,proxies,cookies,eautenticaousurio+senha. fonte:http://br2.php.net/manual/pt_BR/intro.curl.php
Vamoscriaroexemplo! Vamoscodar:)
XIISemanadaComputaoUniderpAnhanguera/27/09/201001/10/2010 Crieiumapginaparareceberessarequisioeapenasretornaroquefoienviado,para podermostestaressarequisioesabersetodasasinformaesforamenviadas corretamente. Segueabaixooretornodarequisioquefizemosacima: nome=AlzirodaSilva celular=0099556677 mensagem=Acaboudechegarumacaixadewhisky InformaesdoCabealho SERVER_NAME=labs.porkaria.com.br REMOTE_ADDR=189.59.101.203 Podemosmanipularasinformaesdocabealhodanossarequisio,voumostrarum exemploaondevamosdefinirovalordoHTTP_USER_AGENT,sadicionaras seguintesopesnanossarequisio: Vamoscodar:) Emudaasinformaesdocabealhodanossarequisiopara: nome=AlzirodaSilva celular=0099556677 mensagem=Acaboudechegarumacaixadewhisky InformaesdoCabealho HTTP_USER_AGENT=Mozilla/5.0(X11;U;Linuxi686;enUS;rv:1.9.2.8) Gecko/20100723Ubuntu/9.10(karmic)Firefox/3.6.8 SERVER_NAME=labs.porkaria.com.br REMOTE_ADDR=189.59.101.203 AmanipulaodovalordoHTTP_USER_AGENTjnosdaopoderetornara mensagememumformatoespecificocasosejaumdispositivomvel.simplementar algumadassoluesdeidentificaodemobilenasregrasdenegciodapginaque recebeasrequisies.
GeraodeQRCode
FoicriadopelaempresajaponesaDensoWaveem1994.oQRCodeouCdigodeBarras 2Dumamatrizbidimensionalquetemgrandecapacidadedearmazenamento. Asuavantagemdiantedeoutroscdigosdebarrasjustamentenacapacidadede armazenamentoquepodechegaratNumricos(Max.7,089characters),Alfanumricos (Max.4,296characters),Binrios(8bitsMax.2,953bytes)eKanji/Kana(Max.1,817 characters). Almdissoocdigodebarraspodeserlidomesmocomimagensdebaixaresoluocom cmerasdecelularemformatoVGA,semcontarqueessatecnologiapossuiumaltonvel decorreodeerronaimagem,elerecuperaosdadosarmazenadoscasoaimagem estejadanificadaemat30%. Segundoaprpriaempresaquecriou,voclivreparausaroQrCode,apatenteno serpraticada. Aquiestoditocujo:
Comocriar?
Instalando
umpacotePEAR,entovocpodeinstalarrodandoocomandopearinstall Image_QRCode0.1.1,agorasevocboiousobreessainstalaovisiteapginanosite daPEARsobrecomoinstalarusandoopear.Euprefirofazerodownloaddopacotetodo mesmo,sentrarnapginadedownloaddoprojetoebaixaroarquivocompactado. Depoisdebaixarsdescompactareleevocvaiteraseguinteestrutura:
NodiretriodatatemososarquivosnecessriosparageraodoQRcode,assimcomo napastaimage.Emdoctemosumarquivocomexemplosprticosetemosatumapasta comtests,quebelezahein? MasoprincipalaclassequeestnoarquivoQRCode.phpelqueamgicaacontece, sugiroquevocediteoarquivodeumanavegaporeleparavocentendercomo funciona.
Colocandoparafuncionar
Vamoscodar:)
PHPQRCodeGenerator
OservionosgeraoQRCode,comoocdigoquefoiusadoparasuagerao. URL:http://labs.porkaria.com.br/phpqrcode/

To Mobile Web

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

To Mobile Web

Uploaded by

Copyright:

Available Formats

IniciandonoDesenvolvimentoMobileWeb

XIISemanada ComputaoUniderp Anhanguera

criarobrasderivadas Sobasseguintescondies Atribuio.Vocdevedarcrditoaoautororiginal,daformaespecificada peloautoroulicenciante.

Oformatoblogtrouxeumobjetivoclaroediretoparaumsite.Vocpodeselecionarmais facilmenteainformaoquequerconsumireinteragirdiretocomescritor,algobem interessanteparaquemproduzcontedoparaainternet,agoracomesseformatoficou muitomaisfcilreceberumfeedbackdousurio.

AprimeiracoisaqueousuriovisualizaaoacessarositedaEmpresaAweiummapa dasualocalizaoeseutelefone.Eapenasmaisduasopesparaconhecerumpouco daempresaeumformulriodecontato,poucainformao,pormobjetiva.Considere SmartphonescelularescomoNokiaE71,Blackberryeetc. Touchscreen

NodiretriodatatemososarquivosnecessriosparageraodoQRcode,assimcomo napastaimage.Emdoctemosumarquivocomexemplosprticosetemosatumapasta comtests,quebelezahein? MasoprincipalaclassequeestnoarquivoQRCode.phpelqueamgicaacontece, sugiroquevocediteoarquivodeumanavegaporeleparavocentendercomo funciona.

You might also like