Post on 27-Jun-2015
description
O PODEROSO HTML 5...e outras tecnologias com menos hype
Público Alvo- WebDevelopers- WebDesigners- WebOutraCoisa- Interessados- Curiosos
Objetivo
- Novas tecnologias para a Web
- WebSockets
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
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
HYPERTEXTMARKUP
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
WHATWGWeb Hypertext Application Technology Working Group
WebDevelopers POG
Buzz Words
DHTML
AJAX
WEB 2.0 RIA
HTML5
Q: O que é HTML 5 ?A: É o que você quiser !! (WTF!)
Tags depreciadas e removidas
<acronym><applet><basefont><big><center><dir><font>
<frame><frameset><noframes><s><strike><tt><u><isindex>
Doctype, lang & charset
• <!DOCTYPE html>
• <html lang=“pt-br”>
• <meta charset=”utf-8″ />
Elementos semânticos
<article><section><aside><hgroup><header><footer>
<nav><time><mark><figure><figcaption>
Demo
Novos métodos de seleção
• getElementsByClassName
• querySelector/querySelectorAll
Forms
• Input types !!!
• color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, e url
Forms
• Atributos !!!
• required, autofocus, pattern, list, autocomplete e placeholder
Forms
• Novos elementos !!!
• <keygen>, <datalist>, <output>, <meter> e <progress>
Demo Demo Demo
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
Canvas 2D
• Elemento que representa uma área de desenho capaz de renderizar imagens e formas 2D
Demo Demo Demo Demo
WebGL (Canvas 3D)
• Elemento canvas com recursos 3D
• Definição bastante preliminar
Elementos <audio> e <video>
• Video e audio nativos• Probelmas com CODECS• Elementos visuais temporizados (Ex:
Legendas)
Demo Demo
Microdata
• Elementos de semântica no conteúdo das páginas
Demo
SVG
• NÃO é uma tecnologia nova• Fontes SVG• Manipulação de arquivos SVG• Inline embed
Demo
MathML
• Escrita de fórmulas matemáticas utilizando uma sintaxe parecida com HTML
Server Sent Events
• Eventos iniciados pelo servidor, conectando ao cliente• Objeto EventSource
Web Workers
• Scripts como Threads separadas
Demo
Application Cache
• Páginas Offline!
Demo
Drag & Drop
• Capacidade de arrastar e soltar elementos
Demo Demo
WebStorage
• Cache de dados locais no formato chave/valor (key/value)
Demo
Web SQL Database
• Banco de dados SQL (SQLite) local acessível via script
Demo
Geolocalização
• API nativa para descobrir a localização do cliente
Demo
CSS 3
• Novos background types
• Backgrounds SVG• Border images• Transitions• Transformations• Animations• Medidas calculadas
Demo
• Selectors• Fontes• Text-wrap• Colunas• Borda do texto• Transparência• Cores HSL• Bordas arredondadas
Demo
Suporte aos recursos pelos browsers atuais
• Teste• Internet Explorer• Plugins e Compatibility Layers
Site Indicado
HTML 5 vs Resto
• Flash
• JavaFX
• Silverlight
?
WebSockets
• API de sockets bidirecionais full-duplex entre páginas Web e servidores • Frames de texto• Pouco overhead de rede• Problemas com proxy
WebSockets
• Implementações primárias
• Padrão ainda não definido
• http://code.google.com/p/phpwebsocket/