Курс лекций по "Интернет"

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

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

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

Оформление: не следует оформлять  финансовый бюллетень также как  журнал "Птюч". Даже сами принципы навигации по сайту и его (сайта) организации различаются в зависимости  от целевой аудитории.

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

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

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

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

Работа с текстами.

Каждый текст имеет свою собственную  направленность, рассчитанную на наиболее легкое восприятие целевой аудиторией, то есть теми людьми, для которых  он непосредственно предназначен. Поэтому при написании текста вы должны четко представлять себе к кому вы обращаетесь, что вы хотите сказать, чтобы ваши читатели не были дезориентированы. Соответственно, когда вы "направляете" текст на какую-либо конкретную социальную группу, то вы делаете это с помощью стилистики и словарного запаса, используемого в тексте. Достаточно очевидно, что использование простонародных выражений не всегда подходит для сайта, который распространяет биржевые сводки и новости, а большое количество компьютерных терминов может смутить неквалифицированного пользователя, которых в Сети становиться все больше и больше, о чем многие забывают. Задачей редактора в данном случае будет являться подбор оптимальной стилистики и направленности текста и постоянное следование ей. Текст должен быть относительно ровным (длина фразы, количество знаков препинания и т.д.), но не слишком однообразным, потому что, в этом случае его будет совершенно невозможно читать. Работая над стилистикой текста, не стоит забывать о грамматике. Люди очень чувствительны к ошибкам в тексте и легко их ловят, тем более, что чужой текст обычно читают значительно внимательнее чем свой собственный. Отдельно стоит поговорить о заголовках. Частой ошибкой издателей (не только web) являются неподходящие, неуместные заголовки. Заголовки, точно отражающие смысл последующего за ними текста достаточно скучны и непривлекательны, хотя и исчерпывающе информативны.

Работа с изображениями 

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

5.4 Формирование карты сайта и определение навигационной схемы сайта

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

Гиперссылки

Web-сайт - группа HTML-документов, объединенных  по смыслу и имеющих одинаковое  дизайнерское решение. HTML-документ- это текстовый файл с расширением .html или .htm, в котором тест размечен HTML-тегами. Каждая страница (HTML-документ) является обычным текстовым файлом и содержит, во-первых, текст, нужный человеку, и, во-вторых, некоторые инструкции человеком невидимые. Эти инструкции условно можно разделить на два типа: описание внешнего вида документа (размер букв, тип шрифта, элементы оформления) и ссылки на другие ресурсы (это могут быть другие страницы, изображения, серверы и т.п.), которые, собственно, и делают из текста гипертекст. Гипертекстовые ссылки выделенные области документа, позволяющие переходить к другому документу, содержащему связанную информацию. С помощью гипертекстовых ссылок пользователь может обращаться к информации в других документах, связанных с данной темой. Выбирая подсвеченные слова, выделенные изображения и графику в тексте документа и щелкая по ним мышью, вы можете перемещаться в любом направлении и "перескакивать" на другие интересующие вас документы, независимо от того, где эти документы находятся. С помощью ссылок осуществляется навигация по web-сайту.

Навигация

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

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

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

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

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

5.5 Формирование макет страницы

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

Вернемся к собственно самому макетированию - вам предстоит создать таблицу, отвечающую нескольким требованиям.

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

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

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

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

5.6 Определение дизайна страницы

После того как создан макет и  подготовлены материалы, можно заняться дизайном. Основные дав направления  в дизайне это выбор цветовой гаммы и шрифтов. Начните с  того, что разработайте цветовую гамму для вашего сайта. В работе обязательно учитывайте направленность вашего сайта, его задачи, контролируйте образ, который возникает у посетителя вашего ресурса, поскольку цветовая гамма имеет не только эстетическое, но и глубокое психическое влияние на человека. Крайне желательно иметь единую цветовую гамму по всему сайту, по крайней мере, если вы нарушаете это единство, то должны четко осознавать в каких целях вы привносите диссонанс на свой ресурс. Очевидно, что дизайн ресурса (аналогично единообразию макета и как следствие этого), должен быть выдержан в едином стиле для обеспечения комфорта пользователя и создания цельного впечатления от узла, как от неделимого источника информации (развлечений, покупок etc.), а не как набора отдельно взятых страниц. И одним из механизмов создания единого облика является цветовая гамма. Стоит обратить пристальное внимание на общность шрифтового и графического оформления. Используйте единый шрифтовой тег для всех заголовков ресурса, для близких по смыслу элементов и пр. Очень важная область дизайна - типографика - шрифтовое решение композиции. К сожалению, в отличие от печатных изданий, современные веб-возможности ограничены двумя группами очень похожих и не очень красивых шрифтов: рублеными (Arial, Verdana etc.) и антиквами во главе с Times New Roman. Все остальные шрифты могут оказаться не установленными на компьютере пользователя, и их использование регулярно приводит к невозможности посетителем прочесть ваше послание, - вместо текста будут показаны жуткие закорючки. Если же вам необходимо написать текст каким-нибудь особенным шрифтом, то используйте gif изображение для всего текста (например, для заголовков) или для каждой буквы в отдельности, что гораздо экономичнее, но чрезвычайно трудоемко (так, например, сделан сайт журнала "КАК"). Тем не менее, как бы вы не ухищрялись, использование текста в виде картинок приведет к многократному увеличению объема страницы, что крайне нежелательно, учитывая современные средства связи и загрузку интернет-каналов. Поэтому стоит подумать о том, чтобы суметь выразить представляемые вами образы существующими средствами, не используя громоздкие картинки.