Development Blog 6 – Interactive Elements

Excersise 1

Using Elementor, a HTML widget can be used to create web links. Below are the steps for creating web links that allow you to change the colour of the text;

Figure 1; Inserting the code into a HTML widget, the code is displayed on the left editing menu.

Figure 2; The result of the HTML code when previewed.

Excersise 2

The steps below show the steps used to create an image slider using HTML and CSS animations. The image will move between transitions and have slight zoom on the image.

Figure 3; HTML and CSS code on the Codepen Website. This code will enable the use of the image slider.

Figure 4; Using Dreamweaver, the HTML and CSS creates the image in the live view.

Figure 5; The live preview of the code from CodePen of the sliding images.

Figure 6; A video demonstrating the live preview of the HTML and CSS style sheet.

Experimenting with HTML and CSS

Using the Codepen website, a series of experiments will be conducted. The results will determine what HTML and CSS code could be potentially used in the design portfolio Elementor campaign page. The video below documents editing the code of scripts from the Codepen website. These experiments are highly useful when thinking about making a custom webpage. It will give the an aesthetic of a page that has not been built sing a template.

Figure 7; A short clip showing the editing of style sheets to change images, size, text and position of elements.

Google Chrome Experiments

Figure 8; A selection of web pages from the Google Chrome experiments page.

Web Fluid Simulator

This simulator has many possibilities, some of which include; website welcome page, a loading screen, page background, page break. The page is highly captivating and interactive, the ability to change the settings of the simulator means that this experiment can be customised for each user. The colour and movement variation will keep the interest of page visitors so would keep them on a webpage for longer in comparison to seeing a still image.

3D Ocean and Land Map

This could be a challenger to Google Maps, for example if using it to show a location, gradient and terrain of a destination. It gives the user a view of the entire area and its surroundings. This will also engage the user much more than a photo and create a memorable experience in a web page.

Street Gallery

A live gallery placed in a virtual world could be the next new thing compared to a traditional website gallery. It is a visual experience within a gallery and could be used on a website with many members. The ability to share photos taken in different locations, document and map memories would be something that would engage users and keep them returning to the site to view updates.

Loud Rider

A game within a webpage is something that will keep users engaged and entertained for a long time on a site. This is an example of many small games available on the Chrome experiments site. The user must log in to play, showing past records and leader boards. This competitive element to the webpage will keep users returning.

Hive

In contrast to the Loud Rider game above, this feature highlights how much time is being spent on a website/app, it alerts the user to their screen time with the aim to educate and reduce time spent browsing the internet. This could be useful if the user has a limited time available to spend on a site.

References

https://paveldogreat.github.io/WebGL-Fluid-Simulation/

http://jeremybouny.fr/ocean/demo/

https://artsandculture.google.com/experiment/GAF29KhE_DxEnA

https://play.google.com/store/apps/details?id=com.systech.screenhive&pli=1

https://www.loudrider.com/