Final Project: Final Presentation & Contact Info

Real Estate Developer's Web Site - Kasthomes.com (not the final project link)

Purpose: To develop a web site for a property developers group on Long Island which they could manage themselves as their group's interests change... and to make money :-)

Explore:

• I performed a lot of market research related to real estate on the web, looking at solutions for developers and real estate agents. Found a few robust but out of date and unsupported solutions as well as one plug-in for WordPress. But nothing really good to speak of.
  
• Realizing there was no plug & play solution I started to brainstorm (pdf) an idea which I then decided to start as the final project.
  

Plan:

• Sitemap (pdf)- Defines the content areas for front-end and back-end needs.
  
• Wireframes (pdf)- Very detailed content boxes for all front-end and back-end pages. I built the wireframes with OmniGraffle with a Blueprint CSS framework already in mind (before actual XHTML coding). The wireframes were planned on a 24 column layout but I changed it to 16 columns when I started to write the XHTML. I changed the default download of 24-column grid to 16-columns easily with this css generator.
  
• I found such detail at this stage (in the wireframes) to be very beneficial to the actual development of XHTML and CSS. The client didn't really know what they were looking at but I didn't actually expect them to.
  

Build:

• Project development lives here onepotcooking.com/davidbone/kasthomes/ but the bulk of what I developed for the final project is the administration here onepotcooking.com/davidbone/kasthomes/administration
• Login Email: admin@admin.com Pass: admin
• If you looked at the wireframes you will see that I have a long way to go but for the purpose of this class I feel I got a great head start on a project I wouldn't have challenged myself with doing from scratch. I will finish this project along the path I've started here!

Learned: (XHTML, CSS, Javascript, PHP and MySQL)

• Practiced my XHTML and CSS. Learned a lot about the Blueprint CSS framework. Got back into hand coding too, which I had become lazy doing and was relying on applications to aid me. Will use Blueprint again.
  
• I'm also glad I took the time learn a program like OmniGraffle for the wireframes and also took the time to define the content layout in such detail. Definitely got me thinking I should wireframe any size project I do from now on since it helped my to just focus on development at the next stage. Wireframes aren't set in stone but at least you know what to expect on the first round of development.
  
• I would have liked to learn more about Javascript. Some basics were demystified but I certainly don't feel comfortable with it yet. Learned to read it better which will help in appropriating open source solutions but won't be writing it from scratch any time soon. I do realize though that my completed final project will have a lot of Javascript in the end.
  
• The PHP/MySQL part of this class was very exciting for me. I now feel comfortable in being able to build a simple dynamic site and relating the data to a database. That's a BIG step for me. Mind you I have only taken the first step in either but if there are any other classes to take, for me that class will focus on PHP & MySQL.

THANKS & KEEP IN TOUCH!
I really don't see me conversing on this blog in the future (I have two others) but please visit me at any of the following locations.

• Personal Blog nycbone.com - I started this to learn about WordPress and plan on getting back into writing at least once a week after the holidays. Probably turning it into more of a photo experience.
  
• Business Portfolio/Blog bonestructure.com - This is WordPress as well. Slapped up there to have at least a few things for clients to look at. This will be growing significantly in 2009, in content and as a project of mine to learn how to plan, design and build a WordPress theme. The goal is to launch a theme next year.
• Other links in the following signature (brought to you by Wisestamp). My daily email is nycbone [at] gmail [.] com
  

David Bone
718.809.0446
__________________________
follow me here as well:

LinkedinFacebookFlickrTwitter

Final Project : Last Stretch

Hey, what percentage of us are in front of the computers right now?!

Well I'm moving along myself with the administration section of my project. There won't be much to see on the front-end (still no content from the client) but I've finally figured out php for the back-end administration.

I imagine I'll still put in a bit of work tonight and make sure I've got all the final project requirements down and I'm ready for my 10 minute presentation.

GOOD LUCK!

Final Project : A day of Nothing

I'm off too take a break for a couple of hours after many many hours trying to populate a form from an id and I just get nothing. I'm so confused right now, PHP looks like a foreign newspaper I see on the subway.

If I could just understand that class08 blog example, maybe I would know where I'm going wrong.

FInal Project : Failure is a Success

... Like nothing is something. Right?

OK. I'll keep that in mind as I find myself continually going back to the beginning of a problem when I hit a wall. Not much success yet today unless you count the failures. Finding myself usually confused mid-way through a process I'm going to try to diagram what I need and follow that.

The curve is steep in the beginning. Not sure it's going to plane out in time for final presentation but I'm not giving up.

Once I finally accomplish a (small) goal, I look back and realize if I only knew how to visualize the code in the first place, it would have taken a fraction of the time.
For instance I really wanted alternating row colors. I had an idea for a counter similar to a previous class but it turned out to be sloppy joe code and I couldn't get the syntax correct. Realizing I'm still at the stage I need to see a similar proof, 99% of the solutions out there for html table rows weren't working for me until I found Alternating row color in HTML/CSS (with PHP)

Hope to have accomplishments to post tonight.

Final Project : Building Administration

There are a few issues with the top grey bar and there isn't content for all pages yet BUT if you want to log in use admin@admin.com:admin to get in to create your own user. I'll leave all users as you've created so you can check back if you like. Admin Section

Today was a good one.
1. Backup my latest stable version
2. Change the "office.php" files to "index.php"
3. Change the kast_agents table to kast_employees : When I changed this and the corresponding files and functions I overlooked one small variable definition on the controller and spent an hour looking for the invalid argument. Ugh! I think I got it this time... riiiight.
4. Create a kast_users table for the login I populated it with one user so I could log into the administration area but that entry didn't matter because the class10 social network login method that I was appropriating from user.class.php uses MD5 security. To get around it, I had to keep the registration viewable to unregistered people till I got one good entry into the table from the form which enters the password into the table with the same security it is looking to retrieve it with.
5. Create the login functionality from class10 social network. Successfully appropriated class10 social network login method. Eventually I split it up though so the registration is behind the login. This way only administrative users can make new memebers.
6. Added an administration section to the left navigation. Created pages for listing the administrators and registering new administrators. New administrators page is the part I broke out of the authenticate.php file so I could require loggedIn users
8. I really like the switch method so I've applied this method to the index page for at least the simple pages that just show information. You can see in the code for the left navigation that some of the links call for different action of the index file.

Next I think I'm going to try a tinyMCE page for testimonial or rentals page. By wednesday though I really need to focus on just property information which is the bulk of the front end information.

Final Project : Back on Track in the Footer

Thanks to Jack and Amos today for the assistance. It got me rolling again after being away from the lessons and in bed sick for the last week. I quickly forgot so much! We'll see how far I get this week...


I started PHP & MySQL coding with the big footer:

File to view is here http://onepotcooking.com/davidbone/kasthomes/office.php
UPDATED LINK is just http://onepotcooking.com/davidbone/kasthomes/

SHOW / HIDE Footer

• Viewable when you click on the plus sign at the bottom. Reason I implemented this was because of client's comment when I showed them the first XTML version of the wireframes. They didn't want the footer so present. I think I could have lessened it's presence with design but this may work too.
  
• Accomplished with javascript. I know I could have achieved this with a previous class example where we used javascript to change the class to show and hide but for this I found a pretty good tutorial for a simple show/hide with Prototype. I used example 5b.
  
• When you click on the image I also put an in-page link to jump to the bottom of the page so the user didn't have to scroll down once the footer expanded.
  
• Room for improvement but I'm happy with it for now. Needs design.
  

Populated Columns

• So far I have one table holding the company info and then one for employees/company owners. The company info table is one row and very simple. That information isn't even called with a loop. The employees info is called with a loop since there are four of them.
• Assistance: I would like to display in the "Currently, Kast Homes is:" section the [category] and how many [properties] are in that category in a way of [# of properties] [category]. I would appreciate any comments on how to do this, which will get me researching in the right direction.
  

PHP Mail:

• Accomplished a simple contact form for now. I tested Amos' class 07 example then applied this simple contact form. This is the bare minimum and I'm certainly not going to go live for the client with this but wanted to take the development of the contact form in baby steps.
• For official launch I'm going to build a more robust form and use this kirupa tutorial for reference or this preferred Secure & Accessible Form Script I also found these examples will help me in understanding the forms in the administration section. If anyone has found other ways of making the built in php mailer more robust, please let me know.
  

GENERAL:

• Starting to get the hang of MVC architecture but I sure don't think in this format.
• While building the XHTML part of the footer I had some hangups because of the CSS Blueprint I'm using. There were some unexpected results from the framework but I figured it out. Funny thing is the footer has it's most layout quirks in Firefox. I'll fix it once I know the exact design requirements.
• After a few layout steps I test in browsers IE 6, IE7, Safari & Firefox. Since this will be for a client in the end I need to know all aspects are moving forward together. My client is on Mac but 95% of the people using the site will be PC.
• Already, I'm having content issues. I've asked the client three times for content but nothing yet. I need to know exactly what information they would like to share about each property and I need photos. I may just have place holding content for the final presentation. This is by far one of the consistent issues I have.

GOAL for the Final Presentation:

• To work on more functionality than design.
  
• To be happy with the first version of each solution. Don't get too focused on any one part.
  
• Full control of the information in the footer from an administration section.
• Be able to enter and display properties with photos!
• Understand the Foriegn Key and how I can query different displays of the properties entered with all the criteria!
  
• Create a very simple administration page for Rentals that only uses the tinyMCE

That's a lot already but of course there is much more to do.

FInal Project : Base XHTML & CSS created

Since we started our projects in class I have created the base XHTML and CSS for the front-end.

NEEDS:

• The whole header will need a bit more definition but I have placeholders for each element.
• The horizontal scroll bars for the sections in the first row (currently showing vertical ones) will need the aid of javascript to help define the width of the container to give me the scrolling left and right I want. The javascript will need to count how many property elements are there and add up the width needed.
  

CODING NOTES

• As I did for my wireframes, I have chosen to use the CSS grid based framework Blueprint with 16 columns (download is 24 columns). This is the first time I have started a project with this framework and some very interesting plusses and minuses go with using such.
  
• Pluse: using Blueprint defined classes that have widths defined. By just putting on a class like class="span-4", the div automatically spans 4 out of 16 columns and I don't need to go into my css and define float:left and all that.
• A Minus: Adding padding to the root level divs with these classes throws the whole thing off. In the end I see why it is used for minimally designed sites. Since I have designed all my wireframes with this I will keep using it.
  
• For the top nav I went with a Suckerfish single level. This is a placeholder for now. I don't think I will use it because the li elements have a defined width and I really only want the li elements to be as wide as the copy within. Needed something to look like it was working for the client review.

NEXT

• Break up the XHTML sections for PHP and try to follow the MVC structure.
• Set up the needed tables for the footer information and start to code related PHP functions.
• Create a base XHTML & CSS framework for the bakend administration pages.
  

FInal Project : Site Map Updated & Wireframes Created

I'm ready now to review all the information with my client, make notes, possibly update the following files one last time then start coding the structure. Design will probably start somewhere in the middle of coding.

In coding, I foresee myself creating examples of each section independently and then applying it to the whole. I plan to start coding the XHTML and CSS next Monday after review with client and Amos.

SITEMAP
I've updated the site map to represent just this project for a real estate development company.

Two questions for me still exist. 1) What are the client's needs for making new pages? 2) What are the true needs for Rentals?

I talked to the client last night and he said there wasn't much of a need at all so I'm realizing Rentals on the site will be different than anything Sale related. The site map will have to be updated once Rentals if figured out.

I'm sure there will be some speed bumps along the way but I believe I have a good idea of what is needed.




WIREFRAMES... all 31 pages!

Download the full PDF

Holy cow have I been making the boxes over the past few days. I've not detailed a site like this before in wireframes. I believe the time spent here will really save time in coding.

The wire frames are based on a 960 grid which is what the Blueprint CSS uses when I start coding. The red columns are based on this 960 grid.

This image is the idea for the front page that I will be submitting to the client for review.

I am going to code a 2-level navigation but I may not use it realizing I probably don't have enough data to warrant a need for it.

The footer is a big one, which is a style these days and I thought to try it here because the client doesn't want any static pages of information just dedicated to the company. That being so, all the company info I do have on the holding site now can fit in a big footer. This will be on every page.

One issue I know I need to resolve before coding is image size. I need to make sure there are no more than 3 sizes but I'm going to try to get away with 2 dimensions where the medium size will also serve as the small size by restricting it's dimensions in css. I'm thinking about needing a php photo processor for images uploaded.

I wire framed the complete administration as well. I have a lot of questions on these pages that I need to review with my client as well as figure out how the buckets (tables) of information will relate to each other. While creating the wire frames for this section I realized how the basic examples of coding from the last few weeks will apply here... pretty cool.

THE AID OF 3RD PARTY
While I was brainstorming last week I thought to use some or none of the following for framework & functionality.

• CSS: Blueprint Grid
• PHP: Need to find some kind of image process that will take a large upload and make a medium sized image from it. Perhaps I can code it but I highly doubt it at this stage.
• Javascript: Prototype & Scriptaculous (of course), Lightview for images, Tab (1 or 2) scripts, Accordian for editing properties page, Tooltips, TinyMCE
  
• Other: Google Analytics, ShareThis
  

FInal Project : Brainstorm

Not Sure if I should be scared or not

I have been brainstorming all kinds of elements I foresee this project needing. The result was more than I expected! I see at least two phases already. Phase 1 being for the final project.

The image to the left is the brainstorming tree with branches for MySQL tables on the right and on the left Defining, Design & Coding. You can see the list of all that, downloading this PDF. I've given the list a few revisions but I'm to the point that I need to get dirty developing the project to foresee any more needs.

Next is taking my sketches and this brainstorming into wireframing the different pages.

I also need to figure out how all the possible MySQL tables will relate to each other.

I'm sure someone will ask me what program I used to brainstorm and that would be MindMap. I recently subscribed to .net magazine and the issue that came last week (about planning a website!) had a copy of the application and a registration for a regular user... just in time to test it out on this project.

CSS Typeset

Pretty cool tool: Quickly see how the type will look online and grab the CSS for the look!

csstypeset.com