Google Way | Building a Form Field Similar To Google | 1 de 3 | SW9
Olá Pessoal. Sejam Bem Vindos ao canal e blog SW9 (http://blog.sw9.com.br) ?
Nestes últimos dias eu estava trabalhando na escolha dos próximos temas do meu blog e canal, quando me deparei com alguns campos de formulário usados pelo Google. Eu particularmente utilizo vários serviços do Google, e não é de hoje que venho observando várias abordagens aplicadas pelo Google, e que acabam virando tendência.
Se você é um bom observador ?, já deve ter notado os recursos visuais agregados ao campo de pesquisa do Google. Foi aí que comecei a notar que outros sites, aplicações web, aplicativos móveis híbridos estão usando estes mesmos recursos visuais (com maior ou menor intensidade).
Imaginando que você, em algum momento da sua trajetória profissional, pode esbarrar com um pedido assim: Oi, eu tenho um projeto e gostaria de criar os meus formulários similares aos utilizados pelo Google, você consegue me ajudar?
Foi pensando nisso, que quero te ajudar ?
#Nosso objetivo
Criar um campo de pesquisa usando vários recursos visuais, para que fique bem próximo da identidade visual usada pelo Google em seus formulários.
#O que veremos na aula de hoje?
Daremos início ao projeto de construção de um campo de pesquisa. Decidi dividir o projeto em três AULAS. Nesta primeira AULA, vamos implementar os seguintes recursos:
- Round Corner: cantos arredondados no campo de pesquisa;
- Append Icon: agregaremos 2 ícones ao lado direito do campo de pesquisa. Um ícone no formato de lupa e um ícone no formato de um teclado;
- Popover: aplicaremos o recurso de popover no ícone de teclado virtual;
#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. ?
#Pré-requisitos
O nosso projeto será construído usando o framework BootStrap UI, Jquery, a biblioteca de ícones Font Awesome, componente de teclado virtual. Não esquecendo do HTML5, CSS e JS ?
Mas atenção ✋, conhecer estas tecnologias é importante, mas não essencial para seguir com o projeto.
#Resultado esperado
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 coisa que faremos é criar uma página simples, incluir um formulário e associar a ele um campo de pesquisa do tipo texto. Tudo isso construiremos rapidamente usando algumas classes básicas do framework BootStrap UI.
#Round Corner
Após criarmos a base de nosso projeto, chegou o momento de transformar os cantos do campo de pesquisa em cantos arredondados. Para esta transformação, vou usar as classes utilitárias do BootStrap que manipulam a propriedade border-radius. Existem algumas classes já definidas com padrão, como por exemplo:
rounded: transforma todas as pontas de um elemento, em pontas arredondadas;rounded-top: aplica efeito arredondado no canto superior esquerdo e superior direito;rounded-right: aplica efeito arredondado no canto superior direito e inferior direito;rounded-bottom: aplica um efeito arredondado no canto inferior esquerdo e inferior direito;rounded-left: aplica um efeito arredondado no canto superior esquerdo e inferior esquerdo;rounded-circle: transforma o elemento em um círculo;rounded-0: remove os cantos arredondados.
Apesar destas alternativas, todas elas aplicam índices de curvatura que não atendem as nossas expectativas. Observando esta situação, vamos customizar as classes rounded-right e rounded-left, para aplicar índices maiores de curvatura, e assim chegar ao resultado esperado (como você viu lá no playground).
Após customização, as classes devem ficar assim:
#Append Icon
Após vencermos o desafio dos cantos arredondados ???, chegou a vez de explicarmos como anexar ícones ao lado direito do campo de pesquisa. Uma das características que acho mais interessante no BootStrap é o chamado add-on. Possibilidade de anexar elementos à esquerda de um campo (prepend) ou anexar elementos à direita de um campo (append), ou usar os dois prepend+append ao mesmo tempo.
No nosso caso, vamos usar o recurso de append para anexar dois ícones do lado direito do campo de pesquisa. O primeiro ícone é uma lupa, e o segundo ícone, que ficará posicionado ao lado esquerdo da lupa, é um teclado.
Usar apenas o append não é o bastante, o objetivo é dar a impressão ao usuário de que estes ícones anexados fazem parte do campo de pesquisa. A dica é aplicar a classe border-right-0 ao campo de pesquisa e o problema está resolvido ?
#Uma alternativa ao atributo title
A próxima etapa é usarmos um plugin chamado popover. Este plugin permite dar uma nova aparência ao conteúdo associado ao atributo title de um elemento html.
Antes de usar o popover, é necessário referenciar o plugin em nossa página e inicializá-lo. Na sequência, associaremos o popover ao ícone de teclado, para que o texto [virtual keyboard] apareça sempre que o usuário passar o mouse por cima do ícone.
#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 | 1 de 3 | SW9], começamos a construir um campo de pesquisa com identidade visual similar ao Google. Nesta primeira parte aplicamos os cantos arredondados no campo de pesquisa, adicionamos o ícone de pesquisa e de teclado usando o recurso de append do Bootstrap UI, e para encerrar usamos o plugin popover no ícone em forma de teclado.
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/eqvxz1kc/
Link do vídeo: https://youtu.be/Uw-S4uCY3Zk
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