Desenvolvimento de Sistemas Web - HTML5 - Introdução

UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA
CURSO DE CIÊNCIA DA COMPUTAÇÃO
DESENVOLVIMENTO DE SISTEMAS WEB – 2015.2
Fábio M. Pereira
(fmourapereira@yahoo.com.br)

Roteiro
• Introdução
• Os Componentes de Uma Aplicação HTML5
• Criando Nossa Primeira Aplicação
• Modelos HTML
• Criando Nossa Primeira Aplicação (continuação)
• Guardando o Estado da Aplicação
• Criando Nossa Primeira Aplicação (continuação)
• Referências

Introdução
• O HTML (Hypertext Markup Language) foi criado no início dos
anos 90
• JavaScript (apesar do nome não é nada parecida com a
linguagem de programação Java) foi desenvolvida por uma
empresa chamada Netscape
– Ela marca o início do script client-side embutido no navegador Web,
movendo HTML de um conteúdo estático para algo um pouco mais
complexo
• JavaScript não faz parte da especificação HTML central, mas a
associação entre navegadores, HTML e JavaScript é tão
próxima que não faz sentido mantê-la em separado
• A especificação HTML5 assume que JavaScript está disponível
e precisamos de JavaScript para usar as novas características
mais interessantes adicionadas pelo HTML5

Fim da “Batalha dos Navegadores”
• Houve um período no mercado de navegadores onde as
companhias (Microsoft e Netscape) competiam
adicionando características únicas a seus navegadores
– A ideia era fazer com que desenvolvedores Web adotassem
apenas um navegador em particular, fazendo com que os
usuários preferissem um determinado navegador em vez de
outro
• Mas os desenvolvedores optaram por utilizar
características que estavam disponíveis em todos os
navegadores
• No final, a Microsoft chegou a ser condenada por
violações antitruste por distribuir o Internet Explorer de
graça, em conjunto com o SO Windows

Fim da “Batalha dos Navegadores”
• O fim da Netscape e as penalidades dadas à Microsoft
acabaram com a guerra dos navegadores
– Um novo cenário de navegadores Web baseados em padrões
surgiu
– A especificação HTML foi aprovada e a adoção do padrão se
tornou uma norma
• Hoje em dia navegadores competem pelo nível de
conformidade com as normas
– O que tornou as coisas muito mais fáceis para desenvolvedores
e usuário

O Domínio dos Plugins
• Plugins têm sido uma boa coisa para a Web:
– Eles permitem que empresas forneçam suporte a características
avançadas e conteúdo rico que não pode ser alcançado de
maneira fácil somente com HTML
• Muitos plugin foram largamente adotados e com
características muito avançadas
– É o caso do Adobe Flash, onde muitos sites são completamente
implementados em Flash
• Com os plugins, o navegador e o HTML passam a
funcionar somente como um container
– Posição nada confortável para criadores de navegadores porque
coloca o controle nas mãos do fabricante do plugin

O Domínio dos Plugins
• Este é um dos principais motivos que levaram ao
desenvolvimento do HTML5
• Duas empresas em particular estão se afastando do
Flash:
– Apple que não dá suporte ao Flash no iOS
– Microsoft que desabilitou o Flash a partir da versão do Internet
Explorer para o Windows 8

HTML Semântica
• Versões iniciais do HTML não se preocuparam em separar
o significado do conteúdo, da maneira como ele é
apresentado
– Se quiséssemos indicar que uma parte de um texto era
importante, aplicávamos um elemento HTML para colocar o
texto em negrito
– Ficava a critério do usuário fazer a associação de que um
conteúdo em negrito é um conteúdo importante
– Isto é uma coisa que humanos fazem facilmente mas que para
agentes autômatos é muito difícil
• O processamento automático de conteúdo se tornou
importante desde que o HTML foi criado

HTML5
• HTML5 é literalmente uma teia de padrões inter-
relacionados
– Uma boa ideia pois navegadores podem rapidamente
implementar características maduras, enquanto outras
continuam a se desenvolver
– Ruim pois desenvolvedores têm que verificar se os navegadores
dão suporte a cada característica que desejem colocar em uso

Principais Características de HTML5
• Do núcleo de HTML5:
– Fazem parte da versão da especificação oficial da W3C
– Inclui novos elementos de semântica
– Novos e melhorados componentes (widgets) para formulários
– Suporte a áudio e vídeo
– Tela (canvas) para desenho com JavaScript
• Características que poderão vir a ser HTML5:
– Saltam a especificação original e dão suporte ao
desenvolvimento de aplicações Web ricas
– Armazenamento de dados local (local data storage)
– Aplicações offline
– Mensagens

Principais Características de HTML5
• Características algumas vezes chamadas de HTML5:
– Próxima-geração de características que são geralmente
agrupadas com HTML5, mesmo não fazendo parte do padrão
– CSS3
– Localização geográfica (geolocation)

Os Três Princípios de HTML5
• Não “quebre” a Web
– Padrões não devem introduzir mudanças que façam páginas
deixarem de funcionar, o que felizmente, raramente acontece
– Também significa que um padrão não deve mudar as regras de
maneira a, no processo, tornar uma página Web obsoleta
– Por exemplo, XHTML 2 quebrou a Web pois demandou de
imediato uma mudança na forma como páginas Web são
escritas – páginas antigas ainda funcionam por questão de
compatibilidade, mas se quisermos atualizar uma página,
gastaremos horas corrigindo os “erros” que XHTML 2 baniu
– Por outro lado, HTML tem uma visão diferente – tudo que era
válido antes de HTML5 permanece válido em HTML5, ou seja,
tudo que era válido em HTML 4.01 permanece válido em
HTML5

• Pavimente os “caminhos de vaca (cowpaths)”
– Um cowpath é um caminho difícil que leva as pessoas de um
ponto a outro mas que continua sendo usado – pode não ser a
melhor forma de se locomover, mas em algum ponto é a
solução mais prática
– HTML5 padronizou estas técnicas não oficiais mas largamente
utilizadas
– Por exemplo, a habilidade de arrastar e soltar nos navegadores,
que apesar de inicialmente criada no IE 5 e hoje adotada em
todos os navegadores, é confusa e muito complicada
– Isto levou alguns projetistas a reclamarem: “HTML não apenas
encoraja mal comportamento, ele os define”

• Seja Prático
– Mudanças devem ter um objetivo prático
– Quanto mais existente a mudança, maior precisa ser a recompensa
em realizá-la
– Desenvolvedores Web podem preferir padrões bem projetados,
consistentes e sem particularidades, mas isto não é motivo suficiente
para mudar uma linguagem que foi utilizada para criar bilhões de
páginas
– Por exemplo, o terceiro Web site mais poupular é o YouTube, mas por
causa do HTML não dar suporte a transmissão de vídeo antes do
HTML5, YouTube teve que utilizar o plugin Flash. Apesar de funcionar
bem em grande parte de computadores conectados à Web, existem
alguns computadores, como aqueles de empresas que não permitem
a instalação do Flash, e dispositivos móveis (iPhone, iPad, Kindle), que
não dão suporte ao Flash
– Então seria uma boa opção estender o padrão HTML para dar suporte
direto a uma das maneiras mais fundamentais para as pessoas
acessarem páginas Web hoje em dia – assistir vídeos

Os Componentes de Uma Aplicação
HTML5
• Aplicações escritas em HTML5 são como aplicações
escritas em qualquer outra linguagem de programação
– Existe certa quantidade de infraestrutura necessária para ser
colocada antes que possamos iniciar o trabalho
• Considerando que parte do desenvolvimento de
aplicações consiste de repetição de coisas básicas cada
vez que iniciamos o processo, seria interessante a
construção de um modelo de aplicação para iniciarmos
rapidamente sem ter que “reinventar a roda” todas as
vezes
• Iremos então, criar e utilizar um modelo como base para
o desenvolvimento de todas as nossas aplicações

HTML5
• Toda aplicação Web inicia com três componentes: HTML,
CSS e JavaScript
• Poderíamos colocá-los em um único arquivo, o que é
aceitável para muitas aplicações simples, mas como
iremos tratar do desenvolvimento de aplicações reais,
iremos criar três arquivos diferentes, um para cada
componente, e colocá-los em uma pasta chamada
template
– Devemos nomeá-los como: app.html, app.css e app.js

HTML5

Editores HTML5
• Ferramentas de software que ajudam desenvolvedores a
projetar Web sites e páginas HTML
• Apesar de podermos utilizar qualquer editor disponível na
Internet para editar Web sites, editores HTML oferecem maior
funcionalidade e trabalham com tecnologias como CSS, XML e
JavaScript
• Mercury Editor (http://jejacks0n.github.io/mercury/)
• Rendra: Online HTML5 Editor (http://rendera.heroku.com/)
• Maqetta (http://maqetta.org/)
• Aptana Studio (http://aptana.com/)
• Aloha Editor (http://www.aloha-editor.org/)
• Blue Griffon (http://bluegriffon.org/)
• Ver mais em http://codegeekz.com/best-html5-editors/

Infraestrutura de Pastas de Uma
Aplicação
• Todos os arquivos na pasta raiz da aplicação
• Pasta lib com bibliotecas JavaScript de terceiros que a
aplicação pode precisar
– Iremos sempre utilizar a biblioteca jQuery (jquery.com) –
biblioteca JavaScript de código aberto mais popular
• Se existirem outros recursos, como imagens ou arquivos
de áudio, deveremos colocá-los nas pastas images e
audio, respectivamente:

Criando o Arquivo HTML
• O primeiro componente a ser criado é o arquivo HTML
base app.html
– Iremos mantê-lo o mais simples quanto possível
• Não deve existir nenhum bloco de estilo ou script nele
– Manter markup, estilo e comportamento separados tornará a
aplicação mais fácil de corrigir e manter
– Podemos, por exemplo, mudar completamente o estilo de uma
interface do usuário de uma aplicação modificando o arquivo
CSS sem precisar tocar na sua funcionalidade
• O arquivo HTML irá incluir os arquivos CSS e JavaScript,
bem como a biblioteca jQuery, e definir uma estrutura
simples do corpo do documento que a maioria das
aplicações irá utilizar

Considerações
• Em HTML5 a declaração do tipo de documento é bem
mais simples que em versões anteriores que pareciam
com:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
• Em HTML5:
<!DOCTYPE html>
• Em HTML5, o elemento div é um container genérico
(marcador de seção) indicado para quando não houver
um elemento de valor semântico específico para o
conteúdo a ser marcado
• HTML5 possui um conjunto completo de novos
elementos semânticos com maior significado que uma
tag <div>

Considerações
• Como iremos escrever aplicações e não páginas de
conteúdo, não iremos focar muito nestes tipos de
elementos
• Visão geral de algum dos elementos semânticos mais
úteis:
– <header>: define um grupo de títulos ou o cabeçalho de uma
determinada seção
– <footer>: define o rodapé das seções ou da página
– <nav>: define um grupo ou bloco de links de navegação
– <aside>: define um elemento lateral que pode conter blocos
de navegação (NAVs), citações e outras informações que
costumamos colocar em uma sidebar

Considerações
• Visão geral de algum dos elementos semânticos mais
úteis (cont.):
– <article>: define a área onde há um artigo, texto, redação,
conteúdo e etc.
– <section>: define um bloco ou um grupo de um assunto
específico. É importante entender que a section agrupa diversos
elementos que tenham relação entre si. Por exemplo, se há uma
área no site que há links, conteúdo, imagens e etc de um
assunto em comum, você agrupará esses elementos com uma
section. Nesse caso, ele entrou no lugar daquele div que
fazíamos para dividir grandes blocos de assuntos em comum

Considerações
• Alguns elementos e atributos existentes em versões
anteriores agora não estão presentes em HTML5
• A maioria deles estão relacionados com layouts e fontes,
incluindo <big>, <center>, <font>, <strike> e <u>
• Elementos obsoletos como <frame> and <applet>
também foram eliminados

• Olhando para o conteúdo do elemento <body> em
nosso exemplo:
– <div id = “app”>: empacota o código da aplicação, outros
elementos, como navegação ou que não estejam relacionados
com a aplicação, devem estar do lado de fora deste elemento

• Dentro do elemento app temos mais três elementos:
– <header>: irá conter o nome da aplicação, como em uma barra
de título (não confundir com o elemento <title> da seção
<head> do documento)
– <div id=“main”>: onde o código para a parte principal da
aplicação será colocado
– <footer>: será utilizado como uma barra de status para
mostrar a situação da aplicação

Criando o Arquivo CSS
• O arquivo CSS base, chamado app.css irá conter todos os
estilos básicos que serão usados pela aplicação, como
fontes e cores padrão
• A primeira parte do arquivo CSS contém alguns estilos de
elementos do documento que atribuem a aparência (look
and feel) básica

• Olhando para o estilo aplicado ao corpo do documento
que irá influenciar os outros elementos:
– O tamanho da fonte foi atribuído em 1em em vez de um
tamanho fixo em pixels, usando o tamanho de fonte padrão do
navegador (tipicamente 1em = 16px por padrão na maioria dos
navegadores)
– Podemos então basear outras medidas usando ems ou
percentual, dando um layout mais reativo e tornando a
mudança mais fácil posteriormente
– Depois removemos todo os preenchimentos e margens de
todos os elementos div, atribuindo 0 aos mesmos
– A seguir mudamos o cursor para um apontador quando ele
estiver sobre um botão
– Finalmente, o seletor de classe .hidden, que pode ser
adicionado a qualquer elemento quando quisermos ocultá-lo

• Iremos finalizar o arquivo CSS com alguns estilos para os
elementos app e main
– Iremos atribuir margens, preenchimento e cores

Criando o Arquivo JavaScript
• “use strict”: informa ao JavaScript para usar padrões
mais novos e precisos
– Por exemplo, em versões mais antigas de JavaScript era possível
usar um nome de variável sem declará-lo primeiro através da
palavra-chave var
– Isto tinha o efeito de torná-la uma variável global associada ao
objeto window
– Quando “use strict” é definido, ocorreria um erro se
tentássemos fazê-lo
– O objetivo é fazer com que tenhamos menos erros em nossos
programas

• Em seguida definimos o objeto da aplicação principal
myApp
– Existem várias maneiras de definir um objeto em JavaScript,
incluindo utilizando literais de objeto e funções construtoras
• Utilizar literais de objetos é a maneira mais simples para
definição de um objeto, mas estes objetos são criados
assim que o JavaScript é carregado, normalmente antes
do DOM estar pronto
• Aqui mostramos como o nosso objeto seria criado como
um literal de objeto:

• Considerando que a nossa aplicação irá manipular o DOM
(Document Object Model), não iremos criar o objeto até
que o DOM esteja pronto
– Por isso utilizamos o construtor de função para criação de um
objeto
• O DOM é a representação interna da linguagem HTML – é
uma árvore hierárquica de objetos que representam
elementos HTML

Método privado
Método público

• Finalmente precisamos de um manipulador de eventos
document-ready
• O evento é disparado quando a página é carregada e a
hierarquia DOM for construída completamente
• Existem duas formas de adicionar o manipulador de
eventos usando jQuery
• A primeira, mais verbosa é:
$document.read(handler);
• Porém, como é provavelmente o evento mais básico e
importante que iremos precisar implementar, jQuery
fornece uma forma mais curta e simples:
$(handler);

• O manipulador de eventos é uma parte importante do
código – é o equivalente à função main() em outras
linguagens de programação como C, C++, C# e Java
• Aqui está nosso manipulador de eventos:

• Uma instância do objeto da
aplicação principal é criado e
atribuído à variável global
chamada app associada ao
objeto window
• Como ela é global, pode ser
acessada através de toda a
aplicação
• Por último, o método
start() é chamado

O Identificador Cifrão ($)
• O sinal de cifrão é um apelido para um objeto jQuery
– Podemos substituir o sinal por jQuery e irá funcionar da mesma
maneira
• jQuery é a mais popular biblioteca JavaScript, que no seu nível
mais básico fornece funções para acessar e manipular o DOM
• Ela também oferece várias outras funcionalidades, como
manipulação de eventos, animações e suporte a AJAX
• Por outro lado, ela esconde muitas diferenças entre
navegadores, fazendo com que nos concentremos mais na
programação e menos em como o código irá funcionar em
cada navegador
• Ela é para JavaScript o que o biblioteca System é para Java e
C#

• Em sua maior parte, o padrão de jQuery é selecionar um ou
mais elementos e realizar alguma ação ou recuperar dados
deles
• Por exemplo, esta é uma seleção jQuery que recupera todos
os elementos div do DOM:
$("div")
• A consulta seguinte poderia capturar o elemento que tem o
ID main:
$("#main")
• O sinal de # seleciona elementos com uma ID específica e o
ponto (.) seleciona elementos que têm uma classe específica
• O exemplo a seguir seleciona todos os elementos que são
descendentes do elemento cuja ID é main e tem uma classe
selected:
$(#main .selected")

• Após selecionarmos um ou mais elementos, podemos
realizar alguma ação sobre eles
• Por exemplo, a linha de código a seguir irá esconder
todos os elementos retornados da consulta anterior:
$(#main .selected").hide()

Construindo a Nossa Primeira Aplicação
• Iremos construir uma aplicação de “lista de tarefas” que
utilizará HTML5 e CSS3
• Características da aplicação:
– Deverá permitir que o usuário rapidamente digite em um ou mais
nomes de tarefas e as apresente em uma lista
– O usuário deverá ser capaz de manipular facilmente as tarefas, as
editando, removendo ou movendo para cima ou para baixo na ordem
da lista
– A aplicação deverá guardar as tarefas digitadas, então quando o
usuário retornar, ele poderá continuar onde as deixou
– A interface deverá permitir que a aplicação seja utilizada em
dispositivos distintos com diferentes tamanhos de tela
– O desenvolvimento será progressivo com o desenvolvimento de
bibliotecas JavaScript que poderão ser reutilizadas em diferentes
projetos

Criando a Lista de Tarefas
• Iremos chamar a aplicação de Task at Hand, ou
Task@Hand
• Primeiro faça uma cópia da pasta modelo e a renomeie
para taskAtHand
• Também renomeie os aquivos .html, .css e .js para
taskAtHand
• A primeira coisa que precisamos fazer é modificar o
arquivo HTML:
– Modificar o título e nomes dos arquivos CSS e JS no elemento
<head>

• A seguir iremos modificar a seção <body>:
– Primeiro o nome da aplicação no elemento <header>
– Em seguida adicionaremos um campo de entrada de texto no
elemento <div id = “app”>, onde o usuário poderá digitar o
nome da tarefa
– Finalmente adicionaremos uma lista vazia de tarefas, para isso
utilizaremos o elemento de lista não ordenada <ul>

• O atributo placeholder do elemento input mostra um
texto no campo até que o usuário comece a digitar algo
– Isto mostra uma dica para que o usuário saiba o que deve
digitar no campo
– Pode ser utilizado em elementos de entrada que permitem que
o usuário entre com um texto
• No arquivo JavaScript iremos inicialmente renomear o
objeto da aplicação para TaskAtHandApp:

• Quando o usuário terminar de entrar com um nome de
tarefa e pressionar a tecla Enter, iremos criar um novo
item e adicioná-lo à lista
• A primeira coisa a fazer é adicionar um manipulador de
eventos ao campo de texto para que sejamos notificados
quando uma tecla for pressionada
– Este código será adicionado ao método start() do objeto da
aplicação

Descrevendo o Código...
• Primeiro, buscamos o campo de texto usando uma
seleção jQuery em sua ID, new-task-name
• Então adicionamos um manipulador de evento
keypress(), passando uma função que será executada
todas as vezes que o evento for disparado
• jQuery passa um parâmetro para a função de
manipulação do evento, que é um objeto do evento
keypress
– Este objeto contém um campo chamado which que contém o
código do caractere da tecla que foi pressionada – no nosso
caso a tecla Enter, cujo código é 13

• Quando a tecla Enter for pressionada, o método addTask()
(definido a seguir) será chamado, e então retornado false
– A razão para retornar false é que não queremos que o sistema
execute a ação padrão (executada por alguns navegadores quando a
tecla Enter é pressionada)
• Em seguida adicionamos uma chamada de função no final de
keypress() para fazer com que o foco retorne para o
campo de texto
• Você pode estar se perguntando como isto funciona:
chamamos uma função de uma função?
– Isto é chamado encadeamento de funções e é talvez uma das mais
úteis características de jQuery
– A maioria dos métodos jQuery retorna um apontador para o próprio
objeto, assim podemos realizar mais ações em uma única linha de
código

O Método addTask()
• O método irá adicionar um novo item ao elemento <ul>
em nosso HTML:

• Primeiro, pegamos o valor do campo de texto new-task-
name usando o método jQuery val(), que é utilizado
para pegar valores de campos de entrada
• Apenas para garantir que o usuário tenha digitado
alguma coisa, testamos se a variável é “verdadeira”, neste
caso, testa se não é uma string vazia
• Em seguida chamados o método addTaskElement()
que cria um novo elemento <li> (item de uma lista)
– Neste caso usamos “<li></li>” para criar um novo elemento
item de lista vazio
– Então o atribuímos à variável $task
– Depois imediatamente preenchemos o elemento com o nome
da tarefa usando o método text()

• Quando atribuímos um objeto jQuery a uma variável, é
uma boa prática iniciarmos o seu nome com $, para
indicar que ela se refere a um objeto jQuery
• Agora que temos o novo elemento, precisamos adicioná-
lo ao documento no local correto, que é dentro do
elemento <ul id=“task-list”>
– O que é feito através da seleção do emento task-list e a
chamada do método append()
– Isto irá adicionar um novo elemento <li> no final de tasklist
• Por último, de volta ao método addTask(), limpamos o
valor do campo de entrada e retornamos o foco para ele
– Utilizamos encadeamento de função para realizar as duas
tarefas em uma única instrução

Removendo Uma Tarefa da Lista
• Para isso iremos precisar de um botão de exclusão para
cada tarefa na lista
• Iremos adicionar o código para criação do botão no
método addTaskElement():

• A primeira coisa que o método faz é criar um novo
elemento <button> com uma classe de delete
• Então um elemento de item de lista é criado da mesma
maneira anterior, com exceção de que primeiro é
adicionado o botão e então o nome da tarefa
– Note que, agora o nome da tarefa está empacotado em um
elemento <span class=‘task-name’> (usado para agrupar
elementos em um documento) para ajudar a rastreá-lo
• Por último, um manipulador de evento de clique foi
adicionado para o botão de exclusão
– Para excluir a tarefa do elemento lista, simplesmente
chamamos o método remove() que exclui o elemento do DOM

Movendo Tarefas na Lista
• Iremos adicionar botões para mover tarefas para cima e
para baixo na lista
• Para isso iremos modificar o código do método
addTaskElement()

Modelos HTML
• Estamos adicionando elementos em nosso DOM
manualmente utilizando programação em JavaScript
• Seria muito mais fácil se apenas definíssemos a estrutura
de como a nossa aplicação deveria parecer em nosso
arquivo HTML e o utilizássemos para criar novas tarefas

Implementando Um Modelo
• Inicialmente iremos precisar de um local para colocar a
marcação do modelo (template)
– Iremos adicionar um <div id=“templates”> no arquivo HTML
fora do elemento app e atribuí-lo à classe hidden
– Em nosso arquivo CSS, a classe hidden atribui display para
none em um elemento, então, nunca será visto pelo usuário

• Alguns outros elementos e atributos foram adicionados:
– Um <div class=“tools”> foi colocado em torno dos botões
para agrupá-los
– O atributo title foi adicionado em cada botão para mostrar
uma “dica” no navegador
• Note que não usamos nenhum atributo ID nos
elementos:
– Utilizamos atributos de classe para identificar diferentes
elementos
– Um ID identifica unicamente um elemento, fazendo com que só
possamos utilizá-lo uma vez

Implementando Um Modelo
• Vamos adicionar algum estilo no arquivo CSS para os
botões e seu container:
– Primeiro queremos que os botões permaneçam na mesma linha
que o nome da tarefa, mas o seu container <div> é um
elemento a nível de bloco, iremos mudá-lo para inline-block
– Iremos remover as bordas dos botões e torná-los todos do
mesmo tamanho, além de remover preenchimento e margens
para torná-lo mais compacto

Utilizando o Modelo
• Para utilizar o modelo em jQuery, pegamos o elemento
do modelo e utilizamos o método clone() para fazer
uma cópia do mesmo
• Então inserimos a cópia no lugar que quisermos no DOM
• Veja o novo método addTaskElement():

Editando Uma Tarefa da Lista
• Permite ao usuário mudar o nome de uma tarefa:
– Quando o usuário clicar no nome da tarefa, ela irá mudar para
um campo de entrada de texto
• Para fazer isso iremos adicionar um campo de entrada de
texto no modelo, logo após o nome da tarefa:
– Atribuímos a ele as classes task-name e hidden (será
mostrado apenas quando o usuário clicar sobre a tarefa)

• Acrescentamos no arquivo JavaScript um manipulador de
eventos para o elemento <span> em addTaskElement()
que chama o método onEditTaskName()
• onEditTaskName() recebe como parâmetro o elemento
que disparou o evento $(this)

• onEditTaskName() possui apenas uma linha mas
realiza diversas tarefas através do encadeamento de
funções:
– Primeiro ele esconde o elemento <span>
– Em seguida ele captura o campo de entrada de texto,
procurando por um “irmão” (sibling) do elemento <span> que
seja um elemento <input> com uma classe de task-name
– Então, atribui o valor do campo de entrada com o valor do
nome da tarefa através do método jQuery text()
– Finalmente, torna o campo de entrada visível e coloca o foco
nele

• Agora precisamos fazer com que o campo de entrada
desapareça quando o usuário terminar a edição do nome
da tarefa
• Para isso, adicionamos um manipular de evento no
campo de entrada, que é disparado quando o usuário
modifica o texto e pressiona Enter ou o deixa
• Adicionamos o código a seguir no final do método
addTaskElement():

• O código em onChangeTaskName():
– Esconde o campo de entrada de texto
– Pega o elemento <span> com o nome da tarefa e armazena em
uma variável
– Se o usuário digitou alguma coisa, atualiza o nome da tarefa
– Chama o método show() para tornar o nome visível
novamente

• Uma última tarefa:
– Se o usuário clicar fora do campo sem realizar nenhuma
mudança, a aplicação não irá receber uma notificação de
evento, então o campo não será oculto
– Quando isto ocorre, podemos capturar um evento do tipo blur

Guardando o Estado da Aplicação
• Precisamos de uma maneira de salvar nossa lista de
tarefas, de maneira que na próxima vez que o usuário
retornar à aplicação as tarefas permaneçam lá
• HTML5 possui uma ferramenta para isso – Web Storage
– Uma nova API em HTML5 que permite armazenar informações
no lado cliente
• No passado, a única maneira de armazenamento no lado
cliente deste tipo disponível eram os cookies
• Mas cookies têm diversas limitações como da quantidade
de dados, além de ocupar muito espaço
• Web Storage, por outro lado, permite armazenar muito
mais dados (até 5MB na maioria dos navegadores)

Web Storage
• Consiste de dois objetos globais que possuem a mesma
interface: localStorage e sessionStorage
– A única diferença entre os dois é que dados armazenados na
sessionStorage são perdidos quando o navegador é fechado,
enquanto localStorage não
• Uma vez que queremos guardar dados da aplicação entre
sessões, iremos utilizar apenas o localStorage
• Dados são armazenados em pares chave/valor
• Podemos atribuir valores usando o método setItem() e
recuperá-los usando getItem():
localStorage.setItem("myKey", "myValue");
var value = localStorage.getItem("myKey")
// returns "myValue"

Web Storage
• Se tentarmos recuperar um valor de uma chave que não
existe no localStorage, será retornado null
• Se tentarmos adicionar um valor no localStorage e não
existir memória suficiente, ocorrerá uma exceção
QUOTA_EXCEEDED_ERR
• Limitações do localStorage:
– O usuário não tem necessariamente acesso a tudo que estiver
armazenado (embora seja possível com ferramentas de
desenvolvimento do navegador)
– Ele é compartilhado por todas as aplicações em um domínio,
assim o limite é compartilhado entre todas as suas aplicações
• Também significa que as chaves deverão ser únicas entre todas as suas
aplicações
– Tanto chaves como valores devem ser strings

Web Storage
• JavaScript possui um objeto utilitário chamado JSON que
fornece funções para conversão de valores para e a partir
de strings
• JSON (JavaScript Object Notation) é um padrão para
representação de valores como strings em um formato
legível
• O objeto JSON tem dois métodos:
– JSON.stringify() para converter um valor para uma string
– JSON.parse() para converter uma string de volta em um valor

Criando Armazenamento Local
• Para ajudar a lidar com algumas limitações do
localStorage, iremos criar um objeto chamado
AppStorage que irá empacotar o objeto localStorage
• O objeto AppStorage irá ajudar a evitar colisões de
chaves e deverá fornecer uma maneira fácil de armazenar
valores não-string
• Iremos definir este objeto em um novo arquivo chamado
appStorage.js, assim poderemos reutilizá-lo em outras
aplicações

appStorage.js
• O construtor recebe o nome da aplicação como parâmetro
• A linha seguinte cria uma variável privada chamada prefix
que será utilizada como prefixo para todas as chaves da
aplicação, evitando colisões
– Se o nome da aplicação não for fornecido, não será usado um prefixo,
o que pode ser útil para chaves compartilhadas entre diferentes
aplicações
• A linha seguinte cria uma variável pública usada para
determinar se o navegador dá suporte ao localStorage

appStorage.js – setValue()
• O método setValue() recebe uma chave e um valor e o
coloca no localStorage
– Ele adiciona o prefixo para evitar colisão de nomes
– Como só podemos armazenar strings, o método
JSON.stringify() é chamado para conversão do valor
– Então o método localStorage.setItem() é chamado para
armazená-lo

appStorage.js – getValue()
• O método getValue() recebe uma chave, adiciona a ela
o prefixo, e retorna o valor associado a ela no
localStorage
– Ele utiliza JASON.parse() para converter a string recuperada
do localStorage para um valor
– Se a chave não existir ou se o navegador não de suporte ao
armazenamento local, este método retornará null

appStorage.js – removeValue()
• O próximo passo é remover itens:
– O método removeValue() faz isso – ele simplesmente chama
localStorage.removeItem() passando a chave com prefixo
como parâmetro

appStorage.js – removeAll()
• O método removeAll() remove todas as chaves de uma
aplicação
– Apesar de localStorage possuir o método clear(), ele
esvazia completamente o localStorage de um determinado
domínio, não apenas os valores de uma aplicação
– Então precisamos recuperar todas as chaves da aplicação e
removê-las uma a uma
– Para isso, chamamos o método getKeys() que irá retornar um
array com todos os nomes de chaves da aplicação

appStorage.js – getKeys()
• getKeys()
– Pode receber como
parâmetro uma função de
filtro caso queiramos
filtrar os resultados por
nossos próprios critérios
– O método realiza um laço
sobre todas as chaves no
localStorage chamando o
método privado
isAppKey() para
determinar se a chave
pertence a aplicação
– Se verdadeiro, remove o
prefixo da chave
– Finalmente, se não houver
filtro ou se a função de
filtro retornar verdadeiro,
adiciona a chave ao array
Retorna verdadeiro
se a chave pertence
à aplicação

appStorage.js – contains()
• O método contains() irá determinar se existe um valor
associado com uma chave
– Ele simplesmente tenta recuperar o valor associado com a
chave e testa se ela existe

Armazenando a Lista de Tarefas
• Primeiro, temos que adicionar uma referência a
appStorage.js no nosso arquivo HTML:
<script src="appStorage.js"></script>
• Depois iremos adicionar uma variável privada appStorage
ao objeto TaskAtHandApp, passando o nome da aplicação
ao construtor:

• Agora iremos adicionar um método privado que pode ser
chamado para salvar as tarefas sempre que uma
mudança for feita:
– O método saveTaskList() encontra todos os elementos
<span> de nomes tarefas para cada tarefa na lista
– Então chama o método jQuery each(), que é usado para iterar
sobre os elementos que foram encontrados pela seleção – ele
recebe uma função como parâmetro e chama a função para
cada um dos elementos
– Neste caso, a função simplesmente coloca o nome da tarefa no
final do array de tarefas
– Então o método setValue() de appStorage é chamado para
armazenar o array de tarefas, usando a chave “taskList”

• Agora precisamos adicionar a chamada à
saveTaskList() cada vez que a lista muda:
– Faremos isso nos métodos addTask() e onChangeTaskName()
– Também em addTaskElement() precisaremos fazer a
chamada para os manipuladores de eventos de clique de botão
para delete, move-up e move-down
– Para tornar a leitura mais fácil, iremos refatorar nossos métodos
para manipulação de eventos de botão movendo o código
interno para métodos privados

Executando a Aplicação
• Execute a aplicação no Chrome, adicione algumas tarefas
e então pressione F12 para abrir as ferramentas do
desenvolvedor
– Clique no ícone de recursos e então expanda e selecione o item
em Local Storage no painel à esquerda

Carregando a Lista de Tarefas
• Iremos adicionar um novo método privado chamado
loadTaskList() para carregar a lista de tarefas:
– Este método chama appStorage.getValue() passando a
chave para nossa lista de tarefas
– Então verifica se realmente teve algum retorno e faz a iteração
sobre os elementos do array chamando o método
addTaskElement() paca cada um

Carregando a Lista de Tarefas
• A única coisa restante é adicionar uma chamada a
loadTaskList() a partir do método start(), então a
lista será carregada quando a aplicação for iniciada:

Exercício
• Escreva uma aplicação que possa ser usada para mostrar
todos os dados de cada aplicação em um domínio
• No nível mais alto, liste todas as aplicações
• Quando clicarmos sobre uma aplicação, deverão ser
mostrados todos os itens armazenados
• Quando clicarmos sobre um item, o seu conteúdo deverá
ser mostrado

Referências
• GUSTAFSON, J. M. HTML5 Web Application Development
By Example. Packt Publishing, 2013.
• GAVIN. Best HTML5 Editors for Developers. CodeGeeks,
2013. Disponível em: http://codegeekz.com/best-html5-
editors/

Desenvolvimento de Sistemas Web - HTML5 - Introdução

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Desenvolvimento de Sistemas Web - HTML5 - Introdução

Semelhante a Desenvolvimento de Sistemas Web - HTML5 - Introdução (20)

Mais de Fabio Moura Pereira

Mais de Fabio Moura Pereira (10)

Último

Último (20)

Desenvolvimento de Sistemas Web - HTML5 - Introdução