СОДЕРЖАНИЕ
- ПЕРЕЧЕНЬ СОКРАЩЕНИЙ И УСЛОВНЫХ ОБОЗНАЧЕНИЙ
- ВВЕДЕНИЕ
- ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ РАЗРАБОТКИ И СОЗДАНИЯ WEB – САЙТА
- 1.1. Понятие Web — сайта и обоснование его необходимости
- 1.2. Классификация Web – сайтов
- 1.3. Этапы проектирования и способы создание Web – сайтов
- 1.4. Обоснование выбора CMS (Contenent Management System)
- 1.5. Программная оболочка Denwer
- ГЛАВА 2. ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА WEB – САЙТА ШКОЛЫ
- 2.1. Установка программной оболочки Denwer и системы управления континентом «Joomla»
- 2.2. Разработка структуры сайта
- 2.3. Разработка интерфейса web-сайта
- ГЛАВА 3. РАСЧЕТЫ ЭКОНОМИЧЕСКОЙ ЭФФЕКТИВНОСТИ WEB – САЙТА ШКОЛЫ
- ЗАКЛЮЧЕНИЕ
- СПИСОК ЛИТЕРАТУРЫ
ПЕРЕЧЕНЬ СОКРАЩЕНИЙ И УСЛОВНЫХ ОБОЗНАЧЕНИЙ
CMS — Content Management System (система управления содержимым)
БД – база данных
ПК – персональный компьютер
ВВЕДЕНИЕ
В наше время глобальная сеть Internet, является одним из наиболее стремительно развивающих средств информации. По статистике, у большего числа населения имеются дома компьютера и есть выход к сети Интернет. Web – сайт, на сегодняшний день, является не только визиткой или информационным средством, а полноценным рекламным инструментом, для привлечения новых клиентов.
Сегодня почти у каждой организации имеется собственный Web – сайт. В условиях применения информационных технологий – это необходимое условие существования, что дает возможность расширить поле рекламной деятельности. В сети Интернет имеется большое количество справочно – информационных сайтов, предоставляющих полную информацию по любому запросу. Значительно проще зайти на сайт и найти все необходимое, чем «копаться» по журналам и газетам.
Разработанный Web – сайт для школы позволит родителям узнать о данной школе, изучить документацию, просмотреть ведомость успеваемости своих детей, узнать расписание занятий. Учителя могут просмотреть сведения об учениках. Так же можно будет узнать, как проходят соревнования своих детей. Множество полезных сведений о данном учреждении найдут родители, желающие, чтобы их дети стали воспитанниками Детско – юношеской спортивной школы, что в значительной степени облегчает работу сотрудников. Кроме того, данная тема актуальна в связи с выходом федерального закона Российской федерации Информационная открытость (сайт ОУ) в соответствии с п. 3 постановления Правительства РФ от 10 июля 2013 года № 582 и в соответствии с приказом Минобрнауки от 29 мая 2014 года № от 785.
Целью Выпускной квалификационной работы является изучение проектирования Web – сайтов при помощи CMS, а также разработка и создание Web – сайта для школы.
Для достижения поставленной цели необходимо решить следующие задачи:
- Рассмотреть проектирование Web – сайтов;
- Определить структурную модель Web – сайта;
- Разработать Web – сайт на основе CMS “Joomla”;
- Создать уровень доступа для учителей и учеников;
- Наполнить материалом.
Объектом исследования является, спортивная школа, предоставляющая дополнительную образовательную деятельность для детей.
Предмет исследования – методы, технологии разработки интернет — сайта.
ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ РАЗРАБОТКИ И СОЗДАНИЯ WEB – САЙТА
1.1. Понятие Web — сайта и обоснование его необходимости
В наше время практически каждая организация имеет собственный Web – сайт. В условиях использования современных информационных технологий – это необходимый фактор существования, что позволяет расширить поле рекламной деятельности и привлечь тем самым дополнительных клиентов.
Процесс создания и разработки Web-сайтов включает в себя:
1) Утверждение первичного технического задания на разработку Web – сайта;
2) Определение структурной схемы Web – сайта – расположение разделов, контента и навигации;
3) Web-дизайн — создание графических элементов макета Web-сайта, стилей и элементов навигации;
4) Разработку программного кода, модулей, базы данных и других элементов Web-сайта необходимых в проекте;
5) Тестирование и размещение Web-сайта в сети Internet [1].
Информация, доступная пользователям Internet, располагается на компьютерах (Web – серверах), на которых установлено специальное программное обеспечение. Значительная часть этой информации организована в виде Web – сайтов. Каждый из них имеет свое имя (адрес) в сети Internet.
Web-сайт – это информация, представленная в определенном виде, которая располагается на Web – сервере и имеет свое имя (адрес). Для просмотра Web-сайтов на компьютере пользователя используются специальные программы, называемые браузерами. В зависимости от того, какое имя (адрес) Web-сайта мы зададим в строке «Адрес», браузер загружает в свое окно соответствующую информацию [8].
Каждая страница Web-сайта также имеет свой Internet адрес, который состоит из адреса Web-сайта и имени файла, соответствующего данной странице. Таким образом, Web-сайт — это информационный ресурс, состоящий из связанных между собой гипертекстовых документов (web-страниц), размещенный на Web-сервере и имеющий индивидуальный адрес. Посмотреть Web-сайт может любой человек, имеющий компьютер, подключенный к Internet [10].
1.2. Классификация Web – сайтов
На бескрайних просторах Сети можно встретить самые разнообразные сайты, которые решают различные задачи, преследуют определенные цели, имеют особую тематическую направленность. Далее мы приведем классификацию Web – сайтов по нескольким критериям [18].
Разделение сайтов по доступности:
а) Открытые — сервис и информация представляются всем желающим без исключений или ограничений. Любой пользователь, способен использовать все возможности виртуальной площадки;
б) Полуоткрытые — для доступа необходимо зарегистрироваться (обычно бесплатно);
в) Закрытые — полностью закрытые служебные Web – сайты организаций (в том числе корпоративные Web – сайты), личные Web – сайты частных лиц. Такие Web – сайты доступны для узкого круга пользователей. Доступ новым пользователям добавляются на такие ресурсы крайне осторожно, т.к. информация, которая опубликованная на закрытых Web – сайах, может носить характер секретности и ограниченности.
Классификация сайтов по содержимому:
а) Статический проект — содержимое такого ресурса хранится на сервере в виде неизменных страниц, продуманных и созданных заранее. В этом же виде информацию получает пользователь. Подобные сайты – это наборы HTML-страниц, написанных вручную, без использования средств автоматизации;
б) Динамический проект – содержимое формируется особыми программными алгоритмами и складывается из данных, взятых со сторонних источников (например, из базы данных или других сайтов);
в) Flash-сайты — это интерактивные приложения, разработанные в среде Macromedia Flash. Основным инструментом разработки flash-программ является векторная графика (интерактивная векторная анимация для Web). Flash придает сайтам динамичность и интерактивность.
По физическому расположению;
а) Общедоступные Web – сайты сети Internet – виден и доступен каждому пользователю, который выходит в Internet;
б) Локальные Web – сайты — доступны только в пределах локальной сети. Это могут быть как корпоративные Web – сайты организаций, так и Web – сайты частных лиц в локальной сети провайдера.
По схеме представления информации, её объёму и категории решаемых задач можно выделить следующие типы Web-ресурсов:
а) Internet – портал — многокомпонентная разветвлённая структура (портал), скомпонованная из функционально самодостаточных Web-сайтов самостоятельных организаций или подразделений корпоративной структуры.
Информационные ресурсы:
а) Тематический Web – сайт — Web – сайт, предоставляющий специфическую узкотематическую информацию по какой-либо теме;
б) Тематический портал — это очень большой Web – ресурс, который предоставляет исчерпывающую информацию по определённой тематике. Порталы похожи на тематические Web – сайты, но дополнительно содержат средства взаимодействия с пользователями и позволяют пользователям общаться в рамках портала (форумы, чаты) — это среда существования пользователя;
в) Internet – представительства владельцев бизнеса (торговля и услуги, не всегда связанные напрямую с сетью Internet):
1) Сайт-визитка — содержит самые общие данные о владельце Web – сайта (организация или индивидуальный предприниматель). Вид деятельности, история, прайс-лист, контактные данные, реквизиты, схема проезда. Специалисты размещают своё резюме. То есть подробная визитная карточка;
2) Представительский Web – сайт — так иногда называют сайт-визитку с расширенной функциональностью: подробное описание услуг, портфолио, отзывы, форма обратной связи и т. д.;
3) Корпоративный Web – сайт — содержит полную информацию о компании-владельце, услугах/продукции, событиях в жизни компании. Отличается от сайта-визитки и представительского Web-сайта полнотой представленной информации, зачастую содержит различные функциональные инструменты для работы с контентом (поиск и фильтры, календари событий, фотогалереи, корпоративные блоги, форумы). Может быть интегрирован с внутренними информационными системами компании-владельца (КИС, CRM, бухгалтерскими системами). Может содержать закрытые разделы для тех или иных групп пользователей — сотрудников, дилеров, контрагентов и пр.;
4) Каталог продукции — в каталоге присутствует подробное описание товаров/услуг, сертификаты, технические и потребительские данные, отзывы экспертов и т. д. На таких Web-сайтах размещается информация о товарах/услугах, которую невозможно поместить в прайс-лист;
5) Internet – магазин — Web-сайт с каталогом продукции, с помощью которого клиент может заказать нужные ему товары. Используются различные системы расчётов: от пересылки товаров наложенным платежом или автоматической пересылки счета по факсу до расчётов с помощью пластиковых карт;
6) Промо – сайт — Web-сайт о конкретной торговой марке или продукте, на таких сайтах размещается исчерпывающая информация о бренде, различных рекламных акциях (конкурсы, викторины, игры и т. п.);
7) Сайт-квест — Internet-ресурс, на котором организовано соревнование по разгадыванию последовательности взаимосвязанных логических загадок.
Web-сервис — Web-сайт, созданный для выполнения каких, либо задач, либо предоставления услуг в рамках сети WWW:
а) Доска объявлений – представляет собой ресурс, на котором есть возможность размещения публичного объявления о продаже или покупке товаров и услуг, также возможно оставить какую-либо информацию краткого содержания;
б) Каталог Web – сайтов — это ресурс, на котором размещаются Web-сайты и блоги, например, Open Directory Project. Каталоги бывают платные и бесплатные. Также каталоги могут способствовать продвижению ресурса, который размещается в каталоге сайтов;
в) Поисковые сервисы — например, Yahoo!, Google, Yandex;
г) Почтовый сервис – сервис предоставляющий возможность пользователю зарегистрировать ящик электронной почты и пользоваться им;
д) Web – форумы – форум предлагает набор разделов для обсуждения. Работа форума заключается в создании пользователями тем в разделах и последующим обсуждением внутри этих тем;
е) Блоговый сервис – Web – сайт, основное содержимое которого – регулярно добавляемые записи (посты), содержащие текст, изображения или мультимедиа. Для блогов характерны недлинные записи временной значимости, отсортированные в обратном хронологическом порядке (последняя запись сверху). Блоги как правило публичны и предполагают сторонних читателей, которые могут вступить в публичную полемику с автором (в комментарии к блогозаписи или своих блогах);
ж) Файлообменный пиринговый сервис — например, Bittorrent;
з) Датахостинговый (хранение данных) сервис — например, Skydrive;
и) Датаэдиторинговый (редактирование данных) сервис — например, Google Docs;
к) Фотохостинг — например, Picnik, ImageShack, Panoramio, Photobucket;
л) Видеохостинг — например, YouTube, Dailymotion;
м) Комбинированные веб-сервисы ярким представителем данного типа проектов являются социальные сети — например, Facebook, Twitter, Vkontakte, Odnoklassniki.
По типам макетов:
а) Макет фиксированной ширины (англ. rigid fixed) — размеры элементов страницы имеют фиксированное значение, независящее от разрешения, размера, соотношения сторон экрана монитора и размеров окна обозревателя, задаётся в абсолютных значениях — PX (пиксели);
б) Резиновый макет (англ. adaptable fluid) — размеры несущих элементов, значения ширины, задаются относительным значением — % (проценты), страницы отображаются во весь экран монитора по ширине. По сути данный тип макета является частным случаем фиксированного типа макета;
в) Динамично эластичный (англ. dynamically expandable elastic) — размеры большинства элементов, задаются относительными значениями — EM и %. Все относительные пропорции размеров элементов всегда остаются неизменными, независимо от разрешения, размера, соотношения сторон экрана монитора, размеров окна и масштаба окна обозревателя. И всегда постоянны относительно окна обозревателя [21].
Социальные медиа:
а) Комбинированные Web-сервисы (Социальные сети) — например, Facebook, Twitter;
б) Комбинированные Web-сервисы (Специализированные социальные сети) — например, MySpace, Flickr [18].
1.3. Этапы проектирования и способы создание Web – сайтов
При создании своего Web – сайта необходимо пройти через несколько этапов – от придумывания идеи до ее воплощения. Чтобы создать свой сайт, необходимо процесс разделить на этапы:
- Первый этап: постановка задачи или техническое задание разработки сайта. На этом этапе создается структура будущего сайта и проектируется бизнес – логика.
- Второй этап: разработка и утверждение дизайна Web – сайта. Ориентируясь на техническое задание по разработке сайта нужно представить заказчику 1-2 эскиза разных вариантов дизайна, из которых выбирается наиболее подходящий.
- Третий этап: интеграция дизайна и системы управления сайтом. Этот сайт по определению требует некой программной системы управления, поскольку при большом количестве обновляемого материала ручная публикация будет съедать массу времени вашего персонала.
- Четвёртый этап: публикация сайта в Интернет. Для публикации сайта нужно решить две задачи. Первая – состоит в выборе адреса сайта его имени (домен). Вторая задача – это выбор физического размещение вашего сайта (хостинг).
- Пятый этап: заполнение сайта материалами.
- Шестой этап: поддержка сайта. Добавление новых статей, новостей и прочие изменения содержимого сайта. Чем больше и чаще обновляются материалы сайта, тем эффективнее индексируется поисковыми системами [20].
Существует много способов создания Web – сайта. Далее рассмотрим несколько способов создания Web-сайтов.
1.3.1. Бесплатный хостинг с конструктором Web-сайтов
Конструкторы сайта удобная и полезная вещь если вы хотите быстренько создать сайт, при этом не оплачивая ни хостинг, ни доменное имя. Так же можно отметить то, что конструкторы не требуют от пользователя каких, либо знаний дизайна или программирования (в большинстве случаев). Но как говорится за «Бесплатное все равно придётся чем, то жертвовать, в данном случае наличием рекламы от сервиса на вашем сайте, и доменным именем третьего уровня. Самые популярные из них:
Ucoz.Ru – это хостинг, который предлагает сотни различных дизайнов, к сайту с возможностью привязать как собственный домен, так и воспользоваться услугой регистрации доменов в разных зонах. Данный конструктор сайтов позволяет править html – шаблоны, создавать не только полноценные сайты, но и добавлять к ним различные модули, например, форумы.
Главным преимуществом UCOZ является большое количество бесплатных шаблонов, которые доступны в конструкторе Web-сайта и значительно упрощают создание и редактирование Web – сайта без каких-либо знаний принципов работы со стороны разработчика [12].
Narod.Ru– объективно по функциональности уступает Ucoz, но является более простым для освоения. С его помощью можно создавать Web – сайты, содержащие множество страниц без необходимости правки html – кода.
Для более продвинутых пользователей данного хостинга есть возможность создания собственного Web-сайта на основе знаний HTML, CSS и JavaScript. Php и MySQL данный хостинг не поддерживает, что является значительным минусом [16].
Jimdo.com – один из самых популярных в своей области, позволяет просто создавать сайты различной сложности! Изначально Jimdo был предназначен для небольших компаний. Основной задумкой разработчиков было создание конструктора, который позволит сотрудникам организаций работать над сайтами, не прибегая при этом к помощи веб-мастеров. После открытия проекта стало понятно, что конструктор может быть интересен не только организациям, но и простым пользователям, желающим создавать собственные блоги, домашние страницы и интернет-магазины с помощью простых инструментов. Но основной недостаток Jimdo – тарифные планы. Практически каждое действие в этом конструкторе сайтов сопровождается мыслями об оплате Business-тарифа. И наводит на мысли об этом не только огромный рекламный блок, размещаемый на сайтах бесплатных пользователей, но и невозможность привязать собственное доменное имя, разместить на сайте собственный логотип, отказаться от рассылки новостей или убрать ссылки в подвале сайта. Все это создает не лучшее впечатление о сервисе. Несмотря на недостаток, Jimdo неплохой конструктор сайтов. При выборе Business – тарифа он превращается в многофункциональную систему с по-настоящему простым интерфейсом. Интернет – магазины, корпоративные сайты и многое другое – все становится возможным и создается с помощью интуитивно понятных инструментов. SEO – продвижение, шаблоны с отличным дизайном, 20 email – адресов, оперативная техническая поддержка и многое другое. [19]
1.3.2. Написание кода Web – сайта вручную
Этот способ самый трудный и требует большого опыта в программировании. Требует глубоких знаний HTML, CSS, JavaScript, PHP, Java и других языков программирования.
Написание кода вручную не ограничивает нашу, фантазию и мы можем реализовать на собственном Web – сайте практически все, что угодно. Все что необходимо для работы — это текстовый редактор.
Одна из актуальных тенденций программирования для сети Internet — создание web – приложений с богатым пользовательским интерфейсом (RIA — Rich Internet Application). Такие приложения позволяют сделать взаимодействие с пользователями более эффективным, динамичным и полезным. jQuery — одна из лучших библиотек предназначенных для разработки RIA-приложений. Поддержка всеми современными браузерами, небольшой размер, удобство и простота использования, автоматизация повседневных задач web-программиста, набор встроенных спецэффектов и элементов управления — все это отличительные особенности jQuery.
jQuery — это библиотека JavaScript, включающая множество готовых к использованию полезных инструментов, — иначе говоря, эта библиотека представляет собой написанный код JavaScript, готовый для размещения. Возможно, одно из самых выжных преимуществ библиотеки jQuery заключается в превосходной поддержке приложений, использующих технологию AJAX, которая позволяет позволяет обращаться к Web-серверу из браузера, не приводя к перезагрузке страницы, то есть когда на открытой странице в Web-браузере происходит загрузка данных с использованием технологии AJAX, мерцания и моргания экрана полностью отсутствуют; вы просто загружаете данные, которые в дальнейшем можно отобразить на веб-странице, используя возможности технологии Dynamic HTML(динамический HTML). Без забот и без хлопот мы получаем приложение, которое больше напоминает настольное, нежели на Web—приложение.
Технология AJAX позволяет пользователю выполнять определенные действия на экране — можно обновить данные в одной области страницы, не оказывая никакого влияния на остальные содержимые страницы [11].
1.3.3. HTML- редакторы
Редакторы HTML позволяют достаточно быстро и удобно создавать, редактировать и визуализировать HTML-документы.
Из множества визуальных HTML-редакторов наиболее используемые:
Microsoft Front Page — достаточно удобный визуальный HTML-редактор, освоить его за пару часов не представляет труда. Front Page имеет интуитивно понятное меню, схожее с меню других программ Microsoft Office. Инструменты HTML- редактора позволяют создавать сайты любой сложности и размещать их в сети. В 2007 году на смену Front Page пришел Microsoft Office SharePoint Designer. В 2009-м продукт стал абсолютно бесплатным, чем завоевал любовь большего числа разработчиков Web-сайтов.
Adobe Dreamweaver — мощный HTML-редактор, позволяет быстро и эффективно создавать Web-сайт, при разработке поддерживает поддерживающая все современные стандарты сети Internet (Flash, ASP.NET и PHP и ColdFusion MX), для более легкого освоения Adobe Dreamweaver содержит в своем составе развитую систему подсказки и интерактивных уроков, шаблоны и примеры Web-страниц. Без преувеличения Dreamweaver на сегодняшний день — самый лучший визуальный редактор HTML для создания Web-сайтов любого рода. Единственным препятствием для Web-разработчика является дорогая стоимость продукта, что нельзя не брать в расчет [8].
1.3.4. Использование систем управления контентом (CMS)
Современные технологии постоянно развиваются, и показателем этого является CMS (Content Management System) — система управления контентом. Эта система позволяет без труда за одну две недели создать мощный и функциональный проект, полностью соответствующий современным требованиям. В свободном доступе распространяются такие CMS, как Joomla, WordPress, Drupal, которые ничуть не хуже своих платных аналогов [6].
В отличие от предыдущих способов создания Web – сайта, использование CMS позволяет создавать много разных модулей, например: блог, чат, магазин, форум и многое другое. То есть не нужно искать скрипты, вписывать их в рисованный Web – сайт. Все модули доступны изначально. Вторая важная особенность — влияние моды на дизайн Web-сайта. Использование CMS дает доступ к самым современным схемам построения и шаблонам. К тому же системы управления контентом значительно упрощают и ускоряют работу Web-дизайнера [4].
1.4. Обоснование выбора CMS (Contenent Management System)
Большинство мнений авторитетных разработчиков Web-сайтов сходится на том, что для простых и средней сложности проектов наиболее подходящим является использование CMS «Joomla». Используя CMS «Joomla», можно создать и сайт – визитку, и отраслевой портал, и Internet – магазин.
В настоящее время для данной системы разработано огромное количество модулей, плагинов и компонентов, что делает «Joomla» самой функциональной CMS [7].
Почему мы выбираем «Joomla»? Преимущества CMS «Joomla», как инструмента для создания и раскрутки Web – сайтов:
- создание Web-сайтов на основе CMS «Joomla» не привязывает заказчика к конкретной студии дизайна. В любой момент можно передать сопровождение проекта другому исполнителю. Широкое распространение CMS «Joomla» положительно сказывается на количестве опытных специалистов в совершенстве владеющих секретами данной CMS;
- популярность CMS «Joomla» заставила многих хостинг-провайдеров предоставлять возможность использования данной системы по умолчанию. Заказчику не нужно искать подходящий релиз CMS «Joomla» и устанавливать его на свой сайт самостоятельно – для этого достаточно отметить соответствующий пункт при заключении договора о предоставлении хостинг-услуг;
- CMS «Joomla» имеет простой и понятный интерфейс. Благодаря этому наполнение и сопровождение Web-сайтов может осуществлять далекий от программирования специалист, например, штатный менеджер или секретарь;
- получить дополнительные модули для CMS «Joomla» можно абсолютно бесплатно;
- раскрутка Web-сайта, сделанного на основе CMS «Joomla», доступна даже новичку, так как данная система управления контентом имеет встроенный функционал, направленный на эффективное продвижение Web-сайтов. Подключение дополнительных специализированных модулей позволяет за считанные минуты оптимизировать Web-сайт и отслеживать позиции в поисковых системах [13].
Таким образом, использование CMS «Joomla» более удобно. У этой CMS много плюсов и не составит большого труда выполнить наш проект, то есть Web-сайт для школы.
Достоинства «Joomla»:
- «Joomla» бесплатна;
- «Joomla» развивается профессионалами уже больше 5 лет. Т.е. можно быть уверенным что система будет развиваться и дальше, а сайты, написанные на ней, будут и дальше актуальны;
- Система работает с различными расширениями и модулями. Изначально в нее заложена только базовые компоненты, все остальное можно установить исходя из направленности сайта;
- Более 7000 бесплатных и платных расширений;
- Система реализована по блочному принципу. У каждого созданного сайта на «Joomla» существует своя шапка, левый и правый блоки, меню и т.д. Такое построение упрощает понимание системы;
- «Joomla» позволяет создавать сайты любой сложности;
- «Joomla» имеет много платных и бесплатных шаблонов которые легко модифицируются.
Недостатки «Joomla»:
- «Joomla» не очень быстра на локальном сервере;
- В 2008 году система перешла на новую ступень развития (версия 1.5.х), поэтому часть дополнений, сделанных под версию 1.0.х стали недоступными.
Для того чтобы начать работать над созданием Web – сайта в CMS «Joomla» на своем компьютере, без выхода в Интернет необходима программная оболочка Denwer.