Tag: design

Como centralizar verticalmente elementos HTML com CSS

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.

2 de junho de 2021

Como adicionar e remover dinamicamente campos HTML em um Formulário? (Javascript puro)

O Javascript nos permite criar conteúdos dinâmicos e podemos usar isso para adicionar remover e adicionar elementos de acordo com as opções do usuário. Dados como informações sobre dependentes, links de mídias sociais, e-mails adicionais, etc. são curtos e não fazem sentido criarmos um formulário separado apenas para estes. Por isso, é interessante incluirmos a opção de adicionar diretamente esses campos em um subformulário dinâmico.

Obs. Se quiser ir direto para o código final, procure o link do JsFiddle no final do post.

HTML

Para iniciarmos, basta criar um container no HTML onde você quer que os elementos sejam exibidos, além do botão simples de adição e um botão de captura de dados, para que, desta forma, possamos enviar o JSON resultante para o back-end.

A organização dos containers é sempre muito importante quando trabalhamos com Javascript e nos dedicamos ao uso correto da web semântica.

<div class="dependentes">
  <button id="btnAdicionarDependentes">
  📝Adicionar Dependentes
  </button>
  <div class="container" id="dependentesContainer">
  </div>
  <button class="green" id="btnCapturarDados">
  ✅ Capturar Dados
  </button>
</div>
<pre id="containerDados"></pre>

Javascript

Como de praxe, usaremos o Javascript puro para realizar essa tarefa, dessa forma você poderá usar em qualquer lugar o que aprender aqui.

Para poder capturar e devolver os dados, usaremos um objeto JSON, dessa forma fica fácil remontar, tanto no back-end, quando no front-end, os dados nas formatações e/ou elementos que precisamos.

Vamos criar, como exemplo, o JSON abaixo, e vamos declará-lo em uma variável global chamada dependentes, seguindo a ideia de um cadastro de lista de dependentes, então temos:

var dependentes = [{
  identificador: 13,
  nome: "Joana da Silva",
  idade: 12,
}];

Agora vamos nos focar nas funções. A primeira coisa que vamos fazer é criar um método que pegue os dados do JSON e o converta para elementos HTML renderizados na tela. Dessa forma, usaremos um laço para ler o JSON e aplicamos seus dados em uma template string e o adicionamos no container específico:

function carregarDependentes() {
  let dependentes_container = document.querySelector("#dependentesContainer");
  dependentes_container.innerHTML = "";
  dependentes.forEach((el) => {
    let identificador = el.identificador;
    let nome = el.nome;
    let idade = el.idade;
    let dependente_container = `<div class="dependente" data-id="${identificador}">
    								<input class="nome" placeholder="Digite o nome" type="text" value="${nome}">
                                    <input class="idade" placeholder="Digite a idade" type="number" value="${idade}">
                                    <div class="action">
                                        <a href="#" class="salvar">salvar 💾</a>
                                        <a href="#" class="remover">❌</a>
									</div>
                                </div>`;
    dependentes_container.innerHTML += dependente_container;
  });
}

Agora vem o segredo que facilita o processo e o deixa mais organizado. Ao invés de remover e adicionar os elementos na tela, iremos nos focar em remover e adicionar do JSON e, em seguida, regenerar os elementos a partir desse objeto. Ficando, assim, com um código mais limpo. Outro motivo pelo qual usamos a regeneração dos elementos é para evitar criarmos IDs únicos temporários. Ao regenerar, podemos usar os índices do próprio array como identificador.

Para adicionar um novo item, basta incluirmos um dado vazio no JSON, porém, seguindo nosso modelo, e mandamos gerar novamente os elementos:

function adicionarDependentes() {
  dependentes.push({ identificador: "", nome: "", idade: "" });
  carregarDependentes();
}

Para remover, similar a criação de um novo, vamos usar um laço, porém para adicionar o evento aos botões de excluir. Usaremos então o método splice para remover o array. Depois, obviamente, vamos regenerar os elementos a partir da função carregarDependentes():

function removerDependentes() {
  document
    .querySelectorAll("#dependentesContainer .remover")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        dependentes.splice(i, 1); // O splice vai remover um item do array no JSON
        carregarDependentes(); // E chamamos o método para regenerar os elementos
      });
    });
}

Uma vez que adicionamos uma nova linha em branco precisamos salvar seu preenchimento e aí iremos usar a mesma lógica de remoção, mas usaremos o splice para substituir e não para remover um dado do JSON. Porém, adicionaremos uma pequena validação para evitar entrar dados incompletos:

function salvarDependentes() {
  document
    .querySelectorAll("#dependentesContainer .salvar")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        let identificador = el.parentElement.parentElement.getAttribute(
          "data-id"
        );
        let nome = el.parentElement.parentElement.querySelector(".nome").value;
        let idade = el.parentElement.parentElement.querySelector(".idade")
          .value;

        if (!nome.length || !idade.length) { // Verifica se nome e idade foram preenchidos
          alert("Nome e idade precisam ser preenchidos para salvar.");
          return false;
        }
        dependentes.splice(i, 1, {
          identificador: identificador,
          nome: nome,
          idade: idade,
        }); // Substitui o dado no JSON
        carregarDependentes(); //  E chamamos o método para regenerar os elementos
      });
    });
}

Um outro método que precisamos adicionar é uma forma de bloquear para que um usuário consiga clicar em outros elementos ao redor, sem antes finalizar a edição do item. Para isso, iremos fazer um laço que adiciona uma classe de CSS, que vamos chamar de disabled, em todos os elementos, exceto o que está sendo editado. Essa classe possui um point-events: 0 e um opacity: 0.5. Para demonstrar que está desativado, você pode ainda adicionar outros efeitos, como filtros de baixo contraste ou escala de cinza.

function travarOutros(element) {
  if (element == false) { // Passar false como parâmetro para que todos os elementos fiquem habilitados novamente, ao invés de apenas o elemento que queremos liberar
    document
      .querySelectorAll(".dependentes button, .dependentes .container > div")
      .forEach((el) => {
        el.classList.remove("disabled");
      });
    document.querySelector("#containerDados").innerHTML = "";
    return false;
  }
  document
    .querySelectorAll(".dependentes button, .dependentes .container > div")
    .forEach((el) => {
      if (el != element) {  // Verifica se o elemento no laço é o que está sendo editado
        el.classList.add("disabled");
      }
    });
}

Agora, antes de continuarmos, vamos revisitar as funções acima para chamar, quando necessário, uma função dentro da outra (leia os comentários no código para entender), ficando assim:

function carregarDependentes() {
  let dependentes_container = document.querySelector("#dependentesContainer");
  dependentes_container.innerHTML = "";
  dependentes.forEach((el) => {
    let identificador = el.identificador;
    let nome = el.nome;
    let idade = el.idade;
    let dependente_container = `<div class="dependente" data-id="${identificador}">
    															<input class="nome" placeholder="Digite o nome" type="text" value="${nome}">
                                  <input class="idade" placeholder="Digite a idade" type="number" value="${idade}">
                                  <div class="action">
                                  	<a href="#" class="salvar">salvar 💾</a>
                                    <a href="#" class="remover">❌</a>
																	</div>
															  </div>`;
    dependentes_container.innerHTML += dependente_container;
  });
  salvarDependentes(); // Adicionamos o método aqui para que o laço seja aplicado nos novos items adicionados
  removerDependentes(); // Adicionamos o método aqui para que o laço seja aplicado nos novos items adicionados
  travarOutros(false); // Adicionamos para destravar tudo
}

function removerDependentes() {
  document
    .querySelectorAll("#dependentesContainer .remover")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        dependentes.splice(i, 1);
        carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
      });
    });
}

function adicionarDependentes() {
  dependentes.push({ identificador: "", nome: "", idade: "" });
  carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
  travarOutros(
    document.querySelector("#dependentesContainer > div:last-child")
  ); // Desabilitar todos os outros elementos, exceto o que acabou de ser adicionado
}

function salvarDependentes() {
  document
    .querySelectorAll("#dependentesContainer .salvar")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        let identificador = el.parentElement.parentElement.getAttribute(
          "data-id"
        );
        let nome = el.parentElement.parentElement.querySelector(".nome").value;
        let idade = el.parentElement.parentElement.querySelector(".idade")
          .value;

        if (!nome.length || !idade.length) {
          alert("Nome e idade precisam ser preenchidos para salvar.");
          return false;
        }
        dependentes.splice(i, 1, {
          identificador: identificador,
          nome: nome,
          idade: idade,
        });
        carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
        travarOutros(false); // Liberar todos os elementos novamente
      });
    });
}

function travarOutros(element) {
  if (element == false) {
    document
      .querySelectorAll(".dependentes button, .dependentes .container > div")
      .forEach((el) => {
        el.classList.remove("disabled");
      });
    document.querySelector("#containerDados").innerHTML = "";
    return false;
  }
  document
    .querySelectorAll(".dependentes button, .dependentes .container > div")
    .forEach((el) => {
      if (el != element) {
        el.classList.add("disabled");
      }
    });
}

Agora, tudo o que precisamos fazer é incluir os comandos de inicialização, onde aplicamos o método de adição ao evento de clique do botão e carregamos os dados iniciais do JSON:

//init
document.querySelector("#btnAdicionarDependentes").addEventListener("click", adicionarDependentes);
carregarDependentes();

Por fim, vamos criar uma função para o botão de capturar dados apenas para extrair e mostrar os dados em JSON. Você pode, eventualmente, usar esses dados e enviar via POST, por AJAX ou via campo oculto, e pegar no back-end para guardar ou processar os dados (como com um json_decoder, do PHP):

//capturarDados
document.querySelector("#btnCapturarDados").addEventListener("click", ()=>{
	document.querySelector("#containerDados").innerHTML = JSON.stringify(dependentes, undefined, 4);
});

CSS

O único CSS que precisaremos usar é para aplicar a classe disabled. Se por acaso você está usando algum framework CSS, recomendo que você use o relativo a esta classe deste. Consulte a documentação, onde geralmente está relacionado aos helpers:

.disabled{
  pointer-events: none;
  opacity: .5;
}

Se você quer usar o CSS mais elaborado que usei aqui, veja abaixo o link do JsFiddle.

Finalizando

Criar formulários dinâmicos auxilia a usabilidade à medida que permite que o usuário adicione dados de forma mais rápida e com respostas visuais imediatas. O uso aqui do Javascript puro visa a facilidade para que você possa implementar em quaisquer projetos, incluindo os com Typescript. Trabalhe um pouco no código para adequá-lo à sua necessidade. E, como sempre, você poderá puxar o código e testar direto do JsFiddle.

Aproveite e entre para nosso grupo de discussão no Telegram.

14 de fevereiro de 2021

Sistemas de Design: Padronização de Sistemas
Design é projeto. E, como todo projeto, ele deve ser documentado, possuindo descrições, informações de uso e instruções em geral. É exatamente isso que são Sistemas de Design.

Sistemas de Design são documentações, online ou físicas, que descrevem a padronização e uso de elementos de um projeto, com o objetivo de que ele possa ser usado em diferentes aplicações, mantendo uma identidade compartilhada. Essa identidade pode ser referenciada a um projeto, linha, segmento ou empresa. São usados elementos como formas, grades, tipografia, assets, iconografia, recomendações de uso, dentre outros. Algo muito semelhante ao que o design gráfico já está acostumado ao criar um Manual de Identidade Visual.

Um exemplo comum, do dia a dia dos usuários de computador, é o Microsoft Office. Trata-se de um conjunto de aplicativos que, por serem da mesma linha, precisam seguir a mesma identidade. Para que os desenvolvedores possam trabalhar com esse padrão, um sistema de design certamente foi desenvolvido para que a equipe de desenvolvimento possa trabalhar de forma coerente.

O Sistema de Design garante ao usuário uma fluidez no uso das aplicações e reconhecimento das propriedades do software. Facilitando, dessa forma, não só a identificação, como ajudando o usuário a pressupor determinados recursos ou localizações de ferramentas.

Assista o vídeo para complementar a leitura

Experiência Compartilhada

Grandes empresas de tecnologia desenvolvem seus próprios sistemas de design para que desenvolvedores terceiros possa criar experiências mais coesas e confortáveis para o usuário. Seguir esses sistemas pode ser requerimento ou uma simples recomendação, dependendo da loja e sistema operacional que precisar aprovar.

Aplicativos, mobile e desktop, são os mais comuns a receberem influencias direta dos sistemas de design de sistemas operacionais que, recomenda-se, devem ser mesclados aos sistemas da própria empresa. Para esses casos temos como exemplo:
Como dito anteriormente, seguir um sistema de design de sistema operacional é fundamental para manter uma experiência fluida para o usuário. Por isso que, por exemplo, é possível sentir diferenças entre uma mesma aplicação desenvolvida para Windows, Android e dispositivos Apple, porque cada desenvolvedora, apesar de manter sua própria identidade, adapta-se para o ambiente em que o usuário estará.

O Whatsapp adapta quase que completamente sua UI de acordo com o sistema de design de cada Sistema Operacional

Visual Studio no Windows 10 vs Visual Studio no MacOSX

Não necessariamente o designer ou desenvolvedor são obrigados a seguir um determinado sistema de design de terceiros. Às vezes, a melhor opção é justamente criar o seu próprio sistema ou criar uma barreira para ter uma identidade única para sua aplicação.

Algumas empresas, como a Google, estimulam para que os designers utilizem seus sistemas também em sites ou aplicativos web. Para isso, dão descrições específicas de usabilidade e ferramentas que possam agilizar o desenvolvimento dessas aplicações.

Frameworks e Bibliotecas

Para facilitar o desenvolvimento, muitas empresas oferecem frameworks e bibliotecas, tanto web quanto para desktop e mobile, afim de estimular o desenvolvedor a seguir aquele determinado padrão.

É interessante para as grandes desenvolvedoras que outras empresas sigam seus padrões de design, pois, dessa forma, ditam tendências e criam assimilações dos usuários com suas próprias plataformas, principalmente quando essas outras empresas utilizam ferramentas e APIs das grandes.

A exemplo de frameworks e bibliotecas temos:
Porém, nem sempre essas opções suprem a demanda, pois não são compatíveis com outras bibliotecas e tecnologias. Por isso, muitos grupos de desenvolvedores trabalham para criar frameworks e bibliotecas abertas que seguem os padrões estipulados pelos sistemas de design. Como por exemplo:
- React UWP (Fluent Design)
- Materialize (Material Design)
- Material UI (Material Design)
- Ratchet (Apple Guideliness iOS)
- Semantic UI (Inspirado na Apple e Material Design)
Utilizar Sistemas de Design, além de facilitar o processo de desenvolvimento, ajuda a manter o usuário mais confortável no ambiente em que ele está acostumado. Criar ou adaptar o seu próprio sistema também ajuda a criar uma identidade única para seu conjunto de aplicativos e serviços.

Que outros sistemas de design e frameworks vocês podem recomendar? Deixem nos comentários.
22 de dezembro de 2019
Adobe Max 2019 – O que tem de novo no Photoshop (desktop)?
No dia 4 de Novembro de 2019 aconteceu o Adobe Max. Trata-se do evento da Adobe em que ela apresenta novas funcionalidades para seus principais programas e anuncia novos serviços e tecnologias.

Dentre seus principais aplicativos, o Photoshop foi um que mais recebeu atualizações, tanto com novos aplicativos quanto com novos recursos baseado no Adobe Sensei, inteligência artificial da Adobe para análise de imagens.

Nova Ferramenta de Seleção

Como sempre, a Adobe apresenta novidades na ferramenta de seleção, pois recortar uma imagem para usar em outro local é o que faz com que o profissional criativo perca mais tempo, ao querer manter qualidade.

Com isso, a Adobe trouxe uma nova ferramenta de seleção baseada no Adobe Sensei. O nome oficial dessa ferramenta é Seleção de Objeto, e ela se encontra junto com a ferramenta Pincel de Seleção e Varinha Mágica.

Basicamente, você seleciona a área e o Adobe Sensei se encarrega de selecionar o objeto baseado em seu banco de dados de reconhecimento de objetos. Ou seja, baseado no que ele identifica, tenta selecionar o objeto e todas suas arestas.

Claro que para possuir melhores resultados, é recomendável que você use a adição e remoção de outros objetos, cujo a ferramenta já tem essa opção e, ainda, fazer o refinamento do recorte. Certamente é um adendo que vai agilizar o trabalho de muita gente.

Novo painel de preenchimento de conteúdo

Uma das funções que, em minha opinião, é das mais úteis é o preenchimento de conteúdo. Porém, por muitas vezes, ele deixa manchas e marcas de outros elementos. Para corrigir isso, a Adobe criou um painel de personalização onde você determinar quais áreas podem e quais áreas não podem ser usadas pelo algoritmo para criar o preenchimento automático.

Conversão de múltiplas camadas para objeto inteligente

Uma atualização bem interessante principalmente para quem produz mockups. Agora você pode simplesmente selecionar mais de uma camada e transformar, com o botão direito, em objeto inteligente. Dessa forma, facilitando a a atualização para projetos.

Para quem não está familiarizado com a ferramenta, um objeto inteligente é basicamente um PSD dentro de outro PSD. Para, dessa forma, importar atualizações realizadas dentro desse outro objeto.
Nova ferramenta de deformação por malha

Você certamente já deve ter tentado alterar alguma imagem no Photoshop através de uma deformação por malha e, se está acostumado com o Illustrator, pode ter se frustrado um pouco ao usar ferramenta similar no Photoshop. Pois seus problemas “se acabaram-se”. Agora você tem mais pontos de deformação da malha, podendo personalizar a grade, o que dá mais liberdade para deformar, e também evita a deformação em pontos estratégicos.

Novas Predefinições

Depois de muitos anos mantendo sempre as mesmas opções de predefinições, o Photoshop finalmente ganhou atualizações para corresponder a um movimento criativo mais moderno. Dentre as novas predefinições, encontramos novos gradientes, novas texturas e padrões e, talvez o que mais demorou para ser atualizado, novas formas.

Com isso, também melhoraram a organização dessas predefinições, que agora estão organizadas em pastas.

Salvar na Nuvem

Uma das novas opções que já está presente em aplicativos como o Adobe XD é salvar automaticamente na nuvem. Dessa forma, você pode manipular os arquivos do Photoshop em diferentes equipamentos sem a necessidade de passar através da pasta compartilhada do Creative Cloud, inclusive para acesso rápido no novo Photoshop para iPad.

Outras melhorias

Dentre outras melhorias menores destacam-se o novo painel de propriedades, suporte a salvamento de GIF animado direto pelo comando de salvar, adição de curvas e níveis para imagens de 32 bits por canal, otimização de fontes OpenType e SVG, inversão de seleção de camadas, e outros detalhes menores que você pode encontrar no site da Adobe.

Todas as atualizações já estão disponíveis para os usuários Creative Cloud.

Ah! E atualizaram o ícone também.
5 de novembro de 2019
Jony Ive “deixa” a Apple e vai trabalhar em estúdio de design próprio

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

28 de junho de 2019
Windows ganha Terminal – Uma opção ao PowerShell e CMD

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.

Mais informações sobre ele, você pode encontrar no devblogs, da Microsoft:
https://devblogs.microsoft.com/commandline/introducing-windows-terminal/

6 de maio de 2019
Novo CorelDRAW 2019 marca volta do aplicativo ao MacOS

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.

Com informações do site CorelDraw.com

1 de maio de 2019
Wireframe, Mockup ou Protótipo?

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.

Fonte: https://portillo.myportfolio.com

Fonte: https://portillo.myportfolio.com

Fonte: https://portillo.myportfolio.com

Fonte: https://portillo.myportfolio.com

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.

Se gostou do que leu, curta a página no Facebook e compartilhe a informação.

31 de janeiro de 2019