SURFnet videotheek Web2.0 met php
Wie staat er voor jullie? <ul><li>Herman van Dompseler </li></ul><ul><li>Freelance Internet Architect </li></ul><ul><li>Ve...
SURFnet <ul><li>Een hoogwaardig computernetwerk speciaal voor het hoger onderwijs en onderzoek in Nederland.  </li></ul><u...
SURFnet videotheek <ul><li>Streaming video platform voor Hoger onderwijs en onderzoek </li></ul><ul><li>1998 A/V hosting d...
Waar gaat het vandaag over? <ul><li>De uitdaging </li></ul><ul><li>Service oriented architecture </li></ul><ul><li>User ge...
De uitdaging
Wens <ul><li>VIP = YouTube + </li></ul><ul><li>VP-X = Een platform waar meerdere applicaties gebruik van maken </li></ul><...
YouTube + <ul><li>Afscherming van video’s met A-select </li></ul><ul><li>Gericht op onderwijs en onderzoek (incl Academia)...
Hoge kwaliteit? UITDAGING
Het logische model UITDAGING
Platformen <ul><li>Frontend </li></ul><ul><li>Microsoft Sharepoint vanwege integratie met andere  </li></ul><ul><li>SURFne...
Service Oriented Architecture
Architectuur SOA
Interfaces SOA
1. HTML interface <ul><li>(Tussen presentatie en logica laag) </li></ul><ul><li>De presentatie blijft eenvoudig, geeft all...
2. XML interface <ul><li>(Tussen logica en webservice laag) </li></ul><ul><li>REST </li></ul><ul><li>Losse koppeling </li>...
User Generated Content
De gebruiker maakt de data <ul><li>Wikipedia </li></ul><ul><li>Blogs </li></ul><ul><li>Foto’s en video </li></ul><ul><li>R...
Issue:  identificeer de gebruiker <ul><li>Single Sign On met a-select </li></ul><ul><li>Aanmelden met instellingsaccount <...
Issue: gedistribueerde data <ul><li>Tagging en reviews in de applicatie </li></ul><ul><li>Video data in de database achter...
Rich User Experience
AJAX: webdesign stijl  <ul><li>Javascript </li></ul><ul><li>XmlHTTPRequest </li></ul><ul><li>Zorg ervoor dat de user het g...
Denk in componenten EXPERIENCE
Issue: upload formulier <ul><li>Een component verversen kan met een GET of POST request met ‘XmlHttpRequest’.  </li></ul><...
Issue: cross domain <ul><li>In de architectuur zijn meerdere systemen die door meerdere partijen worden ontwikkeld op meer...
Web2.0 met php
Hoever zijn wij? WEB2.0 MET PHP
Wat doen anderen? <ul><li>Flickr   Delicious  Hellup.nl   Hyves   last.fm   facebook   Tagmos   DIGG </li></ul>WEB2.0 MET ...
<ul><li>Vind antwoord op je vraag </li></ul><ul><li>Persoonlijk web2.0 experiment </li></ul><ul><li>Tagging met library: f...
Waar rekening mee houden <ul><li>Web 2.0 is geen product maken, maar een service bieden aan eindgebruikers </li></ul><ul><...
Vragen? [email_address]
Upcoming SlideShare
Loading in...5
×

DPC2007 Case Study Surfnet (Herman Van Dompseler)

1,041
-1

Published on

Dutch PHP Conference 2007

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
1,041
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

DPC2007 Case Study Surfnet (Herman Van Dompseler)

  1. 1. SURFnet videotheek Web2.0 met php
  2. 2. Wie staat er voor jullie? <ul><li>Herman van Dompseler </li></ul><ul><li>Freelance Internet Architect </li></ul><ul><li>Veel ervaring met audio en video streaming </li></ul><ul><li>Werkzaam bij SURFnet </li></ul><ul><li>Hellup.nl </li></ul>
  3. 3. SURFnet <ul><li>Een hoogwaardig computernetwerk speciaal voor het hoger onderwijs en onderzoek in Nederland. </li></ul><ul><li>Meer dan 180 aangesloten instellingen: </li></ul><ul><ul><li>universiteiten </li></ul></ul><ul><ul><li>hogescholen </li></ul></ul><ul><ul><li>onderzoeksinstituten </li></ul></ul><ul><ul><li>(wetenschappelijke) bibliotheken </li></ul></ul><ul><ul><li>(academische) ziekenhuizen </li></ul></ul><ul><li>750.000 studenten en medewerkers </li></ul>
  4. 4. SURFnet videotheek <ul><li>Streaming video platform voor Hoger onderwijs en onderzoek </li></ul><ul><li>1998 A/V hosting dienst </li></ul><ul><li>2003 SVP 1.0 </li></ul><ul><li>2004 SVP 2.0 </li></ul><ul><li>2005 SN/KN videoplatform </li></ul><ul><li>2007 VIP </li></ul><ul><li>120 secties – 650 gebruikers </li></ul><ul><li>20.000 video’s </li></ul><ul><li>4 TB aan materiaal </li></ul><ul><li>700.000 streams per maand, 2,8 miljoen t/m april </li></ul>
  5. 5. Waar gaat het vandaag over? <ul><li>De uitdaging </li></ul><ul><li>Service oriented architecture </li></ul><ul><li>User generated content </li></ul><ul><li>Rich user experience </li></ul><ul><li>Web2.0 met php </li></ul>
  6. 6. De uitdaging
  7. 7. Wens <ul><li>VIP = YouTube + </li></ul><ul><li>VP-X = Een platform waar meerdere applicaties gebruik van maken </li></ul><ul><li>Betrouwbaar, stabiel, veel potentiele gebruikers, … </li></ul>UITDAGING
  8. 8. YouTube + <ul><li>Afscherming van video’s met A-select </li></ul><ul><li>Gericht op onderwijs en onderzoek (incl Academia) </li></ul><ul><li>Combinatie en integratie met andere SURFnet eindgebruikersdiensten </li></ul><ul><li>Beter zoeken en vinden </li></ul><ul><li>Streamen en downloaden </li></ul><ul><li>Hoge kwaliteit (HD) en multiformaat (wmv, mpeg4, flash) </li></ul>UITDAGING
  9. 9. Hoge kwaliteit? UITDAGING
  10. 10. Het logische model UITDAGING
  11. 11. Platformen <ul><li>Frontend </li></ul><ul><li>Microsoft Sharepoint vanwege integratie met andere </li></ul><ul><li>SURFnet diensten </li></ul><ul><li>Applicatie </li></ul><ul><li>Linux, PHP en Mysql </li></ul><ul><li>Video database </li></ul><ul><li>Linux, PHP en Mysql </li></ul><ul><li>FFMPEG voor genereren van flash preview </li></ul><ul><li>Streaming componenten </li></ul><ul><li>Apple Podcast server met Mac OS X voor streaming workflow </li></ul><ul><li>Streaming servers van diverse partijen voor afspelen in native format </li></ul>UITDAGING
  12. 12. Service Oriented Architecture
  13. 13. Architectuur SOA
  14. 14. Interfaces SOA
  15. 15. 1. HTML interface <ul><li>(Tussen presentatie en logica laag) </li></ul><ul><li>De presentatie blijft eenvoudig, geeft alleen vorm </li></ul><ul><li>Snel ontwikkelen door duidelijke afspraak </li></ul><ul><li>Snel in gebruik, geen xml translatie op client </li></ul><ul><li>Logica laag is leidend en verantwoordelijk voor componenten en kan nu ook de werking vastleggen </li></ul>SOA
  16. 16. 2. XML interface <ul><li>(Tussen logica en webservice laag) </li></ul><ul><li>REST </li></ul><ul><li>Losse koppeling </li></ul><ul><li>Webservice laag hergebruiken </li></ul><ul><li>Componenten in webservice laag uitwisselbaar </li></ul><ul><li>‘ Internet als een platform’ </li></ul>SOA
  17. 17. User Generated Content
  18. 18. De gebruiker maakt de data <ul><li>Wikipedia </li></ul><ul><li>Blogs </li></ul><ul><li>Foto’s en video </li></ul><ul><li>Reviews, rating en tagging </li></ul>USER CONTENT
  19. 19. Issue: identificeer de gebruiker <ul><li>Single Sign On met a-select </li></ul><ul><li>Aanmelden met instellingsaccount </li></ul><ul><li>Autorisatie met a-select attributen </li></ul><ul><li>Afschermen van video op email adres ‘@uva.nl’ </li></ul><ul><li>(kijk ook eens naar OpenId / Identity 2.0) </li></ul>USER CONTENT
  20. 20. Issue: gedistribueerde data <ul><li>Tagging en reviews in de applicatie </li></ul><ul><li>Video data in de database achter de webservices </li></ul>USER CONTENT Zoeken naar een video met ‘titel’ EN ‘tag’ is niet triviaal Wij kozen ervoor om de tags naar de webservices te kopieren en al het zoeken door mysql te laten doen.
  21. 21. Rich User Experience
  22. 22. AJAX: webdesign stijl <ul><li>Javascript </li></ul><ul><li>XmlHTTPRequest </li></ul><ul><li>Zorg ervoor dat de user het gevoel heeft een desktop applicatie te bedienen in plaats van een website. Onderdelen van een pagina verversen ipv. hele pagina’s. </li></ul><ul><li>Libraries: prototype.js </li></ul>EXPERIENCE
  23. 23. Denk in componenten EXPERIENCE
  24. 24. Issue: upload formulier <ul><li>Een component verversen kan met een GET of POST request met ‘XmlHttpRequest’. </li></ul><ul><li>Een SUBMIT van een file kan dit niet en moet over een ‘gewone’ http call. Dit betekent een nieuwe webpagina. </li></ul>EXPERIENCE Wil je toch alleen een component updaten? 1. Submit de file naar een 2. niet zichtbaar iframe. Verander tergelijkertijd de <div> van het formulier met een mooie animatie. 3. Bij ‘onload’ van het iframe verander je de <div> van de animatie met een bedank pagina.
  25. 25. Issue: cross domain <ul><li>In de architectuur zijn meerdere systemen die door meerdere partijen worden ontwikkeld op meerdere platformen en meerdere locaties. </li></ul>EXPERIENCE Oplossing: gebruik een proxy. Je kan niet op een webpagina content tonen van verschillende domeinen en vervolgens tussen componenten communiceren.
  26. 26. Web2.0 met php
  27. 27. Hoever zijn wij? WEB2.0 MET PHP
  28. 28. Wat doen anderen? <ul><li>Flickr Delicious Hellup.nl Hyves last.fm facebook Tagmos DIGG </li></ul>WEB2.0 MET PHP
  29. 29. <ul><li>Vind antwoord op je vraag </li></ul><ul><li>Persoonlijk web2.0 experiment </li></ul><ul><li>Tagging met library: freetag </li></ul><ul><li>Yahoo answers </li></ul>WEB2.0 MET PHP
  30. 30. Waar rekening mee houden <ul><li>Web 2.0 is geen product maken, maar een service bieden aan eindgebruikers </li></ul><ul><li>Zoek eenvoud in de oplossing </li></ul><ul><li>Werk in componenten </li></ul><ul><li>Losse koppeling met simpele webservices </li></ul><ul><li>Open api’s / interfaces, laat andere je data (her)gebruiken </li></ul><ul><li>Samenwerken met andere partijen </li></ul><ul><li>Diensten vereisen constante verandering, dan is een scripting taal ideaal in gebruik: denk aan perl, python, ruby en PHP! </li></ul><ul><li>Betrek gebruikers bij de dienst / de ontwikkeling </li></ul><ul><li>Korte ontwikkel iteraties </li></ul><ul><li>Vaak releasen </li></ul>WEB2.0 MET PHP
  31. 31. Vragen? [email_address]
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×