Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
-
Upload
marcelo-linhares -
Category
Technology
-
view
5.151 -
download
1
Transcript of Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
minicurso
Desenvolvimento Web com Ajax
Marcelo Linhares UOL
Quem vos fala...
- 5 anos de experincia com webdevelopment
- Webmaster @UOL S/A
- marcelolinhares.com // pessoal
- algumas brincadeiras:
> vagasem.info // oportunidades em TI
> marcelolinhares.com/bolsa // gesto de portflio
online
Sobre o minicurso...
Apresentar os principais conceitos de construo de interfaces
ricas para web utilizando Ajax.....
...em apenas 3 horas!
?
Agenda
- Um pouco de histria da WWW
- WWW hoje! (vide Web 2.0 ou bl,bl,bl,bl...)
- Interfaces ricas
- Ajax?
- Javascript, CSS, EcmaScript, xHTML...
- Hora do Caf
- Mo na massa...
- Brindes
Um detalhe...
Perguntas, dvidas, sugestes, e comentrios so SEMPRE bem vindos, a sua participao no mini-curso fundamental
Um pouco de histria...
- Um cara legal chamado Tim Berners Lee criou a WWW em 1991
- Em 1993 o mesmo nerd criou o HTML
- Ainda em 93, surge o Mosaic
Mosaic Browser (nostalgia)
Este o cara....
Coleo de documentos
- A Web era nada mais que uma coleo de documentos hipertexto interligadas entre si
- Web como plataforma? Ainda no...
10 anos depois
10 anos depois
- Estouro da bolha, - Espuelas enriqueceu ;-)- A AOL Brasil fracassou!- O Google apareceu- Banda Larga, SOA, Web 2.0....
Enfim....
10 anos depois, a internet se reiventou...
A modinha da Web2.0
- Sem especulao, internet realmente comeou a dar dinheiro !- Usurio criando contedo- Interfaces mais ricas- Internet como plataforma
no ponto que queria chegar...
Interfaces mais ricas
Por um momento, esquea...
Python, C++, C-Ansi, JSP, Java,Smaltak, PHP, ASP, C#, Ruby, TCL,Perl, Pascal, Zope, Plone, ABAP, AWK,Lua, Cobol, Assembly, Haskell, Prolog,Cold-Fusion, Ada, Fortran, Clipper,BASIC, Cach, dBase, Shell-Script..
Isto noimporta parao usurio!
no acredita em mim...
o que distingue uma empresa de outra num mesmo segmento de atuao? Eu afirmo a vocs que o que diferencia as empresas no sculo XXI a ergonomia.
Jorge Steffens Presidente DataSul
continua no acreditando....
- Orkut foi escrito em .NET- WikiPedia, FaceBook foi escrito em PHP- Plataforma base do Google essencialmente Java e Python - Twitter feito em Ruby pergunto: Esta informao relevante para voc?
Uma plataforma chamada Internet!
uma plataforma...??
- SOA - Mashups- Acessibilidade- Computao Ubqua- Cloud Computing
uma plataforma...??
- GMail/YahooMail x Outlook Express- GoogleDocs x MsOffice- Salesforce.com x RM Corpore
uma plataforma...??
- Novo modelo de licenciamento de software:
- ASP (Application Service Provider)
Futuro? no..presente!
vamos ser sinceros...
tudo isto seria possvel, se ainda estivssemos usando isto?
E se nossa conexo dependesse do famigerado kit multmdia?
Isto s foi possvel porqu:
A Lei deMoore funcionou!
Perguntas ???
5 minutos para o caf....
Mas o minicurso no de AJAX?
Onde Ajax entra nesta histria?
conceituando...
Uma tcnica para criao de interfaces web mais ricas
Ou melhor... Asynchronous JavaScript And XML
conceituando...??
- Muitos desenvolvedores j programavam usando Ajax
- Termo criado por James Garret em 2005
- Mrito? Ficou mais fcil vender Ajax para os clientes!
como funciona?...cliente
como funciona?...desenvolvedor
Navegadorescarregam no apenas o contedo!
Navegador l osdados, a aplicaotrata a sua exibio.
Transferncia dedados transparentepara o Usurio
Vantagens?
Se bem utilizado, melhora muito a experincia do usurio!
auto-complete...
Feedbacks mais rpidos...
Feedbacks mais rpidos...
dragn-drop...
dragn-drop...
CUIDADO!
Nem tudo so flores
se mal utilizado, ajax pode dar dor de cabea para o usurio!
No dar feedback aps a ao
Usurio no pode voltar, nem adicionar pgina nos favoritos
Indexabilidade comprometida
Inacessvel
Tudo isto pode ser resolvido
claro, basta apenas o desenvolvedor ser menos preguioso!
Tecnologias envolvidas
tecnologias
- xHTML e CSS- DOM Document Object Model- XML e JSON- Javascript- Linguagem server-side
XHTML e CSS
xHTML e CSS
- Web standards e CSS. Sites preparados conforme os padres da w3c (World Wide Web Consortium), utlizando xHTML para o contedo e CSS para o comportamento visual
xHTML
- linguagem de marcao (bh..)
- evoluo da HTML...
- Objetivo? Aumentar a acessibilidade
DOM
DOM
- Document Object Model- Interface para acessar/modificar a
estrutura de um documento XML/xHTML- exemplo?
document.getElementById(curso-sg)
DOM
XML e JSON
XML
XML (Extensible Markup Language). Um padro de linguagem para tornar mais fcil a transferncia de dados entre aplicaes.
XML
Jos16Analista de SistemasZez do Pagode
JSON
"JavaScript Object Notation", um formato para a transferncia de dados entre aplicaes.
JSON
- Simples- Tem a vantagem de ser mais leve que o XML- Normalmente utilizado quando os dados trafegados entre as aplicaes so crticos
JSON
{"nome":"Jos","idade":"16","emprego":"Analista de Sistemas",apelido:Zez do pagode}
JSON
{"nome":"Jos","idade":"16","emprego":"Analista de Sistemas",apelido:Zez do pagode}
JavaScript
Linguagem Client-Sideresponsvel por agilizarinteraes entre o usurioe a pgina, baseado nopadro EcmaScript.
Javascript
- Linguagem interpretada- Roda no cliente (client-side)- Criada
pela Netscape inicialmente para fazer validaes client-side nos
formulrios HTML- A inteno do JavaScript prover maior interatividade
entre o sistema e o usurio
document.getElementById(curso-sg)
Javascript
- Todo comando javascript dentro do HTML delimitado pela tag - alert("Janela do Javascript")
-
Javascript/dom/css
- Atribuindo borda vermelha a um elemento xHTML cujo ID seja curso-sg document.getElementById(curso-sg).style.border = 5px solid red
Javascript / XMLHttpRequest
- Objeto XMLHttpRequest
- Objeto responsvel por fazer as requisies assncronas
Javascript / XMLHttpRequest
- Primeiro problema! a criao do Objeto diferente no Internet Explorer, neste (pseudo)browser o objeto criado atravs de um ActiveX
Javascript / XMLHttpRequest
var objeto = new XMLHttpRequest(); // firefox / pera / konqueror / safarivar objeto = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
Javascript / XMLHttpRequest
function getXML() {var objeto; // declara o objetotry { // tenta criar objeto XMLHTTPRequestobjeto = new XMLHttpRequest()}catch(e) { // caso d erro, tenta criar o ActiveXObjectobjeto = new ActiveXObject("Msxml2.XMLHTTP");}return objeto}
Linguagem server side
server-side
- linguagem de programao executada no servidor
- exemplo: php, ruby, python, asp, c, c++, Java...
Produtividade sempre legal!
Produtividade em JS
- existem frameworks JS que iro melhorar muito sua produtividade- jquery, script.acu.lo.us, mototools, dwr (Java), Spry (Adobe)- Fique atento ao uso de frameworks, no deixem elas dominarem voc!
Produtividade - Firefox
Firefox no apenas um navegador,ele um poderoso ambiente dedesenvolvimento
Produtividade - Firefox
- Console de Erros eficiente (Nativo)- DOM Inspector - verifica rvore de Objetos DOM (Nativo)- Extenso FireBug para Depurar Scripts/CSS/HTML e verificar rvore de Objetos DOM- Extenso WebDeveloper ( CSS/ JavaScript / xHTML / Validadores )
Quero saber mais, Como fao?
- No se esquea, o Google seu amigo ;-);- Participe de listas de discusso, blogs, fruns, interaja;- J existem bons livros na rea- Qualquer dvida, beba direto da fonte W3C, Especificao EcmaScript
S lembrando
Ajax j virou commodity, para quem trabalha com web, dominar Ajax to
essencial quanto matemtica para um contador !
Brindes e sorteios
- Livro de Ajax- Lindas camisetas do PagSeguro- Bolinha anti-stress (para ser utilizada logo depois da prova de ATP)- Baralhos de SCRUM... o que SCRUM?
sorteio do livro...
alert("sorteado : " + parseInt(Math.random()*70))
Brindes do PagSeguro
- Simplesmente a melhor opo para disponibilizar meios de pagamento no seu site ;-)
- Pagamento seguro
- Carto de crdito, boleta ou transferncia....
Brindes do UOL
- UOL precisa de pessoas inteligentes, estimuladas e criativas, envie seu currculo!
- Adoo do SCRUM como metodologia de desenvolvimento dos projetos de internet!
Agradecimentos
Click to edit the title text format
MiniCurso Desenvolvimento WEB com Ajax - 5 Semana de Informtica PUC So Gabriel11 de outubro de 2008