Ähnliche Beiträge
- CSS1K
- Simple Media Queries Debugging
- WordPress Admin Style Guide
- WordPress Admin Bar nach unten verschieben
- HTML5 – Webseiten innovativ und zukunftssicher
- Simple Media Queries Tester
Journal
- Trend. Meiner.
- WordPress mehrsprachig nutzen – ein Lösungsvorschlag
- Besser die Wahrheit?
- Einschränken der Daten-typen im WordPress Upload
- Trenne Logik von der Ausgabe, mittels Hooks in WordPress
Projekte
Abonniere die neusten Artikel via Sidebar
ein-/ausblenden
Inspiriere mit maximal 10k HTML5
Anzeige
Es ist an der Zeit, zurück zu den Ursprüngen zu finden und sich auf die Optimierung mit Blick auf Größe der Website Gedanken zu machen - so oder so ähnlich interpretiere ich den Wettbewerb für Menschen, die Websites machen.
Vor zehn Jahren haben A List Apart einen Aufruf gestartet Much Ado About 5K. Weniger als 5 kByte waren zulässig um kleine Websites zu machen - diese Arbeiten sind aus meiner Sicht in erster Linie Anregung zu eigenen Gedanken und Inspiration für neue Arbeiten. Die Gemeinschaft der Webentwickler diskutiert gerne und so sind diese Formen der Themenanregung beliebt. Neben der Größe der Website von 10 k gibt es einige weitere Bedingungen - Standards: html5 und die Darstellung in Firefox, IE9, Safari und Chrome & diverse Bibliotheken - und damit ist zehn Jahre später ein neuer Wettbewerb 10k Apart durch fast das gleiche Team ins Leben gerufen. Zeit ein wenig Spaß zu haben und eine eigene kleine Arbeit bereit zu stellen.
Auch ich habe mich ein wenig von der vielen Arbeit erholt und mal eine kleine Spielerei gemacht, die man nun dort als App besichtigen kann - nichts besonderes, aber unterhaltsam und eine schöne Abwechslung. Ich wollte jeden Tag einen neuen Wert geben und uns die Erinnerung an jeden neuen Tag geben - 10k sollten dabei dicke reichen und so habe ich html5, CSS3 und JavaScript eingesetzt. Ebenfalls spiele ich mit den Animationsmöglichkeiten von CSS3, die allerdings aktuell nur in Webkit-Browsern wie Safari und Chrome laufen. Schaut es euch an und vielleicht nutzt es dem Lernen und dem Verständnis der neuen Mittel. Aber vielleicht motiviert es euch auch um ebenfalls an der Challange zu 10k Apart teilzunehmen.
Die Gallerie hat schon jetzt tolle Sachen dabei - auch wenn nicht alle Apps die 10k einhalten - zumindest wenn man mit Libraries wie jQuery arbeitet 
. Aber im Ende ist es eine tolle Aktion und die Teilnahme inspiriert. Es macht Spaß mit den neuen Möglichkeiten zu arbeiten und kein ToDo für alte Browser zu implementieren.
* Alternativ kann man sich die Spielerei auch in meinem kleinen Labor ansehen.
22 Kommentare zu „Inspiriere mit maximal 10k HTML5“
Kommentar schreiben
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 < und > als > 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.
Das Weblog wird angetrieben von
2. August 2010 um 11:30
Also ich finde die Bibliotheken killen den Spaß daran. Also eigentlich 147k-Apart.
2. August 2010 um 11:38
Hat nichts mit dem Wettbewerb zu tun, aber dein Beispiel hat mich dazu gebracht, mir endlich mal den box-shadow anzusehen und ihn auf meiner Seite einzubauen.
Und schon hat sich dein Artikel wieder gelohnt.
2. August 2010 um 12:08
@Martin: sehe ich auch so; vermute aber, dass sich jQuery und co. so etabliert haben, dass man ohne kaum noch arbeitet. Daher wurde es vermutlich diskutiert und so sind diverser Frameworks entstanden, die man zulässt.
@tom: stimmt und freut sehr; schade ist eben, dass die Animation nur in Webkit klappt.
2. August 2010 um 12:21
Ein HTML-Fehler, und 29 CSS-Fehler bei nicht mal 10k Code ist schon beachtlich
2. August 2010 um 12:33
@Dirk: in welchem Zusammenhang; was nutzt du für Validatoren - gerade html5 gibt uns ja genug Freiheiten und dies ist nur schwer via Validator zu prüfen. Von CSS will ich gar nicht reden, ja die meisten Elemente in meinem Style nicht standardisiert sind und erst kommen?
2. August 2010 um 12:43
@Dirk: noch meine Validatore mit Hinweisen
CSS3
html5
Der Fehler im html5 ist korrekt, da ich das Attribut und den Inhalt via JavaScript setze und den der Valdiator so nicht kennt.
Das Validieren des CSS wirft Fehler auf - rgba, moz und webkit-Elemente, die so nicht bekannt sind - also auch ok.
Ich arbeite fast immer und bewusst auf Basis von Progressive enhancement und habe das Glück, dass die meisten Kunden dies auch so sehen und wollen. Ein Validator ist lediglich eine Maschine, ohne Verstand, sie prüft die Rechtschreibung meines Codes, das wars. Alles andere muss mein Kopf leisten. Ebenfalls prüfe ich bei html5 noch die Semantik.
2. August 2010 um 12:44
Ich nutze die Validatoren der „Verantwortlichen“ (jeweils natürlich mit HTML5- bzw CSS3-Einstellung)
validator.w3.org/
jigsaw.w3.org/css-validator/
2. August 2010 um 12:56
@Dirk: passt also; im html5 Validator ist der schon angesprochen Punkt, via JS Inhalt füllen und der CSS Valdiator braucht den Parameter css3 bzw. gibt die Fehler zurück, die er nicht kennt. Vermutlich wird html5 nie Standard - also eine schwere Frage. Für mich ist Standard, was die Masse der Browser können oder was ich ihnen in gewissen Grenzen beibringen kann.
2. August 2010 um 13:05
Nicht wirklich gelesen, aber hier dürfte alles zum aktuellen Stand von Validatoren stehen:
http://www.highresolution.info/weblog/entry/alles_valide_oder_was/2. August 2010 um 13:13
@Martin: ich habe es gelesen und oft mit anderen und Dirk dieses Thema besprochen - Lesetipp!
2. August 2010 um 13:20
Nagut, hab mal den letzten Absatz gelesen. Und der sagt eigentlich alles was man wissen muss: "Validität ist kein Qualitätsmerkmal".
2. August 2010 um 14:17
@Martin Hast du aber auch gelesen, wie der Abschnitt übertitelt ist?
Es ist eben nur EINE Meinung, seine nämlich. Ich sehe das durchaus anders (auch wenn das Theme von meinem Blog nicht valide ist – aber ich stehe mit dessen Autor in Kontakt).
2. August 2010 um 14:20
@Dirk: ich sehe das ähnlich wie eine Rechtschreibkorrektur, nur weil die Korrektur eines Buches keinen Fehler ausgibt ist die Qualität nicht toll. Die Prüfung sagt lediglich aus, dass sie keine Fehler findet - vor allem nur in denen, die sie kennt - und da ist der Knackpunkt; mein Beispiel für 10k Apart nutzt Möglichkeiten, die der maschinelle Prüfer nicht kennt.
2. August 2010 um 14:49
@Frank Die W3C-Validatoren sind sicher nicht perfekt, und man sollte ihnen nicht blind alles glauben, aber ich finde dennoch, dass sie ein sehr guter Anhaltspunkt sind (auch wenn sie vor allem im Bezug auf CSS3 höllisch verbessert werden müssen).
2. August 2010 um 14:57
Klar, nur eine Meinung, aber eine die sicher jeder teilt, der sich damit auskennt :p Noch nicht gewundert, warum schon seit Jahren niemand mehr im Footer erwähnt, daß sein Code valide ist? Oder diesen W3C-Button einbindet?
Den Vergleich mit der Rechtschreibprüfung mag ich. Eine tolle Geschichte kann unzählige Rechtschreibfehler verschmerzen, aber eine dämliche Geschichte wird durch eine perfekte Rechtschreibung nicht besser. Ausserdem stelle man sich Wortspiele vor - oder Kreationen, die heute noch als Rechtschreibfehler erkannt werden, aber schon bald im Duden aufgenommen werden.
Man kann einfach so verdammt schlechten Code produzieren, der trotz allem noch validiert, nur weil man es geschafft hat ein paar divs richtig zu schliessen.
3. August 2010 um 10:54
Hallo Frank, gibt es eine Seite die die neuesten CSS3 Eigenschaften auflistet? Wenn möglich auch HTML5 und wenns geht natürlich total übersichtlich
Ansonsten, die Idee des verlinkten Projektes ist ganz ok. Vielmehr sehe ich darin potenzial für inspirationen. Mit 10k hat das null komma null zutun und wenn man wirklich eine App einspielt die 9k groß ist, wird diese aufgrund der fehlenden Funktion mit Sicherheit mit einem Stern belohnt.
Gruß, René
3. August 2010 um 12:05
@Fragender Wenn es sich um Syntaxfehler handelt: Ja. Wenn der Validator eine CSS3-Eigenschaft nicht kennt (Vendor-Präfixes z.B.), oder mit HTML5-Erweiterungen nichts anfangen kann, ist das etwas anderes.
Aber grundsätzlich halte ich es so, dass man die Ergebnisse des Validators nicht einfach ignorieren, sondern Prüfen sollte.
3. August 2010 um 13:40
Ist das eigentlich ein grosses Problem wenn Validatoren meckern, die Seite aber trotzdem reibungslos funktioniert? Mir war eigentlich noch nie so langweilig einen Validator in Anspruch zu nehmen.
10. August 2010 um 21:27
@Fragender @Frank Bültge Ich teile Dirks Ansicht: auch, wenn eine Seite in den gängigen Browsern funktioniert, sollte man sich die Ausgabe des Validators ansehen.
Denn worauf sollen sich die, die Browser programmieren und die, die Webseiten programmieren, einigen? Der W3C-Validator ist der kleinste gemeinsame Nenner, ohne den es einfach nicht geht. Und sorry: jeder, der die Vorgaben des W3C ignoriert, schadet dem Ziel, das wir uns letztlich alle wünschen: Webbrowser, die vorhersehbar auf Seiten-Code reagieren und schnell und reibungslos funktionieren.
11. August 2010 um 11:01
@zettberlin: keine Frage - vollkommene Zustimmung; ich validiere - prüfe aber die Fehlerausgabe, weil der Validator eben nicht alles weis. In diesem Fall z.b. die das time-Element, welches seinen Inhalt via JS erhält.
29. August 2010 um 14:58
Danke für den Post. Ich denk ich wed die Sache im Auge behalten und vielleicht mitmachen.
21. November 2010 um 20:49
Da sind lustige Sachen mit dabei. Aber gerade das Memory-Spiel kann doch nicht nur 10k groß sein oder hab ich es nicht gecheckt?