CODE-DESIGN

[zoidberg]

Hi,

ich wollte mal fragen, wie eure Meinung zum Thema "SCHÖNER QUELLCODE" ist. Ich beschäftige mich erst seit kurzem (3/4-Jahr) mit HTML und dabei die längste Zeit nur mit Tabellen rumgehühnert. Ich beschäftige mich nun vermehrt mit validem html und css habe aber irgendwie das problem, dass der verfasste code immer irgendwie unübersichtlich ist.
Weder im Forum noch in selfHTML habe ich zu diesem Thema was gefunden, fände es aber doch mal interessant.

Wo macht ihr absätze, zeilenumbrüche(insbesondere bei langen texten mit vielen ), kommentare, einrückungen u.s.w. ...

Ich erwarte keine langen abhandlungen von euch, würde mich aber über ein paar Tipps freuen, die sich bei euch in der Praxis bewährt haben.

mfg - zoidberg

[Orlando]

Hi zoidberg,

ich wollte mal fragen, wie eure Meinung zum Thema "SCHÖNER QUELLCODE" ist.

Validität ist schon ;-) Er sollte strukturiert sein, das heißt, Einrückungen aufweisen. Tabulatoren setze ich keine, da mir diese zu viel Platz beanspruchen. Ein Leerzeichen reicht IMHO völlig aus. Zwischen verschiedenen Bereichen lasse ich meist drei leere Zeilen stehen, um den Quelltext etwas aufzulockern. Manche Leute setzen Kommentare, um sich zurechtzufinden - Schnickschnack.

Ich erwarte keine langen abhandlungen von euch, würde mich aber über ein paar Tipps freuen, die sich bei euch in der Praxis bewährt haben.

Seinen Stil muss jeder selbst finden. Sieh dir doch einfach die Seiten hiesiger Teilnehmer an.

Grüße,
 Roland

[Markus Pitha]

Hi Orlando,
Welch ein Zufall das ich erst jetzt draufkomme, dass du auch ein Wiener bist. Vielleicht sollte ich mir öfter mal die Webseiten der Teilnehmer hier ansehen :)

Markus Pitha.

[Julian Hofmann]

Hallo.

Die Formatierung hängt teilweise auch davon ab, wie sich die Seite zusammensetzt. NOrmal schaue ich darauf, dass Tabellen usw. durch Einrückung für mich übersichtlich bleiben, und dass Unterschiedliche Teile durch Leerzeilen und/oder Kommentar getrennt sind.
Da aber immer mehr Projekt eh zusammengestückelt werden aus unterschiedlichen Dateien (z.B. Kopf, Content, Fuß) oder Inhalte per Funktionen geliefert werden, ist nicht immer ordentlich formatiert.

Die Zeilenlänge versuche ich übersichtlich zu halten (80 Zeichen), soweit es sinnvoll ist. Tags werden nicht umgebrochen, nur Textpassagen.

Grüße aus Würzburg
Julian

[Andavos]

Hallo,
Schöner Code:
-Leicht Verständlich
-Einfache Anpassungen (z.B. für Erneuerungen)
-Strukturiert und Übersichtlich

Aber bei HTML ist "Schöner Quellcode" gar nicht so wichtig, bei Programmiersprachen, wie z.B. PHP ist das extrem viel wichtiger. Denn bei HTML gibt es nur wenige Zusammenhänge, was bei Programmiersprachen anders ist.

Dort kann die Zeile 5 000 etwas mit der Zeile 4 zu tun haben.... Bei HTML ist das nicht so extrem

MFG
Andavos

[Tom]

Hello,

Aber bei HTML ist "Schöner Quellcode" gar nicht so wichtig,

Bei HTML ist "schöner Quellcode" tödlich, denn Browser sind nur Kinderkacke!

Liebe Grüße aus http://www.braunschweig.de

Tom

[at]

Hallo.

Bei HTML ist "schöner Quellcode" tödlich, denn Browser sind nur Kinderkacke!

Und diese Aussage ist ein Elefantenhaufen.
MfG, at

[Tom]

Hello,

Bei HTML ist "schöner Quellcode" tödlich, denn Browser sind nur Kinderkacke!

Und diese Aussage ist ein Elefantenhaufen.

Wieso? Wenn die Ausnahmeregeln eine größere Zahl einnehmen, als die Standards, dann ist das eindeutig Kinderkacke. Aber unsere "Rechtssysteme" sind ja genauso gestrickt. :-((

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Ingo Turski]

Hi,

Wo macht ihr absätze, zeilenumbrüche(insbesondere bei langen texten mit vielen ), kommentare, einrückungen u.s.w. ...

da ich ausschließlich im Quelltext arbeite, sehe ich natürlich zu, daß er übersichtlich genug ist und ich mich auch nach längerer Zeit wieder schnell darin zurecht finde. Die Trennung von Inhalt und Design ist dabei schonmal sehr hilfreich.

Einrückungen verwende ich - recht selten - nur bei mehrfach verschachtelten Elementen.
Wichtiger sind mir Leerzeilen zwischen einzelnen Bereichen oder nach Absätzen.
Fließtext steht bei mir bis zu einem <br /> bzw. Absatzende in einer Zeile; mein Editor bricht mir das ohnehin passend um. Würde ich hier Einrückungen verwenden, dann sähe das eher unübersichtlicher als besser strukturiert aus.

Auf Kommentare verzichte ich völlig, außer bei Seiten für andere. Da ich meinen eigenen "Stil" kenne und auch aussagekräftige Namen für die Selektoren verwende, brauche ich sie nicht und kann den Besuchern diese zusätzlichen Bytes ersparen.

freundliche Grüße
Ingo

[Beat]

Hi,

Hough

ich wollte mal fragen, wie eure Meinung zum Thema "SCHÖNER QUELLCODE" ist.

klingt nach schöner wohnen

Ich beschäftige mich erst seit kurzem (3/4-Jahr) mit HTML und dabei die längste Zeit nur mit Tabellen rumgehühnert. Ich beschäftige mich nun vermehrt mit validem html und css habe aber irgendwie das problem, dass der verfasste code immer irgendwie unübersichtlich ist.

Ei das Problem wenn man per se irgend wie valide sein will....

Wo macht ihr absätze, zeilenumbrüche(insbesondere bei langen texten mit vielen ), kommentare, einrückungen u.s.w. ...

Ok ich schreibe lange Text im Texteditor.
Und da schreibe ich so, beziehungsweise unterteile so, dass ich mich in diesem langen Faden zurechtfinde.
nach <br> immer links
nach <\p> immer eine zusäzliche Zeile abstand
vor einem <h3> bis <h4> immer zwei Zeilen abstand
vor einem <h1> bis <h2> immer drei oder mehr.

Das ist nicht streng angwendet

Ich verwende Tabellen zum Layouten. Da ich aber konstant gleiche Layouts verwende kenne ich die Tabellensruktur in und auswendig.

Nach einem Syntaxtest (kommt bei mir selten vor) sogleich undo, um das Layout wieder herzustellen

Ich schreib meinen Code nicht für den schöner Wohnen Katalag bei Ansicht Quellcode meiner Besucher.

Ich erwarte keine langen abhandlungen von euch

danke

»», würde mich aber über ein paar Tipps freuen, die sich bei euch in der Praxis bewährt haben.

Na die html Schreibmaschiene ist noch nicht erfunden.

mfg - zoidberg

mfg Beat

[Tom]

Hello,

Wo macht ihr absätze, zeilenumbrüche(insbesondere bei langen texten mit vielen ), kommentare, einrückungen u.s.w. ...

das ist eine sehr gut Frage. Da ich mir meinen HTML-Code gerne vom CMS generieren lasse, muss ich dem Biest natürlich vorher auch beibringen, wo es denn breaken darf und wo das ggf. leider eine sichtbare Lücke hervorbringen würde. Noch spannender ist dabei die Einrückungstiefe von assemblierten CMS-Items zu kontrollieren.

aber

<td>
    <img src="..">
  </td>

sieht ganz nett aus im Quellcode, kann aber zu Hässlichkeiten führen...

Liebe Grüße aus http://www.braunschweig.de

Tom

[Tom2]

Hi Tom

aber

<td>
    <img src="..">
  </td>

sieht ganz nett aus im Quellcode, kann aber zu Hässlichkeiten führen...

Hässlichkeiten? Ich schreibe oft so. Was für Hässlichkeiten? Könntest du das bitte etwas ausführen?

FG und besten Dank

Tom2

[Tom]

Hello,

<td>
    <img src="..">
  </td>

sieht ganz nett aus im Quellcode, kann aber zu Hässlichkeiten führen...

Hässlichkeiten? Ich schreibe oft so. Was für Hässlichkeiten? Könntest du das bitte etwas ausführen?

Must Du einfach mal selber ausprobieren, ein Bild zu zerschneiden und in einer Tabelle die teilbilder auf diese Art mit dieser Schreibweise wieder zusammenzubauen. Dann siehst Du, was ich meine. Schaus Dir bitte mit verschiedenen Browsern an.

Liebe Grüße aus http://www.braunschweig.de

Tom

[Tom2]

Hi

<td>
    <img src="..">
  </td>

Must Du einfach mal selber ausprobieren, ein Bild zu zerschneiden und in einer Tabelle die teilbilder auf diese Art mit dieser Schreibweise wieder zusammenzubauen.

Ach so. Da werden wohl noch Leerschläge hineininterprätiert. Danke für den Hinweis.

Fg

Tom2

[Tom]

Hello,

<td>
    <img src="..">
  </td>

Must Du einfach mal selber ausprobieren, ein Bild zu zerschneiden und in einer Tabelle die teilbilder auf diese Art mit dieser Schreibweise wieder zusammenzubauen.

Ach so. Da werden wohl noch Leerschläge hineininterprätiert. Danke für den Hinweis.

Ja, und vorweg eigentlich auch, was mich dann wieder verwundert.
Erklärt wird es so, dass <img> ja schließlich ein Inlineelement sei und deshalb die umschließenden andern Inlineelemente eben auch angezeigt würden. Da aber in anderen Konstallationen Leerzeichen am Anfang und am Ende einer Zeile nicht angezeigt werden, ist hiermit mal wieder der Verdacht da, dass Browser doch Kinderkakke sind.

Liebe Grüße aus http://www.braunschweig.de

Tom

[at]

Hallo.

Da aber in anderen Konstallationen Leerzeichen am Anfang und am Ende einer Zeile nicht angezeigt werden, ist hiermit mal wieder der Verdacht da, dass Browser doch Kinderkakke sind.

Und dass es vielleicht an den Zeilenumbrüchen liegen könnte, ist dir nie in den Sinn gekommen?
MfG, at

[Tom]

Hello,

Da aber in anderen Konstallationen Leerzeichen am Anfang und am Ende einer Zeile nicht angezeigt werden, ist hiermit mal wieder der Verdacht da, dass Browser doch Kinderkakke sind.

Und dass es vielleicht an den Zeilenumbrüchen liegen könnte, ist dir nie in den Sinn gekommen?

Und was sit der Zeilenumbruch VOR dem <img> anderes als der Zeilenumbruch NACH dem <img>?
Und schließlich ist per Definition "whitespace" gleich "whitespace"

Ist Dir denn noch nie in den Sinn gekommen, dass Browser doch Kinderkacke sind?  *gg*

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Danny]

Hi,

darüber habe ich mir auch schon oft den Kopf zerbrochen...

Ich rücke Markup-Sprachen eigentlich fast immer gemäß ihrer Baumstruktur, bzw. dem DOM ein, da so die Struktur-Tiefe, bzw. Start und Ende bestimmter Blöcke auf den ersten Blick sichtbar wird.
Leider führt das an einigen Stellen zu Darstellungsproblem in diversen Browsern, weil deren Parser schlampig codiert wurden. ;) Wenn es sichtbar auffällt, bzw. zu gravierend ist, nehme ich die Einrückung an diesen Stellen dann wieder raus.

Tabs ziehe ich i.d.R. den Leerzeichen vor. Mich nervt sonst das ständige Leerzeichen-Tippen und manchmal verzählt man sich ja auch dabei. Außerdem kann ich in meinem Allzweck-Edior "Ultra Edit" die virtuelle Tab-Weite individuell einstellen. Konfiguriert habe ich auf vier Zeichen je Tab. Ein typischer Code sieht dann so aus:

<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="de" lang="de">
    <head>
        <title>Titel</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <meta http-equiv="Content-Language" content="de" />
        <link rel="stylesheet" type="text/css" href="basic.css" title="basis" />
    </head>
    <body>
        <div id="page-wrapper">
            <div id="header">
            </div>
            <div id="navbar">
                <ul>
                    <li>
                        <a href="#" id="nav-cur">Home</a>
                    </li>
                    <li>
                        <a href="#" id="nav-cur">Über uns</a>
                    </li>
                    <!-- etc. -->
                </ul>
            </div>
            <div id="main">
                <div id="content">
                    <h1>Dummytext</h1>
                    <p>
                        <strong>Lorem ipsum</strong> ...
                    </p>
                    <p>
                        blabla, blabla
                    </p>
                </div>
                <div id="sidebar">
                    etc.
                </div>
            </div>
            <div id="footer">
                <span id="updated">zuletzt aktualisiert am: 08.07.2004</span>
            </div>
        </div>
    </body>
</html>

MfG
Danny

[Tom2]

Hi

Ich verwende auch den UltraEdit zum Bearbeiten und Erstellen von ASP-Skripten. Der Editor ist ziemlich gut, es gibt da nur ein Feature, dass ich wirklich vermisse, bzw. noch nie entdeckt habe:

Mein SciTe und mein JEdit konnten Code-Blöcke, also If-Blöcke, Schleifen, Funktionen, Klassen, was auch immer zusammenfalten. Man hat dann jeweils nur noch die erste Zeile und ein '+' davor. Kann man das im UE auch irgend wie? Oder kann mir wenigstens jemand sagen, wie man dieses Feature nennt?

FG

Tom2

[Matzberger Marcus]

Hallo,

Ich verwende auch den UltraEdit zum Bearbeiten und Erstellen von ASP-Skripten. Der Editor ist ziemlich gut, es gibt da nur ein Feature, dass ich wirklich vermisse, bzw. noch nie entdeckt habe:

Mein SciTe und mein JEdit konnten Code-Blöcke, also If-Blöcke, Schleifen, Funktionen, Klassen, was auch immer zusammenfalten.

Block markieren
Ansicht -> Zeilen ausblenden/anzeigen
Tastenkürzel [STRG][-]

UltraEdit Version 9.20

Grüße
Marcus

[Tom2]

Hi

Block markieren
Ansicht -> Zeilen ausblenden/anzeigen

Wow, besten Dank! Das funktioniert.

Tastenkürzel [STRG][-]

Das funktioniert leider nicht, da ich an einer Notebook-Tatatur arbeite. Oder kann man das tortzem irgendwie machen? Ich glaube nicht... Schade.

Nochmals besten Dank

Irie

Tom2

[Matzberger Marcus]

Hallo,

Tastenkürzel [STRG][-]

Das funktioniert leider nicht, da ich an einer Notebook-Tatatur arbeite. Oder kann man das tortzem irgendwie machen? Ich glaube nicht... Schade.

Unter Extras - Optionen - Tastenzuordnung kann man für jeden Menübefehl eigene Tastenkürzel einfügen

Grüße
Marcus

[chlori]

Hi

ich wollte mal fragen, wie eure Meinung zum Thema "SCHÖNER QUELLCODE" ist.

Der HTML Code ist bei mir ungefähr so dargestellt (Reihenfolge zufällig!):

<body>

<ul id="menu">
    <li>Blah</li>
    <li>Blah</li>
    <li>Blah</li>
    <li>Blah</li>
  <ul>

<h1>Schönen Coden</h1>
  <h2>Kurz gezeigt</h2>
  <p>Bala bala<br />
     Hula Lala</p>

<div id="foo">
    <div>
      <img />
      <p>Bar</p>
    </div>
  </div>

</body>

Beim CSS versuche ich die gleiche Reihenfolge einzuhalten,
zB so:

body{}
ul{}
ul li{}
#menu {}
#menu a{}
etc.

Ich benutze im Stylesheet idR mehr Kommentare als im HTML,
manchmal nehme ich da alles zusammen was zB die Farben
betrifft, falls ich einey Morgens Lust habe das Farbschema
zu wechseln.

Grundsätzlich muss man selber (un evtl. die Arbeitskollegen)
mit dem Code zurecht kommen.

Auch bei Code, der zB durch PHP zusammengeworfen wird, achte
ich auf die Darstellung [1], damit bei der Fehlersuche nicht zu
unmoralisch geflucht wird....

[1] Hab mir angewöhnt immer zwei Leerschläge und Leerzeilen
zu verwenden.

Ich finde Programme, die den Code in Farben darstellen hilfreich
und sie lassen eine weniger perfektionistische Darstellung zu.

Gruss
chlori

[Tom2]

Hi Zoidberg

So sehen etwa meine HTML-Files aus:

<html>
 <head>
  <title>Code-Design</title>
  <script type="text/javascript">
   <!--
    alert("Javascript");
   //-->
  </script>
 </head>
 <body>
  <h1>Code-Design</h1>

<h2>Einrücken</h2>
  <p>Versachtelte Tags werden nach belieben, meist jedoch um ein
   Leerzeichen eingerückt.</p>

<h2>Abs&auml;tze</h2>
  <p>Bei handgeschriebenen Dokumenten achte ich darauf, es mit der
   Zeilenlänge nicht zu übertreiben. 80 bis 100 Zeichen pro Zeile,
   darauf folgt ein fester Zeilenumbruch im Quellcode und ein Leerzeichen
   mehr beim Zeilenanfang. Der Endtag ist auf der letzen Zeile.<br>
   Bei Block-Elementen mit viel Inhalt stehen der einleitende und
   der abschliessende Tag je auf einer seperaten Zeile, gleich
   weit eingerückt.</p>
  <p>Bei generiertem Inhalt, beispielsweise aus einer Datenbank,
   kann auch mal ein Absatz oder oder eine Tabellenzeile auf einer
   Codezeile stehen.</p>

<h2>Sonstiges</h2>
  <ul>
   <li>Alle Tags klein schreiben</li>
   <li>Immer End-Tags verwenden</li>
   <li>Immer " als Anführungszeichen bei Attributen</li>
   <li>Doctype, charset, valider Code halt</li>
  </ul>
 </body>
</html>

Ist das Okay so?

FG

Tom2