Kunskapsbanken
Artiklar, guider, tips och trix tillsammans med exempelprogram inom webbprogrammering och webbutveckling. Inläggen är listade i den ordning som de senast uppdaterats.
En Single Page Application me-app
Vi ska i denna övning skapa en me-app i HTML5, CSS3 och JavaScript. Vi gör ett medvetet val om design för att vi ska få ett utseende som liknar en “native” mobil-app. Vi skapar navigation anpassat för små enheter, men som även fungerar för stora. Webbläsarens inbyggda teknologier används för att hämta data från ett JSON API och vi gör en redovisningssida, som är lättläst på alla enheter.
MySQL och Node.js
Databasen MySQL är välkänd i webbsammanhang och ser hur vi kan koppla oss från Node.js in i en MySQL databas.
Vad är UML?
UML står för Unified Modeling Language, det är ett visuellt modelleringsspråk för att specificera, konstruera och dokumentera artefakter i ett system.
Det brukar användas på tre sätt:
- Som en sketch: Informell och ofta inte fullständig, hand sketch eller på whiteboard. Används för att utforska problem.
- Som en ritning: Används för:
- reverse engineering, för att förstå existerande kod.
- För att se hur ny kod ska genereras.
- Som ett programmeringsspråk: Det finns färdiga verktyg som genererar kod baserat på UML.
Vi kommer gå igenom två diagram typer, Klass diagram och Sekvens diagram.
Kom igång med objekt i Python
Allt i Python är på ett eller annat sätt ett objekt. Strängar, integers, listor, moduler - ja, allt. Vi ska titta på är hur man skapar egna klasser och objekt och hur man hanterar dem.
Klass relationer i Python
Precis som i naturens värld kan vi inom programmering ärva egenskaper från en “förälder”. En klass kan ärva metoder och attribut från en annan klass, dess objekt kallas ofta för förälder- och barn-objekt. När man kan beskriva relation mellan två klasser som “is-a” är det oftast en arvs relation.
Skapa en familj av teman till Anax Flat
Vi skall jobba med temat och LESS-koden för att skapa en familj av olika teman. En familj av teman som delar ett bastema som gör det enkelt att styla och anpassa varje tema till en viss layout.
Vilka möjligheter har vi att strukturera vår LESS-kod för att göra modulerna mer återanvändbara?
Kom igång med ramverket Flask
Flask är ett microramverk för Python, som gör det möjligt att skapa webbapplikationer. Det är litet men kraftfullt. Vi ska gå igenom hur man installerar det och kommer igång med en enkel sida.
Skapa ett horisontellt grid för typografi
Vi skall skapa ett typografiskt grid. Jag kallar det ett horisontellt grid för att skilja det från det vertikala gridet vi tidigare pratat om. Horisontellt eftersom gridet baseras på rader och fonternas baseline. Ett sådant här grid kan även kallas för baseline grid. Dess huvudsakliga syfte är att skapa en rytm i sidan, en rytm som innebär att alla typografiska element delar en och samma multipel av en höjd. En sådan rytm kallas även för vertikal rytm.
Använd ett vertikalt grid med Anax Flat
Vi har sedan tidigare byggt ett responsivt tema till Anax Flat och nu är det dags att bygga ut det baserat på ett vertikalt grid.
Vi skall använda LESS-moduler för att bygga ut vårt tema, delvis med mixins som hjälper oss att implementera ett grid, ett rutmönster där vi placerar ut webbsidans olika element.
Bygg en me-sida med Anax Flat
Vi skall använda ramverket Anax för att bygga en me-sida. Eller, närmare bestämt en variant av Anax som heter Anax Flat.
Vi börjar med en tom katalog och hämtar hem alla komponenter vi behöver, till slut har vi en webbplats skapad med ramverket Anax Flat.