ITU - Social software: 10 Tekniskeelementer

  • 626 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
626
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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…
  • 17. Hvordan ser det ud?
  • 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. 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. For eksempel: www.flickrvision.com
  • 21. Og meget mere – der er virkelig mange muligheder, når computere kan forstå den tekst, de kigger på
  • 22. Mere om XML: http://www.xml.com/pub/a/w3j/s3.bosak.html http://www.w3.org/XML/
  • 23. RSS
  • 24. Really Simple Syndication
  • 25. En XML-standard
  • 26. Simpelt format, der viser datosorteret indhold på standardiseret vis
  • 27. Udover abonnementsideen betyder det, at data uhyre enkelt kan remixes og genbruges i andre sammenhænge, end det oprindelig var tiltænkt
  • 28. Pause
  • 29. Microformats
  • 30. Beskrivelse af indhold med kode
  • 31. Et eksempel
  • 32. <li> <a href=quot;http://www.mortengade.dkquot;> Morten Gade</a> </li>
  • 33. Lad os gøre det forståeligt for computere, hvad det er for noget data
  • 34. <li> <a href=quot;http://www.mortengade.dkquot;> Morten Gade</a> </li>
  • 35. <li class=quot;vcardquot;> <a href=quot;http://www.mortengade.dkquot; class=quot;url fnquot;>Morten Gade</a> </li>
  • 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. Hvad kan man bruge det til?
  • 38. For eksempel adressebøger, forklare relationer mellem websites, troværdighedsmålinger, automatiske netværk mellem sites..
  • 39. Mere om microformats: www.sitepoint.com/article/microformats- meaning-markup www.microformats.org www.microformats.dk
  • 40. Ajax
  • 41. (Asynkron JavaScript & XML)
  • 42. Muliggør applikationer på nettet, der reagerer hurtigere (og måske mere intuitivt?)
  • 43. Det udligner forskellen mellem at lave interaktionsdesign til desktop- applikationer og til nettet
  • 44. Det bedst kendte eksempel
  • 45. Ajax er ikke en teknologi, men en samling af forskellige teknologier
  • 46. I almindelig html (osv.) venter man på serveren: Hver gang man udfører en handling, sendes et http request
  • 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. Social software? Tjah!
  • 49. Mere om ajax: http://www.adaptivepath.com/ideas/essays/ archives/000385.php
  • 50. Widgets
  • 51. En stump kode, der fungerer inde i en html-side
  • 52. Med andre ord: Et utroligt simpelt mashup
  • 53. For eksempel i weblogs
  • 54. http://www.lolulas.blogspot.com/
  • 55. Eller Google Gadget Ads
  • 56. http://www.google.com/adwords/gadgetads/
  • 57. API
  • 58. Application Programming Interface
  • 59. Et interface til computere!
  • 60. Hvis man ikke bare vil trække data ud i den form, de ligger
  • 61. Gør det nemmere at udveksle data mellem maskiner/websites
  • 62. Et helt simpelt eksempel:
  • 63. www.blackle.com
  • 64. Eksempler på kendte åbne API’er: Google Maps MitKBH Trackbacks Twitter Flickr
  • 65. Lille øvelse
  • 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