Contao auf HTML5 trimmen?

**ribery** · 26.09.2010, 14:01

Hallo,

sehe ich es richtig, dass es aktuell noch nicht möglich ist, Contao auf HTML5 umzustellen? Mit HTML5 meine ich konkret, den DOCTYPE <html> und die verschiedenen DIVs für Kopfzeile, Hauptspalte, Linke Spalte, Rechte Spalte und Fußzeile durch die neuen Strukturelemente <header>, <nav> etc. zu ersetzen (idealerweise mit den JS-Fallbacks für die nicht standard-konformen Browser).

Siehe auch hier: http://www.alistapart.com/articles/previewofhtml5

Danke und Grüße

***Nina*** · 26.09.2010, 14:30

Wenn du das Frontend-Template (fe_page.tpl) anpasst, kannst du das natürlich tun. Es ist aber noch nicht im Core enthalten (ist ja auch noch stark in der Entwicklung).

**joe** · 26.09.2010, 14:32

Du kannst dir ja ein eigenes fe template in deinem theme anlegen und es dementsprechend modifizieren. Bzw. sollte dich http://www.contao.org/erweiterungsli...000009.de.html die Extension dabei schon unterstützen.

Zudem kannst du dir ja den http://www.modernizr.com/ einbauen. Dann musst du eigentlich nur noch die Elmente dem Dom hinzufügen und es sollte laufen.

Leider st es meines erachtens immer noch nicht gut html5 zu verwenden und ich befürchte das sich das auch im nächsten Jahr noch nicht groß verändern wird. Das Problem sind Updatefaule Internetnutzer

**ribery** · 26.09.2010, 14:44

Vielen Dank! Ok, dann werde ich mal schau'n, wie ich mich da durchkämpfe. Evtl. schreibe ich das ganze dann mal als Tutorial nieder, da dieses Thema sicherlich mittelfristig eine große Rolle spielen wird.

**FloB** · 26.09.2010, 15:43

Natürlich kann man HTML5 heute schon in vollem Maße einsetzen, ohne ältere (aber nicht ganz alte) Browser auszuschließen. IE <9 braucht leider aktiviertes JS, sonst gibt es Codesalat, sonst geht das hervorragend. Ich empfehle hier http://html5boilerplate.com/.

**kahlil** · 28.09.2010, 12:14

http://github.com/kahlil/HTML5-Boile...ry-with-Contao

Cheers.

**ribery** · 29.09.2010, 08:32

Wow, das sieht viel versprechend aus! Weerd's testen und bedanke mich nochmasl ganz herzlich für den heißen Tipp!

**FloB** · 29.09.2010, 14:02

Zitat von kahlil

http://github.com/kahlil/HTML5-Boile...ry-with-Contao

Cheers.

Pull Request

Cheers.

**kahlil** · 04.10.2010, 14:56

URL hat sich geändert: http://github.com/kahlil/Contao-CMS-...te-with-jQuery

Hey Flob danke fürs Kollaborieren

**FloB** · 04.10.2010, 22:48

Läuft. Danke fürs release'n

. Sind im Übrigen meine ersten Gehversuche mit Github. Klappt bisher ganz gut!

**kahlil** · 04.10.2010, 23:04

Für mich auch! Fetzt.

**FloB** · 04.10.2010, 23:07

Jop. There is more to come. Allerdings wohl nichts Contao-mäßiges … server-side JS (z. B. node.js) fasziniert mich grade wahnsinnig

.

**kahlil** · 05.10.2010, 15:17

uff ich glaub da bin ich raus. server programmieren und so

Aber ich werds verfolgen

**FloB** · 06.10.2010, 08:37

Ist mit vertretbarem Aufwand verbunden. Und der Vorteil: Nix mit mod_rewrite und so, ich gras direkt bei den Requests ab. Nicht zuletzt ein unfassbarer Geschwindigkeitsvorteil. Ein CMS auf (z. B.) node.js-Basis würde nur so durchflutschen

.

**kahlil** · 06.10.2010, 09:26

hört sich ja übelst geil an.
Also wenn Du das CMS baust das auf node.js basiert und bei dem das editieren der Webseiten über den http://aloha-editor.com/ gelöst wird, mach ich mit.

Das wär sick. Is halt voll se fjutschor of ZeeEmmEss!

**ribery** · 08.10.2010, 13:33

Tja, leider scheint das HTML5-Template unterm IE nicht sauber zu funken: http://www.contao-community.de/showt...am-Seitenkopf!

Deswegen musste ich soeben wieder 'ne Rolle rückwärts machen

**FloB** · 08.10.2010, 14:45

Riecht nach einem str_replace(). Nur wo?

**FloB** · 08.10.2010, 14:52

Zitat von kahlil

hört sich ja übelst geil an.
Also wenn Du das CMS baust das auf node.js basiert und bei dem das editieren der Webseiten über den http://aloha-editor.com/ gelöst wird, mach ich mit.

Das wär sick. Is halt voll se fjutschor of ZeeEmmEss!

Nee, WMD bzw. iwas Richtung Markdown. Bzw. eigentlich verschiedene Parser und Editoren, so dass jeder auf seine Kosten kommt. Integrierung soll einfach so laufen, dass Parser auf verschiedene Inputs losgelassen werden können. Editoren kommen via unobstrusive JS und sind nicht fest integriert.

Kriegst ne Info, wenn ein Fizzel Code vorhanden ist. Aber die nächsten zwei Jahre wird wohl nix pre-Alpha (vom Framework) erscheinen. Je nachdem, ob und wer sich beteiligen will

. Vielleicht auch erst was Richtung PHP bzw. Hybrid, da node.js noch an manchen Stellen was tun muss (und ich kein C/++ kann und sowieso kein Grundlagenprogrammierer bin^^). Vielleicht kommt auch gar nichts. Nur Ideen hat man so viele

…

Anyway, back to topic!

**kahlil** · 09.10.2010, 23:54

Zitat von ribery

Tja, leider scheint das HTML5-Template unterm IE nicht sauber zu funken: http://www.contao-community.de/showt...am-Seitenkopf!

Deswegen musste ich soeben wieder 'ne Rolle rückwärts machen

Ich hab keine Probleme. Funktioniert einwandfrei auch auf IE.

Gruss.

**kahlil** · 09.10.2010, 23:56

Zitat von FloB

Nee, WMD bzw. iwas Richtung Markdown. Bzw. eigentlich verschiedene Parser und Editoren, so dass jeder auf seine Kosten kommt. Integrierung soll einfach so laufen, dass Parser auf verschiedene Inputs losgelassen werden können. Editoren kommen via unobstrusive JS und sind nicht fest integriert.

Kriegst ne Info, wenn ein Fizzel Code vorhanden ist. Aber die nächsten zwei Jahre wird wohl nix pre-Alpha (vom Framework) erscheinen. Je nachdem, ob und wer sich beteiligen will

. Vielleicht auch erst was Richtung PHP bzw. Hybrid, da node.js noch an manchen Stellen was tun muss (und ich kein C/++ kann und sowieso kein Grundlagenprogrammierer bin^^). Vielleicht kommt auch gar nichts. Nur Ideen hat man so viele

…

Anyway, back to topic!

Cool. Halt mich auf dem laufenden... back to topic...

**kahlil** · 15.10.2010, 14:13

Die Fehler in der XHTML5 Extension wurden in der neuen Version behoben.

**kahlil** · 29.10.2010, 13:43

Hab das HTML5 Boilerplate in eine Ext eingearbeitet.

http://www.contao.org/erweiterungsli....90053.de.html

**yellowled** · 04.11.2010, 14:36

Zitat von kahlil

Hab das HTML5 Boilerplate in eine Ext eingearbeitet.

Coole Sache.

Gleich auf dem localhost ausgetestet, nachdem ich es im Erweiterungskatalog fand.

Feedback? Feedback:

1. Der Pfad zu Modernizr wird falsch gesetzt. Bei mir liegt Modernizr nach Installation der Extension in system/modules/html5boilerplate/html/js/libs/, das Template verlinkt jedoch nach system/layout/html5boilerplate/html/js/libs/ -- dadurch schmeißt Modernizr einen 404 und #jsnotice wird angezeigt, obwohl JS aktiv ist.

2. <section class="inside"> in header, main und footer halte ich für das falsche Element, da die .inside-Container (meiner Interpretation nach) keine semantische Bedeutung haben, sondern der Gestaltung dienen, ergo div-Elemente sein sollten. Innerhalb des header- und footer-Elementes sollten, denke ich, keine section-Elemente verwendet werden.

Innerhalb von #container dürfte es recht naheliegend sein, aus #main eine section zu machen, aber generell ist die Zuweisung der neuen semantischen Elemente aus HTML5 in einem CMS schwierig, da diese Entscheidung eigentlich (nur meine Meinung) nicht auf Template- sondern auf Seiten-/Artikel-Ebene gefällt werden müsste.

3. Das meta-Element viewport habe ich hier doppelt im Template: Einmal direkt nach X-UA-Compatible, dort mit maximum-scale, und einmal vor robots, dort ohne maximum-scale. Ich meine mich zu erinnern, dass letzteres neu in Boilerplate 0.9.5 ist, insofern vielleicht ein Relikt aus einer Vorversion.

Das war mir in einem schnellen Durchlauf aufgefallen. Ansonsten wie gesagt: Coole Sache.

Ach so, eine Frage habe ich auch noch, weil ich im Moment nicht wirklich die Zeit habe, es selbst zu testen: Hast Du ausprobiert, ob sich das so eingebundene jQuery problemlos mit einem evtl. zusätzlich eingebundenen MooTools verträgt, z.B. also weiterhin die Contao-Inhaltselemente, die im Frontend MooTools brauchen, funktionieren?

Grüße, Matthias

**kahlil** · 04.11.2010, 14:44

Hey Matthias danke für das Feedback!

Danke für die Hinweise.
Ich werde das asap fixen und einstellen.

Um jQuery problemlos mit Mootools zu verwenden musst Du die noconflict() Methode von jQuery einsetzen.
Ich glaube ich hab die auskommentiert. Genauso wie den Aufruf der Mootools Scripts.

Die Ext ist etwas egoistisch da ich selber Mootools nicht benutze. Ich ersetze vorhandenen Mootoolscode mit jQuerycode. Zwei Frameworks zu laden halte ich für suboptimal.

Danke nochmal. Wenn das update drin ist poste ich hier wieder.

Ansonsten kannst Du die Änderungen auch selber vornehmen und mir einen Pull Request auf Github schicken.
https://github.com/kahlil/HTML5-Boil...for-Contao-CMS
Gruss,
Kahlil

**yellowled** · 04.11.2010, 15:11

Hi Kahlil,

da nich für, ich weiss, wie wertvoll Feedback ist und dass 4 Augen mehr als 2 sehen (oder 6 mehr als 4)

Zitat von kahlil

Um jQuery problemlos mit Mootools zu verwenden musst Du die noconflict() Methode von jQuery einsetzen. Ich glaube ich hab die auskommentiert. Genauso wie den Aufruf der Mootools Scripts.

Die Ext ist etwas egoistisch da ich selber Mootools nicht benutze. Ich ersetze vorhandenen Mootoolscode mit jQuerycode. Zwei Frameworks zu laden halte ich für suboptimal.

Geht mir genauso -- ich kann zwar verstehen, warum man sich als Kernentwickler/JS-Freak für MooTools entscheidet, ich fühl mich aber selbst auch mit jQuery wohler bzw. bin mit MooTools nie richtig warm geworden.

Eine schöne Idee wäre übrigens, wenn man all diese „Schalter“, also ein-/auskommentieren, irgendwie im Backend vornehmen könnte, z.B. über Checkboxen o.Ä., analog zu den jQuery-Einbindungen. Keine Ahnung, ob das überhaupt geht, ich bin reiner Frontend-Fuzzi.

Zitat von kahlil

Ansonsten kannst Du die Änderungen auch selber vornehmen und mir einen Pull Request auf Github schicken.

Wie gesagt: Ich bin reiner Frontendler. Ich helfe gerne in puncto HTML/CSS/JS mit, aber PHP ist für mich ein Buch mit sieben Siegeln.

(Offen gestanden weiß ich nicht mal genau, wie ein pull request funktioniert, aber ich seh's mir mal an.)

Noch so 1-2 lose Ideen?

Ich spiele schon etwas länger mit dem Gedanken, für die Inhaltselemente im Contao-Kern, die MooTools brauchen (Akkordeon, sortierbare Tabelle, Mediabox), jQuery-Alternativen zu basteln, habe allerdings keine Ahnung, wie man das vernünftig integriert. Hier müsste das doch recht simpel über eine Template-Datei analog zur moo_boilerplate_jquery.tpl gehen, oder? Oder halt in die js/plugins.js einbauen ...

Eine gute Ergänzung zur Extension wäre vielleicht ein importiertbares Theme, welches zusätzliche HTML5-Templates für andere Inhaltselemente enthält, damit man etwas mehr HTML5 als hier vorgegeben hat -- dabei könnte ich sogar recht aktiv helfen.

(Bräuchte allerdings Hilfe, wenn man's als Extension umsetzen sollte.)

Grüße, Matthias

**yellowled** · 04.11.2010, 16:12

Zitat von yellowled

(Offen gestanden weiß ich nicht mal genau, wie ein pull request funktioniert, aber ich seh's mir mal an.)

Och, guck. War ganz einfach. Pull request sent.

Grüße, Matthias

**kahlil** · 04.11.2010, 16:18

Coole Sache. Check ich nacher aus.

Wg. den jQuery Alternativen in Ext-Form können wir uns gerne mal unterhalten. Vielleicht können wir uns die Arbeit ja teilen.
Ich hab neulich auch die jQuery Tabs von jQuery UI als Ext für Contao umgesetzt, hab ich noch nicht in die Repository gehaun aber grundsätzlich wäre das auch was feines so nach und nach die wichtigsten jQuery UI Elemente inkl. CSS-Themes als Ext für Contao umzusetzen.

Gruss
K

**yellowled** · 04.11.2010, 16:28

Zitat von kahlil

Wg. den jQuery Alternativen in Ext-Form können wir uns gerne mal unterhalten. Vielleicht können wir uns die Arbeit ja teilen.

Gerne, mache allerdings ab Samstag erstmal ein paar Tage Urlaub und kriege mit dem Nudelholz, wenn ich in der Zeit zuviel am Rechner bin.

skype ist derzeit auch schlecht -- Headset passte nicht mehr ins Gepäck. Aber es läuft ja nicht weg, und E-Mail gibt's ja auch noch.

Zitat von kahlil

Ich hab neulich auch die jQuery Tabs von jQuery UI als Ext für Contao umgesetzt, hab ich noch nicht in die Repository gehaun aber grundsätzlich wäre das auch was feines so nach und nach die wichtigsten jQuery UI Elemente inkl. CSS-Themes als Ext für Contao umzusetzen.

Ich habe mich lange nicht mehr mit jQuery UI befasst, fand's aber beim letzten Mal, als ich es mir angesehen habe, etwas umständlich. Kann ich mir aber nochmal ansehen.

Was die Kern-Elemente angeht: Akkordeon ist selbst für mich als relativen jQuery-Anfänger Kinderkram, sortierbare Tabellen müssten mit tablesorter machbar sein und an Stelle der Mediabox könnte man Fancybox oder Colorbox einbauen. Oder halt die entsprechenden Teile aus jQuery UI, wobei andere Plugins meiner Erfahrung nach oft netter sind. Schau'n 'mer mal.

Grüße, Matthias

**yellowled** · 05.11.2010, 06:07

Update beta2 installiert, gibt mir im error.log:

Code:

Uncaught exception 'Exception' with message 'Could not find template file "fe_html5_page"' thrown in /var/www/contao/system/libraries/Controller.php on line 109

..?

Nachtrag: Gerade gesehen: Das Boilerplate liegt in der beta2 nicht in ROOT/system/modules, sondern in ROOT/modules, was vermutlich vom System einfach nicht gefunden wird. Hoffe, meine Änderungen waren nicht schuld daran.

Grüße, Matthias

**kahlil** · 05.11.2010, 10:19

Zitat von yellowled

Update beta2 installiert, gibt mir im error.log:

Code:

Uncaught exception 'Exception' with message 'Could not find template file "fe_html5_page"' thrown in /var/www/contao/system/libraries/Controller.php on line 109

..?

Nachtrag: Gerade gesehen: Das Boilerplate liegt in der beta2 nicht in ROOT/system/modules, sondern in ROOT/modules, was vermutlich vom System einfach nicht gefunden wird. Hoffe, meine Änderungen waren nicht schuld daran.

Grüße, Matthias

War mein Fehler. Sollte gefixt sein.

**yellowled** · 05.11.2010, 11:09

Zitat von kahlil

War mein Fehler. Sollte gefixt sein.

Jep. Allerdings kriege die #jsnotice-Meldung immer noch angezeigt, obwohl JS aktiv ist und auch der Modernizr jetzt korrekt eingebunden wird. Da fe lt vermutlich einfach etwas in layout/js/script.js, was das aus dem DOM entfernt, oder?

Grüße, Matthias

**chris09** · 24.05.2011, 07:25

Zitat von FloB

Ist mit vertretbarem Aufwand verbunden. Und der Vorteil: Nix mit mod_rewrite und so, ich gras direkt bei den Requests ab. Nicht zuletzt ein unfassbarer Geschwindigkeitsvorteil. Ein CMS auf (z. B.) node.js-Basis würde nur so durchflutschen

.

http://calip.so/

**kahlil** · 25.05.2011, 09:04

Hey schöner Fund das mit dem node.js CMS

Hey @yellowled irgendwie hatte ich Dein Kommentar vom November verpasst.
Jedenfalls ist die Ext upgedated auf die aktuelle Version und #jsnotice is raus.
Das war deshalb bisher drin weil ich in der CSS Datei

Code:

.js #jsnotice {display:none}

nicht drin hatte.

Gruß
Kahlil

**zonky** · 29.11.2011, 20:59

Zitat von kahlil

Ich hab neulich auch die jQuery Tabs von jQuery UI als Ext für Contao umgesetzt, hab ich noch nicht in die Repository gehaun
K

hallo kahlil,

sind die jQ-Tabs schom im Rep bzw. könntest Du die hier mal mit posten...?? wäre super!!!

Ich teste und "debugge" gerade den ce_slider_jqery

Gruss zonky

**kahlil** · 30.11.2011, 20:28

Zitat von zonky

hallo kahlil,

sind die jQ-Tabs schom im Rep bzw. könntest Du die hier mal mit posten...?? wäre super!!!

Ich teste und "debugge" gerade den ce_slider_jqery

Gruss zonky

Ich habe noch keine Zeit gefunden die ext in die Repository zu hauen.
Habe sie aber als Zip angehängt.
Schau mal ob du was damit anfangen kannst.

Gruß,
Kahlil

**zonky** · 01.12.2011, 07:11

o.k. I try it...

**zonky** · 01.12.2011, 14:24

ich habe das "Paket" ausgepackt... und mal einen "Tab-Container" angelegt...

=> als Inhaltselement kann ich diesen aber nicht auswählen - Bug oder Feature?

arbeite übrigens mit 2.10.3 & Boilerplate

zonky

**zonky** · 08.12.2011, 08:33

Hallo kahlil,

folgend einige Anmerkungen anhand meiner Erfahrungen mit deiner BP-Erweiterung:

* ich hatte die BP-CSS als CSS ins Theme eingeladen - das war natürlich Quatsch: die wird schon fix per fe_template geladen
* den Tags <header> und <footer> habe ich noch die gleichnamigen id mit auf den Weg gegeben - so kann man weiter mit dem Online-Theme-Styler des BE arbeiten
* die Templates könnten auch als .xhtml und .html5 dabei sein... ;-)
* bei der Einbindung von JS muss man aufpassen, dass man nicht in $GLOBALS das TL_JAVASCRIPT verwendet sondern TL_MOOTOOLS - die Scripte werden "im Fuß" eingebunden und per TL_JAVASCRIPT landen die JS-Schnipsel in $this->head
* $this->head im Template "nach unten" zu setzen geht nicht, da hier einige Syles usw. rausgeschrieben werden, die "nach oben" gehören

* diese Einbindung des JS für andere Erweiterungen nicht ohne Änderungen möglich, da viele/einige ihre JS-Templates in das Array TL_JAVASCRIPT einbinden und das wie geschrieben in $this-head ausgegeben wird (siehe PageRegular.php bei "// Add internal scripts..." )

gruss zonky