APIS para web 2.0 desenvolvida em ActionScript

MySpace Development Platform (ActionScript Library)

Facebook F8 Platform (ActionScript API)

Amazon S3 (ActionScript Library)

eBay Platform (ActionScript Library)

Flickr (ActionScript Library)

YouTube (ActionScript Library)

Yahoo! ASTRA (ActionScript Libraries)

Google Map (ActionScript API)

Web Map Services (Google, Microsoft VE and Yahoo) (ActionScript API)

Twitter Life Stream (ActionScript 3 API) ( SWX Twitter API )

Pownce ( ActionScript 3.0 library )

Digg (Flash Kit)

Last.fm Music (ActionScript Library)

PHP para aplicações Web 2.0 em PHP, MySQL, CSS, XHTML, JavaScript e / Ajax

Quentin Zervaas, “Practical Web 2.0 Applications with PHP”

Guia prático em PHP para aplicações Web 2.0 em PHP, MySQL, CSS, XHTML, JavaScript e / Ajax com desenvolvimento de técnicas reunidos para mostrar-lhe como criar aplicações PHP para web 2.0 do planejamento até a concepção final. Este livro inclui códigos para download de códigos com recursos e funcionalidade de pesquisa, mapas, blogs, galerias imagem dinâmica e área personalizada para usuários.

Model-view-controller (MVC)

Model-view-controller (MVC) é um padrão de arquitetura de software. Em aplicações complexas, que enviam uma série de dados para o usuário, o desenvolvedor freqüentemente necessita separar os dados (Model) da interface (View). Desta forma, alterações feitas na interface não afetarão a manipulação dos dados, e estes poderão ser reorganizados sem alterar a interface do usuário. O model-view-controller resolve este problema através da separação das tarefas de acesso aos dados e lógica do negócio da apresentação e interação com o usuário, introduzindo um componente entre os dois: o Controller. MVC é usado em padrões de projeto de software, mas MVC abrange mais da arquitetura de uma aplicação do que é típico para um padrão de projeto.

É comum dividir a aplicação em camadas separadas: apresentação (interface), domínio e acesso a dados. Em MVC a camada de apresentação também é separada da view e da controller.

Model

A representação “domínio” específica da informação em que a aplicação opera. Muitas aplicações usam um mecanismo de armazenamento persistente (como banco de dados) para armazenar dados. MVC não cita especificamente a camada para acesso aos dados, porque subentende-se que estes métodos estariam encapsulados pelo Model.

View

“Renderiza” o model em uma forma específica para a interação, geralmente uma interface de usuário.

Controller

Processa e responde a eventos, geralmente ações do usuário, e pode invocar alterações no Model.

MVC é muito visto também em aplicações para Web, onde a View é geralmente a página HTML, e o código que gera os dados dinâmicos para dentro do HTML é o Controller. E, por fim, o Model é representado pelo conteúdo de fato, geralmente armazenado em bancos de dados ou arquivos XML.

Ainda que existam diferentes formas de MVC, o controle de fluxo geralmente funciona como segue:

1. O usuário interage com a interface de alguma forma (por exemplo, o usuário aperta um botão)
2. O Controller manipula o evento da interface do usuário através de uma rotina pré-escrita.
3. O Controller acessa o Model, possivelmente atualizando-o de uma maneira apropriada, baseado na interação do usuário (por exemplo, atualizando os dados de cadastro do usuário).
4. Algumas implementações de View utilizam o Model para gerar uma interface apropriada (por exemplo, mostrando na tela os dados que foram alterados juntamente com uma confirmação). O View obtém seus próprios dados do Model. O Model não toma conhecimento direto da View.
5. A interface do usuário espera por próximas interações, que iniciarão o ciclo novamente.

Comparando Performance RIA

Um ótimo site desenvolvido para testes de performance entre aplicações RIA, compare o FLEX com Dhtml e o Silverlight.
http://bubblemark.com/flex_bmp.htm

Running sua Application Flex

• Abre a opção do menu Project. Certifique-se que a opção Build Automatically option esteja marcada. Dessa maneira os erros são mostrados antes mesmo de executar a aplicação. Para aplicações mais robustas desmarque essa opção para ganhar tempo.

• Execute o arquivo FlexApp.mxml clicando como na imagem abaixo ou Ctrl + F11. Conheça o processo após a execução da aplicação Flex. Primeiro, as Tags XML da aplicação serão traduzidas para o ActionScript. O ActionScript irá gerar o arquivo SWF para que os bwosers possam ler através do Plugin Flash Player.

• Adicione a tag <mx:Label> entre as tags<mx:Application>; Use o (<) junto a palavra mx, seguido do (:). aparecerá na tele uma longa lista de tags. Pressione a letra L e selecione Label pressione o Enter.

• Assim que for pressionado a tecla Space do teclado irá abrir os atributos da propriedade escolhida no Flex, vamos começar nossa aplicação com o atributo texto com o valor “Hello World”.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”absolute”>
<mx:Label text=”Hello World”/>
</mx:Application>

Como a sintaxe desse código é XML existe outras maneiras de escrever esse mesmo código, como por exemplo em uma linha. Tenha sempre a sua disposição as opções dos proncipais atributos das Tags mais importantes como Label e Application. Tente usar essa combinação por exemplo.

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”
styleName=”plain”/>

A qualquer hora você terá como visualizar suas alterações com o botão direito no mouse sobre o editor na opção: Compare With > Local History

5. Gere um erro em sua aplicação e mande executar novamente, aparecerá essa tela, feche esse aviso e corrija ao erro sempre que ver isso.

6. Altere a aplicação para o Modo Design: Delete o componente text que criamos, vamos fazer isso novamente mais agora no modo Design, para isso localise a Component View, busque na lista de opção o componente Text. Arraste para sua área de Editor. Localize a Flex Properties View altere a opção Text para “Hello world”. Verifique que o resultado é mesmo.

Também podemos alterar as opções do filme principal clicando no componente principal do editor nas opções mostradas abaixo:

A opção Label dentro dos componentes tem um resultado parecido porém nos permite inserir apenas uma linha de texto.

Entendendo o Flex Builder 2 Workbench

Antes de fazer qualquer alteração no arquivo de sua aplicação, você primeiro deve se mais familiarizar com o Flex Builder workbench, que é tudo que você vê na Flex Builder. Há uma série de condições que devem familiarizar-se com relação a interface.

• Feche o Editor atual clicando nos x no lado direito da FlexApp.mxml na Guia do Editor.Todos os editores terão um guia no canto superior esquerdo da área do editor.

• Abra o editor contendo o FlexApp.mxml arquivo da Navigator View clicando duas vezes no nome do arquivo.

• Faça o editor expandir em largura e altura clicando duas vezes na sua guia.

• Repor o editor ao tamanho anterior clicando duas vezes no guia novamente.

• Clique no botão Design no editor para visualizar a aplicação em modo Design. O modo de trabalho muda radicalmente no modo Design, o que lhe permite arrastar e soltar controles na interface do aplicativo. Você também é capaz de definir valores de propriedades. Obviamente, no modo Design também permite que você veja o sua aplicação mais próxima a visão do usuário final.

• Acesse o modo Source clicando no botão Source do editor.
  Você estará usando principalmente o modo Source, mas algumas tarefas são mais bem executadas no Modo de Design.

• Para fechar o Navigator View clique no x. Assim como editores, todas as views também teram guias no canto superior esquerdo da view especial. No Flex Builder 2, as diferentes seções que exibem conteúdo são todos chamados views.

• Reabrir Navigator View: Window > Project Navigator.

• No botão Open Perspective pouco acima da parte superior direita do editor, escolha a opção Flex Debugging.A perspectiva não é nada mais do que um esquema de pontos de vista que você pretende utilizar repetidamente. O Flex Builder vem com algumas embutidas. Você pode criar um layout de seu próprio conjunto de pontos de vista e guardá-las como uma perspectiva que pode ser reusada a qualquer momento.

• Por padrão o Flex Source View estará mostrando os números das linhas de código, especialmente importante para corrigir problemas com desenvolvimento. Verifique na opção Window> Preferences. Na caixa de diálogo, clique no sinal de mais sinais (+) na frente da General e, em seguida, Editors. Finalmente clique Text Editors e clique na caixa de Show Line Numbers. Você também pode ativar a linha números pelo mouse - clique no marcador direito da barra do editor e selecionando Show Line Numbers.

Criando um Projeto e uma MXML Application

Nesta primeira tarefa, você estará criando uma aplicação Flex. Para fazer isto, você deve primeiro criar um projeto no Flex Builder. Um projeto não é mais do que uma coleção de arquivos e pastas que irão ajudá - lo a organizar o seu trabalho. Também nesta tarefa, você irá executar a aplicação Flex. Você descobrirá como o MXML é convertido em um arquivo SWF que é visualizado em um navegador.

• Start Flex Builder 2 escolha Iniciar> Programas> Adobe> Flex Builder

• Escolha File> New> Flex Project. Selecione a opção basic, Em seguida, clique em Next.

• Para este projeto damos o nome de FlexApp

• Uncheck a opção “Use default location check box”, e escolha um lugar uma pasta em seu driveroot:/flex2tfs/flexApp. Clique em Next.

• Em: Main application file: repare no nome Flexapp.mxml por padrão o Flex define pelo nome do projeto.

• Clique em Finish. Seu projeto está criado.

O padrão do arquivo de aplicações contém alguns elementos que você precisa entender. A primeira linha de código:

<?xml version=”1.0″ encoding=”utf-8″?>

É um documento XML tipo de declaração. Porque MXML é uma linguagem padrão XML, o documento declaração deve ser incluída.

A segunda linha de código:
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

Define uma aplicação Flex na página principal. A tag <mx:Application> representa o a tag inicial, ou detentor de todo o conteúdo da aplicação Flex. Você pode ter apenas uma tag <mx:Application> por aplicação Flex.

Dentro da Tag <mx:Application> o atributo
xmlns: mx = “http://www.adobe.com/2006/mxml é um código que define os prefixos mx a ser associado a um conjunto de tags. O valor do atributo que parece com uma URL é referido como um Universal Resource Identifier (URI), na terminologia XML. Através de um arquivo de configuração, Flex-config.xml uma associação é feita entre esta URI ao que é chamado no arquivo. O arquivo mxml-manifest.xml contém todas as tags que podem ser usadas com o prefixo mx. Por padrão o arquivo é encontrado neste local: installationdirectory\Adobe\Flex Builder 2\Flex SDK 2\ Frameworks \ mxml-manifest.xml.

Finalmente, o layout=”absolute” define como esta aplicação irá estabelecer seus componentes ou os que estão na página. Com a disposição absoluta você pode especificar os valores para x e y para todos os componentes da aplicação. Ex:

<mx:Panel width=”250″ height=”114″ layout=”absolute” x=”224″ y=”263″ title=”Teste”>

Tecnologias RIA

AJAX (acrônimo em língua inglesa de Asynchronous Javascript And XML) é o uso sistemático de tecnologias providas por navegadores, como Javascript e XML, para tornar páginas mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. AJAX não é somente um novo modelo, é também uma iniciativa na construção de aplicações web mais dinâmicas e criativas. AJAX não é uma tecnologia, são realmente várias tecnologias conhecidas trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades. AJAX incorpora em seu modelo.:

• Apresentação baseada em padrões, usando XHTML e CSS;
• Exposição e interação dinâmica usando o DOM;
  DOM (Document Object Model - Modelo de Objetos de Documentos) é uma especificação da W3C, independente de plataforma e linguagem, onde pode-se alterar e editar a estrutura de um documento. A API DOM oferece uma maneira padrão de se acessar os elementos de um documento, além de se poder trabalhar com cada um desses elementos separadamente, e por esses motivos criar páginas altamente dinâmicas.
• Intercâmbio e manipulação de dados usando XML e XSLT;
  XSLT é a parte mais importante dos padrões XSL. Ele é a parte do XSL usada para transformar um documento XML em outro documento XML, ou um outro tipo de documento que é reconhecido por um browser, como HTML e XHTML. Normalmente XSLT faz isso transformando cada elemento XML em um elemento (X)HTML.
• Recuperação assíncrona de dados usando o objeto XMLHttpRequest;
  XMLHttpRequest é um objeto Javascript que torna possível a comunicação assíncrona com o servidor, sem a necessidade de recarregar a página por completo. O objeto XMLHttpRequest é hoje parte da especificação do DOM  e JavaScript unindo todas elas em conjunto.

Adobe Flash (antes Macromedia Flash), ou simplesmente Flash, é um software primariamente de gráfico vetorial - apesar de suportar imagens bitmap e vídeos - utilizado geralmente para a criação de animações interativas que funcionam embarcadas num navegador web. O produto era desenvolvido e comercializado pela Macromedia, empresa especializada em desenvolver programas que auxiliam o processo de criação de páginas web. Em abril de 2005, a Macromedia foi adquirida pela Adobe Systems, fabricante de diversos softwares como o Photoshop ou Acrobat Reader, por exemplo.

Em versões recentes (a partir da 5), a Macromedia expandiu a utilização do Flash para além de simples animações, mas também para uma ferramenta de desenvolvimento de aplicações RIA. Isso graças aos avanços na linguagem ActionScript, que é a linguagem de programação utilizada em aplicações de arquivos flashes (.swf). A terceira versão desta linguagem acaba de ser lançada, tornando mais fácil e rápido criar aplicações para web, além de contar com recursos bem mais poderosos.

Uma nova plataforma, chamada Apollo, está sendo lançada pela Adobe e tem como objetivo solidificar o desenvolvimento da linguagem ActionScript, seja através do Flash, do Flex ou de outros programas.

Laszlo é uma plataforma que consiste na linguagem do LZX e a LPS (the Laszlo Presentation Server). LZX é um XML hábil e declarativo, baseado em processo de desenvolvimento que suporta rápida prototipação e desenvolvimento de software com excelente performance.

The Laszlo Presentation Server (LPS) é um Servlet que compila a aplicação LZX para executar em tempo real. Laszlo é renderizado no Flash Player ou em DHTML.

O Adobe Flex é o nome de um conjunto de tecnologias, lançada em Março de 2004 pela Macromedia, que suportam o desenvolvimento de aplicações ricas para a Internet baseadas na plataforma do Macromedia Flash.

É possível verificar que as aplicações feitas em Flash oferecem ao usuário uma experiência muito mais robusta, na qual a produtividade é envolvida pela facilidade de uso e interatividade em tempo real, impossível conseguir no HTML. Desenvolver aplicações ricas com o Flash para programadores torna-se de início estranho, pois o Flash trabalha com uma linha do tempo (timeline) que facilita o trabalho dos designers, mas pode confundir programadores iniciantes nesta ferramenta. O Flex remove esta barreira, fornecendo aos programadores um novo caminho de desenvolvimento de RIAs.

ActionScript 3.0
Poderosa linguagem de programação orientada a objetos para plataforma Flash. ActionScript 3.0 é projetado para criar uma linguagem adequada para construir rapidamente RIAs. Embora versões anteriores do ActionScript já ofereciam a potência e flexibilidade necessária para isso na nova versão do  ActionScript 3.0 o desempenho e a facilidade melhorou o desenvolvimento facilitando ainda mais  o desenvolvimento de aplicações com grandes dados com código reutilizáveis.

Linguagem MXML
Os arquivos desenvolvidos em Flex possuem a extensão MXML, a qual é uma linguagem de marcação. Para visualizar uma aplicação MXML o usuário faz uma requisição pelo seu servidor, o servidor recebe a requisição, o servidor do Flex compila o arquivo MXML para SWF (formato Flash – binário), este será rodado no Flash Player que será salvo na máquina do cliente e visualizado no navegador.

Versões do Flex
Flex SDK - O Flex 2 SDK é um compilador em modo caractere. É possível desenvolver aplicações Flex gratuitamente utilizando este compilador. O programador utiliza algum editor de sua preferência (Eclipse, bloco de notas, dreamweaver, etc), salva o arquivo mxml e através do SDK compila este arquivo para binário (.swf).

Flex 2 Builder - O Flex 2 Builder é bastante intuitivo. É um framework de desenvolvimento que oferece várias facilidades ao usuário, uma delas são os componentes. Estes componentes podem ser arrastados até o palco, configurados os parâmetros e depois feita a programação no modo de código. A grosso modo pode-se comparar ao Borland Delphi que tem essas funcionalidades de componentes prontos e programáveis, mas voltado para web.

Flex Data Services - oferece um conjunto de avançados recursos de gerenciamento de dados no lado do servidor que permitem aos desenvolvedores fornecer rapidamente aplicativos Flex que fazem intenso uso de dados.

WPF (Windows Presentation Foundation, também conhecido como Avalon) simplifica a construção de aplicações cliente ricas, uma vez que facilita a integração de media e documentos. O WPF introduz um sistema avançado de layouts, fácil integração de media e gráficos vectoriais e 3D, facilitando ainda a colaboração entre programadores e designers.

Identificando as vantagens das Rich Internet Applications

Ao contrário dos dias da “bolha” em meados da década de 1990, as empresas já não estão investindo em tecnologias Internet, simplesmente porque são “legais.” Para ter sucesso, uma nova tecnologia precisa demonstrar um retorno verdadeiro  sobre o investimento e realmente agregar algum valor. RIAs conseguem isto, em vários níveis: desenvolvimento que reduzem os custos.

Business Managers
Ao tornar mais fácil para usuários que trabalham com software, o número de transações bem sucedidas é crescente. Este aumento ocorre através de muitas indústrias e podem ser quantificados pelas empresas com métricas, tais como o aumento da produtividade utilizando aplicativos Intranet ou aumento percentual de compradores on-line, que completa uma compra.

TI
Reduz a carga em servidores web e reduz o tráfego de rede. Ao invés de transmissão de páginas inteiras de uma a uma, todo o pedido é feito de uma vez, e, em seguida, a única comunicação com o servidor é para que os dados sejam apresentados na página. Ao reduzir a carga do servidor de rede e tráfego. RIAs desenvolvido usando as boas práticas podem também facilitar o tempo de manutenção de uma aplicação, bem como reduzir o tempo de desenvolvimento.

Usuários Finais
Hoje, há uma série de excelentes aplicações que demonstram a facilidade e interação entre usuários, o que não seria possível sem os conceitos de RIA, tais como as motos Harley Davidson.

Rich Internet Applications

RIA é a abreviação de Rich Internet Applications ou Aplicações Ricas para Internet. É uma Aplicação Web que contêm características e funcionalidades de uma aplicação desktop tradicional. Tipicamente uma aplicação RIA transfere a necessidade de processamento do cliente (numa arquitetura cliente-servidor) para o navegador mas, mantém o processamento mais pesado no servidor de aplicação.
O termo RIA foi usado pela primeira vez em 2001 pela Macromedia (hoje Adobe Systems).

Características:

• roda em um navegador e não requer a instalação de programas adicionais;
• roda localmente em um ambiente seguro chamado sandbox
  (Esse é o conceito de segurança do Java centrado na sandbox: Uma aplicação, seja qual for o ambiente, tem um Set de permissões. Cada ambiente tem a sua “caixa de areia” específica, com suas permissões).

Como as aplicações para a Internet começaram a serem utilizadas para atividades principais, a manutenção dessas aplicações se tornou mais crucial. Infelizmente, muitas aplicações web foram construídas com pouca reflexão sobre a aplicação dos princípios da arquitetura, e que, por isso, são difíceis de manter e ampliar. Hoje, é mais fácil construir uma sólida arquitetura, fornecendo uma separação limpa entre o acesso a dados e áreas de apresentação e com a introdução de elementos tais como Web Services e SOA.

Service-oriented architecture - SOA ou ainda, em português, arquitetura orientada a serviços, é um estilo de arquitetura de software cujo princípio fundamental preconiza que as funcionalidades implementadas pelas aplicações devem ser disponibilizadas na forma de serviços. Freqüentemente estes serviços são organizados através de um “barramento de serviços” (enterprise service bus, em inglês) que disponibiliza interfaces, ou contratos, acessíveis através de web services ou outra forma de comunicação entre aplicações. A arquitetura SOA é baseada nos princípios da computação distribuída e utiliza o paradigma request/reply para estabelecer a comunicação entre os sistemas clientes e os sistemas que implementam os serviços.

Web service é uma solução utilizada na integração de sistemas e na comunicação entre aplicações diferentes. Com esta tecnologia é possível que novas aplicações possam interagir com aquelas que já existem e que sistemas desenvolvidos em plataformas diferentes sejam compatíveis. Os Web services são componentes que permitem às aplicações enviar e receber dados em formato XML. Cada aplicação pode ter a sua própria “linguagem”, que é traduzida para uma linguagem universal, o formato XML.

Para as empresas, os Web services podem trazer agilidade para os processos e eficiência na comunicação entre cadeias de produção ou de logística. Toda e qualquer comunicação entre sistemas passa a ser dinâmica e principalmente segura, pois não há intervenção humana.