Escolhendo o framework JS - Mootools
Pretendo usar o blog para fazer algumas experiências e postar referências, tutoriais e códigos úteis. Para os códigos JavaScript vou utilizar a biblioteca Mootools que é uma das melhores que eu conheço e possui muitas extensões e bibliotecas desenvolvidas. Vamos ver se consigo cumprir a promessa e escrever alguma coisa que preste.
Novo(s) layout(s), peça pelo número
Bom, brincando um pouco com CSS cheguei bem perto o que eu queria para este novo template do Top Rated: deixar o código o mais simples possível e a stylesheet bastante flexível. Assim vai ser mais fácil fazer algumas experiências com layouts, javascript, css..
E a primeira experiência é com o visual, quero fazer vários temas e dar a possibilidade do usuário escolher aquele que mais goste, usando apenas CSS para as variações. Mais ou menos como o CSS Zen Garden faz, mas sem recarregar a página. Ainda faltam alguns ajustes, principalmente para fazer com que, depois de escolhido um tema, ele permaneça para os próximos links. Mas já dá pra ter uma idéia:
Tema 01
Tema 02
Tema 03
Por enquanto vou deixar o Tema 03 Tema 02 ligado, depois eu coloco aqui exatamente como eu fiz, código, javascript, etc.
Como editar o conteúdo de qualquer site
Essa eu não conhecia.
Com apenas um link javascript é possível deixar o conteúdo de qualquer site editável. Qual-quer!
Experimente:
1 - Copie o link abaixo:
javascript:document.body.contentEditable='true'; document.designMode='on'; void(0)
2 - Vá até o site que você quer editar, cole o link na barra de endereços e dê um ‘Enter’..
Agora tente selecionar um trecho de texto e editá-lo. Sensacional não? Pra que serve eu não sei, mas gostei.
Você pode até adicionar o link aos favoritos e usar sempre que precisar [IE e Firefox]:
Dreamweaver CS4 Beta
Resolvi fazer o download da versão beta do novo Dreamweaver CS4 pra ver o que a Adobe tinha feito pra melhorar o software.
Confesso que gostei bastante. Praticamente todas as novas features realmente ajudam a melhorar a o fluxo de trabalho, não são apenas pra inglês ver.
Mais Espaço
Uma das novidades que mais gostei foi a nova interface do programa. A barra de título foi retirada e os botões de minimizar, maximizar e fechar foram integrados ao menu, o que favorece a viewport, que ganhou mais espaço para visualização do código e layout.
Live View
Além das visualizações “Code”, “Split” e “Design” agora existe a “Live View”. Uma nova maneira de exibição da página que usa a engine WebKit e renderiza exatamente como a página será vista no browser, mantendo o acesso ao código. Velha solicitação dos usuários finalmente atendida pela Adobe.
Arquivos relacionados a um clique de distância
Agora, logo abaixo da aba com o nome do arquivo que está sendo editado, existe uma lista de todos os arquivos relacionados a ele, incluindo JS’s, CSS’s, XML’s ou mesmo PHP’s. Basta clicar no nome para abrí-lo. E o que é melhor: mesmo que o arquivo não esteja na sua máquina, sendo chamado via endereço absoluto direto da net, você pode também clicar sobre o seu nome e visualizar o conteúdo na hora. Por exemplo, não será mais preciso ficar baixando vários JS’s para saber o que cada um deles faz. Muito bom!
Há muitas outras novas funcionalidades, você pode ver a lista completa aqui.
Tendências
Algumas coisas já podemos afirmar, outras especular.
1. Abas - Acho que elas realmente vieram pra ficar. Toda a interface é baseada nelas, que foram levemente simplificadas.
2. Espaço e customização- Cada vez mais o espaço para edição ganha importância na interface juntamente com a possibilidade de customização. Prova disso é que agora, ao invés de 2, temos 8 configurações diferentes para a workspace.
3. Acredito que as próximas versões da suíte Adobe acompanharão essas mudanças. Tomara.
PSD2CSS - Converta seu layout PSD em HTML e CSS
É exatamente isso que você está pensando! No PSD2CSS você faz o upload do seu layout no formato PSD [PhotoShop Document] e… voila! O site o converte automaticamente para HTM e CSS!!
Ok, ok… o resultado não chega a ser perfeito. Todo o layout é montado com imagens, cada layer é transformada num arquivo PNG. Máscaras não funcionam muito bem e as layers de texto não são reconhecidas, o que é uma pena. O código gerado é parecido com o que se obtém usando a exportação diretamente no Photoshop, mas não igual.
Como disse, o resultado não é ideal, está longe ainda do que se espera de uma página bem estruturada semanticamente e CSS bem escrito. Mas ainda assim, talvez em alguns casos possa ser útil, pra alguém que está começando a aprender a escrever HTML e CSS ou até para layouts bastante simples por exemplo.