How to correctly insert a Flash into XHTML

Although flash is the most spread active element of webpages, a lot of designers still don't know the correct way to insert it into HTML document.. The standard concept, advertised by Macromedia is absolutely unusable.

…pokračování continue

12. 4. 2006 HTML & CSS Komentáře: 11

Jak správně vložit Flash do stránky

Ač je Flash nejrozšířenějším aktivním prvkem webových stránek, mnoho webdesignérů neví, jak jej správně do stránky vložit. Výchozí způsob, které propaguje Macromedia, je totiž naprosto nepoužitelný.

Připomeňme si jej:

<object
  classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
  width="550" height="400">
  ...
  <param name="movie" value="movie.swf" />
  <param name="quality" value="high" />
  ...
  <embed src="movie.swf" quality="high" bgcolor="#ffffff" width="550" height="400"
    type="application/x-shockwave-flash"
    pluginspage="http://www.macromedia.com/go/getflashplayer">
  </embed>
</object>

Atributy elementu <object> jsou podřízeny potřebám Internet Exploreru a v jiných prohlížečích Flash nezobrazí. Což zachraňuje element <embed>, který však není součástí HTML ani XHTML. Kód je tedy nevalidní, plný proprietárních obezliček.

V čem vidím největší problém, tak že nelze vytvořit alternativní obsah, jenž bude zobrazen uživatelům, kteří Flash nemají (cca 10 %).

…pokračování continue

12. 4. 2006 HTML & CSS Komentáře: 52

How to avoid activation of Active-X in IE

Updated December 11, 2007: I’m happy to say that Microsoft has now licensed the technologies from Eolas Technologies and removing the “click to activate” requirement in Internet Explorer. Read Knowledge Base 945007.

Recently, I wrote that soon it will be necessary to click on every Flash application in Internet Explorer in order to activate it. It looks like this:

…pokračování continue

12. 4. 2006 HTML & CSS Komentáře: 2

Dean Edwards a jeho IE7

Geniální udělátko o kterém se u nás kupodivu moc neví. Některým webdesignérům prý natolik usnadnilo život, že začali fetovat a krást, aby zase nějaké problémy měli. Takže opatrně s tím!

Už to budou dva roky, co Dean Edwards začal psát záplatu pro Internet Explorer, která umožní webdesignerům používat pokročilé CSS vlastnosti. A nejen je. Nazval ji vyloženě nešťastně IE7, nejspíš nevěřil ve vznik další verze Microsoftího prohlížeče.

…pokračování continue

19. 1. 2006 HTML & CSS Komentáře: 33

Color mixer aneb míchátko

Právě jsem vytvořil dvě jednoduchá míchátka barev. Jsou určena pro uživatele webových aplikací (nikoliv webdesignéry, jako třeba Pixyho generátor schémat). Slouží tedy k interaktivní volbě barvy. Dávám je volně k dispozici pod licencí GPL.

Download ColorMixer Michatko:

Míchátka používají několik fikaných kouzel pro manipulaci s barvami. Díky nim jsem v DHTML dosáhl podobné funkčnosti, jaká je známá spíše z desktopových aplikací. Tedy nechci se tu naparovat, jen že jsem nic podobného na webu zatím neviděl.

Míchátko s barevným proužkem

Připomíná „Color Picker“ z Adobe Photoshopu. Funguje pod IE 6, Mozillou a Operou (ostatní prohlížeče jsem neměl možnost ověřit, můžete zkusit sami a poslat report). (odkaz)

(aktualizováno: s míchátkem na stejném principu přišel už o měsíc dříve Dalton Lloyd, patří mi tedy krásné druhenství)

Míchátko s barevným prstencem

Ovšem tady si snad prvenství obhájím. Co ty na to, Daltone?

Implementace

Pro implementaci stačí nalinkovat do stránky příslušný CSS a JS soubor (viz jednotlivé příklady) a poté vytvořit a nakonfigurovat objekt mixéru.

<link rel="stylesheet" type="text/css"
   href="dgxcolormixer.css" />

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

<script type="text/javascript">

// definujeme obsluhu událostí
function myChangeColorHandler(mixer) { ... }
function myConfirmHandler(mixer) { ... }

// vytvoříme objekt
var mixer = new DGXColorMixer();

// nastavíme handlery
// pro změnu barvy
mixer.onChange = myChangeColorHandler;
// pro povrzení změny
mixer.onConfirm = myConfirmHandler;

// barva
mixer.setColor('FF0030');
// nebo
mixer.setColor(new RGBColor(10, 20, 30));
// nebo
mixer.setColor(new HSVColor(280, 100, 50));

// případně včlenit do existujícího elementu
mixer.setParent('main1');
// nebo
el = document.getElementById('main1');
mixer.setParent(el);

// dosud je mixér skrytý, tak jej zobrazíme
mixer.show();

</script>

Mixér lze propojit s editačním políčkem input a také nastavit, zda bude fungovat jako vyskakovací okénko (automaticky se umístí hned vedle editačního políčka). Tady se můžete podívat na příklad.

// create mixer
mixer = new DGXColorMixer();

// propoj s prvkem s id 'color1'
// druhý parametr nastavuje popup režim
mixer.attachInput('color1', true);