Learning Outcomes
• identify and evaluate key multimedia and interactive features used in:
– websites supporting e-commerce
– social media
– gaming
• define the term multimedia authoring
• demonstrate understanding of the following features and their role in multimedia authoring: – hypertext – video – animation – sound – scripting
An e-commerce transaction is the sale or purchase of goods or services, conducted over computer networks by methods specifically designed for the purpose of receiving or placing of orders. An e-commerce transaction can be between enterprises, households, individuals, governments, and other public or private organisations. To be excluded are orders made by telephone calls, facsimile or manually typed e-mail. Source: OECD Glossary of Statistical Terms.
E-commerce can involve either:
• searching for a particular item using a search engine (which could be internal to the site or a general online search engine)
• browsing a site in a general manner looking at what is on offer without having a particular item in mind In both cases the available items can be further shortlisted by using interactive features on the website to apply filters and sort the list of products shown.
Decisions about what to buy will be made after clicking on buttons, menus, hyperlinks and scrolling for further details, perhaps jumping between multiple pages of product listings because too many products showing on one web page would involve downloading too many images at once and may impact upon performance. Browsing an e-commerce site typically involves:
• switching between menus
• looking at tables of data about the items
• using zoom tools to enlarge photographs and perhaps also using rotation tools when a 3D model of the product is available to spin around
• contacting sellers using embedded messaging or chat tools or clicking “mailto” links or filling in small forms to sign up to newsletters or request a callback
• choosing options from combo boxes such as size, colour or style desired
• exposure to rollover effects, pop-ups, animations, videos or sounds to persuade buyers to commit to buying
• clicking on icons to switch currency or language
E-commerce sites typically use multiple web pages that are template-based so that the company’s brand is reinforced and the buyer has a smooth experience of engaging with the site.
Standards tend to be followed such as placing menus at the top or left to minimise buyer frustration. Buyers wishing to proceed with placing orders typically add their purchases to a shopping basket/cart. This will automatically calculate the total payment due and may display this or other information (such as the quantity of items in the basket) on the website within the shopping basket icon while the buyer continues to browse.
Some goods/services such as concert tickets can only be held in a buyer’s basket for short periods of time before they get released for sale to the public again and buyers may therefore see an active timer counting down and warning them how much longer they have left.
When the buyer is ready to complete their order they will use an online form to submit their delivery address details from which delivery charges can be computed. The payment will be taken through the use of a separate online form where the user may even be forwarded to a web page linking them to their bank where they must supply a password to authenticate their payment card.
Since personal information is being transmitted at this point, the website will make use of encryption and the user may be notified with an alert and see subtle changes, e.g. the URL may change to using https:// as its protocol.
The forms used may have built-in validation scripts to check that standard formats for bank card details and postcodes have been followed before the data gets transmitted. Radio buttons, check boxes, combo boxes and list boxes aim to restrict what a buyer can select. Usually, buyers will see a confirmation page which signals that their payment has been accepted or declined and may contain a print button to print the order confirmation in printer-friendly formatting. Such confirmation pages often warn against pressing the Refresh or Back buttons on their web browser toolbar as this could lead to duplicate payments.
Buyers are also usually sent an email notification detailing their order. Some sites will invite users to create accounts that they can log back in to after their first visit. This aids order tracking. Orders may be rewarded via the generation of unique voucher codes that can be redeemed against future orders, perhaps with partner companies.
When purchases turn out to be unsatisfactory, e-commerce sites may provide downloadable printable QR codes or barcodes for sticking to items being returned.
E-Commerce Website Case Study: Jonzara Jonzara is a ladies’ clothing shop in County Down that also sells its goods via e-commerce.
Working from top to bottom, their home page (www.jonzara. co.uk) features:
• a textual company logo left-aligned at the top, with icons in line with it aligned to the right (a standard position on which to place the shopping basket icon), as well as a login icon, the company’s telephone number and a currency switcher icon
• a navigation menu bar that pops down when certain options are rolled over, and an internal search engine is embedded alongside the menu bar on the right
• an animated sequence of 9 images sitting above 4 columns of text, hyperlinks and images
• a standard template footer that includes hyperlinks to social media sites, account setting information, a newsletter subscription form tool
Social media tools vary in their focus, but most involve the following activities:
• publishing user-generated text-based content such as personal reflections
• publishing user-generated multimedia content such as a photograph
• hosting some private content not for immediate publication • responding to other users’ shared content
• promoting events, cultural life, commercial interests and professional bodies
• promoting/sharing existing content from elsewhere on the World Wide Web
• contributing to a body of opinion such as through a poll
• conversing with multiple users through chat or video conferencing facilities
• observing friendships or business connections
• enabling users to reach out to new contacts by association, e.g. for crowdsourcing
These activities are generally conducted asynchronously but some may occur in real-time when other users are logged in and actively using the social media tools.
Social media content can be converted into live feeds that can be embedded into websites. Some such feeds get monitored for trends and used for marketing or security enforcement. Some social media tools are now heavily integrated into other pieces of software or perhaps even an operating system, blurring the distinction between the social media application and the associated software.
Alerts can be pushed out to phones and email via social media. Users may be able to see statistics such as number of posts, numer of friends, number of messages and time remaining until a forthcoming event. These can be used to generate reminders. The social media providers themselves can perform data mining on user profiles and behaviour records and use their observations and what they know about users to enable targeted advertising and gauge social trends, making behavioural predictions.
Social media sites offer a range of tools to enable users to forge connections between existing users and content. This includes tagging (both multimedia and text-based content tags) to associate content with content or content with users, sending invitations to associate users with one another, and automatic URL recognition (for the quick insertion of a working hyperlink) or name recognition (so that users can be alerted to their name being used).
Key issues associated with social media include online harassment and defamation, privacy infringements, copyright ownership issues, unsolicited communication, misinformation, masquerading, information overload and the general inhibition of social skills in real life.
Multimedia and Interactivity: Gaming The key difference between an animation and a game is that in a game there is an element of user interaction where the choices made by the user could lead to a range of outcomes with a measurable degree of success (e.g. score/lives/ health) associated with them. Games can be created in various types of software package including:
• spreadsheet packages, which lend themselves to numeric puzzles. These have a wide range of built-in functions and formulae can be constructed to generate a text-based game
• presentation packages where the slides may have to be navigated towards a goal, or animations are interacted with in a certain manner
• web authoring packages (with the games played on web browsers) where the game can be a basic hyperlink-based pursuit of a particular destination, or a scripted game written in a scripting language such as JavaScript
• bespoke game development tools where users can code their game whilst developing and testing the graphical user interface in tandem For output, games usually require a screen, loudspeaker and increasingly they use haptic peripherals to provide sensory feedback. Essential to interacting with a game is the chosen input device, which could include a:
• mouse
• balance board
• virtual reality helmet
• joystick/joypad
• steering wheel
• microphone
• tracker pad/ball
• keyboard: QWERTY/MIDI/ concept
• webcam
• dance mat
• gun
• specialised sensor
Sound is a key component of games as it is used to build atmosphere, provide feedback and in the case of some MMORPGs you will hear your team members speaking as you play, or even see them via live video data links. Such games require high bandwidth Internet connection hardware as well as the standard microphone.
In terms of user interactions, common usergenerated events that a game can be programmed to respond to include:
• mouse in, mouse out, mouse over, mouse down, mouse up, mouse click
• pressing a particular key or key combination
• scrolling (e.g. via mouse wheel) or the direction controller or a particular button on a keyboard/ joystick/joypad/steering wheel • voice commands
• sensor that detect tilting/motion/noise/heat
A form of feedback is often expected by the user. The response to an event could be the movement of a sprite/graphic, the playing of a sound or the arrival/closure of a menu.
Contemporary social media sites often provide a platform for hosting games. Users can participate in gaming communities whilst logged in to their social network. Their progress and successes can be shared on their profiles and friends can search for them in a database of possible adversaries or team members. They can invite others in their social network to participate.
Multimedia Authoring What is Multimedia Authoring? Multimedia involves showing digital information in a manner that incorporates still images, animated images, video and audio [Source: BCS, p4].
Multimedia presentations can be interactive in that they can respond to user interactions. Software tools used to collate multimedia assets into a multimedia presentation/package include:
• web authoring software
• slideshow presentation software
• game development software
• other specialised multimedia asset handlers (that can be downloaded are web-based)
Multimedia authoring involves:
• locating and/or creating suitable assets: images, animations, videos, sounds and any other files that are to be integrated (e.g. PDF documents)
• assembling them into pages (which could be web pages, slides or bespoke screen layouts)
• building in interactivity and enabling navigation by the user
• packaging the final product for delivery to the end user, e.g. on a DVD or online Multimedia Authoring: Hypertext A hyperlink is a:
• piece of text
• whole image
• hotspot on an image ...which when clicked will bring the user to:
• another page in the multimedia presentation
• another location on the same page [Source: BCS, pp117-118]
Observable behaviours that users recognise when engaging with hyperlinks include:
• changes to the cursor
• changes to the underlining, colour, emboldening or other styles of the hyperlink
Hypertext is the body of interlinked textual content within a multimedia package. Hypertext is constructed by introducing hyperlinks at opportunities throughout the text so that crossreferencing to other relevant pages of text occurs.
Multimedia Authoring: Video When video is being captured, a video digitiser (i.e. a video capture card) may be used to perform ADC, but most contemporary video recording devices record directly to digital and so they do not necessarily need a digitiser.
Once video has been captured, a video editing system can be used to isolate video clips, add any desired effects to them and assemble them into the desired sequence with the necessary text captions placed throughout for titling and subtitling.
Better quality hardware can improve resolution and provide automated steadying. Further editing may include:
• speed adjustments
• sound files being imported and mixed in
• images being introduced and overlaid or inserted between the video clips
• the use of transition effects Finally, the video production can be exported as a stand-alone video file.
Up until this point, the original video asset files were not actually changed, but instead a live link was made to the original video files and data about what changes were made was kept by the video editing system.
Video is useful in multimedia packages when real footage is necessary to illustrate an event or process, or to provide a narrated visual explanation. Embedded videos can be rewound and replayed unlike live broadcasts. Multimedia authors seeking high levels of copyright protection require advanced techniques to meet the challenges of preventing their videos from being taken and reused without permission.
Common file formats for animations include:
• Graphics Interchange Format (.GIF) image files
• Flash animations (whose file extensions include .SWF and .FLA) …and presentation packages and game development packages also provide environments in which animations can be developed.
Developing a GIF animation involves forming a sequence of frames (with each frame being a still image) and then setting the duration that each frame will be visible. The manner in which transparency is handled and the manner in which new frames replace existing ones can be adjusted to achieve the desired effect. The final animation is then saved in the .GIF file format, which means that it will be limited to 2 8 colours, implying that the original images may undergo colour loss as they are adapted to the new file format. GIF files are quite portable in that they can usually be inserted into websites and presentations because web browsers and presentation packages tend to have native tools for playing the GIF animation, but some web browsers may restrict GIF animations and require the user to play them by interacting with a “play” button.
Developing a Flash animation involves assembling bitmapped and vector graphics on a stage and then using effects such as tweening to create movement of the visual assets. Additional effects such as interactivity and sound may be included to enhance the animation, but the visual animation alone can be saved as an .SWF/.FLA file and subsequently embedded into other multimedia presentations. Support for playing Flash animations varies and some tools exist for disabling them, but often a separate plug-in is required to enable such animations to play.
In a slideshow (or similar multimedia presentation package), an animation can be developed whereby a graphic is set to move around the screen in a predetermined manner as it enter or exits the slide, but animation can also be used for emphasising the graphic so it moves whilst the slide is visible on the screen. A user can construct a motion path of their own to determine where the graphic will move from and to, and can then set the duration over which this motion will occur. Pre-defined motion paths may be offered for convenience.
When developing games, the animation of a sprite can be determined by the code that the author writes, giving very precise control and giving the author the chance to add interactivity as an integral part of how the sprite moves. Sprites in games can be set to jump to certain defined positions, but to give a smoother animated effect they may use glide/tween effects to move gradually. Other visual effects can include: • Appearing and disappearing
• Resizing
• Changing colour or form
• Warping/Skewing
• Rolling/Spinning
• 3D effects
Sound can be captured through a microphone or generated as digital patterns directly using MIDI equipment or synthesisers. Modern computers tend to come equipped with both microphones and speakers. The better the quality of the equipment itself, the higher the quality of what can be produced. [Source: BCS p49] Audacity is an open source sound editing program that can be used to import sound files or record directly from the microphone. Audacity project files are saved using the proprietary file type .AUP, and they can later be exported for playing on digital devices. Exporting involves converting the .AUP file into a .MP3 or .WAV file (or any other available audio file type). When you export an MP3 you are asked to enter data about the sound file, such as the artist, the year of recording, the title, the track number and the genre. Sounds are organised into separate tracks whereby the separate waveforms can be: • shifted forwards and backwards in time • increased and decreased in volume, pitch, treble and other settings • amplified, echoed and repeated ...as well as being edited with various other special effects.
In order to introduce controls and features not pre-programmed into a multimedia package, authors may be able to script some of their own in a scripting environment that is native to the multimedia authoring package. Scripts can be used to finely control the sequence in which multimedia assets appear/disappear, how they behave for the duration of their time shown on the screen, and how an event arising from a user’s interaction should be handled.
ActionScript is a programming language used for scripting in Flash multimedia productions. JavaScript and PHP (amongst others) can be used on websites. Scratch has its own visual scripting environment. The chosen scripting language will determine the set of available commands for programming the multimedia development environment.