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)