HTML – Seite 12 – Homepage Anleitung

HTML 5: Mozilla und Telefonica investieren in everything.me

Das israelische Startup everything.me gibt seinen Anwendern vom Smartphone aus Zugriff auf Cloud-Apps, die wie native Apps auf dem Schlaufon angezeigt werden. Das Unternehmen suchte eine Anlauffinanzierung und bekam jetzt 25 Millionen Dollar von bekannten, großen Firmen, darunter die O2-Mutter Telefonica und Mozilla. Es geht eigentlich darum, die Möglichkeiten des Internet auch vollständig auf den Mobilgeräten zu nutzen, und der Schlüssel dazu ist HTML 5. Und hier hat das israelische Startup einen Schatz an Knowhow, was auch die HTML 5-basierte Mobilplattform von everything.me. Das zeigt, wie wichtig im Zeitalter von Smartphones und Tablets die Zielgruppe der mobilen Surfer geworden ist. Nicht nur ein Großkonzern, sondern jeder, der gerade eine neue Internetseite für sein Unternehmen plant, tut gut daran, auf die neue HTML5- und CSS3-Technologie umzuschalten.

GSL-Team2012-11-30T15:35:15+02:00November 30th, 2012|CSS, HTML|Kommentare deaktiviert

Mozilla mit HTML5-Flashplayer Shumway

Mit dem HTML5-Flashplayer Shumway will Mozilla das Web offener machen und Flash auch auf mobilen Plattformen wie iOS ermöglichen. Wenn das klappt, soll Shumway in den Browser Firefox integriert werden. Anders als native Lösungen wie Gnash oder Lightspark basiert Shumway nur auf Webtochnologien . Wer Shumway schon mal testen möchte, braucht dazu aber die Beta von Firefox 17 – mit der 16er Version läßt sich der HTML5-Flashplayer nicht installieren. Der Quellcode von Shumway steht über Github zur Verfügung.

GSL-Team2012-11-17T10:18:47+02:00November 17th, 2012|HTML|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

Finger weg von meiner Grafik

Mit reinem HTML kann man Zeitgenossen, die gerne Grafiken aus fremden Seiten übernehmen, das Leben schwer machen. Das geht relativ einfach zu machen. In unserem Beispiel wird die Grafik (grafik.gif) als Hintergrund in eine Tabelle eingebunden und im Vordergrund des einzigen Tabellenfeldes eine leere, transparente Grafik (blind.gif) eingesetzt. Optisch sieht das Ergebnis aus, als sei die Grafik normal eingebunden. Wenn ein Besucher aber die Grafik abspeichern möchte, bekommt er immer nur die Leergrafik blind.gif. Der HTML-Code dazu lautet: <table width="200" height="140" border="0" background="grafik.gif"> <tr><td><img alt="Hol dir den Tee…" width="200" height="140" src="blind.gif"></td></tr></table> Einen Seitenersteller oder Programmierer schreckt diese Methode sicher nicht dauerhaft ab, der schaut in den Quellcode und klaut dann das Bild. Aber gegen Gelegenheitstäter funktioniert die Sicherung recht gut.

GSL-Team2012-11-15T11:25:32+02:00November 13th, 2012|Allgemein, HTML|Kommentare deaktiviert

Neuer Zeitplan und Funktionsumfang für HTML5

Auf Anforderung des W3C hat die HTML-Arbeitsgruppe jetzt einen Plan vorgelegt, nach dem HTML5 realistisch bis 2014 fertig sein kann und diesen zur Diskussion gestellt. Denn um das Ziel bis 2014 zu erreichen, werden wohl einige der Neuerungen gestrichen werden müssen. Deshalb enthält der Plan auch gleich HTML5.1, das danach 2016 fertig sein soll. Die HTML-Arbeitsgruppe wird einige Funktionen aus dem HTML5-Entwurf entfernen und separat als Erweiterungen bearbeiten. Wenn die dann rechtzeitig fertig werden, kommen sie noch 2014 in HTML5, ansonsten 2016 in HTML5.1. Der aktuelle Status von HTML berichtet noch 10 ungelöste Probleme, 300 offene Fehler und 11 Einsprüche gegen den Entwurf. Nach dem Zeitplan soll noch im nächsten Quartal eine "Candidate Recommendation", also eine Empfehlung veröffentlicht werden, an der ab nächsten Monat gearbeitet werden soll. Noch nicht stabile und kontroverse Funktionen werden dabei erstmal gestrichen. Mit einer Recommendation ist erst im 4. Quartal 2014 zu rechnen.

GSL-Team2012-09-21T10:48:32+02:00September 21st, 2012|HTML|Kommentare deaktiviert

Interessante Tools im neuen Firefox 16

Soeben wurde die erste Betaversion des Browsers Firefox 16 veröffentlicht. Firefox 16 ist ein sehr interessantes Tool für Webentwickler geworden. Viele Funktionen können über die Tastatur aufgerufen werden, um Seitenelemente zu untersuchen oder den Debugger aufzurufen oder für andere Zwecke. Eine recht vollständige Beschreibung zur Nutzung der Kommandozeile von Firefox 16 in Englisch finden Sie in einem Blogartikel von Kevin Dangoor, von der automatischen Vervollständigung von Kommandos bis zu einer Erläuterung aller Kommandos. Auch eine Video-Version des Blogartikels findet sich dort, sehr hilfreich zum Einarbeiten. Es gibt Kommandos zum Analysieren von Elementen, zum Entfernen und Ersetzen von Elementen und zur Steuerung des Debuggers. Auch Größenänderungen zur Überprüfung der Smartphone-Darstellung sind möglich, bei denen Firefox 16 die CSS-Vorgaben lädt, wenn eine passende Media-Query im Dokument festgelegt ist.

GSL-Team2012-08-31T19:16:48+02:00August 31st, 2012|CSS, HTML, Javascript|Kommentare deaktiviert

Bildtexte semantisch korrekt zuordnen mit HTML5

Für erfolgreiche Suchmaschinenoptimierung (SEO) wird es immer interessanter, einen Bildtext dem dazugehörigen Bild semantisch einwandfrei dem dazugehörigen Bild zuzuordnen, damit die Suchmaschinen diesen Zusammenhang auch erkennen. Bisher machte man das üblicherweise so: <img src="PfadZumBild.jpg" alt="Mein Bild" /> <p>Ein schönes Bild</p> Damit ist der Zusammenhang zwischen Bild und Text für den Roboter einer Suchmaschine nicht eindeutig erkennbar. Mit HTML5 wurde das Figure-Element mit dem Figcaption-Element eingeführt, das hier eindeutig die bessere Lösung ist: <figure> <img src=" PfadZumBild.jpg " alt=" Mein Bild " /> <figcaption> <p>Ein schönes Bild </p> </figcaption> </figure>

GSL-Team2012-08-30T09:20:17+02:00August 30th, 2012|Allgemein, HTML|Kommentare deaktiviert

HTML5-Tags progress und meter

Die beiden neuen HTML5-Tags <progress> und <meter>. Während man mit <progress> anzeigt, wie weit etwas schon fertig ist (Fortschrittsanzeige) ist <meter> für die Anzeige von Werten wie ein Messinstrument geeignet. Obwohl die Anzeigen beider Tags auf einer Internetseite sehr ähnlich aussehen können, haben sie doch eine recht unterschiedliche Bedeutung, denn bei <progress> ist immer das Erreichen eines bekannten oder unbekannten Endwertes das Ziel, bei <meter> eben nicht. Als Beispiel für <meter> ein Thermometer, dass einen Bereich von 0 bis 50° abdeckt: <meter min="0" max="50" value="39" title="Grad Celsius">39°</meter> 39° Wenn Sie hier z.B. mit Firefox noch keinen Balken, sondern nur die 39° sehen, probieren Sie es mal mit dem Browser Chrome, der kann es schon... Das einfachste Beispiel für <progress> hat folgenden Code: <progress>In Bearbeitung</progress> Das führt zur Ausgabe eines Fortschrittsbalkens, der aber keine Werte angibt, sondern nur zeigt, dass noch etwas passiert: In Bearbeitung Dabei ist der Text innerhalb des Tags eine Art Fallback für ältere Browser. Wenn ein Browser wie z.B. ein älterer Internet Explorer das Tag nicht kennt, liest man dort "In Bearbeitung" und sieht keinen Balken. Ein Fortschrittsbalken mit Werten kann zum Beispiel so erzeugt werden: <progress value="25" max="100">25%</progress> 25%

GSL-Team2012-08-20T10:58:49+02:00August 20th, 2012|HTML|Kommentare deaktiviert

Ein Slider in HTML5

Beim Erstellen von Internetseiten sind gelegentlich Werteeingaben zu realisieren, die man besser und ergonomischer mit einem Slider als mit einem Texteingabefeld realisieren kann. In HTML5 gibt es jetzt die Möglichkeit, mit dem neuen Input-Typ "range" einen solchen Slider zu realisieren. Der Code dazu hat mehrere Attribute. Mit "min" und "max" wird der Bereich eingegrenzt, mit "value" der Startwert angegeben und "step" bestimmt die Auflösung. <input min="0" max="50" value="0" step="5" id="slider" name="range" onchange="showValue(this.value)" type="range"> Ein wenig Javascript dazu sorgt dafür, dass hinter dem Slider der jeweils eingestellte Wert angezeigt wird: <span id="range">0</span><br> <script type="text/javascript"> function showValue(newValue) { document.getElementById("range").innerHTML=newValue; } </script> Wenn statt des Sliders ein einfaches Textfeld mit dem Startwert dahinter angezeigt wird, ist Ihr Browser noch nicht in der Lage, mit dem Input-Typ "range" umzugehen. Probieren Sie es zum Beispiel mit Chrome 21.0.x.

GSL-Team2012-07-30T10:51:32+02:00Juli 30th, 2012|HTML, Javascript|Kommentare deaktiviert

HTML5-Tag datalist

Mit der Einführung des <datalist> Elements in die HTML5 Spezifikation wurde ein Weg geschaffen, dem Benutzer eine freie Texteingabe in ein <input> Element zu ermöglichen. Dabei werden mit Hilfe der hinterlegten <option> Einträge die entsprechenden Eingabewerte angezeigt, und der Benutzer kann sie auswählen, wenn er es wünscht. Dabei kann das <datalist>-Tag nur in Verbindung mit einem <input> Element genutzt werden. Die Verknüpfung wird dabei durch das list-Attribut im <input> Element mit der id des <datalist> Elements realisiert. Ein Beispiel dazu: <input type="text" id="Nationen" list="Land"> <datalist id="Land"> <option value="Deutschland"> <option value="Deutschland"> <option value="Deutschland"> </datalist> Das neue Tag eignet sich auch besonders gut zur Realisierung von Vorschlagswerten für Eingabefelder wie beispielsweise bei Google Suggest.

GSL-Team2012-07-25T10:24:57+02:00Juli 25th, 2012|HTML|Kommentare deaktiviert