Desenvolvendo aplicações PHP com, AJAX e Y!UI Yahoo! User Interface

1. Desenvolvendo aplicações PHP com, AJAX e Y!UI Yahoo! User Interface Domingos Teruel Analista de Software

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

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

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

6. Quem esta usando PHP

7. 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 ouespecializadas pelo utilizador do código fornecendo uma funcionalidade específica. "

8. Por que de um Framework? • Simplificação • Agilidade / Rapidez • Padrões de desenvolvimento / Design Pattern • Organização • Menos código • Conjunto de utilitários

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

10. Por quê AJAX? • O ciclo tradicional

11. Por quê AJAX? • O ciclo AJAX

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

13. Quem esta usando AJAX com YUI

14. Outros frameworks JS

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

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

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

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

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

20. Arquitetura Aplicação Web

21. Arquitetura Aplicação Web

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

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

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

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

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

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

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

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. Agradecimentos • LigthComm Tecnologia • PHP-MG • Yahoo – YUI Team

36. Dúvidas e perguntas

37. Obrigado!!! • http://twitter.com/mingomax • http://blog.dteruel.com.br • http://meadiciona.com/mingomax 37