SlideShare uma empresa Scribd logo
1 de 31
Offline Apps HTML5 PT Vasco Andrade e Silva
Quem sou Co-founder:  Tecnologia:  Contacto:  [email_address] @vascoas Nome:  Vasco Andrade e Silva
O que fazemos
Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML5 Spec ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
O que é uma aplicação? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Application Cache ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Application Cache - Como usar? ,[object Object],[object Object],[object Object],[object Object]
Application Cache - Testar funcionamento
Application Cache -  Criar o ficheiro MANIFEST (1/2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Application Cache -  Criar o ficheiro MANIFEST (2/2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Application Cache -  Referenciar o ficheiro MANIFEST ,[object Object],[object Object],[object Object],[object Object],Nota:  se a aplicação tiver vários ficheiros html todos devem referenciar o mesmo ficheiro manifest.
Application Cache - Configurar o servidor Web ,[object Object],[object Object]
Application Cache - Testar funcionamento ,[object Object],[object Object],[object Object],[object Object],if (window.applicationCache) {    applicationCache.addEventListener('updateready', function() {      if (confirm('An update is available. Reload now?'))        window.location.reload();    }); } Depois de uma actualização com sucesso a nova versão ainda  não está em uso  pelo que devemos detectar o evento e perguntar ao utilizador se quer usar a nova versão:
Application Cache - Suporte dos Browsers Limite armazenamento (Mac & Win) ilimitado (iOS) 10 MB (Mac & Win) 5 MB ilimitado ilimitado (com notificação) (Android) Não suportado (Mac, Win & Linux) (Win)
Web Storage - O que é? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Web Storage - Modelo interface Storage {    length ;    key (index);    getItem (key);    setItem (key, value);    removeItem (key);    clear (); }; Tempo de vida indeterminado Tempo de vida contexto de janela/tab do browser
Web Storage - Restrições acesso (1/2)
Web Storage - Restrições acesso (2/2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Local Storage - Como usar? (1/2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Local Storage - Como usar? (2/2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Demo!
Local Storage - Limitações ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Local Storage - Espaço disponível ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Session Storage ,[object Object],[object Object],[object Object],[object Object]
Web SQL Database - O que é? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
WebSQL - Storage Event ,[object Object],[object Object]
WebSQL - Exemplo ,[object Object],[object Object],[object Object],Demo!
WebSQL - Suporte dos Browsers 5 MB (> 5 MB pedido ao utilizador) Espaço Disponível (Mac & Win) 5 MB (> 5 MB pedido ao utilizador) (iOS) (Mac, Win & Linux) 5MB (verificado na v12) 10MB (verificado na 2.3.4) (Android) Não suportado (Mac, Win & Linux) (Win) Não suportado
Go Offline Desktop Offline Apps HTML5 Offline Apps ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Por onde começar ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Q & A ,[object Object],[email_address] ,[object Object],[object Object],[object Object]

Mais conteúdo relacionado

Mais procurados

Desenvolvimento web ágil com python e web2py
Desenvolvimento web ágil com python e web2pyDesenvolvimento web ágil com python e web2py
Desenvolvimento web ágil com python e web2pyRelsi Maron
 
NoSQL com Zend Framework 2
NoSQL com Zend Framework 2NoSQL com Zend Framework 2
NoSQL com Zend Framework 2Flávio Lisboa
 
IBM Web Content Management - Melhores práticas
IBM Web Content Management - Melhores práticasIBM Web Content Management - Melhores práticas
IBM Web Content Management - Melhores práticasrodrigoareis
 
O que esperar do Zend Framework 3
O que esperar do Zend Framework 3O que esperar do Zend Framework 3
O que esperar do Zend Framework 3Flávio Lisboa
 
Cakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHPCakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHPArlindo Santos
 
Laravel 5: Entenda o ambiente e a estrutura MVC
 Laravel 5: Entenda o ambiente e a estrutura MVC Laravel 5: Entenda o ambiente e a estrutura MVC
Laravel 5: Entenda o ambiente e a estrutura MVCMichael Douglas
 
Guia do F12: Chrome Developer Tools
Guia do F12: Chrome Developer ToolsGuia do F12: Chrome Developer Tools
Guia do F12: Chrome Developer ToolsLeonardo Tegon
 
Evitando a fadiga com Laravel Homestead
Evitando a fadiga com Laravel HomesteadEvitando a fadiga com Laravel Homestead
Evitando a fadiga com Laravel HomesteadDanilo Esser
 
Java, NetBeans e Orientação a Objetos
Java, NetBeans e Orientação a ObjetosJava, NetBeans e Orientação a Objetos
Java, NetBeans e Orientação a ObjetosJoão Longo
 
Apresentação zend framework 2 parte 1
Apresentação zend framework 2   parte 1 Apresentação zend framework 2   parte 1
Apresentação zend framework 2 parte 1 Edgar Dantas
 
Ionic Framework - Parte 1 - Iniciando um Projeto mais Robusto
Ionic Framework - Parte 1 - Iniciando um Projeto mais RobustoIonic Framework - Parte 1 - Iniciando um Projeto mais Robusto
Ionic Framework - Parte 1 - Iniciando um Projeto mais RobustoAlamo Saravali
 
Desafios de um desenvolvedor JSF
Desafios de um desenvolvedor JSFDesafios de um desenvolvedor JSF
Desafios de um desenvolvedor JSFRafael Ponte
 

Mais procurados (20)

Servlets e jsp
Servlets e jspServlets e jsp
Servlets e jsp
 
JavaFX 1.2
JavaFX 1.2JavaFX 1.2
JavaFX 1.2
 
Cake Php
Cake PhpCake Php
Cake Php
 
Desenvolvimento web ágil com python e web2py
Desenvolvimento web ágil com python e web2pyDesenvolvimento web ágil com python e web2py
Desenvolvimento web ágil com python e web2py
 
Curso de JSP
Curso de JSPCurso de JSP
Curso de JSP
 
Web Offline
Web OfflineWeb Offline
Web Offline
 
NoSQL com Zend Framework 2
NoSQL com Zend Framework 2NoSQL com Zend Framework 2
NoSQL com Zend Framework 2
 
IBM Web Content Management - Melhores práticas
IBM Web Content Management - Melhores práticasIBM Web Content Management - Melhores práticas
IBM Web Content Management - Melhores práticas
 
Mean Stack
Mean StackMean Stack
Mean Stack
 
O que esperar do Zend Framework 3
O que esperar do Zend Framework 3O que esperar do Zend Framework 3
O que esperar do Zend Framework 3
 
Cakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHPCakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHP
 
Laravel 5: Entenda o ambiente e a estrutura MVC
 Laravel 5: Entenda o ambiente e a estrutura MVC Laravel 5: Entenda o ambiente e a estrutura MVC
Laravel 5: Entenda o ambiente e a estrutura MVC
 
jsp-intro
jsp-introjsp-intro
jsp-intro
 
Guia do F12: Chrome Developer Tools
Guia do F12: Chrome Developer ToolsGuia do F12: Chrome Developer Tools
Guia do F12: Chrome Developer Tools
 
Java Web 1 Introducao
Java Web 1 IntroducaoJava Web 1 Introducao
Java Web 1 Introducao
 
Evitando a fadiga com Laravel Homestead
Evitando a fadiga com Laravel HomesteadEvitando a fadiga com Laravel Homestead
Evitando a fadiga com Laravel Homestead
 
Java, NetBeans e Orientação a Objetos
Java, NetBeans e Orientação a ObjetosJava, NetBeans e Orientação a Objetos
Java, NetBeans e Orientação a Objetos
 
Apresentação zend framework 2 parte 1
Apresentação zend framework 2   parte 1 Apresentação zend framework 2   parte 1
Apresentação zend framework 2 parte 1
 
Ionic Framework - Parte 1 - Iniciando um Projeto mais Robusto
Ionic Framework - Parte 1 - Iniciando um Projeto mais RobustoIonic Framework - Parte 1 - Iniciando um Projeto mais Robusto
Ionic Framework - Parte 1 - Iniciando um Projeto mais Robusto
 
Desafios de um desenvolvedor JSF
Desafios de um desenvolvedor JSFDesafios de um desenvolvedor JSF
Desafios de um desenvolvedor JSF
 

Semelhante a Html5 pt - Offline Apps

Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaAlexandre Tarifa
 
T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)Carlos Santos
 
JSF e outras tecnologias Java Web - IMES.java
JSF e outras tecnologias Java Web - IMES.javaJSF e outras tecnologias Java Web - IMES.java
JSF e outras tecnologias Java Web - IMES.javaEduardo Bregaida
 
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem DorPlay Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem DorAllyson Barros
 
Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1michellobo
 
LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04Carlos Santos
 
(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScriptCarlos Santos
 
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
Desmistificando web2py - #TDC2011
Desmistificando web2py - #TDC2011Desmistificando web2py - #TDC2011
Desmistificando web2py - #TDC2011Bruno Rocha
 
Analise frameworks php
Analise frameworks phpAnalise frameworks php
Analise frameworks phpIgor Moura
 
Java Web Dev Introdução
Java Web Dev IntroduçãoJava Web Dev Introdução
Java Web Dev IntroduçãoMarcio Marinho
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaDiego Cavalca
 
Desenvolvimento Web com JSF
Desenvolvimento Web com JSFDesenvolvimento Web com JSF
Desenvolvimento Web com JSFDalton Valadares
 

Semelhante a Html5 pt - Offline Apps (20)

Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
 
Curso asp - basico
Curso   asp - basicoCurso   asp - basico
Curso asp - basico
 
T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)
 
JSF e outras tecnologias Java Web - IMES.java
JSF e outras tecnologias Java Web - IMES.javaJSF e outras tecnologias Java Web - IMES.java
JSF e outras tecnologias Java Web - IMES.java
 
Cakephp 2.0 - O que mudou
Cakephp 2.0 - O que mudouCakephp 2.0 - O que mudou
Cakephp 2.0 - O que mudou
 
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem DorPlay Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
 
Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1
 
LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04
 
Web Sphere
Web SphereWeb Sphere
Web Sphere
 
(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript
 
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
ASP.NET - Conceitos Básicos
ASP.NET - Conceitos BásicosASP.NET - Conceitos Básicos
ASP.NET - Conceitos Básicos
 
Desmistificando web2py - #TDC2011
Desmistificando web2py - #TDC2011Desmistificando web2py - #TDC2011
Desmistificando web2py - #TDC2011
 
Analise frameworks php
Analise frameworks phpAnalise frameworks php
Analise frameworks php
 
Java Web Dev Introdução
Java Web Dev IntroduçãoJava Web Dev Introdução
Java Web Dev Introdução
 
Tutorial JSF 2.0 (2012)
Tutorial JSF 2.0 (2012)Tutorial JSF 2.0 (2012)
Tutorial JSF 2.0 (2012)
 
Sapo Sessions PHP
Sapo Sessions PHPSapo Sessions PHP
Sapo Sessions PHP
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
Desenvolvimento Web com JSF
Desenvolvimento Web com JSFDesenvolvimento Web com JSF
Desenvolvimento Web com JSF
 

Html5 pt - Offline Apps

  • 1. Offline Apps HTML5 PT Vasco Andrade e Silva
  • 2. Quem sou Co-founder:  Tecnologia:  Contacto:  [email_address] @vascoas Nome:  Vasco Andrade e Silva
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9. Application Cache - Testar funcionamento
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15. Application Cache - Suporte dos Browsers Limite armazenamento (Mac & Win) ilimitado (iOS) 10 MB (Mac & Win) 5 MB ilimitado ilimitado (com notificação) (Android) Não suportado (Mac, Win & Linux) (Win)
  • 16.
  • 17. Web Storage - Modelo interface Storage {   length ;   key (index);   getItem (key);   setItem (key, value);   removeItem (key);   clear (); }; Tempo de vida indeterminado Tempo de vida contexto de janela/tab do browser
  • 18. Web Storage - Restrições acesso (1/2)
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28. WebSQL - Suporte dos Browsers 5 MB (> 5 MB pedido ao utilizador) Espaço Disponível (Mac & Win) 5 MB (> 5 MB pedido ao utilizador) (iOS) (Mac, Win & Linux) 5MB (verificado na v12) 10MB (verificado na 2.3.4) (Android) Não suportado (Mac, Win & Linux) (Win) Não suportado
  • 29.
  • 30.
  • 31.

Notas do Editor

  1. As linhas de comentários começam por #. Quando se actualizam ficheiros é necessário criar uma nova versão do manifest. Para o fazer sem alterar a estrutura utiliza-se a linha de comentário: # 2011-07-07:v1 que deverá ser actualizada depois de actualizações aos ficheiros que fazem parte da cache da aplicação.
  2. O Tempo de Vida de um contexto de browser não está bem definido, sendo que existe uma nota sobre sessões a que se possa fazer restart.
  3. QUOTA_EXCEEDED_ERR: Um bloco try/catch à volta do código de armazenamento é suficiente para capturar este cenário e "recuperar" (a definição varia entre aplicações e pode passar por apagar dados desnecessários/antigos)
  4. Caso de uso: [Session Storage] is designed for scenarios where the user is carrying out a single transaction, but could be carrying out multiple transactions in different windows at the same time. Cookies don't really handle this case well. For example, a user could be buying plane tickets in two different windows, using the same site. If the site used cookies to keep track of which ticket the user was buying, then as the user clicked from page to page in both windows, the ticket currently being purchased would "leak" from one window to the other, potentially causing the user to buy two tickets for the same flight without really noticing.
  5. // Adaptado de  http://html5demos.com/database-rollback var db =  openDatabase( 'foo', '1.0', 'foo', 2 * 1024 ) ;  db.transaction( function (tx) {      tx.executeSql( 'CREATE TABLE IF NOT EXISTS foo (id unique, text)' );      tx.executeSql( 'INSERT INTO foo (id, text) VALUES (1, "foobar")' );     alert('foo created and row inserted.');    } ); db.transaction( function (tx) {      tx.executeSql( 'DROP TABLE foo' );      tx.executeSql( 'INSERT INTO foo (id, text) VALUES (1, "foobar")' );    } ,  function (err) {     alert('should be rolling back caused by: ' + err.message);    } ); db.transaction( function (tx) {    tx.executeSql( 'SELECT * FROM foo', [], function (tx, results) {       alert('found rows (should be 1): ' + results.rows.length);      } ,  function (tx, err) {       alert('failed (rollback failed): ' + err.message);      } );   } );
  6. Opera - 4MB/pedido para aumentar armazenamento