Sidebar
ein-/ausblenden

Die Reduktion von HTML5

Plugin für WordPress SEO

Anzeige

Neben dem 10k Contest gibt es aktuell auch ein 1k Variante, wobei es sich dabei um einen reinen JavaScript Vergleich handelt. Die Basis ist trotzdem HTML5 und ein canvas-Element steht zur Verfügung. Mit diesem kann man spielen und es sind einige wirklich tolle Sachen dabei - alles in allem 1k; externe Libraries sind hier nicht erlaubt. Für mich ein kleiner Ansporn um meine Idee mit HTML5 und CSS3 zu reduzieren und mal zu schauen, ob es denn auch im Rahmen von max. 1kByte geht.

Dabei konnte ich erstmals die große Freiheit von HTML5 kennen lernen - HTML5 lässt im Syntax diverse Freiheiten, denn man muss nicht jedes Element nutzen und auch nicht jedes Element schließen. Für ein übersichtliches Markup sicher nicht immer vorteilhaft, für meine Vorgabe von einem Kilobyte aber schon. Dabei ist nun tatsächlich eine Lösung entstanden, die nur 1k groß ist und in einigen Bereichen abgespeckt wurde. Die Animation wurde mit JavaScript und nicht CSS3 realisiert und auch die runden Ecken mussten weichen - zu viel Syntax.
Wer also ein wenig Inspiration und Möglichkeiten braucht, schaut sich die beiden Versionen mal an und hat vielleicht auch große Lust mal wieder ein kleines Projekt zu machen, kein CMS dahinter - pur HTML, CSS und JavaScript.

Es gibt noch immer Potenzial zum Reduzieren der Größe, so bin ich kein Freak im Rahmen von JavaScript und hier sehe ich noch einiges an Möglichkeiten. Nun aber die beiden Lösungen zum Vergleich.

4k vs 1k mit HTML5, CSS3 uns JavaScript

Variante 1 hat in erster Linie ihren Bedarf im CSS, viel Code für wenig Wirkung. Man braucht aktuell für diverse Browser unterschiedliche Syntax um die Rundungen zu erzeugen. Die Animation funktioniert nur in Webkit-Browsern und auch die RGB-Farben sind recht viele Zeichen.

  1. Die 4,5k Variante
  2. Die 1k Variante

Um diese Sachen auf 1k zu drücken musste einiges an Code weichen; eine andere Möglichkeit habe ich nicht gesehen. Die Animation habe ich nur im Ansatz zum Test eingebaut, sie ist wesentlich simpler. Das Spiel der Farben lasse ich via Zufall ablaufen und brauche trotzdem weniger Code. Lediglich die Möglichkeit RGB-Syntax zu nutzen ist geblieben, wird aber im JS per Zufall erzeugt.

In beiden Fällen habe ich es getan, weil ich mal etwas Spielen und Versuchen wollte. Einfach mal so und trotzdem sollte der Code valide und mit aktuellen Mitteln möglich sein. Interessant ist wohl das HTML5-Markup der 1k Variante - auch diese Version ist valider Code und ist doch recht untypisches Markup.


<!DOCTYPE html>
<meta charset="utf-8">
<title>one day at a time in 1k</title>
<style>body{background:#FFF;font:16px/23px Georgia,Times,serif;margin:20px}h1{font-size:45px}h3{display:none}time{font-size:50px;border:3px solid #F9F5EB;-webkit-box-shadow:4px 4px 6px #545454;-moz-box-shadow:4px 4px 6px #545454;box-shadow:4px 4px 6px #545454;padding:30px 40px}div{margin:120px 0}</style>
<script>function d(){var n=new Date(),t=n.getDate(),m=n.getMonth(),y=n.getFullYear(),y=t+'.'+m+'.'+y;if(t<10)t="0"+t;if(m<10)m="0"+m, datetime=y+'-'+m+'-'+t,x=document.createTextNode(y);d=document.getElementById('d');d.appendChild(x);d.setAttribute("datetime",datetime);setInterval('d.style.background="rgba("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+",0.4)"',600);setInterval('d.style.margin=Math.floor(Math.random()*20)+"%"',500)}window.onload=d;</script>
<header><h1>Carpe diem (1k)</h1></header>
<div><h3>Today's date</h3><time id="d">&nbsp;</time></div>

Die style- und script-Elemente kann man im Grunde unbeachtet lassen, es geht um die anderen Tags, hier wird dem typischen Markup von HTML einiges entzogen.

Das html-, head- und body sind ganz entfallen. Gleiches kann man auch für colgroup und tbody machen. Andere Elemente dürfen nur das schließende Tag weg lassen: li, dt, dl, p, option und einige mehr.

Im Gegensatz dazu die Variante mit xHTML-Schreibweise und kompletten Tags.


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"> 

		<title>one day at a time</title>

		<meta name="description" content="one day at a time - Small Sample Application">
		<meta name="language" content="en" />
		<link rel="stylesheet" href="style.css" />

		<script>
			function addDate(){
				var now   = new Date();
				var day   = now.getDate();
				var month = now.getMonth();
				var mname = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
				var year  = now.getFullYear();
				var date  = day + '.' + mname[month] + ' ' + year;
				if (day < 10) day = "0" + day;
				if (month < 10) month = "0" + month;
				var datetime = year + '-' + month + '-' + day;
				var dtxt   = document.createTextNode(date);
				document.getElementById('date').appendChild(dtxt);
				document.getElementById('date').setAttribute("datetime", datetime )
			}
			window.onload = addDate;
		</script>
	</head>
	<body>

		<div id="wrap">

			<header>
				<hgroup>
					<h1>one day at a time</h1>
					<h2>Carpe diem &mdash; <a href="http://en.wikipedia.org/wiki/Carpe_diem">Seize the day</a>.</h2>
				</hgroup>
			</header>

			<section>
				<h3>Today's date</h3>
				<div class="pulse">
					<time id="date">&nbsp;</time>
				</div>
			</section>

			<footer>
				<p>View in an HTML5 browser such as: <a href="http://ie.microsoft.com/testdrive/">IE9 Developer Preview</a>, <a href="http://www.mozilla.com/en-US/firefox/firefox.html">Firefox</a>.</p>
				<p>See animation only on webkit browser such as: <a href="http://www.apple.com/safari/">Safari</a> or <a href="http://www.google.com/chrome/index.html?hl=en&amp;brand=CHMB&amp;utm_campaign=en&amp;utm_source=en-ha-na-us-sk&amp;utm_medium=ha">Chrome</a>.</p>
			</footer>

		</div>

	</body>
</html>

Natürlich sind hier auch einige Inhalte mehr und vor allem wesentlich mehr Semantik unter gebracht. Eine schöner Vergleich der vielleicht zum Nachdenken anregt und mir wieder die Unterschiede und Möglichkeiten aufgezeigt hat.

Vielleicht Lust bekommen, zu spielen, zu testen und die neuen Möglichkeiten mit HTML5 und CSS3 zu versuchen - wenn ja, dann hat sich der Artikel gelohnt. Solltest du Hinweise für meine Spielerei oder Fehler gefunden haben - dann bin ich sehr dankbar und der Artikel hat sich noch viel mehr gelohnt.

Artikel #1204, 8. August 2010 · Webküche · 9 Kommentare · Kommentar schreiben
Tags: , , , , ,
Kommentar-Feed zum Artikel · TrackBack URL · Kurzlink

«
»

9 Kommentare zu „Die Reduktion von HTML5“

  1. 1
    Kommentar von Steffi
    10. August 2010 um 14:56

    Ich würd sagen, der Artikel hat sich auf alle Fälle gelohnt, da ich ihn sehr aufschlussreich und angenehm zu lesen fand! Die neuen Möglichkeiten werde ich auf jeden Fall mal ausprobieren, da manche echt cool sind!
    Greetz ;)

  2. 2
    Kommentar von Thomas Fedeneder
    13. August 2010 um 01:58

    Kann mich Steffi nur anschließen, fand das auch sehr aufschlußreich. Grüße Tom

  3. 3
    Kommentar von Pilus
    14. August 2010 um 23:40

    Ich freu mich schon dermaßen auf HTML5 und CSS 3. Diese Art von Aktion war mir vorher garnicht bekannt. Werde mich auch gleich mal an ein paar 1k- Snipptes ransetzen :D

    Cioa Pilus

  4. 4
    Kommentar von jks
    16. August 2010 um 16:21

    August!=8

  5. 5
    Kommentar von Frank Bültge
    16. August 2010 um 18:26

    @jks: danke für den sehr kurzen Hinweis, JS gefixt.

  6. 6
    Kommentar von seolar
    22. August 2010 um 22:32

    Ein wirklich guter und aufschlussreicher Artikel. Die Möglichkeiten, die uns Webentwicklern HTML5, CSS3, JavaScript Frameworks wie JQuery (ich liebe dieses JS-FW), php 6 und und und bieten sind enorm. Und zukunftsweisend. Ich beschäftige mich nunmehr seit geraumer Zeit mit HTML5 und CSS3, da ich nur begrüßen kann, was uns seit Jahren nicht möglich war. Die Idee eines Projektes mit nur 1kB ist einfach genial und reizt mich nunmehr ebenfalls ein solches Projekt zu realisieren. Unabhängig von Contests: einfach für mich.
    Ich werde dahingehend aber in meinem Blog darüber berichten.

    Frank, erstens ein guter Artikel, zweitens mach bitte weiter so. Ich lese Dein Blog unheimlich gern!
    Schönen Abend noch und Grüße aus Braunschweig

  7. 7
    Kommentar von Gustav
    21. September 2010 um 21:15

    HTML 5 ist schön und gut. Ich bin gespannt, wie es wirklich laufen wird. Browser müssen es unterstützen. Bei mir melden sich Leute noch mit dem IE 6 und haben Probleme mit einer Seite. Weiterhin müssen auch CMS alles bieten. Ich denke hier an Typo3 und bin gespannt, wie es laufen wird.

  8. 8
    Kommentar von Bernd
    10. Dezember 2010 um 12:35

    HTML 5 wird bestimmt am Anfang sehr verbuggt sein, weil alle Browser Probleme damit haben werden

  9. 9
    Kommentar von Meggan
    3. Januar 2011 um 13:31

    Ein Kollege von mir meinte, dass HTML 5 das surfen mit dem iPhone vereinfachen soll??? Stimmt das wirklich? Ich kann das irgendwie nur sehr schwer glauben!

Kommentar schreiben

Kommentarregeln: Bleib cool, kritisch ist in Ordnung, aber wenn du unhöflich bist, dann lösche ich deinen Kommentar. Bitte benutze deinen persönlichen Namen oder Initialen und nicht den Namen eines Unternehmens, dies würde als Spam gewertet und wird gelöscht. Der Zusammenhang zwischen Namen und URL sollte nicht offensichtlich auf Spam hindeuten! ♥ Ansonsten, vielen Dank für den Kommentar und viel Spaß mit meinem Blog.

E-Mail-Benachrichtigung bei weiteren Kommentaren.
Auch möglich: Abo ohne Kommentar.

Kommentar-Hilfe

händischer Spam:
Beachte die Kommentarregeln, jede Form von versuchtem Spam wird gelöscht. Warum und wieso steht in einem meiner Beiträge.

Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.

xHTML:
Du kannst folgende Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>

Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als &lt; und > als &gt; einfügt.

E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.

Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.

Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.

Spamschutz:
Das Kommentarformular ist mit einem Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.