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

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

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

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

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

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

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

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

Добавлено: 24 Августа 2013 01:57:17 Добавил: Андрей Ковальчук

Как пользоваться модулем mod_rewrite

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

Скорее всего все вы, заходя на какой-нибудь сайт, видели ссылки типа - http://www.web-coder.ru/files/ или http://web-coder/states/state_553.html. Ну, с первым вариантом все просто скажете вы: в каталоге лежит файлик index.php и он загружается по умолчанию, вот поэтому адрес и имеет такой вид. Допутим, но что делать со вторым? Ведь врятли на крупном портале каждая статья будет редактироваться и вставляться в файл *.html рукаим? А как же скрипты на странице? Неужели настраивали весь сервер? Но это непрактично ?!

На самом деле страничка имеет вид такой - http://web-coder/module.php?area=state&numer=553. Вот этим и занимается модуль mod_rewriter. Он заменяет ссылки одного типа на другие. Его использование имеет много плюсов. Во-первых, повышается защита, т.к. хакер не знает о структуре вашего сайта и о запросах, которые посылает ваш скрипт. Во-вторых, получаются красивые и легко читаемые ссылки. В-третьих, некоторые поисковики легче индексируют такие ссылки. Сокращенно это называют ЧПУ (человеко-понятный URL). Итак, начнем менять ссылки вашего сайта...

Для начала в корневой папке вашего сайта должен находиться файл .htaccess. Если он уже есть хорошо, а если нет, то создайте.

В начале пишите:

RewriteEngine On

эта строка включает модуль
RewriteBase /

это ссылка на папку вашего сайта

Дальнейшие строки будут зависеть от структуры вашего сайта. Смотрите на пример:
RewriteRule ^catalog/dir([0-9]*)/ /module.php?section=catalog&area=dir&id=$1

Вот эта строка - /module.php?section=catalog&area=dir&id=$1 - означает какой адрес нужно заменить. А вот эта - ^catalog/dir([0-9]*)/ - чем заменить. Заметьте в 1 строке в конце стоит переменная $1. Она означает любой набор символов, который должен находиться в этом месте и который будут заменять. Во 2 строке стоит запись - dir([0-9]*). Она означает, что будут заменяться все числа из 1 строки.

Понятно?? То есть, если в 1 строке заместо переменной будет стоять число, то 1 строка замениться 2 строкой с этим числом после слова dir. Если же в 1 строке будет слово, то ничего не заменится и не будет работать.

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

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

Если что-то непонятно, то заходите ко мне на сайт или пишите мне на email.

Добавлено: 24 Августа 2013 01:00:48 Добавил: Андрей Ковальчук

Создаем эффект переворачивания страниц с помощью элемента canvas

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

Разметка

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

 	<div id="book">
 	    <canvas id="pageflip-canvas"></canvas>
 	    <div id="pages">
 	       <section>
 	          <div> <!-- Любое содержание размещается здесь --> </div>
	       </section>
 	       ...
 	    </div>
 	</div>

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

Элемент div имеет фиксированную ширину, а элемент section имеет установку скрывать все выходящее за его рамки. В результате элемент section действует как горизонтальная маска для элемента div.

Скрипт

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

Рассмотрим константы, которые используются повсеместно в коде.
	var BOOK_WIDTH = 830;   // Ширина книги
 	var BOOK_HEIGHT = 260;  // Высота книги
 	var PAGE_WIDTH = 400;   // Ширина страницы
	var PAGE_HEIGHT = 250;  // Высота страницы
 	var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2; //Отступ по вертикали
 	var CANVAS_PADDING = 60;    // Отступ вокруг книги

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

Константы кода

Затем нам нужно определить объект flip для переворачивания каждой страницы. Он будет постоянно обновляться, когда мы будем взаимодействовать с книгой, чтобы выводить текущее состояние переворачивания.
 	var book = document.getElementById( "book" );
 	var pages = book.getElementsByTagName( "section" );
 	for( var i = 0, len = pages.length; i < len; i++ ) {
 	   pages[i].style.zIndex = len - i;
 	   flips.push({ progress: 1, target: 1, page: pages[i], dragging: false });
 	}

Сначала нам надо убедиться, что страницы расположены в правильном порядке. Для этого организуются свойства z-index элементов section так, чтобы первая страница располагалась вверху, а последняя внизу. Очень важные свойства объекта flip - значения progress (прогресс переворачивания) и target (цель переворачивания). Они используются для определения, насколько должна перевернуться страница: -1 означает переворот влево до конца, 0 - по центру книги, а +1 - вправо до конца.

Отображение состояния переворачивания страницы

Теперь нужно запустить процесс захвата и использования ввода пользователя для обновления переворота страницы.
 	function mouseMoveHandler( event ) {
 	   // Пересчет положения курсора мыши в системе координат относительно книги
 	   mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 );
 	   mouse.y = event.clientY - book.offsetTop;
 	}
 	function mouseDownHandler( event ) {
 	   if (Math.abs(mouse.x) < PAGE_WIDTH) {
 	      if (mouse.x < 0 && page - 1 >= 0) {
 	         flips[page - 1].dragging = true;
 	      } else if (mouse.x > 0 && page + 1 < flips.length) {
 	         flips[page].dragging = true;
 	      }
 	   }
 	   // Предотвращаем выделение текста при перетаскивании курсора мыши
 	   event.preventDefault();
 	}
 	function mouseUpHandler( event ) {
 	   for( var i = 0; i < flips.length; i++ ) {
 	      if( flips[i].dragging ) {
 	         flips[i].target = mouse.x < 0 ? -1 : 1;
 	         if( flips[i].target === 1 ) {
 	            page = page - 1 >= 0 ? page - 1 : page;
	         } else {
 	            page = page + 1 < flips.length ? page + 1 : page;
 	         }
 	      }
 	      flips[i].dragging = false;
 	   }
 	}

Функция mouseMoveHandler обновляет объект mouse так, что он всегда содержит текущее положение курсора мыши.

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

Функция mouseUpHandler стартует, когда кнопка мыши отпускается. Мы проверяем все объекты flip на установку флага разрешения перетаскивания. Если флаг у объекта установлен, то мы изменяем цель для переворачивания в зависимости от положения курсора мыши. Также изменяется номер страницы, чтобы соответствовать изменениям в навигации.

Следующий блок кода относится к функции рисования, которая вызывается 60 раз в секунду для обновления и вывода текущего состояния всех объектов flip.
 	if( flip.dragging ) {
 	   flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
 	}
 	flip.progress += ( flip.target - flip.progress ) * 0.2;

Если объект flip перетаскивается в текущий момент, мы обновляем его цель в соответствии с положением курсора мыши по шкале от -1 до 1. Также увеличиваем состояние прогресса на часть расстояния до цели. В результате получится плавное анимированное переворачивание страницы.
 	if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {
 	   drawFlip( flip );
 	}

Так как мы проверяем все объекты flip в каждом кадре, нужно обеспечить процесс вывода только для одного активного объекта.

Если объект flip имеет положение прогресса не слишком близкое к краю книги или у него установлен флаг перетаскивания, то мы выводим его.

Вот и вся логика выполнения переворота страницы. Теперь рассмотрим графическое представление объекта flip в зависимости от текущего состояния. Разберем первую часть функции drawFlip(flip).
 	// Изгиб страницы самый сильный в середине книги
 	var strength = 1 - Math.abs( flip.progress );
 	// Ширина согнутой страницы
 	var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );
 	// Положение X согнутой страницы
 	var foldX = PAGE_WIDTH * flip.progress + foldWidth;
 	// Как далеко выступает страница за рамки книги из-за перспективы
 	var verticalOutdent = 20 * strength;
 	// Максимальная ширина теней слева и справа
 	var paperShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( 1 - flip.progress, 0.5 ), 0 );
 	// Маска для страницы, которая устанавливается в соответствии с foldX
 	flip.page.style.width = Math.max(foldX, 0) + "px";

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

Теперь надо нарисовать графику переворота.
 	context.save();
 	context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );
 	var foldGradient = context.createLinearGradient(foldX - paperShadowWidth, 0, foldX, 0);
 	foldGradient.addColorStop(0.35, '#fafafa');
 	foldGradient.addColorStop(0.73, '#eeeeee');
 	foldGradient.addColorStop(0.9, '#fafafa');
 	foldGradient.addColorStop(1.0, '#e2e2e2');
 	context.fillStyle = foldGradient;
 	context.strokeStyle = 'rgba(0,0,0,0.06)';
 	context.lineWidth = 0.5;
 	context.beginPath();
 	context.moveTo(foldX, 0);
 	context.lineTo(foldX, PAGE_HEIGHT);
 	context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2), foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);
 	context.lineTo(foldX - foldWidth, -verticalOutdent);
 	context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);
 	context.fill();
 	context.stroke();
 	context.restore();

Метод translate(x,y) используется для смещения центра координат так, что мы можем выводить переворот страницы относительно верха центра книги. Обратите внимание, что мы должны сохранить текущую матрицу трансформации с помощью метода save(), а по завершению всех операций использовать метод restore().

Центр координат

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

Вид переворачиваемой страницы

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

Элемент canvas открывает новую эпоху в оформлении интерфейсов веб проектов. В качестве примера можно привести проект www.20thingsilearned.com

Новый проект

Добавлено: 20 Августа 2013 02:29:59 Добавил: Андрей Ковальчук

Заголовок страницы

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

Ну что же, хотите рассказов о юзабилити? Их есть у меня!

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

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

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

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

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

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

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

Кстати, именно из-за этого нужно стараться, чтобы на сайте не было двух страниц с одинаковым заголовком. А то, например, я недавно читал статью на сайте Hi-Fi.RU, разбитую на 10 отдельных страниц, попутно сохраняя их на диск. В заголовках всех страниц было указано только название статьи, и мне пришлось в браузере в окне «Сохранить как» вручную дописывать к имени файла слова «Часть 1», «Часть 2», «Часть 3» и т.п. О какой такой юзабилити тут вообще можно говорить?

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

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

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

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

Зачем это нужно? Представьте себе довольно распространенную ситуацию: во время работы в интернете человек открыл несколько окон браузера с разными веб-страницами одного и того же сайта. Ну, не одного, а пары (для сравнения) — например, «Рамблера» и моих «Субъективных заметок». Тогда панель задач Windows его компьютера примет вот такой вид:

Единственный способ узнать, какое из окон «Рамблера» содержит нужную страницу (например, рейтинг Top100 в категории «Дизайн») — это последовательно ткнуть в каждую из кнопок с надписью «Rambler» (по закону Мерфи нужная страница окажется как раз за последней нажатой кнопкой).

А вот если бы заголовки страниц на «Рамблере» начинались с названия текущей страницы, то слово «Дизайн» было бы видно на одной из кнопок, и пользователь не тратил бы время на поиск нужного окна браузера. Что наглядно демонстрируют две кнопки справа, представляющие материалы «Субъективных заметок»: узнать, за какой из них скрываются статьи «Делаем скриншот» и «Грамотный дизайн», не сложно.

Если вы думаете, что такой способ организации многодокументного интерфейса является чем-то новым и непривычным для пользователя, то это не так. Например, заголовки окон русского народного текстового процессора Microsoft Word версии 9.0 (да и вообще всех программ из пакета Office 2000), организованы точно так же: сначала указывается название документа, а только после него — название программы.

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

Идеалы юзабилити — в жизнь!

Добавлено: 17 Августа 2013 02:44:02 Добавил: Андрей Ковальчук

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

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

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

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

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

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

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

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

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

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

Добавлено: 17 Августа 2013 02:43:03 Добавил: Андрей Ковальчук

Инструкция по установке ImageMagick на Windows

ImageMagick — свободный и многоплатформенный пакет программ для неинтерактивной (пакетной) обработки графических файлов. Поддерживает множество графических форматов, выпущен под лицензией GPL. Может использоваться с языками Perl, C, C++, Python, Ruby, PHP, Pascal, Java, в скриптах командной оболочки или самостоятельно. Одним словом это консольный photoshop.

Инструкция по установке на MS Windows

Скачайте ImageMagick.

перейдите по адресу http://imagemagick.org/script/binary-releases.php#windows что бы скачать последнюю версию ImageMagick-6.5.4-2-Q16-windows-dll.exe. В случае если эта версия не подошла к вашей системе, вы можете скачать более ранние тут.

Запустите файл установки программы.

Внимание! Измените папку установки программы на C:\imagemagick\

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

Откройте командную строку ( Пуск->Выполнить введите cmd и нажмите enter ). В появившемся окне введите convert. На экран должно выдать помощь по параметрам конвертирования. Если это так то переходите к следующему шагу.

Иначе нужно сделать вот что: выполните команду Свойства Моего компьютера -> Вкладка Дополнительно -> Переменные среды -> В блоке “системные переменные” найдите переменную с именем Path и добавьте туда еще одно значениеC:\imagemagick. Внимание! Значения разделяются точкой с запятой.

скачайте библиотеку для php_imagick.dll

переместите загруженный файл в папку расширений php

если вы используете стандартный Denwer то это C:\WebServers\usr\local\php5\ext , еслиPHP лежит в другом месте то в подпапку …\phpdir\ext папки с PHP.

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

Directory in which the loadable extensions (modules) reside.
extension_dir = "Something something"

)

редактируем файл php.ini

если в нем нет строки

extension=php_imagick.dll

то добавляем

запускаем WEB сервер и проверяем с помощью phpinfo(). Если ошибок нет и расширение установлено то переходим к следующему шагу.
проверяем в действии. Создаем .php файл с таким кодом:

<?
    $im = new imagick( 'a.jpg' );
    // изменяем размер сохраняя пропорции
    $im->thumbnailImage( 200, 0);
    // сохраняем изменения
    $im->writeImage( 'a_thumbnail.jpg' );
    ?>

Добавлено: 17 Августа 2013 02:38:02 Добавил: Андрей Ковальчук

.htaccess - защити себя и свой сайт!

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

ErrorDocument 403 "<BODY><H1>Forbidden</H1>
ErrorDocument 404 /errors/404.html
Внимание: при указании непосредственно HTML кода в данной директиве кавычки ставятся только в начале строки (см. пример)!
Пути к файлам указываются относительно корневого каталога данного веб-хоста, а не относительно файловой системы (правильно: /errors/404.html; неправильно: /var/www/myhost/html/errors/404.html).Парольная защитаЕсли Вам нужно защитить часть содержимого Вашего сайта от посторонних, можно воспользоваться директивами семейства Auth. Они заставляют сервер спрашивать у клиента имя пользователя и пароль для доступа к содержимому каталога, в котором размещен .htaccess, а также к его подкаталогам.Для этого необходимо создать файл с паролями (обычно называется .htpasswd) и разместить его в безопасном месте (например, на уровень выше каталога, который является корневым для Вашего хоста; к примеру, если сайт размещен в /home/user/html, то .htpasswd лучше положить в /home/user). Для создания .htpasswd используйте утилиту htpasswd из комплекта Apache.Для установки защиты на некий каталог необходимо разместить в нем файл .htaccess следующего вида:
AuthUserFile /home/user/.htpasswd
AuthName “Secure Zone”
AuthType Basic
Require valid-user
AuthUserFile указывает путь к файлу с паролями. AuthName определяет так называемый 'realm' («мир»); обычно указывается, к чему осуществляется доступ (например, 'Site Management Tools', 'Billing Information' и т.п.)
AuthType определяет тип авторизации; практически всегда используется Basic (кроме него доступен тип Digest, но его мы рассматривать не будем).Наконец, Require определяет набор условий, по которым определяется, кто из перечисленных в .htpasswd пользователей имеет доступ к данному каталогу сайта. 'valid-user' подразумевает, что доступ может получить любой пользователь после ввода пароля; вместо valid-user можно через пробел перечислить имена пользователей, которым предоставляется доступ.Включение поддержки SSIЕсли ssi по умолчанию не включен (или вы хотите добавить другой тип файлов, для того, чтобы там обрабатывались директивы ssi) и настройки вебсервера позволяют использовать следующие директивы, то пропишите в .htaccess эти строчки:
AddType text/html .shtml .htm .html
AddHandler server-parsed .shtml
Options +Includes

Блокировка по IP адресамСредствами файла .htaccess можно ограничить доступ к ресурсам сайта по IP адресам; например, разрешить доступ к медиа-архиву только пользователям из локальной сети, или запретить какому-либо хосту или сети доступ к какому-либо контенту.Синтаксис для этих директив таков:
Order Deny,Allow (или Allow,Deny – в зависимости от того, что требуется)
Deny from all (или адрес хоста)
Allow from all (или адрес хоста)
Например,
Order Deny,Allow
Deny from all
Allow from 192.168.0.
Allow from .localnet
Allow from admin.somewhere.in.the.net

вызывает отказ в доступе для всех, кроме сети 192.168.0.0/24, всех хостов, DNS имя которых содержит .localnet, а также хоста, DNS имя которого admin.somewhere.in.the.net.Если нужно запретить доступ группе хостов, используется Allow,Deny:
Order Allow,Deny
Allow from all
Deny from 192.168.1.
Deny from hackers.are.everywhere.in.the.net
Принцип прост. По Order определяется порядок обработки правил allow/deny; если мы возьмем второй пример, то сначала сервер обработает правило allow from all, а затем хосты, которые прошли это правило, подвергаются проверке правилом deny; при этом все хосты из сети 192.168.1.0/24 и хост hackers.are.everywhere.in.the.net не проходят эту проверку и не получают доступа.Более сложные применения:
<FilesMatch ".(txt|dat)$">
Order Deny,Allow
Deny from all
</Files>

– данное правило запретит любым хостам доступ к файлам с расширениями .txt и .dat (например, в них могут храниться внутренние данные скриптов).Блокировка по реферреруПосредством использования модуля mod_rewrite и файла .htaccess можно добиться запрета доступа к Вашим ресурсам, если клиент пришел с какого-то определенного сайта (блокировка по referer'у).Для этого требуются следующие директивы .htaccess:RewriteEngine on
# Options +FollowSymlinks # – раскомментировать, если при установке этого .htaccess появляется ошибка 500, Internal Server Error
RewriteCond %{HTTP_REFERER} badsite.com [NC]
RewriteRule .* – [F]
Или, если нужно перечислить больше одного сайта,
RewriteEngine on
# Options +FollowSymlinks # – раскомментировать, если при установке этого .htaccess появляется ошибка 500, Internal Server Error
RewriteCond %{HTTP_REFERER} badsite.com [NC,OR]
RewriteCond %{HTTP_REFERER} anotherbadsite.com
RewriteRule .* – [F]
Если нужно запретить доступ напрямую со всех хостов, кроме определенных, набор правил будет выглядеть примерно так:
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(www.)?mydomain.ru(/)?
RewriteCond %{HTTP_REFERER} !^http://(.*).mydomain.ru(/)?
RewriteRule .*.(gif|jpg|jpeg|png)$ – [F]
Изменение индекс-страницы
Задать/Изменить индексный файл и последовательность их обработки можно директивой DirectoryIndex
Например:
DirectoryIndex photo.php photo.php5 index.php
ПеренаправленияДля организации редиректа средствами .htaccess достаточно строки вида:
Redirect /old_directory/old_file.html http://your_new_site.com/new_directory/new_file.html
если нужно редиректить все содержимое подкаталога:
Redirect /old_directory http://your_new_site.com/new_directory/
редирект для всего сайта:
RewriteEngine On
RewriteRule (.*) http://your_new_site.ru
Запрет обращений к .htaccessЗащитить их можно следующим образом, однако, это по умолчанию уже есть в httpd(2).conf, то есть в самой конфигурациии веб-сервера.
<Files ~ "^.ht">
Order allow,deny
Deny from all

</Files>
Добавление MIME-типовДля добавления MIME-типов используется директива
AddType mime/type extension

Например,
AddType application/x-bittorrent torrent
Используется она в тех случаях, когда конфигурация по умолчанию заставляет сервер передавать документы не так, как требуется; например, многие серверы по умолчанию подразумевают тип text/plain, и бинарный файл (например, rar-архив), скачанный с такого сервера, вполне может оказаться «битым».Запрет прямых ссылок на ресурсыЕсли Вы хотите избежать так называемого «хотлинкинга» – прямых ссылок на Ваши ресурсы с других сайтов – Вам опять-таки поможет .htaccess в комбинации с mod_rewrite.
Для начала рассмотрим, чем плох хотлинкинг. Например, некий сайт размещает у себя изображение, находящееся на Вашем сайте, просто указав его в тэге . При этом все обращения к такой странице вызовут скачивание данного изображения с Вашего сайта; таким образом, будет расходоваться Ваш траффик и пропускная способность канала сервера, а посетители чужого веб-сайта увидят изображение, хранящееся у Вас, без соответствующего контекста.Как же бороться с подобной практикой?
Рассмотрим следующий пример части файла .htaccess:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?mydomain.com/.*$ [NC]
RewriteRule .(js|css)$ - [F]
Данный код запрещает обращения к .js и .css файлам (скрипты javascript и описания Cascading Style Sheets), если они производятся не с Вашего сайта.Другой пример:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?mydomain.com/.*$ [NC]
RewriteRule .(png|gif|jpg|jpeg)$ http://www.mydomain.com/youaretheworst.gif [R,L]
При обращении извне к изображениям, хранящимся на вашем сайте, вместо самих изображений будет отображаться содержимое файла youaretheworst.gif.Запрет вывода списка файловApache (при включении соответствующих опций) умеет отображать список файлов в каталоге, если в нем нет ни одного из перечисленных в DirectoryIndex файлов. Часто эта опция включена по умолчанию, что может быть неприемлемо.
Строчка
Options -Indexes

отключит этот режим.Однако иногда может, наоборот, понадобиться разрешить просматривать список файлов, при этом исключив из него их часть. Для этого служит IndexIgnore.
Например,
IndexIgnore *.php* *.pl *.html *.shtml

разрешает вывод списка всех файлов, кроме PHP и Perl скриптов, а также HTML документов.

Добавлено: 14 Августа 2013 01:07:10 Добавил: Андрей Ковальчук