O amor de Deus em Cristo

    September 11, 2017

    Porque Deus amou o mundo tanto, que deu o seu único Filho, para que todo aquele que nele crer não morra, mas tenha a vida eterna.
    João 3:16

    O versículo da entrada do post é o texto áureo da Bíblia Sagrada. O amor de Deus é personificado em seu filho Jesus, que veio a Terra e padeceu por nós. Deus nos amou e deu seu único filho, Jesus, e Jesus quis se entregar por nós. Por livre e espontânea vontade. Ele se desfez de sua glória por amor. Lá em Efésios 5:2 diz assim:

    Que a vida de vocês seja dominada pelo amor, assim como Cristo nos amou e deu a sua vida por nós, como uma oferta de perfume agradável e como um sacrifício que agrada a Deus!

    O amor de Jesus, por nós não foi egoísta. Ele preferiu sofrer a afronta e levar para si o sofrimento, o escárnio, as humilhações, a morte por nós e o pior, a momentânea separação de Deus, por nós como foi escrito em Mateus 27:46:

    Por volta das três horas da tarde, Jesus bradou em alta voz: “Eloí, Eloí.”

    Alguns manuscritos dizem “Eli, Eli, lamá sabactâni?”, que significa “Meu Deus! Meu Deus! Por que me abandonaste?

    Jesus, ao carregar o meu, o teu, e o pecado do mundo na cruz, foi separado de Deus. A agonia física era horrível, mas estar separado de Deus espiritualmente era pior. Porque Deus não conseguia olhar para Jesus naquela cruz sem ver o nosso pecado. Então se afastou. Porque Deus é santo, e o pecado afasta o homem dele.

    Mas por que tanto amor?Encontramos a resposta lá em João 3:16 “Para que todo aquele que nele crer não morra, mas tenha a vida eterna”. Essa é a promessa de seu amor para nós.
    E como entender o amor de Deus? Como medir?
    O amor de Cristo excede todo o conhecimento, todo o entendimento. O amor de Deus é maior que a nossa capacidade humana de entendê-lo. É maior que nós mesmos. Mas embora não possamos medi-lo, e muito menos entendê-lo, eu te convido hoje a confiar nele. Por que é maior que qualquer coisa desse mundo.
    É maior que o teu sofrimento. Deus revela que o sofrimento nos faz confiar nEle por quem ele é, não pelo o que Ele faz. E que o seu caminho é melhor que o nosso.

    Foi o que Martinho Lutero fez. Quando o grande reformador estava no leito de morte sentindo dores de cabeça que o deixaram abatido e acamado, ofereceram-lhe um medicamento para aliviar o sofrimento. Lutero recusou e explicou: “Minha melhor prescrição para a cabeça e o coração é que “Deus amou o mundo de tal maneira que deu o seu Filho unigênito, para que todo aquele que nele cré não pereça, mas tenha a vida eterna!’ E o mais importante? Nada pode nós separar desse amor.

    Pois estou convencido de que nem morte nem vida, nem anjos nem demônios, nem o presente nem o futuro, nem quaisquer poderes, nem altura nem profundidade, nem qualquer outra coisa na criação será capaz de nos separar do amor de Deus que está em Cristo Jesus, nosso Senhor. Romanos 8:38

     Até o próximo post!
    Share:

    [Diário de leitura] Atomic design: capítulo 2

    August 17, 2017

    (…) e não esquecer que a estrutura do átomo não é vista mas sabe-se dela. Sei de muita coisa que não vi. – Clarice Lispector


    No post anterior vimos uma introdução sobre Design Systems. Neste capítulo, Brad Frost conta como se inspirou na química para criar este conceito. Vamos lá!

    Tudo o que conhecemos no mundo é formado por átomos, os quais são invisíveis aos nossos olhos naturais, poeticamente dito por Clarice na abertura do post. Esses átomos se agrupam formando moléculas que por sua vez se agrupam, novamente, formando organismos.

    O conceito base do Atomic Design se define em:

    “Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.

    Esses 5 estágios mencionados na definição são:
    1. Átomos
    2. Moléculas
    3. Organismos
    4. Templates
    5. Páginas

    A seguir, veremos um pequeno esboço sobre cada um deles. 

    1. Átomos

    Os átomos são basicamente elementos HTML como labels, inputs, buttons e outros que não podem ser quebrados pois perderiam o significado. Ou seja, átomos são estilos básicos e precisam se agrupar para então fazer sentido na interface.

    2. Moléculas

    As moléculas são agrupamentos de átomos os quais formam uma unidade significante. Por exemplo um menu, uma barra de pesquisa, um card. Em outras palavras, moléculas são componentes.

    3. Organismos

    Os organismos compreendem um aglomerado de várias moléculas, átomos e outros organismos. Em outras palavras seções. Por exemplo, uma header é um organismo. Uma sidebar é outro.

    “While some organisms might consist of different types of molecules, other organisms might consist of the same molecule repeated over and over again.

    4. Templates

    Até aqui o autor fez uma analogia embasando-se em fundamentos elementares da química para explicar o Design Systems. Agora, para fazer mais sentido para outras pessoas, como clientes, por exemplo, Brad Frost se apropriou de termos comuns à area como é o caso dos “Templates”.
    Templates são esqueletos cheios de moléculas, átomos e organismos articulados que formam estruturas de conteúdo. Em outras palavras, templates são layouts/wireframes. O foco no template é mostrar a disposição dos componentes e a estrutura, não o conteúdo final. No template prevemos os tamanhos das imagens bem como a quantidade de texto e caracteres de cada bloco.

    5. Páginas

    As páginas são representações reais dos templates no que tange ao conteúdo e imagens. A pergunta a ser feita nessa etapa é “Tudo parece bom e funcional como deveria?”

    Se a resposta for não, volte aos organismos, moléculas e átomos para fazer as alterações necessárias.

    “With actual content in place, we’re able to see if the UI components making up the page properly serve the content being poured into them.”

    Um ponto interessante é que as páginas permitem algumas variações, por exemplo, uma página populada por um conteúdo do usuário, como um carrinho de compras, abre vazão para outro comportamento, o carrinho vazio. O template continua o mesmo, no entanto a página recebe uma variação a qual nos ajuda a criar sistemas mais flexíveis e resilientes. Isso é Atomic design!

     

    [Bônus] Conteúdo e design

    Conteúdo e design andam juntos e é necessário considerá-los no momento em que estivermos criando nossas interfaces para não acontecer a temível “quebra de layout”.

    Content needs to be structured and structuring alters your content, designing alters content. It’s not ‘content then design’, or ‘content or design’. It’s ‘content and design’. Mark Boulton


    No próximo capítulo, veremos Design Systems na prática. Até lá

    [Diário de leitura] Atomic design: capítulo 1

    August 13, 2017

    A intenção dessa série é publicar minhas impressões e destaques do livro “Atomic design”, de Brad Frost. Meu objetivo é, além de compartilhar conhecimento, fixar o conteúdo na minha mente de bagre. :fish:

    Introdução

    Este livro foi escrito pelo designer Brad Frost o qual criou um método dinâmico de criação de sistemas visuais que promete garantir a consistência em projetos digitais de design.

    Capítulo 1: Create design systems, not pages

    A introdução nos conta rapidamente acerca da evolução do livro e relata a página em branco, como a grande metáfora em comum entre o papiro e o pixel. As experiências na web estão intrinsecamente ligadas com a sua metáfora: a página.

    From the beginning, the page metaphor provided users with a familiar language with which to navigate this brave new World Wide xWeb.  

    Em se tratando de webpages, pode ser complicado para muitas companhias, pensar que precisam produzir seus conteúdos e distribuí-los numa quantidade significativa de páginas distintas. Pode até ser tentador deliberar a seguinte questão “Em quanto tempo se faz 30,000 mil páginas?” e achar que o trabalho é dispendioso e inviável. Na realidade, essas 30,000 páginas poderiam ser reduzidas a 5 modelos de diferentes páginas para abrigar todo o conteúdo necessário. Ou seja, o nível de esforço de um projeto deve ser medido pelas funcionalidades e componentes e não pela quantidade de páginas. Pensando nisso, as experiências de sucesso na web/mobile estão relacionadas a um conceito que remonta aos anos da Revolução Industrial: a modularidade.

    A tal da modularidade

    A modularidade é um conceito antigo. Desde a Revolução Industrial ele é aplicado nos modos de produção e na linha de montagem de Henry Ford o qual modificou todo o processo automobilístico, deixando-o mais rápido e eficiente.

    The earliest cars and components were individually crafted, which led to many safety and maintainability nightmares. Ford broke the automobile down into its component parts and modularized the assembly process. The results spoke for themselves: more uniform, more reliable, safer cars rolled out of the factory, and in record time to boot.

    Hoje, a modularidade vem sendo discutida e adaptada ao Design. Mas, se a modularidade existe há um tempão, porque a discussão só se inflamou recentemente?
    Porque nunca houve na história desse Brasil uma gama incontável de devices disponíveis no mercado, cada um com suas dimensões e densidades, desafiando-nos a criarmos sistemas cada vez mais flexíveis e responsivos.

    To properly address this increasingly diverse and eclectic digital landscape, we need to dramatically overhaul our perception of content and the tools we use to manage it.

    Legenda: o número de novos devices em 6 meses. Por LukeW

    Design atmosphere

    Outro ponto que me chamou a atenção foi a experimentação proposta pela designer Samantha Warren. Ela basicamente criou um método onde explora tipografia, cores e texturas  de uma forma rápida, sem muito esforço e tempo. Vale a pena fazer como exercício para praticar e experimentar diferentes – mas sutis – propostas gráficas.

    Frameworks

    Outro assunto abordado no capítulo um são os frameworks. O Bootstrap e o Foundation, dos quais eu mesma já usei, são uma mão na roda. A economia de tempo, até para quem tem noções básicas de html/css é enorme. Um tempo considerável de desenvolvimento é poupado pois esses frameworks têm uma série de componentes prontos para serem customizados. Sim, customizados, pois se o site é feito em bootstrap e não recebe a roupagem da identidade da marca, o resultado é um site estranhamente default e padrão.

    Consistência

    O autor ressalta a importância da consistência nos projetos, a qual confere confiabilidade. Imagina você entrar em um site ou aplicativo e se deparar com mais de uma linguagem gráfica diferente? O que você pensaria? Muito provavelmente que entrou em um ambiente estranho, logo, como a marca não se manifestou de maneira persistente você, caro leitor, fica confuso e com medo de dar o próximo passo e continuar interagindo com a interface, pois pensa que é falsa. Por isso que o styleguide torna-se peça fundamental a qual nos ajuda a garantir consistência.

    Styleguide

    O Styleguide é o conjunto de todos os componentes reunidos em um único lugar: tabelas, ícones, estilos, etc. É uma ferramenta que será utilizada pelo desenvolvedor no momento em que ele estiver transformando os mockups estáticos em telas reais.
    Ao longo das páginas, o autor fala sucintamente sobre a importância do styleguide nos projetos. Ele é uma parte sensível que merece toda a atenção pois também é um garantidor da consistência. Um guide completo é um conjunto dos seguintes itens:

    • Linguagem de design
    • Linguagem verbal
    • Voz e tom
    • Identidade da marca
    • Patterns de interface.

    Tip: Identidade da marca é um conceito mais objetivo. É como usar a cor, tipografia, texturas nos desmembramentos de uma marca, enquanto linguagem visual é mais subjetiva. É a justificativa da cor, tipografia e texturas.

    No próximo post, adentraremos no capítulo 2 e entenderemos o conceito de átomos, moléculas, organismos e páginas!

    Até loguinho

    Fenda da dor

    August 7, 2017

    Broto do concreto surgiu
    Com a esperança que raiou.
    No meio da fenda da dor, esplendoroso, desabrochou.
    Sorri criança que chora,
    Sorri jovem que corre,
    Sorri velho que ora,
    Sorri porque da vida, o sonho é uma flor.
    Uma flor serena e graciosa
    Com seu hálito de frescor.
    Traz à lembrança o sonho perdido e à memória
    Todo o amor que restou.
    Vem e desata esse nó de medo
    E busca teu sonho na fenda da dor.
    Corre depressa, porque não há tempo
    De lamentar o tempo que passou.

    – Tuanny Martins

    Share:

    Hoje é o último dia do ano

    January 11, 2016

    Hoje é dia de compartilhar amor e novas esperanças para o que reserva o ano vindouro.

    Paz, alegria e leveza, a casa espera ansiosamente os demais parentes.

    Aquela família planeja a melhor ceia que pode:
    A vovó comprou o melhor bolo da região, com recheio de chocolate, cerejas e raspas douradas para enfeitar. A tia fez creme de frango, peru, arroz com passas e legumes com maionese.

    Vovô estava cansado e foi ao quarto tirar uma soneca.
    Todos estavam sentados na mesa conversando descontraidamente quando de repente a campainha toca… “Ding dong, tô de casa”

    É o tio! O tio e sua família chegam para ceiar. A tia acorda o vovô que se assusta com o chamado e aparece de cuecas samba canção na cozinha na frente dos convidados que se põem a rir incansavelmente.

    E assim, a família continua sua ceia com essa memória eterna que será contada aos seus filhos, netos, bisnetos, trinetos e tantos quantos outros netos os próximos anos e a vida permitirem.

    Share: