Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити icon

Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити



НазваниеКонспект урока №1 Современные подходы к оформлению сайтов. Юзабилити
Дата конвертации09.08.2013
Размер107.78 Kb.
ТипУрок

Тема "Основы web-дизайна" в школьном курсе информатики

Конспект урока № 1
Современные подходы к оформлению сайтов. Юзабилити.


Цели урока:

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

  • побудить учащихся к анализу различных ситуаций, диктующих то или иное оформление сайта,

  • познакомить с понятием юзабилити,

  • сформулировать основные рекомендации, повышающие юзабилити web-сайта

Оборудование и материалы к уроку:

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

^ Подготовка к уроку:

1) на партах учащихся находятся тексты задания “Макет” (см. Приложение1.doc)

2) подготовлены (ярлыки на рабочем столе) демонстрационные сайты (1, 2, 3)

3) на предыдущем уроке в качестве домашнего задания учащиеся получили статьи для ознакомления и анализа (см. Приложение0.txt)

Ход урока:

1. Орг. момент, повторение (3 минуты)

Тема сегодняшнего урока – “Современные подходы к оформлению сайтов. Юзабилити” (тема урока представлена на экране).

На предыдущих уроках мы получили знания о технической стороне сайтостроения.

^ Учитель: Какие знания нам необходимы для того, чтобы создать web-страницу?

(Предполагаемые ответы учеников: знания языка HTML, по крайней мере, основных тегов).

^ Зачем используют web- редакторы, в частности, MS FrontPage?

(Предполагаемые ответы учеников: ускорение работы; возможность сделать сайт, обладая минимальными знаниями; автоматизация рутинных операций…)

^ О каких “минусах” web-редакторов необходимо помнить?

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

^ Какой технический прием используется для того, чтобы структура сайта соблюдалась при разных режимах просмотра?

(Предполагаемые ответы учеников: авторская или готовая макетная таблица).

Есть ли вопросы?

Учитель: задает вопросы на повторение
Ученики: отвечают
Результат: актуализация знаний, повторение

^ 2. Тест (5 минут)

А сейчас вы выполните тестовое задание по этой теме. (тест – см. Приложение2.txt)

Какие задания вызвали затруднения?

Учитель: инструктирует, следит за ходом выполнения теста, констатирует получение результатов
Ученики: отвечают на вопросы, осуществляют проверку
Результат: проверка усвоения знаний

^ 3. Обсуждение домашнего задания. (10 минут)

Технические навыки для создания сайтов необходимы, однако не стоит забывать о том впечатлении, которое производит сайт на пользователя.

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

^ Какие сегодня существуют подходы к оформлению сайтов? В чем заключается их суть.

Есть ли среди вас сторонники того или иного подхода?

Какие весомые аргументы приводят сторонники “содержательного” подхода?

Как обосновывают свою позицию дизайнеры-графики?

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

В ходе дискуссии, как правило, удается подвести класс к выводу о том, что в зависимости от цели сайта, главную роль может играть и содержание, и оформление. В этом помогает демонстрация различных работ. Я предпочитаю демонстрировать работы прошлого учебного года (учеников другой параллели), чтобы оценка работ была более объективной. Примеры скриншотов сайтов (сайт1.jpg, сайт2.jpg) – см. приложение.

Какую задачу вы выводили на первый план – оформление или содержание, когда работали над проектом своего сайта в “Блокноте”? А в web-редакторе?

(Предполагаемые ответы учеников: в “Блокноте” - содержание, так как не имели достаточных навыков для оформления; в редакторе смогли больше внимания уделить оформлению, так как меньше времени тратили на рутинную работу).

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

^ 4. Понятие юзабилити. (10 минут)

В статьях вы встречались с понятием “юзабилити”. На сегодняшний момент специалисты не дали окончательного определения.

^ Как вы понимаете, что входит в понятие “юзабилити”?

(Предполагаемые ответы учеников: задача юзабилити – сделать так, чтобы пользователю было удобно и понятно, как пользоваться ресурсом).

Учитель печатает определение на основании ответов, полученных от учеников. Этот текст ниже темы урока проецируется на экран.

Юзабилити – набор качеств web-сайта, влияющих на эффективность работы и удобство использования продукта.

Откройте главную страницу сайта 3 (см. приложение скриншот сайт3.jpg) “Enterprise”.

^ С помощью каких приемов автор сайта старается повысить юзабилити?

(Предполагаемые ответы учеников: ученики отмечают структурированность информации – разделы, абзацы, списки; наличие навигационной панели, разумное цветовое решение, подборку шрифтов…).

Попробуем сформулировать общие рекомендации, как сделать сайт понятным и эффективным в использовании.

Высокий уровень юзабилити предполагает:

1) понятный интерфейс:

  • панель навигации

  • одинаковые названия разделов и ссылок

2) эффективный поиск нужной информации:

  • читаемость текста

  • выделение разделов

  • структура информации (списки, таблицы)

  • один абзац – одна идея

Учитель набирает рекомендации, они проецируются на экран.

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

Откройте тетради, запишите тему сегодняшнего урока и суть понятия юзабилити.

Пока ученики переписывают с экрана информацию, текст рекомендаций распечатывается, а учитель раскладывает его на столы.

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

^ 5. Проектная деятельность. (10 минут)

По мнению дизайнеров, особое внимание при создании сайта следует уделять первой (главной) странице.

Почему?

(Предполагаемые ответы учеников: это лицо сайта; от того, как выглядит главная страница, зависит, пойдет ли пользователь дальше по сайту…).

После того, как мы сформулировали рекомендации, применим их на практике.

Создайте средствами web-редактора макет первой страницы сайта на заданную тему, стараясь учитывать интересы потенциального пользователя.

На парте у каждого лежит задание (см. Приложение1.doc).

Продумайте, как вы прокомментируете свой макет.

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

^ 6. Демонстрация лучших проектов. (5 минут)

Учитель: отбирает наиболее характерные проекты и демонстрирует их классу.
Ученики: комментируют свой макет, анализируют чужие работы.
Результат: закрепление понятия.

^ 7. Итог урока:

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

^ 8. Домашнее задание:

Продумать идеи сайтов, где на первом месте стоял бы 1) дизайн, 2) содержание. Привести 2 – 3 довода в пользу каждой концепции.

9. Оценки за работу на уроке… Урок окончен, спасибо. До свидания.

Конспект урока № 2
Формат и стиль сайта


^ Цели урока:

- продемонстрировать разницу между понятиями "формат" и "копия"

- пробудить у учеников мысль, что часто содержание диктует форму представления информации

- усовершенствовать навыки анализа сайта

- развить творческие способности учеников

^ Оборудование и материалы к уроку:

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

Подготовка к уроку:

  1. осуществить подключение к Интернету

  2. выложить в открытый доступ демонстрационные материалы (см. Приложение3.pdf)

  3. разложить групповые задания (см. Приложение4.txt)

  4. подготовить текст статьи для анализа (см. Приложение5.txt)

Ход урока:

^ 1. Орг. момент, обсуждение результатов домашнего задания (3 - 5 минуты)

Предложите концепции сайтов, где на первое место выйдет оформление или содержание.

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

^ 2. Проблемное групповое задание (7 - 10 мин.)

Для этого необходимо разбиться на группы (по 2 - 3 человека) и один ученик (по желанию) выступает в роли независимого эксперта (файл заданий – Приложение4.txt, Приложение5.txt).

Класс разбивается на 3 – 4 группы (по 2 – 3 компьютера на группу), каждая группа анализирует сайты одного из направлений и находит общие черты в оформлении.

1 группа - поисковые системы, 2 группа - новостные сайты, 3 группа - интернет-магазины.

Индивидуальное задание (одному из учеников по желанию) – изучить статью А. Лебедева в §25 руководства.

^ 3. Анализ результатов задания. Понятие “формат”. (5 минут)

Далее, пользуясь демонстрируемой на большом экране презентацией, представители каждой из групп знакомят всех с результатами своего исследования. После выступления всех групп ребенок, изучавший статью, подводит итог исследования и объясняет понятие "формат". (В данной работе презентация приводится с сокращениями).

Итак, мы увидели, что среди сайтов определенного направления можно увидеть много общего и это объясняется тем, что к оформлению, структуре сайта применимо понятие “формат”.

Запишите в тетради тему, определение формата (см. Презентацию из приложения).

Ученики: выполняют исследовательскую деятельность в ходе групповой работы
Учитель: осуществляет общее руководство и консультирует.
Результат: реализация проблемного метода объяснения нового материала,
знакомство с новым понятием, развитие аналитических способностей,
умения делать выводы, навыков групповой самостоятельной работы.

^ 4. Разделение понятий "формат" и "копия" (5 мин.)

Одно дело – сходные элементы оформления, совсем другое – прямое заимствование, копирование дизайна. Стоит разделять понятия формат и копия.

На сайте студии Артемия Лебедева вы найдете музей клонов, в котором демонстрируются сайты, являющиеся результатом плагиата. (см. Приложение3.pdf)

Учитель: демонстрирует материалы и комментирует
Ученики: аудиальное и визуальное восприятие.
Результат: расширение понятия.

^ 5. Обсуждение понятия "стиль сайта" (8 - 10 мин)

Почему показанные ранее сайты были клонированы?

Чем они обладали?

В чем это выражалось?

Как правило, кто-то из учеников произносит слова “стиль”, “стильный”.

Познакомимся с еще одним сайтов студии Лебедева – сайтом www.akunin.ru

Даже если вы не знакомы с творчеством писателя, попробуйте предположить, о чем, о каком времени его произведения? Как вы узнали? Какие визуальные элементы позволяют это предположить?

(Предполагаемые ответы учеников: логотип, шрифты, иллюстрации, стиль языка…)

Специалисты выделяют следующие элементы стиля сайта: (см. презентацию)

Запишите в тетрадь определение стиля и составляющие его компоненты.

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

Ученики: самостоятельно просматривают загруженный сайт на локальных компьютерах,
фиксируют основные элементы, идет обсуждение мнений учеников в свободной форме.
Учитель: консультирует и направляет беседу.
Результат: подведение к новому понятию, развитие критического мышления,
формулировка нового понятия

^ 6. Творческое групповое задание (10 мин.)

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

Задание: оформить (графическими средствами) титульную страницу потенциального сайта организации "***", если это: (у каждой группы свое оригинальной направление). (см. Приложение6.txt)

Ход выполнения задания:

2 – 3 минуты необходимы участникам, чтобы обговорить общие вопросы. Далее 1 из участников создает любыми возможными средствами заголовки разного уровня (желательно, имеющие смысл), 2 участник создает панель навигации, 3 участник разрабатывает логотип (можно взять из библиотеки рисунков), 4 участник осуществляет конструирование сетки сайта и группировку созданных объектов на своем компьютере.

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

^ 7. Подведение итогов (3 - 5 мин.)

Удалось ли группе (1, 2, 3…) выдержать страницу в едином стиле? Что говорит о выдержке единого стиля страницы? Почему, несмотря на общее название фирмы, сайты групп так отличаются?

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

^ 8. Домашнее задание:

Любыми доступными графическими средствами выразить стиль оформления сайта следующей тематики (на выбор):

- сайт похоронного бюро "Милости просим"

- сайт цветочного магазина "Аленький цветочек"

- сайта съезда любителей экстремальных видов спорта

- сайт пожарной дружины "Взвейтесь кострами"

- сайт ненавистников (любителей) (Филиппа Киркорова, манной каши, и т.п.) и т. д.

^ 9. Оценки за работу на уроке… Урок окончен, спасибо. До свидания.

Урок №3
Критерии оценки сайта как творческого проекта


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

В любом случае, цель урока – выработка критериев всесторонней оценки сайта.

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

Многие идеи, изложенные в этом материалы, были разработаны при обучении на курсах




Похожие:

Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити iconЛ. А. Мишина Логистика создание и оптимизация сайтов. Курсы по созданию сайтов сравнение сайтов конкурентов и другие виды анализа Конспект
В предлагаемом издании представлены ответы на экзаменационные ответы по логистике
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити iconКонспект урока по дисциплине: «Детская литература» Тема: «Современные писатели природоведы»
Тема: «Современные писатели = природоведы» (Пришвин М. М„ Бианки В,В, Чарушин Е. И.)
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити iconСеминар по дополнительному образованию «Современные подходы в организации каникулярного времени в удод»
«Современные подходы в организации каникулярного времени в удод». Тема семинара была определена педагогическим коллективом цдт и...
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити iconIv окружная педагогическая конференция «Современные подходы к организации воспитания обучающихся в образовательном учреждении» Военно-патриотический клуб
«Современные подходы к организации воспитания обучающихся в образовательном учреждении»
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити iconКонспект урока «Основы языка html» 8 класс фио (полностью) Горбачёва Галина Анатольевна
Урок 1 Коммуникационные технологии. Разработка Web-сайтов с использованием языка разметки гипертекста html. (§ 1, 2)
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити icon«Современные подходы к преподаванию музыки как важного средства духовно – нравственного формирования личности школьника» Автор опыта: Кононова Наталия Анатольевна, учитель музыки моу «Никаноровская сош»
«Современные подходы к преподаванию музыки как важного средства духовно – нравственного формирования личности школьника»
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити iconПланирование работы школьной библиотеки: современные подходы и направления
Модернизация современной школы, новые подходы в обучении потребовали соответствующего информационно-библиотечного обеспече-ния как...
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити iconСправка по итогам единого методического дня моу «сош №23» Единый методический день прошел 30. 11. 2010 г по теме: «Современные подходы к формированию и реализации содержания образования»
Единый методический день прошел 30. 11. 2010 г по теме: «Современные подходы к формированию и реализации содержания образования»,...
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити iconСовременные концепции и подходы к воспитанию Современные российские концепции воспитания
Концепции социального воспитания (Б. П. Битинас, В. А. Бочарова, С. В. Дармодехин, А. В. Мудрик, Г. Н. Филонов, М. Е. Шилова и др.),...
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити iconКонспект урока темы «Факторы эволюции». Тип урока: изучение нового материала. Вид урока: объяснительный урок. Цель урока: сформировать знания о факторах эволюции как движущих
План конспект урока темы «Факторы эволюции». Тип урока: изучение нового материала
Разместите кнопку на своём сайте:
Документы


База данных защищена авторским правом ©znanie.podelise.ru 2000-2014
При копировании материала обязательно указание активной ссылки открытой для индексации.
обратиться к администрации
Документы