gcgraphix blog
gcgraphix blog
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.

pentreasures

(Below are links to the weekly versions of the pentreasures project.)

::links - pentreasures w1 | w2 | w3 | w4 | w5


::blog

Week 5

- 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. This week we had to use JavaScript to make a more interactive user experience. With the hype of Web 2.0, I thought I'd give the pen gallery that AJAX feel.
AJAX - Asynchronous JavaScript And XML.

  • Uses JavaScript
  • Uses XMLHttpRequest object (aka XHR)
  • Entire web page doesn't seem to need refreshing. Just the little components of the page update.
To Ajaxify the pen gallery, I used a little script.aculo.us, a popular, free and open (and small!) JavaScript pack. It's widely used in more-popular sites for effects like drag-&-drop and fading. To that I added a few more scripts (like to get cart functionality) and updated my own JavaScript gallery.

drag n drop pen

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 advance in...
web site programming!

 


Week 4

- basic javascript gallery

Friday, April 21, 2006 :: 7:00PM PST

Javascripting, at last! The order of the week: make something using Javascript. I chose to improve on how the pens get displayed and made a simple pen gallery.

I made an array of images and an array of descriptions:
penSrc[7] = "<img src="../images/pens/Creditcard...>"
penDesc[7] = "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
function backPen(){
   if (index == 0) //test if at beginning and work backwards from end
      index = NUMBER_OF_PENS - 1; //set index to the last pen
         else {
            index--; //go back one pen
         }
      //...then display it
      displayPen(index);
}

function displayPen(index){
   document.getElementById('penImg').innerHTML = penSrc[index];
   document.getElementById('desc').innerHTML = penDesc[index];
}

The 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>

   <div id="penImg"></div>
   <div id="desc"></div>

I've enjoyed this Javascript lesson, though there's much room for improvement. I might want to improve it by keeping the image and 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.

 


Week 3

- 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 is all CSS and no Javascript or any scripting whatsoever. It's based on Stu Nicholl's article "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.)

click here to open my css for this page
click here to open my css for pentreasures

Reference:
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.

 


Week 2

- 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:

pt_tl
topleft
pt_top
top
pt_tr
topright
pt_lt
left
pt_rt
right
pt_bl
botleft
pt_bot
bottom
pt_br
botright

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.

pentreasure page week 1

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. dave_turning 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!)

a link to the upcoming pentreasures pages

webmonkey html reference chart

killersites html reference chart

  designed by glenn cueto :: UoP :: web410 :: 2006