HTML5: Unterschied zwischen den Versionen
Aus Wikizone
| (3 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| + | == Siehe auch == | ||
| + | [[HTML]] | ||
| + | |||
== HTML5 - Geolocation == | == HTML5 - Geolocation == | ||
=== Links === | === Links === | ||
| Zeile 34: | Zeile 37: | ||
</html> | </html> | ||
</pre> | </pre> | ||
| + | |||
| + | <pre> | ||
| + | <!DOCTYPE html> | ||
| + | <html lang="en"> | ||
| + | <head> | ||
| + | <meta charset="utf-8"> | ||
| + | <title>html5-Grundgerüst</title> | ||
| + | <link rel="stylesheet" href="style.css"> | ||
| + | <!--[if lt IE 9]> | ||
| + | <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | ||
| + | <![endif]--> | ||
| + | </head> | ||
| + | <body> | ||
| + | <header> | ||
| + | <h1>Html5</h1> | ||
| + | <nav> | ||
| + | <ul> | ||
| + | <li><a href=""></a></li> | ||
| + | </ul> | ||
| + | </nav> | ||
| + | </header> | ||
| + | <section> | ||
| + | <h1>titel section</h1> | ||
| + | <article> | ||
| + | <h1>titel article</h1> | ||
| + | </article> | ||
| + | </section> | ||
| + | <aside> | ||
| + | </aside> | ||
| + | <footer> | ||
| + | </footer> | ||
| + | </body> | ||
| + | </html> | ||
| + | </pre> | ||
| + | |||
=== Position des Nutzers bestimmen mit HTML5 und Google Gears als Fallback === | === Position des Nutzers bestimmen mit HTML5 und Google Gears als Fallback === | ||
siehe auch [[Google Maps]] | siehe auch [[Google Maps]] | ||
| Zeile 97: | Zeile 135: | ||
http://raphaeljs.com/ | http://raphaeljs.com/ | ||
| + | |||
| + | == Local Storage == | ||
| + | Mit dem localStorage Objekt kann man im Browser des Users Daten speichern. | ||
| + | |||
| + | https://www.w3schools.com/html/html5_webstorage.asp | ||
| + | |||
| + | Beispiel | ||
| + | |||
| + | http://wiki.zone30.info/wikizone/index.php/JQuery_-_Snippets#LocalStorage | ||
Aktuelle Version vom 18. August 2017, 06:52 Uhr
Siehe auch[Bearbeiten]
HTML5 - Geolocation[Bearbeiten]
Links[Bearbeiten]
http://developersmix.wordpress.com/2011/08/16/html5-geolocation/
http://web.drsni.com/html5-geolocation/
http://mobile.tutsplus.com/tutorials/mobile-web-apps/html5-geolocation/
http://aiminstitute.org/blog/2010/07/basic-geolocation-in-html5/
http://www.mozilla.com/en-US/firefox/geolocation/
HTML 5 - allgemeines[Bearbeiten]
HTML 5 Snippets[Bearbeiten]
Grundgerüst[Bearbeiten]
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta content='IE=8' http-equiv='X-UA-Compatible'>
<title></title>
<meta name="viewport" content="width=device-width">
<!-- favicon.ico und apple-touch-icon.png in der root -->
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html5-Grundgerüst</title>
<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Html5</h1>
<nav>
<ul>
<li><a href=""></a></li>
</ul>
</nav>
</header>
<section>
<h1>titel section</h1>
<article>
<h1>titel article</h1>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
Position des Nutzers bestimmen mit HTML5 und Google Gears als Fallback[Bearbeiten]
siehe auch Google Maps
mehr und bessere Beispiele unter HTML5 - Geolocation
// Note that using Google Gears requires loading the Javascript
// at http://code.google.com/apis/gears/gears_init.js
var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag = new Boolean();
function initialize() {
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Try W3C Geolocation (Preferred)
if(navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
// Try Google Gears Geolocation
} else if (google.gears) {
browserSupportFlag = true;
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeoLocation(browserSupportFlag);
});
// Browser doesn't support Geolocation
} else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
alert("Geolocation service failed.");
initialLocation = newyork;
} else {
alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
initialLocation = siberia;
}
map.setCenter(initialLocation);
}
}
HTML5 Canvas[Bearbeiten]
Vektorgrafik[Bearbeiten]
Local Storage[Bearbeiten]
Mit dem localStorage Objekt kann man im Browser des Users Daten speichern.
https://www.w3schools.com/html/html5_webstorage.asp
Beispiel
http://wiki.zone30.info/wikizone/index.php/JQuery_-_Snippets#LocalStorage
