Well I have to say this project was a pretty good introduction to web design. I learned a lot about how websites are made, and what it takes just to make a simple working website.
HTML and CSS are hard beasts to tame, but with enough persistence and revision I'm sure I'll be able to understand it.
Stay tuned for more posts relating to my major project.
Looking forward to this one.
Tuesday, 17 September 2013
Adding a Simple Menu and Videos
For a while we had to deal with those annoying lists on our site. You can hide them via a nice little trick, but to solve them automatically, our tutor gave us a link to a nice website where we could get some code that fixes it all for us. How nice.
http://css.maxdesign.com.au/listamatic/index.htm - Index of the massive amount of lists that you can choose from. They're all free to use as well.
http://css.maxdesign.com.au/listamatic/horizontal03.htm - This was the particular one we used.
Also, we learned how to add a video into a page via video sites like youtube and vimeo.
You need to have your html file open, and the video that you want to add to your page.
Then you find the share/embed feature on those websites, and the site will give you the code that you need. Make sure the space that your video goes into isn't too small for it, otherwise you might have problems...
Guess that's the last learning related post eh? Neat.
More CSS styling, and some Image optimization
This class was really more of a continuation of the work we did last week, we learned more CSS and how to 'slice' images from Illustrator.
Basically the slice tool is used to take a selection of an image and save it in a separate location.
We did an interesting exercise where we gave our html elements one specific id, then used the CSS file to change the colours of the webpage.
There was a lesson on how to add an about page, however I got caught a bit behind and I couldn't follow along with it. I'm going to make a concerted effort to finish my test website as much as I can though.
Basically the slice tool is used to take a selection of an image and save it in a separate location.
We did an interesting exercise where we gave our html elements one specific id, then used the CSS file to change the colours of the webpage.
There was a lesson on how to add an about page, however I got caught a bit behind and I couldn't follow along with it. I'm going to make a concerted effort to finish my test website as much as I can though.
Interface design
Week 5 was a lesson in visual design, basically we went over a brief design process much like the one you use for pretty much any other project, and we got a little task of redesigning the example website that we had to re-code the other day.
Here's what I've managed to code so far at the time of writing: (adjusted to fit screen of course)
There's a bit more work that needs to be done to it, I've been working through it at my own pace and learning quite a lot as I do it. Thankfully it's not required for hand in for this project!
It's also interesting going back to design again, it's something I haven't done much at all and I was quite amazed at how quickly my classmates had made their mockups while I was still trying to pick the colours...
Anyway, I think that's all I need to say, stay tuned for the next post.
Monday, 16 September 2013
The magical world of CSS Stylesheets.
If HTML is the skeleton of the website, CSS must be all the other good bits. Terrible analogy, I know, but CSS does so much stuff that would be impossible or extremely time consuming to do in HTML code.
Basically it organizes the looks and formatting of your website.
For your stylesheet to take any effect, you have to link the two on your HTML code.
Like so:
<link href="css/mainstyles.css" rel="stylesheet" type="text/css" />
The pink text is where the link to your stylesheet goes.
h1 {color:blue; font-size:12px;}
Selector Syntax
The selector works by, well, selecting the element of the html that you want to modify.
The syntax is what you want to do to the selection.
More websites and blogs - Good, bad and downright weird.
Throughout anyone's experience on the Internet, they're bound to find some websites that they like and dislike. Often we don't really give much thought to them, we click and move on. And sometimes you'll stumble across an example of an abysmal combination of design choices so bad it will stain your mind for a long, long time.
I've kinda kept a mental list of the all the websites I like and don't like over the years, and here's some of them.
(I guess there's more good than bad here because I'm not that well versed in design yet so I tend to only remember the really bad examples.)
Here's some bad ones:
http://www.deviantart.com/
This is an unlikely choice, because it's quite popular. Deviantart is an art website aimed at mostly young amateur artists. It's here because it basically is behind the times in terms of design. This is quite surprising, considering it's supposed to be a website about ART, for crying out loud. Ironically, it's a reflection of the quality of most the work that is submitted to the site. Boring and mostly derivative. Of course, there is good art here...but you have to look hard for it. Anyway, they definitely need to update it.
http://www.stirlingprintall.com/home/index
Summary: One giant business card with an animation of a man who seems to be dribbling a basketball with his elbow in the middle of his forearm.
http://templeoftheking.com/murray.html
I don't even know how I managed to stumble across this one.
It is a web designer's hell? I think I'll let this speak for itself.
http://www.enritec.com/
Now I gotta ask, who the hell decided to stick all the office Post Its in zero gravity? Seriously, you have to chase them down via an 'interactive display' and you don't really know which one you're going to get.
Now some of the good ones:
http://www.qotsa.com/
This is the official website for the band Queens of the Stone Age, it's been overhauled to promote their new album and it works fine. From personal observation, I think the biggest goal of web design is to make it easy and enjoyable for someone to navigate your website, and this one does it well.
Also, they had a cool marketing campaign that basically replaced the old website with a single text box on a black background, with no hints on what it was for. Visitors had no idea what to put in there until someone put their email in, and the website changed into an odd intro for their next album.
http://www.nitrome.com/
I might be a little biased here. Nitrome is a flash games website, and I used to spend a fair amount of time playing their games when I was a lot younger. Their website is ok, it's a bit crowded and oversaturated (probably due to their demographic), and they use a few too many ads. The main reason why I like it is because of their content. Every button, heading and background plus other content has been made by their pixel artists who work on the games themselves. They integrate their own characters into the site, and regularly change the 'skins' of the site.
It works well and I like it. So there.
Spotify Web Campaign
This one caught me by surprise, I've used the app for this site but I've never visited the actual website before. This is the advertising page to get you to sign up. I think the main reason why it's here is because of the massive videos that are in the background, they look really nice and I've never seen a website do that before. It's basically happy people listening to music and doing relaxing things with various colour filters, kinda lame but it looks nice. It made this jaded cynic actually sit back and watch some of it.
Look at the time. Better get movin!
I've kinda kept a mental list of the all the websites I like and don't like over the years, and here's some of them.
(I guess there's more good than bad here because I'm not that well versed in design yet so I tend to only remember the really bad examples.)
Here's some bad ones:
http://www.deviantart.com/
This is an unlikely choice, because it's quite popular. Deviantart is an art website aimed at mostly young amateur artists. It's here because it basically is behind the times in terms of design. This is quite surprising, considering it's supposed to be a website about ART, for crying out loud. Ironically, it's a reflection of the quality of most the work that is submitted to the site. Boring and mostly derivative. Of course, there is good art here...but you have to look hard for it. Anyway, they definitely need to update it.
http://www.stirlingprintall.com/home/index
Summary: One giant business card with an animation of a man who seems to be dribbling a basketball with his elbow in the middle of his forearm.
http://templeoftheking.com/murray.html
I don't even know how I managed to stumble across this one.
It is a web designer's hell? I think I'll let this speak for itself.
http://www.enritec.com/
Now I gotta ask, who the hell decided to stick all the office Post Its in zero gravity? Seriously, you have to chase them down via an 'interactive display' and you don't really know which one you're going to get.
Now some of the good ones:
http://www.qotsa.com/
This is the official website for the band Queens of the Stone Age, it's been overhauled to promote their new album and it works fine. From personal observation, I think the biggest goal of web design is to make it easy and enjoyable for someone to navigate your website, and this one does it well.
Also, they had a cool marketing campaign that basically replaced the old website with a single text box on a black background, with no hints on what it was for. Visitors had no idea what to put in there until someone put their email in, and the website changed into an odd intro for their next album.
http://www.nitrome.com/
I might be a little biased here. Nitrome is a flash games website, and I used to spend a fair amount of time playing their games when I was a lot younger. Their website is ok, it's a bit crowded and oversaturated (probably due to their demographic), and they use a few too many ads. The main reason why I like it is because of their content. Every button, heading and background plus other content has been made by their pixel artists who work on the games themselves. They integrate their own characters into the site, and regularly change the 'skins' of the site.
It works well and I like it. So there.
Spotify Web Campaign
This one caught me by surprise, I've used the app for this site but I've never visited the actual website before. This is the advertising page to get you to sign up. I think the main reason why it's here is because of the massive videos that are in the background, they look really nice and I've never seen a website do that before. It's basically happy people listening to music and doing relaxing things with various colour filters, kinda lame but it looks nice. It made this jaded cynic actually sit back and watch some of it.
Look at the time. Better get movin!
Markup structure and stuff.
(Note: The main reason why I'm posting this now rather than back in week 3 is the fact that this and several other blog posts were half written as drafts at the time. I blame mostly myself, I think I got a bit too caught up with carving...)
Ok in this weeks class we learned a bit more about html amongst other things, and how to mark up a design.
One of the basic concepts was about nesting: Basically because tags work with brackets, you can put multiple tags within one line of code so that they all work together.
After we got a quick tutorial through that we moved onto marking up a simple dance website Philippa had made for us to use. How nice. Here's what the original looks like.
Turns out marking up the design was a good introduction into just how technical web design can get. Lots of meddling with code, but it's satisfying to get it right.
I also integrated a Twitter feed into my blog, turns out a lot of social media sites will provide code for a plugin that you can put into your blog. This is pretty easy to do, and I'm glad that they provide this service.
I haven't really given twitter much of a proper use yet, but I can see it's usefulness for sure.
Stay tuned!
Ok in this weeks class we learned a bit more about html amongst other things, and how to mark up a design.
One of the basic concepts was about nesting: Basically because tags work with brackets, you can put multiple tags within one line of code so that they all work together.
After we got a quick tutorial through that we moved onto marking up a simple dance website Philippa had made for us to use. How nice. Here's what the original looks like.
Turns out marking up the design was a good introduction into just how technical web design can get. Lots of meddling with code, but it's satisfying to get it right.
I also integrated a Twitter feed into my blog, turns out a lot of social media sites will provide code for a plugin that you can put into your blog. This is pretty easy to do, and I'm glad that they provide this service.
I haven't really given twitter much of a proper use yet, but I can see it's usefulness for sure.
Stay tuned!
Saturday, 14 September 2013
HTML, Social media and how the web works
As a kid I can remember mucking around on the Internet one day and finding the source code of a website. It was a weird experience to see the inner workings of a website, as it was a massive wall of multicoloured text with thousands of unintelligible characters. And now I'm here to give you a very basic introduction as to how it all works.
HTML stands for HyperText Markup Language, and my impression of it so far is that it seems to be the skeleton of websites. Really it makes up the basic layout of a website and once you get your head around it, it's not that hard to understand. (You just have to remember all those tags...)
Html works by using tags within angle brackets. A simple example is making a piece of text bold. You take your text, and enclose it like so:
You might have come across this simple tag if you've participated in a discussion forum before, as they allow you to use some tags like this.
To expand on it further, here's a really simple example from w3schools.com.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
And you'll end up with something like this:
Now that's all out of the way, here's a some links to some of the social media sites that I use:
Twitter: https://twitter.com/LordOfApricots
Deviantart: http://apricotproductions.deviantart.com/ (occupied with mostly old 'artwork' I'm afraid)
References:
www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
- date of retrieval: 14/09/2013
HTML stands for HyperText Markup Language, and my impression of it so far is that it seems to be the skeleton of websites. Really it makes up the basic layout of a website and once you get your head around it, it's not that hard to understand. (You just have to remember all those tags...)
Html works by using tags within angle brackets. A simple example is making a piece of text bold. You take your text, and enclose it like so:
Apricot -(our text we wish to change)
+
<b> </b> -(the bold tag we need)
=
Apricot
You might have come across this simple tag if you've participated in a discussion forum before, as they allow you to use some tags like this.
To expand on it further, here's a really simple example from w3schools.com.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
And you'll end up with something like this:
My First Heading
My first paragraph.Now that's all out of the way, here's a some links to some of the social media sites that I use:
Twitter: https://twitter.com/LordOfApricots
Deviantart: http://apricotproductions.deviantart.com/ (occupied with mostly old 'artwork' I'm afraid)
References:
www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
- date of retrieval: 14/09/2013
Subscribe to:
Comments (Atom)