Successfully reported this slideshow.
Desenvolvendo aplicações PHP
com, AJAX e Y!UI Yahoo! User
          Interface

     Domingos Teruel
       Analista de Sof...
Experiência Profissional
•   Tecnólogo em Processamento de dados,
    especialista em Interfaces de sistemas;

•   Atua no...
Quem esta na Platéia?
Quem esta na Platéia?
Quem esta na Platéia?

• Fãs de Software Livre ?
Quem esta na Platéia?

• Fãs de Software Livre ?
• Estudantes ?
Quem esta na Platéia?

• Fãs de Software Livre ?
• Estudantes ?
• Desenvolvedores Avançado de PHP ?
Quem esta na Platéia?

•   Fãs de Software Livre ?
•   Estudantes ?
•   Desenvolvedores Avançado de PHP ?
•   Desenvolvedo...
Quem esta na Platéia?

•   Fãs de Software Livre ?
•   Estudantes ?
•   Desenvolvedores Avançado de PHP ?
•   Desenvolvedo...
Quem esta na Platéia?

•   Fãs de Software Livre ?
•   Estudantes ?
•   Desenvolvedores Avançado de PHP ?
•   Desenvolvedo...
Linha da apresentação

•   Porque utilizar PHP no meu projeto
•   Utilizando Ajax com PHP
•   Porque YUI
•   Desenvolvimen...
Porque usar PHP se existe o
    ASP, JSP, Python, .NET… ?

•   Excelente Custo/Benefício
•   Perfomance / Robustez / Escal...
Quem esta usando PHP
Por que de um Framework?
Segundo a Wikipedia, um Framework é:

"uma abstração onde um conjunto comum de
  código fornece f...
Por que de um Framework?
• Simplificação
• Agilidade / Rapidez
• Padrões de desenvolvimento / Design
  Pattern
• Organizaç...
Por quê AJAX?
• Ajax quer dizer: Asynchronous Javascript
  and XML

• Mas também pode ser:
  – Asynchronous Javascript and...
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ág...
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...
Porque YUI
• Excelente documentação
• Grande número de desenvolvedores,
  ótimos Use cases
• Desenvolvimento continuo da a...
O que é preciso saber para
          desenvolver?
• Para desenvolver uma aplicação que utilize YUI
  é recomendado bom con...
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
...
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
  – Def...
Como preparar sua aplicação para
            o YUI
• Definir o escopo do recurso a ser utilizado
  na interface
• Loader
 ...
Camada de Negócios

• Programação Orientada a Objeto
• Utilizar conceito Container
• Devo utilizar um framework como Zend
...
Desenvolvimento da aplicação

• Bootstrap
  – Disponibiliza os recursos do sistema
  – Carrega as definições iniciais da a...
Internacionalização com YUI
• YUI não contempla de um componente
  para internacionalização
• Como fazer?
  – Utilize seu ...
YUI e carga de dados
YUI e carga de dados
• Componente DataSource
  – Tipo de dados
    •   HTML TABLE
    •   TEXT
    •   JSON
    •   JSARRA...
YUI e carga de dados
• Componente DataSource
  – Tipo de dados
    •   HTML TABLE
    •   TEXT
    •   JSON
    •   JSARRA...
YUI e carga de dados
• Componente DataSource
  – Tipo de dados
    •   HTML TABLE
    •   TEXT
    •   JSON
    •   JSARRA...
YUI e carga de dados
• Definição de campos
  – Tipo de Campos




• Meta Campos
• Lista de Resultados
Saída de Dados
Saída de Dados
Saída de Dados
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)
  – Ma...
Caso de Uso
Caso de Uso
Caso de Uso
Caso de Uso
Agradecimentos
• LigthComm Tecnologia
• PHP-MG
• Yahoo – YUI Team
Dúvidas e perguntas
Obrigado!!!
• http://twitter.com/mingomax
• http://blog.dteruel.com.br
• http://meadiciona.com/mingomax




              ...
Upcoming SlideShare
Loading in …5
×

Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface

1,558 views

Published on

Palestra ministrada em outubro de 2009 no 2º Encontro de usuário PHP de Minas Gerais

Published in: Technology
  • Be the first to comment

Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface

  1. 1. Desenvolvendo aplicações PHP com, AJAX e Y!UI Yahoo! User Interface Domingos Teruel Analista de Software
  2. 2. Experiência Profissional • Tecnólogo em Processamento de dados, especialista em Interfaces de sistemas; • Atua no desenvolvimento e implementação de sistemas web com software livre; • Desenvolvedor PHP desde 1999; • Analista de software de ITI em Lightcomm Tecnologia e Serviços • Consultor em tecnologias móvel (especialista em ambiente Blackberry)
  3. 3. Quem esta na Platéia?
  4. 4. Quem esta na Platéia?
  5. 5. Quem esta na Platéia? • Fãs de Software Livre ?
  6. 6. Quem esta na Platéia? • Fãs de Software Livre ? • Estudantes ?
  7. 7. Quem esta na Platéia? • Fãs de Software Livre ? • Estudantes ? • Desenvolvedores Avançado de PHP ?
  8. 8. Quem esta na Platéia? • Fãs de Software Livre ? • Estudantes ? • Desenvolvedores Avançado de PHP ? • Desenvolvedores de outras Linguagens ?
  9. 9. 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 !
  10. 10. 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 !!
  11. 11. 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
  12. 12. 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
  13. 13. Quem esta usando PHP
  14. 14. Por que de um Framework? Segundo a Wikipedia, um Framework é: "uma abstração onde um conjunto comum de código fornece funcionalidades genérica que podem ser seletivamente sobrepostas ou especializadas pelo utilizador do código fornecendo uma funcionalidade específica. "
  15. 15. Por que de um Framework? • Simplificação • Agilidade / Rapidez • Padrões de desenvolvimento / Design Pattern • Organização • Menos código • Conjunto de utilitários
  16. 16. Por quê AJAX? • Ajax quer dizer: Asynchronous Javascript and XML • Mas também pode ser: – Asynchronous Javascript and + XHTML + JSON + CSS
  17. 17. Por quê AJAX? • O ciclo tradicional
  18. 18. Por quê AJAX? • O ciclo AJAX
  19. 19. 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
  20. 20. Quem esta usando AJAX com YUI
  21. 21. Outros frameworks JS
  22. 22. 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
  23. 23. 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.
  24. 24. 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
  25. 25. O que é preciso saber para desenvolver? • Utilizar uma ferramenta de Controle de Versão
  26. 26. 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)
  27. 27. Arquitetura Aplicação Web
  28. 28. Arquitetura Aplicação Web
  29. 29. 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
  30. 30. 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
  31. 31. Camada de Negócios • Programação Orientada a Objeto • Utilizar conceito Container • Devo utilizar um framework como Zend Framework, CakePHP, etc?
  32. 32. 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
  33. 33. 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
  34. 34. YUI e carga de dados
  35. 35. YUI e carga de dados • Componente DataSource – Tipo de dados • HTML TABLE • TEXT • JSON • JSARRAY • XML
  36. 36. 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 !
  37. 37. 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 !
  38. 38. YUI e carga de dados • Definição de campos – Tipo de Campos • Meta Campos • Lista de Resultados
  39. 39. Saída de Dados
  40. 40. Saída de Dados
  41. 41. Saída de Dados
  42. 42. Saída de Dados
  43. 43. 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
  44. 44. Caso de Uso
  45. 45. Caso de Uso
  46. 46. Caso de Uso
  47. 47. Caso de Uso
  48. 48. Agradecimentos • LigthComm Tecnologia • PHP-MG • Yahoo – YUI Team
  49. 49. Dúvidas e perguntas
  50. 50. Obrigado!!! • http://twitter.com/mingomax • http://blog.dteruel.com.br • http://meadiciona.com/mingomax 37

×