Файл: Разработка сайта кинотеатра «Мороз».pdf

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

Что представляет собой создание персонального сайта? Это интерактивные сайты, которые в своей структуре имеют различные форумы, разделы обратной связи… Посвящены они, как правило, какой-то выдающейся личности, отсюда и получили свое название – персональные сайты.

1.3 Этапы проектирования WEB-сайтов

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

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

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

При этом дизайнер должен учитывать ограничения стандартов html (не создавать дизайн, который затем не сможет быть реализован стандартными средствами html). Исключение составляет Flash-дизайн.

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

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

Программирование. Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS — системы управления сайтом. Веб-разработчики часто называют CMS «движком».

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

Завершающим этапом разработки сайта под ключ является конечно же тестирование. Веб-дизайн сайта должен адекватно выглядеть в различных браузерах, особенно в браузерах Internet Explorer, Firefox, Safari, Chrome и Opera.

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

Сроки контролирует менеджер проекта. Так же на этом этапе привлекают к работе дизайнера, чтобы он провел авторский надзор.

Размещение сайта в Интернет. Файлы сайта размещают на сервере провайдера и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей.

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

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

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

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

2.ПРАКТИЧЕСКАЯ ЧАСТЬ

2.1 Постановка задачи

Необходимо разработать сайт «кинотеатр». Сайт должен быть выполнен, соблюдая следующие правила:

1) Общее количество разделов сайта должно быть не менее шести. Уровень вложенности - не менее трех.

2) язык разметки (написания) сайта –XHTML,HTML;

3) безошибочная работа, отображение в браузерах: InternetExplorer, MozillaFirefox, Opera (Chrome,Safari);

4) наличие страницы "Карта сайта";

5) все страницы сайта должны быть наполнены осмысленной информацией;

Задачи сайта кинотеатр:

- предоставление информации о фильмах. Дата выхода, предварительный обзор;

- информация о сеансах, цена билета;

- рекламная.

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

2.2 Разработка контента и оформление WEB-сайта

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

Структура любого сайта имеет вид:

<html>

<head>

<title>Оглавление страницы (в верхнем левом углу)</title>

</head>

<body>

Body (англ.) – тело, именно сюда записываются данные (текст, картинки, видео), которые будут отображаться в браузере

</body>

</html>

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

рис1. Меню сайта кинотеатр

рис. 2 Структура сайта

Данная иерархия сайта может развиваться в любом направлении, посредством добавления новых разделов, иерархия выполнена в соответствии с заданием.

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

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

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

Пример меню «главной страницы» сайта «кинотеатр Дружба»:

Главная.  Приветствие и логотип сайта .

Репертуар. Фильмы которые выйдут скоро, здесь же размещаются рецензии на них, даты выхода.

Расписание сеансов. В данном разделе можно посмотреть в какое время и в каком зале будет идти интересующий Вас фильм.

Цены. Здесь вы можете определится с ценой и соответственно с форматом выбранного фильма.

Прокат dvd. Коротко об одной из услуг нашего кинотеатра.

Карта сайта. Не прилагая никаких усилия, вы сможете сразу выйти на нужную страницу.

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

 Другие разделы добавляются по необходимости, это могут быть: зарубежное кино/отечественные фильмы, боевик/комедия, многосерийные/короткометражные, возможна «группировка» фильмов по годам/актерам и многое другое.

2.3 Теги для структурирования и форматирования текста

HTML (HyperTextMarkupLanguage) — «язык гипертекстовой разметки»— стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа, в удобной для человека форме.

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в1989—1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки.

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

Структурирование текста

<p>

Тег <p> создает новый параграф. Два или более тега <p>, идущих подряд, заменяются одним. Закрывающий парный тег необязателен.

Пример:

<palign="center"> далее текст

Атрибуты

align

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

• center – по центру

• left – по левому краю

• right – по правому краю

title

Всплывающая подсказка

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

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

Атрибуты

align

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

• center – по центру

• left – по левому краю

• right – по правому краю

title

Всплывающая подсказка

<pre>

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

<hr>

Тег <hr> добавляет в HTML документ горизонтальную линию. Перед и после линии помещается пустая строка. Закрывающий тег не требуется.

Атрибуты

size

Устанавливает высоту (толщину) линии в пикселах.

width

Устанавливает ширину линии в пикселах или процентах.

noshade

Создает линию без тени. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной.