Annotation-based Web content Transcoding Masahiro Hori, Goh Kondoh, Kouichi Ono, Shin-ichi Hirose, and Sandeep Singhal IBM Tokyo Research Laboratory.

Slides:



Advertisements
Similar presentations
Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
Advertisements

HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
HTML popo.
Teppo Räisänen LIIKE/OAMK 2010
Web Services Nasrullah. Motivation about web service There are number of programms over the internet that need to communicate with other programms over.
MMDE5011 – INTERACTIVE MEDIA PRACTICE 1 WEEK 1: INTRODUCTION TO HTML5
Introduction to CSS.
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
1 Lesson 10 Using JavaScript with Styles HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based.
Macromedia Dreamweaver 4 Foundation Level Course.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Chapter 4 Database Management Systems. Chapter 4Slide 2 What is a Database Management System (DBMS)?  Database An organized collection of related data.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Linux Operations and Administration
Overview of JSP Technology. The need of JSP With servlets, it is easy to – Read form data – Read HTTP request headers – Set HTTP status codes and response.
CPSC 203 Introduction to Computers Lab 39, 40 By Jie (Jeff) Gao.
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
1 Web Database Processing. Web Database Applications Static Report Publishing a report is prepared from a database application and exported to HTML DB.
06/03/'07 upd 04/03/08CmpE 588 Spring 2008 EMU1 Tools for Semantic Annotation Atilla ELÇİ Dept. of Computer Engineering Eastern Mediterranean University.
Creating a Simple Page: HTML Overview
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
Web Page Design Vocabulary #4.
Internet Skills An Introduction to HTML Alan Noble Room 504 Tel: (44562 internal)
Aurora: A Conceptual Model for Web-content Adaptation to Support the Universal Accessibility of Web-based Services Anita W. Huang, Neel Sundaresan Presented.
Chapter 33 CGI Technology for Dynamic Web Documents There are two alternative forms of retrieving web documents. Instead of retrieving static HTML documents,
Web Technologies Website Development Trade & Industrial Education
XHTML Introductory1 Linking and Publishing Basic Web Pages Chapter 3.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Website Development with Dreamweaver
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
Html Basic Codes Week Two. Start Your Text Editor Windows use 'Notepad’ Macintosh use 'Simple Text'
Sheet 1XML Technology in E-Commerce 2001Lecture 1 XML Technology in E-Commerce Lecture 1 WWW, HTML, CSS, XML, Meta-modeling.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.
INTRODUCTION. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language,
JAVA SERVER PAGES CREATING DYNAMIC WEB PAGES USING JAVA James Faeldon CS 119 Enterprise Systems Programming.
Copyright 2007, Information Builders. Slide 1 Understanding Basic HTML Amanda Regan Technical Director June, 2008.
1 Creating Web Pages Part 1. 2 OVERVIEW: HTML-What is it? HyperText Markup Language, the authoring language used to create documents on the World Wide.
HTML and Web Pages. HTML?  HTML is not a programming language  A type of SGML (standard generalized markup language)  HTML uses paired tags to markup.
HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.
HTML: Hyptertext Markup Language Doman’s Sections.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
CPT 499 Internet Skills for Educators Session Ten Class Notes.
Chapter 2 Database System Concepts and Architecture Dr. Bernard Chen Ph.D. University of Central Arkansas.
HTML BTEC National in Computing Section5. Create Information “HTML: defining HTML, discussing HTML uses and demonstrating HTML basics, HTML structure…..
1 Web Servers (Chapter 21 – Pages( ) Outline 21.1 Introduction 21.2 HTTP Request Types 21.3 System Architecture.
CS562 Advanced Java and Internet Application Introduction to the Computer Warehouse Web Application. Java Server Pages (JSP) Technology. By Team Alpha.
Web Site Development - Process of planning and creating a website.
1999, COMPUTER SCIENCE, BUU Introduction to HTML Seree Chinodom
 XML derives its strength from a variety of supporting technologies.  Structure and data types: When using XML to exchange data among clients, partners,
1 Semantic Annotation for Web Content Adaptation Unit 14 of Spinning the Semantic Web.
Microsoft Expression Web - Illustrated Unit A: Getting Started With Microsoft Expression Web.
© 2010 IBM Corporation RESTFul Service Modelling in Rational Software Architect April, 2011.
Web Design Principles 5 th Edition Chapter 3 Writing HTML for the Modern Web.
Objective % Select and utilize tools to design and develop websites.
Project Objectives Publish to a remote server
Essential Tags Web Design – Sec 3-3
Chapter 2 Database System Concepts and Architecture
Module: Software Engineering of Web Applications
Positioning Objects with CSS and Tables
Objective % Select and utilize tools to design and develop websites.
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
Positioning Objects with CSS and Tables
Presentation transcript:

Annotation-based Web content Transcoding Masahiro Hori, Goh Kondoh, Kouichi Ono, Shin-ichi Hirose, and Sandeep Singhal IBM Tokyo Research Laboratory

Outline Introduction Annotation Framework Annotation-Based Transcoding System Page Fragmentation Discussion

Introduction Content adaptation is crucial for transparent Web access under different conditions. Such content adaptation also called transcoding. Results in better presentation and faster delivery to the client device. The role of annotations is to provide hints that enable a transcoding engine to make better decisions on transcoding. Existing Web documents are associated with content adaptation hints as separate annotation files.

Introduction(Cont.) Transcoding system with particular focus on the authoring- time integration between a WYSIWYG annotation tool and a transcoding module. Finally, after giving an example of content adaptation using a page fragmentation module for small-screen devices,

Annotation Framework The role of annotation is to characterize ways of content adaptation rather than to describe individual contents. The framework needs to specify a vocabulary for constraining the possibilities for decomposition, combination,and partial replacement of contents. The Resource Description Framework(RDF) is used as the syntax of annotation files. The RDF data model defines a simple model for describing relations among resources in terms of named properties and values.

Figure 1: Adaptation of HTML documents for personal computing devices

Figure 2: Framework of external annotation

Annotation Framework(Cont.) An annotation file refers to portions of an annotated document. Example: /HTML/BODY/P[3] points to the third P element of the BODY element of the annotated document. Annotation Vocabulary for Transcoding : The vocabulary includes three types of annotation : alternatives, splitting hints and selection criteria.

Annotation Framework(Cont.) Alternatives For example, a color image may have a grayscale image as an alternative for clients with monochrome displays. A transcoding proxy selects the one alternative that best suits the capabilities of the requested client device. Splitting hints An HTML file may be divided into multiple pages on clients with smaller display screens.The tag specifies a set of elements to be considered as a logical unit. Another usage is to provide appropriate page break points.

Annotation Framework(Cont.) Selection criteria –Client device capability –Resource requirements –Role of an annotated element –Importance of an annotated element The role tag is provided with a value attribute,which may be either proper content,advertisement,decoration or icon.

Annotation Framework(Cont.) tag specifies the priority of an annotated element. The importance value ranging from -1 (low) to 1(high). An element may not be sent to a lightweight client, when the element is provided with a decoration role and a low importance value such as –0.2.

Annotation-Based Transcoding System Transcoding Architecture Computational entities stay along the Web transaction path are called intermediaries. The intermediary-based approach allow us to provide a transcoding module as an intermediary without modifying browser or server.

Annotation-Based Transcoding System WBI : a programmable proxy server for HTTP requests and responses. The processing is controlled by plugins available at an intermediary processor.WBI’s plugin is constructed from three fundamantal blocks : Monitors,Editors and Generators. It realized a page-splitting module as a WBI plugin that adapts a requested document to the capabilities of a particular client.

Figure 4: Annotation-based transcoding by a page-splitting plugin

Annotation-Based Transcoding System Authoring-Time Transcoding –Annotation description may be too complicated for a simple source tag editor to maintain. –It developed an annotation tool for the external annotation by extending an existing HTML authoring tool. –It consists of a WYSIWYG editor, a source editor and a previewer.

Figure 5: Annotation tool configuration for authoring-time transcoding

Annotation-Based Transcoding System –When a previewer is invoked, a transcoding proxy is called over HTTP and the corresponding annotation is applied to the subject document. –The annotation tool is fully integrated with the transcoding proxy, users can see the results of content adaptation and revise annotation on the fly.

Page Fragmentation

Table[1] Table[2] Table[3] Search form Side bar Menu omitted

Page Fragmentation Figure 9 illustrate how the news page will be fragmented in a small display. According to the header role of the top table, the same header appears in the previewer as in the original page. The “Side bar ” anchor in the center is created in accordance with the auxiliary role.

Figure 9: Annotation for fragmentation of an actual news page

Discussion The purpose is to distinguish content with meta information. The external annotation approach allows such application- specific meta-information to be specified separately from the HTML spec.