Rogério Lino

CSS: Footer always in bottom

Rogério Alencar Lino Filho — Thu, 17 Jun 2010 14:51:50 +0000

É muito comum vermos pessoas procurando saber como deixar um elemento HTML sempre no final da página, mas caso a página seja redimensionada criando rolagem, esse elemento continue no final dela. Ou seja, não apenas colocar o elemento com position fixed.

Para tal exemplo vamos precisar de um HTML simples:

Footer always in bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet imperdiet justo, quis congue velit egestas quis. Suspendisse ac tellus vitae est ultrices imperdiet eget at dolor. Donec sit amet viverra arcu. Aenean pulvinar vehicula justo, tincidunt congue nisi pharetra eu. Suspendisse potenti. Sed libero quam, lacinia at facilisis eu, egestas sodales dolor. Duis gravida, diam interdum cursus dictum, ligula libero pellentesque lacus, vitae viverra nulla metus id erat. Suspendisse fermentum aliquam hendrerit. Sed vulputate massa ut felis sagittis molestie. Suspendisse facilisis condimentum diam, a hendrerit urna venenatis sit amet. Cras orci diam, aliquam quis fringilla ac, euismod vel orci. Quisque ac pharetra nisi. Quisque et orci ligula. Praesent lacus felis, bibendum ac varius ac, eleifend in nulla. Aliquam sodales porttitor iaculis. Aliquam pretium risus ac neque egestas convallis. Sed dignissim massa ut odio vestibulum gravida ut vel nulla.
Sed non lacus in nibh lobortis imperdiet. Aliquam auctor tellus quis elit adipiscing consequat. Ut in elit at orci dapibus gravida interdum eget sapien. Sed lobortis, massa nec aliquet aliquet, nulla mi tincidunt quam, id iaculis turpis nibh interdum leo. Curabitur in lorem et risus ultrices pharetra. Mauris adipiscing eros vitae diam sodales et rutrum velit consequat. Fusce adipiscing congue ultrices. Nullam fermentum ullamcorper urna a malesuada. Sed sit amet congue tortor. Nulla accumsan blandit diam sed feugiat. Morbi lobortis fermentum metus, ac pulvinar dui commodo ut.

footer here

E o CSS abaixo:

* {
    padding: 0px;
    margin: 0px;
}

html, body {
    height: 100%;
}

#page {
    min-height: 100%;
    position: relative;
}

#footer {
    width: 100%;
    bottom: 0;
    position: absolute;
}

O exemplo funcionando você confere aqui.

Javascript Game Engine for HTML5 Canvas

Rogério Alencar Lino Filho — Thu, 06 May 2010 19:04:35 +0000

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]

PHP: Socket Class

Rogério Alencar Lino Filho — Thu, 22 Apr 2010 19:19:03 +0000

Muitas linguagens oferecem suporte a Sockets, e com PHP não é diferente, porém a falta de orientação a objetos nas funções do PHP pode ser um inconveniente para algumas pessoas. E como eu me incluo entre essas pessoas, quando precisei utilizar sockets em PHP acabei criando um classe para englobar essas funções soltas e fornecer tratamento a erros.

/**
 * Copyright 2010 Rogerio Alencar Lino Filho
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Socket
 *
 * @author rogeriolino
 */
class Socket {

    private $port     = 3000;
    private $address  = "localhost";
    private $blocking = true;

    private $buffer   = 2048;
    private $backlog  = 5;

    private $type     = SOCK_STREAM;
    private $family   = AF_INET;
    private $protocol = SOL_TCP;

    private $resource;

    /**
     * Socket constructor
     * @param  $resource
     */
    public function  __construct($resource = null) {
        if ($resource == null) {
            $this->resource = socket_create($this->family, $this->type, $this->protocol);
        } else {
            $this->resource = $resource;
        }
    }

    /**
     * Returns the socket port
     * @return int
     */
    public function get_port() {
        return $this->port;
    }

    /**
     * Define the socket port
     * @param int $port
     */
    public function set_port($port) {
        $this->port = $port;
    }

    /**
     *
     * @return string
     */
    public function get_address() {
        return $this->address;
    }

    public function set_address($address) {
        $this->address = $address;
    }

    /**
     * Returns if the socket is blocking mode
     * @return boolean
     */
    public function is_blocking() {
        return $this->blocking;
    }

    /**
     * Defines whether the socket is blocking or nonblocking mode
     * @param boolean $block
     */
    public function set_blocking($blocking) {
        $this->blocking = ($blocking == true);
        $this->update_blocking_mode();
    }

    /**
     * Returns the socket communication type
     * @return int
     */
    public function get_type() {
        return $this->type;
    }

    /**
     * Define the socket communication type
     * @param int $type
     */
    public function set_type($type) {
        if ($type == SOCK_STREAM || $type == SOCK_DGRAM || $type == SOCK_SEQPACKET || $type == SOCK_RAW || $type == SOCK_RDM) {
            $this->type = $type;
        } else {
            throw new Socket_Exception("Invalid socket communication type");
        }
    }

    /**
     * Returns the socket protocol family
     * @return int
     */
    public function get_family() {
        return $this->family;
    }

    /**
     * Define the socket protocol family
     * @param int $family
     */
    public function set_family($family) {
        if ($family == AF_INET || $family == AF_INET6 || $family == AF_UNIX) {
            $this->family = $family;
        } else {
            throw new Socket_Exception("Invalid socket protocol family");
        }
    }

    /**
     * Returns the socket protocol
     * @return int
     */
    public function get_protocol() {
        return $this->protocol;
    }

    /**
     * Define the socket protocol, must be compatible whit the protocol family
     * @param int $protocol
     */
    public function set_protocol($protocol) {
        if ($protocol == SOL_TCP || $protocol == SOL_UDP || $protocol == SOL_SOCKET) {
            $this->protocol = $protocol;
        } else {
            throw new Socket_Exception("Invalid socket protocol");
        }
    }

    /**
     * Binds to a socket
     * @throws Socket_Exception
     */
    public function bind() {
        if (socket_bind($this->resource, $this->address, $this->port) === false) {
            throw new Socket_Exception("Socket bind failed: " . $this->error());
        }
    }

    /**
     * Listens for a connection on a socket
     * @throws Socket_Exception
     */
    public function listen() {
        if (socket_listen($this->resource, $this->backlog) === false) {
            throw new Socket_Exception("Socket listen failed: " . $this->error());
        }
    }

    /**
     * Accepts a connection
     * @throws Socket_Exception
     * @return Socket
     */
    public function accept() {
        $sock = socket_accept($this->resource);
        if ($sock === false) {
            throw new Socket_Exception("Socket accept failed: " . $this->error());
        }
        return new Socket($sock);
    }

    /**
     * Reads data from the connected socket
     * @return string
     */
    public function read() {
        $data = "";
        while (($m = socket_read($this->resource, $this->buffer)) != "") {
            $data .= $m;
        }
        return $data;
    }

    /**
     * Write the data to connected socket
     * @param string $message
     */
    public function write($data) {
        socket_write($this->resource, $data, strlen($data));
    }

    /**
     * Initiates a connection on a socket
     * @throws Socket_Exception
     * @return boolean
     */
    public function connect() {
        try {
            return socket_connect($this->resource, $this->address, $this->port);
        } catch (Socket_Exception $e) {
            return false;
        }
    }

    /**
     * Close the socket connection
     */
    public function close() {
        socket_close($this->resource);
    }

    private function update_blocking_mode() {
        if ($this->blocking) {
            socket_set_block($this->resource);
        } else {
            socket_set_nonblock($this->resource);
        }
    }

    private function error() {
        return socket_strerror(socket_last_error($this->resource));
    }

}

Classe para as exceções:

/**
 * Copyright 2010 Rogerio Alencar Lino Filho
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Socket_Exception
 *
 * @author rogeriolino
 */
class Socket_Exception extends Exception {

    public function  __construct($message, $code = 0, $previous = null) {
        $this->message = $message;
        $this->code = $code;
        $this->message = $previous;
    }

}

Espero que seja de bom aproveito.

PHP: Annotations

Twitter: Resumo #2

Rogério Alencar Lino Filho — Thu, 08 Apr 2010 22:33:08 +0000

Twitter: Resumo #1

Flash: SWFAddress + ReWrite = SEO

Rogério Alencar Lino Filho — Thu, 01 Apr 2010 14:44:53 +0000

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:

PHP: Annotations

Rogério Alencar Lino Filho — Fri, 26 Mar 2010 13:21:12 +0000

É indiscutível a agilidade e facilidade de configuração que as annotations provêm no Java, e com o objetivo de trazer tal comodidade ao PHP surgiu o projeto Addendum – escrito por Jan Suchal – que permite via Reflection acessar as annotations das classes.

As annotations devem ser escritas em blocos de comentários, uma vez que o @ (caracter que inicia uma annotation) é um caractere reservado no PHP. Elas podem ser mono ou multi valoradas de acordo com os exemplos abaixo.


// Custom annotation
class Persistent extends Annotation {}

// Custom annotation
class Table extends Annotation {}

// Multi valued annotation
class Secured extends Annotation {
   public $role;
   public $level;
}

/**
 * @Persistent
 * @Table("people")
 * @Secured(role = "admin", level = 2)
 */
class Person {
   // some code
}

// getting the annotation by class name
$reflection = new ReflectionAnnotatedClass('Person');

// getting the annotation by instance
$person = new Person();
$reflection = new ReflectionAnnotatedClass($person);

// true
$reflection->hasAnnotation('Persistent'); 

// contains string "people"
$reflection->getAnnotation('Table')->value;

E seguindo na mesma onda da JPA, a versão 2.0 do projeto Doctrine implementou também a mesma funcionalidade e agora possui suas próprias annotations facilitando a configuração das classes de persistência e seus relacionamentos.


/**
 * @DoctrineEntity(tableName="cms_articles")
 */
class CmsArticle {

   /**
    * @DoctrineId
    * @DoctrineColumn(type="integer")
    * @DoctrineIdGenerator("auto")
    */
   public $id;

   /**
    * @DoctrineColumn(type="varchar", length=255)
    */
   public $topic;

   /**
    * @DoctrineColumn(type="varchar")
    */
   public $text;

   /**
    * @DoctrineManyToOne(targetEntity="CmsUser",
           joinColumns={"user_id" = "id"})
    */
   public $user;

   /**
    * @DoctrineOneToMany(targetEntity="CmsComment", mappedBy="article")
    */
   public $comments;
}

SGA Livre

Rogério Alencar Lino Filho — Thu, 18 Mar 2010 12:51:13 +0000

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.

Python: PyCACIC

HTML5: Database

Rogério Alencar Lino Filho — Thu, 11 Mar 2010 19:17:36 +0000

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”.

Twitter: Resumo #1

Rogério Alencar Lino Filho — Fri, 05 Mar 2010 23:44:31 +0000

Gostou dos links? Follow me!

Twitter: Resumo #2

HTML5: Video Player

Rogério Alencar Lino Filho — Fri, 19 Feb 2010 17:23:46 +0000

Para todos aqueles que odeiam o flash player e adoram assistir vídeos pela Internet, alguns portais de vídeos possuem uma alternativa ao plugin da Adobe para que os usuários possam assistir seus vídeos sem precisar de um plugin externo que pode deixar o browser mais lento e ocasionar travamentos. Isso se dá com a utilização da tag video do HTML5 que por sua vez varia dependendo da implementação de cada navegador.

No Youtube por exemplo há uma página para sua versão experimental. Ao acessar esta página destinada a habilitar o player em HTML5, eis que surgem algumas considerações e uma lista de browsers que o suportam:

Google Chrome
Apple Safari (versão 4+)
Internet Explorer com o Google Chrome Frame

Não incluindo o Firefox, um dos browsers mais utilizados no mundo e que suporta o HTML5. Mas para isso há uma explicação: O padrão de compressão adotado pelo Youtube é o H.264 que não é suportado pelo Firefox devido ao fato deste formato ser proprietário e o pessoal da Mozilla utilizar Ogg Theora como padrão. Motivo que sem querer querendo acaba ajudando o browser do Google, curiosamente, mesmo dono do Youtube.

Outros pontos ruins nessa versão do Youtube são a nítida perda de qualidade entre os players em Flash e em HTML5, e o fato de não suportar fullscreen (limitação do HTML5 e não do player). Além do Youtube o Vimeo também possui uma versão em HTML5, seguindo as mesmas restrições do Youtube, porém, com uma perda de qualidade menor. Já o Dailymotion utiliza os formatos Ogg, Theora + Vorbis, funcionando em todos os navegadores decentes e com algumas travadas irritantes.

Mas nem tudo está perdido para os players feitos em HTML5, um grupo de desenvolvedores e designers denominado Jilion desenvolveu um excelente player (bonito e funcional) chamado SublimeVideo. Suportando todos os browsers listados na página do Youtube/Vimeo incluindo o Firefox.

SublimeVideo - HTML5 Video Player

Mais sobre HTML5 video e codecs.