Қазақстан Республикасының
Бiлiм және ғылым министрлiгi
М. Жұмабаев атындағы
Гуманитарлық коледжі
Жаратылыстану – математикалық пәндер циклдік әдістемелік комиссиясы
Министерство образования и науки
Республики Казахстан
Гуманитарный колледж им.М.Жумабаева
Цикловая методическая комиссия естественно математических дисциплин и информатики
Бекiтемiн
Утверждаю
ЦӘК төрайымы
Председатель ЦМК
___Павилан А.К.____ Заместитель директора по УПР
___________________Нурышева Б.С.
Қopғay
Защита «_24_» __июня_____2015г.
Диплом жұмысының
ТҮСIНДIРМЕ ЖАЗУЛАРЫ
ПОЯСНИТЕЛЬНАЯ ЗАПИСКА
к дипломной работе
жұмыстың
тақырыбы: «Бағдарламалау тілдерін оқыту ақпараттық сайтын жасау»
на тему: «Создание иинформационного сайта по изучению языков программирования».
ДИПЛОМНИК
УЧАЩИЙСЯ ГР._____ Грязнов Анатолий Юрьевич
ЖОБАНЫҢ ЖЕТЕКШIСI
РУКОВОДИТЕЛЬ ________ _Жанбекова Алтынай Есенкельдиновна
ЭКОНОМИКАЛЫҚ
БӨЛІМНЕН
ПО ЭКОНОМИЧЕСКОЙ ЧАСТИ______ Кожабаева Акжаркын Коныспаевна ЕҢБЕКТІ ҚОРҒАУ ЖӘНЕ
ТЕХНИКАЛЫҚ ҚАУІПСІЗДІК
БОЙЫНША
ПО ОХРАНЕ ТРУДА
И ТЕХНИКЕ БЕЗОПАСНОСТИ _ _Ахманов Асхат Каримович
Петропавловск, 2015
Министерство образования и науки Республики Казахстан
Гуманитарный колледж им. М. Жумабаева
ЦМК Естественно-математических дисциплин и информатики
Специальность 1304000 «Вычислительная техника и программное обеспечение (по видам)»
Группа_ВТЗ-1-12____________
Дипломдық жобаны (жұмысты) орындау
ТАПСЫРМАСЫ
ЗАДАНИЕ
на выполнение дипломного проекта
Учащийся __Грязнов Анатолий Юрьевич_____________________________________________
(фамилия, имя, отчество)
Жобаның тақырыбы /Тема дипломного проекта__«Создание информационного сайта по изучению языков программирования».__________________________________________________
/Утверждён приказом по колледжу №__36а-УЛО_от «__4___» _мая 2015 г.__________________
/Исходные данные к проекту___________________________________________________________
___________________________________________________________________________________Дипломдық жұмысында қарастырылатын сауалдар немесе қысқаша мазмұны/ Перечень подлежащих разработке в дипломнойй работе вопросов или краткое содержание дипломной работы _Разработан информационный сайт по изучению языков прогрограммирования.________
Ұсынылатын негiзгi оқулықтар/ Рекомендуется основная литература:
1.Шапошников И. Web-сайт своими руками. - СПб: Изд-во «Питер», 2002. – 390с._____________
2.Федорчук А. Как создаются Web-сайты.- СПб.: Питер, – 2000. – 224с.______________________
3.Холмогоров В. Основы Web-мастерства. – СПб.: Питер, 2001. – 352с.______________________
4.Шафран Э. Создание Web-страниц.- СПб.: Питер, – 2001. – 320с.__________________________
5.Шикин Е.В., Боресков А.В. Компьютерная графика. - М.:“Диалог-Мифи”, 2001. – 570с_______
6.Николенко Д.В. Практические занятия по JavaScript.- М.: Наука и техника, 2000. – 128с.______
Жобаға (жұмысқа) қатысты тараулардың кеңес берушiлерi/Консультанты по проекту (работе) с указанием относящихся к ним разделов проекта (работы)
Тарау /Раздел | Кеңес берушi /Консультант | /Подпись |
Теоретическая часть | Жанбекова Алтынай Есенкельдиновна | |
Аналитическая часть | Жанбекова Алтынай Есенкельдиновна | |
Проектная часть | Жанбекова Алтынай Есенкельдиновна | |
Охрана труда | Ахманов Асхат Каримович | |
Обоснование экономической части | Кожабаева Акжаркын Коныспаевна | |
Заключение | Жанбекова Алтынай Есенкельдиновна | |
Тапсырма берiлген уақыт/ Дата выдачи задания
«_20__» __марта_2015 г.
Жобаны (жұмысты) аяқтау мерзiмi / Срок сдачи законченного проекта (работы)
«_22_» _июня__2015 г.
ЦӘК төрайымы / Председатель ЦМК______ Павилан Айгуль Кадыржановна
Жұмыс жетекшiсi/Руководитель работы Жанбекова Алтынай Есенкельдиновна
Тапсырманы орындауға алынды/ Задание принял к выполнению ________________________
НОРМОКОНТРОЛЬ
Дипломной работы учащегося
Гуманитарного колледжа им. Жумабаева
Данный лист нормоконтроля прикладывается к выпускной квалификационной работе на защиту дипломного проекта
Тема дипломного проекта «Создание информационного сайта по изучению языков программирования».
______________________________________________________________________________________________________________________________________________________________________
/Учащийся ____Грязнов Анатолий Юрьевич_____________________________________________
(фамилия, имя, отчество)
/Группа _______ВТЗ-1-12______________
/Руководитель дипломного проекта______ Жанбекова Алтынай Есенкельдиновна____________
(фамилия, имя, отчество)
/Нормоконтролёр_____Молдабаева Бейнегуль Уантаевна________________________________
(фамилия, имя, отчество)
КРИТЕРИИ ОЦЕНКИ ДП
(при наличии хотя бы одного из них, ДП к защите не допускается)
№ | Критерии | Оценка (Да/Нет) |
1 | Тема не соответствует содержанию ДП | |
2 | Представлена ксерокопия ДП | |
3 | Несконструированный план ДП | |
4 | В работе отсутствуют ссылки и сноски на нормативные акты, научные, учебные и прочие публикации | |
5 | Объем ДП не соответствует установленному уровню | |
6 | Оформление ДП не соответствует требованиям колледжа | |
/Нормоконтролёр ___________________
подпись
С результатами нормоконроля ознакомлен
автор ДП – учащийся __________________
подпись
Аңдапта
Берілген дипломдық жұмыста бағдарламалау тілдерін оқытудың ақпараттық сайтты жасау қарастырылған. Жұмыста web-беттің құрылымын анықтау әдістері сипатталды. Жүргізілген жұмыстар нәтижесінде қазіргі заманғы сайт прототипі жасалды. Жұмыс нәтижелері *.html пішінінде жасалған.
Аннотация
В данной дипломной работе рассмотрено создание информационного сайта по изучению языков программирования. В работе описаны методы определения структуры Web- страниц. В результате проведенных работ на базе выбранных технологий был создан прототип современного сайта. Результаты работы выполнены в файле формата *. html.
Annotation
In this thesis work examines the creation of an information website for learning programming. This paper describes methods for determining the structure of the Web pages. As a result of the carried out works on the basis of the selected technologies was established prototype of the " modern website. The results of the work performed in the file format *. html.
СОДЕРЖАНИЕ
Введение 8
1.теоритическая часть 10
1.1 Сайты. Виды сайтов и их характеристики 10
2.аналитическая часть 16
2.1 Создание web-страницы с помощью языка html 16
2.2 Фреймы 22
2.3 CSS 23
2.4 PHP 24
2.5 JavaScript 31
2.6 Дизайн сайта 32
3 ПРОЕКТНАЯ ЧАСТЬ 34
3.1 Руководство по инсталляции 34
3.2 Руководство пользователя 34
4.охрана труда 40
4.1 Общие требования безопасности 40
4.2 Требования безопасности во время работы с пк 41
4.3 Требования пожарной безопасности 42
4.4 Производственное освещение 43
5.обоснование экономической эфективности работы 47
5.1. Оценка длительности и трудоемкости 49
5.2. Расчет цены программного продукта 50
5.3 Определение социального эффекта 51
ЗАключение 53
список использованной литературы 55
приложение 57
ВВЕДЕНИЕ
World Wide Web (WWW) – интеллектуальное достижение человечества в эпоху высоких технологий. На сегодняшний день WWW содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы – Web-браузеры, которые существенно облегчают пользование ресурсами WWW. Вся информация в Web-браузере отображается в виде Web-страниц, которые являются основным элементом байтов WWW.
Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в сети.
Пользователю приятно посещать те Web-страницы, которые имеют стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне Web-браузера.
Особую актуальность приобретает проблема разработки Web-сайтов учебных заведений и использование Internet-технологий в системе образования. Изобретение бумаги и книгопечатания вызывало опасение о разрыве человеческих взаимоотношений, с появлением кино высказывались мнения об исчезновении театра и т.п. Однако история показывает, что новые технологии занимают свои ниши в общественных отношениях, не заменяя традиционные, а дополняя их возможности. Подрастающее поколение более восприимчиво к различным новациям. Следовательно, актуальность постановки, изучения и решения проблемы целенаправленного использования Internet-технологий в образовании в целом и Web-дизайна для учебных заведений в частности, не вызывает сомнений. Поэтому для дипломного проекта я выбрал тему: Разработка информационного сайта по изучению программирования.
Цель исследования: создание Web-сайта по изучению языков программирования.
Изучение методической и прикладной литературы по проблемам проектирования и создания Web-страниц, обобщение опыта работы опытных разработчиков, программистов и Web-дизайнеров, а также выбор оптимальной стратегии, методов и приемов создания личного или корпоративного Web-сайта, воплощающего все известные на сегодняшний день передовые идеи и технологии.
Гипотеза исследования: существующих средств создания Web-сайтов достаточно для создания web-приложения, применение которого в рамках образовательной работы позволит повысить качество знаний обучающихся.
Объект исследования: информационный сайт по изучению языков программирования.
Предмет исследования: средства создания web-сайтов.
Задачи исследования:
изучить историю и теорию языков программирования;
ознакомиться с современными Интернет-технологиями;
изучить программный инструментарий, применяемый для разработки и создания Web-сайтов;
ознакомиться с основными правилами и рекомендациями по разработке и созданию Web-сайтов;
определиться со структурой Web-страниц;
выбрать стратегию разработки и создания Web-сайта;
разработать концептуальную модель сайта;
изучить Web-технологию и языки HTML и Java-Script и их возможности в Web-дизайне;
выявить эффективность программно-аппаратных средств в Web-дизайне.
В работе использованы следующие методы: изучение и обобщение работы с данными, анализ и сбор информации по структурным и объектно-ориентированным языкам программирования.
Дипломная работа содержит в себе введение, основную часть, состоящую из трех глав, заключения и приложения.
1. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ
1.1Сайты. Виды сайтов и их характеристики
Зачастую обращаясь в студию веб-дизайна или к фрилансеру за услугами создания сайта, заказчик часто не знает, какой сайт ему нужен. Проблема в том, что в терминологии, когда обсуждаются виды сайтов (типы сайтов), происходит путаница. Заказчик говорит об одном, а подразумевает совершенно другое. Идет бурное обсуждение проекта, а потом, в один прекрасный момент выясняется, что нужен был совершенно другой вид сайта[18].
Если было принято решение создать свой собственный интернет-сайт, необходимо четко расставить границы между типами сайтов и определить, какого вида ресурс необходим под ваши потребности.
Основная классификация сайтов по типам:
По цели создания выделяют следующие типы сайтов:
Некоммерческие
Коммерческие
По доступности пользователям их условно можно разделить на:
Закрытые (недоступны для людей, не входящих в определенный круг)
Полузакрытые (для доступа потребуется пройти процедуру регистрации)
Открытые (доступны каждому пользователю)
По стилю оформления и функциональности выделяют следующие типы сайтов:
Флэш-сайты
Динамические
Статические
В зависимости от размера аудитории выделяют следующие типы сайтов:
Также делят сайты на типы по их физическому расположению:
Основные виды сайтов и их категории
- Сайт-визитка – обычно состоит из нескольких страниц и имеет уникальный, но простой и функциональный дизайн; идеально подходит для компаний, которые хотят разместить информацию о себе и своих услугах в Интернете; основные разделы сайта: «О компании», «Продукция или услуги», «Прайс-листы», «Контактная информация»; сайт-визитка используется предприятиями, организациями и частными лицами.
Корпоративный информационный сайт – необходим для автоматизации внутреннего документооборота, учёта показателей компании, управления персоналом, может быть оснащён функциями обмена информацией между удалёнными филиалами; корпоративный сайт позитивно влияет на репутацию и имидж компании; дизайн должен соответствовать фирменному стилю компании; чаще всего, включает «администраторскую часть» для создания и изменения контента, позволяющую менеджеру или секретарю компании добавлять или менять новости, информационные статьи, справочную и прочую информацию на сайте; используется минимум графики, основной упор идет на текст.
Корпоративный имиджевый сайт – идеально подходит для обеспечения имиджевого присутствия в Сети; сайт служит для предоставления подробной информации о компании, истории торговой марки, сведений об оказываемых услугах или поставляемых товарах; корпоративный сайт обычно содержит ленту новостей компании, средства публикации информации о рекламных и торговых акциях, информацию для прессы и другие сведения; нередко корпоративные сайты сочетают информацию о компании с каталогом продукции; используется эксклюзивный оригинальный дизайн, выгодно представляющий компанию; использование нестандартных идей и решений в оформлении, процентное соотношение текст/графика = 50/50
Интернет-магазин, он же Сетевой магазин, Электронный магазин, Internet shop, E-shop – интерактивный веб-сайт рекламирующий товар или услугу, принимающий заказы на покупку, предлагающий пользователю выбор варианта расчета, выписывающий счет на оплату, служащий одновременно подтверждением заказа; при этом администратор магазина обязан:
организовать доставку товара;
проконтролировать расчеты с покупателем за поставку.
Информационный сайт – достаточно большой виртуальный массив информации, включающий в себя множество различных тематических разделов меньшего размера, либо некоторое количество самостоятельных проектов; является для клиента основным источником информации, напоминает энциклопедию или специализированный журнал.
Тематические сайты – ресурсы, у которых практически все страницы посвящены одной определенной проблематике или теме, в свою очередь разно тематические сайты захватывают широкий круг информационной направленности и могут быть посвящены большому количеству тематик и направлений. Спрос на такие сайты очень велик и пользуются ими как крупные фирмы, так и простые веб-мастера.
Новостные сайты.
Новостные сайты выполняют очень важную задачу – они должны донести до пользователя различные новости, которые происходили, произойдут или происходят в данный момент. При этом, новостные сайты могут быть посвящены одной определенной тематике, или рассказывать интернет сообществу о новостях из различных жизненных сфер человека.
Игровой портал – сложный развлекательный интерактивный проект, предусматривающий большую посещаемость и ресурсоемкость.
Персональный проект – личный проект, содержит все, что угодно и оформляется в любом стиле, который наиболее полно сможет раскрыть и отобразить тематику сайта.
Контент-проект – это сайт, как правило некоммерческой направленности, который представляет собой собрание текстов, статей и прочих материалов, основная задача которого – привлечение посетителей по определенной тематике. В дальнейшем, этот трафик обычно перенаправляется на коммерческие сайты и, по сути, контент-проект используется, как рекламная площадка. Может быть выполнен в виде интернет-библиотеки, энциклопедии или справочника. Каждая отдельная страничка сайта контент-проекта дает, как правило, незначительный трафик, однако общий трафик такого сайта может быть очень внушительным.
Контент-проект, при условии размещения на нем подходящей по тематике рекламы, дает самый качественный и тематический трафик на коммерческие сайты партнеров (а значит и конвертацию посетителей в покупателей), т.к. эта тема, с очень высокой долей вероятности, будет интересна большинству посетителей, пришедших с сайта контент-проекта.
Также может представлять собой образовательный или развлекательный ресурс.
Промо-сайт – это почти всегда неосновной сайт компании, исключением здесь может быть только промо-сайт, созданный фирмой специально для продвижения одного конкретного продукта или товарной группы. Причина этого лежит в оптимизации сайта с целью получения более высоких мест в рейтингах поисковых машин, которые дают сайту (а значит – компании) большее количество посетителей, а значит больший доход. Промо-сайт обычно хорошо оптимизируют под поисковые машины, для которых он, в основном, и предназначен. Дело в том, что с точки зрения оптимизации, гораздо выгоднее создать несколько сайтов с более узкой и нацеленной тематикой и оптимизировать их каждый по своей специфике. В общем итоге, отдача от вложения средств в создание основного сайта компании возрастает многократно. В экономике есть такое понятие «эластичность цены и спроса». Смысл этой фразы заключается в том, что незначительное изменение цены может приводить к пропорциональному изменению спроса, а может приводить и к непропорциональным изменениям. В нашем случае, с промо-сайтом, ситуация полностью аналогична – увеличение в два-три-несколько раз затрат на создание и продвижение нескольких меньших, чем один большой сайт промо-сайтов, приводит к непропорционально большему увеличению трафика из поисковых машин. Таким образом, используя промо-сайт, а лучше несколько, получаем не линейную зависимость трафика от затрат на создание сайта, а уже геометрический прирост посещаемости сайтов компании в целом, а соответственно и прибыли от инвестирования в интернет-технологии.
Сайт-форум может быть удобным способом набора контента для основного сайта. Новые темы, открытые на форуме могут быть использованы в качестве анонса новых статей для ленты новостей основного сайта или анонса статей, выдержки из которых можно использовать для почтовой рассылки. Используя сайт-форум совместно с почтовой рассылкой, можно быстро увеличить посещаемость основного сайта.
Таким образом, сайт-форум – хороший инструмент для проведения маркетинговых исследований рынка и раскрутки основного сайта.
Блог – это сайт, представляющий собой интернет-дневник, или журнал, который ведется наподобие новостной ленты, при этом на каждую тему блога посетители могут оставлять свои комментарии-сообщения, доступные с главной страницы соответствующей темы. Блог обычно очень часто обновляется, по этой причине он может намного чаще индексироваться поисковыми машинами, чем обычные сайты.
Блог часто используется для общения людей объединенных какими-либо общими интересами, и в этом, чем-то, напоминает форум. Самые последние события в мире зачастую раньше появляются на различных блогах, и только немного позже в сообщениях новостных интернет-изданий. В общем можно говорить о том, что блог представляет собой странный гибрид ленты новостей, гостевой книги и форума одновременно.
Условно блоги, делятся на две категории, каждая из которых выполняет свою определенную задачу:
Корпоративные блоги, как правило, создаются определенными компаниями, предприятиями или предпринимателями в качестве дополнительного ресурса, раскручивающего бренд, и часто являются дополнением к коммерческому или корпоративному сайту. На них владельцы распространяют своим потенциальным и существующим клиентам последние тенденции в определенной области, новости и т. д.
Личные блоги – категория сайтов, в которую входят ресурсы, созданные отдельными пользователями. Их основная цель – донесение широкому кругу общественности мнение автора по определенной теме. Очень часто блоги создают фрилансеры, публикуя на них информацию, касающуюся своей сферы деятельности. Таким образом повышают свою популярность и становятся заметней среди конкурентов, привлекают новых клиентов, делятся различной информацией с интернет-пользователями и т. д.
Условно блоги делятся на две категории в зависимости от того, как много тем на них рассматривается:
Узко тематические (пару тем, имеющих тесную связь друг с другом);
Обще тематические (совершенно различные темы).
Для большинства многоцелевых сайтов разумнее использовать подход "разделение различий" или, если позволяют ресурсы, создать несколько версий и обслуживать их соответствующим образом.
2. АНАЛИТИЧЕСКАЯ ЧАСТЬ
Поскольку пользователь не в состоянии изменять сайт или как-то влиять на него, не буду рассматривать языки проектирования, а ограничусь языками программирования. При данной работе использовался язык гипертекстовой разметки HTML и язык описания Web-сценариев Java.
2.1 Создание Web-страницы с помощью языка HTML
Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы, разбросанные как по всему Web-пространству, так и находящиеся на этом же сервере или являющиеся составной частью этого же Веб-проекта.
Можно работать на Web без знания языка HTML, поскольку тексты HTML могут создаваться разными специальными редакторами и конвертерами. Но писать непосредственно на HTML нетрудно. Возможно, это даже легче, чем изучать HTML-редактор или конвертер, которые часто ограничены в своих возможностях, содержат ошибки или проводят плохой HTML код, который не работает на разных платформах.
Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML, скорее всего, будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть, просмотрены многими браузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Netscape Navigator, Internet Explorer или некоторыми другими программами[6].
Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо.
HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными броузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.
Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может быть использован любой текстовый редактор.
Обычно HTML-документ - это файл с расширением .html или .htm, в котором текст размечен HTML-тегами (англ. tag - специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми, браузер отображает содержимое Веб-документа. Текст самих тегов Веб-браузером не отображается.
Все теги начинаются символом ''. Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация:
Информация
Здесь стартовым тегом является тег
, а завершающим -
. Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках стоит символ '/' (слэш).
Браузер, читающий HTML-документ, отображает его в окне, используя структуру HTML-тегов. В каждом HTML-документе должны присутствовать три главных части:
A) Объявление HTML;
B) Заголовок;
C) Тело документа.
A) Объявление HTML
и . Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег (в самом начале документа), а последним - (в самом конце документа).
.
.
.
B) Заголовочная часть.
и . Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках "Избранное (BookMark)". Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегами и .
Моя первая страница
C) Тело документа.
Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами и