Gedankenverteiler

Webent­wick­lung ist und bleibt ein Minen­feld. Stan­dards sind keine, jede Brow­ser macht aus dem Code ande­ren Bull­s­hit (sorry). Ich möchte euch ein paar Tools vor­stel­len (die ihr teil­weise sicher schon kennt), wel­che euch das Abar­bei­ten am Code ver­ein­fa­chen sollen.

Brow­ser

Jaaaa, natür­lich. Ver­schie­dene Brow­ser sind uner­läss­lich, weil unzu­ver­läs­sig. Die fünf am wei­tes­ten ver­brei­te­ten Brow­ser sollte man dabei immer auf dem Schirm haben, und diese wären:

1.  Mozilla Firefox

… ist immer­noch mein Stan­dard– und Lieb­lings­brow­ser, ordent­lich erwei­ter­bar und gut in der Web-​​Standards-​​Umsetzung. Down­load unter: www​.mozilla​.org/​d​e​/​f​i​r​e​fox

2. Google Chrome

Der New­co­mer schlecht­hin. Klar von Google gepusht, aber eben­falls erwei­ter­bar bis zum Spei­cher­kol­laps und dank Webkit-​​Engine schnell und standard-​​konform. Down­load (von schein­bar jeder pope­li­gen Goog­le­seite oder) unter: www​.google​.de/​c​h​r​ome

3. Micro­soft Inter­net Explorer

Jaaa, er lebt noch … lei­der. Irgend­wie hatte ja so ziem­lich jeder webdesign-​​affine Mensch gehofft, dass nach der Ver­sion 6 der Meteor kommt, wel­cher die­sen Dino­sau­rier plät­tet. Aber irgend­je­mand bei Micro­soft hat uns alle nicht erhört und eine wei­tere Ver­sion auf den Markt geschubst … und nun gibt es sogar eine ver­wend­bare, mit Stan­dards ansprech­bare, schi­cke und mit Stan­dards ansprech­bare Ver­sion (9) (hatte ich schon die mitt­ler­weile unter­stütz­ten Stan­dards erwähnt?). Wie auch immer, der IE ist benutz­bar gewor­den und die Ent­wick­ler ruhen sich nicht mehr auf der mitt­ler­weile ver­lo­re­nen Markt­füh­rer­schaft aus. Down­load unter: win​dows​.micro​soft​.com/​d​e​-​D​E​/​i​n​t​e​r​n​e​t​-​e​x​p​l​o​r​e​r​/​p​r​o​d​u​c​t​s​/​i​e​/​h​ome (Auch wenn Micro­soft mitt­ler­weile Brow­ser bas­teln kann, von kur­zen Links haben die noch nichts gehört.)

4. Apple Safari

Jaaa Jaaa Jaaa, Pfui Apple, oder so. Alles schlecht mit dem Apfel.
Unsinn, App­les Soft– und Hard­ware ist nicht schlech­ter als der Kram von ande­ren Her­stel­lern. So auch der Brow­ser Safari, ähnlich Google Chrome (glei­che Ren­de­ring Engine: Web­Kit). Rich­tig Zuhause ist er natür­lich unter MacOS, aber auch unter Win­dows abso­lut ver­wend­bar und gut. Down­load unter: www​.apple​.com/​d​e​/​s​a​f​ari

5. Opera

Ein biss­chen ist Opera immer der Außen­sei­ter gewe­sen und ich sehe nicht, wie sich das so schnell ändern sollte. Guter, inno­va­ti­ver Brow­ser, der lei­der viel zu sehr igno­riert und unter­schätzt wird. Viel­leicht soll­ten sie ein­fach mal aggres­si­ver wer­ben? Egal, Down­load unter: de​.opera​.com/​b​r​o​w​ser

6. BESONDERES TOOL: IE-​​Tester

Obwohl es kein stan­dard­mä­ßi­ger Brow­ser ist, gehört das Pro­gramm hier defi­ni­tiv hin­ein. IE-​​Tester ermög­licht das Tes­ten unter unter­schied­li­chen Inter­net Explorer-​​Versionen (der­zeit IE 5.5 bis IE9), heut­zu­tage ist es zwar nicht mehr not­wen­dig die Vari­an­ten 5.5 und 6 zu beach­ten, aber selbst bei 7, 8 und 9 sehen die Sei­ten nicht gleich aus, das Tes­ten ist daher uner­läss­lich. Down­load unter: www​.my​-debug​bar​.com/​w​i​k​i​/​I​E​T​e​s​t​e​r​/​H​o​m​e​P​age

Browser-​​Funktionen & –Erweiterungen

Fire­bug

DAS Entwicklungs-​​Tool schlecht­hin. Sei­ten las­sen sich direkt im Brow­ser ändern, debug­gen, über­wa­chen … Zusätz­lich ist die Firefox-​​Variante mit Erwei­te­run­gen ausbaubar.

Down­loads:

• für Fire­fox: get​fire​bug​.com/​d​o​w​n​l​o​ads
• für Chrome: get​fire​bug​.com/​r​e​l​e​a​s​e​s​/​l​i​t​e​/​c​h​r​ome
• für Safari: www​.slice​fac​tory​.com/​b​r​o​w​s​e​r​-​e​x​t​e​n​s​i​o​n​s​/​f​i​r​e​b​u​g​-​l​i​t​e​-​s​a​f​a​r​i​/​259
• als Book­marklet für alle ande­ren Brow­ser: get​fire​bug​.com/​f​i​r​e​b​u​g​l​i​t​e​#​S​t​a​ble

Browser-​​interne Funk­tio­nen (als Firebug-​​Ersatz)

Mitt­ler­weile haben alle aktu­el­len Brow­ser die meis­ten Firebug-​​Funktionen inte­griert, es ist also nicht unbe­dingt ein Addon not­wen­dig. Sogar die Ansicht ist der Firebug-​​Ansicht sehr sehr ähnlich. Pro­biert ein­fach aus, was euch mehr zusagt.

• In Fire­fox, Chrome, Opera: Rechts­klick > „Ele­ment untersuchen“
• In Inter­net Explo­rer: Haupt­menü > „F12 Entwicklertools“
• In Safari: zuerst in den Ein­stel­lun­gen unter „Erwei­tert “ ein Häk­chen vor „Menü ‚Ent­wick­ler‘ in der Menü­leiste anzei­gen“ set­zen und dann steht im Menü „Ent­wick­ler“ der Punkt „Web­in­for­ma­tio­nen ein­blen­den Strg+alt+I“ zur Verfügung

Web Deve­l­oper Toolbar

Ver­schie­dene Tools zusam­men­ge­fasst in einer Tool­bar, bspw. las­sen sich Funk­tio­nen gezielt deak­ti­vie­ren und Sei­ten­in­halte und –code vali­die­ren.
Down­load für Fire­fox und Chrome unter: chris​pe​de​rick​.com/​w​o​r​k​/​w​e​b​-​d​e​v​e​l​o​per
In Safari ste­hen einige die­ser Funk­tio­nen im „Entwickler“-Menü zur Verfügung.

Yahoo! YSlow

Neben der Fire­bug (bzw. der browser-​​integrierten Netzwerk-​​Funktion) ein prima Tool, um die Lade­ge­schwin­dig­kei­ten zu opti­mie­ren. Gibt Tipps und zeigt Pro­blem­stel­len.
Down­load für alle Brow­ser: deve​l​oper​.yahoo​.com/​y​s​low

AdBlock

Jaaa, der Wer­be­blo­cker ist auch für die Webent­wick­lung wich­tig. Damit lässt sich prima prü­fen, ob wich­tige Ele­mente oder Funk­tio­nen auf eige­nen Sei­ten viel­leicht blo­ckiert wer­den, obwohl sie eigent­lich in Ord­nung sind.

• für Fire­fox: adblock​plus​.org/de
• für Chrome und Safari: code​.google​.com/​p​/​a​d​b​l​o​c​k​f​o​r​c​h​r​ome

Online-​​Tools

Responsive Web Design Tes­ting Tool

Responsive Web Design ist der­zeit das „hei­ßeste Thema“, wenn es um Web­de­sign geht, aber sel­ten hat man alle Geräte in allen Grö­ßen zur Ver­fü­gung. Abhilfe schafft da das „Responsive Web Design Tes­ting Tool“ von Matt Kers­ley. Ver­schie­dene Geräte-​​Größen wer­den auf einer Seite simu­liert. Aber Ach­tung, die Sei­ten wer­den nur in ihrer Größe ver­än­dert, gerä­te­spe­zi­fi­sche Rendering-​​Eigenheiten wer­den nicht berück­sich­tigt. Eine (zuge­ge­ben halb­gare) „Lösung“ ist, die­ses Tool in ver­schie­de­nen Brow­sern auf­zu­ru­fen (mit Chrome und Safari hat man schon­mal zwei große mobile Sys­teme recht ähnlich dargestellt).

Web­fonts

Hach ja, ich liebe gute Schrif­ten und glück­li­cher­weise hat sich in die­sem Bereich in den letz­ten Jah­ren so eini­ges getan. Web­fonts sind schwe­rer im Kom­men, als gifs in den 90ern. Die Mög­lich­kei­ten wer­den immer umfang­rei­cher und unüber­schau­ba­rer. Hier mal einige Mög­lich­kei­ten und Tools:

• Typekit: Eine Menge gei­ler Fonts für eine Menge Schot­ter, eine kos­ten­lose Vari­ante gibt es auch
• Google Web Fonts: Aus der Kate­go­rie „Derbe gei­ler Kram“ bie­tet Google der­zeit schlappe 500 Font-​​Familien zum freien Down­load und zum freien Ein­bin­den an. Viel Schrott Viele Display-​​Schriften, aber auch Unmen­gen wirk­lich brauch­ba­rer und umfang­rei­cher Schriftfamilien.
• Font Squir­rel: Das Eich­hörn­chen bie­tet — wie Typekit und Google — eben­falls eine recht umfang­rei­che Palette (kos­ten­los) ein­bind­ba­rere Fonts an. Aber als klei­nes (eher rie­si­ges) Spe­cial gibts noch den „@font-face Gene­ra­tor“ — Schrif­ten (deren Lizenz­be­din­gun­gen dies zulas­sen) hoch­la­den und zu einem Kom­plett­pa­ket ver­schnü­ren las­sen. Unter­stützt durch die vie­len gene­rier­ten For­mate  jeden (!!!) Brow­ser und lie­fert gleich die pas­sen­den Style­s­heets mit.
• Type­tes­ter: Mit­tels Type­tes­ter las­sen sich drei Schrif­ten recht gut mit­ein­an­der ver­glei­chen (wich­tig für Lauf­weite, x-​​Höhe, Ver­sal­höhe, …), um even­tu­ell schöne Sets oder Ersatz­schrif­ten fin­den zu kön­nen. Hier­bei lässt sich aus einer umfang­rei­chen Liste von Standard-​​Schriften (safe-​​list, Win default, Mac default, …) und auch aus im Sys­tem instal­lier­ten Schrif­ten wäh­len, sodass auch mög­li­che Web­fonts (so sie denn aktu­ell auf dem Rech­ner instal­liert sind) mit ein­be­zo­gen wer­den können.
• dafont: Ein umfang­rei­ches Archiv kos­ten­lo­ser Schrif­ten, die sich teil­weise als Web­fonts ver­wen­den las­sen dür­fen. Viele coole, viele schrot­tige, viele komi­sche Schrif­ten — the­ma­tisch sortiert.
• Sil­ben­tren­nung funk­tio­niert in Word, InDe­sign, usw., aber im Inter­net sieht es damit eher dünn aus. Abhilfe schafft, dass die Brows­er­her­stel­ler teil­weise offen­bar an die­sem Thema dran sind und Lösun­gen erar­bei­ten. Bis diese jedoch auch im Deut­schen funk­tio­nie­ren müs­sen wohl wei­ter­hin Skripte wie der hyphen­a­tor ran. Mehr zu die­sem Thema unter praegnanz​.de/​w​e​b​l​o​g​/​d​i​e​s​e​-​b​r​o​w​s​e​r​-​s​i​l​b​e​n​t​r​e​n​n​ung.

Pro­gramme

Adobe Dream­wea­ver

Defi­ni­tiv der Teil, der sich auf Dauer gese­hen am meis­ten für Adobe gelohnt haben dürfte, als sie Macro­me­dia ein­ge­steckt haben. GoLive war Schrott, Dream­wea­ver ist und bleibt der Stan­dard. Umfang­rei­cher geht fast nicht mehr, die Funk­tio­nen (und die hef­ti­gen Preise) könnt ihr euch gern bei Adobe anse­hen. Ich will defi­ni­tiv nicht mehr ohne die­ses Pro­gramm an html, php, css, js und der­glei­chen arbei­ten.
(Kos­ten­lose Edi­to­ren gibts zu Hauf, ich habe in Dream­wea­ver inves­tiert und es bis­her nicht bereut. Sicher ist, dass sich ein gro­ßer Teil der Funk­tio­nen auch mit kos­ten­lo­sen oder kos­ten­güns­ti­gen Tools errei­chen lässt, Google hilft da sicher weiter.)

Cyber­duck

Die Ente macht Laune und ist mehr als nur ein FTP-​​Client. Ver­schie­dene (Cloud-)Dienste las­sen sich pro­blem­los ein­bin­den. Läuft und ist kostenlos.

Tumult HyperEdit

Hach ja, lang ist es her, da hatte ich noch kein Dream­wea­ver am Start und unter MacOS war meine erste Wahl HyperEdit. Ein leich­ter Edi­tor mit prak­ti­schen Funk­tio­nen, wie dem inte­grier­ten WebIn­spec­tor aus Safari, erleich­terte mir damals ( :D ) das Skrip­ten und Schrei­ben. Heute ist 2012 und HyperEdit wurde seit der grau­sa­men Ewig­keit von 4 Jah­ren nicht mehr wei­ter­ent­wi­ckelt. Schade, aber ich emp­fehle es den geneig­ten Mac-​​Nutzern immer­noch gern. (Auch hier gibt es sicher noch einige ganz tolle Alternativen.)

Res­sour­cen

Unmen­gen an tol­len Sei­ten war­ten mit Tipps, Tuto­ri­als, Mate­rial, … auf geneigte Leser_​Innen, hier möchte ich einige (mei­ner Mei­nung nach) inter­es­sant davon vor­stel­len (oder auch nur auflisten).

• Mozilla Deve­l­oper Net­work
  Ja, ihr könnt von Fire­fox hal­ten, was ihr wollt, aber Mozilla ist mehr als eine Pro­gram­mier­schmiede für einen gute Brow­ser. Hier fin­det ihr eine Menge umfang­rei­chen Mate­ri­als zu aller­lei The­men. Fazit: Prak­tisch und aktuell!
• Adobe & HTML
  Adobes recht fri­scher Ver­such, ein Teil der aktu­el­len Webent­wick­lung zu wer­den und nicht nur die Pro­gramme zu lie­fern. Fazit: Viel Wer­bung für eigene Pro­dukte und nette Web Standards-​​Spielereien, wird mit der Zeit hof­fent­lich noch umfangreicher.
• Sma­shing Maga­zine
  Was die Bild für den Bou­le­vard und die FAZ für die Bür­ger­lich­keit, ist das Sma­shing Maga­zine für Desi­gner. Fazit: Bei ver­schie­dens­ten The­men am Puls der Zeit und teil­weise selbst Trendsetter.

Haha, das wars schon.

Oder auch nicht. Denn ich werde mal ver­su­chen die­sen Arti­kel immer wie­der zu ergän­zen und zu erwei­tern. Also please check back later oder so ;)