UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA
CURSO DE CIÊNCIA DA COMPUTAÇÃO
DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1
Fábio M...
Roteiro
• Hello World!
• As Especificações HTML e XHTML
• Estrutura de Um Documento (X)HTML
• As Regras de (X)HTML
• HTML ...
Hello World!
Hello World!
• HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<he...
Hello World!
• HTML5:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<t...
Hello World!
• XHTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-str...
Hello World!
• Os exemplos utilizam algumas características dos
elementos mais comuns em (X)HTML, incluindo:
– A instrução...
Hello World!
• Continuação:
– Comentários são especificados com <!-- -->
– O par de tags <h1> e </h1> indicam uma linha de...
As Especificações HTML e XHTML
• Todos os documentos (X)HTML devem seguir uma
estrutura formal definida pelo W3C (World Wi...
Estrutura de Um Documento (X)HTML
• Um modelo básico de um documento pode ser derivado
da especificação do HTML 4.01 DTD:
Estrutura de Um Documento (X)HTML
• A estrutura de um documento XHTML é muito parecida:
Estrutura de Um Documento (X)HTML
• Tanto em HTML como em XHTML (mas não em HTML5),
podemos substituir a tag <body> pela t...
O Cabeçalho do Documento
• A informação no elemento head de um documento
(X)HTML é muito importante por ser usada para
des...
O Elemento title
• Um único elemento title é requerido no elemento head
e usado para atribuir o texto mostrado pela maiori...
O Elemento title
• Um título pode conter texto padrão, linguagem de
marcação não é interpretada, entretanto entidades de
c...
<meta>: Especificando Tipo de Conteúdo,
Conjunto de Caracteres e Mais...
• A tag <meta> possui vários usos
• Por exemplo, ...
<meta>: Especificando Tipo de Conteúdo,
Conjunto de Caracteres e Mais...
• Para o padrão HTML, o tipo MIME é sempre text/h...
Outros Elementos no Cabeçalho
• Em adição aos elementos title e head, nos DTDs HTML
4.01 e XHTML 1.0, os elementos permiti...
Outros Elementos no Cabeçalho
• <link>
– Especifica um relacionamento especial entre o documento
corrente e outro document...
Outros Elementos no Cabeçalho
• <object>
– Permite que programas e outros objetos binários sejam
diretamente embutidos em ...
Outros Elementos no Cabeçalho
• <script>
– Permite que código de uma linguagem de script seja
diretamente embutido
<script...
Outros Elementos no Cabeçalho
• <style>
– Usada para inclusão de especificações de estilo do documento,
tipicamente no for...
Outros Elementos no Cabeçalho
• Comentários
– Seguindo o formato SGML, um comentário inicia com <!– e
termina com --> e po...
Sintaxe Completa do Elemento head
Exemplo de Documento XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml...
Exemplo de Documento XHTML
…
<!-- Linked and document specific styles -->
<link rel="stylesheet" href="screen.css"
media="...
O Corpo do Documento
• Após a seção de cabeçalho, o corpo de um documento é
delimitado por <body> e </body>
• Apesar de se...
O Corpo do Documento
• Dentro de blocos não vazios, são encontrados elementos
internos
– Existem vários elementos internos...
Exemplo
O Corpo do Documento
Navegadores e (X)HTML
• Quando um navegador lê um documento, como o exemplo a
seguir, ele constrói uma árvore para interpr...
Exemplo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta htt...
As Regras de (X)HTML
• HTML não é sensível à caixa, XHTML é
– Os exemplos a seguir são equivalentes em HTML tradicional,
m...
As Regras de (X)HTML
• (X)HTML é sensível à caracteres de espaço únicos
– Quaisquer espaços em branco entre caracteres são...
As Regras de (X)HTML
• (X)HTML Segue um Modelo de Conteúdo
– Especifica que certos elementos somente ocorrem dentro de
out...
As Regras de (X)HTML
• Elementos devem possuir tags de fechamento, a não ser
que sejam vazias
– Em HTML, alguns elementos ...
As Regras de (X)HTML
• Elementos devem estar aninhados
– E não cruzados, assim
<b><i>is in error as tags cross</b></i>
– E...
HTML 4 x HTML5
• HTML5 removeu vários elementos e atributos, muitos
deles foram removidos por serem mais de apresentação
d...
Elementos HTML 4 Removidos
Elementos Redefinidos em HTML5
Atributos Removidos em HTML5
Atributos Removidos em HTML5
Outros Elementos Removidos em
HTML5
Novos Elementos HTML5
• Para muitos autores de páginas Web, a inclusão de novos
elementos é o aspecto mais interessante de...
Novos Elementos HTML5
Novos Elementos HTML5
Atributos Chave Adicionados Por
HTML5
Atributos-Chave Adicionados Por
HTML5
Mudanças na Estrutura do Documento
HTML5
• Documentos HTML5 podem conter um elemento
header, usado para definir a seção de...
Exemplo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 hea...
Elemento section
• O elemento estrutural HTML5 com mais possibilidades de
uso é o elemento section
• Uma tag <section> pod...
Exemplo
<section>
<h1>Chapter 2</h1>
<p>New HTML5 elements.</p>
<section>
<h2>HTML5's section Element</h2>
<p>These elemen...
Elemento section
• Um elemento section pode conter elementos header e
footer
<section>
<header>
<h1>I am Section Heading</...
section x div
• De acordo com a semântica, elementos de seção HTML5 não
são apenas uma formalização de tags <div> com valo...
Elemento article
• HTML5 introduz uma série de elementos estruturais
• O elemento article é usado para definir uma unidade...
Exemplo
Elementos Semânticos
• Muitos dos elementos adicionados por HTML5 são
semânticos por natureza
• Desta maneira, HTML5 conti...
Marcando Texto
• O novo elemento HTML5 mark foi introduzido para
destacar conteúdo similarmente a uma caneta que marca
par...
Marcando Texto
Marcando Texto
Indicando Datas e Tempo
• time é um outro elemento semântico de HTML5 usado
para indicar conteúdo que é uma data, hora ou ...
Indicando Datas e Tempo
• Para utilizar um formato que possa ser processado
facilmente por uma máquina, o atributo datetim...
Inserindo Figuras
• Sempre é necessário incluir imagens, gráficos e outros
objetos que contém textos e imagens em document...
Inserindo Figuras
Especificando Navegação
• Um novo elemento HTML5 com propósito de encapsular um grupo
de links que serve como uma coleção ...
Especificando Navegação
Esforço de Mídia Aberta de HTML5
• Um aspecto interessante de HTML5 que vem de esforço
anterior da Netscape e da Microsoft...
<video>
• Para inserir um vídeo utilizamos a tag <video> e seu
atributo src para uma URL local ou remota contendo um
filme...
<video>
• Com seu formato de vídeo aberto, HTML5 trouxe de volta
a loucura de codec de suporte de mídia, resolvida por
Fla...
<video>
• Note o atributo poster, usado para mostrar uma
imagem no local do objeto para o caso de demora na
carga
• Um out...
<video>
<video>
<audio>
• O elemento audio de HTML5 e muito similar ao
elemento video
• O elemento deve dar suporte a formato de sons comu...
<audio>
• Se desejarmos que o usuário controle a execução do
som, se não utilizarmos o JavaScript para controlar isto,
pod...
<audio>
• Da mesma forma, podemos especificar diferentes
formatos usando tags source:
<audio controls autobuffer autoplay>...
Exemplo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 aud...
Exemplo
Gráficos do Lado Cliente
• O elemento canvas é usado para renderizar gráficos
simples como linhas, gráficos e outros eleme...
Gráficos do Lado Cliente
• Após colocarmos a tag <canvas> em um documento, o
próximo passo é usar JavaScript para acessar ...
Gráficos do Lado Cliente
• De maneira similar, podemos usar o método
fillRect(x,y,width,height) para criar um retângulo
só...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 canvas exam...
Exemplo
Desenhando Linhas e Formas
• HTML5 define uma API completa para desenhar em um
elemento canvas, composta de muitas sub-API...
Exemplo
• O exemplo a seguir desenha uma forma em V usando
lineTo():
context.beginPath();
context.lineTo(20,100);
context....
Exemplo
• Para mudar o estilo do desenho, podemos especificar
fillStyle e strokeStyle, e também definir a largura
da linha...
Exemplo
Exemplo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 can...
Exemplo
...
<!-- Quadrado -->
var lg = context.createLinearGradient(10, 150, 200, 200);
lg.addColorStop(0, "#B03060");
lg....
Exemplo
...
<!-- Círculo -->
var rg = context.createRadialGradient(50,50,10,60,60,50);
rg.addColorStop(0, "#A7D30C");
rg.a...
Exemplo
...
<!-- V -->
context.beginPath();
context.lineTo(250,150);
context.lineTo(330,240);
context.lineTo(410,150);
con...
Aplicando Alguma Perspectiva
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Canvas Cube Examp...
...
context.fillStyle = "#ccc";
context.strokeStyle = "black";
context.beginPath();
context.moveTo(341, 111);
context.line...
...
</script>
</head>
<body>
<h1>Canvas Perspective</h1>
<canvas id="canvas" width="400" height="400">
<strong>Canvas Supp...
Desenhando Arcos e Curvas
• É possível criar linhas curvas usando arc(), arcTo(),
quadraticCurveTo() e bezierCurveTo()
• P...
Desenhando Arcos e Curvas
• O método quadraticCurveTo(cpx, cpy, x, y) inicia
no último ponto no path e desenha uma linha a...
Desenhando Arcos e Curvas
• O método bezierCurveTo(cp1x, cp1y, cp2x, cp2y,
x, y) é similar a quadraticCurveTo() exceto pel...
Exemplo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Canvas Face Examp...
...
/* draw circle for head */
context.beginPath();
context.fillStyle = "yellow";
context.arc(150,150,100,0,Math.PI*2,true...
...
<body>
<h1>Smile you're on canvas</h1>
<canvas id="canvas" width="300" height="300">
<strong>Canvas Supporting Browser...
Escala, Rotação e Transformação
• scale(x,y) – usada para mudar a escala de objetos
– O parâmetro x determina a escala na ...
Escala Simples
...
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var contex...
...
function writeBoxes(context){
context.fillStyle = "rgba(166,42,42,.4)";
context.beginPath();
context.fillRect (0, 0, 1...
Escala, Rotação e Transformação
• rotate(angle) – usado para rotacionar um desenho na
direção horária por um ângulo defini...
Rotação Simples
...
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var contex...
Escala, Rotação e Transformação
• translate(x,y) – modifica a origem de (0,0) para uma
outra localização no desenho
– O ex...
Mudança Simples
...
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var contex...
Escala, Rotação e Transformação
• setTransform(m11,m12,m21,m22,dx,dy) – modifica a
matriz identidade com os parâmetros dad...
...
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var contex...
Utilizando Bitmaps em Desenhos
• Uma característica muito interessante de canvas é a
habilidade para inserir imagens em de...
Utilizando Bitmaps em Desenhos
• É importante lembrar que a imagem deve ser carregada a
tempo do canvas estar pronto para ...
Utilizando Bitmaps em Desenhos
• drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh) pode ser
chamada para que parte da imagem seja rem...
Utilizando Bitmaps em Desenhos
• Uma vez que a imagem esteja no canvas, é possível
desenhar sobre ela
• O exemplo a seguir...
...
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var contex...
Suporte de Texto para canvas
• Podemos escrever texto usando fillText(text,x,y
[,maxWidth]) ou strokeText(text,x,y
[,maxWi...
Suporte de Texto para canvas
• Para um texto mais customizado, podemos usar a
propriedade font, da mesma forma que em CSS
...
Suporte de Texto para canvas
• Podemos adicionar sombras a formas simplesmente
atribuindo as propriedades de sombra shadow...
Exemplo
...
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var contex...
...
context.lineWidth = 2;
context.font = '40px sans-serif';
context.strokeStyle = "black";
context.fillStyle = "white";
c...
Novos Tipos de Campos de Formulários
• Tradicionalmente, o elemento input de HTML é usado
para definir a maioria dos campo...
Seletor de Cor
• Atribuindo type igual a color deverá criar um seletor de
cores
<p><label>color:<input type="color" name="...
Seletores de Data e Hora
• Uma variedade de controles de data podem ser
diretamente criados através do atributo type:
– da...
Seletores de Data e Hora
<p><label>date:
<input type="date" name="date"></label></p>
<p><label>datetime:
<input type="date...
Seletores de Data e Hora
Seletor de Números
• Atribuindo a type o valor number, mostra uma spin box
de valor numérico
<p><label>number:<input type=...
Slider
• Um controle similar a number pode ser criado com range:
<input type="range" name="range" max="100" min="1"
step="...
Outras Restrições Semânticas
• Conseguidas atribuindo tel, email ou url ao atributo
type da tag <input>:
<p><label>Telepho...
Outras Restrições Semânticas
Outras Restrições Semânticas
• Também é possível atribuir a type o valor search, que
pode eventualmente ter uma lista asso...
Validando a Entrada de Dados
• Podemos forçar a entrada de dados, sem recorrer a
JavaScript, em navegadores compatíveis, a...
Validando a Entrada de Dados
• O atributo pattern pode ser empregado para forçar a
entrada de dados conforme uma expressão...
Validando a Entrada de Dados
• Se title é especificado quando pattern é aplicado, o
navegador pode mostrar uma informação ...
Validando a Entrada de Dados
• Em alguns casos, além de aplicar o padrão (pattern)
podemos também atribuir o tipo de valor...
Exemplo
Listas Autocompletar
• Em HTML5, o atributo list do elemento input é usado para
indicar ao DOM uma id para um elemento de ...
Melhorias de Usabilidade
• É comum autores de páginas Web utilizarem o atributo
value para preencher com algum texto um ca...
Melhorias de Usabilidade
• HTML5 introduziu o atributo placeholder com essa
finalidade:
<input type="text" name="firstname...
Elementos e Atributos para Aplicações
Web
• Um tema chave na especificação de HTML5 é a ênfase
em dar suporte ao desenvolv...
Novo Propósito do Elemento menu
• Tradicionalmente este elemento era usado para criar um
menu de escolhas simples, mas a m...
Novo Propósito do Elemento menu
• Em HTML5 o elemento menu retornou ao seu propósito
original
• Um novo atributo type foi ...
Novo Propósito do Elemento menu
• Deveria renderizar...
• Mas...
Novo Propósito do Elemento menu
• Da mesma forma, deveria ser possível a definição de um
menu de contexto, normalmente cha...
Novo Propósito do Elemento menu
• O atributo global contextmenu é usado para definir um
elemento com um menu de contexto
–...
Elemento command
<menu type="command" label="Main Menu">
<command type="command" label="Add" icon="add.png">
<command type...
Outros Elementos
• Outros elementos que foram introduzidos por HTML5
incluem:
– meter
– progress
– detail
– output
Arrastar e Soltar
Atributo contenteditable
• Permite modificar o texto diretamente ao clicar no texto:
<p contenteditable="true">This paragr...
Atributo contenteditable
• Modificando o estilo usando JavaScript para alterar a
nome da classe:
<p ondblclick="this.conte...
Ainda Outros...
• Caso tenha interesse:
– Atributo spellcheck (correção de erros)
– Internacionalização
– Metadados (permi...
UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA
CURSO DE CIÊNCIA DA COMPUTAÇÃO
DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1
Fábio M...
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Upcoming SlideShare
Loading in...5
×

Curso de Desenvolvimento de Sistemas Web - (X)HTML

388

Published on

Aula de (X)HTML do Curso de Desenvolvimento de Sistemas Web
Universidade Estadual do Sudoeste da Bahia - UESB

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
388
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Curso de Desenvolvimento de Sistemas Web - (X)HTML

  1. 1. UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1 Fábio M. Pereira (fmourapereira@yahoo.com.br)
  2. 2. Roteiro • Hello World! • As Especificações HTML e XHTML • Estrutura de Um Documento (X)HTML • As Regras de (X)HTML • HTML 4 x HTML5 • Adicionando Semântica • Esforço de Mídia Aberta de HTML5 • Gráficos do Lado Cliente • Mudanças em Formulários HTML5 • Elementos e Atributos para Aplicações Web
  3. 3. Hello World!
  4. 4. Hello World! • HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hello HTML 4 World</title> <!-- Simple hello world in HTML 4.01 strict example --> </head> <body> <h1>Welcome to the World of HTML</h1> <hr> <p>HTML <em>really</em> isn't so hard!</p> <p>Soon you will &hearts; using HTML.</p> <p>You can put lots of text here if you want. We could go on and on with fake text for you to read, but let's get back to the book.</p> </body> </html>
  5. 5. Hello World! • HTML5: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hello HTML5 World</title> <!-- Simple hello world HTML5 example --> </head> <body> <h1>Welcome to the World of HTML5</h1> <hr> <p>HTML <em>really</em> isn't so hard!</p> <p>Soon you will &hearts; using HTML.</p> <p>You can put lots of text here if you want. We could go on and on with fake text for you to read, but let's get back to the book.</p> </body> </html>
  6. 6. Hello World! • XHTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8“ /> <title>Hello XHTML World</title> <!-- Simple hello world in XHTML 1.0 strict example --> </head> <body> <h1>Welcome to the World of XHTML</h1> <hr /> <p>XHTML <em>really</em> isn't so hard!</p> <p>Soon you will &hearts; using XHTML too.</p> <p>There are some differences between XHTML and HTML but with some precise markup you'll see such differences are easily addressed.</p> </body> </html>
  7. 7. Hello World! • Os exemplos utilizam algumas características dos elementos mais comuns em (X)HTML, incluindo: – A instrução <!DOCTYPE> que indica a versão do HTML e XHTML que está sendo usada no documento – As tags <html>, <head> e <body> usadas para especificar a estrutura geral do documento • A inclusão do atributo xmlns é necessária na tag <html> e é uma pequena diferença do XHTML – A tag <meta> que indica o tipo MIME (troca de mensagens) e conjunto de caracteres usados • Note que no exemplo XHTML, o elemento tem uma barra no final para indicar que é um elemento vazio – O par de tags <title> e </title> especificam o título do documento que aparece geralmente na barra de títulos do navegador Web
  8. 8. Hello World! • Continuação: – Comentários são especificados com <!-- --> – O par de tags <h1> e </h1> indicam uma linha de cabeçalho especificando alguma informação importante – A tag <hr>, em XHTML <hr />, insere uma linha horizontal ou barra através da tela – As tags <p> e </p> indicam um parágrafo de texto – Um caractere especial é inserido usando uma entidade com nome (&hearts;) – um coração – O par de tags <em> e </em> são colocadas em torno de pequenas partes de texto para enfatização, geralmente com itálico
  9. 9. As Especificações HTML e XHTML • Todos os documentos (X)HTML devem seguir uma estrutura formal definida pelo W3C (World Wide Web Consortium) • Tradicionalmente, o W3C definiu HTML como uma aplicação do SGML (Standard Generalized Markup Language) – Uma tecnologia usada para definir linguagens de marcação através da especificação da estrutura permitida de um documento na forma de um DTD (document type definition) – Um DTD indica a sintaxe que poder ser utilizada para os vários elementos de uma linguagem como a HTML • Em 1999, o W3C reescreveu HTML como uma aplicação de XML chamada XHTML – XML, neste caso, tem o mesmo propósito de SGML
  10. 10. Estrutura de Um Documento (X)HTML • Um modelo básico de um documento pode ser derivado da especificação do HTML 4.01 DTD:
  11. 11. Estrutura de Um Documento (X)HTML • A estrutura de um documento XHTML é muito parecida:
  12. 12. Estrutura de Um Documento (X)HTML • Tanto em HTML como em XHTML (mas não em HTML5), podemos substituir a tag <body> pela tag <frameset>, que permite a inclusão de várias tags <frame>, correspondentes a partes individuais da janela do navegador, chamadas de frames
  13. 13. O Cabeçalho do Documento • A informação no elemento head de um documento (X)HTML é muito importante por ser usada para descrever ou aumentar o conteúdo do documento • Em muitos casos, o elemento head possui informação sobre a página que é útil para o estilo visual, definição de interatividade, atribuição do título da página e fornecer outra informação útil para descrever ou controlar o documento
  14. 14. O Elemento title • Um único elemento title é requerido no elemento head e usado para atribuir o texto mostrado pela maioria dos navegadores na barra de títulos • Também é utilizado pelo sistema de histórico de navegação, gravado quando uma página é marcada, e consultado por robôs de máquinas de busca para determinar o significado da página • Em resumo, é muito importante ter um título de página sintaticamente correto, descritivo e apropriado • Quando não especificado, a maioria dos navegadores mostram a URL da página ou o nome do arquivo na barra de título
  15. 15. O Elemento title • Um título pode conter texto padrão, linguagem de marcação não é interpretada, entretanto entidades de caracteres como &copy; (ou alternativamente ©), que especifica um símbolo de copyright, são permitidos – Para que seja mostrada de maneira correta, é necessário se certificar de que o conjunto apropriado de caracteres está definido e de que o navegador dá suporte aos caracteres – Caso contrário poderemos ver caixas ou outros símbolos no título • Para atribuir o conjunto de caracteres apropriados, devemos incluir a tag <meta> antes do título da página
  16. 16. <meta>: Especificando Tipo de Conteúdo, Conjunto de Caracteres e Mais... • A tag <meta> possui vários usos • Por exemplo, ela pode ser usada para especificar valores que são equivalentes a cabeçalhos de resposta HTML – Para garantir que o tipo MIME (Multipurpose Internet Mail Extensions) e o conjunto de caracteres para um documento HTML baseado no inglês esteja atribuído, poderíamos usar <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1“ /> – A barra no final pode ser utilizada uma vez que <meta> é um elemento vazio • Utilizar o conjunto de caracteres UTF-8 é provavelmente uma boa ideia para autores ocidentais, por dar acesso a um conjunto internacional de glifos de caracteres
  17. 17. <meta>: Especificando Tipo de Conteúdo, Conjunto de Caracteres e Mais... • Para o padrão HTML, o tipo MIME é sempre text/html • Em XHTML podemos escolher entre text/html, text/xml, application/xml e application/xhtml+xml • Daremos preferência ao tipo text/html • Assim, a estrutura do cabeçalho sempre parecerá com: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Título da Página</title> </head>
  18. 18. Outros Elementos no Cabeçalho • Em adição aos elementos title e head, nos DTDs HTML 4.01 e XHTML 1.0, os elementos permitidos dentro do elemento head incluem base, link, object, script e style – Comentários também são permitidos • <base> – Especifica um endereço URL absoluto que é usado para indicar informação de servidor e pasta para endereços URL especificados parcialmente, chamados de links relativos, usados dentro do documento <base href="http://htmlref.com/baseexample" >
  19. 19. Outros Elementos no Cabeçalho • <link> – Especifica um relacionamento especial entre o documento corrente e outro documento – Geralmente é utilizado para especificar a planilha de estilos usada pelo documento <link rel="stylesheet" media="screen" href="global.css" type="text/css" > – Embora possua uma quantidade de outros possíveis usos interessantes como atribuir relacionamentos de navegação e avisar ao navegador sobre conteúdo pré-carregado
  20. 20. Outros Elementos no Cabeçalho • <object> – Permite que programas e outros objetos binários sejam diretamente embutidos em uma página Web – Por exemplo, um objeto Flash não visível está sendo referenciado para algum uso: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="0" height="0" id="HiddenFlash" > <param name="movie" value="flashlib.swf" /> </object> – Existem várias tecnologias que podem ser utilizadas, como applets Java, plug-ins e controles ActiveX
  21. 21. Outros Elementos no Cabeçalho • <script> – Permite que código de uma linguagem de script seja diretamente embutido <script type="text/javascript"> alert("Hi from JavaScript!"); /* more code below */ </script> – Ou, de forma mais apropriada, chamada a partir de uma página Web: <script type="text/javascript" href="ajaxtcr.js"></script> – Quase sempre a linguagem JavaScript é utilizada, embora outras linguagem como VBScript também sejam permitidas
  22. 22. Outros Elementos no Cabeçalho • <style> – Usada para inclusão de especificações de estilo do documento, tipicamente no formato CSS, relacionados a fontes, cores, posicionamento e outros aspectos de apresentação do conteúdo <style type="text/css" media="screen"> h1 {font-size: xx-large; color: red; font-style: italic;} /* h1 elements render as big, red and italic */ </style>
  23. 23. Outros Elementos no Cabeçalho • Comentários – Seguindo o formato SGML, um comentário inicia com <!– e termina com --> e pode incluir várias linhas <!-- Hi I am a comment --> <!-- Author: Thomas A. Powell Book: HTML: The Complete Reference Edition: 5 -->
  24. 24. Sintaxe Completa do Elemento head
  25. 25. Exemplo de Documento XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sample Head Element</title> <!-- Some example meta tags --> <meta name="keywords" content="Fake, Head Example, HTML Ref" /> <meta name="description" content="A simple head example that shows a number of the elements presented in action." /> <meta name="author" content="Thomas A. Powell" /> <!-- Set a global URI stem for all references --> <base href="http://htmlref.com/baseexample" />
  26. 26. Exemplo de Documento XHTML … <!-- Linked and document specific styles --> <link rel="stylesheet" href="screen.css" media="screen" /> <link rel="stylesheet" href="printer.css“ media="print" /> <style type="text/css"> <!-- h1 {font-size: xx-large; color: red; font-style: italic;} --> </style> … <!-- Embedded and linked scripts --> <script type="text/javascript"> <!-- var globalDebug = true; //--> </script> <script src="ajaxtcr.js" type="text/javascript"> </script> <script src="effects.js" type="text/javascript"> </script> </head> <body> <p>Some body content here.</p> </body> </html>
  27. 27. O Corpo do Documento • Após a seção de cabeçalho, o corpo de um documento é delimitado por <body> e </body> • Apesar de ser um elemento opcional, sempre devemos incluí-lo • Apenas um elemento body pode aparecer no documento • Dentro do corpo de um documento Web está uma variedade de tipos de elementos – Por exemplo, elementos de nível de bloco que definem blocos de conteúdo estrutural como parágrafos (p) ou cabeçalhos (h1 – h6) – Formas especiais de blocos, como listas não ordenadas (ul), podem ser usadas para criar listas de informações
  28. 28. O Corpo do Documento • Dentro de blocos não vazios, são encontrados elementos internos – Existem vários elementos internos, como negrito (b), itálico (i), forte (strong), ênfase (em) e vários outros • Em outros tipos de elementos são incluídos aqueles que referenciam outros objetos, como imagens (img) ou elementos interativos (object) • Podemos ainda incluir elementos textuais e comentários
  29. 29. Exemplo
  30. 30. O Corpo do Documento
  31. 31. Navegadores e (X)HTML • Quando um navegador lê um documento, como o exemplo a seguir, ele constrói uma árvore para interpretar a estrutura do documento • Estas árvores, também chamada de árvores DOM (Document Object Model), são a interpretação do navegador do código fornecido e são integrais para determinar como construir a página visualmente usando tanto o estilo padrão X(HTML) como qualquer CSS anexado • JavaScript também utilizará esta árvore quando tentar manipular o documento • Ela serve como o esqueleto da página, portanto a garantia de sua corretude é muito importante, mas muitas vezes negligenciada
  32. 32. Exemplo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hello HTML World</title> <!-- Simple hello world in HTML 4.01 strict example --> </head> <body> <h1>Welcome to the World of HTML</h1> <hr> <p>HTML <em>really</em> isn't so hard!</p> <p>Soon you will &hearts; using HTML.</p> <p>You can put lots of text here if you want. We could go on and on with fake text for you to read, but let's get back to the book.</p> </body> </html>
  33. 33. As Regras de (X)HTML • HTML não é sensível à caixa, XHTML é – Os exemplos a seguir são equivalentes em HTML tradicional, mas XHTML requer minúsculas <B>Go boldly</B> <B>Go boldly</b> <b>Go boldly</B> <b>Go boldly</b> • Atributos podem ser sensíveis à caixa – Considerando <img SRC="test.gif"> e <IMG src="test.gif">, em HTML tradicional, elas são equivalentes, embora em XHTML devam sempre estar em minúsculas – Considerando os valores dos atributos, em <img src="test.gif"> e <img src="TEST.GIF">, caso o servidor seja Windows, onde nomes de arquivos não são sensíveis à caixa, se referem ao mesmo arquivo, mas caso o servidor seja baseado no UNIX, podem se referir a arquivos diferentes
  34. 34. As Regras de (X)HTML • (X)HTML é sensível à caracteres de espaço únicos – Quaisquer espaços em branco entre caracteres são mostrados como um único espaço – Isto inclui tabulações, quebras de linhas e retornos de carro <strong>T e s t o f s p a c e s</strong><br> <strong>T e s t o f s p a c e s </strong><br> <strong>T e s t o f s p a c e s</strong><br> – Irá resultar em T e s t o f s p a c e s T e s t o f s p a c e s T e s t o f s p a c e s – Caso mais espaços sejam necessários, é possível utilizar a entidade &nbsp;
  35. 35. As Regras de (X)HTML • (X)HTML Segue um Modelo de Conteúdo – Especifica que certos elementos somente ocorrem dentro de outros elementos <ul> <p>What a simple way to break the content model!</p> </ul> – O exemplo acima não segue o modelo de conteúdo da especificação (X)HTML: a tag <ul> deveria conter apenas tags <li>, a tag <p> não é apropriada neste contexto – Em alguns navegadores a tag <input> encontrada fora de uma tag <form> é simplesmente ignorada, não sendo mostrada, já em outros sim
  36. 36. As Regras de (X)HTML • Elementos devem possuir tags de fechamento, a não ser que sejam vazias – Em HTML, alguns elementos possuem tags de fechamento opcional, assim, os exemplos abaixo são permitidos, embora o segundo seja melhor: <p>This isn't closed <p>This is</p> – Entretanto, o fechamento do primeiro parágrafo é inferido uma vez que segundo o modelo de conteúdo não é permitido uma tag <p> dentro de outra – Em XHTML devemos sempre fechar as tags, assim devemos escrever <br></br> ou, mais comumente, usar o formato com um caractere “/” no final, como em <br />
  37. 37. As Regras de (X)HTML • Elementos devem estar aninhados – E não cruzados, assim <b><i>is in error as tags cross</b></i> – Está incorreto, enquanto <b><i>is not since tags nest</i></b> – Está em sua sintaxe correta • Atributos devem estar entre aspas – Embora em HTML atributos simples não precisem estar entre aspas (conteúdo alfanumérico, traços e pontos), a falta das aspas pode levar a confusão, além do uso ser obrigatório em XHTML – Evite <img src=robot.gif height=10 width=10 alt=robot> – Use <img src="robot.gif" height="10" width="10" alt="robot" />
  38. 38. HTML 4 x HTML5 • HTML5 removeu vários elementos e atributos, muitos deles foram removidos por serem mais de apresentação do que de semântica – Por exemplo, <small> continua sendo permitido, mas <big> está obsoleto – A ideia é preservar o elemento, mas mudar o significado: <small> não corresponde mais ao texto com fonte reduzida, similar a <font size=“-1”>, mas tem a intenção de representar o uso de textos pequenos, como em notas legais e de rodapé
  39. 39. Elementos HTML 4 Removidos
  40. 40. Elementos Redefinidos em HTML5
  41. 41. Atributos Removidos em HTML5
  42. 42. Atributos Removidos em HTML5
  43. 43. Outros Elementos Removidos em HTML5
  44. 44. Novos Elementos HTML5 • Para muitos autores de páginas Web, a inclusão de novos elementos é o aspecto mais interessante de HTML5 • Alguns desses elementos ainda não possuem suporte, mas muitos navegadores já estão implementando os mais interessantes, como audio e video
  45. 45. Novos Elementos HTML5
  46. 46. Novos Elementos HTML5
  47. 47. Atributos Chave Adicionados Por HTML5
  48. 48. Atributos-Chave Adicionados Por HTML5
  49. 49. Mudanças na Estrutura do Documento HTML5 • Documentos HTML5 podem conter um elemento header, usado para definir a seção de cabeçalho de um documento e que contém os elementos padrões h1 a h6 <header> <h1>Welcome to the Future World of HTML5.</h1> <h2>Don't be scared it isn't that hard!</h2> </header> • De maneira similar, o elemento footer é fornecido para definir o conteúdo do rodapé de um documento, que geralmente contém navegação, informação legal e de contato <footer> <p>Content of this example is not under copyright</p> </footer>
  50. 50. Exemplo <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML5 header and footer example</title> </head> <body> <header> <h1>Welcome to the Future World of HTML5.</h1> <h2>Don't be scared it isn't that hard!</h2> </header> <p>Some body content here.</p> <p>Some more body content here.</p> <footer> <p>Content of this example is not under copyright.</p> </footer> </body> </html>
  51. 51. Elemento section • O elemento estrutural HTML5 com mais possibilidades de uso é o elemento section • Uma tag <section> pode ser usada para agrupar conteúdo arbitrário e pode conter outras tags <section> para criar a ideia de subseções
  52. 52. Exemplo <section> <h1>Chapter 2</h1> <p>New HTML5 elements.</p> <section> <h2>HTML5's section Element</h2> <p>These elements are useful to create outlines.</p> <section> <h3>Nest Away!</h3> <p>Nest your sections but as you nest you might want to indent.</p> </section> </section> <p>Ok that's enough of that.</p> </section>
  53. 53. Elemento section • Um elemento section pode conter elementos header e footer <section> <header> <h1>I am Section Heading</h1> </header> <h2>I am outside the section header I'm just a plain headline.</h2> <p>Some more section content might go here.</p> <footer> <p>Hi from the footer of this section.</p> </footer> </section>
  54. 54. section x div • De acordo com a semântica, elementos de seção HTML5 não são apenas uma formalização de tags <div> com valores de class apropriados • Equivalente utilizando div: <div class="header"> <!-- header here --> </div> <div class="section"> <div class="header"> <h2>Section Heading</h2> </div> <p>Content of section.</p> </div> <div class="footer"> <!-- footer here --> </div>
  55. 55. Elemento article • HTML5 introduz uma série de elementos estruturais • O elemento article é usado para definir uma unidade discreta de conteúdo como em um post de um blog, comentário, artigo, etc. • A ideia por traz da de definição destas unidades de conteúdo discretas é a possibilidade de extração automática • Um outro elemento novo em HTML5 é o elemento aside, que pode ser usado com conteúdo que representa material que é tangencial ou, como o nome sugere, colocado à parte ou de lado
  56. 56. Exemplo
  57. 57. Elementos Semânticos • Muitos dos elementos adicionados por HTML5 são semânticos por natureza • Desta maneira, HTML5 continua com seu objetivo de separar estrutura de estilo • A princípio não veremos muito valor nestes elementos a não ser adicionar significado – Posteriormente veremos como torná-los legíveis para a maioria dos navegadores e como aplicar estilos simples para usuários finais
  58. 58. Marcando Texto • O novo elemento HTML5 mark foi introduzido para destacar conteúdo similarmente a uma caneta que marca partes importantes de um texto em um livro • Exemplo: <p>Here comes <mark>marked text</mark> was it obvious?</p> • A seguir apresentamos um exemplo com estilos “internos” apenas para mostrar a ideia • Observação: – Por que não utilizar uma tag <span> ou <em>? – Novamente, semântica é o elemento chave – isto torna o significado dos documentos HTML mais óbvio
  59. 59. Marcando Texto
  60. 60. Marcando Texto
  61. 61. Indicando Datas e Tempo • time é um outro elemento semântico de HTML5 usado para indicar conteúdo que é uma data, hora ou ambos • Exemplos: <p>Today it is <time>2009-07-08</time> which is an interesting date.</p> <p>An interesting date/time for SciFi buffs is <time>1999-09-13T09:15:00</time>!</p> • O elemento deve conter um valor de data/hora no formato YYYY-MM-DDThh:mm:ssTZD, onde – YYYY-MM-DD correspondem a ano, mês e dia – T é a letra ‘T’ – hh:mm:ss correspondem a hora, minutos e segundos – ZD corresponde ao designador de zona de tempo
  62. 62. Indicando Datas e Tempo • Para utilizar um formato que possa ser processado facilmente por uma máquina, o atributo datetime é fornecido: <p>My first son was born on <time datetime="2006- 01-13">Friday the 13th</time> so it is my new lucky day.</p>
  63. 63. Inserindo Figuras • Sempre é necessário incluir imagens, gráficos e outros objetos que contém textos e imagens em documentos Web, todos eles normalmente chamados de figuras • HTML5 introduziu o elemento figure <figure id="fig1"> <dd> <img src="figure.png" height="100" width="100“ alt="A screen capture of the figure element in action"> <p>This mighty &lt;figure&gt; tag has returned from HTML 3 to haunt your dreams.</p> </dd> <dt>Figure Ex-1</dt> </figure>
  64. 64. Inserindo Figuras
  65. 65. Especificando Navegação • Um novo elemento HTML5 com propósito de encapsular um grupo de links que serve como uma coleção de links para outros sites, navegação no documento ou navegação no site, é o elemento nav: <nav> <h2>Offsite Links</h2> <a href="http://www.w3c.org">W3C</a><br> <a href="http://www.htmlref.com">Book site</a><br> <a href="http://www.pint.com">Author's Firm</a><br> </nav> ... <nav id="mainNav"> <ul> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="index.html">Home</a></li> </ul> </nav>
  66. 66. Especificando Navegação
  67. 67. Esforço de Mídia Aberta de HTML5 • Um aspecto interessante de HTML5 que vem de esforço anterior da Netscape e da Microsoft é o suporte a multimídia baseada em tags em documentos HTML • Tradicionalmente, multimídia tem sido inserida com os elementos embed e object, particularmente quando inserimos Adobe Flash, Apple QuickTime, Windows Media e outros formatos • Entretanto, ouve um tempo em que eram suportadas tags específicas para inserção de mídia – Interessante que algumas dessas características, como o atributo dynsrc para tags <img>, continuam até hoje • HTML5 trouxe de volta o conceito de multimídia baseada em tags
  68. 68. <video> • Para inserir um vídeo utilizamos a tag <video> e seu atributo src para uma URL local ou remota contendo um filme • Também podemos mostrar controles de playback incluindo o atributo controls, bem como ajustar as dimensões do filme <video src="http://htmlref.com/ch2/html_5.mp4" width="640" height="360" controls> <strong>HTML5 video element not supported </strong> </video>
  69. 69. <video> • Com seu formato de vídeo aberto, HTML5 trouxe de volta a loucura de codec de suporte de mídia, resolvida por Flash • Podemos diminuir o problema fornecendo formatos alternativos, incluindo uma série de tags <source> <video width="640" height="360" controls poster="loading.png"> <source src="html_5.mp4" type="video/mp4"> <source src="html_5.ogv" type="video/ogg"> <strong>HTML5 video element not supported </strong> </video>
  70. 70. <video> • Note o atributo poster, usado para mostrar uma imagem no local do objeto para o caso de demora na carga • Um outro atributo, autobuffer, pode ser usado para avisar ao navegador para carregar o conteúdo de mídia em background, a fim de melhorar a reprodução • O atributo autoplay fará com que a reprodução inicie assim que for possível
  71. 71. <video>
  72. 72. <video>
  73. 73. <audio> • O elemento audio de HTML5 e muito similar ao elemento video • O elemento deve dar suporte a formato de sons comuns como a arquivos WAV: <audio src="http://htmlref.com/ch2/music.wav"> </audio> • Desta maneira, o elemento audio se parece com o elemento proprietário do Internet Explorer bgsound: <audio> <bgsound src="http://htmlref.com/ch2/music.wav"> </audio>
  74. 74. <audio> • Se desejarmos que o usuário controle a execução do som, se não utilizarmos o JavaScript para controlar isto, podemos mostrar controles com o mesmo o atributo de mesmo nome (controls) – A depender do navegador, a aparência destes controles pode mudar <audio src="http://htmlref.com/ch2/music.wav" controls></audio> • Assim como no elemento video, também existem os atributos autobuffer e autoplay
  75. 75. <audio> • Da mesma forma, podemos especificar diferentes formatos usando tags source: <audio controls autobuffer autoplay> <source src="http://htmlref.com/ch2/music.ogg" type="audio/ogg"> <source src="http://htmlref.com/ch2/music.wav" type="audio/wav"> </audio>
  76. 76. Exemplo <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML5 audio examples</title> </head> <body> <h1>Simple Audio Examples</h1> <h2>wav Format</h2> <audio src="http://htmlref.com/ch2/music.wav" controls></audio> <h2>ogg Format</h2> <audio src="http://htmlref.com/ch2/music.ogg" controls></audio> <h2>Multiple Formats and Fallback</h2> <audio controls autobuffer autoplay> <source src="http://htmlref.com/ch2/music.ogg" type="audio/ogg"> <source src="http://htmlref.com/ch2/music.wav" type="audio/wav"> <!--[if IE]> <bgsound src="http://htmlref.com/ch2/music.wav"> <![endif]--> </audio> </body> </html>
  77. 77. Exemplo
  78. 78. Gráficos do Lado Cliente • O elemento canvas é usado para renderizar gráficos simples como linhas, gráficos e outros elementos gráficos customizados do lado cliente • Do ponto de vista de linguagem de marcação, a pouco que podemos fazer com uma tag <canvas> – Apenas colocamos elementos em uma página, atribuímos um nome com o atributo id, e definimos as suas dimensões com os atributos height e width <canvas id="canvas" width="300" height="300"> <strong>Canvas Supporting Browser Required</strong> </canvas> • Note o conteúdo alternativo colocado dentro do elemento para navegadores que não dão suporte ao elemento
  79. 79. Gráficos do Lado Cliente • Após colocarmos a tag <canvas> em um documento, o próximo passo é usar JavaScript para acessar e desenhar no elemento • O exemplo a seguir captura o objeto por seu valor id e cria um contexto para desenho em duas dimensões: var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); • Uma vez que tenhamos o contexto para desenho, podemos empregar vários métodos para desenhar nele • Por exemplo, um retângulo azul com tamanho 150x50 pixels, iniciando nas coordenadas 10,10: context.strokeStyle = "blue"; context.strokeRect(10,10,150,50);
  80. 80. Gráficos do Lado Cliente • De maneira similar, podemos usar o método fillRect(x,y,width,height) para criar um retângulo sólido: context.fillRect(150,30,75,75); • Por padrão, a cor de preenchimento é preta, mas podemos definir uma cor diferente usando o método fillColor(): context.fillStyle = "rgb(218,0,0)"; • Podemos também usar funções de cores em CSS: context.fillStyle = "rgba(218,112,214,0.4)";
  81. 81. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML5 canvas example</title> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.strokeStyle = "orange"; context.strokeRect(10,10,150,50); context.fillStyle = "rgba(218,0,0,0.4)"; context.fillRect(150,30,75,75); } </script> </head> <body> <h1>Simple Canvas Examples</h1> <canvas id="canvas" width="300" height="300"> <strong>Canvas Supporting Browser Required</strong> </canvas> </body> </html>
  82. 82. Exemplo
  83. 83. Desenhando Linhas e Formas • HTML5 define uma API completa para desenhar em um elemento canvas, composta de muitas sub-APIs para tarefas comuns • Por exemplo, para fazer formas mais complexas, a API path pode ser usada – Ela armazena uma coleção de subpaths, formada por várias funções de formas e conecta os subpaths via chamadas a fill() ou stroke() – Para iniciar um caminho, context.beginPath() é chamada – Em seguida, qualquer variedade de chamadas de formas pode ocorrer para adicionar um subpath à coleção – Uma vez que todos subpaths foram adicionados, context.closePath() pode opcionalmente ser chamada para fechar o laço – Então fill() ou stroke() também irão mostrar o path como uma nova forma criada
  84. 84. Exemplo • O exemplo a seguir desenha uma forma em V usando lineTo(): context.beginPath(); context.lineTo(20,100); context.lineTo(120,300); context.lineTo(220,100); context.stroke(); • Se adicionarmos context.closePath() antes de context.stroke(), então a forma em V se tornaria um triângulo, conectando o último ponto ao primeiro • Da mesma forma, chamando fill() em vez de stroke(), o triângulo iria ser preenchido – Podemos chamar os dois em qualquer forma para termos uma linha em torno de uma região preenchida
  85. 85. Exemplo • Para mudar o estilo do desenho, podemos especificar fillStyle e strokeStyle, e também definir a largura da linha com lineWidth: context.strokeStyle = "blue"; context.fillStyle = "red"; context.lineWidth = 10; context.beginPath(); context.lineTo(200,10); context.lineTo(200,50); context.lineTo(380,10); context.closePath(); context.stroke(); context.fill();
  86. 86. Exemplo
  87. 87. Exemplo <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML5 canvas lines and shapes example</title> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); <!-- Triângulo --> context.strokeStyle = "blue"; context.fillStyle = "red"; context.lineWidth = 10; context.beginPath(); context.lineTo(200,10); context.lineTo(200,50); context.lineTo(380,10); context.closePath(); context.stroke(); context.fill(); ...
  88. 88. Exemplo ... <!-- Quadrado --> var lg = context.createLinearGradient(10, 150, 200, 200); lg.addColorStop(0, "#B03060"); lg.addColorStop(0.5, "#4169E1"); lg.addColorStop(1, "#FFE4E1"); context.fillStyle = lg; context.beginPath(); context.rect (10, 150, 200, 200); context.fill(); ...
  89. 89. Exemplo ... <!-- Círculo --> var rg = context.createRadialGradient(50,50,10,60,60,50); rg.addColorStop(0, "#A7D30C"); rg.addColorStop(0.9, "#019F62"); rg.addColorStop(1, "rgba(1,159,98,0)"); context.fillStyle = rg; context.beginPath(); context.fillRect(0,0,130,230); ...
  90. 90. Exemplo ... <!-- V --> context.beginPath(); context.lineTo(250,150); context.lineTo(330,240); context.lineTo(410,150); context.stroke(); } </script> </head> <body> <h1>Simple Shapes on canvas Example</h1> <canvas id="canvas" width="500" height="500"> <strong>Canvas Supporting Browser Required</strong> </canvas> </body> </html>
  91. 91. Aplicando Alguma Perspectiva
  92. 92. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Canvas Cube Example</title> <style type="text/css" media="screen"> body {background-color: #E67B34;} </style> <script type="text/javascript" src="excanvas.js"></script> <script type="text/javascript"> window.onload = function(){ var context = document.getElementById("canvas").getContext("2d"); context.fillStyle = "#fff"; context.strokeStyle = "black"; context.beginPath(); context.moveTo(188, 38); context.lineTo(59, 124); context.lineTo(212, 197); context.lineTo(341, 111); context.lineTo(188, 38); context.closePath(); context.fill(); context.stroke(); ...
  93. 93. ... context.fillStyle = "#ccc"; context.strokeStyle = "black"; context.beginPath(); context.moveTo(341, 111); context.lineTo(212, 197); context.lineTo(212, 362); context.lineTo(341, 276); context.lineTo(341, 111); context.closePath(); context.fill(); context.stroke(); context.fillStyle = "#999"; context.strokeStyle = "black"; context.beginPath(); context.moveTo(59, 289); context.lineTo(59, 124); context.lineTo(212, 197); context.lineTo(212, 362); context.lineTo(59, 289); context.closePath(); context.fill(); context.stroke(); } ...
  94. 94. ... </script> </head> <body> <h1>Canvas Perspective</h1> <canvas id="canvas" width="400" height="400"> <strong>Canvas Supporting Browser Required</strong> </canvas> </body> </html>
  95. 95. Desenhando Arcos e Curvas • É possível criar linhas curvas usando arc(), arcTo(), quadraticCurveTo() e bezierCurveTo() • Podermos usar o método arc(x,y, radius, startAngle, endAngle, counterclockwise) para desenhar círculos ou partes de círculos – A sua localização é determinada pelo ponto do seu centro (x,y) bem como pelos seu raio (radius) – O quanto deve ser desenhado é definido pelo ângulo inicial (startAngle) e final (endAngle) em radianos – A direção da curva é determinada por um valor booleano (counterclockwise): se true, sentido anti-horário; caso contrário, sentido horário • Para desenhar um círculo completo: context.arc(150,150,100,0,Math.PI*2,true);
  96. 96. Desenhando Arcos e Curvas • O método quadraticCurveTo(cpx, cpy, x, y) inicia no último ponto no path e desenha uma linha até (x, y) – Os pontos de controle (cpx, cpy) é usada para puxar a linha nesta direção, resultando em uma linha curvada – Devemos chamar moveTo() inicialmente, para determinar o último ponto do path – No exemplo a seguir, a linha é desenhada de (155,130) até (155,155), como as coordenadas do ponto de controle (130,145) são à esquerda e no centro, a linha é puxada nesta direção context.moveTo(155,130); context.quadraticCurveTo(130,145,155,155);
  97. 97. Desenhando Arcos e Curvas • O método bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) é similar a quadraticCurveTo() exceto pelo fato de possuir dois pontos de controle e a linha ser puxada para ambos: context.moveTo(80,110); context.bezierCurveTo(95,85,115,85,130,110); • Utilize arcTo(x1, y1, x2, y2, radius) para criar duas linhas e um arco com o raio especificado, contendo um ponto de tangência entre cada uma das linhas – A primeira linha é desenhada a partir do último ponto até (x1, y1) – A segunda linha é desenhada a partir de (x1, y1) até (x2, y2) context.moveTo(50,20); context.arcTo(280,20,280,280,30); context.arcTo(280,280,20,280,30); context.arcTo(20,280,20,20,30); context.arcTo(20,20,280,20,30);
  98. 98. Exemplo
  99. 99. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Canvas Face Example</title> <script type="text/javascript" src="excanvas.js"></script> <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.strokeStyle = "black"; context.lineWidth = 5; /* create a frame for our drawing */ context.beginPath(); context.fillStyle = "blue"; context.moveTo(50, 20); context.arcTo(280, 20, 280, 280, 30); context.arcTo(280, 280, 20, 280, 30); context.arcTo(20, 280, 20, 20, 30); context.arcTo(20, 20, 280, 20, 30); context.stroke(); context.fill(); ...
  100. 100. ... /* draw circle for head */ context.beginPath(); context.fillStyle = "yellow"; context.arc(150,150,100,0,Math.PI*2,true); context.fill(); /* draw the eyes, nose and mouth */ context.beginPath(); context.moveTo(80,110); context.bezierCurveTo(95, 85, 115, 85, 130, 110); context.moveTo(170,110); context.bezierCurveTo(185, 85, 205, 85, 220, 110); context.moveTo(155,130); context.quadraticCurveTo(130, 145, 155, 155); context.moveTo(100,175); context.quadraticCurveTo(150, 250, 200, 175); context.moveTo(50, 20); context.stroke(); } </script> </head> ...
  101. 101. ... <body> <h1>Smile you're on canvas</h1> <canvas id="canvas" width="300" height="300"> <strong>Canvas Supporting Browser Required</strong> </canvas> </body> </html>
  102. 102. Escala, Rotação e Transformação • scale(x,y) – usada para mudar a escala de objetos – O parâmetro x determina a escala na direção horizontal – O parâmetro y determina a escala na direção vertical /* scale tall and thin */ context.scale(.5,1.5); writeBoxes(context); /* move short and wide */ context.scale(1.75,.2); writeBoxes(context);
  103. 103. Escala Simples
  104. 104. ... <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); /* draw original boxes */ writeBoxes(context); /* reset canvas and context */ canvas = document.getElementById("canvas2"); context = canvas.getContext("2d"); /* scale tall and thin */ context.scale(.5, 1.5); writeBoxes(context); /* reset canvas and context */ canvas = document.getElementById("canvas3"); context = canvas.getContext("2d"); /* move short and wide */ context.scale(1.75, .2); writeBoxes(context); } ...
  105. 105. ... function writeBoxes(context){ context.fillStyle = "rgba(166,42,42,.4)"; context.beginPath(); context.fillRect (0, 0, 100, 100); context.beginPath(); context.fillStyle = "rgba(74,118,110,.6)"; context.fillRect (50, 50, 100, 100); context.beginPath(); context.fillStyle = "rgba(166,42,42,.4)"; context.fillRect (100, 100, 100, 100); } </script> ...
  106. 106. Escala, Rotação e Transformação • rotate(angle) – usado para rotacionar um desenho na direção horária por um ângulo definido em radianos: /* rotate to the right */ context.rotate(Math.PI/8); writeBoxes(context); /* rotate to the left */ context.rotate(-Math.PI/8); writeBoxes(context);
  107. 107. Rotação Simples
  108. 108. ... <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); /* rotate to the right */ context.rotate(Math.PI/8); writeBoxes(context); /* reset canvas and context */ canvas = document.getElementById("canvas2"); context = canvas.getContext("2d"); /* rotate to the left */ context.rotate(-Math.PI/8); writeBoxes(context); } ...
  109. 109. Escala, Rotação e Transformação • translate(x,y) – modifica a origem de (0,0) para uma outra localização no desenho – O exemplo a seguir modifica a origem para (100,100) – Assim, quando as coordenadas iniciais do retângulo são especificadas em (0,0), na verdade é iniciada em (100,100) context.translate(100,100); context.fillRect(0,0,100,100);
  110. 110. Mudança Simples
  111. 111. ... <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); /* translate to the bottom right */ context.translate(100, 100); writeBoxes(context); /* reset canvas and context */ canvas = document.getElementById("canvas2"); context = canvas.getContext("2d"); /* move a bit off top left */ context.translate(-20, -10); writeBoxes(context); }
  112. 112. Escala, Rotação e Transformação • setTransform(m11,m12,m21,m22,dx,dy) – modifica a matriz identidade com os parâmetros dados
  113. 113. ... <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.fillStyle = "rgba(255,0,0,.4)"; context.rect (0, 0, 100, 100); context.fill(); context.setTransform(1, 1, 1 ,0, 0, 0); context.beginPath(); context.fillStyle = "rgba(0,255,0,.4)"; context.rect (75, 75, 100, 100); context.fill(); context.setTransform(0, .5, 1 ,.8, 0, 0); context.beginPath(); context.fillStyle = "rgba(0,0,255,.4)"; context.rect (50, 50, 100, 100); context.fill(); } </script> ...
  114. 114. Utilizando Bitmaps em Desenhos • Uma característica muito interessante de canvas é a habilidade para inserir imagens em desenhos • Existem várias maneiras de fazer isso, a mais básica, drawImage(img, x, y), recebe um objeto de imagem e as coordenadas onde a imagem será colocada em seu tamanho natural – Podemos usar drawImage(img,x,y,w,h) se quisermos modificar o tamanho da imagem, atribuindo o comprimento (w) e a altura (h) • A imagem passada como parâmetro pode vir de vários locais: – Uma imagem já carregada na página – Dinamicamente criada através do DOM – Um outro objeto canvas – Uma imagem criada atribuindo-se seu src para uma variável (URL)
  115. 115. Utilizando Bitmaps em Desenhos • É importante lembrar que a imagem deve ser carregada a tempo do canvas estar pronto para acessá-la – Isto querer o uso da função onload para a imagem var img = new Image(); img.onload = function(){ context.drawImage(img,0,0,400,400); } img.src = "dog.jpg";
  116. 116. Utilizando Bitmaps em Desenhos • drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh) pode ser chamada para que parte da imagem seja removida e desenhada no canvas – As coordenadas (sx, sy) representam a localização na imagem – sw e sh são o comprimento e a altura, respectivamente – Os restos dos parâmetros (d?), são os mesmos do formato anterior var img = document.getElementById("image1"); /* slices a 100px square from image1 at location (200,75) Places on the canvas at (50,50) and stretches it to 300px square. */ context.drawImage(img,200,75,100,100,50,50,300,300);
  117. 117. Utilizando Bitmaps em Desenhos • Uma vez que a imagem esteja no canvas, é possível desenhar sobre ela • O exemplo a seguir carrega uma imagem e desenha uma região em preparação para eventualmente adicionar uma legenda
  118. 118. ... <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var img = new Image(); img.src = "dog.jpg"; img.onload = function(){ context.lineWidth = 5; context.drawImage(img,0,0,400,400); context.beginPath(); context.lineWidth = 5; context.fillStyle = "orange"; context.strokeStyle = "black"; context.rect(50,340,300,50); context.fill(); context.stroke(); } } </script> ...
  119. 119. Suporte de Texto para canvas • Podemos escrever texto usando fillText(text,x,y [,maxWidth]) ou strokeText(text,x,y [,maxWidth]) – Ambas as funções recebem um parâmetro final opcional, maxWidth, que irá cortar o texto se seu comprimento for maior que o especificado • Tanto fillText() como strokeText() serão utilizados para mostrar uma linha ao redor do texto • No exemplo a seguir utilizamos uma cor de preenchimento azul com uma linha preta ao redor das letras: context.fillStyle = "rgb(0,0,255)"; context.strokeStyle = "rgb(0,0,0)"; context.fillText("Canvas is great!",10,40); context.strokeText("Canvas is great!",10,40);
  120. 120. Suporte de Texto para canvas • Para um texto mais customizado, podemos usar a propriedade font, da mesma forma que em CSS • Podemos usar textAlign e textBaseline para atribuir o alinhamento horizontal e vertical do texto – textAlign tem como valores possíveis: start, end, left, right e center – textBaseline tem como valores possíveis: top, hanging, middle, alphabetic, ideographic e bottom context.font = "bold 30px sans-serif"; context.textAlign = "center"; context.textBaseline = "middle";
  121. 121. Suporte de Texto para canvas • Podemos adicionar sombras a formas simplesmente atribuindo as propriedades de sombra shadowOffsetX, shadowOffsetY, shadowBlur, e shadowColor – Os valores de offset simplesmente indicam a distância da sombra da imagem: números positivos faz com que a sombra apareça a direita e abaixo, números negativos faz com que a sombra apareça a esquerda e acima – A propriedade shadowBlur indica o quão embaçada a sombra será – A propriedade shadowColor indica a cor da sombra context.shadowOffsetX = 10; context.shadowOffsetY = 5; context.shadowColor = "rgba(255,48,48,0.5)"; context.shadowBlur = 5; context.fillStyle = "red"; context.fillRect(100,100,100,100);
  122. 122. Exemplo
  123. 123. ... <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var img = new Image(); img.src = "dog.jpg"; img.onload = function(){ context.lineWidth = 5; context.drawImage(img,0,0,400,400); context.beginPath(); context.lineWidth = 5; context.fillStyle = "orange"; context.strokeStyle = "black"; context.rect(50,340,300,50); context.fill(); context.stroke(); ...
  124. 124. ... context.lineWidth = 2; context.font = '40px sans-serif'; context.strokeStyle = "black"; context.fillStyle = "white"; context.fillText("Canvas is great!", 60, 375); context.shadowOffsetX = 10; context.shadowOffsetY = 5; context.shadowColor = "rgba(0, 48, 48, 0.5)"; context.shadowBlur = 5; context.strokeText("Canvas is great!", 60, 375); } } </script> ...
  125. 125. Novos Tipos de Campos de Formulários • Tradicionalmente, o elemento input de HTML é usado para definir a maioria dos campos de formulários – O tipo em particular do campo de interesse é definido pelo atributo type, o qual é atribuído text, password, hidden, checkbox, radio, submit, reset, image ou button • HTML5 adiciona vários outros valores que serão vistos aqui
  126. 126. Seletor de Cor • Atribuindo type igual a color deverá criar um seletor de cores <p><label>color:<input type="color" name="favColor"> </label></p>
  127. 127. Seletores de Data e Hora • Uma variedade de controles de data podem ser diretamente criados através do atributo type: – date – datetime – datetime-local – month – week – time • Isto deveria restringir a escolha de datas, mas qualquer restrição também pode ser feita através de script
  128. 128. Seletores de Data e Hora <p><label>date: <input type="date" name="date"></label></p> <p><label>datetime: <input type="datetime" name="datetime"></label></p> <p><label>datetime-local: <input type="datetime-local" name="datetime2"> </label></p> <p><label>time: <input type="time" name="time"></label></p> <p><label>month: <input type="month" name="month"></label></p> <p><label>week: <input type="week" name="week"></label></p>
  129. 129. Seletores de Data e Hora
  130. 130. Seletor de Números • Atribuindo a type o valor number, mostra uma spin box de valor numérico <p><label>number:<input type="number" name="number"></label></p> • Sem restrição, a spin box não imporá limites, embora seja possível definir valores permitidos – Utilize os atributos max, min, ou ainda step (salto) <input type="number" name="number2" min="-5" max="25" step="5">
  131. 131. Slider • Um controle similar a number pode ser criado com range: <input type="range" name="range" max="100" min="1" step="5"> • Da mesma forma que number, os atributos min, max e step podem ser usados para limitar valores: <p><label>range (1-100 step 5): <input type="range" name="range" max="100" min="1" step="5"> </label></p> <p><label>range (-1000-1000 step 100): <input type="range" name="range" max="1000" min="- 1000" step="100"> </label></p>
  132. 132. Outras Restrições Semânticas • Conseguidas atribuindo tel, email ou url ao atributo type da tag <input>: <p><label>Telephone Number: <input type="tel" name="telno"></label></p> <p><label>Email: <input type="email" name="email"> </label></p> <p><label>URL: <input type="url" name="url"> </label></p> • Observação: – Não implementada pelo Google Chrome – Apenas email e url atualmente implementadas pelo Mozilla Firefox
  133. 133. Outras Restrições Semânticas
  134. 134. Outras Restrições Semânticas • Também é possível atribuir a type o valor search, que pode eventualmente ter uma lista associada • Atualmente, alguns navegadores fornecem alguns controles para limpar o campo de busca: <p><label>Search: <input type="search" name="search"></label></p>
  135. 135. Validando a Entrada de Dados • Podemos forçar a entrada de dados, sem recorrer a JavaScript, em navegadores compatíveis, atribuindo o atributo required para um controle de formulário: <input type="text" name="firstname" id="firstname" required> – Não implementado no Google Chrome
  136. 136. Validando a Entrada de Dados • O atributo pattern pode ser empregado para forçar a entrada de dados conforme uma expressão regular fornecida <label for="phonenum" class="required">Phone Number:</label> <input type="text" name="phonenum" id="phonenum" required pattern="^(d{2}) d{4}-d{4}$">
  137. 137. Validando a Entrada de Dados • Se title é especificado quando pattern é aplicado, o navegador pode mostrar uma informação de advertência: <label for="phonenum" class="required">Phone Number:</label> <input type="text" name="phonenum" id="phonenum" required pattern="^(d{2}) d{4}-d{4}$" title="Phone number of form (xx) xxxx-xxxx required">
  138. 138. Validando a Entrada de Dados • Em alguns casos, além de aplicar o padrão (pattern) podemos também atribuir o tipo de valor semântico apropriado, como em email – Nesse caso não sabemos como o navegador irá se comportar – No caso do Mozilla Firefox prevaleceu o tipo e não o padrão <label for="email" class="required">E-mail:</label> <input type="text" name="email" id="email" required pattern="^w+([.-]?w+)*@w+([.- ]?w+)*.(w{2}|(com|net|org|edu|int|mil|gov|arpa| biz|aero|name|coop|info|pro|museum))$" title="E- mail format required">
  139. 139. Exemplo
  140. 140. Listas Autocompletar • Em HTML5, o atributo list do elemento input é usado para indicar ao DOM uma id para um elemento de lista de dados (datalist) usado para fornecer uma listra predefinida de opções sugeridas para a entrada do usuário: <p><label>Favorite Dog: <input type="text" list="dogs"></label></p> <datalist id="dogs"> <option>Angus</option> <option>Tucker</option> <option>Cisco</option> <option>Sabrina</option> </datalist> • Similar ao atributo autocomplete discutido adiante, mas permite que especifiquemos dados padrões em vez do que foi digitado anteriormente no navegador
  141. 141. Melhorias de Usabilidade • É comum autores de páginas Web utilizarem o atributo value para preencher com algum texto um campo de formulário: <input type="text" name="firstname" id="firstname" value="Thomas"> • Da mesma maneira, são colocados textos de aviso: <input type="text" name="middlename" id="middlename"value="Enter your middle name here"> – Entretanto, usar value desta maneira é inapropriado porque o seu objetivo não é fornecer instruções sobre o uso do campo e sim fornecer um valor potencial para o usuário submeter ao servidor
  142. 142. Melhorias de Usabilidade • HTML5 introduziu o atributo placeholder com essa finalidade: <input type="text" name="firstname" id="firstname" placeholder="Enter your name here"> • HTML5 também introduziu o atributo autofocus, que faz com que o navegador imediatamente transfira o foco para o campo quando a página é carregada: <label>Search:<input type="search" name="query" id="searchBox" autofocus></label> • Também é possível avisar ao navegador para mostrar sugestões de auto completar (autocomplete) fornecidas para campos se nomes similares de campos foram usados no passado: <input type="text" name="firstname" id="firstname" placeholder="Enter your name here" autocomplete>
  143. 143. Elementos e Atributos para Aplicações Web • Um tema chave na especificação de HTML5 é a ênfase em dar suporte ao desenvolvimento de aplicações Web • Vários elementos e atributos foram introduzidos na especificação para dar continuidade à migração de páginas Web para aplicações Web • Alguns dos elementos apresentados aqui, uma vez que estas características ou ainda não são implementadas ou são ainda controversas, podem ser considerados apenas ilustrativos uma vez que mudanças em HTML podem encorajá-los ou em alguns casos, modificá-los ou removê- los – Lembrando que uma biblioteca JavaScript possivelmente poderá simular o seu uso
  144. 144. Novo Propósito do Elemento menu • Tradicionalmente este elemento era usado para criar um menu de escolhas simples, mas a maioria dos navegadores simplesmente o renderizavam como uma lista não ordenada: <menu type="list" id="oldStyle"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </menu>
  145. 145. Novo Propósito do Elemento menu • Em HTML5 o elemento menu retornou ao seu propósito original • Um novo atributo type foi introduzido e pode assumir os valores toolbar, context ou list (o padrão) • Este exemplo cria um menu File para uma aplicação Web: <menu type="toolbar" id="fileMenu" label="File"> <li><a href="javascript:newItem();">New</a></li> <li><a href="javascript:openItem();">Open</a></li> <li><a href="javascript:closeItem();">Close</a></li> <hr> <li><a href="javascript:saveItem();">Save</a></li> <li><a href="javascript:saveAsItem();">Save as... </a></li> <hr> <li><a href="javascript:exitApp();">Exit</a></li> </menu>
  146. 146. Novo Propósito do Elemento menu • Deveria renderizar... • Mas...
  147. 147. Novo Propósito do Elemento menu • Da mesma forma, deveria ser possível a definição de um menu de contexto, normalmente chamado por um clique no botão direito: <menu type="context" id="simpleMenu"> <li><a href="javascript:add();">Add</a></li> <li><a href="javascript:edit();">Edit</a></li> <li><a href="javascript:delete();">Delete</a></li> </menu> • Que deveria se parecer com:
  148. 148. Novo Propósito do Elemento menu • O atributo global contextmenu é usado para definir um elemento com um menu de contexto – O valor do atributo deve ser uma string que referencia o id de uma tag <menu> existente no DOM • Por exemplo, <div contextmenu="simpleMenu">Widget</div> – Deveria referenciar o menu previamente definido com id simpleMenu
  149. 149. Elemento command <menu type="command" label="Main Menu"> <command type="command" label="Add" icon="add.png"> <command type="command" label="Edit" icon="edit.png"> <command type="command" label="Delete" icon="delete.png"> <hr> <menu type="command" label="Skin" id="skinMenu"> <command type="radio" radiogroup="skin" label="Classic"> <command type="radio" radiogroup="skin" label="Modern" checked> <command type="radio" radiogroup="skin" label="Neo"> </menu> <hr> <command type="checkbox" label="Secure Mode"> </menu>
  150. 150. Outros Elementos • Outros elementos que foram introduzidos por HTML5 incluem: – meter – progress – detail – output
  151. 151. Arrastar e Soltar
  152. 152. Atributo contenteditable • Permite modificar o texto diretamente ao clicar no texto: <p contenteditable="true">This paragraph of text is editable. Click it and you will see. Of course there is no sense of saving it with code to transmit the information to the server. This paragraph of text is editable. Click it and you will see. Of course there is no sense of saving it with code to transmit the information to the server.</p>
  153. 153. Atributo contenteditable • Modificando o estilo usando JavaScript para alterar a nome da classe: <p ondblclick="this.contentEditable=true;this.className='inEdit';" onblur="this.contentEditable=false;this.className='';">This paragraph uses some simple script to be editable. Double-click the text to begin editing.</p>
  154. 154. Ainda Outros... • Caso tenha interesse: – Atributo spellcheck (correção de erros) – Internacionalização – Metadados (permitir/aprimorar processamento por máquina) – Atributo defer (para melhorar renderização da página) – ...
  155. 155. UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1 Fábio M. Pereira (fmourapereira@yahoo.com.br)
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×