jQuery Mobile Simple Site

Η εφαρμογή jQuery Mobile Simple Site είναι ένα απλό site το οποίο έχει κατασκευαστεί με χρήση της τεχνολογίας jQuery. Τι είναι όμως το jQuery;

JavaScript και jQuery

Πριν εξηγήσουμε τι σημαίνει jQuery ας δούμε τι κρύβεται πίσω από αυτό. Το jQuery χρησιμοποιεί την τεχνολογία JavaScript η οποία χρησιμοποιείται σε ιστοσελίδες για την παραγωγή οπτικών εφέ και παιχνιδιών. Το jQuery από την άλλη είναι μια βιβλιοθήκη έτοιμων μεθόδων JavaScript οι οποίες χρησιμοποιούνται για την παραγωγή οπτικών εφέ σε ιστοσελίδες. Δηλαδή το jQuery χρησιμοποιεί την JavaSxript.

Το jQuery mobile είναι μια επέκταση του jQuery για κατασκευή ιστοχώρων προσαρμοσμένων σε κινητές συσκευές.

Σχετικά με το έργο

Το jQuery Mobile Simple Site είναι ένα απλό site το οποίο χρησιμοποιεί την τεχνολογία jQuery.

Δομή

Το site είναι απλό στην δομή του αφού αποτελείται, εικονικά, από 3 σελίδες. Όλες οι σελίδες χρησιμοποιούν δομές div. Ο όρος εικονικός χρησιμοποιείται για τον λόγο ότι πρόκειται για μία μόνο σελίδα η οποία περιέχει ολόκληρο τον κώδικα του site. Έτσι λοιπόν, στο κυρίως σώμα της σελίδας, body, υπάρχουν 3 jQuery δομές, μια για κάθε σελίδα, η οποίες ορίζονται με την ρύθμιση data-role=”page”. Κάθε σελίδα έχει

• Επικεφαλίδα
• Κυρίως σώμα και
• Υποσέλιδο

Στην 1^η σελίδα υπάρχουν 3 στήλες με περιγραφή σε κάθε μία από αυτές. Στο κάτω μέρος της σελίδας υπάρχει σύνδεσμος με το LinkedIn profile.

Στην 2^η σελίδα υπάρχουν 4 κατηγορίες έργων. Κάθε κατηγορία έχει μια ενδεικτική εικόνα. Κάτω από την εικόνα υπάρχει λίστα με τα έργα της κάθε κατηγορίας.

Στην 3^η σελίδα υπάρχει μια λίστα με τα τελευταία νέα. Κάτω από αυτή υπάρχει πίνακας με τα στατιστικά των τελευταίων νέων.

Τέλος, στο κάτω μέρος της 2^ης και 3^ης σελίδας υπάρχει κουμπί επιστροφής στην 1^η σελίδα.

Οπτικά εφέ στο site

Ο ρόλος της τεχνολογίας jQuery είναι η χρήση οπτικών εφέ. Στο συγκεκριμένο έργο υπάρχουν χαρακτηριστικά τα οποία εμπλουτίζουν την εμπειρία του χρήστη στο site και είναι τα ακόλουθα:

• Σε ολόκληρο το site έχουν εφαρμοστεί 2 επιλογές εμφάνισης, themes. Το ένα είναι ανοιχτόχρωμο και εφαρμόζεται στην 1^η και 2^η σελίδα και το άλλο σκουρόχρωμο το οποίο εφαρμόζεται στην 3^η σελίδα.
• Σε ολόκληρο το site πάλι, έχει εφαρμοστεί ένας κανόνας css με media query. Ο κανόνας αυτός ελέγχει το πλάτος του παραθύρου. Όταν αυτό γίνει μικρότερο από 768 pixels τότε εφαρμόζεται ένα πλαίσιο γύρω από τα πλαίσια δομών ui-block.
• Στην 1η σελίδα και στο κάτω μέρος υπάρχει ένα επεκτάσιμο πλαίσιο, collapsible panel, το οποίο υλοποιείται με την ιδιότητα data-role=”collapsible”. Το πλαίσιο αυτό επεκτείνεται με το κλικ του χρήστη.
• Στην 2^η σελίδα υπάρχει η δυνατότητα για pop up παράθυρο με την φωτογραφία της κατηγορίας του έργου το οποίο ενεργοποιείται όταν κάνουμε κλικ πάνω σε αυτήν.
• Στην 2^η σελίδα πάλι, στις δύο λίστες δεξιά υπάρχει η δυνατότητα αναζήτησης στοιχείου της λίστας. Γράφοντας έναν όρο στο πλαίσιο αναζήτησης, εμφανίζονται τα στοιχεία της λίστας τα οποία ταιριάζουν με αυτόν.
• Στην 3^η σελίδα υπάρχει τόσο η δυνατότητα αναζήτησης όρου στην λίστα, όσο και η δυνατότητα προσθαφαίρεση στηλών του πίνακα με το κουμπί columns. Η τελευταία δυνατότητα είναι πολύ χρήσιμη σε μικρού μεγέθους εικόνες.

Επίλογος

Το jQuery mobile simple site είναι μια απλή εφαρμογή η οποία δείχνει τις δυνατότητες της τεχνολογίας jQuery.