madsondias.net

Desenvolvimento web<html5>

madsondias.net

Padrões web são conjunto de normas e

recomendações produzidos pelo W3C.

É destinado a desenvolvedores e projetistas para

o uso de práticas que possibilitem a criação de

uma Web acessível a todos.

O que são padrões web?

XHTMLCSS

HTML

XMLPNG

#Dificuldade de desenvolvimento e Manutenção;

#Sem significado

#Formatação e estruturas Juntas

#Excesso de código

#Código icompreensível para máquinas

madsondias.net

web sem padrões...

HTML

madsondias.net

Divisão em camadas

javascript

xhtml css

Trabalhar com padrões web não é uma questão

de trocar tabelas por div’s

madsondias.net

Anotem isso!

é uma questão de semântica!

Tableless é um termo que ficou muito popular no

Brasil, e que acaba por confundir muita gente.

Tableless significa um site desenvolvido sem o

uso das tabelas para organizar o layout, e sim

usando CSS.

Criar um site Tableless não significa que esteja

seguindo os Padrões Web , que vão muito além

de um código válido, e tem preocupações maiores

como a Semântica e a Acessibilidade.

madsondias.net

Tableless Vs Webstandarts

madsondias.net

Estrutura

Uma estrutura de informação, como

documentos escritos em HTML, deve conter

Adicionar marcações sem

significado em um site pode ser comparado a

adicionar diversas páginas em branco a um livro

apenas marcações com

dev ido significado.

madsondias.net

Um código semântico...

Refere-se ao estudo do significado.

Quando utilizamos cada marcação para o que

ela realmente foi criada, estamos construindo um

“Código Semântico”.

Parar de pensar em “isso vem aqui, isso vai ali...”

e pensar na “Estrutura da Informação”.

Criar uma “Marcação com Significado”

Semântica

madsondias.net

Compreensivel

Isso possibilitaria que i n f o r m a ç õ e s úteis em

diferentes sistemas f o s s e m i n t e g r a d a s

para facilitar a vida das pessoas.

Interopelabilidade

madsondias.net

Marcação Semântica

Usar <table></table> apenas para dados tabulares.

Usar <h1></h1> até <h6></h6> para títulos

Usar <ol></ol> para Listas Ordenadas e <ul></ul> para

Listas Não Ordenadas, seguidos do elemento <li></li>

Usar <em></em> para Enfase, e <strong></strong> para

Enfase Forte

Usar <label></label> para identificar campos em

formulários

madsondias.net

Marcação Semântica

Mas não é o Suficiente

madsondias.net

html5

#Ian Hickson é o editor do HTML5

#Desde 2008 vêm sendo apresentados rascunhos

(Working Draft)

#Espera-se que essa nova versão seja liberada ainda em

2010

#A prev isão para que se torne uma “recomendação” é

para 2012

#Já é compreendido pelas versões mais recentes dos

Browsers

madsondias.net

html5

Browser como o Google Chrome, Firefox 3.5,

Internet Explorer 8 e Safari 4 já dão suporte ao

HTML5, e com isso algumas páginas já vão

aderindo a nova versão

madsondias.net

html5

API’s para a criação de Gráficos 2D,

c o n t r o l e d e c o n t e ú d o m u l t i m í d i a ,

melhor depuração de erros e aprimoramento do

uso offline são algumas das novidades da nova

versão

madsondias.net

html5

N o v o s e l e m e n t o s p a r a i d e n t i f i c a r

m e l h o r o s c o n t e ú d o s ,

coomo <header> e <footer> para cabeçalho e

rodapé, <sect ion> para sessões de uma página

ou <art ic le> para identificar um artigo ou um

post.

madsondias.net

html5

< h e a d e r >

Para definir onde será o cabeçalho da página

< f o o t e r >

Para definir onde será o rodapé da página ou da

sessão

madsondias.net

html5

< a s i d e >

Informações relativas ao conteúdo principal, como

um menu ou campo de busca

< a r t i c l e >

Para definir a informação principal da página,

nela é onde estará o conteúdo em si.

madsondias.net

html5

< f i g u r e >

Para a inserção de imagens com legenda

<figure id=”1”>

<img src=”imagem.jpg” alt=”descrição”>

<legend>Legenda da Imagem</legend>

</figure>

madsondias.net

html5

< a u d i o >

Exibe qualquer elemento de streaming de áudio,

com atributos para exibição de controles ou

execução automatica.

<audio src=”horse.ogg” controls=”controls”>

Seu Navegador não suporta esse recurso

</audio>

madsondias.net

html5

< v i d e o >

Exibe vídeos na página, com exibição de controles

e de uma imagem enquanto o vídeo é carregado.

<video src=”movie.ogg” controls=”controls”>

Seu navegador não suporta esse recurso

</video>

madsondias.net

html5

< n a v >

Sessão de navegação, para links ‘lado a lado’.

<nav>

<a href=”default.asp”>Home</a>

<a href=”tag_meter.asp”>Anterior</a>

<a href=”tag_noscript.asp”>Próximo</a>

</nav>

madsondias.net

Obrigado!

Madson Dias

Professor de Informática em escolas

profissionalizantes.

@omadson

madsondias.net