Final Web blog

Once i had all my content and images in place i first focused on SEO. First i wen through and added alt text to all my images on my website with they keywords i had established in the brief. Then i added my meta tags onto all the pages, for the tittle tag on the index page i used all my keywords as i want this to be the main page that people land on for the other pages in the tittle i just called them “Contact us” and “Services”.

Tittle tags index

Meta tags

Alt text

After this i registered the business on Google Businesses and also made a google analytic’s for the website and copy the code given onto all 3 of my pages.  after this i also added google maps to the contact us page on the website with the location of the business.

Google maps code

Registering business

google maps on site

google business

google analytics

After finishing off the SEO stuff i moved onto adding the different screen size and what i wanted my font to adjust to.

The main changes i had to make to this website were adding the white background to the body to make the text more visible and the other major change was i had to take out the send us a message system as i could not get it to work properly.

ITC 2015

For our final blog this week number 14 we were asked to write about our three favourite blogging sessions. I first would just like to say I really enjoyed ITC501 it was very interesting to see all the different kinds of technology people are developing and how this will affect us in the future.

What is real? – Clare Atkins

This was my personal favourite blog all about virtual worlds and augmented reality, the reason I like this blog the most, as it was very interesting to see all the types of technology such as the Microsoft Hololens or Oculus Rift. Not only how they work but all the different uses for them I always assumed they were just going to be used for games which I thought would be a bit of a novelty, however with some of the video’s Clare showed us these can be used for a much wider use and I will be very interested to see how common these become.

Internet of Things – Todd Cochrane

This was another very interesting topic of how technology is becoming part of everyday objects. It was impressive to see the amount of devices that are being linked to the cloud to make things easier or more convenient.  I also really enjoyed seeing the 3D printer not only in action but being able to design something using Tinkercad and have your design printed out.

The Internet’s own boy-

A very eye opening documentary that I think everyone should watch. It shows how far the government are willing to go to try control the internet, and also how one person can make such a difference. Also how lucky we are to have freedom (well to a extent) on the internet if the SOPA bill had passed I can’t imagine how ridiculous controlled the internet would get it wouldn’t been what we know it as today.

I would say it was a pretty good spread of subjects covered throughout this class, if there was anything I would like to see more of is maybe a class on different paths in the IT world and watch subjects help you get where etc. probably a hard one to cover but for people like me who still aren’t too sure what part of the IT industry they would like to get into it would be useful.

Web Blog Colour

For the colour of the website the owner wanted it to have a metal look and fell to it, first for the background i used a image of stainless steel by adding the code to my CSS as showed below. Then for the header of the website i also used a metal background image with the company name postioned on top of the image using similar CSS code as i did for the body.

The menu bar i that i used from bootstrap was already the dark colours for the website that i wanted so i left these colours alone. After adding the images to the website the text became hard to read in some parts of the website, so to fix this i added a white background colour to the container, by doing this it also created a floating look when scrolling on the webpage.

Stainless Steel background CSS

Metal header background CSS

Metal header background source code

White body CSS

White body soruce code

Web Images blog

First of i started by adding my background image for my header, i first tried to make a new id and add it into the page-header div that was created when i generated my layout, however this didn’t work with the text in the header it made it disappear. i then deleted the page header div and made a new class called .banner and put in in place of the old page-header div success!

After this i added the fotorama links for the autoplay slideshow and also the source code from fotorama website. first of the slide show broke causing a stacking affect with the images, after this is realized i was missing a closing div once this was in place it worked. i then added the bottom image no problems there.

i then started uploading images to my services page, after adding this and looking at the pages i have decided to add a white background to the container area to make the text stand out as it was getting hard to read on the stainless background image. The only problem with some of the images is the resolution is low because the owner didn’t have access to the orginal photos and the ones i have used are downloaded from his original website.

Broken slideshow

Working slideshow

services page

slideshow code

adding white background

Web Content Blog

Now that i have my page layout i began modifying the content. i first started with the home page by the text then making new classes and id in css for the txt to it look the right size etc. I have decided to increase the font size on web page by about 10px on the heading as when i was using Microsoft word to make the brief sketch it looked bigger. after i was happy with the font style, size and color of the content i then added a list using the un-ordered list code <ul>. i then added the em tags to my kewords on the home page. after this was complete i added the content to services and contact page using the same classes and ids. no problems so far however i think when i get to the images i will find problems with res zing.

Home page modified content

CSS

Contact page

Services Page

Interactive Design

This week’s blog we had Todd speak to us about Interactive Design. Interactive design is all about human computer interaction. These are often things we won’t even notice when using the device, just picking it up and making it intuitive to use. As long as there’s been new technology around there’s always been people that just take one look and go nope too complicated for mean I won’t be able to use that. This is why it’s very important to consider these when designing anything where user input is needed.

We were then split into groups of three and asked to come up with our own wearable interactive device. In our group with Gradyon, Mathew and myself we came up with the Oinkband. It is a Smartwatch that connects to an APP on your Smartphone via Bluetooth. Allowing you to share location the location of any police, speed camera vans or check points you see and also be alerted when you are near one that another user has reported. Since our device was used when driving we had to think of to make it interactive for the user. So we used gesture control to flag a point when driving, and also vibrate and speaker alert when you are within 500m of the police reported location.

Affordances:

• Motion Control- make it easy to report someone because if it is difficult no one will report police.
• Colour options- more fashionable open up to a wider marker
• Vibrate & sounds- alert the user with no interaction required

Link to our story board.

https://docs.google.com/document/d/18UulmnYL15LXJ7EnljW8YeJFVLQZZfIhprtVfThlMPo/edit

Web Blog Four

For the Web host the client would like to keep his original web address www.centralengineeringnelson.co.nz as he has a lot of printer business cards etc with this on it. I do not have access to this host currently and the owner is getting in touch with last web designer. So until then I will be uploading the webhost to 000webhost. The reason I have chosen this webhost is because other than using it through the NMIT it is reliable but when I get the old host information I will be updating the website. I first logged in to my current web host account and created a new site called www.centralengineeringnelson.site90.net. I then created a new directory called central engineering and inside that another called images I then uploaded all html files and tested to make sure all links are working. I have contacted the client with the current web address so he can see where im up to and if there’s any changes he would like.

Building website

Uploading files

Web Blog Three

For my Navigation bar it was generated as part of my template using layoutit.com. I choose a js collapsing nav bar. I went for the inverted colours look as per my design brief however the nav bar had some functions such as search, a drop down menu and also had a right nav bar with another drop down menu none of these functions I needed for the website. So I deleted all the unnecessary functions from my nav bar and renamed the 3 functions Home, Services and Contact us.  I then updated the HREF links.

Nav Bar before modification.

Nav bar after modifications.

Links, also just removed # mistake.

Web Blog Two

Using file manager I created to new html files called services.html and contactus.html. I then copied the Bootstrap meta tags, js and also linking to css.css. I then used layoutit.com to generate a template for the services page as per my design brief. I also used layoutit.com to generate the contact us template but had to change it slightly from my design brief as using columns wouldn’t allow the layout I wanted. Once I had added the code from layoutit for the services and contact us page I then copied it into the html files, I then used the href links to link all the pages together through the navbar.  For the contact us page I will be setting up a message system and also and location on google maps this is will explain in the content blog.

Services page on layoutit.com

Bootstrap meta and links

Services page no content changes made.

Contact Page (can’t see bottom row until content is placed)

Web Blog One

First I started a new project through mange sites called Centralboot and created the index.html file this will be the home page. Then I created a CSS file called css.css, then i created a new folder called images and downloaded the current images from the owner’s website however, some are low quality but will find how out bad when uploading them later. I then downloaded Bootstrap and copied the files into my website folder. I then added the meta tags and js links to the index file copying the code from getbootstap.com. To generate the layout for the website I am using LayoutIt.com see photos bellow. After I was happy with the layout I copied the layout code into my index file and also linked to the CSS file. I then added the image background into the css file I also have made few modifications to the menu bar but I will talk about that in blog 3. I am leaving the column stacking to screen size for now until I have added my content as I am using a js slide show.

Downloaded untouched template

Background added, Nav modified

LayoutIt template