Client-Side Class Assignments

Here are the links to my class assignments to date:

Class1: My Petshop Wireframe JPG
Class2: HTML Coded Wireframe
Class2: My Petshop (based on Amos' wireframe)
Class3: WEBDEV Directory Page
Class4: Shipping/Billing Form with Javascript
Class5: ECommerce Store with Javascript
Class6: Ecommerce Store - Now with PHP!
Class6: Ecommerce Store - PHP - Page 2

Some notes about the PHP: both pages of my store use the same HTML, CSS, and Javascript. I used PHP includes for nearly everything. Each of the two pages have a few PHP variables set at the top which then flow into the Pagetitle and Breadcrumb sections. I used PHP to make background image change based on the Subcategory. I was tempted to do it with Javascript, but chose PHP instead since the background doesn't really change after it is set. It seemed like the sort of thing PHP would be perfect for.

Also, I tried incorporating Amos' solution for the blinking of the info overlays, but so far no luck. I'll keep at it.

Oh yeah, I should probably cite Jon R.'s fabulous Audio Amazon page as the inspiration for my new background images and transparent center section. Mine is nowhere near as good-looking as his, but hey... imitation is the sincerest form of flattery.

Javascript is Frustrating and Sneaky

Thanks to Jung for mentioning the position:absolute detail. I was working on my page for days (with mostly correct Javascript) and none of the positioning succeeded until I set position:absolute in the CSS.

My final assignment is here.

So the moral of the story is that sometimes the Javascript is just fine and the real problems lie elsewhere.

I sure hope future lessons are learned with less pain involved.

CSS Resets

Oh, and another thing...

I was looking at some existing websites out there and found that some of them use a bit of CSS code to normalize cross browser rendering behaviors. It seems like a good idea to me. You explicitly declare everything to be zero at the beginning so all your defaults are the same between IE and Firefox.

I don't know much about it, but it's working so far! (See my earlier post about my page finally looking the same in both browsers.)

At this link you can find further information. Below is the current recommended CSS Reset.



/* NORMALIZE Cross browser rendering inconsistencies

----------------------------------------------- v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* End Normalization */

Plodding Along...

Hi everyone,

I am happy to report that I finally made something that translates from Firefox to IE! This was the first time I have been able to do it, so I'm extremely pleased.

That was the good news. The bad news is that I'm still working on the basic layout. :( I guess I'm a very slow div-maker. I haven't done a speck of the Javascript yet which is really frustrating. I'm looking forward to giving it a try but I still have a bit more layout to do before I can get there.

Here's how my page looks so far:
http://onepotcooking.com/sharonnikfarjam/class5/inclass5_store.html

The Really Big Red Button That Doesn't Do Anything

Does anybody remember that website called The Really Big Red Button That Doesn't Do Anything?




I used to think it was an amazing zen-like place. Now the magic is gone. :(

Success! Beware of your Javascript variable names...

Yes! My validation finally works! The problem was that I was using variable names like "first-name", "last-name", etc. Apparently, you cannot use the dash within a variable name. It seems to be ok within IDs, but not ok within Javascript variables. The function interprets the dash as a minus sign and causes the function to subtract "name" from "first". This is obviously a big no no. So the moral of the story is to beware of the names you use for your variables. Don't use dashes!

Here are some additional rules for naming your Javascript variables as taken from this link:

1.
A variable name cannot start with a numeral. For instance, 3x or 2goats or 76trombones would all be illegal variable names.

You can, however, have numbers within a JavaScript variable name; for instance or up2me or go4it would both be perfectly valid variable names.

2.
You cannot have a mathematical or logical operator in a variable name. For instance, 2*something or this+that would both be illegal... because the * and the + are arithmetic operators. The same holds true for ^, /, \, !, etc.

3.
You must not use any punctuation marks of any kind in a JavaScript variable name, other than the underscore; for example... some:thing or big# or do'to would all be illegal.

The underscore is the exception, and it CAN be used at the beginning, within, or at the end of JavaScript variable names. You can use names like _pounds or some_thing or gallons_ as variable names and they are perfectly legal.

4.
JavaScript names must not contain spaces. Ever.

5.
You cannot use JavaScript keywords (parts of the language, itself) for variable names. Thus window or open or location or string would be illegal. Check a JavaScript reference if in doubt as to whether something is or is not part of the language -- JavaScript has grown into a fairly fully-fleshed language, so you may get some occasional surprises.

You can, of course, use what are otherwise keywords as parts of variable names. For instance, thatWindow or someString or theLocation would all be perfectly acceptable.

6.
JavaScript variable names are CASE-SENSITIVE. Programmers in other languages are often tripped up by this one, as some languages are not sensitive to case in variable names.

For instance, all of the following names would be considered completely different variable names in JavaScript: gasbag Gasbag GasBag gasBag

(just kidding, all you really need is more cowbell)

Sharon's Billing/Shipping Form

I totally don't get Javascript yet, but I am excellent at making my code match other people's so here is my assignment.

It works, but I really don't understand how or why it works. In order to give myself some more practice, I am trying to add some functionality to validate the form and check for blank fields. Unfortunately, the only thing my formValidate function seems to do is break the otherwise working address-matching function. Argh.

So far no luck, but stay tuned...

Sharon's Class Directory Page

So here's my class directory page...

NYU WEBDEV DIRECTORY

For the life of me, I cannot get it to look exactly the same in Firefox and IE. I have no idea what to do!

[If you are using IE, please move along. Nothing to see here.]

Also, I wish I knew an easy way to make a graphical logo. I had a really hard time making GIMP do anything remotely interesting. It's nice that GIMP was free, but I think I am more comfortable with Photoshop.

Colors! ~ Colours! ~ Colrs!

Hello everyone,
Here are some neat sites I found to help you work out the color schemes of your webpages:



COLOURlovers
This is a strange place were people get together to talk colors and their favorite palettes. You can get some great ideas about colors combos that might look nice together.










Flickr Color Fields Experimental Colr Pickr
This is a neat search function for Flickr. It will find pictures for you based on the color you choose.









Idee Multicolr Search Lab
A really fantastic Flickr search device that lets you choose up to 10 colors at a time.






W3School's HTML Color Names
This one you should know. Impress your friends by learning all 147 cross-browser color names!

The Pet Shop is Open

Hi everyone. Here's the link to my petshop:

http://onepotcooking.com/sharonnikfarjam/class2/petshopv1.html

As Robin my partner said, we chose to use Amos' wireframe layout rather than either of our own. His had more interesting details that we wanted to tackle. We worked on the main layout during class, but it proved to be hard coordinating the other details once class was over so I'm sure Robin's will have different images and such.

Every time I look at the page, I keep getting struck by how it looks exactly like the web circa 1998! It makes me laugh. I guess I should have chosen better graphics to avoid the throwback appearance. I look forward to learning how to make something more modern-looking.

Pet Shop Progress - Firebug rules!

Argh!

That's pretty much my first impression with how things are going. There is some progress but things are surprisingly slow. I find myself getting a bit mixed up about what's what when it comes to classes and IDs and where all my CSS formatting is located for each element. Today, I spent forever trying to make a simple line of text go up a bit with absolutely no success. Fortunately, I got a quick tutorial on Firebug and I think things might be easier from here on out.

Here's what I learned:

You can turn on Firebug, select "inspect", and click pretty much anywhere on your webpage. Firebug will then highlight the element (useful for seeing size and margins) and show you where it is in the HTML source. Then if you look in the right hand panel, it will show you all the different CSS formatting that has been applied. The neat part is that you can turn off and on the various formats right there and immediately see how it changes the display. This is great for tracking down where your problems might be. You can also adjust various sizes simply by using up and down arrow keys (especially helpful for figuring out box sizes). New formats can even be added and you can see the results instantly without the whole procedure of writing, saving, uploading, and refreshing. None of it will be saved into your files, so you still have to go back to your originals and write it there too. The benefit is that you are testing in Firebug without cluttering up your HTML and CSS files with code that may not necessarily work.