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.