Folha Prática Nº4 HTML5. UNIVERSIDADE DA BEIRA INTERIOR Faculdade de Engenharia Departamento de Informática

Tamanho: px

Começar a partir da página:

Download "Folha Prática Nº4 HTML5. UNIVERSIDADE DA BEIRA INTERIOR Faculdade de Engenharia Departamento de Informática"

Kevin Veiga de Carvalho
8 Há anos
Visualizações:

1 Tecnologias Internet - 0/0, 0/0 Folha Prática Nº HTML

2 . NAV UNIVERSIDADE DA BEIRA INTERIOR Tecnologias Internet - 0/0, 0/0 0 <!DOCTYPE html> <html> <body> <nav> NAV: permite que um conjunto de links seja interpretado como menu da aplicação. <a href="nome_do_ficheiro.html">exercicio </a> <a href="nome_do_ficheiro.html">exercicio </a> <a href="nome_do_ficheiro.html">exercicio </a> <a href="nome_do_ficheiro.html">exercicio </a> <a href="nome_do_ficheiro.html">exercicio </a> <a href="nome_do_ficheiro.html">exercicio </a> <a href="nome_do_ficheiro.html">exercicio _</a> <a href="nome_do_ficheiro.html">exercicio _</a> </nav> </body> </html>

3 Tecnologias Internet - 0/0, 0/0. Canvas Define e desenha preenchimento Desenha contorno 0 0 <!DOCTYPE html> <html lang="pt-pt"> <head> <meta charset="utf-"> <title>canvas</title> <script> function draw() { var canvas = document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("d"); ctx.beginpath(); ctx.moveto(0, 0); ctx.lineto(00, 0); ctx.lineto(00, 0); ctx.lineto(0, 0); ctx.closepath(); ctx.fillstyle = "#ff0000"; ctx.fill(); ctx.stroke(); Obtém o CANVAS denominado por mycanvas Inicio criação de nova figura Posiciona-se para desenhar Desenha linhas Finaliza figura. i.e. desenha uma linha do ponto atual até } ao ponto inicial window.addeventlistener("load", draw, true); </script> </head> <body> <canvas id="mycanvas" width="00" height="00">este browser não suporta o elemento canvas.</canvas> </body> </html>

4 Tecnologias Internet - 0/0, 0/0. Sombreado 0 var canvas = document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("d"); ctx.shadowcolor="rgba(0, 0, 0, 0.)"; ctx.shadowoffsetx=0; ctx.shadowoffsety=; ctx.shadowblur=; ctx.beginpath(); Cor do sombreado definido pelo RGB e Canal alpha (i.e. opacidade da cor). Escala var canvas = document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("d"); ctx.save(); ctx.scale(0., 0.); ctx.beginpath(); Apresenta o desenho a 0% do seu tamanho normal

5 Tecnologias Internet - 0/0, 0/0. Gradiente Linha de transição de cores. 0 Linha obliqua do ponto (0,0) a (00,00) Cores de transição, definidas no gradient stops 0 <!DOCTYPE html> <html lang="pt-pt"> <head> <meta charset="utf-"> <title>gradiente numa canvas</title> <script> function desenhatexto() { var txt = "Tecnologias Internet!"; var canvas = document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("d"); } ctx.font = "bold 0px sans-serif"; var gradiente = ctx.createlineargradient(0, 0, 00, 00); gradiente.addcolorstop(0, "red"); gradiente.addcolorstop(, "green"); ctx.fillstyle = gradiente; ctx.textalign = "left"; ctx.textbaseline = "top"; ctx.filltext(txt, 0, 0); O preenchimento é definido pelo gradiente window.addeventlistener("load", desenhatexto, true); </script> </head> <body> <canvas id="mycanvas" width="00" height="00"></canvas> </body> </html>

6 . Formulário UNIVERSIDADE DA BEIRA INTERIOR Tecnologias Internet - 0/0, 0/0 autofocus: colocação automática do focus Controlo tipo number, com indicação de valor máximo, mínimo e valor de incremento dentro do intervalo (step) 0 placeholder: define texto a apresentar enquanto o campo não está preenchido Nome: <input type="text" name="nome" placeholder="introduza o nome" required><br> Morada: <input type="text" name="morada" placeholder="introduza a morada" required autofocus><br> <label> Idade <input type="number" name="idade" placholder="introduza a idade" min="" max="00" step="" value="0"><br> </label> required: impede que o formulário seja submetido com este campo vazio

7 Tecnologias Internet - 0/0, 0/0. Web Storage Permite armazenar dados do lado cliente associados a cada domínio; Permite até MB de dados por domínio suplantando largamente a capacidade máxima de cookies (KB); Não envia nenhuma desta informação para o servidor como acontece com os cookies; Os dados são mantidos entre sessões ou apenas até ao encerramento da janela (ou do tabulador) atual, através da utilização de localstorage e sessionstorage respectivamente; removeitem permite eliminar uma entrada previamente adicionada ao storage; setitem e getitem permitem respetivamente adicionar e obter um objeto previamente armazenado no storage. Alternativamente podem-se tratar as entradas do storage como sendo strings; window.localstorage["data"] = new Date(); alert(window.localstorage["data"]); window.localstorage.removeitem("data");

8 Tecnologias Internet - 0/0, 0/0. Web Storage 0 Evento despoletado, sempre que se verifiquem alterações sobre o storage window.addeventlistener("storage", function (evt) { alert("key: " + evt.key + "; newvalue: " + evt.newvalue + ";" + "oldvalue: " + evt.oldvalue + "; url: " + evt.url + "; storagearea:" + evt.storagearea); }, true);

Documentos relacionados

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -HTML 5: ARMAZENAMENTO DE DADOS (CLIENTE) Prof. Angelo Augusto Frozza, M.Sc. http://about.

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -HTML 5: ARMAZENAMENTO DE DADOS (CLIENTE) Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza ROTEIRO Introdução Compatibilidade Principais características