Якщо ви зайнята людина, у якої насправді не так багато часу для щоденної перевірки новин, але ви хочете бути в курсі останніх важливих подій, таких як сильні шторми, фондовий ринок або серйозні зміни в усьому світі Графічний дисплей набагато ефективніше.
Ви, напевно, бачили приклади деяких біржових брокерів, де є монітор з безліччю графіків, графіків та іншої графіки, що відображають дані в режимі реального часу. Або, можливо, ви бачили ці круті дисплеї центру запуску НАСА з усілякими важливими даними, що прокручуються по екрану.
На мій погляд, це найкращий спосіб показати багато інформації на невеликому просторі. І якщо ви працюєте з двома або трьома екранами, як у мене, то у вас є місце на моніторі, щоб постійно відображати дисплей - де ви можете одним поглядом побачити, що відбувається в усьому світі.
У цій статті я розповім вам про мої зусилля щодо створення такого роду дисплеїв з використанням дуже простих інструментів і методів веб-дизайну. Я також збираюся поділитися 15 кращими віджетами онлайн-панелі, які я знайшов по всьому Інтернету, які допомогли створити цей великий інформаційний дисплей світової інформації.
Побудова відображення світових даних у режимі реального часу
Одним з перших місць, де я побував, щоб створити такий інформаційний дисплей, є Netvibes. Ми часто висвітлювали цей сайт, як, наприклад, у дивовижній статті Анджели про те, як використовувати її для управління своїм життям.
Мені також дуже подобаються Netvibes, і після прочитання статті Анджели я фактично почав використовувати її для організації посилань та інструментів для кожного з основних завдань, які мені доводиться виконувати в Інтернеті. Приємно мати все в одному місці. Однак, коли я спробував використовувати HTML-гаджет для вбудовування віджетів в сторінку, я помітив, що він працює не дуже добре. Ви можете змінити ширину, але висота, здається, залишається незмінною - обрізаючи великі віджети.
:
Спробувавши кілька інших сайтів - Protopage був інший, який не зовсім працював правильно. Це додало занадто багато місця з боків віджетів і не дозволило правильно змінити розмір. Тому, витративши занадто багато часу на те, щоб змусити працювати вже існуючі сторінки, я вирішив перейти до розробки сторінки з нуля.
Я хотів знайти рішення, яке міг би зробити кожен, незалежно від досвіду веб-дизайну. Моїм інструментом веб-дизайну WYSIWYG є Kompozer. Єдиним недоліком цього підходу є те, що він використовує таблиці, які у світі веб-дизайнерів вважаються архаїчними порівняно з використанням CSS. Але для простоти ми збираємося використовувати Kompozer і викласти віджети прямо на сторінці.
Ось як виглядає конструкторське представлення в Kompozer після того, як ви вставили таблицю - в цьому випадку я використовую таблицю 4 на 4, але ви можете зробити її будь-якого розміру.
Спочатку клацніть правою кнопкою миші таблицю та змініть властивості, щоб лінії не були кольоровими (невидимими). Першим віджетом, який я вставив у верхню ліву комірку, був класний віджет годин від clocklink.com. Відповідно до цього, я додав віджет погоди від Accuweather.com - один з моїх улюблених, тому що він показує класне графічне відображення радара про будь-які шторми, що наближаються.
:
У кожному випадку я просто клацаю всередині комірки, в яку хочу вставити код віджета, потім натискаю меню Вставка і вибираю HTML. Просто вставте код віджета у спливаюче вікно.
Ви можете помітити, що ваш віджет не центрований, або він відображається занадто далеко від вершини комірки. Це легко виправити в Kompozer без будь-яких знань у галузі програмування. Просто клацніть правою кнопкою миші комірку, виберіть властивості комірки таблиці, а потім змініть вирівнювання вмісту так, щоб воно виглядало найкраще.
Щоб перевірити зміни, просто збережіть файл на локальному комп'ютері як файл HTML, а потім перегляньте файл у своєму улюбленому переглядачі. Якщо у вас дійсно є проблеми, ви завжди можете вставити код, якщо вам дійсно потрібно. У Kompozer ви можете редагувати сторінку, натиснувши на вкладку «Джерело». Наприклад, була пара випадків, коли мені просто потрібно було вставити розрив < br >, щоб створити пробіл між деякими віджетами, які я помістив в одну і ту ж комірку.
:
Додаючи ще три кращі віджети, які я знайшов, я розробив інформаційний дисплей в реальному часі, показаний нижче. Три чудових віджети, які я додав, були віджетом «Ціни на газ» від gas-cost.net, а також віджетами товарів і поточних курсів валют від 100widgets.com.
:
Це все віджети в реальному часі, що відображають поточні дані з усього світу. Тепер у мене є найсвіжіші дані про ціни, курси акцій і погоду, всі з одного погляду. Але заповнена лише половина веб-сторінки, і у нас є набагато більше інформації для побудови на цій сторінці - точніше, ще два цілих стовпчики даних.
Іншим дійсно класним віджетом, який я додав на сторінку, був віджет конфігурації користувача [Більше не доступний] зі 100widgets.com. Це дає вам зворотний зв'язок щодо вашої поточної IP-адреси, інформації про комп'ютер і версії Windows/браузера. Це корисно, коли ви перебуваєте в дорозі і підключаєтеся до своєї сторінки з готелю або бібліотеки і вам необхідно знати свою поточну IP-адресу. Я також додав дуже круті світові лічильники і біржові індекси з widgetbox.com.
:
Декілька інших корисних віджетів, про які варто згадати для такого повноекранного відображення в реальному часі. Перший - це віджет зворотного відліку від widgetbox.com. Коли ви налаштовуєте його, ви призначаєте йому дату і подію для зворотного відліку, і вона відображається у віджеті як текстовий зворотний відлік до цієї події (див. Великий екран, показаний двома зображеннями нижче).
:
І ніяке наукове відображення даних не було б повним без повернутого графічного зображення Землі, що відображає інформацію про температуру в реальному часі з будь-якої точки планети, яка вам подобається. Ви можете отримати ці дані з віджету Weather-3D з Widgetbox.com.
:
На зображенні нижче моєї повносторінкової панелі даних у режимі реального часу ви можете побачити зворотний відлік у самому верху сторінки (я вставив його по центру перед самою таблицею) і 3D-кулю погоди трохи нижче віджету зворотного відліку світу. В останньому стовпчику таблиці я додав поточний рівень загрози DHS, сексуальні криві (більше для прикраси, ніж все інше - виглядає круто) і, нарешті, віджет попереджень в режимі реального часу з Національного центру ураганів.
Коли сторінка, нарешті, завершена, у мене тепер є доступ до поточного часу, місцевої та глобальної погоди, інформації про фондовий ринок, поточні ціни на газ, поточні попередження про урагани, рівні національної загрози і, звичайно ж, безліч світових даних у віджеті зворотного відліку світу.
Ви можете налаштувати відображення такого роду на будь-яку потрібну інформацію, виконавши пошук інших інформаційних віджетів на будь-якому з основних сайтів віджетів, а потім вставивши їх у свій макет, де захочете. Здатність Kompozer легко центрувати і вирівнювати комірки дозволить вам зробити весь дисплей чистим і по-справжньому крутим. Коли ви закінчите, ви можете просто завантажити файл HTML на свій власний веб-хостинг, щоб ви могли отримати до нього доступ з будь-якої точки світу.
Створіть власну інформаційну панель і повідомте нам, як вона працює. Які ще корисні віджети ви виявили для інформації в реальному часі? Поділіться ними в області коментарів нижче - я хотів би бачити, що інші класні віджети люди знайшли!