Творческая работа «Разработка дизайна сайта» (продолжение)

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

·         познакомить с понятием юзабилити
·         сформулировать основные рекомендации, повышающие юзабилити web-сайта
·         продемонстрировать разницу между понятиями "формат" и "копия"
·         пробудить у учеников мысль, что часто содержание диктует форму представления информации
·         усовершенствовать навыки анализа сайта
·         развить творческие способности учеников
 
Ход урока
1)      Проверка домашнего задания. Анализ примеров ссылок сайтов, подобранных учащимися.
2)      Знакомство с новым материалом.
 
Сегодня web-ресурсы являются необходимым источником информации, а, кроме того, для многих учащихся могут стать средством творческой самореализации. Научившись самостоятельно конструировать простейшие сайты, ученики скоро замечают их несовершенство и стремятся изменить свою работу, сделав ее более оригинальной, яркой, запоминающейся. Научить чувству прекрасного, дизайнерскому мастерству, безусловно, за три урока нельзя. Но продемонстрировать детям разные точки зрения (может быть, они найдут в спорах авторитетов аргументы для своей точки зрения), показать некоторые приемы и средства из арсенала дизайнеров-профессионалов мне кажется правильным. Хочу заметить, что эти уроки всегда проходят в горячих (но конструктивных) спорах, вызывают живой интерес у всех ребят, поражают буйством фантазии и оригинальностью некоторых идей.
 
1. Актуализация знаний
На предыдущих уроках мы получили знания о технической стороне сайтостроения.
Учитель: Какие знания нам необходимы для того, чтобы создать web-страницу?
(Предполагаемые ответы учеников: знания языка HTML, по крайней мере, основных тегов).
Зачем используют web- редакторы?
(Предполагаемые ответы учеников: ускорение работы; возможность сделать сайт, обладая минимальными знаниями; автоматизация рутинных операций…)
О каких “минусах” web-редакторов необходимо помнить?
(Предполагаемые ответы учеников: излишний код, ограничение некоторых возможностей (например, стандартными средствами нельзя сделать рисунок бегущей строкой), необходимость контроля за абсолютными - относительными адресами, громоздкие динамические эффекты…).
Какой технический прием используется для того, чтобы структура сайта соблюдалась при разных режимах просмотра?
(Предполагаемые ответы учеников: авторская или готовая макетная таблица).
Есть ли вопросы?
Учитель: задает вопросы на повторение
Ученики: отвечают
Результат: актуализация знаний, повторение
2. Обсуждение домашнего задания
Технические навыки для создания сайтов необходимы, однако не стоит забывать о том впечатлении, которое производит сайт на пользователя.
В качестве домашнего задания вам было предложено познакомиться с несколькими статьями, которые помогут нам в изучении темы.
Какие сегодня существуют подходы к оформлению сайтов? В чем заключается их суть.
Есть ли среди вас сторонники того или иного подхода?
Какие весомые аргументы приводят сторонники “содержательного” подхода?
Как обосновывают свою позицию дизайнеры-графики?
Обсуждение обычно проходит довольно живо. В силу своего возраста ребята часто имеют категоричное мнение, ниже при этом обосновывая его вескими аргументами, которые можно почерпнуть, в том числе, и из предложных статей.
В ходе дискуссии, как правило, удается подвести класс к выводу о том, что в зависимости от цели сайта, главную роль может играть и содержание, и оформление. В этом помогает демонстрация различных работ. Я предпочитаю демонстрировать работы прошлого учебного года (учеников другой параллели), чтобы оценка работ была более объективной.
Какую задачу вы выводили на первый план – оформление или содержание, когда работали над проектом своего сайта в “Блокноте”? А в web-редакторе?
(Предполагаемые ответы учеников: в “Блокноте” - содержание, так как не имели достаточных навыков для оформления; в редакторе смогли больше внимания уделить оформлению, так как меньше времени тратили на рутинную работу).
 
3. Проверка домашнего задания
Задание “Макет”
 
 
Учитель: задает вопросы, направляет беседу, демонстрирует работы
Ученики: аргументируют свою точку зрения, анализируют работы
Результат: констатация различных подходов к оформлению сайта, анализ оправданности того или иного подхода, повышение мотивации, подведение к новому понятию.
 
4. Понятие юзабилити
В статьях вы встречались с понятием “юзабилити”. На сегодняшний момент специалисты не дали окончательного определения.
Как вы понимаете, что входит в понятие “юзабилити”?
(Предполагаемые ответы учеников: задача юзабилити – сделать так, чтобы пользователю было удобно и понятно, как пользоваться ресурсом).
Учитель печатает определение на основании ответов, полученных от учеников. Этот текст ниже темы урока проецируется на экран.
Юзабилити – набор качеств web-сайта, влияющих на эффективность работы и удобство использования продукта.
С помощью каких приемов автор сайта старается повысить юзабилити?
(Предполагаемые ответы учеников: ученики отмечают структурированность информации – разделы, абзацы, списки; наличие навигационной панели, разумное цветовое решение, подборку шрифтов…).
Попробуем сформулировать общие рекомендации, как сделать сайт понятным и эффективным в использовании.
Высокий уровень юзабилити предполагает:
1) понятный интерфейс:
·                     панель навигации
·                     одинаковые названия разделов и ссылок
2) эффективный поиск нужной информации:
·                     читаемость текста
·                     выделение разделов
·                     структура информации (списки, таблицы)
·                     один абзац – одна идея
Учитель набирает рекомендации, они проецируются на экран.
Известный специалист по юзабилити Якоб Нильсен является автором многих статей; в них он более подробно рассматривает те методы, с помощью которых можно повысить юзабилити сайта.
Ученики: анализируют готовый сайт,
формулируют основные принципы, записывают основные понятия.
Учитель: демонстрирует готовый продукт,
акцентирует внимание на ключевых моментах, фиксирует основные факты на экране.
Результат: введение и отработка нового понятия.
 
5.  Понятие “формат”
Далее, пользуясь демонстрируемой на большом экране презентацией, представители каждой из групп знакомят всех с результатами своего исследования. После выступления всех групп ребенок, изучавший статью, подводит итог исследования и объясняет понятие "формат". (В данной работе презентация приводится с сокращениями).
Итак, мы увидели, что среди сайтов определенного направления можно увидеть много общего и это объясняется тем, что к оформлению, структуре сайта применимо понятие “формат”.
 
Ученики: выполняют исследовательскую деятельность в ходе групповой работы
Учитель: осуществляет общее руководство и консультирует.
Результат: реализация проблемного метода объяснения нового материала,
знакомство с новым понятием, развитие аналитических способностей,
умения делать выводы, навыков групповой самостоятельной работы.
 
6. Разделение понятий "формат" и "копия"
Одно дело – сходные элементы оформления, совсем другое – прямое заимствование, копирование дизайна. Стоит разделять понятия формат и копия.
На сайте студии Артемия Лебедева вы найдете музей клонов, в котором демонстрируются сайты, являющиеся результатом плагиата. 
Учитель: демонстрирует материалы и комментирует
Ученики: аудиальное и визуальное восприятие.
Результат: расширение понятия.
7. Обсуждение понятия "стиль сайта"
Почему показанные ранее сайты были клонированы?
Чем они обладали?
В чем это выражалось?
Как правило, кто-то из учеников произносит слова “стиль”, “стильный”.
Познакомимся с еще одним сайтов студии Лебедева – сайтом www.akunin.ru
Даже если вы не знакомы с творчеством писателя, попробуйте предположить, о чем, о каком времени его произведения? Как вы узнали? Какие визуальные элементы позволяют это предположить?
(Предполагаемые ответы учеников: логотип, шрифты, иллюстрации, стиль языка…)
Специалисты выделяют следующие элементы стиля сайта.
Таким образом, в основе стиля лежит, прежде всего, идея, которой подчинены все визуальные элементы web-страницы.
 
Ученики: самостоятельно просматривают загруженный сайт на локальных компьютерах,
фиксируют основные элементы, идет обсуждение мнений учеников в свободной форме.
Учитель: консультирует и направляет беседу.
Результат: подведение к новому понятию, развитие критического мышления,
формулировка нового понятия
 
6. Закрепление нового материала (задание)
 
7. Творческое групповое задание
Задание лежит на парте, ученики работают теми же группами, что и в начале урока. Для успешного задания необходима библиотека иллюстраций, функционирующая сеть и умение учеников быстро осуществлять обмен данными по сети.
Задание: оформить (графическими средствами) титульную страницу потенциального сайта организации "***", если это: (у каждой группы свое оригинальной направление). 
 
Ученики: индивидуальная и групповая творческая работа над проектом.
Учитель: консультирует, помогает распределить обязанности,
обеспечивает функционирование локальной сети.
Результат работы: проект титульной страницы сайта, развитие творческих способностей,
умения работать в команде, закрепление пройденного материала.
 
 
8. Итог урока:
Существуют разные подходы к оформлению сайта. Сегодня мы убедились в том, что, в зависимости от того, какова концепция, идея нашего сайта, на первый план может выйти или содержание, или дизайн сайта. Но в любом случае мы должны понимать, что пользоваться нашим продуктом будут другие, поэтому надо позаботиться о юзабилити нашего сайта.
 
9. Домашнее задание
По мнению дизайнеров, особое внимание при создании сайта следует уделять первой (главной) странице.
Почему?
(Предполагаемые ответы учеников: это лицо сайта; от того, как выглядит главная страница, зависит, пойдет ли пользователь дальше по сайту…).
После того, как мы сформулировали рекомендации, применим их на практике.
Создайте средствами текстового редактора или графического редактора  макет первой страницы сайта на заданную тему, стараясь учитывать интересы потенциального пользователя.
Ссылка на задание (по уровням)
Продумайте, как вы прокомментируете свой макет.
 
 
Учитель: формулирует задание, помогает организовать работу,
подобрать материалы.
Ученики: занимаются проектной деятельностью.
Результат: макет главной страницы сайта.
 
Любыми доступными графическими средствами выразить стиль оформления сайта следующей тематики (на выбор):
- сайт цветочного магазина "Аленький цветочек"
- сайта съезда любителей экстремальных видов спорта
- сайт пожарной дружины "Взвейтесь кострами"
- сайт ненавистников (любителей) (
Филиппа Киркорова, манной каши, и т.п.) и т. д.
 
10. Оценки за работу на уроке… Урок окончен, спасибо. До свидания.
 
Для этого необходимо разбиться на группы (по 2 - 3 человека) и один ученик (по желанию) выступает в роли независимого эксперта (задания по группам)
 

Истоник: festival.1september.ru/articles/213096/