html5-110503211456-phpapp01.pdf

Transcript

1. madsondias.net Desenvolvimento web <html5>
2. 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? XHTML CSS HTML XML PNG
3. #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...
4. HTML madsondias.net Divisão em camadas javascript xhtml css
5. 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!
6. 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
7. 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.
8. 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
9. 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
10. 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
11. madsondias.net Marcação Semântica M a s n ã o é o Suficiente
12. 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
13. 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
14. 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
15. 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é, <section> para sessões de uma página ou <article> para identificar um artigo ou um post.
16. 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
17. 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.
18. 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>
19. 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>
20. 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>
21. 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>
22. madsondias.net Obrigado! Madson Dias Professor de Informática em escolas profissionalizantes. @omadson madsondias.net