84816

РАЗРАБОТКА И АДАПТАЦИЯ САЙТА «ИНТЕГРА» для ИП Нафиков

Курсовая

Информатика, кибернетика и программирование

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

Русский

2015-03-22

141.79 KB

8 чел.

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РЕСПУБЛИКИ БАШКОРТОСТАН

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

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

стерлитамакския многопрофильный профессиональный колледж

(ГАОУ СПО СМПК)

Курсовая работа

РАЗРАБОТКА И АДАПТАЦИЯ САЙТА

«ИНТЕГРА» для ИП Нафиков

Выполнил

студент IV курса группы № 416

специальности230701Прикладная

информатика в дизайне

                                           Трофимов Антон Георгиевич

Руководитель

Фесенко Олеся Васильевна

Работа допущена к защите

«____»_________________2014г.

Председатель П(Ц)К

математики и информатика:

___________  А.В. Бирюков

Стерлитамак 2014г.

ПОЯСНИТЕЛЬНАЯ ЗАПИСКА

АННОТАЦИЯ

Объем пояснительной записки  40 страниц.

Количество иллюстрации 37 рисунка, 2 таблицы.

Количество используемых источников 10.

Ключевые слова: логотип сайта, макет сайта,раздел, язык программирования php, javascript, html.


СОДЕРЖАНИЕ

АННОТАЦИЯ 2

ВВЕДЕНИЕ..............................................................................................................4

ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ СОЗДАНИЯ САЙТА «ИНТЕГРА»............................................................................................................5

1.1. Деятельность организации «ИП Нафиков»...............................................5

1.2. Анализ технического задания и возможные способы реализации поставленной задачи...............................................................................................5 

1.3. Выбор инструментальных программных средств.....................................5

ГЛАВА 2. ПРОЕКТИРОВАНИЕ ИНФОРМАЦИОННОЙ ЧАСТИ САЙТА «ИНТЕГРА»............................................................................................................6

2.1.Структура программного продукта Web – сайта......................................7

2.2. Листинг Html-кода.....................................................................................10

ЗАКЛЮЧЕНИЕ.....................................................................................................12

СПИСОК ИПОЛЬЗОВАННЫХ ИСТОЧНИКОВ...............................................14


ВВЕДЕНИЕ

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

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

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

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

Цель исследования: создать web̶-сайт «ИНТЕГРА» для ИП Нафиков.

Задача исследования:

1. Провести анализ литературы по теме исследования

2. Рассмотреть виды и структуру сайтов;

3. Разработать сайт «ИНТЕГРА» для организации ИП Нафиков

Область применения: Данный сайт будет создан и предназначен для организации ИП Нафиков.

Целевая аудитория: клиенты организации, сотрудники данной организации.


ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ СОЗДАНИЯ САЙТА «ИНТЕГРА».

1.1. Деятельность организации ИП Нафиков

Для начала над созданием сайта «ИНТЕГРА» ИП Нафиков необходимо узнать для чего он нужен и деятельность организация.

Основными направлением ИП Нафиков проектирование, монтаж, пуско-наладка и обслуживание систем.(описание побольше)

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

1.2. Анализ технического задания и возможные способы реализации поставленной задачи

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

Сайты условно можно разделить на несколько категорий: 

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

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

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

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

По доступности сайты бывают:

Открытые – на такие сайты может зайти любой желающий;

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

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

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

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

Типы макетов:

Одноколонный макет

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

Такой дизайн отличает минимализм оформления. Здесь основное внимание уделяется содержательной части, а дизайн, как таковой, практически отсутствует. В основном такой академический дизайн можно встретить в научной среде.

Рассмотрим типичную схему одноколонной модульной сетки. Обычно здесь присутствуют четыре основных блока — это заголовок страницы, навигация по сайту, основной текст, контактная и правовая информация в самом низу страницы. При большом объеме основного текста, когда высота страницы очень большая, то внизу дублируют блок навигации по сайту или ставят ссылку «Наверх».

Рисунок 1. Одноколонный макет

Двухколонный макет

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

Рисунок 2. Двухколонный макет

Трехколонный макет

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

Рисунок 3. Трехколонный макет

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

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

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

Среди самых известных программ для создания сайтов являются:

1. Adobe Dremweaver;

2. Конструктор сайта Wix;

3. WebSite X5 Evolution 10.1.8.52;

4. Бесплатная система Joomla.

Adobe Dremweaver CC. (Рисунок 4)

Рисунок 4. логотип программы AdobeDremweaverCC

AdobeDreamweaverCС - новая версия программы для создания профессиональных веб-сайтов. Программное обеспечение для веб-дизайна

AdobeDreamweaverCС содержит интуитивно понятный визуальный интерфейс для создания и редактирования веб-сайтов и мобильных приложений. Используйте «резиновые макеты» (FluidGridLayouts) с межплатформенной поддержкой для создания страниц. Просматривайте макеты в панели «многоэкранный просмотр» перед публикацией.

Adobe Dreamweaver CC входит в состав Creative Cloud. Поэтому его пользователям доступны все последние обновления, а доступ к новым версиям предоставляется с момента их выпуска. Улучшите свои навыки и освойте новые инструменты благодаря большой и постоянно пополняемой коллекции обучающих видео. Благодаря интеграции с Behance можно обмениваться своими проектами с другими пользователями и моментально получать отзывы о своей работе от дизайнеров со всего мира.

Плюсы

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

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

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

Веб-шрифты Edge. Создавайте яркое оформление текста. Используйте большую и постоянно расширяющуюся библиотеку веб-шрифтов AdobeEdgeWebFontsLibrary на основе AdobeTypekit. Добавляйте веб-шрифты прямо из инструментов Dreamweaver и Edge. Добавляйте высокоточную, яркую типографику, создавая страницы, которые будут загружаться невероятно быстро.

Поддержка современных платформ. Создавайте проекты, используя технологии HTML, CSS и Java. Разрабатывайте динамические страницы на языке PHP. Более эффективно создавайте код, используя улучшенные подсказки по коду и выделение синтаксических конструкций цветом.

Wix. (Рисунок 5)

Рисунок 5. Логотип конструктора сайта Wix

Wix - шикарный конструктор с большими возможностями по оформлению сайта и очень лояльными условиями.

Этот конструктор ориентируется на главным образом на тех пользователей, которым нужны сайты на HTML5. Wix — один из ведущих конструкторов сайтов с технологией drag-and-drop, в котором предложена функциональность использования HTML5. Для того, чтобы создать сайт с помощью этого конструктора, пользователю не нужны даже базовые навыки веб-программирования. Сервис предлагает до 500 Мб дискового пространства для хостинга, десятки цветовых схем оформления, встроенный счетчик посещаемости GoogleAnalytics.

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

Кроме того, имеется сервис Wix App Market — магазин виджетов, плагинов и приложений, которые можно подключить к своему будущему сайту. Приложения есть как платные, так и бесплатные. Если хорошо покопаться в этом разнообразии, то можно будет без проблем собрать на основе Wix полноценный интернет-магазин, с инструментами приёма платежей, обработки заказов, формами контактов и т.д. У сайтов, построенных с помощью Wix, будет актуальный современный дизайн и довольно широкие возможности по части продвижения. Эта платформа неплохо подходит для создания персональных веб-страничек, небольших профильных онлайн-магазинов, мобильных версий существующих сайтов.

WebSiteX5 Evolution 10.1.8.52.(Рисунок 6)


Рисунок 6. Логотип программы WebSiteX5 Evolution 10.1.8.52

 WebSite X5 - это мощная программа, которая за 5 простых интуитивно понятных шагов позволяет создавать профессиональные веб-сайты и интернет-магазины.

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

Ключевые особенности и функции программы

создаёт высококачественные веб-сайты и фотоальбомы;

создаёт профессиональные интернет-магазины;

создаёт блоги с подкастами и видеокастами;

система поиска по сайту;

включает в себя наборы пресетов для платежей по кредитным картам;

редактор 3D-кнопок;

встроенный FTP-клиент;

встроенный графический редактор с набором фильтров, масок и рамок;

создаёт валидный XHTML, совместимый со всеми популярными браузерами;

простота использования;

не требует навыков программирования и знания  HTML;

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

онлайн-руководство, доступное также в виде PDF-версии и видео-уроки;

вставка содержимого методом drag 'n' drop;

встроенный Image Compressor для автоматического ресайзинга и сжатия изображений для Интернета и многие другие возможности.

Joomla. (Рисунок 7)

Рисунок 7. Логотип программы Joomla.

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

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

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


2. Проектная часть

Продуктом творческой деятельности является разработанный web-сайт для организации ИП Нафиков С.Р. в соответствии с местом прохождения производственной практики по ПМ. 02. Разработка и адаптация ПО отраслевой направленности.

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

  1.  Изучение вопроса;
  2.  Проектирование, разработка концепции;
  3.  Разработка дизайна;
  4.  Создание сайта;
  5.  Запуск сайта;
  6.  Поддержка сайта;

Во время прохождения производственной практики  по разработке, внедрению и адаптации ПО отраслевой направленности были пройдены этапы: изучения вопроса; проектирование, разработки концепции сайта;  разработка дизайна;  создание сайта. Для этого  разработано техническое задание,  которое было утверждено руководителем организации ИП Нафиков С.Р.;

По составленному техническому заданию сайт включает в себя разделы.  

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

Главная страница

Деятельность

О компании

Рисунок 8. Структура сайта


2.1. Структура программного продукта Web – сайта

Функциональные возможности сайта:

Навигация

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

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

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

Наполнение сайта (контент)

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

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

В рамках разработки сайта Исполнитель должен обеспечить ввод представленной Заказчиком статической информации в создаваемые динамические разделы (с учетом предусмотренной настоящим ТЗ функциональности). Текстовая информация должна предоставляться Заказчиком в виде отдельных файлов формата MS Word 2003 (DOC). Названия файлов должны соответствовать названиям разделов. Перед передачей текстов Исполнителю они должны быть вычитаны и отредактированы.  Графический материал должен предоставляться в формате JPG. По возможности, названия графических файлов должны отражать содержимое файла. Изображения для галерей и разделов сайта должны размещаться в папках или архивах с названиями соответственно галерее или разделу сайта, для которых они предназначаются.

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

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

Система навигации (карта сайта)

Взаимосвязь между разделами и подразделами сайта (карта сайта) представлена на рисунке 9.

Главная страница содержит меню:

  1.  Главная
  2.  Деятельность
  3.  О компании

Рисунок 9 Карта главной страницы

Функциональные возможности разделов

Главная страница.

На главной странице представлена следующая информация:

- содержать графическую часть

- навигационное меню сайта

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

Деятельность.

В разделе «Деятельность»» представлена информация о деятельности работы компании. На этой странице также можно разместить иллюстрации.

«Деятельность» — это типовая статическая страница. Она может редактироваться и дополняться в административной части сайта.

О компании.

В разделе «О компании» представлена более расширенная информация о компании.

«О компании» - это типовая статическая страница. Она может редактироваться и дополняться в административной части сайта.

Достоинства спроектированного сайта организации:

2.2. Листинг html-кода

…………………


ЗАКЛЮЧЕНИЕ

 (должно содержать краткие выводы по результатам выполнения задания, Объем заключения не должен превышать 2-3 страниц.)


СПИСОК ИПОЛЬЗОВАННЫХ ИСТОЧНИКОВ


 

А также другие работы, которые могут Вас заинтересовать

3212. Государственная санитарно-эпидемиологическая служба 26.38 KB
  Каждое общество стремится защитить себя. Защитить от врагов, недостаточно добропорядочных своих граждан, от болезней, от напастей и от всякого рода опасности. Опасности, которая в наше время приобретает все больший размах. Она может принима...
3213. Человек как уникальный вид живой природы 59.5 KB
  Человек относится к царству животных, так как он использует готовые вещества для питания, то есть гетеротрофен. Его клетки не имеют целлюлозных оболочек, нет хлоропластов- то есть состоит из типично животных клеток...
3214. Бизнес-план обеспечения благоустройства сельского населения как механизм развития села на примере РСХПКК Саха Кредит РС(Я) 7.04 MB
  Введение С общеэкономической точки зрения планирование – это механизм, который заменяет цены и рынок. В рамках рыночной системы главным координатором действий ее участников являются цены. Именно цены определяют выгодное для продавцов и покупате...
3215. РЕДУКТОР КОСОЗУБИЙ ОДНОСТУПІНЧАТИЙ 550 KB
  Редуктором називають механізм, який складається з зубчастих або черв\'ячних передач, виконаний у вигляді окремого агрегату і служить для передачі обертання від вала двигуна до вала робочої машини. Кінематична схема приводу може включати, окрім редуктора, відкриті зубчасті передачі, ланцюгові або пасові передачі.
3216. Проектирование привода ленточного транспортера для конвейера 1002 KB
  Задание на курсовой проект. Кинематический расчет привода. Выбор электродвигателя. Мощность на выходе. Требуемая мощность электродвигателя. Частота вращения приводного вала редуктора. Определение обще...
3217. Совершенствование организации оценки и аттестации персонала на примере районного отдела народного образования г. Данкова Липецкой области 1.64 MB
  Введение Глава 1. Теоретико – методологические основы организации оценки и аттестации персонала 1.1. Деловая оценка персонала: подходы, понятие, виды, этапы 1.2. Методы деловой оценки персонала 1.3. Организация процесса аттестации персонала в г...
3218. Проектирование детали Вал-шестерня и ее технологические характеристики 959 KB
  Введение. Машиностроение – важнейшая отрасль промышленности. Его продукция – машины различного назначения поставляются всем отраслям народного хозяйства. Рост промышленности в значительной степени зависит от уровня развития машиностроения....
3219. Монтаж санитарно-технических кабин. Кладка столбов и простенков. Сварка швов в нижнем положение. 696.22 KB
  Монтаж санитарно-технических кабин. 1. Общая характеристика санитарно-технической кабины. В настоящее время в связи с массовым строительством крупноблочных и крупнопанельных зданий решают по-новому вопросы индустриализации монтажа санитарно-технич...
3220. Проект девятиэтажного жилого дома с подвалом 48.34 KB
  Введение В данной курсовой работе разработан проект девятиэтажного жилого дома с подвалом. Проект разработан в соответствии с заданием на проектирование. Объемно-планировочное конструкционное решение здания соответствует требованиям нормативной доку...