Scribd Logo
Upload

Welcome to Scribd!

  • 2.2 HTML5

    Uploaded by

    Aleksandar Savic
    30 views33 pages
    HTML5

    Original Title

    2.2_HTML5

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    HTML5

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    30 views33 pages

    2.2 HTML5

    Uploaded by

    Aleksandar Savic
    HTML5

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    of 33

    Web Programiranje

    prof. dr Milan Vidaković

    HTML5
    Istorija
    • 1991 HTML
    • 1994 HTML 2
    • 1996 CSS 1 + JavaScript
    • 1997 HTML 4
    • 1998 CSS 2
    • 2000 XHTML 1
    • 2002 Tableless Web Design
    • 2005 AJAX
    • 2009 HTML 5

    2/33
    HTML5
    • Izmene u domenu:
    – HTML-a
    – CSS-a
    – JavaScript-a

    3/33
    IZMENE U HTML-U
    Izmene u HTML-u
    • Poboljšana semantika
    • Nova značenja rel atributa u <link rel="..."> i <a
    rel="..."> tagovima
    • Microdata
    • ARIA atributi
    • Novi elementi u <form> tagu
    • Audio i video sadržaj na stranici
    • Crtanje
    – Kanvas (Canvas)
    – Canvas 3D
    – SVG

    5/33
    Poboljšana semantika
    • Dodatni tagovi:
    – header
    • hgroup
    – nav
    – section
    – article
    • header
    • section
    – aside
    – footer
    6/33
    Poboljšana semantika
    <body>
    <header>
    <hgroup>
    <h1>Page title</h1> <article>
    <h2>Page subtitle</h2> <header>
    <h1>Title</h1>
    </hgroup>
    </header>
    </header> <section>
    <nav> Content...
    <ul> </section>
    Navigation... </article>
    </ul> </section>
    </nav>
    <aside>
    aside Top links...
    <section>
    </aside>
    <article>
    <header> <footer>
    <h1>Title</h1> footer Copyright © 2009.
    </header> </footer>
    <section> </body>
    Content...
    </section>
    </article> 01_semanticki tagovi 7/33
    Nova značenja rel atributa
    • rel atribut nema vidljivu reprezentaciju
    • On označava semantičku vezu između stranica
    • Dodaje se kao rel atribut u 'link' ili 'a'
    elementu
    <link rel="icon" href="favicon.ico" />
    <a rel="license"
    href="http://www.apache.org/licenses/LICEN
    SE-2.0">license</a>
    8/33
    Nova značenja rel atributa
    alternate Link to an alternate version of the document (i.e. print page, translated or
    mirror)
    archives Link to a collection of documents, or historical data
    author Link to the author of the document
    bookmark Permanent URL used for bookmarking
    external Link to an external document
    first Link to the first document in a selection
    help Link to a help document 02_novi rel atributi
    icon An icon that represent the the document
    index Link to an index for the document
    last Link to the last document in a selection
    licence Link to copyright information for the document
    next The next document in a selection
    nofollow Link to an unendorsed document, like a paid link ("nofollow" is used by Google,
    to specify that the Google search spider should not follow that link).
    noreferrer Specifies that the browser should not send a HTTP referer header if the user
    follows the hyperlink
    pingback URL to the pingback server
    prefetch Specifies that the target document should be cached
    prev The previous document in a selection
    search Link to a search tool for the document
    sidebar Link to a document that should be shown in the browser's sidebar
    stylesheet URL to a stylesheet to import
    tag A tag (keyword) for the current document
    up Link to a document with the context for the current document 9/33
    Microdata
    • Dodavanje semantičkog sadržaja u HTML
    • Nema vidljivu reprezentaciju, već ga koriste
    search engine-i
    • Dodatni atributi u HTML tagovima:
    – itemscope – kreira novu stavku
    – itemprop – dodaje svojstvo stavci
    – itemtype – URL na rečnik koji definiše svojstvo
    – itemid – jedinstveni identifikator prema itemtype
    specifikaciji
    10/33
    Microdata
    • Primer:
    <dl itemscope
    itemtype="http://vocab.example.net/book"
    itemid="urn:isbn:0-330-34032-8">
    <dt>Title</dt>
    <dd itemprop="title">The Reality Dysfunction</dd>
    <dt>Author</dt>
    <dd itemprop="author">Peter F. Hamilton </dd>
    <dt>Publication date </dt>
    <dd><time itemprop="pubdate" datetime="1996-01-
    26">26 January 1996</time></dd>
    </dl>

    11/33
    Microdata
    • Primer:
    <div itemscope
    itemtype="http://example.org/band">
    <p>My name is <span
    itemprop="name">Neil</span>.</p>
    <p>My band is called <span
    itemprop="band">Four Parts
    Water</span>.</p>
    <p>I am <span
    itemprop="nationality">British</span>.</p>
    </div>
    03_microdata
    12/33
    ARIA atributi
    • Accessible Rich Internet Applications
    • Za osobe sa specijalnim potrebama, koje će
    koristiti softver (navigatore) koji je u stanju da
    interpretira ove atribute
    • Dodatni atributi koji pomažu specijalizovanim
    softverima
    • Daju informacije o:
    – komponentama
    – strukturi
    – stanju 13/33
    ARIA atributi
    <ul id="tree1"
    role="tree"
    tabindex="0"
    aria-labelledby="label_1">
    <li role="treeitem" tabindex="-1" aria-
    expanded="true">Fruits</li>
    <li role="group">
    <ul>
    <li role="treeitem" tabindex="-1">Oranges</li>
    <li role="treeitem" tabindex="-1">Pineapples</li>
    ...
    </ul>
    </li>
    </ul>
    04_ARIA atributi
    14/33
    Forme
    • Novi elementi korisničkog interfejsa:
    – email polje
    – slider za odabir vrednosti
    – date polje
    – search polje
    – šablonizovano polje
    – progress bar itd.
    • Dodatni atributi:
    – <form novalidate>
    – <input autofocus >
    – <input required >
    • Pseudoklasa :invalid za neispravan sadržaj

    05_forme 15/33
    Audio i video sadržaj
    • Audio i video sadržaj se lako ugrađuje na
    stranicu tagovima <audio> i <video>

    06_audio i video 16/33


    Crtanje
    • Kanvas (tag <canvas>) definiše površinu za
    crtanje
    • Po kanvasu se crta iz JavaScript koda:
    <canvas id="canvas" width="838" height="220" />
    <script>
    var canvasContext =
    document.getElementById("canvas").getContext("2d");
    canvasContext.fillRect(250, 25, 150, 100);
    </script>

    07_canvas 17/33
    Crtanje
    • SVG (Scalable Vector Graphics) je podržan
    tagom <svg>
    • Primitive:
    – linije
    – pravougaonici
    – krugovi
    – poligoni
    – polilinije
    – gradijentni i ostali filovi
    08_svg 18/33
    IZMENE U CSS-U
    Izmene u CSS-u
    • Dodate nove mogućnosti:
    – parni i neparni redovi u tabelama
    – novi načini odsecanja viška sadržaja
    – više kolona teksta
    – ispis teksta četkicom
    – providnost
    – nov način definicije boja (HSL)
    – zaobljene ivice
    – gradijente pozadine
    – senke
    – tranzicije
    – animacije
    – fontovi koji se download-uju
    09_css i 10_fontovi 20/33
    Parni i neparni redovi u tabelama
    • Novi selektori:
    .row:nth-child(even) {
    background: #dde;
    }
    .row:nth-child(odd) {
    background: white;
    }
    • Upotreba:
    <tr class="row"> <td>ABC</td> </tr>
    21/33
    Šta sa viškom?
    • Novi atribut CSS-a – text-overflow:
    .textOverflow2 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    }

    22/33
    Broj kolona
    • Atributi css-a za podešavanje kolona:
    -webkit-column-count: 2;
    -webkit-column-rule: 1px solid #bbb;
    -webkit-column-gap: 2em;

    23/33
    Ispis teksta četkicom
    • Novi atributi za ispis četkicom:
    -webkit-text-fill-color: black;
    -webkit-text-stroke-color: red;
    -webkit-text-stroke-width: 5.00px;

    24/33
    Providnost
    • Definicija boje upotrebom RGBA funkcije:
    rgba(0, 0, 255, 0.746094);
    • Upotreba:
    color: rgba(0, 0, 255, 0.746094);
    background-opacity: rgba(0, 0, 255,
    0.746094);

    25/33
    HSL definicija boje
    • HSL[A] – Hue Saturation Luminance [Alpha]
    – Hue : ugao u krugu boja (0 – 360)
    – Saturation: zasićenje(0 – 100%)
    – Luminance: osvetljenje (0 – 100%)
    – Alpha: providnost (0 – 1)
    • Upotreba:
    hsla(120, 100%, 50%, 1.0);

    26/33
    Zaobljene ivice
    • Atribut koji definiše poluprečnik:
    border-radius: 10px;

    27/33
    Gradijenti
    • Dva tipa gradijentnih prelaza:
    – linearni
    – radijalni
    • Zajednička svojstva:
    – from(boja)
    – to(boja)

    28/33
    Gradijenti
    • Linearni gradijent definiše još i :
    – početnu i krajnju tačku,
    – stop-pozicije (u rasponu od 0 do 1)
    background: -webkit-gradient(linear, left
    top, left bottom, from(#00abeb), to(#fff),
    color-stop(0.5, #66cc00), color-stop(1,
    #fff));
    • Radijalni gradijent definiše još i:
    – početne koordinate centra i radijus
    – krajnje koordinate centra i radijus
    background: -webkit-gradient(radial, 400 50,
    0, 400 50, 200, from(red), to(#000));
    29/33
    Senke
    • Senke iza teksta:
    text-shadow: [color] [y-offset] [x-offset]
    [blur-radius];
    • Primer:
    text-shadow: #666666 2px 2px 4px;
    • Senke iza border-a:
    -webkit-box-shadow: [color] [y-offset] [x-
    offset] [blur-radius];
    • Primer:
    -webkit-box-shadow: #666666 2px 2px 4px;

    30/33
    Tranzicije
    • Način prelaza iz jednog stanja u drugo
    • Svojstvo –webkit-transition podešava prelaz:
    – transition-property – šta menjamo (npr. opacity)
    – transition-duration – koliko traje
    – transition-timing-function – funkcija prelaza (npr.
    linear, ease-in, ease-out, ease-in-out, cubic-
    bezier(x1, y1, x2, y2)-kriva)
    – transition – sve zajedno

    31/33
    Animacije
    • Svojstvo –webkit-transform definiše kako će se
    transformisati neki objekat:
    -webkit-transform: rotateZ(5deg);
    • Funkcije:
    – scale(1.25);
    – rotate[X|Y|Z](45deg);

    32/33
    Fontovi
    • Font se može skinuti i koristiti automatski:
    @font-face {
    font-family: 'LeagueGothic';
    src: url(LeagueGothic.otf);
    }
    h1 {
    font-family: 'LeagueGothic';
    }
    10_fontovi 33/33

    You might also like