Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello

  • 4,644 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
4,644
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
58
Comments
0
Likes
1

Embeds 0

No embeds

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/