Introdução Ao HTML5

Introdução ao HTML5 – O que há de novo?

http://www.escolacriatividade.com/introducao-ao-html5-o-que-ha-de-novo/

A linguagem HTML5 ainda não está na sua versão final, mas a cada dia que passa mais e mais websites começam a usá-la. A linguagem aproxima-se dos requisitos da Web e torna-se mais fácil publicar conteúdos Web 2.0. Quando HTML4 reinava, a Web2.0 nem sequer tinha sido pensada, sendo assim pouco compatíveis. Mas com HTML5, é expectável que seja diferente.

Embora seja previsível que quando HTML5 chegar à sua versão final, já exista Web 3.0, 4.0 ou quem sabe até mais, criando assim a necessidade de um update ao HTML5. As diferenças entre HTML4 e HTML5 não são muitas, mas há algumas que são importantes e que convém referir, confira em baixo!

SINTAXE SIMPLIFICADA

Esta é uma das diferenças mais notáveis entre HTML4 e HTML5, e que certamente irá fazer as delicias dos programadores Web. A sintaxe HTML5 é compativel com HTML4 mas há bastantes melhorias. A declaração doctype é muito mais curta (“<!doctype html>” ao invés de por ex. “<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>” ). Variações de doctypes já não são suportadas, é necessário sintaxe XHTML ou HTML em modo restricto.

NOVOS ELEMENTOS

Os novos elementos em HTML5 é a diferença mais notável, têm como propósito a simplificar o desenvolvimento do website, aproximar dos requisitos Web2.0, entre outros de entre uma lista enorme que pode ser consultada aqui.

Deixo agora alguns elementos aqui descritos:

<article> – Este atributo é usado para separar artigos, posts de blogs e outro conteúdo de texto. Com a crescente comunidade de bloggers e artigos de opinião, este elemento é certamente muito útil.

<header> e <footer> – Estes elementos são usados para o cabeçalho e rodapé da página e podem substituir os elementos <div> que usamos hoje para identificar vários elementos, incluindo o cabeçalho e rodapé. Uma vez que cabeçalho e rodapé estão presentes em quase todas as páginas, faz sentido que agora tenham um elemento só seu.

<nav> – Semelhente ao <header> e <footer>, na medida em que foi criado para dar um elemento à navegação de página.

<audio> e <video> – O conteúdo áudio e vídeo é tão comum de hoje em dia, alavancado pelas ligações à internet de alta velocidade, que era impossível não ter estes elementos disponíveis em HTML5, para facilitar a colocação destes conteúdos no website.

http://www.escolacriatividade.com/introducao-ao-html5-o-que-ha-de-novo/

Além dos novos elementos introduzidos, foram também introduzidos novos atributos a elementos já existentes, mas a lista é ainda maior do que a lista dos elementos! De qualquer forma, antes de começar a programar em HTML5, dê uma olhadela na nova lista de atributos para elementos que usa frequentemente.

ELEMENTOS E ATRIBUTOS ELIMINADOS

Além de novos elementos e atributos, também alguns destes foram apagados. Embora muitos deles não venham a fazer falta, porque muito raramente eram utilizados, alguns podiam ter ficado.

O primeiro grupo de elementos que foram utilizados e que serão melhor utilizados através de CSS são o <center>, <big> e <u>. Agora o seu lugar é na folha de estilos.

O segundo grupo tem a ver com as frames, <frame>, <frameset> e <noframes> eram tão antiquados que foi um alívio terem sido eliminados. Quando foram lançados, seriam espectaculares… mas com a evolução rapidamente passaram a antiquados.

O terceiro grupo pende em elementos raramente utilizados, que é o caso do <isindex>, <dir>, <applet> e <acronym>.

Como pode constatar, há de facto algumas diferenças entre o HTML5 e o HTML4, mas elas não são diferenças muito profundas. Quero com isto dizer que não terá de reaprender HTML da estaca zero. De qualquer das formas irá levar o seu tempo até se habituar ás novas regras, nomeadamente no que toca aos atributos e elementos alterados. A boa notícia é que o HTML5 veio para simplificar, e isto é o suficiente para justificar a actualização.

Ainda assim, deixamos uma relação das novas tags HTML5, as quais vêm mudar um pouco o contexto do novo HTML5, tome nota:

article: Bloco de artigo aside: Conteúdo extra q tenha a ver com o site / artigo audio: Conteúdo de som canvas: Gráfico vetorial command: Botão de comando datagrid: Dados em uma lista ramificada datalist: Lista dropdown datatemplate: Template de dados details: Detalhes de um elemento dialog: Diálogo de uma conversa embed: Interatividade com conteúdo externo ou um plugin (até que fim foi

especificado!) event-source: Alvo para eventos enviados por um servidor figure: Grupo de conteúdo de mídia e sua legenda footer: Bloco de rodapé

header: Bloco de cabeçalho mark: Tag para marcação em textos meter: Medição entre um valor mínimo e um valor máximo nav: Bloco de navegação nest: Próximo ponto para criação de elemento (trabalha junto com a tag

datatemplate e rule) output: Alguns tipos de saída de dados como em execução de scripts progress: Progresso de uma tarefa de qualquer tipo rule: Linha de um template (datatemplate) selection: Seção do documento como capítulos ou alguma outra seção do

documento source: Recurso multimídia time: Data / tempo video: Um vídeo

Aprender HTML5 em 4 passos!

http://www.escolacriatividade.com/aprender-html5/

Como é de conhecimento geral, o HTML5 chegou recentemente ao mundo da internet. Ainda não estando na sua versão final, é perfeitamente usável e trouxe algumas mudanças e melhorias, conforme informámos no artigo de Introdução ao HTMl5. Contudo, ainda muito há por aprender e por isso mesmo decidimos trazer-lhe este artigo com o intuito de aprofundar o temaou quem sabe dar início ao seu conhecimento sobre HTML5.

A maioria dos navegadores modernos da atualidade já tem suporte para HTML5, o que vem potenciar o crescimento e a conversão da web para esta “nova” linguagem. Nasceu com a cooperação entre a World Wide Web Consorcium (W3C) e aWeb Hypertext Application Technology Working Group (WHATWG). Desde logo foram definidas algumas regras para o HTML5, de entre as quais destacamos a redução da necessidade de plugins externos, melhoria no manuseio de erros e o facto de as novas funcionalidades serem baseadas em HTML, CSS, DOM e JavaScript. Decidimos destacar algumas destas novas funcionalidades, que passam pela criação de elementos de áudio e vídeo para reprodução de mídia, novos controlos de formulários e a criação de um elemento “canvas” para criação de imagens.

1. NOVOS ELEMENTOS

Como poderá imaginar, a internet mudou bastante deste a implementação do HTML 4,01 em 1999. Nos dias de hoje, alguns dos elementos são obsoletos, nunca usados ou usados mas em desuso. Todos estes elementos foram eliminados ou reescritos para estarem em conformidade com as exigências desta nova era. Foi também por isso que foram criados novos elementos para melhorar a estrutura, conteúdos de mídia e formulários.

Irei destacar os novos elementos, divididos nas suas categorias:

Novos elementos de marcação

<article> – Para conteúdo externo, como texto de um uma notícia, blog, forum ou outra fonte de conteúdo externo.

<aside> - Para conteúdo à parte daquele onde está inserido <command> – Um botão, checkbox. <details> – Para fazer uma descrição acerca de um documento ou partes dele. <summary> – Uma legenda, ou resumo dentro do elemento de detalhes <figure> – Para agrupar uma secção de conteúdo não relacionado, como um

vídeo. <figcaption> – A legenda da secção <figure>.

http://www.escolacriatividade.com/aprender-html5/

<footer> – Para o rodapé de um documento ou secção, pode incluir o nome do autor, a data, informações de contacto ou informações de direitos de autor.

<header> – Para o cabeçalho de um documento ou secção, onde pode ser incluída a navegação.

<hgoup> – Para uma secção de títulos usando desde <h1> até <h6>. <mark> – Para diferenciar texto. <meter> - Elemento de medida, usado apenas se o valor máximo e mínimo

forem conhecidos. <nav> – Para a secção de navegação. <progress> – Informa o estado do trabalho em execução. <ruby> – Para anotação ruby. <rt> - Para explicação da anotação ruby. <rp> – Elemento usado para mostrar conteúdo quando o navegador não suportar

o elemento ruby. <section> – Para uma secção no documento, como capítulos, cabeçalhos,

rodapés ou outras secções. <time> - Para definir tempo ou data, ou ambos. <wbr> – Quebra de palavra, para definir uma quebra de linha.

Novos elementos de mídia

<audio> – Para conteúdo multimédia, sons, música ou outros streams de áudio. <video> - Para conteúdo vídeo, como um clipe de vídeo ou outros streams de

vídeo. <source> – Para recursos media para os elementos de media, definido dentro

dos elementos de áudio ou vídeo. <embed> – Para conteúdo embutido, como um plug.

O elemento tela

<canvas> – Para a criação de gráficos através de script.

Novos elementos de formulários

<datalist> – Uma lista de opções para valores de introdução <keygen> – Gera passwords para autenticação de utilizadores. <output> – Para diferentes tipos de output, como o que é criado através de um

script.

Novos valores de atributos

tel - O valor de introdução é um número de telefone. search – O campo de introdução é um campo de pesquisa. url - O valor de introdução é um URL. email - O valor de introdução é um ou mais endereços de e-mail. datetime – O valor de introdução é uma data ou hora. date - O valor de introdução é uma data. month – o valor de introdução é um mês. week – o valor de introdução é uma semana.

time – o valor de introdução é um tipo de tempo. datetime-local – o valor de introdução é uma data ou tempo local. number – o valor de introdução é um número. range – o valor de introdução é um número dentro de um dado intervalo. color – O valor de introdução é uma cor em formato hexadecimal, como

#009900

2. VÍDEO HTML

Até agora, nunca foi estabelecido um formato universal para mostrar vídeos numa página web. Hoje, os vídeos são mostrados através de um plugin, sendo que o mais usado é o Flash. No entanto, nem todos os navegadores têm os mesmos plugins, sendo necessário instalar aplicações complementares para fazer o trabalho. Com HTML5, será possível introduzir um formato universal de introdução de vídeo através do elemento <video>.

Formatos de Vídeo

Os formatos de vídeo actualmente suportados são Ogg e MPEG-4. No entanto, devido ás constantes actualizações dos navegadores, não há uma lista de compatibilidades actual e concisa entre os browsers e os formatos de vídeos.

Como funciona?

Para introduzir vídeo em HTML5, tudo o que é necessário é:

12<video src="movie.ogg" controls="controls"></video>

O atributo controls é para introduzir o reproduzir, pausar, e controlo de volume.

Também será boa ideia incluir os atributos de largura e altura. Para navegadores que não suportam o elemento vídeo, insira um comentário dentro das tags <video>

123

<video src="movie.ogg" width="320" height="240" controls="controls">O seu navegador não suporta o elemento video de HTML5.</video>

No exemplo anterior, usamos um ficheiro Ogg, que é suportado pelo Firefox, Opera e Chrome. Para que possa ver o vídeo no Safari, terá de estar em MPEG-4. Felizmente, é possível introduzir mais de uma fonte do vídeo, pelo que podemos introduzir o vídeo em OGG e MPEG-4, para poder ser reproduzido nos navegadores citados. O Internet Explorer 8 não suporta qualquer um deles, mas está previsto que a sua versão 9 venha colmatar esta lacuna. Vejamos um exemplo:

1234

<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" />O seu navegador não suporta o elemento vídeo de HTML5.

5</video>

Atributos vídeo

Atributo - Valor do atributo – Descrição

autoplay – autoplay – Define se o vídeo irá ser exibido assim que estiver pronto

controls – controlos – Define os controlos que irão ser exibidos.

height – pixeis – Define a altura do vídeo.

loop – loop – Define se o vídeo irá ser repetido quando acabar.

preload – preload – Define se o vídeo irá ser carregado ao mesmo tempo que a página irá ser carregada, e pronto para ser reproduzido. É ignorado se o atributo autoplay estiver activo.

src – url – Define a fonte do vídeo, em um url.

width – Define a largura do vídeo.

3. AUDIO HTML

Tal como no caso do vídeo HTML, não houve até agora um formato universal para reprodução de audio. A reprodução era feita através de plugins como Flash. Agora com HTML5 e a introdução do elemento <audio>, é possível fazer a reprodução num formato universal.

Formatos de vídeo

De momento há 3 formatos suportados, Ogg Vorbis, MP3 e Wav, mas tal como no vídeo, não há uma tabela actual e concisa da relação entre o suporte dos navegadores e os formatos. Aquilo que é garantido é que o Internet Explorer 8 não suporta este elemento.

Como funciona?

Para introduzir o audio com HTML5, basta introduzir o elemento audio:

12<audio src="song.ogg" controls="controls"></audio>

O atributo controls é para introduzir os controlos de reproduzir, pausar e controlo de volume.

Deve também ser introduzido um comentário, dentro do elemento audio, para os navegadores que não suportarem este elemento.

123

<audio src="song.ogg" controls="controls">O seu navegador não suporta a reprodução de audio HTML5.</audio>

Mais uma vez, podem ser introduzidas várias fontes do conteúdo, para suporte de vários navegadores:

123456

<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> <source src="song.wav" type="audio/wav" />O seu navegador não suporta reprodução de audio HTML5.</audio>

Atributos áudio

Atributos – Valores de Atributos – Descrição

autoplay – autoplay – Define se o áudio irá ser reproduzido assim que estiver pronto.

controls – controls – Define quais os controlos que irão estar disponíveis. loop – loop – Define se o áudio irá ser reproduzido repetidamente. preload – preload – Define se o áudio irá ser carregado ao mesmo tempo do que

a página, e pronto a reproduzir. src – url – Define o url do áudio a reproduzir.

4. TELA HTML5 (CANVAS)

O elemento canvas permite introduzir gráficos no documento através de Javascript. É uma área rectangular em que se tem o controlo de todo e qualquer pixel, através de métodos para criar caixas, círculos, caracteres e ainda adicionar imagens.

Criando o elemento canvas

Para criar o elemento canvas, basta introduzir o seguinte código HTML

1<canvas id="meuCanvas" width="250" height="150"></canvas>

Dá-se um nome , introduzindo o id que neste caso é “meuCanvas”, define-se a largura e a altura e o elemento está criado.

Desenhando com Javascript

O elemento canvas não tem por si só capacidade de fazer a criação de imagens, sendo por isso necessário fazê-lo através de Javascript, e dentro da sua tag <script>. Vejamos um exemplo da criação de um rectângulo.

12<script type="text/javascript">var c=document.getElementById("meuCanvas");var cxt=c.getContext("2d");

3456

cxt.fillStyle="#00FF00";cxt.fillRect(0,0,150,75);</script>

O Javascript procura o elemento através da função .getElementById, depois cria um objecto em contexto através da função .getContext(“2d”), que neste caso é um objecto que faz parte do HTML5, que permite a introdução de caixas, círculos, caracteres, imagens, entre outros.

As 2 linhas fillStyle e fillRect criam um rectângulo, em que fillRect desenha-o com a sua posição tamanho e forma e fillStyle torna-o verde através de código hexadecimal.

Passo a explicar os valores de fillRect(1,2,3,4):

1. Coordenadas X, em que X é o topo da página. 2. Coordenadas Y, em que Y é o lado esquerdo da página. 3. Largura do rectângulo 4. Altura do rectângulo

Quer isto dizer que o nosso rectângulo irá ser desenhado no canto superior esquerdo da página.

Exemplo de colocação de imagem:

123456789

<script type="text/javascript"> var c=document.getElementById("meuCanvas");var cxt=c.getContext("2d");var img=new Image()img.src="imagem_fantastica.png"cxt.drawImage(img,0,0); </script>

Muito mais há a descobrir sobre HTML5 e a capacidade de os navegadores suportarem as suas funções nas suas novas versões.

Introdução Ao HTML5

Documents

Transcript of Introdução Ao HTML5