With my site finished the seemingly difficult task of uploading to the world wide web started. This became difficult for a range of reasons.
The first issue was my original webspace/domain holder, freewebspace.com. I was using the popular free FTP (File transfer protocol) client Filezilla to send my files to the server of freewebspace. However, whenever I tried sending anything, whether it was a folder or single file, my files would bounce back with an error saying that 2 connections could not run at the same time. To investigate this I went online and found out that with the begginer package at freewebspace.com while you get free space and a domain, but you cant use FTP.
The second issue came with domains. The internet is full of generous sites dealing in free webspace. It wasn't a struggle to find these but problems came when after signing up you had to input a domain name. Buying them can be expensive, and it's hard to find one that you know know is a legitimate source. In the end I opted to actually buy a .com domain name, as in the long term it will look profesional and I have the groundwork I could use professionally in the future.
The final issue is linking your space to your domain. This is executed through DNS or Domain name servers. These consist of a minimum of 2 unique codes that define your server space. This can be done by getting the information from your server host and then going back to your domain host (e.g. GoDaddy.com) and "pointing" the space to the domain by changing it's name server.
By completing this and activating the site, it will go live.
You can visit my website at http://www.voltageworkshop.com/
Monday, 26 March 2012
Tuesday, 20 March 2012
Week 18 - Building the Site
Over the course of the week I have started making the actual website. As I missed Monday's session, I started at home making a Photoshop file which I would later Split and Save for Web and Devices. I chose to use Photoshop instead from scratch on dreamwevaer or through coding. I prefer to plan things visually so this was the better choice for me. It also allows me to get better more detailed and organised graphics.
The first change I made from my initial designs (and have since updated on my wireframes) is to make it a vertically/centred site. Originally I wanted to break the conventions I'd seen by having a more horizontal layout but in practice this posed some problems. If you want your site to look good in all resolutions when not using tables, you need to have a repeating background that will appear on columns to the side of your content. Then whatever the resolution the site won't distort. I had a horizontal nav bar instead. In the end i prefer it like this and feels more organised and easier to understand.
I left a space that could potentially be filled by a web banner later, another space was left for the iFrame. I saved Up and Down states for for the Photoshop layers for the nav bar. I knew I wanted the buttons in the nav bar to link to the iframe but I struggled to get this working. I had a code for an iframe which made text hyper links which would successfully change the contents of the iframe. Initially I planned to position the text hyperlinks subtly at the bottom of the page and then link the nav bar buttons to these. We worked out that instead you could do away with the hyperlinks all together. Instead each button is linked normally with an href to it's corresponding page. You then need to target the iframe. This was initially annoying, i had the behaviour of
Onclick="getElementsByID('test1').src=this .href"
inserted but it just wouldn't work. With some help we worked out that the problem was targeting the iframe. By changing the name and defining it as a window and using the same behaviour it worked. It would laso open most links in the iframe if you clicked on a link for an external page.
With this done, all I had to do was make the content for my pages. I really didn't do anything overly fancy with my pages. Everything was just linear content going down the page, images and text. I didn't use AP divtags or spry objects as, with the iframe, they really weren't needed. Also it benefited the iframe to have everything aligned left on the page. My images were PNGs or GIFs to allow for transparent backgrounds to make drop shadows looks effective etc. I would layout the pages with a yellow title with a thunder bolt icon for the whole page. Next a yellow banner and black text would give the project title or segment title. There would be the images or video followed by a summary of my contribution, the release date and a brief synopsis. Any external links were at the bottom of the page with icons and drop shadow rollovers.
I think i could have probably improved the layout of my individual pages and perhaps use more of the techniques I learnt during the skills audit. i think as much as I liked the iframe, it did limit me because of it's size and initial lack of reliability during programming. By either changing the size of the iframe or using something similar but newer (in terms of code) would have improved my site.
My website is nearly complete and the next stage will involve upload and testing.
The first change I made from my initial designs (and have since updated on my wireframes) is to make it a vertically/centred site. Originally I wanted to break the conventions I'd seen by having a more horizontal layout but in practice this posed some problems. If you want your site to look good in all resolutions when not using tables, you need to have a repeating background that will appear on columns to the side of your content. Then whatever the resolution the site won't distort. I had a horizontal nav bar instead. In the end i prefer it like this and feels more organised and easier to understand.
I left a space that could potentially be filled by a web banner later, another space was left for the iFrame. I saved Up and Down states for for the Photoshop layers for the nav bar. I knew I wanted the buttons in the nav bar to link to the iframe but I struggled to get this working. I had a code for an iframe which made text hyper links which would successfully change the contents of the iframe. Initially I planned to position the text hyperlinks subtly at the bottom of the page and then link the nav bar buttons to these. We worked out that instead you could do away with the hyperlinks all together. Instead each button is linked normally with an href to it's corresponding page. You then need to target the iframe. This was initially annoying, i had the behaviour of
Onclick="getElementsByID('test1').src=this .href"
inserted but it just wouldn't work. With some help we worked out that the problem was targeting the iframe. By changing the name and defining it as a window and using the same behaviour it worked. It would laso open most links in the iframe if you clicked on a link for an external page.
With this done, all I had to do was make the content for my pages. I really didn't do anything overly fancy with my pages. Everything was just linear content going down the page, images and text. I didn't use AP divtags or spry objects as, with the iframe, they really weren't needed. Also it benefited the iframe to have everything aligned left on the page. My images were PNGs or GIFs to allow for transparent backgrounds to make drop shadows looks effective etc. I would layout the pages with a yellow title with a thunder bolt icon for the whole page. Next a yellow banner and black text would give the project title or segment title. There would be the images or video followed by a summary of my contribution, the release date and a brief synopsis. Any external links were at the bottom of the page with icons and drop shadow rollovers.
I think i could have probably improved the layout of my individual pages and perhaps use more of the techniques I learnt during the skills audit. i think as much as I liked the iframe, it did limit me because of it's size and initial lack of reliability during programming. By either changing the size of the iframe or using something similar but newer (in terms of code) would have improved my site.
My website is nearly complete and the next stage will involve upload and testing.
Week 16 - Advanced Web Authroing
23rd JanWe have now experienced the full range of Web Authroing skills that will be taught to us. With each one we have also been encouraged to experiment and add to the existing code to round off and improve. This weeks task focused on iFrames, which are frames of the page which carry seperate media from the rest. Different frames allow for mutliple different sites videos etc to be on one page.
I was less confident with this and it took me a while. Accuratley reproducing the code was initially difficult, as we are still only just coming to grips with the syntax and grammr of coding. I would commonly miss speech marks or close tags etc. After this was done we were challenged to personalize, adding multiple links and changing sizes. I felt more comfortable with this, as having struggled so much to get the code down in the first place, I better understood what each element did. I like the iframe idea and it's many possibilities and will defiently consider using it on my final site if I can refine my codes and techniques.
27th Jan I have had to catch up with a new technique called slicing, as I missed a previous lesson. Slicing is a method which involves Photoshop. The creator creates the entire look of the pag in Photoshop, marks out where buttons will be by giving them sperate layers for how they will look when Up, Down and rolled over etc. Using the Slice tool, the user cuts out the spaces of the buttons. By saving for web and devices and importing to Dreamweaver, they become dynamic interactive objects.
This was probably the thing I have found hardest so far. Possibly becuase I wasn't here for the lesson or because it was just harder, it took the majority of my time in class to figure this out. My main confusions came from organising and exporting the different states through layers and "Save for Web and Devices". i became confused with saving different versions of the same thing in different places etc.
However, in reflection, the complete freedom you get with Photoshop is something I like the thought of. I am definetly more into the visual side of things, and while i enjoy and understand coding, it's easier for me to be able to see a visual outcome from the get go. I will try to keep things simple and more importantly, properly organised in folders when the time comes to make an actual site.
I was less confident with this and it took me a while. Accuratley reproducing the code was initially difficult, as we are still only just coming to grips with the syntax and grammr of coding. I would commonly miss speech marks or close tags etc. After this was done we were challenged to personalize, adding multiple links and changing sizes. I felt more comfortable with this, as having struggled so much to get the code down in the first place, I better understood what each element did. I like the iframe idea and it's many possibilities and will defiently consider using it on my final site if I can refine my codes and techniques.
27th Jan I have had to catch up with a new technique called slicing, as I missed a previous lesson. Slicing is a method which involves Photoshop. The creator creates the entire look of the pag in Photoshop, marks out where buttons will be by giving them sperate layers for how they will look when Up, Down and rolled over etc. Using the Slice tool, the user cuts out the spaces of the buttons. By saving for web and devices and importing to Dreamweaver, they become dynamic interactive objects.
This was probably the thing I have found hardest so far. Possibly becuase I wasn't here for the lesson or because it was just harder, it took the majority of my time in class to figure this out. My main confusions came from organising and exporting the different states through layers and "Save for Web and Devices". i became confused with saving different versions of the same thing in different places etc.
However, in reflection, the complete freedom you get with Photoshop is something I like the thought of. I am definetly more into the visual side of things, and while i enjoy and understand coding, it's easier for me to be able to see a visual outcome from the get go. I will try to keep things simple and more importantly, properly organised in folders when the time comes to make an actual site.
Tuesday, 13 March 2012
Week 15 - Dreamweaver
9th Jan
Since learning HTML hard coding, we have now moved onto Adobe Dreamweaver. Again this is a programme I have experience in from GCSE ICT, so I was aware of the basic concepts, such as having an index, root folders, pick whips etc.
I felt confident going through the basics of Site management, especially as at the moment we aren't making any websites that we will post on the web, so I don't need to mess around with server settings. Pages are quick and easy to create and adding new ones also not a problem. I also didn't have any trouble linking them up using things like the pick whip to create interlinked pages.
We also used the Page properties menu. This is not something I remember using all that much in previous Dreamweaver Sessions so I learnt a few new things. Mostly, this menu involves picking hexadecimal values and setting font groups etc.. I struggled slightly when choosing properties for hyperlinks. These were colour settings for up, down and rollover states but things often seemed to happen in reverse or not at all. It might have just been temperamental or i was missing something important.
Lastly we dealt with Flash buttons. This is really a simple way to make block colour rollovers with interesting fonts (as they are saved as images not text which means any computer can process them). I felt confident with this, as it only takes one menu to complete and makes a simple yet effective tool on your website.
13th JanWe moved onto more complex formatting, presentational techniques today, looking at different types of layouts to use, namely AP Div Tags and Tables.
I felt confident in using Tables, as I had used these before at GCSE level I knew lots about these. What I found new and intresting now is with my new confidence in coding, I could change things like colour of borders and backgrounds and the Cell Pad and Space. This showed the importance of looking at the CSS to change things and trouble shoot. I've made many table layouts in the past so feel confident
AP Div tags were a completely new idea to me, so while I knew they existed, I had no idea what they were for and what their purpose is. I like the way they work like Photoshop layers, and the idea you can create a lot of content and place it freely was interesting to me. Also by preventing overlaps you can place different tags next to each other and form up a table without the restrictions of cell sizes etc.
Since learning HTML hard coding, we have now moved onto Adobe Dreamweaver. Again this is a programme I have experience in from GCSE ICT, so I was aware of the basic concepts, such as having an index, root folders, pick whips etc.
I felt confident going through the basics of Site management, especially as at the moment we aren't making any websites that we will post on the web, so I don't need to mess around with server settings. Pages are quick and easy to create and adding new ones also not a problem. I also didn't have any trouble linking them up using things like the pick whip to create interlinked pages.
We also used the Page properties menu. This is not something I remember using all that much in previous Dreamweaver Sessions so I learnt a few new things. Mostly, this menu involves picking hexadecimal values and setting font groups etc.. I struggled slightly when choosing properties for hyperlinks. These were colour settings for up, down and rollover states but things often seemed to happen in reverse or not at all. It might have just been temperamental or i was missing something important.
Lastly we dealt with Flash buttons. This is really a simple way to make block colour rollovers with interesting fonts (as they are saved as images not text which means any computer can process them). I felt confident with this, as it only takes one menu to complete and makes a simple yet effective tool on your website.
13th JanWe moved onto more complex formatting, presentational techniques today, looking at different types of layouts to use, namely AP Div Tags and Tables.
I felt confident in using Tables, as I had used these before at GCSE level I knew lots about these. What I found new and intresting now is with my new confidence in coding, I could change things like colour of borders and backgrounds and the Cell Pad and Space. This showed the importance of looking at the CSS to change things and trouble shoot. I've made many table layouts in the past so feel confident
AP Div tags were a completely new idea to me, so while I knew they existed, I had no idea what they were for and what their purpose is. I like the way they work like Photoshop layers, and the idea you can create a lot of content and place it freely was interesting to me. Also by preventing overlaps you can place different tags next to each other and form up a table without the restrictions of cell sizes etc.
Friday, 6 January 2012
Week 14 - Hard Coding
Today we got practical experience in Hard Coding HTML. Building on the knowledge we gained during the investigation, we now got hadns on with HTML.
I was confident when starting the task, especially with the basic principles such as starting and ending tags. I remember the basic syntax and rules of HTML from previous experience as well as things like saving in HTML and the need to spell everything as if I was American (for instance COLOR instead of COLOUR which is a common issue).
I was quickly suprised however by things I had not yet come across or failed to remember. Components like the header styles using <h1> or <h6> etc was a new way of formatting for me. I'd also completely forgotten about breaks (<br>) and paragraphs (<p>) so these were useful for me to understand.
I would like to get more confident in more complex combinations, for instance giving different elements different alignments and adding extra values to something like the body tag (I started looking at text colour changes which are added in the description of the body)
Over the coming weeks we will tackle Dreamweaver and use knowledge learnt here to help fix problems we have with the code there.
I was confident when starting the task, especially with the basic principles such as starting and ending tags. I remember the basic syntax and rules of HTML from previous experience as well as things like saving in HTML and the need to spell everything as if I was American (for instance COLOR instead of COLOUR which is a common issue).
I was quickly suprised however by things I had not yet come across or failed to remember. Components like the header styles using <h1> or <h6> etc was a new way of formatting for me. I'd also completely forgotten about breaks (<br>) and paragraphs (<p>) so these were useful for me to understand.
I would like to get more confident in more complex combinations, for instance giving different elements different alignments and adding extra values to something like the body tag (I started looking at text colour changes which are added in the description of the body)
Over the coming weeks we will tackle Dreamweaver and use knowledge learnt here to help fix problems we have with the code there.
Subscribe to:
Comments (Atom)