Розробка HTML5 додатку для візуалізації та маніпуляції сітками елементів - Дипломная работа

ДЕРЖАВНИЙ ВИЩИЙ НАВЧАЛЬНИЙ ЗАКЛАД «ЗАПОРІЗЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ» МІНІСТЕРСТВА ОСВІТИ І НАУКИ УКРАЇНИ На тему: «Розробка HTML5 додатку для візуалізації та маніпуляції сітками елементів» Виконав: студент 4 курсу, групи 5130-1 напряму підготовки 6.040201 - математикаHTML еволюціонує, забезпечуючи поліпшену і складнішу стандартну графіком, що сприяє підвищенню якості взаємодії з користувачами. Це дає веб-розробникам можливість використовувати веб-технології на основі стандартів для створення інтерактивних сайтів і додатків зі складною графікою, не вдаючись до спеціалізованих технологіям, або написати код для конкретного браузера.У цьому розділі ми розглянемо порівняння SVG і Canvas; наведемо порівняльні приклади коду, наприклад для побудови ходу променя і роботи з "зеленим екраном".Векторна графіка не є новим поняттям. Для створення зображення у векторній графіці використовуються геометричні примітиви (фігури, точки, лінії і багатокутники ). Наприкінці шістдесятих в мову програмування Logo був доданий мова опису векторної графіки ("черепашача графіка" ) для підтримки робота-черепахи, розробленого для виконання функцій малювання. За рівнем складності векторна графіка може бути простою, середньої складності і дуже складною.Інтерактивні біржові сайти, що відображають діаграми і графіки в режимі реального часу. У додатках набору Office: - Засоби для ефективної роботи, наприклад Microsoft Office Word (картинки), POWERPOINT і Excel, а також фігури для Visio. Професійні веб-дизайнери використовують наступний набір інструментів для перегляду векторної графіки: - Adobe Illustrator, використовуваний для створення високоякісних статичних зображень, які можна експортувати у формат SVG; Важливо відзначити, що векторна графіка вже досить давно використовується в настільних компютерах, пристроях і в Інтернеті. Це дозволяє істотно поліпшити взаємодію з користувачем, оскільки установка модулів не потрібно (50 % користувачів покидає сайти, що пропонують їх встановити).Наступний приклад коду можна використовувати як шаблон для інших прикладів. Даний шаблон використовується у всіх прикладах цього розділу. Як і у випадку з мовою HTML, для вбудовування SVG в документ використовуються елементи, атрибути та стилі. Приклади: Для перегляду багатьох прикладів даного розділу потрібно браузер (такий як Windows Internet Explorer 9), що підтримує елементи SVG і Canvas. Для застосування стилів до елементів SVG, як і до інших елементів HTML, можна використовувати різні способи.У цьому розділі описуються переваги та обмеження обох технологій, а також наведені загальні принципи, що дозволяють зробити вибір на користь однієї з технологій. Слід зазначити, що як за допомогою SVG, так і за допомогою можна домогтися практично однакових результатів з ідентичними функціональними можливостями. Важливо виділити особливі сценарії, в яких надає значні переваги в порівнянні з SVG або навпаки, а також сценарії, в яких доцільніше використовувати обидві технології. У них описуються переваги і недоліки кожного підходу, так що розробники можуть зрозуміти поведінку кожної технології і вибрати відповідну для використання у своїх додатках. Якщо розробник добре знайомий з API низкоуровневой графіки і має обмежені пізнання в області веб-технологій, рекомендується вибирати Canvas.Концепцію графіки, не залежну від логіки гри можна побачити у двох іграх, розроблених одним і тим же автором, який хотів продемонструвати використання технологій і : SVG - oids і canvas - pinball. Більш вдалий приклад незалежності рівня графіки від ігрового модуля можна побачити, порівнявши canvas - pinball з SVG - Dice, оскільки в обох випадках застосовується один і той же фізичний модуль. Хоча логіка гри і демонстрації відрізняється, фізичний модуль в обох іграх стежить за позиціями, зіткненнями, швидкостями і іншими фізичними параметрами компонентів гри. Що стосується canvas - pinball, тут настроюється диспетчер анімації верхнього рівня перемальовує сцену за допомогою послідовності API Canvas. if (ANIMATIONSINPROGRESS) {ctx.save(); Якщо мова йде про гру SVG Dice, то настроюється диспетчер анімації верхнього рівня використовує перетворення в групах для переміщення існуючої графіки на екрані за допомогою DOM. if (ANIMATIONSINPROGRESS)Минуло вже більше чотирьох років з моменту, коли був анонсований перший чернетку специфікації стандарту розмітки веб-сторінок - HTML5, але до цих пір небагато ресурсів на HTML5 і, напевно, лише сота частка верстальників використовують HTML5 на практиці, при верстці сторінок сайту, хоча всі сучасні браузери підтримують даний стандарт. Найпомітніші HTML5 можливості - це поява таких тегів як aside, footer, header, nav і article і повна підтримка новітніх типів полів введення у формах, включаючи атрибут placeholder (підказує підказку в поле вводу), phone і email (які забезпечують правильну валідацію ), а також ряд новітніх медіа-елементів, які включають audio, video і canvas, що дозволяє динамічно змінювати або малювати контент.

Зміст

Вступ

1. SVG або Canvas

1.1 Векторна графіка

1.2 Короткий огляд сценаріїв векторної графіки

1.3 Введення в технології

1.4 Сценарії використання і SVG

1.5 Двомірні ігри

2. Технічне завдання

3. Покрокове побудування HTML5 додатку

3.1 Програма

Список літератури