CSS – Seite 6 – Homepage Anleitung

Gratis-Font Source Serif Pro von Adobe ohne Umlaute

Adobe hat jetzt seine hundertste Schrifttype vorgestellt und sie unter einer Open-Source-Lizenz verfügbar gemacht. Damit feiert der Hersteller offiziell 25 Jahre digitale Schriftarten. Die Schrift heißt Source Serif Pro. Source Serif Pro gibt es in den drei Schriftstärken Standard, Halbfett und Fett. Die neue Schrift kommt mit den wichtigsten Ligaturen und Ziffern sowohl im modernen als auch im alten Stil mit unterschiedlicher Höhe. Leider gibt es einen dicken Haken, der Source Serif Pro für deutsche Entwickler und Programmierer völlig uninteressant macht: Zumindest zunächst gibt es die kostenlose Schrift nur für das lateinische Alphabet – also ohne Umlaute.

GSL-Team2014-05-16T08:27:15+02:00Mai 16th, 2014|Allgemein, CSS, HTML|Kommentare deaktiviert

Neue Entwicklerwerkzeuge in der Auroraversion von Firefox

Googles Browser Chrome mit seinen Dev Tools ist unter Webentwicklern häufig als Browser der Wahl. Deshalb versuchen die Entwickler bei Firefox zur Freude der Ersteller von Internetseiten mit eigenen Werkzeugen den Abstand zu verkürzen und sich so für diese Nutzergruppe wieder stärker ins Gespräch zu bringen. In der Pre-Beta Aurora stehen nun einige neue Tools und Ergänzungen bereit, deren offizielle Auslieferung für Firefox 31 für den Juli dieses Jahres geplant ist. Dazu zählt unter anderem das überarbeitete Box-Model-Tab im Inspector, in dem man jetzt mit einem Doppelklick auf das gewünschte Element dessen Werte anpassen kann. Das neu eingebauten Eyedropper Tool im Color Picker des Inspectors nimmt jetzt außerdem die Farbe eines beliebigen Pixels einer Internetseite auf. Im Editor können Entwickler jetzt mehrere Bereiche gleichzeitig auswählen und die letzte Wahl auch wieder rückgängig machen. Zusätzlich gibt es dort nun auch Keybindings für Sublime.

GSL-Team2014-05-09T15:22:03+02:00Mai 9th, 2014|CSS, HTML, Javascript|Kommentare deaktiviert

Kostenloses HTML5-Tool Google Web Designer

Google hat im Oktober seinen kostenlosen Google Web Designer in einer ersten Betaversion veröffentlicht. Er erstellt zwar in der aktuellen Version hauptsächlich Bannerwerbung, ist auch ein gutes visuelles Werkzeug, mit dem sich Websites mithilfe grafischer Tools per Mausklick erstellen lassen. Nicht nur bei Anzeigen macht es Sinn, das proprietäre Flash von Adobe durch HTML5 zu ersetzen. Einer der deutlichen Vorteile von HTML5 ist, dass es anders als Flash auch unter iOS funktioniert. Weiterführende Informationen zum Google Web Designer gibt es eine Google+-Seite, ein Nutzerforum und eine Supportseite. – die helfen wirklich weiter.

GSL-Team2013-11-20T15:55:28+02:00November 20th, 2013|CSS, HTML, Javascript|Kommentare deaktiviert

Entwicklungsumgebung Netbeans 7.4 mit mehr HTML5 und JavaScript

Oracle hat nach einem Bericht von Heise die von vielen erwartete Open-Source-Entwicklungsumgebung NetBeans in der neuen Version 7.4 freigegeben. Mit dieser beliebten IDE arbeiten viele Webdesigner - ich übrigens auch. Im Zentrum der Neuerungen dieses Updates steht offensichtlich die mit der Vorgängerversion eingeführte Unterstützung für HTML5 und JavaScript. Die ursprünglich als Java-IDE entstandene Programmierumgebung unterstützt schon länger die Entwicklung mit anderen Programmiersprachen wie PHP, Ruby , C, C++ und Groovy. Die Unterstützung von HTML5 und JavaScript zeigt sich jetzt in einer überarbeiteten Einbindung von HTML5 in Java EE und PHP über Wizards und Auto-Code-Completion (automatische Codevervollständigung), in der neuen Editier-Unterstützung für die JavaScript-Frameworks Knockout.js und AngularJS sowie in der Auswahl des Ziel-Browsers inklusive der Mobilversionen für Android und iOS direkt aus dem Menü heraus. Darüber hinaus können Entwickler NetBeans 7.4 jetzt auch für das Erstellen von Cordova/PhoneGap-Anwendungen benutzen.

GSL-Team2013-10-21T09:17:21+02:00Oktober 21st, 2013|CSS, HTML, Javascript, PHP|Kommentare deaktiviert

Google Web Designer – ein kostenloses HTML5-Tool

Googles kostenloses Werkzeug Web Designer ist nicht nur für Werbetreibende geeignet. Es wurde eigentlich programmiert, um damit animierte HTML5-basierte Anzeigen zu erstellen, zu bearbeiten und zu veröffentlichen. Web Designer ist aber auch ein gutes visuelles Werkzeug, um Websites mithilfe grafischer Tools per Mausklick erstellen lassen. Nach der Produktseite lässt sich das Werkzeug neben Googles Werbeplattformen DoubleClick und AdMob auch für alle anderen Anzeigennetzwerke benutzen, ohne dass wieder neuer Code geschrieben werden muss. Es macht ja nicht nur bei Anzeigen Sinn, das Adobes Flash durch HTML5 zu ersetzen. Ein deutlicher Vorteile von HTML5 dabei ist, dass es anders als Flash auch unter Apples iOS funktioniert. Die meisten Android-Geräte unterstützen zwar Flash, aber Google will den Benutzern von Web Designer das Erstellen von Anzeigen so einfach wie möglich machen. Dazu gehört insbesondere, sie universell für die meisten verfügbaren Plattformen zu erzeugen. Weiterführende Informationen zu dem Tool, das soeben als erste Betaversion veröffentlicht wurde, gibt es eine Google+-Seite, ein Nutzerforum und eine Supportseite. – die helfen dem Interessierten weiter.

GSL-Team2013-10-01T20:31:44+02:00Oktober 1st, 2013|Allgemein, CSS, HTML, Javascript|Kommentare deaktiviert

Ein Unicode-Bug bringt iOS- und OS X-Apps zum Absturz

Die Anzeige einer einfachen Zeichenkette kann Apples iOS- und OS X-Anwendungen zum Absturz bringen. Das passiert zumindest mit dem Browser Safari unter OS X 10.8.4 und iOS 6.1.3, aber wahrscheinlich auch mit früheren Versionen und auch mit Apps wie Messages, iMessage und der iPhone-SMS-App. Nach einem Bericht von Ars Technica sieht das nach einem Rendering-Fehler in Apples CoreText-API zu handeln, die auch von WebCore verwendet wird. Die „tödlichen“ Schriftzeichen stammen allerdings aus dem arabischen Alphabet, so dass Entwickler von Apps in europäischen Sprachen damit vermutlich eher keine Probleme kriegen werden… Ars Technica konnte den Fehler außerdem in weiteren Anwendungen wie Limechat (IRC), Chrome und Adium nachvollziehen, die auch CoreText verwenden.

GSL-Team2013-09-01T14:04:45+02:00September 1st, 2013|CSS, HTML|Kommentare deaktiviert

Die Firefox 23 Beta bringt viel Neues

Mozilla hat gerade die Betaversion seines Browsers Firefox 23 veröffentlicht. Die neue Version nutzt jetzt die GPU, um Videos zu dekodieren, und hat auch einen neuen Netzwerk-Monitor spendiert bekommen. Mit Version 23 bekommt Firefox auch ein überarbeitetes Logo. Dabei hat man sich wohl an Apples neuem flachem Design orientiert, denn es sieht aus wie das bisherige Logo in einer weichgespülten Variante. Die Optionen “Bilder immer laden”, “Javascript aktivieren” und “Tableiste immer zeigen” wurden aus den Einstellungen entfernt. Es ist also nicht mehr einfach möglich, die Ausführung von Javascript oder das automatische Laden von Bildern zu deaktivieren. Das könnte einige Benutzer verärgern Das HTML-Tag “blink” und die CSS-Angabe “text-decoration: blink;” werden von Firefox Version 23 nicht mehr unterstützt – darüber wird sich wohl niemand beschweren… Firefox 23 besitzt jetzt einen Share-Button und unterstützt damit das von Mozilla entwickelte Share-API. So will Mozilla die diversen Share-Buttons auf den Webseiten überflüssig machen. Damit ist Facebook dann auch das erste soziale Netz, das Firefox mit seinem Share-Button unterstützt. Für so manchen ist das die verzichtbarste Neuerung beim Firefox 23…

GSL-Team2013-06-29T11:42:12+02:00Juni 29th, 2013|Allgemein, CSS, HTML, Javascript|Kommentare deaktiviert

Blackberry-Chef Thorsten Heins macht den Auguren

Der deutsche Manager Thorsten Heins übernahm im Januar ein vollständig heruntergekommenes Unternehmen von den Gründern Jim Balsillie und Mike Lazaridis. Research in Motion (RIM) steckte (und steckt auch noch) tief in den roten Zahlen und machte nur noch schlimmere Schlagzeilen bei den Eskapaden seiner Manager, die solange volltrunken das Air Canada-Flugpersonal ihrer Maschinen nach China drangsalierten, bis der Flieger umkehrte und die beiden Herren rauswarf. Ausgerechnet Blackberry Boss Heins versucht jetzt, was sein Laden mit einem Produkt nicht geschafft hat, auch allen (erfolgreichen) anderen Herstellern abzusprechen: Er sagte die boomenden Tablet-Computer einfach tot! Dabei lag das Wachstum dort im letzten Quartal bei ca. 150%! Deshalb scheint es wohl nötig, Herrn Heins einen Spiegel seines Unternehmens hinzuhalten. Das hat sich nämlich wegen unangemessen hochtrabender Ziele, die sich auch in seinem Namen “Research in Motion (RIM)” widerspiegelten und diametral entgegengesetztem Handeln auf den Märkten im Grunde kurz vor seinem Tod nochmal aufgerappelt und versucht, sich mit seinem neuen BB10-Betriebssystem und einer Änderung seines Namens in “Blackberry” an den eigenen Haaren aus dem Sumpf zu ziehen. Und kaum neu mit einem unverfänglichen Namen versehen, erklären die Oberschlaumeier von Blackberry jetzt den anderen Herstellern den Markt – das nenne ich Chuzpe. “Ich glaube, in fünf Jahren wird es keinen Grund [...]

GSL-Team2013-05-03T08:57:26+02:00Mai 3rd, 2013|Allgemein, CSS|Kommentare deaktiviert

Die Browsertest-Plattform modern.IE jetzt auch in Deutsch

Wer professionell Internetseiten erstellt, kommt an einem Tool wie der Browsertest-Plattform modern.IE von Microsoft nicht vorbei. Mit diesem Dienst stellt Microsoft Web-Entwicklern eine Testsuite zur Verfügung, mit der sie ihre Webseiten auf verschiedenen Versionen des Internet Explorer und unter verschiedenen Windows-Versionen testen können. Jetzt ist das Portal auch in Deutsch und 17 weiteren Sprachen und mit neuen Features verfügbar. Neu dazugekommen sind virtuelle Maschinen für IE10 auf Windows 7 und IE8 auf Windows XP. Es soll nun auch möglich sein, den Code von Seiten hinter einer Firewall zu bearbeiten. Zusätzlich stellt modern.IE neben den virtuellen Maschinen für Tests auch reichlich Dokumentation und Tutorials für Web-Entwickler bereit.

GSL-Team2013-04-03T20:47:06+02:00April 3rd, 2013|CSS, HTML|Kommentare deaktiviert

Der Einsatz von Lightbox 2 für Bilder und Galerien

Sie kennen das Javascript-Programm Lightbox 2 sicher schon von diversen Seiten im Netz. Gerade, wenn mehrere Bilder von Produktfotos bis zu Partnerseiten-Fotos angezeigt werden, wird die Seite dunkel geschaltet und ein Fenster mit dem ersten Bild als Overlay darüber gelegt. Die Lightbox 2 gibt es kostenlos im Internet, aktuell ist die Version Lightbox 2.51. Nach dem Download wird das Paket entpackt. Für einen ersten Test kann man das Verzeichnis lightbox komplett auf den Internetserver verschieben. Mit Aufruf der index.html in diesem Verzeichnis bekommt man die Demobeispiele mit Einbindungsanleitung auf den Bildschirm. Um die Lightbox im eigenen Projekt zu nutzen, gibt man im Header der Seite die Javascript-Dateien und die Style-Datei an: <link href="css/lightbox.css" rel="stylesheet" /> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/lightbox.js"></script> Die Lightbox wird durch das rel-Attribut angesteuert. Mit der Zeile <a href="images/bild1.jpg" rel="lightbox" title="my caption">Bild 1</a> wird ein einzelnes Bild im Lightbox-Overlay angezeigt, mit den Zeilen <a href="images/bild1.jpg" rel="lightbox[roadtrip]">Bild 1</a> <a href="images/bild2.jpg" rel="lightbox[roadtrip]">Bild 2</a> <a href="images/bild3.jpg" rel="lightbox[roadtrip]">Bild 3</a> bringt man alle drei Bilder als Galerie ins Lightbox-Overlay. Beachten Sie aber beim Einbinden in Ihr Projekt die korrekten Pfade für die Javascript-Dateien, die CSS-Datei und auch für die Bilder und passen Sie die wenn nötig entsprechend an.

GSL-Team2013-03-28T10:14:40+02:00März 28th, 2013|Bildbearbeitung, CSS, HTML, Javascript|Kommentare deaktiviert