Главная / Методические материалы / Преподавание информатики
Тема Основы web-дизайна в школьном курсе информатики
Автор(ы): Скрипкина Юлия Владимировна, учитель информатики
Notice: Undefined variable: content in /home/area7ru/area7.ru/docs/metodic-material.php on line 278
Место темы в курсе информатики Я преподаю информатику в гимназии по собственному авторскому курсу. Программа курса составлена на основе “Обязательного минимума содержания образования по информатике” с учетом специфики образовательного учреждения. Преподавание по данному курсу ведется в 6 – 11 классах (в 3 – 5 классах – пропедевтический курс информатики) 1 час в неделю. Тема “Технология создания сайтов и основы web-дизайна” изучается в 8 классе. На всю тему отводится 14 часов: “Общие вопросы конструирования сайтов” – 2 часа, “Язык HTML” – 5 часов, “Создание и редактирование сайтов с помощью web-редактора” – 4 часа, “Основы web-дизайна” – 3 часа. Учащиеся должны знать: общие вопросы сайтостроения, современные подходы в технологиях создания сайтов и web-дизайне, понятия “стиль” и “формат”, основы языка HTML; принципы создания сайта инструментальными средствами. Учащиеся должны уметь: представить концепцию сайта и поэтапно ее реализовать; создавать простейший сайт вручную; создавать web-страницы с помощью HTML-редактора. Рассматривать вопросы дизайна мне кажется необходимым наряду с выработкой технических навыков по созданию web-страниц. Более того, если бы позволили обстоятельства, на эту тему я бы отвела больше времени. Сегодня 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 Формат и стиль сайта Цели урока: - продемонстрировать разницу между понятиями "формат" и "копия" - пробудить у учеников мысль, что часто содержание диктует форму представления информации - усовершенствовать навыки анализа сайта - развить творческие способности учеников Оборудование и материалы к уроку: доступ в Интернет или скриншоты сайтов, обсуждение которых предполагается, демонстрационное оборудование (мультимедийный проектор, экран), функционирующая локальная сеть, графические редакторы, текстовый редактор, библиотеки шрифтов, фонов и рисунков. Подготовка к уроку: осуществить подключение к Интернету выложить в открытый доступ демонстрационные материалы (см. Приложение3.pdf) разложить групповые задания (см. Приложение4.txt) подготовить текст статьи для анализа (см. Приложение5.txt) Ход урока: 1. Орг. момент, обсуждение результатов домашнего задания (3 - 5 минуты) Предложите концепции сайтов, где на первое место выйдет оформление или содержание. Вы доказали, что оба подхода к оформлению сайта имеют право на существование. Действительно, в Сети выложено большое число ярких сайтов разных направлений. Однако часто случается, что мы замечаем на разных сайтах сходные черты. Попробуем проанализировать причину этого сходства. 2. Проблемное групповое задание (7 - 10 мин.) Для этого необходимо разбиться на группы (по 2 - 3 человека) и один ученик (по желанию) выступает в роли независимого эксперта (файл заданий – Приложен...
ВНИМАНИЕ!
Текст просматриваемого вами методического материала урезан на треть (33%)!
Чтобы просматривать этот и другие тексты полностью, авторизуйтесь на сайте:
|
|
Добавлено: 2013.09.05 | Просмотров: 3014
При использовании материалов сайта, активная ссылка на AREA7.RU обязательна!
|