HTML5 e CSS3 O presente e o futuro da WEB. Danilo Borges da Silva [email protected]

Tamanho: px

Começar a partir da página:

Download "HTML5 e CSS3 O presente e o futuro da WEB. Danilo Borges da Silva [email protected]"

Ana Sofia Camilo de Caminha
9 Há anos
Visualizações:

1 HTML5 e CSS3 O presente e o futuro da WEB Danilo Borges da Silva [email protected]

2 Agenda Introdução Histórico Características Conclusão Referências

3 Introdução

4 HTML HTML é uma abreviação de Hypertext Markup Language - Linguagem de Marcação de Hypertexto. Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc) na Web. Com o HTML, autores definem a estrutura das páginas Web usando marcações <tags>

5 HTML5 O novo padrão para HTML, XHTML e HTML DOM Melhora a interoperabilidade Introduz marcações e APIs para aplicações web

6 Histórico

7 1989 Tim Berners-Lee propôs um sistema de internet baseado em hipertexto para os pesquisadores do CERN* usarem e compartilhar documentos. *Conseil Européen pour la Recherch Nucléaire

8 1990 Tim publicou a primeira especificação do HTML um documento chamado HTML Tags

9 1991 HTML 1.0 publicado por IETF* * Internet Engineering Task Force

10 1994 Tim financiou W3C* uma organização de padrões para o World Wide Web *World Wide Web Consortium

11 1995 HTML 2.0 publicado por IETF

12 1997 HTML 3.2 foi a primeira versão desenvolvida pela W3C e publicado como uma Recomendação HTML 4.0 publicado como uma Recomendação pela W3C

13 1999 HTML 4.1 publicado como uma Recomendação pela W3C

14 2000 XHTML 1.0 publicado como uma Recomendação pela W3C

15 2001 XHTML 1.1 publicado como uma Recomendação pela W3C

16 2004 XHTML 2.0 rascunho A maioria dos browsers não estavam dispostos a implementar os novos recursos

17 2004 WHATWG* foi fundado por desenvolvedores de empresas como Mozilla, Apple e Opera. Eles não estavam felizes com o caminho que a Web tomava e nem com o rumo dado ao XHTML. Por isso, estas organizações se juntaram para escrever o que seria chamado hoje de HTML5. * Web hypertext Application Technology Working Group

18 2007 W3C formou o HTML Working Group para trabalhar com o WHATWG. Desde então, os dois grupos vem trabalhando juntos para desenvolver a especificação HTML5

19 2009 While we recognize the value of the XHTML 2 Working Group s contributions over the years, after discussion with the participants, W3C management has decided to allow the Working Group s charter to expire at the end of 2009 and not to renew it.

20 2011

21 2011 A W3C anunciou 2014 como sendo a meta para transformar o HTML5 em Recomendação.

22 Características

23 DOCTYPE DOCTYPE não é uma tag, é uma instrução para o browser a respeito da linguagem de marcação HTML5 DOCTYPE <!DOCTYPE html>

24 Exemplo <!DOCTYPE html> <html lang= pt-br > <head> <meta charset= UTF-8 > <title>documento Exemplo</title> </head> <body>

26 Clique para editar os estilos do texto mestre Segundo nível Novos elementos Terceiro nível Quarto nível Quinto nível

30 Tipos de Input Clique para editar os estilos do texto mestre Segundo nível Terceiro nível Quarto nível Quinto nível

31 Tipos de Input

32 Validação Clique para editar os estilos do texto mestre Segundo nível Terceiro nível Quarto nível Quinto nível

34 Storage API Nova maneira de armazenar dados no cliente (alternativa aos cookies) Objeto Storage possui os métodos: getitem(key); setitem(key); removeitem(key); clear(); Dois objetos disponíveis: localstorage sessionstorage

35 Aplicações Offline HTML5 provê uma maneira de se indicar ao navegador que elementos devem ser postos em cache para que uma aplicação funcione offline. Para permitir que o usuário acesse uma página offiline é preciso escrever um arquivo de manifesto, indicando que URLs CACHE MANIFEST meu.html meu.css meu.js <html manifest= meu.manifest">

37 Drag and Drop A API de Drag and Drop é relativamente simples. Basicamente, inserir o atributo draggable= true num elemento o torna arrastável. E há uma série de eventos que você pode tratar. Os eventos do objeto sendo arrastado são:

38 Drag and Drop Dragstart - O objeto começou a ser arrastado. O evento que a função recebe tem um atributo target, que contém o objeto sendo arrastado. Drag - O objeto está sendo arrastado Dragend - A ação de arrastar terminou Dragenter - O objeto sendo arrastado entrou no objeto target Dragleave - O objeto sendo arrastado

39 Geolocation API Há três populares maneiras de um agente de usuário descobrir sua posição no globo: Geolocalização IP - É o método usado pela maioria dos navegadores web em computadores. Através de consultas whois e serviços de localização de IP, vai determinar a cidade ou região em que você está. Triangulação GPRS - Dispositivos conectados a uma rede de celulares e sem um GPS, ou com o GPS desligado, podem determinar sua posição pela triângulação das antenas GPRS próximas. É bem mais preciso que o método baseado em IP, vai mostrar em que parte do bairro você está. GPS - É o método mais preciso. Em condições ideais, a margem de erro é de apenas 5 metros.

41 WebSockets Define um canal de comunicação fullduplex que opera através de um único socket na web.

43 Audio <audio id= audio src= sound.mp3 controls> </audio> <script> document.getelementbyid( audio ).mut ed=false; </script>

44 Audio Nem todo browser suporta o codec livre OggVorbis É preciso oferecer um formato alternativo de áudio Ou <audio até mesmo controls= true uma opção autoplay= true /> para baixar o conteúdo <source src= musica.oga /> <source src= musica.mp3 /> <source src= musica.wma /> <p>faça o download <a href= musica.mp3 >da música</a>.</p> </audio>

45 Video <video id= video src= movie.mp4 autoplay controls></video> <script>

46 Video Também suporta controle com vários sources <video controls= true autoplay= true /> <source src= video.ogg /> <source src= video.mp4 /> <source src= video.wmv /> <p>faça o download <a href= video.mp4 >do vídeo</a>.</p> </video>

47 Video - Codecs É importante incluir informações a respeito do container e codecs utilizados Isso antecipa a detecção de alguma incompatibilidade A extensão do arquivo não é relevante para isso Para indicar OGG usando essas os informações codecs Theora usa-se e Vorbis: o atributo type <source src= video.ogv type= video/ogg; codecs= theora,vorbis /> Para MPEG-4: <source src= video.mp4 type= video/mp4; codecs= mp4v , mp4a.40.2 />

49 2D Canvas <canvas id="canvas" width="838" height="220"></canvas> <script> var canvascontext = document.getelementbyid("canvas").g etcontext("2d"); canvascontext.fillrect(250, 25, 150, 100); canvascontext.beginpath();

51 3D Canvas

52 SVG Linguagem para marcação de gráficos vetoriais Também pode ser incorporada com facilidade <svg width= 400 height= 400 > <rect x= 10 y= 10 width= 150 height= 50 stroke= # strokewidth= 5 fill= #FF0000 /> <circle cx="70" cy="240" r="60" stroke="#00ff00" strokewidth="5" fill="#ffffff" /> </svg>

53 SVG A maioria dos editores gráficos vetoriais exporta e importa automaticamente SVG Pode-se construir javascript para manipular SVG, usando métodos do DOM Isso possibilita gráficos dinâmicos, com animação, escaláveis e com excelente qualidade visual, programáveis em javascript e sem tecnologias proprietáris e plugins

55 Web Worked Está nova API fornece a capacidade de processamento de aplicações web mais longas utilizando threads e o processamento multicore das CPUs, evitando as temidas slow-script warnings

57 CSS3 Novos seletores Fontes Embutidas Colunas Sombras Multiplos Backgrounds Opacidade Gradientes Cantos arredondados Transformação Transição Animação...

58 Desenvolvimen to de uma Página Web

59 Conclusão

60 O HTML5 é um conjunto de características chamadas features. Pode-se notar que a depender do browser ele poderá suportar ou não as features. Para utilizar o html5 basta especificá-lo no doctype

61 Referências

62 Web: / Livros/e-books: ALBERS, Brian; LUBBERS, Peter; SALIM, Frank. Pro HTML5 Programing Powerful APIs for Richer Internet

Documentos relacionados

Desenvolvimento em Ambiente Web. HTML - Introdução

Desenvolvimento em Ambiente Web HTML - Introdução O que é HTML? HTML é uma linguagem para descrever a estrutura de uma página WEB. Ela permite: Publicar documentos online com cabeçalhos, texto, tabelas,