Разработка веб-сайта для кулинаров с применением современных веб-технологий

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

1.3. Обоснование типа разрабатываемого веб-узла
Сайты по своему предназначению, и по своей целевой аудитории бывают разных типов. Для того чтобы определиться к какому типу будет относиться разрабатываемый сайт, нужно ознакомится с типами веб-узлов.
Сайт визитка
Несложный сайт, содержащий общую информацию о компании и видах, оказываемых услуг. Краткий и компактный, прямо как визитка.
Цель – представить компанию в сети интернете.
…

1.4. Программный инструментарий

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

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

2.1 Перечень требований по содержимому и функциям веб-сайта

Таблица 1 – Требования к содержимому
Наименование содержимого
Описание
Тип содержимого
Формат содержимого
Автор
Автор приветствует своего посетителя
Текст
Документ Microsoft Word
Изображение автора
Фотография автора
Изображение
Jpeg–файл
Изображение супа
Фотография молочной лапши
Изображение
Jpeg–фаил
Виды супа
Как сделать дома молочную лапшу с мёдом и ванилью
Текст
Документ Microsoft Word
Картинки первого и второго блюда
Изображения примеров теста
Изображения
Jpeg–фаил, png–фаил
Первое и второе блюдо
В каждом разделе несколько гиперссылок
Текст
Документ Microsoft Word
Рецепты первого блюда
Описание приготовления 3 рецептов
Текст
Документ Microsoft Word
Картинка следов
Изображение следов
Текст
Документ Microsoft Word
Рецепты второго блюда
Описание приготовления 2 рецептов
Текст
Документ Microsoft Word

Технические требования
Сайт будет реализован при помощи языка HTML –язык разметки документов гипертекста.
…

2.2 Разработка рабочего наброска сайта с созданием карты сайта и разработка модульной сетки на основе утвержденного макета
Группировка элементов
Сгрупируем элементы содержимого в разделы.
Раздел 1. Выпечка из песочного теста.
Раздел 1. Главная.
Раздел 3. О нас.
Раздел 4. Рецепты первого блюда
Раздел 5. Рецепты второго блюд
Раздел 6. Контакты
В каждой тематическом разделе будут предоставляться информация по работе сайта, его геолокации, и рецептам
Ограничение количества уровней в каждом разделе
Навигационная панель состоит из 5 кнопок: Главная, О нас, Рецепт первого блюда, Рецепт второго блюда, Контакты.
В каждом разделе первого блюда будет по 3 гиперссылки, которые позволят выбрать пользователю наиболее понравившийся рецепт или информацию о нас. Этот рецепт откроется в новом окне.

Набросок, для веб–сайта, можно преобразовать непосредственно в карту сайта

Модульная сетка представляет собой набор невидимых направляющих, вдоль которых располагаются элементы веб–страницы.
…

2.3 Разработка руководства по стилю
В данном разделе указанно в виде таблицы руководство по стилю, которое включает в себя следующие элементы:
заголовки и подзаголовки;
основной текст;
ссылки;
форматирование таблиц;
цвет фона;
размер графических элементов.
Таблица 2 – Руководство по стилю графического и HTML–текста для Web–сайта
Style (Стиль)
Example
Font settings
Headlines (Заголовок)
Чаудер Аляска
Графический текст. Cambria Bold Курсив, 8 pt, Color# 9f193e
Рецепт первого блюда(Подзаголовок)
Состав: 300 г яичной лапши
3 яйца
1 средний пучок зеленого или ш нитт- лука
2 ст. л. сырых кунжутных семян
2 ст. л. соевого соуса
1 ч. л. рисового или белого винного уксуса
растительное масло
темное кунжутное масло
соль, свежемолотый черный перец
HTML текст. Arial, size 14 pt, Color# 9f193e
Body text
300 г яичной лапши
3 яйца
1 средний пучок зеленого или ш нитт- лука
2 ст. л. сырых кунжутных семян
2 ст. л. соевого соуса
1 ч. л.
…

2.4 Оптимизация контента сайта
Рассмотрев оптимизацию текстового и графического контента сайта, разделяем оптимизацию на две части: текстовая и графическая оптимизация.
Текстовая оптимизация – текст был взят из кулинарных книг. В большинстве своём изменения не вводились. При подготовке текста к верстке были убраны плохо понимающиеся слова, которые могут встретиться новичку кулинару, разбиты на абзацы, чтобы он воспринимался легче. Была создана удобная навигация для простоты перемещения по страницам. Название навигационных кнопок отражают суть раздела. Для примера, возьмём на рассмотрение текст “до” и “после” оптимизации.
Исходный текст:
Одна из задач Направления “Медиа–Холдинг” – это продвижение сайтов Системы в Интернет, опыт работы в этой области – 3 года. Мы готовы предложить Структурам и Направлениям Системы только качественные и недорогие услуги в этом вопросе.
…

2.7 Структура сайта