РАЗРАБОТКА И СОЗДАНИЕ САЙТА "СИНЬОР ПЕКАРЬ"

·  наличие баннеров – не рекомендуется;

·  проводимая рекламная компания – любая.

Задачи:

·  учет товара, услуг, заказов, действий пользователей через web–ресурс. [1]

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

 

3. СОЗДАНИЕ НАБРОСКА САЙТА 

 

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

Таблица 1 – Требования к содержимому

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

 

Технические требования

Сайт будет реализован при помощи языка HTML – (от англ. Hyper Text Markup Language – "язык разметки гипертекста") – стандартный язык разметки документов во Всемирной паутине. Большинство web–страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. Также используются каскадные стили таблиц – css–технология описания внешнего вида документа, написанного языком разметки. Web–страница, сверстанная на css весит гораздо меньше и быстрее загружается в браузерах. Неудивительно, ведь все данные параметров отображения документа заносятся в отдельный css–файл. За счёт этого документ становится очень легким и пользователь даже может не заметить, как быстро загрузится страничка. За счёт того, что web–страница становится очень легкой и быстрозагружаемой, она гораздо быстрее индексируется поисковыми системами. Кроме того, сайт или блог, сделанный на css–вёрстке гораздо легче и удобней оптимизировать под поисковые машины и продвинуть его в ТОП. [4,5]

Требования к внешнему виду

Рынок компьютерной техники предлагает потребителям самые разные варианты отображающих устройств – мониторов. От мониторов нетбуков (около 12´) до мониторов с диагональю свыше 21´. Поэтому, невозможно предугадать, какой  техникой будет "вооружен" наш  предполагаемый посетитель. Предлагается принять в качестве ориентируемого среднее значение: монитор с диагональю 17´ (1024×768 пикселей), разрешением 72 px/in и  ориентироваться при верстке  страниц сайта на эти значения. [2]

Требования к функциям сайта

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

 

3.2 Разработка рабочего  наброска сайта

Группировка элементов

Я хочу сгруппировать элементы содержимого в разделы.

Раздел 1. Выпечка из песочного  теста.

Раздел 2. Выпечка из бисквитного  теста.

Раздел 3. Выпечка из дрожжевого теста.

Раздел 4. Выпечка из слоеного теста.

Раздел 5. Блюдо дня.

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

Блюдо дня особенная  рубрика, в которую будут попадать рецепты наиболее интересные автору сайта.

Ограничение количества уровней в  каждом разделе

Моя навигационная панель состоит из 6 кнопок: Главная, Выпечка  из песочного теста, Выпечка из бисквитного  теста, выпечка из дрожжевого теста, Выпечка из слоеного теста и Рецепт дня.

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

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

Главная ««««

Выпечка из песочного теста «««««

Выпечка из бисквитного  теста «««««

Выпечка из дрожжевого теста «««««

Выпечка из слоеного теста «««««

Блюдо дня ««« 

 

3.3 Создание карты сайта

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

Рисунок 11 – Блок – схема сайта

 

4. РАЗРАБОТКА НАБОРОВ МАКЕТОВ  СТРАНИЦ 

 

Макет – это набор правил, по которым располагаются элементы страницы сайта. Таким образом, макет  – это основа верстки, – тот  каркас, на котором собираются элементы дизайна и информационное наполнение страницы.

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

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

Моя главная задача состоит в  том, чтобы продумать дизайн начальной  страницы и страниц уровня, который  позволяет связать воедино все  страницы сайта и с максимальной эффективностью использовать возможности Internet. [2] 

 

4.1 Определение функциональных  зон страниц сайта

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

Что такое контент?

Контент сайта – это информация и изображения, которые ищет посетитель сайта.

Контент (от англ. content – содержание). Под "контентом" в широком смысле понимают собственно наполнение сайта. Контент сайта соотносится с  дизайном, как содержание с формой.

В более узком смысле слова контент  сайта – это материалы, размещенные  на нем: в основном тексты, а также  картинки и музыка.

Для чего же нужно разбивать сайт на контент–зоны?

Каждая контент–зона выполняет  свою роль:

·  логотип – предоставляет визуальную информацию;

·  название сайта – это собственно имя ресурса и его основное обозначение деятельности;

·  меню навигации – позволяет пользователю перемещаться по WEB–сайту;

·  поле ввода информации – это главная текстовая(информационная)

·  часть, раскрывающая суть темы;

·  графика – позволяет визуально представить излагаемый материал;

·  рейтинг – помогает установить место, занимаемое в списке сайтов – аналогов;

·  координаты – это информация о компании–разработчике данного ресурса.

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

Представляю свой вариант структуры  страниц сайта.

 

Рисунок 12 – Схема размещения элементов  страницы–шаблона главной страницы

Рисунок 13 – Схема размещения элементов  страницы–шаблона второстепенной страницы  

 

4.2 Нахождение идеи пластического  решения, определение колорита  страниц

Цветовые схемы при создании web–сайта

Теперь я хочу поговорить о цвете. Символика цвета имеет давнюю историю. Люди с незапамятных времен придавали особое значение чтению "языка красок", что нашло отражение в древних мифах, народных преданиях, сказках, различных религиозных и мистических учениях. Так, в астрологии, лучи Солнца, разложенные в спектр и дающие 7 цветов, соответствовали 7 основным планетам: красный – цвет Марса, синий – цвет Венеры, желтый – цвет Меркурия, зеленый – цвет Сатурна, пурпурный – цвет Юпитера, оранжевый – цвет Солнца, фиолетовый – цвет Луны. При этом краски символизировали не только планеты и их влияние, но и социальное положение людей, их различные психологические состояния. Это проявлялось в подборе одежды определенных цветов, народных поговорках, обрядах и т.д. У разных народов сложилась определенная символика красок, дошедшая до наших дней.

Концепция цвета была выработана Гетте: все темные цвета успокаивают, светлые  возбуждают. Из тьмы выходит первым синий цвет, из света – желтый. Это основные цвета, из них идут остальные. Цвета могут оказывать физическое (очень мимолетное) и психическое (при долгом взгляде на определенный предмет) воздействие.

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

Цвет оказывает влияние на кровяное давление – оно повышается от синего к зеленому, к желтому и красному (в совокупности и по отдельности), обратный процесс при обратном предъявлении.

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

Все цвета делятся по типу движения:

·  эксцентрические (желтый);

·  концентрические (синий квадрат вызывает тревогу).

Каждый цвет имеет множество  значений. Существует взаимодействие цвета и времени – каждая эпоха  выбирает свой цвет: серый – пуританство  и послевоенная Британия, Древний  Рим – пурпур, как символ власти. Очень большое разнообразие цветов – нация процветает.

Существует также школа исцеления  с помощью цвета. Впервые над  этим задумались древние греки: проходя  через окно храма цвет разбивается  на спектр, таким образом, человек  вбирал тот цвет, который хотел. В  Древнем Китае на солнце лежали в  красном шелке – излечение  следов оспы. В 18 веке в Европе были распространены цветные витражи.

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

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

Мой сайт будет выполнен в теплой гамме.

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

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

Рисунок 14 – Фон сайта

 

Кнопки панели навигации выполнены  желтым цветом, текст красным.

Желтый – олицетворяет ум, влияние  доминанта. Он самый гибкий, везде  проникает, помогает преодолеть трудности, способствует концентрации внимания.

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

Сочетание красно–желтого выражает импульсивность, т.е. моему посетителю захочется скорее "пробежаться" по всем ссылкам.

Рисунок 15 – Кнопки навигации сайта

Цвет текста – красно коричневый. Красно – коричневый отличается спокойной  уверенностью в себе и энтузиазмом, которым так полны мои посетители!