Everything I have learned in this class has been new to me.
I knew nothing about web design or tags, or anything of that nature.
This has been a huge learning curve for me, and even though I now understand the concept of coding and styles, I have much practice and effort to place within the subject.
I appreciate the time and effort to make a website interactive and decorative.
I also felt rewarded after writing code that worked and using CSS to stylize that HTML language.
Tuesday, 9 September 2014
Margins and padding
Margins and padding's are the two most commonly used properties for spacing-out elements. A margin is the space outside something, whereas padding is the space inside something.
Margins, padding and borders are all part of what’s known as the Box Model. The Box Model works like this: in the middle you have the content area (let’s say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this:
Margins, padding and borders are all part of what’s known as the Box Model. The Box Model works like this: in the middle you have the content area (let’s say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this:
Slicing
Slicing is the process of dividing a single 2D user interface composition layout, into multiple image files of the graphical user interface for one or more electronic pages.
Slicing is used in many cases where a graphic design layout must be implemented as interactive media content.
Slicing reduces work loads and computer data storage space requirements to needing only the part of a image that changes instead of the whole image. On the web, slicing breaks up one large image into many smaller ones, which reduces "page weight" or load time considerably.
We can achieve slicing within html by using the <div> tag.
Here is a example:
Slicing is used in many cases where a graphic design layout must be implemented as interactive media content.
Slicing reduces work loads and computer data storage space requirements to needing only the part of a image that changes instead of the whole image. On the web, slicing breaks up one large image into many smaller ones, which reduces "page weight" or load time considerably.
We can achieve slicing within html by using the <div> tag.
Here is a example:
<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
This will place my heading and paragraph within a div, (an invisible box) which then can be manipulated in CSS, size, height, margins.
Social Media
Social media is the social interaction among people in which they create, share or exchange information and ideas in virtual communities and networks.
Social media differ from traditional or industrial media in many ways, including quality, frequency, usability, and permanence. There are many effects that stem from internet usage. According to Nielsen, internet users continue to spend more time with social media sites than any other type of site.
Example of social media:
After registering to use the site, users may create personal profile, add other users as friends, exchange messages, post status updates and photos, and receive notifications when others update their profiles. Additionally, users may join common-interest user groups, organized by workplace, school or college, or other characteristics, and categorize their friends into lists such as "People From Work" or "Close Friends".
Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets". Registered users can read and post tweets, but unregistered users can only read them.
Pinterest is a free website. Users can upload, save, sort, and manage images known as pins and other media content (e.g., videos and images) through collections known as pinboards. Pinterest acts as a personalized media platform. Users can browse the content of others on the main page. Users can then save individual pins to one of their own boards using the "Pin It" button, with Pinboards typically organized by a central topic or theme. Users can personalize their experience with Pinterest by pinning items, creating boards, and interacting with other members. By doing so, the users "pin feed" displays unique, personalized results.
Image optimization
What is optimizing images for the web?
The images you create in programs like Photoshop and Illustrator look amazing but often the file sizes are very large. This is because the images are made in a format which makes them easier to manipulate in different ways.
With file sizes upwards of a couple of megabytes per image, if you put these files on your website it would be very slow to load.
Optimizing your images for the web means saving or compiling your images in a web friendly format depending on what the image contains.
Images hold data other than just the pixels we see on the screen. This data can add unnecessary size to the image which leads to longer load times as the user waits for the image to download.
In terms of cost versus benefit optimizing your images should be near the top of your page speed optimizations if you don't have them optimized already.
How does it work?
In simple terms optimizing your image works by removing all the unnecessary data that is saved within the image to reduce the file size of the image based on where it is being used in your website.
Optimizing images for the web can reduce your total page load size by up to 80%.
There are two forms of compression that we need to understand, Lossy and Lossless.
Images saved in a lossy format will look slightly different than the original image when uncompressed. Keep in mind that this is only visible at a very close look. Lossy compression is good for web, because images use small amount of memory, but can be sufficiently like the original image.
Images saved in lossless format retain all the information needed to produce the original image. For this reason these images carry a lot more data and in return are a much large file size.
We also can optimize images for the web by saving them as the appropriate dimensions. Resizing the image on the webpage itself using CSS is helpful but the issue is the web browser will still download the entire original file, then resize it and display it.
Can you imagine take a poster size image and using it as a thumbnail? The little 20px by 20px image would take as long to load as the original poster, when we could just be loading a 20px image the whole time.
Why is it important?
The main reason why it's so important to optimize your images is because 90% of most websites are graphics dependent and therefore there are a lot of image files. Leaving these images uncompressed and in the wrong format can drastically slow down your web page load times.
How to Optimize Your Images
Full optimization of images can be quite an art to perfect as there are such a wide variety of images you might be dealing with. Here are the most common ways to optimize your images for the web.
Reduce the white space around images - some developers use whitespace for padding which is a big no no. Crop your images to remove any whitespace around the image and use CSS to provide padding.
Use proper file formats. If you have icons, bullets or any graphics that don't have too many colours use a format such as GIF and save the file with lower amounts of colours. If you have more detailed graphics then use JPG file format to save your images and reduce the quality.
Save your images in the proper dimensions. If you are having to use HTML or CSS to resize your images, stop right there. Save the image in the desired size to reduce the file size.
To resize your images you will have to use some form of program. For basic compression you can use a simple editing program such as GIMP. For more advanced optimization you will have to save specific files in Photoshop, Illustrator or Fireworks.
Interface Design
Skeuomorphism
When coming to interface, a familiar style of design is Skeuomorphism. This makes the user interface look like real physical objects. A similar alternative definition of skeuomorph is "a physical ornament or design on an object made to resemble another material or technique". This definition is broader in scope, as it can be applied to design elements that still serve the same function as they did in a previous design.
User interface design patterns.
UI patterns are solutions to common design problems that are reaccurring.
These are some pattern categories:
Getting input.
Getting the user to input data that is tailored to the context of use.
Navigation:
The user needs to locate specific features and content and needs navigation to accomplish this.
Social:
Allows users to communicate and interact with other people online.
Schematics.
To quickly create professional schematics for your design there are mock up tools online.
This link is a great tool designed for doing just that.
https://gomockingbird.com/
These are a few images:
When coming to interface, a familiar style of design is Skeuomorphism. This makes the user interface look like real physical objects. A similar alternative definition of skeuomorph is "a physical ornament or design on an object made to resemble another material or technique". This definition is broader in scope, as it can be applied to design elements that still serve the same function as they did in a previous design.
User interface design patterns.
UI patterns are solutions to common design problems that are reaccurring.
These are some pattern categories:
Getting input.
Getting the user to input data that is tailored to the context of use.
Navigation:
The user needs to locate specific features and content and needs navigation to accomplish this.
Social:
Allows users to communicate and interact with other people online.
Schematics.
To quickly create professional schematics for your design there are mock up tools online.
This link is a great tool designed for doing just that.
https://gomockingbird.com/
These are a few images:
Html tags
A list of a few basic tags
<h1> <h2> <h3> (headings of importance)
<p> (paragraph tag)
<strong> (gives bold emphasis to a word or phrase)
<em> (gives italic to a word or pharse)
<img> (displays image)
<a> (anchor tag, used to create links)
<title> (title tag to add page name)
<div></div> (this tag is used to divide parts of your page into chunks. the div itself will be invisible and we do this to allow us to move and style that section of the page we have div'ed.)
List tags
<ul></ul> (this is an unordered list used to make bullet points)
<ol></ol> (this is a ordered list tag made to make ordered lists that are numbered or lettered
<li></li> (inside a list tag, you have to incorparate list items defined by its own <li> tag
<h1> <h2> <h3> (headings of importance)
<p> (paragraph tag)
<strong> (gives bold emphasis to a word or phrase)
<em> (gives italic to a word or pharse)
<img> (displays image)
<a> (anchor tag, used to create links)
<title> (title tag to add page name)
<div></div> (this tag is used to divide parts of your page into chunks. the div itself will be invisible and we do this to allow us to move and style that section of the page we have div'ed.)
List tags
<ul></ul> (this is an unordered list used to make bullet points)
<ol></ol> (this is a ordered list tag made to make ordered lists that are numbered or lettered
<li></li> (inside a list tag, you have to incorparate list items defined by its own <li> tag
Introduction to CSS
In our last class session we discussed moving from html to CSS. CSS stands for Cascading Style Sheets and is another form of code that in a way, has cascading code flowing from top to bottom, where children elements are nested within parent elements.We use CSS to manipulate the HTML markup language with a style sheet. In this context, a style refers to attributes such as Font, Position, Colour and Decoration.
Things we can achieve in CSS:
Font settings and size
Width and height of objects
Margins
Position
Colour
Gradients, drop shadows, basic special effects.
To link your HTML with CSS you have to place a code in the <head> section of the document.
<link href="css/mainstyles.css" rel="stlyesheet"
type="text/css />
The red section is where you will enter the path of your .css file. As you type, a 'browse' window will appear, allowing you to quickly select the file itself.
In order to change elements on the page you need to use a specific selector. Selectors are patterns used to select the elements you want to style.
Some options for this are
Natural Selectors (such as <h2>, <p> etc)
ID tags
Classes
If we used a natural selector to to the change the font size it would look like this-
h1 {
font-size: 40px;
}
The id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the id selector when you want to find a single, unique element. when writing this out you have to place a hash tag followed by the id of the element.
#header {
width: 960px;
Height: 200px;
background-color: #0c3;
The class selector finds elements with the specific class.
To find elements with a specific class, write a full stop, followed by the name of the class:
.centre {
text-align: centre;
colour: red;
}
Things we can achieve in CSS:
Font settings and size
Width and height of objects
Margins
Position
Colour
Gradients, drop shadows, basic special effects.
To link your HTML with CSS you have to place a code in the <head> section of the document.
<link href="css/mainstyles.css" rel="stlyesheet"
type="text/css />
The red section is where you will enter the path of your .css file. As you type, a 'browse' window will appear, allowing you to quickly select the file itself.
In order to change elements on the page you need to use a specific selector. Selectors are patterns used to select the elements you want to style.
Some options for this are
Natural Selectors (such as <h2>, <p> etc)
ID tags
Classes
If we used a natural selector to to the change the font size it would look like this-
h1 {
font-size: 40px;
}
The id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the id selector when you want to find a single, unique element. when writing this out you have to place a hash tag followed by the id of the element.
#header {
width: 960px;
Height: 200px;
background-color: #0c3;
The class selector finds elements with the specific class.
To find elements with a specific class, write a full stop, followed by the name of the class:
.centre {
text-align: centre;
colour: red;
}
Subscribe to:
Comments (Atom)