frameBox

Comet no IIS

btbruno_@hotmail.com (Bruno Tavares) — Fri, 30 Oct 2009 15:00:00 +0000

Comet é uma metodologia que requer um poder de processamento concorrente muito grande dos servidores. Até o momento foram lançado alguns servidores próprios para a abordagem, porém nada ainda voltado para Microsoft IIS, ficando difícil de programadores .NET usufruirem a tecnologia. WebSync vem para preencher essa lacuna. Ele foi desenvolvido C#, roda com o IIS e foi testado numa máquina acer de U$500,00 com 30.000 usuários concorrentes e 25.000 mensagens e rodou perfeitamente! Vejam mais detalhes no post completo do ajaxian.com. P.S.: Sugiro assistirem o vídeo explicativo.

10 úteis dicas de usabilidade

btbruno_@hotmail.com (Bruno Tavares) — Thu, 24 Sep 2009 10:54:00 +0000

Todos concordariam que usabilidade é um aspecto importante de Web Design. Seja trabalhando em um website de portfólio, loja online ou aplicação web, fazer as páginas fáceis e agradáveis para seus visitantes usarem é fundamental. Muitos estudos foram feitos ao passar dos anos sobre vários aspectos da Web e Design de interfaces, e os resultados são valiosos para nos ajudar a melhorar o nosso trabalho. Aqui estão 10 resultados sobre usabilidade que podem ajudar a melhorar a experiência do usuário em seu site.

Li no SmashingMagazine.com, ótimo post!Em resumo, os caras juntaram diversos estudos e publicaram em seu website. Alguns pontos importantes a serem observados:

Labels são melhor posicionadas em cima dos campos em um formulário
O foco de visão do usuário está principalmente concentrado em rostos de pessoas, e além disso, estudo demonstra que usuários prestam mais atenção ao texto quando existe a imagem de um bebê olhando para o texto.
Qualidade de design é sinal de credibilidade
A maioria dos usuários não usam scroll
Azul é a melhor cor para links
A melhor caixa de pesquisa é aquela com 27 caracteres de largura
Espaçamento aumenta a compreensão do conteúdo
Testes de usabilidade não precisam ser muito extensos, 5 usuários são suficientes.
Páginas informativas sobre seus produtos ajudam a vender melhor
A maioria dos usuários são "cegos" a banners publicitários

Enfim, são dicas comprovadas por estudos com usuários, que podem ajudar a melhorar a qualidade de seus websites e aplicações. Até a próxima!

Combinando arquivos Javascript e CSS de forma descomplicada

btbruno_@hotmail.com (Bruno Tavares) — Wed, 23 Sep 2009 19:46:00 +0000

Essa é a proposta do Javascript Combiner: agrupar diversos arquivos respeitando dependências.

A maioria dos sistemas que vi requerem que você indique as dependências entre arquivos em um arquivo separado. Isso me aborreceu por muito tempo. Porque as informações de dependência deve existir fora do arquivo que as utiliza? Porque introduzir um outro arquivo cuja única tarefa é gerenciar dependências? O que eu queria era um equivalente do #include para C ou import do Java, algo que me permita especificar dependências no próprio arquivo fonte e depois combinar todos juntos respeitando a ordem de inclusão. Então no começo do ano passado comecei a trabalhar no Javascript Combiner.

Exemplo de declaração de um arquivo importado

/*requires yahoo.js*/

Veja mais no post original.

SpriteMe! Geração de CSS Sprite como nunca visto

btbruno_@hotmail.com (Bruno Tavares) — Tue, 15 Sep 2009 16:12:00 +0000

Anunciado esta semana a criação da mais nova ferramenta para geração de CSS Sprites, o SpriteMe. Os sprites são gerados de forma extremamente dinâmica enquanto você navega
por uma página e seleciona as imagens que deseja compor o sprite. Além disso ele contém uma certa "inteligência" embutida que detecta tamanhos similares de imagens e agrupa para serem criados sprites otimizados. Enfim, é uma excelente ferramenta, com um tutorial fantástico que vale a pena ser visto.

Você acha que sabe desenvolver RIA?

btbruno_@hotmail.com (Bruno Tavares) — Tue, 01 Sep 2009 10:56:00 +0000

Publico hoje uma apresentação de slide muito interessante, apresentada por Theresa Neil no evento DelveUI de desenvolvimento de interfaces web. Na apresentação ela cita os componentes de uma interface de aplicação rica (RIA), além de listar uma série de modelos de como construir determinada visualização da forma mais correta. Link para o post oficial aqui.

Como carregar Javascript dinâmicamente

btbruno_@hotmail.com (Bruno Tavares) — Wed, 26 Aug 2009 10:47:00 +0000

O conceito de "aplicação de uma página" foi introduzido juntamente com Ajax. São aplicações consagradas como o gmail em que você entra numa página index.php (default.aspx, etc...) e nunca mais é redirecionado. Tudo é montado dinâmicamente usando Javascript e Ajax. Em sistemas assim incluir todos os scripts em uma página só torna o carregamento da aplicação pesado e demonstra-se uma prática inviável. Solução: carregar fontes javascript sob demanda. Aqui publico então alguns recursos para implementar esse conceito e dar uma turbinada no seu sistema.

google.load

A google possui um método para carregar APIs Ajax dinâmicamente. Único inconveniente é que é um método específico da google e não pode ser usado para carregar um script da sua aplicação. Esse método está disponível dentro de http://www.google.com/jsapi em um código compactado.

O recurso mais interessente, e que deve estar presente em todos os métodos de carregamento dinâmico, é a opção de monitorar quando o script está carregado. Mais sobre o assunto pode ser visto na documentação oficial.

<script type="text/javascript">
 google.load("maps", "2");
 google.load("search", "1");
 
 // Call this function when the page has been loaded
 function initialize(){
     var map = new google.maps.Map2(document.getElementById("map"));
     map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
     
     var searchControl = new google.search.SearchControl();
     searchControl.addSearcher(new google.search.WebSearch());
     searchControl.addSearcher(new google.search.NewsSearch());
     searchControl.draw(document.getElementById("searchcontrol"));
 }
 
 google.setOnLoadCallback(initialize);
</script>

Javascript Simple Loader

Encontrei esse código publicado no snipplr.com. Sem nenhum comentário, nem observações do autor. Mas parece simples de usar. Basta informar o scr e opcionalmente uma função de callback:

function loadScript(src, callback){
    var scriptTag = document.createElement("scriptTag")
    scriptTag.type = "text/javascriptTag";
    if (scriptTag.readyState) {
        //IE
        scriptTag.onreadystatechange = function(){
            if (scriptTag.readyState == "loaded" ||
            scriptTag.readyState == "complete") {
                scriptTag.onreadystatechange = null;
                setTimeout(function(){
                    scriptTag.parentNode.removeChild(scriptTag)
                }, 1)
                callback();
            }
        };
    }
    else {
        //Others
        scriptTag.onload = function(){
            setTimeout(function(){
                scriptTag.parentNode.removeChild(scriptTag)
            }, 1)
            callback();
        };
    }
    scriptTag.src = src;
    document.getElementsByTagName("head")[0].appendChild(scriptTag);
}

O melhor jeito

Em complemento li um artigo de Nicholas Zakas em que ele expõe, segundo sua opinião, a melhor forma de carregar javascript. Na realidade, ele fez uma análise de outro artigo Steve Souders, que também disponibilizo o link porque o artigo é incrível. Enfim, Nicholas explica que quando incluímos um <script> no código html, o browser ao executar a página, tem que parar e esperar o conteúdo do <script> ser carregado para depois continuar e renderizar a página. Usando carregamento de javascript com o próprio javascript, os códigos são carregados em paralelo, sem travar o browser, fazendo com a página renderize muito mais rápido. Sendo assim ele propõe o seguinte modelo: carregar somente a função de carregamento dinâmico, e usar essa função para carregar todo o resto:

function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

Mais detalhes podem ser vistos no post oficial.

Enfim, espero ter lhe ajudado a carregar javascripts dinâmicamente. Fica aqui algumas abordagens e links para que você possa encontrar ainda mais conteúdo sobre o assunto. Até a próxima.

Tudo sobre Vazamento de Memória Javascript (Memory Leak)

btbruno_@hotmail.com (Bruno Tavares) — Fri, 07 Aug 2009 12:00:00 +0000

Com o advento da programação Ajax as aplicações deixaram de ser submitadas a cada clique e passaram a permanecer na mesma página por longos períodos de tempo. Nesse tipo de aplicação pequenos problemas com gerenciamento de memória podem formar uma grande dor de cabeça para os usuários da aplicação, que manipulam um sistema lento, e para os programadores, que não sabem o que fazer para resolver o problema. Nesse ponto eu me encontrei semanas atrás, e foi aí que iniciei estudos em busca de soluções para problemas de memory leak. Acabei descubrindo muitas coisas bacanas e portanto aqui escrevo a vocês para publicar tudo que li. Bons estudos!

Memory o que?!

Memory leak é um problema conhecido também por vazamento de memória. Um dos artigos que li foi de Douglas Crockford, guru javascript, e ele resume o conceito dessa forma:

Quando um sistema não gerencia corretamente suas alocações de memória é dito que ele vaza memória. Um vazamento de memória é um bug. Sintomas incluem redução de performance e falhas.

Como ocorre e como Resolver?

O pior caso é (pasmem) no Internet Explorer. Apesar de falar sobre o IE, usaremos esse browser como exemplo, problemas de memórias ocorrem em todos os browsers. No IE o sistema de garbage collector (coletor de lixo) não consegue liberar memória quando referências cíclicas ocorrem. Caso você esteja se perguntando o que é referência cíclica, permita-me exemplificar: quando associamos um evento à um elemento DOM, esse elemento guarda a referência para o evento. Caso esse evento utilize o elemento DOM, em alguma referência, uma estrutura cíclica se forma, da qual não é liberada na memória pelo IE.

Referência Circular

<html>
    <head>
        <script language="JScript">

        var myGlobalObject;

        function SetupLeak()
        {
            // First set up the script scope to element reference
            myGlobalObject =
                document.getElementById("LeakedDiv");

            // Next set up the element to script scope reference
            document.getElementById("LeakedDiv").expandoProperty =
                myGlobalObject;
        }


        function BreakLeak()
        {
            document.getElementById("LeakedDiv").expandoProperty =
                null;
        }
        </script>
    </head>

    <body onload="SetupLeak()" onunload="BreakLeak()">
        <div id="LeakedDiv"></div>
    </body>
</html>

O problema

Um exemplo de problema de vazamento por referência circular é facilmente vísivel num pequeno teste criado por Douglas. No primeiro exemplo ele cria 10.000 elementos DOM (span) e os remove em seguida. Se você acompanhar o consumo de memória pelo gerenciador de tarefas do windows verá que o consumo e mantém estável.

function makeSpan(n) {
    var s = document.createElement('span');
    document.body.appendChild(s);
    var t = document.createTextNode(' ' + n);
    s.appendChild(t);
    return s;
}

function process(n) {
    queue.push(makeSpan(n));
    var s = queue.shift();
    if (s) {
        s.parentNode.removeChild(s);
    }
}

No segundo exemplo ele faz a mesma coisa, porém para cada elemento ele associa um evento, e dentro desse evento utiliza a referência para o elemento. Agora é possível ver o consumo de memória aumentando cada vez mais.

function makeSpan(n) {
    var s = document.createElement('span');
    document.body.appendChild(s);
    var t = document.createTextNode(' ' + n);
    s.appendChild(t);
    s.onclick = function (e) {
        s.style.backgroundColor = 'red';
        alert(n);
    };
    return s;
}

Neste momento estou utilizando Internet Explorer 7.0.5730.13 e o erro ainda ocorre. Existe já o registro do bug no suporte da microsoft e eles dizem terem corrigido. Esse erro pode parecer banal para aplicações que usam submit a cada nova página do sistema, mas com o crescente uso de Ajax em aplicações e sites que nunca submitam são realidade.

A solução

Por segurança devemos nós resolver esse problema, já que o IE7 vai demorar um pouco para ser abandonado. Segundo a própria Microsoft, closures são os responsáveis por esse vazamento. Douglas propõe uma solução útil, porém não 100% segura:

function purge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            purge(d.childNodes[i]);
        }
    }
}

Refatorando o exemplo para não gerar mais vazamentos:

function process(n) {
    queue.push(makeSpan(n));
    var s = queue.shift();
    if (s) {
        purge(s);
        s.parentNode.removeChild(s);
    }
}

Não é 100% segura porque ele mesmo nos avisa que eventos associados através do método attachEvent não serão coletados. Isso porque sua referência não é guardada para acesso do programador. Como não podemos acessar, não podemos remover. A não ser que guardamos a referência, aí podemos manualmente retirar o evento com detachEvent, e tudo fica resolvido (veremos essa solução adiante).

Closures

<html>
    <head>
        <script language="JScript">

        function AttachEvents(element)
        {
            // This structure causes element to ref ClickEventHandler
            element.attachEvent("onclick", ClickEventHandler);

            function ClickEventHandler()
            {
                // This closure refs element
            }
        }

        function SetupLeak()
        {
            // The leak happens all at once
            AttachEvents(document.getElementById("LeakedDiv"));
        }

        function BreakLeak()
        {
        }
        </script>
    </head\>

    <body onload="SetupLeak()" onunload="BreakLeak()">
        <div id="LeakedDiv"></div>
    </body>
</html>

O problema

Outro artigo que li era de um membro da equipe de desenvolvimento do IE, Justin Rogers. Ele resume o problema de vazamentos com closures muito bem:

Com referências circulares normais nós temos 2 objetos concretos segurando um a referência do outro, mas com closures é diferente. Além de fazer referência diretamente, elas são feitas importando informações do escopo da sua função pai. Normalmente uma variável global da função, e parâmetros utilizados quando a função é invocada existem somente pelo ciclo de vida da função em si. Com closures essas variáveis e paramêtros continuam a ter uma referência prolongada enquanto a closures está viva; e como closures podem permaner vivas além do tempo de vida de suas funções pais, o mesmo ocorre com qualquer uma dessas variáveis e paramêtros.

A solução

Nesse caso a solução não é tão óbvia assim. Isso porque usamos uma função anônima, não guardamos sua referência e por isso não podemos removê-la. Uma solução proposta por Scott Isaacs em seu blog é guardar a referência da função no elemento para depois poder remover:

function DoThis()
{
 var el = document.createElement("div");
 
 el.attachEvent("onclick",DoThis);
 window.attachEvent("onunload",Cleanup);
 
 function DoThis()
 {
  alert("clicked");
 }
 
 function Cleanup()
 {
  el.detachEvent("onclick",DoThis);
  window.detachEvent("onunload",Cleanup);
  el = null;
 }
}

Concluindo

Na realidade um assunto como esse deve ser praticado e estudado constantemente. Acredito não ter escrito um guia completo mas ao menos ter conseguido lhe colocar em um rumo muito melhor de desenvolvimento. Ainda irei abordar mais sobre isso aqui no framebox, mas por enquanto fiquem com essas dicas e alguns links de recursos que utilizei. Forte abraço e até o próximo post.

Referências

Rotacionando texto com CSS

btbruno_@hotmail.com (Bruno Tavares) — Wed, 05 Aug 2009 10:40:00 +0000

Algumas vezes quis fazer isso mas não sabia como. Essa semana vi no blog de Jonathan Snook uma solução usando 100% CSS que funciona em todos browsers modernos, incluindo IE =D

<div class="example-date">
 <span class="day">31</span> 
 <span class="month">July</span> 
 <span class="year">2009</span>
</div>

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Aprenda o que é Javascript Closures

btbruno_@hotmail.com (Bruno Tavares) — Mon, 03 Aug 2009 10:34:00 +0000

Muito tempo atrás (o segunto post do blog) eu abordei um tema muito bacana de Javascript: Closures. Alguns dias atrás, encontrei uma outra abordagem do assunto, um tanto quanto informativa e de nome cômico. Morris Johns é o autor de Javascript Closures for Dummies, uma abordagem completa de como dominar esse recurso poderoso de Javascript. Ele começa testando nossos conhecimentos:

Este artigo é destinado a programadores com alguma experiência, e que consegue ler a seguinte função Javascript :
function sayHello(name) {

  var text = 'Hello ' + name;

  var sayAlert = function() { alert(text); }

  sayAlert();

}

E continua com uma série de exemplos e explicações como este:

function sayAlice() {

  var sayAlert = function() { alert(alice); }

  // Local variable that ends up within closure
  var alice = 'Hello Alice';

  return sayAlert;
}

Infelizmente o artigo está em inglês. Para os que não simpatizam com o idioma sugiro ainda sim checar o site porque os exemplos explicam tudo.

JSONP e vazamento de memória

btbruno_@hotmail.com (Bruno Tavares) — Thu, 30 Jul 2009 15:31:00 +0000

Neil Fraser fez um ótimo post em seu blog falando sobre como a técnica de carregamento de javascript dinâmico JSONP pode causar vazamentos de memória nos browsers.

JSONP é o nome da técnica onde criamos um elemento script, definimos o src e inserimos no head da página, ocasionando assim um carregamento dinâmico do seu conteúdo:

//cria elemento script
var script = document.createElement('script');
script.src = 'http://example.com/cgi-bin/jsonp?q=What+is+the+meaning+of+life%3F';
script.id = 'JSONP';
script.type = 'text/javascript';
script.charset = 'utf-8';

//adiciona no head, ocasionando seu carregamento
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);

Não entrarei em detalhes, tudo isso funciona muito bem. O problema é que depois de alguns carregamentos o header da sua página pode estar cheio de tags <script>. Uma boa solução seria remover o elemento, assim que seu conteúdo foi extraido:

// Remove velhas tags scripts
var script;
while (script = document.getElementById('JSONP')) {
   script.parentNode.removeChild(script);
}

O problema, segundo Neil, é que apesar do browser se livrar do elemento, o objeto dele continua ocupando espaço em memória. Neil então propõe uma solução que diz funcionar perfeitamente:

// Remove velhas tags scripts
  var script;
  while (script = document.getElementById('JSONP')) {
    script.parentNode.removeChild(script);
    // Browsers não coletam isso no garbage colletor.
    // Então remove tudo para evitar isso
    for (var prop in script) {
      delete script[prop];
    }
  }

Remover o elemento e se livrar de suas propriedades. Enfim, a dica está dada. Mais detalhes podem ser vistos no post oficial.

5 Calendários de Eventos Ajax

btbruno_@hotmail.com (Bruno Tavares) — Mon, 27 Jul 2009 12:35:00 +0000

Se existe um componente difícil de se construir é um calendário. Não um calendário qualquer, tabular com dias do mês. Digo um calendário cheio de recursos, com drag 'n drop, gerenciamento de eventos e etc...

Justamente foi essa dificuldade que levou Theresa Neil a escrever um post entitulado 5 bons calendários de eventos AJAX (Five Nice Ajax Event Calendars).

Semana passada eu precisei encontrar um Calendário de Eventos Ajax robusto, similar ao iCal ou Google Calendar. Depois de horas de pesquisa, percebi que isso era mais difícil do que deveria ser.
Existe um grande número de calendários que foram prototipados em 2005-2007 mas nunca amadureceram. Muitos desses links estão quebrados ou sem uso hoje em dia. E, quando você pesquisa por Calendário Ajax, a maioria dos resultados são seletores de data - não componentes de cronograma completos.

Para ver a lista dos 5 e a análise de Theresa, visite o link original.

Boas práticas Javascript segundo Apple

btbruno_@hotmail.com (Bruno Tavares) — Wed, 22 Jul 2009 18:54:00 +0000

Procurando informações sobre performance, consumo de memória e afins, encontrei um "Guide code" muito interessante da Apple que gostaria de divulgar :

Apple JavaScript Coding Guidelines (Html) (PDF)

ExtDesenv: o blog de Ext JS

btbruno_@hotmail.com (Bruno Tavares) — Mon, 20 Jul 2009 13:32:00 +0000

É um pouco tarde para anunciar a criação de um blog que já têm alguns meses de postagens, porém me esqueci de fazê-lo aqui no framebox :) ExtDesenv, meu outro blog que criei para direcionar posts sobre o framework Ext. Sendo assim o framebox continua com sua missão de anunciar as novidades do desenvolvimento web, e o ExtDesenv anunciando as novidades do desenvolvimento Ext JS.

Javascript GOTO

btbruno_@hotmail.com (Bruno Tavares) — Mon, 13 Jul 2009 11:55:00 +0000

Sim, eu sei que as coisas andam meio paradas por aqui no framebox. Muitos afazeres da vida de um desenvolver implicam nisso. Mas espero que me desculpem (:

Aí vai uma novidade que li no ajaxian.com: Como fazer um GOTO no javascript

<script type="text/jsplusgoto">
var a = 0;
[lbl] topOfLoop:
a++;

if (a <292 ){
   goto topOfLoop;
}

document.getElementById('relevantLink').setAttribute('href', 'http://www.xkcd.com/' + a);
</script>

Post Original pode ser visto neste link.

FireRainbow: Code Highlighting para FireBug

btbruno_@hotmail.com (Bruno Tavares) — Mon, 04 May 2009 11:42:00 +0000

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

+ 5 dicas de CSS

noreply@blogger.com (Elvis Oliveira) — Sat, 11 Apr 2009 16:14:00 +0000

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

noreply@blogger.com (Elvis Oliveira) — Fri, 10 Apr 2009 15:38:00 +0000

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!

noreply@blogger.com (Elvis Oliveira) — Fri, 10 Apr 2009 06:12:00 +0000

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

btbruno_@hotmail.com (Bruno Tavares) — Fri, 27 Feb 2009 10:57:00 +0000

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

btbruno_@hotmail.com (Bruno Tavares) — Tue, 17 Feb 2009 19:40:00 +0000

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

noreply@blogger.com (Elvis Oliveira) — Wed, 11 Feb 2009 14:04:00 +0000

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:

Não requer plug-ins – Funciona com recursos nativos do usuario.
Compatibilidade - Funciona nos principais navegadores do mercado.
Fácil - Nenhuma ou quase nenhuma configuração, dependendo do uso.
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

noreply@blogger.com (Elvis Oliveira) — Fri, 06 Feb 2009 13:03:00 +0000

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!

noreply@blogger.com (Elvis Oliveira) — Thu, 05 Feb 2009 19:39:00 +0000

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

btbruno_@hotmail.com (Bruno Tavares) — Wed, 14 Jan 2009 10:00:00 +0000

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

Framebox 2008

btbruno_@hotmail.com (Bruno Tavares) — Sun, 21 Dec 2008 23:35:00 +0000

É isso ai galera, post de encerramento do ano de 2008! Nós da equipe framebox só temos a agradecer à todos nossos leitores que desde a criação do blog vêm nos acompanhando e participando do desenvolvimento dele. O blog no início era bem pequeno, somente com o intuito de agregar um pouco mais à comunidade de desenvolvedores. Hoje continuamos pequenos, porém um pouco maiores que antes, contando com mais visitas e mais colaboradores

Aproveitando a ocasião fechamos 2008 da melhor forma! Temos como convidado em nosso blog Elvis Oliveira, que estará preparando algo para em breve compartilhar conosco.

As espectativas em viradas de ano sempre são grandes, e agora temos mais uma, expandir o framebox blog! Como primeira medida alterei o topo do blog e organizei melhor as categorias de posts. Próximo passo será um domínio próximo assim que possível. Também iremos abordar mais sobre novidades do mundo web como Adobe Air, Gears e Jaxer. Percebemos que estas tecnologias são pouco exploradas e muito promissoras por isso queremos colocá-las em foco em 2009. Também queremos abordar mais sobre temas como acessibilidade e padrões de desenvolvimento. Alguma sugestão? Envie-nos um email!

Concluindo então, desejamos um natal maravilhoso e um ano novo cheio de sucessos! Um forte abraço e fiquem aí com uma seleção dos posts destaques de 2008!

Desenvolvendo Aplicações Web com ExtJS

Comet : Ajax de forma Reversa

Criando gráficos com EXT e Google Visualization

Editor Visual ExtJS

CSS Sprite : Turbine suas aplicações

Tudo sobre JSLint

Melhor perfomance : Loops mais rápidos

Compactando Javascript

Porque declarar variáveis com var?