AspNet.sk     O súťaži HTML5     Výsledky súťaže HTML5     Pravidlá súťaže     Internet Explorer 9 - príručka pre vývojárov
Menu

Praktické cvičenia

Základný pohľad na použitie štandardov CSS3, HTML5 a SVG v prehliadači Internet Explorer 9

 

mslogo_DS_300

Ciele praktického cvičenia

Toto praktické cvičenie ukazuje, ako v prehliadači Internet Explorer 9 použiť niektoré aspekty webových štandardov. Po dokončení tohto cvičenia budete mať základné znalosti o týchto oblastiach:

                    Podpora webových štandardov

                    DOM fitrovanie

                    Podpora SVG

Stručný popis

Internet Explorer 9 podporuje HTML5, CSS3 a iné nové webové štandardy. Toto praktické cvičenie sa sústreďuje na kľúčové oblasti nových vlastností HTML5, DOM filtrovanie, SVG.

Predpoklady zvládnutia praktického cvičenia

·         Základné znalosti webového vývoja.

·         Inštalácia prehliadača Internet Explorer 9

·         Voliteľne: inštalácia nástroja Visual Web Developer 2010 Express s Serv.Pack-om 1

Viac informácií

Internet Explorer 9 – príručka pre vývojárov

Zdrojové kódy

Scenár

V tomto praktickom cvičení vytvoríte “widget” so simuláciou informácie o počasí, ktorý využije podporu HTML5 v prehliadači Internet Explorer 9.

Predpokladaný čas potrebný pre dokončenie praktického cvičenia

30 minút

Pomôcky

Použite po stlačení klávesu F12 (vývojárske nástroje) zabudované do Internet Explorer-a 9, ktoré vám uľahčia ladenie s podporou “breakpoint-ov” a iné funkcie.

Cvičenie č.1 – Podpora webových štandardov

V tomto cvičení vytvoríte jednoduchú webovú stránku, ktorá využije niektoré z možností nových štandardov. Štandardy umožňujú webovým dizajnérom vytvoriť rovnakým kódom webové stránky pre viacero prehliadačov. Internet Explorer 9 má vylepšenú podporu pre kaskádové štýly, HTML5 a má zabudovanú podporu pre niekoľko SVG modulov.

Internet Explorer 8 spĺňa špecifikáciu CSS2.1. Internet Explorer 9 pridáva podporu pre sadu komponentov CSS3.

Úloha č.1: Pridanie zaoblenia útvarov použitím vlastnosti CSS3 Border-Radius

V tejto úlohe pridáte zaoblenie útvarom použitím vlastnosti “border radius”. Skôr ako štýl zmeníte, prezrite si predpripravenú webovú stránku so základom “widget-u”.

1.       Rozbaľte priložený kód a otvorte ho v Visual Studiu 2010, prípadne v bezplatnom nástroji Visual Web Developer 2010 Express  alebo priamo v Internet Explorer-e 9. Hlavnou stránkou projektu je “default.html”. (Visual Studio 2010 so Service Pack-om 1 alebo Visual Web Developer Express 2010 so Service Pack-om 1 sú vývojárske prostredia, ktoré vám pri písaní kódu poskytnú kontextové dokončovanie syntaxe, validáciu štýlov a kódu aj s podporou HTML5.)

 V prípade otvorenia stránky “default.html” v Internet Explorer-e 9 z lokálneho disku povoľte spúšťanie javascriptového kódu volaného stránkou.  (Potvrďte “Allow blocked content” - “Povoľte blokovaný obsah” v notifikačnom okne na stránke.)

Stránka obsahuje jednoduchý obdĺžnik s obrázkom na pozadí.

2.       Otvorte stránku “default.html” v editačnom móde. (Výber editora ponecháme na vás. Postačí vám aj obyčajný editor textu typu “poznámkový blok”. Editor webových stránok v Visual Studiu 2010 SP1 alebo Visual Web Developer 2010 Express ponúka prehľadnosť,  HTML5 intellisense a kontrolu “html/css/js” kódu.) Na začiatku stránky je linka na súbor kaskádových štýlov – “weather.css”.

3.       Otvorte súbor “weather.css”. Upravte v ňom triedy pre okraje (“border”) obdĺžnika s počasím tak, aby sa zaoblili. Na definovanie zaoblenia  použite vlastnosť  “border-radius”. Pre zaistenie podpory iných browserov pridajte aj vlastnosti “-moz-border-radius” a “-webkit-border-radius”.

Výsledná sekcia CSS súboru “weather.css” s vyznačenými úpravami bude mať nasledujúci obsah:

 

.rainwrap

{

    position: absolute;

    top: 0;

    left: 0;

    width: 506px;

    height: 238px;

    overflow: hidden;

    background-image: url(rain.jpg);

    border: 0px solid transparent;

    -webkit-border-radius: 25px;

    -moz-border-radius: 25px;

    border-radius: 25px;

}

.bottomshade

{

    position: absolute;

    top: 50%;

    left: 0;

    width: 100%;

    height: 50%;

    border: solid 0px transparent;

    -webkit-border-bottom-left-radius: 25px;

    -webkit-border-bottom-right-radius: 25px;

    -moz-border-radius-bottomleft: 25px;

    -moz-border-radius-bottomright: 25px;

    border-bottom-left-radius: 25px;

    border-bottom-right-radius: 25px;

}

 

 

4.       Úpravy uložte a klávesou F5 aktualizujte okno prehliadača. Všimnite si, že obdĺžnik má zaoblené okraje.

5.       Otvorte stránku v Firefox-e alebo v prehliadači Google Chrome, aby ste sa presvedčili, že úprava je podporovaná aj v iných prehliadačoch. (Rovnako aj na konci ďalších úloh skontrolujte výsledky úprav aj v iných prehliadačoch podporujúcich HTML5.)

Úloha č.2: Pridanie RGBA pozadia

Internet Explorer 9 pridáva podporu modulu CSS3 Color, ktorý umožňuje používať modely farieb RGBA, HSL a HSLA, vlastnosť nepriesvitnosti a kľúčové slovo “currentColor” (aktuálna farba). Rozširuje aj podporu kľúčového slova “transparent”.

Upravme “widget” tak, že mu pridáme čierne pozadie s 50% úrovňou nepriesvitnosti v dolnej časti použitím modelu farieb  RGBA. Tento model, podobne ako model RGB, obsahuje v prvých troch hodnotách reprezentáciu červenej, zelenej a modrej farby v hraniciach od 0 do 255. Posledný parameter  RGBA modelu je alfa kanálom , ktorý reprezentuje nepriesvitnosť s hodnotami medzi 0 (transparentná) a 1 (nepriesvitná).

1.       V súbore  “weather.css”  pridajte vlastnosť  “background-color:rgba(0,0,0,0.5);” do selektora .bottomshade”.

 

.bottomshade

{

    position: absolute;

    top: 50%;

    left: 0;

    width: 100%;

    height: 50%;

    border: solid 0px transparent;

    -webkit-border-bottom-left-radius: 25px;

    -webkit-border-bottom-right-radius: 25px;

    -moz-border-radius-bottomleft: 25px;

    -moz-border-radius-bottomright: 25px;

    border-bottom-left-radius: 25px;

    border-bottom-right-radius: 25px;

    background-color: rgba(0,0,0,0.5);

}

 

 

2.       Úpravy uložte a klávesou F5 aktualizujte okno prehliadača. Všimnite si, že dolná časť obdĺžnika má tmavší odtieň:

Viac informácií o module CSS Color a pozadiach nájdete v IE9 príručke pre vývojárov v odseku “Modul CSS3 pre prácu s farbami”.

Úloha č.3: Použitie vlastnosti CSS3 Opacity na vytvorenie efektu vyblednutia

Skúsme implementovať do “widget-u” možnosť meniť teplotnú škálu z jednotiek Celsius na Fahrenheit. Pri prechode medzi škálami použijeme vlastnosť nepriesvitnosti na vytvorenie efektu vyblednutia.

1.       Do stránky “default.html”  pridajte hyperlinku na prepínanie medzi teplotnými škálami. Stačí pod “div” značku s identifikátorom “temp” pridať nalsedujúci zvýraznený “div” blok:

 

<div id="temp" class="toptext">20°C</div>

 

<div id="FC" class="units">

    <a id="out" href="#" onclick="fadeOutIn()">°F | °C</a>

</div>

 

 

2.       Na zmenu úrovne nepriesvitnosti pridajte javascriptový kód, ktorý tak vytvorí efekt vyblednutia. Vložte nasledujúci kód do súboru “weather.js”:

 

// vyblednutie skaly teplot

 

var intendedOpacity = 1.000;

var theGraphic = null;

var Cel = 1;

 

function fadeOutIn() {

    theGraphic = document.getElementById("temp");

    var fading = 0;

    if (fading == 0) {

        fading = 1;

        fadeOut();

    }

}

 

function fadeOut() {

 

    if (typeof theGraphic.style.opacity == 'undefined') {

        intendedOpacity = 0;

        theGraphic.style.visibility = "hidden";

        return;

    }

 

    if (intendedOpacity > 0.0) {

        intendedOpacity = Math.max(intendedOpacity - 0.025, 0);  

        // neumoznite ist pod nulu

        theGraphic.style.opacity = intendedOpacity;

        window.setTimeout(fadeOut, 10);

    }

    else

    {

        if (Cel == 1) {

            document.getElementById("temp").innerHTML = "68&deg;F";

            Cel = 0;

        }

        else {

            document.getElementById("temp").innerHTML = "20&deg;C";

            Cel = 1;

        }

        fadeIn();

    }

}

 

function fadeIn() {

    if (typeof theGraphic.style.opacity == 'undefined') {

        intendedOpacity = 0;

        theGraphic.style.visibility = "visible";

        return;

    }

 

    if (intendedOpacity < 1.0) {

        intendedOpacity = Math.min(intendedOpacity + 0.025, 1);

        // niektore prehliadace odmietnu hodnotu > 1

        theGraphic.style.opacity = intendedOpacity;

        window.setTimeout(fadeIn, 10);

    }

    else {

        fading = 0;

    }

}

 

 

Zmenu v súbore “weather.js” uložte.

3.       Nový “div” blok vložený do stránky “default.html” obsahuje deklaráciu css triedy “units”. Vložte jej definíciu do súboru “weather.css”:

 

.units

{

    color: white;

    padding-right:5%;

    font: 10pt Verdana;

    text-align: right;

}

 

 

4.       Úpravy uložte a klávesou F5 aktualizujte okno prehliadača. Kliknite na linku “°F | °C” a všimnite si práve implementovaný efekt vyblednutia.

 

Úloha č.4: Webové fonty

Lepšia typografická kontrola je konzistentnou vlastnosťou každej novej verzie CSS. Internet Explorer 9 vylepšuje prácu s CSS fontami podporou modulu CSS3 Fonts, vrátane podpory formátu Web Open Font Format (WOFF) a “raw” fontov.

Zmeňte “widget” tak, aby použil Web Open Font Format pre teplotu a názov mesta.

1.       Vložte do súboru “weather.css”  nasledujúci kód pre vytvorenie aliasu nového fontu:

 

@font-face {

    font-family: HandelGothicOTS;

    src: url('HandelGothicOTS.woff');

}

 

 

2.       Zaktualizujte  v css súbore selektory  “.toptext” a “.bottomtext” tak, aby referencovali pridaný webový font. Zmeny, ktoré je potrebné vykonať, sú v nasledujúcom kóde zvýraznené:

 

.toptext

{

    color: white;

    font: 27pt HandelGothicOTS, sans-serif;

    font-size: 60pt;

    text-align: right;

    padding-right:5%;

}

.bottomtext

{

    color: White;

    padding: 10px 15px;

    font: 27pt HandelGothicOTS, sans-serif;

    font-size: 20pt;

    text-align: right;

}

 

 

3.       Úpravy uložte a klávesou F5 aktualizujte okno prehliadača. Všimnite si, že font pre teplotu a názov mesta je iný, načítaný z WOFF definície.

      Viac informácií o WOFF formáte nájdete na adrese http://www.w3.org/TR/WOFF/ .

Cvičenie č.2: HTML5

Internet Explorer 9 implementuje dôležitú sadu vlastností HTML5. Podpora elementov “video” a “audio” umožňuje natívne, hardvérovo akcelerované prehrávanie videa a audioobsahu na webovej stránke bez nutnosti inštalácie externého “plug-inu”. Vývojári majú takto možnosť vkladať na stránky videá a audioklipy podobne jednoducho, ako keď pridávajú na stránku obrázky. Naviac podpora elementu “canvas”  umožňuje dynamické renderovanie grafiky s využitím hardvérovej akcelerácie cez Windows a grafickú kartu. Podpora Selection API dáva možnosť výbrať text na úrovni kódu stránky.

Úloha č.1: Canvas

Element “<canvas>” je časťou špcifikácie HTML5, ktorá umožňuje dynamické skriptovateľné renderovanie 2D grafiky. V našom “widget-e” použijeme element “canvas” na reprezentovanie teploty ako grafického “termometra”.

1.       Pridajte do “default.html” pod “div” blok s identifikátorom ”FC” zvýraznený HTML blok:

 

<div id="FC" class="units">

   <a id="out" href="#" onclick="fadeOutIn()">°F | °C</a>

</div>

 

<div id="teplomer" class="teplomer">

  <canvas id="Temp1" height="10" width="100%"></canvas>

</div>

 

Značka “canvas” nám umožní umiestniť  png obrázok do požadovanej oblasti “widget-u”.

 

2.       Pridajte do súboru “weather.js”  kód funkcie “drawTerm” spolu s deklaráciou premennej “segment” a inicializáciou jej vlastnosti “src”, ktorý bude “zapĺňať” teplomer obrázkom po úsekoch.

 

Poznámka: Uistite sa, že voláte funkciu “drawTherm” vo funkcii “init”:

 

function init() {

    drawTherm("Temp1", 68);

}

 

// canvas teplomer

var segment = new Image();

segment.src = "term.png";

 

function drawTherm(ElementID, rating) {

    var canvas = document.getElementById(ElementID);

    var ctx = canvas.getContext("2d");

 

    for (var x = 0; x < rating; x += 10) {

        ctx.drawImage(segment, x, 0, 10, 10);

    }

}

 

 

3.       Nakoniec zmeňte štýlovanie teplomera. Pridajte nasledujúci selektor do “weather.css”.

 

.teplomer

{

    position: absolute;

    top: 45%;

    left: 3%;

    width: 90%;

    height: 10px;

    border: solid 1px white;

    -webkit-border-radius: 0px 10px 10px 0px;

    -moz-border-radius: 0px 10px 10px 0px;

    border-radius: 0px 10px 10px 0px;

    background-color: rgba(255,255,255,0.2);

}

 

 

4.       Úpravy uložte a klávesou F5 aktualizujte okno prehliadača. Widget má pridaný grafický teplomer.

 

 

Úloha č.2: Pridanie elementov <video> a <audio> pre multimédia

Video a audio element umožňujú vkladať mutimediálny obsah priamo do HTML stránky. Webový vývojári upravujú správanie týchto elementov rôznymi atribútmi.

1.       Pridajte do widget-u videoklip tak, že do tela bloku zobrazujúceho mesto a skratku krajiny v  “default.html” vložíte nasledujúci kód:

 

<div class="bottomshade">

                                        

   <div id="kamera" class="videocam">

      <video controls height="64px" width="115px">

         <source src="mesto.mp4" type="video/mp4" />

            Váš prehliadač nepodporuje element video.

      </video>

   </div>

 


Značka “video” indikuje browseru zobrazenie videoprehrávania, definuje  prednastavenú šírku a výšku plochy pre video, takže “browser” má ešte pred preberaním informácie o rozmeroch videorámčekov. Zabraňuje sa tým prekresľovaniu plochy po prebratí videa. Vo vnútri elementu “
<video>” je definované umiestnenie zdrojového súboru a jeho typ.

2.       Pridajte do “weather.css” nasledujúci selector, ktorým určíte pozíciu videa a pridáte “webkamere” okraje:

 

.videocam

{

    position: absolute;

    top: 25px;

    left: 15px;

    border: solid 1px white;

}

 

 

3.       Úpravy uložte a klávesou F5 aktualizujte okno prehliadača. Na ploche “widgetu” sa zobrazí video a keď nad neho umiestnite kurzor myši, zobrazia sa ovládacie prvky na začatie/pozastavenie prehrávania videoklipu.

 

Cvičenie č.3 – DOM filtrovanie

HTML5 podporuje iterátory, ktoré umožňujú prechádzať filtrovaným pohľadom na DOM (Document Object Model) vašej stránky. Filtrovanie DOM môže byť veľmi užitočné, keď potrebujete zmeniť podmnožinu vlastností elementov, akými je napríklad viditeľnosť.

Úloha č.1: Filtrovanie dát predpovede počasia

V tejto úlohe vytvoríte funkciu nazvanú “showNewFilter”, ktorá bude použitá používateľom na zobrazenie vybraných typov dát z predpovede. Funkcia akceptuje dva parametre. Prvým je filtrovacia funkcia, ktorá bude určovať, ktoré položky zobraziť, druhým je hodnota na nastavenie štýlu zobrazenia, ak položka spĺňa kritéria.

1.       Pridajte do “weather.js”  funkciu, ktorá zaktualizuje zobrazenie filtrovaných položiek.

 

function showNewFilter(filter, display) {

    var predpovedZoznam = document.getElementById("predpoved");

    var nodeIterator = document.createNodeIterator(

        predpovedZoznam,

        NodeFilter.SHOW_ELEMENT,

        filter,

        false

    );

    var node = nodeIterator.nextNode();

    node.style.display = '';

 

    while (node = nodeIterator.nextNode()) {

        node.style.display = display;

    }

}

 

Pre položky v zozname platí, že “none” hodnota druhého parametra ich skryje a ‘’ ich opäť zviditeľní.

2.       Pridajte filtrovacie funkcie, v ktorých zistíte typy predpovedí a jednu , ktorá vráti všetky položky.

 

if (!NodeFilter) {

    var NodeFilter = new Object();

 

    NodeFilter.SHOW_ELEMENT = 1;

    NodeFilter.FILTER_ACCEPT = 1;

    NodeFilter.FILTER_REJECT = 2;

    NodeFilter.FILTER_SKIP = 3;

}

 

function allFilter(node) {

    return NodeFilter.FILTER_ACCEPT;

}

 

function predpovedFilter(node, predpovedTyp) {

    var result;

 

    if (node.nodeName == 'TD') {

        if (node.title == predpovedTyp)

            result = NodeFilter.FILTER_ACCEPT;

        else

            result = NodeFilter.FILTER_REJECT;

    }

    else

        result = NodeFilter.FILTER_ACCEPT;

 

    return result;

}

 

 

function zrazkyFilter(node) {

    return predpovedFilter(node, "zrazky");

}

 

function slnkoFilter(node) {

    return predpovedFilter(node, "vychodzapadslnka");

}

 

 

Keď si používateľ vyberie iba zobrazenie infor mácií o zrážkach, budeme volať  “showNewFilter” s hodnotou “zrazkyFilter” v pozícii prvého parametra a s hodnotou “” pre druhý parameter.

NodeFilter je objekt, ktorý ukladá niektoré vymenované hodnoty, ktoré sú použité iterátorom filtra na určenie toho, či element iterovať. Funkcia filtra bude zavolaná raz pre každý element v DOM (pod vybraným rodičovským elementom) a bude vystavená iterátorom, ak funkcia filtra vráti  NodeFilter.FILTER_ACCEPT. Ak funkcia filtra vráti  NodeFilter.FILTER_REJECT, potom iterátor element preskočí.

3.       Otvorte súbor “default.html” a pridajte do neho niekoľko elementov používateľského rozhrania, ktoré umožnia zavolať “showNewFilter” s vhodnými parametrami na filtrovanie zrážok a východu/západu slnka. Všimnite si, že pri filtrovaní najskôr skryjeme všetky dáta jedným volanímshowNewFilter” a potom vystavíme filtrované položky ďalším volaním “showNewFilter”. Všetko by sme mohli  urobiť aj v jednom volaní, ale v našom príklade volíme pre demonštračné účely volania dve, aby sme funkciu ponechali v čo najjednoduchšom tvare. Pridajte na stránku “default.html” nasledujúci kód hneď pod blok značky “div” s identifikátorom “city”:

 

<div id="city" class="bottomtext">Bratislava, SVK</div>

                       

<div class="predpovedtien">

 

   <div id="filterActions" class="predpovedactions">

      <a href="javascript:void(0);"

         onclick="showNewFilter(allFilter,     

         'none');showNewFilter(zrazkyFilter, '');">

         Zrážky</a> |

      <a href="javascript:void(0);"

         onclick="showNewFilter(allFilter,

         'none');showNewFilter(slnkoFilter, '');">

         Východ/Západ slnka</a>

   </div>

 

   <table id="predpoved">

      <tr><th>Dnes</th><th>Zajtra</th><th>Pozajtra</th></tr>

      <tr title="zrazky">

        <td title="zrazky">20%</td>

        <td title="zrazky">30%</td>

        <td title="zrazky">40%</td>

      </tr>

      <tr title="vychodzapadslnka">

        <td title="vychodzapadslnka">5:17 / 21:08</td>

        <td title="vychodzapadslnka">5:18 / 21:07</td>

        <td title="vychodzapadslnka">5:20  / 21:05</td>

      </tr>

   </table>

</div>

 

 

4.       Iniciálne filtrovanie dát bude nastavené na zrážky, preto pridajte do funkcie “init” v súbore “weather.js” nasledujúci zvýraznený kód:

 

function init() {

    drawTherm("Temp1", 68);

 

    showNewFilter(allFilter, 'none');

    showNewFilter(zrazkyFilter, '');

 

 

5.       Nakoniec aktualizujte súbor “weather.css” vložením nasledujúcich selektorov formátujúcich dáta:

 

.predpovedtien

{

    margin-left: 30%;

}

 

.predpovedactions

{

    color: White;

    font: 8pt Verdana;

    text-align: center;

}

 

table, th, td

{

    color: White;

    font: 10pt Verdana;

    text-align: center;

}

 

table

{

     width:95%;

     margin-left:10px;

     background-color: rgba(0,0,0,0.4);

     -webkit-border-radius: 10px;

     -moz-border-radius: 10px;

     border-radius: 10px;

}

 

td, th

{

    width:100px;

}

 

th

{

    background-color: rgba(0,0,0,0.4);

    border-radius: 8px 8px 0px 0px;

    font-weight: bold;

    border-bottom-style: solid;

    border-bottom-width: thin;

    border-bottom-color: #FFFFFF;

}

 

 

6.       Úpravy uložte a klávesou F5 aktualizujte okno prehliadača so stránkou “default.html”.  Kliknite na linky “Zrážky” a “Východ/Západ slnka” a všimnite si, že zoznam sa aktualizuje tak, že zobrazí iba položky, ktoré majú nastavenú príslušnú značku titulku.

Cvičenie č.4 – Scalable Vector Graphics (SVG)

Podpora Scalable Vector Graphics (SVG – škálovateľná vektorová grafika) bola jednou z najviac požadovaných vlastností pre Internet Explorer, pomocou ktorej je možné pridať vizuály rôznych veľkostí na webové stránky bez nutnosti inštalovať dodatočný “plug-in” alebo separátny prehliadač vektorovej grafiky.

SVG podpora v Internet Explorer-e 9 je založená na SVG 1.1 (druhom vydaní) “draft” špecifikácie pre “browser-y”. Podobne ako spracovanie multimédií v HTML5 aj SVG v Internet Explorer-e 9 využíva možnosti hardvérovej akcelerácie grafiky.

Úloha č.1: Pridanie indikátora smeru vetra pomocou SVG

Nakreslite jednoduchú šípku, ktorá bude reprezentovať kompas indikujúci smer vetra.

1.       Vložte do “default.html” nasledujúci “div” blok obsahujúci značku SVG:

 

<div id="infographic" class="rainwrap">

               

   <div id="kompas" class="kompaswrap">

      <svg width="60" height="60" version="1.1"

        xmlns="http://www.w3.org/2000/svg">

          <polygon id="vietor" points="5,0 25,50 45,0 25,10"

            style="fill:#9999ff; stroke:#dddddd;stroke-width:1"/>

      </svg>

   </div>

 

 

Blok SVG definuje polygón-šípku, ktorou budeme otáčať použitím JavaScript-u.

2.       Pridajte do “weather.js” nasledujúcu funkciu na simulovanie smeru vetra. Náš kód bude náhodne otáčať indikátorom o 5 stupňov každú polsekundu:

// kompas vetra

 

var smerVetra = 0;

 

function vietor() {

    var kompas = document.getElementById("vietor");

 

    smerVetra += Math.floor(Math.random() * 11) - 5

      kompas.setAttribute("transform",

        "rotate(" + smerVetra + ", 25, 25)");

    window.setTimeout(vietor, 500);

}

 

3.       Pridajte volanie funkcie “vietor()” do funkcie init()”:

 

   showNewFilter(zrazkyFilter, '');

 

   vietor();

 

 

4.       Nakoniec umiestnite indikátor do “widget-u” pridaním nasledujúceho selektora do súboru “weather.css”:

 

.kompaswrap

{

    position: absolute;

    left: 10%;

    top: 15%;

    width: 50px;

    height: 50px;

}

 

 

5.       Úpravy uložte a klávesou F5 aktualizujte okno prehliadača so stránkou “default.html”.  Všimnite si pridaný indikátor smeru vetra s náhodným rotovaním.

Viac informácií o module SVG nájdete v IE9 príručke pre vývojárov v odseku “Grafika SVG”.

 

Zhrnutie

V tomto praktickom cvičení ste si vyskúšali v prehliadači Internet Explorer 9 niektoré aspekty webových štandardov:

                    Zaoblenie útvarov, nepriesvitnosť, RGBA model farieb a webové fonty v CSS3

                    Elementy “canvas” a “video” v HTML5

                    DOM filtrovanie

                    Grafickú indikáciu pomocou SVG

 

Copyright © 2002 - 2011 CHASTIA s.r.o., Igor Stanek
Portál je hostovaný na serveroch firmy Quantasoft - www.qsh.sk.