Books
Adobe Dreamweaver CS3: Classroom in a Book, (2007) Berkeley, CA, Adobe Press
Donnelly, D. (2002) Cutting Edge Web Design, The Next Generation, Gloucester, Massachusetts: Rockport Publishers
Faulkner, A. & Walthers von Aten J. (2007), Adobe Photoshop CS3: Classroom in a Book, San Jose, Calif. London, Adobe Press; Pearson Education
Henick, B. (2010) HTML & CSS: The Good Parts. Beijing ; Farnham : O'Reilly
Simmons, J. (2007) The Designer's Desktop Manual, Mies: RotoVision
Tittel, E. & Burmeister, M. (2005) HTML 4 Dummies, 5th Ed. Hoboken, N.J. ; Great Britain : Wiley
Media Clips on Marshall McLuhan
Marshall McLuhan - The World is a Global Village (CBC TV)
http://www.youtube.com/watch?v=HeDnPP6ntic&feature=player_embedded
Herbert Marshall McLuhan- Conversation
http://www.thecanadianencyclopedia.com/articles/marshall-mcluhan
Web Design
Learn to Create Websites
http://www.w3schools.com/
HTML Colour Picker
http://www.w3schools.com/tags/ref_colorpicker.asp
Adobe Kuler
https://kuler.adobe.com/
Superbad- An Immersive Experience Website
http://www.superbad.com/
Sod.jodi- Coding: Breaking the Rules
http://sod.jodi.org/
Tutorials
Navigation Bar Tutorial
http://www.youtube.com/watch?v=VRi93QcAilk
CSS Tutorial
http://www.youtube.com/watch?v=T5AMAf6ERe4
How to insert a Youtube Iframe
http://www.youtube.com/watch?v=-fYaNby0ZUM
Youtube Iframes used on my Website
'1980's technology vs Kids Today'
http://www.youtube.com/watch?v=7v75QpvISUs
'10 things that make you a 90's kid'
http://www.youtube.com/watch?v=finPQLzOLUU
'10 things that make you a 2000's kid'
http://www.youtube.com/watch?v=V2wnUDO3rqk
'The Digital Divide in Education'
http://www.youtube.com/watch?v=x1YLPL0KOWE
'Nicole Scherzinger unveils first ever Twitter dress'
http://www.youtube.com/watch?v=UqYz9hlPISM
Designing for the Internet
Monday 13 May 2013
Saturday 4 May 2013
Evaluation
As
always, evaluating your work is an important and necessary process for any
project or piece of work as it helps you to summarise the overall project and
reflect on what you have learnt and what challenges you have overcome.
When
starting my web design project, I felt very out of my depths and struggled to
grasp the technical vocabulary and felt like I was learning a completely new
language, which is exactly what it was; ‘Hypertext Mark-up Language.’ It took
me a long time to get my head around HTML and I began to feel very behind on my
work as I was reluctant to experiment due to lack of confidence. However, I
forced myself to begin watching Youtube tutorials and hired some relevant texts
to start to understand the basics. Instantly I began to understand that the
only way that I was going to learn is by trial and error and physically using
Dreamweaver. After I’d grasped the basics and had a clear idea from my proposal
as to what I wanted to create, I slowly began to gain some confidence and stopped
avoiding difficult challenges. By week 6 of production I had produced 6 basic
page layouts and began producing my content. It took my two weeks to research,
collect images and write up my website script however, it was part of the
process that was just as crucial as the design itself. At every stage I
tailored my content specifically to my target users of 9-11 year olds, to
ensure that the website would be consistent and stuck closely to my proposal. I
feel like the hours I spent into ensuring this was done properly has paid off
as my presentation feedback told me that there was no doubt that it was aimed at children
and they could see a lot of research and thought had gone into every stage.
After
feeling more comfortable with HTML, I had to get my head around another
difficult process; CSS, (Cascading Style Sheets). Initially this stunted me, as
I was unaware that HTML could not create the design for the website, and I felt
that I had to start from stage 1 and learn something that was not only
completely new but contradicting to HTML rules. To separate the two in my mind,
I told myself that metaphorically the HTML was the skeleton of the website and
the CSS was the clothes and accessories. This enabled me to understand that
without CSS the website would look like a shell and therefore understanding CSS
was my next challenge. After a lot of persistence I grasped the idea and used an internal style sheet, as
I preferred to have all my content together. Although some may see this as
more time-consuming than an external style sheet, I felt comfortable coding
this way and that was the most important thing for me considering it took me a
long time to feel secure in what I was doing.
Creating
my Robot characters was a fun and positive part of the web design process as
they were my main way of targeting my users and were something that I felt I
could create and produce successfully. From sketches to Photoshop images, I
feel like my Robot characters ended up exactly how I wanted, each
representing a different era, and during my presentation feedback they appeared
to be the most popular and received the most positive feedback. The feedback was received for my Logo, which involved creating a different robot holding a
globe to correspond with the website title ‘The Global Robot.’
During
my production stages I came across numerous challenges and times were I felt
like I had come to a halt and began giving up on my project. However, it was
these difficulties that provided huge learning curves for me and actually
allowed me to step back from the situation and find a solution or search for
help. This table documents these situations.
Issue:
|
How I dealt with issue:
|
Lack of confidence in HTML & CSS
|
Spent hours reading online articles, renting books and watching Youtube tutorials. Also asked for helped from colleagues and tutors who provided me with physical assistance and recommended helpful websites.
|
Trying to explain difficult concepts in simplistic terms for children
|
I researched my ideas, wrote out a website script and then went through and re-worded any parts that I thought were too complex or boring. For example instead of writing, ‘The mouse in computing, is a pointing device that functions by detecting two-dimensional motion relative to its supporting surface’ I would write ‘here is something that doesn’t like cheese, doesn’t squeak and isn’t afraid of cats..the mouse!’ and then explain how it worked in simple terms.
|
Not knowing target users technical knowledge and ability levels
|
I held an interview with my 9 year old cousin and asked him questions based on my website content, whilst specifically asking what terms he understood or found difficult. I then based my content on what I had found.
|
Trying to ensure each page/era had the same amount of content
|
The 1950’s obviously had a lot less inventions then the 2000’s so I took the most interesting and relevant inventions and ensured that each page had roughly the same amount of content. I also picked things that 9-11 year olds would most be interested in e.g. computer games instead of modems.
|
Trying to find colour images for old technology
|
It was difficult to find any images of 1950’s technology that were in colour, however in my feedback I was told that this is not an issue as children need to see black & white images to respect that we did not always have colour. I included both colour images and black & white to support both sides.
|
Lack of interactivity
|
I created roll-over speech bubbles that revealed a question and answer when the mouse hovered over them. I also included videos on each page.
|
Speech Bubbles pointing in wrong direction
|
I wanted the speech bubble to come out of the robots mouth and I had over-looked the fact that if the robot is on the right the speech bubble needs to point in the opposite direction. I resolved this by flipping the text and the bubble horizontally in Photoshop.
|
Image files coming up as broken
|
I realised that every time I moved my files around on my memory stick, Dreamweaver could not source the files. I therefore created set files and ensured I correctly ordered them and kept them in the write locations under a ‘www’ folder.
|
Positioning Images
|
I added each image into a set of tables to ensure that they did not move and did not rely on a series of individually positioned div’s and id’s.
|
Saving images for web
|
I saved each image as resolution 72 and made the background transparent to remove the white backgrounds. I then cut out all the white outlines that had been left on the image.
|
Lack of professional appearance
|
I added a thin black border around every image to make them look neat and located. I carefully considered colours and texts and re-made a professional navigation bar. I also added a footer with copyright details at the bottom.
|
Messy text positioning
|
By modifying the text to ‘justify’ the text automatically positioned itself around the relative images.
|
Too much text on page
|
I tried to insert images into the text to break it up and inserted videos to split the pages in two.
|
Not being able to see the ‘O’ in ‘The Global Village’
|
I specifically chose background colours that did not clash or interrupt the existing colours from the logo.
|
As well
as evaluating all the positives of my project, I think it is also important to
reflect on some of the areas that could have been improved or changed. One area
that I feel like my website may lack slightly is an extra element of
professionalism. I feel that the footer at the bottom works well for this,
however my header could have had a better positioning and maybe even some
separate icons to click on. A lot of websites have Facebook and Twitter links
at the top of their site, and because this was a child’s educational website I did
not think social networking links would be appropriate. However, maybe adding
separate links or images to the top header would have made it appear more
interesting and less like a title page. Another area in which my website may
have improved is less paragraphs of text. I wanted to get as much information
on the website but maybe if I had condensed the text or positioned it
differently it would not dominate the page as much. A final element which I
think may have improved my website is more interactivity and if I had the
design skills I would have liked to make the robots move in some way.
This
web design project has been one of the most complicated and challenging
projects I have ever completed, and at times I did not think I would be able to
complete what I had set out to do. It has taught me a completely new language,
and a different way of thinking that has inspired me to learn more about coding
and designing for the internet. I feel like I have successfully produced a
website that has stuck closely to my proposal and is representative of my
target users. It has helped me understand themes of usability, accessibility, innovation and functionality including how to correctly use colour, text and layout. Web design at times can be frustrating, stressful and incredibly
demanding, however it can also be hugely rewarding when you sit back and
admire what you have created from a set of codes. I am immensely proud of my
website and I am aware that there is still room for improvement and are
possible areas to develop, however as a first attempt of web design I am
confident in what I have produced. I can now appreciate the time, effort and
knowledge that go into creating websites and I have the ability to look more
deeply into a webpage interface whenever I am using the internet. I have enjoyed
designing for the internet and I am motivated to continue learning and
developing this skill.
Making My Website 'Live'
Once my website is created it needs a Server to become 'live' and active on the internet. The server acts as a host to run the website or files requested by the user and this relationship can be described as a client-server process. The server therefore performs tasks for the client and in return the client can connect to a network. The server I will be using is FileZilla, which is a free FTP (file transfer protocol) for the exchange of data and programme files across a network. I have also learnt about the use of IP addresses (internet protocol) which is a type of unique number given to every computer or device in order to be recognised or identified as a host.
Wednesday 1 May 2013
Embedding Iframes
Choosing the videos themselves involved searching for the type of content I wanted for each page and also for each era. I spent hours on Youtube researching what I wanted, and I had a set of criteria that was guiding my search.
- Appropriate for age-group (including visuals and vocabulary)
- Video length- too long and users will lose interest, too short and it will not be worth using
- Relevant for page/era (e.g. videos on first computer on 1950's page)
- Interesting, Funny and Colourful
(For example the video on this page is about Kid's of Today v 1970'S technology, therefore is suitable for this age group and involves this age group. It also provides humour as the children struggle to work the old technology.)
After I had chosen my videos, my next stage of production was to add the relevant videos to my pages, as a form of interactivity and sound. I first had to learn how to embed them by gathering the code from Youtube and adding it as an Iframe within the HTML. Once I had previewed my video I began using CSS to position and resize the video screen as layout is important in making the webpage look neat and organised. I also added a border around the video to box it in and give it a neat frame.
Monday 29 April 2013
Roll-Over images- Re thought. Speech Bubble Facts!
In order to make my web pages more interactive I wanted to use roll-over images, however, the feedback I got from the previous images I had made of era's was that they were unnecessary and didn't bring anything to the page as the viewer already new the era by the page title. These new roll-over images will provide short interesting facts of that era that aren't to do with technology but are just extra snippets of fun information specifically for this age group. The first image will read 'did you know' and the roll-over will reveal the fact. These speech bubbles will be coming out of the robot characters mouth, as if it is him/her speaking.
Saturday 20 April 2013
Getting to Grips with CSS- Finally!
I have started to understand the process of adding CSS to my website and have become more confident in experimenting in what it can do. I have decided to use an internal CSS sheet for my website, because I work better having everything in one place and it avoids confliction between internal and external style sheets. Also, because each of my pages is going to be different in terms of layout and colour, it makes sense to have individual internal CSS that I feel comfortable working with.
I started by adding a wrapper to my website to go around the sides and give the website a boundary. I then started experimenting with floaters and positioning to manipulate the images. Something that I am learning is that in order to get these numbers/pixels right, you need to do a lot of trial and error and preview where and how the images are moving. From this I started experimenting with margin's and positions. Something I also am finding useful in Dreamweaver is the colour co-ordination of the CSS & HTML. It allows me to see mistakes without having to re-trace my steps or read through reams of coding. For example, the bottom div class .robot3 is in blue, because the above div class .microchip has a missing '{' symbol to complete the instruction. Hence, I am now learning to look out for colour changes to correct my work.
Something else that I am learning is short-cuts. On the left is a screen shot of the positioning of four individual images. I spent hours individually moving the images to try and place them in a horizontal line, by using floats, paddings and margins. This was a time-consuming process and when I added a border it read all of them as one image and added a giant border round the whole space.
This was incredibly frustrating and meant that the majority of my time was being spent on positioning images. Because of this, I started researching better ways to position images and went to a colleague of mine who recommeded inserting a table, and placing the images into a table. This prooved successful and became a lot easier in terms of CSS. You can see on the right, I could remove all the previous id's and simply add a #divtable and border: 2px solid #000;
This allowed me to manipulate the images within a table so they did not move or need numerous CSS instructions. I am glad that I came across this AFTER individually positioning the images as it taught me about the different id's and classes, but also allowed me to learn two ways of achieving this.. Even though it was time-consuming!
Subscribe to:
Posts (Atom)