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

Interface

Domingos TeruelBruno Neófiti de Andrade

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

Experiência Profissional

Desenvolvedor de SoftwareONU/OMS/OPAS/BIREME

Engenheiro da Computaçãocursando Pós Engenharia de

SoftwareTrabalho com PHP e SL

desde 2000

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

Linha da apresentação

Porque utilizar PHP no meu projetoUtilizando Ajax com PHPPorque YUIDesenvolvimento de um ProjetoCamada de Apresentação com YUICamada de Negócios e Modelo

Porque usar PHP se existe o ASP, JSP, Python, .NET… ?

Excelente Custo/BenefícioPerfomance / Robustez / EscalabilidadeCurva de aprendizagem curtaOpen Source / Software livreMulti-plataformasInteroperabilidadeGrande Comunidade ativa

Quem esta usando PHP

Por quê AJAX?

Ajax quer dizer: Asynchronous Javascript and XML

Mas também pode ser:Asynchronous Javascript and

+ XHTML+ JSON+ CSS

Por quê AJAX?

O ciclo tradicional

Por quê AJAX?

O ciclo AJAX

Por quê AJAX?

O que muda para o usuárioUso 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

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 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 cross-browser. Outras, como

o Calendário, apresenta widgets que pode ser representados em sua página com um visual(design)

padrão.”

YUI Team

Porque YUI

Excelente documentaçãoGrande número de desenvolvedores, ótimos Use casesDesenvolvimento continuo da aplicação pelo Yahoo e comunidadeA Biblioteca YUI é livre, está sob a licença BSD que permite seu uso comercial e não comercial.

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: FirefoxAdd-ons: FirebugHtml ValidatorTamper dataWeb DeveloperYSlow

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 projetoBaixar a última versão do YUI e das outras ferramentas que utilizará no projeto (smarty, nusoap e etc)

Arquitetura Aplicação Web

Arquitetura Aplicação Web

Camada de Apresentação

Definição do MockupUso de templates engine (SMARTY) para gerenciar a saída XHTMLDefinição do container de navegaçãoWeb Standards

Como preparar sua aplicação para o YUI

Definir o escopo do recurso a ser utilizado na interfaceLoaderDificuldade em trabalhar com aplicações complexas que utilizam componente DataTable

EventFácil implementar com componente DataTable

Camada de Negócios

Programação Orientada a ObjetoUtilizar conceito ContainerDevo utilizar um framework como Zend Framework, CakePHP, etc?

Desenvolvimento da aplicação

BootstrapDisponibiliza os recursos do sistemaCarrega as definições iniciais da aplicação

ContainerFaz check de segurançaCheca Identificação do UsuárioGerencia requisições e permissões de usuário

Internacionalização com YUI

YUI não contempla de um componente para internacionalizaçãoComo fazer?Utilize seu componente PHP de i18nZend_translateSmarty TranslateSolução caseira Navegador defini idioma padrão, arquivo de idiomaComponente que traduz para JavaScript

YUI e carga de dados

Componente DataSourceTipo de dadosHTML TABLETEXTJSONJSARRAYXML

Siga o padrão de cada tipo de dado !

YUI e carga de dados

Definição de camposTipo de Campos

Meta CamposLista de Resultados

Lógica de acesso a BD

Modulo de Conexão com a base de Dados ISIS (WXIS-MODULES)

Saída de Dados

Para aonde caminha YUI

YUI 3.XMais 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.XMigração Paralela

Caso de Uso

Caso de Uso

Caso de Uso

Caso de Uso

Dúvidas e afins

Agradecimentos

ONU/OMS/OPAS/BIREMECONAPHPCONISLIManoel LemosYahoo – YUI Team

Referências

http://developers.yahoo.com/yuihttp://www.yuiblog.comhttp://devzone.zend.comhttp://www.bireme.orghttp://blog.davglass.com/

Obrigado!

Domingos Teruelwebmaster@dteruel.com.br

Bruno Neófiti de Andradebrunoneofiti@hotmail.com