segunda-feira, 5 de setembro de 2011

Internacionalização com zend framework

As fronteiras da minha linguagem são as fronteiras do meu universo - Ludwig Wittegenstein


Para a tecnologia não existem fronteiras... Isso é o que dizem não é? Mas como realmente ligamos outras culturas? Como pode ser tão simples essa nossa comunicação com o mundo? Opa, olha ai a palavra... COMUNICAÇÃO


A comunicação humana é um processo que envolve a troca de informações, e utiliza os sistemas simbólicos como suporte para este fim. Estão envolvidos neste processo uma infinidade de maneiras de se comunicar: duas pessoas tendo uma conversa face-a-face, ou através de gestos com as mãos, mensagens enviadas utilizando a rede global de telecomunicações, a fala, a escrita que permitem interagir com as outras pessoas e efetuar algum tipo de troca informacional.



Ai está e o nosso mundo se desenvolve quando tornamos essa comunicação acessível, quando tornamos essa comunicação INTERNACIONAL, e é por isso que precisamos criar aplicações que 'sejam poliglotas' e o ZEND FRAMEWORK esta pronto para esse mundo.

A internacionalização do ZF é muito maior do que meu simples artigo mas a idéia aqui é entender como efetuar essa tradução e por isso não vou falar sobre localizar o idioma do usuário(isso fica para outro post) pois vou mostrar como efetivar a tradução.



Zend_Translate

O Zend_Translate manipula diversos adaptadores para tradução, os adaptadores são exatamente a forma como vamos trabalhar com a tradução os disponíveis são:
Array, Tbx, Xliff, Csv, Tmx , XmlTm, Gettext, Qt entre outros...





Exemplo de utilização de um adaptador:

  1. $translate = new Zend_Translate(
  2.     array(
  3.         'adapter' => 'gettext',
  4.         'content' => '/meu/diretorio/source-de.mo',
  5.         'locale'  => 'de'
  6.     )
  7. );
  8. $translate->addTranslation(
  9.     array(
  10.         'content' => '/pasta/da/tradu/fr-source.mo',
  11.         'locale'  => 'fr'
  12.     )
  13. );
  14. print $translate->_("Exemplo") . "\n";
  15. print "=======\n";
  16. print $translate->_("Traduzido em de") . "\n";
  17. print "\n";
  18. $translate->setLocale('fr');
  19. print $translate->_("Agora em fr") . "\n";
Esse é um exemplo da própria documentação do ZF utilizando gettext mas agora vamos montar um básico utilizando array que tal?


No projeto que ando trabalhando utilizo array pois os formulários são criados dinamicamente, sendo assim os dados são de acordo com os campos do banco de dados exemplo (usu_nome é o campo nome da tabela usuario) e assim ficaria na tela mas utilizando a internacionalização facilitamos a geração dinâmica de formulários e ainda colocamos os nomes de forma correta com classe de maneira que traduzo os prefixos para uma forma legível e em diversas linguas, veja um exemplo simples da utilização (vou colocar tudo no mesmo diretório.





Exemplo simples:
  1. public function internacionalAction()
  2. {
  3. $pt = array(
  4. 'hi' => 'oi',
  5. 'need'  => 'preciso',
  6. 'my'  => 'meu',
  7. 'friend'  => 'amigo',
  8. );
  9. $tradutor = new Zend_Translate('array',$pt);

  10. $palavra = "need";
  11. echo $tradutor->_($palavra);
  12. exit;
  13. }


Nesse exemplo eu criei o $tradutor passando para ele o adaptador do tipo array e o próprio array ($pt) assim exibi simplesmente na tela do dado que percorreu até o indice e fez a conversão...


Como eu já disse o conceito de internacionalização do ZF é muito completo e não algo 'engessado' como mostrei mas o conceito de uso é esse. vcs percebem ainda que escrevi tudo em um action e dei um exit no final isso foi justamente para eu poder ver a tradução saindo na tela sem precisar ir para a view.


Encontrei um Blog de um cara muito experiênte em ZF chamado Marcos Borges e caso você queira algo avançado sobe o ZT veja aqui.


Nos próximos POSTs continuo com coisas sobre ZF













terça-feira, 30 de agosto de 2011

Namespaces no PHP

A partir do PHP 5.3 foi efetivado o uso de namespaces. Mais qual o sentido dos namespaces?
Quando nosso código cresce ficamos a merce de uma repetição de nomes e isso pode levar nosso sistema maior a um grande problema com conflitos ou até um funcionamento totalmente irregular e fóra da camada de negócio.


Uma boa prática de desenvolvimento é utilizar prefixos por exemplo "user_login" mas com os namespaces ganhamos uma opção muito melhor!


Os namespaces permitem o desenvolvedor manusear nomes num escopo sem usar nomes grandes cada vez que a classe for referenciada, e resolver o problema de espaço global compartilhado sem fazer um código ilegível.
php.net





Um exemplo bem genérico, você tem 2 arquivos (pv.php e pronto.php) com funções que tem o mesmo nome (HELLO) elas tem diferenças entre elas poi a pv.php da um hello em português e a pronto.php da um hello em inglês como faço para distinguir as duas? 


NAMESPACES eu escolho você 



Adicionamos o namespaces nos arquivos olha o pv.php:
  1. namespace pv {
  2.     function hello($nome) {
  3.          return 'oi '.$nome;
  4.                }
  5.     }
E quando eu precisar chamar esse Hello eu faço assim:


  1. include('pv.php');

  2. include('pronto.php');
  3.        
  4.            echo pv\hello('Paulo Victor');
  5.     

Aqui estou passando meu nome no hello do pv então é simples:

namespace\metodo



Claro que esse exemplo foi TOTALMENTE genérico mas a idéia é de que se você cria uma classe sua e chama outra classe pronta talvez fique confuso ou dê conflito entre elas e melhor que usar prefixo é utilizar as possibilidades do PHP.




Espero ter ajudado.
@pv_fusion

quinta-feira, 25 de agosto de 2011

Validando campos com HTML5

Olá meus amigos tudo bem? Ando sempre na correria mas mesmo assim me viro para colocar algo interessante aqui no meu Blog...
Hoje já que tenho pouco tempo vou ensinar uma coisa simples mas MUITO útil que é a validação de campos com HTML5.


Deus obrigado por permitir a criação do HTML5 -> brisa


Uma coisa que sempre fazemos no desenvolvimento para WEB é validar formulários e já que  o HTML não faz isso nativamente somos obrigados a utilizar Javascript. Mas felizmente pensaram nisso e o HTML5 não passa mais por esse problema agora temos tipos de campos nos inputs mais apropriados, por exemplo: 
  • Tel -> Para telefone (sem formatação por não existir padrão)
  • Number -> Tipos númericos
  • Search-> Para pesquisas
  • email -> Para e-mails
  • url -> Links url


E a forma de monta-los é intuitiva com exceção certos casos por exemplo o número:
<input name="numero" type="number" step="1" min="1" max="10">

Nesse input acima do tipo numerico ele só aceita de 0 a 10 e passa de 1 em 1 

E já que o HTML5 vem com todas essas opções existe o required para colocar nos inputs isso significa que o campo é obrigatório por exemplo:<input name="nome" type="text" required>
Pronto, sem utilizar javascript já dizemos que o campo é obrigatório, para tornar isso mais legal que tal colocar um texto no input? Mas aquele texto informativo apenas, esse é o PLACEHOLDER e coloca-lo também é simples olha:

 
<input name="nome" type="text" placeholder="Digite seu nome" required>

Como diz um amigo meu: "Agora a vida faz sentido..."

rsrsrs

Espero ter ajudado nessa explicação relâmpago.

Obrigado!





domingo, 21 de agosto de 2011

Scrum metodologia ágil de desenvolvimento

Olá meus amigos e amigas tudo bem? Hoje vou falar sobre algo que poucos conhecem mas é de tremenda importância no desenvolvimento de sistemas, hoje vou falar do SCRUM

Afinal o que é esse tal de SCRUM que tanto análista desenvolvedor fica se gabando? E porque essas pessoas do Rugby ai na imagem?
A resposta para isso é simples; Scrum é uma metodologia ágil para gerência em desenvolvimento de software, permite manter o foco na entrega do maior valor de negócio, no menor tempo possível.

Com o tempo notaram que projetos usando equipes pequenas e multidisciplinares (cross-functional) produziram melhores resultados, e associaram estas equipes altamente eficazes à formação Scrum do Rugby (utilizada para reinício do jogo em certos casos) por isso a foto do 
Rugby.

Como podemos perceber nessa introdução o grande objetivo do SCRUM é agilidade no desenvolvimento CORRETO de projetos de software e para que isso fique mais claro vamos mostrar aspectos funcionais do SCRUM.

O SCRUM é baseado em ciclos de 30 dias chamados Sprints, onde se trabalha para alcançar objetivos bem definidos. Estes objetivos são representados no Product Backlog, uma lista de coisas para fazer que é constantemente atualizada e repriorizada.


Os papéis do SCRUM

Equipe: A equipe é responsável por entregar soluções, geralmente é formada por um grupo pequeno (de 5 a 9 pessoas) e que trabalha de forma auto-gerenciada ou seja, eles mesmo se gerenciam.

Product Owner: Responsável pela visão de negócios do projeto, é ele quem define e prioriza o Product Backlog.


Scrum Master: Uma mistura de gerente, facilitador e mediador. Seu papel é remover obstáculos da equipe e assegurar que as práticas de SCRUM estão sendo executadas com eficiência. Em outras palavras é ele que faz o 'meio de campo' entre programadores e gerentes, programadores e clientes... programadores e o MUNDO rsrs...


Funcionamento do SCRUM

Imagem ilustrativa do SCRUM

Definição do Backlog: todas as funcionalidades ou mudanças no produto são definidas pelo Product Owner no Product Backlog
Esta lista é priorizada para refletir a necessidade dos clientes ou demandas do mercado. 
Os itens do topo da lista são destacados para serem entregues no final do próximo Sprint.

Andamento do Sprint: durante o Sprint, os itens do Product Backlog que devem ser entregues são agora tratados no Sprint Backlog. As tarefas agora são responsabilidade da Equipe, que tem autonomia para decidir como elas devem ser executadas, ou seja o programador/desenvolvedor agora é o deus seguido da decisão.

Reuniões Diárias: o Scrum Master se reune diariamente com a Equipe num mesmo horário, para que se reporte:
O que foi feito ontem?
O que se pretende fazer hoje?
Quais são os impedimentos que estão atrapalhando a execução das tarefas?

Revisões: no final do Sprint a Equipe demonstra os resultados para o Product Owner e demais interessados, de forma que os itens do Backlog sejam considerados prontos e então possa se iniciar um novo Sprint.


Ou seja o SCRUM garante um giro rápido uma vez que não existe pressão mas sim um 'fatiamento' de necessidades e prioridades.


E ai gostou? Quer passar a implementar em sua empresa? Projeto?
Quer conhecer mais? Clique aqui para ver um pouco mais sobre SCRUM (um pdf completo).





Espero que eu tenha ajudado. 


PS: A escolha dos papéis variam da equipe, não existe CHEFE no SCRUM mas sim um grupo unido.









Site com HTML5,css e jquery - aula 3

Olá meus amigos tudo bem? Hoje vou dar continuidade ao site com HTML5, Css e Jquery.


Nas aulas passadas eu dei uma explicação rápida sobre algumas mudanças do xhtml para o HTML5 que são importantes para fazer uma migração a nova tecnologia. Isso não significa necessariamente que o HTML5 seja apenas aqueles detalhes pois ele é muito maior que isso como o DND, trabalhar com sessões e etc...
Isso eu vou explicando com o tempo pois o motivo dessa aula é montar um site simples mas já utilizando novas tecnologias.

Na aula passada eu montei uma estrutura de conteúdo para nosso site e nessa aula vamos finalmente começar a dar vida a ele. Mãos a OBRA...



Antes nosso css estava assim (para o body):

body{
background-color:#2F4F4F;
}
Vamos deixar ele com uma imagem de fundo então vai ficar assim:
body{
background-image:url('fundo.png');
background-repeat:repeat-x;
}


Explicação rápida:background-image estamos chamando a imagem de fundo, e no repeat estamos dizendo como será a repetição nesse caso repete apenas no eixo x (matemática se lembra?)


Só um detalhe, vc sabe pq matemática tem acento no má? Pois ele é proparoxitona e toda proparoxitona tem acento... Oo






Ok isso é um teste de paciência e atenção hehe...

Voltando ao css perceba que chamos uma imagem de fundo com o nome "fundo.png" no meu caso é um filete que no fim vai fazer muita diferença, vou colocar ele aqui para vc copiar:
Coloquei ele várias vezes assim vc não se perde... De uma olhada no seu site e sinta a diferença.
Agora vamos para o html editar nosso código

No corpo mudamos para:




<!DOCTYPE HTML> 
 <html lang="pt-br"> 
  <head> 
   <meta charset="UTF-8"> 
   <link rel="stylesheet" type="text/css" href="estilo.css"> 
  <title>CRIANDO UM SITE EM HTML5 COM PV</title> 
 </head> 
<body>
<div class="estrutura">
<header class="topo">  
 <img src="logo.png"></img>
 <b>SITE COM HTML5</b>
 <div class="menu">
<a href="">PRINCIPAL</a> |
<a href="">SOBRE</a> |
<a href="">SITE</a> |
<a href="">CONTATO</a> |
<a href="">AULAS</a> |  
 </div>
</header>  
CONTEUDO DO MEU SITE  
<footer>  
 RODAPE 2011 
</footer>
</div>
</body> 
</html>



 


e o CSS pegamos o menu alteramos e adicionamos ações:
.menu{
height:50px;
text-align:center;
font-size:22px;
}


.menu a{
text-decoration:none;
color:#000;
}


.menu a:hover{
text-decoration:none;
color:#F23;
}




Esqueci de dizer que adicionei uma imagem no topo inserindo a classe topo nele

O site começa a ficar com cara, caso tenha interesse em saber como anda ficando faça o download aqui

Por hoje é só, vai dar trabalho explicar tudo mas vamos com calma que chegamos la.












sexta-feira, 19 de agosto de 2011

Conhecendo o PostgreSQL

Olá amigos tudo bem? Estou meio sem tempo então estou colocando um artigo referente a postgreSQL o conceito é simples mas os comandos básicos aqui são mostrados no linux.

O PostgreSQL é um banco de dados totalmente grátis e é encontrado no endereço:
http://www.postgresql.org



Os comandos do PostgreSQL são parecidos com os comandos do MySQL, só há algumas pequenas diferenças. Caso surja alguma dúvida ao ler este artigo: visite a documentação (ajuda) do PostgreSQL no site oficial.

Com o PostgreSQL já instalado em sua máquina, para acessá-lo digite o comando:

$ psql 

Aparecerá a seguinte mensagem de 'bem-vindo':
Welcome to psql 7.4.2, the PostgreSQL interactive terminal.

Type:
 \copyright for distribution terms
       \h for help with SQL commands
       \? for help on internal slash commands
       \g or terminate with semicolon to execute query
       \q to quit
Precisando de uma ajudazinha é só digitar: \h

Desta forma, aparecerá uma listagem dos comandos do PostgreSQL. Caso você queira ter mais detalhes sobre o comando 'CREATE DATABASE' digite:

\h CREATE DATABASE 

OBS.: Não digite '\h CREATE DATABASE;' (com ponto-e-vírgula ; no final) pois assim aparecerá uma mensagem de erro.

Post original de laudelino7  (VIVA O LINUX)

segunda-feira, 8 de agosto de 2011

Site com HTML5,css e jquery - aula 2

Depois de alguns dias (muitos dias) continuo com meu pequeno artigo sobre HTML5, CSS e Jquery agora na nossa aula 2.

Antes nós criamos uma estrutura básica em HTML5 e expliquei um pouco sobre as novas tags e algumas alterações... Hoje vamos integrar o css em nosso site e torna-lo visualmente agradável.



Vou colocar o código da nossa estrutura feita anteriormente:


<!DOCTYPE HTML>
<html lang
="pt-br">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="estilo.css">
<title>CRIANDO UM SITE EM HTML5 COM PV</title>
</head>
<body>
<header>
CABECALHO... AINDA VAMOS TRABALHAR AQUI

</header>
CONTEUDO DO MEU SITE
<footer>
RODAPE 2011
</footer>
</body>
</html>



Certo agora vamos montar um layout bem simples utilizando nossos poderes especiais imaginando e desenhando uma estrutura para o site, eu imaginei essa:


Vou explicar um pouco sobre minha estrutura mas sem detalhes ok?
Topo: O topo do site, no tudo que vai naquela tag HEADER
Menu: Basicamente o menu de navegação do site
Login: Painel para entrar com usuario e senha
Destaques: Estou pensando em algo rotativo com novidades
Social: Algo da nova mania social "Twitter, Facebook..."
Artigos: Artigos relacionado ao site
Imagens: Imagens rotativas do portal
Rodapé: O famoso rodapé

Legal agora eu expliquei o desenho do meu site. Logicamente antes de fazer o desenho você precisa analisar qual o segmento do site, nosso caso é um site de aula então fiz um layout padrão.

Perceba que em nosso HTML acima fizemos uma chamada CSS para um arquivo com o nome ESTILO.CSS localizado no mesmo diretório de nosso arquivo HTML   <link rel="stylesheet" type="text/css" href="estilo.css">

Sendo assim crie um arquivo com o nome estilo.css e vamos começar a ESTRUTURAR...



CODIGO estilo.css

/* CRIADO POR PV */
body{
background-color:#2F4F4F;
}

.estrutura{
margin:0 auto;
width:750px;
}


.topo{
height:200px;
background-color:#483D8B;
}

.menu{
height:50px;
background-color:#008B8B;
}

.esquerda{
width: 150px;
float:left;
background-color:#f00;
}

.direita{
width: 600px;
float:left;
background-color:#fff;
}


.rodape{
background-color:#fff;
}

/* GLOBAIS */

.limpa{
clear:both;
}



Como já era de se esperar eu tive que criar um css 'grande' por não estar utilizando um FRAMEWORK para isso (como o BLUEPRINT ou o 52FRAMEWORK) mas estamos aqui para aprender então é interessante eu explicar basicamente o css aqui... Veja bem, eu primeiro fiz o desenho do layout e depois eu 'escrevi ele'... Busquei a tag BODY e apliquei a regra de cor no fundo, e depois criei as classes para o layout por padrão criei a esquerda e direita para não criar classes iguais 2 vezes. E adicionando as classes ao html fica assim:



CODIGO:

< ! DOCTYPE HTML >
< html lang="pt-br" >
 < head >
< meta charset="UTF-8" >
< l ink rel="stylesheet" type="text/css" href="estilo.css" >
< script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js " type="text/javascript">< / scrip t >
< title >CRIANDO UM SITE EM HTML5 COM PV
 
< body >
< div class="estrutura">
  < header class="topo">
CABECALHO... AINDA VAMOS TRABALHAR AQUI
  < / header>
  < div class="menu">
MENU
  < / div>
< div class="esquerda"> LOGIN < / div>
< div class="direita"> Destaques < / div>
< div class="limpa">

< div class="esquerda"> SOCIAL  < / div>
< div class="direita"> ARTIGOS < / div>
< div class="limpa">
< / div>


  < footer class="rodape">
RODAPE 2011
  < / footer >
  < / div >
  
< / body>
< / html>





Aproveito para mostrar que fizemos uma chamada ao jquery do google (que vamos utilizar na próxima aula) teste seu layout e vc vai ver o quanto ele ficou FEIO... mas ja apareceu a estrutura que queremos...

Na próxima aula nós terminamos a estrutura e começamos com JQUERY.

Valeu.