11 клас

5 травня 2021

Тема: Розробка проєкту

Відправити на e-mail natalikravetss@gmail.com.

29 квітня 2021

Тема: Практична робота: Розроблення дизайну афіш, квитків, флаєрів на конкретний захід

Завдання

Відправити на e-mail natalikravetss@gmail.com.

15 квітня 2021

Тема: Поняття блогу. Види блогів. Настроювання блогу.

Практичне завдання: створити блог з 3 сторінок на будь-яку тему.

Відправити на e-mail natalikravetss@gmail.com.

7 квітня 2021

Тема: Використання форм. Основні елементи форм. Валідація та збереження даних форм.

Відправити на e-mail natalikravetss@gmail.com.

31 березня 2021

Тема: Веб-сервер і база даних. Взаємодія клієнт-сервер.

8 квітня

Тема: Верстка веб - сторінок

Створити блогна тему: "Моя майбутня професія" не менше 3 сторінок.(Відправити адресу блогу на e-mail natalikravetss@gmail.com)
Блог створюємо на gmail використовуючи додатки

14 квітня

Тема: Адаптативна верстка

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

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

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

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

Приклад верстки головної сторінки

Сторінка складається з трьох основних блоків:

заголовок (шапка),

контейнер-обгортка для основного вмісту і сайдбара, і

нижній колонтитул (футер).

1. Метатеги і розділ <head>

1) Додамо в розділ <head> необхідні файли - посилання на використовувані шрифти, бібліотеку jQuery, а також плагін prefixfree (щоб не писати для властивостей браузерні префікси):

<!DOCTYPE html>

<Html>

<Head>

<title> Адаптивна верстка сайту </title>

</Head>

<Body>

2. Шапка сторінки

У шапці сторінки <header> помістимо наступні елементи-контейнери:

логотип <a class="logo">;
кнопку для показу / приховування головного меню <div class="nav-toggle">;
головне меню <ul id="menu">;
форму пошуку по сайту <form id="searchform">.

</a>

</Form>

<Li> <a href=""> Портфоліо </a> </li>

<Li> <a href=""> Про автора </a> </li>

</Ul>

</Nav>

</Header>

3. Блок з коротким змістом статті

Анонс статей задамо елементом <article id="post-1" class="post">:

<Div class = "category"> <a href=""> Дизайн </a> </div>

<P> Мій перший сайт</p>

<a class="more-link" href=""> Продовжити читання </a>

</Div>

</Article>

...

</Article>

</Div>

4. Бічна колонка

У бічну колонку <aside> додамо список категорій, останні записи і форму підписки на розсилку:

<Aside>

<H3 class = "widget-title"> Категорії </h3>

<Li> <a href=""> Дизайн </a> (2) </li>

<Li> <a href=""> Верстка </a> (5) </li>

<Li> <a href=""> Відео </a> (1) </li>

</Ul>

</Div>

<H3 class = "widget-title"> Останні записи </h3>

<Li>

</Div>

<H4 class = "widget-post-title"> Весна </h4>

</ Li>

<Li>

</Div>

</Li>

<Li>

</a>

</Div>

<H4 class = "widget-post-title"> Осінь </h4>

</Li>

</a>

</Div>

</Ul>

</Div>

<H3 class = "widget-title"> Підписка на розсилку </h3>

</Form>

</Div>

</Aside>

</Div>

5. Нижній колонтитул

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

</Div>

<a href="mailto:admin@yoursite.ru"> Написати листа </a>

</Div>

</Footer>

</Body>

</Html>

6. Стилі шапки та її вмісту

header {

width: 100%;

background: white;

box-shadow: 3px 3px 1px rgba (0,0,0, .05);

padding: 15px 0;

margin-bottom: 30px;

position: relative;

}

/ * Логотип * /

.logo {

display: block;

float: left;

}

.logo span {

color: white;

display: inline-block;

width: 30px;

height: 30px;

line-height: 30px;

border-radius: 50%;

margin: 5px 0;

text-align: center;

text-shadow: 2px 2px 1px rgba (0,0,0, .4);

}

.logo span: nth-child (odd) {

background: # EF5A42;

}

.logo span: nth-child (even) {

background: # F8B763;

}

/ * Меню * /

#menu {

float: right;

}

#menu li {

display: inline-block;

margin-right: 30px;

}

#menu a {

color: # 111;

text-transform: uppercase;

letter-spacing: 1px;

font-weight: 600;

display: block;

line-height: 40px;

}

#menu a: hover {

color: # EF5A42;

}

#menu li: last-child {

margin-right: 0;

}

/ * Форма пошуку * /

#searchform {

float: right;

margin-left: 46px;

display: inline-block;

position: relative;

}

#searchform input {

width: 170px;

float: left;

border: none;

padding-left: 10px;

height: 40px;

overflow: hidden;

outline: none;

color: # 9E9C9C;

font-style: italic;

}

#searchform button {

background: transparent;

height: 40px;

border: none;

position: absolute;

right: 10px;

color: # EF5A42;

cursor: pointer;

font-size: 18px;

}

#searchform input: focus {

outline: 2px solid # EBEBE3;

}

/ * Кнопка перемикання меню, що з'являється при ширині 768px * /

.nav-toggle {

display: none;

position: relative;

float: right;

width: 40px;

height: 40px;

margin-left: 20px;

background: # EF5A42;

cursor: pointer;

}

.nav-toggle span {

display: block;

position: absolute;

top: 19px;

left: 8px;

right: 8px;

height: 2px;

background: white;

}

.nav-toggle span: before, .nav-toggle span: after {

content: "";

position: absolute;

display: block;

left: 0;

width: 100%;

height: 2px;

background: white;

}

.nav-toggle span: before {

top: -10px;

}

.nav-toggle span: after {

bottom: -10px;

}

/ * Клас, який буде додано до верхнього меню при натисканні на кнопку і покаже приховане меню * /

# Menu.active {

max-height: 123px;

}

7. Стилі для блоку з основним вмістом

/ * Лівий контейнер * /

.posts-list {

margin-bottom: 30px;

width: 64%;

float: left;

}

/ * Блок для статті * /

.post {

margin-bottom: 35px;

}

.post-content p {

line-height: 1.5;

padding-bottom: 1em;

}

.post-image {

margin-bottom: 30px;

}

.category {

margin-bottom: 15px;

}

.category a {

color: # F8B763;

text-transform: uppercase;

}

.post-title {

margin-bottom: 12px;

font-size: 26px;

}

/ * Блок з кнопкою "продовжити читання" і кнопками соціальних мереж * /

.post-footer {

border-top: 1px solid # EBEBE3;

border-bottom: 1px solid # EBEBE3;

position: relative;

margin-top: 15px;

}

.more-link {

position: relative;

display: inline-block;

font-size: 10px;

text-transform: uppercase;

color: white;

line-height: 44px;

padding: 0 22px;

background: # 3C3D41;

letter-spacing: 0.1em;

white-space: nowrap;

}

.more-link: after {

content: '';

display: block;

position: absolute;

width: 0;

height: 0;

top: 0;

right: 0;

border: solid transparent;

border-width: 22px 18px;

border-left-color: # 3C3D41;

transform: translateX (100%);

}

.post-social {

position: absolute;

left: auto;

top: 50%;

right: 0;

text-align: right;

transform: translateY (-50%);

padding: 0;

font-size: 12px;

}

.post-social a {

display: inline-block;

margin-left: 8px;

color: # F8B763;

width: 25px;

height: 25px;

line-height: 23px;

text-align: center;

border-radius: 50%;

border: 1px solid;

}

8. Стилі для бічної колонки

/ * Правий контейнер * /
aside {
width: 33%;
float: right;
}
/ * Блок для віджетів * /
.widget {
padding: 20px 15px;
background: white;
font-size: 13px;
margin-bottom: 30px;
box-shadow: 3px 3px 1px rgba (0,0,0, .05);
}
.widget-title {
font-size: 18px;
padding: 10px;
margin-bottom: 20px;
text-align: center;
border: 2px solid # F8B763;
box-shadow: 3px 3px 0 0 # F8B763;
}
.widget-category-list li {
border-bottom: 1px solid # EBEBE3;
padding: 10px 0;
color: # c6c6c6;
font-style: italic;
}
.widget-category-list li: last-child {
border-bottom: none;
}
.widget-category-list li a {
color: # 626262;
margin-right: 6px;
font-style: normal;
}
.widget-category-list li a: before {
content: "\ f105";
display: inline-block;
font-family: 'FontAwesome';
margin-right: 10px;
color: # c6c6c6;
}
.widget-posts-list li {
border-top: 1px solid # EBEBE3;
padding: 15px 0;
}
.widget-posts-list li: nth-child (1) {
border-top: none;
}
.post-image-small {
width: 30%;
float: left;
margin-right: 15px;
}
.widget-post-title {
float: left;
}
/ * Форма підписки * /
#subscribe {
position: relative;
width: 100%;
padding: 15px 0;
}
#subscribe input {
width: 100%;
display: block;
float: left;
border: 2px solid # EBEBE3;
padding: 0 0 0 10px;
height: 40px;
position: relative;
outline: none;
color: # 9E9C9C;
font-style: italic;
}
#subscribe button {
padding: 0 15px;
background: transparent;
height: 40px;
border: none;
position: absolute;
right: 0;
color: # EF5A42;
cursor: pointer;
font-size: 18px;
}
#subscribe input: focus + button {
background: # EF5A42;
color: white;
}

9. Стилі для нижнього колонтитула

Підвал сайту розділимо на три рівних стовпці:
footer {
padding: 30px 0;
background: # 3C3D41;
color: white;
}
.footer-col {
width: 33.3333333333%;
float: left;
}
.footer-col a {
color: white;
}
.footer-col: last-child {
text-align: right;
}
.social-bar-wrap {
text-align: center;
}
.social-bar-wrap a {
padding: 0 7px;
font-size: 18px;
}

10. Медіа-запити

@media (max-width: 768px) {
/ * Показуємо кнопку для перемикання верхньої навігації * /
.nav-toggle {
display: block;
}
header {
padding: 10px 0;
}
/ * Приховуємо верхнє меню, скасовуємо обтікання, позиціонуємо його, змістивши на висоту шапки сайту * /
#menu {
max-height: 0;
background: white;
float: none;
position: absolute;
overflow: hidden;
top: 63px;
right: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 3;
}
/ * Робимо елементи списку блоковими, щоб вони розташовувалися один під одним * /
#menu li {
display: block;
padding-left: 15px;
border-bottom: 1px solid # EBEBE3;
margin-right: 0;
}
/ * Скасовуємо обтікання лівій і правій колонок, встановлюємо їм ширину 100% * /
.posts-list, aside {
width: 100%;
float: none;
}
.widget-post-title {
font-size: 1.5em;
}
}
@media (max-width: 480px) {
/ * Вирівнюванням логотип по центру * /
nav {
text-align: center;
}
/ * Скасовуємо обтікання для логотипу * /
.logo {
float: none;
margin-bottom: 15px;
}
/ * Позиціонуємо меню на збільшену висоту шапки * /
#menu {
top: 118px;
}
/ * Позиціонуємо форму пошуку по лівому краю * /
#searchform {
float: left;
margin-left: 0;
}
/ * Прибираємо верхню і нижню межі і вирівнюємо кнопку по центру * /
.post-footer {
border-top: none;
border-bottom: none;
text-align: center;
}
/ * Скасовуємо позиціонування кнопок соцмереж * /
.post-social {
position: static;
text-align: center;
transform: none;
margin-top: 20px;
}
.widget-post-title {
font-size: 1.2em;
}
/ * Скасовуємо обтікання для стовпців підвалу сторінки * /
.footer-col {
float: none;
margin-bottom: 20px;
width: 100%;
text-align: center;
}
.footer-col: last-child {
text-align: center;
margin-bottom: 0;
}
}

11. Скрипт для мобільного меню

За показ-приховування верхнього меню при кліці на кнопку (перемикається висота меню - від нульової до рівної її вмісту) відповідає код jQuery, який ми раніше додали в розмітку сторінки перед закриває тегом </body>:

<Script>$ ( '. Nav-toggle'). On ( 'click', function () { $ ( '# Menu'). ToggleClass ( 'active');});</ Script>

15 квітня

Тема: Кросбраузерність

Тестування кросбраузерної сумісності (важлива складова частина розробки сайту) – це перевірка того, як виглядають всі веб-сторінки при перегляді в різних браузерах (наприклад, в таких веб-переглядачах як Chrome, Firefox або Internet Explorer). Зрозуміло, що під абсолютно всі браузери адаптувати сайт не вийде, але можна почати з тих, якими користуються більшість відвідувачів вашого (дізнатися це можна, наприклад, зі статистики Google Analytics).

Чому важливо тестувати кросбраузерну сумісність?

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

Що впливає на труднощі при перегляді мого сайту?

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

Ось основні елементи, які можуть викликати проблеми із відображенням сайту:

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

Основні інструменти для тестування кросбраузерної сумісності

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

Browserling

Browsershots

turbo.net Browser Sandbox

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

Для професійних цілей підійдуть тільки платні рішення. Практично всі вони вимагають наявності підписки, але надають невеликий безкоштовний тестовий період. До таких ресурсів можна віднести: BrowserStack, Cross Browser Testing, Sauce Labs.

Для визначення підтримки елементів HTML5 та CSS3 в різних версіях браузерів скористайтеся сайтом Can I use.

Якщо для вашого сайту критично важлива підтримка в старих браузерах, можете скористатися наступними плагінами і JavaScript-бібліотеками: HTML5 Shiv, Modernizr, Respond.

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

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

Домашнє завдання:

FotoJet - онлайн-сервіс для створення колажів і графічного дизайну

Найпростіші техніки адаптивної верстки

https://sales-generator.ru/blog/adaptivnaya-verstka-sayta/

22 квітня

Тема: Практична робота№ 8: "Створення веб-сторінок"

Створити групу в Google Групи на тему: "Мій випускний клас"

Відправити адресу групи на e-mail natalikravetss@gmail.com.

28-29 квітня

Тема: Графіка для веб-середовища

Презентація

5 травня

Тема: Анімаційні ефекти та мультимедіа на веб-сторінках

Орпцювати матеріал за посиланням і створити конспект https://drive.google.com/open?id=1iNXvkcD78Gbd_yiDdtLqj1YpvFV3ThRD

12 травня

Тема: Практична робота №9: Анімаційні ефекти та мультимедіа на веб-сторінках

Завдання

Відкрийте Notepad++, створіть новий документ «Index.html» і збережіть його в папку .
Створіть веб-сторінку і розмістіть на ній:

Аудіо файл з альтернативним текстом
Відео-файл з автозапуском (може працювати неправильно або неспрацювати через несумісність з веб-програвачем) і альтернативним текстом;
Відео-файл з атрибутом керування і альтернативним текстом;
Відеофайл з YouTube.

Оформіть веб-сторінку на власний смак: додайте заголовки, підписи, посилання, кнопки, фонове заповнення (колір або картинка), зображення і т.д…
Збережіть свою роботу і перегляньте результат у браузері (Run -> )
Відправити на e-mail natalikravetss@gmail.com.

13 травня

Тема: Контрольна робота
І варіант
I.                  Початковий рівень навчальних досягнень.
1. Як називається модель баз даних, побудованої на основі двовимірної таблиці?
а) ієрархічна;                              б) мережна;
в) реляційна;                                г) структурна
2. Як називається множина точок, деякі пари з яких з’єднані кривими?
    а) масив;           б) список;                  в) граф;           г) черга
3. Стиль дизайну сайта, в оздобленні сторінок якого використовують елементи декору, предмети інтер’єру та інші атрибути, притаманні минулим десятиліттям:
а) гранж;         б) ретро;       в) футуристичний;      г) журнальний.
II.                Середній рівень навчальних досягнень.
4. Як підключити бібліотеку графічних процедур у Паскалі?
5. Як називається процес опрацювання та структурування кадрів для отримання відео?
6. Що таке інкапсуляція?
III.            Достатній рівень навчальних досягнень.
7. Практична робота.
Створити найпростішу анімацію у Flash "Летить літак"

IV.             Високий рівень навчальних досягнень.
8. Практична робота.
Створити блог «Моя Україна». На блозі написати одне повідомлення та створити дві тематичні сторінки. Додати гіперпосилання та ілюстрації.
ІІ варіант
  I.     Початковий рівень навчальних досягнень.

1. Який режим у СУБД MS Access дозволяє додавати, редагувати або переглядати табличні дані, змінювати зовнішній вигляд таблиці та її структуру:
а) форма;                         б) запит;
в) звіт;                              г)таблиця

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

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

ІІ. Середній рівень навчальних досягнень.

4. Як намалювати прямокутник у Паскалі?

5. Як називається процес перекодування відеофайлу одного формату в інший?

6. Що таке поліморфізм?

ІІІ. Достатній рівень навчальних досягнень.

7. . Практична робота.
Створити найпростішу анімацію у Flash "Пливе човен".

IV.           Високий рівень навчальних досягнень.

8. Практична робота.
Створити блог «Моя Україна». На блозі написати одне повідомлення та створити дві тематичні сторінки. Додати гіперпосилання та ілюстрації.
Відправити на e-mail natalikravetss@gmail.com.

11 клас

5 травня 2021

Тема: Розробка проєкту

Відправити на e-mail natalikravetss@gmail.com.

29 квітня 2021

Тема: Практична робота: Розроблення дизайну афіш, квитків, флаєрів на конкретний захід

Відправити на e-mail natalikravetss@gmail.com.

15 квітня 2021

Тема: Поняття блогу. Види блогів. Настроювання блогу.

Практичне завдання: створити блог з 3 сторінок на будь-яку тему.

Відправити на e-mail natalikravetss@gmail.com.

7 квітня 2021

Тема: Використання форм. Основні елементи форм. Валідація та збереження даних форм.

Практичне завдання: Завдання 1, Завдання 2

Відправити на e-mail natalikravetss@gmail.com.

31 березня 2021

Тема: Веб-сервер і база даних. Взаємодія клієнт-сервер.

Перегляньте відео:

8 квітня

Тема: Верстка веб - сторінок

14 квітня

Тема: Адаптативна верстка

Приклад верстки головної сторінки

1. Метатеги і розділ <head>

2. Шапка сторінки

3. Блок з коротким змістом статті

4. Бічна колонка

5. Нижній колонтитул

6. Стилі шапки та її вмісту

7. Стилі для блоку з основним вмістом

8. Стилі для бічної колонки

9. Стилі для нижнього колонтитула

10. Медіа-запити

11. Скрипт для мобільного меню

15 квітня

Тема: Кросбраузерність

Чому важливо тестувати кросбраузерну сумісність?

Що впливає на труднощі при перегляді мого сайту?

Ось основні елементи, які можуть викликати проблеми із відображенням сайту:

Основні інструменти для тестування кросбраузерної сумісності

Домашнє завдання:

22 квітня

Тема: Практична робота№ 8: "Створення веб-сторінок"

28-29 квітня

Тема: Графіка для веб-середовища

5 травня

Тема: Анімаційні ефекти та мультимедіа на веб-сторінках

12 травня

Тема: Практична робота №9: Анімаційні ефекти та мультимедіа на веб-сторінках

13 травня

Комментарии

Отправить комментарий

Популярные сообщения из этого блога