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

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.

All class assignments are in right column of my blog

Top of the row.

If you select the tag "homework" there are blogged details for the assignments.

Class 06 assignment - PHP Ecomm Product Page

Class 06 Assignment Files:

• PHP
• CSS
• Javascript

Accomplished:

• Took my concept from this page
  
• In class completion of the PHP
• Applied imagery and content replacing all dummy placeholders.
  
• Created banners for all slots.
• Fixed the flickering per Amos' solution (thanks!)
• Fixed the CSS so it all works in IE7 and Firefox and updated the CSS to work with the new thumbnail dimensions.
  

For the next iteration:

• Info divs need a bit of usability and design work
• For that matter the whole thing could use a bit more design work... if I'm to compare myself ;-)
  

Overall I'm pleased with the result. I know there is a lot of practice still and I need to keep my feet wet through out the week to stay sharp for the next class... and pop quiz!

Introducing Aviary Tools (like PS & AI but online)

Possible solution instead of buying the Adobe applications.

"Edit images, create mind-blowing effects, design logos, find colors, collaborate and more. All you need is a web browser. Try it now completely free!"

I just found out about this Aviary Tools in a newsletter. It seems too good to be true for those that don't have Photoshop or Adobe Illustrator. There is a free version but I see on the pricing page that they put a watermark on free creations. Two other yearly paid versions.

Billing / Shipping Form - V1

I've completed (finally) my first javascript assignment viewable here.

On that page you can read what I did in detail.

I referenced for this version:

• Javascript String Object Reference - W3Schools & javascriptkit.com - to learn how to style an error message with javascript
• Jonathan Rodriguez's code
  

I didn't just copy and paste but rather I made a lot of little mistakes writing along the way and sometimes I got some funny results instead of just errors. I'm still having a bit of trouble even though this looks successful. I tried some of the "Ideas for Javascript Practice" ideas you will see listed on my homework page but just couldn't make any of those work using the references I found. If you have any suggestions as to what you would do, I would appreciate that. I suppose I need to go back to do some reading as well.

So this week I plan to still:

• Style my PHP ecomm product page with a fish aquarium store vibe.
  
• Try a couple more versions of the form with javascript and php.
  

HTML/XHTML Character Entities

When you want that special character like a ♥ or ¶, you need to go to the reference list... at least I would.

• For a while I was using this link as my quick reference for character entities.
• This morning though I saw Smashing Magazine had sent a tweet on their twitter to another reference of character entities.
  

I'm blogging about this because the list links are an essential reference. As well, I've been following Smashing Magazine and in that a short while they have exposed me to some resources that made a recent design job very easy. There are some awesome tutorials on the site as well for the programmer side in us. Plus if you follow them on Twitter, you get some extra tidbits (like just a link to something) I don't believe they post about when you follow them on Twitter.

How was that for a pitch? Have a great week.
db

PHP links

In class we learned of

• PHP.net for the official site of PHP.
• tizag.com for a PHP tutorial (http://www.tizag.com/phpT/)

As well, the following two links are php portals of sorts with many categories... resource and reference.

• Top of the Google search result is php.resourceindex.com. I just looked around and for example found some quick answers to code and how to write the functions. Doesn't seem to be any "spam" in this collection of links.
  
• I somehow came across www.hotscripts.com/PHP Warning: there is a lot of junk to filter through. Perhaps there is something good in the Scripts and Programs section.

A JavaScript library to make MSIE behave like a standards-compliant browser.

http://code.google.com/p/ie7-js/

Pretty interesting Javascript library. I haven't tested this yet myself but if it does what it says, I think this library could save some development time.

"IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6."

Questions:

• With all the javascript libraries we are being introduced to, how many is to many to link to in the header? How will they work together and how much will it slow the load of pages?

Class 05 assignment - 03 - Like OMG! It's Working!!!

First I owe my thanks to Sharron. Her procedure was a lot like mine and reorganizing my code to reflect hers was the answer for me.

My solution was a branch off of the previous post's links which I dearly want to know what I was doing wrong with.

Class 05 Files: (new)

• HTML
• CSS
• JS

Coding Observations:

• There is an annoying flickering going on. I'm out of time to figure that out but maybe I'll figure it by looking at a previous post I saw.
  
• I still can read better than I can write and I'm having a hard time understanding how some variables are associated with different functions... but somehow I know they are.
  
• I see how programmers have a personal style to coding with all the different ways we each solved this problem.
• I'm at the belief now that defining vars is the key. Where each step in a function is achieved by taking the result of one function and defining a new var to perform yet another function. Probably not making sense here but I see the steps in the code but am still challenge when conceiving on my own.
• I believe I need to read read read and do small tests if I'm to really to code javascript on my own. Not sure that will be achieved in this class but this class is certainly helping me get there.

OK. off to get ready to VJ a Bollywood Disco event all night... learning PHP tomorrow!... not helping my chances with PHP am I? ;-)

Class 05 assignment - 02 - progress but no success

Class Assignment 05 Files:

• HTML
  
• CSS
• JS
  

About the layout:

• This time I noticed my br class="clear" were creating space. Not sure if that was the case previously but this time I just added margin and padding 0 to solve it.
• Top navigation I made close to the wireframe mockup where it spreads out over the width of the container. I only found this to be achieved with exact pixel knowledge. Percentages didn't work but maybe they could somehow.
  
• The layout looks the same in Firefox and IE7. IE6 needs a little work.
  

About the Javascript:

• I just can't seem to figure out how to relate the positioning. Maybe I'm doing it correctly and the issue is in my CSS. I really can't figure it out by noticing the results I get.
• There are a few people I have followed and I like how each person did it differently. At least I know there isn't one set way. I think I know what I'm looking at but don't seem to be able to translate that to my method.
  
• I've spent about 15hrs on this project! I have a few more hours to figure it out today.
  
• I'm very frustrated and have a bunch of doubt at the moment.
  

server down?

It's just after 1PM and my connection to onepotcooking just froze up. Anyone else having that issue?

The Kitchen Sink of Design Stencils - Yahoo! Dev

If you ever wondered about the group which develops web ad unit standards, check out IAB.

The other week Amos posted a link to standard ad banner sizes and I'd like to elaborate on that and let you know about Yahoo!'s Design Pattern Library (part of the Developer Network) regarding the Stencil Kit. This free download has the kitchen sink of design elements that could be used as placeholders while mocking.

Plenty more resources in the Design Pattern Library. For example, this is their problem/solution for breadcrumbs

Class 05 assignment - 01 - Still working on code first

I've only messed with the programming earlier this week, with little success. My first tests reside here. You'll see there that the divs appear and disappear but not in the correct location and there is flickering like I saw in JoelL's progress.

I to am very confused right now but I know I'm not alone and am hopeful I'll be able to do more than read javascript. Need to practice. One thing I find hard about javascript is that I don't know what I'm doing wrong when something doesn't work the way I want it to. I can't see what I'm doing wrong. I'm realizing how much of a visual person I am and when I see something goes wrong in XHTML or CSS it's easy for me to fix it. Each week there is a little clarity but I really have to dig in to the treanches and figure this out. I really want to get over the curve and start to cruise.

I see that Janet and Jack P are doing well if anyone needs a reference. I'm sure there are more of you too of which I will be digging through your work soon.

Time to code!

I'm a little dizzy

Q: Who took a break when they read the line, "Do You Remember Algebra from School?"

My first pass through the basic Javascript tutorials was a bit like the spinning teacup ride. At moments I had bits of clarity but then as I kept reading and practicing it all came to have the same blur. This will definitely take some practice to get under control.

Although one thing I'm grateful for from the reading, is being able to read the javascript with more certainty/clarity.

I can taste the form validation excersise now... or is that cotton candy?

----
On another note, I went crazy with the design on my homework. Check out previous post for links to XHTML and CSS. I commented my CSS a lot if you use it for reference.

Firefox: Image Optimization

smushit.com

"Performance just got a little bit easier. Optimizing images by hand is time consuming and painful. Smush it does it for you."

I'm new to this add-on but for one that doesn't have Photoshop I think it's a great idea.

Building Web DIrectory : 2 : Almost Done

The image shows where I stand as I write this post.

As posted before, view the build or the css for this homework assignment.

OBSERVATIONS
The screen shot may not look much different than my last progress report but holy cow have I been messing around with the css. I had wished I saved versions along the way because I had come to a point that produced some very weird behaviors and had to try to figure out what I did wrong. Whatever I have now is it. I will update a little more of the information but at this point I believe I've fulfilled Amos' requirements and I still have javascript to read about.



Some things I tried:

• Top navigation where it says "login" is a div inside of the container but shows outside of the container. This was achieved by top:-15px; position: relative;. But I had to give it a height less than the content to keep the H1 header "NYU Web..." in place. Not sure if this is a good practice.
  
• The sun logo has a rollover transparency. There were some weird issues with this in PC and it drove me nuts one night trying to figure it out. Never did. For PC, the navigation may dissapear when you rollover the sun. Weird.
• The top H1 header has a semi-transparent .png file for a background. This doesn't work in IE 6.
  
• In Firefox the form input has a background color when you select it. This doesn't work in IE
• The middle navigation is over the photo but that div is outside of the header div. I achieved this also with a negative and relative css value but the resulting space under the photo is where the menu should be. I could give the menu div a height less than the content but that would result in the bottom border moving.
  
• I really studied the list properties and behaviors in depth. I previously posted some observations.
• I don't really see the need to do any CSS like this #container > div > h1 BUT since it was a requirement it got me thinking and messing around. I found this on the web related to selectors but it's a little over my head at the moment because it is related to the DOM. I wish I could have that kind of CSS control just in the css file. Can I?
  
• If you're still reading I'm surprised :-)
  
• I would've like to have all the columns with the same background but don't want to use the height property and no other idea is coming to me.

I think that is it but may have more notes in class.

CSS Shorthand

CSS short hand is an art and some people are diehard about it. Me, I'm glad to remember what I can.

In surfing around today I found this post: 10 CSS shorthand techniques you’ll use everyday

It's an easy to read breakdown of pretty common uses. I was pleasantly surprised to know most of these and to learn about the "*" selector.

No Photoshop... No Problem

Check out GIMP for photo manipulation!

Get rid of the dotted outline in Firefox

I paid very little attention to the dotted outline you see in Firefox when one clicks on a link until a design centric client asked me to get rid of it. At first I thought he was crazy but then I came to find it was only a matter of CSS... very easy.

As you can find out, there are many variations of CSS to accomplish getting rid of the dotted outline. This page on sonspring.com describes in detail the reasons to do one or the other. You can even make it a permanent change for all web sites you visit by changing the Firefox application's base CSS file.

So the quick and dirty follows and explains my favorite method... add it to your CSS file!

"If you want to retain the dotted border for tab-based navigation, apply this to a:active. This still allows the indicator to appear when focused by keyboard, but hides when mouse activated. It’s the best of both worlds…"

a:active
{
outline: none;
}

Building Web DIrectory : 1 : My Progress

The image shows where I stand as I write this post.

As posted before, view the build or the css for this homework assignment.

What I would like to do yet:

• Top access menu for login (not in wireframe). Try an in line list with position:absolute or fixed
• Home Page with login info (last idea to implement)
• Student Page with my info (in my view the homework is for a student page)
• Main menu design with tab top left corner. If I'm feeling really ambitious test out an image navigation the way I found on Ikea's web site.
  
• Figure out how to get the backgrounds of the shortest info columns to be as long as the longest info column for each row.
  
• Finish filling in the information.
• Style the main content.

Some Observations

The top nav list is almost exactly the same for IE7 and Firefox (it may look the same to you but there are a few pixels difference). In achieving this I'm afraid I've written some congested css code.

• For one, the visibility:auto property for the header div has to be there for the navigation not to disappear when the sun image (logo div) is rolled over. What? I know, that is what I feel right now. If this was for a client I'd figure out why but for now I'm happy it just looks decent for those two browsers.
• Maybe I'll rewrite the top navigation to be at the root div level and then position it absolute to the container div. Would that place it in the exact same place in all browsers or will I need to find a way to do position:fixed? I have to admit I'm getting a little too focused on the navigation placement.
  

In my web research for lists, I was surprised to realize the solutions I have been copying in the past don't even use the inline value but rather float li tags to the left to get the horizontal menu. I suspect this is so because each browser has a different rendition of the basic list as I pointed out a previous post about list observations and we saw in class. Maybe I'll post some links about lists if anyone actually reads this and is interested.

Last but not least I'm finding this a great way to procrastinate from the work I should be doing ;-)

White Space Visible for Inline List

I'm very curious if anyone is noticing this behavior.

• View the HTML/CSS test for yourself (all in one file)

I am noticing the following for inline lists. I've taken screen shots of my observations which follow.

• Red backgrounds are the a tag
• Yellow backgrounds are the li tag
• In Firefox the li only spans the same space as the a tag
• In IE the li spans beyond the a tag (visible where the yellow is)
• I tried putting padding:0 & margin:0 properties on every part of the list to get rid of the space between the a tags in Firefox and to get rid of the yellow li space in IE. No luck.
• The only way that I seemed to be able to get rid of the space between the list entries was to code it with no white-space. I even tried the property white-space:nowrap... no luck.
• I have never seen this before and am wondering if the strange behavior is because of some preference in my application set-ups. Does white space really matter in XHTML?
  

PC Firefox Screenshot

PC IE Screenshot


HTML/CSS Code (click to enlarge and notice the two ways the UL list was written)

Does anyone see an error in my css?

Class 03 - in class assignment & homework

Assignment link to Amos' wireframe

HOMEWORK

• Finish building the wireframe for next week's class including imagery (design).
• Read W3School Javascript tutorials
• Be ready for a quiz
  

To view my build visit these links:

• The XHTML
  
• The CSS
  

In Class 3 Notes

I'm only noting elements taught in class that are new to me.

remember syntax

selector {property: value}
attribute names
attribute values

CSS
selector > can be used in css before a property to apply a value to just the first child. I have not seen this in any css file I've ever viewed on the web. Is it shorthand?

FORMS
method GET data is visible in the URL (public)
method POST data is not visible in the URL (private(ish))

The form input needs an id for the label to work properly

Remember to close input tags ... /> even though I can't seem to get that to validate it's proper.

FORMS CSS
input[type='text'] {} <-- this selector will only apply to input tags of type text.

Building Pet Store : 3 : Links & Observations

Pet Shop Links

• Wireframe (My build is a little different from my wireframe)
• Build XHTML
  
• Build CSS
  

Observations

• I coded this in two main columns. In doing this if I want any boxes in the right column to line up with the top of certain boxes in the main content column I will need to use heights. It's really only pertinent for the top two rows.
• In my old ways I need to remember to use the
  after floating the divs. This way my container will show properly in all browsers.
• Unless I'm using background colors or borders to define the main structural divs for design reasons, I've decided to stay away from padding and margin. Just a personal preference. I'll add padding and margin for the nested divs if the design allows.
  

Building Pet Store : 2 : Observatons of Coding

I solved my problem with the background container grid not truly wrapping all the internal divs by removing the float:left class on the footer.

Note about the footer float:
If I would have remembered about it, placing a br with
a class of clear:both after the footer div would have solved my issue.

Has anyone tried to validate their pet shop builds?
I can't get past the validator telling me it doesn't recognize the strict XHTML doctype. So I make it the strict HTML doctype and it still doesn't recognize it.

I'm missing something I'm sure. Anyone have any notes?

Screen Grab in Firefox on Mac

In class we installed the Firefox add-on Fireshot for grabbing screen shots. When I got home I realized that add-on only works for Firefox on PC. I found and have used this week a similar add-on for Mac called Screengrab!

I really like Screengrab! because you can Save or just Copy with a couple simple clicks, starting on the icon in the bottom status bar. Save as JPEG or PNG in the preferences.

I have updated my previous blog post about Firefox add-ons I use as well.

Building Pet Store : 1 : Observatons of Coding

On my one pot cooking spot I've started to build my pet store wire frame. I'm building something a little different than what I first posted from PowerPoint. I don't have the new sketch scanned but you can see here the screen shot of the div ids with some place holding content.

Following are a few observations I've noticed while coding and in time want to figure why I these behaviors are happening.

Background Colors:
Only in IE6 & IE7 does the container background show for the whole area. It doesn't show in Safari or Firefox for either PC or Mac in areas where there is not content. I think the floats have something to do with this. Need to figure it out.

Margins:
I know bottom margin is showing in some browsers and not in others. Need to figure this out because I believe there are issues in IE for combinations of padding and margin if both used in one block style.

Oh it's been a long time since I built a framework but I'm enjoying the challenge. Usually I would be grabbing all this base XHTML and CSS from framework resources on the web to save time in the development stage and to give me more time in the design stage.

More Observations to come.
Feedback welcome.

Testing in Browsers + Mutiple IEs on your PC

While building our Pet Store wire frames into real web sites I thought to mention how I test on multiple browers. If you haven't experienced it yet you will soon find out that there are some frustrating differences between all the browsers and how they render your XHTML and CSS.

I personally have bitten the Mac apple and therefor don't have much to do with the PC world until it's time to test. So how do I test all the main browsers during development?

Set-up for PC

Q: How to have multiple IEs on one computer?
A: As far as I know you can't have more than one IE installation on the default set-up of a PC. I have found a solution around this at this article on tredosoft.com which explains the multiple IE installation available at the bottom of page. I had no issues following the installation.

Set-up for Mac

If you have a newer Intel Mac you are in luck. Well, you still need to buy Windows but at least you don't have to buy a whole new computer set-up. If you have an older Mac computer you can get Virtual PC but the software isn't supported by Microsoft anymore.

My computer: MacBook Pro (Intel)
Windows Installation: Windows XP Home Edition
Additional Mac software: Parallels (to run Mac OS and Windows concurrently)

Then install the multiple IE installer to get all the stand alone versions you would like to test for.

Now that you have the hardware

Q: What browsers to test on?
A: Looking at the browser stats on W3 you see you should test for IE7 and IE6. IE5 is still out there but the stats for use are dropping fast so I'm personally not testing for that browser. Then the obvious is Firefox with high numbers. After that I test for Safari which ships with Mac computers. You may have thought there was an IE for the Mac but that browser is no longer supported by Microsoft. In short that browser list is:

• IE7 PC
• IE6 PC
• Firefox PC & Mac
• Safari PC & Mac
  

Questions I still have about testing. Perhaps you know the following.

• Does the PC version of Safari render like the MAC version?
• Any good on-line testing web sites and how much do they cost?
• What other solutions are there for MAC people to run PC?

Remember you are a student right now and can get some great discounts on computer software. If you are going to be developing for the web I would get what you will need in the near future now.

feedback welcome

Class 02: In Class Assignment 01

In class assignment to copy the PowerPoint layout of Amos'.

Please View at OnePotCooking

Wireframe: My Pet Shop

In class assignment: Create a wireframe of information architecture for a pet store

Firefox Web Dev Plugins I Use

I use Firefox as a regular web dev tool. The following list of plugins I've found helpful in design and coding.

You can find these plugins at Firefox Add-ons

• Web Developer - Adds a menu and a toolbar with various web developer tools. Very powerful.
  
• Firebug - Equally as powerful, with firebug you can edit, debug, and monitor CSS, HTML, and JavaScript live
• MeasureIt - Take the guessing work out of coding widths with this on screen ruler.
  
• ColorZilla - Get that RGB or Hex numbers you need with this screen color picker.
• Palette Grabberr - Creates a color palette for Photoshop, Paint Shop Pro, GIMP, Flash, Fireworks, Paint.NET, or OS X based on the current page. (I don't have much experience with this add-on but it seems great)
• Clear Cache Button - fast way to clear cache in Firefox
  
• Cooliris - works with Google images and Flickr and makes looking for photos a snap
  
• Session Manager - Can use this to save sessions of tabs per client
• ScreenGrab - Copy or save the whole page or just what is visible or just what you choice and in more than one file format. Easy to use and quickly accessible.
  
• Fireshot - (PC only) Screen shot taker and control of file created
  

I'm new to these three possibly very helpful Firefox plugins for web development. These three relate to easily seeing the code structure with a right click on the page. Very useful in seeing what's under the hood.

• Aardvark - Utility for selecting elements and doing various actions on them. It can be used for web development but has other applications.
  
• X-Ray - See the tags on a page without viewing the source code.
• Professor X - See inside a page's head without viewing the sourcecode...

Search of other plugins on Firefox Add-ons in the Web Development section.

(Please comment and/or suggest your own preferences)

First step

The journey starts with the first step.