5 THINGS WE CAN DO WITH HTML
· Recognise and synthesise speech
These would once have been complex functions requiring
specialised software, but they’re now being built directly into browsers. The
Web Speech API has components which support text-to-speech and speech-to-text.
The latter of these will either use an online service (Chrome uses the Google
Cloud Speech API) or the device’s native speech recognition service. Expect to
see this being used widely on mobile devices in the future.
· Display a colour picker
Trivial as it may sound, this is a great example of how
HTML5 is simplifying common tasks which would previously have required custom
coding of a fairly complex UI component. <input type="color">
will display a visual colour picker when clicked, using a colour picker native to
the device. This could be particularly useful with HTML canvas. It’s widely
supported with the exception of Safari on mobile.
· Recolour the browser UI
This can offer a nice aesthetic touch on mobile platforms.
<meta name="theme-color" content="#FFFFFF" /> is
designed to instruct the browser to recolour the toolbar when viewing your
site. Unfortunately, it’s a little non-standardised, so while
"theme-color" works with Chrome, Firefox and Opera, on iOS you’ll
need "apple-mobile-web-app-status-bar-style" (only works in
fullscreen mode).
· Different images for different
screens
Hopefully you’re already implementing responsive design, in
which case your images will be resizing to suit the viewport. This isn’t
perfect, since you’ll be forcing the user to download the largest version of
the image then downsampling it. Enter the HTML5
<picture> element, which enables you to specify
different images to be displayed depending on the screen resolution the site is
being viewed on.
· Vibrate your phone
The unambiguously named Vibration API exposes a single
function, vibrate(), which will do exactly what it says on devices which
support it. The function takes a list describing a vibration pattern as its
argument. It’ll work on Chrome, Firefox and Opera, although you’re out of luck
on Edge or Safari. It’s reported that some ads are using this to attract the
user’s attention, so the jury’s out on whether it’s actually a good idea.
0 Comments