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