• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5
 

HTML5

on

  • 2,033 views

Para quem está começando, existem duas apostilas oficiais do W3C em português e gratuitas: ...

Para quem está começando, existem duas apostilas oficiais do W3C em português e gratuitas:

HTML5: http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf
CSS3: http://www.w3c.br/pub/Cursos/CursoCSS3/css-web.pdf

Statistics

Views

Total Views
2,033
Views on SlideShare
2,033
Embed Views
0

Actions

Likes
3
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

HTML5 HTML5 Presentation Transcript

  • Twitter Nomecontato@caiotarifa.com E-mail Site
  • Formaweb nossaequipeHugo Demiglio Gregório Ferrari Matheus Cáceres Wagner GuerreroProgramador Designer Programador DesenvolvedorProgramador web, Sonysta fanático, Perdido, lutador, Nintendista, nerd, fã dosempresário, adorador nervoso, formado em trabalha com web, ama heróis da Marvel ede eletrônica nas horas games pela faculdade RubyOnRails e Linux. Já desenvolve sites nasvagas e MacFag. Anhembi Morumbi. falei perdido? horas vagas. HTML5
  • Formaweb nossosclientesNão Intendo Ducoco Alimentos DomHost Escava ForteFantasia Ariboni Casinha Colorida Conselheiro Criativo HTML5
  • Para falarmos de HTML5, iremos dividir o conteúdo em 8 capítulos.
  • HTML5 Semantics doctypeO doctype indica para o navegador qual a versão do HTML quevocê está utilizando.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE html> HTML5
  • HTML5 Semantics charsetJá o charset serve para indicar ao browser qual tabela decaractéres está utilizando.<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta charset="utf-8"> HTML5
  • HTML5 Semantics novastags <div id=‘header’> <div id=‘nav’> <div id=‘article’><div id=‘side’> <div id=‘section’> <div id=‘footer’> HTML5
  • HTML5 Semantics novastags <header> <nav> <article><aside> <section> <footer> HTML5
  • HTML5 Semantics formsNovos formuláriosAntes do HTML5 estávamos restringidos ao uso de poucos tiposde formulários, como text, hidden, textarea, select, radio echeckbox.Agora, existem novos tipos de formulários que podemos utilizar,assim podemos informar ao browser exatamente o dado quevocê espera receber. No caso de um telefone, por exemplo, onavegador 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
  • HTML5 Semantics forms Tipos de dados e validadores.Ainda em formulários temos alguns novos atributos!Autofocus RequiredPlaceholder Pattern HTML5
  • HTML5 Semantics microdata Recipe ProductsPeople Events HTML5
  • HTML5 Semantics microdata Existem mais formatos de data, como softwares emúsicas. Esses padrões podem Products Recipe ser encontrados no site: People http://www.data-vocabulary.org/ Events HTML5
  • HTML5 Semanticsacessibilidade
  • Offline & Storage applicationcacheArquivos cacheados para MANIFESTOserem utilizados quandooffline.Arquivos que nãofuncionam sem conexãocom a Internet.Indica arquivoscacheados para substituirquando offline. HTML5
  • Offline & Storage webstorageBanco de dadosMuito mais espaço dearmazenamento.Dados ficam guardados aomudar de página.Não tem data para expirar. localstorage sessionstorage HTML5
  • 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 qualquerjanela. Além disso ela permanecerá ativa até que seja deletada pelo programador do site ou pelo usuário. HTML5
  • Offline & Storageexemplos HTML5
  • Offline & Storageexemplos HTML5
  • Device Access dispositivosHoje em dia existem muitos dispositivos diferentes que acessam a Internet. HTML5
  • Offline & Storage multitouchAtravés de uma API, será possível resgatar eventos como touchstart, touchmove e touchend. HTML5
  • Offline & Storage draganddropAntes era necessário o uso deJavaScript para conseguir arrastarobjetos dentro de uma página. Com exemploa chegada do HTML5, este recurso http://html5demos.com/dragpassou a ser nativo e conta comvários eventos: dragstart, drag,dragend, entre outros. HTML5
  • Offline & Storage geolocationExistem três populares maneirasde resgatar a localização de umusuário: GPS, GPRS e IP.Cada navegador tem seu própriométodo de calcular esta altaprecisão.Com a latitude e a longitudeobtida é possível gerar mapas,submeter via ajax, enviar osdados para um webservice, entreoutros...exemplohttp://html5demos.com/geo HTML5
  • Offline & Storage devicePermite o acesso awebcam do usuário.Com umconhecimentoavançado sobreprocessamento digitalde imagens épossível programarefeitos em tempo realcom JavaScript.exemplohttp://neave.com/webcam/ HTML5
  • Connectivitywebsockets HTML5
  • Connectivity serversentNos dispositívos móveis da Appleconhecemos as “PushNotifications”, que funcionam damesma forma no JavaScript.É aberta uma conexão com oservidor, que por sua vez ficaescutando uma porta decomunicação.Isto pode ser utilizado porexemplo para implementar umainterface de chat ou um monitorde status de alguma operaçãodemorada ocorrendo no servidor. HTML5
  • Connectivitykinect 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
  • Multimedia audioPor padrão, todo browserdeveria suportar o codec livreOggVorbis, mas infelizmenteisso não acontece.Para contornar este problema,é possível indicar origensalternativas, como no exemploao lado.Uma das vantagens de utilizaresta especificação é aliberdade de criar e modificar ovisual dos reprodutores. HTML5
  • Multimedia video A especificação de vídeo ésemelhante a de áudio, basta apenas substituir a tag para <video>. HTML5
  • 3D, Graphics, Effects SVGSVG é a abreviatura de Scalable Vector Graphics que pode sertraduzido como gráficos vetoriais escaláveis.Basicamente é uma linguagem XML, parecida com HTML, paradescrever de forma vetorial desenhos e gráficos bidimensionais.Estes gráficos podem ser estáticos, dinâmicos e até mesmoanimados. HTML5
  • 3D, Graphics, Effects canvasCanvas é uma tela de desenhomanipulada pelo JavaScript, porhora é possível manipularapenas gráficos no contexto 2D.Esta é a tecnologia maisutilizada para o desenvolvimentode jogos. HTML5
  • 3D, Graphics, Effects webglWebGL é 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
  • Performance & Integrationwebworkers 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
  • Performance & Integration XHR2XHR2 é a abreviação para XMLHttpRequest Level 2, ou sepreferir Ajax2.Com ele, novos recursos estarão disponíveis para seremmanipulados 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
  • CSS3 Stylingnovaspropriedades• 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
  • CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
  • CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
  • CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
  • CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
  • CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
  • CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
  • CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
  • CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
  • Já posso usar? HTML5 Pode! Modernizr é uma biblioteca JavaScript que implementasuporte as novas tags do HTML5 nos browsers, além disso reúne uma série de verificações as novas tecnologias. HTML5
  • Vida longa e próspera! Dúvidas?
  • </obrigado>