Kategorien
Stylesheets

Browserweichen für CSS3

CSS Programming Image

Der Umstand, dass sich CSS-Layouts langsam in der breiten Masse durchsetzen ist zu einem großen Teil dem Fakt geschuldet, dass sich an dem etablierten Standard seit vielen Jahren nichts geändert hat. Bereits der IE bot eine recht ordentliche CSS2-Unterstützung doch erst mit frisch veröffentlichten Internet Explorer 7 wird diese endlich einigermaßen fehlerfrei. Dazwischen liegen 6 Jahre. Auch andere Browser haben Zeit für den Reifeprozess benötigt.

Die Neuerungen von CSS 3 ermöglichen eine völlig neue Denkweise bei der Layouterstellung. Der Spaltensatz und die Möglichkeiten des neuen Box-Modells können zu erheblichen Vereinfachungen der Quelltextstruktur einer Webseite führen.

Doch in der Realität müssen Webdesigner auch jetzt schon eine Vielzahl an Browsern und dabei jeweils in zahlreichen mindestens zwei oder mehr Generationsstufen unterstützen. Das wird sich auch nach der Einführung von CSS3 nicht großartig ändern.

Doch wie soll man die neuen Techniken einsetzen, wenn gleichzeitig ältere Browsergenerationen noch mit dem gleichen CSS klar kommen sollen? Eine theoretische Möglichkeit wären CSS-Browserweichen.

Auf diese Weise ließen sich alte Browser mit reiner CSS2.x-Unterstützung gezielt mit gesonderten Stylesheets versorgen. Ob das reicht, ist dabei noch fraglich denn beispielsweise beim Spaltensatz könnten mit CSS 3 selbst aufwändige CSS-Layouts auf nur wenige erforderliche Container zusammen schrumpfen. Die Möglichkeiten von CSS 3 lassen sich vermutlich erst dann voll ausschöpfen, wenn auf CSS 2 (bei dem zusätzliches Markup benötigt würde) keine Rücksicht mehr genommen werden braucht.

Box-Modell-Chaos

Wer in dem neuen Box-Modell das Konzept der alten Internet Explorer-Versionen erkannt hat, liegt nicht daneben. Microsoft hat bereits beim IE5 die Probleme erkannt und ein fortschrittlicheres Box-Modell implementiert.

Leider verstieß es zum damaligen Zeitpunkt gegen den W3C-Standard und hat damit die Layoutentwicklung nicht wirklich vereinfacht. Der Internet Explorer 6 hat das Box-Modell zumindest im Standardkonformen Darstellungsmodus korrekt interpretiert und im IE7 funktioniert es endlich auch im Quirks Modus.

Und jetzt, wo der Browser endlich macht, was der Standard vorgibt, wird mit CSS 3 das „fehlerhafte“ Box-Modell des IE plötzlich offiziell eingeführt.

Kategorien
Stylesheets

Ausblick und ultimatives Fazit zu CSS 3

CSS Programming Image

Auf Grund der bisher ungelösten Probleme für den Übergang von CSS 2 auf CSS 3 wäre es wohl das Beste, wenn der Wechsel noch ein Weilchen auf sich warten lassen würde. Die Browser-Entwickler benötigen ausreichend Zeit, um die Funktionalität in ihre Software zu integrieren und ausgiebig zu testen.

Niemandem ist mit einem fehlerbehafteten CSS 3-Browser geholfen. Man wird damit rechnen müssen, dass auch unter den wichtigen Browsern der ein- oder andere sein wird, der mehr als nur einen Generationswechsel benötigt, um den kommenden neuen Standard zu unterstützen. Wenn es schneller geht, wird es allen zugute kommen.

Bereits heute unterstützten zumindest einige moderne Browser einzelne der zahlreichen neuen Funktionen von CSS 3.

Fazit

Zusammenfassend kann man sagen, CSS 3 bringt spannende und hilfreiche Neuerungen für die Entwicklung von CSS-Layouts. Allerdings ist man von der Einführung vermutlich noch weit entfernt und auch dann ist noch ein gutes Stück zu gehen bis die breite Anwendung sinnvoll möglich wird.

Kategorien
Webentwicklung

Super HTML 8.0 Web Studio

Prozess Pyramide

Super HTML 8.0 Web Studio (S-HTML) ist ein professioneller, deutschsprachiger HTML/Webeditor, der unter anderem zur Erstellung von Homepages, Webseiten und Webanwendungen geeignet ist.

S-HTML ist in erster Linie ein Code-basierter Editor, der volle Kontrolle über den Quellcode und damit maximale Flexibilität und Präzision bietet. Speziell für HTML-Dokumente steht aber auch ein bequemer WYSIWYG-Modus (What you see is what you get) zur Verfügung, der besonders für Anfänger mit wenig HTML-Kenntnissen geeignet ist.

Das Programm unterstützt alle gängigen Sprachen aus dem Webumfeld wie HTML, XHTML, XML, CSS, JavaScript, PHP, Perl, WML u.v.m. und ist damit ein unverzichtbares Werkzeug für jeden professionellen Webentwickler.

Weiterhin ist Super HTML vollständig Unicodefähig und kann Dokumente für alle Zeichensätze und Sprachen bearbeiten und erstellen (ANSI, UTF-8 und UTF-16).

Vor allem aber zeichnet sich SuperHTML durch seine sehr übersichtliche und gut strukturierte, anpassbare Benutzeroberfläche aus, bei der alle Funktionen dort zu finden sind, wo man sie erwartet. Mit zahlreichen Assistenten und Hilfsfunktionen greift das Programm dem Benutzer unter die Arme, so dass sich auch komplexere Aufgaben deutlich leichter bewältigen lassen. Viele weitere, leistungsfähige Komfortfeatures wie ein vollwertiger, integrierter (S)FTP-Client, ein Tag Inspektor, eine integrierte HTML-Referenz sowie eine Textbausteinverwaltung mit Tastaturshortcuts runden das Programmpaket ab.

In der Version 8.5 wurden insgesamt über 100 verschiedene Ideen, Anregungen und Vorschläge von Anwendern der Vorgängerversionen umgesetzt.

Ein Download des Tools ist bei chip.de möglich. (Stand 2023)

Systemvorraussetzungen

  • IBM-kompatibler PC
  • 30 MB freier Festplattenspeicher
  • 256 MB RAM
  • Auflösung min. 800 x 600 Pixel mit min. 256 Farben.
  • Microsoft Windows (9x/ME/NT/2000/XP oder Vista) mit Internet Explorer ab Version 5.0
  • Empfohlen: Windows XP oder Windows Vista mit Internet Explorer 6.0 oder 7.0 oder höher.
Kategorien
Joomla Templates

Jommla Template Reihe K19

Joomla Logo flat

Grundstruktur

Das Grundgerüst dieses Templates besteht wie gehabt aus einem zentrierten Container (Rahmen) mit der Breite von 980px.

Probiert es aus, ihr könnt es anpassen oder auch Teile davon verwenden. Alle weiteren Angaben sind ebenfalls fix gesetzt, das sollte aber bei einer Auflösung von 1024 kein Problem darstellen. Fast alle Container bestehen zumeist aus einem -außen und einen -innen
Container, um mehr Möglichkeiten zur Abgrenzung der Elemente zu ermöglichen.

Ich habe den oberen Bereich etwas zusammengefasst, so das schon in der Startpage mehr Content auf dem Bildschirm zu sehen ist. Das ist meiner nach wichtig, denn der Platz auf der Startseite sollte genutzt werden. Das ist das was der Anwender sofort präsentiert bekommt. Beide Bilder in den Bereichen Latest News und Popular habe ich aus der index.php in die CSS Datei gezogen.

Die CSS Deklaration des rechten Menüs ist nun auch validiert. Weiterhin habe ich Fehler in den CSS Deklarationen beseitigt. Die Änderungen sehen folgendermaßen aus:

#content-left-popular 

{
float:left;
width: 230px;
margin: 0 0 0 75px;
padding: 0;
text-align:left;
font-size: 12px;
border:4px solid #FFFFFF;
background: #8FB5D9 url(../images/bg-content-aussen-popular.jpg)no-repeat center center;
}

248 kB

Das Template ist nicht explizit für ältere Browser angepasst. Ich kann hierbei auch keinen Support übernehmen, da mir dafür einfach die Zeit fehlt. Ihr könnt mir allerdings Fragen zukommen lassen, ich werde diese zu beantworten. Viel Erfolg beim Einsatz.

Eine Besonderheit an diesem Template sind die Attributselektoren aus der CSS-3 Spezifikation. Aktuell werden diese von Firefox, SeaMonkey, Safari und IE7 unterstützt.

Folglich ist das Risiko, dass diese Spezifikationen in die endgültige Version von CSS-3 übernommen werden relativ gering. Warnhinweis – Einige Seiten benutzen bestimmte CSS-Definitionen, die von älteren Browsern nicht dargestellt werden können.

Kategorien
Wordpress

definitiv simple Migration zu WordPress

Wordpress Logo Schwarz/Weiss

FG Joomla to WordPress

A plugin to migrate categories, posts, tags, images and other medias from Joomla to WordPress

Dieses Plugin migriert Abschnitte, Kategorien, Beiträge, Bilder, Medien und Tags von Joomla nach WordPress. Es wurde mit den Joomla-Versionen 1.5 bis 4.0 und WordPress 6.1 auf grossen Datenbanken getestet. Es ist mit Multisite-Installationen kompatibel.

Zu den Merkmalen gehören:

  • Joomla-Abschnitte werden als Kategorien migriert
  • migriert Kategorien als Unterkategorien
  • kopiert Joomla-Beiträge (veröffentlichte, unveröffentlichte und archivierte)
  • lädt alle Beitragsmedien in WP-Upload-Verzeichnisse hoch (optional)
  • lädt externe Medien hoch (optional)
  • ändert den Beitragsinhalt, um die Medienlinks beizubehalten
  • anpassen der Größe von Bildern gemäß den in WP definierten Größen
  • definiert das vorangestellte Bild als erstes Beitragsbild
  • behält das alt image-Attribut und behält die Bildunterschrift bei der Übertragung
  • passt die internen Links an
  • Meta-Keywords als Tags in WP mit Seitenumbrüchen
  • kann Joomla-Artikel als Beiträge oder Seiten importieren

Bei meiner Migration habe ich dieses Plugin mehrfach verwendet und es hat jedesmal wie gewünscht funktioniert.

Nachteil: eine Auswahl welche Daten (Beiträge oder Seiten) migriert werden sollen war mir nicht möglich. Hierfür müsste die Migration entweder in ein Testsystemerfolgen und von dort aus in ein Produktivsystem.

Alternativ wäre es auch möglich in der Quelle die Beiträge zu archivieren und nur die übrig gebliebenen Beiträge zu migrieren. Folglich muss man mehrere Läufe mit diesem Toll starten. Ich habe festgestellt, bei kleineren Seiten geht es mit einem Lauf.

Verglichen mit einer manuellen Übernahme ist es eine echte Erleichterung, Aussortieren kann man die Seiten oder auch Beiträge in der neuen WordPress Instanz. Diese sollte ja ohnehin zu dem Zeitpunkt nicht online sein.

Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K10

Joomla Logo flat

Template K10

Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 980px. Der primäre Font ist Tahoma. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder:

#container{width: 980px; margin:auto;} 

Dieses Template ist getestet mit Firefox 4 und dem IE 8/9. Das Topmenue liegt auf „user4“, der banner auf „banner“, der newsflash auf „top“, latestnews auf „user1“ und mostread auf „user2“ Die CSS Datei ist beim W3C nach CSS Standard 2.1 validiert. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.

146 kB

Kategorien
Joomla Templates

Joomla Template Reihe K09

Joomla Logo flat

Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 980px.
Der primäre Font ist Tahoma. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder:

#container{width: 980px; margin:auto;}

Dieses Template ist getestet mit Firefox 4.0 und dem IE 8.
Das Topmenue liegt auf „user4“, der banner auf „banner“, der newsflash auf „top“, latestnews auf „user1“ und mostread auf „user2“.


Die CSS Datei ist beim W3C nach CSS Standard 2.1 validiert.
Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.

140 kB

Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K08

Joomla Logo flat

Dieses Template besteht aus vier Containern die absolut positioniert werden. Die Breite ist in Prozentwerten angegeben. Dadurch passt sich das Layout an eine veränderte Breite automatisch an. Es ist nur darauf zu achten das Bilder unter Umständen bei geringen Breiten aus den Boxen herauslaufen können. Das Logo und das Topmenue werden ebenfalls absolute über den Containern positioniert.

Kategorien
Joomla Templates Webentwicklung

Joomla Template Reihe K01

Joomla Logo flat

Template – K01

Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 980px. Der primaere Font ist Tahoma. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder:

#container{width: 980px; margin:auto;} 

Als Zusammenfassung kann ich sagen:

Dieses Template ist getestet mit Firefox 4 und dem IE 8/9. Das Topmenue liegt auf „user4“, der banner auf „banner“, der newsflash auf „top“, latestnews auf „user1“ und mostread auf „user2“ Die CSS Datei ist beim W3C nach CSS Standard 2.1 validiert. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.

112 kB

Kategorien
Joomla Templates

Joomla Template Reihe K02

Joomla Logo flat

Template K02

Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 980px.

Der primaere Font ist Tahoma, so ist auch wie bei anderen Vorlagen das Zentrieren des Layouts mittels automatischer Ränder erfolgt:

#container  {
  width: 980px;
  margin:auto;
}

Eine andere Möglichkeit besteht mit einer Flexbox.

#zentriert {
  display: flex;
  align-items: center;
  justify-content: center;
}

Dieses Template ist getestet mit Firefox 3 und dem IE 8. Das Topmenue liegt auf „user4“, der banner auf „banner“, der newsflash auf „top“, latestnews auf „user1“ und mostread auf „user2“

Die CSS Datei ist beim W3C nach CSS Standard 2.1 validiert. Alle template bezogenen Grafiken und Bilder sind wie immer selbst erstellt und bearbeitet worden.

95 kB