Downloaded 10 times
HTML5 SVG Graphics @ Javascript Directions
- 1. HTML5 Graphics Creating Graphics from HTML5 is круто! by Tiang Cheng
- 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. Хто я? Використовую HTMLі Javascript з 1997 Працював на 2 найбільші Австралійскі Internet Service Provider Також на владні структури та приватні компанії Також був представником на телебаченні на шоу про технології (TV) Представник на технологічних користувацьких групах (user groups) Обожноюю говорити про якість програмного забезпечення та вимірювання!
- 4. Я <3 програмувати MicrosoftPlatform. C#, .NET, Azure, HTML/Javascript. Менеджер проекту для TranslateKarate Software Service to translate Websites, and Mobile Applications Також консультую бізнеси та допомагаю їм розуміти та використовувати нові технології.
- 5. Тепер повчимось трохипро... Що таке векторна графіка (Vector graphics) Що таке растрова графіка (Bitmap graphics) Today we will learn about Vector Graphics and Bitmap Graphics
- 6. Історія веб графіки( Web Graphics) on the Web - 1980s on the Web - 1980s Спочатку був ASCII...
- 7. Історія Web Graphics onthe Web - 1990s on the Web - 1990s Bitmaps, PNG, TIFF, JPEG Rasterised
- 8. on the Web- 2000s on the Web - 2000s Flash - Animations, graphics, sound! - Vector! on the Web - 2000s http://www.homestarrunner.com/sbemail45.html
- 9. on the Web- HTML5!! on the Web - HTML5!! Artisan JS EaselJS FabricJS
- 10. Давайте згадаємо проце (let’s mention) і більше не будемо про це говорити....
- 11. (VML) Microsoft’s idea of graphics standards Works on IE7, IE8 ONLY on IE7, IE8. Про це ми теж не будемо говорити. :)
- 12. on the Web- HTML5!! on the Web - HTML5!!
- 13. HTML5 Graphics - Canvas Rasterised Жахливо виглядає коли ви збільшуєте зображення (cannot zoom) Редагувати один елемент? Неможливо (edit not possible) Переробляємо все зображення (repaint)
- 14.
- 15. HTML5 Graphics - SVG Vector Graphic Це як Flash, але простіше Використовує DOM Працює з DOM маніпуляціями!
- 16.
- 17. of Vector Приклад Graphics usingD3 Приклад Vector Graphics використовуючи D3 - http://www.koalastothemax.com/ Demo Zoom
- 18. Why vector > rasterised Якісно як на великих екранах upwards to Large TVs
- 19. Why vector > rasterised 27” LCD screen
- 20. DPI matters 13” Laptop Screen + Retina
- 21. Так і намобільних пристроях 7” Tablet Screen 4.3” Phone screen Landscape, and Portrait!
- 22.
- 23.
- 24. Батько of RaphaelJS Українськийпрограміст Дмитрій Барановський Працює у Sydney, Australia. Працював на Atlassian, Sencha, Singtel, і тепер як Senior Computer Scientist at Adobe on W3C standards
- 25. Чому RaphaelJS? Слідує theHTML5 Standard Не потрібно створювати окреме “рішення” для різних браузерів (no need customised code 4 browsers) Сумісний з різними браузерами. IE 6.0, iOS, Android Chrome Слідкує за сумісністю з старими браузерами та змінює до технології (Checks compatibility)
- 26. Raphael objects Коло (Circle) Прямокутник(Rect) Еліпс (Ellipse) Зображення (Image)
- 27. Raphael Basics Події (Events) Атрибути (Attributes)
- 28. Demo of RaphaelJS ДемоАвстралії, що показує різні штати і event clicks Показує JS code-behind Показує DOM inspection
- 29. Цікаво...Але не дужекорисно
- 30. Введення у gRaphael JS Векторна графіка (Vector Graphics)!
- 31. Introducing gRaphael JS Не оновлювалось 1 рік...
- 32. Введення в D3.JS Оновлено (вчора!)
- 33. D3.JS Безлічдокументації та прикладів. https://github.com/mbostock/d3/wiki/Gallery
- 34. Demo of D3Charts Bar graph Змінює the Dom object
- 35. Дякую! Thank You! Якісь запитання?
- 36. BONUS!! RPH USD$1895 InfragisticsUltimate License!
- 37. More Bonus! Everyone willhave a free Infragistics IgniteUI License for HTML/JS.
- 38. Contact me: Organise aPhoneGap Hackathon, or if you need help with any of the topics website: www.translateKarate.com email: tiang@kaizenagency.com.au twitter: @tiang vk: vk.com/tiang
Editor's Notes
- #4 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!
- #5 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
- #6 Today we will learn about Vector Graphics and Bitmap Graphics
- #7 In the beginning
- #30 Interesting but not very useful
- #31 So, introducting Graphael
- #32 Dead project. :( :(:(
- #33 So we will use Document Driven Data (D3) Library instead!
- #34 D3.JS SVG Library Many Examples Data Visualisation