ITU - Social software: 10 Tekniskeelementer

956 views

Published on

I efteråret 2007 og foråret 2008 underviste jeg på ITU-kurset Social Software: Design og implementering.

Se http://mortengade.dk/2009/social-software-et-semesters-undervisning-i-en-post
Se http://social08.pbwiki.com

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
956
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

ITU - Social software: 10 Tekniskeelementer

  1. 1. Tekniske elementer i social software (I) Social software: Design & implementering 28. februar
  2. 2. Agenda XML, RSS, Widgets, Ajax Fælles diskussion om muligheder og definitioner
  3. 3. XML
  4. 4. Extensive Markup Language
  5. 5. Standardiseret kode, der er til at forstå, for mennesker og for maskiner
  6. 6. XML: Designet til at flytte og gemme data HTML: Designet til at fremvise data
  7. 7. Struktureret data
  8. 8. Lidt ligesom en database
  9. 9. Simpelt og fleksibelt
  10. 10. Gør det nemt at udveksle data mellem forskellige systemer
  11. 11. Og netop de data, man har brug for, formateret på den måde, man har brug for
  12. 12. Ikke formateret med strukturelle elementer som <P>, <H1>, <B>
  13. 13. Men adskiller indhold fra form
  14. 14. Man kan med andre ord ikke bare se hvilken tekst, der står og hvordan den ser ud, men også hvad den står der om
  15. 15. Man kan præsentere data på forskellige måder, i forskellige sammenhænge uden at få formen med
  16. 16. For eksempel…
  17. 17. Hvordan ser det ud?
  18. 18. <recipe name=quot;breadquot; prep_time=quot;5 minsquot; cook_time=quot;3 hoursquot;> <title>Basic bread</title> <ingredient amount=quot;3quot; unit=quot;cupsquot;>Flour</ingredient> <ingredient amount=quot;0.25quot; unit=quot;ouncequot;>Yeast</ingredient> <ingredient amount=quot;1.5quot; unit=quot;cups”>Water</ingredient> <ingredient amount=quot;1quot; unit=quot;teaspoonquot;>Salt</ingredient> <instructions> <step>Mix all ingredients together.</step> <step>Knead thoroughly.</step> <step>Cover with a cloth, leave for one hour in warm room</step> <step>Knead again.</step> <step>Place in a bread baking tin.</step> <step>Cover with a cloth, leave for one hour in warm room</step> <step>Bake in the oven at 350° for 30 minutes.</step> </instructions> </recipe>
  19. 19. Muliggør API’er og automatiske dataudvekslinger (og dermed for eksempel mashups) – samt mange af de andre teknologier, vi går igennem i dag
  20. 20. For eksempel: www.flickrvision.com
  21. 21. Og meget mere – der er virkelig mange muligheder, når computere kan forstå den tekst, de kigger på
  22. 22. Mere om XML: http://www.xml.com/pub/a/w3j/s3.bosak.html http://www.w3.org/XML/
  23. 23. RSS
  24. 24. Really Simple Syndication
  25. 25. En XML-standard
  26. 26. Simpelt format, der viser datosorteret indhold på standardiseret vis
  27. 27. Udover abonnementsideen betyder det, at data uhyre enkelt kan remixes og genbruges i andre sammenhænge, end det oprindelig var tiltænkt
  28. 28. Pause
  29. 29. Microformats
  30. 30. Beskrivelse af indhold med kode
  31. 31. Et eksempel
  32. 32. <li> <a href=quot;http://www.mortengade.dkquot;> Morten Gade</a> </li>
  33. 33. Lad os gøre det forståeligt for computere, hvad det er for noget data
  34. 34. <li> <a href=quot;http://www.mortengade.dkquot;> Morten Gade</a> </li>
  35. 35. <li class=quot;vcardquot;> <a href=quot;http://www.mortengade.dkquot; class=quot;url fnquot;>Morten Gade</a> </li>
  36. 36. Det her er et vCard <li class=quot;vcardquot;> <a href=quot;http://www.mortengade.dkquot; class=quot;url fnquot;>Morten Gade</a> </li> Som indeholder en URL og et ”functional name” = navn
  37. 37. Hvad kan man bruge det til?
  38. 38. For eksempel adressebøger, forklare relationer mellem websites, troværdighedsmålinger, automatiske netværk mellem sites..
  39. 39. Mere om microformats: www.sitepoint.com/article/microformats- meaning-markup www.microformats.org www.microformats.dk
  40. 40. Ajax
  41. 41. (Asynkron JavaScript & XML)
  42. 42. Muliggør applikationer på nettet, der reagerer hurtigere (og måske mere intuitivt?)
  43. 43. Det udligner forskellen mellem at lave interaktionsdesign til desktop- applikationer og til nettet
  44. 44. Det bedst kendte eksempel
  45. 45. Ajax er ikke en teknologi, men en samling af forskellige teknologier
  46. 46. I almindelig html (osv.) venter man på serveren: Hver gang man udfører en handling, sendes et http request
  47. 47. Ajax giver mulighed for, at interaktionen sker asynkront – i stedet for at spørge serveren hver gang, spørges en ajax-motor (der af og til selv spørger serveren, men uden brugeren skal vente)
  48. 48. Social software? Tjah!
  49. 49. Mere om ajax: http://www.adaptivepath.com/ideas/essays/ archives/000385.php
  50. 50. Widgets
  51. 51. En stump kode, der fungerer inde i en html-side
  52. 52. Med andre ord: Et utroligt simpelt mashup
  53. 53. For eksempel i weblogs
  54. 54. http://www.lolulas.blogspot.com/
  55. 55. Eller Google Gadget Ads
  56. 56. http://www.google.com/adwords/gadgetads/
  57. 57. API
  58. 58. Application Programming Interface
  59. 59. Et interface til computere!
  60. 60. Hvis man ikke bare vil trække data ud i den form, de ligger
  61. 61. Gør det nemmere at udveksle data mellem maskiner/websites
  62. 62. Et helt simpelt eksempel:
  63. 63. www.blackle.com
  64. 64. Eksempler på kendte åbne API’er: Google Maps MitKBH Trackbacks Twitter Flickr
  65. 65. Lille øvelse
  66. 66. Undersøg et af følgende sites. Afdæk 2-3 typer data, det kunne være sjovt/nyttigt at lave dataremixes. Hvordan skal det laves? www.nationalbanken.dk www.eb.dk www.krak.dk www.boligsiden.dk www.fdim.dk www.rejseplanen.dk www.bilbasen.dk www.dating.dk www.yahoo.com www.myspace.com www.craigslist.org www.ibm.com www.apple.com www.itu.dk www.dtu.dk www.ida.dk www.ordnet.dk www.biobooking.dk www.burningpanda.dk www.oresundsbron.com

×