felipeNascimento.org(true); » Learned Stuff / Tips http://felipenascimento.org Making the web a better place to live Tue, 31 Aug 2010 14:31:53 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 PHPSCConf http://felipenascimento.org/en/phpscconf/ http://felipenascimento.org/en/phpscconf/#comments Tue, 31 Aug 2010 14:20:40 +0000 Felipe Nascimento http://felipenascimento.org/?p=293 O evento, ocorrido em Joinvile (http://phpsc.com.br/), nos dias 27 e 28 deste mês foi ótimo. Os organizadores mostram cada ano mais maturidade, as palestras conseguiram ser tanto focadas na parte mais técnica quanto focadas no mercado, metodologias, etc. A platéia também parecia bem interessada, apesar de terem ficado bastante distribuídos entre demais cursos que aconteciam durante o evento.
É a comunidade PHP mostrando o poder que tem no Brasil e na reagião Sul.

A palestra sobre o theWebMind foi bem divertida e positiva, vários demonstraram interesse e acredito que conseguiremos atingir mais pessoal capacitado e interessado em colaborar, o que é sempre muito importante para o projeto.

Parabéns aos envolvidos e palestrantes. Obrigado a todos e até o ano que vem!

Slides da palestra: http://tinyurl.com/259zbre

]]> http://felipenascimento.org/en/phpscconf/feed/ 0 Bug on IE when creating elements with name (submitName) http://felipenascimento.org/en/bug-on-ie-when-creating-elements-with-name-submitname/ http://felipenascimento.org/en/bug-on-ie-when-creating-elements-with-name-submitname/#comments Fri, 20 Aug 2010 04:40:48 +0000 Felipe Nascimento http://felipenascimento.org/?p=291 Hi, yesterday I had to fight against this problem, which is not very touched out there.
In the beginning, people from jQuery thought it was a jQuery bug, but searching a bit more I could find out the root of this problem.

What is it?
When running your javascript in Internet Explorer 6, or 7 or 8 in compatible mode, if you create dynamically an iframe, for example, and set it a name attribute, Internet Explorer will reaplace it by an submitName attribute. This attribute cannot be found with .getAttribute(’submitName’), but that is the problem, neither can be with .getAttribute(’name’)!

How to see it happening? Try this:

var ifr= document.createElement('iframe');
ifr.setAttribute('name', 'iFrameOne');
document.body.appendChild(ifr);
alert(ifr.getAttribute('name'));
// you can also see it through the "developer tool" in the IE tools menu

The main problem is that … when you have something like a link or a form targeting this iframe, you loose it! The same happens with inputs with name, which are dynamically created.

How to fix it without ask your users to migrate to a real browser? I did this and it worked:

var ifrDiv= document.createElement('div');
ifrDiv.innerHTML= "<iframe name='iFrameOne' ></iframe>";
document.body.appendChild(ifrDiv);

Now, why does it happen?!
I had the chance to search for this and found in the Microsoft’s webpage something about this old, known bug in Internet Explorer, with names on dynamic elements. Due to “fix” this, instead of fixing, then “provided” this workarounded attribute. When you try to deal with the name attribute, it applies like an alias, redirecting it to the Microsoft’s Internet Explorer imaginary submitName attribute. But with this, you cant access a form that has a name, like this:

document.forms['dynamicFormName'];

because the DOM hasn’t rendered that form with the name you asked for.

I hope it can help you, if you get stuck with this some day.

]]> http://felipenascimento.org/en/bug-on-ie-when-creating-elements-with-name-submitname/feed/ 0 Three ways to reload or move the page http://felipenascimento.org/en/three-ways-to-reload-or-move-the-page/ http://felipenascimento.org/en/three-ways-to-reload-or-move-the-page/#comments Fri, 20 Aug 2010 02:46:34 +0000 Felipe Nascimento http://felipenascimento.org/?p=286 Hi there.
Well, this is a question I see a lot of people doing! Then, I decided to post about it.
We have got, in Javascript, when dealing with the DOM API, the history element, with which we can move forward or backward trough the navigation historic, plus specify with the method go page or step we want to go, by informing the < 0 value to past, or > 0 to the possible forward pages. So, we can do this, too:


history.go(0);

This will simply reload the page. Of course you can use it with iframes, using the parent, top, self or name to work with their relation.
Other alternative is using the reload method provided by the location, just like this:


self.location.reload();

Now, a different alternative, and also a way to move from one page to another, is using the href property, also from location.


self.location.href= self.location.href;

This code will reload the same page, but could be any other address to be loaded.

]]> http://felipenascimento.org/en/three-ways-to-reload-or-move-the-page/feed/ 0 Add an animated bird to announce your tweets http://felipenascimento.org/en/add-an-animated-bird-to-announce-your-tweets/ http://felipenascimento.org/en/add-an-animated-bird-to-announce-your-tweets/#comments Tue, 03 Aug 2010 05:35:52 +0000 Felipe Nascimento http://felipenascimento.org/?p=280 Add an animated bird to announce your tweets, in your webpage or blog.
With Tweety (maybe a temporary name), you can specify your twitter account and then get back a small script to put this animation into your website. Only have to copy and paste it wherever you want. It will random one of your 4 last posts on twitter and show it for 1 minute, randomising it again, then.
In my home page there is an example of it working. Though, you can see here, it working again:

If you have ideas to have it better, or found any bug, or if you can draw a better bird, talk to me ;)

]]> http://felipenascimento.org/en/add-an-animated-bird-to-announce-your-tweets/feed/ 0 Testing Firefox 4 Beta 1 http://felipenascimento.org/en/testing-firefox-4-beta-1/ http://felipenascimento.org/en/testing-firefox-4-beta-1/#comments Sat, 10 Jul 2010 00:38:21 +0000 Felipe Nascimento http://felipenascimento.org/?p=273 Well, Firefox 4b1 has just been lauched and we had the chance to test it and use it for quite a while.
The first thing I did was to test it running some crazy heacy scripts, like http://bit.ly/DvVL and http://bit.ly/ppahL. I gotta say, it was impressive. Those scripts simply couldn’t run at Firefox in the previous version, now, they run just as chrome does. It made me happy about this release.
Then, testing it with acid3, it reached the 97 points. I think it could be better, specially because either chrome, safari and opera reached 100. Though, those 3 missing points are related to the SVG Fonts, which were deliberately not implemented, using WOFF instead, as you can see in the Mozilla’s developers blog.
At html5test.com, firefox 4 had 189 points. Chrome was the only better, with 197. IE had 27, as I thought.
When testing selectors and CSS3 here, I notice there are only a few properties/methods that only chrome offers more than Firefox.
The problem I have to point by now is that no one single add-on worked on this version. Even mine didn’t work ok and I’ll have to change some details at them.

About the layout, I’m personaly happy they didn’t take off the status bar, as many people had asked for(if I wanted a browser without a status bar, I’d rather use Chrome). Still, if you use windows vista or Seven, you may have some new advances, like the special button at the top of the window, removing the usual menubar, adding it to the title bar.

I do think there are many things to get better or to be increased in Firefox 4 before its release candidate. It promises a lot and I’m really glad to see the browsers walking toward the same point. The future developers will be happier and faster :)

]]> http://felipenascimento.org/en/testing-firefox-4-beta-1/feed/ 0 Starting with Canvas in javascript http://felipenascimento.org/en/starting-with-canvas-in-javascript/ http://felipenascimento.org/en/starting-with-canvas-in-javascript/#comments Fri, 18 Jun 2010 00:20:10 +0000 Felipe Nascimento http://felipenascimento.org/?p=266 Well, canvas is not that young feature, even though, people are still afraid of using it. Most of our browsers can understand it, and the others (I mean, the Internet Explorer, the onlly one which can’t) will “learn” it soon.
Now, I want to put here some tips about how to start working with canvas easily, and also, how to import images and draw then into it.

First thing, you need a canvas element, and you need to treat it for those that which can’t render the canvas element properly.

    <body>
        <canvas id="theCanvasElement">
            whatever you write in here, will be shown ONLY
            when your canvas cannot be rendered.
            Of course, it accepts HTML tags
        </canvas>
    </body>

Ok, now, using event handlers we will treat it in our javascript

    </body>
    <script>
          // yes, addEventListener does not work on IE
          document.addEventListener('load', canvasHandler, false);
    <script>
</html>

Good. When our page is loaded, it will call our method canvasHandler. Let’s see how we will open the canvas to use with javascript:

// let's create some global variables.
// You can use it better with namespaces
var canvas= null;
var ctx= null;
canvasHandler= function(){
    // first of all, we simply get the canvas element itself
    canvas= document.getElementById('theCanvasElement');
    // now, we need to have the CONTEXT to work with
    ctx= canvas.getContext('2d');
}

Great, we have now in our variable canvas, the HTML canvas element itself. While the variable ctx has got its context. The context is what we will use to draw. It has the mothods and properties to allow us to interact with the canvas in 2D.
No, unfortunately it does not offer any other context besides 2D.
Our canvas still has no properties. It has no with and height, we can set it then.
From now on, all the javascript code must be set inside the canvasHandler function’s body, under those lines shown before.

    canvas.width= 480;
    canvas.height= 340;

You probably know how to load an image from js, right?

    var img= new Image();
    img.src= 'url.png';

Ok, you can use it to insert images inside your canvas. Just like this.

    // instantiate an image
    var img= new Image();
    // we need to use the image when it has finished to load
    img.addEventListener('load', function(){
        // after downloading the image, we can draw it into the canvas
        ctx.drawImage(this);
        // where this= the image just downloaded
    });
    // then, we say the image's url, to it start loading
    img.src= 'url.png';

Ok, now you can see an image inside your canvas. The drawImage method supports some different structures refered by its parameters:

    // draws the image in the position left=30, top=30
    ctx.drawImage(this, 30, 30);
    // draws the image in the 0/0 position, changing its size
    ctx.drawImage(this, 0, 0, 45, 75);
    // more complex, draws the image croping it
    ctx.drawImage(this, 0, 0, 150, 150, 0, 0, 480, 340);

When cropping, you specify the image (this), the position to start showing it (0, 0), then the size you want to crop it (150, 150). After that, you will tell the canvas the size and position the image really is(0, 0, 480, 340).

Soon, I’ll post about how to really draw into your canvas through javascript, adding lines, points and texts.

]]> http://felipenascimento.org/en/starting-with-canvas-in-javascript/feed/ 5 PHPDevBar reaches 6 thousand downloads http://felipenascimento.org/en/phpdevbar-reaches-6-thousand-downloads/ http://felipenascimento.org/en/phpdevbar-reaches-6-thousand-downloads/#comments Thu, 25 Mar 2010 04:29:45 +0000 Felipe Nascimento http://felipenascimento.org/?p=239 I’m quite proud to talk about these new marks and goals.
We’ve also had many feedback, which has helped a lot.

A little secret. I’m working hard to provide a new version with some new features and with a real better engine for the Function Search.

]]> http://felipenascimento.org/en/phpdevbar-reaches-6-thousand-downloads/feed/ 0 PHPDevBar 2.0.1 released http://felipenascimento.org/en/phpdevbar-2-0-1-released/ http://felipenascimento.org/en/phpdevbar-2-0-1-released/#comments Sun, 28 Feb 2010 23:56:59 +0000 Felipe Nascimento http://felipenascimento.org/?p=232 This last week we released the latest version of PHPDevBar.
Better, Mozilla has approved it and now it opened to be downloaded at mozilla’s website.

We hope we will have many comments and feedback about it. Ideas are also very welcome.

]]> http://felipenascimento.org/en/phpdevbar-2-0-1-released/feed/ 0 print_r (the same as in PHP) in Javascript, the print_j http://felipenascimento.org/en/print_r-the-same-as-in-php-in-javascript-the-print_j/ http://felipenascimento.org/en/print_r-the-same-as-in-php-in-javascript-the-print_j/#comments Sun, 28 Feb 2010 23:48:25 +0000 Felipe Nascimento http://felipenascimento.org/?p=223 Hey folks.
I prepared this small function to use, once it’s many times needed and we don’t have it natively in JavaScript. I have many times searched for it through google and couldn’t find a reall interesting lib to it.
Then, I prepared this one.
You can see the example of the output in my projects directory. And you can download the print_j js.

]]> http://felipenascimento.org/en/print_r-the-same-as-in-php-in-javascript-the-print_j/feed/ 0 Criando uma aplicação funcional com theWebMind http://felipenascimento.org/en/portugues-brasil-criando-uma-aplicacao-funcional-com-thewebmind/ http://felipenascimento.org/en/portugues-brasil-criando-uma-aplicacao-funcional-com-thewebmind/#comments Tue, 23 Feb 2010 03:03:30 +0000 Felipe Nascimento http://felipenascimento.org/?p=197 Quero apresentar neste post, e em alguns mais que virão, como podemos criar uma aplicação completa a partir de não mais que 6 linhas utilizando o theWebMind.
Um de seus principais desafios é mostrar como podemos explorar muito mais de algumas de nossas capacidades, que são verdadeiros diferenciais contra as máquinas, ao mesmo tempo, sabendo extrair o que há de melhor nas máquinas, e que não temos sequer chance de concorrer. Sim, estou falando de criatividade, inovação, imaginação, versus habilidade matemática, lógica e performance ao se aplicar regras.
TheWebMind está em sua versão Pre-Alpha 2.0.0 e com certeza ainda ha muitas melhorias por vir, além de possíveis bugs a serem corrigidos.

Com o último release, uma das principais novidades é o módulo nativo Zend Models, que gera uma estrutura MVC utilizando o Zend Framework.

Caso ainda não conheça o Mind, como assim o chamamos, visite seu site oficial e veja a documentação.

Após ter baixado o último release do Mind e tê-lo movido para um diretório em seu ambiente de desenvolvimento PHP, por exemplo, http://localhost/thewebmind/, basta acessar tal endereço para vê-lo funcionando. Ao ser acessado pela primeira vez, o Mind tratará de criar um usuário padrão, que recomendamos que se altere a senha, e prepara o ambiente todo, mesmo que você nem perceba. A partir daí, ja estarás apto a sair usando o Mind.
Caso tenha tido algum problema nesta parte, visite a nossa FAQ e a página com detalhes sobre a instalação.

Sobre o sistema a ser desenvolvido:
Pensei no que preparar, de forma a mostrar de tudo um pouco, e por isto decidi fazer um sistema de posts, onde usuários pudessem criar posts, e outros usuários pudessem comentar os mesmos, além de dar uma nota de 1 a 5.

1º Passo, criando um projeto no Mind

Já logado na IDE do Mind, acesse o menu File, e então New Project. Um formulário será exibido solicitando algumas informações.
Note que não é necessário ter uma base de dados já funcionando para ir desenvolvendo o projeto, porém, ao se solicitar que o Mind gere os arquivos ou a base de dados, sim, neste momento será necessário a existência de um banco de dados já configurado. Aconselho a já cadastrar os dados para um banco de dados desde o início. Podemos ainda cadastrar duas bases de dados diferentes, uma para testes e outra pra produção.

2º Passo, escrevendo em WML

A sintaxe da linguagem WML é baseada no conceito NLP (Natural Language Processing), que consiste basicamente em ser semelhante a linguagem humana natural(Português, Inglês, Espanhol, etc), e ainda obedece ao conceito de programação discreta.
Caso precise de alguma ajuda nesta sintaxe, visite a documentação do Mind sobre WML.

O código que preparei para este protótipo foi o que segue:

Sabemos que todo login tem nome:caractere(60).
Também, o login tem idade:inteiro(). E login pode ter muitos post.
Sendo que cada post tem título:string(40, obrigatório).
E todo post tem descrição:texto().
Post pode ter muitos comentário.
Comentário tem mensagem:varchar(140).
Enquanto que todo o comentário
tem pontuação:inteiro(-1, {1=Ruim|2=Regular|3=Bom|4=Muito Bom|5=Ótimo}).

Para compreender o que foi escrito: apenas com estas 7 linhas de código conseguimos representar um problema relativamente complexo.
A instrução mais complexa é a ultima, onde especificamos que os comentarios terão uma pontuação, e que a mesma somente aceitará 5 opções de valores numericos. Apontamos -1 como tamanho do inteiro, para que o mesmo tenha um tamanho padrão, e então especificamos os valores válidos para este atributo e suas respectivas lábels. Para maiores detalhes, veja em na sessão de atributos na documentação do mind.

3º Rodando o projeto

Para rodar o projeto, o que atualizará o output do mesmo, será necessário ter o projeto já salvo com o código atual, e entao clicar no ícone Run project na barra de ferramentas sobre o editor do Mind, ou pelo menu Tools>Run/Simulate.
Neste momento, as saídas serão atualizadas tanto no painel de output, na parte inferior da tela, quanto na árvore contendo a estrutura do projeto, na lateral esquerda da IDE.
Confira algumas das saídas para este projeto:
Código DDL - criação da estrutura na base de dados

Diagrama ER para o projeto gerado

Árvore, representando a estrutura do projeto trabalhado

4º Gerando o projeto

Para gerar um projeto, use o menu Tools>Generate Project ou o ícone Generate Project sobre o editor do theWebMind.
Um wizard irá abrir com alguns passos a serem seguidos:

  1. Escolha o que planejas gerar. Nesta tela, selecione a opção que melhor se adapta. Escolheremos a segunda, para criar os arquivos, MAIS a base de dados no banco de dados que cadastramos como desenvolvimento.
  2. Na segunda tela, selecionaremos um módulo para ficar como responsável pelo código a ser gerado. Neste caso, selecionaremos o módulo ZendModels.
    – Note que há requisitos para usar este módulo, como htaccess ativo e a biblioteca library na raíz de seu servidor
  3. A terceira tela lhe oferecerá opções sobre o módulo selecionado ou detalhes do passo-a-passo. Neste caso, o ZendModels não tem nenhuma especificação extra, porém será perguntado se desejamos pular(skip) ou substituir (replace) as tabelas que já existirem no banco de dados. Como a base ainda está limpa, esta opção é indiferente neste momento.

Ao clicar em avançar, theWebMind irá automáticamente iniciar a gerar os arquivos e a interagir com a base de dados para criar as tabelas necessárias.
Ao término desta tarefa, lhe será oferecido um link, here que lhe levará aos arquivos gerados. Os mesmos também estão acessíveis em View>Temp Project Files.

6º Testando a aplicação gerada

Simplesmente fazendo isto, já temos um sistema pronto e funcionando de forma simples. Somente o que precisaremos fazer será editar as views para ter uma interface melhor adaptada à real necessidade.
Na modal onde vemos os códigos gerados, logo no topo da árvore que representa a estrutura de arquivos vemos um link com o nome do projto. Clicando nele seremos levados para onde a aplicação gerada esta rodando. Outra forma de chegarmos a estes arquivos paramovermos para outro servidor é atraves do endereço: <theWebMind root>/restrict/users/<user name>/temp/<project name>/root/

Publiquei o sistema gerado, sem nenhuma alteração, aqui, onde você poderá ver e testar como ficou o resultado.

Enfrentando possíveis problemas

Caso tenha tido algum problema ao gerar o mesmo sistema, verifique se o htaccess está aivo na configuração do seu server. Confirme também que a biblioteca do Zend Framework está no diretório raíz do seu servidor HTTP. O que enfrentamos também, foi que algumas configurações no apache limitam o htaccess, então teste removendo as linhas:

php_flag magic_quotes_gpc off
php_flag register_globals off

Enfim, tentei expressar neste post como podemos com apenas algumas poucas linhas, desenvolver uma aplicação já funcional com toda a estrutura e classes seguindo o padrão ZF.
Você encontra outro exemplo de aplicação gerada a partir do Mind no blog do Jaydson.
Espero ter um feedback sobre suas experiências a respeito do theWebMind.

Abraços a todos.

]]> http://felipenascimento.org/en/portugues-brasil-criando-uma-aplicacao-funcional-com-thewebmind/feed/ 0