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




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

Тема "Основы 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 Конспект урока в 10 классе (1 час) Цели урока
Методы: объяснительно-иллюстративный, аналитико-синтетический, частично-поисковый
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити. Цели урока icon Конспект урока в 10 классе (1 час) Цели урока
Штольца в романе «Обломов» и совершенствование навыков сравнительной характеристики героев
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити. Цели урока icon Тема урока: «Основы гражданского права.» Цели урока
Цели урока: сформировать у учащихся четкое осознание необходимости правового регулирования гражданских отношений (мотивация запоминания...
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити. Цели урока icon Тема урока: «Основы семейного права.» Цели урока
Цели урока: сформировать у учащихся четкое осознание необходимости правового регулирования семейных отношений (мотивация запоминания...
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити. Цели урока icon Урока: комбинированный. Цели урока
Цели урока: Формирование системы знаний по теме «Реформы Петра I», обеспечение адаптации к индивидуальным особенностям учащихся,...
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити. Цели урока icon План-конспект урока Тема урока: «Стеклянный мир» в романе Е. Замятина «Мы»
Цель урока: на основе анализа романа и исторических источников определить позицию человека в тоталитарном государстве
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити. Цели урока icon Конспект урока Тема урока : Начало Реформации в Европе. Обновление Христианства
Цель урока: Ознакомление учащихся с процессами происходящими в христианской церкви в 16 в в Европе
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити. Цели урока icon Конспект урока русского языка (2 класс)
Все этапы урока подчинены общей теме «Зимние мотивы». На заключительном этапе урока проводится определение целей проекта, способов...
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити. Цели урока icon План-конспект урока по теме: «Россия в первой мировой войне»
Цели урока: систематизировать и обобщить знания о первой мировой войне и об участии в ней России
Конспект урока №1 Современные подходы к оформлению сайтов. Юзабилити. Цели урока icon Цели урока
Цели урока: Ознакомить учащихся с проблемой антропогенного загрязнения окружающей среды, источниками загрязнения атмосферы, гидросферы,...
Вы можете разместить ссылку на наш сайт:
Школьные материалы


При копировании материала укажите ссылку © 2013
контакты
edushk.ru
Главная страница