You are on page 1of 18

Web Site Requirements: Overview, Page/Module Descriptions, & Images 20100513

PURPOSE
This document provides a high-level functional description of features and a site architecture to be used by a developer to draft a work proposal and quote for services. This document was built based on requirements determined by the AREVA CO. Sales, Research & Education, and Marketing departments.

BACKGROUND
AREVA Co. is a 35-year-old manufacturer of premium-quality, integrally colored sheet glass for art and architectural uses. AREVA is headquartered and manufacturers all of its products on a factory campus in Portland, OR, United States. As part of its corporate mission AREVA is an active supporter of the arts and maintains AREVA Gallery, a fine-arts gallery in Portland that showcases world-class artwork produced using AREVA materials. Another key feature of the AREVA mission is the dissemination of education relating to the techniques and practices of fabricating artwork and fine craft in glass. To this end AREVA maintains a Research & Education division that teaches a yearround schedule of classes in its Portland and Santa Fe facilities and also sends its instructors to teach master classes at a variety of top tier arts institutions around the world. AREVA also hosts BECon, a biennial conference dedicated to topics of interest to glass fabrication practitioners.

INTRODUCTION
This document will provide a reference to the page types used throughout the site. It will also describe the constituent modules that are used to populate the pages. UI design reference images are provided for the Pages and Modules. The page and module language used in this document, while drawing some ideas from Joomla!, is intended to be generic and not meant to indicate the architectural requirement of any particular CMS.

HOSTING ENVIRONMENT
User Facing Applications
Major user-facing applications being considered include: Joomla! 1.5+/1.6.x (Primary CMS.) Magento 1.2.1.2 (Customized eCom solution) phpBB 3.x+ (Public forums) WordPress 2.9.x+ (3+ blogs running for specific author channels)

Development environment
AREVA will host functional clones of the production LAMP environment within its Portland IT infrastructure. The dev code repository will also be here. Developers will be granted appropriate rights to the servers and repositories

SITE FEATURE HIGHLIGHTS


Introduction
Following is a list series of specific minimal features and attributes of the project scope. Note: These are specific highlights and may be derived-from or above and beyond the features native to the constituent applications of the site.

Feature Details
Application page presentation templates Based on provided page designs to give the end-user a seamless transition between constituent applications. ACL Access Control List There will be the need for content and navigation features to be available depending on user authorizations. Knowing that ACL is not native to Joomla 1.5.x but pending in the release of 1.6.x it is important that the ACL method chosen will deprecate well to Joomla native ACL when available. Calendar A graphical representation of a monthly calendar that is filterable for content types. Each day will contain text links to content articles. An exemplar would be http://www.thecjm.org/ Cross-application single sign-on (session credentials) Any time a user signs-in on one of the component applications of the site, their session authentication will be reflected in the other constituent applications of the web site. Cross-application user sync User accounts created in any of the constituent applications of the web site will be mirrored in the other apps. Overall account creation minimums will reflect a global least common denominator. Authorizations shared as necessary. Display text font control For the use of specific hed and display text a font embed method such as

@font-face, Cufn, sIFR, typekit, or a functional equivalent will be employed. http://typekit.com Forward compatibility, native API All development should be performed with an eye towards the future roadmaps of the constituent applications. For example, the nascent Joomla 1.6.x (if 1.5.x is used) and its introduction of native ACL. Development should also make best use of the application-native APIs and plug-in architectures for flexibility. Google site search integration Google Site Search will be integrated into the site as a global feature and provide all expected search behaviors. AREVA uses Site Search on our current site. The search function will have an "advanced" mode page that exposes a larger tool set. We will upload a synonym dictionary to our account. Results will be presented in a tabbed format such as in this code example provided by Google: http://www.google.com/uds/samples/apidocs/tabbed.html Lightbox for inline images in articles A lightbox-type image-display component that is easily used in the articleauthoring environment. Must be able to: Support styled-type within the caption block. Link images for sequential presentation. Auto slide-show function. Locator tool (aka Resource Locator, radius search, or geo search) A tool for locating resources within a user-defined geographic range. For finding dealers, schools, teachers, etc. The tool will allow users to choose the domain of the search from a pre-defined set of options I.e. "Find teachers", "Find dealers" and then return a list view result-set. The tool will minimally accept the following types of geographic constraint input: US/Canada state/province The tool will allow users to constrain results based on the attributes of the search subject. I.e. If it is a dealer they may choose to only see "KGRC" dealers. The form will need to be able to be passed constraint values via URL when linking out from another page. Much of the functionality is represented by, for example, the Mosets Tree Zip/Postal Code Search Component that is an extension of the Mosets Tree plug-in for Joomla! Lesson Quizzes Administrators will be able to use and interface to author quizzes to be presented to users on the Lessons>Quiz tab of the Project Viewer page. Logged-in users will be able to request their scores be saved and their quiz history is accessible from their Profile page. Salesforce User sync

User accounts created in any of the constituent applications of the web site will be mirrored to Contacts in our Salesforce application. Similarly, our Salesforce app will mirror all Contact changes up to the web. All CRUD will be bi-directional. Salesforce Web-to-Case submission Our primary intake form will use the standard Salesforce Web-to-Case method with the ability to pass along the string necessary for proper routing. The form will have strong client-side input validation including field dependencies. Will require account creation and then the passing along of SF Contact ID for proper disposal in Salesforce. Subscription management Users will be able to purchase a timed subscription enabling them access to specific features (Lessons & Projects) and content TBD. Required attributes: Independent payment gateway. Subscription tiers giving different levels of ACL authority. Timed trial subscriptions. Batch generation of blocks of n # of subscription activation codes w/ batch tracking. Coupon codes (promo pricing). Auto-renew option for customer. Affiliate sales tracking. T&C intercept per session A particular section of our site will require users (on a per session basis) to indicate agreement with a Terms & Conditions declaration. This can be accomplished with, for instance, a modal window. Once they have agreed, they will no longer need to agree for the duration of that session. Failure to agree with the terms will result in the inability to progress deeper into the section. User contact forms We are encouraging users to contact us exclusively through forms and will not be publishing direct email addresses on the site. The forms will submit content as Cases to our Salesforce instance. The forms will have strong input validation and use reCAPTCHA (or similar). UGC intake forms Forms guaranteeing a minimal threshold of information for article creation and then providing a structured series of steps to load sequential instructional information with minimum requirements for each step loaded. Users will be encouraged to post projects and techniques they have developed to share on the site. This feature will ensure a consistency of visual presentation for both internal and external users. It is likely that this feature will be initially used exclusively by internal power-users before released to the public. Accordingly, the ACL must accommodate this behavior.

User account manager This environment allows users to create (and edit) a user account that will store their associated information such as newsletter subscriptions prefs. This should be coincident with the social profile feature and must allow for a single point of account creation to support all constituent applications of the site. Video Player and Hosting Expect to use an external service a la Vimeo (but with proper commercial licensing). Required attributes: HTML5 native player with elegant degrading to Flash player H.264 video encoding Easily embeddable component for article authors WYSIWYG article authoring The CMS article authoring interface should support wysiwyg type styling based upon the AREVA-defined style-sheet. The environment needs to be able to support the embedding of any media types supported on the site at large. Consider alternate to TinyMCE such as JCE.

PAGE DESCRIPTIONS
Page: Home
Location: / Description: This is the page that sits atop the AREVAglass.com domain and provides primary access to all of the site resources. Modules used: Canvas Global Header Graphic Features Text Features Menu Global Footer

Page: Open Content w/left-nav category-local menu

Location: (various) Description: This is a type of generic template that is used repeatedly throughout the site. Modules used: Canvas Global Header Global Category Title & Breadcrumbs Open Content w/left-nav category-local menu Global Footer

Page: About Us > (various)


Location: /aboutus/(various) Description: A number of sub-cats and pages lie under this cat. Almost all use the Open Content format. Modules used: Canvas Global Header Global Category Title & Breadcrumbs Open Content w/left-nav category-local menu Global Footer

Page: Products > Resource Centers Overview


Location: /products/resource_centers/ Description: This acts as a landing page for our Resource Center retail locations. Modules used: Canvas Global Header Global Category Title & Breadcrumbs Open Content w/left-nav category-local menu Global Footer

Page: Products > Resource Centers Profile

Location: /products/resource_centers/(RC_name) Description: This acts as the central point of contact for a given Resource Center. Modules used: Canvas Global Header Global Category Title & Breadcrumbs Open Content w/left-nav category-local menu Global Footer

Page: Products > Our Glass Style Details


Location: /products/our_glass/(style_#) Description: This is page that is presented to represent a single product Style (color). Modules used: Canvas Global Header Global Category Title & Breadcrumbs Our Glass Style Details Our Glass Filtered Nav Left Menu Global Footer

Page: Products > Product Image Library


Location: /products/product_images/ Description: Self-serve resource for dealers to collect bundles of prepared product images for sales use. Note: The content of this category will be need to have access control depending on user permissions. This section of the site will also need the ability to intercept the user and present a required T&C click-through to access the content as it, though free, is distributed with specific usage license terms. Modules used: Canvas Global Header Global Category Title & Breadcrumbs Open Content w/left-nav category-local menu Global Footer

Page: Education > Classes Feature Landing

Location: /education/classes/ Description: Top of class category with graphic features. Modules used: Canvas Global Header Graphic Features Text Features Menu Global Footer

Page: Education > Classes List View


Location: /education/classes/ Description: Nav interface for classes with list view. Modules used: Canvas Global Header Global Category Title & Breadcrumbs Classes Filtered Nav Global Footer

Page: Education > Class Details


Location: /education/classes/(class_name) Description: Details page for single class listing. Modules used: Canvas Global Header Global Category Title & Breadcrumbs Class Details Global Footer

Page: Education > Meet Our Instructors


Location: /education/instructors/ Description: Presents list view of instructor profiles. Modules used: Canvas Global Header Global Category Title & Breadcrumbs Article List View w/Left Nav

Global Footer

Page: Education > Methods & Ideas Landing


Location: /education/methods&ideas/ Description: This page serves as an introduction to the primary repository of educational and support content. All content under this category are one of four basic Content Types: Lesson, Project, Article, or FAQ. Modules used: Canvas Global Header Graphic Features Text Features Menu w/Feeds Global Footer A note on Content Types Content Types is the language we are using to describe the semantic (and technical) divisions of content that we place under the M&I umbrella. To allow for the M&I filtered nav these items must also be assigned to one (or more) of the available Method Types that act as a sort of top-level tag. The differences between the four types (while currently four types, they should be constructed in an extensible manner) may be considered thus: Lesson/Project These two content types are unique in that they have a specific set of requirements for authoring. They are also unique in that they use a dedicated front-end authoring interface that assures correctly validated and constrained input. Their single-page, tabbed, presentation interfaces are almost identical except for some differences in available tabs. Article The simplest published item under M&I. Essentially an open format for input that is eligible to hold any media types available to the CMS. FAQ Similarly simple and unconstrained as Articles, FAQ content is shaped by editorial intent to answer simple questions in brief and then refer out to other applicable content available site-wide. A note on Method Types Method Types is the language we are using to describe the extensible highlevel meta-data required by any item of content under M&I. They are used as

24

the left axis of the M&I Filtered Nav interface. They are not exclusive and may be concurrently applied to single items. The CMS must allow for back-end UI based extensibility of this vocabulary. Method Types are distinct from the ad hoc tag meta-data architecture that may be applied to articles and FAQs.

Page: Education > Methods & Ideas Filtered Nav


Location: /education/methods&ideas/ Description: This page is the primary nav tool for all of the content held under the M&I umbrella. It acts to filter the four primary content types against the fabrication Method Types. Results are presented in a tabbed view by Content Type (and All). Modules used: Canvas Global Header Global Category Title & Breadcrumbs M&I Filtered Nav Global Footer

Page: Education > Methods & Ideas > Lesson/Project Viewer


Location: /education/methods&ideas/(projects OR lessons)/(item_name) Description: This page view is used by both the Lesson & Project content types with slight difference in the template depending on which. This page view will be one of the prime uses of the subscription management ACL and will need to gracefully defer users with inadequate permissions. Modules used: Canvas Global Header Global Category Title & Breadcrumbs Lesson/Project Viewer M&I Method Left Menu Global Footer

Page: Education > Methods & Ideas > Lesson/Project Submission Interface
Location: /education/methods&ideas/(projects OR lessons)/(item_name)

25

Description: This interface is designed to be the primary pathway for the creation of both Lesson and Project Content Types. While not to be available to the public at launch, it is to be a fully front end integrated feature. AREVA staff will post content as a community member author and eventually we will open up authorship to other community member users. Modules used: Canvas Global Header Global Category Title & Breadcrumbs Lesson/Project Submission Interface Global Footer

Page: Whats Happening > Calendar


Location: /whats_happening/calendar/ Description: This is the single page master calendar interface for all events company-wide. Modules used: Canvas Global Header Calendar Global Footer

Page: Resource Locator


Location: /locator/ Description: Tool allows users to apply geographic search constraints to locate resources in their area. Modules used: Canvas Global Header Global Category Title & Breadcrumbs Resource Locator Global Footer

Page: Community > People Landing


Location: /community/people/ Description: This page acts as the gateway to browsing the profile pages of the community

members. Will follow the best practices of the social engine used. Will include feeds of global activity, featured profiles and other dashboards provided by the engine. Modules used: Canvas Global Header Global Category Title & Breadcrumbs People Landing Global Footer

Page: Community > Forum


Location: /community/forum/ Description: This area contains the Forum application. Modules used: Canvas Global Header Global Category Title & Breadcrumbs Forum Global Footer

MODULE DESCRIPTIONS
Module: Canvas
Description: This represents the universal background graphical elements that underlie all pages.

Module: Global Header


Description: This module is used throughout the site as a universal element containing the fundamental navigation and context feedback tools. This template contains the logotype element (linked to Home) and nests with the rest of the Global Header sub-modules. Sub-Module: Global Top Nav Description: This sub-module of the Global Header is the primary top-level navigation menu for the site. In addition to providing navigation elements it also provides visual feedback of current location by displaying the Category>Sub-Category context of the current page. The menu is driven by the CMS. Categories and sub-categories may be configured to be links or simply place-holders in the drop-down structure.

Module: Global Category Title & Breadcrumbs


Description: Provides label for local (sub-)category and context via a breadcrumb leading to the site top.

Module: Global Footer


Description: A collection of links to social sites and RSS feeds.

Module: Graphic Features


Description: An assembly of feature images. This template provides for the loading of specifically sized graphic elements backed by links. The loading and changing of the individual elements must be supported by the CMS.

Module: Text Features Menu


Description: This module provides a simple direct access to URLs within the site. A menu driven by the CMS.

Module: Open Content w/left-nav category-local menu


Description: This is a common page template used throughout the site. It consists of a left-nav menu providing a list of all of the articles in the local category level. Sub-cats open only when within the parent section. The main content body area presents one complete article at a time. The article template used here is a generic single-column blank slate that can be populated using the WYSIWIG editor with style tags adhering to our stylesheet. All media types used site-wide will be embeddable. Photos (lightbox), video, audio, Google Maps, etc.

Module: Contact Intake Form


Description: This module is the primary conduit for visitors to submit communication. It posts to our Salesforce instance (using the SF Web-to-Case method) and depending on options selected will route to the appropriate recipient. This form will need to be applied for scenarios that have different input validation needs. I.e. an email subscription request will have a different level of required fields than a mailed catalog. This could be handled simply by cloning the form and adjusting the fields for the specific use or perhaps by more sophisticated relationship dependencies between fields.

Module: Our Glass Filtered Nav/Search Results


Description: The right column presents a result set of swatches for the returned styles. This is a paginated view. The default result set is All

Module: Our Glass Filtered Nav/Search Menu


Description: The left column provides a set of layered navigation controls to filter our product line by color family Please note that color families are not exclusive. I.e. an aqua colored glass could be a member of both the green and blue color families. Also there is a search box that will allow for direct search by our style #s. The default result set is All

Module: Our Glass Style Details


Description: This is a single-page tabbed-view providing the details concerning a single style (color) of our glass. Note: This tabbed view interface template is re-used throughout the site.

The tabs are: Tab: Overview Presents fundamental details concerning this style including a reference swatch, introductory text, and a set of thumbnails for a lightbox Gallery of inspirational images of work derived from this style. Tab: Sheet Glass Presents text and images concerning the characteristics of the Style (color) as found in the Sheet form. The right column provides links out to eCom for products in this style/form. Please note, that this tab should not display if this tab has no content. Tab: Rod Presents text and images concerning the characteristics of the Style (color) as found in the Rod form. The right column provides links out to eCom for products in this style/form. Please note, that this tab should not display if this tab has no content. Tab: Frit Ibid. Tab: Stringer Ibid.

Module: Classes Filtered Nav


Description: Nav interface for classes. Left column provides option to filter by location. Default sort is by date of occurrence. Right column returns list view with thumbnail and description.

Module: Class Details


Description: Tabbed, single-page interface for reviewing details of a single class listing. Note the use of the tabbed interface. The tabs are: Tab: Overview Feature image and description details. Tab: Class Images Thumbnail gallery of lightbox images of participants and works from the class. Tab: Instructor Bio Displays content of instructor profile.

Tab: Discussion Links to forum thread on class topic.

Module: Article List View w/Left Nav


Description: This page returns a list-view of articles within its sub-cat. The left-nav menu is local to the category.

Module: Text Features Menu w/Feeds


Description: A menu with live-text labels driven by the CMS. Below each button is a List of most chronologically recent items within a given set of content type constraints.

Module: M&I Filtered Nav


Description: This is the primary filtered nav interface for content found under M&I. The left column menu allows for initial selection of Method Type and then results may be derived in the tabbed results interface by All or further constrained by selecting a Content Type tab.

Module: Lesson/Project Viewer


Description: A tabbed interface used to present the Lesson and Project Content Types. The tabs used are as follows: Tab: Overview (Lessons & Projects) An overview of the Lesson/Project. Provides linked menu of discrete Chapters/Steps, a poster image (link), introductory text, and links to recommended prerequisite Lessons/Projects. Tab: Chapters/Steps (Lessons & Projects) This is the primary presentation interface for the Chapters (Lesson) or Steps (Project). It consists of a display window (video or stills) over a text display and Overlay link display that refresh as each chapter of video displays or still slide advances. A Note on Overlays Overlays is the language we are using to describe a special feature of the Chapter/Steps tab of the Lesson/Project viewer. The behavior works thus: Per Chapter/Step, links may be provided in a dedicated box below the video/still window. When a user clicks on one of the Overlay links, the overlay opens to occupy the video/still window. If video was playing, it pauses.

The Overlay article itself is a simple open content box that can be authored with any of the media types available to the CMS. When the Overlay window is closed, any video that was paused resumes playing and the player controls are returned to the user. This could be a modal window if necessary. A Note on advancing through Chapters/Steps In the interest of simplicity, Lessons/Projects may be authored with Chapter/Steps composed of stills or video but not both. When using still the advances between steps are manually controlled. With video media though, the Chapters/Steps auto-advance to the next item in sequence. Upon each advance to a new Chapter/step the text and overlay links below the player window automatically refreshes. Tab: Learn More (Lessons & Projects) This provides a structured set of links to: List of related documents (for ex. The annealing chart) List of Products used in the lesson Short text summary of the lesson and suggestions of where to look next. Suggested Projects that apply the skills learned from this Lesson. Tab: Quiz (Lesson only) This page provides a wrapper for a simple quiz mechanism. The quiz system used must allow for saving scores to a logged-in user profile. Tab: Discuss (Lessons & Projects) This provides a read-only display of the most recent posts to the forum concerning the Lesson or Project at hand. If a user chooses to reply to the thread, they will be taken to the forum interface for the thread.

Module: M&I Method Left Menu


Description: Used to deliver the user to the M&I Filtered Nav page. Passes along the Method Type selected so that may be pre-selected for the user upon arrival.

Module: Lesson/Project Submission Interface


Description: This interface is intended as the primary path for the creation of Lessons and Projects. It is to be considered a front-end feature although access will be determined by User permissions. The form provides a structured step-by-step experience for the creation of Lessons/Projects and assures the validation of minimum requirements. The form adjusts its presentation for the requirements appropriate to Lesson/Project and video/still build methods. Once a minimal set of data are entered it will allow for saving the form for return work sessions although another higher threshold of completion must be met to allow for submission to publish

Module: Calendar
Description: Master Calendar interface for all classes/events. Single-page at-a-glance view that may be shifted in time and/or filtered by location and other tags. Must be able to direct to this page with filters passed in the URL. Presents simple synopsis of event with link out to full event listing.

Module: Resource Locator


Description: This is a tool that will allow users to input a set of geographic criteria (zip, state, radius, etc.), select some attribute constraints and then be returned a results set of listings. The form will need to be able to be passed constraint values via URL when linking out from another page.

Module: Forum
Description: Wrapper for the integration of the Forum. Look/feel skinned to our presentation standards.

Module: Community People Landing


Wrapper for the integration of top page of the social engine. Use of modules/feeds TBD based on engine. Look/feel skinned to our presentation standards.

You might also like