Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
UNIVERSIDADE DO PLANALTO CATARINENSE DEPARTAMENTO DE CINCIAS EXATAS E TECNOLGICAS CURSO DE SISTEMAS DE INFORMAO (BACHARELADO) FLVIO ROBERTO DEUCHER PADRES DE DESENVOLVIMENTO WEB APLICADOS AOS DISPOSITIVOS MVEIS LAGES (SC) 2011
FLVIO ROBERTO DEUCHER PADRES DE DESENVOLVIMENTO WEB APLICADOS AOS DISPOSITIVOS MVEIS Trabalho de Concluso de Curso submetido Universidade do Planalto Catarinense para obteno dos crditos de disciplina com nome equivalente no curso de Sistemas de Informao Bacharelado. Orientao: Prof(). Sabrina Bet Koerich, M.Sc. Prof. Claiton Camargo de Souza, Bel. LAGES (SC) 2011
FLVIO ROBERTO DEUCHER PADRES DE DESENVOLVIMENTO WEB APLICADOS AOS DISPOSITIVOS MVEIS ESTE RELATRIO, DO TRABALHO DE CONCLUSO DE CURSO, FOI JULGADO ADEQUADO PARA OBTENO DOS CRDITOS DA DISCIPLINA DE TRABALHO DE CONCLUSO DE CURSO, DO 8. SEMESTRE, OBRIGATRIA PARA OBTENO DO TTULO DE: BACHAREL EM INFORMAO SISTEMAS DE Lages (SC), 08 de dezembro de 2011 Prof. Sabrina Bet Koerich. M.Sc. Orientador Prof. Claiton Camargo de Souza. Bel. Co-Orientador BANCA EXAMINADORA: Prof. Willian Padilha. Bel UNIPLAC Prof. Rafael Gattino Furtado. Bel UNIPLAC Prof. Sabrina Bet Koerich. M.Sc. Professor de TCC Prof. Sabrina Bet Koerich. M.Sc. Coordenador de Curso
Se hoje fosse o ltimo dia de minha vida, queria fazer o que vou fazer hoje? E se a resposta fosse no muitos dias seguidos, sabia que precisava mudar algo. (Steve Jobs)
LISTA DE ILUSTRAES FIGURA 1 FIGURA 2 FIGURA 3 FIGURA 4 FIGURA 5 FIGURA 6 FIGURA 7 FIGURA 8 FIGURA 9 FIGURA 10 FIGURA 11 FIGURA 12 FIGURA 13 Conjunto de elementos ..........................................................................18 Estrutura do modelo tradicional ............................................................22 Estrutura da aplicao dos padres. ......................................................23 Diferentes tipos de utilizao do CSS. ..................................................30 Modelo Lgico de banco de dados. ......................................................45 Diagrama PHP.......................................................................................48 Servidor Apache ....................................................................................50 Tela de autenticao ..............................................................................51 Tela de agendamento ............................................................................53 Tela de relatrio ..................................................................................54 Tela de finalizao ..............................................................................55 Emulador Android ..............................................................................57 Resultado da validao .......................................................................58 Exemplo de cdigo transitional. .........................................................26 Exemplo de cdigo strict. ...................................................................26 Exemplo de cdigo frameset. ..............................................................26 Exemplo de cdigo. ............................................................................27 Exemplo de cdigo. ............................................................................27 Exemplo de cdigo. ............................................................................27 Exemplo de cdigo .............................................................................27 Exemplo de cdigo CSS inline ...........................................................28 Exemplo de cdigo CSS incorporado .................................................28 Exemplo de cdigo CSS externo. .....................................................29 Exemplo de cdigo CSS importado. .................................................29 Exemplo de cdigo CSS media types. ..............................................30 Manter informaes de usurios .......................................................41 Manter Informaes de tipo de recurso ............................................41 Manter informaes de recursos .......................................................41 Manter informaes de data da reserva ............................................42 Gerar relatrio ...................................................................................42 Suplementares ...................................................................................43 Lista de conceitos e operaes cadastrais .........................................43 Lista de casos de uso .........................................................................44 QUADRO 1 QUADRO 2 QUADRO 3 QUADRO 4 QUADRO 5 QUADRO 6 QUADRO 7 QUADRO 8 QUADRO 9 QUADRO 10 QUADRO 11 QUADRO 12 QUADRO 13 QUADRO 14 QUADRO 15 QUADRO 16 QUADRO 17 QUADRO 18 QUADRO 19 QUADRO 20 -
QUADRO 21 QUADRO 22 QUADRO 23 QUADRO 24 QUADRO 25 QUADRO 26 QUADRO 27 QUADRO 28 QUADRO 29 QUADRO 30 Lista de relatrios ..............................................................................44 Caso de uso registrar agendamento...................................................44 Tecnologias de desenvolvimento ......................................................47 Ferramentas e ambientes ...................................................................48 Cdigo SQL para criao das tabelas ...............................................50 Cdigo para autenticao ..................................................................52 Cdigo da tela de agendamento ........................................................53 Cdigo da tela de relatrio ................................................................54 Cdigo da tela de finalizao ............................................................55 Cdigo CSS das telas ........................................................................56
LISTA DE ABREVIATURAS E SIGLAS 3G ARPA CSS CERN DARPA DOM DTD DOCTYPE DTFM ECMA EDGE GIF GPRS GPS HTML HTTP MWI ODBC PHP PNG RDF SDK SQL WAI WI-FI W3C WYSWYG XHTML XML - Terceira Gerao - Advanced Research Projects Agency - Cascading Style Sheets European Organization for Nuclear Research - Defense Advanced Research Projects Agency - Document Object Model - Document Type Definition - Document Type Dual-Tone Multi-Frequency - European Computer Manufacturers Association Enhanced Data rates for GSM Evolution - Graphics Interchange Format - General Packet Radio Service - Sistema de Posicionamento Global - Linguagem de Marcao de Hipertexto - Hyper Text Transfer Protocol secure - Message Waiting Indicator - Open Data Base Connectivity - Pr- Processador Hipertexto - Portable Network Graphics Resource Description Framework - Software Development Kit - Structured Query language - Web Accessibility Initiative - Wireless Fidelity - Word Wide Web Consortium - What you see is what you get - Extensible Hypertext Markup Language Extensible Markup Language
RESUMO O trabalho aborda o estudo da correta aplicao dos padres de desenvolvimento Web voltado para dispositivos mveis, demonstrando as normas estabelecidas pelo rgo regulamentador, o W3C, suas aplicaes e tecnologias. Tendo como base para o estudo, o crescimento do uso de dispositivos mveis para acesso a contedo Web atravs de navegadores, como, smartphones e tablets. Crescimento esse, que traz de forma desordenada uma grande procura por sistemas Web, uma demanda que exige a cada dia novos servios, que na grande maioria das vezes no se enquadram nas normas de desenvolvimento. Normas essas que hoje j so empregadas em grande parte dos sites e sistemas Web convencionais para computadores e notebooks, mas que necessitam do mesmo empenho dos fabricantes e desenvolvedores para que isso tambm se torne realidade no uso em aplicaes mveis. Para desenvolver o estudo de caso utilizou-se como base o setor responsvel pelos recursos disponveis aos professores ou tcnicos administrativos de uma instituio de ensino como, laboratrios e equipamentos. Ao final tendo como resultado um exemplo de sistema Web dentro dos padres de desenvolvimento aplicados aos dispositivos mveis. Palavras-chave: Dispositivos mveis, padres de desenvolvimento Web, W3C, desenvolvedores Web.
ABSTRACT The work describes the study of correct implementation of Web standards development targeted for mobile devices, demonstrating the standards established by the regulator, the W3C, its applications and technologies. Based on the study, the growing the use of mobile devices to access Web content through browsers, such as smartphones and tablets. This growth brings of disorderly fashion a great demand for Web systems, a demand that requires each new day services, which in most cases do not fit the development standards. Which standards are already used today in most Web sites and conventional systems for computers and laptops, but they need the same commitment from manufacturers and developers to make this a reality also in use in mobile applications. To develop the case study used as based the sector responsible for the resources available to teachers or administrative staff of an educational institution such as laboratories and equipment. At the end resulting in a sample system within the Web development standards applied to mobile devices. Keywords: Mobile devices, Web development standards, W3C, Web developers.
SUMRIO 1 INTRODUO ........................................................................................................11 1.1 Apresentao ...........................................................................................................11 1.2 Descrio do problema ............................................................................................12 1.3 Justificativa ..............................................................................................................12 1.4 Objetivo geral ..........................................................................................................14 1.5 Objetivos especficos ...............................................................................................14 1.6 Metodologia .............................................................................................................14 2 PADRES DE DESENVOLVIMENTO WEB .....................................................16 2.1 Origem dos padres W3C .......................................................................................16 2.2 Padres Web ............................................................................................................18 2.2.1 Vantagens de utilizao dos padres .............................................................................. 19 2.2.2 Dificuldades na utilizao dos padres........................................................................... 20 2.2.3 Tableless .......................................................................................................................... 21 2.3 Desenvolvimento com padres Web .......................................................................22 2.3.1 Desenvolvimento .............................................................................................................. 23 2.3.2 HTML semntico ............................................................................................................. 24 2.3.3 XHTML ............................................................................................................................ 25 2.3.4 CSS .................................................................................................................................. 28 2.3.5 Comportamento ............................................................................................................... 31 2.4 XHTML para dispositivos mveis ..........................................................................31 2.4.1 Dispositivos e navegadores ............................................................................................. 32 2.4.2 Vertical e horizontal ........................................................................................................ 32 2.4.3 Tamanho da tela .............................................................................................................. 33 2.4.4 Cuidado com as CSS externas ......................................................................................... 34 2.4.5 Navegao simples e consistente. .................................................................................... 34 2.4.6 Usar cores e imagens simples ......................................................................................... 35 2.5 Mobilidade ...............................................................................................................35 2.5.1 Histria dos dispositivos mveis ..................................................................................... 37 2.5.2 Aplicaes da mobilidade................................................................................................ 38 2.6 Concluso ................................................................................................................38 3 MODELAGEM DO SISTEMA...............................................................................40 3.1 Sumrio executivo ...................................................................................................40 3.2 Levantamento de requisitos .....................................................................................41
3.4.1 Lista de conceitos e operaes cadastrais ...................................................................... 43 3.4.2 Lista de casos de uso ....................................................................................................... 43 3.4.3 Lista de relatrios............................................................................................................ 44 3.4.4 Expanso dos casos de uso.............................................................................................. 44 3.5 Modelo lgico do banco de dados ...........................................................................45 3.6 Concluso ................................................................................................................45 4 IMPLEMENTAO DO ESTUDO DE CASO ....................................................47 4.1 Ferramentas e tecnologias .......................................................................................47 4.1.1 PHP ................................................................................................................................. 48 4.1.2 MySQL ............................................................................................................................. 49 4.1.3 Apache ............................................................................................................................. 50 4.2 Banco de dados ........................................................................................................50 4.3 Definio do layout .................................................................................................51 4.3.1 Tela de autenticao........................................................................................................ 51 4.3.2 Tela de agendamento ....................................................................................................... 52 4.3.3 Tela de relatrio .............................................................................................................. 54 4.3.4 Tela Final ........................................................................................................................ 55 4.3.5 Cdigos de apresentao................................................................................................. 56 4.3.6 Teste layout em dispositivos mveis ................................................................................ 57 4.4 Concluso ................................................................................................................58 5 CONSIDERAES FINAIS ...................................................................................59 REFERNCIAS BIBLIOGRFICAS ......................................................................61 APNDICES ................................................................................................................63
11 1 INTRODUO 1.1 Apresentao Este trabalho de concluso de curso aborda uma faixa de desenvolvimento destinada a dispositivos mveis, uma rea que cresce a cada dia com o aumento das vendas de celulares e Smartphones, e tambm com o aumento de pontos de acesso Wifi e Redes 3G (Terceira Gerao). A nova tecnologia acabou entrando na briga com as operadoras de banda larga, sendo visto como um substituto s linhas fixas permitindo que seus usurios naveguem na Internet em qualquer lugar e qualquer hora (LEAL, 2010). Tudo isso acarreta uma demanda de aplicativos Web e sites compatveis para esses dispositivos, e que tragam os mesmos benefcios que j existem para computadores. No entanto, a maioria dos aplicativos Web no segue um padro para serem utilizados tanto em computadores como em dispositivos mveis, o que vem a ser a maior dificuldade dos desenvolvedores, no s nos aspectos de compatibilidade entre as diferenas de hardware e suas limitaes, mas tambm na diferena da qualidade da Internet disponvel para cada tipo de dispositivo. Tudo isso mostrando que muito se tem a estudar sobre os padres j disponveis para desenvolvimento de aplicaes para essas plataformas. Seguindo esse contexto, o trabalho est dividido em quatro captulos. Tendo no primeiro uma introduo ao tema do trabalho e o projeto a ser desenvolvido neste estudo. Aps a introduo, o captulo 2 apresenta um levantamento de pesquisa sobre os padres e as tecnologias disponveis para o desenvolvimento, assim como um estudo das novas tecnologias. No captulo 3 definido o estudo de caso, e apresentado
12 a modelagem do mesmo. Em seguida, no captulo 4 apresentado os resultados de implementao para dispositivos mveis. Na seqncia so apresentadas as consideraes finais do trabalho. 1.2 Descrio do problema As novas modalidades de acesso a Internet vem proporcionando cada vez mais a utilizao de aplicaes Web atravs de dispositivos mveis. Porm, ainda se observa a existncia de incompatibilidade para visualizao de websites para esse tipo de dispositivo. Esses problemas so proporcionados devido falta de prtica de aplicao dos padres, bem como a falta de conhecimento das ferramentas que viabilizam o desenvolvimento Web. 1.3 Justificativa Devido ao aumento de dispositivos mveis com tecnologia Wi-fi ou 3G para acesso a Internet, aparecem cada vez mais problemas relacionados aos padres para desenvolvimento de sites e aplicativos Web para esses dispositivos, sendo que a maioria dos aplicativos comuns no d suporte navegao mvel (W3C - BR, 2008). O crescimento se deve ao aumento da abrangncia das redes 3G que j alcanam 64,6% da populao brasileira, a implantao de acesso Wi-fi na maioria dos dispositivos mveis que existem hoje no mercado e a reduo dos preos facilitando o acesso a esse tipo de dispositivos (ARIMA, 2010). Com a queda dos preos, a multiplicao de aplicativos e a expanso das redes de dados, os smartphones deixaram de ser privilgio de executivos e geeks. Se antes os preos comeavam em R$1.500,00, agora h modelos bsicos que custam pouco mais de R$100,00 ou nada dependendo do plano escolhido (ARIMA, 2010). As maiores dificuldades para os desenvolvedores acompanharem esse crescimento, so relacionadas a utilizao de padres e ferramentas prprias para
13 desenvolvimento, pois ao decorrer do tempo, padres foram criados e aperfeioados, mas foram ficando para trs, devido a grande quantidade de novas tecnologias de aparelhos e navegadores mveis que surgiram no conseguindo manter o mnimo de usabilidade e interface grfica necessria para uma boa experincia de utilizao do usurio. Algum tempo atrs existiam poucos aparelhos com recursos tecnolgicos suficientes para uma padronizao de desenvolvimento, alguns poucos dispositivos agradaram e se tornaram base para desenvolvedores, que comearam a versionalizar seus aplicativos Web e sites apenas para esses dispositivos, privando os usurios de outros modelos de utilizarem os servios. J com o crescimento da variedade de dispositivos com timos recursos, o versionamento est tomando outros caminhos, criando mais um problema, cada fabricante usa diferentes tecnologias e necessitaria de uma verso exclusiva (PEREIRA, 2005). Uma possvel soluo para resolver esses problemas o estudo dos padres W3C (Word Wide Web Consortium), utilizando seus recursos para desenvolver aplicativos Web sem correr o risco de no funcionar na maioria dos dispositivos mveis. O W3C um rgo que regulamenta, cria e desenvolve linguagens para publicao de contedo na internet. H uma diferena muito grande entre padro e recomendao. O W3C no faz padres, ele recomenda mtodos e linguagens. Uma recomendao se torna padro porque h a aderncia da comunidade. Normalmente uma recomendao do W3C vira padro, porque o W3C est l para isso, eles trabalham para que seja assim (EIS, 2010). O W3C recomenda a utilizao de alguns mtodos e linguagens adotados pelo mercado que acabam virando padro, passando por testes e aprovao dos usurios e fabricantes de dispositivos, sendo assim garantia de que o desenvolvimento aplicando esses padres faa com que o projeto de um aplicativo Web funcione perfeitamente na maioria das marcas de dispositivos mveis.
14 1.4 Objetivo geral Viabilizar, atravs do estudo de padres, o desenvolvimento de um aplicativo Web para dispositivos mveis. 1.5 Objetivos especficos a) Apresentar os padres W3C de desenvolvimento para dispositivos mveis. b) Desenvolver um estudo de caso aplicando os padres W3C. 1.6 Metodologia A pesquisa em questo pode ser classificada como: aplicada quanto sua natureza e descritiva, quanto forma usada para atingir os objetivos. Iniciou-se com o levantamento bibliogrfico, em livros e materiais disponveis na internet, dos padres de desenvolvimento Web para dispositivos mveis, incluindo os padres W3C, que auxiliam na implementao de mtodos de desenvolvimento, segurana, usabilidade e acessibilidade. Com base nos padres identificados anteriormente, o prximo passo foi a identificao dos recursos tecnolgicos disponveis para o desenvolvimento de aplicativos Web para dispositivos mveis, como: Ambiente de desenvolvimento, PHP que ser a linguagem de programao; e Smartphones, que suportem navegadores compatveis com essas tecnologias. Na etapa posterior foi a definio do tema para o estudo de caso, que o qual um sistema para agendamento, atravs da Web mvel, de salas ou equipamentos disponveis pelas Universidades, administradas pelos seus respectivos setores. Nesta etapa, foi possvel realizar a modelagem do sistema. Para a modelagem foi utilizado o Processo Unificado, onde inicialmente foi realizado o levantamento de requisitos, para em seguida, elaborar os casos de usos e o modelo lgico do banco de dados do sistema transacional proposto.
15 Na etapa final foi realizada a implementao do estudo de caso, levando em considerao como requisitos tecnolgicos para dar suporte a uma aplicao Web: ser compatvel com sistema operacional e banco de dados livres, alm das linguagens HTML e CSS, na parte visual, e PHP e JavaScript, para a lgica de negcio. Ainda, a aplicao Web deve utilizar os conceitos de padres Web e orientao a objetos atravs da linguagem PHP.
16 2 PADRES DE DESENVOLVIMENTO WEB Neste captulo so apresentados alguns dados sobre o surgimento da Web e os fatores que levaram desenvolvedores a criar os padres, sua importncia e origem no meio de uma guerra entre navegadores. Descrevem-se algumas linguagens como HTML e CSS e as normas dos padres de desenvolvimento, suas principais vantagens e como isso facilitou o trabalho que estava se tornando invivel para desenvolvedores Web. Neste mesmo captulo so apresentados os dispositivos mveis com seu histrico, caractersticas tecnolgicas, modelos e como os padres Web auxiliam no desenvolvimento de aplicativos multiplataforma. 2.1 Origem dos padres W3C No incio dos anos 90 Tim Berners-Lee fez com que a Internet deixa-se de ser usada apenas por universidades e pelo exercito para troca de arquivos, mas tambm fosse utilizada como fonte de informao, desenvolvendo um ambiente onde os documentos pudessem estar disponveis o tempo todo utilizando a navegao por links, nascendo assim Web atravs de hipertexto e os navegadores (FRANCIS, 2010). Durante a guerra dos navegadores, Microsoft e Netscape estiveram focadas em implementar novas funes em vez de consertar os problemas com as funes j existentes, e adicionaram funes proprietrias e criaram funes que competiam diretamente com as existentes no outro navegador, mas implementadas de uma forma incompatvel. A esta altura, os desenvolvedores eram forados a trabalhar com o crescente
17 aumento do nvel de confuso enquanto tentavam criar Web sites, as vezes chegando ao ponto de construir dois sites diferentes para os navegadores principais, e outras vezes escolhendo suportar apenas um navegador, e bloqueando os outros de usarem seus sites. Esta era uma maneira complicada de se trabalhar, e o recuo dos desenvolvedores no foram muito longe. Em 1994, Tim Berners-Lee fundou o World Wide Web Consortium (W3C), no Instituto de Tecnologia de Massachusetts, com suporte do CERN, DARPA antiga ARPA e da Comisso Europia. A viso da W3C era a de padronizar os protocolos e tecnologias usados para criar a Web de modo que o contedo possa ser acessado largamente pela populao mundial tanto quanto o possvel (ANDRADE, 2005). Durante os anos seguintes, o W3C publicou vrias especificaes chamadas de recomendaes incluindo o HTML, o formato de imagens PNG, e as Folhas de Estilo em Cascata verses 1 e 2. Entretanto, a W3C no obriga ningum a seguir suas recomendaes. Os fabricantes precisam adotar os documentos da W3C apenas se eles quiserem etiquetar que seus produtos como complacentes com a W3C. Na prtica, isto no tem muito valor mercadologicamente j que a maioria dos usurios da Web no sabe, nem provavelmente se importam com quem a W3C. Em consequncia disto, a guerra dos navegadores continuou (AWAMURA, 2004). J com o lanamento de alguns navegadores importantes adequados a algumas recomendaes do W3C, os demais proprietrios de ambientes e de navegadores menos conhecidos seguiram a mesma linha e comearam a dar suporte a CSS e HTML, fazendo disso um marco positivo para os desenvolvedores, que podiam em fim desenvolver adotando os padres, sem se preocupar com a incompatibilidade entre navegadores. Desde ento os padres se tornaram obrigatrios na comunidade de desenvolvimento Web profissionais, mas mesmo assim ainda existem sites, na maioria das vezes desenvolvidos por iniciantes que no utilizam os padres.
18 2.2 Padres Web Os padres Web so um conjunto de normas, diretrizes, recomendaes, notas, artigos, tutoriais e afins de carter tcnico, desenvolvido pelo Word Wide Web Consortium (W3C), para auxiliar fabricantes e desenvolvedores para o uso de prticas que possibilitem uma Web com maior acessibilidade, independente de navegador ou dispositivo (REIS, 2007). Falando de normas para Web, em 1995 percebeu-se que o HTML incorporava muitos elementos de apresentao, fazendo com que a complexidade de desenvolvimento fosse ainda maior ento esses elementos foram separados e hoje se estudam trs componentes que formam esse conjunto: estrutura, apresentao e comportamento, como na figura 1. FIGURA 1 - Conjunto de elementos (Fonte: Zeldman, 2003) Utilizar padres para Web extremamente vantajoso, pois proporciona um maior controle sobre a pgina. Quando dito que uma pgina compatvel com os padres, significa que o documento consiste de HTML ou XHTML vlido, utiliza CSS para leiaute, bem-estruturado e semanticamente correto. Esses fatores podem garantir que o site seja acessado por qualquer dispositivo, seja ele mvel, ttil, desktop etc. (WIKE, 2005). Assim sites desenvolvidos seguindo os padres, custam menos, funcionam
19 melhor e so acessveis a diversos tipos de navegadores e dispositivos existentes no mercado hoje e amanh. 2.2.1 Vantagens de utilizao dos padres Desenvolver seguindo os padres significa utilizar a Web de forma mais acessvel por outros usurios e dispositivos, sendo identificadas como vantagem de seu uso (REIS, 2007): Uniformidade: aplicativos Web desenvolvidos dentro dos padres, podem usar uma mesma estrutura comum, facilitando remoes, movimentaes e inseres de contedo ou de estrutura que possam ser realizadas de uma maneira mais simples. Simplicidade: muito similar uniformidade, mas destinada a eliminar componentes desnecessrios para o funcionamento, principalmente no HTML facilitando a melhor visualizao do cdigo, mais limpo e leve, dando maior flexibilidade na utilizao dos mesmos diretamente no navegador ou na reutilizao para outros fins. Acessibilidade: um princpio chave ao se considerar a acessibilidade para a Web a flexibilidade, a fim de satisfazer as diversas preferncias, necessidades e situaes do usurio. Contudo utilizando os padres podem-se eliminar alguns problemas como: Variedade de resoluo de tela, verses e modelos de navegadores, tipo e modelo de dispositivos para acesso e velocidade da rede (que em aplicativos desenvolvidos no modelo tradicional podem causar problemas de visualizao e navegao). Separao entre estrutura e apresentao: a mais significativa na utilizao dos padres, onde sua utilizao correta pode separar completamente a estrutura do aplicativo de sua apresentao. Permite deixar um documento restrito apenas ao seu contedo, sem especificar qualquer forma de apresentao, assim o documento permanece o mesmo e pode ser apresentado de variadas formas em qualquer tipo de ambiente, como uma pgina de um Website que pode ser apresentado de uma forma no navegador
20 convencional e de uma forma totalmente diferente em um navegador de um dispositivo mvel. Viabilidade em longo prazo: aplicativos construdos dentro dos padres Web podem ser visualizados nos navegadores de hoje, e nos mais diferentes tipos de dispositivos ao longo dos anos, pois a medida que novas tecnologia de navegao so desenvolvidas os padres no perdem suas caractersticas, apenas agregam as novas, tornando os documentos interpretveis independente da poca. Usabilidade: usabilidade e acessibilidade so conceitos prximos, de maneira que, em muitos aspectos, o esforo em promover acessibilidade poder resultar em ganho de usabilidade, e vice-versa. Mas no de forma obrigatria, ou seja, possvel, por exemplo, encontrar pginas acessveis, mas que apresentam deficincias de usabilidade. No uso dos padres encontram-se aspectos de usabilidade principalmente para o desenvolvedor, na utilizao de ferramentas apropriadas e adaptadas as especificaes de desenvolvimento, na facilidade de reutilizao de documentos de apresentao e na facilidade de entendimento do cdigo da estrutura. A adoo dos padres pode ser tima para proporcionar usabilidade aos usurios, j que so corrigidos problemas como velocidade de carregamento e suporte a vrios ambientes. 2.2.2 Dificuldades na utilizao dos padres Mesmo com todas as facilidades enumeradas na utilizao dos padres de desenvolvimento Web, ainda existem algumas dificuldades, dentre as quais podem-se citar (REIS, 2007): Diferenas entre navegadores: apesar de todas as recomendaes da W3C para padronizar a codificao dos documentos Web, alguns navegadores ainda no conseguiram se adaptar as todas as normas por completo, tendo algumas diferenas de funcionamento de um navegador para outro, mesmo que a maioria delas seja imperceptvel ao usurio.
21 Ferramentas de desenvolvimento visuais: hoje muito popular, desenvolvedores usarem ferramentas visuais chamadas de WYSIWYG (What You See Is What You Get) que significa o que voc v o que voc tem, elas permitem a qualquer pessoa sem conhecimento de cdigo, que possam desenvolver documentos Web apenas visualizando em tempo real o resultado final. Mesmo com essas ferramentas de edio visuais cada vez mais adequadas aos padres, elas proporcionam comodidade aos desenvolvedores que passam a descuidar e confiar inteiramente no editor que nem sempre geram cdigos semanticamente corretos. Dificuldades de aprendizagem: com a grande maioria dos desenvolvedores acostumados ao modo tradicional de criao de layout em tabelas, a adequao aos padres se torna mais difcil, tento que aprender uma nova linguagem (CSS) e mudar totalmente o conceito de que o contedo passa a ser mais importante que a apresentao. 2.2.3 Tableless Em meados dos anos 90 os desenvolvedores no tinham adotado o CSS, por esse motivo todo o posicionamento dos componentes de um documento era feitos em marcao (HTML), e muitas vezes atravs de estrutura de tabelas (PEREIRA, 2005). J com o passar dos anos a maior parte dos navegadores j haviam adotado o CSS, e os desenvolvedores mostravam resistncia em abandonar o mtodo tradicional, assim surgiu o termo Tableless (sem tabelas), em oposio utilizao de tabelas, mesmo que somente o fato do documento Web ser desenvolvido com CSS no provar que esta de acordo com os padres. Web standards um termo mais completo que se refere a uma adequao total aos padres e no s a linguagem de marcao e CSS, conceito que envolve a utilizao total de todas as tecnologias para desenvolvimento Web que tragam todas as vantagens possveis, englobando um conjunto de praticas como: Linguagens de Marcao (XML, HTML XHTML), Linguagens de Apresentao (CSS), Semntica (RDF), Linguagens de comportamento (DOM), acessibilidade (WAI), protocolos
22 (HTTP), mbile (MWI), entre outras. Em suma, um site que segue os Web standards preza por vrios aspectos que o constitui e no somente a estrutura sobre usar ou para a estruturao das pginas, pois no utilizar tabelas e usar algo do tipo Ttulo no lugar de alguma tag de ttulo ( ou , por exemplo) to contrrio aos Web standards quanto utilizar tabelas. 2.3 Desenvolvimento com padres Web Em toda discusso sobre padres Web, o fator com maior relevncia a importncia da separao entre apresentao, estrutura e comportamento, tornando assim o cdigo limpo e correto. No modelo tradicional no h separao entre estrutura e apresentao como na figura 2, j no modelo dos padres existe essa separao como na figura 3. FIGURA 2 - Estrutura do modelo tradicional (Fonte: Adaptado de Reis, 2007.) A estrutura engloba as partes principais dos documentos como a semntica e os elementos. Utilizando uma linguagem de marcao como HTML ou XHTML introduzindo dados de textos formatados de acordo com a necessidade e o seu significado (texto, ttulo, pargrafo, lista) e objetos embutidos (arquivos, imagens, vdeos, animao, udio).
23 A apresentao onde so tratados os aspectos visuais de um documento, que no fazem parte da formao textual. Utilizando linguagens de apresentao como CSS1, CSS2 e CSS3 que formatam a pgina, controlam posicionamento de elementos, cor dentre outros aspectos. Em relao ao comportamento, um modelo de objeto padro (DOM) recomendado pelo W3C e trabalha com CSS, (X) HTML e ECMA Script e permite a criao de comportamentos e efeitos sofisticados que funcionem atravs de vrias plataformas e navegadores. O DOM pode ser entendido como uma organizao hierrquica dos elementos de um documento XML e um conjunto de mtodos para manipular estes elementos. FIGURA 3 - Estrutura da aplicao dos padres. (Fonte: Adaptado de Reis, 2007.) 2.3.1 Desenvolvimento Quanto mais popular a Web se tornava, maior era a necessidade de efeitos visuais que se tornassem atrativos aos usurios, como gifs animados com textos em movimento, animaes, sons e efeitos utilizando Java Script, o que tornava as pginas
24 ainda mais fora dos padres. Segundo Zeldaman (2003), 99,9% dos websites so obsoletos, pois, como foram desenvolvidos de acordo com este mtodo tradicional, podem ser exibidos e funcionar de forma correta em navegadores antigos (Netscape 4 e Internet Explorer 5, por exemplo), mas, fora desses ambientes tolerantes a falhas, certamente apresentam diversos erros de apresentao e comportamento. medida que os navegadores modernos evoluem, o desempenho destes websites continua a decair. Em navegadores menos comuns, como leitores de tela e palmtops, a maioria deles no funciona ou, na melhor das hipteses, funciona com vrias limitaes. O maior erro no desenvolvimento de um site a utilizao de tabelas que pode trazer desvantagens como (ZELDMAN, 2003): Excesso de elementos, acarretando na dificuldade de indexao pelos mecanismos de busca. Dificuldade de manuteno pela complexidade do cdigo. Falta de acessibilidade por usurios especiais. Apresentao e contedo aninhados, tornando o cdigo semanticamente errado e o arquivo com um tamanho desfavorvel. Desta forma o HTML deveria ser usado apenas para estruturar textos. J com o surgimento do W3C foram adotados novos padres, com um modelo totalmente diferenciado separando o contedo da apresentao e comportamento, visando proporcionar acessibilidade e universalidade como foi visto anteriormente nesse captulo. 2.3.2 HTML semntico Semntica refere-se ao estudo do significado em todos os sentidos. Ou seja, consiste no estudo da palavra e de seus significados, relacionando com os Padres Web, semntico seria o estudo das tags e seus significados (PEREIRA, 2005). Segundo Pereira (2005) escrever semanticamente utilizar uma tag no contexto certo para a qual ela foi criada. Veja alguns erros comuns e algumas tags que poderiam ser utilizadas, mas que muitas vezes so esquecidas:
25 A tag foi criada para exibir dados tabulares e no pra estruturar sites. Usar a tag para simular pargrafos, onde a tag poderia ser usada. Usar qualquer outra tag que no seja os headings (ttulos) como h1, h2, h3, etc., para declarar ttulos. Quando for uma citao em um texto colocar entre a tag . Tudo que for uma lista, como menus, itens, tpicos etc, utilizar as tags (lista sem ordem) ou (lista ordenada) juntamente com a tag (lista). Quando fizer um formulrio de insero de dados utilizar a tag (rtulo) para declarar o nome do campo. 2.3.3 XHTML XHTML 1.0 a reformulao do HTML 4 em XML 1.0, e foi desenvolvido para substituir o HTML (W3C, 2002). So citados pelo W3C alguns benefcios na utilizao do XHTML: Por estar em conformidade com XML, pode ser lido, visualizado e editado com ferramentas para XML; Pode ser escrito para operar melhor que aplicaes existentes em HTML 4; Foi concebido visando interoperabilidade com todo tipo de aplicaes de usurios e no apenas softwares navegadores padro; compatvel com navegadores para HTML 4 ou anteriores, caso sejam respeitadas as diretrizes de compatibilidade recomendadas pelo W3C; Buscando a interoperabilidade, o XHTML tem como foco principal a marcao apenas do contedo, contribuindo para a modularizao no desenvolvimento das pginas; A escrita do XHTML limpa por respeitar as regras do XML, no permitindo tags fora de ordem, por exemplo; O tempo de carregamento mais rpido, pois os navegadores no tm que decidir sobre renderizao de erros de cdigo. XHTM comeam com elementos que informam aos navegadores como
26 interpret-los e aos servios de validao com test-los. Um desses elementos a declarao DOCTYPE (acrnimo de Document Type e tambm conhecido como DTD Document Type Definition), que informa, em linguagem de mquina, a verso do XHTML usado. As declaraes DOCTYPE so peas chave de websites compatveis. A opo escolhida interfere na maneira como a maioria dos navegadores e servios de validao exibe o site. O XHTML oferece trs declaraes de DOCTYPE possveis (W3C, 2007a): Transitional: opo que est mais prxima do HTML. Utilizado por desenvolvedores que esto fazendo a transio para os padres Web modernos e/ou que precisam manter atributos e elementos de apresentao unidos estrutura como no quadro 1. QUADRO 1 - Exemplo de cdigo transitional. Fonte: W3C, 2011 12 Strict: DTD que exclui atributos de apresentao e elementos que o W3C pretende remover medida que o suporte CSS evolui, como no quadro 2. QUADRO 2 Exemplo de cdigo strict. 12 Fonte: W3C, 2011 Frameset: permite a utilizao de frames. No recomendado, uma vez que o uso de frames est em desuso, como no quadro 3. QUADRO 3 1 2 Exemplo de cdigo frameset. Fonte: W3C, 2011 Outras regras fundamentais presentes no XHTML so: A declarao DOCTYPE imediatamente seguida por uma declarao de namespace XHTML que destaca o elemento (indica a lngua e a
27 verso XML utilizadas no documento) como no quadro 4 : QUADRO 4 1 Exemplo de cdigo. Fonte: W3C, 2011 O tipo de contedo do documento deve ser declarado usando a tag META Content, como no quadro 5: QUADRO 5 Exemplo de cdigo. 12 Fonte: W3C, 2011 As meta-tags descrevem o contedo da pgina Web para os buscadores e a autoria da mesma, e devem ser includas dentro do elemento , aps a tag META Content, como no quadro 6. 1 23456 QUADRO 6 - Exemplo de cdigo. Todas as tags e atributos devem ser escritos em letras minsculas; Os elementos devem estar convenientemente aninhados como no quadro 7. 12 QUADRO 7 - Exemplo de cdigo Errado: Texto Correto: Texto O uso de tags de fechamento obrigatrio. Elementos vazios devem ser fechados, como a tag , por exemplo. Os valores de atributos devem sempre estar entre "aspas". Exemplo: Os documentos devem ser bem formados, isto , devem estar estruturados de acordo com as regras definidas nas Recomendaes para XML 1.0. Todos os elementos XHTML devem estar corretamente aninhados dentro
28 do elemento raiz . Codificar caracteres tais como menor () e & (E comercial) para <,> e &, respectivamente. Para uma marcao correta, sugerido validar esses documentos XTML. Um processo onde verificado o documento comparando-o com os modelos publicados pelo W3C. Depois de checado e aprovado ele considerado um documento vlido. O validador gratuito disponibilizado pelo W3C, est disponvel em http://validator.w3.org/, onde um rob analisa o cdigo e fornece um relatrio completo das no conformidades que possam existir no documento. 2.3.4 CSS As folhas de estilo CSS so definidas pelo W3C como um mecanismo simples para acrescentar estilo a documentos Web. Uma linguagem de leiaute padro que define cores, tipografia, tamanho e posicionamento, atualmente possuindo trs verses: CSS1, CSS2 e CSS3. Sendo que a verso utilizada nesse relatrio a verso CSS2. Uma boa semntica em XHTML necessria para um bom controle de leiaute em CSS. Segundo Meyer (2001), as folhas de estilo permitem a especificao do estilo dos elementos da pgina (espaamento, margens etc.) separadamente da estrutura do documento (cabealhos de seo, corpo de texto, links etc.) e podem ser includas ao documento XHTML de quatro formas: CSS Inline: declaraes aplicadas a um elemento individual atravs do atributo style, como no quadro 8. QUADRO 8 - Exemplo de cdigo CSS inline Colorir Fonte: W3C, 2011 1 CSS Incorporado: declaraes includas no contedo atravs do elemento style no cabealho () de um documento XHTML, como no quadro 9. QUADRO 9 Exemplo de cdigo CSS incorporado
29 1 2 3 4 5 6 7 8 9 10 Fonte: W3C - BR, 2011 CSS Externo: as declaraes so adicionadas em um arquivo externo com a extenso css e includos em vrios documentos atravs do elemento . As alteraes no arquivo CSS afetam a todos os documentos que referenciarem este arquivo como folha de estilo, como no quadro 10. 123 QUADRO 10 - Exemplo de cdigo CSS externo. CSS Importado: as declaraes tambm so chamadas a partir de um arquivo CSS externo, porm, no atravs do elemento link, mas sim da declarao @import, como no quadro 11. Esta importao no bem aceita por navegadores antigos. 12345 QUADRO 11 - Exemplo de cdigo CSS importado. Fonte: W3C - BR, 2011 Fonte: W3C BR, 2011
recomendado que a apresentao seja definida via arquivos externos, facilitando a manuteno das pginas e aumentando a velocidade da navegao utilizando o recurso de cache dos navegadores, no sendo preciso requisitar as informaes visuais toda vez que a uma atualizao de pgina. Atravs do CSS media types definido o tipo de mdia onde as regras de formatao sero aplicadas. Com isso possvel fazer estilos especficos para
30 navegadores (mdia screen), para dispositivos mveis (mdia handheld), para impresso (mdia print) para apresentaes (mdia projection), para sintetizadores de tela (mdia aural), para dispositivos tteis (mdia Braille), para TV digital (mdia TV), dentre outros (W3C, 2002), como exemplificado no quadro 12 e apresentado na figura 4. QUADRO 12 - Exemplo de cdigo CSS media types.