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

Final Project : The Client

Drum roll please ...

I'm going to kill two birds with one stone here and my final project will also be the next paying job I have lined up.

http://kasthomes.com/ - A real estate development company

I've done some preliminary meetings with the client and will hash through those notes and create:

• site maps
• wire frames
• process flows
• user paths
• functionality charts

My issue in the past has been to plan too much. I'm not going to worry about the smallest details too much because frankly I can't perceive them all till I get dirty and the client isn't being too informative. I image we will both define the specific as the process moves along.

There will be communication with my client throughout this process as well. I'll do my best to share the complete process with you all. Hope you have some comments and suggestions of what I share.

db

FInal Project : Site Structure Full Overview

I've had this idea for some time now as I have a lot of friends and small clients that could fit into this structure in one form or another. I think it would be awesome if I could build a structure for most of the possibilities and pick and choose the blocks I develop for a final project be it for an individual or small company.

I've have used Wordpress for this stuff and it is a powerful tool. With tools like that I wonder why try to do this from scratch myself but all in all it would be a great start to a product I may later turn into a Wordpress theme.

No matter what version of this site structure I come up with in the end for my final project, this was a needed step in the process.

Next:

• I'm going to take this and define all the possibilities for each kind of page template with a specific client in mind for each pass. Fashion Stylist, Painter, Web Designer, Advertising Agency, Property Developers, Real Estate Agents...
  
• Once I define 3 or 4 types of portfolios I'll wireframe the one that works for the final project.
  
• In the end I need to decide if this is for an individual or small company and what kinds of bells and whistles I can do by the deadline.
  

MySQL Reading : Notes

I just completed the MySQL Tutorial and these are some notes related to the reading.

For the first half of the tutorial I followed along by creating a database and different tables on my own server. We did most of this in class but it was helpful to do it again and sometimes with a different method... like creating a table from using PHP and the "CREATE TABLE" MySQL query function.

The tutorial doesn't mention anything about Foreign Keys or even Primary Keys for that matter. The only mention of two table relating to each other was through Join or Left Join. The tutorial admitted you probably wouldn't understand join from the super simple example. In some other reading I'm realizing Foreign Keys for MySQL have to be assigned by command line as there is no graphic interface for this. I've only worked on this weeks homework assignment for a few hours and I'm having a big issue with table relation.

In practice I brushed up on my formatting of the result and syntax of PHP but I still get a lot of totally blank pages with no errors. Very frustrating. I'm guessing that is due to poor syntax. Debugging methods aren't helping either. Lot to learn still.

I found SQL Injection mysql_real_escape_string() interesting in part because this process of protection is used when running a query for results. In short used when getting data and it kept bugging me that this isn't used when inserting data to the table. Actually I think I'm mixing up the PHP process for sanitizing the user input and the SQL process for making sure nothing malicious is run on the database. Does SQL even have protection on INSERT?

Well, on to defining my final project and getting that blog to work correctly.

Lightbox & Similar Apps for viewing media

Hey there,
(The following use the javascript libraries of Prototype and Scriptaculous we've talked about in class.)

In the last class I noticed a few of us implemented the Lightbox 2.0 Image Viewer on the image gallery. This post relates to the same effect as Lightbox for viewing images... and more!

1) From Lightbox, Jonathan Chirstopher at Suckerfish developed the Suckerfish Hoverbox Redux. I'm not sure if I would really use this myself but wanted to show you yet another derivative of a simple idea that really took off.

2) An alternative to Lightbox is Lightview. Which does single images and galleries like Lightbox but also it does Quicktime, Ajax Form, Ajax Post, iframe, inline content and SWF (Flash)

"Lightview was built to change the way you overlay content on a website.

• Clean: Designed to compliment your content.
• Fast: Smart image preloading.
• Easy: Customizable without having to know CSS.
• Rounded: Adjustable rounded corners, no PNG images required.
• Smart: Content resizes to always fit on your screen.
• Slideshow: One button slideshow.
• Works on all modern browsers. "
  

Good luck with all the homework this week!

Class 07 assignment -5 - Well...

http://onepotcooking.com/davidbone/class07/3/

I updated the above

• I added the Lightbox2 functionality to the gallery page. Click on an image and you'll see what it does... well, after the page loads.
  
• In implementing the lightbox I only wanted to update one page so coded the header into a more template friendly fashion and added a footer for each page. Also coded a dynamic class for each page which would be very helpful in the CSS if needed.
  

I asked some friends to waste some time in the office and test it and sadly I realize this only works in Firefox. Well the uploader doesn't work in IE and I'm not sure why yet.

UPDATE:
I was able to get the uploader to work by putting back in a file type I didn't think was supposed to be there and that is "image/pjpeg"

Class 07 assignment - 4 - It's all workin'

There is always more to do... but for now I'm happy. Especially happy to be finished after yesterday I completed the project then promptly proceeded to delete all of my work. That's right I pulled a Homer and had to go back a days work! You would think I could have just whipped up the code again after completing it once but no I still didn't quite understand. I think I do now :o)

For you to test (please) onepotcooking.com/davidbone/class07/3/

My toDo list since last post:

• Get the home page working with gallery
• Limit the view to last 50 (thanks JackP, who also alerted me to array_reverse)
• Design the layout + figure out thumbnails
• Work on security which is non-existent at the moment.
• Test the limit on file size upload. I don't believe it is working. I was able to restrict the size of file and type of file
• Template the error messages onto one location like I saw Jonathan do... good idea.
• + Figure out true thumbnails. Creating and saving on the fly.

Assignment 07 Notes:

page_login.php

• Checks to see if you have a cookie that has you logged in. This cookie expires in 24hrs.
• Post form for entering in username and password.
  
• On form submit with values: reads the data txt file for username and password and if matched then sends user on to gallery page. If no match then there is an error message. Also sets two cookies. One for loggedin and one with the username.
  
• On form submit with no values: error message
  

page_newmember.php

• Checks to see if you have a cookie that has you logged in. If so, on to gallery page.
  
• Post form for entering in new usernames and passwords.
• On form submit with values: writes entries to a txt file in a comma delimited fashion. (no security on this yet). On success of writing to file, send user back to login page w/ message.
  
• There are other error messages (alerts) related to txt file but most likely will never be called unless there is an error on the server.
  
• On form submit with no values: error message

page_home.php

• Checks to see if you don't have the needed cookie. Send user to login if failed.
  
• Personal message to user from username cookie.
  
• Gallery of images. Showing only latest 50. Showing last entry first.
• Thumbnail size controlled by CSS.
• All images link to the full size.
• Alert message when successfully uploaded an image
  

page_uploader.php

• Checks to see if you don't have the needed cookie. Send user to login if failed.
• Post form data entry. Writes the file path, caption, username and date to a txt file for gallery page to read.
• File upload field is limiting file size to 2M by a hidden form field and php. The php also restricts file type to gif, jpeg, jpg or png. (The method from Amos, restricting the file size, didn't work for me)
  
• Only the image is required.
  

Coding Observations:
I feel like I'm in the Matrix movie where all those lines of "code" are on the screen and to the learned eye, you can visualize what's going on. Still at low resolution though.

File management was a desire for me with folders for includes, functions, style... Because of this I came across path issues. When a function writes to a file it would have a different path than the other function that would read.

Testing is where it's at! Many examples of me learning through testing but the last run through revealed I forgot to check for empty form fields when entering the site. This resulted in one of my cookies being set and letting the user in but it didn't set the second one. Because this second one wasn't 'on' I saw behavior from my code that I didn't realize was there.

I learned a ton, especially since I did just about everything repeatedly. I still see myself looking for answers out on the web but now it's more for reference than for stealing.

Syntax is still an issue for me... that is where practice comes in.

Caption Design - Smashing Magazing Article

image-caption-design-simply-elegant-or-boldly-graphic

Class 07 assignment - 3 - Did I say, "Almost Done?"

Moving along but like the Tortoise.

Working files at this point are here onepotcooking.com/davidbone/class07/2/

Coding Observations

• I like my file management to be consistent. Because of this I had some issue with file paths and in particular the image path for this project. I was looking for a way to set a base directory for the whole project and have all links start from that point. I didn't figure that out but I did break out the paths in the variable definitions because there was a different path for moving the image file compared to writing the image file's path to be read later from a file at a different folder level.
  
• Arrays are huge and very important in the loop. I need to understand these better as I needed to look at other's code to get it... thanks again Jonathan.
  

My toDo list since last post:

• Get the home page working with gallery
• Limit the view to last 50
• Design the layout + figure out thumbnails
  
• Work on security which is non-existent at the moment.
• Test the limit on file size upload. I don't believe it is working.
• Template the error messages onto one location like I saw Jonathan do... good idea.

I'm doomed - HA!

Class 07 assignment - 2 - Almost Done

onepotcooking.com/davidbone/class07/

I have the home page gallery listing left to code. All else is working pretty good but wouldn't use it on a live site.

Would like to do still:

• Get the home page working with gallery
  
• Limit the view to last 50
• Design the layout
• Work on security which is non-existent at the moment.
• Test the limit on file size upload. I don't believe it is working.
• Template the error messages onto one location like I saw Jonathan do... good idea.

Hope I can get this completed tonight... I've got real work to do ;-)

Where to code : Appending the upload content

I could use a suggestion:
I'm to the stage where I'm trying to get my image path, username and caption to write to a txt file. I'm able to print those variables to screen but not to the file. I'm more than certain it isn't a file permission thing because I created an else in the loop that would state an error but the code isn't getting to that point.

Right now my result is a blank screen and I know it is due to the highlighted code in the following image.

Is this the correct place to try to code in a fwrite?
I figured if the image file could be moved to also write to the txt file in the same move_uploaded_file function but maybe that is incorrect.

Does anyone have some incite?

File Size Converter - I need a Byte

thebyteconverter.com

I found myself needing it for assignment 7.

Class 07 assignment - 1 - Progress

I've probably put in 9 - 10 hours already. Designing the XHTML & CSS as well as learning php for this assignment.

My files are temporarily working at this location www.bonestructure.com/webdev/

So far I've created the functionality for all pages but the uploader. I have had each element working at one point but now I find some weird behavior I can't explain. When I write to the text file on the Become a Member page, it is always writing "david" as the username and writing in the correct password. This is very bazzar as I've never hard coded my name even in testing any elements. I'm at a loss and will come back to it. Not sure how well it will test for you but go for it if you so desire. I do know "david" and "bone" work for the username and password.

Still to complete

• Fix the writing to the text file.
  
• Figure out the uploader (have had tests working but my current build isn't working)
  
• Figure out the Home page (gallery of uploads) from the uploaded data. How to write to the page in a formated style and repeating. I would like to keep the uploaded images to a max width and height in the display grid.
  
• Figure out how to show only 50 of the latest elements.
• ...
  

Coding Observations

• There seem to be these two ananomous session cookies ("PHPSESSID") that I can't figure out where they are from and if they are affecting the functionality. The show even if you only hit the submit button.
  
• I've been using isset for checking if the Cookie is there and I thought unset would turn the Cookie off and delete it just like setting the Cookie again by writing over any previous values. Well I found the unset will return a false for the cookie but it won't delete it. So on that page I used unset, the Cookie would return false and I would see the desired results but if I knew a link and just jumped to it (say I jumped over the login page and pasted in the home page link) the Cookie that was floating around would still work on that page I jumped to.
• In the progression of building I came across a procedure I liked by accident. I have the "become a member" page passing a username and password, that username is used on the Home page but the home page also checks for a true Cookie which is only set on the Login page, so then the user is automatically sent to the Login page. In short, the new member will submit and then sees the login page. It happens so fast and the two pages are designed so similarly that I didn't even notice the behavior at first... I'm going to have to redesign the Become a Member page a little.
  

I have to get some Zzzz so I can vote bright and early tomorrow.
L8r - dbone

A Pumpkin for Us

http://chergaoui.com/wp-content/uploads/2008/10/jack-o-lantern-4.jpg

DOM Stylesheet Library

On my way in this morning I saw a tweet by Smashing Magazine about this site sheetup.com. Checked it when I got to class and it looks like a great resource to check out.