22.12.2014 | Tipps
Wer auf Webseiten keine Werbung sehen will, nutzt oft die Browser-Erweiterung Adblock Plus. Leider ist dieses Add-On ein Speicherfresser – oft werden mehrere Hundert Megabyte Arbeitsspeicher belegt. URLFilter ist eine schlanke Alternative.
Die Firefox-Erweiterung URLFilter ist kostenlos bei den Mozilla Add-Ons zu laden. Nach der Installation erscheint oben rechts in der Firefox-Symbolleiste ein neues Symbol, über das die Einstellungen von URLFilter erreichbar sind.
Per Klick auf den großen Knopf „Lite Mode“ schaltet der Nutzer zwischen der CSS-basierten und der vollständigen Werbeanzeigen-Erkennung um. Vorteil des „Lite Mode“ ist: Prozessor- und Speicher-Auslastung sinken drastisch.
26.06.2014 | Tipps
Das Herzstück eines Entwickler-PCs ist der Editor. Die Code-Plattform GitHub stellt jetzt einen neuen Editor vor, der ganz in HTML und CSS geschrieben ist: Atom ist ein Editor für das Web, mit dem Web.
Atom ist ein Desktop-Programm, das auf Web-Technologie basiert. Wie andere Desktop-Apps hat Atom ein eigenes Icon im Dock oder in der Taskleiste, echte Menüs und Dialoge sowie Vollzugriff auf die Festplatte. Sobald Sie aber die Entwicklertools öffnen, scheint das webbasierte Herz durch. So wird es sehr einfach, Ihren Editor zu kontrollieren, egal ob Sie das Aussehen mit CSS anpassen wollen, oder neue Funktionen einbauen möchten.
Mac-Nutzer finden Atom zum kostenlosen Herunterladen auf der Projektwebseite www.atom.io. Für Windows und Linux gibt es noch keine offizielle Version, daran arbeitet man noch. Wer mag, kann die inoffiziellen Atom-Builds für Windows nutzen. Eine Installation ist nicht nötig – einfach entpacken und „atom.exe“ starten.
11.06.2014 | Tipps
Nicht immer war die Anzeige von Webseiten auch im Internet Explorer so fehlerfrei wie heute. Besonders die IE-Versionen 6, 7, 8 und teilweise 9 haben oft Probleme, Webseiten richtig darzustellen. Wie beheben Sie solche Darstellungs-Fehler bei Ihrer Webseite? (mehr …)
08.06.2014 | Tipps
Endlich können Webseiten neben den Standardschriften wie Helvetica, Arial und Times auch eigene Fonts nutzen, um sich von der Masse abzuheben. Wie heißt die Schriftart, die eine bestimmte Webseite nutzt? Das lässt sich leicht ermitteln.
Im Beispiel untersuchen wir die Webseite von Microsoft und ermitteln mit dem Internet-Explorer-Browser, welche Schrift dort verwendet wird.
- Starten Sie Internet Explorer 11, und laden Sie die Seite www.microsoft.de.
- Jetzt folgt ein Rechtsklick auf den Text, dessen Schriftart Sie auslesen wollen.
- Im Kontextmenü wählen Sie nun „Element untersuchen“.
- In der Box unten rechts, die daraufhin sichtbar wird, scrollen Sie dann so weit nach unten, bis Sie einen Eintrag namens „font:“ oder „font-family:“ sehen. Dahinter ist die verwendete Schrift angegeben. Im Beispiel handelt es sich um „wf_segoe-ui_light“ (Segoe UI Light), eine Variante der Hausschrift von Microsoft.
03.05.2014 | Tipps
Früher hat man HTML-Tabellen für alles Mögliche benutzt. Selbst wer heute Tabellen nur für tabellarische Zwecke verwendet, sollte den neusten Stand der Technik nutzen. Nicht-standardmäßige HTML-Attribute für Tabellen haben dabei ausgedient. Wie gehen Sie richtig vor?
Folgende Tabellen-Attribute sollten Sie als Web-Entwickler nicht mehr verwenden:
-
<table width="123">
Ersetzen Sie dieses Attribut durch den CSS-Stil:
table { width: 123px }
-
<table bgcolor="red">
Die Hintergrundfarbe lässt sich auch per CSS einstellen:
table { background: red }
-
<table cellpadding="2">
Die Abstände lassen sich über den CSS-Innenabstand der Zellen festlegen:
td { padding: 2px }
-
<table align="center">
Die horizontale Ausrichtung klappt auch wieder per CSS:
table { text-align: center; margin: 0 auto }
-
<table valign="top">
Auch die vertikale Ausrichtung in Zellen lässt sich als CSS-Stil definieren:
table { vertical-align: top }
Bauen Sie Ihre Webseite für die Zukunft und nutzen Sie CSS-Stile, um festzulegen, wie Tabellen im Browser dargestellt werden sollen. Mehr Infos finden Sie auch im Mozilla Developer Network unter: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table.
04.04.2014 | Tipps
Wer Webseiten programmiert, muss auf die Fähigkeiten der verschiedenen Browser Rücksicht nehmen. Welche neuen HTML- und CSS-Funktionen werden vom Internet Explorer bereits unterstützt?
Bei der Programmierung von modernen Webseiten hilft eine neue Referenz weiter, die vom IE-Team selbst erstellt wurde. Im Rahmen der Microsoft-Konferenz Build wurde sie vorgestellt. Unter https://status.modern.ie/ suchen Sie per Direkteingabe eine bestimmte HTML- oder CSS-Funktion und sehen auf Anhieb, ob der IE-Browser sie unterstützt, und wenn ja, ab welcher Internet-Explorer-Version sie eingesetzt werden kann.
In der Liste finden sich neben offiziellen neuen Standards auch Vorschläge, die in anderen Browsern bereits laufen – etwa zum Drag-und-Drop von Ordnern zusätzlich zu einzelnen Dateien. Für Web-Entwickler eine unverzichtbare Referenz zum schnellen Nachschlagen.
https://status.modern.ie/
09.03.2014 | Tipps
Wie die Sprache von Webseiten dargestellt werden soll, ist eigentlich im HTML-Standard definiert. Allerdings gibt es trotzdem Unterschiede – je nachdem, welchen Browser man verwendet. Damit Sie es als Web-Entwickler einfacher haben, können Sie das Aussehen von HTML und CSS vereinheitlichen.
Nutzen Sie dazu ein sogenanntes Reset-Stylesheet. Das ist eine CSS-Datei, in der festgelegt wird, wie jedes HTML-Element (Tag) dargestellt werden soll. So werden die Standard-Stile der einzelnen Browser angeglichen. Dazu binden Sie die reset.css in Ihre Webseite ein, bevor Sie Ihr eigenes Stylesheet laden:
<link rel="stylesheet" href="/styles/reset.css" type="text/css" />
<link rel="stylesheet" href="/styles/website.css" type="text/css" />
Anschließend werden zum Beispiel <h1> bis <h6> in jedem Browser gleich groß dargestellt, was für weniger Kopfzerbrechen beim Webseiten-Test sorgt.
01.01.2014 | Internet
In Google Chrome helfen die Entwicklertools beim Entwickeln von Webseiten wirklich weiter. Um bestimmte Elemente zu finden, können Sie nach ihnen suchen. Aber wussten Sie schon, dass Sie dazu auch CSS-Selektoren nutzen können? (mehr …)
