Linkliste zur Webseiten-Entwicklung - Archiv

1. Html-Editoren für Windows und Linux
2. Dokumentationen, Kurse, Anleitungen und Handbücher
3. Farbgestaltung und Webseiten-Navigation
4. Meta-Angaben
5. Browserdarstellung und Responsive Webdesign
6. CSS und HTML auf Fehler prüfen
7. Suchmaschinenoptimierung
8. CSS - Cascading Style Sheets
9. Javascript und PHP
10. Wetter auf der eigenen Homepage
11. Nützliche Sachen rund um die Homepage

KompoZer ist der Nachfolger des NVU und wie dieses ein WYSISYG Editor, also ein Programm, mit welchem sie bereits während der Seitenerstellung sehen können, wie die neue Seite aussehen wird (What You See Is What You Get). Kompozer hat einige Schwachstellen, welche man erst nach dem Speichern der Datei bemerkt. So kommt er bei manchen Arten von Ankern zum Teil völlig durcheinander und setzt Anker frei Schnauze an x-beliebige Stellen. Fängt man aber an, HTML zu erlernen, ist KompoZer erste Wahl. Zur Rechtschreibprüfung ist es auch gut geeignet und ein brauchbarer CSS-Editor ist integriert. Hat man genügend über HTML gelernt, sollte man ab einen bestimmten Zeitpunkt allerdings mit einem reinen HTML-Editor weiterarbeiten.
Ich selbst setze das Programm eigentlich nicht mehr ein. KompoZer gibt es für Linux und für Windows..
Von Charles Cooke gibt es eine Anleitung bzw. ein Handbuch zu NVU in deutscher Übersetzung von Jürgen Klose (PDF 3MB), NVU ist zur Zeit mit Kompozer noch immer fast identisch, weshalb dieses Handbuch gute Dienste leistet. Einen Einführungskurs über Kompozer findet sich auf www.elew.de, also der gleichen Domain. "Ein Land eine Welt" - ein Abstecher dorthin lohnt nicht nur wg. dem Kurs.

Texteditoren
Weder unter Windows noch unter Linux herrscht an guten Editoren Mangel. Voraussetzung für die Arbeit mit Webseiten ist, dass der Editor HTML und PHP Syntax-Highlighting beherrscht. Meine Wahl unter Linux fiel auf Geany, ein erstklassiger Editor mit vielen Plugins und Projektverwaltung. Das Programm ist auch in einer Windows-Version verfügbar: Geany für Windows Downloadseite (GTK)
Plugins Geany: Geany Plugins
Unter Windows ist auch Notepad++ ein gleichwertig guter Editor (Freeware -GPL). Ebenfalls mit jeder Menge Plugins.

Aptana Studio
Ein recht guter Editor mit Projektverwaltung und vielen Funktionen. Plattformübergreifend, da ein Javaprogramm, daher aber auch etwas träge. Unter GPLizenz.

de.Selfhtml.org
Eine ausführliche Dokumentation und Anleitung mit vielen nützlichen Beispielen zur HTML-Erstellung gibt es bei dem berühmten SELFHTML. DAS Nachschlagewerk zu HTML schlechthin! Auch zum Download...

SELFPHP
Was der obige Link für HTML ist, ist SELFPHP für PHP. Im Internet gefundene Scrite müssen in der Regel angepasst werden, selbst wenn man nicht wirklich PHP kann. Hier kann man die Befehle nachschauen und somit nachvollziehen, was denn eigentlich dieses Script macht, um durch die Versuch und Irtum Methode dieses anzupassen. Eine andere Möglichkeit wäre ja, mit selfphp PHP zu lernen...

PHP: Hypertext Preprocessor
Alles über PHP, Handbuch in deutsch, Downloads...

Kurzzusammenfassung der wichtigsten HTML-Tags
Wenn man kurz mal was nachschlagen will und keine Lust hat, sich durch das riesige SelfHTML zu arbeiten...

CSS 4 you
"Die deutsche Seite für Cascading Stylesheets (CSS). Dies ist eine nahezu komplette CSS-Referenz auf deutsch - ergänzt durch etliche Tipps, Tricks und andere Referenzen." (Zitat der Webseite)

Mit der Datei robots.txt Seiten vor Robots schützen
"Schöne und übersichtliche Seite zum Thema robots.txt, mit anschaulichen Beispielen."

Hilfe zu XHTML, SVG, CSS, PHP
"Dr. O. Hoffmann: Hilfeseite zu css, xhtml, svg, php"

Ein horizontales Dropdown-Menü erstellen
"Wenn ihr etwas Zeit und Lust mitbringt, zeige ich in diesem Tutorial, wie ihr ein schickes horizontales Dropdown-Menü erstellt. Das Menü wird, mit Ausnahme der Hauptmenü-Icons, CSS-only, wir verwenden also keine Bilddateien" Klasse Beispiel mit komplettem Download!

CSS-basierte Navigationsleisten
SELFHTML Abschnitt: Stylesheets / CSS-basierte Layouts / Navigationsleisten

Dynamisches Menü in PHP
"Heute erkläre ich wie man ein Menüscript in PHP schreibt welches nicht auf die Seite selbst verweist auf der sich der Besucher befindet." Empfehlenswertes Beispiel!

Navigation mit PHP
"Grundprinzip ist, die Seiten in einzelne Bereiche aufzuteilen, immer wiederkehrende Bereiche in extra Dateien auszulagern und diese an entsprechender Stelle einzubinden." Ein weiteres PHP-Beispiel

Horizontales Drop-Down-Menü, Klapp-Navigation
"Im Laufe der Zeit nimmt der Umfang einer Website immer mehr zu, Inhalte und Themen werden erweitert und irgendwann gibt es Platzprobleme bei der Navigation. Oder man hat von vornherein einen umfangreichen Inhalt, erstellt z.B. eine Vereins-Website mit vielen Sparten und Abteilungen. Wie soll man da noch übersichtlich navigieren?" Klasse Seite zum Thema, prima erklärt. Siehe aber auch unten unter CSS, dort: CSSplay

ColorHexa.com
ColorHexa.com is a free color tool providing information about any color.
- Empfehlung zur Farbgestaltung -

ColorSchemeDesigner
A designer tool for creating color combinations that work together well.

Ultimate CSS Gradient Generator
"A powerful Photoshop-like CSS gradient editor from ColorZilla." Erstellt auf einfachste Weise Code mit Farbverläufen für verschiedene Browser.

Favinator
Favinator erstellt aus einer beliebigen Bildvorlage ein Favicon für Ihre Webseite.

SELFHTML: HTML/XHTML / HTML-Kopfdaten / Meta-Angaben zum Inhalt
"Wie Sie Angaben zu einer HTML-Datei notieren können, die für Suchmaschinen gedacht sind oder den Web-Brwoser zu bestimmten Aktionen oder Interpretationen der HTML-Datei veranlassen."

The Open Graph protocol
Facebook bevorzugt proprietäre Attribute des OG, kann jedoch auch 'normale' Tags auslesen. Beispiel:
<link rel="image_src" href="http://peter-engelhardtnet.eu/deco/logo.jpg" /> XHTML-Meta Tag zur Angabe eines Logos oder Thumbnails, welches zum Beispiel bei Facebook o. ä. angezeigt werden soll, entspricht OG Meta-Tag: <meta property="og:image" content= "http://peter-engelhardtnet.eu/deco/logo.jpg" />
Im Facebook Debugger können sie ihre Metatags kontrollieren, ob Facebook alle Tags richtig einliest.

Logische Beziehungen
"Wie Sie Angaben zu einer HTML-Datei notieren können, die Beziehungen zu anderen Dateien herstellen, etwa, um eine logische Reihenfolge von Dateien zu realisieren oder um ein externes Stylesheet einzubinden." Unterseite von SelfHTML.

Browsershots
Testet das Aussehen einer Webseite in so gut wie allen wichtigen Browsern. Die gewünschten Browser können durch Markieren einzeln ausgewählt werden. Auch die Seitensprache kann gewählt werden. Eine erstklassige Webseite! Die Überprüfung dauert allerdings ziemlich lange.

W3C Linkchecker
Bei der Überprüfung von Links auf einer Webseite, steht diese Webseite, wie alle Tools des W3C, mit ganz oben in der Brauchbarkeit.

linklint
Ein Linux/Windows Kommandozeilenprogramm in Perl, untersucht, je nach mitgegebenen Parametern, eine Webseite oder eine lokale HTML-Seite auf tote Links. Gehört auf jeden Webentwickler-PC! Nach der Prüfung wird eine HTML-Seite mit den Meldungen erstellt. TOP!
Beispiel eines Online-Checks aller Seiten einer Domain und anschließendes Anzeigen der Fehlermeldungen im Firefox-Browser unter Linux:
 bash-3.2$ linklint -error -http -host www.beispiel.de /@ -doc /Verzeichnis/; firefox /Verzeichnis/index.html 
Unter der Windows-Eingabeaufforderung funktioniert's natürlich mit Backslash.

CSS formatter v1.925
Online CSS komprimieren. - Erste Sahne! Spart 'ne Menge Handarbeit.-

CleanCSS - CSS Formatierer und Optimierer
CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.

CSS-Lint
Online kann man Stylesheetdateien auch mit CSS-Lint überprüfen, für Linux gibt es das Programm als Kommandozeilentool.

W3C-Validator
"Fertige" Webseiten sollten online, per Upload oder durch direkte Eingabe beim W3C-Validator auf Fehler überprüft werden. Leider unterlassen das viele Webmaster.

tidy
Das Kommandozeilen-Programm "Tidy" mit seinen Parametern ist ja bekanntlich zur Webseitenerstellung und Säuberung von Web-Seiten unerlässlich (Div. Betriebssysteme).
Eine weitere gute Online-Validierungs-Seite: html tidy online.

Total-Validator
Ein weiterer Validator ist der Total-Validator. Leider hat die Firma die Online-Überprüfung eingestellt, bietet aber für verschiedene Betriebssysteme (Linux, Windows, OS X) einen kostenlosen und recht brauchbaren Validator zum Download an.

Html Validator for Firefox and Mozilla
Firefoxerweiterung, kann HTML-Seiten offline überprüfen. (Z.B. Seiten die erst mit 'include' und PHP zusammengesetzt werden -Apache)

PageSpeed Insights
"PageSpeed Insights analysiert den Inhalt einer Webseite und erstellt dann Vorschläge zur Verbesserung der Geschwindigkeit dieser Seite". Von Google.

gtmetrix.com/
"GTmetrix can help you develop a faster, more efficient, and all-around improved website experience for your users." Die Megaseite zur Ladeoptimierung!

WebAIM (Web Accessibility In Mind)
WAVE Web Accessibility Tool.

WDG HTML Validator
"The WDG HTML Validator is similar in many ways to the W3C HTML Validation Service. Most of the previous differences between the two validators have disappeared with recent development of the W3C validator. The errors reported are the same in virtually all cases. However, some minor differences may arise..."

XML Validator
"Well Formed XML Documents von www.w3schools.com. Zur Überprüfung von xml-Dateien."

Test-Tool für strukturierte Daten
"Von Google, testet die Microdaten einer Seite auf Fehler."

Google-Tools
Ganz wichtig ist die Anmeldung bei den Google-Tools, denn ohne gute Auflistung bei Google kann heutzutage der Webmaster den Laden dicht machen.

XML Sitemap Generator - Erstellung von Sitemaps
Ratsam ist, eine Sitemap einzureichen, ein sehr gutes python-Script zur Sitemap-Erstellung gibt es hier bei sourceforge.net.

www.xml-sitemaps.com
Auch online lassen sich bei mehreren Anbietern Sitemaps erzeugen. Dies ist einer der Anbieter, erstellt in der kostenlosen Version für bis zu 500 Seiten Sitemaps in verschiedenen Formaten.

Bing Webmastertools
Bing hat sich nach Google, in respektvollem Abstand, in Deutschland zur zweitgrößten Suchmaschine gemausert. Weltweit soll sie sogar mittlerweile laut einer Meldung der PC-Welt auf Platz 1 liegen. Wie dem auch sei, auch dort kann man sich anmelden, eine Sitemap einreichen und einige Webmastertools nutzen. Akzeptiert werden auch User, welche im Browser ihre Linux-Kennung mitsenden ;-).

GTmetrix | Website Speed and Performance Optimization
Tmetrix is a free tool that analyzes your page's speed performance. Using Page Speed and YSlow, GTmetrix generates scores for your pages and offers actionable recommendations on how to fix them. - Empfehlung! -

Keyword-Tool
Hilfen zur Keyword-Recherche von Google AdWords.

database-search.com
"Dieses Programm stellt automatisch wichtige Links und Abfragen zur Verfügung." (Zitat der Webseite)

webmasterpro.de
Beschäftigt sich mit Design, Entwicklung, Management und Server.

AnyBrowser.com
Bietet verschiedene Hilfsmittel zur Erstellung und Überprüfung von Webseiten an.

OesterBlog
Riesige Linksammlung zu Thema XHTML, CSS, WAI, .htaccess uvm.

View HTTP Request and Response Header
Features:
list of user agents
switch between HTTP/1.1 and HTTP/1.0
test If-Modified-Since and If-Match headers
support WWW-Authenticate
search engine redirect added – all bots will be moved permanently to frontpage
the URL may also be an Internationalized Domain Names (IDN)
secure connections (HTTPS) allowed

REDbot
RED is a robot that checks HTTP resources to see how they'll behave, pointing out common problems and suggesting improvements. Although it is not a HTTP conformance tester, it can find a number of HTTP-related issues

CSSplay
CSSplay ist eine Klasse Seite mit vielen Beispielen zur Seitengestaltung per Stylesheets. Um nicht jede Seite ändern zu müssen, wenn eine neue Seite hinzukommt, kann man eine Extra-Seite mit den Menüeinträgen erstellen und diese per php-include in alle Seiten einbinden. Stu Nicholls, der Autor, beansprucht ein Copyright - für privaten Gebrauch kostenlos.

CSS3 Text Shadow Generator
Lange Probierereien mit dem Textschatten kann man sich ersparen, wenn man einen Text-Shadow Generator benutzt. Dieser hier war der Erste, den Duckduckgo mir angezeigt hat, und der war gleich brauchbar. Man kann auch Schatten in verschiedene Richtungen setzen, wenn man die Ergebnisse, durch ein Komma separiert, kombiniert. Das ist z. B. bei Text in Bildern nützlich, wenn man nicht weiß, vor welcher Hintergrundfarbe der Text dann erscheint.

CSS Sprites Generator
Dieser Webdienst fügt Bilder zu Sprites zusammen, um die Ladezeit durch weniger Anfragen zu verkürzen.

CSS Template Generator
Mit dem CSS Template Generator läßt sich auf einfache Weise ein dreispaltiges Seiten-Layout generieren. Wer es einfach liebt, dem liefert die Seite ein Grundgerüst und der Code muß ja sowieso verändert werden.

/* Position Is Everything */
Fehler in modernen Browsern werden hier anhand von Beispielen detailiert erklärt.

CSS asynchron laden
Ein kleines Javascript hilft, um eine externe CSS-Datei asynchron zur eigentlichen HTML-Seite zu laden und damit das Rendering zu verbessern.

Menüs und Sitemaps mit CSS
"Hier sind ein paar Formatierungsvorschläge für Links, Buttons und Menüs. Nur so als Anregung für Eure eigenen Entwicklungen..." (Zitat der Webseite)

Drei Wege, um mit SimpleXML Attribute auszulesen
Das Auslesen von Attributen bzw. deren Namen und Werte aus einem XML-Dokument mit Hilfe von PHP und SimpleXML bereitet Einsteigern zuweilen leichte Probleme, ist jedoch mit etwas Übung nicht schwerer als die Verarbeitung des restlichen Inhaltes einer XML-Datei..." (Zitat der Webseite)

www.walterzorn.de
Einige erstklassige Scripte. Zum Beispiel ein: "Leicht verständliche, einfach benutzbare DHTML -Bibliothek, die darüber hinaus Layern und Bildern Drag&Drop -Fähigkeit verleiht. Cross-browser-tauglich." (Zitat der Webseite) Empfehlenswert!

MagpieRSS
MagpieRSS ein simpler RSS Parser in PHP. Einfach zu konfigurieren, keine Probleme mit verschiedenen Kodierungen, lediglich auf den grafischen Schnickschnack muß verzichtet werden.

JSCompress.com
"Online Javascript Compression Tool. JSCompress.com is an online javascript compressor that allows you to compress and minify your javascript files. Compressed javascript files are ideal for production environments since they typically reduce the size of the file by 30-90%. Most of the filesize reduction is achieved by removing comments and extra whitespace characters that are not needed by web browsers or visitors."

jsfiddle.net
mootools shell, easy test you snippets before implementing

Closure Compiler Service
JavaScript verkleinern, verschmelzen u.s.w.

jswelt.de
"Sie finden hier das vermutlich grösste, deutschsprachige JavaScript-Archiv, samt diversen Webmaster-Foren." (Zitat der Webseite)

Michael Mailer's JavaScripts
Der Name beschreibt den Inhalt.

wxget
Einfacher aber guter script um aktuelle Wetterdaten von METAR als Tabelle auf Webseiten darzustellen. (Funktioniert vielleicht noch auf anderen Servern, siehe unten.)

Durch irgend eine veränderte PHP-Einstellung meines Hosters zeigte der obige Script plötzlich nach mehr als 6 Jahren reibungslosen Funktionierens leider nichts mehr an, sondern blockierte sogar den Seitenaufbau. Es gibt zwar das hochgelobte phpweather, doch dieses Programm schien mir mit entpackten 1,6 MB denn doch etwas zu gewaltig für meine Zwecke, wollte ich auf meinen Webseiten doch lediglich für eine bestimmte Stadt auf der Welt Temperatur, Luftdruck und Konditionen anzeigen. Einen wesentlich geringeren Umfang, sogar mit Wetter-Icon bietet Saratoga-Weather.org. Diesen Script hatte ich soweit angepasst, dass ich ihn einbauen konnte. Im letzten Augenblick aber fand ich das absolut Ideale, um Woodys Script zu ersetzen:

Open Weather Map API: Ein Beispiel in PHP
Ein ausgezeichnetes Beispiel, wie Leute, die in PHP fit sind, uns Unbedarften helfen können - Danke! Dieser kurze Script holt Daten von Open Weather Map und gibt sie formatiert aus. Beispiele:
Mein Heimatort (mit Wetterkarte) oder etwas kompakter, auf meinen Reiseseiten.
Auf Open Weather Map kann man noch viel mehr Wettersachen entdecken...

latlontomercator
Wer sich von openweathermap.org eine Wettermeldung einbaut und das Ganze mit einem schönen Wetterkärtchen von OSM versehen möchte, stößt in den Beispielen schnell auf das Problem der Längen- und Breitenangaben. Diese werden bei OSM in "Spherical Mercator" Koordinaten angegeben. Was zur Hölle soll das jetzt wieder sein...? Fragt sich der Ungebildete und fängt an, das Netz zu durchforschen. Wobei er auf viele hochkomplizierte Formeln mit rätselhaften Winkeln, Zoomfaktoren und mit Pi zu multiplizierenden Koordinaten stößt, bei deren Anwendung die Karte dann aber statt des heimischen Dorfes irgendeinen Punkt in der Weite des Pazifiks oder einen Felsvorsprung in der Gobi zeigt. Mit dem Umrechner von mal2.ch ist die Umrechnung glücklicherweise aber ein Kinderspiel!

Leaflet
"Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps. It is developed by Vladimir Agafonkin with a team of dedicated contributors. Weighing just about 33 KB of JS, it has all the features most developers ever need for online maps." Macht den Umgang mit OpenStreetMap Karten und auch mit OpenWeatherMap so einfach wie den Umgang mit der GoogleMaps API. (Ausschalten des Zoom-Scroll-Effekts der Maus in der Karte, Marker mit Popups usw.) Wetterlayer funktionieren auch mit GoogleMaps.

OpenWeatherMap for Leaflet based maps
"This is a Leaflet based script providing easy access to OWM's features for Leaflet based maps. In short: A JavaScript library for including OWM's layers and OWM's current city/station data in leaflet based maps without hassle." Wer seine Wetterkarte mit Wolken, Isobaren etc. etwas aufpeppen möchte, kann sich noch eine zusätzliche JS Datei in den Head laden. OpenWeatherMap for Leaflet - Wiki

Shariff: Social-Media-Buttons mit Datenschutz
"Mit Shariff schützen Webseiten-Betreiber die Privatsphäre ihrer Besucher vor der übertriebenen Neugierde sozialer Netzwerke wie Facebook, Google+ und Twitter. Für die Besucher reicht ein Klick, um eine Seite mit Freunden zu teilen.

Ein Forum steht ebenfalls zur Verfügung. Entwickelt von der Computerzeitschrift www.ct.de

Awstats
Zur Auswertung der Server Logfiles und Erstellung von Besucher-Statistiken ist das Kommandozeilen-Programm Awstats das Mittel meiner Wahl. Ich halte es für das zur Zeit beste Analyseprogramm. Eine Begriffserklärung findet sich unter site-check.cc.

BlaBlaMeter
"PR-Profis, Politiker, Berater, Werbetexter oder Professoren müssen hier tapfer sein! Das BlaBlaMeter entlarvt schonungslos, wieviel heiße Luft sich in Texte eingeschlichen hat. Ein praktischer Helfer für alle, die mit Text zu tun haben!"

user-agents.org
Unter user-agents.org findet sich eine Liste der Kennungen von Spidern, Robots, Crawlern und Browsern. Nützlich z. B. beim Ausschließen in der .htaccess oder bei der Analyse von Statistiken.

Reguläre Ausdrücke zur Textsuche
"Bei einem regulären Ausdruck handelt es sich um ein Textmuster, das eine oder mehrere gesuchte Text- oder Codevariationen beschreibt. Ein regulärer Ausdruck besteht aus bestimmten Zeichen (z. B. den Buchstaben "a" bis "z") und speziellen Zeichen zur Beschreibung des Textmusters (z. B. Sternchen [*]). Beispielsweise können Sie mit "Seite*" auf Ihrer Website alle Variationen von "Seite" suchen." Seite von Microsoft.

Reguläre Ausdrücke Sammlung
"Meine kleine, selbstgemachte Sammlung regulärer Ausdrücke für Dreamweaver"

Browserverbreitung von 1992 bis heute 2011
"Grafische Darstellung der Marktanteile oft genutzter Webbrowser monatlich zwischen Januar 1992 und heute, mit zusätzlichen Infos."

XAMPP
Um Scripts in PHP ausführen zu können, kann man einen Apache-Server und PHP auf der eigenen Maschine installieren, und die scripts testen. Apache und PHP ist bei allen großen Linux Distributionen dabei und auch unter Windows kann man XAMPP, ein Bundle aus dem Apache Server, PHP und MyYSQL, installieren. Im Netz findet sich die Dokumentation für Apache, z. B. für die Version 2.2, unter apache.org/docs/. Die Internet-Verzeichnisse werden unter Linux gewöhnlich in /var/www/ angelegt. Der Syntaxcheck "apachectl -t" liefert bei gestartetem Apache den Servernamen (wenn nicht definiert etwa "127.0.0.1").