Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface
-
Upload
domingos-teruel -
Category
Technology
-
view
3.922 -
download
0
description
Transcript of Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface
![Page 1: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/1.jpg)
Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User
Interface
Domingos Teruel
Bruno Neófiti de Andrade
![Page 2: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/2.jpg)
Experiência Profissional
• Tecnólogo em computaçãocursando 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
![Page 3: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/3.jpg)
Experiência Profissional
• Desenvolvedor de SoftwareONU/OMS/OPAS/Bireme
• Engenheiro da Computaçãocursando Pós Engenharia de
Software
• Trabalho com PHP e SL
desde 2000
![Page 4: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/4.jpg)
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 !!
![Page 5: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/5.jpg)
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
![Page 6: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/6.jpg)
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
![Page 7: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/7.jpg)
Quem esta usando PHP
![Page 8: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/8.jpg)
Por quê AJAX?
• Ajax quer dizer: Asynchronous Javascript and XML
• Mas também pode ser:– Asynchronous Javascript and
+ XHTML+ JSON+ CSS
![Page 9: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/9.jpg)
Por quê AJAX?
• O ciclo tradicional
![Page 10: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/10.jpg)
Por quê AJAX?
• O ciclo AJAX
![Page 11: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/11.jpg)
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
![Page 12: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/12.jpg)
Quem esta usando AJAX com YUI
![Page 13: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/13.jpg)
Outros frameworks JS
![Page 14: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/14.jpg)
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
![Page 15: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/15.jpg)
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.
![Page 16: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/16.jpg)
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
![Page 17: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/17.jpg)
O que é preciso saber para desenvolver?
• Utilizar uma ferramenta de Controle de Versão
![Page 18: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/18.jpg)
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)
![Page 19: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/19.jpg)
Arquitetura Aplicação Web
![Page 20: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/20.jpg)
Arquitetura Aplicação Web
![Page 21: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/21.jpg)
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
![Page 22: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/22.jpg)
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
![Page 23: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/23.jpg)
Camada de Negócios
• Programação Orientada a Objeto
• Utilizar conceito Container
• Devo utilizar um framework como Zend Framework, CakePHP, etc?
![Page 24: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/24.jpg)
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
![Page 25: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/25.jpg)
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
![Page 26: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/26.jpg)
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 !
![Page 27: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/27.jpg)
YUI e carga de dados
• Definição de campos– Tipo de Campos
• Meta Campos• Lista de Resultados
![Page 28: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/28.jpg)
Lógica de acesso a BD
• Modulo de Conexão com a base de Dados ISIS (WXIS-MODULES)
![Page 29: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/29.jpg)
Saída de Dados
![Page 30: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/30.jpg)
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
![Page 31: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/31.jpg)
Caso de Uso
![Page 32: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/32.jpg)
Caso de Uso
![Page 33: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/33.jpg)
Caso de Uso
![Page 34: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/34.jpg)
Caso de Uso
![Page 35: Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface](https://reader031.fdocumentos.com/reader031/viewer/2022012916/5482ffcdb4af9f98348b456c/html5/thumbnails/35.jpg)
Agradecimentos
• ONU/OMS/OPAS/BIREME• CONAPHP• CONISLI• Manoel Lemos• Yahoo – YUI Team