MyRealPage Websites: Anatomy of a Web Page

MyRealPage Websites: Anatomy Of A Web Page

Page

A page is the central concept in MyRealPage (MRP) websites. It is the end result of various website wide and page-specific configurations; and it is obviously what the end user of the website will see. Hence, it’s important to understand how a web page is built and what it’s made out of.

A page in MyRealPage websites is modeled to include the following characteristics:

MRP pages can be edited in-place using a custom WYSIWYG editor developed as part of MRP Website System. A page can be edited via two distinct modes: Content and Layout. Content editing allows the user to add, delete and configure individual weblets: content pieces on the page; whereas Layout editing allows the user to edit the container cells into which the content can be inserted.

Page Layout

Page Layout is a grid-like structure which allows the user to position and decorate page content. Layouts on MRP pages can be edited in-place, right on the web page where they are located. Layouts are based on HTML tables and support most of the regular HTML table functions, such as column and row spans, sizing, padding, etc. Each layout grid cell can also be configured with a custom CSS class to target its visual attributes via CSS.  The in-page layout editor allows drag-and-drop resizing of the layout cells, as well as precise sizing via built-in dialogs that configure columns, rows, and individual cells. Each cell in the layout becomes a container for weblets (individual content components) which can be added and moved between containers via drag-and-drop. Layouts can be nested within each other. One can insert an additional layout within an existing layout cell, in order to provide nested grid for content. Nested layouts can be dragged and dropped into a different cell or deleted, much like weblets. It is important to understand that the primary purpose of the Page Layout is to provide an editable container space for page content  which is represented by weblets.

MyRealPage Page Layout Editor

Weblets: CONTENT components

A weblet is a fundamental building block of a web page content in MRP websites. In concept, a weblet is similar to a web widget; but with a few important differences. It is modeled as a component to contain a very specific and individually configured piece of content or service. All content (except for Custom Templates) on MRP websites is represented by weblets. For example: formatted text, custom form, quick listing search form, a menu, flash banner, sitemap, etc: all of these content pieces are implemented as weblets. Each weblet occupies a well defined spot on the page and each weblet is responsible for rendering itself; it can connect to a database, to a 3rd party data service, to another website; and eventually produce any necessary HTML code. Each weblet can also process page submissions, as happens with form posts. Each weblet also contributes its own CSS and its own javascript as necessary. Several weblets will share the same javascript resource if necessary and only one link to this resource will be included into the resulting page. Even though each weblet’s position in the page is defined by where it’s located with regard to the page layout, it is possible to change the weblet’s positioning by applying absolute CSS positioning.

MyRealPage Content and Weblet Editor

MyRealPage Weblet Registry MyRealPage platform is configured with a registry of weblets. When the users choose to add new content to the page, they are presented with an option to select which weblet they would like to use. The list of these weblets comes from the weblet registry (at this time, this registry is fully controlled by MyRealPage and cannot be extended by 3rd parties).  Each weblet can be further configured with its own specific “settings” screen which will present appropriate options to the user. For example, a “Featured Listing” weblet will allow the user to configure which listings to showcase, or whether to choose automatic settings, slideshow interval, etc; whereas a “Home Evaluation” form will allow the user to customize or add form fields and specify where the form “success” screen is located or who to send the form submission results to. Since each weblet can be configured with its own set of options, each weblet can be arbitrarily complex or simple. An example of a simple weblet would be a “HTML Markup” weblet which allows users to copy-and-paste an arbitrary HTML code into a place on their web page.

edit-weblet-featured-listing edit-weblet-quick-search-form edit-weblet-home-eval-form

Edit Featured Listing Weblet

Edit Quick Listing Search Weblet

Edit Home Eval. Weblet

MyRealPage weblets have been built in such a way as to allow maximum re-usability of certain features. For example:

  • Forms support:
    Form support allows MyRealPage websites to render all form-based weblets in a consistent manner. Form support allows you to build weblets based on form functionality and automatically inherit form customization, such as adding, editing, and deleting form fields. It also allows the user to configure such general settings for each form as: which email address to send the form to, whether there is a “success” landing page for the form, etc. For example a “Custom Form” weblet allows a user to build a completely new form from scratch using this support. Each form can also inherit automatic CAPTCHA support.
  • Snippets or Lead-in support:
    Snippets or lead-ins can be thought of as anything that needs to take the form of a list. Each item in the list can be expressed as a title, small picture, short description and a link. A common “editor” user interface has been built to support snippets. Such weblets as “Reports”, “Testimonials”, “Awards”, and generic “Snippets” are based on this support. Each of these weblets will also automatically inherit the ability to render itself as an RSS feed, since a list of items is exactly what RSS feeds have been designed to represent. This opens such opportunities as being able to “feature” a testimonial, a recipe, or a how-to via the “News” weblet on another web page.
  • Flash Banner support:
    Flash Banner support allows a designer to package a Flash-based banner and expose a set of completely custom and banner specific options to let the user customize the banner. Such options can be custom images, custom transitions, text formatting, etc. Flash Banner support already provides facilities for most of useful options that can be easily re-used.

For graphic designers, it’s important to understand how a weblet is rendered into the final markup. Each weblet is always rendered in an outer “div” tag which will also include a specific weblet class. Each weblet is configured to have its own CSS class and if a website’s look-and-feel requires to change the look and feel of a specific weblet; that CSS class can be targeted from within the CSS stylesheet (read below on CSS Support). In addition, most weblets (with a notable exception of Flash Banners at this time) are rendered with an inner “div” tag which carries “weblet-inner” CSS class. This inner “div” along with the outer “div” can be used to achieve the “Sliding Doors” effect for CSS styling.

 

 

[ weblet content ]

 

 

Also note, that each weblet can be configured to carry its own Custom CSS ID: this is especially useful when only a specific instance of a weblet needs to be targeted via CSS. As an example, let’s take the “Menu” weblet. “Menu” weblet can be configured to be displayed either horizontally, vertically, include only a subsection of website navigation etc.  A page can contain several instances of such menu weblet: again, one horizontal, one vertical, for example. Using Custom CSS ID, it’s easy to create a specifically configured menu weblet and then change its look and feel through CSS without affecting other menus on the website or page.

Instead of documenting each weblet’s markup structure with all possible permutations of settings; it’s more practical for a graphic designer to use tools such as Chrome’s “Inspect Element”, Firebug or IE Developer Toolbar to examine the resulting page markup structure to see what CSS styles may be appropriate for a particular weblet; use Custom CSS ID to single out a specific weblet for CSS styling.

Page Settings

Page Settings represent “meta” information about the page. This information includes such things as:

  • Page Title
  • Page Description meta tag content
  • Whether it requires a login
  • Custom content that goes into thesection
  • Keywords meta tag content
  • Custom page favorites icon
page-settings page-settings-custom page-settings-advanced

Page Settings (Basic)

Page Settings (Custom)

Page Settings (Advanced)

Page settings are used primarily to tweak page parameters necessary for Search Engine Optimization (SEO) or to inject very custom and specific behavior into the page.  (Note that Favorites icon can be configured for each individual page, and/or for the entire website)

MyRealPage websites automatically provide support for visitor registration and login. Each page on MyRealPage website can be configured to require a login; and each file or document uploaded to MyRealPage website can also be set up to require a login to access or download.

Template: Master Template or Page-Specific

master-page-specific-templatesIn most cases, every page on a website will interact with a Template.  There are two types of templates on MyRealPage website platform: Master and Page-Specific.

Master Template. A Master Template is automatically provided with every MyRealPage website and cannot be deleted. Master Template is designed to capture the look-and-feel of a common website page and serve as a template for such pages.  Master Template is edited and managed in almost exactly the same manner as a normal page, with a notable exception of one key element in the Layout. In a Master Template, you need to have at least one grid cell in its Layout to be designated as a “Content Well”. Content Well identifies where the page content should flow in: it’s the reusable part of the Master Template.

master-temlate-content-well

Page-Specific Template.  A Page-Specific Template is a template just like a Master Template, except it is applied to one page only. You cannot edit a Page-Specific Template separately from the page; it’s edited when you edit the page. A Page-Specific Template is created automatically when you edit a layout on the page that belongs to the Master Template.  At that point, a copy of the Master Template is created and attached to the page. This also means that at this point the page stops inheriting from the Master Template. An informational label below the Editing Toolbar will change from “Template: Master” to “Template: Page-specific”.  You can revert back to the Master template by using the “More…” menu in the Editing Toolbar and selecting to re-apply the Master Template.

master-template-appliedpage-specific-template

It is important to be aware of a few caveats when dealing with the Master Template while editing an individual page (it is possible that these caveats will be phased out by modifications to the MyRealPage website platform in the future):

  • When editing a weblet that belongs to the Master Template while editing an individual page, you will be prompted to confirm that you, indeed, want to edit the weblet that belongs not to the page but to the Master Template. Editing a weblet on the Master Template from an individual page WILL NOT cause a Page-Specific template to be created.
  • Editing the LAYOUT that belongs to the Master Template while editing an individual page, WILL AUTOMATICALLY create a Page-Specific template for the page being edited, and apply the layout changes to the Page-Specific Template NOT the Master Template. Note that at this point, the page will stop inheriting from the Master Template; and any change on the Master Template will not propagate to the page (you can re-apply the Master Template if this action was not intended by you).
  • Each Page-Specific Template is created with a link to the Theme that is currently applied to the website. Switching the Theme for a website will disable the Page-Specific Templates created under a different Theme. This is necessary, as MyRealPage themes may be *structurally* different and hence Page-Specific Templates from one Theme may not be appropriate in another. However, if you switch the Theme and not publish your changes, you can return back to the original Theme and the Page-Specific Template will be re-instated. Page-Specific Template for an old Theme will be lost if you switch the Theme AND PUBLISH the new Theme.

When rendering a page, MyRealPage website engine will do the following:

  • Determine the Template for the page: Master or Page-Specific
  • Render the Template (Master or Page-Specific)
  • Render the Page within the Content Well of the Template
CSS Support

MyRealPage websites have completely open and editable CSS support. There are several sources of CSS “contributions” that make up the final CSS of the rendered page, but most notable for the graphic designer are only two sources: Master Template and Page.

css-right-click Right-clicking on the Master Template or a Page in the “Manage Website” screen, will allow you to edit your own CSS. Custom CSS that is added to the Master Template will be applied to all pages in the website, whereas, editing Custom CSS for a page will make it applicable only for that page.

Each Theme will also contribute its own CSS to the website; hence you can always choose to “Assemble effective CSS” in the context menu on either the Master Template or a Page. This function will “roll” all the CSS from the Theme, as well as Custom CSS for the Master Template and/or Page and show the resulting CSS rules. The effective CSS is always referenced as one file to save round-trips to the server, and it’s assembled by the MyRealPage website back-end system.

In addition, each weblet contributes its own CSS. There will be only one instance of each CSS contribution from each type of weblet. That CSS is also assembled into one file to save round-trips to the server. It is linked in the page above the Theme/Master Template/Page CSS and hence can be fully modified by subsequent rules in your Custom CSS. If you choose to use Custom Templates, the CSS that belongs to the Custom Templates will also overwrite the CSS contributed by weblets.

If you prefer to link to a CSS stylesheet that you create yourself externally, you can use the CustomContent feature in Site Settings or Page Settings to insert that link to a 3rd party server, for example; OR you can put a CSS file into the Web-Drive and link to it via “_media/…” relative path as explained in the Resource / Asset Linking section.

Resource / Asset Linking

MyRealPage website management system provides full control over linking to graphic and other resources in the HTML pages. The system comes with a Web-Drive which is a place where all custom files, such as images, PDFs, and other, can be uploaded and linked to. Web-Drive allows the user to create arbitrarily nested folders and browse content in them much like in a typical File Manager. Right clicking on each file gives additional options.

webdrive

For a designer, it is important to keep the following points in mind when dealing with Resource / Asset Linking:

  • All references to resources should be relative: this is important as MyRealPage website system supports both Live and Staging modes for the websites and may change the root portion of the URL under which the website is served
  • All references to resources located in the Web-Drive should begin with “_media/…” followed by the folder name as visible in the Web-Drive
  • It is possible to upload files directly to the root of the Web-Drive; in which case the file would be linked as “_media/file.ext”

There are no restrictions as to what types of files can be linked from the Web-Drive. This means that you can use the Web-Drive to host CSS and Javascript files to be referenced by pages.

The Web-Drive also contains a root folder called “My Vault”. This folder should be used to store files that are only accessible to the website’s registered users; i.e. accessing or downloading these files requires a login.  For example, a special report may be uploaded to this location and will require a user to be registered and logged in. The root reference for this folder is “_vault/…”

For the end user, when using MyRealPage website tools there will be no need to remember how to manually link the resources. MyRealPage tools come with all the necessary built-in dialogs that will allow the user to select the resource to link to as appropriate; they also include dialogs to link to pages.

In addition to regular file management, MyRealPage website system includes the ability for the user to edit images directly from the Web-Drive. The images can be cropped, resized, etc in a special web-based editor and re-saved back to the WebDrive. This is useful for images that are too large or need to be tweaked. Also, when the user is inserting an image into a space on the page that is too small to accommodate the image (in extreme cases, an image uploaded directly from a camera can be many times the size that can be fitted into a webpage). In that case, the system will automatically alert the user to the fact that the image is too large and allow the user to either automatically resize the image, manually resize the image, or leave the image as is.

 

image-prompt

Subscribe To Our Blog


Learn something new every day