CSS Code organisieren und Ladegeschwindigkeit optimieren

CSS Code organisieren und Ladegeschwindigkeit optimierenCSS Code organisieren - Wer Webseiten wie Blogs oder auch Online-Shops erstellt, egal ob im Frontend- oder Backend-Bereich wird unabhängig von den vorherrschenden Standards und Vorgaben durch die Aufgabenstellung seinen Stil haben, Code zu schreiben und zu bearbeiten. Ein ausschlaggebender Grund hierfür ist die Übersicht des Codes und selbst die empfindet nicht jeder Entwickler gleichermaßen. Neben der eigentlichen Strukturierung von CSS-Code steht hierbei oftmals die Frage der Darstellung der einzelnen CSS-Regeln im Vordergrund der Diskussion. Genauer gesagt, die beiden Varianten die hierbei Anwendung finden können - Einzeilig- & Mehrzeiligkeit.

 (weiter)

SEO Trends 2010

SEO Trends 2010Professionelle Suchmaschinenoptimierung ist stets ein kontinuierlicher und hochdynamischer Prozess. Zu diesem gehören insbesondere auch die Beobachtung und Analyse der Entwicklung von Suchmaschinen sowie Web- und Technologietrends. Die Ranking-Faktoren der großen Suchmaschinen haben in den letzen zehn Jahren sowohl in qualitativer wie in quantitativer Hinsicht zugenommen, da die Suchmaschinenbetreiber ständig ihre Methoden und Kriterien verfeinern. Der Marktführer Google nutzt mittlerweile an die 200 verschiedene Kriterien, um das Ranking einer Seite zu erörtern und zu bestimmen. Erschwerend kommt hinzu, dass sich diese durch Änderungen am Quellcode ständig ändern können. Dies kann letztlich auch zu nennenswerten Auswirkungen auf die Platzierung einer Seite führen.

 (weiter)

Linkbuilding für den kleinen Geldbeutel

Linkbuilding für den kleinen GeldbeutelLinkbuilding für den kleinen Geldbeutel - Jeder Webmaster, egal ob Profi oder Anfänger, sehnt sich grundlegend nach dem gleichen, nämlich Links. Links auf die eigene Seiten zu bringen ist jedoch nicht immer ganz so einfach und benötigt einmal mehr Zeit und Geld. Sofern man über ein gewissen Budget verfügt, kann man ohne grössere Probleme mal den einen oder anderen Link kaufen. Vor allem bei kleineren Seiten ist mir hierzu noch selten was negativ aufgefallen. Nur übertreiben sollte man es nicht und Überschriften ala "Links zum Kauf/Verkauf" sollten wenn möglich auch vermieden werden. Man muss G∗∗gle ja nicht gleich alles mitteilen. Da jedoch nicht jeder über genügend Geld für den Linkaufbau verfügt, oder aber hierfür gar keines ausgeben will, dem sei hier mal mit ein paar Tipps geholfen.

 (weiter)

Photoshop CS5 Video Preview - Content Aware Fill

Photoshop CS5 - Content Aware FillPhotoshop CS5 - Kaum ein Update einer Software wird von seinen Anwendern in den nächsten Monaten mit solch großen Interesse erwartet, wie das von Adobe's Creative Suite CS5. Besonderes Augenmerk dürfte bei den meisten Anwendern sicherlich auf Photoshop CS5 liegen, dass zusammen mit dem gesamten Package am 12. April in einem Online-Event vorgestellt wird. So weit so gut, letztendlich steht und fällt das Interesse an einer Software in den meisten Fällen aber mit den Funktionen die es anbietet und genau hier gibt es von Photoshop CS5 wirklich interessantes zu berichten bzw. zu zeigen! Denn vorgestern stellte John Nack, seines Zeichens Produktmanager bei Adobe, in seinem Blog ein knapp 5 minütiges Video vor, welches eine der neuen Funktion, genauer gesagt "Content-Aware Fill" näher vorstellt. Aber seht es euch selber an!

 (weiter)

Windows 7 Fenster mit CSS3 und jQuery - Tutorial Teil 2

Windows 7 Fenster mit CSS3 und jQuery - Tutorial Teil 2Windows 7 Fenster mit CSS3 und jQuery - Schön euch auch beim zweiten Teil des Windows 7 Fenster Tutorials willkommen zu heißen! Die heutige Fortsetzung knüpft nahtlos an den ersten aus HTML- und CSS-Angaben bestehenden gestrigen Teil an. Nach dem das Interfacedesign eines Windows 7 Fensters im Firefox "Look & Feel" im gestrigen ersten Teil nachempfunden wurde, wird im heutigen zweiten Teil JavaScript bzw. das Plugin jQuery (UI) die Hauptrolle in diesem Tutorial-2-Teiler spielen. Hierbei wird insbesondere auf eine mögliche Änderung der Fenstergröße ( resizable ) und -position ( draggable ) durch den Anwender eingegangen.

 (weiter)

Windows 7 Fenster mit CSS3 und jQuery - Tutorial Teil 1

Windows 7 Fenster mit CSS3 und jQuery - Tutorial Teil 1Windows 7 Fenster mit CSS3 & jQuery - Du findest das Interfacedesign von Windows 7 ansehnlich und interessierst dich für CSS3? Dann bist du hier genau richtig. Denn im weiteren Verlauf wird in diesem Tutorial-2-Teilers ein Fenster aus Windows 7 mit Hilfe von CSS3 und jQuery UI erstellt. Im ersten Teil dieses Tutorials geht es hierbei um das Stylen des Fensters, entsprechend den "Interfacedesign-Vorgaben" von Windows 7. Im zweiten Teil dieses Tutorials geht es um das Dragging & Resizing des erstellten Fensters unter Zuhilfenahme von jQuery UI.

 (weiter)

Wie sozial ist das Web?

Wie sozial ist das Web?Social Web - Angesichts der Endlosdebatte darüber, dass dieses Zauberwort gestern noch ein Allheilmittel war, heute schon wieder tot ist, morgen doch wieder aufersteht um anschließend wie eine Pulswelle vom Ausschlag der höchsten Amplitude im Senkrechtflug hinab ins Wellental zu stürzen ... angesichts dessen mag man nicht wirklich den Versuch unternehmen, noch einen Nachschlag zu servieren, das Sahnehäubchen inklusive. Auf die Gefahr hin, mir von den Experten der Sozialbranche anhören zu müssen, den nächsten Aufwasch der ja längst durch Leads, Follower und Feedreaderstatistiken empirisch aufbereiteten Sozialwelt Web zu generieren und eine erneute Quintessenz anzurühren, begegne ich dem Thema mit genau dieser Frage. Wie sozial ist das Web?

 (weiter)

CSS Box-Reflect - Spiegelung ohne JavaScript und Photoshop

CSS Box-Reflect - Spiegelung ohne JavaScript und PhotoshopCSS Box-Reflect - Um Reflexionen von grafischen, aber auch von Text-Elementen wie bspw. Überschriften realisieren zu können, wurde hierzu bisher in der Vergangenheit fast ausschließlich auf Grafikprogramme wie Photoshop zurückgegriffen, mit den dann die entsprechenden Bereiche gespiegelt wurden. Dank CSS und der Unterstützung der vom Safari- und Chrome-Browser genutzten Browser-Engine Webkit, gibt es auch hier die ein oder andere Möglichkeit gänzlich ohne Grafikprogramme oder auch JavaScript-Erweiterung für solche Anforderungen auskommen zu können. Denn die CSS Eigenschaft "box-reflect" ermöglicht eine Spiegelung von Elementen die den entsprechenden Wert und die dazugehörigen Eigenschaften erhalten.

 (weiter)

Internet Explorer 9 im Browservergleich

Internet Explorer 9 im BrowservergleichInternet Explorer 9 - Microsoft's Browser der Internet Explorer unterstützt CSS3, HTML5, SVG und auch die JavaScript-Engine ist im Vergleich mit der der anderen Browser auf Augenhöhe. Diese eben getroffenen Aussagen sind kein Wunschdenken, sondern seit gestern Realität! Denn vom bisher in nahezu allen Belangen schlechtesten Browser ( gemeint ist hiermit in erster Linie die Unterstützung von Standards ), wurde gestern von Stephen Sinofsky, head of the Windows and Windows Live Group auf der MIX 2010-Konferenz durch Microsoft die erste Testversion vom kommenden Internet Explorer 9 vorgestellt. Allerdings befindet sich die Platform Preview des Internet Explorer 9 noch in einer frühen Entwicklungsphase, die bspw. keine Adresszeile oder auch keinen Zurück-Button besitzt, doch bei der Vorstellung dieser Preview-Version geht es Microsoft eher darum, die Fähigkeiten dieser zu präsentieren. Und diese können sich, wie der ein oder andere Browservergleich ergeben hat, wirklich sehen lassen.

 (weiter)

HTML5 Video Player - SublimeVideo

HTML5 Video Player - SublimeVideoVideo Player - Neben Bildern, sind insbesondere Videos nicht nur in Blogs gern gesehene Inhalte die für Abwechslung im tristen "Textalltag" sorgen, sondern auch in Onlineshops sind sie zur Präsentation von Produkten ideal, um somit dem Besucher nähere Einblicke in Produkte oder Services zu gewähren. Leidiges Thema hierbei ist allerdings oft der fehlende Support der Browser was bspw. Flash-Plugins betrifft. Auch wenn die Entwicklung von HTML5 noch nicht abgeschlossen ist, bietet SublimeVideo ein HTML5 Video-Player endlich auch die Möglichkeit Videoinhalte ohne Flash abspielen zu können. Das aus Lausanne stammende Entwicklerteam Jilion hat vor einigen Wochen eine Preview ihres HTML5-Video-Players SublimeVideo veröffentlicht, der unter anderem mit einer echten Vollbildansicht aufwartet, die momentan aber noch nicht allen Browsern zur Verfügung steht.

 (weiter)

Browser-Auswahlbox von Microsoft - Position vs. Logo-Design

Browser-Auswahlbox von Microsoft - Position vs. Logo-DesignBrowser-Auswahlbox - Die Frage nach der Installation eines Browsers war auf Betriebssystemen von Microsoft bisher eher keine Frage der Auswahl, sondern ein Vorgang der bei der Installation des Betriebssystems ( Windows XP, Windows Vista, Windows 7, ... ) durch selbiges vorweggenommen wurde. Seit Anfang März muss Microsoft nun in dem sogenannten "Ballot Screen" Windows-Nutzern in Europa eine freie Browserwahl ermöglichen. Das Interessante an dieser Browser-Auswahlbox ist eigentlich nur, ob und wenn ja in welchem Umfang dies mögliche Auswirkungen in Bezug auf Browserstatistiken haben wird. Ausschlaggebend hierfür dürften insbesondere die nach dem Zufallsprinzip gewählte Position der Browser-Logos, aber auch deren Design sein.

 (weiter)

JPG gegen GIF und PNG - Finde das ideale Dateiformat für Bilder

JPG gegen GIF und PNG - Finde das ideale Dateiformat für BilderJPG vs. GIF und PNG - Die drei großen Webformate stellen ohne Frage JPG, GIF und PNG da. Doch worin liegen die Unterschiede und welche Vor- und Nachteile bringen die jeweiligen Formate überhaupt mit sich. Eine Frage der man sich spätestens beim Erstellen des Bildmaterials seiner ersten eigenen Internetseite gegenüber steht. In diesem Artikel werden Euch daher diese drei Dateiformate von Bildern etwas näher vorgestellt. Hierbei werden ihre Tücken und ihre Stärken anschaulich erläutert und die hauptsächlichen Einsatzgebiete erklärt, denn jedes einzelne Bildformat hat bestimmte Stärken, die es für ein oder mehrere Einsatzgebiete interessant macht. Die Stärken der Formate PNG, JPG & GIF liegen bspw. eindeutig in der geringen Dateigröße wodurch Internetseiten die Bilddaten enthalten schnell geladen werden können.

 (weiter)

CSS3 Transition Tutorial - Menü mit Slide-Effekt im Apple-Style

CSS3 Transition Tutorial - Menü mit Slide-Effekt im Apple-StyleCSS-Transitions - Fliessend animierte Übergänge wie Slide-Effekte bei Webseiten-Elementen wie bspw. einem Menü zu erzeugen, wurde bisher meisten von kleinen Plugins basierend auf einem JavaScript-Framework wie jQuery umgesetzt. Die CSS3-Eigenschaft Transition ermöglicht ein solches "Bewegungsmuster", ebenso wie die hier kürzlich vorgestellte CSS3-Eigenschaft Animation, nur ohne JavaScript. Das heißt, das bspw. "Slide-Effekte" ausschließlich via CSS umgesetzt werden können. Im folgenden kleinen Tutorial wird daher beschrieben wie unter der Verwendung von Border-Radius, Gradient ( Farbverlauf via CSS ) und Transtion, dieser Slide-Effekt in wenigen Schritten ohne JavaScript und ohne Grafiken, ausschließlich mit CSS(3) realisiert werden kann.

 (weiter)

Opera 10.5 - Mit beeindruckender Browser-Performance

Opera 10.5 - Mit beeindruckender Browser-Performance Browser-Performance - Neben den der Unterstützung neuester Webstandards und dem Angebot an Browser-Erweiterungen ist für viele Anwender die Performance ausschlaggebende Argument für die Nutzung eines Browsers. In Sachen Performance waren in letzter Zeit vor allem die neuesten 4er Versionen von Chrome und Safari das Maß aller Dinge. Selbst der von vielen Anwendern bevorzugte Browser Firefox hatte hier, teilweise sogar recht deutlich, das Nachsehen. Die neueste und heute zum Download angebotene dritte Vorabversion 10.50 RC3 des norwegischen Schützlings Opera, macht nach Angaben des Herstellers u.a. mit Verbesserungen an der neuen JavaScript-Engine Carakan und der aktualisierten 2.5er Rendering-Engine Presto, diese Opera-Version zum aktuell schnellsten Browser auf dem Markt!

 (weiter)