Review

In the last 17 weeks of this class i felt like i have struggled to grasp the HTML coding whic unfortunately is a big part in creating a web site. i slowly got to grips with the CSS side which helped and made it slightly easier, But on a whole, i'm not to sure if web building is for me. However web design i really enjoyed with this project and i would like to continue with this in the future, and who knows maybe, and i say maybe one day i will grasp HTML but until then i will happily design and then pass on that to a web building whizz kid (laugh). 

My CSS coding

I found the CSS to be slightly easier to understand, and again i just copied and pasted the coding into the following six pages with small adjustments and changes to links by naming correctly the id to the id in my HTML coding.

This image is the first part of my CSS coding 

This is my second part of my CSS coding

My HTML Coding

My HTML coding was to a point, a simple one, and because all of my pages were identical i was able to copy and paste the coding into my six other pages. However i needed to change some coding links which were vital to linking all the correct pages with each other and back again.

My Design

For my design I wanted to keep it clean and neat, and simple to navigate.

I wanted to use limited colours of one or two, not so much as bright colours or pastel colours but more natural neutral colour, I find are slightly easier on the eyes when on the web/computer.

So each page is of the same layout, to keep a uniform look but also for myself with building it so that with my lack of understanding on HTML coding, that it would still be an achievable project for the time frame I have.

I wanted to keep it simple, so I added no additional icons or information, I just have the Art Design and Media logo in the top left corner and then flowing along from left to right horizontally is the navigation bar.

I kept have kept with just two colours through out the web site, black background with a white logo and white navigation bar.  

I didn't want to have a plain straight navigation bar, I felt it needed to be something different and in other web sites I noticed that shapes were a big part in navigation bars, either circles, squares or even hexagons.

I wanted to place one single image right through each page but differing from each new page.

For the home page I used an image of F block which is the heart of the art design department. I chose to put the image in black and white as it kept with my colour scheme of black and white and I felt that the image had a softness about it.

For my next page,Courses it is the same layout as the previous however the image

Changes, and I have used student work for these. I placed the text information to the right of the image so the the page would not have to be scrolled down.

My next page is timetables and calendar. This page shows the timetable for each art design and media course and in the text next to the image there is a link to the Witt website for more information on the calendars.

Student Gallery is the next page and consists of different varieties of art works from different leveled students. 

student resources is next and i continued with the black and white image, which shows one of many student computer classes. 

The What if page is a page with a variety of frequently asked questions by students, and so for this i thought id add a bit of humour and place a giant question mark in the place of one of the images.

and last is the contacts page.

Design websites I disliked

The websites i found which include other Art and Design institutes i was not fond of due to them being to busy and the use of tom much varying colours.

Design continued

some more web sites that I've enjoyed looking at and interacting with.

 This is one of my favorites, being so simple in layout the colours compliment each other 
and the navigation bar clear clean up the top colour coordinated.

 This is Aston Martins global web site, and it has been voted the best in the world for industry websites.

With web sites like this and other luxury car manufactures it is vital there website is as classy and elegant as there car to reflect and sell there top range product.

 full spread image showing there collection of sports cars.

audi homepage, again one full length image of there sports car. and they have kept the nav bar and the page boarder are similar colour to the colour of the car.

design research

For my design research, i knew exactly what inspiration i was looking for.

simple clean and neat.

as soon as i click onto a web site i don't want to be bombarded with colour upon colour and about 20 pictures and struggling to find the tiny font of the navigation bar.

I was looking for one possibly two colours then for my eyes to glide across the page to the navigation bar and maybe even see one image simple clean and crisp depending on the website of course.

For example 

Simple single image white background and simple soft font 

This web site has and image as the background with there business name in the left top corner of home page then the nav bar in the top right.

This company has chosen to have a video on there home page 

as seen by the video icon under there slogan.

Witt Art and Design website: project 2

For this project we had have to design and build the Witt Art and Design website which is an extension from the main Witt website,

As in the first project which we had to redesign and build the Evoke website which for me was a real battle not on the design aspect but rather with the building of the page, as much as i wanted to understand and learn how to build a web site, my brain wouldn't let me (laugh).

My first thought was obviously to keep it simple so that it could be achievable for what contents we had to include and also for the deadline of hand in.

But secondly for myself personally i would be more inclined to design and build a simple web site
purely because simple would make it easy to build but the look would be clean and neat and the web itself would be easy to navigate and user friendly.

Reflection on what i have learned

To be totally honest, this first half of the semester has not been the easiest, and it has been a huge challenge trying to get to grips with the much loved HTML. CSS was easier to understand but to build a web site you need to merge the two together, so whilst gritting my teeth and having a little extra tuition on the basics and the layout of HTML i became a little more at ease. My progress with building my web page has been either non existent to little but i have however grasped the concept of the whole idea.

 This was my illustrated concept design for the  new EVOKE web site but unfortunately has gotten to this stage.

Simple Menu, Videos

http://www.codeconquest.com/how-to-create-a-website-navigation-menu/

To create a menu bar you must first use the nav tag <nav> to open and then you can enter in the headings for your menu bar using the code: <a href="#"><div>HOME</div></a>. and then for then next menu title,just use the same again but instead of HOME, use the appropriated title were HOME should be.
i.e

How it Works

The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes.
If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads.
Text between the <video> and </video> tags will only display in browsers that do not support the <video> element
Multiple <source> elements can link to different video files. The browser will use the first recognized format.
http://www.w3schools.com/html/html5_video.asp

Image Optomization

Images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space. As a result, optimizing images can often yield some of the largest byte savings and performance improvements for your website: the fewer bytes the browser has to download, the less competition there is for the client's bandwidth and the faster the browser can download and render useful content on the screen.

Image optimization is both an art and science: an art because there is no one definitive answer for how best to compress an individual image, and a science because there are many well developed techniques and algorithms that can significantly reduce the size of an image. Finding the optimal settings for your image requires careful analysis along many dimensions: format capabilities, content of encoded data, quality, pixel dimensions, and more.

Optimizing Raster Images

A raster image is simply a 2-dimensional grid of individual “pixels” - e.g. a 100x100 pixel image is a sequence of 10,000 pixels. In turn, each pixel stores the “RGBA” values: (R) red channel, (G) green channel, (B) blue channel, and (A) alpha (transparency) channel.

Internally, the browser allocates 256 values (shades) for each channel, which translates to 8 bits per channel (28 = 256), and 4 bytes per pixel (4 channels x 8 bits = 32 bits = 4 bytes). As a result, if we know the dimensions of the grid we can easily calculate the filesize:
100 x 100px image is composed of 10,000 pixels
10,000 pixels x 4 bytes = 40,000 bytes


40,000 bytes / 1024 = 39 KB

39KB for a 100x100 pixel image may not seem like a big deal, but the filesize quickly explodes for larger images and makes image assets both slow and expensive to download. Thankfully, what we’ve described so far is the “uncompressed” image format. What could we do to reduce the image file size?

One simple strategy is to reduce the “bit-depth” of the image from 8 bits per channel to a smaller color palette: 8 bits per channel gives us 256 values per channel and 16,777,216 (2563) colors in total. What if we reduced the palette to 256 colors? Then we would only need 8 bits in total for the RGB channels and immediately save two bytes per pixel – that’s 50% compression savings over our original 4 bytes per pixel format!

All information and images sourced from: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

http://www.w3schools.com/html/html_images.asp

Interface Design

Interface design deals with the process of developing a method for two (or more) modules in a system to connect and communicate. These modules can apply to hardware, software or the interface between a user and a machine.^[1][2][3] An example of a user interface could include a GUI, a control panel for a nuclear power plant,^[4] or even the cockpit of an aircraft.^[5]

In systems engineering, all the inputs and outputs of a system, subsystem, and its components are often listed in an interface control document as part of the requirements of the engineering project.^[6]

The development of a user interface is a unique field. More information can be found on the subject here: User interface design

http://en.m.wikipedia.org/wiki/Interface_design

http://www.psdtex.com/smartphone-interface-design-psd.html

CSS, HTML links

CSS

Cascading Style Sheets (CSS) is astyle sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind ofXML document, including plain XML,SVG and XUL. CSS is a cornerstone specification of the web and almost all web pages use CSS style sheets to describe their presentation.[citation needed]

CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). It obviatesthose portions of markup that would specify presentation by instead providing that information in a separate file. For each relevant HTML element(identified by tags), it provides a list of formatting instructions. For example, it might say (in CSS syntax), "All heading 1 elements should be bold." Therefore, no formatting markup such as bold tags (<b></b>)is needed within the content; what is needed is simply semantic markup saying, "this text is a level 1 heading."

CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or (screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS file, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified. However if the author or the reader did not link the document to a specific style sheet the default style of the browser will be applied.

HTML links


HTML Hyperlinks (Links)

The HTML <a> tag defines a hyperlink.

A hyperlink (or link) is a word, group of words, or IMAGE that you can click on to jump to another document.

When you move the cursor over a link in a WEB PAGE, the arrow WILL turn into a little hand.

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An ACTIVE link is underlined and red

http://www.w3schools.com/html/html_links.asp

Mark up Structure and Twitter feed

Markup Structure from my understanding is like a layout plan of were certain sections of of the web page are going to be. For instance, were the header will be or were the navigation bar will be horizontal or vertical? Below is an image to show a structural markup.

Favorite Web Sites

http://www.valentinorossi.com/en/

This website is one of my favorite's not just because it's a motorbike site but the design is simple,neat and is easy to navigate around. I find the use of the dark background ideal for this page and the image also, which has had its saturation set to similar tones.


http://www.imagedzign.com/

This website is again simple and easy to navigate around with large images which slide across the page automatically. the dark grey background gives it a slight masculine feel which is also featured in the Valentino Rossi website.




http://www.thermaebathspa.com/

This website is at the other end of the spectrum as far as my favorite website designs go, the first two had dark backgrounds with two or three colour schemes, were as this website, the background is white and focuses more on the colourful photo images.

Favorite Blogs

http://www.guymartinracing.co.uk/category/blogs-by-guy-martin/

http://www.tommyracer.com/new/index.php?option=com_content&view=category&layout=blog&id=34&Itemid=427

http://www.jamieoliver.com/category/news-and-blogs/blogs/

http://www.ablogtowatch.com/

http://boutiquebydesign.com/blogging/

Social Media Intro

The term “social media” refers to the wide range of Internet-based and mobile services that allow users to participate in online exchanges, contribute user-created content, or join online communities. The kinds of Internet services commonly associated with social media (sometimes referred to as “Web 2.0”) include the following:1

Blogs. Short for “web log,” a blog is an online journal in which pages are usually displayed in reverse chronological order.2 Blogs can be hosted for free on websites such as WordPress, Tumblr and Blogger.3

Wikis. A wiki is “a collective website where any participant is allowed to modify any page or create a new page using her Web browser.”4 One well-known example is Wikipedia,5 a free online encyclopedia that makes use of wiki technology

Social bookmarking. Social bookmarking sites allow users to organize and share links to websites. Examples include reddit, StumbleUpon and Digg.6

Social network sites. These have been defined as “web-based services that allow individuals to (1) construct a public or semi-public profile within a bounded system, (2) articulate a list of other users with whom they share a connection, and (3) view and traverse their list of connections and those made by others within the system.”7Among the most popular in Canada are Facebook and LinkedIn.8

Status-update services. Also known as microblogging services, status-update services such as Twitter9 allow people to share short updates about people or events and to see updates created by others.10

Virtual world content. These sites offer game-like virtual environments in which users interact. One example is the imaginary world constructed in Second Life,11 in which users create avatars (a virtual representation of the user) that interact with others.12

Media-sharing sites. These sites allow users to post videos or photographs. Popular examples include YouTube, Pinterest and Instagram.13

These categories overlap to some degree. Twitter, for example, is a social network site as well as a status-update service. Likewise, users of the social network site Facebook can share photographs, and users of the media-sharing site Pinterest can follow other people.http://www.parl.gc.ca/content/lop/researchpublications/2010-03-e.htm

HTML Intro

What is HTML?


HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages

How the Web works

The web is a system for publishing pages of information on the internet, and for linking pages together using links.

Anyone can publish a page by uploading it to a web server. Anyone can read that page by typing its address into a web browser. This makes it very easy for people to share documents even if they are using what would otherwise be incompatible computers. In fact, that’s exactly why Tim Berners-Lee invented the World Wide Web in the early 1990s.

The web would be useful but annoying if you had to type the precise address - the URL (uniform resource locator) - for every page you wanted. Fortunately, you don’t have to. Web pages can include embedded links or ’hyperlinks’, so simply clicking the link will take you to that page. Following a trail of links is called ‘web surfing’.

History of the Web

Tim Berners-Lee invented the World Wide Web in 1989, about 20 years after the first connection was established over what is today known as the Internet. At the time, Tim was a software engineer at CERN, the large particle physics laboratory near Geneva, Switzerland. Many scientists participated in experiments at CERN for extended periods of time, then returned to their laboratories around the world. These scientists were eager to exchange data and results, but had difficulties doing so. Tim understood this need, and understood the unrealized potential of millions of computers connected together through the Internet.

Tim documented what was to become the World Wide Web with the submission of a proposal to his management at CERN, in late 1989 (see the proposal.), This proposal specified a set of technologies that would make the Internet truly accessible and useful to people. Believe it or not, Tim’s initial proposal was not immediately accepted. However, Tim persevered. By October of 1990, he had specified the three fundamental technologies that remain the foundation of today’s Web (and which you may have seen appear on parts of your Web browser):http://webfoundation.org/about/vision/history-of-the-web/