Sediada na Califórnia, a Adobe anunciou nesta segunda-feira (07/10/2019) que irá suspender a assinatura de todos os seus clientes residentes na Venezuela, para cumprir sanções econômicas impostas pelos Estados Unidos.
Em documento, a Adobe explica que se trata de uma ordem executiva emitida pelo governo americano, desde o dia 05 de agosto de 2019. A ordem criada para atingir diretamente o presidente venezuelano proibi quase todas as transações e serviços entre EUA e Venezuela, seja empresas, entidades ou contratações individuais.
Usuários terão até 28 de Outubro para baixar qualquer conteúdo armazenado em suas contas e irão perder total acesso no dia seguinte. Para piorar, os consumidores não serão ressarcidos por nenhuma compra ou inscrição.
Segundo a Adobe, a ordem executiva pede para “cessar toda atividade com entidades, incluindo nada de vendas, serviços, suporte, ressarcimentos, créditos, etc.” Dessa forma também está incluso na sanção os serviços gratuitos da empresa, o que inclui também as contas do Behance, MyPortfolio, Magento, Creative Cloud, aplicativos mobile, dentre outros.
Jony Ive é uma das maiores referências do design mundial. Descoberto por Steve Jobs, trabalhando no primeiro iMac, o designer foi responsável pelo modo com o qual a Apple tem baseado todo seu estilo e experiência, desde o final dos anos 90.
Após quase 30 anos como funcionário da Apple, Ive vai trabalhar em sua própria empresa, tendo como sócio o também famoso designer australiano Marc Newson (famoso pela criação de design de produtos para a Atmos, Monblanc, Nike, Louis Vitton e outros), que trabalhava na Apple desde 2014.
A empresa de Ive e Newson recebeu o nome curioso de LoveFrom (algo como “com o amor de”, em tradução livre).
Havia um funcionário que eu encontrei há alguns anos atrás, que o Steve estava falando… Ele disse que uma de suas motivações fundamentais era que quando você faz algo com amor e carinho, mesmo que você nunca venha a encontrar as pessoas para as quais você está fazendo isso, e nunca apertar sua mão… por fazer algo com carinho, você está expressando sua gratidão à humanidade, como espécie. Eu me identifiquei com essa motivação e fiquei comovido com a descrição dele. Então, minha nova empresa se chama “LoveFrom”. Ela resume em palavras o porquê de eu fazer o que eu faço.
Jony Ive
O mais curioso, e esse é o motivo das aspas no título, é que a Apple vai ser o primeiro cliente da empresa. Muitos projetos, que antes eram internos, agora vai ser da responsabilidade da empresa de Ive, como publicado pela própria Apple, à imprensa.
A Apple continuará se beneficiando do talento de Jony, trabalhando diretamente com ele em projetos exclusivos, e através do trabalho contínuo do brilhante e apaixonado time de design que ele criou. Depois de tantos anos trabalhando próximos, eu estou feliz que nosso relacionamento continua a evoluir e eu estou ansioso para prosseguir trabalhando com o Jony por ainda muito tempo.
Tim Cook (CEO da Apple)
Com informações da Apple, The Vergem, Finantial Times e Fast Company
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.
Na Microsoft Build 2019 iniciado nesta segunda-feira (06/05), a empresa fundada por Bill Gates apresentou uma série de novidades para seu mais recente navegador.
O principal destaque é o interesse da Microsoft em finalmente aposentar o Internet Explorer. Porém, a solução para isso, sem enfurecer os desenvolvedores de sistemas legados, é adicionar uma nova função ao seu novo navegador chamada de Modo Internet Explorer, que aciona o motor do Internet Explorer dentro do Edge, em determinadas situações.
https://www.youtube.com/watch?v=dKmzyj-ovkg
Ainda, foi feita uma rápida apresentação mostrando o Edge rodando no MacOS. Isso é possível agora que a Microsoft decidiu usar o webkit como seu motor de renderização. Vale ressaltar que o modo Internet Explorer não estará disponível para MacOS.
Além disso, foram apresentadas também soluções para Android e iOS, novidades a respeito de privacidade, melhorias de compatibilidade com o Office 360 e até mesmo a opção de usar extensões fora da loja do Edge.
Com isso, o Firefox passará a ser o único navegador, dentre os principais players, a não usar o motor desenvolvido pela Apple (webkit).
Sumido dos sistemas operacionais da maçã desde a versão 11, a suíte de aplicativos CorelDRAW nunca encontrou seu nicho com os consumidores dos Macbooks e iMacs. Por isso, a Corel resolveu concentrar o desenvolvimento de sua principal suíte apenas para no Windows.
Com a troca dos computadores para os smartphones, o público principal para desktops e laptops são os desenvolvedores, designers e criadores de conteúdos diversos. O crescimento de venda dos aparelhos da Apple, em especial nesse segmento, e alta taxa de migração, fez com que a Corel sentisse a necessidade de voltar ao mercado para a empresa do Tim Cook.
Além do CorelDRAW propriamente dito, a suíte ainda inclui o CorelDRAW 2019, o CorelPhoto-Paint, o CorelDRAW.app, o Fonte Manager e o AfterShot 3 HDR (concorrente do Adobe Lightroom).
Todos os novos recursos, download de avaliação e compra estão disponíveis no site da Corel. O custo atual da suíte é de R$ 75,00 ao mês, como serviço, ou R$ 2.399,00 para licença vitalícia.
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.
