Lib.SAPO.JS  - Codebits2007
Upcoming SlideShare
Loading in...5
×
 

Lib.SAPO.JS - Codebits2007

on

  • 3,449 views

 

Statistics

Views

Total Views
3,449
Views on SlideShare
3,389
Embed Views
60

Actions

Likes
0
Downloads
9
Comments
0

5 Embeds 60

http://blog.pdvel.com 56
http://64.233.183.104 1
http://74.125.113.132 1
http://www.slideshare.net 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Lib.SAPO.JS  - Codebits2007 Lib.SAPO.JS - Codebits2007 Presentation Transcript

  • Lib.SAPO.JS
      • Codebits 2007 – 14/11/2007
      • 9 da manhã??!! -_-
      • Cláudio Gamboa <gamboa@co.sapo.pt>
  • Lib.SAPO.JS
    • JavaScript
        • AJAX
        • JSON
        • Script tag hack
    • Lib.SAPO.JS
        • O que é
        • Vantagens
        • Estrutura
    • Exemplos
      • JavaScript
    • ” The World's Most Misunderstood Programming Language ”
    • By...
      • JavaScript The World's Most Misunderstood Programming Language
    • By:
    • Douglas Crockford
    • http://www.crockford.com/
      • JavaScript The World's Most Misunderstood Programming Language
    • Não é um ”brinquedo”
    • para a web...
      • JavaScript The World's Most Misunderstood Programming Language
    • Não é um ”brinquedo”
    • para a web...
    • É uma linguagem de programação
    • Pequena mas sofisticada
    • Não tem ”class-oriented inheritance”, mas tem ” prototype-oriented inheritance ”
    • Objects as self containers
    • Não se chama AJAX.
      • JavaScript The World's Most Misunderstood Programming Language
    • Permite criar aplicações completas
      • JavaScript The World's Most Misunderstood Programming Language
    • Um bom manual de JavaScript
  • JavaScript.AJAX
    • AJAX
  • JavaScript.AJAX
    • Não é esconder e mostrar divs com JavaScript
  • JavaScript.AJAX
    • A synchronous J avaScript a nd X ML
    • Criar aplicações web sem ser necessário fazer reload ao browser
    • É assíncrono
    • Usa o objecto XMLHttpRequest
    • Recebe o conteúdo formatado em XML*
    • É host restricted
  • JavaScript.AJAX
    • Exemplo dum AJAX request
  • JavaScript.AJAX
    • Exemplo dum AJAX request
    • <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot; http://www.w3.org/TR/html4/loose.dtd &quot;>
    • < html > < head > < title >AJAX Request< /title > < script type=&quot;text/javascript&quot; src=&quot;http://js.sapo.pt/Prototype/&quot;></ script > < script type=&quot;text/javascript&quot;> function myRequest() { var url = document .getElementById(' url ').value; new Ajax.Request(url, { method:' get ', onSuccess: function (req){ var xml = req.responseXML; var aItems = xml.retElementsByTagName(' item '); var totalItems = aItems.length; document .getElementById(' output ').innerHTML = totalItems; }, onException: function (r, e){ throw e; } }); } </ script > </ head > < body > < input type=&quot; text &quot; id=&quot; url &quot; size=&quot; 40 &quot; value=&quot;&quot; /> < input type=&quot; button &quot; name=&quot; b &quot; value=&quot; Request It &quot; onclick=&quot;myRequest();&quot; /> < hr /> < div >< span id=&quot; output &quot;></ span > items no XML</ div > </ body > </ html >
  • JavaScript.AJAX
    • AJAX request – host restriction
  • JavaScript.AJAX
    • AJAX request – host restriction
  • JavaScript.AJAX
    • AJAX request – host restriction
    • SOLUÇÕES
    • Apache Proxy
    • RewriteEngine On
    • RewriteRule ^/req.xml http://videos.sapo.pt/gamboa/rss [P]
    • Request -> http://localhost/req.xml
  • JavaScript.AJAX
    • AJAX request – host restriction
    • SOLUÇÕES
    • PHP Proxy
    • cat req.php
    • <?php
    • $content = file_get_contents('http://videos.sapo.pt/gamboa/rss');
    • header(”Content-type: text/xml”);
    • echo $content;
    • ?>
    • Request -> http://localhost/req.php
  • JavaScript.JSON
    • JSON
  • JavaScript.JSON
    • J ava S cript O bject N otation
    • ( ”jeison/jotason/jota esse on/...” )
    • Formato duma estrutura de dados/ array associativo (JS Object)
    • É text-based
    • RFC 4627
    • Content type: application/json
    • Pode encapsular funções (Class)
  • JavaScript.JSON
    • String
    • Number
    • Boolean
    • Object
    • Array
    • null
    • {
    • &quot;nome&quot;: &quot;Claudio Gamboa&quot;,
    • &quot;idade&quot;: 26,
    • &quot;solteiro&quot;: true,
    • &quot;gosta&quot;: {
    • &quot;musica&quot;: [&quot;Emperor&quot;, &quot;Moonspell&quot;, &quot;Borknagar&quot;],
    • &quot;cinema&quot;: [&quot;LOTR&quot;, &quot;Matrix&quot;, &quot;Se7en&quot;, &quot;Snatch&quot;],
    • &quot;series&quot;: [&quot;House MD&quot;, &quot;Seinfeld&quot;],
    • &quot;livros&quot;: [&quot;Perfume&quot;, ”Aparição”]
    • },
    • &quot;filhos&quot;: null
    • }
  • JavaScript.JSON
    • JSON como resposta dum AJAX Request
    • function callBack(obj)
    • {
    • var req = obj.responseText;
    • var myObj = eval('(' + req + ')');
    • alert(myObj.nome);
    • }
  • JavaScript.JSON
    • JSON como Classe
  • JavaScript['Script'].Tag(Hack)
    • SCRIPT TAG HACK
  • JavaScript['Script'].Tag(Hack)
    • O que é:
    • Adicionar dinamicamente uma SCRIPT tag na página (ficheiro js/json )
    • Esperar que seja carregado
    • Usar/Executar o conteúdo.
  • JavaScript['Script'].Tag(Hack)
    • O que é:
    • <script type=”text/javascript” src=”http://services.sapo.pt/Photos/JSON/gamboa?jsonTag=foo”></script>”>
    • // RSS em formato JSON
    • var foo = {”rss”:{”channel”: ....}}
    • alert(foo.rss.channel.item[0].title);
  • Vamos mudar de assunto
    • ...
      • Lib.SAPO.JS
    • O que é
    • Vantagens
    • Estrutura
      • Lib.SAPO.JS('O que é?')
    • Repositório central de libs de JavaScript e widgets do SAPO
    • É Open Source
    • Tem classes utilitárias para simplificar o JavaScript e a vida dos programadores (SAPO.Utility.*)
      • Lib.SAPO.JS('Vantagens')
    • Ter classes de JavaScript centralizadas (http://js.sapo.pt)
    • Ter Widgets baseados nas classes
    • Ter controlo de versões
    • Ter o código organizado/separado
    • Reutilizar código
        • Não ter de reinventar a roda cada vez que se quer validar um endereço de email
    • Farm estática e conteúdo ” jslinted ”, ” jsmined ” e ” gziped ”
      • Lib.SAPO.JS('Vantagens')
    • Criar ”packages” estáticos (Bundles) de vários ficheiros JavaScript e servir apenas um ficheiro para a aplicação.
        • Torna o load da aplicação mais rapido
        • Não corre o risco de ”partir” por um ficheiro não ter sido carregado
        • Garante que todo o código necessário existe
    • http://js.sapo.pt/Bundles/WebmessengerCliente.js
    • 645 Kb -> 322 Kb -> 75 Kb
      • Lib.SAPO.JS('Vantagens')
    • Criar ”scripts” (Snippets) em que as opções são passadas na query string.
        • Disponibilizar apenas um ficheiro para ser reutilizado incluindo apenas uma script tag.
        • Dar a possibilidade de o utilizador alterar as opções alterando apenas os parametros da query string.
    Lisbon Weather http://js.sapo.pt/Snippets/Meteo.js?c=LPLG
      • Lib.SAPO.JS('Estrutura')
    • /SAPO/
    • /Prototype/
    • /YUI/
    • /Bundles/
    • /Snippets/
    • http://js.sapo.pt/(.*)
      • Lib.SAPO.JS('Estrutura')
    • Prototype ( Versão 1.8 )
      • Dragdrop
      • Effects
      • Builder
      • Controls
      • Slider
    • http://js.sapo.pt/Prototype/
    • http://js.sapo.pt/Prototype/Dragdrop/
    • http://js.sapo.pt/Prototype/..../
      • Lib.SAPO.JS('Estrutura')
    • YUI ( Versão 2.2 )
      • Dom
      • Event
      • Connection
      • Dragdrop
      • Calendar
      • ...
    • http://js.sapo.pt/YUI/
    • http://js.sapo.pt/YUI/Dom/
    • http://js.sapo.pt/YUI/.../
      • Lib.SAPO.JS('Estrutura')
    • SAPO
      • Utility
      • Communication
      • Widget
      • Geo
      • Exception
      • Lib.SAPO.JS('Estrutura')
    • SAPO.Utility
        • Array ( inArray, keyValue )
        • Cookie ( set, remove, get )
        • Crypto ( md5, sha1, sha256 )
        • Dumper ( alertDump, returnDump, windowDump )
        • CSS ( set )
        • String ( trim, stripTags, htmlEntities(En|De)code, utf8(En|De)code ... )
        • Url ( getURl, getQueryString, base64(En|De)code ... )
        • Validator ( mail, isPortuguesePhone )
        • Variable ( isArray, isObject, isString, isNumber )
    • http://js.sapo.pt/SAPO/Utility/(.*)
      • Lib.SAPO.JS('Estrutura')
    • SAPO.Communication
      • Syndication ( push, run, runAll )
    • (Class para a ”Script Tag Hack”)
    • http://js.sapo.pt/SAPO/Communication/Syndication/
    • http://js.sapo.pt/SAPO/Communication/Syndication/sample/
      • Lib.SAPO.JS('Estrutura')
    • SAPO.Widget
        • Contextmenu
        • Dialog
        • Tooltip
        • Rating
        • Maps
        • Thumbs
        • (Blogthis, Meteo, Photos, Search, Tags...)
    • http://js.sapo.pt/SAPO/Widget/(.*)
    • http://js.sapo.pt/SAPO/Widget/([^/]+)/sample/
      • Lib.SAPO.JS('Estrutura')
    • SAPO.Geo
        • Map
        • Ver apresentação de Joaquim Muchaxo e António Cruz no PP às 11:45
        • ” SAPO Mapas & GIS”
    • http://js.sapo.pt/SAPO/Geo/Map/
      • Exemplos
    • SAPO.Utility.Dumper
    • SAPO.Utility.String
    • SAPO.Utility.Url
    • SAPO.Widget.Contextmenu
    • SAPO.Widget.Tooltip
    • SAPO.Communication.Syndication
    • Prototype
    • Ajax.Request
      • Perguntas??
    • ...
      • Mais informação
    • http://js.sapo.pt/
    • http://developer.sapo.pt/
    • http://prototypejs.org
    • http://developer.yahoo.com/yui/
    • SAPO: http://www.sapo.pt/
    • Download: http://pdvel.com/
    • Meu blog: http://blog.pdvel.com/ (sucks)