Welcome! I thought I'd create a little blog of my weekly progress as I
work on my proposed site - pentreasures.com - a site for my boss's pen making hobby.
(Below are links to the weekly versions of the pentreasures project.)
::links - pentreasures w1
- script.aculo.us ajaxifying
Thursday, April 27, 2006 :: 6:31PM PST
Ahh... and now we come to an end, this week being our last in a really fun and exciting web programming class.
give the pen gallery that AJAX feel.
in more-popular sites for effects like drag-&-drop and fading. To that I added a few more scripts (like to get cart functionality)
- Uses XMLHttpRequest object (aka XHR)
- Entire web page doesn't seem to need refreshing. Just the little components of the page update.
Now in the gallery, a user can click Back/Next to view each pen OR click on the pen thumbnail to view it. They can click Show/Hide
to display the pen's details. Then, they can drag a pen (thumbnail) onto the "shopping cart", drop it there, and it gets added to their cart!
Although I didn't explicitly use the XHR object (so it's not a true AJAX page), the components do get updated (the cart contents for example) without having to refresh the
entire page. Feel free to check out the page source and all my commented script sections.
Well, this class has been an awesome opportunity. I got to start on my boss's pen making site (now I hear he wants to totally revamp the whole look - I say no prob!), and learn
a lot from our instructor, Paul, and classmates along the way. Hope I was able to share a little something as well. Look forward to browsing everyone's future creations, too, as we
web site programming!
Friday, April 21, 2006 :: 7:00PM PST
a simple pen gallery.
I made an array of images and an array of descriptions:
penSrc = "<img src="../images/pens/Creditcard...>"
penDesc = "CreditCard - this pen clips neatly...>"
Then there are 3 functions.
One of them goes backwards through the array. The other goes forwards.
The main one is responsible for changing the contents of a couple of div's.
// function to go to previous pen
if (index == 0) //test if at beginning and work backwards from end
index = NUMBER_OF_PENS - 1; //set index to the last pen
index--; //go back one pen
//...then display it
document.getElementById('penImg').innerHTML = penSrc[index];
document.getElementById('desc').innerHTML = penDesc[index];
displayPen() function looks for the div's with the id "penImg" and "desc", gets the data I have in my array
by referencing the
index variable, and sticks it into those spots. Somewhere in my HTML page I have the links that
kickstart the backwards/forwards functions, and the div's magically change!
<a href="#none" onClick="backPen()">back</a> |
<a href="#none" onClick="nextPen()">next</a>
description info in a separate file (XML) and programming my script to read it. Then images and captions would be easier to
maintain. Right now though I can say I'm happy from another week of web programming.
- style and form
Friday, April 14, 2006 :: 9:03PM PST
Wow, what a fun week! Seeing the forms come up after coding them is real satisfying.
This week we had to create forms. I made a small contact form for Dave's site. Right
now the message gets sent to me (testing). Also made a dummy order form. I used a
table to align the labels and fields.
We also had to use Cascading Style Sheets (CSS). I played with the decorations for the "active"
pseudo-class style to make top and bottom borders. CSS is POWERFUL! For example, the little gallery below
"How to Create a Photo Gallery Using CSS". (2005, Nicholls).
hover over the pics and see what happens!
Besides creating mouse-over effects, we also were required this week to use <span>, which is what this gallery is using.
Feel free to check out my css code from the links below. (Course, I made comments & notes to keep track of things.)
Nicholls, Stu. 2005, April 12. webreference.com. How to Create a Photo Gallery Using CSS.
Retrieved from http://www.webreference.com/programming/css_gallery/ on April 14, 2006.
- tables, iframes, and pens Oh my!
Saturday, April 8, 2006 :: late night PST
This week's objectives were to make use of tables and iframes. Earlier in the week I was
able to slice some images. Here are the image slices I created for the site border:
Coding the tables wasn't too bad. I just had to specify specific column widths for the four corners
and set the top, left, right, and bottom image slices as backgrounds for their corresponding cells.
Setting them as backgrounds causes the browser to repeat or duplicate or tile them across or up-n-down
the entire cell, sorta like wallpaper for an OS desktop. This technique allows a table to 'grow' (see
how the left & right edges seem to get shorter or taller depending on the page's content) all without
having to create (and download) different sized images. The image is not being stretched to fill the cell,
so it doesn't get distorted, but you do have to watch out for patterns that don't tile together nicely
when working with backgrounds.
I threw in an iframe for sort of a make-shift image browser for the gallery. I also left the page's background
a baby blue, which he'll most-likely decide to change. No problem! CSS makes it easy-as-pie to change and
we can even make different themes for different seasons.
- from paper to pixel
Tuesday, April 4, 2006 :: late night PST
Today I transferred my drawings and ideas to computer. I created the pen-tip in
CorelDraw and then finished up the rest in Photoshop (including all the text).
I just wanted to layout some of the type I had in mind and finally see the colors on a screen.
I jotted down the hexidecimal codes of the colors I used. Those will come in handy when I
go to code my html and css. Next up will be some slicing and dicing in ImageReady. I wouldn't
want to load this whole image as one huge web page. I'll be chopping this up and using only the
graphical parts and uncommon fonts. Then I'll most-likely use tables to piece it all back together.
The rest will and should be basic html text. For now, I'll call it a night!
Week 1 - the drawing board
Sunday, April 2, 2006 :: 12:07AM PST
Well, I have to admit, I spent too much time creating this blog page. c",) HTML'ing is fun! and addictive.
Couldn't stop hacking out this code and gleaning over the reading material. I wasn't happy with the look and layout
I started with so I created a css file to get the fonts I wanted and am using a table to get the border. Feel
free to check them out. View source of this page and the css here
My boss's site is on the drawing board.
Besides the images and word content I have from him I also made some concept sketches of the page layouts
and overall flow between the pages. For the color scheme: shades of gray, orange, and metallics. (Inspiration
from his pen turning machinery!)