P4: Produce a plan for the creation of the interactive media product form the generated ideas
Learning HTML
Learning html for my project this is only basic html without any css which I will be learning later to make my website look even better.HTML stands for HyperTextMarkupLanguage this is normally used for basic website creation with little to no aesthetic choices thats why html is often used with other things like CSS which allow for my choice and options when it comes to the aesthetics of the website.
I got these notes from a video that we watched in class I will be referring to the pages as well as the video for tips on how to do certain things.
I got these notes from a video that we watched in class I will be referring to the pages as well as the video for tips on how to do certain things.
Learning CSS
Learning CSS which stands for Cascading Style Sheets which is a language for describing the presentation of the web pages this includes many aspects such as colours, layout and fonts. HTML and CSS are referred to as the cornerstones and the core building blocks for building web pages.
I got these notes from a video that we watched in class I will be referring to the pages as well as the video for tips on how to do certain things.
I got these notes from a video that we watched in class I will be referring to the pages as well as the video for tips on how to do certain things.
|
Version control
This is the sections that I'm planning to divide my website into in the end I may try and simplify this as the easier it is for the user in the end the better. After playing around with the coding I realised that I would have to include the folder names every time I wanted to grab a file from there so I chose to simplify it as this will save time when coding the site. |
Creation of social media for my company.
In this task I was required to create a home page for all of the companies major social media as the people have to have a easy and reliable way of getting in contact with the company. This process required me creating a new google account that would be the professional business email. I will also include a link on the Facebook logo to take the user to my Facebook website this will be good as then the user will not have to look for it. |
|
My website coding
In this section I will be evidencing my websites creation using html and css I will also be explain the best I can what each bit of code does and how I modify it from my original idea
In this section I will be evidencing my websites creation using html and css I will also be explain the best I can what each bit of code does and how I modify it from my original idea
The first screen shot is the first draft of the code which I was planning to change later and I did what this code does is creates a basic looking website as seen in the next screen shot the way the website looks at the moment is because it was created using only html5.
With my second variation of that code I added the links the the other websites I also spelt merchandise wrong so I will have to change that but to this one I have added css to make the website look better and the result was the sixth screen shot the difference is huge from looking like something when the internet was originally create to something we see nowadays and all of that is thanks to css code.
Now for what part does what:
Other Examples of what the code does is the the notes I Screen shotted from the videos I watched In class.
With my second variation of that code I added the links the the other websites I also spelt merchandise wrong so I will have to change that but to this one I have added css to make the website look better and the result was the sixth screen shot the difference is huge from looking like something when the internet was originally create to something we see nowadays and all of that is thanks to css code.
Now for what part does what:
- <li><a href="file:///Users/nhl.12dgo/Desktop/csscrashcourse/mywebsite/1index.html#">View Home Page</a></li> : This piece of code is responsible for displaying the name of that allocated list space which is part of the navigation the speech marks are where I put the link to the other sites which have a very similar template to this.
- <div class="container"> : This piece of code basically tells the program to fetch that class from the css file and in css what I allocated the container class to do is to make sure that the website has a margin on both the sides of the text and so that it auto changes depending on the size of the browser window I set it to be at 60% of the window and it auto adjusts if the window is increased in size or decreased.
- #: The hash symbol is normally used to create a class so that you can set the permitters of that class and then just type <div class "name of class"> this basically tells the program to run the same code as you put in the # class this saves a lot of space as you don't have to rewrite all the code as some classes can be short but most of them are different fonts and colours or auto adjusting.
- <div style="padding:30px;"> : This Piece of code creates empty space around what ever you choose it can be around text or an image
Other Examples of what the code does is the the notes I Screen shotted from the videos I watched In class.
This is my image gallery page.
This is the progression I went through when making my code I had to research how to do something like how to make my images visible on my website as well as what commands would is use to locate them in the image file I looked in a number of places such as (https://www.sitepoint.com/using-modern-css-to-build-a-responsive-image-grid/) which showed me a way of presenting the image and how to place it on the website then I edited the code to suit my purpose as well as adding padding and margins to make my website seem more smart which turned out quite well. But at first I used the code I made as a template for each part of the website which I will just add to throughout doing each section and playing around on how to actually make it work by using trial and error and constant research.
This is the progression I went through when making my code I had to research how to do something like how to make my images visible on my website as well as what commands would is use to locate them in the image file I looked in a number of places such as (https://www.sitepoint.com/using-modern-css-to-build-a-responsive-image-grid/) which showed me a way of presenting the image and how to place it on the website then I edited the code to suit my purpose as well as adding padding and margins to make my website seem more smart which turned out quite well. But at first I used the code I made as a template for each part of the website which I will just add to throughout doing each section and playing around on how to actually make it work by using trial and error and constant research.
The image below is what the code looks like now the first 40 lines or so are basically the same that's why I did not include the first 13 lines in the first screenshot. The code from line 68-139 is basically the CSS file but I included it in the code which I later removed so it looks more clean and I moved it to the CSS file.
I just continued playing with my code and this is my final code for each page it took quite a while to develop some of them so i found alternative ways of doing the same things I'll go more into detail with each one separately.
Something I noticed when developing my own code was that when I tried opening it on other computers the links between the websites did not work the only way to fix that from what I tried was to replace that part of the code with the links that the computer has to those files and then it works fine this would be something I would have to work on if I were to redo this I could fix this issue by using true and false statements or other ones but that would take longer the simplest solution would be to make a website on a website creator such as weebly or wix as they don't have the issue of it not working on other computers.
Something I noticed when developing my own code was that when I tried opening it on other computers the links between the websites did not work the only way to fix that from what I tried was to replace that part of the code with the links that the computer has to those files and then it works fine this would be something I would have to work on if I were to redo this I could fix this issue by using true and false statements or other ones but that would take longer the simplest solution would be to make a website on a website creator such as weebly or wix as they don't have the issue of it not working on other computers.
M3: Create a graphical user interface combining media elements with user interactivity
Time code:
0:00 - 0:20: Of the fold
0:21 - 0:30: Video of Cambridge
0:31 - 0:41: Rest of the home page (copyright, links)
0:42 - 1:02: Image Gallery page (the images, adaptive size)
1:03 - 1:30: Origin story page (showing what happens if you press on the image, talking about margins and boarders)
1:31 - 2:13: Talk with us page ( Talking about the interactive chat and its features)
2:14 - 2:59: Contact us page ( Showing that all the links to the corresponding websites work Facebook, Twitter and google as well as showing that they have a icon that is clickable)
0:00 - 0:20: Of the fold
0:21 - 0:30: Video of Cambridge
0:31 - 0:41: Rest of the home page (copyright, links)
0:42 - 1:02: Image Gallery page (the images, adaptive size)
1:03 - 1:30: Origin story page (showing what happens if you press on the image, talking about margins and boarders)
1:31 - 2:13: Talk with us page ( Talking about the interactive chat and its features)
2:14 - 2:59: Contact us page ( Showing that all the links to the corresponding websites work Facebook, Twitter and google as well as showing that they have a icon that is clickable)
![Picture](/uploads/1/1/0/5/110549727/editor/screen-shot-2018-05-03-at-11-04-27.png?1525769834)
I created my first interactive feature which is the video during unit 3 and I reuse it as it suits this site as I talked about the culture of Cambridge the coding I used for this was quite simple all I had to do Is duplicate my video and rename it to something else and use the embed html code that is featured on youtube and paste that into my website.
![Picture](/uploads/1/1/0/5/110549727/published/screen-shot-2018-05-03-at-11-06-54.png?1525769963)
My second interactive feature was using deadsimplechat.com to implement a interactive chat to my website as it would be to complicated to make one from scratch and what deadsimplechat.com does is creates a host server so that the people with the link can talk there. But the only downside to this is that the links to the chart rooms are very simple so someone could easily enter it and talk on it without being on the actual site. http://deadsimplechat.com/
The optimisation features of both are quite simple as I do not have much experience but on YouTube you have the standard inbuilt quality, and full screen setting but I also included my own adaptive screen so that the user can optimise which way around the want their screen if on a mobile device without taking away from the experience. As for the optimisation its very minimalistic as the user can only change their username as I do not how to implement more interactive features.
Across my site I included text specific for each page as well as images on some of the pages other interactive things I created for my site is working social media links with icons that the user can click and takes them to the page of the sites social media.
As visible in the video above my page layout is consistent in terms of colour schemes and most other things the only thing that really changes is the size of the page and the contents of the page of then that it says the same.
My second interactive feature was using deadsimplechat.com to implement a interactive chat to my website as it would be to complicated to make one from scratch and what deadsimplechat.com does is creates a host server so that the people with the link can talk there. But the only downside to this is that the links to the chart rooms are very simple so someone could easily enter it and talk on it without being on the actual site. http://deadsimplechat.com/
The optimisation features of both are quite simple as I do not have much experience but on YouTube you have the standard inbuilt quality, and full screen setting but I also included my own adaptive screen so that the user can optimise which way around the want their screen if on a mobile device without taking away from the experience. As for the optimisation its very minimalistic as the user can only change their username as I do not how to implement more interactive features.
Across my site I included text specific for each page as well as images on some of the pages other interactive things I created for my site is working social media links with icons that the user can click and takes them to the page of the sites social media.
As visible in the video above my page layout is consistent in terms of colour schemes and most other things the only thing that really changes is the size of the page and the contents of the page of then that it says the same.