20 интересных возможностей HTML5

Слышали об HTML5? Уверен, что да Знаете все фичи, доступные в HTML5? Если нет, то этот пост поможет узнать, а если знаете (или что-то призабыли) — поможет вспомнить. Итак, начнём.

HTML5

Что такое HTML5? Это не просто HTML новой версии. HTML5 — это сочетание HTML, CSS и JS. Возможности HTML5 заходят намного дальше, чем просто обычная разметка страницы. Давайте рассмотрим те возможности, которые даёт нам HTML5. Ниже приведены 20 «фич» вышеуказанной технологии, о которых вы, возможно не знали, а, если и знали, то не использовали ранее. Более детально о каждой вы сможете почитать и ознакомиться в интернете. Думаю, из названия «фичи» будет понятно её предназначение.

1. Web Storage

// use localStorage for persistent storage
// use sessionStorage for per tab storage
saveButton.addEventListener('click', function () {
  window.localStorage.setItem('value', area.value);
  window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');

2. Web SQL Database

var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

3. IndexedDB

var idbRequest = window.indexedDB.open('Database Name');
idbRequest.onsuccess = function(event) {
  var db = event.srcElement.result;
  var transaction = db.transaction([], IDBTransaction.READ_ONLY);
  var curRequest = transaction.objectStore('ObjectStore Name').openCursor();
  curRequest.onsuccess = ...;
};

4. Application Cache

<html manifest="cache.appcache">

window.applicationCache.addEventListener('updateready', function(e) {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    window.applicationCache.swapCache();
    if (confirm('A new version of this site is available. Load it?')) {
      window.location.reload();
    }
  }
}, false);

cache.appcache:

CACHE MANIFEST
# version 1.0.0

CACHE:
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png

NETWORK:
*

5. Quota API

// Request Status
webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.TEMPORARY, function(used, remaining) {
    console.log("Used quota: " + used + ", remaining quota: " + remaining);
  }
);

// Request Quota (only for File System API)
webkitStorageInfo.requestQuota(webkitStorageInfo.PERSISTENT, 10 * 1024 * 1024, function(used) {
    console.log("Used quota: " + used + ", remaining quota: " + remaining);
  }
);

6. Web Workers

main.js:

var worker = new Worker('task.js');
worker.onmessage = function(event) { alert(event.data); };
worker.postMessage('data');

task.js:

self.onmessage = function(event) {
  // Do some work.
  self.postMessage("recv'd: " + event.data);
};

7. WebSocket

var socket = new WebSocket('ws://html5rocks.websocket.org/echo');
socket.onopen = function(event) {
  socket.send('Hello, WebSocket');
};
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert('closed'); }

8. Notifications

if (window.webkitNotifications.checkPermission() == 0) {
  // you can pass any url as a parameter
  window.webkitNotifications.createNotification(tweet.picture, tweet.title,
      tweet.text).show();
} else {
  window.webkitNotifications.requestPermission();
}

9. Native Drag & Drop

document.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text', 'Customized text');
  event.dataTransfer.effectAllowed = 'copy';
}, false);

HTML5_2

10. Desktop Drag-In (File API)

document.querySelector('#dropzone').addEventListener('drop', function(e) {
  var reader = new FileReader();
  reader.onload = function(evt) {
    document.querySelector('img').src = evt.target.result;
  };

  reader.readAsDataURL(e.dataTransfer.files[0]);
}, false);

11. Desktop Drag-Out

<a class="dragout" draggable="true" href="src/star.mp3" data-downloadurl="MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE">download</a>

var files = document.querySelectorAll('.dragout');
for (var i = 0, file; file = files[i]; ++i) {
  file.addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('DownloadURL', this.dataset.downloadurl);
  }, false);
}

12. FileSystem APIs

window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function(fs) {

  // fs.root is a DirectoryEntry object.
  fs.root.getFile('log.txt', {create: true}, function(fileEntry) {

    fileEntry.createWriter(function(writer) {  // writer is a FileWriter object.

        writer.onwrite = function(e) { ... };
        writer.onerror = function(e) { ... };

        var bb = new BlobBuilder();
        bb.append('Hello World!');

        writer.write(bb.getBlob('text/plain'));

    }, opt_errorHandler);
  }

}, opt_errorHandler);

13. Geolocation

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var latLng = new google.maps.LatLng(
        position.coords.latitude, position.coords.longitude);
    var marker = new google.maps.Marker({position: latLng, map: map});
    map.setCenter(latLng);
  }, errorHandler);
}

14. Device Orientation

window.addEventListener('deviceorientation', function(event) {
  var a = event.alpha;
  var b = event.beta;
  var g = event.gamma;
}, false);

15. Speech Input

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

16. Audio + Video

<audio id="audio" src="sound.mp3" controls="controls"></audio>
document.getElementById("audio").muted = false;

<video width="300" height="150" id="video" src="movie.webm" autoplay="autoplay" controls="controls"></video>
document.getElementById("video").play();

17. FullScreen API

if (elem.webkitRequestFullScreen) {
  elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.requestFullScreen){
  elem.requestFullScreen();
}

:-webkit-full-screen-ancestor:root {
  overflow: hidden;
}
:-webkit-full-screen-ancestor {
  z-index: auto;
  -webkit-transform: none;
  -webkit-transition: none;
}
pre:-webkit-full-screen {
  background-color: white;
}

18. Canvas 2D

<canvas id="canvas" width="838" height="220"></canvas>

  var canvasContext = document.getElementById("canvas").getContext("2d");
  canvasContext.fillRect(250, 25, 150, 100);

  canvasContext.beginPath();
  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  canvasContext.lineWidth = 15;
  canvasContext.lineCap = 'round';
  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
  canvasContext.stroke();

19. Canvas 3D (WebGL)

<canvas id="canvas" width="838" height="220"></canvas>

var gl = document.getElementById("canvas").getContext("experimental-webgl");
  gl.viewport(0, 0, canvas.width, canvas.height);
  ...

20. History API

link.addEventListener('click', function(event) {
  // manually add a value to the history stack
  // without making the browser load any new page
  history.pushState('Contact Page Form', 'Contact Page', '/contact');
});

// capture navigation in case we want to change,
// for instance, some content when it changes
window.addEventListener('popstate', function(event) {
  document.querySelector('h1').innerHTML = event.state; // 'Contact Page Form'
});

20 интересных возможностей HTML5

4.71 / 5 5
1 / 5
2 / 5
3 / 5
4 / 5
5 / 5

17 votes, 4.71 avg. rating (94% score)

19 thoughts on “20 интересных возможностей HTML5”

Пройдите 1 регистрацию, сделайте 2 действия
и получайте от 8950 рублей каждые сутки в автоматическом режиме.

Мы гарантируем:
— Первый заработок в течении 60 минут.
— Стабильный доход 24 часа в сутки.
— Поступление денег без задержек.
— Для России, стран СНГ и Европы.
— Без вложений и установки ПО.
— Специально для новичков и людей без опыта.

Более подробная информация у нас на сайте. ( http://prosto.zarplatt.ru/ )

19 thoughts on “20 интересных возможностей HTML5”

Добавить комментарий Отменить ответ