Coding: Navigation Bar

We carried on using the website that we created before, and were then taught how to create a navigation bar in brackets.

Coding: Div Class

Coding can be a long process if you don’t learn some shortcut and simpler ways of creating pages. One example of this is to create ‘Div class’ which are basically themes that you can give to multiple sections. For example in this section of code you can see that I gave a class for the container, header, the information boxes, the information boxes when hovered over, images and the body. The positives of this is the fact that you can set multiple objects and sections of a page with the same class without having to much extra code. You will also be able to quickly change a setting on the style sheet that will change all the section of code that have been linked to the class. The advances are that you will only need to edit one part of the code instead of multiple, but this does mean that if you want to change just one part of the website, which is linked to the class, you will have to instead create a new class of its own. All this code is stored on the style sheet.

Coding: HTML

Using the program that allows you to write code for HTML, I created a basic site just to figure out some types of code structures and what they do. I started by just simply learning how to start a website page. I was actually able to use a template which helps when designing a page as it starts you off with the basic bits of code like the head and body sections. I then had to separate my website into columns, which ever number you choice to be the width of the columns they all have to add up to 12, so I choose for 3 columns of 4. Some other things that I placed in the body of my code was an image that I coded to expand and shrink with the size of the webpage, using the code ‘<img class=”img responsive”>’. Using a similar code I was able to make the shape oval. Adding text was rather simple, by just placing the block of text in the correct column, you just had to make sure you where placing it in the right place. The final thing was adding the item that I created in processor. Being able to copy and paste the section of code that I added from the processor code into the HTML code and changing it into JavaScript, and then placing the format section of the code into the body section of code, this would tell it where to position it, made it a lot easier.

CODING: ARRAYS

Similar to the post on variable and random coding, i used the same technique to create a code that would produce a square that when clicked would change into a different colour that i choose from a list of colours. This is done using an array. The array is first programmed where its say ‘color [] colorshape…’. This is the variable that says that the colorshape will be an array of the colour that i write in the bracket. ‘[]’ this is the sign for array. Using the random code that I describe in the previous post I used this so it would randomly chose one of the colours in my list above ‘fill(colorofshape[randomColor]);’ If you use a variable within some braces, it will only be found within the braces. If you want to use it outside the braces you will need to make sure its not in any braces so you can use it throughout.

Coding: Variables and Random

Variables basically means the name that you give values. Some examples of variables are integer which are whole numbers, similar to integers are floats which are still numbers but with decimal points, booleans, strings and arrays. The first image of coding was used to show how variables work and how to use them in code. The code for random was the second thing taught, this is a type of code that will randomly generate number. I used the random code on the size, the spacing and the colour of the circle shown in the second image. To get multiple circle on the screen i needed to use a loop function for this to happened. This started with using an integer and a while functions that will keep being repeated until i have got to the integer number of circles which was 50. Using a void mouseClicked function near the bottom i was able to clear the background and a new set of random circle was displayed.

Coding: Introduction

During my course in Digital Media Design i will be learning skill in Programming and Coding. Programming is a set of instructions which is a high level language that are then interpreted to machine code. To start to get to learn coding and figure out some of the basic statements and keywords, we were taught how to create a simple set of coding which made a circle follow your mouse. I also used code that when you click the mouse the screen would be reset, and depending on what side of the screen you clicked, the background would also change.

Coding: Vocabulary

IDE- Integrated Development Environment (Programming we are programming in)

Variable- A name we can reference

Parentheses- Brackets

Function & Methods- A set of instructions to start another instruction, methods are similar but belong to a class

Class- Stores blueprints for our programming instruction

Instant- Creating a thing

Data Type- e.g Boolean, string, integer

Loop- Repeated instructions

Complier- When code is wrote, compiler changes it for the computer to understand when you click enter

Conditional Statement- To do something if its true and something else if false

OOP- Object Orientated Programming

Camel Case- The idea of how we name all the objects e.g myVar – My First Function