FireRainbow: Code Highlighting para FireBug

Navegando por fóruns encontrei este ótimo adicional para o tão útil Firebug, o FireRainbow.

+ 5 dicas de CSS

Começo hoje uma uma série de posts sobre CSS. Nem sempre as CSS são tão fáceis de se lidar como se pensa. Muitas vezes elas podem ser problema na criação do site.

Revisando minha pequena experiência usando as CSS, separei algumas dicas pra postar e tentar ajudar quem esta enfrentando dificuldades, o tema que vou focalizar nesse post é Organização.

- Resete todos os valores.

Todo o Browser possui valores padrões, um erro muito típico que ainda vejo é que alguns desenvolvedores ainda não resetam esses valores, o que torna o posicionamento dos elementos mais complexo.

Eu reseto meu CSS assim:

* {
margin: 0;
padding: 0;
list-style: none;
vertical-align: baseline;
}

A função do asterísco é simples, a declaração contidas nele sera aplicada em todos os outros seletores.

Lembrando que a sintaxe da regra CSS acontece da seguinte forma:
seletor { propriedade: valor; }
Tudo o que esta escrito entre as chaves {} é considerado a declaração.

- Use uma folha mestre.

@import url("global.css");
@import url("topo.css");
@import url("conteudo.css");
@import url("base.css");

Assim além de organizar melhor as folhas você tera um re-design facilitado.

- Para estilizar use class não id.

Apênas uma observação, não uma regra. Pessoalmente uso apênas class para estilizar, semâticamente falando, o atributo ID só pode ser usado uma vez no documento HTML, e muitas vezes preciso repetir o mesmo seletor em várias tags.

Caso coloque várias ID, tenha cuidado com as âncoras e com o getElementByID, do DOM.

- Evite classificar todas as tags.

div class=borda
span class=texto

.borda  { declaração }
.texto { declaração }

Poderia ser substituido por:

div
span

div { declaração }

div span { declaração }

- Separe seu CSS em Blocos

Este pode ser o senso comum a entre nós webdesigners, mas às vezes eu olho no CSS de algumas páginas e bão consigo entender o que certo elemento faz, ou pra que serve. Dividindo o código em blocos você encontrará as classes e elementos que você precisa mudar rapidamente.

Pesoalmente sigo um modelo, tentando deixar o código mais simples possível:

/* Global */

/* Principal */

/* Links */

/* Tipografia, Listas, imagens, etc. */

CMS

Faço minhas as palavres de Erika Sarti, as vezes é realmente um problema, pelo menos pra mim que uso o Drupal. É sempre complicado dar acesso ao meu cliente sem ele me encher de perguntas, ou sem ele futucar nas funções que não deve e desconfigurar todo CMS.

Usar o Drupal pra criar o site do "zé do buteco" é como usar uma bazuca pra matar uma barata.

Depos de várias tentativas com CMS menores, como tangoCMS e LightCMS, eu não via aplicação prática desses CMS em nenhum de meus clientes.

Felizmente eu encontrei um CMS que resolveu meus problemas, o Pixie.

"Pixie não é tão completo como outros sistemas de gerenciamento de sites. Nosso objetivo principal é torna-lo tão simples que até a sua avó poderia ser capaz de usa-lo. Porém não deixando de fornecer uma ferramenta poderosa." - Equipe Pixie

Entre suas principais característica estão a facil instalação, gerenciamento simplificado e um suporte completo para criação de temas com CSS, na minha opinião o mais facil de estilizar, comparando com o Drupal, Joomla e WP.

De volta a ativa! IE6!

Depois de praticamente dois mêses no limbo, volto a postar no frameBox. Pelo menos dessa vez vou tentra manter alguma regularidade nas postagens sobre web design.
Isso aqui ta parecendo um deserto.

Por mais mirabolantes que sejam os fix dos diversos bugs do IE6, infelizmente até hoje ele ainda nos assombra, muitos desenvolvedores estão ignorando, mas para aqueles que ainda testam seus sites no IE6 (testando também sua paciência), surgiu uma nova ferramenta que promete reduzir o tempo de adaptação do CSS.

O IE6 CSS Fixer não é uma solução completa, por ainda estar em testes. Mas fornece a correção pros problemas mais comuns.

Apênas cole o CSS e ele fará a conversão. Simples assim.

Appcelerator Titanium: um concorrete para Adobe Air

Titanium é o nome da plataforma de desenvolvimento que possibilita criação de aplicações desktop com linguagens web. Se isto lhes lembra algo seria o Adobe Air. A proposta é a mesma porém o Titanium se difere em certos pontos.

• Open source
  Titanium é licenciado sob Apace Public Licence (Versão 2)
• Open web
  Utiliza HTML, CSS e Javascript para construir aplicações desktop ricas.
• Open desktop
  Execute suas aplicações em Windows, Mac e Linux
• Open API
  Adicione funcionalidades ricas de desktop às suas aplicações utilizando simplesmente API Javascript

O que é

Appcelerator Titanium é uma plataforma open source para desenvolvimento e encapsulamento de aplicações ricas desktop utilizando tecnologias Open Web como HTML, CSS e Javascript

A API Javascript do Titanium é utilizada em conjunto com HTML, CSS e Javascript para proporcionar habilidades de desktop à sua aplicação.

Titanium também vêm com um prompt de comando simples para criar projetos e encapsular sua aplicação em um arquivo executável

Atualmente, Titanium suporta a criação de aplicações desktop para Microsoft Windows e Mac OSX. Estamos trabalhando ainda numa versão para Linux.

Como Titanium se compara ao Adobe Air?

Fundamentalmente ambos são similares. Ambos, Titanium e AIR são grátis, ambos são construídos em cima de WebKit engine open source, e ambos suportam o desenvolvimento de aplicações desktop utilizando tecnologias Web padrões.

A diferença mais significante entre os dois é que Titanium é open source e Adobe Air não. Como resultado acreditamos que podemos atrair a vasta comunidade open source acerca do Titanium, o que o ajudará a crescer e amadurecer para uma solução líder em construição de aplicações desktop ricas e aplicações para dispositivos móveis

Livros sobre o framework Ext JS

Fala galera! Após 1 mês ausente estou retornando de férias com força total, abordando agora sobre uma boa novidade para todos os integrantes da comunidade de desenvolvedores Ext JS: foi lançado neste mês o livro Ext JS in Action (Ext JS em Ação) de Jesus Garcia. Este livro agrega ainda mais ao framework juntamente com o outro livro sobre o assunto, Learning Ext JS (Aprendendo Ext JS), lançado em dezembro de 2008.

Para maiores informações acesse:

• Ext JS in Action: Post Fórum Ext, Página Editora

• Learning Ext JS: Post Fórum Ext, Página Editora

Cufón, um sIFR totalmente em javascript

O sIFR é uma solução amigável para um problema, usar fontes "diferêntes" sem auxilio de imagens usando javascript + flash (o que para alguns é um problema), se o usuário não possui o flash, ele se manterá com uma formatação já pré-definida por você em sua folha de estilo.

Para saber mais sobre o sIFR leia este artigo.

O Cufón cumpre o mesmo resultado com um diferencial, ele é sómente em javascript, e com algumas vantagens, como:

1. Não requer plug-ins – Funciona com recursos nativos do usuario.
   
2. Compatibilidade - Funciona nos principais navegadores do mercado.
   
3. Fácil - Nenhuma ou quase nenhuma configuração, dependendo do uso.
   
4. Rápido - Foi projetado para ser rápido na maioria dos casos.
   

No site do desenvolvedor há um guia, onde em 4 simples passos é possível utilizar nossas novas fontes.

JS Charts

JS Charts é uma biblioteca gratuita em javascript com o objetivo de criar excelentes gráficos.

Os dados podem ser visualizados com XML, ou Arrays.






Os gráficos podem ser criados ou customizados com extrema facilidade em cada detalhe, há também uma documentação completa, com exemplos e um editor online.

Meu primeiro post!

Depois de tanto enrolar, enfim, meu Primeiro Post!

Ola! Meu nome é Elvis Oliveira, estarei a partir de hoje escrevendo aqui no Frame Box, tratando de diversos assuntos, mas especialmente falarei sobre interfaces web, tendências, Design, Layout e muito mais!

Sou Web designer freelancer há pouco tempo, passei alguns dias de minha vida trabalhando em uma agência, o que me permitiu tanto contribuir com valiosas informações, quanto receber experiência profissional de quem já estava a mais de 10 anos no mercado.

Pretendo sempre em meus posts manter uma conversa franca sobre as novas tendências no ramo de interfaces, mas sendo descontraído, colocando sempre minha opinião positiva, ou sugerindo melhorias.

Gosto de CSS, não que eu odeie tabelas, ou flash, apenas tenho consciência de que é preciso responsabilidade ao usar esses recursos, e que se usados corretamente só vem a acrescentar bons frutos.

Quanto a marcação, não tenho nada contra as pessoas que colocam os "selinhos" da W3C em seus sites, só acho isso algo sem sentido, visto que meus sites não tem esse selo, e julgo ser bem mais bonitos, usuais e acessíveis que muitos dos que tem.

Bem, eu acho que para um primeiro post esta bom, até breve!

Implementando CSS Sprites com SmartSprites

Há algum tempo publiquei aqui no blog um artigo sobre CSS Sprites e como essa técnica pode melhor a performance de sua aplicação (CSS Sprite : Turbine suas aplicações). Deixei o assunto em off por um tempo por indisponibilidade de tempo, mas agora no fim do ano pude retormar o estudo. Pensei em diversas maneiras de implementar, como por exemplo usar um editor de imagens (Photoshop, Fireworks) e montar um arquivo só para geração de CSS sprites. Seria trabalhoso, uma vez que disponho de um arsenal de 500 ícones em meu sistema. Por sorte encontrei uma ferramenta incrível que faz o serviço, o SmartSprites de Stanislaw Osinski. Já havia comentado no post anterior sobre Sprite Generator, porém ele na sua forma online possui limitações (500 ícones ele não suportou) e a sua forma offline é extremamente complicada de instalar.

O que é SmartSprites

SmartSprites lhe permite inserir CSS Sprites facilmente e de forma segura no design de seu site. SmartSprites analisa gramaticalmente diretrizes que você insere em seu CSS original para marcar individualmente imagens que serão convertidas em sprite. Então ele constrói sprites das imagens coletadas e automáticamente insere as propriedades CSS requeridas em sua folha de estilos. Em outras palavras, sem copiar e colar tediosamente seu CSS quando adicionar, remover ou modificar imagens sprite. Apenas trabalhe com o seu CSS original normalmente e tenha o SmartSprites automaticamente transformando-as em uma versão "sprite-powered" quando necessário

Utilizando

Apesar de ler documentações não ser algo realmente agradável foi extremamente interessante entender toda a sistemática do SmartSprites. Através de comentários no meio de seu CSS é possível criar as imagens sem problemas.

/** sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */

#web {
   width: 17px; height: 17px;
   background-repeat: no-repeat;
   background-image: url(../img/web.gif); /** sprite-ref: mysprite; */
}

#logo {
   width: 50px; height: 50px;
   background-repeat: no-repeat;
   background-position: top right;
   background-image: url(../img/logo.png); /** sprite-ref: mysprite; sprite-alignment: right */
}

#main-box {
   background-repeat: repeat-x;
   background-position: 5px left;
   background-image: url(../img/top-frame.gif); /** sprite-ref: mysprite; sprite-alignment: repeat; sprite-margin-top: 5px */
}

Existem muito mais diretrizes na documentação do site, assim como a explicação de como executar o SmartSprite. Em um teste criei uma aplicação com esta estrutura

-root
  _css
     _icones.css
  _images
    _"varios icones"
  _index.html

Coloquei o SmartSprite na pasta raiz e executei ele

smartsprites --root-dir-path css

Ele gerou um arquivo testeSprite.png em images e um icones-sprite.css. Modificando a inclusão de icones.css para icones-sprite.css todos os ícones funcionaram perfeitamente.

De 155 ícones que totalizam 931kb tive como resultado 4 imagens sprite (sprite16, sprite32, sprite64, spriteBig) que juntas têm 69,4kb.

Conclusão

As vantagens da utilização da técnica de CSS Sprites são indiscutíveis. A melhoria de performance é extrema e serve de solução para qualquer pequeno site até grandes aplicações.
A problemática de implementar esta técnica está solucionada com o uso de SmartSprites, que nos possibilita com alguns comentários fazer tudo funcionar. Parabéns a equipe de desenvolvido do SmartSprites.
Gostaria de ouvir dos desenvolvedores suas opiniões e implementações de CSS Sprites :) até mais