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

építsünk egy sokkal szebb webet

HTML5 mint univerzális platform: van-e alternatívája?

with 9 comments


Ezt kell minden fejlesztőnek és fejlesztő műhelynek vizsgálnia a HTML5 lehetőségek kezdeti megértése után, amennyiben élni akar 2012 és az ezt követő új időszak, új lehetőségeivel.

A kérdésre adandó válaszhoz a lakmusz tesztem az, hogy az intelligens web/felhő kliensek területén jelentkező univerzális fejlesztési platform igényeket mennyire lehet mondjuk legkésőbb 2012 elejéig kielégíteni HTML5 és technológiai társai alapján kialakított megoldással, szemben a hagyományosakkal. Az utóbbi vonatkozásában én itt most csak a .NET-et veszem alapul, ami egyéb technológiai vonatkozásban talán a legsikerültebb megoldás, a hagyományos kliens (ide értve a RIA-at is) platform tekintetben pedig messze a legnagyobb lefedettséget biztosítja a fejlesztőknek.

Az alábbiak csak ennek a lakmusz tesztnek az eredményét mutatják. Az ebből hosszabb távra szólóan adandó végső választ mindenkinek saját magának kell megfogalmaznia annak alapján, hogy az itt szereplő, embrionális HTML5 kihasználtságból mennyi idő alatt és milyen ütemezésben lehet majd eljutni ahhoz az állapothoz (univerzális platform tekintetben), amit a W3C HTML5 ütemterve (végső dátum: 2014) és az ennél szélesebb Open Web Platform tervezete (aminek még ütemterve sincs)  majd lehetővé tesz. Az utóbbi becslésére jelenleg egyedüli, részletes és hiteles áttekintésként a Standards for Web Applications on Mobile — February 2011 current state and roadmap-ot (Dominique Hazaël-Massieux, W3C — PDF) ajánlanám.

HTML5

  • Még alacsony elterjedtség a webhelyeken is:

HTML5 Specific Tags Usage Statistics by BuiltWith Trends -- 16-May-2011

  • Ugyanakkor óriási, látens HTML5 igény alakult ki az intelligens web/felhő kliensek univerzális platformjaként való használatra. Egyedül az okostelefonok piacán óriási fejlesztési platform különbségek alakultak ki 2010 és 2011 időszakára, és az ehhez vezető trendek a PC és a Media Tablet piacok előrejelzéseiben is hasonló megosztottságot prognosztizálnak :

  • jQuery Mobile Graded Browser Support -- 23-May-2011 Egy legkésőbb 2012 elején várható, nagy jelentőségű 1.0-ás megjelenés jól példázza a most még csak embrionális formában kielégíthető HTML5 univerzális platform lehetőségeket (a pirossal való alábbi kiemelések tőlem származnak, egyúttal a HTML5 / CSS3 lehetőségek még viszonylag minimális, de lényegi használatát mutatják):

    jQuery Mobile (az univerzalitást a jobboldali ábra mutatja)

http://jquerymobile.com/
Touch-Optimized Web Framework for Smartphones & Tablets

A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. jQuery Mobile 1.0 Alpha 4.1 Release Note [“As of A4, we are feature-complete for 1.0 and are focusing on perfomance, compatibility, bug fixes, API improvements, and documentation”] [jQuery Mobile team update – Week of May 16th: “…we’re getting close to our first beta release … we’re hoping to release at the end of May or early June.”]

Seriously cross-platform & cross-device

jQuery mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms. Device support grid [a jobboldalt fenn látható ábrát magában foglaló weboldal]

Touch-optimized layouts & UI widgets

Our aim is to provide tools to build dynamic touch interfaces that will adapt gracefully to a range of device form factors. The system will include both layouts (lists, detail panes, overlays) and a rich set of form controls and UI widgets (toggles, sliders, tabs). Demos

Themable designs: Bigger and better

To make building mobile themes easy, we’re dramatically expanding the CSS framework to have the power to design full applications. For more polished visuals without the bloat, we added support for more CSS3 properties like text-shadow, box-shadow, and gradients.

Key features:
  • Built on jQuery core for familiar and consistent jQuery syntax and minimal learning curve
  • Compatible with all major mobile platforms – iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile [Windows Phone], bada, MeeGo with baseline support for all devices that understand HTML
  • Lightweight size (12k compressed for all mobile functionality) and minimal image dependencies for speed.
  • HTML5 Markup-driven configuration of pages and behavior for fast development and minimal required scripting.
  • Progressive enhancement approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.
  • Automatic initialization by using HTML5 data-role attributes in the HTML markup to act as the trigger to automatically initialize all jQuery Mobile widgets found on a page.
  • Accessibility features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.
  • New events streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API.
  • New plugins enhance native controls with touch-optimized, themable controls.
  • Powerful theming framework and ThemeRoller application make highly-branded experiences easy to build.
Theming overview

Every layout and widget in jQuery Mobile is designed around a new object-oriented CSS framework that makes it possible to apply a complete unified visual design Theme to sites and applications. The theming system is similar to the ThemeRoller system in jQuery UI, but adds a few important improvements:

  • It takes advantage of CSS3 properties to add rounded corners, box and text shadow and gradients instead of images, allowing the theme file to be very lightweight and reducing server requests.
  • Themes include multiple color “swatches” — each consisting of a header bar, content body, and button states that can be freely mixed and matched to create visual texture — to make richer designs possible
  • Open-ended theming allows for up to 26 unique swatches per theme, to add almost unlimited variety to designs
  • All backgrounds now use CSS3 gradients to dramatically reduce file size and number of server requests
  • A simplified icon set including those most commonly used for mobile, in a sprite to reduce image weight
More standard HTML5 input types

In jQuery Mobile, you can use new HTML5 input types such as email, tel, number, and more. We actively degrade certain types to type=text (currently, range and search) in certain cases when we provide a replacement for that type’s native control. You can configure which types are degraded to text through the page plugin’s options.

Mobile page structure

A jQuery Mobile site must start with an HTML5 ‘doctype’ to take full advantage of all of the framework’s features. (Older devices with browsers that don’t understand HTML5 will safely ignore the ‘doctype’ and various custom attributes.)

New list markup conventions [in Alpha 4]

In the new list markup conventions, we wrap the anchor around all the content in the list item (split buttons have two sibling anchors within a list item). … Now, thanks to HTML5, we can just wrap all the list content in an anchor which makes all the default link behaviors and features work as expected, no scripting needed. Simple lists that only contain a text node or link will not be affected, but any list item that contains advanced formatting like thumbnails, text hierarchy, split buttons, etc. will need to be updated.

Sliders

To add a slider widget to your page, start with an input with a new HTML5 type="range" attribute. Specify the value (current value), min and max attribute values to configure the slider. The framework will parse these attributes to configure the slider.

  • Egyedül ez a HTML5 / CSS3 alapú keretrendszer hihetetlen mértékben beindíthatja a HTML5, mint univerzális platform használatba vételét. Ugyanis a jQuery, mint a jQuery Mobile egyik alapja nagyobb elterjedtséggel bír, mint a PHP, vagy az ASP.NET:

jQuery Usage Statistics by BuiltWith Trends -- 16-May-2011

  • A jQuery Mobile másik alapját képező jQuery UI elterjedtsége pedig nagyobb, mint bármelyik más JavaScript UI framework-é:

jQuery UI Usage Statistics by BuiltWith Trends -- 16-May-2011

felső 10 ezer webhely felső 100 ezer webhely felső egymillió webhely
jQuery UI 7,79 % 5,2 % 2,93 %
YUI 4,41 % 3,11 % 1,71 %
Prototype 4,08 % 3,79 % 3,00 %
script.aculo.us 3,41 % 3,15 % 2,63 %
MooTools 2,40 % 2,96 % 3,37 %
Dojo 0,41% 0,17 % 0,08 %
Ext JS 0,10 % 0,12 % 0,08 %

(Ajánlott kiegészítő információ: JavaScript keretrendszerek összevetése)

.NET

  • Igen magas elterjedtség a webhelyeken (ASP.NET): még a PHP-hoz képest is (felső 100 ezer: 26,72 % kontra 37,14 %, felső egymillió: 24 % kontra 35,48 %, felső 10 ezer: 21,43 % kontra 31,23 %)

ASP.NET Usage Statistics by BuiltWith Trends -- 16-May-2011

  • RIA tekintetben pedig páratlan funkcionalitást kínál:

Silverlight Features Matrix

The Features Matrix below provides an overview of the new capabilities in Silverlight 4. Silverlight 4 is able to run Silverlight 3, Silverlight 2 and Silverlight 1.0 applications without change.

Silverlight Versions
Features 1.0 2 3 4
Cross-Browser Support for Firefox, IE, Safari
Cross-Platform Support for Windows and Mac (and Linux through the Moonlight Project)
2D Vector Animation/Graphics
AJAX Support
HTML DOM Integration
HTTP Networking
Canvas Layout Support
JavaScript Support
XAML Parser
Media – 720P High Definition (HD) Video
Media – Audio/Video Support (VC-1, WMV, WMA, MP3)
Media – Image Support (JPG, PNG)
Media – H.264 video and AAC audio Support
Media Markers
Windows Media Server Support
Support for Visual Basic.NET and C#; Common Language Runtime (CLR) based languages
Support for IronPython, IronRuby, Managed JScript, and other Dynamic Language Runtime (DLR) based languages
Rich Core Framework (e.g. Generics, collections)
Multi-Threading
Layout controls including StackPanel and Grid
Full suite of Controls (TextBox, RadioButton, Slider, Calendar, DatePicker, DataGrid, ListBox, TabControl, and others)
Managed Control Framework
Templating Model
Visual State Manager
Isolated Storage
Deep Zoom Technology
Media – DRM Powered by PlayReady
Media – Windows Media Audio 10 Professional support
Media – MediaStreamSource for managed code media file parser and protocol extensibility
High quality resizing
Media – Basic SSPL Support
Cross Domain Network Access
Easy access to server-side data via Web Services
Direct access to TCP sockets
Interoperability with SOAP and REST services, including support for XML, JSON, RSS and Atom data formats
LINQ (including LINQ to XML, LINQ to JSON, and LINQ to Entities)
Duplex communications (“push” from Server to Silverlight client)
Data Binding
WCF Data Services
Managed HTML Bridge
Managed Exception Handling
.NET Framework Security Enforcement
Type Safety Verification
XMLReader/Writer
Enhanced Keyboard Input Support
File Upload Support (via WebClient API)
WPF Compatibility
Accessibility
Localization
Remote Debugging (PC and Mac)
Out of Browser
Network Status (Offline)
Pixel Shader Effects
Bitmap API
Theming at runtime
Enhanced Control Skinning
Accessibility – System Colors
Bitmap caching
Perspective 3D
GPU Hardware Acceleration (for video and bitmaps)
Text Animation
Raw A/V Support
File Save Dialog
DockPanel, WrapPanel, Viewbox
Element to Element Binding
Local Connection
Binary XML
Component Caching (share resources across apps)
Scene caches (to Bitmap)
Local Fonts
Printing
WCF RIA Services
Managed Extensibility Framework (MEF)
Webcam
Microphone
Official Support for Google Chrome
Output Protection for audio/video
Multicast networking
Offline DRM
Trusted Applications (extended sandbox)
IDispatch COM Interop
Group policy object support
Full keyboard in out-of-browser for trusted applications
Cross-domain network access for trusted applications
Custom window chrome
Out of browser window settings (position, size etc.)
Web Browser Control and Web Browser Brush
Notification Toast
Right-to-Left / BiDi Text
  • Ugyanakkor a Silverlight webhelyeken való elterjedtsége — sok éves piaci jelenléte ellenére — még mindig meglehetősen alacsony (vegyük figyelembe, hogy a Javascript nélküli Flash webhely elterjedtség sem annyi, mint a böngésző plugin-ként való elterjedtség):

  • Ez persze csak a webhelyekre vonatkozik. Ettől úgy a desktop/notebook böngészőkön már jelenleg, mint a Silverlight fejlesztési platformra támaszkodó Windows Phone eszközökön a jövőre nézve, lényegesen nagyobb az elterjedtsége. Az utóbbi különösen a Nokia-Microsoft platformösszefogás (ld. Nokia-Microsoft általában és fejlesztői szempontból)  következtében fog már 2012 elejére komoly mértékben megugrani.
  • A böngésző plugin telepítések tekintetében ugyanis kiváló a Silverlight elterjedtsége, más alternatívákhoz képest a legközelebb kerülve az Adobe Flash-hez (a HTML5 Canvas és Video támogatással egyenlő a mérték):

The Windows Azure Toolkit for Windows Phone 7 is designed to make it easier for you to build mobile applications that leverage cloud services running in Windows Azure.  The toolkit includes Visual Studio project templates for Windows Phone 7 and Windows Azure, class libraries optimized for use on the phone, sample applications, and documentation.  All this content is designed to be easily reused, simplifying your experience and optimizing your time when building your own phone applications leveraging cloud services.

Requirements

You must have the following items to run the project template and the sample solution included in this toolkit:

  • Microsoft Visual Studio 2010 Professional (or higher) or both Microsoft Visual Web Developer 2010 Express and Microsoft Visual Studio
  • Microsoft ASP.NET MVC2
  • Windows Phone Developer Tools (January 2011 Update)
    • Windows Phone Developer Tools January 2011 Update (WindowsPhoneDeveloperResources_[language]_patch1.msp)
    • Windows Phone Developer Tools Fix (VS10-KB2486994-x86.exe)
  • Silverlight for Windows Phone Toolkit – Feb 2011
  • Internet Information Services 7 (IIS7)
  • Windows Azure SDK 1.4 (March 2011)
  • Windows Azure Tools for Microsoft Visual Studio 2010 (March 2011)
  • Windows Identity Foundation Runtime
  • Windows Identity Foundation SDK 4.0

De Icaza is, of course, the originator of the Mono Project, an open-source implementation of the .NET Framework based on C# and the Common Language Runtime (CLR). In 1999 he and Nat Friedman founded a company called Ximian, originally to provide Linux and Unix desktop apps based on the GNOME platform. That company became a driving force behind Mono, and it was acquired by Novell in 2003.

But Mono never truly flowered under Novell, de Icaza said, especially in the mobile space. In fact, one of the reasons he is sanguine about the layoffs is that he and his Mono mates have been trying to spinoff the technology from Novell for more than a year.

“We all thought that Mono could really shine on its own,” de Icaza said. “For years we’ve been wrapped in this bubble of Novell, and our mobile efforts didn’t align with the strategies of an infrastructure company. We pursued them because a lot of people asked us to do it, and we’re passionate about it. I guess you could say that I welcome being laid off, because it gave us a reason to get together and do what we all wanted to do.”

Under Novell, the Mono team did create MonoTouch, which allows developers to create C# and .NET apps for iPhone, iPad, and iPod Touch devices, and Mono for Android for developers creating apps for devices running that OS. Novell owns both of those technologies, which means that Xamarin will be building some of its initial products from scratch, including a new commercial .NET offering for Apple’s iOS, and a new commercial .NET offering for Android. Xamarin will continue to contribute to the Mono project and the open source implementation of Silverlight known as Moonlight, de Icaza said, and he plans to explore “Moonlight opportunities” in the mobile space and the Mac appstore.

On the speculation of the funding behind Xamarin, de Icaza says his fledgling company currently has two committed angels, neither of which is Microsoft, and he’s providing some of the initial funding himself. “I’m not going to rule out that I’d like to have Microsoft as an angel investor,” de Icaza told me. “We have talked to a lot of people at the company, and they do like us. But for that matter, I wouldn’t mind having Google and eBay and RedHat and eTrade and Novell. We’re pitching to everybody who will listen right now.”

Továbbá:

- Válasz Clemens Vasters (Microsoft) üzenetére:@migueldeicaza Good luck with the new venture.

@clemensv Thanks Clemens! I will keep my fingers crossed to get WCF + AppFabric open sourced :-)

About these ads

Written by Nacsa Sándor

2011. május 23. hétfő at 09:29

9 hozzászólás

Subscribe to comments with RSS.

  1. [...] Folytatás a HTML5 konferencia webhelyen. Elküldve 2011. 05. 23. 11:41 by Nacsa Sándor Megtekintve: 0 alkalommal Támogatóink | Kapcsolat | Tagok | Adatvédelmi nyilatkozat | Felhasználási feltételek | 2011, DevPortal // // //> //> $(document).ready(function () { $('ul.sf-menu').superfish(); }); [...]

  2. [...] Top sites using HTML 5 Specific Tags about.com • chacha.com • babycenter.com • ehow.com • vimeo.com • apple.com • forbes.com • hubpages.com • filmannex.com •  monster.com  • angelfire.com • cnet.com •  verizon.com • careerbuilder.com • cracked.com •  newsweek.com •  com.com •  ign.com Ehhez kapcsolódik még: HTML5 mint univerzális platform: van-e alternatívája? [...]

  3. [...] kapcsolódik még: – HTML5 mint univerzális platform: van-e alternatívája? – Top sites using jQuery twitter.com godaddy.com about.com msn.com monster.com [...]

  4. Az egész html5/js egy elég nagy fekália, legalábbis szvsz. Ezzel együtt eléggé megkerülhetetlennek tűnik, sajnos. Ennek az okát úgy hívják hogy google. Amíg az emberek úgy _gondolják_ hogy a gugli esetleg előbbre helyez egy html alapú oldalt egy silverlightosnál addig nem fognak SL alapú projektbe kezdeni.
    Másrészt a design html5 alapon megoldható egyszerű notepaddal is. SL-hez expression studio kell a dologhoz, ami ugye fizetős.
    Szvsz az SL sikeréhez három dolog kellene:
    – Platformfüggetlenség (Pl. ha a MS a hóna alá nyúlna a moonlight projektnek, garantálva egyben azt is, hogy később sem fogja szabadalmakkal támadni azt).
    – Ingyenes expression studio (vagy legalább valami Express verzió mint a visual studioból)
    – Az hogy a bing beérje a guglit.

    Viszont, ha a html5 győz, akkor nagyjából a MS-nek is vége. A html5-tel a google és a ChromeOS lesz a nyerő.

    LCoder

    2011. május 24. kedd at 08:51

    • Ez egy meglehetősen tipikus vélekedés, viszont semmi köze sincs a “HTML5 mint univerzális platform: van-e alternatívája?” kérdés eldöntését segítő, és a cikkben részletesen kifejtett tényekhez:

      1. 2011-ben a Google fő nyomulási területe az Android. 123 millió ilyen smartphone-ról van szó, amihez képest még a 20-25 millióra tehető nem iPad tablet-ek Android-os része is elenyésző. Fejleszteni pedig az Android-ot jellemzően nem HTML[5] platformon fejlesztik.

      2. A június 15-én piacra kerülő ChromeBook-okat pedig elsősorban az enterprise és education piacra pozicionálta a Google, ráadásul ezen pozicionálás sikerében sokkal fontosabb szerepet játszik a Wintel alkalmazásokat futtatni képes Citrix technológia semmint maga a Chrome böngésző.

      STB.

      RE: “Az egész html5/js egy elég nagy fekália”
      Az előttünk álló 2-3 év alatt kialakuló HTM5 univerzális platform megítélése szempontjából roppant becsapós ez a múltban gyökerező negatív állítás.
      A jQuery Mobile (HTML5 és társai lehetőségek kihasználása szempontjából) még ugyan embrionális HTML[5] platformra ez már egyáltalán nem áll, a nagyok még hasonló irányú fejlesztéseire (amikről majd csak az elkövetkező hónapokban értesülünk) még kevésbé fog állni.

      RE: “ha a html5 győz, akkor nagyjából a MS-nek is vége”
      Ez is egy lépten nyomon hallható, tipikus vélekedés. Az MS-t szvsz senki se féltse és csak a saját érdekei szempontjából vizsgálja a kialakuló szituációt. Mellesleg az MS több, mint egy éve meghozta döntését és szvsz a lehető legjobb döntést hozta a saját érdekei szempontjából. Most viszont nem az MS (se nem a Google, vagy más nagy cég) döntésén kell morfondírozni (ezt már ők régen meghozták), hanem minden fejlesztőnek és fejlesztő műhelynek a saját döntés kimunkálásával kell elkezdeni foglalkozni.

      RE: “ha a MS a hóna alá nyúlna a moonlight projektnek”
      Ez már azért sem történhet meg, mert maga az Icaza csapat is kontribúciós szintre csökkentette Moonlight jelenlétét. Icazáék szempontjából a főcsapás most egy MonoTouch és Mono for Android klón termék létrehozása, amiben:

      “I’m not going to rule out that I’d like to have Microsoft as an angel investor,” de Icaza told me. “We have talked to a lot of people at the company, and they do like us. But for that matter, I wouldn’t mind having Google and eBay and RedHat and eTrade and Novell. We’re pitching to everybody who will listen right now.”

      Tessék elovasni a cikkem vége felé található, ezzel kapcsolatos, legújabb információkat.

      Egyébként ettől függetlenül is, és ismételten csak a cikk [újabb és] alaposabb átolvasását tudom a magam részéről ajánlani.

      nacsa

      2011. május 24. kedd at 10:58

      • 1. A guglinak az Android egy szempontból fontos: hogy ne a WP7 vagy az IPhone nyerjen, hanem a saját platformja. Amit aztán szépen eltolhat webes irányba.
        2. A ChromeOS is főleg azért van, hogy az end-júzerek egy browser-only gépet kapjanak olcsón amiben aztán netfüggő alkalmazásokat futtassanak.
        “Az előttünk álló 2-3 év alatt kialakuló HTM5 univerzális platform megítélése szempontjából roppant becsapós ez a múltban gyökerező negatív állítás.”
        Ettől a javascript az marad ami.

        “Az MS-t szvsz senki se féltse és csak a saját érdekei szempontjából vizsgálja a kialakuló szituációt.”
        A Borland is így tett. Nem sokra ment vele.
        Engem egy percig sem az lesz hogy mi lesz szegény microsoftos részvényesek vagyonával, hanem az hogy a MS bukik akkor azt sok-sok MS irányba orientálódott fejlesztő szívja meg. Másrészt utálnék C# után Javascriptben fejleszteni.

        LCoder

        2011. május 24. kedd at 14:10

      • Ballmer hétfői üzenete Tókióból jó válasz minderre:

        We’ve made a big investment, obviously, in Windows and IE9 in our HTML and JavaScript support, but more and more of the world’s programmers will be fluent in these technologies in addition to whatever skills people have in C++ and C# and a variety of other important skills. But we have to recognize that more and more of the world’s talent will know these techniques. And whether it’s writing a website or a client application, or a server application, we want to build and develop the range of things that you can do not only using .NET, but also in using HTML and JavaScript. And, in fact, even how you can weave these things together into sensible programs in the future.

        ld. Microsoft on five key technology areas and Windows 8

        nacsa

        2011. május 25. szerda at 08:51

  5. [...] – HTML5 Last Call Working Draft dokumentumok a W3C HTML munkacsoportjától (2011. május 27.) – HTML5 mint univerzális platform: van-e alternatívája? (2011. május 23.) – Animációk HTML5-ben (2011. március 23.) – Minőségi webfejlesztés: [...]

  6. [...] Folytatás a HTML5 konferencia webhelyen. Elküldve 2011. 05. 23. 11:41 by Nacsa Sándor Lementve: HTML5 Megtekintve: 1 071 alkalommal Tweet [...]


MINDEN VÉLEMÉNY SZÁMÍT!

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

Követés

Értesítést küldünk minden új bejegyzésről a megadott e-mail címre.

%d honlapszerkesztő ezt szereti: