Heydon-Speech added!
Suppose you either don’t get wet or you „Dive into HTML5“ by Mark Pilgrim. Understanding basic HTML/CSS is much less work, than inserting your 4D-data into HTML created by some WYSIWYG editors.
This is a basic page, loaded from the resources-folder of my 4D-app. Works perfectly on current desktops and mobiles.
PROCESS 4D TAGS expands the variables I named html@ and filled before processing the tags. My body often is an XML-tree which gets prepared by DOM EXPORT TO VAR ( $xmlRoot ; htmlBody ). Even more often it’s a template filled with 4D Transformation Tags like this one:
This template loops across a selection of records and fills in the content as shown below (WebArea inside a 4D-form). Kasse_KeyName is the green name on top of the tables, the table-cells should be explanatory by themselves. The <div>s deliver the icing on the cake.
For HTML-editing and 4D Tag insertion I prefer Coda by Panic and/or BBEdit by BareBones. Then there is Espresso by MacRabbit offering the best CSSEditor I know of. All three of them worth every penny!
You do need to understand basic CSS-properties. Try to omit classes, instead style basic tags like <h1>, <p>, <table>, <tr>, <td>, <tfoot>, <thead>, <footer>, …. You don’t need to understand the details and finegrained CSS, if your aim is to enhance your 4D.
w3School and stackoverflow is a good source for getting answers.
Suppose, you better start diving today.
Follow 50 minutes of Heydon Pickering
Heydon Pickering | Effortless Style | CSS Day from Web Conferences Amsterdam on Vimeo.
The hassles getting Internet Explorer to behave bravely should be stories of the past. Suppose it’s keeping experts on the payroll till their retirement.
Wasch mich aber mach mich nicht naß? Tauchen Sie ein in „Dive into HTML5“ von Mark Pilgrim. Einmal die Grundlagen von HTML/CSS verstehen ist viel weniger Arbeit, als die eigenen 4D-Daten in ein HTML einzubauen, das von einem WYSIWYG Editor stammt.
Hier ist das Rahmen-HTML, in das ich den aktuellen Inhalt einsetze. Dieses Template lade ich aus dem Resources-Ordner meiner 4D-app.
PROCESS 4D TAGS setzt den aktuellen Inhalt der html@-genannten Variablen ein. Diese Variablen fülle ich vor PROCESS 4D TAGS. Den eigentlichen Inhalt <body> baue ich gerne mit den XML-Befehlen auf. Das XML exportiere ich zum Schluß in die Variable DOM EXPORT TO VAR ( $xmlRoot ; htmlBody ) und lösche es anschließend. Noch lieber fülle ich Templates aus, die ich mit den 4D Transformation Tags gespickt habe, wie in diesem Beispiel:
Dieses Template füllt in einer Schleife/Loop die aktuellen Datensätze ein. Das Ergebnis ist unten in einer WebArea innerhalb eines 4D-Formulars zu sehen. Kasse_KeyName ist der grüne Name oberhalb der Tabellen. Die Tabellenzellen erklären sich selbst. Die <div>s liefern die Dekoration.
Um HTML zu editieren und 4D Tags einzusetzen bevorzuge ich Coda von Panic und/oder BBEdit von BareBones. Außerdem zu empfehlen ist Espresso von MacRabbit mit dem besten CSSEditor, den ich kenne. Alle drei sind jeden Cent wert!
Sie werden nicht umhinkommen die grundlegenden CSS-Eigenschaften kennenzuleren. Versuchen Sie CSS-Klassen class zu vermeiden. Stattdessen sollten Sie Stilanweisung für die semantischen HTML-Tags vergeben wie <h1>, <p>, <table>, <tr>, <td>, <tfoot>, <thead>, <footer>, …. Dazu brauchen Sie sich nicht in die Details von CSS einzuarbeiten, wenn Ihr Hauptziel die Darstellung von Daten aus 4D ist.
w3School und stackoverflow sind gute Suchplätze, um Antworten zu finden.
Ich bin schon lange eingetaucht, Sie folgen besser gestern als heute.
Und schauen Sie sich 50 Minuten mit Heydon Pickering an, britisches Englisch aber es könnte schlimmer sein
Heydon Pickering | Effortless Style | CSS Day from Web Conferences Amsterdam on Vimeo.
Glücklicherweise geht der Internet Explorer immer mehr Menschen am Allerwertesten vorbei. IE produziert die Umstände, für die CSS berüchtigt ist. IE unterstützen die Experten, die sich nicht haben frühverrenten lassen.