Monday, 12 May 2014

Constructing a Website Evidence

In this report I detailed how I made my website through the use of screenshots of the tools I used.

In the event that the images do not display, find this document HERE


For the creation of my website I used Microsoft Frontpage. A slightly outdated but easy to get ahold of software package designed for the creation of websites. I will be looking at how I created the website and explaining a few of the tools I used.





Below you can see the basic file structure of my website. I have seperated it all into folders for each page and for the assets. I made each folder using the folder icon at the top of the ‘folder list’ this meant that I could easily keep all the files and assets for the website tidy and workable.

One of the mains places for tools I used was the ‘Insert’ dropdown bar. This is where some of the more useful tools are kept. From here I could create an ‘inline frame’ which would allow me to nest webpages inside of another webpage and thus make the site easier to build and function better. I chose not to do this based on wanting to have a bit of interactivity in the actual format of the website.
Another tool I could have used is the ‘Web Componant’ option. This allows me to add Javascript functions to the website such as photo galleries, audio files and if I ever needed it, a hit counter.


As with all Microsoft Office products, the bar at the top contains a lot of the useful tools you may need while working. After the usual New, Open, Save and copy and paste tools is the web tools. The first of which is another way to access the previously mentioned ‘Web Componants’. Next to that is the function to add a table to the web page. This is an incredibly useful tool because it allows you to set out the website in an easy to use and aesthetically pleasing manner.
Next to that is the layer tool which allows you to layer web objects on top of each other to add in a 3D effect to your website. Personally I dislike this tool because it doesn’t give good results. The next button adds an image to the web page. Useful for obvious reasons, this is how you get images in place. Click where you want it and it’ll appear.
The Drawing tool comes next. This allows you to add custom shapes to your webpage should that be of use to you. Personally, I don’t have a use for this.
Hyperlinks however is a very useful tool and one I used a lot. This allows you to connect multiple webpages together to form a website. The rest of the tools on that line are for refreshing and ensureing everything is working correctly. They bring up the menu to the right. In this case it is one of the main navigation links for the Radio pages.

For the background I used the ‘Gradiant Tool’ in Adobe Photoshop to give me an even and repeatable pattern I could use as the background of the website. By dragging and dropping on the page I could control the severity of the gradiants to create different patterns.


Below you can see the results of my work.

Back on the creation of the website, I used the table tool to create a table on which I could add content to later. At this stage I still had a different background on the page, purely so it was easier to see the table. I would later hide the table by changing it’s opacity.




To change the background, image on a specific page, I first had to right click on the page and then select the ‘Page Propeties’ option. This brought up this menu where it’s possible to change the background image. I selected the background I’d created in Photoshop and that was it.





For the photo galleries, I used the previously mentioned ‘Web Componants’ and selected a photo gallery. This brings up this menu where you can add images. It collects the images and stitches them into some form of photo gallery. In this case it was a photo gallery for the Games Design course. You can see the results of this below.


For those who understand HTML, FrontPage allows them to look directly at the coding behind the website and either code through a split view like this or from the code alone. This allows for more control over the website and easier problem-solving in the event that something goes wrong. The problem with FrontPage is that it tends to add redundant code in that can cause problems and as a result, some users prefer to code it all themselves.


Once you’re ready to look at how the webpage looks in a browser, you can select that from the ‘File’ tab and then select which browser you would prefer to look at. It’s best to view it from more than one because they may all present it slightly different and it may cause problems.










Once you’re ready to upload it to the internet you’ll need to use an FTP (File Transfer Protocol) program to send the files to the server. For this I used Filezilla however other programs to exist and all work the same.




The program when open may look something like this. In this instance I’m not yet logged on however you can see that my websites are in the left hand bar. This shows my ‘Local’ files, or in other words, what’s on my computer.



In order to add a website you need to fill in the details to the left. For privacy reasons I’ve removed my host name from the image and randomised the rest of the details to give an example of how it may look.





Once you’ve logged in it’ll look like this and you can transfer files across. The website will now be available online under the domain name you uploaded the files to. 



Digital Communications Diary

In this task I was asked to log all of my Digital Communications through the duration of the task. I have noted what I did, What it counts as, When I did it and what the Date was that I did it.


Website link

Here you can find a link to both the HTML coded website and the full website I built on FrontPage.

http://adamgilsonmedia.net76.net/  The websites are clearly marked which is which.

Monday, 24 February 2014

Constructing a Website

In this task i have been asked to begin the pre-production for the creation of a website for the Gateshead College Creative Industries courses. The first thing i did was draft out in a rough mindmap as many website related ideas i could think of including 'colour scheme', 'buttons' and of course the content on the actual pages.


After this I drafted up a hierarchical diagram to give myself an idea of what the websites structure would be. KNowing this is important for the creation of the layout. it means i can tailor the content to the website and thus make the best website possible.



As i mentioned before, having that structure allowed me to create sketches for how i envisaged the website to look. You can below see my maim layout sketch.


The idea is for every page to look like that with a 'main' navigation bar at the top and a topic specific one at the side. This multi-bar system will allow for easy navigation of the website. I will likely add a 'Home' button somewhere to make sure users can return to the index.

 As for the 'Contact' section i will use a slightly different layout. This one will have options to reflect the content.



With the rough drafts complete I began to start collecting assets for use within the website. I have included a screenshot of the assets folder below to show how i was organising them. 


Monday, 3 February 2014

Personal Use of Digital Communication

In this task i was asked to list as many applications and websites I personally use and to analyse each of them. Looking into the purpose, format and pros/cons of the service. I also looked into what devices it was avaiable on.


Monday, 27 January 2014

Digital Communication Protocols, Methods and Devices

I have been looking at the Digital Communication Protocols, Methods and Devices used in the real world. Below is a PowerPoint showing it.




Digital Communication Applications and Technology

Me and the group i was apart of were asked to draft out all of the Digital Communication Applications and Technology we could think of. here is a mindmap of our findings.

Mindmap