Desenvolvimento de Sistemas Web - HTML5 - Introdução

UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO

DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1

Fábio M. Pereira

([email protected])

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


• 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

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/

http://jejacks0n.github.io/mercury/

http://jejacks0n.github.io/mercury/

http://rendera.heroku.com/

http://rendera.heroku.com/

http://maqetta.org/

http://maqetta.org/

http://aptana.com/

http://aptana.com/

http://www.aloha-editor.org/




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:

http://jquery.com/

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

Executando a Aplicaçã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


• 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():

Utilizando o Modelo

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 manipular 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


• 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/






UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO

DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1

Fábio M. Pereira

([email protected])

Desenvolvimento de Sistemas Web - HTML5 - Introdução

Education

Transcript of Desenvolvimento de Sistemas Web - HTML5 - Introdução