PixelscheucherCSS, HTML, JS/jQuery, Browser, …
Leider leider leider hab ich es nicht geschafft, ein neues Layout für den cssNeustart einzureichen. Nächstes Mal vielleicht oder auch zwischendurch. Sorry für nicht erfüllte Erwartungen.
Dafür könnt ihr jetzt schreiben, was euch hier nicht gefällt. Auch die Feedleser bitte :)
In letzter Zeit ist es recht beliebt geworden, Code-Beispiele in HTML-Listen zu packen, beispielsweise so:
<ul>
<li><code><style type="text/css"></code></li>
<li><code>@media screen,projection {</code></li>
<li><code>/**/</code></li>
<li><code>}</code></li>
<li><code></style></code></li>
</ul>
(Live-Beispiel unsortierte Liste)
Schön und gut, mag semantisch auch irgendwie sinnvoll sein, gerade wenn man im Artikel Bezug auf die Zeilennummer (bei ol-Listen) nimmt. Leider macht da Firefox ein Problem, wenn man den Code kopiert und anschließend im Editor einfügt:
* <style type="text/css">
* @media screen,projection {
* /**/
* }
* </style>
Sternchen am Anfang, bei ol-Listen die Listen-Nummerierung:
ol<ol>
<li><code><style type="text/css"></code></li>
<li><code>@media screen,projection {</code></li>
<li><code>/**/</code></li>
<li><code>}</code></li>
<li><code></style></code></li>
</ol>
(Live-Beispiel sortierte Liste)
Wird zu:
1. <style type="text/css">
2. @media screen,projection {
3. /**/
4. }
5. </style>
Copy & Paste ist somit nicht mehr ohne weiteres möglich, da immer eine Nachbearbeitung des Codes erfolgen muss. Daran erinnert, dass dem so ist, hat mich der Artikel Quellcode mit HTML formatieren. Vielen Dank dafür ;)
Ah jo, hatte ich ja gar nicht erwähnt: Ich mach mein cssNeustart mit und besitze die Teilnehmernummer 90 soweit ich weiß.
Hab auch schon fleißig Skizzen und Planungen gemacht! Voll toll, ne?
Gute Nacht!
Update: Hier haben sich ein paar Fehler eingeschlichen. Zur Korrektur.
Nach verschiedenen Mozilla-Browsern (Firefox, Flock, K-Meleon, etc.), Opera, Internet Explorer kommt nun noch Safari für Windows (ab XP) ins Spiel. Wunderbar, noch mehr zum testen und spielen. Und das sind nur die grafischen Browser ;)
Nachtrag: Nicht mal den Acid 2 besteht er, hihi:
Alles weitere im 1. Kommentar von mir. Ach ja, die ganzen Probleme beziehen sich wohl größtenteils auf Safaris auf deutschen Windows-Versionen.
Mit der Tastenkombination Strg + zoomt Opera in 100-%-Schritten. Was ich gerade erst herausgefunden habe: Lässt man Strg in Ruhe, zommt Opera in 10-%-Schritten. Viel besser und feinstufiger.
Beim Relaunch von Welt Online wurde netterweise aufs Layouten mit Tabellen verzichtet. Nach der Devise “Tabellen sind böse” übertreibt man das ganze aber ein wenig und greift auf bewährte ASCII-Techniken zurück. ;)
Habt doch bitte ein Herz für Tabellen!
Bei hAtom handelt es sich um einen Microformats-Standards, mit dem man Artikel gesondert kennzeichen kann. Jeder Teil des Artikels bekommt eine CSS-Klasse zugewiesen: .hentry, .entry-title (Artikeltitel), .permlink (URL), .published (Veröffentlichung), .author (Autor) und .entry-content (Artikelinhalt).
Dies kann man natürlich auch in Textpattern einbauen und das beschreib ich einfach mal:
Damit ergibt sich (als Beispiel) dieses XHTML-Grundgerüst:
<div class="hentry"><h1 class="entry-title">Artikeltitel</h1><a href="URL zum Artikel" class="permlink" /><abbr class="published" title="2007-01-08">08.01.2007</abbr></a> | <span class="author">Autorenname</span><div class="entry-content">Hier ist der eigentliche Inhalt wie Absätze, Listen, Bilder, Tabellen und so weiter</div> </div>
Um dies in Textpattern umzusetzen, bearbeitet man den Baustein default wie folgt:
<div class="hentry"><txp:title wraptag="h1" class="entry-title" /><txp:permlink class="permlink"><abbr class="published" title="<txp:posted format="%Y%m%d" />"><txp:posted / ></txp:permlink> | <span class="author"><txp:author /></span><div class="entry-content"> <txp:body /> </div> </div>
Dies im Detail erklärt:
<txp:title wraptag="h1" class="entry-title" /> gibt den Artikeltitel in einer <h1>-Überschrift aus, die die Klasse entry-title besitzt.
<txp:permlink class="permlink"><abbr class="published" title="<txp:posted format="%Y%m%d" />"><txp:posted / ></txp:permlink>
<txp:permlink> bekommt die Klasse permlink zugewiesen. Der Inhalt des Links bekommt das Datum des Artikels mit <abbr class="published" title="<txp:posted format="%Y%m%d" />"><txp:posted / ></txp:permlink> verpasst.
<span class="author"><txp:author /></span>
Der Autorenname wird mit <txp:author /> ausgegeben, umgeben von einem span mit der Klasse author.
<div class="entry-content"><txp:body /></div>
Zum Schluss wird noch mit <txp:body> der Inhalt des Artikels ausgegeben.
Damals – so um 1999 – fing es an. Wir bekamen einen Computer: 450 Megahertz, 64 MB SD-RAM, Windows 98, Logo eines Privatfernsehsenders auf Gehäuse, Monitor und Mauspad. Wie das halt so am Anfang ist, kaufte man sich die ComputerBild. Zumindestens in meinem Fall, denn ich kannte nicht wirklich jemanden, der mir davon hätte abraten können.
Später gab’s dann auch Internet: AOL, 56k-Modem (Elsa) und 2,5 Pfennig pro Minute. Plus monatl. Grundgebühr versteht sich.
Obwohl ich das Passwort nicht kannte, hab ich es irgendwie geschafft, die Cache-Version der AOL-Startseite zu sehen. Gleichzeitig gabs einen tollen Kurs in der ComputerBild: HTML. (Sowie dessen Fortsetzungen)
Rechtsklick, Quelltext anzeigen, nichts verstanden. Okay. Weiter eingelesen, hier mal was geändert, Seite woanders gespeichert, angeguckt: Wow, ich kanns! Meine erste Begegnung mit HTML. Ohne das X dafür mit dem üblichen Tabellen-Missbrauch und zum Ende hin CSS, wenn auch sehr dürftig. Auf JavaScript hatte ich keine Lust, heute auch noch nicht. Muss doch auch ohne gehen.
(Zwischendurch schwillte unsere Telefonrechnung öfters an, denn ich entdeckte den SmartSurfer.)
Und heute? XHTML , CSS inkl. Browser-Bugs, Microformats und weitere Webstandards, Weblogs, Feeds, CMS, PHP, Web 2.0 als teilen-und-mitmachen-Web (YouTube) und so weiter.
Ein satter Sprung. Menschen teilen ihre Erlebnisse und Wissen durch Weblogs, Wikis, Foren und Newsgroups (letztere eigentlich schon seit Anfang an), Verschlagwortung (Tagging) kommt zum Einsatz, Bewertungen und Kommentare machen mehr denn je die Runde.
Und im Informatik-Kurs fangen wir mit HTML an. Grundlage: Der ComputerBild-HTML-Kurs von 1999. Hallo Zukunft!