CliniCal - A health related web app with responsive interface

About 2 years ago, September 2011, I completed my master thesis. This is the presentation of the web app I created. It was the time when responsive layouts were just coming out and parallax was not yet all the rage. It was a lot of work for someone with such limited experience as me. But it couldn't be more rewarding. Design and development front and back end was done by myself and they sure have mistakes and a long way to perfection.

The app is about keeping vital health information about patients which can be accessed by both the doctor or the patient, in real time.

The web app explainer video is here: http://bit.ly/Yl4dhM
The master thesis document is here: http://bit.ly/167qR1Y

Transcript

1. Ανάπτυξη Διαδικτυακής Εφαρµογής Με Προσαρµοστική Διεπιφάνεια Χρήστη Για Κινητές Συσκευές ________________________________ CliniCal ______ SENCHA TOUCH ______ Διπλωµατική Εργασία Λυκούδη Αθανασία, Α.Μ. 33/10 Επιβλέπων: Ιωάννης Μαυρίδης, Αναπληρωτής Καθηγητής Π.Μ.Σ. Ειδίκευσης Εφαρµοσµένης Πληροφορικής
2. Adaptive Interfaces Μεθοδολογίες που υπάρχουν ________________________________ Ανεξαρτητοποίηση διεπιφάνειας χρήστη Προσαρμογή κατά τη σχεδίαση Προσαρμογή κατά την εκτέλεση Standalone Client-server Mobile agent Σχεδίαση Μοντελοποίηση Ανάλυση
3. Adaptive Interfaces Μεθοδολογίες που χρησιμοποιήθηκαν ________________________________ Δυναμική ανταπόκριση στις αλλαγές μεγέθους οθόνης CSS
4. CliniCal ________________________________ Αρχιτεκτονική Model - View - Controller (MVC Pattern)
5. CliniCal ________________________________ Λειτουργίες Sitemap
6. CliniCal ________________________________ Code Snippets Profiles Adaptation profiles: { phonePortrait: function() { return Ext.is.Phone && Ext.orientation == 'portrait'; }, phoneLandscape: function() { return Ext.is.Phone && Ext.orientation == 'landscape'; }, tabletPortrait: function() { return Ext.is.Tablet && Ext.orientation == 'portrait'; }, tabletLandscape: function() { return Ext.is.Tablet && Ext.orientation == 'landscape'; }, } loginform.setProfile = function(profile) { if (profile=='phonePortrait'|| profile=='phoneLandscape') { this.setSize('100%','100%'); } else { this.setSize(300, 250); } }
7. CliniCal ________________________________ Code Snippets @media queries Adaptation <!-- Media Stylesheets --> <link rel="stylesheet" type="text/css" href="stylesheets/iphonep.css" media="screen and (max-width: 320px) (orientation:portrait)" /> <link rel="stylesheet" type="text/css" href="stylesheets/iphonel.css" media="screen and (min-width: 321px) and (max-width: 480px) (orientation:landscape)" /> <link rel="stylesheet" type="text/css" href="stylesheets/tabletp.css" media="screen and (min-width: 481px) and (max-width: 768px)" /> <link rel="stylesheet" type="text/css" href="stylesheets/tabletl.css" media="screen and (min-width: 769px) and (max-width: 1023px)" /> <link rel="stylesheet" type="text/css" href="stylesheets/desktop.css" media="screen and (min-width: 1024px)" />
8. CliniCal ________________________________ Test Run
9. Ευχαριστώ ________________________________ κ. Ιωάννη Μαυρίδη κ. Χατζηγεωργίου Αλέξανδρο κ. Γεωργιάδη Χρήστο την οικογένειά μου