CSS – Seite 2 – Homepage Anleitung

Tablets treiben Umsätze in Westeuropa

Um mehr als 350 % steigerten die IT-Händler in den ersten beiden Monaten des Jahres nach Zahlen von Context den Umsatz mit Tablets im Vergleich zum Vorjahreszeitraum. Auch beim Erstellen von Internetseiten kommt man an den Smartphones und Tablets nicht mehr vorbei. Und das bedeutet, dass es mit einer HTML-Seite für alle nicht mehr geht – man muss schon Alternativen anbieten, die die Inhalte auf unter 5 Zoll großen Smartphone-Bildschirmen oder Tabletflächen mit 6-12 Zoll Diagonale angepasst anzeigen. Über das „media“-Attribut lassen sich verschiedene CSS-Dateien für die unterschiedlichsten Bildschirmgrößen einbinden. Im nachstehenden Beispiel sehen Sie die Einbindung von zwei verschiedenen Stylesheet-Dateien für Normalgeräte und Smartphones. <link rel="stylesheet" media="screen" href="pc.css"> <link rel="stylesheet" media="handheld" href="smarty.css">

GSL-Team2013-03-25T13:03:49+02:00März 25th, 2013|HTML|Kommentare deaktiviert

Firefox 20 Beta mit Privatmodus für einzelne Fenster

Nahezu zwei Jahre haben die Entwickler bei Mozilla die Funktion “Privates Surfen” im Browser Firefox überarbeitet. Dort lief der Privatmodus bisher immer nur für alle offenen Fenster. Wer also ein Fenster im “privaten” Modus betreiben wollte, musste vorher die Browser-Session mit allen offenen Fenstern beenden und den Browser wieder neu starten. Der neue Code war zunächst in den aktuellen “Nightly Builds” getestet worden und ist nun in die reguläre Beta-Version Firefox 20 übernommen worden. Der Downloadmanager von Firefox 20 wurde ebenfalls stark überarbeitet und zeigt nun den Fortschritt der Downloads direkt in der Firefox-Toolbar an statt in einem eigenen Fenster. Neu hinzugekommen ist in Firefox 20 auch das API getUserMedia, über das Web-Apps auf Webcam und Mikrofon des Rechners zugreifen können – das ist die erste Unterstützung von WebRTC direkt im Browser. Darüber hinaus gibt es reichlich HTML5-Verbesserungen: die CSS Flexbox zur Anpassung an verschiedene Bildschirmgrößen ist für Entwickler genauso hilfreich wie die Webkonsole, der Debugger, der Inspector und auch der Style-Editor. Neu in Firefox 20 sind auch die Canvas-Blendmodi.

GSL-Team2013-02-25T00:26:06+02:00Februar 25th, 2013|Allgemein, CSS, HTML, Javascript|Kommentare deaktiviert

NetBeans 7.3 ist da!

Gerade wurde die neue Version 7.3 der quelloffenen Entwicklungsumgebung NetBeans von Oracle veröffentlicht. Viele Programmierer und Ersteller von Internetseiten nutzen diese IDE für PHP oder C++, aber hauptsächlich wird sie als Java-IDE auch für Java verwendet. Die Verbesserungen sind besonders in den Bereichen HTML5, JavaScript und CSS zu finden, so zum Beispiel der neue JavaScript-Editor und -Debugger. Mehr Details zu NetBeans 7.3 in Deutsch finden Sie bei Heise.

GSL-Team2013-02-22T23:14:16+02:00Februar 22nd, 2013|CSS, HTML, Javascript, PHP|Kommentare deaktiviert

Relative Schriftgröße mit em-Angaben

Nicht nur bei Randmenüs können unschöne Dinge passieren, wenn ein Benutzer die Schriftgröße in seinem Browser verändert. Mit relativen Style-Angaben skalieren alle Texte mit der Schriftgröße und behalten ihre Proportionen. Dadurch werden die Texte nicht umgebrochen und sie fallen auch nicht „aus dem Rahmen“. Die em-Angabe bezeichnet die relative Gesamthöhe eines Fonts mit Leerräumen und bezieht sich auf die Schriftgröße des Elternelements. <div style="font-size:21px;“> (21px absolut als Elternelement) <div style="font-size:0.9em;"> (90% -> 18px) <div style="font-size:0.9em;"> (90% -> 16px) </div> </div> </div> An der Ausgabe der drei verschachtelten DIV-Container des Beispiels erkennt man recht gut, wie sich die relative Änderung des zweiten und dritten DIV-Containers auf die Darstellung auswirkt: (21px absolut als Elternelement) (90% entspricht 18px) (90% entspricht 16px)

GSL-Team2012-11-15T11:56:08+02:00November 15th, 2012|CSS, HTML|Kommentare deaktiviert

Das W3C bringt Grobentwurf für Aufzählungszeichen

Das W3C hat einen ersten Grobentwurf der CSS Counter Styles für CSS3 vorgestellt. Darin wird festgelegt, wie Ersteller von Internetseiten eigene Zeichenfolgen zur Verwendung in der CSS-Eigenschaft list-style und in list-style-type festlegen können. Die dazu nötige Regel @counter-style enthält die Angaben system, symbols und suffix, wobei system die Verarbeitungsweise, symbols das oder die Aufzählungszeichen und suffix ggfs. nachfolgende Zeichen enthält. Im ersten Beispiel wird ein kleines o mit nachfolgendem Leerzeichen vor jedem Item ausgegeben: @counter-style kreis { system: cyclic; symbols: o; suffix: ''; } Das Ergebnis sieht dann so aus: o eins o zwei o drei Im zweiten Beispiel ist die Verarbeitungsweise anders (symbolic): @counter-style fussnote { system: symbolic; symbols: *; suffix: ''; } Das führt dann zu folgender Liste: *. eins **. zwei ***. drei

GSL-Team2012-10-10T21:20:26+02:00Oktober 10th, 2012|CSS|Kommentare deaktiviert

Der kostenlose Programm-Editor Brackets von Adobe
Der kostenlose Programm-Editor Brackets von Adobe

Allgemein, Webwerkzeuge

Der kostenlose Programm-Editor Brackets von Adobe

Eigentlich hat Adobe seinen quelloffenen Programm-Editor für Entwickler von Internetseiten schon mehrfach auf diversen Veranstaltungen vorgestellt. Der Code dazu war auch schon länger auf GitHub verfügbar. Allerdings wurde Brackets bisher von Adobe nicht wirklich gepusht. Das hat sich jetzt geändert. Vermutlich ist die aktuelle Version inzwischen so stabil und funktionell, dass Adobe den Editor jetzt intensiv bekannt macht, obwohl die Entwicklung noch nicht ganz abgeschlossen ist. Brackets ist ein schlanker Editor, der selbst komplett in HTML, CSS und Javascript erstellt wurde. Er unterstützt Inline-Editing, Haltepunkte und die Liveanbindung an den Google-Browser Chrome. Ersteller von Internetseiten können beispielsweise Änderungen im CSS bei einer Seite schnell im Browser überprüfen. Es ist auch eine Version geplant, die direkt im Browser läuft.

Support-Team2012-06-26T09:42:15+02:00Juni 26th, 2012|Allgemein, Webwerkzeuge|Kommentare deaktiviert

Adobe mit neuen CSS-Spezifikationen
Adobe mit neuen CSS-Spezifikationen

Allgemein, Webwerkzeuge

Adobe mit neuen CSS-Spezifikationen

Wer es bisher noch nicht geglaubt hat, dass Adobe sich vom hauseigenen Flash verabschiedet und auf HTML5 und CSS3 umsteigt, sollte sich den Vorschlag zur Standardisierung von Bildmanipulationen in Cascading Style Sheets (CSS) anschauen, den Adobe dem World Wide Web-Konsortium (W3C) eingereicht hat. Unter der Bezeichnung "Compositing and Blending 1.0" sind die Funktionen zusammengefasst, die die Bearbeitung von Grafiken direkt in CSS erlauben. Insbesondere enthält der Entwurf eine CSS-Eigenschaft namens "blend-mode", die insgesamt 17 Werte wie normal, multiply, overlay, color-burn, soft-light und andere haben kann. Diese Werte kennt so mancher aus Photoshop, Flash und anderen Adobe-Programmen. Das Bild zeigt, wie im Modus "normal" (obere Reihe) die beiden Bilder nur übereinander gelegt werden, während sie im Modus "overlay" (untere Reihe) kombiniert werden. Weiter Informationen dazu finden Sie auch in Adobe' s Web Platform Team Blog.

Support-Team2012-04-11T08:37:25+02:00April 11th, 2012|Allgemein, Webwerkzeuge|Kommentare deaktiviert

HTTP 2.0 sorgt in Zukunft für schnellere Internetseiten

Es ist schon mehr als 20 Jahre her, dass Tim Berners-Lee mit seinem Team das Internetprotokoll HTTP entwickelt hat. Dies Protokoll legt fest, wie der Browser eine Internetseite mit ihren Komponenten (HTML, CSS, Javascript) anfordert und wie der Server darauf reagiert. Bei einem Meeting in Paris wurde jetzt die Entwicklung der neuen Version des Protokolls HTTP von der Internet Engineering Task Force (IETF) gestartet. Es gibt schon vier Vorschläge, von denen die bekanntesten wohl "SPDY" von Google und "http Speed+Mobility" von Microsoft sind. Diese zeigen teilweise Überschneidungen, teilweise auch Unterschiede. So hätte Google gerne Verschlüsselung als Normalfall, bei Microsoft's Vorschlag ist es nur eine Option. SPDY gibt es ja schon in Googles Browser Chrome und in Amazon's Silk. Auch Firefox wird SPDY bald unterstützen. Serverseitig nutzen schon Google, Amazon und Twitter SPDY.

GSL-Team2012-04-02T17:56:24+02:00April 2nd, 2012|HTML|Kommentare deaktiviert

Sicherheitslücken in Google Chrome 17 geschlossen

Gestern hat Google ein Sicherheitsupdate für Chrome 17 herausgebracht, mit dem neun Sicherheitslücken in der Windows-, Mac OS X- und Linux-Version geschlossen werden. Auch das Plugin Chrome Frame, mit dem sich die Fähigkeiten von Chrome im HTML5- und Javascript-Bereich auch in älteren Microsoft Browsern (Internet Explorer 6,7,8,9) unter Windows XP, Vista und 7 nutzen lassen, war von den Problemen betroffen. Fünf der neun Sicherheitsproblem bezeichnet Google als "hoch riskant". Darüber können Angreifer Schadcodeauf den Rechner bringen und ausführen. Den Versionshinweisen kann man entnehmen, dass mit dem Update auch Probleme mit flashbasierten Spielen behoben werden, Speicherfehler bei Web GL Canvas und Probleme mit iFrames und CSS behoben. Darüber freuen sich besonders Web-Entwickler und Ersteller von Internetseiten, die diese neueren Funktionen schon nutzen. Für das Auffinden der mit diesem Sicherheitsupdate geschlossenen Lücken hat Google den Entdeckern diesmal insgesamt 5.500 Prämie gezahlt.

GSL-Team2012-03-22T11:11:58+02:00März 22nd, 2012|HTML, Javascript|Kommentare deaktiviert

Webbasierter Cloud-Editor ACE 0.2.0 mit neuen Sprachen

ACE ist ein webbasierter Programmeditor mit einem Funktionsumfang, der einem normalen Editor schon ziemlich nahe kommt. Es ist ein Nachfolge-Projekt von Mozilla Bespin. Die neue Version 0.2.0 bringt eine vertikal oder horizontal geteilte Ansicht des Editors, Code-Folding und einen Syntax-Check während der Eingabe. An Sprachen werden aktuell PHP, Java, Javascript, Ruby, C++, Python, HTML und CSS unterstützt. In Arbeit ist die Sprachunterstützung für Scala, C#, Perl, Groovy und JSON. Der Cloud-Editor ACE ist komplett in JavaScript geschrieben. Weitere Informationen und einen Download-Link findet man auf der ACE-Homepage.

GSL-Team2011-10-10T08:25:02+02:00Oktober 10th, 2011|HTML, Javascript, PHP|Kommentare deaktiviert