Några tips om verktyg som jag använt för att tillverka webbsidor

Allmänt
Webb-editor
“Frames” eller “Server Side Includes”?
”Tables” eller ”Style sheets”?

Glidande meny
Färgskala och fonter
Bildhantering
Att göra ett ansikte i en bild suddigt
Bildscanning
Textscanning
Döda länkar
Backup

Allmänt

I samband med tillverkning av Intranät- och Intranet-sidor i HTML under de senaste 15 åren, har jag samlat på mig en del erfarenheter och verktyg som kanske kan komma till nytta, eller åtminstone ha historiskt intresse. Jag har f.ö. använt samma verktyg på min arbetsplats (utom scanner och OCR).

Det ska genast sägas, att jag inte gjort några djupdykningar och jämförelser. Det är mera en slump vad jag fastnat för. Jag har en förkärlek för billiga och enkla verktyg och metoder. Risken är förstås att man fastnar i det som fungerar, även när modernare verktyg skulle kunna ge effektivitetsvinster. Jag mottar gärna tips om sådant. Det är aldrig för sent att lära!

Webb-editor

När jag började redigera webbsidor ca 1997, provade jag flera olika program inkl Frontpage, Homesite, Dreamweaver och flera andra.

Jag avskydde Frontpage, som - åtminstone vid den tiden - gjorde om HTML-koden efter eget huvud och formaterade den så att den blev mycket svår att läsa. Fastnade för Dreamweaver 2, som jag använt alltsedan dess.

Det har kommit ut flera senare versioner: Dreamweaver 3 och 4, Dreamweaver Ultradev och Dreamweaver XM; men eftersom Dreamweaver 2 fungerar bra för mig, har jag inte brytt mig om att ”uppgradera”. – Men jag har inte använt så mycket av finesserna.

“Frames” eller “Server Side Includes”?

I allmänhet vill man ha delvis samma innehåll på många sidor (t.ex. länkar till andra sidor). Ett enkelt sätt, som man lätt förleds att tillgripa i början, innan man tillverkat så många sidor, är att använda redan tillverkade sidor som förlagor att kopiera och redigera. Detta är förkastligt, för det kan tvinga en att ändra tjogtals med sidor när man senare vill införa en liten ändring i en navigeringslist.

Två bättre sätt är att lägga gemensamt innehåll i en särskild ”frame” eller att isolera det via ”server side includes” (där servern hämtar den gemensamma filen när sidan ska presenteras).

Jag använde tidigare ”frames” i arbetet. Det finns en del problem kring ”frames”, bl.a. kring bokmärken och sökbarhet. Nu tycker jag att SSI är enklare att hantera.

Anm: "When experimenting with pages that support SSI it is important to ensure the pages are actually served up by the Apache web server. A common mistake web designers make is to work on local HTML files in a work directory and directly open the web pages in a browser. In this situation the SSI includes are not activated because the pages are not being handled by the web server. When testing always upload the pages to the web server." Source: http://www.linuxtopia.org/HowToGuides/apache_ssi.html

”Tables” eller ”Style sheets”?

Det finns ingen självklar metod att arrangera text och bilder på en webbsida. Utgivaren har sina idéer om hur innehållet ska presenteras, men användaren kanske har andra behov eller önskemål (annan browser, annan skärmstorlek, bättre eller sämre synskärpa, arbetar med flera ”fönster” på skärmen…).

Den äldsta och enklaste metoden att arrangera materialet är att använda tabeller (”tables”). En i princip bättre metod är att använda ”cascading style sheets” (CSS), där formateringen skiljs från innehållet. Där får utgivaren bättre kontroll över presentationen (vilket visserligen inte alltid är positivt, t.ex. sätts ofta knappen ”fontstorlek” ur spel). CSS är dock mera komplext – det tar tid att lära sig, och det är inte enklare att begripa och underhålla än grundläggande HTML, särskilt om man inte gör det dagligen.

Några citat på webben:

K.I.S.S. means keep it simple and that means tables because tables are simple. And they also work! The future of the web is FULL CSS so you should start learning it now.

Enligt experterna har både tabeller och CSS sin plats, och det bästa är en kombination. Jag har dock valt att enbart använda tabeller.

Inte heller att använda tabeller är helt enkelt. Resultaten kan bli oväntade. Man behöver lära sig några enkla trick, som att lägga in ”osynliga” pixlar för att hindra celler att ”kollapsa”.

En utmärkt introduktion med exempel finns på http://www.dwfaq.com/Tutorials/Tables/flexible_tables.asp. Användningen av ”osynliga” pixlar beskrivs lättfattligt på http://www.dwfaq.com/Tutorials/Tables/managing_tables.asp.

Glidande meny

I samband med att jag hjälpte en bekant att utforma en webbplats, lärde jag mig att göra en "glidande meny", d.v.s. att åstadkomma att menyn i vänsterkanten följer med när man "scrollar" nedför sidan. En bräcklig kunskap, visserligen, för i skrivande stund gjorde jag det f.f.g. i morse. Jag hittade på webben en förlaga (se www.dynamicdrive.com) som utnyttjar "layers", och tog valda delar av den, utan att förstå vad koden gör. Därför finns det kanske också "död kod" kvar. Det tog mig en hel förmiddag av "trial and error" innan det lyckades för mig. Ett av problemen var att min gamla version av Dreamweaver troligen inte hanterar den moderna koden riktigt, men jag lyckades isolera den delen i en "server side include", som jag kunde redigera med WordPad (under "Tillbehör" i Windows).

Se källkoden till denna sida ("Visa", "Källa"). Den tycks fungera som avsett, åtminstone i Internet Explorer ver. 6, men jag kan inte garantera att den är felfri. - Philip Chalmers påpekade den 11 dec. 2007 att menyn glider iväg, om bildskärmens upplösning ställs om till 800 * 600 pixel.

Färgskala och fonter

Min uppfattning var och är att endast milda pastellfärger bör användas för att ge struktur utan att läsbarheten försämras. Grälla färger bör undvikas. Man bör också undvika att lasta ner sidorna med för mycket gods som avleder uppmärksamheten och försvårar navigeringen. Animeringar och blinkande text bör helt portförbjudas på indexsidorna.

För fonter står valet i allmänhet mellan New Times Roman och Arial (inkl. varianter). Det är ingen slump att Times används av tidningarna. Intressant nog visar läsbarhetsundersökningar att yngre läsare ofta föredrar Arial, medan äldre läsare gillar Times.

Bildhantering

Jag använder MS Paint för redigering på pixelnivå och för retuschering, för vridning och beskärning, och för att lägga in bakgrundsfärger.

Exempel på retuschering i MS Paint:

För konvertering (komprimering) till GIF- och JPG-format använder jag Irfan, som är ett bra Shareware-program på Internet. Jag använder det också för lite mera avancerad redigering: för att ändra kontrast och gråskala, för att minska antalet färger/gråvärden, och för att kantfiltrera.

För placering av bilder på webbsidor använder jag ”Tables” i Dreamweaver, som nämnt, tillsammans med ”Alignment”-attributet (Left, Center, Right).

När man vill styra placering av bilder, är ett bra knep (som det tog mig lång tid att hitta), att explicit avsluta det område där man använder en viss ”alignment” (left, center, right) med <BR CLEAR="all"> i HTML-koden.

Ibland är det praktiskt att hämta bilder direkt från skärmen, s.k. skärmdump. Det kan man göra genom att trycka på <Alt> och <PrtScr> tangenterna och sedan klistra in i MS Paint.

Att göra ett ansikte i en bild suddigt

Någon gång kan det vara önskvärt att göra ett ansikte eller ett objekt suddigt i en bild, för att skydda den personliga integriteten. Det finns säkert många verktyg och metoder tillgängliga för att åstadkomma det, men jag blev glatt överraskad, när det visade sig att det går att göra med mina vanliga gratisverktyg Irfan och Microsoft Paint. Se en beskrivning av proceduren här. Man kan välja både graden av suddighet och metoden (t. ex. förstorade pixlar).

I förbigående bör det påpekas att känslig text, som t. ex. kreditkortsnummer, inte säkert blir oläslig genom att man "blurrar till" den. Skälet framgår av denna artikel.

Bildscanning

För att scanna bilder hemma har jag skaffat en Canon Canoscan 8600F. Den fungerar utmärkt på både pappersbilder, dia och text.

Att scanna in tar ca 10 sek. Kan kännas som en lång tid när man ska scanna boksidor, men då det gäller bilder bör man komma ihåg att hanteringen av de scannade bilderna (retuschering, redigering, konvertering, import till web editor) tar mycket mera tid.

Diabilder placeras i en särskild ram. Egentligen borde man förstås ta ut filmen från diaramarna, men det är i praktiken för jobbigt. Resultatet blir tillräckligt bra för presentation på bildskärm, men jag tror inte att skärpan är fullt i klass med vad som finns på filmen.

Textscanning

För att tolka inläst text använder jag ABBYY Finereader 10.

Programmet är snabbt och gör väldigt få fel. Det tycks använda egen ordlista on-line, vilket kan vara förrädiskt, eftersom eventuella misstag inte sticker i ögonen. T.ex. släkten Skalm tolkas konsekvent som Skälm! Ja, just det kanske sticker i ögonen.

Å andra sidan brukar den klara att skilja mellan ”m” och ”r” + ”n” på det viset. Då och då blir det fel mellan siffran ”1”, bokstaven ”l” och bokstaven ”I”, beroende på tryckets kvalitet, och när det kommer någonting oväntat, som ”û” gissar programmet vilt och fel.

Något om mina erfarenheter av att scanna frakturstil här.

Döda länkar

Webbsidor är ofta färskvara: de kommer och går. Jag har massvis med externa länkar. Då och då kontrollerar jag med ett bra gratisprogram: Xenu's Link Sleuth att de fortfarande fungerar. Det är dock omöjligt att hinna hitta alla saknade, och att ersätta dem med ny adress eller bra alternativ. Och den dagen jag "lägger ner pennan" kommer "link rot" att sätta in på allvar.

Då är det tryggt att veta, att hela Internet inkl. denna webbplats sparas av the Wayback Machine då och då. I många fall bör man där kunna hitta även döda externa länkar genom att gå tillbaka till tidigare versioner av de externa platserna. - Arkivet finansieras av en stiftelse, men är så uppskattat som resurs, att man nog kan hoppas på att det kommer att finnas "för evigt".

Backup

Jag använder servern hos mitt ”webbhotell” som ”backup” till vad jag har på min egen disk, och omvänt. Dessutom bränner jag en CD-ROM då och då. På senare tid har jag också börjat kopiera till en extern hårddisk. The Wayback machine, som nämns ovan, ger ytterligare trygghet.

 

Senast ändrat eller kontrollerat den 30 maj 2017.

 

Hemsida
Nyheter
Galleri
Curriculum Vitae
Araguacema
Christofer
Kerstin Amanda

Rymd (eng)

Istider och växthusgaser
Historia
Tedas historia
Liber 1932-1999
Släktträd
Litteratur (eng)
Schack (eng)
Cykling
Sport
Webb-tips
Roliga citat (eng)
Kontakt