Kategorie Archiv: coding

Online-Editor für JavaScript, HTML und CSS

Einen schnellen und flexiblen Online-Editor für kleinere HTML und JavaScript Experimente findet man unter http://jsfiddle.net/. Es ist erstaunlich, was mit diesem kleinen Editor jetzt schon möglich ist. So kann man unter anderem Mootools, jQuery oder Prototype als gewünschtes Framework bestimmen, den Doctype auswählen oder sogar externe CSS-Dateien einbinden.

jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

JSfiddle zeigt dabei immer nur das notwendigste, beispielsweise bei der HTML-Datei nur den Inhalt des body-tags ohne den Rest des Dokumentes. Damit ist es ein leichtes, mal eben einen kleinen Testlauf eines JavaScript Schnippsels zu starten oder den Einfluss auf die Elemente zu testen. Hier mal ein simples Beispiel mit Prototype und Scriptaculous.

Wie man inline styles in CSS überschreiben kann

Wenn man nur inline gestylte Tags in CSS im Webdesign überschreiben will, gibt es keine andere Möglichkeit, als diese styles direkt anzupassen? Falsch!
Eine weitere Möglichkeit ist mit Hilfe des [style] Keywords innerhalb eines Scriptblockes oder einer externen CSS nur diese Tags mit inline Styles anzusprechen.

Ein Beispiel :

<div class="showMe">
<span style="font-weight: bold; color: #ff0000;">Hello World - wird gestyled</span>
</div>
<div class="showMe">
<span>Hello World - wird nicht gestyled</span>
</div>

.showMe span[style]{font-weight: normal !important;color: #0000ff !important;}

Wie das immer so ist und wie man sich wahrscheinlich aufgrund des [style] im Selektor und des !important denken konnte, funktioniert dies nicht im IE6, aber im IE7 & IE8 sowie allen modernen Browsern.
Natürlich bleibt die Frage, wann man so etwas sinnvoll anwenden kann, da man inline styles generell vermeiden
sollte, aber es kann mit Sicherheit nicht schaden, so etwas zu wissen.

Seeing is believing, daher gibt es hier ein kleines Showcase.

[gefunden bei SOTAHNAKA]

Stylen von input=”file” Formularfeldern im Webdesign

Heute habe ich mich mal kurz ärgern müssen, da ich nach einer Möglichkeit gesucht habe, diese netten upload Formularfelder mit CSS zu stylen. Ich wusste schon vorher, dass das nicht ohne Probleme geht, aber ich hatte es zuvor nicht benötigt.

Für diejenigen, die nicht wissen, was ich meine:

Nachdem ich selber über einer Möglichkeit gegrübelt habe, das mit ein wenig Prototype gewürzt hinzubekommen, habe ich bei anderen Webdesignern/Frontend-Entwicklern dies hier gefunden. An und für sich nicht besonders überragend, aber durchaus zweckmäßig.

Kurze Zeit später fand ich dann eine fast identische Lösung mit Prototype, musste also nicht selber noch einmal ran. Wer sich die Lösungen anschaut, wird feststellen, dass im Grunde nur ein Button über das Feld gelegt, das Feld an sich per Opacity versteckt und dann die Position der Maus auf dem Button mit dem darunter liegenden Feld gematcht wird.

Klingt kompliziert? Ist es aber nicht.

Top 10 search engine optimizations (SEO) links for beginners

What is search engine optimization?

Wikipedia describes it as

the process of improving the volume or quality of traffic to a web site from search engines via “natural” (“organic” or “algorithmic”) search results.

I’d like to demistify the “seo” term a bit, so I came up with a list of links to help you understand what search engine optimization really is and what you or your webdesigner can do about it.

Rumour has it, that you’ll have to register your site with the search engines, which is not true. At least if we are not talking about submitting your sitemap.xml.

So, here’s the list:

Weiterlesen… »

Google Analytics API erblickt das Licht der Welt

Gute Neuigkeiten für die Leute vom Controlling und für alle Entwickler, es gibt wieder was zu tun:

Google hat eine API für Google Analytics veröffentlicht: http://analytics.blogspot.com/2009/04/attention-developers-google-analytics.html

Insbesondere das Tracking für Flash/Flex – Applikationen klingt interessant, obwohl es das in der Vergangenheit schon aus anderen Quellen für Analytics kam.

Canvas in HTML 5 soll das Ende von Flash sein?

Gestern fiel mir dieser Blogeintrag in die Hände bzw. vor die Augen: http://stairwellblog.com/2009/03/is-canvas-the-end-of-flash/

Ein recht provokanter Titel. Ist da was dran? Wird das canvas Element in HTML5 das Ende von Flash einläuten? Die Beispiele am Ende des Blogeintrags sprechen für sich. Schon sehr beeindruckend, was mit ein wenig JavaScript und canvas möglich ist, aber reicht das, um Flash in die Schranken zu weisen?

Meiner Meinung nach nicht so ganz:

  • Kein einheitlicher Standard, den man für alle Browser auf die gleiche Art benutzen kann, sofern man nicht für JS ein Framework einsetzt
  • Geschwindigkeit: AS3 ist verdammt schnell im Vergleich zu JS, mit dem Flash Player 10 ist auch Hardwarebeschleunigung der Anzeige möglich
  • Eigenheiten, welche AS3 von Java geerbt hat: Klassen, Vererbung, Packages,…
  • Nur für moderne Browser

Viele kennen Flash nur als nervende Werbung oder Intro für eine Homepage. ActionScript 3 ermöglicht aber Desktop-ähnliche Anwendungen, welche gängige JavaScript Applikationen in die Schranken weisen können. Insofern ist es vermessen zu behaupten, dass JS mit canvas Flash vollständig ersetzen kann. Es kommt hier meiner Meinung nach wie immer auf den konkreten Fall an, welche Technologie man einsetzt.

Webdesign (in Leipzig) ist überbewertet

Webdesign in Leipzig und in ganz Deutschland ist überbewertet. Ich meine, Frontend-Entwickler oder Webdesigner kann sich heutzutage jeder nennen, aber die Wenigsten wissen überhaupt etwas damit anzufangen.

Fragt Ihr Euch nicht auch: Wo hört das Eine auf und fängt das Andere an?

Als den typischen Webdesigner würde ich denjenigen bezeichnen, der auf Dreamweaver schwört, für den CSS noch eher ne Baustelle ist und der sich nicht weiter um die Fehler kümmert, die er macht oder nicht macht, solange alles in den gängigen Browsern irgendwie funktioniert. Ich finde es erschreckend, was manche Schulen einem zum Thema Webdesign beibringen. Keine Webstandards, Tabellenlayout und der besagte Dreamweaver…

Ein Frontend-Entwickler sollte sich hingegen mit solchen Dingen genau auskennen: Webstandards, tabellenloses Layout, Templates mit minimalem Html, sinnvoll für die Suchmaschinenoptimierung angeordnet (Vergleichbar mit einem Schriftstück, welches man für den Leser gliedert). Dazu gehört auch das Verfolgen von neuen Entwicklungen, Tricks und Kniffen für die Gestaltung und Optimierung des Codes von Internetseiten, z.B. clevere CSS-Tricks.
Gibt es darüberhinaus die gewünschten Funktionen nicht in den geforderten Browsern, dann fügt ein Frontend-Entwickler sie per JavaScript hinzu oder kennt Skripte, die dies auf einfache Art ermöglichen. Ebenso sollte er JavaScript-Frameworks sinnvollerweise einsetzen können und deren Vor- und Nachteile kennen.

Genau aus diesem Grund ist der Webdesigner insbesondere in Leipzig vom Aussterben bedroht. JavaScript, inklusive jquery, prototype und co sollten für den Frontend-Entwickler keine Fremdworte sein. Kenntnisse in Bezug auf Flash, das Flex Framework und ActionScript3 überhaupt sind sicher auch von Vorteil. Ebenso eine gewisse Übung im Umgang mit beliebten Open Source Systemen wie Magento, Wordpress, Typo3 oder Ähnlichem. Webdesigner, die statische Seiten mit Dreamweaver erstellen sind in Zeiten von Wordpress und Joomla! nicht mehr gefragt.

Daher mein Wunsch für ein besseres Internet: Mehr Frontend-Entwickler, mehr Spezialisten und weniger Webdesigner.

Übersicht Online – Bildbearbeitung

Bei cnet gibt es eine Übersicht von 15 Online – Bildbearbeitungsprogrammen und deren Features.
Die Tabelle enthält dabei Infos zur verwendeten Technologie, der maximalen Größe der Bilddatei, die mögliche Auflösung, Kosten, ob Ebenen möglich sind und wieviele und neben Effekten auch noch Alleinstellungsmerkmale, sogenannte “Killer features”. Man findet neben Flash und Flex – Applikationen auch Seiten, welche auf HTML und Ajax setzen, was ich persönlich als besondere Herausforderung an den Entwickler betrachte, da solche Applikationen flashbasiert mit Sicherheit einfacher zu realisieren sind.

Wer also gerne kostenlos seine Bilder jederzeit bearbeiten möchte, findet hier die Übersicht.

Framework, anyone?

101 Photoshop Tipps in 5 Minuten