Jeg synes idéen om at skrive JavaScript på serverside er meget tiltalende. Det gør dig i stand til at kun skulle kunne skrive JavaScript ud over HTML & CSS for at kunne lave en fuld web applikation (eller, du skal nok også lære noget om Databaser men det er det mindste af det hele). Rent teknisk virker hele idéen om event-driven sprog på serverside også praktisk i rigtig mange tilfælde, hvor du skal arbejde med at samle data fra flere forskellige kilder, og smide dem sammen. Alt i alt virkede det som et rigtigt spændende initiativ der skal prøves af på selv, og ikke blot læses om.

Jeg begyndte, som følge af overstående konklusion, at finde publikationer og videoer der kunne sætte mig i gang med det her, men fandt ud af det faktisk er svære end man skulle tro. Dette skyldes formodenligt at projektet stadigt er meget ungt. Yderligere gør det, at det bevæger sig så hurtigt det svært at finde noget er up-to-date. Det er dog ikke umuligt, og efter en uges søgen på Twitter, dvs. blog med videre har jeg fundet flere skrivelser, der skulle kunne hjælpe en godt på vej.

Jeg besluttet mig for eftersom det tog så lang tid at finde brugbar information, at jeg ville samle alt den jeg har fundet på et sted – i dette indlæg.

Hvor kører Node.JS og hvordan?

Node.JS understøtter på nuværende tidspunkt kun UNIX baseret systemer. Dette betyder i praksis OSX og de fleste Linux distributioner. Node.JS kører sandsynligvis også på *BSD, men dette kan jeg hverken af- eller bekræfte.

Hvordan kan sætter Node.JS op på *NIX systemer kan ses her. Hvis man arbejder med et Plesk setup, kig her i stedet.

Windows er er ikke en officiel platform endnu, men en port på vej med hjælp fra Microsoft. Indtil det, er det dog stadig muligt at prøve kræfter med Node.JS på Windows, ved hjælp af Cygwin. Det er vigtigt, at være opmærksom på at et sådan setup slet ikke kan følge med sit *NIX modstykke i performance, og derfor ikke bør bruges i production.

Hvor Node.JS + Cygwin sættes op kan ses her.

Version 0.5.1 og frem indeholder et officielt Windows build. Windows exe’en kan hentes på node.js’s hjemmeside her.

Guide-samlingen

Når Node.js er sat op, og alt kører er det bare at give sit i kast med at lærer hvad det kan bruges til. Følgende links er dem jeg regner med at bruge, til at state op med.

Vigtigt: Alle linksene er engelsksproget

1. Introduction to Node.js with Ryan Dahl [Video] – Hvad er Node.JS, og hvad adskiller det fra så meget andet. Yderligere en introduktion til den radikalt anderledes tankegang.
2. The Node Beginner Book – Hvor og hvordan skal jeg starte på Node.js?
3. SenchaCon 2010: Server-side JavaScript with Node, Connect & Express [Video] – Når du først har fået Node op under neglene, hvor forsætter jeg så? Dette er en introduktion til Connect og Express.

Dette er i første omgang de videoer og publikationer jeg har fundet, der virker relevante når man starter ud med Node.Js. Overstående i sig selv, er dog ikke altid nok da man før eller siden vil støde på ting der ikke er dækket af disse guides. Følgende links kan bruges i sådanne senarier:

• How to Node – The Zen of Coding in Node.Js – Blandet guides omkring hvad Node.JS kan bruges til. Primært til bruger efter overstående.
• Nodejitsu Blog – Blandet nyt fra Node.Js miljøet.
• Node.JS githubs side – Hvor udviklingen forgår.
• Den officelle Node.JS dokumentation – Dokumentationer, den hellige gral hvis man leder efter en eller anden funktion.

Jeg håber overstående har været til gavn, for andre der lige som jeg selv er skal til at prøve kræfter med Node.Js. Jeg regner med at opdatere med flere indlæg om Node.Js, som min egen viden løbende udvides.

NOTE: XAMPP findes også til Linux & Mac. Det er dog Windows versionen, der er kigget på her, og jeg kan derfor ikke udtale mig om hvorvidt det er ligesådan til Linux og Mac – man kunne dog forstille sig det er meget ens på tværs af platforme.

WAMP

Er er helt almindelig WAMP-stack uden noget særligt ekstra-software andet end en ‘quick-start ui’ og database-admin toolet phpMyAdmin. Dette er et tray-ui(se billede nedenfor), hvorfra det er let at starte/stoppe de 2 forskellige forskellige: Apache og MySQL. Yderligere tilbyder den genvej til en masse af de mapper, man typisk bruger under udvikling  så som www-folderen (andre steder kaldt htdocs), PHP-settings filen, Apache-config filen, phpMyAdmin og meget andet.

Screenshot af WAMP-tray interface

Selve installationen af WAMP er super let. Det er bare at køre installeren og lade det installere – der bliver stillet nogle få spørgsmål undervejs (så som installations mappe) man skal forholde sig til.

Fordele

• Super simpelt og let tilgængelig kontrol-ui.
• Indeholder alt hvad man skal bruge – både Apache, MySQL & PHP samt phpMyAdmin for let DB-admin.
• Hurtigt at sætte op – tiden hvorfra du starter med at installere til du er klar til at arbejde er kort.

Ulemper

• Indeholder kun det allermest nødvendige. Der kan let opstå situationer, hvor du mangler moduler til Apache.
• Der er ingen form for FTP. Dette gør at WAMP ikke er særligt velegnet til en test-server på LAN f.eks.
• Ikke portable – det er dog subjektivt hvor stort et problem dette er. Hvis du er typen der ofte arbejder på flere computere kan det være til gene.

XAMPP

Er som WAMP en komplet WAMP-stack. Den har dog udover Apache, MySQL & PHP medfølger også en FTP-server. Til at kontrollere alt dette følger der som til WAMP. Kontrolpanelet er i dette tilfælde dog ikke et tray-ui men derimod et fuldt UI (se billede neden for). Dette UI indeholder lige som det til WAMP links til folderen hvor web-filerne ligger (her htdocs), start/stop knapper til det inkluderet software samt muligheden for at sætte dem til at starte sammen med Windows mm.

Screenshot af XAMPP's Control UI

Installationen af XAMPP er en lille smule længere og mere besværlig end WAMP, på den vis du bliver nød til at tage stilling til betydelig flere valgt. Et af dem værende hvorvidt det skal installeres som portable. Dette, som tidligere nænvt i WAMP-anmeldelsen, at du kan rygge rundt på installationen uden at påvirke den. Dette er smart, da det gør det muligt at installere på f.eks. en USB-nøgle/-harddisk.

Fordele

• Omfattende control-ui.
• En fuld funktionel WAMP-stack med Apache, MySQL, PHP. Inkludere yderligere phpMySQL og en FTP-server (FileZilla på Windows). FTP-serveren gør at XAMPP er let at bruge, hvis man skal bruge det til en test-server på f.eks. LAN.
• Indeholder rigtig mange moduler fra start.

Ulemper

• XAMPP er besværligt at installere i forhold til WAMP.
• XAMPP’s UI er ikke tilgængeligt i tray som WAMP’s. Dette er dog meget subjektivt hvorvidt dette er en ulempe eller fordel. Dette handler om personlig præference. For mit vedkommende er det en ulempe.

Roundup

Alt i alt handler det meget om hvad man er til – altså smag og behag. Begge installationer fungere upåklageligt som lokal test-server, og det er først når man begynder at arbejde med særlige udvidelser og/eller bruger dem som test-server på f.eks. LAN de for alvor begynder at være forskellige.

Vigtigt: Jeg vil ikke anbefale nogen af dem til produktions-miljøer da min erfaring er at det bedre kan betale sig at sætte op fra bunden og få 100% styr på hvad alle settings er sat til.

Har du en fordel/ulempe ved en af dem jeg har glemt, noget jeg har glemt at nævne, eller nogle oplysninger jeg har fået forkert skal du være velkommen til at skrive en kommentar. Alt feedback bliver taget glædeligt imod.

Som overskriften siger så er jeg blevet optaget på Akademiet for talentfulde unge også kendt som ATU. ATU er et talentudviklingsprogram der har til formål at tilbyde ekstra udfordringer til elever på gymnasie-niveau, der ikke får nok udfordring i den almindelige undervisning på deres gymnasier over en 3 årig periode. Jeg ser det derfor som en kæmpe ære at have været indstillet som en af de 3 Lyngby Teknisk Gymnasium (LTG), hvor jeg går, ville sende af sted. Det er særligt stort for mig da det er på baggrund af anbefalinger fra en stor del af mine lærer og ikke blot på karaktere eller lignende.

Det er en fantastisk anerkendelse af hvad jeg laver, og de ting jeg kan. Yderligere er det en unik mulighed for at tilegne mig ny viden, med et andet fokus end det der er i min hverdag på LTG. Hvis man kigger på de tidligere år, kan man se at der har været rigtig interessante mennesker som undervisere, som jeg vil kunne lære rigtig meget af. Samtidig tror jeg også, at det kan være rigtig sundt at lære noget om det videre akademiske liv som også er et af hovedmålene for dette ‘program’. Dette er utrolig rart, da det er den retning, det ligner jeg skal i fremtiden.

Alt i alt tror jeg, at dette kan være et rigtig brugbart ’tillæg’ til min gymnasiale uddannelse, og jeg tror at ATU kan tilbyde og lære mig nogle ting, jeg ikke kan i den almindelige undervisning. Forhåbentligt kan de ting jeg lærer ikke blot være til gavn under min gymnasiale men i resten af min tid som studerende hvor end det må være…

Standen på TEC-dagen under opsætning (Copyright Maja Justesen 2010)

Planchen i midten ser sådan her ud i detaljer (Gem billedet for større opløsning i tilfælde af nogen vil læse den).

Planchen til TEC-dag 2010, 'Stoffer & Alkohol' (Lavet & Copyright Joakim Sigvardt 2010)

Samtidig havde vi en aktivitet kørende som beregner, hvor meget alkohol der skal til for at opnå en promille på 1.5, hvor du officielt, er fuld. Det er baseret på, hvor meget du vejer og dit køn. Den kan yderligere også beregne din promille efter indtagelse af X genstande og over Y tid, hvor du selv udfylder X & Y. Dette er skrevet af mig i JavaScript (med brug af bl.a. jQuery), og det vil blive udgivet inden alt for længe til fri afbenyttelse under GNU General Public License version 2.

Det var alt om TEC-dagen i denne omgang. Der kommer muligvis lidt mere i forbindelse med en officiel evaluering i skole regi.

Vigtigt: Denne guide tager udgangspunkt i Windows. Alle beskrivelser af hvor ting findes tager udgangspunkt i Windows 7. Det burde dog ligne Vista og tildeles XP til en forveksling.

Installer Android SDK

Det første du skal gøre er at downloade Android SDK fra den officielle side her: http://developer.android.com/sdk/index.html

Når pakken er hentet udpak den til en mappe efter eget valg. Personligt har jeg lagt min i C:\androidSDK.

Start programmet op (SDK Manager.exe) og hent “USB Driver Package” i den nyeste revision, sammen med hvad du ellers skal bruge af SDK’et.

Du er nu nået til det punkt hvor det bliver “tricky”. For mit vedkommende ville den stadig ikke genkende min Legend. Det jeg kom frem til er, at man skal tilføje “PathTilDinAndroidSDKMappe”, til det der hedder “Miljø-variabler”. Du finder dette ved at højre-klikke på “Denne computer” i Startmenuen. Efterfølgende vælger du “Avanceret System indstillinger “ude til venstre. Du trykker her efter på “Miljø Variabler”-knappen. I det nye vindue ser du på listen “System variabler”, og du vælger den der hedder “sti”. Denne dobbelt trykker du på og tilføjer “;StiTilAndroidSDKmappe” i enden. Tryk her efter ok.

Tilpas Android SDK

Bagefter åbner du mappen til din Android SDK og åbner filen “android_winusb.inf” i mappen usb_driver med notesblok.

I mit tilfælde ser filen sådan her ud

;
; Android WinUsb driver installation.
;
[Version]
Signature           = "$Windows NT$"
Class               = AndroidUsbDeviceClass
ClassGuid           = {3F966BD9-FA04-4ec5-991C-D326973B5128}
Provider            = %ProviderName%
DriverVer           = 08/11/2009,2.0.0010.00002
CatalogFile.NTx86   = androidwinusb86.cat
CatalogFile.NTamd64 = androidwinusba64.cat

;
; This section seems to be required for WinUsb driver installation.
; If this section is removed the installer will report an error
; "Required section not found in INF file".
;
[ClassInstall32]
Addreg = AndroidWinUsbClassReg

[AndroidWinUsbClassReg]
HKR,,,0,%ClassName%
HKR,,Icon,,-1

[Manufacturer]
%ProviderName% = Google, NTx86, NTamd64

[Google.NTx86]
; HTC Dream
%SingleAdbInterface%        = USB_Install, USB\VID_0BB4&PID_0C01
%CompositeAdbInterface%     = USB_Install, USB\VID_0BB4&PID_0C02&MI_01
%SingleBootLoaderInterface% = USB_Install, USB\VID_0BB4&PID_0FFF
; HTC Magic
%CompositeAdbInterface%     = USB_Install, USB\VID_0BB4&PID_0C03&MI_01
;
;Moto Sholes
%SingleAdbInterface%        = USB_Install, USB\VID_22B8&PID_41DB
%CompositeAdbInterface%     = USB_Install, USB\VID_22B8&PID_41DB&MI_01
;
;Google NexusOne
%SingleAdbInterface%        = USB_Install, USB\VID_18D1&PID_0D02
%CompositeAdbInterface%     = USB_Install, USB\VID_18D1&PID_0D02&MI_01
%SingleAdbInterface%        = USB_Install, USB\VID_18D1&PID_4E11
%CompositeAdbInterface%     = USB_Install, USB\VID_18D1&PID_4E12&MI_01

[Google.NTamd64]
; HTC Dream
%SingleAdbInterface%        = USB_Install, USB\VID_0BB4&PID_0C01
%CompositeAdbInterface%     = USB_Install, USB\VID_0BB4&PID_0C02&MI_01
%SingleBootLoaderInterface% = USB_Install, USB\VID_0BB4&PID_0FFF
; HTC Magic
%CompositeAdbInterface%     = USB_Install, USB\VID_0BB4&PID_0C03&MI_01
;
;Moto Sholes
%SingleAdbInterface%        = USB_Install, USB\VID_22B8&PID_41DB
%CompositeAdbInterface%     = USB_Install, USB\VID_22B8&PID_41DB&MI_01
;
;Google NexusOne
%SingleAdbInterface%        = USB_Install, USB\VID_18D1&PID_0D02
%CompositeAdbInterface%     = USB_Install, USB\VID_18D1&PID_0D02&MI_01
%SingleAdbInterface%        = USB_Install, USB\VID_18D1&PID_4E11
%CompositeAdbInterface%     = USB_Install, USB\VID_18D1&PID_4E12&MI_01

[USB_Install]
Include = winusb.inf
Needs   = WINUSB.NT

[USB_Install.Services]
Include     = winusb.inf
AddService  = WinUSB,0x00000002,WinUSB_ServiceInstall

[WinUSB_ServiceInstall]
DisplayName     = %WinUSB_SvcDesc%
ServiceType     = 1
StartType       = 3
ErrorControl    = 1
ServiceBinary   = %12%\WinUSB.sys

[USB_Install.Wdf]
KmdfService = WINUSB, WinUSB_Install

[WinUSB_Install]
KmdfLibraryVersion  = 1.7

[USB_Install.HW]
AddReg  = Dev_AddReg

[Dev_AddReg]
HKR,,DeviceInterfaceGUIDs,0x10000,"{F72FE0D4-CBCB-407d-8814-9ED673D0DD6B}"

[USB_Install.CoInstallers]
AddReg    = CoInstallers_AddReg
CopyFiles = CoInstallers_CopyFiles

[CoInstallers_AddReg]
HKR,,CoInstallers32,0x00010000,"WdfCoInstaller01007.dll,WdfCoInstaller","WinUSBCoInstaller.dll"

[CoInstallers_CopyFiles]
WinUSBCoInstaller.dll
WdfCoInstaller01007.dll

[DestinationDirs]
CoInstallers_CopyFiles=11

[SourceDisksNames]
1 = %DISK_NAME%,,,\i386
2 = %DISK_NAME%,,,\amd64

[SourceDisksFiles.x86]
WinUSBCoInstaller.dll  = 1
WdfCoInstaller01007.dll = 1

[SourceDisksFiles.amd64]
WinUSBCoInstaller.dll  = 2
WdfCoInstaller01007.dll = 2

[Strings]
ProviderName                = "Google, Inc."
SingleAdbInterface          = "Android ADB Interface"
CompositeAdbInterface       = "Android Composite ADB Interface"
SingleBootLoaderInterface   = "Android Bootloader Interface"
WinUSB_SvcDesc              = "Android USB Driver"
DISK_NAME                   = "Android WinUsb installation disk"
ClassName                   = "Android Phone"

Under de fremhævet linier tilføjer du følgende linier

;HTC Legend
%SingleAdbInterface% = USB_Install, USB\VID_0BB4&PID_0C97
%CompositeAdbInterface% = USB_Install, USB\VID_0BB4&PID_0C97&MI_01

Du får derefter en fil lignende den her

;
; Android WinUsb driver installation.
;
[Version]
Signature           = "$Windows NT$"
Class               = AndroidUsbDeviceClass
ClassGuid           = {3F966BD9-FA04-4ec5-991C-D326973B5128}
Provider            = %ProviderName%
DriverVer           = 08/11/2009,2.0.0010.00002
CatalogFile.NTx86   = androidwinusb86.cat
CatalogFile.NTamd64 = androidwinusba64.cat

;
; This section seems to be required for WinUsb driver installation.
; If this section is removed the installer will report an error
; "Required section not found in INF file".
;
[ClassInstall32]
Addreg = AndroidWinUsbClassReg

[AndroidWinUsbClassReg]
HKR,,,0,%ClassName%
HKR,,Icon,,-1

[Manufacturer]
%ProviderName% = Google, NTx86, NTamd64

[Google.NTx86]
; HTC Dream
%SingleAdbInterface%        = USB_Install, USB\VID_0BB4&PID_0C01
%CompositeAdbInterface%     = USB_Install, USB\VID_0BB4&PID_0C02&MI_01
%SingleBootLoaderInterface% = USB_Install, USB\VID_0BB4&PID_0FFF
; HTC Magic
%CompositeAdbInterface%     = USB_Install, USB\VID_0BB4&PID_0C03&MI_01
;
;HTC Legend
%SingleAdbInterface% = USB_Install, USB\VID_0BB4&PID_0C97
%CompositeAdbInterface% = USB_Install, USB\VID_0BB4&PID_0C97&MI_01
;Moto Sholes
%SingleAdbInterface%        = USB_Install, USB\VID_22B8&PID_41DB
%CompositeAdbInterface%     = USB_Install, USB\VID_22B8&PID_41DB&MI_01
;
;Google NexusOne
%SingleAdbInterface%        = USB_Install, USB\VID_18D1&PID_0D02
%CompositeAdbInterface%     = USB_Install, USB\VID_18D1&PID_0D02&MI_01
%SingleAdbInterface%        = USB_Install, USB\VID_18D1&PID_4E11
%CompositeAdbInterface%     = USB_Install, USB\VID_18D1&PID_4E12&MI_01

[Google.NTamd64]
; HTC Dream
%SingleAdbInterface%        = USB_Install, USB\VID_0BB4&PID_0C01
%CompositeAdbInterface%     = USB_Install, USB\VID_0BB4&PID_0C02&MI_01
%SingleBootLoaderInterface% = USB_Install, USB\VID_0BB4&PID_0FFF
; HTC Magic
%CompositeAdbInterface%     = USB_Install, USB\VID_0BB4&PID_0C03&MI_01
;
;HTC Legend
%SingleAdbInterface% = USB_Install, USB\VID_0BB4&PID_0C97
%CompositeAdbInterface% = USB_Install, USB\VID_0BB4&PID_0C97&MI_01
;Moto Sholes
%SingleAdbInterface%        = USB_Install, USB\VID_22B8&PID_41DB
%CompositeAdbInterface%     = USB_Install, USB\VID_22B8&PID_41DB&MI_01
;
;Google NexusOne
%SingleAdbInterface%        = USB_Install, USB\VID_18D1&PID_0D02
%CompositeAdbInterface%     = USB_Install, USB\VID_18D1&PID_0D02&MI_01
%SingleAdbInterface%        = USB_Install, USB\VID_18D1&PID_4E11
%CompositeAdbInterface%     = USB_Install, USB\VID_18D1&PID_4E12&MI_01

[USB_Install]
Include = winusb.inf
Needs   = WINUSB.NT

[USB_Install.Services]
Include     = winusb.inf
AddService  = WinUSB,0x00000002,WinUSB_ServiceInstall

[WinUSB_ServiceInstall]
DisplayName     = %WinUSB_SvcDesc%
ServiceType     = 1
StartType       = 3
ErrorControl    = 1
ServiceBinary   = %12%\WinUSB.sys

[USB_Install.Wdf]
KmdfService = WINUSB, WinUSB_Install

[WinUSB_Install]
KmdfLibraryVersion  = 1.7

[USB_Install.HW]
AddReg  = Dev_AddReg

[Dev_AddReg]
HKR,,DeviceInterfaceGUIDs,0x10000,"{F72FE0D4-CBCB-407d-8814-9ED673D0DD6B}"

[USB_Install.CoInstallers]
AddReg    = CoInstallers_AddReg
CopyFiles = CoInstallers_CopyFiles

[CoInstallers_AddReg]
HKR,,CoInstallers32,0x00010000,"WdfCoInstaller01007.dll,WdfCoInstaller","WinUSBCoInstaller.dll"

[CoInstallers_CopyFiles]
WinUSBCoInstaller.dll
WdfCoInstaller01007.dll

[DestinationDirs]
CoInstallers_CopyFiles=11

[SourceDisksNames]
1 = %DISK_NAME%,,,\i386
2 = %DISK_NAME%,,,\amd64

[SourceDisksFiles.x86]
WinUSBCoInstaller.dll  = 1
WdfCoInstaller01007.dll = 1

[SourceDisksFiles.amd64]
WinUSBCoInstaller.dll  = 2
WdfCoInstaller01007.dll = 2

[Strings]
ProviderName                = "Google, Inc."
SingleAdbInterface          = "Android ADB Interface"
CompositeAdbInterface       = "Android Composite ADB Interface"
SingleBootLoaderInterface   = "Android Bootloader Interface"
WinUSB_SvcDesc              = "Android USB Driver"
DISK_NAME                   = "Android WinUsb installation disk"
ClassName                   = "Android Phone"

Næste gang du nu tilslutter din telefon, burde Windows selv installere driverne.

Afrunding

Jeg håber dette har hjulpet nogen, der har haft problemer med deres ADB. For mig at se er dette en bug eller mangel i Android SDK der gør, at enheden ikke vil genkendes ordenligt. Forhåbentligt bliver dette fixet i nyere versioner og hvis ikke – så må vi bare arbejde os uden om med denne (eller lignende)  metode(r).

Jeg vil på det kraftigste anbefale dig/jer at møde op, hvis du/I er nysgerrigeomkring, hvad der sker på HTX – enten som fremtidig elev, eller bare for at se hvad man foretager sig. Det hele løber af staben

lørdag den 25. september kl. 10-13

Adresserne og mere information kan findes her: http://www.tec.dk/tec/TEC-dagen_2010-4732.aspx

Det var propagandaen På et mere personligt plan vil jeg sige, at det nok skal blive rigtig sjovt. Særligt da det giver anledning til at afprøve en masse reklame- & kommunikations-teknikker, og ellers prøve at fortælle folk lidt om, i mit tilfælde, stoffer og alkohol. Personligt håber jeg, at vi kan give folk et andet syn på sagerne, da vi tilstræber os at lave en meget neutral fremlæggelse, hvor vi lader det op til lytteren af danne sig en mening baseret på fakta (som vi præsentere), i stedet for at vi prøver at lave en skramme kampagne og pådutte folk en holdning.
Alt i alt skal det nok blive sjovt, og jeg håber på at se nogle af jer!

Child-selectoren

Til at vise brugen af denne selector har jeg sammensat følgende HTML:

        Test-dokument
</pre>
<div id="content" class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend, ligula nec suscipit faucibus, lectus odio facilisis metus, ac adipiscing augue turpis vel risus. Mauris sit amet malesuada odio. Praesent lacinia sem non elit varius vestibulum. Donec id lorem nec urna egestas molestie ut eget felis.
<div id="fakta-box">
 Morbi porttitor sapien vitae mi adipiscing cursus. Donec sed lorem metus. Aliquam quis accumsan diam. Nam ac leo augue. In cursus facilisis ante semper lacinia. Integer porta vehicula odio, nec aliquet purus hendrerit sed. Fusce quis pharetra quam. Donec dolor sem, tempor eget laoreet sit amet, ullamcorper ut ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque justo orci, porttitor eget tempus id, consectetur in arcu. Morbi facilisis nulla ut nisi dapibus bibendum. Proin ac diam id est auctor porta vitae nec arcu. Praesent vitae ante a enim tincidunt congue et in odio. Nunc eget sapien sit amet risus varius iaculis.</div>
</div>
<pre>

Lad os sige at vi ønsker at vores tekst i selve content skal være blå, men vi ikke vil have, at vores tekst i fakta-boksen bliver blå. Den vil vi forsat have sort. Den mest lige til (og nok mest brugte) er den her:

#content p{
      color: #00F;
 }
 #fakta-box p{
      color: #000;
 }

Child-selectoren gør dog, at vi kun skal bruge halvt så meget CSS og får en langt pænere kode med sammen resultat:

#content > p{
      color: #00F;
 }

Det child-selectoren gør, er at den siger: “Alle p-tags der direkte children af #content skal have color: #00F“. Det betyder, at hvis der ligger et div eller andet ‘imellem’ #content og p-tagget, bliver CSSen ikke ‘lagt på’.

Tag-specificering af class- & id-selectorene

Til at vise hvordan denne specificering kan være brugbar, har jeg skrevet følgende HTML (der ligner den forrige meget):

        Test-dokument

</pre>
<div id="content" class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="blaa" href="en-hjemmeside">Nullam eleifend</a>, ligula nec suscipit faucibus, lectus odio facilisis metus, ac adipiscing augue turpis vel risus. Mauris sit amet malesuada odio. Praesent lacinia sem non elit varius vestibulum. Donec id lorem nec urna egestas molestie ut eget felis.</div>
<pre>

Lad os sige at vi vil have både vores p-tag og vores a-tag til at være blå. Det er derfor logisk at give dem begge to classen ‘blaa’, men vi ønsker at der skal være en farveforskel, så vores besøgende kan se forskel på tekst og links. Typisk ville man give dem hver sin class f.eks. “blaa-tekst” og “blaa-link”. Det kan dog sagtens gøres uden på følgende måde:

p.blaa{
	color: #009;
}

a.blaa{
	color: #00F;
}

Det der kort sagt sker her, er at vi siger “Alle p-tags med classen blaa skal have color: #oo9. Alle a-tags med classen blaa skal derimod have color: #00F“. I mange tilfælde kan det være en fordel, for at gøre CSSen lettere at læse, at give dem hver sin class men i nogle tilfælde, kan denne denne metode virke mere praktisk. I koden oven for kan ‘.’ erstattes med ‘#’, i tilfælde af der er tales om ID’er og ikke classes. Syntax’en er den sammen.

Attribute-selectoren

Til at vise denne selector har jeg lavet en lidt anderledes HTML end til de to andre:

        Test-dokument

</pre>
<div id="content" class="container"><form id="test-form">Unchecked: <input type="checkbox" />

 Checked: <input type="checkbox" checked="checked" /></form></div>
<pre>

I det her tilfælde er det vi vil opnå, at når en checkbox bliver checked (f.eks. via javascript), skal der skiftes cursor til når musen kører over. Dette kan, så vidt jeg ved, kun opnås med denne selector og det gøres med denne simple måde:

#test-form input[checked="checked"]{
	cursor: wait;
}

Det vi gør er, at vi siger “Alle input elementer hvor attributen checked = checked vil vi have ændret cursoren til wait-cursoren”. Denne metode kan også bruges på alle andre attributes så som title, href osv. Der er dog også langt flere muligheder med denne selector end bare at sammenligne værdier. De flere muligheder agter jeg ikke at drøfte her, da det ikke er formålet med guiden. I tilfælde af du vil lærer mere er de beskrevet i CSS 2 specifikationerne.

Afrunding

Dette var alt for denne omgang omkring CSS 2 selectors. Jeg håber i har lært nogle nye tricks, som kan gøre arbejdet lidt lettere og om måske koden lidt pænere.

Antal tab af menneskeliv (soldater) i Afghanistan fordelt pr. måned (Kilde: Wikimedia.org 19/6-2010)

Jeg har læst om folk og talt med folk, der har været der. Mange af dem mener, at man/vi gør det rigtige. De mener, at vi gør det eneste rigtige ved at blive og opbygge landet. De mener at hvis vi trækker os ud nu, så tæt på mål om man vil, at alle de mange (1,725 pr. 7 juni, 2010) døde har været forgæves, da alting vi har opbygget vil falde fra hinanden. Jeg forstår dem godt. Hvis du oplever, at tingene går frem af. Hvis du føler og kan se at tingene er på den rette vej, virker det det besynderligt at trække sig ud nu. Problemet er bare, at det deres 5.5 millioner landsmænd, altså os, ser er ikke at tingene går frem af. Vi ser ikke hvordan, folk måske føler sig mere trykke. Det vi ser er det, om man vil, rædselsbillede medierne tegner at krigen. Et billede tegnet med hårde fakta og voldsomme billeder. Det er det billede, vi ser her hjemme.

ISAF's Logo (Kilde: Wikimedia.org)

Der går stort set ikke en dag uden, at du i TV-avisen, i din morgenavis eller anden foretrukken nyhedskilde ser en overskrift, vedrørende en bombe der er sprunget, og en (eller flere) soldat(er) har mistet livet i Afghanistan eller en anden krigszone. Problemet med at vi kun modtager historier om folk der dør og kommer tilskade er, at medierne og befolkningen generelt har en tendens til at lade alle disse tragedier overskygge, de få gode historier der skrives omkring hvad der sker i Afghanistan. Og det er ikke mange af dem der kommer i forvejen. Problemet er at en historie omkring hvordan en landsby i Afghanistan, måske lige pludselig kan slappe af og leve et stille og fedeligt liv grundet ISAF indstats ikke sælger aviser, og derfor ikke skrives. Men er det ikke disse små ‘lykke’-historier, der er lige så vigtige som dem om dødsfaldene? Jo, for mig at se, er det vigtigt at vi hører om dødsfaldene, men så sandelig også at vi hører om alle de små lykke historier. Hvis vi, som vi gør for tiden, kun bliver præsenteret for den ene side af sagen, har vi i sagens natur, ikke en ærlig chance for at have en vel argumenteret mening om krigen og vores indstats.

Det her er hvad krigen i Afghanistan handler om - at skabe fred og tryghed. Her Norske soldater fra ISAF i gang med genopbygningen af en landsby (Kilde: Wikimedia.org)

Det er alt sammen på et politisk eller et samfundsfagligt plan. Men hvordan påvirker krigen soldaterene på et personligt plan? Hvordan bliver de påvirket mentalt? Der er så mange vinkler at belyse denne konflikt på, og hver gang du begynder på en vinkel, finder du en ny der måske er endnu bedre. Krig er noget forbandet rod, og denne krig er ingen undtagelse. Forhåbentligt kan dette dog hjælpe jer, lige som det har hjulpet mig, med at prøve at finde en holdning til hvad der sker og hvad man synes.

De nye Android telefoner (2.x) er de sat op til at køre på et netværk der hedder WCDMA – det eneste problem ved det netværk er, at vi i Danmark kører GSM. Dette medfører at telefonen hver gang den vil prøve at tilslutte en ny mast, først prøver at bruge WCDMA, og derefter må erkende at det ikke findes og ‘falde tilbage’ til GSM. Det kræver unødigt aktivitet af den strømslugende slags. Det dette lille ‘fix’ går ud på er, at vi sætter telefonen til at hoppe direkte på GSM i stedet, og vi spare noget strøm der. Det er meget simpelt at gøre:

1. For en sikkerheds skyld kan jeg anbefale at du tager en hastighedstest på din telefon med Speedtest.net Speed Test (QR-kode nedenfor). Dette kan bruges til at sikre dig, at dette trick ikke nedsætter din hastighed på 3G. I tilfælde af du ikke bruger 3G, kan dette være lige meget.
   

   Speedtest.net Speed Test

2. Start med at gå ind test-mode på din telefon. Dette gøres ved at åbne telefonen og ‘ringe op’ til det her nummer: *#*#4636#*#*.
3. Når test-mode er åbnet så tag den første af de fire menu-punkter, der hedder Telefonoplysninger.
4. Scroll helt ned i bunden af den ny-åbnede menu, og tryk på den dropdown-liste hvor der står “WCDMA preferred”. Der åbner nu en liste med en masse navne, og du scroller ned til ca. midten, hvor du finder en der hedder “GSM auto (PRL)”.
5. Luk her efter test-mode ned og lad telefonen oprette forbindelse til masterne igen. Dette kan tage lidt tid (10-30 sekunder).
6. Hvis du udførte trin 1, vil jeg anbefale at du tager en hastighedstest igen, og se om hastigheden er den sammen. Hvis ikke, gentage de her trin hvor du bare skifter fra “GSM auto” til “WCDMA preferred” i stedet på trin 4.

Jeg håber det kan presse lidt mere liv ud af jeres batterier – personligt har det givet mig ca. ½ døgn mere pr. opladning, hvilket må siges at være en pæn del!

VIGTIGT: Hvis du oplever problemer kan du ALTID gå tilbage til de gamle indstillinger ved at følge guiden og bare ændre GSM auto til “WCDMA Preferred”.

Opdatering:

Efter dette indlæg originalt er udgivet, har jeg læst mere op på tingene, og jeg har sat mig langt mere ind i hvordan det hele fungere. Det der sker er følgende, når vi laver denne ændring:

“WCDMA preferred” gør at din telefon favorisere 3G frem for 2g forbindelsen i tilfælde af lav signalstyrke.

“GSM auto (PRL)” gør, omvendt WCDMA, at din telefon favorisere 2G frem for 3G ved lav signalstyrke.

En rigtig god, men engelsk, beskrivelse kan ses her under:

What that does, is tells your phone to connect using EDGE, and obtain a Preferred Roaming List (PRL) from the tower, and THEN switch to 3G when a data channel is required.

WCDMA preferred has the phone try to find 3G directly. This takes more power until a connection is established.

Depending on your towers and service availability …  this will help quite a bit.

In Edge only areas it saves a lot of battery by not searching for HSPDA when it does not exist.

Dette er taget her fra. Mange tak.

Særligt de to fremhævede passeager er vigtige i denne sammenhæng. Det er vigtigt at ligge mærke til, at der står i den første af de fremhævet passager er, at telefonen bruger en helt del energi på at prøve at hoppe direkte på 3G. Dette er ikke noget problem, hvis der er god dækning, som der er i de fleste storbyer i Danmark. Det er dog knap så hensigtsmæssigt, i tilfælde af at 3G ikke er tilgængeligt (eller signalet er meget svagt), da den bruger meget strøm på at prøve at finde noget, der ikke findes. Derfor vil det spare meget strøm at sætte den på GSM, og derved forkorte tiden den leder efter 3G før den hopper på 2G.

Jeg håber, at denne opdatering har fået gjort nogle ting mere klare.

Det denne exetension gør er følgende (på engelsk, taget fra deres side):

• Introduces the Multiscreen Preview panel , allowing for Live View display on 3 different screen sizes, with Media Query support. (Window > Multiscreen Preview)
• Adds code hinting for the HTML5 Tag Library with new tags, attributes, and properties.
• Updates code hinting for new attributes and values in existing HTML tags.
• Adds code hinting for the following CSS3 specifications: 2D/3D Transformations; Animations; Background and Border; Basic User Interface; Line Layout; Marquee; Media Queries; MultiColumn; Ruby; Text; and Transitions.
• Updates Live View to support <video> and <audio>. (Requires Quicktime installation.)
• Improved rendering for CSS3 in Live View.
• Adds HTML5 starter layouts to the New Document Dialog box.
• Offers better rendering for new tags in Design View.

Jeg har installeret denne extension’en, og jeg må sige jeg er rigtig godt tilfreds. Den virker utrolig godt, og det gør bestemt livet meget lettere for alle os, der er hoppet med på den tidelige HTML5 og CSS3 vogen.

Jeg håber at i kunne bruge det.