пʼятницю, 21 грудня 2018 р.

Canvas. Paint

Імітаційна модель графічного редактора Paint

Файли html i css, такі ж, як і в минулому уроці:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Paint</title>
    <link rel="stylesheet" href="pr2.css">
 </head>
<body>
<canvas id="c1" width="800" height="400"></canvas>
// для вибору кольору
<input type="color" id="color">
<script src="pr2.js"></script>
</body>
</html>

Детальніше »
Опубліковано о Немає коментарів:
Мітки: , ,

вівторок, 18 грудня 2018 р.

Canvas. Основи.

HTML / Файл pr1.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Canvas. Основи. Лінії</title>
    <link rel="stylesheet" href="pr1.css">
    </head>
<body>

<canvas id="c1" width="400" height="200"></canvas>
<script src="pr1.js" ></script>
</body>
</html>

CSS / Файл pr1.cssctx.beginPath();

Детальніше »
Опубліковано о Немає коментарів:
Мітки: , ,

четвер, 13 грудня 2018 р.

Мова UML. Діаграма використання

UML (англ. Unified Modeling Language - уніфікована мова моделювання) - мова графічного опису для об'єктного моделювання в області розробки програмного забезпечення, моделювання бізнес-процесів, системного проектування та відображення організаційних структур.
В процесі проектування система розглядається з різних точок зору за допомогою моделей, різні уявлення яких подаються у формі діаграм.
Діаграма — це графічне представлення безлічі елементів. Зазвичай зображується у вигляді графа з вершинами (сутностями) і ребрами (відносинами).
За допомогою діаграм можна візуалізувати систему з різних точок зору.
Класифікація по типам:
• чотири типи діаграм представляють статичну структуру програми;
• п'ять представляють поведінкові аспекти системи;
• три представляють фізичні аспекти функціонування системи (діаграми реалізації).
Види діаграм
• Діаграма використання (Use Case diagram)
• Діаграма класів (Class diagram)
• Діаграма об'єктів (Object diagram)
• Діаграма станів (State chart diagram)
• Діаграма діяльності (Activity diagram)
• Діаграма послідовності (Sequence diagram)
• Діаграма кооперації (Collaboration diagram)
• Діаграма компонентів (Component diagram)
• Діаграма розміщення (Deployment diagram)

Діаграма використання

Діаграма використання (use case diagram) — це найбільш загальне уявлення функціонального призначення системи.
На діаграмі використання застосовуються два типу основних сутностей: варіанти використання  і дійові особи , між якими встановлюються такі основні типи відносин:
• асоціація між дійовою особою і варіантом використання;
• узагальнення між діючими особами;
• узагальнення між варіантами використання;
• залежності (різних типів) між варіантами використання.

Приклад

Завдання

Створити проект "Ідеальна школа / Сучасна школа / Школа"

Сайт для використання: https://app.mindmup.com/


Опубліковано о Немає коментарів:
Мітки:

четвер, 6 грудня 2018 р.

Інтерактив до сайту

Опубліковано о Немає коментарів:
Мітки:

середу, 28 листопада 2018 р.

Проект ІКТ+ОАП

Зразок веб-сторінки


Детальніше »
Опубліковано о Немає коментарів:
Мітки: ,

вівторок, 27 листопада 2018 р.

Масиви

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

HTML

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Масиви</title>
</head>
<body>
<p id="out"></p>
<script src="masyv.js" ></script>
</body>
</html>

Детальніше »
Опубліковано о Немає коментарів:
Мітки: ,

понеділок, 26 листопада 2018 р.

Цикли

Розглянемо один і той самий приклад на різних циклах: надрукувати числа від 1 до 100.


Детальніше »
Опубліковано о Немає коментарів:
Мітки: ,

неділю, 25 листопада 2018 р.

Умовний оператор

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Умовний оператор</title>
</head>
<body>
 <p>Введіть число: <input type="text" id="num1"></p>
 <button onclick="f1()">Дізнатися</button>
 <hr>
 <p id="out"></p>
 <script src="2.js"></script>
</body>
</html>

Детальніше »
Опубліковано о Немає коментарів:
Мітки: ,

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Вивід тексту</title>
</head>
<body>
  <p id="out">Тестова сторінка</p>
  <hr>
  <button onclick="out()">Пуск</button>
 <script src="1.js"></script>
</body>
</html>

Детальніше »
Опубліковано о Немає коментарів:
Мітки: ,

середу, 21 листопада 2018 р.

Практична робота 4

Площа многокутника. Опуклі і неопуклі многокутники.





Опубліковано о Немає коментарів:
Мітки:

вівторок, 20 листопада 2018 р.

Простий калькулятор на JavaScript

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Калькулятор</title>
</head>
<body>
<p>Число 1:<input type="text"></p>
<p>Число 2:<input type="text"></p>
<button>Додати</button>
<button>Відняти</button>
<hr>
<p>Результат</p>
</body>
</html>

Додаємо ідентифікатори для input:

<p>Число 1:<input type="text" id="n1"></p>
<p>Число 2:<input type="text" id="n2"></p>

а також для button

<p id="out">Результат</p>

Додаємо подію для кнопки

<button onclick="plus()">Додати</button>

Пишемо функцію додавання:

function plus(){
var num1, num2, result;
num1 = document.getElementById('n1').value;
num1 = parseInt(num1);
num2 = document.getElementById('n2').value;
num2 = parseInt(num2);
result = num1+num2;
document.getElementById('out').innerHTML = result;
}

І не забуваємо, що файл js треба під'єднати до html:

<script src="calc.js" ></script>

Опубліковано о Немає коментарів:
Мітки: ,

понеділок, 19 листопада 2018 р.

Елементи обчислювальної геометрії (шпаргалки)

Многокутники


Детальніше »
Опубліковано о Немає коментарів:
Мітки:

вівторок, 13 листопада 2018 р.

Елементи обчислювальної геометрії

Опубліковано о Немає коментарів:
Мітки:

понеділок, 12 листопада 2018 р.

Створюємо логотип

Створити логотип з геометричних фігур засобами CSS

Наприклад, як можна створити відомий логотип твіттера:

Тут більше прикладів:
Детальніше »
Опубліковано о Немає коментарів:
Мітки:

середу, 7 листопада 2018 р.

Практична робота 3

1. Знайти найкоротший шлях за алгоритмом Дейкстри

2. Знайти матрицю шляхів за алгоритмом Флойда-Уоршелла

3. Побудувати для обох графів остове дерево

Опубліковано о Немає коментарів:
Мітки:

пʼятницю, 2 листопада 2018 р.

Самостійна робота

Реалізувати проект. За основу взяти таблицю стилів з сайту
https://www.impressivewebs.com/demo-files/css3-animated-scene/

Приклад, як в CSS отримати коло: 



.circle {
 width: 100px; 
 height: 100px; 
 background: #cc0000; 
 -moz-border-radius: 50px; 
 -webkit-border-radius: 50px;
border-radius: 50px; 
}

Детальніше »
Опубліковано о Немає коментарів:
Мітки:

середу, 31 жовтня 2018 р.

Анімація

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Блок</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="box"></div>
<div class="container">
<div class="bar"></div>
</div>
</body>
</html>

Детальніше »
Опубліковано о Немає коментарів:
Мітки:

пʼятницю, 12 жовтня 2018 р.

Меню+банер

Детальніше »
Опубліковано о Немає коментарів:
Мітки:

вівторок, 9 жовтня 2018 р.

Перетворення та переходи (основа коду)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Перетворення_переходи</title>
<link rel="stylesheet" type="text/css" href="pr.css">

</head>
 <body>
 <img src="tiger.jpg" alt="тигр">
 <div class="gallery">
 <div ><a href=""> <img src="tiger.jpg" alt="тигр"> </a></div>
<div ><a href=""> <img src="tiger.jpg" alt="тигр"> </a></div>
<div ><img src="tiger.jpg" alt="тигр"> </div>
<div ><a href=""> <img src="tiger.jpg" alt="тигр"> </a></div>
<div ><a href=""> <img src="tiger.jpg" alt="тигр"> </a></div>
<div ><a href=""> <img src="tiger.jpg" alt="тигр"> </a></div>
<div ><a href=""> <img src="tiger.jpg" alt="тигр"> </a></div>
<div ><a href=""> <img src="tiger.jpg" alt="тигр"> </a></div>
</div>
 </body>
</html>

Опубліковано о Немає коментарів:
Мітки:

понеділок, 8 жовтня 2018 р.

Перетворення та переходи




Детальніше »
Опубліковано о Немає коментарів:
Мітки:

пʼятницю, 5 жовтня 2018 р.

Онлайн ресурси для роботи з графами

Мінімальне кістякове дерево (алгоритм Прима) онлайн

Робота з графами онлайн Graph Online

Опубліковано о Немає коментарів:
Мітки:

середу, 3 жовтня 2018 р.

Робота з зображенням

Блок для картинки + підпис до неї

<figure class="">
  <img src="1.jpg" alt="бла">
  <figcaption>Картинка 1: бла-бла-бла</figcaption>
  </figure>

Картинки тут

Детальніше »
Опубліковано о Немає коментарів:
Мітки:

вівторок, 2 жовтня 2018 р.

Практична робота 2


Детальніше »
Опубліковано о Немає коментарів:
Мітки:

понеділок, 1 жовтня 2018 р.

Селектори нащадків. Створення меню.


Детальніше »
Опубліковано о Немає коментарів:
Мітки:

понеділок, 24 вересня 2018 р.

Обхід графів в ширину і глибину

Обхід графа в глибину

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

Детальніше »
Опубліковано о Немає коментарів:
Мітки:

Презентація до практичної роботи №1

Опубліковано о Немає коментарів:
Мітки:

неділю, 23 вересня 2018 р.

Практична робота 1

Стартовий документ

<!doctype html>
<html>
<head>
<title>Практична робота 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
Детальніше »
Опубліковано о Немає коментарів:
Мітки:

четвер, 20 вересня 2018 р.

Стилістичне оформлення сайту


box-model
Опубліковано о Немає коментарів:
Мітки:

Корисні посилання для роботи з CSS

Опубліковано о Немає коментарів:
Мітки:

середу, 19 вересня 2018 р.

Карта посилань


<img src="social-logos.jpg" usemap="#panel"  height=70px width=300px border="2">
<map name="panel">
<area href ="https://www.facebook.com" shape="rect" coords="7,7,64,67" target=_blank title="Акаунт Фейсбук">
<area href ="https://twitter.com" shape="rect" coords="75,7,150,67" target=_blank title="Акаунт Твіттер">
<area href ="https://plus.google.com" shape="rect" coords="162,7,220,67" target=_blank title="Акаунт Гугл+">
<area href ="https://www.instagram.com" shape="rect" coords="240,7,297,67" target=_blank title="Акаунт Інстаграм">
</map>
Опубліковано о Немає коментарів:
Мітки:

Форма на сайті


Детальніше »
Опубліковано о Немає коментарів:
Мітки:

середу, 12 вересня 2018 р.

Тест. Структури даних

Опубліковано о Немає коментарів:
Мітки:

вівторок, 11 вересня 2018 р.

Каркас сайту

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

1. Сайт з картинками для швидкого завантаження на сторінку
http://lorempixel.com/
2. Сайт "Рыбный текст" - текст для оформлення абзаців
http://www.blindtextgenerator.com/ru
3. Для тих, хто робить сайти
http://htmlbook.ru


Детальніше »
Опубліковано о Немає коментарів:
Мітки:

понеділок, 10 вересня 2018 р.

Структури даних

Стек


Детальніше »
Опубліковано о Немає коментарів:
Мітки:

четвер, 12 квітня 2018 р.

Створення колажу

Робота з он-лайн сервісом Loupe

 http://www.getloupe.com/create  

Детальніше »
Опубліковано о Немає коментарів:
Мітки:

четвер, 22 березня 2018 р.

Як створити саму просту стрічку часу



Створення стрічки часу from Елена Захарова

Робочі посилання:
1.  https://www.flickr.com/ - програма роботи з картинками

2.  http://timeline.knightlab.com/ - сайт сервісу TimelineJS

3.  https://goo.gl/FTH5Wn - шаблон таблиці (збережіть собі на диск, зробіть копію і працюйте)

4. Таблицю можна взяти з сайту TimelineJS (етап 1)


Опубліковано о Немає коментарів:
Мітки:

Стрічка часу


Опубліковано о Немає коментарів:
Мітки:
Підписатися на: Дописи (Atom)