Web Design - Tendncias

Separao do Contedo e Layout

Camada de Estrutura Camada de Contedo Camada de Layout

Web Standards

W3C
um consorcio de indstrias incluindo Microsoft, America

Online, Apple ,Adobe, Macromedia, Sun Microsystems, Intel, etc. instituies de pesquisa: MIT nos EUA, INRIA na Europa e Keio University no Japo. aumentar a interoperabilidade de produtos relacionados com a Web. trabalhos originados das organizaes membros e experts convidados.

O consrcio tem o apoio (estrutura fsica e intelectual) de trs

O W3C desenvolve especificaes abertas (padres) para

As recomendaes do W3C so desenvolvidas por grupos de

Web Standards

Importncia dos padres

"Web standards tm o objetivo de ser uma base comum... um fundamento para a World Wide Web para que navegadores e outros programas compreendam o mesmo vocabulrio bsico". Eric Meyer
Autor do livro Cascading Style Sheets: The Definitive Guide.

Web Standards

Web Standards
O W3C (World Wide Web Consortium), juntamente

com outros grupos e organismos reguladores, estabeleceu tecnologias para criao e interpretao de contedo para a Web. tm como objetivo principal fazer com que o contedo desenvolvido dentro destes padres possa ser visualizado independente do equipamento (computador, PDA, celular), do tipo do navegador (IE, Mozilla, Opera, Netscape, etc) e da forma (banda de conexo) com que o usurio estiver acessando a Internet.
Web Standards

Estas tecnologias, a que chamamos Web Standards,

Standards definidos pelo W3C

XHTML - Extensible Hypertext Markup Language XML - Extensible Markup Language CSS - Cascading Style Sheets DOM - Document Object Model ECMAScript 262 (a verso padro do JavaScript) SVG - Scalable Vector Graphics

Web Standards

Benefcios dos Web Standards

Reduo dos custos de desenvolvimento (simplificar cdigo,

separao entre apresentao e contedo).

Reduo dos custos de manuteno (menos cdigo, cdigo

modular). O contedo pode ser facilmente re-estilizado sem alterao de cdigo. do tamanho e trfego de arquivos). documentos do mesmo site.

Reduo dos custos de hosting (utilizao de banda - reduo Facilidade em manter a consistncia visual entre os Ampliao da audincia. Proporcionar web sites acessveis a

uma gama maior de pessoas e um nmero maior de devices para Internet.

Web Standards

Benefcios dos Web Standards

Continuao... Melhor experincia do usurio. Sites mais funcionais.

Carregamento mais rpido do contedo e menores problemas com incompatibilidades com navegadores.

Melhor posicionamento em ferramentas de buscas. Garantir a viabilidade ao longo do tempo de qualquer

documento web, medida que os navegadores evoluem, e novos produtos surgem no mercado.

Aumento na percepo de qualidade do trabalho produzido. Acessibilidade. Estar em conformidade com as leis e diretrizes

(sites de instituies pblicas) possibilitando o acesso a pessoas portadoras de necessidades especiais atravs de browser especiais.
Web Standards

Pontos Negativos
Curva de aprendizado acentuada. Problemas com incompatibilidade entre

browsers.
Alguns tipos de layouts podem ser obtidos de

forma muito mais fcil utilizando-se tabelas ao invs de CSS.

Web Standards

Como funcionam os Web Standards?

Para web designers e desenvolvedores, os

Web Standards implicam em utilizao de standards/padres principalmente no escopo estrutural e de apresentao.

Adotar os Web Standards exige uma

mudana de atitude: Website Tradicional > Website Web Standard

Web Standards

Website Tradicional
Extenso da mdia impressa. Layouts baseados em tabelas. Camada de apresentao junto com a

camada de contedo.
Cdigos invlidos, inacessveis e

semanticamente incorretos.

Web Standards

Website "Web Standards"

Layout baseado em containers

(DIVs - Tableless).
Uso de Cascading Style Sheets (CSS) para

separao entre contedo e apresentao.

Marcao semanticamente correta. Cdigo vlido e acessvel (por humanos e

mquinas).
Web Standards

Web Design - Tendncias

Exemplos:

http://www.deviantart.com/ http://www.uol.com.br/ http://www.csszengardem.com/

Web Standards

HTML
O HTML uma linguagem de marcao

utilizada para criar e formatar pginas ou documentos Web.

Tag HTML:

<p aling=center>texto</p>

Web Standards

XHTML
O XHTML substituiu o HTML. O XHTML 1.0 uma definio de HTML em

conformidade com as regras do XML.

Isso quer dizer que utilizando XHTM voc

tem a vantagem de poder utilizar plenamente o HTML, e o poder de manipular informaes com XML.

Web Standards

Benefcios em Utilizar XHTML

Compatibilidade com XML:

Torna-se muito fcil oferecer os dados do seu site atravs de WAP ou de um RSS. Facilita transformar o resultado de uma consulta banco de dados ou um documento XML numa pgina web.

Flexibilidade:

Capacidade de se apresentar o contedo de um website em diferentes estilos, combinaes de cores e at mesmo, plataformas diferentes do costumeiro navegador web instalado no Computador Pessoal.
Web Standards

Cdigo XHTML Vlido

Fechar todas as tags:
Incorreto:

<br> <img src="image.jpg" alt="foto x">

Correto:

<br /> <img src="image.jpg" alt="foto x" />

Web Standards

Cdigo XHTML Vlido

Utilizar letras minsculas para tags e atributos:
Incorreto:

<A HREF="index.html" CLASS=internal>

Correto:

<a href="index.html" class="internal">

Web Standards

Cdigo XHTML Vlido

Colocar entre aspas valores dos atributos:
Incorreto:

<table width=100%>
Correto:

<table width="100%">

Web Standards

Cdigo XHTML Vlido

No permitir atributos sem valores:
Incorreto:
<input checked> <option selected> <frame noresize>

Correto:
<input checked="checked" /> <option selected="selected" /> <frame noresize="noresize" />
Web Standards

Cdigo XHTML Vlido

Atributo ID substitui o atributo NAME:
Incorreto:

<img src="figura.gif" name="figura1" />

Correto:

<img src="figura.gif" id="figura1" /> <img src="figura.gif" id="figura1" name="figura1" />

Web Standards

Cdigo XHTML Vlido

No utilizar tags e atributos HTML descontinuados:
Incorreto:

<b>destaque</b>
Correto:

<strong>destaque</strong>
Web Standards

Cdigo XHTML Vlido

Declarar o DOCTYPE na primeira linha do

documento: <!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> </html>
Web Standards

Doctype
Strict

Utilizado quando o cdigo do documento 100% XHTML. O XHTM 1.0 Strict no permite nenhuma desconformidade com o padro XHTML.

Transitional

Este o tipo mais utilizado. Ele permite a utilizao de tags e atributos de formatao, tornando o documento compatvel com browsers que no suportam CSS.

Frameset

Este tipo indicado quando voc est utilizando FRAMES em seu site.
Web Standards

Doctype Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

Web Standards

Validao de Cdigo XHTML

Importante! Browser no exibe erro. W3C Validator

http://validator.w3.org

Web Standards

CSS
Cascading Style Sheets ou

Folhas de Estilo em Cascata.

Visa remover a formatao dos documentos

(X)HTML, separando contedo e formatao.

Todos os browsers atuais so compatveis

com CSS nvel 1.

Web Standards

Benefcios em utilizar CSS

Produtividade aumentada. Facilidade em criar sites com identidade visual unificada e

coerente.

Facilidade em fazer mudanas em todo o site basta alterar

um arquivo CSS invs de mudar todas as pginas HTML. de usurio melhorada.

Arquivos mais leves => download mais rpido => experincia Menos cdigo na pgina => mais fcil codificar. Permitir que visitantes alterem suas preferncias definindo

estilos dinamicamente.

Web Standards

Benefcios em utilizar CSS

Continuao... Mais acessvel para uma ampla variedade de aparelhos. Mais controle sobre o cdigo - interpretao do cdigo na

ordem correta para os leitores de tela.

Disponibiliza verses para impresso sem duplicao de

contedo, somente alternando o CSS.

Permite formatar elementos do HTML como formulrios e

barras de rolagem, impossvel via atributos HTML.

Permite controlar aspectos visuais como tipo e cor de borda,

posicionamento, visibilidade e margens propriedades inexistentes no HTML.

Web Standards

Separao entre Contedo e Apresentao

Enquanto o (X)HTML define a estrutura, O CSS fica

responsvel pela formatao visual e posicionamento de elementos dentro de uma pgina Web.
Ao separar formatao do contedo, voc est

tornando seu cdigo semanticamente correto. Ou seja, no utilizando marcao de contedo (HTML) para formatao (uso incorreto).
Facilidade em portar o contedo Web para Mltiplos

devices (Tela, Impresso, Celulares).

Web Standards

Formatao Dinmica com CSS

Zen Garden
http://www.csszengarden.com/tr/portuguese/

W3School
http://www.w3schools.com/css/demo_default.htm

Web Standards

Sintaxe do CSS
selector {propriedade: valor}

body { font-size : 70%; color : #000000; background-color : #F1F1F1; margin : 0; }

Web Standards

Tipos de CSS
Interno - No cabealho de um documento

HTML.
Inline ou Em Linha - Junto a uma

determinada tag.
Externo Em um documento .css separado

vinculado ao documento HTML atravs de uma referncia externa no cabealho do documento.

Web Standards

Efeito Cascata
Ordem de aplicao:
1. Padro do Browser. 2. Folha de estilo externa. 3. Folha de estilo interna. 4. Estilo Inline (definido junto ao elemento ou

tag HTML).
Web Standards

Tipos de CSS Selectors

Tag Selector

body {color: black}

Class Selector
.center {text-align: center} <p class=center">

ID Selector
#conteudo {color: #0000FF} <p id="conteudo">Algum texto</p>

Web Standards

Hands On - CSS
Utilizando unidades de medida flexveis para texto. Configurando as Propriedades da Pgina Utilizando

Estilos CSS.
Alterando as Configuraes Relativas ao CSS no

Dreamweaver.
Exportando uma CSS interna para uma CSS externa. Efeito Cascata do CSS. Substituindo formatao HTML por CSS.
Web Standards

Marcao Semanticamente Correta

Para cabealhos e ttulos, utilize elementos

de header comeando com o <h1> para o ttulo de maior importncia. vez da tag <td>. <ol> e <ul>. <table>.

Para ttulos em tabelas, utilize a tag <th> em Para listas, utilize elementos de lista <li>, Para o layout, utilize a tag <div> em vez de
Web Standards

Tableless
Layouts definidos com a utilizao de

containers XHTML (tag DIV) formatados atravs de cdigo CSS.

Dispensa o uso de tabelas e imagens para

definir posio e layout.

Uso semanticamente correto. Separao entre contedo e formatao.
Web Standards

Benefcios do Tableless
Reduz o tamanho final dos arquivos (isola 80% do

cdigo):

Menor tempo de espera para visualizao das pginas Menor consumo de banda (custos).

Facilita alteraes no layout e na estrutura, reduzindo

o custo de manuteno do projeto. um projeto mais extenso.

Permite manter uma padronizao visual ao longo de Maior acessibilidade a usurios com necessidades

especiais e equipamentos mobile como celulares e PDAs.

Web Standards

CSS Box Model

Box Model o nome que se d ao conjunto

de propriedades CSS que criam uma rea retangular em torno de um elemento do HTML.

Web Standards

Posicionamento no CSS
Propriedades de posicionamento:
Position Float

Tipos de Posicionamento:
Absoluto (absolute) Relativo (Relative) Esttico (Static)

Web Standards

Float
Propriedade do CSS que permite posicionar

elementos direita ou esquerda de outro elemento. Esta propriedade possui 3 valores:

Left - Move o elemento para a esquerda e posiciona o texto ao seu redor. Right - Move o elemento para a direita e posiciona o texto ao seu redor. None - Mostra o elemento sem alterao.

Web Standards

Clear
Para que o elemento abaixo de um float no

seja afetado, voc deve aplicar a propriedade clear com uma das opes a seguir:
clear: left clear: right clear: both

Web Standards

Layout com CSS

Existem basicamente duas tcnicas de construo de layouts utilizando CSS, que podem ser utilizadas em conjunto para criao de layouts mais complexos:
Utilizando tags div com posicionamento

absoluto (position: absolute).

Utilizando tags div com a propriedade float

(float: left | float: right | clear).

Web Standards

Validao
Um cdigo vlido renderiza mais rpido do

que um que contenha erros.

Um cdigo vlido renderiza melhor do que

um invlido.
Os Browsers esto se tornando cada vez

mais de acordo com o Web Standards, e torna-se extremamente necessrio escrever HTML vlido e dentro dos padres.
Web Standards

Acessibilidade
Por que utilizar cdigo Acessvel?
Torne o seu site acessvel para um amplo pblico

(deficientes visuais, fsicos, perceptivos, etc).

Torne o seu site acessvel para um amplo nmero de

aparelhos (hand helds, leitores de tela, navegadores de texto, sites de busca, etc).
um requisito para sites Federais e Governamentais.

Web Standards

Aderindo aos Web Standards

Mudanas bsicas:
Adicione um DOCTYPE correto para todas as

pginas.
Adicione texto para as tags 'ALT' de suas

imagens.
Adicione ttulos significativos para as suas

pginas.
Web Standards

Aderindo aos Web Standards

Mudanas intermedirias:
Cdigo XHTML Transitional vlido. Cdigo semanticamente correto. Substitua as tags 'FONT' e COLOR por CSS. Formulrios acessveis, tabelas de dados e menus de

sada.
Posicionamento bsico com CSS (padding, margins

etc) e utilizao de tabelas para layout geral.

Web Standards

Aderindo aos Web Standards

Mudanas avanadas:
Posicionamento total com CSS - sem tabelas

para o layout.
Utilizao de listas para menus de

navegao.
Cdigo XHTML Strict vlido.

Web Standards