Web Design Graphic Design Interactive Video Photography Animation

"Creativity is Contagious, pass it on." Albert Einstein



Interactive Design is defined as a user-oriented field of study that focuses on meaningful communication of media through cyclical and collaborative processes between people and technology. Successful interactive designs have simple, clearly defined goals, a strong purpose and intuitive screen interface.


One very familiar interactive programing language used in web development is "JavaScript." JavaScript is a client-side scripting language, which means the source code is processed by the client's web browser rather than on the web server.


JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), javaScript can be connected to the objects of its environment to provide programmatic control over them, alone with dynamic and interactive elements to websites.


A very simple interactive button example using javaScript, which will display the current date and time when executed. Click/tap button below to execute the displayDate()function.


Interactive Design with JavaScript, JQuery, HTML5, and CSS3


A simple "drag and drop" example using javaScript.

This is a simple exercise in HTML5 and javaScript, in which the user can "mouse-click (holding the mouse button down, or keeping your finger on the object with a smartphone) then hold and drag the object (in the white box) over to either the grey or black box, then releasing the mousebutton or finger, thereby dropping the object into another box.

Such examples of "drag and drop" methods can often be seen in CMS programs, where the user interacts with a questionnaire, test, or game.


The Modal

A modal is a dialog box/popup window that is displayed on top of the current page.

It is often used for dialog boxes/forms that are made visible by user interaction, such as application forms, order forms etc. Modal’s can include all forms of graphics, including photographs, audio, and video files.


The example below is a login form, used on many web sites that require member or customer interactions.


Modal Login Form


Click/tap on the above "login" button to open up the login form.

Audio on the web


Prior to HTML5, audio files on the web could only be played in a browser through a plug-in (such as “Flash” or “Quicktime”). Coding was extensive, and mixed with relatively large memory sizes the download time was fairly slow. Therefore, the audio element was often omitted from web pages in an effort to speed-up page download time. Currently, the HTML5 <audio> element specifies a standard way in embedding audio files in a web page.





Above is the basic way to display a audio file with minimal coding on a web page, and includes the standard play, pause, and volume control positioned on the sound-file bar.


With a little extra coding, using HTML5, CSS, javaScript, and some imagery, a much more amicable audio player can be created, offering the user a more pleasant experience visually, intuitivly, and with a little more functional interactivity.


HTML5 audio player and playlist

Using CSS as a hover effect is a common practice with navigation, highlighting text or graphics when the mouse hovers over the area, thereby showing the user that the hovered text/graphic is interactive and/or navigational. The hover effect can also be put to other uses, whether for alerting the user to some form of interactivity, or as in the examples below, for pure image-transition display.

Hover Effect

CSS special effects on hover/mouse-over.


w3-hover-opacity:


w3-hover-grayscale:


w3-hover-sepia:


Note: The w3-hover-sepia and w3-hover-grayscale classes are not supported in IE 11 and earlier versions.

Adjusting movie size using JavaScript




Larger movie sizes only work on hardware-screens of that size and above.

Work with remote data / speak with a remote HTTP Web server

You can also download or upload data from your browser to a remote Web server. When this is done from JavaScript, the popular term to describe such operations is "Ajax" (Asynchronous JAvascript and Xml). The example provided below is a table that categorizes past and present band members from specified bands.


Type in the full name of a Rock Band (ex: The Rolling Stones, The Who, The Beatles, Led Zeppelin), then click on the "Members" button.



Geolocator

The Google map "geolocator" uses an API (application programming interface) that pin-points the latitude and longitude from your browser when the button is clicked-on, and displays your current location. It's basic component language is HTML and JavaScript, with optional styling from CSS.


Click the button to get your coordinates: