HTML – Seite 16 – Homepage Anleitung

Der Flash zu HTML5-Konverter Swiffy von Google zieht um

Kennen Sie Swiffy schon? Es ist ein Online-Werkzeug, mit dem man swf-Dateien (Flash) in HTML5-Dateien umwandeln kann. Mit Swiffy kann man sehr einfach Flash-Content auf seine mobilen Geräte bringen, insbesondere auch die iPhones und iPads von Apple, die von Haus aus Flash nicht unterstützen. So geht das aufwendig gemachte Intro nicht für die mobile Internetwelt verloren… Swiffy kann noch nicht immer aus allen Flash-Inhalten korrekte HTML5-Ergebnisse erzeugen, das ist der Tatsache geschuldet, dass das Tool noch sehr jung ist und noch Einiges lernen muss. Also am besten einfach ausprobieren. In Webkit-Browsern wie Safari oder Chrome wird der Output korrekt dargestellt. Im Zusammenhang mit dem allgemeinen "Frühjahrsputz im Herbst" bei Google soll Swiffy in Zukunft unter einer anderen Adresse zu finden sein. Ein entsprechender Hinweis findet sich auf der Swiffy-Website.

GSL-Team2011-09-05T07:53:30+02:00September 5th, 2011|HTML|Kommentare deaktiviert

Chrome Frame als stabile „non admin“-Version verfügbar

Chrome Frame ist eine Erweiterung besonders für ältere Microsoft-Browser, die moderne Technologien wie Javascript oder HTML5 in weniger fähige Browser integriert und dabei auch die Rendering-Unit des Google-Browsers mitbringt. Die stabile Version von Chrome Frame gibt es für die Internet Explorer-Versionen 6 bis 9. Im Chrome-Blog wird beschrieben, wie man Chrome Frame in andere Browser integriert. Besonders nützlich ist Chrome Frame für Umgebungen, in denen keine anderen Browser als die älteren von Microsoft erlaubt sind. Das besondere an dem neuen Update ist, dass es auch installiert werden kann, wenn der Benutzer keine Admin-Rechte auf dem Computer hat. Wer für Kunden mit einer solchen IT-Umgebung moderne Internetseiten entwickelt, hat erst mit Chrome Frame eine reelle Chance.

GSL-Team2011-09-01T08:04:39+02:00September 1st, 2011|Allgemein, HTML|Kommentare deaktiviert

Aufrufe ohne www. auf www.meineadresse.de umleiten

Bei Google führt doppelter Content unter Umständen zu einem schlechteren Ranking und damit zu einer ungünstigeren Positionierung in den Ergebnislisten. Um sich nicht selbst ein Beinchen zu stellen, sollte man Aufrufe seiner Website mit oder ohne www. so verarbeiten, dass letztlich immer die Version mit www. aufgerufen wird. Das lässt sich mit wenig Aufwand in der .htaccess-Datei erzwingen, und zwar mit folgendem Code: RewriteEngine On RewriteCond %{HTTP_HOST} ^ meineadresse \.de$ [NC] RewriteRule ^(.*)$ http://www.meineadresse.de/$1 [R=301,L] Das Code-Beispiel bezieht sich auf die Domainadresse meineadresse.de. Passen Sie es bitte an Ihre Domainadresse an. Am besten schreibt man den Code am Anfang in die .htaccess-Datei. Sollte noch keine existieren, erzeugt man sie im Wurzelverzeichnis der Internetpräsenz.

GSL-Team2011-08-22T08:48:28+02:00August 22nd, 2011|HTML|Kommentare deaktiviert

Der neue Firefox 6 steht bereit

Schon am Wochenende konnte man Firefox 6.0 von der Mozilla-FTP-Site downloaden. Die augenfälligste kleine Neuerung des neuen Browsers ist die Hervorhebung der Domain in der URL-Zeile durch Fettschrift. Firefox bringt viel Neues wie die HTML5-Funktion Progress zur Erzeugung von Echtzeit-Fortschrittsanzeigen oder das Track-Element für ergänzende Textinfos zu Audio- oder Videoinhalten, die über eine Zeitsteuerung eingeblendet werden. Für Entwickler von Internetseiten dürfte das integrierte Scratchpad das Highlight der Version sein. Damit lassen sich auf sehr einfache Art und Weise Javascript-Programme im Browser testen. Bei Antennasoft.net kann man sehen, wie das funktioniert und was man damit alles machen kann.

GSL-Team2011-08-15T08:08:06+02:00August 15th, 2011|HTML, Javascript|Kommentare deaktiviert

Weniger Klassen machen HTML- und CSS-Dateien übersichtlich

Wer ein kleines Projekt mit CSS beginnt, legt häufig Klassen an, wie er sie gerade braucht. Da findet man dann in der CSS-Datei solche Konstrukte: .h1rot { color=#933 usw. } .h2rot { color=#933 usw. } .prot{ color=#339 usw. } Und es werden immer mehr Klassen, die die HTML-Datei immer unübersichtlicher machen: <div> <h1 class="h1rot">Überschrift 1</h1> <h2 class="h2rot">Überschrift 2</h2> <p class="prot"> Hier steht der Inhalt </p> </div> Dagegen kann man etwas tun. Mit einem gut geschriebenen CSS kann man sich viele Klassen sparen: .rot p { color=#933 usw. } .rot h1 { color=#933 usw. } .rot h2 { color=#933 usw. } In diesem Beispiel wird nur eine Klasse, nämlich rot, benutzt und die unterschiedlichen Kindelemente wie p, h1 oder h2 werden über ihre Elternelemente erreicht. Der HTML-Code sieht dann so wesentlich übersichtlicher aus: <div class="rot"> <h1>Überschrift 1</h1> <h2>Überschrift 2</h2> <p> Hier steht der Inhalt </p> </div>

GSL-Team2011-08-11T08:50:52+02:00August 11th, 2011|HTML|Kommentare deaktiviert

HTML: Wie binde ich ein Favicon in meine Seite ein?

Favicons sind die kleinen Grafiken, die im Browser vor der URL angezeigt werden, und zwar sowohl vor dem URL-Eingabefeld als auch in den Favoritenlisten. Daher haben diese kleinen Grafiken auch ihren Namen bekommen. Erstellen können Sie Ihr Favicon mit einem Grafikprogramm, die meisten beherrschen den Typ .ICO. Bei Photoshop gibt es auch ein spezielles Plugin für Favicons. Die Einbindung des Favicons für eine Seite geschieht mit einem Link im Header der Seite: <link rel=”shortcut icon” type=”image/x-icon” href=”favicon.ico”> Für unser Beispiel muss das Favicon den Dateinamen favicon.ico haben und im Wurzelverzeichnis der Internetpräsenz liegen. Andere Namen oder Speicherorte sind möglich, dann muss der Link entsprechend angepasst werden.

GSL-Team2011-08-08T09:39:27+02:00August 8th, 2011|HTML|Kommentare deaktiviert

Email versenden mit HTML

Auch ohne PHP oder gar spezialisierte Email-Klassen kann man ganz einfach eine Email mit dem mailto-Kommando versenden. Dazu reicht HTML als Basis völlig aus. Das funktioniert bei allen Benutzern, auf deren Computern ein korrekt installierter Email-Client vorhanden ist, denn das mailto-Kommando benutzt den auf dem jeweiligen System installierten aktiven Client für den Versand der Email. So wird das Kommando eingebunden: <a href=mailto:meineadresse@meinedomain.de> Email an mich</a> Will man die Mail an mehrere Empfänger senden, gibt man mehrere Emailadressen an, die jeweils durch ein Semikolon getrennt werden. <a href=mailto:meineadresse@meinedomain.de; nocheine@meineddomain.de> Email an mich</a> Es gibt auch noch weitere Möglichkeiten für die mailto-Anweisung, eine komplette Übersicht zeigt SelfHTML. Man sollte sich darüber klar sein, dass Adressensammler sich sehr über solche offenen Emailadressen in HTML-Seiten freuen…

GSL-Team2011-07-18T08:18:02+02:00Juli 18th, 2011|Allgemein, HTML|2 Kommentare

Firefox 6 Beta und Firefox 7 Aurora im Download

Seit ein paar Tagen kann man jetzt Firefox 6 als Beta bei Mozilla downloaden. Besonders interessant bei der neuen Version ist das neue Berechtigungssystem, mit dem man jede Webseite einzeln konfigurieren kann. Das schließt das Verbot der Speicherung von Cookies, Passwörtern und Lokalisierungsinformationen und auch Popup-Fenster ein. Die HTML5-Funktionen wurden auch stark erweitert. Die Final von Firefox 6 soll Mitte August fertig sein. Auch Firefox 7 kann man schon als Frühversion im Aurora-Kanal downloaden. Diese frühe Vorschau legt einen besonders schnellen Programmstart hin und zeigt eine deutlich Beschleunigung bei Javascript. Die neue Grafikschnittstelle Azure stellt unter Windows 7 die Inhalte der Canvas-Tags dar und ist dabei bis zu zehnmal schneller.

GSL-Team2011-07-11T07:47:46+02:00Juli 11th, 2011|Allgemein, HTML|Kommentare deaktiviert

Inhalte verbergen und zeigen mit Javascript

Sie kennen das sicher von modernen Webseiten: Man sieht nur, was nötig ist, braucht man mehr, werden verborgene Seitenteile auf Knopfdruck sichtbar. Ob es das elektronische Fernsehprogramm ist, bei dem man Zeitbereiche auf- und zuklicken kann oder die "abweichende Versandadresse" bei einem Online-Kauf, deren Eingabefelder auf einen Klick hin angezeigt werden, ohne dass die Seite neu geladen wird. Wie das geht? Natürlich mit Javascript, der Sprache, die im Browser Ihres PCs läuft und nicht auf dem Server. Um zum Beispiel eine von der Rechnungsadresse abweichende Lieferadresse anzugeben, werden die Eingabefelder des Formulars für diese Versandadresse in ein DIV-Element eingetragen, das zunächst verborgen ist: <div style="display:none" id="versandadresse" > Direkt vor diesem DIV gibt es ein Feld des gleichen Formulars, das abfragt, ob eine abweichende Versandadresse genommen werden soll: Abweichende Versandadresse eingeben? <input type="checkbox" name="vadresse" value="N" onClick="versand()"> Wenn man die Checkbox anklickt, wird die Javascript-Funktion versand() aufgerufen, die im Header so eingetragen ist: <script language=javascript> function versand() { if ( document.daten.vadresse.checked == true ) { document.getElementById("versandadresse").style.display = "inline"; } else { document.getElementById("versandadresse").style.display = "none"; } } </script> Sie können die zusätzlichen Eingabefelder jederzeit sichtbar oder unsichtbar schalten. Schon gemachte Eingaben bleiben erhalten. Die Eingaben werden auch bei unsichtbaren Feldern mit den anderen Formularfeldern zusammen zur Auswertung übertragen.

GSL-Team2011-07-07T09:16:11+02:00Juli 7th, 2011|HTML, Javascript|Kommentare deaktiviert

Flash-Dateien nach HTML 5 konvertieren mit Google’s Swiffy

Interessante Neuigkeit für Webdesigner, die schon HTML 5 einsetzen: Bei Google gibt es jetzt ein Tool mit dem Namen Swiffy, das Flash-Dateien in HTML 5 umwandelt. Diese Dateien kann man nach der Umwandlung auch auf Geräten anzeigen, die Flash nicht unterstützen wie Apple Tablets und Smartphones. Im Google Code Blog erklärt der Swiffy Product Manager Marcel Gordon, dass es sich um eine frühe Vorabversion handelt, die noch nicht alle Flash-Inhalte übersetzen kann. Bei Anzeigenbannern und Animationen klappt das aber schon recht gut, man findet einige Beispiele auf der Swiffy-Webseite. Die mit Swiffy erzeugten Dateien sind kaum größer als die Flash-Vorlagen, Google nennt da 10 %. Swiffy verarbeitet SWF-Dateien als Quelle. Wenn Sie auch FLA-Dateien konvertieren möchten, schauen Sie sich das Tool Wallaby von Adobe an.

GSL-Team2011-06-30T08:19:07+02:00Juni 30th, 2011|HTML|2 Kommentare