Инфоурок / Информатика / Конспекты / Урок на тему "Организация навигации на сайте"
Обращаем Ваше внимание: Министерство образования и науки рекомендует в 2017/2018 учебном году включать в программы воспитания и социализации образовательные события, приуроченные к году экологии (2017 год объявлен годом экологии и особо охраняемых природных территорий в Российской Федерации).

Учителям 1-11 классов и воспитателям дошкольных ОУ вместе с ребятами рекомендуем принять участие в международном конкурсе «Законы экологии», приуроченном к году экологии. Участники конкурса проверят свои знания правил поведения на природе, узнают интересные факты о животных и растениях, занесённых в Красную книгу России. Все ученики будут награждены красочными наградными материалами, а учителя получат бесплатные свидетельства о подготовке участников и призёров международного конкурса.

ПРИЁМ ЗАЯВОК ТОЛЬКО ДО 21 ОКТЯБРЯ!

Конкурс "Законы экологии"

Урок на тему "Организация навигации на сайте"

библиотека
материалов

Виды навигации между страницами сайта

Цели: освоить виды навигации; научиться проектировать сайт с удобным для пользователя способом навигации; научиться отделять собственные потребности от потребностей пользователя предлагаемого автором сайта.

Ход урока

I. Организационный момент

II. Актуализация знаний

  • Перечислите этапы создания сайта. (Этапы создания сайта включают следующие пункты: анализ и проектирование сайта; информационное наполнение сайта; креатив, или визуальная, составляющая сайта; написание кода; тестирование; публикация; раскрутка; поддержка.)

  • Какой из этапов наиболее значимый и почему? (Наиболее значимым этапом является первый этап, когда анализируется и проектируется будущий ресурс. Именно здесь закладываются основные требования к веб-ресурсу и фактически задается тон всей работе.)

  • При разработке проекта сайта заказчик предъявляет требования, которые могут негативно отразиться на посещаемости сайта. Ваши действия? (Необходимо постараться убедить заказчика, что основной характеристикой хорошего сайта является его посещаемость. Снижение посещаемости может негативно сказаться, например, на окупаемости содержания самого сайта, не говоря уже о потере потенциальных партнеров, покупателей, инвесторов и т. д.)

  • Пропишите алгоритм тестирования сайта. (Тестирование любой программы, в том числе и сайта, разбивается на несколько этапов: альфа-версия - ошибки еще замечаются самими разработчиками; бета-версия, когда разработчики ошибки перестают замечать.)

III. Теоретический материал урока

Способ перехода между документами сайта называют навигацией, которая позволяет пользователю иметь четкое представление о структуре сайта и возможности перемещения от страницы к странице. Под этим понятием понимают не только способ перехода от страницы к странице, но вид и представление ссылок. По этой причине к навигации относят элементы страницы, которые имеют к навигации косвенное отношение, например меню. Тем не менее это уже связанные понятия, и, подразумевая навигацию по сайту, обычно упоминают и меню, с помощью которого пользователь загружает в окно браузера требуемые веб-страницы.

В зависимости от типа сайта различают несколько видов навигации: вложенные страницы, линейная и иерархическая навигация.Первый вид еще называют «хлебными крошками», это самый простой и наглядный видо навигации, котороый реализуется в виде последовательной строки. При этом данная схема позволяет отслеживать, где именно пользователь находится в общей схеме сайта в данный момент времени. Например, если использовать буквенную навигацию, тогда получим следующий вид: Главная / Основные понятия / Вопросы и предложения / Гостевая.

В качестве разделителей лучше использовать символ больше (>), слэш (\) или обратный слэш (/). Символ вертикальная черта (|) в данном случае не годится, он плохо показывает вложенность пунктов. Начинать желательно всегда с главной страницы, чтобы показать начало сайта. Последний пункт должен совпадать с на званием текущей страницы, при этом он не должен быть ссылкой. Если такой текст сделать жирным, то он будет выделяться на фоне остальных пунктов. В некоторых случаях такой необходимости нет, поэтому текст без ссылки оставляем обычного начертания.

Линейной называется навигация, при которой происходит последовательный переход от страницы к странице. Такой тип характерен для просмотра серии фотографий или однотипных документов. Примерами линейной навигации будут ссылки типа:

< Вперед | Назад > « Предыдущая страница | Следующая страница »

Переход необязательно может быть последовательный, как правило, предлагается набор страниц, к которым сразу можно перейти. Например, поисковые системы показывают первую страницу
результатов поиска и дают возможность перейти сразу ко второй,
пятой или еще дальше.

hello_html_m4480bfe1.png

Линейная навигация дает лишь представление о том, что про исходит переход на другую страницу, но, как правило, не говорит о ее содержании. Если показан список с номерами страниц, то представить, за какой из них скрываются нужные материалы, невозможно. Так, поисковые системы сортируют результат поиска по релевантности, другими словами, на первой странице оказываются ссылки на ресурсы, наиболее удовлетворяющие условиям поиска.

Предполагается, что последующие страницы показывают результат, далекий от желаемого. Однако это может оказаться не так, и приходится просматривать все страницы, чтобы понять, действительно ли они содержат нужную ссылку или нет.

Список из большого количества страниц занимает много места и неудобен для просмотра. В этом случае большую часть вариантов сокращают, заменяя их многоточием. Но тогда получается, что быстро перейти к требуемой странице невозможно, для этого придется просмотреть часть дополнительных страниц. Несмотря на описанные минусы, линейная навигация пользуется большим успехом на сайтах, где требуется отобразить список однотипных страниц или есть необходимость последовательного перехода с одного документа на другой. Также линейная навигация может дополнять и другие виды навигации на сайте.

Наиболее распространенный и удобный вид навигации на сайтах - это иерархическая навигация, которая связывает в единую схему множество документов, позволяя эффективно перемещаться с одной страницы сайта на другую. Если страниц немного, то имеет смысл все ссылки на них размещать на каждой странице сайта, чтобы обеспечить быстрый переход между документами. В случае когда число страниц становится велико, их следует группировать по разделам и подразделам. При этом число ссылок первого уровня сокращается, но возрастает глубина вложения данных.

Рассмотрим пример навигации, где используются три раз дела. Каждый раздел может содержать подразделы или другие документы. Переход между документами в пределах одного раз дела осуществляется с любой страницы, которая входит в текущий раздел. Чтобы попасть на страницу из другого раздела, не обходимо выйти на предыдущий уровень, войти в нужный раздел и только после этого выбрать нужную страницу. Аналогом работы с иерархической навигацией служит система папок в операционной системе.

hello_html_m2c9f30e3.pngСхема иерархической навигации

Кроме названных видов навигации еще различают контекстно-зависимую, представляющую собой список ссылок на другие разделы или документы, которые связаны с данной темой. Подобная навигация характерна для новостных лент, соединяющих однотипные новости и материалы в один блок. В этом случае для каждой страницы создается индивидуальный список ссылок, формируемый по определенному принципу. Сам принцип задает разработчик на основе той логики, которую он пытается донести до читателя.

Для удобства пользователей виды навигации отражают в карте сайта, где представлен список всех разделов и документов, которые располагаются на одной странице. Такой подход при создании сайта позволяет пользователю понять структуру сайта и быстро перейти к нужному документу. Обычно посетители сайта игнорируют его карту, пытаясь найти нужную страницу самостоятельно. И лишь когда им это не удается, пользователи обращаются к карте сайта. Тем не менее для сайтов со сложной иерархической системой рекомендуется всегда добавлять эту возможность, чтобы предоставить пользователям весь набор навигаций.

IV. Закрепление изученного материала

Разработать модель навигации своего проекта, выделив ключевые понятия (базовые информационные единицы) и обосновав последовательность связей между ними.



Самые низкие цены на курсы переподготовки

Специально для учителей, воспитателей и других работников системы образования действуют 50% скидки при обучении на курсах профессиональной переподготовки.

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца с присвоением квалификации (признаётся при прохождении аттестации по всей России).

Обучение проходит заочно прямо на сайте проекта "Инфоурок", но в дипломе форма обучения не указывается.

Начало обучения ближайшей группы: 18 октября. Оплата возможна в беспроцентную рассрочку (10% в начале обучения и 90% в конце обучения)!

Подайте заявку на интересующий Вас курс сейчас: https://infourok.ru

Общая информация

Номер материала: ДБ-402399

Похожие материалы