Quickstart Ajax Slideshare

2,290 views

Published on

Presentaite quickstart voor Ajax. Gegeven aan NHL / The next web

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,290
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Quickstart Ajax Slideshare

  1. 1. Quickstart AJAX ... achieving your goals with AJAX Gastcollege ‘The next web’
  2. 2. Wie ben ik? <ul><li>Frank Leegstra </li></ul><ul><li>[email_address] </li></ul><ul><li>06 42 141 263 </li></ul><ul><li>Hogere Informatica (hier) </li></ul><ul><li>Bedrijfskunde (ergens anders) </li></ul>
  3. 3. mediaCT webinterieur <ul><li>Flink aan het groeien (12 man in Groningen) </li></ul><ul><li>Website vormgeving, online marketing en internet techniek </li></ul><ul><li>Groningen, Amsterdam en Dokkum </li></ul>
  4. 4. Wie is mediaCT webinterieur <ul><li>Elk jaar een stagiair van CMD / Informatica NHL </li></ul><ul><ul><li>Jasper Zeinstra (werkt nu fulltime) </li></ul></ul><ul><ul><li>Egbert Veenstra </li></ul></ul><ul><ul><li>Meint Span </li></ul></ul>
  5. 5. Onderwerpen <ul><li>Vorige keer </li></ul><ul><ul><li>Alles over API’s </li></ul></ul><ul><li>Vandaag </li></ul><ul><ul><li>Quickstart AJAX </li></ul></ul><ul><li>14 november </li></ul><ul><ul><li>Case van een ‘succesvolle’ web 2.0 website </li></ul></ul><ul><ul><ul><li>Marketing </li></ul></ul></ul><ul><ul><ul><li>Wat maakt ‘succes’? </li></ul></ul></ul>
  6. 6. Jullie hebben kennis van... <ul><li>JavaScript </li></ul>
  7. 7. Inhoud <ul><li>Wat is AJAX? </li></ul><ul><li>Hoe werkt het? </li></ul><ul><li>Toolkits </li></ul><ul><li>Aan de slag </li></ul><ul><li>Voorbeelden </li></ul>
  8. 8. Wat is AJAX <ul><li>Quickstart AJAX </li></ul>
  9. 9. AJAX volgens wikiPedia <ul><li>AJAX ( Asynchronous Javascript And XML ) is een term voor het ontwerp van interactieve webpagina's waarin asynchroon gevraagde gegevens worden opgehaald van de webserver. Daardoor hoeven dergelijke pagina's niet in hun geheel ververst te worden. Zo'n pagina is te vergelijken met een applicatie die in de browser draait. De term is op 18 februari 2005 door Jesse James Garrett gelanceerd en werd door grote spelers als Google en Amazon geadopteerd. </li></ul><ul><li>Door gebruik te maken van XMLHttpRequest, hoeft de webpagina niet opnieuw ververst te worden om nieuwe inhoud te krijgen. Google Suggest stelt bijvoorbeeld bij elke toetsaanslag een nieuwe reeks zoektermen voor zonder dat je pagina één keer hoeft te herladen. </li></ul>
  10. 10. Wat is AJAX? <ul><li>Asynchronous Javascript And XML </li></ul><ul><li>XMLHttpRequest </li></ul>
  11. 11. Hoe werkt het? <ul><li>Quickstart AJAX </li></ul>
  12. 12. Hoe werkt het?
  13. 13. AJAX, Cross-domain policy Voorbeeld met Yahoo!
  14. 14. AJAX, Cross-domain policy Proxy nodig? Kijk op http://developer.yahoo.com/javascript/howto-proxy.html
  15. 15. Toolkits <ul><li>Quickstart AJAX </li></ul>
  16. 16. Toolkits <ul><li>Google Web Toolkit (GWT) </li></ul><ul><li>jQuery </li></ul><ul><li>Prototype (en scriptaculous) </li></ul><ul><li>HTML_AJAX (PEAR) </li></ul><ul><li>Xajax </li></ul>
  17. 17. Google Web Toolkit (GWT) <ul><li>Programmeren in JAVA </li></ul><ul><li>Compilen van JAVA naar JS </li></ul><ul><li>Debugmogelijkheden! </li></ul>
  18. 18. jQuery (1) <ul><li>Programmeren in Javascript </li></ul><ul><li>Do more, write less </li></ul><ul><li>Cross browser compatible </li></ul><ul><li>http://www-128.ibm.com/developerworks/library/x-ajaxjquery.html </li></ul><ul><li>http://www.jquery.com </li></ul><ul><li>http://docs.jquery.com/Ajax </li></ul>
  19. 19. jQuery (2)
  20. 20. jQuery (3)
  21. 21. HTML_AJAX (PEAR) <ul><li>Programmeren in PHP! </li></ul><ul><li>Cross browser compatible </li></ul><ul><li>http://htmlajax.org/ (beta) </li></ul>
  22. 22. HTML_AJAX (2)
  23. 23. Aan de slag <ul><li>Quickstart AJAX </li></ul>
  24. 24. Aan de slag <ul><li>http://www.cursusajax.nl/examples/ </li></ul><ul><li>Gebruik codevoorbeelden uit examples </li></ul><ul><li>Zie ook www.jquery.com </li></ul>
  25. 25. Examples <ul><li>Basic AJAX (zie ook /include/ajax_basic.js) </li></ul><ul><li>jQuery AJAX </li></ul><ul><li>Last.fm: find related artists </li></ul><ul><li>Aan jullie: </li></ul><ul><ul><li>Flickr photos van een user </li></ul></ul><ul><ul><li>Finetuning related artists </li></ul></ul><ul><ul><li>Etc... </li></ul></ul>
  26. 26. API: Last.fm http://www.audioscrobbler.net/data/webservices/
  27. 27. API: Facebook http://developers.facebook.com/documentation.php
  28. 28. API: Flickr http://flickr.com/services/api/
  29. 29. Last.fm: find related artists
  30. 30. Voorbeelden <ul><li>Quickstart AJAX </li></ul>
  31. 31. Voorbeeld: http://demo.backbase.com/RSS
  32. 32. Voorbeelden <ul><li>http://demo.backbase.com:8180/dukeBookStore/mainpanel.jsf </li></ul><ul><li>http://demo.backbase.com/RUI/shop.html </li></ul>

×