Разработка Интернет-страницы преподавателя спецтдисцеплины
Письменная экзаменационная работа
МИНИСТЕРСТВО
ОБРАЗОВАНИЯ УЛЬЯНОВСКОЙ
ОБЛАСТНОГО ГОСУДАРСТВЕННОГО БЮДЖЕТНОГО ОБРАЗОВАТЕЛЬНОГО УЧРЕЖДЕНИЯ
НАЧАЛЬНО-ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ
ПРОФЕССИОНАЛЬНОГО УЧИЛИЩА № 2
1.9. Оператор ЭВМ________
(шифр, наименование профессии)
К защите допущен
Зам. директора по УПР Цыганцова Р.И.
(подпись, Ф.И.О.)
ПИСЬМЕННАЯ ЭКЗАМЕНАЦИОННАЯ РАБОТА
Тема:
Разработка
Интернет-страницы преподавателя спецтдисцеплины_______________
Выпускник Карасев Андрей Алексеевич_________________ __________________Группа_№ 18_
работу
выполнил______________________
(подпись выпускника)
Руководитель
работы ________Вершинина И.П._ «____»__________________
(подпись, Ф.И.О.)
Председатель
методической
комиссии ________Никитина В.П.__ «____»_________________
(подпись, Ф.И.О.)
Консультант
по графической
части ________Вершинина И.П._ «____»__________________
(подпись, Ф.И.О.)
По практической
части ________Вершинина
И.П._ «____»__________________
(подпись, Ф.И.О.)
Ульяновск 2012
УТВЕРЖДАЮ:
Зам. директора по УПР ПУ №2
_______________Цыганцова Р.И.
(Ф.И.О.)
«____»________________ 2012г.
ЗАДАНИЕ
для
письменной экзаменационной работы
Учащийся: Карасев Андрей Алексеевич ______________________________
(Ф.И.О.)
ПУ №2 Группа №18
Профессия НПО: Оператор
ЭВМ___________________________
______________________________
Тема задания: Разработка Интернет-страницы преподавателя спецтдисцеплины_____________
Дата выдачи работы «17» декабря 2011г.
Срок сдачи работы «15» июня 2012г.
Перечень вопросов, подлежащих разработке
А. Спецтехнология
1. Описание материалов и структура страницы.
2. Обоснование выбранной структуры.
3. Средства,
применяемые при создании
4. Создание Web-страницы с помощью языка HTML.
5. Использование средств Интернета в образовательных учреждениях.
6. Дальнейшее развитие средств компьютерной коммуникации.
Б. Организация и производство работ
- Организация рабочего места при выполнении осмотра.
Процессор, клавиатура, мышь, монитор.______________________
- Виды применяемого
инструмента и механизмов при выполнении
данного осмотра.
Компьютер IBM AMD Alton 1800MHz/256 MB/40GB, SAMSYNG 17"__________________________
Перечень
графической части или
(макет, модель)
- Распечатанные листы в объеме__27 страниц_______________________
__________________ - Диск с готовым материалом____________________
______________________________ _____
Работа должна состоять из:
- Пояснительной записки.
Задание
выдал преподаватель __________
(подпись, Ф.И.О.)
Содержание
Введение. Интернет, как источник информации.
Глава первая. Вступление.
- Описание материалов и структура страницы.
- Обоснование выбранной структуры.
Глава вторая. Основная часть.
1. Средства, применяемые при создании страницы.
2. Создание Web-страницы с помощью языка HTML.
Заключение.
1. Использование средств Интернета в образовательных учреждениях.
2. Дальнейшее развитие средств компьютерной коммуникации.
Используемая литература
1. Браун М., Хоникатт Д. Использование HTML 4,4-е издание. Специальное издание: Пер. с англ. – М.; СПб.; К.: Издательский дом «Вильямс», 2010.
2. Пайк М. Интернет в подлиннике: пер. с англ. – СПб.: BHV – Санкт-Петербург, 1997.
3. Левин "Internet для "чайников", Москва 1996.
4. Хеслоп "HTML с самого начала", СПб: Санкт-Петербург, 1995.
5. Леонтьев В.П. Создаём страничку в Интернет: курс начинающего веб-мастера. ОЛМА-ПРЕСС, г. Москва – 2005.
6. Калиновский А. Ваша домашняя страничка в Интернете. БХВ-Петербург, г. Санкт-Петербург – 2005.
Сайт
Адрес сайта: ulpig.jr1.ru
Вход в административную панель: ulpig.jr1.ru/administrator
Пароль от административной панели: ghbvth73
Панель управления
Панель: http/:/hosting.redz.ru/
Домен: ulpig.jr1.ru
Логин: h79479
Пароль: ghbvth73
Доступ к FTP
Сервер: ulpig.jr1.ru
Логин: h79479
Пароль: FhLhXbo26
Порт: 21
Каталог на сервере: /home/jr1.ru/ulpig
Файлы, которые должны быть доступны
по адресу ulpig.jr1.ru закачиваются в директорию
(/home/jr1.ru/ulpig/sites/www/
Доступ к MySQL
Управление: http://mysql.redz.ru/
Хост: localhost
Логин: h79479
Пароль: ZnHIa7a6
База данных: h79479
База данных с префиксом: h79479_qwerty
Пароль: ghbvth73
Яндекс
Почта: [email protected]
Логин: ulpig
Пароль: ghbvth73
Введение
С момента появления
Интернета он был назван самой
большой коммуникативной
В 1960 годах были
проведены научные
К концу 70-х годов были разработаны средства связи с другими странами, тем самым весь мир оказался как бы окутанным «паутиной» компьютерных сетей.
В 90 годы у пользователей
Интернета появились такие
Самым значительным событием в истории Интернета стало изобретение поисковой службы WWW (World Wide Web). WWW приводится в действие за счет мощного компьютера (Web-сервер), который хранит и пересылает документы и другие информационные ресурсы Интернета с использованием протокола передачи НТТР (Hyper Text Transfer Protocol). Сейчас эта служба наиболее популярна среди пользователей по всему миру, из-за чего она и является настолько динамично развивающейся системой.
В настоящее время в сети Интернет возможно найти информацию любого содержания благодаря внедрению гипертекстового формата предоставления информации HTML (язык разметки гипертекста), который позволяет размещать в себе текстовую, графическую, видео- и аудиоинформацию.
Интернет – огромный банк информации разных размеров, форматов, содержания и тематики со всего мира. На данный момент Интернет является самым удобным, а потому популярным источником информации во всех сферах жизни для любого контингента людей.
Наиболее популярными поисковыми серверами на данный момент являются: yahoo.com, google.com, rambler.ru, yandex.ru и mail.ru.
Мы, современные люди, не представляем себе, как можно обойтись без Интернета: он помогает нам ориентироваться в море поступающей информации, быть в курсе событий, оставаться на связи с друзьями и коллегами. Между тем, Всемирная Паутина – явление относительно «юное». Первая сеть под названием ARPANET появилась в 60х годах прошлого столетия. Первый Интернет связывал университеты и научные центры, ориентированные на оборонную промышленность. С увеличением количества компьютеров по всему миру Интернет стал достоянием широкой аудитории.
Преимущества Всемирной Сети – быстрое получение и обмен информацией при полном отсутствии границ. Интернет стирает не только языковой барьер, благодаря переводчикам онлайн, но и пространственный. В виртуальном мире легко знакомиться и общаться с человеком c любого континента.
Качественно новый скачок совершенствования Всемирной паутины произошел с развитием социальных сетей. Социальные сети – «дитя» виртуальных дневников и гостевых книг, только общаться стало гораздо удобнее. Все больше людей обзаводятся аккаунтами «Вконтакте» или «Фэйсбуке», заполняют анкеты и становятся постоянными посетителями этих сайтов. Для многих людей социальные сети заменили общение по телефону, позволяя получать даже больше информации, друг о друге, чем при личном общении.
Очевидный плюс социальных сетей – удобство в обмене фотографиями, медиафайлами, заметками и другим контентом.
Интернет каждому
предоставляет неограниченные возможности
для обучения. Преподаватель найдет
своего ученика на специальных образовательных
сайтах, где «виртуальному студенту»
предоставляются бесплатно
Для четкой организации работы онлайн необходимы инструменты, удобные для работодателя и фрилансера – виртуальный офис, отлаженная система расчетов, возможность общения и обучения. Все это значительно экономит время и нервы представителей обеих сторон – не требуется тратить силы на поиски заказчика и исполнителя, работник и фрилансер защищены в правовом и финансовом отношении. Фрилансер, кроме того, может расширить свои возможности, обучаясь дистанционно разным специальностям. Ярким примером такой Интернет-корпорации, разрабатывающей подобные инструменты для работы, является WORKLE.
Глава первая
1.1. Описание
материалов и структура
Сайт состоит из 15 позиций.
Первая позиция модуль авторизации находится в верхней части сайта в левом углу. Служит для авторизации пользователей на сайте. Основное предназначение на сайте для прохождение тестов обучающимися.
Вторая позиция баннер
от профессионального училище №
2, который я делал сам, находится
в верхней части сайта
Третья позиция - это модуль меню пользователя находиться в верхней части сайта, правее второй позиции. Доступен только зарегистрированным пользователям. Имеет три ссылки «Мои данные, Разместить статью (доступно только администрации сайта) и Пройти тест».
Четвертая позиция модуль поиска находится в верхней части сайта в правом углу. Поиск предназначен для пользователей сайта. Служит для поиска материалов на данном сайте.
Пятая позиция - самая главная. Модуль верхнего меню отображается на всех страницах сайта, расположен горизонтально после верхних модулей. Состоит из четырех меню и трех разделов:
1) Меню «Главная» состоит из двух разделителей:
а) Общая информация содержит
в себе два подменю. «Обо мне»
данное подменю имеет ссылку на статью,
в которой описывается
б) Для обучающихся содержит в себе три подменю. «Расписание» имеет ссылку на статью где можно скачать или посмотреть в PDF формате расписание пар Виктора Павловича, статья обновляется по мере предоставлении расписания. Второе подменю «Индивидуальные задания» имеет ссылку на статью для обучающихся и содержит в себе различные задания. Третья подменю «Выпускникам» так же имеет ссылку на статью, в которой расположены материалы для выпускных групп.
2) Меню «Наши успехи»
содержит в себе одно подменю
«Сборка макета автомобиля ОКА»
3) Меню «Конкурсы» содержит два подменю «Автомеханик 2012» и «Автомеханик 2011». Оба подменю имеют ссылку на статьи, в которых есть информация о прошедших конкурсах и фотографии.
4) Меню «Видео» содержат
три подменю «Открытый урок»,
«Автомеханик» и «День
5) Фотогалерея это раздел,
в котором отображаются все
фотоальбомы загруженные
Все фотографии, вставленные в статью с помощью специального тэга от компонента «Phoca Gallery».
6) Обратная связь, после долгих размышлений я решил, что лучше чем гостевая книга, и поэтому решил остановиться именно на обратной связи. Итак, обратную связь я создал с помощью компонента «aiContactSafev» включающая в себе четыре текстовых поля и систему безопасности от спама CAPTCHA. Она будет служить для связи между администраторам сайта и пользователем.
7) Карта сайта этот
раздел предназначен для
Шестая позиция - статья «Обо мне» на главной странице находиться ниже верхнего меню. Здесь находится небольшая часть статьи. Чтобы просмотреть всю статью необходимо нажать ссылку подробнее, которая находиться внизу небольшой части статьи справа и рядом находится ссылка добавить комментарий.
Седьмая позиция - модуль «Jsn imageshow pro» находиться ниже шестой позиции в левой части сайта. С помощью этого модуля я сделал слайд шоу переключающиеся автоматически. Слайд шоу состоит из четырех фотографий.
Восьмая позиция это модуль flash- видео находиться правее седьмой позиции отображает видео из статьи «День открытых дверей».
Девятая позиция - это меню первого столбика, находится ниже седьмой и восьмой позиции с левой части сайта. Содержит в себе ссылки на статьи «Обо мне, Расписание, Индивидуальные задания и Выпускникам».
Десятая позиция - это меню второго столбика, находится между девятой и одиннадцатой позиции. Содержит в себе ссылки на статьи «Электронный учебник, Презентации и Сборка автомобиля "ОКА"».
Одиннадцатая позиция - это меню третьего столбика, находится там же, где и девятая позиция, только в правой части сайта. Содержит в себе две ссылки на статьи «Автомеханик-2011 и Автомеханик-2012» и ссылку на компонент «JoomTest» для организации тестирования посетителей на сайте. Она позволяет создавать категории, которые могут содержать тесты из неограниченного количества вопросов, а так же задать последовательность вопросов. У пользователя есть возможность приостановить тест и продолжить его прохождение в любое удобное время. Для прохождения теста необходимо быть зарегистрированным пользователем.
Двенадцатая позиция - это модуль «Последние новости», находится ниже девятой позиции. Тут отображаются ссылки на недавно созданные статьи. Всего их пять, но можно настроить модуль по желанию.
Тринадцатая позиция - это модуль «Популярные новости», находится ниже десятой позиции. Здесь находятся ссылки на самые читаемые материалы на сайте.
Четырнадцатая позиция - это компонент «Apoll», находится ниже одиннадцатой позиции. Тут находится опрос. Если нажать кнопку «Ок» или «Итог» то отобразиться результаты опроса в виде анимированной круговой диаграммы.
Пятнадцатая позиция - это модуль «Нижней колонтитул», находится в нижней части сайта. Тут отображается информация о разработчике сайта, а так же год создания сайта.
В правом нижнем углу сайта имеется кнопка «Наверх» для быстрого возвращения посетителей сайта на начало страницы за это отвечает плагин «J2top».
Что бы просматривать PDF документы необходимо, что бы на компьютере была установлена программа Adobe Reader.
Внизу после каждой статьи есть кнопки социальных сетей. За это отвечает плагин «Russian social bookmarks buttons», при нажатии кнопки можно поделиться с друзьями о понравившимся статье. Так же предлагается оставить комментарий к статье. Для этого достаточно ввести имя, email и сам комментарий, за это отвечает компонент JComments.
1.2 Обоснование выбранной структуры
Существует несколько основных структур сайта:
1) Иерархическая - страницы разбиты по категориям и подкатегориям. Такая структура наиболее удобна.
2) Произвольная - страницы расположены в свободном порядке. Такая структура оправдана только для небольших сайтов.
Любой сайт, если не с самого начала, то со временем, становится все более сложным, увеличивается число страниц и усложняются их взаимосвязи. Сайт уже не укладывается в одну или несколько равнозначных страничек, а, следовательно, приобретает некую внутреннюю структуру. Под структурой сайта обычно понимают либо иерархическую (в виде дерева) организацию его страниц, либо произвольную блок-схему переходов со странички на страничку по имеющимся ссылкам. Соответственно, можно различать два вида структуры сайта - файловую структуру и гипертекстовую структуру.
Файлы, содержащие страницы сайта, размещаются в иерархической структуре каталогов - так с ними удобнее работать, проще находить и легче добавлять новые страницы. Это и есть файловая структура сайта. Целесообразно организовывать эту структуру в соответствии с логикой организации разделов сайта: первый уровень каталогов должен соответствовать основным разделам сайта, на втором уровне размещаются каталоги, соответствующие подразделам, и так далее. Файловая структура обычно изображается в виде дерева или в виде структуры разделов, например, следующим образом:
- Каталог 1 (Раздел 1)
- Подкаталог 1.1 (подраздел 1.1).
- Подкаталог 1.1.1 (подраздел 1.1.1).
- Подкаталог 1.1.2 (подраздел 1.1.2).
- Подкаталог 1.2 (подраздел 1.2).
- Подкаталог 1.3 (подраздел 1.3).
- Каталог 2 (Раздел 2)
- Подкаталог 2.1 (подраздел 2.1).
- Подкаталог 2.2 (подраздел 2.2).
- Подкаталог 2.3 (подраздел 2.3).
- .....
В файловой структуре могут присутствовать каталоги и подкаталоги, которые не соответствуют каким-либо разделам сайта и либо вообще не отображаются на страницах сайта, либо присутствуют только в служебных ссылках.
Гипертекстовая структура сайта определяется внутренними гипертекстовыми ссылками, которые присутствуют на страницах сайта. Даже если вдруг, по каким-то непонятным соображениям, держать все файлы сайта в одном каталоге, между ними существуют взаимосвязи, определяемые гипертекстовыми ссылками. Эти взаимосвязи и составляют гипертекстовую структуру. Однако гипертекстовая структура сайта определяет удобство переходов со страницы на страницу, то есть удобство навигации по сайту и поэтому играет очень большую роль в дизайне сайта, независимо от того, нарисовал ли ее вебмастер в явном виде.
Я выбрал иерархическую структуру сайта, потому что считаю, что она более удобна в плане навигации по сайту и размещения материалов. Пользователь при заходе на заглавную страницу оказывается перед выбором, куда идти дальше. После перехода в нужный раздел, он подбирает необходимый подраздел и т.п. У иерархической структуры очень много достоинств, но так же есть и недостаток.
Речь идет о том, что в иерархической структуре очень сложно соблюдать баланс между глубиной и шириной. Если «дерево» сайта будет расти только вглубь, то пользователям, чтобы дойти до какой-то информации, придется загрузить и просмотреть слишком много страниц, что будет раздражать пользователей. А если создать очень широкую древовидную структуру, то посетители будут вынуждены каждый раз тратить очень много времени для выбора нужной им ветки. А это тоже плохо. Таким образом, при использовании иерархической структуры сайта необходимо постоянно следить за ее разрастанием и придерживаться золотой середины.
Глава вторая
2.1 Средства, применяемые при создании страницы
Сайт я создавал на локальном сервере «Denwer»» под системой управлением сайтом «CMS Joomla 1.5». Потом перенес сайт с Денвера на бесплатный хостинг «Red Z».
Denwer - это набор дистрибутивов
и программная оболочка, предназначенные
для создания и отладки сайтов
на локальном ПК под
Joomla - система управления содержимым (CMS), написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных MySQL. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL.
Сейчас я расскажу об основных компонентах и плагинах для Joomla, которыми я пользовался для улучшения сайта:
1) aiContactSafev.2.0.2.d.stable бесплатный
компонент создания форм
2) Apoll бесплатный компонент, менеджер опросов, который отображает результаты в виде анимированной круговой диаграммы. С помощью этого компонента я организовал опрос «Оцените мой сайт» на данный момент 15 пользователей уже проголосовало показав следующую статистику 80% считают что сайт сделан на отлично.
3) Компонент JComments позволяет посетителям сайта оставлять комментарии к различным материалам, размещенным на сайте.
4) JoomlaPack компонент для резервного копирования сайта. Компонент создает полную резервную копию (backup) сайта вместе с дампом базы данных в одном архиве, прямо из административной панели Joomla. Архив бэкапа может быть неограниченного размера, или разбит по частям. Кроме того, можно сделать резервную копию только файлов сайта или базы данных.
5) JoomTest бесплатный компонент для организации тестирования посетителей на сайте. Расширение позволяет создавать категории, которые могут содержать тесты из неограниченного количества вопросов, а так же задать последовательность вопросов.
6) PhocaGallery - это галерея изображений. Она включает в себя компонент, модули и плагины, и позволяет пользователям просматривать изображения или видео Youtube в самых разных стилях. Изображения, по-умолчанию, отображаются только внутри компонента. Необходимо использовать PhocaGallery Plugin для отображений изображения в статьях (и Phoca Gallery кнопки плагина - для более легкого добавления изображений в статьи). Изображения могут отображаться в виде слайд-шоу в статьях с помощью плагина Phoca Галерея Слайд-шоу или они могут быть выведены в различных позициях для модулей.
7) Russian social bookmarks buttons это плагин, который добавляет в статью кнопки, для опубликования статьи или ссылки в популярных социальных сетях. Плагин вставляет кнопки автоматом, можно вставлять и вручную с помощью специального тега, в любое место статьи.
8) J2top - плагин, который добавляет на сайт кнопку для быстрого возвращения посетителей сайта на начало страницы. Имеет массу настроек такие как размер кнопки, цвет, размер шрифта, отступы, позиция слева или справа и т.д.
Я так же подключил на сайт средство веб-аналитики Google Analytics. Эта служба позволяет оценить трафик на веб-сайт и эффективность различных маркетинговых мероприятий. Мощные, гибкие и очень простые в использовании функции.
Мой сайт расположен на бесплатном хостинге «Red Z». Адрес сайта www.ulpig.jr1.ru что бы зайти в административную панель сайта необходимо набрать в адресной строке www.ulpig.jr1.ru/administrator и ввести логин и пароль. Хостинг «Red Z» я выбрал потому что он соответствует всем требованиям современных хостингов. Хостинг бесплатный берется только плата за отключение рекламы на сайте и увеличение дискового пространства на сервере на данный момент плата составляет 20 рублей в месяц. Предоставляется домен третьего уровня бесплатно, так же есть дополнительная возможность подключение домена второго уровня, что немало важно для сайта.
2.2 Создание Web-страницы с помощью языка HTML
Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использован любой текстовый редактор.
Обычно HTML-документ - это файл с расширением .html или .htm, в котором текст размечен HTML-тегами (англ. tag - специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Веб-документа. Текст самих тегов Веб-браузером не отображается.
Все теги начинаются символом '<' и заканчиваются символом '>'. Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация:
<p>Информация</p>
Здесь стартовым тегом является тег <P>, а завершающим - </P>. Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках <> стоит символ '/' (слэш).
Браузер, читающий HTML-документ, отображает его в окне, используя структуру HTML-тегов. В каждом HTML-документе должны присутствовать три главных части:
A) Объявление HTML;
B) Заголовочная часть;
C) Тело документа.
A) Объявление HTML
<HTML> и </HTML>. Пара
этих тегов сообщает программе
просмотра (браузеру) что между
ними заключен документ в
<HTML>
.
.
.
</HTML>
B) Заголовочная часть.
<HEAD> и </HEAD>. Между
этими тегами располагается
<HTML>
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
</HTML>
C) Тело документа.
Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами <BODY> и </BODY>. Первый из них должен стоять сразу после тега </HEAD>, а второй - перед тегом </HTML>. Тело HTML-документа - это место, куда автор помещает информацию, отформатированную средствами HTML.
<HTML>
<HEAD>
<TITLE> Моя первая страница</TITLE>
</HEAD>
<BODY>
..............................
</BODY>
</HTML>
Теперь мы можем написать HTML-код нашей странички:
<HTML>
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
<BODY>
Здесь будут мои страницы!
</BODY>
</HTML>
В разделе BODY все символы
табуляции и конца строк
- Разработка интернет форума
- Разработка информационного web-сайта типографии ООО Камчатпресс
- Разработка информационного обеспечения системы менеджмента качества информационных услуг
- Разработка информационной системы
- Разработка информационной системы анализа зависимости между вариациями геокосмических агентов и психофизиологическим состоянием орган
- Разработка информационной системы для средней школы
- Разработка информационной системы на MS Access
- Разработка интерактивных технических руководств по эксплуатации комплексов медицинских приборов и аппаратов
- Разработка интернет магазина
- Разработка Интернет-магазина комнатных растений и цветов (для Кировской области)
- Разработка интернет – магазина по продаже программного обеспечения
- Разработка интернет – магазина по продаже программного обеспечения
- Разработка интернет магазина продаж телекоммуникационного оборудования на примере ИП Стрелкова М
- Разработка Интернет-представительства для задач риэлтерской деятельности
