Web and multimedia database design
Flavio Fontana
ENEA Usability Lab, Department of Computer Science, University of Rome,
Italy
[email protected]
2013 Summer School H-DATA
11-13 September 2013, Rome, Italy
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
Usability & Media Laboratory: Ulab
The ENEA Usability Lab is an experienced experts
and developers group in web applications,
multimedia database design and distributed
systems for the fruition of e-learning contents by
means of Internet.
The Usability Lab organizes usability testing
sessions since 1992.
The Usability Lab issue is to improve the
effectiveness, the efficiency and the users systems
satisfaction by advanced methods of usability
testing and design.
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
Contents
•
•
•
•
•
Introduction
Web-DB & Usability
Technologies and Projects
Experimental scenario
Conclusions and future works
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
University Course
“Web and Multimedia database design”
Elements of design databases in the internet
network, design methodologies and validation,
usability testing.
Web technologies and relational database
University of Rome "La Sapienza", Computer
Science Department.
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
STAFF
• Alessandro Lo Tenero
•
Flavio Fontana
Enrico Cosimi
• Nicoletta Minelli
External Collaborators:
•
Marco Di Domenico
•
David D’Arcangelo
Giangiacomo Ponzo
•
Daniele Vannicelli
•
Emilia Cristauro
Sta Students
•
Experts
•
•
Young Researchers Course:
Laboratorio di Basi di Dati II
Ingegneria della Università
La Sapienza di Roma
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
Activities
•
WEB-DB: Web-Database, design, research & development, implementation of
advanced Web applications and multimedia databases .
Advanced Visual Interface(AVI) : Studies of visual interface based graphics and
multimedia. Study and construction of icons libraries for databases query in
Internet.
•
Advanced Web Search (AWS) : Research and testing of search engines on websites
and databases with flexible selection criteria in connection with users profiles.
•
Usability, measurement and testing : Direct observation methods and testing of
usability with assistance. Evaluation of complexity and usability degree the systems.
•
Multimedia: Research and development of advanced video-communication systems
of seminars and lectures on the Internet.
•
University Course : Elements of design databases in the internet network, design
methodologies and validation tests usability - databases Laboratory 2
course(LABBDII), University of Rome "La Sapienza", Information Department. Thesis
degree, internships and research grants.
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
WEB-DB
Web-Multimedia
Database Design
Research & development
of innovative query
system and tools.
Implementation of
advanced web
applications to manage
and inquiry multimedia
databases.
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
CARDs
The CARD is an complex object (class)
to build a visual interface, based on
graphic objects, to manage and inquire
database.
The CARS could be organized in stacks.
Each CARD is composed by the following
elements: plane, background, field
(table), botton (functions), title, text,
icons and image.
The Card represent for the user the
data domain in terms of: coloured
objects, icons, etc. These objects are
managed in libraries (database, library,
simple and complex query).
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
CARDs
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
CARDs
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
CARDs
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
Web-DB CARD
Management
Foundamental Website Elements
•
•
•
•
•
•
•
•
•
"home” Homepage
TEXT page
Menu Page
TEXT, Title, etc.
Navigation Bottons
Logos, Banner, Icons, Images
Links
Backgrounds,
etc.
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
Web-DB CARD
Management
Foundamental Website Elements
•
•
•
•
•
•
•
•
•
"home” Homepage
TEXT page
Menu Page
TEXT, Title, etc.
Navigation Bottons
Logos, Banner, Icons, Images
Links
Backgrounds,
etc.
I
D
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
K
DYNAMIC ICONS
Main
Menu
Query
Icons
Query
area
Query
Pre-def.
Result
Area
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
DYNAMIC ICONS
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
DYNAMIC ICONS
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
DYNAMIC ICONS
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
ROOMS
Main
Menu
DB
Label
Door
Lift
Query
Symbol
Function
Botton
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
ROOMS
Main
Menu
CARD
& Text
Query
Result
Display
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
Web-DB CARD
Management
Management
Query Area
Result Display
Area
CARD Area
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
Web-DB CARD
Management
Management
Icon Area
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
Web-DB CARD
Management
Management
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
Web-DB CARD
Management
Inquiry
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
Web-DB CARD
Management
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title></title>
</head>
<body bgcolor="#FFFFFF">
<!-- #include file="adovbs.inc" -->
<!-- Vengono reperiti i parametri passati tramiti il link -->
<% Ricerca=Request.querystring("Ricerca")
Table=Request.querystring("Table")
DB=Request.querystring("DB")
Key=Request.querystring("Key")
ViewField=Request.querystring("ViewField")
SearchField=Request.querystring("SearchField")
Index=Request.querystring("Index")
Esatta=Request.querystring("Esatta")
Where=Request.querystring("Where")
Ricerca2=Ricerca
if Esatta="no" then
Ricerca="%"+Ricerca+"%"
end if
%>
<!-- Si apre il database e si esegue la query su tutti i campi dell'entità riferiti
ai record trovati -->
<%
' Open ACCESS database'
'definizione della stringa di connessione
'dsn = "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath("../"&db&".mdb")'
dsn = "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & "c:/database_per_web/chiese_di_roma/"&db&".mdb“
ASP, PHP, JSP, Java
C++
''definizione dell' oggetto connessione
set conn=server.createobject("adodb.connection")
''apertura della connessione
conn.open dsn
' set up sql statement'
if Where="" then
sql = "select * from "+Table+" where "+SearchField+" LIKE '"+Ricerca+"' order by "+ViewField+" asc"
else
Where2=replace(Where,"*","%")
sql ="select * from "+Table+" where "+Where2+" order by "+ViewField+" asc"
end if
Set RS = Conn.Execute(sql)
2013 II Summer School 11-13 September, ENEA, Rome, ITALY
Web-DB iCARDs
Management & Inquiry
iCARDs
• i Management
•
•
•
•
auto fields selection
i Inquiry
i Navigation
i user profiling
Etc.
2013 II Summer School 11-13 September, ENEA, Rome, ITALY