Spil med HTML5 og JavaScript - Cut the Rope

14. januar 2012

Der har desværre været lidt stille herfra i alt for lang tid og det har desværre haft sine grunde - men nu skal der til at ske lidt mere (eller, det er i hvert fald intentionen ) og hvad er bedre end at lægge ud med både lidt alvor og lidt sjov, nemlig spillet Cut the Rope.



Det alvorlige

Det alvorlige eller spændende i det er, at det er det hidtil bedste eksempel jeg har set på HTML5 og JavaScript - vi taler altså ikke om at spillet er udviklet i Silverlight eller Flash men i ren HTML5 og JavaScript. Læser og hører man på Behind the scenes kan man godt se at det har været forbundet med visse udfordringer men det er jo netop dér der gør udvikling sjovt! Spillet er i øvrigt udviklet af Microsofts Internet Explorer-folk og der er brugt ca 15000 linjers JavScript - men mere tekniske vil jeg ikke komme ind på da Behind the scenes forklarer det hele meget godt.

Det sjove
Jah, der er ikke så meget andet at sige end; Prøv det - det er både sjovt udfordrende! Let the game begind!

Udover en browserversion findes spillet også både til Android, Ipad og Iphone.

(X)HTML, JavaScript

Web Standards Update - HTML5 og CSS3 udvidelse til Visual Studio 2010

20. juli 2011

Selvom det ikke på nogen måde har været umuligt at lave hverken HTML5, XHTML5 eller CSS3 i Visual Studio 2010 har der manglet både intellisense til og validering op imod de disse ting - men det kan løses med Web Standards Update, WSU, udvidelsen til Visual Studio 2010. Opdateringen er lavet ef Microsoft-folk med danskeren Mads Kristensen i spidsen men det er dog ikke en officiel Microsoft opdatering.

I HTML5 får vi nu blandt andet glæde af de nye tags relateret til video og audio ligesom også de nye input-typer som mail, url og date er med, kigger vi på CSS3 er det blandt andet værd at se at relativt almindelige ting som filter og behavior nu kan valideres ligesom der nu er intellisense på browser-specifikke ting som -ms-*, -moz-* og -webkit-*. Endelig får vi glæde af mulighederne inden for de nye javascript browser API's som fx geolocation og local storage.

Standarderne er endnu ikke på plads så selvom opdateringen til Visual Studio bestemt er et stort skridt skal vi nok også forvente at se nyere versioner af WSU.

Her kan du downloade Web Standards Update for Microsoft Visual Studio 2010 SP1.

(X)HTML, .NET, ASP.NET, CSS, JavaScript , , ,

Nulstil et input type file element

24. marts 2011

En udfordring rigtig mange webudviklere støder på, specielt efterhånden som flere og flere er gået over til AJAX-løsninger, er et ønske om at kunne resette et input felt at typen file, men som udgangspunkt er det ikke muligt at nulstille et file input element uden man benytter en reset-knap, som så til gengæld vil nulstille hele formen og det er langt fra altid ønskværdigt. Heldigvis findes der alternative måder at løse dette på, nemlig ved at replace elementet i DOM og det kan fx ske på følgende måde;

function ResetFileInput(elementId) {
 
var oldInput = document.getElementById(elementId);
 
var newInput = document.createElement("input");
  newInput.type =
"file";
  newInput.id = oldInput.id;
  newInput.name = oldInput.name;
  newInput.className = oldInput.className;
  newInput.style.cssText = oldInput.style.cssText;
  oldInput.parentNode.replaceChild(newInput, oldInput);
}


Kalder man ovenståede javascript-funktion med id på sit file input element som parameter vil udfordringen være løst - her et lille eksempel;

<input type="file" id="uploadme" />
<a href="#" onclick="ResetFileInput('uploadme'); return false;">Nulstil</a>

Det vil med en løsning som ovenstående stadigvæk ikke være muligt at sætte value til en foruddefineret værdi - og heldigvis for det da det ville indebære en alvorlig sikkerhedsrisiko.

(X)HTML, JavaScript , ,

Korrekt visning af æøå - character encoding

31. juli 2009

I en tidligere artikel her på siden forsøgte jeg at komme med et opråb om korrekt brug af DOCTYPE og valid kode da det så ud til, at mange havde deres egen definition af, hvordan HTML kode kunne struktureres - og lige som om at det ser ud til at problemer med DOCTYPE og invalid HTML er lidt et "mode-problem" i øjeblikket lader det også til, at mange har problemer med deres encoding (tegnsæt) selvom dette også er en udfordring, der har eksisteret så længe man har skrevet web - så nu må vi hellere forsøge at rettet op på det.

Hvad består fejlen i og hvornår

Kort fortalt handler problemet med encoding om, at hvis man ikke har styr på encodingen i sin applikation og fx kører med flere forskellige i de forskellige lag i applikationen, så er der stor risiko for problemer med æøå og andre special karakterer på sin hjemmeside. Problemet omhandler ikke kun dynamiske applikationer - også simple statiske html-sider er ramt. Værst af alt, så er der modsat valid HTML-kodning reelt meget få ting at holde styr på her, men heldigvis er løsningerne langt hen ad vejen også rimelig simple.

Selvom det ikke bliver til meget kode, vil jeg i artiklen tage udgangspunkt i ASP.NET bare for at have et fast holdepunkt, men udfordringerne med korrekt tegnsæt kan lige så vel ramme klassisk ASP, PHP og altså selv simpel HTML.

Valg af encoding

Der findes ikke et endeligt svar på hvilken encoding man skal gå efter - men jeg kan ikke komme på en grund til ikke at vælge UTF-8 (Unicode Transformation Format 8-bit) hvorimod der er flere grunde til ikke at vælge det i Danmark nok mest kendte og brugte, ISO-8859-1, da det fx må betragtes som værende forældet da flere JavaScript-funktioner er udgået til fordel for tilsvarende Unicode-funktioner. Så selvom ISO-8859-1 flere steder anses som dét man benytter på hjemmesider i Danmark og vesteuropa så er min mening, at UTF-8 er det eneste rigtige valg i dag.

Encoding på filen

Det første sted at starte med det korrekte tegnsæt er allerede når vi laver vores filer, og det er nok her de fleste går fejl da de færreste er opmærksom på, at det har noget at sige og måske endda slet ikke er opmærksom på, at filer kan overhovedet gemmes med forskellig encoding. Visual Studio opretter som udgangspunkt filer i UTF-8, så i bund og grund behøver vi ikke bekymre os om det store her efter vores valg af netop UTF-8, men vil vi gerne være sikre kan vi åbne vores fil og klikke på Advanced Save Options i File-menuen for at se filens nuværende format og eventuelt gemme den med en ny encoding. Notepad er er også et godt lille program til at se filens encoding i, nemlig ved at klikke på Gem som og se hvilket format der står under Kodning - det "farlige" ved Notepad er, at de fleste vil opleve, at den som standard gemmer nye filer i ANSI og ikke UTF-8, og genkender Notepad ikke formatet på den fil man åbner vil det derfor også være ANSI, der gemmes i hvis man gemmer filen igen og dermed overskrive man det eksisterende format.


Encoding i HTML koden

Dette punkt er det nok de færreste der er i tvivl om så det bliver meget kort - i HTML kan vi benytte meta til at sende informationer om vores dokument til klienten, og en af de informationer vi bør sende med er Content-Type;

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Encoding på data(basen)

Langt de fleste applikationer i dag er dynamisk opbygget ud fra data i et lager - mest oplagt selvfølgelig en database, som er det jeg vil tage udgangspunkt i selvom det bliver relativt kort da korrekt database-opsætning kan være en videnskab i sig selv - og her er encoding altså bestemt heller ikke uden betydning.

Præcis hvordan encodingen, og dataene generelt, håndteres her er lidt forskelligt fra den ene database til den anden så sæt dig godt ind i den database du arbejder med. Taler vi MySQL kan man sætte tegnsættet direkte på databasen og i MSSQL kan lidt af styringen ligge i valg af datatype, hvor nchar, nvarchar og ntext til unicode (hvilket reelt vil sige, at den valgte collation kun styrer sortering og ikke tegnsæt) og char, nvarchar og text til ikke-unicode (som altså styres af collation så æøå kun kan gemmes ved korrekt valg af collation), men her er det også værd at overveje performance ind i valget da unicode datatyperne er tungere at arbejde.

Men ellers ligger det vigtigste tiltag omkring encoding-opsætningen i valget af ens collation - collations handler ikke kun om encoding men også om sortering og sammenligning af data - et simpelt eksempel på dette kunne være en numeriske collation, der sorterer 1 før 2 eller en karakter collation, der bestemmer om hvorvidt a er det samme som á eller ej, men det er ikke desto mindre vigtigt at tage stilling til.

Encoding fra serveren

Det sidste sted det kan gå galt er i forhold til hvilken encoding serveren sender dokumentet afsted i - og her ved jeg at flere webhoteller vælger at sender ISO-8859-1 som standard da det stadig er det format langt de fleste vælger og dette betyder altså, at vi har noget at skal tage forhold for med vores valg af UTF-8. Heldigvis er det ret simpel at styre da vi i vores web-config kan tilføje følgende til at overskrive webhotellets valg;

<system.web>
  <
globalization responseEncoding="utf-8" requestEncoding="utf-8" fileEncoding="utf-8" />
</system.web>


Tilsvarende muligheder har vi selvfølgelig til rådighed i fx PHP gennem .htaccess.

Vil du se hvad serveren sender af sted sammenlignet med din meta kan du gå ind på http://validator.w3.org/, vælge More Options og sætte hak i Verbose Output før du validerer dit dokument - er der uoverenstemmelser mellem dokumentets og serverens format vil du her få besked om det.

Ikke flere problemer med æøå

Nu har vi endelig fået styr på hvilke 4 flaskehalse der er for at få æøå vist korrekt på vores hjemmeside - så dem ser vi selvfølgelig ikke flere af fremover :)

(X)HTML, ASP, ASP.NET

DOCTYPE og valid kode - ens udseende i Internet Explorer og FireFox

5. juni 2009

Jeg ved ikke helt hvad årsagen er, men den seneste tid er jeg stødt på utrolig mange spørgsmål gående på, hvorfor en hjemmeside ikke ser ens ud når man tester i fx Internet Explorer og Firefox. Grunden til min undren skal nok mest af alt findes i, at det jo som sådan ikke er noget nyt "problem" da det har eksisteret så længe der har været mere end én browser på markedet, men det skyldes måske bare at man - langt om længe - er blevet mere opmærksom på problemet.

Så godt som alle af disse spørgsmål kan besvares med en eller begge af følgende løsninger;

- har du sørget for at skrive valid kode?
- har du husket en DOCTYPE?

Valid kode

HTML, XHTML og for den sags skyld også CSS er ikke bare tilfældige kode-elementer man frit kan sætte sammen som man lyster - der ligger nogle regler til grund for sprogene, og følger man ikke disse regler kan det meget let have konsekvenser fx i form af, at siden ikke helt får det udseende man egentlig forestillede sig eller at hver browser fortolker og ikke mindst forsøger at rette op på fejlene på hver sin måde så udseendet dermed bliver forskellige fra den ene til en anden.

Det er organisationen W3 (World Wide Web Consortium på http://www.w3.org/), der styrer retningslinjerne/anbefalingerne for bl.a. HTML, XHTML og CSS - og når jeg siger retningslinjer og ikke standarder så skyldes det, at det teknisk set faktisk ikke er standarder men kun retningslinjer der udstedes, men reelt set skal de nu alligevel betragtes som standarder. Er man derfor i tvivl om hvad man kan og ikke kan inden for hver af retningslinjerne er deres site derfor et fremragende, omend måske knap så brugervenligt, opslagsværk.

Ved at overholde standarderne sikrer man bl.a. at man ikke koder til én specifik browser hvilket man let kunne komme til tidligere da hver browser-producent kunne opfinde og understøtte egne elementer (fx havde Internet Explorer <marquee> og Netscape have <ilayer> samt <blink>) og dette betød, at sider ikke ville virke hensigtsmæssigt i andre browsere. Ved overholdelse af standarderne sikrer man, at man udvikler til alle klienter, der understøtter standarderne og ydermere vil valid kode også sikre imod de mest oplagte visningsfejl - har man fx et start- eller et slut-tag for meget eller for lidt kan det have store konsekvenser for visningen i browseren og det kan virkelig spare tid hvis man i valideringen kan se, at det er en simpel validitetsfejl man skal rette op på og at det ikke en større hovsa-løsning man skal ud i for at få tilpasset siden. Endelig vil det være betydelig nemmere at få kode-hjælp på diverse fora da det i mange tilfælde vil være irrelevant at fejlsøge og give løsninger uden valid kode da fejlene oftes skyldes netop den invalide kode.

DOCTYPE

Som nævnt ovenover er (X)HTML ikke bare tilfældig kode sat sammen efter behag, derimod ligger der altså retningslinjer til grund sprogene - og det er for at fortælle browseren hvilken standard ens side, forhåbentlig, opfylder at man benytter en DOCTYPE. Benyttes en forkert eller i værste fald ingen DOCTYPE kan det give lige så uheldige bivirkninger på ens side som invalid kode - det kan fx betyde, at browseren vælger en forkert renderings-mode (læs mere om det længere nede i artiklen), at store dele af ens CSS sættes ud af drift og at siden læses langsommere af browseren. Mere eller mindre alt sammen noget, der også har betydning for, hvor crossbrowser siden fungerer.

Det er ikke kun vigtigt, at du har en DOCTYPE på din side - placeringen er også vigtigt; er DOCTYPE ikke det absolut første i dit dokument vil din side heller ikke blive tolket korrekt. Det vil altså sige, at hvis du placerer fx javascript-kode før din DOCTYPE eller, som nogle tror de skal når de laver XHTML, placerer en XML-deklaration som det første vælger browseren den forkert renderings-mode.

En vigtig ting i forbindelse med valg DOCTYPE er hvorvidt man skal vælge at køre Frameset, Transitional eller Strict. Frameset burde give sig selv som valget til sider der indeholder frames, men dem holder vi os selvfølgelig langt fra - men hvornår skal man så vælge Transitional og hvornår skal man vælge Strict? Jeg vil til enhver en tid anbefale at man går efter at benytte Strict - dette dels fordi det er hvad sprogene som standard er konstrueret til og dels, at man ved at benytte Strict udelukker brugen af præsentations-attributter og -elementer hvilket tvinger en til at benytte CSS, altså opnår man en logisk opsplitning mellem indhold og præsentation hvilket igen gør koden mere overskuelig og gør præsentations-ændringer lettere. Transitional indeholder de samme muligheder som Strict - men åbner altså op for en lettere overgang fra ældre versioner, bl.a. i form af, at der kan benyttes attributter til at styre udseende.

Nederst i artiklen finder du link til hvilke DOCTYPEs du kan benytte - og det er vigtigt at de kopieres direkte og ikke tilpasses efterfølgende. For eksempel er XHTML case-sensitiv og jeg har set eksempler hvor "EN" var udskiftet med "DA" med tanke på at det jo var en side på dansk man skrev, men værdien hentyder ikke til sproget på sitet men derimod til det sprog definitionen er skrevet i, og de er skrevet på engelsk - og ændringer kan altså betyde, at den indsatte DOCTYPE bliver lige så forkert som var der slet ingen DOCTYPE.

Generelt er DOCTYPE en lidt sjov størrelse i og med at et korrekt udseende (altså i henhold til at undgå at gå i quirksmode) kan varierer meget. Eksempelvis vil en DOCTYPE uden URL være valid i XHTML og HTML4 Strict men ikke valid i HTML4 Transitional, så anbefalingen må være at gå ud fra de anbefalede du finder i linket nederst i artiklen.

Et par rigtige DOCTYPEs:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

en forkert DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Det er vigtigt at lægge mærke til, at DOCTYPE altså ikke et HTML-tag, det er en instruktion til browseren omkring hvilken version siden er skrevet i.

Renderings-mode - !DOCTYPE "Switch"

Da browserne skal understøtte mange forskellige standarder, og specielt pga de helt gamle, kan der køres med 2 forskellige renderings-modes, nemlig standard- samt quirks-mode. Dette skift mellem standard- og quirks-mode bliver der oftet refereret til som The !Doctype Switch da det netop er vores DOCTYPE der er med til at bestemme renderingsmoden.

Den renderingsmode vi er interesseret i er uden tvivl standard-mode, da det er denne der håndterer W3-standarderne bedst muligt - kører siden i quirks-mode vil browserens fortolkning svare til helt gamle browseres fortolkninger og det er selvsagt meget uhensigtsmæssigt. Hvis du vil se hvilken renderings-mode dit site kører under kan du bl.a. se dette i Firefox ved vælge "Vis sideoplysninger" i højrekliksmenuen.

Et af de vigtigste punkter under The !Doctype Switch er den såkaldte boxmodel. Meget kort fortalt går boxmodellen ud på, hvordan højde og bredde af elementer sammensættes til det endelige visuelle resultat (ud fra height, width, padding, border samt margin), og da alle elementer i HTML i bund og grund er en firkantede byggeklodser kan man let gå galt i byen hvis ikke man har gennemskuet boxmodellen. Nederst i artiklen kan du finde links til længere forklaringer om boxmodellen.

Det kan nok være lidt svært at forestille sig hvilken betydning det reelt set har om man kører under den ene eller den anden renderingsmode, så betragt nedenstående billeder, hvor den eneste forskel i den bagvedliggende kode er brugen af DOCTYPE eller ej så de dermed kører i hver sin renderings-mode.

Et screenshot fra IE7, standard-mode (standardmode.html):



Et screenshot fra IE7, quirks-mode (quirksmode.html):



Hverdagseksempel

En nok desværre for udbredt holdning er, at man kan bruge tid på at gøre sin kode valid så snart man har fået siden til at se ud som den skal - men ofte er den manglende validitet netop årsagen til, at siden ikke vises som ønsket og så er det jo som at angribe mod sit eget mål i fodbold; nemlig nærmest håbløst, i hvert fald hvis man vil vinde. For ganske kort tid siden sad jeg og fulgte en debat med netop denne problematik - udviklerens side blev på flere punkter ikke vist som ønsket og trods flere kommentarer om det irrelevante i at forsøge at rette op på visningen før end siden var valid blev dette ikke accepteret som værende en løsning, for selvfølgelig måtte der findes en mulighed uden at der skulle bruges tid på at lære standarderne at kende og ikke mindst følge dem... Det viste sig bare, at årsagen til hele problemet selvfølgelig var den invalide kode; der var - blandt flere andre fejl - brugt to <body> tags hvor kun ét er tilladt. Så snart det overskydende <body> var fjernet blev alle fejl i visningen løst - koden var stadig ikke helt valid (og blev det formentlig desværre aldrig), men det viser bare hvor lidt det nytter at gøre tingene i omvendt rækkefølge.

Jamen, det virker stadig ikke?

Nu gik vi lige og troede at brugen af DOCTYPE og valid kode var svaret på alle vore bønner - men sådan er det desværre ikke helt. Det skal nemlig også nævnes, at bare fordi koden er valid kan man desværre ikke altid forvente at siden vises helt ens i forskellige browsere - der kan let stadig være små eller i sjældne tilfælde måske endda store forskelle og i de tilfælde er der ikke andet for end at lære hvad forskellene går ud på så man ved det til en anden gang. Ofte er det en simpel ændring/tilføjelse der skal til for at løse problemet og det er bestemt også værd at nævne at det da heller ikke nødvendigvis skyldes dårlig kode men bare den enkelte browsers måde at fortolke den samme ting på. Valideringen af ens side kan lidt tolkes som stavekontrollen i Word - den sikrer imod stavefejl, men kan af naturlige årsager ikke validere på betydningen/visningen af dokumentet.

Husk også - god kode er altid valid, men valid kode er ikke altid god kode.

Gode links

W3C Markup Validation Service - brug denne service til at validere din (X)HTML kode, du kan validere både via en URL, filupload samt direkte kodeinput.

W3C CSS Validation Service - samme som ovenstående, bare til din CSS.

Anbefalede DOCTYPEs - er du i tvivl om hvordan din DOCTYPE skal se ud i specifikke tilfælde indeholder denne side de relevante svar.

(X)HTML, CSS

Absolut centrering af hjemmeside med layers

17. december 2007

Jeg møder ofte indlæg på diverse fora omkring udfordringen i at centrere en hjemmeside både horisontalt og vertikalt - det er som udgangspunkt ikke noget problem såfremt man benytter tables til at opsætte sit layout, men heldigvis er der flere og flere der får øjnene op for, at tabeller skal bruges til at vise tabulerede data og ikke til layout og derfor skifter til layers. Problemet er bare, at der er ingen super let metode at løse vores lille centrerings-udfordring på når vi opsætter et site vha <div> - thebox er kommet med forslaget "Dead Centre" på www.wpdfd.com/editorial/thebox/deadcentre4.html og det fungerer umiddelbart rigtig godt og crossbrowser, men det har alligevel én meget stor ulempe; bliver højden på browseren for lille til at vise hele siden på en gang bliver toppen af hjemmesiden skåret væk uden mulighed for at scrolle op og det kan være ret fatalt hvis det er lige der man har placeret menuen (been there - done that Innocent).

Der måtte bare findes en alternativ løsning, og da jeg kategorisk nægter at benytte tables måtte google gennemsøges på kryds og tværs selvom jeg stødte på flere kæmpe store sites - fx Nikes - der trods en ellers rigtig flot kode havde løst problemet netop vha tables. Jeg prøvede alle mulige sammensætninger ud fra de eksempler jeg fandt, men alle havde nogle småproblemer jeg ikke mener man kan være bekendt at præsentere online

Jeg var lige ved at opgive da jeg pludselig stødte på noget der så bare en smule brugbart og efter noget tids (riiigtig lang tids) omskrivning lykkedes det faktisk til sidst. Jeg må til gengæld være ærlig at sige, at jeg ikke har testet i samtlige browsere - kun IE6, IE7, Avant samt FF på PC - og værst af alt så har jeg smidt linket væk på den side, der ledte mig på sporet. Men her i hvert fald resultatet.

Først laver vi vores html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns
="http://www.w3.org/1999/xhtml">
<
head
>
  <title>Centrering af hjemmeside</title
>
  <link rel="stylesheet" href="centrering.css" type="text/css"
/>
</
head
>
<
body
>

<
div class="hideme"></div
>
<
div class
="container">
 
<div class
="content">
   
Indhold
 
</div
>
</
div
>
</
body
>
</
html
>

Dernæst laver vi vores stylesheet

body, html {
 
margin: 0px;
 
height: 100%;
}

.hideme {
 
visibility: hidden;
 
width: 100%;
 
height: 50%;
 
margin-top: -342px;
 
float: left;
}

.container {
 
background-color: #CCCCCC;
 
width: 970px;
 
height: 684px;
 
clear: both;
  position: relative;
 
top: -342px;
 
position: static;
 
margin: auto;
}

.content
{
 
position: absolute;
}

De eneste regler der skal overholdes for at dette vil fungere og se ud som ønsket er, at;

  • hjemmesiden har en konstant højde - varierer sidehøjden vil dette script (ligesom scriptet fra thebox) ikke fungere efter hensigten.
  • container-klassen skal have tilpasset sin height til at være sidens ønskede højde og både container- og hideme-klassen skal have henholdsvis top og margin-top tilpasset til at være præcis halvdelen af sidens højde

Hvis i støder på nogle uhensigtsmæssigheder med ovenstående kode, fx hvis en af de mere specielle browsere har problemer med scriptet, er i velkommen til at melde tilbage. Ellers håber jeg bare det kan skabe lige så meget glæde som jeg har haft udfordringer med at få det til at fungere.

CSS, (X)HTML ,