Сайт Nicole-Mari
Перейти на сайт nicole-mari.com
Официальный сайт юной певицы из Эстонии Nicole-Mari создан на базе WordPress. Тема разрабатывалась специально для этого сайта, так как найти подходящую тему по структуре и функционалу, которая бы устраивала заказчика, не удалось.
Основные модули на главной странице: слайдер баннер, включающий видео и статичные слайды; Новости; Слушать — список из аудио-плееров для прослушивания песен в исполнении Nicole-Mari; Инстаграм; Афиша; Обнови профиль в соц. сетях; Подписаться на почтовую рассылку.
Особенности сайта Nicole-Mari.
Важным требованием заказчика было то, что сайт должен корректно отображаться в мобильных устройствах — телефонах, смартфонах, планшетах. Основной медиаэлемент на сайте — это верхний слайдер, содержащий как видео, так и статичные слайды. Причем для настольного варианта сайта и для мобильного форматы баннера должны быть различными. А именно: для мобильного — книжный с соотношением сторон 9х16, а для настольного — альбомный с соотношением сторон 8х3. Были испробованы разные варианты написания такого баннера с использованием js-скриптов. Но при тестировании на мобильных устройствах эти баннеры отображались криво. В конце-концов остановились на том, чтобы сделать простой слайдер с использованием только HTML и CSS. Примеры таких слайдеров можно найти здесь. Мы выбрали вариант, HTML5 CSS-Driven Responsive Image Slider With Captions. При дальнейшем тестировании решили отказаться от использования видео в мобильном варианте, чтобы избежать неоправданно долгого времени загрузки слайдера и подтормаживания.
Определение устройства просмотра
Для определения устройства клиента, на котором он просматривает сайт, использовали php класс Mobile_Detect, описанный в файле Mobile_Detect.php, который можно скачать на сайте http://mobiledetect.net/. Спасибо авторам — исчерпывающий список устройств. Примеры использования этого класса приведены здесь.
Аудио плеер
На странице Музыка мы использовали очень элегантный аудио плеер SoundManager 2/360° Player, использующий JavaScript + Canvas UI (User Interface). Источник находится на этом сайте http://www.schillmania.com.
Плагины
Были установлены следующие плагины:
WP News and Scrolling Widgets — очень удобный, гибкий и надёжный новостной плагин;
Contact Form 7 — на этом плагине работает контактная форма для подписки на рассылки от Nicole-Mari.
Виджет Инстаграм
Этот виджет сделан на основе плагина Instafeed.js, официальный сайт которого расположен по адресу http://instafeedjs.com/. Для работы плагина необходимо на своем аккаунте в Instagram создать приложение, чтобы в плагине прописать Client ID, Client secret и Acsess token. Последний можно узнать, используя простой и удобный ресурс — http://instagram.pixelunion.net/.
Ссылка на сайт — перейти на сайт .