19
Exemplar for internal assessment resource Digital Technologies for Achievement Standard 91369 Exemplar for Internal Achievement Standard Digital Technologies Level 2 This exemplar supports assessment against: Achievement Standard 91369 Demonstrate understanding of advanced concepts of digital media An annotated exemplar is an extract of student evidence, with a commentary, to explain key aspects of the standard. These will assist teachers to make assessment judgements at the grade boundaries. New Zealand Qualification Authority To support internal assessment from 2014 © NZQA 2014

Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

Exemplar for internal assessment resource Digital Technologies for Achievement Standard 91369

Exemplar for Internal Achievement Standard

Digital Technologies Level 2

This exemplar supports assessment against:

Achievement Standard 91369

Demonstrate understanding of advanced concepts of digital media

An annotated exemplar is an extract of student evidence, with a commentary, to explain key aspects of the standard. These will assist teachers to make assessment judgements at the grade boundaries.

New Zealand Qualification Authority

To support internal assessment from 2014

© NZQA 2014

Page 2: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

Exemplar for internal assessment resource Digital Technologies for Achievement Standard 91369

Grade Boundary: Low Excellence

1. For Excellence, the student is required to demonstrate comprehensive understanding of advanced concepts of digital media. This involves:

• evaluating how the application of advanced tools, techniques, standards and conventions affect the quality of digital media outcomes

• discussing the relationship between standards and conventions, and legal, ethical and moral considerations in relation to the requirements of digital media outcomes.

The student has demonstrated comprehensive understanding by beginning to evaluate the use of code to ensure that a website displays on as many browsers as possible, particularly Internet Explorer in this example (1). The student has also provided some evaluation of the use of JavaScript (2). There is some discussion of jQuery, in relation to latency and google network servers (4). The student has provided some discussion about the ways that Disney and National Geographic protect children and operate in an ethical manner (3). For a more secure Excellence, the student would need to put forward a stronger evaluation which included some clear conclusions. For example, the student could evaluate the use of a local jQuery server or using jQuery from Google Hosted Libraries, showing the different coding used on websites. The discussion of ethical responsibilities could compare or contrast in more depth.

© NZQA 2014

Page 3: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

The Disney website designers are creating a site that had to look identical across every single browser from IE9+. To that point, a code has to be written which will look at different stylesheets that will deliver different styles for the different versions of Internet Explorer. The code used is Target IE. The designers have used the following code to make sure the pages display correctly on different versions of Internet Explorer. The if lt IE means if the user is using a Browser older than IE9, then use this stylesheet, the lt means if "equal to or less than” . If IE 9 means if using IE9 then use this stylesheet. <!--[if lt IE 9]> <link type="text/css" rel="stylesheet" href="http://www.disney.com.au/sites/default/files/css/css_ebP6ecuuwOlOA-voqbate11DFpo27RNg8fMpNY3wnDU.css" media="all" /> <![endif]--> <!--[if IE 9]> <link type="text/css" rel="stylesheet" href="http://www.disney.com.au/sites/default/files/css/css_tGfhbRmQbUQmGJxS0JC_8ly7ug_Pp4t6A8BdXOJ05Kc.css" media="all" /> <![endif]--> The application of this coding means that the pages will look the same on older versions of Internet Explorer and this is important – it improves the quality of the outcome for those viewers who have older computers.

JavaScript has been written to run this advertisement on the Disney website. However some mobile devices and internet users turn the script off. Likewise, on a mobile there is limited space and resize issue. So this script has been added to say fold the ads into the content so they show as one column or if the JS is disabled – don’t show the ads – meaning they won’t show up on the device or computer. <!-- Specific styling when JS is disabled eg. hide ads --> <noscript>

<style> #zone-admain-wrapper .block .block-inner,#block-block-3{display: none;} #zone-content-wrapper .view-id-features .item-list, #zone-publisher-header .carousel .slides{position: relative; left: inherit;} #zone-content-wrapper .view-id-features .item-list li.views-row-first + li + li, #zone-content-wrapper .view-id-features .item-list li.views-row-first + li + li + li + li + li{margin-right:0;} </style> </noscript> This application of advanced coding improves the quality of the outcome as the mobile device does not have to download or play the advert and the page is not taken up with the advert. This improves the user experience.

Conventions – legal/ethical/moral

On the Disney site the user cannot play a game unless they fill in the application form.

The form clearly states that if you are under 18 your need to enter a parent/guardian email address. The Form coding would check the DOB field against to determine if the user is 18 or over. If not the user would be prompted to enter the email address.

1

2

Page 4: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

At the bottom of the page there is a repeat of the message about being 18 or over. This is a legal requirement as there a prizes for winners and the prizes would be age appropriate.

Similarly the message at the bottom makes it clear that the competition is for Australian residents and it gives the dates of the competition. Plus there is a hyperlink to the terms and conditions of the competition. This is very important as Disney is legally obliged to provide this information and to provide age appropriate information/imagery/prizes.

Disney is conforming to expected standards and conventions in the way that children are allowed to access parts of their website. It is important that website providers do not unwittingly put young children in a position where they may be placed at risk.

Kids.national geographic.com allows children to upload photos and make comment and they also have processes in place where parents must give permission and the uploads are moderated prior to being posted. This is another great example of conforming to expected standards

NG Kids site uses the following code

<!-- SCRIPTS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <!-- jQuery -->

What this means is they are directing any user to the closest Google Network server and are not hosting jquery on their own server. This decreases latency as the CDN (Content delivery Network) distributes static content across several servers in different locations – when the user’s browser decides the URL for jQuery files, their download will automatically target the closets server in the Google network. In the case of Google’s AJAX Libraries CDN, what this means is that users of the NG website will be able to download jQuery faster rather than forcing them to download it from the NG server.

3

This competition is open to Australian residents of all ages. Entrants under 18 years of age must have a parent or guardian's permission to enter.

Entry is open from Monday 3 March 2014 at 09:00 (AEDT) and closes on Friday 21 March 2014 at 17:00 (AEDT). Full competition terms and conditions apply.

NG Kids My Shot

National Geographic Kids My Shot is a moderated photo sharing community where young photographers can tell their stories through pictures. Visitors to kids.nationalgeographic.com/kids/my-shot can register to join the community. A parent or guardian must agree to our Terms of Service and activate their child's membership before a child may proceed to upload photos, comment, or rate photos. The comments and photos are monitored by the NG Kids staff. Photos are viewable by visitors to the site and via public search engines.

4

Page 5: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

Exemplar for internal assessment resource Digital Technologies for Achievement Standard 91369

Grade Boundary: High Merit

2. For Merit the student is required to demonstrate in-depth understanding of advanced concepts of digital media which involves discussing:

• why advanced tools and techniques have been used to create, edit, and integrate digital media, and how their use has enhanced the outcome

• the positive and negative implications of adhering to digital media standards and conventions when developing digital media outcomes

• the importance of effective and appropriate asset management and file management in the development of digital media outcomes

• the importance of appropriate data integrity and testing procedures in the development of digital media outcomes.

The student has demonstrated in-depth understanding by discussing how liquid layouts are used, and their advantages and disadvantages. The student has also discussed the use of CSS and HTML, and the need for semantic structure in web design (1). The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded in HTML5, and the use of code commenting (2). The student has given strong reasons why asset management is important, and has related this to other examples of how it has occurred on the internet (3). The student has given examples to illustrate some of the consequences of not using good testing and data integrity, and how this may have a role in the public perception of the organisation (4). To reach Excellence, the student needs to demonstrate comprehensive understanding by discussing relationships, and evaluating tools and techniques.

© NZQA 2014

Page 6: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

Advanced tools are quite important in the creation of the Disney.co.nz website as the sites is quite complex and have a large number of pages so more than basic html with embedded CSS has to be used. If embedded CSS was used in the HTML pages then the pages would be unnecessarily far too long and would be difficult to keep the look and feel of the pages similar. Using CSS sheets and linking the pages to the sheets enables the designer to have the main HTML code cleaner and enables the reuse of the CSS code. It also means that for big websites the designer can use a number of CSS sheets to better control the layout and look of the pages. Where CSS is used to manage the layouts the user will generally be able to use the website as the layouts on each page are similar so that the user will easily be able to find the navigation and links. Major children’s websites such as Disney, Nickelodeon and National geographic also have to consider the brand that they represent and the image that they portray. The Disney website is generally easy to navigate and because the look is consistent it is easy to find the way around the website as are the other children’s sites mentioned. Presenting sites for children can be quite challenging as whilst the target audience is children the use of the site by adults has to be considered.

Disney has used the liquid layout features of the coding to ensure that the content will fit the screen regards of the monitor resolution or size. By doing this the web site is prepared better for viewing on mobile devices such as tablets. Some websites such as kids.nationalgeographic.com use a liquid layout for the background of the website but limit the content to a fixed width This may have users scrolling sideways of low resolutions or small monitors which is generally not liked by users.

Disney has used HTML5 for the coding of the website this can be seen by the tag

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML+RDFa 1.1//EN"> at the beginning of the HTML

Use of HTML5 is positive because it is the current standard and is the standard that most of the modern browsers have been programmed to use. HTML5 has a number of new tags that are used to enhance the way the page looks and is laid out. Some of the new features include the use of CSS3 and the use of video, audio and canvas elements some of which will eventually replace flash. CSS3 also includes a number of new layout tools such as rounded corners and drop shadows.

The use of HTML5 also has some problems not all browser interpret the code the same way and it is necessary to add hacks to the code to ensure that the website displays similarly on different browsers. This includes different versions of the same browser. Internet explorer is particularly bad at websites looking different between the versions. As HTML5 and CSS3 are a new standard they contain tags that older versions may not recognise so extra code sometimes has to be added to allow the content to display correctly.

Code used in websites should be commented and laid out in a way so that it is clearly able to be understood. Disney coders have done this to some extent but the CSS files are very jumbled. If the code is clearly laid out and commented then any web designer can easily make changes or understand what is happening without having to hunt through the code. Taking care to lay out the code and commenting it takes extra time in developing a website and hence cost but is worth it when future changes are made as any changes will be quicker.

2

1

Page 7: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

The Disney site has a number of assets such as videos images and sounds. It is important that these assets are placed into a file management structure with in the website so that they can be easily found when required and the code in the website can then also be easily added so that the assets are available on the website. Assets such as video and images need to be prepared for inclusion on websites. As users need to use internet bandwidth to view the assets it is normal to pack videos in to as small a file size as possible without compromising the quality of the video too much. Some websites have different versions of the video with different quality levels and users can chose to down load the version they wish to see. YouTube is a great example of how videos are compressed for viewing the trade-off is that the video may not be good enough to view full screen. Images need to be prepared to fit into the space allocated on the web page so normally are resampled to the size required and the resolution set to around 72dpi to display on the screen. Most images raw from a camera are 4-6 Megabytes ins size and typically for a website we would want file sizes of 100- 200 kilobytes to ensure fast loading. Some websites have thumbnails (small images) which when clicked open up to a larger resolution. Flickr which is a photo sharing website has a feature where several different resolutions are available. It is essential that the website loads quickly or else the user will not wait and go to another website.

Disney would seem to have done proofreading and checked that the website functions correctly as there appeared to be no issues. They also will have checked that any information given on the website is correct. In correct information may lead to Disney being sued if the information may be considered damaging to a group or individual

Data integrity is essential as the website is a public communication tool that the company uses. Errors on the website, poor function and incorrect information would undermine the creditability of Disney. These days most people who want information will use a website as the first point of contact with an organisation and then quickly form opinions about that organisation from the website

Before any changes go live on the internet there will have been a group of people that have checked and proof read any changed content. Webpages today are the public face of companies and people form opinions based on what they see on the website. Part of the check will include that nothing inappropriate has been included. In large organisations content that is to go onto the web is checked buy a number of people before it is published and often requires that a number of quality checks and sign offs are done.

3

4

Page 8: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

Exemplar for internal assessment resource Digital Technologies for Achievement Standard 91369

Grade Boundary: Low Merit

3. For Merit, the student is required to demonstrate in-depth understanding of advanced concepts of digital media. This involves discussing:

• why advanced tools and techniques have been used to create, edit, and integrate digital media, and how their use has enhanced the outcome

• the positive and negative implications of adhering to digital media standards and conventions when developing digital media outcomes

• the importance of effective and appropriate asset management and file management in the development of digital media outcomes

• the importance of appropriate data integrity and testing procedures in the development of digital media outcomes.

The student has demonstrated in-depth understanding by discussing standards and conventions when developing digital media outcomes. Some advantages and disadvantages are given of following basic standards for file naming and image labeling (1). The student has discussed data integrity and testing procedures by beginning to compare what happens to websites when viewed on different browsers (2). The student has given examples of different file types and how they compare in terms of file size and image quality, and has included some advantages for using good file management (3). The student has discussed liquid layouts, giving some of the advantages and disadvantages of their use (4). For a more secure Merit, the student could have made sure that advantages and disadvantages, or comparison/contrast, were given in all discussions. The discussion also needs to relate clearly back to the website.

© NZQA 2014

Page 9: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

People who are coding websites need to stick to some basic standards and conventions. For instance the home page is normally called index with html, htm or php etc, depending on the website type. This is necessary as web browsers only recognise a few names when browsing to a site, for instance if going to www.mysite.co.nz the browser would normally look for a page named index first. Coders should not use any spaces in filenames, when you do that the website gets displayed with %20 in the name in the URL bar. This demonstrates poor coding. Filenames used should relate to the content of the page so that the coders can follow the links. All pages should have a title tag which displays information about the page or the website. Images used and other assets used should have an alt tag so if they don’t display a placeholder information text comes up It can also be a good idea to put title tags on assets so that information like the name or copyright information is shown when you hover over the image. All of these things makes the website look more professional and may assist people who have difficulties with accessibility. When Validating web pages the validation procedure would identify any images without alt tags. The downside of this is that it takes longer to do the coding and the pages may have more code on them and will require more testing to ensure that everything works .

Data integrity and testing

We should test our website to make sure it is compatible with all browsers and platforms and make sure there are no errors so the users and customers do not get frustrated when they visit the site. The good thing about integrity is that the information should look and function the same way on each browser, for example Safari, Internet Explorer and Chrome. However, as all browsers are coded differently, our websites can look slightly different on them. Some computers don’t have the same fonts as the web designer’s computer would have and thus could result in a different looking website in general. This means it is important for the web designer to use a consistent front that exists on most computers (or by using the Google Fonts API code to add fonts), as well as using common colours. It is essential to debug and test the website comprehensively to make sure everything displays correctly across all of them.

Proof reading has to be applied by the web designer by detecting and correcting any spelling and grammatical errors on a website, this is important as it will maintain the creditability of a company or brand.

Another important testing function is dead or broken links. If a user comes across a broken link it would suggest the website and company are unprofessional and suggests the website is not regularly checked. So the web designer would have to double check the hyperlink, navigation bar etc for the pages they link to.

Optimisation of files

Optimisation is to reduce the time it takes to access a website. Compression reduces the image file size and consequently the time it takes to download and display in a browser. Common compression types include JPEG, GIF, and PNG. Most of these compression formats reduce the file size by removing information about the image. For example, the JPEG format reduces overall tonal range to reduce file size, PNG is lossless and compressed, however it can take longer than JPEG to save files, and they come out a little larger than JPEGs, however, there is no quality loss at all. Images hugely improve a website’s appeal. Without nice graphics, your pages would look dull and boring. However,

1

2

3

Page 10: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

you should keep in mind that web is such a medium where optimizing your images is an absolute must. Speed is crucial for the success of your site: if your pages are slow to load, your visitors will leave. Images / animations you keep on your pages need to look their best. You need to make sure your web pages load fast, or all your effort in bringing visitors to your site will be lost - they will leave without giving you a chance. You cannot assume that all of your visitors have fast connection - they don't - and saving few seconds and showing your site faster can make an enormous difference between people leaving in irritation or staying to see what you are offering

File management

As can be seen all files that serve a particular function are kept together e.g. css in one folder, fonts in another, photos in the images folder etc. This means it is easy for files to be found when they need to be used, edited or replaced. The images folder, while containing a large number of files are only those used in the actual site itself not extras that are a hangover from when the pages were being developed.

A tightly defined folder structure would also assist in the development of the site if it was being worked on by a team of developers. Imagine the chaos if each developer simply saved files wherever he or she wanted to!

Having a site organised like that above also means it is easier to maintain. This would become more evident after a period of time when it is harder to remember where particular parts of a site were placed at the time of development or if the author of the site moves on and it needs to be maintained by a new person.

Liquid Layouts

Liquid Layouts are used so the webpages always are spaced out the same way regardless of the window’s size. They are based on percentages and resize depending on the size of the browser window. They are used to make the website more compatible with both smaller and larger screen sizes to make the website more accessible and reduce white space around the edges of the webpage for larger resolution monitors. They can make a website look more professional and make it so that no matter what size the browser window is resized to, the website will always display correctly. The disadvantage of coding it is that liquid layouts can be more difficult to code for than fixed layouts as the percentages could work well on one screen resolution but not work at all on another. They tend to be more temperamental, and on smaller smartphone screens a small liquid layout size can cause the images which are of fixed size to be too large for the divisions that they are in and make it look visually unpleasing.

E.g. this code will make the pagewrap division 80% of the size of the website.

#pagewrap {width: 80 %;}

4

Page 11: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

Exemplar for internal assessment resource Digital Technologies for Achievement Standard 91369

Grade Boundary: High Achieved

4. For Achieved, the student is required to demonstrate understanding of advanced concepts of digital media. This involves explaining:

• how advanced tools and techniques have been used to create, edit and integrate digital media outcomes

• the standards and conventions used to produce digital media outcomes • how asset management and file management are applied in the development

of digital media outcomes • legal, ethical and moral considerations in relation to the requirements of

digital media outcomes in the wider community • the data integrity and testing procedures used to ensure the outcome meets

the specifications • how data integrity and testing procedures are applied when developing digital

media outcomes.

The student has demonstrated understanding by explaining the standards and conventions, for example the version of HTML used, the code commenting and the importance of file names and the use of title tags (1). The student has explained how CSS and HTML work together to display content, and explained some of the CSS and HTML tools used in the website (2). The student has explained some of the techniques used (search bars and rounded tabs) (3). An explanation of how asset management and file management are applied in the development of digital media outcomes is provided, but not shown in this exemplar. The student has explained the ethical responsibilities in the wider community (4). To reach Merit, the student would need to meet the criteria of in-depth understanding by discussing the importance of asset and file management, data integrity and testing processes, why advanced tools and techniques have been used, and the positives and negatives of adhering to standards.

© NZQA 2014

Page 12: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

National geographic Kids

This website is a partner website for the National Geographic’s Kid sTV Channel and is aimed at young people

The website has been coded using XHTML 1.0 we can tell this from the doctype tag

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This is now not the current standard used by webpage coding but was the previous standard to the current one (HTML5). The version of the standard is important as this decides on the tags that work and don’t work in the web browser. Each HTML version has new tags and depreciates older tags and this version still has good compatibility with most of the browsers in use at present. If the line of code was omitted then the web browser would not know how to display the web page properly. The web designer has to take care that the website will display correctly.

The web designer has taken care in this website to lay out the code in a fashion that is easy to follow and has used good code commenting so that the code can be understood. The CSS files are broken up into clear sections so that designers can understand the file.

The designer appears to have used the correct file names for the website, there are no spaces in the page names and underscores have been used where spaces are needed. Each Page has a title tag <title>Kids&#39; Games, Animals, Photos, Stories, and More -- National Geographic Kids</title>

This important as a professional website should not show untitled page in the browser tabs.

External or multiple style sheets

External style CSS sheets have been used and we can see this when we look at the links. At the end of the lines, the code (media="screen" rel="stylesheet" type="text/css" />) is used to link the website to the style sheet. There are more than one style sheet used in this website due to the website having many pages. This is good because the website keeps the same styles throughout the website. It also causes the website to load slower, causing longer loading times because it has to retrieve the info from somewhere else.

<link href="//images.nationalgeographic.com/wpf/sites/themes/unified/c/reset-cb1274462936.css" media="screen" rel="stylesheet" type="text/css" /><!-- Reset --> <link href="//images.nationalgeographic.com/wpf/sites/themes/global/c/screen-cb1367247845.css" media="screen" rel="stylesheet" type="text/css" /><!-- Controls Top Hat Elements --> <link href="//images.nationalgeographic.com/wpf/sites/common/c/utility-cb1363356033.css" media="screen" rel="stylesheet" type="text/css" /><!-- Controls Global Utility Elements --> <link href="//images.nationalgeographic.com/wpf/sites/common/c/screen-cb1388493391.css" media="screen" rel="stylesheet" type="text/css" /><!-- Controls Global Site Elements --> <link href="//images.nationalgeographic.com/wpf/sites/common/c/jcarousel/jcarousel-cb1274471334.css" media="screen" rel="stylesheet" type="text/css" /> <link href="//images.nationalgeographic.com/wpf/sites/common/c/jcarousel/skins/geocore/skin-cb1338468430.css" media="screen" rel="stylesheet" type="text/css" /> <!-- JS-enabled styles --> <link href="//images.nationalgeographic.com/wpf/sites/common/c/js_enabled-cb1374758028.css" media="screen" rel="stylesheet" type="text/css" /> <!-- start css js manager -->

1

2

Page 13: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

Search bars

The search bar allows the user to choose whether they search the site or for videos, which are useful because it makes searches faster and only, shows what the user wants. The bar is also a good

size on the page because it does not take up too much room on the web page and fits in with the websites design. The search bar in this website uses a meta data to find information which is similar to Bing and Yahoo. Google uses something called pigeon ranking, which is often faster and provides better results for you.

Rounded tabs

The website uses rounded tabs in the navigation bar because it gives the website an overall rounded feel and makes it look tiered, more organised and usable website. This is managed by the CSS files which are linked to the HTML as described above.

This site does not generally provide a user login so there are no issues with children’s privacy apart from the National Geographic Kids My Shot area for which parents must agree to their children having access and the terms of service. The site will collect email addresses from children but only for the purpose of responding “one time to a question or request for information from

a child, to allow a child to send an e-card to a friend, to award prizes in a game or sweepstakes feature on our site, or to contact a child’s parent or guardian for the purpose of obtaining consent for further collection and use of the child’s personal information. Without prior parental consent, we do not otherwise make use of personal information collected from children, nor do we provide it to third parties “(taken from the privacy policy). From the statements in the privacy policy National Geographic Kids website is trying to be a good corporate citizen and strongly supports privacy of children. This is a current social implication of dangers to children from online use and considers how the website can be viewed as be safe to use for children by the wider community

Where children are posting images or blogs they are moderated to ensure that no inappropriate materials get posted this means that the website is clear of materials that may cause offence which is extremely important for a child focussed website.

3

4

Page 14: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

Exemplar for internal assessment resource Digital Technologies for Achievement Standard 91369

Grade Boundary: Low Achieved

5. For Achieved the student is required to demonstrate understanding of advanced concepts of digital media. This involves explaining:

• how advanced tools and techniques have been used to create, edit and integrate digital media outcomes

• the standards and conventions used to produce digital media outcomes • how asset management and file management are applied in the development

of digital media outcomes • legal, ethical and moral considerations in relation to the requirements of

digital media outcomes in the wider community • the data integrity and testing procedures used to ensure the outcome meets

the specifications • how data integrity and testing procedures are applied when developing digital

media outcomes.

The student has demonstrated understanding by explaining how CSS and HTML work together to display content (1). The student has explained the standards and conventions, specifically the version of HTML used and the code commenting (2). The student has explained how asset management has been used in the website (3). The student has explained how the outcome meets the specifications by giving examples of ways that testing could occur (4). The student has given examples of what has occurred in the testing of the website (5). The student has explained the ethical responsibilities in the wider community (6). For a more secure Achieved, the student would need to give fuller explanations.

© NZQA 2014

Page 15: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

Nick.com

Nick. Com is the website that is the partner of Nickelodeon TV Channel

The site uses a number of advanced tools

HTML and CSS

The website has been coded using HTML 5 this is the latest standard for web sites and has introduced a number of new tags and depreciated some others. We can tell that HTML5 has been used because the first line is <!DOCTYPE html>. The absence of other information tell us this as earlier versions of HTML usually have the version Number. As HTML5 has been used the coders have had to add some code so the website will work with in particular earlier versions of Internet Explorer along with other browser specific tweaks

The layout is not that well-structured with most web pages having a lot of code much of which is jumbled together and it can be quite difficult to navigate the way through this code. There is some code commenting but it does not really give a lot of information as to how the coder has set up the website this could make it difficult for a new web developer to take over the website

The coder has used CSS to manage the layout of the pages CSS provides instructions to the HTML for Display things such as colours, font types, and some of the formatting of objects on the page like borders and image shapes In this case the website uses external CSS sheets

Below is the Part of the HTML for searching

Some of the CSS that relates to the HTML above What is seen on the screen

2

1

Page 16: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

This is quite an advanced technique as it is using the tools that HTML and CSS has to structure output to the screen

Asset Management

The website has used asset management well the website loads quite quickly and images and videos work well This would indicate that the images have been optimised to suit a web format of around 72DPI and will have been sized so that they are suitable for insertion into the web page.

Videos have been compressed so that they use a small amount of bandwidth to play from the web. This is required so that the user and the servers will no use excessive amounts of internet capacity to watch the videos. In this website the videos are not available in this location as it is a United States based website.

There are a number of flash based games on the website as well. Flash is used as it also has a small bandwidth requirement. Flash is gradually being phased out and will be replaced by HTML 5

File Management

The website when looking at the code has been organised into folders this is necessary so that assets and other parts of the website are organised and available for users and can be easily updated

Data Integrity

Websites need to be tested thoroughly before being released to the public this can range from a number of people looking at the website ,proofreading and checking that all of the links work and images and other media load. Websites should also be put through a code validator such as http://validator.w3.org/. As well the website needs to be checked against the design specifications to ensure that it meets them. The website needs to be tested in a number of different web browsers to check that the look and feel of the website is similar as the browsers all render the pages slightly differently.

Some testing of nick .com must have been done as in my looking at the site I could find no errors or dead links however when I put the code through http://validator.w3.org/ it came up with 393 errors on the home page This would mean that the proof readers had read and corrected any errors and deleted content that was not relevant but had not checked the coding.

Ethical issues

The Nick.com website has images of children on it from the shows that they screen; these images would be used with permission as that would be part of the contract. Nick.com also has images that show a multicultural consideration with actors displayed from a number of racial backgrounds this done to ensure that the channel and website will appeal to students from a number of backgrounds and to prevent children from feeling left out.

3

4

6

5

Page 17: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

Exemplar for internal assessment resource Digital Technologies for Achievement Standard 91369

Grade Boundary: High Not Achieved

6. For Achieved the student is required to demonstrate understanding of advanced concepts of digital media. This involves explaining:

• how advanced tools and techniques have been used to create, edit and integrate digital media outcomes

• the standards and conventions used to produce digital media outcomes • how asset management and file management are applied in the

development of digital media outcomes • legal, ethical and moral considerations in relation to the requirements of

digital media outcomes in the wider community • the data integrity and testing procedures used to ensure the outcome meets

the specifications • how data integrity and testing procedures are applied when developing

digital media outcomes.

The student has described advanced advanced tools and techniques have been used to create, edit and integrate digital media outcomes (1). The student has also described standards and conventions (2) asset and file management (3) ethical responsibilities (4) and data integrity and testing (5) (6).

To reach Achieved, the student would need to demonstrate understanding by moving from describing to explaining. The student would need to provide more information and use words such as ‘because’, ‘as’, ‘for’, etc. The explanation also needs to clearly relate to a real digital media outcome.

© NZQA 2014

Page 18: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

EXTERNAL STYLE SHEETS: Something that co=des for a style of more that one pages, Such as a nav bar. If it needs to be the same on each page then it is styled with an external style sheet. <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

CSS LAYOUT TECHNIQUES: CSS is what overrides the browser’s default settings for the layout of the webpage. It is controlling the layout of each page. When using CSS you can control the position, colour, fonts and styling of the website. CSS also controls divisions. The layout with CSS is more precise and is very accurate with positioning of items on the page. When items are floated in CSS e.g. Floated horizontally it means they can only move to the right or left, not up or down. When the item has been floated then other items will flow around it and elements before the floated element will not be affected. When modifying the body element in the CSS layout sheet for background colour it needs to be modified in the CSS document.

ABSOLUTE AND RELATIVE POSITIONING: Absolute positioning is when the item with the absolute positioning is not flowing with the rest of the webpage. It is placed on a certain place on the webpage. Relative Positioning is when the item is specified to be in a certain place on the screen for example a certain number of pixels to the left of the page and a certain number of pixels from the top of the page.

LIQUID LAYOUTS (%) : Liquid layouts are based on percentages of the current browser window’s size. They differ to the size of the window. They provide very efficient use because ir still shows the whole webpage in whatever screen it is displayed on

How Meta Data aids searching: Meta data is what searches for the titles, description and keywords of a page. Therefore meta tags are used to seach a webpage’s data. With the page being fully seached Meta data is likely to come up with more accurate search results.

How the doctype tag works: It instructs the browser as to what kind of HTML tag is in the webpage. The doctype tag is what gives the identity. Browsers cannot run without it

Naming convention for home pages: The home page should be named by what is in the site or the name of what is being advertised on the website. It should not be named along the lines of Home Page otherwise it would be very hard to search for the website and would lower the amount it is used possibly having affects to the company using it.

Why navigation bars should be consistent: Navigation bars should be the same on each page. They should be in the same place with the same style. Navigation bars are unordered lists. They need to have the same placement on each page to make the whole website consistent. If they are not the website looks unprofessional and poorly designed.

How folders are used in a website’s organization: Folders are used to better organize a website. If the website is randomly stacked in a computer then it would be incredibly difficult to manage. If it is in folders, such as pages, links and images then it is much easier to manage and link up. It is simply impractical to the images, links and webpages in different places in a computer.

Why we use compressed video files: Video files take up a lot space when on a webpage and for those using the webpage with possibly slower internet. Video files take up a lot of space and take long to load.

How and why we used image compression: Image files take up a lot space when on a webpage and for those using the webpage with possibly slower internet. Images are changed into different files which reduces the size and if placed on a webpage can help make the page load quicker.

1

2

3

Page 19: Exemplar for Internal Achievement Standard Digital ......The student has discussed standards and conventions by comparing the ways that different browsers may display websites coded

Legal, ethical and moral implications and consequences for the wider community and consequences of non-compliance: The website must fit the needs of the user and must not be offensive or illegal. For example megaupload was illegal and received many complaints. The poor moral implications of it got Kim Dotcom in a lot of legal trouble. The failure of megaupload is something that websites and website designers need to avoid.

Why data integrity and testing is used to ensure the website meets its specifications: Testing must be done to ensure that customers to the website meet their specifications for the reason of their visit to the website.

How data integrity is tested. (e.g.: Proof reading, browser testing, dead links): it can be tested through a number of programmers who test the site for any weaknesses and problems the website may have. It is tested in multiple browsers and different devices. Such as PC, Laptop, Mac, Tablets, iPhone, Android. Links are checked and the information on the site is check to see if correct.

4

5

6