NonsenseBB

Hoje em conversa com um colega meu comecei a descrever a abordagem que tenho tomado quando procuro desenvolver um website em HTML, CSS e Javascript e pensei que se calhar era uma boa ideia partilhar aqui a forma como o faço.

O objectivo é simples: criar pequenos sites que funcionam desde um telemóvel até um Desktop com ou sem Javascript activo e tentando suportar tanto quanto possível browsers ligeiramente mais antigos como o IE8 ou o Firefox 3.6.

No entanto sou o primeiro a admitir que esta abordagem não serve para todos os casos mas na minha modesta opinião é um bom objectivo para quem tem sites mais pequenos e quer dar aquela pequena dedicação extra que permite cobrir sem grande trabalho extra uma grande fatia dos potenciais visitantes.

Se tiverem dicas ou sugestões não se esqueçam de as deixar nos comentários mas antes disso vamos à minha abordagem ao problema.

Demorou mas consegui. Finalmente posso dizer que tenho uma aplicação escrita em Node.JS a funcionar e disponível para quem a quiser experimentar. Para além da utilização de CouchDB para guardar os dados (como já fazia há algum tempo na versão anterior escrita em PHP) posso também atirar para a fogueira mais umas buzzwordzitas uma vez que em vez de usar grandes bibliotecas como o jQuery e outros acabei por ficar pelo Ender, uma ferramenta que permite conjugar as mais variadas micro-frameworks de Javascript num único pacote.

Outro pormenor curioso são as animações. A biblioteca que estou a usar, a morpheus, baseia-se numa API recente disponivel nos mais diversos browsers chamada requestAnimationFrame. O que é que tem de especial esta API? A API serve para pedir aos browsers quando é que eles estão disponíveis para fazer a próxima frame da animação o que significa que por exemplo quando o browser se encontra minimizado ou o CPU sobrecarregado o browser pode escolher não disponibilizar tempo para processar a animação e esta passa logo para o final poupando ciclos de CPU e consequentemente energia.

Isto tem no entanto alguns problemas: a API ainda não está em muito bom estado e consequentemente é normal logo após carregar a página serem notórios os saltos devido ao numero reduzido de frames disponibilizadas pelo browser (no chrome cheguei ao ridículo de ver apenas 3 frames disponíveis numa animação). Curiosamente onde as animações correm melhor é em Internet Explorer 9. Sim eu sei, o inferno deve ter acabado de congelar.

No entanto nem tudo está concluído. Neste relançamento ficaram de fora ainda algumas funcionalidades que tinha programadas como o uso da API de historia do HTML5 para permitir navegar no site sem ter de refrescar as páginas e também melhorar o suporte a tablets como o iPad ou as muitas baseadas em Android Honeycomb como a Galaxy Tab ou a Asus Transformer. Isto sem mencionar o facto de ser preciso colocar um botão do Google Plus mas isso é só quando a API finalmente sair.

Para já fica só o reescrever da grande maioria do código que está agora muito mais pequeno e versátil. Uma das grandes diferenças que devem ser imediatamente notórias é na sincronização com o servidor que agora não só efectivamente funciona em mais do que um browser cumprindo o seu propósito (sim, estava assim tão mal) como não tem tantos popups irritantes sempre que ocorre e deve ser rápida o suficiente para nunca serem apanhados desprevenidos por fecharem o browser antes dela acontecer.

AH e mais importante que tudo isto é a mudança de endereço.

LINK: http://anime.nonsensebb.com

Qualquer critica, duvida ou sugestão façam favor de dizer de vossa justiça nos comentários.

Há uns tempos atrás decidi colocar-me a brincar um pouco com o editor de imagem, depois com o editor de texto e ficheiros html/css e no fim javascript e php para uns últimos pozinhos resultando num pequeno website onde listo as séries de cada temporada de animação japonesa, uma timeline de animes. Dava jeito por motivos que na altura citei e deu também para dar um pouco de liberdade à minha criatividade no que toca ao “design de sítios web”.

Pois bem a verdade é que a brincar a brincar e sem grandes tentativas de promoção a coisa até pegou e transformou-se na 2ª/3ª pagina mais visitada do meu site com a grande generalidade das visitas a virem de pesquisas do google por isso achei que era boa ideia polir um pouco as arestas ao bicho e é disso mesmo que venho aqui falar hoje.

Já há uns tempos atrás o Millennium BCP tinha lançado com grande pompa e circunstância uma aplicação para os possuidores de iPhones e agora chegou a vez dos “pobres coitados” que têm Android como eu.

A Aplicação não é nada do outro mundo mas cumpre o seu propósito no entanto houve um pequeno detalhe que me saltou á vista… Tenho quase a certeza que já vi aquele icon que usam para a opção de actualizar em qualquer lado…

Onde terá sido?

Eu tenho andado a trabalhar em correcções e melhorias do código HTML/CSS do meu TV Wall já há uns tempos para me permitir fazer coisas ainda mais awesome (como drag & drop por exemplo) mas noutro dia deparei-me com um comportamento curioso da renderização de css que me demorou algum tempo até compreender o seu porquê (e na verdade ainda só tenho uma teoria não comprovada).

O problema em questão é o seguinte. Notem a imagem seguinte:

Isto é a típica composição de uma “parede” no TV Wall. Cada um dos rectângulos na imagem é uma célula contida em caixas maiores marcadas a castanho e possuindo cada uma destas ultimas display: inline-block;. Esta organização é uma necessidade por forma a permitir não só que os tamanhos das células sejam variáveis como também para as organizar nas diversas formas pretendidas e ainda para permitir que a parede cresça consistentemente em vez de crescer até ao limite da largura antes de passar para a linha de baixo.

O problema coloca-se com a pequena linha a branco que podem ver na imagem. Cada uma das caixas a castanho é suposto possuir 40em de largura e não possuir qualquer margin ou padding (por questões de consistência que auxiliam nas operações que planeio fazer em javascript) no entanto na realidade todas as caixas possuíam uma “margem” invisível de 3px à sua direita.

Na realidade isto não é nenhuma margin ou padding mas sim uma propriedade chamada de letter-spacing que por defeito no Firefox e no Chrome possui o valor de, lá está, 3px! Porém não consegui corrigir o problema alterando esta propriedade no antecessor das minhas caixas, simplesmente ficava tudo na mesma. A solução passa por algo infinitamente mais simples: colocar cada uma das caixas com float:left; display: block; e presto, os 3px desaparecem e a previsibilidade regressa.

O facto do letter-spacing ser a causa desta situação é apenas uma conclusão a que cheguei visto estar a usar inline-block em vez de um simples block + float como devia ter feito desde o inicio efectivamente complicando a minha situação. Fica no entanto o aviso para outros que possam estar a encontrar o mesmo problema e já agora se eu me tiver enganado na minha conclusão façam favor de me avisar.

Há coisa de um mês atrás estava eu ligeiramente aborrecido e com vontade de fazer algo criativo mas sem grandes ideias. Não sei muito bem como mas veio-me à cabeça uma única ideia marada de tentar preparar um design com rectângulos. Não sabia para que é que iam servir os rectângulos nem sequer muito bem o aspecto que queria que a coisa tivesse, só sabia mesmo que tinha de ter rectângulos espalhados por todo o lado e atirei-me ao editor de imagem.

O primeiro passo foi escolher umas cores. É engraçado como a cor castanha, que em tempos praticamente declarei como a minha maior inimiga, se tornou ultimamente numa autentica constante em todos os designs que faço. Um sinal da minha evolução nesta arte suponho.

Escolhidas as cores comecei a brincar com vários tipos de conjugações mas faltava sempre uma razão de ser para aquilo. O que iam conter aqueles quadrados? A resposta veio mais tarde quando decidi colocar em dia as minhas séries ao descobrir que o MyTVShows do Ivo estava novamente em baixo: os quadrados vão ter séries!

E assim surgiu o TV Wall: uma “parede” virtual onde se pode colocar as nossas series favoritas. No inicio a ideia era só isto: não havia cá episódios, nem sequer sinopses, apenas as séries e umas imagens bonitas mas o salto para algo mais completo e funcional era fácil de fazer e a API do TheTVDB estava mesmo ali à mão de semear com virtualmente tudo o que é preciso.

   

 
Tinha então uma ideia e o aspecto da mesma, duas partes já por si complicadas, mas faltava coloca-la em prática e acima de tudo saber como o fazer. Em que linguagens? Em que meio? Para mim a resposta foi simples: Javascript, HTML e CSS. Andava já há uns bons 3 anos a prometer a mim mesmo que ia aprender mais de Javascript e esta foi uma oportunidade de ouro para o fazer.

Meti mãos ao trabalho e comecei a desenvolver código javascript para tornar isto funcional. Pelo caminho fui aprendendo a fazer pedidos AJAX, a converter de XML para JSON usando php e até como executar código assíncrono em php. No futuro ainda tenho planeado usar o Local Storage e o Session Storage que vieram com o HTML5 para guardar informações, um interface catita para telemóveis com touchscreen e ligação ao MyTVShows para poder marcar episódios como vistos.

PHP pode parecer uma opção estranha no meio disto tudo mas tem uma razão muito simples: não tenho dinheiro actualmente para um VPS onde montar algo mais catita como Rhyno e CouchDB mas está planeado para um futuro próximo se possível bem como uma forma de tornar isto em algo ainda mais útil do que possam imaginar. Esta ultima porém é uma ideia que pode demorar ainda muito tempo (e dinheiro) a realizar, considerem-se no entanto teased.

Para já fica aqui a minha versão alpha do TV Wall com o código praticamente colado com fita-cola, as engrenagens a funcionarem à base de doses volumosas de WD40 e a exigir Webkit ou Firefox 3.5 (ou superior). Notem no entanto que tenho andado a testar só em Firefox devido ao belo do Firebug que muita dificuldade tenho em largar porém façam favor de me avisar de todos os problemas que encontrem nos comentários deste artigo ou via Twitter. Aguardo com expectativa as vossas opiniões.

Link: TV Wall

Eu estava a começar a achar o aspecto aqui do estaminé um bocadinho para o escuro demais e por isso pensei numa forma de lhe dar mais cor e mais vida. A forma que arranjei foi adicionar fotos minhas no cabeçalho do site para animar um bocadinho a coisa.

Porque é que isto é digno de um post? Simples: se não forçarem o refresh o tamanho do cabeçalho vai ficar pequeno demais e não vão poder observar devidamente as belas fotos que eu tiro. 😛

PS: não sou nada convencido não…

Ou 25+ links úteis para web design.

Por nenhuma razão em especial achei que era uma ideia engraçada fazer uma pequena listagem de alguns sites que considero essenciais para o decorrer daquele que é o meu principal hobby e que eu não me importava nada que passasse a caminho profissional por muito suicida que dizer isso seja: Web Design/Development (ainda não percebi bem onde ando, algures no meio).

Desde javascript a css sem esquecer HTML5 e editores aqui vão algumas das ferramentas e recursos que eu pessoalmente gosto de usar para os meus projectos. Relembro que ao contrario de muito malta por ai eu não tenho um mac e tenho de me safar com Linux e Windows portanto não esperem encontrar aqui aplicações para mac.

E posto isto aqui vai a lista.