Інформатика

https://naurok.com.ua/test/join?gamecode=1036770

22.01.21201

Завдання: Опрацювати матеріал за посиланням тут і тут

e8375a83f2f4912d9c2030b07c4fd933.pptx

a9ec97e4b53ce77eb13fa7781b718ac5.pptx

15.04.2021 Шановні здобувачі освіти групи 203! Перейдіть за посиланням для того, щоб пройти тестування. Тест можливо пройти лише один раз з обмеженням часу. Вказуємо прізвище та своє ім'я. Бажаю всім успіхів

https://naurok.com.ua/test/join?gamecode=8698605

08.04.2021

Урок: 35. Основні теорії дизайну

Переглянути матеріал за посилання sites.google.com/view/distance-informatics-10/%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8C-%D0%B3%D1%80%D0%B0%D1%84%D1%96%D1%87%D0%BD%D0%B8%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%B7%D0%B8%D1%86%D1%96%D1%8F-%D1%82%D0%B0-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%83%D1%80%D0%BE%D0%BA-18

01.04.2021 Урок№ 34 Насиченість, світлість, колірний тон, психологія кольору.

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

Колір - властивість світла викликати певне зорове відчуття у відповідності зі спектральним складом відбиваного або випускається випромінювання. Світло різних довжин хвиль збуджує різні колірні відчуття; випромінювання від 380 до 470 нм мають фіолетовий і синій колір, від 470 до 500 нм - синьо-зелений, від 500 до 560 нм - зелений, від 560 до 590 нм - жовто-оранжевий, від 590 до 760 нм - червоний. Однак колір складного випромінювання не визначається однозначно його спектральним складом.

Терміни колористики:

1. Відтінок (кольори) - назва кольорів (червоний, синій,...)

2. Інтенсивність - рівень концентрації кольорів (перевага того або іншого тону)

3. Глибина - ступінь яскравості або приглушеності тональності кольорів

4. Світлота - ступінь розбіленості ( % присутності в кольорі білого і ясно-сірого тонів)

5. Насиченість - % присутності темно-сірого і чорного тонів

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

7. Контрастність - відношення різниці яскравостей об'єкта і фону до їхньої суми

Кольорові моделі

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

Основні кольорові моделі

RGB
CMYK
HSV або HSB

Короткий опис колірних асоціацій:

Червоний - теплий і дратівливий, стимулює мозок, поліпшує настрій. Колір лідерства, чоловічий колір, цей колір також збудливо діє на нервову систему.

Червоному кольору віддають перевазі влюбливі і сексуальні люди.

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

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

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

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

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

Природа, здорове середовище, відновлення, молодість, бадьорість, весна, щедрість, родючість, ревнощі, недосвідченість, заздрість, невдача.

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

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

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

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

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

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

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

Біле світло включає всі видимі кольори, які формують безмежний спектр, представлений в послідовності кольорів від фіолетового до червоного:

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

Основні кольори є «батьками» колірного кола; це єдині кольори, не утворені з інших. Основні кольори знаходяться в третинах колірного кола.

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

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

Кольори в сукупності

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

Синій міститься в семи кольорах, які як би розсипаються віялом, починаючи з ясно-блакитного. Зелений і фіолетовий є вторинними кольорами, які містять синій.

https://sites.google.com/view/smirnovaseu/%D1%96%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82%D0%B8%D0%BA%D0%B0/10-11-%D0%BA%D0%BB%D0%B0%D1%81/%D0%B3%D1%80%D0%B0%D1%84%D1%96%D1%87%D0%BD%D0%B8%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D0%B2%D0%B8%D0%B1%D1%96%D1%80%D0%BA%D0%BE%D0%B2%D0%B8%D0%B9-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8C/%D1%83%D1%80%D0%BE%D0%BA-13-%D0%B3%D0%B4 деталі за посиланням

25.03.2021 Урок № 33 Колір. Теорія кольору. Колористика. Колірний круг

Колір. Теорія кольору. Колористика

Основні поняття та інструменти колористики:

1. Колірне колесо

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

2. Колірні моделі

Адитивна модель кольорів бере червоний, синій та зелений як основні кольори, тому вона також відома як колірна система RGB (read, grean, blue). Ця модель є основою всіх кольорів, що використовуються на екрані.

Субтрактивна модель отримує кольори шляхом віднімання світла. Вона складається з двох кольорових систем. Перша –RYB (червоний, жовтий, синій), також відома як художня система, що часто використовується в мистецтві, особливо в живописі. RYB була основою для сучасної наукової теорії кольору, яка визначила, що синій, маджента та жовтий кольори – це найефективніший набір з трьох кольорів для об’єднання. Так була сформована модель кольорів CMY.

Оптичні ілюзії в дизайні:

1. Ілюзія Корнсвіта (Cornsweet Illusion)

2. Ілюзія Мюллера-Лаєра (Müller-Lyer Illusion)

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

Інформація отримана за посиланням

Практичне завдання:

1. За допомогою додатку Color Harmony підбери кольори для меблів вашої кімнати, для цього у режимі Harmonic palette (натисни на значок с фотоапаратом) наведи на фото шпалер. Додаток "підбере" палітру кольорів, які будуть доречними.

2. У режимі Image palette "розклади" на кольори фото природи.

18.03.2021

Урок: 32. Практична робота " Ретуш та художня обробка зображень"

Переглянути матеріал за посилання sites.google.com/view/distance-informatics-10/%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8C-%D0%B3%D1%80%D0%B0%D1%84%D1%96%D1%87%D0%BD%D0%B8%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%80%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%B0-%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0/%D1%83%D1%80%D0%BE%D0%BA-13-14

Дати відповідь на запитання:

Завдання для роботи вдома

Опрацювати навчальний матеріал теми
Повторно виконати (при потребі) практичні завдання цієї сторінки. Зображення підібрати на власний розсуд.
Переглянути навчальну презентацію до теми уроку. Відпрацювати навички роботи із фотографіями (за зразками у презентації).

21.01. 21 Урок № 25 - (26) Основні інструменти для малювання. Концепція побудови пошарового зображення

Урок № 25-26.pptx

Відеоурок " Інструменти Прямокутна область та Овальна область у Photoshop "

Відеоурок "Інструмент Переміщення у Photoshop"

Відеоурок "Робота з шарами у Photoshop"

21.01.21Урок № 24 Растровий графічний редактор як інструмент для дизайну. Редактор Photoshop

урок 24.pptx

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

Переглянути навчальну презентацію до уроку
Первинне знайомство із середовищем графічного редактора Photoshop
Прослухати відеоуроки вчителя :

Створення і збереження зображень у Photoshop,
Інтерфейс програми Photoshop,
Інструмент Масштаб та палітра Навігатор у Photoshop

4. Практичні завдання (озвучені у відеоуроках)

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

6. Виконати тестові завдання

Растровий графічний редактор

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

Растрові графічні редактори дозволяють користувачеві створювати і редагувати зображення на екрані комп'ютера (серед звичних інструментів — декілька типів ліній, стирання, копіювання об'єктів, додавання тексту, заповнення кольору фону…), а також зберігати їх в різних растрових форматах. Формати збереження зображень поділяються на такі, що дозволяють зберігати растрову графіку з незначним зниженням якості за рахунок використання алгоритмів стиснення з втратами (JPEG, PNG, GIF і TIFF), та такі, що також підтримують стиснення (RLE), але загалом є «попіксельним» описом зображення (BMP).

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

Найвідоміші растрові редактори:

Adobe Photoshop — найпопулярніший комерційний редактор
Adobe Fireworks
Corel Photo-Paint
Corel Painter
GIMP — найпопулярніший вільний редактор
Microsoft Paint
Microsoft Photo Editor

Растровий графічний редактор Photoshop

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

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

Растрове зображення зберігається за допомогою крапок різного кольору (пикселей), які утворять рядки й стовпці. Будь-який пиксель має фіксоване положення й колір. Зберігання кожного пикселя вимагає деякої кількості біт інформації, що залежить від кількості квітів у зображенні.

Якість растрового зображення визначається розміром зображення (числом пикселей по горизонталі й вертикалі) і кількості квітів, які можуть приймати пиксели.

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

Інтерфейс Photoshop CS3

Робоче середовище - комфортне: у головному вікні програми ліворуч розташована панель інструментів, праворуч – панель палітр, угорі – меню, а під ним розміщено панель параметрів, в центрі – робочий простір

Вікно зображення

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

У заголовку вікна зображення наведено:

Ім'я файлу
Масштаб зображення (у відсотках)
Назву колірної моделі
Число 8 або 16, що позначає глибину кольору

Заголовок вікна зображення

Рядок стану

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

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

Меню програми

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

Палітри

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

Щоб відобразити на екрані чи приховати палітру, слід клацнути у меню Вікно її назву чи відповідне вікно на панелі палітр.

За допомогою клавіші Tab можна приховати або вивести на екран всі палітри разом із панеллю інструментів і панеллю параметрів

Якщо потрібно приховати палітри, але залишити на екрані панель інструментів, слід натиснути клавіші Shift+Tab.

Палітри також можна згорнути як звичайне вікно.

Панель інструментів

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

Панель параметрів

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

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

Приклад панелі параметрів за вибраного інструмента Пензель

Основні дії у середовищі Photoshop

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

Відкриття файлу

Файл, Відкрити
У діалоговому вікні Відкрити, перейти у потрібну папку, клацнути мишею значок файлу, який необхідно відкрити
Кнопка Відкрити

Створення і збереження файлу

Програма Photoshop дає змогу створити новий файл із заданими параметрами.

Файл, Новий – буде відкрито діалогове вікно Новий.
У поле Ім'я ввести ім'я файлу, вибрати одиниці вимірювання та ввести у відповідні поля бажані значення висоти, ширини й роздільної здатності.
У списку Колірний режим вибрати колірну модель.
У списку Уміст тла вибрати колір тла.
Після цього тиснемо кнопку Так

Щоб зберегти файл, користуємося командою

Файл, Зберегти або командою Файл, Зберегти як
за потреби змінити ім'я чи формат.

Перегляд зображення. Масштабування

Для збільшення і зменшення масштабу відображення графічного файлу на екрані використовується інструмент Масштаб.

Вибрати його можна :

Кнопкою "Збільшувальне скло" на панелі інструментів
Клавішою Z

Коли підвести вказівник миші до зображення, він набуде вигляду лупи зі знаком ”+” усередині. Клацнути зображення мишею і його масштаб збільшиться (і так щоразу). Якщо під час клацання утримувати натиснутою клавішу Alt, інструмент Масштаб працюватиме в режимі зменшення, а вказівник набуде вигляду лупи зі знаком ”-”. Щоб відновити масштаб до 100%, потрібно двічі клацнути кнопку Масштаб.

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

Інструмент Рука

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

Смуги прокручування

У вікні програми праворуч і знизу містяться смуги прокручування.
Захопити повзунок і переміщати його в той чи інший бік

Клавіатура

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

Палітра Навігатор

Своєрідна інтерактивна мапа зображення, де відображений у вікні фрагмент позначено червоною рамкою.

Палітра Навігатор надає користувачам цілу низку можливостей:

Поле перегляду
Повзунок масштабування
Кнопки Зменшення і Збільшення
Поле масштабу

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

Режими відображення

Скасування дій

Стандартна дія Скасувати – Редагування, Відмінити дію …
У команді меню Редагувати : Крок вперед, Крок назад

Палітра Історія

У палітрі Історія протоколюються дії та відповідний їм стан зображення зберігаються або в оперативній, або у віртуальній пам'яті комп'ютера. За замовчуванням зберігається 20 станів.

Щоб збільшити або зменшити кількість станів, що зберігаються, слід виконати команду:

Редагування, Параметри, у групі параметрів Швидкодія, в полі Історія і кеш, ввести число від 1 до 1000

Відеоурок 1. Створення і збереження зображень у Photoshop

Відеоурок 2. Інтерфейс програми Photoshop

Відеоурок 3. Інструмент Масштаб та палітра Навігатор у Photoshop

14.01.2021 Урок № 22 Веб-дизайн

Веб-дизайн (від англ. Web design) – галузь веб-розробки і різновид дизайну, у завдання якої входить проектування веб-інтерфейсів для користувачів, сайтів, веб-додатків.

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

Веб-дизайн – порівняно молодий напрямок, і професійна освіта в сфері веб-дизайну в Україні лише на стадії розвитку. У зв’язку зі збільшенням попиту на Інтернет, росте й попит на дизайн сайтів, збільшується кількість фахівців з веб-дизайну, про те за відсутності професійної підготовки веб-дизайнерів цей показник переважно кількісний а ніж якісний. Сьогодні послуги веб-дизайну надають як спеціальні компанії, так і приватні особи (фрілансери, веб-дизайнери або веб-майстри).

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

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

Використання програмних технологій в Web. Визначення Web-сервера

Історія заснування Веб

Найперший сайт info.cern.ch з'явився в 1990 році. Його автор, Тім Бернерс-Лі, опублікував на ньому опис нової технології World Wide Web, яка базується на протоколі передачі даних HTTP, системі адресації URL і мові гіпертекстової розмітки HTML. Також, на сайті було описано принципи установки і роботи серверів та браузерів. Сайт став і першим в світі Інтернет-каталогом, бо згодом Тім Бернерс-Лі розмістив на ньому список посилань на інші сайти.

Всі необхідні інструменти для роботи першого сайту, Бернерс-Лі підготував заздалегідь — наприкінці 1990 року з'явилися перший гіпертекстовий браузер WorldWideWeb з можливостями веб-редактора, перший сервер на базі NeXTcube і перші веб-сторінки. Тім Бернерс-Лі є «батьком» базових технологій Веб — HTTP, URI/URL і HTML.

Засновник Вебу вважав, що гіпертекст може бути основою для мереж обміну даними, і йому вдалося втілити свою ідею в життя. Ще у 1980 році Тім Бернерс-Лі створив гіпертекстове програмне забезпечення Enquire, яке використовувало для зберігання даних випадкові асоціації. Згодом, працюючи в Європейському центрі ядерних досліджень в Женеві (CERN), він запропонував колегам опублікувати гіпертекстові документи, що пов'язані між собою гіперпосиланнями. Бернерс-Лі продемонстрував можливість гіпертекстового доступу до внутрішніх документів, а також до новинних ресурсів Інтернету. В травні 1991 року в CERN було затверджено стандарт WWW.

На даний час Тім Бернерс-Лі очолює заснований ним Консорціум Всесвітньої павутини (World Wide Web Consortium), який займається розробкою і впровадженням стандартів Інтернету.

Загальні відомості про веб-сайт

Веб-сайт (web — «павутина», «мережа» і site — «місце», website - «місце в мережі») або просто сайт — це сукупність електронних документів (файлів) приватної особи або організації, що об'єднана під однією адресою (доменною або IP-адресою). Окрім веб-сайтів в мережі Інтернет існують WAP-сайти для мобільних телефонів чи комп’ютерів. Сукупність сайтів складає Всесвітню павутину.

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

В більшості випадків в Інтернеті один сайт має одну доменну адресу. Саме за доменними адресами сайти ідентифікуються в глобальній мережі. Можливими є інші варіанти: один сайт на кількох доменах або кілька сайтів під одним доменом.

Зазвичай, великі сайти (веб-портали) використовують кілька доменів, щоб логічно відокремити різні види послуг (mail.google.com, news.google.com, maps.google.com). Іноді, окремі домени виділяють для іншої мовної версії. Наприклад, google.com.ua і google.ru логічно є сайтом Google з різними мовами інтерфейсу, але технічно це різні сайти.

Об'єднання кількох сайтів під одним доменом є характерним для безкоштовних хостингів. Тут, зазвичай, використовується домен третього рівня (mysite.example.com), але іноді для ідентифікації сайтів в адресі після вказування доменної адреси хосту зазначено тильда і ім'я сайту (example.com/~my-site-name/).

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

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

Домашні сторінки

У 90-х роках минулого століття виник новий вид творчості — створення домашніх сторінок. Спочатку цей термін (від англ. home page) означав дім людини в Інтернеті, місце, де вона зберігає нформацію про себе. Особисті сторінки мають тисячі людей. Одні з них містять лише коротку інформацію про власника, а інші - корисну інформацію з певної тематики, графічний матеріал,фотографії тощо.

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

Структура веб-сайтів

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

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

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

Пункти меню мають бути чітко відділені один від одного.

Основи Інтернету

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

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

Створення та підтримка веб-ресурсів

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

Класифікація веб-сайтів

За доступністю сервісів:

Відкриті сайти. Всі сервіси сайту цілком є доступними для всіх відвідувачів і користувачів.

Напіввідкриті сайти. Для доступу до ресурсів чи сервісів сайту необхідно зареєструватися, зазвичай, безкоштовно.

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

За природою вмісту:

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

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

За фізичним розташуванням:

Зовнішні сайти мережі Інтернет.

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

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

Інформаційні ресурси:

Тематичний сайт — сайт, що надає специфічну інформацію з певної теми.

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

Інтернет представництва власників бізнесу (торгівля чи послуги, які не обов’язково безпосередньо пов'язані з Інтернетом):

Сайт-візитка — містить загальні дані про власника сайту (організацію або приватну особу): сфера інтересів, біографія, фотогалерея, контактні дані. Тобто, це є докладна візитна картка.

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

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

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

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

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

Веб-сервіс — це послуга, що створена для виконання певних завдань в рамках служби Веб:

Дошка оголошень.
Каталог сайтів.
Пошукові системи.
Поштовий сервіс.
Веб-форуми.
Блоговий сервіс.
Сервіс зберігання та обміну файлів.
Сервіс створення та редагування документів — наприклад, Google Docs.
Зберігання фотографій — наприклад, Picnik, ImageShack, Panoramio, Photobucket.
Зберігання відео — наприклад, YouTube, Dailymotion.
Соціальні Медіа — наприклад, Buzz.
Соціальні мережі — наприклад, Vkontakte.
Спеціалізовані соціальні мережі — наприклад, Odnoklasniki.

Веб-сервер (англ. WebServer) — це сервер (Сервер як комп'ютер — це комп'ютер у локальній чи глобальній мережі, який надає користувачам свої обчислювальні і дискові ресурси, а так само доступ до встановлених сервісів; найчастіше працює цілодобово, чи у час роботи групи його користувачів.), що приймає HTTP (HTTP — протокол передачі даних, що використовується в комп'ютерних мережах. Назва скорочена від Hyper Text Transfer Protocol, протокол передачі гіпертекстових документів)- запити від клієнтів, зазвичай веб-браузерів( браузер — переглядач), також браузер, оглядач, (веб-браузер — програмне забезпечення для комп'ютера або іншого електронного пристрою, як правило, під'єднаного до Інтернету, що дає можливість користувачеві взаємодіяти з текстом, малюнками або іншою інформацією на гіпертекстовій веб-сторінці. Тексти та малюнки можуть містити посилання на інші веб-сторінки, розташовані на тому ж веб-сайті або на інших веб-сайтах.), видає їм HTTP-відповіді, зазвичай разом з HTML(HTML (англ. HyperTextMarkupLanguage — Мова розмітки гіпертексту) — стандартна мова розмітки веб-сторінок в Інтернеті. Більшість веб-сторінокстворюються за допомогою мови HTML (або XHTML). Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді. (Мо ва розмі тки — штучна мова, що використовує набір анотацій до тексту, що надає інструкції стосовно структури тексту чи його відображення.))-сторінкою, зображенням, файлом, медіа-потоком або іншими даними. Веб-сервер — основаВсесвітньої павутини.

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

Клієнти дістаються веб-сервера за URL-адресою потрібної їм веб-сторінки або іншого ресурсу.

Додатковими функціями багатьох веб-серверів є:

Ведення журналу серверу про звернення користувачів до ресурсів
Автентифікація користувачів(Автентифікáція (з грец. αυθεντικός ; реальний або істинний) — процедура встановлення належності користувачеві інформації в системі пред'явленого ним ідентифікатора.)
Підтримка сторінок, що динамічно генеруються

Питання для самоконтролю:

Автор першого у світі сайту.
Поясніть термін веб-дизайн.
Що таке веб-сайт?
Як інакше називають великі сайти?
Що таке доменна адреса?
Яке призначення хостингу?
Веб-сервер це…?
Яку розуміти термін оффлайнова версія сайту
Що таке дзеркало сайту?
Що таке home page?
Як розуміти термін домашня сторінка сайту?
Яку функції меню сайту?
Як можна класифікувати сайти?
Які сайти називають відкритими?
У чому відмінність між динамічними і статичними сайтами?
Що таке локальний сайт?
Веб-браузер це …?
Що таке промо-сайт?
Що собою являє сайт візитка?
Веб-сервіс – це…?

14.01.2021 Урок № 23 Характеристики зображення та засобів його відтворення

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

Урок № 23.pptx

16.11.2020 Урок № 10. Тема "Мова розмічання гіпертекстового документа"

§4.2-1. Підручник-для-10-11-класу-Ривкінд-2018.pdf

Наразі більшість веб-документів створюють за допомогою мови розмітки гіпертексту HTML (англійською Hyper Text Markup Language — мова розмітки гіпертексту).

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

1989 року Тім Бернерс-Лі запропонував упровадити гіпертекстову систему документів. Наприкінці 1991 року він опублікував у Інтернеті перший загальнодоступний опис мови розмітки HTML — «HTML теги». Він же створив і першу програму для перегляду гіпертекстових документів — браузер. Бернерс-Лі розглядав HTML як похідну мову від SGML, і в середині 1993 року Спеціальна Комісія Інтернет-розробок (IETF) офіційно визначила її такою, опублікувавши першу специфікацію HTML.

Станда́ртна узага́льнена мо́ва розмі́тки (англ. Standard Generalized Markup Language, SGML) — метамова, за допомогою якої можна визначати мову розмітки для документів. SGML — нащадок розробленої 1960 року в IBM мови GML (Generalized Markup Language^[en]), яку не варто плутати з Geography Markup Language, яку розробляв Open GIS Consortium .

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

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

Розширення (тип) гіпертекстового документа, написаного мовою HTML, — htm або html.

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

Дескрипторами називають ті теги, які вказують на спосіб відтворення інформації програмою-браузером.

Теги — вказівки HTML — записують у «кутових» дужках, утворених символами «<» і «>» — «менше» й «більше».

Контейнери — це парні теги.

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

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

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

Для створення HTML-файлу можна використати найпримітивніший текстовий редактор. Наприклад, Блокнот (NotePad) для ОС Windows. Інколи, у середовищі цих редакторів здійснено виділення кольором дескрипторів. Наприклад, у середовищі Kate для ОС Linux Mint KDE. Хоча привабливішим видається використання спеціалізованих редакторів з поданням сторінки різними способами. Наприклад, редактора Kompozer чи Sublime Text.

Структура HTML-документа (згідно зі стандартом HTML 4.01)

Оголошення типу документа (англійською Document type declaration, Doctype, DTD) — на початку документа тегом <!DOCTYPE>.
Заголовок документа, розташований у межах контейнера <head>, — містить опис загальних технічних відомостей або додаткову інформацію про документ, яку не відтворюють безпосередньо у браузері.
Тіло документа, розташоване у межах контейнера <body> або <frameset>, — містить основну інформацію про опис документа.

Приклад 1.

<!doctype html>

<html>

<head>

<title>Заголовок документа</title>

</head>

<body>

Змістовна частина документа

</body>

</html>

Приклад 2. Перейти на сторінку, використати вказівку контексного меню Переглянути джерело сторінки (назву подано для Google Chrome), переглянути початок коду даної сторінки. У ньому описано таке:

Оголошення типу документа — <!doctype html>.
Заголовок документа — <head><title>Приклад 2</title></head>.
Тіло документа — <body>…</body>.

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

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">

Використання версії HTML 4.01 навіть з небажаними для цієї версії елементами й атрибутами, а також фреймами задають таким чином:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Frameset//EN">

Найсучасніше визначення, що вказує на використання стандарту HTML5, таке:

<!doctype html>

Тег html вказує браузеру, що він опрацьовує HTML-код. Все, що розташовано між парними тегами <html> і </html> є HTML-документом. У першому деcкрипторі:

атрибутом version можна задати версію HTML:
<html version="4.01"> ;
атрибутом lang можна задати основну мову документа, скажімо українську:
<html lang="uk-ua"> .

Назва документа — текст між тегами <title> і </title>.

До тексту назви не застосовують форматування. Назва має бути короткою, інформативною і адекватно відображати зміст документа.

У заголовку документа можуть міститися деякі важливі дані, які використовуються браузерами, але в більшості випадків не відображаються, — метадані. Для цього використовується елемент meta, який задають одинарним тегом <meta> з такими атрибутами:

name — назва змінної;
content — значення змінної;
charset — кодування документа, наприклад utf-8;
lang — код мови, що визначає мову значень змінної;
http-equiv — вказує назву додаткового параметра.

Атрибут lang потрібно використовувати для створення списку ключових слів певною мовою, на які відгукнеться пошукова система при запиті. Наприклад, англійською:

Значення атрибута http-equiv та опис дії атрибута content (після тире):

Expires — задає дату і час оновлення документа;
Content-Language — аналог атрибуту lang тега html;
Content-Type — вказує тип документа та кодування символів;
Refresh — задає інтервал у секундах між оновленнями вмісту документа.

Приклади опису властивостей тега body:

bgcolor="white" — задати білий колір тла;
text="black" — задати чорний колір тексту;
background="picture.jpg" — задати зображення для тла;
bgproperties="fixed" — зображення тла не прокручувати;
style="text-align:justify;" — вирівнювати текст за шириною.

Крім цих атрибутів тега body використовують і такі:

link — колір невідвіданих гіперпосилань;
vlink — колір відвіданих гіперпосилань;
alink — колір гіперпосилань, обраних користувачем;
contenteditable — дозвіл (значення true) або заборона (значення false для елемента body або inherit для усіх інших елементів) користувачу редагувати HTML-документ у браузері.

Для введення в HTML-документ зарезервованих символів мови HTML (наприклад, > або &) або символів, які неможливо ввести з клавіатури, передбачено механізм посилань на символи.

Посилання на символи:

&#D; — задає символ, код якого має значення D у десятковій системі числення;
&#xH; — задає символ, код якого має значення H у шістнадцятковій системі числення;
&назва_символа; — дозволяє використовувати іменоване посилання на символ.

Теги форматування символів (дескриптори стилів) завжди є парними:

<b>…</b> — жирне написання;
<i>…</i> — курсив;
<u>…</u> — підкреслення;
<strike>…</strike> — ~~перекреслення~~;
<tt>…</tt> — стала ширина літер;
<sub>…</sub> — _нижній індекс;
<sup>…</sup> — ^{верхній} індекс;
<big>…</big> — збільшити шрифт;
<small>…</small> — зменшити шрифт;
<em>…</em> — логічний наголос — діє майже завжди як <i>;
<cite>…</cite> — цитування — діє майже завжди як <i>;
<code>…</code> — текст коду — діє майже завжди як <tt>;
<samp>…</samp> — результат виконання програми — діє майже завжди як <tt>;
<strong>…</strong> — виділення — діє майже завжди як <b>;
<dfn>…</dfn> — текст означення (залежно від браузера);
<var>…</var> — назва змінної або параметра — діє майже завжди як <i>;
<kbd>…</kbd> — назва клавіші — діє майже завжди як <tt>;
<xmp>…</xmp> —текст-зразок— діє майже завжди як <tt>.

У поданому вище переліку перші 7 контейнерів (до порожнього рядка) називають фізичними, а наступні — логічними.

Примітка. Застосовують вкладення тегів аналогічно до використання дужок різного вигляду. Наприклад, жирний курсив задають таким чином:

<b><i>текст</i></b>.

Форматування тексту мовою HTML виконують з використанням спеціальних тегів:

<h1>…</h1>, <h2>…</h2>, <h3>…</h3>, <h4>…</h4>, <h5>…</h5>, <h6>…</h6> — відображення заголовків відповідно 1, 2, 3, 4, 5 і 6 рівнів — перелічено у порядку зменшення розміру шрифту. Як усталено, заголовок буде вирівняно за лівим краєм вікна;
<p>…</p> — створення нового абзацу без відступу у першому рядку, між абзацами буде порожній рядок;
<pre>…</pre> — відображення тексту у повній відповідності до форматування, здійсненого за допомогою текстового редактора (пропуски, невідтворювані символи кінця рядка);
<nobr>…</nobr> — заборона перенесення слів, яку можна подавити тегом <wbr>;
<center>…</center> — центрування;
<br> — обривання рядка без пропуску рядка;
<hr> — проведення горизонтальної лінії.

Перші два види тегів (з перелічених вище) мають атрибут align з такими можливими значеннями:

center — центрування;
justify — вирівнювання за шириною;
left — вирівнювання за лівим краєм;
right — вирівнювання за правим краєм

і атрибут title — текст підказки.

Крім цього тег <p>…</p> має атрибут tabindex, який задає порядковий номер абзаца при переміщенні HTML-документом у вікні браузера за допомогою клавіші Tab.

Приклад 3. Перейти на сторінку, використати вказівку контексного меню Переглянути джерело сторінки (назву подано для Google Chrome), переглянути код сторінки і проаналізувати його дію.

Властивості шрифту: гарнітуру, розмір і колір задають відповідно як значення атрибутів face, size та color контейнера font.

Якщо першим тегом у тілі сторінки є такий:

і якщо на комп'ютері встановлено шрифт ubuntu, то буде застосовано саме його для відображення тексту. Інакше браузер застосує шрифт calibri, а при відсутності останнього — деякий стандартний шрифт. Зазвичай із зарубками. Наприклад, Times New Roman для ОС Windows.

Розміри символів шрифту можуть бути від 1 до 7 (перелічено від найменшого до найбільшого). Розмір 3 вважають стандартним, він приблизно відповідає 10 пунктам. Значення "+2" атрибута size означає, що розмір шрифту має бути на дві одиниці більший ніж стандартний, тобто п'ятий.

Колір тексту можна задати його назвою англійською мовою:

aqua — бірюзовий;
black — чорний;
blue — світло-синій;
fuchsia — бузковий;
gray — сірий;
green — зелений;
lime — салатовий;
maroon — бордовий;
navy — синій;
olive — оливковий;
purple — фіолетовий;
red — червоний;
silver — сріблястий;
teal — сіро-зелений;
white — білий;
yellow — жовтий.

Колір можна задати кодами кольорової моделі RGB, як це роблять при роботі з графічним редактором. Наприклад, #ff7800.

Приклад 4. Перейти на сторінку, використати вказівку контексного меню Переглянути джерело сторінки (назву подано для Google Chrome), переглянути код у даному місці, де подано приклади використання різних кольорів.

Контактну інформацію записують у контейнері <address>…</address>.

Коментар записують у контейнері <comment>…</comment> або використовують тег . Текст всередині цих тегів на екран браузера не буде показано.

Перелік тегів HTML5 можна знайти на порталі mozilla.org.

5. Закріплення вивченого матеріалу

Для чого призначено мову HTML?
Опишіть структуру HTML-документа.
Що таке тег? Що таке контейнер?
Які властивості має тіло документа? Як їх задають?
Якими тегами форматують символи?
Якими тегами вирівнюють текст?
Як задають властивості шрифту: гарнітуру, розмір і колір?
Як коментувати HTML-код?

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

Виставлення оцінок.

7. Домашнє завдання

Вивчити матеріал уроку. Створити HTML-сторінку за матеріалом сторінки з підручника (з довільної дисципліни), на якій максимально повно використано форматування символів і абзаців.

9.11.2020 Урок №9 Створення та адміністрування сайту. Система керування вмістом для веб-ресурсів

Створення та адміністрування сайта. Системи керування вмістом для веб-ресурсів

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

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

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

• елементи навігації — засоби для переходу до інших веб-сторінок;

• дизайн — елементи структурування контенту та його форматування, оформлення сторінки.

1. Створення та адміністрування веб-сайта

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

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

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

• мету, з якою створюється сайт;

• тематику сайту, відмінності сайту від інших сайтів такої самої тематики;

• аудиторію потенційних відвідувачів сайту: вік, стать, коло інтересів тощо;

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

• перспективи розвитку сайту.

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

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

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

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

• верхнього блоку — заголовка, у якому містяться логотип і назва сайту;

• блоку навігації (меню) для переходу до основних розділів сайту;

• інформаційного блоку з основним матеріалом, що займає центральну частину сторінки;

• нижнього блоку — підвалу, для розміщення контактних даних, повідомлення про авторські права тощо.

Приклад структури веб-сторінок сайту наведено на малюнку.

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

Виділяють три типи структур веб-сайтів — лінійну, ієрархічну та довільну.

Подорожуючи сайтом із лінійною структурою, з головної сторінки ви перейдете на другу сторінку, з неї — на третю тощо.

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

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

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

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

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

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

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

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

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

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

2. Системи керування вмістом для веб-ресурсів

Система керування вмістом (СКВ; англ. Content Management System, CMS) — програмне забезпечення для організації веб-сайтів чи інших інформаційних ресурсів в Інтернеті чи окремих комп'ютерних мережах.

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

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

Багато сучасних СКВ поширюються як безкоштовні і легкі у встановленні (інсталяції) програми, які розробляються під ліцензією GNU/GPL групами ентузіастів.

Системи управління веб-сайтом часто розраховані на роботу у певному програмному середовищі. Наприклад, система MediaWiki, під управлінням якої працює Вікіпедія, написана мовою програмування PHP і зберігає вміст і налаштування у базі даних типу MySQL або PostgreSQL; тому для її роботи потрібно, щоб на сервері, де вона розміщена, були встановлені веб-сервер (Apache, IIS чи інший), підтримка PHP та системи керування базами даних MySQL або PostgreSQL, а також, в разі необхідності, додаткові програми для обробки зображень чи математичних формул. Такі вимоги є досить типовими для відкритих СКВ.

Різновиди СКВ

Web content management systems для управління веб-сайтами (наприклад, енциклопедіями, подібними до Вікіпедії, онлайн-виданнями, блогами, форумами, корпоративними чи персональними веб-сторінками та ін.)

Транзакційні СКВ для забезпечення транзакцій у електронній комерції.

Інтегровані СКВ для роботи з документацією на підприємствах.

Електронні бібліотеки (Digital Asset Management) для забезпечення циклу життя файлів електронних медіа (відео, графічн., презентації тощо).

Системи для забезпечення циклу життя документації (інструкції, довідники, описи).

Освітні СКВ — системи для організації Інтернет курсів та відповідного циклу життя документації.

Наприклад:

1) Системи, що мають українську локалізацію:

- Moodle — використовується більш ніж 20 ВНЗ України, має українську локалізацію;

- MaxSite CMS — досить гнучка в налаштуванні CMS на CodeIgniter, має українську локалізацію;

- Drupal — широко поширена в світі CMS, має повну українську локалізацію ядра системи всіх актуальних версій (6.x, 7.x, 8.x), а також великої кількості додаткових модулів;

- Joomla — повна українська локалізація Joomla! 1.5.x, Joomla! 1.0.x — переклад фронтальної частини.

2) Переклади розширень.

- ATutor — використовується у Тернопільському національному технічному університеті імені Івана Пулюя;

- Ilias — використовується у Київському національному університеті імені Тараса Шевченка.

3) Системи, що не мають української локалізації але одночасно не мають проблем із відображенням символів кирилиці (ті, що працюють з шрифтами юнікод UTF-8):

- OLAT;

- Interact;

- Docebo;

- Wordcircle;

- e107;

Платформенні СКВ (Platform Content Management Systems) підтримують автоматизацію роботу з комп'ютерними файлами, папками, програмами у визначеному програмному середовищі.

Корпоративні СКВ (Enterprise content management systems) з різноплановим пристосуванням для потреб підприємницької діяльності. Підтримують цикл життя внутрішньої і зовнішньої документації.

Приклади корпоративних СКВ:

- RedDot;

- Microsoft CMS;

- Rhythmyx;

- Documentum;

- Open pages;

- Chrystal Software;

- Viagnette;

- CyberTeams;

- Blue Martini;

- Tikiwiki CMS Groupware

Функції прикладних програм керування контентом

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

2) Збір та адаптація контенту з існуючих джерел.

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

4) Перегляд контенту. Необхідний для всіх видів опублікованого контенту.

5) Затвердження. Формальне затвердження опублікованого контенту — важлива складова правової відповідальності за нього.

6) Перетворення контенту. Тексти, графіка, звуки та інші форми контенту мають бути перетворені до формату, що є найзручнішим або використовується в даній CMS — системі.

7) Зберігання контенту. Контент, як правило, зберігається в файлах або в БД. У випадку складніших застосувань контент підлягає управлінню версіями програмного забезпечення (SMC).

8) Тестування і верифікація контенту. Може стосуватись різних аспектів, таких як:

- Розірвані зв'язки;

- Сторінки, які повільно відкриваються;

- Програмні помилки в аплетах і скриптах;

- Помилки в комунікації клієнт-сервер.

9) Перевірка готовності контенту — це тип тестування, який включає верифікацію (перевірку) завершеності та цілісності великого об'єму контенту (наприклад, інформацію про різні аспекти нової послуги).

10) Публікація. Враховує всі фізичні аспекти публікації контенту, включаючи дублювання контенту на різних серверах.

11) Підтримка, актуалізація та контроль за змінами. Включає моніторинг опублікованого контенту та реагування на сигнали та необхідність змін.

12) Recall та архівування. Recall може відбуватися з багатьох причин — наприклад, втрата актуальності контенту, втрата законних прав на контент, низька частота відвідуваності, поява новішого контенту тощо. Будь-який Recalled контент є архівований.

13) Звіти та аналіз. Включає різні форми звітування та аналізу, з метою кращого обслуговування користувачів, покращення вигляду порталу.

2.11.2020 Урок № 8 Практична робота

Створення і опрацювання таблиць БД

7 урок. Інструкційно-технологічна карта.docx

28.10.2020

Урок 7 Ергономіка у веб-дизайні. Просування веб-сайтів.

Виконати практичну роботу за посиланням і зробити короткий конспект за посиланням (31 урок) sites.google.com/site/lutskschool1yasenchuk/materiali-do-urokiv/10-klas/urok-31-1
Виконану роботу і відповіді надсилайте на електронну пошту

26.10.2020 Урок №6 Стварення звіту

Page updated

Google Sites

Report abuse