DEMONSTRATE AN UNDERSTANDING OF TOOLS AND PRODUCTS AVAILABLE FOR WEB-SITE DEVELOPMENT 115372

PURPOSE OF THE UNIT STANDARD People credited with this unit standard are able to: Describe the use of HTML editors and other web site design/ maintenance tools Demonstrate an understanding of web browser plug-ins

The performance of all elements is to a standard that allows for further learning in this area.

LEARNING ASSUMED TO BE IN PLACE AND RECOGNITION OF PRIOR LEARNING The credit value of this unit is based on a person having prior knowledge and skills to: Demonstrate PC competency skills (End-User Computing unit Standards, at least up to NQF level 3.) Demonstrate an understanding of the use of web-sites in Business

UNIT STANDARD RANGE

N/A

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 22

INDEX

Competence Requirements Page Unit Standard 115372 alignment index Here you will find the different outcomes explained which you need to be proved 24 competent in, in order to complete the Unit Standard 115372. Unit Standard 115372 26 Describe the use of HTML editors and other web site design/ maintenance tools 28 Demonstrate an understanding of web browser plug-ins 40 Self-assessment Once you have completed all the questions after being facilitated, you need to check the progress you have made. If you feel that you are competent in the areas mentioned, you may tick the blocks, if however, you feel that you require 45 additional knowledge, you need to indicate so in the block below. Show this to your facilitator and make the necessary arrangements to assist you to become competent.

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 23

Unit Standard 115372 – Alignment Index

SPECIFIC OUTCOMES AND RELATED ASSESSMENT CRITERIA SO 1 Describe the use of HTML editors and other web site design/ maintenance tools AC 1 The description identifies HTML editors and other web site design/ maintenance tools The description outlines the advantages and disadvantages of HTML editors and AC 2 other web site design/ maintenance tools The description identifies important file formats associated with web sites and their AC 3 applications. Range: Includes but is not limited to: Graphics; Animation; Sound SO 2 Demonstrate an understanding of web browser plug-ins AC 1 The demonstration explains the role of web browser plug-ins The demonstration identifies the major plug-in types currently on the market: AC 2 Range: Includes but is not limited to: Java beans, Active-X controls

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 24

CRITICAL CROSS FIELD OUTCOMES UNIT STANDARD CCFO IDENTIFYING Identify, solve problems and make decisions in relation to the current systems development environments

UNIT STANDARD CCFO ORGANISING Organise and manage him/her self and his/her activities responsibly and effectively

UNIT STANDARD CCFO COMMUNICATING Communicate effectively using visual, mathematical and or language skills in the modes of oral and/ or written persuasion when engaging with systems development

UNIT STANDARD CCFO CONTRIBUTING Contribute to his/her full personal development and the social and economic development of the society at large by being aware of the importance of: reflecting on and exploring a variety of strategies to learn more effectively, exploring education and career opportunities and developing entrepreneurial opportunities ESSENTIAL EMBEDDED KNOWLEDGE Performance of all elements is to be carried out in accordance with organisation standards and procedures, unless otherwise stated. Organisation standards and procedures may cover: quality assurance, documentation, security, communication, health and safety, and personal behaviour. An example of the standards expected is the standards found in ISO 9000 Certified Organisations. Performance of all elements complies with the laws of South Africa, especially with regard to copyright, privacy, health and safety, and consumer rights. All activities must comply with any policies, procedures and requirements of the organisations involved, the ethical codes of relevant professional bodies and any relevant legislative and/ or regulatory requirements. Performance of all elements must demonstrate an understanding of etiquette on the Internet for personal and business use.

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 25

All qualifications and part qualifications registered on the National Qualifications Framework are public property. Thus the only payment that can be made for them is for service and reproduction. It is illegal to sell this material for profit. If the material is reproduced or quoted, the South African Qualifications Authority (SAQA) should be acknowledged as the source.

SOUTH AFRICAN QUALIFICATIONS AUTHORITY REGISTERED UNIT STANDARD: Demonstrate an understanding of tools and products available for web-site development

SAQA US ID UNIT STANDARD TITLE

115372 Demonstrate an understanding of tools and products available for web-site development

ORIGINATOR

SGB Computer Sciences and Information Systems

FIELD SUBFIELD

Field 10 - Physical, Mathematical, Computer and Life Sciences Information Technology and Computer Sciences

ABET BAND UNIT STANDARD TYPE PRE-2009 NQF LEVEL NQF LEVEL CREDITS

Undefined Regular Level 5 Level TBA: Pre-2009 was L5 3

REGISTRATION STATUS REGISTRATION START DATE REGISTRATION END DATE SAQA DECISION NUMBER

Reregistered 2018-07-01 2023-06-30 SAQA 06120/18

LAST DATE FOR ENROLMENT LAST DATE FOR ACHIEVEMENT

2024-06-30 2027-06-30

In all of the tables in this document, both the pre-2009 NQF Level and the NQF Level is shown. In the text (purpose statements, qualification rules, etc), any references to NQF Levels are to the pre-2009 levels unless specifically stated otherwise.

PURPOSE OF THE UNIT STANDARD People credited with this unit standard are able to:  Describe the use of HTML editors and other web site design/ maintenance tools  Demonstrate an understanding of web browser plug-ins The performance of all elements is to a standard that allows for further learning in this area.

LEARNING ASSUMED TO BE IN PLACE AND RECOGNITION OF PRIOR LEARNING The credit value of this unit is based on a person having prior knowledge and skills to:  Demonstrate PC competency skills (End-User Computing unit Standards, at least up to NQF level 3.)  Demonstrate an understanding of the use of web-sites in Business

UNIT STANDARD RANGE N/A

Specific Outcomes and Assessment Criteria: SPECIFIC OUTCOME 1 Describe the use of HTML editors and other web site design/ maintenance tools. ASSESSMENT CRITERION 1 The description identifies HTML editors and other web site design/ maintenance tools ASSESSMENT CRITERION 2 The description outlines the advantages and disadvantages of HTML editors and other web site design/ maintenance tools ASSESSMENT CRITERION 3 The description identifies important file formats associated with web sites and their applications ASSESSMENT CRITERION RANGE Includes but is not limited to: Graphics; Animation; Sound

SPECIFIC OUTCOME 2 Demonstrate an understanding of web browser plug-ins. ASSESSMENT CRITERION 1 The demonstration explains the role of web browser plug-ins ASSESSMENT CRITERION 2 The demonstration identifies the major plug-in types currently on the market ASSESSMENT CRITERION RANGE Includes but is not limited to: Java beans, Active-X controls

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 26

UNIT STANDARD ACCREDITATION AND MODERATION OPTIONS The relevant Education and Training Quality Authority (ETQA) must accredit providers before they can offer programs of education and training assessed against unit standards Moderation Process:  Moderation of assessment will be overseen by the relevant ETQA according to the moderation guidelines in the relevant qualification and the agreed ETQA procedures

UNIT STANDARD ESSENTIAL EMBEDDED KNOWLEDGE  Performance of all elements is to be carried out in accordance with organisation standards and procedures, unless otherwise stated. Organisation standards and procedures may cover: quality assurance, documentation, security, communication, health and safety, and personal behaviour. An example of the standards expected is the standards found in ISO 9000 Certified Organisations.  Performance of all elements complies with the laws of South Africa, especially with regard to copyright, privacy, health and safety, and consumer rights.  All activities must comply with any policies, procedures and requirements of the organisations involved, the ethical codes of relevant professional bodies and any relevant legislative and/ or regulatory requirements.  Performance of all elements must demonstrate an understanding of etiquette on the Internet for personal and business use.

UNIT STANDARD DEVELOPMENTAL OUTCOME N/A

UNIT STANDARD LINKAGES N/A

Critical Cross-field Outcomes (CCFO):

UNIT STANDARD CCFO IDENTIFYING Identify, solve problems and make decisions in relation to the current systems development environments

UNIT STANDARD CCFO ORGANISING Organise and manage him/her self and his/her activities responsibly and effectively

UNIT STANDARD CCFO COMMUNICATING Communicate effectively using visual, mathematical and or language skills in the modes of oral and/ or written persuasion when engaging with systems development

UNIT STANDARD CCFO CONTRIBUTING Contribute to his/her full personal development and the social and economic development of the society at large by being aware of the importance of: reflecting on and exploring a variety of strategies to learn more effectively, exploring education and career opportunities and developing entrepreneurial opportunities

UNIT STANDARD ASSESSOR CRITERIA N/A

REREGISTRATION HISTORY As per the SAQA Board decision/s at that time, this unit standard was Reregistered in 2012; 2015.

UNIT STANDARD NOTES Supplementary information:  None

Sub-Sub-Field (Domain):  Systems Development - Web Design

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 27

Describe the use of HTML editors and other web site design/ maintenance tools Time: 120 minutes Activity: Self and Group

SO1-AC1 he description identifies HTML editors and other web site design/ maintenance tools An HTML editor is a specialized piece of software that assists in the creation of T HTML code. Similar to text editors such as Notepad and TextEdit, HTML editors allow users to enter raw text. Most (if not all) professional web developers use an HTML editor to create and maintain their websites. This is because a good HTML editor can boost productivity enormously.

HTML Editor vs Text Editor The main difference between an HTML editor and a simple text editor, is that the HTML editor has more functionality - functionality that assists in creating web pages quickly and easily.

While it's true that you can code HTML using a basic text editor, an HTML editor will make your life much easier. For example, an HTML editor will detect when you write an opening HTML tag, so it will automatically insert the closing tag for you, thus reducing the amount of typing required. Some HTML editors are a "WYSIWYG editor", allowing you to edit in WYSIWYG mode. This can make it extremely easy to create a website.

What is a WYSIWYG Editor? Perhaps the question should be "What is an HTML editor with WYSIWYG mode?". WYSIWYG stands for "What You See Is What You Get". When an HTML editor is in WYSIWYG mode, the HTML page is rendered as though it is being viewed with a web browser.

The only difference is that, the web developer can edit the page at the same time. Most WYSIWYG editors allow the developer to move page elements by "clicking and dragging" them around the page. Formatting text with a WYSIWYG editor is a simple as highlighting the text, then clicking the "Bold" button (or whichever button you need).

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 28

Just like in a word processing program like Microsoft Word, or a desktop publishing application, such as QuarkXpress. which allows you to see what the page will look like while you're editing it. It's kind of like editing a preview of your web page.

Although usually referred to as "WYSIWYG editors", these are better described as an HTML editor with WYSIWYG mode. The user can switch between "Code view" and "WYSIWYG view".

Advanced HTML Editors If you intend to code using more than just HTML and CSS, you may find a basic HTML editor very limiting. That's because, many basic editors don't support scripting languages such as JavaScript, PHP and ColdFusion. Most web developers use more than just HTML and CSS and it can become laborious having to switch between different editors for different languages.

That's why more advanced HTML editors like CFEclipse (for ColdFusion applications) are so popular with professional web developers. These types of editors provide an Integrated Development Environment (IDE) for building multiple large-scale web applications.

Maintenance Tools The most commonly known tools are those of ; let’s take a look at their offerings regarding the website maintenance tools… Website Optimizer Google’s website optimizer helps you test variations of different elements on your website, often from a usability perspective, to see which helps convert visitors the best. These changes can be small, like changing the size, colour, or wording of an element on your website, but they can all have a big impact. Basically, this helps you make sure that your website is doing what it’s intended to.

Keyword Research Tool Google’s keywords tool helps you research keyword and keyword variations to use when optimizing your website. You can analyse the keywords by search volume or by the competition for that keyword, both of which are important to consider when deciding which keywords you should incorporate in your SEO efforts.

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 29

SO1-AC2 he description outlines the advantages and disadvantages of

HTML editors and other web site design/ maintenance tools HTML Editors - Features T Like any software, different HTML editors have different features. However, there are some features that are inherent in most HTML editors. For example, one would expect that even the most basic of HTML editors would include the "autocomplete" feature (where the editor automatically inserts closing tags, double quotes for attributes etc).

Here are some of the more common features seen in HTML editors:  HTML and CSS autocomplete. Sometimes called "code completion", the autocomplete feature detects when you begin to type HTML or CSS. It will then automatically insert the rest of the HTML/CSS code for you (for example, closing tags).  HTML entities library. This feature allows you to insert HTML entities with a click of the mouse. (What are HTML entities?)  Site Explorer. This feature allows you to navigate the files in your website using a hierarchical menu (similar to Windows Explorer).  Built in FTP client. Some HTML editors enable you to FTP to your web server straight from the HTML editor. In other words, you can publish your changes without having to fire up a separate FTP client. This makes publishing much quicker and easier.  Search and Replace. Most HTML editors have a search and replace of some kind. Some of the better ones will have advanced features, such as being able to search through a whole website project and searching only certain file types (eg, only files with an .html extension).  Split-Screen View. This is where you can set up the screen to show half code, half preview.  These are only some of the many features that you're likely to encounter when searching for an HTML editor. Some features can really make your life much easier, so it's often better to pay a bit extra and get a full-featured editor.

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 30

What is a WYSIWYG HTML editor? WYSIWYG (don’t hurt yourself pronouncing it) stands for What You See Is What You Get. WYSIWYG HTML editors let you create web pages (or HTML pages, if you like) without knowing HTML tags (or even what HTML stands for :-).

How do they work? These HTML editors provide a graphical interface (a GUI) and have an array of tools with which you develop web pages. If you have any experience with popular text editors such as MS Word and have created documents with images, tables, lists etc. you would be able to develop web pages with WYSIWYG HTML editors without any problem.

WYSIWYG HTML editors have several tools quite like the ones that you see on MS Word (or any other text editor). These tools let you insert images, tables, lists, hyperlinks etc. with a few clicks. For example, to insert an image you first click on the place where you want the image to be added and then click on the relevant icon. You would now be asked to select an image from your hard-drive and once you do that… Lo! your web page will now be dressed up with a graphic.

When inserting an image, certain WYSIWYG HTML editors might also ask you to specify other attributes of the image such as its width, height, whether you want a border around it, the text to be displayed in case the image is not (called the ALT text)… but you can ignore these if you want. Once the image has been added, the editor writes the HTML code for you! Thus, you see your web page being created and don’t need to know what goes on behind the scene.

Most editors also offer a HTML code viewer in which the HTML code of the web page is displayed. You can use this viewer to see how your web page is being developed and can even edit the code directly if you know a little HTML. Most developers like the HTML code viewers as they are good learning tools for beginners. For instance, when you insert an image or a table, you can quickly see the corresponding HTML tags in the viewer. This way you can begin learning HTML.

So in essence, WYSIWYG HTML editors make it very simple for you to create a web page without digging through the intricacies of HTML.

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 31

The Advantages of WYSIWYG HTML editors WYSIWYG HTML editors are frowned upon by expert web developers (or anyone who thinks he/she is an “expert” developer). In fact, it would not be wrong in saying that it is “fashionable” to have a contemptuous view of WYSIWYG HTML editors and people who use them. The experts in their high-headedness forget that the web is a platform for sharing information dissemination and gathering information. And the web is not a place only for “expert” developers, it’s for everyone.

It is not compulsory for someone to first learn HTML in order to create web pages. If there are tools that can automate web site development or hasten the process for beginners, there is no harm in using them.

WYSIWYG HTML editors are great tools for beginners to quickly create web pages and put them on the net. Now any one, without knowing HTML, can create visually appealing (?) web sites of their family, pets, business… you name it!

That said, if you want to make web sites for a living start learning HTML from scratch. Why? Because there are several things that you will miss out or ignore when developing pages with WYSIWYG editors. There’s no denial that with these programs can help beginners create sites quickly, but you will overlook many features that HTML has to offer if you use the editors.

The main common advantages of WYSIWYG HTML editors:  Anyone can create web sites and put them online  Create web sites quickly  No prior programming knowledge required – no need to know what HTML code looks like  Provide a platform to start learn HTML

The Disadvantages As I mentioned before, WYSIWYG HTML editors are fine for beginners or if you want to create a web site quickly and don’t want to fiddle around with HTML code. However, if you plan to develop web sites for a living, make a career out of web development you need to learn HTML properly. Some developers don’t use WYSIWYG HTML editors; they never have. That’s because some of them belong to an old school and also there were no editors available when they first learnt HTML.

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 32

But they don’t look at these programs disdainfully. In fact, the disadvantages and the flaws about to be mentioned have more to do with showing you the light and helping you become a better web developer.

A lot of HTML code churned out by the editors is superfluous which makes the web pages bulky in file size and as you will know, a large file download slowly that a smaller one. Also search engines need to wade through all this code to get to the meat of the page – the actual text contents.

WYSIWYG editors let you ignore certain aspects that are important to say the least. For instance, the need for the image ALT attribute should be explicitly mentioned by the editors and images should not be included without the ALT text.

If the purpose of a WYSIWYG editor is to hold a beginner’s hand and guide him/her through the process of creating a web page, the programs should tell the importance of certain HTML attributes and tags. FYI, the ALT text is used by search engines and thus it’s a good idea to have your chosen keywords appear there.

Another example is the heading tags of a web page. These are very important from a search engine’s point of view. Thus, you need to put your keywords in an

or

tag and not just have text that “look” big and appear as a heading.

Several editors have been accused of letting users employ “browser specific HTML tags”. These tags, as their name suggest, will appear well on certain web browser and ignored by others. These tags are also generally not compliant with the HTML standards set by the W3C (World Wide Web Consortium). Most editors still use HTML tables to layout a page. This is an older technique replaced by Cascading Style Sheets.

HTML written by the WYSIWYG editors is usually not correct or validated. I am not saying that all web pages need to have valid HTML – in fact the web pages of some of the most popular web sites in the world would not validate if you checked it out. But as mentioned above, if you are plan to make a career in web development you should know that your HTML code needs to be validated and not just look pretty in a web browser.

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 33

HTML was meant for document structure not document design. However, WYSIWYG HTML editors work on exactly the opposite line of thought. One needs to understand that HTML determines the different elements on a page such as a heading, paragraph, list etc. How these elements will look is the prerogative of the web browser. Also, with Cascading Style Sheets (CSS), the design and “visual” of a web page is segregated from the actual content. Thus, the content of the web page resides in HTML while the look (colours, positioning etc.) lies in the CSS rules.

WYSIWYG HTML editors might help beginners create web pages quickly, but an experienced web developer can code equally fast (if not faster). Furthermore, pages developed by experts are optimized and adhere to standards.

WYSIWYG editors simply do not provide enough support and help in optimizing your web site for search engines. This is vital! You can have the most beautiful looking web site in the world but if no one’s able to locate it, well! And this is what we will discuss next.

Search engines and WYSIWYG HTML editors The question that should be of interest to all users of these editors: Do manually coded sites rank better than those developed with WYSIWYG HTML editors? Not necessarily. Search engine algorithms take several factors into consideration and some of the important ones are:  Web site content: Content needs to be fresh, meaningful and useful  Number of inbound links: The more the number of links your site has from other sites the better. Quality of these inbound links is also a factor. Thus, incoming links from famous sites carry a higher weightage than those from less popular web sites.  Presence of keywords at appropriate places on a web page: The mere presence of keyword does not help. Keywords need to appear on the so called “hot spots” like the TITLE tag, the heading tags, link text etc.  Though a web site developed in a WYSIWYG HTML editor might rank higher than ones coded manually (if one has followed the important Search Engine Optimization principles), I suggest that you keep the design and layout simple. Do not create complex designed web site using WYSIWYG HTML editors. Because the more complex your design, the more the superfluous code generated by the editor. And this makes it difficult for search engines to dig out the “actual” content of the web page. In my opinion, keep your designs and layouts simple and clean.

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 34

SO1-AC3 he description identifies important file formats associated with web sites and their applications. T Graphics file formats The primary web file formats are (pronounced “jiff”), (“jay-peg”), and, to a much lesser extent, png (“ping”) files. All three common web graphic formats are so-called graphics, made up of a checkerboard grid of thousands of tiny coloured square picture elements, or pixels. Bitmap files are the familiar types of files produced by cell phone and digital cameras, and are easily created, edited, resized, and optimized for web use with such widely available tools as Adobe’s Photoshop or Elements, Corel’s Paint Shop Pro and Painter, and other photo editing programs.

For efficient delivery over the Internet, virtually all web graphics are compressed to keep file sizes as small as possible. Most web sites use both gif and jpeg images. Choosing between these file types is largely a matter of assessing: The nature of the image (is the image a “photographic” collection of smooth tonal transitions or a diagrammatic image with hard edges and lines?) The effect of various kinds of file compression on image quality The efficiency of a compression technique in producing the smallest file size that looks good

GIF Graphics The CompuServe Information Service popularized the Graphic Interchange Format (gif) in the 1980s as an efficient means to transmit images across data networks. In the early 1990s the original designers of the World Wide Web adopted gif for its efficiency and widespread familiarity. Many images on the web are in gif format, and virtually all web browsers that support graphics can display gif files. gif files incorporate a “lossless” compression scheme to keep file sizes at a minimum without compromising quality. However, gif files are 8-bit graphics and thus can only accommodate 256 colours.

GIF file compression The gif file format uses a relatively basic form of file compression (Lempel Ziv Welch, or lzw) that squeezes out inefficiencies in data storage without losing data or distorting the image. The lzw compression scheme is best at compressing images with large fields of homogeneous colour, such as logos and diagrams. It is much less efficient at compressing complicated “photographic” pictures with many colours and complex textures.

JPEG graphics

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 35

The other graphic file format commonly used on the web to minimize graphics file sizes is the Joint Photographic Experts Group (jpeg) compression scheme. Unlike gif graphics, jpeg images are full-colour images that dedicate at least 24 bits of memory to each pixel, resulting in images that can incorporate 16.8 million colours. jpeg images are used extensively among photographers, artists, graphic designers, medical imaging specialists, art historians, and other groups for whom image quality and colour fidelity is important. A form of jpeg file called “progressive jpeg” gives jpeg graphics the same gradually built display seen in interlaced . Like interlaced gifs, progressive jpeg images often take longer to load onto the page than standard , but they do offer the user a quicker preview.

PNG graphics Portable Network Graphic (png) is an image format developed by a consortium of graphic software developers as a non-proprietary alternative to the gif image format. As mentioned above, CompuServe developed the gif format, and gif uses the proprietary lzw compression scheme, which was patented by Unisys Corporation, meaning that any graphics tool developer making software that saved in gif format had to pay a royalty to Unisys and CompuServe. The patent has since expired, and software developers can use the gif format freely. png graphics were designed specifically for use on web pages, and they offer a range of attractive features, including a full range of colour depths, support for sophisticated image transparency, better interlacing, and automatic corrections for display monitor gamma. png images can also hold a short text description of the image’s content, which allows Internet search engines to search for images based on these embedded text descriptions.

Animation file formats The format used for the animation is entirely based around how complex the animation is, where the animation is designed to be used; such as a webpage, and how large the file is for the animation. Different formats for animations include animated GIFs, Dynamic HTML such as Java, Shockwave and Flash.

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 36

Dynamic HTML Dynamic HTML is a type of HTML, which is used along side client scripting languages, such as Java Script. It can be used to create simple animations such as a button and drop down menus. Although a massive downside to using Dynamic HTML is since there are various types of browsers such as Google Chrome and FireFox, information is displayed differently meaning Dynamic HTML may not always be effective.

Flash Flash allows users to create animations frame by frame, including using certain materials such as and scripting such as in ActionScript. Flash is also useful for animations since it can include the use of sound and . It is also possible to create a website using Flash, however since the entire website uses flash it may require high internet speeds in order to load.

Flash also needs a Flash player installed onto the computer in order to show content, although most computers already tend to have this installed. Flash files (FLA) have to be converted into SWF format before they can be used on the internet. The SWF format was originally composed to store animations in, including sounds, however it can also be used for other purposes such as website building and process forms.

Shockwave Shockwave is used more for 3D graphics and streaming . It is designed to work with a Director application, which can then compile various types of assets into a multimedia product, on a much larger scale then Flash.

Animated GIFs GIF images which are animated normally have various images combined into a single GIF file. Applications, such as GIF89A, cycle through the various images in the GIF file in order to create an animation. While GIFs have a limited amount of flexibility and less amount of control compared to other formats, although since it is supported by almost every single web browser, it has become extremely popular. GIF files also tend to be smaller then other animation files.

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 37

File Size There are various ways to reduce the file size of an animation, through the use of Vector images instead of Bitmaps images due to its use of math rather then images. These Vector images can also be optimized to reduce the file size. Images and sounds can be compressed to cut down on file size, using less different styles of font and font sizes and keeping text together all help reduce the overall file size.

Sound file formats There are a number of different types of Audio files. The most common are Wave files () and MPEG Layer-3 files (). There are, however, many other audio file types discussed below. The type is usually determined by the file extension (what comes after the "." in the file name). For example, ".wav", ".mp3" or ".dct".

The way the audio is compressed and stored is call the which determines how small the file size is. Some file types always use a particular codec. For example, ".mp3" files always use the "MPEG Layer-3" codec. Other files like ".wav" and ".dct" files support selectable .

For example, a ".wav" file can be encoded with the "PCM", "GSM6.10", "MPEG3" and many other codecs. Be careful not to confuse the file type with the codec - it often surprises people to know you can have a "MPEG Layer-3" encoded ".wav" file.

Some file types just contain the audio. But other file types can contain additional header information which can contain other information about the file (eg .dct files have information about the sender, priority, notes and other data in the file itself).

Open File Formats  wav - standard used mainly in Windows PCs. Commonly used for storing uncompressed (PCM), CD-quality sound files, which means that they can be large in size - around 10MB per minute of music. It is less well known that wave files can also be encoded with a variety of codecs to reduce the file size (for example the GSM or mp3 codecs). A list of common wave file codecs can be found here. Sample .wav file.  mp3 - the MPEG Layer-3 format is the most popular format for downloading and storing music. By eliminating portions of the audio file that are essentially inaudible, mp3 files are compressed to roughly one-tenth the size of an equivalent PCM file while maintaining good audio quality. We recommend the mp3 format for music storage. It

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 38

is not that good for voice storage. See here for a sample mp3 encoded wav file. Sample .mp3 file.  - a free, open source container format supporting a variety of codecs, the most popular of which is the . Vorbis files are often compared to MP3 files in terms of quality. But the simple fact mp3 are so much more broadly supported makes it difficult to recommend ogg files. Sample .ogg file.  - designed for telephony use in Europe, gsm is a very practical format for telephone quality voice. It makes a good compromise between file size and quality. We recommend this format for voice. Note that wav files can also be encoded with the gsm codec. See here for a sample gsm encoded wav file. Sample .gsm file.  dct - A variable codec format designed for dictation. It has dictation header information and can be encrypted (often required by medical confidentiality laws). See here for a list of codecs supported in dct files. The standard dct player is the Express Scribe Transcription Player.  - a codec. You can think of lossless compression as like zip but for audio. If you compress a PCM file to flac and then restore it again it will be a perfect copy of the original. (All the other codecs discussed here are lossy which means a small part of the quality is lost). The cost of this losslessness is that the compression ratio is not good. But we recommend flac for archiving PCM files where quality is important (eg. broadcast or music use). Sample .flac file.  au - the standard audio file format used by Sun, Unix and Java. The audio in au files can be PCM or compressed with the ulaw, alaw or G729 codecs. Sample .au file.  aiff - the standard audio file format used by Apple. It is like a wav file for the Mac. Sample .aif file.  vox - the vox format most commonly uses the Dialogic ADPCM (Adaptive Differential Pulse Code Modulation) codec. Similar to other ADPCM formats, it compresses to 4- bits. Vox format files are similar to wave files except that the vox files contain no information about the file itself so the codec sample rate and number of channels must first be specified in order to play a vox file. Vox a very old file type and is pretty poor. We do not recommend it for anything except for supporting legacy systems. Sample .vox file.  raw - a raw file can contain audio in any codec but is usually used with PCM audio data. It is rarely used except for technical tests. Sample .raw file.

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 39

Demonstrate an understanding of web browser plug-ins Time: 120 minutes Activity: Self and Group

SO2-AC1 he demonstration explains the role of web browser plug-ins In general, plug-ins are part of an array of software components known as add-ons. Programs may be changed by different kinds of add-ons in different ways. In T popular technologies, like Internet browsers and audio/video applications, the ability to utilize plug-ins makes products more versatile and allows transparent and convenient customization according to the user's desired features.

Plug-ins also can enable easier software upgrades or patches or additions by project collaborators. Plug-ins also can be a strategy for dealing with complex software licensing. One plug-in example is the range of customizable options common with browsers like Mozilla Firefox. Users can download individual plug-ins for this free Web browser tool to promote different results on devices.

Plugins are software additions that allow for the customization of computer programs, apps, and web browsers; as well as the customization of the content offered by websites. While plugins continue to be used as add-ons to customize programs and apps, their use in web browsers has decreased somewhat, in favour of using browser extensions instead.

Plugins are also all of the little add-ons that optimize the content you put out as an online creator. As the content consumer, they're the extras that allow you to experience the internet in a myriad of ways that include images, sound, videos, and animation. Plugins also help web pages and websites be more than just big blocks of text; there are plugins to enhance the SEO of your blog posts, to display YouTube and Vimeo videos on your website, or even help customize your website's fonts.

What Are Some Good Plugins to Have and Why? While the once widely used web browser plugins have fallen out of favour, with many of them no longer supported by popular browsers, and having been largely replaced by the use of browser extensions, there are a few plugins that are still useful with everyday computing and browsing.

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 40

Here are a few good plugins to help customize your user experience with web browsing, content creation, and with your favourite apps and programs:  Adobe Acrobat Reader: We're all expected to view PDFs these days. This plugin allows you to access and view those important documents.  Adobe Flash Player: Sometimes, in order to view videos online, a plugin called Adobe Flash Player has to be enabled.

There are many different kinds of plugins available for downloads. The most common examples are plugins or extensions made for web browsers. These extensions are exclusive for the particular web browser they are made for. For instance, plugins or extensions for Chrome will not be applicable for Internet Explorer and vice versa.

Plugins or extensions for web browsers are able to perform a variety of tasks from enabling the use of emoticons to changing your browsing location (comes in handy where access to some web pages is not authorized when user is browsing from within certain countries).

Some of the well-known browser plugins include Adobe Flash Player, QuickTime Player, and Twinword Finder. Adobe Flash Player and QuickTime Player enables the web browser to read files written in certain format (SWF, AVI and etc.) that it would otherwise be unable to, by default.

Twinword Finder on the other hand, is an add on semantic search functionality for browsers. It reduces research time by providing related search results through understanding of searcher intent and the contextual meaning of terms. Find-on-page results are returned in highlighted paragraphs on the web page. Web browser plugins and extensions are available for download in their respective web browser plugin stores:  Chrome Web Store  Safari Extensions  Firefox Add-ons  Internet Explorer Add-ons

Plugins are also widely available and used on WordPress, a powerful blogging and website content management system (CMS). According to WordPress beginner’s guide, a plugin is a piece of software containing a group of functions that can be added to a WordPress website.

They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 41

WordPress. From theme makers to writing tools, there is also a directory dedicated to list and house all the available WordPress Plugin Directory.

Some of the more popular WordPress Plugins among content marketers include Yoast SEO, which analyzes the degree of Search Engine Optimization (SEO) for a specific set of focus keywords, Twinword Writer, which helps users to write better by providing instant search for synonyms and related words.

SO2-AC2 he demonstration identifies the major plug-in types currently on the market: Range: Includes but is not limited to: Java beans, T Active-X controls Java Plug-in is a software product from , Inc. that allows enterprise web managers to direct Java applets and JavaBeans components on their intranet web pages to run using Sun's Java Runtime Environment (JRE).

Java Plug-in extends the functionality of a web browser, allowing applets or Java Beans to be run under Sun's Java 2 runtime environment (JRE) rather than the Java runtime environment that comes with the web browser. Java Plug-in is part of Sun's JRE and is installed with it when the JRE is installed on a computer. It works with both Netscape and Internet Explorer.

This functionality can be achieved in two different ways:  By using the conventional APPLET tag in a web page.  By replacing the APPLET tag with the OBJECT tag for Internet Explorer; by replacing the APPLET tag with the EMBED tag for Netscape 4. Note, however, that the OBJECT and EMBED tags must conform to a special format as described in the next chapter, Using OBJECT, EMBED and APPLET Tags in Java Plug-in.

While the above constitutes the heart of Java Plug-in, there are many other related topics that you may want to understand. For instance, you may want to know how proxy configuration works in Java Plug-in, you may want to know what protocols Java Plug-in supports, or you may want to know about cookie support and caching. Java Plug-in may be deployed in various ways—on the Internet, within an intranet, via Java Server Pages, etc. Java Servlets and Beans are compiled binary code on a web server. When a browser-client requests a servlet or bean, the server and its host run the Java program, the

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 42

program returns HTML code to the server, then the server sends the HTML to the browser- client.

Java Server Pages (JSP, file-name *.jsp) are text files on a web-server. They contain a combination of HTML code and Java source code. When a browser-client requests a JSP, the server and its host first compile, then run the Java code, the Java returns HTML code to the server, then the server sends the HTML to the browser-client. After the first request, the compiled Java code is cached on the server for quick access next time.

Java Applets are binary files on a web server. When a browser-client requests an HTML page that includes a link to an applet, the server sends the applet down to the browser. The Java code then runs on the browser’s host machine and its output appears in the browser window.

ActiveX controls ActiveX controls are Internet Explorer’s version of plug-ins. For example, Internet Explorer’s Flash player is an ActiveX control. Unfortunately, ActiveX controls have been a significant source of security problems. ActiveX controls are essentially pieces of software and have access to your entire computer if you opt to install and run them. If you’re using Internet Explorer, websites can prompt you to install ActiveX controls and this feature can be used for malicious purposes.

What ActiveX Controls Do An ActiveX control is a small program for Internet Explorer, often referred to as an add-on. ActiveX controls are like other programs they aren’t restricted from doing bad things with your computer. They could monitor your personal browsing habits, install malware, generate pop-ups, log your keystrokes and passwords, and do other malicious things.

ActiveX controls are actually not Internet Explorer-only. They also work in other Microsoft applications, such as Microsoft Office. Other browsers, such as Firefox, Chrome, Safari, and Opera, all use other types of browser plug-ins. ActiveX controls only function in Internet Explorer. A website that requires an ActiveX control is an Internet Explorer-only website.

You should avoid installing ActiveX controls unless you trust their source. Certain ActiveX controls are normal for example, if you’re using Internet Explorer you probably have the Flash Player ActiveX control installed but you should avoid installing other ActiveX controls if possible.

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 43

For example, while Oracle is a trustworthy corporation that isn’t out to infect your computer (unless you count the Ask Toolbar they slip into updates), the Java ActiveX control has security vulnerabilities and could be used to infect your computer.

The more ActiveX controls you install, the more websites can take advantage of their problems to damage your computer. Reduce your attack surface by uninstalling potentially vulnerable ActiveX controls you don’t use. Modern versions of Internet Explorer include features like ActiveX Filtering, Protected Mode, and “killbits” that prevent vulnerable ActiveX controls from running. Unfortunately, ActiveX controls are unsecure by their very design and nothing can be done to make them completely secure.

You can view the ActiveX controls you have installed by clicking the gear menu in Internet Explorer and selecting Manage Add-ons. Click the box under Show and select All add-ons. You will probably have a variety of common ActiveX controls installed system-wide, such as Adobe’s Shockwave Flash, Microsoft Silverlight, and Windows Media Player. You can disable these from here, but you’ll have to uninstall them from the Control Panel if you want to remove them from your system.

In summary, ActiveX controls are dangerous and you should only install them if you need to do so and trust the source. Sure, install the Flash Player ActiveX control but if you’re browsing the web and a website wants to install an ActiveX control, you should probably decline the offer. Even if you do opt to install an ActiveX control from a trusted source, you should probably remove it when it’s no longer necessary to reduce your attack surface and help secure your computer.

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 44

You are now ready to go through a check list. Be honest with yourself

Tick the box with either a √ or an X to indicate your response

 I am able to describe the use of HTML editors and other web site design/ maintenance tools  I am able to demonstrate an understanding of web browser plug-ins.

You must think about any point you could not tick. Write this down as a goal. Decide on a plan of action to achieve these goals. Regularly review these goals.

My Goals and Planning: ______

NC: IT: SYSTEMS DEVELOPMENT AUTHOR: LEARNER MANUAL REL DATE: 27/01/2020 REV DATE: 01/01/2023 DOC REF: 48872 LM MOD 6 V-1 PAGE 45