Noutati importante in HTML5 – Elemente si atribute HTML –

View Github Repository Open presentation in a new window

serbanghita

See all presentation from serbanghita

Noutati importante in HTML5 – Elemente si atribute HTML –

0 0

HTML5-presentation

Codul sursa si exemple din prezentarea "HTML5 - De la site-uri mai performante la jocuri web multiplayer"

On Github serbanghita / HTML5-presentation

De la site-uri mai performante la jocuri web multiplayer

Serban Ghita

Senior Software Engineer

  • 5 ani in Avangate
  • 11 ani in IT & eCommerce
  • 2002 - primul job in IT
  • contribui la proiecte open-source

Despre mine

Despre mine

Despre mine

Despre mine

Despre mine

Despre mine

Despre mine

Serban Ghita

Senior Software Engineer

In Avangate lucrez in prezent la:

  • Control Panel
  • Shopping Cart
  • Shopping Cart API
Despre mine

Avangate Control Panel

Despre mine

Avangate Shopping Cart

Despre mine

Avangate Shopping Cart

Despre mine

Open-source

https://github.com/serbanghita

Sa ne cunoastem

  • Cati dintre voi au folosit elemente sau atribute HTML5?
  • Cati dintre voi folositi JavaScript sau librarii JavaScript?
  • Cati dintre voi au dezvoltat aplicatii web de tip single-page?

Agenda prezentare

  • Termeni noi utilizati in prezentare – 10 min
  • Ce este HTML5 – 1 min
  • Care sunt noile elemente si atribute (exemple) – 30 min
  • Pauza intrebari – 15 min
  • Care sunt noile API-uri (exemple) – 50 min
  • Pauza intrebari – 15 min
  • Pauza cafea – 20 min
  • Studii de caz – 30 min

Termeni noi

  • Progressive enhancement
  • Mobile first
  • Polyfills
  • Milestones / Legacy
  • Browser compatibility
Termeni noi

Progressive enhancement

Stategie de web design prin care toti vizitatorii site-ului pot experimenta cel putin o versiune de baza functionala. Cei ce au browsere sau conexiuni mult mai capabile vor beneficia de o experienta de navigare imbunatatita.

Alternativa la stategia "Graceful degradation".

Ex: CSS3 border-radius, box-shadow, gradients, etc.

Termeni noi

Mobile first

Strategie de web design prin care este conceput un site destinat dispozitivelor clasice si mobile.

De citit: Desktop-first to Mobile-first with Bootstrap - Mark Otto

Termeni noi

Polyfills

Un cod (de regula JavaScript) ce suplineste o functionalitate indisponibila in browser-ul vizitatorului.

A nu se confunda cu widgets, care de fapt adauga functionalitati noi.

Exemple polyfills: Modernizr Wiki Exemplu widget: <input type="range"> - implementare jQuery Mobile

Termeni noi

Milestones / Legacy

Un software ce a fost facut acum cativa ani si care este utilizat de clienti in mod activ nu poate fi rescris peste noapte si nici nu poate fi intrerupt pentru un upgrade major.

Un milestone reprezinta un capitol nou in viata unui software ce poate functiona in mod diferit fata de cele anterioare, care devin automat legacy.

Exemplu: Avangate Template Editor

Termeni noi

Browser compatibility

Abilitatea unui browser de a recunoaste o functionalitate noua.

caniuse.com/...

Ce este HTML5?

Ce este HTML5?

Va multumesc

O seara minunata in continuare!

Ce este HTML5

upgrade de la HTML 4.01 si XHTML 1.1 tag-uri si atribute noi API-uri noi (in majoritate JavaScript) o abordare diferita in constructia paginilor web renuntare totala la librarii 3rd party (Flash, Silverlight, Java applets, etc)

Noutati importante in HTML5

Elemente si atribute HTML

APIuri

De retinut: Elementele si atributele noi simuleaza comportamentul unor widget-uri JavaScript populare.

Credits: Sergey Mavrody

Tag-uri si atribute

Reguli de parsare a paginilor mult mai relaxate.

Atat <img src="test.jpg" /> cat si <img src="test.jpg"> sunt acceptate.

Tag-uri si atribute

Elemente noi

<article> <aside> <header> <nav> <footer> <section> <main> <summary> <details> <figure> <figcaption> <time> <datalist>

<canvas> <audio> <track> <video> <embed> <source>

<menu> <menuitem> <keygen> <mark> <meter> <progress> <rp> <rt> <ruby> <wbr> <bdi> <command> <output> <data>

  • bdi - bi-directional tag - izoleaza parti din text care sunt in alta limba cu directie de scris diferita.
  • mark - marcheaza codul sursa definit in interiorul 'code' sau 'pre'.
Tag-uri si atribute

Noi tipuri de campuri pentru formulare

email, number, search, url, range, date, time, tel, color

De retinut: Influenteaza comportamentul browserelor de pe dispozitivele mobile.

Tag-uri si atribute

<input type="text">

Tag-uri si atribute

<input type="email">

Tag-uri si atribute

<input type="number">

Tag-uri si atribute

<input type="url">

Tag-uri si atribute

<input type="date">

Tag-uri si atribute

<input type="time">

Tag-uri si atribute

Atribute noi pentru campuri

placeholder, pattern, required, autofocus, list, min, max, step

Tag-uri si atribute

Atribute noi pentru elemente

  • Atributul type="" este optional pentru <script> si <style>
  • <meta charset="...">
  • <script async src="...">
  • Atributele data-* pot sa contina orice fel de date. Ex: <span data-userid="1234">Nume</span> elem.dataset.userid
  • elem.contenteditable si document.designMode
Tag-uri si atribute

Diferente de markup

Urmeaza exemple de cod HTML5.

Tag-uri si atribute

Diferente de markup

HTML4 / XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5

<!DOCTYPE html>

Exemplu pagina HTML5

Tag-uri si atribute

Diferente de markup

<!DOCTYPE html>
<html>
    <head>
        <title>Şerban Ghiţă</title>
    </head>
    <body>
        <p>HTML5 presentation</p>
    </body>
</html>
Tag-uri si atribute

Diferente de markup

<!DOCTYPE html>
<html>
    <head>
        <!-- simple markup -->
        <meta charset="UTF-8" />
        <title>Şerban Ghiţă</title>
    </head>
    <body>
        <p>HTML5 presentation</p>
    </body>
</html>
<!-- Old markup for meta charset -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Tag-uri si atribute

Diferente de markup

Dispozitivele mobile sunt limitate de marimea fizica a ecranului, de marimea mainii utilizatorului si nu de rezolutie.

Proprietatea viewport a fost introdusa de Apple pentru iPhone, iPod si iPad. Chiar daca aceasta nu a fost inca standardizata de catre W3C, majoritatea producatorilor de browsere au adoptat-o.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

De parcurs: Lista cu marimea viewport-ului pe diferite dispozitive mobile

Exemplu de pagina web cu si fara viewport.

Tag-uri si atribute

Diferente de markup

<!-- Header-ul unei sectiuni de tip 'page', 'section', 'article' etc. -->
<header>

<!-- Meniul principal de navigare prin site.
De obicei continut de 'header'. -->
<nav>

<!-- Continutul principal al paginii. -->
<main>

<!-- Delimiteaza un continut generic. -->
<section>

<!-- Contine un articol, blog post, stire, comentarii. -->
<!-- Motoarele de cautare si parserele vor folosi
continutul din interior independent de restul site-ului. -->
<article>

<!-- Structura ce are legatura cu tot ce se afla in vecinatatea ei. -->
<aside>

<!-- Footer-ul unei sectiuni de tip 'page', 'section', 'article' etc. -->
<footer>
Tag-uri si atribute

Diferente de markup

<body>
    <header><nav></nav></header>
    <main>
        <aside></aside>
        <article>
            <header></header>
            <p></p>
            <footer></footer>
        <article>
    </main>
    </footer></footer>
</body>
Tag-uri si atribute

Diferente de markup

<body>
  <!-- page header -->
 <header>
  <h1>My Blog</h1>
  <p>Last Modified: <span>2013-10-24</span></p>
  <!-- main nav -->
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About me</a></li>
    <li><a href="projects.html">My projects</a></li>
   </ul>
  </nav>
 </header>
 <!-- page main content -->
 <main>
  <!-- aside related to articles -->
  <aside>
      <nav>
       <h1>My blogroll</h1>
       <ul>
        <li><a href="http://blog.first.com/">First Blog</a>
          <li><a href="http://blog.second.com/">Second Blog</a>
       </ul>
    </nav>
  </aside>
  <!-- featured article(s) -->
  <article>
    <!-- article's own header -->
   <header>
    <h1>My First Blog Post</h1>
   </header>
   <div>
    <p>Today I went to the beach and had a lot of fun.</p>
    <!-- aside related to the current article body. Eg: quote -->
    <aside>
      <h1>It was warm</h1>
      <p>The weather was exceptional that day!</p>
    </aside>
    ...more content...
   </div>
   <!-- article's own footer -->
   <footer>
    <p>Posted <time datetime="2013-10-23">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <!-- page footer -->
 <footer>
  <p>Copyright © <span>2013</span> <span>Serban Ghita</span></p>
  <p><a href="cookies.html">About cookies</a>
     <a href="policy.html">Privacy Policy</a>
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>
Tag-uri si atribute

Combatibilitate tag-uri noi HTML5

~9
Tag-uri si atribute

Polyfill

<!--[if lte IE 8]>
<script type="text/javascript">
    var newTags = ['header', 'section', 'footer'];
    for(var i=0;i<newTags.length;i++){
        document.createElement(newTags[i]);
    }
</script>
<style type="text/css">
    header, section, footer { display:block; }
</style>
<![endif]-->

Exemplu pagina HTML5

Tag-uri si atribute

Microdata

  • Ce este microdata?
  • Cum se aplica pe Internet
  • Exemplu live
Tag-uri si atribute

Microdata

Este un set de atribute HTML ce se aplica peste elementele HTML existente in pagina pentru a da textului un inteles semantic specific. (ex. eveniment, review, produs, etc)

Este folosit de motoarele de cautare in afisarea rezultatelor dar si de parserele diverselor servicii social media.

Exista 3 scheme microdata, insa cel mai popular este schema.org.

Tag-uri si atribute

Microdata

schema.org reprezinta o colaborare dintre Google, Microsoft, and Yahoo! prin care se urmareste crearea unui vocabular comun pentru descrierea datelor dintr-o pagina web.

<div class="prezentare">
    <span itemscope itemtype="http://schema.org/Event">
        <img itemprop="image" src="/docs/en/events/techhub-logo-h70px.png" />
        <p>
            <meta itemprop="startDate" content="2013-10-29T16:00">In data de Marti 2013-10-29 ora 16:00 o sa am la
            <span itemprop="location" itemscope itemtype="http://schema.org/Place">
                <span itemprop="name">TechHub Bucuresti</span> </span>o prezentare numita "
            <span itemprop="name">HTML5 - De la site-uri mai performante la jocuri web multiplayer</span>".
        </p>

Testare microdata: Google Structured Data Testing Tool

Exemplu: Implementare microdata

Tag-uri si atribute

Microdata

Cum este aplicat la Google

  • Article
  • Book Reviews
  • Events
  • Local Businesses
  • Movies
  • Products
  • Restaurants
  • Software Applications
  • TV Episodes

Intrebari

Urmeaza API-uri HTML5

APIuri

Sumar
  • Web Storage
  • Offline Web Applications
  • WebWorkers
  • WebSockets
  • Geolocation
  • Device orientation
  • Touch events
  • Video & Audio
  • Speech input
  • Canvas 2D
  • SVG
  • WebSQL & IndexedDB
APIuri

WebStorage

Permite stocarea permanenta in browser a unor informatii de tip cheie:valoare sub forma de string.

Spatiu stocare: Chrome, Firefox, Opera - 5mb; IE - 10mb, BlackBerry 10 - 25mb

Spatiu stocare cookie: 4kb

window.localStorage
// Set
localStorage.setItem('name', 'Serban Ghita');
localStorage.setItem('position', JSON.stringify({x: 10, y: 10}));
// Get
localStorage.getItem('name');
JSON.parse(window.localStorage.getItem('position'));
// Delete
localStorage.removeItem('name');

Demo: live in browser

Compatibilitate: caniuse.com/localstorage

APIuri

Offline Web Applications

Modalitate de a stoca local, pe dispozitivul clasic sau mobil, fisiere necesare aplicatiei web (JavaScript, CSS, imagini, etc).

<html manifest="cache.appcache">
window.applicationCache
CACHE MANIFEST

CACHE:

# Desktop Version: 1.0.0.10
javascript/app.min.js
css/app.min.css
images/sprite.png

NETWORK:
*

Demo Offline Web App: Chess Web Application

Compatibilitate: caniuse.com/appcache

APIuri

Webworkers

Sunt un fel de cronuri in browser. Rezolva task-uri in background fara sa blocheze interfata. Task-urile nu au acces la DOM si ruleaza "sandboxed".

var worker = new Worker('task.js');
worker.onmessage = function(e) {
    console.log(e.data);
};
worker.postMessage('data');

De retinut: in JavaScript obiectele se paseaza prin referinta dar in interiorul unui worker obiectele sunt copiate. Este important ca dupa ce worker-ul isi termina treaba sa goliti datele din memorie.

Demo: live

Compatibilitate: caniuse.com/webworkers

APIuri

Websockets

Modalitate de a creea comunicatii persistente, in ambele sensuri intre aplicatia web si server.

Trebuie un server ce foloseste protocolul ws://. Ex.: node.js

var conn = new WebSocket("ws://server.com/chat");
conn.onmessage = function(msg) {
    msg = JSON.parse(msg); // decode JSON into object
}
conn.onclose = function() { }
conn.send('Ce mai faci?');

Recomandare: folositi la inceput libraria Socket.io si servicii externe de server cu suport pentru Websockets.

Demo: Joc multiplayer

Compatibilitate: caniuse.com/websockets

APIuri

Geolocation

Ofera posibilitatea de a gasi locatia corespunzatoare dispozitivului conectat (clasic sau mobil).

navigator.geolocation
navigator.geolocation.getCurrentPosition()
navigator.geolocation.watchPosition()
navigator.geolocation.getCurrentPosition(function(pos){
    console.log(pos);
});

Demo: implementare geolocatie cu Google Static Maps

Compatibilitate: caniuse.com/geolocation

APIuri

Device orientation & motion

window.addEventListener('deviceorientation', function(e) {
  console.log('deviceorientation', e.alpha, e.beta, e.gamma);
}, false);
window.addEventListener('devicemotion', function(e){
    console.log('devicemotion', e.acceleration, e.accelerationIncludingGravity);
}, false);
window.addEventListener('orientationchange', function() {
    console.log('orientationchange', window.orientation);
}, false);
window.addEventListener("resize", function() {
    console.log('resize: ', window.outerWidth, window.outerHeight);
}, false);

Demo: local Chrome, remote iPad

Demo: HTML5Rocks.com

APIuri

Device orientation change

APIuri

Device orientation change

APIuri

Touch Events

Evenimente JavaScript utile pentru interactiunea cu dispozitivele mobile.

var elem = document.getElementById('myPage');
elem.addEventListener("touchstart", handleStart, false);
elem.addEventListener("touchend", handleEnd, false);
elem.addEventListener("touchcancel", handleCancel, false);
elem.addEventListener("touchleave", handleEnd, false);
elem.addEventListener("touchmove", handleMove, false);

Demo: local Chrome, remote iPad

APIuri

Video & Audio

APIuri

Video & Audio

<audio src="audio.mp3" preload="auto" controls></audio>
<video src="movie.ogg" autoplay controls></video>

Folositi servicii externe de upload ca YouTube, SoundCloud, etc.

Recomandare: VideoJS

Demo: cum sa modificam elementele native din <audio> si <video>.

Demo remote

APIuri

Speech

Powered by Google servers. Momentan API-ul este disponibil numai celor din Canada si USA.

Serviciul este gratis, il puteti activa din Google API Console.

<input type="text" x-webkit-speech />

Demo: local field test

Demo: Google Web Speech API

APIuri

Canvas 2D

<canvas id="canvas"></canvas>
var layer = document.getElementById('canvas'),
    ctx = layer.getContext('2d');

Demos: Mozilla Demos

Referinta rapida: HTML5 Canvas Cheat Sheet

Specificatii complete cu poze: Dive Into HTML5 - Canvas

APIuri

Canvas 2D

window.requestAnimationFrame

Alternativa pentru animatii la

window.setInterval
window.setTimeout
APIuri

Canvas 2D

Cum sa faci captura ecranului direct din browser.

Google+ foloseste o *tehnica similara pentru debugging si feedback.

Demo: local, live

Cum sa folosesti acest feature in productie? Iata o idee.

Creeaza capturi ale ecranului bazate pe informatia din pagina: HTML2Canvas

"Using HTML5 canvas Javascript to take screenshots": *StackOverflow

APIuri

Canvas 2D

Cum sa faci capturi ale ecranului si sa le salvezi.

var imgString = canvas.toDataURL();
$.post("http://test.com/save/screenshot", {data: imgString});

Demo: local, remote

APIuri

SVG

Scallable Vector Graphics: Indiferent de rezolutie, imaginea este la fel de clara pentru ca este copusa din vectori.

Recomandare: folositi SVG in functie de context.

Sprite clasic:

background-image: url('sprite.png');

Sprite cu SVG:

background-image: url('sprite.svg');

Referinta: Resolution Independence With SVG

APIuri

SVG

APIuri

WebSQL

Deprecated, un fel de MySQL sau SQLlite in browser.

// Init the db.
var db = openDatabase('mydb', '1.0', 'Serban Ghita database', 1024);

Demo WebSQL: Live

Compatibilitate: caniuse.com/websql, caniuse.com/indexeddb

APIuri

IndexedDB

Alternativa la WebSQL, un fel de NoSQL database in browser.

var db,
    request = window.indexedDB.open("mydb", 1);

Demo IndexedDB: Live

Compatibilitate: caniuse.com/websql, caniuse.com/indexeddb

Intrebari

Urmeaza studii de caz

Pauza

20 min

Studii de caz

  • Avangate Mobile Shopping Cart
  • Avangate Visitor Web App
  • Chess Web App
  • Cut the Rope
  • Joc multiplayer
Studii de caz

Avangate Mobile Shopping Cart

Demo: live test

Studii de caz

Avangate Mobile Shopping Cart

A trebuit sa alegem o solutie care sa fie disponibila implicit pentru vizitatori. Solutia trebuia sa fie usor de intretinut si compatibila cu iOS, Android OS si Windows Phone OS.

  • Twitter Bootstrap
  • jQTouch
  • jQuery Mobile
  • De la 0

.v.2.0 - http://getbootstrap.com/2.3.2/

v.3.0 - http://getbootstrap.com

Beta, acum se numeste jQT - http://jqtjs.com

Castigatorul a fost jQuery Mobile - http://jquerymobile.com

Studii de caz

Avangate Visitor Web App

Demo: remote

Studii de caz

Chess Web App

Source: GitHub
Studii de caz

Cut the rope

Jocul vine sub forma de aplicatie nativa pentru iOS si Android OS. Pentru dispozitivele clasice s-a folosit HTML5 canvas.

Studii de caz

Joc multiplayer

  • Joculet facut seara tarziu.
  • Introduceti-va numele (cat mai unic).
  • Intrati de pe laptop-uri,tablete,smartphones.
  • Tastatura sau device orientation.
  • game.ghita.org

Multumesc!