ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
Mini Curso Mashup Coreu
1. minicurso Mashup integrando Serviços na Web Marcelo Linhares – UOL
2. Quem vos fala... - 6 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
4. Agenda - Um pouco de história da WWW - WWW hoje! (vide Web 2.0 ou blá,blá,blá,blá...) - - Javascript, Json, CSS, EcmaScript, xHTML... - Hora do Café - Hands on code... - Brindes
5. Um detalhe... Perguntas, dúvidas, sugestões, e comentários são SEMPRE bem vindos, a sua participação no mini-curso é fundamental
6. 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
11. 10 anos depois - Estouro da bolha, - Espuelas enriqueceu ;-) - A AOL Brasil fracassou! - O Google apareceu - Banda Larga, SOA, Mashups , Web 2.0, cloud computing....
15. A modinha da Web2.0 - Sem especulação, internet realmente começou a dar dinheiro (Jeff Bezos, Marck Zuckerberg e Larry Page que o diga...) - Usuário criando conteúdo - Interfaces mais ricas - Internet como plataforma - Software como serviço (ASP)
16. uma plataforma...?? - GMail/YahooMail x Outlook Express - GoogleDocs x MsOffice - Salesforce.com x RM Corpore
17. uma plataforma...?? - Novo modelo de licenciamento de software: - ASP (Application Service Provider)
25. Ok, onde Mashup entra nesta história?... Usuário criando conteúdo + Interface mais rica + Internet como plataforma + Software como Serviço x 10*2 / 0,333 = Mashup
26. Mashup.... Uma coleção de serviços e aplicativos http ' misturados ' e (ou) integrados , formando assim uma nova aplicação.
27. Ou melhor..... “ Um mashup é um website ou uma aplicação web que usa conteúdo de mais de uma fonte para criar um novo serviço completo.” . @wikipedia
28. O quê? Imagina um serviço que dado um endereço , ele calcularia o frete dos produtos mais baratos de várias lojas , e através de uma configuração, efetuaria compras automáticas ?
29. Endereço – google maps cálculo do frete – correios produtos mais baratos (comparação de preços) – buscapé / shopping uol compras – Paypal / PagSeguro / F2b
43. 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
44. xHTML - linguagem de marcação (báh..) - “evolução” da HTML... - Objetivo? Aumentar a acessibilidade
46. DOM - Document Object Model - Interface para acessar/modificar a estrutura de um documento XML/xHTML - exemplo? document.getElementById(“curso-sg”)
58. 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”)
59. Javascript - Todo comando javascript dentro do HTML é delimitado pela tag <script> - <script> alert("Janela do Javascript") <script> -
60. 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>
61. Javascript / XMLHttpRequest - Objeto XMLHttpRequest - Objeto responsável por fazer as requisições assíncronas
62. Javascript / XMLHttpRequest - Primeiro problema! a criação do Objeto é diferente no Internet Explorer, neste (pseudo)browser o objeto é criado através de um ActiveX
63. Javascript / XMLHttpRequest var objeto = new XMLHttpRequest(); // firefox / ópera / konqueror / safari var objeto = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
64. 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 }
68. 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ê!
69. Produtividade - Firefox Firefox não é apenas um navegador, ele é um poderoso ambiente de desenvolvimento
70. 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 )
72. - 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
73. Só lembrando Ajax já virou commodity, para quem trabalha com web, dominar Ajax é tão essencial quanto matemática para um contador !