Friday, 22 July 2011

Thinking about image galleries

Well today I was brainstorming image galleries in my notebook. I sketched out ideas and annotated them. Probably not the best way to do things but my mind works better if I write things down. Most of the time, writing things down helps me remember them.(I'll upload these sketches later) Then I decided to go look at other people's ideas at http://vandelaydesign.com/blog/web-development/jquery-image-galleries/
 Most didnt really strike me as what i wanted apart from a few of them. I shall later sketch these in my notebook and add any ideas in there as well. My little notebook is on it's way to becoming a full fledged book full of brainstorms and ideas

Monday, 11 July 2011

Chatbox tutorial

Today i followed a tutorial from
http://www.dreamincode.net/forums/topic/44808-simple-text-chat-box/
to make a chatbox. It was ridiculously difficult for me. So, I gave up halfway through. I'll go back to it when I'm better at PHP

Sunday, 10 July 2011

Client Feedback

I showed my dad my mini project and asked him about whether he thought this kind of layout would be okay for his website. He liked it a lot. I'm planning on making a minimum of three layouts and asking him to pick his favourite.

Did i mention that it was a kind of dropdown like thing? Here on my mini project, making a website for my notes, there is a drop down menu for science, languages, humanities and others. When you click on Science things drop down and the others move down to make space for it. This is similar to what Mr Dickson once showed us in our last lesson.

Saturday, 9 July 2011

JQuery navigation menus

I found many excellent tutorials on J query navigation menus...
http://www.google.com.hk/url?sa=t&source=web&cd=2&ved=0CCUQFjAB&url=http%3A%2F%2Fwww.noupe.com%2Fjquery%2F45-jquery-navigation-plugins-and-tutorials.html&ei=OUMZTrKsEYuImQWwy8UK&usg=AFQjCNEoEhG5izD5RpLTC_82FpxKWDb_Zw
I particularly like http://tutorialzine.com/2009/12/colorful-content-accordion-css-jquery/

So i copied and pasted chunks and started editing it. It feels like cheating but it works. It used to be in the center. I changed it by editing the code

ul.container{
 /* The topmost UL */
 width:240px;
 margin:0 auto;
 padding:50px;
}

to...
ul.container{
 /* The topmost UL */
 width:240px;
 margin:0 auto;
 padding:50px;
position:absolute;
left:0px;

}
so that it would be on the left instead of the center. I was unconfident about this and had to check it http://www.w3schools.com/css/css_align.asp

Tuesday, 5 July 2011

YES I DID IT

Well, after a lot of messing around and experimenting, i finally did it.

This is kind of what i wanted to achieve. Only....i think the lines could be a bit more wavy...and i should probably center the text. Okay let me say how i made this...
First, i followed a tutorial from http://psdlearning.com/2008/06/luminescent-lines/#more-45 to create the lines. Then, i stretched out the image a lot. Its width is 7000 pixels and height is 231 pixels. Next time, if i ever do this again, i'll make the lines more wavy and the rainbow needs to be denser so im not only seeing blue.
Then...i made an html file in notepad that contains
<html>
<link rel="stylesheet" type="text/css" href="mycss.css" />
<head>
<h1>
Laura Cheung's Notes
</h1>
</head>
<body>
</body>
</html>
Then I made a css file named mycss containing
body
{
background-image:url('header2.bmp');
background-repeat:no-repeat;
background-position:center top;
}
body {  
background-color:black;
 overflow: hidden;  }
h1
{
color:white;
}

By the way, header2 is what i named my image and i saved it as bmp because i like bmp.

CSS background images

Well, today, i started off looking for webhosts that supported PHP and MySQL. I found one
http://www.000webhost.com/
I felt like trying MySQL but....it looked really awkward and scary...jQuery looked really awkward and scary too. So i went back to the basics. CSS and HTML. So, i thought i'd give myself like a mini project to do. I decided that my mini project was going to be making a website for my notes. So...i wanted a header with a different background...but i forgot a lot of things. I found out how to embed my css into my html file here
http://www.w3schools.com/html/html_css.asp
<link rel="stylesheet" type="text/css" href="mystyle.css" />

and then i had to check how to put my image in.
http://www.w3schools.com/css/css_background.asp
body
{
background-image:url('img_tree.png');
}

...but...turns out it was too small! I then found out that there was a value called an "em" which changes the size of things in css.

I then took a look at this website http://www.google.com.hk/url?sa=t&source=web&cd=2&ved=0CCEQFjAB&url=http%3A%2F%2Fcss-tricks.com%2F766-how-to-resizeable-background-image%2F&ei=bOQTTsSnJeGhmQW-4dGbDg&usg=AFQjCNFxtMMTYzAwnOniWXxcDN8eGU9BMw which was mainly about Jquery...i completely did not understand. So i gave up and messed around by myself...and i got this...


Strangely enough theres a white space in between my wannabe header and my window. I need to fix that...

Sunday, 3 July 2011

PHP Basics

Well, today i took a look at making MySQL databases on XAMPP. I searched a bit and found this.
http://answers.yahoo.com/question/index?qid=20081015022523AAXpDE7
  

and i'd lost the original page. Luckily, i'd copied it before playing around in notepad, so i got it back. MySQL databases looked kind of scary to me so i didnt try to make one yet....

This was the stuff i had to copy and paste back


Okay, I shall now explain how to work XAMPP. First install it, of course. I was stupid and didnt ask it to put a shortcut on my desktop so i had to run it by going to start, run and typing C:\xampp\xampp-control.exe to get that little thing up in this screenshot


Then by clicking on admin on the first one, it will bring local host, a web page. Near the bottom, it says PHPMyAdmin. By clicking there, you can add a MySQL database.

Playing around with backgrounds



http://www.hongkiat.com/blog/40-cool-abstract-and-background-photoshop-tutorials/
I was messing around a while ago, making these backgrounds, following tutorials from this website. I learnt to make brushes, i learnt more about layers and filters. This will eventually come in handy when i start making a background for the website.

Saturday, 2 July 2011

Summer is here! Lets start.



So...LETS START. First, I'll summarise what i said in my video in bullet points
  • It is currently summer
  • I am going to learn PHP and MySQL and reinforce my Javascripting skillls
  • I am making a website for my dad
  • I need to think about colour themes, layouts
  • Basically, i'll spend this summer practicing PHP mainly and figuring out the layout i want
Right now, i am looking at layouts. I shall list the ones i like here. Then, i'll lump what i like best about each of them together and create my own.

From http://royaltutorial.com/photoshop-tutorials-for-web-design-and-layouts/
Oh my god. I just love this. I really like the interface.
I like the buttons on top. Im guessing its the type that moves
along when you hover over it. However, the bottom bit
doesnt give you much space to put things in.


This would be a really cool button. A button with a
simple shape that could just pop out of the ground when
you over it. Though im sure there would be plenty of tough
javascripting involved. Perfect



 


I like the colours

I kind of like that background.
I could put photos of previous field
trips in the background. Maybe have
a timeline somewhere???

Rather messy, but personally, i love it. Unfortunately,
it doesnt seem appropriate for a history PROFESSOR.