IT HAS PAGES: IT'S A BOOK, IT'S A SITE

Our first exercice will be to create a 2D site for a bookstore. I imagine you asking for yourself:

- Why not a 3D spaces where the user can pick 3D books, put them in a virtual basquet and go to a 3D point of check-out?

This is possible but, with the experience we have with clients of our company (and we have some big clients like Warner Bros, GE, Kodak etc.) I can't imagine that only a few clients will pay the price to have a complete 3D site. 2D will remains and live with 3D for a long time, like television lives with movies and movies with teather performances.

For the construction of our 2D virtual bookstore (and for any site) we recomend the use of a Squeak object: the Book. This Book will be inside a Project and this Project will be inside a 3D window that will be inside our "Solo" area. It's inside the "Solo" because of a security reason: any thing in the "Solo" area doesn't have access to the internals of your system, like, by example, to write something in your hard disk. Only the " Private" area will be defined to have access to these restricted areas.

WARNING: Security is very important in peer-to-peer systems,

Lets go, step by step.

We will first to open a new Morpic Project and a "green window" (its name is :Objects). Click Presentation and drag a Book.

Old programers don't like to use graphic IDEs (Integrated Development Environment) because sometimes it's not easy to undertstand the relation of the concepts of OOP and what the creator of the IDE did.

Here, when we drag a Book we are creating an instance of the Class BookMorph, an object whose generic name is:" Book". Our recomendations is: if you will use this object in programming, change this name (it will be the name of the object-reference, the prefix to call methods)

To do this, click the Book, pressing the wheel of your mouse (or equivalent: Alt + leftclick for Windows). The Halo appears. And you can see and change the name of the object to: SiteBS - site of the bookstore.

TIP: Always use upper case in name of objects.

"Wheelclick" (oops!) again and you will see that the object of the Class BookMorph contains an object: page, name that we will change to: Homepage.

Like the resolution of my notebook is 1400x1050 and we will create square 3D windows, we will change the size of the page to 900 x 900.

To do this, click in the blue button of the Halo (having an eye) of Homepage to open the panel: Viewer that has many subpanels. To open a subpanel click in any title of subpanel and select in the list.

Select the subpanel: geometry and change the values of length and width.

OBSERVATION: You can't change the size of the Book directly - only by one page. Like we will, in the future, erase the headline of the Book, it's now bigger than 900x900.

Our site is only an exercice and will have only 4 pages. So: we need to add 3 pages. In the headline click the "point" at right and you will see new buttons. Click the "plus signal" 3 times:

Using the buttons, go to the pages and change their names to: PageAAAA, PageBBBB and PageCCCC. This pattern for names is because we can, in the future, include new pages to our site, between that we have now, and they will have consistent names.

TIP: It's a good idea to save your Project constantly, because sometimes Squeak-Croquet likes to freeze and you need to quit-without-save and will loose all your work. You don't need to do a "big save". Save now your project with the name: Bookstore. It will be at the folder: C:\Croquet\Squeaklets. Each time you re-save it, it will create a new version: Bookstore.002.pr, Bookstore.003.pr etc.

At this lesson we will only put some images on our site.

Download and unzip the images :

dmu2.zip

At each page we will have the logo of our bookstore.

First go to the Homepage. To load the file: b&v-logo.jpg, go to the "green window" and drag the object File List (from Tools).

Find the folder where you unziped the files and open b&v-logo.jpg. It's an object and also has a Halo. Click the Menu of its Halo and select: embed into and Homepage.

We will put also the images: wellcome.jpg, books.jpg, video.jpg and viewcar.jpg in the Homepage.

If the new images don't like to be over the logo you need to open its Menu and select: "bring to front".

Put copies of the b&v-logo in the other pages.You can use the green button (Duplicate) of the Halo to duplicate it. Remember to use "embed into".

DON'T PUT THE LITTLE IMAGES IN THE OTHER PAGES YET!

In the PageAAAA (the 2nd page) we will put: thegourmet.jpg and barefoot.jpg.

The last image: cartitle.jpg will be placed at the PageCCCC:

In the next lesson we will define, by program, the navigation by the pages. 


            PREVIOUS LESSON            NEXT  LESSON                
 

T. CONTENTS           HOMEPAGE

DISCLAIMER: This material can be translated for any language, and reproduced total or partially by anybody using any type of media. But, please, don't put your name like author. And let me know if it was useful (americo@dmu.com).The use of any code, 3D model or technique published is free and doesn't need to have any reference about this source.The author is not responsible for any damage that the material can cause to your professional or sexual life.