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

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

Domingos Teruel
Analista de Software

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)

Quem esta na Platéia?

• Fãs de Software Livre ?


• Estudantes ?


• Estudantes ?
• Desenvolvedores Avançado de PHP ?


• Estudantes ?
• Desenvolvedores de outras Linguagens ?


• Estudantes ?
• Todas as opções acima !


• Estudantes ?
• Todas as opções acima !
• Nenhuma das outras opções !!

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

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

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

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

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

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

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.

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

desenvolver?
• Utilizar uma ferramenta de Controle de
Versão

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)

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

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

Camada de Negócios

• Programação Orientada a Objeto
• Utilizar conceito Container
• Devo utilizar um framework como Zend
Framework, CakePHP, etc?

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

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

YUI e carga de dados
• Componente DataSource
– Tipo de dados
• HTML TABLE
• TEXT
• JSON
• JSARRAY
• XML

• Componente DataSource
– Tipo de dados
• HTML TABLE
• TEXT
• JSON
• JSARRAY
• XML

Siga o padrão de cada tipo de dado !

• Definição de campos
– Tipo de Campos

• Meta Campos
• Lista de Resultados

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

Agradecimentos
• LigthComm Tecnologia
• PHP-MG
• Yahoo – YUI Team

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

37

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

Mais conteúdo relacionado

Mais procurados

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

Mais de Domingos Teruel

Último

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