Πώς να δημιουργήσετε μια διαδραστική διαφήμιση HTML5 σε 10 λεπτά
Με την απομάκρυνση του Flash, η ευθύνη για διαδραστικές διαφημίσεις μεταβιβάστηκε στο HTML5. Εδώ μαθαίνουμε πώς να δημιουργούμε μια διαδραστική διαφήμιση HTML5 σε μόλις 10 λεπτά.
Σήμερα θα θέλαμε να δείξουμε πώς να δημιουργήσουμε μια διαδραστική διαφήμιση banner HTML5.
Αυτό ήταν ένα έργο για το οποίο κάναμε Carlsberg λίγο πίσω, κάτι που πιστεύουμε ότι μπορεί να είναι χρήσιμο για τους σχεδιαστές και τους προγραμματιστές που ενδιαφέρονται για το σχεδιαστικό έργο του front-end.
Η Carlsberg είναι μια παγκόσμια μάρκα μπύρας που απασχολεί περισσότερους από 40.000 ανθρώπους σε όλο τον κόσμο. Εκτός από την οικιακή μάρκα Carlsberg, φιλοξενούν και άλλα εμπορικά σήματα όπως Tuborg, Somersby (μηλίτη), Kronenbourg και Dali Beer (μια ταχέως αναπτυσσόμενη μάρκα στην Ασία).
Τι είναι μια διαδραστική διαφήμιση;
Ας κάνουμε μια γρήγορη ανασκόπηση. Παλαιότερα, είχαμε διαφημίσεις με κείμενο, οι οποίες είναι βασικά ένα σύντομο κείμενο με σύνδεσμο προς τη σελίδα, το προϊόν ή την υπηρεσία του διαφημιζόμενου.
Ακολούθησαν στατικές διαφημίσεις banner. Αυτές είναι συνήθως στατικές εικόνες. Είναι πιο συναρπαστικό ότι οι διαφημίσεις με κείμενο, επειδή οι εικόνες αξίζουν χίλιες λέξεις. Οι κύριες μορφές έρχονται σε 300 × 250 εικονοστοιχεία (κουτί), 728 × 90 (ευρεία) ή 90 × 728 (ουρανοξύστη).
Στη συνέχεια, το παιχνίδι τεχνολογίας Flash μαζί στο πρόγραμμα περιήγησης στην επιφάνεια εργασίας. Το Flash ήταν επαναστατικό, επειδή επέτρεψε ένα κύμα διαφημίσεων με κινούμενες εικόνες, καθώς και διαδραστικές διαφημίσεις. Οι κινούμενες διαφημίσεις αιχμαλωτίζουν την προσοχή των χρηστών με αποτέλεσμα υψηλότερες αναλογίες κλικ (CTR). Οι παίκτες θα μπορούσαν ακόμη να παίξουν ένα μικρο-παιχνίδι, όπως να πυροβολούν κάτι, ή να ρίχνουν μια μπάλα στο στεφάνι.
Το 2010, η Apple έπεισε τον κόσμο για τις αρετές της μετάβασης σε HTML5, και με γίγαντες όπως το Google μετά το κοστούμι, η τεχνολογία Flash έπεσε γρήγορα.
Οι εταιρείες τεχνολογίας διαφημίσεων βλέπουν το τεράστιο δυναμικό ανάπτυξης στα κινητά και, ως εκ τούτου, άρχισαν να εφαρμόζουν το HTML5 σε μια νέα ενότητα διαφημίσεων μεταξύ των πλατφορμών. Αυτή η μονάδα ονομάζεται διαδραστική διαφήμιση HTML5, υποστηριζόμενη από νέα πρότυπα του κλάδου, όπως MRAID, MRAID2 και παρόμοια.
Η σύντομη ιστορία σύντομη, μια διαδραστική διαφήμιση HTML5, είναι μια διαφήμιση που λειτουργεί τώρα σε smartphones, tablet και desktop browsers.
Λοιπόν, τι είναι αυτή η διαφήμιση της Carlsberg;
Εδώ είναι α σύνδεσμο προς το βίντεο , που δείχνει τη διαδραστική διαφήμιση που εκτελείται σε ένα iPhone:
Ο στόχος αυτής της διαδραστικής διαφήμισης είναι να ευαισθητοποιήσει το Παγκόσμιο Τουρνουά Rugby Sevens, ένα ετήσιο γεγονός ράγκμπι που συμβαίνει στο Χονγκ Κονγκ. Οι καλύτερες από τις καλύτερες ομάδες από όλο τον κόσμο ανταγωνίζονται ετησίως για να κερδίσουν το κορυφαίο βραβείο. Η Carlsberg είναι ένας από τους κύριους χορηγούς.
Η εμπειρία της διαφήμισης είναι απλή. Οι χρήστες βλέπουν ένα λαμπερό μπουκάλι μπύρας Carlsberg. Ένα μήνυμα ζητά από το χρήστη να αγγίξει το φως της λάμψης.
Με το χτύπημα σε αυτό, ένα σύντομο παίζουν animation ενός παίκτη ράγκμπι που μεταφέρουν ένα κρύο, παγωμένο κουβά από μπύρες Carlsberg.
Ένα σύνθημα διασκεδαστικής μάρκας εμφανίζεται: "Είσαι μπύρα έτοιμος";
Οι χρήστες μπορούν στη συνέχεια να αγγίξουν τον σύνδεσμο 'Βρείτε μας στο Facebook' για να επισκεφτείτε τη σελίδα του διαφημιζόμενου για περισσότερες πληροφορίες.
Επιστροφή στον τακτικό προγραμματισμό μας
Μια διαδραστική διαφήμιση HTML5 αποτελείται από 5 κύρια στοιχεία:
- index.html (κύριο σημείο εισόδου)
- main.js (το javascript που περιέχει τη λογική)
- main.css (το φύλλο στυλ CSS)
- περιουσιακά στοιχεία (οπτικά στοιχεία)
- τον εξερχόμενο σύνδεσμο (όπου πρέπει να λάβει η διαφήμιση οι χρήστες)
Ας ξεκινήσουμε να δημιουργούμε τη διαφήμιση ...
Μέρος 1: index.html
Το index.html αποτελείται από τυπικές δηλώσεις HTML.
Δείτε το στυλό Διαδραστική επίδειξη διαφημίσεων Carlsberg - index.html από τον Ben Chong ( @marketjs ) επί CodePen .
Αυτό που έχει σημασία εδώ είναι η μετα-απεικόνιση και η σύνδεση με το main.css και το main.js
Όπως μπορείτε να δείτε, είναι αρκετά απλό. Τίποτα από τα συνηθισμένα.
Μέρος 2: main.js (Το κρέας και τα οστά)
Το main.js είναι ένα αρχείο Javascript που οδηγεί όλη την αλληλεπίδραση με τη διαφήμιση.
Δείτε το στυλό Διαδραστική διαφήμιση επίδειξης Carlsberg - main.js από τον Ben Chong ( @marketjs ) επί CodePen .
Στο επάνω μέρος, εισάγουμε ολόκληρο το miniaturized JS του jQuery. Σημειώστε ότι μπορείτε να χρησιμοποιήσετε την τελευταία έκδοση του jQuery από http://jquery.com/
Το jQuery θα είναι χρήσιμο για τις περισσότερες από τις τεχνικές χειρισμού DOM που χρησιμοποιούμε.
Στη συνέχεια, δημιουργούμε μια απλή λειτουργία προφόρτωσης εικόνας.
Προεφοδιάζουμε μια δέσμη γραφικών στοιχείων που σχετίζονται με τη διαφήμιση.
Τώρα, στη λογική. Όταν η διαφήμιση φορτώνεται, θα παρατηρήσετε ότι δημιουργούμε 2 διαφορές , που ονομάζονται σκηνή1 και σκηνή2 .
η σκηνή1 περιέχει το διάζωμα του λαμπερού μπουκαλιού. Όταν γίνεται κλικ, μεταβαίνει στη σκηνή2, μέσω της λειτουργίας gotoScene2
η ίδια η σκηνή2 περιέχει τη διαφήμιση div, η οποία ανακατευθύνεται στη σελίδα του Carlsberg στο Facebook, όταν παίζεται.
Αυτό είναι βασικά. Απαιτείται πολύ απλή λογική.
Μέρος 3: main.css (The Stylesheet)
Το αρχείο main.css περιέχει όλα τα σχετιζόμενα με το CSS στυλ.
Δείτε το στυλό Παρουσίαση διαδραστικών διαφημίσεων Carlsberg - main.css από τον Ben Chong ( @marketjs ) επί CodePen .
Σε αυτό το παράδειγμα, κάναμε μερικά από τα cool animations που βλέπετε μέσω του CSS
Παραδείγματος χάριν, η φλόγα μπουκαλιών μπύρας χρησιμοποιεί την τιμή του blinker από την ιδιότητα animation -webkit
Προσθέτουμε επίσης μερικούς τυπικούς αλγόριθμους που οι χρήστες τείνουν να αγαπούν, όπως το bounceIn και το bounceOut
Μέρος 4: Οπτικά στοιχεία
Οι διαδραστικές διαφημίσεις απαιτούν διασκεδαστικά γραφικά που σχετίζονται με το εμπορικό σήμα. Ως εκ τούτου, καλό είναι να συνεργαστείτε με σχεδιαστή σε διαδραστικές διαφημίσεις HTML5.
Στην περίπτωσή μας χρησιμοποιήσαμε: Το κενό πράσινο φόντο. Το μπουκάλι; Το φόντο με τον ράγκμπι άνθρωπο που κρατά έναν κρύο πάγο κουβά μπύρες? Τα γραφικά της πρόσκλησης για δράση.
Μέρος 5: Πρόσκληση για δράση (CTA)
Αυτά είναι τα πιο σημαντικά μέρη σε οποιαδήποτε διαδραστική διαφήμιση. Η πρόσκληση για δράση πρέπει να σχεδιαστεί έτσι ώστε οι χρήστες να θέλουν πραγματικά να κάνουν κλικ για να μάθουν περισσότερα.
Πρέπει να είναι ένα συναρπαστικό μήνυμα που συνδέεται με την περιέργεια του χρήστη.
Περίληψη
Ελπίζουμε ότι αυτό το άρθρο θα είναι χρήσιμο για την κοινότητα. Όπως μπορείτε να δείτε, αυτή η διαδραστική διαφήμιση είναι πραγματικά εύκολο να χτιστεί και δεν διαρκεί περισσότερο από 10 λεπτά για να συναρμολογήσετε τον εαυτό σας.
Κάντε κλικ ΕΔΩ για να κατεβάσετε τα αρχεία του έργου και τον πηγαίο κώδικα.