<![CDATA[Rogério Lino]]> 2015-01-07T22:47:42-02:00 http://rogeriolino.com/ Octopress <![CDATA[PHP: JsonSerializable]]> 2014-06-09T14:44:23-03:00 http://rogeriolino.com/2014/06/09/php-jsonserializable Desde a versão 5.4 do PHP ficou mais fácil transformar entidades em JSON através da função json_encode(). Basta implementar a interface JsonSerializable, no qual o único método que precisa ser implementado pela subclasse é o jsonSerialize.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

class User implements \JsonSerializable {

    private $username;
    private $firstName;
    private $lastName;

    ...

    public function jsonSerialize() {
        return array(
            'username' => $this->username,
            'firstName' => $this->firstName,
            'lastName' => $this->lastName,
            'fullName' => "{$this->firstName} {$this->lastName}"
        );
    }

}

Serializando:

1
2
3
4
5

$user = new User();
$user->setUsername("rogeriolino");
$user->setFirstName("Rogério");
$user->setLastName("Lino");
echo json_encode($user);

Resultado:

1
2
3
4
5
6

{
    "username": "rogeriolino",
    "firstName": "Rogério",
    "lastName": "Lino",
    "fullName": "Rogério Lino",
}

Essa implementação se torna muito útil para desenvolvimento de APIs RESTful e ajax responses (json response).

]]> <![CDATA[Session Keep Alive]]> 2014-05-12T13:14:14-03:00 http://rogeriolino.com/2014/05/12/session-keep-alive Uma maneira fácil de manter a sessão ativa no lado do servidor sem sobrecarregá-lo com longos tempos de timeout, é usar um script que redireciona o usuário para a tela de login após um determinado período de inatividade (teclado e mouse ociosos), e fazer requisições assíncronas ao servidor para manter a sessão ativa durante a atividade.

Resumindo, enquanto usuário está utilizando a aplicação (digitando ou movendo o cursor) uma requisição assíncrona é disparada a cada X minutos (ping), e quando o usuário ficar ocioso começa a contar o tempo para redirecioná-lo para a tela de login. É importante que esse tempo para redirecionar para o login seja menor do que o timeout do servidor.

Para implementar essa ideia, vou utilizar um plugin jQuery que monitora a atividade do usuário (teclado e mouse): https://github.com/rogeriolino/jquery-idletimer.

Abaixo o trecho javascript para disparar o ping e fazer o logout após 10 minutos de ociosidade.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// session keep alive
;(function($) {
    "use strict";

    var pingTime = 60; // ping a cada 60 segundos
    var count = pingTime;
    $.idleTimer({
        time: 10 * 60, // 10 minutos para timeout
        start: function() {
            count = pingTime;
        },
        change: function(it) {
            count--;
            console.log(count);
            if (count <= 0) {
                count = pingTime;
                $.ajax({ url: '/ping.php' });
            }
        },
        end: function() {
            window.location.href = '/logout.php';
        }
    });
})(jQuery);

Arquivo PHP para receber as requisições e abrir a sessão mantendo-a ativa:

1
2
3

<?php

session_start();
]]> <![CDATA[Stack Overflow Em Português]]> 2014-01-29T20:47:48-02:00 http://rogeriolino.com/2014/01/29/stack-overflow-em-portugues Foi anunciado hoje no blog do StackExchange o lançamento oficial do Stack Overflow em Português. Conforme destacado na publicação do blog, esse é o primeiro Stack Overflow internacional.

Visite agora mesmo a nova comunidade e crie a sua conta: http://pt.stackoverflow.com

]]> <![CDATA[Simple Javascript Support Detection]]> 2014-01-10T21:57:26-02:00 http://rogeriolino.com/2014/01/10/simple-javascript-support-detection Partindo do princípio que o seu navegador não suporta javascript e depois contrariando via o próprio javascript, é possível fazer uma simples verificação se o navegador do usuário está com javascript habilitado ou não.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html class="no-js" lang="pt-BR">
<head>
    <title>JS detection</title>
    <script>document.documentElement.className = document.documentElement.className.replace("no-js","js");</script>

    <style>
        .js .alert-danger { display: none; }
        .no-js .alert-success { display: none; }
    </style>
</head>
<body>

    <div class="alert alert-danger">O seu navegador não possui suporte à <b>Javascript</b></div>

    <div class="alert alert-success">O suporte à <b>Javascript</b> está ativado</div>

</body>
</html>

Visualizar demo online.

]]> <![CDATA[FreezeHeader jQuery Plugin]]> 2014-01-08T14:58:41-02:00 http://rogeriolino.com/2014/01/08/freezeheader-jquery-plugin Se você está precisando de algum script para manter o cabeçalho da tabela sempre visível mesmo ao rolar a página, lhe apresento o plugin (jQuery) freezeheader criado pelo menu amigo Laerte.

Aproveitando também para parabenizá-lo por seu plugin ter ficado entre os 100 melhores de 2013.

Links

Demo: http://laertejjunior.github.io/freezeheader Github: https://github.com/laertejjunior/freezeheader

]]> <![CDATA[PHP: Slim Framework Action Based]]> 2013-12-27T10:06:51-02:00 http://rogeriolino.com/2013/12/27/php-slim-framework-action-based Há algum tempo utilizo o Slim Framework como base de meus projetos. E o motivo é sua simplicidade, velocidade e facilidade.

E para criar CRUD, eu utilizo um trecho de código para trabalhar rotas semelhante aos frameworks action based. Seguindo a convenção /controlador/método.

Exemplo:

Para a URI /clients/add terei uma classe controladora ClientsController com um método público (a ação) add. E o script tentará renderizar a página add.php dentro do diretório clients. E para a URI /clients/view/1 será necessário ter o método view que recebe um parâmetro (nesse caso “1”).

Abaixo segue o trecho semelhante ao que está disponível no meu repositório no Github (porém nesse repositório utilizo o Twig como template engine): rogeriolino/slimapp-skeleton.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$app->any('/:controller(/)(:action(/)(:params+))', function($controller, $action = 'index', $params = array()) use ($app) {
    // transforma o parâmetro :controller no nome da classe controladora (com namespace)
    $class = "MeuNamespace\\" . ucfirst($controller) . "Controller";
    try {
        if (!class_exists($class)) {
            throw new \Exception('Controlador não encontrado');
        }
        $ctrl = new $class($app);
        $methodName = preg_replace('/[^A-z0-9]/', '_', $action);
        $ref = new \ReflectionMethod($class, $methodName);
        if (!$ref->isPublic()) {
            throw new \Exception('O método do controlador não é público.');
        }
        $view = $methodName;
        $rs = $ref->invokeArgs($ctrl, $params);
        if ($rs) {
            $view = $rs;
        }
        $app->render("{$controller}/{$view}.php");
    } catch (\Exception $e) {
        $app->notFound();
    }
});

Para utilizar o slimapp-skeleton basta clonar o repositório e depois fazer a instalação das dependências via Composer.

]]> <![CDATA[Angular.js: Inplace Editing]]> 2013-12-12T11:57:12-02:00 http://rogeriolino.com/2013/12/12/angular-js-inplace-editing HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="container" ng-app="todo">
    <div ng-controller="todoCtrl">
        <form ng-submit="add()">
            <input type="text" class="form-control" placeholder="New task..." ng-model="newTodo">
            <button class="btn btn-primary">Add</button>
        </form>
        <ul>
            <li ng-repeat="todo in todos">
                <span ng-click="editing = true" ng-hide="editing"></span>
                <span ng-show="editing">
                    <input type="text" class="form-control" ng-model="todo.text" ng-blur="editing = false" ng-required>
                    <a data-ng-click="editing = false" class="glyphicon glyphicon-ok"></a>
                </span>
            </li>
        </ul>
    </div>
</div>

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var app = angular.module('todo', []);

app.controller('todoCtrl', function($scope) {

    $scope.todos = [
        {text: "First task"}
    ];

    $scope.add = function() {
        if ($scope.newTodo && $scope.newTodo != '') {
            $scope.todos.push({
                text: $scope.newTodo
            });
            $scope.newTodo = '';
        }
    }

});

JSFiddle demo

]]> <![CDATA[Futeria on Firefox OS]]> 2013-10-03T12:50:00-03:00 http://rogeriolino.com/2013/10/03/futeria-on-firefox-os Após inscrever meu aplicativo Futeria e ganhar um Geeksphone Keon (developer preview) da Mozilla. Anuncio que em breve o aplicativo também estará disponível para o Firefox OS.

Developer preview Firefox OS

[update 2013-10-09]

Futeria aprovado e disponível!

https://marketplace.firefox.com/app/futeria

Para demais dispositivos ou desktops, pode acessar a versão online direto http://m.futeria.net

]]> <![CDATA[PHP: 5.5 New Features]]> 2013-07-17T18:23:11-03:00 http://rogeriolino.com/2013/07/17/php-5-5-new-features A versão 5.5 do PHP foi lançada no mês passado, e trouxe algumas funcionalidades relevantes. Entre elas, seguem abaixo as mais interessantes (pelo menos para mim):

Generators

Com o Generators você pode iterar com um dado dentro de uma função sem a necessidade de criar um array para ser retornado.

1
2
3
4
5
6
7
8
9
10

function numerosInteiros($minimo, $maximo) {
    for ($i = $minimo; $i <= $maximo; $i++) {
        // a keyword yield "libera" a variável $i para a iteração (sem sair/retornar da/a função)
        yield $i;
    }
}

for (numerosInteiros(1, 10) as $numero) {
    echo "$numero ";
}

Ou um exemplo do próprio site php.net

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

function xrange($start, $limit, $step = 1) {
    if ($start < $limit) {
        if ($step <= 0) {
            throw new LogicException('Step must be +ve');
        }

        for ($i = $start; $i <= $limit; $i += $step) {
            yield $i;
        }
    } else {
        if ($step >= 0) {
            throw new LogicException('Step must be -ve');
        }

        for ($i = $start; $i >= $limit; $i += $step) {
            yield $i;
        }
    }
}

/*
 * Note that both range() and xrange() result in the same
 * output below.
 */

echo 'Single digit odd numbers from range():  ';
foreach (range(1, 9, 2) as $number) {
    echo "$number ";
}

Repare que não há necessidade de criar um array, populá-lo, retorná-lo, e só depois iterá-lo para imprimir os valores.

Finally

Mesmo já possuindo a bastante tempo o bloco try/catch, só agora a partir da versão 5.5 foi introduzida a keyword finally. No qual você define um bloco para ser executado de qualquer maneira (mesmo que caia no catch).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function divide($a, $b) {
    if ($b === 0) {
        throw new Exception('Divisão por zero');
    }
    return $a / $b;
}

try {
    echo '10 / 2 = ' . divide(10, 2);
    echo '2 / 0 = ' . divide(2, 0);
} catch (Exception $e) {
    echo $e->getMessage();
} finally {
    echo 'Término das operações';
}

::class

Agora é possível resolver o nome da classe apenas através de MinhaClass::class.

1
2
3
4
5
6
7

<?php
namespace NS {
    class ClassName {
    }
    echo ClassName::class;
}
?>

empty()

Agora é possível passar expressões para a função empty() e não mais apenas variáveis.

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
function always_false() {
    return false;
}

if (empty(always_false())) {
    echo "This will be printed.\n";
}

if (empty(true)) {
    echo "This will not be printed.\n";
}
?>

Veja mais

Para saber mais sobre a nova versão acesse os links abaixo:

http://www.php.net/releases/5_5_0.php http://br2.php.net/manual/en/migration55.php

E o php.net também lançou sua versão nova (ainda em beta). Clique aqui para abrir a versão beta.

]]> <![CDATA[UTF-8 Icons]]> 2013-05-06T11:55:09-03:00 http://rogeriolino.com/2013/05/06/utf-8-icons Com a adoção dos navegadores mais modernos, muitos projetos estão adotando os ícones UTF-8 em botões. Assim diminui a dependência de imagens tornando o carregamento mais rápido. Exemplo: http://dev.rogeriolino.com/exemplos/css/utf8_icons/index.html

Prós

  • Não há necessidade de imagens como dependência;

  • Pode usar a cor que desejar;

  • São escaláveis, muito fáceis de alterar o tamanho;

  • Pode usar transformações CSS (transparência, sombra, rotação, etc);

  • Reuso de ícones através de seletores CSS;

Contras

  • Os ícones das fonts padrões não são tão legais;

  • Embora não haja dependência de imagem, pode ter de font (web font);

  • Dependendo da font escolhida, um iconset pode ser mais leve;

Veja mais sobre ícones UTF-8

]]> <![CDATA[Novo SGA]]> 2013-02-05T09:33:57-02:00 http://rogeriolino.com/2013/02/05/novo-sga novosga

SGA é o acrônimo de Sistema de Gerenciamento de Atendimento, sistema desenvolvido pela Dataprev e liberado como código aberto através da versão SGA Livre. Devido ao desenvolvimento do SGA Livre estar estagnado na mesma versão desde 2009, unindo a burocracia dos responsáveis pela comunidade no [Portal do Software Público](http://softwarepublico.gov.br/) surgiu a necessidade de criar uma nova versão para esse sistema que já roda em diversas localidades do Brasil. A parte web foi totalmente reformulada, deixando mais leve e intuitiva, com uma interface amigável e instalação super fácil. Já no painel foi feitas melhorias para funcionar em monitores widescreen. Outras melhorias e funcionalidades estão previstas e irão ser aplicadas durante o desenvolvimento do projeto.

Visite o site do projeto e confira a versão demo disponível online.

Gostou e quer contribuir com o desenvolvimento? Acesse o projeto no GitHub.

]]> <![CDATA[CSS3: Selection Background Color]]> 2013-01-02T10:08:47-02:00 http://rogeriolino.com/2013/01/02/css3-selection-background-color Com o seletor selection podemos definir a cor do texto e de fundo do texto quando o selecionamos.

The ::-moz-selection (::selection) pseudo-element applies to the portion of a document that has been highlighted (e.g. selected with the mouse) by the user. Gecko/Firefox supports ::-moz-selection, use also ::selection other browsers. The following properties apply to ::-moz-selection: color, background and background-color (background-image is ignored). [http://dochub.io/#css/selection](http://dochub.io/#css/selection)

CSS

1
2
3
4
5
6
7
8
9
10
11

p::selection  { color: #000; }
p::-moz-selection { color: #000; }

p.yellow::selection  { background: yellow; }
p.yellow::-moz-selection { background: yellow; }

p.green::selection { background: #58FF4B; }
p.green::-moz-selection { background: #58FF4B; }

p.pink::selection { background: #E2189C; }
p.pink::-moz-selection { background: #E2189C; }

HTML

1
2
3
4
5

<p class="yellow">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

<p class="green">Aliquam erat volutpat. Donec in elit at magna venenatis venenatis...</p>

<p class="pink">Donec interdum placerat urna at aliquet...</p>

Exemplo http://dev.rogeriolino.com/exemplos/css/selection/index.html

]]> <![CDATA[jQuery + Modernizr: AccessKey Detection]]> 2012-12-13T14:13:36-02:00 http://rogeriolino.com/2012/12/13/jquery-modernizr-accesskey-detection O código abaixo permite exibir no title e na frente das tags que possuem o atributo accesskey o seu atalho.

Com o uso do CSS é adicionado ao final do conteúdo da tag o seu atalho. E via Javascript esse atalho também é adicionado ao title.

Como esses atalhos variam de acordo com o Browser e o Sistema Operacional, fiz uso do Modernizr + Detectizr para adicionar no body a classes informando o ambiente.

Dependências

1
2
3

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="https://raw.github.com/barisaydinoglu/Detectizr/master/detectizr.min.js"></script>

CSS

1
2
3
4
5
6
7
8
9

*[accesskey]:after {
    margin-left: 0.3em;
    color: #ccc;
    content: "[Alt + " attr(accesskey) "]";
}

body.firefox *[accesskey]:after { content: "[Alt + Shift + " attr(accesskey) "]"; }
body.firefox.mac *[accesskey]:after { content: "[Ctrl + Opt + " attr(accesskey) "]";  }
body.safari.mac *[accesskey]:after { content: "[Ctrl + " attr(accesskey) "]";  }

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/**
 * Add browser and OS name to body class, and append the shortcut to element title
 * @author rogeriolino
 */
(function($) {
    $(document).ready(function() {
        Modernizr.Detectizr.detect({detectScreen:false});
        var body = $('body')
        body.addClass(Modernizr.Detectizr.device.browser + ' ' + Modernizr.Detectizr.device.os);
        $('*[accesskey]').each(function(i, e) {
            var elem = $(e);
            prefix = 'Alt';
            if (body.hasClass('firefox')) {
                if (body.hasClass('mac')) {
                    prefix = 'Ctrl + Opt';
                } else {
                    prefix = 'Alt + Shift';
                }
            } else if (body.hasClass('safari mac')) {
                prefix = 'Ctrl';
            }
            elem.prop('title', elem.prop('title') + ' [' + prefix + ' + ' + elem.attr('accesskey') + ']');
        });
    });
})(jQuery);

Demo

Clique aqui para visualizar o exemplo no jsFiddle.net

]]> <![CDATA[jQuery: Horizontal + Vertical Align]]> 2012-11-28T08:23:58-02:00 http://rogeriolino.com/2012/11/28/jquery-horizontal-vertical-align Função jQuery para alinhar horizontalmente e verticalmente o elemento.

1
2
3
4
5
6
7
8
9

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css({
        top: '50%',
        left: '50%',
        margin: '-' + (this.height() / 2) + 'px 0 0 -' + (this.width() / 2) + 'px'
    });
    return this;
}

Exemplo:

1
2
3

<div id="centered_div">
    <p>My div content here</p>
</div>

1

$('#centered_div').center()

Edit on jsFiddle: http://jsfiddle.net/rc6kS/

]]> <![CDATA[Ubuntu: PHP 5.4 + PHP5-FPM/FastCgi on Apache2]]> 2012-11-26T14:55:46-02:00 http://rogeriolino.com/2012/11/26/ubuntu-php-5-4-php5-fpmfastcgi-on-apache2 Os comandos abaixo que devem ser executados como root.

Passo 1 - Verificando a versão do PHP no repositório

1

apt-cache show php5 | grep Version

Caso a versão mais nova já esteja na 5.4 ou superior, então pule para o próximo passo. Senão execute os comandos abaixo para adicionar o repositório com a versão 5.4.

1
2
3

apt-get install python-software-properties
add-apt-repository ppa:ondrej/php5
apt-get update

Passo 2 - Instalando os pacotes

Execute o commando abaixo para instalar de uma só vez o Apache2 como Worker, o módulo FastCgi e o PHP 5.4 com PHP-FPM.

1

apt-get install apache2-mpm-worker libapache2-mod-fastcgi php5-fpm php5

Habilitando os módulos de requeridos para o próximo passo:

1

a2enmod actions fastcgi alias

Passo 3 - Configurando o Apache2

Editar o arquivo de configuração do módulo fastcgi

1

vim /etc/apache2/mods-enabled/fastcgi.conf

Caso já tenha algumas entradas, comente (adicionando # no início da linha ou simplesmente remova) e adicione as seguintes linhas:

1
2
3
4

AddHandler php5-fcgi .php
Action php5-fcgi /php5-fcgi
Alias /php5-fcgi /usr/lib/cgi-bin/php5-fcgi
FastCgiExternalServer /usr/lib/cgi-bin/php5-fcgi -socket /var/run/php5-fpm.sock -pass-header Authorization

obs: O arquivo /usr/lib/cgi-bin/php5-fcgi realmente não existe, será apenas uma ponte para o PHP-FPM

Passo 4 - Configurando o PHP-FPM

Abra o arquivo de configuração do PHP-FPM

1

vim /etc/php5/fpm/pool.d/www.conf

E procure pela opção listen. Se não estiver como socket, altere conforme abaixo:

1

listen = /var/run/php5-fpm.sock

Essa opção serve para evitar overhead no TCP (caso o socket não esteja configurado)

obs: Repare que tem que ser o mesmo caminho especificado no fastcgi.conf

Passo 5 - Reiniciando e testando

Reiniciando os serviços:

1
2

/etc/init.d/apache2 restart
/etc/init.d/php5-fpm restart

Criando arquivo de teste:

1
2

cd /var/www
echo '<?php phpinfo();' | tee info.php

Depois acesse o arquivo criado via browser: http://nome_servidor/info.php

Confira a versão do PHP descrita no cabeçalho e se o valor do Server API está como FPM/FastCGI.

]]> <![CDATA[Quickpost: License Box]]> 2012-11-08T10:07:00-02:00 http://rogeriolino.com/2012/11/08/quickpost-license-box Atualizando exemplo antigo, para uso de CSS3:

Post original: http://rogeriolino.com/2006/11/25/tutorial-caixa-de-contrato/

Página da versão nova: http://dev.rogeriolino.com/exemplos/css/license/index.html

]]> <![CDATA[CSS3: Horizontal Menu]]> 2012-10-15T11:34:32-03:00 http://rogeriolino.com/2012/10/15/css3-horizontal-menu Exemplo de um menu dropdown horizontal, utilizando gradient e transition apenas com CSS3.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

.hmenu {
    height: 40px;
    position: relative;
}

.hmenu, .hmenu ul {
    border-radius: 3px;
}

.hmenu, .hmenu * {
    margin: 0;
    padding: 0;
}

.hmenu li {
    list-style: none;
    position: relative;
    display: inline;
}

.hmenu li {
    list-style: none;
    position: relative;
    float: left;
}

/* all links style */
.hmenu a {
    font-weight: bold;
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
    text-decoration: none;
}

/* main link style */
.hmenu>li>a {
    padding: 13px 20px;
    float: left;
}

.hmenu li ul {
    width: 150px;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    /* fading transition */
    transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out;
}

/* first submenu */
.hmenu>li>ul {
    top: 40px;
    left: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.hmenu li:hover>ul {
    visibility: visible;
    opacity: 1;
}

.hmenu li ul ul {
    top: 0px;
    left: 150px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.hmenu li ul li {
    width: 150px;
    display: block;
}

/* submenu link style */
.hmenu ul a {
    margin: 3px 2px;
    padding: 8px 15px;
    border-radius: 5px;
    display: block;
}

/* theming */
.hmenu {
    box-shadow: 0px 1px 5px #ccc;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

.hmenu a {
    color: #999;
}

.hmenu a:hover {
}

.hmenu li:hover>a {
    color: #000;
    text-shadow: 1px 1px 2px #ccc;
}

.hmenu ul {
    background-color: #f1f1f1;
    box-shadow: 0px 1px 5px #bbb;
}

.hmenu ul a:hover {
    background-color: #e1e1e1;
}

.hmenu>li>ul {
    border-top: 2px solid #999;
}

.hmenu li ul ul {
    border-left: 2px solid #999;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<ul class="hmenu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Services</a>
        <ul>
            <li><a href="#">Service 1</a></li>
            <li>
                <a href="#">Service 2</a>
                <ul>
                    <li><a href="#">Subservice 1</a></li>
                    <li><a href="#">Subservice 2</a></li>
                    <li><a href="#">Subservice 3</a></li>
                </ul>
            </li>
            <li><a href="#">Service 3</a></li>
            <li><a href="#">Service 4</a></li>
            <li><a href="#">Service 5</a></li>
        </ul>
    </li>
    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">Company</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </li>
</ul>

Visualizar o menu funcionando

]]> <![CDATA[PHP: 5.4 New Features]]> 2012-10-01T12:47:04-03:00 http://rogeriolino.com/2012/10/01/php-5-4-new-features Segue abaixo algumas das novas funcionalidades da versão 5.4 do PHP. Para ver mais informações, siga os links no final do post.

Trait

Trait (ou mixin em outras linguagens) é um mecanismo que permite que as classes reutilizem métodos de outras classes sem a necessidade de estende-la.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

trait Singleton {
    public static function getInstance() { ... }
}

class A {
    use Singleton;
    // ...
}

class B extends ArrayObject {
    use Singleton;
    // ...
}

// Singleton method is now available for both classes
A::getInstance();
B::getInstance();

Sintaxe curta para definição de Array

Agora é possível instanciar um array de maneira semelhante à outras linguagens de script, como por exemplo, Javascript.

1
2

$a = [1, 2, 3];
$b = ['foo' => 'orange', 'bar' => 'apple'];

Referência direta ao retorno das funções/métodos

Também é possível fazer fazer chamada direta ao retorno das funções, sem que haja necessidade de atribuir o valor a uma variável e só depois fazer a chamada.

1
2
3
4

function fruits() {
    return ['apple', 'banana', 'orange'];
}
echo fruits()[0]; // Outputs: apple

O mesmo serve para chamadas através de novas instâncias:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

class Person {
    private $name;
    public function setName($name) {
        $this->name = $name;
    }
    public function getName() {
        return $this->name;
    }
}
function createPerson() {
    $p = new Person();
    $p->setName('Rogerio');
    return $p;
}

echo (new Person)->setName('Rogerio')->getName(); // Outputs: Rogerio

Método mágico __invoke

Permite chamar um objeto como se fosse uma função

1
2
3
4
5
6
7
8
9
10
11

class MoneyObject {
    private $value;
    function __construct($val) {
        $this->value = $val;
    }
    function __invoke() {
        return sprintf('$%.2f',$this->value);
    }
}
$Money = new MoneyObject(11.02/5*13);
echo $Money(); // Outputs: $28.65

Built-in Web Server (CLI)

CLI server é uma pequena implementação de um Web server que você pode executar via linha de comando.

1

% php -S localhost:8000

Obviamente, não é para ser usado em produção.

Native Session Handler Interface

Ao invés de definir várias funções, você pode criar uma handler para a sua sessão, e apenas informá-lo no session_set_save_handler.

1
2
3
4
5
6
7
8
9
10

SessionHandler implements SessionHandlerInterface {
    public int close ( void )
    public int destroy ( string $sessionid )
    public int gc ( int $maxlifetime )
    public int open ( string $save_path , string $sessionid )
    public string read ( string $sessionid )
    public int write ( string $sessionid , string $sessiondata )
}

session_set_save_handler(new MySessionHandler);

JsonSerialize Interface

Semelhante ao __tostring ao tentar imprimir um objeto, você pode pre-definir o objeto que será serializado para o formato json, através do uso da função json_encode.

1
2
3
4
5
6
7
8
9
10

class Foo implements JsonSerializable {

    private $data = 'Bar';

    public function jsonSerialize() {
        return array('data'=>$this->data);
    }
}

echo json_encode(new Foo); // Outputs: {"data":"Bar"}

Para visualizar as alterações entre as versão 5.3 e 5.4, clique aqui.

Fontes: http://php.net/manual/en/migration54.new-features.php http://css.dzone.com/polls/what-new-feature-php-54 http://www.oracle.com/technetwork/articles/dsl/lerdorf-php54-1564639.html

]]> <![CDATA[Development Tools]]> 2012-08-31T17:02:57-03:00 http://rogeriolino.com/2012/08/31/development-tools

Iniciei e publiquei um pequeno projeto que reune algumas funcionalidades para auxiliar durante o desenvolvimento. Segue abaixo as funcionalidades que estão disponíveis por enquanto:

  • Crypt: algorítimos de hash como sha1 e md5, e base64 encode/decode

  • Random: geração de senhas (com opções de configuração), CPF e CNPJ, e Lorem Ipsum

  • Converter: conversor de unidades de medida

  • Network: exibe o IP do cliente, geo localização (coordenadas e mapa), e consulta de domínios (whois server)

  • Browser: informações sobre versão, user-agent, resolução e viewport, e as principais funcionalidades do HTML5 e CSS3 que o browser suporta.

  • Javascript: code minifier and optimizer

Como toda a execução é feita no lado do servidor, você pode fazer uma execução ajax do seu site/aplicação para o dev-tools e pegar no response o resultado, sem que haja necessidade de importar novos recursos:

1
2
3
4
5
6
7

GET
>     /ajax/<package>/<method>/?<params>
>     /ajax/crypt/sha1?data=test
>     
>     JSON RESPONSE
>     {"success":true,"data":"a94a8fe5ccb19ba61c4c0873d391e987982fbbd3"}
>

Conforme eu vá sentindo necessidade de mais funcionalidade ou alguém dê uma sugestão, irei incrementando. Depois criarei um projeto no Github e atualizarei o post com o link.

]]> <![CDATA[Android: Futeria App]]> 2012-08-13T13:54:12-03:00 http://rogeriolino.com/2012/08/13/android-futeria-app

Há alguns dias publiquei uma app no Google Play: Futeria, versão móvel do site Futeria.net, agregador de notícias dos principais clubes de futebol do Brasil.

Para o desenvolvimento dessa app foi utilizado HTML5 e jQueryMobile para o frontend, e PHP para o backend. E para agilizar o carregamento das pãginas estã sendo utilizado o Manifest App Cache do HTML5. Já para uma próxima versão estará disponível uma página para salvar configurações do usuário, utilizando LocalStorage.

Então, se você é um usuário Android e gostaria de ler as últimas notícias do seu time, instale o Futeria e dê uma feedback sobre bugs e melhorias que podem ser feitas. E muito obrigado!

]]>