Final Project and loose ends pt2

I plan to continue to work on the site. I did not realize how much I fun I would have coming up with the design for it. And working with PHP proved to be tough but also a delight. Over the next couple of months I will review what we covered and make the site more user interactive. There were some fade-in effects that I couldn’t get to work on the character pages…that are needling me. I also will keep this blog alive with updates to the site. And like Janet, I’m going to go the domain route and hopefully get my hands on two that have come to mind. ~crosses fingers that they are not already taken~

Keep in touch and best of luck on all your projects.

-Kathleen

Reach me at
katswebdev at gmail dot com

Final Project and loose ends pt1

There are still some updates that I need to do, but it would be at the risk of being axed.

Here’s a link to the final project. The gallery is working, but I want to add a banner to the gallery section and content to the video section. I tried using a free program (FFMPEGX) to convert video files to flash but for some reason (as I have noticed with other programs) there seems to be a conflict with Mac OS Leopard. Since I’ve only recently started using Leopard I’ve found myself somewhat annoyed in the last two weeks. As for the flash conversion, I used http://www.zamzar.com/ (be sure to have your pop-up blockers on if you visit the link).

As for the sites that I mentioned in the last class… DazStudio for free 3D software and not-so-free, but nicely discounted products (with membership).

Yetii for tab persistence and other tab niceties.

Galleria for a javascript image gallery.

Also there’s the issue assignment 7 (image uploading), which is only partially working. You can register, sign in, and upload. The image will go straight to a folder, but I’m having problems getting the image filename to appear as text in the text file that is supposed to store the image and caption. It’s probably something I could fix with fresh eyes…perhaps. Most likely I will have to check to see what code other people used. I’ve been relying heavily on the text I have been reading (PHP Solutions).

Will write more after work.

Final Project wireframes...sort of

I wanted the site to resemble a storybook so I decided to wireframe in Photoshop. But in doing so, I realized that I will have to go back and simplify the site in consideration for users with slower connections. For the pages I was thinking of using the z-index to place a “dirty layer” of smudges (as a gif file) over a div that is filled with a color determined by css so I can change the paper color on the fly.

The book cover in the splash page will be made smaller and then when the user clicks on it, the inner page for the book will fill the screen. The book tabs will work via JavaScript. (The images still need some cleaning up.)


The "Plot" page will resemble the homepage.

The "places" page will resemble the "characters" page. I will use rollovers for the character pictures like when we did the ecommerce site.

For the actual page with the character descriptions, the bottom will have a div containing thumbnails of other characters that the user can scroll through. The div will be via an include file since it will be there for all character descriptions.


I haven’t decided on the Feedback section, whether it is a comment section or a form sending emails to me.

Final Project Idea

As for my final project, I am going to build a site to keep friends, family, and random strangers apprised of the storyline I’m working on (Yes...I’m one of many people attempting to write a novel). The site will have a storybook feel with the inclusion of media in the form of amateur computer animation involving profiles of the characters and descriptions of plot. I will be using tabs supported by PHP, the display of random images, interactive mini games for users (with the help of scriptaculous), a comments section, embedded players and so on.

This is the kind of computer animation I’m intending to use. (Scion of Altras is the story the site will be based on.)

Assignments 1 through 6

Assignment 1 Wireframe

Assignment 2 Petshop

Assignment 3 NYU Web Directory (I had a long entry about the trouble I had with the space created by the h4 tags. I learned how to fix the problem via Joanna's example in class, but I decided to leave the code as is for progression purposes. I can look back and smile and say "Oh, that was before I knew about 'margin 0 Auto' ")


Assignment 4 Shopping cart
For this one, I had help via code from a forum. I made things difficult by unnecessarily creating more than one form.

Assignment 5 E-Commerce site
I was able to complete this with the help of Jack's code and lots of id and class name changes

Assignment 6 E-Commerce + PHP
I broke up the page into "header" (banner ad and navbar), "skyscraper" (ad), and "footer" php files, and kept the main content as base.php. In terms of changes, there's the logo and the skyscraper that have changed. As I was dividing up the page, I realized that most of my changes would be occurring in CSS and not the individual .php pages I set up to aid in updating what would be theoretically be 100 of pages of a site. Down the line, learning how to switch between style sheets via php would be interesting.

Sleazily rolling over

ha (that would be a "ha" of joy...with a tinge of madness...)

In the end, I had to rely on someone else's code. I used Jack's and changed my div classes and ids to match the ones he used. After doing that, not only did I have rollovers but the .js file made a lot more sense. More sense...but not entirely.

updated draft of site

Draft of e-commerce site

The javascript part did not work out well. Being short on time this week did not help. I was able to get a rollover effect using the visibility property in CSS, but that also resulted in flickering. Also, when I used zoom in and zoom out on the window, the divs for the product description shifted. I abandoned using CSS to achieve the rollover effect and began using the prototype examples covered in class but...yeah... I still need go over the material again and again.

I was trying not to rely heavily on anyone else's code, but it looks like that is the best bet for a successful outcome.

link to e-commerce page (w/o rollover)

Class 4 assignment

I'm still struggling with javascript syntax, which is not too much of a surprise. Nevertheless I feel better off than the previous week. This is not to say that the homework came from me successfully arriving at the answer on my own.

I found this link helpful. It gives the basic format and you can adapt it to your form.

Looking at it, I realized that I had made things unnecessarily difficult for myself by creating 3 forms. But I was able to adapt the example without redoing my HTML. In the end it worked out well and I understand a little more than I would have had I just done one form. Whether the lesson will stick or not is another issue. I believe, in my case, it is better to start compiling a library of scripts.

Here is my result.

NYU Web Directory

I, for some reason, decided to use an imaginary person for my assignment.

Strangely enough, the biggest headache was getting the heading of each bit of directory information to look the way I wanted (with a burgundy border and flush against the top of their respective div containers, with no space to the left and right showing the background of the element behind it). Hope that makes sense.

I realized that I had to make the headings (basic info, contact info, links, and interests, etc) block-level elements in order to make the background color extend past the words. After using h4 tags, I then had the text being pushed down away from where I wanted it to be. I removed the padding from those sections and then adjusted the size of the div containers to make up for the removed padding. I still had the h4 tag pushing the text down from the top of the div containers. I used relative positioning to move the text (and the list items following it) up. Problem solved. There probably is an easier way, but this is what occurred to me after scratching my head…furiously.

While working on this assignment, it occurred to me that it really is going to be hard for me to remember the syntax for the various properties without looking at my old files or looking up information in a text or online. Perhaps it will get better with time, but it was only after checking my results against other sites did I go “Oh! I should do such-and–such”. ~bows to sources of information~

In terms of checking the assignment in the browsers… Only one div container looked slightly different in Safari. It was the one containing the “about me” blurb. I used relative positioning to move the container up and there is more space under it Safari than in Firefox. I will have to wait until class to check it in Internet Explorer. (I was dragging my feet about installing IE on my mac only to find out there has not been a new version since 2003…indeed.)

Class 2 Homework - Petshop wireframe and CSS

I'm certain there are bags under my eyes, well-earned ones. It was a journey of tea-guzzling, swearing, and indigestion.

http://www.onepotcooking.com/kathleenhaywood/class2/c2a2.html

It was based on the wireframe below. (made some changes though)



I've looked at it in FireFox and Safari and I haven't spotted anything glaringly odd. I'm curious as to how the colors are going to look on a Windows machine. (I'm on a Mac.)

Oh Yeah...

I found an alternative program to Fireshot (Windows only) called Webshot. Can't quite compare the two since I haven't had a chance to play with Fireshot during class breaks. As far as I've seen with Webshot, it would be nice if you could choose the file extension for your capture or if you could determine which part of the site you wanted to capture. For instance if you simply wanted part of the first page.

[EDIT] I was able to have a look at the site in Internet Explorer ,and strangely enough, a problem that I was having with the Featured Pet div box appeared to have fixed itself. The problem is still visible in FireFox. (The issue was with the rabbit's name overlapping with the bottom border of the box)

Also in IE, the paw print used in the logo looks shabbier than it does in FireFox. I can't really understand how that would be. Differing browser interpretation of a .gif with a transparent background?

Class 2: In class assignment 1

CSS and floating boxes
http://onepotcooking.com/kathleenhaywood/assignment1.html

change of blog

I've decided to start a new blog with a simpler URL, one the same as my gmail address. I'll update it with the necessary things within a day or two.
(EDIT: The previous blog was at http://katspaceintensive.blogspot.com/

Pet Shop Wirefame