—»     —»   Введение в работу в RESS
  Раздел: Руководства   Комментариев: 1  

Введение в работу в RESS

Необходимые знания: Основы PHP, основы адаптивного дизайна
Требования: PHP, Twitter Bootstrap, Modernizr, Swipe.js, WURFL
Время на выполнение: 2-4 часа

Введение в работу в RESS

Мы понимаем, что в нашем деле и без того достаточно уже аббревиатур, но все-таки придется познакомиться ещё с одной – RESS. Расшифровывается эта аббревиатура как «Responsive Design + Server Side Components», что можно перевести как «Адаптивный дизайн + Серверные компоненты», и виновником её появления является Люк Вроблевски. Вряд ли можно сказать, что Люк открыл нечто новое в своей статье, которая была опубликована в сентябре, он просто придумал название некоему «гибридному» подходу.

Суть заключается в комбинировании методов разработки адаптивного дизайна и технологий на стороне сервера, которые вместе помогают прийти к оптимальному решению, улучшая взаимодействие с каждым отдельным устройством. Это означает, что мы будем слать несколько другие запросы некоторым устройствам относительно конкретных URL-адресов, но по-прежнему будем прибегать к техникам адаптивного дизайна, что бы там ни было отображено, на этих устройствах. Метод, представленный в данной статье, является ничем иным как примером RESS, который поможет вам уловить суть. Мы создадим отдельную адаптивную страницу, которая будет включать в себя некоторые основные элементы, которые удивительно сложно использовать на адаптивных сайтах: изображения, рекламные объявления, виджеты социальных сетей.

Адаптивный веб-дизайн

Адаптивный веб-дизайн уже не нуждается в представлении. Но вы, вероятно замечали, что большинство методов разработки адаптивного дизайна используют только лишь код на стороне клиента. И это происходит по уважительной причине. Код основан на веб-стандартах и, если новое устройство или браузер ссылаются на эти стандарты, наш веб-сайт будет работать так, как ему положено. И это также означает, что мы будем использовать единую базу кода для всех устройств. И это одновременно изумляет и немного пугает.

Во многих случаях данный подход работает отлично, но мы все равно сталкиваемся с менее способными браузерами (зачастую мобильными), которые «страдают» от такого количества логик и контента, а посему представляют низкий уровень взаимодействия и в целом замедляют процесс пользования веб-сайтом. Учитывая это, Брэд Фрост выделил некоторые ошибки в адаптивном дизайне, которых следует избегать.

Клиент, познакомьтесь с сервером

Здесь нам поможет сервер. Традиционный способ разработки дизайна для мобильных устройств или для конкретной платформы заключается в том, чтобы создать дополнительную версию мобильного веб-сайта или приложения. Оба метода подразумевают разработку для конкретного устройства, и поэтому они отлично подходят для мобильного сегмента пользователей (по крайней мере, с точки зрения конечных пользователей). Оба подхода также имеют и недостатки, которые, как нам кажется, следует учитывать, но они предлагают нам множество свойств, которые не смогут дать адаптивные веб-сайты: оптимизация под устройства и скорость работы.

Адаптивный веб-сайт может составлять в размере 2, 3 и даже 4 мегабайта и делать сотни HTTP-запросов, и даже мы сейчас можем сказать вам, что это слишком много. Главная идея адаптивного веб-дизайна заключается не в том, чтобы угодить конкретному устройству, но во многих случаях имеет смысл все-таки сделать некоторую оптимизацию на стороне сервера.

Настройка

Мы создадим простенькую PHP-страницу (которая будет выглядеть как первая страница журнала). Сайт будет оборудован каруселью с изображениями, рекламой и несколькими плагинами социальных сетей. Мы сосредоточимся на простоте работы с сайтом и воспользуемся Twitter Bootstrap в качестве адаптивной платформы. Мы будем использовать функцию определения способностей, и функцию определения устройства. Мы также воспользуемся Modernizer в качестве помощника для определения способностей и WURFL для определения устройства. Далее нам нужно будет определить размер экрана и устройства, как со стороны сервера, так и со стороны клиента, а затем будем использовать полученные данные при генерации изображений, рекламных объявлений и контента, которые мы будем представлять пользователю.

Введение в работу в RESS

Определяем способности и устройство

Здесь у нас будет два источника информации о браузере. Modernizr представляет собой платформу определения способностей браузера. Он просто запускает тестирование в браузере, и в ответ на вопрос в формате «работает ли Х?», мы получаем результат либо true, либо false. Красота в этом всем заключается в том, что это работает во всех браузерах, даже в тех, которые еще не выпущены. Но здесь стоит отметить недостаток детальности, и доступные возможности ограничиваются тем, что можно проверить данным тестом. Примеры способностей, которые включены в включают в себя boxshadow, csstransitions, touch-технологии, rgba, геолокацию и так далее.

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

Обратная сторона заключается в том, что анализ User Agent временами может быть неверным и многие устройства обозначены не уникальным UA, либо поддельным UA. Но применение платформы может снизить риск неточного определения. Определение устройства и функция определения способностей не могут быть настроены друг против друга, так как эти процессы из двух разных «опер».

Демо-сайт

Давайте приступим к разработке кода! Мы расскажем вам о том, как использовать RESS для решения трех основных проблем: рекламные объявления, изображения и плагины социальных сетей. Демо-сайт, который мы будем разрабатывать, находится на andmag.se/ress/, а весь код доступен на репозитории Github.

Начнем со скачивания и настройки инструментов, которые мы будем использовать. Давайте не будем сильно зацикливаться на адаптивном коде в данном руководстве, и вместо этого воспользуемся Twitter Bootstrap.

Вам нужно скачать файлы Bootstrap и распаковать архив. Bootstrap содержит папки JS, CSS и IMG, которые нам нужно расположить в папке bootstrap в нашем пустом проекте.

Далее нам нужно настроить функцию определения устройств. Мы воспользуемся инструментом ScientiaMobile, предложенным WURFL Cloud. WURFL расшифровывается как Wireless Universal Resource File (пер. «Универсальный Удаленный Файл Ресурсов») и представляет собой базу мобильных устройств со всеми основными параметрами и возможностями. Вам нужно бует зарегистрироваться в ScientiaMobile для того, чтобы получить АПИ-ключ, а затем вам станет доступна возможность скачать облачный клиент. Существуют разные версии в зависимости от трафика сайта и числа способностей, которые вам потребуются. Мы используем стандартную версию, но есть также и бесплатная версия, которой вы можете воспользоваться. После того, как вы зарегистрируетесь, пройдите в настройки аккаунта и скачивайте клиентский код PHP, а затем вставьте его в папку под названием «WURFL».

Когда это будет сделано, можно сказать, что мы готовы к разработке кода. Сосредоточимся на простоте вещей, и создадим простенькую структуру файлов. Мы также создадим наши собственные папки CSS, javascript и images. В рамках сегодняшнего примера мы создадим только главную страницу, и весь код будет расположен в index.php. Давайте воспользуемся PHP-методом include для того, чтобы внедрить другие файлы во избежание того, чтобы один файл был загроможден кодом. index.php будет включать в себя header.php и footer.php, а также различные фрагменты страницы. header.php также влючает в себя WURFL.php и RESS.php. Далее мы увидим, для чего нам нужны эти файлы.

Введение в работу в RESS

WURFL.php

WURFL.php состоит из кода для инициализации клиента WURFL, и будет хранить способности, к которым вам нужно будет осуществлять доступ в массиве PHP.

<?php
// Include the WURFL Cloud Client
require_once 'WURFL/Client/Client.php';

// Create a configuration object
$config = new WurflCloud_Client_Config();

// Set your WURFL Cloud API Key - Change this to your own key
$config->api_key = '12345:abcDEFabcDEFabcDEFabcDEF';

// Create the WURFL Cloud Client
$client = new WurflCloud_Client_Client($config);

// Detect your device
$client->detectDevice();
?>

После того, как клиент будет инициализирован, мы можем начать получать информацию об устройстве, посредством которого в данный момент осуществляется посещение веб-сайта, где-нибудь в коде:

<?php
$client->getDeviceCapability('brand_name');
?>

RESS

Сейчас мы займемся разработкой метода комбинирования функций определения с серверной и клиентской стороны. Мы воспользуемся cookie для того, чтобы предоставить информацию от клиента серверу. Самая важная способность данного теста заключается в ширине экрана, поэтому мы создаем RESS.php-файл с некоторым кодом javascript, который будет определять для нас размер экрана. Мы так же создаем пространство имен в RESS и вспомогательный метод writeCookie(). Теперь мы можем получить ширину и выписать cookie клиенту:

<script type="text/javascript">

RESS = {};

RESS.writeCookie = function (name, value) { //cookie code }

//Store width in a cookie
RESS.storeSizes = function () {
//Get screen width
var width = window.innerWidth;

// Set a cookie with the client side capabilities.
RESS.writeCookie("RESS", "width." + width);
}

RESS.storeSizes();
</script>

Мы также регистрируем событие onresize, чтобы иметь возможность вписать cookie, когда окно браузера будет изменено в размере или ориентация устройства будет изменена, а не только при загрузке новой страницы. Событие onresize также будет рычагом запуска, так что перед тем, как вписать новое значение, мы выждем 1 секунду.

RESS.isResizeActive = false;

window.onresize = function (event) {
if (!RESS.isResizeActive) {
RESS.isResizeActive = true;

//make sure we do not do this too often, wait 1 second...
window.setTimeout(function () {
RESS.storeSizes();
RESS.isResizeActive = false;
}, 1000);
}
}

Далее нам потребуется некоторый PHP-код для прочтения этих cookie, чтоб иметь возможность подстроить ширину экрана для клиента.

$RESSCookie = $_COOKIE['RESS'];
if ($RESSCookie) {
$RESSValues = explode('|', $RESSCookie);
$featureCapabilities;
foreach ($RESSValues as $RESSValue) {
$capability = explode('.', $RESSValue);
$featureCapabilities[$capability[0]] = $capability[1];
}
}

В качестве отката мы также получим данные ширины со стороны сервера. Это важно, так как это значение будет использоваться в те моменты, когда будет отсутствовать возможность осуществить доступ к cookie при первой загрузке страницы или в случаях, когда cookie или javascript отключены.

$WURFLWidth = $client->getDeviceCapability('max_image_width');
if ($client->getDeviceCapability('ux_full_desktop')) {
$WURFLWidth = 1440;
}

Стандартная ширина экрана настольных ПК в WURFL составляет 600, так что здесь можно быть уверенными в том, что по умолчанию размер выставлен большой, и поэтому мы можем позволить коду адаптивной функции управлять размером экрана, если он окажется меньшего размера. И по тому же принципу теперь мы можем получить ширину экрана со стороны сервера с откатом до ширины WURFL:

$defaultWidth = ($featureCapabilities["width"] ? $featureCapabilities["width"] : $WURFLWidth);

Изображения

Наверное, уже устали натыкаться на термин «адаптивные изображения»? Так и мы думали. Обсуждения о том, как же быть с изображениями на разных разрешениях экранов, довольно часто и интенсивно появляются в интернете. Мэт Маркуис прекрасно «подшил» все ответы в своей статье «The state of responsive images».

Мы будем использовать ширину экрана в RESS для того, чтобы подстроить разные изображения для различных размеров экранов. Мы воспользуемся изображениями Flickr в нашей карусели, и специально отобрали изображения размерами 320, 500 и 640, а затем сделали новый размер – 770, – который является максимальным значением для нашей карусели. Есть некоторые различия между тем, насколько широкой карусель будет при различных breakpoint’ах, и мы постарались учитывать это в алгоритме. Также учтите, что мы собираемся подготовить изображение, которое слегка больше того, которые мы собираемся использовать. Это происходит потому, что нам нужно, чтобы изображение отлично отображалось и в горизонтальной ориентации. Если мы возьмем ширину экрана, равную 320, то высота (или вертикальный режим) будет составлять 480, так что изображение высотой в 500 лучше всего подходят для таких устройств (на основе Flickr, конечно). Здесь также есть возможность оптимизировать, и вы можете изменить код под изображения меньшего размера, если вам захочется. Код будет следующим:

//select correct image version
if ($defaultWidth < 320) {
//small screens get 320 image
$imageVersion = "320";
} else if ($defaultWidth < 500) {
//320-499 screens get 500
$imageVersion = "500";
} else if ($defaultWidth <= 1024) {
//screens between 500 and 1024 get 640
$imageVersion = "640";
} else {
//anything >= 1024 get 770
$imageVersion = "770";
}

Сейчас мы выразим наши вычисления в глобальной RESS-переменной:

global $RESS;
$RESS = array(
"width" => $defaultWidth,
"imageVersion" => $imageVersion);

И теперь мы без труда можем получить значения со стороны сервера и использовать их в нашем коде:

<?php echo $RESS["width"] ?>
<?php echo $RESS["imageVersion"] ?>

Карусель

Итак, мы уже настроили все, что нужно, и готовы начать использовать это. Для того, чтобы внедрить карусель на сайт, мы воспользуемся swipe.js, а также нам понадобится Modernizr для того, чтобы определить, следует ли нам включать переходы на CSS или нет. Мы также постараемся выбрать корректную версию изображения для устройства. Мы используем 4 версии изображений, которые мы расположить в нашей папке img:

img1_320.jpg
img1_500.jpg
img1_640.jpg
img1_770.jpg

Теперь на подобной основе мы можем использовать нашу переменную RESS для подбора правильной версии:

<img src="img/img1_<?php echo $RESS["imageVersion"]?>.jpg" alt="First Image">

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

Рекламные объявления

Одна из проблем, возникающих при работе с рекламными сетями, заключается в том, что реклама может быть только определенных размеров. Нам нужно внедрить эти объявления с фиксированными размерами в наш адаптивный веб-сайт, но мы используем RESS для подбора различных размеров элементов в зависимости от размера используемого устройства. Мы будем использовать Google AdSense, и разместим рекламное объявление в шапке страницы, сразу после логотипа. Будем использовать ту же технику, как и с размерами изображений. Над логотипом у нас будет объявление размером в 320 пикселей, предназначенное для небольших экранов, для экранов среднего размера мы отобразим объявление немного большего размера – 468 пикселей, справа от логотипа, и самый большой размер будет составлять 728 пикселей – это объявление мы расположим также справа от логотипа, и будем использовать его для устройств с большим экраном. Воспользуйтесь следующим кодом:

<?php
if ($RESS["width"] >= 320 && $RESS["width"] <= 640) {
?>
<div class="mobile-ad max-320">
<?php include "fragments/ads/320.php"?>
</div>
<?php
}?>

<div id="site-logo">
<a href="/ress/">RESS</a>
</div>

<div class="ad">
<?php
if ($RESS["width"] >= 980) {
?>
<div class="max-980">
<?php include "fragments/ads/728.php"?>
</div>
<?php
} else if ($RESS["width"] >= 768) {
?>
<div class="max-768">
<?php include "fragments/ads/468.php"?>
</div>
<?php
}
?>
</div>

Учтите, что у нас здесь будет media query, который будет прятать объявление, если его размеры окажутся меньше указанной ширины. Объявление по умолчанию будет видимым, и мы будем прятать его на экранах, которые в размере будут меньше 960 пикселей. Другими словами, максимальный размер будет 979 пикселей. Объявление будет скрыто, если ширина устройства уменьшается без перезагрузки, но если вы перезагрузите страницу, вы получите объявление с указанным другим размером.

@media screen and (max-width: 979px) {
.max-980 {
display: none !important;
}
}

Скрытый контент с заданным параметром display:none – это как раз то, чего делать ни в коем случае не стоит, но запомните, что он будет скрытым только если размер экрана резко изменяется, и только в том случае, если окно отрыто безудержным разработчиком адаптивных дизайнов, который так и норовит потягать каждое окно веб-браузера за угол туда-сюда.

Внедрение условного контента

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

<?php include "fragments/archive.php"?>
<?php if ($RESS["width"] >= 768) { ?>
<div class="max-768">
<h2>Social</h2>
<?php include "fragments/twitter-search.php"?>
<?php include "fragments/facebook.php"?>
</div>
<?php}?>

То есть, мы будем отображать эти фрагменты только если экран будет 768 пикселей или больше. Установка такой логики означает, что мы делаем шаг в противоположную сторону от адаптивного дизайна ради того, чтобы повысить производительность на мобильных устройствах. Устройства типа Kindle Fire, размер экрана которых 600x1024 пикселей, не будут отображать фрагменты Twitter и Facebook при вертикальной ориентации, но в горизонтальной они будут показаны. Такие странные вещи будут происходить, но это та цена, которую мы вынуждены платить. К счастью, существует решение, и называется оно «прогрессивное расширение». Должно быть довольно просто подгрузить недостающий контент, когда экран снова станет шире. Опять же, вам следует дважды подумать об этом, так как это вероятно смутит ваших посетителей, но сейчас продолжайте читать, и узнаете, насколько это влияет на производительность.

Сейчас мы используем ширину экрана для всех наших решений, но мы также можем использовать друге способности (например, API Network Information).

Производительность

Так как же наш подход влияет на производительность сайта? Мы приводим несколько тестов из трех разных breakpoint’ов. Давайте назовем их «Large Medium и Small. (Учтите, что код демо-сайта не сжат, чтобы сохранить возможность без труда читать его и исправлять ошибки):

Large: 84 запроса, передано 696кб, 2-6с (onload: 1-3с, DOMContentLoaded: 600мс-3с).
Medium: 84 запроса, передано 685кб, 2-6с (onload: 1-3с, DOMContentLoaded: 600мс-3с).
Small: 25 запроса, передано 221кб, 560мс (onload: 580мс, DOMContentLoaded: 600мс-320мс).

Так что, большая версия веб-сайта в три раза превосходит в размере маленькую версию, причем не только в размере, но и по количеству запросов! Различие в размере 3-х изображений (оно увеличивается с 500 пикселей до 770) составляет 60кб. То есть, именно виджеты социальных сетей увеличивают объем сайта, а не изображения. Но сам размер – это не единственная проблема, так как количество подключений тоже имеет значение, и ведь они происходят только из этих виджетов. Изображения также были сильно сжаты посредством Photoshop и ImageOptim.

Заключение

Теперь у нас есть основа RESS, и далее будет несложно внедрить это в ваш сайт или даже в CMS на PHP типа Wordpress или Drupal. Возможно, подобный подход слегка противоречит тому, чему вы учились самостоятельно, но во многих случаях размещать логику на стороне сервера более эффективно (как для вас, так и для браузера). Мы также обнаружили, что это дает нам повышенный уровень гибкости, так как вы можете добавлять или убирать контент для определенных устройств, и при этом можете добавлять сторонние решения (которые не совсем дружат с мобильными девайсами), предлагая альтернативные решения для маленьких экранов.

Прогрессивное Расширение – это главная часть адаптивного веб-дизайна, которая также может быть применена с RESS, и естественным расширением по внедрению контента в наше демо является подход, где контент внедряется с помощью javascript в тех случаях, когда экран становится больше. Вам также следует учитывать, что теперь мы по одному и тому же URL предлагаем разный контент, и это может повлиять на ваш кэш. Существует несколько решений данной проблемы, но это уже не входит в тему нашей статьи!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн, RESS, PHP, javascript
Опубликовал Design FactoRy   Прочитано (раз): 15309   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 31 июля 2014 @ 10:59
Написал: Sergey Kocha — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Реально, статья показывает, что RESS технология это не просто, так взял и написал. Аспекты этой технологии охватывают многое моменты, такие как подбор альтернатив не только изображений, но и подбор альтернатив меню.

В конце концов, придется перейти на CMF я бы рекомендовал www.cotonti.mobi
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031