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 cross-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

O que é preciso saber para
desenvolver?
Utilizar uma ferramenta de Controle de
Versão

O que é preciso saber para
desenvolver?
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

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)
Não Compativel com YUI 2.X
Migração Paralela

Caso de Uso

Caso de Uso

Caso de Uso

Caso de Uso

Dúvidas e afins

Agradecimentos
ONU/OMS/OPAS/BIREME
CONAPHP
CONISLI
Manoel Lemos
Yahoo – YUI Team

Referências
http://developers.yahoo.com/yui
http://www.yuiblog.com
http://devzone.zend.com
http://www.bireme.org
http://blog.davglass.com/

Obrigado!
Domingos Teruel
webmaster@dteruel.com.br
Bruno Neófiti de Andrade
brunoneofiti@hotmail.com