Web and multimedia database design Flavio Fontana

Web and multimedia database design Flavio Fontana ENEA Usability Lab, Department of Computer Science, University of Rome, Italy flavio.fontana@enea.it 2012 Summer School H-DATA 12-14 September 2012, 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.

Contents • Introduction • Web-DB & Usability • Technologies and Projects • Experimental scenario • Conclusions and future works

University Course “Web and Multimedia database design” Elements of design databases in the internet network, design methodologies and validation, usability testing. University of Rome "La Sapienza", Computer Science Department.

STAFF • Flavio Fontana Enrico Cosimi • Giangiacomo Ponzo • Emilia Cristauro • Experts • Alessandro Lo Tenero • Nicoletta Minelli ExternalCollaborators: • Marco Di Domenico • David D’Arcangelo • DanieleVannicelli StaStudents • Young Researchers Course: Laboratorio di Basi di Dati IIIngegneriadellaUniversità La Sapienza di Roma

Activities • WEB-DB:Web-Database, design, research & development, implementation of advanced Web applications and multimedia databases . • AdvancedVisual 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. • UniversityCourse : Elementsof design databases in the internet network, design methodologies and validationtestsusability - databasesLaboratory 2 course(LABBDII), UniversityofRome "La Sapienza", Information Department. Thesisdegree, internships and researchgrants.

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.

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

CARDs

DYNAMIC ICONS Main Menu Query Icons Query area Query Pre-def. Result Area

DYNAMIC ICONS

ROOMS Main Menu DB Label Door Lift Query Symbol Function Botton

ROOMS Main Menu CARD & Text Query Result Display

Web-DB CARD Management Management Query Area Result Display Area CARD Area

Web-DB CARD Management Management Icon Area

Web-DB CARD Management Management

Web-DB CARD Management Inquiry

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">   <% 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 %>  <% ' 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“ ''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) ASP, PHP, JSP, Java C++

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.

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 K

Web-DB iCARDs Management & Inquiry iCARDs • i Management auto fields selection • i Inquiry • i Navigation • i user profiling • Etc.

Web and multimedia database design Flavio Fontana