13 Widget που κάνουν μια καταπληκτική εμφάνιση δεδομένων σε πραγματικό χρόνο

Διαφήμιση

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

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

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

Σε αυτό το άρθρο, θα σας καθοδηγήσω στις προσπάθειές μου να συγκεντρώσω αυτό το είδος οθόνης χρησιμοποιώντας πολύ απλά εργαλεία και τεχνικές σχεδιασμού ιστοσελίδων. Θα μοιραστώ επίσης 15 από τα καλύτερα widget του ταμπλό στο διαδίκτυο που βρήκα σε ολόκληρο το Διαδίκτυο που βοήθησαν στην κατασκευή αυτής της μεγάλης ενημερωτικής επίδειξης παγκόσμιων πληροφοριών.

Δημιουργία σε πραγματικό χρόνο εμφάνισης δεδομένων του κόσμου

Ένα από τα πρώτα μέρη που πήγα για να δημιουργήσω μια τέτοια ενημερωτική οθόνη είναι το Netvibes. Καλύπτουμε συχνά τον ιστότοπο, όπως στο φοβερό άρθρο της Angela πώς να το χρησιμοποιήσετε για να διαχειριστείτε τη ζωή σας Πώς να δημιουργήσετε μια πραγματική ροή ειδήσεων με RSSΣυνδυάστε τις εξόδους RSS με μερικά εργαλεία τρίτων και δημιουργήστε μια προσαρμοσμένη ροή ειδήσεων που περιέχει μόνο νόμιμες ιστορίες που σας ενδιαφέρουν. Σας δείχνουμε πώς σε αυτόν τον βήμα προς βήμα οδηγό. Διαβάστε περισσότερα .

Μου αρέσει πολύ το Netvibes και αφού διάβασα το άρθρο της Angela, άρχισα να το χρησιμοποιώ για να οργανώσω συνδέσμους και εργαλεία για κάθε μια από τις κύριες εργασίες που πρέπει να κάνω στο διαδίκτυο. Είναι ωραίο να έχουμε τα πάντα σε ένα μέρος. Ωστόσο, όταν προσπάθησα να χρησιμοποιήσω το gadget HTML για να ενσωματώσω γραφικά στοιχεία στη σελίδα, παρατήρησα ότι δεν λειτουργεί πολύ καλά. Μπορείτε να αλλάξετε το μέγεθος του πλάτους, αλλά το ύψος φαίνεται να παραμένει σταθερό - κόβοντας μεγαλύτερα widget.

Αφού δοκιμάσετε μερικούς άλλους ιστότοπους - Protopage Οι καλύτεροι δημιουργοί ιστότοπων για τη δημιουργία ενός καθαρού διαδικτυακού χαρτοφυλακίουΠοιο δωρεάν πρόγραμμα δημιουργίας ιστότοπων είναι καλύτερο για το χαρτοφυλάκιό σας; Εδώ είναι οι καλύτεροι κατασκευαστές ιστότοπων από τους οποίους μπορείτε να διαλέξετε! Διαβάστε περισσότερα ήταν άλλο που δεν λειτούργησε σωστά. Πρόσθεσε πολύ χώρο στις πλευρές των γραφικών στοιχείων και δεν επέτρεψε τη σωστή αλλαγή μεγέθους. Έτσι, αφού πέρασα πάρα πολύ χρόνο προσπαθώντας να κάνω τις υπάρχουσες σελίδες να λειτουργήσουν, αποφάσισα να στραφώ στο σχεδιασμό μιας σελίδας από την αρχή.

Ήθελα να βρω μια λύση που θα μπορούσε να κάνει ο καθένας, ανεξάρτητα από την εμπειρία σχεδιασμού ιστοσελίδων. Το εργαλείο σχεδιασμού ιστοσελίδων WYSIWYG της επιλογής μου είναι το Kompozer. Το μόνο μειονέκτημα αυτής της προσέγγισης είναι ότι χρησιμοποιεί πίνακες, οι οποίοι στον κόσμο των σχεδιαστών ιστοσελίδων θεωρούνται αρχαϊκοί σε σύγκριση με τη χρήση CSS. Αλλά για λόγους απλότητας, θα χρησιμοποιήσουμε το Kompozer και θα παρουσιάσουμε τα widget στη σελίδα.

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

Πρώτα, κάντε δεξί κλικ στον πίνακα και αλλάξτε τις ιδιότητες έτσι ώστε οι γραμμές να μην έχουν χρώμα (αόρατο). Το πρώτο widget που εισήγαγα στο επάνω αριστερό κελί ήταν ένα γραφικό ρολόι widget από clocklink.com. Κάτω από αυτό, πρόσθεσα ένα widget καιρού από Accuweather.com - ένα από τα αγαπημένα μου γιατί δείχνει μια δροσερή γραφική απεικόνιση ραντάρ για τυχόν καταιγίδες που πλησιάζουν.

Σε κάθε περίπτωση, απλώς κάνω κλικ μέσα στο κελί που θέλω να εισαγάγω κώδικα widget και μετά κάντε κλικ στο μενού Εισαγωγή και επιλέξτε HTML. Απλώς επικολλήστε τον κωδικό widget στο παράθυρο που εμφανίζεται.

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

Για να ελέγξετε τις αλλαγές σας, απλώς αποθηκεύστε το αρχείο στον τοπικό υπολογιστή σας ως αρχείο HTML και, στη συνέχεια, προβάλετε το αρχείο χρησιμοποιώντας το αγαπημένο σας πρόγραμμα περιήγησης. Εάν αντιμετωπίζετε πραγματικά προβλήματα, μπορείτε πάντα να εισαγάγετε κωδικό εάν πραγματικά χρειαστεί. Στο Kompozer, μπορείτε να επεξεργαστείτε τη σελίδα κάνοντας κλικ στην καρτέλα "πηγή". Για παράδειγμα, υπήρχαν μερικές περιπτώσεις όπου απλά έπρεπε να εισαγάγω ένα διάλειμμα
για να αναγκάσω ένα κενό ανάμεσα σε μερικά από τα widget που έβαλα μέσα στο ίδιο κελί.

Προσθέτοντας τρία ακόμη από τα καλύτερα widget που βρήκα, θα ανέπτυξα την ενημερωτική οθόνη σε πραγματικό χρόνο που φαίνεται παρακάτω. Τα τρία εντυπωσιακά widget που πρόσθεσα ήταν το widget Price Gas gas-cost.net, και το widget προϊόντων και τρέχοντα widget συναλλαγματικών ισοτιμιών από το 100widgets.com.

Αυτά είναι όλα widgets σε πραγματικό χρόνο, εμφανίζοντας τρέχοντα δεδομένα από όλο τον κόσμο. Τώρα έχω ενημερωθεί για τα δεύτερα δεδομένα σχετικά με τις τιμές, τα ποσοστά μετοχών και τον καιρό, όλα με μια ματιά. Ωστόσο, μόνο η μισή ιστοσελίδα είναι γεμάτη και έχουμε πολλές περισσότερες πληροφορίες για τη δημιουργία αυτής της σελίδας - δύο ακόμη ολόκληρες στήλες δεδομένων για να είμαστε ακριβείς.

Ένα άλλο πολύ ωραίο widget που πρόσθεσα στη σελίδα ήταν το widget διαμόρφωσης του χρήστη [Δεν υπάρχει πλέον διαθέσιμο] από το 100widgets.com. Αυτό σας δίνει σχόλια σχετικά με την τρέχουσα διεύθυνση IP, τις πληροφορίες του υπολογιστή σας και την έκδοση των Windows / του προγράμματος περιήγησης. Αυτό είναι χρήσιμο όταν βρίσκεστε στο δρόμο και συνδέεστε στη σελίδα σας από ξενοδοχείο ή βιβλιοθήκη και πρέπει να γνωρίζετε την τρέχουσα IP σας. Πρόσθεσα επίσης το πολύ δροσερό Παγκόσμιοι μετρητές και οι δείκτες μετοχών από το widgetbox.com.

Μερικά άλλα χρήσιμα widget που αξίζει να αναφερθούν για αυτού του είδους την προβολή σε πραγματικό χρόνο πλήρους σελίδας - το πρώτο είναι ένα widget αντίστροφης μέτρησης από το widgetbox.com. Όταν το ρυθμίσετε, του δίνετε μια ημερομηνία και ένα συμβάν για αντίστροφη μέτρηση και εμφανίζεται στο γραφικό στοιχείο ως αντίστροφη μέτρηση κειμένου προς το συγκεκριμένο συμβάν (δείτε τη μεγάλη οθόνη που δείχνει δύο εικόνες από εδώ).

Και δεν θα ήταν πλήρης η εμφάνιση δεδομένων επιστημονικής αναζήτησης χωρίς περιστρεφόμενο γραφικό της γης να εμφανίζει πληροφορίες θερμοκρασίας σε πραγματικό χρόνο από οποιοδήποτε σημείο του πλανήτη που σας αρέσει. Μπορείτε να λάβετε αυτά τα δεδομένα από το Καιρός-3D widget από το Widgetbox.com.

Στην παρακάτω εικόνα του πίνακα ελέγχου δεδομένων σε πραγματικό χρόνο, μπορείτε να δείτε την αντίστροφη μέτρηση στην κορυφή του σελίδα (το έχω εισαγάγει στο κέντρο πριν από τον ίδιο τον πίνακα), και τον τρισδιάστατο κόσμο καιρού ακριβώς κάτω από την αντίστροφη μέτρηση του κόσμου widget. Στην τελευταία στήλη του πίνακα πρόσθεσα το τρέχον επίπεδο απειλής DHS, σέξι καμπύλες (περισσότερα για διακόσμηση από οτιδήποτε άλλο - φαίνεται δροσερό), και τέλος το widget ειδοποίησης σε πραγματικό χρόνο από το Εθνικό Κέντρο τυφώνα.

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

Μπορείτε να τροποποιήσετε αυτό το είδος της οθόνης με οποιεσδήποτε πληροφορίες θέλετε, αναζητώντας άλλες ενημερωτικά widget σε οποιονδήποτε από τους σημαντικότερους ιστότοπους widget και στη συνέχεια να τα εισαγάγετε στη διάταξή σας όπου θέλετε. Η ικανότητα του Kompozer να κεντράρει και να ευθυγραμμίζει εύκολα τα κελιά θα σας επιτρέψει να κάνετε ολόκληρη την οθόνη καθαρή και πραγματικά δροσερή. Μόλις τελειώσετε, μπορείτε απλώς να ανεβάσετε το αρχείο HTML στον δικό σας web host έτσι ώστε να έχετε πρόσβαση σε αυτό από οπουδήποτε στον κόσμο.

Δημιουργήστε τον δικό σας ενημερωτικό πίνακα ελέγχου και ενημερώστε μας για το πώς λειτουργεί. Ποια άλλα χρήσιμα widget ανακαλύψατε για πληροφορίες σε πραγματικό χρόνο; Μοιραστείτε τα στην παρακάτω περιοχή σχολίων - Θα ήθελα πολύ να δω τι άλλα ωραία widget βρήκαν οι άνθρωποι!

Πιστωτική εικόνα: Γραφικό τηλεπικοινωνιών μέσω του Shutterstock