Curso de Desenvolvimento de Sistemas Web - (X)HTML
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Curso de Desenvolvimento de Sistemas Web - (X)HTML

  • 285 views
Uploaded on

Aula de (X)HTML do Curso de Desenvolvimento de Sistemas Web ...

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
285
On Slideshare
285
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
25
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. Hello World!
  • 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. 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. 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. 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. 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. 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. 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. Estrutura de Um Documento (X)HTML • A estrutura de um documento XHTML é muito parecida:
  • 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. 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. 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. 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 &#169;), 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. <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. <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. 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. 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. 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. 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. 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. 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. Sintaxe Completa do Elemento head
  • 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. 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. 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. 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. Exemplo
  • 30. O Corpo do Documento
  • 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. 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. 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. 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. 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. 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. 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. 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. Elementos HTML 4 Removidos
  • 40. Elementos Redefinidos em HTML5
  • 41. Atributos Removidos em HTML5
  • 42. Atributos Removidos em HTML5
  • 43. Outros Elementos Removidos em HTML5
  • 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. Novos Elementos HTML5
  • 46. Novos Elementos HTML5
  • 47. Atributos Chave Adicionados Por HTML5
  • 48. Atributos-Chave Adicionados Por HTML5
  • 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. 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. 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. 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. 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. 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. 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. Exemplo
  • 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. 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. Marcando Texto
  • 60. Marcando Texto
  • 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. 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. 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. Inserindo Figuras
  • 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. Especificando Navegação
  • 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. <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. <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. <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. <video>
  • 72. <video>
  • 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. <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. <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. 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. Exemplo
  • 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. 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. 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. <!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. Exemplo
  • 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. 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. 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. Exemplo
  • 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. 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. 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. 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. Aplicando Alguma Perspectiva
  • 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. ... 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. ... </script> </head> <body> <h1>Canvas Perspective</h1> <canvas id="canvas" width="400" height="400"> <strong>Canvas Supporting Browser Required</strong> </canvas> </body> </html>
  • 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. 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. 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. Exemplo
  • 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. ... /* 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. ... <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. 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. Escala Simples
  • 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. ... 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. 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. Rotação Simples
  • 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. 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. Mudança Simples
  • 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. Escala, Rotação e Transformação • setTransform(m11,m12,m21,m22,dx,dy) – modifica a matriz identidade com os parâmetros dados
  • 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. 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. 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. 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. 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. ... <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. 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. 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. 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. Exemplo
  • 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. ... 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. 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. 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. 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. 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. Seletores de Data e Hora
  • 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. 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. 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. Outras Restrições Semânticas
  • 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. 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. 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. 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. 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. Exemplo
  • 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. 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. 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. 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. 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. 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. Novo Propósito do Elemento menu • Deveria renderizar... • Mas...
  • 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. 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. 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. Outros Elementos • Outros elementos que foram introduzidos por HTML5 incluem: – meter – progress – detail – output
  • 151. Arrastar e Soltar
  • 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. 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. 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. 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)