Modelo Relatório Final - Word - Versão 1.0

UNIVERSIDADE DO PLANALTO CATARINENSE
DEPARTAMENTO DE CIÊNCIAS EXATAS E TECNOLÓGICAS
CURSO DE SISTEMAS DE INFORMAÇÃO
(BACHARELADO)
FLÁVIO ROBERTO DEUCHER
PADRÕES DE DESENVOLVIMENTO WEB APLICADOS AOS
DISPOSITIVOS MÓVEIS
LAGES (SC)
2011
FLÁVIO ROBERTO DEUCHER
PADRÕES DE DESENVOLVIMENTO WEB APLICADOS AOS
DISPOSITIVOS MÓVEIS
Trabalho de Conclusão de Curso
submetido à Universidade do Planalto
Catarinense para obtenção dos créditos
de disciplina com nome equivalente no
curso de Sistemas de Informação Bacharelado.
Orientação: Prof(ª). Sabrina Bet Koerich,
M.Sc.
Prof. Claiton Camargo de
Souza, Bel.
LAGES (SC)
2011
FLÁVIO ROBERTO DEUCHER
PADRÕES DE DESENVOLVIMENTO WEB APLICADOS AOS
DISPOSITIVOS MÓVEIS
ESTE RELATÓRIO, DO TRABALHO
DE CONCLUSÃO DE CURSO, FOI
JULGADO
ADEQUADO
PARA
OBTENÇÃO DOS CRÉDITOS DA
DISCIPLINA DE TRABALHO DE
CONCLUSÃO DE CURSO, DO 8º.
SEMESTRE, OBRIGATÓRIA PARA
OBTENÇÃO DO TÍTULO DE:
BACHAREL EM
INFORMAÇÃO
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 não muitos dias
seguidos, sabia que precisava mudar algo.
(Steve Jobs)
LISTA DE ILUSTRAÇÕES
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 FIGURA 14 FIGURA 15 FIGURA 16 -
Conjunto de elementos ..........................................................................18
Estrutura do modelo tradicional ............................................................22
Estrutura da aplicação dos padrões. ......................................................23
Diferentes tipos de utilização do CSS. ..................................................30
Modelo Lógico de banco de dados. ......................................................45
Diagrama PHP.......................................................................................48
Servidor Apache ....................................................................................50
Tela de autenticação ..............................................................................52
Tela de agendamento ............................................................................54
Tela de relatório ..................................................................................55
Tela de finalização ..............................................................................56
Emulador Android ...............................................................................59
Smartphone, tela de autenticação. .......................................................59
Smartphone, seleção de horário. .........................................................60
Smartphone, agendamento. .................................................................60
Resultado da validação .......................................................................61
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 -
Exemplo de código transitional. .........................................................26
Exemplo de código strict. ...................................................................26
Exemplo de código frameset. ..............................................................26
Exemplo de código. ............................................................................27
Exemplo de código. ............................................................................27
Exemplo de código. ............................................................................27
Exemplo de código .............................................................................27
Exemplo de código CSS inline ...........................................................28
Exemplo de código CSS incorporado .................................................29
Exemplo de código CSS externo. .....................................................29
Exemplo de código CSS importado. .................................................29
Exemplo de código CSS media types. ..............................................30
Manter informações de usuários .......................................................41
Manter Informações de tipo de recurso ............................................41
Manter informações de recursos .......................................................41
Manter informações de data da reserva ............................................42
Gerar relatório ...................................................................................42
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 -
Suplementares ...................................................................................43
Lista de conceitos e operações cadastrais .........................................43
Lista de casos de uso .........................................................................44
Lista de relatórios ..............................................................................44
Caso de uso registrar agendamento...................................................44
Tecnologias de desenvolvimento ......................................................47
Ferramentas e ambientes ...................................................................48
Código SQL para criação das tabelas ...............................................51
Código para autenticação ..................................................................53
Código da tela de agendamento ........................................................54
Código da tela de relatório ................................................................56
Código da tela de finalização ............................................................57
Código CSS das telas ........................................................................57
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 Geração
- 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 Marcação 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 aplicação dos padrões de desenvolvimento Web
voltado para dispositivos móveis, demonstrando as normas estabelecidas pelo órgão
regulamentador, o W3C, suas aplicações e tecnologias. Tendo como base para o
estudo, o crescimento do uso de dispositivos móveis para acesso a conteúdo Web
através 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 serviços, que na grande maioria das vezes não se enquadram nas
normas de desenvolvimento. Normas essas que hoje já são 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
também se torne realidade no uso em aplicações móveis. Para desenvolver o estudo de
caso utilizou-se como base o setor responsável pelos recursos disponíveis aos
professores ou técnicos administrativos de uma instituição de ensino como,
laboratórios e equipamentos. Ao final tendo como resultado um exemplo de sistema
Web dentro dos padrões de desenvolvimento aplicados aos dispositivos móveis.
Palavras-chave: Dispositivos móveis, padrões 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.
SUMÁRIO
1 INTRODUÇÃO ........................................................................................................11
1.1 Apresentação ...........................................................................................................11
1.2 Descrição do problema ............................................................................................ 12
1.3 Justificativa ..............................................................................................................12
1.4 Objetivo geral ..........................................................................................................14
1.5 Objetivos específicos ............................................................................................... 14
1.6 Metodologia .............................................................................................................14
2 PADRÕES DE DESENVOLVIMENTO WEB .....................................................16
2.1 Origem dos padrões W3C .......................................................................................16
2.2 Padrões Web ............................................................................................................18
2.2.1 Vantagens de utilização dos padrões .............................................................................. 19
2.2.2 Dificuldades na utilização dos padrões........................................................................... 20
2.2.3 Tableless .......................................................................................................................... 21
2.3 Desenvolvimento com padrões Web .......................................................................22
2.3.1 Desenvolvimento .............................................................................................................. 23
2.3.2 HTML semântico ............................................................................................................. 24
2.3.3 XHTML ............................................................................................................................ 25
2.3.4 CSS .................................................................................................................................. 28
2.3.5 Comportamento ............................................................................................................... 31
2.4 XHTML para dispositivos móveis ..........................................................................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 Navegação simples e consistente. .................................................................................... 34
2.4.6 Usar cores e imagens simples ......................................................................................... 35
2.5 Mobilidade ...............................................................................................................36
2.5.1 História dos dispositivos móveis ..................................................................................... 37
2.5.2 Aplicações da mobilidade................................................................................................ 38
2.6 Conclusão ................................................................................................................39
3 MODELAGEM DO SISTEMA...............................................................................40
3.1 Sumário executivo ...................................................................................................40
3.2 Levantamento de requisitos .....................................................................................41
3.3 Requisitos suplementares ........................................................................................43
3.4 Organização dos requisitos ......................................................................................43
3.4.1 Lista de conceitos e operações cadastrais ...................................................................... 43
3.4.2 Lista de casos de uso ....................................................................................................... 43
3.4.3 Lista de relatórios............................................................................................................ 44
3.4.4 Expansão dos casos de uso.............................................................................................. 44
3.5 Modelo lógico do banco de dados ...........................................................................45
3.6 Conclusão ................................................................................................................45
4 IMPLEMENTAÇÃO 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.1.4 Fireworks ......................................................................................................................... 50
4.1.5 Dreamweaver .................................................................................................................. 51
4.2 Banco de dados ........................................................................................................51
4.3 Definição do layout .................................................................................................52
4.3.1 Tela de autenticação........................................................................................................ 52
4.3.2 Tela de agendamento ....................................................................................................... 53
4.3.3 Tela de relatório .............................................................................................................. 55
4.3.4 Tela Final ........................................................................................................................ 56
4.3.5 Códigos de apresentação................................................................................................. 57
4.3.6 Teste layout em dispositivos móveis ................................................................................ 58
4.4 Conclusão ................................................................................................................61
5 CONSIDERAÇÕES FINAIS ...................................................................................62
REFERÊNCIAS BIBLIOGRÁFICAS ......................................................................64
APÊNDICES ................................................................................................................66
11
1 INTRODUÇÃO
1.1 Apresentação
Este trabalho de conclusão de curso aborda uma faixa de desenvolvimento
destinada a dispositivos móveis, uma área que cresce a cada dia com o aumento das
vendas de celulares e Smartphones, e também com o aumento de pontos de acesso Wifi e Redes 3G (Terceira Geração). A nova tecnologia acabou entrando na briga com as
operadoras de banda larga, sendo visto como um substituto às linhas fixas permitindo
que seus usuários naveguem na Internet em qualquer lugar e qualquer hora (LEAL,
2010). Tudo isso acarreta uma demanda de aplicativos Web e sites compatíveis para
esses dispositivos, e que tragam os mesmos benefícios que já existem para
computadores.
No entanto, a maioria dos aplicativos Web não segue um padrão para serem
utilizados tanto em computadores como em dispositivos móveis, o que vem a ser a
maior dificuldade dos desenvolvedores, não só nos aspectos de compatibilidade entre
as diferenças de hardware e suas limitações, mas também na diferença da qualidade da
Internet disponível para cada tipo de dispositivo. Tudo isso mostrando que muito se
tem a estudar sobre os padrões já disponíveis para desenvolvimento de aplicações para
essas plataformas.
Seguindo esse contexto, o trabalho está dividido em quatro capítulos. Tendo
no primeiro uma introdução ao tema do trabalho e o projeto a ser desenvolvido neste
estudo. Após a introdução, o capítulo 2 apresenta um levantamento de pesquisa sobre
os padrões e as tecnologias disponíveis para o desenvolvimento, assim como um
estudo das novas tecnologias. No capítulo 3 é definido o estudo de caso, e apresentado
12
a modelagem do mesmo. Em seguida, no capítulo 4 é apresentado os resultados de
implementação para dispositivos móveis. Na seqüência são apresentadas as
considerações finais do trabalho.
1.2 Descrição do problema
As novas modalidades de acesso a Internet vem proporcionando cada vez
mais a utilização de aplicações Web através de dispositivos móveis. Porém, ainda se
observa a existência de incompatibilidade para visualização de websites para esse tipo
de dispositivo. Esses problemas são proporcionados devido à falta de prática de
aplicação dos padrões, bem como a falta de conhecimento das ferramentas que
viabilizam o desenvolvimento Web.
1.3 Justificativa
Devido ao aumento de dispositivos móveis com tecnologia Wi-fi ou 3G para
acesso a Internet, aparecem cada vez mais problemas relacionados aos padrões para
desenvolvimento de sites e aplicativos Web para esses dispositivos, sendo que a
maioria dos aplicativos comuns não dá suporte à navegação móvel (W3C - BR, 2008).
O crescimento se deve ao aumento da abrangência das redes 3G que já
alcançam 64,6% da população brasileira, a implantação de acesso Wi-fi na maioria dos
dispositivos móveis que existem hoje no mercado e a redução dos preços facilitando o
acesso a esse tipo de dispositivos (ARIMA, 2010).
Com a queda dos preços, a multiplicação de aplicativos e a expansão das
redes de dados, os smartphones deixaram de ser privilégio de executivos e
geeks. Se antes os preços começavam em R$1.500,00, agora há modelos
básicos 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, são relacionadas a utilização de padrões e ferramentas próprias para
13
desenvolvimento, pois ao decorrer do tempo, padrões foram criados e aperfeiçoados,
mas foram ficando para trás, devido a grande quantidade de novas tecnologias de
aparelhos e navegadores móveis que surgiram não conseguindo manter o mínimo de
usabilidade e interface gráfica necessária para uma boa experiência de utilização do
usuário.
Algum tempo atrás existiam poucos aparelhos com recursos tecnológicos
suficientes para uma padronização de desenvolvimento, alguns poucos dispositivos
agradaram e se tornaram base para desenvolvedores, que começaram a versionalizar
seus aplicativos Web e sites apenas para esses dispositivos, privando os usuários de
outros modelos de utilizarem os serviços. 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 versão exclusiva (PEREIRA, 2005).
Uma possível solução para resolver esses problemas é o estudo dos padrões
W3C (Word Wide Web Consortium), utilizando seus recursos para desenvolver
aplicativos Web sem correr o risco de não funcionar na maioria dos dispositivos
móveis.
O W3C é um órgão que regulamenta, cria e desenvolve linguagens para
publicação de conteúdo na internet. Há uma diferença muito grande entre
padrão e recomendação. O W3C não faz padrões, ele recomenda métodos e
linguagens. Uma recomendação se torna padrão porque há a aderência da
comunidade. Normalmente uma recomendação do W3C vira padrão, porque
o W3C está lá para isso, eles trabalham para que seja assim (EIS, 2010).
O W3C recomenda a utilização de alguns métodos e linguagens adotados
pelo mercado que acabam virando padrão, passando por testes e aprovação dos
usuários e fabricantes de dispositivos, sendo assim garantia de que o desenvolvimento
aplicando esses padrões faça com que o projeto de um aplicativo Web funcione
perfeitamente na maioria das marcas de dispositivos móveis.
14
1.4 Objetivo geral
Viabilizar, através do estudo de padrões, o desenvolvimento de um aplicativo
Web para dispositivos móveis.
1.5 Objetivos específicos
a) Apresentar os padrões W3C de desenvolvimento para dispositivos móveis.
b) Desenvolver um estudo de caso aplicando os padrões W3C.
1.6 Metodologia
A pesquisa em questão pode ser classificada como: aplicada quanto à sua
natureza e descritiva, quanto à forma usada para atingir os objetivos.
Iniciou-se com o levantamento bibliográfico, em livros e materiais
disponíveis na internet, dos padrões de desenvolvimento Web para dispositivos
móveis, incluindo os padrões W3C, que auxiliam na implementação de métodos de
desenvolvimento, segurança, usabilidade e acessibilidade.
Com base nos padrões identificados anteriormente, o próximo passo foi a
identificação dos recursos tecnológicos disponíveis para o desenvolvimento de
aplicativos Web para dispositivos móveis, como: Ambiente de desenvolvimento, PHP
que será a linguagem de programação; e Smartphones, que suportem navegadores
compatíveis com essas tecnologias.
Na etapa posterior foi a definição do tema para o estudo de caso, que o qual é
um sistema para agendamento, através da Web móvel, de salas ou equipamentos
disponíveis pelas Universidades, administradas pelos seus respectivos setores.
Nesta etapa, foi possível 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
lógico do banco de dados do sistema transacional proposto.
15
Na etapa final foi realizada a implementação do estudo de caso, levando em
consideração como requisitos tecnológicos para dar suporte a uma aplicação Web: ser
compatível com sistema operacional e banco de dados livres, além das linguagens
HTML e CSS, na parte visual, e PHP e JavaScript, para a lógica de negócio. Ainda, a
aplicação Web deve utilizar os conceitos de padrões Web e orientação a objetos
através da linguagem PHP.
16
2 PADRÕES DE DESENVOLVIMENTO WEB
Neste capítulo são apresentados alguns dados sobre o surgimento da Web e
os fatores que levaram desenvolvedores a criar os padrões, sua importância e origem
no meio de uma guerra entre navegadores. Descrevem-se algumas linguagens como
HTML e CSS e as normas dos padrões de desenvolvimento, suas principais vantagens
e como isso facilitou o trabalho que estava se tornando inviável para desenvolvedores
Web.
Neste mesmo capítulo são apresentados os dispositivos móveis com seu
histórico, características tecnológicas, modelos e como os padrões Web auxiliam no
desenvolvimento de aplicativos multiplataforma.
2.1 Origem dos padrões W3C
No início 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 também
fosse utilizada como fonte de informação, desenvolvendo um ambiente onde os
documentos pudessem estar disponíveis o tempo todo utilizando a navegação por links,
nascendo assim à Web através de hipertexto e os navegadores (FRANCIS, 2010).
Durante a guerra dos navegadores, Microsoft e Netscape estiveram focadas
em implementar novas funções em vez de consertar os problemas com as funções já
existentes, e adicionaram funções proprietárias e criaram funções que competiam
diretamente com as existentes no outro navegador, mas implementadas de uma forma
incompatível.
A esta altura, os desenvolvedores eram forçados a trabalhar com o crescente
17
aumento do nível de confusão 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 não 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 Comissão Européia. A visão da W3C era a de padronizar os protocolos e
tecnologias usados para criar a Web de modo que o conteúdo possa ser acessado
largamente pela população mundial tanto quanto o possível (ANDRADE, 2005).
Durante os anos seguintes, o W3C publicou várias especificações chamadas
de “recomendações” incluindo o HTML, o formato de imagens PNG, e as Folhas de
Estilo em Cascata versões 1 e 2.
Entretanto, a W3C não obriga ninguém a seguir suas recomendações. Os
fabricantes precisam adotar os documentos da W3C apenas se eles quiserem etiquetar
que seus produtos como complacentes com a W3C. Na prática, isto não tem muito
valor mercadologicamente já que a maioria dos usuários da Web não sabe, nem
provavelmente se importam com quem é a W3C. Em consequência disto, a “guerra
dos navegadores” continuou (AWAMURA, 2004).
Já com o lançamento de alguns navegadores importantes adequados a
algumas recomendações do W3C, os demais proprietários de ambientes e de
navegadores menos conhecidos seguiram a mesma linha e começaram a dar suporte a
CSS e HTML, fazendo disso um marco positivo para os desenvolvedores, que podiam
em fim desenvolver adotando os padrões, sem se preocupar com a incompatibilidade
entre navegadores.
Desde então os padrões se tornaram obrigatórios na comunidade de
desenvolvimento Web profissionais, mas mesmo assim ainda existem sites, na maioria
das vezes desenvolvidos por iniciantes que não utilizam os padrões.
18
2.2 Padrões Web
Os padrões Web são um conjunto de normas, diretrizes, recomendações,
notas, artigos, tutoriais e afins de caráter técnico, desenvolvido pelo Word Wide Web
Consortium (W3C), para auxiliar fabricantes e desenvolvedores para o uso de práticas
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 apresentação, fazendo com que a complexidade de
desenvolvimento fosse ainda maior então esses elementos foram separados e hoje se
estudam três componentes que formam esse conjunto: estrutura, apresentação e
comportamento, como na figura 1.
FIGURA 1 - Conjunto de elementos
(Fonte: Zeldman, 2003)
Utilizar padrões para Web é extremamente vantajoso, pois proporciona um
maior controle sobre a página. Quando é dito que uma página é compatível
com os padrões, significa que o documento consiste de HTML ou XHTML
válido, utiliza CSS para leiaute, é bem-estruturado e semanticamente correto.
Esses fatores podem garantir que o site seja acessado por qualquer
dispositivo, seja ele móvel, tátil, desktop etc. (WIKE, 2005).
Assim sites desenvolvidos seguindo os padrões, custam menos, funcionam
19
melhor e são acessíveis a diversos tipos de navegadores e dispositivos existentes no
mercado hoje e amanhã.
2.2.1 Vantagens de utilização dos padrões
Desenvolver seguindo os padrões significa utilizar a Web de forma mais
acessível por outros usuários e dispositivos, sendo identificadas como vantagem de seu
uso (REIS, 2007):
 Uniformidade: aplicativos Web desenvolvidos dentro dos padrões, podem
usar uma mesma estrutura comum, facilitando remoções, movimentações e
inserções de conteúdo ou de estrutura que possam ser realizadas de uma
maneira mais simples.
 Simplicidade: muito similar à uniformidade, mas destinada a eliminar
componentes desnecessários para o funcionamento, principalmente no
HTML facilitando a melhor visualização do código, mais limpo e leve,
dando maior flexibilidade na utilização dos mesmos diretamente no
navegador ou na reutilização para outros fins.
 Acessibilidade: um princípio chave ao se considerar a acessibilidade para a
Web é a flexibilidade, a fim de satisfazer as diversas preferências,
necessidades e situações do usuário. Contudo utilizando os padrões podem-se
eliminar alguns problemas como: Variedade de resolução de tela, versões 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 visualização e navegação).
 Separação entre estrutura e apresentação: a mais significativa na utilização
dos padrões, onde sua utilização correta pode separar completamente a
estrutura do aplicativo de sua apresentação. Permite deixar um documento
restrito apenas ao seu conteúdo, sem especificar qualquer forma de
apresentação, assim o documento permanece o mesmo e pode ser
apresentado de variadas formas em qualquer tipo de ambiente, como uma
página 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 móvel.

Viabilidade em longo prazo: aplicativos construídos dentro dos padrões 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
navegação são desenvolvidas os padrões não perdem suas características,
apenas agregam as novas, tornando os documentos interpretáveis
independente da época.

Usabilidade: usabilidade e acessibilidade são conceitos próximos, de maneira
que, em muitos aspectos, o esforço em promover acessibilidade poderá
resultar em ganho de usabilidade, e vice-versa. Mas não de forma
obrigatória, ou seja, é possível, por exemplo, encontrar páginas acessíveis,
mas que apresentam deficiências de usabilidade. No uso dos padrões
encontram-se aspectos de usabilidade principalmente para o desenvolvedor,
na utilização de ferramentas apropriadas e adaptadas as especificações de
desenvolvimento, na facilidade de reutilização de documentos de
apresentação e na facilidade de entendimento do código da estrutura. A
adoção dos padrões pode ser ótima para proporcionar usabilidade aos
usuários, já que são corrigidos problemas como velocidade de carregamento
e suporte a vários ambientes.
2.2.2 Dificuldades na utilização dos padrões
Mesmo com todas as facilidades enumeradas na utilização dos padrões de
desenvolvimento Web, ainda existem algumas dificuldades, dentre as quais podem-se
citar (REIS, 2007):
 Diferenças entre navegadores: apesar de todas as recomendações da W3C
para padronizar a codificação dos documentos Web, alguns navegadores
ainda não conseguiram se adaptar as todas as normas por completo, tendo
algumas diferenças de funcionamento de um navegador para outro, mesmo
que a maioria delas seja imperceptível ao usuário.
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 código, que
possam desenvolver documentos Web apenas visualizando em tempo real o
resultado final. Mesmo com essas ferramentas de edição visuais cada vez
mais adequadas
aos padrões, elas proporcionam comodidade aos
desenvolvedores que passam a descuidar e confiar inteiramente no editor que
nem sempre geram códigos semanticamente corretos.
 Dificuldades de aprendizagem: com a grande maioria dos desenvolvedores
acostumados ao modo tradicional de criação de layout em tabelas, a
adequação aos padrões se torna mais difícil, tento que aprender uma nova
linguagem (CSS) e mudar totalmente o conceito de que o conteúdo passa a
ser mais importante que a apresentação.
2.2.3 Tableless
Em meados dos anos 90 os desenvolvedores não tinham adotado o CSS, por
esse motivo todo o posicionamento dos componentes de um documento era feitos em
marcação (HTML), e muitas vezes através 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 resistência em abandonar o método tradicional,
assim surgiu o termo Tableless (sem tabelas), em oposição à utilização de tabelas,
mesmo que somente o fato do documento Web ser desenvolvido com CSS não provar
que esta de acordo com os padrões.
Web standards é um termo mais completo que se refere a uma adequação
total aos padrões e não só a linguagem de marcação e CSS, conceito que envolve a
utilização total de todas as tecnologias para desenvolvimento Web que tragam todas as
vantagens possíveis, englobando um conjunto de praticas como: Linguagens de
Marcação (XML, HTML XHTML), Linguagens de Apresentação (CSS), Semântica
(RDF), Linguagens de comportamento (DOM), acessibilidade (WAI), protocolos
22
(HTTP), móbile (MWI), entre outras.
Em suma, um site que segue os Web standards preza por vários aspectos que
o constitui e não somente a estrutura sobre usar <div> ou <table> para a
estruturação das páginas, pois não utilizar tabelas e usar algo do tipo <div
class="titulo">Título </div> no lugar de alguma tag de título (<h1> ou <h2>, por
exemplo) é tão contrário aos Web standards quanto utilizar tabelas.
2.3 Desenvolvimento com padrões Web
Em toda discussão sobre padrões Web, o fator com maior relevância é a
importância da separação entre apresentação, estrutura e comportamento, tornando
assim o código limpo e correto.
No modelo tradicional não há separação entre estrutura e apresentação como
na figura 2, já no modelo dos padrões existe essa separação 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 semântica e
os elementos. Utilizando uma linguagem de marcação como HTML ou XHTML
introduzindo dados de textos formatados de acordo com a necessidade e o seu
significado (texto, título, parágrafo, lista) e objetos embutidos (arquivos, imagens,
vídeos, animação, áudio).
23
A apresentação é onde são tratados os aspectos visuais de um documento,
que não fazem parte da formação textual. Utilizando linguagens de apresentação como
CSS1, CSS2 e CSS3 que formatam a página, controlam posicionamento de elementos,
cor dentre outros aspectos.
Em relação ao comportamento, um modelo de objeto padrão (DOM) é
recomendado pelo W3C e trabalha com CSS, (X) HTML e ECMA Script e permite a
criação de comportamentos e efeitos sofisticados que funcionem através de várias
plataformas e navegadores. O DOM pode ser entendido como uma organização
hierárquica dos elementos de um documento XML e um conjunto de métodos para
manipular estes elementos.
FIGURA 3 - Estrutura da aplicação dos padrões.
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 usuários, como gifs animados com textos em
movimento, animações, sons e efeitos utilizando Java Script, o que tornava as páginas
24
ainda mais fora dos padrões.
Segundo Zeldaman (2003), 99,9% dos websites são obsoletos, pois, como
foram desenvolvidos de acordo com este método 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 apresentação 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 não funciona ou,
na melhor das hipóteses, funciona com várias limitações.
O maior erro no desenvolvimento de um site é a utilização de tabelas que
pode trazer desvantagens como (ZELDMAN, 2003):
 Excesso de elementos, acarretando na dificuldade de indexação pelos
mecanismos de busca.
 Dificuldade de manutenção pela complexidade do código.
 Falta de acessibilidade por usuários especiais.
 Apresentação e conteúdo aninhados, tornando o código semanticamente
errado e o arquivo com um tamanho desfavorável.
Desta forma o HTML deveria ser usado apenas para estruturar textos.
Já com o surgimento do W3C foram adotados novos padrões, com um
modelo totalmente
diferenciado separando o conteúdo da apresentação e
comportamento, visando proporcionar acessibilidade e universalidade como foi visto
anteriormente nesse capítulo.
2.3.2 HTML semântico
Semântica refere-se ao estudo do significado em todos os sentidos. Ou seja,
consiste no estudo da palavra e de seus significados, relacionando com os Padrões
Web, semântico 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 são esquecidas:
25
 A tag <table> foi criada para exibir dados tabulares e não pra estruturar sites.

Usar a tag <br /> para simular parágrafos, onde a tag <p> poderia ser usada.

Usar qualquer outra tag que não seja os headings (títulos) como h1, h2, h3,
etc., para declarar títulos.

Quando for uma citação em um texto colocar entre a tag <cite>.

Tudo que for uma lista, como menus, itens, tópicos etc, utilizar as tags <ul>
(lista sem ordem) ou <ol> (lista ordenada) juntamente com a tag <li> (lista).

Quando fizer um formulário de inserção de dados utilizar a tag <label>
(rótulo) para declarar o nome do campo.
2.3.3 XHTML
XHTML 1.0 é a reformulação do HTML 4 em XML 1.0, e foi desenvolvido
para substituir o HTML (W3C, 2002). São citados pelo W3C alguns benefícios na
utilização 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 aplicações existentes em HTML 4;

Foi concebido visando interoperabilidade com todo tipo de aplicações de
usuários e não apenas softwares navegadores padrão;

É compatível 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
marcação apenas do conteúdo, contribuindo para a modularização no
desenvolvimento das páginas;

A escrita do XHTML é limpa por respeitar as regras do XML, não
permitindo tags fora de ordem, por exemplo;

O tempo de carregamento é mais rápido, pois os navegadores não têm que
decidir sobre renderização de erros de código.
XHTM começam com elementos que informam aos navegadores como
26
interpretá-los e aos serviços de validação com testá-los. Um desses elementos é a
declaração DOCTYPE (acrônimo de “Document Type” e também conhecido como
DTD –Document Type Definition), que informa, em linguagem de máquina, a versão
do XHTML usado.
As declarações DOCTYPE são peças chave de websites compatíveis. A
opção escolhida interfere na maneira como a maioria dos navegadores e serviços de
validação exibe o site. O XHTML oferece três declarações de DOCTYPE possíveis
(W3C, 2007a):

Transitional: opção que está mais próxima do HTML. Utilizado por
desenvolvedores que estão fazendo a transição para os padrões Web
modernos e/ou que precisam manter atributos e elementos de apresentação
unidos à estrutura como no quadro 1.
1
2
QUADRO 1 - Exemplo de código transitional.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Fonte: W3C, 2011

Strict: DTD que exclui atributos de apresentação e elementos que o W3C
pretende remover à medida que o suporte à CSS evolui, como no quadro 2.
QUADRO 2 -
1
2
Exemplo de código strict.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Fonte: W3C, 2011

Frameset: permite a utilização de frames. Não recomendado, uma vez que o
uso de frames está em desuso, como no quadro 3.
QUADRO 3 1
2
Exemplo de código frameset.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Fonte: W3C, 2011
Outras regras fundamentais presentes no XHTML são:

A declaração DOCTYPE é imediatamente seguida por uma declaração de
namespace XHTML que destaca o elemento <html> (indica a língua e a
27
versão XML utilizadas no documento) como no quadro 4 :
QUADRO 4 1
Exemplo de código.
<html xmlns=http://www.w3.org/1999/xhtml xml:lang="pt-br" lang="pt-br">
Fonte: W3C, 2011

O tipo de conteúdo do documento deve ser declarado usando a tag META
Content, como no quadro 5:
QUADRO 5 -
1
2
Exemplo de código.
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"
/>
Fonte: W3C, 2011

As meta-tags descrevem o conteúdo da página Web para os buscadores e a
autoria da mesma, e devem ser incluídas dentro do elemento <head>, após a
tag META Content, como no quadro 6.
1
2
3
4
5
6
1
2
QUADRO 6 - Exemplo de código.
<meta name="keywords" content="universidade, universidade do
planalto, universidade do planalto catarinense, lages,uniplac,
web standards" />
<meta name="description" content="Universidade do Planalto
Catarinense" />
<meta name="author" content="Flávio Roberto Deucher’" />

Todas as tags e atributos devem ser escritos em letras minúsculas;

Os elementos devem estar convenientemente aninhados como no quadro 7.
QUADRO 7 - Exemplo de código
Errado: <div><strong><p>Texto</strong></p></div>
Correto: <div><strong><p>Texto</p></strong></div>

O uso de tags de fechamento é obrigatório.

Elementos vazios devem ser fechados, como a tag <br />, por exemplo.

Os valores de atributos devem sempre estar entre "aspas". Exemplo: <input
checked="checked" />

Os documentos devem ser bem formados, isto é, devem estar estruturados
de acordo com as regras definidas nas Recomendações para XML 1.0.
28
Todos os elementos XHTML devem estar corretamente aninhados dentro
do elemento raiz <html>.

Codificar caracteres tais como menor (<), maior (>) e & (E comercial) para
<,> e &, respectivamente.
Para uma marcação correta, é sugerido validar esses documentos XHTML.
Um processo onde é verificado o documento comparando-o com os modelos
publicados pelo W3C. Depois de checado e aprovado ele é considerado um documento
válido.
O validador gratuito disponibilizado pelo W3C, está disponível em
http://validator.w3.org/, onde um robô analisa o código e fornece um relatório
completo das não conformidades que possam existir no documento.
2.3.4 CSS
As folhas de estilo CSS são definidas pelo W3C como um mecanismo
simples para acrescentar estilo a documentos Web. Uma linguagem de leiaute padrão
que define cores, tipografia, tamanho e posicionamento, atualmente possuindo três
versões: CSS1, CSS2 e CSS3. Sendo que a versão utilizada nesse relatório é a versão
CSS2.
Uma boa semântica em XHTML é necessária para um bom controle de
leiaute em CSS. Segundo Meyer (2001), as folhas de estilo permitem a especificação
do estilo dos elementos da página (espaçamento, margens etc.) separadamente da
estrutura do documento (cabeçalhos de seção, corpo de texto, links etc.) e podem ser
incluídas ao documento XHTML de quatro formas:

CSS Inline: declarações aplicadas a um elemento individual através do
atributo style, como no quadro 8.
1
QUADRO 8 - Exemplo de código CSS inline
<div style="background:#FFFFFF; color:#000000;"> Colorir </div>
Fonte: W3C, 2011

CSS Incorporado: declarações incluídas no conteúdo através do elemento
29
style no cabeçalho (<head>) de um documento XHTML, como no quadro 9.
1
2
3
4
5
6
7
8
9
10
QUADRO 9 - Exemplo de código CSS incorporado
<head>
<style type="text/css">
<!-div {
background: #FFF;
color: #000;
}
-->
</style>
</head>
Fonte: W3C – BR (2011)

CSS Externo: as declarações são adicionadas em um arquivo externo com a
extensão “css” e incluídos em vários documentos através do elemento
<link>. As alterações no arquivo CSS afetam a todos os documentos que
referenciarem este arquivo como folha de estilo, como no quadro 10.
1
2
3
QUADRO 10 - Exemplo de código CSS externo.
<head>
<link rel="stylesheet" href="estilo.css" type="text/css" />
</head>
Fonte: W3C – BR (2011)

CSS Importado: as declarações também são chamadas a partir de um
arquivo CSS externo, porém, não através do elemento link, mas sim da
declaração @import, como no quadro 11. Esta importação não é bem aceita
por navegadores antigos.
1
2
3
4
5
QUADRO 11 - Exemplo de código CSS importado.
<style type="text=css">
<!—
@import url(estilo.css);
-->
</style>
Fonte: W3C – BR (2011)
É recomendado que a apresentação seja definida via arquivos externos,
facilitando a manutenção das páginas e aumentando a velocidade da navegação
utilizando o recurso de cache dos navegadores, não sendo preciso requisitar as
30
informações visuais toda vez que a uma atualização de página.
Através do CSS media types é definido o tipo de mídia onde as regras de
formatação serão aplicadas. Com isso é possível fazer estilos específicos para
navegadores (mídia screen), para dispositivos móveis (mídia handheld), para
impressão (mídia print) para apresentações (mídia projection), para sintetizadores de
tela (mídia aural), para dispositivos táteis (mídia Braille), para TV digital (mídia TV),
dentre outros (W3C, 2002), como exemplificado no quadro 12 e apresentado na figura
4.
1
2
3
4
5
6
QUADRO 12 - Exemplo de código CSS media types.
<link rel="stylesheet" href="navegador.css" type="text/css"
media="screen" />
<link rel="stylesheet" href="impressora.css" type="text/css"
media="print" />
<link rel="stylesheet" href=smartphone.css" type="text/css"
media="handheld" />
Fonte: W3C - BR (2011)
FIGURA 4 - Diferentes tipos de utilização do CSS.
Fonte: REIS – (2007)
Utilizando as diversas características do CSS ele pode nos trazer muitos
benefícios como:

Conservação da largura de banda do usuário, acelerando os tempos de carga
da página especialmente através de uma conexão discada;

Redução da sobrecarga do servidor e da largura de banda do proprietário,
31
assim economizando dinheiro;

Redução do tempo de design e desenvolvimento;

Aumento da interoperabilidade aderindo aos padrões Web;

Aumento da acessibilidade removendo alguns, vários ou todos os elementos
de apresentação da marcação.
2.3.5 Comportamento
Padronizando os acessos a um elemento XML, o W3C criou DOM, uma
interface independente que permite que programas e scripts acessem a alterem
dinamicamente o conteúdo, a estrutura e o estilo do documento.
Apesar de existirem outras linguagens, o W3C recomenda o uso da
linguagem java script para tratamento de eventos e ações automáticas.
A linguagem java script é usada para aumentar as funcionalidades de um
documento Web, seguindo o conceito de separação entre apresentação, conteúdo e
comportamento. E para isso devemos observar alguns aspectos da inclusão desses
scripts em documentos Web, como:

O Java Script deve ser tratado como um incremento, não como uma
funcionalidade segura.

Evitar incluir java script diretamente nas tags do documento XHTML, o
mantendo separado em arquivos externos a serem referenciados pela página
(scripts não-obstrutivos).
As principais dificuldades na inserção de scripts são as diferenças entre
navegadores, que algumas vezes causam erros de interpretação do modelo DOM, mas
com a aceitação cada vez maior dos padrões isso tende a reduzir com o passar do
tempo (REIS, 2007).
2.4 XHTML para dispositivos móveis
Projetar documentos para telas em tamanho normal utilizando os padrões,
32
torna o serviço mais prático e organizado, a mesma estratégia se aplica a dispositivos
móveis, mas com algumas diferenças:

Dificuldade na digitação: O teclado DTFM e os mecanismos do tipo
ponteiro e até mesmo os teclados QWERTY, utilizados nos dispositivos
móveis apresentam certa dificuldade para digitação, então recomenda-se
não exigir que o usuário digite textos.

Transferência de dados: Operadoras de telefonia, geralmente distribuem
planos com limite da transferência e o que passar desse limite é cobrado do
usuário.

Tamanho da Tela: Telas bem menores, o que pede uma forma mais
dinâmica e limpa de navegação.

Velocidade de processamento e transferência: Mesmo dispositivos de ponta
perdem
em
desempenho
para
computadores
tradicionais
e
seu
processamento se torna mais lento. O mesmo problema acontece com a
transferência de dados, onde as redes ainda são lentas, e mesmo os
dispositivos que utilizam tecnologia Wi-fi não atingem a melhor qualidade
de conexão.

Usuários se movimentando: Os usuários usam dispositivos móveis na
maioria das vezes se movimentando, e necessita encontrar a informação que
deseja de forma mais simples.
2.4.1 Dispositivos e navegadores
Como aconteceu com a Web para navegadores tradicionais, está acontecendo
para os dispositivos móveis, nem todos os navegadores dão suporte total aos padrões
de desenvolvimento, principalmente na interpretação de XHTML e CSS, algumas
falhas de renderização, variam de modelo para modelo, pois ainda existem diversos
tipos de navegadores proprietários desenvolvidos pela própria fabricante do
dispositivo (SILVA, 2006).
2.4.2 Vertical e horizontal
33
A maioria dos dispositivos móveis tem um layout vertical e os usuários têm
que rolar a tela verticalmente para acessar os conteúdos. A primeira parte a ser
visualizada é o topo da tela em dispositivos móveis. Assim, evitar barras e tabs de
navegação, bem como posicionamentos lado a lado (SILVA, 2006).
2.4.3 Tamanho da tela
Segundo Silva (2006) dispositivos móveis têm telas pequenas, processadores
pequenos, pouca memória e mecanismos de entrada restritos. Manter as páginas
pequenas, entradas de textos reduzidas, uso mínimo de tabelas e de CSS, traz maior
acessibilidade e usabilidade.

Evitar o uso grandes arquivos CSS. Isto pode causar uma confusão visual,
reduzindo a legibilidade. Também exigem grande tempo para download,
resultando em uma re-renderização na tela depois que o usuário já estiver
começado sua leitura. Definir no máximo regras CSS para 4 elementos.

Evitar o uso de gráficos (imagens) grandes. Elas precisam de um tempo
longo para download e devem ser usadas somente quando o assunto
principal na página for gráfico.

Evitar o uso de gráficos (imagens) para layout. Imagens do tipo "spacer" e
outras imagens para layout tomam tempo de download e atrasam a
renderização do documento.

Evitar telas de entrada ("splash screens"). Elas não agregam qualquer tipo
de benefício e tomam tempo e dinheiro ao usuário.

Usar estilos simples para os textos. O tamanho reduzido da tela faz com que
o uso de uma variedade de estilos para textos tornem a compreensão
confusa e difícil. Usar no máximo 3 estilos por página. Limitar-se a um só
tipo de estilo para enfatizar. Manter consistência nas fontes (a maioria dos
dispositivos adota uma só fonte padrão). Evitar o uso de fundo colorido
para textos.

Usar poucas cores. As diferenças entre as telas bem como as diferentes
situações em que se encontram os usuários fazem com que o uso de cores
34
não cause o efeito que se espera podendo tornar confusa a diferenciação.

Manter conteúdos reduzidos. Não colocar grandes quantidades de conteúdo
no documento.
2.4.4 Cuidado com as CSS externas
O uso de folha de estilo externa permite aplicar estilos ao site inteiro e ao
mesmo tempo reduz o tempo de download. Na prática muitos navegadores móveis não
trabalham com memória cache fazendo com que haja necessidade de download das
CSS a cada página visualizada. E, mais ainda, quando nova página é carregada o
XHTML já renderizado, é descarregado para ser renderizado com o novo download
das CSS.
2.4.5 Navegação simples e consistente.
Usar somente um método primário para acessar conteúdos, mantendo o
documento sem grandes sofisticações. Navegação consistente nas páginas permite fácil
identificação e facilitam seu uso. Para isso seguem algumas dicas de navegação
(SILVA, 2006).

Não usar menus drop-down (listas select) para navegação. Usuários não
saberão como acioná-los.

Não usar tabs. Eles requerem o uso de imagens e tabelas, aumentando o
tempo de download. Além disso, ainda requerem percorrer todos os itens
até atingir o ponto de acesso ao conteúdo que interessa.

Não colocar navegação linear no topo da tela. Para conseguir isto você terá
que se utilizar de gráficos (e provavelmente de tabelas). Os usuários terão
que percorrer todos os itens até atingir o ponto de acesso ao conteúdo que
interessa.

Não colocar um mecanismo de busca no topo da página. Isto poderá induzir
o usuário a fazer uma busca antes de ler o conteúdo da página, requerendo
dele uma digitação.
35

Rastro de navegação. Usar um gráfico simples no topo da página com um
ícone de navegação indicando em qual site e qual parte do site o usuário se
encontra e uma breve descrição da página presente.

Home. Colocar um link para á página inicial do site, preferencialmente no
fim da página.
2.4.6 Usar cores e imagens simples
Os dispositivos móveis têm dimensões reduzidas, suas telas nem sempre
apresentam boa renderização para cores e que são usados em uma grande variedade de
condições de luminosidade e ambiente (SILVA, 2006).

Usar cores altamente contrastantes para imagens e fontes. Dispositivos
móveis não oferecem o melhor suporte para nuances de cores. Os usuários
não perceberão distinção de tonalidades próximas, mesmo que suportem
65.000 cores.

Evitar o uso de imagens de fundo sempre que possível. Se for necessário
usar uma imagem de fundo, deve ser escolhida uma imagem pequena e
devendo se fazer da repetição da imagem no fundo. Certos dispositivos não
suportam imagens de fundo. Assegurar-se de que as cores escolhidas para o
fundo ofereçam contraste suficiente.

Não usar imagens ou fundos na cor preta ou escura inclusive para regiões
sombreadas na página. Alguns navegadores não suportam cores para textos
e tal prática poderá tornar a página ilegível.

Evitar usar a cor azul ou púrpura para fontes. Estas são as cores
tradicionalmente utilizadas para os links. Tal sugestão é muito importante
quando se trata de dispositivos móveis, mais do que para telas de
computador, uma vez que alguns navegadores de dispositivos móveis não
sublinham os links e a única maneira de identificá-los é através da cor.

Usar a mesma paleta de cores para toda a parte gráfica do site. Isto assegura
um visual consistente e fixa uma identidade.
36
2.5 Mobilidade
Segundo
Nakazato
(2009)
mobilidade
compreende
os
sistemas
computacionais que podem facilmente ser movidos fisicamente ou cujas capacidades
podem ser usadas enquanto são movidos e normalmente oferecem recursos que não
encontramos em sistemas comuns, como por exemplo:

Monitoramento Remoto

Armazenamento Remoto

Sincronização de Dados

Comunicação
Considera-se móveis os sistemas que são desenvolvidos para rodar em
Palmtops, Celulares, Smartphones, Tablets e similares, sendo esses equipamentos
definidos como dispositivos móveis. Pela mesma definição encontram-se Notebooks e
Netbooks que não se enquadram no grupo de dispositivos móveis pela dificuldade de
seu uso em movimento.
Para melhor classificação do que é um dispositivo móvel, ele deve
proporcionar acesso imediato e com o usuário em movimento.
Hoje até mesmo automóveis modernos podem ser considerados dispositivos
móveis, pois se movimentam e possuem sistemas operacionais que gerencias todas as
atividades e interagem com outros dispositivos como Celulares, GPS, etc.
A quantidade de dispositivos diferentes dificulta o desenvolvimento de
aplicações, pois cada fabricante possui suas próprias características de produção
fazendo os desenvolvedores a escolherem uma arquitetura para seguir deixando as
outras de lado.
De uma forma mais geral a mobilidade é a possibilidade de acessar dados em
qualquer hora e qualquer lugar. Algumas das vantagens da mobilidade segundo
Nakazato (2009) são:

Redução de custos de comunicação.

Redução de custos com processamento de dados (impressão, postagem,
etc.).
37

Otimização do tempo com informações precisas em tempo real.

Agilidade na tomada de decisões.
Além dos benefícios que a mobilidade pode nos trazer, segundo Nakazato
(2009) existem muitas barreiras a serem quebradas para proporcionar sua utilização,
tais como:

Custo elevado dos dispositivos que suportam os sistemas.

Baixo poder de processamento: Em razão de que esses dispositivos
dependem de fonte de energia armazenada em baterias, corta-se o
desempenho para ter maior autonomia.

Pouca infraestrutura de conexão: Redes de dados que existem no mercado
ainda não são totalmente confiáveis e com velocidades razoáveis (3G e
EDGE ou GPRS) e algumas redes se limitam a alguns ambientes como as
Redes Wi-fi.

Poucos desenvolvedores: Pouca gente no mercado capacitado e disposto a
desenvolver para dispositivos móveis, por se tratar de algo novo.

Interoperabilidade: Problemas de comunicação entre sistemas móveis e
soluções tradicionais geram a falta de integração dificultando a utilização.
2.5.1 História dos dispositivos móveis
Associada aos conceitos vistos anteriormente, segundo Nakazato (2009)
pode-se considerar que a computação móvel começou em meados de 1992, com a
introdução no mercado de um handheld chamado Newton, pela Apple. O Newton
chegou ao mercado com tela sensível ao toque, 1MB de memória total, e capacidade
de transmissão de dados de 38.5kbps. Este modelo não teve muita repercussão, mas é
considerado o início dos dispositivos móveis.
Já em 1996 a Empresa U.S. Robotics, lançou o primeiro Palm Pilot 1000 e
5000, dispositivo esse que obteve uma grande aceitação e virou a base para todas as
plataformas de Palm’s.
Também em 1996 a Microsoft lança os primeiros dispositivos com Windows
CE 1.0, como o NEC Mobile Pro 200 e o Casio A-10, não tendo grande aceitação no
38
mercado até o lançamento do Windows CE 3.0 no ano 2000.
Atuando em projetos paralelos, a empresa Symbiam foi formada em 1998 por
algumas das maiores fabricantes de celulares do mundo, entregando o sistema
operacional Symbiam que hoje roda na maioria dos dispositivos NOKIA que é a atual
proprietária da empresa.
Já em 2005 o Google adquiriu uma empresa de software chamada Android e
em 2007 lançou no mercado um sistema operacional para dispositivos móveis com o
mesmo nome.
Atualmente o mercado está tendendo para a convergência de recursos nos
dispositivos móveis, criando equipamentos que concentram funções de palmtops,
celular, câmera fotográfica, GPS, etc., além de oferecerem excelente desempenho,
grande capacidade de armazenamento e inúmeras possibilidades de comunicação.
2.5.2 Aplicações da mobilidade
A computação móvel pode ser aplicada praticamente em todas as atividades
e/ou os segmentos de negócio que lidam com informações, como por exemplo,
comércio e seus vendedores, indústrias e seus representantes, restaurantes e seus
garçons, etc. É preciso apenas descobrir como.
Isto porque praticamente todos que trabalham nestas atividades/segmentos se
deslocam, em maior ou menor grau. Entre algumas das aplicações possíveis, pode-se
destacar:

Consultas de informações e relatórios diversos – de forma online ou offline;

Processos de venda (automação da equipe de vendas externa);

Processos de contagem/inventário em geral;

Gerenciamento de informações em geral;

Monitoramento de atividades;

Atendimento a clientes.
39
2.6 Conclusão
O estudo dos padrões de desenvolvimento Web, do seu histórico, e
segmentos para sua utilização, são os fundamentos para total compreensão do tema. As
informações contidas nesse capítulo servem como base para uma análise mais
detalhada e permitem o emprego dessas informações para a estruturação e
levantamento de requisitos necessários para implementação do aplicativo Web para
dispositivos móveis como estudo de caso.
Encerrando esse capítulo, se tem a compreensão da ampla linha de
segmentos móveis que o estudo de padrões de desenvolvimento Web abrange. Ainda
observa-se a importância na aplicação dos padrões, sendo que estes não podem ser
deixados de lado tanto por desenvolvedores de aplicativos como de navegadores.
40
3 MODELAGEM DO SISTEMA
Este capítulo apresenta a modelagem do sistema de agendamento de recursos
(salas, equipamentos, etc.) de uma instituição. Para isso foram utilizados os seguintes
artefatos: levantamento de requisitos e sua organização através de casos de uso com
listas de conceitos e operações cadastrais, listas de relatórios e todos os elementos que
compõem o processo de negócio. Também utilizados os eventos e respostas
observados na expansão dos casos de uso, detalhados passo a passo juntamente com o
modelo lógico do banco de dados.
3.1 Sumário executivo
Para a modelagem do sistema aqui proposto, foi utilizado como modelo o
Setor de Meios da Universidade do Planalto Catarinense, que tem como função o
gerenciamento de recursos físicos (tais como sala de aula, laboratórios, auditório,
projetor, etc.).
Propõem-se o desenvolvimento de um aplicativo Web para dispositivos
móveis, que permita que um usuário pré-cadastrado, como, professores ou técnicos
administrativos da instituição execute o agendamento de todos os recursos disponíveis
através do setor de meios, ou setor responsável pela organização desses itens, a partir
de qualquer lugar que tenha acesso a uma rede de dados, sendo ela 3G, EDGE ou Wifi, tendo como objetivo agilizar e facilitar o processo para esses usuários.
Os recursos devem ser organizados por tipo, sendo eles, laboratório, sala ou
equipamentos. Esses tipos deverão ser pré-cadastrados.
Para o agendamento de recursos o sistema primeiramente deverá apresentar o
41
tipo a partir de uma lista, em seguida o usuário seleciona a data e hora para utilização
do recurso e posteriormente o sistema apresenta os recursos específicos da categoria
selecionada conforme disponibilidade.
Para gerar a reserva o usuário poderá visualizar os dados selecionados em
forma de relatório e confirmar sua seleção para então finalizar o agendamento ou
retornar ao início para selecionar novamente algum campo que não esteja correto.
Optando por finalizar, a tela voltará para o início onde o usuário poderá fazer um novo
agendamento ou consultar outros já finalizados.
Ao concluir um agendamento o sistema deverá enviar um e-mail para o setor
responsável bem como ao usuário que solicitou a reserva.
3.2 Levantamento de requisitos
Os quadros 13 a 17 trazem as informações dos requisitos funcionais e não
funcionais levantados na fase de concepção do projeto, referentes ao modulo cliente.
QUADRO 13 - Manter informações de usuários
F1 – Manter informações de Usuário
( ) Oculto
Descrição: o sistema deve manter os dados do usuário, indicando nome, matrícula e e-mail.
Requisitos Não- Funcionais
Nome
Descrição
Categoria
Desejável
Permanente
NF 1.1 Controle A função deve permitir somente o Segurança
X
de Acesso
acesso de professores e técnicos
administrativos
QUADRO 14 - Manter Informações de tipo de recurso
F2 – Manter Informações de Tipo de Recurso
( ) Oculto
Descrição: o sistema deve manter informações de tipo de recurso: equipamento, laboratório ou sala.
Requisitos Não- Funcionais
Nome
Descrição
Categoria
Desejável
Permanente
NF 2.1 Controle A função deve permitir somente o Segurança
X
de acesso
acesso de professores e técnicos
administrativos
NF 2.2 Lista de Deve ser possível escolher as Interface
X
Alternativas
alternativas a partir de uma lista.
QUADRO 15 - Manter informações de recursos
F5 – Manter informações de recursos
( ) Oculto
Descrição: o sistema deve manter informações de recursos como: equipamentos, laboratórios e salas
Requisitos Não- Funcionais
42
Nome
NF 5.1 Controle
de Acesso
NF 5.2 Lista de
Alternativas
NF 5.3 Filtro de
disponibilidade
NF 5.4 Escolha de
itens
Descrição
A função deve permitir somente o
acesso de professores e técnicos
administrativos
Deve ser possível escolher as
alternativas a partir de uma lista.
Deve ser possível escolher apenas
itens disponíveis para a data e
horários selecionados.
Deve ser possível escolher vários
itens do mesmo tipo de reserva.
Categoria
Segurança
Desejável
Interface
X
Especificação
Especificação
Permanente
X
X
X
QUADRO 16 - Manter informações de data da reserva
F3 – Manter informações de data da reserva
( ) Oculto
Descrição: o sistema deve manter informações de data e horário para utilização.
Requisitos Não- Funcionais
Nome
Descrição
Categoria
NF 3.1 Controle
de acesso
A função deve permitir somente o
acesso de professores e técnicos
administrativos
Deve ser possível escolher as
alternativas a partir de uma lista.
Deve estar disponível datas a partir
de 15 dias do dia atual.
Os Horários disponíveis devem
estar de acordo com os horários da
instituição.
Deve permitir a escolha de vários
horários na mesma data.
Segurança
NF 3.2 Lista de
Alternativas
NF 3.3 Filtro de
datas
NF 4.3 Filtro de
horas
NF 4.4 Escolha de
horas
Desejável
Permanente
X
Interface
X
Especificação
X
Especificação
X
Especificação
X
QUADRO 17 - Gerar relatório
F6 – Gerar Relatório
( ) Oculto
Descrição: o sistema deve permitir a visualização do Relatório com os dados selecionados para o agendamento.
Requisitos Não- Funcionais
Nome
Descrição
Categoria
Desejável
NF 6.1 Controle
de Acesso
A função deve permitir somente o
acesso de professores e técnicos
administrativos
O sistema deve apresentar os dados
selecionados no agendamento e os
dados do usuário.
O sistema deve enviar um e-mail
para o setor responsável e cópia
para o usuário que agendou o
recurso.
Segurança
X
NF 6.2 Lista de
dados
NF 5.3
Permanente
Especificação
X
Especificação
X
43
3.3 Requisitos suplementares
O quadro 18 apresenta os requisitos suplementares do sistema.
QUADRO 18 - Suplementares
Suplementares
Nome
S1 Forma de
Acesso
S2
Níveis
Segurança
Descrição
O sistema é acessível através de
endereço Web para dispositivos
móveis.
Sistema deve permitir somente acesso
de
professores
e
técnicos
administrativos
de
Categoria
Arquitetura
Desejável
Segurança
X
Permanente
X
3.4 Organização dos requisitos
3.4.1 Lista de conceitos e operações cadastrais
O quadro 19 lista conceitos e operações cadastrais do sistema.
QUADRO 19 - Lista de conceitos e operações cadastrais
Conceito
Usuário
I
A
E
C
X
Tipo
de
recurso
Data
do
Sistema
Hora
do
Sistema
Data Reserva
X
Observação
Atributos: *Matricula, *Senha, *E-mail,
*Nome;
9ados pré – cadastrados.
Dados pré – cadastrados.
X
Dados gerados automaticamente
F1 (Usuário) F2 (Tipo de
Reserva)
F1 (Usuário)
X
Dados gerados automaticamente
F1 (Usuário)
X
Dados pré – cadastrados.
Hora Reserva
X
Dados pré – cadastrados
Item
X
Dados pré - cadastrados
F1 (Usuário) F2 (Tipo de
recurso) F3 (Data Reserva)
F1 (Usuário)F2 (Tipo de
Recurso) F3 (Data Reserva)
F4 (hora Reserva)
F1 (Usuário)F2 (Tipo de
reserva) F3 (Data Reserva)
F4 (hora Reserva) F5 (Item)
3.4.2 Lista de casos de uso
O quadro 20 lista os casos de uso do sistema.
Referência Cruzada
F1 (Usuário)
44
QUADRO 20 - Lista de casos de uso
Nome
UC 1
Registrar
Agendamento
Atores
Professores
e
técnicos
administrativos
Descrição
O Ator entra no sistema, preenche
sua matrícula e senha e seleciona
os valores de acordo com a sua
necessidade.
Referencia Cruzada
F1 (Usuário) F2 (Tipo de reserva)
F3 (Data Reserva) F4 (hora
Reserva) F5 (Item)
3.4.3 Lista de relatórios
O quadro 21 lista os relatórios que deveram ser gerados pelo sistema.
QUADRO 21 - Lista de relatórios
Nome
R1 Relatório
selecionados.
de
confirmação
dos
campos
Referências Cruzadas
F6 (Relatório)
3.4.4 Expansão dos casos de uso
O quadro 22 representa a expansão do caso de uso “Registrar agendamento”
do sistema.
QUADRO 22 - Caso de uso registrar agendamento
Caso de Uso – Registrar agendamento
Atores – Professores e técnicos administrativos
Interessados – Responsáveis pelo setor de meios e os utilizadores dos recursos.
Pré-condições – Os usuários, Tipos de recurso, data, hora e itens devem estar devidamente registrados no
sistema.
Pós –condições Requisitos correlacionados – F1, F2, F3, F4, F5, F6
Variações Tecnológicas Fluxo Principal:
1. [evento] O professor ou o técnico administrativo informa sua matrícula e senha para acesso ao sistema.
2. [resposta] O sistema retorna uma lista dos tipos de recurso.
3. [evento] O usuário seleciona um dos tipos de recurso.
4. [resposta] O sistema retorna uma lista com as datas.
5. [evento] O usuário seleciona uma das datas.
6. [resposta] O sistema retorna uma lista com os horários.
7. [evento] O usuário seleciona um ou mais horários.
8. [resposta] O sistema retorna uma lista com os itens disponíveis.
9. [evento] O usuário seleciona um item e clica em adicionar.
10. [resposta] O sistema emite um relatório com os dados do usuário e os dados selecionados no agendamento.
11. [evento] O usuário confirma os dados e clica em finalizar.
12. [resposta] O sistema confirma seu agendamento e envia um e-mail para o setor responsável e um para o
requerente, com os dados do agendamento.
13. [evento] O usuário clica em fechar.
Variantes:
1.1. [evento] O professor ou técnico administrativo informa sua matrícula e senha para acesso ao sistema.
1.2. [resposta] O sistema aceita a matrícula e senha e acessa o sistema.
1.3. [resposta] O sistema recusa a matrícula e senha e informa ao usuário o erro ocorrido.
45
10. [resposta] O sistema emite um relatório com os dados do usuário e os dados selecionados no
agendamento.
10.1 [evento] O usuário não confirma os dados e clica em voltar.
10.2 [resposta] O sistema volta à tela inicial do agendamento para selecionar novamente o tipo de
reserva.
13. [resposta] O sistema confirma seu agendamento.
12.1 [evento] O usuário clica em nova consulta.
12.2 [resposta] O sistema volta para a tela inicial de agendamento para selecionar novamente o tipo de
reserva.
Fluxo Alternativo:
8.1 Nenhum item disponível.
8.1.1 Voltar ao campo 4
3.5 Modelo lógico do banco de dados
A figura 5 apresenta o modelo lógico do banco de dados implementado para
o sistema.
FIGURA 5 - Modelo Lógico de banco de dados.
3.6 Conclusão
Este capítulo demostrou como é possível, baseado no Processo Unificado,
obter as informações necessárias para desenvolvimento de um aplicativo, que
demonstre a aplicação dos recursos estudados anteriormente.
A partir desta modelagem e entrevista com os responsáveis pelo setor de
46
meios da Universidade do Planalto Catarinense, observou-se que existe demanda para
utilização do sistema, e o mesmo pode ser aplicado a outras instituições que possuam
um setor responsável pela organização desses itens. Sendo que esta modelagem pode
servir de base para novos estudos, aplicando um sistema de gerenciamento das
solicitações recebidas.
47
4 IMPLEMENTAÇÃO DO ESTUDO DE CASO
Neste capítulo é apresentado o sistema Web móvel, desenvolvido para o
agendamento de recursos, utilizados por professores ou técnicos administrativos de
instituições de ensino de responsabilidade de um único setor, usando como exemplo o
setor de meios da Universidade do Planalto Catarinense. Com a apresentação de
trechos do código fonte, sua estruturação, tecnologias empregadas e ferramentas de
desenvolvimento.
4.1 Ferramentas e tecnologias
No quadro 23 são apresentadas as tecnologias utilizadas para o
desenvolvimento do estudo de caso, entre elas se destaca como parte importante no
estudo dos padrões Web o CSS 2 e o HTML.
QUADRO 23 - Tecnologias de desenvolvimento
Nome
MySQL
JavaScript
CSS 2
PHP
Apache
HTML
Descrição
O MySQL é um sistema de gerenciamento de banco de dados que utiliza a linguagem SQL
como interface (FERRARI, 2007).
É uma linguagem de programação que permite a validação de formulários no lado cliente e
interação com a página (GOODMAN, 2001)
È uma linguagem para definição de estilos de layout (apresentação), que permite a separação
entre o formato e o conteúdo de um documento (ZELDMANN, 2003).
É uma linguagem de programação de computadores interpretada, livre e muito utilizada para
gerar conteúdo dinâmico na Web (ALVAREZ, 2004)
O Apache é um servidor Web extremamente popular, usado principalmente no Linux. A dupla
é bastante popular em servidores de páginas e, segundo muitas estatísticas, é o mais usado em
servidores Web atualmente, superando o IIS/Windows (MARCELO, 2005).
Linguagem de marcação de hipertexto, utilizada para produzir páginas Web (SILVA, 2006).
No quadro 24 são apresentadas as ferramentas e ambientes de
desenvolvimento escolhidos para a implementação do estudo de caso.
48
QUADRO 24 - Ferramentas e ambientes
Nome
Xampp
PhpMyAdmin
Dreamweaver
Fireworks
Descrição
Gerenciador de serviços como PHP, Apache e Mysql, com licença open source.
Ferramenta utilizada para a criação do script das tabelas, com licença open source.
Ambiente de desenvolvimento destinado a conteúdo Web.
Editor de imagens, utilizado para o desenvolvimento de layouts
4.1.1 PHP
Segundo Alvarez (2004), PHP é o acrônico de Hipertext Preprocessor, uma
linguagem de programação do lado do servidor gratuita e sem restrições de plataforma,
rápida e com uma grande biblioteca de funções.
Uma linguagem do lado do servidor, diz respeito aquela que é executada no
servidor Web, antes da pagina ser exibida pelo usuário final, essas execuções dando
acesso a banco de dados ou formando a estrutura do serviço proporcionado, formando
no final uma página em HTML, resultado da execução do PHP, como na figura 6.
FIGURA 6 - Diagrama PHP.
Fonte: ALVAREZ (2004)
Esta linguagem de programação está preparada para realizar muitos tipos de
aplicações Web graças à extensa livraria de funções com a qual está dotada. A livraria
de funções cobre desde cálculos matemáticos complexos até tratamento de conexões
49
de rede.
Algumas das mais importantes capacidades de PHP são: compatibilidade
com as bases de dados mais comuns, como MySQL, mSQL, Oracle, Informix, e
ODBC, por exemplo. Inclui funções para o envio de correio eletrônico, upload de
arquivos, criar dinamicamente no servidor imagens no formato GIF, inclusive
animadas e uma lista interminável de utilidades adicionais.
Para a implementação do estudo de caso a versão usada é a 5.3.8
4.1.2 MySQL
O MySQL é um sistema de gerenciamento de banco de dados, que utiliza a
linguagem SQL como interface, desenvolvido em código aberto, funciona na maioria
dos sistemas operacionais.
No passado (até à versão 3.x), devido a não possuir funcionalidades
consideradas essenciais em muitas áreas, como stored procedures, two-phase commit,
subselects, foreign keys ou integridade referencial, era frequentemente considerado um
sistema mais "leve" e para aplicações menos exigentes (OFICINA DA NET, 2010).
Algumas características:

Portabilidade (suporta praticamente qualquer plataforma atual);

Compatibilidade e módulos de interface com diversas linguagens;

Excelente desempenho e estabilidade;

Pouco exigente quanto a recursos de hardware;

Boa usabilidade;

Suporta controle transacional;

Suporta Triggers;

Suporta Cursors;

Suporta Stored Procedures e Functions;

Replicação facilmente configurável;

Interfaces gráficas.
50
4.1.3 Apache
Apache é um servidor para páginas Web, livre e compatível com HTTP e
estruturado através de módulos, permitindo ao usuário escrever seus próprios módulos
utilizando a API do software.
Nessa implementação do estudo de caso como mostra a figura 7 é utilizado o
servidor Apache 2.0 handler.
FIGURA 7 - Servidor Apache
4.1.4 Fireworks
O Fireworks é um editor de imagens desenvolvido para edição, voltado para
publicações Web, incluindo suporte a maioria dos tipos de arquivos destinados a
documentos Web, como, GIF e PNG (ADOBE, 2011).
É considerada uma boa ferramenta devido a grande quantidade de recursos
para criação de layouts, botões e para compressão de imagens, que por estarem
acessíveis pela Internet devem ter tamanho reduzido.
Durante o processo da implementação, foi escolhido trabalhar com o
Fireworks devido as suas características que condizem com os padrões de
desenvolvimento, principalmente na parte de apresentação, modelando algumas regras
de CSS, facilitando o trabalho do desenvolvedor.
51
4.1.5 Dreamweaver
Ambiente de desenvolvimento Web, com suporte a varias linguagens de
programação, como, PHP, HTML, XHTML, Javascript e CSS, podendo ser utilizado
como editor de código ou ambiente visual.
Ferramenta capaz de interagir com a maioria dos navegadores, devido à
preocupação dos desenvolvedores em seguir os padrões W3C, elemento esse que torna
o Dreamweaver não apenas em um ambiente WYSIWYG, que na maioria das vezes
prejudica a compatibilidade, mas sim em um facilitador para o desenvolvimento
seguindo as normas Web. (ADOBE, 2011).
Dentre alguns ambientes disponíveis para a implementação desse estudo de
caso, o Dreamweaver sem dúvidas foi a ferramenta com as melhores adequações aos
padrões de desenvolvimento, principalmente por ser desenvolvido em conjunto com o
Fireworks, ferramenta escolhida para o desenvolvimento dos elementos de
apresentação.
4.2 Banco de dados
O banco de dados utilizado nessa implementação é o Mysql, administrado
pela ferramenta PHPMyAdmin 3.4.5.
O banco de dados esta estruturado em quatro tabelas distintas: agendamento,
item, tipo e usuário, como apresentado no trecho do código SQL no quadro 25.
1
2
3
4
5
6
7
8
9
10
11
12
QUADRO 25 - Código SQL para criação das tabelas
CREATE TABLE `agendamento` (
`id_agendamento` int(10) NOT NULL,
`tipo_reserva` varchar(100) NOT NULL,
`data` date NOT NULL,
`hora` time NOT NULL,
`data_reserva` date NOT NUL
`hora_reserva` time NOT NULL,
PRIMARY KEY (`id_agendamento`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
CREATE TABLE `item` (
`id_item` int(10) NOT NULL,
`nome` varchar(100) NOT NULL,
52
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
`descricao` varchar(200) NOT NULL,
PRIMARY KEY (`id_item`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
CREATE TABLE `tipo` (
`id_tipo` int(10) NOT NULL,
`nome` varchar(100) NOT NULL,
PRIMARY KEY (`id_tipo`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
CREATE TABLE `usuario` (
`id_usuario` int(10) NOT NULL,
`nome` varchar(100) NOT NULL,
`email` text NOT NULL,
`senha` int(8) NOT NULL,
PRIMARY KEY (`id_usuario`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
4.3 Definição do layout
Está sessão apresenta as telas da interface gráfica do sistema.
4.3.1 Tela de autenticação
Está tela contem os campos para autenticação no sistema, autenticação essa
necessária para a navegação no sistema como mostra a figura 8, nela tem-se dois
campos para o preenchimento, um deles para digitar a matricula pré-cadastrada no
sistema e o outro campo para a senha, logo abaixo o botão para entrar no sistema
efetuando a autenticação.
FIGURA 8 -
Tela de autenticação
53
Parte do código utilizado na tela de autenticação no quadro 26, dando um
exemplo de algumas características da estrutura do documento, como, na linha 11
aonde é criado o formulário que estarão os dados de matricula e senha, redirecionando
para o documento que possui os dados do usuário.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
QUADRO 26 - Código para autenticação
<div id="main">
<img src="images/index_r1_c1.jpg" id="index_r1_c1" alt="" />
<div class="clearFloat"></div>
<a href="adicionar.htm">
<?
include("./config.php");
if(!empty($_GET['erro'])){
echo "<font color=red><b>$erro</b></font><BR>";
}
?>
<form method="POST" action="<?=$url;?>/login.php">
<p>Mátricula</p>
<p>
<input type="text" size="20" name="l">
<BR>
Senha</p>
<p>
<input type="password" size="20" name="s"><BR><BR>
</form>
<img src="images/index_r3_c2.jpg" id="index_r3_c2" alt="" /></a>
<div class="clearFloat"></div>
<img src="images/index_r5_c1.jpg" id="index_r5_c1" alt="" />
<div class="clearFloat"></div>
4.3.2 Tela de agendamento
Está tela contém os campos para executar o agendamento dos recursos que
serão utilizados pelo técnico administrativo ou professor, como exemplos na figura 9
têm quatro campos, o primeiro campo em forma de lista onde estão pré – cadastrados
os tipos de recursos disponíveis, como equipamento, laboratório ou sala, logo abaixo
um novo campo de lista com as datas disponíveis para o agendamento, seguido do
campo com os horários a serem escolhidos pelo usuário, já no campo seguinte
aparecem os itens disponíveis naquele horário e data, por fim o botão adicionar que
redireciona o usuário para a página seguinte.
54
FIGURA 9 -
Tela de agendamento
Parte do código utilizado na tela de agendamento de recursos visualizados no
quadro 27, onde podemos ver os itens que compõem o formulário de seleção do
sistema, como, tipo, data, hora e item, todos do tipo select.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
QUADRO 27 - Código da tela de agendamento
<form id="form1" name="form1" method="post" action="">
<p>Tipo de recurso</p>
<p>
<label for="tipo"></label>
<select name="tipo" id="tipo">
</select>
</p>
<p>Data</p>
<p>
<label for="data"></label>
<select name="data" id="data">
</select>
</p>
<p>Hora</p>
<p>
<label for="hora"></label>
<select name="hora" id="hora">
</select>
</p>
<p>Item</p>
<p>
<label for="item"></label>
<select name="item" id="item">
</select>
</p>
55
26
</form>
27
<p> </p>
28
<p><a href="relatorio.htm"><img
29 src="images/adicionar_r3_c2.jpg" id="adicionar_r3_c2" alt=""
30 /></a></p>
4.3.3 Tela de relatório
Está terceira tela contém os campos para o usuário verificar as informações
escolhidas na tela anterior, onde estão às informações como data e hora da consulta
feita ao sistema pelo usuário e os dados do agendamento: tipo de recurso, data, hora e
o item escolhido pelo técnico administrativo ou professor da instituição, como
apresentado na figura 10.
FIGURA 10 - Tela de relatório
Na tela, após visualizar os dados de sua consulta o usuário pode clicar no
botão voltar para uma possível correção em algum campo incorreto, ou pode optar
pelo botão finalizar, gravando o agendamento no sistema, que o envia por e-mail para
o setor responsável.
No quadro 28 é mostrado parte do código do relatório, esse gerado através
dos dados selecionados na página anterior, e como vemos na linha 13 aonde temos a
referencia de uma imagem que esta disponibilizada como botão, tendo todas as suas
56
características como posição e tamanho definidas por um CSS externo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
QUADRO 28 - Código da tela de relatório
div id="main">
<img src="images/index_r1_c1.jpg" id="relatorio_r1_c1"
alt="" />
<div class="clearFloat"></div>
<form id="form1" name="form1" method="post" action="">
<label for="relatorio"></label>
<textarea name="relatorio" id="relatorio" cols="45"
rows="5"></textarea>
</form>
<p><a href="adicionar.htm"><img
src="images/relatorio_r3_c2.png" id="relatorio_r3_c2" alt=""
/></a>
<a href="finalizar.htm"><img src="images/relatorio_r3_c4.png"
id="relatorio_r3_c4" alt="" /></a></p>
4.3.4 Tela Final
Está tela, aparece para o usuário após ele finalizar o agendamento na tela de
relatório, nela contém uma mensagem avisando que o agendamento foi realizado,
permitindo iniciar um novo agendamento no botão novo, ou sair do sistema voltando
a tela de autenticação do início, como na figura 11.
FIGURA 11 - Tela de finalização
57
No quadro 29 é apresentado parte do código da tela de finalização, parte
simples demonstrando a facilidade de entendimento do código gerado pela utilização
de padrões, simplicidade essa demonstrada na linha 4 aonde uma tag <div> faz o
controle da apresentação do documento através do CSS.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
QUADRO 29 - Código da tela de finalização
<div id="main">
<img src="images/index_r1_c1.jpg" id="finalizar_r1_c1"
alt="" />
<div class="clearFloat"></div>
<p> </p>
Agendamento Realizado!
<p><a href="adicionar.htm">
</a></p>
<p><a href="adicionar.htm"><img src="images/finalizar_r3_c2.png"
id="finalizar_r3_c2" alt="" /></a>
<a href="index.htm"><img src="images/finalizar_r3_c4.png"
id="finalizar_r3_c4" alt="" /></a></p>
<p> </p>
<p> </p>
<p> </p>
<p>  </p>
<div class="clearFloat"></div>
<img src="images/index_r5_c1.jpg" id="finalizar_r5_c1"
alt="" />
<div class="clearFloat"></div>
4.3.5 Códigos de apresentação
No quadro 30 tem-se parte do código do elemento CSS do sistema Web,
responsável pela aparência das telas, como exemplo temos a linha 3 com as
características relevantes a todo o corpo do documento Web, como, cor de fundo,
tamanho de fonte e a margem.
Já na linha 19 em sequencia temos as características de apresentação dos
demais itens criados dentro de cada documento, como posição de botões, cores de
fundo e posições de cabeçalho e rodapé.
QUADRO 30 - Código CSS das telas
1
2
3
@charset "utf-8";
body {
58
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
background-color: #fff;
font-size: 62.5%;
margin: 0;
padding: 0;
}
body * {
font-size: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
p {
margin-bottom: 1.1em;
margin-top: 0;
}
#main p.lastNode {
margin-bottom: 0;
}
a:link img, a:visited img {
border: none;
}
div.clearFloat {
clear: both;
font-size: 0;
height: 0;
line-height: 0px;
4.3.6 Teste layout em dispositivos móveis
Os testes de layout do sistema, para observar o comportamento em pequenas
telas como a de smartphones, foram realizadas através do emulador do sistema
Android do Google, distribuído para desenvolvedores de aplicativos para dispositivos
móveis e instalado através do SDK, kit de desenvolvimento que inclui utilitários,
bibliotecas e documentação para o desenvolvedor da plataforma ter uma maior
integração entre sua aplicação e o ambiente que ela ira rodar.
O sistema foi hospedado pelo Apache e acessado foi através do navegador
nativo do Android como demonstrado na figura 12.
59
FIGURA 12 - Emulador Android
Após os testes no emulador, passamos aos testes em um smarthphone, o
modelo escolhido foi o Motorola QUENCH, como sistema Android 2.2.1, utilizando o
navegador padrão, aonde foram percebidos com maior facilidade a adaptação do
sistema na questão de resolução da tela, a utilização de pouca cores e a simplicidade de
utilização do sistema. Como demonstra as figuras 13 a 15.
FIGURA 13 -
Smartphone, tela de autenticação.
60
FIGURA 14 - Smartphone, seleção de horário.
FIGURA 15 - Smartphone, agendamento.
O sistema não apresentou nenhum problema com resolução e todos os
componentes funcionaram normalmente.
Em seguida as páginas do sistema foram submetidas ao Markup Validation
Service, sistema disponibilizado pelo W3C para conferir se o sistema esta totalmente
livre de erros, provenientes da falta de utilização dos padrões, em todas as paginas
foram verificados os elementos de estrutura e no arquivo CSS, foram verificados os
61
elementos de apresentação, os resultados obtidos foram bons, como na figura 16.
FIGURA 16 - Resultado da validação
4.4 Conclusão
Ao fim desde capítulo, temos descrito as tecnologias utilizadas no
desenvolvimento do sistema, como, MYsql, JavaScript, CSS 2, PHP, Dreamweaver,
Fireworks, Apache e HTML, estas que possibilitaram o desenvolvimento
e a
aplicação do sistema, permitindo a hospedagem e gerenciamento, criação e
administração do Banco de dados e o desenvolvimento da estrutura, apresentação e
comportamento dos documentos.
Tendo as telas do sistema hospedadas localmente, como: autenticação,
agendamento, relatório e finalização, para estarem disponíveis para a realização dos
testes no emulador do SDK Android, no smathphone e no validador de código do
W3C, possibilitando os resultados obtidos e demonstrados anteriormente.
Este foi o capítulo mais complexo no desenvolvimento do trabalho, por
apresentar os passos da implementação, onde foram utilizados códigos e desenvolvido
os layouts de apresentação, demonstrando como é possível desenvolver um sistema
Web para dispositivos móveis respeitando os padrões W3C, e tornando a utilização
desse sistema muito mais atrativa para o usuário e trazendo uma melhor experiência de
manutenção para o desenvolvedor.
62
5 CONSIDERAÇÕES FINAIS
Com tamanho crescimento e expansão da Web móvel, não estabelecer um
padrão de desenvolvimento seria muito difícil para o controle da demanda de sistemas.
Assim a utilização dos padrões não se torna apenas uma recomendação, mas sim uma
necessidade.
Cada vez mais, desenvolver sistemas Web móveis compatíveis, acessíveis,
com menor tempo de carregamento, com uniformidade, simplicidade e viabilidade em
longo prazo, possibilita uma melhor experiência tanto para o usuário quanto para os
desenvolvedores.
O levantamento bibliográfico feito através da pesquisa de padrões de
desenvolvimento Web foi de grande valia, proporcionando a base teórica desse
trabalho, associando o material disponível para desenvolvimento Web convencional, e
as recomendações aplicadas a dispositivos móveis, trazendo algumas diferenças
quanto a aplicação das mesmas e possibilitando a implementação do estudo de caso.
Algumas dificuldades foram encontradas na pesquisa, como a falta de
recomendações de padrões diretamente para dispositivos móveis, sendo que a maioria
dos documentos do W3C traz adaptações dessas normas, e apresentando sua
aplicabilidade nessas plataformas móveis.
Dificuldades também foram encontradas na implementação em relação aos
navegadores de dispositivos móveis, alguns deles ainda não estão adequados a
utilização dos padrões, trazendo uma série de dificuldades ao desenvolvedor chegar
numa adequação correta do código, como exemplo temos navegadores que renderizam
os documentos em seus servidores antes de enviar para o dispositivo móvel,
63
possibilitando que a pequena largura de banda das conexões móveis possam suportar
paginas com conteúdo pesado, mecanismo esses usados como meio de segurança para
a grande quantidade de sistemas que não se enquadram nos padrões desenvolvimento
Web.
De maneira geral, os objetivos do trabalho foram atingidos. Foi desenvolvido
uma pesquisa para apresentar os padrões W3C de desenvolvimento Web Aplicados
aos dispositivos móveis, através da documentação disponível pelo próprio órgão e
também por meio de sites especializados nessas aplicações. Logo em seguida foi
definido, modelado e implementado um estudo de caso aplicando esses padrões,
através de linguagens como CSS, HTML e PHP levando em consideração os recursos
tecnológicos disponíveis.
A contribuição desse trabalho, de forma geral, encontra-se na sustentação de
que é possível de forma simplificada e eficiente, desenvolver um sistema Web para
dispositivos móveis, utilizando os padrões W3C. Deste modo, fica disponível um
estudo detalhado e de fácil compreensão para ser utilizado por desenvolvedores.
Abrindo um precedente no estudo de caso, para uma nova pesquisa de um sistema
Web.
Trazendo como sugestão para um trabalho futuro, a idealização desse
sistema para Web convencional e de um sistema de gerenciamento para as duas
modalidades de agendamento, podendo ainda ser aplicado ao setor responsável pelos
recursos didáticos da instituição.
REFERÊNCIAS BIBLIOGRÁFICAS
ADOBE, Adobe Dreamweaver. 2011. Disponível em:
<http://www.adobe.com/br/products/dreamweaver.html>. Acesso em 31 de outubro de
2011.
ADOBE, Adobe Fireworks. 2011. Disponível em:
<http://www.adobe.com/br/products/fireworks.html>. Acesso em 14 de dezembro de
2011.
ALVAREZ, Miguel A. O que é PHP. Disponível em:
< http://www.criarweb.com/artigos/202.php >. Acesso em 30 de setembro de 2011.
ANDRADE, Walmar. Web Standards: do começo e de leve. Disponível em:
<http://fatorw.com/2005/12/22/Web-standards-do-comeco-e-de-leve/>. Acesso em 10
de Novembro de 2010.
ARIMA, Katia. Smartphone para todos. Revista Info Exame, São Paulo, N. 293, P.
22-28, Julho de 2010.
AWAMURA, Kem. As vantagens do Web Standards para seus visitantes, clientes
e você!. Disponível em: <http://www.geocities.com/ken_awamura/wsbenefits/
index.htm>. Acesso em 12 de Novembro de 2010.
BERNERS-LEE, Tim. Weaving the Web: the original design and ultimate destiny
of the World Wide Web by its inventor. 1.ed. San Francisco, CA. Harper San
Francisco. 1999.
EIS, Diego. Processos e a adoção de padrões: Um pouco sobre o processo de
aprovação e adoção de recomendações do W3C. Disponível em:
<http://www.tableless.com.br/processos-adocao-padroes>. Acesso em 20 de Agosto
de 2010.
FERRARI, F. A. Crie banco de dados em MySQL. Digerati Books, 2007. 128p.
FRANCIS, Mark N. A história da Internet e da Web, e a evolução dos padrões
Web. Disponível em: <http://danillonunes.net/curriculo-dos-padroes-Web/a-historiada-internet-e-da-Web-e-a-evolucao-dos-padroes-Web/> Acesso em 12 de Dezembro
de 2010.
GOODMAN, D. JavaScript: A bíblia. Campus, 2001. 909 p.
LEAL, Renata. A vida em 3G. Revista Info Exame, São Paulo, N. 290, P. 30 - 37,
Abril de 2010.
MARCELO, A. Apache: Configurando o servidor Web para Linux. Brasport,
2005. 109 p.
MEYER, A Eric. Cascading Style Sheets 2.0 Programmer's Reference. 1.ed.
Osborne/McGraw-Hill. 2001.
NAKAZATO, Karen M.; BARBOSA, Rafael S.; KATSURAGI, Raphael R.; MARKS,
Renan; BRANCO, Rodrigo G. De; DUARTE, Thales F. Multimídias Móveis. Campo
Grande: UFMS, 2009.
OFICINA DA NET. MySQL o que é. Jan. 2010. Disponível em:
<http://www.oficinadanet.com.br/artigo/2227/mysql_-_o_que_e>. Acesso em 31de
outubro de 2011.
PEREIRA, Henrique C. Tableless vs Web Standards. 2005. Disponível em:
<http://www.revolucao.etc.br/archives/tableless-vs-Web-standards/>. Acesso em 23 de
Novembro de 2010.
REIS, Renata T. Desenvolvimento Web com o uso de padrões: Tecnologias e
Tendências. Juiz de Fora: Universidade Federal de Juiz de Fora, 2007.
SILVA, Mauricio Maujor S. Estratégias XHTML para dispositivos móveis.
Disponível em:< http://www.maujor.com/tutorial/bestxhtmlmobile.php>. Acesso em
12 de Janeiro de 2011.
W3C. Dicas rápidas para construir websites acessíveis. Jan de 2011. Disponível em:
<http://www.w3.org/WAI/quicktips/qt.br.htm>. Acesso em 20 de fevereiro de 2011.
W3C. XHTML1.0 The Extensible HyperText Markup Language. Ago de 2002.
Disponível em: <http://www.w3.org/TR/2002/REC-xhtml1-20020801/>. Acesso em
20 de fevereiro 2011.
W3C-BR. Padrões. Disponível em: <http://www.w3c.br/Padroes>. Jan de 2011.
Acesso em 25 de agosto de 2011.
W3C-BR. Web móvel fica mais atraente com padrões W3C: As diretrizes para
projeto de Web móvel focam os desafios da Web para quem está em movimento. Jul
de 2008. Disponível em: <http://www.w3c.br/2008/release-29-07-2008.htm>. Acesso
em 20 de Agosto de 2010.
WYKE, C. Stylin' with CSS: A Designer's Guide. 2.ed. Chicago. New
RidersPress.2005.
ZELDMAN, J. Projetando Web Sites Compatíveis. Rio de Janeiro: Elsevier, 2003.
APÊNDICES
APÊNDICE A - ARTIGO ...........................................................................................67
APÊNDICE A - ARTIGO
Aplicação dos Padrões de Desenvolvimento Web em
Dispositivos Móveis
Flávio Roberto Deucher1, Sabrina Bet Koerich1
1
Departamento de Ciências Exatas e Tecnológicas – Curso de Sistemas de Informação
Universidade do Planalto Catarinense (UNIPLAC)
Caixa Postal 525 – 88.509-900 – Lages – SC
[email protected], [email protected]
Resumo. O presente estudo buscou estudar a correta aplicação dos padrões de
desenvolvimento Web voltado para dispositivos móveis, demonstrando as normas
estabelecidas pelo órgão regulamentador, suas aplicações e tecnologias. Tendo
como base para o estudo o crescimento do uso de dispositivos móveis para acesso a
conteúdo Web através de navegadores, como, smartphones e tablets. Crescimento
esse, que traz de forma desordenada uma grande procura por sistemas Web, que na
grande maioria das vezes não se enquadram nas normas de desenvolvimento, mas
que necessitam de empenho dos fabricantes e desenvolvedores para que seu uso seja
comum em aplicações móveis. Tendo como estudo de caso o desenvolvimento de
uma aplicação Web para dispositivos móveis.
Abstract. The present study was to study the correct application of standards for
Web development aimed for mobile devices, demonstrating the standards set by the
regulator, its applications and technologies. Based on the study, the growing of the
use of mobile devices to access Web content through browsers, such as smartphones
and tablets. This growth brings in a disorderly fashion a great demand for Web
systems, which in most cases do not fit the standards of development, but need
commitment from manufacturers and developers so that its use is common in mobile
applications. Taking as a case study to develop a Web application for mobile
devices.
1. Introdução
O objetivo desse artigo é projetar um sistema de agendamento de recursos didáticos
(projetores, laboratórios, auditórios, etc.) de uma instituição de ensino superior, através do
estudo do desenvolvimento Web através de seus padrões, voltados ao uso em dispositivos
móveis, padrões esses regulamentados pelo W3C.
Segundo Arima (2010) uma área que cresce a cada dia com o aumento das vendas de
dispositivos móveis com recursos para navegação Web como smatphones e tablets, e também
com o crescimento das tecnologias de conexão móveis como as redes 3G que já alcançam
64,6% da população brasileira e também o crescimento dos pontos de acesso Wi-fi, isso
aliado à queda dos preços desse tipo de dispositivo.
Tudo isso acarretando em uma maior demanda de aplicativos Web e sites compatíveis
para esses dispositivos. No entanto, a maioria dos aplicativos Web não segue um padrão para
serem utilizados tanto em computadores como em dispositivos móveis, o que vem a ser a
maior dificuldade dos desenvolvedores, não só nos aspectos de compatibilidade entre as
diferenças de hardware e suas limitações, mas também na diferença da qualidade da Internet
disponível para cada tipo de dispositivo. Tudo isso mostrando que muito se tem a estudar
sobre os padrões já disponíveis para desenvolvimento de aplicações para essas plataformas.
Algum tempo atrás existiam poucos aparelhos com recursos tecnológicos suficientes
para uma padronização de desenvolvimento, sendo que alguns dispositivos hoje são base para
alguns desenvolvedores que começaram a desenvolver exclusivamente para suas plataformas,
privando usuários de outros dispositivos de acesso a esse conteúdo com um mínimo de
usabilidade.
Sendo uma possível solução para esse problema a utilização dos padrões do W3C
aplicados a dispositivos móveis sem correr o risco do sistema não funcionar na maioria das
plataformas móveis.
O W3C recomenda a utilização de alguns métodos e linguagens que adotados pelo
mercado viraram referencias desses padrões, contando com a aprovação dos desenvolvedores
de navegadores e ambientes de programação, para que um projeto desenvolvido dentro desses
padrões funcione perfeitamente em qualquer plataforma.
2. Origem dos padrões de desenvolvimento Web
No inicio dos anos 90 com o surgimento da Web, Tim Berners-Lee fez com que a Internet
deixa-se de ser usada apenas por universidades e o exercito para troca de arquivos, mas que
também fosse utilizada como fonte de informação, desenvolvendo uma linguagem (HTML) e
uma plataforma, onde fosse possível hospedar documentos para serem visualizados através de
endereços, sem precisar necessariamente tê-los no computador (FRANCIS, 2010).
Junto com isso surgiram os navegadores, e juntos com os navegadores vieram os
problemas de compatibilidade. Já naquela época cada fabricante desenvolvia seu navegador
sem seguir nenhum tipo de padronização, forçando os desenvolvedores de sites a escolherem
pra qual navegador iria desenvolver, trazendo com isso os principais problemas da época a
falta de acessibilidade e usabilidade.
Para solucionar esse problema em 1994, o criador da Web Tim Berners-Lee fundou a
Word Wide Web Consortium (W3C), fundação essa que visava à padronização de todos os
protocolos e tecnologias usadas para o desenvolvimento Web, proporcionando que o conteúdo
possa ser acessado largamente por o máximo de usuários nas mais variadas plataformas de
navegação.
No entanto até os dias de hoje o W3C não obriga ninguém a seguir suas
recomendações, mas como nos dias de hoje a maioria dos navegadores e ambientes de
programação são complacentes com essas recomendações, os navegadores que não seguirem
essas regras, não terão uma aceitação muito grande dos desenvolvedores, mas isso pouco se
aplicaria aos usuários finais, pois a maioria deles não tem conhecimento sobre as
recomendações da W3C.
Hoje os desenvolvedores podem ter uma maior facilidade no desenvolvimento de
sistemas Web, pois as diferenças entre os grandes navegadores se da apenas nas questões de
ferramentas e aparência e não na interpretação do conteúdo.
Sendo assim os padrões são praticamente obrigatórios na comunidade de
desenvolvedores Web, mas ainda existem sites desenvolvidos de forma amadora que não
utilizam essas recomendações, e acabam trazendo transtornos aos usuários.
3. Padrões Web
Segundo Reis (2007) os padrões Web são um conjunto de normas, diretrizes, recomendações,
notas, artigos, tutoriais e afins de caráter técnico, desenvolvido pelo W3C, para auxiliar
fabricantes e desenvolvedores para o uso de praticas que possibilitem uma Web com maior
acessibilidade, independente de navegador ou dispositivo.
Em 1995 uma das primeiras recomendações do W3C foi dividir um documento em
outros 3 elementos, percebeu-se nessa época que o HTML incorporava muitos elementos,
fazendo com que a complexidade de desenvolvimento fosse ainda maior e deixando o site
muito pesado. Assim o documento foi dividido em três componentes que formavam um único
conjunto: estrutura, apresentação e comportamento como na figura 1.
Figura 1. Conjunto de elementos
(Fonte: Zeldman, 2003)
Segundo Wyke (2005) utilizar padrões para Web é extremamente vantajoso, pois
proporciona um maior controle sobre a página. Quando é dito que uma página é compatível
com os padrões, significa que o documento consiste de HTML ou XHTML válido, utiliza
CSS para leiaute, é bem-estruturado e semanticamente correto. Esses fatores podem garantir
que o site seja acessado por qualquer dispositivo, seja ele móvel, tátil, desktop etc.
Dessa forma sites ou sistemas Web desenvolvidos seguindo os padrões, custam
menos, funcionam melhor e são acessíveis a diversos tipos de navegadores e dispositivos
existentes no mercado hoje e amanha.
A utilização dos padrões nos trazem algumas vantagens como, uniformidade,
simplicidade, acessibilidade, separação entre estrutura e apresentação, viabilidade a longo
prazo e usabilidade.
4. Desenvolvimento Web para dispositivos móveis
Em toda discussão sobre padrões Web, o fator com maior relevância é a importância da
separação entre apresentação, estrutura e comportamento, tornando assim o código limpo e
correto, e no desenvolvimento móvel contem a mesma relevância.
Englobando partes principais dos documentos como semântica e os elementos,
também utilizando uma linguem de marcação como HTML ou XHTML, onde é feito a
introdução dos dados e textos formatados de acordo com a necessidade do desenvolvedor,
como texto, titulo, parágrafos, listas e objetos como, arquivos, imagens, vídeos, animações e
áudio.
Segundo Reis (2007), desenvolver seguindo os padrões significa utilizar a Web de
forma mais acessível, e alguns elementos devem ser utilizados como:

Transitional: Opção para manter unidos elementos de apresentação e estrutura.

Strict: elemento que exclui atributos de apresentação incorporados a estrutura.

Meta-tags: Descreve o conteúdo da pagina para buscadores.

CSS Inline: Elemento individual para declaração de estilo.

CSS Incorporado: Declarações de estilo incluídas no cabeçalho da página.

CSS Externo: Declarações de estilo em um arquivo externo.
Projetar documentos para telas em tamanho normal utilizando os padrões torna o
serviço mais pratico e organizado, além disso, existem algumas diferenças que devem ser
respeitadas, como transferência de dados, velocidade de processamento e movimentação do
usuário. Nesse momento que algumas diferenças na aplicação para dispositivos móveis devem
ser respeitados, como:

Navegadores: Nem todos dão suporte ao uso dos padrões.

Vertical e Horizontal: Dispositivos móveis normalmente tem conteúdo na vertical.

Tamanho da Tela: Páginas em resolução ideal, cuidado com os arquivos CSS, não
utilizar muitas imagens, evitar telas de entrada, utilizar poucas cores e conteúdo
reduzido ao mínimo possível.

Navegação simples: fácil acesso ao conteúdo do documento e a menus e não utilizar
mecanismos de busca no topo da página.
5. Modelagem
Aplicando os padrões de desenvolvimento Web, foi modelado um sistema de agendamento de
recursos (salas, equipamentos, laboratórios) de uma instituição de ensino. Para isso foram
utilizados artefatos como: levantamento de requisitos sua organização, listas de componentes
e modelo logico do banco de dados.
Foi proposto um sistema Web para dispositivos móveis, que permita que um usuário précadastrado, como, professores ou técnicos administrativos da instituição executem o
agendamento de todos os recursos didáticos disponíveis através do setor responsável, a partir
de qualquer lugar que provenha acesso a uma rede dados, móvel ou Wi-fi, agilizando o
processo para os usuários.
Os recursos são organizados por tipo, sendo eles: laboratórios, sala ou equipamentos,
todos eles pré-cadastrados no sistema. Em seguida, a partir de uma lista o usuário seleciona a
data e a hora para a utilização do recurso e posteriormente o sistema apresenta uma lista com
os itens a serem agendados.
Após confirmar os dados, o usuário pode finalizar a consulta e optar por fazer novo
agendamento ou sair da aplicação, concluindo o sistema envia um e-mail para o setor
responsável bem como ao usuário que solicitou a reserva.
Na figura 2 temos a estrutura logica do banco de dados do sistema.
Figura 2. Modelo lógico do banco de dados
6. Implementação
Para o emprego dos padrões de desenvolvimento, foi desenvolvido o sistema de agendamento
de recursos, utilizados por professores ou técnicos administrativos de instituições de ensino.
6.1. Tecnologias
Para o desenvolvimento foram necessárias a utilização de algumas ferramentas, tais como:

MySQL: Sistema para gerenciamento de banco de dados, que utiliza a linguagem
SQL.

CSS2: Linguagem para definição de estilos na apresentação dos documentos Web.

PHP: Linguagem de programação para gerar conteúdo dinâmico.

Apache: Servidor Web de código livre.

HTML: Linguagem de marcação, responsável pela estrutura da página Web.

Xampp: Gerenciador de serviços como PHP, Apache e MySQL.

PHPmyAdmin: Ferramenta utilizada como administrador das tabelas.
6.2. Layout
A definição do layout da aplicação Web segue os requisitos normatizados pelo W3C, como
cuidados com o tamanho da tela, poucas cores, utilização de CSS, entre outras.
A primeira tela contem os campos de autenticação do sistema como, matricula e senha
seguidos do botão entrar, onde o usuário pré-cadastrado autentica seus dados e acessa o
sistema.
Logo em seguida, após efetuar a autenticação o usuário é direcionado a tela do
agendamento aonde ele escolhe o tipo do recurso a ser reservada, data, hora e por ultimo o
sistema apresenta uma lista com os itens a serem reservados, logo em seguida ele clica em
adicionar e o sistema passa para a tela de relatório.
Na terceira tela é apresentado os dados que foram selecionados anteriormente na tela
do agendamento, após conferir os dados o usuário pode voltar e corrigir os campos que achar
necessário, ou pode clicar no botão finalizar, dessa forma registrando a consulta. Para
confirmar o agendamento o sistema envia um e-mail para o setor responsável por esses
recursos e envia também um e-mail para o requerente do agendamento.
Na ultima etapa temos a tela final, como uma mensagem avisando que o agendamento
foi realizado e dois botões podendo o usuário escolher por fazer uma nova consulta, voltando
a página de agendamento ou sair do sistema voltando para a página de autenticação.
6.3. Entrada de dados
A entrada de dados consiste na escolha da metodologia para os tipos de recursos, datas, horas
e os itens disponíveis pela instituição, nesse modelo temos dados pré-cadastrados no sistema
que não podem ser alterados, porque não há um modulo administrador, eles foram
adicionados ao banco de dados com a seguinte estrutura:

Tipos de recurso: Laboratório, Equipamento e Sala (salas de projeção, salas de aula ou
auditórios).

Datas: O sistema mostra datas dos próximos 15 dias.

Horas: O sistema apresenta um banco de horas com a mesma duração das aulas.

Itens: Cada tipo de recurso possui seus itens como, por exemplo: Equipamento
(Projetores, som, telão).
6.4. Exemplos de código
Como o sistema foi desenvolvido para apresentar o uso correto dos padrões de
desenvolvimento Web, segue os quadros 1 e 2 com exemplos de elementos recomendados
pelo W3C.
Quadro 1. Exemplo de código da estrutura
1
2
3
<title>Agende</title>
<link rel="stylesheet" type="text/css" href="./index.css"
media="all" />
4
5
6
7
8
9
10
11
12
13
</head>
<body>
<div id="main">
<img src="images/index_r1_c1.jpg" id="index_r1_c1" alt=""
/>
<div class="clearFloat"></div>
<form id="form1" name="form1" method="post" action="">
<p align="left"> <strong>Matricula</strong><br />
Quadro 2. Exemplo de código CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
index_r1_c1 {
margin-left: 0px;
margin-top: 0px;
display: inline;
float: left;
height: 85px;
margin-bottom: 0;
width: 350px;
}
#index_r3_c2 {
margin-left: 83px;
margin-top: 32px;
display: inline;
float: left;
height: 36px;
margin-bottom: 0;
width: 109px;
6.5. Resultados
Nas figuras 3 a 5 são apresentadas algumas das telas do sistema final.
Figura 3. Tela inicial para autenticação no sistema
Figura 4. Tela de agendamento dos recursos
Figura 5. Tela de relatório para confirmação dos dados e finalização
7. Conclusão
É importante salientar que o sistema é de elevado potencial para uma aplicação real, onde esse
é somente o modulo cliente, aplicado ao uso em dispositivos móveis.
O sistema demonstra a importância do uso dos padrões de desenvolvimento tanto no
modelo convencional para desktops e notebooks, como nas aplicações voltadas a dispositivos
móveis devido a grande demanda existente no mercado atual. Também demonstrando que de
forma simples e eficiente é possível desenvolver sistemas Web, se livrando de uma série de
problemas identificados no modelo tradicional.
Referências
ARIMA, Katia. Smartphone para todos. Revista Info Exame, São Paulo, N. 293, P. 22-28,
Julho de 2010.
FRANCIS, Mark N. A história da Internet e da Web, e a evolução dos padrões Web.
Disponível em: <http://danillonunes.net/curriculo-dos-padroes-Web/a-historia-da-internete-da-Web-e-a-evolucao-dos-padroes-Web/> Acesso em 12 de Dezembro de 2010.
REIS, Renata T. Desenvolvimento Web com o uso de padrões: Tecnologias e Tendências.
Juiz de Fora: Universidade Federal de Juiz de Fora, 2007.
WYKE, C. Stylin' with CSS: A Designer's Guide. 2.ed. Chicago. New RidersPress.2005.
ZELDMAN, J. Projetando Web Sites Compatíveis. Rio de Janeiro: Elsevier, 2003.