Blog & News

News zu Referenzen, Tutorials, Kundenmeinungen oder brachenspezifische Nachrichten werden hier veröffentlicht. Wenn es die Zeit zulässt auch Infos zu Laravel und Machine Learning.

Kalorientabelle - Nährwerttabelle für Strengthfood entwickelt

11. 03. 2019 Webentwicklung

Im Kundenauftrag wurde eine Lebensmitteldatenbank mit 999 Lebensmittel umgesetzt. Als Basisdatensatz wurde die freie Lebensmitteldatenbank der Schweizer Nährwertdatenbank (Version 5.3) verwendet.

Direktlink zur Kalorientabelle / Nährwerttabelle bei Strengthfood.

Buchstaben vertauschen Generator

02. 11. 2018 Webentwicklung

Heute hatte ich Lust einen kleinen Algorithmus mit JavaScript zu schreiben, der es erlaubt, Buchstaben und Zahlen zu vertauschen, bzw. neue Wort-Zahlen-Kombinationen zu generieren. Manchmal benötige ich diesen Algorithmus um Zufallszahlen, Zufallswörter oder zufällige Wortphrasen zu erzeugen. Wozu sollte man Buchstaben oder Zahlen vertauschen wollen? Hier einige Beispiele...

Font Awesome wird in Firefox und Internet Explorer (IE) nicht angezeigt

14. 01. 2016 Webentwicklung

Font Awesome wird in Firefox und Internet Explorer (IE) nicht angezeigt. Nach einiger Recherche bei Google konnten wir ein Hack für dieses Problem finden und den Darstellungsfehler beheben. Damit Firefox und Internet Explorer (IE) Font Awesome anzeigen, kopieren Sie einfach folgende Anweisung in Ihre .htaccess auf der Hauptebene des Shops.

Cache während Gambio GX2 Entwicklung abschalten

Cache während Gambio GX2 und 3 Entwicklung, Layout und Webdesignen abschalten. Während der Entwicklung oder Anpassung eines Templates im Gambio GX2 System ist es teilweise nervig, immer wieder die Caches im Admin oder manuell in den Ordnern /cache und /templates_C leeren zu müssen. Es gibt eine einfache Lösungen, mit der man viel Zeit und Klicks sparen kann ;-)

4K Displays - Ultra HD stellt Web-Entwickler vor schwierige Herausforderungen

02. 06. 2015 Webdesign Webentwicklung

Die nächste revolutionäre Entwicklung in punkto Display Technologie bahnt sich an. Vielleicht ist es überraschend, dass diese Entwicklung nicht aus der Computerbranche vorangetrieben wird, sondern durch die Film- und Fernsehbranche ausgelöst wurde. Früher bestimmte der Fernseher Die Auflösung von Computermonitoren orientierte sich für lange Zeit an den Standards der Fernsehgeräte. Es gab keinen nennenswerten Unterschied zwischen den Auflösungen von Computermonitoren und TV-Geräten. Es war keine Seltenheit, dass die ersten Personal Computer mit Fernsehgeräten verbunden wurden, um an ihnen zu arbeiten oder zu spielen. Die Computer entwickelten sich jedoch schneller weiter und so wurden in der Folge Monitore mit höheren Auflösungen entwickelt. Die TV-Geräte zogen erst nach, als HDTV Standard wurde. Mittlerweile übertreffen jedoch die Computer-Monitore den HD-Standard locker. Das Retina Display des MacBook Pro Laptops präsentiert beispielsweise eine Auflösung von 2880 × 1800 Pixeln. Derzeit ist allerdings wieder der Fernseher eine Reihe und bringt uns die berüchtigte 4K-Bildschirmauflösung.

Die Tiefe der Hauptnavigation sollte nicht mehr als drei Ebenen enthalten

Das Interview stammt aus dem Webselling-Magazin, Ausgabe 4/13 Juli-August. Die Tiefe der Hauptnavigation sollte nicht mehr als drei Ebenen enthalten. Die Designagentur „Tempteria“ (www.tempteria.de) erzeugt unter anderem für Gambio individuelle Templates. Wir sprachen mit Zlatko Margeta, Inhaber der Designagentur www.tempteria.de, über seine Tipps zur Gestaltung von Onlineshops.

CSS @font-face für iPad, iPhone, Firefox und Chrome richtig einbetten

Oftmals hören wir von Kunden, dass die Einbettung einer eigenen Schriftart (Font) per CSS nicht richtig funktioniert. Meist ist die neue Schriftart (Font) im Internet Explorer sichtbar. Auf dem iPad, iPhone, Safari eher nicht. Je nach Browserversion, variiert die Funktion von @font-face. Wir möchten hier eine Methode aufzeigen, wie es mit allen Browsern funktioniert.

Die Anleitung richtet sich an "CSS-Anfänger" und ist deshalb so einfach wie möglich beschrieben.

Schritt: 1 Besuchen Sie http://www.fontsquirrel.com/tools/webfont-generator und laden dort Ihre gewünschte Schriftart (Font) hoch. Der Webfont-Generator macht Ihre Schrift für das Web startklar und generiert daraus mehrere Schriftformate, die für die Darstellung im Web benötigt werden. Bitte achten Sie auf die Lizenz der Schrift, ob Sie die Schrift für das Vorhaben nutzen dürfen.

Schritt: 2 Nach erfolgreichem Upload Ihrer Schirftart erscheint ein blauer Download-Button "DOWNLOAD YOUR KIT." Klicken Sie drauf und entpacken Sie nach dem Download das "KIT."

Schritt 3: Öffnen Sie den Ordner. Sie werden darin einige Dateien vorfinden, u.a. die Datei stylesheet.css. Öffnen Sie diese Datei und kopieren Sie den foglenden Inhalt in Ihre eigene CSS-Datei. Am besten an den Anfang Ihrer CSS-Datei:

@font-face { font-family: 'NamederSchriftart'; src:url('usermod/css/font/NamederSchriftart.eot'); src: url('usermod/css/font/NamederSchriftart.eot?#iefix') format('embedded-opentype'), url('usermod/css/font/NamederSchriftart.woff') format('woff'), url('usermod/css/font/NamederSchriftart.ttf') format('truetype'), url('usermod/css/font/NamederSchriftart.svg#NamederSchriftart') format('svg'); font-weight:bold; font-style: normal; }

Jetzt steht die Schriftart zu Verfügung und kann für alle Elemente wie Überschriften (H1 - H6), Absätze (p) etc. genutzt werden.

Schritt 4: Die verschiedenen Formate der Schriftart (Font), eot, woff, ttf, svg kopieren Sie in ein entsprechendes Verzeichnis in Ihrem Template. Wir haben es hier im Gambio-GX2-Template implementiert und deshalb folgendes Verzeichnis dafür verwendet: usermod/css/font/.

Schritt 5: Sie können z.B. nun die Überschrift "H2" oder Absätze "p" in Ihrer CSS-Datei mit der neuen Schriftart (Font) formatieren. Dies sieht dann so aus:

h2 { font-family: 'NamederSchriftart', Verdana, Geneva, sans-serif; font-size: 16px; text-transform: uppercase; }

...

p { font-family: 'NamederSchriftart', Verdana, Geneva, sans-serif; font-size: 16px; }

Die Schriftart hinter 'NamederSchriftart' wird dann ausgewählt, wenn 'NamederSchriftart' nicht zur Verfügung steht. Somit ist sichergestellt, dass Ihre Überschrift auch angezeigt wird, wenn 'NamederSchriftart' nicht zur Verfügung steht.

Schritt 6: Jetzt auf den gewünschten Browsern und Tablets und Smartphones wie iPad, iPhone, Safari, etc. testen.

Bugfixing: Sollten Sie die neue Schrift nicht sehen, prüfen Sie nochmals das Verzeichnis und die Schreibweise der Schriftart.

Alternative: Vor ca. 2 Jahren haben wir bereits über die Google Fonts API berichtet. www.tempteria.de/blog/fonts-mit-google-api/ Mittlerweile stehen sehr viel mehr Schriften zur Auswahl, die zudem einfach zu installieren sind. developers.google.com/fonts/?hl=de-DE&csw=1

Viel Spaß mit der neuen Schriftart!

Schöne Fonts mit Google Font API

Im Mai des vergangenen Jahres hat Google die sog. Google Font API veröffentlicht. Mit diesem Service ist es möglich, außergewöhnliche und schöne Schriften im Web darzustellen. Der User kann die Schriften sogar markieren und kopieren. Bei SiRF musste immer Flash geladen werden; dies ist hier nicht mehr der Fall. Die Schriften sind mittels CSS einfach einzubinden und zudem