1. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY Web and multimedia database design Flavio Fontana ENEA Usability Lab, Department of Computer Science, University of Rome, Italy flavio.fontana@enea.it 2013 Summer School H-DATA 11-13 September 2013, Rome, Italy

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

3. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY Contents Introduction Introduction Web-DB & Usability Web-DB & Usability Technologies and Projects Technologies and Projects Experimental scenario Experimental scenario Conclusions and future works Conclusions and future works

4. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY University Course 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. “Web and Multimedia database design”

5. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY STAFF Flavio Fontana Enrico Cosimi Giangiacomo Ponzo Emilia Cristauro Experts Alessandro Lo Tenero Nicoletta Minelli External Collaborators: Marco Di Domenico David D’Arcangelo Daniele Vannicelli Sta Students Young Researchers Course: Laboratorio di Basi di Dati II Ingegneria della Università La Sapienza di Roma

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

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

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

9. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY CARDs

10. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY CARDs

11. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY CARDs

12. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY "home” Homepage TEXT page TEXT page Menu Page Menu Page TEXT, Title, etc. TEXT, Title, etc. Navigation Bottons Navigation Bottons Logos, Banner, Icons, Images Logos, Banner, Icons, Images Links Links Backgrounds, Backgrounds, etc. etc. Foundamental Website Elements Web-DB CARD Management

13. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY "home” Homepage TEXT page TEXT page Menu Page Menu Page TEXT, Title, etc. TEXT, Title, etc. Navigation Bottons Navigation Bottons Logos, Banner, Icons, Images Logos, Banner, Icons, Images Links Links Backgrounds, Backgrounds, etc. etc. Foundamental Website Elements I DK Web-DB CARD Management

14. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY DYNAMIC ICONS Query area Main Menu Result Area Query Pre-def. Query Icons

15. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY DYNAMIC ICONS

16. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY DYNAMIC ICONS

17. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY DYNAMIC ICONS

18. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY ROOMS Main Menu DB Label Door Query Symbol Function Botton Lift

19. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY ROOMS Main Menu Query CARD & Text Result Display

20. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY Web-DB CARD Management Management Query Area CARD AreaResult Display Area

21. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY Management Icon Area Web-DB CARD Management

22. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY Management Web-DB CARD Management

23. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY Inquiry Web-DB CARD Management

24. 2013 II Summer School 11-13 September, ENEA, Rome, ITALY <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <% 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“ ''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

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