http://www.bugbomb.deNeue Beiträge im Forum für Webmaster bei www.bugbomb.dede-DEwww.bugbomb.de (Manfred Walter Thoma)21.12.2024 13:30:33viele Mitglieder des Webmasters Europe e.V. (WE) haben den Wunsch geäußert, sich mit anderen Teilnehmern über Themen und Fragen im Bereich Ausbildung auszutauschen. Ebenso besteht großes Interesse daran, eigene Lernmethoden und Erfahrungen mit anderen zu teilen. Aus diesem Grund richtet sich dieses Forum an Teilnehmer, die eine der folgenden Zertifizierungen des Webmasters Eu ...

DANIEL23 am 12.09.2023 12:04

]]>Eine Möglichkeit mit CSS um einen Text "blinken" zu lassen. Mit animation-duration: (hier 1s, eine Sekunde) lässt sich die Zeit des "blinkens" einstellen. Über animation-iteration-count: (hier infinite, unendlich) ist die Anzahl des "blinkens" angeben. Z.B. animation-iteration-count: 5 für 5 mal "blinken". <span class="blink">Ich blinke</span>   .blink {&nb ...

MWT am 15.03.2014 12:23

]]>Oft entscheiden Sekunden darüber, ob ein potenzieller Kunde sich näher mit einer Webseite auseinandersetzt oder auf die Zurück-Taste klickt. Wer im Webdesign auf verschiedene Suchmuster und -typen eingeht, hat höhere Chancen anonyme Besucher zu loyalen Kunden zu machen. Die Psychologie des Webdesign: Worauf Nutzer als erstes achten Jede Webseite sieht anders aus und jeder Ben ...

MWT am 14.02.2014 14:50

]]>Sie können einen Textbereich bestimmen, in dem kein automatischer Zeilenumbruch erfolgt. Alles, was innerhalb dieses Bereichs steht, wird in einer langen Zeile angezeigt. Der Anwender kann dann mit der horizontalen Scroll-Leiste die überlangen Textzeile anzeigen.Diese Möglichkeit gehört jedoch nicht zum offiziellen HTML-Sprachstandard. Sie sollten sie daher vermeiden und die CS ...

MWT am 17.01.2014 08:46

]]>Ein ganz netter Effekt: Der Textbereich (hier <h1>) wird bei der Anzeige animiert "hineingedreht". <h1>Das ist ein Bereich, der bei der Anzeige "hineingedreht" wird</h1><p>   Laber .....</p> h1 {     animation: turn 0.5s 0.5s linear both;   -webkit-animation: turn 0.5s 0.5s linear both;   -moz-animation: turn 0.5s 0.5s li ...

MWT am 05.01.2014 12:10

]]>Das Format für den placeholder kann per CSS geändert werden. Im Beispiel wird der Placeholder-Text kursiv und hellgrau angezeigt die Eingabe erscheint in rot. <input type="text" placeholder="Placeholder-Text" /> input { color: red }::-webkit-input-placeholder {   color: #ccc;   font-style: italic; }:-moz-placeholder {    /* Firefox 18- */ & ...

MWT am 05.01.2014 11:51

]]>Mit dem nachfolgenden RegEx lassen sich doppelte oder Mehrfache Leerzeichen aus einem String entfernen. Das Beispiel ist mit C# / VB.NET codiert: text = System.Text.RegularExpressions.Regex.Replace(text, "[ ]+", " ");

MWT am 03.11.2013 09:20

]]>Es gibt verschiedene Ansätze eine Website mit Hilfe von Media Queries für verschiedene Displaygrößen zu optimieren.  Einmal steht das Ausgabegerät im Vordergrund, einmal das Design bzw. die Information. Welche Unterschiede zwischen einer Responsive Website und einer Adaptive Website betsghen und welche Vor- und Nachteile die Varianten haben sollhier kurz beantwo ...

MWT am 07.09.2013 10:28

]]>Auf der Testseite von Google zum testen von strukturierten Daten (http://www.google.com/webmasters/tools/richsnippets) werden strukturierte Daten nicht oder nicht vollständig in der Vorschau angezeigt. Anscheinend wird das "Schema" von schema.org in der Vorschau der Ergebnisanzeige noch nicht (voll) untersützt. So werden z.B. keine Breadcrumbs in der Vorschau angezeigt, obwohl sie v ...

MWT am 27.08.2013 19:40

]]>Ein Beispiel für ein  Rich Snippets für eine Person. Alles wird in einem Element itemscope itemtype=http://data-vocabulary.org/person gekappselt (hier ein DIV-Container). Elemente mit den Eigenschaften (property. itemprop="...")name (Name der Person), role oder title (Funktion der Person),affiliation (Untrernehmen), url (Link zur Homepage) anlegen. Für die Adresse (An ...

MWT am 25.08.2013 10:56

]]>Rich Snippets sind Lieferanten zusätzlicher Informationen in der Ergebnisliste von Google. Breadcrumb-Navigation können Bestandteil der Treffer in der Google Ergebnisliste sein. Voraussetzung ist lediglich die semantische Auszeichnung (schema.org). Nachfolgend ein Beispiel für die Auszeichnung von Breadcrumbs. Beachten Sie die Auszeichnung des body: <body itemscope itemtype="ht ...

MWT am 24.08.2013 16:07

]]>Das list-Attribut für input-Felder verweist auf eine Liste von vorgegebenen Werten. Anders als beim select-Feld kann der Benutzer bei einer Liste aleerdings auch eigene Werte eingeben. Ein datalist-Tag führt die mögichen Werte auf und ist über die id mit dem list-Attribut des input-Tags verbunden. <input type="text" list="dliste" value="" /> <datalist id="dli ...

MWT am 23.08.2013 09:44

]]>Ein (Eingabe-) Feld, das beim Laden der Seite den Fokus erhält, wurde bisher über Javascript realisiert: window.onload = document.getElementById('elementId').focus(); HTML5 stellt jetzt autofocus als Attribut für input-Tags zur verfügung. So wird in HTML5 der Fokus auf ein Eingabefeld gesetzt: <input autofocus type="text" value="" />oder<input autofoc ...

MWT am 23.08.2013 09:34

]]>In jeder Webseite findet sich irgendwo im HTML-Code der eigentliche Content der Seite. Gerne verwendet wurde bspw. ein <div id=”wrapper”>, <div id=”main”>, oder im Falle einer ARIA Unterstützung ein Element mit dem Attribut role=”main”. In HTML5 wurde das div von einem <section id=”main”> abgelöst. Anders ausgedrückt: ...

MWT am 23.08.2013 08:53

]]>Die "HyperText Markup Language" (HTML) wurde ursprünglich nicht entwickelt, um Web-Applikationen zu erstellen. HTML hat einen limitierten Vorrat von Interface-Elementen und wurde um ein sequentielles Client-Server-Modell herum entwickelt. Um diese Limitationen zu umgehen haben Entwickler von Web-Applikationen eigene Komponenten (Widgets) entwickelt und diesen dann mit JavaScript das korrekte ...

MWT am 18.08.2013 16:01

]]>