Essay One – Microsoft Hololens VS Google Glasses

In this post I will compare and contrast both google glasses and the hololens, to discover any faults in Microsofts product in relation to another device that is use for a very similar purpose.

I will compare the design, and functionality of both products to try and create a greater understanding of any flaws within the hololenses design.

Design

---

“Google Glass was designed to be as unobtrusive as a pair of regular glasses. The idea was that you would be comfortable wearing the headset all day.

Microsoft HoloLens isn’t aiming for that at all. It’s a computer of sorts, designed to be used in a relatively fixed location for more intensive set tasks. It’s the laptop to Google Glass’s smartphone.”

This indicates to me that even though google glasses, and the hololens are fairly similar in some aspects, in relation to there functionality they are both designed for different purposes in terms of use, the hololens can be put into the same category as a desktop computer or a laptop because it is made to be used in doors, where as google glasses light weight design and applications are designed to be used for when the user is on the move.

Which sort of describes why the hololens is designed to be a bit bigger.

Functionality

---

The hololens in comparrison the google glasses grants a lot more control to the user, in relation to how they can react with the holograms. The Hololens uses speach recognition, and hand gestures to allow the user to manipulate content, where as Google Glasses only uses voice recognition.

Again this shows how limited

Here’s and excerpt taken from: Trustedreviews

 

Essay One – Average Time Spent On a Smart Phone

In this post I will look into the average time spent on a mobile or tablet device in relation to the use of applications. This piece of research will allow me to understand exactly, how this may effect the user of a hololens, mainly because the device is application driven.

 

 

Since the year 2011 the time spent on applications on either smartphone and tablet, has slowly risen and in the modern day it is estimated that the average user spends.

2016

The Average time spent using an application on either tablet or mobile device, is  3 hours and 15 minutes.

2017

It is said that by the year 2017 that this number will rise, but not by much. It is estimated by the year 2017 the average user will spend up-to  3 hours and 23 minutes per day using a mobile or tablet application.

If a user was to spend this much time each day, using applications on the Microsoft hololens it is pretty self evident that this could have some terrible on affects on the user.

Resousource: EMarketer

ESSAY ONE – Microsoft Hololens Problems?

After doing some research into the Microsoft Hololens I discovered that there are a few big problems with the device.

Number One – The Size Of The Device

One of the first things I noticed when I first saw the Microsoft Hololens, was the shear size of the thing. One of the greatest things about mobile devices, and tablets you have instant access to the applications, and very easy to use, on the go when you need to use these applications it is so much easier to just grab a small device out of your pocket and have a look at the different apps, instead of sticking a large head set on to see what the weather is going to be like tomorrow.

Also people have said, that when using the device after a while it has become very uncomfortable and have had to remove the head set even when they have been right in the middle of a game or scanning through a social network, people have said that it becomes unbearable to use.

Also one of the head competitors of this device would be ‘Google Glasses’, and in comparison to the Hololens the google glasses are fairly light weight, and may not be as iritating to carry around, and wear as the hololens may be.

Number Two – Restriction to Your View

Another thing that I have discovered after reading more about the Hololens, is that fact that the viewable area through the glass is very restricted, meaning that what the user can actually see through the glasses is very limited, which in turn limits how immersive the whole experience can be. This also means that the visuals that are implemented into the real world, are smaller meaning that the visual display may not be as amazing as it might be from an oculus rift which places you into a virtual world, instead of just implementing one into the real world.

Number Three – Dilute User Perception Of Reality

The dilusion of a users perception of reality has been a big talking point for centuries in relation to virtual reality. Theories such as ‘Hyper Reality’ argue that these types of devices, over shadow a users perception of the real world and the virtual world.

I believe that the use of a hololens falls under this category, because not only does it place the user in the realm of virtual reality but this virtual content also gets mixed in with the real world, and I believe that this could have detrimental effects between the user and there connection with whats really there and what isn’t, thinking about how much time a user spends on there phone using applications is a lot of time, but then think about how this could effect the use of a hololens? people could spend hours and hours a day living within this realm of real and not real, and could have some deep phycological effects on the user.

Essay One: Understanding the Microsoft Hololens

The Microsoft Hololens is a ground breaking piece of technology, which will pave the way of future developments of technology. It has created a new way we interact with not only the digital world, but also how we interact as people.

The Hololens is a head mounted display, that implements virtual objects into the real space that a user can see in front of them. These holograms interact with there surroundings, and can be manipulated via the user. Such as the user can create a virtual television screen, and then place it onto a wall.

The user can also select whilst using the hololens which areas of there surroundings they want the holograms to interact with, take for example this video, it allows the user to select the areas of the room that they want the holograms to interact with, and then the hololens makes a map allowing it to understand its surroundings :

This allows the Hololens to:

• Implement sound at different areas of the head set, depending on the areas that have been selected for it to interact with.
• Place holograms to interact with the users surroundings.

This allows for the user to create an environment within there home space, making the environment blend in with virtual objects, creating a level of immersion. The Hololens has opened new doors in relation to how we work, and how we connect with people. As it can bee seen within this image, a person using the Microsoft Hololens as they work.

It shows a person working on the body of a motorbike, and using the Hololens to present a 3d holographic aid that allows the person working on the bike to have a better visual understanding of how her work on the screen will look in the real world. In comparison to the oculus rift, which only puts you within a virtual reality, the hololens mixes virtual elements with real world elements, which it can be argued that this is a much safer way of using virtual reality because the user can actually see physical objects and know there surroundings rather than when using an oculus rift, a user could lean on something that isn’t physically there and fall over, so in that sense its a much safer way of using virtual reality.

 

 

 

Microsoft Hololens Official Website:  Microsoft Hololens

Introduction: Y2:S2 Technologies, Platforms & UX

 

For this project in ‘Technology’s, Platforms & UX’ we have been asked to write two different essays, for the first essay we have to critically analyse and evaluate the development of a future technology, it has been left up-to us to choose what technology we analyse within this essay.

Essay One Concept: Microsoft Hololens

I decided for the first essay I will be writing about a fairly recent technology that has only come into existence within recent history. The Microsoft Hololens was introduce back in April 2015. This product works via using virtual reality, similar to other headsets such as the ‘oculus rift’ and other virtual reality product.

Only the Hololens can be argued to work in a similar way to other devices that we use today, such as tablet’s and mobiles to view the weather and other applications, only the Hololens projects these as virtual objects that the user can interact with in more of an immersive way.

“Where your digital world,
is blended with your real world”

I beleive this product will be a very good talking point for my essay, which will probably have some good arguments and resources arguing for and against this product. as you can see within the first section of this video, all of the different applications such as:

• Weather Apps
• Google Maps
• Entertainment Apps (Youtube, Games)

Through the Hololens can now be implemented into the real world, and this I believe is probably some of the most ground breaking new technology in relation to the future of web development.

 

---

 

Essay Two Concept: Hull College New Media Website

In the second essay we have been asked to choose a technology or service, that we have believe can be improved, and write an essay alongside diagrams and designs and details that argue in favour of your choices as re developing this service or technology.

After using the Hull New Media website for the last two years, I believe that this is in need of an upgrade, even though it does its job to an extent I believe that it is in need of re development and improvements. Considering this website is for the students working within the new media department of Hull College, I believe that it is incredibly out dated and is in need of re development with a new look, and a better system for how everything operates.

 

Self Initiated: Java Script (Off Canvas Navigation)

For further implementation of java script into the IVY Infant Clothier website, I added an off canvas navigation with animation. After doing some research into the off canvas navigation I decided to go forth and add one to the website, mainly because it is in within modern web trends, and is also more user friendly on touch screen devices such as smart phones and tablets, and also saves room on the screen.

HTML

Here is the HTML code for the off canvas navigation, just the same as the sticky navigation the off canvas must be outside the main container of the website, mainly because this one needs to stick  to the screen as well.

There are two main containers within this process of using an off canvas menu:

• Container for the menu (menu-wrap)
  The main container which includes all of the links to the pages, and is the section that slides out once the ‘ham burger button’ is activated.
• Container to wrap all of the content together
  The container which wraps around the site, but is hidden until the button is selected. this puts an overlay over the full page, and allows for the menu to scroll freely within this container.

And then underneath the code that creates the actual menu, is the code for the close and open buttons of the off canvas, these are very important allowing the user to open and close the actual menu.

CSS

Here is the CSS for the off canvas menu itself, (the section that appears once the ham burger button is activated), making sure that I had implemented the correct ‘z-index’ so that the menu move forward in front of the rest of the content, and then setting the position to ‘fixed’ to that the menu scrolls with the user, as they go down the page.

Also implementing the correct ‘web-kit’ so that this function works across each different browser, I also set the height to ‘100%’ so that this menu fits the height of each device screen that is used on.

JAVA SCRIPT

Here is a gif of the off-canvas navigation working:

Self Initiated: Java Script “Sticky Navigation”

One of the key learning curves for this project was the use of ‘Java script’, this is an area I am very interested in, and wanted to implement this into the ‘IVY Infant Clothier’ website. One thing I wanted to do which is discussed within the content plan, is that I wanted to create a sticky navigation that faded in when scrolling down, and then faded back out when scrolling back up the page.

I began by creating a secondary navigation, separate from the one located on the top of the hero section. This secondary navigation had to be separate from the main wrapper that goes around the full website, mainly because it may conflict with the css rules implemented for the sticky nav.

HTML

As you can see in this code taken from the ‘index.html’ file, that this navigation is set within 1 container named ‘main-nav’, and inside the container are standard anchor elements containing the links for each page. And also includes a smaller ‘png’ file of the main logo of IVY Infant Clothier, and then also a div which contains the full navigation but is only used for the Foundation ‘show-for-large’ attribute, which only makes this navigation appear on large screens.

Notice on the end of this containing div is another attribute titled ‘hideme’, this attribute is linked into a java script file which allows for this container, to fade.

CSS

• .main-nav-scrolled
  Here is the CSS code that has styled the navigation, notice on the selector ‘.main-nav-scrolled’ I have assigned the div as ‘position: fixed;’ this means that on scroll the navigation will stick to the screen.
• .main-nav
  I have assigned for this div, considering its the main container that goes around the navigation a ‘z-index’ of 9000 which allows the navigation to move forward in front of the other content on the page.

Java Script

Here is the java script file for the sticky navigation, as you can see on the bottom section the container ‘main-nav’ is selected in two separate sections, one has a rule that say’s ‘.fadein’ and the other ‘.fadeout’, this basically means that on scroll ‘main-nav’ fades in and out. Above that section you can change when the nav fades in, dependent on the amount of pixels entered into the javascript. You can have it so when the user scrolls, it can take longer to fade in dependent on how many pixels the user has scrolled.

Here is a gif demonstrating the sticky navigation working:

Notice how it fades in when the user scrolls down, and then fades back out when the user gets back to the top of the page.

(This navigation will only be used on large screens)

 

Self Initiated: Implementing Video Background

Now that I had created a structure for my website, I decided to look into implementing the video background to my website. One of the main things I wanted to do with this background, is make it full screen for when the user first enters into the website so it engulfs the screen of the users device, and also wanted the video background to stick the screen and follow the user all the way down to the footer.

First of all I had to implement my video into the ‘index.html’ file, making sure that the video was not contained within the main container that wraps itself around the entirety of the website, this stops any css rules applied to the video container to conflict with the main wrappers css rules.

HTML

Here is the code for the video, taken from the ‘index.html’ file:

This piece of code is made up of two different containers, ‘videobackground’ and ‘fullscreen-bg’, within both of these containers is the actual video taken from the vids folder within the file tree.

• videobackground container
  This container will allow for the video to be fixed to the screen, and will also set the height and width through css.
• fullscreen-bg
  this is the container is linked directly to the video, and it will allow for the css to make the video fill the outer container of ‘videobackground’.

CSS

Then through the css the video is set to 100% of the screen size it is being viewed on, and also ‘web-kit’ is added to the css code, to make the video fit the same across each different browser.

Here is a gif of my video background working on desktop:

 

 

Does it work?

After testing the video background a cross the browsers it worked, it was responsive and also fixed to the screen. I then went onto test the video background on a tablet device, and noticed that the video background did not work.

And later discovered that the ‘autoplay’ attribute inserted into the html tag for the video, is not supported on tablet or mobile, making the video not work. I looked into different techniques of how I could get the video to work cross device, but there is no fix for this.

I later discovered that you can set a poster image to replace the video on tablet or mobile, but this could also be replaced with a gif which would still give off the effect of the video.

 

Self Initiated: Start Of Development

Now that I had a better understanding of a ‘frame work’ works, I decided to begin development of the website. First of all I needed a domain for IVY Infant Clothier, so I went onto my domain hosting website ‘Godaddy’.

Luckily the domain I wanted was free, so I managed to get

http://www.ivyinfantclothier.com

I also purchased 5 years worth of use, because this website has a long shelf life and is a product that will be used for a long time, here is a screenshot from my cpanel of the domain:

---

 

 Start Of Development

To begin with I first implemented the foundation documents into the file tree of my website, and put the files up onto the server. Here is a screenshot of my file tree:

Containing all of my foundation documents, including folders for:

• pics
  Including any pictures such as (logos, buttons, ect.)
• Dresspics
  Including all of the pictures of Louisa’s dresses
• Icons
  Including all of the icons such as social networking icons
• Vids
  Includes my hero video
• Webfonts
  Includes my purchased fonts, with the licensing I purchased with them

It is good practice to keep your files organised and labeled, it makes it easier when trying to find files you need to edit or implement into your website. Now that I had my file structure in place it was time to start implementing the frame work such as the rows and columns into my ‘index.html’ file.

First of all I had to link all of my documents within the file tree, into the head of my index file, such as the foundation documents and any other files such as style sheets.

My next step was to begin creating the structure of the website, implementing containers using relevant names for the classes, for each sections of the website. Once I had done this I then went onto working on my main body, and started adding my rows of columns for the pictures of the new in section.

I had to make sure that all of my images where of the correct file format ‘png’ to help with loading time, and also that all of the images where of the same size. Once I had done this I began entering the images into the columns, and setting the amount of columns each image would take up in each row, in this case I set the column sizes to Large 4, this means that for each row, there will be three images each image is assigned the large 4, because only 12 columns can go into each row.

So these columns I have assigned in the screen shot only show on large screens, so my next step was to copy and paste this section and implement it bellow:

These are the rows for medium screens only ‘tablet devices’, and notice I have set the size of the columns of each picture to medium-6 this means that in each row there are only two images, changing the structure of the layout of images. I then carried out the same process for small screens ‘smart phone’.

When the screen is downsized from large to small the content is now responsive, and flows with the resize of screen, here is a gif I created showing how the images respond to the size of the screen and change in structure:

 

Self Initiated: Using A Frame Work

One of the key learning curves for me, was to learn how to use a frame work and then develope a website using a frame work. Before delving into this section, I believe it is key that I explain exactly what a frame work is. 

“A framework is a standardized set of concepts, practices and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature.”

a frame work is a package of different files such as (html, css, javascript) this files create the foundations of a website, allowing a web designer to use them as a structure for there website.

The use of a frame work supports the development of a website, and cover different aspects that make a website, making it easier for your website to be:

• Respond to different device screen sizes
• Animations for buttons, and other areas
• Reusable code, and shortcuts

 

Resource: A WWW ARDS

Now that I had a great understanding of what a frame work does, it was now time for me to begin looking into different frame works, and then playing around with them to gain an understanding of how the code functions.

After looking through different frame works, I came to the conclusion that ‘Foundation Zurb’ is perfect for exactly what I want to do with this website. One of the first things I did before actually implementing a frame work into the website, I decided to have a little play around with the code, and watch some tutorial’s to develop an understanding of how to use this frame work. First of all I went onto the Foundation Zurb website, and downloaded the documents.

Once I had downloaded the documents, I had a look in the folder to see what files where contained inside.

Within the folder are two different folders, and a file:

• CSS Folder
  Containing the style sheets for the framework, including the ‘app.css’ which is the only style sheet that should be edited via the developer, this file allows the developer to over ride elements of the other two foundation style sheets.
• JS Folder
  This folder includes all of the javascript, again with an ‘app.js’ file, allowing the developer to add further javascript to the framework.
• Index.html
  This is the html file which is the website itself, and is connected to both the css files and the java script files.

(These files must be contained within your websites files tree)

To Further inspect I opened up the html file in a browser to see exactly what all of these files together created.

Here is what comes up when you open the file, giving an explanation of all of the different things you can achieve via using this frame work, such as the buttons and the creation of forms.

I then went onto opening up the file within dream weaver to have a closer look at the code, to see how this all works.

Within the actual file, you can see from this screen shot that each section of the website is built up of:

• Rows
  The row is a div that goes horizontal across the website, and contains the columns.
• Columns
  The column is a div that goes vertical on the website, keeping in mind only 12 columns are permitted to be used within a row. The content you want to enter into a row, goes within a column.

Here’s a closer look, of a column:

As you can see within each column, are attributes that set the size of the column:

• Large
  for large screen such as desktop or laptop devices
• Medium
  for tablet devices
• Small
  for mobile devices such as smart phones

Setting the unit next to the size attribute such as “large-6” means that the content within that column will take up the room of 6 columns within that row. The reasoning behind using a grid system, is because it makes its easier for the developer when taking into consideration responsive design.

This means that the developer does not need to enter media queries for each element, to make them resize when the website is used on a device with a smaller screen size, instead it saves time and creates a more fluid development process using shortcuts.

Here is a gif I have captured that shows off the use of a foundation framework, in relation to the responsive design: