Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface

Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface Domingos Teruel Bruno Neófiti de Andrade

Experiência Profissional

Tecnólogo em computação cursando especialização em Sistemas Web e Interface de Usuários;

Atua na área de desenvolvimento e implementação de projetos de sistemas web-based em Software Livre, trabalha com PHP desde 1999.

Analista de Sistemas da instituição ONU/OMS/OPAS/BIREME desde 2004

Experiência Profissional

Desenvolvedor de Software

ONU/OMS/OPAS/Bireme

Engenheiro da Computação

cursando Pós Engenharia de Software

Trabalho com PHP e SL

desde 2000

Quem esta na Platéia?

Fãs de Software Livre ?

Estudantes ?

Desenvolvedores Avançado de PHP ?

Desenvolvedores de outras Linguagens ?

Todas as opções acima !

Nenhuma das outras opções !!

Linha da apresentação

Porque utilizar PHP no meu projeto

Utilizando Ajax com PHP

Porque YUI

Desenvolvimento de um Projeto

Camada de Apresentação com YUI

Camada de Negócios e Modelo

Porque usar PHP se existe o ASP, JSP, Python, .NET… ?

Excelente Custo/Benefício

Perfomance / Robustez / Escalabilidade

Curva de aprendizagem curta

Open Source / Software livre

Multi-plataformas

Interoperabilidade

Grande Comunidade ativa

Quem esta usando PHP

Por quê AJAX?

Ajax quer dizer: Asynchronous Javascript and XML

Mas também pode ser:

Asynchronous Javascript and

+ XHTML

+ JSON

+ CSS

Por quê AJAX?

O ciclo tradicional

Por quê AJAX?

O ciclo AJAX

Por quê AJAX?

O que muda para o usuário

Uso de AJAX substitui refresh de páginas por atualização( update ) nas páginas.

Melhora a experiência do usuário com a interface

Possibilidade de melhorias na interação com o usuário: melhor usabilidade, melhor interatividade com quem usa

Utilização de efeitos visuais (limitado, mas suficiente)

Economia de banda (aplicação mais veloz)

Grande quantidade de frameworks Javascripts disponíveis no mercado

Quem esta usando AJAX com YUI

Outros frameworks JS

Por que YUI?

“ A Biblioteca Yahoo User Interface (YUI) é uma coleção coerente de recursos Javascript e CSS que facilita a construção de aplicações web interativas em navegadores web. Algumas partes do YUI, como o Event Utility, opera sobre uma camada e esta lá para facilitar a programação croos-browser. Outras, como o Calendário, apresenta widgets que pode ser representados em sua página com um visual(design) padrão.”

YUI Team

Porque YUI

Excelente documentação

Grande número de desenvolvedores, ótimos Use cases

Desenvolvimento continuo da aplicação pelo Yahoo e comunidade

A Biblioteca YUI é livre, está sob a licença BSD que permite seu uso comercial e não comercial.

O que é preciso saber para desenvolver?

Para desenvolver uma aplicação que utilize YUI é recomendado bom conhecimento de XHTML e CSS, noções de DOM e JAVASCRIPT

Quais ferramentas utilizar?

Navegador: Firefox

Add-ons:

Firebug

Html Validator

Tamper data

Web Developer

YSlow

Utilizar uma ferramenta de Controle de Versão

Definição das pastas do projeto

Baixar a última versão do YUI e das outras ferramentas que utilizará no projeto (smarty, nusoap e etc)

Arquitetura Aplicação Web

Camada de Apresentação

Definição do Mockup

Uso de templates engine (SMARTY) para gerenciar a saída XHTML

Definição do container de navegação

Web Standards

Como preparar sua aplicação para o YUI

Definir o escopo do recurso a ser utilizado na interface

Loader

Dificuldade em trabalhar com aplicações complexas que utilizam componente DataTable

Event

Fácil implementar com componente DataTable

Camada de Negócios

Programação Orientada a Objeto

Utilizar conceito Container

Devo utilizar um framework como Zend Framework, CakePHP, etc?

Desenvolvimento da aplicação

Bootstrap

Disponibiliza os recursos do sistema

Carrega as definições iniciais da aplicação

Container

Faz check de segurança

Checa Identificação do Usuário

Gerencia requisições e permissões de usuário

Internacionalização com YUI

YUI não contempla de um componente para internacionalização

Como fazer?

Utilize seu componente PHP de i18n

Zend_translate

Smarty Translate

Solução caseira

Navegador defini idioma padrão, arquivo de idioma

Componente que traduz para JavaScript

YUI e carga de dados

Componente DataSource

Tipo de dados

HTML TABLE

TEXT

JSON

JSARRAY

XML

Siga o padrão de cada tipo de dado !

YUI e carga de dados

Definição de campos

Tipo de Campos

Meta Campos

Lista de Resultados

Lógica de acesso a BD

Modulo de Conexão com a base de Dados ISIS (WXIS-MODULES)

Saída de Dados

Para aonde caminha YUI

YUI 3.X

Mais Leves (menos K-weight sobre o core da página para a maioria dos usos)

Mais rápido (com menos requisições http, menos escrita de código e compilação, um código mais eficiente)

Mais consistente (nomenclatura comum, assinaturas de eventos, widget e toda a APIs da biblioteca)

mais potentes (fazer mais com menos implementação código)

mais segurança (mais seguro e fácil de expor a vários desenvolvedores trabalhando no mesmo ambiente, maior facilidade de correr em sistemas como Caja ou ADsafe)