HTML5     GraphicsCreating Graphics from HTML5 is             круто!         by Tiang Cheng
Питання! (Questions)хто використовує JavaScript для роботи?(who uses javascript for work?)хто використовує jQuery animatio...
Хто я?Використовую HTML і Javascript з 1997Працював на 2 найбільші Австралійскі Internet Service ProviderТакож на владні с...
Я <3 програмуватиMicrosoft Platform. C#, .NET, Azure, HTML/Javascript.Менеджер проекту для TranslateKarateSoftware Service...
Тепер повчимось трохи про...Що таке векторна графіка (Vector graphics)Що таке растрова графіка (Bitmap graphics)Today we w...
Історія веб графіки ( Web Graphics)on the Web - 1980son the Web - 1980s     Спочатку був ASCII...
Історія Web Graphicson the Web - 1990son the Web - 1990s    Bitmaps, PNG, TIFF, JPEG    Rasterised
on the Web - 2000son the Web - 2000sFlash - Animations, graphics, sound! - Vector!on the Web - 2000s             http://ww...
on the Web -HTML5!!on the Web -HTML5!!Artisan JSEaselJSFabricJS
Давайте згадаємо про це (let’smention) і більше не будемо про це говорити....
(VML)   Microsoft’s idea of graphics standards   Works on IE7, IE8   ONLY on IE7, IE8.   Про це ми теж не будемо говорити....
on the Web -HTML5!!on the Web -HTML5!!
HTML5 Graphics -Canvas  Rasterised  Жахливо виглядає коли ви збільшуєте  зображення (cannot zoom)  Редагувати один елемент...
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 matters   13” Laptop Screen + Retina
Так і на мобільних пристроях     7” Tablet Screen     4.3” Phone screen     Landscape, and Portrait!
SVG Compatibility
CanvasCompatibility
Батько of RaphaelJSУкраїнський програмістДмитрій БарановськийПрацює у Sydney,Australia.Працював на Atlassian,Sencha, Singt...
Чому RaphaelJS?Слідує the HTML5 StandardНе потрібно створювати окреме “рішення” длярізних браузерів (no need customised co...
Raphael objectsКоло (Circle)Прямокутник (Rect)Еліпс (Ellipse)Зображення (Image)
Raphael Basics  Події (Events)  Атрибути (Attributes)
Demo of RaphaelJSДемо Австралії, що показує різні штати і event clicksПоказує JS code-behindПоказує DOM inspection
Цікаво...Але не дуже корисно
Введення у           gRaphaelJS     Векторна графіка (Vector Graphics)!
IntroducinggRaphael 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 Licensefor HTML/JS.
Contact me:Organise a PhoneGap Hackathon, or if youneed help with any of the topicswebsite: www.translateKarate.comemail: ...
Upcoming SlideShare
Loading in …5
×

HTML5 SVG Graphics @ Javascript Directions

448 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
448
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Been writing HTML and Javascript since 1997 Worked for Australia’s 2nd largest Internet Service Provider Also for Government, mining companies, consultancies I have also been a TV presenter for technology show Speaker at technical user groups Love to talk about software quality and heuristics!
  • My development background is in Microsoft Platform. C#, .NET, Azure. Of course HTML/Javascript. Project Manager for TranslateKarate Software Service to translate Websites, and Mobile Applications Also help businesses understand new technologies
  • Today we will learn about Vector Graphics and Bitmap Graphics
  • In the beginning
  • Interesting but not very useful
  • So, introducting Graphael
  • Dead project. :( :(:(
  • So we will use Document Driven Data (D3) Library instead!
  • D3.JS SVG Library Many Examples Data Visualisation
  • HTML5 SVG Graphics @ Javascript Directions

    1. 1. HTML5 GraphicsCreating Graphics from HTML5 is круто! by Tiang Cheng
    2. 2. Питання! (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?
    3. 3. Хто я?Використовую HTML і Javascript з 1997Працював на 2 найбільші Австралійскі Internet Service ProviderТакож на владні структури та приватні компаніїТакож був представником на телебаченні на шоу про технології(TV)Представник на технологічних користувацьких групах(user groups)Обожноюю говорити про якість програмного забезпечення тавимірювання!
    4. 4. Я <3 програмуватиMicrosoft Platform. C#, .NET, Azure, HTML/Javascript.Менеджер проекту для TranslateKarateSoftware Service to translate Websites, and MobileApplicationsТакож консультую бізнеси та допомагаю їм розумітита використовувати нові технології.
    5. 5. Тепер повчимось трохи про...Що таке векторна графіка (Vector graphics)Що таке растрова графіка (Bitmap graphics)Today we will learn about Vector Graphics and Bitmap Graphics
    6. 6. Історія веб графіки ( Web Graphics)on the Web - 1980son the Web - 1980s Спочатку був ASCII...
    7. 7. Історія Web Graphicson the Web - 1990son the Web - 1990s Bitmaps, PNG, TIFF, JPEG Rasterised
    8. 8. on the Web - 2000son the Web - 2000sFlash - Animations, graphics, sound! - Vector!on the Web - 2000s http://www.homestarrunner.com/sbemail45.html
    9. 9. on the Web -HTML5!!on the Web -HTML5!!Artisan JSEaselJSFabricJS
    10. 10. Давайте згадаємо про це (let’smention) і більше не будемо про це говорити....
    11. 11. (VML) Microsoft’s idea of graphics standards Works on IE7, IE8 ONLY on IE7, IE8. Про це ми теж не будемо говорити. :)
    12. 12. on the Web -HTML5!!on the Web -HTML5!!
    13. 13. HTML5 Graphics -Canvas Rasterised Жахливо виглядає коли ви збільшуєте зображення (cannot zoom) Редагувати один елемент? Неможливо (edit not possible) Переробляємо все зображення (repaint)
    14. 14. HTML5 Canvasзбільшене
    15. 15. HTML5 Graphics -SVG Vector Graphic Це як Flash, але простіше Використовує DOM Працює з DOM маніпуляціями!
    16. 16. HTML5 SVGзбільшене
    17. 17. of VectorПрикладGraphics using D3 Приклад Vector Graphics використовуючи D3 - http://www.koalastothemax.com/ Demo Zoom
    18. 18. Why vector >rasterised Якісно як на великих екранах upwards to Large TVs
    19. 19. Why vector >rasterised 27” LCD screen
    20. 20. DPI matters 13” Laptop Screen + Retina
    21. 21. Так і на мобільних пристроях 7” Tablet Screen 4.3” Phone screen Landscape, and Portrait!
    22. 22. SVG Compatibility
    23. 23. CanvasCompatibility
    24. 24. Батько of RaphaelJSУкраїнський програмістДмитрій БарановськийПрацює у Sydney,Australia.Працював на Atlassian,Sencha, Singtel, і теперяк Senior ComputerScientist at Adobe onW3C standards
    25. 25. Чому RaphaelJS?Слідує the HTML5 StandardНе потрібно створювати окреме “рішення” длярізних браузерів (no need customised code 4 browsers)Сумісний з різними браузерами. IE 6.0, iOS, AndroidChromeСлідкує за сумісністю з старими браузерами тазмінює до технології (Checks compatibility)
    26. 26. Raphael objectsКоло (Circle)Прямокутник (Rect)Еліпс (Ellipse)Зображення (Image)
    27. 27. Raphael Basics Події (Events) Атрибути (Attributes)
    28. 28. Demo of RaphaelJSДемо Австралії, що показує різні штати і event clicksПоказує JS code-behindПоказує DOM inspection
    29. 29. Цікаво...Але не дуже корисно
    30. 30. Введення у gRaphaelJS Векторна графіка (Vector Graphics)!
    31. 31. IntroducinggRaphael JS Не оновлювалось 1 рік...
    32. 32. Введення в D3.JS Оновлено (вчора!)
    33. 33. D3.JS Безліч документації та прикладів. https://github.com/mbostock/d3/wiki/Gallery
    34. 34. Demo of D3 Charts Bar graph Змінює the Dom object
    35. 35. Дякую! Thank You! Якісь запитання?
    36. 36. BONUS!!RPH USD$1895 Infragistics Ultimate License!
    37. 37. More Bonus!Everyone will have a free Infragistics IgniteUI Licensefor HTML/JS.
    38. 38. Contact me:Organise a PhoneGap Hackathon, or if youneed help with any of the topicswebsite: www.translateKarate.comemail: tiang@kaizenagency.com.autwitter: @tiangvk: vk.com/tiang

    ×