Digital Technology Website Cheat Sheet Cheat Sheet (DRAFT) by [deleted]

Report format­ting:
Following are explan­ations of the various sections that usually make up a report:

Title Section:
If the report is short, the front cover can include any inform­ation that you feel is necessary including the author(s) and the date prepared. In a longer report, you may want to include a table of contents and defini­tions of terms.
Consider using a Microsoft Word Cover Page to improve the look of your title section. See https:­//s­upp­ort.of­fic­e.c­om/­en-­us/­art­icl­e/A­dd-­a-c­ove­r-p­age­-79­df8­0ec­-26­6d-­46d­6-9­382­-6d­70f­1d13777 for inform­ation on how to insert a Cover Page.

Introd­uction:
The first page of the report needs to have an introd­uction. You will explain what the report is about and why it is being made.

Summary:
There needs to be a summary of the major points, conclu­sions, and recomm­end­ations. It needs to be short as it is a general overview of the report. Some people will read the summary and only skim the report, so make sure you include all the relevant inform­ation. It would be best to write this last then insert it after the introd­uction section so you will include everyt­hing, even the points that might be added at the last minute.

Body:
This is the main section of the report. The previous sections needed to be written in plain English, but this section can include jargon from your industry. There needs to be several sections, with each having a subtitle. Inform­ation is usually arranged in order of importance with the most important inform­ation coming first.

Conclusion / Recomm­end­ations:
This is where everything comes together. Keep this section free of jargon as many people will read the Summary and Conclusion and not the rest of the report so you need it to be clear.

This is where you use what you have written in the body section to make a conclusion (your decision) and recomm­end­ations (what you think should happen.) Write this section in plain English and explain your recomm­end­ations, putting them in order of priority.

Note: As well as having the correct content, your report should also look profes­sional. Consider using Microsoft Word to apply a Style to your headings and body text to improve the overall appearance of your report. See http:/­/ww­w.g­cfl­ear­nfr­ee.o­rg­/wo­rd2­013/29 for more inform­ation on how to use Styles.
 
Tips for Good Writing
Here are a few tips for good writing:

Keep it simple
Do not try to impress; try to commun­icate. Keep the sentences short and to the point. Do not go into a lot of detail unless it is needed. Make sure every word needs to be there and that each contri­butes to the purpose of the report.
Use an active voice rather than passive.

Active voice uses fewer words than the passive voice and gives impact to the writing by emphas­izing the person or thing respon­sible for an action. The advantage of the active voice is that it makes the writing move smoothly and easily. Here is an example: Steve loves Amy.

The passive voice is used to show interest in the person or object that experi­ences an action, rather than the person or object that is actually performing the action. Passive voice uses more words and is not generally used in academic writing. Here is an example: Amy is loved by Steve.
Grammar and punctu­ation are important
Having someone proofread is a good idea. Remember that the computer cannot catch all the mistakes, especially with words like “red, read” or “there, their.”

Approach to take for the assess­ment:

Use the six areas listed below as the main headings in your report. You can modify the way they are written if you wish, as long as the meaning remains clear:
1. Advanced tools and techniques
2. Standards and conven­tions
3. Asset management and file management
4. Data integrity and testing procedures
5. Legal, ethical, and moral respon­sib­ilities
6. Relati­onship between standards and conven­tions and legal, ethical, and moral consid­era­tions

For each of areas 1, 2, 4 and 5, take the following approach:
Identify between six and ten subtopics that you wish to include. Suggested lists of subtopics are on the next page.
For each subtopic, complete the following:
• What is it? Explain
• The advantages and disadv­antages of it? How does it affect the quality of websites? Discuss
• Whether it has been done in the first site and how well? Provide examples from the code or screen­shots of the site. You can also talk about pros and cons of what the site has done here if you wish.
• Whether it has been done in the second site and how well? Provide examples from the code or screen­shots of the site. You can also talk about pros and cons of what the site has done here if you wish.
You may wish to write subhea­dings under each subtopic in your report before you tackle each of the above bullet points. Your subhea­dings could be something like “Expla­nation. Discus­sion. Worldvis. Virtalis.”

For area 3, take the following approach:
Explain how asset management and file management are applied in developing websites.
Discuss why it is important that asset and file management techniques are effective and approp­riate.
Suggested subtopics are on the next page.

For area 6, take the following approach:
Discuss the relati­onship between standards and conven­tions and legal, ethical, and moral consid­era­tions in relation to the requir­ements of websites.
In other words, how is the use of standards and conven­tions linked to the legal, ethical, and moral things we must consider when making websites.

Advanced tools and techniques
- navigation bars
- search functions
- navigation icons
- digita­l-f­riendly style sheets
- use of external and/or multiple cascading style sheets (CSS)
- use of semantic layout techniques
- use of absolu­te/­rel­ative positi­oning
- use of responsive design (liquid layouts) so the content adjusts to the size of a user’s screen.
- commenting code
- condit­ional commenting
- image positi­oning with code
- use of JavaScript

Standards and conven­tions
- use of metadata to aid searching
- use of a doc-type tag to indicate language and version used in the creation of the page
- use of the title tag
- correct opening and closing of HTML tags
- Indenting code
- separation of content from layout
- use of index, home, or default as file name of start page
- navigation placed consis­tently
- commented code
- object positi­oning
- using a shopping cart graphic and placing the shopping cart link in the upper right section of a page
- underl­ining links (and not using underl­ining unless it is for a usable link)
- a change in colour once a link has been activated
- using familiar, easy to read fonts
- consis­tency between web pages text colour and styles
- automating an order confir­mation so that the customer is reassured that their order has been received and will be processed
- regular updating of the site

Asset management and file management
- a folder structure is used to keep assets separate
- sound files are provided in a compressed format
- video files are provided in a compressed format
- images are optimised (compr­essed, but not pixelated)
- a file naming convention is used
- image backgr­ounds are tiled repeats to save file space.

Data integrity and testing procedures
- proofr­eading for accuracy
- websites look different in different browsers
- testing for function in multiple browsers, perhaps using an emulator such as screen­sho­ts.org
- checking of dead/d­ysf­unc­tional links
- checking the requir­ements of bandwidth and speed to ensure the website functions
- checking that e-commerce functions are secure and functi­onal.

Legal, ethical, and moral respon­sib­ilities
- legal copyright – for example, reminding users that content must belong to them in order for them to be able to share it, and ignoring this can result in charges and fines
- compliance with the Fair Trading Act – for example, the need for a site to ensure that users agree imagery is not subject to copyright before uploading it
- moral – for example, ensuring that visual imagery on a site is approp­riately inclusive and does not prejudice any particular group
- issues relating to security and authen­tic­ation – for example, how users identify themselves on a site where they are required to log in and comparing this with a site that does not require logging in
- ethical – for example, ensuring that users are of an approp­riate age, partic­ularly where online shopping is offered.

The width of a table in which web data is formatted can be set at a specific (absolute) size that will not change no matter what the size of the web visitor’s browser window or it can be allowed to change in size (relative) in relation to the web visitor’s browser.

Web visitors habitually scan pages looking for objects that confirm they are in the site they seek. An image, slogan or colour combin­ation that immedi­ately identifies a business or product visually will be remembered more easily than the business or product name.

A textual navigation aid, showing the path a visitor has taken to arrive at the web page they are currently viewing. The path is shown from site entry to current position so that a person can more easily find their way back to a level when they realise they have selected a wrong link (route).

Applying a shadow to a shape or graphic gives the illusion of depth so that the top ‘layer’ appears to be standing out from the text and other elements shown on the web visitor’s screen.

Coding that protects a web page from being hacked with the view to reading or changing code, or accessing data that is considered confid­ential.

Text or buttons that take a web user to a web page outside the web site that they are currently visiting. They should be formatted in a consistent style and listed separate from a paragraph or report so that the user is aware that they are leaving the host web site.

A web navigation term. Normally a button with text or a graphic that links web pages within a site back to the site’s home page. The button normally remains in the same location of each web page. Text is formatted in title case and the graphic used is normally the outline of a house so that it is easily identified by all web users.

Hyper Text Markup Language. This is the main language used for creating web pages. It is a code that tells the web browser what to display, where and how. All computers are programmed so that they can read HTML files. This is why web pages can be viewed in any country – all that is needed is a computer and an internet connec­tion.

Positioned each side of a web content instru­ction, these tell a browser where an element, such as a heading, paragraph, italic text format­ting, starts and finishes. The content between the tags should be written in lower case as this is a web standard. Line breaks are the only content element not requiring a closing tag. Images will not display if the file location is not specified between the tags.

Text or buttons that take a web user to a web page inside the web site that they are currently visiting. They should be formatted in a consistent style and are often contained in the body of text so that the visitor can seamlessly transfer to another section of the site to obtain specific inform­ation or move to an intera­ctive tool such as an email form, intera­ctive questi­onnaire or checkout.

A computer program that runs within the browser to make elements within a web page intera­ctive. For example, if a web visitor clicks a button titled ‘Reset form’, the program will activate the query ‘Are you sure that you wish to reset the form?’ and provide Yes/No options. JavaScript allows users to sign into specific web based accounts, such as Facebook, Personal Banking and Online retail sites.

Simple web page structures that are commonly used. These structures contain boxes of a variety of sizes into which text, images or text and images can be displayed. Navigation tools will be placed in a top or side bar. A web site’s unique point of difference is attained through colour, text styles and content.

A web page that downloads quickly and shows all elements is considered ‘frien­dly’. If a web page takes too long to download or elements such as images are missing, the web user may consider the page ‘unfri­endly’ and click to another site causing the potential loss of a customer.

A declar­ation of the document type that must be coded at the start of a web page to ensure that it is displayed correctly. The declar­ation states the HTML progra­mming code version and whether the page is to be made available to the public or specified web users.

Cascading style sheets are used to design the user interface - the visual display - of a web page that a web visitor will view. The sheets can be programmed with different text fonts, enhanc­ements, colour, alignment, line and word spacing. The sheets can be layered over one another and, for example, over a graphic backgr­ound, so that a more intere­sting and effective visual display is created for the web visitor.

An image that can be identified with a company, organi­sation or product. Most logos have been registered by the organi­sation they are identified with and are therefore subject to copyright laws.

Software that checks that a website works effect­ively from the point of view of the web visitor. Commercial validation packages will check all codes and report problems such as broken links, slow downlo­ading, spelling errors (in many langua­ges), and password protec­tion. This is necessary to ensure that the web visitor experience matches the intentions of the web designer.

Links formatted as boxes that are activated by a mouse click and will take the web visitor to another page within the web site. They can be labelled with text or an approp­riate graphic. Consis­tency of alignment, style, size, colour coding and text formatting across the web site is essential. Oversized and block capital buttons are inappr­opriate as they detract from the web page content.

World Wide Web. An unlimited and increasing number of documents (pages) that can be accessed through the Internet. The inform­ation contained within each document (page) may not be true or verifi­able.

Creating a visual plan of how a web site or page will be set up. This illust­ration is likely to contain the position of headings, text, images and other elements with limited explan­ation.

The way inform­ation appears on a web visitor’s screen will influence how long they stay on the web page. If there is too much text or the layout is confusing, a visitor will often move to another web site. Elements such as colours, font size and amount of scrolling required will also influence the popularity of a web page.

A way of soliciting a response from web visitors. This could take the form of a ‘Like’ button, a questi­onn­aire, quiz, a rating system or any other method that holds the visitor’s attention and encourages them to spend more time exploring a web page.

All elements found on a web page. This will include text, images, video, animations and sound.

World Wide Web Consor­tium. An organi­sation that aims to maintain the usability of the web by recomm­ending standards so that web pages are accessible to all web visitors. Go to http:/­/ww­w.w­3.org/ to learn more.

Checks that the web page code is correct so that it will work effect­ively in a range of web browsers – that it is compat­ible. This will ensure the web page is viewed as intended by online visitors and that its content can be identified by search engines.

Uniform Resource Locator. The global address of all documents on the World Wide Web. The print screen below shows the URL for the New Zealand Google home web page.

Describes an online document. Essential for HTML and XHTML documents. You can only have one of these. It will appear in the top browser window. It has nothing to do with the HTML file name you saved it as.

A document providing a textual or graphic display of all web pages within a web site. Normally displayed in a hierarchy for ease of naviga­tion, it also assists search engines to identify topics that may assist their users.