Banner   

Topics:  Fotografi    Rejseliv    Lidt af hvert    Teknikhjørnet    Scrapbogen    Pulterkammeret    Site Map    


Indhold:

-Overordnede-
IT

-Sideordnede-
Ubuntu 14.04.1
Java Blues
Kryptering
CPU sikkerhed
Om denne site

Teknikken bag denne web-site

En webside

Seneste opdatering - ændring af encoding. Nederst på denne side.

Hvis man vil opbygge et relativt simpelt web-sted uden de store forchromede søgemaskiner, databaser eller andre dippedutter, så kan en teknik som den her beskrevne måske være tilstrækkelig.

Opbygningen af et web-sted kan opdeles i følgende faser:

Planlægning

Et blad eller et web-sted skal jo indeholde et eller andet. Det lyder jo ret indlysende, men skal det være andet end en ren øvelse i tom teknik, så skal der være ét eller flere budskaber til den undrende verden. Hvis man vil behandle flere emner, så kan det være en idé med en fælles forside, hvorfra man så kan navigere sig frem til de enkelte emneområder. Det er princippet bag dette web-sted.

Den grundlæggende struktur er altså:

En (og kun en) åbningsside for hele web-stedet indeholdende henvisninger til hvert af de på web-stedet behandlede emner.

For hvert emne er der så en slags forside for netop dette emne. Hvis stoffet ikke er stort, kan emnet måske behandles udelukkende på denne ene side. Er der tale om et større emne, kan der være yderligere artikler placerede på en eller flere sider herunder - og så fremdeles. Man skal dog nok begrænse antallet af niveauer i den opståede træ-struktur, hvis læseren skal bevare overblikket.

Ovenstående struktur kan (lidt tilnærmet - der er kommet en sektion om rejser til siden) skitseres som her:

Teknikken bør naturligvis tillade relativt let at fjerne eller tilføje sider / emner efter behov.

Et web-sted, der består af flere sider opdelt i emner evt. med flere artikler indenfor hvert emne, kræver jo en mekanisme - typisk i form af en eller flere menuer - der gør det muligt at navigere rundt i web-stedet, helst på en måde, der afspejler den valgte emneopdeling.

Teknisk set er der mindst to løsninger:

1 At bruge rammer (frames)

Brugen af frames kan være en fordel, hvis siderne skal vedligeholdes helt manuelt, idet en given menu kun forekommer i én fil, selv om den går igen på flere af webstedets sider. Ulempen er, at de enkelte HTML filer ikke hver indeholder en komplet og fuldstændig side med de menuer, der hører til for at læseren kan navigere rundt. Det gør det uhensigtsmæssigt at lave 'deep linking' d.v.s. henvisninger direkte til en artikel inde i web-stedet udenom forsiden.

2 At inkludere menuer på alle sider

Det indebærer, at samme menu måske skal inkluderes på mange sider (i mange filer). Ulempen her er, at det meget hurtigt bliver uoverkommeligt at gøre dette manuelt, idet en ændring ét sted kan udløse lavineagtig ændring af de berørte menuer på adskillige andre sider.

Dette problem kan løses på to måder:

  1. Enten ved brug af 'server side includes' - hvilket betyder, at webserveren tolker en bestemt konstruktion i HTML filen og styret heraf indsætter menufilens indhold på rette sted inden resultatet sendes til klienten (typisk en web browser).
  2. Eller ved automatisk at inkludere alt materiale og opbygge de færdige sider, inden det hele uploades fikst og færdigt til serveren.

Det er denne sidste metode, jeg benytter - men herom senere.

Forfattervirksomhed

 

Kildetekster

Når jeg bygger et web-sted som dette, bruger jeg en 'web-builder' af egen tilvirkning. En af Forudsætningerne for at denne kan virke er, at alle de enkelte artikler (HTML) filer, der indgår i web-stedet, er placeret i en direktorie struktur, hvis opbygning nøje svarer til den navigationsstruktur, det færdige web-sted skal have. Med disse sider - som de ser ud i den skrivende stund, så ligger kildefilerne i en direktoriestruktur, der ser ud som følger:

		.
	./50_photo
	./50_photo/40_gallery
	./50_photo/40_gallery/10_gall_art
	./50_photo/50_photo_art
	./52_travel
	./52_travel/90_usvi
	./60_weblog
	./70_technical
	./70_technical/10_it
	./70_technical/10_it/11_it_articles
	./70_technical/20_other
	./70_technical/20_other/21_tech_articles
	./90_scrapbook
	./90_scrapbook/12_skoletid
	./90_scrapbook/12_skoletid/10_skolehistorier
	./90_scrapbook/12_skoletid/10_skolehistorier/18_tr45
	./90_scrapbook/12_skoletid/10_skolehistorier/20_rg50
	./90_scrapbook/15_milli
	./90_scrapbook/15_milli/10_in_the_army
	./90_scrapbook/20_skydive
	./90_scrapbook/20_skydive/10_skydive_art
	./90_scrapbook/25_gliding
	./90_scrapbook/25_gliding/10_gliding_art
	./90_scrapbook/30_skulpturpark
	./92_museum
	./92_museum/20_collection
	./99_sitemap
	

Alle HTML filerne kan så redigeres med f.eks. Bluefish (fulde navn: Bluefish - et Linux Open Source baseret Web tool), billeder og andre filer kan tilføjes. Der findes uden tvivl også andre muligheder, men Bluefish er mit valg, efter at det tool, jeg tidligere brugte, er udgået.

Layout

I strukturen arbejdes både med '*.HTML' og '*.html' filer. HTML filerne kalder jeg 'container' filer, idet de indeholder de layout elementer, der skal være fælles for alle artikelfilerne (*.html) i det pågældende direktorie - som jo typisk vil indeholde artikler om samme emne.

*.html filerne er de egentlige artikelfiler, d.v.s. de indeholder kun det egentlige stof og ikke menuer og andre fælles elementer.

For at kunne benytte en standard html editor er det nødvendigt, at artikelfilerne (*.html) selv er komplette html filer, d.v.s. de skal indeholde <html>...</html> tags og alt det der. Da artikelfilerne imidlertid senere i byggeprocessen skal inkluderes i containerfilen, så indgår det i web-builderen at skrælle artikelfilerne for alt andet end selve det egentlige indhold.

Derfor er det en god idé at gemme en template for artikelfiler. Denne template kan så kan bruges som udgangspunkt, når en helt ny artikel skal forfattes.

Da sondringen mellem container og artikelfiler beror på, om fil extension er skrevet med stort eller ej, så kan det ikke bruge på MS Windows direkte. Her må laves en anden (og efter min mening) mindre elegant løsning, som jeg dog ikke vil komme nærmere ind på her.

Bygge siderne med WebBuilder (wb)

Når alle filer med kildetekst, billeder m.v. er på plads, så kører jeg så den hjemmebagte WebBuilder med kommandoen wb. Det starter følgende operationer:

A) Med udgangspunkt i top direktoriet i web filstrukturen analyseres denne, idet der genereres lister over container og artikelfiler. Da strukturen fremgår af disse lister, så rummer de altså også oplysning om navigations strukturen i det færdige web-sted. Som et led i denne analyse læses filernes <title> tag værdi (d.v.s. artiklens titel, der efterfølgende bruges i links som den synlige text, der kan klikkes på).

B) Baseret herpå genereres nu et antal *.mnu (menu) filer i hvert kildetekst direktorie. Eksisterer der allerede sådanne, overskrives de blot. Jeg benytter fem typer:

  1. home.mnu er en HTML snut, der kan indsættes i hver sides top-banner, som dermed kan klikkes på, således at man fra alle sider kan gå direkte til forsiden.
  2. master.mnu er en menu, der kun omfatter de sider, der ligger på niveauet lige under forsiden. Disse sider vil typisk repræsentere web-stedet hovedemner, som derfor fra alle sider kan tilgås direkte. Jeg bruger den til den vandrette menu, der går igen på alle sider undtagen forsiden.
  3. parent.mnu er en menu, der typisk (bestemt af containerfilen) er placeret i et panel. der udgør en indholdsfortegnelse over de artikler, der findes i niveauet lige over det, man i øjeblikket befinder sig på. Den giver mulighed for at navigere 'op' i træstrukturen.
  4. sibling.mnu er ligeledes placeret i indholdsfortegnelsen for nuværende emne. Henviser til artikler, der er sideordnede i strukturen.
  5. child.mnu i indholdsfortegnelsen for nuværende emne. Henviser til artikler, der er underordnede i strukturen. 'Underordnede' i den forstand, at der kan være tale om artikler af uddybende art. De vil så være placeret på næste lavere niveau i strukturen.

Med mindre man befinder sig på øverste niveau (åbningssiden), vil der altid være en 'parent.mnu'. Derimod vil der kun dannes 'sibling.mnu' og 'child.mnu' (sideordnede og underordnede), hvis sådanne sider rent faktisk findes.

C) Til slut køres et gennemløb for hvert direktorie, hvor containerfiles først indlæses og hvor de filer (artikler og menuer), der skal inkluderes, bliver indsat og resultatet skrives til et output direktorie.

Bemærk, at de færdige file inkl. billeder m.v. skrives til et 'fladt' direktorie. Det er enklere, når der senere skal uploades, men det betyder, at der ikke må være navnesammenfald i kildetekst strukturen.

Bemærk desuden, at rækkefølgen i menupunkter afgøres af den alfabetiske sortering af direktorie- og filnavne. Menupunkternes orden kan bestemmes ved at vælge navne, der sorteres på den ønskede måde. Det betyder ikke noget for den tekst, der vises i menupunkterne, den bestemmes som omtalt af <title> tag'et.

Site map

Jeg har også et Perl-script 'wbsm', som kan fremstille en komplet oversigt over samtlige sider i hele web-stedet. Dette skal køres, hvis der er fjernet eller tilføjet sider / artikler. Det er nødvendigt at køre 'wb' først, idet alle siten skal være komplet, før 'wbsm' køres.

Er der tale om en helt ny site, så skal man tillige køre 'wb' igen for også at få den af 'wbsm' fremstillede sitemap med i menuerne. En lille ulempe, men det kan dog godt leve med.

Publicering

Når alle filer er placeret i target direktoriet kan man browse rundt i web-stedet og kontrollere, at menuerne virker o.s.v.

Derefter skal det hele (eller i det mindste de filer, der er nye eller ændrede siden sidst) overføres til webserveren.

Jeg har til det formål to scripts: Et script til at overføre til lokalt (NFS) filsystem hvorfra en privat (d.v.s. ikke udefra tilgængelig) Apache WEB-server og et andet script til at uploade via FTP til extern server.

Princippet er i begge tilfælde, at bash og perl scripts laver lister over alle filer lokalt og remote. Disse sammenholdes så med 'diff'. Baseret herpå genereres så et bash script som sletter gamle og opdaterer eller nykopierer filer fra lokal maskine til server. På denne måde overføres kun de filer, der er nye eller ændrede siden sidst.

Vedligehold

Foretages relativt let ved at

  • tilføje / slette direktorier i kilde strukturen, hvis der er strukturelle ændringer i web-stedet
  • kopiere billeder e.l. ind i de relevante kilde-direktorier opdatere eller oprette nye container (HTML) og/eller artikel (html) filer efter behov
  • køre 'wb'
  • køre 'wbsm'
  • evt. browse rundt i resultatet for check af links
  • publicere ved at køre det eller de dertil indrettede scripts

Ændring af encoding.

I forbindelse med at jeg gik fra Quanta (min tidligere html editor) til Bluefish besluttede jeg at skifte encoding fra Latin-1 (eller ISO-8859-1 som det formelt kaldes ) til Unicode i form af UTF-8. Denne encoding tillader multibyte sekvenser, hvilket muliggør andre tegnsæt end latinske bogstaver.

Det viste sig dog at være lidt af et pillearbejde, idet jeg ikke rigtig kunne få et script lavet, der kunne klare alle operationer i htmlfiler i et hug. Det var nødvendigt, at alle filer endte med at ligge samme sted og under samme navn som før; eller ville det gå rent galt, når siten skulle bygges.

Så det endte med, at gode gamle EMACS måtte klare ærterne endnu engang. Den kunne nemlig både lave ændringerne i "DOCTYPE" tagget, rette "charset=iso-8859-1" til "charset=utf-8", og endelig udskrive hele filen i UTF-8 encoding.

Om - og evt. hvordan man laver macroer i EMACS (det kan man sikkert - EMACS kan jo næsten alt) ved jeg ikke, så jeg måtte alle ca. 200 filer igennem. Ret kedeligt; men nu er det gjort.

WB Systemkrav

  • Linux (formodes at virke også på andre Unix lignende systemer - Windows kræver mindre tilretninger)
  • Perl
  • Bash
  • FTP klient (kommandolinje baseret, da den skal kunne styres fra shell script) eller NFS (til lokal publicering)

Andre systemer

Se nu findes der jo andre, som har fået lignende ideer, men som har udviklet principperne langt videre. F.eks. så har man som en del af Apache's Cocoon project lavet et system, der kaldes 'Forrest'. Jeg har ingen erfaring med dette - jeg klarer mig indtil videre med mit eget hjemmegjorte - men skulle et mere fancy system blive aktuelt, så kunne Forrest måske komme ind i billedet.

Juni 2013

'De Lyse Sider' senest opdateret: Wed Oct 4 11:44:23 2017