Programação para Internet I 9. HTML5. Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt

Transcrição

1 Programação para Internet I 9. HTML5 Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt

2 Resumidamente, é o novo standard para estruturar conteúdo de páginas web. A última versão de HTML surgiu em 1999, e como bem sabemos, a Internet mudou consideravelmente de lá para cá, pelo que surgiu a necessidade de criar uma nova linguagem que melhor se adapte às novas necessidades dos utilizadores. É o resultado do trabalho de duas organizações distintas: World Wide Web Consortium (W3C) que estava a trabalhar na próxima versão do XHTML (XHTML 2) Web Hypertext Application Technology Working Group (WHATWG) que estava a trabalhar no HTML5. (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 2

3 Em 2006, as duas organizações reuniram esforços e passaram ambas a trabalhar numa só especificação: HTML5. Muito embora ainda não tenha sido aprovada a versão final pelo W3C, a verdade é que muitos browsers já suportam algumas partes o que constitui um grave problema! (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 3

4 Principais alterações face à versão anterior: A primeira diferença diz respeito ao DOCTYPE, que passa a ser apenas: <!DOCTYPE html> A estrutura base de um documento HTML5 é: <!DOCTYPE html> <html lang="pt"> <head> <meta charset="iso "> <title>exemplo</title> </head> <body> <p>exemplo em HTML5</p> </body> </html> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 4

5 Principais alterações face à versão anterior: Os elementos vaziam não necessitam de ser fechados (embora possam continuar a ser) <br> <br /> OK! OK! Passa a ser possível utilizar atributos reduzidos <input type="text" name="nome" required="true"> OK! <input type="text" name="nome" required> OK! Resumindo tudo o que tinha deixado de ser possível fazer aquando da passagem de HTML XHTML, passa a ser possível! No entanto, pode continuar a escrever código HTML5 como se XHTML se tratasse (o chamado XHTML5). (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 5

6 Principais alterações face à versão anterior: Surgimento de novos elementos (tags) <header> - definição de cabeçalhos de páginas ou artigos <footer> - definição de rodapés de páginas ou artigos <article> - definição de artigos <aside> - definição de conteúdo lateral (mas relacionado!) ao principal <figure> - para definição de uma zona com figura(s) <figcaption> - para inserir uma legenda numa zona de figuras definida pela tag figure <figure> <img src="img1.png" alt="sol"> <img src="img2.png" alt="lua"> <figcaption>imagens do sol e da lua</figcaption> </figure> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 6

7 Principais alterações face à versão anterior: Surgimento de novos elementos (tags) <hgroup> - Para definição headings<h1>-<h6> <hgroup> <h1>capítulo</h1> <h2>sub-capítulo</h2> </hgroup> <mark> - Para texto que deva surgir destacado <nav> - para definição de zonas de menu <section> - para definição de secções dentro de um documento (ex. capítulos, cabeçalhos, rodapés, etc.) <time> - para definição de datas/horas <wbr> - permite especificar onde é pertinente que uma palavra seja partida em caso de mudança de linha <p> Se tiver que mudar de linha, parte-me por aqui: in<wbr>cons<wbr>ti<wbr>tu<wbr>cio<wbr>nal.</p> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 7

8 Principais alterações face à versão anterior: Surgimento de novos elementos (tags) Outras <command>, <details>, <summary>, <meter>, <progress> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 8

9 Principais alterações face à versão anterior: Novos atributos para os elementos de formulário Required <input type="text" name="nome" required="true"> Definição de padrões para os dados aceites (pattern) Z]{3}" <input type="text" pattern="[0-9][a-z]{3}" name="qualquercoisa" required > (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 9

10 Principais alterações face à versão anterior: Novos atributos para os elementos de formulário Utilização de listas de valores possíveis <input type="text" name="cores" list="listadecores"> <datalist id="listadecores"> <option value="red"> <option value="greeen"> <option value="blue"> </datalist> Outros autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, width, multiple, placeholder (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 10

11 Principais alterações face à versão anterior: Novos elementos de formulário <keygen>, <output> Novos tipos de campos de formulário (input type="xxxx") tel, search, url, , datetime, date, month, week, datetime-local, number, range, color Mais informações: (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 11

12 Principais alterações face à versão anterior: Passa a ser possível editar o conteúdo em praticamente todo o lado <div id="caixote" contenteditable="true"> Texto, texto, bla bla bla </div> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 12

13 Principais alterações face à versão anterior: Desaparecimento de algumas tags: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> e <xmp> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 13

14 Vídeo em HTML5 Uma das funcionalidades mais utilizadas e faladas do HTML5, diz respeito ao surgimento da tag video que permite incluir videos nas páginas sem necessitar de recorrer a plug-ins externos, principalmente Flash. Actualmente são (parcialmente) suportados dois formatos de vídeo distintos Ogg - Thedora video codec and Vorbis audio codec MPEG 4 - H.264 video codec and AAC audio codec No entanto e como acontece com muitas outras funcionalidades de HTML5, ainda não existe suporte para todos os browsers/formatos, Com o andar do tempo, esse suporte vai chegando! (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 14

15 Vídeo em HTML5 Inserir vídeo numa página <video src="filme.ogg" controls="controls"></video> Versão mais avançada <video width="320" height="240" controls="controls"> <source src="filme.ogg" type="video/ogg" /> <source src="filme.mp4" type="video/mp4" /> Lamentamos, mas o seu browser ainda não suporta a tag video. </video> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 15

16 Áudio em HTML5 Passa também a ser possível inserir áudio nas páginas web sem recorrer a plug-ins. Para já os formatos (parcialmente) suportados são: MP3 Ogg Vorbis Wav Para inserir áudio numa página: <audio controls="controls"> <source src="musiquinha.ogg" type="audio/ogg" /> <source src="musiquinha.mp3" type="audio/mpeg" /> Lamentamos, mas o seu browser ainda não suporta a tag audio. </audio> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 16

17 O elemento Canvas Este novo elemento, assume as funções de uma tela em branco que pode ser pintada como bem pretendermos utilizando JavaScript. <canvas id="aminhatela" width="200" height="100"></canvas> É possível desenhar as mais diversas formas geométricas <script type="text/javascript"> var tela = document.getelementbyid("aminhatela"); var p = tela.getcontext("2d"); // Código específico para desenhar </script> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 17

18 O elemento Canvas (cont.) Exemplos: Rectângulo... p.fillstyle="#ff0000"; p.fillrect(0,0,150,75);... Linhas rectas... p.moveto(10,10); p.lineto(150,50); p.lineto(10,50); p.stroke();... (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 18

19 O elemento Canvas (cont.) Exemplos: Circulo... p.fillstyle="#ff0000"; p.beginpath(); p.arc(70,18,15,0,math.pi*2,true); p.closepath(); p.fill();... Inserir uma imagem... var imagem=new Image() imagem.src="logo_estgoh.png" p.drawimage(img,0,0);... (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 19

20 Web storage Com o HTML5 são introduzidas duas novas formas de guardar informação no cliente para além das cookies. localstorage Não há validade temporal associado aos dados <script type="text/javascript"> localstorage.omeunome="nuno"; alert(localstorage.omeunome); </script> sessionstorage Os dados apenas estão disponíveis para a sessão em que foram criados <script type="text/javascript"> sessionstorage.omeunome="nuno"; alert(sessionstorage.omeunome); </script> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 20

21 Web storage (cont.) Para além da utilização simples como foi apresentada no slide anterior, é possível utilizar o objecto Storage e deste modo aceder a métodos mais avançados. clear() getitem( XXX ) removeitem( XXX ) setitem( chave, valor ) Mais informações: (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 21

22 Mais informações (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 22