POUL ERIK LARSEN
GRAFIKER
logo

Grafiker søger nye udfordringer


Hent CV og uopfordret ansøgning her

Efter 27 år på Herningsholm Erhvervsskole, er jeg blevet fyret med udgangen af juli 2016, på grund af nedgang i elevantallet.

Derfor søger jeg nu nyt arbejde. Så kender du nogen, eller kan du selv bruge mig, så kontakt mig endeligt.

Jeg mener ikke selv, at jeg er klar til at gå på pension. Der findes stadig rigtig mange kreative ideer tilbage i værktøjskassen. Dem vil jeg gerne bruge i et job, enten inden for den grafiske branche, til undervisning eller måske i noget ulandsarbejde. Mit hjerte banker i særlig grad for Kenya, så har du et job der. Så er jeg klar.

Jeg har mange års erfaring inden for undervisning, grafisk design, design, Adobe programmerne samt webproduktion. Jeg vil være en gevinst for de fleste virksomheder.

Jeg kan arbejde selvstændigt eller i teams. Jeg er vant til at opstille og nå mål, beskrive og formidle viden.
Ud over det kan jeg tilbyde mere end 40 års erfaring inden for den grafiske industri og undervisningsverdenen. Og så er jeg selvfølgeligt ikke bange for at tage fat og lære nyt.

Om jobbet er i Herning, Århus, Vietnam, Afrika, et andet sted i verden eller Danmark har ingen betydning. Jeg er klar til at flytte efter jobbet.

Så kender du nogen? Eller er I et firma eller måske flere mindre firmaer der kunne tænke jer at splejse om min løn. Så kontakt mig venligst.

Jeg er klar til at tage fat snarest muligt.

Med venlig hilsen

Poul Erik Larsen

Javascript


På denne side kan du se og læse om forskellige måder at lave navigation og andre ting i javascript.

Navigationen på dette site

Navigationen på dette site er lavet meget enkelt. Det smarte ved sitet her, er at alt læses ind med det samme. Det hele er i en side.
Der kan sagtens tilføjes et databasekald, og dermed give endnu større fleksebilitet på siden og dens indhold. Men som det er lige her, så er det hele på samme side. Hvis du kigger i kildekoden til sitet, vil du se, at både siderne om formål, javascript, html, php og det sidste emne. Alle findes i kildekoden på en gang... altså en ordentlig mundfuld der indlæses på en gang. Og dermed er alt klar til brug. Det er kun at klikke de enkelte emner frem.
Det er samme fremgangsmåde man bruger, når man laver webapps.

For at få det hele til at virke skal der skrives noget javascript, samt linkes til et JQUERY bibliotek...
Vi går efterfølgende ud fra at det har du styr på.

For at få det hele til at virke, skal du nu på de links eller divs, du ønsker at bruge som navigation have sat et funktions-kald.
I dette tilfælde har jeg sat dem på de farvede felter til højre herfor. De er alle udstyret med følgende kode:

<div class="nav1" onClick="side(1)">

Hvis vi ser nærmere på den linje, så er der ikke så meget du ikke har set før. Det er nok mest den del der starter med onClick. Det er da også den der er vigtig her. Det du ser mellem anførselstegnene er et funktionskald til en funktion der hedder side, og tallet i parentesen er en værdi for hvilken side den skal kalde. I dette tilfælde side 1. Du skal nu lave en funktion, som enten kan placeres i en funktionsfil, eller være en del af din side. Jeg har valgt at lave det i en særlig funktionsfil. Så er det lettere at overskue når man skal rette noget.

Funktionsfilen er linket til dokumentet oppe i head-sektionen med følgende kode:

<script type="text/javascript" src="funcs/js_func.js">
</script>


Inde i filen finder du så funktionen, som ser ud som følger:

function side(x)
{
 for(i=1; i<=5; i++)
 {
  if(i==x)
   {
    $('#side'+i).animate({top:'0px'},2000);
   }else{
  
    $('#side'+i).animate({top:'500px'}, 2000);
   }
 }
}


Første linje:
function side(x)
Her defineres funktionen »side«.

{ for(i=1; i<=5; i++) {
I de krøllede klammer (også kaldet væltede tuborg) har vi en for-løkke, som kører de efterfølgende linjer. Først sætter vi en tæller i til en værdi af 1. Dernæst kontrollerer vi om i er mindre end eller det samme som 5, hvorefter vi lægger 1 til i, således den fremover er 2 osv.
i<=5 tallet 5 kommer ud fra at der er 5 knapper der kan trykkes på og derved også 5 divs med sider der kan køre op og ned, sætter du en 6 knap på eller fjerner 1 skal dette tal rettes

if(i==x)
I ovenstående linje sammenligner vi indholdet af i med x, som er det tal vi får puttet ind via onClick værdien (tallet i parentesen). Og hvis værdien er den samme, så udføres det som står i næste linje.

$('#side'+i).animate({top:'0px'},2000);
Dette er så det der skal udføres. I dette tilfælde siges der: JQUERY skal finde den div der har et navn der hedder »side« samt det tal der er i tælleren i. Herefter skal den animere denne div op i postion top 0 på 2 sekunder (2000 milisekunder).

}else{ $('#side'+i).animate({top:'500px'}, 2000); } } }
Og skulle alt det foregående ikke være sandt, skal den så køre resten af scriptet. I dette tilfælde tager den så alle de divs som ikke har det rigtige nummer, og kører i position »top 500px« på 2 sekunder.

Scriptet sørger altså for at kun den div man ønsker at se, er synlig.

Andre javascript-ting

Der er mange andre spændende ting vi kan lave med javascript. Vi skal her se på et par ting, som måske kan komme til gavn på en hjemmeside.
Lad os starte med stort set det vi allerede kan... nemlig at få en eller anden lille boks til at komme ind ved tryk på en knap eller en tekst.

Lad os prøve en knap først... forskellen på en knap og en tekst, er nemlig ikke voldsom. Først laver jeg en div, som vi putter tingene i. Den har en css på som hedder overflow:hidden. På den måde kan man placere ting inde i div'en og give det en position som er uden for div'en. Derved bliver den skjult.

Her er boksen med noget i. Den kan lukkes ved at klikke på teksten

[LUK]


I ovenstående to animationer bruger jeg en multifunktion, som kan modtage flere forskellige informationer, som den kan sætte ind i funktionen, således det virker. funktionen ser ud som følger:


   function animation1(navn, x, y, z, w, h)
   {
       $('#'+navn).animate({left: x, top: y,
       opacity: z, width: w, height: h}, 1000);
   }




Forklaret linje for linje... så står der: Definer funktionen ved navn »animation1«, og giv mulighed for at indtaste følgende parametre: »navn, x, y, z, w, h.

Så kommer det der skal ske i funktionen: $ står for JQUERY skal gøre følgende: find den # (div) der hedder et eller andet »navn«, og animer det til følgende position »left samt et tal«, "top samt et tal«, »opacity samt et tal mellem 1 og 0 svarende til f.eks. 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1«. Disse tal giver en stigende grad af gennemsigtighed.

Dernæst kan man indsætte et tal for en bredde (width) og en værdi for en højde (height). Uden for de væltede tuborg {} skriver man så det antal milisekunder animationen skal vare.

Hvis man kigger lidt på denne funktion, så vil man opdage, at den kan bruges til rigtig mange ting... i dette tilfælde sættes den så i gang af en:
<b onClick="animation1('jsbox',0,0,1,'150px','150px')">

Som du kan se i ovenstående linje, fortælles her, at når b loades, så skal den div der hedder »jsbox« flytte sig til position x=0, y=0, opacity=1, width=150px, height=150px. Som du måske kan regne ud, vil denne type animation give mange forskellige muligheder i forbindelse med load af sider... teksten kan køre ind fra en af siderne... et billede kan køre ind fra en anden side osv.

Lukningen foregår på nøjagtig samme måde, her gør vi blot det, at vi laver en animation der går modsat vej. Altså til en postion der svarer til den startposition som div'en har inden vi starter.

Billedgalleri

Man kan faktisk med noget af det vi allerede har set på, med få midler lave et selvkørende billedgalleri. Det skal vi se nærmere på i dette afsnit.

Først laver vi her en div hvor vi kan vise billederne i. I dette tilfælde laver jeg den lige nøjagtig i den bredde og højde jeg ønsker mit slideshow skal være, nemlig 400 x 75px;

top1 top2 top3 top4


Inde i den div placerer du nu billederne et for et, med nøjagtig samme postion og det øverse billede giver du opacity 1, altså fuldt synligt, og alle de andre opacity 0, altså gennemsigtige... Jeg styler direkte her, idet det faktisk er lettere lige netop i denne situtation. Din kode ser altså således ud:


<div style="width:400px; height:75px; position:relative; background:rgba(204,204,204,1);">

<img id="top1" src="img/top1.jpg" style="width:400px; height:75px; position:absolute; top:0px; left:0px; opacity:1" alt="top1" />
<img id="top2" src="img/top2.jpg" style="width:400px; height:75px; position:absolute; top:0px; left:0px; opacity:0" alt="top2" />
<img id="top3" src="img/top3.jpg" style="width:400px; height:75px; position:absolute; top:0px; left:0px; opacity:0" alt="top3" />
<img id="top4" src="img/top4.jpg" style="width:400px; height:75px; position:absolute; top:0px; left:0px; opacity:0" alt="top4" />
       
</div>  



Læg mærke til at billederne hedder top1, top2 osv. Det er nødvendigt af hensyn til den funktion vi skriver, som skal styre hele showet.

Ovennævnte koder, vil jeg ikke tro umiddelbart volder de store problemer. Lad os nu se på hvad der styrer det hele.
Du skal nemlig også skrive en funktion, som får hele billedshowet til at køre. Det ser du her:

function slider() 
	{
		for(ii=1; ii<=4; ii++) 
		{
			if(ii==top_show)
			{
				$('#top'+ii).animate({opacity: 1}, 2500);
			}else{
				$('#top'+ii).animate({opacity: 0}, 2500);
			}
		}
		top_show++;
		if(top_show>=5)
		{
			top_show=1;
		}
	}




Hvis du n u husker tilbage, så vil du sikkert se, at denne funktion ligner meget noget vi tidligere har set på, nemlig en for-løkke, som fortæller os, at vi har 4 billeder i vores animation, for tallet der skal tælles til er 4.

I næste linje kontrollerer vi om tælleren ii er den samme som variablen top_show. Det ved vi ikke, for vi har ikke sådan en variabel endnu.
Derfor skal du i head-sektionen af din side nu indsætte følgende kode:

var top_show=1;
window.setInterval(slider, 5000);



Jeg forklarer lige disse linjer senere, men som du ser, er første linje den, som definere en variabel »top_show« og sætter værdien til at være 1.

Så nu kan du måske bedre forstå linjen fra før. Altså hvis ii er lig med det som står i top_show, så skal den første linje i variablen sættes til opacity 1 (altså billede 1 skal vises) ellers skal den udføre næste linje... dvs. at gøre det billede der er synligt, usynligt.
Dernæst tillægges der 1 til variablen top_show, hvorefter der kontrolleres om topshow er større end, eller det samme som 5, så skal topshow sættes til en, ellers skal der ikke gøres noget. Derefter vil processen blot gentage sig i et uendeligt loop.

HTML

Jeg har stor erfaring med fremstilling af html, samt at undervise i brugen af html. Derfor vil jeg med tiden begynde at sætte små artikler og andet ind på denne side, for at fortælle om dette fænomen.

PHP

Jeg har også efterhånden nogle års erfaring med PHP-scripting. Ikke at jeg på nogen måde er verdensmester. Men jeg har undervist nogle år på grundforløbet ved Webintegrator-uddannelsen, bl.a. i det helt grundlæggende inden for PHP.

doodles



Tegningerne på denne side, er nogle jeg selv fremstiller, og kan købes. Priser kan ses under billederne.



doodle1
d1 Tush (sort spritpen) (16 x 16 cm) Kr. 500,-
doodle2
d2 Tush (sort spritpen) (16 x 16 cm) Kr. 500,-
doodle3
d3 Tush (sort spritpen) (16 x 16 cm) Kr. 500,-
doodle4
d4 Tush (sort spritpen) (16 x 16 cm) Kr. 500,-
doodle5
d5 Tush (sort spritpen) (16 x 16 cm) Kr. 500,-
doodle6
d6 Tush (sort spritpen) – kombineret blyant/tusch (16 x 16 cm) Kr. 500,-
doodle6
d7 Tush (sort spritpen) – kombineret blyant/tusch (16 x 16 cm) Solgt
doodle8
d8 Tush (sort spritpen) – kombineret blyant/tusch (16 x 16 cm) Solgt
doodle9
d9 Tush (sort spritpen) – kombineret blyant/tusch (16 x 16 cm) Solgt
doodle10
d10 Tush (sort spritpen) – kombineret blyant/tusch (16 x 16 cm) Solgt
doodle11
d11 Tush (sort spritpen) (16 x 16 cm) Solgt
doodle12
d12 Blyant (15 x 15 cm)Kr. 500,-
doodle13
d13 Tusch og blyant (16 x 16 cm) Kr. 500,-
doodle14
d14 Tusch (16 x 16 cm) Kr. 500,-
doodle15
d15 Tusch (16 x 16 cm) Kr. 500,-
doodle16
d16 Tusch og blyant (16 x 16 cm) Afsat
doodle17
d17 Tusch og blyant (15 x 15 cm) Kr. 500,-
doodle18
d18 Tusch og blyant (15 x 15 cm) Kr. 500,-
doodle19
d19 Tusch og blyant (15 x 15 cm) Kr. 500,-
doodle20
d20 Tusch og blyant (15 x 15 cm) Kr. 500,-
doodle21
d21 Tusch (16 x 16 cm) Afsat
doodle22
d22 Tusch (sort og grøn 15 x 15 cm) Kr. 500,-
doodle23
d23 Tusch (15 x 15 cm) Kr. 500,-
doodle24
d24 Tusch (15 x 15 cm) Kr. 500,-
doodle25
d25 Tusch (15 x 15 cm) Kr. 500,-
doodle26
d26 Tusch (15 x 15 cm) Kr. 500,-
doodle27
d27 Tusch (15 x 15 cm) Afsat
doodle28
d28 Tusch (15 x 15 cm) Kr. 500,-
doodle29
d29 Tusch og guld (15 x 15 cm) Kr. 500,-
doodle30
d30 Tusch (15 x 15 cm) Kr. 500,-
doodle31
d31 Tusch (15 x 15 cm) Kr. 500,-
doodle32
d32 Tusch (15 x 15 cm) Kr. 500,-
doodle33
d33 Tusch (15 x 15 cm) Kr. 500,-
doodle34
d34 Tusch (15 x 15 cm) Kr. 500,-
doodle35
d35 Tusch og blyant (15 x 15 cm) Kr. 500,-
doodle36
d36 Tusch og blyant (15 x 15 cm) Kr. 500,-
doodle36
d37 Tusch og blyant (15 x 15 cm) Kr. 500,-