Создайте Awesome Status Board

Когда Panic представили свою панель статуса всему миру, я был впечатлен и вдохновлен. В сегодняшнем уроке и скриншоте я покажу вам, как создать подобную панель состояния!

обзор

Вот что будет иметь наша доска объявлений: вверху будет график просмотров страниц; для получения этих данных из Google Analytics потребуется другое руководство, поэтому на сегодня мы просто воспользуемся случайными данными. Затем мы извлечем наши предстоящие события из Календаря Google. У нас будет таблица состояния проекта, извлекающая данные из базы данных. Наконец, мы покажем твиты от нашей «компании» и других людей, упоминающих нашу компанию. Пошли!

Прежде чем мы начнем, я должен упомянуть, что иконки, которые я использую в этом проекте, взяты из бесплатного набора Smashing Magazine « На сцене» ; к сожалению, я не могу включить их в демонстрационные файлы, но вот список имен файлов, которым я переименовал их для проекта (большая часть проекта зависит от имен файлов); Я изменил размеры иконок до 64x64px; по ходу изучения урока должно быть очевидно, какие значки принадлежат где.

• bazquirk.png
• behind.png
• complete.png
• foobar.png
• gadget.png
• gizmo.png
• jane.png (отредактировано buddy.psd)
• joe.png (отредактировано buddy.psd)
• john.png (отредактировано buddy.psd)
• ontime.png
• sally.png (отредактировано buddy.psd)
• waiting.png
• widget.png

Шаг 1 Начните с разметки

В то время как наша готовая страница будет иметь динамическое содержимое, мы сначала создадим интерфейс, используя статическое содержимое, чтобы все настроить, а затем мы будем работать над кодом на стороне сервера позже.

Вот наша предварительная оболочка:

Совсем не сложно: три div в упаковочном div. Давайте посмотрим на div#data прямо сейчас. Внутри мы поместим два элемента:

Через некоторое время мы будем заполнять div#visits с помощью JavaScript. Что касается div#schedule , мы поместили в список. Позже мы извлечем эти данные из Календаря Google, но это даст нам возможность построить интерфейс. Важной частью является то, что мы завернули дату события в теги em а детали события — в small теги.

Следующий основной раздел — div#projects . Это покажет нам последнюю информацию о проектах, над которыми работает наша маленькая воображаемая компания. Как и в расписании, мы будем извлекать это из источника данных (в данном случае базы данных); на данный момент это просто статическая таблица:

div#twitter покажет нам две группы твитов: сделанные нашей компанией и упоминающие нашу компанию. Мы будем использовать twitterlib Реми Шарпа для этого. Вот разметка, которая нам понадобится:

Наконец, мы импортируем используемые нами скрипты:

• JQuery
• TwitterLib
• jQuery Flot плагин
  • ExplorerCanvas для IE (необходим для Flot)
• Плагин jQuery Pause / Resume Animation

Конечно, в производстве вы бы поместили все это в один файл.

Последний файл здесь, statBoard.js будет нашим собственным творением.

Полный скринкаст

Шаг 2 Украсьте его с помощью CSS

Перед тем, как мы начнем CSS, вот как будет выглядеть наш готовый продукт; это должно сделать CSS немного понятнее.

Во-первых, мы настроим body и h1, а также настроим все наши div основного содержимого для содержания их детей.

Далее, давайте рассмотрим тот первый div содержимого, который имеет идентификатор data .

Мы дадим этому div нижнее поле 40px, только для дыхания. Затем мы обратимся к его первому дочернему div#visits : поместим его влево, установим его ширину и правое поле и уменьшим размер шрифта.

Откуда этот div всплывающей подсказки? Он будет вставлен, когда мы создадим график аналитики с помощью плагина jQuery. Здесь мы устанавливаем визуальные стили, а также позиционируем их абсолютно и скрываем. Когда мы наведем курсор на точки на нашем графике, он будет позиционироваться, а затем исчезать.

Давайте посмотрим на div#schedule следующим:

Это не должно быть слишком сложно понять; мы хотим, чтобы div#schedule находился справа от div#visits , поэтому мы перемещаем его влево и следим, чтобы ширина + отступ составляли 50%. Затем добавьте немного цвета и сбрейте углы. overflow:hidden важно. Помните, что мы будем указывать детали мероприятия; мы не хотим, чтобы детали переносились более чем на одну строку, поэтому мы позволим им переполниться, а затем скрыть переполнение.

Стиль для ul и li довольно прост; мы дали li ширину 1000px, чтобы эти детали не переносились.

Далее у нас em внутри div#schedule . Это где наши даты пойдут. Мы удаляем обычный курсив, устанавливая стиль шрифта в нормальный. Установив отображение в inline-block, мы можем установить ширину в 50px; поскольку мы показываем дату в формате m / d, это должно выглядеть хорошо во всех случаях. И конечно же, за поворотами.

Наконец, для деталей, мы используем small тег; мы установим размер шрифта, стиль шрифта и цвет.

Следующим основным разделом нашей доски объявлений является div#projects .

Мы позаботимся о том, чтобы наша таблица занимала всю ширину страницы; мы также дадим ячейкам некоторый запас с border-spacing . Мы дадим каждой клетке немного отступов и слегка закруглим углы. Затем, давайте использовать некоторые CSS3-селекторы, чтобы центрировать текст в каждой ячейке, ожидая, что последний будет; если браузер не поддерживает: not () или: last-child, это правило будет проигнорировано, и все ячейки останутся выровненными по левому краю: ничего страшного. Наконец, мы будем вертикально центрировать изображения.

У нас есть только твиттер div:

В настоящее время наш div#twitter содержит только два пустых элемента div#twitter . Скоро мы загрузим твиты с JavaScript, но вот что мы хотим сделать: каждый div в div#twitter будет выделен, прокручивая твиты по экрану. Поэтому мы установим эти div чтобы скрыть их переполнение, а также установим их шрифт на 5 пикселей меньше, чем остальная часть страницы. Для списков мы удалим маркеры, расположим их относительно (чтобы мы могли анимировать правильное расположение для выделения) и установим ширину в 5000 пикселей; Я объясню ширину, как только мы доберемся до JavaScript. Каждый элемент списка (каждый твит) будет перемещаться влево и получать немного правого поля. Наконец, изображения (мы будем отображать изображения профиля в твиттере) стилизованы соответствующим образом.

Шаг 3 Взаимодействуйте с ним с помощью JavaScript

На JavaScript! Таким образом, мы не загромождаем глобальное пространство имен, мы создадим одну функцию, которая будет возвращать методы нашей панели состояния. Вот оболочка, с которой мы начнем:

Давайте сначала построим graphVisits ; вам, вероятно, захочется получить аналитику из Google Analytics или из выбранного вами приложения статистики. Тем не менее, мы просто сгенерируем случайные данные для нашего примера.

Сначала мы настроим наши переменные:

Соответственно, у нас есть элемент, в который мы будем вставлять график, массив данных, который мы передадим плагину Flot jQuery, prev , который вы увидите при использовании, и функция showTooltip. Это создаст ту div#tooltip которую мы разработали ранее, добавит ее в тело и добавит.

Далее мы устанавливаем высоту элемента, который будет содержать график; плагин flot требует этого. Мы установили его на ту же высоту div#schedule ; Метод externalHeight jQuery возвращает высоту объекта, включая его отступ и границу. Затем мы заполним наш массив data ; плагин flot принимает массив массивов, каждый из которых имеет координаты x и y. Для наших x-координат мы будем использовать дату JavaScript; значения, которые мы передаем в конструктор Date, это год, месяц и день (есть и другие, чтобы установить время). Мы устанавливаем год на 2010 год, а месяц на март (это основано на нуле, поэтому январь = 0). Это позволит нам иметь даты в нижней части. Мы установим y-координату на случайное число.

(Примечание: в скриншоте я по ошибке сказал, что параметр year был основан на эпохе Unix, так что установка 10 приведет к 1980 году; это неверно; то, что я объяснил выше, правильно).

Теперь мы создаем график; мы вызовем метод plot и передадим элемент, который будет содержать график в качестве первого параметра. Второй параметр — это массив, содержащий только один объект: данные будут нашим массивом данных, а цвет будет цветом нашей линии графика; затем мы устанавливаем объекты линий и точек для отображения: true; линии «соединят точки» на нашем графике, а точки сделают каждый элемент данных более заметным. Мы можем поместить несколько таких объектов в массив второго параметра, чтобы отобразить несколько наборов данных.

Последний параметр — это другой объект; он устанавливает некоторые свойства на графике. Мы установим ось X в режим времени; формат времени — это то, как мы хотим, чтобы дата была отформатирована. Согласно документации Flot, «% b% d» будет использовать месяц и день. Затем мы устанавливаем сетку включаемую и кликабельную.

Следующим шагом является создание функциональности всплывающей подсказки. Событие plothover вызывается всякий раз, когда вы plothover курсор на график, и оно передает три параметра обработчикам событий: событие, положение и точка данных, над которой вы наводите курсор. Сначала мы проверим, находимся ли мы на предмете. Если мы это сделаем, мы проверим, не является ли prev не равной позиции точки. Если это не так, это означает, что мы не были в этой точке на последнем plothover (мы могли бы plothover на одном предмете, помните). Поэтому мы запишем, в какой точке мы находимся, убедитесь, что подсказка не отображается где-то еще, и покажем подсказку в новой позиции. Если prev равняется текущей точке данных, нам ничего не нужно делать, потому что подсказка уже отображается. Наконец, если мы не находимся в точке, мы удостоверимся, что всплывающая подсказка не отображается и prev назад к нулю.

Это конец нашей функции graphVisits ; давайте перейдем к нашей функции twitterize :

Twitterize принимает три параметра: селектор элемента для загрузки твитов, имя функции, которую мы хотим вызвать в библиотеке twitterlib, и тему нашего вызова в твиттере; это может быть имя пользователя, если мы используем функцию временной шкалы, или это может быть строка поиска, если мы используем функцию поиска.

Как только мы в функции, мы получим контейнер твитов.

Далее мы называем twitterlib. Мы используем переданное имя функции и устанавливаем тему в качестве первого параметра. Затем мы используем объект параметров, чтобы сообщить библиотеке только десять последних твитов, соответствующих нашему запросу. Наконец, мы добавляем функцию обратного вызова, которая принимает твиты, которые мы получаем от twitterlib. Перво-наперво, мы устанавливаем наши переменные. Вы увидите их все в использовании.

Теперь мы перебираем каждый твит в группе. Мы создадим HTML-фрагмент элемента списка и обернутое в него изображение внутри. Мы находим якорь, устанавливаем href и используем end() чтобы вернуться к li . Затем мы находим изображение, устанавливаем источник и возвращаемся к элементу списка. Наконец, мы добавляем текст твита к элементу списка, который будет вставлен после привязки. Мы запускаем этот текст через twitterlib.ify.clean ; это свяжет ссылки, упоминания и хэштеги. Затем мы добавим элемент списка в неупорядоченный список, который мы создали.

Когда мы проработаем все наши твиты, мы добавим список в контейнер.

Воспоминание: помните, как мы установили ширину #twitter ul в 5000px? Мы сделали это так, чтобы каждый твит был в одной строке и не переносился. Это потому, что теперь мы собираемся получить ширину каждого элемента списка.

Мы пройдемся по каждому элементу списка (мы можем использовать список в качестве параметра контекста) и используем функцию outerWidth чтобы получить ширину. Так же как и outerHeight , outerWidth включает в себя рамку и отступ, а также (поскольку мы передали значение true ) поля. Мы добавляем все эти ширины в нашу переменную totalWidth . Теперь totalWidth — правильная ширина для нашего списка, поэтому мы установим это.

Следующий порядок бизнеса: прокрутка списка. Мы рассчитаем скорость прокрутки, умножив totalWidth на случайное целое число от десяти до пятнадцати. Затем мы делаем анимацию. Обычно мы используем функцию animate, но мы используем плагин pauseanimate, поэтому мы используем функцию startAnimation . Мы хотим анимировать правильное значение для totalWidth. Параметр продолжительности получает случайное число. Мы установим замедление на «линейный»; по умолчанию это «свинг», который ослабляется в начале и в конце. Наконец, функция обратного вызова: мы установим правильную позицию нашего списка, чтобы отрицать ширину контейнера. Это подтолкнет его к правой части экрана. Затем мы вызовем нашу функцию scrollTweets, чтобы цикл возобновился.

За пределами нашей функции ScrollTweets мы будем вызывать ее, чтобы начать работу.

Последняя часть twitterize — это парящие события:

Когда мы наводим курсор на наш список твитов, мы будем использовать плагин pauseanimate, чтобы временно приостановить анимацию. Мы будем использовать функцию resumeAnimation в функции mouseout. Это конец twitterize !

Наша последняя функция поменяет имена рабочих на их изображениях.

Это не слишком сложно; мы получим элементы, соответствующие выбранному селектору, и проведем итерацию по каждому из них. Мы получаем их содержимое, разделяя его по пробелам, и сохраняем его в массиве, который называется workers . Затем для каждого работника мы добавляем изображение в строку imgs, которая использует имена для получения изображений. Затем мы заменяем имена на строку imgs, используя метод hQml jQuery.

Конечно, мы должны вызывать наши методы из нашего HTML:

Шаг 4 Включите его с помощью PHP

Последний этап: получение данных с помощью PHP. Сначала давайте получим данные проекта из базы данных. Это требует, чтобы мы сделали базу данных. Вы, вероятно, довольно хорошо знакомы с этим процессом: я запустил PhpMyAdmin и создал базу данных под названием «проекты». Затем я создал таблицу с именем «project_status». Здесь есть четыре поля: id (первичный ключ с автоинкрементом), имя, статус и работники. Вот данные, которые я вставил:

Функция, которая получает эти данные, не сложна. Создайте файл с именем statboard.php и приступим к нему!

Сначала мы создаем экземпляр класса mysqli и подключаем его к нашим базам данных. Затем запросите базу данных для всех строк. Мы создадим строку с именем $html , которую мы вернем в конце. Затем мы будем использовать цикл while для прохождения каждой строки, которую мы получили. В нашем цикле мы устанавливаем три переменные. Мы получаем имя и статус и используем функцию PHP ucwords чтобы прописать первые буквы каждого слова. Затем мы получаем статус. Мы хотим использовать этот статус в качестве имени значков состояния, поэтому мы будем использовать str_replace для удаления любых пробелов в метке состояния. Наконец, мы объединяем строку таблицы вместе. Эти три строки создадут тот же HTML, который мы использовали при создании прототипа.

Как только мы пройдемся по каждой строке, мы вернем строку HTML. Чтобы использовать это на нашей странице, мы сначала должны получить statBoard.php :

Затем мы удалим таблицу, которую мы жестко закодировали ранее, и добавим ее на место:

Наша последняя работа — вытащить расписание из Календаря Google; во-первых, вам нужно установить публичный календарь; Затем вам нужно получить XML-фид для календаря.

Мы сделаем это в двух функциях; давайте начнем с первого:

Познакомьтесь с функцией parseCalendarFeed ; он принимает два параметра: URL фида и количество элементов, которые мы хотим получить. Мы начнем с получения содержимого с URL-адреса и создадим SimppleXmlElement с ним. Если вы осмотрите этот объект, вы увидите, что события на каледаре находятся внутри элемента entry ; мы сохраним это для дальнейшего использования. Наконец, мы создали массив, который мы вернем в конце.

Далее мы зациклим каждый элемент в $entries ; мы хотим получить элемент содержимого и элемент заголовка. Однако есть проблема с элементом содержимого; это отформатировано так:

Итак, мы будем использовать метод php explode, чтобы разбить его на массив, называемый $item , с каждой строкой в ​​качестве элемента массива. Затем мы получим заголовок записи и используем array_unshift, чтобы добавить его в начало $item .

Когда это будет сделано, у нас будет массив, который выглядит следующим образом:

Теперь мы перебираем каждый член массива $item ; нам не нужны члены с индексом 2 или 3, поэтому мы их сбросим. Для остальных пунктов мы разделим их на запятую. Мы должны использовать троичное выражение, чтобы восстановить значение, потому что первый элемент (заголовок) не имеет запятой. Если во временном массиве есть второй элемент, мы установим значение в массиве $item для второй части, которая содержит информацию, которую мы хотим. Если у него нет второй части (что будет иметь место для заголовка), мы будем использовать первую. Теперь наш массив выглядит так:

Отлично . , , за исключением того, что индексы неверны.

Чтобы позаботиться об индексах, мы используем функцию array_values, которая сбрасывает их. Теперь осталось только отформатировать дату. Мы бы хотели, чтобы дата была в формате «м / д». Дата имеет индекс 1 в нашем массиве элементов, поэтому мы установим разнесение этого члена; но мы не взрываем весь член. Мы получаем его подстроку, начиная с индекса 4 и заканчивая 6 символами. Это даст нам название месяца и номер дня.

Нам нужно сравнить имя месяца с другим массивом, поэтому мы создадим массив $months . Затем мы устанавливаем $item[1][0] (название месяца) на индекс названия месяца в $months плюс one. Мы используем функцию array_search для получения правильного индекса и добавляем его, потому что массив начинается с нуля. Наконец, мы взорвем массив, который объединяет члены, передавая «/» в качестве разделителя. Теперь наша дата правильно отформатирована. Последнее, что нужно сделать, это поместить его в $arr ; мы используем arrayunshift чтобы поместить его в начало массива. Как только мы закончим работать со всеми записями, они будут в обратном порядке, что мы и хотим.

Наконец, мы нарежем массив так, чтобы он содержал только то количество элементов, которое нам нужно. Тогда мы можем вернуть его!

Мы используем функцию parseCalendarFeed в нашей функции getSchedule :

Внутри этой функции мы сохраняем URL фида и передаем его в parseCalendarFeed ; мы начнем нашу строку $html а затем пройдемся по каждому событию. Это создаст ту же структуру HTML, которую мы использовали при создании прототипа; мы должны проверить наличие деталей ( $event[2] ); если они есть, мы добавляем их; если нет, мы закрываем элемент списка. Как только мы перебрали все, мы возвращаем строку $html .

Чтобы вызвать календарь на страницу, используйте его вместо элементов списка, которые мы жестко закодировали:

Шаг 5: Полюбуйтесь с гордостью!

Вот и все; вот и вся наша рабочая, работающая, проверяющая данные, прокручивающая твиттер доска состояния! Надеюсь, вам было весело, и дайте мне знать, что вы думаете.