HTML5
9 gostaram•1,627 visualizações
O documento apresenta as novidades do HTML5 em 8 capítulos, incluindo novas tags semânticas, formulários aprimorados, armazenamento offline, acesso a dispositivos e multimídia. Apresenta também CSS3 com novas propriedades para efeitos visuais e design responsivo para diferentes telas.
HTML5
- 2. Twitter Nome [email protected] E-mail Site
- 4. Formaweb nossaequipe Hugo Demiglio Gregório Ferrari Matheus Cáceres Wagner Guerrero Programador Designer Programador Desenvolvedor Programador web, Sonysta fanático, Perdido, lutador, Nintendista, nerd, fã dos empresário, adorador nervoso, formado em trabalha com web, ama heróis da Marvel e de eletrônica nas horas games pela faculdade RubyOnRails e Linux. Já desenvolve sites nas vagas e MacFag. Anhembi Morumbi. falei perdido? horas vagas. HTML5
- 5. Formaweb nossosclientes Não Intendo Ducoco Alimentos DomHost Escava Forte Fantasia Ariboni Casinha Colorida Conselheiro Criativo HTML5
- 6. Para falarmos de HTML5, iremos dividir o conteúdo em 8 capítulos.
- 8. HTML5 Semantics doctype O doctype indica para o navegador qual a versão do HTML que você está utilizando. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html> HTML5
- 9. HTML5 Semantics charset Já o charset serve para indicar ao browser qual tabela de caractéres está utilizando. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8"> HTML5
- 10. HTML5 Semantics novastags <div id=‘header’> <div id=‘nav’> <div id=‘article’> <div id=‘side’> <div id=‘section’> <div id=‘footer’> HTML5
- 11. HTML5 Semantics novastags <header> <nav> <article> <aside> <section> <footer> HTML5
- 12. HTML5 Semantics forms Novos formulários Antes do HTML5 estávamos restringidos ao uso de poucos tipos de formulários, como text, hidden, textarea, select, radio e checkbox. Agora, existem novos tipos de formulários que podemos utilizar, assim podemos informar ao browser exatamente o dado que você espera receber. No caso de um telefone, por exemplo, o navegador mobile pode exibir um teclado especial. Os novos tipos são tel, search, email, url, datetime, date, month, week, time, datetime-local, number, range e color. HTML5
- 13. HTML5 Semantics forms Tipos de dados e validadores. Ainda em formulários temos alguns novos atributos! Autofocus Required Placeholder Pattern HTML5
- 14. HTML5 Semantics microdata Recipe Products People Events HTML5
- 15. HTML5 Semantics microdata Existem mais formatos de data, como softwares e músicas. Esses padrões podem Products Recipe ser encontrados no site: People http://www.data-vocabulary.org/ Events HTML5
- 18. Offline & Storage applicationcache Arquivos cacheados para MANIFESTO serem utilizados quando offline. Arquivos que não funcionam sem conexão com a Internet. Indica arquivos cacheados para substituir quando offline. HTML5
- 19. Offline & Storage webstorage Banco de dados Muito mais espaço de armazenamento. Dados ficam guardados ao mudar de página. Não tem data para expirar. localstorage sessionstorage HTML5
- 20. Offline & Storage webstorage sessionstorage Fica disponível apenas para a janela que guardou o dado até que seja fechada. localstorage Não depende da sessão. Ao setar um dado, este ficará automaticamente disponível para qualquer janela. Além disso ela permanecerá ativa até que seja deletada pelo programador do site ou pelo usuário. HTML5
- 21. Offline & Storage exemplos HTML5
- 22. Offline & Storage exemplos HTML5
- 24. Device Access dispositivos Hoje em dia existem muitos dispositivos diferentes que acessam a Internet. HTML5
- 25. Offline & Storage multitouch Através de uma API, será possível resgatar eventos como touchstart, touchmove e touchend. HTML5
- 26. Offline & Storage draganddrop Antes era necessário o uso de JavaScript para conseguir arrastar objetos dentro de uma página. Com exemplo a chegada do HTML5, este recurso http://html5demos.com/drag passou a ser nativo e conta com vários eventos: dragstart, drag, dragend, entre outros. HTML5
- 27. Offline & Storage geolocation Existem três populares maneiras de resgatar a localização de um usuário: GPS, GPRS e IP. Cada navegador tem seu próprio método de calcular esta alta precisão. Com a latitude e a longitude obtida é possível gerar mapas, submeter via ajax, enviar os dados para um webservice, entre outros... exemplo http://html5demos.com/geo HTML5
- 28. Offline & Storage device Permite o acesso a webcam do usuário. Com um conhecimento avançado sobre processamento digital de imagens é possível programar efeitos em tempo real com JavaScript. exemplo http://neave.com/webcam/ HTML5
- 30. Connectivity websockets HTML5
- 31. Connectivity serversent Nos dispositívos móveis da Apple conhecemos as “Push Notifications”, que funcionam da mesma forma no JavaScript. É aberta uma conexão com o servidor, que por sua vez fica escutando uma porta de comunicação. Isto pode ser utilizado por exemplo para implementar uma interface de chat ou um monitor de status de alguma operação demorada ocorrendo no servidor. HTML5
- 32. Connectivity kinect Este é um bom exemplo de dispositivo externo que pode se comunicar com o JavaScript através do Web Socket. O Kinect, através de uma porta exclusiva, envia as coordenadas, com uma conexão de escuta é possível trabalhar com esses dados dentro do site. HTML5
- 34. Multimedia audio Por padrão, todo browser deveria suportar o codec livre OggVorbis, mas infelizmente isso não acontece. Para contornar este problema, é possível indicar origens alternativas, como no exemplo ao lado. Uma das vantagens de utilizar esta especificação é a liberdade de criar e modificar o visual dos reprodutores. HTML5
- 35. Multimedia video A especificação de vídeo é semelhante a de áudio, basta apenas substituir a tag para <video>. HTML5
- 37. 3D, Graphics, Effects SVG SVG é a abreviatura de Scalable Vector Graphics que pode ser traduzido como gráficos vetoriais escaláveis. Basicamente é uma linguagem XML, parecida com HTML, para descrever de forma vetorial desenhos e gráficos bidimensionais. Estes gráficos podem ser estáticos, dinâmicos e até mesmo animados. HTML5
- 38. 3D, Graphics, Effects canvas Canvas é uma tela de desenho manipulada pelo JavaScript, por hora é possível manipular apenas gráficos no contexto 2D. Esta é a tecnologia mais utilizada para o desenvolvimento de jogos. HTML5
- 39. 3D, Graphics, Effects webgl WebGL é uma extensão do elemento Canvas, entretanto, utilizando sua API é possível criar gráficos no contexto 3D. exemplo http://www.chromeexperiments.com/webgl HTML5
- 41. Performance & Integration webworkers Web Workers é uma API do JavaScript para colocar processos em background. Assim que o processo é finalizado pode-se então resgatar os dados do resultado. HTML5
- 42. Performance & Integration XHR2 XHR2 é a abreviação para XMLHttpRequest Level 2, ou se preferir Ajax2. Com ele, novos recursos estarão disponíveis para serem manipulados com JavaScript: • Upload seguimentado de arquivos; • Definir formato de retorno; • Enviar formulários (FormData); • Requisitar páginas em outros domínios; • Baixar e salvar arquivos para funcionamento offline. HTML5
- 44. CSS3 Styling novaspropriedades • border-radius: Bordas arredondadas. • box-shadow: Sombra em objetos. • text-shadow: Sombra em textos. • linear-gradient: Cria gradientes em backgrounds. • keyframes: Semelhante ao Flash. • transition: Cria animações de transição. • transform: Transforma um objeto podendo rotaciona-lo ou amplia-lo. Estas são algumas das propriedades da terceira versão do CSS. As opções são tantas que seria necessária uma nova apresentação para falar apenas disto. HTML5
- 45. CSS3 Styling responsivedesign O mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
- 46. CSS3 Styling responsivedesign O mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
- 47. CSS3 Styling responsivedesign O mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
- 48. CSS3 Styling responsivedesign O mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
- 49. CSS3 Styling responsivedesign O mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
- 50. CSS3 Styling responsivedesign O mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
- 51. CSS3 Styling responsivedesign O mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
- 52. CSS3 Styling responsivedesign O mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
- 53. Já posso usar? HTML5 Pode! Modernizr é uma biblioteca JavaScript que implementa suporte as novas tags do HTML5 nos browsers, além disso reúne uma série de verificações as novas tecnologias. HTML5
- 54. Vida longa e próspera! Dúvidas?
- 55. </obrigado>
Notas do Editor
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n