Impelemtering

HTML5

Før jeg begynte med implementeringen av siden hadde jeg bestemt meg for å implementere siden i HTML5, en av grunnene til at jeg bestemte meg for dette var for å kunne lære noe nytt, siden jeg ikke hadde så mye kjennskap til dette fra før. Selvfølgelig kunne dette være noe risikabelt, men jeg syntes det var viktig å ta i bruk nye teknologier.

Det å bruke HTMl5 har noen ulemper med seg, en av de er at HTML5 fremdeles ikke er ferdiggjort, og slik planen er nå, så skal ikke HTML5 være den “rekommanderte” standarden før i 2022. Etter planen så skal en rekommandert “kandidat” være klar i 2012, som da betyr at spesifikasjonen er godt dokumentert og de som jobber med den er fornøyde. Siden HTMl5 spesifikasjonen fremdeles ikke er ferdig, betyr dette at ting fremdeles kan endre seg. Dette betyr at koden på web siden trenger noe mer vedlikehold for å holde den oppdatert med spesifikasjonen.

Men selv om HTML5 er langt fra ferdig, er det ingen grunn til å ikke benytte seg av det idag. De aller fleste moderne nettleser støtter i dag store deler av HTML5 speccen, og Microsoft jobber med Internet Explorer 9, som også skal støtte HTMl5.

HTMl5 har en rekke fordeler som man kan benytte seg av den dag i dag:

  • Mer semantiske HTML-elementer, bl.a. nav, header, footer, time osv.
  • Mindre behov for 3. parts plugins for interaktivt innhold, via video, audiocanvas og svg elementene.
  • Mye letter å lage lage web-applikasjoner, takket være lokale databaser, som gjør at du kan vise web sider uten internettilkobling. Dette er spesielt nyttig når man utvikler for mobile plattformer.

Implementering

Siden HTML5 var noe jeg ikke hadde jobbet mye med før, var det viktig for meg å først tenke gjennom hvordan ting skulle struktureres opp med de nye HTML5-tagene. Mye hadde endret seg siden HTML4 og XHTML. Før var det for med mest ok å strukturere opp alle “blokker” med div-elementet, nå skulle disse byttes ut med de mer semantiske seksjons-tagene: section, article og aside.

Forsiden


Det første jeg trengte å gjøre var å lese litt opp på de forskjellige tagene. HTML5doctor, Dive Into HTML5 (en online bok om HTML5) og HTML5 spesifiskasjonen var alle gode steder å finne informasjon. Etter å ha lest litt om de nye elmentene, og hvordan de skulle brukes, skrev jeg ut forsiden av siden og la små post-its lapper på arket med tag-navnene skrevet på. Dette ga meg en god oversikt over hvordan jeg skulle implementere siden.

Forsiden var helt klart den vanskeligste å implementere. Siden hadde mye forskjellig innhold, som ikke var direkte knyttet sammen. Til høyre ser du et bilde av hvordan jeg planla HTML-strukturen på siden med post-its.

PHP

Jeg har brukt en god del PHP  på siden. PHP lar meg dele opp koden i separerte filer, og som kan inkluderes dynamisk i index fila. Dette gjør det lett å bruke mye av den samme koden på flere sider. Noe jeg f.eks. gjorde var å lage en enkelt inkluderingscript, som inkluderte den riktige siden utifra hvilken page-parameter du hadde i URL feltet. Under kan du se hvordan koden ser ut.

if (isset($_GET['page']) && !empty($_GET['page']) && file_exists('tpl/' . $_GET['page'] . '.php')) {
	$tpath = 'tpl/' . $_GET['page'] . '.php';
	$tname = $_GET['page'];
} else {
	$tpath = 'tpl/frontpage.php';
	$tname = 'frontpage';
}

Jeg har også brukt PHP for å enkelt list opp navigasjonen, og artistoversikt. Dette er gjort ved å legge alle navnene i en array, for å så loope gjennom de med en foreach-løkke. Dette minimerer antall linjer i koden, og det er enkelt å endre på alle artistene, uten å måtte gå gjennom hver enkelt.

CSS teknikker

Kjøp billetter-boksen

På kjøp billett-boksen i høyre kolonnen så er det gjort en del stiling for å gjøre at den ser ut som den går rundt hovedramma bak. De to “3D”-sidene som er vist i bildet til høyre er laget med kun CSS og HTML. Måtet dette er gjort på er at det er lagt til to tomme span-elementer i boksen. Det å legge til tomme HTML-elementer på siden er ofte debattert i web miljøet fordi det ikke gir noen semantisk mening i dokumentet. Mange velger derfor da å legge til disse elementene med JavaScript, men om man tar en titt på HTML5-spesifikasjonen, så finner man dette:

The span element doesn’t mean anything on its own, but can be useful when used together with other attributes, e.g. class, lang, or dir. It represents its children.

Dette kan tolkes på en måte at det er greit å legge til span-elementer som har en klasse-attributt for å kunne stiles opp med CSS.

Sett bort ifra om det er riktig eller galt eller riktig å legge til tomme span-elementer, så er “3D”-effekten gjort med kun CSS. Dette er gjort via en teknikk, som utnytter nettlesere sin måte å håndtere borders på. Om man har et element uten bredde og høyde, og legger til borders med en viss bredde på topp og venstre eller bunn og høyre side, eller en annen kombinasjon, og bare bruke legge farger på den ene borderen, så kan man lage trekanter. Dette er en teknikk som jeg først så i en artikkel på Nettuts.

Under ser du koden brukt for å lage disse trekantene.

#order-tickets .bottom-right {
	border-right: 12px solid transparent;
	border-top: 22px solid #56160b;
	position: absolute;
	right: 0px;
	bottom: -22px;
	width: 0;
	height: 0;
}

CSS3

CSS3, er på lik linje med HTML5 ikke ferdig enda, men flere moderne nettlesere har allerede full støtte for mange av dets funksjoner, gjerne via nettleser spesifikke prefikser som -webkit og -moz. Men dette er absolutt ikke en grunn til å ikke ta i bruk mye av det.

En av fordelene med CSS3 er at man nå lett kan lage runde hjørner, legge til skygger og bruke gradients mye lettere enn før. Før så måtte man ofte ta i bruk bilder, og legge til flere tomme usemantiske elementer i koden for å få samme resultat. Siden dette nå er blitt mye enklere så har man nå mer tid til å fokusere på å forbedre andre viktige funksjoner på sider.

Jeg har valgt å bruke en del CSS3 på Slagkraft sine sider, som du kan se i listen under.

  • På nyhetslideren på forsiden har jeg brukt rgba for å legge til gjennomsiktig svart bakgrunn bak teksten.
  • På skjemafelter har jeg brukt en kombinasjon av border-radius og box-shadow for å lage runde hjørner og legge til en indre skygge.
  • På skjemaknapper har jeg brukt linear-gradient, border-radius, box-shadow (for å lage en tynn svart stroke rundt knappen) og text-shadow (CSS 2) med en hvit 1px-bred skygge for å få teksten til å se ut som den er trykt inn.

    Koden til knappen:

    input[type="submit"] {
    	-moz-border-radius: 5px;
    	padding: 3px;
    	border: 1px solid #80bfde;
    	border-left: 0;
    	border-right: 0;
    	border-bottom: 0;
    	background: -moz-linear-gradient(-90deg, #2a7296, #1c4d66);
    	text-transform: uppercase;
    	font-weight: 700;
    	color: #000;
    	text-shadow: 1px 1px #4a88a6;
    	font-size: 14px;
    	margin-left: -10px;
    	cursor: pointer;
    	-moz-box-shadow: 0 0 0 1px #000000;
    }

JavaScript / jQuery

Det å bruke JavaScript er noe som er blitt mer og mer populært de siste årene, og er noe som ofte går under det som betegnes som “Web 2.0″, gjerne da sammen med Ajax. Nå til dags kan du nesten ikke komme til en side uten å se noen form for JavaScript.

jQuery er et veldig populært JavaScript bibliotek, som legger ved en rekke JavaScript funksjoner som gjør det lettere å skrive JavaScript, uten å egentlig måtte kunne så mye JavaScript.  En av jQuery sine store fordeler er at den har bred støtte for alle nettlesere, helt tilbake til IE6.

Det er også brukt en del JavaScript på Slagkraft, spesielt på forsiden. Der er det brukt JavaScript til bl.a. artistoversikten, nyhetsslideren og kartet.

Artistoversikten

På artistoversikten er det brukt JavaScript for å “slide” bildene oppover. Måten den fungerer på er at det er en rekke li-elementer etter hverandre. Hvert 7. sekund så animeres det første elementets margin-top til den negative verdien av dens høyde. Dette gjør at de andre elementene følger etter oppover. Når animasjonen er ferdig, så blir elementet flyttet til bunn av listen, og dens margin-top blir satt tilbake til 0.

I tillegg til at artistene blir “slidet” oppover, blir også artistene stokket om tilfeldig ved hver sidelasting. Dette gjør at alle artistene får like mye profilering (i teorien) på forsiden.

Koden til slideren:

	/*
	 * Artist slider */
	( function () {
		if ($('body.frontpage').length === 0) {
			return false;
		}
 
		var sliderWrap = $('#artists ul');
		var interval, timeout;
 
		var slideInterval =  7000;
 
		var slider = function () {
			var firstElem = sliderWrap.children('li:first');
 
			firstElem.animate({
				'marginTop': '-' + firstElem.height()
			}, 1000, function () {
				firstElem.appendTo(sliderWrap).removeAttr('style');
			});
		};
 
		interval = setInterval(slider, slideInterval);		
 
		sliderWrap.hover( function (e) {
			clearInterval(interval);
			clearTimeout(timeout);
		}, function () {
			timeout = setTimeout( function () {
				interval = setInterval(slider);
			}, 5000)
		});
	})();

Placeholder attributten

Placeholder attributten er attributt man kan sette på skjemafelter, som legger ved tekst i feltet, som forsvinner når man fokuserer på feltet. Denne attributten er en del av HTML5 spesifikasjonen. Dessverre er det akkurat nå er det bare Webkit nettlesere som har støtte for placeholder. Denne funksjonaliteten har jeg derfor lagt til via JavaScript. Jeg har brukt et ekstern script som heter Modernizr, for å sjekke om placeholder er støttet av nettleseren.

Det scriptet gjør er å benytte seg av value-attributten på skjemafeltet, og fyller / tømmer det med placeholder teksten når du fokuser og tar bort fokuset fra feltet.

Scriptet

/*
 * Add Placeholder support 	*/
if (!Modernizr.input.placeholder) {
	var placeHolderInputs = $('input[placeholder]');
 
	placeHolderInputs.each( function () {
		var input = $(this),
			placeHolderText = $(this).attr('placeholder');
 
		input.data('placeholder', placeHolderText);
		if (this.value === '') {
			this.value = placeHolderText;
		}
	});
 
	placeHolderInputs.live('focus blur', function (e) {
		var placeHolderText = $(this).attr('placeholder');
		if (e.type === 'focusin') {
			if (this.value === placeHolderText) {
				this.value = '';
			} else {
				$(this).select();
			}
		} else {
			if (this.value === '') {
				this.value = $(this).attr('placeholder');
			}
		}
	});
}

Internet Explorer


Det å implementere en siden som støtter Internet Explorer er ofte en historie for seg selv, spesielt versjoner lavere enn versjon 8, som ofte krever egne stylesheets med såkalte “IE-hacks”.

Til høyre ser du et bilde av Slagkraft sin forside i IE7, uten noen ekstra hack-stylesheets. Som du kan se er den en god del feil som oppstår ved første øyekast.

Siden det er brukt mye CSS3 på siden så er det enkelte ting som ikke fungerer på siden i IE, bl.a. ting som runde hjørner og skygger. Heldigvis så har IE en del egne filtre som har eksistert helt siden versjon 4 og 5. Man kan bl.a. lage gjennomsiktige bakgrunner med filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99000000',EndColorStr='#99000000');. CSS3Please er en side man lett kan sette opp CSS3 parametere med tilsvarende filter i IE.

Dessverre er det en del ting som man helt enkelt ikke får gjort i IE med ren CSS. Da har man to valg:

  1. Man kan benytte seg av bilder for å gjenskape effekten.
  2. Man kan velge å ikke gjøre noe med det. Dette valget kan som oftest rettferdigjøres med at IE7 (og lavere) er utdaterte nettlesere, som også hele tiden mister brukere til andre mer modere. I skrivende stund er IE7 statistikken på 13.47%, og den synker stadig. Selv om IE7 ikke støtter det, så gjør heller ikke IE8 det, men da må man også tenke på at IE9 er under utvikling, og de aller fleste kommer til å gå over til den versjonen relativt kjapt. For å summere opp kan man jo si at det man ikke vet har man ikke vondt av.
  3. Man kan velge en kombinasjon av de to. Man gjør ingenting der det ser ganske ok ut, og bytter ut med bilder der det ender opp med å se helt merkelig ut.

På Slagkraft sine sider har jeg valgt og gå for løsning 3. Der jeg bl.a. ikke gjør noe spesielt med skjemafeltene som bruker runde hjørner, og en indre skygge. Men på skjemaknappene velger jeg en løsning der jeg bruker bilder.

Skjemaknappene

Bildet over viser en sammenlikning av skjemaknappene i Firefox mot IE7. Som du kan se, så er det ekstremt store forskjeller, som gjør at det trengs en fallback løsning for IE.

Siden knappene hadde runde hjørner, og en variabel bredde, så trengte jeg et ekstra element som lå rundt knappen for å stile opp. Måten jeg løste dette på var å bruke noe JavaScript for å legge et span-element rundt alle skjemaknappene. Når det var gjort, så kunne jeg stile opp venstre og høyre side av knappen separert. Jeg hadde to bilder der det ene var den venstre siden, med runde hjørner, og det andre bilder var den andre siden.

Under kan du se JavaScript koden, og CSSen som ble brukt for å sette sammen knappen.

/*
 * Cool submit buttons */
( function () {
	if (!Modernizr.borderradius) {
		var submits = $('input[type="submit"]');
 
		submits.each( function () {
			$(this).wrap('<span class="cool-sub">');
		})
	}
})();
</span>
.cool-sub {
	display: inline-block;
	padding-right: 8px;
	height: 28px;
	background: transparent url(gfx/button-right.png) right no-repeat;
}
	.cool-sub input {
		padding-left: 8px;
		height: 28px;
		margin-right: 8px;
		background: url(gfx/button-left.png) left no-repeat;
		border: 0;
	}

Artistoversikten

Artistoversikten på forsiden og undersider var også noe jeg slet litt med. Her var det en noen ting som ikke fungerte helt som det skulle.

  • Artistoversikten forsvant noen ganger ved refresh av siden.
  • Artistoversikten fikk feil høyde, og det la seg et stort mellomrom under den.

Her var det en god kombinasjon av CSS og javascript som måtte til. Det at artistoversikten forsvant iblant, og fikk feil høyde fant jeg etterhvert ut at måtte løses med JavaScript. Det som var problemet var at siden elementet ikke hadde en satt høyde, så hadde den i blant problemer med å rendre innholdet. Løsningen var å sette høyden på elementet til høyden av dens parent-element, som da var høyden av hovedramma.

Sidene

Her er en liste over sidene som her implementer:

Hva er det som fungerer?

Forsiden

  • Alle lenker i hovednavigasjonen peker til program siden
  • Lenker til artistene peker alle til artistsiden (bildene brukt er nødvendigvis bilde av den riktige artisten).
  • Alle artikler peker til artikkelsiden
  • Nyhetsslideren fungerer, og oppdaterer seg hvert 6. sekund, og man kan også bytte slide ved å trykke på tallene nede i høyre hjørne.
  • Kartet er bare for eksempels skyld, og viser ett tilfeldig sted.

Artikkelsiden og artistsiden

  • I kommentarfeltet blir det hentet ut 10 tilfeldige kommentartekster. Dette er gjort med PHP, der alle tekstene er lagt inn i en array, som blir stokket om på hver reload. Avatarene er også tilfeldig hentet ut.

Program

  • Man kan sortere tabellene å trykke på de forskjellige cellene i headeren. Dette er gjort via en jQuery plugin som heter Tablesorter. Den sorterer tabellen, og legger til klassenavn på celler som er sortert, som gjør det lett å stile opp med CSS.
  • Man kan egendefinere sin utskrift ved å benytte seg av “Skriv ut program”-knappen.

Kilder

Her er en liste over bilder jeg har brukt

Git / Github

Gjennom hele perioden har jeg brukt Git for å holde kontroll på koden. Git er et versjonskontrollsystem, som gjør det lett å holde kode oppdatert på flere maskiner. Det man gjør er at man commiter kode til en server, der blir endringen slått sammen med den andre koden på serveren, så kan man da “pulle” koden ned til en annen maskin.

Grunnen til at jeg velger å bruke Git, er så jeg lett kan holde koden min oppdatert både på jobb og hjemme. Med git har jeg også gode verktøy for å gå tilbake å se på endringer i koden min.

Github er en webside der man kan sette opp egne Git servere/repositories. Github gir gode muligheter for å se igjennom koden på nett.

Hele kildekoden til Slagkraft ligger tilgjengelig på Github: http://github.com/nifty/slagkraft