dochub concentra de maneira fácil e rápida as documentações de CSS, HTML, Javascript e DOM. No qual tem o seu conteúdo retirado da Mozilla Developer Network.

Excelente ferramente para tirar aquela dúvida ou refrescar a memória.

Good Things

Canvas: para encapsular a tag canvas, pegando automaticamente o context e fornecendo algumas funções a [...]]]> Comecei escrever um pequeno projeto para facilitar a criação de jogos em Javascript utilizando HTML5 Canvas para isso. Baseado em scenegraph podendo criar nós dependentes, relativos ao nó pai. Por enquanto a estrutura da engine é composta por:

Canvas: para encapsular a tag canvas, pegando automaticamente o context e fornecendo algumas funções a mais.

Game: o jogo em sí, possui uma ou muitas cenas (Scene). Contém o loop principal para atualizações do canvas. Necessita de uma instância do Canvas.

Scene: deve ser estendida para criar cenas customizadas, deve implementar o método update(interval).

CanvasNode: um nó do grafo, possui as coordenadas e ângulo de rotação do elemento no canvas.

CanvasNodeGroup: um grupo de nós. Estende CanvasNode.

Graphics: um nó “printável”, quem for estendê-lo deve implementar o método draw(). Possui como subclasses: Rectangle, Triangle, Circle, Text, Image2d e Line.

GraphicsGroup: estende CanvasNodeGroup, possui um grupo de graphics. Scene é um GraphicsGroup.

Os próximos passos serão a implementação de TileMap, Scene Intro, Menu e botões. Agora é só aguardar até o próximo exemplo.

[update 2010-05-06]
Added mouse and button support.
See example above.
[/update]

[update 2010-05-06]
Examples in http://mangame.rogeriolino.com/
[/update]

[update 2011-11-11]
Source now available in GitHub!
[/update]

SWFAddress é uma pequena mas poderosa biblioteca que provê deep linking para Flash e Ajax. É uma ferramenta de desenvolvimento, permitindo a criação de URLs unicas e virtuais que podem apontar para uma seção do site ou aplicação. SWFAddress habilita algumas de importantes capacidades que faltam hoje em dia nas tecnologias [...]]]>

SWFAddress é uma pequena mas poderosa biblioteca que provê deep linking para Flash e Ajax. É uma ferramenta de desenvolvimento, permitindo a criação de URLs unicas e virtuais que podem apontar para uma seção do site ou aplicação. SWFAddress habilita algumas de importantes capacidades que faltam hoje em dia nas tecnologias RIA, incluindo:

• Adicionar ao Favoritos de um navegador ou site social
• Enviar links via email ou mensageiros instantâneos
• Procurar por um conteúdo específico através dos sites de buscas
• Utilizar o histórico do navegador e o botão de recarregar

O Flash está para o SEO assim como o Coringa está para o Batman. Mas nem tudo está perdido quando se trata de otimizar a indexação do site em SWF nos mecanismos de busca. Com SWFAddress você pode interagir com a página via javascript alterando a URL e o próprio conteúdo do filme, possibilidade do o uso dos botões voltar e avançar do browser, adicionar ao Favoritos e alterar a animação do seu filme de acordo com a URL que está sendo requisitada.

Caso sua página seja acessada através da URL http://siteemflash.com/#contato, você poderá pular na timeline indo direto para o frame do contato. Para evitar o reload da página toda interação é feita através de âncoras html (#). E as alterações da URL utilizando âncoras são desprezadas pelos buscadores, uma vez que a âncora só serve para movimentar o foco na mesma página, logo o seu conteúdo permanece inalterado.

É aí que entra o módulo ReWrite do Apache, com o mod_rewrite podemos escrever condições para tratar as requisições, redirecionando-as ou não. Então voltando ao exemplo anterior, teríamos uma condição que quando for requisitada a página http://siteemflash.com/contato (ou qualquer outra URL) redireciona para a página inicial (index) adicionando a âncora para contato (#contato) e imprime na página o conteúdo referente à mesma. Esse conteúdo impresso não será visível, apenas para indexação. O sitemap ou a estrutura básica do site, também deve estar contido no bloco de código html invisível, juntamente com todas outras informações relevantes.

Resumindo, você acaba tendo um trabalho dobrado ao desenvolver o site, mas evita transtornos de indexação. É muito útil para quem não abre mão do site feito com o uso da ferramenta da Adobe.

No próprio site da Asual tem um exemplo de uso do SWFAddress para SEO (o exemplo pode ser baixado pelo site). Abaixo segue alguns sites que fizeram uso da biblioteca, no qual o primeiro eu participei do desenvolvimento:

• Óticas Paris
• Salinas Rio -inverno2010
• Umbro
• Mis Architecture
• Kraftfoods – Food and Family
• BBH

SGA LIVRE significa Sistema de Gerenciamento do Atendimento, versão Livre. É desenvolvido pela DATAPREV, totalmente baseado em tecnologias de software livre e de código aberto.

Através do SGA é possível gerenciar filas e fluxo de atendimento em quaisquer tipos de empresas ou organizações que prestam serviço de atendimento presencial à pessoas.

O SGA oferece [...]]]>

SGA LIVRE significa Sistema de Gerenciamento do Atendimento, versão Livre. É desenvolvido pela DATAPREV, totalmente baseado em tecnologias de software livre e de código aberto.

Através do SGA é possível gerenciar filas e fluxo de atendimento em quaisquer tipos de empresas ou organizações que prestam serviço de atendimento presencial à pessoas.

O SGA oferece o controle de filas de atendimento através de emissão de senhas e chamada das mesmas através de painéis. As filas de atendimento podem conter um único serviço ou um grupo de serviços. Os painéis podem chamar um, vários ou todos os serviços. Uma unidade de atendimento pode ter vários painéis.

O SGA é mais do que um sistema de controle de filas. Ao gerenciar o fluxo de atendimento, o sistema apresenta uma série de recursos que auxiliam na gerência e administração das unidades de atendimento.

Fornece uma diversidade de informações gerenciais preciosas, através de relatórios, estatísticas e gráficos avançados sobre atendimentos de uma unidade, de um grupo de unidades ou de todas elas. É possível obter estatísticas e tempos médios de atendimento por atendente, por período e por unidade, entre outras. Pode-se obter dados detalhados ou agregados.

As informações gerenciais fornecidas pelo SGA possibilitam aos gestores planejar, acompanhar, monitorar, otimizar e agilizar o atendimento aos clientes.

fonte: http://www.softwarepublico.gov.br/ver-comunidade?community_id=15719494

Não é novidade o lançamento da versão livre do SGA, porém é com muito orgulho que hoje vejo este software ganhando força no cenário nacional, e também por ter participado do seu desenvolvimento. O software foi desenvolvido em PHP fornecendo uma camada para abstração do RDMS, utilizando como interface de acesso o PDO (suporte padrão ao PostgreSQL). Tal contribuição foi desde definir a estrutura do sistema, passando por diagramação, HTML, CSS, até a programação PHP e Javascript.

Tela de instalação do SGA

Dividido em módulos é fácil customizar a ferramenta para atender as necessidades específicas de qualquer centro de atendimento. Para facilitar o uso de requisições assíncronas no sistema foi utilizada o código Ajax da lib escrita por mim e já comentada nesse blog (libjsx, Ajax.js).

Tela de atendimento do SGA

Quem quiser utilizar ou contribuir com o projeto basta se cadastrar no site http://www.softwarepublico.gov.br/ e acessar a página da comunidade.

No Webkit as informações são armazenadas utilizando [...]]]> Uma das funcionalidades mais robustas presentes nessa nova versão do HTML é exatamente o suporte ao armazenamento local, sem ser por Cookie mas sim pelo banco de dados presente no browser. Tal funcionalidade já está presente no Webkit que fornece uma aplicação de exemplo: http://webkit.org/demos/sticky-notes/.

No Webkit as informações são armazenadas utilizando SQLite, e acredito que o Firefox irá pelo mesmo caminho, já que ele também utiliza o SQLite para armazenar os “Favoritos”.

Para abrir a conexão com a banco de dados (openDatabase) deve-se informar o nome do banco (database name), a versão (database version), o nome de exibição (display name) e o tamanho estimado em bytes (estimated size) que será armazenado.

var db;
try {
    if (window.openDatabase) {
        db = openDatabase("MyDB", "1.0", "HTML5 Database Example", 200000);
        if (!db) {
            alert("Failed to open the database.");
        }
    } else {
        alert("Couldn't open the database.");
    }
} catch(err) { }

Uma vez estabelecida a conexão a interação passa ser efetuada através de comandos SQL.

db.transaction(function(tx) {
tx.executeSql("CREATE TABLE myTable (id REAL UNIQUE, name TEXT, description TEXT, timestamp REAL");
});

db.transaction(function (tx) {
tx.executeSql("INSERT INTO myTable (id, name, description, timestamp) VALUES (?, ?, ?, ?)", [id, name, description, timestamp]);
});

db.transaction(function(tx) {
tx.executeSql("DELETE FROM myTable WHERE id = ?", [id]);
});

db.transaction(function(tx) {
    tx.executeSql(
        "SELECT * FROM myTable WHERE id = ?",
         [id],
         function(tx, result) {
             // success
             if (result.rows.length > 0) {
                   alert("My name is: " + result.rows.item(0)['name']);
             } else {
                  alert("Sorry, no result for this id");
              }
         },
         function(tx, error) {
             // error
             alert("Error when try retrieve data: " + error.message);
         }
    );
});

O método executeSql pode receber 4 parâmetros, sendo eles:

• O SQL a ser executado
• Os valores parametrizados para serem utilizados na consulta (array)
• Função callback para ser executada caso haja sucesso (onSuccess)
• Função callback para ser executada caso haja falha (onError)

Sinceramente eu achei muito legal conceder mais esse poder ao Javascript no HTML5, porém “com grandes poderes vêm grandes responsabilidades”.

O que antes precisariámos de um plugin adicional – Flash Player e/ou Java [...]]]> Conforme a evolução dos browsers e consequentemente das suas engines de javascript, hoje é possível encontrarmos diversas API/Engines dessa linguagem de script. E um tipo de engine que vem crescendo nessa linguagem é a de jogos.

O que antes precisariámos de um plugin adicional – Flash Player e/ou Java Applet – consumindo mais memória e processamento, podemos agora nos divertir com jogos rodando nativamente no browser.

É possível encontrar na web jogos desde os simples e clássicos Paciência (Solitaire), Tetris, Resta Um (Peg), passando por clássicos não tão simples como Mario Kart, até jogos mais complexos como Shadow of Time 4 e Crystal Galaxy.

Segue abaixo alguns jogos:

• Solitaire
• Tetris
• Peg
• Battleship
• Panic Run
• Bubble Trouble
• Super Mario Kart
• Pudracer
• Bunny Hunt
• Shadow of Time 4
• Crystal Galaxy
• Capman

Javascript Game Engines:

gameQuery: é um plugin do famoso jQuery, que fornece animação de sprites multi camadas, hierarquia de sprite (agrupamentos), detecção de colisões, dentre outras funcionalidades. Para visualizar alguns demos de jogos desenvolvidos por essa engine é só clicar aqui.

GameJS: inspirado nos códigos javascript da ExtJS e com a ideia de portar a facilidade de criar jogos da XNA Game Framework da Microsoft. No site do projeto possui um jogo demo chamado Jetris.

EffectGames: consiste na verdade em um site que provê ferramentas online e gratuitas para desenvolvimento, hospedagem e compartilhamento de jogos. Há uma wiki contendo o passo-a-passo de como utilizar as ferramentas através do Getting Started Guide. E também há a documentação da API fornecida pelo site. Na própria página principal você irá encontrar os demos.

Render Engine: engine cross-browser, opensource, tem como principal característica facilidade de uso. Veja seus demos aqui.

Akihabara: engine para jogos arcade, estilo 8-bit. Na mesma página da engine se encontram os demos.

Mais sobre jogos em javascript:

http://www.def-logic.com/

http://www.javascriptgaming.com/

http://www.webresourcesdepot.com/25-amazing-javascript-games-some-fun-and-inspiration/

Há algum tempo eu reuni alguns exemplos meus de javascript no Google Code com o nome de libjsx, aonde adicionei outras funcionalidades também como por exemplos métodos para Ajax. Separei em componentes visuais (colorpicker, datagrid, etc.), eventos de mouse e teclado, html elements, próprio ajax, e [...]]]>

Há algum tempo eu reuni alguns exemplos meus de javascript no Google Code com o nome de libjsx, aonde adicionei outras funcionalidades também como por exemplos métodos para Ajax. Separei em componentes visuais (colorpicker, datagrid, etc.), eventos de mouse e teclado, html elements, próprio ajax, e core com algumas funcionalidades básicas.

Mas devido um outro projeto várias funcionalidades novas que fiz não estão presentes, espero que após concluir o projeto eu possa mesclar as modificações e tornar essa bibilioteca realmente usável. Por enquanto vale a pena dar uma lida por curiosidade.