E-book sobre HTML 5 (Devmedia)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

E-book sobre HTML 5 (Devmedia)

on

  • 3,205 views

Diversos artigos publicados no site da Devmedia sobre HTML 5.

Diversos artigos publicados no site da Devmedia sobre HTML 5.

Statistics

Views

Total Views
3,205
Views on SlideShare
3,204
Embed Views
1

Actions

Likes
2
Downloads
220
Comments
0

1 Embed 1

http://www.docseek.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

E-book sobre HTML 5 (Devmedia) Document Transcript

  • 1. E-Book de estudos sobre HTML 5 1
  • 2. Índice:As Novidades do HTML5 3O que é o HTML5 8HTML 5 - Tags Continuadas x Tags Descontinuadas 11HTML5 - A tag CANVAS 15HTML5 - As tags AUDIO e VIDEO 19Placeholder - HTML5 24HTML5: PlaceHolder - Como estilizar 26Tags da HTML5 – Infográfico 27Atributos de tratamento de eventos da HTML5 – Infográfico 282 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
  • 3. As Novidades do HTML5 Autor: Raimundo Botelho Neste artigo apresento as principais novidades da nova versão da linguagem de marcação de hipertexto HTML, que já estádisponível nos principais navegadores de internet com suporte quase que total. Link: http://www.devmedia.com.br/as-novidades-do-html5/239921. Introdução. O HiperText Markup Language ou simplesmente HTML, continua trazendo grandes contribuições para o advento da internet,pois é o tipo de conteúdo que mais trafega pela rede mundial de computadores. Apesar da enorme importância para o mundoda informação o HTML estancou na versão 4.0.1 desde 1999 e não acompanhou as dinâmicas mudanças que ocorreram nosúltimos anos e para atender as necessidades careceu utilizar plugins externos como o flash player e outros. Mas felizmente,isso são coisas do passado, pois a W3C (World Wide Web Consortium) e a WHATWG (Web Hypertext Application TechnologyWorking Group) disponibilizaram uma versão de teste que provavelmente será a nova cara do HTML. Esse artigo mostra asnovas características dessa versão que, inclusive, já tem suporte para algumas funcionalidades nos mais conceituados navega-dores e brevemente será oficializado por definitivo como o HTML 5.2. O HTML5. Surgido a partir de um consórcio entre a W3C (World Wide Web Consortium) e a WHATWG (Web Hypertext ApplicationTechnology Working Group), o HTML5 será o novo padrão para a estruturação e apresentação de conteúdo na Word Wide Webtrazendo melhorias significativas com novas funcionalidades de semântica e acessibilidade, além de melhorar o suporte aosmais recentes conteúdo multimídias. As principais mudanças que a nova versão proporcionará aos usuários são: Melhor tratamento de exceção, mais tags parasubstituir scripts, independência de plataforma e redução da necessidade de plugins externos.3. As novas características do HTML5. As novas característica da versão 5 estão ligadas diretamente as necessidades de suporte independente aos novos formatosde conteúdos multimídia, as novas funcionalidades de semânticas e acessibilidade. São elas: a) Inclusão do elemento canvas para desenho. O elemento canvas foi incluído para permitir desenhar gráficos em uma página web, tarefa essa que atualmente só é possívelcom a utilização de plugins externos. www.devmedia.com.br - Reprodução proibida E-Book de estudos sobre HTML 5 3
  • 4. O canvas é uma área retangular onde o usuário, via JavaScript, vai poder controlar todos os pixels, além de desenhar várioselementos gráficos como círculo, retângulo, elipse, linha, texto, imagens, etc. Para usar um elemento canvas no documento,além da inclusão da tag, temos que manipular o elemento via JavaScript: Inclusão da tag: 1 <canvas id=”myCanvas” width=”400” height=”400”></canvas> Manipulação do elemento com JavaScript: 1 <script type=”text/javascript”> 2 var myCanvas = document.getElementById(“myCanvas”); 3 var canvas =  myCanvas.getContext(“2d”); 4 canvas.fill#FF0000”; 5 canvas.fillRect(0,0,100,100); 6 </script> b) Inclusão dos elementos vídeo e áudio para reprodução multimídia. Outro motivo para integrar plugins externos é o uso de áudio e vídeo nas páginas web. Com a inclusão de tags específicas paraeste fim, a HTML5 dá suporte nativo para a reprodução de áudio e vídeo sem a necessidade de utilizar mecanismos externos.Para usar o elemento áudio ou vídeo, basta incluir a tag específica no documento. Elemento vídeo: 1 <video width=”100” height=”100” controls=”controls”> 2  <source src=”video.mp4” type=”video/mp4” /> 3  <source src=”video.ogg” type=”video/ogg” /> 4  O seu navegador não suporta o formato. 5 </video> Elemento áudio: 1 <audio controls=”controls”> 2  <source src=”audio. mp3” type=” audio/mpeg “ /> 3  <source src=”audio.ogg” type=” audio/ogg “ /> 4 O seu navegador não suporta o formato. 5 </audio>4 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
  • 5. c) Melhor suporte para armazenamento local. O HTML5 oferece 2 novos objetos para armazenar dados localmente: sessionStorage: Armazena dados durante uma sessão ativa. 1 <script type=”text/javascript”> 2 sessionStorage. sobreNome =”Botelho”; 3 document.write(sessionStorage. sobreNome); 4 </script> localStorage: Armazena dados sem limite de tempo. 1 <script type=”text/javascript”> 2 localStorage.sobreNome=”Botelho”; 3 document.write(localStorage. sobreNome); 4 </script> d) Inclusão de novos elementos de conteúdo específico. Muitos elementos da versão 4.0.1 foram excluídos da nova versão, uns por nunca terem sido usados, outros por estarem ob-soletos e outros por serem usados indevidamente. A nova versão trás novos elementos para proporcionar aos usuários umamelhor estrutura, desenho e conteúdo multimídia. A seguir uma relação dos novos elementos com sua descrição: Tag Descrição <article> Especifica um artigo qualquer <aside> Relaciona um conteúdo ao redor. <bdi> Para texto que não esteja diretamente vinculado ao elemento pai. <command> Um botão, radioButton ou checkBox. <details> <summary> Uma legenda ou resumo dentro do elemento detalhe. <figure> Para agrupamento de uma sessão de conteúdo stand-alone. <figcaption> Legenda para um elemento figura. <footer> Para um rodapé de um documento ou sessão. <header> Para uma introdução de um documento ou sessão. <hgroup> Para uma sessão de cabeçalhos usando h1 para h6. <mark> Para textos que são destaques. <meter> Para uma medição. Deve-se conhecer o valor máximo e mínimo. <nav> Para uma sessão de navegação. <progress> Para mostrar o progresso de uma execução. <ruby> Para anotação rubi. <rt> Para explicar uma anotação rubi. <rp> Mostra os navegadores que não suportam anotação rubi. <section> Para uma sessão de um documento como capítulos, cabeçalhos, rodapés, etc. <time> Para definir um tempo e/ou data. <wbr> Quebra de linha. www.devmedia.com.br - Reprodução proibida E-Book de estudos sobre HTML 5 5
  • 6. e) Inclusão de novos controles para formulário. Uma carência da versão 4.0.1 e a escassa quantidade de controles para formulário fazendo com que os desenvolvedores recor-ram as famosas bibliotecas JavaScript, muitas vezes incompatíveis com determinados navegadores. Na versão 5 novos controles de formulário foram incluídos para facilitar a vida dos desenvolvedores. São eles: Tag Descrição <datalist> Uma lista de opções de entrada. <keygen> Gera chaves para autenticação de usuários. <output> Para diferentes tipos de saídas, como a geradas por scripts. Um dos remanescentes da versão 4.0.1, o elemento input, ganhou novos valores para o atributo type, fazendo com que o de-senvolvedor ganhe maior controle sobre a entrada de dados pelo usuário. São os eles: Type Descrição tel A entrada é um número de telefone. search A entrada é um campo de busca. url A entrada é uma URL. email A entrada é um ou mais endereço de email. datetime A entrada é uma data e/ou hora. date A entrada é uma data month A entrada é um mês. week A entrada é um dia da semana. time A entrada é uma hora. datetime-local A entrada é uma data e hora local. number A entrada é um número. range A entrada é uma faixa de valores. color A entrada é uma cor em haxadecimal como #FF00FF. placeholder Especifica uma dica rápida que descreve o valor esperado em um campo de entrada. f) Total suporte ao CSS3. Para dar ainda mais liberdade à criatividade dos usuários o HTML5 dá total suporte a mais nova versão das famosasCascading Style Sheets, ou simplesmente CSS. Com essa integração as páginas webs podem receber os mais variados tipos deestilos como sombra nos textos e quadros, efeitos de transição, quadro com cantos arredondados e vários recursos novos queo CSS3 oferece.6 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
  • 7. 4. Suporte. Apesar da versão 5 não ter sido oficializada, vários navegadores continuam adicionando os novos recursos do HTML5 nassuas recentes versões. Dentre os navegadores podemos citar: Safari, Chrome, Firefox, Opera e Internet Explorer.5. Conclusão. Com a chegada da nova versão da linguagem de marcação HTML só temos a ganhar, pois além de contarmos com novos re-cursos que permitem uma maior estruturação dos documentos, mais funcionalidades, independência de plataforma, tratamentode exceção e suporte nativo aos recentes conteúdos multimídias, ainda podemos ficar livres dos incômodos estresses que temosao utilizar bibliotecas e plugins externos que nem sempre funcionam como deveriam nos navegadores distintos.6. Referência. 1. W3Schools - Tutorial de HTML5. Disponível em: http://www.w3schools.com/html5. Acessado em: 30/11/2011. 2. W3C - HTML5. Disponível em: http://www.w3.org/TR/html5. Acessado em: 30/11/2011. 3. Wikipédia - HTML5. Disponível em: http://pt.wikipedia.org/wiki/HTML5. Acessado em: 30/11/2011. www.devmedia.com.br - Reprodução proibida E-Book de estudos sobre HTML 5 7
  • 8. O que é o HTML5 Autor: Eduardo Feitosa Veja neste artigo um pouco da história do HTML, o que é o HTML5 e suas principais mudanças em relação às versões anteriores. Link: http://www.devmedia.com.br/o-que-e-o-html5/25820 Olá gente, tudo bem? Creio que a maioria de vocês já tenha ouvido sobre HTML e já saiba muito bem do que nós estamosfalando. Mas, para dar uma relembrada, e até mesmo situar aqueles que estão iniciando seus estudos, vamos a algumas expli-cações rápidas.Um pouco de história Com o surgimento da web, era necessário criar uma linguagem que fosse entendida por meios de acesso diferentes. Paratanto, Tim Berners-Lee desenvolveu o HTML, com a proposta de suprir essa necessidade. Somente na década de 1990, quandoo Mosaic – browser desenvolvido por Marc Andreessen – se popularizou, o HTML ganhou força e foi adotado por outros de-senvolvedores e fabricante de browsers, compartilhando as mesmas convenções. HTML é uma abreviação de Hypertext Markup Language, ou seja, Linguagem de Marcação de Hipertexto. Resumindo, o HTMLé uma linguagem usada para a publicação de conteúdo (texto, imagens, vídeos, áudio etc.) na web. Para que você possa entender bem, o HTML é baseado no conceito de hipertexto, que são conjuntos de elementos ligadospor conexões, que podem ser palavras, imagens, vídeos, áudio, documentos etc. que quando conectados, formam uma granderede de informação. A conexão feita em um hipertexto é algo imprevisto que permite a comunicação de dados, organizandoconhecimentos e guardando informações relacionadas. Entre 1993 e 1995, surgiram novas versões (HTML+, HTML 2.0, HTML 3.0) onde foram propostas diversas mudanças paraenriquecer as possibilidades da linguagem, mas, ela ainda não era tratada como padrão. Apenas em 1997, o grupo de trabalhodo W3C, trabalhou na versão 3.2, fazendo com que ela fosse tratada como prática comum. Resumindo, e creio que você já tenha percebido, o HTML foi criado, e melhorado, para se tornar uma linguagem independentede plataformas ou meios de acesso, diminuindo custos e fazendo com que a web não ficasse limitada a uma base proprietáriascom formatos incompatíveis. Em 2004, foi fundado o WHATWG (Web Hypertext Application Technology Working Group) por desenvolvedores de em-presas como Mozilla, Apple e Opera, onde se iniciou o trabalho de escrever a nova versão do HTML, que seria chamado hojede HTML5.8 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
  • 9. Afinal, o que é HTML5 e quais suas principais mudanças? O HTML5 é a nova versão do HTML4 e um dos seus principais objetivos é facilitar a manipulação dos elementos, possibili-tando o desenvolvedor modificar as características dos objetos de forma não intrusiva, fazendo com que isso fique transparentepara o usuário final. Para se ter uma ideia disso, diferente das versões anteriores, o HTML5 fornece ferramentas para o CSS e o Javascript fazeremseu trabalho da melhor possível de forma que um web site ou aplicação continue leve e funcional. Algumas tags foram modificadas, outras criadas e algumas descontinuadas. As versões anteriores do HTML não eram pa-dronizadas para criação de seções comuns e específicas como rodapé, cabeçalho, slidebar, menus etc. Houve também modificações na forma em que escrevemos o código e organizamos a página. Ela passou a ser mais semânticacom menos códigos, aumentando a interatividade sem a necessidade de instalação de plug-ins, que em alguns casos, causa perdade performance. É um código interpolável, ou seja, pronto para futuros dispositivos, facilitando a reutilização da informaçãode diversas maneiras. Mas, caso você esteja pensando “vou ter de refazer todo o meu web site”, a WHATWG tem mantido o foco na retro compati-bilidade, ou seja, você não irá precisar refazer todo o trabalho para se adequar aos novos conceitos e regras.Estrutura básica A estrutura básica do HTML5 foi mantida, sofrendo uma pequena alteração no DOCTYPE. Abaixo podemos ver no exemplo: Listagem 1: Estrutura básica 1 <!DOCTYPE HTML> 2 <html lang=”pt-br”> 3 <head> 4    <meta charset=”UTF-8”> 5    <title></title> 6 </head> 7 <body> 8 </body> 9 </html>O DOCTYPE Listagem 2: O DOCTYPE 1 <!DOCTYPE HTML> Embora o DOCTYPE não seja uma tag HTML, ela deve ser a primeira linha antes do código, pois se tratar de uma instruçãoque indica ao navegador ou outro meio qual a versão de marcação o código foi escrito. www.devmedia.com.br - Reprodução proibida E-Book de estudos sobre HTML 5 9
  • 10. Em versões anteriores, era necessário referenciar o DTD (Document Type Definition) diretamente no código DOCTYPE. Com oHTML5, essa referência fica por responsabilidade do próprio navegador.Elemento HTML Listagem 3: Elemento HTML 1 <html lang=”pt-br”> Agora começamos a marcação propriamente dita. Para exemplificar, pense no código HTML como uma árvore, onde existemelementos pais ou filhos, e sempre, o elemento vai estar no topo dessa árvore, sendo assim, o elemento mais importante. Creio que foi notada a presença de um atributo no elemento . O “lang” é necessário para que os user-agents saibam qual é alinguagem principal do documento.É necessário lembrar que, o atributo “lang”, não está restrito somente ao elemento , podendoser utilizado em qualquer outro elemento indicando a linguagem do texto representado.HEAD Este é o local onde fica a “parte inteligente” do web site. No HEAD, ficam os metadados, ou seja, informações sobre a páginae sobre o conteúdo publicado.Metatag Charset Listagem 4: Metatag Charset 1 <meta charset=”UTF-8”> Este item chaveia a tabela de caracteres que vai ser utilizada pelo seu sistema. Cabe aqui uma explicação importante, bastante útil aos desenvolvedores e futuros desenvolvedores. A internet, por tradição,foi desenvolvida sob princípios de que não haveria limites para acesso, sendo assim, não importa se alguém estiver aqui noBrasil ou lá na China, ela pode acessar qualquer conteúdo disponível na web. Partindo desse princípio, foi criada uma tabela que suprisse essas necessidades, que recebeu o nome de Unicode. Essa tabelacomporta algo em torno de um milhão de caracteres e a maioria dos browsers a suporta plenamente. Ao invés de cada regiãoter a sua tabela de caracteres, é muito mais sensato ter uma tabela com o maior número de caracteres possível, e fazendo usodela no seu sistema, você garantirá que ele será bem visualizado no Brasil, China ou em qualquer outro lugar do mundo. O que o Unicode faz é fornecer um único número para cada caractere, não importa a plataforma, nem o programa, nem a língua. Aqui está só o início, um pouco para nós possamos entender o HTML5, e claro, começar a fazer uso dessa linguagem de mar-cação. Em outras oportunidades, daremos continuidade, falando mais das novidades e já desenvolvendo na prática. Com isso, finalizo este artigo e até o próximo. Um abraço!10 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
  • 11. HTML 5 - Tags Continuadas x Tags Descontinuadas Autor: Rafael Ribeiro O HTML5 assim como qualquer outra linguagem ao ser atualizada, além de receber novo comandos, aposenta outros. Dessaforma, você pode acompanhar no artigo abaixo, as tags que permanecem em uso no HTML5 e as tags que foram descontinuadase só servem para as versões anteriores. Link: http://www.devmedia.com.br/html-5-tags-continuadas-x-tags-descontinuadas/23618 O HTML5 assim como qualquer outra linguagem ao ser atualizada, além de receber novo comandos, aposenta outros. Dessaforma, você pode acompanhar no artigo abaixo, as tags que permanecem em uso no HTML5 e as tags que foram descontinuadase só servem para as versões anteriores.Tags Continuadas:<!--...--> Define um comentário;<!DOCTYPE>  Define o tipo de documento; (No HTML 4 existiam três (3) diferentes tipos de doctype, mas no HTML 5 temos apenas um (1) tipo <!DOCTYPE HTML>. É aqui que o navegador entende o tipo de documento e como ele deve interpretar as tags nele contidas.)<a> Define um hyperlink;<abbr> Define uma abreviação<address> Define um endereço. (Passa a ser tratado como uma seção);<area> Define uma área dentro de um mapa de imagem;<b> Define um texto em negrito; (Possui o mesmo nível semântico que um SPAN, e também o estilo de negrito no texto. Contudo, ele não dá nenhuma importância para o texto marcado com ele.) <base> Define uma base URL para todos os links da página;<bdo> Define a direção do texto apresentado;<blockquote> Define uma citação longa;<body> Define o corpo da página;<br> Insere uma quebra de linha simples;<button> Define um botão de comando;<caption> Define o “caption” de uma tabela; www.devmedia.com.br - Reprodução proibida E-Book de estudos sobre HTML 5 11
  • 12. <cite> Define uma citação;<code> Define o código texto do computador;<col> Define os atributos da coluna da tabela;<colgroup> Define um grupo de colunas da tabela;<dd> Define uma descrição de definição;<del> Define um texto deletado;<dfn> Define um termo de definição;<div> Define uma seção no documento;<dl> Define uma lista de definição;<dt> Define um termo de definição;<em> Define um texto em ênfase;<fieldset> Define um conjunto de campos (fieldset);<form> Define um formulário;<h1> até <h6> Define do cabeçalho 1 até o cabeçalho 6;<head> Define uma informação sobre o documento. (Não aceita mais elementos Child como filho);<hr> Define uma regra horizontal. (Tem o mesmo nível que um parágrafo, mas também é utilizado para fazer separações e quebras de linha);<html> Define um documento html;<i> Define um texto em itálico; (Possui o mesmo nível semântico que um SPAN. O texto continua sendo itálico e para usuários de leitores de tela, a voz utilizada é modificadapara indicar ênfase. É de grande valor e utilidade para marcar, termos técnicos, termos em outras linguagens etc.)<iframe> Define uma linhas sobre a janela (frame);<img> Define uma imagem;<input> Define um campo de inserção;<ins> Define um texto inserido;<kbd> Define um texto do teclado;<label> Define uma “label” para o formulário;<legend> Define um título para os campos (fields);<li> Define os itens da lista;<link> Define uma referência;<map> Define uma imagem de mapa;<menu> Define uma lista de “menus”;<meta> Define informações meta;<noscript> Define uma seção noscript;<object> Define um objeto incorporado;<ol> Define uma lista ordenada;<optgroup> Define um grupo de opção;12 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
  • 13. <option> Define uma opção em uma lista suspensa (drop-down list);<p> Define um parágrafo;<param> Define um parâmetro para determinado objeto;<pre> Define um texto pré-formatado;<q> Define uma citação curta;<s> Define um texto que não é mais correto.<samp> Define um código de amostra;<script> Define um script;<select> Define uma lista selecionável;<small> Define um pequeno texto;<span> Define uma seção no documento;<strong> Define um texto forte (similar ao negrito);<style> Define um estilo;<sub> Define um texto subscrito;<sup> Define um texto sobrescrito;<table> Define uma tabela;<tbody> Define o corpo da tabela;<td> Define uma célula da tabela;<textarea> Define um área de texto;<tfoot> Define o rodapé da tabela;<th> Define o cabeçalho da tabela;<thead> Define o cabeçalho da tabela;<title> Define o título do documento;<tr> Define uma linha da tabela;<ul> Define uma lista desordenada;<var> Define uma variável;Tags Descontinuadas:<acronym> Define siglas em HTML 4.01. (Desenvolvedores preferem utilizar a tag <abbr>);<applet> Define um miniaplicativo incorporado. (Ficou obsoleto em função da tag <object>);<basefont> Define as propriedads da font padrão para todo o texto do documento. (Apenas efeito visual);<big> Usado para tornar o texto maior. (Apenas efeito visual);<center> Usado para alinhar texto e conteúdo no centro. (Apenas efeito visual);<dir> Define a lista do diretório. (Ficou obsoleto em função da Tag <ul>);<font> Especifica o tipo de fonte, tamanho, e cor do texto. (Apenas efeito visual); www.devmedia.com.br - Reprodução proibida E-Book de estudos sobre HTML 5 13
  • 14. <frame> Define uma janela particular dentro de um conjunto de “frames”. (Fere princípios de usabilidade e acessibilidade);<frameset> Define um conjunto de frames organizado por múltiplas janelas.(Fere princípios de usabilidade e acessibilidade);<noframes> Texto exibido para navegadores que não lidam com “frames”. (Fere princípios de usabilidade e acessibilidade);<strike> Exibe texto rasurado. (Apenas efeito visual);<tt> Define teletipo de texto. (Apenas efeito visual);<u> Define sublinhado. (Apenas efeito visual);<xmp> Define texto pré-formatado. (Ficou obsoleto em função da tag <pre>); Se analisarmos bem as definições podemos perceber que muitas tags descontinuadas tiveram esse fim por já existirem tagsque realizam a mesma função. E ao utilizar o HTML 5 você perceberá que algumas tags continuadas foram modificadas epassaram a exercer outras propriedades, fazendo, também, que outras tags percam valor. Nota 1: Você pode ouvir em algum lugar sobre HTML - ArqHP (Arquitetura de Home Pages). É o próprio HTML 5 comoutra denominação e isso é apenas uma jogada de marketing. Nota 2: Os HTML 1, HTML 2 , HTML 3 e o HTML 4 estão todos contidos no HTML 5 e mesmo as tags descontinuadasnão trazem nenhum problema de compatibilidade com o HTML 5 e o contrário também ocorre, onde as novas tags tambémnão trazem nenhum problema de compatibilidade com as versões antigas. Usem e abusem das tags!Um grande abraço! Rafael Marins Ribeiro - Engenheiro de Softwares14 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
  • 15. HTML5 - A tag CANVAS Autor: Allan Douglas Veja nesse artigo uma rápida introdução sobre a nova versão da linguagem de marcação de texto, HTML. E como principal focodeste artigo, está a nova tag CANVAS, como criá-la e desenhar nela, formar linhas e imagens. Antes de falarmos do HTML5,precisamos lembrar-nos do HTML4 que, quando foi lançado, a comunidade de desenvolvedores foi alertada de boas práticasque deveria seguir. Formatação, separação de código, acessibilidade eram algumas dessas boas práticas. Link: http://www.devmedia.com.br/html5-a-tag-canvas/25413 Atenção! Neste artigo julgo que os leitores já têm conhecimento sobre HTML, tendo em vista que não será abordada a iniciaçãoao mesmo.O que é HTML5? Antes de falarmos do HTML5, precisamos lembrar-nos do HTML4 que, quando foi lançado, a comunidade de desenvolve-dores foi alertada de boas práticas que deveria seguir. Formatação, separação de código, acessibilidade eram algumas dessasboas práticas. Porém essa versão ainda não trazia um grande diferencial e também não facilitava o uso de Javascript e CSS. O HTML5, logicamente, é a evolução direta do HTML4, a qual corrige bugs de sua versão anterior e principalmente trazmuitas melhorias à linguagem, pois tem como um de seus objetivos facilitar a manipulação do elemento possibilitando aodesenvolvedor modificar as características do objeto de forma não intrusiva. Entre outras características, a 5ª versão do HTML vem com novas tags, como por exemplo: <video>, <audio> e <canvas>. Visto isto, podemos dar início ao principal foco deste artigo, que é entender e exemplificar a tag .A tag canvas A canvas nada mais é do que um espaço onde podemos desenhar elementos específicos, formas geométricas e imagens, porexemplo, através de script (javascript geralmente). Também podemos usar CSS para a tag . Por Javascript podemos acessar métodos da canvas que desenham formas, linhas, caracteres e adicionar imagens. Lembre-se que em uma canvas podemos apenas desenhar elementos gráficos e não elementos HTML, por exemplo, uma pode conter uma mas o contrário não é verdade. Vale resaltar que versões antigas de navegadores podem ser incompatíveis, as versões do Internet Explorer anterior ao 9, porexemplo. www.devmedia.com.br - Reprodução proibida E-Book de estudos sobre HTML 5 15
  • 16. Criar uma canvas não difere do que já conhecemos de outras tags HTML. Vejamos: Listagem 1: Criando uma canvas 1 <!DOCTYPE html> 2 <html> 3 <body> 4 <canvas id=”idCanvas” width=”200” height=”100” style=”border:1px solid #c3c3c3;”> 5 Se seu navegador não suportar HTML5 você verá esta mensagem. 6 </canvas> 7 </body> 8 </html> Na Listagem 1 criamos uma canvas com largura 200px e altura 100px e usamos CSS para decoramos a borda da mesma. Note que coloquei um texto dentro da canvas que será exibido caso você não esteja usando um navegador que tenha suporteao HTML5, lembre-se que não podemos colocar elementos HTML dentro de canvas. Veremos no próximo tópico como desenhar dentro da canvas por Javascript.Desenhando formas e imagens na canvas Muito bem, vamos começar a desenhar agora. Nos próximos exemplos veremos como desenhar círculos, retângulos, linhase por fim veremos como adicionar imagens. Antes de começarmos os desenhos, devemos saber que uma canvas é composta por pixels como em um plano cartesiano quecomeçam em x = 0 e y =0 no canto superior esquerdo onde x é crescente para a direita e y é crescente para baixo. Figura 1: Modelo de uma canvas16 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
  • 17. Outra coisa que devemos saber é que sempre antes de desenhar, devemos selecionar a canvas e capturar o contexto gráficoda mesma, pelo metodo getContext(), da seguinte forma: Listagem 2:  Selecionando a canvas e capturando o contexto gráfico 1 <script type=”text/javascript”> 2 var c=document.getElementById(“idCanvas”); 3 var ctx=c.getContext(“2d”); 4 </script> Para desenhar qualquer coisa na canvas, sempre devemos ter o contexto dela acessível, por isso armazenamos ele em umavariável. Desenhando Linha Para desenharmos uma linha, precisamos usar no mínimo três métodos, são eles: moveTo(x,y), lineTo(x,y) e stroke(). Oprimeiro define o ponto inicial da linha, já o segundo é o próximo ponto, o último, por sua vez, desenha a linha. Vejamosum exemplo na Listagem 3. Listagem 3:  Criando um linha 1 <script type=”text/javascript”> 2 var c=document.getElementById(“idCanvas”); 3 var ctx=c.getContext(“2d”); 4 ctx.moveTo(10,10);//ponto inicial 5 ctx.lineTo(150,50);//próximo ponto 6 ctx.stroke();//desenha 7 </script> Desenhando um circulo Aqui vamos precisar basicamente de dois métodos: arc(x,uy,r,aInicial,aFinal) que recebe as coordenadas onde será colocado ocentro do circulo, o raio e os ângulos em relação aos quadrantes do círculo, e o já conhecido stroke(). Vejamos na prática: Listagem 4: Desenhando o circulo 1 <script type=”text/javascript”> 2 var c=document.getElementById(“idCanvas”); 3 var ctx=c.getContext(“2d”); 4 ctx.arc(70,18,15,0,Math.PI * 2); 5 ctx.stroke(); 6 </script> www.devmedia.com.br - Reprodução proibida E-Book de estudos sobre HTML 5 17
  • 18. Note que estamos usando Math.PI * 2 onde deveríamos passar o ângulo final, isso nada mais é que uma forma de desenharum circulo completo. Você pode experimentar mudar esses valores e ver como fica. Desenhando um Retângulo No desenho do retângulo, apenas mais um método que não conhecemos é apresentado: rect (x,y,largura,altura). Em sguidausamos novamente o stroke(). Listagem 5: Desenhando um retângulo 1 <script type=”text/javascript”> 2 var c=document.getElementById(“idCanvas”); 3 var ctx=c.getContext(“2d”); 4 ctx.rect(20,20,150,50); 5 ctx.stroke(); 6 </script> Adicionando imagens Para imagens o processo é um pouco diferente do que vimos até agora, mas é tão simples quanto. Precisaremos instanciar um objeto do tipo Image e adicionar ao método onload dela uma função que chama o métododrawImage(Image,x,y) e, finalmente, dizer para o objeto do tipo Image qual a url da imagem. Vejam os passos na Listagem 6: Listagem 6: Desenhando uma image 1 <script type=”text/javascript”> 2 var c=document.getElementById(“idCanvas”); 3 var ctx=c.getContext(“2d”); 4 var img=new Image(); 5 img.onload = function(){ 6 ctx.drawImage(img,0,0); 7 }; 8 img.src=”img.png”; 9 </script> Bem, galera, fico por aqui. Espero que tenham gostado, e se quiserem saber mais sobre os métodos da canvas, visitem esselink http://www.w3schools.com/html5/html5_ref_canvas.asp. Obrigado, deixem seus comentários e até a próxima.18 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
  • 19. HTML5 - As tags AUDIO e VIDEO Autor: Allan Douglas Veja nesse artigo uma introdução as tags de mídia do HTML5 que vieram para acabar com a dependência de plugins para areprodução de áudio e vídeo nos navegadores, veja como criar um player de áudio e vídeo e também como manipulá-los viaJavascript. Link: http://www.devmedia.com.br/html5-as-tags-audio-e-video/26018 Com a chegada do HTML5 temos muitas novidades, umas conceituais outras mais visíveis, entre estas podemos destacara criação de três novas tags, <vídeo>,<áudio> e <canvas>. As duas primeiras serão abordadas aqui nesse artigo, enquantosobre a <canvas> já foi escrito um artigo que você pode conferir aqui nesse link: http://www.devmedia.com.br/html5-a-tag-canvas/25413. Para quem ainda não sabe, as tag’s <audio> e <vídeo> são tag’s de media que foram criadas, entre outros motivos, para acabarcom a dependência de plugin’s para a reprodução de áudio e vídeo nas páginas. Dessa forma em sites que precisaríamos terinstalado o Flash, por exemplo o Youtube, não iremos mais, basta que sejam implementadas essas novas tag’s e que tenhamosum navegador compatível com HTML5, o que não é incomum hoje em dia tendo em vista que todos os navegadores mais recentesão. O IE8 foge dessa lista apenas o IE9 suporta o HTML5. Como já sabemos, a simplicidade é uma das características do HTML5, para estas tag’s isso não é diferente, pois agora passa-remos a manipular áudio e vídeo praticamente como manipulamos a inserção de imagens. Sabendo disso vejamos a seguir algumas características e demonstrações de ambas, de maneira a abordar o básico porémfuncional. Vamos começar com a tag <audio>.A tag <áudio> Como o nome já sugere esta tag serve para reproduzirmos uma mídia de áudio, vejamos: Listagem 1: Demonstração básica do uso da tag <audio> 1 <!DOCTYPE HTML> 2 <head> 3 <meta content=”text/html; charset=utf-8” http-equiv=”Content-Type”> 4 <title>HTML5 Audio</title> 5 6 </head> www.devmedia.com.br - Reprodução proibida E-Book de estudos sobre HTML 5 19
  • 20. 7 <body> 8 <audio autoplay=”autoplay” controls=”controls”> 9 <source src=”sua_musica.mp3” type=”audio/mp3” /> seu navegador não suporta HTML5 10 </audio> 11 </body> 12 </html> Na Listagem 1 temos um exemplo básico do uso da tag <audio>, nela estamos setando autoplay e controls, que servem paratocar automaticamente e habilitar os controles do player, respequitivamente. Será reproduzida a mídia sua_musica.mp3 defininana tag <source> dentro da tag <audio> pela propriedade “src”. Veja a Imagem 1 como ficaria no navegador: Figura 1: Player criado pela tag <audio> Caso seu navegador não suporte o HTML5 você verá o seguinte: “seu navegador não suporta HTML5” Como é por natureza um componente HTML e não um plugin, podemos fazer alguma modificações no player via CSS, comopor exemplo, cor, tamanho, float e position. Pode ser feita também a customização por outros elementos HTML e por meio de Javascript podemos controlar propriedadescomo o PLAY, PAUSE, VOLUME e por CSS criamos nosso próprio player. Listagem 2: Controle da tag áudio por Javascript 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta content=”text/html; charset=utf-8” http-equiv=”Content-Type”> 5 <title>HTML5 Audio</title> 6 </head> 7  8 <body> 9 <audio autoplay=”autoplay” controls=”controls”> 10    <source src=”sua_musica.mp3” type=”audio/mp3” />     seu navegador não suporta HTML520 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
  • 21. 11 </audio> 12 </body> 13  14 </html> O código acima resultaria mais ou menos como na Figura 2: Figura 2: Controlando o áudio por Javascript Este é apenas um exemplo básico, mas com um pouco conhecimento em javascript e CSS pode-se fazer um player muito bom.Dessa forma podemos desabilitar o atributo “controls”, para que tenhamos o controle apenas pelo nosso proprío player. Os atributos da tag <audio>: Atributo Valor Descrição autoplay autoplay Define que o audio começará a ser tocado assim que ele estiver pronto. controls controls Os controles serão mostrados. loop loop Define que o audio começará a ser tocado novamente quando terminar. Define que o audio será carregado enquanto a página é lida. Esse atributo preload preload é ignorado caso o atributo autoplay estiver definido. src url URL do arquivo a ser tocado. Formatos de áudio suportados: Formato IE 8+ Firefox 3.5+ Opera 10.5+ Chrome 3.0+ Safari 3.0+ Ogg Vorbis Não Sim Sim Sim Não MP3 Não Não Não Sim Sim Wav Não Sim Sim Não Sim www.devmedia.com.br - Reprodução proibida E-Book de estudos sobre HTML 5 21
  • 22. Agora veremos a TAG <video>.TAG <video> Aqui seguimos o mesmo conceito da <audio>, inclusive sua sintaxe é muito parecida. Vejamos o exemplo da Listagem 3. Listagem 3: A tag <video> 1 <!DOCTYPE HTML> 2 <head> 3 <meta content=”text/html; charset=utf-8” http-equiv=”Content-Type”> 4 <title>HTML5 Vídeo</title> 5 </head> 6 <body> 7 <video width=”320” height=”240” controls=”controls”> 8    <source src=”filme.mp4” type=”video/mp4”> 9    <source src=”filme.ogg” type=”video/ogg”> 10    Seu navegador não suporta HTML5. 11 </video> 12 </body> 13 </html> Vejam que praticamente não há nada diferente do que já vimos, exceto as propriedades width e height que não tínhamos de-finido na tag <audio>. Mas para o video é uma boa prática e extremamente importante, pois se não especificarmos o tamanhoque a tag deve ocupar, o navegador pode se perder e causar um desastre no restante do layout. Os formatos de vídeos suportados atualmente são: Navegador MP4 WebM Ogg Internet Explorer 9 SIM NÃO NÃO Firefox 4.0 NÃO SIM SIM Google Chrome 6 SIM SIM SIM Apple Safari 5 SIM NÃO NÃO Opera 10.6 NÃO SIM SIM Da mesma forma como na tag <audio>, a tag <video> também pode ser manipulada por Javascript.22 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
  • 23. Na Listagem 4 pode ser observado o trecho de código Javascript escrito para controlar um vídeo. Listagem 4: Controlando o vídeo por Javascript 1 <script> 2 function playPause(){ 3 if (video.paused) 4  video.play(); 5 else 6  video.pause(); 7} 8  9 function grande(){ 10 /*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */ 11 video.width=560; 12 } 13  14 function pequeno(){ 15 /*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */ 16 video.width=320; 17 } 18  19 function normal(){ 20 /*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */ 21 video.width=420; 22 } 23 </script> Bem pessoal fico por aqui, espero que tenham gostado e principalmente ficado curiosos para saber mais desse assunto, dessa independência deplugins. Fiquem a vontade para deixar seus comentário e críticas e até a próxima. www.devmedia.com.br - Reprodução proibida E-Book de estudos sobre HTML 5 23
  • 24. Placeholder - HTML5 Autor: Erackson Queiroz De Brito Veja nesse artigo o funcionamento do atributo PLACEHOLDER implementado em algumas TAGs no HTML5, uma forma dedetecção de suporte do navegador e um exemplo de código caso o navegador não dê suporte. Link: http://www.devmedia.com.br/placeholder-html5/24503 Veja nesse artigo o funcionamento do atributo PLACEHOLDER implementado em algumas TAGs no HTML5, uma forma dedetecção de suporte do navegador e um exemplo de código caso o navegador não dê suporte. Quem nunca precisou colocar umvalor padrão dentro do input e teve que fazer uma gambiarra, digo, adaptação técnica do tipo: Listagem 1: Exemplo de gambiarra antes do HTML5 1 <input type=”text” name=”nome” value=”Seu Nome” 2 onfocus=”javascript:(this.value==’Seu Nome’?this.value = ‘’:null);” 3 onblur=”javascript:(this.value==’’?this.value = ‘Seu Nome’:null);” /> O Placeholder resolve esse problema inserindo, dentro do input, um texto que será apagado quando começar a digitar dentrodo campo, e mostrado de novo ao perder o focus do elemento e o conteúdo seja vazio. Listagem 2: Exemplo de uso do placeholder aplicado em input. 1 <input type=”text” name=”nome” value=”” placeholder=”Seu Nome” /> No exemplo acima o texto “Seu Nome” irá aparecer dentro do input enquanto o conteúdo do mesmo for vazio. Esse novo atributo também pode ser usado em textareas. Listagem 3: Exemplo de uso do placeholder aplicado em textarea. 1 <textarea name=”mensagem” value=”” placeholder=”Digite uma mensagem...” /> No exemplo acima o texto “ Digite uma mensagem...” irá aparecer dentro do textarea enquanto o conteúdo do mesmo for vazio.24 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
  • 25. Listagem 4: Como verificar se o navegador tem suporte ao placeholder? 1 function suportaPlaceholder() { 2    var elemento = document.createElement(‘input’); 3    return (‘placeholder’ in elemento); 4}Caso o navegador não dê suporte pode ser usado o código a seguir: Listagem 5: Exemplo placeholder para navegadores sem suporte. Usando a biblioteca jQuery. 1 $(function(){  2 $(‘[placeholder]’).focus(function(e) { 3    var elemento = $(e.target); 4    if (elemento.val() == elemento.attr(‘placeholder’)) { 5        elemento.val(‘’); 6    } 7  }).blur(function(e) { 8    var elemento = $(e.target); 9    if (elemento.val() == ‘’ || elemento.val() == elemento.attr(‘placeholder’)) { 10        elemento.val(elemento.attr(‘placeholder’)); 11    } 12  }).trigger(‘blur’); 13 });Para evitar que os valores padrões sejam enviados para o formulário, no exemplo acima, pode ser usado o script a seguir: Listagem 6: Código que limpa os valores dos elementos que tem o placeholder antes de enviar o formulário 1 $(function(){ 2    $(‘[placeholder]’).parents(‘form’).bind(‘submit’, function(e) { 3        var $form = $(e.target); 4        if(!!$form.data(‘binded’) == false){ 5            $(e.target).find(‘[placeholder]’).each(function(i,el) { 6                if (el.val() == el.attr(‘placeholder’)) { 7                    el.val(‘’); 8                } 9            }); 10            $form.data(‘binded’,true); 11        } 12    }); 13 });É isso galera. Espero que tenham gostado. Até o próximo artigo. www.devmedia.com.br - Reprodução proibida E-Book de estudos sobre HTML 5 25
  • 26. HTML5: PlaceHolder - Como estilizar Autor: Erackson Queiroz De Brito Veja nesse artigo como usar CSS para estilizar o texto do placeholder do HTML 5. Link: http://www.devmedia.com.br/html5-placeholder-como-estilizar/24589 Veja nesse artigo como usar CSS para estilizar o texto do placeholder do HTML 5. No artigo anterior aprendemos e vimos como é simples usar o atributo placerholder das TAGs input e textarea: Placeholderem HTML 5. Nesse você vai ver que estilizar é mais simples ainda. Listagem 1: Exemplo de CSS para estilizar o placeholder. 1 ::-webkit-input-placeholder  { color:#4C4; } 2 input:-moz-placeholder { color:#4C4; } 3 textarea:-moz-placeholder { color:#4C4; }​ Listagem 2: O HTML. 1 <input type=”text” name=”nome” placeholder=”Nome” /><br /> 2 <textarea name=”mensagem” placeholder=”Mensagem”></textarea> Veja o código acima funcionando em http://jsfiddle.net/erackson/9kaHw/1/ Caso queira fazer um estilo para apenas um campo você pode fazer da seguinte forma: Listagem 3: Exemplo de CSS para estilizar o placeholder de apenas um campo. 1 #email::-webkit-input-placeholder{ 2    color:#C4C; 3    background-color: #4C4; 4    text-transform: uppercase; 5    font-style: bold; 6} 7 #email::-moz-placeholder { 8     color:#C4C; 9    background-color: #4C4; 10    text-transform: uppercase; 11    font-style: bold; 12 }​ Veja o código acima funcionando em http://jsfiddle.net/erackson/9kaHw/2/26 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
  • 27. Tags da HTML5 – Infográfico Autor: Joel Rodrigues Veja neste infográfico uma tabela com todas as tags atualmente suportadas pela HTML5, para ser usada como referência portodos que utilizam essa linguagem. Várias tags novas foram inseridas e algumas antigas foram descontinuadas, nesta tabelaelas são apresentadas separadamente, facilitando a compreensão das modificações sofridas pela linguagem. Link: http://www.devmedia.com.br/tags-da-html5-infografico/25831 Na imagem abaixo estão dispostas todas as tags atualmente suportadas pela versão 5 da linguagem HTML. São indicadas asnovas tags, as que foram descontinuadas e aquelas que permanecem desde a versão anterior. (clique no link para ampliar: http://www.devmedia.com.br/artigos/Joel_Rodrigues/infografico-TagsHTML5.jpg) www.devmedia.com.br - Reprodução proibida E-Book de estudos sobre HTML 5 27
  • 28. Atributos de tratamento de eventos da HTML5 – Infográfico Autor: Joel Rodrigues Veja neste infográfico uma tabela com os atributos de tratamento de eventos atualmente suportados pela HTML5, para serusada como referência por todos que utilizam essa linguagem. Link: http://www.devmedia.com.br/atributos-de-tratamento-de-eventos-da-html5-infografico/25841 Na imagem abaixo é apresentada uma tabela onde estão dispostos os atributos de tratamento de eventos (event handlers)da linguagem HTML em sua versão 5. Alguns novos eventos foram adicionados, principalmente relacionados a elementos demídia (áudio e vídeo), enquanto outros apenas foram mantidos desde a versão 4 ou descontinuados. Esta tabela pode ser usada como referência rápida para aqueles que utilizam HTML 5 no desenvolvimento de aplicações. (clique no link para ampliar: http://www.devmedia.com.br/artigos/Joel_Rodrigues/infografico-EventosHTML5.jpg)28 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
  • 29. www.devmedia.com.br - Reprodução proibida