• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
(WS14) Emanuel Blagonic - HTML5 u praksi
 

(WS14) Emanuel Blagonic - HTML5 u praksi

on

  • 500 views

 

Statistics

Views

Total Views
500
Views on SlideShare
499
Embed Views
1

Actions

Likes
0
Downloads
5
Comments
0

1 Embed 1

http://www.verious.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    (WS14) Emanuel Blagonic - HTML5 u praksi (WS14) Emanuel Blagonic - HTML5 u praksi Presentation Transcript

    • HTML5 u praksiWeb::Strategija 14 Emanuel Blagonić
    • Prije godinu dana...
    • Zašto smo se odlučili za HTML5?
    • Dobili smo nove tagove...
    • sectionarticleheaderfooter navasidehgroup
    • Novi tagovi = novasemantička vrijednost
    • Kako ih koristiti?
    • section<section id=”content”> ...</section>
    • section<section id=”content”> <section id=”inner-content”>...</section> <section id=”sidebar”>...</section> <section class=”clear”>...</section></section>
    • section<section id=”content”> <section id=”inner-content”>...</section> <section id=”sidebar”>...</section> <section class=”clear”>...</section></section>
    • article<article> <h2>Heading</h2> <p>Short description...</p></article>
    • header<header id=”page-header”> <a href=”/” id=”logo”> <img src=”logo.png” /> </a></header>
    • header<header> <h1><a href=”#”>Heading</a></h1> <p class=”meta author”>Emanuel Blagonić</p></header>
    • footer<footer id=”page-footer”> <nav> <ul> <li><a href=”#”>Navigation item</a></li> </ul> </nav></footer>
    • footer<footer> <p class=”meta tags”><a href=”#”>Tag1</a></p></footer>
    • <article> <header> <h1><a href=”#”>Naslov</a></h1> <p class=”meta author”>Emanuel Blagonić</p> </header> <p>Short description...</p> <footer> <p class=”meta tags”><a href=”#”>Tag1</a></p> </footer></article>
    • nav<nav> <a href=”#” class=”button-mobile”>Show navigation</a> <ul class=”navigation-primary”> <li><a href=”#”>Home</a></li> <li><a href=”#”>About us</a></li> <li><a href=”#”>Contact</a></li> <li><a href=”#”>Blog</a></li> </ul> <ul class=”navigation-secondary”> <li><a href=”#”>Sitemap</a></li> <li><a href=”#”>Privacy policy</a></li> </ul></nav>
    • aside<aside id=”main-sidebar” class=”sidebar”> ...</aside>
    • hgroup<hgroup> <h1>Our company</h1> <h2>Tagline for our company</h2></hgroup>
    • hgroup<article> <header> <hgroup> <h1>Article title</h1> <h2>Subtitle for the article</h2> </hgroup> <p class=”meta author”>Emanuel Blagonić</p> </header> <p>Short description...</p></article>
    • Kako ovo koristiti — danas? bez problema
    • <!DOCTYPE html><html lang=”en”><head> <meta charset="utf-8" /> <script src=”script.js”></script> <link rel="stylesheet" href="file.css"></head>
    • <!DOCTYPE html><html lang=”en”><head> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/ html5.js"></script> <![endif]--></head>
    • <!DOCTYPE html><html lang=”en”><head> <!--[if lt IE 9]> <script> document.createElement("header" ); </script> <![endif]--></head>
    • Kako pišete kod? zadržite stare navike
    • <!-- HTML5 <3 --><!-- Odaberite svoj stil pisanja tagova --><img src=”logo.png”><IMG SRC=”logo.png”><img src=”logo.png” /><br> <!-- je OK --><br /> <!-- je isto OK :) --><!-- Odaberite svoj stil pisanja tagova... ali budite konzistentni-->
    • A što s formama? forme na steroidima
    • <input type="date"><input type="datetime"><input type="time"> <input type="text"<input type="month"> autofocus><input type="week"> <input type="text"<input type="color"> required><input type="range"><datalist> <input type="text" placeholder="Search"><input type="email"><input type="tel"><input type="url">
    • <input type="tel"> <input type="url"> <input type="email">
    • Podrška u Internet Exploreru? Nepostojeća, ali postoji rješenje. http://www.modernizr.com/ http://code.google.com/p/webforms2/
    • Zaključak?Čekati ili krenuti?
    • HTML5 podrška SVGCanvasWebGLAudioVideo * Vrijedi za Internet Explorer 9 i novije
    • Audio i video codeciogg/vorbis mp3 wav AACogg/theora H.264 WebM * Vrijedi za Internet Explorer 9 i novije
    • Podrška za formeSearchPhone URL EmailDatalist * Biti će podržano od Internet Explorera 10 i novijih
    • Gdje naučiti više? http://www.w3.org/TR/html5/ http://html5doctor.com/ http://html5boilerplate.com/http://www.quirksmode.org/html5/index.html
    • Hvalawww.blagonic.com@emanuelblagonicemanuel@blagonic.com