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. ?? ??♂️ ?♀️
[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
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