Blog SW9

Desenvolvimento Web e Híbrido na prática.
Tome um café, concentre-se, codifique. (งツ)ว

Google Way | Building a Form Field Similar To Google | 3 de 3 | SW9

Google Way | Building a Form Field Similar To Google | 3 de 3 | SW9

Olá Pessoal. Sejam Bem Vindos ao canal e blog SW9 (http://blog.sw9.com.br) 👋

Continuando a nossa jornada de criar um campo de pesquisa com identidade visual e recursos similares ao que encontramos no site do Google, chegou o momento de partirmos para a terceira e última aula. 🤙

#Perdeu a aula passada?

Se você perdeu a segunda aula, onde implementamos os recursos de Clear Input e Float Label, não se desespere 🤗. Segue o link da aula passada: http://blog.sw9.com.br/2019/06/21/google-way-building-a-form-field-similar-to-google-2-de-3-sw9

#Nosso objetivo

A nossa missão hoje é usar uma biblioteca chamada simple-keyboard para incluir no campo de pesquisa um teclado virtual arrastável.

#Antes de começar

O código fonte ficará disponível na minha área de downloads. Para acessá-la é bem simples, basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar o seu melhor e-mail e na sequência você receberá o acesso para fazer download deste projeto e de muitos outros.

Se você quiser acessar o projeto em tempo real, com a possibilidade de alterar e copiar o código fonte, vou compartilhar o JsFiddle playground com vocês aqui no blog.

Portanto, não deixem de acessar a área de downloads e bons estudos. 👊

Ah, caso tenha algum problema para receber o link via e-mail, por favor entrem em contato comigo. 👍

#Resultado Final

Que tal ver como a página deve ficar ao final da AULA de hoje? Foi pensando nisso que decidi compartilhar o código em forma de playground usando o JSFiddle.

#Vamos começar?

Para fecharmos com chave de ouro nosso projeto, chegou o momento de criarmos um teclado virtual, que será exibido quando o usuário clicar no ícone em forma de teclado.

#V-Keyboard

Vou usar uma biblioteca chamada simple-keyboard para facilitar a nossa tarefa. Esta biblioteca possui uma documentação bastante objetiva e de fácil entendimento que pode ser consultada no endereço https://www.npmjs.com/package/simple-keyboard

Com poucas linhas de código, o teclado virtual fará parte do nosso projeto e será exibido todas às vezes que o usuário clicar no ícone em forma de teclado.

#Compatibilidade

Procurei desenvolver com o máximo de compatibilidade possível com os diversos navegadores de mercado. Realizei testes usando as versões mais recentes do Google Chrome e do Firefox e o projeto funcionou 100% conforme o esperado. Fique à vontade para testar em outros navegadores e compartilhar conosco os resultados 🤝

#Hora de assistir ao vídeo

Chegou o momento de arregaçar as mangas e colocar a mão na massa. 🏃🏿 🏃🏻‍♂️ 🏃‍♀️

Aprenda HTML 5 e CSS 3

Comece a criar Sites Com o Melhor do HTML 5 e CSS 3
Curso Relacionado

[Conclusão]

Na aula de hoje [Google Way | Building a Form Field Similar To Google | 3 de 3 | SW9], encerramos o projeto de construção de um campo de pesquisa, com identidade visual similar ao Google. Nesta última parte implementamos um teclado virtual arrastável usando uma biblioteca chamada simple-keyboard.

Está disponível na área de downloads o projeto que construímos hoje. 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 /GOOGLE WAY. 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

JFiddle Playground: https://jsfiddle.net/sw9brl/mb4a2dfu/

Link do vídeo: https://youtu.be/T7SmQB5QtXI

Playlist Icon Animation: https://www.youtube.com/watch?v=9pWK8YVWYlU&list=PLtluGZbI5ESgzeLrEN4zayQ1PbwawR216

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

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se

Tópicos Relacionados

Deixe um comentário

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Paulo Eduardo
Geek desde criança, sempre me interessei por games, filmes e tecnologia. Sou graduado em engenharia da computação pela PUC Campinas. Possuo mais de 15 anos de experiência em desenvolvimento, com foco maior em desenvolvimento web, gestão de times e mais recentemente desenvolvimento mobile utilizando HTML e Javascript.

Termos como #backend, #frontend e #fullstack fazem parte do meu dia a dia.

Não deixe de acompanhar meu blog, canal youtube e meus produtos digitais.

Divirta-se e bons estudos. :-)
Paulo Eduardo on sabyoutubePaulo Eduardo on sabinstagramPaulo Eduardo on sabgithubPaulo Eduardo on sabfacebook
✌(◕‿-)✌ Tempo Limitado - Tenha acesso a nossa área de DownloadsClique Aqui - É Grátis
How to whitelist website on AdBlocker?