Archivál

Posts Tagged ‘HTML5’

Kimaradhat a XAML a Windows 8-ból

ms-days-logoAkik esetleg követnek Facebookon vagy Twitteren már tudhatják, hogy múlt héten Dávid Zoli barátommal Szófiában voltunk.

A bolgár Microsoft múlt héten rendezte meg az MS Days 2012 konferenciát, ami egy meglehetősen komoly rendezvény fejlesztők és üzemeltetők számára. Csak hogy a méreteket érezni lehessen: két nap, 8 párhuzamos szekció, 72 előadás (melynek kb. a fele angolul), 49 előadó (akik közül sokat külföldről reptettek oda) és minderre több, mint 1000 résztvevő.

A szervezés nagyon profi volt, minden egészen flottul ment, talán csak a helyi Lurdy Ház, a Кино Арена volt egy kicsit szűkös ennyi embernek:

Кино Арена

Zolival két előadást tartottunk JavaScriptről, HTML5-ről, MVC-ről és Azure-ról, főként tapasztalatokról és legjobb gyakorlatokról. Akit érdekel, letöltheti az előadásokhoz tartozó prezentációkat és demókat innen. Büszkén jelenthetem, hogy mindkét előadás nagyon népszerű volt, sokkal többen jöttek, mint ahányan a terembe befértek, még a “falakon is lógtak”. Az értékelőlapok összesítését még nem kaptuk meg, de a Twitteren már jött néhány pozitív visszajelzés (kettőnk közül csak én vagyok Twitteren, ezért csak engem emlegetnek, de az előadásokat együtt tartottuk):

ms-bg-twitter1

ms-bg-twitter2

A második előadás után megkeresett minket a Microsoft Research két munkatársa és elmondták, hogy az egyik kiemelt projektjükben kompatibilitási problémák megoldásán dolgoznak és az előadások alapján arra gondoltak, hogy szívesen bevonnának minket is. Konkrétan azon elmélkednek, hogy a XAML egy gigantikus zsákutca, mert már sok “dialektus” van belőle (Silverlight, WPF, Windows Phone, Windows 8) és mindegyik jelentősen eltér a másiktól.

Erről egyébként bárki meggyőződhet: a CODE Magazin atyja, Markus Egger egy nagyon hasznos eszközt tett közzé a CodePlexen XAML Dialect Comparer Tool néven. Az eszköz annyit tud, hogy megadunk neki egy forrás és egy cél XAML változatot, ő pedig végigszántja a névtereket és megmondja, mennyire kompatibilisek egymással. Például ha Silverlight 5-ről Windows 8 Metro-ra akarunk átállni, akkor csak 55,19%-os kompatibilitással számolhatunk. Mindenki eldöntheti, hogy a saját esetében ez mire elég.

XamlComparer

Vissza Bulgáriához. Szóval az MSR-nél két projekten dolgoznak és mivel egy szóval sem mondták, hogy ne beszéljünk róla, elmesélem. Az egyik projekt célja, hogy XAML markupot HTML-re fordítsanak, a másiké pedig, hogy a HTML+JavaScript alkalmazásoknak 100%-osan kompatibilis környezetet biztosítsanak minden platformon. Komolyan elkezdtek azon gondolkodni, hogy a Windows 8 Metro stílusú alkalmazásoknál kínált JavaScript lehetőségek pontosan ugyanabba az irányba viszik a HTML+JS párost, mint a XAML-t: dialektikus zsákutcába. Márpedig ezt a hibát az MS nem akarja még egyszer elkövetni, így nem csoda, hogy Steven Sinofsky-t is komolyan érdeklik ezek a kutatások.

Íme egy példa! Windows 8 Metro stílusú alkalmazásban használhatunk WinJS.UI.ListView vezérlőt, így:

<div id="playeritemtemplate" data-win-control="WinJS.Binding.Template">
    <div data-win-bind="innerText:Name" style="height: 20px;" />
    <img data-win-bind="src:Photo" style="width: 200px; height: 150px;" />
</div>

<div id="PlayerListView" 
    style="height: 185px;" 
    data-win-control="WinJS.UI.ListView"     
    data-win-options="{itemRenderer:playeritemtemplate,
                       layout:{type:WinJS.UI.GridLayout,maxRows:1}}" />

Ez működik kiválóan Windows 8 esetén, de sehol máshol. Arról nem beszélve, hogy a kód elég nehezen olvasható, hiszen a WinJS.UI.ListView vezérlő hozza azt a produktivitást, ami miatt az egészet csináljuk, de fogalmunk sincs, hogy az hogyan működik. Íme egy másik példa, ezúttal egy datepicker:

<div data-win-control="WinJS.UI.DatePicker" 
     data-win-options={maxYear:2020,minYear:2000}" />

Ez is csak Windows 8-on fog bármit is produkálni, miközben dátumválasztásra mindenhol szükség van. Persze vannak tökéletes megoldások: az adatkötés megoldható például KnockoutJS-sel, a dátumválasztás pedig jQueryUI DatePickerrel. Ezek tisztán JavaScript alapú megoldások (beszéltünk is róluk az előadásunkban), tehát nincs platform probléma, feltéve persze, hogy a JavaScript futtatás nem okoz gondot az adott környezetben. Weben mindez természetes, tehát ahol webböngészőt tudunk beágyazni, ott a probléma megoldva. Nézzük sorban:

Silverlight: átfordítjuk a XAML-t HTML-re, a code behindot pedig JavaScriptre és ha a hoszt egy böngésző, akkor máris készen vagyunk. A C#-JavaScript konverzióra Nikhil Kothari Script# projektje szolgáltat megoldást. Ha out-of-browser SL alkalmazásról van szó, akkor sincs nagy gond, hiszen akkor a hoszt az explorer.exe, ami szintén beépítetten támogatja a HTML-t és a JavaScriptet (mindenki emlékszik még a böngésző beépítése körüli jogi hercehurcára). Ez egyben a SL jövője körüli kérdést is megoldja.

WPF: csakúgy mint SL-nél, itt is átfordítjuk a XAML-t HTML-re, a code behindot pedig JS-re, és mivel a hoszt itt is az explorer.exe, futni is fog vidáman. Itt már gyakrabban jöhet elő egy olyan nehézség, ami SL5-nél is, konkrétan a P/Invoke, ez ugyanis kimutat a .NET runtime adta környezetből. Erre még nincs teljeskörű megoldás, egyelőre ott tartunk, hogy aki P/Invoke-ra épít, annak valószínűleg kevésbé fontos a hordozhatóság, de ez még nem kielégítő válasz.

Windows Phone: biztos hallottátok már azt a pletykát, hogy a Windows Phone 8-nál cserélni fogják a kernelt, ami már a Windows 8-ra fog épülni. Ezt egyelőre sem megerősíteni, sem cáfolni nem tudom (ugye értitek Kacsintó arc), a mi szempontunkból csak az a lényeg, hogy ez lesz a legkevésbé fájdalommentes. Ami a Windows Phone 7-et illeti, ott szóba se jöhet egy kernel szintű módosítás, ezért valószínűleg egy runtime réteg fog bekerülni valamelyik frissítésbe, ami gyakorlatilag egy transzparens böngésző lesz a HTML alapú alkalmazások futtatására.

Windows 8: ez a legrizikósabb terület, ugyanis pont itt reklámozta az MS legjobban az új HTML lehetőségeket és most ebből kellene visszalépni a helyes útra, ami persze egy marketing öngyilkosság lenne. Bár erre bármikor lehet azt mondani, hogy eddig csak “preview” változatok láttak napvilágot, ami magában hordozta a változtatás lehetőségeit, és hogy csak az a fontos, hogy a végeredmény hosszú távon jó legyen. A Microsoft Research-ös srácokkal arról beszélgettünk, hogy Sinofsky képes lenne szembemenni a cégen belüli marketing gépezettel a profi végeredmény érdekében.

Felmerülhet persze még kérdésként a sokféle “form factor”, azaz a cél eszközök különböző mérete. Hogyan fognak megjelenni az alkalmazásaink egy kicsi telefonon vagy egy nagyobb monitor képernyőjén? Ezzel kapcsolatban szerencsére pont a Windows 8 miatt már kitalálták a megoldást, érdemes elolvasni Nacsa Sándor idevágó Standards-based adaptive layouts in Windows 8 (and IE10) című írását.

layout

Szintén érdekes problémakör az adattárolás kérdése. Itt az a szerencse, hogy a sok XAML környezet közül már a legkisebb is hozza a közös nevezőt: a Mango óta Windows Phone-on is lehet SQL Compact Editiont használni. Ha pedig külső SQL Serverre van szükség, akkor pedig maradnak a HTTP alapú REST-es API-k az adatbázis elérésére.

Mindezek a projektek gyönyörűen haladnak az MSR-nél, vannak működő megoldásaik nem csak egyszerű, hanem összetettebb alkalmazásokra is. Az igazi probléma az időzítés. Az MSR nem elég nagy ahhoz, hogy az igazi bevételt termelő Windows gépezetet visszatartsa, márpedig ha a Windows 8 megjelenik a Consumer Preview-ban található XAML és a HTML lehetőségekkel, akkor már nincs visszaút, az MS végérvényesen belezöttyen a kátyúba, ahonnan évekig nem mászhat ki (lásd VB6 és ASP támogatás Windows 8-on).

Ennek a meccsnek két eredménye lehet:

1. Marad a mostani felállás, amivel útjára indítják a Windows 8-at mint egy gigantikus kísérletet, és az esetleges problémákat, zsákutcákat majd a Windows 9-ben kijavítják. Ebben az esetben a történelem a Vista-Windows 7 párost ismételné.

2. Sinofsky a sarkára áll és azt mondja, hogy tiszta szerencse, hogy időben észbe kaptunk, szorítsuk egy kicsit háttérbe a saját érdekeinket és adjunk ki egy olyan Windows 8 verziót, ami tényleg hosszú távon jó irányba mutat, hiszen operációs rendszert nem cserélnek sűrűn sem a végfelhasználók, sem a cégek.

Sinofsky már letett valamit az asztalra, és én arra tippelek, hogy elfogadnák az érvelését, bár ez nagy érvágás lenne a Microsoftnak. Ebben az esetben ugyanis jelentősen csúszna a Windows 8 kiadása (az idén biztosan nem lenne belőle semmi), hozzá kellene igazítani az eddig elkészült alkalmazásokat, fejlesztőeszközöket, mindent. Viszont arra is nagyon jó esély van, hogy a végeredmény nagyon jó termék lenne, amivel az MS tiszteletet érdemelhetne ki, ami persze végül a bevételi oldalon is éreztetné a hatását. Így nem meglepő, hogy jelenleg ez a valószínűbb lehetőség.

De mi lesz a fejlesztőkkel ebben az esetben? A XAML halála a WPF és a Silverlight bizonytalan jövője körüli homályos információk óta egyre valószínűbb. A XAML diverzitása a saját halálát okozza, miközben lényegében semmi előnyt nem hordoz a HTML-hez képest, hiszen csak címke parszolásról van szó. Elég csak az ASP.NET MVC 4-ben lévő Razor parserre gondolni és máris tisztán látszik, hogy a HTML alapú megoldások egyszerűen jobbak. (Egyébként a Razor parser is bekerült ebbe a projektbe) Nincs értelme fenntartani egy olyan szintaktikát, ami megosztja a fejlesztői tábort, miközben van egy olyan alternatíva, ami inkább újabb fejlesztőket hozna a Windows platformra.

Ti örülnétek, ha a XAML halála miatt csúszna a Windows 8 kiadása?

 

 

UPDATE: Fontos kiegészítés a fentiekhez: http://bit.ly/xamltohtml

 

Technorati-címkék: ,,,,

Adobe: Nincs több Flash Player, irány a HTML5!

Danny Winokur, az Adobe alelnöke nemrég bejelentette, hogy felhagynak a Flash Player fejlesztésével mobil eszközökre:

“Our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores.  We will no longer continue to develop Flash Player in the browser to work with new mobile device configurations (chipset, browser, OS version, etc.)”

És a magyarázat:

“HTML5 is now universally supported on major mobile devices, in some cases exclusively.  This makes HTML5 the best solution for creating and deploying content in the browser across mobile platforms. We are excited about this, and will continue our work with key players in the HTML community, including Google, Apple, Microsoft and RIM, to drive HTML5 innovation they can use to advance their mobile browsers.”

Persze desktopon a helyzet változatlan, készül a Flash Player 12 és mindenki “super excited”.

Szerintetek ez mit jelent?

 

Technorati-címkék: ,,,,
Kategóriák:Mobil, Webfejlesztés Címkék:, ,

HTML5 média formátumok böngésző támogatása

Az idei Web Konferencián Dávid Zoli barátom tartott egy remek előadást a HTML5 játékfejlesztésről JavaScript reneszánsz címmel, amelynek a felvétele egyébként megtekinthető a devPortal TV oldalán.

Az előadás utáni kérdések között merült fel, hogy tényleg nincs egy olyan audio formátum, amit minden böngésző támogatna? A HTML5 támogatja az AAC, MP3 és Ogg Vorbis audio formátumokat, illetve az Ogg Theora, WebM és MPEG-4 video formátumokat, de hogy állnak ezzel a böngészők?

A novemberi MSDN magazin egyik cikke pont ezzel a kérdéssel foglalkozik és egy az aktuális állapotot bemutató táblázat is szerepel benne:

Videó formátum Audió formátum
Böngésző

Ogg Theora

H.264

VP8 (WebM)

Ogg Vorbis

MP3

WAV

IE Telepíthető 9.0 Telepíthető - + -
Firefox 3.5 - 4.0 + - +
Chrome 3.0 - 6.0 + + +
Safari Telepíthető 3 Telepíthető - + +
Opera 10.50 - 10.60 + - +

 

Technorati-címkék: ,,,,,
Kategóriák:Webfejlesztés Címkék:, , , , , ,

HTML 5 custom data attributes

A HTML 5 szabványba foglalt egyik legkedvesebb részem a custom data attribute lehetősége. Egyrészt azért tetszik, mert nagyon régóta fájó problémát old meg, másrészt mert nem kell megvárni hozzá a HTML 5 szabvány elkészültét, már ma is használható, a korábbi böngészők is elviselik.

Röviden a custom data attributes arra jó, hogy tetszőleges, nem látható információt ágyazzunk be kulturált módon a HTML markupba. Ehhez nem kell más tennünk, mint egy data- kezdetű attribútumot biggyesztenünk a kiszemelt HTML elemhez. Például így:

  <span data-rendezo="Michael Bay">Transformers</span>

Ha erre az adatra később szükségünk van JavaScriptben, akkor akár az element.dataset tulajdonságon keresztül, akár jQuery-vel a data() metóduson keresztül elérhetjük:

  alert( $('span').data('rendezo') );    // --> Michael Bay

Persze a jQuery támogatja az értékek írását, törlését és hozzáadását is. Sőt, akár összetett objektumokat is tehetünk ide, természetesen JSON formában (a tulajdonságok neveit idézőjelbe kell tenni):

  <span id="tr"
    data-film='{ "rendezo": "Michael Bay", "ev": 2007, "moziban": true }'>
    Transformers
  </span>

Kiolvasni nagyon egyszerű:

  var f = $("#tr").data('film');

És ahogy Firebugban is látszik, egy összetett objektumot kapunk vissza, méghozzá nem csak stringekkel, hanem ha lehet, típusokkal (Boolean, Number):

dataAttribute-Firebug

Sokkal jobb, mint JavaScriptbe írni a szerver oldalon előálló adatokat vagy hidden fieldeket generálni, nem?

Ez az a pont, ahol az ember úgy érzi, hogy ennél egyszerűbb és jobb dolog nincs a világon. Csakhogy a specifikáció nagyon pontosan definiálja, hogy hogyan kell kezelni a nagybetűs és a kötőjeles attribútumokat, ami nagyon érdekes hibákat tud eredményezni. Vegyük például ezt:

  <p data-productId="22">...</p>

Talán meglepő, de ez bizony undefined a javából:

  alert( $("p").data("productId") );

Helyesen:

  alert( $("p").data("productid") );

Ez nem bug, főként nem a szerver oldali keretrendszer hibája, hanem feature: úgy működik, ahogy a specifikáció előírja.

A jQuery próbál segíteni a programozói bénaságokon és gyakran többféleképpen is elérhetővé teszi ugyanazt az adatot. Például íme a markup:

  <p data-Id="22">...</p>

Ebből az Id két módon is elérhető:

  $("p").data("id")
  $("p").data("Id")

A Studio is tudja, mi a helyes, mert a Format Document vagy Format Selection parancs kiadásakor kisbetűsre alakítja ezeket az attribútumokat.

Mindenképp érdemes elolvasni azt a pár mondatot a specifikációban, ami erről szól (3.2.3.8 fejezet) és csak akkor használni ezt a lehetőséget, ha értjük is.

Keresztkérdés! Íme a markup:

  <p data-egy="1" 
     data-Ketto="2" 
     data-haromHarom="3" 
     data-Negy-negy="4" 
     data-ot-ot="5" 
     data-hat-Hat="6">...</p>

Milyen tulajdonságai lesznek az alábbi sor után az adat objektumnak?

  var adat = $("p").data();

Íme a megoldás (a szürke kosz egy mini kép, kattints rá a teljes mérethez): Kattints ide a megoldás megtekintéséhez!

 

Technorati-címkék: ,,
Kategóriák:Webfejlesztés Címkék:, ,

Internet Explorer 10 Platform Preview 2

Áprilisban a MIX konferencián a Microsoft bemutatta az Internet Explorer következő verziójának első előzetesét, amit ezen a héten – pontosan a korábban meghirdetett ütemtervet követve – követett a Platform Preview 2. Ízelítő az újdonságokból:

  • Positioned Floats
  • CSS3 Gradients (minden image típuson)
  • Korlátlan számú és mélységű CSS stíluslap kezelése
  • CSSOM Floating Point Value támogatás
  • Továbbfejlesztett hit testing API
  • Media Query Listeners
  • HTML5: async attribútum támogatása script elemeken
  • HTML5 Drag and Drop
  • HTML5 File API
  • HTML5 Sandbox
  • HTML5 Web Workers
  • Web Performance APIs

Mindezek nagyon ígéretesek, számomra az aszinkron szkript futtatás a web workerek a legizgalmasabbak. De szép lesz, amikor ezeket már valóban minden böngésző támogatni fogja…

Addig is az IE10 előzetes letölthető a http://ietestdrive.com oldalról.

Ti mit gondoltok?

 

Technorati-címkék: ,,,

Kategóriák:Webfejlesztés Címkék:, ,

Web Standards Update for VS 2010 SP1

HTML5 és Visual Studio 2010Fontos frissítés jelent meg a Visual Studio 2010 SP1-hez és a Visual Web Developer Expresshez, amely felokosítja ezeket az eszközöket a HTML5 és a CSS3 szabványok terén. Mivel VS extensionről van szó, ezért nem tudhat mindent (vannak olyan dolgok, amihez a VS kódját módosítani kell, de az ígéretek szerint ez is meglesz a következő verzióra), de az előrelépés így is jelentős:

HTML5

HTML5 a Visual Studio eszközsávon

IntelliSense és kód validálás a legfontosabb HTML5 elemekhez:

Browser APIs

CSS3

CSS validálás a Visual Studio eszközsávon

IntelliSense és kód validálás CSS3 finomságokhoz:

Akit képernyőképekkel lehet meggyőzni, annak feltétlenül ajánlom Scott Hanselman cikkét, akinek pedig ennyi is elég volt, annak irány a letöltő oldal.

Nevet kapott a Voldemort Konferencia – fókuszban a Windows 8

Áprilisban a MIX-en a Microsoft bejelentette, hogy lesz szeptember 13-16 között a kaliforniai Anaheimben egy nagyon érdekes konferencia, amit érdemes már most (áprilisban) beírni a naptárba. Ennél többet azonban nem árultak el, még az sem derült ki, hogy ez a szokásos Professional Developer Conference (PDC), vagy valami más. Akkor még nevet sem adtak a rendezvénynek, ez volt a Konferencia, Aminek A Nevét Nem Mondjuk Ki.

Most azonban mindenre fény derült, a konferencia neve BUILD és a “Windows 8”-ról (ami még nem végleges név, csak belső kódnév) szól, már lehet is regisztrálni. Tekintve, hogy hol áll(hat) most a következő verzió fejlesztése, szerintem ezen az eseményen nem elsősorban mély fejlesztői előadások fognak elhangzani, hanem inkább a fejlődési irányról lehet majd érzéseket, benyomásokat gyűjteni.

Ezzel kapcsolatban már van néhány dolog a rendezvény honlapján és persze már sok minden kiderült korábban is, a minap épp Steven Sinofsky-tól a D9-en (képes beszámolók itt és itt).

A felhasználói felülettel kapcsolatban a legfeltűnőbb talán, hogy itt is megjelennek a csempék (már az is érdekes jelenség, hogy a GUI bemutatásával kezdik a Windows 8 információk csepegtetését):

W8-tiles

Sőt még a Start menü is becsempéződik (katt a nagyobb képért):

win8_start_web

(Forrás: Windows Newsroom)

Ettől persze az egész inkább egy nagyra nőtt Windows Phone-nak néz ki, amit a touch képességeket kedvelők és használók biztosan imádni fognak. Reméljük, nem egy újabb Microsoft Bob

Ez látványos, de ennél szerintem sokkal izgalmasabbak az elrejtett apró félmondatok, amik elsősorban a webről szólnak:

“Web-powered apps built using HTML5 and JavaScript that have access to the full power of the PC”

Sőt:

“Windows 8 apps use the power of HTML5, tapping into the native capabilities of Windows using standard JavaScript and HTML to deliver new kinds of experiences. These new Windows 8 apps are full-screen and touch-optimized, and they easily integrate with the capabilities of the new Windows user interface.”

Erre persze sokan felkapták a fejüket, hogy miért “use” és miért nem “can use”, különösen az ilyen kompatibilitással kapcsolatos mondatok fényében:

“We also showed effortless movement between existing Windows programs and new Windows 8 apps.”

Ezek szerint tisztán a HTML lenne az új út? Reméljük nem. De az megint csak feltűnő, hogy a Silverlight szóba sem került.

Ez még csak a kezdet, de az már jól látszik, hogy a “Windows 8” és az Internet Explorer 10 ismét komoly lehetőségeket fog hozni a fejlesztők életébe. Erről íme egy előzetes (érdemes teljes képernyőn, nagy felbontásban nézni):

Building “Windows 8”

 

Ti mit gondoltok, ez jó irány?

 

Technorati-címkék: ,,,
Kategóriák:Windows Címkék:, ,

HTML5 item és project template Visual Studiohoz

2011.03.29. 8:12 Hozzászólás

Sajnos a Visual Studio 2010-ben beépítetten nincs olyan project és item template, amivel egy kattintással hozhatnánk létre HTML5-ös oldalakat és projekteket. Szerencsére készíthetünk magunknak saját sablonokat, de már erre sincs szükség, mert Rey Bango megtette helyettünk (katt a teljes képért):

html5-template-choice

A sablon ingyenesen letölthető új verziója már a jQuery könyvtár 1.5.1 és a Modernizr 1.7 verzióját tartalmazza.

 

Technorati-címkék: ,,,
Kategóriák:Webfejlesztés Címkék:, ,

HTML5 audió-videó MIME típusok

Ha WebMatrix (IIS Express) vagy IIS alatt próbálkozunk a HTML5 új <audio> és <video> tag-jeivel, akkor először nagy valószínűséggel azt fogjuk tapasztalni, hogy bár a lejátszó megjelenik, a lejátszás nem indul el. Jobban megnézve a HTTP forgalmat, az alábbi hibaüzenettel szembesülhetünk:

HTTP Error 404.3 – Not Found
The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.

A hibaüzenet és az alatta található részletes leírás eléggé magáért beszél, a hiba oka az, hogy az IIS nem engedélyezi az új audió és videó fájlok letöltését, mert nem ismeri őket. Az IIS kiokosításához persze használható a hibaüzenethez tartozó leírásban található parancssoros appcmd is, de sokkal egyszerűbb, ha beírjuk ezeket a sorokat a web.config fájlba és már készen is vagyunk:

<?xml version="1.0"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
      <mimeMap fileExtension=".m4v" mimeType="video/m4v" />            
      <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
      <mimeMap fileExtension=".webm" mimeType="video/webm" />
    
      <mimeMap fileExtension=".m4a" mimeType="audio/mp4" />
      <mimeMap fileExtension=".oga" mimeType="audio/ogg" />
      <mimeMap fileExtension=".ogg" mimeType="audio/ogg" />            
      <mimeMap fileExtension=".spx" mimeType="audio/ogg" />
    
      <mimeMap fileExtension=".svg" mimeType="images/svg+xml" />
      <mimeMap fileExtension=".svgz" mimeType="images/svg+xml" />
    
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
            
    </staticContent>    
  </system.webServer>
</configuration>

Forrás: Mads Kristensen

 

Technorati-címkék: ,,,
Kategóriák:Webfejlesztés Címkék:, , , ,

JavaScript és jQuery szerszámosláda

Néhány szubjektívan válogatott eszköz, technológia és módszer, ami csillapíthatja a JavaScript fejlesztéskor fellépő kóros WTF tüneteket:

jQuery – http://jquery.com/

Alapvető függvénykönyvtár, ezzel van minden, nélküle csak a nagy büdös if(ie). Ettől lesz a JavaScript produktív és böngésző független. Már van belőle 1.5 verzió, ne higgy annak, amit a Studio új projekt létrehozásakor beletesz a projektbe.

Itt egy tömör bevezető hozzá: Vlad Azarkhin: The magic of jQuery

jQuery Code Snippets for Visual Studio 2010 – http://jquerysnippets.codeplex.com/

131 code snippet a VS 2010-hez, amivel a tipikus jQuery kódrészletek emberi idő alatt megírhatók. A lényeg mindössze 25 másodpercben: http://screencast.com/t/YjUyNDVjZD

jQueryUI – http://jqueryui.com/

Pár hasznos vezérlő [vezérlő JavaScriptben, na persze] (accordion, autocomplete, button, datepicker, dialog, progressbar, slider, tabs) interakciók (draggable, droppable, resizable, selectable, sortable) és animációk.

jQuery jGrowl plugin – http://stanlemon.net/projects/jgrowl.html

jQuery kiegészítő, segítségével egyszerűen lehet színes-szagos, ám szemet és orrot nem facsaró üzeneteket küldeni a felhasználónak.

jQuery Templates plugin – http://api.jquery.com/category/plugins/templates/

Bár még csak bétában van, ez üt rendesen: kliens oldali adatkötés. Megmondod az adat objektumot és a HTML template-et és ő renderel belőle DOM fát. Sőt, egy renderelt DOM objektumhoz meg tudja mondani, hogy milyen adat objektum tartozik hozzá!

A szintaktika még képlékeny, de a képességeiről ez egy jó bevezető:
http://stephenwalther.com/blog/archive/2010/11/30/an-introduction-to-jquery-templates.aspx

QUnit – http://docs.jquery.com/Qunit

Unit tesztelés JavaScriptben, mert persze azt is lehet. Nem kifejezetten puszipajtások a jsTestDriverrel, ami böngészők meghajtására és automatizált tesztfuttatásra használható, inkább Hacsek és Sajóként egészítik ki egymást: http://code.google.com/p/js-test-driver/

Rangy – http://code.google.com/p/rangy/

Hasznos kis osztályfüggvénykönyvtár, megoldja a kurzor mozgatás és kijelölések kezelésének böngészőfüggetlenítését. Még gyerekcipőben jár, de már nagy segítség, ha ilyen feladatokkal szembesülsz.

log4javascript – http://log4javascript.org/

Kliens oldali naplózásra használható függvénykönyvtár.

Íme, az 1 oldalnyi tudnivaló:
http://log4javascript.org/docs/quickstart.html

Objektum orientált JavaScript

Nos, a JS nem objektum orientált. Legalábbis nem klasszikus értelemben. Nincsenek benne igazi osztályok, viszont benne nagyjából minden függvény, objektum és tömb is egyben. Ha elég perverz vagy, akkor ennyiből le tudod vezetni az OOP mantrát.

A teljes OOP ritkán kell, viszont van pár haladóbb JS mumus, amivel praktikus megismerkedni, mielőtt kiugrik a szekrényből. Ez segíthet elindulni: http://www.slideshare.net/djsipe/object-oriented-javascript-presentation

JSON

Ha ismered a JavaScriptet, akkor a JSON nem fog újdonságot jelenteni: egyszerű objektum sorosítási szintaktikáról van szó. Ha érdekel az elmélet, itt a specifikáció ékes anyanyelvünkön: http://json.org/json-hu.html Talán egy fokkal egyszerűbb, ha rápillantasz erre a példára, magáért beszél: http://www.json.org/example.html

HTML 5 data- attributes

Ez egy elég bizarr rész a HTML 5 specifikációban, az egyetlen szerencséje, hogy visszafelé teljesen kompatibilis. Arról szól, hogyan pakoljunk HTML attribútumokba tetszőleges adatot.

Az 1 oldalas kötelező olvasmány: http://ejohn.org/blog/html-5-data-attributes/

És mindez a fotelból ülve, akarom mondani jQuery-vel: http://api.jquery.com/data

VS JS IntelliSense

Az IntelliSense nélkül megáll az élet a Visual Studioban. Ez egy olyan drog, amire aki egyszer rászokott, nem tud leszokni. Előre szólok, hogy JS fejlesztésnél garantáltan lesznek elvonási tünetek. Szerencsére lehet a JavaScript kódhoz is XML kommenteket írni, amit az IntelliSense támogat is. Itt írják le a használatukat tömören: http://weblogs.asp.net/bleroy/archive/2007/04/23/the-format-for-javascript-doc-comments.aspx

Amire vigyázni kell:

  • Nem tökéletes az XML kommentek feldolgozása és főleg nem hibatűrő. Ha elrontasz valamit, megszűnik a JS IntelliSense, mindenféle hibaüzenet nélkül. Persze néha akkor is leáll, ha mindent jól csinálsz Arc nagy mosollyal
  • Vannak bizonyos nyelvi elemek, amiket nem támogat, például a prototype-hoz írt XML kommentek többnyire nem jelennek meg.
  • Praktikus lenne, ha a visszatérési típust a returns blokkban megadva utána felkínálná az adott típus tulajdonságait. Na ez többnyire nem működik, sőt épp ellenkezőleg, ha a Studio ki tudná találni, hogy mi a visszatérési típusa egy függvénynek, a returns type=”akármi” elemmel el lehet venni az eszét. Ezt inkább kerüljük.

VS JScript Editor Extensions – http://visualstudiogallery.msdn.microsoft.com/872d27ee-38c7-4a97-98dc-0d8a431cc2ed/

Ez egy VS 2010 bővítmény, amiben hiszünk, hogy jobbá teszi az életünket. Kicsivel praktikusabb, mint egy tibeti imamalom. De csak kicsivel.

Apropó VS 2010 bővítmények: a Productivity Power Tools tényleg hasznos, van annyi funkciója, hogy éveken keresztül minden nap tanulhatsz valami újat: http://visualstudiogallery.msdn.microsoft.com/d0d33361-18e2-46c0-8ff2-4adea1e34fef

Firebug – http://getfirebug.com

A webfejlesztők svájcibicskája, minden kódtúró MacGyver zsebében ott a helye. Pontosabban a Firefoxában, ugyanis oda épül be. Amire a leggyakrabban szükséged lesz:

FireQuery – http://firequery.binaryage.com/#screencast

A Firefox pluginjének pluginje, kiegészítő a kiegészítőhöz, ugyanis a Firebug képességeit terjeszti ki. Például közvetlenül lehet vele az oldalon jQuery selectorokat futtatni, ami sokkal gyorsabb, mint alertekkel kísérletezni, hogy vajon ráhibáztál-e egy selector kifejezésre. A fenti URL-en lévő moziból minden kiderül.

 

Follow

Get every new post delivered to your Inbox.

Join 34 other followers