Сайт для предприятия "СБ-Комплект"

 

Государственное бюджетное образовательное учреждение

среднего профессионального образования

«Волгоградский экономико-технический колледж»

ПЦК информационных технологий

Специальность 230105 Программное обеспечение вычислительной техники и автоматизированных систем

Дипломный проект

Сайт «СБ-Комплект»

Пояснительная записка

ВЭТК 230105 ДП 18 ПЗ

Разработал студент группы

Кульнев Владимир Сергеевич

Руководитель проекта

Еловенко Н.А.

Консультант по экономической части

Тимошина О.В.

Нормоконтроль

Синельник Т.Е.

Консультант по ТБ и ППБ

Тимошина О.В.

Волгоград, 2012

Содержание

Введение

1 Общая часть

1.1 Техническое задание на разработку программного продукта

1.2 Анализ средств программирования

2 Специальная часть

2.1 Описание алгоритма

2.2 Текст программы с описанием

2.3 Описание процесса отладки программы

3 Организация производства

4 Экономическая часть

5 Мероприятия по технике безопасности

5.1 Общие требования

5.2 Электробезопасность при эксплуатации технических средств

5.3 Требования к помещению

5.4 Мероприятия по противопожарной безопасности

Заключение

Список литературы

Приложение A Структура сайта

Приложение B Алгоритм решения задачи

Приложение C Формы выдачи результата

Приложение D Технико-экономические показатели

Приложение E Тестирование программы

Приложение F Листинг программы

Введение

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

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

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

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

Цель дипломного проекта - разработка сайта «СБ-Комплект».

Объектом исследования является процесс разработки сайта предприятия, предмет исследования - сайт предприятия «СБ-Комплект».

Для достижения поставленной цели необходимо решить следующие задачи:

-разработать структуру проектируемого сайта;

-выбрать средства программирования, наиболее подходящие для создания сайта;

-создать сайт организации «СБ-Комплект»;

-рассчитать экономическую стоимость программного изделия;

-описать мероприятия по технике безопасности при работе с вычислительной техникой.

1 Общая часть

1.1 Техническое задание на разработку программного продукта

Полное наименование программной разработки: Сайт «СБ-Комплект», в дальнейшем именуемый как «программа». Краткое название программы - «СБ-Комплект».

Программа «СБ-Комплект» предназначена для продвижения услуг данной организации в Интернете.

Разработчик данного программного продукта - студент группы 411-П ВЭТК Кульнев Владимир Сергеевич, в дальнейшем именуемый как «разработчик».

Заказчик программного продукта - ООО «СБ-Комплект» в лице директора Каратунова А.Б.

Работа ведётся на основании задания на дипломное проектирование по специальности 230105 Программное обеспечение вычислительной техники и автоматизированных систем.

Тема и задание дипломного проекта утверждены на заседании ПЦК информационных технологий и выданы преподавателем ПЦК Еловенко Н.А.

Наименование темы разработки -сайт «СБ-Комплект».

Данная разработка является дипломным проектом по специальности 230105 «Программное обеспечение вычислительной техники и автоматизированных систем».

Данная программная разработка должна быть очень проста в освоении и рассчитана на рядовых пользователей. Удобный интуитивно понятный интерфейс в сочетании с вспомогательными рисунками будут позволять работать с программой без предварительной подготовки.

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

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

Создание данной программы преследует ряд технико-экономических целей:

-создание программного продукта, предоставляющего необходимую информацию о сервисном центре «СБ-Комлект»;

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

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

Сайт должен:

-содержать полную информацию о предоставляемых услугах организации «СБ-Комплект»;

-иметь возможность быстрого перехода в нужный раздел при помощи навигации сайта и гиперссылок;

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

-содержать адрес организации, контактные телефоны и средства обратной связи.

Структура сайта должна соответствовать Приложению A.

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

Программа должна нормально функционировать при бесперебойной работе ЭВМ. При возникновении сбоя в работе аппаратуры, восстановление нормальной работы программы должно производиться после: перезагрузки операционной системы; запуска браузера и ввода адреса сайта.

Сайт должен корректно работать на следующем или совместимым с ним оборудовании и программном обеспечении:

-Intel Pentium II 600 MHz и выше;

-64 Mb оперативной памяти;

-клавиатура, мышь;

-Интернет браузер (Internet Explorer, Mozilla Firefox и др.).

Для решения задачи использовать частично автоматизированный метод при помощи редактора для HTML Website x5 evolution.

Разработка программы должна вестись на одном из следующих языков: HTML, с использованием CSS и PHP.

Выбор других языков нецелесообразен.

Для работы сайта на стороне клиента рекомендуется операционная система Microsoft Windows XP и выше, а также стандартный web-браузер.

Технико-экономические показатели определяются в Приложении D.

Разработка программы должна выполняться по следующим этапам:

1)разработка, согласование и утверждение технического задания;

2)разработка рабочего проекта программы с комплексным тестированием;

3)составление и оформление документации к программному продукту;

4)приемка-сдача программы и программной документации;

)защита.

Проверка документации программы осуществляется руководителем дипломного проекта.

Испытания и тестирование программы должны проводиться в процессе создания программы самим разработчиком:

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

)путем пошагового исполнения программы или модуля (и непрерывного контроля значений переменных) в соответствии с набором тестовых примеров и сравнения полученных в процессе тестирования значений с контрольными значениями тестовых примеров;

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

1.2 Анализ средств программирования

Для создания сайта могут быть использованы языки программирования DHTML и PHP, а также различные «конструкторы» сайтов. Рассмотрим их подробнее.

HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-браузеров. Когда документ создан с использованием HTML, WEB-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

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

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

Язык программирования PHP - скриптовый язык программирования, созданный для генерации HTML-страниц на веб-сервере и работы с базами данных. Ныне поддерживается подавляющим большинством представителей хостингов. Входит в LAMP - «стандартный» набор для создания вебсайтов.

Программы PHP могут выполняться двумя способами: как Web-приложение HTTP-сервером или как консольные программы. Поскольку, нашей задачей является программирование web-приложений, мы преимущественно будем рассматривать первый способ.

Дело в том, что PHP, как правило, используется сугубо для программирования приложений, связанных с Интернетом. Однако, PHP можно еще использовать в качестве интерпретатора командной строки, в основном в *nix-системах. Последнее возможно при помощи CORBA и COM интерфейсов, а также при помощи расширения PHP-GTK. При таком использовании PHP возможно решение следующих задач:

-создание приложений интерактивной командной строки;

-создание кросс-платформенных GUI приложений при помощи библиотек PHP-GTK, PHP-Qt или WinBinder;

-автоматизация некоторых задач под Windows и Linux.

Язык программирования Javascript - объектно-ориентированный скриптовый язык программирования. Является диалектом языка ECMAScript.обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

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

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.

Для моего дипломного проекта основным языком программирования был выбран HTML с применением каскадных таблиц стилей.

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989-1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов - дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.

Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE>, несколько раз использованный для форматирования страницы, которую вы на даный момент читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы. С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическомо формлении.

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг.

Завершающий тэг выглядит так же, как стартовый, и отличается от него прямым слешем перед текстом внутри угловых скобок. Тэг <TITLE> говорит WEB-браузеру об использовании формата заголовка, а тэг </TITLE> - о завершении текста заголовка.

Некоторые тэги, такие, как <P> (тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.

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

Тэг заголовочной части документа должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Данный тэг представляет собой общее описание документа. Стартовый тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа.

Большинство WEB-браузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-браузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, размещается внутри <HEAD>-тэгов. Заголовок документа не появляется при отображении самого документа в окне.

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

<!-- комментарий --!>

Комментарии могут встречаться в документе где угодно и в любом количестве.

Основные тэги, присутствующие в исходном коде сайта:

-тело документа <BODY>

Тело документа должно находиться между тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа

-уровни заголовков <Hx>

Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером. Заголовок самого верхнего уровня имеет признак "1"

-тэг абзаца <P>

В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако браузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац

-центрирование элементов документа

Можно центрировать все элементы документа в окне браузера. Для этого можно использовать тэг <CENTER>

-разрыв строки <BR>

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

-формы <FORM>

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

-горизонтальные линии <HR>

Тэг вставляет в текст горизонтальную разделительную линию.

-CSS-стили

Любой элемент HTML может иметь CSS селектор. Селектор определяет стиль элемента, для которого он создан.

Псевдокласс состоит из элементов одного типа, отвечающему определенному критерию. Псевдоклассы и псевдоэлементы при определении отделяются знаком «:».

Глобальные стили задают вид элементов всего документа. Для этого используется тег <STYLE>. Он размещается в заголовке документа.

В настоящее время все чаще Web-программисты используют Dynamic HTML или DHTML.- это способ создания интерактивного веб-сайта, используя сочетание статичного языка разметки HTML, встраиваемого (и выполняемого на стороне клиента) скриптового языка JavaScript, CSS (каскадных таблиц стилей) и DOM (объектной модели документа). Он может быть использован для создания приложения в веб-браузере: например для более простой навигации или для придания интерактивности формам. Также он может служить как инструмент для создания основанных на браузере видеоигр.

DHTML - это теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками - тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных. В этом случае обычно не указывается закрывающий тег. Язык DHTML не чувствителен к регистру букв, поэтому все тэги можно задавать как прописными, так и строчными буквами. Броузер будет их однозначно интерпретировать в любом написании. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства. Атрибуты указываются в открывающем теге.

Кроме элементов, в HTML-документах есть и сущности (англ. entities) - «специальные символы». Сущности начинаются с символа амперсанда и имеют вид &имя; или &#NNNN;, где NNNN - код символа в Юникоде в десятеричной системе счисления.

Для написания сайта на языке DHTML, были использованы теги и свойства:

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

-<TITLE> - задает название страницы, отображаемое в заголовке окна браузера;

-<BODY> содержит HTML-элементы и теги, задающие свойства документа и отвечающие за то, что мы видим на экране монитора;

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

-теги физического форматирования задают вид отображения выделенных участков текста в окне браузера (<B>...</B> - жирный, <I>...</I> - курсив, <U>…</U> - подчеркивание);

-<marquee> - служит для создания бегущей строки;

-<A>…</A> - гипертекст - это способ структурирования документов путем размещения ссылок внутри одного документа или между документами. В отличие от обыкновенного текста гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Гипертекстовые ссылки среди других элементов текста обычно выделяются другим цветом и подчеркиванием. Причем может различаться цвет активной ссылки, не просмотренной ссылки и неактивной ссылки. Цвет просмотренной ссылки, цвет активной ссылки и цвет не просмотренной ссылки можно задать в качестве атрибутов тега <BODY>: Link - задает цвет не просмотренной ссылки, Alink - задает цвет активной ссылки, Vlink - задает цвет просмотренной ссылки.

Для создания таблицы используется тэг <TABLE>…</TABLE>. Внутри этих тэгов задаются строки командами <TR> ... </TR>. Наконец, внутри строк задаются клетки (ячейки) командами <TD> ... </TD>.

Атрибуты команды TABLE:

-align - left, right - выравнивание таблицы по горизонтали;

-width - число или процент - ширина таблицы по отношению к окну браузера;

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

-cellpadding - число - расстояние между содержимым ячейки и рамкой;

-cellspacing - число - расстояние между ячейками таблицы;

-bgcolor - цвет - цвет фона таблицы;

-background - файл - фоновая картинка;

-border - число - ширина линий рамки;

-bordercolor - цвет - цвет линий рамки;

-bordercolordark - цвет - цвет рамки (снизу и справа);

-bordercolorlight - цвет - светлый цвет рамки (сверху и слева).

Для создания формы в html-документе, используется тег FOR. Его атрибуты:

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

-method - определяет способ отправки;

-post - применяется в тех случаях, когда полученные из формы данные необходимо сначала обработать (например, проверить правильность заполнения формы), при этом содержимое формы при отправке кодируется);

-name - определяет имя формы. Используется при наличии нескольких форм;

-enctype - определяет способ кодировки содержимого формы при отправке.

Практически любой элемент интерфейса формы можно создать с помощью тега INPUT. Этот тег не имеет закрывающего. Атрибуты тега: name - определяет идентификационное имя, используемое при передаче содержания данной формы на сервер; type - определяет тип управляющего элемента.

Если необходимо предоставить пользователю возможность вводить в форму достаточно объемную текстовую информацию, то лучше использовать многострочное текстовое поле, которое создается тегом TEXAREA. Этот тег имеет парный. Используются следующие атрибуты данного тэга: name - задаёт название области; cols - задаёт ширину области в количестве печатных символов; rows - задаёт количество видимых строк текстового поля.

При работе с каскадными таблицами стилей используются следющие свойства:

-document - содержит ссылку к объекту документа, в котором содержится элемент;

-id - присваивает уникальное имя определенному элементу, что впоследствие помогает к нему обратиться;

-style - определяет конкретный стиль для конкретного элемента.

2 Специальная часть

2.1 Описание алгоритма

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

Чтобы запустить данный программный продукт нужно выполнить следующие шаги:

1.запустить Главную страницу (index.html);

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

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

2.2 Текст программы с описанием

Разработка дипломного проекта велась на языке гипертекстовой разметки HTML с использованием каскадных таблиц CSS.

В корневом каталоге сайта находятся графические изображения, css-стили, без которых сайт не будет правильно отображаться в браузере и файл index.html, который запускает web-сайт.

Файл index.html запускает главную страницу сайта. C этой страницы можно попасть во все разделы сайта, доступные пользователю.

Текст программы находится в Приложении F.

2.3 Описание процесса отладки программы

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

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

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

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

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

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

Таблица результатов тестирования находится в Приложении Е.

3. Организация производства

Государственное бюджетное образовательное учреждение среднего профессионального образования «Волгоградский экономико-технический колледж» П

Больше работ по теме: