Programação WEB com AJAX
Belo Horizonte , Minas Gerais Brasil
(Tecle F11 para visualização em tela cheia. F11 novamente volta ao modo normal)
Currículo do Palestrante
- Marcelo Linhares trabalha com desenvolvimento WEB há 5 anos, atualmente é sócio da Agência Detalhes onde gerencia e mantém projetos de internet e multimídia, além de ministrar cursos e treinamentos, também é Técnico de Desenvolvimento WEB no Instituto de Informática da PUC Minas.
- Mais...
- marcelolinhares.com / site pessoal do profissional, observações e pitacos sobre tecnologia
- agenciadetalhes.com.br / Empresa
Antes de tudo, esqueça o Hype !
Concentre-se nos benefícios da tecnologia
Problema das aplicações WEB tradicionais
Problemas das aplicações WEB tradicionais
- As aplicações WEB tradicionais caracterizam-se por não oferecer os recursos mais utilizados nas aplicações desktop
- Ausência de dragn-drop (arrastar e soltar)
- Interações mais lentas (I/O com delay de tempo - processamento remoto)
- Interação interrompida para cada I/O de dados
- Interfaces variadas (cada programador re-inventa nos elementos de navegação )
Tendências
Tendências
- É fato que cada vez mais as aplicações estão migrando (ou se integrando) para a platorma Web
- Arquitetura Orientado a Serviços - SOA
- WEB 2.0
- Acessibilidade
Exemplos
- MS Office X Google Docs
- GMail/YahooMail x OutlookExpress
Tendências
- É fato que cada vez mais as aplicações estão migrando (ou se integrando) para a platorma Web
- Arquitetura Orientado a Serviços - SOA
- WEB 2.0
- Acessibilidade
Desafios
- Tornar as aplicações WEB tão fáceis de usar quanto as aplicações desktop, os seguintes cenários são favoráveis:
- Melhora cada vez mais da banda de acesso a internet
- Computadores clientes e servidores mais potentes
Solução: Ajax?
Mas Afinal, o que é AJAX?
- Defini-se como Asynchronous JavaScript and XML, é uma técnica para criar interfaces WEB mais interativas
- Muitos desenvolvedores já programavam em AJAX antes do surgimento do termo, comumente denominava-se método HTTPRequest - devido ao objeto do JS
- O termo AJAX foi criado por Jesse James Garret em fevereiro de 2005, e seu mérito principal foi ter popularizado esta técnica, além de conseguir simplificar o seu entendimento para o cliente
AJAX
-
AJAX Como Funciona? Visão do Desenvolvedor
AJAX
-
AJAX Como Funciona? Visão do Cliente
Navegadores carregam a aplicação JS,
não apenas o conteúdo
Navegador lê os dados,
a aplicação trata a sua exibição.
Transferência de Dados
transparente para o Usuário
Vantagens
- Aplicações mais ágeis
- Padrão aberto, não precisa de tecnologias proprietárias para o seu desenvolvimento
- Melhora a experiência do usuário (se bem aplicado é claro)
- Aplicações WEB semelhantes as aplicações Desktop (dragn-drop, autocomplete)
Menor consumo de banda na aplicacão
Vantagens - Aplicações mais ágeis
Vantagens - Aplicações mais ágeis
Desvantagens
- Cuidado! se mal planejado, AJAX pode dar uma dor de cabeça para o usuário e desenvolvedor
- Não dar feedback instantâneo após o click
- Usuário não pode voltar, nem adicionar página nos favoritos
- Sistemas inacessíveis
- Segurança nas aplicações
- Todos os possíveis problemas acima podem ser corrigidos, depende do programador!
Desvantagens - Inacessível
- Solução: Javascript Não Obstrutivo
Desvantagens - Usabilidade Comprometida
- A usabilidade do site é comprometida!
AJAX - Onde Utilizar e Quando Utilizar
- Interações levadas por formulários.
- Navegação em árvore com grande hierarquia
- Comunicação usuário-a-usuário rápida (instant messengers, chats, fóruns)
- Votação, caixas Sim/Não, envio de avaliações
- Sugestão de textos entrados freqentemente / Autocompletar
- DragnDrop de objetos com ações
AJAX - Exemplos
- Writely - http://www.writely.com - Editor de texto on-line
- Meebo - http://www4.meebo.com/ - Serviço de mensagens instantânea
- Microsoft Star.com - http://www.start.com/ - Portal da Microsoft
- Google Suggest http://www.google.com/webhp?complete=1&hl=en ? Motor de busca que fornece sugestões
- Google Maps - http://maps.google.com/ - Serviço de mapas do Google
- SQL Designer - http://ondras.praha12.net/sql/demo/ - Modelador de Banco de Dados
- NetVibes - http://www.netvibes.com/ - Página Pessoal
Tecnologias Envolvidas
Tecnologias Envolvidas
- As tecnologias e linguagens de programacão/marcação envolvidas são:
- xHTML e CSS
- DOM Document Object Model
- XML e JSON
- JavaScript
- Linguagem Server-side
AJAX - xHTML e CSS
Web standards e CSS. Sites preparados conforme os padrões da w3c (World Wide Web Consortium), utlizando xHTML para o conteúdo e CSS para o comportamento visual
AJAX - DOM
DOM (Document Object Model).
Interface para acessar e modificar a estrutura de um documento XML/html, para que a programação encontre o que precisa dentro de uma página sem problemas.
AJAX - Mais sobre DOM
AJAX - XML
XML (Extensible Markup Language). Um padrão de linguagem para tornar mais fácil a transferência de dados entre aplicações.
AJAX - JSON
"JavaScript Object Notation", é um formato para a transferência de dados entre aplicações.
- Tem a vantagem de ser mais leve que o XML
- Representação do Objeto Aluno - Atributos: nome, e-mail, curso
-
{
"nome":"Marcelo Carvalho Linhares",
"email":"marcelo@agenciadetalhes.com.br",
"curso":"sistemas de informação"
}
AJAX - JavaScript
Linguagem Client-Side responsável por agilizar interações entre o usuário e a página, baseado no padrão EcmaScript.
AJAX - Linguagem Server-side
Linguagem de programação que é executada no servidor, exemplos:
Programando em Camadas
AJAX - Programação em Camadas
- Uma boa prática no desenvolvimento de interfaces WEB é dividí-la em camadas, separando em camadas de Conteúdo (xHTML), Formatação Visual (CSS) e Comportamento (JavaScript).
- Dividir em camadas melhora a produtividade na construção e manutenção da interface pois isola na folha de estilo toda a informação referente a formatação visual da página e deixa o código (x)HTML limpo e semântico, tornando-o mais legível e compatível com outros dispositivos e navegadores, e por fim o arquivo Javascript manipula todos os comportamentos com propósito de melhorar a experiência do usuário.
[any material that should appear in print but not on the slide]
AJAX -Frameworks
[any material that should appear in print but not on the slide]
Cuidado ao utlizar frameworks,
tenha sempre o controle da situação!
Ferramentas de Trabalho
AJAX - Ferramentas
- Que fique claro o desenvolvedor não é obrigado a utilizar nenhuma dessas ferramentas para desenvolver em AJAX, estas ferramentas são apenas SUGESTÕES para auxiliar no desenvolvimento
[any material that should appear in print but not on the slide]
AJAX - Firefox
- Firefox não é apenas um navegador, ele é um poderoso ambiente de desenvolvimento
- Console de Erros eficiente (Nativo)
- DOM Inspector - verifica Árvore de Objetos DOM (Nativo)
- Extensão FireBug para Depurar Scripts/CSS/HTML e verificar Árvore de Objetos DOM
- Extensão WebDeveloper ( CSS/ JavaScript / xHTML / Validadores )
[any material that should appear in print but not on the slide]
AJAX - Eclipse
- Eficiente plugin para trabalhar com HTML/CSS/JS e AJAX (Aptana)
- Eficiente plugin para PHP (PHPEclipse)
- Peca por ser muito grande e consumir muita memória
[any material that should appear in print but not on the slide]
Quero saber mais, como faço?
- Não se esqueça, o Google é seu amigo ;-);
- Participe de listas de discussão, blogs, fóruns, interaja;
- Já existem alguns livros na área ;
- Qualquer dúvida, beba direto da fonte W3C
[any material that should appear in print but not on the slide]
