centi.sk

HTML5 tagy v IE

Tue, 20 Apr 2010 20:53:35 GMT

HTML5 ešte st�le nie je fin�lne, avšak už dnes sa vo webdeveloperskom svete skloňuje na každom kroku a modern� prehliadače postupne implementuj� mnoh� z�jeho čast�. HTML5 okrem in�ho prin�ša hromadu nov�ch s�mantick�ch tagov. Takže zbohom <div class="article">, <div class="footer">, <div class="sidebar"> a vitajte <article>, <footer>, <aside>. Ale nie je všetko zlato, čo sa blyšt�. Vieme, v�ktorom browsri naraz�me,�však?

HTML5 tagy m�žu byť v�mnoh�ch prehliadačoch st�le veden� ako nezn�me. To n�m ale nijak nebr�ni v�tom, aby sme ich použ�vali. M�žeme ich „rozh�bať“ Javascriptom a „vyfarbiť“ CSSkom (v�niektor�ch browsroch im treba nastaviť aspoň z�kladn� vlastnosti ako display: block). Bohužial Internet Explorer (vo verzii 8�a menej) sa k�t�mto tagom chov� veľmi kruto a tv�ri sa, ako keby ich nepoznal a nedovol� n�m ich našt�lovať pomocou CSS. Takže konečn�? Nie�nutne.

HTML5, Internet Explorer�– zozn�mte sa

Pomocou mal�ho triku dok�žeme IEčko prin�tiť, aby sa s�HTML5 tagmi (resp. ak�mykoľvek nezn�mymi tagmi) zozn�milo. Stač� veľmi jednoduch� Javascript:

document.createElement( 'header' );

Zd� sa, že vytvoren�m nezn�meho elementu v�Javascripte si IEčko uprav� svoj „zoznam podporovan�ch elementov“ a umožn� n�m s�nov�mi tagmi plnohodnotne pracovať. V�hodou je, že takto javascriptom vytvoren� element nie je ani nutn� prip�jať do dokumentu pomocou appendChild(), č�m si ušetr�me zbytočn� ošah�vanie�DOMu.

A�kedže vždy existuje aspoň jedna m�drejšia hlava ako t� naša, nemus�me p�sať vlastn� javascript na pridanie podpory do IEčka, ale m�žeme využiť html5shiv.

Internet Explorer 9 Test Drive

Tue, 16 Mar 2010 20:44:35 GMT

Zd� sa, že Microsoft si vzal „�spech“ IE6 medzi webdevelopermi k�srdcu a snaž� sa r�chlo dohnať (alebo sa aspoň pribl�žiť na dohľad) ostatn� modern� prehliadače. Dnes dal v�voj�rom k�dispoz�cii Test Drive pripravovan�ho Internet Exploreru�9.

Vo vydan�ch inform�ci�ch o�IE9 s� zauj�mav� hlavne časti hovoriace o�zlepšen� podpory modern�ch štandardov:

CSS3
- Pokročil� CSS3 selektory
- Zlepšen� podpora CSS3 Color modulu�– rgba(), opacity
- border-radius
V�kon a r�chlosť Javascriptu
HTML5
- Podpora generick�ch elementov (nezn�mych elementov)�– teda možnosť pracovať s�nimi v�CSS a Javascripte
SVG

Všetky tieto hlavn� ťah�ky sa daj� v�Test Drive otestovať na str�nke s�downloadom, ktor� z�roveň sl�ži ako rozcestn�k na uk�žky (anim�cie, akcelerovan� grafika, testy,�…).

Zmien sa dočkaj� i�n�stroje pre v�voj�rov, ktor� m�me dostupn� už i�v�IE8. K�HTML/CSS/JS inšpektorom pribudol i�Sieťov�:

"Ajaxov�" formul�re pomocou Iframe

Fri, 19 Feb 2010 20:45:33 GMT

AJAX sem, AJAX tam. Dnes už každ� pidi-webov� aplik�cia asynchr�nnu javascriptov� komunik�ciu na niečo použ�va. Pomocou AJAXu je možn� odoslať takmer všetko, dokonca i�formul�re. Tie však maj� p�r obmedzen�.

Ajaxov� formul�r

serializ�cia formul�rov�ch prvkov
upload

Jedn�m z�probl�mov je fakt, že v�pr�pade AJAXu si mus�me parametre requestu poskladať sami v�textovej podobe. To znamen�, že si mus�me prvky formul�ra zoserializovat, čo pri množstve r�znych typov prvkov (textov� input a textarea, checkbox, radio button, select box, …) nie je jednoduch�.

Druh� a v�čš� probl�m s� formul�re s�uploadom. Javascript nem� pr�stup k�d�tam vybran�ho s�boru (HTML5 už pr�cu so s�bormi definuje a napr�klad Firefox3.6�dok�že so s�bormi už celkom pekne pracovať) a preto si jeho obsah do requestu nem�žeme pridať sami. Tento probl�m sa často rieši pomocou r�znych Flashov�ch nadstavieb (napr. posielanie pr�loh v�Gmaili).

Iframe to the rescue

Formul�r však najspolahlivejšie odošle s�m prehliadač, tak prečo ho z�tohto procesu vytl�čať? Formul�re (podobne ako odkazy) maj� k�dispoz�cii atrib�t target, ktor� m�že obsahovať meno okna, do ktor�ho sa formul�r m� odoslať. Nemus� to však byť nov� okno, či tab. M�že to byť i iframe, čo s�v�hodou využijeme.

Na formul�r zaves�me vlastn� submit handler, v�ktorom:

vytvor�me nov� iframe
previažeme ho s�formul�rom pomocou atrib�tov name a�target
a na takto vytvoren� iframe zaves�me load handler, v�ktorom si počk�me na „ajaxov�“ odpoveď�servra

function formSubmit( e ) {
    var e = evt.fix( e );
    var form = e.target;

    form.target = form.id + '-iframe';
    var iframe = document.createElement( 'iframe' );
        iframe.name = form.target;

    document.body.appendChild( iframe );
    evt.add( iframe, 'load', getXmlResponse );
}

evt.add( document.getElementById( 'form' ), 'submit', formSubmit );

Odpoveď m�že pr�sť v�r�znych form�ch (textov�, JSON, XML). Ja som ned�vno začal v�AJAXovej komunik�cii použ�vať pr�ve XML a tu som narazil na p�r drobnost�, ktor� IE rieši trochu inak. Ide o�z�skanie XML dokumentu z�nač�tan�ho iframu a o�z�skanie obsahu konkr�tneho XML�tagu.

Iframe, XML a Internet Explorer

XML odpoveď z�iframu z�skame pomerne jednoducho nač�tan�m dokumentu okna iframu: iframe.contentWindow.document. Internet Explorer bohužial v�tomto kuse k�du vr�ti HTML dokument, ktor� obsahuje farebne zv�raznen� XML (zobrazte si nejak� XML priamo v�IE a uvid�te o�čom hovor�m). Našťastie však po XML dokument nemus�me chodiť ďaleko:

var xmlDocument = iframe.contentWindow.document;
var xmlDocumentIE = iframe.contentWindow.document.XMLDocument;

Na podobn� drobn� rozdiel naraz�me i�pri pokuse o�z�skanie textov�ho obsahu XML�tagu:

var xmlTag = xmlDocument.getElementsByTagName("person")[0];

var value = xmlTag.textContent;
var valueIE = xmlTag.text;

Po vyriešen� oboch drobnost� m�že naše spracovanie XML z�iframu vyzerať napr�klad�takto:

function getXmlResponse( e ) {
    var e = evt.fix( e ),
        iframe = e.target,
        xmlDocument = iframe.contentWindow.document.XMLDocument || iframe.contentWindow.document;

        setTimeout( function() {
            iframe.parentNode.removeChild( iframe );
        }, 0 );

    // example
    var person = xmlDocument.getElementsByTagName( 'person' )[0];
    document.getElementById('example-output').innerHTML = person.textContent || person.text;
}

Cel� k�d si m�žete prezrieť v�akcii v�malej uk�žke. V�pr�klade na pr�cu s�eventami použ�vam nar�chlo zbastlen� objekt�k evt. V�praxi však s�najv�čšou pravdepodobnosťou šiahneme po obľ�benom JS frameworku.

Niektor� JS frameworky obsahuj� i�podporu pre odosielanie formul�rov pomocou Iframe, napr�klad io-upload-iframe modul z�YUI3. Pr�ve u�tohto som však narazil na probl�m zo z�skan�m XML dokumentu v�IE, pretože aktu�lna verzia obsahuje�chybu.

Logovanie javascriptov�ch ch�b

Thu, 11 Feb 2010 23:39:16 GMT

Modern� webov� aplik�cie s� pln� javascriptov, a tie s� pln� ch�b. V�čšinu z�ch�b sa podar� v�priebehu v�voja a testovania odhaliť, ale v�praxi je takmer nemožn� odhaliť ich všetky.

Najlepš�mi a z�roveň najhorš�mi testermi s� samotn� už�vatelia aplik�cie. Najlepš� s� preto, lebo je ich omnoho viac ako našich intern�ch testerov a hlavne použ�vaj� aplik�ciu v�re�ln�ch podmienkach. Najhorš� s� preto, lebo nikto z�nich n�m pr�padn� chybu neohl�si, akur�t sa naserie :). Našťastie však existuje jednoduch� sp�sob, ako sa na pr�padn� chyby upozorniť vlastn�mi silami.

Na riešenie som narazil v�čl�nku How to log JavaScript errors. Každ� modern� prehliadač* umožňuje zaregistrovať si onerror event handler, ktor� sa zavol� pri každej javascriptovej chybe a v�podobe parametrov dostane �daje o�danej�chybe:

Chybov� hl�ška
Cesta k�s�boru, v�ktorom nastala chyba
Č�slo riadku, na ktorom nastala chyba

Jednoduch� monitoring ch�b m�že potom vyzerať napr�klad takto (prevzat� z�uveden�ho čl�nku):

window.onerror = function(errorMessage, url, line) {
    var loggerUrl = "https://www.xing.com/js/logger";
    var parameters = "?description=" + escape(errorMessage)
        + "&amp;url=" + escape(url)
        + "&amp;line=" + escape(line)
        + "&amp;parent_url=" + escape(document.location.href)
        + "&amp;user_agent=" + escape(navigator.userAgent);

    /** Send error to server */
    new Image().src = loggerUrl + parameters;
};

Uveden� pr�klad použ�va na logovanie vytvorenie obr�zka smeruj�ceho na monitorovaciu URL obohaten� o�inform�cie o�chybe, či prostred�. Samozrejme je možn� namiesto toho použiť AJAX, uveden� obr�zkov� riešenie však netrp� obmedzen�m na rovnak� dom�nu ako�AJAX.

* Prehliadače s�WebKit jadrom obsahuj� chybu, ktor� bohužial znemožňuje tak�to monitoring, pretože event handler nedostane inform�cie o�chybe.