Uma das coisas mais comuns, mas ao mesmo tempo mais chatas de se fazer no CSS é alinhar verticalmente elementos em tela. Existem várias formas de fazer isso. Neste post, vou elencar as minhas formas favoritas de fazer isso.
Alinhamento com Flexbox
Flex é uma propriedade incrível do CSS que permite organizar elementos. Se outrora tínhamos que fazer inúmeras gambiarras com float, o flex nos permite controlar o comportamentos dos filhos de um container. Para centralizar verticalmente um objeto, podemos usar a direção de coluna, em seu container pai.
Alinhamento com position
Com um pouco de matemática, conseguimos fazer um alinhamento vertical com o position absolute. Porém, é importante lembrar que o objeto será flutuante e que seu pai, necessariamente, precisa ser um position relative. O problema de usar esse tipo de alinhamento é que o conteúdo da posição precisa ser fixo. Felizmente, hoje, conseguimos fazer cálculos com variáveis de CSS, o que facilita a forma de implementarmos essa técnica. A vantagem dessa técnica é poder usar, justamente, em ambientes flutuantes que se sobreponham. Porém, caso você não precise que ele se alinhe ao pai, mas à viewport, você pode usar também o position como fixed.
Alinhamento com Grid
Outra forma moderna de alinhar verticalmente é através do uso de grids. A vantagem de usar grids é que o tamanho do conteúdo do elemento alinhado corresponderá ao tamanho da grid que se deseja utilizar. Ou seja, é adaptável de acordo com a viewport, e não referente ao seu conteúdo. Para isso, basta definirmos a quantidade de colunas e linhas que desejamos e estabelecemos onde o objeto alinhado vai iniciar e terminar.
Exemplo de uso (Modal Alinhado ao Centro)
Para mostrar como pode ser usado os alinhamentos, que tal criarmos um simples modal alinhado ao centro da tela?
Um modal é composto por uma cortina que reveste o conteúdo original, seguido de um painel com alguma informação dentro. É convenção de que os modals carreguem essas informações no centro da tela, afim de que a informação fique direcionada e encapsulada, levando, assim, o usuário à uma atenção maior àquela informação. Ou seja, isolar e destacar. O exemplo abaixo foi feito usando a primeira estratégia de alinhamento vertical aqui apresentada, pois, desta forma, o tamanho do modal que vai ser a referência para a centralização. Alguns efeitos foram adicionados para ilustrar melhor.
Foi apresentado nesta segunda-feira (06/05), através do canal oficial Windows Developer, um novo terminal para o Windows 10. O objetivo é melhorar a produtividade em relação à soluções como Prompt de Comando, PowerShell e WSL (porém integrado entre estes).
O novo Windows Terminal poderá ser baixado e atualizado direto pela Microsoft Store, no Windows 10, não estando diretamente ligado ao Windows Update.
Vídeo de apresentação, que sugere um leiaute muito similar ao Windows Aero.
Similar aos terminais que vemos em Unix e Linux, o Windows Terminal trará suporte a múltiplas abas e podem ser integradas tanto aos comandos nativos do Windows como às soluções de subsistemas que já estão disponíveis na loja (WSL).
O Windows Terminal será acelerado por GPU a partir do sistema de renderização do DirectX, com um objetivo de criar uma qualidade na tipografia superior ao atual comportamento do ClearType. Com isso, também será possível incluir diferentes tipos de símbolos e glifos, tal como emojis; o que nos leva a crer que a Microsoft pretende mudar seu padrão de ISO para Unicode. Ainda, este terminal trará uma nova fonte, de código aberto.
O novo Windows Terminal quer entregar uma quantidade muito alta de personalizações e ferramentas, além de poder ser criado múltiplos perfis, para facilitar o uso. O mais interessante na verdade é que todo Windows Terminal está disponibilizado em código aberto no Github. https://github.com/Microsoft/Terminal
A versão preview do Windows Terminal ficará disponível pela Windows Store durante o inverno brasileiro, deste ano. Sua versão 1.0 está programada para ser lançada no verão brasileiro, mas com possibilidades de ter seu lançamento adiantado.
Quando iniciamos um aplicativo, site, sistema, ou diversos outros ambientes de interação, o primeiro passo é criar diferentes tipos de propostas de como vai ser a aplicação e de como vai ser seu comportamento. Se você é desenvolvedor, independente de ser designer ou programador, ou ainda está estudando, você já deve ter tido a necessidade de criar, ao menos, um rascunho de como será a interface gráfica de sua aplicação. E, se você pretende trabalhar especificamente com interfaces gráficas ou UX, a definição desses termos é ainda mais importante, sendo fundamental para uma boa comunicação e escolha de ferramentas adequadas.
Importância
Quando o desenvolvedor está em reunião com seu cliente, ou apenas lendo os requerimentos, este já vislumbra em sua mente o processo pelo qual o usuário conseguirá atingir seu objetivo. Além disso, também pensa em como comandos e dados devem influenciar uns aos outros (o que chamamos de regra de negócio do software). Mas nossa mente não é exatamente o melhor local para armazenar informações, pois a memória humana é volátil, se adapta e, o que é mais comum, se esquece de informações que podem ser importantes.
Por isso, é normal que um profissional, desde o seu primeiro pensamento, já comece a fazer rabiscos e anotações em uma caderneta ou em um guardanapo. Dessa forma, ele vai poder planejar não apenas o leiaute, mas todo comportamento do usuário e, inclusive, ajudar a modelagem de dados e lógica do projeto.
Esboços ou Sketchs
Um esboço ou sketch, é o primeiro passo para a criação da interface gráfica de um aplicativo. Basicamente é o que o desenvolvedor em primeiro passo. Desenhos simples, com muitas marcações, textos e números, que devem ser suficientes apenas para a compreensão deste e/ou do designer responsável (caso o designer não seja o próprio desenvolvedor). Esses esboços são feitos em papel, de preferência em um bloco de anotações, com lapiseira ou caneta. Fazer à mão é importante para que a fluidez do pensamento resolva melhores definições, assim como a ideia flui melhor dentro da cabeça de que o está projetando.
Para quem tem uma frequência muito alta de rascunhos, existem cadernetas específicas para isso, tendo formatos e linhas de base adequadas para o tipo de dispositivo. Outras pessoas preferem andar com papéis impressos com os templates base. Sites como o SneakPeekit e o PaperBrowser, disponibilizam templates para esboços.
fonte: geekchix.org
Wireframes
Wireframes são leiautes demonstrativos da diagramação de elementos na tela, geralmente contendo indicadores. Trata-se de uma evolução de um esboço, sendo mais bem trabalhado, indicando a disposição dos diversos elementos e conteúdo. Por originalmente serem desenhados em papeis milimetrados ou pautados, são também chamados de esboços de grade. Esta etapa ainda pode ser feita por alguém sem muita experiência com design, pois é basicamente uma forma de organizar as ideias rabiscadas anteriormente no papel. Se você designer, é comum pular essa etapa, indo do esboço direto para o mockup.
Foto: Todd Moy
Hoje os wireframes são feitos digitalmente, por ferramentas específicas, como o Balsamiq Wireframes ou através de conjuntos de bibliotecas e plugins que podem ser incorporados aos aplicativos da Adobe, como o Illustrator.
Biblioteca de Wireframes no Adobe Illustrator. Foto: Toptal.Exemplos Wireframes
Mockups
Agora é a vez do designer (ou seu lado designer) brilhar. Os mockups são leiautes com exemplos finais, ou muito próximo destes, da interface gráfica. Basicamente serve de mapa para a implementação da mesma, com exemplos das telas, componentes e estilos já finalizados. Os mockups são bem mais trabalhados que os wireframes e raramente possuem indicadores internos, para não atrapalhar a compreensão da GUI (Interface Gráfica do Usuário). Muitas vezes, é comum mostrar os mockups também em cenas de interações, ajudando a demonstrar o uso e a ter uma melhor ideia do resultado final.
Fonte: https://portillo.myportfolio.com
Dentre diversas ferramentas para criação de mockups, temos o Adobe XD (gratuito), o Sketch e há quem até hoje prefira criar bibliotecas no Photoshop, Illustrator, Pixelmator ou similares. Sendo opção ou não do designer seguir as diretrizes de interface humana recomendado para o sistema ou aplicação.
Human Interface Guidelines
Se você é designer, você ainda deve trabalhar no chamado Human Interface Guidelines ou Diretrizes de Interface Humana, como alguns gostam de chamar. Trata-se das instruções básicas de como deve ser a GUI da aplicação, de um contexto de uma suite agregada ou até mesmo, como em sistemas operacionais, instruções de como outros designers devem implementar soluções para essa aplicação.
Para quem já trabalha ou trabalhou com identidades visuais, se assemelha muito aos manuais destas, porém ainda mais detalhados, mas com as informações sobre espaçamentos, iconografia, tipografia, cores, etc, incluindo, mas não se resumindo, a um conjunto de mockups que possuem exemplos das telas. Essas informações devem ser seguidas à risca por quem for implementar, sejam outros designers ou programadores front-end.
As Diretrizes são fundamentais principalmente em um sistema com uma quantidade de telas indefinida, como sistemas de gestão. Elas vão servir de guia para a criação de novas telas e componentes, além de inspiração para futuros materiais de publicidade e até sites.
Foto: Microsoft Fluent Design
Se você vai fazer uma aplicação para um determinado sistema operacional, ou apenas quer usar um como referência para não se preocupar tanto com o design, existem algumas diretrizes bem famosas, dentre elas a da Apple (disponível para iOS/MacOS/TVOS/WatchOS), o Material Design do Google (aplicável para sites e Android), o Fluent Design da Microsoft (também disponível o UXGuide legado) e tantos outros mais genéricos que você pode encontrar ou comprar pela internet.
Fonte: Apple
UI Kits
Se você está trabalhando com mockups e wireframes, geralmente você está trabalhando focado no funcionamento em um sistema operacional. Para montar seu leiaute de forma mais simples e sem perder muito tempo se adequando à diretriz escolhida, as desenvolvedoras costumam também disponibilizar UI Kits.
Esses kits de interface de usuário são arquivos ou bibliotecas que possuem os principais elementos gráficos genéricos do sistema. Geralmente é incluído elementos como botões, inputs, padrões de texto, cores, etc. Os principais UI kits, incluindo Android e iOS estão disponíveis direto pelas respectivas empresas ou através das desenvolvedoras dos principais softwares de mockups.
UI Kit do Android / Material Design para o Adobe XD. Fonte: Adobe.
Protótipo
O último passo antes (ou até durante) a implementação é a prototipagem. Basicamente, ele é um passo acima do mockup. Uma etapa onde o designer de interação não apenas demonstra o leiaute per se, mas as ações e interações entre as telas e elementos. Há várias formas de se criar um protótipo.
Algumas pessoas mais experientes preferem criar HTMLs simples, com animações e ações apenas com dados de exemplos, para demonstrar o comportamento, sem se importar ainda com tecnologias ideais ou funcionalidade, pois a ideia é ser apenas demonstrativo.
Exemplo de prototipagem no Adobe XD. Fonte: divulgação.
Hoje em dia, entretanto, é mais comum usar ferramentas de prototipagem. Quase todas as ferramentas modernas de mockup também fazem prototipagem, como o Adobe XD, Sketch, Figma, Zeplin, dentre outros. Esses aplicativos possuem diversas ferramentas não só de interação, como demonstração de transições e testes em dispositivos móveis.
Exemplo de prototipagem no InVision. Fonte: divulgação.
Outra forma de prototipagem são as criadas para apresentação em vídeo. Geralmente são criadas para vender uma ideia e não tem ainda um planejamento do software. Algumas ferramentas de prototipagem, como o InVision, Fuse e o Proto.io possuem ferramentas específicas para exportação em vídeo. Há também quem prefira fazer as transições do protótipo direto no After Effects, para dar um charme a mais para essas apresentações, geralmente com o uso de bibliotecas de animações.
Concluindo
O processo de esquematização visual de uma aplicação é fundamental para que a equipe envolvida no desenvolvimento tenha um guia de como deverá ser projetada a aplicação. Desde o esboço até a prototipagem, essas técnicas ajudam na compreensão, agilidade e segurança do projeto. O esforço para conhecer bem os termos ajuda na comunicação entre os integrantes da equipe, garantindo uma melhor interação entre todos.
Disclaimer: O comportamento não vai funcionar no iOS, pois o iOS desconsidera as pseudoclasses utilizadas aqui. No lugar, ele utiliza uma pseudoclasse de :hover para significar a seleção sem clique. Ainda estou vendo qual a melhor forma de usar no iOS sem bugar o comportamento em desktop.
Continuando com os exercícios de lógica com CSS e HTML, iremos desta vez ver se é possível criar um FAB (Float Action Button) sem usar Javascript. E, adianto, sim, é possível. Se você quer ver os outros exercícios, acesse a categoria de Tutoriais, deste site.
Editado -> Para quem quer aplicar uma interação melhor, eu adicionei um exemplo de uso com Javascript no final do Post.
Esse tipo de botão é comum em aplicativos Android com Material Design. Se trata de um botão flutuante que fica em uma das extremidades inferiores (geralmente a direita) que abre uma lista com outros botões. Bem, se você está nesta página, basta olhar logo abaixo 😁.
HTML + CSS
Um dos desafios é conseguir fazer algo semanticamente correto. Então, o leiaute em si consistirá em um container que contém um botão e uma lista de botões. Cada botão terá uma etiqueta (label) que será a descrição do que ele pode fazer.
No exemplo, há apenas 3 opções e com caracteres genéricos. Você pode substituir por imagens (mas tomando cuidado com o tamanho destas) ou usando font-icons, como o Font-Awesome, o MaterialDesign Lite ou até mesmo criar os seus próprios font-icons, como mostra este tutorial. Também pode colocar quantos items quiser na lista, apenas tomando cuidado para não ficar alto demais e enrolar o usuário.
Como sempre usaremos as pseudoclasses para poder reconhecer ações. No caso, utilizaremos a pseudoclasse :active e :focus para detectar o “click” ou o “foco” (quando o tab fica em cima). Você também notará a existência de um símbolo de positivo (+). No CSS, o símbolo + é um indicativo de que o item que deverá ser formatado é o item logo após o DOM atual, porém no mesmo container hierárquico. Ou seja, quando você declara input + p, você quer aplicar o estilo no p imediatamente após o input.
Sem mais enrolações, segue o CSS
O que estamos fazendo é aplicar um estilo na lista assim que o botão ganha foco ou é ativado. Você pode, se preferir, adicionar também ao passar em cima com o mouse, bastando adicionar, junto aos demais comandos do botão principal, a pseudoclasse :hover e repetindo o resto da declaração.
Simples, não é? E, como sempre, o exemplo no JsFiddle para você ir experimentando e fazendo seus próprios testes. Compartilhe com a galera!
O último post sobre como criar um efeito ON/OFF em um checkbox usando CSS3 puro fez muito sucesso. Dessa forma, pensei o que mais poderia ser legal para fazer com CSS3. Analisando um pouco o comportamento do Android, me lembrei de um componente bem interessante que é o input com um label float animado. Basicamente, ao preencher o conteúdo, o label sobe e vai para um pouco acima do input, como no exemplo abaixo:
Agora… como fazer?
O segredo está novamente nas pseudoclasses e operadores. Graças as pseudoclasses eu posso definir, com alguns gatilhos, o comportamento de um determinado elemento HTML.
No caso, esse gatilho é o placeholder, então é fundamental que o input possua um placeholder (vazio ou não) para criar o efeito. Pois o que identifica que algo foi preenchido ou não é justamente o placeholder. Sem o placeholder definido, o efeito não funciona. A pseudoclasse referente ao required também é usada em nosso exemplo:
Já para o efeito de transição, usaremos o transition e o comportamento do absolute que, por definição, tem seus eixos referentes ao pai, no caso desse ser relative. Então basta usar o CSS abaixo:
Como sempre, estou disponibilizando o exemplo completo no JsFiddle!
Gostou? Então curta a página no Facebook e compartilhe com os coleguinhas!
O CSS é o mecanismo utilizado pelos navegadores para informar a estes como deve ser exibido determinado elemento HTML. Desde a versão 3 muitas coisas novas permitiram que a web fosse cada vez bonita e funcional.
Eu estava um pouco cansado do trabalho e para relaxar fiquei pensando em uma solução simples para simular um Switch ON/OFF que pudesse ser aplicado no lugar de um checkbox. E, para isso, usei simplesmente CSS3 e pseudoclasses:
Basicamente, pseudoclasses nos permitem adicionar instruções específicas de acordo com determinados comportamentos ou condições dos elementos HTML. Neste pequeno exemplo, eu usei a pseudoclasse :checked, para verificar se está marcado ou não, e as que adicionam complementos antes e depois do elemento, são as :before e :after, respectivamente.
Mas o que você quer mesmo é o código, então para ficar fácil de você pegar, basta clicar visualizar o exemplo abaixo no JsFiddle:
Agora, se tudo o que você quer é o código puro, segue abaixo:
HTML e CSS
Por hoje é só… esse post foi rapidinho… Se gostou, compartilhe e nos siga nas redes sociais. VelhoBit, no Facebook, Twitter e Instagram.
Obs. Se você só quer o código pronto, pule para o final do post. Ou acesse o link do JSFiddle.
As vezes precisamos encontrar formas de destacar elementos na tela (coachmark). Isso é muito útil principalmente quando você está tratando de pequenos tutoriais, afim de ajudar os usuários. Convém, também, entregar soluções simples e esteticamente elegantes para que ajudem no relacionamento com a ferramenta.
Faz algum tempo, um cliente meu quis criar um modo tutorial em seu sistema. Esse tutorial não deveria permitir que outras áreas da tela fossem clicadas até que a pessoa confirmasse que compreendeu. Como designer, lembrei que, anos atrás, no Android, a Google usava uma espécie de spotlight, mas não vi nada a respeito para websites. E, também, eu precisava que fosse dinâmico. Então eu resolvi usar meus conhecimentos de CSS3 e Javascript para usar essa ideia. E é disso que eu falarei neste tutorial.
Apesar de eu ter usado originalmente jQuery, para compartilhar com todos, resolvi fazer uma versão com Javascript puro, de forma que você poderá adicionar a qualquer aplicação web que você já tenha.
Dessa forma, se já não tiver, teu projeto deve possuir um container principal que é pai de todos os elementos, mas abaixo do <body>. Se não houver, o crie, é até uma questão lógica de organização para evitar problemas futuros. Veja um código de exemplo:
A div container vai ser justamente o elemento que iremos clippar. Para ajudar em nosso exemplo, vamos criar um form básico dentro do container, ficando assim:
Para finalizar nosso HTML, vamos colocar a caixa de mensagens. Repare que no código abaixo a caixa de mensagem vai ter uma div chamada spacer. O objetivo dessa div vai ser adicionar o espaço do elemento referência, para que o código funcione também em dispositivos móveis e ela deverá ficar fora do container da aplicação. Mais à frente isso vai ficar mais bem explicado.
Agora que o HTML está pronto, vamos para o CSS inicial. A primeira fase é estabelecer todo comportamento da div que estamos usando como container. Também precisamos adicionar uma cor ao plano de fundo, que vai ser a cor que usaremos como base para a área em lowlight.
A animação ficará a cargo do recurso transition do CSS3. Importante ressaltar que uma animação criada por CSS é mais leve e possui melhor frequência do que uma criada pelo Javascript. Isso porque o navegador tenta usar a renderização da GPU nesses casos. Dessa forma, vamos aplicar o parâmetro transition para aplicar o efeito.
O parâmetro position como absolute, com suas larguras e alturas mínimas marcados como 100% servirão para emular o comportamento do body. Isso só é necessário porque alguns sistemas costumam ter áreas menores do que a primeira dobra do navegador. Nesse caso, apenas, é necessário aplicar esses três parâmetros.
Já para o CSS do bloco de mensagem, você pode fazer algo do jeito que preferir. Apenas é importante lembrar que esse bloco deverá ficar com positionabsolute, ou fixed, dependendo de como for sua aplicação, para que possa se encaixar no local correto.
Criando as Funções Javascript
Agora basta que a gente crie as funções de aparecer e desaparecer o spotlight. Originalmente eu havia usado jQuery, pois ele possui soluções rápidas e funcionais como o offset nativo e outerWidth, mas com uma pesquisa rápida conseguir adaptar, apesar do código ter ficado um pouquinho maior.
O código consiste em 4 blocos:
Capturar largura e posição em relação ao document, do objeto referência (que será passado como parâmetro), fazendo os cálculos apropriados para adição do círculo. Você irá reparar que é usado como base o raio e não o diâmetro, pois é a referência do parâmetro clip-path;
Adicionar o clip ao container;
Adicionar os textos da mensagem a partir dos parâmetros passados;
Aplicar os estilos com os novos parâmetros. O timeout que precede a adição da classe show da mensagem existe para que o texto apareça após a transição do spotlight.
Por fim, basta adicionar uma função que restaure as configurações originais dos estilos e textos.
Como sempre, deixei o código completo para você testar ou copiar. No caso, o código está no jsfiddle e você pode visualizar abaixo:
Se você gostou da publicação, curta e compartilhe esta página com o maior número de pessoas. Aproveite e curta nossa página do Facebook.
ATUALIZAÇÃO: Que tal experimentar uma versão com blur, usando o html2canvas? Obs. É meio pesado. Dê preferência a usar em projetos para desktop.
O Adobe Experience Design, ou simplesmente Adobe XD, já é uma ferramenta extremamente democrática para quem ama design ou simplesmente quer prototipar seus projetos. Isto porque além de estar disponível no Windows, MacOS e extensões para iOS e Android, ainda possui um plano gratuito.
Como já não bastasse ser tudo de bom, a Adobe lançou novas funções neste dia 15 de Outubro de 2018. Funções essas que são de deixar de deixar qualquer Times com cara de Helvetica.
Gatilho por Voz
Com a chegada de novos assistentes para a casa, como o Google Home Hub e o Alexa Echo Show, os designers de interação precisam prototipar também aplicativos que irão responder ao comando de voz. Por isso mesmo, a Adobe introdução uma forma de passar a tela por comando de voz! Veja no vídeo abaixo um exemplo de protótipo do Alexa Echo Show.
Pois é… tem gente que não é muito fã de passar um tempinho animando. Por isso, a Adobe introduziu um sistema de animação automática. Muito similar mesmo ao que a gente vê no Keynote, da Apple. Essa animação automática dá um resultado misto muito bom em elementos da tela, deduzindo o comportamento de cada elemento, para uma melhor transição dos mesmos.
Gatilho de Gesto de Arrastar
Uma das interações mais comuns dos dias de hoje é arrastar algo com o dedinho. Por que não ter isso no protótipo? Agora o AdobeXD tem um gatilho que nos permite arrastar um elemento para servir como gatilho para a passagem para a próxima tela, demonstrando o funcionamento correto daquele elemento.
E o que mais tem?
O Adobe XD ainda trouxe as opções de vincular símbolos, integrar facilmente elementos vetoriais do Adobe Illustrator CC (já havia no Photoshop) e ainda exportar, com alta fidelidade, o protótipo e suas animações, para o Adobe After Effects CC, ajudando o designer a vender mais facilmente sua ideia e criando mockups mais elegantes para apresentação.
O legal é que tudo isso já está disponível, e não só para os assinantes do plano Creative Cloud, como também para quem usa gratuitamente através do plano Starter.
