11 клас

Складіть 12 запитань до матеріалу http://dspace.tneu.edu.ua/bitstream/316497/7281/1/FCIT_kKN_sPZS_dAVPZ_%20LEC.pdf.

Надішліть складені питання на ел. адресу informatikiurok4@gmail.com

Знайдіть додаткові відеоматеріали або рекомендації з теми "Підготовка презентаційних матеріалів" та надішліть посилання на informatikiurok4@gmail.com або https://www.instagram.com/sokolovska_ya4?r=nametag

1. Прочитайте теоретичний матеріал за посиланням:

• https://uk.wikipedia.org/wiki/%D0%92%D0%B8%D0%BC%D0%BE%D0%B3%D0%B8_%D0%B4%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%B7%D0%B0%D0%B1%D0%B5%D0%B7%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%BD%D1%8F

2. Знайдіть додаткові відеоматеріали з теми "Аналіз та документація вимог проекту " та надішліть посилання на informatikiurok4@gmail.com або https://www.instagram.com/sokolovska_ya4?r=nametag

1. Прочитайте теоретичний матеріал за посиланням:

• https://dou.ua/forums/topic/28895/

2. Знайдіть додаткові відеоматеріали з теми "Системи контролю версій у процесі розробки програмного забезпечення " та надішліть посилання на informatikiurok4@gmail.com або https://www.instagram.com/sokolovska_ya4?r=nametag

1. Прочитайте теоретичний матеріал за посиланням:

• https://dl.sumdu.edu.ua/textbooks/105914/638055/index.html

• https://e-contentum.com.ua/projects-comunication

2. Знайдіть додаткові відеоматеріали з теми "Система комунікацій у проектній роботі " та надішліть посилання на informatikiurok4@gmail.com або https://www.instagram.com/sokolovska_ya4?r=nametag

1. Прочитайте теоретичний матеріал за посиланням:

• https://gurt.org.ua/news/informator/56372/

• https://sgv.in.ua/off-lifaq/25-suchasni-metodi-upravlinnya-proektami

• https://www.buh24.com.ua/printsipi-ta-instrumenti-keruvannya-proektami-planuvannya-proektu/

2. Знайдіть відеоматеріали з теми "Програмні інструменти для проектної роботи " чи "Уніфікований процес розробки програмного забезпечення" та надішліть посилання на informatikiurok4@gmail.com або https://www.instagram.com/sokolovska_ya4?r=nametag

1. Прочитайте теоретичний матеріал за посиланням: http://um.co.ua/8/8-2/8-213199.html

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

2.Таблицю надішліть на перевірку на informatikiurok4@gmail.com або https://www.instagram.com/sokolovska_ya4?r=nametag

• https://uk.wikipedia.org/wiki/%D0%9C%D0%B5%D1%82%D0%BE%D0%B4%D0%BE%D0%BB%D0%BE%D0%B3%D1%96%D1%8F_%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B8_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%B7%D0%B0%D0%B1%D0%B5%D0%B7%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%BD%D1%8F

• https://uk.wikipedia.org/wiki/%D0%9F%D1%80%D0%BE%D1%86%D0%B5%D1%81_%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B8_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%B7%D0%B0%D0%B1%D0%B5%D0%B7%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%BD%D1%8F

• https://evergreens.com.ua/ua/articles/software-development-metodologies.html

1. Прочитайте теоретичний матеріал за посиланням: https://drive.google.com/file/d/1qkAEUQnaBoZ4zneuZxvUGlV24rEQAaRi/view

2. Виконайте тести: https://naurok.com.ua/test/join?gamecode=285465

1. Прочитайте матеріал за посиланням: 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%B1%D0%B0%D0%B7%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-5-%D0%B1%D0%BC-4

2. Складіть 10 запитань до прочитаного матеріалу, надішліть на informatikiurok4@gmail.com або https://www.instagram.com/sokolovska_ya4?r=nametag (не у форматі світлини, через галерею)

1. Перегляньте презентацію https://drive.google.com/file/d/1Im1RQhGYrK5yJpKW7Q6Hn4hIcCBrJ1Ce/view

2. Дайте відповіді на запитання https://forms.gle/aQnYHFmEf3GLBMxSA

1. Перегляньте презентацію та виконайте практичну роботу за матеріалами, що подано з посиланням https://zbl99kurs.blogspot.com/p/23.html. Практичну роботу збережіть та надішліть на ел. адресу informatikiurok4@gmail.com

Програми для виконання практичного завдання:

• sublimetext

• https://www.w3schools.com/

• Блокнот

1. Переглянути презентацію https://docs.google.com/presentation/d/1DoRuYgGgfLv2VjK0wWDAFaJJuqZ1wYVzi_UN9P-LnOQ/edit#slide=id.p1

2. Практичне завдання (Створити веб-сторінку з конвертером валют). Роботу надішліть на ел. адресу informatikiurok4@gmail.com:

• https://docs.google.com/document/d/1NjFPZZthT6TMDMy8uKJ_59dNfDwxjkcVRFHN3cH2IVo/edit

• Матеріали до практичного завдання уроку

• Відео-інструкція

Корисні посилання

1) https://codeguida.com/post/445

2) https://uk.wikipedia.org/wiki/AJAX

3) https://developer.mozilla.org/ru/docs/Словарь/функция_обратного_вызова

4) https://developer.mozilla.org/ru/docs/Learn/JavaScript/Client-side_web_APIs/Introduction

5) https://bank.gov.ua/control/uk/publish/article?art_id=38441973&cat_id=38459171#exchange

Прочитайте теоретичний матеріал та створіть форму згідно зразка. : https://sites.google.com/site/schoolratusha/profilni-speckursi/informacijni-tehnologiie/osnovi-veb-dizajnu/veb-programuvanna/vikoristanna-form-osnovni-elementi-formi.

Створену форму надішліть на ел. адресу informatikiurok4@gmail.com, вказавши у темі листа прізвище, ім'я.

Прочитайте теоретичний матеріал: https://dl.sumdu.edu.ua/textbooks/95348/569916/index.html

Виконайте тести відкривши посилання join.naurok.ua. Код доступу 187666.

Виконайте процедуру реєстрації для замовлення послуги безкоштовного хостинга на сервері http://ho.com.ua/.

Залиште свій коментар про використання завдання за посиланням https://forms.gle/Naf5hQzWpPPWaQnJ7

1. Опрацюйте інформацію за посиланнями:

• https://hostiq.ua/ukr/info/what-is-hosting/?gclid=CjwKCAjwvOHzBRBoEiwA48i6Aky45VdfQDqVKd9ECj3juK845vCT-EeANbpcXyhybjHSgINwppS0jRoCIHUQAvD_BwE

• https://www.websiteplanet.com/uk/web-hosting/

2. Виконайте тест https://naurok.com.ua/test/join?gamecode=443939

• Опрацюйте інформацію за посиланням http://comscienceatschool.blogspot.com/p/27_17.html .

• Запустіть всі програмні коди з наведеного посилання, результати сфотографуйте та надішліть на ел. адресу informatikiurok4@gmail.com, вказавши у темі листа прізвище, ім'я та тему "Об'єктна модель документа"

• Для виконання завдання завантажте безкоштовну програму з офіціного сайту https://www.sublimetext.com/ та встановіть на своєму ПК, або використайте онлайн програму https://www.w3schools.com/

• Опрацюйте опорний конспект.

• Створіть веб-сторінку і розмістіть на ній:

1) Аудіо файл з альтернативним текстом

2) Відео-файл з атрибутом керування і альтернативним текстом;

3) Відеофайл з YouTube.

• Оформіть веб-сторінку на власний смак: додайте заголовки, підписи, посилання, кнопки, фонове заповнення (колір або картинка), зображення і т.д…Збережіть свою роботу та надішліть на ел. адресу informatikiurok4@gmail.com, вказавши у темі листа прізвище, ім'я та тему "Мультимедіа на веб-сторінках"

• Для виконання завдання завантажте безкоштовну програму з офіціного сайту https://www.sublimetext.com/ та встановіть на своєму ПК, або використайте онлайн програму https://www.w3schools.com/

Підтримка браузера

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

Пізніше з'явилися браузери з підтримкою кольорів і шрифтів і зображень!

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

Формати мультимедіа

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

Найпоширенішим способом виявлення типу файлу є перегляд розширення файлу.

Мультимедійні файли мають різні формати, такі як: .swf, .wav, .mp3, .mp4, .mpg, .wmv і .avi.

Загальні формати відео

• MP4 - це новий і майбутній формат інтернет-відео.

• YouTube рекомендує MP4.

• MP4 підтримується Flash Player.

• MP4 підтримується HTML5.

Тільки відео MP4, WebM і Ogg підтримуються стандартом HTML5.

Формати аудіо

MP3 - найновіший формат для записаної музики. Термін MP3 став синонімом цифрової музики.

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

Тільки MP3, WAV і Ogg аудіо підтримуються стандартом HTML5.

Приклад 1:

<!DOCTYPE html>

<html>

<body>

<video width="400" controls>

<source src="mov_bbb.mp4" type="video/mp4">

<source src="mov_bbb.ogg" type="video/ogg">

Ваш веб-переглядач не підтримує тег відео в HTML5

</video>

</body>

</html>

Відтворення відео в HTML

HTML5 відео можна відтворювати лише у веб-переглядачі з плагіном (наприклад, flash).

Елемент HTML5 <video> - вказує на стандартний спосіб вбудовування відео на веб-сторінку.

Елемент HTML <video>

Щоб показати відео в HTML, використовуйте тег <video>:

Приклад 2:

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Ваш браузер не підтримує тег відео в HTML5 </video>

Як це працює

Controls - атрибут додає елементи управління відео такі, як відтворення, пауза, і обсяг.

Гарна ідея завжди включати width і height - атрибути. Якщо висоту та ширину не встановлено, сторінка може мінятися під час завантаження відео.

<source> - Елемент дозволяє вказати альтернативні відео файли, які браузер може вибрати. Браузер використовуватиме перший розпізнаний формат.

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

HTML <video> Автозапуск

Щоб розпочати відео, автоматично використовуйте autoplay атрибут:

Приклад 3:

<video width="320" height="240" autoplay>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

Атрибут автозапуску не працює в мобільних пристроях, таких як iPad і iPhone.

Теги відео HTML5

• <video> - визначає відео чи фільм

• <source> - Визначає кілька мультимедійних ресурсів для мультимедійних елементів, таких як <video> і <audio>

• <track> - Визначає текстові доріжки в медіаплеєрах

Аудіо в Інтернеті

Перед HTML5 аудіофайли можна відтворювати лише в браузері з плагіном (наприклад, flash).

Елемент HTML5 <audio> визначає стандартний спосіб вбудовування аудіо в веб-сторінку.

HTML <audio> Елемент

Щоб відтворити аудіофайл у HTML, використовуйте теги <audio> елемент:

Приклад 4:

<audio controls>

<source src="horse.mp3" type="audio/mpeg">

Ваш браузер не підтримує даний аудіо-формат

</audio>

HTML Аудіо - Як це працює?

Controls - атрибут додає елементи управління аудіо, як відтворення, пауза, і обсяг.

<source> - Елемент дозволяє вказати альтернативні звукові файли , які браузер може вибрати. Браузер використовуватиме перший розпізнаний формат.

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

Теги аудіофайлів

• <audio> - Визначає аудіо-файл

• <source> - Визначає кілька мультимедійних ресурсів для мультимедійних елементів, таких як <video> і <audio>

Додатки HTML

Метою плагіна є розширення функціональності веб-браузера.

Довідники HTML (плагіни)

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

Прикладами відомих плагінів є елементи Java.

Плагіни можна додавати до веб-сторінок з <object> тегом або <embed> тегом.

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

Щоб відобразити відео та аудіо: використовуйте теги <video> та <audio>.

Елемент <object>

<object> - елемент підтримується всіма браузерами.

<object> - елемент визначає вбудований об'єкт всередині HTML - документа.

Він використовується для вбудовування плагінів (наприклад, Java, читачів PDF, Flash-плеєрів) у веб-сторінки.

Приклад 5:

<object width="400" height="50" data="bookmark.swf"> </object>

<object> - елемент також може бути використаний для включення HTML в HTML:

Приклад 6:

<object width="100%" height="500px" data="snippet.html"></object>

Або зображення, якщо потрібно:

Приклад 7:

<object data="audi.jpeg"></object>

Елемент <embed>

<embed> - елемент підтримується у всіх основних браузерах.

<embed> - елемент також визначає вбудований об'єкт всередині HTML - документа.

Веб-браузери довго підтримували елемент <embed>. Проте вона не є частиною специфікації HTML перед HTML5.

Приклад 8:

<embed width="400" height="50" src="bookmark.swf">

Зауважте, що елемент <embed> не має закриваючого тега. Він не може містити альтернативний текст.

<embed> - елемент також може бути використаний для включення HTML в HTML:

Приклад 9:

<embed width="100%" height="500px" src="snippet.html">

Або зображення, якщо потрібно:

Приклад 10:

<embed src="audi.jpeg">

HTML YouTube Відео

Найпростішим способом відтворення відео в HTML є використання YouTube.

Вам доведеться конвертувати відео в різні формати, щоб зробити їх відтворенням у всіх браузерах.

Перетворення відео в різні формати може бути важким і тривалим.

Більш просте рішення - дозволити YouTube відтворити відео на вашій веб-сторінці.

Ідентифікатор відео YouTube

YouTube відображатиме ідентифікатор (наприклад, tgbNymZ7vqY) під час збереження (або відтворення) відео.

Ви можете використовувати цей ідентифікатор і посилатися на своє відео в HTML-коді.

Можна скористатися готовим кодом вставки відео з YouTube:

1) Вибрати необхідне відео

2) Натиснути на необхідному відео праву кнопку миші

3) В контекстному меню до даного відео вибрати команду «Скопіювати код вставки»

4) Вставити даний код в код на своїй веб-сторінці

Приклад 11:

<iframe width="853" height="480" src="https://www.youtube.com/embed/ITub7NYgY2Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Або без налаштувань

<iframe width="250" height="200" src="https://www.youtube.com/embed/ITub7NYgY2Y" ></iframe>

Опорний конспект

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

Так, можна задати стандартне оформлення для певного блоку (наприклад, div), а також його оформлення у момент наведення вказівника миші (hover) на цей блок. Можна переглянути html-код, опис стилів та результат застосування такого ефекту:

Приклад 1. Стандартно блок div має ширину 200 та висоту 50 пікселів, а при наведенні мишки (подія hover), ширина змінюється на 300 пікселів протягом 2 секунд і розмір шрифту збільшується. Якщо додати властивість transition: 2s до початкового стилю, то повернення до 200 пікселів теж відбуватиметься не миттєво, а протягом вказаного часу.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Блокова верстка в три колонки</title>

<style type = "text/css">

div {

border: 4px double black;

background: yellow;

padding: 10px;

width: 200px;

height: 30px;

}

div:hover {

width: 300px;

transition: 2s;

font-size:xx-large;

}

</style>

</head>

<body>

<div>Я люблю Україну</div>

</body>

</html>

Для гнучкого керування процесом анімації можна задавати визначення окремих кадрів, keyframes. Для такої анімації необхідно вказувати ім'я – для використання при виклику, а також стильові властивості у різні моменти часу:

<відсоток> значення властивостей у заданий момент часу (у відсотках);

<властивість> анімована властивість;

<значення> значення в момент, описаний селектором кадру.

Приклад 2. Блок div початково має червоний колір тла. Протягом 4 секунд відбувається анімація example з такими етапами: колір заливки змінюється з червоного до жовтого, до синього, до зеленого. У кінці відбувається повернення до червоного кольору, визначеного для блоку div.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Анімація example </title>

<style type = "text/css">

div {

width: 200px;

height: 50px;

background-color: red;

-webkit-animation-name: example;

-webkit-animation-duration: 4s;

animation-name: example;

animation-duration: 4s;

}

@keyframes example {

0% {background-color: red;}

25% {background-color: yellow;}

50% {background-color: blue;}

100% {background-color: green;}

}

</style>

</head>

<body>

<div>Я люблю Україну</div>

</body>

</html>

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

Приклад 3. Змінений радіус фігури (border-radius) - таким чином можна отримати коло, чи еліпс. Цей атрибут може визначати форму фігури за параметрами округлення окремих кутів, наприклад border-radius:50% 0 0 0; означає, що округлений буде лише 1 верхній лівий кут.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Блокова верстка в три колонки</title>

<style type = "text/css">

div {

width: 100px;

height: 100px;

background-color: red;

-webkit-animation-name: example;

-webkit-animation-duration: 4s;

animation-name: example;

animation-duration: 4s;

border-radius: 50%;

text-align:center;

position: relative;

}

@keyframes example {

0% { background-color: red; left: 0px; top: 0px;}

25% { background-color: yellow; left: 200px; top: 0px; border-radius: 50% 0 0 0;}

50% { background-color: blue; left: 200px; top: 100px; border-radius: 50% 50% 0 0}

75% { background-color: green; left: 0px; top: 100px; border-radius: 50% 50% 50% 0}

100% { background-color: red; left: 0px; top: 0px;}

}

</style>

</head>

<body>

<div>Я<br /> люблю<br /> Україну</div>

</body>

</html>

Серед анімованих властивостей можна виділити трансформацію transform, яка може набувати значень

matrix(n,n,n,n,n,n) - перетворення,

translate(x,y) - переміщення,

scale(x,y) - масштаб,

rotate(кут) - поворот,

skew(кут-х,кут-у) - нахиляння,

perspective(n) - перспектива

Приклад 4:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Блокова верстка в три колонки</title>

<style type = "text/css">

div {

width: 60px;

height: 60px;

background-color: red;

animation-name: example;

animation-duration: 4s;

border-radius: 50%;

text-align:center;

}

@keyframes example {

50% {transform: rotate(360deg)

}

</style>

</head>

<body>

<div>Я<br /> люблю<br /> Україну</div>

</body>

</html>

Серед додаткових параметрів анімації можна виділити наступні:animation-delay: 2s; - затримка початку анімації

animation-iteration-count: 3; - кількість повторів анімації (infinite; - нескінчене повторення)

animation-direction: reverse; - напрям анімації (повторити у зворотньому порядку). alternate; - повторювати в прямому та зворотньому порядку

animation-timing-function: linear; - прискорення анімації (відсутнє) (можливі значення: ease; ease-in; ease-out; ease-in-out;)

Існує скорочений запис стильових властивостей.

div {

animation-name: example;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

}

можна записати:

div {

animation: example 5s linear 2s infinite alternate;

}

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

Chrome & Safari: -webkit-

Firefox: -moz-

Opera: -o-

Internet Explorer: -ms-

div {-webkit-animation: example 5s linear 2s infinite alternate;-moz-animation: example 5s linear 2s infinite alternate;-o-animation: example 5s linear 2s infinite alternate;-ms-animation: example 5s linear 2s infinite alternate;animation: example 5s linear 2s infinite alternate;}

Є вісім властивостей animation (в алфавітному порядку):

animation-delay – задає затримку перед початком анімації, в секундах

animation-direction – вказує на те, чи повинна анімація відтворюватися в зворотному або черговому циклах (reverse або alternate)

animation-duration – визначає те, скільки секунд або мілісекунд потрібно анімації для завершення одного циклу

animation-fill-mode – стиль для елемента, коли анімація не відтворюється. Наприклад, коли анімація завершилася або у неї задана затримка

animation-iteration-count – задає кількість разів, яку має відтворюватися анімація (infinite – для нескінченної кількості разів)

animation-name – визначає ім’я @keyframes анімації

animation-play-state – вказує на те, чи запущена анімація або припинена (running або paused)

animation-timing-function – визначає криву швидкості анімації

Весь синтаксис властивостей анімації виглядає так:

div {

animation-name: тут назва для ключових кадрів;

animation-duration: тривалість анімації в секундах або мілісекундах;

animation-timing-function: ease-out;

animation-delay: 0s;

animation-direction: alternate;

animation-iteration-count: infinite;

animation-fill-mode: none;

animation-play-state: running;

}

А короткий запис властивостей анімації виглядає так:

div {

animation: nazva-animaciyi 1.5s ease-out 0s alternate infinite none running;

}

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

Зразок синтаксису ключових кадрів @keyframes виглядає так:

@keyframes [назва анімації] {

0% {/* початковий кадр */

[властивість CSS]: [значення властивості];

}

100% {/* фінальний кадр */

[властивість CSS]: [значення властивості];

}

}

У правилах @keyframes можна використовувати більше двох (початкового і фінального) ключових кадрів (наприклад, проміжні в позначці 30%, 75% і т.д.). Також в кожному ключовому кадрі можна вказувати досить велику кількість властивостей CSS.

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

проект розробки адаптивного веб-сайту

#Спочатку потрібно запитати у користувача числа N i M, а потім і саму матрицю:

N=int(input())

M=int(input())

a=[]

for i in range(N):

a=a+[[int(i) for i in input().split()]]

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

for i in range(1, M):

a[0][i]=a[0][i]+a[0][i-1]

for i in range(1, N):

a[i][0]=a[i][0]+a[i-1][0]

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

for i in range(1,N):

for j in range(1,M):

a[i][j]=a[i][j]+min(a[i-1][j],a[i][j-1])

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

r=""

x=M-1

y=N-1

while x!=0 or y!=0:

if x==0:

r=r+"D"

y=y-1

elif y==0:

r=r+"R"

x=x-1

elif a[y-1][x]<=a[y][x-1]:

r=r+"D"

y=y-1

else:

r=r+"R"

x=x-1

print(r[::-1])

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