Useful tools for building websites

WordPress

WordPress is a comprehensive freeware platform for creating websites. The platform comes with a set of basic ‘block types’ which allow content creators to insert elements such as images, tables, numbered and bulleted lists, media and text paragraphs, HTML code and links. The WordPress content editor is known as Gutenberg. The greatest advantage of WordPress is that it enables people with limited technical skills to create attractive, sophisticated content. Using the basic Gutenberg editor is simple, and you can gradually expand your knowledge as you go.

WordPress plugins are add-ons to the platform that allow creators to produce enhanced web content, including interactive content. Many plugins are free, and some are free with extra paid functions. The list of free plugins is extensive and there are plugins that will do almost anything you could imagine. For security reasons, plugins should only be added via the WordPress Dashboard. Go to Dashboard > Plugins > Add New > Search Plugins.

Ultimate Addons for Gutenberg (UAG) is a free plugin which extends the basic block types available in the WordPress Gutenberg editor. I highly recommend it, as I have found it to be very useful.

The official WordPress Forums page is a useful place to go to get peer support from other web designers. Search for an existing thread before posting a new query. note that there are forum pages for many WordPress plugins such as Ultimate Addons for Gutenberg

H5P is a free plugin which allows you to create interactive HTML5 content such as puzzles, quizzes, interactive videos, and multiple choice, fill the blanks, drag and drop and drag the word activities. This is an awesome app for creating educational content. Activities can be copied, imported and exported and work in other platforms such as D2L Brightspace and Moodle. This quiz is an example of a H5P multi-type quiz activity with text, audio and a decorative image. This quiz is an example of a course presentation in H5P. I particularly like this format due to its versatility and look.

TablePress is a useful plugin which creates tables with content such as text and audio. Audio can be inserted into a cell with simple HTML code pointing at a file on your host as below:

This page shows an example of a simple Tablepress table.

WP Table Builder offers different features to TablePress. I use both of them, depending on what I want to do. WP Table Builder is simplicity itself, as it has a drag and drop interface, making table creation very simple. This page was created using WP Table Builder with content created in H5P, showing what these two plugins can create.

Platform for experimenting with the Moodle Learning Management System (LMS) at Elearning World

HTML Editors & support

https://html5-editor.net/ is a free HTML5 editor which makes basic HTML simple. It can also be used to clean up code with errors.

Learn to Code https://www.w3schools.com/

Unicode Character Table – unicode-table.com Great resource that allows you to copy/paste the code.

SUPERSCRIPT LETTERS IN UNICODE

Unicode Characters – Arrows and other characters (e.g. fullscreen ⤢ ) [to insert a Unicode character type the code and then Alt+X into Word or another editor]

Xah Lee Unicode Characters Arrows

AmpWhat easy to search for Unicode characters

Compart.com – Unicode characters and html code

HTML tutorial https://www.w3schools.com/html/default.asp

Resources for Developers, by Developers: https://developer.mozilla.org/en-US/

HTML shark: https://html-shark.com/

Computer Hope: Creating extra spaces before or after text

Audio editing tools

Audacity is a freeware audio recording and editing program which permits the export of sound recordings to a number of formats, including .wav, .mp3 and .ogg . Audacity can be downloaded here: https://www.audacityteam.org/download/

Online converter is useful for converting between audio formats https://www.online-convert.com/. It is especially useful for converting .mp3 files to mp4 video, as some plugins such as H5P require audio to be in .mp4 format. The website will also convert .pdf, images and ebooks to other formats.

Mp3 Gain normalises a group of mp3 files so that they all have the same level. This freeware program can be downloaded at http://mp3gain.sourceforge.net/

Audio Tool Set Convert between formats, normalise and edit

Video recording and editing

PowerPoint. Believe it or not, PowerPoint can be used to create simple videos with audio commentary. Simply create your ppt, record the voice over and export to video or save as Windows Media Video or MPEG4

DaVinci Resolve is a powerful video editing tool. The free version can be downloaded from https://www.blackmagicdesign.com/products/davinciresolve/

VideoProc is a video recording and editing program which paid and free versions. It’s quite useful for converting between versions and screen recording, but its video editing capabilities are rather limited. VideoProc can be downloaded here: https://www.videoproc.com/

Video Compressor will help you save disk space on your site, but for larger videos, it’s probably better to host them on an external site such as YouTube and embed them.

VideoLouder is an easy to use online platform which allows you to boost the volume of videos, compress videos and convert between formats.

Free images and clipart

Openclipart offers thousands of drawings which are totally free for commercial and non-commercial use. Go to https://openclipart.org/

Unsplash offers thousands of excellent, high-quality free photographs which are totally free for commercial and non-commercial use. Go to https://unsplash.com/ Remember to be careful to avoid images provided by sponsors which may not be free for commercial use (it is always easy to see this).

Pexels free stock photos https://www.pexels.com/

FREEPIK – https://www.freepik.com/ great range of high-quality freely shared photos.

Font identifiers

Font identifiers can also be useful when editing images. Got an image you created in the past and need to edit? Can’t remember the font you used? Fontsquirrel, WhatTheFont and Whatfontis are online tools which will identify it for you. I can’t say I’ve had a 100% success rate, but they have been very helpful.

OCR Tool – This tool will extract text from images. You can teach people with learning disabilities such as dyslexia to use this so they can convert content to text and change the font and spacing of the text. https://2ocr.com/ is a good OCR tool as is Google Lens (available in the image search in google.com),

The Snipping tool is a very useful tool to copy a section of an open window. This is much better than using the Print Screen button, especially if you are using dual screens. to copy the image to the clipboard. Press Shift + Windows + S and then use your mouse to select the area of the screen you want to copy to the clipboard. On Mac OS, the equivalent command is Shift, Command, 5.

Microsoft Paint comes free with Windows and is a useful tool for editing images, although what it can do is somewhat limited.

PowerPoint can be used to add shapes, text boxes, arrows and speech bubbles to existing images. Once the image has been modified, simply go to Slide Show > From Current Slide and then use the Snipping tool (Shift + Windows + S) to copy the image to the clipboard.

Microsoft Support: Crop a picture to fit in a shape

Great Word Cloud creator: https://www.wordclouds.com/ I really like this one due to its versatility. You can select a shape, including the shape of a letter and then add your own words and assign colours to each word.

Google Lens – A great tool for converting text in images into actual text which can be translated, copied, pasted and changed to accessible text. The phone app can be downloaded from Google Play or the Apple Store and Lens can via accessed on a computer via www.google.com. On the Google search page, click the camera image and either upload an image from your computer or paste an image from the clipboard.

Tools for finding HEX and RGB colour codes

iStock The Ultimate Guide to Hex Colors https://marketing.istockphoto.com/blog/hex-colors-guide/

https://image-color-picker.com/color-picker-from-screen This one lets you use Ctrl V to paste in an image you have captures and then you can select a colour from within the image by clicking with your mouse. It will then give you the HEX and RGB code for that colour.

W3schools.com https://www.w3schools.com/colors/colors_picker.asp This one has a colour wheel and then a series of options once you have picked a basic colour. You can then select options such as lightness, saturation and hue.

Crispedge: https://www.crispedge.com/color/ This one is a beauty. It has a large pallette of hex codes to browse through.

Imagecolorpicker.com – Do you need to use exactly the same shade of colour in an image you are creating? Don’t know the hex code or RGB code? No problem. With this tool, you can upload an image, paste a screenshot from your clipboard or nominate a website where you want to find the code from. Awesome tool!

Color Hex – palettes and hex codes

Coolers shows a number of main colours and allows you to select shades. Gives the hex codes.

Encycolorpedia is an awesome resource for finding hex codes and RGB codes for coloura.

Adobe colour wheel: allows a user to rotate the wheel to select different colours and tones. Also permits a user to upload a file and extract a gradient.

Unicode characters

Unicode Character Table allows you to search for a required character (e.g. “Right arrow” or “Bottom Arc Anticlockwise Arrow”). Once you’ve found the character you’re looking for, you can either use the Unicode key sequence or simply copy and paste the character.

toptal.com ….

W3schools UTF-8 Character sets (recommended character set in HTML5

Microsoft Support: Insert ASCII or Unicode Latin-based symbols and characters

Free image editing tools

Photo Scissors https://photoscissors.com/ is a free online tool that will remove the background of a photo, leaving only the main subject.

Photopea https://www.photopea.com/ – a free online tool for those of us who can’t afford Photoshop.

Pixlr E Photo editor & Design maker https://pixlr.com/e/#editor

5 Free photo editors with magnetic lasso tool https://www.ilovefreesoftware.com/03/featured/free-photo-editors-with-magnetic-lasso-tool.html

Programs for writing phonemic script

/fəˈni:mɪk/ Script Typewriter 1.7

Phonemicchart.com This is a great tool that I have used for some time. Unfortunately there now seems to be some security issue with the site, so I’m hoping this gets sorted soon.

ipa.typeit.org

https://westonruter.github.io/ipa-chart/keyboard/

PhoTransEdit Writing IPA

Creating disability friendly resources

Wikipedia – Web accessibility

WCAG 2.1 is the latest WWW standard for accessibility and these standards have adopted by many governments. Compliance is mandatory for larger companies and organisations in many jurisdictions. This non-technical document called WCAG 2.1 Understanding Docs from w3.org explains the rationales for the standards so that developers can understand the principles behind the technical standards. However, it should be noted that a working draft of WCAG 3 is available. WCAG 3 will further develop WAI-ARIA standards for non-visually displayed code that will help screen readers and other assistive technologies make sense of webpages. It is comforting to know that although content designers need to understand the principles, web development platforms such as WordPress do most of the hard work with WAI-ARIA coding automatically. The WAVE Web Accessibility Evaluation Tool should be used to check pages for accessibility and to correct errors.

British Dyslexia Association Dyslexia Style Guide

User Agent Accessibility Guidelines (UAAG)

Pearson Education Accessibility Guidelines for Higher Education

Victorian Government (Australia): Designer guidelines – Accessible Word docs, PDFs and InDesign files

Computer hope: How to create extra space in HTML or a web page

Pearson Education Accessibility Guidelines V1.

Pearson Education – Accessibility Guidelines for Higher Education.