When you explain it, it becomes BANAL.

Banalmagazine.gr: behind the scenes

Το thumbnail του άρθρου με τίτλο Banalmagazine.gr: behind the scenes

Όλα ξεκίνησαν ένα χουχουλιάρικο φθινοπωρινό πρωινό, αλλά όχι και τόσο πρωινό, γιατί είμαστε προγραμματιστές. Με την καυτή κούπα γαλλικού καφέ στις παλάμες, λάβαμε ένα μήνυμα από την Αγλαΐα. Είχε ένα όραμα για ένα περιοδικό και ήθελε να του ετοιμάσει και ιστοσελίδα. Η Αγλαΐα, βλέπετε, είναι από τους πιο τυχερούς ανθρώπους του 21ου αιώνα, αφού έχει τρεις φίλους που ασχολούνται με τον τομέα. Στην ψηφιακή εποχή, οι φίλοι αυτοί είναι κάτι σαν το πετρέλαιο τον 19ο αιώνα.

Μας περιέγραψε τι ήθελε και, όχι επειδή είναι φίλη μας (και πλέον «αφεντικό» μας), ενθουσιαστήκαμε. Έπρεπε να είμαστε υπεύθυνοι για όλη τη διαδικτυακή παρουσία του περιοδικού. Ήμασταν, δηλαδή, υπεύθυνοι του design, του experience, του σχεδιασμού και της υλοποίησης του κώδικα και των βάσεων, του marketing. Το banalmagazine.gr είναι ένα project από μόνο του. Αυτό το άρθρο θα εξηγήσει τη διαδικασία υλοποίησης της ιστοσελίδας, χωρίς να σας κάνει να τραβάτε τα μαλλιά σας από την banal ορολογία πληροφορικάριων.


Ο σχεδιασμός (Web Design)


Για τον σχεδιασμό θέλαμε κάτι μίνιμαλ. Πολλά περιοδικά, editorial και μη, βασίζονται στο περιεχόμενό τους και όχι τόσο πολύ σε έναν εξαιρετικά σύνθετο σχεδιασμό. Αυτό συμβαίνει, γιατί το περιεχόμενο είναι αυτό που προσφέρει αξία στον αναγνώστη. Η ομάδα μας είναι γεμάτη από ταλαντούχους ανθρώπους των επιστημών και της τέχνης που έχουν τόσα να μας πουν και να μας δείξουν, που θα ήταν κρίμα να κρυφτούν πίσω από σύνθετο σχεδιασμό. Σκεφτείτε να διαβάζετε για το catcalling και να έχετε εικόνες και χρώματα να πετάγονται από παντού… Είναι κάπως... banal.

Ο σχεδιασμός έγινε στο Figma, ένα εργαλείο σαν το Photoshop, αλλά στο cloud. Α, και παρεμπιπτόντως, το cloud σε απλά Ελληνικά είναι ένας υπολογιστής στον οποίον έχουν πολλά άτομα πρόσβαση – χοντρικά, τουλάχιστον. Εκεί φτιάξαμε τα λεγόμενα «prototypes», τα οποία ανταλλάξαμε μπρος πίσω με την Αγλαΐα, μέχρι να φτάσουν στην εικόνα που βλέπετε σήμερα, τώρα, διαβάζοντας αυτά τα λόγια.

Οι χρήστες πλέον έχουν χίλιες δυο διαφορετικές συσκευές με διαφορετικά μεγέθη και αναλύσεις. Δόθηκε ιδιαίτερη σημασία στο να εμφανίζεται το περιεχόμενο με τον βέλτιστο τρόπο σε όλα τα μεγέθη, ιδιαίτερα στις μικρότερες οθόνες. Επίσης, θέλαμε να κρατήσουμε την αίσθηση που δίνει μια εφαρμογή κινητών και όχι τόσο μια ιστοσελίδα.


Η αρχιτεκτονική


Η αρχιτεκτονική που ακολουθήσαμε είναι από τις πλέον απλές και διαδεδομένες στον κόσμο των internets. Μία βάση δεδομένων που κρατάει τα πάντα, ένας server που δημιουργεί, διαβάζει, αλλάζει και διαγράφει δεδομένα από τη βάση, και μια ιστοσελίδα που σου παρουσιάζει όμορφα –έτσι ελπίζουμε να νιώθετε και εσείς– όλα όσα γίνονται στο παρασκήνιο.

Δεν θα μπούμε σε λεπτομέρειες ως προς την αρχιτεκτονική. Οι του τομέα ξέρουν για ποιο πράγμα μιλάμε και οι εκτός θα νύσταζαν ένα λεπτό αφότου ανοίγαμε το στόμα μας. Έχει αξία, όμως, να αναφέρουμε ότι δεν χρησιμοποιήσαμε κάποια έτοιμη πλατφόρμα, όπως το Wordpress, το Wix και άλλα παρόμοια εργαλεία τέτοιου τύπου. Γιατί;

Θα ήταν πιο γρήγορο και πιο εύκολο για εμάς, αλλά στον τομέα της Πληροφορικής δεν υπάρχει πιο ωραίο πράγμα από το να το κάνεις μόνος σου και να έχεις τον απόλυτο έλεγχο (λέτε να έχουμε κόμπλεξ, επειδή είμαστε αντικοινωνικοί;). Οι έτοιμες πλατφόρμες έχουν πληθώρα εργαλείων που μπορούν να σου δώσουν αξία έναντι μικρού ή και άνευ χρηματικού ανταλλάγματος. Αυτό που δεν μπορούν να σου δώσουν είναι κυρίως γνώσεις –τεχνικές πάντα–, αλλά και την ελευθερία να χτίσεις αυτό που πραγματικά θέλεις, με τον τρόπο που θέλεις. Είναι σκέτη μαγεία, όταν ο κώδικάς σου δουλεύει και ξέρεις τι κάνει, πώς αντιδρά σε κάθε κατάσταση, ποιες είναι οι δυνατότητες του, και τα λοιπά. Αυτό συμβαίνει, επειδή τον έγραψες εσύ – ύστερα από αμέτρητες κούπες καφέ, αναζητήσεις στο Google, τράβηγμα μαλλιών, απελπισία. «All part of the job» που λένε.

Είμαστε νέοι επαγγελματίες και γνωρίζουμε ότι έχουμε πολλά ακόμα να μάθουμε. Πιστεύουμε πως δεν υπάρχει καλύτερος τρόπος να μάθεις από το να λερώσεις τα χέρια σου και να χτίσεις κάτι, όπως και κάναμε. Για τους συναδέλφους που ίσως διαβάσουν κάποια μέρα αυτό το άρθρο: χρησιμοποιήσαμε Laravel, MySQL και Vue(Nuxt).


Το marketing


Το Banal magazine δεν έχει σκοπό το κέρδος. Συνεπώς, το marketing δεν μας απασχόλησε ιδιαιτέρως. Κρατάμε κάποιες ανώνυμες μετρήσεις, σεβόμενοι πάντα την ιδιωτικότητα των αναγνωστών μας και τον Ευρωπαϊκό Κανονισμό (GDPR), με σκοπό τη βελτίωση της εμπειρίας στην ιστοσελίδα μας. Πράγματι, οι ανώνυμες αυτές μετρήσεις μάς βοήθησαν. Μας έδειξαν ότι έπρεπε να κάνουμε τη σελίδα πιο γρήγορη (ίσως τα πούμε πιο αναλυτικά στο μέλλον, αν μας αφήσει το «αφεντικό»), πιο φιλική στην περιήγηση, και ότι έπρεπε να αναδιατάξουμε και να επανασχεδιάσουμε ορισμένες πτυχές και διαδικασίες της.

Το κομμάτι του marketing, κατά την ευρύτερη έννοια, που μας απασχόλησε ήταν αυτό του SEO (Search Engine Optimization). Σας υποσχέθηκα ότι δεν θα είναι τεχνικό το άρθρο. Το SEO έχει να κάνει με το πόσο «ψηλά» φαίνεσαι στις αναζητήσεις του Google. Όσο πιο ψηλά τόσο καλύτερα, γιατί –ποιον κοροϊδεύουμε!– ποια ήταν η τελευταία φορά που πήγατε στη δεύτερη σελίδα των αποτελεσμάτων;

Για το SEO χρησιμοποιήσαμε βέλτιστες τεχνικές του χώρου, οι οποίες εμφανίζουν links προς την ιστοσελίδα με όμορφο τρόπο, όταν την κάνετε share, το πλήθος επικεφαλίδων ανά σελίδα, τα κείμενα, τα links εντός της ιστοσελίδας και πολλά άλλα. Το SEO είναι ένας τεράστιος τομέας από μόνος του. Δεν είμαστε ειδήμονες, αλλά έχουμε μια καλή γενική ιδέα. Άλλωστε, όταν κάποιος αναζητήσει «Banal magazine» στο Google, θα γυρίσει εδώ.


Χασμουρητό #3


Ελπίζω να μη σας κούρασα με τα της Πληροφορικής. Ο χώρος δεν φημίζεται για το ενδιαφέρον που αποπνέει και για το σεξαπίλ του προς το ευρύτερο κοινό. Θέλαμε, όμως, να μοιραστούμε και την άλλη όψη του νομίσματος που λέγεται Banal. Αν σας άρεσε, τότε ίσως να τα ξαναπούμε κάποια στιγμή. Μέχρι τότε, εμείς θα συνεχίσουμε να καταναλώνουμε μανιωδώς καφέ και να κοιτάμε μια οθόνη με χρωματιστά γράμματα σε ένα σκοτεινό δωμάτιο, έτσι ώστε όχι μόνο να διαβάζετε τα υπέροχα άρθρα των συντακτών μας, αλλά και να είναι η όλη διαδικασία όσο το δυνατόν πιο ευχάριστη για εσάς.


Μοιράσου το με αγαπημένους σου