Webdesign - stærkt hjulpet af Firefox

I den forgangne uge har jeg på my nye arbejde bl.a. lavet webdesign med XHTML og CSS (som ikke er "public" endnu). Jeg har arbejdet sammen med en grafisk designer om det, og jeg har taget mig af HTML-kodningen. Jeg valgte denne gang at tage fat i XHTML med stylesheets. Jeg er ikke 100% færdig, men jeg har lyst til at dele lidt erfaring med jer, som jeg hjalp mig meget den forgangne uge.

Vi blev enige om at det basale layout skulle være en tabel-struktur, og jeg er desværre ikke en super-ørn til HTML tabeller og slet ikke når noget skal være venstre-centreret, andet midt-centeret osv osv. CSS - Cascading Style Sheets - skulle vi også have for at gøre det "ordentligt". Endnu et området jeg ikke er (var host host) en ørn til ![Eksternt billede](http://www.version2.dk/uploads/smil3dbd4d6422f04.gif" alt=")

Jeg fandt ud af at følgende fire Firefox udvidelser var "gyldne" - en stor tak til udviklerne.

Et af de problemer vi hurtigt løb ind i var at nogle grafik-elementer var for brede. Her fandt jeg "Measurelt" til Firefox var perfekt. I nederste venstre hjørne får jeg et målebånd, så det er nemt at måle hvor mange pixels man har brugt i bredde osv. Perfekt plug-in.

Illustration: Privatfoto

Til at få HTML-koden i vinkel er http://validator.w3.org/ rar, men Firefox plug-in-programmet "Html Validator" er på lokal maskinen perfekt, især hvis man ikke er på nettet, men skal se hvilke HTML-kodnings fejl, der er netop nu.

Et af de steder jeg har sværest ved at lave HTML-koden rigtig er på CSS-området. CSS har jeg skrevet om før.

I kan prøve CSSViewer på http://sgs-ungdom.dk og se hvordan de enkelte stylesheet-elementer bruges. Jeg har lige tilføjet en pil i Gimp for at man kan se hvilket grafisk element jeg har musen henover.

Jeg har tilsvarende anvendt Firebug utroligt meget, fordi den tager en anden indfaldsvej til at lave god CSS-kodning. Man kan traversere HTML-koden, gå ned på et vilkårligt HTML-element og få den CSS-del man anvender. Nice!! Tryk på billedet for at få det i fuld størrelse.


Er der andre smarte plugins til web-design, som I har anvendt, men som jeg har overset? Er der yderligere indspark på ovennævnte
firefox-udvidelser, så er I meget velkomne til at bidrage nedenfor.
Findes tilsvarende til MS IE? ... nå nej.....

/pto

P.S. Vi ses vel til version2s fødselsdags-fest på torsdag!?

Kommentarer (18)
sortSortér kommentarer
  • Ældste først
  • Nyeste først
  • Bedste først
#1 Sune Vuorela

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.

  • 0
  • 0
#3 Peter Toft

browsershots.org burde jeg have nævnt. Den har jeg også brugt på linuxforum.dk som jævnligt havde problemer med MS IE (surprise)...

Man skal ALTID teste med 4-5 browser/OS kombinationer.... der er altid noget som halter lidt. Men alternativet er vel flash, som jeg skisme helst ikke ville ind i... Men der slipper man vel for font-helvedet...

  • 0
  • 0
#4 Michael Rasmussen

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.

  • 0
  • 0
#6 Arne Jørgensen

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.

  • 0
  • 0
#7 Jesper Lund Stocholm Blogger

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)

  • 0
  • 0
#8 Martin Kjeldsen

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.

  • 0
  • 0
#11 Dávur Eyðunsson Sørensen

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.

  • 0
  • 0
#15 Christian Schmidt Blogger

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 :-).

  • 0
  • 0
#17 Christian Schmidt Blogger

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 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.

  • 0
  • 0
#18 Gitte Wange Olrik

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?

  • 0
  • 0
Log ind eller Opret konto for at kommentere