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 страниц.)


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


 

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

14933. Қазақстанның тәуелсіздігі Түркияның қоғамдық пікірінде 77.5 KB
  Қазақстанның тәуелсіздігі Түркияның қоғамдық пікірінде Абдуллах Гүндоғду Жафер Гүлер Кеңес Одағының ыдырау үрдісінің бастамасы деп саналатын Қазақстандағы 1986 жылғы желтоқсан оқиғаларының орын алуы Түркиядағы толқыныстардың тууына негіз болған еді. Түркия үшін ...
14934. Қырғызстандағы Қазақтар 56.5 KB
  Серікқұл Қосақов Баласағұн атындағы Қырғыз ұлттық университетінің конституциялық құқық кафедрасының меңгерушісі профессор Қырғыз Республикасы Конституциясын жазған авторлардың бірі ҚЫРҒЫЗСТАНДАҒЫ ҚАЗАҚТАР Қазақтар әлемнің қайсы бөлігінде өмір с...
14935. Қытайдың батыс бөлікті игеру стратегиясы және оның Қазақстан-Қытай қатынасына әсері 64.5 KB
  Қытайдың батыс бөлікті игеру стратегиясы және оның ҚазақстанҚытай қатынасына әсері Н.Мұқаметханұлы Қазақстан Республикасының Президенті Нұрсұлтан Назарбаевтің Қазақстан экономикалық әлеуметтік және саяси жедел жаңғыру жолында атты 2005 жылғы Қазақстан халқ
14936. Махатма Ганди 110.5 KB
  МАХАТМА ГАНДИ Қысқаша өмірбаяны Мохандас Карамчанд ГАНДИ 02.10.186930.01.1948 ж.ж. Үндістан ұлтазаттық қозғалысының қайраткері. М.Ганди Оңтүстік Африкада жүргенде бейбіт жолмен қарсыласудың теориясы мен тактикасын белгілеп оны сатьяграха Шындық үшін тайсалма деп...
14937. Монғолия Қазақтары 62 KB
  Айнагүл Сарайқызы Моңғолия қазақ әйелдері Арулар одағының төрайымы Аруларжұлдыз журналының бас редакторы Моңғолия УЛАНБАТАР МЕН МОҢҒОЛИЯНЫҢ БАСҚА АЙМАҚТАРЫН МЕКЕНДЕЙТІН ҚАЗАҚТАРДЫҢ РУХАНИ ЖАҒДАЙЫ ТІЛ МӘДЕНИЕТ ЖАЙЛЫ ОЙТОЛҒАМ Армысыздар құр
14938. Мұса Жәлел 55 KB
  АСАУ ЖҮРЕК Өгей ұлың болдым ғой мен өз елім. Өлім күтіп шетте өртендіау өзегім. Өлсем қызыл гүлдер өссін қаныма Көз жасымды қабылдасынөзенің. Мұса Жәлел Берлинде Осыдан он жылдай бұрын Алматыда Ғалымдар үйінде атақты ақын Мұса Жәлелдің туғаны
14939. Отаршылдық саясаттың Түркі өркениетіне тигізген кері әсері 46.5 KB
  Тарихсыз халық тұл демекші әр халықтың өзіндік өткені жолы, даму тарихы болады. Еліміздің ұлттық тәуелсіздік алуы – қазақ халқының тарихи даму жолына қатысты жаңа көзқарастар туғызды...
14940. ҰЛТТЫҚ САНА-СЕЗІМ – ШЕКСІЗ ДҮНИЕ (Өзбекстандағы қазақтар жайында) 46.5 KB
  Нұрсұлтан Жүсіпов Өзбекстан мемлекеттік әлем тілдері университетінің докторанты филология ғылымдарының кандидаты ҰЛТТЫҚ САНАСЕЗІМ – ШЕКСІЗ ДҮНИЕ Өзбекстандағы қазақтар жайында Ұлттық санасезім ұлттық патриотизм әр адамды әр халықты ұлттық ойлау қ
14941. ОРТАҚ ОТАН – ҚАЗАҚСТАН 44 KB
  Төкен ӨмірҰзақ Педагогғалым Ресей ОРТАҚ ОТАН – ҚАЗАҚСТАН Қазақстан Республикасының елордасы – Астана қаласының 10 жылдығына және Алаш қозғалысының 90 жылдығына орай Әлем қазақтарының рухани сұхбаты: тіл мәдениет және Алаш мұраты атты халықаралық конферен...