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
Sobre o minicurso
- Este minicurso está programado para ser realizado em 7 horas e 30 minutos, distribuídos da seguinte forma
- 05 de maio - Apresentação sobre Ajax e Programação básica de JavaScript
- 06 de maio - Mão na Massa - Dando interatividade ao Sistema de Blog
- 07 de maio - Mão na Massa - Finalizando e ajustando o blog
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
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 - (Sugestão) 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:
- PHP
- Java
- Ruby
- Python
- ASP
- TCL
- Perl
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 - Programando em Camadas
- Divisão do Projeto em Camadas
[any material that should appear in print but not on the slide]
Mão na Massa
Vamos dar uma atenção especial ao JavaScript
...afinal, o que o cliente recebe é JavaScript
JavaScript - Introdução
- Javascript é uma linguagem interpretada e roda no cliente (browser)
- Criada pela Netscape inicialmente para fazer validações client-side nos formulários HTML
- O também conhecido Jscript é uma mutação (para no dizer aberração) do JavaScript criado pela Microsoft
- A intenção do JavaScript é prover maior interatividade entre o sistema e o usuário, pois possibilita a alteração das propriedades da página dinamicamente sem efetuar acesso ao servidor.
[any material that should appear in print but not on the slide]
JavaScript - Sintaxe
- Todo comando javascript dentro do HTML é delimitado pela tag <script>
-
<script>
alert("Janela do Javascript")
<script>
- Vamos ser mais inteligentes, colocaremos todo código JS em um arquivo isolado com extensão .js
<script src="comportamento.js" type="text/javascript"></script>
[any material that should appear in print but not on the slide]
Validação de Formulários
[any material that should appear in print but not on the slide]
Validação de formulários
- Vamos criar uma função validaFormulario() no arquivo comportamento.js
// Incio de Função
function validaFormulario() {
// contedo da função
}- Para pegar a propriedade do formulário
-
document.nomeDoFormulario.nomeDoCampo.propriedade
- No nosso formulário para pegar o valor do input de contato teremos:
-
document.formulario.contato.value
Validação de Formulários
-
function validaFormulario() {
if(document.formulario.contato.value=="")
{
alert("Campo contato não pode ficar em branco")
document.formulario.contato.focus() // foca no campo
document.formulario.contato.style.border = "1px solid red"
return false
}
return true
}
- Agora só adicionar o envento onsubmit na tag de formulário e pimba!
-
<form name="formulario" action="exibeServico.php" method="post" onsubmit="return validaFormulario()">
Validação de Formulários
-
Resultado
Exercício 1
- Valide todos os campos do formulário anterior via javascript
Dúvidas? Fim do primeiro dia
Ops, algumas observações!
Produtividade está na moda!
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]
Cenas dos próximos capítulos
- Dando interatividade a um blog já pronto
- Frameworks em JS
- Mercado, Web2.0 e Ajax
[any material that should appear in print but not on the slide]
