Lively Web Presentation
⟳
Ellipse
Image
Line
LineWithArrow
LineWithArrows
List
Marker
text
PrimitiveShapes
Rectangle
Star
some text
Text
Triangle
-
+

search
more
PartsBinBrowser
X
M
–
A World of Active Objects for Work and Play
Lively Community People, Projects, Places, Progress All visualized and active Collaborations     Phoenix (composition, RAD)     AIS (visualizations, RAD)     Big Iron (real-time monitoring, RAD) Glide -> App Designer Team Dan Ingalls Robert Krahn Marko Roeder Rick McGeer HPI (Jens Lincke ++) UVic, UBC/Center for Digital Media
Ok
Architecture Issues
Meaningful Objects and Capabilities     May require a layer over monolithic systems     This inevitably suggests a better architecture Excellent documentation and search     Of course ;-) Safe to play, easy to recover     We work live in a wiki-like repository Easy to save and share     A concrete "parts bin" for system and new creations New apps as parts or web pages, or...
The Lively Web - IDE
Widgets → live apps Apps → live programming
12
1
2
3
4
5
6
7
8
9
10
11
The Lively Web
Want to serve web developers and even end-users     A JavaScript IDE is not the answer The Kit approach (mini ecosystem)     Components, connection, encapsulation Parts Bins - Cloud-based repositories of active content     Objects, properties, behaviors, apps, services Live Connect     Dataflow binding of active components Publishing     Built components can be stored as new parts     Instant sharing
The Lively Web
Communication Design Group / SAP Research
End-user empowerment
TitleSlideCloudOrchestration
CloudOrchestration5
CloudOrchestration2
CloudOrchestration1
CloudOrchestration3
CloudOrchestration4
CloudOrchestration6
↑
↓
slides
create new
add existing
remove
collect all
print
remove all
presentation
start
overlay
edit
PresentationController
X
–
Menu
End Users
Want to see and interact with meaningful objects Invisible state does not exist for them     Domain elements must be concrete Interaction must be immediate     Invisible processes don't exist for them Actions must have immediate effect Want to program with images and actions     Textual programming is not intuitive for them Drag and drop attributes and capabilities Wiring metaphor as in Fabrik, Pipes Capture actions as tiles, as in EToys, Scratch Programming by example
The Lively Web - composition
Shapes → live graphics Graphics → live widgets
text
Rotation
Color.SAPOrange = Color.rgb(240, 171, 0) // bars, bullet points Color.SAPGray = Color.rgb(102,102,102) // header
Workspace
X
M
–
disable grabbing