Download Unit 425 Websites Q and A

Unit 425 Designing and Developing Websites Q & A
(Written Questioning).
Name: Ryan Bibby
Group: September 14-2
Date: 30/09/2015
1.1 - Identify the key design features inherent within a requirements specification
Q1: Can you identify the key design features that would be within a requirements specification
document for a website and can you explain why these features are important?
A: A website may have various design features written within the requirements specification
given to a project team. This is important as it ensures that the designers and developers of the
website know exactly what it is that the client requires. For example one design requirement
may be that the website makes use of more modern languages such as HTML5 and CSS3. This is
important because the business owner may want certain features to be used (such as CSS
animation) which isn’t available in earlier versions of CSS. This means that the
developer/designer will know to use CSS3 from the start of the project so that they get access
to these features that the client would like.
1.3 - Evaluate different design models and select the most appropriate to meet requirements
Q2: There are different design models for websites (Panoramic, Long and Narrow, Frame in
Frame etc.).
Can you evaluate the suitability of some of the design models for a website that you have
created and Explain why the design model you have chosen was appropriate to meet the
requirements?
A: There are 4 main design models which can be used for a website design – each of these will
have its own advantages and disadvantages. Some of these include:
Long & Narrow Model – This is where the website doesn’t take up the whole width of the
screen. This is usually about 80% of the screen width. The advantage of this is that the user
needs to move their eyes to the left and right less as the website content is in a smaller width.
However there is less space to include whitespace to provide separation between the elements
on a webpage. This can lead to a cluttered appearance on the website.
The Panoramic Model – This is where the full width of the webpage is used to display content
and is usually used for photographic websites where a large amount of space is needed to
display content. The main advantage of this is more space is available to space out elements as
required.
Frame in Frame Model – This is where the website is placed within a frame. Therefore the
website is framed within the existing frame of the monitor – spacing is applied to the sides and
the top and bottom of the webpage. The advantage of this is that less screen space is used so
the user can see more of the websites content, the disadvantage is that the webpage can look
very cramped as a result.
Full Screen Model – This is where the website uses all the available space on a computer
monitor with no margin between the edge of the webpage and the edge of the monitor. The
advantage of this is that there is more space on the webpage to use for the websites content.
However the information is spread out over a larger space which means the user has to move
their eyes more to read the content.
For the GameTrader website, I chose to use the long and narrow format because it gave me
enough space to add the elements to the website something which Frame in Frame wouldn’t
allow. It didn’t have too much space like full screen however where the pages would feel
empty.
2.1 - Describe the use of (X)HTML to develop websites
Q3: Can you describe what HTML(5) is and how it is used in order to develop websites?
Please also show some examples of How HTML(5) code is used.
A: HTML is a markup language used to define the structure of a website using different tags
such as div, p and h1. The browsers interpret the HTML tags and then lay the website out
accordingly. For instance if the browser sees the h1 tag then it will know that the text
surrounded by that tag is supposed to be a heading.
HTML5 takes this one step further by semantically describing what each piece of content is. For
instance an article one a website could be surrounded with <article></article> tags to show that
this is the article content within a webpage. This is used by screen readers to allow the user to
select what part of the content they want read.
An example of some HTML code I have used within the GameTrader website is:
Here I have first create a division within the page to separate this content from other elements
within the webpage. I have then added a paragraph to the page using the p tag and a smaller
heading using the h4 tag. I have created new lines on the address using the line break tag (<br
/>)
2.2 - Describe how to use CSS to standardise the overall style of a website
Q4: Can you Describe what CSS(3) is and How it is used to standardise the overall style of a
website?
Please could you also some examples of How CSS(3) is used.
A: CSS stands for Cascading Style Sheets and is used to define the style of a webpage. For
example what colour should the text be or what size should the headings be. CSS can be
applied in 3 different ways -
- Inline: This is where the CSS code is applied using a style tag on the individual HTML tag. This
affects only that one particular HTML element. For example one paragraph.
- Internal: This is where the CSS on a webpage is placed in the head of a webpage between
<style></style> tags. These styles are then applied to every element matching the style criteria
on that webpage. For instance every heading within one webpage.
- External: This is where the CSS rules are written in a separate file which is then linked to using
the <link href=””> tag. This can be accessed across many different webpages which can be used
to apply the same styles to different webpages within a website. This standardizes the look of a
website as all the headings within one page will, for example, use the same style of heading.
CSS3 is a more up to date version of CSS which allows different types of styling. For instance
transitions or border radiuses (to add rounded edges to images or content boxes).
An example of some CSS code that I have written is shown below:
In this example, I have used a wide range of CSS rules including the background-color and fontfamily to change the look of the whole webpage. I have also used the CSS3 style box-shadow to
add a shadow to the back of the container box.
2.5 - Explain the contextual application of a variety of web development tools
Q5: Can you explain the various web development tools that are used, where they are found
and when might you use them when developing a website? (Editors, Cloud Tools, Frameworks,
PhoneGap, Fontello etc.)
A: There are a number of different tools which can be used to help designers make the websites
that they need to. These web development tools are used because they speed up development
of websites which saves money.
On example of a web development tool is Fontello. This can be used by designers to select only
certain icons out of icon packs such as Font Awesome and Glyphicon. This will then speed up
the website download time as the user doesn’t need to download the icons which aren’t being
used on a particular website. This is an example of a cloud tool which allows a designer to
access this on any computer with an internet connection.
Another example of a tool which designers can use is PhoneGap. This is used to help designers
create mobile apps based on their website. This again speeds up the design of a mobile app for
websites which is why designers would use this tool. This is another example of a cloud tool.
Another tool that a designer might choose to use is a CSS or JavaScript framework such as
Bootstrap, Pure CSS or Materialize. This can reduce the time taken to develop the website as a
lot of CSS code will already be written for the designer. They can then customize this by adding
their own CSS to override the framework.
Editors are used to write the code used to display a website, an example of editor tools includes
Sublime Text and Dreamweaver. Sublime Text is a text editor and therefore the designer will
need to write the code manually. This is time consuming but ensures the code is exactly right.
Dreamweaver is a What You See Is What You Get editor, this allows the user to drag and drop
different elements within a page. However the code for this isn’t always right because of how
the software works. This is a trade of between speed and accuracy.
2.6 - Explain the advantages and disadvantages of various web development methodologies
and technologies
Q6: There are various web development methodologies (Waterfall, Spiral, Agile etc.). There are
different web development technologies (HTML5, CSS3, PHP, Java, C# etc.)
Can you explain the various web development methodologies and what are the Advantages and
Disadvantages of them?
Can you also explain the various web development technologies and what are the Advantages
and Disadvantages of them?
A: A methodology is the way in which a project will be carried out and includes the analysis,
design, production and testing stage. There are a number of different methodologies which can
be used in a website project. These include:
- Waterfall: This is where the stages of development are done in the order they happen. If one
stage needs to be redone (for example a client’s requirements change) then the whole process
will need to be redone. The advantage of this model is that is very easy to understand and
follow, however testing is left until the very end of the project so a feature may not be done in
the way a client expected it.
- Spiral: This is where a large amount of risk analysis is undertaken before the project begins,
testing is done at the end of each stage and various iterations are released of the website
before the final website is produced. The advantage of this is the reduced level of risk because
of the risk analysis stage. However the spiral model is unsuitable for small web development
projects and can be costly to use.
- Agile: This is where the website is made as a series of sprints. At the end of each sprint the
developers will receive feedback from the client on what they are happy with and what needs
to be changed. These changes will be made in the next sprint as well as starting to work on
some new user stories. The advantage of this is that the client can very easily tell if the website
is going off track because the sprints only last a maximum of 2 weeks. However with Agile, the
requirements can change which can lead to the project taking longer than first expected.
There are also a number of different technologies that can be used when making a website,
these have their own advantages and disadvantages. Some example of web development
technologies include:
HTML5/CSS3: This is used for front end development and is used to produce the design and
structure of the webpages. The advantage of this is that it is relatively easy to learn and there is
also tools available which a designer can use to assist them. However different platforms and
browsers can output the same code in different ways which can lead to incompatibilities
between browsers.
PHP: This is a scripting language which is executed on the server and can be used to produce
dynamic webpages. For example a webpage which changes according to the information stored
within a database. The advantage of this is that a web designer can make the content on
webpages change according to PHP and create a content management system which is much
easier for a client to manage. However the disadvantage of PHP is that it is more difficult to
learn and a more powerful server is required to run the PHP software.
Java: This is a programming language which can be run on a web server to add extra
functionality to a website. Like PHP, this allows webpages to be made dynamic so they can
change what is displayed to different users. However PHP works much better with MySQL
databases so Java isn’t used as much.
C#: This is used on Windows based servers to create dynamic webpages. This is done by serving
webpages with the .asp extension rather than using PHP. The advantage of using C#/ASP for
web applications is that Visual Studio can be used to very quickly make web applications.
However ASP only runs on Windows based servers whereas PHP will run on Linux servers as
well. Using a Windows server increases the cost of producing and maintaining a website.
3.1 - Explain the advantages and disadvantages of various types of multimedia file format
Q7: Can you explain the various types of multimedia file formats that exist and explain the
Advantages and Disadvantages of them?
A: Different file types can also have an effect on the performance of a website. This is because
different file types will have differing file sizes and the larger the file size, the longer the website
will take to load. For example an image saved as a PNG will take up more space than a
compressed JPEG. Vector images generally have smaller file sizes than bitmaps because vectors
are based on mathematical formulas. Therefore a web designer can reduce the file sizes of the
websites files by compressing images to reduce the file size and using vector images where
possible. Other examples of choosing different file formats to increase page load times include:
JPEG vs GIF – GIF’s generally have a smaller file size as they store less colour information within
them, however they are only suitable for images with less than 256 colours such as logo’s and
simple cartoons.
WAV vs MP3 – MP3 files are a lot smaller than WAV files (sometimes up to 10 time smaller).
This means that pages with MP3 files will load quicker than those with WAV’s. This is because
MP3 files are compressed using lossy compression (ie. information is discarded from the file).
This lowers the quality but reduces file size.
SWF Video vs AVI – SWF files have a smaller file size and so will load quicker on a webpage.
However videos saved as an AVI are usually better quality. Therefore it is a trade-off between
speed and quality.
3.2 - Explain the advantages and disadvantages of different types of multimedia element in
relation to different contexts
Q8: What are the Advantages and Disadvantages of different multimedia elements (text, audio,
video, image, animation) and how and when might you use them?
A: There are a number of different ways of displaying content within a webpage, certain
methods are more suited to different contexts.
For instance, text is the easiest method to use. The main advantage of text is that it is easy to
add to a webpage and is quick for the user to download as the file size for text is very small in
comparison to video or images. However one disadvantage of using just text on a webpage is
that it can be very overbearing to the user and is difficult to read in large chunks of text. Text
would be used to give the user information about a certain topic – for instance text is used a lot
on the Wikipedia pages.
Images can be used to break text down into smaller sections and can be used especially to
describe complex topics where a diagram could be used to help the user understand the topic.
Another advantage of images is that they are easy to add to a webpage using the img HTML tag.
However one disadvantage of using images on a page is that the webpage will take longer to
download, this is because both the HTML file and the image file need to be downloaded by the
user’s computer.
Another multimedia format that can be used on a website is audio. This can be used for
interviews on a certain topic that can be listened to by a websites visitor. The advantage of
using audio on a website is that it can be a very quick way to generate content for a website
through the use of interviewing and recording whereas text would need more time to be
written. However users would normally need additional browser plugins such as shockwave or
flash to use the audio player interface. This means there is additional requirements before a
user is able to listen to the content.
Finally another format that could be used is video. This is where a video is embedded directly
onto a webpage to give additional information to a user. This could be used, for example for an
advert or a film trailer on a movie website. Videos can be easily embedded if they are first
uploaded to a website such as YouTube and then embedded using YouTube’s built in tools. The
disadvantage of using videos on a website is that the page load time will be increased. This is
because the video file must be downloaded as well as the websites HTML file.
4.6 - Explain the need for testing on different platforms and browsers
Q9: Can you explain the need for testing on different platforms and browsers and why you
would need to?
A: The platform that a user uses can also change how a website is displayed. For example if the
user has a Windows computer then this might display a website differently to one using Mac
OSx. This is because each platform has different default settings for webpages. For example,
Mac OSx uses Helvetica whereas Windows will use Arial as this is easier to read on Windows PC.
Therefore websites will need to be tested to make sure they work in all operating systems.
Another test that will need to be carried out is that the website works on all screen resolutions.
This is because the screen resolution a website is viewed at will make difference to how it is
displayed. For example a desktop website being used on a mobile device would need a lot of
scrolling left and right from the user as the device won’t be wide enough to view all the content
on the website. Therefore the website will need to be tested at different screen resolutions to
ensure that the website displays well at all resolutions – for instance having a mobile view
which compacts the website to save screen space.
Finally, the website will need to be tested out on a range of browsers such as Chrome, Firefox,
Safari and Internet Explorer. His is because browsers use different rendering engines
and therefore the same webpage will be displayed in different ways on different
browsers. By testing a website in different browsers, these changes can be detected and
then browser specific CSS added to counteract this. For instance if a division block is in
the wrong place in Internet Explorer, CSS can be added to stop this only when viewed in
Internet Explorer.
5.1 - Explain the role of the W3C
Q10: Explain what the role of W3C is, why was it formed and what is the purpose of it?
A: W3C stands for the World Wide Web Consortium which is an organsiation which sets the
standards for the World Wide Web. The W3C was formed to help the web fulfill its potential by
releasing a set of web standards. These standards relate mostly to the HTML and CSS used to
create a website and gives a guide to hardware and software manufacturers on how best to
make sure their tools are compatible with modern websites. W3C are constantly changing their
standards to make the most of new technologies available – for instance HTML5.
5.2 - Explain W3C standards and their application in site coding
Q11: Explain what the W3C standards are and explain how these standards are applied when
coding and developing a website.
A: The standards are a set of rules and best practices that developers and designers should
follow when making a website. This ensures that the browsers being used by website users are
able to read the webpages and correctly display them to the user. This is because webpages
should then be written in the same way which means the browsers are then able to interpret
the markup language correctly.
An example of a standard is that all websites should have a declaration at the top of them to
show the file type, for instance HTML5. This is so the browser is able to determine what version
of HTML it is dealing with. Another example of a W3C markup is not using tags such as center
and bold as these have now been deprecated an may not be understood by newer browser
versions. Another standard is only using CSS IDs for one element, this is because otherwise
JavaScript could fail because of the conflicting IDs.
5.3 - Discuss web accessibility and usability issues from the viewpoint of an IT professional.
Q12: Can you discuss what web accessibility and usability issues a user might encounter and
face when using a website? From a viewpoint as an IT professional, how might these issues be
overcome?
A: There are a number of accessibility and usability issues that a user could encounter whilst
trying to use a website. For instance they may be blind or partially sighted and therefore not
able to read a webpages content. They could be hard of hearing and not able to listen to any
video or audio files on a website. Alternately, they could have a poor internet connection which
means it takes too long to download webpages.
These issues can be solved whilst making a website using a wide range of techniques, for
instance:
- Making it easier to use screen readers on the website by providing description tags to links to
make it clear what each link on a webpage does. They could also add alt tags to images so that
a description of the image can be read to the user.
- Another example of a feature which could be added to increase accessibility on a webpage is
the addition of a high contrast mode, this would make it easier to read the content on a
website as there is a greater contrast between the text and background. A website could also
offer the ability to increase font sizes to make them easier to read.
- Subtitles could be included on a video to ensure that anyone who is hard of hearing can still
use the video on the website.
- A designer should also compress the images used on a webpage and minify any external files
such as JavaScript or CSS. This will then mean the website downloads quicker and is then more
accessible to people on slower internet connections.
6.1 - Explain the underlying physical and operational properties of the internet and World
Wide Web, including the difference between the two
Q13: Can you explain what the Internet is, how it is used and operated and what it is made up
of in order to function?
Can you explain what the World Wide Web is, what does it consist of and how does it operate?
Finally, can you explain the differences between them?
A: The internet is a massive computer network which joins together all the other networks
which are used in homes and companies. This allows the computers and devices to
communicate with other devices on a separate network. The internet relies on a number of
hardware components. Firstly is the devices themselves, this allows devices to communicate by
passing data packets along a chain of other devices. Cables are also required to connect all
these devices together (wireless can also be used over a short distance). Switches are then used
to connect all these different devices together.
The World Wide Web is a way of using the internet and is made up of a large amount of server
storing files. These files can then be accessed by other devices and downloaded to their
computer. This is what allows people to access websites that are based on the internet.
Another method of accessing the web would be through email.
The difference between the internet and the World Wide Web is that the internet is what
allows the devices to communicate between each other whereas the World Wide Web is what
allows computer to access different websites and download files of the internet.
6.2 – Discuss the internet and the Web as a business tool, including (but not limited to) as a
tool for communications, research, sales and marketing
Q14: Can you discuss how the Internet and the web might be used as a business tool for
communications, research, sales and marketing?
Can you think of any other business tools that the Internet can be used for?
A: The internet can be useful to businesses, one of the ways this may be is allowing the business
to communicate with suppliers and clients. This could be done either through the business
website using a contact form or over email. The internet could then be used to create new
orders with suppliers or provide customer service to a customer. For instance sorting out a
refund.
The internet could also be used to research different topics for a business. For instance finding
possible suppliers for a new product or finding competitors. This information could then be
used to help a business set their prices based on their competitor. A business could use stock
market and statistic based websites to see how well its competitors are doing at the moment. A
business could also use the internet to send out questionnaires to receive market feedback.
This could then use used to decide on what changes need to be made on product and could be
done using a webpage or email.
A website can also be used by a business to help them sell their products. They could use their
website to allow the customer to purchase goods over the internet with them then being
delivered to their house (e-Commerce). This would reduce the overhead cost to a business as
they wouldn’t then need a retail premise. Some examples on e-Commerce websites include
Amazon, ASDA and SportsDirect.com. An e-commerce website will need to have the ability to
display products to a user, take their details (name, address etc.) and then taking payment
details of the user.
Another way in which a business may choose to use the internet to advantage their business is
to use a website to advertise their product. They could do this by creating a website which gives
customers the option to buy products over the phone or in store. They could also use pay per
click or advertising banners to promote their business on other websites or search engines.
6.3 - Discuss the advantages and disadvantages of various internet-based models, in different
contexts
Q15: Can you discuss what are the Advantages and Disadvantages of the various Internet-based
models (e-commerce, advertising, market research, communication etc) and when a company
may choose to use a particular model?
A:
There are many different internet based models which a business could choose to follow, these
include:
Brokerage – This is a website that brings together different buyers and sellers. The advantage
of this model is that customers can easily contact the business online. However they may want
to speak in person about any brokerage deals as they may not want to make business deals
over the internet.
Advertising – This is a website where a business includes advertising alongside their regular
website content. The advantage to the business is that they can then earn more revenue from
their website as they will be paid for including advertising. However the usability from a user’s
point of view is reduced as the advertising can block parts of the website.
Infomediary – This is a website that gives visitors information on a certain topic – this could be
an independent review on a product. The advantages to customers is that they are able to get
an independent review on a product. However they can’t be sure if the review is truly
independent or whether it has been paid for by the company.
Merchant – This is a type of website used by wholesalers to sell products to other businesses to
sell on. This might be based on a list price or an item. The advantage to businesses of using the
business model is that they can sell product at cheaper prices because they don’t need a shop
front to sell from. However this limits their market as the business can’t sell to customers to
increase profits.
Manufacturer – This is where a business that manufactures the products will use the internet
to sell directly to their customer rather than relying on other businesses to distribute products –
an example would be Apple. The advantage of doing this is that the business can get a higher
profit per product as they are cutting out the middleman. However this means that the
business will need to hire more staff to deal with the sales aspect of the business which is a
disadvantage to a business following this model.
Affiliate – This is where a website will be used to refer visitors to another business, the business
then pays the website owner for referring customers to the business. The advantage of this is
that it provides more advertising for a business and provides a higher revenue for website
owners. The disadvantage is that a website owner may be blamed if the referred company
disappoints the visitor.
Community – This is where the website is based around a community of users – for example an
online forum or discussion board. The advantage to a website owner of this is that it is easier to
market as the websites users are likely to refer new members. However the income from these
types of websites are unstable, this is because they are reliant on either advertising revenue or
donations from members.
Subscription – This is where users are charged a yearly or monthly fee to access the websites
contents – this is usually used for premium tutorials. The advantage of this model for a website
owner is that they will know how much revenue they can expect to earn each month because
they will know how many users are paying for the site and how much they are being charged.
However one disadvantage of this model to the website owner is that they will constantly need
to be releasing new content to the users. Otherwise they will start to complain and may stop
paying for their subscription.
Utility – This is where a visitor pays for the amount they use the website, for example per
tutorial the user views. The advantage of this is that users can pick the content that they want
to pay to view which gives them more value for money. However the website owner doesn’t
have any fixed income from the website because the usage could change each month, this
means that the profit from a website can’t be relied upon as a source of income.
A website owner would make a decision about what sort of website to run based on what it is
they want to run, for example a business website would likely be based on the
merchant/manufacturer model whereas a general website could be created as a community
website for discussion about a topic the person is interested in.
6.4 - Discuss the advantages and disadvantages of various ecommerce models, in different
contexts
Q16: Can you discuss the various e-commerce models there are (business to business, business
to consumer, consumer to consumer, consumer to business) and Discuss What the Advantages
and Disadvantages of them are?
A: There are four main models that an e-Commerce can choose to follow. These are:
Business-to-Customer (B2C) – This is where a business will sell to customers – for example
Amazon and ASDA. The advantage of this is that the business has a potentially wider customer
base as the business is able to sell to a lot of customers rather than a smaller range of
businesses. However more customer service representatives will need to be hired to deal with
the increased customers.
Business-to-Business (B2B) – This is where a business will use an e-Commerce website to sell
goods to another business – for example a wholesaler business. The advantage of this is that
the business can sell to other businesses at cheaper prices because they have less
administration costs. However the business may not be as stable because they will be reliant on
the few businesses they wholesale goods to.
Customer-to-Business (C2B) – This is where a customer will use an e-Commerce website to sell
to a business. An example of this is freelance work where the customer asks a business to bid
for the work. The advantage of this type of website is that the website owner can take a
commission on all jobs organised through the website. A disadvantage of this is that the
business will need to manage the payments between different people and any conflicts that
arise.
Customer-to-Customer (C2C) – This is where a customer will sell to another customer on the
website, with the business being there to facilitate the sale. An example of this is an online
auction house such as eBay. The advantage of this is that customers set their own prices
depending on the market value of each item and the demand that each item is under, the
business is able to take a commission on each sale made. The disadvantage of this to a business
is that the website owner will need to resolve conflicts between the customers using the
website.
Print learner name:
Ryan Bibby
Learner signature:
[email protected]
Print assessor
name:
Conrad Davis
Assessor signature:
[email protected]
Date:
30/09/2015
Date:
08/09/2015