TCC Leonildo Wagner - Reestruturação de Website Utilizando Padrões W3C 29-03-2012

5/16/2018 TCC Leonildo Wagner - Reestrutura o de Website Utilizando Padr es W3C 29-03-2...

http://slidepdf.com/reader/full/tcc-leonildo-wagner-reestruturacao-de-website-utilizando-padroe

FACULDADE PITÁGORAS DE DIVINÓPOLISLEONILDO WAGNER DE OLIVEIRA DIAS GONÇALVES

REESTRURAÇÃO DE WEBSITE UTILIZANDO PADRÕES W3C

DIVINÓPOLIS2012



LEONILDO WAGNER DE OLIVEIRA DIAS GONÇALVES


Monografia apresentada àFaculdade Pitágoras de Divinópolis,como requisito parcial para obtençãodo grau de bacharel em Sistemas deInformação.

Orientador: Prof. Ygor Colen Morato

DIVINÓPOLIS

2012



LEONILDO WAGNER DE OLIVEIRA DIAS GONÇALVES


Trabalho de Conclusão de Curso, aprovado como requisito parcial paraobtenção do grau Bacharel em Sistemas de Informação no Curso deSistemas de Informação da Faculdade Pitágoras de Divinópolis.

Habilitação: bacharel em Sistemas de Informação

Data de Aprovação

______/______/______

Banca Examinadora:

_____________________________________ Prof. Ygor Colen MoratoOrientador – Faculdade Pitágoras de Divinópolis

_____________________________________ Prof. Michelle de Castro Meira, Psicóloga Especialista em Docência doEnsino Superior.Avaliador 01 - Faculdade Pitágoras de Divinópolis

_____________________________________ Prof. Roberto César Batista FreitasAvaliador 02 - Faculdade Pitágoras de Divinópolis



“ O único lugar aonde o sucesso vem antes do trabalho é no

dicionário.” (Albert Einstein).



RESUMO

Este projeto consiste na reestruturação de um website, com a aplicação dos

padrões produzidos pelo World Wide Web Consortium (W3C), destinados a

orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que

possibilitem a criação de uma Web acessível a todos, independentemente dos

dispositivos usados ou de suas necessidades especiais. O site escolhido para

ser reestruturado pertence ao Professor Alexandre Dezem Bertozzi,

anteriormente construído pelo método tradicional, cuja estrutura e codificaçãonão seguiam diretrizes nem padrões voltados para usabilidade. O novo site,

desenvolvido para substituir a versão anterior, possui uma interface leve,

desenvolvida em HTML, CSS, e Javascript, com o processamento

desenvolvido em linguagem PHP utilizando AJAX e Tableless. Desta forma, o

presente trabalho possui como objetivo principal demonstrar as vantagens e

razões práticas para que desenvolvedores estejam engajados na utilização

destas normas, economizando tempo, dinheiro e proporcionando uma melhor

experiência para o usuário. Após o termino do projeto foram constatados diversos

benefícios como portabilidade, melhor organização e distribuição do conteúdo e

carregamento facilitado.

PALAVRAS-CHAVE: Padrões Web. Web Standards. W3C. Acessibilidade.

Interoperabilidade. Navegadores.



ABSTRACT

This project involves the restructuring of a website with the application of

standards produced by the World Wide Web Consortium (W3C), to guide

manufacturers, developers and designers to use practices that allow the

creation of a Web accessible to all, regardless of devices used or special

needs. The site chosen to be restructured belongs to Professor Alexandre

Decem Bertozzi, previously constructed by the traditional method, the structure

and did not follow coding guidelines or standards aimed at usability. The new

site, designed to replace the previous version, has a lightweight interface

developed in HTML, CSS, and Javascript, with the process developed in PHP

using AJAX and Tableless. Thus, the present work has as main objective to

demonstrate the advantages and practical reasons why developers are

engaged in using these standards, saving time, money and providing a betteruser experience. Upon completion of the project were recorded many benefits

such as portability, better organization and distribution of content and loading

easier.

PALAVRAS-CHAVE: Web Standards. W3C. Acessibility. Interoperability.

Browsers.



LISTA DE FIGURAS

Figura 1 - Estrutura do Código HTML. Fonte: Autor da pesquisa.................... 15Figura 2 - Exemplo de estrutura de um Código XML. Fonte: Autor da pesquisa.......................................................................................................................... 17Figura 3 - Exemplo de Código CSS. Fonte: Autor da pesquisa....................... 18Figura 4 - Diagrama de Caso de Uso utilizado durante o projeto. Fonte: Autorda pesquisa. ..................................................................................................... 22Figura 5 - Protocolo HTTP. Fonte: Autor da pesquisa ..................................... 23Figura 6 - Protocolo FTP. Fonte: Autor da pesquisa ....................................... 24Figura 7 - Localização dos Escritórios W3C. Fonte: COMITÊ GESTOR DAINTERNET (CGI), 2012. ................................................................................... 26Figura 8 - Interface do Adobe Dreamewaver CS5 Fonte: Autor da pesquisa .. 30Figura 9 - Interface do Adobe Fireworks Fonte: Autor da pesquisa ................ 31Figura 10 - Estudo do Gartner mostra um crescimento forte no mercado deDBMS - 2008. Fonte: ORACLE CORPORATION, 2012. ................................. 33Figura 11 - Interface do Mysql Workbench. Fonte: Autor da pesquisa. ........... 34Figura 12 - Wireframe - Esboço do Layout Fonte: Autor da pesquisa ............. 38Figura 13 - Novo Layout do site www.bertozi.com.br. Fonte: Dados dapesquisa. .......................................................................................................... 40


http://slidepdf.com/reader/full/tcc-leonildo-wagner-reestruturacao-de-website-utilizando-padro

LISTA DE ABREVIATURAS E SIGLAS

AJAX - Asynchronous Javascript and XML

API - Application Programming Interface

CGI – Comitê Gestor da Internet

CGI - Common Gateway Interface

FTP – File Transfer Protocol

HTML – Hyper Text Markup Language

HTTP – Hyper Text Transfer Protocol

JSP - Java Server Pages

PC - Personal Computer

PHP – Personal Home Page: Hypertext Preprocessor

SGML - Standard Generalized Markup Language

UML - Unified Modeling Language

W3C - World Wide Web Consortium

WEB - World Wide Web

WWW - World Wide Web

XML - eXtensible Markup Language

XMLS - eXtensible Markup Language Schema

XSD - XML Schema Definition

XSL - Extensible Stylesheet Language


http://slidepdf.com/reader/full/tcc-leonildo-wagner-reestruturacao-de-website-utilizando-padro

SUMÁRIO

1 INTRODUÇÃO .................................................................................................................. 10

1.1 Justificativa ................................................................................................................. 11

1.2 Objetivos ..................................................................................................................... 111.2.1 Objetivo Geral..................................................................................................... 11

1.2.2 Objetivos Específicos .......................................................................................... 12

1.3 Estrutura Textual ......................................................................................................... 12

2 IMPORTNCIA DAS LINGUAGENS DE MARCAÇÃO NA INTERNET ....................... 14

2.1 HTML ......................................................................................................................... 14

2.2 XML ............................................................................................................................ 16

2.3 CSS .............................................................................................................................. 17

2.4 Tableless ...................................................................................................................... 19

2.5 Javascript ..................................................................................................................... 19

2.6 PHP ............................................................................................................................. 20

2.7 UML ............................................................................................................................ 21

2.8 Protocolo HTTP .......................................................................................................... 22

2.9 Protocolo FTP ............................................................................................................. 23

2.10 Navegadores ................................................................................................................ 24

3 WORLD WIDE WEB CONSORTIUM (W3C) ................................................................. 253.1 PADRÕES W3C OU WEB STANDARDS ................................................................ 26

3.2 VANTAGENS NO USO DE PADRÕES WEB (WEB STANDARDS) .................... 27

3.2.1 Uniformidade ...................................................................................................... 28

3.2.2 Acessibilidade ..................................................................................................... 28

4 TECNOLOGIA EMPREGADA ......................................................................................... 29

4.1 Ferramentas ................................................................................................................. 29

4.1.1 Adobe Dreamweaver ........................................................................................... 29

4.1.2 Adobe Fireworks ................................................................................................. 30

4.1.3 Filezilla ................................................................................................................ 31

4.1.4 Banco de Dados Mysql ....................................................................................... 32

4.1.5 Mysql Workbench ............................................................................................... 33

4.1.6 Servidor Apache .................................................................................................. 34

5 METODOLOGIA DE DESENVOLVIMENTO ................................................................. 36

5.1 Levantamento de dados ............................................................................................... 36

5.2 WIREFRAME ............................................................................................................. 365.3 Modelagem de Layout ................................................................................................. 38



5.4 Codificação ................................................................................................................. 40

5.5 Dados........................................................................................................................... 41

5.6 Fase Testes .................................................................................................................. 41

6 CONSIDERAÇÕES FINAIS .............................................................................................. 43

6.1 Conclusões .................................................................................................................. 43

6.2 Recomendações Para Trabalhos Futuros ............................................................ 44

REFERÊNCIAS .......................................................................................................................... 45

APÊNDICE A – Questionário aplicado ao proprietário do website. .......................................... 47

APÊNDICE B – Diagrama de Caso de Uso UML ...................................................................... 48

APÊNDICE C – Código da página inicial (index.php) ............................................................... 49

APÊNDICE D – Código da página CSS principal (main.css) .................................................... 53

APÊNDICE E – Web Standards CheckList ................................................................................ 57



11

1 INTRODUÇÃO

A internet é um dos meios de comunicação mais utilizados pelo

homem e seu crescimento ocorreu de forma não planejada, se expandindo a

uma velocidade surpreendente, todos os dias novos servidores são ligados,

novas páginas são hospedadas e novos usuários acabam descobrindo este

novo mundo.

A World Wide Web foi criada no início da década de 1990, por Tim

Berners-Lee, para aperfeiçoar a comunicação no CERN (Centre European pour

la Recherche Nucleaire). Berners-Lee criou a HTML (Hypertext Markup

Language), uma linguagem de marcação baseada na bem-sucedida SGML

(Standard Generalized Markup Language), para formatar os documentos que

seriam distribuídos em rede e também desenvolveu protocolos de comunicação

para tornar viável seu novo sistema de informações em hipertexto (LEE, 1994,

p. 76-82).

O propósito original da Web era a existência de um ambiente virtual

onde as pessoas pudessem trocar informações livremente, e que tais

informações pudessem ser acessadas de diversos dispositivos. Para tornar

este conceito uma realidade foi necessária para a criação de Padrões Web, ou

Web Standards , que segundo definição do W3C (World Wide Web

Consortium ), são um conjunto de normas, diretrizes, recomendações, notas,

artigos, tutoriais e afins, de caráter técnico, produzidos pela mesma

organização, destinados a orientar desenvolvedores e projetistas para o uso de

práticas que possibilitam a criação de uma web acessível a todos,

independentemente dos dispositivos, linguagens, plataformas e de suasparticularidades ou necessidades especiais (FERREIRA; EIS, 2011).

O desenvolvimento tradicional de websites tem sido empregado com

o objetivo de fazê-los parecerem perfeitos em alguns navegadores principais.

Isto, no entanto prejudica a portabilidade para novas plataformas e dispositivos.

Um ambiente heterogêneo, desenvolvido visando à comunicação

entre seres humanos; esse sempre foi o foco da World Wide Web, a Internet.

Nos últimos anos ela vem sofrendo diversas transformações, no modo comosão tratadas suas informações realizadas a partir de tecnologias novas. Novos



11

conceitos de design, novos formatos de integração, facilidade de acesso e de

distribuição, rapidez na manipulação de dados, todas essas são características

da atual Web, fazendo com que ela se torne cada vez mais fácil e seus

usuários gerem cada vez mais conteúdo.

1.1 Justificativa

Nota-se que, mesmo nos dias atuais, o desenvolvimento de páginas

para internet carece da utilização de padronização e normatização. Este fato

acarreta muitos problemas como: incompatibilidade com navegadores eplataformas diversas, difícil manutenção e, por vezes, lentidão no

carregamento.

O website utilizado neste Trabalho de Conclusão de Curso foi

escolhido devido à construção de sua versão anterior, que se deu com uso de

tecnologias no modelo tradicional de desenvolvimento utilizado na web. Fazia-

se visível necessidade de aplicação de padrões.

Para alcançar resultados satisfatórios de desempenho e

funcionamento, um novo modelo foi desenvolvido segundo padrões de

desenvolvimento web, chamados de padrões W3C.

1.2 Objetivos

1.2.1 Objetivo Geral

O objetivo geral deste trabalho é demonstrar, através da reestruturação

de um website, a aplicação de padrões web, recomendados pela W3C, a fim de

verificar os pontos positivos e negativos no desenvolvimento web recomendado

por esta organização se comparado ao método tradicional.



12

1.2.2 Objetivos Específicos

Separar conteúdo e apresentação

Tornar código limpo e correto; Simplificar manutenção e desenvolvimento

Facilitar a compreensão do código

Reduzir custos e trabalho

Tornar o website compatível com as leis e diretrizes de

acessibilidade

Maximizar desempenho

Simplificar adaptação

Portabilizar o código

Tornar compatível com versões futuras

Validar código

Maximizar velocidade no carregamento da página

Reduzir tamanho das páginas

Melhorar posicionamento em mecanismos de busca.

1.3 Estrutura Textual

A monografia foi dividida em seis capítulos para melhor

esclarecimento do tema tratado. No primeiro capítulo é introduzido o projeto

assim como os conceitos mais básicos do desenvolvimento web e da própriaWorld Wide Web.

No segundo capítulo são apresentadas, de modo individual as

linguagens, tecnologias e técnicas utilizadas durante o desenvolvimento deste

projeto, bem como a motivação para sua escolha.

O terceiro capítulo é dedicado, exclusivamente, aos assuntos

relacionados à W3C, conceitos e aplicações de seus Web Standards.

Em sequência, o quarto capítulo trata das ferramentas e softwaresutilizados durante todas as fases do desenvolvimento deste projeto.



13

O quinto capítulo detalha a metodologia de desenvolvimento seguida

neste projeto.

No sexto e último capítulo são feitas as considerações finais a

respeito do projeto. Além de uma análise sobre aplicação dos padrões W3C,

feita a partir da comparação do antes e depois, também são levantadas

sugestões sobre futuras implementações.



14

2 IMPORTNCIA DAS LINGUAGENS DE MARCAÇÃO NA INTERNET

Este capítulo é dedicado a apresentar as linguagens de marcação e

programação utilizadas no desenvolvimento de sites e, consequentemente, um

pouco da história da internet. As linguagens e técnicas aqui apresentadas são

de suma importância neste trabalho, pois são consideradas base para

construção do website apresentado no mesmo. Também é importante ressaltar

que os Padrões W3C consistem na utilização correta de tais linguagens.

2.1 HTML

Segundo LEE (1994), dentre as linguagens de marcação, a

Hypertext Markup Language (HTML) ainda é a mais utilizada na Internet,

mesmo que muitas a considerem, simples e limitada. Sua utilização está

voltada tanto para a estruturação de documentos quanto na apresentação

visual destes documentos em um navegador1.Embora simples, ela pode representar documentos na Internet da

mesma forma que as linguagens mais complexas. Embora existam formas de

representação mais evoluídas, não se usando apenas tags predefinidas a

HTML continua sendo utilizada em larga escala.

A HTML deriva da pioneira linguagem de marcação, Standard

Generalized Markup Language (SGML), foi criada por Tim Berners Lee – o

idealizador da WWW – especificamente para a composição e apresentação dedocumentos na Web. Um documento estruturado pode ser apresentado ao

usuário de diferentes formas, sendo em uma impressão em papel, na tela de

um navegador de um Sistema Operacional de Interface Gráfica, um moderno

telefone celular ou em outro equipamento multimídia portátil.

1 Software utilizado para navegação na internet. Responsável por interpretar as páginascodificadas e exibi-las de forma legível aos usuários. Também chamado de browser ou webbrowser.



15

Figura 1 - Estrutura do Código HTML.Fonte: Autor da pesquisa.

Os requisitos para estruturação de um documento são proporcionais

aos requisitos necessários para sua apresentação. Este é um dos principaisproblemas da linguagem HTML em que ambos estão misturados e que

recentemente foram atacados em duas frentes: - introdução de Folhas de

Estilo, também conhecida como Cascading Style Sheets (CSS), permitindo

especificar a apresentação desejada para cada elemento de um documento,

separadamente da sua marcação HTML, especificação da linguagem XHTML.

Sucessora de HTML 4.01, seguindo o padrão da nova

metalinguagem XML é voltada para o intercâmbio de documentos via Web deforma independente da sua apresentação final e é um subconjunto restrito da

linguagem pioneira de marcação, SGML.

A HTML é enriquecida por os programas externos a ela, os quais

conseguem realizar todas as tarefas tão quanto às demais linguagens. Esses

programas são reconhecidos como plug-ins. Plug-ins são sistemas criados

pelos fabricantes de navegadores Web. Eles permitem a execução de recursos

que não foram desenvolvidos em HTML, assim como áudio e vídeo em umapágina Web.

O grande problema da utilização de plug-in é que, para cada recurso

utilizado em um documento HTML, deve-se possuir seu respectivo plug-in o

que pode diminuir a eficiência do computador, já que mais programas deverão

estar instalados em um navegador de Internet para acessar todos e quaisquer

sites.



16

2.2 XML

O Extensible Markup Language (XML) tido como, uma

metalinguagem de marcação criada a partir de SGML2. Na verdade, ela é uma

forma restrita de SGML. Seus principais objetivos são:

Prover o intercâmbio de documentos

Suportar uma grande gama de aplicações

Facilitar a análise de documentos XML por programas;

Documentos XML devem ser legíveis por humanos;

Economia de tags3 de marcação não é importante;

Ter uma especificação formal para a marcação de documentos.

Como a linguagem XML não possui um conjunto pré-definido de

tags ou elementos, ela é considerada uma meta-linguagem4 para descrição de

linguagens de marcação. Desta forma, num documento XML, os elementos,

também chamados de tags, são usados para definir o significado dos dados e

podem ser definidos livremente de acordo com as necessidades da aplicação

(DAUM;MERTEN, 2003).

2 Standard Generalized Markup Language.3 São rótulos usados para informar ao navegador como deve ser apresentado o website. 4 Consistem em uma modificação de uma linguagem e não uma linguagem verdadeira



17

Figura 2 - Exemplo de estrutura de um Código XML.

Fonte: Autor da pesquisa. A XML não fornece mecanismos para apresentação de dados nem

para ligação entre documentos. Tais recursos são disponibilizados por outras

especificações de linguagens como, por exemplo, Extensible Style Language

(XSL) e Xlink. A primeira é utilizada na descrição de estilos, já a segunda

especifica links entre documentos. O suporte que a XML oferece a separação

entre conteúdo e apresentação é um aspecto de suma importância na

linguagem.Torna-se imperativo ainda acrescentar que XML é uma linguagem

simples, possui um conjunto de estruturas de dados ricas, permite a troca e

exibição de conteúdo de bases de dados e pode ser utilizada como formato

para troca de mensagens na comunicação entre aplicações. Dentre essas, a

troca de mensagens na comunicação entre aplicações de empresas oferece

um meio de comunicação de baixo custo para aplicações B2B (Business to

Business), e essa é uma das áreas que também pode tirar proveito datecnologia XML.

2.3 CSS

O Cascading Style Sheet (CSS), é uma linguagem de estilo queconsiste em um mecanismo simples para adicionar estilo a um documento da



18

web. A finalidade da CSS é a de retirar do HTML toda e qualquer declaração

que vise à formatação, a apresentação do documento. Isto significa dizer que

tags do tipo <font>, <b>, <i>... Etc., bem como uso de colunas e linhas de

tabelas para obtenção de espaçamentos não são admitidos ou admitidos com

restrições em um projeto Web com CSS (SILVA, 2008).

Com um sintaxe relativamente simples, uma folha de estilo consiste

em um lista de regras utilizadas para definir a marcação de um mais elementos

presentes do código HTML. É importante ressaltar que podem haver

interpretações do código por navegadores de diferentes fabricantes, apesar

das recomendações e padrões indicados pela World Wide Web Consortium

(W3C, 2012).

O Figura 3 abaixo demonstra a estrutura de uma página CSS. O

código da figura abaixo encontra-se completo no Apêndice D.

Figura 3 - Exemplo de Código CSS.Fonte: Autor da pesquisa.

Adoção desta linguagem resulta em múltiplas vantagens e

benefícios que em geral não são obtidos quando um website é desenvolvidocom base no uso de tabelas e atributos internos das tags HTML.



19

2.4 Tableless

Houve uma época em que toda página da web utilizava-se de

tabelas para organizar e estruturar os dados que eram exibidos aos usuários

pelos navegadores. Este modo de renderização tinha um alto custo de

processamento, o que tornava o carregamento de websites lento e

desagradável, aos olhos do usuário (NIELSEN;HOA, 2006).

Características comuns em sites desenvolvidos pelo modelo

tradicional, amplamente utilizados na década de 90 incluem:

Layout baseados em tabelas;

Camada de apresentação unida ao conteúdo;

Código inválido, inacessível e semanticamente incorreto.

A Tableless é uma técnica que consiste na não utilização de tabelas

para a confecção do layout da interface de uma página. Isto é feito através do

posicionamento de tags HTML assim como <diva> ou <spam> por meio de

regras e definições feitas em um arquivo CSS externo a página de conteúdo.

2.5 Javascript

Atualmente é a principal linguagem para programação client-side em

navegadores web. Foi concebida para ser uma linguagem script com

orientação a objetos baseada em protótipos, tipagem fraca e dinâmica e

funções de primeira classe. Possui suporte à programação funcional e

apresenta recursos como fechamentos e funções de alta ordem comumente

indisponíveis em linguagens populares como Java e C++.Originalmente

desenvolvido por Brendan Eich da Netscape sob o nome de Mocha,

posteriormente teve seu nome mudado para LiveScript e por fim JavaScript.



20

LiveScript foi o nome oficial da linguagem quando foi lançada pela primeira vez

na versão beta do navegador Netscape 2.0 em setembro de 1995 (GOODMAN,

2001).

JavaScript suporta os elementos de sintaxe de programação

estruturada da linguagem C (por exemplo, if , while , switch. JavaScript faz

distinção entre expressões e comandos. (GOODMAN, 2001)

2.6 PHP

Criado em 1994 por Ramus Lerdorf, o PHP: Hypertext Processor

(PHP) foi adotado por muitos ao longo do tempo profissionais e reescrito

diversas vezes até chagar em sua forma atual. Consiste em uma linguagem

criada propriamente para web, que gera scripts executando pelo lado servidor e

não pelo lado cliente como o Javascript. (WELLING e THOMPSON, 2005)

Capaz de processar hipertexto pode ser embutido dentro do código

HTML e criar conexões com diversos tipos de bancos de dados. O PHP é

focado para ser uma linguagem de script do lado do servidor, portanto, você

pode fazer qualquer coisa que outro programa Common Gateway Interface



21

(CGI) pode fazer, como: coletar dados de formulários, gerar páginas com

conteúdo dinâmico ou enviar e receber cookies (PHP.ORG, 2012).

Esses são os maiores campos onde os scripts PHP podem ser

utilizados:

Script no lado do servidor (server-side)

Script de linha de comando

Script de linha de comando

O PHP pode ser utilizado na maioria dos sistemas

operacionais, incluindo Linux, várias variantes Unix

(incluindo HP-UX, Solaris e OpenBSD), Microsoft Windows,

Mac OS X, RISC OS, e provavelmente outros. O PHP

também é suportado pela maioria dos servidores web

atuais, incluindo Apache, Microsoft Internet Information

Server, Personal Web Server, Netscape and iPlanet

Servers, Oreilly Website Pro Server, Caudium, Xitami,

OmniHTTPd, e muitos outros (PHP.ORG, 2012).

2.7 UML

A Unified Modeling Language ou Linguagem de Modelagem

Unificada (UML) é uma linguagem visual utilizada para modelar sistemas

computacionais por meio do paradigma de Orientação a Objetos. No ramo da

Engenharia de Software, a UML se tornou um padrão para representar de

modo gráfico as entidades e elementos de um sistema e suas relações

(GUEDES, 1999).

Deve ficar bem claro, no entanto, que a UML não é uma linguagem

de programação, mas uma linguagem de modelagem, cujo objetivo é

auxiliar os engenheiros de software a definir as características dosoftware, tais como seus requisitos, seu comportamento, sua



22

estrutura lógica, a dinâmica de seus processos e até mesmo suas

necessidades físicas em relação ao equipamento sobre o qual o

sistema deverá ser implantado. (GUEDES, 1999, p. 13)

Figura 4 - Diagrama de Caso de Uso utilizado durante o projeto.Fonte: Autor da pesquisa.

O objetivo é representar de modo visual, fornecendo múltiplas visões

do sistema a ser modelado, analisando-o e modelando-o sob diversos

aspectos, procurando-se assim atingir a completitude da modelagem. Com

intenção de melhor visualizar o funcionamento de um website antes de sua

concepção e evidenciar suas características faz se necessário o

desenvolvimento de alguns tipos de diagramas.

2.8 Protocolo HTTP

O Hypertext Transfer Protocol (HTTP) é um protocolo de aplicação

responsável pelo tratamento de pedidos e respostas entre cliente5 e servidor6

5 Cliente é um computador que faz requisições de um serviço ou recurso.6 Servidor é um computador responsável por atender a requisição feita pelo cliente.



23

na World Wide Web. Ele surgiu da necessidade de distribuir informações

pela Internet e para que essa distribuição fosse possível foi necessário criar

uma forma padronizada de comunicação entre os clientes e os servidores da

Web e entendida por todos os computadores ligados à Internet. Com isso, o

protocolo HTTP passou a ser utilizado para a comunicação entre computadores

na Internet e a especificar como seriam realizadas as transações entre clientes

e servidores, através do uso de regras básicas. (W3C, 2012)

O protocolo HTTP faz a comunicação entre o cliente e o servidor por

meio de mensagens. O cliente envia uma mensagem de requisição de um

recurso e o servidor envia uma mensagem de resposta ao cliente com a

solicitação.

Figura 5 - Protocolo HTTP.Fonte: Autor da pesquisa

Usado pela WWW desde 1990. A primeira versão de HTTP, era um

protocolo simples para a transferência de dados no formato de texto no padrão

conhecido como American Standard Code for Information Interchange (ASCII).

2.9 Protocolo FTP

File Transfer Protocol (FTP) é uma forma bastante rápida e simples

de se transferir arquivos de um computador para outro. Hoje em dia é utilizado

http://pt.wikipedia.org/wiki/World_Wide_Web

http://pt.wikipedia.org/wiki/Internet


http://pt.wikipedia.org/wiki/World_Wide_Web



24

para as mais diversas finalidades, seja para transferir jogos ou drivers do

Windows (FILEZILLA.ORG, 2011).

Figura 6 - Protocolo FTP.Fonte: Autor da pesquisa

2.10 Navegadores

Navegador web ou browser é um software que permite que seus

usuários possam acessar e interagir com documentos virtuais ou páginas web .

A funcionalidade dos navegadores é a de que quando for feito um pedido de

um determinado conteúdo da internet , providenciar a apresentação do mesmo.

Eles são o principal meio de acesso a internet utilizando vários protocolos entre

eles TCP/IP (Transmission Control Protocol / Internet Protocol), HTTP e até mesmo

FTP (SILVA, 2008).O navegador, tem a capacidade de ler vários tipos de arquivo/ficheiros, sendo

nativo o processamento dos mais comuns (HTML, XML, JPEG,GIF, PNG, etc.),

e os restantes possíveis através de plugins (Flash, Java, etc.).

A finalidade principal do navegador é fazer-se o pedido de um

determinado conteúdo da Web, e providenciar a exibição do mesmo.

Geralmente, quando o processamento do ficheiro não é possível através do

mesmo, este apenas transfere o ficheiro localmente. Quando se trata de texto

http://pt.wikipedia.org/wiki/HTML

http://pt.wikipedia.org/wiki/XML

http://pt.wikipedia.org/wiki/JPEG

http://pt.wikipedia.org/wiki/GIF

http://pt.wikipedia.org/wiki/PNG

http://pt.wikipedia.org/wiki/Plugin

http://pt.wikipedia.org/wiki/Adobe_Flash

http://pt.wikipedia.org/wiki/Java_(linguagem_de_programa%C3%A7%C3%A3o)

http://pt.wikipedia.org/wiki/Web

http://pt.wikipedia.org/wiki/Web

http://pt.wikipedia.org/wiki/Java_(linguagem_de_programa%C3%A7%C3%A3o)

http://pt.wikipedia.org/wiki/Adobe_Flash

http://pt.wikipedia.org/wiki/Plugin

http://pt.wikipedia.org/wiki/PNG

http://pt.wikipedia.org/wiki/GIF

http://pt.wikipedia.org/wiki/JPEG

http://pt.wikipedia.org/wiki/XML

http://pt.wikipedia.org/wiki/HTML



25

(Markup Language e/ou texto simples) e/ou imagens bitmaps, o navegador

tenta exibir o conteúdo.

3 WORLD WIDE WEB CONSORTIUM (W3C)

O W3C é uma organização, um consórcio, onde eles padronizam

alguns formatos da Web, por exemplo, HTML, CSS, e outros.

O Consórcio World Wide Web (W3C) é uma comunidade

internacional com organizações filiadas, no qual trabalham em tempo integral e

junto com o público trabalham para desenvolver padrões para Web (Web

Standards). Liderados pelo inventor da Web Tim Berners-Lee, a missão do

W3C é levar a Web ao seu pleno potencial.

Segundo o site oficial, a missão da W3C é: incentivar e auxiliar na

adoção de padrões para o desenvolvimento pleno da Web em longo prazo;

Organizar atividades na região para promover e demonstrar as ferramentas e

padrões desenvolvidos pelo W3C Mundial. (W3C, 2011).

Foi fundado por Tim Berners-Lee em 1994 para levar a Web ao seu

potencial máximo, por meio do desenvolvimento de protocolos comuns e fóruns

abertos que promovam a sua evolução e assegurem a sua interoperabilidade.

Atualmente existem diversos escritórios da W3C ao redor do mundo,

sendo representados por organizações, com no caso do Brasil o Comitê Gestor

de Internet (CGI).

http://pt.wikipedia.org/wiki/Lista_de_linguagens_de_marca%C3%A7%C3%A3o

http://pt.wikipedia.org/wiki/Bitmap

http://pt.wikipedia.org/wiki/Bitmap

http://pt.wikipedia.org/wiki/Lista_de_linguagens_de_marca%C3%A7%C3%A3o



26

Figura 7 - Localização dos Escritórios W3C.Fonte: COMITÊ GESTOR DA INTERNET (CGI), 2012.

3.1 PADRÕES W3C OU WEB STANDARDS

São um conjunto de especificações técnicas e orientações através

de um processo projetado para maximizar a consenso sobre as

recomendações, garantindo qualidades técnicas e editoriais, além de

transparentemente alcançar apoio da comunidade de desenvolvedores, do

consórcio e do público em geral (W3C, 2012).

O W3C dispõe de diversos modos de visualização de suas

recomendações:

Por tecnologia (como ―todas as especificações relacionadas à

HTML‖) Por status (ordenada inicialmente pelas mais recentes e, em

seguida, agrupadas por status, das que já são Recomendação até

as que ainda estão no status de Rascunho).

Por data (a partir das mais recentes)

Por título

Por grupo (os grupos que trabalham nas especificações)



27

3.2 VANTAGENS NO USO DE PADRÕES WEB (WEB STANDARDS)

Existem diversas vantagens na aplicação de padrões no

desenvolvimento de sistemas e páginas da internet. Dentre tais vantagens

pode-se destacar: uniformidade, simplicidade, liberdade, separação de

conteúdo da apresentação, acessibilidade e estabilidade.

DESENVOLVIMENTO TRADICIONAL DESENVOLVIMENTO EM ACORDO

COM OS PADRÕES WEB

EXTENSÃO DA MÍDIA IMPRESSA ACESSÍVEL POR QUALQUER

DISPOSITIVO

LEIAUTES BASEADOS EM TABELAS LEIAUTES BASEADOS EM CSS

CAMADA DE APRESENTAÇÃO

ANINHADA AO CONTEÚDO

CSS PARA SEPARAÇÃO DO

CONTEÚDO DA

APRESENTAÇÃO

CÓDIGO INVÁLIDO CÓDIGO VÁLIDO

CÓDIGO INACESSÍVEL CÓDIGO ACESSÍVEL

(POR HUMANOS E MÁQUINAS)

CÓDIGO SEMANTICAMENTE

INCORRETO

MARCAÇÃO SEMANTICAMENTE

CORRETA

Quadro 3.1 - Comparativo entre website tradicional e website de acordo com os padrõesFonte: CECCONI, Carlinhos (org.), 2009.

Uma das principais vantagens do se utilizar os padrões Web paradesenvolver um website é a facilidade de manutenção. Através de um único



28

arquivo CSS, toda uma estrutura pode ser alterada sem a mudança de uma

linha sequer de HTML.

A seguir, é apresentado um exemplo de uma página visualizada sem

formatação CSS, em que a acessibilidade se torna evidente, e o mesmo

exemplo com a folha de estilo CSS (figura 1.1). Na figura 1.2, nota-se a clareza

e a simplicidade da marcação HTML, contudo, sem perder a beleza no design,

e, na figura 1.3, observa-se a facilidade de variação de estilo da mesma

página, feita sem alteração alguma na marcação HTML, e sim de somente

alguns atributos no CSS.

3.2.1 Uniformidade

3.2.2 Acessibilidade

Acessibilidade significa qualidade de ser acessível ou facilidade de

interação. Quando focada em tecnologia, tem o objetivo de tornar os

computadores e a Web mais acessíveis para portadores de necessidades

especiais (KRUG, 2008).

Acessibilidade na Web, segundo o W3C (2005), significa uma Web

projetada de modo que pessoas portadoras de necessidades especiais possam

perceber entender, navegar e interagir de uma maneira efetiva com a Web,

bem como criar e contribuir com conteúdos para a Web (NIELSEN e HOA,

2006).



29

4 TECNOLOGIA EMPREGADA

Este capítulo tem o propósito de listar as ferramentas utilizadas

durante o processo de desenvolvimento do corrente projeto, explicar seu

funcionamento, exemplificar seus usos e também justificar as escolhas de tais

ferramentas.

4.1 Ferramentas

Existem diversos softwares, IDE’s, Ferramentas CASE7 e

framework’s8 com o propósito de auxiliar o desenvolvimento de páginas para a

Internet. Existem boas ferramentas gratuitas e até de código-fonte aberto e

outras pagas. Durante este projeto foram utilizadas algumas destas

ferramentas, escolhidas segundo alguns critérios como experiência e

conhecimento sobre o software, usabilidade e capacidade de gerar bons

resultados.

4.1.1 Adobe Dreamweaver

O Adobe Dreamweaver é um programa para modelar páginas da

internet, contando tanto com recursos para programadores (com base em

sintaxe e codificação) quanto para designers, com a parte visual largamente

desenvolvida e aperfeiçoada (ADOBE SYSTEMS INCORPORATED, 2012).

Esta ferramenta robusta desenvolvida pela Adobe, dá suporte a

diversas linguagens tanto de programação quanto de formatação como HTML,

7 Computer-Aided Software Engineering. Classificação que abrange ferramentas baseadas em

computadores que auxiliam atividades de engenharia de software 8 Em desenvolvimento de software, é uma abstração que une códigos comuns entre váriosprojetos de software provendo uma funcionalidade genérica.

http://pt.wikipedia.org/wiki/Engenharia_de_software





30

Active Server Pages (ASP), Java Server Pages JSP, ColdFusion9, PHP,

Javascript, CSS, XML e XSL (XSLT).

A interface do programa é simples e intuitiva. Isto facilita a utilização

para quem já conhece esse tipo de ferramenta. No entanto é uma ferramenta

avançada e exige certo grau de experiência com a mesma as linguagens

envolvidas.

Figura 8 - Interface do Adobe Dreamewaver CS5 Fonte: Autor da pesquisa

O Adobe Dreamweaver CS5 foi utilizado durante toda a fase de

codificação e testes deste projeto.

4.1.2 Adobe Fireworks

O Adobe Fireworks é um software pertencente ao pacote Criative

Suite desenvolvido pela Adobe, com a função de auxiliar webdesigners, no

desenvolvimento de interfaces em HTML e CSS para websites de modo visual.

(ADOBE SYSTEMS INCORPORATED, 2012)

9 É uma plataforma de desenvolvimento Web proprietária criada pela Adobe Systems.



31

Com interface semelhante ao Adobe Dreamweaver, oferece

recursos para integração com o mesmo e com o Adobe Photoshop.

Foi utilizado no design na criação de wireframe’s e no desenho

inicial do layout.

Figura 9 - Interface do Adobe FireworksFonte: Autor da pesquisa

4.1.3 Filezilla

O Filezilla é um cliente FTP gratuito, com interface simplificada e

intuitiva. Encontra-se disponível em diversos idiomas inclusive o português.

Suporta os protocolos FTP, FTP sobre Secure Sockets Layer (SSL) e Transport

Layer Security (TLS) assim como Secure Shell (SSH). Executa sobre

plataformas Windows, Macintosh Operating System (Mac OS) e Linux.

Disponível em 40 idiomas, incluindo o português do Brasil, suporta

transferência e pausa para grandes transferências (acima de 4GB) e

disponibiliza o sistema Drag-and-drop10 (FILEZILLA.ORG, 2011).

10 Arraste e solte.



32

A transferência por protocolo FTP não ocorre através de Peer to

Peer (P2P), ou seja, de um usuário para outro. É necessário que você se

conecte a um servidor. É justamente por isso que o software é um cliente:

você, como um cliente irá conectar-se a um servidor para baixar arquivos e, em

momento algum fará o papel de servidor, como acontece com programas

como.

4.1.4 Banco de Dados Mysql

O MySQL é um Sistema de Gerenciamento de Banco de Dados

(SGBD), que utiliza a Structured Query Language (SQL), como interface. É

atualmente um dos bancos de dados mais populares, com mais de 10 milhões

de instalações pelo mundo, segundo o site do fabricante. Entre os usuários do

banco de dados MySQL estão: NASA, Friendster, Banco Bradesco, Dataprev,

HP, Nokia, Sony, Lufthansa, U.S. Army, U.S. Federal Reserve Bank,

Associated Press, Alcatel, Cisco Systems, Google dentre outros. (ORACLE

CORPORATION, 2012)

O banco de dados MySQL tornou-se banco de dados do mundo

open source mais popular por causa de seu alto desempenho, alta

confiabilidade e facilidade de uso. É também o banco de dados de escolha

para uma nova geração de aplicativos criados na pilha LAMP (Linux, Apache,

MySQL, PHP / Perl / Python11.) Muitas das organizações maiores e que mais

cresce no mundo, incluindo Facebook, Google, Adobe, Alcatel Lucent e Zappos

confiar em MySQL para poupar tempo e dinheiro ligando seus sites Web de

alto volume e críticos de negócios de sistemas e pacotes de software

(ORACLE CORPORATION, 2012).

11Linguagem de programação de alto nível, interpretada, imperativa, orientada a objetos, de tipagem dinâmica e forte.

http://pt.wikipedia.org/wiki/Linguagem_de_programa%C3%A7%C3%A3o_de_alto_n%C3%ADvel

http://pt.wikipedia.org/wiki/Linguagem_interpretada

http://pt.wikipedia.org/wiki/Programa%C3%A7%C3%A3o_imperativa

http://pt.wikipedia.org/wiki/Orienta%C3%A7%C3%A3o_a_objetos

http://pt.wikipedia.org/wiki/Tipo_de_dado

http://pt.wikipedia.org/wiki/Tipo_de_dado

http://pt.wikipedia.org/wiki/Orienta%C3%A7%C3%A3o_a_objetos

http://pt.wikipedia.org/wiki/Programa%C3%A7%C3%A3o_imperativa

http://pt.wikipedia.org/wiki/Linguagem_interpretada

http://pt.wikipedia.org/wiki/Linguagem_de_programa%C3%A7%C3%A3o_de_alto_n%C3%ADvel



33

Figura 10 - Estudo do Gartner mostra um crescimento forte no mercado de DBMS - 2008.Fonte: ORACLE CORPORATION, 2012.

Por ser o banco de dados de código aberto mais popular torna-seuma boa escolha para uma ampla gama de desenvolvedores de banco de

dados, DBA’s12 e gerentes de TI que querem um banco de dados de alto

desempenho, confiável, acessível e fácil de usar. É imperativo ressaltar que

devido a sua fácil integração com o PHP, o Mysql é incluído, quase que

obrigatoriamente, nos pacotes de hospedagem de sites da Internet oferecidos

atualmente.

4.1.5 Mysql Workbench

O Mysql Workbench é uma ferramenta gráfica para modelagem de

dados, integrando criação e designer. A ferramenta possibilita trabalhar

12 Em inglês sigla que traduzida, literalmente, designa o capacitado pela licenciatura deadministrar banco de dados onde estão armazenadas informações.

http://pt.wikipedia.org/wiki/PHP



http://pt.wikipedia.org/wiki/PHP



34

diretamente com objetos schema, além de fazer a separação do modelo lógico

do catálogo de banco de dados (ORACLE CORPORATION, 2012).

Figura 11 - Interface do Mysql Workbench.Fonte: Autor da pesquisa.

Segundo ORACLE CORPORATION (2012), toda a criação dos

relacionamentos entre as tabelas pode ser baseado em chaves estrangeiras.Outro recurso que a ferramenta possibilita é realizar a engenharia reversa de

esquemas do banco de dados, bem como gerar todos os scripts em SQL.

As características citadas anteriormente, aliadas a sua simplicidade

e desempenho satisfatório tornaram-se razões para a escolha do software para

auxiliar no desenvolvimento desde projeto. Torna-se imperativo ressaltar que

se trata de um software gratuito e de acesso fácil13.

4.1.6 Servidor Apache

O Servidor Apache (ou Servidor HTTP Apache, em inglês: Apache

HTTP Server, ou simplesmente: Apache) é o mais bem sucedido servidor web

13 O software pode ser conseguido na página do fabricante presente no endereço:http://www.mysql.com/products/workbench/.



35

livre. Foi criado em 1995 por Rob McCool, então funcionário do National Center

for Supercomputing Applications (NCSA). Numa pesquisa realizada em

dezembro de 2007, foi constatado que a utilização do Apache representa

47.20% dos servidores ativos no mundo. Em maio de 2010, o Apache serviu

mais de 54,68% de todos os sites e mais de 66% dos milhões de sites mais

movimentados. É a principal tecnologia da Apache Software Foundation,

responsável por mais de uma dezena de projetos envolvendo tecnologias de

transmissão via web, processamento de dados e execução de aplicativos

distribuídos (APACHE SOFTWARE FOUNDATION, 2012).

O servidor é compatível com o protocolo HTTP versão 1.1. Suas

funcionalidades são mantidas através de uma estrutura de módulos, permitindo

inclusive que o usuário escreva seus próprios módulos — utilizando Application

Programming Interface (API) ou Interface de Programação de Aplicativos, do

software. Além de gratuito, o Apache HTTP Server é um servidor seguro,

eficiente e extensível que fornece serviços HTTP em sincronia com os padrões

atuais de HTTP. Outro ponto importante é que se encontra versões para os

sistemas Windows, Novell Netware, OS/2, Unix, Linux, FreeBSD, etc.

.



36

5 METODOLOGIA DE DESENVOLVIMENTO

Para se chegar a um website, que atenda as expectativas é

fundamental, que seja elaborado um projeto no qual será aplicada uma

estrutura passível de modificações sem que seja necessário grande esforço

para modificações futuras. Não há uma metodologia padrão de

desenvolvimento em documentos e páginas para internet. Portanto se fez

necessário adotar práticas de algumas metodologias existentes e adaptá-las ao

processo de desenvolvimento deste projeto.

5.1 Levantamento de dados

Durante esta fase foram feitas entrevista com o proprietário do site

em questão, Prof. Alexandre Dezem Bertozzi.Após a entrevista inicial, foi elaborado um questionário, com

perguntas a respeito do site, com: funcionalidades e detalhes da versão

anterior e expectativas para uma nova versão. Através deste questionário

comumente chamado de briefing no meio de desenvolvimento web, foi possível

realizar um breve estudo sobre a versão anterior e suas necessidades.

Após levantar os dados iniciais tornou-se possível elaborar

wireframes, para que o processo pudesse seguir em frente.

5.2 WIREFRAME

Como dito anteriormente, foram elaborados wireframes, para um

melhor planejamento do layout a ser desenvolvido. O propósito desta fase é



37

evitar que o layout seja construído e modificado diversas vezes, sem conseguir

atingir os parâmetros de usabilidade desejados.

Wireframe é um esboço do layout, que descreve a estrutura e a

interface de uma página. Nesse espaço é passada toda organização de

conteúdos como texto, imagens, logo etc. O alinhamento e a distribuição dos

conteúdos deverão ser bem posicionados. Esta fase do projeto permite

visualizar e analisar o posicionamento dos dados em uma página de modo que

fique agradável usuário e com uma configuração que leve a um uso intuitivo. O

objetivo é que qualquer usuário sem conhecimento prévio seja capaz de utilizar

a página a ser montada (KRUG, 2008).

Logo após o levantamento dos requisitos foi criado um esboço

definindo a apresentação dos elementos do site, que compõem o layout.

Seguindo este wireframe foi montado o layout.



38

Figura 12 - Wireframe - Esboço do LayoutFonte: Autor da pesquisa

5.3 Modelagem de Layout

O Layout é a parte visual de um website. Tem a função de interface,

com a qual os usuários interagem.

Em Seguida aos esboços foi criada a aparência do site.·.



39

Estrutura

Organização de conteúdos

Alinhamento

Distribuição dos conteúdos

Posicionamento

Permite visualizar e analisar o posicionamento dos dados em uma

página de modo que fique:

Agradável

Leve

Intuitivo.



40

Figura 13 - Novo Layout do site www.bertozi.com.br. Fonte: Dados da pesquisa.

5.4 Codificação

Além da interface construída a partir das linguagens HTML e CSS, o

novo website, possui um estrutura dinâmica baseada nas linguagens PHP e

Javascript.

http://www.bertozi.com.br/

http://www.bertozi.com.br/



41

Diversas páginas com scripts para funções específicas se

encontram armazenadas no servidor e são chamadas por meio de métodos

para inclusão, pela página principal que altera dinamicamente seu conteúdo.

5.5 Dados

Para que o dinamismo da página pudesse ser completado, os dados

foram separados da interface e das regras de negócio do site. Inicialmente foi

necessário modelar uma base de dados por meio de diagramas para simplificar

a criação e o entendimento das relações entre os dados.

Posteriormente à criação dos diagramas, foram criados diversos

scripts com consultas em linguagem SQL. Para armazenagem dos dados foi

utilizado o Banco de dados Mysql. Alguns dados foram armazenados em

arquivos estruturados, na linguagem XML para facilitar sua recuperação.

5.6 Fase Testes

Inicialmente foi realizado os chamado Teste de Unidade

também conhecido como Teste Unitário. É na fase do processo de teste em

que se testam as menores unidades desenvolvidas, neste caso as páginas do

website. Os alvos desse tipo de teste são os métodos dos objetos ou mesmo

pequenos trechos de código. Assim, o objetivo é encontrar falhas de

funcionamento dentro de uma pequena parte do sistema funcionando

independentemente do todo. Cada parte do programa é isolada e testada afim

de mostrar que funciona individualmente. Esse tipo de teste é eficaz apenas se

for usado conjuntamente com outras atividades de teste do software

(WELLING; THOMPSON, 2005).

Na fase de Teste de Sistema o objetivo é executar o sistema sob oponto de vista do seu usuário final, varrendo as funcionalidades em busca de



42

falhas. Os testes são executados em condições similares - de ambiente,

interfaces sistêmicas e massas de dados - àquelas que um usuário utilizará no

seu dia-a-dia de manipulação do sistema. De acordo com a política de uma

organização, podem ser utilizadas condições reais de ambiente, interfaces

sistemáticas e massas de dados (WELLING; THOMPSON, 2005).



43

6 CONSIDERAÇÕES FINAIS

Ao final do desenvolvimento da nova versão do website mencionado

neste projeto, construído sobre os padrões da W3C apresenta-se a seguir as

conclusões ao final.

6.1 Conclusões

Durante o desenrolar deste projeto ficou evidente que o uso depadrões no desenvolvimento de páginas para internet, é importante tanto para

guiar o processo de produção de modo mais eficaz visando um produto final

com maior portabilidade e produtividade, quanto para auxiliar na criação de

uma internet mais acessível.

Após o desenvolvimento foi aplicado o checklist proposto por

(WEAKLEY, 2004)e apresentado no Apêndice E, foi feita uma análise de

inúmeros quesitos, entre eles: a qualidade do código escrito; o nível deseparação entre o conteúdo e a apresentação; a acessibilidade para usuários,

e para dispositivos diversos; além de usabilidade e a administração do site.

Após a aplicação dos testes propostos no checklist nos sites,

verificou-se que, se padronizado, seguindo ao máximo as especificações

propostas pela W3C, obtêm-se um desempenho superior em praticamente

todos os aspectos analisados, sendo que o protótipo elaborado se mostrou

mais leve e rápido em relação ao antigo; compatível com navegador textual e,portanto mais acessível.

Além de todos os itens citados anteriormente, a nova versão modelo

do website apresentou-se compatível com os navegadores que seguem os

padrões da W3C, e com alto nível de separação entre o conteúdo e o layout

através de CSS e XHTML.



44

6.2 Recomendações Para Trabalhos Futuros

Buscando a continuidade deste TCC, sugere-se:

Desenvolvimento de um módulo administrador para inserção

e edição de conteúdo.

Atualização novas versões de linguagens de marcação para

web: XHTML 2 e HTML 5;

Programação de recursos para interação entre usuários



45

REFERÊNCIAS

ADOBE SYSTEMS INCORPORATED. Adobe Dreamewaver CS5.5. Adobe, 2012. Disponivelem: <http://www.adobe.com/products/dreamweaver>. Acesso em: 13 mar. 2012.

ADOBE SYSTEMS INCORPORATED. Adobe Fireworks CS5.5. Adobe, 2012. Disponivelem: <www.adobe.com/products/fireworks>. Acesso em: 13 mar. 2012.

APACHE SOFTWARE FOUNDATION. Projetcts Apache. Apache, 2012. Disponivel em:<www.projects.apache.org/>. Acesso em: 11 jan. 2012.

COMITÊ GESTOR DA INTERNET NO BRASIL. Guia de Referência CCS 2.1. 1ª. ed. São

Paulo: [s.n.], 2009.COMITÊ GESTOR DA INTERNET NO BRASIL. Guia de Referência XHTML. 1ª. ed. [S.l.]:[s.n.], 2009.

CYBIS, W. Ergonomia e Usabilidade, Conhecimentos, Métodos e Aplicações . [S.l.]:Novatec.

DAUM, B.; MERTEN, U. System architecture with XML. 1ª. ed. San Francisco: Elsevier,2003. 356 p.

DIAS, C. Usabilidade na Web: criando portais mais acessíveis. 1. ed. Rio de Janeiro: Alta

Books, 2003.

FERREIRA, E.; EIS, D. Curso HTML 5: Escritórios W3C Brasil. Escritórios W3C Brasil,2011. Disponivel em: <www.w3c.br/pub/Cursos/CursoHTML5/>. Acesso em: 17 dez. 2011.

FILEZILLA.ORG. Filezilla Project. Filezilla Project, 2011. Disponivel em: <http://filezilla-project.org>. Acesso em: 03 fev. 2012.

GOODMAN, D. JavaScript Bible - Gold Edition. 1ª. ed. New York: Hungry Minds, Inc,2001.

GUEDES, G. T. A. UML 2: Guia Prático. 1ª. ed. Rio de Janeiro: Novatec, 1999. 13 p.KRUG, S. Não me faça pensar. 2ª. ed. Rio de Janeiro: Alta Books, 2008.

LEE, B. The World-Wide Web. Communications Of The ACM, v. 37, p. 76-82, ago. 1994.

NIELSEN, J. Usability engineering. 1ª. ed. [S.l.]: [s.n.], 1993.

NIELSEN, J.; HOA, L. USABILIDADE NA WEB: Projetando Websites com Qualidade. 1ª.ed. São Paulo: Campus, 2006.

NIELSEN, J.; TAHIR, M. Homepage usabilidade: 50 websites desconstruídos. 1. ed. Rio de

Janeiro: Campus, 2002.



46

ORACLE CORPORATION. MySQL Workbench 5.2. MySQL, 2012. Disponivel em:<httP://www.mysql.com/products/workbench/>. Acesso em: 12 fev. 2012.

ORACLE CORPORATION. Why MySQL? MySQL, 2012. Disponivel em:<http://www.mysql.com/why-mysql/>. Acesso em: 19 fev. 2012.

PHP.ORG. Manual do PHP. PHP.Org, 2012. Disponivel em:<http://www.php.net/manual/pt_BR/>. Acesso em: 2012 mar. 14.

SILVA, M. S. Construindo Sites com CSS e XHTML. 1ª. ed. São Paulo: Novatec, 2008. 448p.

SILVA, M. S. CSS e Padrões Web. Site do Maujor, 2012. Disponivel em:<www.maujor.com/>. Acesso em: 03 fev. 2012.

SITE Oficial W3C. Disponivel em: <www.w3c.org>. Acesso em: 15 out. 2011.

VENETIANER, T. HTML: Desmistificando a Linguagem da Internet. São Paulo: MakronBooks, 1996.

W3C. Protocols. W3C, 2011. Disponivel em: <http://www.w3.org/Protocols/>. Acesso em: 06fev. 2012.

W3C. Padrões. W3C Brasil, 2012. Disponivel em: <http://www.w3c.br/Padroes>. Acesso em:05 mar. 2012.

W3C. Protocols. W3C, 2012. Disponivel em: <http://www.w3.org/Protocols/>. Acesso em: 04fev. 2012.

W3C. Web Styles Sheets Homepage. Web Styles Sheets Homepage, 2012. Disponivel em:<www.webstyles-portuguese.info/style/CSS/>. Acesso em: 12 jan. 2012.

WEAKLEY, R. Web standards checklist. Max Design, 2004. Disponivel em:<http://www.maxdesign.com.au/articles/checklist/>. Acesso em: 12 fev. 2012.

WELLING, L.; THOMPSON, L. PHP & MySQL - Desenvolvimento Web. 3ª. ed. Rio deJaneiro: Elsevier, 2005.



47

APÊNDICE A – Questionário aplicado ao proprietário do website.

Você deseja:( ) Criar um web site

( ) Reprojetar um web site

1) Conte-me sobre o negócio de sua empresa, seu objetivo e o mercado ondeatua:

2) Que tipo de produtos/serviços sua empresa oferece?

3) O que diferencia você de seus concorrentes (preço, qualidade, serviços,etc.)?

4) Descreva abaixo o público alvo do seu negócio:

5) Descreva abaixo os conteúdos que deverão ser inseridos em seu site(história da empresa, descrição e fotos de produtos, serviços, etc.) :

6) Qual a Imagem a ser transmitida para os usuários? (tradição oumodernidade, layout clean ou popular, cores mais adequadas etc.)

7) Qual a Documentação disponível? (logotipo, folders, manuais etc.)

8) Descreva as ferramentas de marketing utilizadas atualmente (folders,cartões, revistas, jornais, rádio, TV, etc.).

9) Se possível, informe o nome e o website de seus principais concorrentes.

10) Qual o principal objetivo do seu website

11) Você pretende que o site esteja pronto em torno de: (dias)

12) Cite 3 coisas que você, se pudesse, mudaria/ adicionaria hoje mesmo emseu website.

13) Liste até 3 websites que você considere interessantes, informando o queespecificamente lhe agrada neles.

14) Liste até 3 websites que você considere desagradáveis, informando o queespecificamente lhe desagrada neles.



48

APÊNDICE B – Diagrama de Caso de Uso UML



49

APÊNDICE C – Código da página inicial (index.php)

<?php

@include("dados/conexao.php");global $id;$paginas[0] = "home";$paginas[1] = "formacao";$paginas[2] = "atuacao";

$paginas[3] = "contato";$paginas[4] = "atuacao";$paginas[7] = "cursos";$paginas[8] = "artigos";$paginas[9] = "museu";

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Prof. Bertozzi</title>

<meta name="Robots" content="index,follow" /><meta name="author" content="Léo Diaz" /><link rel="stylesheet" type="text/css" href="css/main.css" media="screen"

/><link rel="stylesheet" type="text/css"

href="prettyphoto/css/prettyPhoto.css" media="screen" /><script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><script type="text/javascript" src="js/core.js"></script>

<script type="text/javascript" src="pngFix/jquery.pngFix.js"></script><script type="text/javascript"src="prettyphoto/js/jquery.prettyPhoto.js"></script>



</head>



50

<body>

<div id="wrapper">

<div id="logo"><h1><a href="index.html">PROFESSORBERTOZZI</a></h1>

</div>

<div id="content"><?phpinclude("include/menu_prinicipal.html");

?><div id="search">

<form method="post" action="index.html"><input type="text" class="text" name="query"

value="Buscar..." onfocus="this.value='';" onblur="this.value='Search...'" /><input type="submit" class="submit"

name="search" value="" /></form>

</div>

<div class="x"></div>

<div id="pitch"><form method="get" name="fmenu2" id="fmenu2" action="index.php">

<div class="pitch-gallery"><div class="pitch-gallery-holder" id="gallery-

pitch-holder">

<div class="pitch-gallery-div"><img src="images/pitch-2.jpg"

alt="Pitch 2" /><div class="infoline">

Telecomunicações</div>

</div><div class="pitch-gallery-div">

<img src="images/pitch-1.jpg"




51

Faça sua contribuição para o museu da Informática.<a href="index.php?id=9"> Entre em contato </a>

</div>

</div><div class="pitch-gallery-div"><img src="images/pitch-3.jpg"


Rádio Amadorismo

</div></div><div class="pitch-gallery-div">

<img src="images/pitch-4.jpg"alt="Pitch 4" />

<div class="infoline">Redes</div>

</div></div>

</div></form>

</div>

<div id="left">

<?php@ $id = $_GET['id'];

if ($id == 0){

@ include("include/home.php");

}else{

@ include("include/".$paginas[$id].".php");

}?>

<a href="index.php" class="read-more">Página

Principal</a></div>



52

<div id="right"><?php

include("include/artigosmini.php");?>

<div class="x"></div></div>

<div class="x"></div><div class="break no-border"></div>

</div>

<div id="footer">

<p>Copyright © 2012 Prof. Alexandre Dezem Bertozzi- Criação: <a href="#" title="Léo Diaz - Designer" id="leodiaz"> LéoDiaz</a></p>

</div></div><script type="text/javascript">

jGallery('pitch');

$(document).pngFix();$(document).ready(function(){

$("a[rel^='prettyPhoto']").prettyPhoto();});

</script></body></html>



53

APÊNDICE D – Código da página CSS principal (main.css)

*{ margin: 0; padding: 0; }

:focus,:active { outline: 0; }body {

font: 12px Tahoma, Arial, Sans-Serif;color: #000;background:#333;

}a { text-decoration: none; color: #000; }

a:hover { color: #000; }

.x { clear: both; }

p { line-height: 22px; margin: 0 0 22px; color:#666; }img { border: 0; }

h1 { font-size: 24px; font-weight: normal; margin-bottom: 15px;}h2 { font-size: 14px; font-weight: normal; margin-bottom: 2px; color: #333; }h3 { font-size: 14px; font-weight: bolder; margin-bottom: 10px; color: #333; }h4 { font-size: 18px; font-weight: normal; float: left; margin: 3px 0 10px; width:

460px; }

#wrapper { margin: 0 auto; width: 980px; background: url(../images/bg.jpg) no-repeat; }

#logo { padding: 20px 12px 10px; }#logo h1 { font: bold 24px Arial; text-shadow: 1px 1px 1px #fff; letter-

spacing: 4px; }#logo h1 a { color: #333; }

#logo h1 a span { color: #000; }#content { background: #fff; width: 980px; }

.menu {list-style:none;width: 640px;float: left;margin-top: 14px;margin-right: 15px;margin-bottom: 0;

margin-left: 10px;}



54

.menu li { float: left; margin: 0 4px 0 0; }

.menu li a { display: block; font-size: 14px; padding: 14px 24px; border:1px solid #fff; }

.menu a:hover, .menu li.current a { border: 1px solid #ddd; }

.menu li ul { display: block; background: #fff; margin: -1px 0 0;position: absolute; display: none; z-index: 2; border: 1px solid #ddd; }

.menu li ul li { float: none; display: inline; margin: 0; padding: 0; }

.menu li ul li a { width: auto; margin: 4px; white-space: nowrap; }

#search {float: right;width: 260px;display: inline;

margin-top: 23px;margin-right: 18px;margin-bottom: 23px;margin-left: 18px;

}#search .text {width: 180px;height: 16px;border: 1px solid #ddd;

padding: 5px;float: right;color: #888;

}#search .submit { float: right; border: 0; background: #000

url(../images/search.gif) no-repeat center 8px; width: 32px; height: 28px;padding-top: 1px; }

#pitch { margin-bottom: 30px; }#pitch .infoline { margin-top: -70px; padding: 25px 0 25px 25px;

background: #000; font-size: 18px; width: 955px; height: 18px; opacity:0.70;filter:alpha(opacity=70); color: #fff; }

.pitch-gallery { overflow: hidden; width: 980px; position: relative; }.pitch-gallery-holder { width: 3920px; position: relative; top: 0; left:

0; }.pitch-gallery-div { float: left; }

#left { width: 600px; float: left; margin-left: 25px; display: inline; }

#left img { float: left; margin: 5px 20px 2px 0; padding: 3px; border: 1pxsolid #ccc; }



55

#left form { padding-left: 45px; }#left label { float: left; display: block; clear: both; padding: 3px 0; color:

#666; font-weight: normal; width: 150px; }#left .lcurrent { font-weight: bold; }

#left label img { vertical-align: middle; }#left input.text, textarea, select { float: left; margin: 0 5px 10px 0;padding: 7px; width: 350px; border: 1px solid #ccc; }

#left textarea { height: 200px; }#left select { width: 366px; }#left input.radio { }

#left input:focus { border-color:#aaa; }#left textarea:focus { border-color: #aaa; }

.error { font-size: 10px; color: #666; margin: 0 0 10px 150px; display:none; }

#left .submit { border: 0; background: #000; color: #fff; padding: 5px;float: left; margin-left: 150px; }

ul { color: #666; margin: 0 0 10px 30px; line-height: 18px; }ol { color: #666; margin: 5px 0 5px 30px; line-height: 18px; }

#contact-back { margin: 12px 40px 0 0; float: right; }

.post { position: relative; margin-bottom: 20px; height: 127px; }

.post-options { position: relative; margin: -37px 0 40px 0; font-size: 10px; color:#666; }

#right { width: 260px; float: right; border-left: 1px solid #ccc; padding-left: 36px;margin-right: 25px; display: inline; }

#feature { margin-left: 25px; padding-bottom: 10px; }.small-post { float: left; width: 260px; margin-right: 75px; }

.small-post img { border: 1px solid #ccc; padding: 3px; margin-bottom: 10px; }

.last { margin-right: 0; }#feature ul { margin-top: -11px; }

#footer { color: #666; font-size: 11px; margin: 20px 0 20px 10px; }

.post-info { font-size: 11px; color: #999; }

.read-more { background: url(../images/link.gif) no-repeat center left; padding-left: 13px; font-size: 10px; }.break { border-top: 1px solid #ccc; margin: 30px 0; display: block; }

.no-border { border: 0; }.space { margin-bottom: 20px; }



56

#leodiaz a{

color:#666;

}#leodiaz a:hover{

color:#CCC;}

.titulo{color:#333; !importantfont-family:Georgia, "Times New Roman", Times, serif;font-weight:bold;

font-style:italic;}



57

APÊNDICE E – Web Standards CheckList

Web Standards checklistSite name: ________________________

Site address: ________________________Date: ________________________

1. Quality of code

□ The site has full and correct Doctype

□ The site uses character set

□ The site uses valid (X)HTML

□ The site uses valid CSS

□ The site uses minimal CSS hacks□ The site has no unnecessary classes or ids

□ The site uses well structured code

□ The site has no broken links

□ The site has been checked for speed andpage size

□ The site has no JavaScript errors

2. Degree of separation betweencontent and presentation

□ Where possible, decorative images in CSS□ The site uses CSS for all presentationalAspects

3. Accessibility for users

□ The site uses “alt" attributes for images

□ The site uses relative units for text size

□ The site layout is stable if font sizeincreases

□ The site uses visible skip menus

□The site uses accessible forms

□ The site uses accessible tables

□ The site has sufficient colourbrightness/contrasts

□ The site does not use colour alone forcritical information

□ The site uses delayed responsiveness fordropdown menus

□ The site uses descriptive links

4. Accessibility for devices

□ The site works acceptably across targetbrowsers



1

□ Content is accessible without CSS

□ Content is accessible without images

□ Content is meaningful in text browsers

□ The content is accessible when printed?

□ The content is accessible on Hand Helddevices?

□ The site has detailed metadata?

□ The site work well in different windowsizes?

5. Basic Usability

□ The site has clear visual hierarchy?

□ Headings clearly indicate the structureof the document

□ Navigation is easy to understand

□ Navigation is consistent throughout site

□ The site uses underlined links

□ The site uses consistent and appropriatelanguage?

□ The site has easy to find sitemap andcontact page

□ The site has a search tool

□ The site has link to the home page onevery page

□ The site has clearly defined visited links

6. Site management

□ The site has a meaningful 404 error page

□ The site has friendly URLs

□ The site allows URLs to work without "www"

□ The site has a favicon

Documents

TCC Leonildo Wagner - Reestruturação de Website Utilizando Padrões W3C 29-03-2012