Автор работы: Пользователь скрыл имя, 19 Мая 2016 в 17:17, дипломная работа
Интернет – неотъемлемая часть жизни современного человека, источник информации об окружающем мире. Интернет дает множество возможностей для общения, стирая, таким образом, любые границы.
При этом важно, чтобы использование Интернет стало максимально комфортным для пользователя, и он концентрировался не на процессе получения информации, а на самом ее восприятии: информация должна быть читабельной и хорошо структурированной, запросы соответствовать ожиданиям.
В основе такой системы заложен метод обучения, который получил название «Природный процесс обучения» (англ. natural learning manner). Дистанционное обучение — это демократичная простая и свободная система обучения. Сейчас активно используется жителями Европы для получения дополнительного образования. Студент, постоянно выполняя практические задания, приобретает устойчивые автоматизированные навыки. Теоретические знания усваиваются без дополнительных усилий, органично вплетаясь в тренировочные упражнения. Формирование теоретических и практических навыков достигается в процессе систематического изучения материалов и прослушивания и повторения за диктором упражнений на аудио и видеоносителях.
Телеприсутствие. Существует много различных способов дистанционного обучения. Например, дистанционное присутствие с помощью робота R.Bot 100. Сейчас в Москве в одной из школ, идёт эксперимент по такому виду дистанционного обучения. Мальчик-инвалид, находясь дома за компьютером, слышит, видит, разговаривает при помощи робота. Учитель задаёт ему вопросы, он отвечает. При этом и учитель видит ученика, потому что на роботе находится монитор. При этом у мальчика создаётся почти полное впечатление, что он находится в классе вместе со своими сверстниками на уроке. На переменах он может также общаться со своими одноклассниками.
Веб-сайт - это набор связанных гиперссылками веб-страниц (файлов, размеченных на языке HTML), объединенных общей тематикой, и доступных в Интернет по прикладному протоколу HTTP (HTTPS).
В настоящее время известно множество прикладных программ, называемых редакторами HTML с помощью которых можно создавать сайты. К редакторам HTML относятся: визуальные и текстовые редакторы. Визуальные редакторы поддерживают текстовый режим работы, режим кода.
Визуальные редакторы HTML работают по принципу WYSIWYG (What You See Is What You Get — Что Вы видите, то и получаете). Для создания сайта в визуальном редакторе нет необходимости изучать язык разметки HTML. Технология создания сайта в визуальном редакторе аналогична технологии создания документа в редакторе Word.
Текстовые программы HTML. При создании сайта в текстовом редакторе HTML необходимо знать языки разметки или web программирования (HTML, PHP, XML, CSS, ASP и другие) с помощью которых будет создаваться сайт. Веб-страницы, созданные в текстовом редакторе, являются "легкими" (имеют небольшие размеры), так как содержат чистый программный код без дополнительных служебных слов, которые обычно формируются в визуальных редакторах HTML.
Мы же не будем использовать сторонних программ, а создавать все с нуля.
Язык гипертекстовой разметки HTML - язык разметки исходного текста веб-документа, включающий специальные символы (теги), которые позволяют веб-браузеру сконструировать из текста дизайн.
HTML предоставляет
возможности форматирования и
обработки форм, управления шрифтами,
отображения информации в
Технология таблиц каскадных стилей (CSS) – это набор правил оформления и формирования, которых может быть применен к различным элементам Web-страницы. В стандартном языке HTML для присвоения какому-либо элементу определенных свойств, – таких как цвет, размер и тому подобное – приходится каждый раз их заново описывать. Применяя технологию CSS, достаточно будет один раз описать свойства элементов и определить это описание как стиль.
Всегда необходимо выдерживать принятый стиль. Если сайт с разветвленной структурой, необходимо оформить его страницы одинаково, т.е. выдержанными в рамках одного стиля. На всех страницах должны быть одни и те же управляющие элементы, одинаковые интервалы и подобные шрифты.
При разработке сценариев интерактивного управления используем интерпретируемый языка программирования: JavaScript - язык разработки сценариев интерактивного управления для Web-страниц, разработанный фирмой Netscape на основе языка Java (Java - разработка фирмы Sun Microsystems). Поддерживается всеми современными браузерами.
PHP - язык программирования, специально разработанный для написания web-приложений (скриптов, сценариев), исполняющихся на Web-сервере. PHP способен генерировать и преобразовывать не только HTML документы, но и изображения разных форматов - JPEG, GIF, PNG, файлы PDF и FLASH. PHP способен формировать данные в любом текстовом формате, включая XHTML и XML. PHP поддерживает большое количество баз данных: MySQL, MSQL, Oracle, PostgreSQL, SQLite и др.
Все вышеописанные средства в совокупности с DOM создают новый псевдоязык DHTML (динамический HTML).
Нет чёткого правила по глубине или ширине структуры сайта. Правило трёх кликов может помочь упростить структуру сайта. Рассмотрим возможные способы реализации.
Это самая простая структура сайта. Web-страницы идут одна за другой, и пользователь должен просматривать их как слайд-шоу. В линейной структуре не существует разделения контента на уровни. Все страницы на таких сайтах равноправны, и их должен увидеть каждый посетитель. Несмотря на простоту реализации линейной структуры, недостатков у нее гораздо больше, нежели достоинств. Поэтому область ее применения четко ограничена. Она может использоваться на имиджевых сайтах, сайтах-презентациях и в онлайновых учебных пособиях.
Реализация линейной структуры не представляет собой абсолютно никакой сложности. Самый простой вариант сайта — набор HTML-страниц, с каждой из которых есть ссылка на последующую предыдущую страницу. Но при этом на каждой страницы обязательно должно быть какое-то заглавие и ссылка на первую страницу. Иначе посетители, попавшие в середину сайта, например, с поисковой системы, ничего не поймут и почти наверняка покинут проект. Кроме того, очень полезно бывает показывать общее число страниц и как-то выделять номер той из них, на которой человек находится в данный момент. Иначе просмотр проекта превратится для посетителей в путешествие в неизвестность.
Рисунок 2.1- линейная структура сайта
Основой данной структуры является простое линейное размещение web-страниц. Однако на сайтах, построенных по этому принципу, посетители могут проявить некоторую инициативу, облегчив для себя поиск нужной информации. Под альтернативами в данном случае понимается выбор между двумя ветками. Чаще всего подобная структура используется для сбора информации о посетителе. Примером здесь может служить процесс регистрации клиента на сайте какой-то фирмы, оказывающей определенные услуги. В этом случае все люди начинают работу со стартовой страницы. Однако потом частным лицам предлагается ввести одну информацию, а представителям коммерческих структур — другую. После этого и те, и другие попадают на одну и ту же страницу.
Линейная структура с альтернативами и вариантами удобна в том плане, что с одной стороны она позволяет web-мастерам контролировать деятельность посетителей, направив их в определенное русло. А с другой стороны проявить некоторую инициативу, которая позволит им, во-первых, почувствовать свободу, а во-вторых, облегчить доступ к нужной именно им информации.
Рисунок 2.2 - структура с альтернативами и вариантами
2.2.3 Линейная структура сайта
с ответвлениями.
Это тоже контролируемая структура, которая напоминает дорогу с ответвляющимися от нее время от времени тупиковыми тропинками. То есть посетитель последовательно переходит с одной страницы на другую. Если информация, размещенная на какой-то из страниц, его заинтересовала, и он хочет узнать подробности, то может перейти на ответвление, а потом вернуться обратно на основную «дорожку».
Главным преимуществом рассматриваемой структуры является то, что к ней легко перейти с обычного линейного размещения web-страниц. Такое часто бывает, когда созданный однажды сайт перестает удовлетворять возросшим требованиям, а глобальная переделка по тем или иным причинам невозможна. В этом случае web-мастер может быстро и без всяких проблем расширить проект.
Рисунок 2.3 - структура с ответвлениями
2.2.4 Древовидная
структура сайта.
Древовидная структура — самый универсальный способ размещения web-страниц. Она подходит для создания практически любых типов сайтов. Ее принцип заключается в том, что пользователь при заходе на заглавную страницу оказывается перед выбором, куда идти дальше. После перехода в нужный раздел, он подбирает необходимый подраздел и т.п. У древовидной структуры очень много достоинств, но так же есть и недостаток.
Речь идет о том, что в древовидной структуре очень сложно соблюдать баланс между глубиной и шириной. Если «дерево» сайта будет расти только вглубь, то пользователям, чтобы дойти до какой-то информации, придется загрузить и просмотреть слишком много страниц, что будет раздражать пользователей. А если создать очень широкую древовидную структуру, то посетители будут вынуждены каждый раз тратить очень много времени для выбора нужной им ветки. А это тоже плохо. Таким образом, при использовании древовидной структуры сайта необходимо постоянно следить за ее разрастанием и придерживаться золотой середины.
Рисунок 2.4 - древовидная структура
2.2.5 Решетчатая
структура.
Эта структура уже на порядок сложнее всех рассмотренных ранее. В ней все страницы также размещаются в различных ветках. Но у пользователя есть возможность перемещаться по ним не только вертикально (вверх-вниз), но и горизонтально (то есть между ветками на разных уровнях). Используется решетка в основном только в каталогах. При этом перемещение между ветками на глубинных уровнях осуществляется с помощью отсылок на рубрики в других разделах.
Использование решетчатой структуры в других проектах нецелесообразно. Во-первых, она относительно сложна в реализации. Во-вторых, обращаться с «решеткой» нужно с очень большой осторожностью, так как структура сайта может получиться очень запутанной, и посетители будут вынуждены долго блуждать в поисках нужной им информации.
Рисунок 2.5 - решетчатая структура
2.2.6 Разветвленная структура
Это более сложная структура по сравнению с древовидной. И сравнить эту структуру можно с множеством “деревьев”, которые переплетаются между собой. Примером такой структуры могут быть информационно-развлекательные порталы (Mail.ru например).
Такая структура очень объемна, и составление такой структуры может занять много времени. Более наглядно эта структура будет выглядеть, если ее представить не в виде деревьев, а в виде картины. Сделать это можно с помощью листа бумаги и цветных карандашей. Также существуют специальные программы – планировщики, например MindManager.
Главное в навигации структуры сайта — это понимание пользователем, где он сейчас и куда попадёт, если нажмёт на данную ссылку. При разработке сайта нужно упрощать структуру и делать её логичной. Остановимся на структуре, представленной на схеме ниже.
Рисунок 2.6 - структура сайта self-study.u-gu.ru
Концепция сайта – это ведущий замысел, конструктивный принцип сайта. Задача концепции – сформулировать для создаваемого сайта идеи, закладываемые в техническое задание и затем и в сам сайт. Они касаются всего: аудитории сайта, набора разделов, контента, дизайна сайта, системы навигации, удобства сайта, организационных вопросов его обслуживания.
На основании принятой концепции разрабатывается техническое задание, которое содержит четко сформулированные требования, выполнение каждого из которых проверяется по завершении работы.
Дизайн сайта предпочтительно выбрать в классическом стиле, так как его круг читателей − люди различных возрастов и социального статуса. Текстовые статьи должны гармонично сопровождаться небольшими картинками.
Цвет в дизайне играет важную роль, способствуя реализации его коммуникативной функции. Воспринимаемое визуальное сообщение благодаря цвету оказывает более сильное эмоциональное воздействие на зрителя.
Исходя из знаний о цветовом влиянии, предпочтение отдано натуральным насыщенным тонам, их контрастному сочетанию дизайна разрабатываемого сайта, а также присутствию нейтральных светлых тонов для уравновешивания акцентов.
Основное содержание необходимо разместить на светлом фоне, что облегчает восприятие текста. Так как оптически контраст белого и черного наиболее сильный, оформление разделов главного меню белым по черному будет смотреться выигрышно.
Как элемент дизайна шрифты сайта должны составлять единое целое с дизайном сайта и по размеру, и по гарнитуре, и по цвету. Как носитель информации шрифты определяют комфортность чтения материалов сайта и усталость пользователя.
Шапка являет собой «визуал» – центральное изображение композиции и самую выразительную ее часть. Она одинакова на всех страницах сайта, т.е. посетитель будет ее наблюдать (даже боковым зрением) все время своего пребывания на сайте, что способствует запоминаемости сайта.
Рассмотрим структуру отдельной страницы. (см схему ниже )
Размещения каждого элемента обусловлено принципами юзабилити. Так логотип принято размещать в верхней части страницы, так как оттуда начинается движение взгляда. Размещение главного меню вверху страницы и по центру также выгодно выделяет его среди прочих элементов. Форма поиска для удобства расположена слева сверху и не заставляет искать себя на сайте.