Webseiten

Begonnen von Klauserus, 23. Oktober 2014, 18:22:20

Vorheriges Thema - Nächstes Thema

0 Mitglieder und 1 Gast betrachten dieses Thema.

Klauserus

Servus und Hallo

es wird langsam kälter und die Tage werden kürzer. Zumindest die Tage, bei denen man viel draußen verbringt.
Deshalb habe ich etwas mehr Zeit als sonst und wollte mal wieder eine Website programmieren. Vor über 10 Jahren hatte ich mich auch mal mehr mit html auseinander gesetzt, doch
so viel weiß ich schon, dass reicht laaaange nicht mehr um einen halbwegs anständigen Webauftritt zu zaubern.

Bitte korrigiert und ergänzt mich, wenn ich falsch liege.

html als Basis, CSS zum einfachen definieren des Layouts und PHP war was dynamisches oder? ich kenne das nur von Foren. Ist eben schon lange her. Kann mir jemand sagen, wo ich anfangen soll? Fühle mich mit den zwei Neuen Sprachen und den neuen Befehlen in html etwas überfordert.
SCPH-7002
SCPH-7502
SCPH-5552
SCPH-39004 + Netzwerkadapter
SCPH-70004
SCPH-70004
..irgendwo muss noch eine FAT sein

Takeshi

Kann ich dir nachher genau erklären (hab ja die Page auch programmiert), ist nur gerade am Handy zu umfangreich.

Klauserus

Takeshi, ich warte gerne ;)
kommt erst mal Heim und machs dir gemütlich  ;D
SCPH-7002
SCPH-7502
SCPH-5552
SCPH-39004 + Netzwerkadapter
SCPH-70004
SCPH-70004
..irgendwo muss noch eine FAT sein

DoggyDog

Java und Flash gibts dann auch noch ^^
Aber im Prinzip hast du Recht. Je nach Projekt und Anspruch kannst du auch einen WYSIWYG-Editor für HTML nutzen, aber das weißt du sicherlich. Ich persönlich bin nie über HTML hinaus gekommen, alles andere war für ein Privatprojekt zu umfangreich und Zeitintensiv. Mittlerweile gibts ja WordPress & Co. damit kann man auch ohne viel Aufwand und Kenntnisse einiges machen.

Klauserus

Hey Doggy
klar Java und Flash gibt es auch noch. AUf Java möchte ich aber versuchen zu verzichten. Es soll nach etwas aussehen, aber nicht zu groß werden. Habe vor kurzem ein Artikel bei Golem über Websites aus der Zeit von ISDN gelesen. So etwa soll es aussehen. Aufgeräumt, wenig schnick schnack, auf das wesentliche eben, dem Inhalt. Aber dennoch mit Style. Auf dem Papier (echtes Papier) habe ich mir schon ein Layout gemacht. Jetzt möchte ich zum coden anfangen.

Dazu benutze ich abwechselnd Notepad++ und Microsoft Expression.
Mit Wordpress oder diversen Blog-Anbietern bin ich vertraut. Das ist mir nur zu wenig. Ich möchte sagen können, hey, dass hab ich bzw. wir gemacht. Von Vorn bis Hinten.
SCPH-7002
SCPH-7502
SCPH-5552
SCPH-39004 + Netzwerkadapter
SCPH-70004
SCPH-70004
..irgendwo muss noch eine FAT sein

Takeshi

Also:

HTML ist sozusagen eine "Formatierungssprache". Mit HTML kannst du Texte zu Einheiten gruppieren und anderen Einheiten unterordnen, und zwar mit den Elementen nach dem Prinzip <tag>...</tag>. Das fängt mit den Tags html, header und body an, geht dann weiter mit p, div, img, table, tr, td und vielen mehr. Im Prinzip sind viele Tags untereinander austauschbar. Jeder Tag hat eine vom Browser vordefinierte Formatierung, was Abstände, Schriftart, Größe und Farbe betrifft. Theoretisch kannst du zum Beispiel jedes p durch div ersetzen oder jedes b durch i, du musst nur die Formatierung der Elemente anpassen.
Anfangs geschah die Formatierung nur in HTML, wodurch so Elemente wie b, i, u oder font entstanden, die sind aber von Vorvorgestern. Wer heute "vernünftig" was in HTML schreibt, der verzichtet auf all diese Elemente und macht die Formatierung mit CSS.
XHTML ist eine aufgeräumtere Version von HTML, die ein wenin von XML inspiriert ist. XML ist eine reine Struktursprache, die nicht zweckgebunden ist (wie HTML für Webseiten) und HTML auch sehr ähnlich. Der größte Unterschied ist der, dass es keine Elemente mehr nach dem Typ <tag> gibt, also ohne abschließenden Tag. Das war vorher vorallem bei img, br und hr der Fall. Stattdessen sind die Elemente dann vom Typ <tag /> aufgebaut.

CSS dient zur Formatierung von HTML-Elementen. Die großen Vorteile sind, dass du mehr Möglichkeiten zur Formatierung hast, die Formatierung in eine extra Datei auslagern und mit einem Ausdruck die Formatierung mehrere Elemente übernehmen kannst.

JavaScript (kurz JS) ist eine Sprache, die C++ sehr ähnlich ist und dazu dient HTML-Dateien in der Laufzeit zu verändern. Auch JavaSript kannst du sowohl in die HTML-Datei schreiben, als auch in eine extra Datei. JS läuft nach dem Laden der HTML-Datei weiter, weshalb die Webseite verändert werden kann, ohne dass die Seite neu geladen werden muss. Das wird zum Beispiel zum Ein- und Ausblenden von Texten über einen Button verwendet oder hier zum Einfügen der Smileys in das Text-Formular. Mit JS kann man aber auch viel Scheiße anrichten, weshalb das gern komplett deaktiviert und nur auf ausgewählten Seiten aktiviert wird. Hab ich allerdings selbst in meinem Browser nicht gemacht.
Der Nachteil an JS ist, es läuft auf dem Rechner der Person ab, die die Seite anzeigt. Du hast keine Kontrolle darüber und weißt weder, was der Browser davon ausführt, noch ob er überhaupt etwas ausführt.
JavaScript ist nicht zu verwechseln mit Java! Ich geh zwar davon aus, dass du das weißt, aber ich erwähne es lieder trotzdem mal.

PHP ist eine Skript-Sprache (wie JS übrigens auch), die C++ sehr ähnlich ist. Skript-Sprache heißt, dass es ein richtiges Programm ist, das jedoch nicht kompeliert ist, sondern in der Laufzeit kompeliert wird. Du hast also immer den Quellcode vorliegen, während bei einem C++-Programm du am Ende einen unleserlichen Binärcode hast.
Mit PHP selbst kannst du keine Webseiten erstellen, PHP wird aber normalerweise dazu genutzt HTML-Code zu generieren. Der Browser sieht letztendlich also auch nur eine HTML-Datei.
Da es ein Programm ist, kann es abhängig von äußeren Einflüssen verschiedene Inhalte ausgeben ("dynamisch"), während eine HTML-Datei immer "statisch" ist. Ein simples Beispiel, du könntest in die URL die Information "color=foo" packen und für foo Zeichenketten wie "red", "green" oder "blue" packen, darauf dann im Programm darauf reagieren und dann einen Text in einer der Farben formatieren. Meistens wird PHP aber zusammen mit der Datenbank MySQL verwendet. In der befinden sich dann Foren-Beiträge und Benutzerdaten, die mit dem PHP-Programm aus der Datenbank ausgelesen und dann in ein immer gleiches Gerüst eingebettet werden. MySQL ist aber auch eigenständig und kann auf dem PC auch für anderen Programme als Datenbank dienen.
PHP hat den Vorteil, dass du genau weißt, was am Ende herauskommt, weil das Programm auf deinem Server abläuft und fertiger HTML-Code beim Browser ankommt. Außerdem kommt so keiner an deinen Code, denn den PHP-Code kann keiner lesen. Immer, wenn die Datei aufgerufen wird, läuft das PHP-Programm ab und der Browser empfängt nur das Ergebnis, nicht aber die Datei selbst.
Mit PHP kannst du nicht nur HTML-Daten generieren, auch CSS-Dateien, Bilder, Excel-Dateien, PDFs oder was auch immer.


So, was brauchst du jetzt wofür? Dazu geh ich vielleicht kurz auf die Entstehung dieser Seite hier ein. Das macht es denk ich ganz gut deutlich.
Am Anfang habe ich alles nur mit HTML und CSS gemacht. Das klappte am Anfang noch ganz gut, aber als ich dann ca. 100 Seiten hatte, war das nicht mehr praktikabel. Wenn ich dann zum Beispiel den Header (das Bild oben mit Haupt-Navigation) anpassen wollte, hießt das, ich musste in allen 100 Dateien den Header umändern. Deshalb bin ich irgendwann auf PHP umgestiegen. Dann generiert eine einzige PHP-Datei den Header und wirft dann den aufgeruften Inhalt aus. Das würde ich dir auf jeden Fall (!) empfehlen. Und wenn du auf MySQL verzichtest und einfach nur den HTML-Code zerpflückt stumpf in PHP-Dateien packst. Dann enthält zum Beispiel eine Datei das HTML-Gerüst und über die URL wird dann eine andere PHP-Datei mit dem richtigen Inhalt eingebunden. Das wäre aber die Variante für ganz Faule und im Grunde noch eine statische Webseite, trotz PHP, aber eben zerstückelt und damit leichter zu verändern. Besser wäre es mit einer Datenbank, in der du dann die Inhalte ablegst. Damit wird es jedoch aufwendiger und du musst dafür sorgen, dass keiner außer dir Zugriff auf die Datenbank bekommt. Entweder du trägst die Inhalte direkt in die Datenbank ein (dann kannst du dir den Zugriffs-Schutz sparen), oder du machst das (wie du es von Foren usw. kennst) über die Webseite. Dann brauchst du eine Benutzersteuerung, oder du erstellst eine extra Datei nur zum Eintragen der Inhalte, die du normalerweise vom Server löschst und nur bei Bedarf auf den Server kopierst. So kann die normalerweise keiner aufrufen. Wenn du das mit Benutzersteuerung machst, kannst du den "Account" aber auch ganz ohne MySQL in die PHP-Datei "hart" einbinden. Das ist dann wesentlich einfacher für dich, verhindert aber, dass mehrere Benutzer hinzugefügt werden können. Wenn du aber allein oder ein fester Kreis an Leuten daran was verändern, reicht das zur Not aus.

Du siehst also, du kannst selbst entscheiden, wie weit du es treibst, ein Minimum an PHP empfehle ich dir wie gesagt aber dringend. (X)HTML und CSS musst du aber so oder so beherrschen, dafür gibt es keinen Ersatz, JS, PHP und MySQL sind nur als Erweiterungen anzusehen. Du kannst also zuerst mal versuchen dich mit HTML und CSS herumzuschlagen und wenn das läuft, beginnst du mit PHP.

Für HTML und CSS kann ich dir http://de.selfhtml.org empfehlen. Mit PHP hab ich mit php-quake angefangen. Online ist jedoch eine überarbeitete Version, die alte fand ich besser, auch wenn die nicht ganz so aktuell ist. Aber hier fehlen mir mehr die Grundlagen. Die alte Version habe ich aber gesichert auf meinem Rechner ;) Wenn du mit PHP anfängst, wende dich aber noch mal an mich, dann gebe ich dir noch ein paar Tipps für den Anfang.
Zu HTML kann ich dir aber jetzt schon den Rat geben: "Programmiere" sauber! Alles schön strukturiert, immer einrücken und so. HTML ist zwar sehr fehlertolerant, das verarbeitet jeden Scheiß noch halbwegs, aber du tust dir langfristig keinen Gefallen damit.

Edit: Ach ja, ich benutze auch Notepad++, jedoch ausschließlich. Wollte mal auf Eclipse umsteigen, aber das ist mir einfach zu klobig.

DoggyDog


Takeshi

Hab dann auch gemerkt, ist gar nicht mal so wenig gewesen. Ich hätte noch mehr schreiben können, will ja aber auch niemanden überrennen ;D

Klauserus

#8
Takeshi

besten dank. Du hast dir wirklich sehr viel Mühe beim erklären gegeben und ich kann damit auch sehr viel anfangen. Habe noch eine Buchanmerkung, aber dazu morgen mehr

Update:

Nochmals vielen Dank Takeshi für die Mühe einer so ausführlichen Antwort.
Die von dir empfohlene Webseite ist super. Leider habe ich festgestellt, dass die ersten Seite des Buches "CSS - Kurz und gut" welches ich mir gekauft habe, abkopiert wurden, wie ich finde. Das Buch kann man als CSS Anfänger nur die ersten 20 Seiten gebrauchen. Also ich komme mit dem Buch leider nicht mehr weiter. Im Gegensatz zur self.org Website.

Bei der weiteren Planung ist mir auch aufgefallen, dass ich ohne PHP nicht weit komme. Wenn ich mir vorstelle etwas aktualieren zu wollen und dies dann auf dutzenden Seiten.... oh Kraus.

Zu deinem Header ist mir eingefallen, warum hast du nicht einen Frame erstellt? Das hätte doch den gleichen Effekt gehabt. Der Obere Frame bleibt immer gleich, nur der Untere ändert sich bei einer Navigation.
SCPH-7002
SCPH-7502
SCPH-5552
SCPH-39004 + Netzwerkadapter
SCPH-70004
SCPH-70004
..irgendwo muss noch eine FAT sein

Takeshi

#9
Bin gestern auf diese Seite hier gestoßen: peterkropff.de

Ich glaube, die ist recht gut, um da reinzukommen, auch wenn mir der "Sprachstil" nicht immer ganz gefällt (etwas aggressiv manchmal). Aber der scheint sich echt auszukennen und da findest du aus einer Hand was zu HTML, CSS, PHP und MySQL.

Edit: Hab da jetzt ein wenig gelesen und muss sagen, das ist echt gut gemacht. Sehr klar strukturiert, gut erklärt, nicht unnötig aufgeblasen (manche Anleitungen sind zu lang für den Inhalt, den sie einem übermitteln). Ich hab auch immer wieder mal kurz mit dem Gedanken gespielt selbst was zu schreiben, da ich keine wirklich guten, umfangreichen und trotzdem bei Null beginnenden Anleitungen gefunden habe. Das hab ich jetzt aber verworfen, da unnötig.

NonKon

Hallo,
ich arbeite schon lange in dem Bereich und muss sagen das ich seit Jahren keine Seiten mehr ohne CMS erstelle.

Warum CMS?
So kann man das Layout der kompletten Seite an nur einer Stelle verändern weil CMSe mit Gestaltungsvorlagen, so genannten Templates, arbeiten. Und man kann verschiedene Layouts für die komplette Site oder auch nur für einzelne oder ganz bestimmte Seiten anlegen, das macht vor allem dann Sinn wenn man die Site z.B. auch in Mobilen Geräten gut darstellen will. Man kann auch Medien, einmal eingepflegt, mehrfach benutzen. Weiterhin ist ein bearbeiten der Seiten auch durch Laien ohne jegliche Programmierkenntnisse leicht möglich weil das Backend den Text und andere Inhalte (Bilder, Videos, Dokumente) übersichtlich strukturiert darstellt, teils wie man es von den Eingabefenstern von Dokumentenverwaltungen und Datenbanken kennt.

Ein Zerstören der Site ist i.d.R. durch eine Benutzerverwaltung ausgeschlossen. So gibt es beispielsweise folgende Rollen: Admin (darf alles) Redakteur (kann Seiten anlegen, bearbeiten und löschen) und Autoren (kann nur durch Admin oder Redakteur frei gegebene Seiten bearbeiten), da kann also nichts schief gehen. Einzig die Installation verschiedener CMSe kann etwas aufwändig sein und setzt meist Grundkenntnisse in PHP, MySQL, HTML und CSS voraus. Und der Server muss auch PHP und Datenbanken "können", eine "Web-Visitenklarte" für ein Euro kann das in der Regel nicht.

Blog, soziales Netzwerk oder CMS?
Es besteht ein großer Unterschied zwischen CMS und Blogsystemen wie z.B. Wordpress. CMS haben in der Regel einen größeren Funktionsumfang. Wordpress als CMS zu benutzen ist ein gern gemachter Fehler, das wird einem schnell klar wenn man es dennoch versucht. Der Aufbau einer sinnvollen Struktur ist nur eingeschränkt möglich, das Template für Wordpress zu erstellen kickt auch ganz nett, ist also für Anfänger gar nichts. Ich empfehle i.d.R. phpwcms für kleine bis mittlere Seiten, Drupal für mittlere bis größere Projekte, Joomla aufgrund der zahlreichen Zusatzfunktionen für Portale und Elgg für soziale Netzwerke. Schön sind auch Gallery oder Koken für bildlastige Webseiten., wobei das Gallery Projekt leider nicht mehr weiter gepflegt wird.

Provider
Ein sehr guter Provider für solche Sachen ist Uberspace, die reinste Freude für jeden Linuxer, Emails erledigt man entweder auch dort, ansonsten ist posteo.de zur Zeit der wohl beste EMail Provider in De. Also vergesst diese schwachsinnigen "Email made in Germany" Provider, das ist lediglich Marketingsprech für leichtgläubige Vollhonks die ihre Daten freiwillig an BND und NSA weiterleiten wollen.

Software
Zum Erstellen und Bearbeiten von Websites benutze ich als Editor Bluefish, für CSS CSSED, als grafischen FTP Client Filezilla, zur Bildbearbeitung und Optimierung von Bildern Gimp und Darktable. Und das alles kostet nichts und läuft ganz prima unter Debian;)

Takeshi

Das war ja auch das, worauf ich hinaus wollte: CMS verwenden. Allerdings ging es dann darum, ob man das CMS selbst schreibt, so wie ich es hier gemacht habe.

Du benutzt FileZilla? Sehr gut. Ich find das Ding nämlich total mistig, der ist bei mir nur ne Notlösung. Und das liegt einerseits an der optischen Struktur, andererseits aber an einer in meinen Augen elementaren Funktion, die kein verschissenes FTP-Programm der Welt kann (ich habe zumindest unzählige durchprobiert), außer SmartFTP. Und ich kann mir einfach nicht vorstellen, dass FileZilla das nicht kann, ich übersehe das wahrscheinlich nur. Aber vielleicht kannst du mir ja sagen, wo ich das finde. Und zwar möchte ich mir den Link zu einer Datei auf dem Server generieren lassen. Ich habe also einen Server, in dessen root-Verzeichnis sich der Ordner "www" befindet und die Domain www.meineseite.de auf diesem Ordner liegt. Jetzt will ich mir die URL zu der Datei /www/bild.png generieren lassen. Bei SmartFTP gebe ich an, dass die URL http://www.meineseite.de/ auf den Ordner /www/ zeigt. Klicke ich auf die Datei und sage "URL in Zwischenablage speichern", hab ich "http://www.meineseite.de/bild.png" in der Zwischenablage. FileZilla macht mir da stumpf "ftp://benutzername@serverurl/www/bild.png" draus. Und damit kann ja nun wirklich kein Mensch irgendwas anfangen.

NonKon

Naja, das ein Linux FTP Client einen Link in der Syntax des unix ftp commands erzeugt finde ich jetzt nicht so erstaunlich. SFTP ist jedoch wie Du sagst in der Lage Symlinks zu erzeugen, hier habe ich auf die schnelle was dazu gefunden: http://stackoverflow.com/questions/5589489/create-symbolic-links-on-server-without-ssh-available
Hast Du einen Shell Zugriff auf den Server?

Takeshi

Technisch gesehen vielleicht nicht erstaunlich, aber das zeigt mal wieder, wie Entwickler an den Anwendern vorbeiprogrammieren. Den einfachen Anwender interessiert der Link einen Scheiß, der kann damit nichts anfangen. Den symbolischen Link, den er brauchen könnte und der echt einfach zu generieren ist (sicher keine 100 Zeilen Code), bietet nur ein einziges kostenpflichtiges Programm. Das ist schon traurig irgendwie.

Ich denke mal mit SFTP meinst du SSH FTP und nicht SmartFTP, oder? Mit einem Protokoll hat das ja rein gar nichts zu tun, das ist simples Ersetzen von Strings anhand ein paar Einstellungen im Programm. Der Server selbst hat damit nichts an der Mütze.

Shell-Zugriff hab ich nicht, bekommt man ja auch nicht zu jedem Server. Das soll ja mit einem beliebigen FTP-Zugang funktionieren.

Werde ich wohl echt nicht drumherumkommen mal die Entwickler von FileZilla über das Forum anzuschreiben.

Klauserus


Refresh :D

Bin mit der ganzen Materie nun etwas fortgeschritten. Nach Jahren :D - nun suche ich jemand der mir in CSS ein paar Tipps und Kniffe beibringen kann. Gerne PN
SCPH-7002
SCPH-7502
SCPH-5552
SCPH-39004 + Netzwerkadapter
SCPH-70004
SCPH-70004
..irgendwo muss noch eine FAT sein