Desenvolvimento Web com Ajax

minicurso Desenvolvimento Web com Ajax Marcelo Linhares – UOL

Quem vos fala... - 5 anos de experiência com webdevelopment - Webmaster @UOL S/A - marcelolinhares.com // pessoal - algumas brincadeiras: > vagasem.info // oportunidades em TI > marcelolinhares.com/bolsa // gestão de portfólio online

Sobre o minicurso... Apresentar os principais conceitos de construção de interfaces ricas para web utilizando Ajax..... ...em apenas 3 horas! ?

Agenda - Um pouco de história da WWW - WWW hoje! (vide Web 2.0 ou blá,blá,blá,blá...) - Interfaces ricas - Ajax? - Javascript, CSS, EcmaScript, xHTML... - Hora do Café - Mão na massa... - Brindes

Um detalhe... Perguntas, dúvidas, sugestões, e comentários são SEMPRE bem vindos, a sua participação no mini-curso é fundamental

Um pouco de história... - 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

Coleção de documentos - A Web era nada mais que uma coleção de documentos hipertexto interligadas entre si - Web como plataforma? Ainda não...

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 especulação, internet realmente começou a dar dinheiro ! - Usuário criando conteúdo - Interfaces mais ricas - Internet como plataforma

no ponto que queria chegar... Interfaces mais ricas

Por um momento, esqueça... 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 não importa para o usuário!

não acredita em mim... “ o que distingue uma empresa de outra num mesmo segmento de atuação? Eu afirmo a vocês que o que diferencia as empresas no século XXI é a ergonomia. ” Jorge Steffens – Presidente DataSul

continua não 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 informação é relevante para você ?

Uma plataforma chamada Internet!

uma plataforma...?? - SOA - Mashups - Acessibilidade - Computação Ubíqua - 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)

tudo isto seria possível, se ainda estivéssemos usando isto?

E se nossa conexão dependesse do famigerado kit multmídia?

Isto só foi possível porquê: A Lei de Moore funcionou!

Mas o minicurso não é de AJAX?

Onde Ajax entra nesta história?

conceituando... “ Uma técnica para criação de interfaces web mais ricas” Ou melhor... A synchronous J avaScript A nd X ML

conceituando...?? - Muitos desenvolvedores já programavam usando Ajax - Termo criado por James Garret em 2005 - Mérito? Ficou mais fácil vender Ajax para os clientes!

como funciona?...desenvolvedor

Navegadores carregam 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

Se bem utilizado, melhora muito a experiência do usuário !

Nem tudo são flores se mal utilizado, ajax pode dar dor de cabeça para o usuário!

Não dar feedback após a ação

Usuário não pode voltar, nem adicionar página nos favoritos

Tudo isto pode ser resolvido claro, basta apenas o desenvolvedor ser menos preguiçoso!

tecnologias - xHTML e CSS - DOM Document Object Model - XML e JSON - Javascript - Linguagem server-side

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

xHTML - linguagem de marcação (báh..) - “evolução” da HTML... - Objetivo? Aumentar a acessibilidade

DOM - Document Object Model - Interface para acessar/modificar a estrutura de um documento XML/xHTML - exemplo? document.getElementById(“curso-sg”)

XML XML (Extensible Markup Language). Um padrão de linguagem para tornar mais fácil a transferência de dados entre aplicações.

XML <pessoa> <nome> José </nome> <idade> 16 </nome> <emprego> Analista de Sistemas </emprego> <apelido> Zezé do Pagode </apelido> </pessoa>

JSON " JavaScript Object Notation " , é um formato para a transferência de dados entre aplicações.

JSON - Simples - Tem a vantagem de ser mais leve que o XML - Normalmente utilizado quando os dados trafegados entre as aplicações são críticos

JSON { " nome ":"José", " idade ":"16", " emprego ":"Analista de Sistemas", “ apelido”:”Zezé do pagode” }

Linguagem Client-Side responsável por agilizar interações entre o usuário e a página, baseado no padrão EcmaScript.

Javascript - Linguagem interpretada - Roda no cliente (client-side) - Criada pela Netscape inicialmente para fazer validações client-side nos formulários HTML - A intenção do JavaScript é prover maior interatividade entre o sistema e o usuário document.getElementById(“curso-sg”)

Javascript - Todo comando javascript dentro do HTML é delimitado pela tag <script> - <script> alert("Janela do Javascript") <script> -

Javascript/dom/css - Atribuindo borda vermelha a um elemento xHTML cujo ID seja “curso-sg” <script> document.getElementById(“curso-sg”).style.border = “5px solid red” <script>

Javascript / XMLHttpRequest - Objeto XMLHttpRequest - Objeto responsável por fazer as requisições assíncronas

Javascript / XMLHttpRequest - Primeiro problema! a criação do Objeto é diferente no Internet Explorer, neste (pseudo)browser o objeto é criado através de um ActiveX

Javascript / XMLHttpRequest var objeto = new XMLHttpRequest(); // firefox / ópera / konqueror / safari var objeto = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer

Javascript / XMLHttpRequest function getXML() { var objeto; // declara o objeto try { // tenta criar objeto XMLHTTPRequest objeto = new XMLHttpRequest() }catch(e) { // caso dê erro, tenta criar o ActiveXObject objeto = new ActiveXObject("Msxml2.XMLHTTP"); } return objeto }

server-side - linguagem de programação executada no servidor - exemplo: php, ruby, python, asp, c, c++, Java...

Produtividade sempre é legal!

Produtividade em JS - existem frameworks JS que irão melhorar muito sua produtividade - jquery , script.acu.lo.us , mototools , dwr (Java), Spry (Adobe) - Fique atento ao uso de frameworks, não deixem elas dominarem você!

Produtividade - Firefox Firefox não é apenas um navegador, ele é um poderoso ambiente de desenvolvimento

Produtividade - Firefox - 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 )

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 bons livros na área - Qualquer dúvida, beba direto da fonte W3C, Especificação EcmaScript

Só lembrando Ajax já virou commodity, para quem trabalha com web, dominar Ajax é tão essencial quanto matemática 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... <script> alert("sorteado é: " + parseInt(Math.random()*70)) </script>

Brindes do PagSeguro - Simplesmente a melhor opção para disponibilizar meios de pagamento no seu site ;-) - Pagamento seguro - Cartão de crédito, boleta ou transferência....

Brindes do UOL - UOL precisa de pessoas inteligentes, estimuladas e criativas, envie seu currículo! - Adoção do SCRUM como metodologia de desenvolvimento dos projetos de internet!

Desenvolvimento Web com Ajax

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Desenvolvimento Web com Ajax

Semelhante a Desenvolvimento Web com Ajax (20)

Mais de Marcelo Linhares

Mais de Marcelo Linhares (20)

Desenvolvimento Web com Ajax