Fingies Landing Page

We were provided with the task to re-design the current landing page for the Fingies Project.

The software being installed on PC include Sublime Text (code editor), Xampp (PHP[[PHP|PHP Hypertext Processor]] and Apache servers).

We were first asked to design the layout of the front-end.

XZ LU Landingpage.png

The front-end layout I designed.

After that, we were introduced to, and played around with, the current WYSIWYGWhat You See Is What You Get - Codeless Visual Editor solutions of Content Management System (CMS[[Webapps|Content Management System]]), including Tinymce, NicEdit, etc.

We then built up our own CMS[[Webapps|Content Management System]] using HTML[[HTML|Hypertext Markup Language]], JavaScript and PHP[[PHP|PHP Hypertext Processor]] to build the back-end from sketch. We borrowed the rich-text editor directly from existing CMS[[Webapps|Content Management System]]. I don’t have a solid background of programming, but along the way our instructor has taught the syntax of PHP[[PHP|PHP Hypertext Processor]] while building the CMS[[Webapps|Content Management System]].

XZ LU Backend.png

The back-end of mine.

We then dug further into the feature sets a mature CMS[[Webapps|Content Management System]] should be equipped, with reference to popular CMS[[Webapps|Content Management System]] solutions like Joomla and Magento. After that, we decided to give the popular German-made CMS[[Webapps|Content Management System]] (other than Wordpress), Typo3, a try. With it, the single-page landing page developed into a multi-page site. We learnt a bit about TypoScript, the language specific to Typo3.

XZ LU Type3.png

Using Typo3.

Data visualization

After the CMS[[Webapps|Content Management System]] section, we moved on to work with data visualization, because afterwards we would try to implement the Fingies APIApplication Programming Interface and visualize (and work with) live data received from different Fingies boxes. We’ve spent time studying the APIs provided by the online visualizing library, Highcharts.com. In the meantime, we were given the Fingies APIApplication Programming Interface to derive the online Fingies count of the current moment. Our assignment, hence, is to visualize the online Fingies count in a Highchart diagram.

XZ LU Highchart.png

Highchart diagram of online Fingies count.

But this was not where we stopped with visualization. We then moved on to SVG[[HTML#SVG|Scaleable Vector Graphics]], the vector graphics based on XML. To edit SVG[[HTML#SVG|Scaleable Vector Graphics]] image further, I have installed Inkscape, alternative to Illustrator, on my PC.

We were then required to make our own visualization project utilizing the multiple sensors of a Fingies box, or devices that connect to the Fingies server. I played around with the gyroscope of my Windows Tablet, and created a web app called the God’s Hand.

The idea is simple: There I build a microcosm in the computer, with sky, mountain, the sun and the moon. With your hand repositioning the tablet, the timing in the microcosm will change, and you will be able to see the sun going down and moon up, and vice versa.

XZ LU GHPrototype.png

Prototype of God’s Hand.


XZ LU GHFinal.png

Realization of God’s Hand.

Finally, when we have finished the above agenda for this semester’s Administrating Data class, we were asked to fine tune our mobile phone to remotely control the Showreel SS14 web app developed for the showcase of this event. The mechanism being adopted behind here is the Hammer.js, a touch-based JavaScript library available in the wild.