Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello

  • 5,456 views
Uploaded 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.

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,456
On Slideshare
5,285
From Embeds
171
Number of Embeds
2

Actions

Shares
Downloads
58
Comments
0
Likes
1

Embeds 171

http://guilhermepilotti.com 169
http://feeds.feedburner.com 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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