Kategorie: Webstandards

Kategorien
Frontend: HTML5, CSS3, jQuery Webstandards

64 HTML-Elemente in 5 Minuten

64 HTML-Elemente kann ich in 5 Minuten benennen, nicht schlecht oder? Und die banalsten hab ich dabei sogar vergessen, unter anderem title, label und link, letzteres aber nur, weil’s als li gewertet wurde und ich das nicht gemerkt habe.

Außerdem ist das HTML 4, da waren noch ganz andere Dinge erlaubt als heute ;)

64

Named so far:

A, ADDRESS, APPLET, AREA, B, BIG, BLOCKQUOTE, BODY, BR, CENTER, CITE, CODE, DD, DEL, DIV, DL, DT, EM, FONT, FORM, H1, H2, H3, H4, H5, H6, HEAD, HR, HTML, I, IMG, INPUT, INS, KBD, LI, MAP, META, NOSCRIPT, OL, OPTION, P, PRE, Q, S, SAMP, SCRIPT, SELECT, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR,

You forgot:

ABBR, ACRONYM, BASE, BASEFONT, BDO, BUTTON, CAPTION, COL, COLGROUP, DFN, DIR, FIELDSET, FRAME, FRAMESET, IFRAME, ISINDEX, LABEL, LEGEND, LINK, MENU, NOFRAMES, OBJECT, OPTGROUP, PARAM, SMALL, STYLE, TITLE,

(via ganz vielen Blogs und irgendwann schon mal früher, aber nicht als den neuen Hype angesehen. Wieder eine Ruhmesrunde verpasst, menno.)

Kategorien
Frontend: HTML5, CSS3, jQuery Webstandards

CSS/XHTML-Kuriositäten-Fundgrube

Eben in einer der CSS-Gruppen von StudiVZ gefunden:

[…] Was ist bitte schön der Unterschied zwischen P und Div? Ich kann natürlich auch ein DIV so modifizieren, dass es als Zeilenumbruch durchgeht. Geht alles..klar. aber wozu tausend verschiedene tags benutzen? Das macht den HTML-Kode zu einem Chaos. am besten wäre es glatt alle/abgesehen von a,img,table*, body etc. HTML-tags komplett abzuschaffen und nur noch Div-Tags und CSS zu nutzen.

Nur noch Links, Bilder und Tabellen benutzen und dafür auf Überschriften, Listen, Zitate, Absätze, Bereiche, Hervorhebungen, Codes, Beispiele, Formulare und vieles mehr verzichten? Viel Spaß dabei ;)

Ähnlich kurioses liefert CSS Forum Tragedies von Jens Meiert.

Ach ja, ich bin jetzt ein Webkraut, auch wenn ich gerade nich sooo die Zeit dafür hab. Webstandards gehören weitergetragen.

Kategorien
Frontend: HTML5, CSS3, jQuery Webstandards

Mein verpatztes Redesign

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 :)

Kategorien
Browser Frontend: HTML5, CSS3, jQuery Webstandards

Firefox: Code-Beispiele in Listen machen Probleme

In letzter Zeit ist es recht beliebt geworden, Code-Beispiele in HTML-Listen zu packen, beispielsweise so:

<ul>
<li><code>&lt;style type="text/css"&gt;</code></li>
<li><code>@media screen,projection {</code></li>
<li><code>/**/</code></li>
<li><code>}</code></li>
<li><code>&lt;/style&gt;</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:

   * &lt;style type="text/css"&gt;
* @media screen,projection {
* /**/
* }
* &lt;/style&gt;

Sternchen am Anfang, bei ol-Listen die Listen-Nummerierung:

Sortierte Listen ol

<ol>
<li><code>&lt;style type="text/css"&gt;</code></li>
<li><code>@media screen,projection {</code></li>
<li><code>/**/</code></li>
<li><code>}</code></li>
<li><code>&lt;/style&gt;</code></li>
</ol>

(Live-Beispiel sortierte Liste)

Wird zu:

   1. &lt;style type="text/css"&gt;
2. @media screen,projection {
3. /**/
4. }
5. &lt;/style&gt;

Fazit

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 ;)

Kategorien
Frontend: HTML5, CSS3, jQuery Netzwelt Webstandards

cssNeustart

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!

Kategorien
Frontend: HTML5, CSS3, jQuery Netzwelt Webstandards

Welt Online übertreibt beim Tabellenverzicht

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. ;)

Screenshot

Habt doch bitte ein Herz für Tabellen!

Kategorien
Frontend: HTML5, CSS3, jQuery Textpattern Webstandards

Microformats: hAtom in Textpattern

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.

Kategorien
Frontend: HTML5, CSS3, jQuery Webstandards

Das Internet heute und damals – aus persönlicher Sicht

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!