eScience Lectures Notes : ManyPage


Slide 1 : 1/26 : ManyPage (index.en.html)

ManyPage

an Object Oriented tool to manage large web sites

without using a database

 

Pascal Vuylsteker

Pierre Cordani

http://www.vrarchitect.net/ManyPage/index.en.html

"Institut National de l'Audiovisuel" - MediaPort Team
French Broadcasting Institute


Slide 2 : 2/26 : ToC : ManyPage (tableOfContent.en.html)

Table of Contents (26 slides) for the presentation :

ManyPage


Slide 3 : 3/26 : ManyPage presentation plan (intro.en.html)

Plan

Why we decided to develop such a tool

The characteristics we expected

The other solutions

The development tools

The overall process

Browsing model

Browsing tools

A typical navigation menu

The templates : 3 files and one configuration

Example and demonstration

Conclusion

 


Slide 4 : 4/26 : The origin of ManyPage (why.en.html)

Why we decided to develop ManyPage

From HTML 1.0 to HTML 2.0 and ...

From one director or president to another.

From HTML editing with vi to dreamweaver use

From 1 Webmaster to 10 editorial correspondents

From 1 web site to 10 web sites

From 1 language to 2, 3 4... languages

From 1 simple look to one graphical plus one light look (to print the page or surf more quickly)


Slide 5 : 5/26 : ManyPage characteristics (characteristics.en.html)

Characteristics


Slide 6 : 6/26 : The overall process (process.en.html)

Web site management : The overall process


Slide 7 : 7/26 : ManyPage : Others possibilities (solutions.en.html)

Other solutions and their shortcoming

HTML Specific Editor : a dependant solution

Inclusion of specific tag in the HTML to define a template

SGML, XML, XSLT ...

not yet really available but it is changing

On line database and dynamic web sites ... CMS

heavy consumption of computing resources

difficult access for the search engines

Database and preprocessing

strong formatting of the information

Need to run a database anyway

What about the way to describe the added design

Various other similar projects

Jessica and JML ( Syndication with JML )

WebComposition

CMS : Content Management System : See http://www.opensourcecms.com/

a CMS is a system that separates the content of a web site (the text, images, and so on) from the framework of linking pages together and controlling how the pages appear. In most cases, this is done to make a site easier to maintain than would be the case if it was built exclusively out of hard-coded html pages.


Slide 8 : 8/26 : CMS : Content Management System (cms.en.html)

CMS : Content Management System

"separates the content of a web site (the text, images, and so on) from the framework of linking pages together and controlling how the pages appear"

A CMS is a system that separates the content of a web site (the text, images, and so on) from the framework of linking pages together and controlling how the pages appear. In most cases, this is done to make a site easier to maintain than would be the case if it was built exclusively out of hard-coded html pages. At least, that is the goal.

How do I pick the best one for me?

First, get a clear picture in mind of what you're going to want to do with it. Spend as much time as you need to make that mental picture as crystal clear as you can. Most CMS offer ways to expand them or to add functions, but you're way better off to start with the right system.
Once you know what you want, try out a lot of them. Look for the one that does what you need it to do with the minimum hassle. Try to find the one that looks and works closest to your ideal. The less customizing work you have to do, the better.
Pay particular attention to the admin interface, since that's where you are going to have to do your work. Make sure you understand what all of the options do.
Check the forums and find out what other users have found out.
Check the way your data will be dependant on that system !

Which type ?

Portals (Yahoo) - Blogs - eCommerce - Groupware - Forums - eLearning (WebCT) - Wiki - Specialized (Galerie)

Try them, avoid too much need for customisation.

NB. : http://www.opensourcecms.com/ is just about PHP/MySQL based ones ...

Admin Interface

How dependant are you from one system ?

What are the backup procedures ?

 


Slide 9 : 9/26 : Still usefull today ? (today.en.html)

Still usefull today ?

You could use CSS ...

OK For the look and feel, but what about ...

the menu ...

navigation menu / structure ?

added content, signature ?

How to include data that is common to different pages ?

Javascript ? Perhaps too risky yet

Corrections ?

Better compatibility with XHTML

Proposition of a predefined .obj, better oriented towards the use of CSS (This summer ?)

More than just Up, Next, Previous in the .link file


Slide 10 : 10/26 : Development tools (development.en.html)

Development tools

Perl, perl, perl > 5.0

Under Unix : SGI, MacOS X (server and client), Linux, NetBSD

SGML/XML like description of the object

example of an object :

<MP.MENU1.A>

<MP.MENU1.SEP.LEFT>
<a href="/web/index.+"
onMouseOver="window.status='<MP.MENU1.A.ONMOUSETEXT>';
return true"><MP.MENU1.LEFT.FONT><MP.MENU1.A.TEXT><MP.MENU1.RIGHT.FONT></A>
<MP.MENU1.SEP.RIGHT>
</MP.MENU1.A>


Slide 11 : 11/26 : The overall process (process2.en.html)

Web site management : The overall process


Slide 12 : 12/26 : A browsing model (browsing.en.html)

A browsing model

 


Slide 13 : 13/26 : A browsing modele (browsing.sum.en.html)

A browsing model : summary
or the structural links of a menu

Horizontal Browsing

  • Between Chapters, Sections, Subsection,
  • Previous
  • Next
  • First
  • Last

General

Map

Visits

Profiled visits

Search

Index

...

 

Natural Reading Browsing

  • Previous
  • Next
  • Table of contents

Vertical Browsing

  • Home Page
  • Chapter Home Page
  • Up
  • Table of contents

Chapter Browsing

  • Between Chapter
  • Chapter Home Page

 


Slide 14 : 14/26 : A typical browsing menu + Signature (navigation.en.html)

A typical browsing menu + Signature

Structural links

Home Page / Entry Page

Natural Reading Browsing : Previous Up and Next Page

Chapter Browsing : Between Chapter and Chapter Home Page

Horizontal / Vertical Browsing

Map / Visits

Contextual links / tools

Help

Links

Contact

FAQ

Find / Search

Language(s)

Light version

Print version

News
(on the web site
and about the subject)

Various information

Signature (Technical / Editorial Webmaster Contact) with email

Modification date

URL / Mail this page

Visual Identity

Copyleft/right

 

 


Slide 15 : 15/26 : Link types hierarchy (linkTypeMap.en.html)

Link types hierarchy

Source : http://www.webreference.com/html/tutorial27/2.html

Hierarchy of a Web Site


Slide 16 : 16/26 : Link types : Not immediately visible structuring (linkType.en.html)

Link types : Not immediately visible structuring

Alternate - Start - Next - Prev - Contents - Index - Glossary - Copyright - Chapter - Section - Subsection - Appendix - Help - Bookmark - made - Stylesheet ( - SHORTCUT ICON )

<HTML>
<HEAD>
<LINK REL="Prev" HREF="linkTypeMap.en.html" TITLE="15 / 25 : Link types hierarchy">
<LINK REL="Next" HREF="template.en.html" TITLE="17 / 25 : 3 files to describe the dressing">
<LINK REL="Up" HREF="index.en.html" TITLE="1 / 25 : ManyPage">
<link rel="stylesheet" href="/lecture/comp1710/lectureNotes.css" type="text/css">
<LINK REL="SHORTCUT ICON" href="/favicon.ico">

Sources :

Authors may use the following recognized link types, listed here with their conventional interpretations. In the DTD, %LinkTypes refers to a space-separated list of link types. White space characters are not permitted within link types.

These link types are case-insensitive, i.e., "Alternate" has the same meaning as "alternate".

User agents, search engines, etc. may interpret these link types in a variety of ways. For example, user agents may provide access to linked documents through a navigation bar.

 
Alternate

Designates substitute versions for the document in which the link occurs. When used together with the lang attribute, it implies a translated version of the document. When used together with the media attribute, it implies a version designed for a different medium (or media).

Stylesheet

Refers to an external style sheet. This is used together with the link type "Alternate" for user-selectable alternate style sheets.

Start

Refers to the first document in a collection of documents. This link type tells search engines which document is considered by the author to be the starting point of the collection.

Next

Refers to the next document in a linear sequence of documents. User agents may choose to preload the "next" document, to reduce the perceived load time.

Prev

Refers to the previous document in an ordered series of documents. Some user agents also support the synonym "Previous".

Contents

Refers to a document serving as a table of contents. Some user agents also support the synonym ToC (from "Table of Contents").

Index

Refers to a document providing an index for the current document.

Glossary

Refers to a document providing a glossary of terms that pertain to the current document.

Copyright

Refers to a copyright statement for the current document.

Chapter

Refers to a document serving as a chapter in a collection of documents.

Section

Refers to a document serving as a section in a collection of documents.

Subsection

Refers to a document serving as a subsection in a collection of documents.

Appendix

Refers to a document serving as an appendix in a collection of documents.

Help

Refers to a document offering help (more information, links to other sources information, etc.)

Bookmark

Refers to a bookmark. A bookmark is a link to a key entry point within an extended document. The title attribute may be used, for example, to label the bookmark. Note that several bookmarks may be defined in each document.

Authors may wish to define additional link types not described in this specification. If they do so, they should use a profile to cite the conventions used to define the link types. Please see the profile attribute of the HEAD element for more details.


Slide 17 : 17/26 : META tag : Not immediately visible meta information (metaData.en.html)

META tag : Not immediately visible meta information

Define keywords for search engines - Define a description of your web page

Define the last revision of your page - Refresh page every 5 seconds

author - description - keywords - generator - revised - rating - date - or anything, or Dublin Core Set or other schemes

<HTML>
<HEAD>
<meta name="keywords" content="HTML, META">
<meta name="description" content="Introduction to the META HTML Tag">
<meta name="revised" content="Pascal Vuylsteker, 2004-09-27">
<meta http-equiv="Refresh" content="5;URL=qtvr.en.html">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="schema.DC"
href="http://purl.org/dc/elements/1.1/" />
<meta name="DC.Title" lang="fr" content="Un document en HTML" />
<meta name="DC.Date.created" scheme="W3CDTF" content="2003-04-03" />
<meta name="DC.Date.modified" scheme="W3CDTF" content="2003-04-27" />
<meta name="DC.Subject" lang="fr" content="HTML, document, Dublin Core" />
<meta name="DC.Language" scheme="RFC3066" content="fr-FR" />
<meta name="DC.Description" lang="fr"
content="Mon premier document HTML avec métadonnées" />

Source / References :


Slide 18 : 18/26 : 3 files to describe the dressing (template.en.html)

3 files to describe the dressing

a file to configure general information about the web site

.dress : main template

.obj : objects used in the template

.link : browsing tree

 

 

 

 


Slide 19 : 19/26 : .dress : the main template (dress.en.html)

.dress : the main template

an HTML File with 2 kinds of object in it

Objects instantiated by ManyPage : <PM.XXX> Example : <PM.BODY>

<PM.HEAD> or <PM.TITLE>

<PM.BODY.ATTRIBUT>

<PM.BODY>

Objects defined by the webmaster : <MP.YYY> Example : <MP.MENU.UP>


<HTML>
<HEAD>
<PM.HEAD>
</HEAD>

<BODY
<PM.BODY.ATTRIBUT>>

<PM.BODY>

</BODY>
</HTML>

<HTML>
<HEAD>
<PM.HEAD>
</HEAD>

<BODY <PM.BODY.ATTRIBUT>>
<MP.MENU.UP>
<PM.BODY>
<MP.MENU.DOWN>
</BODY>
</HTML>

Some more examples


Slide 20 : 20/26 : .obj : objects used in the template (obj.en.html)

.obj : objects used in the template or in source files

Classes defined in the .obj file : <MP.YYY> for a directory and its subdirectories (-> inheritance)

<MP.object.name>
object value
</MP.object.name>
<MP.RED.POINT>
<IMG SRC="<MP.ICON.PATH>red.gif">
</MP.RED.POINT>

Multilingual web site

Page suffix (.fr.html)

Generic suffix transformation (.+ => .en.html or .fr.html)
Multilingual ManyPage objects (<MP.UNTEL> => <MP.UNTEL.FR>) WARNING.LANG object

The minimal programmation Structure : IF

<PM.IF EXIST=`<PM.KEYWD.BACK>` THEN=`<th><MP.MENU.LINK.BACK></th>`>

Other Objects instantiated by ManyPage : <PM.XXX> for each source file

FILENAME, BACK, UP, NEXT, TITLEBACK, TITLEUP, TITLENEXT, LANG, DATE.MODIF, DATEHAB

 


Slide 21 : 21/26 : Hierarchie of objects (objectHierarchy.en.html)

Hierarchie of objects

Directory

classes (description in local .obj)

object C2

/Src/

<MP.C1>imageRoot.gif</MP.C1>
<MP.C2><IMG="<MP.C1>"></MP.C2>

<IMG="imageRoot.gif">

/Src/A/

<MP.C1>imageA.gif</MP.C1>

<IMG="imageA.gif">

/Src/B/

<MP.C1>imageB.gif</MP.C1>

<IMG="imageB.gif">

/Src/B/a/

 

<IMG="imageB.gif">

/Src/B/b/

<MP.C2>No Image</MP.C2>

No Image

Let's see a real world exemple...

 


Slide 22 : 22/26 : .link : the browsing tree (link.en.html)

.link : the browsing tree

Directory tree : production side

Browsing tree : user side

/
/index.fr.html
/index.en.....
/Chapter2/
/Chapter2/page1...
/Chapter2/page5
/Chapter2/page51
/Chapter2/Sub1/
/Chapter2/Sub1/page2
/Chapter2/Sub1/page3
/Chapter2/Sub1/page4
/Chapter2/Sub2/
/Chapter2/Sub2/page52

Chapter2 .link : 
 ../index.+
	: page1.+
	: Sub1/page2
	: Sub1/page3 Rem: not usefull
	: Sub1/page4
	: page5.+
	:	: page51.+
	: 	: Sub2/page52.+

Sub1 .link :
../page1.+ <UP>../../index.+</UP>
page2.+	
page3.+
page4.+
../page5.+

name of files : the .+ => .en.html or .fr.html

<UP>

<TWIN>

<SEP>


Slide 23 : 23/26 : Example and demonstration (example.en.html)

Example and demonstration

:-)

just after the example...

Source :

 

 

Or... My lecture notes production line...

 


Slide 24 : 24/26 : Futur features (future.en.html)

Conclusion

Distribution : on the web : http://www.vrarchitect.net/ManyPage

Licence : open source / GPL

Template checking tool

ManyPage or XML/XLST ?

Used on the following web site


Slide 25 : 25/26 : Still usefull today ? (today2.en.html)

Still usefull today ?

You Could use CSS ...

OK For the look and feel, but what about ...

the menu ...

navigation menu / structure ?

added content, signature ?

How to include data that is common to different pages ?

Corrections ?

Better compatibility with XHTML

Proposition of a predefined .obj, better oriented towards the use of CSS (This summer ?)

More than just Up, Next, Previous in the .link file


Slide 26 : 26/26 : ManyPage : Summary (summary.en.html)

ManyPage : an OO tool to manage large web sites without using a database.

To set up and maintain a web site with less than 10 pages is quite easy today. It is somewhat more difficult to keep the coherence in a site that contains thousands of web pages, especially when you try to make them all keep the same 'look and feel' and you add some useful functions like multilingualism, horizontal and vertical browsing tools contextual help...

When we developed our first web sites, we looked into different areas from SGML to Object Oriented databases to find a convenient tool and we eventually decided to develop one of our own. It was designed to allow our editorial team to use out of the box wysiwyg HTML word-processing tools. But we wanted them only to have to deal with the information and not the presentation of this information.

One of the main characteristics of our tool is that the "dressing" of the page is not added when the page is requested (as is done on dynamic web sites). So it allows search engines to index our web site better and to manage the same number of request with a less powerful hardware solution than with a database.
Another characteristic is that the dressing templates are described in an object oriented way : each HTML object can use another one to describe itself and each object can be redefined for different parts of the web site.