Google Way | Building a Form Field Similar To Google | 2 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 segunda aula. ?

#Perdeu a aula passada?

Se você perdeu a primeira aula, onde iniciamos a construção do campo de pesquisa passando pela implementação de cantos arredondados, anexando ícones ao lado esquerdo do campo (add-on append) e aplicando o plugin popover, não se desespere ?. Segue o link da aula passada:  http://blog.sw9.com.br/2019/06/18/google-way-building-a-form-field-similar-to-google-1-de-3-sw9

#Nosso objetivo

O nosso próximo objetivo é agregar duas funcionalidades ao campo de pesquisa. São elas:

• Clear Input;
• Float Label.

#O que veremos na aula de hoje?

Vou explicar passo a passo como agregar ao campo de pesquisa as funcionalidades de Clear Input e  Float Label.

#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?

A primeira tarefa é implementar um botão que batizei como Clear Input, e encerrarmos o projeto criando o recurso de Float Label usando apenas CSS.

#Clear Input

Este botão será exibido quando o campo de pesquisa possuir alguma informação digitada. Ao clicar nele, todo o conteúdo digitado no campo será removido. Esta funcionalidade tem como principal objetivo facilitar a vida do usuário. Com apenas 1 clique, ele consegue apagar todo o texto digitado, abrindo a possibilidade de digitar novos termos para pesquisa.

Você pode acompanhar em detalhes a construção desta funcionalidade no vídeo de hoje.

#Float Label

O último recurso a ser implementado é o que chamamos de Float Label. Apesar dele não ser utilizado no campo de pesquisa do Google, é amplamente usado nos demais formulários desenvolvidos pela empresa. Mas o que vem a ser o Float Label?  Se formos definir bem ao pé da letra, float label é um label flutuante que fica visível no momento que o usuário digita algo no campo. Geralmente um efeito de transição é aplicado neste label para trazer ao usuário final uma melhor experiência.

Muitos sites, aplicações web, móveis e híbridas estão usando este tipo de recurso. Foi justamente por esse motivo que decidi explicar uma das possíveis técnicas existentes (e olha que existem várias) para implementá-lo em nosso projeto. A técnica consiste em usar apenas CSS e um pouco de paciência ?.

#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 | 2 de 3 | SW9], continuamos o projeto de construção de um campo de pesquisa, com identidade visual similar ao Google. Nesta segunda parte implementamos a funcionalidade Clear Input usando Javascript e o Float Label usando CSS.

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

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

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