CSI.SP: World of Web Apps by Jasper Moelker (06 Apr 2009)

2,327 views

Published on

Web (2.0) applications allow you to share, publish, tag, blog, comment, modify, augment, rank and customize multimedia content like images, videos, audio recordings, slideshows, documents, maps and more. During the research & design process web apps can be implemented as a tool to organize and communicate multimedia content.
This lecture / workshop describes a selection of web applications for working with multimedia and how to embed them into your own or an existing framework (such as a weblog).

2 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total views
2,327
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
75
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

CSI.SP: World of Web Apps by Jasper Moelker (06 Apr 2009)

  1. Jasper Moelker (Active IDs) World of Web Apps Lecture: 06-04-09 16:00 - 18:00 IAB, São Paulo, Brazil PARALLEL WORLDS LECTURE SERIES 2009
  2. con cept setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce IMAGES picasa.com flickr.com VIDEO FRAMEWORK W E B A P P L I C AT I O N S w i th AUDIO MAPS FORMS CALENDARS PRESENTATIONS CUSTOM SITE GOOGLE SITES WEBLOG FLASH, RSS, OTHER... ... ...
  3. con cept setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce IMAGES W hy we b a p p s ? picasa.com flickr.com f Web applications allow you to publish data online. VIDEO During t h e resea rc h & d esign p ro cess we b a pps c a n be i mpl e me n te d a s a tool to organize and communicate multimedia co ntent. AUDIO We b 2 . 0 a p p s ? Web 2.0 stands fo r the social / par ticipator y we b Web 2.0 func tionalit y : tag, blog, comment, modify, share, rank , customize! MAPS FORMS CALENDARS PRESENTATIONS CUSTOM SITE GOOGLE SITES WEBLOG FLASH, RSS, OTHER... ... ...
  4. con cept setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce IMAGES picasa.com flickr.com VIDEO AUDIO 1. create framework MAPS FORMS CALENDARS PRESENTATIONS CUSTOM SITE GOOGLE SITES WEBLOG FLASH, RSS, OTHER... ... ...
  5. con cept setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce IMAGES picasa.com flickr.com VIDEO AUDIO 2. select web apps 1. create framework MAPS FORMS CALENDARS PRESENTATIONS CUSTOM SITE GOOGLE SITES WEBLOG FLASH, RSS, OTHER... ... ...
  6. con cept setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce IMAGES picasa.com flickr.com VIDEO AUDIO 2. select web apps 1. create framework MAPS 3. embed apps FORMS CALENDARS PRESENTATIONS CUSTOM SITE GOOGLE SITES WEBLOG FLASH, RSS, OTHER... ... ...
  7. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce 1. create framework CUSTOM SITE GOOGLE SITES WEBLOG ...
  8. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce CUSTOM SITE WEBLOG Create your own website (framework): U s e a n e x i s t i n g f ra m ewo r k ( e. g. B l o gg e r ) : You NEED: You NEED: > HTML edito r > G o o g l e a cco u n t > ser ver spa ce > dom ain > k n ow l edg e & sk ills Yo u GET: Yo u G ET: > Total f reedom in layout > domain & storage space > Total freedom in navigation > layout template s > w ys i w yg e d i to r
  9. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce EXAMPLE CUSTOM FRAME Cust om f ra m e w / S li deSh are si l decast embe dde d (source : csi-sp. ur b)ande t c tive s. com)
  10. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce EXAMPLE CUSTOM FRAME Cu s to m f ra m e w / G o o g l e Ca l e n d a r e m b e d d e d ( s o u rce : p ra k t i j k vere n i g i n g b o u t . n l )
  11. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce EXAMPLE EXISTING FRAME We b l o g w / YouTu b e v i d e o e m b e d d e d ( s o u rce : a r 0 0 5 1 . b l o g s p o t . co m )
  12. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce EXAMPLE EXISTING FRAME We b l o g w / ( p e r s o n a l i z e d ) G o o g l e M a p s e m b e d d e d ( s o u rce : c s i - s a o p a u l o. b l o g s p o t . co m )
  13. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce PORTAL & TEAM BLOGS Po r ta l b l o g : csi-saopaulo.blogspot.com > share your thoughts > gro up discussio ns > ... Te a m b l o g s : csi-saopaulo#.blogspot.com > 1 fo r each te a m (#) > p ro j ec t diar y > p ro gress day by day > ...
  14. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce PORTAL & TEAM BLOGS Po r ta l b l o g : csi-saopaulo.blogspot.com > share your thoughts > gro up discussio ns > ... Te a m b l o g s : csi-saopaulo#.blogspot.com > 1 fo r each te a m (#) > p ro j ec t diar y > p ro gress day by day > ...
  15. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce PORTAL & TEAM BLOGS Po r ta l b l o g : csi-saopaulo.blogspot.com > share your thoughts > gro up discussio ns > ... Te a m b l o g s : csi-saopaulo#.blogspot.com > 1 fo r each te a m (#) > p ro j ec t diar y > p ro gress day by day > ...
  16. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce IMAGES picasa.com flickr.com VIDEO AUDIO 2. select web apps MAPS FORMS CALENDARS PRESENTATIONS FLASH, RSS, OTHER... ...
  17. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce VIDEO Yo uTu b e : > (G eo)tag > E mbed in G M a ps > Full HD > Annotations A l t e r n a t i ve s : > Jum pcut > Vi meo
  18. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce IMAGES Picasa (web): > S i ngl e im age s > S li d es h ows > S h are > (G eo)tag A l t e r n a t i ve s : > Fli c k r To ol s f or XL i mage s: > PhotoZoom > Zo o m if y > G o o g l e i m g c u t te r
  19. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce AUDIO e s n i ps: > m any for m ats > p layer w idge t > 5 G B s h are > fo ld e r str uc t ure s alternative players: > G o o g l e M P 3 p l aye r > Ya hoo m edia playe r > D e l i c i o u s p l ay t a g g e r
  20. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce MAPS Google Maps: > R o a d / S a t / Te r r a i n > Cu s tom m aps > L i nk to YouTube > L i nk to Picasa Web A l t e r n a t i ve s : > Ya hoo M ap s > L i ve M ap s
  21. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce PRESENTATIONS SlideShare: > (G eo)tag > E mbed in G M a ps > Full HD > Annotations Omnisio: > S li d es h ow & vide o > Dual view > B o u g h t by G o o g l e Omnisio: > S li d es h ow & vide o > Dual view
  22. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce IMAGES picasa.com flickr.com VIDEO AUDIO MAPS 3. embed apps FORMS CALENDARS PRESENTATIONS CUSTOM SITE GOOGLE SITES WEBLOG FLASH, RSS, OTHER... ... ...
  23. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce IMAGES picasa.com flickr.com VIDEO AUDIO MAPS 3. embed apps FORMS > first: get embed code > then..: CALENDARS place web app PRESENTATIONS CUSTOM SITE GOOGLE SITES WEBLOG FLASH, RSS, OTHER... ... ...
  24. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce FIRST STEP: GET EMBED CODE How to?: > s e a rch em bed o pt io n > c us tom ize ( opt io na l) > co py th e code E xa m p l e G o o g l e M a p s : > c li c k “ l in k ” > c li c k cus tomize > ad j u st s etting s (width; height; view) > co py code
  25. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce FIRST STEP: GET EMBED CODE How to?: > s e a rch em bed o pt io n > c us tom ize ( opt io na l) > co py th e code E xa m p l e G o o g l e M a p s : > c li c k “ l in k ” > c li c k cus tomize > ad j u st s etting s (width; height; view) > co py code
  26. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce FIRST STEP: GET EMBED CODE How to?: > s e a rch em bed o pt io n > c us tom ize ( opt io na l) > co py th e code E xa m p l e G o o g l e M a p s : > c li c k “ l in k ” > c li c k cus tomize > ad j u st s etting s (width; height; view) > co py code
  27. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce HTML CODE FOR EMBEDDING: FIRST STEP: GET EMBED CODE For embedding web applications different tags are used. It depends on the web application which tag is supported. All tags have similar parameters that determine what and how it's being dis- played. You might typically want to change the following three parameters: How to?: src=”SourceFileUrl” (replace SourceFileUrl by the url of the content you want embed) > s e a rch em bed o pt io n > c us tom ize ( opt io na l) width=”Value” (replace value by a value in pixels (eg. 400) or percentage (eg. 25%)) > co py th e code height=”Value” (replace value by a value in pixels (eg. 400) or percentage (eg. 25%)) The width and the height parameters determine the size of your embedded web application. If E xa m p l e G o o g l e M a p s : you for instance want to embed an app into your blog that has posts with a maximum width of > c li c k “ l in k ” 400 pixels make sure your width value in the embed code is no more than 400. > c li c k cus tomize > ad j u st s etting s <EMBED> TAG: (width; height; view) code: <embed src=”SourceFileUrl” width=”400” height=”300”/> > co py code function: Defines embedded content, such as a plug-in. more info: http://www.w3schools.com/tags/html5_embed.asp <OBJECT> TAG: code: <object src=”SourceFileUrl” width=”400” height=”300”> alternative scripts (executed if object is not supported by browser) </object> function: Used to include objects like images, audio, videos, Java applets, ActiveX, PDF, Flash. more info: http://www.w3schools.com/TAGS/tag_object.asp <IFRAME> TAG: code: <iframe src=”SourceFileUrl” width=”400” height=”300”> alternative text (shown if browser does not support iframes) </iframe> function: Defines an inline frame that contains another document. more info: http://www.w3schools.com/TAGS/tag_iframe.asp
  28. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce FINAL STEP: PLACE WEB APP H ow t o i n Bl ogger ? : > g o to your we blog > create “new post ” > selec t “Edit H tml ” tab > PAS T E THE CODE > ( a d d titl e and ta g s) > se le c t “Publ ish Post ” > s e le c t “ View Blog” > Yo u are don e !
  29. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce FINAL STEP: PLACE WEB APP H ow t o i n Bl ogger ? : > g o to your we blog > create “new post ” > selec t “Edit H tml ” tab > PAS T E THE CODE > ( a d d titl e and ta g s) > se le c t “Publ ish Post ” > s e le c t “ View Blog” > Yo u are don e !
  30. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce FINAL STEP: PLACE WEB APP H ow t o i n Bl ogger ? : > g o to your we blog > create “new post ” > selec t “Edit H tml ” tab > PAS T E THE CODE > ( a d d titl e and ta g s) > se le c t “Publ ish Post ” > s e le c t “ View Blog” > Yo u are don e !
  31. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce FINAL STEP: PLACE WEB APP H ow t o i n Bl ogger ? : > g o to your we blog > create “new post ” > selec t “Edit H tml ” tab > PAS T E THE CODE > ( a d d titl e and ta g s) > se le c t “Publ ish Post ” > s e le c t “ View Blog” > Yo u are don e !
  32. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce FINAL STEP: PLACE WEB APP H ow t o i n Bl ogger ? : > g o to your we blog > create “new post ” > selec t “Edit H tml ” tab > PAS T E THE CODE > ( a d d titl e and ta g s) > se le c t “Publ ish Post ” > s e le c t “ View Blog” > Yo u are don e !
  33. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce FINAL STEP: PLACE WEB APP H ow t o i n Bl ogger ? : > g o to your we blog > create “new post ” > selec t “Edit H tml ” tab > PAS T E THE CODE > ( a d d titl e and ta g s) > se le c t “Publ ish Post ” > s e le c t “ View Blog” > Yo u are don e !
  34. co n cep t setup framework selec t web a p p e mbe d we b a pp s u mma r y re fe re n ce IMAGES picasa.com flickr.com VIDEO AUDIO 2. select web apps 1. create framework MAPS 3. embed apps FORMS > first: get embed code > then..: CALENDARS place web app PRESENTATIONS CUSTOM SITE GOOGLE SITES WEBLOG FLASH, RSS, OTHER... ... ...
  35. For more lectures visit: www.UrbanDetectives.com PARALLEL WORLDS LECTURE SERIES 2009

×