WIS & Engineering Web Trends

Transcription

1 WIS & Engineering Web Trends Geert-Jan Houben

2 WIS Engineering

3 WIS Engineering Methodology Design of WIS requires careful engineering of information exchange between IS and OS Implies engineering of front-end (interface) and back-end (storage & retrieval) Professional applications: from art to engineering well-founded (software) engineering methodologies model-driven

4 RMM Relationship Management Methodology Entity-Relationship modeling Transformation from data model to data+navigation model RMDM: Relationship Management Data Model represents objects and navigational relationships (navigational design of application) Design method for Web (hypermedia) applications Ref: RMM: A Methodology for Structured Hypermedia Design, by Isakowitz, Stohr and Balasubramanian et al in Comm. ACM, Vol 38, No 8

5 RMM methodology Requirements analysis E-R diagram Application diagram (top-down) Slice design Application diagram (bottom-up) User interface design Implementation

6 RMDM (Application) domain model primitives Entities Attributes Relationships Slices: from large objects (with many attributes) to smaller units (with coherent attributes, possibly from different objects) From semantical aspect to navigational (presentation) aspect (w.r.t. complexity and size)

7 RMDM Schema

8 Hera motivation Methodologies exist for manual hypermedia presentation design, Hera targets automated hypermedia presentation Automated presentation is important for databased content (the deep web ) as opposed to manually crafted content (the surface web ): most WIS are data-driven Presentations must be adaptable to different users/user platforms

9 Hera Methodology Model-driven methodology, defines design phases: Conceptual Design that results in Conceptual Model (CM, describes data content used for generation of hypermedia presentations) construction Application Design that results in Application Model (AM, describes the navigation structure and functionality) construction Presentation Design that results in Presentation Model (PM, describes spatial layout and rendering of hypermedia presentations) construction

10 Hera Models Fully specify dynamic hypermedia applications; hence, there is no need of additional programming Are used by a generic Hera engine for generation of hypermedia application pages (by on-demand instantiations of model subsets)

11 Conceptual Model Provides a uniform semantic view over different data sources that are integrated within a given Web application. Consists of hierarchies of concepts relevant within the given domain, their properties, and relations.

12 Conceptual Model Defines the data content in terms of RDFS (concepts, attributes, properties) String String Integer String tname aname year cname exemplifies * creates * Technique Artifact Creator examplified_by created_by description biography String Image picture paints * Painting painted_by Painter String

13 Application (Navigation) Model Navigation structure of a hypermedia application on top of CM Hypermedia dynamics (navigation structure updates and application functionality) of a hypermedia application

14 Navigation Structure in Application Model Navigation nodes (pages) specification in terms of slices (collections of concepts attributes to be displayed) Node composition in terms of slice aggregation relationships Navigation edges (usually hyperlinks) in terms of slice references

15 AM Example Technique Main Painters Basket Main tname description PaintingsForm sn bname bname Painting Set exemplified_by Q1 initialize SelectedPainting aname Set SelectedPainting Main picture aname BuyForm i quantity quantity aname Painter painted_by cname Q2 Order Main quantity SelectedPainting includes aname Basket Main contains year Order Main Set

16 Slices Meaningful collection of attributes of one or more related concepts Represent a presentation page or its part Reference (link) Slice Owner concept Attributes Technique tname description exemplified_by Set Painting picture year painted_by Sub-slices Painting aname Main Painter Info Main

17 Dynamics in Application Model User input specification in terms of Input Forms Application context (state) specification in terms of Application Context Model Context manipulation specification in terms of queries

18 Input Forms Specify user-data entries; contain sets of input fields with: Input method (selection from offered items, text input, etc.) How the offered items are created (for selections) Determine data manipulation operation associated with a form (form processing) CM property Painting SelectForm sn aname aname Form Processing Multi-selection from a list of painting names Form SelectForm aname String Form Model

19 Application Context Model Extends CM with additional data structures needed for application functionality (to store application/navigation state, user inputs, user model, etc.) Example: storing the user selection (shopping basket) cm:painting Integer quantity includes SelectedPainting Order * contains Basket included_by * contained_by

20 Data Manipulations Update application context information Defined as SeRQL queries Used for processing forms (handle user input) Q1 creates instances of SelectedPainting according to the SelectForm form content CONSTRUCT {P}<rdf:type>{acm:SelectedPainting>} FROM {P}<rdf:type>{cm:Painting}; <cm:aname>{paname} WHERE Paname IN SELECT Faname FROM {SF}<form:aname>{Faname}, {SF}<rdf:ID>{FormName} WHERE FormName = SelectForm type Painting1 creates SelectedPainting... type PaintingN

21 Hera Architecture Defines how the models are used for automatic generation of hypermedia presentation CM Vocabulary (RDFS) AM Vocabulary PM Vocabulary CM AM PM Content CMI AM I Pres. Browser App. Context Data Semantic Layer Application Layer Presentation Layer User Query/Context Manager, Form Processor

22 Hera Implementation HPG 2.0 (Hera Presentation Generator, dynamic version) implemented as a Java servlet Uses Jena (RDF API from HP) for RDF data transformations based on RDFS models (CM, AM) Can use XForms processor Uses Sesame as main content repository and application context repository; uses SeRQL/RQL as query languages Set of graphical tools for designers for CM and AM based on Visio or Java

23 Device Adaptation HTML SMIL WML

24 WIS Engineering and Adaptation Adaptation (and personalization) is a design aspect that gained much more attention, but still is lightly supported in methodologies difficult to specify not many tools difficult combination with other aspects Examples: My-portals, device-dependency

25 Adaptation Model pp:imagecapable = Yes technique name description painting name picture year context independent exemplified_by main painting picture Set painted_by painter name main um:expertiselevel = Medium context dependent

26 OOHDM Object-Oriented Hypermedia Design Method Modeling/analysis, design, implementation, testing, and maintenance Conceptual Design + Navigation Design + Abstract Interface Design + Implementation navigation objects are views of conceptual objects abstractions to organize the navigation space, e.g. navigational contexts separation of interface issues from navigation issues some design decisions must only be made at implementation time

27 Other Methodologies UWE: UML-based Web Engineering Conceptual, navigation, presentation model Storyboarding and presentation flow WSDM Information modeling, functional modeling and navigation design WebML: Web Modeling Language Structural model, derivation model (extend to adapt), hypertext model (composition and navigation), presentation model (XSL) OO-H: Object Oriented Hypermedia Navigational access diagram, abstract presentation diagram

28 Trend: Web 2.0

29 Semantic Web & Web 2.0 Academic world takes up on Semantic Web (webizing KR-part of AI) In the geeky technical world it is Web 2.0

30

31 Web 2.0 Name Originally, meaningless Web 2.0 conference in 2004 web as platform, web-based applications Later, something about democracy Main ingredient Ajax ("Javascript now works"; web-based applications work like desktop ones) New generation of software written using Ajax, e.g. Google Maps

32 Democracy Amateurs Wikipedia "Good enough and for free" Voters better than editors Site is from the users (less obtrusive)

33 Open platform Busmonster (on top of Google Maps) Calendars on Google Calendar Google was 2.0 avant la lettre

34 Web 2.0: more content Readers create more and more content Podcasts Blogs Tags Users (consumers) are more in control Building digital communities, social media The starting point is easier

35 Trend: Social Networking

36 Folksonomies Information on Web sites "add, add, add" problem how to organize the information Taxonomies: hierarchical tree structures, e.g. classification schemes expensive to create and maintain do not use the language of the users N.B. Interesting technology (still)

37 Folksonomy "Collaboratively generated, open-ended labeling system" improved search effectiveness through categorization with familiar, accessible and shared vocabulary: no complicated nomenclature in Internet-mediated social environments open-ended, quick response to changes "Unsystematic and unsophisticated"

38 Tagging Tagging done by people interacting with the content (not outsider with controlled vocabulary) Lower costs than top-down controlled vocabularies (e.g. Dublin Core) Also information about the taggers: human engagement

39 New: User-driven Users add "tags" to the information Users create navigational links out of those tags for users to find and organize information later Organized and maintained by users (in their words, e.g. "cameraphone") Challenge: apply to existing site or organization?

40 Social Networking Examples Flickr.com ( Del.icio.us ( De.lirio.us ( CiteUlike ( Simpy ( Boeing 787 design (

41 Features Social network, user-involvement Dynamic classification and organization Rich hypermedia navigation generation Technology for rich user interface

42 Flickr

43 Flickr.com Features Photo management application organizing, annotating and sharing of photos Real-time photosharing and instant messaging application with a heavy social networking component New way of organizing photos by making the process of organizing photos collaborative (e.g. notes, tags, comments) No structured metadata Capture conversations about the photos extract search index Control licensing on a photo-by-photo basis (Creative Commons licenses) Cascading Style Sheets: Separating Content from Presentation RSS feeds export your data Open API for developers

44

45

46

47

48 Navigation

49

50 Privacy

51 Flickr features Interestingness a display of the most interesting photos during a 24- hour period determined by a range of factors including where click-throughs are coming from and who marks them as a favorite creates a virtual photo gallery (showcase) Clustering broadens a search beyond tags e.g. strawberry related clusters: red, macro, dessert, fruit, garden, etc.

52 Exploring Flickr Collection

53 What s Interesting in

54 Zoom in by Tag

55 Yahoo! Search for related photos

56 Zoom in by Photo

57 Groups in

58 Example: B&W Group

59

60 Open Platform Combining Flickr with Yahoo Maps Here is how the site says it's supposed to work: "The idea is that you go out into the (urban) wild armed with a camera and possibly a GPS unit. You take a bunch of photos and upload them to Flickr. Then you add 'tags' which let Geobloggers (and other sites) know where the photo was taken. Flickr handles the management of the photos. Geobloggers does the rest. Ref: Cal Henderson: Flickr architecture with PHP

61 del.icio.us social bookmarks manager you submit your links to a website add descriptive text and keywords del.icio.us aggregates your post with everyone else's submissions slice and dice the information any way you like. posts with the same keywords are clumped together if enough people link to a URL a loose classification emerges del.icio.us-space has three major axes: Users mattb's URLs. Tags URLs with the tag xml URLs references to the URL (8b7fec48fcb35763c9f8e1a8061eb124 is the md5sum digest of the URL) Some of these axes can be combined in a single URL: mattb's URLs with the tag xml URLs with the tags xml and rdf. mattb's URLs with the tags xml and rdf. Pointer:

62 Ajax Asynchronous JavaScript XMLHttpRequest

63 Motivation Very dynamic user interfaces any interaction requires contact with the server; relies on HTTP and differs from desktop apps where interface is connected to application layer Solution: Javascript and XMLHttpRequest object example: immediate feedback on a form Javascript: not exposing application logic; serious logic not in interface layer XMLHttpRequest object (ActiveX object in IE, native in Mozilla en Safari) enables Javascript to make HTTP requests to a remote server without reloading the page Ref: Cleaning your website with Ajax, Dion Almaer & Ben Galbraith

64 Ajax Technology Not one technology - several technologies standards-based presentation with XHTML and CSS dynamic display and interaction with Document Object Model data interchange and manipulation with XML and XSLT asynchronous data retrieval with XMLHttpRequest JavaScript binding everything together Richness and responsiveness of the web applications similar to the desktop applications Ref: Ajax: A New Approach to Web Applications, Jesse James Garrett

65 Traditional vs. Ajax Web Application

66 Classic Web Application Model Synchronous

67 Ajax Web Application Model Asynchronous

68 Ajax Technology Drawbacks Code is more complex Running complex JavaScript code on the client Making it efficient and bug-free is a heavy task Better development tools and frameworks are needed Ref: Ajax Tutorial: Anubhav Kale

69 Google Examples of applying Ajax Orkut, Gmail (API), Google Groups, Google Suggest, Google Maps Flickr features depend on Ajax (next to PHP) Amazon s A9.com search engine

70 Web 2.0 examples Writely, Web word processor, part of Google ( SiteVista, testing apps on different browsers, resolutions etc. (

71 Pointers & References - general stuff on XML etc. - idem Tutorial - Ajax tutorial - Ajax tutorial - basic Ajax examples (code) p - Web 2.0 tutorials

72

73 Assignment 2 Write a position paper (2A4) on "Web 2.0 applications & engineering" Due in two weeks Mail to g.j.houben@tue.nl