Веб-сайты жобалау. Информатика, 10 сынып, презентация.

Веб-сайтты жобалау

10 - сынып

Оқу мақсаттары

“дизайн” және “қолайлылық” ұғымдарын түсіндіру

ақпаратты қабылдау қағидаларының жобада қалай жүзеге асыруға болатынын түсіндіру

Кілттік сөздер

design - дизайн

applicability – қолайлылық, қолдану мүмкіндігі

template- үлгі

link – сілтеме

contrast-контраст

Дизайн

?

?

?

?

?

3 МИН

қолайлылық

«Миға шабуыл» әдісі

Жауаптар

«дизайн» түсінігіне суреттердің эскиздері (сайттың макеті) ең біріншіден ойға келеді. Қандай да бір жобаның дизайны қолданылатын түстер, қаріптер, суреттер және т.б. объектілердің орналасуының толық сипаттамасынан тұрады.

“қолайлылық” ұғымы бағдарламаны нақты тапсырма үшін пайдалану мүмкіндігін қамтиды.

2 МИН

№ 1 тапсырма. Төмендегі веб сайттардың дизайнын салыңыздар (Жеке тапсырма!)

Интернет-дүкен сату электроникасы

Туристік агенттіктің веб-сайты

Мектеп веб-сайты

Гүл сату веб-сайты

Балалар ойыншықтарын сататын интернет-дүкен

Әуе және темір жол билеттерін сату веб-сайты

Медициналық клиника веб-сайты

Сұлулық салоны сайты

Ғаламтор сайтында

Театрдағы орындарға тапсырыс берудің онлайн жүйесі

Кинотеатрға билет сатып алудың онлайн жүйесі

Онлайн киім дүкені

Немесе сіздің таңдауыңыз ...

10 МИН

Дескриптор: сәйкес келетін тақырыпқа интерфейс салу

№2 тапсырма. Жұмысыңызды бөлісіңіз және бағалаңыз.

Бағалау кезінде төмендегі критерийлерді пайдаланыңыз:

қаріп;

сурет;

түс;

объектілердің орналасуы;

келесі беттерге ауысу мүмкіндігі ;

5 МИН

Дескриптор: дизайнды келесі критерийлерді пайдалана отырып бағалау: қаріп, сурет, түс, объектілердің орналасуы,

келесі беттерге ауысу мүмкіндігі

№3 тапсырма. Дайын веб-сайт үлгілерін ұсынатын сайттарды талдап, келесі сұрақтарға жауап беріңіз:

Сайт үлгілерін жасайтындар ең алдымен қандай мақсаттар көздейді?

Дайын шаблондардың артықшылығы мен кемшіліктері қандай деп ойлайсыз?

2 МИН

Дескриптор: дайын үлгілерді қолданудың артықшылықтары мен кемшіліктерін түсіну

№3 тапсырма. Жауаптар үлгісі

Сайт үлгілерін жасайтындар ең алдымен қандай мақсаттар көздейді?

Үлгілерді сату, ақша табу үшін

Дайын шаблондардың артықшылығы мен кемшіліктері қандай деп ойлайсыз?

Артықшылығы: Уақытты үнемдейді, веб-беттерді жасаудың қажеті жоқ

Кемшілігі: Үлгілер стандартты болып табылады

3 МИН

Сайттағы ақпараттың негізгі қағидаларына назар аударыңыз.

1. Топтау:

Объектілерді топтастыру принципі интерфейстің жаһандық принциптерінің бірі болып табылады. Мағынасы бойынша нысандарды топтастыру (түймелер, сілтемелер, мәтін және тақырыптар топтарға бөлінген).

2. Жады, тұрақты элементтердің орналасуы

біздің миымыз бізді нақты кеңістікте ғана емес, сонымен қатар виртуалды түрде шарлауға көмектеседі. Әдетте тұрақты элементтер бір жерде орналасады. Мысалы, сайттың тақырыбы ең жоғарғы жағында орналасады, яғни атауы және логотипі көрсетіледі.

2 МИН

Сайттағы ақпараттың негізгі қағидаларына назар аударыңыз.

3. Контрасттар

Форма контрасты : ми көп күрделі объектілерге бағытталған және оларды қарапайымнан ажыратады.

Түс констрасты: ми ең жарқын элементке назар аударады. Мысалы, ми алдымен суреттерге назар аударады, содан кейін түймелерге ауысады.

Мөлшер констрасты:  ми ең үлкен объектіге бағытталған. Мысалға, назар ең үлкен фигураға бағытталатын болады.

4. Оң динамика: адамдар негізінен мәтінді солдан оңға қарай және жоғарыдан төменге қарай оқиды, бұл оң динамика. Мәтінді сол жақтан туралау ұсынылады.

3 МИН

№4 тапсырма. Төмендегі сілтемелерді ашыңыз және суреттерді ақпаратты қабылдау принциптерімен талдаңыз. 4 сайттың ішінде қайсылары жоғарыда талданған принциптері сақталмайтынын жазыңыз.

Қалыптастырушы бағалауға ұсынылған сайттардың тізімі:

http://som.fio.ru/

http://www.mto.ru/

http://www.government.kz/ru/

http://egov.kz/cms/ru

8 МИН

Дескриптор: ақпаратты қабылдау принциптерін қолдана отырып суреттерге талдау жасау

Рефлексия

Бүгінгі сабаққа не үйрендіңіз?

Түсіну немесе қабылдау үшін не қиын болды?

Болашақта нені үйрену керек?

2 МИН

Ресурсы

http://blog.wtolk.ru/post/principy-dizayna-vizualnoe-vospriyatie-i-principy-geshtalta

https://1ps.ru/blog/ctr/2016/kak-dostavit-posetitelyu-udovolstvie-ot-sajta/

http://lpgenerator.ru/blog/2015/01/08/vizualnoe-vospriyatie-i-primenenie-principov-geshtalta-v-veb-dizajne/#ixzz4jxUuAodE

http://htmlbook.ru/layout

https://ru.wikipedia.org/wiki/веб-дизайн

http://victory-design.narod.ru/pages/psyhol.htm

http://www.dmw.by/blog/sozdanie-sajta-s-uchetom-ergonomiki