Www (англ. World Wide Web, «всемирная паутина») — совокупность веб-сайтов, связанных между собой ссылками. Самая распространенная служба (сервис) сети Интернет. Статические и динамические веб-страницы




Скачать 245.02 Kb.
НазваниеWww (англ. World Wide Web, «всемирная паутина») — совокупность веб-сайтов, связанных между собой ссылками. Самая распространенная служба (сервис) сети Интернет. Статические и динамические веб-страницы
страница2/2
Дата публикации26.02.2013
Размер245.02 Kb.
ТипДокументы
uchebilka.ru > Информатика > Документы
1   2
^ ЧАСТЬ 3. РАЗРАБОТКА ВЕБ-САЙТА.

Разработка структуры и схемы навигации сайта.

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

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

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

Сайты с фиксированной и плавающей шириной.

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

Существенным неизвестным фактором является размер монитора пользователя, точнее разрешение (количество точек), на которое настроен монитор4. В этой связи различают 2 основных типа страниц: страницы с фиксированной и с «плавающей» (гибкой, «резиновой») шириной.

На снимках показаны страницы двух различных типов на разных мониторах и описаны их недостатки. Снимки показывают страницы на различных разрешениях: а) на 800600, б) на 1024768, в) на 12801024. Первая страница сверстана с плавающей шириной, вторая — с фиксированной.






а)

С увеличением разрешения монитора:

  • в плавающих страницах — элементы фиксированного размера (рисунки, колонки фиксированной ширины) уменьшаются, «теряясь» в композиции;

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

Разработка плавающих страниц немного сложнее, чем фиксированных.





б)





в)

Дизайнер должен заранее выбрать, страницы какого типа будет содержать будущий сайт. Желательно об этом думать ещё на этапе разработки эскиза.

Реагирующие элементы дизайна.

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







  • нормальное (при загрузке страницы);

  • активное (указатель мыши над элементом);

  • нажатое (пользователь нажал на элемент указателем мыши).

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

Требования к исходным файлам графического дизайна.

1) Художник предоставляет верстальщику исходники дизайна в формате ^ PSD в режиме RGB шириной не менее 1200-1600 точек (пикселей) по горизонтали. Количество предоставляемых файлов должно соответствовать количеству композиций. Будем считать страницы имеющими одну композицию, если расположение большинства графических элементов дизайна у них совпадает. Например, в следующем сайте вторая и третья страницы имеют одну композицию, поэтому должны предоставляться в одном файле.

    

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

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

Вёрстка страниц, разработка функционала сайта и отладка.

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

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

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

Запуск сайта.

Когда сайт готов, он размещается в сети. Для этого чаще всего используются услуги хостинга1 или колокэйшна2 (для крупных серьезных сайтов).

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

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

ЗАКЛЮЧЕНИЕ

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

^ Желаю вам иметь и посещать только качественные веб-сайты!

С уважением,

V.ладимир

v @ ladimir.kiev.ua

1 Также веб-страницы могут содержать звук, однако его использование редко бывает целесообразным.

2 Браузер (англ. browser, также «броузер») – программа, отображающая веб-страницы и имеющая средства навигации. Браузер может работать в одном из двух режимов: автономно (просмотр веб-страниц с локального диска) либо интерактивно (на связи с веб-сервером). Наиболее распространенные платформы браузеров: Microsoft Internet Explorer (MSIE) и Mozilla (браузеры Mozilla, Netscape, Firefox). Браузеры есть на всех современных компьютерах.

3 Веб-сервер – 1) компьютер в сети, предоставляющий сайты; 2) программа на данном компьютере, предоставляющая сайты браузерам, например, Apache или Microsoft Internet Information Server (IIS). Адрес вида v.ladimir.kiev.ua (без дробей) называют адресом веб-сервера, а также адресом сайта.

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

2 Протокол – стандарт сетевой связи. Например, протокол HTTP является важным промежуточным звеном, служащим при связи браузера и веб-сервера, взаимодействующим с HTML и TCP/IP.

3 Content Management System (англ.) – система управления содержимым.

4 Юзабилити (англ. usability) – удобство работы, простота использования, эргономичность.

1 Релевантность (англ. relevance) – значимость; существенность; важность.

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

3 Маркетолог – специалист по маркетингу – науке, изучающей рыночные отношения и спрос.

4 PR («пи-ар», англ. public relations – общественные отношения) – специалисты по PR занимаются связями с общественностью, социологией и технологиями взаимодействия с массами.

5 Копирайтер (англ. copywriter) – автор слоганов и других рекламных текстов.

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

7 Модератор – специалист, обеспечивающий соответствие содержимого сайта принятым правилам (чаще всего на сайтах, где посетители являются соавторами его содержимого).

8 Администраторы веб-сервера являются сотрудниками компании, предоставляющей хостинг.

1 Даже не будучи официально объявленным, конкурс существует всегда благодаря конкуренции.

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

1 Кстати, именно такие варианты часто ложатся в основу согласованного дизайна.

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

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

2 Навигация – 1) перемещение по объектам сайта или между несколькими сайтами; 2) процесс или метод определения: а) текущего местоположения и б) дальнейшего пути с использованием пользовательского интерфейса (интерфейс пользователя – это средства взаимодействия человека и машины – меню и другие элементы управления, курсор, указатель мыши и т. д.)

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

4 Наиболее распространенные разрешения мониторов 1024768 и 800600 (количество точек по горизонтали  по вертикали. Встречаются также разрешения 1152864, 12801024, 16001200. Более высокие и более низкие разрешения встречаются реже, ими при разработке веб-страниц можно пренебречь.

1 Хостинг (также «виртуальный хостинг», англ. hosting) – способ размещения информации в сети, при котором несколько веб-сайтов располагаются на одном физическом компьютере.

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

1   2

Похожие:

Www (англ. World Wide Web, «всемирная паутина») — совокупность веб-сайтов, связанных между собой ссылками. Самая распространенная служба (сервис) сети Интернет. Статические и динамические веб-страницы iconЛекция Введение в веб-технологии: структура и принципы Веб
Предметом данного курса являются технологии глобальной сети World Wide Web (сокращенно www или просто Web). На русском языке распространенным...

Www (англ. World Wide Web, «всемирная паутина») — совокупность веб-сайтов, связанных между собой ссылками. Самая распространенная служба (сервис) сети Интернет. Статические и динамические веб-страницы iconЛабораторная работа №32 Работа с World Wide Web в программе Internet Explorer
Для World Wide Web существуют различные сокращение www, Web, W3 и т д. Многие думают, что Web – то же самое, что и Internet, но это...

Www (англ. World Wide Web, «всемирная паутина») — совокупность веб-сайтов, связанных между собой ссылками. Самая распространенная служба (сервис) сети Интернет. Статические и динамические веб-страницы iconЛабораторная работа №2 По дисциплине: «веб-технологии и веб-дизайн»...
Цель работы: ознакомление с основными понятиями и принципами веб-дизайна; знакомство с основными возможностями по разработке веб-страниц...

Www (англ. World Wide Web, «всемирная паутина») — совокупность веб-сайтов, связанных между собой ссылками. Самая распространенная служба (сервис) сети Интернет. Статические и динамические веб-страницы iconКурсы web-программистов и, частично, курсы web-дизайнеров
Веб-программист. Такой специалист занимается разработкой сайтов, написанием серверного программного обеспечения для веб, web-вёрсткой,...

Www (англ. World Wide Web, «всемирная паутина») — совокупность веб-сайтов, связанных между собой ссылками. Самая распространенная служба (сервис) сети Интернет. Статические и динамические веб-страницы iconБизнес предложение
Мы разрабатываем и создаем веб-сайты и интернет-проекты любого вида, объема и сложности — от небольшой презентационной веб-страницы,...

Www (англ. World Wide Web, «всемирная паутина») — совокупность веб-сайтов, связанных между собой ссылками. Самая распространенная служба (сервис) сети Интернет. Статические и динамические веб-страницы iconБизнес предложение
Мы разрабатываем и создаем веб-сайты и интернет-проекты любого вида, объема и сложности — от небольшой презентационной веб-страницы,...

Www (англ. World Wide Web, «всемирная паутина») — совокупность веб-сайтов, связанных между собой ссылками. Самая распространенная служба (сервис) сети Интернет. Статические и динамические веб-страницы iconБизнес предложение
Мы разрабатываем и создаем веб-сайты и интернет-проекты любого вида, объема и сложности — от небольшой презентационной веб-страницы,...

Www (англ. World Wide Web, «всемирная паутина») — совокупность веб-сайтов, связанных между собой ссылками. Самая распространенная служба (сервис) сети Интернет. Статические и динамические веб-страницы iconБизнес предложение
Мы разрабатываем и создаем веб-сайты и интернет-проекты любого вида, объема и сложности — от небольшой презентационной веб-страницы,...

Www (англ. World Wide Web, «всемирная паутина») — совокупность веб-сайтов, связанных между собой ссылками. Самая распространенная служба (сервис) сети Интернет. Статические и динамические веб-страницы iconБизнес предложение
Мы разрабатываем и создаем веб-сайты и интернет-проекты любого вида, объема и сложности — от небольшой презентационной веб-страницы,...

Www (англ. World Wide Web, «всемирная паутина») — совокупность веб-сайтов, связанных между собой ссылками. Самая распространенная служба (сервис) сети Интернет. Статические и динамические веб-страницы iconБизнес предложение
Мы разрабатываем и создаем веб-сайты и интернет-проекты любого вида, объема и сложности — от небольшой презентационной веб-страницы,...

Вы можете разместить ссылку на наш сайт:
Школьные материалы


При копировании материала укажите ссылку © 2013
контакты
uchebilka.ru
Главная страница


<