Webbutveckling02 [weuweb02]

Kunskap - Resurser

CSource

Inom all applikationsutveckling lär vi av varandra, på en högskolekurs jag gick så fick vi använda en smidig applikation som heter CSource. CSource är en php-applikation dom du enkelt kan lägga i din egen applikation som visar upp php-koden utan att den körs. På det sättet kan vem som helst, som har länken, kolla på din php-kod och hjälpa dig att felsöka om det behövs. Det är också genom denna applikation jag kommer bedöma din kod.

En guide för att använda CSource hittar du här, enklaste sättet är att följa guiden för Den snabba vägen med source.php. Hela repositoryt finner du här.

Det finns vissa saker du behöver fundera på var du vill lägga din CSource.

  • Om du lägger din i rooten på din domän, http://www.dindoman.se/source.php så kommer alla som använder applikationen att kunna läsa alla dina filer i samtliga undermappar som finns på din domän. Därför kan det vara smidigt att skapa en mapp som heter /moment/ eller något liknande och sedan lägga source.php där, då kan vi bara se filerna i den mappen och alla underliggande mappar.
  • När vi jobbar med användarnamn och lösenord är det viktigt att dessa inte skrivs hur som helst. För att CSource skall maska dem, och ersätta med texten Intentionally removed by CSource, behöver du lagra användarnamn i en variabel med något av följande namn, password|passwd|pwd|pw|user|username. Dubbelchecka alltid att alla dina viktiga uppgifter inte visas för användaren.
  • Fundera på hur du vill använda länken till din CSource-fil, jag lägger den öppet i de applikationer där jag vill att alla skall ha lätt att komma åt den. Ibland döper jag om filen till någonting som bara jag känner till så att det är enkelt att leta efter specifik kod på specifik sida via nätet. Den länken finns ingenstans. Själva source.php-filen kan du döpa till vad som helst, den är helt självständig.

Filmad genomgång

Här hittar du en filmad genomgång om hur jag vill att vi skall använda CSorce och även hur den miniapplikationen fungerar.

OneDrive

OneDrive är Microsofts molntjänst och eftersom du har ett konto kopplat till Office365 via skolan så rekommenderar jag att du använder denna applikation.

Ladda ner den via AppStore och installera programmet. När du har gjort detta och angivit ditt användarnamn (mailadress) så kommer det lägga sig en mapp i datorns katalogstruktur. Min rekommendation är att du sedan drar en genväg till denna mapp och placerar den bland dina favoriter i finders vänstermarginal.

Skapa sedan en lämplig mapp i OneDrive och lägg alla dina filer där. På det sättet kommer du aldrig bli av med filer om det händer något med din hårddisk.

Editorer

När vi kodar för webben så finns möjligheten att skapa kod i allt ifrån de enklaste texteditorerna till mer avancerade applikationer. De vanligaste lite större applikationerna för mac är;

Vilken av dessa man föredrar är en smaksak, så länge du är nöjd så är allt bra.

Den största fördelen med liknande utvecklingsmiljöer är att du får stöd med ditt kodande genom hjälpavsnitt, kodhjälp samt en färgkodning som gör det enklare att upptäcka enkla kodfel.

Plugins

För att förenkla ditt arbete så finns det mängder av plugins som går att installera för alla tre editorer. Det utvecklas nya plugins hela tiden så att komma med en exakt lista om vilka plugins som är bäst för tillfället är omöjligt. Här listar jag ändå några som är bra, jag utgår ifrån Atom men liknande plugins, ofta med samma namn, finns att hitta för de andra editorerna.

minimap

minimap visar en översiktsbild av hela koden så att du snabbt kan flytta mellan olika delar.

emmet

emmet är en plugin som snabbar upp ditt kodskrivande. Du behöver fortfarande kunna koden men det går fortare om du använder den på rätt sätt.

Todo Show Packet

Todo Show Packet hjälper dig att dokumentera och kommentera vad du skall göra i ett projekt, skriv inne i koden TODO för att markera vad du skall göra och följ upp det med CHANGED när det är gjort, så slipper du dokumentera sådana händelser i ett annat dokument.

Color Picker

Color Picker hjälper dig att välja färg när du skapar css direkt i Atom.

Comment package

Comment package ger dig möjlighet att kommentera bort delar av koden med ett snabbkommando.

Pigments

Pigments visar vilken färg som en viss färgkod eller färgnamn representerar.

Fold lines

Fold lines gör att du kan gömma delar av koden vilket är användbart när du jobbar i filer med många kodrader.

Övrigt

Det finns givetvis många fler plugins och vill du se de mest nedladdade pluginsen så finner du dem här. För Brackets kallas plugins för extensions och hittas här.

Tester och validering

Det finns flera olika typer av tester som behöver göras för en bra webbapplikation, här kommer jag beskriva olika typer av tester och även ge förslag på tjänster för att testa.

Det finns flera sätt att testa en hemsida, vi pratar om tillgänglighet för olika typer av funktionshinder, vi pratar om tekniskt korrekta koder som valideras på olika sätt och en medvetenhet om hur applikationen fungerar på olika plattformar.

Här kommer validering in, W3C är en organisation som har som uppgift att bestämma vilka standarder som gäller på webben På deras webbplats finner ni all info om vad som gäller för alla de tekniker som de ansvarar för (bla html, xhtml och css). Gå gärna in där och se er omkring: http://www.w3.org På deras sida har de även en lysande tjänst som är helt gratis och som ni kommer ha stor nytta av, de har en tjänst som kollar igenom eran kod och talar om för er vad ni gjort för fel! Denna tjänst finner ni här:

Länkar

webbguider.se, bra guider på svenska om html, css, php och mysql.

W3schools.com, har väldigt många tutorials, exempel, breda referensavsnitt och bra funktionalitet för att direkt kunna testa kodavsnitt.