FACULDADE PITGORAS DE DIVINPOLIS LEONILDO WAGNER DE OLIVEIRA DIAS GONALVES

REESTRURAO DE WEBSITE UTILIZANDO PADRES W3C

DIVINPOLIS 2012

LEONILDO WAGNER DE OLIVEIRA DIAS GONALVES

REESTRURAO DE WEBSITE UTILIZANDO PADRES W3C

Monografia apresentada Faculdade Pitgoras de Divinpolis, como requisito parcial para obteno do grau de bacharel em Sistemas de Informao. Orientador: Prof. Ygor Colen Morato

DIVINPOLIS 2012

LEONILDO WAGNER DE OLIVEIRA DIAS GONALVES

REESTRURAO DE WEBSITE UTILIZANDO PADRES W3C

Trabalho de Concluso de Curso, aprovado como requisito parcial para obteno do grau Bacharel em Sistemas de Informao no Curso de Sistemas de Informao da Faculdade Pitgoras de Divinpolis.

Habilitao: bacharel em Sistemas de Informao

Data de Aprovao ______/______/______

Banca Examinadora:

_____________________________________ Prof. Ygor Colen Morato Orientador Faculdade Pitgoras de Divinpolis

_____________________________________ Prof. Michelle de Castro Meira, Psicloga Especialista em Docncia do Ensino Superior. Avaliador 01 - Faculdade Pitgoras de Divinpolis

_____________________________________ Prof. Roberto Csar Batista Freitas Avaliador 02 - Faculdade Pitgoras de Divinpolis

O nico lugar aonde o sucesso vem antes do trabalho no dicionrio. (Albert Einstein).

RESUMO

Este projeto consiste na reestruturao de um website, com a aplicao dos padres produzidos pelo World Wide Web Consortium (W3C), destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de prticas que possibilitem a criao de uma Web acessvel a todos, independentemente dos dispositivos usados ou de suas necessidades especiais. O site escolhido para ser reestruturado pertence ao Professor Alexandre Dezem Bertozzi,

anteriormente construdo pelo mtodo tradicional, cuja estrutura e codificao no seguiam diretrizes nem padres voltados para usabilidade. O novo site, desenvolvido para substituir a verso 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 razes prticas para que desenvolvedores estejam engajados na utilizao destas normas, economizando tempo, dinheiro e proporcionando uma melhor experincia para o usurio. Aps o termino do projeto foram constatados diversos
benefcios como portabilidade, melhor organizao e distribuio do contedo e carregamento facilitado.

PALAVRAS-CHAVE: Padres 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 better user 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 Cdigo HTML. Fonte: Autor da pesquisa.................... 15 Figura 2 - Exemplo de estrutura de um Cdigo XML. Fonte: Autor da pesquisa. ......................................................................................................................... 17 Figura 3 - Exemplo de Cdigo CSS. Fonte: Autor da pesquisa....................... 18 Figura 4 - Diagrama de Caso de Uso utilizado durante o projeto. Fonte: Autor da pesquisa. ..................................................................................................... 22 Figura 5 - Protocolo HTTP. Fonte: Autor da pesquisa ..................................... 23 Figura 6 - Protocolo FTP. Fonte: Autor da pesquisa ....................................... 24 Figura 7 - Localizao dos Escritrios W3C. Fonte: COMIT GESTOR DA INTERNET (CGI), 2012. ................................................................................... 26 Figura 8 - Interface do Adobe Dreamewaver CS5 Fonte: Autor da pesquisa .. 30 Figura 9 - Interface do Adobe Fireworks Fonte: Autor da pesquisa ................ 31 Figura 10 - Estudo do Gartner mostra um crescimento forte no mercado de DBMS - 2008. Fonte: ORACLE CORPORATION, 2012. ................................. 33 Figura 11 - Interface do Mysql Workbench. Fonte: Autor da pesquisa. ........... 34 Figura 12 - Wireframe - Esboo do Layout Fonte: Autor da pesquisa ............. 38 Figura 13 - Novo Layout do site www.bertozi.com.br. Fonte: Dados da pesquisa. .......................................................................................................... 40

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

SUMRIO
1 INTRODUO .................................................................................................................. 10 1.1 1.2 Justificativa ................................................................................................................. 11 Objetivos ..................................................................................................................... 11 Objetivo Geral ..................................................................................................... 11 Objetivos Especficos .......................................................................................... 12

1.2.1 1.2.2 1.3 2

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

IMPORTNCIA DAS LINGUAGENS DE MARCAO NA INTERNET ....................... 14 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.10 HTML ......................................................................................................................... 14 XML ............................................................................................................................ 16 CSS.............................................................................................................................. 17 Tableless ...................................................................................................................... 19 Javascript ..................................................................................................................... 19 PHP ............................................................................................................................. 20 UML ............................................................................................................................ 21 Protocolo HTTP .......................................................................................................... 22 Protocolo FTP ............................................................................................................. 23 Navegadores ................................................................................................................ 24

WORLD WIDE WEB CONSORTIUM (W3C) ................................................................. 25 3.1 3.2 PADRES W3C OU WEB STANDARDS ................................................................ 26 VANTAGENS NO USO DE PADRES WEB (WEB STANDARDS) .................... 27 Uniformidade ...................................................................................................... 28 Acessibilidade ..................................................................................................... 28

3.2.1 3.2.2 4

TECNOLOGIA EMPREGADA ......................................................................................... 29 4.1 Ferramentas ................................................................................................................. 29 Adobe Dreamweaver ........................................................................................... 29 Adobe Fireworks ................................................................................................. 30 Filezilla ................................................................................................................ 31 Banco de Dados Mysql ....................................................................................... 32 Mysql Workbench ............................................................................................... 33 Servidor Apache .................................................................................................. 34

4.1.1 4.1.2 4.1.3 4.1.4 4.1.5 4.1.6 5

METODOLOGIA DE DESENVOLVIMENTO................................................................. 36 5.1 5.2 5.3 Levantamento de dados ............................................................................................... 36 WIREFRAME ............................................................................................................. 36 Modelagem de Layout ................................................................................................. 38

5.4 5.5 5.6 6

Codificao ................................................................................................................. 40 Dados........................................................................................................................... 41 Fase Testes .................................................................................................................. 41

CONSIDERAES FINAIS .............................................................................................. 43 6.1 6.2 Concluses .................................................................................................................. 43 Recomendaes Para Trabalhos Futuros ............................................................ 44

REFERNCIAS .......................................................................................................................... 45 APNDICE A Questionrio aplicado ao proprietrio do website. .......................................... 47 APNDICE B Diagrama de Caso de Uso UML ...................................................................... 48 APNDICE C Cdigo da pgina inicial (index.php) ............................................................... 49 APNDICE D Cdigo da pgina CSS principal (main.css) .................................................... 53 APNDICE E Web Standards CheckList ................................................................................ 57

11

INTRODUO

A internet um dos meios de comunicao mais utilizados pelo homem e seu crescimento ocorreu de forma no planejada, se expandindo a uma velocidade surpreendente, todos os dias novos servidores so ligados, novas pginas so hospedadas e novos usurios acabam descobrindo este novo mundo. A World Wide Web foi criada no incio da dcada de 1990, por Tim Berners-Lee, para aperfeioar a comunicao no CERN (Centre European pour la Recherche Nucleaire). Berners-Lee criou a HTML (Hypertext Markup Language), uma linguagem de marcao baseada na bem-sucedida SGML (Standard Generalized Markup Language), para formatar os documentos que seriam distribudos em rede e tambm desenvolveu protocolos de comunicao para tornar vivel seu novo sistema de informaes em hipertexto (LEE, 1994, p. 76-82). O propsito original da Web era a existncia de um ambiente virtual onde as pessoas pudessem trocar informaes livremente, e que tais informaes pudessem ser acessadas de diversos dispositivos. Para tornar este conceito uma realidade foi necessria para a criao de Padres Web, ou Web Standards, que segundo definio do W3C (World Wide Web Consortium), so um conjunto de normas, diretrizes, recomendaes, notas, artigos, tutoriais e afins, de carter tcnico, produzidos pela mesma organizao, destinados a orientar desenvolvedores e projetistas para o uso de prticas que possibilitam a criao de uma web acessvel a todos, independentemente dos dispositivos, linguagens, plataformas e de suas particularidades 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 heterogneo, desenvolvido visando comunicao entre seres humanos; esse sempre foi o foco da World Wide Web, a Internet. Nos ltimos anos ela vem sofrendo diversas transformaes, no modo como so tratadas suas informaes realizadas a partir de tecnologias novas. Novos

11

conceitos de design, novos formatos de integrao, facilidade de acesso e de distribuio, rapidez na manipulao de dados, todas essas so caractersticas da atual Web, fazendo com que ela se torne cada vez mais fcil e seus usurios gerem cada vez mais contedo.

1.1

Justificativa

Nota-se que, mesmo nos dias atuais, o desenvolvimento de pginas para internet carece da utilizao de padronizao e normatizao. Este fato acarreta muitos problemas como: incompatibilidade com navegadores e plataformas diversas, difcil manuteno e, por vezes, lentido no

carregamento. O website utilizado neste Trabalho de Concluso de Curso foi escolhido devido construo de sua verso anterior, que se deu com uso de tecnologias no modelo tradicional de desenvolvimento utilizado na web. Faziase visvel necessidade de aplicao de padres. Para alcanar resultados satisfatrios de desempenho e

funcionamento, um novo modelo foi desenvolvido segundo padres de desenvolvimento web, chamados de padres W3C.

1.2

Objetivos

1.2.1 Objetivo Geral

O objetivo geral deste trabalho demonstrar, atravs da reestruturao de um website, a aplicao de padres web, recomendados pela W3C, a fim de verificar os pontos positivos e negativos no desenvolvimento web recomendado por esta organizao se comparado ao mtodo tradicional.

12

1.2.2 Objetivos Especficos

Separar contedo e apresentao Tornar cdigo limpo e correto; Simplificar manuteno e desenvolvimento Facilitar a compreenso do cdigo Reduzir custos e trabalho Tornar o website compatvel com as leis e diretrizes de

acessibilidade Maximizar desempenho Simplificar adaptao Portabilizar o cdigo Tornar compatvel com verses futuras Validar cdigo Maximizar velocidade no carregamento da pgina Reduzir tamanho das pginas Melhorar posicionamento em mecanismos de busca.

1.3

Estrutura Textual

monografia

foi

dividida

em

seis

captulos

para

melhor

esclarecimento do tema tratado. No primeiro captulo introduzido o projeto assim como os conceitos mais bsicos do desenvolvimento web e da prpria World Wide Web. No segundo captulo so apresentadas, de modo individual as linguagens, tecnologias e tcnicas utilizadas durante o desenvolvimento deste projeto, bem como a motivao para sua escolha. O terceiro captulo dedicado, exclusivamente, aos assuntos relacionados W3C, conceitos e aplicaes de seus Web Standards. Em sequncia, o quarto captulo trata das ferramentas e softwares utilizados durante todas as fases do desenvolvimento deste projeto.

13

O quinto captulo detalha a metodologia de desenvolvimento seguida neste projeto. No sexto e ltimo captulo so feitas as consideraes finais a respeito do projeto. Alm de uma anlise sobre aplicao dos padres W3C, feita a partir da comparao do antes e depois, tambm so levantadas sugestes sobre futuras implementaes.

14

IMPORTNCIA DAS LINGUAGENS DE MARCAO NA INTERNET

Este captulo dedicado a apresentar as linguagens de marcao e programao utilizadas no desenvolvimento de sites e, consequentemente, um pouco da histria da internet. As linguagens e tcnicas aqui apresentadas so de suma importncia neste trabalho, pois so consideradas base para construo do website apresentado no mesmo. Tambm importante ressaltar que os Padres W3C consistem na utilizao correta de tais linguagens.

2.1

HTML

Segundo LEE (1994), dentre as linguagens de marcao, a Hypertext Markup Language (HTML) ainda a mais utilizada na Internet, mesmo que muitas a considerem, simples e limitada. Sua utilizao est voltada tanto para a estruturao de documentos quanto na apresentao 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 representao mais evoludas, no se usando apenas tags predefinidas a HTML continua sendo utilizada em larga escala. A HTML deriva da pioneira linguagem de marcao, Standard Generalized Markup Language (SGML), foi criada por Tim Berners Lee o idealizador da WWW especificamente para a composio e apresentao de documentos na Web. Um documento estruturado pode ser apresentado ao usurio de diferentes formas, sendo em uma impresso em papel, na tela de um navegador de um Sistema Operacional de Interface Grfica, um moderno telefone celular ou em outro equipamento multimdia porttil.

Software utilizado para navegao na internet. Responsvel por interpretar as pginas codificadas e exibi-las de forma legvel aos usurios. Tambm chamado de browser ou web browser.

15

Figura 1 - Estrutura do Cdigo HTML. Fonte: Autor da pesquisa.

Os requisitos para estruturao de um documento so proporcionais aos requisitos necessrios para sua apresentao. Este um dos principais problemas da linguagem HTML em que ambos esto misturados e que recentemente foram atacados em duas frentes: - introduo de Folhas de Estilo, tambm conhecida como Cascading Style Sheets (CSS), permitindo especificar a apresentao desejada para cada elemento de um documento, separadamente da sua marcao HTML, especificao da linguagem XHTML. Sucessora de HTML 4.01, seguindo o padro da nova

metalinguagem XML voltada para o intercmbio de documentos via Web de forma independente da sua apresentao final e um subconjunto restrito da linguagem pioneira de marcao, SGML. A HTML enriquecida por os programas externos a ela, os quais conseguem realizar todas as tarefas to quanto s demais linguagens. Esses programas so reconhecidos como plug-ins. Plug-ins so sistemas criados pelos fabricantes de navegadores Web. Eles permitem a execuo de recursos que no foram desenvolvidos em HTML, assim como udio e vdeo em uma pgina Web. O grande problema da utilizao de plug-in que, para cada recurso utilizado em um documento HTML, deve-se possuir seu respectivo plug-in o que pode diminuir a eficincia do computador, j que mais programas devero estar instalados em um navegador de Internet para acessar todos e quaisquer sites.

16

2.2

XML

Extensible

Markup

Language

(XML)

tido

como,

uma

metalinguagem de marcao criada a partir de SGML2. Na verdade, ela uma forma restrita de SGML. Seus principais objetivos so:

Prover o intercmbio de documentos Suportar uma grande gama de aplicaes Facilitar a anlise de documentos XML por programas; Documentos XML devem ser legveis por humanos; Economia de tags3 de marcao no importante; Ter uma especificao formal para a marcao de documentos.

Como a linguagem XML no possui um conjunto pr-definido de tags ou elementos, ela considerada uma meta-linguagem4 para descrio de linguagens de marcao. Desta forma, num documento XML, os elementos, tambm chamados de tags, so usados para definir o significado dos dados e podem ser definidos livremente de acordo com as necessidades da aplicao (DAUM;MERTEN, 2003).

2 3 4

Standard Generalized Markup Language.

So rtulos usados para informar ao navegador como deve ser apresentado o website.
Consistem em uma modificao de uma linguagem e no uma linguagem verdadeira

17

Figura 2 - Exemplo de estrutura de um Cdigo XML. Fonte: Autor da pesquisa.

A XML no fornece mecanismos para apresentao de dados nem para ligao entre documentos. Tais recursos so disponibilizados por outras especificaes de linguagens como, por exemplo, Extensible Style Language (XSL) e Xlink. A primeira utilizada na descrio de estilos, j a segunda especifica links entre documentos. O suporte que a XML oferece a separao entre contedo e apresentao um aspecto de suma importncia na linguagem. Torna-se imperativo ainda acrescentar que XML uma linguagem simples, possui um conjunto de estruturas de dados ricas, permite a troca e exibio de contedo de bases de dados e pode ser utilizada como formato para troca de mensagens na comunicao entre aplicaes. Dentre essas, a troca de mensagens na comunicao entre aplicaes de empresas oferece um meio de comunicao de baixo custo para aplicaes B2B (Business to Business), e essa uma das reas que tambm pode tirar proveito da tecnologia XML.

2.3

CSS

O Cascading Style Sheet (CSS), uma linguagem de estilo que consiste 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 declarao que vise formatao, a apresentao do documento. Isto significa dizer que tags do tipo <font>, <b>, <i>... Etc., bem como uso de colunas e linhas de tabelas para obteno de espaamentos no so admitidos ou admitidos com restries 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 marcao de um mais elementos presentes do cdigo HTML. importante ressaltar que podem haver interpretaes do cdigo por navegadores de diferentes fabricantes, apesar das recomendaes e padres indicados pela World Wide Web Consortium (W3C, 2012).

O Figura 3 abaixo demonstra a estrutura de uma pgina CSS. O cdigo da figura abaixo encontra-se completo no Apndice D.

Figura 3 - Exemplo de Cdigo CSS. Fonte: Autor da pesquisa.

Adoo desta linguagem resulta em mltiplas vantagens e benefcios que em geral no so obtidos quando um website desenvolvido com base no uso de tabelas e atributos internos das tags HTML.

19

2.4

Tableless

Houve uma poca em que toda pgina da web utilizava-se de tabelas para organizar e estruturar os dados que eram exibidos aos usurios pelos navegadores. Este modo de renderizao tinha um alto custo de processamento, o que tornava o carregamento de websites lento e desagradvel, aos olhos do usurio (NIELSEN;HOA, 2006). Caractersticas comuns em sites desenvolvidos pelo modelo tradicional, amplamente utilizados na dcada de 90 incluem: Layout baseados em tabelas; Camada de apresentao unida ao contedo; Cdigo invlido, inacessvel e semanticamente incorreto.

A Tableless uma tcnica que consiste na no utilizao de tabelas para a confeco do layout da interface de uma pgina. Isto feito atravs do posicionamento de tags HTML assim como <diva> ou <spam> por meio de regras e definies feitas em um arquivo CSS externo a pgina de contedo.

2.5

Javascript

Atualmente a principal linguagem para programao client-side em navegadores web. Foi concebida para ser uma linguagem script com orientao a objetos baseada em prottipos, tipagem fraca e dinmica e funes de primeira classe. Possui suporte programao funcional e apresenta recursos como fechamentos e funes de alta ordem comumente indisponveis 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 lanada pela primeira vez na verso beta do navegador Netscape 2.0 em setembro de 1995 (GOODMAN, 2001).

JavaScript suporta os elementos de sintaxe de programao estruturada da linguagem C (por exemplo, if, while, switch. JavaScript faz distino entre expresses 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 no pelo lado cliente como o Javascript. (WELLING e THOMPSON, 2005)

Capaz de processar hipertexto pode ser embutido dentro do cdigo HTML e criar conexes 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 formulrios, gerar pginas com contedo dinmico ou enviar e receber cookies (PHP.ORG, 2012). Esses so 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, vrias variantes Unix (incluindo HP-UX, Solaris e OpenBSD), Microsoft Windows, Mac OS X, RISC OS, e provavelmente outros. O PHP tambm 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 Orientao a Objetos. No ramo da Engenharia de Software, a UML se tornou um padro para representar de modo grfico as entidades e elementos de um sistema e suas relaes (GUEDES, 1999).
Deve ficar bem claro, no entanto, que a UML no uma linguagem de programao, mas uma linguagem de modelagem, cujo objetivo auxiliar os engenheiros de software a definir as caractersticas do software, tais como seus requisitos, seu comportamento, sua

22
estrutura lgica, a dinmica de seus processos e at mesmo suas necessidades fsicas em relao 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 mltiplas vises do sistema a ser modelado, analisando-o e modelando-o sob diversos aspectos, procurando-se assim atingir a completitude da modelagem. Com inteno de melhor visualizar o funcionamento de um website antes de sua concepo e evidenciar suas caractersticas faz se necessrio o

desenvolvimento de alguns tipos de diagramas.

2.8

Protocolo HTTP

O Hypertext Transfer Protocol (HTTP) um protocolo de aplicao responsvel pelo tratamento de pedidos e respostas entre cliente 5 e servidor6
5 6

Cliente um computador que faz requisies de um servio ou recurso. Servidor um computador responsvel por atender a requisio feita pelo cliente.

23

na World Wide Web. Ele surgiu da necessidade de distribuir informaes pela Internet e para que essa distribuio fosse possvel foi necessrio criar uma forma padronizada de comunicao 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 comunicao entre computadores na Internet e a especificar como seriam realizadas as transaes entre clientes e servidores, atravs do uso de regras bsicas. (W3C, 2012) O protocolo HTTP faz a comunicao entre o cliente e o servidor por meio de mensagens. O cliente envia uma mensagem de requisio de um recurso e o servidor envia uma mensagem de resposta ao cliente com a solicitao.

Figura 5 - Protocolo HTTP. Fonte: Autor da pesquisa

Usado pela WWW desde 1990. A primeira verso de HTTP, era um protocolo simples para a transferncia de dados no formato de texto no padro conhecido como American Standard Code for Information Interchange (ASCII).

2.9

Protocolo FTP

File Transfer Protocol (FTP) uma forma bastante rpida e simples de se transferir arquivos de um computador para outro. Hoje em dia utilizado

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 usurios possam acessar e interagir com documentos virtuais ou pginas web. A funcionalidade dos navegadores a de que quando for feito um pedido de um determinado contedo da internet, providenciar a apresentao do mesmo. Eles so o principal meio de acesso a internet utilizando vrios protocolos entre eles TCP/IP (Transmission Control Protocol / Internet Protocol), HTTP e at mesmo FTP (SILVA, 2008). O navegador, tem a capacidade de ler vrios tipos de arquivo/ficheiros, sendo nativo o processamento dos mais comuns (HTML, XML, JPEG,GIF, PNG, etc.), e os restantes possveis atravs de plugins (Flash, Java, etc.). A finalidade principal do navegador fazer-se o pedido de um determinado contedo da Web, e providenciar a exibio do mesmo. Geralmente, quando o processamento do ficheiro no possvel atravs do mesmo, este apenas transfere o ficheiro localmente. Quando se trata de texto

25

(Markup Language e/ou texto simples) e/ou imagens bitmaps, o navegador tenta exibir o contedo.

WORLD WIDE WEB CONSORTIUM (W3C)

O W3C uma organizao, um consrcio, onde eles padronizam alguns formatos da Web, por exemplo, HTML, CSS, e outros. O Consrcio World Wide Web (W3C) uma comunidade internacional com organizaes filiadas, no qual trabalham em tempo integral e junto com o pblico trabalham para desenvolver padres para Web (Web Standards). Liderados pelo inventor da Web Tim Berners-Lee, a misso do W3C levar a Web ao seu pleno potencial. Segundo o site oficial, a misso da W3C : incentivar e auxiliar na adoo de padres para o desenvolvimento pleno da Web em longo prazo; Organizar atividades na regio para promover e demonstrar as ferramentas e padres desenvolvidos pelo W3C Mundial. (W3C, 2011). Foi fundado por Tim Berners-Lee em 1994 para levar a Web ao seu potencial mximo, por meio do desenvolvimento de protocolos comuns e fruns abertos que promovam a sua evoluo e assegurem a sua interoperabilidade.

Atualmente existem diversos escritrios da W3C ao redor do mundo, sendo representados por organizaes, com no caso do Brasil o Comit Gestor de Internet (CGI).

26

Figura 7 - Localizao dos Escritrios W3C. Fonte: COMIT GESTOR DA INTERNET (CGI), 2012.

3.1

PADRES W3C OU WEB STANDARDS

So um conjunto de especificaes tcnicas e orientaes atravs de um processo projetado para maximizar a consenso sobre as

recomendaes, garantindo qualidades tcnicas e editoriais, alm de transparentemente alcanar apoio da comunidade de desenvolvedores, do consrcio e do pblico em geral (W3C, 2012). O W3C dispe de diversos modos de visualizao de suas recomendaes: Por tecnologia (como todas as especificaes relacionadas HTML) Por status (ordenada inicialmente pelas mais recentes e, em seguida, agrupadas por status, das que j so Recomendao at as que ainda esto no status de Rascunho). Por data (a partir das mais recentes) Por ttulo Por grupo (os grupos que trabalham nas especificaes)

27

3.2

VANTAGENS NO USO DE PADRES WEB (WEB STANDARDS)

Existem

diversas

vantagens

na

aplicao

de

padres

no

desenvolvimento de sistemas e pginas da internet. Dentre tais vantagens pode-se destacar: uniformidade, simplicidade, liberdade, separao de contedo da apresentao, acessibilidade e estabilidade.

DESENVOLVIMENTO TRADICIONAL

DESENVOLVIMENTO EM ACORDO COM OS PADRES WEB

EXTENSO DA MDIA IMPRESSA

ACESSVEL POR QUALQUER DISPOSITIVO

LEIAUTES BASEADOS EM TABELAS CAMADA DE APRESENTAO ANINHADA AO CONTEDO

LEIAUTES BASEADOS EM CSS CSS PARA SEPARAO DO CONTEDO DA APRESENTAO

CDIGO INVLIDO CDIGO INACESSVEL

CDIGO VLIDO CDIGO ACESSVEL (POR HUMANOS E MQUINAS)

CDIGO SEMANTICAMENTE INCORRETO

MARCAO SEMANTICAMENTE CORRETA

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

Uma das principais vantagens do se utilizar os padres Web para desenvolver um website a facilidade de manuteno. Atravs de um nico

28

arquivo CSS, toda uma estrutura pode ser alterada sem a mudana de uma linha sequer de HTML. A seguir, apresentado um exemplo de uma pgina visualizada sem formatao 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 marcao HTML, contudo, sem perder a beleza no design, e, na figura 1.3, observa-se a facilidade de variao de estilo da mesma pgina, feita sem alterao alguma na marcao HTML, e sim de somente alguns atributos no CSS.

3.2.1 Uniformidade

3.2.2 Acessibilidade

Acessibilidade significa qualidade de ser acessvel ou facilidade de interao. Quando focada em tecnologia, tem o objetivo de tornar os computadores e a Web mais acessveis 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 contedos para a Web (NIELSEN e HOA, 2006).

29

TECNOLOGIA EMPREGADA

Este captulo tem o propsito de listar as ferramentas utilizadas durante o processo de desenvolvimento do corrente projeto, explicar seu funcionamento, exemplificar seus usos e tambm justificar as escolhas de tais ferramentas.

4.1

Ferramentas

Existem
8

diversos

softwares,

IDEs,

Ferramentas

CASE7

frameworks com o propsito de auxiliar o desenvolvimento de pginas para a Internet. Existem boas ferramentas gratuitas e at de cdigo-fonte aberto e outras pagas. Durante este projeto foram utilizadas algumas destas ferramentas, escolhidas segundo alguns critrios como experincia e conhecimento sobre o software, usabilidade e capacidade de gerar bons resultados.

4.1.1 Adobe Dreamweaver

O Adobe Dreamweaver um programa para modelar pginas da internet, contando tanto com recursos para programadores (com base em sintaxe e codificao) quanto para designers, com a parte visual largamente desenvolvida e aperfeioada (ADOBE SYSTEMS INCORPORATED, 2012). Esta ferramenta robusta desenvolvida pela Adobe, d suporte a diversas linguagens tanto de programao quanto de formatao como HTML,

Computer-Aided Software Engineering. Classificao que abrange ferramentas baseadas em computadores que auxiliam atividades de engenharia de software 8 Em desenvolvimento de software, uma abstrao que une cdigos comuns entre vrios projetos de software provendo uma funcionalidade genrica.

30

Active Server Pages (ASP), Java Server Pages JSP, ColdFusion9, Javascript, CSS, XML e XSL (XSLT).

PHP,

A interface do programa simples e intuitiva. Isto facilita a utilizao para quem j conhece esse tipo de ferramenta. No entanto uma ferramenta avanada e exige certo grau de experincia 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 codificao e testes deste projeto. 4.1.2 Adobe Fireworks

O Adobe Fireworks um software pertencente ao pacote Criative Suite desenvolvido pela Adobe, com a funo de auxiliar webdesigners, no desenvolvimento de interfaces em HTML e CSS para websites de modo visual. (ADOBE SYSTEMS INCORPORATED, 2012)

uma plataforma de desenvolvimento Web proprietria criada pela Adobe Systems.

31

Com interface semelhante ao Adobe Dreamweaver, oferece recursos para integrao com o mesmo e com o Adobe Photoshop. Foi utilizado no design na criao de wireframes e no desenho inicial do layout.

Figura 9 - Interface do Adobe Fireworks Fonte: Autor da pesquisa

4.1.3 Filezilla

O Filezilla um cliente FTP gratuito, com interface simplificada e intuitiva. Encontra-se disponvel em diversos idiomas inclusive o portugus. 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. Disponvel em 40 idiomas, incluindo o portugus do Brasil, suporta transferncia e pausa para grandes transferncias (acima de 4GB) e disponibiliza o sistema Drag-and-drop10 (FILEZILLA.ORG, 2011).

10

Arraste e solte.

32

A transferncia por protocolo FTP no ocorre atravs de Peer to Peer (P2P), ou seja, de um usurio para outro. necessrio 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 milhes de instalaes pelo mundo, segundo o site do fabricante. Entre os usurios do banco de dados MySQL esto: 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. tambm o banco de dados de escolha para uma nova gerao de aplicativos criados na pilha LAMP (Linux, Apache, MySQL, PHP / Perl / Python11.) Muitas das organizaes 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 crticos de negcios de sistemas e pacotes de software (ORACLE CORPORATION, 2012).

11

Linguagem de programao de alto nvel, interpretada, imperativa, orientada a objetos, de tipagem dinmica e forte.

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 cdigo aberto mais popular torna-se uma boa escolha para uma ampla gama de desenvolvedores de banco de dados, DBAs12 e gerentes de TI que querem um banco de dados de alto desempenho, confivel, acessvel e fcil de usar. imperativo ressaltar que devido a sua fcil integrao com o PHP, o Mysql includo, quase que obrigatoriamente, nos pacotes de hospedagem de sites da Internet oferecidos atualmente.

4.1.5 Mysql Workbench

O Mysql Workbench uma ferramenta grfica para modelagem de dados, integrando criao e designer. A ferramenta possibilita trabalhar

12

Em ingls sigla que traduzida, literalmente, designa o capacitado pela licenciatura de administrar banco de dados onde esto armazenadas informaes.

34

diretamente com objetos schema, alm de fazer a separao do modelo lgico do catlogo de banco de dados (ORACLE CORPORATION, 2012).

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

Segundo ORACLE CORPORATION (2012), toda a criao 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 caractersticas citadas anteriormente, aliadas a sua simplicidade e desempenho satisfatrio tornaram-se razes 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 fcil13.

4.1.6 Servidor Apache

O Servidor Apache (ou Servidor HTTP Apache, em ingls: Apache HTTP Server, ou simplesmente: Apache) o mais bem sucedido servidor web
13

O software pode ser conseguido na pgina do fabricante presente no endereo: http://www.mysql.com/products/workbench/.

35

livre. Foi criado em 1995 por Rob McCool, ento funcionrio do National Center for Supercomputing Applications (NCSA). Numa pesquisa realizada em dezembro de 2007, foi constatado que a utilizao 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 milhes de sites mais movimentados. a principal tecnologia da Apache Software Foundation, responsvel por mais de uma dezena de projetos envolvendo tecnologias de transmisso via web, processamento de dados e execuo de aplicativos distribudos (APACHE SOFTWARE FOUNDATION, 2012). O servidor compatvel com o protocolo HTTP verso 1.1. Suas funcionalidades so mantidas atravs de uma estrutura de mdulos, permitindo inclusive que o usurio escreva seus prprios mdulos utilizando Application Programming Interface (API) ou Interface de Programao de Aplicativos, do software. Alm de gratuito, o Apache HTTP Server um servidor seguro, eficiente e extensvel que fornece servios HTTP em sincronia com os padres atuais de HTTP. Outro ponto importante que se encontra verses 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 passvel de modificaes sem que seja necessrio grande esforo para modificaes futuras. No h uma metodologia padro de

desenvolvimento em documentos e pginas para internet. Portanto se fez necessrio adotar prticas 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 proprietrio do site em questo, Prof. Alexandre Dezem Bertozzi. Aps a entrevista inicial, foi elaborado um questionrio, com perguntas a respeito do site, com: funcionalidades e detalhes da verso anterior e expectativas para uma nova verso. Atravs deste questionrio comumente chamado de briefing no meio de desenvolvimento web, foi possvel realizar um breve estudo sobre a verso anterior e suas necessidades. Aps levantar os dados iniciais tornou-se possvel 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 propsito desta fase

37

evitar que o layout seja construdo e modificado diversas vezes, sem conseguir atingir os parmetros de usabilidade desejados. Wireframe um esboo do layout, que descreve a estrutura e a interface de uma pgina. Nesse espao passada toda organizao de contedos como texto, imagens, logo etc. O alinhamento e a distribuio dos contedos devero ser bem posicionados. Esta fase do projeto permite visualizar e analisar o posicionamento dos dados em uma pgina de modo que fique agradvel usurio e com uma configurao que leve a um uso intuitivo. O objetivo que qualquer usurio sem conhecimento prvio seja capaz de utilizar a pgina a ser montada (KRUG, 2008). Logo aps o levantamento dos requisitos foi criado um esboo definindo a apresentao dos elementos do site, que compem o layout. Seguindo este wireframe foi montado o layout.

38

Figura 12 - Wireframe - Esboo do Layout Fonte: Autor da pesquisa

5.3

Modelagem de Layout

O Layout a parte visual de um website. Tem a funo de interface, com a qual os usurios interagem. Em Seguida aos esboos foi criada a aparncia do site..

39

Estrutura Organizao de contedos Alinhamento Distribuio dos contedos Posicionamento Permite visualizar e analisar o posicionamento dos dados em uma pgina de modo que fique: Agradvel Leve Intuitivo.

40

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

5.4

Codificao

Alm da interface construda a partir das linguagens HTML e CSS, o novo website, possui um estrutura dinmica baseada nas linguagens PHP e Javascript.

41

Diversas pginas com scripts para funes especficas se encontram armazenadas no servidor e so chamadas por meio de mtodos para incluso, pela pgina principal que altera dinamicamente seu contedo.

5.5

Dados

Para que o dinamismo da pgina pudesse ser completado, os dados foram separados da interface e das regras de negcio do site. Inicialmente foi necessrio modelar uma base de dados por meio de diagramas para simplificar a criao e o entendimento das relaes entre os dados. Posteriormente criao 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 recuperao.

5.6

Fase Testes

Inicialmente

foi

realizado

os

chamado

Teste

de

Unidade

tambm conhecido como Teste Unitrio. na fase do processo de teste em que se testam as menores unidades desenvolvidas, neste caso as pginas do website. Os alvos desse tipo de teste so os mtodos dos objetos ou mesmo pequenos trechos de cdigo. 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 o ponto de vista do seu usurio final, varrendo as funcionalidades em busca de

42

falhas. Os testes so executados em condies similares - de ambiente, interfaces sistmicas e massas de dados - quelas que um usurio utilizar no seu dia-a-dia de manipulao do sistema. De acordo com a poltica de uma organizao, podem ser utilizadas condies reais de ambiente, interfaces sistemticas e massas de dados (WELLING; THOMPSON, 2005).

43

CONSIDERAES FINAIS

Ao final do desenvolvimento da nova verso do website mencionado neste projeto, construdo sobre os padres da W3C apresenta-se a seguir as concluses ao final.

6.1

Concluses

Durante o desenrolar deste projeto ficou evidente que o uso de padres no desenvolvimento de pginas para internet, importante tanto para guiar o processo de produo de modo mais eficaz visando um produto final com maior portabilidade e produtividade, quanto para auxiliar na criao de uma internet mais acessvel. Aps o desenvolvimento foi aplicado o checklist proposto por (WEAKLEY, 2004)e apresentado no Apndice E, foi feita uma anlise de inmeros quesitos, entre eles: a qualidade do cdigo escrito; o nvel de separao entre o contedo e a apresentao; a acessibilidade para usurios, e para dispositivos diversos; alm de usabilidade e a administrao do site. Aps a aplicao dos testes propostos no checklist nos sites, verificou-se que, se padronizado, seguindo ao mximo as especificaes propostas pela W3C, obtm-se um desempenho superior em praticamente todos os aspectos analisados, sendo que o prottipo elaborado se mostrou mais leve e rpido em relao ao antigo; compatvel com navegador textual e, portanto mais acessvel. Alm de todos os itens citados anteriormente, a nova verso modelo do website apresentou-se compatvel com os navegadores que seguem os padres da W3C, e com alto nvel de separao entre o contedo e o layout atravs de CSS e XHTML.

44

6.2

Recomendaes Para Trabalhos Futuros

Buscando a continuidade deste TCC, sugere-se:

Desenvolvimento de um mdulo administrador para insero e edio de contedo.

Atualizao novas verses de linguagens de marcao para web: XHTML 2 e HTML 5;

Programao de recursos para interao entre usurios

45

REFERNCIAS

ADOBE SYSTEMS INCORPORATED. Adobe Dreamewaver CS5.5. Adobe, 2012. Disponivel em: <http://www.adobe.com/products/dreamweaver>. Acesso em: 13 mar. 2012. ADOBE SYSTEMS INCORPORATED. Adobe Fireworks CS5.5. Adobe, 2012. Disponivel em: <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 Referncia CCS 2.1. 1. ed. So Paulo: [s.n.], 2009. COMIT GESTOR DA INTERNET NO BRASIL. Guia de Referncia XHTML. 1. ed. [S.l.]: [s.n.], 2009. CYBIS, W. Ergonomia e Usabilidade, Conhecimentos, Mtodos e Aplicaes. [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 acessveis. 1. ed. Rio de Janeiro: Alta Books, 2003. FERREIRA, E.; EIS, D. Curso HTML 5: Escritrios W3C Brasil. Escritrios 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://filezillaproject.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 Prtico. 1. ed. Rio de Janeiro: Novatec, 1999. 13 p. KRUG, S. No me faa 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. So Paulo: Campus, 2006. NIELSEN, J.; TAHIR, M. Homepage usabilidade: 50 websites desconstrudos. 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. So Paulo: Novatec, 2008. 448 p. SILVA, M. S. CSS e Padres 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. So Paulo: Makron Books, 1996. W3C. Protocols. W3C, 2011. Disponivel em: <http://www.w3.org/Protocols/>. Acesso em: 06 fev. 2012. W3C. Padres. 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: 04 fev. 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 de Janeiro: Elsevier, 2005.

47

APNDICE A Questionrio aplicado ao proprietrio do website. Voc deseja: ( ) Criar um web site ( ) Reprojetar um web site 1) Conte-me sobre o negcio de sua empresa, seu objetivo e o mercado onde atua: 2) Que tipo de produtos/servios sua empresa oferece? 3) O que diferencia voc de seus concorrentes (preo, qualidade, servios, etc.)? 4) Descreva abaixo o pblico alvo do seu negcio: 5) Descreva abaixo os contedos que devero ser inseridos em seu site (histria da empresa, descrio e fotos de produtos, servios, etc.) : 6) Qual a Imagem a ser transmitida para os usurios? (tradio ou modernidade, layout clean ou popular, cores mais adequadas etc.) 7) Qual a Documentao disponvel? (logotipo, folders, manuais etc.) 8) Descreva as ferramentas de marketing utilizadas atualmente (folders, cartes, revistas, jornais, rdio, TV, etc.). 9) Se possvel, 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 em seu website. 13) Liste at 3 websites que voc considere interessantes, informando o que especificamente lhe agrada neles. 14) Liste at 3 websites que voc considere desagradveis, informando o que especificamente lhe desagrada neles.

48

APNDICE B Diagrama de Caso de Uso UML

49

APNDICE C Cdigo da pgina 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="Lo 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> <!--[if IE 6]> <style> #pitch .infoline {margin-top:-74px;} .post-options {margin:-55px 0 40px 138px;} </style> <![endif]--> </head>

50

<body>

<div id="wrapper"> <div id="logo"> <h1><a BERTOZZI</a></h1> </div>

href="index.html">PROFESSOR

<div id="content"> <?php include("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="gallerypitch-holder"> <div class="pitch-gallery-div"> <img src="images/pitch-2.jpg" alt="Pitch 2" /> <div class="infoline"> Telecomunicaes </div> </div> <div class="pitch-gallery-div"> <img alt="Pitch 1" /> <div class="infoline"> src="images/pitch-1.jpg"

51

Faa sua contribuio para o museu da Informtica. <a href="index.php?id=9"> Entre em contato </a> </div> </div> <div class="pitch-gallery-div"> <img src="images/pitch-3.jpg" alt="Pitch 3" /> <div class="infoline"> Rdio 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 Principal</a> </div> href="index.php" class="read-more">Pgina

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> <!-- footer --> <div id="footer"> <p>Copyright &copy; 2012 Prof. Alexandre Dezem Bertozzi - Criao: <a href="#" title="Lo Diaz - Designer" id="leodiaz"> Lo Diaz</a></p> </div> </div> <script type="text/javascript"> jGallery('pitch'); $(document).pngFix(); $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); }); </script> </body> </html>

53

APNDICE D Cdigo da pgina 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) norepeat; } #logo { padding: 20px 12px 10px; } #logo h1 { font: bold 24px Arial; text-shadow: 1px 1px 1px #fff; letterspacing: 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: 1px solid #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; marginbottom: 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; paddingleft: 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; !important font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; font-style:italic; }

57

APNDICE E Web Standards CheckList

Web Standards checklist

Site 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 and
page size

The site has no JavaScript errors 2. Degree of separation between content and presentation Where possible, decorative images in CSS The site uses CSS for all presentational
Aspects

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 size
increases

The site uses visible skip menus The site uses accessible forms The site uses accessible tables

The site has sufficient colour brightness/contrasts The site does not use colour alone for critical information The site uses delayed responsiveness for dropdown menus

The site uses descriptive links 4. Accessibility for devices The site works acceptably across target
browsers

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 Held devices? The site has detailed metadata? The site work well in different window sizes?

5. Basic Usability The site has clear visual hierarchy? Headings clearly indicate the structure
of the document

Navigation is easy to understand Navigation is consistent throughout site The site uses underlined links

The site uses consistent and appropriate language? The site has easy to find sitemap and contact page The site has a search tool The site has link to the home page on every 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