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?