Текст книги "Создание сайтов"

Распознать мощную атаку, когда она обрушилась на вашу площадку, сравнительно просто. Сайт начинает грузиться медленно или вообще отказывается открываться, обычно с выпадением «пятисотых» ошибок (наиболее часто – 502-й и 504-й). Резко подскакивает трафик, возрастает нагрузка на серверное оборудование с увеличением числа пакетов и скорости их поступления.

Так или иначе, возникает главный вопрос: «Что делать?» Прежде всего нужно поднять по тревоге ваших технических специалистов и доподлинно установить факт нападения. При первичном подтверждении угрозы – сразу же связаться с хостинг-провайдером. Можно попытаться блокировать IP-адреса, с которых идет атака, серверными утилитами, например iptables и iproute в Linux или pf и ipfw в BSD. Правда, помогает это разве что в случае с лобовым и не слишком сильным ударом.

Попутно постарайтесь восстановить контроль над сервером (см. подраздел «Какими бывают DDoS-атаки и что с ними делать»), это крайне важно. Атаку не удалось купировать ни программными, ни аппаратными средствами? Самое время обратиться к «антидидосерам» типа Qrator, если только вы еще не у них на абонентском обслуживании.

Владельцы ботнеров не всесильны. Массированные кибератаки набирают силу постепенно. Обычно, чтобы вывести DDoS на максимальную мощность, требуется несколько часов. Если ваш веб-проект имеет систему мониторинга о проблемах (а должен бы, особенно если у вас онлайн-сервис!), то, зная о начале атаки, вы успеете пусть не пресечь агрессию, то, насколько удастся, ослабить удар.

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

И наконец, если факт атаки подтвержден, обратитесь в Управление «К» МВД РФ, которое занимается расследованием преступлений в Интернете. В последнее время «киберполицейские» заметно лучше прежнего ищут агрессоров, и есть надежда на то, что за DDoS начнут наказывать уголовно на постоянной основе.

«Высокие нагрузки в Вебе. Интересные ссылки»: http://highloadblog.ru/articles/15.html

Mindmap по разработке высоконагруженного проекта: http://www.mindmeister.com/ru/138239468/highload-xmind

«Десять известных масштабируемых архитектурных шаблонов»: http://www.insight-it.ru/masshtabiruemost/10-izvestnykh-masshtabiruemykh-arkhitekturnykh-shablonov/

«Проектирование высокопроизводительных систем: о чем не расскажут в книгах» (рубрика «Вредные советы»): http://habrahabr.ru/post/171433/

PHP Highload: http://www.phphighload.com/

«Кэширование в веб-приложениях: что, где, когда»: http://lib.custis.ru/Кэширование_в_веб-приложениях_-_что,_где,_когда

«Рассылка SeoPult. Выпуск № 95: защита от DDoS-атак»: http://seopult.ru/subscribe.html?id=98

«DDoS: катаклизм на заказ, часть I»: http://seopult.tv/programs/moneymaking/ddos_kataklizm_na_zakaz/

«DDoS: катаклизм на заказ, часть II»: http://seopult.tv/programs/moneymaking/ddos_kataklizm_na_zakaz_2/

«История одной DDoS-атаки на роутер и методы защиты Juniper routing engine»: http://habrahabr.ru/post/186566/

«DDoS-атаки первого полугодия 2013 года»: http://www.securelist.com/ru/analysis/208050810/DDoS_ataki_pervogo_polugodiya_2013_goda

Журнал «Хакер», № 11/12 (166, тематический номер о DDoS): http://www.xakep.ru/magazine/xa/166/default.asp

«Предотвращение атак с распределенным отказом в обслуживании (DoS)»: http://www.cisco.com/web/RU/netsol/ns480/networking_solutions_sub_solution_home.html

Глава 21. Мобильные версии и приложения: маленький экран большого бизнеса

Если вы спросите, что в интернет-бизнесе за минувшее десятилетие произвело настоящую революцию, мы дружно ответим: «Развитие мобильных технологий». Не социальные сети, не блоги; это все старые истории на новый лад, пусть и важные для предпринимателя. Нет, именно совершенствование гаджетов и повсеместное внедрение беспроводного доступа к Сети в корне изменило модели поведения людей в Вебе. Смартфоны и планшеты по производительности мало-помалу приближаются к «взрослым» компьютерам и обеспечивают своим владельцам полноценный доступ ко Всемирной паутине где угодно и в любых ситуациях: на бегу, в поезде, в ванной. Теперь среднестатистический городской житель едва ли не круглосуточно онлайн, а значит, до него легче достучаться в те моменты, в которые невозможно было раньше. В том числе когда потребитель наиболее расположен к трате денег.

Парадоксально, но, по данным исследования CMS Magazine за 2012 год, 66,7 % активных заказчиков услуг веб-разработки не ожидали, что у их сайтов будет высокая посещаемость с мобильных устройств. Между тем в середине 2013 года, судя по статистике StatCounter, доля мобильного трафика в Рунете превысила 5,6 %. Назовем вещи своими именами: публика созрела. И она ждет, что через маленький экран «умного телефона» с ней будут общаться так, чтобы ей было удобно.

На практике ситуация далека от оптимальной. До сих пор многие владельцы коммерческих сайтов, развивающие малый или даже средний бизнес, не понимают, зачем им необходимо присутствие в мобильном Интернете и каким оно должно быть, чтобы приносить выгоду. Сделали, бывает, веб-сайт, а все прочее – по остаточному принципу: есть свободные деньги и тяга к экспериментам – заказываем мобильную версию, нет – и не надо. В итоге те, кто заходит на «немобилизированные» интернет-ресурсы, видят то же, что увидели бы с десктопа. Но на гораздо более мелком дисплее. Ломается верстка, нельзя толком ничего сделать в меню (оно же выпадает по наведению курсора мыши, а экран-то сенсорный), – в общем, кромешный ужас. Это как быть теоретиком музыки и произносить один и тот же монолог о «Контрапунктах» Штокхаузена вне зависимости от того, куда вас пригласили выступить: на лекцию в Московский дом композиторов, на утренник в детский сад, на вечер в ДК при шарикоподшипниковом заводе. Разница лишь в том, что с вашего сайта посетителю уйти гораздо проще.

Присутствие в мобильном Интернете для бизнеса в наши дни больше не факультативно. Оно ему строго необходимо. А вот в каком именно виде – вопрос дискуссионный.

На сегодняшний день доступны две основные формы присутствия в мобильном Интернете: особая версия основного веб-сайта и отдельное приложение, или, на профессиональном сленге, апп (от англ. application).

Если у вас уже есть сайт, но делами мобильными вы до сих пор всерьез не озадачивались, попробуйте разведать, чего от вашего проекта хочет та часть аудитории, которая посещает его с гаджетов. Фактически в любой системе веб-аналитики – в разобранных нами ранее «Яндекс. Метрике» и Google Analytics уж точно – регистрируются всевозможные показатели, отражающие «мобильное потребление» сайта: как общее число пользователей, заходящих на него таким образом, так и их распределение по платформам, моделям устройств, браузерам и т. д. Вплоть до такого, у кого какое разрешение экрана. Доля «гаджетоносцев» в аудитории вашей площадки – 5–7 % и более? В ваших интересах спешно адаптироваться под их нужды. Меньше? Значит, работайте впрок, поскольку смартфоны и планшетные компьютеры – это не мода, а новая реальность, которой отдает предпочтение все больше ваших потенциальных клиентов. Постарайтесь, чтобы их реальность пересекалась с вашей.

Поведение «людей мобильных» на сайте, к счастью, удобно разглядывать под увеличительным стеклом веб-аналитики, сопоставляя их активность с действиями визитеров из «большого Интернета». Так, ощутимо более высокий, чем в среднем по площадке, показатель отказов – повод встревожиться. А меньшая по сравнению со среднестатистической глубина просмотра в отрыве от прочих метрик еще ни о чем не говорит, и изучению подлежат конкретные конверсионные пути «мобилизированных»: возможно, юзеру все настолько понятно, что он оформляет заказ с меньшим числом шагов, чем если бы делал его из Веба, сидя за офисным компьютером.

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

По сути веб– и мобильная версии сайта одного поля ягоды: они обе открываются в браузере, предполагают близкие сценарии работы. Разница в их организации обусловлена по большей части различиями между средствами ввода-вывода у больших компьютеров и «карманных» устройств. В отличие от приложения, мобверсия не требует от пользователя дополнительных манипуляций. Достаточно зайти на сайт с гаджета – и, при условии, что веб-мастер не намудрил с настройками, посетителю по умолчанию будет показана мобильная версия.

Одно из главных достоинств мобверсии заключается в том, что она не требует кардинально различных между собой исполнений под разные операционные системы и платформы; учить еще один язык программирования, чтобы сделать ваш сайт доступным на iPhone, а не только на Android, ни кодеру, ни веб-мастеру не придется. С приложениями ровным счетом наоборот. Вместе с тем частенько в разработке такой версии сайта хватает подводных камней: как только не приходится изощряться, чтобы одна страница выглядела приемлемо на самых разных телефонах. На текущий момент мобильные версии делаются по одному из трех принципов.

• Адаптивный дизайн. Еще несколько лет назад эта методика отсутствовала как класс, но чем дальше, тем более она популярна. И кстати, всячески пропагандируется Google. Суть ее в том, что в зависимости от того, на каком устройстве осуществляется просмотр, комбинируются и видоизменяются элементы верстки с подстройкой под ширину окна браузера. В адаптивном, или «отзывчивом», веб-дизайне принят также метод mobile first – дословно «сперва [под] мобильный»: сайт изначально проектируется с акцентом на том, что он будет выводиться на экраны гаджетов, ввиду чего делается умеренно аскетичным, с «подвижными» блоками. Адрес у страницы один, просто в ее макет исходно благодаря технологии CSS3 Media Queries заложена вариативность: смотря по обстоятельствам меняется число колонок, размер текста, величина управляющих элементов и их взаимное расположение и т. д.

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

• Динамическая загрузка контента. Страница одна, URL один, но устройствам, с которого заходит визитеры, отдаются разные варианты HTML-кода.

Впрочем, с известной степенью вероятности распознавание гаджета осуществляется ошибочно, и в таком случае посетитель вынужден пытаться работать с форматом отображения сайта, ужасающе выглядящим на его смартфоне или планшетнике. И не властен переключиться на более удобный вид, как было бы возможно при наличии раздельных мобильной и обычной версий (см. следующий пункт). Вдобавок такой способ «мобилизации» годится не для каждой площадки – в большей степени для онлайн-СМИ и блогов.

• Отдельная мобильная версия. Фактически безальтернативный в недалеком прошлом и по сей день широко распространенный вариант. По-хорошему, это отдельный сайт, обычно расположенный на поддомене основного. Создается в большинстве случаев на его базе, но с учетом ограничений мобильных устройств доступная в Вебе функциональность урезается. Зато заказчик и разработчик вольны в деталях продумать, к каким именно возможностям и в каких конкретно местах дать доступ «мобильным» посетителям, и попутно до разумного предела снизить вес страниц.

Делать отдельные мобверсии начали, еще когда смартфонов не было и в помине. До сих пор периодически под старые телефоны создают максимально лаконичные WAP– и PDA-версии (см., например, на сайте издательского дома «Коммерсантъ», www.kommersant.ru). Впрочем, по адресу wap.yoursite.ru и pda.yoursite.ru может жить и обычная, общая для любых гаджетов ипостась веб-проекта.

При адаптации интернет-ресурса под современные мобильные устройства в обязательном порядке нужно держать в уме ряд их особенностей.

• Львиная доля «мобильных» пользователей использует аппараты с сенсорным экраном, или тачскрином (англ. touch-screen). Поэтому не задействуйте в мобверсии сценариев работы, которые требуют манипуляций мышью. Заменяйте их общепринятыми «жестами» (прижившаяся в русском языке калька с англ. gestures): например, выбор – касание пальцем, промотка страницы вниз или прокрутка слайдера с фотографиями – листающее движение в нужном направлении и т. д. По той же причине откажитесь от показа информации по наведению на нее указателя; так часто оформляют справки. Пусть все интерактивные элементы будут крупными: кнопки, веб-формы, поля, где нужно ставить галочки, и т. д.

• Не заставляйте посетителя вводить данные с клавиатуры без крайней на то необходимости. Отнюдь не все набирают буквы на сенсорном экране с той же быстротой и непринужденностью, как на ноутбуке. Используйте короткие URL: в мобильных браузерах люди реже вводят что-либо в адресную строку, однако иногда им приходится вбивать туда название страницы напрямую. Чем проще формы, нуждающиеся в заполнении, тем лучше, и не беда, если в веб-версии полей десять против трех в мобильной: лучше собрать меньше информации о пользователе, но довести его до звонка или заказа, чем остаться ни с чем. Используйте автозаполнение полей, где только возможно. И вообще храните максимум информации, оставляемой посетителем.

• Используйте аппаратные возможности гаджетов разумно. Хотя современные смартфоны и планшетники – фактически мини-компьютеры, мощности у них не запредельные, вдобавок от интенсивной нагрузки быстрее садится батарея. В частности, лучше отказаться от использования технологий JavaScript, Flash и AJAX в мобильной версии. Не только потому, что они ресурсоемкие, но и потому, что не все гаджеты поддерживают их по умолчанию.

• «Минимизируйте это». И то. И все, что только удастся. Помните и о том, что скорость мобильного Интернета даже в мегаполисах оставляет желать лучшего. Да здравствуют здоровые сдержанность и аскетизм. Не бойтесь ущемить аудиторию, урезая функциональность веб-версии для вывода на гаджеты: наоборот, оставляя на странице самое главное, вы способны повысить ее конверсионный коэффициент. «В ограничении лишь познается мастер», – писал Гете. Минимум ссылок, уровней навигации, элементов управления.

Также по возможности организуйте контент так, чтобы информация подгружалась не вся сразу, а по мере скроллинга страницы. Самые важные текстовые пассажи и интерактивные элементы располагайте на первом экране. Картинки должны быть легче и, само собой, меньше, чем в основной версии. Компоненты CSS и JavaScript пусть сжимаются с помощью gzip (грубо говоря, это обычная архивация, осуществляемая «на лету»). Вместо тяжелой графики, где это допускает дизайн, применяйте стили CSS. Широкие блоки, грозящие «порвать» верстку и принудить посетителя к горизонтальной прокрутке страницы, либо не вставляйте в мобильную версию, либо тонко подстраивайте под минимальный размер экрана. Так, таблицу с перечислением достоинств продукта ничто не мешает заменить вертикальным списком с красноречивыми иконками. Разметка – одноколоночная, и только одноколоночная. Исключения возможны разве что для планшетников.

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

Исходя из собранных аналитических данных и из своих собственных желаний («Нужно, чтобы через наш сервис можно было заказать билет в театр даже с самого старого смартфона» или «Наша аудитория – владельцы гаджетов Apple и топовых планшетников на Android»), составьте список устройств и браузеров, совместимость с которыми нужна кровь из носу, и выделите важнейшее в функциональности, а затем проанализируйте все доступные инструменты для преобразования сайта (см. ниже) и оцените, будет ли их вам достаточно. Не пытайтесь объять все «карманные» аппараты и браузеры. Тотальная совместимость важна только для очень крупных веб-проектов, в чьей аудитории даже самая крошечная доля – это тысячи потенциальных клиентов, упустить которых равнозначно отказаться от десятков тысяч долларов прибыли.

Предпочтительно расставить все точки над i касательно мобверсии на этапе составления ТЗ, в крайнем случае – перед прототипированием. Можно заказать разработку мобверсии или адаптивной верстки в веб-студии с внушительным реноме и избавить себя от головной боли, но даже в таком случае вы должны пристально следить за выполнением своих требований. Не кому-нибудь, а вам в дальнейшем иметь дело с теми, кто будет заходить на вашу площадку с разнокалиберных гаджетов.

Мобильная версия реализуется самыми разными способами. Один вариант – продумывать ее функциональность с чистого листа, обеспечив минимальную преемственность между «общеинтернетной» и «гаджетовой» ипостасями. Другой – отталкиваться от основной версии и постараться изъять из нее все, что только получится: отступы уменьшить, не обязательные с точки зрения конверсии блоки скрыть и т. д.

Для помощи в разработке мобверсий существует немало онлайн-сервисов, и самый известный из них – MoFuse (http://mofuse.com/). Достойны внимания и Wirenode (http://www.wirenode.com), Winksite (http://winksite.com/), Mobify (http://www.mobify.com). Принцип их работы сводится к тому, что в систему загружаются страницы веб-версии и теми или иными методами оптимизируются под «карманные» устройства. Не худший вариант в ситуации, когда бюджет жестко ограничен или же у вашего интернет-ресурса сравнительно простая функциональность, не требующая индивидуальных решений при «мобилизации». Большинство подобных сервисов платны, но доступны в демонстрационном режиме.

Что касается CMS, то ко многим из них написаны дополнения для генерации мобильных версий сайта. Под Drupal, Joomla и WordPress, в частности, таких плагинов выпущено множество.

Чтобы удостовериться в том, что отображение сайта на мобильных устройствах отвечает вашим требованиям, используйте онлайн-инструменты для проверки совместимости. Мы бы вам рекомендовали в первую очередь: W3C mobileOK Checker (http://validator.w3.org), mobiReady (http://www.ready.mobi/), Browsershots (http://browsershots.org). Для iPhone-версий подходит TestiPhone (http://testiphone.com).

Дадим вам еще несколько советов на предмет того, о чем нужно задумываться, если вы заказываете мобильную версию сайта или адаптивный дизайн.

• Если мобильная версия представляет собой отдельную сущность, лучше размещайте ее на поддомене. Иначе говоря, m.yoursite.ru, а не yoursite.ru/m.

• Отдельную мобильную версию вряд ли удастся адаптировать подо все мыслимые смартфоны и планшетники. С помощью веб-аналитики выберите самые популярные разрешения. В частности, многие «умные» телефоны на платформе Android имеют разрешения 480 × 320 и 480 × 800 пикселей.

• Мобверсия может представлять собой отдельный сайт, но базу данных им делайте общую. Иначе будет иметь место преумножение сущностей без необходимости. Чтобы предотвратить проблемы с дублированием контента, используйте в HTML-коде атрибуты rel="alternative" и rel="canonical".

• Исходите перво-наперво из своих потребностей, а не из соображений экономии. Разработка отдельной мобильной версии увеличивает бюджет приблизительно на 15–50 %; разброс широк. Адаптивный дизайн также поднимает цену разработки по сравнению с прайсом на создание стандартной веб-версии, но в среднем на меньший процент.

• Оптимально тестировать мобверсию или страницы с адаптивной версткой не только программными инструментами, но и при помощи «живых пользователей». Онлайн-сервис никогда не скажет вам правды про юзабилити – про то, насколько удобна или неудобна человеку навигация, привлекательны ли названия разделов в меню, ясно ли, куда нажать, чтобы подписаться на новости. Чем пестрее будет «парк гаджетов», которые удастся задействовать в испытаниях, тем лучше.

• Не пренебрегайте геолокацией. Особенно если с точки зрения вашего бизнеса действительно имеет значение, откуда посетитель вашего сайта. Например, ненавязчиво предложите ему подтвердить его автоматически определенную дислокацию. Да и дополнительную приятную функциональность таким образом не грех обеспечить. Почему бы, если GPS-модуль включен, не показывать ближайшие к пользователю точки продаж вашей компании?

• В мобильном Интернете любые провалы в навигации равносильны краху. Во всяком случае посетитель принимает их ближе к сердцу, чем когда «серфит» в Вебе. Да не будет на вашей площадке ошибочных или неточных перенаправлений (редиректов): частенько из-за рассеянности веб-мастера ссылка из мобильного поиска ведет не на анонсированную в выдаче страницу сайта, а на титульную. И конечно, любая ошибка доступа в мобильной версии – это ЧП. В «большом Интернете», увидев вместо посадочной страницы до отвращения знакомое число 404, посетитель с высокой долей вероятности сотрет в адресной строке все, кроме имени домена, чтобы зайти на главную страницу. Но если у него в руках гаджет, скорее всего, он импульсивно закроет вкладку и забудет о вашем проекте.