HTML Moderne Websites Valide machen

[mercsen]

Moin liebe CB gemeinde,

wieder einmal habe ich eine frage zum Thema HTML + JS.

ich bin gerade dabei für ein aktuelles Projekt und alle zukünftigen ein Framework zu entwickeln.
Es soll folgende Aufgabe übernehmen:
Eine website, die so gebaut ist, das sie komplett ohne JavaScript auskommt so umzubauen das es mit Ajax request arbeitet.
(Sprich die seite wird geladen und JS beginnt die seite auseinander zu nehmen und neu zusammenzusetzen (bildlich gesprochen))
Das funktioniert alles auch super gut, das porblem ist das ich es derzeit so gelöst habe, das man den Elementen, die ein Ajax Verhalten an den tag legen sollen eine bestimmte Klasse zuordnet (je nachdem welche funktion dort eingebaut werden soll) und anschließend in attributen die eigenschaften festlegt.
z.b: callback funktionen, oder bestimmte parameter.

Das ganze Problem dabei ist das der w3c validator die seite dann nicht mehr validiert, denn er schmeißt immer fehlermeldungen raus im sinne von "Element xyz hat kein attribute abc"

Meine einzige idee soetwas zu verhindern wäre dann die eigenschaften in ein <object> tag zu hauen, was ich aber nicht unbedingt schön finde.

Wenn JS aktiviert ist werden die falschen attribute gelöscht, der validator führt das JS aber natürlich nicht aus und wenn kein JS vorhanden ist bleibt der code invalide.

ich meine mal gelesen zu haben das browser angewiesen sind unbekannte attribute zu ignorieren, oder war das nur bei CSS der fall?

Jemand eine idee wie man das außer einem <object>-tag realieren könnte?

Die parameter in das class attribute zu packenhalte ich nicht für sinnvoll da es bis jetzt über 50 parameter gibt, wäre ein enormer aufwand alle class attribute zu parsen.......

Und wenn es nur mit object geht, welchen typ muss ich dem dann zuordnen?

Oder soll ich einfach ignorieren das der code nicht mehr valide ist?

Danke im voraus

 

[QXARE]

HTML5 unterstützt das data-Attribut. Damit kannst du jedem Tag beliebig viele Attribute zuweisen ohne bspw. das class-Attribut zu missbrauchen.

Beispiel:

<div data-ajax="1"></div>

 

[mercsen]

Ok vlt. hätte ich noch sagen sollen das ich zwar riesen Fan von HTML 5 bin, das framework aber auch HTML 4 unterstützen muss, zwecks kompatibilität zu älteren browsern, die ich leider fast immer supporten muss

das mit dem data attribute hab ich komplett vergessen gehabt, aber wie gesagt kann ich auch nur bedingt einsetzen

Nutze immer HTML 4 strict. bzw. XHTML 1.0, je nachdem.

 

[Daaron]

Die Basis von HTML5 funktioniert doch auch auf alten Mistkisten, es ist doch eigentlich nichts anderes als HTML4 + neue Tags. Ruf doch z.B. mal http://www.contao.org/de/ auf nem IE7 auf. Fällt dir was auf? Das gesamte CMS erzeugt standardmäßig HTML5-Code, XHTML gibts nur noch auf speziellen Wunsch des Admins.

 

[ice-breaker]

Wofür willst du überhaupt das Nachladen von Inhalt per Ajax statt einem Seitenwechsel machen? Du machst dir damit doch nur selbst das Leben schwer, denn du musst ja weiterhin Bookmarks sowie den Vor- und Zurück-Button unterstützen. Und genau da fängt der Spaß an:

• Hässliche Hashtags in Seiten, die auch noch zig Browser-Quirks beheben müssen, weil es sonst nicht überall funktioniert.
• Oder der neue HTML5 pushState-Standard, den aber nicht jeder Browser kann und deren Implementierungen auch noch total verbuggt sind. Selbst das Github-Projekt balupton/history.js hat trotz der vielen behobenen Bugs noch viele offene Bugs, die die sinnvolle Nutzung unmöglich machen.

Man handelt sich also nur noch viel mehr Probleme ein, als man braucht. Vor allem weil jeder neue Browser alles wieder kaputt machen kann und somit dauerhaft gegen jeden neuen Browser getestet werden muss. Denn wenn ein Fix gegen Browser Quirks arbeiten will, der schon behoben ist, geht unweigerlich alles kaputt.

Mit gutem Caching der statischen Inhalte erreichst du im Endeffekt doch das gleiche: Die Webseite lädt quasi instant, da nicht mehr dutzende Grafiken, CSS- oder JavaScript-Dateien bei jedem Request angefragt, und mit einem 304 Not Modified beantwortet werden müssen.

 

[mercsen]

versuch mal ein document mit ddem doctype html ausliefern und rufe das im IE 6 auf. Leider muss ich den auch supporten

Ich habe eine eigene navigation geschrieben die direkt in dem ajax loader implementiert ist
Zudem wird per .htaccess der zrugriff über eine verzeichniss strucktur auf jede unterseite ermöglicht.

die index datei kann das dann auch verarbeiten, z.b.

<a href="/produkte/produkt1/test.html" class="ajaxLoad">

(auch wenn ich es eigentlich umgekehrt mache und link makiere die nicht per ajax geladen werden solle, aber egal)

wenn js aktiviert ist wird halt mit preventDefault das öffnen verhindert und der loader lädt es asynchron nach.

man kann zwar nicht den zurückbutton des browsers abfangen aber eine kleine eigene navigation anzeigen und zurück navigieren, gestetet und klappt super. man kann die gesamte seite auch nur per parameter steuern.

wenn kein js aktiviert ist, wird eben auf /proudkte/produkt1/produkte.html geleitet.
(zumindest augenscheinlich, übersetzt wird das halt als index.php?url=abc&xyz=123 etc. pp. (SEO usw.))

habe mir extra ein kleine java programm geschrieben das die index datei so umschreibt das jewals die passende seite und der titel in den content bereich gezeigt werden.
(halt je nach url, muss das also auch nicht mehr manuell machen)

die seite produkte.html (eigentlich eine php datei) stellt dann ihrerseits werte zur verfügung um den zustand herzustellen, den die seite haben würde, wäre man per js auf diese seite gelangt.
muss also nur in jede datei 3~4 variablen setzen.

das ding ist hochspezialisiert und genau auf meine bedüfrnisse angepasst.

z.b. menüpunkte hervorheben etc.

dereinzige sinn dahinter ist das ich mir die arbeit spare immer einzelene elemente anzupassen sondern einfach nach einem festen schema die seite erstelle und dann bloß das script einbinden muss und die richtigen werte vordefiniere und schuwpps, ist die ajax fähig (oder aber funktioniert auch im IE mit deaktiviertem js).
vermutlich kann auch keiner außer mir was damit anfangen, doch bisher hat es mein arbeitstempo mindestens verdoppelt.

aber das war ja auch nicht das thema, ich wollte ja nur wissen ob es außer object und data andere methoden gibt den code valide zu machen.

 

[Daaron]

versuch mal ein document mit ddem doctype html ausliefern und rufe das im IE 6 auf. Leider muss ich den auch supporten

Ich muss zugeben, ich habe seit Jahren keinen IE6 mehr gesehen und ich teste auch nicht gegen diesen Rotz, weil mich dafür keiner bezahlt...
Aber laut http://stackoverflow.com/questions/5935065/which-mode-is-ie6-if-doctype-is-html-as-html5 schickt <!doctype html> den IE6 einfach in den Standard-Modus... also was solls.

Du hast aber ein paar Optionen, z.B: liefere per Conditional Comment das Dokument für den IE6 halt als HTML 4 oder XHTML aus. Dass es dann nicht valide ist, ist ja wurst. Der W3C-Validator wird es nie merken und der IE6 rendert Webseiten eh, so wie er denkt, und nicht so, wie das W3C denkt.

Stell dir aber mal ein paar gänzlich andere Fragen:
Wie wahrscheinlich ist es, dass ein IE6 kommen wird? Schreibst du für den chinesischen Markt mit seinen 25% Marktanteil? Oder für Europa, mit vielleicht 1%?
Wie effektiv wird ein IE6 oder 7 die Seite überhaupt laufen? Diese uralten Engines ruckeln bei jeder JS-Aktion doch erbärmlich.
Wie wird die Seite in IE6, 7 und 8 überhaupt gerendert? Wie viele Millionen Zeilen an CSS willst du schreiben, um das Box Model zu fixen?

Meine Meinung: Seiten NUR noch in HTML5 mit CSS3 ausliefern... Wer mit nicht-kompatiblen Uralt-Browsern surft kriegt ne Fehlermeldung, dass er sich doch bitte FF, Opera, Chrome oder Safari installieren soll. Fertig.

man kann zwar nicht den zurückbutton des browsers abfangen aber eine kleine eigene navigation anzeigen und zurück navigieren, gestetet und klappt super. man kann die gesamte seite auch nur per parameter steuern.

Sobald du den Zurück-Button nicht sauber benutzen kannst, ist es schlechte Usability. So einfach ist das. AJAX-Pages sind Schrott, weil sie nur mit extremen Hacks vernünftig bedienbar sind.

aber das war ja auch nicht das thema, ich wollte ja nur wissen ob es außer object und data andere methoden gibt den code valide zu machen.

Nö, aber muss es denn?
AJAX ist eine typische Funktion des Web 2.0. Wozu soll man sich im Web 2.0 noch Gedanken um Web 0.1beta - Browser wie den IE6 machen? Entscheide dich für eines, aber versuch keinen Spagat über die Jahrzehnte.

 

[mercsen]

ja das dachte ich auch, bis ich gleich 2 aufträge in folge bekommen habe wo ich für den IE 6 entwickeln musste! Gerade in großen firmen ist XP noch weit verbreitet und oft mit dem IE6.
Bewerbe mich gerade um einen neuen Job, die seite wird auch wieder vornehmlich für firmenkunden sein und auch dort steht als anforderung der IE 6 drinne. k.a. ich immer an solche kunden gelange, allerdings legen die dafür auch was extra auf den tisch, was ich möglichst einfach einstecken will da ich hoffe das Framework erleichtert mir das ganze

Langsam ist es nicht wirklich, das ganze basiert auf jQuery und das ist selbst im IE 6 schnell.

Das problem ist wenn du ein falsches doctype auslieferst springt der IE in den quirks modus und die seite ist nahezu nicht mehr anzeigbar.

das der müll ist weiß ja jeder, hab mir deshalb auch nen script geschrieben, welches bekannte bugs in css datein für den ie anpasst, z.b. bei positionsangaben immer alle 4 koordinaten angeben etc.

Ich werde mich von meinem vorhaben jedenalls nicht abbringen lassen - da es wie schon erwähnt mein arbeitstempo enorm gesteigert hat.

Ich will meine projekte eben für möglichst viele sachen bereitstellen ohne extrem viel extra aufwand zu betreiben. bei meinen ersten versuchen musste ich teilweise für den IE die seite komplett neu schreiben, das entfällt nun fast vollständig, bis auf einige kleine ausnahmen.

Zudem ist es auch das absolut richtige verhalten eine seite zu schreiben das sie ohne JS auskommt und dieses erst später selbstständig die dynamik einbaut.

Gibt ja immernoch leute die JS ausschalten oder noScript nutzen

 

[Daaron]

ja das dachte ich auch, bis ich gleich 2 aufträge in folge bekommen habe wo ich für den IE 6 entwickeln musste! Gerade in großen firmen ist XP noch weit verbreitet und oft mit dem IE6.

XP kann IE7 und 8... Eigentlich sollte man mal einen RICHTIG brutalen Virus im Internet loslassen, der IE6-User gezielt angreift und denen sämtliche Festplatten detonieren lässt. Dann wär das Elend endlich vorbei.

Das problem ist wenn du ein falsches doctype auslieferst springt der IE in den quirks modus und die seite ist nahezu nicht mehr anzeigbar.

Wie gesagt, laut dem was ich da gelesen habe versetzt der Doctype den IE6 in den Standards Mode.

Gibt ja immernoch leute die JS ausschalten oder noScript nutzen

Viel wichtiger: Es gibt Blinde und es gibt Webcrawler. Beide Parteien nutzen kein JS und keine Frames.


Aber warum schreibst du wirklich ein eigenes Framework? Kannst du nicht auf ein bestehendes, stabiles CMS bauen und das jeweils für deine Bedürfnisse modifizieren? Dann umgehst du den ganzen AJAX-Quatsch, der am Ende keine Ladezeiten spart sondern nur Arbeit macht. Der Löwenanteil schlechter Ladezeiten kommt doch nur daher, weil der Server falsch konfiguriert ist, z.B. weil er keine Kompression anbietet und weder Cache-Verfallszeiten noch Cache-Validierung.

 

[T. Smith]

Wie gesagt, laut dem was ich da gelesen habe versetzt der Doctype den IE6 in den Standards Mode.

Das ist korrekt.

 

[ice-breaker]

Sobald du den Zurück-Button nicht sauber benutzen kannst, ist es schlechte Usability. So einfach ist das. AJAX-Pages sind Schrott, weil sie nur mit extremen Hacks vernünftig bedienbar sind.

Kann man nicht besser ausdrücken.
Wer die Funktionalität des Zurück-Buttons bricht, der hat absoluten Bockmist gebaut und kann sich noch so anstrengen und alles andere noch so toll umsetzen, es ist einfach nur Mist!

@Mercsen: Entweder du schaffst es mit AJAX den Zurück-Button zu unterstützen oder du lässt es. Aber wegen einer so unsinnigen Sinn, wie dem Laden von Inhalt per AJAX statt einem Page-Reload eine Grundfunktionalität des Browsers ist eine wahnsinnige Idee. Das gehört fast schon in die Schublade der "Web 2.0 Gehirnwäsche" für Webentwickler.