Использование Drag&Drop в HTML 5

Долгое время для создания Drag&Drop функционала использовались JavaScript-функции, однако браузеры не всегда корректно могли отображать результат. В HTML 5 есть способ грамотной поддержки Drag&Drop, с небольшим применением JavaScript. В этой статье подробно разобран наглядный пример применения Drag&Drop в HTML 5.

Поддержка браузерами

Кэш в html5 приложениях

Давно ничего не писал, но пришло время наверстывать упущенное)

HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете. Это пятая версия HTML-стандарта (изначально созданного в 1990 году и последней версией которого являлся HTML4, стандартизированный в 1997 году) и находится в стадии разработки по состоянию на февраль 2013 года. Основной её целью является улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями, при этом сохраняется лёгкость чтения кода для человека и ясность исполнения для компьютеров и приспособлений (веб-браузеры, синтаксические анализаторы и т. д.).
Только вдумайтесь в это.. 1997 год.

Ближе к делу

Геолокация с помощью HTML5

Последние несколько дней я углубленно разбирался с HTML5, и я вам скажу это очень интересно! В этом посте я расскажу вам как используя jQuery получить ваши координаты.

Приступим, JavaScript:

Состоит из Гугл карты и HTML5 кода. Координаты записываем в куки. 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
function success(position){
var s = document.querySelector('#status');
if (s.className == 'success'){
return;
}
s.innerHTML = "Found you!";
s.className = 'Success';
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcanvas';
mapcanvas.style.height = '100%';
mapcanvas.style.width = '100%';
document.querySelector('#map').appendChild(mapcanvas);
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here!"
});
$.cookie("MyLat", position.coords.latitude); // записываем
$.cookie("MyLon", position.coords.longitude); // координаты
}
function error(msg){
var s = document.querySelector('#status');
s.innerHTML = typeof msg == 'string' ? msg : "failed";
s.className = 'Fail';
}
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(success, error);
}
else{
error('Not supported'); //HTML Support
}
//Jquery
$(document).ready(function(){
$("#check").click(function(){
var lat = $.cookie("MyLat");
var lon = $.cookie("MyLon");
alert('Latitued: '+lat);
alert('Longitude: '+lon);
var url="http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lon+"&sensor=false";
alert('Google Map API: '+url);
//тут Json
});
});
</script>
//HTML
<input type='button' id='check' value='Check-out'/>
<div id="status">Загрузка..</div>
<div id="map"></div>

Парсим все через JSON, потомучто по моим расчетам так будет быстрее)