This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Technology behind the emulator
We considered popular options like Adobe Flash and Microsoft Silverlight, but discarded them: guess why…
...and what do you think we used instead?
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
AJAX in a nutshell
Until some time ago Web pages needed to be reloaded to see any update
AJAX technology allows dynamic, asynchronous updates- e.g., facebook notifications and “show new posts”
Data can flow back and forth between client and server
The key elements are Javascript and XML
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
GWT
Google released a Web Toolkit that allows to develop user interfaces in Java and then compile them to optimized JavaScript- Allows for better reuse and debug of code
Connection is made to a Web Server through simple RPC
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Emulator and Website architecture
Apache Web Server Apache Tomcat
Wordpress
Custom Wordpress
Plugins
Wordpress Plugins
MySql database
itsme emulator
itsme website theme
GWT
Spring
JDBC driver
Web browser
Javascript/HTML
http
://em
ula
tor.its
me.it
http
://ww
w.its
me.it
Platfo
rmData
Product
Client
GXT
JPA javamail QuartzRSS
spider
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Emulator open issues
Envisioning relations
Incremental setup to - involve user from minute 1- explain features directly
what to ask in a dialogue?
Other possible fields or ways of application?- Let’s make a “translation” exercise: how would you
frame Facebook in the emulator concept?
The itsme OS
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
What’s an OS?
“An Operating System (OS) is an interface between hardware and user which is responsible for the management and coordination of activities and the sharing of the resources of the computer that acts as a host for computing applications run on the machine.” - (source: http://en.wikipedia.org/wiki/Operating_system)
You might be familiar with the so-called “onion skin”- We’re not redoing everything again!
User
Applications
User Interface
File SystemMemory
Processes
HWLugano, 10/08/09 Marco Loregian: itsme from a technical perspective
What’s inside an OS?
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Sabayon Linux
Italian distribution (we hired its creators)
Community driven
Style-oriented
Excellent rating
Forst to add cool features such as 3D effects (Compiz)
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Presentation
Front-end Logic and Control
Proxy
Data Access
Back-end Logic
Data Storage and Persistence
Auth
enti
cati
on a
nd S
ecu
rity
Sys
tem
and N
etw
ork
ing
Fro
nt
En
dB
ack
En
dLin
ux O
SSabayon
Linux
QT graphical toolkit
Custom metadata
Heterogeneous sources
New metaphor
Ubiquitous access
Mig
rati
on S
upport
Applications , settings, data
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
The itsme architecture
As in Jan. ’09: some things have changed...
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Open issues
System modularity, ubiquitous computing, cloud computing
Licenses, open source
Front-end: itsme
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
What’s a front-end?
Basically, the user interface to the parts of the system responsible for “hot” computation
Internally, we speak of the itsme front-end as the frame for the new metaphor, proving support to interaction (operations) and access to applications
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Front-ends
There exist many different metaphor adopted by graphical (visual) front-ends- Yep, there are also non-visual: e.g., audio with
speech or gesture recognition, tactile interfaces (Braille)
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
What does it take?
We considered and started from ‘desktop’ user interfaces, due to basic similarities
Same elements used in a different way- Still within the WIMP paradigm (“window, icon,
menu, pointing device”), at the moment
...so we can reuse existing stuff!- Window management (well, almost)- Basic system configuration tools- ...
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Development
We have to redraw what’s on screen
- e.g., (file management) windows → venues, new panels and widgets
and link elements according to different policies- e.g., drag and drop, elements behaviors (on click, ...)
Current prototype developed using:- Sabayon Linux (4.*, now 5.*)- Python- QT
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Enlightenment
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
But actually they are all the same old desktop…
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
OLPC
One Laptop Per Child: cheap, low consumption computers for education
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
OLPC → Sugar
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Eldy
Linux distribution for elderly, but also for people looking for a very simple user interface
Italian initiative
Free
Supported by volunteers
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Eldy
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
...and now let’s talk about itsme :-)
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
itsme: prototype v. 0.3
Let’s see a demo!
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Video of a previous version
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Front-end architecture
The front-end follows a model/view/state architecture - The model classes store the data for the other
classes - The view classes provide UI and most of the logic
(since they have to show the data and also manage user interaction)
- The state classes implement a state machine controlling the behavior of UI elements
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
The main distinction inside the FE is between extensions and extendables. The extendables package contains all the classes which can be inherited to create specific classes. The extensions package contains all the specific subclasses.
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Open issues
Accessibility- Do you see any possible problem?
What to make a default, what cusomizable, what …?- Can you find examples?
Safety/security with respect to applications
Blend with the Web
Back-end: Guglielmo
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Why a back-end?
We need to store and manipulate metadata for the things we see and work with in the UI
Also data need to be stored and accessed in a different way
...this problem is well known
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Semantic Web
Huge amount of information on the Web
HTML: syntax to describe structure
Meaning is not expressed
Computers can’t help users finding and organizing stuff they don’t “understand”
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Example
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
The Web is made of documents...
apart from file extensions, they are all the same and links have no meaning
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
...but we talk about different things
things are related one to another: how can computers be aware of it?
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Top-down solutions
Information analysis, web scraping, natural language processing…
...unfeasible: human intervention, hard to maintain, legal issues
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Bottom-up solution
Embed semantical annotations into the data
Beside describing the generical structure of a document (HTML), add some metadata describing what each part of the structure is about
Example: not just links,
but links with a label
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Let’s generalize
HTML “has evolved” to XML
Instead of only expressing hypertexts, XML can be used to encode any form of structured data
XML can be used to define more specific languages (grammars, e.g., with DTDs)
XML can be used to define a way to describe what is on the Web
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
RDF
Resource Description Framework
W3C standard for describing resources in the Web
RDF identifies things using URIs(Uniform Resource Identifiers)
RDF uses simple statements (Triples) to describe things:- Thing-Property-Value- Subject-Predicate-Object
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
What’s RDF like?
OK… but what does it mean?
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
RDF = graphs
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
RDF = graphs
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
RDF = graphs
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Ontologies
How can computers know what labels represent?
Interoperability is reached when different parts share definitions (vocabularies)- syntactic vs semantic interoperability
If definitions are structured, and relations are well defined as properties, also further inference is possible
Lugano, 10/08/09 Marco Loregian: itsme from a technical perspective
Let’s make an example
Alice is a blogger who publishes articles at http://example.com/alice
She wants to declare the license of her work
The rel attribute specifies the relationship between the current document and the linked document.