345560
столько раз учителя, ученики и родители
посетили сайт «Инфоурок»
за прошедшие 24 часа
+Добавить материал
и получить бесплатное
свидетельство о публикации
в СМИ №ФС77-60625 от 20.01.2015
Дистанционные курсы профессиональной переподготовки и повышения квалификации для педагогов

Дистанционные курсы для педагогов - курсы профессиональной переподготовки от 6.900 руб.;
- курсы повышения квалификации от 1.500 руб.
Престижные документы для аттестации

ВЫБРАТЬ КУРС СО СКИДКОЙ 50%

ВНИМАНИЕ: Скидка действует ТОЛЬКО сейчас!

(Лицензия на осуществление образовательной деятельности № 5201 выдана ООО "Инфоурок")

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

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

библиотека
материалов
Скачать материал целиком можно бесплатно по ссылке внизу страницы.

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

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

Ход урока

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

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

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

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

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

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

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

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

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

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

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

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

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

hello_html_m4480bfe1.png

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

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

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

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

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

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

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

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

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

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


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

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

Вам будут интересны эти курсы:

Курс повышения квалификации «Табличный процессор MS Excel в профессиональной деятельности учителя математики»
Курс повышения квалификации «Современные информационные технологии и их использование в работе преподавателей. Системы автоматизированного проектирования одежды и организация технологического процесса»
Курс повышения квалификации «Основы создания интерактивного урока: от презентации до видеоурока»
Курс повышения квалификации «Внедрение системы компьютерной математики в процесс обучения математике в старших классах в рамках реализации ФГОС»
Курс повышения квалификации «Облачные технологии в образовании»
Курс «Фирменный стиль» (Corel Draw, Photoshop)
Курс «Оператор персонального компьютера»
Курс «1С: Предприятие 7.7»
Курс «3D Studio MAX»
Курс «WEB-ВЕРСТКА (HTML, CSS)»
Курс повышения квалификации «Сетевые и дистанционные (электронные) формы обучения в условиях реализации ФГОС по ТОП-50»
Курс повышения квалификации «Развитие информационно-коммуникационных компетенций учителя в процессе внедрения ФГОС: работа в Московской электронной школе»
Курс профессиональной переподготовки «Информационные технологии в профессиональной деятельности: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Использование компьютерных технологий в процессе обучения в условиях реализации ФГОС»
Курс повышения квалификации «Современные языки программирования интегрированной оболочки Microsoft Visual Studio C# NET., C++. NET, VB.NET. с использованием структурного и объектно-ориентированного методов разработки корпоративных систем»

Благодарность за вклад в развитие крупнейшей онлайн-библиотеки методических разработок для учителей

Опубликуйте минимум 3 материала, чтобы БЕСПЛАТНО получить и скачать данную благодарность

Сертификат о создании сайта

Добавьте минимум пять материалов, чтобы получить сертификат о создании сайта

Грамота за использование ИКТ в работе педагога

Опубликуйте минимум 10 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Свидетельство о представлении обобщённого педагогического опыта на Всероссийском уровне

Опубликуйте минимум 15 материалов, чтобы БЕСПЛАТНО получить и скачать данное cвидетельство

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

Опубликуйте минимум 20 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Грамота за активное участие в работе над повышением качества образования совместно с проектом "Инфоурок"

Опубликуйте минимум 25 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Почётная грамота за научно-просветительскую и образовательную деятельность в рамках проекта "Инфоурок"

Опубликуйте минимум 40 материалов, чтобы БЕСПЛАТНО получить и скачать данную почётную грамоту

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