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

1. Tekniske elementer
i social software (I)
Social software: Design & implementering
28. februar

2. Agenda
XML, RSS, Widgets, Ajax
Fælles diskussion om muligheder og
definitioner

3. XML

4. Extensive Markup Language

5. Standardiseret kode, der er til at forstå,
for mennesker og for maskiner

6. XML: Designet til at flytte og gemme data
HTML: Designet til at fremvise data

7. Struktureret data

8. Lidt ligesom en database

9. Simpelt og fleksibelt

10. Gør det nemt at udveksle
data mellem forskellige systemer

11. Og netop de data, man har brug for,
formateret på den måde, man har brug for

12. Ikke formateret med strukturelle elementer
som <P>, <H1>, <B>

13. Men adskiller indhold fra form

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. Man kan præsentere data på forskellige
måder, i forskellige sammenhænge uden
at få formen med

16. For eksempel…

18. Hvordan ser det ud?

19. <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>

20. Muliggør API’er og automatiske
dataudvekslinger (og dermed for
eksempel mashups)
– samt mange af de andre
teknologier, vi går igennem i dag

21. For eksempel: www.flickrvision.com

22. Og meget mere – der er virkelig mange
muligheder, når computere kan forstå den
tekst, de kigger på

23. Mere om XML:
http://www.xml.com/pub/a/w3j/s3.bosak.html
http://www.w3.org/XML/

24. RSS

25. Really Simple Syndication

26. En XML-standard

27. Simpelt format, der viser datosorteret
indhold på standardiseret vis

29. Udover abonnementsideen betyder det,
at data uhyre enkelt kan remixes og
genbruges i andre sammenhænge, end det
oprindelig var tiltænkt

30. Pause

31. Microformats

32. Beskrivelse af indhold med kode

33. Et eksempel

34. <li>
<a href=quot;http://www.mortengade.dkquot;>
Morten Gade</a>
</li>

35. Lad os gøre det forståeligt for computere,
hvad det er for noget data

36. <li>
<a href=quot;http://www.mortengade.dkquot;>
Morten Gade</a>
</li>

37. <li class=quot;vcardquot;>
<a href=quot;http://www.mortengade.dkquot;
class=quot;url fnquot;>Morten Gade</a>
</li>

38. 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

39. Hvad kan man bruge det til?

40. For eksempel adressebøger, forklare relationer
mellem websites, troværdighedsmålinger,
automatiske netværk mellem sites..

41. Mere om microformats:
www.sitepoint.com/article/microformats-
meaning-markup
www.microformats.org
www.microformats.dk

42. Ajax

43. (Asynkron JavaScript & XML)

44. Muliggør applikationer på nettet,
der reagerer hurtigere
(og måske mere intuitivt?)

45. Det udligner forskellen mellem at
lave interaktionsdesign til desktop-
applikationer og til nettet

46. Det bedst kendte eksempel

48. Ajax er ikke en teknologi, men en
samling af forskellige teknologier

49. I almindelig html (osv.)
venter man på serveren:
Hver gang man udfører en handling,
sendes et http request

50. 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)

51. Social software? Tjah!

52. Mere om ajax:
http://www.adaptivepath.com/ideas/essays/
archives/000385.php

53. Widgets

54. En stump kode, der fungerer
inde i en html-side

55. Med andre ord: Et utroligt simpelt mashup

56. For eksempel i weblogs

57. http://www.lolulas.blogspot.com/

58. Eller Google Gadget Ads

59. http://www.google.com/adwords/gadgetads/

60. API

61. Application Programming Interface

62. Et interface til computere!

63. Hvis man ikke bare vil trække data ud
i den form, de ligger

64. Gør det nemmere at udveksle
data mellem maskiner/websites

65. Et helt simpelt eksempel:

66. www.blackle.com

67. Eksempler på kendte åbne API’er:
Google Maps
MitKBH
Trackbacks
Twitter
Flickr

68. Lille øvelse

69. 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