EN DYNAMISK LAY-
OUT MED STATISKA
ELEMENT!

Den här sidan är skriven med tanke på - framför allt - personer med synsvårigheter.
(Läs mer om det i högerspalten)

Men den ska också kunna anpassa sig efter den storlek på webbläsare man har, utan att man förlorar alltför mycket av lay-outen.

Minsta bredd är c:a 690 pixlar (lite drygt tre sådana här spalter) och största bredd är hela skärmen. Prova får du se!


Liten browser (ung 690 bred)
Skärm 1680 x 1050


Full skärm (1680 x 1050)

Som du ser anpassar sig alla delar i mittenspalten - även bilderna - till den totala bredden. D v s allt utom den engelska flaggan i länken "My GBand-page in English" och Boteå-loggan i länken till botea.se. De blir bara större när texten ökar i storlek (mer om det i höger spalt).

Bilderna skalas inte upp hur mycket som helst eftersom de "hoppar ur läge" när de blir för stora.

Varken text eller bilder i de färgade spalterna förändras, eftersom de är statiska.

De är statiska med tanke på att menyer och andra statiska element kan läggas där. De ska ju inte förändras bara för att webbläsaren blir större. Eller mindre.

En annan sak är att alla spalter ska vara markerade ända ner i botten - oavsett hur lite text det är.
Och som du ser så verkar det fungera också.

D v s om man vill ha markerat, som jag. Vill man i stället ha en färgad spalt går färgen ända ner i botten. Som du ser...

NU ÄR "XERXX.SE" MIN HOBBYSAJT  :)


~ Hoppes HobbyHörna ~

Och vad är det för hobbysar då?

Jo, en hobby är musiken... mjaaa... musik och musik...
Men trots min hörselskada tycker jag att det är så #%&!#% kul att göra låtar i GarageBand - den sequencer/DAW som följer med Mac-datorer.

För mig gäller låtar med el-gitarr, piano, el-orgel, bas osv (ska det jafall föreställa) alltså inte electronica / synt-musik.

Sedan sommaren 2009 har det blivit 9 - 10 låtar av skiftande typ och kvalitet... Jag lägger ut dom vartefter på min GBand-sida.   (Där finns också lite goa GarageBand-länkar)

Och LUGN: Jag sjunger inte! (Var glad för det du ;)

( My GBand-page in English)

En annan hobby är programmering... Och webbkodning (HTML, PHP osv) ligger bra till.
Just nu hjälper jag vårt byalag BOTEÅPARLAMENTET med deras nya webbplats: Design, kodning, funktioner och webmaster... Rubbet!
(Njae... Inte innehållet så klart)

Till höger ser du deras förstasida - och det här är en länk till botea.se (eget fönster):
 Boteå i mitt hjärta (Öppnades 1 mars 2011)

Och den här dynamiska sidan som du läser just nu, är ytterligare ett resultat av mina ansträngningar.
(Inte något vidare designad - jag vet!)

Och om jag inte håller på med ovanstående aktiviteter, finns det lite annat jag pysslar och sysslar med...
Som t.ex. att softa och slappa, vilket jag tycker är en synnerligen viktig aktivitet. Och trevlig.
Vi får väl se om jag lägger ut något om lite annat också, så småningom...

Sen vill jag slå ett slag för en favoritsajt: TED.com.
(Den länken och alla nedan öppnar nytt fönster)

Där finns mer än 800 föredrag och framträdanden att välja mellan:
Allt från vetenskap till galenskap.

Intressant & fascinerande... Roande & allvarligt... Tankeväckande & lärorikt... Lättsamt & tungt...

Alla filmer jag har sett är på engelska men drygt 100 har faktiskt svenska undertexter.

Några exempel (de två första är svenskar):

SERIÖST - med glimten i ögat: Hans Rosling om U-ländernas utveckling. Du kommer att bli snopen.
(Svenska undertexter finns!) OBS! Han har flera intressanta föredrag; sök på "Rosling" i sökrutan.

INTE SERIÖST - verkligen inte: Lennart Green om genvägar. Han säger ju det i början, jafall...
(Inga svenska undertexter men det behövs egentligen inte - lika kul ändå. Måste ses!)

HÖGTFLYGANDE: Ueli Gegenschatz visar bl.a. hur han flyger i "ving-dräkt". Häftigt!
KOSMOS: Patricia Burchat om mörk materia och mörk energi. Intressant. Tycker jag, alltså...

Där finns FÖREDRAG med Al Gore, Stephen Hawking, Jane Goodall, Bono, Bill Gates, JK Rowling och många många många fler.
Där finns MUSIK som t.ex. Herbie Hancock eller Naturally 7 (beatbox!) och många andra.
Och DANS som t.ex. break-dance (!) och konst-dans.
Och mycket MYCKET mycket mer: T.ex. en som verkligen kan det där med huvudräkning och såna som kan jonglera med mera.

Ja, det är nog sjutton svårare att säga vad som inte finns... Snoka runt så hittar du något du blir intresserad eller road av.
Garanterat!



Hej
H

STATISKA ELEMENT SOM ANPASSAR SIG EFTER TEXTENS STORLEK!

Personer med synsvårigheter kan öka textens storlek så att den blir mer lättläst.

I Firefox, t ex, gör man det med tangenterna Ctrl + (i windows, och Ctrl - minskar) och med tangenterna cmd + (i Mac OS och cmd - minskar) EFTER att man markerat "Zooma bara text".

Det här är inte detsamma som att förstora hela sidan vilket ofta resulterar i att du måste öka webbläsarens storlek eller scrolla i sidled redan vid en liten förstoring.

(Men att förstora hela sidan är ofta det enda sättet att hantera helt statiska sidor eftersom andra element på sidan inte tar hänsyn till en ändring av textens storlek.)

När man ändrar textens storlek i en dynamisk sida, anpassas sidan efter både det och webbläsarens storlek, utan att man förlorar alltför mycket av lay-outen.

Prova själv hur det blir, på den här sidan.


Normal text,
Browser ung 1024 x 768


Förstorad text (4 +),
Browser ung 1024 x 768

Som du ser blir den här spalten (och den vänstra också - även bilderna i spalterna) bredare när textens storlek ökar. Och det mellersta utrymmet blir smalare (och bilderna där blir mindre).

Det är gjort så för att de färgade spalterna ska kunna rymma lika mycket text på bredden oavsett storlek: Menyer, t ex, riskerar ju att helt ändra utseende om bokstäverna blir större men utrymmet inte bredare.

Att bilderna minskar i mittspalten när texten blir större beror på att texten har högre prioritet att synas. Men lägg märke till den engelska flaggan i länken "My GBand-page in English" och hjärtat (Boteå-loggan) i länken till botea.se: De blir större med textstorleken - de tillhör ju länktexten.

Och om du nu kan förstora browsern, anpassas mittspalten efter det eftersom den är dynamisk.


Förstorad text (4 +),
Full skärm (1680 x 1050)

Och till sist ordentligt mycket förstorad text:


Förstorad text (7 +),
Full skärm (1680 x 1050)