Fundamentos e Tecnologia em Web
Padrões WEB
• Objetivos:
–Apresentar os fundamentos básicos de
criação de websites baseados nos atuais
padões Web;
–Apresentar uma visão geral do assunto;
–Conhecer as principais formas utilizadas;
Fundamentos e Tecnologia em Web
O conhecimento dos Webstandards ou
Padrões Web permite a implementação de
layouts em HTML muito mais fácil e
rapidamente. A separação dos códigos que
definem a apresentação (CSS), o conteúdo
(HTML) e o comportamento (DOM) oferece as seguintes
vantagens:
– manutenção mais fácil
– tamanho do arquivo menor (economia de banda e velocidade no
carregamento)
– maior acessibilidade para o usuário
– compatibilidade com diferentes navegadores
Fundamentos e Tecnologia em Web
Padrões WEB - Histórico
• Os primeiros pensamentos sobre o que viria a ser a Web
surgiram em 1945 quando Vanevar Bush escreveu um artigo
descrevendo um aparelho foto-eletro-mecânico chamado
Memex (abreviação de memory extension) que poderia criar
e seguir links entre documentos armazenados em
microfichas.
• Doug Engelbart prototipou uma aplicação chamada oNLine
System capaz de criar e editar documentos interligados.
(Para o propósito de tornar a aplicação mais acessível, ele
também inventou o mouse.)
Fundamentos e Tecnologia em Web
Padrões WEB - Histórico
• Em 1965, Ted Nelson, em um dos seus trabalhos seminais,
A File Structure for the Complex, the Changing and the
Indeterminate, cunhou a palavra hipertexto para expressar
essa categoria de documentos interligados. Dois anos
depois, o primeiro sistema baseado em algumas de suas
idéias foi criado.
• Em 1980, os primeiros esforços na criação de uma
estrutura real de informação baseada em documentos
hipertextos começam quando Tim Berners-Lee, trabalhando
para o CERN, desenvolveu uma aplicação capaz de criar e
manipular nós entre documentos arbitrários.
Fundamentos e Tecnologia em Web
Padrões WEB - Histórico
• Em 1989, Tim Berners-Lee circulou
uma proposta para o gerenciamento
facilitado de informação baseado em
documentos hipertextos. A proposta
foi recirculada em 1990 e, somente
então, Berners-Lee recebeu
permissão para criar o sistema. Em
outubro desse ano, Berners-Lee
começou a escrever a aplicação e a
chamou de WorldWideWeb.
• A aplicação era uma interface visual para a criação e
exibição de documentos hipertexto suportando o
modo WYSIWYG .
Fundamentos e Tecnologia em Web
Padrões WEB - Histórico
• Como base na linguagem SGML, Berners-Lee criou o HTML
como forma de expressar os documentos estruturados. Ele
também resolveu o problema da identificação dos
documentos criando o esquema de endereçamento
universal conhecido com URL.
Em novembro, durante os testes da aplicação, entrou em
funcionamento o primeiro servidor Web da história.
• Aqui nascia a WEB.
Fundamentos e Tecnologia em Web
Padrões WEB - Histórico
• Em 1991, os primeiros servidores Web externos ao CERN
foram criados. A grande revolução, entretanto, veio em
1993, quando o primeiro navegador Web, o NCSA Mosaic,
foi liberado.
• Em 1994, a Mosaic Communications Corp. é fundada e o
Netscape, o primeiro navegador comercial da história é
disponibilizado. A Web agora é uma realidade.
Fundamentos e Tecnologia em Web
Padrões WEB - Histórico
• O crescimento da Web também trouxe seus problemas:
– Os elementos contidos na linguagem HTML apenas definiam a estrutura básica
de um documento, tais como cabeçalhos, listas, parágrafos, ênfase e similares.
Não havia nada na linguagem em si que explicava com tais elementos deviam ser
exibidos.
– Nesse caso, o conteúdo era distintamente separado da apresentação e poderia
ser visto em qualquer navegador sem inconvenientes
Fundamentos e Tecnologia em Web
Padrões WEB - Histórico
• O crescimento da Web também trouxe seus problemas:
– O desenvolvimento comercial dos navegadores e a necessidade destes de
manter uma vantagem competitiva sobre os concorrentes levou à inclusão de
elementos proprietários e/ou de apresentação nas implementações específicas.
Assim, ao invés de usar o elemento h1, por exemplo, para a identificação do
cabeçalho primário de documentos, as pessoas estavam usando o elemento font
para forçar a exibição da maneira visual requerida.
– Com isso veio a conhecida “Guerra dos Browsers”.
Fundamentos e Tecnologia em Web
Padrões WEB - Histórico
• Em 1994, para lidar com essas questões, o Word Wide
Web Consortium (W3C) foi criado e liderou um esforço de
padronização do HTML, desta forma, uma especificação
inicial para a versão 2.0, incluindo muitos dos elementos
proprietários e outros necessários, foi criada. Essa
especificação foi a primeira a apresentar elementos para
formulários e suporte a imagens mapeadas. A especificação
foi desenvolvida e finalmente aprovada no final de 1995.
Fundamentos e Tecnologia em Web
Padrões WEB - Histórico
• A especificação 3.0 introduzia elementos como tabelas,
fluxo do texto ao redor de imagens e a exibição de equações
matemáticas. Embora fosse compatível com o HTML 2.0, ela
era tão complexa e abrangente que a sua adoção provou-se
uma esforço impossível na época e ela eventualmente
expirou.
• Em 1996, a especificação 3.2 foi anunciada, sendo
constituída de várias extensões propostas para a
especificação 2.0, algumas características da versão 3.0 já
implementadas na época, e um série de atributos
proprietários existentes em vários dos navegadores
existentes no momento.
Fundamentos e Tecnologia em Web
Padrões WEB - Histórico
• O avanço do HTML e a incorporação de muitos elementos
de apresentação aumentaram a complexidade e a
dificuldade na criação de documentos estruturados,
negando o próprio objetivo do padrão. Para resolver essas
questões, duas especificações surgiram em épocas distintas
atacando problemas diferentes das implementações já
existentes. Essas novas especificações foram o CSS e o
XHTML.
• Em meados de 1996 a primeira especificação CSS tornouse uma recomendação do W3C
Fundamentos e Tecnologia em Web
Padrões WEB - Histórico
• Em 1998, foi decidido pelas organizações por trás do HTML
que a especificação precisava ser repensada. A decisão foi
recriá-la como uma aplicação do XML (eXtensible Markup
Language) , outra metalinguagem criada a partir do SGML
(Standard Generalized Markup Language ), mas com regras
mais estritas.
• A especificação XHTML 1.0 é basicamente uma
estruturação da especificação HTML 4.0 em XML. A criação
de uma nova especificação, XHTML 2.0, está em andamento
focalizando os problemas existentes na especificacão 1.0
atual.
Fundamentos e Tecnologia em Web
Padrões WEB - Necessidade
• O crescimento exponencial da Web criou muitos desafios
que somente esses padrões eram capazes de responder.
Algumas pessoas acreditam que os padrões Web são
limitadores. A verdade é que eles removem grande parte da
dificuldade do desenvolvimento dando maior flexibidade ao
desenvolvedor e produtor Web, permitindo que as pessoas
possam realmente exercer a sua criatividade ao mesmo
tempo em que forjam elos de comunicação.
Fundamentos e Tecnologia em Web
Fundamentos e Tecnologia em Web
Padrões WEB - Vantagens
• Uniformidade
– Uma estrutura comum permite que modificações tais como
inserções e remoções de conteúdo ou movimentações
estruturais podem ser realizadas de maneira simples, sem a
necessidade de aplicações complexas.
– uniformidade permite que documentos possam ser
manipulados através de um conjunto reduzido de aplicações,
transformações e mecanismos de apresentação.
– Exemplo:
www.csszengarden.com
Fundamentos e Tecnologia em Web
Padrões WEB - Vantagens
• Simplicidade
– retorno à utilização do HTML para a simples estruturação
dos documentos, ignorando inicialmente a apresentação dos
mesmos, que pode ser aplicada depois de diversas formas;
– Documentos criados com os padrões tendem a apresentar
uma economia de marcação que permite maior flexibidade
na utilização dos mesmos, seja diretamente em navegadores
ou na transformação para outros usos;
– melhores tempos de acesso;
– Exemplo: Mecanismo de busca.
Fundamentos e Tecnologia em Web
Padrões WEB - Vantagens
• Liberdade
– a liberdade de estruturação e inovação por não serem
controlados por uma empresa específica, permitindo que
sejam utilizados por qualquer pessoa em qualquer lugar, sem
a necessidade de pagar ou fazer algo pelo privilégio ;
– maior facilidade na movimentação de informações e evita
que as mesmas se tornem obsoletas;
– estará sempre aberto à movimentação na direção de outros
padrões e sistemas ;
Fundamentos e Tecnologia em Web
Padrões WEB - Vantagens
• Separação de estrutura e apresentação
– o documento fica restrito ao seu conteúdo, sem especificar
qualquer forma de apresentação, permitindo que esta seja
modificada de acordo com as necessidades. Assim, o
documento permanece o mesmo, embora possa ser usado
em diferentes ambientes como navegadores, sintetizadores
de fala, e geradores de documentos Braille;
Fundamentos e Tecnologia em Web
Padrões WEB - Vantagens
• Facilidade de criação
– qualquer tipo de layout pode ser criado a partir de CSS e
isso permite que essa etapa da construção de sites seja
realizada independentemente do desenvolvimento de
conteúdo;
– O conteúdo pode ser editado em qualquer processador de
textos e posteriormente estruturado.
Fundamentos e Tecnologia em Web
Padrões WEB - Vantagens
• Assessibilidade
– permitir que pessoas com deficiências físicas tenham
acesso à Web, e também capacitar a utilização das páginas
por e em outros tipos de ambientes que não um navegador ;
– evita a duplicação de conteúdo e facilita a utilização geral
dos documentos;
– auxilia também pessoas que não possuem deficiências
físicas melhorando a manipulação das páginas por teclas de
atalho e outros métodos
Fundamentos e Tecnologia em Web
Padrões WEB - Vantagens
• Extensibilidade
– permite que documentos criados com os padrões agreguem
informações adicionais que podem ser separadas quando não
são necessárias;
– preparar documentos para usos imprevistos no futuro.
Fundamentos e Tecnologia em Web
Padrões WEB - Vantagens
• Estabilidade
– os documentos feitos sob os mesmos permanecerão
compatíveis tanto para frente como para trás ;
– na manutenção de documentos. Muitas vezes um
determinado site pode passar por várias equipes durante sua
vida útil. A estabilidade dos documentos através dos padrões
Web permite que um site possa ser compreendido e editado
por qualquer grupo necessário sem necessidade de esforços
excessivos.
Fundamentos e Tecnologia em Web
Padrões WEB - Desvantagens
• Implementações discordantes
– Um determinado atributo CSS normalmente é renderizado
de maneira muito diferente em cada um dos navegadores
visuais em existência hoje;
– diferença entre os modelos de unidade de medição dos
elementos entre os navegadores Web que gera um série de
complicações na exibição das páginas;
– O suporte XHTML também é muito incompleto nos
navegadores e seu uso ainda é muito restrito por parte dos
desenvolvedores.
Fundamentos e Tecnologia em Web
Padrões WEB - Desvantagens
• Aumento da complecidade inicial
– Isso pode parecer contraditório em relação à vantagem da
simplicidade citada anteriormente, mas na realidade não é.
Esse desvantagem só existe inicialmente, quando os criadores
de documentos estão fazendo uma transição para o uso de
padrões. Assim, mesmo que essa desvantagem desapareça
com o tempo ela implica em necessidades de treinamento e
esforço inicial.
Fundamentos e Tecnologia em Web
Padrões WEB - Estruturando um Documento
• Construir um site com os padrões Web significa tomar as
providências necessárias para que cada documento no site
conformese às especificações do formato em que é servido
e a especificações adicionais de auxílio ao uso do mesmo.
Isso implica em não somente ter um documento que atenda
à letra das especificações mas que também seja estruturado
apropriadamente.
Fundamentos e Tecnologia em Web
Padrões WEB - Estruturando um Documento
• Um site deve ser:
– Perceptível
• Isso significa que o conteúdo presente no site deve ser
apresentado de uma forma que é perceptível para qualquer
pessoa, ou seja, o site deve ser capaz de degradar
graciosamente sob as mais rigorosas condições.
– Operável
• Isso significa que os elementos de interface presentes em
um site devem ser operáveis por qualquer pessoa, ou seja, o
site deve facilitar a navegação e a orientação através do
conteúdo do mesmo.
Fundamentos e Tecnologia em Web
Padrões WEB - Estruturando um Documento
– Inteligível
• Isso significa que o site deve tornar fácil a identificação de
seu conteúdo e dos seus controles acessórios, ou seja, o site
deve ser auto-evidente e não colocar nenhum ônus sobre
usuários menos experimentados ou com dificuldades de
acesso.
– Robusto
• Isso significa que o site deve usar tecnologias que
maximizam a compatibilidade de sua estrutura com
navegadores atuais e futuros, tecnologias de acessibilidade e
outros programas, ou seja, o site deve ser capaz de preservar
a sua integridade tecnológica.
Fundamentos e Tecnologia em Web
Padrões WEB - Estruturando um Documento
– Inteligível
• Isso significa que o site deve tornar fácil a identificação de
seu conteúdo e dos seus controles acessórios, ou seja, o site
deve ser auto-evidente e não colocar nenhum ônus sobre
usuários menos experimentados ou com dificuldades de
acesso.
– Robusto
• Isso significa que o site deve usar tecnologias que
maximizam a compatibilidade de sua estrutura com
navegadores atuais e futuros, tecnologias de acessibilidade e
outros programas, ou seja, o site deve ser capaz de preservar
a sua integridade tecnológica.
Fundamentos e Tecnologia em Web
Padrões WEB - Arquitetura
É a organização de grande
volume de informação, de
forma que os visitantes
possam ter acesso a
informação de forma fácil e
eficiente.
Fundamentos e Tecnologia em Web
Padrões WEB - Arquitetura
É a organização de grande volume de informação, de
forma que os visitantes possam ter acesso a
informação de forma fácil e eficiente.
Fundamentos e Tecnologia em Web
Padrões WEB - Arquitetura
3 perguntas básicas feitas pelos usuários:
1. Onde estou?
2. De onde eu venho?
3. Para onde eu vou?
Fundamentos e Tecnologia em Web
Onde estou?
A importância na identidade dos sites:
Fundamentos e Tecnologia em Web
De onde eu venho?
Fundamentos e Tecnologia em Web
Para onde vou?
Deixar claro as
informações de
destino
Fundamentos e Tecnologia em Web
Padrões WEB – Etapas de um projeto