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

Анализ макета, разметка модульной сетки

Этап анализа макета, который нужно сверстать является ключевым этапом и ошибки, допущенные на этом этапе, могут привести к большому геморрою на последующих этапах. По этому, нужно тщательно выполнять этот этап. Суть этого этапа состоит в оценке имеющегося макета, определении типа макета резиновый\фиксированный\эластичный и построения модульной сетки, на основе которой будет верстаться макет. Под модульной сеткой макета подразумевается, определение структуры макета скажем, две колонки, шапка и футер, или три колонки и футер (примеры типовых модульных сеток можно увидеть в заметке «Основные примеры модульных сеток»).

Подготовка графики

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

Верстка основных модульных элементов.

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

Верстка всех внутренних элементов.

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

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

• Чем лучше вы знаете своих читателей, тем лучше сможете писать для них.
• Представьте себе того, к кому вы действительно обращаетесь.
• Выработайте свое отношение, избавьтесь от анонимности и ведите разговор с глазу на глаз.
• Простота помогает удержать ускользающее внимание.
• Писать – значит, привлекать внимание.
• Пишите как живой человек.
• Не заставляйте меня читать! Сохраните основной смысл и отбросьте все остальное.
• Позвольте посетителям просматривать и пропускать части текста.
• Удалите не относящиеся к теме вопросы.
• Размечайте текст(списки, параграфы).
• Веб-текст = контент + интерфейс
• Используйте отступления.
• Сокращая текст, не сделайте его двусмысленным
• Создавайте информативные заголовки.
• Используйте 2-3 уровня заголовков.
• Выделяйте ключевые слова, фразы и ссылки, но не переусердствуйте.
• Ясно укажите, что кроется за ссылкой.
• Делайте смысловое ударение на ссылке.
• Переместите все дополнительные ссылки в начало или конец абзаца.
• Создавайте понятые URL-указатели.
• Создавайте разнообразные ссылки вглубь и вширь веб-узла. Будьте щедрее – предоставляйте больше информации.
• Не обрывайте ссылками последовательное изложение материала.
• Укажите текущее расположение посетителя.
• Откройте для всех метаинформацию, покажите, что находится внутри черного ящика.
• Включайте в каждый абзац описание только одной идеи.
• Разместите основную идею в самом начале абзаца.
• Создавайте меню с информативной структурой.
• Предлагайте несколько путей к одной информации.
• Тщательно подбирайте стиль изложения для выбранного жанра.

Кроме этих полезных рекомендаций книга в книге написано очень много о том как качественно оформить и подать материл и в изобилии представлены примеры реализации конкретных советов и правил.

• Джеффри Зельдман—«Веб-дизайн по стандартам»
• Эрик А. Мейер—«CSS каскадные таблицы стилей. Подробное руководство.»
• И. Ашманов—«Оптимизация и продвижение сайтов в поисковых системах»
• Алексей Яковлев—«Контекстная реклама»
• Гради Буч—«Объектно-ориентированный анализ и проектирование.»
• Александра Королькова—«Живая типографика»
• Артемий Лебедев—«Ководство. Параграфы о дизайне»

Для общего развития:

• Джеффри С. Янг—«iКона. Стив Джобс»
• Дэвид А. Вайз—«Google. Прорыв в духе времени»
• Ребекка Саундерс—«Dell. Секреты лучшего в мире компьютерного бизнеса»
• Игорь Ашманов—«Жизнь внутри пузыря»
• Энтони Вламис—«Yahoo! Секреты самой популярной в мире интернет-компании»

Если вам есть что добавить, буду очень благодарен за подсказку.

Все негативные факторы при работе за компьютером можно поделить на такие основные группы:

• Факторы, влияющие на опорно-двигательный аппарат.
• Факторы, влияющие на сенсорные органы.
• Факторы, влияющие на психологическое состояние.

Все эти факторы вызваны двумя основными причинами: неправильной работой за оборудованием и неправильным выбором оборудования

Подробно о правильном выборе и конструкции оборудования занимается отдельная наука – эргономика (переводится с греческого как ἔργον – работа и νόμος – закон ). История развития этой науки начинается с 1920. Предпосылкой для появления науки было возрастание количество травматических случаев при эксплуатации техники, но если раньше эти случаи списывали на личностные недостатки человека (халатность, плохую память, концентрация) то с развитием и усложнением техники начали задумываться что причиной может быть неправильная организация трудовых условий, что и привило к появлению новой науки. Сейчас эргономика имеет несколько подразделов, такие как социальная инженерия, техническая эстетика, микроэргономика (разделом которой является «Юзабилити»).

Последствия, неправильной работы за компьютером

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

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

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

Рекомендованные условия для работы за компьютером.

• Сидите глубоко на твердом стуле с высокой спинкой, имеющем изгиб для поясницы, – это выровняет спину и даст поддержку шее. Край стула не должен давить на сосуды под коленями.
• Расстояние до монитора должно быть 50-70см.
• Используйте мышку подходящих размеров, удобной формы.
• Делайте перерыв в сидячей работе, вставайте и ходите 15-20 минут каждые 1-2 часа.
• Правильно организуйте освещение рабочего места. При слабом свете глаза напрягаются и болят. Умерьте яркость экрана. Буквы и цифры на экране это маленькие световые лучи, которые идут прямо в глаза. Нужно отрегулировать их контрастность, чтобы свет не был слишком ярким.
• Закрывайте глаза для отдыха. Время от времени отводите глаза в сторону, чтобы дать отдохнуть своему зрению.
• Перемещайте взгляд по всей площади экрана, старайтесь не смотреть напряженно в одну точку. Пусть попеременно работают все мышцы глаз, а не отдельные группы, на которые в этом случае будет падать максимальная нагрузка.
• Используйте специальный глазной гель (Визин, Видисик), который предотвращает «обсушивание» роговицы глаза. Предотвратить заболевания могут очки для работы за компьютером, которые имеет особое покрытие.

Комплекс упражнений для профилактики заболеваний опорно-двигательного аппарата:

• Наклоните голову, доставая подбородком грудь. Наклонив голову вперед, медленно поворачивайте ее вправо и влево несколько раз.
• Перемещайте голову назад, прижимая к груди подбородок.
• Держа руки на бедрах, сводите и разводите лопатки.
• Положите ногу на ногу и локтем противоположной руки обопритесь о наружную поверхность бедра. Перемещайте плечо вперед, до упора скручивая позвоночник. Поменяв ногу, выполняйте то же движение в другую сторону.
  1. Движение глаз по вертикали вверх – вниз
  2. Движение глаз по горизонтали влево – вправо.
  3. Движение глаз по диагонали левый нижний угол – правый верхний угол.
  4. Движение глаз по диагонали левый верхний угол – правый нижний угол.
  5. Вращение глаз по часовой стрелке (представьте перед собой большие часы и перемещайтесь глазами в след за стрелкой).
  6. Вращение глаз против часовой стрелки (представьте перед собой большие часы и перемещайтесь глазами в след за стрелкой).
  7. Поднесите палец к носу и посмотрите на него в течении пары секунд.
  8. Представьте перед собой «змейку» (/\/\/\) и перемещайтесь по ней глазами, как слева направо, так и справа налево.
  9. Быстро моргайте глазами в течении нескольких (3-5) секунд. Как вариант можно выполнять это упражнение по разу между предыдущими.
  10. Сожмите глаза со всех сил. Расслабьте. Помогает при сухости в глазах.
  11. Трите ладонями друг об друга насколько можно сильнее и быстрее, чтобы они стали максимально теплыми.
  12. Приложите ладони к глазам так, чтобы пальцы рук пересекались на лбу. При этом проверьте, чтобы не было видно света.
  13. Закройте глаза и подумайте о чем-то хорошем. Находитесь в таком положении как можно больше (не менее 10-15 секунд, можете и 2 часа сидеть).
  14. Откройте глаза. Можете быстро поморгать. Вы почувствуете, что ваши глаза расслабились.

Список упражнений (данные упражнения рекомендуется делать по 5-10 повторов до 3 раз в день; во время выполнения упражнений голова должна быть неподвижна, то бишь все движения выполняются только глазами) предотвращающие заболевания глаз:

Источники материала

http://habrahabr.ru/blogs/i_am_clever/29235/
http://habrahabr.ru/blogs/i_am_sportsman/37480/
http://www.mc21.ru/page.php?id=534

Факторы вызывающие ошибки:

Человеческие факторы:

• Фактические ошибки(пропущенный закрывающий тег, нарушение вложенности)
• Ошибки синтаксиса (опечатки, помарки)
• Плохое знание матчасти (неправильное использование элементов)

Особенности браузеров

• (например свойство hasLayout в IE)

Ошибки поддержки браузерами стандартов

• (псевдокласс :hover в IE6 применим только к ссылкам)

Алгоритм поиска ошибок

1. Идентификация проблемы – понять к чему приводит ошибка, и на какие элементы влияет.
2. Исключение ошибок валидаци – добиться валидности документа. Таким образом, устраняются ошибки нарушения вложенности или находятся незакрытые теги.
3. Локализация проблемы – поиск участка кода, который вызывает ошибку. Самый эффективный метод для этого – метод «Разделения кода». Делим код на структурные части и удаляем нижнюю половину всего кода (предварительно сделав копию кода). Дальше смотрим, соответствует ли результат ожиданиям. Если ошибка осталась, значит, дело в верхней части кода, а не в нижней. После этого опять делим оставшуюся часть кода на половину и смотрим где ошибка в той, что удалили, или в той, что осталась. Таким образом, находим непосредственный участок кода, который вызывает ошибку. Другой способ состоит в добавлении ярких цветов фона структурным элементам. Таким образом, можно понять с каким блоком что происходит или из какого блока что «вылазит».
4. Очистка кода – если предыдущий этап не дела результата переходим к созданию чистого макета с нуля. Убираем все декоративные визуальные элементы и оставляем только структурные и переходим к предыдущему пункту.
5. Звонок другу – поиск собеседника, который поможет решить проблему, поиск в Google, тематических ресурсах.

Как устранить ошибку и не сойти с ума

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

Враг не пройдет

• Пишите чистый код
• «Фиксируйте» собственный опыт преодоления ошибок, делитесь им.
• Держите руку на пульсе. Следите за тематическими блогам, сайтами
• Будьте бдительны на минном поле, или «Не спите за рулем».

Да прибудет с вами сила и терпенье в борьбе с незнаниям и браузерами. Заметка написана с использованием материалов доклада Наталии Арефьевой «Debugging верстки».