Компьютерные навыки на всю жизнь

Life-Long Computer Skills (February 26, 2007)
автор: 2007.02.26 Якоб Нильсен
перевод: 2007.07.29 Александр Качанов

Лицо Нильсена и ссылка на информацию о немВкратце: В школе надо обучать глубоким стратегическим компьютерным навыкам. Тому, чем нельзя овладеть, читая руководства пользователя.

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

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

Проблема, естественно, состоит в том, что образование слишком тесно привязано к специфическим программным продуктам. Даже если Microsoft и не переделывал бы Excel в этом году, он бы сделали бы это рано или поздно. И выход вовсе не в том, что все учебники надо обновить новой информацией о Microsoft Office 2007. В пользовательских интерфейс этих программ непременно будут внесены новые изменения еще до того, как нынешние третьеклассники станут искать работу через 10-15 лет – и даже до того, как они уйдут на пенсию в 2065 году.

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

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

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

Нынешний рынок поисковых серверов через 20 лет возможно исчезнет, и уж точно изменятся за это время дизайны страниц поисковых серерверов, доминирующих сейчас на рынке. Так что незачем учить детей, как выжать из Google максимум.

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

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

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

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

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

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

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

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

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

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

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

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

В книге The New Division of Labor: How Computers Are Creating the Next Job Market Фрэнк Левай и Ричард Мюрнейн (Frank Levy и Richard J. Murnane) приводят три навыка, которые, по их мнению, в будущем будут важны и которые никогда нельзя будет автоматизировать или перевести в оффшор в Индию или Китай. Это умение решать задачи, понимание связей между разрозненными понятиями, умение общаться.

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

Якоб Нильсен

Проверочный список для веб-стандартов

A web standards checklist
автор: 2004.08.13 Russ Weakley
перевод: 2004.10.31 Александр Качанов
Веб-стандарты - это большее, чем просто "бестабличная верстка"

Для разных людей термин "веб-стандарты" означает разные вещи. Для некоторых это просто "страницы без таблиц", для других - "правильный код". Однако веб-стандарты это нечто намного большее. Сайт, простроенный по веб-стандартам, это сайт, который придерживается стандартов (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG и т.д.) и лучших отработанных решений (валидный код, доступный код, семантически правильный код, дружественные URL-ы)

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

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

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

Список

1. Качество кода
1. Указан ли у страниц правильный Doctype?
2. Указан ли у страниц charset?
3. Валиден ли (X)HTML код страниц сайта?
4. Валидны ли CSS-таблицы сайта?
5. Использует ли сайт какие-либо CSS-хаки?
6. Используются ли на сайте какие-либо лишние и ненужные классы (class) и идентификаторы (id)?
7. Хорошо ли структурирован код страниц?
8. Есть ли на сайте сломанные ссылки?
9. Как у сайта со скоростью загрузки страниц и с их размерами?
10. Выдает ли браузер какие-либо ошибки JavaScript при работе со страницей?
2. Степень разделения контента и представления
1. Используется ли на сайте CSS для всех аспектов оформления страницы (шрифты, цвета, отступы, границы и т.д.)?
2. Перенесена ли вся декоративная графика в CSS, или она все еще встречается в (X)HTML-коде?
3. Доступность для пользователей
1. Используется ли атрибут "alt" во всех значимых изображениях?
2. Используется ли на сайте для шрифта относительные единицы измерения вместо фиксированных?
3. Ломается ли каким-либо образом компоновка страницы при увеличении размера шрифта?
4. Есть ли на странице видимая ссылка "пропустить"?
5. Используются ли на сайте доступные формы?
6. Используются ли на сайте доступные таблицы?
7. Достаточно ли контрастны и ярки цвета на страницах сайта?
8. Используется ли только цвет для выделения критической информации?
9. Используется ли задержка в выпадающих меню (для пользователей с медленной моторикой)?
10. Все ли ссылки содержат описания (для слепых пользователей)?
4. Доступность для устройств
1. Достаточно ли хорошо сайт работает и в современных и в старых браузерах?
2. Можно ли работать с материалами сайта при отключенном CSS или в броузере, где нет поддержки CSS?
3. Можно ли работать с материалами сайта при отключенных изображениях или при отсутствии поддержки их вывода на экран?
4. Работает ли сайт в текстовых броузерах, таких как Lynx?
5. Хорошо ли выглядит сайт при распечатке?
6. Работает ли сайт на наладонных устройствах?
7. Снабжен ли сайт детальным набором метаданных?
8. Работает ли сайт в окнах различных размеров?
5. Основы юзабилити
1. Имеется ли на странице четкая визуальная иерархия элементов?
2. Легко ли отличить один уровень заголовков от другого?
3. Достаточно ли легко понять навигацию по сайту?
4. Используется ли однообразная навигация на всех страницах сайта?
5. Используется ли на сайте приемлемый и однообразный язык текстов?
6. Есть ли у сайта карта и страница с контактной информацией? Легко ли их найти?
7. Если ваш сайт очень большой, есть ли на нем инструмент поиска?
8. Присутствует ли на каждой странице сайта ссылка на его главную страницу?
9. Подчеркнуты ли ссылки?
10. Четко ли выделены цветом ссылки, которые пользователь уже посетил?
6. Управление сайтом
1. Есть ли у сайта понятная и полезная страница ошибки 404, которая работает с любого уровня сайта?
2. Используются ли на сайте дружественные URL-ы?
3. Можно ли к вашему сайте доступиться, набрав адрес без "www"?
4. Есть ли у сайта пиктограмма для закладок?

1. Качество кода
1.1 Указан ли у страниц правильный Doctype?

Doctype (сокращенно от 'document type declaration' - "декларация типа документа") сообщает валидатору, какая версия (X)HTML используется в вашей странице. Декларация должна присутствовать в начале каждой веб-страницы. Doctype - ключевой компонент страницы, претендующей на соответствие стандартам: ваша разметка и CSS не пройдут валидацию, если в вашем документе отсутствует Doctype.
статья на webmascon.com Почему так важен DOCTYPE

См. также:

* http://www.w3.org/QA/2002/04/valid-dtd-list.html
* http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
* http://gutfeldt.ch/matthias/articles/doctypeswitch.html

1.2 Указан ли у страниц кодировка (charset)?

Если пользовательский агент (например браузер) не может самостоятельно определить кодировку вашей веб-страницы, пользователи увидят на экране нечитаемый текст. Эта информация в особенности важна для тех, кто создает и поддерживает многоязычные веб-сайты. Но вообще объявление кодировки очень важно для тех, кто создает страницы в XHTML/HTML и CSS.
http://www.w3.org/International/tutorials/tutorial-char-enc/

См. также:

* http://www.w3.org/International/O-charset.html

1.3. Валиден ли (X)HTML код страниц сайта?

Валидный код браузер выведет быстрее, чем невалидный. Валидный код браузер выведет лучше, чем невалидный. Все больше и больше браузеры подчиняются стандартам, и потому все более важным является валидный и стандартный HTML-код.
http://www.maxdesign.com.au/presentation/sit2003/06.htm

См. также:

* http://validator.w3.org/

1.4. Валидны ли CSS-таблицы сайта?

Не забывайте убедиться, что ваш HTML-код и CSS-страницы не содержат ошибок, так как ошибки приведут к искаженному отображению документа на экране.
http://www.meyerweb.com/eric/articles/webrev/199904.html

См. также:

* http://jigsaw.w3.org/css-validator/

1.5. Использует ли сайт какие-либо CSS-хаки?

В сущности каждый сам решает, какие хаки ему использовать. Это зависит от того, насколько хорошо вы знакомы со всеми вариантами, и от того, какой дизайн вы хотите создать.
http://www.mail-archive.com/wsg@webstandardsgroup.org/msg05823.html

См. также:

* http://css-discuss.incutio.com/?page=CssHack
* http://css-discuss.incutio.com/?page=ToHackOrNotToHack
* http://centricle.com/ref/css/filters/

1.6. Используются ли на сайте какие-либо лишние и ненужные классы (class) и идентификаторы (id)?

Я заметил, что разработчики, осваивая новые приемы и технологии, часто создают замечательные CSS-таблицы, и при этом - плохой XHTML-код. В особенности часто в XHTML-коде встречаются ненужные и лишние "div" и "id". Из-за этого HTML-код теряет стройность, а CSS-файлы становятся запутанными.
http://www.clagnut.com/blog/228/
1.7. Хорошо ли структурирован код страниц?

Семантически правильная разметка подразумевает использование html-элементов по их прямому назначению. Хорошо структурированный HTML-документ хорошо воспринимается всем спектром пользовательских программ (браузерами без поддержки стилевых таблиц, текстовыми броузерами, наладонниками, поисковыми роботами и т.д.)
http://www.maxdesign.com.au/presentation/benefits/index04.htm

См. также:

* http://www.w3.org/2003/12/semantic-extractor.html

1.8. Есть ли на сайте "сломанные" ссылки?

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

См. также:

* http://validator.w3.org/checklink

1.9. Как у сайта со скоростью загрузки страниц и с их размерами?

Не заставляйте меня ждать... Вот какую мысль подразумевают пользователи при проведении всех исследований. Даже пользователи с широким каналом устают от медленной загрузки.
http://www.websiteoptimization.com/speed/
1.10. Выдает ли браузер какие-либо ошибки JavaScript при работе со страницей?

Internet Explorer для Windows позволяет включить отладчик, который будет выскакивать на экран всякий раз, когда на странице будет обнаружена ошибка в JavaScript. Эта опция находится в меню "Internet Options" на закладке "Advanced". Уберите галочку с пункта "Disable script debugging".

* * *
2. Степень разделения контента и представления
2.1. Используется ли на сайте CSS для всех аспектов оформления страницы (шрифты, цвета, отступы, границы и т.д.)?

Используйте стилевые таблицы для управления компоновкой страницы и ее внешним видом
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-style-sheets
2.2. Перенесены ли вся декоративная графика в CSS, или она все еще встречается в (X)HTML-коде?

Ваша цель, как веб-разработчика, состоит в том, чтобы убрать из html-кода вашей страницы все оформительские элементы. Благодаря чему код станет чище и семантически правильнее.
http://www.maxdesign.com.au/presentation/benefits/index07.htm

* * *
3. Доступность для пользователей
3.1 Используется ли атрибут "alt" во всех значимых изображениях?

Каждый нетекстовый элемент сопровождайте текстовым описанием
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalent
3.2. Используется ли на сайте для шрифта относительные единицы измерения вместо фиксированных?

В коде и в стилевых таблицах используйте относительные, а не абсолютные единицы для указания размеров элементов
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units

См. также:

* http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units
* http://www.clagnut.com/blog/348/
* Власть народу - относительные размеры шрифтов
* Размер шрифта пусть выбирают сами пользователи

3.3. Ломается ли каким-либо образом компоновка страницы при увеличении размера шрифта?

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

"... Следует предусмотреть способ, который позволяет пользователю перейти к контенту сайта, пропустив навигацию..."
http://www.section508.gov/index.cfm?FuseAction=Content&ID=12

"... сгруппируйте родственные ссылки, опишите группу и представьте способ пользователям пропустить эту группу при просмотре..."
http://www.w3.org/TR/WCAG10-TECHS/#tech-group-links

".. масса навигационных на странице ссылок доставляет неприятности не только слепым пользователям. Вспомните и о тех, у кого затруднена моторика и кому придется нажимать много раз клавишу Tab, чтобы пройти по всем этим ссылкам к тексту страницы..."
http://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020

См. также:

* http://www.niehs.nih.gov/websmith/508/o.htm

3.5. Используются ли на сайте доступные формы?

Формы на веб-страницах не самая простая вещь для людей с физическими недостатками. Одно дело - навигация по странице с текстовым материалом, и совсем другое - переход по полям формы и ввод информации в нее.
http://www.htmldog.com/guides/htmladvanced/forms/

См. также:

* http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html
* http://www.accessify.com/tools-and-wizards/accessible-form-builder.asp
* http://accessify.com/tutorials/better-accessible-forms.asp

3.6. Используются ли на сайте доступные таблицы?

Что касается таблиц. Не забудьте указать заголовки для столбцов и рядов... Для таблиц, где имеются два и более логических уровней рядов и столбцов, воспользуйтесь вспомогательными элементами языка html, чтобы связать логически ячейки данных с ячейками заголовков.
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-table-headers

См. также:

* http://www.bcc.ctc.edu/webpublishing/ada/resources/tables.asp
* http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp
* http://www.webaim.org/techniques/tables/

3.7. Достаточно ли контрастны и ярки цвета на страницах сайта?

Убедитесь, что разница между цветом фона и цветом текста достаточно контрастна, чтобы не вызывать затруднений при чтении у людей с пониженным восприятием цвета.
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-contrast

См. также:

* http://www.juicystudio.com/services/colourcontrast.asp

3.8. Используется ли только цвет для выделения критической информации?

Убедитесь, что вся важная информация, выделенная цветом, также выделена при отсутствии цвета, например с помощью контекста или элементами логической разметки.
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-convey

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

См. также:

* http://colorfilter.wickline.org/
* http://www.toledo-bend.com/colourblind/Ishihara.html
* http://www.vischeck.com/vischeck/vischeckURL.php

3.9. Используется ли задержка в выпадающих меню (для пользователей с медленной моторикой)?

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

Ссылки должны быть достаточно понятными, чтобы они имели смысл при чтении вне контекста - либо при простом чтении или при чтении в виде списка.
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-links

* * *
4. Доступность для устройств
4.1. Достаточно ли хорошо сайт работает и в современных и в старых браузерах?

Прежде чем начинать верстать страницы с использованием CSS, определитесь, какие браузеры вы собираетесь поддерживать и до какой степени.
http://www.maxdesign.com.au/presentation/process/index_step01.cfm
4.2. Можно ли работать с материалами сайта при отключенном CSS или в броузере, где нет поддержки CSS?

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

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

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

См. также:

* http://www.delorie.com/web/lynxview

4.5. Хорошо ли выглядит сайт при распечатке?

К любому (X)HTML-документу можно прикрепить стиль для вывода на печать и для этого не потребуется трогать разметку самого документа.
статья на webmascon.com В печать!

См. также:

* http://www.d.umn.edu/itss/support/Training/Online/ webdesign/css.html#print

4.6. Хорошо ли работает ли сайт на наладонных устройствах?

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

См. также:

* Дизайн для портативных устройств: ваш веб-сайт на маленьком экране

4.7. Снабжен ли сайт детальным набором метаданных?

Метаданные - это информация, которая понятна для машин.
http://www.w3.org/Metadata/

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

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

* * *
5. Основы юзабилити
5.1. Имеется ли на странице четкая визуальная иерархия элементов?

Организуйте и выделяйте важность того или иного материала с помощью размеров, отступов и логических связей.
http://www.great-web-design-tips.com/web-site-design/165.html
5.2. Легко ли отличить один уровень заголовков от другого?

Используйте заголовки для того, чтобы раскрыть структуру документов, при этом используйте их в соответствие со спецификацией.
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headings
5.3. Достаточно ли легко понять навигацию по сайту?

Навигация вашего сайта должна подсказывать посетителю, на какой странице сайта он сейчас находится и куда он может следовать дальше.
http://www.1stsitefree.com/design_nav.htm
5.4. Используется ли однообразная навигация на всех страницах сайта?

Если на каждой странице вашего сайта навигация придерживается одного и того же стиля, посетителям легче будет работать с сайтом и они быстрее будут находить нужную им информацию.
http://www.juicystudio.com/tutorial/accessibility/navigation.asp
5.5. Используется ли на сайте приемлемый и однообразный язык текстов?

Ясный и простой язык материалов позволяет эффективно вести диалог с посетителем. Не забывайте, что ваш сайт могут читать пользователи, для которых ваш язык не является родным.
http://www.juicystudio.com/tutorial/accessibility/clear.asp
5.6. Есть ли у сайта карта и страница с контактной информацией? Легко ли их найти?

Большинству карт сайтов не удается раскрыть многоуровневую структуру архитектуры сайта. В тестах на юзабилити пользователи часто игнорируют карту сайта или просто не могут ее найти. Сложность карты также является проблемой: карта должна быть именно картой, а не головоломкой по навигации.
http://www.useit.com/alertbox/20020106.html

См. также:

* Карта сайта и индекс: что это такое и для чего это нужно?

5.7. Если ваш сайт очень большой, есть ли на нем инструмент поиска?

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

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

Для полноты восприятия пользователями ссылок текст ссылок должен быть оформлен другим цветом и подчеркнут. Посетители не должны метаться по странице в поисках ссылки.
http://www.useit.com/alertbox/20040510.html
5.10. Четко ли выделены цветом ссылки, которые пользователь уже посетил?

Самое главное, если четкое выделены ссылки, которые пользователь уже посетил, он не нажмет на них случайно, и не будет попадать на ту же самую страницу, где уже побывал.
http://www.useit.com/alertbox/20040503.html

* * *
6. Управление сайтом
6.1. Есть ли у сайта понятная и полезная страница ошибки 404, которая работает с любого уровня сайта?

Вы запросили страницу - либо набрав URL в адресной строке, либо щелкнув по ссылке - и обнаружили, что провалились в Ничто. Дружественные к пользователю веб-сайты подадут руку помощи потерявшемуся пользователю, а другие сайты будут рассчитывать на то, что браузер пользователь сам их как-нибудь вытащит из бездны киберпространства.
статья на webmascon.com Совершенная 404-ая страница
6.2. Используются ли на сайте дружественные URL-ы?

Большинство поисковых серверов (за исключением лишь некоторых - например, Google) не будут индексировать страницы, в чьих URL-ах присутствует символ "?" или какой либо иной символ (скажем "&" или "="). Что хорошего в веб-сайте, если его никто не может найти?
http://www.sitepoint.com/article/search-engine-friendly-urls

С точки зрения пользовательского интерфейса самым ужасным является URL-ы. Тем не менее, если они коротки, логичны и самоисправляющиеся, с ними становится удобно работать.
http://www.merges.net/theory/20010305.html

См. также:

* URL как элемент пользовательского интерфейса
* http://www.sitepoint.com/article/search-engine-friendly-urls
* http://www.websitegoodies.com/article/32
* http://www.merges.net/theory/20010305.html

6.3. Можно ли к вашему сайту доступиться, набрав адрес без "www"?

В целом не очень критичное требование, а иногда его даже невозможно удовлетворить. Но тем не менее всегда неплохо, если у ваших посетителей есть такая возможность. Если посетитель наберет название вашего сайта без "www" и не сможет до него доступиться, это будет плохо и для вас и для него.
6.4. Есть ли у сайта пиктограмма для закладок?

Пиктограмма для закладок (favicon) это графический файл с картинкой в нескольких разрешениях. Они как правило используются на всех профессионально выполненных сайтах. Пиктограмма для закладок дает веб-мастеру еще один способ рекламы сайта.
http://www.favicon.com/

Разумеется, пиктограмма для закладок не является критичной. Однако ее отсутствие порождает волну ошибок 404 в ваших лог-файлах. Такие браузеры как IE всегда запрашивают у сервера эту пиктограмму, когда пользователь помещает ссылку на ваш сайт в закладки. Если на вашем сайте этой пиктограммы нет, в логи попадет ошибка "404 File not found". Так что наличие такой пиктограммы поможет вам значительно сократить размер файла ошибок. То же самое относится и к файлу "robots.txt".
Об этом списке

Данный список появился впервые в общих чертах в списке рассылки Web Standards Mail list в мае 2004 года. Он был представлен группе Sydney Web Standards Group 5 августа 2004 года. Также этот список доступен в pdf-формате.

Последняя проверка перед запуском сайта

Чеклист запуска сайта

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

Перед запуском

Контент и стиль

● Типографика
◦ Корректные символы. Проставить корректные символы тире, кавычек и апострофов, в зависимости от языка сайта
◦ Переносы слов. Проставить в важных местах неразрывные пробелы между инициалами, тире, перед последними словами
◦ Для английского: Лигатуры. Проставить лигатуры в заголовках, если требуется
● Вычитать тексты и проверить правописание
● Связность текстов
◦ Проверить регистр в важных текстах и заголовках
◦ Обеспечить единый стиль текстов
◦ Единство повторяющихся фраз (т.е. «Узнать больше», «Читать далее», «N комментариев» и др.)
◦ Пунктуация в списках (напр. если пункт списка заканчивается точкой, следующий пункт должен начинаться с заглавной буквы и наоборот для точки-запятой)
● Проверить нет ли на сайте вшитых ссылок на dev-сервер (т.е. после запуска ссылки должны вести на сайт «в миру»)
● Проверить не осталось ли на сайте тестового контента
● Проверить печатные версии важных страниц
● При редизайне или изменении информационной архитектуры, проверить стоят ли редиректы со старых адресов разделов на новые
● Проверить скрытые текст (e.g. alt/title атрибуты HTML тегов, тексты в Javascript функциях)

Стандарты и валидация

● Доступность для людей с ограниченными возможностями (не препятствуют ли нарушения восприятия цвета, звука и т.д. навигации по сайту)
● HTML валидация
● Javascript валидация
● CSS валидация

Доступность в поисковиках, SEO и статистика

● Заголовки страниц очень важны; убедиться, что они осмысленны и содержат важные ключевые слова
● Заполнить мета-тег «description» для важных страниц
● Привести ссылки на главную страницу к единому виду (т.е. выбрать что-то одно из вариаций site.ru www.site.ru www.site.ru/index.html)
● Гарантировать предыдущий пункт редиректом на выбранную версию (напр. редирект с www.site.ru/* на site.ru/*)
● Убедиться в семантически-грамотном использовании HTML тегов (h1, h2,… и т.д.)
● Проверить наличие важных ключевых слов в контенте
● Привести формат ссылок к читабельному виду (напр. site.ru/blog/how-to-make-coffee, site.ru/user/vasya и т.д.)
● Прикрутить Google Analytics, FeedBurner, и/или другие системы измерения статистики
● Создать XML Sitemap
● Добавить сайт в Google Webmaster Tools

Тестирование функциональности

● Проверить весь заказанный/особый/сложный функционал
● Проверить работу поиска (включая релевантность)
● Проверить работу сайта в разных браузерах (Internet Explorer, Firefox, Opera, Safari, Chrome etc.), версиях (6, 7, 2.2, 3.1 etc.) и платформах (Windows, OSX, Linux)
● Проверить вид сайта на разных разрешениях экрана (1280×1024, 1024×768, 1920×1200, 800×600...)
● Протестировать все формы (контактов, комментариев, фидбека, ...), поставить на них капчу или другую защиту
● Проверить все e-mail шаблоны
● Проверить работоспособность сайта с выключенным Javascript, Flash, и другими компонентами
● Проверить работоспособность внешних ссылок

Безопасность/Риски

● Настроить бекапы по расписанию, и проверить восстановление из них.
● Проверить нет ли у посетителей доступа к служебным/секретным/закрытым страницам
● Закрыть поисковикам доступ к служебным/секретным/закрытым разделам сайта, используя robots.txt
● Отключить вывод ошибок на экран
● Проверить количество доступного дискового пространства и вычислить на сколько его хватит
● Настроить email/SMS уведомления о неработоспособности сайта/сервера;

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

● Провести нагрузочное тестирование
● Провести оптимизацию изображений/графики
● Проверить и реализовать кэширование где это необходимо
● Проверить общий размер/скорость загрузки страниц сайта
● Минимизировать/сжать статику (Javascript/HTML/CSS)
● Оптимизировать CSS: короткие пути к изображениям; использовать «каскадную» природу стилей, и т.д.
● Проверить наличие индексов в таблицах БД
● Проверить другие настройки производительности на всех уровнях (Сервера, БД, CMS и т.д.)
● Включить логи ошибок/производительности на сервере

Финальные штрихи

● Создать свои страницы 404/403
● Создать страницу «Сайт на обслуживании»
● Создать favicon

После запуска

Маркетинг

● Добавить сайт в социальные медиа: Twitter, ВКонтакте, LinkedIn, Facebook, и т.д.
● Добавить сайт в поисковики
● Настроить PPC/Google Adwords кампании, если требуется
● Проверить форматирование сайта в результатах выдачи поисковиков

Другое

● Мониторить фидбек (прямой с сайта, на Социальных Медиа, в выдаче Google и т.д.)
● Отлавливать в статистике возможные проблемы с некоторыми разделами/страницами сайта
● Обновлять контент

Версию для печати можно найти здесь — drupaldance.com/blog/website-launch-checklist

Забыли упомянуть: прикрепить сайт к Яндекс.Вебмастер и Google Webmaster Tools
Если сайт компании:
Зарегистрировать в Яндекс.Адресах и Гугл.Адресах, добавить на Wikimapia.org

CSS-debug

* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }

отключение журналирования в ext4

tune2fs -o journal_data_writeback
источник:
http://habrahabr.ru/blogs/linux/64682/