HTML5 HyperText Markup Language v5 Composição Web Engenharia InformáBca / InformáBca Web 2014/15 Artur M. Arsénio
O Que há de novo no HTML5? A declaração DOCTYPE do HTML5 é muito simples: <!DOCTYPE html> A declaração de character encoding (charset) é também muito simples: <meta charset="utf- 8 > Note: The default character encoding in HTML5 is UTF- 8 Novas APIs (ApplicaBon Programming Interfaces) no HTML5 HTML GeolocaBon HTML Drag and Drop HTML Local Storage Note: Local storage is a powerful replacement for cookies. HTML ApplicaBon Cache HTML Web Workers HTML SSE Exemplo HTML5: <!DOCTYPE html> <html> <head> <meta charset="utf- 8"> <Btle>Title of the document</btle> </head> <body> Content of the document... </body> </html> 2
Elementos HTML4 Removidos no HTML5 <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <;> 3
Novos Elementos HTML5 Mais Interessantes Novos elementos semanbcos como <header>, <footer>, <arbcle>, e <secbon>. Novos elementos de formulário Novos Bpos de input (input types) para formulários tais como number, date, Bme, calendar, and range Novos atributos de input Novos elementos gráficos: <svg> e <canvas>. Novos elementos de eleemntos mulbmédia: <audio> e <video>. 4
Novos Elementos HTML5 SemanBcos/Estructurais 5
Estrutura de Documentos HTML5 O HTML5 oferece novos elementos semânbcos para definir partes diferentes de uma página web Elemento <secbon> define uma secção do documento Bloco de elementos relacionados - W3C s: "A secbon is a themabc grouping of content, typically with a heading. E.g. uma homepage pode ser dividida em secções para a Introdução, conteúdos e informação de contacto. Elemento <arbcle> especifica conteúdo independente, auto- describvo deve ser possivel ler o <arbcle> (arbgo) independente do resto do website Exemplos de uso: Forum post, Blog post, arbgo de jornal. 6
Exemplo 7
Novos Elementos de Formulário O elemento <datalist> especifica uma lista de opções pré- definidas para o elemento <input>. Usado para fornecer uma "autocomplete feature no <input>. UBlizadores vêm uma drop- down list com opções pré- definidas como dados de entrada Usar o atributo list do elemento <input> para associar este com o elemento <datalist> Elemento <keygen> fornece uma forma segura de autenbcar ublizadores A ebqueta <keygen> tag especifica um gerador de pares de chaves num formulário Quando o formulário é submebdo, são geradas duas chaves, uma privada e outra pública A chave privada é armazenada localmente. A chave pública é enviada a servidor. Pode ser usada para gerar cerbficado de cliente para autenbcar o ublizador O elemento <output> representa o resultado de um cálculo (como o efectuado por um script). 8
Novos Tipos de Entrada (input type) e Atributos 9
Nova Sintaxe para Atributos HTML5 permite 4 sintaxes diferentes para atributos Exemplos usado numa ebqueta de <input>: 10
GRÁFICOS NO HTML5
Gráficos no HTML5 Canvas Canvas (tela) é uma área rectangular numa página HTML, e é especificado com o elemento <canvas>. O elemento <canvas> é usado para desenhar gráficos, em tempo real, via scripbng (normalmente JavaScript). O elemento <canvas> é apenas um contentor para gráficos. Deve ser usado um script para realmente criar os gráficos. Por norma, o elemento <canvas> não tem fronteira nem conteúdo. Podem haver vários elementos <canvas> numa página HTML. Canvas tem vários métodos para desenhar caminhos, caixas, círculos, texto. Nota: Deve ser sempre especificado um atributo id (a ser depois referido num script), e atributos de largura e altura para definir o tamanho de canvas. Exemplo: <canvas id = "mycanvas" width = "200" height = "100"> </ canvas> 12
HTML5 Canvas Exemplo <!DOCTYPE html> <html> <body> <canvas id="mycanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); ctx.fillstyle = "#FF0000"; ctx.fillrect(0,0,150,75); </script> </body> </html> Primeiro, encontrar o elemento <canvas>: var c = document.getelementbyid("mycanvas"); De seguida, chamar o método getcontext() do canvas: var ctx = c.getcontext ("2d"); getcontext("2d ) é um objeto construído em HTML5, com muitas propriedades e métodos para caminhos de desenho, caixas, círculos, texto, imagens, e muito mais. As próximas 2 linhas desenham 1 retângulo vermelho: ctx.fillstyle = "#FF0000"; ctx.fillrect(0,0,150,75); A propriedade fillstyle pode ser uma côr, um gradiente, ou um padrão. Por defeito fillstyle é #000000 (black). O Método fillrect(x,y,width,heightdesenha um rectângulo preenchido com o fillstyle atual. 13
Exemplo HTML5 Rectangulo Vermelho Obtém o CANVAS denominado por mycanvas Inicia criação da figura Posiciona- se para desenhar Desenha linhas Finaliza figura. i.e. desenha uma linha do ponto atual até ao ponto inicial Desenha contorno Define e desenha preenchimento 14
Exemplo HTML5 Gradiente Linha de transição de cores. Linha obliqua de (0,0) a (100,100) O Preenchimento é definido pelo gradiente Cores de transição, definidas no gradient stops 15
HTML5 Graphics SVG O que é o SVG (Scalable Vector Graphics)? SVG é usado na definição de gráficos baseados em vectores para a Web SVG define os gráficos em formato XML Os gráficos SVG NÃO perdem qualidade se forem ampliados ou redimensionados Qualquer elemento e qualquer atributo num ficheiro SVG pode ser animado Vantagens do SVG sobre formatos de imagem (como JPEG e GIF): As imagens SVG podem ser criadas e editadas com qualquer editor de texto As imagens SVG pode ser pesquisadas, indexadas, scripted e comprimidas As imagens SVG são escaláveis As imagens SVG podem ser impressas com alta qualidade em qualquer resolução As imagens SVG são ampliáveis (e imagem pode ser ampliada sem degradação) 16
SVG Examples Animated 17
Diferenças entre SVG e Canvas Canvas Canvas desenha gráficos 2D, em tempo real (com JavaScript). Canvas é processado pixel por pixel. Uma vez que o gráfico é desenhado, é esquecido pelo browser. Se a sua posição mudar, toda a cena precisa ser redesenhada, incluindo quaisquer objetos que possam ter sido abrangidos pelo gráfico. dependente da resolução Não há suporte para event- handlers Recursos de renderização de texto pobres Pode- se salvar imagem resultante como.png ou.jpg Adequado para jogos de gráficos intensivos SVG SVG é uma linguagem para descrever gráficos 2D em XML (cada elemento está disponível dentro do SVG DOM). Cada geometria desenhada é lembrada como um objeto. Se os atributos de um objeto SVG são alterados, o navegador pode automabcamente re- render a geometria. Independente da resolução Suporte para event- handlers Renderização lenta se fôr complexa (qualquer coisa que usa o DOM será lento) Mais adequado para aplicações com grandes áreas de processamento (Google Maps) Não é adequado para aplicações de jogos 18
MULTIMÉDIA NO HTML5
Novos Elementos Media Os conteúdos mulbmédia vêm em muitos formatos diferentes. Exemplos: Fotos, música, som, vídeos, discos, filmes, animações,... Webpages é comum conterem elementos mulbmédia de vários Bpos e formatos Ficheiros mulbmédia também têm os seus próprios formatos, e diferentes extensões como:.swf,.wav,.mp3,.mp4,.mpg,.wmv, e.avi Quando um browser vê um ficheiro de extensão.htm ou.html, trata este como um ficheiro HTML. A extensão.xml indica um ficheiro XML A extensão.css indica um ficheiro de folha de esblo Fotos são reconhecidas por extensões como.gif,.png e.jpg. Antes do HTML5 Não havia maneira standard de mostrar videos ou audio numa página Web. videos ou audio só poderiam ser visualizados com um plug- in (e.g. flash). 20
Video HTML5 O elemento <video> do HTML5 define um modo standard para embeber um video numa página web O atributo controls adiciona controlos de video, como play, pause, e volume. Texto entre ebquetas <video> e </video> só serão visualizados em browsers que não suportem o elemento de <video>. MulBplos elementos <source> podem lincar para ficheiros de video diferentes. O browser irá usar o primeiro formato que reconhecer. 21
Metodos, Propriedades, e Eventos definidos pelos métodos DOM do HTML5 para o elemento <video> <!DOCTYPE html> <html> <body> <div style="text- align:center"> <bu on onclick="playpause()">play/pause</bu on> <bu on onclick="makebig()">big</bu on> <bu on onclick="makesmall()">small</bu on> <bu on onclick="makenormal()">normal</bu on> <br> <video id="video1" width="420"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> </div> <script> var myvideo = document.getelementbyid("video1"); funcbon playpause() { if (myvideo.paused) myvideo.play(); else myvideo.pause(); } funcbon makebig() { myvideo.width = 560; } funcbon makesmall() { myvideo.width = 320; } funcbon makenormal() { myvideo.width = 420; } </script> <p>video courtesy of <a href="h p://www.bigbuckbunny.org/" target="_blank">big Buck Bunny</a>.</p> </body> </html> Permite load, play, pause de vídeos, bem como definir a duração e volume. Há também eventos DOM que podem enviar nobficações de quando um vídeo começar a correr, quando entra em pausa, etc. 22
HTML5 Atributos da EBqueta <video> To start a video automabcally use the autoplay a ribute: <video width= 400 autoplay> If height and width a ributes are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads. 23
CompaBbilidade de Video HTML5 24
Audio HTML5 O elemento <audio> do HTML5 define um modo standard para embeber um audio numa página web O atributo controls adiciona controlos de audio, como play, pause, e volume. Texto entre ebquetas <audio> e </audio> só serão visualizados em browsers que não suportem o elemento de <audio>. MulBplos elementos <source> podem lincar para ficheiros de audio diferentes. O browser irá usar o primeiro formato que reconhecer. <!DOCTYPE html> <html> <body> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </body> </html> 25
CompaBbilidade de Audio HTML5 26