curso de desenvolvimento de sistemas web - (x)html

UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO

DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1

Fábio M. Pereira

([email protected])

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

Hello World!

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>



</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>

Hello World!

• HTML5:

<!DOCTYPE html>

<html>

<head>


charset=utf-8">

<title>Hello HTML5 World</title>



</head>

<body>

<h1>Welcome to the World of HTML5</h1>

<hr>






</body>

</html>

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>


charset=utf-8“ />

<title>Hello XHTML World</title>



</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>

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

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

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

Estrutura de Um Documento (X)HTML

• Um modelo básico de um documento pode ser derivado da especificação do HTML 4.01 DTD:


• A estrutura de um documento XHTML é muito parecida:


• 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

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

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

O Elemento title

• Um título pode conter texto padrão, linguagem de marcação não é interpretada, entretanto entidades de caracteres como © (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

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" >


• <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


• <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


• <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


• <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>

• Comentários

– Seguindo o formato SGML, um comentário inicia com <!– e termina com --> e pode incluir várias linhas

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/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>



<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" />

 <base href="http://htmlref.com/baseexample" />

Exemplo de Documento XHTML

…  <link rel="stylesheet" href="screen.css" media="screen" /> <link rel="stylesheet" href="printer.css“ media="print" /> <style type="text/css">  </style>

…  <script type="text/javascript">  </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>

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


• 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

Exemplo

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

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>



</head>

<body>

<h1>Welcome to the World of HTML</h1>

<hr>






</body>

</html>

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


• (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


• (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


• 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 />


• 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" />

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é

Elementos HTML 4 Removidos

Elementos Redefinidos 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 HTML5

• Alguns desses elementos ainda não possuem suporte, mas muitos navegadores já estão implementando os mais interessantes, como audio e video

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 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>

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>

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

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>

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>

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">



</div>

<div class="section">

<div class="header">

<h2>Section Heading</h2>

</div>

<p>Content of section.</p>

</div>

<div class="footer">



</div>

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

Exemplo

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

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

Marcando Texto

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

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>

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 <figure> tag has returned

from HTML 3 to haunt your dreams.</p>

</dd>

<dt>Figure Ex-1</dt>

</figure>

Inserindo Figuras

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>

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 é 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

<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>

<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>

<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

<video>

<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>

<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

<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>

Exemplo

<!DOCTYPE html>

<html>

<head>


<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">



</audio>

</body>

</html>

Exemplo

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


• 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);


• 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)";

<!DOCTYPE html>

<html>

<head>


<title>HTML5 canvas example</title>

<script type="text/javascript">

window.onload = function() {



context.strokeStyle = "orange";

context.strokeRect(10,10,150,50);

context.fillStyle = "rgba(218,0,0,0.4)";


}

</script>

</head>

<body>

<h1>Simple Canvas Examples</h1>

<canvas id="canvas" width="300" height="300">


</canvas>

</body>

</html>

Exemplo

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

Exemplo

• O exemplo a seguir desenha uma forma em V usando lineTo():

context.beginPath();

context.lineTo(20,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

Exemplo

• Para mudar o estilo do desenho, podemos especificar fillStyle e strokeStyle, e também definir a largura da linha com lineWidth:


context.fillStyle = "red";

context.lineWidth = 10;





context.closePath();

context.stroke();

context.fill();

Exemplo

Exemplo

<!DOCTYPE html>

<html>

<head>


<title>HTML5 canvas lines and shapes example</title>


window.onload = function() {













context.stroke();

context.fill();

...

Exemplo

...



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.rect (10, 150, 200, 200);

context.fill();

...

Exemplo

...



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;



...

Exemplo

...







context.stroke();

}

</script>

</head>

<body>

<h1>Simple Shapes on canvas Example</h1>



</canvas>

</body>

</html>

Aplicando Alguma Perspectiva

<!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>


window.onload = function(){

var context = document.getElementById("canvas").getContext("2d");

context.fillStyle = "#fff";

context.strokeStyle = "black";


context.moveTo(188, 38);

context.lineTo(59, 124);





context.fill();

context.stroke();

...

...

context.fillStyle = "#ccc";









context.fill();

context.stroke();

context.fillStyle = "#999";









context.fill();

context.stroke();

}

...

...

</script>

</head>

<body>

<h1>Canvas Perspective</h1>



</canvas>

</body>

</html>

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);


• 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);


• 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.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);

Exemplo

<!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>



var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');



/* create a frame for our drawing */


context.fillStyle = "blue";


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();

...

...

/* draw circle for head */


context.fillStyle = "yellow";

context.arc(150,150,100,0,Math.PI*2,true);

context.fill();

/* draw the eyes, nose and mouth */



context.bezierCurveTo(95, 85, 115, 85, 130, 110);


context.bezierCurveTo(185, 85, 205, 85, 220, 110);


context.quadraticCurveTo(130, 145, 155, 155);


context.quadraticCurveTo(150, 250, 200, 175);


context.stroke();

}

</script>

</head>

...

...

<body>

<h1>Smile you're on canvas</h1>



</canvas>

</body>

</html>

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);


Escala Simples

...





/* draw original boxes */


/* reset canvas and context */

canvas = document.getElementById("canvas2");

context = canvas.getContext("2d");

/* scale tall and thin */

context.scale(.5, 1.5);





/* move short and wide */

context.scale(1.75, .2);


}

...

...

function writeBoxes(context){

context.fillStyle = "rgba(166,42,42,.4)";


context.fillRect (0, 0, 100, 100);







}

</script>

...


• 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);


/* rotate to the left */

context.rotate(-Math.PI/8);


Rotação Simples

...





/* rotate to the right */

context.rotate(Math.PI/8);





/* rotate to the left */

context.rotate(-Math.PI/8);


}

...


• 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);


Mudança Simples

...





/* translate to the bottom right */

context.translate(100, 100);





/* move a bit off top left */

context.translate(-20, -10);


}


• setTransform(m11,m12,m21,m22,dx,dy) – modifica a matriz identidade com os parâmetros dados

...






context.rect (0, 0, 100, 100);

context.fill();

context.setTransform(1, 1, 1 ,0, 0, 0);



context.rect (75, 75, 100, 100);

context.fill();

context.setTransform(0, .5, 1 ,.8, 0, 0);



context.rect (50, 50, 100, 100);

context.fill();

}

</script>

...

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)


• É 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";


• 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);


• 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

...





var img = new Image();







context.fillStyle = "orange";


context.rect(50,340,300,50);

context.fill();

context.stroke();

}

}

</script>

...

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);


• 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";


• 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;



Exemplo

...





var img = new Image();







context.fillStyle = "orange";


context.rect(50,340,300,50);

context.fill();

context.stroke();

...

...


context.font = '40px sans-serif';


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>

...

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

Seletor de Cor

• Atribuindo type igual a color deverá criar um seletor de cores <p><label>color:<input type="color" name="favColor">

</label></p>

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


<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>

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">

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>

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


• 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>

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


• 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}$">


• 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">


• 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">

Exemplo

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

Melhorias de Usabilidade

• É comum autores de páginas Web utilizarem o atributo value para preencher com algum texto um campo de formulário:


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

Melhorias de Usabilidade

• HTML5 introduziu o atributo placeholder com essa finalidade:


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:


placeholder="Enter your name here" autocomplete>

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

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>


• 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>


• Deveria renderizar...

• Mas...


• 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:


• 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

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>

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 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>

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>

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)

– ...

UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO

DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1

Fábio M. Pereira

([email protected])

curso de desenvolvimento de sistemas web - (x)html

Technology