ÍNDICE GERAL 0. INTRODUÇÃO... 1 0.1 O que posso encontrar neste livro... 1 0.2 Requisitos... 1 0.3 A quem se dirige este livro?... 2 0.4 Código e samples... 2 0.5 Convenções... 3 0.6 Organização do livro... 3 0.7 Suporte... 7 1. INTRODUÇÃO AO HTML... 9 1.1 Um pouco de história... 9 1.2 Princípios associados ao HTML5... 13 1.3 Afinal, o que é o HTML5?... 14 1.4 Estrutura básica de uma página HTML... 15 1.4.1 Elementos e atributos... 16 1.4.2 Árvore do DOM (Document Object Model)... 19 1.4.3 Utilização de Scripts... 20 1.4.4 Utilização de CSS... 25 Conclusão... 27 2. MELHORIAS SEMÂNTICAS... 29 2.1 Semântica: o que é e porque precisamos dela?... 29 2.2 Uma página HTML4... 30 2.3 Página convertida para HTML5... 32 2.3.1 Doctype... 32 2.3.2 Elemento HTML... 33 2.3.3 Elemento head... 33 2.3.4 Alterações no elemento Body... 39 2.3.5 Página final... 46 2.3.6 Aplicação de estilos CSS... 48 Conclusão... 50 3. CANVAS... 51 3.1 Introdução ao elemento Canvas... 51 3.2 Utilização do elemento Canvas... 52
X HTML5 3.2.1 Deteção do suporte ao elemento... 53 3.2.2 Utilização de conteúdo de fallback... 54 3.2.3 Sistema de coordenadas... 55 3.2.4 Figuras simples... 56 3.2.5 Paths... 59 3.2.6 Transformações... 66 3.2.7 Utilização de texto... 70 3.2.8 Gradientes... 73 3.2.9 Imagens... 75 3.2.10 Aplicação de sombras... 81 3.2.11 Manipulação de pixéis... 83 3.2.12 Animações... 89 Conclusão... 95 4. SVG... 97 4.1 Introdução ao SVG... 97 4.1.1 Uso de ficheiros SVG externos... 98 4.1.2 Elemento SVG... 100 4.1.3 Interação através de script e CSS... 100 4.1.4 Algumas observações gerais sobre SVG... 103 4.2 Figuras simples... 103 4.3 Viewport... 105 4.4 Preenchimentos e contornos... 107 4.4.1 Gradientes... 109 4.4.2 Padrões... 113 4.5 Paths... 114 4.6 Texto... 118 4.7 Filtros... 124 4.8 Transformações... 126 4.8.1 Atributo transform... 126 4.8.2 Atributo viewbox... 129 4.9 Animações... 131 4.9.1 Uso de JavaScript... 131 4.9.2 Uso de animate... 132 Conclusão... 136 5. VÍDEO E ÁUDIO...137 5.1 Introdução aos elementos vídeo e Audio... 137 5.1.1 Vídeo, áudio, contentores e codecs... 137 5.1.2 Codificar vídeo e áudio... 142 5.2 Elemento Vídeo... 143
ÍNDICE GERAL XI 5.2.1 Detetar o suporte ao elemento vídeo... 143 5.2.2 Carregamento de um vídeo... 146 5.3 Interface HtmlMediaElement... 151 5.4 Vídeo e canvas... 153 5.5 Elemento Audio... 155 Conclusão... 156 6. GEOLOCALIZAÇÃO...157 6.1 Introdução à geolocalização... 157 6.2 Coordenadas fornecidas pelo serviço... 157 6.3 Como o Browser obtém as coordenadas... 158 6.3.1 Triangulação por endereço IP... 159 6.3.2 Triangulação por GPS... 159 6.3.3 Triangulação por WI-FI... 159 6.3.4 Triangulação por GSM... 160 6.3.5 Informação disponibilizada pelo utilizador... 160 6.4 Detetar o suporte nos browsers... 160 6.5 Obter as coordenadas atuais... 161 6.6 Tratamento de erros... 163 6.7 Influenciar a obtenção de coordenadas... 165 6.8 Atualização das coordenadas de localização... 166 6.9 Geolocalização no Internet Explorer 8... 167 6.10 Exemplo concreto... 168 Conclusão... 171 7. WEB STORAGE...173 7.1 Um pouco de história... 173 7.2 Detetar o suporte no browser... 174 7.3 Objeto Storage... 176 7.3.1 Deteção de alterações... 179 7.3.2 Análise da informação de storage... 180 7.3.3 Preocupações com a segurança... 181 7.4 Para além do storage... 181 7.4.1 Web SQL Database... 181 7.4.2 Indexed DB... 185 Conclusão... 193 8. FORMULÁRIOS WEB...195 8.1 Construção de um formulário... 195 8.2 Deteção de formulários em HTML5... 197
XII HTML5 8.3 Novos atributos... 198 8.3.1 Placeholder... 198 8.3.2 Autofocus... 199 8.3.3 Autocomplete... 201 8.3.4 List e datalist... 202 8.3.5 Required... 203 8.3.6 Multiple... 203 8.4 Novos controlos... 203 8.4.1 Endereços de email... 204 8.4.2 URL... 205 8.4.3 Números... 206 8.4.4 Sliders... 208 8.4.5 Datas e horas... 208 8.4.6 Pesquisa... 210 8.4.7 Telefone... 211 8.4.8 Cores... 211 8.5 Validação de formulários... 211 8.5.1 Objeto ValidityState... 212 8.5.2 Feedback na validação... 213 8.5.3 Cancelar a validação... 216 Conclusão... 217 9. MICRODATA...219 9.1 Um pouco de história... 219 9.2 Criação de um vocabulário personalizado... 221 9.2.1 Adição de microdata com HTML fixo... 224 9.3 Vocabulários existentes... 225 9.4 Microdata no mundo real... 226 9.4.1 Interação a partir de script... 226 9.4.2 Interação com motores de pesquisa... 227 Conclusão... 228 10. APLICAÇÕES OFFLINE...229 10.1 Principais características... 229 10.2 Deteção do suporte offline... 230 10.3 Ficheiro de manifesto... 231 10.3.1 Conteúdo do ficheiro de manifesto... 232 10.3.2 Secção Cache... 233 10.3.3 Secção Network... 234 10.3.4 Secção Fallback... 235
ÍNDICE GERAL XIII 10.3.5 Um exemplo especial... 238 10.4 Fluxo de eventos associado ao caching... 239 10.4.1 Atualização do ficheiro de manifesto... 241 10.5 Utilização de scripting... 242 10.5.1 Verificar o estado do browser... 244 Conclusão... 244 11. COMUNICAÇÃO...245 11.1 Introdução à comunicação entre documentos... 245 11.1.1 Um exemplo teórico: comunicação entre uma página e uma iframe... 247 11.1.2 Cross-document e suporte dos browsers... 248 11.1.3 Exemplo prático... 249 11.2 XMLHttpRequest... 254 11.2.1 Recursos cross-origin... 254 11.2.2 Eventos de progresso... 255 11.2.3 Suporte dos browsers... 256 11.2.4 Um exemplo prático... 258 11.3 Eventos no lado servidor... 260 11.3.1 Suporte dos browsers... 263 11.3.2 Um exemplo prático... 263 11.3.3 Algumas observações finais... 265 Conclusão... 266 12. WEB SOCKETS...267 12.1 Introdução aos Web Sockets... 267 12.1.1 Deteção do suporte dos browsers... 268 12.1.2 Objeto WebSocket... 268 12.1.3 Handshaking... 269 12.2 Um exemplo prático... 273 12.2.1 Construção do servidor... 274 12.2.2 Construção da página... 282 12.3 Outro exemplo: utilização de WCF... 284 Conclusão... 287 13. WEB WORKERS...289 13.1 Introdução às Web Workers... 289 13.2 Suporte dos browsers... 290 13.3 Objeto Worker... 291 13.3.1 Importação de scripts... 296 13.3.2 Sub-workers... 297
XIV HTML5 13.4 Objeto Sharedworker... 297 13.4.1 Utilização de várias shared workers... 302 Conclusão... 303 14. HTML5 NO MUNDO REAL... 305 14.1 Projeto Ace... 305 14.2 Projeto VideoJS... 306 14.3 Projeto NOVNC... 307 14.4 Projeto SketchPad... 308 14.5 Projeto Google PACMAN... 308 14.6 Outros projetos... 310 Conclusão... 310 BIBLIOGRAFIA...311 ÍNDICE REMISSIVO...313