Tuesday, 9 September 2014

Websites i like

www.theoatmeal.com

 I got into this website when i was like 13 or something, funny, quirky cool comics, the artist has designed the whole of his site by himself.


http://www.boredpanda.org

I like this site good for inspiration as well, its very simply laid out and you can search things by whats trending, popular or latest. and also there category e.g photography, design, drawing etc


http://www.chesscademy.com/learn 

very cool if you want to learn how play chess, i like this because its easy to navigate and has a real modern style for a chess playing site :)  very minimalist, which most websites are going for that look.

http://www.mymodernmet.com/ 

awesome for some design, photography etc inspiration.


http://www.zefrank.com/scribbler/scribblertoo/

this is an awesome tool that lets you scribble and it looks rally awesome you should have a go !!!!!


What i have learned

I now know how code a basic website with HTML and CSS, how to embed video, add photos, change colours, font, sizes, laying out each component, how to use divs, lists, how to use margins, padding, make navigation bars, add links. I now know a lot more than i did at the start and will be able to successfully create websites for clients and myself, its just a lot of common sense and researching new codes and syntax's, when i come to a error i don't know how to get around.

Friday, 5 September 2014

Simple menu

To create a navigation bar you need an unordered list, each list item with a link to the page and a title, like this
<ul>
<li> <a href="about.html"> About </a> </li>
<li> <a href="linkhere"> Products </a> </li>
<li> <a href="linkhere"> Buy</a> </li>
<li> <a href="linkhere"> Competitions</a> </li>
</ul>
My menu bar
navber css and html

Thursday, 4 September 2014

My Evoke Website


My Evoke Website with the mark up structure
My evoke website div mapping

My HTML code for home pagehtml with color coded
My CSS code
CSS color coded
My about page HTML
about page html
My website running Home page website running home page
About page running
evoke about page running

Thursday, 28 August 2014

Optimize images

You need to optimize your images to save on download speed and loading time of a page, images can take up most of the time to load the page.  a good size is 72pi any more and the file is too big and high quality which a person could take print and use as their own,  dimensions of the photo a good size is 1024 x768 or 1280 x 1024px is a good size uploading to Facebook, twitter, and forums. But for your own websites you'll need to make the image the same size as it will be on the screen. For example if you want to put an image on the banner and the banner is 960x200px that's what you would make your image.

Monday, 25 August 2014

Interface Design

A good process for creating a website

1) Research what purpose the website has? target market? what is the desired functionality of this site?
2) Brainstorm different ideas for the site, collect inspiration and complete competitor research
3) Sketch some concept ideas for the site
4) Go through your concepts and decide which ones you can take further on the computer
5) Make sure all content is organized
6) Make sure you have enough consultations with the client and get their input
7) maybe use template designs, make the website consistent

Standard Structures and layouts

Generally websites have similar layout with a banner, navigation bar and the content under it and at the bottom more navigation stuff, certain styles of structures fit different website, a blog will have a different layout compared to a business website or a membership website, this is the general layout

Header this is usually at the top, this contains the title of the page and logo, this is to let people know what the website is about and who own it.

Navigation bar that goes across the page or down the side, it can also be part of the header this lets people go to each page that is linked to the bar.

Main content column which generally contains the main content of the page.

Side bars that have content that is generally relative to the content on the page.

Footer it goes across the bottom of the page and has information like copyright, contact details, links on the site.

Skeuomorphism - to make the GUI look like a real physical objects, like a sticky note on the computer, when u make a new note it will pull off like real sticky note.

UI Patterns - to create an easy interface for people to use the page, quickly and efficiently. for example on the website 9gag.com each picture is on the same page so you can just scroll instead of clicking into each thumbnail like some pages.

Mock up software - this software is so you can quickly and efficiently come up with a different concepts for your website, I had a look at the sites given in the brief and decided to sketch my idea instead, as I don't have internet at home and you can't install stuff on the school computers, when I get my new laptop I will look into doing this further

Inspiration - you need this to create awesome and intellectual designs.

Design principles - you still need to incorporate design principles for example line, shape, space, value,color, texture, unity, harmony, balance, rhythm, contrast and dominance.
My evoke website design
My new Evoke Website design

Tuesday, 12 August 2014

CSS

CSS stands for Cascading Style Sheets, it is very simple to code.. you must first label the item that will have the style applied this is in the HTML for example
<div id="box">
</div>
then you must write the rules that define the style in the CSS file for example
to create a box you need a background colour, width and height
#box {
background-color:#000000;
Width:400px;
Height:300px;
}
But before this will work you need to link you CSS file to your HTML with a tag like this
<link href="Location of your CSS File" rel="stylesheet" type="text/class" />
so lets break this down and see exactly what each component does
The #box this component lets the program know which part of the HTML you want to change
I am just using the word box as an example you can call your id eggsontoast or whatever you feel is necessary, everything you label with that id will change if you code it in CSS. But if you want to label  more than one thing with the same id use class instead of id e.g
and you would put this each place you want italics in a paragraph
  but you would need to give it the italic attribute in the CSS file of course)
The next part {} these are used in CSS to open and close a tags CSS uses this instead of <>
Now you add an attribute you want to change for example the background, now for a box to be box you need a width, height and background color, or it won't work
For each attribute you enter you need this : after the name of the attribute and a ; after the attribute trait for it to work.
For example to create a yellow box
First open up a new HTML and new CSS and link them together
linked css and html
Then create a Div in the HTML
html with div
Now go to your CSS file and type your style, to create a box you will need the background colour, height and width
css with box
open the HTML file with a browser and see what happens (don't forget to save both the CSS and HTML)
html running
There are endless possibilities you can achieve with the CSS, it's a lot easier to make and layout a website with this instead of doing this just in HTML.

Monday, 11 August 2014

Mark up Structures

The point of mark up structures is to create an easy template to work with and be easy to set out the tags
Generally websites have a structure like this
Header this is usually at the top, this contains the title of the page and logo, this is to let people know what the website is about and who own it.
navigation bar that goes across the page or down the side, it can also be part of the header this lets people go to each page that is linked to the bar
Main content column which generally contains the main content of the page.
side bars that have content that is generally relative to the content on the page.
Footer it goes across the bottom of the page and has information like copyright, contact details, links on the site.
like this for example
This website can be broken into 6 different parts all which will be divided into there own section with the
tag

The 6 different sections are the header, navigation menu, main content, two different sidebars and the footer, when we highlight each part of the website we can see each part and the space it takes up
 
This makes it simple to understand how many different sections you need for the website.
Our task to practice laying out mark up structures with the example website.

Thursday, 7 August 2014

Twitter Feed

Will decided that we wouldn't have to make a twitter as he does not like it, I completely agree with and am relieved that we don't have to.

Wednesday, 6 August 2014

Blog set up

Blogging Set-up
I wanted to have a navigation bar to link each of my blogs on blogger together so I can keep posts organized, I created my own navigation bar, deciding on doing 5 blogs
1 Sarah's Design Co.
2 Collaborative Projects
3 Web Design
4 New Media
5 Studio Practice
In the navigation each one links to the blog associated with the title,
I found a basic template and copied this and added my own font colour and size, links, titles and highlighted text, this was a lot of trial and error, once I got the main part perfect I copied the whole HTML and pasted it in each of my blogs HTML editors
<div id='navigation'>
<a href='http://sarahsartandesign.blogspot.co.nz/'> <font color='#FFFFFF' size='4' style='BACKGROUND-COLOR:#900000'> HOME</font> </a>
<a href='http://collabprojectsbysarah.blogspot.co.nz/'><font color='#FFFFFF' size='4' style='BACKGROUND-COLOR:#900000'>COLLABORATIVE PROJECTS</font></a>
<a href='http://webmediabysarahbishop.blogspot.co.nz/'><font color='#FFFFFF' size='4' style='BACKGROUND-COLOR:#900000'>WEB MEDIA</font></a>
<a href='http://newmediabysarah.blogspot.co.nz/'><font color='#FFFFFF' size='4' style='BACKGROUND-COLOR:#900000'> NEW MEDIA</font></a>
<a href='http://studiopracbysarah.blogspot.co.nz/'><font color='#FFFFFF' size='4' style='BACKGROUND-COLOR:#900000'>STUDIO PRACTICE</font></a>
</div>
Use this if you want to but just change the links and names and colours etc
I decided on using word press because it's a lot more professional than blogger, once i got the hang of it.

HTML intro

HTML Intro
HTML the code that all websites are written in. the code must have a start and an end for example
<p> This is my paragraph </p>
The letters in the brackets are the "mark ups" this one is using p which is to create a paragraph with the text in the middle
Creating my first HTML Website
The tags we learned
<p>paragraph tag</p>

<h1,2,3,4> each number gets smaller and smaller
< a href="www.facebook.com">this is a link to Facebook</a>
<strong>this text will be bold</strong>
<em>this text will be italic</em>
<img src="where the image is found" alt="alternative if image can't load" title="name of image" />
I Also found out how to change the background colour and put a line under the title
In the body tag
<body bgcolor=00000>
and the line under the title
<hr width=noshade size=3 color=black>
Code for First HTML website
Screen shot of website running

Week 2 in action
My website with given text running
Week 2 Code
HTML for the running website above
first webpage open
My first Website running

HTML for website above
HTML for website above

How the web works

The web works in ways unimaginable to any normal person, not many people ask the question how does that work? it's just part of everyday life. Until this Web Media class I have never wondered how the web works or what it was like before the everyday broadband or dial-up.
Websites are just a bunch of files that go from one computer to another. Although websites contain just the normal things you have on your computers likes songs, videos, text, photos etc. There is one thing that all websites have in common, they are written in a code called HTML. Your web browser is designed to take all the code and stitch it all together to create the webpage you can see on the screen. Because it's all files where is it stored? on data servers, from your computer when you type in an address or domain name the computer searches for the server that has that website stored on it. Your computer then pulls the files and HTML codes and your browsers puts it together opening up the page you can view and use.
Good quick explanation :) with pretty lady ;)
https://www.youtube.com/watch?v=D8c4JZW73cM

Wednesday, 23 July 2014

History of the web

The web a massive space with everything you want to know right at your finger tips. But how did that all start where did it come from???
Tim Berners-Lee create the World Wide Web in 1989. 20 years after the first connection was made. Scientists had trouble exchanging data from around the world,  Tim took this need and took the potential of millions of computers connected together through the internet. Tim created a proposal that specified some technology that would make the internet useful to people. The proposal was not accepted, but Tim persevered. In October of 1990 Tim has created 3 fundamental things which today's Web is still the foundation of.
HTML: HyperText Markup Language. The publishing format for the Web, including the ability to format documents and link to other documents and resources.
URI: Uniform Resource Identifier. A kind of “address” that is unique to each resource on the Web.
HTTP: Hypertext Transfer Protocol. Allows for the retrieval of linked resources from across the Web.
Tim wrote the first Web page browser “WorldWideWeb” also the first Web server “httpd“.  In 1991 people outside of the CERN (where Tim worked) started to commute in this technology. In 1993 CERN said that the world-wide web technology could be available for anyone to use.
The web has changed the world, it is the most powerful kid of communication that the world has ever known. The web changing the way we teach, learn, buy, sell, inform, get informed, agree, disagree, share, meet people and tackling problems.
Tim realized to reach the [potential that the internet has it must become global standards. and be the same on each computer around the world. In 2005 Tim started the Web Science Trust (WST). This  is building an international, multidisciplinary research community to examine the World Wide Web as “humanity connected by technology”. WST has computer scientists, sociologists, mathematicians, policy experts, entrepreneurs, decision makers and many others from around the world. this is to try to understand the web today and how to develop and make it better.
Awesome website go have a look http://www.evolutionoftheweb.com/

Tuesday, 22 July 2014

Blogs

Find 10 examples of blogs that you like
10 examples of blogs
1 http://photoscribbles365.blogspot.co.nz/?expref=next-blog
This blog by Katherine Heistand "a year of photo scribbles", The Purpose of this blog is for Katherine to write one story each day no more than 365 words, I chose this blog because I like the idea of it. the font for the title has been chosen well due to it looking as though it has been scribbled. the background being books goes with the theme as each post is a story in itself. the colours are neutral and can all be on the same colour palette.
2 http://www.lightstalking.com/
Light Stalking an awesome blog created to give photographers a chance to get their name out, the blog also has helpful tips on photographing. This website has a nice clean feeling to it, being minimalist and simple. But what i like is the posts and content on it great tips and some good photography always inspiring =D
3 http://bryannachapeskie.com
This blog created by a young artist designer and photographer Bryanna Chapesike, the page features different artists and designers she admires. Plus her own work of course. I like that the home page is a series of thumb nails that each open a new page, this is good for convenience you can just click on what you want to see. once you have opened a page you can click the next button and it will just go straight to the next post instead of having to back track and waste the precious (very limited) internet you get at course.
4 http://wronghands1.wordpress.com/
John Atkinson cartoonist call himself wrong hands, I like that the background is a series of doodles that john has formed into a collage. This page is set out simply and efficient so you can navigate through the pages easily.
5 http://theoatmeal.com/blog
This page by Matthew Inman has funny comics and quizzes, it is more a website site then a blog. But i enjoy reading the comics so much I'm adding it to the blog list. The site was completely written, drawn, and coded by Matthew. Nice and simply laid out to show the best quizzes and comics on the first page.
6 http://www.visualnews.com/
This pages purpose is to give readers new and interesting articles, Photographs and facts. I like how the colours are simply black and red.
7 http://9gag.com/
Not that this is technically a blog but it is like a blog, you can scroll down through the pictures on a continuous roll. The purpose of this page is for anybody to upload and share funny pictures, videos and gifs. Scrolling is a good idea because everybody has an individual sense of humor so if you find something not funny you can just keep scrolling and it hasn't wasted your time and internet as if you were to skip the image on a site where all images are on different pages
8 http://www.razorsocial.com/blog/
This pages purpose to give advice about social media and how to use all the social media technology like Facebook, twitter etc. I like the idea of this website it has a lot of good in site for people who don't know how to create there so-called 'profile'
9 http://www.lifehacker.com.au/
This blog was created to help people hack life with simple yet awesome little tricks. I like this purely because of the content.
10 http://lifeawesomeblog.com/
This blogs simple purpose is for a photographer to speak her mind and let the world know about her life. I like how she has laid her page out with the title at the top and a picture bar below before you get to her posts.