Very often the things that take the longest in any website project are creating pages, filling them with content, and organizing (then reorganizing over and over) the website architecture. Prototype is a tool designed to make that part of the process much quicker and easier, and enable non technical users to work together. This tool will help web designers, non technical people, and programmers collaborate to create webpages, enter content, design website architecture, and create specifications for web application modules. It is not a tool you use to create a finished website. It only helps you create and organize the content of your website. You'll use other tools to create the website appearance and build the actual function modules that your website may need. Prototype will help you dramatically reduce the amount of time you spend creating pages and entering content, and is especially useful if you are building larger websites or if there are more than one or two people involved in the process.

The General Idea

Create all the webpages you'll use in your website. Then enter content for each of those webpages. The system will help you keep track of which pages are empty, under construction, and complete. Organize your webpages into a website architecture. This will later be used to create navigation menus for your website. Once everything is done, you can export your website directly into izotz!CMS or as an html, asp.net, or php website that you can give to your web designers for further embellishment, then install on your own web server.

Remember, Prototype helps you create your pages, enter content, and create a website architecture. Other than how the content on each individual webpage looks, you don't need to worry about the website appearance at this point. That's not what this tool is doing for you. Later on you can use other tools within the izotz!CMS system or your web designers can take the raw html files and do whatever you want to them. But for now...the focus is on creating pages and entering content, and creating an architectural layout.

Creating Website Projects

You can have as many website projects in your Prototype as you want.  The idea is that the websites in a prototype project are somehow related, and will end up sharing content, graphics, function modules, and other website assets. If your website projects are completely unrelated, you'll be better off creating a separate Prototype account for each unrelated website. The ability to share webpages and graphics between websites is great if the websites are related. If they aren't, and you have a lot of webpages, you'll find yourself quickly getting confused about what goes where.

Creating Webpages

Click the Create Pages tab, then click the New Page button. You can create one or more pages by entering page names. When a new page is created, the small circle next to it's name is initially white, indicating it has no content. After you add content, it turns yellow. After you mark the page complete, it turns green. This makes it easy to keep track of which pages still need attention.

Editing Webpages

Click the Create Pages tab, then click the target webpage title on the list in the left window pane. The HTML editor will open.

Using the Workspace

At the bottom of the HTML editor is something called the "Workspace". This is a place you can create notes, tasks, and temporarily save content that may need to be shuffled between webpages. It is shared between all the webpages, so whatever you enter into the workspace is available to any page you may be editing.

Creating Module Specifications

If your website will have some kind of web application module, instead of entering page content, create the specifications for the module. When exported, your web programmers can easily refer to these specifications by clicking the page in the exported website. Later when the module is actually built your web designer can swap out the static page for the new application module.

Most web applications have some kind of online form. The HTML editor lets you design your forms by placing form elements onto your specification page.

Creating Forms

The HTML editor has a button on the toolbar that lets you add HTML form elements to your pages. This makes it easy to design form layouts and tell your web programmers what kind of data your forms need to collect, and what your form should look like. But be aware that the form you build will not actually function until a web programmer builds the back end web application to handle form input. The tool is there to help you visually design forms, but doesn't build a functional form.

Organizing Your Website

Click the Organize Website tab, then select the website menu from the list in the left window pane. Drag and drop pages from your page library onto the Navigation Menu on the right side of the page. Drag and drop pages around the menu to change the menu architecture. To change the menu item text, click the page on the Navigation menu tree, and the title will become an editable box. Type in the new name and click outside the box to save the new text.

Preview Your Website

Click the Preview Website tab, select a website project from the pulldown menu, then click an appearance skin. Then click the Preview Website button. Your website will open and you can see how the architecture and content look in a variety of different skin layouts. If you export your prototype into izotz!IMS, you can permanently assign any of these skins to your website.

Exporting Your Prototype

You can export your Prototype project at any point during the development process. When exporting a project, all the websites in the project are exported together as separate websites. If you export into the izotz!CMS system, your website is instantly online. You can then use the izotz!CMS Administrator to further work on your website, add an appearance skin, add function modules from the izotz module library, set permissions for the website and webpages, and do a lot of other things to make your prototype a finished website project.

You can also export your website as either an .html, asp.NET, or .php website, and hand it off to your web developers to embellish the website appearance, build function modules, and do whatever else is necessary to turn your prototype into a finished website. Your exported website can then be installed on your own webserver.


Try out izotz!prototype at http://izotzprototype.com.