RE-Design – Enrico Reinsdorf

Nachdem ich gestern erklärt habe wie die HTML-Datei, das dazugehörige CSS-Design und die XML-Datenstruktur aufgebaut sind, werde ich mich nun der clientseitigen Programmierung widmen.

Die Programmierung besteht hier nun aus 2 JavaScript-Dateien. Die eine ist für die Verarbeitung der Daten und die andere regelt die Übertragung zum und vom Server.

Diesen Beitrag weiterlesen »

Nun möchte ich euch wieder einmal ein Tutorial schenken in dem ich zeigt wie man eine kleine Mini-Webanwendung erstellt. Da ich euch letztens schon mal eine kleine Slideshow mit HTML, CSS (Teil 1) und JavaScript (Teil 2) gezeigt habe, glaube ich dass dieses hier auch sehr interessant sein dürfte.

In diesem Tutorial möcht ich euch die Entwicklung, bzw. die wichtigsten Schritt zum Erstellen eines Web-Adressbuches zeigen. Dabei habe ich alles in 3 Teile aufgeteilt. Dass heißt heute zeige ich euch das Interface der Webanwendung, also die HTML-Datei und das dazugehörige Design. Morgen gibt es dann die clientseitige und übermorgen die serverseitige Programmierung.

Diesen Beitrag weiterlesen »

Schon seit längerem wusste ich das es den <button>-Tag gibt, aber erst jetzt habe ich seine Vielseitigkeit erkannt und schätzen gelernt.

Diesen Tag gibt es schon seit der HTML 4.0 Version. Bis dahin konnten die Designer immer nur über den <input>-Tag mit den type-Attribut Buttons erzeugen. Zulässige Werte um einen Button zu erzeugen sind submit, reset und image, Erst ab der 4er Version von HTML bezeichnet man Buttons auch in ihrer Bezeichnung so was sie auch tatsächlich sind, nämlich Buttons. Und das Schöne daran ist, sie funktionieren zusätzlich auch noch in allen gängigen Browsern.

Diesen Beitrag weiterlesen »

Nachdem ich gestern im ersten Teil den Aufbau der HTML-Seite und das Design mit CSS beschrieben habe, folgt nun die Programmierung das Ganzen. Es ist gar nicht so schwer wie man Denken könnte. Nur ganze 4 Funktionen brauche ich für meine einfache Slideshow.

Diesen Beitrag weiterlesen »

Im nächsten Beispiel möchte ich zeigen wie man mit JavaScript wunderbar das DOM einer HTML-Datei ändern kann. Dazu habe ich mich für den Nachbau von S5 entschieden. Im ersten Teil werde ich den Aufbau der HTML- und CSS-Datei erklären, um dann morgen in die JavaScript-Programmierung einzusteigen.

Diesen Beitrag weiterlesen »

Dieses Thema hatte ich schon lange im Kopf, hatte aber leider noch nie Zeit gefunden darüber einmal detaillierter zu schreiben. Nun aber, dadurch das mich heut fast alle Browser mit den Thema CSS 3 im Stich gelassen haben, habe ich die Zeit und den Platz gefunden darüber zu berichte.

Ein Website kann noch so gut geplant sein, im Laufe der Zeit werden sich immer wieder die Strukturen und damit die URIs von Ressourcen ändern. Das ist ganz normal. Normal ist auch, dass solche Ressourcen Spuren im Web hinterlassen haben. Zum einen natürlich in Suchmaschinen, die diese indexiert haben. Zusätzlich habe vielleicht aber auch Besucher diese Adressen in ihren sozialen Netzwerken wie del.icio.us, Mister Wong, Yigg oder Google Bookmarks oder aber ganz normal als Favorit abgespeichert. Wenn sich nun die Adressierung ändert, sollten natürlich Besucher die noch zur alten Adressen wollen weitergeleitet werden. Und genau da kommt die Apache Direktive redirect ins Spiel.

Diesen Beitrag weiterlesen »

Ich wollte heute eigentlich einen Artikel über die Möglichkeiten von CSS 3 schreiben. Aber leider sind die interessanten Thema nicht mit den Windows Browsern behandelbar. Egal ob ich nun Firefox 2.0.0.11, Internet Explorer 7.0.6000, Opera 9.23, Flock 1.0.3 oder Safari 3.0.4 benutze. Fast alle zeigen nichts an. Einzig der Safari hat mir multiple Hintergründe angezeigt.

Was ich hier vorstellen wollte, waren neben die Hintergründen das Spaltensystem und die Zusätzlichen Möglichkeiten von Rahmen. All diese Dinge funktionierten überhaupt noch nicht. Eigentlich sehr schade, denn dadurch wären viel Umstände im Designen von Websites Geschichte.

Schon viele Autoren haben sich über das Thema SEO ausgelassen. Auch ich möchte an dieser Stelle alle für mich wichtigen Punkte in einer Top 10 Liste zusammenfassen.

1. Besucher wollen nur qualifizierten Inhalt
2. Durch Schlüsselbegriffe den Inhalt definieren
3. interne und externe Verlinkung zählen
4. Seitentitel geben den Inhalt vor
5. Missgunst vermeiden
6. Fehlerseite bieten Möglichkeiten
7. Maschinen lieben Technik
8. Besucher lieben Klicks
9. Den richtigen Platz finden
10. Sitemap

Diese Liste soll als Hilfsmittel dazu dienen, dass die eigene Website von Suchmaschinen besser gelistet wird. Dabei stell ich aber auch immer wieder fest, dass nicht alle Punkte aus der Liste ohne weiteres umzusetzen sind.

Diesen Beitrag weiterlesen »

Durch die Benutzung von Klassen und IDs kann man sehr effektiv auf die Strukturen von HTML-Seiten zugreifen. Doch leider wird dadurch auch der Quellcode der Seite vergrößert. In vielen Fällen ist das aber unnötig, denn oft werden Klassen aus Bequemlichkeit eingesetzt um schnell auf das Richtige zu zugreifen. CSS bietet über Selektoren mehr als nur den Zugriff auf Tags, Klassen und IDs.

Diesen Beitrag weiterlesen »

Immer wieder werden ähnlich bzw. gleiche Layouts beim Webdesign gebraucht. Ich habe einmal versucht eine relative einfaches Framework zur schnellen Erzeugung von verschiedenen Layouts zu erstellen.

Um die Verwaltung des Framework einfach zu halten, habe ich mich dazu entschlossen die CSS-Dateien aufzuteilen. In der HTML-Datei existieren zwar nur 3 relative Verlinkungen zu den jeweiligen Ausgabedesigns, aber für jedes Design sind dann weitere 3 Dateien zuständig. Um die Designs flexibel administrieren zu können, benutze ich eine Layout-Datei für die Positionierung der Boxen, eine Color-Datei für die Farbgebung und eine Typographie-Datei für die Texteinstellung.

Diesen Beitrag weiterlesen »