Στο qv-weblog συζητάμε για θέματα σχεδίασης και ανάπτυξης ιστοσελίδων (όχι μόνο)

Στην HTML5 μιά από τις ιδιότητες που είναι αρκετά χρήσιμη στα πεδία τύπου input είναι η "required". Έτσι εάν έχετε μια φόρμα με διάφορα πεδία που απαιτούνται, η επικύρωση από την μεριά του εξυπηρετητή θα πρέπει να λειτουργεί ούτως η άλλως, για κάθε ενδεχόμενο, αλλά η επικύρωση στην πλευρά του πελάτη δεν είναι απαραίτητο να γίνεται με javascript πιά, αλλά με HTML5. Απλά προσθέστε την ιδιότητα required στα πεδία που χρειάζεται (λάβετε όμως υπόψη σας και τους browsers που δεν υποστηρίζουν ακόμη HTML5, οπότε εκεί javascript μόνο για client side validation).

Tο μήνυμα βέβαια της ιδιότητας "required", είναι ένα μήνυμα προεπιλεγμένο από τον browser και η εμφάνιση μπορεί να μην ταιριάζει με αυτή της ιστοσελίδας. Π.χ. δεν είναι στα ελληνικά. Οπότε τι κάνεις; Javascript to the rescue (έχει ελεγχθεί στις τελευταίες εκδόσεις Firefox και Chrome). Μια μικρή javascript function παρακάτω για να τη χρησιμοποιήσετε όπως εσείς θέλετε ...

Τί είναι το responsive web design;
Είναι ένας όρος που αποδίδεται σε εκείνη την παρουσίαση περιεχομένου για το διαδίκτυο που λαμβάνει υπόψη της τις ανάγκες των διαφορετικών μέσων πρόσβασης στο διαδίκτυο.

Πολλές συσκευές

Από τη μια οι ηλεκτρονικοί υπολογιστές.. Από την άλλη τα smartphones και τα tablets, η web tv, ίσως άλλα?

Και λοιπόν; Ένας δικτυακός τόπος που σχεδιάζεται για προβολή σε ηλεκτρονικούς υπολογιστές, εμφανίζεται το ίδιο και στα tables και στα smartphones της νέας γενιάς... Όχι ακριβώς, καθώς διαφορετικές συσκευές έχουν διαφορετικούς περιορισμούς στο πόσο περιεχόμενο μπορούν να απεικονίσουν ικανοποιητικά στο χρήστη. Διαφορετικές αναλύσεις οθόνης από 320 έως 1280 pixels οριζόντια και από 480+ κάθετα, και μην ξεχάμε ότι τα smartphones και τα tablets μπορούν να κρατηθούν είτε οριζόντια είτε κάθετα...

Κλασικές βασικές παραδοχές

1. Δε βαριέσαι όλοι στα pc τους έχουν πάνω από 1280 pixels ανάλυση πλέον
2. Λίγοι είναι αυτοί που θα δουν το δικτυακό τόπο σε άλλες συσκευές
3. Ακόμη και αν το παραπάνω δεν ισχύει το αυτόματο zoom των smartphones με καλύπτει.. λίγο μικρό θα είναι το web site σε μια οθόνη κινητού αλλά με ένα gesture θα κάνουν zoom να πατήσουν το link..

Λάθος παραδοχές

Και εμείς κάναμε αυτές τις παραδοχές... Όμως είναι λάθος προσέγγιση. Οι χρήστες δεν αποδέχονται τέτοιους όρους χρήσης των δικτυακών τόπων..

Έτσι καλό είναι να φέρουμε το responsive web design λίγο πιο κοντά στον τρόπο που προσεγγίζουμε τη σχεδίαση δικτυακών τόπων.

css3 media queries

Ένα πολύ κάλο άρθρο για το responsive web design, μπορείτε να διαβάσετε εδώ.
Όπως θα δείτε η ουσία είναι η προσαρμογή της εμφάνισης και της δομής του δικτυακού τόπου ανάλογα με τη συσκευή στην οποία προβάλλεται. Αυτό είναι δυνατό με τα css3 media queries τα οποία σχεδόν όλοι οι μοντέρνοι web browsers τα υποστηρίζουν. Για παράδειγμα μπορούμε να εμφανίσουμε ένα μικρότερο λογότυπο όταν το πλαίσιο θέασης είναι έως 600 pixels ανάλυση σε οριζόντια διάσταση.

Αυτή η μεθοδολογία σχεδίασης εφαρμόστηκε στο δικτυακό τόπο www.store-project.eu. Αν έχετε ένα smartphone ή ένα tablet πλοηγηθείτε στo δικτυακό τόπο, για να δείτε πως αλλάζει η δομή του..

Είναι πολύ εύκολο πλέον ο καθένας, να φτιάξει να εγκαταστήσει ένα δικτυακό τόπο με τη χρήση συνήθως των Wordpress ή Joomla που είνα και τα δημοφιλέστερα συστήματα διαχείρισης ιστολογίου και περιεχομένου αντίστοιχα.

Και τα δύο διαθέτουν πληθώρα plugins με τα οποία ο καθένας που φιλοδοξεί συστήνεται ως web developer, μπορεί να κάνει πάρα πολλά σε πολύ λίγο χρόνο και άρα να μειώσει το χρόνο που θα δουλέψει και να μεγιστοποιήσει το κέρδος του ή να είναι πιο ανταγωνιστικός, ιδιαίτερα αν δουλεύει ως freelancer.

Free stuff

Τόσο για το λειτουργικό κομμάτι, οσο και για το σχεδιαστικό του δικτυακού τόπου, εκατοντάδες δωρεάν plugins και templates υπάρχουν διαθέσιμα. Είναι κακό να τα χρησιμοποιεί κανείς;
E... όχι, αρκεί να ξέρει κανείς τι κάνει, τουλάχιστον αν εκτός απο το να συστήνεται κανείς ως web developer, θέλει να είναι κιόλας.

Μια μικρή ιστορία

Γιατί πρέπει κανείς να ξέρει τι κάνει; Η παρακάτω ιστορία βασισμένη σε πραγματικά περιστατικά (φανταστική κατά τα άλλα) θα σας δώσει καλύτερα να καταλάβετε γιατί (Τα ονόματα είναι φανταστικά).

Η εταιρία "Τα κάνουμε όλα Computers Ο.Ε", έχει αναλάβει το δικτυακό τόπο παρουσίασης ειδών bebe ενός πελάτη, τον οποίο προμηθεύει με υπόλογιστές.
Έυκολη δουλεία σκέφτεται ο Τόλης που αναλαμβάνει αυτές τις δουλείες... θα βάλω Joomla και σε μισή ώρα με μία το πολύ θα έχω ξεμπερδέψει... Έλα όμως που ο πελάτης έχει κάποιες απαιτήσεις σε σχέση με την εμφάνιση του δικτυακού τόπου και ο Τόλης που δεν τα πηγαίνει και πολύ καλά με την HTML και τα CSS (βλ. σχεδίαση δικτυακού τόπου), μπαίνει στο Google και πληκτρολογεί "Free joomla templates", γιατί άλλωστε να πληρώνει κανείς όταν υπάρχει τόσο δωρεάν υλικό. Στα πρώτα δύο αποτελέσματα της Google ο Τόλης, έχει βρεί ένα εκπληκτικό template, "Ο πελάτης θα πάθει την πλάκα του" σκέφτεται, και χωρίς πολλά πολλά εγκαθιστά το template στο Joomla και επικοινωνεί με τον πελάτη, ο οποίος μένει ενθουσιασμένος... "και όλα αυτά μόνο με 300€" σκέφτεται, "θα με πιάνανε κοροϊδο οι άλλοι που μου ζητούσαν τα τριπλάσια, ευτυχώς ο Τόλης μου έκανε μια χαρά δουλειά"..

Houston we have a problem..

Μερικές εβδομάδες αργότερα και ενώ ο δικτυακός τόπος εμφανίζεται ήδη στα αποτελέσματα της Google, ο πελάτης τηλεφωνεί έντρομος στον Τόλη και του αναφέρει πως ενώ το site φαίνεται στα αποτελέσματα της Google, όταν κάνεις κλικ για να δείς το δικτυακό τόπο μεταφέρεσαι σε μια σελίδα με πορνό... Μάλιστα το περιστατικό του το ανέφερε νεαρή μητέρα η οποία σκέφτεται να κάνει και καταγγελία... Για δευτερόλεπτα κρύος ιδρώτας λούζει τον Τόλη ο οποίος δεν έχει ιδέα τι γίνεται. "Δεν φταίω εγώ η ο δικτυακός τόπος που έφτιαξα σκέφτεται" και ενώ ελέγχε πως το ίδιο γίνεται και από το γραφείο του όταν αναζητά την ιστοσελίδα του πελάτη στο Google, απεγνωσμένα κάνει upgrade το antivirus του υπολογιστή του και τρέχει στον πελάτη να κάνει το ίδιο... "Κανένας ιός θα είναι" του λέει όταν φτάνει εκεί...

Το πρόβλημα βέβαια δεν έχει λυθεί, οπότε ο Τόλης τηλεφωνεί στο datacenter που φιλοξενείται ο δικτυακός τόπος για να τους ρωτήσει μήπως τυχόν έχουν κανένα ιό στο server που φιλοξενεί το δικτυακό τόπο... Άνθρακες ο θησαυρός..

Μετά από εκατέρωθεν βρισιές και απειλές, ο πελάτης του Τόλη, τηλεφωνεί σε αυτούς που θα τον έπιαναν "κορόϊδο", οι οποίοι και ανακαλύπτουν ότι το δωρεάν template που είχε εγκαταστήσει ο Τόλης, περιείχε κρυμμένο κώδικα που στόχος του ήταν ακριβώς αυτός... Να ανακατευθύνει τον επισκέπτη σε ιστοσελίδα με πορνό όταν ο τελευταίος προερχόταν απο την Google...

Ο δικτυακός τόπος www.larissa-katsigras-gallery.gr, είναι έργο που συγχρηματοδοτήθηκε από το Ελληνικό Δημόσιο και την Ευρωπαϊκή Ένωση και εποπτεύθηκε από το Δήμο Λαρισαίων (Δ/νση Επιχειρησιακού Σχεδιασμού - Τμήμα Σχεδιασμού) και τη Δημοτική Πινακοθήκη Λάρισας - Μουσείο Γ.Ι. Κατσίγρα.

Την 21/12/2006 προκηρύχθηκε δημόσιος διαγωνισμός με τίτλο "Δημιουργία κόμβου πληροφόρησης για την ανάδειξη και αξιοποίηση ψηφιακού υλικού που θα προκύψει από την ψηφιοποίηση της συλλογής πινάκων της δημοτικής πινακοθήκης Λάρισας -Μουσείου Γ.Ι. Κατσίγρα-". Tην 15-3-2007 ο Δήμος Λαρισαίων μας ανέθεσε το έργο.

Στα πλαίσια του συγκεκριμένου έργου αναπτύχθηκαν οι εξής υπηρεσίες:

• Προβολή ψηφιακής συλλογής Γ.Ι. Κατσίγρα
• Εγγραφή μελών
• Διαχείριση μελών - διαβάθμιση πρόσβασης
• Προβολή έργων νέων καλλιτεχνών
• Συχνές ερωτήσεις
• Φόρουμ
• Ανακοινώσεις
• Νέα από το κόσμο της τέχνης προερχόμενα από το διαδίκτυο (από RSS Feeds)
• Εξατομικευμένη ενημέρωση σε εγγεγραμμένους χρήστες
• Ελληνόγλωσο και ξενόγλωσο περιεχόμενο
• Aπλή και σύνθετη αναζήτηση στο δικτυακό τόπο και στα έργα
• Δυνατότητα προσθήκης υδατογραφήματος στα έργα
• Φόρμα επικοινωνίας με το δικτυακό τόπο
• Υπηρεσία διαχείρισης αιτημάτων εγγεγραμμένων χρηστών (ticketing system)
• Δυνατότητα διενέργειας δημοσκοπήσεων

Για την υλοποίηση του δικτυακού τόπου έγιναν σε χρονολογική σειρά οι παρακάτω ενέργειες και χρησιμοποιήθηκαν οι αντίστοιχες εφαρμογές και τεχνολογίες ανοικτού κώδικα.

• Δημιουργία ΒΔ και μοντέλου οντοτήτων συσχετίσεων (ΜySQL Workbench, MySQL Query Browser)
• Υλοποίηση γραφικού περιβάλλοντος διεπαφής (Gimp, Inkscape)
• Υλοποίηση υπηρεσιών δικτυακού τόπου (Symfony web framework , Eclipse IDE)
• Διασύνδεση με τον server που διατηρούνται τα έργα της ψηφιακής συλλογής
• κ.α

Ο δικτυακός τόπος εγκαταστάθηκε σε λειτουργικό σύστημα Red Hat Linux 4 ES, και χρησιμοποιήθηκαν Mysql και Apache server, ενώ για τον προγραμματισμό των λειτουργιών php, HTML, CSS και Javascript.

Το συγκεκριμένο έργο δημοσιεύθηκε online το καλοκαίρι του 2009. Αυτή η καθυστέρησή του ήταν αποτέλεσμα της αναμονής της υλοποίησης σε ψηφιακή μορφή της συλλογής των Πινάκων της Δημοτικής Πινακοθήκης Μουσείου Γ.Ι. Κατσίγρα (αντικείμενο από άλλο προκηρυχθέν παράλληλο έργο). Για να ολοκληρωθεί ο δικτυακός τόπος, έπρεπε να υπάρχει το σχήμα της βάσης δεδομένων (αποτέλεσμα του άλλου έργου) ώστε να μπορέσει να υλοποιηθεί η διασύνδεση με τον Windows server 2003 και την Oracle όπου η Ψηφιακή Συλλογή θα φιλοξενούνταν.

Όταν υλοποιήθηκε η βάση δεδομένων της Ψηφιακής Συλλογής σε Oracle, έγινε εκκαθάριση των δεδομένων σε αυτή (data cleaning). Ταυτόχρονα υλοποιήθηκε εφαρμογή λογισμικού ενημέρωσης του ψηφιακού υλικού (Symfony web framework) για την Δημοτική Πινακοθήκη Λάρισας η οποία "μιλάει" με την βάση δεδομένων σε Oracle. Επίσης, υλοποίηθηκε στην διαχείριση του δικτυακού τόπου (www.larissa-katsigras-gallery.gr) τρόπος διασυνδεσης με την ψηφιακή συλλογή σε Oracle, ώστε να μπορούν να δημοσιεύονται από το διαχειριστή εκείνα τα έργα που επιθυμεί η πινακοθήκη.

Η εφαρμογή λογισμικού ενημέρωσης του ψηφιακού υλικού για την Δημοτική Πινακοθήκη Λάρισας, αποτέλεσε αντικείμενο νέας σύμβασης της εταιρίας μας με το δήμο Λαρισαίων και περιλαμβάνει υπηρεσίες όπως:

• διαχείριση χρηστών-δικαιωμάτων σε ψηφιακά έργα
• μηχανισμό αναζήτησης με φίλτρα στο περιεχόμενο του ψηφιακού υλικού των έργων
• μηχανισμούς εκτύπωσης και αναφοράς στο περιεχόμενο
• μηχανισμό εισαγωγής περιεχομένου στο ψηφιακό υλικό
• εξαγωγή εικόνας των ψηφιακών έργων και ενσωμάτωση υδατογραφήματος για λόγους copyright
• κ.α

Επομένως, ο διαχειριστής έχει δύο εφαρμογές διαχείρισης για εισαγωγή και επεξεργασία περιεχομένου στο δικτυακό τόπο (www.larissa-katsigras-gallery.gr) αλλά και στην ψηφιακή συλλογή πινάκων της δημοτικής πινακοθήκης Λάρισας -Μουσείου Γ.Ι. Κατσίγρα.

Τέλος, ας μην ξεχνάμε τη δεύτερη μεγάλη δυνατότητα που δίνει ο δικτυακός τόπος www.larissa-katsigras-gallery.gr, που είναι η ψηφιακή προβολή των έργων νέων καλλιτεχνών. Ένας καλλιτέχνης μπορεί αφού εγγραφεί ως μέλος της πινακοθήκης να ανεβάσει σε ειδική σελίδα για αυτόν τα έργα του (έχοντας απλά γνώσεις Η/Υ) και να προβληθεί έτσι μέσω διαδικτύου. Αυτό σε συνδυασμό με τις άλλες υπηρεσίες που έχουν προαναφερθεί και τη συχνή ενημέρωση περιεχομένου, θα μπορούσε να προσδώσει στη δημοτική πινακοθήκη μια νέα προστιθέμενη αξία, πέρα από την ουσιαστική αξία που αυτή καθ' αυτή η συλλογή του Γ.Ι. Κατσίγρα (φυσική και ψηφιακή) της δίνει.