11 клас. Інформатика. Дистанційне навчання: березня 2021

Дистанційна освіта з інформатики в період квітень 2021 року

29.03.2021 - 04.04.2021

Конспект уроку для учнів

Тема: Шрифтове оформлення текстових блоків веб-сайту. Заголовки сайтів. Фрейми та таблиці на веб-сторінках. Динамічні елементи на веб-сторінці.

Теоретична частина

Створенння сайту відбувається з дотриманням певних етапів:

Проектування

Збирається детальна інформація,

ставляться цілі проекту ,

планується бюджет.

Результатом даного етапу є технічне завдання.

Це - текстовий документ, в якому детально описується проект.

Розробка дизайну

Ідеї, закладені в технічному завданні, втілюються у вигляді ескізів сторінок. Результатом є дизайн-макет сайту:

графічний файл, виконаний в одній з графічних програм.

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

Макетування сторінок

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

Програмування сервісів

Окрім статичної текстової та графічної інформації сайт може містити різні інтерактивні сервіси:

форми для реєстрації клієнтів, гостьові книги.

Публікація сайту, наповнення інформацією

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

Супровід та просування проекту

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

Просторовий дизайн веб-сторінок

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

При дизайні веб-сторінок потрібно враховувати їхні розміри. Більшість веб-сторінок буде відображатись на стандартних моніторах з розширенням 800х600 пікселів. Таким чином при відображенні сайту на екрані можна розраховувати на 760х410 пікселів (з відкиданням на екрані місця для меню браузера та панелей операційної системи).

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

Більшість домашніх сторінок сайтів в Інтернеті мають схожу структуру, а саме: нагорі знаходиться горизонтальна панель, переважно кольорова. Зазвичай вона використовується для розміщення логотипу, навігаційної панелі та панелі пошуку. Ліва колонка має кольорове тло. Зазвичай містить навігаційне меню. Центральна частина має біле тло. Переважно має одну широку колонку або дві менші, містить фотографії, ілюстрації, перелік новин, а також гіперпосилання на окремі розділи сайту. Права колонка має біле тло і використовується для розміщення інформаційних блоків на кольоровому тлі. Кількість та назви сторінок сайту будуть залежати від тематики, обраної інформаційної архітектури, кількості матеріалів тощо.

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

Контакти.

Важливо надати користувачеві можливість зв’язатись з автором сайта чи з компанією, яка на ньому представлена. Передусім це електронна та поштова адреси, інформація про те, як дістатись. Запитання: Який поширений тип сторінки?

Практична частина

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

Реалізація.

<!DOCTYPE html>

<head>

<title>Вчителі міста Вінниці</title>

<body>

<style>

.navbar{

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

background-color: #1565c0;

color: #000;

border: none;

}

.navbar a{

color: #fff;

border-bottom-width: 2px;

border-bottom-style: solid;

border-bottom-color: rgba(0,0,0,0);

}

.navbar-nav a:hover{

background-color: #fff;

color: #000;

border-bottom-color: #7ec0ff;

}

.icon-bar{

background-image: url("uploads/lines.svg");

background-color: white;

}

</style>

<nav id="w0" class="navbar navbar-fixed-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse"><span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span></button><a class="navbar-brand" href="/">Вчителі міста Вінниці</a></div><div id="w0-collapse" class="collapse navbar-collapse"><ul id="w1" class="navbar-nav navbar-left nav">

</div> <button type="submit" class="btn"><i class= "glyphicon glyphicon-search"></i></button></div>

</form></ul><ul id="w2" class="navbar-nav navbar-right nav"><li><a href="https://edu.vn.ua/" target="_blank">Освітній портал</a></li>

<li class="active"><a href="/documentation">Документація</a></li>

<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Адміністрування <span class="caret"></span></a><ul id="w3" class="dropdown-menu"><li><a href="/users/create" tabindex="-1">Додати користувача</a></li>

<li><a href="/reports" tabindex="-1">Звіти</a></li>

<li><a href="/lists" tabindex="-1">Довідники</a></li></ul></li>

<li><a href="/contact">Зворотній зв'язок</a></li>

<li><a href="/profile">Профіль</a></li>

<li><a href="/logout">Вийти</a></li></ul></div></div></nav>

<ul class="breadcrumb"><li><a href="/">Головна</a></li>

<li class="active">Документація</li>

</ul> <style>

a:hover{

text-decoration: none;

}

.mini-title{

margin-bottom: 5px;

margin-top: 20px;

font-weight: bold;

font-size: 12pt;

}

.big-title{

font-weight: bold;

font-size: 26pt;

}

td i{

font-size: 22pt;

text-align: center;

}

td:nth-child(3),th:nth-child(3){background-color: rgba(0, 255, 19, 0.35)}</style>

<div class="text-center"><b style="font-size: 24pt;">Швидкий доступ</b></div>

<li><a href="#passwordreset">Відновлення паролю</a></li>

<li><a href="#contact">Зворотній зв'язок</a></li>

<li><a href="#fastsearch">Швидкий пошук по користувачам</a></li>

<li><b><a href="#profile">Профіль</a></b>

<li><a href="#profileedit">Редагування даних</a></li>

<li><a href="#passwordchange">Зміна паролю</a></li>

<li><a href="#photochange">Зміна фото</a></li>

<li><a href="#profiledelete">Незворотнє видалення профіля</a></li>

<li><a href="#profilefiles">Файли користувача</a>

<li><a href="#filesadd">Додавання</a></li>

<li><a href="#filesdelete">Видалення</a></li>

<li><a href="#fileaccess">Зміна прав доступу</a></li>

<li><a href="#fileslink">Отримання посилання для завантаження</a></li>

</ul>

</li>

</ul>

</li>

<li><b><a href="#administation">Адміністрування</a></b>

<li><a href="#adduser">Додати користувача</a></li>

<li><a href="#reports">Звіти</a>

<li><a href="#reportexport">Експорт в Excel</a></li>

<li><a href="#filter">Фільтрування</a></li>

</ul>

</li>

<li><a href="#lists">Довідники (назви, типи, категорії і т.п.)</a></li>

</ul>

</li>

<li><a href="#roles">Права груп користувачів</a></li>

</ul>

</div>

<div id="passwordreset" class="big-title">Відновлення паролю</div>

<div>

Функція доступна на сторінці входу, дозволяє змінити пароль використовую пошту, до якої прикріплено аккаунт.

<br>

Послідовність дій: <br>

1. Зайти на сторінку <a href="/login">Вхід</a><br>

2. Натиснути кнопку <a href="/site/forgotpass">Забули пароль?</a><br>

3. Ввести свою електронну пошту та натистути кнопку "Надіслати" <br>

4. Зайти на пошту та перейти за посиланням <br>

5. Ввести новий пароль

</div>

<div id="contact" class="big-title">Зворотній зв'язок</div>

<div>

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

<br>

Потрібно заповнити всі необхідні поля та натиснути кнопку "Відправити", після чого очікувати відповідь на пошту, прікріплену до вашого профіля.

</div>

<div id="fastsearch" class="big-title">Швидкий пошук по користувачам</div>

<div>

Швидкий пошук необдіхідний для швидкого переходу на профіль шуканого користувача. Знаходиться на головній панелі вверху сторінки.

<br>

Для пошуку введіть частину або повну інформацію про користувача на вибір (логін, ім'я, прізвище, по-батькові, пошта) та натисніть на кнопку з картинкою лупи.

<br>

Після чого пошук видасть вам всіх <b>доступних вам для перегляду</b> користувачів

</div>

<div id="profile" class="big-title">Профіль</div>

<div>

Основна інформація користувача знаходиться на цій сторінці, також на ній знаходяться кнопки <a href="#profilefiles">Файли користувача</a> та <a href="#profileedit">Редагувати</a>

</div>

Редагування даних

</div><div>

Змінити дані користувача можна нажавши на кнопку <a href="/users/update">Редагувати</a>, яка знаходиться в <a href="/users/view">Профілі</a>, для збереження введених даних необхідно натиснути кнопку "Зберегти", яка знаходиться в нижньому лівому куті екрану

</div>

Зміна паролю

</div><div>

Змінити пароль користувача можна нажавши на кнопку <a href="/users/changepas">Змінити пароль</a>, яка знаходиться в <a href="/users/update">Редагуванні профілю</a> одразу під фотографією користувача

</div>

Зміна фото

</div><div>

Змінити фото користувача можна нажавши на кнопку "Завантажити нове фото", яка знаходиться в <a href="/users/update">Редагуванні профілю</a> одразу під фотографією користувача. Попередньо потрібно вибрати, яке саме фото Ви хочете завантажити використавши кнопку "Вибрати файл"

</div>

<b style="color: red; text-decoration: underline">Незворотнє</b> видалення профіля

</div><div>

Незворотньо видалити користувача можна нажавши на кнопку "Видалити користувача", яка знаходиться в <a href="/users/update">Редагуванні профілю</a> під фотографією користувача.

</div>

Файли користувача

</div><div>

Переглянути та змінити файли користувача можна на сторінці <a href="/user_file_manager/index">Файли користувача</a>, перейти на яку можна з <a href="/users/view">Профілю</a> (зверху справа кнопка)

Додавання

</div>

<div>

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

</div>

Видалення

</div>

<div>

Видалити файл можна натиснувши на протів нього на кнопку "Видалити"

</div>

Зміна прав доступу

</div>

<div>

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

</div>

Отримання посилання для завантаження

</div>

<div>

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

</div>

Адміністрування

</div>

Адміністрування - розділ сайту, доступний лише для модераторів освітнього закладу та адміністратора

Додати користувача

</div><div>

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

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

</div>

Звіти

</div><div>

Даний розділ дозволяє отримувати конкретні звіти, сформовані на основі введених користувачами даних та експортувати їх в ексель.

Експорт в Excel

</div><div>

Експортувати відфільтровані дані можна натиснувши на кнопку "Експортувати в ексель", яка знаходиться одразу під фільтраційними полями.

</div>

Фільтрування

</div><div>

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

</div>

Довідники (назви, типи, категорії і т.п.)

</div><div>

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

</div>

Права груп користувачів

</div>

<tr>

<th>Назва дії</th>

<th>Користувач</th>

<th>Модератор</th>

<th>Адміністратор</th>

</tr>

<tr>

<td>Переглянути чужий профіль</td>

<td>Тільки якщо профіль відкритий</td>

<td>Користувачів з підпорядкованого освітнього закладу</td>

</tr>

<tr>

<td>Редагувати чужий профіль</td>

<td>Користувачів з підпорядкованого освітнього закладу</td>

</tr>

<tr>

<td>Видалити профіль</td>

<td>Користувачів підпорядкованого освітнього закладу</td>

</tr>

<tr>

<td>Переглядати опис чужих файлів та їх назви</td>

</tr>

<tr>

<td>Завантажити (з сайта) чужі файли</td>

<td>Лише з відкритим доступом</td>

</tr>

<tr>

<td>Завантажити (на сайт) файли іншому користувачу</td>

</tr>

<tr>

<td>Зворотній зв'язок</td>

<td>Якщо підтверджена пошта</td>

</tr>

<tr>

<td>Додати користувача</td>

<td>В підпорядкований освітній заклад</td>

</tr>

<tr>

<td>Зміна прав інших користувачів</td>

</tr>

<tr>

<td>Змінити пароль чужому користувачу</td>

</tr>

<tr>

<td>Переглядати довідники</td>

</tr>

<tr>

<td>Редагувати та видаляти дані з довідників</td>

</tr>

<tr>

<td>Швидкий пошук користувачів</td>

<td>Лише відкриті профілі</td>

<td>Відкриті профілі та користувачі з підпорядкованого освітнього закладу</td>

</tr>

<tr>

<td>Отримані користувачі у звітах</td>

<td>Відкриті профілі та користувачі з підпорядкованого освітнього закладу</td>

</tr>

<tr>

<td>Експорт звіта в ексель</td>

</tr>

</table>

</div>

</div>

</footer>

jQuery('#search').yiiActiveForm([{"id":"searchpeopleform-search_string","name":"search_string","container":".field-searchpeopleform-search_string","input":"#searchpeopleform-search_string","validate":function (attribute, value, messages, deferred, $form) {yii.validation.required(value, messages, {"message":"Необхідно заповнити \"Search String\"."});yii.validation.string(value, messages, {"message":"Значення \"Search String\" має бути текстовим рядком.","max":24,"tooLong":"Значення \"Search String\" повинно містити максимум 24 символа.","skipOnEmpty":1});}}], []);

});</script><script>

$(document).ready(function () {

$('.dropdown')

.hover(function () {

$('.dropdown').addClass('open')

})

.mouseleave(function () {

$('.dropdown').removeClass('open')

})

</script>

</body>

</html>

**********************************

Результат виконаної практичної роботи це файл( index1.html) надіслати вашому учителю на електронну скриньку:
vinnser@gmail.com (Сергій Петрович)
ktdfz@i.ua (Юрій Васильович)

*************************

Додаткові завдання на розвиток кмітливості