Файл: Создание собственного ресурса: сайта-визитки, корпоративного портала или интернет-магазина.pdf

Рисунок 2 - Схематичная карта сайта

2.3 Выбор типа макета сайта

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

Все типы можно условно объединить в три группы:

• • жёстко фиксированные (Rigid fixed),
  • адаптивные резиновые (Adaptable fluid),
  • расширяемые эластичные (Expandable elastic) макеты.

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

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

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

2.4 Разработка макета главной страницы

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

Необходимо определиться с внешним видом главной страницы и отталкиваясь от него отрисовать внутренние.

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

2.5 Разработка прототипа и макетов внутренних страниц

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

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

Рисунок 3 - Прототип внутренней страницы

После разработки прототипов приступаем к созданию макетов.

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

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

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

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

1. Фон — это приятная картинка природы.
2. Расположение статей — вертикальное.
3. Анонс статей — картинка, заголовок, вводный текст, дата.
4. Дополнительные фишки — рубрика, общее количество статей,

«хлебные крошки».

1. На одной странице не более 6 записей, а после них кнопка перехода на следующую страницу.
2. Расположение меню — вертикальное и горизонтальное.

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

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

3 Модульная сетка

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

Рисунок 4 - Схематичное изображение макета на базе модульной сетки и без нее.

Модульная сетка - это набор направляющих линеек и простых линий шаблона сайта. Структура такой сетки способна оказаться достаточно сложной, детализированной, а может быть простой и общепринятой. При разработке макета данной дипломной работы использовалась система модульных сеток grid 960. Это специальный инструмент, который предоставляет psd шаблон с рассчитанными направляющими на 12, 16 или 24 колонки.

3.1 Реализиция

Верстка сайта осуществлялась при помощи Bootstrap. Это CSS/HTML фреймворк для разработки web-сайтов. Иначе говоря, это комплекс инструментов для верстки. Вот некоторые его преимущества:

• • • Скорость работы — благодаря множеству готовых элементов вёрстка с бутстрапом занимает значительно меньше времени;
    • Масштабируемость — добавление новых элементов не нарушает общую структуру;
    • Легкая настраиваемость — редактирование стилей производится путём создания новых css-правил, которые исполняются вместо стандартных;
    • Большое количество шаблонов — о шаблонах Bootstrap я напишу далее;
    • Широкая сфера применения — Bootstrap используется в создании тем для практически любой CMS (OpenCart, Prestashop, Magento, Joomla, Bitrix, WordPress и любые другие), в том числе для одностраничных приложений.
    • Огромное сообщество разработчиков.

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

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

Шрифт состоит из глифов - векторных форм каждой буквы или символа. Следовательно размер файла шрифта тесно связан с двумя факторами: числу глифов в шрифте и сложности их векторных контуров. На сайте турфирмы Denima-Tour использован популярный среди web-дизайнеров шрифт Open Sans. Это подключаемый шрифт Google, что позволяет избежать любых возможных ошибок при отображении в различных браузерах всех версий. Open Sans содержит 897 глифов, включая латинские, греческие и кириллические символы и имеет 8 различных начертаний. На рисунке 5 представлен подключенный шрифт.

Рисунок 5 - Подключенный шрифт

3.2 Программная часть

На сайте в большом количестве реализованы различные css-эффекты, использованы подключаемые библиотеки jquery и jquery ui.

jQuery — javascript библиотека. Использование библиотеки делает разработку javascript кода проще и увлекательнее. jQuery UI — это библиотека на основе jQuery, имеющая более 20 плагинов. Среди них есть плагины, осуществляющие различные сценарии (такие как перетаскивание или растягивание элементов), восемь видов виджетов (такие как календарь, диалоговые окна, систему вкладок и.т.д) и анимационные эффекты. Более того, UI содержит несколько тем оформления. С помощью таких тем оформляются виджеты, а также темы содержат набор стандартных иконок (173 иконок). Каждая тема оформления может быть отредактирована на сайте jQuery UI, прямо перед загрузкой.

CSS, соответственно, расшифровывается как Cascading Style Sheets (Каскадные Документы Стилей). CSS помогает оформлять HTML документы. При создания сайта использовалась последняя версия CSS3 - последний стандарт оформления HTML документов, существенно увеличивший возможности предыдущего стандарта CSS2.1.

Благодаря CSS3 возможно:

Создавать элементы со сглаженными углами;

Создавать линейные и сферические градиенты;

Более гибко оформлять фоновую картинку элементов;

-Добавлять к элементам и к тексту элементов тени;

Создавать анимацию и различные эффекты переходов;

Задавать цвета несколькими новыми способами и многое другое.