O PODEROSO HTML 5 ...e outras tecnologias com menos  hype
Público Alvo <ul><li>WebDevelopers </li></ul><ul><li>WebDesigners </li></ul><ul><li>WebOutraCoisa </li></ul><ul><li>Intere...
Objetivo <ul><li>Novas tecnologias para a Web </li></ul><ul><li>WebSockets </li></ul>
Quem sou eu <ul><li>Gustavo Ciello </li></ul><ul><li>Natural de Veranópolis </li></ul><ul><li>Moro atualmente em Porto Ale...
Cardápio de hoje <ul><li>Sobre o HTML </li></ul><ul><li>Buzz Words </li></ul><ul><li>Padrão HTML 5 e relacionados </li></u...
HYPERTEXT MARKUP LANGUAGE
1991 – HTML (Tim) 1995 – HTML 2 1997/jan – HTML 3.2 1997/dez – HTML 4.0 1999 – HTML 4.01 2000 – XHTML 1.0 2001 – XHTML 1.1
WHATWG Web Hypertext Application Technology Working Group  
WebDevelopers POG
Buzz Words DHTML AJAX WEB 2.0 RIA
H T M L 5
 
Q: O que é HTML 5 ? A: É o que você quiser !! (WTF!)
Tags depreciadas e removidas <ul><li><acronym> </li></ul><ul><li><applet> </li></ul><ul><li><basefont> </li></ul><ul><li><...
Doctype, lang & charset <ul><li><!DOCTYPE html> </li></ul><ul><li><html lang=“pt-br”> </li></ul><ul><li><meta charset=”utf...
Elementos semânticos <ul><li><article> </li></ul><ul><li><section> </li></ul><ul><li><aside> </li></ul><ul><li><hgroup> </...
Novos métodos de seleção <ul><li>getElementsByClassName </li></ul><ul><li>querySelector/querySelectorAll </li></ul>
Forms <ul><li>Input types !!! </li></ul><ul><li>color, email, date, month, week, time, datetime, datetime-local, number, r...
Forms <ul><li>Atributos !!! </li></ul><ul><li>required, autofocus, pattern, list, autocomplete e placeholder </li></ul>
Forms <ul><li>Novos elementos !!! </li></ul><ul><li><keygen>, <datalist>, <output>, <meter> e <progress> </li></ul>Demo De...
Tag Contenteditable e UndoHistory <ul><li>Possibilidade de edição em elementos comuns do HTML </li></ul><ul><li>Log de tod...
Canvas 2D <ul><li>Elemento que representa uma área de desenho capaz de renderizar imagens e formas 2D </li></ul>Demo Demo ...
WebGL (Canvas 3D) <ul><li>Elemento canvas com recursos 3D </li></ul><ul><li>Definição bastante preliminar </li></ul>
Elementos <audio> e <video> <ul><li>Video e audio nativos </li></ul><ul><li>Probelmas com CODECS </li></ul><ul><li>Element...
Microdata <ul><li>Elementos de semântica no conteúdo das páginas </li></ul>Demo
SVG <ul><li>NÃO é uma tecnologia nova </li></ul><ul><li>Fontes SVG </li></ul><ul><li>Manipulação de arquivos SVG </li></ul...
MathML <ul><li>Escrita de fórmulas matemáticas utilizando uma sintaxe parecida com HTML </li></ul>
Server Sent Events <ul><li>Eventos iniciados pelo servidor, conectando ao cliente </li></ul><ul><li>Objeto EventSource </l...
Web Workers <ul><li>Scripts como Threads separadas </li></ul>Demo
Application Cache <ul><li>Páginas Offline! </li></ul>Demo
Drag & Drop <ul><li>Capacidade de arrastar e soltar elementos </li></ul>Demo Demo
WebStorage <ul><li>Cache de dados locais no formato chave/valor (key/value) </li></ul>Demo
Web SQL Database <ul><li>Banco de dados SQL (SQLite) local acessível via script </li></ul>Demo
Geolocalização <ul><li>API nativa para descobrir a localização do cliente </li></ul>Demo
CSS 3 <ul><li>Novos background types </li></ul><ul><li>Backgrounds SVG </li></ul><ul><li>Border images </li></ul><ul><li>T...
Suporte aos recursos pelos browsers atuais <ul><li>Teste </li></ul><ul><li>Internet Explorer </li></ul><ul><li>Plugins e C...
HTML 5 vs Resto <ul><li>Flash </li></ul><ul><li>JavaFX </li></ul><ul><li>Silverlight </li></ul>
<ul><li>? </li></ul>
WebSockets <ul><li>API de sockets bidirecionais full-duplex entre páginas Web e servidores  </li></ul><ul><li>Frames de te...
WebSockets <ul><li>Implementações primárias </li></ul><ul><li>Padrão ainda não definido </li></ul><ul><li>http://code.goog...
Upcoming SlideShare
Loading in...5
×

Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello

5,005

Published on

Neste workshop serão apresentadas algumas das novidades do HTML 5 através de exemplos. Logo após, será realizado o desenvolvimento de uma aplicação utilizando WebSockets e PHP.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,005
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
73
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello"

  1. 1. O PODEROSO HTML 5 ...e outras tecnologias com menos hype
  2. 2. Público Alvo <ul><li>WebDevelopers </li></ul><ul><li>WebDesigners </li></ul><ul><li>WebOutraCoisa </li></ul><ul><li>Interessados </li></ul><ul><li>Curiosos </li></ul>
  3. 3. Objetivo <ul><li>Novas tecnologias para a Web </li></ul><ul><li>WebSockets </li></ul>
  4. 4. Quem sou eu <ul><li>Gustavo Ciello </li></ul><ul><li>Natural de Veranópolis </li></ul><ul><li>Moro atualmente em Porto Alegre </li></ul><ul><li>Trabalho com informática desde os 14 </li></ul><ul><li>Sou formado em Análise e Desenvolvimento de Sistemas pela FTEC </li></ul><ul><li>Apoiador do Tchelinux e de projetos open </li></ul>
  5. 5. Cardápio de hoje <ul><li>Sobre o HTML </li></ul><ul><li>Buzz Words </li></ul><ul><li>Padrão HTML 5 e relacionados </li></ul><ul><li>Alterações e novidades </li></ul><ul><li>Compatibilidade de browsers </li></ul><ul><li>HTML 5 contra o resto </li></ul><ul><li>Perguntas </li></ul><ul><li>Workshop de WebSockets </li></ul>
  6. 6. HYPERTEXT MARKUP LANGUAGE
  7. 7. 1991 – HTML (Tim) 1995 – HTML 2 1997/jan – HTML 3.2 1997/dez – HTML 4.0 1999 – HTML 4.01 2000 – XHTML 1.0 2001 – XHTML 1.1
  8. 8. WHATWG Web Hypertext Application Technology Working Group  
  9. 9. WebDevelopers POG
  10. 10. Buzz Words DHTML AJAX WEB 2.0 RIA
  11. 11. H T M L 5
  12. 13. Q: O que é HTML 5 ? A: É o que você quiser !! (WTF!)
  13. 14. Tags depreciadas e removidas <ul><li><acronym> </li></ul><ul><li><applet> </li></ul><ul><li><basefont> </li></ul><ul><li><big> </li></ul><ul><li><center> </li></ul><ul><li><dir> </li></ul><ul><li><font> </li></ul><ul><li><frame> </li></ul><ul><li><frameset> </li></ul><ul><li><noframes> </li></ul><ul><li><s> </li></ul><ul><li><strike> </li></ul><ul><li><tt> </li></ul><ul><li><u> </li></ul><ul><li><isindex> </li></ul>
  14. 15. Doctype, lang & charset <ul><li><!DOCTYPE html> </li></ul><ul><li><html lang=“pt-br”> </li></ul><ul><li><meta charset=”utf-8″ /> </li></ul>
  15. 16. Elementos semânticos <ul><li><article> </li></ul><ul><li><section> </li></ul><ul><li><aside> </li></ul><ul><li><hgroup> </li></ul><ul><li><header> </li></ul><ul><li><footer> </li></ul><nav> <time> <mark> <figure> <figcaption> Demo
  16. 17. Novos métodos de seleção <ul><li>getElementsByClassName </li></ul><ul><li>querySelector/querySelectorAll </li></ul>
  17. 18. Forms <ul><li>Input types !!! </li></ul><ul><li>color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, e url </li></ul>
  18. 19. Forms <ul><li>Atributos !!! </li></ul><ul><li>required, autofocus, pattern, list, autocomplete e placeholder </li></ul>
  19. 20. Forms <ul><li>Novos elementos !!! </li></ul><ul><li><keygen>, <datalist>, <output>, <meter> e <progress> </li></ul>Demo Demo Demo
  20. 21. Tag Contenteditable e UndoHistory <ul><li>Possibilidade de edição em elementos comuns do HTML </li></ul><ul><li>Log de todas as alterações efetuadas no DOM, com possibilidade de desfazê-las </li></ul>Demo
  21. 22. Canvas 2D <ul><li>Elemento que representa uma área de desenho capaz de renderizar imagens e formas 2D </li></ul>Demo Demo Demo Demo
  22. 23. WebGL (Canvas 3D) <ul><li>Elemento canvas com recursos 3D </li></ul><ul><li>Definição bastante preliminar </li></ul>
  23. 24. Elementos <audio> e <video> <ul><li>Video e audio nativos </li></ul><ul><li>Probelmas com CODECS </li></ul><ul><li>Elementos visuais temporizados (Ex: Legendas) </li></ul>Demo Demo
  24. 25. Microdata <ul><li>Elementos de semântica no conteúdo das páginas </li></ul>Demo
  25. 26. SVG <ul><li>NÃO é uma tecnologia nova </li></ul><ul><li>Fontes SVG </li></ul><ul><li>Manipulação de arquivos SVG </li></ul><ul><li>Inline embed </li></ul>Demo
  26. 27. MathML <ul><li>Escrita de fórmulas matemáticas utilizando uma sintaxe parecida com HTML </li></ul>
  27. 28. Server Sent Events <ul><li>Eventos iniciados pelo servidor, conectando ao cliente </li></ul><ul><li>Objeto EventSource </li></ul>
  28. 29. Web Workers <ul><li>Scripts como Threads separadas </li></ul>Demo
  29. 30. Application Cache <ul><li>Páginas Offline! </li></ul>Demo
  30. 31. Drag & Drop <ul><li>Capacidade de arrastar e soltar elementos </li></ul>Demo Demo
  31. 32. WebStorage <ul><li>Cache de dados locais no formato chave/valor (key/value) </li></ul>Demo
  32. 33. Web SQL Database <ul><li>Banco de dados SQL (SQLite) local acessível via script </li></ul>Demo
  33. 34. Geolocalização <ul><li>API nativa para descobrir a localização do cliente </li></ul>Demo
  34. 35. CSS 3 <ul><li>Novos background types </li></ul><ul><li>Backgrounds SVG </li></ul><ul><li>Border images </li></ul><ul><li>Transitions </li></ul><ul><li>Transformations </li></ul><ul><li>Animations </li></ul><ul><li>Medidas calculadas </li></ul><ul><li>Selectors </li></ul><ul><li>Fontes </li></ul><ul><li>Text-wrap </li></ul><ul><li>Colunas </li></ul><ul><li>Borda do texto </li></ul><ul><li>Transparência </li></ul><ul><li>Cores HSL </li></ul><ul><li>Bordas arredondadas </li></ul>Demo Demo
  35. 36. Suporte aos recursos pelos browsers atuais <ul><li>Teste </li></ul><ul><li>Internet Explorer </li></ul><ul><li>Plugins e Compatibility Layers </li></ul>Site Indicado
  36. 37. HTML 5 vs Resto <ul><li>Flash </li></ul><ul><li>JavaFX </li></ul><ul><li>Silverlight </li></ul>
  37. 38. <ul><li>? </li></ul>
  38. 39. WebSockets <ul><li>API de sockets bidirecionais full-duplex entre páginas Web e servidores </li></ul><ul><li>Frames de texto </li></ul><ul><li>Pouco overhead de rede </li></ul><ul><li>Problemas com proxy </li></ul>
  39. 40. WebSockets <ul><li>Implementações primárias </li></ul><ul><li>Padrão ainda não definido </li></ul><ul><li>http://code.google.com/p/phpwebsocket/ </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×