/* hier ganz viele CSS-Angaben für alle Ausgabegeräte */
@media only screen and (min-width: 768px) {
/* hier die CSS-Angaben nur für große Bildschirme */
.sidebar {
width:300px;
float:right;
}
}
Design das verschiedene Ausgabegeräte mitdenkt: Responsive Webdesign. Siehe Artikel in A List Apart vom Mai 2010. Beispielseite auf verschiedenen Fenster-Größen betrachten!
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
Play with the slider on this and further pages!
CSS
Browser-Spezifisches CSS
Der zukünftige Standard
coolness: 17%;
Die aktuelle Implementierung von Webkit (Safari+Chrome+...) und Mozilla (Firefox)
-webkit-coolness: 17%;
-mozilla-coolness: 17%;
Der Ausweg: CSS Präprozessor wie z.B. Less oder SASS
Warnhinweis: coolness ist nicht wirklich teil von HTML5
In March 1936, an unusual confluence of forces occurred in
Santa Clara County.
A long cold winter delayed the blossoming of the millions of
cherry, apricot, peach, and prune plum trees covering hundreds
of square miles of the Valley floor. Then, unlike many years,
the rains that followed were light and too early to knock
the blossoms from their branches.
Instead, by the billions, they all burst open at once.
Seemingly overnight, the ocean of green that was the Valley
turned into a low, soft, dizzyingly perfumed cloud of pink
and white. Uncounted bees and yellow jackets, newly born,
raced out of their hives and holes, overwhelmed by this
impossible banquet.
Then came the wind.
It roared off the Pacific Ocean, through the nearly
uninhabited passes of the Santa Cruz Mountains and then,
flattening out, poured down into the great alluvial plains
of the Valley. A tidal bore of warm air, it tore along the
columns of trees, ripped the blossoms apart and carried them
off in a fluttering flood of petals like foam rolling up a
beach.
This perfumed blizzard hit Stevens Creek Boulevard, a two-lane
road with a streetcar line down its center, that was the main
road in the West Valley. It froze traffic, as drivers found
themselves lost in a soft, muted whiteout. Only the streetcar,
its path predetermined, passed on...
CSS
Text stroke
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0.00px;
}
face: border-radius: 0px;
left eye: border-radius: 0px;
right eye: border-radius: 0px;
base white: border-radius: 0px;
mouth: border-radius: 0px;
nose: border-radius: 0px;
left black eye: border-radius: 0px;
right black eye: border-radius: 0px;
Auch ohne Internet-Verbindung bleiben diese Dokumente zugänglich!
JS
Application Cache neu laden
<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);
Auch ohne Internet-Verbindung bleiben diese Dokumente zugänglich!
JS
Local 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');
Save text value on the client side (crash-safe)
Realtime
Stay connected
JS
Web Workers
Parallel-Verarbeitung in Javascript. Anspruchsvolle Berechnung an Worker auslagern.
Loading Route...
Try dragging the map while the complex route is being calculated (you will only be able to do that with Workers!)
Full-duplex, bi-directional communication over the Web:
Both the server and client can send data at any time, or even at the same time.
Only the data itself is sent, without the overhead of HTTP headers, dramatically
reducing bandwidth.
Multi-User Browsergame word squared.
Neu gesetzt Steine in meinem Blickfeld werden sofort an meinen Browser geschickt.
Drag-and-Drop mit Dateien
Integration mit dem Betriebssystem
JS
Desktop Drag-In (File API)
Vorher: Eingabefeld für Dateien
<input type="file">
Nachher: Drag-and-Drop
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);
( this feature is only available in Google Chrome )
Geolokation
Wo bin ich?
JS
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);
}
HTML
Sprach-Eingabe
<input type="text" x-webkit-speech />
Nur in Chrome, verwendet eine Google-API zur Verarbeitung des Audio.
Speech input is not enabled in your browser.
Try running Google Chrome with the --enable-speech-input flag.
Leichter Javascript Programmieren
Ein paar Tricks von jQuery
JS
Elemente im DOM finden
mit Id oder Tag Name (seit 2000)
var el = document.getElementById('section1');
el.focus();
var els = document.getElementsByTagName('div');
els[0].focus();
mit Klassen (neu in HTML5)
var els = document.getElementsByClassName('section');
els[0].focus();
mit beliebigem CSS Selektor (neu in HTML5)
var els = document.querySelectorAll("ul li:nth-child(odd)");
var tds = document.querySelectorAll("table.test > tr > td");
var el = document.querySelector("table.test > tr > td"); // el == tds[0]
JS
Klassen manipulieren
Vorher:
<div id="main" class="shadow rounded"></div>
Manipulation:
var el = document.querySelector('#main').classList;
el.add('highlight');
el.remove('shadow');
el.toggle('highlight');
console.log(el.contains('highlight')); // false
console.log(el.contains('shadow')); // false
console.log(el.classList.toString() == el.className); // true
Nachher:
<div id="main" class="rounded"></div>
JS
History API
Problem: komplexe Web-Applikation, in Javascript geschreiben,
Navigation innerhalb der App verändert die URL nicht. Zurück-Knopf
des Browsers funktioniert nicht wie erwartet.
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').innerText = event.state; // 'Contact Page Form'
});
HTMLCSSJS
Was geht?
HTML5 ~=
HTML
+
CSS
+
JS
HTML5 = Next Generation Features for Modern Web Development
Ein Gast-Vortrag von Brigitte Jellinek an der HTW Berlin, basierend auf
-webkit-border-image: url(border_image_1.png) ; border-width: 10px;
Multi-User Browsergame word squared. Neu gesetzt Steine in meinem Blickfeld werden sofort an meinen Browser geschickt.
