SURFnet videotheek Web2.0 met php

Wie staat er voor jullie? Herman van Dompseler Freelance Internet Architect Veel ervaring met audio en video streaming Werkzaam bij SURFnet Hellup.nl

Herman van Dompseler

Freelance Internet Architect

Veel ervaring met audio en video streaming

Werkzaam bij SURFnet

Hellup.nl

SURFnet Een hoogwaardig computernetwerk speciaal voor het hoger onderwijs en onderzoek in Nederland. Meer dan 180 aangesloten instellingen: universiteiten hogescholen onderzoeksinstituten (wetenschappelijke) bibliotheken (academische) ziekenhuizen 750.000 studenten en medewerkers

Een hoogwaardig computernetwerk speciaal voor het hoger onderwijs en onderzoek in Nederland.

Meer dan 180 aangesloten instellingen:

universiteiten

hogescholen

onderzoeksinstituten

(wetenschappelijke) bibliotheken

(academische) ziekenhuizen

750.000 studenten en medewerkers

SURFnet videotheek Streaming video platform voor Hoger onderwijs en onderzoek 1998 A/V hosting dienst 2003 SVP 1.0 2004 SVP 2.0 2005 SN/KN videoplatform 2007 VIP 120 secties – 650 gebruikers 20.000 video’s 4 TB aan materiaal 700.000 streams per maand, 2,8 miljoen t/m april

Streaming video platform voor Hoger onderwijs en onderzoek

1998 A/V hosting dienst

2003 SVP 1.0

2004 SVP 2.0

2005 SN/KN videoplatform

2007 VIP

120 secties – 650 gebruikers

20.000 video’s

4 TB aan materiaal

700.000 streams per maand, 2,8 miljoen t/m april

Waar gaat het vandaag over? De uitdaging Service oriented architecture User generated content Rich user experience Web2.0 met php

De uitdaging

Service oriented architecture

User generated content

Rich user experience

Web2.0 met php

De uitdaging

Wens VIP = YouTube + VP-X = Een platform waar meerdere applicaties gebruik van maken Betrouwbaar, stabiel, veel potentiele gebruikers, … UITDAGING

VIP = YouTube +

VP-X = Een platform waar meerdere applicaties gebruik van maken

Betrouwbaar, stabiel, veel potentiele gebruikers, …

YouTube + Afscherming van video’s met A-select Gericht op onderwijs en onderzoek (incl Academia) Combinatie en integratie met andere SURFnet eindgebruikersdiensten Beter zoeken en vinden Streamen en downloaden Hoge kwaliteit (HD) en multiformaat (wmv, mpeg4, flash) UITDAGING

Afscherming van video’s met A-select

Gericht op onderwijs en onderzoek (incl Academia)

Combinatie en integratie met andere SURFnet eindgebruikersdiensten

Beter zoeken en vinden

Streamen en downloaden

Hoge kwaliteit (HD) en multiformaat (wmv, mpeg4, flash)

Hoge kwaliteit? UITDAGING

Het logische model UITDAGING

Platformen Frontend Microsoft Sharepoint vanwege integratie met andere SURFnet diensten Applicatie Linux, PHP en Mysql Video database Linux, PHP en Mysql FFMPEG voor genereren van flash preview Streaming componenten Apple Podcast server met Mac OS X voor streaming workflow Streaming servers van diverse partijen voor afspelen in native format UITDAGING

Frontend

Microsoft Sharepoint vanwege integratie met andere

SURFnet diensten

Applicatie

Linux, PHP en Mysql

Video database

Linux, PHP en Mysql

FFMPEG voor genereren van flash preview

Streaming componenten

Apple Podcast server met Mac OS X voor streaming workflow

Streaming servers van diverse partijen voor afspelen in native format

Service Oriented Architecture

Architectuur SOA

Interfaces SOA

1. HTML interface (Tussen presentatie en logica laag) De presentatie blijft eenvoudig, geeft alleen vorm Snel ontwikkelen door duidelijke afspraak Snel in gebruik, geen xml translatie op client Logica laag is leidend en verantwoordelijk voor componenten en kan nu ook de werking vastleggen SOA

(Tussen presentatie en logica laag)

De presentatie blijft eenvoudig, geeft alleen vorm

Snel ontwikkelen door duidelijke afspraak

Snel in gebruik, geen xml translatie op client

Logica laag is leidend en verantwoordelijk voor componenten en kan nu ook de werking vastleggen

2. XML interface (Tussen logica en webservice laag) REST Losse koppeling Webservice laag hergebruiken Componenten in webservice laag uitwisselbaar ‘ Internet als een platform’ SOA

(Tussen logica en webservice laag)

REST

Losse koppeling

Webservice laag hergebruiken

Componenten in webservice laag uitwisselbaar

‘ Internet als een platform’

User Generated Content

De gebruiker maakt de data Wikipedia Blogs Foto’s en video Reviews, rating en tagging USER CONTENT

Wikipedia

Blogs

Foto’s en video

Reviews, rating en tagging

Issue: identificeer de gebruiker Single Sign On met a-select Aanmelden met instellingsaccount Autorisatie met a-select attributen Afschermen van video op email adres ‘@uva.nl’ (kijk ook eens naar OpenId / Identity 2.0) USER CONTENT

Single Sign On met a-select

Aanmelden met instellingsaccount

Autorisatie met a-select attributen

Afschermen van video op email adres ‘@uva.nl’

(kijk ook eens naar OpenId / Identity 2.0)

Issue: gedistribueerde data Tagging en reviews in de applicatie Video data in de database achter de webservices 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.

Tagging en reviews in de applicatie

Video data in de database achter de webservices

Rich User Experience

AJAX: webdesign stijl Javascript XmlHTTPRequest 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. Libraries: prototype.js EXPERIENCE

Javascript

XmlHTTPRequest

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.

Libraries: prototype.js

Denk in componenten EXPERIENCE

Issue: upload formulier Een component verversen kan met een GET of POST request met ‘XmlHttpRequest’. Een SUBMIT van een file kan dit niet en moet over een ‘gewone’ http call. Dit betekent een nieuwe webpagina. 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.

Een component verversen kan met een GET of POST request met ‘XmlHttpRequest’.

Een SUBMIT van een file kan dit niet en moet over een ‘gewone’ http call. Dit betekent een nieuwe webpagina.

Issue: cross domain In de architectuur zijn meerdere systemen die door meerdere partijen worden ontwikkeld op meerdere platformen en meerdere locaties. EXPERIENCE Oplossing: gebruik een proxy. Je kan niet op een webpagina content tonen van verschillende domeinen en vervolgens tussen componenten communiceren.

In de architectuur zijn meerdere systemen die door meerdere partijen worden ontwikkeld op meerdere platformen en meerdere locaties.

Web2.0 met php

Hoever zijn wij? WEB2.0 MET PHP

Wat doen anderen? Flickr Delicious Hellup.nl Hyves last.fm facebook Tagmos DIGG WEB2.0 MET PHP

Flickr Delicious Hellup.nl Hyves last.fm facebook Tagmos DIGG

Vind antwoord op je vraag Persoonlijk web2.0 experiment Tagging met library: freetag Yahoo answers WEB2.0 MET PHP

Vind antwoord op je vraag

Persoonlijk web2.0 experiment

Tagging met library: freetag

Yahoo answers

Waar rekening mee houden Web 2.0 is geen product maken, maar een service bieden aan eindgebruikers Zoek eenvoud in de oplossing Werk in componenten Losse koppeling met simpele webservices Open api’s / interfaces, laat andere je data (her)gebruiken Samenwerken met andere partijen Diensten vereisen constante verandering, dan is een scripting taal ideaal in gebruik: denk aan perl, python, ruby en PHP! Betrek gebruikers bij de dienst / de ontwikkeling Korte ontwikkel iteraties Vaak releasen WEB2.0 MET PHP

Web 2.0 is geen product maken, maar een service bieden aan eindgebruikers

Zoek eenvoud in de oplossing

Werk in componenten

Losse koppeling met simpele webservices

Open api’s / interfaces, laat andere je data (her)gebruiken

Samenwerken met andere partijen

Diensten vereisen constante verandering, dan is een scripting taal ideaal in gebruik: denk aan perl, python, ruby en PHP!

Betrek gebruikers bij de dienst / de ontwikkeling

Korte ontwikkel iteraties

Vaak releasen

Vragen? [email_address]