Tailwind CSS: за и против

По данным опроса The State of CSS 2020, больше всего разработчиков в мире, использующих CSS-фреймворки, сейчас заинтересованы в изучении и применении Tailwind CSS. Он опережает конкурентов в этом рейтинге уже второй год подряд. Команда Tailwind предлагает альтернативный подход для поддержки и стилизации HTML-разметки, но у него есть и свои противники. Проштудировав статьи и комментарии на таких ресурсах, как Dev.to, Product Hunt и Codeburst, мы собрали наиболее популярные доводы за и против использования этого фреймворка.

Концепт Tailwind CSS
Но сначала о том, чем Tailwind отличается от других CSS-фреймворков. Главное отличие — в том, что он не содержит какой-либо концепт дизайна, а предоставляет готовые классы, утилиты и директивы для стилизации и разметки HTML-тегов. Такой подход позволяет реализовать полностью настраиваемый дизайн компонентов без написания даже строчки пользовательского CSS-кода. Авторы фреймворка предполагают, что разработчики получат от этого следующие преимущества:

Не нужно тратить время на придумывание названий для CSS-классов.
CSS код почти не увеличивается в размерах, а все классы и утилиты используются многократно. Поэтому редко когда придется писать новый CSS-код.
Вносить изменения безопаснее. Не нужно переписывать CSS, если достаточно поменять классы в HTML.
Еще из полезных функций: тему можно настроить под свой проект, адаптивные утилиты Tailwind помогут создать полностью отзывчивый интерфейс, а наведение, фокус и другие состояния легко стилизовать с помощью служебных классов. Функция @apply при этом позволяет использовать Tailwind-классы для создания собственных переиспользуемых абстракций:

<!-- Using utilities -->
<button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700">
  Click me
</button>
 
<!-- Extracting classes using @apply -->
<button class="btn btn-green">
  Button
</button>
 
<style>
  .btn {
    @apply py-2 px-4 font-semibold rounded-lg shadow-md;
  }
  .btn-green {
    @apply text-white bg-green-500 hover:bg-green-700;
  }
</style>

За Tailwind CSS
Синтаксис
Синтаксис Tailwind очень прост: к элементам HTML или JSX добавляются имена классов. Вот как это выглядит на примере уведомления, созданного с помощью этого фреймворка:

<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="ml-6 pt-1">
    <h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
    <p class="text-base text-gray-600 leading-normal">You have a new message!</p>
  </div>
</div>


Каждое имя класса содержит одно или несколько свойств CSS. Например, flex — это display: flex;, p-6 — padding: 1.5rem, mx-auto — margin-left: auto; margin-right: auto; и так далее. Этот подход очень прост и полезен, так как сложные компоненты строятся из ограниченного набора примитивных утилит.

Встроенная отзывчивость, псевдоклассы и стили
Отзывчивый дизайн, стилизация элементов и псевдоклассов, таких как hover, focus, active, доступны прямо в HTML-коде. Весь стиль определяется самим элементом. Это означает, что посмотрев на элемент, вы сразу поймете его стили. При этом вам не нужно открывать другой файл, чтобы редактировать CSS-правила.

По умолчанию Tailwind использует систему брейкпоинтов mobile first, аналогичную той, которая используется в других фреймворках, таких как Bootstrap.

Меньше CSS-кода
Размер CSS-кода не растет линейно. Имена классов совместно используются элементами, а это гарантирует постоянный размер пакета. Кроме того, Purge CSS удалит все неиспользуемые стили, поэтому кодовая база не будет перегружена.

Более высокая производительность
Написание классов Tailwind происходит быстрее, чем в CSS или CSS-in-JS. С использованием Tailwind верстка сводится к добавлению классов CSS к HTML-разметке.

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

Рассмотрим это на примере. В обычном CSS у нас было бы:

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }
 
/* Medium (md) */
@media (min-width: 768px) { /* ... */ }
 
/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }
 
/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

Это может показаться легким для чтения. Однако представьте, что у вас есть сотни классов. Вскоре код может стать трудным для чтения и изменения.

Теперь посмотрим на Tailwind:

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

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

Множество вариаций настройки проекта
Tailwind предоставляет разработчику рабочую тему по умолчанию, которая подойдет для множества проектов. Есть и возможность расширять или изменять настройки с помощью файла tailwind.config.js. Он также позволяет добавлять собственные плагины, что открывает целый мир возможностей для сторонних разработчиков.

Против Tailwind CSS
Создание сложных анимаций
Несмотря на то, что простые анимации включены в готовом виде, а другие можно добавить через конфигурацию, сложную анимацию в Tailwind очень сложно реализовать. Но проблему можно решить с помощью простого CSS, библиотеки анимации, такой как Framer Motion, или библиотеки CSS-in-JS, такой как Styled Components.

Уродливый HTML
Базовые классы содержат одно-два CSS-правила, поэтому может потребоваться много классов для стилизации отдельного тега. Это значит, что HTML-разметка будет выглядеть раздуто и неряшливо с эстетической точки зрения. Но не только эстетика может пострадать — во множестве классов, написанных в одну строку, будет легко запутаться.

Для наглядности посмотрите на пример ниже:

<div class="min-w-0 flex-auto space-y-0.5">
  <p class="text-lime-600 dark:text-lime-400 text-sm sm:text-base lg:text-sm xl:text-base font-semibold uppercase">
    <abbr title="Episode">Ep.</abbr> 128
  </p>
  <h2 class="text-black dark:text-white text-base sm:text-xl lg:text-base xl:text-xl font-semibold truncate">
    Scaling CSS at Heroku with Utility Classes
  </h2>
  <p class="text-gray-500 dark:text-gray-400 text-base sm:text-lg lg:text-base xl:text-lg font-medium">
    Full Stack Radio
  </p>
</div>

Для решения этой проблемы авторы фреймворка предлагают использовать @apply. Например в проектах, где большая часть HTML ориентирована на имена классов с компонентной областью видимости (что близко по концепции к методологии БЭМ), @apply широко используется. Но это подводит к следующему вопросу.

@apply принципиально несовместим и нестандартен
Проблемы возникнут, если попробовать отказаться от Tailwind. Везде, где классы были созданы с помощью @apply, они просто перестанут работать. Особенно это будет болезненно для проектов, использующих компонентный подход.

Избыточная сложность настроек
Токены дизайна Tailwind настраиваются с помощью сложной системы на JavaScript. Настройки темы Tailwind можно заменить настраиваемыми CSS-переменными (CSS Custom Properties), которые поддерживаются всеми браузерами, кроме Internet Explorer.

Tailwind CSS плохо работает через CDN
Минусы подключения через CDN:

Нельзя настроить тему
Нельзя использовать директивы: @apply, @variants и т.д.
Нельзя включить дополнительные варианты, такие как group-focus
Нельзя устанавливать сторонние плагины
Нельзя избавиться от неиспользуемых стилей
Это будет минусом для тех, кто привык не хранить у себя стандартный код. Единственный приемлемый вариант использования CDN — для прототипирования.

Tailwind забывает о существовании веб-компонентов
Tailwind полностью непригоден для использования в Shadow DOM. Некоторые предприимчивые разработчики придумали решения, в которых отдельные элементы стиля Tailwind можно внедрить в компоненты в процессе сборки, но это определенно “костыль”.

Вместо этого Tailwind поощряет суп с тегами div/span. Использование тегов <div> и <span> повсюду в разметке — это анти-шаблон. Пользовательские элементы полностью поддерживаются современными браузерами, и нет причин этим пренебрегать. Например вместо <div class = “card”> </div> можно написать <ui-card> </ui-card>.

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

Но хотя Tailwind очень хорошо подошел многим разработчикам, это не значит, что это идеальное решение для каждого проекта. Стоит взвесить его преимущества для кодовой базы и потенциальное влияние на команду, прежде чем рассматривать его применение.

Добавлено: 29 Июня 2021 07:37:08 Добавил: Андрей Ковальчук

Как изменить или отключить чекбокс — Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев

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

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

Для начала рассмотрим вариант с полным отключением чекбокса. Для этого вам нужно добавить в файл функций вашей темы - functions.php, небольшую функцию. Если вы не ориентируетесь в функциях этого файла, то добавляете в самый конец перед закрывающим тегом PHP ?>. Если его нет, то просто в самый конец.

Перед изменением function.php, обязательно сохраните его копию, чтобы в дальнейшем, в случаи ошибки, вернуть все как было. Так же, можете использовать дочернюю тему.


/* ОТКЛЮЧАЕМ ЧЕКБОКС */
function comment_hide_checkcdpr( $fields ) {
    unset( $fields['cookies'] );
    return $fields;
}
add_filter( 'comment_form_default_fields', 'comment_hide_checkcdpr' );

Тут все просто, особо разбирать нечего, каких-то настроек нет. Далее разберем вариант, когда чекбокс надо оставить, но подпись к нему изменить. Как и с первым кодом, добавляйте данную функцию туда же.
/* МЕНЯЕТ ТЕКСТ ЧЕКБОКСА */
function comment_change_checkcdpr( $fields ) {
    $fields['cookies'] = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" />' .
    '<label for="wp-comment-cookies-consent">Сохранить имя и email.</label></p>';
    return $fields;
}
add_filter( 'comment_form_default_fields', 'comment_change_checkcdpr' );

В 2 и 3 строке сам чекбокс и label к нему. Как раз содержимое label, вам и нужно менять. В данном примере стандартная надпись заменена на Сохранить имя и email. Кстати, данный код можно добавить на сайт, если у вас нет чекбокса и вы хотите его иметь.

Еще как бонус, хочу предложить вариант данного кода с дополнительной функцией, проверки сохранял ли данный пользователь ранее данные. Если сохранял - чекбокс будет отмечен. По сути это тот же код, только с маленькими правками.
/* МЕНЯЕТ ТЕКСТ ЧЕКБОКСА И ДЕЛАЕМ ЧЕКБОКС АКТИВНЫМ, ЕСЛИ РАНЕЕ СОХРАНЯЛИСЬ ДАННЫЕ */
function comment_change_checkcdpr( $fields ){
    $user_ca = wp_get_current_commenter();
    $checked = empty( $user_ca['comment_author_email'] ) ? '' : ' checked="checked"';
    $fields['cookies'] = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $checked . ' />' .
    '<label for="wp-comment-cookies-consent">Сохранить имя и email.</label></p>';
    return $fields;
}
add_filter( 'comment_form_default_fields', 'comment_change_checkcdpr' );

Давайте рассмотрим, какие изменения добавлены в этой версии функции.

Во второй строке создаем переменную $user_ca и задаем ей значение - wp_get_current_commenter() .wp_get_current_commenter() - это функция, которая получает имя, почту, URL сайта текущего комментатора из куков.
В третей строке создаем еще одну переменную - $checked и ее значение, это проверка сохраненные ли у данного комментатора в браузере имя и почта к вашему сайту. Если это так, то чекбоксу прописывается параметр checked="checked". То бишь, комментатору который уже давал согласие, не нужно вновь отмечать чекбокс.
Последнее, это выводим нашу переменную $checked в 4 строке в параметрах самого чекбокса.
Вот и весь материал. Он простенький и справляется с задачей. Теперь вы сможете загружать менять или отключать данный чекбокс с проверкой на сохранение персональных данных. Надеюсь, данный материал помог вам.

Добавлено: 28 Мая 2021 07:20:10 Добавил: Андрей Ковальчук

Эффект lightbox для галерей, скрипт увеличения изображений для галерей лендингов

На системах управления сайтом, так званых CMS, той же WordPress можно установить плагин, но на самописных страницах так не сделать. Поэтому данная библиотека вам может помочь. Вся библиотека это 2 файла, сам скрипт и стили CSS. Все это - baguetteBox, Страница baguetteBox на GitHub

Чтобы применить такой эффект лайтбокса для своих нужно сделать несколько шагов. Для начала убедиться, подключена ли к вашей странице библиотека jQuery. Если нет, то это нужно сделать.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Далее, сразу после библиотеки подключаем скрипт нашего lightbox для галерей. Он есть в архиве, который вы скачали, это файл - baguette.js. Его подключить можете тоже по инструкции из статьи упомянутой выше.

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

//В ЯВА СРЕДУ
baguetteBox.run('.gallery');
 
//В HTML СРЕДУ
<script>
jQuery(function($){
baguetteBox.run('.gallery');
});
</script>

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

<ul class="gallery">
<li><a href="images/11.jpg"><img alt="Галерея" src="images/1.jpg"></a></li>
<li><a href="images/22.jpg"><img alt="Галерея" src="images/2.jpg"></a></li>
<li><a href="images/33.jpg"><img alt="Галерея" src="images/3.jpg"></a></li>
</ul>

Внутри списка размещаете ссылки внутри которых изображения. Задумка такая: изображение в теге img - это миниатюра, маленькая картинка, а уже в самой ссылке указан путь к большому изображению. То бишь в нашем примере изображение 1.jpg - это миниатюра, а 11.jpg это полное.

Ну и чтобы все это работало, остался последний шаг - подключение стилей нашей библиотеки лайтбокса. В скачанном вами архиве - это файл baguette.css. Подключите его к своему сайту или скопируйте стили и перенесите в свой файл стилей. Пример подключения:

<link href="baguette.css" type="text/css" rel="stylesheet">

Не забудьте указать свой путь к файлу, если он лежит не в корне, а в какой-то папке


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

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

baguetteBox.run('.gallery', {
    //СЮДА ОПЦИИ
});

У скрипта есть следующие опции, укажу основные, ознакомится всеми можно на странице самого скрипта на GitHub (Ссылка указана в начале статьи).

buttons: false, - По умолчанию true. Этот параметр отключает показ кнопок для перелистывания изображений, например, если вы хотите, чтобы показывались только по одному.
fullScreen: true, - По умолчанию false. Этот параметр включает показ галереи в полно экранном режиме. Поверх браузера.
noScrollbars: true, - По умолчанию false. Этот параметр отключает показ скролбара, полосы прокрутки на сайте, во время просмотра изображений.
animation: 'fadeIn', - По умолчанию slideIn. Этот параметр задает вид анимации перелистывании изображений.
async: true, - По умолчанию false. Этот параметр включает асинхронную подгрузку файлов.
Если их применять, то инициализация будет такой. Разделите параметры запятой, не забудьте!

baguetteBox.run('.gallery', {
animation: 'fadeIn',
noScrollbars: true,
buttons: false,
});

Сложного с этим скриптом не вижу ничего. Если руки растут правильно, то справитесь без проблем, к тому же на GitHub есть информация, которую тоже можно и нужно использовать.

Добавлено: 16 Мая 2021 10:20:41 Добавил: Андрей Ковальчук

Система лайков или кнопка мне нравится c использованием cookies на WordPress

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

Чтобы это сделать, нужно выполнить первые два пункта прошлой статьи. Сначала инициализировать скрипт - post-like.js. Далее добавляете две строки add_action, где мы нашу функцию по подсчету голосов вешаем на указанный хук. там все расписано и просто.

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

Если добавили подключение post-like.js с дополнительные данными для аякса и повесили будущую функцию на хук. То после добавляете новую функцию, переделанную - post_like().

function post_like(){
$nonce = $_POST['nonce'];
if(!wp_verify_nonce( $nonce, 'ajax-nonce')) die ( 'Ошибка!');
if(isset($_POST['post_like'])){
$post_id = $_POST['post_id'];
$meta_count = get_post_meta($post_id, "votes_count", true);
update_post_meta($post_id, "votes_count", ++$meta_count);
echo $meta_count; 
}
exit;
}

Как видите, она схожа с прошлой, но с нее вырезано все что касается проверки и записи полей для IP адреса. Расписывать нет смысла такие же строки расписаны в прошлой статье. Функция просто при запуске получает ID статьи где нажали на кнопку, и в ее произвольное поле, которое называется - votes_count, записывает значение на 1 больше.

После функции подсчета, нам нужна новая функция вызова самой кнопки уже на сайте. Той кнопки по нажатию на которую и будет подсчет. подключаете ее после прошлой в том же function.php.
function getPostLikeLink($post_id){
$vote_count = get_post_meta($post_id, "votes_count", true);
//НЕАКТИВНАЯ КНОПКА
$output = '<div class="nopost-like"><span>Нравится</span><span class="count">'.$vote_count.'</span></div>';
//АКТИВНАЯ КНОПКА
$output .= '<div class="post-like"><span class="like_ico" data-post_id="'.$post_id.'">Нравится</span><span class="count">'.$vote_count.'</span></div>';
return $output;
}

getPostLikeLink - теперь тоже новая. Так как нет проверки по айпи, она выглядит иначе. По сути она выводит сразу 2 кнопки. Активную и нет, ту на которую нажать нельзя.

Неактивная имеет класс у родительского контейнера nopost-like, а активная - post-like. Это нужно учесть, эти классы понадобятся далее.
// В СРЕДУ PHP
echo getPostLikeLink(get_the_ID());
//  В СРЕДУ HTML
<?php echo getPostLikeLink(get_the_ID()); ?>

Теперь вернемся к post-like.js. В прошлой статье в нем был один код, теперь немного измененный уже с учетом cookies. Создаете или открываете, если создали и заменяете содержимое или добавляете новое если он пуст:
jQuery(document).ready(function($){
$(".like_ico").click(function(){
var pathToMyPage = window.location.pathname;
$.cookie("post-like-count", "1", { expires:1, path: pathToMyPage }); 
heart = $(this);
post_id = heart.data("post_id");
$.ajax({
type: "post",
url: ajax_var.url,
data: "action=post-like&nonce="+ajax_var.nonce+"&post_like=&post_id="+post_id,
success: function(count){
if(count != "already"){
heart.addClass("voted");
$(".count").text(count);
$('.post-like').hide();
$('.nopost-like').show();
}
}
});
return false;
});
 
if ( $.cookie("post-like-count") == null){
    $('.post-like').show();
    $('.nopost-like').hide();
}else{
    $('.post-like').hide();
    $('.nopost-like').show();
}
 
 
});

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

Во второй строке мы запускаем событие после нажатия на кнопку с классом like_ico. В нашей кнопке это слово - Нравится.
В третей строке создаем переменную, с ссылкой на текущую страницу - pathToMyPage . Это для куков, чтобы они записались только для статьи где нажата кнопка, а не для всех кнопок на сайте.
В четвертой строке - создаем имя для куков - post-like-count и значение - 1.

Если кнопка нажата - кукам задается значение 1 и кнопка в будущем станет неактивна. Так же expires, задается 1, это один день. То бишь куки хранятся сутки после они сотрутся и кнопку можно нажать повторно. Если нужно больше дней, укажите свое значение. Ну и в конце переменная с прошлой строки указывает для какой страницы хранить куки.

Далее идет уже аякс отправка нажатия, подсчет голосов, запись в бд и тд, подробнее в прошлой статье. После успешной отправки запроса выполняем определенные действия.
В 14 строке обновляем значения счетчиков у всех блоков с классом count. Так что в функции вывода кнопки учтите это и не меняйте класс или меняйте везде.
В 15 $('.post-like').hide(); - скрываем активную кнопку, которая позволяет увеличивать значение счетчика на 1.
И в 16 строке $('.nopost-like').show(); - показываем неактивную кнопку, нажать которую нельзя. В принципе все с событием по нажатию.
Далее с 23 строки мы проверяем после загрузки страницы, как только человек обновит страницу или впервые зайдет - есть ли у него куки к данной странице. Если нет - не показывать активную и показывать неактивную и в противном случаи - наоборот.
На этом со скриптом все. Но есть еще один важный момент. Куки не будут записываться без специального скрипта куков. Он может быть подключен к вашему сайту ранее, например если вы используете чужую тему, которая уже использует его или какой-то плагин например. На этом этапе вы можете проверить работу кнопки, если нажатия можно совершать множественное количество и кнопка не становится - неактивной, то значит вам не повезло :). Нужно выполнить последний шаг.

Вам нужно скопировать следующую строку скрипта. Она длинная, обязательно скопировать все!
jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||{};if(value===null){value='';options.expires=-1}var expires='';if(options.expires&&(typeof options.expires=='number'||options.expires.toUTCString)){var date;if(typeof options.expires=='number'){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000))}else{date=options.expires}expires='; expires='+date.toUTCString()}var path=options.path?'; path='+(options.path):'';var domain=options.domain?'; domain='+(options.domain):'';var secure=options.secure?'; secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('')}else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+'=')){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break}}}return cookieValue}};

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

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

Что касается стилей, то тут по желанию.

Добавлено: 05 Мая 2021 06:49:34 Добавил: Андрей Ковальчук

Идентификационный код, дата рождения,юзабилити

Читатели блога, проживающие в Украине, конечно, знают, что всем жителям Украины присваивается, так называемый, идентификационный код (ИК). Есть он и у меня. Но совсем недавно я узнал, что это не просто набор из 10 цифр.

Первые пять цифр – это номер дня рождения, начиная с 1 января 1900 года. Т.е. человек, родившийся 1.01.1900 получит код, начинающийся с 00001, 2.01.1900 – 00002, …, 1.01.1901 – 00366 и т.д.

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

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

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

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

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

Добавлено: 25 Марта 2021 08:35:43 Добавил: Андрей Ковальчук

Что слышат разработчики и дизайнеры

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

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

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

Хуже всего в этом скепсисе то, что он заслоняет собою тот факт, что лишь одна причина имеет значение:
-Это правильно.

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

Сколько возможностей у нас есть, чтобы коренным образом улучшить жизнь других людей, лишь чуть лучше делая свою работу?

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

Добавлено: 24 Июля 2018 07:55:17 Добавил: Андрей Ковальчук

Что и когда тестировать?

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

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

Сначала попробуйте воспользоваться ими сами. Потом понаблюдайте, как ими пользуются другие (один-два человека), и определите, что в них работает и что не работает. Многие пропускают этот шаг, но он очень полезен: для вас кто-то бесплатно создал рабочий прототип вашего сайта.

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

С уже существующими сайтами можно проводить два вида тестирований:
-Тестирование «Что здесь?». Пользователям демонстрируют сайт и выясняют, понимают ли они, что видят: понятно ли назначение сайта, его «ценное предложение», структура, функционирование и т. д.

-Выполнение заданий. Пользователя просят выполнить то или иное действие и затем наблюдают, насколько легко ему удается это сделать.

Как правило, результаты будут более ценными, если вы сумеете сделать так, чтобы пользователи сами определяли задания для выполнения. Например, лучше сказать: «Найдите книгу, которую вы хотите купить или которую недавно купили», чем «Найдите книгу о приготовлении пищи по цене не выше 14 долларов». Если людям дают выдуманные задания, то у них не возникает эмоционального отношения к ним, и поэтому они не используют весь свой личный опыт при их выполнении.

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

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

Также рекомендую применять метод, который я называю «Cubicle test» (протестировать кого-либо из соседней комнаты). Когда вы сделаете страницу какого-то нового типа (особенно это касается форм), то распечатайте ее и покажите кому-нибудь из соседней комнаты, чтобы он разобрался в ее содержании. Такое неформальное тестирование может быть очень полезным для выявления большого числа возможных проблем.

Добавлено: 24 Июля 2018 07:48:40 Добавил: Андрей Ковальчук

Немного правды о тестировании

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

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

-Лучше протестировать одного пользователя, чем не тестировать ни одного. Тестирование всегда полезно. Даже самый плохой тест с самым неподходящим пользователем поможет вам увидеть то, что позволит улучшить ваш сайт. На своих семинарах я обязательно устраиваю живой юзер-тестинг, показывая слушателям, что проводить его легко и что он всегда дает массу ценной информации. Я вызываю добровольца, который должен выполнить некое задание на сайте, принадлежащем одному из присутствующих на семинаре. Тестирование занимает менее десяти минут, но обладатель сайта обычно успевает исписать несколько страниц. Не было случая, чтобы он не попросил дать ему запись процесса тестирования, чтобы он, вернувшись с семинара, мог показать ее своей рабочей группе. (Рассказывают даже, что однажды, просмотрев такую запись, разработчики изменили сайт, сэкономив в результате $100 000.)

-Лучше протестировать одного пользователя в начале разработки, чем 50 пользователей в конце. Большинство людей почему-то думает, что тестирование – это слишком «большое и серьезное» дело. Если и вы будете придерживаться этой точки зрения, то не будете проводить тестирование на достаточно ранних этапах разработки и с достаточной частотой, что позволило бы извлечь из него максимальную пользу. Простой тест, причем пораньше, когда у вас еще есть время, чтобы использовать его результаты, почти всегда
ценнее, чем изощренный тест и поздно.

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

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

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

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

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

-Тестирование – это повторяющийся процесс. Тестирование не проводится один-единственный раз. Вы что-то создаете, потом тестируете это, потом корректируете, потом опять тестируете…

-Лучшим средством тестирования является живая реакция аудитории. Одна из причин, по которой фильмы братьев Маркс были так популярны, заключалась в том, что перед началом
съемок они отправлялись на гастрольные туры и представляли публике водевильные сцены своего фильма. Они проводили по пять спектаклей в день и постоянно импровизировали, обращая внимание на то, какие строчки вызывали больший смех. Даже после того как какая-то строка была уже утверждена, Граучо продолжал слегка экспериментировать
с ней, чтобы попытаться ее улучшить.

Добавлено: 24 Июля 2018 07:47:55 Добавил: Андрей Ковальчук

Директор по креативу: менеджер или творец

Креативщики - по парам!
Пожалуй, это одна из самых ярких и интересных профессий в рекламном агентстве. Креативный директор руководит процессом работы над творческими идеями. Под его началом находятся арт-директора и копирайтеры, организованные в креативные пары. Они-то и придумывают сюжеты роликов, тексты радиорекламы, оформляют рекламные щиты и т. д. Копирайтер отвечает за текст, арт-директор – за визуальное воплощение идеи. Но на практике часто бывает наоборот: образ придумывает копирайтер, а арт-директору приходит в голову слоган… Каждая творческая пара выполняет те или иные проекты разного уровня сложности. Если речь идет о масштабной рекламной кампании, включающей целый ряд мероприятий, то за работу принимается команда специалистов. Креативному директору приходится одновременно вести несколько разноплановых проектов.

Не подавляйте личность!
Дисциплина не самая сильная сторона творческих работников. Отдельных креативных личностей с разнообразными амбициями и интересами нужно объединить в эффективную творческую команду, нацеленную на общий результат. Заставить таких людей работать под нажимом невозможно; не помогут ни кнут, ни пряник. Их можно только заинтересовать. Конечно, ни от кого нельзя ежедневно требовать гениальных идей... Но в то же время рекламный бизнес –тот же конвейер, так что на творческие кризисы нет времени. Опытный креативный директор знает, как выйти из этого тупика. Он умеет задать команде нужное направление таким образом, чтобы креаторы сохранили полную уверенность, что это их собственные мысли, рожденные свободно, без всякого принуждения…

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

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

Защитник креативной идеи
Большую часть рабочего времени креативный директор взаимодействует с людьми. На нем - контроль исполнения заказа клиента, оценка эффективности деятельности творческой группы. Нужно иметь развитые коммуникативные навыки, уметь общаться, убеждать. Приходится быть "своим" не только для команды рекламистов, но и для представителей фирм-заказчиков. Повседневная работа подразумевает многочисленные встречи и переговоры с первыми лицами компаний-клиентов. Подавать готовые идеи клиенту – тоже искусство, и креативный директор владеет им в совершенстве. Этот процесс напоминает защиту дипломных проектов в вузе. Отстаивать приходиться сразу несколько идей. Нужно аргументировать выбор, объяснить заказчику, чем каждая из них может «зацепить» аудиторию... Предложения не всегда нравятся клиенту. Тогда креативному директору приходится искать компромисс, ненавязчиво переубеждать… Развитое чувство юмора, гибкость мышления и активная жизненная позиция окажутся при этом весьма кстати.

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

Будни профессионала
Дмитрий Авдеенко, руководитель креативной группы рекламного агентства MAXIMA

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

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

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

Управление в моём случае не означает слежку – кто во сколько пришёл на работу. Речь идет о взаимоотношениях с другими отделами, планировании внутренних встреч, расстановке приоритета задач. Проектов много, я собираю ребят и говорю: «Вот это нужно сделать в первую очередь, выложиться по максимуму. Остальное – пока держим в голове.

«Амбразуры», которые нужно закрывать, возникают постоянно, но этот экстрим, приток адреналина мне и нравится. Каждый день приходится знакомиться с чем-то новым. Придумывать интересные ходы, впитывать информацию. Моя жизнь не делится на работу и личное время. Приходишь домой и продолжаешь прокручивать все эти брифы в голове. Иногда самые интересные идеи приходят в голову на грани сна и бодрствования. «Вот это мысль!, - думаешь про себя. - Ай да я, ай да… как там у Пушкина?». Придешь потом на рабочее место и продолжаешь удивляться: я, конечно, не Пушкин, но самоопределение было верным.
Для кого-то ненормированный рабочий день – минус, но для меня это большой плюс. Будни состоят из постоянного общения: со своей командой, с агентской группой, наконец, с клиентами. Умение продавать идею - очень важное качество в нашей профессии. Можно грамотно организовать весь процесс, добиться по-настоящему гениального результат, но на презентации не произвести впечатления на заказчика - тогда вся работа пойдет насмарку и в лучшем случае останется удачным экспонатом в портфолио. И хотя ты видишь клиента второй раз в жизни, нужно с ходу найти к нему «ключик». На одного произведет впечатление эмоциональное выступление, на другого - спокойное, рациональное, раскладывающее вес доводы по полочкам. Вот и получается, что на всех этапах работы креативному директору необходима интуиция.
Слухи и факты
Одна из самых высоких зарплат в сфере рекламы
Чем солиднее рекламное агентство, тем выше заработки. Разброс зарплат - от 1500-4500 у.е. В некоторых известных агентствах считают, что запись в трудовой книжке о работе креативным директором в их компании - сама по себе путевка в жизнь, и на первых порах могут платить не очень большие деньги. Но дальше все зависит от человека.

Дальнейшего карьерного роста не предполагается
Креативный директор подчиняется непосредственно генеральному директору компании. Выше - уже уровень топ-менеджмента. Имея за плечами солидный опыт работы, можно создать собственное рекламное агентство. Речь, конечно, не идет об организации, в штате которой будет 100 и более сотрудников (это уж очень далекая перспектива), но вчерашнему креативному директору вполне по силам создать рекламный бутик, набрать команду фрилансеров и самостоятельно выполнять заказы клиентов.

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

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

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

Добавлено: 17 Мая 2018 19:34:41 Добавил: Андрей Ковальчук

Юзабилити – тестирование в домашних условиях

Я несколько лет занимаюсь созданием сайтов и по программной части, да и по всему остальному тоже, разговоры с клиентом веду я. Не так давно клиент начал умнеть и теперь помимо слов: макет, хостинг, скрипты, движок и база у него появилось новое слово – “юзабилити - тестирование”. От куда они этого нахватались неизвестно, может от иностранных коллег, может из книг. Кто его знает. И каждый раз приходится им объяснять, что это такое и с чем его едят. И все хотят, чтобы я обязательно его провёл и предоставил им отчёт. А так как в профессиональных студиях такие вещи очень дороги и мне они не по карману, приходится изобретать велосипед. В этой статье я бы хотел рассказать о том, как провести юзабилити - тест в домашних условиях. И так начнём…

Прочитав достаточное количество статей, я понял, что если вы хотите получить хороший сайт, его нужно тестировать. Ведь поработав несколько недель над одним проектом, ты знаешь каждую его мелочь, но её не знает рядовой пользователь. Надо понимать, что люди, а точнее целевая аудитория твоего будущего сайта может не думать, так как это делаешь ты, люди могут использовать другие методики поиска в Интернет нужной им информации. И в связи с этими обстоятельствами нельзя тестировать сайт самому. Обычно я прошу друзей сделать это для меня. Главное помнить, что лучше сайт протестирует хотя бы один человек, чем этого не сделает ни кто. Но для начала тестирования в “домашних условиях” нужно подготовить некоторые вещи. Например, список вопросов, которые вы будете задавать. Я, конечно, понимаю, что всё предугадать невозможно, но всё основное у вас должно быть на руках, остальное к вам придёт непосредственно при тестировании. Ещё вам понадобится записывающий магнитофон и/или видеокамера, расставьте их так, чтобы они не мешались пользователю и могли свободно записывать все, что происходит. Камера должна снимать только монитор, для дальнейшего анализа ошибок пользователя. При хорошем стечении обстоятельств вам понадобятся две камеры. Одна из них должна снимать пользователя и его реакцию на те или иные события, а другая должна снимать всё, что происходит на мониторе. Если же вы стеснены в финансах и у вас нет камеры, то вы описываете всё что увидите словами в какой либо тетради, но не советую, анализировать весь процесс тестирования будет очень сложно. Приготовьте два стула (себе и собеседнику) и поставьте их рядом, но так, чтобы пользователю вы не мешались, и он чувствовал себя свободно и раскованно. Включите компьютер и загрузите с локального сервера копию сайта. Выключите монитор. Вот и всё, место для тестирования готово.

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

С чего начинать, да всё просто. Для начала предложите тестируемому кофе или чай, для того чтобы он почувствовал себя спокойнее. Объясните ему, что он в процессе тестирования должен спокойно проговаривать свои мысли и не бояться ошибаться, ведь тестируете вы сайт, а не его. Человек должен понять, что ничего страшного в этом нет, и никто на него не будет ругаться, если он сделает что-то не так. Да и вы сами должны спокойно реагировать на все глупости, которые может выкинуть пользователь в процессе тестирования. Главное спокойно относиться ко всему и не давать пользователю замолчать, пользователь должен проговаривать всё, что он думает и не стесняться этого. Ведь главное в тестировании это слова пользователя и его ход мыслей, а целью всего этого процесса является осмысление ошибок и их устранение.

Попили чаю, идём дальше. Предложите пользователю сесть перед компьютером и включите монитор. С этого момента вы должны наблюдать за ходом мысли тестера, при этом, задавать ему вопросы и просить выполнить какие либо действия, но не старайтесь ему помочь, пользователь должен сам найти выход из ситуации или достичь цели, которая была ему поставлена. Лишь только если вы увидите, что тестируемый окончательно поставлен в тупик ввиду ошибки вашего сайта или же непонимания происходящего вы можете помочь ему советом или показать, как это можно обойти. После чего вы должны сделать пометку о данной ошибке и в дальнейшем убрать или доработать её. Для начала поинтересуйтесь у пользователя, что он думает о главной странице, понятен ли ему смысл и предназначение сайта, что привлекло его внимание сразу, а чего он не заметил, как ему нравится сочетание цветов, возникают ли у него ассоциации и дальше в таком духе. Потом можно попросить пользователя выполнить какую либо простую операцию (например, если вы тестируете магазин, попросите пользователя заказать определённый товар, который с начала он должен найти, а потом добавить товар в корзину и оформить заказ на себя). Но не забывайте о том, что ваш пользователь должен проговаривать все свои мысли и объяснять все свои поступки. После просмотра и оценки главной страницы (обычно от 3 до 5 мин) переходите на другие страницы и элементы сайта. В частности пробегитесь с пользователем по всем меню, обычно первые проблемы возникают именно на почве не грамотно построенного и отсортированного меню. Затем можно попробовать воспользоваться сервисами (если, конечно же, они есть), предоставляемые данным сайтом. Будь-то голосование или служба рассылок, главное узнать, понятно ли предназначение данных сервисов. После того, как пользователь просмотрел весь сайт (или большую его часть) вы должны поинтересоваться у него, что ему особенно понравилось в большей степени, а что в меньшей. Какие мысли и предложения есть у него самого. Не забывайте всё это записывать. После тестирования первого человека пригласите второго и повторите тест. Обычно на тестирование сайта требуется 3-4 человека. В среднем один сайт тестируется от 30 минут до одного часа. Как показывает практика, если ошибка серьёзная, то все пользователи, как правило, останавливаются в одном и том же месте, заходя в тупик, или просто сообщают вам о ней.

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

И вот настал тот день, когда вы исправили все замеченные ошибки. Вы думаете, что всё у вас в порядке и собираетесь выкладывать сайт, не торопитесь, пригласите ещё 2-3 человек и проведите повторный тест. Я много раз убеждался, что при исправлении одних ошибок, вылезает много других. При повторном тестировании старайтесь не использовать тех людей, которые были использованы при первом тестировании, старайтесь подключать к этому, как можно больше новых и разных личностей. Лично мне хватает двух тестирований, чтобы удалить практически все имеющиеся ошибки. Остальное дорабатывается уже после запуска сайта в эксплуатацию.

Перед тем, как сдавать сайт заказчику и получать с него деньги напишите маленький отчет (обычно 1-2 листа) и предоставьте все имеющиеся у вас материалы тестирований. Это производит очень большой эффект вашей компетентности по данному вопросу и в дальнейшем большую часть заказов будет приходить от партнёров, друзей родственников вашего заказчика. Вот вроде бы и всё, список приблизительных вопросов, которые нужно задавать пользователю – тестеру вы сможете найти в книге Стива Круга “Вебдизайн”.

Успехов вам в этом нелёгком деле, как создание сайтов.

Добавлено: 18 Апреля 2018 21:32:04 Добавил: Андрей Ковальчук

CSS Float в теории и на практике

Концепция float возможно одна из самых неинтуитивных концепций в CSS, ее непонимание часто приводит к искажению страницы, проблемам с читабельностью и юзабилити. Тем не менее, причина этого не в самой теории, а в том, как ее интерпретируют разработчики браузеров.

Если вы посмотрите на саму теорию float то обнаружите, что она гораздо проще, чем то с чем приходится иметь дело на практике. Большинство проблем связано со старыми версиями Internet Explorer, но, зная ошибки можно более точно контролировать представление информации.

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

Добавлено: 16 Апреля 2018 07:38:09 Добавил: Андрей Ковальчук

10 правил юзабилити главных страниц, которые нарушаются чаще всего

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

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

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

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

1. Ясно выразите, что предлагает ценного для посетителей ваш веб-сайт и каким образом он отличается от своих конкурентов

Процент сайтов, соблюдающих правило: 27%
Номер правила в книге Homepage Usability: 3


Это самый важный момент, о котором необходимо помнить при дизайне главной страницы, поэтому очень грустно видеть, что это правило соблюдает так мало сайтов. Просто невероятно, насколько плохо веб-сайты дают понять пользователям, что же они собственно предлагают. Четкая мысль теряется за лесом маркетинговых слов, которое не способно произвести впечатление на потенциального клиента.

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

2. Используйте "резиновую" вёрстку страницы, что позволяет пользователям менять размер страницы

Процент сайтов, соблюдающих правило: 28%
Номер правила в книге Homepage Usability: 67


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

3. Используйте различные цвета для обозначения посещенных и непосещенных ссылок

Процент сайтов, соблюдающих правило: 33%
Номер правила в книге Homepage Usability: 37


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

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

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

Процент сайтов, соблюдающих правило: 35%
Номер правила в книге Homepage Usability: 56


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

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

5. Не забывайте про краткий слоган, который вкратце объясняет, чем занимается сайт или компания

Процент сайтов, соблюдающих правило: 36%
Номер правила в книге Homepage Usability: 2


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

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

Я предлагаю компромисс: поместите свой бесполезный рекламный слоган вверху страницу в графический баннер, рядом с логотипом. Его там все равно никто не заметит. А в центральную часть страницы поместите хороший слоган в виде простого текста, где его смогут увидеть все посетители вашего сайта.

6. Упростите доступ к старым материалам, которые недавно были у вас на главной странице

Процент сайтов, соблюдающих правило: 37%
Номер правила в книге Homepage Usability: 33


В случае с Alertbox 80% статей читаются уже тогда, когда ссылки на них перешли с главной страницы в архив. Вообще пользователи хорошо помнят, что они увидели что-то интересное на главной странице. Однако, если вы не поместите на главной странице ссылку на старые статьи или рекламные предложения, пользователи, придя снова на сайт, никогда не смогут найти то, что их заинтересовало в прошлое посещение.

7. Поместите краткое описание сайта в заголовок окна

Процент сайтов, соблюдающих правило: 39%Номер правила в книге Homepage Usability: 75


Этот совет в целом важен для видимости сайта на поисковых серверах в результатах поиска, но почему бы вам не воспользоваться столь простым и дешевым приемом интернет-маркетинга?

8. Не используйте заголовок в блоке поиска; кнопки "Искать" достаточно

Процент сайтов, соблюдающих правило: 40%
Номер правила в книге Homepage Usability: 49


Не такая уж и большая ошибка, но все равно не стоит помещать в блок поиска заголовок "Поиск", если там и так уже есть кнопка "Искать". В интерактивном дизайне действует правило "чем меньше, тем больше". Дополнительные элементы отвлекают пользователя и затрудняют восприятие интерфейса. Другими словами, чем меньшеэлементов в интерфейс, тем больше людей смогут в нем быстро разобраться.

9. Изменение котировок акций указывайте в процентах, а не только в пунктах

Процент сайтов, соблюдающих правило: 40%
Номер правила в книге Homepage Usability: 110


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

Увеличение котировки на 0.75 доллара означает различные вещи, например, если цена акции равна 8 долларам (9%-ный взлет), или 60 долларам (скромный прирост в 1%).

10. Не помещайте ссылку на главную страницу на самой главной странице

Процент сайтов, соблюдающих правило: 41%
Номер правила в книге Homepage Usability: 43


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

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

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

Добавлено: 11 Апреля 2018 19:01:27 Добавил: Андрей Ковальчук

Диалог открытия файлов и юзабилити Windows

При всех удобствах Windows некоторые моменты меня очень сильно раздражают. Особенно поведение системы при вызове диалогов открытия файлов. Сперва немного предыстории. При работе с файлами через функцию GetOpenFileName или GetSaveFileName в структуре OPENFILENAME есть возможность указать путь, который должен открыться по умолчанию. Если это значение не задано, то система сама где-то запоминает папку, в которой последний раз был удачно открыт файл (то есть окно выбора файла было закрыто через кнопку "Ok"). Где именно хранится эта информация - я пока не выяснил, да и не особо надо. Второй вариант. Предположим, что некоторая программа самостоятельно запоминает путь к папке, в которой последний раз ею выполнялись какие-то действия с файлами. Это может быть, например, текстовый редактор, просмотрщик графики и т.п., не суть. Главное, что задумка очень хорошая и правильная. При следующем запуске или вызове диалога выбора файла в соответствующее поле OPENFILENAME будет подставлен сохраненный путь и пользователь продолжит работу с того места, где он в прошлый раз остановился. Что-то типа такого:

        ...
        invoke  GetModuleHandle,0
        mov     [ofn.hInstance],eax
        mov     [ofn.lStructSize], sizeof.OPENFILENAME
        mov     [ofn.hwndOwner],0
        mov     [ofn.nMaxFile],MAX_PATH
        mov     [ofn.lpstrFile],buff
        ; Открывать с последней сохраненной папки
        mov     [ofn.lpstrInitialDir],saved_dir
        mov     [ofn.Flags],OFN_EXPLORER+OFN_FILEMUSTEXIST
        invoke  GetOpenFileName,ofn
        ...

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

После очередной серии чудесатых чудес я решил сделать для себя небольшую вспомогательную функцию. Она проверяет сохраненный путь и возвращает последнюю папку максимального уровня вложенности, которая существует на диске в текущий момент. Например, если ваша программа в последнем сеансе работы сохранила, а затем пытается открыть путь
D:\PICTURES\Путешествия\2011\Разобрать\Китай\NIKOND90\001

но при этом папки "\Китай" и, соответственно, вложенных в нее папок уже не существует, то должна открываться папка
D:\PICTURES\Путешествия\2011\Разобрать

и никак иначе! По-моему, это единственно правильное поведение системы. Почему разработчики Windows до сих пор открывают непонятно что вместо ПОСЛЕДНЕЙ ДОСТУПНОЙ папки из запрошенного пути - непонятно. Какая-то дефолтная папка может открываться только в одном единственном случае - когда ВЕСЬ запрошенный путь, включая букву диска, недоступен.
;------------------------------------------------------------
; Функция проверки доступности пути в файловой системе
; (C) ManHunter / PCL
; http://www.manhunter.ru
;------------------------------------------------------------
; Параметры:
; lpRaw - указатель на буфер размером MAX_PATH, в который
; записан проверяемый путь
; lpGood - указатель на буфер размером MAX_PATH, в который
; будет записан максимально доступный путь
;
; На выходе:
; EAX=0 - ни один из составляющих пути, включая носитель, не
; доступен
; EAX=1 - по крайней мере один из составляющих пути доступен,
; результат без финального слеша записан в буфер lpGood
;------------------------------------------------------------
proc    GetLastValidFolder lpRaw:DWORD, lpGood:DWORD
        locals
                result  dd ?
                old_dir rb MAX_PATH
                new_dir rb MAX_PATH
        endl
 
        pusha
 
        ; Сохранить текущую директорию
        lea     eax,[old_dir]
        invoke  GetCurrentDirectory,MAX_PATH,eax
 
        ; Скопировать поверяемый путь
        lea     esi,[new_dir]
        invoke  lstrcpy,esi,[lpRaw]
        mov     edi,esi
        invoke  lstrlen,esi
        or      eax,eax
        jz      .loc_bad
        dec     eax
        add     edi,eax
 
        ; Исправить слеши
.loc_fix_slash:
        cmp     byte [esi+eax],'/'
        jne     @f
        mov     byte [esi+eax],'\'
@@:
        dec     eax
        or      eax,eax
        jnz     .loc_fix_slash
 
.loc_chk:
        ; Попробовать установить текущую директорию
        invoke  SetCurrentDirectory,esi
        or      eax,eax
        jne     .loc_ok
.loc_scan:
        mov     byte [edi],0
        dec     edi
 
        ; Сканируем с конца до ближайшего слеша
        cmp     byte [edi],'\'
        je      .loc_chk
 
        ; Добрались до начала строки?
        cmp     edi,esi
        jne     .loc_scan
.loc_bad:
        ; Результат - ошибка
        mov     [result],0
        ; Обнулить строку
        mov     eax,[lpGood]
        mov     byte [eax],0
        jmp     .loc_ret
.loc_ok:
        ; Убрать финальный слеш
        cmp     byte [edi],'\'
        jne     @f
        mov     byte [edi],0
@@:
        ; Скопировать последний правильный путь
        invoke  lstrcpy,[lpGood],esi
        ; Результат - успешно
        mov     [result],1
.loc_ret:
        ; Вернуть на место текущую директорию
        lea     eax,[old_dir]
        invoke  SetCurrentDirectory,eax
 
        popa
        ; Записать результат в EAX
        mov     eax,[result]
        ret
endp

На входе передаются два указателя: lpRaw - указатель на исходную строку пути, lpGood - указатель на буфер-приемник, куда будет записан последний максимально доступный путь. Исходный путь может содержать не только папки, но и имя файла, в этом случае функция вернет только папки. Также функция исправляет слеши, приводя их к принятому в Windows виду "\". Результат выполнения возвращается в регистре EAX, если он равен 0, то не доступен ни один элемент проверяемого пути, включая диск. Если EAX=1, то доступный путь найден. Функция самодостаточная и не требует наличия каких-либо дополнительных переменных для своей работы.

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

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

Добавлено: 10 Апреля 2018 20:05:34 Добавил: Андрей Ковальчук

Резкое падение посещаемости сайта - возможные причины

Проблема: резкое падение посещаемости сайта без видимых причин.

Возможные внешние причины:

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

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

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

Возможные внутренние причины:

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

Изменения на сайте. Особенно изменения на главной, и особенно измениения тегов title, description и h1. Проверено на личном опыте: изменение заголовков главной страницы сайта на долгие месяцы понизили сайт вцелом по выдаче Google. Умеренный редизайн и перерисовка "кнопочек" не навредит.

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

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

Чтоб выяснить что является причиной резкого падения посещаемости проанализируйте, какие события предшествовали этому пару недель, возможно месяцов назад. Проконтролируйте не уменьшылось ли общее количество проиндексированных страниц на сайте. Обновите sitemap сайта, постарайтесь получить пару ссылок с действительно трастовых сайтов с высоким PR.

Добавлено: 10 Апреля 2018 08:16:28 Добавил: Андрей Ковальчук

Хостинг по-крупному

Один из важнейших недостатков размещения сайта непосредственно в сети компании заключается в необходимости высокоскоростного соединения с Интернетом.

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

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

Сколько стоит надежный сервер?

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

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

Как работает надежный хостинг?

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

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

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

Особенности кластерного хостинга

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

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

Добавлено: 10 Апреля 2018 08:10:57 Добавил: Андрей Ковальчук