Freitag, 5. September 2008

Browserspeedtest

Für die Geschwindigkeit, mit der Webseiten angezeigt werden, ist natürlich in hohem Maße die Verbindungsgeschwindigkeit verantwortlich. Doch das ist nicht alles. Oft unterschätzt wird jedoch, dass natürlich auch die Fähigkeiten der einzelnen Browser zählen.

Im Internet werden eine Reihe von Tests angeboten, mit denen sich entsprechende Messungen durchführen lassen.

Bei der Interpretation der Testergebnisse sind allerdings eine Dinge zu beachten:
  • Die Tests unterschiedlicher Browser sind nur vergleichbar, wenn sie mit der gleichen Hardware durchgeführt werden.
  • Bei Durchlaufen eines Tests sollten möglichst keine weiteren Programme aktiv sein
  • Ein Browser mit vielen Plugins und Add-ons verhält sich anders (langsamer) als eine jungfräuliche Installation.
Hier nun einige Links zu Webseiten, die Geschwindigkeitstests für Browser anbieten:

Donnerstag, 28. August 2008

Online-Tools auf dynamic.com

Die Website dynamicdrive.com hat mit http://tools.dynamicdrive.com/ eine Unterseite zum Thema Online-Tools. Dazu gehören:

Der Image Optimizer

Dieses Online-Tool optimiert normale und animierte GIF-Dateien, JPG und PNG-Dateien in Bezug auf die Dateigröße. Außerdem kann zwischen den genannten Grafikformaten konvertiert werden.

FavIcon Generator

Der Favicon-Generator generiert aus einer Grafikdatei, die man hochladen kann ein Favicon. Es können Garfiken in den Formaten BMP. JPG, GIF und PNG hochgeladen werden.

Email Riddler

Mit dem EMail-Riddler werden E-Mail-Adressen verschlüsselt. Dadurch kann vermieden werden, das E-Mail-Adress-Sammler die Adresse für Spam-Zwecke missbrauchen.

.htaccess Password Generator

Mit diesem Online-Tool werden alles notwendigen Code-Teile erzeugt, um einen htaccess-Passwortschutz zu installieren.

Gradient Image Maker

Gradient images are used everywhere in web page design, such as the background of form buttons, DIVs, to act as shadows etc. This tool lets you easily generate a gradient image.

.htaccess Banning Generator
This tool generates for you the necessary .htaccess code to ban visitors based on their IP address, block traffic originating from certain domains, or disable hotlinking on the desired file types on your server, such as images.

Button Maker

Use this tool to easily create those popular 80x15 micro buttons you see on web sites everywhere.

Ribbon Rules Generator

Create alternating colored horizontal rules quickly with this new Web 2.0 tool.

DD Whois

DD Whois lets you painlessly look up the availability of a domain name, or for registered domains, its whois records.

What is my IP address?

Useful information about your Internet Connection and browser.

http://politnet.ch/css/

Kapitel 1: CSS und Dokumente

* Ein kurzer historischen Rückblick und allgemeine Charakterisierung

* Elementarten in CSS:
* Ersetzte Elemente
* Nicht-ersetzte Elemente
* Methoden des Displays von Elementen:
* Block-Elemente
* Inline-Elemente
* Einbindung von CSS in (X)HTML:
* Externes CSS mit dem Link-Tag
* Definition von CSS im Headbereich: Das <style>-Tag:
* Die @import-Direktive
* Inline-Styles in einzelnen Tags
* Kommentare im CSS

Kapitel 2: Selektoren

* Struktur der Selektoren

* Element-Selektoren
* Klassen- und ID-Selektoren
* Attribut-Selektoren
* Selektion aufgrund der Ausnutzung der Dokumentenstruktur
* Kontextuelle Selektoren
* Child Combinator
* Sibling Combinator
* Pseudo-Klassen und Pseudo-Elemente
* CSS 2.1: Dynamische Pseudo-Klassen

Kapitel 3: Struktur und Kaskadierung

* Wie funktioniert die Kaskade

* Spezifizität (Specificty)
* Vererbung (Inheritance)
* Die Kaskade (Cascade)

Kapitel 4: Werte und Masseinheiten

* Zahlenangaben

* Farbangaben
* Benannte Farben
* RGB-Farbangaben
* Hexidezimale Zahlenwerte
* Längenmasse
* Absolute Längenmasse:
* Relative Längenmasse
* Angaben in Pixeln
* URLs
* Inherit - erzwungene Vererbung
* Masse der Aural-Ausgabe (keine Browser-Umsetzung)

Kapitel 5: Fonts

* Font-Familien (font-family)

* Schriftgewicht (font-weight)
* Schriftgrösse (font-size)
* Schriftstil (font-style)
* Schriftvariante (font-variant)
* Schrift-Gesamtangaben (shorthand: font)

Kapitel 6: Text-Eigenschaften

* Text-Einrückung (text-indent)

* Horizontale Textausrichtung (text-align)
* Vertikale Textausrichtung (line-height, vertical-align)
* Wort- und Buchstabenabstände(word-spacing, letter-spacing)
* Text-Umwandlung(text-transform)
* Text-Auszeichnung (text-decoration)
* Leerzeichen(white-space)
* Textrichtung (text-direction)

Kapitel 7: Grundlagen der visuellen Formattierung

* Basis-Boxen

* Der übergeordnete Block
* Notwendige Begriffe
* Block-Elemente
* Horizontale Formattierung
* Vertikale Formattierung
* Inline-Elemente
* Grundbegriffe
* Inline-Formattierung von nicht-ersetzten Elementen
* Formattierung von ersetzten Elementen
* Änderung des Displays von Elementen
* Inline-Block-Elemente
* Run-in-Elemente

Kapitel 8: Innenabstand, Ränder und Aussenabstand

* Boxen der Basis-Elemente

* Aussenabstände (margin)
* Ränder (border)
* Innenabstände (padding)

Kapitel 9: Farben und Hintergründe

* Vordergrundfarben (color)

* Hintergrundfarbe (background-color
* Hintergrundbilder (background-image)
* Hintergrundbilder: Wiederholung (background-repeat)
* Hintergrundbilder: Positionierung (background-position )
* Hintergrundbilder: Anbindung (background-attachment)
* Hintergrund: Kurzfassung (shorthand) (background)

Kapitel 10: Floating und Positionierung

* Floating und Clearing (float)

* Basiskonzepte: Positionierung
* Inhaltsüberschuss und Inhaltsbeschneidung (overflow, clip)
* Element-Sichtbarkeit und -Unsichtbarkeit (visibility)
* Absolute Positionierung
* Positionierung auf der z-Achse (z-index)
* Fixe Positionierung (position:fixed)
* Relative Positionierung (position:relative)

Kapitel 11: Tabellen-Layout

* Tabellen-Formattierung

* Tabellen-Display (display:)
* Tabellen Layermodell
* Tabellen-Zellenränder (cell border)
* Tabellen-Grössenbestimmungen (sizing)

Kap 12: Listen und generierte Inhalte

* Listen

* Typen von Listen-Markierungen (list-style-type)
* Bilder als Listentypen (list-style-image)
* Positionierung von Listen-Markierungen (list-style-position)
* Listen Layout
* CSS generierte Inhalte (wird hier vorläufig, wegen mangelnder Browserunterstützung nicht behandelt)

Kapitel 13: User Interface Stile

* Systemfonts und Colors

* Cursors
* Outlines von Boxen

Kaptel 14: Nicht-Bildschirm-Ausgaben

* Media spezifische Ausgabetypen von Stylesheets
* Seitenbezogene Ausgabetypen (Paged Media)
* Druckausgabe
* Projektor-Ausgabe
* Gesprochene Ausgabe (Aural Styles) Wird hier nicht dokumentiert)

Kapitel 15: Anhang: Attribut-Referenz (Propertys)

http://www.lipfert-malik.de/webdesign/

Kosten reduzieren durch Webdesign
Aspekte Webdesign
Tableless Layout
W3C - konform
Barrierefreies Webdesign
Web Design for All
Webdesign + Barrierefreiheit
Barrierefreies Webdesign für Webmaster
Animiertes Web Design
JavaScript und DHTML
Vektorgrafiken und Animation
Animierte Gifs
Animation crossbrowser
Tutorials
Webdesign u. Codeerstellung
CSS für alle Browser
JavaScript für alle Browser
XML für alle?
HTML für alle Browser
* getElementById
* innerHTML
* Laufschrift
* onClick Divs
* onMouseOver Divs
* onMouseOver Images
* getComputedStyle
* toFixed()
* Einführung
* Ziel
* Situation
* Data Islands
* Entities
* Gemeinsamkeiten
* XSLT
* Realisation als Datenbank
* Eindindung
* Beispiel XSL
* externe Daten

* Beispiel Katalog
o Gesamtkatalog
+ XML / XSL
+ XML / DOM
+ /ActiveX /DHTML
o Preisliste
+ XSL
+ Opera DHTML
+ IE 5
+ SSI / NC-IE 4
* Browserweiche

* Fazit
* Informationsquellen

http://sinn3r.pytalhost.de/oldstyle/index.html

.htaccess-Anleitung

http://www.metacolor.de/index.html

Die Grundregeln der Farbenlehre
Additive Farbmischung

Subtraktive Farbmischung
Grafik: Vergleich RGB- und CMY-Farbmischverfahren

Primär- und Sekundärfarben
Der Farbenkreis
Verschiedene Farbkreise
Komplementärfarben und Simultanwirkung

Nachbilder
Der harmonische Farbkreis
Grafik: Vergleich aller Farbenkreise

Modulationen
Die Tertiärfarben
Perspektiveffekt durch Farben

Farbsymbolik

Die Farbsymbolik
Allgemeine Bestimmung der Assoziationen
Farben und Assoziationen in Diagrammen
Beliebteste und unbeliebteste Farben
Blau
Rot
Grün
Gelb *
Orange *
Schwarz *
Rosa *
Weiß *
Violett *
Gold *
Silber *
Braun *
Grau *
Aufstellung aller assoziierten Begriffe

Die Harmonielehre

Vorwort zum Thema Kreativität
Was ist eine Harmonielehre?
Die Harmonielehre Nach Roman Liedl
Der Winkelkontrast
Die Winkelharmonie
Auffächerungen
Farbreihen
Wiederholungen
Eine Farbkombination, die wir gewöhnt sind
Farben zur Unterstützung bestimmter Winkelharmonien
Der Mengenkontrast
Der Hell-Dunkel-Kontrast
Der Bunt-Unbunt-Kontrast
Der Kalt-Warm-Kontrast
Die Harmoniekontraste
Farbwähler für Harmoniekontraste
Beschreibung und Download des Farbwählers
Einklang von Harmonielehre und Farbsymbolik
Integration der assoziierten Farben in die Webseite
Aus assoziierten Farben werden Harmonien
Ergänzung zur Winkelharmonie
Ergänzung zur Farbreihe
Wiederholung der Disharmonie

Das Design von Flächen
Was ist Harmonie?
Gegensätze
Gleichartigkeit und Verschiedenartigkeit
Beispiele für Harmonie und Disharmonie
Weitere Beispiele für Harmonie und Disharmonie
Spannungen
Das Schöne und das Hässliche
Unsere tägliche Aktivierung
Die schöne Webseite

Marketing und PR
Marketing im Webdesign
Bilder als Mittel im Marketing
Headlines als Mittel im Marketing
Text als Mittel im Marketing

Sonntag, 10. Februar 2008

Windows Live Writer

Der Windows Live Writer (WLW) ist ein sehr praktisches kleines Programm, mit dem man sehr komfortabel Blog-Beiträge erstellen und auf die entsprechende Blog-Site hochladen kann.

Installation

Zunächst lädt man von get.live.com/writer/overview den Windows Live Installer. Dieser ist nur die Startplattform, um den WLW und noch eine ganze Reihe anderer Microsoft -Live -Anwendungen aus der Microsoft Windows Live Familie online zu installieren.

Konfiguration

Um den WLW effektiv nutzen zu können, muss über Weblog >Weblogkonto hinzufügen, ein bereits existierendes Blog-Konto hinzugefügt werden.

Plugins

Mit der Schalfläche Plug-In hinzufügen lassen sich von der Microsoft-Webseite Plug-Ins herunterladen, die die Funktionalität des WLW erweitern.

Einige interessante Plug-Ins sind

  • Blog This for Firefox, The "Blog This" Firefox button launch Windows Live Writer prepopulated with content from the current web page. Use it to quickly blog about interesting content you find while browsing the web.
  • Insert Code for Windows Live Writer, Insert Code for Windows Live Writer will format a snippet of text in a number of programming languages such as C#, HTML, MSH, JavaScript, Visual Basic and TSQL
  • Insert Formatted Clipboard; This will paste rich content from the clipboard into WLW. When you paste into WLW, ever notice that all formatting is stripped into plain text? Ever want to copy/paste from MS Word, MS Excel, websites, etc? This tool is what you need.
  • Website Capture Plugin, Screen captures a URL for inclusion in your blog.
  • Insert Website Image, Inserts a thumbnail image of a website into the Live Writer window.
  • Table Plugin, Embed a customized table in your Blog post
  • Text Template,The Text Template plugin lets you save commonly used "snips" of HTML. From phrases you use, to moods, links, terms and more. Apply Categories to your templates to allow for easy sorting and filtering. You can even give them their own icon...
  • Code Snippet plugin for Windows Live Writer; Format and apply syntax highlighting to source code snippets before inserting into your Windows Live Writer posts.

Interessante Funktionen

Sehr komfortable ausgebaut hat MS die Funktionalität zum Einfügen von Hyperlinks. Damit lassen sich sehr einfach Links zu früher mit dem WLW erzeugten Beiträgen (auch in anderen Blogs) erzeugen. Außerdem kann sich der Nutzer eine Art Link-Bibliothek anlegen, auf die immer wieder zurück gegriffen werden kann

Donnerstag, 3. Januar 2008

Webmaster Resource

Die Webseite ist in folgende Bereiche aufgeteilt:
  • Tipps & Tricks
  • Tutorials
  • Service
Außerdem gibt es Forum.
Die Inhalte im einzelnen:
Tipps & Tricks
  • CGI & Perl (4 Artikel)
  • CSS (57 Artikel)
  • Design (19 Artikel)
  • Grafik (5 Artikel)
  • HTML (35 Artikel)
  • Javascript (89 Artikel)
  • PHP (182 Artikel)
  • Promotion (13 Artikel)
Tutorials
  • CSS
    Dieses umfangreiche Tutorial erklärt Ihnen Schritt für Schritt wie Cascading Style Sheets aufgebaut sind und wie Sie Ihre Webseite mit CSS verbessern können.
    kann auch als PDF heruntergeladen werden
  • Design
    keine
  • Grafik
    hier findet sich das Tuorial Bilder mit ACDSee 7.0 fürs Web optimieren
    kann auch als PDF heruntergeladen werden
  • HTML
    Mit HTML können Sie Texte und Absätze formatieren, Tabellen anlegen oder auch Formulare und Frames definieren. Wie das genau funktioniert, können Sie im HTML-Tutorial erfahren.
    kann auch als PDF heruntergeladen werden
  • PHP
    Hier gibt es 4 Tutorials


    • Binärdaten in einer MySQL-Tabelle speichern
    • Diagramme mit PHP dynamisch erstellen
    • Kontaktformular mit PHP
    • PHP-Tutorial


Service
  • Downloads & Software
  • Scripte
  • Bannererstellung
  • Hintergrunderstellung
  • Online-Tools
  • Newsletter
  • Weblinks
  • Bücher
  • Topliste