Методична робота

10 клас Конспект уроку 03.02.2021


Інформатика, 10


Веб-дизайн

Урок 6. Веб-дизайн. Тематична атестація

План вивчення теми уроку

1. Переглянути навчальну презентацію з теми

2. Узагальнююче повторення теми (усне опитування)

3. Опрацювати опорний конспект з теми за матеріалом даної сторінки сайту

4. Виконати тестові завдання з теми уроку

Веб

Найвідомішою та найпопулярнішою службою Інтернету є Всесвітня павутина (Веб). Саме після її розповсюдження став можливий масовий доступ користувачів до Всесвітньої мережі.

Своєю появою Веб має завдячити Тіму Бернесу-Лі, який винайшов протокол HTTP, адреси URL та мову HTML — технології, на яких ґрунтується Веб.

Служба Веб підтримується сукупністю серверів, які здатні обмінюватися даними за протоколом HTTP. Цих серверів мільйони, й розповсюджені вони по всьому світу. На них містяться веб-сторінки — спеціальні документи, створені з використанням мови HTML. Кожна веб-сторінка має адресу URL, за допомогою якої вона може бути знайдена.

Перегляд веб-сторінок здійснюється у спеціальних програмах – браузерах, найпоширенішими з яких є Internet Explorer, Mozilla та Opera.

Опорний конспект з теми уроку

Веб-дизайн

Веб-дизайн (англ. web design) — галузь веб-розробки, що охоплює цілий ряд напрямів і дисциплін із створення та супроводу сайтів або веб-застосунків, таких як графічний веб-дизайн, проектування інтерфейсів, авторинг (у тому числі стандартизований код і власницьке програмне забезпечення), використовність та оптимізація для пошукових систем.

Найчастіше виконання різних етапів процесу веб-дизайну забезпечують відповідні спеціалісти (менеджер проекту, дизайнер, веб-програміст, веб-майстер тощо), хоча деякі веб-дизайнери можуть виконувати усе самостійно. Термін веб-дизайн зазвичай використовують для опису проектування й реалізації клієнтської частини веб-сайту, включаючи верстку.

Інструменти і технології

На кожному етапі створення сайту веб-дизайнери послуговуються різними інструментами. З часом ці інструменти зазнають оновлення у відповідності до нових стандартів і програмного забезпечення, однак принципи їхнього застосування залишаються сталими. У графічному веб-дизайні використовують пакети векторної й растрової графіки для створення прототипів зображень чи дизайну у форматі для веб.

До технологій, використовуваних при створенні веб-сайтів, належить стандартизована розмітка, яку пишуть вручну чи генерують за допомогою редакторів WYSIWYG.

Для перевірки позиціювання сайту у пошукових системах та його покращення застосовують інструменти оптимізації для пошукових систем.

До інструментів веб-дизайну належать також валідатори розмітки та інші засоби тестування використовності й доступності, які дозволяють пересвідчитися у тому, що сайт відповідає стандартам веб.

Валідатор

Валідатор — комп'ютерний сервіс, програма, об'єкт, функція або оператор, яка/який перевіряє відповідність деяких даних вимогам до типу, вмісту, формату або синтаксису. Процес перевірки називають валідацію (процес затвердження, легалізації, ратифікації), а дані, що відповідають вимогам — валідними.

Правила веб-дизайну

Оскільки дизайн містить елементи мистецтва та інженерії, на нього розповсюджуються їхні правила, що можуть забезпечити створення якісних макетів та мокапів для мережевих видань. Одне з основних правил вказує, що дизайн має ціль і залежно від задач, обираються засоби. Таким чином дизайном є не оформлення веб-сторінок, а конструкторська діяльність, що покликана реалізувати заздалегідь визначні цілі. Існують правила, щодо необхідної кількості кольорів та шрифтів у макеті, симетрії, відступів, порядку подачі матеріалів тощо.

Будь-яка людина може створювати сайти. Точніше, краще сказати, що будь-яка людина може навчитися створювати сайти. Але потрібно розуміти, що для того, щоб робити це на хорошому рівні, необхідно поєднувати цілий ряд різних знань і навичок, які в комплексі дозволяють фахівцеві робити дійсно якісні веб-проекти.

Вивчення веб-дизайну з нуля може бути досить складним завданням, якщо ви не знаєте, з чого почати і що саме вам потрібно. Постійно з’являється безліч нових технологій і нових інструментів, які можуть збити з пантелику навіть досвідченого професіонала, не кажучи вже про новачків.

Є багато підходів до вивчення веб-дизайну, деякі з них платні, наприклад курси, інші ж безкоштовні. Число методів навчання дуже зросло, завдяки поширенню інтерактивності в Мережі, – відеоканали на YouTube, навчальні платформи і багато іншого.

Web-дизайн починається з визначення цілей і завдань майбутнього сайту. Навіщо потрібний сайт? На яку аудиторію розрахований? Яких результатів дасть змогу домогтися?

Відповіді на ці та подібні питання і повинні лягти в основу web-дизайну проекту. Під терміном «web-дизайн» прийнято розуміти сукупність робіт з розробки логічної структури та художнього оформлення веб-сторінок. Завданням web-дизайну є забезпечення зручної подачі інформації користувачеві web-сайту або web-додатку, задоволення естетичного смаку аудиторії сайту.

Сучасний web-дизайн починається з поділу оформлення сайту і змісту. Завдяки такому підходу вносити зміни в зміст сайту, не зачіпаючи його дизайн, або ж змінювати дизайн, не змінюючи зміст, стало набагато легше. Багато в чому цьому сприяють сучасні системи управління контентом - CMS.

Основи web-дизайну сайту закладаються на етапі розробки технічного завдання - документа, що описує вимоги щодо візуального представлення та структури сайту. У технічному завданні також найчастіше описуються побажання щодо програмної реалізації сайту.

Ознаки хорошого дизайну

Під час розробки Інтернет-ресурсу особливу увагу потрібно приділити дизайну. Веб дизайн визначає зовнішній вигляд, а також технічні параметри сайту, його інтерфейс.

Першочергово web-дизайн зобов'язаний привернути увагу, гармоніювати з уявленнями і смаками представників цільової аудиторії. Ось чому перш ніж приступити до підготовки макета майбутнього сайту, необхідно встановити, для яких категорій Інтернет-користувачів призначений даний сайт, кого він зацікавить, що варто зробити, щоб сформувати виключно позитивну оцінку. Якщо проігнорувати ці норми, можна потерпіти крах, незалежно від того, сайт якої тематики ви розробляєте. Наприклад, корпоративний сайт серйозної фірми виконаний грубо, без смаку, незграбно, не може розраховувати на великий успіх. А все тому, що потенційний клієнт після відвідин такого сайту сформує свої неприємні асоціації, після чого йому навряд чи прийде в голову оформити у вас замовлення або придбати що-небудь. А в результаті, ваш веб-сайт буде функціонуючим, проте не прибутковим, оскільки він елементарно не справляється з таким завданням, як залучення покупців.

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

Етапи розробки дизайну сайту

Після розробки та затвердження техзавдання починається етап розробки дизайну сайту. І перше, що необхідно зробити - це створити модульну сітку сайту. Модульна сітка описує розташування елементів на сторінках сайту.

Модульна сітка будь-якої web-сторінки містить, як мінімум, два блоки: для основного тесту сайту і для меню. Якщо на сторінці потрібні додаткові елементи, наприклад, ще одне меню, «підвал» («footer») або «хедер» («header»), то модульна сітка розбивається ще на кілька блоків.

Розміри блоків модульної сітки підбираються індивідуально і можуть бути якими завгодно. Проте слід враховувати, що відповідно до вимог юзабіліті, поява горизонтальної смуги прокручування при перегляді сторінки неприпустимо - це негативно позначається на сприйнятті сайту відвідувачами. Тому в сукупності ширина блоків не повинна перевищувати максимальної ширини екранів представників цільової аудиторії сайту.

У блоці «хедер» прийнято вказувати назву сайту, яке може бути вибрано відповідно до назви компанії або ім'ям автора сайту, а також при необхідності логотип сайту. Основний блок меню в європейських сайтах традиційно розташований зліва, відповідно до напряму писемності (зліва-направо). Також основне меню може бути розташоване зверху, під «хедером».

Якщо сайт розрахований для перегляду на екранах з різним дозволом, то web-дизайн, як правило, виконується «гумовим» або ж центрується по горизонталі.

Коли інформаційна модель майбутнього сайту готова, можна братися за художню частину web-дизайну. Зазвичай дизайн сайту виконується у вигляді шаблонів - певних наборів елементів і їх взаємозв'язків. Саме шаблони дозволяють відокремити розробку візуального дизайну сайту від змісту.

Розрізняють шаблон головної і шаблони типових сторінок сайту. Шаблон головної сторінки оформляється, як правило, більш «витіювато», а шаблони решти сторінок сайту лише підтримують основну ідею.

Розроблений в графічному редакторі шаблон верстається у html-файл. За допомогою тегів мови html і таблиць стилів css задаються всі необхідні параметри сторінки: розміщення елементів, колір і розміри шрифтів, колір фону і т.д.

Робота над шаблоном сайту вимагає обов'язкового тесту на крос-браузерності, тобто на сумісність з різними браузерами і їх версіями. Різні браузери можуть по-різному інтерпретувати код html, тому таке тестування необхідне, щоб уникнути можливого «розвалу» дизайну.

Протестований і повністю готовий до роботи дизайн сайту «прикріплюється» до функціональної «канви», створеної веб-програмістами. У разі використання CMS, розроблені шаблони «закачуються» у відповідну папку на сервері - і все, сайт готовий для наповнення.

Веб-сторінки

Веб-сторінки є інформаційними ресурсами служби World Wide Web, і ви вже ознайомилися з тим, як здійснювати пошук і перегляд цих ресурсів.

У структурі веб-сторінки можна виділити такі складові:

  • контент - (англ. content — зміст) — змістове наповнення веб-сторінки, доступне користувачу: тексти, зображення, відео, звукові дані та інше;
  • елементи навігації - засоби для переходу до інших веб-сторінок;
  • дизайн - елементи структурування контенту та його форматування, оформлення сторінки.

Веб-сторінки є текстовими документами. Їх створюють з використанням мови розмітки гіпертексту HTML (англ. Hyper Text Markup Language — мова розмітки гіпертексту).

HTML-код

У веб-сторінці міститься HTML-код сторінки, що складається з даних двох типів:

  • Тексту, який відображатиметься на сторінці;
  • Тегів - (англ. tag — ярлик, ознака) — команд, що визначають розмітку тексту: його структуру, формат фрагментів тексту, забезпечують уставлення нетекстових об'єктів на сторінку та інше.

Переглянути HTML-код веб-сторінки, відкритої у вікні браузера Google Chrome, можна, вибравши в контекстному меню сторінки команду Переглянути джерело сторінки.

Створення сайту - складний процес. Процес проектування та створення сайту відбувається в кілька стадій. У кожній стадії беруть участь фахівці, необхідні для цього. І той хто каже, що сайт зможе створити всього лише одна людина є зовсім правим. По правді кажучи в розробці веб-сторінку приймають близько 8-10 чоловік, сюди входять: проект-менеджер, web-дизайнер, верстальник, програміст, фахівець з просування і при необхідності копірайтер. Така велика участь фахівців застосовується при великих комерційних проектах, де поставлені великі цілі. А ось зробити невеликий простий сайт під силу, напевно, кожному, у кого є бажання вчитися і трохи навичок і умінь. Та й в такому випадку потрібно чітке виконання певних дій.

Розробка веб-сайту

Розробка веб-сайту складається з кількох етапів. Ці етапи аналогічні до етапів розв'язування задач з використанням комп'ютера.

1. Постановка завдання. На цьому етапі визначається мета створення сайту, його основна тематика, здійснюється аналіз існуючих сайтів такої самої або схожої тематики.

У результаті розробник повинен знати:

  • мету, з якою створюється сайт;
  • тематику сайту, відмінності сайту від інших сайтів такої самої тематики;
  • аудиторію потенційних відвідувачів сайту: вік, стать, коло інтересів тощо;
  • перелік сервісів для розміщення на сайті: форум, чат, пошукова система, веб-каталог, електронна пошта та інше;
  • перспективи розвитку сайту.

2. Визначення структури сайту. На цьому етапі важливо скласти перелік розділів сайту для формування системи навігації, список сторінок, визначити зв'язки між ними.

Кількість сторінок залежатиме від того інформаційного наповнення, яке планується на ньому розмістити. Результатом повинна стати мапа (карта) сайту — схема, що візуально відображає ієрархію сторінок сайту, зв'язки та переходи між ними, тобто внутрішню структуру сайту.

3. Розробка структури веб-сторінок сайту. Наступним завданням є визначення структури зовнішнього вигляду веб-сторінок. Оскільки для більшості сторінок сайту рекомендується застосовувати єдиний стиль оформлення, то потрібно визначити схему розташування на сторінках основних блоків: як буде розташовано: основний матеріал, додаткові інформаційні та рекламні блоки, анонси, меню, лічильник відвідувачів тощо.

Як правило, на веб-сторінках передбачено розміщення:

  • верхнього блоку — заголовка, у якому містяться логотип і назва сайту;
  • блоку навігації (меню) для переходу до основних розділів сайту;
  • інформаційного блоку з основним матеріалом, що займає центральну частину сторінки;
  • нижнього блоку — підвалу, для розміщення контактних даних, повідомлення про авторські права тощо.

Якщо розробка сторінок сайту буде здійснюватись автоматизованими засобами, то структура веб-сторінок може бути запропонована в шаблоні сторінки.

4. Розробка дизайн-макета сторінок сайту. Дизайн-макет сторінок включає набір значень властивостей текстових і графічних об'єктів сторінки:

  • Кольорової гами сторінок
  • Елементів графічного оздоблення
  • Набору шрифтів та іншого.

Тобто визначає стиль сайту.

Дизайн-макет спирається на попередньо розроблену зовнішню структуру сторінок сайту. Важливо, щоб стиль відповідав призначенню сайту, особливостям основної аудиторії, на яку розраховано сайт, був орієнтований на надання найбільших зручностей для сприйняття основного матеріалу.

Дизайн-макет може бути розроблено дизайнером у графічному редакторі, намальовано на папері тощо. Якщо розробка сайту буде здійснюватись автоматизованими засобами, то варіанти дизайн-макета можуть бути запропоновані у темах сайту.

5. Створення та верстка сторінок сайту. Створюються сторінки, як правило, з використанням тегів мови HTML. У процесі створення відбувається верстка сторінок.

Верстка — це процес розміщення на сторінці під час її створення текстових, графічних та інших об'єктів так, щоб сторінка отримала вигляд згідно з розробленим дизайн-макетом. На цьому етапі здійснюється й інформаційне наповнення сайту.

6. Якщо на етапі постановки завдання передбачалося розміщення на сайті додаткових сервісів і засобів зворотного зв'язку, таких як системи пошуку, голосування, форуми та інше, то потрібен ще й етап програмування сайту.

При автоматизованому створенні сайту деякі з наведених засобів можуть бути вставлені з готових шаблонів.

7.Розміщення (публікація) сайту в Інтернеті. Під час попередніх етапів створені веб-сторінки могли зберігатися на локальному комп'ютері розробника. На цьому етапі сайт отримує доменне ім'я та розміщується на сервері.

Після цього сайт стає доступним для перегляду користувачами Інтернету, якщо він або його частина не мають обмежень на доступ.

Сервер, на якому розміщується сайт, повинен надавати послуги хостингу.

Хостинг (англ. hosting — виявлення гостинності) — виділення апаратних і програмних ресурсів сервера для розміщення файлів користувача, забезпечення доступу до них, опрацювання запитів та іншого.

Організації, що надають послуги хостингу, називають хостинг-провайдерами.

Існують онлайн-системи конструювання сайтів, які одночасно з послугами з розробки веб-сайтів надають послуги безкоштовного хостингу. Такими є системи: Google Сайти, uCoz, Weebly та інші. У цих системах створення веб-сайту здійснюється у режимі онлайн одразу на сервері хостингу.

Для того щоб ваш сайт почали відвідувати користувачі Інтернету, бажано зареєструвати його в пошукових системах і каталогах, розмістити посилання на нього на Інших сайтах.

Цей процес називають популяризацією або просуванням сайту. Для популяризації використовують й Інші засоби, але важливо, щоб матеріали, доступні на вашому сайті, були варті того, щоб ними зацікавилися відвідувачі.

СЗОШ № 8 м. Хмельницького, 2020 рік, вчитель інформатики Кравчук Г.Т.

Типографіка. Прийоми каліграфії та леттерингу

Урок 4. Типографіка, шрифти і шрифтові пари. Прийоми каліграфії та леттерингу. Особливості поєднання шрифтів. Коротка історія дизайну і типографіки.

План вивчення теми уроку

1. Переглянути презентацію до уроку

2. Виконати самостійну роботу:

  • Опрацювати історію дизайну (5 хв.) на даній сторінці сайту

  • Дослідити історію ландшафтного дизайну (результати дослідження представити у вигляді відео та надіслати на поштову адресу вчителя)

3. Опрацювати опорний конспект (виклааднггя змісту теми на даній сторінці сайту

4. Виконати тестові завдання з теми уроку

Типографіка

Типографіка - найсильніший інструмент для вираження посилу в веб-дизайні. З його допомогою ви можете об'єднати текстову і візуальну складові, що допоможе вам достукатися до відвідувача. Правильне використання типографіки допоможе уникнути типових помилок, що допускаються дизайнерами при створенні чергового шедевра. Постараємося зрозуміти, що ж ми робимо не так, і як уникнути помилок в майбутньому.

Типографіка - звід законів, правил і норм оформлення тексту, заснованих на вивченні сприйняття набору читачем. Знання і розуміння типографіки перетворюють текст в інструмент побудови композиції, роблять його живим, надають характер і здатність передати ідею не тільки за допомогою змісту, а й графічно.


Гарнітура

Гарнітура - шрифт або кілька шрифтів, що мають стилістичне єдність накреслення. Складається з набору знаків. Часто це поняття плутають з поняттям «шрифт», хоча шрифт - це певне накреслення знаків, в той час як гарнітура визначає загальне «сімейство» шрифтів.

Гарнітури можна розділити на дві основні категорії:

  • Антиква - шрифти із зарубками.

  • Гротеск, відповідно, - шрифт без зарубок.

У проектах можна використовувати будь-який, правильного і неправильного варіанту тут немає. Потрібно дивитися по ситуації, який проект і що більш актуально для нього.

Шрифт із зарубками, як би тримає рядок, а відповідно підвищується читабельність. Часто шрифти із зарубками створюють відчуття професіоналізму і авторитетності наданої інформації, висловлюють повагу, підкреслюють стабільність і консерватизм в кращому розумінні цього слова. Шрифти без зарубок, як правило, акцентують раціональність, дотримання стилю, молодість і сучасність. Допомагають створити простір між буквами, а також відокремити один знак від іншого.

Кегль

Кегль - висота букви, що включає в себе нижні і верхні виносні елементи. Вимірюється в друкарських пунктах (позначається як pt). Наприклад, текст набраний 14 кеглем, буде дорівнює 14 pt по висоті.

Інтерліньяж

Інтерліньяж - міжрядковий інтервал. Відстань між базовими лініями сусідніх рядків.

Інтерліньяж має відповідати розміру шрифту

Відстань між рядками практично завжди має бути більше розміру шрифту. За винятком заголовків. Щоб досягти балансу між текстом і «повітрям», зробіть межстрочное відстань приблизно в півтора рази більше висоти малих літер. Або встановлюємо інтерліньяж, рівний 150% розміру шрифту. Наприклад розмір тексту 14 px, тоді інтрерліньяж - 21 px. 14/2 = 7 + 14 = 21.

Кернинг

Кернинг - відстань між буквами.

Основна суть кернинга - підбір різних інтервалів між різними парами конкретних букв для збільшення зручності читання.

Яку кількість шрифтів використовувати?

Бажано використовувати не більше 3-х накреслень. Це можуть бути шрифти як однієї гарнітури, так і різних. Наприклад, гарнітура Roboto містить досить велику кількість різних накреслень. З них легко можна вибрати три, які, як ми вважаємо, підійдуть для нашого сайту. Припустимо, це будуть Light, Regular і Bold. Для заголовків можна використовувати шрифт Bold або Light, для кнопок Bold, для основного тексту Regular. Таким чином, використовуючи одну гарнітуру, ми забезпечимо правильну типографіку. Природно, все залежить від тематики продукту: сайту, блогу, реклами тощо і ідеї, яку заплановано закласти в дизайн.

Якого розміру повинен бути шрифт?

Розмір тексту в інтернеті не повинен бути менше 12 пікселів. Кращий вибір - в межах 14-18 px для основного тексту. Чи не занадто великий і в той же час легкий для читання. Причому, якщо вже ми вибрали розмір 16 px, він повинен залишатися 16 px на всіх сторінках сайту і не скакати плюс-мінус 1 px від блоку до блоку. Стосується це і інтерліньяжу, він всюди має бути однаковий.

Розмір шрифтів треба вказувати цілими числами, не використовуючи десяткових дробів, наприклад 16,28 px. І, звичайно ж, в фотошопі необхідно перевести pt в px. Для цього вибираєте в меню: Редагування - Установки - Основні. Далі - Одиниці виміру та лінійки. Міняєте в випадаючих меню «Текст», «Лінійки» пункти на пікселі. Тиснете «OK».

Довжина рядка

Довжина рядка не повинна перевищувати 600 px. Це оптимальний розмір для комфортного переміщення погляду з одного рядка на іншу. Дуже широку контентну частина важко читати - часто просто втрачаєш ту сходинку, на яку збирався перейти після прочитання довгого попереднього рядка. Якщо все-таки необхідно розтягнути текстовий блок на 1000 px і більш по ширині, можна спробувати розбити текст на дві або більше колонок. Інший варіант - зробити міжрядкову відстань трохи більше звичайного, щоб візуально сильніше відокремити рядки один від одного. Не забувайте розділяти текст абзацами, це також допоможе зробити його легко читаним.

Посилання

Перевірка дизайну на правильність проста: якщо глядач, не доторкаючись до миші, може вгадати, де посилання, а де ні, - перед нами хороший сайт. Тому необхідно заздалегідь продумати, як будуть виглядати все посилання на сайті. Припустимо, все клікабельні елементи - одного кольору, наприклад червоні, а не клікабельні іншого - чорного. Тоді ніхто не буде плутатися.

Часто зустрічається таке: заголовок виділений червоним кольором (адже треба його якось виділити), далі ще кілька дуже важливих фраз УТП синього кольору і все це упереміш зі звичайним текстом чорного кольору. В кінці тексту кнопочка, теж червона. Зрозуміло, що треба кликати на кнопку, але, виявляється, клікабельним був ще й текст, забарвлений в синій (він відкривав додаткову інформацію).

Вирівнювання

Є текстові блоки, які дуже часто вирівнюються неправильно - це вирівнювання по ширині, вирівнювання посередині і вирівнювання по правому краю. У всіх цих випадках читати текст незручно, і візуально він виглядає непривабливо. Вирівнювання ЗАВЖДИ має бути по лівому краю. Навіть якщо дуже хочеться зробити його по правому краю (просто тому що вам здається - композиційно має бути саме так) - це неправильно.

Винятком може бути одна або дві короткі пропозиції, які, швидше за все, є підзаголовками для основного тексту.

Контраст

Контраст - це одне з основних засобів виразності в дизайні. Не потрібно боятися великих форм і порожніх просторів! Нарочито велика типографіка стає самостійним елементом, що не вимагає додаткових графічних засобів оформлення. Хороший приклад контрасту в кольорах, формах і розмірах всіх об'єктів.

Стилі

Потрібно завжди думати про те, яку інформацію ви намагаєтеся донести відвідувачеві. Вибираючи шрифт, слід пам'ятати, що щасливі повідомлення повинні супроводжуватися легкими, повітряними і м'якими формами шрифтів, в той час як повідомлення якихось більш похмурих тем (наприклад, Хеллоуїн) краще було б супроводжувати шрифтами з більш жорстким шрифтом. За допомогою типографіки веб-дизайнери підкреслюють атмосферу і стиль сторінки, а також створюють поживний ґрунт для емоційного відгуку.

Шрифтові пари

З появою зручних веб-шрифтів можливість удосконалити свій сайт стала ще доступнішою. Але велика кількість шрифтів може збити з пантелику не тільки новачка - який з них підійде саме вам?

Сайт - це текст. Коли ми заходимо на сторінку, велика частина того вмісту, за яким ми приходимо, це текст. І тому вміння підбирати і використовувати шрифти - це найважливіший навик для дизайнера.

Що ж відбувається на сторінці з точки зору шрифтової пари? Коли ми заходимо на сайт, ми бачимо величезну кількість поєднань тексту. Ми бачимо заголовки, бачимо якийсь основний текст, бачимо якісь підписи, поруч якісь примітки. Ми бачимо дату, припустимо, бачимо «сьогодні» написано зовсім іншим шрифтом. Ось цей шрифт теж відрізняється від заголовного, наприклад, і ось від цього. І як це все правильно поєднувати - питання.

Головне правило - це достатній контраст. Чи не занадто великий, не дуже маленький - той, який нам потрібен тут і зараз. І 4 інструменти для створення шрифтів пари - так звані 4 способи, 4 інструменти, якими ми можемо впливати на контраст.

  1. По-перше, це, зрозуміло, шрифт. Це Антиква і Гротеск, наприклад. Тому що між ними максимальний контраст. Антиква - це шрифт із зарубками, Гротеск - це шрифт без зарубок.

2. Так само ми можемо використовувати накреслення як в рамках одного шрифту, так в рамках і різних шрифтів. Наприклад, це звичайне написання (Regular), жирне і Italic.

3. Також важливо сказати про розмір. Бажано, щоб у вас різниця між вашими рядками, вашим шрифтом була більше, ніж 1,6. 1,6 - це цифра з пропорції золотого перетину. Використовуйте її як просто коефіцієнт. Тобто, якщо у вас є якийсь текст, і ви хочете зробити якийсь заголовок до нього - помножте розмір цього тексту на 1,6 і у вас вийде розмір заголовка. Якщо його буде досить, може бути, ще раз доведеться збільшити.

4. І, зрозуміло, колір.

Є, в принципі, усталені пари, які можна брати і використовувати. Наприклад, Baskerville і Gill Sans. Бачимо жирне накреслення в заголовку, шрифт із зарубками, текст написаний шрифтом sans serif. Також достатній контраст - ми бачимо різницю між цими двома шрифтами.

Також Garamond і Verdana. При підборі шрифтової пари можна скористатися такими усталеними парами, наприклад, Garamond для заголовків, Verdana дуже хороший шрифт для набору основного тексту - його комфортно читати. У той же час Garamond - він досить виразний для заголовків.

Proxima Nova і Palatino - тут навпаки, ми використовуємо Proxima Nova заголовки - це шрифт без зарубок.

І Palatino, може бути, можна використовувати для якихось книжкових наборів, для наборів, можливо, статей. Palatino + Proxima Nova

Ще один приклад - PT Sans і PT Serif. Це шрифти, які знаходяться в складі однієї гарнітури, тобто, так звані шрифти однієї природи. Тобто, Sans в заголовку, Serif в основному тексті.

У чому краса використання гарнітури в складі шрифтової пари? У тому, що шрифти - вони схожі за своєю природою: їх робив один автор, у них одна єдина концепція. У них є, зрозуміло, відмінності в зображенні - тут є зарубки, тут немає, але вони дуже гармонійно один з одним поєднуються. Helvetica + Times.

Де брати шрифти?

  • google.com/fonts/ - це каталог безкоштовних шрифтів від Google

  • typekit.com - схожий по моделі, за концепцією. Ми можемо звідти брати шрифти і використовувати їх в web-е, наприклад, відразу ж.

  • myfonts.com - величезна база шрифтів. Там дуже багато англійських шрифтів, латиниці і, насправді, також є і кирилиця.

  • paratype.ru - величезна кількість російських шрифтів. Вони не найдешевші, але на сайті Paratype (у них в групі) часто бувають акції. Коли вони запускають якийсь черговий новий шрифт, вони його продають дуже дешево. Тому має сенс підписатися на їх групу в Facebook.

Головне правило

Перед тим, як ви почали дизайн, підберіть шрифтову пару.

Це дозволить вам не плутатися в розмірах в подальшому, не думати кожен раз про те, який шрифт тут використовувати, як тут використовувати. Краще один раз це все визначити (який ви використовуєте заголовок, підзаголовок, які у них розміри) і далі просто застосовувати вже в своєму макеті.

Каліграфія

Каліграфія (грец. «Гарний почерк») - одна з галузей образотворчого мистецтва. Ще каліграфію часто називають мистецтвом красивого письма. Сучасне визначення каліграфії звучить наступним чином: «мистецтво оформлення знаків в експресивній, гармонійній і майстерній манері».

Історія писемності - це історія еволюції естетичних понять, що розвиваються в рамках технічних навичок, швидкості передачі інформації і матеріальних обмежень людини, часу і простору. Стиль листа, зазвичай описуваний як шрифт, рука або алфавіту.

Сучасна каліграфія досить різноманітна - від побутових рукописних написів на листівках до високого мистецтва, в якому експресія написаного рукою знака не завжди народжує чіткі літерні форми. Класична каліграфія значно відрізняється від шрифтових робіт і нестандартних рукописних форм, хоча каліграф повинен вміти робити і те, і інше; літери склалися в такі форми історично, але при цьому вони текучі і спонтанні і завжди народжуються в момент листи.

Зараз каліграфія існує в основному в формі запрошень листівок і весільних привітань, а також в графіті, шрифтах і рукописних логотипах, в релігійному мистецтві, графічному дизайні, в висічених написах на каменях і в історичних документах. А також каліграфію використовують на телебаченні в якості оформлення, в різних характеристиках, свідоцтвах про народження та в інших документах, де передбачається писати від руки.

Зараз люди пишуть мало. Саме тому каліграфія стає все популярнішою. Глобалізація остаточно перетворила її із засобу інформування на мистецтво. Поява масових інструментів для письма та їхнє спрощення до таких форм, що красиво писати можна будь-де: на вокзалі, в поїзді чи вдома, — зробило каліграфію комфортною. Спростився процес її створення.

Українська абетка різниться від латинської, має свої унікальні, відмінні від російської та білоруської мов, елементи. Люди зацікавилися, чим наш алфавіт особливий, і почали вивчати це питання. Але передусім каліграфія — це поєднання одразу декількох композиційних прийомів: ритму, динаміки, статики та інших. Це й змушує нею цікавитися. Вона подобається людям.

Леттерінг

Його відмінність полягає у тому, що в каліграфії дизайнер букви пише, а в летирінгу малює їх. Простіше кажучи, буква має свій скелет, основу. Коли її пишеш, то маєш обмеження стосовно елементів, які можна використати. Малюючи букву, можеш робити її будь-якою, але необхідно взяти за основу той самий кістяк, щоб не видозмінити літери до невпізнаваності.

Шрифт - це не леттерінг. Шрифт - добірка букв, призначених для повторного використання багато раз і в будь-якому порядку.

Леттерінг - єдині в своєму роді кілька букв, виготовлених (намальованих, вирізаних і ін.) для однієї конкретної ситуації.

Багато людей називають шрифтом що завгодно, якщо там є кілька букв. Однак, часто те, що вони бачать, є леттерінгом. Його головна відмінність - упор на графічну складову: унікальні форми, які поєднуються один з одним в конкретному слові або фразі. Марк Симонсон провів хорошу аналогію: леттерінг відрізняється від шрифту так само, як ліплення з глини відрізняється від будівництва з кубиків Лего.

У леттерінге літери, як правило, намальовані або написані тільки один раз, і для конкретного контексту. У шрифті одні і ті ж букви мають однакову накреслення.

Історія становлення дизайну

Історія становлення дизайну як професії мала свій початок більше ста років тому. Саме в той час в Англії виник рух «за зв’язок мистецтва і ремесел», який очолив У. Морис. Згодом цей рух знайшов своє відображення в художній культурі США, Фінляндії та Швеції. Саме тоді були сформовані основні положення теорії та принципи дизайну, які вплинули на напрямки дизайну наступних років.

У відповідності з іншою точкою зору виникнення дизайну відносять до початку XX сторіччя, коли художники зайняли ведуче місце в ряді галузей промисловості і отримали можливість формувати фірмовий стиль підприємств і впливати на товарну політику випуску товарів. Початком історії дизайну вважається 1907 рік, коли художник, архітектор, дизайнер Петер Беренс почав роботу в компанії «Аllgemeine Еlektrizital Gesellschaft». Попередні ж десятиліття були лише періодом теоретичної підготовки майбутнього практичного дизайну.

Відповідно до третьої точки зору щодо історії виникнення дизайну про професію дизайнера можна казати тільки після появи перших дипломованих спеціалістів. Це відбулося в 1920 році, коли у деяких країнах світу були створені перші учбові заклади, які готували художників – мастерів вищої кваліфікації для промисловості, а також інструкторів і керівників для професійно-технічної освіти. Цей напрямок дизайну вважається європейським «академічним». Поступово в Англії, Німеччині, Австро-Угорщині, Скандинавських та деяких інших європейських країнах почали формуватися такі художньо-промислові школи, де перейшли від малювання античних голів та копіювання орнаментів до нових засад навчання: роботі з формою і кольором на грунті загальних закономірностей, що зустрічаються в природі.

У м. Веймар (Німеччина) у 1919 році була заснована Вища школа будівництва і художнього конструювання – Баухаус – від німецького «Дім будівництва» – так звалося у Німеччині середньовічне спільне житло будвельників соборів та інших великих споруд [1, с. 18]. Її педагоги – архітектор Вальтер Гропіус (директор Баугаузу з 1919 до 1928 року), художник, математик та вчений-природознавець Йоганнес Іттен, скульптор Гергард Маркс та інші – розробляли естетику функціоналізму, принципи сучасного формоутворення в архітектурі і дизайні, займались формуванням матеріально-побутового середовища засобами пластичного мистецтва.

В 1925 році школу було переведено у Дессау, а у 1933 році вона була закрита нацистами. Ця школа підготувала десятки потенційних дизайнерів високого класу, а її викладачі, що емігрували здійснили величезний вплив на розвиток дизайну в США.

Йозеф Альберс – випускник Баугаузу – викладав у Блек-Маунтін Коледжі у Північній Кароліні, Вальтера Гропіуса і Марселя Броєра – випускника школи – запросили до Гарвардського університету, Ласло Могой-Надь заснував у Чикаго школу дизайну, що стала відомою під назвою Нью-Баугаузу [1, с. 18-19]. Таким чином, Баугауз дав великі імпульси до подальшого розвитку дизайнерської освіти не тільки в Німеччині, а й по всьому світі.

Існує ще одна версія виникнення дизайну, коли його відносять до періоду кризи 1929 року, і він описується як американський феномен. З початком кризи 1929 року американський дизайн стає реальною комерційною силою, набуваючи, в повному значенні цього слова, масового характеру. Поступово виникає професійна «індустрія дизайну», яка була фактично імпортована з Європи після другої світової війни.

Дві найважливіші характеристики дизайну в загальному сучасному уявленні – масовий (у сучасному значенні) характер і реальна комерційна значимість – дійсно з'являються вперше в США в епоху великої кризи. Це вже комерційний дизайн, що, насамперед, є способом збільшення попиту на промислову продукцію та засобом завоювання споживача. Ці його якості відмічались і підкреслювались піонерами американського дизайну Уолтером Тігом, Реймондом Лоуном та іншими, що зробили значний внесок у формування такого характерного для американського дизайну явища, як стайлінг – дизайнерське розробляння зовнішнього вигляду виробу, яке не пов'язане із зміною його функцій і не стосується його технічних або експлуатаційних характеристик.

Таким чином, в 1930-ті роки дизайн реально входить у життя – торгівлю, виробництво, побут. Цей період приходиться на той час, коли западні країни виходять з Великої економічної депресії, і дизайн стає дієвим фактором збуту промислових товарів.

В останній третині XX століття дизайн перетворився на глобальне явище постіндустріального суспільства, котре охоплює нові сфери проектної практики. У 50-ті роки, після другої світової війни почалася масова підготовка дипломованих дизайнерів. Окрім Німеччини, де наступницею Баугаузу була Ульмська школа, викладанню дизайну стали надавати все більшої уваги у Великій Британії, США, Франції, країнах Північної Європи.

Найяскравішим явищем 50-60-х років у галузі дизайнерської педагогіки було Вище училище дизайну в Ульмі. Воно було стоворене в 1953 році за програмою, яку запропонував учень Баугауза Макс Білль. «Ми дивимось на мистецтво як на найвищу форму прояву життя, – писав він, – і прагнемо надати життю вишуканості твору мистецтва. Ми хочемо поборювати огидне за допомогою красивого, доброго, практичного»

Після того, як Макс Білль залишив посаду керівника училища в 1957 році, на передній край освіти вийшло знауковлення дизайну, з’явилися такі предмети, як методологія, теорія науки та операційний аналіз, був узятий твердий курс на оцінку творчої оформлювальної діяльності згідно з раціоналізованими критеріями науковості. Крім того, вдалося чіткіше сформулювати завдання та окреслити сферу застосування корпоративного дизайну і підтвердити його важливість для сучасного суспільства.

В 1957 році була створена Міжнародна рада організацій індустріального дизайну, яка сприяла розвитку художнього конструювання у всьому світі, розумінню соціальних цілей і задач дизайну, підвищенню професійного рівня художників-конструкторів. В 1969 році на Генеральній асамблеї цієї ради в Лондоні було визначено поняття «дизайну» як творчої діяльності, метою якої є формування гармонійного предметного середовища, яке найбільш повно задовольняє матеріальні і духовні потреби людини.

Для 70-х – початку 80-х років характерною була нова концепція американського дизайну. Її основна сутність полягала в проектуванні не об'єкту як такого, а ефекту, який може бути досягнутий з його допомогою. Особлива увага приділяється використанню ергономічних параметрів, за допомогою яких досягається достатня безпека та оптимальний комфорт. У зв'язку зі складністю об'єктів і взаємозв'язків їхніх елементів у проектуванні використовується системних підхід.

На межі XX століття багато художників, які спостерігали за швидкою зміною предметного середовища під впливом технічного прогресу і зміни способу життя людей, почали шукати дизайнерські основи вже не у еволюційних формах минулого, а в народженні нового часу, у формально невпорядкованому інженерному формоутворенні, нестильовому промисловому будівництві і відносились до них як до нової природи, оточуючої людину.

Поява нових видів транспорту, залізниць і портів, великих територій заводів і фабрик почала сприйматися як нове джерело краси, як прояв раціоналізму в художньому мисленні і проектної діяльності людей взагалі. Впровадження нової техніки у всі галузі людської діяльності поставило художників перед необхідністю вирішення різноманітних технічних та естетичних задач в галузі машинобудування, станкобудування, приладобудування, транспорту тощо.

Таким чином, задачі дизайну не обмежувалися лише відображенням зовнішнього вигляду предметів, а включали всебічну проробку структурних зв'язків між предметами, щоб надати середовищу необхідної функціональної і композиційної єдності.

90-ті роки XX століття, що характеризувалися переходом до ринкових відносин призвели до зміни вимог споживачів до товарів, які вони бажають придбати. Ринок покупок «за необхідністю» перейшов у ринок «емоційних покупок». Виходячи з цього перед дизайнерами стала задача залучити споживачів до товару, змотивувати його покупку, покращити емоційний стан споживача, що можна було зробити за рахунок оригінального дизайну як самого товару, так і упаковки. Така сама задача є основною і для дизайнерів сьогодення.

Дизайнер Петер Беренс

Джозеф Альберс

Історія типографіки

Кожен дизайнер прагне працювати сучасно. Щоб краще розбиратися в тому, як сучасні тенденції дизайну відображаються на типографике, варто озирнутися назад і подивитися на неї виникнення, розвиток і основні течії.

Історія типографіки як науки починається з винаходу друкарства. Питання про походження друкування книг, т. Е. Про те, коли, де і ким воно винайдено, належить до числа найбільш складних і спірних історичних питань. Жодне винахід не народжується в голові однієї людини як би з нічого, і книгодрукування не є в цьому відношенні винятком.

Перші складальні форми були винайдені в Китаї в 1040-х роках людиною на ім'я Бі Шен. Вони були зроблені з фаянсу, тому був неміцними і служили недовго. Ця технологія до середини XIII століття досягла Кореї, а до середини XV - Європи. Там вона перетнулася з довгої і плідної історією латинського шрифту. Завдяки тому, що для латиниці було потрібно значно менше знаків, в Європі друкарський набір розцвів так, як ніколи не розцвів би в Китаї.

Родоначальником друкарства називають Йоганна Гутенберга. Його найбільша заслуга полягала в тому, що в середині 1440 року його розробив металеву складальну форму і друкарський верстат, за допомогою яких велика кількість самого різного писального матеріалу можна було віддрукувати швидко і c великою точністю. Але головне - з'явилася можливість багаторазово використовувати окремі буквені літери, відлиті з розплавленого свинцю. Така технологія отримала назву розбірного (набірного) шрифту. Кожна літера, вирізана в зворотному вигляді, виготовлялася окремо. Потім з них набиралися рядки і за допомогою преса робилися відбитки на папері.

Для перших виливків літер Гутенберг вибрав готичний шрифт, тому що в той час це була панівна форма рукописного шрифту. Цей шрифт розробив Петер Шеффер під наглядом самого Гутенберга. Шрифт був дуже точної імітацією найдосконалішого листи тієї епохи. Він містив близько 300 знаків.

Згодом в Європі стали віддавати перевагу більш простим, тонким і вишуканим формам антикви (Roman). Це перевагу грунтувалося, перш за все, на їх естетичної привабливості і легкості читання. Широке застосування антіквенние шрифти отримали в Венеції і Парижі.

Характерною рисою антіквенной групи шрифтів служить наявність зарубок. До сих пір шрифти цього виду є найчисленнішими. Вони діляться на три групи: старовинна антіква (Old Style), перехідна антіква (Transitional) і нова антіква (Modern).

Перші шрифти старовинної антикви були створені Ніколасом Йенсеном (Nicholas Jenson). Вони були навіяні древнеримскими символами, знайденими на пам'ятках. typ5Прімерамі шрифтів старовинної антикви є такі сучасні шрифти, як Garamond, Minion, Palatino, Century Schoolbook.

З середини XV століття друкована книга знаходить свій специфічний вигляд: як текстового шрифту використовується удобочитаем антіква, aldusстрого витримуються принцип форматування рядків, рівномірність інтерліньяжу, абзацний відступ як засіб членування тексту. У 1494 році Альд Мануций (Aldus Manutius), італійський друкар і видавець з Венеції, видав першу книгу із зразками шрифтів.

На початку XVI століття типографіка розвивалася в стилі французького ренесансу. З'являється титульний лист. У книгах широко застосовуються орнаментальні бордюри, стає витонченим шрифтове оформлення. Шрифт продовжує втрачати схожість з рукописним, його малюнок робиться суворіше. Шрифтовая палітра збагачується курсивом, вперше награвірован Франческо де Болонья.

В XVII столітті найбільш примітним явищем в історії типографіки стає видавнича діяльність голландського будинку Ельзевірів, спрямована головним чином на створення книг широкого попиту. В їх виданнях переважають невеликі, зручні для користування формати. Шрифти ельзевіровскіх видань мають кілька більш важкий малюнок, що дозволяє їм зберігати чіткість відбитка навіть при великих тиражах.

В середині XVIII століття яскравою подією в типографике стала діяльність француза П'єра Фурньє (Pierre Fournier), видання якого відрізнялися вишуканістю витягнутих пропорцій і щільністю набору рядки. У 1773 році він видав книгу «типографським керівництво», яка пропонувала єдину систему визначення розмірів шрифтів (кеглів). didotВ сучасних комп'ютерних видавничих системах досі використовується система Фурньє: пункти (points) і піки (picas). Пізніше вона була доопрацьована Франсуа Амбруазом Дідо (Francois Ambroise Didot), який ввів систему пунктів для визначення розміру шрифтів: 72 пункту приблизно були прирівняні до одного дюйму.

Найбільшою фігурою в історії типографіки перехідного стилю був Джон Баскервіллі (John Baskerville), який працював в Англії в 1750-70 рр. Відмовившись від застосування книжкового орнаменту, Баскервіллі став основоположником «чистої» типографіки, заснованої тільки на шрифтовому оформленні. typ6Ізобретенная їм гарнітура Baskerville є чудовим прикладом перехідного стилю. До цього стилю належать також шрифти Gaslon, Time New Roman, Bookman.

Не можна не відзначити безсумнівні заслуги в області типографіки італійця Джамбаттіста Бодоні (Giambattista Bodoni), який працював в 1760-1800 рр. в Пармі. Його твори відрізняються геометричною строгістю шрифтового малюнка. У 1773 році Бодони ввів так звану нову антикву (Modern). Вона володіла достатньою елегантністю, але більш жорстким характером в порівнянні із старовинною антиквой. Найбільш відомим шрифтом цього періоду був шрифт Bodoni.

Промислова революція розширила сферу застосування типографіки, відкривши їй велике поле діяльності в рекламі і періодиці. Потреба в заголовних шрифтах сприяла інтенсивній розробці нових видів і різновидів шрифтового малюнка.

У першій половині XIX століття зусиллями англійських розробників вводяться в обіг шрифти жирних накреслень, єгипетські шрифти, гротески і ін. Активно розвивається книжковий орнамент, помітно зростає значення ілюстрації. Разом з тим книга все більше втрачає типографическую строгість і цілісність, її характерними рисами стають перевантаженість декором з елементами різних історичних стилів.

В умовах швидкого зростання виробництва основним способом маркетингу та продажу стає реклама. І в ній особливе місце зайняв шрифт без зарубок (Sans Serif). Його численні варіанти стали широко застосовуватися для написання заголовків. Шрифт вийшов за межі книг, і типографіка включилася в сферу комерції як нова форма комунікації, яка охопила весь світ. Приклади шрифту без зарубок: Arial, Helvetica, Futura.

В кінці XIX - початку XX століття в Європі і Росії поширилося напрямок арт-нуво (Art Nouveau) з його прагненням до експресії органічних форм. Воно мало великий вплив на книжковий дизайн і рекламу. Контрастне поєднання рослинного орнаменту і декоративно-силуетних ілюстрацій багато в чому визначало специфіку вигляду книжкової смуги в виданнях тих років.

У Росії це був період великих змін в мистецтві книжкового оформлення. Багато відомих художники зайнялися розробкою оригінальних шрифтів. Серед них були: М. Врубель, А. Бенуа, М. Реріх та ін. Їх шрифти були далекі від класичних зразків і надзвичайно декоративні. Звичайно, такі шрифти використовувалися тільки для заголовків і реклами.

1930 поклав початок розвитку типографіки неокласичного стилю. Тут віддавалася перевага удобочитаемости знаків і тексту в цілому, простоті і звичності шрифтового малюнка, врівноваженості пропорцій шрифту і складальної смуги, відсутності друкарською пафосу й екстравагантності. Лідерами неокласичної типографіки були: Я.Чіхольд, який працював в Швейцарії і Великобританії; С.Морісон (Англія); Г.Цапф (Німеччина). У Росії неокласична типографіка пов'язана з іменами В.Фаворського і І.Рерберга.

У 1944 році у Франції з'явилися перші пристрої для фотокомпоновкі тексту, і вже до 1960-х років весь шрифтової набір перейшов від гарячого свинцевого лиття до холодного фотоспособом. Така технологія була названа фотонабором.

Не можна не відзначити розквіт американського експресіонізму в 1970-80 рр. X.Любалін, Е.Пеколік, М.Віньеллі і інші внесли в графічну структуру видань свого роду ігрове початок, дали імпульс розвитку фігуративного типографіки, в якій буква може виявитися зображенням предмета, а зображення - буквою. Величезну роль в розробці шрифтів зіграла Міжнародна шрифтовая корпорація (ITC), заснована в 1970 в Нью-Йорку X.Любаліном і А.Бернсом.

Не залишилася осторонь і російська типографіка. Роботи російських друкарів відзначені рядом високих міжнародних нагород. Головні досягнення пов'язані з іменами С.Телінгатера, В.Лазурского, Д.Бісті, В.Ефімова, М. Жукова, Н.Калініної і ін.

З появою комп'ютерів все широко використовувані шрифти були комп'ютеризовані. У порівнянні з латинськими шрифтами асортимент кириличних був досить бідний. Російська поліграфія страждала від їх нестачі. В кінці 90-х років з'явилися компанії, що виробляють російські комп'ютерні шрифти. Найбільшими серед них були «Параграф» і «Софт Юніон», які конвертували в цифрову форму існуючі російські гарнітури, створюючи російські варіанти найбільш популярних шрифтів. І хоча розроблялися і оригінальні російські шрифти, до сих пір ще відчувається їх недолік для реалізації різноманітних графічних проектів.

Час, в якому ми живемо, не дарма називають «століттям інформації». І велика частина цієї інформації існує в текстовому вигляді - книги, журнали, сайти. Не секрет, що в більшості випадків автори не займаються оформленням своїх текстів належним чином. Тому величезна кількість корисної інформації неможливо швидко знайти або просто зрозуміти через відсутність будь-яких правил оформлення та подання цієї інформації. Якщо ви хочете донести якусь думку своїм дизайном, необхідно дотримуватися певних правил - законам типографіки, які засновані на особливостях візуального сприйняття людини.

Самостійна робота учнів

  • Опрацювати історію дизайну (5 хв.) на даній сторінці сайту

  • Дослідити історію ландшафтного дизайну (результати дослідження представити в відео та надіслати на поштову адресу вчителя)

Виконати тестові завдання з теми даного уроку

СЗОШ № 8 м. Хмельницького, 2020 рік, вчитель інформатики Кравчук Г.Т.


9 клас конспект уроку 03.02.2021

Відображення документу є орієнтовним і призначене для ознайомлення із змістом, та може відрізнятися від вигляду завантаженого документу. Щоб завантажити документ, прогорніть сторінку до кінця

 
ПЕРЕГЛЯД
МАТЕРІАЛУ
Отримати код

9 клас

Урок 28. Алгоритми опрацювання табличних величин: пошук елемента з найбільшим найменшим значенням.

Цілі:

  • навчальна: сформувати уявлення про класифікацію задач опрацювання одновимірних масивів; знання стандартних алгоритмів опрацювання одновимірних масивів, вміння використовувати стандартні алгоритми для розв’язування задач;

  • розвиваюча: розвивати здібності до формалізації; виховувати дослідницький підхід у пізнанні нового, формувати вміння застосовувати отримані знання для розв’язування прикладних задач;

  • виховна: виховувати інформаційну культуру та сприяти розширенню кругозору учнів.

Тип уроку: Комбінований.

Обладнання та наочність: дошка, комп’ютери з підключенням до мережі Інтернет, підручник, навчальна презентація.

Програмне забезпечення: середовище програмування Lazarus, браузер, пакет офісних програм.

Хід уроку

І. Організаційний етап

  • привітання

  • перевірка присутніх

  • перевірка готовності учнів до уроку

ІІ. Перевірка домашнього завдання. Актуалізація опорних знань.

1.Індивідуальна робота.

Тестування за допомогою програми MyTest.

1.        Що таке таблична величина?

2.        Як позначається у середовищі програмуванняLazarus:

1) одновимірний масив;

2) двовимірний масив.

3.        Поясніть призначення наступних властивостей елемента управління  Memo:

1)        Name;

2)        Lines;

3)        MaxLength;

4)        Left;

5)        Top;

6)        Font.

4.        Для чого призначений елемент StringGrid ?

5.        Поясніть призначення основних  властивостей елемента управління StringGrid:

1) ColCount;

2) RowCount;

3) FixedCols;

4) FixedRows;

5) FixedColor;

6) ScrollBars .

6.        Які складові містять програми для опрацювання табличних величин мовами програмування?

7.        За якими ознаками відбувається впорядкування даних?

8.        У чому полягає впорядкування лінійної таблиц:

1)        метод вибору;

2)        бінарний (двійковий) пошук.

2. Робота в парах.

Завдання. Виконайте завдання на встановлення відповідності між властивостями елементів управління Memo та їх описом.

Властивості

Опис

Name

Імя. Використовують у програмі для доступу до елемента управління та його властивостей, зокрема для доступу до тексту, який введений у поле редагування

Lines

Масив рядків, що відповідає вмісту поля

MaxLength

Максимальна довжина тексту в полі Memo

Left

Відстань від лівої межі поля до лівої межі форми

Top

Відстань від правої межі поля до правої межі форми

Font

Шрифт

3. Фронтальна робота (бесіда).

Обговорення понять: опис змінних типу одновимірний масив, задавання значень елементам масиву, введення і виведення значень елементів масиву, найбільше(max) й найменше(min) значення.

ІІІ. Формулювання теми, мети й завдань уроку; мотивація навчальної діяльності

Слово вчителя. Уявіть себе головним бухгалтером підприємства, який аналізує масив значень заробітної платні співробітників за місяць. Які задачі ви можете поставити при такому аналізі? (Загальна сума виплат; середнє значення; кількість нарахувань із сумою, більшою за певне значення; найбільше значення.) Розв’язування багатьох прикладних задач, що потребують опрацювання сукупності однотипних значень, базується на типових алгоритмах опрацювання масивів. Користуючись типовими алгоритмами опрацювання масивів, ви зможете створювати ефективні алгоритми розв’язування більш складних прикладних задач.

IV. Сприйняття та усвідомлення нового матеріалу

Пояснення вчителя з елементами демонстрування презентації

(використовуються можливості локальної мережі кабінету або проектор)

Для того щоб зрозуміти, як відбувається пошук найбільшого елемента деякої табличної величини, уявімо себе на місці виконавця алгоритму.

Елементи табличної величини записані в пам'яті, доступ до комірок якої здійснюється за номерами елементів. Виконавець може одночасно відкривати доступ до однієї комірки.

Нехай задано лінійну таблицю з n цілих чисел.

Виконаємо такий алгоритм:

  1. прочитаємо з пам'яті перший елемент таблиці. Його значення дорівнює 5. Запам'ятаємо його як максимальне — надамо його значення величині max;

  2. прочитаємо другий елемент таблиці. Його значення більше за maxтому «забудемо» про попереднє значення й запам'ятаємо значення max=6;

  3. прочитаємо третій елемент таблиці. Його значення менше за max, тому можна приступати до наступного кроку без зміни значення max...

Продовжимо таким чином кроки алгоритму поки не будуть переглянуті всі елементи лінійної таблиці до n включно. На кожній ітерації циклу в змінній max міститиметься найбільше значення з пройденої частини лінійної таблиці, а по завершенні циклу змінна max зберігатиме максимальне значення в усьому масиві. (Чи є запитання?)

Запитання учням!!!

Подумайте, який алгоритм буде для знаходження найменшого елемента масиву.

Пошук найменшого елемента масиву здійснюють за аналогічним алгоритмом, знаходячи відповідно елемент (min), який менший від усіх переглянутих елементів.

Фронтальна робота з класом. Розв’язування вправи.(з демонстрацією на екран)

ЗавданняВизначити найбільше значення елементів табличної величини чисел від 1 до 10.

Спочатку вважатимемо, що значення першого елемента табличної величини є найбільшим.

Після цього послідовно переглядатимемо значення всіх інших елементів табличної величини, і якщо трапиться значення, що більше того, яке на даний момент вважаємо найбільшим, то вважатимемо тепер уже це значення найбільшим.

Робота з підручником: § 18.2( Н.В.Морзе)

Можливий варіант розміщення об’єктів на електронній формі.

Текст відповідної процедури:

procedure TForm1.Button1Click(Sender: TObject);

var a: array [1..10] of real; i: integer; max: real;

begin

for i := 1 to 10 do a[i] := StrToFloat(Memo1.Lines[i-1]);

max := a[1]; {вважаємо, що найбільше значення — значення першого елемента}

for i := 2 to 10 do If a[i] > max Then max := a[i]; {замінюємо найбільше значення}

Label1.Caption := FloatToStr (max) + ' — найбільше значення’;

end;

VI. Засвоєння нових знань, формування вмінь

Робота за комп’ютером

  1. Інструктаж з БЖД.

  1. Практична робота за комп’ютерами.

Вправа, с.132-133

Завдання. Створіть проект Випробування, у якому знаходять різницю між найбільшим і найменшим елементом лінійної таблиці з 10 дійсних чисел, які набувають значень від 5 до 10 випадково.

Розробка проекту в середовищі програмування Lazarus

  1. У папці Навчальні проекти своєї структури папок створіть папку Випробування.

  2. Відкрийте середовище Lazarus і створіть новий проект. Розмістіть на екранній формі обєкти, самостійно надайте значення їхнім властивостям.

  1. Створіть процедуру опрацювання події натиснення кнопки Знайти. У вікні редактора коду опишіть змінні, які будуть використовуватись у проекті: а – масив дійсних чисел; і – номер (індекс) елемента масиву; max – найбільше значення серед елементів; min – найменше значення серед елементів.

var i : integer;

max; min : real;

a : array [1…10] of real;

  1. У вікні редактора коду запишіть команди випадкового генерування елементів массиву та виведення їх у таблицюпошуку найбільшого та найменшого елементів массивувиведення різниці значень max і min . Зауважте, для того щоб отримати випадкове дійсне число. Яке відповідає умові 5, використано вираз: 10.0 - random5.0

  1. Запустіть проект на виконання. Перевірте, чи відповідають умові завдання дії, пов’язані з об’єктами управління екранної форми. Якщо є помилки – виправте їх.

  2. Знайдіть на екранній формі найбільше та найменше значення елементів згенерованої таблиці. Обчисліть їхню різницю. Перевірте программу на наявність логічних помилок. Завершіть роботу з проектом і середовищем програмування, збкрігши всі зміни.

  1. Вправи для очей.

1. Сядьте прямо, очі дивляться вперед, голова нерухома.
2. Робимо рух очима вгору-вниз.
3. Робимо рух очима вправо-вліво.
4. Робимо рух очима по діагоналі.
5. Малюємо очима прямокутник.
6. Малюємо очима ромб.
7. Малюємо очима трикутник.

VIІ. Підбиття підсумків уроку

Бесіда

  1. Який алгоритм лежить в основі пошуку найбільшого елемента лінійної таблиці?

  2. Чим відрізняються алгоритм пошуку найменшого елемента лінійної таблиці від алгоритму пошуку найбільшого елемента?

VІІI. Домашнє завдання

  1. § 18.2 ст. 132-133

  2. ** Знаходження номера найбільшого елемента масива із 50 дійсних чисел

var A: array [1..50] of real ;

   i: integer; max: Real; N_max: integer;

begin

  For i : =1 to 50 do read(a[i]);

     max : =a[1] ;

    For i : =2 to 50 do

        if  max<a[i]  then

begin

                       max:=a[i];

                       N_max:=i;

end;

       Writeln('max=', max);

   Writeln('N_max=', N_max);

    End.

ІХ Оцінювання роботи учнів.


Немає коментарів:

Дописати коментар