Štítek Webdesign ×

6. 8. 2011

HTML 5 elementy ve starých IE

Starší verze IE (< IE9) neznají HTML 5 elementy jako jsou například article, aside nebo header. Aby se stránka ve starších IE nerozbila stačí do HTML hlavičky přidat následující javascript:

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

Případně je možné využít podmíněný komentář a vložit skript přímo z repositáře:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Ještě samozřejmě přidám odkaz na autora skriptu HTML5 Shine.

Podobných šikovných udělátek existuje několik:

http://code.google.com/p/ie7-js/ - donutí různé verze IE, aby se chovali jako „normální“ prohlížeč
http://www.modernizr.com/ - usnadní otestovat přes 40 moderních vlastností prohlížeče

#msie, #webdesign

18. 1. 2011

Minimalizace kódu je proces, při kterém se odstraní z kódu veškerá vata – komentáře, zbytečné mezery, odsazení atd. Výsledný minimalizovaný kód je menší a rychleji se přenese do prohlížeče. Pro minimalizaci kódu existuje řada nástrojů – některé se soustředí na Javascript, jiné zase umí minimalizovat CSS nebo HTML.

Můj oblíbenec YUI compressor zvládne minimalizovat CSS a Javascript – je naprogramovaný v Javě a spouští se přes příkazovou řádku.

Následující příkaz vytvoří nový soubor sample.min.css, který bude obsahovat minimalizovaný kód ze souboru sample.css:

java -jar yuicompressor-2.4.2.jar -o sample.min.css sample.css

Celý proces minimalizace kódu je možné automatizovat prostřednictvím nástroje Apache ANT o kterém jsem psal minule.

Následující sekvence úloh vytvoří ve složce build/wp-content/themes/omdesign minimalizované verze všech CSS souborů, které pro změnu najde ve složce wp-content/themes/omdesign.

<target name="css.minify">
  <mkdir dir="build/wp-content/themes/omdesign" />
  <apply executable="java" parallel="false" verbose="true" failonerror="true" dest="build/wp-content/themes/omdesign">
    <fileset dir="wp-content/themes/omdesign">
      <include name="*.css" />
    </fileset>
    <arg line="-jar"/>
    <arg path="c:\Program Files\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar"/>
    <arg line="--line-break 0"/>
    <srcfile/>
    <arg line="-o"/>
    <mapper type="glob" from="*.css" to="*.css"/>
    <targetfile/>
  </apply>
</target>

Je důležité dobře nastavit všechny cesty, jinak se úloha nespustí. Celou sekvenci je možné vylepšit změnou příkazu mapper, díky které budou nové soubory opatřeny o příponu min:

<mapper type="glob" from="*.css" to="*.min.css"/>

Všimněte si, že jednotlivé přepínače jsou zasílány do YUI compressoru pomocí příkazu arg. Na závěr alternativní sekvence pro Javascript:

<target name="js.minify">
  <mkdir dir="build/wp-content/themes/omdesign/js" />
  <apply executable="java" parallel="false" verbose="true" failonerror="true" dest="build/wp-content/themes/omdesign/js">
    <fileset dir="wp-content/themes/omdesign/js">
      <include name="*.js" />
    </fileset>
    <arg line="-jar"/>
    <arg path="c:\Program Files\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar"/>
    <srcfile/>
    <arg value="--charset" />
    <arg value="UTF-8" />
    <arg line="-o"/>
    <mapper type="glob" from="*.js" to="*.js"/>
    <targetfile/>
  </apply>
</target>

#apache-ant, #webdesign, #yui-compressor

21. 3. 2010

Pořádek ve fontech zajistí NexusFont

NexusFont je velmi užitečný freeware manažer fontů. NexusFont Vám umožní:

instalaci/odinstalaci fontů (včetně zálohy)
mazání fontů
procházení nainstalovaných fontů
generování živých náhledů (příkladů)

Co do formátů NexusFont podporuje TrueType, OpenType a Adobe Type1. Dále program dokáže vyhledat duplicitní fonty. Vytisknout, nebo exportovat náhledů na všechny znaky fontů.

Na webu xiles.net najdete kromě NexusFont také další zajímavé programy:

NexusFile – file manažer
NexusTextView – prohlížeč souborů
NexusImage – prohlížeč obrázků
NexusSide – sidebar ala Windows

#fonty, #grafika, #webdesign

18. 3. 2010

Geolokace snadno a rychle

Geolokace se stává skutečným hitem současného webu (Další velká věc – Vaše poloha). Skoro se mi až chce napsat, nezapomeňte naskočit, odjíždíme. Ke snadnému a bezpečnému naskočení Vám může velmi pomoci Javascriptová knihovna YQL.

YQL Vám umožní:

zjistit pozici návštěvníka webu pomocí W3C geo API
vyhledat souřadnice na základě řetězce (paříž, francie)
provádět reverzní geokódování
zjistit polohu webu (serveru) na základě URL adresy
a nebo zjistit název dle IP adresy

Použití knihovny není vůbec složité:

yqlgeo.get('paris,fr',function(o){
  alert(o.place.name+' ('+
    o.place.centroid.latitude+','+
    o.place.centroid.longitude+
  ')');
})

Předchozí kód Vám zjistí souřadnice Paříže.

#geo, #gis, #gps, #js, #webdesign

14. 2. 2010

Naučte se Anglicky, německy nebo arabsky

Jednoduchý nápad, ve kterém se schovává úžasná síla. Přesně tak bych definoval ezLemon. ezLemon je webová aplikace, která Vám pomůže s procvičováním jazykových dovedností. Každý gramotný člověk na světě ovládá nějaký jazyk. Své znalosti, ale běžně nepředává dál (leda tak svým dětem). Jenže co kdyby je předával? Co kdyby se stal učitelem?

Přesně tohle je základní myšlenka aplikace ezLemon. Každý člověk, který se chce učit jazyk, může ostatní zároveň vyučovat. Jednoduše prostě spojíte Araba lačnícího po znalostech českého jazyka s Čechem, který by rád arabsky. Najděte si kamaráda v cizině, ze kterým budete pilovat své jazykové dovednosti.

Kromě toho na ezLemon najdete dokumenty nebo videa.

#jak-na-to, #webdesign

1 2 … 6 7 Další »

Štítek Webdesign ×

HTML 5 elementy ve starých IE

Apache ANT a YUI Compressor

Pořádek ve fontech zajistí NexusFont

Geolokace snadno a rychle

Naučte se Anglicky, německy nebo arabsky