6 Таблица 1 критерии для создания сайта

Критерии	Культурный Институт Google	Виртуальные музей по парижскому Лувру	Пушкинский виртуального музея
Удобная навигация по сайту,	+	-	-
Использование иллюстраций на сайте	+	+	+
Интерактивность	+	+	+
Большое кол во экспонатов	+	+	-
Возможность покупки билетов для посещения музея	-	+	-
Наполнение главной страницы сайта	+	+	-
итог	5	5	2

Глава 2. Проектирование верстки виртуального музея

2.1 Обзор существующих подходов к проектированию верстки

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

На основе анализа сайтов веб метрического рейтинга были выявлены следующие особенности:

– большинство в течение последних 5 лет не обновляло визуальную и программную составляющую сайтов. В связи с этим элементы новых технологий CSS и HTML почти не используются, хотя они уже достаточно распространены;

– для большей динамичности на подавляющем большинстве сайтов используется JavaScript или его библиотеки;

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

– только 10% сайтов имеют версию для мобильных устройств и ни на одну из них нельзя зайти с персонального компьютера;

– 5% web-сайтов созданы с применением принципов адаптивного web-дизайна, хотя еще год назад ни один из проанализированных сайтов их не использовал.

Основные принципы проектирования адаптивного дизайна сайта.

1. Использование резинового типа макета (англ. fluid grid) – макета, в котором значение размера ширины родительского элемента (элементов) задаётся в процентах по отношению к разрешению монитора.

2. Резиновые изображения (англ. flexible images). Все изображения должны масштабироваться, исходя из предельно допустимого значения ширины. Оптимальным является их отображение в натуральную величину. При изменении пользователем окна браузера до размера менее самого изображения, оно автоматически уменьшается, чтобы вписываться по ширине в окно браузера наилучшим образом.

3. Использование media queries – правил CSS, которые назначаются как атрибуты при вызове других правил из таблицы стилей, основанных на параметрах устройства вывода, таких как тип, ширина и высота окна браузера, разрешение, ориентация в пространстве.

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

5. Модульная сетка страницы – это невидимый «скелет» дизайна, система горизонтальных и вертикальных направляющих, помогающих сориентировать и согласовать между собой отдельные элементы композиции. Для генерации модульной сетки обычно используют так называемые css-фреймворки, которые созданы для упрощения работы верстальщика страницы, быстроты разработки и исключения максимально возможного числа ошибок вёрстки.

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

Для создания макеты сайта выбран язык разметки HTML, он простой в использование, но не обладает такими возможностями как CSS или JavaScript.

Существует 3 вида верстки в HTML:

1. Блочный

2. Таблицы

3. Фреймы

Блочный вид (рис.1) самый простой ведь в нем используются лишь блоки и слои, которые создаются при помощи тега <div> после создания блоков остается только заполнить их информацией, такой как текст, картинка, видео или аудио.

Рисунок 4 Блочная верстка

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

<table border=”толщина рамки” width=”размер таблицы”>;

<tr> (контейнер для ячеек);

<td> (ячейки);

<th> (ячейки, в которых текст выделен жирным).

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

Рисунок 5 Табличная верстка

8

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

1. <frameset cols=" Количество и размер ячеек по вертикали ">;

2. <frameset rows=”Количество и размер ячеек по горизонтали”>;

3. <Frame src="Файл, которым заполняют ячейку ">;

4. Атрибуты scrolling=”no” и noresize убирают вертикальную полосу прокрутки.

Также каждому фрейму можно задать имя тегом <name=” имя”> после чего в гиперссылке прописываем тег <target=”имя, которое задали фрейму> и файл, на который выводит гиперссылка, откроется в заданном фрейме.

Рисунок 6 Фреймы

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

Рисунок 7 Интерфейс программы Notepad++