A apresentação discute o desenvolvimento de aplicações web usando PHP, AJAX e o framework YUI. Apresenta as vantagens de cada tecnologia e como utilizá-las juntas para criar interfaces ricas e interativas para o usuário. Explica os principais conceitos e ferramentas necessárias para desenvolvimento com essas tecnologias.

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

2. 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

3. 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

4. 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 !!

5. 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

6. 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

7. Quem esta usando PHP

8. Por quê AJAX?
Ajax quer dizer: Asynchronous Javascript
and XML
Mas também pode ser:
Asynchronous Javascript and
+ XHTML
+ JSON
+ CSS

9. Por quê AJAX?
O ciclo tradicional

10. Por quê AJAX?
O ciclo AJAX

11. 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

12. Quem esta usando AJAX com YUI

13. Outros frameworks JS

14. 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

15. 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.

16. 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

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

18. 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)

19. Arquitetura Aplicação Web

20. Arquitetura Aplicação Web

21. 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

22. 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

23. Camada de Negócios
Programação Orientada a Objeto
Utilizar conceito Container
Devo utilizar um framework como Zend
Framework, CakePHP, etc?

24. 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

25. 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

26. 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 !

27. YUI e carga de dados
Definição de campos
Tipo de Campos
Meta Campos
Lista de Resultados

28. Lógica de acesso a BD
Modulo de Conexão com a base de Dados
ISIS (WXIS-MODULES)

29. Saída de Dados

30. 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

31. Caso de Uso

32. Caso de Uso

33. Caso de Uso

34. Caso de Uso

35. Dúvidas e afins

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

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

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