Webdesign - stærkt hjulpet af Firefox

web developer toolbar var i hvert fald helt vildt rar sidst jeg designede hjemmesider. colorpicker tror jeg den hed var også rigtig god.

Nu er det dog lidt tid siden - men mon ikke de stadig er der.

Og Peter: husk også konqueror når du tjekker om siden virker.

browsershots.org er et godt værktøj - se også http://www.version2.dk/artikel/5080

Når du nu alligevel har droppet livrem og seler (prekompileret kode ER nu noget nemmere at have med at gøre :-)*), hvorfor så ikke kaste dig over web 2.0? Jeg tænker her på AJAX.

*) når du engang bliver træt af Perl/PHP - jeg antager du anvender det som back-end, bør du kikke på Python, og specielt PSP (Python Server Pages) MoinMoin, Mailman etc.

Hvordan kan AJAX og Web 2.0 på nogen måde lette de problemer som Peter Toft fremdrager værktøjer til?

Og hvordan anvender man Mailman til webudvikling?

Listen er efterhånden blevet lidt lang selvom der dog kan være længe mellem de alle er i brug.

Favoriten er på forunderligvis Dummy Lipsum der kan indsætte lange passager af loren ipsum tekst i textarea-felter. Det er nu en gang befriende ikke selv at skulle finde på tekster når man tester funktionalitet i et CMS (så undgår man også pinlige sludretekster slipper ud ved en fejl - det har jeg en kollega der kan tale med om...).

Colorpickeren som Sune nævner kunne være ColorZilla som jeg også har haft glæde af.

Live HTTP Headers har jeg tidligere brugt, men i dag bruger jeg næsten kun Web Developer til at få vist HTTP-headers (jeg har dog en mistanke om at det kan være HTTP-headers der er modificeret af Firefox man ser -- er der nogen der har erfaring med det?).

Launchy bruger jeg når jeg lige skal se resultatet i en anden browser.

FireBug og MeassureIt har PTO nævnt og er også på min liste.

FasterFox til måle hvor lang tid siden er om at loade (men slå dens
muligheder for netværksoptimeringer og prefetching fra -- ellers får
du jo ikke et tal der kan sammenlignes med dine brugeres).

Live Pagerank til at holde øje med Google PageRanken hvis man også skal
have et øje på SEO.

Screen Grab! til at lave screenshots af hele websiden -- også det af den
man ellers skal scrolle ned.

Server Switcher er god når man har både et produktions- og et
udviklingssite og ønsker at kunne skifte mellem dem nemt og bekvemt.

Til at arbejde med WAP-sites har jeg brugt wmlbrowser-udvidelsen.

michael,

> AJAX og Web 2.0

hmrf ... AJAX er en teknologi (ja, reelt blot anvendelse af JavaScript) og Web 2.0 er et paradigme. Jeg er klar over, at der ofte fejlagtigt sættes lighedstegn imellem de to ting, men det gør det jo ikke bedre, at det gentages her.

:o)

Firebug er et fantastisk plugin, det kan næsten alt hvad man tør håbe på. Men der findes faktisk et plugin til firebug, YSlow - et plugin plugin :).

Det er lavet af Yahoo og analyserer sidens struktur og giver gode råd til at forbedre performance på ens site, såsom at begrænse antallet af http request ved at putte javascript sammen i en fil og gøre parsingen af siden hurtigere ved at have alt CSS i head.

Ellers bruger jeg Web developer som også er nævnt før.

Funktioner -> Fejlkonsol
og
Funktioner -> DOM Inspektør
(som du huskede at få med, da du installerede FireFox)

Dette plugin http://users.skynet.be/mgueury/mozilla/ er simpelthen uundværligt når man skal sikre sig standards-compliance i sine webdesigns. Det validerer dit HTML meget strentg iht. den DTD, du har valgt og giver udførlig rapport på uhensigtsmæssigheder. Og så er det i øvrigt også sjovt i en håndevending at kunne checke alle websites man besøger for deres HTML-kvalitet: grønt ikon i statusbaren betyder alt ok, rødt med kryds at der er fejl, gult at der er ingen fejl men stadig små uhensigtsmæssigehder man bør være opmærksom på.

Mht. tabel-baserede designs, så viljeg sige, med al respekt for erfarne folk: det er da dybt 1990'er mentalitet. Der findes enormt mange tutorials hvordan man laver gode, flotte, robuste og validerende layouts uden tables, kun lutter DIV og SPAN tags. Jørgen Farum Jensens http://www.webdesign101.dk/ har f.eks. et par stykker.

Ser først nu at den allerede er på PTO's liste med sit rigige navn HTML Validator- men pyt, den bør helt sikkert fremhæves ;)

Fint plugin til at vise og manipulere (deraf navnet) request/response data.

Hvis man har et favorit stand-alone-værktøj til det samme, er det naturligvis et unødvendigt plugin.

Et plugin man trykker på, som downloader alle de andre plugins og lader dem slås om filerne, indtil alle er tilfredse med resultatet :-)

Poul-Henning

HTML Validator-pluginet er udmærket, men jeg vil anbefale, at man slår Tidy-parseren fra og nøjes med SGML-parseren.

Tidys sondring mellem fejl og advarsler lader en del tilbage at ønske, hvorfor jeg vil mene, at den forvirrer mere, end den hjælper. SGML-parseren er til gengæld udmærket, så længe man holder sig fra at kode XHTML (hvilket der også er gode grunde til at gøre :-).

"[..]så længe man holder sig fra at kode XHTML (hvilket der også er gode grunde til at gøre :-)."

Hvilke grunde er det?

Forskellen mellem HTML og XHTML er andet end blot syntaks. I XHTML er DOM-træet lidt anderledes, hvilket har betydning, når man koder JavaScript. Et eksempel er document.body.tagName - i HTML er værdien 'BODY', mens den i XHTML er 'body'. Ligeledes er der ved tabeller nogle forskelle, hvor table.firstChild i HTML altid vil være et tbody-element (eller thead eller tfoot), også selvom <tbody> ikke optræder i koden - i XHTML er tbody-elementet der kun, hvis det eksplicit optræder i koden. Desuden er ting som document.write() i praksis udelukket i XHTML.

En sådan forskel er jo ikke i sig selv et problem, bare man er opmærksom på den. Problemet er bare, at kun få browsere understøtter XHTML. Fx vil Internet Explorer (alle versioner) opfatte XHTML som HTML, dvs. at selvom siden er udstyret med en XHTML-DOCTYPE, da vil JavaScript afspejle et DOM-træ som om det var HTML. Firefox har understøttelse for XHTML, men ikke hvis siden sendes med HTTP-headeren Content-Type: text/html, hvilket er det normale (og en forudsætning for at IE vil vise siden). I Firefox bliver XHTML-sider desuden vist langsommere end HTML-sider, idet siden først renderes, når hele filen er hentet ned, modsat HTML-sider, der kan renderes, efterhånden som data hentes ned (dette problem er løst i Firefox 3, der netop er kommet i beta).

På flg. URL kan du se forskellen på at sende samme side med forskellig Content-Type:
http://test.dr.dev.peytz.dk/xhtml.php

Man kan altså godt kode sine sider i XHTML, men da browserunderstøttelsen er så broget, giver det kun endnu flere problemer med uensartet opførsel på tværs af browsere. Mange vælger i dag at sætte en XHTML-DOCTYPE på deres sider, men så længe de serveres som text/html bliver de opfattet som HTML i alle browsere, og rigtig mange af disse sider vil slet ikke virke, hvis browseren rent faktisk opfattede dem som XHTML. Fx er Firefox meget mindre tilgivende over for små kodefejl, når den fortolker siden som XHTML.

Nogle vil måske mene, at HTML er mindre "fint" end XHTML, fordi det ikke er rigtig XML, men den opfattelse deles ikke af browserproducenterne. Og hvis man kigger på standardiseringsarbejdet for den næste version af HTML/XHTML, er der heller ikke noget, der tyder på, at HTML er under udfasning. Der findes mere eller mindre akademiske argumenter for det hensigtsmæssige i at bruge et XML-baseret sprog, men de overskygges i mine øjne de praktiske problemer med at få skidtet til at fungere i bl.a. IE og Firefox.

Så jeg vil mene, at man i lang tid fremover vil gøre livet lettere for sig selv ved at skrive sine sider i HTML frem for XHTML.

Jeg må tilstå at jeg på min mac har en vmware fusion kørende med en xp installation i ALENE for at kunne teste ting i IE. Det er skræmmende - især fordi det er sandt :-(

Gad vide om der ville være ramaskrig eller jubel hvis et af de største danske websites ikke virkere i IE?