Marca desde já essa data na agenda e prepara-te para passar uma tarde bem disposta juntamente com pessoas que partilham contigo interesses e paixões pela Internet e não só!

Vamos ter speakers a abordar temas de elevado interesse da actualidade que te vão deixar com água na boca para aprender, explorar e procurar as inovações para o design e desenvolvimento das tuas aplicações!

O universo de desenvolvimento de aplicações web está em perfeita erupção! Não são só as tecnologias cliente, mas toda a “pilha” de desenvolvimento com as suas diversas tecnologias, linguagens e ferramentas está a ser posta em causa e cada um quer encontrar o seu nicho nesta realidade. Não perca esta oportunidade de ouvir alguns experts  portugueses na área do desenvolvimento de Rich Internet Applications.

Como se isto não fosse suficiente ainda vamos ter prémios para distribuir pelo pessoal que estiver a assistir que vão desde licenças de software a vouchers de cursos de formação e outros.

Não percam! Dia 6 de Março, no Edifício “Maus Hábitos”, às 14:00, e sim, no Porto!

Inscreve-te em: http://riapt.stagehq.com/events/182/booking/new

Agenda

Estas pré-condições implicaram o recurso ao formato PNG – o único que permitiria resolver o problema, visto a norma JPEG2000 não ser suportada pelo Flash Player. Porém, adoptar o formato PNG para as fotos das joias com as dimensões acima referidas resultou em ficheiros de cerca de 500KB. Isto, num site com cerca de 200 a 300 jóias, com várias fotos cada.

Depois do deployment do site constatou-se o esperado: em ligações rápidas, os 500KB de cada foto não representavam grandes problems, mas em ligações lentas podia ser desesperante esperar de 10 a 20 segundos para a foto carregar. E com o disseminar recente das ligações 3,5G (kangurus, vodafone e tmn connect box, etc), tornou-se problemático pelo que tivemos que procurar por uma solução.

Encontrámos uma extensão chamada PNG2SWF pertencente ao pacote SWFTools que permitia converter um PNG para um SWF. Como é sabido, um PNG embebido em SWF pode levar compressão sendo mantida a transparência, pelo que decidimos fazer algumas experiências. Após alguns testes, tivemos resultados impressionantes: imagens de 500 Kb passaram para 60 Kb sem serem perdidos os canais alpha. Exactamente o que precisávamos!

O problema que surgiu de seguida consistia em saber como integrar o PNG2SWF com o site / backoffice sem afectar a experiência do utilizador. Era importante que o cliente continuasse a utilizar o backoffice como sempre, sem trabalho adicional.

Fizemos então um script simples, que vos ofereço adiante, e que consiste num género de proxy para carregar PNGs, só que devolve o PNG convertido para SWF, e escalado para dimensões arbitrárias escolhidas pelo programador.

O download do script pode ser feito aqui: pngoptimize . O source code pode ser visto abaixo:

<?php

    // 31-10-2008
    // pngOptimize.php by João Saleiro - Webfuel ( joao.saleiro@webfuel.pt)
    // Todo:
    // - receive quality from $_GET vars
    // - set default values for quality, w and h

    $image = $_GET['url'];
    $w = $_GET['w'];
    $h = $_GET['h'];

    $date = filemtime($image);

    // Generate SWF filename
    $swf = $image . $w . $h .'_'. $date .'.swf';

    // Generate SWF if it doesn't exist
    if (!file_exists($swf))
    {
        // Calculate dimensions
        list($width, $height) = getimagesize($image);

        $proportion = 1;
        if ($width > $height)
            $proportion = $w/$width;
        else
            $proportion = $h/$height;

        // Load image and preserver transparency
        $im = @imageCreateFromPNG ($image);
        imagealphablending($im, false);
        imageinterlace ( $im, 0);
        imagesavealpha($im, true);

        // Create new Image
        $im_dest = imagecreatetruecolor ($width*$proportion,  $height*$proportion);

        // Set transparency
        $background = imagecolortransparent($im);
        imagecolortransparent($im_dest, $background);
        imagealphablending($im_dest, false);
        imagesavealpha($im_dest, true);

        // Resize old image to new image
        imagecopyresampled($im_dest, $im, 0, 0, 0, 0, $width*$proportion, $height*$proportion, $width, $height);

        // Save new image
        $tempName=$image.'temp.png';
        imagepng($im_dest, $tempName);

        // Clean memory
        imagedestroy($im);
        imagedestroy($im_dest);    

        // Convert new image to SWF
        shell_exec("./png2swf -j 85 -o $swf $tempName");

        // Remove temp file
        unlink($tempName);
    }

    // If we get here, and there's no file, we don't return nothing
    if (!file_exists($swf))
        exit(0);

    // Return generated SWF
    header("Content-type: application/x-shockwave-flash");
    $fp = fopen($swf,"rb");
    fpassthru($fp);
    fclose($fp);
?>

O algoritmo é relativamente simples:

1. O script recebe por GET os parâmetros: url, w e h, que correspondem ao endereço relativo do PNG, e as dimensões que queremos para o nosso SWF resultante;
2. O script vai então gerar um nome de ficheiro único para aquele url, com aquelas dimensões, e para a data do PNG (i.e. se o PNG for actualizado pelo cliente o script detecta que há um PNG novo, o que implica gerar um novo SWF com novo nome);
3. É verificado se já existe algum SWF com aquele nome único (i.e. uma versão em cache daquele PNG já convertido para SWF com aquelas dimensões). Se existir, o SWF é aberto e lido, e feito um fpassthru do ficheiro (i.e. é devolvido o conteúdo do ficheiro SWF), depois de definido o header application/x-shockwave-flash para que o Flash possa interpretar o resultado do ficheiro PHP como sendo um SWF;
4. Se não existir nenhum SWF, o script vai abrir o PNG referido no URL, e criar um novo PNG temporário com as dimensões referidas, mantendo a transparência;
5. É então feita a conversão desse PNG temporário para SWF através de um shell_exec que executa o png2swf com os parâmetros necessários para a conversão, sendo gerado um SWF com o nome de ficheiro referido acima, e devolvido com o fpassthru.

Para utilizar este script é necessário:

• Colocar no servidor, na mesma directoria do pngConvert.php, o png2swf (linux) ou png2swf.exe (windows);
• Permissões de execução do png2swf nessa directoria;
• Permissões do php para a chamada de comandos externos (shell_exec);
• Permissões de escrita nas directorias onde estão os ficheiros PNG para serem lá colocados os ficheiros SWF;

Do lado do cliente, o código necessário para carregar um PNG convertido para SWF através do pngConvert é:

• MXML:

<mx:Image source="pngConvert.php?url=imagem.png&w=100&h=100"/>

• Actionscript 3 (i.e. Flash)

var l:Loader=new Loader();

l.load(new URLRequest('pngConvert.php?url=imagem.png&w=100&h=100'));

addChild(l);

O script ainda pode levar algumas melhorias, nomeadamente:

• a qualidade da imagem também ser passada por GET;
• se os parâmetros w e h não estiverem definidos, o SWF gerado é da mesma dimensão que o PNG original.

Não implementei essas melhorias porque não precisei na altura, mas se alguém quiser melhorar, é bem vindo – publicarei depois aqui a versão melhorada, com devidos créditos.

Espero que esta informação e script vos sejam úteis. O script pode ser utilizado livremente e só pedimos que seja colocado um comentário neste post com o endereço do site onde o estão a usar, para alegrarem o nosso dia.

Além dos imensos bugs que esta versão corrige, ela passa agora a suportar o Data Management para flex (WDMF), o que vai simplificar e tornar o processo de desenvolvimento bem mais rápido visto que o aproveitamento do código gerado ( client-side (AS3) e server-side (PHP) ) ronda os 90% (segundo os projectos implementados pela equipa de profissionais do WebORB). Podem ver um screencast desta funcionalidade aqui.

Os utilizadores de Silverlight podem agora usufruir do WebORB PHP visto que esta nova versão tráz um componente que permite conectar e invocar classes PHP sem a tipíca complexidade Silverlight remoting. Podem ver como funciona neste tutorial.

Podem fazer download da Versão 3.5 do WebORB PHP aqui e ver o release history aqui.

Além desta funcionalidade a actual versão (3.0), já gera código para as variadas Frameworks como Cairngorm, PureMVC, ARP.

A nível de velocidade ainda não tive oportunidade de testar as diferenças entre o Weborb e o amfphp, mas assim que tiver tempo irei fazer alguns testes a ambos e publicarei os resultados com os respectivos screenshots.

Quem quiser fazer parte da equipa de beta testers pode começar por ler o tópico criado pelo Mark Piller no fórum e falar directamente com ele via PM.

Um PHP/.NET Developer decidiu criar um package para PHP de modo a reproduzir a simplicidade que com o LINQ se efectuam queries – PHPLinq.

No site do Maarten Balliauw encontram alguns exemplos,

// Create data source
$names = array(”John”, “Peter”, “Joe”, “Patrick”, “Donald”, “Eric”);
// Query
$result = from(’$name’)->in($names)
->where(’$name => strlen($name) < 5′)
->select(’$name’);

 (source: Maarten Balliauw)
e aqui poderão descarregar o package e começar já a evitar os ciclos nos algoritmos de queries.

• Serge Jespers & Enrique Duvos – Intro to the Adobe RIA Platform / FB3 features and AIR 1.0 features /Adobe Open-source strategy
• Carlos Rovira – Using Flash and Flex Together
• João Fernandes – BlazeDS e LCDS
• João Saleiro – Integração de aplicações Flex com PHP através de AMFPHP (Flash Remoting for PHP) e o código fonte

Vou ver ainda se consigo que me entreguem os vídeos das apresentações, embora não saiba se será possível.

Na minha opinião, e considerando que foi a primeira vez que se fez este evento em Portugal, foi um sucesso tanto pela qualidade da generalidade das apresentações, como pelo facto de termos tido a sala completamente cheia. Gostei especialmente da apresentação do Serge Jespers, embora a do Enrique Duvos não tenha ficado atrás.

Vou tentar reunir as apresentações aqui no riapt, e ver se consigo que o ISCTE nos disponibilize os vídeos em formato digital.

Entretanto deixo-vos aqui a minha apresentação em PDF, e o source code respectivo. Falo da apresentação sobre integração de Flex com PHP através de AMFPHP.

Aproveito para agradecer:

• A todos os presentes;
• Ao ISCTE, cuja organização foi impecável;
• À Adobe Portugal e internacional, em especial à Sumi Lim, Enrique Duvos e Serge Jesper
• Ao Kim Hansen pelo apoio (dude, on the next event you have to make a presentation!)

Para aqueles que me pediram um cartão e não o receberam (desde Dezembro que esgotei os cartões, e ainda não tive tempo para mandar fazer novos..), deixo aqui os meus contactos:

mail: joao [dot] saleiro [at] webfuel [dot] pt
skype: joao.saleiro

E para quem me quiser “seguir” no twitter, o meu twitter é joaosaleiro (http://twitter.com/joaosaleiro).

Gostaria ainda de saber a opinião dos presentes relativamente tanto ao evento em geral, como à minha apresentação em específico. Podem fazê-lo enviando mail para a mailing list, ou deixando um comentário neste post. Não tenham medo de fazer críticas – o objectivo é aprender com o que foi feito de bem, e corrigir num próximo evento aquilo que não correu tão bem.

As inscrições devem ser efectuadas deixando um comentário no post anterior, estando actualmente 31 pessoas inscritas. Aconselho também a leitura do post anterior que possui mais informação para complementar este.

Infelizmente já sei que não poderemos contar com o Kim Hansen nem com o José Luís Gouveia que não estarão em Portugal na altura. Lá teremos que fazer outro evento lá para finais de Fevereiro …. ; )

O encontro será marcado por curtas apresentações de 10 a 20 minutos, e poderemos contar também com a presença de uma equipa da 4inWeb que irá apresentar o Microsoft Silverlight.

Assim sendo, aqui fica o índice de apresentações que me chegaram às mãos até ao momento, sem nenhuma ordem em específico. Irei actualizando este post à medida que mais pessoas se forem oferecendo para fazer apresentações.

Índice de apresentações

1. Boas Vindas
2. Apresentação do Microsoft Silverlight – 4InWeb
3. Display List em AS3 - João Gonçalves
4. Integração de Flash Cs3 com Flex 2 – João Saleiro
5. Showcase: Asko / “A minha primeira aplicação em Flex” - Luís Costa
6. Introdução ao Cairngorm – João Fernandes
7. Showcase: FlexFuel – João Saleiro
8. And Now for Something Completely Different … – Paulo Moreira
9. Showcase: Configurador de Regras - Alexandre Xavier

Se houverem interessados, posso ainda apresentar “Interligação entre Flex e PHP utilizando AMFPHP”. Não incluí na lista para não terem que me aturar demasiadas vezes, mas se houver muitos interessados posso por exemplo substituir uma das minhas sessões por esta.

Antes das “palestras” teremos um fase de apresentações para que as pessoas se conheçam. No final, voltamos todos a sentar-nos e falamos livremente.

Temos tudo montado para um grande primeiro aniversário! Ok, falta o bolo… alguém se oferece para fazer um bolo?

A primeira é, obviamente, criar um curso de desenvolvimento de RIAs. Como tal, dentro de um mês deverei começar a trabalhar nisso para tentar colocar o curso em prática em 2008.

A segunda, é criar um espaço no riapt para anunciar cursos de programação web com qualidade, o mais próximos possível do desenvolvimento de RIAs. Assim, convido todos os que conhecem bons cursos em escolas de formação técnicas ou profissionais, a enviar um mail para a mailing list com o nome da escola, o nome do curso, e o currículo do mesmo. Poderão ser as próprias escolas a fazê-lo, obviamente desde que o curso tenha qualidade.

Para começar, posso aconselhar o curso de Programação de Aplicações Web na etic_. Este curso sofreu uma restruturação na qual estive envolvido, aproximando-o muito do mercado de trabalho. Um dos seus pontos fortes é o projecto que em principio tratar-se-á de uma solução de e-commerce com algum CRM, baseado em Actionscript e PHP. Sou um dos principais formadores do curso, por isso posso garantir a qualidade do mesmo.

Curso
Programação de Aplicações Web

Escola
etic_

Objectivo
Preparar futuros Web-Developers no desenvolvimento de aplicações distribuídas e websites alimentados por bases de dados, segundo as boas práticas correntes do modelo de três camadas e arquitecturas orientadas ao serviço.

Currículo
1. Open Your Mind
2. Introdução ao desenvolvimento Web
3. Procotolos Web
4. Design em Interfaces Gráficos para a Web
5. Interfaces gráficos em HTML e CSS
6. Fase 1 do Projecto – Planeamento
7. Interfaces Gráficos em XHTML/XML
8. Introdução à Programação
9. Interfaces Interactivos em DHTML
10. Fase 2 do Projecto – Front-end do Backoffice
11. Bases de Dados Relacionais
12. Linguagens Server-Side: PHP
13. Aplicações de Bases de Dados
14. Segurança em Aplicações Web
15. Fase 3 do projecto – Back-end do Backoffice.
16. Interfaces Animados em Flash
17. Interfaces Interactivos em Actionscript
18. Optimização de Projectos em Actionscript
19. Fase 4 do Projecto – Front-end da solução de e-commerce
20. Arquitecturas de Comunicação em Actionscript
21. Fase 5 do Projecto – Back-end da solução de e-commerce

Contactos
21 394 25 50
Rua D. Luís I, nº6 – Lisboa
info@etic.pt

Julgo que as inscrições terminam este mês.

Sei que a etic_ anda a negociar a compra do Flash CS3, por isso é bastante possível que a linguagem leccionada a partir do módulo 16 seja Actionscript 3. No módulo 20, é leccionado Flash Remoting com AMFPHP. No ano passado, foi integrado no curso um workshop de 12h de Flex 2. Não sei se isso acontecerá este ano, mas vou começar já a fazer pressão.

Agradeço que enviem outros cursos com currículos interessantes para a mailing list, para que os possa publicitar no riapt, criando uma secção específica para tal.

(UPDATE)
Se preferirem, em vez da mailing list podem colocar a descrição dos cursos aqui nos comentários deste post.

A explicação do que são Value Objects, e quais as suas vantagens e desvantagens pode ser vista nesta pequena apresentação que preparei.

Em resumo, os Value Objects são uma best practice recomendada para projectos grandes e complexos, ajudando-nos a simplificar o desenvolvimento e a manter a nossa sanidade mental.
Em projectos pequenos desaconselho a utilização de Value Objects pois, como se pode ver no código do exemplo que apresento neste post embora do lado do cliente a nossa vida tenha ficado ligeiramente mais simples (código mais intuitivo graças a um typed object), do lado do servidor tivemos que aumentar a quantidade de código necessário (ver o ficheiro GestorDeUtilizadoresService.php) para converter as matrizes (hashmaps) para objectos. Claro que é possível criar algumas funções que automatizam este processo e evitam este código como fazemos na Webfuel, mas isto é uma lição para mais tarde.

O código fonte deste exemplo pode ser descarregado daqui. Para colocá-lo a funcionar, é preciso seguir exactamente os mesmos passos descritos no exemplo anterior (excepto a configuração da base de dados, que será a mesma).