Vou entrar neste assunto apenas uma vez porque eu vi muitos coleguinhas stressados com isso. Contantemente eu tenho visto perguntas como: “Qual navegador ainda vai rodar Flash?”, “Como faço com a minha aplicação Flex?”, “Tem como converter Flex ou Flash para Javascript”?
O que fazer com meu sistema?
Como você, caro leitor, deve saber, o Flash foi descontinuado de forma pesada e forte em 2021. E não adianta xingar, ficar irritado, ou gritar com a Adobe. O fato é que o ambiente ficou insustentável para a plataforma e correções foram abandonadas já a alguns anos e o suporte oficial também. Como o Flex foi uma plataforma extremamente forte em meados dos anos 2000, muitas aplicações, algumas nem tão antigas assim, e extremamente robustas, foram construídas em cima dele. Isso fez com que, mesmo diante de tanto aviso, muitas desenvolvedoras e desenvolvedores acabaram por não ter condições de desenvolver novas soluções completas que compensassem o fim da tecnologia. Por isso, para ajudar, vou sugerir duas soluções, uma de médio e outra de curto prazo, que pode auxiliar a você resolver seus problemas e continuar mantendo um suporte até ter condições de desenvolver uma solução definitiva.
Solução 1 – Médio Prazo
Em 2011, a Adobe doou o Flex para o Apache, então, desde 2014-2016, eles trabalharam em uma forma de portar o Flex para JS, através do FlexJS. Porém, o projeto do Flex não morreu, ele foi convertido para o Apache Royale. Essa pode ser uma solução a médio prazo para a maioria de vocês que estão tendo essa dificuldade. Pode ser uma solução em curto prazo também, se seu projeto foi bem desenvolvido. Ele usa MXML e AS3 e transpila para Javascript e HTML5 ao invés de Flash.
A página do Apache Royale, junto com seus links, pode ser encontrada aqui:
Solução 2 – CurtoPrazo
O Adobe AIR permite executar Flash em plataforma desktop. Ele teve seus esforços transferidos para o HARMAN, em 2019, uma empresa da SAMSUNG. Você pode simplesmente compilar sua aplicação Flex baixando o SDK do AIR através do link abaixo:
Basta aceitar os termos e baixar. A plataforma continuará sendo mantida pela empresa. Porém, é necessário ficar atento a licença. Em geral, para a maioria dos usuários, a licença gratuita resolverá e sua dependência é por valor de receita.
Update – Solução 3 – Ruffle
Uma solução que tem tudo para ser permanente e até, quem sabe, dar uma sobrevida ao Flash, é o Ruffle. O Ruffle é um emulador de flash player construído em Rust, que pode ser usado para animações e aplicações. O mais legal é que ele pode ser usado não apenas em seu servidor, mas como extensão do navegador ou para quem possui aplicações desktop e não queiram usar o Adobe AIR da HARMAN.
OBS: Eu não tenho NADA a ver com a Adobe, nem a Harman, mas trabalhei por muitos anos com a plataforma Flex e compreendo sua enorme importância e contribuição para o que temos hoje em termos de front-end e UX. Estou postando isso apenas para ajudar.
Caso eu saiba de mais alguma solução, eu vou atualizar este poste. Fica de olho no Facebook / Instagram ou no grupo, que eu sempre atualizo as coisas por lá.
Uma das melhores coisas do Windows 10 é a possibilidade de instalar um subsistema Linux nele. Com isso, você pode montar o seu servidor Apache direto nesse subsistema, deixando o ambiente local muito mais similar a onde você vai efetivamente publicar, e com muito mais performance e liberdade do que os AMPs disponíveis para o Windows (Xamp, Wamp, Mamp).
Habilitando e Instalando o Subsistema
Primeiro certifique-se que está usando a versão mais recente do Windows 10. Apesar do susbsistema Linux estar disponível há alguns anos, é interessante manter sempre sua máquina atualizada.
Clique em iniciar e digite Ativar ou Desativar Recursos do Windows, ou acesse a partir do Painel de Controle Clássico.
Ao abrir, desça a barra de rolagem até encontrar a opção Subsistema Linux para Windows. Ative a caixa e pressione em OK.
O Windows pedirá para reiniciar o sistema e fará alguns ajustes, para então permitir que você possa instalar uma distribuição Linux.
Uma vez reiniciado, você já pode fazer a instalação da distribuição. Para isso abra Microsoft Store. Na guia Pesquisar, pesquise por Linux. Uma grande opção contendo várias distribuições será mostrada a você.
Escolha a distribuição que melhor funcionar para você. Nesta demonstração iremos usar o Ubuntu, mas se você preferir uma distribuição baseada em outra distro, fique à vontade. Porém a integração do Ubuntu com o Windows é trabalhada em conjunto entre a Microsoft e a própria Canonical, o que deve garantir, teoricamente, uma integração melhor.
Para você trabalhar com o Subsistema Linux, você pode usar o próprio Prompt de Comando, ou o Power Shell, porém, a Microsoft lançou recentemente um Terminal para o Windows. Esse novo Terminal pode ser baixado diretamente pela Microsoft Store e é altamente recomendável seu uso, pois ele traz muitas melhorias para a usabilidade do WSL (Windows Subsystem Linux).
Para finalizar a instalação, simplesmente abra o Terminal e digite: ubuntu (ou o nome da distribuição que você escolheu) e aguarde a instalação. Ele pedirá para você criar uma conta de administrador e a senha.
Após instalar, se você fechar e abrir o Terminal, notará que apareceu mais uma opção para nova aba. Caso você prefira, você pode editar, em Settings, para que o Ubuntu seja o padrão, simplesmente alterando a configuração em seu json. Porém, se preferir, você também pode abrir o Ubuntu simplesmente digitando pelo OS a partir da barra de pesquisas, mas nesse caso ele abrirá o terminal dentro do console padrão do Windows.
Instalando o PHP e MySQL em seu Ubuntu Linux
A partir daqui não é diferente de instalar em um Ubuntu completo, porém, como a maioria dos usuários de Windows não possui familiaridade com os sistemas baseados em Linux, vamos detalhar passo a passo.
Obs: Se você quiser copiar o código aqui digitado, você pode digitar ctrl+c aqui e, no terminal, apenas clicar com o botão direito (esta ação será equivalente ao ctrl+v).
Antes de tudo, vamos dar um update para preparar o ambiente.
Instalando o Apache 2
Para instalar o servidor do Apache, e verificar se a instalação está correta, simplesmente use os comandos abaixo, no Terminal:
Ao iniciar o apache, é possível que você receba a seguinte mensagem:
Windows TerminalProtocol not available: AH00076: Failed to enable APR_TCP_DEFER_ACCEPT
Não se preocupe com esse problema. Simplesmente esse protocolo ainda não está nativamente implementado no WSL. Você pode apenas ignorar ou adicionar as seguintes linhas no arquivo /etc/apache2/apache2.conf :
AcceptFilter https none
AcceptFilter http none
Instalando o PHP
Instalaremos o PHP 7.4 (então versão mais atual na última atualização deste post), mas você pode utilizar qualquer tutorial para Ubuntu para outras versões, ou simplesmente trocar os caminhos aqui associados. Atualizaremos este post conforme forem surgindo novas atualizações. Digite Y (yes) para tudo o que for perguntado.
Instlamos, assim, o cliente e os pacotes mais utilizados, mas você pode, futuramente, instalar pacotes adicionais para funções específicas. A terceira linha apenas verifica a versão do PHP instalada, para checar se está tudo correto.
Instalando o MySQL
Por último vamos instalar o MySQL. Você pode trabalhar com outros bancos de dados se quiser, basta, como dito anteriormente, usar qualquer tutorial para Ubuntu (ou a distro que você escolheu), pois, relembrando, o WSL é realmente um subsistema Linux instalado e integrado ao Windows. Ele não é uma máquina virtual ou emulação. Lembre-se de pressionar o Y, quando perguntado.
Caso perguntado, você pode ou não definir uma senha para o root do MySQL. Como você está em um ambiente de desenvolvimento, isso não é importante por hora. Mas lembre-se que em ambientes de produção uma senha forte deve ser usada.
Garantindo todos os privilégios para usuário administrador
Para você poder gerenciar todos os bancos e não ter que criar um usuário para cada um, você pode criar um usuário administrador e facilitar seu trabalho. Use o código abaixo para acessar o cliente mysql. Use a senha criada anteriormente.
Agora, use o código abaixo para criar o usuário administrador e você poder trabalhar de forma universal.
Digite \q para sair do cliente.
PHPMyAdmin
Você pode usar algum cliente externo para administrar o MySQL, mas a opção mais comum usada é instalar o PHPMyAdmin. Simplesmente utilize o seguinte comando:
Obs. A instalação irá perguntar se deseja instalar apache ou nginx, neste caso marque apache. Para marcar pressione espaço, se não fizer isso ele não instalará corretamente e você precisará rodar a instalação novamente.
Durante a instalação, você será questionado para criar uma senha para o PHPMyAdmin, caso deseje.
Testando
Uma vez que já instalamos e já inicializamos, podemos testar simplesmente acessando http://localhost. Para o PHPMyAdmin, use http://localhost/phpmyadmin
Para entrar no PHPMyAdmin, utilize o usuário e senha criado acima, com os privilégios:
Habilitando as configurações do Apache
Para poder funcionar corretamente certas opções, como o habilitar .htaccess, habilitar ou desabilitar determinados módulos, configurar max_*, etc., é ideal que você configure o Apache Virtual Hosts.
Feito isso, você pode configurar o VirtualHost para diversos sites, portas, ou simplesmente especificando configurações específicas para cada site / sistema em que você está trabalhando.
O arquivo de configuração gerado, fica em: /etc/apache2/sites-available/000-default.conf
Informações Importantes
Você pode iniciar o apache e o mysql a qualquer momento, simplesmente abrindo o Windows Terminal, no Ubuntu (ou direto pelo app Ubuntu) e colocando:
A pasta padrão dos arquivos do Apache é: /var/www/html
Para você abrir a pasta no Windows Explorer e você ver o os arquivos, digite no Terminal:
Recomendo que, para você poder operar sem problemas, no Windows, você execute, para dar permissão total:
Extra: Criando um SSL autoassinado
Dependendo do que você estiver programando, pode ser necessário você utilizar uma conexão SSL. Isso geralmente é necessário em testes que irão alimentar diversas APIs ou até para utilizar alguns recursos do HTML5.
O Ubuntu já possui o openssl instalado nativamente no sistema. Então, basta você colocar:
Enquanto você estiver criando o certificado, ele irá fazer algumas perguntas de identificação. Como é algo que vai ser usado localmente, essas informações não precisam ser reais ou fidedignas, basta responder. A ordem é:
Nome de País (em código de 2 dígitos) – Brasil é BR
Estado
Cidade
Nome da Organização
Unidade da Organização
Common Name – Digite localhost
E-mail – Digite webmaster@localhost
Isso vai ser suficiente para criar um certificado auto-assinado, que vai funcionar localmente.
Agora vamos nas configurações do Virtual Hosts do Apache, para SSL.
Dentro do arquivo, cole o seguinte texto (é uma configuração genérica, mas suficiente para nosso caso):
SSLCipherSuite EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH
SSLProtocol All -SSLv2 -SSLv3 -TLSv1 -TLSv1.1
SSLHonorCipherOrder On
# Disable preloading HSTS for now. You can use the commented out header line that includes
# the "preload" directive if you understand the implications.
# Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains; preload"
Header always set X-Frame-Options DENY
Header always set X-Content-Type-Options nosniff
# Requires Apache >= 2.4
SSLCompression off
SSLUseStapling on
SSLStaplingCache "shmcb:logs/stapling-cache(150000)"
# Requires Apache >= 2.4.11
SSLSessionTickets Off
Obs. Digite CTRL+X, seguido de Y, seguido de ENTER, para fechar o nano, salvando.
Agora vamos editar a configuração do SSL.
Com o arquivo aberto, você vai substituir os parâmetros abaixo, de acordo com o demonstrado na lista:
Por fim, basta colocar no terminal, para ativar o ssl no Apache:
Se estiver tudo configurado corretamente, ele vai responder SINTAX OK.
Antes de recarregar o Apache, teremos que liberar a pasta onde salvamos o certificado. Vamos liberar para 777, para facilitar, apenas porque estamos em ambiente de desenvolvimento. JAMAIS FAÇA ISSO EM AMBIENTE DE PRODUÇÃO.
Por fim, precisamos adicionar o SSL como confiável no Windows. Caso contrário, ao entrar em https://localhost, você vai receber aquela clássica tela de certificado não confiável.
Agora vá até a pasta onde você baixou o certificado e abra a pasta no explorer. Procure pelo arquivo do certificado apache-selfsigned.crt. Clique duas vezes nele para instalar no Windows.
Ao abrir o certificado, clique no botão Instalar Certificado
Simplesmente siga os passos para a instalação do certificado
Na área de Importação, selecione para colocar no repositório de Autoridades de Certificações Confiáveis, como nas imagens abaixo.
Você vai precisar confirmar a instalação do certificado. Marque Sim.
Agora é só acessar o localhost com https e ser feliz!
Quase todo site, sistema, ou app, hoje, precisa ter um botão para compartilhamento via Whatsapp. Para facilitar todo esse processo, o Whatsapp disponibiliza uma API própria para facilitar o processo para desenvolvedores.
Porém, para o trabalho mais básico, um simples link de interação com um início de conversa, a documentação não é muito clara quanto a caracteres especiais e links.
Criando um link para iniciar a conversa
Para você criar um link para iniciar uma conversa, basta usar a URL https://api.whatsapp.com/send e passar os parâmetros específicos.
Na prática, você poderia passar algo como:
Importante: O telefone deve conter DDI e DDD e ser apenas número. Por exemplo, você vai mandar uma mensagem para alguém de Recife/PE – Brasil, o telefone precisa ser: 5581numero_do_celular.
Até aí é bem simples. O problema está quando você quer enviar um parâmetro em um link, ou quando você quer enviar caracteres especiais como quebra de texto. O que vai acontecer é que a API do Whatsapp simplesmente irá remover qualquer tipo de código que ele considerar inseguro, através de um processo chamado de Sanitização.
O Whatsapp, entretanto, utiliza-se de uma versão própria de parâmetros simples para tratar richtexts. Ou seja, simplesmente basta você converter os valores que você quer para URL Encode. Isso fará com que o texto seja entregue da forma como você planejou e você possa aplicar caracteres especiais e formatação.
Exemplo prático
Digamos que você queira enviar a seguinte mensagem:
A pia pinga, o pinto pia… Quanto mais a pia pinga, mais o pinto pia.
Acesse https://ratimbum.com/?token=333 para saber mais.
Perceba que o texto possui negrito e quebra de texto e seu código será algo como:
Sim, você deverá usar \n para quebrar o texto. Porém, a sanitização vai retirar o \n e o ?, o que vai criar um resultado não esperado.
Para resolver o problema, basta você converter o texto para URL Encode. No javascript, por exemplo, ficará assim:
Dessa forma, você pode optar por colocar esse código dinamicamente em um <a> ou, o que recomendo, enviar através da função window.open, do Javascript.
Obs. Você não precisa converter para \n se for pegar o texto a partir de um <textarea>, como mostrado no exemplo mais abaixo.
É importante salientar que se você estiver testando no Whatsapp web, a quebra de linha não é mostrada na pre-visualização, mas será mostrada no momento do envio real da imagem.
Durante a pré-visualização não é mostrado a quebra de linha…… mas na hora realmente do envio ele vai ter a quebra de linha.
Corrigindo erro ERR_BLOCKED_BY_RESPONSE
Foi relatado que, em alguns casos, ocorre o erro ERR_BLOCKED_BY_RESPONSE, em alguns navegadores ou condições específicas (principalmente no Firefox). Isso ocorreu devido a algumas atualizações não bem descritas da API do Whatsapp.
Para corrigir esse problema, faremos uma pequena atualização no código acima, o qual será necessário verificar se é mobile ou não, e passar o prefixo web no lugar de api. Acredito que também exista uma correlação quanto a navegadores desatualizados, que estejam causando o problema.
Ocorre também que o código questão modifica um comportamento. Ele não mais alertará o usuário de que uma mensagem será enviada. Ao contrário disso, ele já abre direto no Whatsapp web.
Outras opções
Se o intuito, porém, for utilizar também outras propriedades do richtext, como negrito e itálico, você deverá simplesmente passar _ (itálico), * (negrito), ~ (riscado) ou “` (tamanho fixo). Exemplo:
Como sempre, no final do post tem um código de exemplo, onde você pode testar o envio de mensagem ou apenas copiar o código.
(O código está compartilhado pelo jsfiddle. Então, para ver corretamente, use pelo desktop/laptop)
Gostou da postagem? Siga nossas mídias sociais e compartilhe com os coleguinhas.
Eu sei, o título é grande, mas trata-se de uma tecnologia muito útil quanto a usabilidade. A ideia é criar, da forma mais simples possível um uploader que mostre a porcentagem do que está sendo enviado, com múltiplos arquivos. Porém, não apenas isso, mas da forma mais pura possível, sem a necessidade de frameworks, bibliotecas de terceiros ou pre-processadores. Em nosso tutorial, usaremos PHP no back-end, mas você pode usar a linguagem que melhor lhe adequar. Abaixo você pode testar um exemplo:
DISCLAIMER: Para preservar você, o blog e a mim, o upload.php do exemplo não está fazendo upload de verdade, então você não vai ter acesso ao arquivo no final, porém, no link do github está o código funcional.
Antes de prosseguir, vou alertar que estou usando o font-awesomeno exemplo, apenas para não ter que fazer nenhum upload de imagens por hora, mas ele não é obrigado para o que vamos fazer.
Iniciaremos com um HTML bem simples. Vamos definir apenas a área de upload, da lista e uma área onde ficará o input. Esse input deve ser do tipo file e deve estar com o atributo mutiple definido. Nada muito especial por enquanto, pois nosso trunfo está mais no CSS e Javascript.
CSS3
O CSS que usaremos tem pontos específicos aos quais devemos prestar atenção. Por isso, vamos ver por trechos:
A área de upload é definida pelo CSS a partir de um espaço abrangente. O label, vai ser a referência que vamos usar para atingir toda a área pré-determinada e é o que vai também receber o estilo que indicará onde e quando pode soltar o objeto. Dessa forma, deve estar com um position: absolute, pegando toda a área do upload. Um detalhe importante é que esse label não pode possuir filhos com eventos do mouse, pois isso pode acarretar em funcionamento inadequado ao fazer um hover em uma área não indicada.
A área marcada como hightlight é justamente para demonstrar ao usuário que ele já pode soltar o arquivo.
O input vai nos servir de área de drop. Isso já é um padrão tanto para Windows, MacOS e Linux – de receber um (ou mais arquivos) arrastando os dados para o botão. Retirando a aparência padrão, podemos nos aproveitar dessa função e economizar várias linhas de código do Javascript. Não havendo a necessidade de configurarmos eventos de arquivos.
Talvez a área que possa confundir um pouco mais, principalmente os mais novatos, seja o CSS referente as barras de loading. As barras são definidas como relative e seu conteúdo como absolute. Dessa forma, podemos herdar a porcentagem do upload e usá-la diretamente no min-width do elemento. Usamos min-width, ao invés de width para utilizar o transition, dando uma leveza no upload ao invés de pequenos estalos.
Javascript
Inicialmente iremos definir os efeitos de drag and drop. Utilizaremos os eventos específicos para adicionar ou retirar o css de hightlight. Aquele que falamos acima ao montar o CSS.
Agora precisamos validar os dados antes de colocar em nosso servidor. Compusemos uma validação que verifica o tipo de arquivo e a quantidade máxima de 2MB. Essa validação é totalmente no front-end. É recomendado que você também faça uma validação posterior no back-end para evitar fraudes. Essa função receberá como parâmetro um arquivo, o qual faremos a validação.
Para enviar os arquivos, usaremos uma função AJAX simples. Fazemos um request no método POST. Nesta função, iremos capturar também a porcentagem do upload e atualizaremos a barra a partir desta, através do evento progress. Essa nossa função receberá o índice, para identificar o arquivo que está sendo enviado e a barra que será modificada.
Por fim, iremos juntar um pouco de cada coisa que fizemos, adicionando uma função em um evento change do input do upload. Neste momento, também é feito o laço dentre o(s) arquivo(s) selecionado(s) para validar e, se for válido, fazer o upload, utilizando os outros métodos acima mencionados. É neste momento também que serão criadas dinamicamente as barras: uma para cada arquivo.
PHP
E pra terminar com chave de ouro, um PHPzinho que receberá esses arquivos e retornará um json com a confirmação de sucesso ou erro. Não aplicamos muitas validações nesse PHP pois nosso foco era neste exemplo está no front-end, mas é suficiente para que você compreenda sua funcionalidade.
E, como sempre, você pode baixar o código inteiro no Github e usar direto na sua aplicação.
Gostou? Se sim, compartilha com seus amiguinhos interessados na área e curte a página no Facebook. O exemplo acima está levemente modificado para que funcione melhor aqui no site. Entre também no grupo de Design e Desenvolvimento. O link está abaixo do post.
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.
Melhorar a experiência do usuário é sempre importante. E, muitas vezes, resultados de pesquisas tendem a ser muito grandes, principalmente em pesquisas semânticas. Por que então não destacar o elemento buscado para facilitar que o usuário saiba a linha e/ou coluna correta? E, como sempre, Javascript puro.
Exemplo
Coluna A
Coluna B
Coluna C
abacaxi
manga
limão
coelho
espinafre
jerimum
tomate
cebola
rapadura
HTML
Para começar, vamos criar o form e a tabela. Nada complicado e semanticamente correto.
CSS
Precisamos fazer o CSS. De forma geral, não precisamos criar tantas opções. O importante é você criar as classes referentes ao highlight e ao highlight da coluna. Tem um charminho de escala e sombra, mas você faz como achar melhor.
Javascript
Agora vem a parte que pode complicar um pouco. A primeira coisa que precisamos fazer é certificar-se, em um laço, que limparemos as classes high_col e high dos outros elementos. Em seguida, iremos usar a função evaluate para verificar se o texto digitado está contido em uma das células. Para capturar os td’s da coluna ativa, iremos verificar o índice da célula encontrada e usaremos isso para colocar a classe nas outras células e cabeçalho dessa coluna.
Obs. Se você quiser buscar pelo valor específico, substitua o evaluate por document.querySelector(“td[text()=’”+word+”‘]”). Dessa forma não será selecionado nenhuma célula a menos que o valor seja exato.
Simples não é?
Como sempre, o exemplo e código completo está disponível abaixo, desta vez no jsFiddle. Basta copiar o código se quiser usar diretamente em seu projeto.
Disclaimer: Provavelmente a funcionalidade de webcam não está acessível via navegador interno de aplicativo (como o navegador interno do app do Facebook ou outro app mobile). Experimente direto em um navegador (mobile ou desktop).
O HTML5 nos trouxe diversas opções interessantes para desenvolvimento de RIAs (Rich Internet Applications). Em diversos sistemas online, precisamos de uma foto da pessoa que está sendo cadastrada. Para sistemas de hotéis, saúde, academias, dentre outros, que precisam de maior identificação, podemos usar a webcam para fazer a foto na hora que poderá ser usada em posterior conferência. Recurso esse que também está disponível em dispositivos móveis.
A ideia é transformar a imagem corrente da webcam em uma imagem base64. Após isso, converter essa codificação em uma imagem JPG e devolver o caminho – quase como se fosse um upload. Dessa forma você poderá salvar apenas o caminho da imagem no seu banco de dados, sem ficar um campo muito extenso ou que possa falhar em dispositivos móveis. Neste exemplo, será usado Javascript puro, a fim de universalizar para quem quiser utilizar em sua aplicação web.
Exemplo:
HTML5
Vamos começar criando nosso exemplo com os elementos HTML. Tudo o que realmente precisamos é de uma tag button e uma tag video, mas para poder visualizar o exemplo, vamos colocar o retorno em um img, link da imagem gerada e um textarea para vermos o base64.
Não precisamos necessariamente de um CSS para poder funcionar, mas, apenas para exemplo, vamos colocar um CSSzinho…
Javascript
Agora vamos para a parte divertida. Basicamente vamos dividir nosso código em 3 partes: Chamar a webcam, tirar o instantâneo, e enviar/receber os dados do PHP. Criaremos o arquivo script.js.
A função LoadCamera, irá transformar a webcam em uma espécie de streamming local. Para isso, é necessário que o navegador tenha suporte a isso, logo, precisamos de um navegador moderno com total compatibilidade a HTML5. Basicamente, todos os navegadores modernos, então não pense em compatibilidade com Internet Explorer.
Você deve ter notado que a função acima tem um comentário com alguns parâmetros adicionais. Esses parâmetros são necessários para o funcionamento no iOS.
Já a função takeSnapShot irá justamente tirar o instantâneo. Essa função irá criar um elemento canvas e desenhar em seu conteúdo uma imagem matricial, baseada no vídeo (um ctrl+c / ctrl+v automático, digamos assim). A partir daí podemos obter o base64 desse canvas e utilizá-lo para enviar posteriormente.
Você pode, inclusive, se quiser, já adicionar essa base64 em no src de um elemento img.
Agora, precisamos enviar essa base64 para o PHP. Usaremos o PHP para salvar a imagem em um arquivo jpg (você pode optar por png também). O PHP irá retornar, posteriormente, um json com o caminho completo da imagem, que iremos carregar no objeto img descrito no HTML supracitado. Faremos isso dinamicamente, por técnica de Ajax, sem formulário, pois o submit de um form poderá ser usado futuramente para a conclusão de um determinado cadastro:
PHP
No lado do PHP, basicamente, usaremos um $_POST para capturar o dado enviado via Ajax pelo Javascript. Criaremos então o arquivo salvar_photos.php.
Não há muitos segredos, mas é importante se atentar a dois detalhes:
Os dados chegam com o + transformado em espaço, então precisamos converter novamente para + com um replace.
Precisamos salvar apenas os dados mime, sem os cabeçalhos, logo precisamos dar um explode para coletar apenas os dados.
Fora isso, basicamente colocamos os dados em um arquivo JPG e retornamos a URL em json para ser lido pelo Javascript novamente.
Uma vez tudo pronto, basta chamar a função loadCamera() no evento que você quer que ele seja disparado.
Como sempre, deixamos o código disponível para quem quiser utilizar. Desta vez, o código está no GitHub.
ATENÇÃO: O navegador não vai liberar o uso das ferramentas em um ambiente http. Você precisa necessariamente estar com seu site ou sistema em conexão segura (https).
Se gostou, compartilha com seus amiguinhos interessados na área e curte a página no Facebook. O exemplo acima está levemente modificado para que funcione melhor aqui no site. Entre também no grupo de Design e Desenvolvimento. O link está abaixo do post.
As vezes você precisa trabalhar com sites ou projetos multi-idiomas. Alguns desses projetos carregam dinamicamente a tradução ou possui páginas específicas em outro idioma. Redirecionar automaticamente para o conteúdo específico da região é um comportamento fundamental para uma boa experiência do usuário.
Detecção por Geolocalização
A forma mais simples e rápida de fazer isso, é através de uma API open-source online chamada Nekudo (https://geoip.nekudo.com/). O Nekudo não está mais disponível e virou IPI. Você precisa fazer um cadastro gratuito em https://ipapi.com/product e pegar sua chave e cadastrar o IP. Na dúvida de saber qual o IP do seu server, abra o seu prompt de comando (windows) ou terminal (Unix/Mac/Linux) e digite ping seusite.com.br.
A forma ideal de fazer isso é a partir da sugestão, ao invés do redirecionamento direto, como é feito no site da Apple e Adobe. Isso porque o usuário pode estar em viagem ou simplesmente preferir usar o conteúdo em outro idioma.
Vamos para a prática.
Javascript
Para facilitar, vamos usar um jQuery básico, que está presente em quase todos os sites e sistemas. Basta um “ajaxizinho” apenas para chamarmos a API do Geoplugin.
A URL https://api.ipapi.com/, seguido da chave e IP já devolve os dados em formato JSON. Como ele vai pegar o IP atual do usuário, não é necessário passar o IP:
O retorno então será:
Agora basta tratarmos o código para que execute uma ação e depois redirecione. Ficando assim:
Nesse ponto, apenas verificamos se não está no Brasil e ele vai redirecionar a página em questão.
Todavia, ele não vai guardar essa preferência. Logo, toda vez que a pessoa entrar no site, ela vai ter que responder a pergunta novamente. Mas para evitar que isso ocorra, podemos usar o localStorage. Garantindo assim que seja memorizada a opção e evitando que a API seja requerida desnecessariamente. O código final ficaria assim:
Como saber se está funcionando?
Para testar, basta você usar um serviço de VPN. Você pode fazer isso através de algum site, programa ou simplesmente rodando pelo Opera, que já possui uma VPN própria e é ótimo mantê-lo instalado para testes. Recomendamos que você use o Opera, pois, além de ser um bom navegador, ele é mais seguro para evitar usar sites duvidosos ou serviços de terceiros. O Opera Developer é uma boa opção e possui VPN integrado. Clique na imagem para ser direcionado a página de download oficial.
Após instalar o Ópera, para habilitar o VPN, basta ir nas configurações, a partir do símbolo do O, no canto superior esquerdo.
Indo na guia Avançados > Recursos, ele vai retornar a primeira opção como VPN. Simplesmente a habilite.
Feito isso, a opção de VPN vai ficar visível e você poderá testar o funcionamento em diversos locais.
Ah, mas eu não quero redirecionar assim, quero que seja pelo servidor
Muito bem, digamos que você queira que o redirecionamento seja feito direto pelo servidor porque você é mal que nem um pica-pau. Sem problemas.
Para isso, você pode usar o cURL da sua linguagem de preferência e fazer o redirecionamento através dela. Aqui vai um exemplo mais comum, em PHP:
Lembrando que isso precisa ser inserido antes mesmo do doctype, pois se não pode retornar o erro de Headers Already Sent.
Concluindo
É bem simples testar o IP quanto a localização. Há diversos serviços, alguns pagos e outros gratuitos, que fazem esse tipo de redirecionamento. Também há plugins e extensões que você pode instalar em seu servidor, mas certamente a demonstrada aqui vai servir para a grande maioria dos projetos.
