Xenu’s Link Sleuth

Древний инструмент для проверки ссылок на сайте. Различает ссылки и почтовые адреса, оценки наличия страниц идут по HTTP кодам (то есть если запрашиваемой страницы нет, но сервер не возвращает ошибку 404, то Xenu посчитает, что страница есть. Поддерживаются ссылки в JavaScript, подробнее об этом написал Франк Виссер – “Checking Links with Xenu: Handling javascript links“. Полный список возможностей и ограничений доступен на официальной странице и информации там предостаточно. Последнее обновление в Декабре 2008.

WWW Consortium предоставляет целый ряд сервисов для проверки соответствия страниц стандартам (Полный список тут: W3C QA Toolbox ):
- W3C Markup Validation – проверка html (в том числе и пятой версии), xhtml, svg (формат график в XML), smil (язык представления, отображения и синхронизации медиа объектов. Объекты описываются в виде XML), mathml (язык для представления и вычисления математических формул в веб).

- W3C CSS Validation – проверка CSS. Валидатор может работать с CSS внутри HTML. Можно сделать проверку на соответствие определенному стандарту. Кроме стандратных уровней CSS можно проверить на соответствие Mobile CSS (базирующийся на CSS 2.1), TV/ATSC (CSS с учётом правил отображения и ограничений телевизионных устройств), а также правилам стилей в SVG.

- W3C mobileOK Checker – Проверка, насколько хорошо раметка страницы адаптирована для отображения на мобильных устройствах. Проверяется валидность (XHTML), размеры элементов и объемы данных, использование CSS и скриптов.

Для тестирования страниц в браузере существуют разнообразные плагины для Firefox и Safari.

Антонио Люпетти (Antonio Lupetti) в своём блоге опубликовал книгу – причёсанный сборник собственных записей по CSS, JS, веб разработке и приёмах для веб. Первая версия книги доступна для скачивания бесплатно.

Хорошо, друзья … Наконец то предварительная версия “Руководства Woork’a” готова. Эта книга – сборник статей, которые я записал в блог в прошлом году. За год “Woork” посетили более 4 миллионов зрителей, и я получил много запросов на распространение печатной версии статей из блога. В течение последних дней я работал над подготовкой первого варианта этого руководства, и вы можете взять его бесплатно.

---

Ok friends… finally a first preview of “The Woork Handbook” is ready to be released. This book is a miscellanea of articles I wrote on my blog in the past year. During the period form January to December 2008 “Woork” has been visited from over 4 millions visitors and I received a lot of requests to distribute a printable version of its contents. In the past days I worked hard to prepare a first version of this handbook and distribute it for free.
-Antonio

Эта книга будет полезна, для освоения многих современных техник и приемов веб программирования. В пояснениях к коду в книге Антонио доступно объясняет как будет представлены разные HTML блоки и как будут меняться их свойства в зависимости от CSS. Что на мой взгляд куда правильнее, чем голая теория по HTML.

Скачать книгу можно тут: The Woork Handbook

Плагин YSlow

Полноценной оценки производительности сделать не получится, но у этого плагина есть интересная особенность – отчет по производительности содержит 13 разделов по разным проблемам и рекомендаций по улучшению из Yahoo! Developer Network. Exceptional Performance.

Плагин YSlow. Закладка Cache

Из интереса прошелся по разделу Web Development на сайте Mozilla и нашел около пятидесяти плагинов, которые могут помочь при тестировании страниц.

В первую очередь меня заинтересовали простые плагины – реализующие одну единственную функцию, но как можно удобнее. Bug.gd Error Search – поиск ошибки в базе данных Bug.gd, достаточно выделить текст ошибки и кликнуть на секции Bug.gd. Для того чтобы посмотреть как выглядит текущая страница в разных браузерах подойдет плагин Launchy.

Плагин Launchy

Получить информацию по серверу можно с помощью Server Spy с ShowIP. Первый показывает версию вебсервера, второй IP.

Плагины Show IP и Server Spy

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

Для анализа HTTP понравились плагины Live HTTP Header и HttpFox. HTTPFox по интерфейсу напоминает IE Watch, и, на мой взгляд, более удобен. Второй позволяет проанализировать последовательность запросов сделанных в разных закладках одновременно.

Плагины Live HTTP Headers и HTTP Fox

1. Наполнение контентом готового дизайна. Для этого не обязательно делать верстку страницы, достаточно графического прототипа. Для наполнения контентом, в том числе определения заголовков элементов навигации, используется кусок текста из трактата Цицерона «О пределах добра и зла»:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Хотя, как пишет Артемий Лебедев, этот текст очень сильно отличается от оригинала текста, и стоит быть осторожным при использовании онлайн генераторов “Lorem Ipsum”, поскольку неизвестно кем и почему изменялся этот текст и что действительно означают эти изменения и почему dolorem ipsum стал lorem ipsum.

2. Тестирование. Подготовленный дизайн проект, вариантов должно быть не менее двух, раздается группе людей, которые будут проводить юзабилити тестирование. При этом порядок следования прототипов рекомендуется изменять, чтобы исключить психологические аспекты. Количество людей должно быть не менее шести, по рекомендации Нильсена, но, на мой взгляд, стоит взять, по меньшей мере, дюжину. Будет очень хорошо, если тестовая группа будет содержать людей разного возраста и пола. Каждый человек, из тестирующей группы, работая с прототипом должен распознать заложенные дизайнером элементы на странице. После этого он выставляет оценку каждому прототипу. Шкала оценок может быть как от 0 до 5, так и от -3 до 3 и так далее – все зависит от фантазии и интерпретации данных. Соответственно эта оценка объективной, скорее всего, не будет, но она поможет определить общее настроение пользователей.

3. Анализ результатов. В первую очередь, нужно оценить какие элементы были определены верно, а какие нет и составить сводную таблицу, включив еще и оценки пользователей:

На основе полученных результатов можно получить действительно интересные вещи.

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

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