Archives for posts with tag: HTML

Att skapa webbsidor på det gamla hederliga sättet, genom att skriva HTML, är kul. Men är det programmering? Det beror på vem du frågar. Att åsikterna kraftigt går isär framgår till exempel av den här diskussionstråden. Själv lutar jag, i likhet med författaren av detta blogginlägg, nog åt nej, bland annat eftersom HTML och andra märkspråk saknar grundläggande konstruktioner som loopar och villkorssatser. Men jag tillstår att även jasidan har hyfsade argument. Och även om diskussionen är lite intressant känns det inte särskilt viktigt att ha en tydlig åsikt.

Vad jag däremot är helt övertygad om, det är att HTML är en alldeles utmärkt väg in i programmeringens värld. För det första är det lätt att komma igång. Om du har tillgång till en vanlig dator, då har du redan allt du behöver för att kunna knacka HTML: en texteditor och en webbläsare. ”Riktiga” programspråk kräver däremot installation av mjukvara som en kompilator eller programtolk och ibland särskilda utvecklingsverktyg. Ofta är det ett helvete, rent ut sagt, att sätta upp en fungerande utvecklingsmiljö.

För det andra: Genom att skriva HTML lär du dig att använda en texteditor och du blir snabbt varse fördelarna med att skriva på ett snyggt och strukturerat sätt, med indrag etc, samt vikten av att stava rätt och sätta konstiga tecken på precis rätt ställen. Det kommer du att ha nytta av om du senare går vidare till annat kodande. För det tredje är HTML ett lämpligt, för att inte säga nödvändigt, första steg för dig som vill lära dig att skapa exempelvis spel och grafik med Javascript.

Och så är det ju skojigt att skapa en alldeles egen, personlig hemsida som till skillnad från exempelvis denna blogg eller de sociala mediernas profilsidor inte följer några givna mallar. Nu är det ju långt ifrån alla som har tillgång till serverutrymme för en hemsida, men hos Neocities kan du snabbt, enkelt och alldeles gratis skapa en egen webbplats på upp till 20 megabyte. (Om du väljer att stödja detta finfina projekt med en struntsumma per månad får du ett mycket större utrymme.)

Dessvärre är det ont om bra, svenskspråkiga nätresurser för dig som vill lära dig HTML från grunden. I synnerhet om du är ett barn. Men du som förstår engelska kan välja och vraka mellan olika interaktiva verktyg varav flera är omnämnda här och här. Och om du inte har något emot pappersböcker kan jag återigen rekommendera smått klassiska HTML och CSS-boken av Rolf Staflin.

Lycka till med programmeringen! Eller vad man nu ska kalla det.

/Mats

Annonser

Sedan jag började blogga om olika sätt att lära sig programmera har jag stött på ett stort antal verktyg och resurser, avsedda för nybörjare i olika åldrar. En del har jag hittat via andra bloggar, artiklar och Twitterinlägg. En del har ni läsare/följare tipsat om. Några har jag själv blivit riktigt förtjust i, och puffat för i tidigare inlägg. Andra har jag bara testat lite grann och vissa har jag ännu inte hunnit prova alls.

De här verktygen har nu blivit så många att jag känner att det är dags att sammanställa dem i en lista (inte minst för min egen skull, så att jag inte glömmer bort något). Först tänkte jag dela upp dem i barn- och vuxenverktyg. Men det är rätt svårt att bestämma var gränsen ska dras. Jag har själv haft nytta av – och framför allt mycket kul med – verktyg som egentligen är avsedda för barn. Och många äldre barn som är duktiga på engelska kan säkert använda de verktyg som är till för vuxna. Så här följer de i stället rakt upp och ner, i den ordning de dök upp i mitt huvud.

1. Scratch

Scratch är ett visuellt programspråk och ett utvecklingsverktyg. Eller, lite enklare uttryckt, ett program där man ”pusslar” ihop kod i stället för att skriva den. Scratch är i första hand avsett för barn mellan 8 och 16 år, men kan förstås användas oavsett ålder. Med Scratch kan man skapa spel, animationer med mera. Man kan även dela med sig av sina projekt, och kolla in andras, på Scratchs webbplats. Kom nyligen i en ny version, som körs direkt i webbläsaren. Finns, till skillnad från flertalet verktyg nedan, på svenska.

2. Snap

Snap, eller Build Your Own Blocks som verktyget tidigare kallades, är en vidareutveckling (”extended reimplementation”, heter det på hemsidan) av Scratch. Till skillnad från originalet kräver Snap inte Flash för att fungera. Å andra sidan finns det inte på svenska och de sociala funktionerna tycks vara begränsade. Är snarare avsett för gymnasie- och högskolestudenter än för mindre barn.

3. Tynker

Tynker är ännu en Scratch-variant, som i skrivande stund bara är tillgänglig för skolor men som ”snart” (enligt hemsidan) ska släppas för privatpersoner. Körs i webbläsaren, kräver inte Flash.

4. Hopscotch

Även Hopscotch påminner rätt mycket om Scratch, men har betydligt färre funktioner och körs på Ipad. Kan användas för att skapa animationer av enklare slag (enligt tillverkaren kan man även göra spel). Rekommenderas (av tillverkaren) för personer från 8 år och uppåt.

5. Daisy the Dinosaur

Hopscotch-folket ligger även bakom Daisy the Dinosaur, en liknande Ipad-app som tycks vara avsedd för något yngre barn. Här gäller det att skapa små program som får dinosaurien Daisy att röra sig på skärmen. Det ska också gå att skapa ett eget spel om man laddar ner ett speciellt kit.

6. Greenfoot

I Greenfoot, som beskrivs som en interaktiv utvecklingsmiljö, lär man sig objektorienterad programmering i Java. Enligt Wikipedia är Greenfoot främst tänkt att användas i utbildningssyfte, på gymnasienivå och uppåt. Ska kunna användas för att skapa spel, simuleringar och andra grafiska program. Är plattformsoberoende och laddas ner här (observera att man även måste ha Java Development Kit, JDK,  på datorn).

7. Kids Ruby

Kids Ruby är ett barnanpassat utvecklingsverktyg för programmering i Ruby. Verktyget har en hjälpmeny med texter om bland annat programmeringens grunder, sköldpaddsgrafik och spelprogrammering med ramverket Gosu. Finns här för Windows-, Mac- och Linuxdatorer (inklusive Raspberry Pi). Kommer snart i en svensk version!

8. Hackety Hack

De programmerare som ligger bakom Kids Ruby har hämtat inspiration från Hackety Hack, som är ett snarlikt verktyg. Hackety Hack skapades ursprungligen av den i Rubykretsar smått legendariske programmeraren Jonathan Gillette, mer känd som ”why the lucky stiff”.

9. Codecademy

Codecademy är en utbildningssajt med interaktiva kurser i Ruby, Python, Javascript med flera programspråk. I takt med att man klarar av de olika övningarna samlar man på sig poäng och medaljer. Det finns också olika grupper för den som vill diskutera, koda tillsammans med och lära sig av andra användare.

10. Code School

En annan sajt som erbjuder interaktiva kurser i programmering är Code School. Här finns också instruktionsvideor. Flertalet kurser och filmer är bara tillgängliga för betalande prenumeranter, men det finns en hel del gratismaterial. På Code School kan man, förutom t ex Ruby, Javascript och HTML/CSS, lära sig att koda Ipad- och Iphone-appar.

11. Try Ruby

Code School driver även Try Ruby, en sajt som ursprungligen skapades av ”why” (se Hackety Hack ovan) och som för undertecknad var inkörsporten till språket Ruby. Interaktiv tutorial som bara tar cirka en kvart att slutföra. Sedan kan man med fördel gå vidare till Codecademys eller Code Schools kurser.

12. Khan Academy

Khan Academy är ytterligare en utbildningssajt som dock har ett betydligt bredare utbud än de ovan nämnda. Här kan man studera såväl konsthistoria som organisk kemi, men också få en introduktion till programmering (se under ”Computer Science”).

13. Code Monster

Code Monster är en interaktiv tutorial i Javascript avsedd för barn. Man skriver koden i en ruta och ser omedelbart resultatet i rutan bredvid. Genom att följa instruktionerna från kodmonstret (som pratar engelska) får man stegvis lära sig grundläggande saker som variabler, loopar och villkorssatser.

14. Eloquent Javascript

En annan, betydligt mer krävande, ingång till Javascript är Eloquent Javascript, som är en e-bok med interaktiva exempel/övningsuppgifter. Också en bra grundbok i programmering, för den ambitiösa nybörjaren.

15. Kojo

Kojo beskrivs som ett lärandeverktyg för programmering och matematik. Finns i en svensk version och kan användas för att skapa sköldpaddsgrafik, musik, animeringar, spel med mera. Bygger på programspråket Scala och kan antingen köras direkt från webben eller laddas ner. Kräver Java.

16. Kodu Game Lab

Med Kodu Game Lab kan ungarna skapa egna 3D-spel. Om de begriper hur man gör, vill säga. Kodu är visuellt häftigare än Scratch men också, enligt min mening, svårare att komma igång med. Som tur är finns det gott om instruktionsvideor, både på Kodus webbplats och på Youtube. Det är Microsoft som ligger bakom Kodu, och verktyget är således endast tillgängligt för Windows. Laddas ner här.

17. Alice

Alice är ett annat alternativ för dig som tycker att två dimensioner är en för lite. På hemsidan beskrivs Alice som en miljö för 3D-programmering som man kan använda för att skapa animationer, spel och videor. Tanken är att programmet ska ge en första introduktion till objektorienterad programmering. Kräver, liksom Greenfoot ovan, JDK för att fungera och kan laddas ner här (senaste versionen, även tidigare versioner finns tillgängliga på sajten).

18. Processing

Processing är ett programspråk och en utvecklingsmiljö som, enligt hemsidan, lär ut programmeringens grunder ”i en visuell kontext”. Programspråket beskrivs på Wikipedia som en förenklad version av Java. Kan köras på Windows-, Mac- och Linuxdatorer och laddas ner från webbplatsen, där man också kan titta på den här filmen om kreativ programmering med Processing.

19. Code Avengers

Roligt och effektivt lärande för alla åldrar utlovas på Code Avengers, som är en annan sajt med interaktiva tutorials. Här kan man lära sig Javascript och HTML/CSS. De första lektionerna är gratis, vill man sedan gå vidare till högre nivåer så kostar det en liten slant.

20. Sommarprogrammering.se

Sommarprogrammering.se
är en sajt som Stockholms universitet och KTH ligger bakom. Via den kan man skapa ett kurskonto och sedan gå en liten webbkurs i programmering. Det programspråk som används är Python. Man får även lära sig att använda ett terminalfönster i Windows/Unixliknande system. Observera att ingen formell ansökan till kursen krävs, utan man får tillgång till kursmaterialet direkt efter registrering. Man kan alltså gå den ”på skoj”.

Här väljer jag att dra ett streck för listan, även om jag har ytterligare några kandidater i bakhuvudet. Som synes har jag inte tagit med ”programmeringsspel” som Move the Turtle och Cargo-Bot – om dem har jag skrivit i en tidigare bloggpost. Ej heller har jag listat ”vanliga” e-böcker eller tutorials, utan ett krav har varit någon form av interaktivitet. Ett annat kriterium har varit att verktygen ska vara gratis.

Har jag missat något verktyg som absolut förtjänar att vara med? Posta gärna en länk i kommentarsfältet!

/Mats

PS. Om du absolut känner att du måste ha mer att välja på hittar du ytterligare några utbildningssajter/interaktiva tutorials här och ett stort antal resurser för kodande barn här.

Hur det går med ungarnas hemsidor? Tackar som frågar. Vi har, på en dryg vecka, kommit en bra bit på väg. Man kan säga att grunderna är lagda, väggar och tak är på plats och fasaderna är målade. Ja, vi har – för att fortsätta liknelsen med husbyggen – till och med inrett respektive farstu. Med andra ord: de har numera varsin startsida med bild, kort presentationstext och meny. Nu återstår bara att fylla resten av ”rummen” med innehåll. Så här ser sidorna ut:

Besök dem gärna på rorbecker.com/selma och rorbecker.com/svante och, om du är nyfiken på hur vi har gjort, kika på källkoden (högerklicka och välj ”Visa källkod” eller liknande alternativ). Det som kanske kan vara särskilt intressant för andra ovana hemsidesbyggare är de CSS-filer, stylesheets/formatmallar,  som styr hur sidorna ser ut (selmastil.css respektive svantestil.css). Och då tänker jag framför allt på de så kallade typsnittsdefinitionerna (de stycken som inleds med ”@font-face”).

De typsnitt som används på sidorna – Colaborate respektive Komika Axis (rubriker) och Droid Sans (vanlig text, menyer) – är hämtade från Font Squirrel, en fantastisk liten sajt där jag har tillbringat mycket tid på sistone. Genom att ladda ner typsnitten, lägga filerna i samma katalog som hemsidan och deklarera i formatmallen att just dessa ska användas får man full kontroll över hur texten visas för användaren (även om hen inte har typsnitten i fråga på sin egen dator).

Jag hade inga problem med att få det här att funka i webbläsarna Firefox, Safari och Chrome. Med Explorer var det betydligt knöligare. Till slut gav jag upp försöken att själv klura ut hur jag skulle göra, och kopierade typsnittsdefinitionerna från Font Squirrels exempelfiler. Då gick det.

Nog om typsnitt. I förra inlägget antydde jag att jag kanske skulle bygga en hemsida åt mig själv också. Och jo, så blev det. I mitt fall är ”huset” helt klart (även om det, med tanke på den korta byggtiden, kanske ska betraktas som något av ett fuskbygge). Adressen är rorbecker.com/mats. Titta gärna förbi!

/Mats

Jag har inte knackat HTML sedan åren kring millennieskiftet. Men nu har det blivit dags igen. Jag har nämligen lovat ungarna att jag ska hjälpa dem att bygga varsin hemsida. Och vi ska varken använda färdiga templates (layoutmallar) eller hjälpmedel som Dreamweaver/NVU – vi ska bygga dem ”för hand”, med HTML och CSS. Varför? Jo, jag vill att barnen ska få ett hum om hur webbplatser ser ut under ytan.

Vi ska, har jag tänkt, utgå från denna extremt enkla HTML-mall (klicka för större bild):

När ungarna har fyllt sina sidor med text ska vi först lägga till bilder och sedan fixa till utseendet med CSS-kod i separata stylesheets (formatmallar). Resultatet ska bli enkla ”profilsidor” som sedan, om de så önskar, kan byggas ut med fler sidor, menyer etc. Just webbdesign är inte min starkaste sida, men jag hoppas att de ska bli hyfsat snygga.

Jag har som sagt använt HTML tidigare. Men för att fräscha upp minnet, och få lite kläm på CSS, har jag plöjt HTML och CSS-boken av Rolf Staflin. Det är en lättbegriplig bok som verkligen börjar från grunden, och som jag härmed rekommenderar varmt om du själv vill lära dig att bygga webbsidor.

Själv har jag konton på både Twitter och Facebook, och jag känner väl inte direkt något behov av en egen hemsida. Men det är inte utan att jag, medan jag har förberett ungarnas sajter, har blivit lite sugen på att bygga en, bara för skojs skull. Något ska man ju ha sin domän till…

/Mats