Upload
jasper-moelker
View
1.735
Download
2
Embed Size (px)
DESCRIPTION
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).
Citation preview
PARALLEL WORLDS LECTURE SERIES 2009
Lecture: 06-04-0916:00 - 18:00IAB, São Paulo, Brazil
Jasper Moelker (Active IDs) World of Web Apps
IMAGES
VIDEO
MAPS
FORMS
CALENDARS
PRESENTATIONS
FLASH, RSS, OTHER...
AUDIO
picasa.com flickr.com
WEBLOG
...
CUSTOM SITE GOOGLE SITES
...
WEB APPLICATIONSFRAME WORK with
referencesummar yembed web appselec t web appsetup f rameworkconcept
IMAGES
VIDEO
MAPS
FORMS
CALENDARS
PRESENTATIONS
FLASH, RSS, OTHER...
AUDIO
picasa.com flickr.com
WEBLOG
...
CUSTOM SITE GOOGLE SITES
...
IMAGES
f
VIDEO
MAPS
AUDIO
picasa.com
IMAGES
W hy we b a p p s ?
Web appl icat ions a l low you to publ ish data onl ine.Dur ing the research & design process web apps can be implemented as a tool to organize and communicate mult imedia content .
We b 2 . 0 a p p s ?
Web 2.0 stands for the socia l / par t ic ipator y webWeb 2 .0 func t ional i t y : tag, b log, comment, modify, share, rank , customize!
referencesummar yembed web appselec t web appsetup f rameworkconcept
IMAGES
VIDEO
MAPS
FORMS
CALENDARS
PRESENTATIONS
FLASH, RSS, OTHER...
AUDIO
picasa.com flickr.com
WEBLOG
...
CUSTOM SITE GOOGLE SITES
...
1. create framework
referencesummar yembed web appselec t web appsetup f rameworkconcept
IMAGES
VIDEO
MAPS
FORMS
CALENDARS
PRESENTATIONS
FLASH, RSS, OTHER...
AUDIO
picasa.com flickr.com
WEBLOG
...
CUSTOM SITE GOOGLE SITES
...
1. create framework 2. select web apps
referencesummar yembed web appselec t web appsetup f rameworkconcept
IMAGES
VIDEO
MAPS
FORMS
CALENDARS
PRESENTATIONS
FLASH, RSS, OTHER...
AUDIO
picasa.com flickr.com
WEBLOG
...
CUSTOM SITE GOOGLE SITES
...
1. create framework
3. embed apps
2. select web apps
referencesummar yembed web appselec t web appsetup f rameworkconcept
WEBLOGCUSTOM SITE GOOGLE SITES
...
1. create framework
referencesummar yembed web appselec t web appsetup f rameworkconcept
CUSTOM SITE WEBLOG
C r e a t e yo u r ow n we b s i t e ( f ra m e wo r k ) :
Yo u N E E D :> HTML editor> ser ver space> domain> k nowledge & sk i l l s
Yo u G E T:> Total f reedom in layout> Total f reedom in navigat ion
U s e a n e x i s t i n g f ra m e wo r k ( e. g. B l o gg e r ) :
Yo u N E E D :> Google account
Yo u G E T:> domain & storage space> layout templates> w ysiw yg editor
referencesummar yembed web appselec t web appsetup f rameworkconcept
EXAMPLE CUSTOM FRAME
C u s t o m f ra m e w / S l i d e S h a r e s i l d e ca s t e m b e d d e d ( s o u r ce : c s i - s p. u r b ) a n d e t c t i v e s. co m )
referencesummar yembed web appselec t web appsetup f rameworkconcept
EXAMPLE CUSTOM FRAME
C u s t o m f ra m e w / G o o g l e C a l e n d a r e m b e d d e d ( s o u r ce : p ra k t i j k v e r e n i g i n g b o u t . n l )
referencesummar yembed web appselec t web appsetup f rameworkconcept
EXAMPLE EXISTING FRAME
We b l o g w / Yo uTu b e v i d e o e m b e d d e d ( s o u r ce : a r 0 0 5 1 . b l o g s p o t . co m )
referencesummar yembed web appselec t web appsetup f rameworkconcept
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 r ce : c s i - s a o p a u l o. b l o g s p o t . co m )
referencesummar yembed web appselec t web appsetup f rameworkconcept
Po r t a l b l o g :cs i -saopaulo.blogspot .com> share your thoughts> group discuss ions> . . .
Te a m b l o g s :cs i -saopaulo#.blogspot .com> 1 for each team (#)> projec t d iar y> progress day by day> . . .
PORTAL & TEAM BLOGS
referencesummar yembed web appselec t web appsetup f rameworkconcept
Po r t a l b l o g :cs i -saopaulo.blogspot .com> share your thoughts> group discuss ions> . . .
Te a m b l o g s :cs i -saopaulo#.blogspot .com> 1 for each team (#)> projec t d iar y> progress day by day> . . .
PORTAL & TEAM BLOGS
referencesummar yembed web appselec t web appsetup f rameworkconcept
Po r t a l b l o g :cs i -saopaulo.blogspot .com> share your thoughts> group discuss ions> . . .
Te a m b l o g s :cs i -saopaulo#.blogspot .com> 1 for each team (#)> projec t d iar y> progress day by day> . . .
PORTAL & TEAM BLOGS
referencesummar yembed web appselec t web appsetup f rameworkconcept
IMAGES
VIDEO
MAPS
FORMS
CALENDARS
PRESENTATIONS
FLASH, RSS, OTHER...
AUDIO
picasa.com flickr.com
...
2. select web apps
referencesummar yembed web appselec t web appsetup f rameworkconcept
VIDEO
Yo uTu b e :> (Geo)tag> Embed in GMaps> Ful l HD> Annotat ions
A l t e r n a t i ve s :> Jumpcut> Vimeo
referencesummar yembed web appselec t web appsetup f rameworkconcept
IMAGES
P i ca s a ( we b ) :> Single images> Sl ideshows> Share> (Geo)tag
A l t e r n a t i ve s :> Fl ick r
To o l s f o r X L i m a g e s :> PhotoZoom> Zoomify> Google img cutter
referencesummar yembed web appselec t web appsetup f rameworkconcept
AUDIO
e s n i p s :> many formats> player widget> 5GB share> folder struc tures
a l t e r n a t i ve p l a ye r s :> Google MP3 player> Yahoo media player> Del ic ious playtagger
referencesummar yembed web appselec t web appsetup f rameworkconcept
MAPS
G o o g l e M a p s :> Road / Sat / Terra in> Custom maps> L ink to YouTube> L ink to PicasaWeb
A l t e r n a t i ve s :> Yahoo M aps> L ive M aps
referencesummar yembed web appselec t web appsetup f rameworkconcept
PRESENTATIONS
S l i d e S h a r e :> (Geo)tag> Embed in GMaps> Ful l HD> Annotat ions
O m n i s i o :> Sl ideshow & v ideo> Dual v iew> Bought by Google
O m n i s i o :> Sl ideshow & v ideo> Dual v iew
referencesummar yembed web appselec t web appsetup f rameworkconcept
IMAGES
VIDEO
MAPS
FORMS
CALENDARS
PRESENTATIONS
FLASH, RSS, OTHER...
AUDIO
picasa.com flickr.com
WEBLOG
...
CUSTOM SITE GOOGLE SITES
...
3. embed apps
referencesummar yembed web appselec t web appsetup f rameworkconcept
IMAGES
VIDEO
MAPS
FORMS
CALENDARS
PRESENTATIONS
FLASH, RSS, OTHER...
AUDIO
picasa.com flickr.com
WEBLOG
...
CUSTOM SITE GOOGLE SITES
...
3. embed apps
> first: get embed code
> then..:place web app
referencesummar yembed web appselec t web appsetup f rameworkconcept
FIRST STEP: GET EMBED CODE
H ow t o ? :> search embed opt ion> customize (opt ional )> copy the code
E xa m p l e G o o g l e M a p s :> c l ick “ l ink ”> c l ick customize> adjust sett ings (width; height ; v iew)> copy code
referencesummar yembed web appselec t web appsetup f rameworkconcept
FIRST STEP: GET EMBED CODE
H ow t o ? :> search embed opt ion> customize (opt ional )> copy the code
E xa m p l e G o o g l e M a p s :> c l ick “ l ink ”> c l ick customize> adjust sett ings (width; height ; v iew)> copy code
referencesummar yembed web appselec t web appsetup f rameworkconcept
FIRST STEP: GET EMBED CODE
H ow t o ? :> search embed opt ion> customize (opt ional )> copy the code
E xa m p l e G o o g l e M a p s :> c l ick “ l ink ”> c l ick customize> adjust sett ings (width; height ; v iew)> copy code
referencesummar yembed web appselec t web appsetup f rameworkconcept
FIRST STEP: GET EMBED CODE
H ow t o ? :> search embed opt ion> customize (opt ional )> copy the code
E xa m p l e G o o g l e M a p s :> c l ick “ l ink ”> c l ick customize> adjust sett ings (width; height ; v iew)> copy code
HTML CODE FOR EMBEDDING:
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:
src=”SourceFileUrl” (replace SourceFileUrl by the url of the content you want embed)width=”Value” (replace value by a value in pixels (eg. 400) or percentage (eg. 25%))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 you for instance want to embed an app into your blog that has posts with a maximum width of 400 pixels make sure your width value in the embed code is no more than 400.
<EMBED> TAG:
code: <embed src=”SourceFileUrl” width=”400” height=”300”/>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
referencesummar yembed web appselec t web appsetup f rameworkconcept
FINAL STEP: PLACE WEB APP
H ow t o i n B l o gg e r ? :> go to your weblog> create “new post ”> selec t “Edit H tml” tab
> PASTE THE CODE
> (add t i t le and tags)> selec t “Publ ish Post ”> selec t “ View Blog”
> You are done!
referencesummar yembed web appselec t web appsetup f rameworkconcept
FINAL STEP: PLACE WEB APP
H ow t o i n B l o gg e r ? :> go to your weblog> create “new post ”> selec t “Edit H tml” tab
> PASTE THE CODE
> (add t i t le and tags)> selec t “Publ ish Post ”> selec t “ View Blog”
> You are done!
referencesummar yembed web appselec t web appsetup f rameworkconcept
FINAL STEP: PLACE WEB APP
H ow t o i n B l o gg e r ? :> go to your weblog> create “new post ”> selec t “Edit H tml” tab
> PASTE THE CODE
> (add t i t le and tags)> selec t “Publ ish Post ”> selec t “ View Blog”
> You are done!
referencesummar yembed web appselec t web appsetup f rameworkconcept
FINAL STEP: PLACE WEB APP
H ow t o i n B l o gg e r ? :> go to your weblog> create “new post ”> selec t “Edit H tml” tab
> PASTE THE CODE
> (add t i t le and tags)> selec t “Publ ish Post ”> selec t “ View Blog”
> You are done!
referencesummar yembed web appselec t web appsetup f rameworkconcept
FINAL STEP: PLACE WEB APP
H ow t o i n B l o gg e r ? :> go to your weblog> create “new post ”> selec t “Edit H tml” tab
> PASTE THE CODE
> (add t i t le and tags)> selec t “Publ ish Post ”> selec t “ View Blog”
> You are done!
referencesummar yembed web appselec t web appsetup f rameworkconcept
FINAL STEP: PLACE WEB APP
H ow t o i n B l o gg e r ? :> go to your weblog> create “new post ”> selec t “Edit H tml” tab
> PASTE THE CODE
> (add t i t le and tags)> selec t “Publ ish Post ”> selec t “ View Blog”
> You are done!
referencesummar yembed web appselec t web appsetup f rameworkconcept
IMAGES
VIDEO
MAPS
FORMS
CALENDARS
PRESENTATIONS
FLASH, RSS, OTHER...
AUDIO
picasa.com flickr.com
WEBLOG
...
CUSTOM SITE GOOGLE SITES
...
1. create framework 2. select web apps
3. embed apps
> first: get embed code
> then..:place web app
referencesummar yembed web appselec t web appsetup f rameworkconcept
PARALLEL WORLDS LECTURE SERIES 2009
For more lectures visit:
www.UrbanDetectives.com