Update

Last night i managed to fix my code. I managed to redo half of it before I got too tired. I can work on it again tonight. I have sports day tomorrow so I can sleep then to make up for the time i used to do this project instead of sleeping.

Anyway, because my client has my laptop and i left the stuff i redid at home-I'm now forced to work on my search engine.
http://www.youtube.com/watch?v=NFiRdPkJCbA

This tutorial was pretty good. I now understand what to do. I'll draw it out on paper. It's much easier that way

I give up.

I've spent an entire hour in class trying to figure out what I've done and trying to get over the depression of losing my work. So, once i got home I decided to take a good long break and get started again. I could barely make sense of my previous code. So tonight, im going to work extra hard (with the help of my previous journal entries) to reconstruct the entire website.

Terrible News

Today, for some reason, my laptop won't start up.  I backed this up a long time ago so this means that i've lost a  lot of work including the photo gallery

Time Plan

I just realized. I'm extremely behind timeplan and Im unlikely to catch up due to mock exams after christmas holidays. So I will have to work as hard as I can in the holidays after the mock exams- Chinese New Year

More Image Gallery Work

Anyway, this leesson i managed to further develop my image gallery. At first the rollovers werent working and then  i realized it was the css. This is starting to get confusing. I mean look at the amount of files i have.

For some of the pages i have separate CSS files since I felt like removing some things (Eg I didnt feel that the white content box was neceessary on the page for the Image Gallery

Anyway, last lesson i managed to make a black box float up when the image is hovered over. This lesson I created a button in that black box allowing the viewer to comment-this was the function i had created quite enthusiastically earlier

When that button is clicked i decided to make a window pop up to allow the user to commenet. This seemed somewhat fitting. I wasnt really sure what to do for the background so i kept the old one. I'll probably end up changing it.

I used this http://www.pageresource.com/jscript/jwinopen.htm to figure out how to open the new window.

Also, I discovered the data validation script i made earlier on did not work. Therefore I had to look up a new one. I found a tutorial http://www.tizag.com/javascriptT/javascriptform.php
However i ran out of time to try it out

PROBLEM

I have to switch to another image host

Image Galleries and hosts

So I started using 000webhost.com, it's pretty good. What distinguishes it from other websites is the free PHP, MySQL, PHPmyadmin and so on

Now, the website url is hisfield.netau.net. It's kind of strange since i could have sworn that last week they had hisfieldfreeize.com. Oh well. I guess they just ran out of those.

Anyway, 000webhost allows you to upload the files which is really handy since i dont use an FTP.

Also, i started using ImageShack. I had heard from somewhere that image shack was the best image host for the job. It lets you store as many images as you want and allows mass uploading (which i abused quite happily)

So after all this was done and my brain was well rested, i started looking up image galleries
http://vandelaydesign.com/blog/web-development/jquery-image-galleries/
I first looked on this website to gain inspiration and then i remembered that i had already had some ideas sketched out in a notebook (this was really early on in the summer). By the way, i have recently aquired a scanner so i can now scan it.

http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
So i looked at this website and did some drastic editing with code to change into this...when you hover over it, a slightly transparent black box appears. I plan to have the comment button appear there and a view comments button (which will result in a pop up window)

Drop down menus and client communication

behind time plan

I am now officially one day behind my time plan thanks to that troublesome dropdown menu...But I managed to fix something today. Originally, there was something wrong with my background, however , i managed to put up a temporary solution by placing background colours.

Also, i used http://msdn.microsoft.com/en-us/library/aa218659(v=office.11).aspx#officefrontpagecreatedropdownmenu_externalcss in order to let me get a better grasp on how dropdown menus work.

I have decided to work on the dropdown menu more after christmas, since this is only minor detail. I need to get back on schedule first and create all the other pages and put the content in. I may have to pull an all nighter to do this...

Dropdown menus

this lesson i tried making a drop down menu from http://javascript-array.com/scripts/jquery_simple_drop_down_menu/
However it did not work since it kept creating gaps in between my links

Layout problem solved

First I decided that I would put table borders inside the table I used for content so I would know what was going on with the table. After that it was really easy. I fixed up all the mouse rollovers too.

Now I just need javascript dropdown menus. Also, I tried to view my website on a different computer last night and the content box was not centered so I have to either make it wider or make it more to the left.

Rollover Buttons

First I looked at this website
http://www.elated.com/articles/rollover-buttons-with-javascript/
But really, the tutorial looks way too complicated. It looks like its completely making too much of a fuss out of nothing...I think I'll try another tutorial...

http://www.designplace.org/scripts.php?page=1&c_id=21
This one however makes a lot more sense. Lets try this

Return of the Search for the Search Engine

The title of this entry made me laugh. Anyway, I was looking at some search engine stuff today when i stumbled across this
http://www.php-development.ru/php-scripts/search-engine.php

It allows downloading of the search engine. I'm going to have fun taking apart the code and analyzing it.

I havent been working very had on this project last week. Last week I had so much work to do and since this whole project feels so recreational, I accidentally put it aside for later. During the times I was doing the design work, I would go in to the ICT rooms to work at break times, but last week I only went in 2 or 3 times. It feels rather depressing. Never mind though. I'll work harder next week.

Success

I'm almost there. I managed to solve the background issue.

Rant

Well, yesterday, I encountered a frustrating problem. In my design, there was a white box in the center containing all the content. I was unable to put this white box in the css.

For some reason, I dont think it could find the file when i mentioned it as a background image. So when I used it as a normal image instead, I tried Z-indexes. This also failed. I have already placed everything in the div i named "content". I put the white box image.png into this div, but it simply forced the content down, even when i used Z-indexes

Centered!

http://www.webmasterworld.com/forum83/4694.htm
I had trouble centering my content div, so i used this website to help me center it.

Search Engine and Form Processing

http://www.html-form-guide.com/php-form/php-form-processing.html
http://www.devshed.com/c/a/MySQL/Building-a-Search-Engine-with-MySQL-and-PHP-5/3/
I took a look at form processing and search engines at these 2 websites. Unfortunately, i was unable to make used of them...yet.

I have saved out all the graphics. The main background as a bmp to retain quality and the others as png to retain the transparency since some had rounded edges. I put together the stuff in the css and used a table to get rid of the gaps in between the buttons.

Aunt Heidi's reply

So I asked my Aunt Heidi, a freelance programmer, about this stuff and she said that javascript was probably a more efficient way. She sent me a link that would create a search engine for me. If all else fails, I'll use this search engine

Shock

I sent an email to my client last night, asking about which design he preferred. He said he liked design no. 2 the best.

This design has rollover buttons, alternating from dark blue to light blue. When I asked my cllient why he had chosen this, he said that it looked refreshing. I was surprised

Design No. 5 finished

This has to be my personal favourite. If my client chooses this (which I'm very confident about), I'll be very happy making this. Oh, I also used a paper tutorial. It was very good.
http://pshero.com/photoshop-tutorials/graphic-design/a-scrap-of-notebook-paper

Design No. 4 finished + some ideas for no. 5

Here is design no. 4. The colours were based on my client's old website

mine

original website

Also, I came up with some ideas after looking at some more web designs. This will be design no. 5. My last one. At this rate, my time schedule will be moved up.
http://www.blog.spoongraphics.co.uk/articles/25-super-cool-paper-inspired-website-designs
This site has a lot of paper/ wood related web designs. I think this would really suit history. This will probably be my best design yet. I think I really have improved

I also found a very nice tutorial on creating wood
http://www.myjanee.com/tuts/wood/wood.htm

Design No. 4 Ideas

I think that at this rate, I'll finish ahead of time, so I can shift everything upwards in my timeplan.
My next design will be based on one of these
http://dzineblog.com/2009/06/50-beautiful-website-designs-for-your-inspiration.html

Design No. 3

I quite like this, I still havent asked my client's opinion on this layout yet. But i have to say, I love this. I think Im getting better

Grunge Designs

 A sudden act of proscatination allowed me to find this website. Very inspiring website
http://sixrevisions.com/web_design/30-beautiful-examples-of-grunge-in-web-design/

However, I was quickly brought back to earth when I realized that I didnt know how to make a grungy looking background as I had never done one before

Email and Design no. 2

First of all, I sent an email today to my aunt Heidi, a freelance programmer from Toronto. I seem to remember during my visit to Toronto last year that she and her husband has quite a large number of PHP and MySQL books, as well as Java.



Also, I created another web design, based on the stuff from my previous journal. I asked my father to give me some feedback and he said that it was quite good. However, the links did not stand out enough. They had the same blue as the background. Before he saw this, at dinner, I mentioned a sky blue webpage and he said that history subjects tended to have dark, drab colours. Therefore, my next web design will be green/brown. He said the main background was okay though, so I may keep the gradient. Also, I like the posistioning of the search bar here.

More design work

After discovering from my client that history rarely had sharp bright colours like that orange I used previously. So back to the drawing board i went.

From this website, i saw several appealing designs.
http://www.hongkiat.com/blog/60-high-quality-free-web-templates-and-layouts/



After looking all these designs, I realized that this gradient from top to bottom really appealed to me, and I'm sure that it would appeal to most people too. Also, there are quite a few pale colours here. Therefore, the next layout i try to do will have a pale colour scheme with a gradient going from top to bottom

Seeking Professional Help

Well, for the search engine, I was completely run dry of ideas. So I decided to seek professional help from my father/client's technician

From: Roy Yiu (HIS)
Sent: 2011年11月7日 18:40
To: Cheung Sui Wai (HIS)
Subject: RE: Question

Dear Prof. Cheung,

I am not familiar with this. As I know, to construct a searching engine, you need to use a database server(e.g. mysql, ms sql…) for its backend and you may use any computing language(s), (e.g. php, aspx….) for querying and displaying the searching result(s) to the user (i.e. the front-end).

You may imagine that:

1. some particular information of a webpage, like Page title, Domain Name, Page description, Keywords…., will be collected and stored into a database. To store what kind of information will affect the accuracy and searching rate.

2. one makes a request to search “something” from the searching engine webpage (front-end). The request will be sent to the database server for processing. The searching result will be sent to the front-end webpage for displaying.

Yes, in fact, you may copy and paste the webpage information into the database for searching! However, it works but it is not efficient. Certainly, there are some API for searching, e.g.

http://code.google.com/apis/customsearch/docs/dev_guide.html

Regards,

Roy

From: Cheung Sui Wai (HIS)
Sent: Monday, November 07, 2011 5:04 PM
To: Roy Yiu (HIS)
Subject: RE: Question

Dear Roy,

Do you have any idea?

With thanks,

Sui-wai

From: Cheung Sui Wai (HIS)
Sent: 2011年11月5日 20:51
To: Roy Yiu (HIS)
Subject: FW: Question

Dear Roy,

This is a question from my daughter Laura. Could you tell her answers?

With thanks, from

Sui-wai

From: laura cheung [mailto:laura001_hk@yahoo.com]
Sent: 2011年11月5日 20:32
To: Cheung Sui Wai (HIS)
Subject: Question

I would like to ask how one would make a search engine that would search through an entire website. I do not understand how it works. Would it be through usage of PHP and MySQL? Or would it be through Javascript? Also, how does it work? Does it copy and paste content into a database and then search through that? Or is there a function/plug in that allows searching through an entire website? Thank you in advance.

Anyway, this proved to be useless since Roy (the technician) seemed to know little about web programming and the information he gave me was more about how it worked (eg. search engine searches things) but not more in depth information on MySQL.

So I decided, next, to try seeking help from my aunt, a freelance programmer from toronto. Thankfully my client (my aunt's brother) gave me her email at my request.

Javascript Validation

This lesson I worked on creating textboxes for the comments and checking if things were all filled in. I first looked at this website.
http://www.php-mysql-tutorial.com/wikis/php-tutorial/creating-a-guestbook-using-php-and-mysql.aspx

I spent a lot of time attempting to figure out what was wrong with the code since it wouldnt work. In the end, the code was too complex and I ended up deleting many essential things.  In the end, i ended up writing my own, but the experience from my previous attempts helped me a lot. I created fields for both names and comments.

However, my checking the validation still did not work. After a lot of puzzling and trialling and erroring, i finally found this site

http://www.tizag.com/javascriptT/javascript-getelementbyid.php

This allowed me to confirm that setting a variable to an html id was actually possible. Also, it told me what i was doing wrong. I had used " instead of '
After fixing this, it was all perfect.

Colour Scheme Inspiration

To improve my website design, i decided to look at some colour combinations and designs.

Colour Combinations
http://www.colorcombos.com/

http://www.colorschemer.com/schemes/
http://designshack.net/articles/inspiration/25-awesome-tools-for-choosing-a-website-color-scheme
http://www.colorsontheweb.com/colorwizard.asp






This website
http://www.inspiredm.com/colour-schemes/ inspired me to make a series of web designs and thus gain experience and choosing what i like best from them

I asked my client what he thought of my version and he told me that he liked it but history websites tended not to have bright flashy colours like orange i used. Instead, the blue and green worked a lot better