Tag Archives: HTML5

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: ,,,

Advertisements

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: ,,,

HTML5 item és project template Visual Studiohoz

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: ,,,

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: ,,,

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.