advertisement

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

40 %
60 %
advertisement
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
advertisement

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

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

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