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

 

 

 

Вступ 

РОЗДІЛ 1. SVG або Canvas 

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

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

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

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

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

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

1.1. ВВЕДЕННЯ 

1.2. ПІДСТАВА ДЛЯ РОЗРОБКИ 

1.3. ВИМОГИ ДО ПРОГРАМИ АБО ПРОГРАМНОГО ВИРОБУ 

РОЗДІЛ 2. HTML5 Canvas 

2.1. Переваги HTML5 

2.2. Недоліки HTML5 

2.3. Canvas 

РОЗДІЛ 3. Покрокове побудування HTML5 додатку 

3.1. Програма 

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

 

 

HTML еволюціонує, забезпечуючи поліпшену і складнішу стандартну графіком, що сприяє підвищенню якості взаємодії з користувачами. Це дає веб- розробникам можливість використовувати веб- технології на основі стандартів для створення інтерактивних сайтів і додатків зі складною графікою, не вдаючись до спеціалізованих технологіям, або написати код для конкретного браузера. У наступному розділі наведено основні поняття векторної графіки, а також: • розглядаються відмінності між безпосереднім режимом і абстрактним режимом; • описується елемент Canvas HTML5, використовуваний для графіки в безпосередньому режимі, і наводиться огляд технології Canvas; • вводиться поняття масштабованої векторної графіки (SVG), описується набір елементів HTML5, використовуваних для графіки абстрактного режиму і дається огляд SVG; • дані інструкції для нових і досвідчених розробників щодо застосування тієї чи іншої моделі векторної графіки (або обох залежно від сценарію) до векторної графіки і HTML5.

 

 

У цьому розділі ми розглянемо порівняння SVG і Canvas; наведемо порівняльні приклади коду, наприклад для побудови ходу променя і роботи з « зеленим екраном». Примітка Для перегляду багатьох прикладів даного розділу потрібно браузер (такий як Windows Internet Explorer 9), що підтримує елементи SVG і Canvas.

 

 

Векторна графіка не є новим поняттям. Для створення зображення у векторній графіці використовуються геометричні примітиви (фігури, точки, лінії і багатокутники). Наприкінці шістдесятих в мову програмування Logo був доданий мова опису векторної графіки (« черепашача графіка») для підтримки робота- черепахи, розробленого для виконання функцій малювання. З того часу складність графіки істотно зросла, проте основні поняття графіки залишилися колишніми. За рівнем складності векторна графіка може бути простою, середньої складності і дуже складною. Нижче наведені приклади графіки різних рівнів складності. Проста – виноска в документі або ілюстрації. Середньої складності – ілюстрації (наприклад, діаграми, схеми і карти). Дуже складна – документи (наприклад, використовувані при проектуванні). Незважаючи на те що наведені приклади статичні, векторна графіка підтримує інтерактивність. Інтерактивність є ключовою функцією, що дозволяє істотно розширити можливості в цих сценаріях. Векторна графіка забезпечує інтерактивні і статичні формати для веб -додатків, додатків для настільних систем і пристроїв.

 

 

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

 У додатках набору Office: - Засоби для ефективної роботи, наприклад Microsoft Office Word

(картинки), PowerPoint і Excel, а також фігури для Visio. - Засоби автоматизованого проектування, що використовують для виведення результатів формати векторної графіки. - Корпоративні інструменти, наприклад додатки Oracle і Microsoft Dynamics, обробні інтерактивні діаграми і графіки.

 У пристроях: - Розширені компоненти графічних користувацьких інтерфейсів. - Інтерактивні міні -додатки та значки. - Інтерфейс користувача кишенькових персональних комп'ютерів.

 Професійні програми для дизайнерів Професійні веб- дизайнери використовують наступний набір інструментів для перегляду векторної графіки: - Adobe Illustrator, використовуваний для створення високоякісних статичних зображень, які можна експортувати у формат SVG; - Adobe Flash Professional, що дозволяє експортувати файли на векторному мовою на базі XML; - Microsoft Expression Blend для Windows Presentation Foundation (WPF) і Silverlight. Важливо відзначити, що векторна графіка вже досить давно використовується в настільних комп'ютерах, пристроях і в Інтернеті. Технології графіки HTML5 За допомогою HTML5 розробники або дизайнери можуть створювати описані вище особливості інтерфейсу за допомогою технологій, заснованих на стандартах. Це дозволяє істотно поліпшити взаємодію з користувачем, оскільки установка модулів не потрібно (50% користувачів покидає сайти, що пропонують їх встановити). В даний час за графіком, як правило, відповідає браузер. У разі використання Internet Explorer 9 застосовуються функції Microsoft Windows і графіка з апаратним прискоренням. У наступному розділі описуються дві нові, але не схожі один на одного технології, наведено способи їх використання, а також переваги і недоліки кожної технології. Для полегшення вибору технології для окремого сценарію застосовується спектр сценаріїв векторної графіки. На наступному малюнку показаний загальний спектр сценаріїв у векторній графіці. Будь-який сценарій може більше ставитися до Canvas або SVG. Це означає, що в конкретному сценарії одна технологія переважніше за іншу. Якщо сценарій потрапляє на