User Experience

Forward:

This document is designed to outline why, when a user comes to our website, he/ she will want to stay on this site and create a website.

The hook:
When an individual first navigates to our website, either first from a google search or a link from another website, we know that they will be looking for a way to create a custom website. Once the user is on the page, we are now marketing toward individuals who are web-savvy, but do not have the skill-set/time to develop their own website. Now that we have limited down our client base who will be using our product, we now must look at what will incline people to stay on this page.

When the user begins to look at our front page, they will see a page that is well designed using web 2.0 styles and includes testimonials by other users who have used our site and created websites that are out in the world, living and active. They will be able to click links to see the other user’s websites and have the ability to examine websites that were made by our developers.

Also, in addition to this, we will have a button  directly on the front page ( separate from the link in the menu) that will direct them to creating a new user. This will be placed near the bottom of the front page and will act as a sort of “big red button” that after they are drawn into the website by the testimonials and other features of our site, they will be inclined to create a new user. This will draw the new users in and make them want to create an account with our website and get started creating their own website!

In conclusion, with the plethora of features that our website offers people, and the different testimonials and example websites that we display to the user, users will have no choice but to use our product and create their own website.

The User story:

    Once the user has created an account and logged in for the first time, they will be greeted by familiar tools that they will have seen in other editors similar to ours, on the left they will see the primary toolbar and on the right they will the properties editor that gives them full customization over each element that they place in their webpage. And in the middle of the screen they will see their main workspace where they will add all their content into their website.

Most likely, the user will start by hovering over the different tools that to see what each of their functions do. Once they have a grasp on what each element does they will begin the 5 step journey to website creation:

First: They will decide what the theme of their website is going to be, what color scheme will be used, who the target audience is, and so on.

Second: They will map out the pages to be used for this site: Ex. Home, Contact, Blog, Photos, etc.

Third: They will create the master template. This is important because the feel that is created here will translate to all the other pages. It is important for them to add the menu bar here and any Text that you want to translate onto every other page, common places for this kind of text are in the footer and header.

Fourth: They will begin adding content and customizing the individual pages. In this step you will be adding images, text, forms, and other miscellany that will be constrained only to individual pages.

Fifth: Publishing their page! They will take the code that was generated and add into the public_html folder that is provided to you by your web-hosting company and Voila! They will have created their website in 5 simple steps.

Canvas Serialization: status: failed

Today after approximately 4 hours of work, I discovered something quite unfortunate. We are unable to serialize Canvases...It took a long time just to figure out how to serialize something using GWT (to do this I had to create a spike for serialization) once I was able to serialize a string, I took to the task of serializing a SmartGWT canvas, this yielded the following result:

Previously, it was my understanding that Ian had already confirmed that serialization of a canvas object was possible, but when I tested his code, I found that what was actually happening was that nothing was being serialized, but instead he was getting java.io* errors, the reason being that you are unable to serialize things client side like he was trying, therefore he never ran into this beautiful error. I believe the reason this went unnoticed was due to the fact that his error gets thrown, and you get output of it, but it gets silently ignored and does not crash the web app. But, once serialization was implemented server side correctly, I found out that it is impossible to serialize a canvas.

      In light of this discovery, I feel that we as a group need to go back to the drawing board concerning how to save our projects. I believe that the only way that we will be able to save projects though will be through a technique of back parsing, where we take our parsed html ( because it can be read in as a string)  and we will serialize that and save it to the server. When the client wants to load their project, we will grab the html, and parse it back into Canvases. How this will work? I have no idea. But here's hoping for the best.......



[EDIT]
I attempted to force a smartGWT canvas to be serializable using this class:

public class CanvasSerializable extends Canvas implements IsSerializable, Serializable {

private static final long serialVersionUID = 5670628250770755450L;

}

but that only gave me a more different error:

Mid-Semester Revised Timeline

Here is a link to the revised timeline. What this timeline displays is what we will be accomplishing in the coming weeks and the dates by which they will be completed.

Check it out :)

https://docs.google.com/document/d/1naMabB96ZYYCj7rPVTiSfn_q6kR3QVJMfAn8K-D1PI4/edit

Tutorial/FAQ for our site

Welcome to WebCreate.com. Thank you for trying our product, and we hope that you are finding everything you need to make your website your own. In the event that you are new to website creation and how to use tools like these, hopefully this tutorial will be everything you need to get started creating your own website.

Step 1. Create a new project.

This phase is crucial because it is here that you begin your quest for ultimate website

creation. When you first log in you will be prompted to either choose an existing project or start a new project.

Step 2. A new beginning

When you first bring up the editor you will notice a few things at a glance. To your left you

will see the main toolbar for your project. Here all your editing tools are conveniently located for easy access and instant creation. We will break down each of these tools individually later in the tutorial.

As we continue on, in the middle of the page you will see your site creation canvas. This is where you will be placing all the elements that will eventually populate your website. You will notice three tabs at the top of the screen. The first is the master template tab. This tab like all others contains a header, body, and footer, but what is different about this one is that when edited, you will notice that the styles objects and items that you add into this pane will populate across all other created panes. This is important because it is here that you set up your main style the site. But the caveat is that this page will not overwrite any other changes made to subsequently created pages, and the styles added here may only be edited from this page.

Next you will see the the index tab, this is a re-nameable tab is the homepage for

your website, this will be the first thing that customers and visitors will see when navigating to your website, so it is crucial to make this page pop out and make people want to come back here.

Continuing on, we see the New Tab option, here once clicked you will be prompted to enter a page name, this name translates to the name of the page within your site you will be navigating to.

Looking towards the middle of the screen you will see that the pane is divided up into three sections, these sections are denoted as the header the body, and the footer, each of these sections bounds whatever elements that are added into them to that individual pane. thereby splitting your page up into three separate parts, each of these panes can be re sized and modified to fit your individual needs

Finally, on the right side of the page, you will see the properties panel, this panel allows you to modify any of the objects that you have placed into your website, from color to opacity, to positioning, this is the one-stop-shop for all your modification needs.

Step 3. A list of commands

As you begin to use this tool, you may or may not know about all the different options for editing objects within your development environment. Here you will learn all about how modify the objects that you have placed into each canvas.

Top Tab Set( the tabs that denote the various pages in your website)
Master template tab
click: selects tab
Created tab
click: selects tab
right-click: edits tab name
hover, click the x, allows for tab to be deleted( Cannot be undone)
add tab:
click: creates a new tab

Text Editor

click: selects editor, once selected you can move and re-size the editor

right click: edits text

Divs
click: selects div, once selected you can move and re-size the div

Images

click: selects image, once selected you can move and re-size the image

Menu Bar

click:selects the menu bar, once selected you can move the bar

(currently sub menu’s are not supported by this tool)

Forms (advanced tool)

once you bring down the list of items to be added to the form, you drag from the

menu, into the list of form elements to add an element to the form. Once this is

done you will be prompted to give a title to the form item.

the major thing about this tool is that we DO NOT provide the PHP/Perl code to take the information added into these forms and place it anywhere, we leave that up to the discretion of the user to hire someone to write this code for them.

Step 4. Putting it all together

Now that you have information on all the pieces of the puzzle required for ultimate website creation prowess, the next step is to take all the information here and apply it to creating your first website. We suggest that you begin your journey by taking the following steps:

First: Decide what the “theme” of your website is going to be, what color scheme are you

going to use, what is your target audience, and so on.  

Second: Map out all the pages you are going to require for this site: Ex. Home, Contact, Blog, Photos, etc.

Third: Create your master template. This is important because the feel that you create here will translate to all of your other pages. It is important to add the menu bar here and any Text that you want to translate onto every other page, common places for this kind of text are in the footer and header.

Fourth: Begin adding content and customizing the individual pages. In this step you will be adding images, text, forms, and other miscellany that will be constrained only to individual pages.

Fifth: Publish your page! Take the code that was generated and add into the public_html folder that is provided to you by your web-hosting company and Voila! You have created your very own website in just 5 simple steps.  

It's been a while

So,
     As you might have noticed, it's been a while since I have posted on here, the reason being that over spring break I was more fixated with adding content to the program than posting here. Though it probably would have been good if I had been posting here all week about my accomplishments because as it stands, I will be forced not to be sketchy and post multpile times for different additions/ work done but instead make one post detailing what I accomplished over break.

First things first, I wrote the main webpage!!! whoooo... it is pretty cool actually, I wrote the whole thing in GWT and the way it works is you have css styles you can write and set those in as styles to a GWT canvas, once that is done everything inside that canvas adheres to those styles. nifty right? from there I just went to town making things as pretty as possible, One of my biggest trials was trying to get rounded borders working. This is trivial using CSS3, but thinking that IE does not yet support this, I tried my hardest ( to no avail) to stay away from using these styles. So I actually wrote some classes in Java ( that will probably be thrown away) that draw shapes with rounded borders. But when i figured out that the CSS styles work, I eventually just used those.

      Moving on from there I wrote the menu picker and the corresponding Navigational menu styles to go with each menu. Essentially this functionality allows users to add Navigational menus to their website that will be used to jump from one page to another. I was working on a way to allow users to set the styles of the menu by themselves, but in the end what I decided was that the users who would employ this kind of feature arent the users I am marketing to. Therefore I opted for a set menu picker that sets the styles for you and all you need to do is choose a color scheme.

    From there I wrote ( what I though Professor Ackley wanted) the FAQ section. This outlines how to use each one of the tools that the user has access to, and how to use them, as well as a 5 step process to making their own webpage. I will be posting this document here shortly.

     After all this was doen, I turned my attention to taking the features that I had previously written ( form creation, text editor and menu picker, and making them all MVC'd so that they could be undone and work well with Theo's selection Marquee stuff.


    After that, I worked on fixing bugs and other such funzies. And that pretty much sums up all of my spring break.

    Peace.

Progress and plans

Well, the program is progressing well today I created the actual web-interface that people will see when they go to our site, if you wanna see a screenshot of it, here it is :)












Its a little sketch, but its a start, and it has been interesting learning to make actual webpages in GWT. I never thought I would be writing Java that compiles down to JavaScript and then renders HTML along with it. It's odd, but I like it. One of the things That I have found most interesting is that, like in my previous post, I found that GWT doesn't do multiple pages, it does single pages with canvas' that are drawn and destroyed based on what you want to display. This makes everything interesting because essentially it is more like an "application" than a webpage. But again, I like it. My group members are all really shaping up as well, Ian is doing a lot of great work on compiling GWT canvas' into individual HTML pages, Theo has been doing a fantastic job making sure that we dont have spaghetti code, but that our code is coherent and working all MVC style (for those of you who dont know MVC stands for Model, View, Controller. It is a programming concept that is meant to make sure that each piece of code has one thing that it does, and that everything is where it is supposed to be. For more information, visit wikipedia mvc) John is doing his best, and is currently working on adding more functionality to the currently created tools. Alex continues to do more to the server to make it more robust and make it more what we need. So this spring break will hopefully provide ample time for coding and making this the best project it can be.

here's hoping.

Entry Points and GWT

Well, As is the case with any programming assignment, you always run into fun problems that weren't foreseen at the get-go, my newest learning/development issue concerns GWT's methodology of having one Webpage essentially and then having one entry point that "opens each webpage individually" within the same page. This makes me nervous... 1. because it was unexpected, and 2. because I don't really get how to do this yet... but here goes nothing, I will update this post as necessary as I figure this stuff out. If there is anyone reading this who has some good information on how to do it, feel free to share!

Thanks!