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/
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 doing a word press as well because it's a lot more professional than blogger, once i got the hang of it.
For Next Class
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 insite 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.
Post 2 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
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
The tags we learned
<p>paragraph tag</p>
<h1,2,3,4> choose a number each one gets smaller as the number gets higher
< 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
My Sample Website with the text given
- HTML for the running website above
- My first Website running
- HTML for website above
Social Media, a way for which people communicate world-wide with everything they do from taking photos of themselves to their pet guinea pig swimming. These sites make it easy for everyone to contact their friends, family and even people they have not met before from one place on earth to another place pretty much instantly instead of sending some snail mail. We
Post 3 - Mark-up Structure
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 example was sourced from http://www.w3.org/wiki/HTML_structural_elements
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.
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.
Post 4 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
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
Then create a Div in the HTML
Now go to your CSS file and type your style, to create a box you will need the background colour, height and width
open the HTML file with a browser and see what happens (don't forget to save both the CSS and HTML)
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.
HTML links
you can put links into your HTML by using this syntax <a href="linkhere"> </a>
and to link a CSS style to your HTML you use this kind of link < a href="location of style" rel="stylesheet" type="text/css" />
Post 5 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
Theory
Standard Structures and layoutsGenerally 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
Post 6 Image Optimization
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 thats what you would make your image.
My Evoke Website with the mark up structure
My HTML code for home page
My CSS code
My website running Home page
About page running
Post 7 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
Embedded Videos ???????
Post 8 Reflection on what I have learned
No comments:
Post a Comment