РАЗРАБОТКА ОБРАЗОВАТЕЛЬНОГО САЙТА В KOMPOZER
Раздел: Научно-практическая работа студентов педагогического вуза
Журнал: Научно-практическая деятельность студентов педагогического вуза
3 июля 2010 г.
Авторы: Шадеева Наталья Васильевна
Н. В. Шадеева
РАЗРАБОТКА ОБРАЗОВАТЕЛЬНОГО САЙТА В KOMPOZER
Интернет - глобальная компьютерная сеть, охватывающая весь мир. Сегодня Интернет имеет около 400миллионов абонентов. Ежемесячно размер сети увеличивается на 7-10%. Интернет образует как бы ядро, обеспечивающее связь различных информационных сетей, принадлежащих различным учреждениям во всем мире, одна с другой.
Если ранее сеть использовалась исключительно в качестве среды передачи файлов и сообщений электронной почты, то сегодня решаются более сложные задачи распределенного доступа к ресурсам.
Сейчас интернет размещает сайты различной направленности: простые информационные, которые предоставляют информацию об организации или услугах; форумы, на которых пользователи общаться по определенной тематике; сайты с внедрением баз данных. Актуально использование таких ресурсов и в образовательных целях.
Для привлечения на информационный ресурс пользователей не достаточно просто создать несколько html-страниц, необходимо, отобрать нужную информацию, актуальную для выбранной аудитории, на которую будет рассчитан сайт, и применять соответствующие методы и приемы при разработке. Сделать сайт легким и понятным для пользователей разного уровня.
Целью данной научно-практической работы является создание информационно-образовательного сайта. Использование редактора KompoZer для разработки является актуальным в связи с переходом к использованию свободного программного обеспечения на базе операционной системы Linux.
Задачи:
1. Рассмотреть основные способы создания веб-страниц.
2. Рассмотреть понятия веб-дизайн, веб-разработка.
3. Рассмотреть основные функции программы KompoZer.
4. Разобрать этапы создания и организации сайта, на примере образовательного сайта на тему профориентации.
В первой главе работы рассматривается основная информация о веб-дизайне и разработке, работе с гипертекстом и программе KompoZer: описание интерфейса, простейших функций, основных возможностей и приёмов. Во второй главе содержится описание практической работы по созданию данного сайта.
Веб-дизайн (от англ. Web design) - отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений.
Веб-дизайнеры составляют логическую структуру веб-страниц, продумывают наиболее удобные решения подачи информации, а так же занимаются художественным оформлением веб-проекта. В результате пересечения двух отраслей человеческой деятельности грамотный веб-дизайнер должен быть знаком с последними веб-технологиями и обладать соответствующими художественными качествами.
Веб-разработка - процесс создания веб-сайта или веб-приложения. Термин включает разработку приложений электронной коммерции, веб-дизайн, программирование для веб на стороне клиента и сервера, а также конфигурирование веб-сервера.
Основные способы создания страниц
Создание Web-страницы с помощью языка HTML
Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы. Обычно HTML-документ - это файл с расширением .html или .htm, в котором текст размечен HTML-тегами (англ. tag - специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Веб-документа. Текст самих тегов Веб-браузером не отображается.
Технология Flash
Macromedia Flash - это запатентованное мощное программное средство разработки анимации и графических приложений, используемое для создания и публикации динамического контента, медиа и интерактивных приложений в Интернет. Эта технология не является стандартом, она не создавалась именно для разработки веб-приложений. Технология Flash дает полную свободу дизайнерам, не загоняя их в рамки, дает возможность точного контроля над дизайном страницы и всем, что может быть анимировано и сделано «оживленным».
Таблицы стилей.
CSS (Cascading Style Sheets) - технология описания внешнего вида документа, написанного языком разметки. Он управляет шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другим, в общем, управляет отображением HTML. Каждый стиль описывается набором кодов. Иногда для реализации определенной идеи дизайнера приходится делить страницу более чем на 20 частей, и стиль для каждой описывать отдельно. Именно поэтому разработка страниц с использованием CSS считается довольно кропотливой и громоздкой.
Работа в KompoZer
KompoZer - это законченная система для создания веб-сайтов, которая объединяет в себе управление веб-файлами и WYSIWYG редактор веб-страниц.
KompoZer - чрезвычайно легкая в использовании программа, которая является помощником для начинающих пользователей, которые хотят создать привлекательный и профессионально выглядящий веб-сайт без дополнительного изучения HTML и веб-кодинга.
Программа обладает поддержкой XML, CSS и JavaScript, которые являются самые расширяемые средства редактирования.
Форматирование текста
Вставка горизонтальных разделителей
Вставка изображений
Вставка таблиц
Создание ссылок
Дипломный проект представляет собой образовательный сайт на тему профориентации школьников, абитуриентов. Он содержит разнообразные статьи, как для самых абитуриентов, так и для родителей, а также тесты на определение интересов и др.
Подбор материала
Первый этап выполнения работы - подбор теоретического материала с использованием материалов по профориентации для педагогической практики и возможностей Интернет.
Был отобран текстовый материал с локальных и глобальных ресурсов, который, по мнению разработчика, был бы интересен абитуриенту сегодня. Это не просто официальная информация о Вузах, которую можно без труда найти на сайтах самих Вузов, а статьи от 3 лиц, которые имеют разносторонние подходы к проблеме выбора будущей профессии.
Данный сайт является образцом, который может быть использован в дальнейшем для создания аналогичного образовательного сайта, например, это может быть сайт класса или сайт спортивной секции или на свободную тему.
Каркас сайта
На главной странице представлена информация о профориентации, как главного содержания данного ресурса, анонс последних статей. Если пользователь сайта заинтересовался информацией, то он сможет ознакомиться с полной версией статьи, кликнув по ссылке.
Сайт имеет возможность дополняться.
Стартовая страница представляет собой HTML-документ, который является шаблоном для всех остальных страниц сайта. Все файлы сайта помещены в отдельную папку «сайт». Графическое сопровождение страниц находится в этом же каталоге в папке «images», чтобы ссылки были относительными. Ссылки будут рабочими при последующем выгружении сайта в интернет.
Создание страниц
Выбранный текст статей небольшими блоками был перенесен в HTML-редактор и размещен на странице согласно установленному образцу. Графические элементы выступали в роли интерактивных, дополнительных элементов.
При создании сайта предпочтительнее затратить дополнительно времени на минимизацию веса страниц, чтобы в дальнейшем обеспечит удобную работу с сайтом, быструю подкачку страниц, просмотр большего объёма информации, при скачивании меньшего количества килобайт и мегабайт.
Оптимизирована графика и продуманы элементы навигация. Основная задача оптимизации - найти удачный компромисс между скоростью загрузки страницы и качеством представленных на ней изображений. Навигация является одним из важнейших этапов в создании интерактивных документов, так как он позволяет объединить в единое целое несколько отдельных HTML-документов и организовать навигацию по сайту.
Отображение сайта
Для перемещения по Интернету пользователи используют различные браузеры различных фирм, версий, модификаций. Каждый из браузеров имеет особенности по отображению страниц, особенно это касается отображения стилей. Некоторые браузеры не воспринимают те или иные параметры или же по-разному их отображают. В новых версиях исправляются те или иные багги, однако, не следует исключать то, что некоторые пользователи ещё не обновили свое ПО. Поэтому в форматировании информации использовались только стандартные шрифты. В данном случае, использовался стандартный элемент Html.
Заключение
Результатом выполненной работы является сайт посвященный теме профориентации.
Сайт предоставляет быстрый доступ ко всей информации размещённой на ресурсе, а также рассчитан на дальнейшее усовершенствование и обновление. Кроме того, обработать тестирования, предложенные на ресурсе, и представить их в тестовом виде, для прохождения их и получение готовых результатов онлайн.