Grids

Olá, feliz ano novo! Piada velha, mas sempre uso depois do Carnaval.

Passei os últimos meses envolvido com alguns freelances q sempre pintam nesta época (fim de ano/começo de ano) e garantem um plus no orçamento. Descansei um pouco durante o carnaval e voltei a estudar algumas coisas de forma solitária e autodidata, mas não reclamo.

Dias atrás “conheci” uma mulher chamada Jen Simmons, embora já tenha visto alguma coisa sobre seu trabalho há algum tempo atrás, em algum feed q assino. Todavia resolvi voltar a ela graças a um “estalo” na minha cabeça: lembrei de algumas experiências desenvolvidas por ela em relação ao layout das páginas web. Nos vários vídeos q encontrei, Jen apresenta um panorama sobre a evolução do layout na web e me esforcei para acompanhar seu raciocínio e as legendas automáticas geradas pelo YT em inglês. Como os vídeos são muito parecidos, isso facilitou minha compreensão, mas confesso q muita coisa passou batido. Ela vai evoluindo até chegar na “cereja do bolo”: o uso de grids como ferramenta para “leiautar” páginas web. Achei o assunto muito interessante, embora haja ainda um problema quanto ao perfil dos browsers em reconhecer essa propriedade nas folhas de estilo, as famosas CSS. Tudo ainda meio experimental e exige algumas configurações nos browsers existentes ou o uso de navegadores voltados ao estudo, como o Firefox Nightly.

Para estudar, resolvi pegar algumas coisas antigas minhas e reescrever o código. Gostei dos resultados, pois se aproximam do que eu gostaria qdo concebi os experimentos inicialmente, mas, como citado acima, para ver de fato como as coisas ficam, vc precisa habilitar seu navegador para reconhecer os tais grids. Como fazer? A própria Jen fornece o “caminho das pedras” no item Get a browser with CSS grid.

Meu primeiro estudo foi com A cor da palavra, onde faço a conversão de algumas palavras para o código hexadecimal e gero um background a partir da correspondência encontrada. A página ficou mais flexível, adaptando-se ao formato da tela, ou seja, responsiva. Confira!

Grids

Presente de aniversário

Dia 29 de outubro foi meu trigésimo nono aniversário. Pois é, um “pré-quarentão”, nas palavras de um amigo meu. Também foi o final das minhas férias. “Coincidentemente”, elas começaram no dia do aniversário do meu pai, 12/10, e terminaram no dia do meu. Fui a Salvador e trouxe minha mãe para passar uns dias comigo no Rio de Janeiro.

Nas férias a gente sai da rotina. Bebi vinho quase todo dia, banquei o “tiozão” com meus dois sobrinhos, revi ex-colegas de trabalho e amigos em Salvador, acordei tarde quase todos os dias, engordei alguns quilos também. Mas uma coisa q tentei manter foi estudar. Este ano reservei mais tempo para vencer um antigo “medo” q era estudar HTML, CSS e essas outras coisas q não fazem sujeira e não ocupam espaço na escrivaninha, mas q exigem as mesmas (ou mais) doses de paciência, dedicação e perseverança para dar bons resultados. E fiquei até surpreso com a relativa facilidade com q entendi alguns conceitos e rapidamente lá estava eu fazendo minhas primeiras experiências nesta área.

Longe de me tornar um webdesigner, o q eu quero é aumentar meu repertório de linguagens e recursos para dar expressão às minhas ideias. E uma forma de estudar q encontrei foi revirar minha produção anterior e ver o que poderia resultar se eu somasse algo. Tempos atrás eu fiz uma série de “cartazes” abordando algumas das figuras de linguagem que utilizamos na comunicação oral e escrita. Meu desafio foi fazer a conceituação delas de forma gráfica. O resultado foi o Figurinhas de Linguagem, série de 9 imagens abordando 9 das figuras de linguagem q consegui resolver usando formas e cores.

Bem antes das minhas férias eu já havia começado a migrar o conteúdo estático dos cartazes para a linguagem HTML, sendo q desta vez meu desafio foi animar alguns dos elementos gráficos das imagens. Usei para isso o formato SVG, q, além de ser vetorial, ainda permite armazenar comandos de animação, abandonando o formato GIF, bastante conhecido e tradicional por também gravar animação. Mas como nem tudo são flores, os resultados foram muito bons quando vistos no navegador Chrome, mas no Firefox… Pesquisei na “grande rede” como solucionar o problema, mas a empreitada não foi das melhores. Portanto, se vc desejar a “melhor experiência visual” veja a página no Chrome. Outra coisa: aconselho a ver o material em desktop ou no máximo num tablet ou I-pad. Para celular eu não fiz a devida adaptação, sorry.

Fiz de tudo para terminar antes do dia 29/10, sendo o meu “auto-presente” e também uma lembrança para os leitores do meu blog, mas não consegui (sorry again!). Então, para começar o penúltimo mês do ano, segue o novo Figurinhas de Linguagem. Espero q curtam!

screen-shot-2016-11-01-at-9-21-01-am

Presente de aniversário

“Veio de uma estrela!”

Nos idos de não me lembro mais, participei de um projeto muito bacana q me possibilitou atuar na direção de arte e de animação de uma pequena série animada chamada Rockstar. Do projeto original, conseguimos executar 2 dos 3 episódios pensados. Chegamos até a esboçar o storyboard do terceiro vídeo, mas o projeto deu uma parada por conta de verba.

Como forma de fazer o registro do projeto e aproveitando para treinar um pouco de web, montei uma página q reune as duas aniamações, bem como alguns textos complementares, ficha técnica e contato dos autores.

Obrigado a todos q participaram e até uma próxima!

rockstar

“Veio de uma estrela!”