Contents

Page Section Comments
Introduction  
HTML5 HTM5- ideal for web based educational content?
Cascading Style Sheets CSS3 CSS3 and HTML5 go hand in glove
Javascript Javascript may be used effectively with HTML5 and CSS3
Data Bases and Server side Scripting MySQL and php can be used server side for management systems
Images and Diagrams HTML5 supports scalable vector graphics
Mathematics Equations formatted in Mathml or TeX render correctly in HTML5
Useful Links  
Summary You may find these links useful

Introduction

Production of web based content requires the use of several technologies, some of which we shall review.

Our interest is mainly in STEM subjects in Higher Education.

There are software packages available that allow the educational process to be managed effectively, such as:

Some Learning Management Systems (LMS) Tasks
Course Content Delivery
Student Administration
Scheduling and Student Tracking
Curriculum Management
Skills and Competencies Management
Reporting
Courseware Authoring
Resource Management
 
Some Learning Content Management Systems (LCMS) Tasks
Collaborative Content Development
Content Management (i.e., indexing and reuse)
Publishing
Workflow Integration
Automated Interface with an LMS

For a more detailed list of tasks go to Wikipedia

A LCMS could encompass all the tasks of an LMS and provide additional high level capabilities.

LMS systems are mainly concerned with management of the learning environment.

Moodle is an example of an LMS that is popular in higher education; it is a free open source system

Note: no matter what system is used the content has to be produced

Does HTML5 offer a universal method of content production that will operate on a large number of platforms and meet accessibility and validation requirements?

HTML5

HTML5 is a semantic language, tags are descriptive of the type of content they hold.

When a students read an HTML5 web page they cannot tell it has been produced in HTML5.

When Web agents, such as IE, FF, Safari and screen readers read the page they can interpret it.

 

An example of a fragment of a web page using HTML5 (shown in red) is:

 

<section class="page-section"> The section tag tells web agents the content following has semantic meaning. The class"page-section" styles the section.

<h3><a id="s03"></a>Section Title</h3> The section should have a title. In this case the <a> tag has been used to make it possible to jump to it from a table of contents.

<p>Section content</p> Section content can include images, diagrams and text etc.

<aside class="section-aside"> The aside tag tells web agents a part of the page contains content aside from, but related to, the content it is associated with.
<h4>aside heading</h4> The aside heading uses the heading tag <h4>
<p>text</p> <p> is a paragraph a tag.
</aside> This tag closes the aside zone. Tags must have an opening and end tag to inform web agents when they start and end.

<p>More section content</p> This paragraph is still in the section zone, it could be above or below the aside zone.
<button type="button" onClick="location.href='#top'">To top</button> This is the code for a simple HTML5 button.
</section>

All the tags in this code fragment have been styled using CSS3.

The use of red text is not accessibility friendly- the visually impaired and screen readers will not find it helpful.

The red text causes contrast errors when tested in an accessibility checker.

Should we not use color, when we know it is a benefit for people that are not visually impaired?

Cascading Style Sheets - CSS3

HTML5 has been designed to integrate effectively with Cascading Style Sheets, CSS3 in particular.

HTML5 tags inform web agents about the type of content they hold.

CSS inform web agents about the appearance and layout of the page- that is it styles them.

The style for the page-section above is:

.page-section{
float:left;
width:99%;
margin: 0.1em;
padding:0.1em;
border-bottom: thin solid;
border-bottom-color:#F90;
border-bottom-style: dashed;
}

float left tells the students browser to position the section of the web page. Float left allows text to be positioned on the left of the section.

width defines the width of the section, in this case 99% of the web page.

margin defines the space around the section, on the outside of the border, in this case 0.1em.

padding defines space between border and the section content.

The em unit is a measure of the size (actually width) of a text character, 1em is the width of the letter M, in whatever font is being used.

All the border-bottom styles define the appearance of the section border:

border-bottom: thin solid; defines the thickness of the border at the bottom of the section.

border-bottom-color:#F90; defines the color of the bottom border- #F90 is the hexadecimal code of the required color.

border-bottom-style: dashed; makes the bottom border dashed.

The effect is to produce a colored dashed line at the bottom of each page section, as can be seen at the end of this page section.

Javascript- JS

Javascript is used to dynamically change the appearance and/or behaviour of web page elements.

HTML5 has been designed to work with Javascript.

So if you want user interaction with web page elements it is likely you can get what you want using Javascript.

However, HTML5 and CSS3 can also produce some effects that Javascript can.

For example, the table of contents at the top of this web page have been styled using only HTML5 and CSS3.

An identical styling can be achieved using JS.

Animations can also be produced with Javascript.

Javascript operates on the students computer and is implemented by the browser the student is using.

Databases and Server side Scripting

Moodle is a popular open source free online Learning Management System often used in higher educational establishments.

Moodle uses the server side scripting language php.

It also uses a number of databases including MySQL.

If you use an LMS you will be using a server side scripting language and a database.

LM Systems help with course administration, content management, student tracking etc.

 

Course content must still be produced, no matter what LMS you use. Learning management systems are useful, but the quality of content is what students are interested in.

 

To see what a modern LMS can do visit https://moodle.org/

 

Images and Diagrams

Images and diagrams are important educational elements, "a picture is worth a thousand words".

There are two problems with graphics on the web: accessibility and scalability.

Accessibility

Images in gif or jpeg format cannot be interpreted by screen readers.

Images have an HTML alt tag associated with them.

To meet accessibility requirements the image alt tag should contain a brief description of the image that a screen reader can interpret.

In addition to the alt tag it is possible to use a long descriptor, a longer description of the image, or a web URL that takes the user to a different web page.

In educational web pages, the image may described in its associated text, in which case a long descriptor is not necessary.

The alt tag should always be used.

Scalability

Scalability means that when an image size is changed, it should still make sense to the reader.

Scalability has become more important with the emergence of a variety of mobile devices, such as tablets and smart phones.

Raster based images, such as gif and jpeg do not scale properly, they may pixelate.

To get some idea how changing an images size, use zoom in your browser.

Press the ctrl-+ to increase size, ctrl- to decrease size and ctrl-0 (zero) to return to normal size.

This is not a complete test because the pixel density changes for device to device. A tablet may have a higher pixel density that your desktop display.

Image formats are chosen for the type of image being used, for example, a photograph would use jpeg format.

Diagrams can be produced in a Scalable Vector Format (SVG) that scale correctly when their size is changed.

HTML5 supports SVG format, so that diagrams scale properly when they are viewed on devices of different size.

 

Two SVG graphic editors that are free are:

http://code.google.com/p/svg-edit/ Described as a lightweight editor used in a browser window. SVG code, in text format, may be easily obtained.

http://www.inkscape.org/en/ This is a more comprehensive graphics editor that can save files in a variety of formats as well as SVG

 

The SVG code for a simple rectangle produced in svg-edit is:

 

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<rect id="svg_1" height="90" width="277" y="134" x="89" stroke-width="5" stroke="#000000" fill="#FF0000"/>
</g>
</svg>

 

Note the use of tags: svg is a text based language. In principle SVG diagrams can be interpreted by a screen reader and satisfy accessibility requirements

Mathematics

STEM subjects often require the use of mathematical equations. This applies to many aspects of product development.

Equations can be rendered to a high level of quality in printed format, but until recently rendering equations on the web posed real problems.

Formulating equations using an equation editor was not a difficult but they were converted to images so they could be displayed on the web.

HTML is a text based mark up language, which was originally designed to render text, using ASCII.

Now text rendering is based on the UTF-8 character sets- there are no characters allocated to mathematical symbols.

Fortunately it is now possible to render equations using text based markup languages like Mathml and TeX.

The process we use is:

Create equations in the equation editor Mathtype- this creates equation in a MS Word document.

Within the MS Word document convert the equations to Mathml or TeX

The Mathml code or TeX appears in the word document.

Copy the code in the document and paste it in the appropriate place in the HTML document you want the equations to appear in.

Use mathjax to render the equations correctly by the students browser when the page is loaded.

Mathjax uses a Content Delivery Network (CDN) to render the equations on the students computer.

The process is demonstrated using a very simple algebraic equation.

The following script is included in the head of the HTML page- note the use of javascript.

<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>

<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

The equation to be rendered is created in the equation editor- Mathtype in this case.

The TeX Code is created by Mathtype, copied and then pasted into the HTML document.

The TeX code for the equation is:

{{V}_{T}}=\frac{{{V}_{DD}}}{2}\pm 0.3{{V}_{DD}} Note this code is not complete, it should be preceded and terminated by the $ sign.

 

If the $ sign had been included the code would have been processed by Mathjax!

The equation is:

${{V}_{T}}=\frac{{{V}_{DD}}}{2}\pm 0.3{{V}_{DD}}$

To see the real web page code just display the code for this page in your browser and check the Mathjax script and TeX code.

Note we have only described a process for rendering equations on the web.

Equations have to be understood, created, checked for technical accuracy and probably explained by someone who understands mathematics.

Equations of any complexity and type may be rendered- they may include text, equation numbers, be in-line or block.

The equation editor must be chosen, a qualified person or persons must learn to use it and the output of the editor must be incorporated in the above process.

In principle, the equation could can be read by screen readers and comply with accessibly requirements.

 

Useful Links

Learning Management Systems

http://en.wikipedia.org/wiki/Learning_management_system a good overview of LMS, CMS, LCMS etc.

https://moodle.org/ the moodle website

 

Some Scalable Graphic Editors

https://code.google.com/p/svg-edit/ SVG-edit 2.7 downloaded.

http://www.inkscape.org/en/ download inkscape from this site

Equations

http://www.dessci.com/en/products/mathtype/ a low cost but effective equation editor

http://en.wikipedia.org/wiki/TeX TeX explained

http://en.wikipedia.org/wiki/Mathml Mathml explained

http://en.wikipedia.org/wiki/Mathjax Mathjax explained

http://www.mathjax.org/ the Mathjax website

 

Content Delivery Networks

http://en.wikipedia.org/wiki/Content_delivery_network CDNs explained

 

Summary

This article has over viewed some of the main web based technologies used for education purposes on the Internet.

Producing educational content for use on the web is not simple- it requires several skill sets.

Managing content production is not straightforward: HTML, CSS and SVG diagrams should be validated.

Content should be checked to ensure it meets accessibility requirements.

Of course web pages must be checked to ensure they are compliant with the major browsers.

In addition to all of the above, the content must be of the correct academic standard, must be technically accurate and must be easy to navigate.

If the content contains assessments tests must be checked and tracked.

Tutoring must be organised and managed.

Content may be used by students on a variety of devices, such as desktops, tablets, smart phones etc.

 

It is hoped that integrated technologies like HTML, CSS3, SVG and Mathml will make the production and management of educational content easier and consistent.

This does not mean that propriety systems and software will not have an important place in web based education.

It does mean they will produce universal output that can be rendered by the wide range of devices available, without the need for fixes.