How to merge the spry widgets and apture pages onto a CRE/OSC site.

Wednesday, July 23, 2008

There is one relavent videocast: "OSC to add a new page". The CRE is enssentially a OSC, this tutorial is applicable to both CRE/OSC. The basic element of the CRE/OSC, is a box, and the info box is what we need to work with.

The default pages are part of the standard installation, are created once the CRE is installed. The CRE/OSC's approach to the e-commerce application, is expecting everyone to use the package for a store application.

A CRE/OSC page has a lot of connections to the supporting infrastructure. The video cast is to show you now to connect to its infrastructure. And it is much easier to create a new page by replicating from an existing one, like the videocast has shown. Once the page is created, we simply place what we would put on a normal page inside of the center info box.

A CRE/OSC page is a holder of many boxes. We need to create different info box to go into different pages. So by copying from an existing page, we retain all the necessary mechanism in place, just to follow the video tutorial to change to their proper connection. Since the php scripts are to interface the user and database, and create the store operation. And we are not going to change how the store works, hence no need to modify those php scripts. What we are trying to do here is to have a few more information pages to show content like language programs, our advantages and values, ...etc.
It is most logical to create blank page from the index.php, like the one on this page: http://cre2.plus247.com/index.php. Then we simpy have to enter the content to the center info box,

Converting a CSS site to a Spry Media Site

Thursday, June 5, 2008

1. start the project with source template folder and spry_example folder.

2. create a target folder, and copy all template files to the target folder; and name the target html file as index.html.

3. rearrange the target files as in the spry_example folder:html on top level, and sort the rest of files into css, js, images, and xml folders. (a) if the original files were moved to a different directory, make sure to update all references inside the file.

4. copy spry_example/css/spry_style.css to target/css/spry_style.css,

5. add <link href="css/spry_style.css" rel="stylesheet" type="text/css"> after the last css reference, normally before the </header> tag

6. make the following files are copied over:
(a) spry_example/xml/ to target/xml/
(b) spry_example/images/4xml/ to target/images/4xml/
(c) spry_example/images/4thumbs/ to target/images/4thumbs/

7. follow the Lynda DWCS3 Beyond 3-8 to structure the div for both Data Set and Accordion Widget.
(a) select the outer most tag covers the outer most area that the dataset control is to be placed.
(b) insert the layout div tag, as id="ds_control",
(c) click on "New CSS",
(d) define in the spry_style.css, and
(e) edit the appropriate width property, inside the category box,
(f) do the same for "widget_display", as in step b to step e

8. follow the LDWCS3B 5-2 to 5-5, 7. Check the SpryAssets folder, make sure all files are accounted for, sometimes DWCS3 DOES NOT copy all the necessary files to the SpryAssets folder

9. preview to make sure all previous steps are done correctly

10. add effects to the div tag that you like, by following the LDWCS3B 5-11 for effects

Reference Files

Organizing content in Spry

Saturday, May 24, 2008

Organizing the Content
The AJAX (Adobe Spry framework) can dramatically condense the number of pages of the website, by organizing the content in two levels: 1) dyanimc data and 2) mulitpane widget.

Example

For example, contents of podcasts can be held in data source, episode by episode. So the viewers can click and select the desired episode and to view and listen from the ready-made Spry widget, such as accordian.

To ease of our discussion here, we are assuming the podcast episode contains relative large content, like http://20somethingmarketing.com/, not the short summary style like http://www.manager-tools.com/.

The multipane widget can hold the content in multiple panes and showing only one at a time. The content is rganized into multiple pane. For example, each podcast episode may contain: a) player and caption, b) article, c) illustrative images, d) reference material. Each block of content can be kept in a pane. This allows the visitor stays in the page while viewing large amount of content.

Applying SPRY Widgets

There are many ways to organize the information. The objective here is not to re-invent the wheel and get a free ride from Adobe SPRY framework. Let us use an example, the existing Promotion Oracle website, to demonstrate one of the possible way to organize the content using SPRY Widget. First, we divide up the content as the diagram below. There are different design views to the site layout. Some people like to fit all content on one page and eliminate the navigation buttons entirely; but others would prefer to display to a the screen size and avoid the need to scroll up and down on a long page.






Most of the web 2.0 sites that I have seen, keeps the simple navigation but avoid the scroll bar.

Apply the Technique
Follow the Chapter 5 Building AJAX Pages with the Spry Framework of the Dreamweaver CS3 Beyond from Lynda.com. This chapter of tutorial covers how to create the data source and to present the data source through spry widget.

Although there are ways to create sites to display the content dynamically - like different newspaper that you receive everyday. We are not going to cover that, just plain static content for now.

Migration Plan
To revamp or create an interactive web design, one must be able to:

1. to create a site from template - (openwebdesign.com, and .dwt)
2. to create XML DS, enter contents;
3. to create SPRY Widget and link to the DS;
4. to revamp all our own biz sites to deduce an optimized SOP;
5. to offer an interactive biz sites service, using this SOP.

Dreamweaver CS3 libray+spry menu

Wednesday, May 14, 2008

tutorial

Lynda Dreamweaver CS3 Essential Ch16-17 Exercise
Lynda Dreamweaver CS3 Beyond Ch5-6 Exercise