Методическая разработка урока по информатике и ИКТ по теме «Web-дизайн. Юзабилити», 10 класс

Íèêèôîðîâ Þ.Â.

Задание архитекторам

Вы – информационные архитекторы.

Ваша задача – ответить на вопросы и заполнить технологическую карту.

На выполнение всех заданий дается 15 минут.

Распределите задания среди участников группы.

Выберите представителя группы, который представит отчет.

Отчет сохранить в сетевом окружении, в папке документы на teacher (teacher (301)) - «отчет» - «веб-архитектор».

План представления отчета:

1.     Коротко изложить информацию о профессии, где можно получить данную профессию.

2.     Представить результаты работы над технологической картой.

1 слайд:  Название профессии

2 слайд:

1.     Чем занимаются Web-архитекторы?

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

1)   http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F_%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0

2)   http://www.redbee.ru/articles/detail.php?ID=966

3)   http://www.webmascon.com/topics/planning/01a.asp

3 слайд:

2.     Где можно получить специальность web - архитектора?

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

1)   http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%81%D1%82%D0%B8%D1%82%D1%83%D1%82_%D1%83%D1%80%D0%B1%D0%B0%D0%BD%D0%B8%D1%81%D1%82%D0%B8%D0%BA%D0%B8_%D0%A3%D1%80%D0%B0%D0%BB%D0%93%D0%90%D0%A5%D0%90

2)   http://spb.designschool.ru/study/web-dizajn/

3.     Заполните технологическую карту:

Технологическая карта web-архитекторы

Оценочный лист

Оцените каждый критерий по пятибалльной системе

Задание для Web-дизайнеров

Вы – web-дизайнеры.

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

На выполнение всех заданий дается 15 минут.

Распределите задания среди участников группы.

Выберите представителя группы, который представит отчет.

Отчет сохранить в сетевом окружении, в папке документы на teacher (teacher (301)) - «отчет» - «веб-дизайнер».

План представления отчета:

1.     Коротко изложить информацию о профессии, где можно получить данную профессию.

2.     Представить результаты работы над технологической картой.

1 слайд:  Название профессии

2 слайд:

1.     Чем занимаются Web-дизайнеры?

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

http://www.ucheba.ru/prof/40.html

http://otvet.mail.ru/question/52140478/

3 слайд:

2.     Где можно получить специальность web дизайнера?

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

http://www.proforientator.ru/index.php?option=com_content&view=article&id=265:2010-02-12-13-46-47&catid=29:2010-02-11-14-52-53

http://www.ucheba.ru/vuz/9309/prof/8055.html

http://pda.teron.ru/index.php?showtopic=658162

3.     Заполните технологическую карту, перейдя по ссылке:

технологическая карта

Web-дизайнеры

Оценочный лист

Оцените каждый критерий по пятибалльной системе

Задание специалистам по юзабилити

Вы – юзабилити специалисты.

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

Распределите задания среди участников группы.

На выполнение всех заданий дается 15 минут.

Выберите представителя группы, который представит отчет.

Отчет сохранить в сетевом окружении, в папке документы на teacher (teacher (301)) - «отчет» - «юзабилити специалист».

План представления отчета:

1.     Коротко изложить информацию о профессии, где можно получить данную профессию.

2.     Представить результаты работы над технологической картой.

1 слайд:  Название профессии

2 слайд:

1.     Чем занимаются юзабилити специалисты?

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

http://planetahr.ru/publication/3773

http://www.facebook.com/note.php?note_id=208378145890697

http://www.webeffector.ru/wiki/%D0%AE%D0%B7%D0%B0%D0%B1%D0%B8%D0%BB%D0%B8%D1%82%D0%B8

3 слайд:

2.     Где можно получить специальность юзабилити специалиста? Перейдите по ссылкам и поместите нужную информацию на слайд.

http://shkolazhizni.ru/archive/0/n-16813/

http://www.edu-all.ru/vc_scripts/selinfo.asp?ident=5936&type=6

3.     Дайте оценку сайтам  с точки зрения юзабилити специалиста. Если пункт отсутствует на сайте, то поставьте прочерк. (эл.вариант технологической карты на рабочее столе в папке «задания» - «юзабилити специалист»).

Технологическая карта

Юзабилити специалист

Проведите анализ сайта г.Губахи. Перейдите по ссылке, заполните таблицу. Если данный критерий отсутствует, то поставьте прочерк. Результаты анализа представить на обсуждение.

Оценочный лист

Оцените каждый критерий по пятибалльной системе

Web- программист

Вы – web-программисты.

Ваша задача ответить на поставленные вопросы и заполнить таблицу.

На выполнение всех заданий дается 15 минут.

Распределите задания среди участников группы.

Выберите представителя группы, который представит отчет.

Отчет сохранить в сетевом окружении, в папке документы на teacher (teacher (301)) - «отчет» - «веб-программист».

План представления отчета:

1.     Коротко изложить информацию о профессии, где можно получить данную профессию.

2.     Представить результаты работы над технологической картой.

Форма отчета web-программистов:

1)    Презентация (1 слайд - деятельность веб-программиста, 2 слайд - где можно получить специальность веб-программиста);

2)    Заполненная таблица.

1 слайд:  Название профессии

2 слайд:

1.     Чем занимаются Web-программисты?

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

http://www.profi.ua/prof/view/7/

http://prof.biografguru.ru/about/programmist/?q=3000&dp=130

3        слайд:

2.     Где можно получить специальность web программиста?

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

http://itstudy.ru/news.php?tip=3&id=1164

http://www.ucheba.ru/prof/497.html

3.     Используя материалы сайтов:

http://joomlovod.ru/xxx/329-texnicheskij-analiz-sajta.html

http://swsait.ru/s-chego-nachat-sozdanie-sajta/sposoby-sozdaniya-sajta.html

заполните таблицу:

(эл.вариант технологической карты на рабочее столе в папке «задания» - «web- программист»).

Оценочный лист

Оцените каждый критерий по пятибалльной системе

ЮЗАБИЛИТИ

СПЕЦИАЛИСТЫ

WEB-дизайнеры

WEB – архитекторы

WEB – программисты

План-конспект урока

Автор разработки: С.Н. Россахацкая, учитель информатики МБОУ «СОШ №14» (НОЦ);

Класс: 10

Предмет: информатика;

Тема: «Web-дизайн. Юзабилити»

Этап обучения по данной теме (начальный, основной, завершающий): завершающий;

Тип урока: урок - исследование;

Цели урока:

Развивающие цели:

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

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

3.     Развитие коммуникативной компетенции через работу в группе.

4.     Развитие информационной компетенции через   умение  работать с информацией в сети Интернет (поиск, анализ и отбор информации).

Образовательные цели:

1.     Познакомить учащихся с понятием Юзабилити.

2.     Формировать практические навыки учащихся при работе с Интернет – ресурсами.

Воспитательные цели:

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

Оборудование:

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

Оценочная деятельность на уроке: взаимооценка учащихся, оценка учителя (оценочный лист).

Основные источники информации:

1.     http://planetahr.ru/publication/3773

2.     http://www.facebook.com/note.php?note_id=208378145890697

3.     http://www.webeffector.ru/wiki/%D0%AE%D0%B7%D0%B0%D0%B1%D0%B8%D0%BB%D0%B8%D1%82%D0%B8

4.     http://shkolazhizni.ru/archive/0/n-16813/

5.     http://www.edu-all.ru/vc_scripts/selinfo.asp?ident=5936&type=6

6. http://gubaha.permarea.ru/Glavnaja-stranica/
7. http://newgubakha.ru/
8. http://www.gubaha.ru/

9.     http://www.ucheba.ru/prof/40.html

10. http://www.proforientator.ru/index.php?option=com_content&view=article&id=265:2010-02-12-13-46-47&catid=29:2010-02-11-14-52-53

11. http://www.ucheba.ru/vuz/9309/prof/8055.html

12. http://pda.teron.ru/index.php?showtopic=658162

13. http://sitecritic.ru/kriterii-kachestvennogo-dizajna-sajta/    

14. http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F_%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0

15. http://www.redbee.ru/articles/detail.php?ID=966

16. http://www.webmascon.com/topics/planning/01a.asp

17. http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%81%D1%82%D0%B8%D1%82%D1%83%D1%82_%D1%83%D1%80%D0%B1%D0%B0%D0%BD%D0%B8%D1%81%D1%82%D0%B8%D0%BA%D0%B8_%D0%A3%D1%80%D0%B0%D0%BB%D0%93%D0%90%D0%A5%D0%90

18. http://spb.designschool.ru/study/web-dizajn/

19. http://www.profi.ua/prof/view/7/

20. http://prof.biografguru.ru/about/programmist/?q=3000&dp=130

21. http://itstudy.ru/news.php?tip=3&id=1164

22. http://www.ucheba.ru/prof/497.html

23. http://joomlovod.ru/xxx/329-texnicheskij-analiz-sajta.html

24. http://swsait.ru/s-chego-nachat-sozdanie-sajta/sposoby-sozdaniya-sajta.html

Технологическая карта урока

План-конспект урока информатики

10 класс

Тема урока

«Web-дизайн. Юзабилити»

Цели урока:

Развивающие цели:

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

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

3.     Развитие коммуникативной компетенции через работу в группе.

4.     Развитие информационной компетенции через   умение  работать с информацией в сети Интернет (поиск, анализ и отбор информации).

Образовательные цели:

1.     Познакомить учащихся с понятием Юзабилити.

2.     Формировать практические навыки учащихся при работе с Интернет – ресурсами.

Воспитательные цели:

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

Ход урока:

1.     Орг. момент

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

1.     (слайд 2) Возьмем стакан и кружку. Нальем в них горячий чай. Из чего вы предпочтете выпить чай? Почему?

Ответы детей

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

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

(слайд 3) Скажите пожалуйста, чему равна

ü площадь городских земель Губахи в пределах городской черты;

ü численность населения города Губахи;

ü состояние здоровья населения города

Затрудняетесь ответить, а где мы можем получить эту информацию?

Ответы детей (библиотека, музей, Интернет).

Правильно, в интернете на различных сайтах.

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

Современный web-дизайн становится более четким и лаконичным. Однако часто заказчик стремится к красоте, нежели к удобству. Возможно ли совместить в дизайне сайта удобство и красоту, и разрешить извечный конфликт физиков и лириков? Любой сайт должен быть удобным для пользователя, т.е. быть в юзабилити и популярным.

3.     Основной этап

(слайд 4) Давайте представим, что мы с вами сотрудники веб - студии, специализирующейся на разработке web-сайтов. Разработка web-сайта – это интересный, но, в то же время сложный и трудоёмкий процесс, в котором принимают участие различные web-специалисты.

Вам предстоит:

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

2) с помощью  анализа оценить некоторые сайты Губахи согласно необходимым требованиям.

(слайд 5) Сайтов о Губахе достаточное количество, но все ли они востребованы и имеют качественный юзабилити?

 От чего зависит успех сайта?

ЗАДАНИЕ

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

Красные Программист.

Зеленые Специалист по юзабилити.

Желтые Web-дизайнер.

Синие Архитектор.

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

3.     После выполнения всех заданий группы отчитываются о проделанной работе, обсуждают результаты работы.

1)  Работа в группах

Задание специалистам по юзабилити

Вы – юзабилити специалисты. Ваша задача ответить на поставленные вопросы и заполнить технологическую карту.

1.     Чем занимаются юзабилити специалисты?

http://planetahr.ru/publication/3773

http://www.facebook.com/note.php?note_id=208378145890697

http://www.webeffector.ru/wiki/%D0%AE%D0%B7%D0%B0%D0%B1%D0%B8%D0%BB%D0%B8%D1%82%D0%B8

2.     Где можно получить специальность юзабилити специалиста?

http://shkolazhizni.ru/archive/0/n-16813/

http://www.edu-all.ru/vc_scripts/selinfo.asp?ident=5936&type=6

3.     Дайте оценку сайтам  с точки зрения юзабилити специалиста. Если пункт отсутствует на сайте, то поставьте прочерк. (тех.карта, эл.вариант в сетевом окружении-«отчет»-«юзабилити специалист»). Сделайте вывод.

Форма отчета юзабилити специалиста:

1)    Презентация (1 слайд - деятельность юзабилити специалиста, 2 слайд - где можно получить специальность юзабилити специалиста);

2)    Заполненная тех. карта.

Отчет сохранить в сетевом окружении, в папке «отчет» - «юзабилити специалист».

Технологическая карта

Юзабилити специалист.

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

Задание для Web-дизайнеров

Вы – web-дизайнеры. Ваша задача ответить на поставленные вопросы и заполнить технологическую карту.

1.     Чем занимаются Web-дизайнеры?

http://www.ucheba.ru/prof/40.html

2.     Где можно получить специальность web дизайнера?

http://www.proforientator.ru/index.php?option=com_content&view=article&id=265:2010-02-12-13-46-47&catid=29:2010-02-11-14-52-53

http://www.ucheba.ru/vuz/9309/prof/8055.html

http://pda.teron.ru/index.php?showtopic=658162

3.     Заполните технологическую карту.

4.     В оценочном листе выполните самооценку.

Форма отчета веб-дизайнеров:

1)    Презентация (1 слайд - деятельность веб-дизайнера, 2 слайд - где можно получить специальность веб-дизайнера);

2)    Заполненная тех. карта.

Отчет сохранить в сетевом окружении, в папке «отчет» - «веб-дизайнер».

3)    В оценочном листе выполните самооценку

технологическая карта

Web-дизайнеры

Дизайн сайта – это совокупность графических элементов, шрифтов и цветов, реализованных на сайте. 

Любой сайт предназначен для людей, поэтому эффективность и успешность разработанного дизайна будет определяться удобством и комфортабельностью его использования. Примеры хороших, грамотных сайтов: http://sitecritic.ru/kriterii-kachestvennogo-dizajna-sajta/    

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

задание архитекторам

Вы – информационные архитекторы.

Ваша задача – ответить на поставленные вопросы и заполнить технологическую карту.

1.     Чем занимаются Web-архитекторы?

1)   http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F_%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0

2)   http://www.redbee.ru/articles/detail.php?ID=966

3)   http://www.webmascon.com/topics/planning/01a.asp

2.     Где можно получить специальность web архитектора?

1)   http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%81%D1%82%D0%B8%D1%82%D1%83%D1%82_%D1%83%D1%80%D0%B1%D0%B0%D0%BD%D0%B8%D1%81%D1%82%D0%B8%D0%BA%D0%B8_%D0%A3%D1%80%D0%B0%D0%BB%D0%93%D0%90%D0%A5%D0%90

2)   http://spb.designschool.ru/study/web-dizajn/

3.     Заполните технологическую карту:

Технологическая карта web-архитекторы

Форма отчета web-архитекторов:

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

5)    Заполненная тех. карта.

Отчет сохранить в сетевом окружении, в папке «отчет» - «веб-архитекторы».

6)    В оценочном листе выполните самооценку.

Web- программист

Вы – web-программисты. Ваша задача ответить на поставленные вопросы и заполнить таблицу.

1.     Чем занимаются Web-программисты?

http://www.profi.ua/prof/view/7/

http://prof.biografguru.ru/about/programmist/?q=3000&dp=130

2.     Где можно получить специальность web программиста?

http://itstudy.ru/news.php?tip=3&id=1164

http://www.ucheba.ru/prof/497.html

Критерии влияющие на работоспособность веб ресурса

используя материалы сайтов заполните таблицу:

http://joomlovod.ru/xxx/329-texnicheskij-analiz-sajta.html

http://swsait.ru/s-chego-nachat-sozdanie-sajta/sposoby-sozdaniya-sajta.html

Форма отчета web-программистов:

1)    Презентация (1 слайд - деятельность веб-программиста, 2 слайд - где можно получить специальность веб-программиста);

2)    Заполненная таблица.

Отчет сохранить в сетевом окружении, в папке «отчет» - «веб-программисты».

3)    В оценочном листе выполните самооценку.

Оценочный лист

Оцените каждый критерий по пятибалльной системе

Вернемся к вопросу: от чего же зависит успех сайта?

Ответы детей

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

Ответы учеников.

Кого то заинтересовали профессии связанные с сайтостроением? Все материалы вашей работы я сохраню и если возникнет желание ознакомиться с ними, приходите.

Спасибо. До свидания.