Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface Domingos Teruel Bruno Neófiti de Andrade
Experiência Profissional <ul><li>Tecnólogo em computação cursando especialização em  Sistemas  Web e Interface de Usuários...
Experiência Profissional <ul><li>Desenvolvedor de Software </li></ul><ul><li>ONU/OMS/OPAS/Bireme </li></ul><ul><li>Engenhe...
Quem esta na Platéia? <ul><li>Fãs de Software Livre ? </li></ul><ul><li>Estudantes ? </li></ul><ul><li>Desenvolvedores Ava...
Linha da apresentação <ul><li>Porque utilizar PHP no meu projeto </li></ul><ul><li>Utilizando Ajax com PHP </li></ul><ul><...
Porque usar PHP se existe o ASP, JSP, Python, .NET… ? <ul><li>Excelente Custo/Benefício </li></ul><ul><li>Perfomance / Rob...
Quem esta usando PHP
Por quê AJAX? <ul><li>Ajax quer dizer: Asynchronous Javascript and XML </li></ul><ul><li>Mas também pode ser: </li></ul><u...
Por quê AJAX? <ul><li>O ciclo tradicional </li></ul>
Por quê AJAX? <ul><li>O ciclo AJAX </li></ul>
Por quê AJAX? <ul><li>O que muda para o usuário </li></ul><ul><ul><li>Uso de AJAX substitui  refresh  de páginas por atual...
Quem esta usando AJAX com YUI
Outros frameworks JS
Por que YUI? <ul><ul><li>“ A Biblioteca Yahoo User Interface (YUI) é uma coleção coerente de recursos Javascript e CSS que...
Porque YUI <ul><li>Excelente documentação </li></ul><ul><li>Grande número de desenvolvedores, ótimos Use cases </li></ul><...
O que é preciso saber para desenvolver? <ul><li>Para desenvolver uma aplicação que utilize YUI é recomendado bom conhecime...
O que é preciso saber para desenvolver? <ul><li>Utilizar uma ferramenta de Controle de Versão </li></ul>
O que é preciso saber para desenvolver? <ul><li>Definição das pastas do projeto </li></ul><ul><li>Baixar a  última  versão...
Arquitetura Aplicação Web
Arquitetura Aplicação Web
Camada de Apresentação <ul><li>Definição do Mockup </li></ul><ul><ul><li>Uso de  templates engine  (SMARTY) para gerenciar...
Como preparar sua aplicação para o YUI <ul><li>Definir o escopo do recurso a ser utilizado na interface </li></ul><ul><li>...
Camada de Negócios <ul><li>Programação Orientada a Objeto </li></ul><ul><li>Utilizar conceito Container </li></ul><ul><li>...
Desenvolvimento da aplicação <ul><li>Bootstrap </li></ul><ul><ul><li>Disponibiliza os recursos do sistema </li></ul></ul><...
Internacionalização com YUI <ul><li>YUI não contempla de um componente para internacionalização </li></ul><ul><li>Como faz...
YUI e carga de dados <ul><li>Componente DataSource </li></ul><ul><ul><li>Tipo de dados </li></ul></ul><ul><ul><ul><li>HTML...
YUI e carga de dados <ul><li>Definição de campos </li></ul><ul><ul><li>Tipo de Campos </li></ul></ul><ul><li>Meta Campos <...
Lógica de acesso a BD <ul><li>Modulo de Conexão com a base de Dados ISIS (WXIS-MODULES) </li></ul>
Saída de Dados
Para aonde caminha YUI <ul><li>YUI 3.X </li></ul><ul><ul><li>Mais Leves (menos K-weight sobre o core da página para a maio...
Caso de Uso
Caso de Uso
Caso de Uso
Caso de Uso
Agradecimentos <ul><li>ONU/OMS/OPAS/BIREME </li></ul><ul><li>CONAPHP </li></ul><ul><li>CONISLI </li></ul><ul><li>Manoel Le...
<ul><li>Domingos Teruel </li></ul><ul><li>[email_address] </li></ul><ul><li>Bruno Neófiti de Andrade </li></ul><ul><li>[em...
Upcoming SlideShare
Loading in …5
×

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

2,831 views

Published on

Palestra apresentada durante o CONAPHP 2008 na FIAP - SP - SP sobre como desenvolver aplicações PHP, AJAX e YUI! Yahoo User Interface.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,831
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
47
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface Domingos Teruel Bruno Neófiti de Andrade
  2. 2. Experiência Profissional <ul><li>Tecnólogo em computação cursando especialização em Sistemas Web e Interface de Usuários; </li></ul><ul><li>Atua na área de desenvolvimento e implementação de projetos de sistemas web-based em Software Livre, trabalha com PHP desde 1999. </li></ul><ul><li>Analista de Sistemas da instituição ONU/OMS/OPAS/BIREME desde 2004 </li></ul>
  3. 3. Experiência Profissional <ul><li>Desenvolvedor de Software </li></ul><ul><li>ONU/OMS/OPAS/Bireme </li></ul><ul><li>Engenheiro da Computação </li></ul><ul><ul><li>cursando Pós Engenharia de Software </li></ul></ul><ul><li>Trabalho com PHP e SL </li></ul><ul><li>desde 2000 </li></ul>
  4. 4. Quem esta na Platéia? <ul><li>Fãs de Software Livre ? </li></ul><ul><li>Estudantes ? </li></ul><ul><li>Desenvolvedores Avançado de PHP ? </li></ul><ul><li>Desenvolvedores de outras Linguagens ? </li></ul><ul><li>Todas as opções acima ! </li></ul><ul><li>Nenhuma das outras opções !! </li></ul>
  5. 5. Linha da apresentação <ul><li>Porque utilizar PHP no meu projeto </li></ul><ul><li>Utilizando Ajax com PHP </li></ul><ul><li>Porque YUI </li></ul><ul><li>Desenvolvimento de um Projeto </li></ul><ul><ul><li>Camada de Apresentação com YUI </li></ul></ul><ul><ul><li>Camada de Negócios e Modelo </li></ul></ul>
  6. 6. Porque usar PHP se existe o ASP, JSP, Python, .NET… ? <ul><li>Excelente Custo/Benefício </li></ul><ul><li>Perfomance / Robustez / Escalabilidade </li></ul><ul><li>Curva de aprendizagem curta </li></ul><ul><li>Open Source / Software livre </li></ul><ul><li>Multi-plataformas </li></ul><ul><li>Interoperabilidade </li></ul><ul><li>Grande Comunidade ativa </li></ul>
  7. 7. Quem esta usando PHP
  8. 8. Por quê AJAX? <ul><li>Ajax quer dizer: Asynchronous Javascript and XML </li></ul><ul><li>Mas também pode ser: </li></ul><ul><ul><li>Asynchronous Javascript and </li></ul></ul><ul><ul><li>+ XHTML </li></ul></ul><ul><ul><li>+ JSON </li></ul></ul><ul><ul><li>+ CSS </li></ul></ul>
  9. 9. Por quê AJAX? <ul><li>O ciclo tradicional </li></ul>
  10. 10. Por quê AJAX? <ul><li>O ciclo AJAX </li></ul>
  11. 11. Por quê AJAX? <ul><li>O que muda para o usuário </li></ul><ul><ul><li>Uso de AJAX substitui refresh de páginas por atualização( update ) nas páginas. </li></ul></ul><ul><ul><li>Melhora a experiência do usuário com a interface </li></ul></ul><ul><ul><li>Possibilidade de melhorias na interação com o usuário: melhor usabilidade, melhor interatividade com quem usa </li></ul></ul><ul><ul><li>Utilização de efeitos visuais (limitado, mas suficiente) </li></ul></ul><ul><ul><li>Economia de banda (aplicação mais veloz) </li></ul></ul><ul><ul><li>Grande quantidade de frameworks Javascripts disponíveis no mercado </li></ul></ul>
  12. 12. Quem esta usando AJAX com YUI
  13. 13. Outros frameworks JS
  14. 14. Por que YUI? <ul><ul><li>“ 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.” </li></ul></ul><ul><ul><li>YUI Team </li></ul></ul>
  15. 15. Porque YUI <ul><li>Excelente documentação </li></ul><ul><li>Grande número de desenvolvedores, ótimos Use cases </li></ul><ul><li>Desenvolvimento continuo da aplicação pelo Yahoo e comunidade </li></ul><ul><li>A Biblioteca YUI é livre, está sob a licença BSD que permite seu uso comercial e não comercial. </li></ul>
  16. 16. O que é preciso saber para desenvolver? <ul><li>Para desenvolver uma aplicação que utilize YUI é recomendado bom conhecimento de XHTML e CSS, noções de DOM e JAVASCRIPT </li></ul><ul><ul><li>Quais ferramentas utilizar? </li></ul></ul><ul><ul><ul><li>Navegador: Firefox </li></ul></ul></ul><ul><ul><ul><li>Add-ons: </li></ul></ul></ul><ul><ul><ul><ul><li>Firebug </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Html Validator </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Tamper data </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Web Developer </li></ul></ul></ul></ul><ul><ul><ul><ul><li>YSlow </li></ul></ul></ul></ul>
  17. 17. O que é preciso saber para desenvolver? <ul><li>Utilizar uma ferramenta de Controle de Versão </li></ul>
  18. 18. O que é preciso saber para desenvolver? <ul><li>Definição das pastas do projeto </li></ul><ul><li>Baixar a última versão do YUI e das outras ferramentas que utilizará no projeto (smarty, nusoap e etc) </li></ul>
  19. 19. Arquitetura Aplicação Web
  20. 20. Arquitetura Aplicação Web
  21. 21. Camada de Apresentação <ul><li>Definição do Mockup </li></ul><ul><ul><li>Uso de templates engine (SMARTY) para gerenciar a saída XHTML </li></ul></ul><ul><ul><li>Definição do container de navegação </li></ul></ul><ul><ul><li>Web Standards </li></ul></ul>
  22. 22. Como preparar sua aplicação para o YUI <ul><li>Definir o escopo do recurso a ser utilizado na interface </li></ul><ul><li>Loader </li></ul><ul><ul><ul><li>Dificuldade em trabalhar com aplicações complexas que utilizam componente DataTable </li></ul></ul></ul><ul><li>Event </li></ul><ul><ul><ul><li>Fácil implementar com componente DataTable </li></ul></ul></ul>
  23. 23. Camada de Negócios <ul><li>Programação Orientada a Objeto </li></ul><ul><li>Utilizar conceito Container </li></ul><ul><li>Devo utilizar um framework como Zend Framework, CakePHP, etc? </li></ul>
  24. 24. Desenvolvimento da aplicação <ul><li>Bootstrap </li></ul><ul><ul><li>Disponibiliza os recursos do sistema </li></ul></ul><ul><ul><li>Carrega as definições iniciais da aplicação </li></ul></ul><ul><li>Container </li></ul><ul><ul><li>Faz check de segurança </li></ul></ul><ul><ul><li>Checa Identificação do Usuário </li></ul></ul><ul><ul><li>Gerencia requisições e permissões de usuário </li></ul></ul>
  25. 25. Internacionalização com YUI <ul><li>YUI não contempla de um componente para internacionalização </li></ul><ul><li>Como fazer? </li></ul><ul><ul><li>Utilize seu componente PHP de i18n </li></ul></ul><ul><ul><ul><li>Zend_translate </li></ul></ul></ul><ul><ul><ul><li>Smarty Translate </li></ul></ul></ul><ul><ul><ul><li>Solução caseira </li></ul></ul></ul><ul><ul><ul><ul><li>Navegador defini idioma padrão, arquivo de idioma </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Componente que traduz para JavaScript </li></ul></ul></ul></ul>
  26. 26. YUI e carga de dados <ul><li>Componente DataSource </li></ul><ul><ul><li>Tipo de dados </li></ul></ul><ul><ul><ul><li>HTML TABLE </li></ul></ul></ul><ul><ul><ul><li>TEXT </li></ul></ul></ul><ul><ul><ul><li>JSON </li></ul></ul></ul><ul><ul><ul><li>JSARRAY </li></ul></ul></ul><ul><ul><ul><li>XML </li></ul></ul></ul><ul><li>Siga o padrão de cada tipo de dado ! </li></ul>
  27. 27. YUI e carga de dados <ul><li>Definição de campos </li></ul><ul><ul><li>Tipo de Campos </li></ul></ul><ul><li>Meta Campos </li></ul><ul><li>Lista de Resultados </li></ul>
  28. 28. Lógica de acesso a BD <ul><li>Modulo de Conexão com a base de Dados ISIS (WXIS-MODULES) </li></ul>
  29. 29. Saída de Dados
  30. 30. Para aonde caminha YUI <ul><li>YUI 3.X </li></ul><ul><ul><li>Mais Leves (menos K-weight sobre o core da página para a maioria dos usos) </li></ul></ul><ul><ul><li>Mais rápido (com menos requisições http, menos escrita de código e compilação, um código mais eficiente) </li></ul></ul><ul><ul><li>Mais consistente (nomenclatura comum, assinaturas de eventos, widget e toda a APIs da biblioteca) </li></ul></ul><ul><ul><li>mais potentes (fazer mais com menos implementação código) </li></ul></ul><ul><ul><li>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) </li></ul></ul><ul><li>Não Compativel com YUI 2.X </li></ul><ul><ul><li>Migração Paralela </li></ul></ul>
  31. 31. Caso de Uso
  32. 32. Caso de Uso
  33. 33. Caso de Uso
  34. 34. Caso de Uso
  35. 35. Agradecimentos <ul><li>ONU/OMS/OPAS/BIREME </li></ul><ul><li>CONAPHP </li></ul><ul><li>CONISLI </li></ul><ul><li>Manoel Lemos </li></ul><ul><li>Yahoo – YUI Team </li></ul>
  36. 36. <ul><li>Domingos Teruel </li></ul><ul><li>[email_address] </li></ul><ul><li>Bruno Neófiti de Andrade </li></ul><ul><li>[email_address] </li></ul>

×