#DeveloperDay - Front-end API html5

628 visualizações

Publicada em

Esta apresentação foi em 11 de abril de 2011, na Código Digital para falar um pouco sobre o API do HTML5. Buscamos várias referências e artigos de especialistas para falar um pouco das mudanças do html.

Publicada em: Design
2 comentários
1 gostou
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
628
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
20
Comentários
2
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Falar sobre HTML5, explicar sobre as evolução do HTML. Leandro
  • Objetivo Marlon
  • Leandro - Mas espera aí! Quem é esse tal de “W3C”? O W3C é um consórcio de empresas de tecnologia que desenvolvem padrões para a criação e a interpretação dos conteúdos para a web. Com esses padrões, o site desenvolvido pode ser acessado por qualquer pessoa ou tecnologia.
  • Apresentação dos Layouts do portal Globo.com, deste 2000 à 2011. – Leandro e Marlon
  • Leandro
  • Aborta mais sobre HTML5, sobre sua Hitória e browsers.
  • Leandro
  • Evoluçãos dos Browsers.
  • API’s do HTML5: WebForms 2.0, Web Storage, Web Sockets, Web Workers, Geolocation, Video & Audio, Canvas & SVG, Aplicações Offline. API’s http://html5readiness.com/
  • Dicas HTML5
  • Dicas HTML5
  • Dicas HTML5 – Não funciona no Mozilla - Marlon
  • Leandro
  • Leandro
  • Leandro
  • Leandro
  • Leandro
  • Marlon
  • Galera
  • #DeveloperDay - Front-end API html5

    1. 1. Marlon RaphaelLeandro Santos
    2. 2. O objetivo do HTML 5 é criar um web semântica. Issosignifica organização, padrões na estrutura da página.Esta nova versão do HTML traz mudanças significativas coma criação de novas tags que possibilitam unir as partes dapágina de forma lógica. O que não significanecessariamente um código mais enxuto. Como já disse, oobjetivo é torná-lo organizado.OBJETIVO DO HTML5
    3. 3. Modifica a forma como estamos escrevendo código eorganizamos a informação na página. Seria mais semântica commenos código. Seria mais interativa sem a necessidade deplugins e perda de performace.O QUE É HTML5?
    4. 4. Vantagens:- marcação limpa.- semântica adicional de novos elementoscomo <header> , <nav> e <datetime>-Novo formulário tipos de entradaDesvantagens- A especificação não está terminada e é provável que amudança.- Muitos usuários com versões antigas de navegadores, o quenão permite o uso de algumas APIs.VANTAGENS E DESVANTAGENS
    5. 5. 0A definição do tipo de documento tornou-se absurdamente mais simples.<!DOCTYPE html>A hierarquia de cabeçalhos (h1 – h6) também foi alterada. Agora ela não émais relativa à página somente, mas à seção da página. É possível ter diversosh1 em uma mesma página, sendo que cada um com uma importânciadiferente conforme a seção em que esta sem influenciar diretamente osoutros.O papel Da divCom já foi dito, as novas tag HTML 5 priorizam a semântica. As divs sempretiveram o papel de estruturar a página e continuam assim. São utilizadas parafins “decorativos” e estruturas gerais, pois não possuem valor semântico enão ajudam a definir a importância do conteúdo.HTML5
    6. 6. 0article no HTML 5Para saber quando utilizar o article, isole o texto do resto da página. Se ele continuarfazendo sentido, estão use article. A utilização básica é para notícias, artigos ecomentários. Ela cria seções da página que podem ser referenciadas via RSS.<article><h2>Artigo em destaque</h2><figure><img src=”imagem.jpg” alt=”imagem”></figure><p>Donec ac elit. Etiam posuere venenatis ante. Nun ullamcorper neque acjusto. Donec id alor purus. Aenean non enim eget diam aliquam tristique. Maurispellentesque pulvinar dui. </p><a href="#" title="Leia mais" class="leiamais">leia mais</a></article>O article e o section tem um relacionamento que pode confundir a princípio. Poisassim como é possível colocar article dentro de um section, o inverso também épermitido.HTML5
    7. 7. 0header E hgroup no HTML 5O elemento header especifica o cabeçalho da seção da página. Ele pode ser utilizado no topo da páginaenglobando o logotipo da empresa e o menu, e ao mesmo tempo aparecer no lado direito para intitular a seção“mais artigos”.Utilização no topo da página:<header><div class="topo-div"></div><nav><ul><li><a href="#" title="Home">Home</a></li><li><a href="#" title="Marketing">Marketing</a></li><li><a href="#" title="Internet">Internet</a></li><li><a href="#" title="Granhar Dinheiro">Granhar Dinheiro</a></li><li><a href="#" title="Webmaster">Webmaster</a></li><li><a href="#" title="Scripts">Scripts</a></li><li><a href="#" title="Software">Software</a></li><li><a href="#" title="Comércio Eletrõnico">Com&eacute;rcio Eletr&ocirc;nico</a></li><li><a href="#" title="Downloads">Downloads</a></li><li><a href="#" title="Contato">Contato</a></li></ul></nav></header>HTML5
    8. 8. 0A tag hgroup (head group) serve para englobar diversos cabeçalhos.<article><hgroup><h1>Titulo principal</h1><h2>Subtítulo</h2></hgroup><p> Texto do artigo</p></article>Se antes do texto ainda houvesse um parágrafo com data, por exemplo, deve-se então englobar o hgroup e p com o header.HTML5
    9. 9. 0Na verdade, sim, com algumas etapas extra. E ele vai trabalharem todos os navegadores modernos. Pode até funcionar noIE6. Existem apenas algumas curiosidades pouco precisamospassar se nós estamos indo para começar a usar isso hoje.Primeiro, porque a maioria dos navegadores não entendem odoctype HTML5 novo, eles não sabem sobre essas novasetiquetas em HTML5. Felizmente, devido à flexibilidade denavegadores, eles lidam bem com marcas desconhecidas. Oúnico problema aqui é as marcas desconhecidas não têm estilopadrão, e são tratados como marcas incorporadas . Estas tagsHTML5 novas são estruturais, e deve, obviamente, ser elementosnível de bloco. Então, quando o estilo-los com CSS , precisamoster certeza de incluir o display: block; em nosso atributo de valorpares .JÁ POSSO USAR O HTML5?
    10. 10. A partir de hoje. E, claro, uma vez HTML5 é mais amplamentesuportado, o supérfluo display: block; pode ser removido, poisele será incluído nos estilos padrão do navegadorJÁ POSSO USAR O HTML5?
    11. 11. Há mais um problema se você precisar de suporte IE. Aconteceque o motor de renderização do IE irá trabalhar com as novastags, mas não reconhece nenhum CSS aplicadas a eles. Bem, issonão é bom. Felizmente, o IE só precisa de um bom pontapérápido com a ajuda de um simples bocado muito deJavaScript. Tudo o que precisamos fazer para lançar o IE é criarum DOM com JavaScript nó para cada uma das novas tags, e derepente o IE irá aplicar estilos para as novas tags sem nenhumproblema. O código será parecido com este, e pode ser colocadodiretamente na cabeça do nosso documento, ou o conteúdodo script tag colocados em um arquivo externo e incluídos.APOIO AO IE
    12. 12. <script> document.createElement(header);document.createElement(footer);document.createElement(section);document.createElement(aside);document.createElement(nav);document.createElement(article);</script>Antes de deixarmos este código, há uma coisa a falar sobre o script tag emHTML5. HTML5 vai assumir type = "text / javascript" em qualquer elemento script, porisso não precisa ser incluído. Mais uma vez, tornando as coisas simples.APOIO AO IE
    13. 13. - Cross-browser compatível (IE6, sim nós temos isso.)- HTML5 pronto. Use as novas tags, com certeza.- Ótima cache e as regras de compressão para a classe dedesempenho A- As melhores práticas de configuração padrões do siteotimizações navegador móvel- IE classes específicas para o controle de cross-browser máximoHandy. Js e sem classes. Js de estilo baseado na capacidadeHTML5 BOILERPLATE
    14. 14. telTelefone. Não há máscara de formatação ou validação,propositalmente, visto não haver no mundo um padrão bemdefinido para números de telefones. É claro que você pode usara nova API de validação de formulários para isso. Os agentes deusuário podem permitir a integração com sua agenda decontatos, o que é particularmente útil em telefones celulares.searchUm campo de busca. A aparência e comportamento do campopode mudar ligeiramente dependendo do agente de usuário,para parecer com os demais campos de busca do sistema.NOVIDADES NOS FORMULÁRIOS
    15. 15. emailE-mail, com formatação e validação. O agente de usuário podeinclusive promover a integração com sua agenda de contatos.urlUm endereço web, também com formatação e validação.O campo de formulário pode conter qualquer um desses valoresDatas e horasno atributo type:•datetime•date•month•week•time•datetime-localNOVIDADES NOS FORMULÁRIOS
    16. 16. Todos devem ser validados e formatados pelo agente de usuário,que pode inclusive mostrar um calendário, um seletor de horárioou outro auxílio ao preenchimento que estiver disponível nosistema do usuário.O atributo adicional step define, para os validadores e auxílios aopreenchimento, a diferença mínima entre dois horários. O valorde step é em segundos, e o valor padrão é 60. Assim, se vocêusar step="300" o usuário poderá fornecer como horários 7:00,7:05 e 7:10, mas não 7:02 ou 7:08.numberVeja um exemplo do tipo number com seus atributos opcionais:rangeVamos modificar, no exemplo acima, apenas o valor de type,mudando de "number" para "range":NOVIDADES NOS FORMULÁRIOS
    17. 17. colorO campo com type="color" é um seletor de cor. O agente deusuário pode mostrar um controle de seleção de cor ou outroauxílio que estiver disponível. O valor será uma cor noformato #ff6600.NOVIDADES NOS FORMULÁRIOS
    18. 18. Conteúdo editávelPara tornar um elemento do HTML editável, basta incluir nele oatributo contenteditable, assim:<div contenteditable="true"> Edite-me... </div>Você pode ler emanipular os elementos editáveis normalmente usando osmétodos do DOM. Isso permite, com facilidade, construir umaárea de edição de HTML.NOVIDADES NOS FORMULÁRIOS
    19. 19. HTML5 tem uma tonelada de novos tipos de atributos efuncionalidades para formulários. Estes não devem tomar o lugarde Javascript ou CSS, mas para complementar e simplificar oprocesso de desenvolvimento. Olhe para estas a estes atributos:<input type="text" placeholder="stuff>//texto em cinza, que desaparece em foco.<input type="text" autofocus>// centra-se para o campo automaticamente. Boolean.<input type="text" required>// campo deve ter um valor a apresentar. Boolean.<input type="text" autocomplete="off">// "on" por padrão, utilizado como medida de segurança.NOVIDADES NOS FORMULÁRIOS
    20. 20. Iphone<input type="tel"><input type="url"><input type="email">NOVIDADES NOS FORMULÁRIOS
    21. 21. Atributos globais são aqueles que todos os elementos possuem. Entre osnovos atributos globais do HTML 5, temos:- O atributo contenteditable que indica que aquela área é editável. Ousuário pode mudar o conteúdo do elemento e manipular sua marcação.- O atributo contextmenu que pode ser usado para apontar para um menupopup (que aparece quando se clica com o botão direito, por exemplo).- O atributo draggable que informa que aquele elemento pode serarrastado.- O atributo hidden que informa que aquele elemento não é mais, ouainda não é relevante.O HTML 5 também mudou a forma como os eventos são identificados,bem como introduziu novos. Eventos agora são apresentados na formaonevent-nomedoevento. Exemplo: onevent-click.ATRIBUTOS GLOBAIS
    22. 22. HTML5 provê uma maneira de se indicar ao navegador que elementos sãonecessários e devem ser postos em cache para que uma aplicação funcioneoffline. O exemplo da documentação oficial é bastante esclarecedor. Dê umaolhada na seguinte página:1 <!DOCTYPE HTML>2 <html>3 <head>4 <title>Clock</title>5 <script src="clock.js"></script>6 <link rel="stylesheet" href="clock.css">7 </head>8 <body>9 <p>The time is: <output id="clock"></output></p>10 </body>11 </html>CONTROLE DE CACHE
    23. 23. Trata-se de um widget de relógio. Para funcionar, este HTMLdepende dos arquivos "clock.js" e "clock.css". Para permitir que ousuário acesse esta página offile, precisamos escrever umarquivo de manifesto, indicando que URLs devem ser postas emcache. Vamos preparar uma nova versão do widget, contendo omanifesto, que é um arquivo com a extensão .manifest e quedeve ser servido com o tipo MIME text/cache-manifest. Emnosso caso, o arquivo vai se chamar clock.manifest e terá oseguinte conteúdo:CACHE MANIFEST clock1.html clock.css clock.jsCONTROLE DE CACHE
    24. 24. Trata-se de um widget de relógio. Para funcionar, este HTMLdepende dos arquivos "clock.js" e "clock.css". Para permitir que ousuário acesse esta página offile, precisamos escrever umarquivo de manifesto, indicando que URLs devem ser postas emcache. Vamos preparar uma nova versão do widget, contendo omanifesto, que é um arquivo com a extensão .manifest e quedeve ser servido com o tipo MIME text/cache-manifest. Emnosso caso, o arquivo vai se chamar clock.manifest e terá oseguinte conteúdo:CACHE MANIFEST clock1.html clock.css clock.jsCONTROLE DE CACHE
    25. 25. 1 <!DOCTYPE HTML>2 <html manifest="clock.manifest">3 <head>4 <title>Clock</title>5 <script src="clock.js"></script>6 <link rel="stylesheet" href="clock.css">7 </head>8 <body>9 <p>The time is: <output id="clock"></output></p>10 </body>11 </html>CONTROLE DE CACHE
    26. 26. Note que é recomendado que você insira o próprio HTMLprincipal na lista de URLs do arquivo de manifesto, embora nãoseja necessário. Ao encontrar uma página com um arquivo demanifesto vinculado, o navegador fará cache das URLs listadasno manifesto e da própria página.Note também que não é necessário que todas as URLs paracache estejam importadas no documnto atual. O arquivo demanifesto pode contar todas as páginas de sua aplicação queforem necessárias para permitir o funcionamento offline,inclusive a navegação entre páginas.CONTROLE DE CACHE
    27. 27. Note que é recomendado que você insira o próprio HTMLprincipal na lista de URLs do arquivo de manifesto, embora nãoseja necessário. Ao encontrar uma página com um arquivo demanifesto vinculado, o navegador fará cache das URLs listadasno manifesto e da própria página.Note também que não é necessário que todas as URLs paracache estejam importadas no documnto atual. O arquivo demanifesto pode contar todas as páginas de sua aplicação queforem necessárias para permitir o funcionamento offline,inclusive a navegação entre páginas.CONTROLE DE CACHE
    28. 28. Quais atitudes objetivas a CódigoDigital deve adotar em relação aoHTML5?

    ×