Webentwicklung — Toolsammlung

by Medienfuzzi on Juni 14, 2012

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:

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.

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 ;)

Achtung: Vernetzungsgefahr

by Medienfuzzi on April 10, 2012

Die Zei­ten, in denen nur tages­licht­scheue Typen mit dicken Bril­len ihre Bekannt­schaf­ten über das Inter­net pfleg­ten sind — so es sie denn je gab — schon einige Jahre vor­bei. Face­book, Google+, stu­divz, xing und etli­che andere mehr oder weni­ger spe­zia­li­sierte Online-​​Communities war­ten dar­auf bevöl­kert zu werden.

Und wie es sich „gehört“, bin auch ich auf eini­gen die­ser Platt­for­men zu fin­den. Ihr dürft euch gern mit mir ver­net­zen oder euch diese Sei­ten ein­fach anschauen ;)

Viel Spaß!

Face­book

www​.face​book​.com/​o​l​a​f​w​a​l​t​h​e​r​.de

Brand­neue Seite, diese werde ich vor­aus­sicht­lich auch sehr aktiv betreuen!

Xing

www​.xing​.com/​p​r​o​f​i​l​e​/​O​l​a​f​_​W​a​l​t​h​er2

Business-​​Netzwerk-​​Dingens … prak­tisch und irgend­wie erwachsen ;)

dasauge

www​.dasauge​.de/​-​o​l​a​f​w​a​l​t​her

Hier bin ich noch nicht wirk­lich aktiv gewor­den, aber ich gebe mir Mühe … ehrlich.

flickr

www​.flickr​.com/​p​h​o​t​o​s​/​m​e​d​i​e​n​f​u​zzi

Urge­stein, aber seit einer län­ge­ren Zeit schon nichts neues mehr, ich werde aber erst ein­mal dort blei­ben und auch wei­ter­hin Fotos hoch­la­den (wenn ich dazu komme). Alter­na­ti­ven, wie 500px, sind durch­aus wirk­lich inter­es­sant, aber man muss nicht alles mit­ma­chen und ein Netz­werk wan­dert nicht ein­fach so von Platt­form zu Plattform.

Twit­ter, Google+, studivz, …

Das tut mir fast schon leid, aber ich mache nicht (mehr) jeden Kram mit. Twit­ter raubt in der akti­ven Bear­bei­tung zuviel Zeit, Google+ bringt mir neben Face­book kei­ner­lei Mehr­wert und stu­divz … naja, reden wir nicht drüber ;)

Mal eine Empfehlung: Readability

by Medienfuzzi on März 7, 2012

Es gibt schein­bar unend­lich viele Dienste im Inter­net, wel­che uns das Kon­su­mie­ren des Sel­bi­gen noch ange­neh­mer und schö­ner und ein­fa­cher und … machen sol­len. Ein Dienst, wel­cher defi­ni­tiv her­aus­sticht, ist Reada­bi­lity.

An ers­ter Stelle stand für die Ent­wick­ler das Ziel, Arti­kel bes­ser les­bar zu machen, die Sei­ten zu ent­schla­cken. Zuerst mit­tels Book­marklets, wel­che Arti­kel in eine ein­fa­che Form brach­ten, mitt­ler­weile gibt es Browser-​​Addons, Smartphone-​​Apps und die Inte­gra­tion in ver­schie­dene andere Apps. Ziel ist immer­noch das selbe: Arti­kel auf Blogs, News­sei­ten, … wer­den auf das Mini­mum redu­ziert: den Text und (wahl­weise) die Bil­der zum Text. Wer­bung, Social-​​Network-​​Kram, Emp­feh­lun­gen und Kom­men­tare wer­den ent­fernt, der Text ist bes­ser les­bar, als bei den meis­ten Web­sei­ten (dies liegt an den ver­wen­de­ten Schrif­ten und den ver­wen­de­ten Farbkombinationen).

Seit einer Weile ist nun auch die Funk­tion „Read Later“ hin­zu­ge­kom­men. Mit die­sem But­ton könnt ihr lesens­wer­ter Arti­kel direkt auf eine eigene Rea­ding List set­zen und spä­ter in gewohnt ansehnlich-​​entschlackter Form lesen. Eine Anmel­dung ist für die­sen Teil des Ser­vices aller­dings erfor­der­lich, wer „nur“ Arti­kel in der bes­ser les­ba­ren Form haben möchte, kann auf eine Regis­trie­rung verzichten.

Ich kann Reada­bi­lity nur emp­feh­len. Gerade län­gere Arti­kel ver­ur­sa­chen damit weni­ger Kopf­schmer­zen, die Augen haben mir schon oft gedankt. Den Dar­stel­lungs­stil „Inverse“ habe ich dabei ins Herz geschlos­sen — hell­graue Seri­fen­schrift auf dun­kel­grauem Untergrund.

Und weil ich die­sen Ser­vice so toll finde, habe ich ihn gleich mal hier ein­ge­bun­den. In der Side­bar fin­det ihr ab sofort ganz oben die Mög­lich­keit Arti­kel direkt an Reada­bi­lity zu sen­den — zum gleich oder spä­ter lesen. Viel Spaß.

There we go again …

by Medienfuzzi on November 24, 2011

Word­Press ist ein­ge­rich­tet.
Plugins sind instal­liert.
Das Theme ist aus­ge­wählt und installiert.

Na dann kann es ja end­lich wie­der los gehen.

Vor fast zwei Jah­ren hatte ich auf Medi­en­fuz­zis Blog mei­nen letz­ten Bei­trag ver­fasst. Seit­dem hat sich viel getan … zwei Jobs, etli­che Pro­jekte — pri­vat, geschäft­lich, wie auch poli­tisch — und viele wesent­li­che gewon­nene Erfah­run­gen spä­ter bin ich in Leip­zig gelan­det. Und aus dem schö­nen Leutzsch werde ich die Welt von nun an wie­der mit eini­gen mehr oder weni­ger inter­es­san­ten Bei­trä­gen belästigen.

Ich wün­sche viel Spaß beim Lesen.