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

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


AUDIO


WEBLOG

...


...

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!


IMAGES

VIDEO

MAPS

FORMS

CALENDARS

PRESENTATIONS


AUDIO


WEBLOG

...


...

1. create framework


IMAGES

VIDEO

MAPS

FORMS

CALENDARS

PRESENTATIONS


AUDIO


WEBLOG

...


...

1. create framework 2. select web apps


IMAGES

VIDEO

MAPS

FORMS

CALENDARS

PRESENTATIONS


AUDIO


WEBLOG

...


...

1. create framework

3. embed apps

2. select web apps


WEBLOGCUSTOM SITE GOOGLE SITES

...

1. create framework


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


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 )


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 )


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 )


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 )


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




PORTAL & TEAM BLOGS




PORTAL & TEAM BLOGS


IMAGES

VIDEO

MAPS

FORMS

CALENDARS

PRESENTATIONS


AUDIO


...

2. select web apps


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


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


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


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


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


IMAGES

VIDEO

MAPS

FORMS

CALENDARS

PRESENTATIONS


AUDIO


WEBLOG

...


...

3. embed apps


IMAGES

VIDEO

MAPS

FORMS

CALENDARS

PRESENTATIONS


AUDIO


WEBLOG

...


...

3. embed apps

> first: get embed code

> then..:place web app


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


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!




> PASTE THE CODE


> You are done!




> PASTE THE CODE


> You are done!




> PASTE THE CODE


> You are done!




> PASTE THE CODE


> You are done!




> PASTE THE CODE


> You are done!


IMAGES

VIDEO

MAPS

FORMS

CALENDARS

PRESENTATIONS


AUDIO


WEBLOG

...


...

1. create framework 2. select web apps

3. embed apps

> first: get embed code

> then..:place web app


PARALLEL WORLDS LECTURE SERIES 2009

For more lectures visit:

www.UrbanDetectives.com

Education

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