Schlagwort-Archive: Responsives Webdesign

Erfahrungsbericht Ferienhaus Software jFeWo für Joomla – Teil II

Installation und Einrichtung

jFeWo Software in der Version "Portal Edition"
jFeWo Software in der Version „Portal Edition“

Die Installation läuft Joomla typisch ab, indem das Installationspaket in der Joomla Verwaltung hochgeladen und installiert wird. Zu der Hauptkomponente kommen noch diverse Module, für die Darstellung von Objekten oder speziellen Funktionen und System Plug Ins hinzu, die für den Betrieb notwendig sind. Nach der Installation will die mächtige Komponente eingerichtet und konfiguriert werden. Dazu  gibt es auf der Hersteller Webseite eine gute und umfangreiche Dokumentation, die hilft, das System zu konfigurieren und mit ersten eigenen Daten zu bestücken.

Der Zeitaufwand für die Einarbeitung in das System, sollte mit der Komplexität solch einer Komponente nicht unterschätzt werden. Um sich intensiv mit dem System auseinander zu setzen, sollte man sich mehrere Tage Zeit nehmen; die gut investiert sind. Erfahrungsbericht Ferienhaus Software jFeWo für Joomla – Teil II weiterlesen

Erfahrungsbericht Ferienhaus Software jFeWo für Joomla – Teil I

Website mit jFeWo und Joomla realsiertMit Airbnb und booking.com stehen Agenturen und Besitzern von Ferienhäusern und Ferienwohnungen mächtige Portale zur Verfügung, mit deren Hilfe sich Urlaubs-Immobilien vermarkten lassen. Trotz all dem gebotenen Komfort ist mancher Vermiet-Agentur nicht wohl dabei, sich in eine nicht abzusprechende Abhängigkeit zu begeben, weshalb viele Agenturen weiterhin ihre eigene Website mit entsprechender Software betreiben.

Für diese Zielgruppe entwickelt und vertreibt die deutsche Firma b01 aus Berlin die Ferienhaus Software jFeWo. Seit mehr als 6 Jahren steht eine Lösung zur Verfügung, die auf dem bekannten Open Source System Joomla aufsetzt und eine Vielzahl an Funktionen bietet, unter anderem so wichtige Anforderungen wie eine automatische Synchronisation mit Portalen wie: Atraveo, Casamundo, eDomizil, homeaway, Holidu, HomeToGo zum Synchronisieren von Belegungsdaten und Preisen. Erfahrungsbericht Ferienhaus Software jFeWo für Joomla – Teil I weiterlesen

Schöne Referenzbilder mit einem „Device Art Generator“ erstellen

Da hat man nun die schöne neue responsive Website erstellt und nun steht man vor dem Problem sie entsprechend darzustellen bzw. in Szene zu setzen. Ziel dabei ist es, alle möglichen Ausgabegeräte vom stationären PC, über Tablet Computer bis hin zum Smartphone abzudecken, um die Website so realistisch wie möglich bewerben/darstellen zu können.

MockUp Beispiel

Der folgende Artikel stellt ein paar Tools, sogenannte Device Art Generator oder auch MockUp Devices vor, mit deren Hilfe das Einbinden von Screenshots einer Website via Bild upload oder per URL auf virtuellen Geräten möglich ist. Zum Teil handelt es sich dabei um kostenfreie Tools, möglicherweise mit eingeschränktem Funktions/Auflösungs-Umfang,  um Tools die je nach Auflösung einen einmaligen Betrag verlangen oder aber um Dienste die im Abo-Modell genutzt werden können. Schöne Referenzbilder mit einem „Device Art Generator“ erstellen weiterlesen

Mit Firebug CSS :active und :hover anzeigen und bearbeiten

Es gibt einfach kein Programm, dem sich, selbst nach langjähriger Nutzung, nicht das eine oder andere „Geheimnis“ entlocken lässt. So ist es auch bei Firebug, einem Gratis Add-On für Firefox, welches für Webentwickler quasi unentbehrlich ist. Um mit Hilfe von Firebug die CSS Eigenschaften von :active und :hover anzeigen oder ändern zu können, wie folgt vorgehen:

  • Falls nicht schon installiert, Firebug runterladen und installieren.
  • Zu untersuchende Seite im Browser öffnen und Firebug durch ein Klick auf das Käfer-Symbol aktivieren.
  • Das zu untersuchende Element mit Firebug auswählen
    Firebug Element untersuchen
  • Im rechten Fenster, im Tab Styles, auf das kleine Dreieck klicken und den Eintrag :hover auswählen.
    Firebug CSS Element :hover untersuchen
  • Das war’s schon. Jetzt können bequem auch die :hover Eigenschaften geprüft und bearbeitet werden.

Gutes hoover’n wünscht
Chefkoch

Responsive Joomla One-Page Templates – Eine Übersicht

One Page Portfolio WebsiteAuf der Suche nach einer Designidee für ein Kunden-Projekt bin ich bei den beliebten One-Page oder auch Single-Page Templates gelandet. Hierbei handelt es sich um (Joomla) Templates, bei denen ein Klick auf ein Menüpunkt nicht eine neue Seite lädt, sondern der eigentliche Inhalt runter scrollt und so in den Fokus des Betrachters gerät. Die Navigation erfolgt in der Regel erst vertikal und danach horizontal.

Aufgrund des Aufbaus dieser Template eignen sich diese Vorlagen am ehesten für Websites mit einer begrenzten Anzahl Seiten und der Präsentation von Portfolios. Dem ursprünglichen Wortsinn nach, handelt es sich bei einem Portfolio, um eine transportable Mappe, in der ein Künstler ausgewählte Werke zur Ansicht bereithält. Und genau das ist der Hauptverwendungszweck der Joomla Templates die ich im folgenden Artikel vorstellen möchte.

Template Gemeinsamkeiten:

Rapid PHP-Editor 2014 oder schneller als die Polizei erlaubt

Rapid PHP Editor 2014Wer kennt ihn noch meinen Lieblingseditor über viele Jahre: HomeSite, von der Firma Allaire. HomeSite war ein leistungsfähiger, übersichtlicher und leicht zu bedienender PHP/HTML-Editor der über viele sinnvolle Features und Funktionen verfügte. Nach Aufkäufen durch Macromedia, die wiederum von Adobe aufgekauft wurden, erschien im September 2003 mit der Version 5.5, die letzte Ausgabe.

Ruhe in Frieden geliebter HomeSite, Du warst lange ein treuer Begleiter. Aber 10 Jahre sind eine lange Zeit in der sich einiges getan hat.

Lange habe ich nach einer Alles-in-Einer-Softwarelösung für mein tägliches Programmieren in PHP, HTML, CSS und JavaScript gesucht, bis ich auf Rapid PHP-Editor von Blumentals Software gestoßen bin, den ich im folgenden Artikel vorstellen möchte.

Rapid PHP-Editor 2014

Nach der Installation kann bei einem einmaligen Einrichtungsdurchlauf das Erscheinungsbild und die Grundcharakteristik ausgewählt werden. Schon bei erstmaligen Aufruf findet man sich schnell zurecht und kann auf Entdeckungsreise gehen, denn zu entdecken gibt es vieles. Hier erst einmal die Haupt-Funktionen:

  • Schnelle Entwicklungsumgebung – wirklich flott.
  • Syntax-Hervorhebung für eine große Anzahl an Sprachen wie: HTML, CSS, JavaScript, PHP, XML, Perl, SQL, Apache.
    Rapid PHP Editor 2014 - Syntax-Highlighting
  • Integrierter FTP-Client für den Upload auf den Live-Server.
  • Erweitertes Suchen und Ersetzen in Ordner und Dateien auch mit Hilfe regulärer Ausdrücke.
  • Integriertes Debuggen und Validieren mit Hilfe von xDebug-PHP-Debugger auch in Echtzeit. Rechtschreibprüfung, W3-HTML- und CSS-Validierung, JSLint-JavaScript-Prüfung.
  • Unterstützung der Smarty-PHP-Template-Engine.
  • Code-Wiederverwendung mit Hilfe von einfach zu pflegenden Code-Bibliotheken.
  • Up-to-Date mit modernen Webstandards wie HTML5 und CSS3, inkl. Code Prefixer für max. Browser-Kompatibilität.
  • Integrierte Projekt-Verwaltung zum einfachen und bequemen Verwalten und hoch laden von Dateien und Verzeichnissen.
  • Sinnvolle Werkzeuge wie: Farbwähler, XRay zum anzeigen der CSS Struktur einer Seite, WinMerge zum vergleichen von Dateien, HTML-Tidy hilft HTML-Fehler zu erkennen und beseitigen. Rapid PHP-Editor 2014 oder schneller als die Polizei erlaubt weiterlesen

Joomla Template von TemplateMonster – Review und Gewinnspiel

Was sind Websites ohne ein ansprechendes Design und Layout? Wie im wahren Leben, so zählt auch in der Welt des Internets oft der erste Eindruck und den bestimmt nun mal maßgeblich das Look and Feel. Deshalb will ich heute ein Joomla Template von TemplateMonster vorstellen und im Anschluss gibt es drei Joomla Template zu gewinnen, die Ihr euch selbst aussuchen könnt. Dazu mehr weiter unten im Artikel.

Das Joomla Template im Überblick

TemplateMonsterBei dem Template mit der Nummer 43160, handelt es sich um ein Template für Joomla ab der Version 3.0, welches als Reise-Template designt wurde, für andere Zwecke natürlich ebenfalls verwendet werden kann. Es ist ein responsives Template, das bedeutet es verändert seine Breite, Aussehen und Bedienung, je nachdem welches Endgerät die Seite aufruft. Die folgenden Layout-Arten sind vorhanden:

Open Source CMS-Systeme im Vergleich

Für Unternehmen längst eine Selbstverständlichkeit, für private Personen oder Vereine und Institutionen oft vorhanden, ist ein Internetauftritt  heute schon lange kein Hexenwerk mehr. Was früher nur Nerds oder anderen lichtscheuen Kreaturen mit Programmiererfahrung oder wenigsten Kenntnissen in HTML vorenthalten war, hat sich dank moderner Content Management Systemen (CMS) zu einer Selbstverständlichkeit hin entwickelt.

Dank moderner Content Management Systemen lassen sich Inhalte, egal ob Texte, Dokumente, Bilder oder Videos so einfach bearbeiten und veröffentlichen wie am heimischen Computer mit Hilfe der Textverarbeitung oder dem Bildbearbeitungsprogramm.

CMS Vergleich: WordPress, Joomla!, TYPO3, Drupal

Doch wer die Wahl hat, hat auch die Qual. Mittlerweile ist die Zahl quelloffener CMS-Systeme so groß, dass ein Überblick nur schwer möglich ist. Die vier,  in diesem Artikel näher betrachteten, Content Management Systeme: WordPress, Joomla!, TYPO3 und Drupal bilden dabei die Spitzengruppe und werden hier deshalb näher untersucht. Open Source CMS-Systeme im Vergleich weiterlesen

Responsive Webdesign mit HTML5 und CSS3 – Ein Überblick

Responsives Webdesign - Beispiel Kroatien Reise Blog
Beispiel für responsives Webdesign

Herrschten noch vor wenigen Jahren Webseiten mit einem eher statischen Design und Layout vor, die auf eine maximale Breite von z.B. 1.024 x 768 ausgelegt waren, so hat sich dies in den letzten 1-2 Jahren durch die intensive Nutzung von Smartphones und Tablets grundlegend geändert.

Zu den bereits erwähnten Auflösungen für PC und Notebook kamen neue Auflösungen für Android und iPhone Smartphones sowie Tablets hinzu, die ein responsives Webdesign erfordern. Responsive Webdesign bedeutet in diesem Zusammenhang, dass die Website auf das Endgerät reagiert und die Inhalte entsprechend ausgibt.

Responsive Webdesign welches auf HTML5 und CSS3 basiert versucht mit den vier Techniken: flexibles Grid, flexible Bilder, flexibler Text und Mediaqueries diesem Trend gerecht zu werden. Responsive Webdesign mit HTML5 und CSS3 – Ein Überblick weiterlesen