9. HTML5 - elearning@estgoh
Propaganda
Programação para Internet I 9. HTML5 Nuno Miguel Gil Fonseca [email protected] HTML5 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 HTML5 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 HTML5 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-8859-1"> <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 HTML5 Principais alterações face à versão anterior: Os elementos “vaziam” não necessitam de ser fechados (embora possam continuar a ser) <br> OK! <br /> 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 HTML5 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 HTML5 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 HTML5 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 HTML5 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) <input type="text" pattern="[0-9][A-Z]{3}" 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 HTML5 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 HTML5 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, email, datetime, date, month, week, datetime-local, number, range, color Mais informações: http://demos.w3avenue.com/html5-unleashed-tips-tricks-andtechniques/sample-03-form-enhancements.html (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 11 HTML5 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 HTML5 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 HTML5 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 HTML5 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 HTML5 Á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 HTML5 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 HTML5 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 HTML5 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 HTML5 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 HTML5 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: http://msdn.microsoft.com/en-us/library/cc197062(v=vs.85).aspx http://hacks.mozilla.org/2009/06/localstorage/ http://dev.w3.org/html5/webstorage/ (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 21 HTML5 Mais informações http://www.w3schools.com/html5/ http://www.w3avenue.com/2010/05/07/html5-unleashedtips-tricks-and-techniques/ http://en.wikipedia.org/wiki/HTML5 (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 22
