WebDevTeam’s Blog

Per Twitter habe ich mal wieder einen guten Link gefunden 27 Must-Have Starter Kits For Web Designer:

• GUI, Form Elements and Web Components
• Browser Screens Templates
• Cursors
• Product Design

45+ CSS Grid Systems, Layout Generators and Tutorials that every Designer should know

Die Posts werden immer kleiner, aber ich dachte, dass Links zu guten Artikeln auch schon reichen

8 Excellent Tools for Optimizing Your Images

Besonders gefällt mir das smush.it! Boomarklet. So kann man nicht nur einfach alle Bilder eine Webseite optimiert abspeichern…

…sondern auch alle Bilder einer Webseite ohne einen Download Manager schnell mal runterladen:

Riot macht mal schnell aus einem 1,6MB ein 240Kbyte Foto ohne merklichen Qualitätsverlust.

Schade, dass der Server wegen Überlastung scheinbar down ist, das hätte ich mir doch zugern mal angesehen. Und zwar haben koreanische Entwickler einen Generator für Mashups komplett mit YUI gebaut. Den Artikel dazu findet man bei Ajaxian: Uizard – a web mashup generator written in YUI.

Eine nette Zusammenstellung bzgl. des Themas gibt es hier: Crazy About Color: Top Color Scheme and Palette Generators.

Sehr nett ist z.B. der Color Palette Generator, dort kann man einfach ein Bild (z.B. eins, was man als Hintergrundbild verwenden will) hochladen, aus dem dann eine Farbpalette zusammengestellt wird, die man dann für die Farbgebung der Seite nehmen kann.

Beim Smashing Magazine (welches bestimmt alle schon im Feed Reader haben) ist ein guter Artikel zum Thema “Table Layouts vs. Div Layouts: From Hell to… Hell?“

Resümee:

• Benutze die HTML Elemente in der Art, wofür sie gedacht sind!
• “Overusing div tags is as bad as having a table-based layout” /Divitis: “Divitis is a common problem with webdesigners. It is the process of using too many nested/unnecessary divs to mark up a page. “
• HTML5 ergänzt mehr semantische Tags für die Seitenstrukturierung

… achja, und

• “With the release of IE8, all three major browsers now support the styling of block-level elements as tables.”

Ich sage nur

<div class="layoutAlignment area"> ... </div>

So, ich habe auch einen Beitrag zum Thema “Text Umbrechen” zu leisten. Danke (!) an die Mitautoren für die zwei Beiträge:

• Text-Overflow – worauf wir alle gewartet haben
• Silbentrennung

Ich hatte dies schon einmal (June 14th, 2007) in meinem alten Blog geschrieben:

Firefox und IE word wrap, Bugeintrag bei mozilla…

Funktioniert aber trotzdem nicht im Firefox.

Einfache Möglichkeit: [wbr] einfügen – www.quirksmode.org

Mit Prototype

<div id="a" style="width: 20px;">aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<script  type="text/javascript"
   src="http://www.prototypejs.org/assets/2007/5/1/prototype.js"></script>
<script type="text/javascript">
   $("a").innerHTML=$("a").innerHTML.split("").join("<wbr>");
</script>

Mit jQuery

<div class="j" style="width: 20px;">jjjjjjjjjjjjjjjjjjjjjjjj</div>
<script type="text/javascript"
   src="http://jquery.com/src/jquery-latest.js"></script>
<script type="text/javascript">
   $(".j").html($(".j").html().split('').join('<wbr>'));
</script>

Problem
Das Problem ist dann nur, dass alles, was umbrechen kann, auch umbricht! D.h. “Dies ist ein Textbeispiel” wird durch die Skripte zu

D<wbr/>i<wbr/>e<wbr/>s<wbr/> <wbr/>i<wbr/>s<wbr/>t<wbr/> <wbr/>e<wbr/>i<wbr/>n<wbr/>
<wbr/>T<wbr/>e<wbr/>x<wbr/>t<wbr/>b<wbr/>e<wbr/>i<wbr/>s<wbr/>p<wbr/>i<wbr/>e<wbr/>l

und bricht natürlich überall, wo das Ende eines umrahmenden Elements (mit einer festen Breite) erreicht ist und nicht nur bei den Leerzeichen! Es kann also so brechen:

Dies ist ein Textb
eispiel

obwohl es evtl. per default bei den Leerzeichen umbrechen würde:

Dies ist ein
Textbeispiel

Interessant dazu auch:
Wrapping Text Inside Pre Tags

Wie oft schon haben wir Kniffe in in den verschiedensten Programmiersprachen umgesetzt um irgendwelche Langtexte so einzukürzen, dass sie in das vorgegebene Layout passen ohne nur halbe Buchstaben oder Worte sichtbar zu lassen?

In CSS3 gibt es dafür die eigenschaft text-overflow, die für Blocklevel-Elemente festlegt was passieren soll wenn der text heraus läuft. Mit der Value “elipsis” oder “elipsis-word” kann festgelegt werden, dass so gekürzt wird, dass am Ende der Box ein “…” zeigt – da ist noch mehr Text!

Was wäre es für eine wunderbare Welt wenn das in jedem Browser funktionieren würde? Denn leider schaffen das nicht alle. Diesmal ist nicht der IE das Problem, sondern -bitte hinsetzen und tief durchathmen- der Firefox.

jQuery to the rescue!
Ein neues jQuery-plugin ermöglicht nun wenigstens das Kürzen auf Zeichenebene und ich denke bis das auch für Wörter erweitert wurde wird es nicht mehr lange dauern.

Zwar ist das auch wieder nur eine Lösung in einer weiteren Sprache nämlich JS aber bedenkt die Möglichkeiten!
Für den Start bekommen Elemente für die das Feature gebraucht wird eine class=”textOverflow”. Das CSS wird nach bestem Wissen dafür umgesetzt und ab IE funktionierts. Die übrigen Browser bekommen die Eigenschaft über das Plugin untergeschoben.
Da nun aber Nutzer von FF, WebKit etc ohnehin mit hoher Frequenz aktualisieren, können wir das JS Workaround dann später entfernen wenn unsere Lieblingsbrowser nachgezogen haben.

<Motivation>

Da mich die Arbeit als Web Developer nicht ausfüllt *hust* werde ich jetzt einfach mal noch Grafik Designer. Aber bevor ich das werde, muss ich noch alle diese Artikel lesen, schließlich will ich ja ein guter Grafik Designer werden.

</Motivation>

Es gibt verschiedene Möglichkeiten, seine Arbeit in verschiedenen Browsern zu testen:

Installieren

• Multiple IE (bedingt zu empfehlen bzgl. Web2.0)
• VM Ware mit fertigen Betriebssystem-Images
• Virtual Box (portable) mit fertigen Betriebssystem-Images

Browser Screenshots machen lassen

• guter Artikel beim Smashing Magazine unter “Browser Tests: Online-Services & Tools”
  

Testsuite auf dem Mac