Välkommen till Baronen.org

Webbskrivbord i javascript

Som rubriken antyder så är detta slutprojektet i javascriptkursen. Men innan jag berättar om det så har jag lovat att visa den föregående laborationen som va att skriva ett formulärvalideringscript. Här kan du läsa mer om vad den labben gick ut på. Jag har denna gång valt att spela in en film på denna uppgift.

Formulärvalidering i javascript

Den sista laborationen är alltså att skriva ett eget “skrivbord” i javascript. Det ska helt enkelt fungera som ett skrivbord gör i tex Windows eller Linux. Det ska finnas ikoner, man ska kunna öppna nya fönster, förstora fönster, hämta data asynkront med AJAX. Denna uppgiften blir lite att bita i men också den roligaste, vi har ganska fira händer och utveckla som vi vill. Väldigt spännande.

Återkommer med mer information om detta.

Lite annat som har hänt att jag har införskaffat mig ett Nintendo Wii. Helt klart en annorlunda konsol.

Läs även andra bloggares åsikter om Javascript, validering

Laboration 5 i javascript färdig

Har idag lyckats göra klart den femte laborationen i javacriptkursen. Den gick ut på att validera ett vanligt formulär och att ge feedback till användaren under tiden denna fyller i formuläret. Måste säga att jag är mycket nöja med detta.

Det knivigaste och svåraste med denna labben va att vi inte fick använda “innerHTML” utan va istället tvunga att skapa nya element med hjälp av javascript. Det tog ett tag innan med fick koll på det. Annars har det rullat på, visst har man hittat buggar, fastnat på vissa moment men överlag tycker jag det flöt på ganska bra. Kom undan med ca 320 rader kod, ink. kommentarer. Naturligtvis går det säkert att minska antalet rader avsevärt, men hur som helst är jag nöjd. Jag kommer att lägga upp en länk till “applikationen” efter jag har redovisat den.

Memory och Shoppingvagn i javascript

Har idag redovisat laboration 4 i javascript-kursen nu. Överlag har det flytit ganska bra faktiskt. Idag har jag alltså redovisat den berömda shoppingvagnen som är skriven i javascript.  Helt klart att detta ingen shoppingvagn man skulle kunna använda på en skarp sida. Mycket brister, speciellt när man inte överhuvudtaget använder sig av serversidekod tex ASP.net eller PHP. Övningen gick väl egentligen ut på att lära sig behandla fönster och navigera i DOM (Document Object Model) trädet. Efter denna uppgiften har man faktiskt mer koll på hur DOM fungerar, dock har man ju alltid mer att lära.

Föregående vecka va det ju redovisning av memory-spelet. Kan erkänna att jag betvivlade att jag skulle klara detta, verkade vid en först anblick ganska svårt. Men löste det, detta va enligt min mening lättare en shoppingvagnen. Men fick godkänt på den labben också. Om du vill prova memoryt så hittar du det här.

Nu börjar nästa laboration som går ut på att göra en validering med regular expression och vad ska jag kalla det, “live” kontroll. Du ska alltså får upp direkt när du skriver om det är korrekt inmatat. Här ska vi även göra en så kallad lightbox när man skickar iväg formuläret. Det ser jag fram emot att får sätta tänderna i.

Mina Projekt

Tänkte skriva och berätta lite om mina projekt och webbplatser som jag driver idag. Dels för att någon läsare kanske tycker det kan vara intressant och dels för att någon kan få lite inspiration till egna webbplatser.

Den första webbplatsen heter Bildbox. Denna tjänst var från början tänkt för mig själv, att enkelt kunna ladda upp bilder kunde alltid vara bra. Jag utvecklade tjänsten vidare och den är nu öppen för alla.

Hela idén är att det ska vara lätt och att det ska gå snabbt. Här kan man alltså ladda upp bilder i formaten, jpeg, png och gif. Det hela funkar så att man väljer vilket format bilden ska beskäras i, här finns 9 olika alternativ. Sedan laddas bilden upp och man får välja vilket sätt man vill använda bilden. Antingen med med tumnagel, en länk sidan eller en direktlänk till bilden. Tjänsten används i dagsläget inte överdrivet. Prova gärna.

Nästa projekt började som ett projekt i skolan, Det är helt enkelt en webbplats som samlar snygga och välgjorda hemsidor. Syftet är att andra webbutvecklare ska kunna gå in och hitta inspiration och nya tankesätt. Sidan heter alltså DigitalSweet.net.

Det är mina projekt som ligger uppe just nu. Testa dem gärna.

Läs även andra bloggares åsikter om webbplatser, hemsida, tjänster

Använd EM istället för PX

Jag skrev tidigare ett inlägg om att man inte skulle använda pixlar när man satte storlek på till exempel text. Just därför att pixlar är ett bestämt värde, detta gör att användare som användet Internet Explorer inte kan förstora den texten med hjälp av webbläsaren.

Det kan kan göra är att använda procent, detta skrev jag om i förra inlägget. Eller kan du använda em, detta är också ett mått som justerar sig. Det enklaste att göra detta om du tidigare använt dig av pixlar är följande.

Du sätter storlek i body till 62.5%. Detta gör att istället för att 1 em är 16pixlar så blir nu 1em 10pixlar. Det blir helt enkelt mycket lättare att räkna.

body { font-size: 62.5%; }

Sen använder du allt som vanligt, vill du ha 10 pixlar så skriver du 1em, vill du ha 12 pixlar blir det 1.2em. Detta blir väldigt lätt att förstå och jobba med.

body { font-size: 62.5%; }
p { font-size: 1.2em; }

Det är inte bara till text man kan använda detta, vill man till exempel att en div-tagg ska bli större kan man använda samma sak. Hoppas detta gav er som använder pixlar en tankeställare.

Andra bloggar om: webbdesign, tillgänglighet, användbarhet

Projektet Klart DigitalSweet

Efter ungefär två veckor är det äntligen klart, mitt webbprojekt i kursen webteknisk introduktion. Idag avslutade jag med att redovisa och ha en genomgång av mitt projekt. Jag har skrivit om det innan i bloggen, det heter alltså DigitalSweet och en länksamling med länkar till bra och snygga hemsidor.

Den är fortfarande i uppbyggnadsstadiet och använder endast statiska sidor, tanken är att jag ska fortsätta utveckla sidan för att försöka göra den mer seriös och större.

Den ligger ute på adressen www.digitalsweet.net. Kolla in den för lite inspiration och eventuellt lägg till din egen sida.

Andra bloggar om: webbdesign, webbplatser

Därför ska man inte använda pixlar

Man lär sig något nytt varje dag, och även idag har jag lärt mig något nytt. Faktiskt genom att läsa boken jag fick idag. Du kanske har gjort som jag när du har utvecklat webbplatser, alltid bestämt textstorleken i pixlar. Till exempel font-size: 12px; Det är när man gör på detta sätt som man stänger ute x antal besökare på sin sida. Nu kommer vi alltså in på tillgänglighet.

Folk som har nedsatt syn och använder Internet Explorer som majoriteten av webbanvändare gör stöter på problem här. Det finns en funktion i IE och andra webbläsare som gör att man kan ändra storlek på texten i webbläsaren.

Men när man alltså sätter textstorlek i pixlar så sätter man verkligen en bestämd storlek, även om användaren ändrar i webbläsaren så kommer texten inte ändras på sidan.

Lösningen till detta är ganska enkelt, det finns två vägar att gå och jag tänker visa en. body { font-size: small; } Här sätter vi nu en standardstorlek på sidan, i detta fall small. Ändrar man nu storlek i IE kommer denna text att ändras. Vill man sedan ha en rubrik på sidan användar man sig av procent. Hela CSS koden blir då body {
font-size:small;
}
h1 {
font-size: 150%;
}

Ändrar användaren nu storlek så kommer alltså h1 hela tiden vara 150% av föräldern, i detta fall body.

Här ser vi hur det ser ut när vi har ändrat storlek i Internet explorer, både rubriken och stycket har ändrat storlek.