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

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

4 comments

Comments 1 - 4 of 4 previous next Post a comment

Post a comment
Embed Video
Edit your comment Cancel

1 Favorite

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

  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

+ Jasper MoelkerJasper Moelker, 7 months ago

custom

1133 views, 1 favs, 5 embeds more stats

Web (2.0) applications allow you to share, publish, more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 1133
    • 1114 on SlideShare
    • 19 from embeds
  • Comments 4
  • Favorites 1
  • Downloads 66
Most viewed embeds
  • 9 views on http://urbandetectives.com
  • 5 views on http://www.urbandetectives.com
  • 3 views on http://www.slideshare.net
  • 1 views on http://bowordpress.better-office.de
  • 1 views on http://www.cerproindent.blogspot.com

more

All embeds
  • 9 views on http://urbandetectives.com
  • 5 views on http://www.urbandetectives.com
  • 3 views on http://www.slideshare.net
  • 1 views on http://bowordpress.better-office.de
  • 1 views on http://www.cerproindent.blogspot.com

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories