Noções de web semântica, acessibilidade, css e tableless.

Padrões

Pra quê padronizar?

Weaving the dream of Web

•O sonho da grande teia mundial;•A dor de cabeça do inventor;•Seu contra-ataque;•A realidade.

Padrões

Tim Berners-Lee – o criador do conceito de Web

“Sonho para minha invenção, a World Wide Web, um espaço de uso comunitário onde compartilha-se informações de trabalho, lazer e socialização (The World Wide Web, A very short personal history). Como desenvolvedores Web criando sites corporativos, sociais e educacionais, nós transformamos este sonho em realidade.”

Padrões

O lixo na Web

Padrões

WaSPFoi por esse período (1998) que surgiu o WaSP (Web Standards Project), que é um movimento para difundir os Web Standards.

Nesta época de crescimento avassalador, a Web necessita de orientação para desenvolver seu pleno potencial.

Esse grupo teve um papel muito importante na divulgação dos Padrões. Hoje, o desenvolvedor tem mais liberdade de desenvolvimento do que a 5 anos atrás.

Padrões

Semântica na Web.

Semântica

“Sonho para minha invenção, a World Wide Web, um espaço de uso

comunitário onde compartilha-se informações de trabalho, lazer e socialização. Como desenvolvedores Web criando sites corporativos, sociais e educacionais, nós transformamos este sonho em realidade.”

Tim Berners-Lee

“Sonho para minha invenção, a World Wide Web, um espaço de uso

comunitário onde compartilha-se informações de trabalho, lazer e socialização. Como desenvolvedores Web criando sites corporativos, sociais e educacionais, nós transformamos este sonho em realidade.”

Tim Berners-Lee

Em geral, a semântica (do grego semantikos, derivado de sema, sinal) refere-se ao estudo do significado, em todos os sentidos do termo.

Wikipedia

Uma rede semântica é uma rede que serve para interligar significados de palavras. A rede semântica, ou semantic web, foi proposta por Tim Berners-Lee como génese para a World Wide Web. Neste âmbito, tem como finalidade a de conseguir atribuir um significado aos conteúdos publicados na Internet de modo que seja perceptível tanto pelo humano como pelo computador.

Em geral, a semântica (do grego semantikos, derivado de sema, sinal) refere-se ao estudo do significado, em todos os sentidos do termo.

Wikipedia

Uma rede semântica é uma rede que serve para interligar significados de palavras. A rede semântica, ou semantic web, foi proposta por Tim Berners-Lee como génese para a World Wide Web. Neste âmbito, tem como finalidade a de conseguir atribuir um significado aos conteúdos publicados na Internet de modo que seja perceptível tanto pelo humano como pelo computador.

Semântica

O que é um código semântico?O que é um código semântico?

TABLE???TABLE???

Títulos: <h1> Seu Título </h1>

Parágrafos: <p> Texto do parágrafo </p>Listas: <ul> Item da lista </ul>

Tabelas: <table> Dados da tabela </table>

Semântica

Sim!!!Table não é pecado!Sim!!!Table não é pecado!

Desde que usada semanticamente.Desde que usada semanticamente.

SemânticaExemplos de código semânticoExemplos de código semântico

Receita de “Gororoba”Tabela de animais

http://www.alanvasconcelos.com/palestras/webstandards/exemplos.html#semantico

Acessibilidade

AcessibilidadePra quem?

•Pessoas com deficiência visual;•Pessoas com deficiência motora;•Pessoas com deficiência de aprendizado;•Computadores com conexão lenta;•Dispositivos móveis;•TV digital;•Futuras plataformas;•Você e seu computador

AcessibilidadeOutros dispositivos

•PDA’s;

•Celulares;

•Smartphones;

•TV digital

•Diferentes browsers / plataformas

•Futuras plataformas.

AcessibilidadeAgora é lei!Decreto-lei 5296 de 2 de dezembro de 2004

Capítulo VI Do Acesso à Informação e Comunicação

Art. 47. No prazo de até doze meses a contar da data de publicação deste Decreto, será obrigatória a acessibilidade nos portais e sítios eletrônicos da administração pública na rede mundial de computadores (internet), para o uso das pessoas portadoras de deficiência visual, garantindo-lhes o pleno acesso às informações disponíveis.

AcessibilidadeComo fazer?

•www.acessibilidadelegal.com

(repositório completo sobre acessibilidade

para web)

•www.dasilva.org(validador de código-fonte)

Práticas de desenvolvimento para Web.

Práticas de desenvolvimento

Qual é o seu papel na equipe?•Web-Designer*

•Programador*

•Editor de conteúdo

•Web-Designer*

•Programador*

•Editor de conteúdo

Práticas de desenvolvimento

•Web-DesignerMexe no código e bagunça a programação

•ProgramadorMexe no código e detona o layout

•Editor de conteúdoCompra a pipoca e assiste à luta

•Web-DesignerMexe no código e bagunça a programação

•ProgramadorMexe no código e detona o layout

•Editor de conteúdoCompra a pipoca e assiste à luta

Tableless

TablelessComo funciona?

CONTEÚDO

ESTILO COMPORTAMENTO

CONTEÚDO

ESTILO COMPORTAMENTO

TablelessComo funciona?

xHTML

CSS JAVASCRIPT, PHP, ASP, .NET...

xHTML

CSS JAVASCRIPT, PHP, ASP, .NET...

TablelessVantagens

•Código limpo e semântico;

•Economia de banda; (ESPN, Wired)ESPN – 170 TB por anoWired – 54% de redução nas páginas

•Facilidade do trabalho em equipe;Fim da briga Designer vs Programador

•Facilidade de manutenção;

•Maior acessibilidade;

•Outros dispositivos (media type);

TablelessComparativo

•Exemplo 1 Layout COM tabelas:

Exemplo 2 Layout SEM tabelas

http://www.alanvasconcelos.com/palestras/webstandards/exemplos.html#comparativo

TablelessExemplos

•Globo esporte;

•HSBC – Brasil;

•Unibanco;

•Adobe;

•Microsoft !!!

•Globo esporte;

•HSBC – Brasil;

•Unibanco;

•Adobe;

•Microsoft !!!

TablelessNem tudo são flores...

•Tempo de aprendizado;

•Internet Explorer;

•Resistência de desenvolvedores e chefias;

•A desculpa da criatividade.

TablelessTableless mina a criatividade?

•Css Zen Garden•Css Zen Garden

http://www.alanvasconcelos.com/palestras/webstandards/exemplos.html#zengarden

TablelessO Futuro da Web

•XHTML 1.0Elementos “bem formados”

CERTO = <p>aqui, um parágrafo em <em>negrito</em>.</p>ERRADO = <p>aqui, um parágrafo em<em>negrito.</p></em>

Tag’s de fechamento OBRIGATÓRIAS (inclusive as vazias)CERTO = <br />, <hr />ERRADO = <br>, <hr>

Os valores de atributos devem estar entre aspasCERTO = <td rowspan="3">ERRADO = <td rowspan=3>

•Media Types (screen, tv, print, braille, handheld...)

•XML, Ontologia, agentes

HEIN?!?!?

?

TablelessComunidade

VALEU!

ALAN VASCONCELOS – www.alanvasconcelos.com