✔ Quellcodeoptimierung

  • Themenstarter Themenstarter di-five
  • Beginndatum Beginndatum
D

di-five

Hallo,

ich bastel zwischendurch gerne mal Internetseiten. Jedes mal zerbreche ich mir den Kopf darüber, wie ich nun mit der Quellcodeformatierung verfahre. Wenn ich ein PHP-Dokument mit HTML schreibe, sieht das in der Quellcodeanzeige des Browser immer anders aus, als im Editor.

Jetzt wollte ich mal wissen, ob ihr euch um das Aussehen des Quellcodes Gedanken macht, oder ob euch das egal ist, wie er aussieht.

Optimiert ihr den Quellcode so, dass er im Editor vernünftig aussieht oder so, dass er hinterher in der Quellcodeanzeige des Browsers vernünftig aussieht?

Beim Einrücken der ganzen Tags benutze ich schon immer nur Leerzeichen, kennt jemand einen Editor der wenn er automatisch einrückt nur mit Leerzeichen einrückt, oder irgendeine Option in irgendeinem Programm, wo man einstellen kann, dass mit Leerzeichen eingerückt werden soll?

Freue mich auf eine Antwort.

Gruß di-five
 
di-five hat gesagt.:
ich bastel zwischendurch gerne mal Internetseiten. Jedes mal zerbreche ich mir den Kopf darüber, wie ich nun mit der Quellcodeformatierung verfahre. Wenn ich ein PHP-Dokument mit HTML schreibe, sieht das in der Quellcodeanzeige des Browser immer anders aus, als im Editor.
Zum Vergrößern anklicken....
Vermutlich, weil Du den Quellcode mit [phpf]echo[/phpf] ausgibst.

di-five hat gesagt.:
Jetzt wollte ich mal wissen, ob ihr euch um das Aussehen des Quellcodes Gedanken macht, oder ob euch das egal ist, wie er aussieht.

Optimiert ihr den Quellcode so, dass er im Editor vernünftig aussieht oder so, dass er hinterher in der Quellcodeanzeige des Browsers vernünftig aussieht?
Zum Vergrößern anklicken....
Quellcode sollte in erster Linie an der Stelle ordentlich aussehen, wo er bearbeitet wird. D.h. bei einer PHP-Datei sollte mehr Wert auf ordentliche Einrückungen des PHP-Codes Wert gelegt werden als auf die Ausgabe, die der Browser zu sehen bekommt. Nicht desto Trotz ist es sinnvoll, gelegentlich Zeilenumbrüche und vielleicht auch die ein oder andere Einrückung mit auszugeben, da dies die Fehlersuche im Skript erleichtern kann, da man schneller Rückschlüsse auf den betroffenen PHP-Teil entdeckt. Bei reinen HTML-Seiten ist das Codeformatting Zwecks Wartung der Seite auch nicht verkehrt.

di-five hat gesagt.:
Beim Einrücken der ganzen Tags benutze ich schon immer nur Leerzeichen, kennt jemand einen Editor der wenn er automatisch einrückt nur mit Leerzeichen einrückt, oder irgendeine Option in irgendeinem Programm, wo man einstellen kann, dass mit Leerzeichen eingerückt werden soll?
Zum Vergrößern anklicken....
Nahezu jeder halbwegs gute Editor lässt sich diesbezüglich einstellen, einige, z.B. jEdit, ermöglichen auch die nachträgliche Umwandlung von Leerzeichen zu Tabs und umgekehrt.

Bitte starte jetzt aber keinen Was-Ist-Der-Beste-Editor-Thread, davon hatten wir schon genug, die sich über die Suchfunktion finden lassen.

Gruß hpvw
 
D.h. bei einer PHP-Datei sollte mehr Wert auf ordentliche Einrückungen des PHP-Codes Wert gelegt werden als auf die Ausgabe, die der Browser zu sehen bekommt. Nicht desto Trotz ist es sinnvoll, gelegentlich Zeilenumbrüche und vielleicht auch die ein oder andere Einrückung mit auszugeben, da dies die Fehlersuche im Skript erleichtern kann, da man schneller Rückschlüsse auf den betroffenen PHP-Teil entdeckt]
Zum Vergrößern anklicken....

Das sehe ich noch ein bisschen schärfer. In der PHP Datei führt kein Weg vorbei
diese ordentlich formatiert zu gestalten. Und genau das gleiche gilt bei der Ausgabe an
den Browser.
Wenn man die Seite z.B. validieren möchte und der gesamte Content steht in der
Quellcodeansicht des Firefox in einer Zeile, und der validtor findet Fehler,
dann mal viel Spass beim Fehlersuchen...


Gruß

RedWing
 
Man kann doch auch einfach ein '\n' ausgeben. Das hat bei mir bisher immer einen Zeilenumbruch im HTML-Quelltext verursacht!
MfG
TwoFaze
 
Ich hab mir vorhin genau zu diesem Thema ein paar Gedanken gemacht und diese in einer Funktion verewigt.
Da meine Seite erstmal den ganzen Output in einen String schreibt und dann gegebenenfalls am Ende ausgibt jage ich diesen String durch meine Funktion formathtml(). Diese fuegt mir Zeilenumbrueche ein und rueckt auch den Quelltext ein.
Somit brauch ich mir beim Programmieren mit PHP keine Gedanken mehr ueber das Layout der HTML-Ausgaben machen.

Hier mal die Funktion, inklusive einem kleinen Beispiel:
PHP: 
<?php
function formathtml($html)
{
	$tabs=0;
	$html_array=preg_split('/(<(?:[^<>]+(?:"[^"]*"|\'[^\']*\')?)+>)/',$html,-1,PREG_SPLIT_DELIM_CAPTURE | PREG_SPLIT_NO_EMPTY);
	$html='';
	for ($x=0;$x<count($html_array);$x++)
		{
			if (substr($html_array[$x],0,2)=='</')
				{
					$tabs--;
				}
			for ($y=0;$y<$tabs;$y++)
				{
					$html.="    ";
				}
			$html.=$html_array[$x]."\r\n";
			if ((substr($html_array[$x],0,1)=='<') && (substr($html_array[$x],1,1)!='/'))
				{
					if ((substr($html_array[$x],1,1)!=' ') && (substr($html_array[$x],1,3)!='img') && (substr($html_array[$x],1,2)!='br') && (substr($html_array[$x],1,2)!='hr') && (substr($html_array[$x],1,5)!='input') && (substr($html_array[$x],1,4)!='link') && (substr($html_array[$x],1,4)!='meta') && (substr($html_array[$x],1,3)!='col') && (substr($html_array[$x],1,5)!='frame') && (substr($html_array[$x],1,7)!='isindex') && (substr($html_array[$x],1,5)!='param') && (substr($html_array[$x],1,4)!='area') && (substr($html_array[$x],1,4)!='base'))
						{
							$tabs++;
						}
				}
		}
	if ($tabs!=0)
		{
			$html.='<!--'.$tabs." open elements found-->\r\n";
		}
	return $html;
}

$output='<html>';
$output.='<head>';
$output.='<title>Test</title>';
$output.='</head>';
$output.='<body>';
$output.='bla<br>';
$output.='<img src="delete.jpg">';
$output.='<p>bla</p>';
$output.='</body>';
$output.='</html>';
echo formathtml($output);
?>
Ich weiss nicht ob ich alle offenen Tags drin hab, konnte bisher aber kein Problem feststellen. Falls ich eines uebersehen habe bitte ich um einen Hinweis/Wink mit dem Brueckenpfeiler.

Vor der Formatierung:
HTML: 
<html><head><title>Test</title></head><body>bla<br><img src="delete.jpg"><p>bla</p></body></html>
Und nach der Formatierung sieht der HTML-Quelltext dann so aus:
HTML: 
<html>
    <head>
        <title>
            Test
        </title>
    </head>
    <body>
        bla
        <br>
        <img src="delete.jpg">
        <p>
            bla
        </p>
    </body>
</html>

Nachtrag: Ich hab die Liste der leeren Tags erweitert. Es sollten jetzt alle laut SelfHTML vorhandenen Leer-Tags in der Liste sein. Basefont wird von Base mit abgedeckt.
 
Ob du Blöcke des Quellcodes einrückst solltest, hängt davon ab, ob es dir einen Vorteil verschafft. Denn Whitespace-Zeichen werden bei PHP und HTML (eigentlich) nicht beachtet.
So wäre es beispielsweise auch möglich, ein gesamtes Skript in einer Zeile zu schreiben – was aus meiner Sicht allerdings keinerlei Vorteile hat, da man je nach Komplexität bereits nach fünfzig oder hundert Zeichen Quellcode die Übersicht verlieren kann.
Bei HTML verhält es sich ähnlich: Falls du zur Fehleranalyse beispielsweise einen Browser benutzt, der den Quellcode nachträglich formatiert anzeigen kann, ist das Einrücken auch hier nicht notwendig. Wie gesagt, es hängt ganz davon ab, ob es für dich einen Vorteil hat.

Nachtrag: Ich hab die Liste der leeren Tags erweitert.
Zum Vergrößern anklicken....
Es gibt auch Elemente, bei denen die End-Tags nicht notiert werden müssen.
 
Gumbo hat gesagt.:
Es gibt auch Elemente, bei denen die End-Tags nicht notiert werden müssen.
Zum Vergrößern anklicken....
Dies ist aber nicht standardkonform, oder?

Bei der Funktion wird es auf jeden Fall dazu fuehren, dass nach dem HTML-Teil noch ein Kommentar ausgegeben wird mit der Anzahl der nicht geschlossenen Tags.
 
Dies ist aber nicht standardkonform, oder?
Zum Vergrößern anklicken....
Ich hätte dazuschreiben sollen, dass nur die HTML-Syntax soetwas zulässt. So deklariert <p>foo<p>bar beispielsweise zwei p-Elemente auf derselben Ebene und nicht etwa das letzte p-Element als Kindelement des ersten. Welche Elemente diese Regel betrifft, ist in den Dokumentyp-Definitionen notiert.
 
Hallo,

ich bedanke mich für eure Antworten!

Ich benutze HTML als Standardsprache, und rücke die includierten Dateien einfach ein. Mit PHP fange ich dann ganz am linken Rand im HTML-Quellcode an. HTML rücke ich jeweils mit 2 Leerzeichen (Leerstellen? *gg*) ein. Im PHP-Code benutze ich dann "\n" hehe : ).

Ich glaube so habe ich eine halbwegs vernünftige Variante gefunden, auf jeden Fall eine lustige Sache!

Der HTML-Quellcode, den ich via echo / printf (habe keinen Unterschied bei der Ausgabe festgestellt) in dem PHP-Container ausgebe sieht immer e aus, wenn er hinterher im Browser richtig dargestellt werden soll.

Hmm muss ich nochmal gucken wie ich das mache, ich bedanke mich auf jeden Fall für die Antworten, werde mir jEdit auf jeden Fall mal angucken, "\n" kannte ich schon, war mir aber in dem Moment nicht eingefallen.

Also so sieht das jetzt aus:

index.php
Code: 
...
      <div id="seite">
<?php include($seite); echo "\n"; ?>
      </div>
...

seite.php
PHP: 
<?php
    while($teile = mysql_fetch_row($ergebnis_teile))
        {
            echo
                '            <tr>
              <td align="left">
                ' . $teile[1] . '
              </td>
              <td align="center">
                <img src="../images/bearbeiten.png" title="' . $teile[1] . '" />
              </td>
              <td align="center">
                <img src="../images/loeschen.png" title="' . $teile[1] . '" />
              </td>
            </tr>' . "\n";
      }
?>

Wenn ich das Hochkomma ohne <tr> direkt hinter echo setze habe ich einen Umbruch im Code, und ansonsten steht das <tr> noch weiter rechts, also sehe ich das richtig, wenn es da keine andere Möglichkeit gibt?!

So wird das in der Quellcodeanzeige vom Firefox Version 1.5 vernünftig ausgegeben, warum sieht der Quellcode wenn ich ihn von der Quellcodeanzeige des Browsers in einen Texteditor kopiere wieder anders aus (alles Leerzeichen)?

Gruß di-five
 
@Dennis: Deine Formatierung könnte mit Hinweisen des w3c kollidieren:
http://www.w3.org/TR/html4/struct/text.html#h-9.1 hat gesagt.:
...

The PRE element is used for preformatted text, where white space is significant.

In order to avoid problems with SGML line break rules and inconsistencies among extant implementations, authors should not rely on user agents to render white space immediately after a start tag or immediately before an end tag. Thus, authors, and in particular authoring tools, should write: ...
Zum Vergrößern anklicken....
Gruß hpvw
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück