html5 svg graphics @ javascript directions

38
HTML5 Graphics Creating Graphics from HTML5 is круто! by Tiang Cheng

Upload: tiang-cheng

Post on 17-May-2015

243 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: HTML5 SVG Graphics @ Javascript Directions

HTML5 Graphics

Creating Graphics from HTML5 isкруто!

by Tiang Cheng

Page 2: HTML5 SVG Graphics @ Javascript Directions

Питання! (Questions)

хто використовує JavaScript для роботи?(who uses javascript for work?)

хто використовує jQuery animation i jQueryUI?Who uses jQuery and jQuery UI/Mobile?

хто використовує графіку? Who uses graphics

Ви використовуєте Canvas? чи SVG?Do you use Canvas? or SVG?

Page 3: HTML5 SVG Graphics @ Javascript Directions

Хто я?

Використовую HTML і Javascript з 1997

Працював на 2 найбільші Австралійскі Internet Service Provider

Також на владні структури та приватні компанії

Також був представником на телебаченні на шоу про технології (TV)

Представник на технологічних користувацьких групах (user groups)

Обожноюю говорити про якість програмного забезпечення та вимірювання!

Page 4: HTML5 SVG Graphics @ Javascript Directions

Я <3 програмувати

Microsoft Platform. C#, .NET, Azure, HTML/Javascript.

Менеджер проекту для TranslateKarate

Software Service to translate Websites, and Mobile Applications

Також консультую бізнеси та допомагаю їм розуміти та використовувати нові технології.

Page 5: HTML5 SVG Graphics @ Javascript Directions

Тепер повчимось трохи про...

Що таке векторна графіка (Vector graphics)

Що таке растрова графіка (Bitmap graphics)

Today we will learn about Vector Graphics and Bitmap Graphics

Page 6: HTML5 SVG Graphics @ Javascript Directions

Історія веб графіки ( Web Graphics)

on the Web - 1980s

Спочатку був ASCII...

Page 7: HTML5 SVG Graphics @ Javascript Directions

Історія Web Graphics

on the Web - 1990s

Bitmaps, PNG, TIFF, JPEG

Rasterised

Page 8: HTML5 SVG Graphics @ Javascript Directions

Історія веб графіки ( Web Graphics)

on the Web - 2000s

http://www.homestarrunner.com/sbemail45.html

Flash - Animations, graphics, sound! - Vector!

Page 9: HTML5 SVG Graphics @ Javascript Directions

Майбутнє веб графіки

on the Web - HTML5!!

Artisan JS

EaselJS

FabricJS

Page 10: HTML5 SVG Graphics @ Javascript Directions

Давайте згадаємо про це (let’s mention)

і більше не будемо про це говорити....

Page 11: HTML5 SVG Graphics @ Javascript Directions

Vector Markup Language (VML)

Microsoft’s idea of graphics standards

Works on IE7, IE8

ONLY on IE7, IE8.

Про це ми теж не будемо говорити. :)

Page 12: HTML5 SVG Graphics @ Javascript Directions

Майбутнє веб графіки (future)

on the Web - HTML5!!

Page 13: HTML5 SVG Graphics @ Javascript Directions

HTML5 Graphics - Canvas

Rasterised

Жахливо виглядає коли ви збільшуєте зображення (cannot zoom)

Редагувати один елемент? Неможливо(edit not possible)

Переробляємо все зображення(repaint)

Page 14: HTML5 SVG Graphics @ Javascript Directions

HTML5 Canvas збільшене

Page 15: HTML5 SVG Graphics @ Javascript Directions

HTML5 Graphics - SVG

Vector Graphic

Це як Flash, але простіше

Використовує DOM

Працює з DOM маніпуляціями!

Page 16: HTML5 SVG Graphics @ Javascript Directions

HTML5 SVG збільшене

Page 17: HTML5 SVG Graphics @ Javascript Directions

Приклад of Vector Graphics using D3Приклад Vector Graphics використовуючи D3 -

http://www.koalastothemax.com/

Demo Zoom

Page 18: HTML5 SVG Graphics @ Javascript Directions

Why vector > rasterised

Якісно як на великих екранах

upwards to Large TVs

Page 19: HTML5 SVG Graphics @ Javascript Directions

Why vector > rasterised

27” LCD screen

Page 20: HTML5 SVG Graphics @ Javascript Directions

DPI matters13” Laptop Screen + Retina

Page 21: HTML5 SVG Graphics @ Javascript Directions

Так і на мобільних пристроях

7” Tablet Screen

4.3” Phone screen

Landscape, and Portrait!

Page 22: HTML5 SVG Graphics @ Javascript Directions

SVG Compatibility

Page 23: HTML5 SVG Graphics @ Javascript Directions

Canvas Compatibility

Page 24: HTML5 SVG Graphics @ Javascript Directions

Батько of RaphaelJS

Український програміст Дмитрій Барановський

Працює у Sydney, Australia.

Працював на Atlassian, Sencha, Singtel, і тепер як Senior Computer Scientist at Adobe on W3C standards

Page 25: HTML5 SVG Graphics @ Javascript Directions

Чому RaphaelJS?

Слідує the HTML5 Standard

Не потрібно створювати окреме “рішення” для різних браузерів (no need customised code 4 browsers)

Сумісний з різними браузерами. IE 6.0, iOS, Android Chrome

Слідкує за сумісністю з старими браузерами та змінює до технології (Checks compatibility)

Page 26: HTML5 SVG Graphics @ Javascript Directions

Raphael objectsКоло (Circle)

Прямокутник (Rect)

Еліпс (Ellipse)

Зображення (Image)

Page 27: HTML5 SVG Graphics @ Javascript Directions

Raphael Basics Події (Events)

Атрибути (Attributes)

Page 28: HTML5 SVG Graphics @ Javascript Directions

Demo of RaphaelJS

Демо Австралії, що показує різні штати і event clicks

Показує JS code-behind

Показує DOM inspection

Page 29: HTML5 SVG Graphics @ Javascript Directions

Цікаво...Але не дуже корисно

Page 30: HTML5 SVG Graphics @ Javascript Directions

Введення у gRaphael JS

Векторна графіка (Vector Graphics)!

Page 31: HTML5 SVG Graphics @ Javascript Directions

Introducing gRaphael JS

Не оновлювалось 1 рік...

Page 32: HTML5 SVG Graphics @ Javascript Directions

Введення в D3.JSОновлено (вчора!)

Page 33: HTML5 SVG Graphics @ Javascript Directions

D3.JSБезліч документації та прикладів.

https://github.com/mbostock/d3/wiki/Gallery

Page 34: HTML5 SVG Graphics @ Javascript Directions

Demo of D3 Charts

Bar graph

Змінює the Dom object

Page 35: HTML5 SVG Graphics @ Javascript Directions

Дякую! Thank You!

Якісь запитання?

Page 36: HTML5 SVG Graphics @ Javascript Directions

BONUS!!RPH USD$1895 Infragistics Ultimate License!

Page 37: HTML5 SVG Graphics @ Javascript Directions

More Bonus!

Everyone will have a free Infragistics IgniteUI License for HTML/JS.

Page 38: HTML5 SVG Graphics @ Javascript Directions

Contact me:Organise a PhoneGap Hackathon, or if you need help with any of the topics

website: www.translateKarate.com

email: [email protected]

twitter: @tiang

vk: vk.com/tiang