Chose.cz - Weblog o webu

Základní informace

Během dnešního dne jsem zkompletoval poměrně jednoduchý JavaScript, pomocí kterého je možné vytvářet výřezy z obrázků.

Nejlepší využití tohoto skriptu je např. v administračním rozhraní při ořezávání obrázků nebo na webu, na kterém uživatelé pracují s obrázky.

Sám o sobě JavaScript fotku nevyřízne, k tomu potřebujete nějaký skriptovací (nebo programovací) jazyk jako je např. Python, PHP nebo ASP kterým zpracuje souřadnice předané “ořezávátkem".

Jak skript pracuje?

Skript je napsán pomocí jednoduchého objektového modelu, takže jeho začlenění do stránky je snadné a lze provést během několika okamžiků:

1. Prolinkování na externí javascript:

<script type="text/javascript" src="js/imageCropper.js"></script>

2. Určení formuláře

Aby mohl vůbec skript fungovat, tak musí být ve stránce formulář, do kterého se dynamicky vytvoří následující hidden proměnné:

• crop[imgId][n][x1]
• crop[imgId][n][y1]
• crop[imgId][n][x2]
• crop[imgId][n][y2]
• crop[imgId][n][w]
• crop[imgId][n][h]

Kde imgId je parametr ID ořezávaného obrázku, n je číslo ořezávacího rámečku (0-n).
Proměnné x1, y1, x2, y2 nesou informace o začátku a konci ořezávacího rámečku v pixelech.
Proměnné w a h nesou informaci o cílové velikosti obrázku.

To provedeme zavoláním metody “useForm" s parametrem nesoucí název formuláře:

<script type="text/javascript">
    imageCropper.useForm('cropForm');
</script>

3. Určení samotného obrázku pro ořez a stanovení parametrů

Posledním krokem za volaní metody “addCroper“, která akceptuje následující parametry:

• ID:
  ID obrázku, na kterém se má ořezávátko vytvořit
• width:
  výchozí šířka ořezávátka
• height:
  výchozí výška ořezávátka
• ratio
  určuje, zda zvětšování / zmenšování bude probíbat se zachováním poměru stran.
  nepovinná, akceptuje hodnotu “fixed" nebo null.
• bColor
  určuje barvu rámečku pro ořez.
  nepovinná, akceptuje hodnoty barev HEXa (např. 0f0) nebo null.

Parametr ratio s hodnotou “fixed" znamená, že zvětšování rámečku bude probíhat se zachováním poměru stran a proměnné crop[imgId][n][w] a crop[imgId][n][h] budou obsahovat zadané hodnoty proměnných width a height.

Pokud během zvětšování zmáčknete klávesu shift, pak se bude zachovávat poměr stran.

Tuto metodu lze zavolat N-krát, což znamená, že na jednom obrázku je možné zároveň pracovat s několika rámečky. Stejně tak je možné přidávat ořezávátko na více obrázků na jedné stránce, ale každý obrázek musí mít unikátní ID.

<script type="text/javascript">
    imageCropper.addCroper('obrazek',100,300,null,'0f0');
    imageCropper.addCroper('obrazek',240,160,'fixed');
</script>

Kompatibilita prohlížečů

Tento skript funguje v IE5.x, IE6, Mozilla, Firefox. V Opeře 8.x trošku zlobí, ale je zcela funkční. Další prohlížeče jsem netestoval.

Příklad

Na adrese www.chose.cz/priklady/orez-obrazku/ si můžete prohlédnout příklad použití. Pokud vám nebude cokoliv jasné, ptejte se v diskusi.

Tento bookmarklet Vám umožňuje zobrazit vlastnosti jakéhokoliv HTML prvku ve stránce pouhým přejetím kurzoru nad daným prvkem. Aktuálně vybraný prvek změní barvu pozadí na šedivou a vedle kurzoru myši se dynamicky vytvoří DIV, obsahující informace o typu prvku a plno dalších užitečných informací. Stiskem klávesy ESC skript vypnete.

Kliknutím na následující odkaz provedete spuštění bookmarkletu.

Mouseover DOM Inspektor.

Via Slayeroffice.

Server Pavla Francírka, Toplist, sice zveřejňuje globální statistiky, které poskytují spoustu hodnotných informací pro tvůrce webů, ale mají jednu zásadní vadu na kráse - jsou pouze za předchozí den, takže není možné snadno sledovat trendy.

Z toho důvodu jsem před několika dny začal ukládat data z globálních statistik Toplistu, abych mohl v čase sledovat vývoj podílu vyhledávačů v refererech. K tomuto účelu jsem vytvořil i jednoduchou webovku na adrese vyhledavace.chose.cz.

Zatím jsem nasbíral data pouze za jeden týden, ale už nyní lze vyčíst pár zajímavých údajů, např.:

1. Zhruba 40% návštěvníků se na stránky dostane přes vyhledávač
2. Polovinu z těchto návštěvníků posílá Seznam, Google posílá čtvrtinu a ostatní (Centrum, Atlas) se dělí o zbytek
3. Jednoznačně nejvíce návštěvníků posílá Seznam s 22%, následuje Google s 11% a v pozadí stojí Centrum se 4% a Atlas s 1,8% (průměr za období 21.03.2005 - 27.03.2005)

Ostatně “obrázek" si můžete udělat každý sám a na čísla se podívat na adrese vyhledavace.chose.cz.

Ve velmi dobrém článku na svém blogu Dušan Janovský (Yuhů) odhalil 2 zásadní chyby ve skriptu Navrcholu.cz, který měl za úkol měřit podporu verze Flash pluginu v prohlížeči. Článek je sice poměrně dlouhý, nicméně za přečtení opravdu stojí.

Vzhledem k tomu, že každý den přicházím v práci do kontaktu s reklamou, a to především flashovou, tak mě čísla, která Yůhů naměřil enormně zajímala.

Rozdíl v procentech podpory flashe je skutečně velký. U verze 7 je rozdíl cca 70%:

• Yuhů: 86,5%
• Navrcholu: 13,43%

Samozřejmě nelze takto striktně srovnávat výsledky měření pouze z jednoho webu (jakpsatweb.cz) proti celé paletě stránek Navrcholu.cz, ale rozhodně si lze udělat obrázek o relevanci dat.

Odkazy:

• Skutečná podpora flashe (Yuhůův weblog o webu)
• Věříte statistikám Navrcholu? (Petr Staníček - Pixylophone)

Obecné zamyšlení

V dnešní době je moderní měnit obsah stránky pomocí JavaScriptu. Skutečně první významná vlaštovka v tomto moderním trendu byl Google v podobě svého Gmailu. U nás se Gmailem se inspiroval portál Centrum, který v současné době vyvíjí svůj nový email, který je celý založen na JavaScriptu. Dále např. portál Seznam v lednu nasadil své Poznámky, což je velmi jednoduchá “JavaScript only" aplikace.

Ze své vlastní zkušenosti se domnívám, že vytvářet aplikaci, která celá stojí na JavaScriptu je cesta do pekel. JavaScript jako takový vyžaduje velkou režii na vývoj i následnou správu a údržbu. Navíc prohlížeče jsou v současné době značně nepředvídatelné a nikdy si webmaster (programátor) nemůže být jist, že daná funkce bude u klienta fungovat.

U JavaScriptových webovek (aplikací) existuje ještě jedno veliké nebezpečí - nefunkční tlačítko Zpět a Vpřed. Pro profesionála to je pochopitelné, jste pořád na jedné stránce, ale běžný uživatel neví co je to JavaScript, aplikace, stránka, ba ani prohlížeč. Tudíž když klikne na nějaký odkaz, na kterém nenajde co hledal, okamžitě a zcela automaticky klikne na tlačíko Zpět. A zde nastává zásadní problém - uživatel je úplně někde jinde, než si myslel. Zde myslím stojí za zamyšlení, jak se takový uživatel asi bude chovat např. v GigaCentru.

Proto se domnívám, že je dobré jít zlatou střední cestou, kdy JavaScript doplňuje plně funkční webovou aplikaci a přiměřeně urychluje nebo usnadňuje práci s ní. Slovy klasika: “JavaScript je dobrý sluha, ale zlý pán“.

Dynamicky vytvořený <script> tag

Rychle zpět k tématu ukázat jednoduchý způsob, jak lze do stránky dostat data z aplikace bez nutnosti znovu načtení stránky.

Máme několik řešení, pro představu:

1. Načítat data do stránky v XML pomocí interních metod prohlížeče
   Naráží na nutnou podporu práce s XML v prohlížeči a na velký přenos “zbytečných" dat (XML formát). Toto řešení je poměrně omezující a nejisté. Mimochodem přenos dat v XML s oblibou používá Google, čímž automaticky eliminuje některé prohlížeče.
2. Načítat JavaScriptový kód přes iframe
   Toto řešení je velmi snadné, funkční a podpora iframe v prohlížeči není problém. Jediná nevýhoda spočívá v přenosu zbytečných dat v podobě definice HTML stránky.
3. Načítat JavaScriptový kód přes dynamicky vytvořený script tag Ideální způsob, odstraňuje všechny nevýhody předchozích dvou řešení.

XML-RPC bez XML v JavaScriptu

Pomocí dynamicky vytvořeného script tagu vlastně vytvoříme vlastní XML-RPC (Remote Procedure Call), bez XML. Budeme volat skript na serveru, který bude “odpovídat" pouze JavaScriptovým kódem, který zpracují funkce implementované ve stránce.

Ukázka

Chcete vidět, jak to vlastně funguje? Klikněte a uvidíte

Kompletní zdroj jednoduchého příkladu:

<script type="text/javascript">
var vystup = document.getElementById('vystup');

function stahniData(akce) {

    // odmazeme stary skript, pokud existoval
    var hlavicka = document.getElementsByTagName('head')[0];
    var dataLoader = document.getElementById('scriptLoader');
    if(dataLoader) hlavicka.removeChild(dataLoader);

    // vytvorime novy element script
    script = document.createElement('script');
    script.id = 'scriptLoader';
    script.src = 'javascript-rpc.php?akce='+akce+'&r='+Math.random();

    // POZOR, DULEZITE!! Skript musime vlozit do stranky 
    // pomoci DOM - appendChild()
    // Ihned po vlozeni prohlizec stahne skript a spusti jej
    x = document.getElementsByTagName('head')[0];
    x.appendChild(script);

    return false;
}

function vypisText(txt) {
    // nejsnazsi cesta, vlozime novy kod ke staremu na konec
    vystup.innerHTML += txt;
}

function chyba(txt) {
    // obycejny alert s hlaskou
    alert(txt);
    return true;
}

function vymazData() {
    // v jednoduchem cyklu smazeme vsechny elementy v prvku vystup
    while(vystup.hasChildNodes()) vystup.removeChild(vystup.childNodes[0]);
    return false;
}

stahniData('dolly');
</script>

Celé kouzlo je pouze ve správném využití DOM a především funkce createElement(). Doporučuji prostudovat příklad na samotatné stránce.

Tento způsob načítání dat funguje spolehlivě ve všech verzích IE, Gecko a Opeře. Jediné problémy jsou v prohlížečích na jádře KHTML (Konqueror, Safari), kde nedojde ke stažení dynamicky vytvořeného elementu script.