tcc leonildo wagner - reestruturação de website utilizando padrões w3c 29-03-2012
TRANSCRIPT
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
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
LEONILDO WAGNER DE OLIVEIRA DIAS GONÇALVES
REESTRURAÇÃO DE WEBSITE UTILIZANDO PADRÕES W3C
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
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
LEONILDO WAGNER DE OLIVEIRA DIAS GONÇALVES
REESTRURAÇÃO DE WEBSITE UTILIZANDO PADRÕES W3C
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
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
“ O único lugar aonde o sucesso vem antes do trabalho é no
dicionário.” (Albert Einstein).
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
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.
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
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.
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
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
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-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
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-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/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
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
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
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
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
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.
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
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.
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
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.
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
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.
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
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.
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
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
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
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
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
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.
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
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.
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
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
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
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
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
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.
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
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
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
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
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
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).
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
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)
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
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
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
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).
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
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.
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
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.
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
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.
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
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.
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
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.
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
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/.
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
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.
.
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
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 é
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
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.
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
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.·.
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
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.
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
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.
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
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
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
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).
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
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.
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
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
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
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.
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
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.
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
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.
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
48
APÊNDICE B – Diagrama de Caso de Uso UML
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
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>
<!--[if IE 6]><style>
#pitch .infoline {margin-top:-74px;}.post-options {margin:-55px 0 40px 138px;}
</style><![endif]-->
</head>
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
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"
alt="Pitch 1" /><div class="infoline">
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
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"
alt="Pitch 3" /><div class="infoline">
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>
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
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 © 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>
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
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;}
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
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; }
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
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; }
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
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;}
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
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
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
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