Client Side Storage | Aula 2 – Preparação – Warming-up | Série HTML5 | SW9
Olá a todos. Sejam bem-vindos ao Canal e Blog SW9 (http://blog.sw9.com.br)
Dando continuidade a MEGA Série sobre HTML5. O Objetivo é apresentar os recursos e as possibilidades que surgiram com o advento do HTML5.
Neste novo conjunto de Aulas abordaremos tudo o que você precisa saber sobre armazenamento de dados do lado cliente (Client Side Storage). E o melhor: veremos tudo isso na prática.
O que veremos nesta aula?
Nesta segunda AULA sobre [Client Side Storage], vamos construir uma página que será o nosso gerenciador de contatos. Usaremos esta página para implementar todas as opções de armazenamento que vamos abordar neste conjunto de Aulas.
Como de costume, no final deste conjunto de AULAS, ficará disponível na minha área de downloads a implementação completa desta página de gerenciamento de contatos.
Em primeiro lugar, eu vou mostrar para vocês como a página deve ficar ao final desta AULA. Neste momento não vamos implementar a lógica, vamos focar apenas na parte visual.
A partir da próxima AULA, utilizaremos esta página para começar a implementar a lógica para cada tipo de API de Armazenamento de dados do lado cliente.
A seguir você consegue ver com a nossa página ficará:
Gerenciamento de Contatos
Como a nossa página está dividida?
Existem 3 áreas distintas na página de gerenciamento de contatos.
A primeira parte corresponde a seleção do tipo de armazenamento. O usuário poderá escolher qual o tipo de armazenamento que será usado para as operações que faremos com os contatos (Salvar, Recuperar, Pesquisar, Remover). À medida que as aulas foram avançando, mais opções estarão disponíveis neste dropdown.
A segunda parte da página corresponde ao formulário, onde será possível criar os contatos desejados. Neste formulário temos 3 campos (nome, email e telefone) e um botão para salvar o contato. Durante a implementação deste formulário você verá alguns recursos interessantes, como validação de formulário, uso de CSS3 para implementar as novas pseudo-classes que vieram para trabalhar em conjunto com os novos tipos de atributos HTML5.
Abordaremos então o uso da pseudo-classes [:valid], [:invalid], [:required] e [:optional].
Para finalizar, a terceira parte da página corresponde a área de pesquisa de contatos e o local onde os contatos cadastrados vão aparecer. Além disso, criaremos um botão para remover contato.
Pronto. Já temos a nossa página de gerenciamento de contatos pronta. Agora, a partir da próxima AULA, incluiremos a lógica necessária para cada tecnologia de armazenamento que vamos abordar ao longo das AULAS.
[Conclusão]
Na aula de hoje [Client Side Storage | Aula 2 – Preparação – Warming-up | Série HTML5 | SW9], demos sequência na Mega série sobre HTML 5.
Nesta AULA de aquecimento, criamos a nossa página de gerenciamento de contatos que usaremos para implementar todas as tecnologias de armazenamento de dados (Client Side Storage) que veremos ao longo deste novo conjunto de AULAS.
Está disponível na minha área de downloads o projeto parcial. Para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso. Dentro da minha área de Downloads, procure pela pasta HTML5/Storage. O resto é com vocês 
Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.
Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.
Fiquem com Deus e até o próximo vídeo.
[Links úteis]
Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph
Cloud 9: https://c9.io/login
PlayList Cloud 9: https://goo.gl/7aQbD6
PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8
Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/
Meu Blog: http://blog.sw9.com.br
Meu GitHub: https://sw9brl.github.io/MyGitHubPage
Canal youtube: https://youtube.com/+sw9brl
Link do vídeo: https://youtu.be/iZwKXcrbrb0
Parceria: https://www.tubebuddy.com/pricing?a=sw9brl
✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se
Que tal me pagar um café :-)
Uma pequena quantidade de café foi consumida durante a produção de um post + vídeo. Se puder, contribua adicionando mais combustível para que eu tenha condições de seguir em frente.
Brincadeiras à parte, o valor selecionado é multiplicado por 2 (x2) que representa a multiplicação de minha dedicação a cada contribuição que recebo.
Deixe um comentário