HTML5+svg[2]+css3+ecmascript5+domL2/L3

építsünk egy sokkal szebb webet

Microsoft mondások fejlesztőknek: HTML5 és társai az IE 9-ben

6 hozzászólás


[A web szépsége, az IE 9 Guide for Developers, az IE Developer Center és az ie9blog Microsoft oldalak szerint]

A web már most is csodálatos, de szinte határtalan, további lehetőségeket tartogat. Az Internet Explorer 9 azért készült, hogy ezek a lehetőségek felszínre kerülhessenek. Ennek érdekében a HTML5 szabványt és társait az Internet Explorer 9 nem csak támogatja, de fel is turbózza. A Windows operációs rendszeren keresztül hozzáférhető grafikus processzor (az úgynevezett GPU — Graphics Processing Unit) nagy párhuzamosságú feldolgozási lehetőségeinek kiaknázásával, a grafika, a szöveg és a videó megjelenítése gyorsabb és zökkenőmentesebb. Platformszintű továbbfejlesztések, köztük a Chakra (az új JavaScript motor) és az új DOM modell révén olyan webhelyek hozhatók létre, amelyek működése a felhasználó számítógépén telepített natív alkalmazásokéhoz hasonló.

Jobbra fent láthatjuk egy HTML5 könyvolvasó alkalmazás megjelenési képét, lent pedig egy HTML5 mesefilm tartalomszolgáltató megoldásét. Az előbbi mellesleg egyike az első ilyen megoldásoknak a világon (ha nem az első), míg az utóbbi jól érzékelhető minőségi különbséget képvisel az eddigi webes megoldással szemben. Mindkettő hazai igények kielégítésére szolgáló, magyar fejlesztés, ami úgy az új igények megléte, mint azok hazai forrásból való kielégíthetősége szempontjából jó példával szolgál. Mindkettő az illusztrációs képre kattintással elérhető és kipróbálható. Feltétel: Getting the Most from IE9 and Your GPU (2011. április 1.)

A Web szépsége sokéves platformmérnöki munka eredményeként

A következő generációs web által nyújtott gazdagságot érdemes A web szépsége című bemutató hely lapjainak bejárásával megismerni, ahol mintaértékű példák — mint a fenti képre kattintással közvetlenül elérhető ie9.mese.tv — és videók is megtalálhatók. Az alábbi fejezetek a legújabb webes technológiák szempontjából nyújtanak áttekintést a fejlesztők számára. Teljes körű fejlesztői információt az Internet Explorer 9 Guide for Developers (2011. március 14.) című on-line kiadványban és az  Internet Explorer Developer Center-ben lehet találni.

Igen fontos IE9 információk jelentek meg az IE Engineering Team Blog-on is, amelyről külön összefoglaló bejegyzés számol be Blogging IE9: A Year in Review (2011. március 9.) címmel, az alábbi részletezés szerint:

  • Releases & Updates: IE9 from an Early Look to Release Candidate
  • Feedback & Voice: Engaging the Community
  • Performance and Measurement: Building a Faster Browser to Enable a Faster Web
  • The Platform, Web Standards, and Developers
  • Safety & Privacy, and the Sometimes Hostile Web
  • Consumer Experiences: A Browser for the People who Browse

Az egyes fejezetek végén a legfontosabb IE9 blogbejegyzésekre és néhány más műszaki bejegyzésre külön is utalunk. Eközben pedig ne feledjük el, hogy a legmélyebb hardver szinttől kezdve körülbelül három és fél év szoftver mérnöki munkája fekszik a 2011. március 14-én kiadott Internet Explorer 9-ben, melynek fejlesztéséről az ezt megelőző egy év és 5 hónap során rengeteget kommunikált műszaki szempontból a Microsoft. Ezt a mély-kommunikációt az An Early Look At IE9 for Developers (2009. november 18.) című bejegyzés indította el, amit mindenképpen érdemes elsőként elolvasni azoknak, akik nem követték ezt az egész IE9 műszaki kommunikációt annak fejlesztése során.

Egységes jelölés (markup), kevesebb pluszmunka

A webböngészőktől elvárják, hogy az azonos jelöléseket – azonos HTML-kódot, CSS-stíluslapokat és szkripteket – azonos módon jelenítsék meg. A szabványokat fejlesztő közösség tagjai közötti együttműködés a böngészők közötti kölcsönös használhatóság céljait szolgálja. Ennek megfelelően a Microsoft aktívan részt vesz a CSS3 és az SVG szabványokat kifejlesztő munkacsoportok tevékenységében, vezető szerepet játszik a HTML5 munkacsoportban és a HTML5 tesztelésével foglalkozó csapatban, így tevékenyen segíti a modern web szabványainak kialakítását.

Az Internet Explorer 9 böngészőben megbízható, tartós iparági szabványokat alkalmazott a Microsoft, így hozzájárul az egységes jelölések böngészők közötti egységes működésének biztosításához. Az Internet Explorer 9 beépítve tartalmazza az iparági szabványok támogatását. A HTML5, SVG, CSS3, ECMAScript5, DOM L2/L3 és ICC színprofilok kiterjedt támogatása egész sor új képességgel segíti a fejlesztőket abban, hogy olyan egységes jelölőkészletet készíthessenek, amely minden modern böngészőben biztosan azonos módon működik és jelenik meg.

Ha a webhelyek különféle böngészőkhöz történő átírása és optimalizálása kevesebb időt rabol el, akkor a fejlesztőknek több idejük lesz az eddigiekhez képest bámulatosnak mondható webes élmények megalkotására. A szabványokba és a kölcsönös átjárhatóságba fektetett munka révén a cég remélhetőleg hozzájárul a webfejlesztés kiszámíthatóbbá tételéhez is.

További információ:
Working with the HTML5 Community (2010. március 9.)
Same Markup: Writing Cross-Browser Code (2010. április 14.)
HTML5 and Same Markup: Second IE9 Platform Preview Available for Developers (2010. május 5.)
DOM Range and HTML5 Selection (2010. május 12.)
Same Markup: Using <canvas>, <audio>, and <video> (2010. szeptember 3.)
Same Markup: Explaining “@_jscript_version” and Styling New HTML5 Elements (2010. június 10.)
Summarizing Common Browser Tests (2011. február 9.)
jQuery 1.5.1 Supports IE9 (2011. március 2.)
Preparing Your Site for IE9 (2011. március 18.)
W3C (minden ez irányú bejegyzés az IE Engineering Team Blog-ról)
ES5 [ECMAScript 5] (minden ez irányú bejegyzés az IE Engineering Team Blog-ról)
Compatibility (minden ez irányú bejegyzés az IE Engineering Team Blog-ról)
Testing (minden ez irányú bejegyzés az IE Engineering Team Blog-ról)

HTML5

Az Internet Explorer 9 a HTML5 funkciók Internet Explorer 8 böngészőben történt megvalósításának munkájára épül, és számos igényes jellemzővel is bővült.

  • A video- és hangelemek támogatása a weboldalakon natív, hardveres gyorsítású video- és hangtartalmak bővítményt nem igénylő elhelyezését teszi lehetővé. A fejlesztők a video- vagy hangklipeket már ugyanolyan egyszerűen a weboldalakba illeszthetik, mint a képeket. Lásd: HTML5 video and audio Elements.
  • Ezen felül, a canvas elem támogatása könnyed és dinamikus grafika előállítását teszi lehetővé, a Windows operációs rendszeren és a grafikus kártyán keresztül megvalósított hardveres gyorsítás előnyeinek kiaknázásával. Lásd: HTML5 canvas Element.
  • Emellett a Selection API-k támogatása révén lehetőség nyílik a weboldalon belüli szövegek programozási kijelölésére, a HTML értelmezés javításai pedig a HTML fejlesztéseket segítenek sokoldalúbbá tenni. Lásd: HTML5 Selection APIs.
  • Más: HTML5 Geolocation, HTML Parsing Improvements, HTML5 Semantic Elements

További információ:
HTML5
Working with the HTML5 Community (2010. március 9.)
Same Markup: Explaining “@_jscript_version” and Styling New HTML5 Elements (2010. június 10.)
Same Markup: Using <canvas>, <audio>, and <video> (2010. szeptember 3.)
XHTML in IE9 (2010. november 1.)

SVG

  • Basic shapes: rectangles, circles, ellipses, lines, polylines, and polygons
  • Clipping, masking, and compositing
  • Coordinate systems, transforms, and units
  • Document structure, metadata, and extensibility functionality
  • Gradients and patterns
  • Interactivity
  • Linking and views
  • Painting and color
  • Paths, including full capabilities of the path element and d attribute
  • Text

További információ: Scalable Vector Graphics (SVG)

CSS3

  • Rounded corners via the border-radius property
  • CSS3 background and border features
  • The opacity property
  • RGBA, HSL, and HSLA color models
  • CSS3 fonts properties and new web font formats
  • CSS3 media queries
  • CSS3 namespaces
  • CSS3 values and units
  • CSS3 selectors

További információ: Cascading Style Sheets, Level 3 (CSS3)

Samples on the Internet Explorer Developer Center (as of March 27, 2011)

HTML5

CSS3

Canvas & SVG

IMDb Video Panorama Demo
This sample will require an HTML5-compatible browser, such as Internet Explorer 9 Beta or Internet Explorer 9 Platform Preview.

X

X

IE Beatz Canvas Demo
This sample will require an HTML5-compatible browser, such as Internet Explorer 9 Beta or Internet Explorer 9 Platform Preview.

X

X

X

HTML5 Audio Player + XML Playlist
A simple audio player built using the audio element and IE9’s improved XML support. This sample will require an HTML5-compatible browser, such as Internet Explorer 9 Beta or Internet Explorer 9 Platform Preview.

X

X

Mr. Potato Gun Canvas Demo
This sample will require an HTML5-compatible browser, such as Internet Explorer 9 Beta or Internet Explorer 9 Platform Preview.

X

Canvas Pad: Learn and Play with HTML5 Canvas!
Update the code and press the ‘Ctrl+Enter’ key to update the Canvas real-time! This sample will require an HTML5-compatible browser, such as Internet Explorer 9 Beta or Internet Explorer 9 Platform Preview.

X

Canvas Zoom sample powered by Seadragon Ajax
This sample will require an HTML5-compatible browser, such as Internet Explorer 9 Beta or Internet Explorer 9 Platform Preview.

X

SVG–oids Canvas Sample
This re-creation of a classic 1979 arcade game shows what can be done with a little bit of SVG, JavaScript, and programming skill. This sample will require an HTML5-compatible browser, such as Internet Explorer 9 Beta or Internet Explorer 9 Platform Preview.

X

ECMAScript 5

There are many important ECMAScript 5 features implemented in Internet Explorer 9, including the following:

  • New array methods:
    every, filter, forEach, indexOf, isArray, lastIndexOf, map, reduce, reduceRight, some
  • Enhanced object model and object functions:
    Object.create, Object.defineProperties, Object.defineProperty, Object.freeze, Object.getOwnPropertyDescriptor, Object.getOwnPropertyNames, Object.getPrototypeOf, Object.isExtensible, Object.isFrozen, Object.isSealed, Object.keys, Object.preventExtensions, Object.seal
  • Other computational methods and functions:
    Date.now, Date.parse support for ISO Date Format, Date.toISOString, Function bind, String trim

További információ:
ECMAScript 5
Same Markup: Explaining “@_jscript_version” and Styling New HTML5 Elements (2010. június 10.)
How IE9 Platform Preview Feedback Changed the JavaScript Standard (2010. július 16.)
ES5 [ECMAScript 5] (minden ez irányú bejegyzés az IE Engineering Team Blog-ról)

DOM L2/L3

  • DOM Core (L2, L3) and Views (L2)
  • DOM Element Traversal
  • DOM Events (L2, L3)
  • DOM L2 HTML
  • DOM L2 Style
  • DOM L2 Traversal and Range

További információ:
Document Object Model Improvements
DOM Range and HTML5 Selection (2010. május 12.)
DOM (minden ez irányú bejegyzés az IE Engineering Team Blog-ról)

Minden szempontból gyors

A mai webhelyek és böngészők a felhasználók számítógépei által nyújtott feldolgozási teljesítménynek csupán kb. 10%-át hasznosítják. Az Internet Explorer 9 felszabadítja a többi 90%-át is. Az Internet Explorer 9 segítségével, a Windows operációs rendszeren át hozzáférhetővé válik számunkra a grafikus processzor, hogy teljesen kihasználhassuk a PC erejét. Mindez simább HD videolejátszást, valósághűbb színeket, tisztább grafikát és jobban reagáló webhelyeket eredményez. Az új JavaScript motorral ötvözött web már szinte a közvetlenül a számítógépekre telepített alkalmazásokhoz hasonlóan működhet.

Számos további lehetőséget alkalmazott a Microsoft a célok eléréséhez vezető kattintások számának csökkentése érdekében is. A kedvenc webhelyek a Tálcához rögzíthetők, és onnan egyetlen kattintással elérhetők. Új lap oldalak jelenítik meg a leggyakrabban felkeresett webhelyeket. Az értesítéseket pedig áthelyezték a lap aljára, és azok egyértelműbb utasításokat tartalmaznak. Ezek a teljesítményfokozással társított, új funkciók igazán gyors webböngészési élményt nyújtanak Önnek.

További információ:
Focusing on Real World Web Performance with Internet Explorer 9 (2011. február 8.)
PDC10: Inside Internet Explorer Performance (benne a hardvergyorsítás leírása is, 2010. november 1.), az előadás videó felvétele [1:16:48], vázlatos szerkezete
Performance (minden ez irányú bejegyzés az IE Engineering Team Blog-ról)

Hardveresen gyorsított szöveg, videó és grafika

Az Internet Explorer 9 böngésző új grafikus képességei és fokozott teljesítménye megragadó és sokrétű élményeket biztosít. A hardveresen gyorsított szöveg, videó és grafika azt eredményezi, hogy a felkeresett webhelyek a Windows alapú számítógépre telepített alkalmazásokhoz hasonlóan működhetnek. A nagy felbontású (HD) videók lejátszása zökkenőmentes, áttekinthetőbb és könnyebben használható a grafika, valósághűbbek a színek és interaktívabbak a webhelyek. A webböngészés élményét a modern többmagos processzorok teljesítményére támaszkodva hihetetlenül felgyorsító, új JavaScript motor és más alrendszerek továbbfejlesztése révén, a webhelyek és az alkalmazások gyorsabban töltődnek be és fürgébben reagálnak. A Windows operációs rendszerben a legjobb webes élményt a Windows 7 erőteljes grafikus képességeivel párosított Internet Explorer 9 böngésző nyújtja.

További információ:
Comparing Hardware Accelerated SVG across Browsers with Santa’s Workshop (2011. március 9.): ugyanazon a hardveren az IE9 RC-n futó alkalmazásban 50 törpe 238 ajándékot csomagol be percenként, a Chrome  10 Canary változaton futó alkalmazás ugyanakkor csak “15 törpe 71 ajándékot csomagol be percenként” teljesítményre képes, míg a Firefox 4 Beta 12 változaton futó még ennél is kevesebb, “1 törpe 4 ajándékot csomagol be percenként” teljesítményre, de mindössze 13 fps-sel (szemben az előző esetek 55 fps-hez közelítő “megjelenítési sebességével”), végül pedig a Safari  5 1 törpe 4 ajándékot csomagol be percenként” teljesítményre, az előzőnél viszont nagyobb 20 fps-sel.
IE 9: Surfing on the GPU with D2D (Channel9 videó [13:45], 2009. november 18.): ebben a videóban bemutatták a Windows 7-ben megjelent Direct 2D-re épülő grafikai gyorsítások jellemző eseteit, mint a subpixel positioning, rounded corners, scaling images (like maps with zooming and panning around), melyek már a felvétel idején, azaz egy évvel és öt hónappal ezelőtt lenyűgözően gyorsak voltak. Ha valaki megnézi ezt a felvételt még hitelesebbnek fogja találni a végső változat döbbenetes hardver gyorsítási benchmark eredményeit. (ld. az előző “Santa’s Workshop — Télapó műhelye” eredményt).
IE 9 – Surf on Metal with GPU Powered HTML5 (Channel9 videó [14:31], 2010. március 16.)
PDC10: Inside Internet Explorer Performance (benne a hardvergyorsítás leírása is, 2010. november 1.), az előadás videó felvétele [1:16:48], vázlatos szerkezete
Hardware acceleration (minden ez irányú bejegyzés az IE Engineering Team Blog-ról)

Teljesítménybeli fejlesztések

A minden szempontból gyors Windows Internet Explorer® grafikában gazdag és magával ragadó élményt nyújt, amely ugyanolyan gyors és élénk, mint a számítógépre telepített alkalmazások esetében. Az Internet Explorer 9 böngésző jelentős teljesítménybeli fejlesztésekkel rendelkezik, amelyek révén az Internet Explorer fürgén indul és fürgén is dolgozik.

Chakra, az új JavaScript motor

A Windows-élményt mérő, saját Windows Experience Index adatok alapján kitűnik, hogy a Windows Vista és Windows 7 operációs rendszerrel futó, modern számítógépek — átlagosan — 2,42 processzormaggal rendelkeznek. E többmagos rendszerek előnyeinek kihasználására optimalizálta a Microsoft a Chakra nevű, új JavaScript motort, ami a JavaScript-kódot a háttérben alakítja igen hatékony gépi kóddá, miközben a JavaScript-kód értelmezését az előtérben végzi. A fordítás végén a Chakra átvált az adott számítógépre optimalizált, lefordított, és jelentősen gyorsabb gépi kódra.

További információ:
PDC10: Unlocking the JavaScript Opportunity with IE9 (benne található a Chakra architekturális leírása is, 2010. november 1.), az előadás videófelvétele [1:09:12], vázlatos szerkezete
PDC10: Inside Internet Explorer Performance (benne a hardvergyorsítás leírása is, 2010. november 1.), az előadás videó felvétele [1:16:48], vázlatos szerkezete
The New JavaScript Engine in Internet Explorer 9 (2010. március 18.)
JavaScript: Same Code, and a Standardized Test Suite (2010. június 25.)
How IE9 Platform Preview Feedback Changed the JavaScript Standard (2010. július 16.)
Chakra: Interoperability Means More Than Just Standards (2010. augusztus 26.)

Noha a Chakra motorral kapcsolatos teljesítményfejlesztéseknek nem célja, de a háttérben történő fordítás és számos más fejlesztés révén, az Internet Explorer 9 előkelő helyezéseket ér el a népszerű JavaScript teljesítménymérőknél, pl. a WebKit SunSpider tesztjeiben.

A legfrissebb eredmények megtekintése

A beépített F12 fejlesztőeszközök felgyorsítják a hibakeresést

Az Internet Explorer 9 letöltésével Ön többet kap egy egyszerű böngészőnél: hozzájut új, erőteljes F12 fejlesztőeszközök továbbfejlesztett készletéhez is. Ezek az eszközök a kódnak magán a böngészőn belüli módosíthatósága és gyors előnézete révén nyújtanak segítséget weboldalai próbaváltozatának gyors elkészítéséhez, teszteléséhez és hibakereséséhez. Az eszközök között megtalálható egy továbbfejlesztett JavaScript profiler, CSS szerkesztés, hálózati forgalom-figyelő, az Internet Explorer 9 böngészővel bemutatkozó új webes szabványok beépített támogatása és egyéb lehetőségek is.

További információ: New Tools for Web Developers

Written by Nacsa Sándor

2011. április 14. csütörtök - 07:38

Kategória: Uncategorized

6 hozzászólás

Subscribe to comments with RSS.

  1. […] A fentiek hátterét megvilágító, további részletek: Microsoft mondások fejlesztőknek: HTML5 és társai az IE9-ben […]

  2. Nagyon megörültem, amikor a:
    További információ: Cascading Style Sheets, Level 3 (CSS3)

    és a

    További információ:
    – HTML5

    linkek fölé érve láttam, hogy http://msdn.microsoft.com/hu-hu/ kezdetű címekre mutat.

    Aztán lelohadt a mosoly az arcomról, mikor behívtam a linkeket, mert a szövegek nem hu-huk voltak, hanem eng-engek.

    Minek tárhelyet pazarolni erre? Egyszerűbb lett volna az eredeti angol linkeket megadni.

    Szakály György

    2011. április 21. csütörtök at 12:46

    • Örülök, hogy szükségesnek látszottak a kérdéses információk.

      Ami a http://msdn.microsoft.com/hu-hu/-s kezdetű címzést illeti, ha ennyire megtévesztő és zavaró, azt őszintén sajnálom. Mint a jelenlegi html5.wordpress.com tartalmak “elkövetője” nem tettem semmit azért, hogy “hu-hu”-s legyen. Egyszerűen felfogni sem tudom, hogyan keveredtek oda ezek, mivel emlékeim szerint a saját gépemen írtam az ominózus oldalt, ott pedig mindenütt “eng” van. Persze az is lehet, hogy rosszul emlékszem, és a feleségemén tettem ezt, ahol minden magyar.

      Ha lesz időm erre kijavítom.

      nacsa

      2011. április 21. csütörtök at 13:02

  3. […] eredmények és elhangzott gondolatok nagy része megtalálható a következő cikkbe is: https://html5hu.wordpress.com/2011/04/14/microsoft-mondasok-fejlesztoknek-html5-es-tarsai-az-ie-9-ben Böngészés Previous: Mondja, kedves Watson…A X. SPSS Adatbányászati konferencián […]

    HTML5 konferencia | U1 Research MAGYAR

    2011. május 12. csütörtök at 09:47

  4. […] (2011. május 29.) – Mit kínál a HTML5 alapú fejlesztés 2011-ben? (2011. április 14.) – Microsoft mondások fejlesztőknek: HTML5 és társai az IE 9-ben (2011. április 14.) – HTML5 konferencia felvételről (2011. május […]

  5. […] ezt és más vonatkozásokat a tavaly májusi HTML5 konferencia "Microsoft mondásai" között és felvételeiben lehet […]


Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: