Skapa 3d grafik på webben med hjälp av ett bibliotek och HTML5.

mars 27, 2012 § Lämna en kommentar

Three.js verkar vara ett utmärkt bibliotek för att skapa 3d grafik med html5. För att komma igång med det så kan ni gå hit: http://aerotwist.com/tutorials/getting-started-with-three-js/(öppnas i nytt fönster).
När du har läst första delen så vill du kanske lära dig mer? Gå hit: http://aerotwist.com/tutorials/creating-particles-with-three-js/

Javascript – värt att lägga på minnet

mars 24, 2012 § Lämna en kommentar

Jag vill ta upp lite enkel javascript och sånt som kan vara värt att lägga på minnet.

För att kunna grabba/editera element

  • getElementById(‘Här skriver du ID’) – Hämtar elementets ID. Det får bara finnas en ID i ett html dokument därför blir detta alltid unikt.
  • getElementByTagName(‘Här skriver du tag name’) – Hämtar ett element genom ett ‘tag’ name. Returnerar en lista med alla tag names i dokumentet. För att komma åt så skrivs de(som en array) t.ex såhär:
    x = document.getElementByTagName(‘a’);
    x[0]; <— För att välja första "anchor" i dokumentet.
  • setAttribute – Om du har hämtat ett element med getElementbyTagName så kan du välja ett attribut som det elementet har och sätta värdet. T.ex såhär:
    var spartag = document.getElementByTagName(‘img’)
    spartag.setAttribute(‘alt’, ‘alternative information goes here’)
  • getAttribute – Används istället för att sätta värdet till att hämta värdet.
  • createTextNode – Tillåts skapa en text, t.ex: createTextNode(‘Here you can write whatever you want’)
  • appendChild – Om du har skapat en text node och vill sätta in den i en paragraph så kan det se ut såhär:
    para = document.getElementByTagName(‘p’);
    text = document.createTextNode(‘text here’);
    para.appendChild(text);
  • lastChild – Om du behöver få tag i sista child i dom trädet.
  • nextSibling – För att få tag i nästa ”kusin” i dom trädet
  • previousSibling – För att få tag i nästa ”kusin” i dom trädet
  • innerHTML – Är ett klumpigt sätt för att få in html och text
  • Uppdaterar mer senare….

För att hemsidan inte ska använda cache

mars 21, 2012 § Lämna en kommentar

Ibland kan det vara väldigt viktigt att få en hemsidan uppdaterad när nya användare kommer till den.
En cookie överlever inte under en så lång tid, (speciellt inte om du har anti virus skydd). För att få hemsidan uppdaterad för alla användare och inte använda ”cache” i webbläsaren så rekommenderar jag den här koden:

<meta Http-Equiv=”Cache-Control” Content=”no-cache”>
<meta Http-Equiv=”Pragma” Content=”no-cache”>
<meta Http-Equiv=”Expires” Content=”0″>

CSS3 – Lär dig göra en snygg text shadow med mitt typsnitt

mars 2, 2012 § Lämna en kommentar

Det här är en enkel tutorial för dig som vill använda mitt typsnitt med lite text shadow.

Det här måste du lägga in i din CSS fil för att kunna skriva med mitt typsnitt: @font-face { font-family: saibot; src: url(”http://www.netpage.se/saibot type blue.ttf”); }
Sedan kan du enkelt definera att du ska skriva med mitt typsnitt: h3 { font-family: saibot, tahoma, sans-serif; font-size: 2em; }

Vi ska nu enkelt lägga en text shadow på den här texten. Lägg till koden: text-shadow: 2px 2px 2px #000; inom h3 taggen. Svårare än så var det inte!

Jag släpper mitt hemmagjorda typsnitt

mars 1, 2012 § Lämna en kommentar

Jag har suttit och snickrat ihop ett typsnitt med hjälp av min egen handstil.
För er som vill göra något liknande så vill jag beskriva hur min process såg ut:
1 Rita alla bokstäver från A-Ö och små bokstäver a-ö på ett papper.(lite halvslarvigt så att hemmasnickar känslan finns där).
2 Ta kort på dessa bokstäver och överföra till datorn.
3 Justera exponering och ljus så att bokstäverna är helt svarta med en vit bakgrund. Sedan klippa ut alla bokstäver så det finns i 300X300 px.
4 Jag använde mig utav ”High logic – fontcreator” vilket jag tycker är ett utmärkt program. Där omvandlas en 300X300 px enkelt till en vector grafik
5 Det mest tidskrävande momentet var att få alla bokstäver lika stora. Min rekommendation är att gå efter 3 linjer. Hur hög, lång och vilken mitt bokstaven ska ha. Ett litet ”bh” är t.ex längre än många små bokstäver, men måste ha samma höjd på ”mittdelen” som t.ex ”ac”:s topp-höjd är.

Ni hittar typsnittet här: saibot type blue

Var befinner jag mig?

Du tittar för närvarande i arkivet för mars, 2012Tobiasboman's Blog.

%d bloggare gillar detta: