Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel

40 %
60 %
Information about Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Technology

Published on October 15, 2008

Author: marcelolinhares

Source: slideshare.net

Description

Minicurso de ajax ministrado no dia 11 de outubro de 2008 na 5. Semana de Informática da PUC Minas São Gabriel

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

Mosaic Browser (nostalgia)

Este é o “cara”....

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

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)

Futuro? não.. presente!

vamos ser sinceros...

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!

Perguntas ???

5 minutos para o café....

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?...cliente

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

Vantagens?

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

auto-complete...

Feedbacks mais rápidos...

Feedbacks mais rápidos...

dragn-drop...

dragn-drop...

CUIDADO!

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

Indexabilidade comprometida

Inacessível

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

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

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 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 &quot; JavaScript Object Notation &quot; , é 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 { &quot; nome &quot;:&quot;José&quot;, &quot; idade &quot;:&quot;16&quot;, &quot; emprego &quot;:&quot;Analista de Sistemas&quot;, “ apelido”:”Zezé do pagode” }

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

JavaScript

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(&quot;Janela do Javascript&quot;) <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(&quot;Msxml2.XMLHTTP&quot;); // 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(&quot;Msxml2.XMLHTTP&quot;); } return objeto }

Linguagem server side

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(&quot;sorteado é: &quot; + 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!

Agradecimentos

Add a comment

Related presentations

Related pages

V Semana de Ciência, Arte e Política da PUC Minas São ...

V Semana de Ciência, Arte e Política. De 16 à 21 de Setembro na Puc Mina São Gabriel. pucminas.br/scap2013 Trabalho realizado por Bianca de ...
Read more

PUC Minas no São Gabriel

PUC Minas no São Gabriel; Institucional; Apresentação; ... Anel Rodoviário Km 23,5 - Rua Walter Ianni, 255 - São Gabriel - 31980-110 Belo Horizonte ...
Read more

Sistemas de Informação PUC Minas

... (Instituto de Ciências Exatas e Informática) da PUC Minas, ... semana, dia 9/5, ... de Informação da PUC Minas São Gabriel vence a ...
Read more

Conferência de Serviço Social, 5 - Portal PUC Minas

PUC MINAS NO SÃO GABRIEL. ... Semana de Informática, 3. 26 - 29/09. ... Semana da Enfermagem, 5. 10 - 12/05. Jornada de Fisioterapia, 3.
Read more

Diário do São Gabriel | Notícias diárias da PUC Minas ...

Mestrado em Informática; ... 12 de Março, no Teatro da PUC Minas São Gabriel, ... PUC Minas Virtual; Semana de Ciência, ...
Read more

Sistemas de Informação | PUC MINAS

... (Instituto de Ciências Exatas e Informática) da PUC Minas, ... dia 09 de maio de 2016 no Teatro da PUC Minas no São Gabriel. ... 5: 6: 7: 8: 9: 10 ...
Read more

PUC Minas

PUC Minas, Belo Horizonte ... Ontem foi a vez do São Gabriel receber a palestra do Formei. E agora? ... PUC Minas added 5 new photos. May 4 at 6:10am ·
Read more

Certificados de Destaque Acadêmico serão entregues no ...

Notícias diárias da PUC Minas no São Gabriel. Skip to content. ... Minicurso de extensão: ... PUC Minas Virtual; Semana de Ciência, ...
Read more