Upload
tiang-cheng
View
246
Download
2
Embed Size (px)
Citation preview
HTML5 Graphics
Creating Graphics from HTML5 isкруто!
by Tiang Cheng
Питання! (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?
Хто я?
Використовую HTML і Javascript з 1997
Працював на 2 найбільші Австралійскі Internet Service Provider
Також на владні структури та приватні компанії
Також був представником на телебаченні на шоу про технології (TV)
Представник на технологічних користувацьких групах (user groups)
Обожноюю говорити про якість програмного забезпечення та вимірювання!
Я <3 програмувати
Microsoft Platform. C#, .NET, Azure, HTML/Javascript.
Менеджер проекту для TranslateKarate
Software Service to translate Websites, and Mobile Applications
Також консультую бізнеси та допомагаю їм розуміти та використовувати нові технології.
Тепер повчимось трохи про...
Що таке векторна графіка (Vector graphics)
Що таке растрова графіка (Bitmap graphics)
Today we will learn about Vector Graphics and Bitmap Graphics
Історія веб графіки ( Web Graphics)
on the Web - 1980s
Спочатку був ASCII...
Історія Web Graphics
on the Web - 1990s
Bitmaps, PNG, TIFF, JPEG
Rasterised
Історія веб графіки ( Web Graphics)
on the Web - 2000s
http://www.homestarrunner.com/sbemail45.html
Flash - Animations, graphics, sound! - Vector!
Майбутнє веб графіки
on the Web - HTML5!!
Artisan JS
EaselJS
FabricJS
Давайте згадаємо про це (let’s mention)
і більше не будемо про це говорити....
Vector Markup Language (VML)
Microsoft’s idea of graphics standards
Works on IE7, IE8
ONLY on IE7, IE8.
Про це ми теж не будемо говорити. :)
Майбутнє веб графіки (future)
on the Web - HTML5!!
HTML5 Graphics - Canvas
Rasterised
Жахливо виглядає коли ви збільшуєте зображення (cannot zoom)
Редагувати один елемент? Неможливо(edit not possible)
Переробляємо все зображення(repaint)
HTML5 Canvas збільшене
HTML5 Graphics - SVG
Vector Graphic
Це як Flash, але простіше
Використовує DOM
Працює з DOM маніпуляціями!
HTML5 SVG збільшене
Приклад of Vector Graphics using D3Приклад Vector Graphics використовуючи D3 -
http://www.koalastothemax.com/
Demo Zoom
Why vector > rasterised
Якісно як на великих екранах
upwards to Large TVs
Why vector > rasterised
27” LCD screen
DPI matters13” Laptop Screen + Retina
Так і на мобільних пристроях
7” Tablet Screen
4.3” Phone screen
Landscape, and Portrait!
SVG Compatibility
Canvas Compatibility
Батько of RaphaelJS
Український програміст Дмитрій Барановський
Працює у Sydney, Australia.
Працював на Atlassian, Sencha, Singtel, і тепер як Senior Computer Scientist at Adobe on W3C standards
Чому RaphaelJS?
Слідує the HTML5 Standard
Не потрібно створювати окреме “рішення” для різних браузерів (no need customised code 4 browsers)
Сумісний з різними браузерами. IE 6.0, iOS, Android Chrome
Слідкує за сумісністю з старими браузерами та змінює до технології (Checks compatibility)
Raphael objectsКоло (Circle)
Прямокутник (Rect)
Еліпс (Ellipse)
Зображення (Image)
Raphael Basics Події (Events)
Атрибути (Attributes)
Demo of RaphaelJS
Демо Австралії, що показує різні штати і event clicks
Показує JS code-behind
Показує DOM inspection
Цікаво...Але не дуже корисно
Введення у gRaphael JS
Векторна графіка (Vector Graphics)!
Introducing gRaphael JS
Не оновлювалось 1 рік...
Введення в D3.JSОновлено (вчора!)
D3.JSБезліч документації та прикладів.
https://github.com/mbostock/d3/wiki/Gallery
Demo of D3 Charts
Bar graph
Змінює the Dom object
Дякую! Thank You!
Якісь запитання?
BONUS!!RPH USD$1895 Infragistics Ultimate License!
More Bonus!
Everyone will have a free Infragistics IgniteUI License for HTML/JS.
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