sudo gem install jekyll

Depois é preciso criar um novo repositório no Github para a sua página. No caso da Coderockr criamos

coderockr.github.com

É sempre necessário criar nesse formato: usuario.github.com. Outro exemplo, o teste que estou fazendo com o Octopress: http://eminetto.github.com

Depois de configurar o repositório na minha máquina eu criei a seguinte estrutura de diretórios/arquivos:

coderockr.github.com
    _includes
        andre.html : currículo do @xorna
        destaque_1.html : conteúdo HTML do primeiro projeto em destaque da página
        destaque_2.html : conteúdo HTML do segundo projeto em destaque da página
        destaque_3.html : conteúdo HTML do terceiro projeto em destaque da página
        elton.html : meu currículo
        marcos.html : currículo do @msilvagarcia
        projects.html : template usado para apresentar os projetos da Coderockr
        thiago.html : currículo do @thiagovieiracom
    _layouts
        default.html : layout default das páginas. Nesse caso só mostra o conteúdo delas 
    _posts : vou explicar daqui a pouco
    _site: diretório gerado automaticamente pelo Jekyll com o html final do site
    public :  diretório com os arquivos JS, CSS e imagens, que será copiado para o _site
    _config.yml : arquivo de configurações do Jekyll
    CNAME : necessário para poder usar um domínio diferente de usuario.github.com, nesse caso coderockr.com
    index.html :  página html com tags do sistema de templates usado pelo Jekyll para carregar os posts e includes

Como o Jekyll foi criado para ser um sistema de blogs fizemos uma pequena adaptação no seu uso, considerando cada projeto da Coderockr como um post em um blog, salvando os arquivos na pasta _posts. É necessário que o arquivo seja salvo no formato 2012-05-10-arkpad.html (ano-mes-dia-url)
Os arquivos podem ser criados no formato HTML ou Markdown, bastando renomeá-los para .md e o Jekyll vai fazer o parse e gerar um HTML estático com o conteúdo final.

O Jekyll usa um sistema de templates chamado Liquid bem fácil de usar. Exemplo de trecho do index.html usado para gerar os currículos:

<div class="wrap">
  <ul>
    <li>
      {% include elton.html %}
    </li>
    <li class="last">
      {% include andre.html %}
    </li>
    <li>
      {% include marcos.html %}
    </li>
    <li class="last">
      {% include thiago.html %}
    </li>
  </ul>
</div>

Também é possível usar loops para mostrar os projetos (posts):

<li class="wrap">
    <ul>
      {% for post in site.posts limit:6 offset:0 %}
        {% include projects.html %}   
      {% endfor %}
    </ul>
</li>        

---
title: arkpad
type: iphone
image: /public/images/content/icon-arkpad.png
description: Tudo que existe de melhor no mercado de arquitetura, decoração e design está disponível no arkpad.
gallery:
    - /public/images/content/app-arkpad-1-4.jpg
    - /public/images/content/app-arkpad-2-4.jpg
    - /public/images/content/app-arkpad-3-4.jpg
    - /public/images/content/app-arkpad-4-4.jpg
---
Nele é possível navegar no rico catálogo de produtos (e seus fornecedores) com curadoria do serviço, consultar uma biblioteca visual de ambientes decorados, além de poder organizar suas próprias pastas de projetos com o conteúdo do aplicativo. Tudo sincronizado com o portal, http://arkpad.com.br.
<p class="app"><a href="http://itunes.apple.com/br/app/arkpad/id403784852?mt=8" title="App Store" target="_blank"><img src="/public/images/appstore.png" width="104" height="30" alt="App Store" /></a>

Nas primeiras linhas criamos variáveis (entre os três hífens) e um código html.
No arquivo projects.html podemos usar as variáveis post.title, post.type, e o post.content que é o conteúdo HTML do post.

Para que o site responda pelo domínio oficial (coderockr.com) é preciso criar o arquivo CNAME com o nome do domínio e modificar o DNS para o endereço IP do Github.

As vantagens de usar essa abordagem foram várias, como:
- facilidade de teste. Nas máquinas locais basta executar jekkyl –server –auto e acessar o endereço http://localhost:4000 para verificar o resultado gerado
- velocidade. As páginas agora são estáticas, não dependendo mais de bancos de dados, o que aumenta bastante a performance e facilita o uso de cache
- facilidade de alteração. Basta fazer um clone do repositório, alterar o necessário, fazer o commit e o push para que o Github execute o Jekyll e gere novamente as páginas estáticas
- hospedagem gratuíta. O Github não cobra extra pela hospedagem das páginas

É nosso primeiro teste com essa ferramenta, mas estou gostando bastante do resultado e pretendo usar em mais projetos da Coderockr e provavelmente como plataforma de blog para esse site.

Foi uma experiência muito legal, principalmente pelas contribuições da professora Elenice Bueno, que complementou os meus tópicos com excelentes explicações da área jurídica, que era o foco principal do curso que ela estava ministrando. Os alunos também fizeram comentários e deram mais alguns exemplos interessantes. 

O material da palestra está nesse link. Por ser uma apresentação feita no aplicativo Prezi não é possível fazer o download do material pelo site, mas se alguém tiver interesse é só entrar em contato que eu tento exportar para algum formato.

Espero poder contribuir com mais alguns posts, pois tenho trabalhado bastante com Javascript, e me divertindo bastante

Lidere ou crie um grupo de usuários

Posso citar vários amigos da comunidade PHP que trabalharam em grupos de usuários (PHP-SP, PHP-SC, PHP-MS, PHP-Maranhão, etc) e hoje encontram-se em empregos ótimos, e muito respeitados nas suas áreas. É algo que vai ocupar um pouco do seu tempo livre, mas que tem muita recompensa.

Crie ou contribua com um projeto open-soure popular

Também muito importante, pois é uma chance de você mostrar a várias pessoas o seu código, a sua forma de trabalhar.
Alguns exemplos: Doctrine e o grande Guilherme Blanco, Respect e o seu criador Alexandre Gaigalas.

Escreva um blog

Esse blog começou como um site onde eu anotava as coisas que eu ia aprendendo, para poder usar mais tarde caso necessário, e acabou gerando muitos amigos e algumas boas propostas de emprego/projetos. A minha regra é: se eu demorei mais de 30 min para resolver ou aprender algo, no mínimo posso salvar 30 min do tempo de alguém, então isso acaba virando um post.

Publique um livro

Publicar um livro nos dias de hoje é algo um pouco mais fácil do que a alguns anos atrás, graças a popularização dos e-books e seus formatos. Você pode também aproveitar as lojas e serviços como Amazon, iBooks, ou colocar a venda (ou de graça) no seu próprio site, como eu fiz com o Zend Framework na Prática.

Você também pode optar por um livro impresso e entrar em contato com as editoras, que estão sempre em busca de novos autores e títulos. Eu trabalhei com a Editora Novatec e tive uma boa experiência.

Se você me perguntar se vale a pena eu vou responder que financeiramente não é algo que vá te deixar rico, mas vai te trazer reconhecimento, satisfação e alguns ótimos amigos

Palestre em conferências

Existem várias conferências onde você pode mostrar seu conhecimento e aparecer para o mercado. Eu recomendo começar por eventos menores, do seu grupo de usuários, da sua empresa, da sua universidade, para conseguir mais confiança perante ao público e depois partir para as conferências maiores como PHPConf, FISL e até as internacionais (uma ambição que eu ainda tenho hehe). Aqueles velhos medos como “e se as pessoas da platéia souberem mais do que eu?”, “e se me perguntarem algo que eu não sei” são infundados, pois todos sabem que ninguém é “dono da verdade”. Todas as minhas experiências palestrando foram muito recompensadoras, desde apresentar para 5 pessoas até 2 auditórios cheios de gente, no FISL 2009.

Como o próprio autor do post comenta, essas são apenas algumas dicas, existem diversas outras formas de se fazer isso, mas já é um bom começo com um bom retorno.

curl install.meteor.com | /bin/sh

Para criar um novo projeto é só executar os comandos:

meteor create myapp

O Meteor possui um servidor para podermos fazer o teste da aplicação. Para executá-lo é só:

cd myapp
meteor

E para acessar no navegador é só usar a url http://localhost:3000

Um projeto do Meteor é composto de três arquivos: um css, um html e um JavaScript. Pode ser estruturado de outra forma, mas esse é o exemplo mais comum. Dentro do JavaScript podemos definir a lógica que será executada no cliente (e que será enviada para o navegador do usuário) e a porção que será executada no servidor (no Nodejs).

Para testar o framework eu criei um pequeno projeto, de cadastro de contatos. Para rodar o meu exemplo é só executar (depois de ter instalado o Meteor):

git clone git@github.com:eminetto/MeteorContactListSample.git
cd MeteorContactListSample/
meteor

No arquivo ContactList.html é definido o visual do aplicativo, usando o sistema de templates usado pelo Meteor. No trecho abaixo definimos dois templates (add_contact e contacts) e fazemos a inclusão dos dois, dentro da tag body:

<head>
  <title>ContactList</title>
</head>

<body>
  {{> add_contact}}

  {{> contacts}}


</body>

<template name="add_contact">
  <h3>{{action}} contact</h3>
  <div id="new-contact">
    <input type="hidden" id="id" name="id">
    Name: <input type="text" name="name" id="name"><br>
    E-mail: <input type="text" name="email" id="email"><br>
    <input type="button" id="actionButton" value="{{action}}">
  </div>
</template>

<template name="contacts">
  <h3>Contacts</h3>
  <div id="contacts">
    {{#each contact_list}}
      <div class="contact">
        {{name}} - {{email}} 
        <input type="button" class="edit" id="{{_id}}" value="edit">
        <input type="button" class="del" id="{{_id}}" value="del">
        <br>
      </div>
    {{/each}}
  </div>
</template>

O que está dentro de {{ e }} são variáveis que serão substituídas pelo sistema de templates. A instrução each é usada como um for e mostrará todos os contatos existentes.

No arquivo ContactList.js está a lógica do aplicativo. E aí entra algo muito interessante: as Collections. São interfaces para o banco de dados MongoDB que é usado pelo framework. Na documentação é citado que pode ser extendido para usar com outros bancos de dados, mas não cheguei a testar isso. Quando a aplicação é executada é criado um banco de dados MongoDB e os dados são inseridos nele. Uma das coisas mais legais do Meteor é que ele gera uma cópia do banco de dados no lado do cliente, assim o mesmo comando usado pelo servidor é usado pelo cliente. E os dados são sincronizados, o que significa que no momento que um cliente modifica o banco de dados essa mudança é replicada automaticamente para o servidor, que manda a alteração para todos os clientes. Magia negra! Você tem um sistema sincronizado entre diversos clientes, sem precisar se preocupar com isso, o que é realmente uma vantagem.
O código do ContactList.js:

Contacts = new Meteor.Collection("contacts");

if (Meteor.is_client) {
  
  Session.set('action','add');
  
  Template.add_contact.action = function () {
    var action = Session.get("action") || "add";  
    return action;
  };

  Template.add_contact.events = {
    'click input#actionButton' : function (evt) {
      var $action = Session.get('action'),
          $name = $("#name").val(),
          $email = $("#email").val();

      console.log($action);
      if ($action == 'add') {
        Contacts.insert({
          name:  $name,
          email: $email 
        });
        alert('contact ' + $name +  ' added');
      }
      else {
        Contacts.update($("#id").val(), {$set: {name: $name, email: $email}});
        $("#id").val('');
        Session.set('action', 'add');
        alert('contact ' + $name +  ' modified');
      }
      $("#name").val('');
      $("#email").val('');
    }
  };

  Template.contacts.contact_list = function () {
    return Contacts.find({}, {sort: {name: 1}});
  };

  Template.contacts.events = {
    'click input.del' : function (evt) {
      var $contact = $(evt.target),
          $id = $contact.attr('id');
      Contacts.remove($id);
    },
    'click input.edit' : function (evt) {
      var $contact = $(evt.target),
          $id = $contact.attr('id');
      contact = Contacts.findOne($id);

      $("#id").val(contact._id);
      $("#name").val(contact.name);
      $("#email").val(contact.email);
      $("#name").focus();

      Session.set('action', 'edit');
    },
  };

}

if (Meteor.is_server) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

No código é possível ver os comandos is_client e is_server que dividem o código do cliente e servidor (eles podem ser separados em arquivos diferentes também). Também é possível ver o sistema de eventos (Template.contacts.events) e o retorno do banco de dados sendo enviado ao template (return Contacts.find({}, {sort: {name: 1}});)

No site do Meteor existem alguns exemplos mais complexos que ajudam a entender os detalhes mais avançados.
Apesar de ser uma ferramenta nova (versão 0.3.3 no momento da escrita deste post) eu fiquei surpreso com as possibilidades que ela fornece. Não cheguei a testar em uma aplicação mais complexa ou com maior carga, mas é uma tecnologia que vou prestar muita atenção na sua evolução, pois vejo várias utilidades para ela.

Um dos exemplos é o uFun. Basicamente, a arquitetura da aplicação é:

Essa é a típica aplicação que se beneficia desse tipo de arquitetura, pois temos várias interfaces acessando os mesmos dados e lógica. Os dados trafegam na forma de JSON via protocolo HTTP. Muito fácil de trabalhar em todas as plataformas e linguagens usadas no projeto (Objective C, Java, PHP e JavaScript).

Outro assunto que me interessa muito é o de frameworks. Ultimamente tenho estudado bastante os novos micro-frameworks de PHP. A parte server do uFun foi desenvolvida pelo @xorna em Slim Framework, que comentei em outro post.  Além do Slim Framework outro framework que me pareceu interessante foi o Silex, principalmente por ser baseado em componentes do Symfony. 

Como eu tenho uma teoria de que só aprendemos alguma tecnologia quando precisamos desenvolver algo com ela eu me fiz um desafio: criar um aplicativo em Silex para facilitar a criação de serviços Rest e RPC. O resultado está no Github da Coderockr: https://github.com/Coderockr/SOA-Server

Além do Silex eu usei alguns componentes que eu achei importantes:

• DMS/Filter do meu amigo Rafael Dohms para fazer o filtro dos dados usando annotations
• Doctrine para fazer o ORM das entidades
• Symfony ClassLoader  para facilitar o carregamento dos outros componentes
• Symfony Validator para fazer a validação das entidades

No README do projeto tem mais informações sobre como fazer o download e instalação. Quanto ao funcionamento:

Toda a lógica do projeto está no arquivo index.php. Essa é uma das vantagens do Silex, por ser um micro-framework. Tudo é muito simples, principalmente a criação de rotas, validações. O index.php faz o papel de bootstrap da aplicação e possui as rotas para os métodos Rest (GET, PUT, POST e DELETE) e RPC.

Para que uma entidade esteja disponível via Rest basta que seja criada uma classe no namespace model que extends model\Entity, como no exemplo. Ela é uma entidade Doctrine, então temos todas as facilidades desse excelente framework. Além disso podemos adicionar as anotações para o DMS/Filter (por exemplo o @Filter\StripTags) e as configurações para o Symfony Validator (método loadValidatorMetadata)

Para que uma classe seja acessível via RPC ela precisa ser criada no namespace procedure e estender procedure\Procedure. Como Procedure é uma classe abstrata a nova classe precisa definir o método execute e retornar sempre um array com o resultado, conforme o exemplo.

Para termos um pouco de segurança foi implementado um controle de acesso, usando-se um header HTTP, o Authorization, que é validado baseado no arquivo configs/clients.php.

Também escrevi um exemplo de como seria fácil acessar via jQuery os serviços. O mesmo pode ser facilmente feito via PHP e outras linguagens usando Curl e outras bibliotecas.

Conclusões

Me diverti bastante escrevendo e testando esses componentes. Além da diversão, acabei criando algo que pretendo usar nos próximos projetos da Coderockr. Então esse desafio cumpriu seus objetivos: aprendi algo novo (Silex nesse caso) e consegui criar algo útil. Se for útil para alguém mais só aumenta a minha recompensa

Se alguém quiser contribuir com códigos é só usar a metodologia pull-request do Github e sugerir melhorias e correções.

- Zend_Mail
- Zend_Cache
- Zend_Db
- Zend_Config
- Zend_Date
- Zend_Log

Entre outros.
Um exemplo bem simples, usando o Zend_Cache:

<?php
//include do zend framework
$includePath  = get_include_path();
//o : é o separador de diretórios no Unix. No Windows seria ;
$includePath .= ':/var/www/html/library/';
set_include_path($includePath);

//inicia o autoloader, responsável por incluir os arquivos dos componentes
require_once 'Zend/Loader/Autoloader.php';
$autoloader = Zend_Loader_Autoloader::getInstance();
$autoloader->setFallbackAutoloader(true);

$frontendOptions = array(
    'lifetime' => 7200, // tempo de vida
    'automatic_serialization' => true
);
$backendOptions = array('cache_dir' => '/tmp');
// criando uma instancia do cache
$cache = Zend_Cache::factory('Core',//frontend
    'File',  //backend
    $frontendOptions,
    $backendOptions
);

if(!$result = $cache->load('cachePosts')) {
      //aqui podemos usar o Zend_Db, por exemplo
      $result = 'aqui vai o processamento, como buscar os dados do banco';
      $cache->save($result, 'cachePosts');
}
echo $result;