Slides

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

Description
1. Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface Domingos Teruel Bruno Neófiti de Andrade 2. Experiência Profissional <ul><li>Tecnólogo…
Categories
Published
of 36
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Related Documents
Share
Transcript
  • 1. Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface Domingos Teruel Bruno Neófiti de Andrade
  • 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. 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. 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. 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. 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. Quem esta usando PHP
  • 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. Por quê AJAX? <ul><li>O ciclo tradicional </li></ul>
  • 10. Por quê AJAX? <ul><li>O ciclo AJAX </li></ul>
  • 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. Quem esta usando AJAX com YUI
  • 13. Outros frameworks JS
  • 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. 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. 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. O que é preciso saber para desenvolver? <ul><li>Utilizar uma ferramenta de Controle de Versão </li></ul>
  • 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. Arquitetura Aplicação Web
  • 20. Arquitetura Aplicação Web
  • 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. 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. 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. 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. 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. 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. 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. Lógica de acesso a BD <ul><li>Modulo de Conexão com a base de Dados ISIS (WXIS-MODULES) </li></ul>
  • 29. Saída de Dados
  • 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. Caso de Uso
  • 32. Caso de Uso
  • 33. Caso de Uso
  • 34. Caso de Uso
  • 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. <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>
  • We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks