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

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...
...
...

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...
...
...

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...
...
...

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...
...
...

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...
...
...

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
...

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

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)

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 )

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 )

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 )

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
> ...

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
> ...

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
> ...

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...
...

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

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

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

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

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

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...
...
...

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...
...
...

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

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

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

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

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 !

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 !

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 !

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 !

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 !

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 !

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...
...
...

For more lectures visit:
www.UrbanDetectives.com
PARALLEL WORLDS LECTURE SERIES 2009