Сайт типографии

Введение

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

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

     На  сегодняшний день World Wide Web – глобальная компьютерная сеть. Она содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к  этой информации посредством использования  технологии Internet.

     Создание  сайта в Интернете обеспечивает новые возможности по расширению, информационной поддержке или рекламе  бизнеса.

     Сайт - это (от англ. site - участок) совокупность логично объединенных страниц в единое целое, которые представляют собой рекламно-информационные ресурсы, объединенные общей идеей и общим дизайном. А еще это набор документов в формате HTML, графических файлов, мультимедиа данных, программ связанных между собой по смыслу , доступных по протоколу HTTP, которые отличаются единством оформления и тематики.

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

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

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

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

     Качественный  сайт является основным информационным ресурсом всей компании.

       При помощи сайта можно:

       – передать всю необходимую информацию о товарах и услугах, в том числе самые последние новости;

       – наладить прямой контакт  с клиентом, начиная от продаж в интернет-магазине и заканчивая сервисной информационной поддержкой (например, в форуме);

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

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

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

     В своем дипломном проекте  я выяснила, что необходимо знать и уметь для создания Web-страницы, какое программное обеспечение является инструментарием создания сайтов и как его эффективно использовать, и разработала сайт предприятия ОАО «Ковылкинская типография».

1    Общий раздел

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

     В данном дипломном проекте была поставлена задача разработать программный продукт – сайт ОАО «Ковылкинская типография».

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

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

     Официальной классификации  интернет-сайтов не существует. Тем не менее, большинство дизайн-студий группирует проекты некоторым образом. Вот наиболее распространенная классификация:

• визитка;
• витрина;
• интернет-магазин;
• корпоративное представительство;
• информационный проект;
• портал.

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

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

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

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

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

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

     Структура сайта должна определяться еще на первых этапах создания проекта до начала разработки дизайна.

     Существуют  следующие виды структур:

• линейная структура – это самая простая структура сайта. Веб-страницы идут одна за другой, и пользователь должен просматривать их как слайд-шоу. В линейной структуре не существует разделения контента на уровни. Все страницы на таких сайтах равноправны, и их должен увидеть каждый посетитель.
• линейная структура с альтернативами и вариантами – основой данной структуры является простое линейное размещение веб-страниц. Однако на сайтах, построенных по этому принципу, посетители могут проявить некоторую инициативу, облегчив для себя поиск нужной информации. Под альтернативами в данном случае понимается выбор между двумя ветками. Линейная структура с альтернативами и вариантами удобна в том плане, что с одной стороны она позволяет веб-мастерам контролировать деятельность посетителей, а с другой стороны пользователям облегчён доступ к нужной именно им информации.
• линейная структура с ответвлениями – это контролируемая структура, которая напоминает дорогу с ответвляющимися от нее время от времени тупиковыми тропинками. Главным преимуществом рассматриваемой структуры является то, что к ней легко перейти с обычного линейного размещения веб-страниц.
• древовидная структура – самый универсальный способ размещения веб-страниц. Она подходит для создания практически любых типов сайтов. Пользователь при заходе на заглавную страницу оказывается перед выбором, куда идти дальше. После перехода в нужный раздел, он подбирает необходимый подраздел и т. п.
• решетчатая структура – в ней все страницы также размещаются в различных ветках. Но у пользователя есть возможность перемещаться по ним не только вертикально (вверх-вниз) но и горизонтально (то есть между ветками на разных уровнях). Используется решетка в основном только в каталогах. При этом перемещение между ветками на глубинных уровнях осуществляется с помощью отсылок на рубрики в других разделах.

Наиболее  распространены три модели проектирования сайта:

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

рисунке 1.

Рисунок 1 – Каскадная модель 

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

Рисунок 2 – Спиральная модель 

     Microsoft Solutions Framework – модель для разработки сложных проектов. Суть Microsoft Solutions Framework заключается в следующем. Работа над проектом состоит из четырех этапов – анализа, планирования, разработки и стабилизации. Причем каждый из них должен достигать определенного заранее результата. Кроме того, в конце этапа обычно составляется специальный документ, в котором подробно описывается состояние проекта на данный момент времени. После прохождения полного цикла разработка возвращается на первый шаг. И так повторяется несколько раз. Правда, в отличие от модели «Спираль», здесь невозможно бесконечное «вращение» проекта, поскольку цели, необходимые для окончания каждого этапа, четко указаны.

     Модель  работы над проектом Microsoft Solutions Framework представлена на рисунке 3.

Рисунок 3 – Microsoft Solutions Framework 

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

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

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

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

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

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

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

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

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

На этапе  постановки задачи были  решены следующие  вопросы:

• определена целевая аудитория, на которую рассчитывается создание данного проекта;
• определены основные цели и задачи проекта;
• создана  структура сайта.

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

      1.2 Цель разработки 

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

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

     Целью данного дипломного проекта является разработка сайта ОАО «Ковылкинская типография». 

     Задачи  сайта организации:

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

Для реализации поставленной цели, мной были определены следующие

задачи:

• рассмотреть этапы разработки WEB-сайта.

• описать язык HTML и JavaScript для создания сайта.
• изучить структуру HTML.

• рассмотреть основные области использования языка JavaScript при создании HTML страниц.

     Для достижения  цели необходимо:

• изучить теоретический материал по созданию и проектированию Web-страниц;
• составить алгоритм;
• определить тип сайта, разработать техническое задание и структуру;
• разработать макет дизайна сайта;
• осуществить HTML-CSS вёрстку;
• протестировать сайт и исправить возникшие ошибки;
• зарегистрировать доменное имя сайта;
• разместить сайт  в сети Интернет;

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

1.3 Характеристика  и обоснование  выбранного языка  программирования 

     Существуют  два типа сайтов с точки зрения программирования – динамические и  статические.

     Статический сайт –  используется стандартный  код HTML, адрес страницы статический  и простой, например page.html. Данный тип  свойственен более простому типу сайтов, где не требуется постоянное добавление и обновление большого количества информации. Это вполне подходит для  сайта частной компании.

     Динамический  сайт – свойственен более сложному типу сайтов, например крупные сайты, новостные ленты, порталы, где требуется  постоянное добавление и обновление большого количества информации. Используются технологии ASP, PHP, CGI, Perl и другие. Информация хранится в SQL базе данных, а программирование позволяет лишь доступ к динамике обновления и добавления страниц.

     Статический сайт лучше перерабатывается поисковыми машинами, поэтому в качестве метода проектирования я выбрала язык разметки гипертекста HTML 4.0.

      Термин  HTML (Hyper Text Markup Language) означает «язык разметки гипертекста». Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, браузеры, разнообразные программные продукты, компакт-диски, обучающие курсы, дизайн и многое другое. HTML – своеобразная противоположность сложным языкам программирования, известным только специалистам.

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

     HTML, как основа создания WEB-страниц, имеет прямое отношение и к новому направлению изобразительного искусства – WEB-дизайн. Художнику в Интернете недостаточно просто нарисовать красивые картинки, оригинальный логотип, создать новый фирменный стиль. Он должен еще поместить все это в Сети, продумать связь между WEB-страницами, чтобы все двигалось, откликалась на действие пользователя, поражало воображение, вызывало желание создать что-нибудь свое, оригинальное в этой области.

     Язык HTML существует в нескольких вариантах  и продолжает развиваться, но конструкции HTML вероятнее всего будут использоваться и в дальнейшем. Работа с HTML–это способ усвоить особенности создания документов в стандартизированном  языке, используя расширения, только когда это действительно необходимо.

     Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использоваться любой текстовый редактор.

     Обычно HTML-документ – это файл с расширением .html или .htm, в котором текст размечен HTML-тегами (англ. tag -  специальные  встроенные указания).

     Символы, заключенные в угловые скобки <> являются HTML командами, по которым  браузер распознает, как следует  преобразовать части текста, заключенные  между этими командами.