desenvolvendo aplicações com php, ajax e yui!
Post on 24-May-2015
2.282 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related