Goda råd för att uppmuntra kreativiteten innuti

Såg den här ”presentationen” borta på webdesigntuts och kände att dessa 29 punkter faktiskt kan stämma, och framför allt, hjälpa till i den kreativa processen. Alla har väl någon gång vart i den situationen att man inte vet hur man ska fortsätta, jag ska i alla fall försöka följa dessa råd så gott jag kan så får vi se vad det leder till, förhoppningsvis något bra!

29 WAYS TO STAY CREATIVE from TO-FU on Vimeo.

steg 01: verktyg

De verktyg och tekniker jag tänkte använda mig utav för att utveckla min TO-DO app är endast de obligatoriska verktygen/teknikerna som anges på kurswebben, nämligen Backbone och Github. Det kan även förekomma en del jQuery för användargränssnitt relaterade element, så som vissa effekter men först och främst vill jag använda ren javascript.

Anledningen till att jag inte väljer till något av de frivilliga ramverken är för att jag helst vill fördjupa mig inom så mycket core javascript som möjligt, och därför väljer jag inte att blanda in ännu ett ramverk när Backbone redan tillhandahåller en färdig MVC lösning, datahantering och listor/samlingar (collections).

steg 01: projektval

Som mitt projekt för kursen så har jag tänkt mig att utveckla en ganska simpel och lätt använda To-do app, som användaren själva ska kunna ladda ned och lägga upp på valfri webbserver. Tanken är att applikationen ska använda sig utav localStorage för att lagra data på användarens dator, och på så sätt exkludera behovet av någon databas server.

Applikationen ska tillhandahålla CRUD-funktionalitet för Kategorier, Uppgifter och även en Händelse logg som visar senaste aktivitet.

För en kravspecifikation och use cases, se Steg 01: Kravspecifikation.

steg 01: kravspecifikation

Grund funktionalitet för applikationen:

  • Logga händelser över tidigare aktivitet. [Varaktighet över sessioner]
  • Skapa, ta bort, redigera olika kategorier för organisering. [CRUD] [FLERA OBJEKT]
  • Lista kategorier i varsin kolumn, med valde bakgrundsfärg för avskiljning.
  • Skapa, ta bort, redigera uppgifter/anteckningar. [CRUD]
  • Smidigt och enkelt kunna bocka av slutförda uppgifter.
  • Automatiskt rensa slutförda uppgifter (ev sparas i någon form av historik).

Tankar kring gränssnittet och layout

Min tanke kring gränssnittet och layout för applikationen är att den ska vara väldigt simpel. Användaren ska ha en kolumn (varje kolumn sträcker sig hela vägen från toppen till botten) till vänster i fönstret för att enkelt kunna skapa nya anteckningar, välja kategori och självklart själva uppgiften i, här visas även föregående händelser. Efter denna ”fasta” (kan ev. göras så att den går att flytta runt lite mellan top, left, right, bottom) kolumn är att kategorierna ska fortsätta på samma sätt, som kolumner, från vänster till höger. I varje kolumn kommer självklart kategori namnet att skrivas ut, och bredvid detta (vid hover) kommer en ta bort kategori knapp att visas som gör det möjlig för användaren att helt ta bort en kategori och dess tillhörande anteckningar.

Skapa en ny anteckning

I den ”fasta” kolumnen skapar användaren en ny uppgift. Här kan användaren välja en befintlig kategori genom dropdown-listan eller välja att skapa en ny. Om användaren väljer att skapa en ny kategori så visas ett inmatningsfält där användaren ska ange den nya kategorins namn. Själva uppgiften användaren vill skriva upp görs genom ett text inmatningsfält där användaren anger uppgiften att utföra och trycker på ”Add To-Do” för att spara uppgiften.

Lista uppgifter per kategori

Som jag nämnde ovan så kommer alla kategorier att visas i varsin egen kolumn, detta för enklare översikt. Överst i kolumnen visas kategorin och även en ta bort knapp som rensar hela kategorin och tar bort tillhörande uppgifter. Användaren ska även kunna sätta en specifik backgrunds färg för varje kategori (genom HEX-värden) eller välja bland ett tio-tal fördefinierade färger.

Varje uppgift i en kategori kommer presenteras med fokus på uppgiften att utföra, men det ska även visas av vem uppgiften är tillagd och vilken tid. När användaren hovrar över en uppgift ska en redigera- och ta bort-knapp presenteras i närheten.

Komplettera med eventuella use cases.

Chatter

I kursen Webbutveckling med PHPII så skulle vi arbeta med ramverk, vi hade ett antal workshops där vi gick igenom frågor som behandlar inkapsling, databaser, olika design mönster osv. Vi fick även lära oss grundläggande kring hur man ska jobba mot Facebook Graph API för att inkludera sociala funktioner från facebook på sina webbplatser.

Det var faktiskt enklare än vad man trodde, har fasansfulla minnen för några år sen när jag försökte mig på samma sak och då gick det inte så bra. Slutade nog med att jag bara la ner hela grejen.

Men iaf, i PHPII kursen, så skulle vi ha ett projekt i slutet, där man skulle välja ett ramverk att fördjupa sig inom. Jag har tidigare inte använt något annat ramverk än CodeIgniter (som jag förövrigt lärde mig under en av workshoparna), och jag fastnade för det direkt. Tycker att det väldigt smidigt och väldigt likt ASP.NET MVC som jag sedan tidigare tycker väldigt mycket om. Jag har länge ”sökt” eller önskat att det skulle finnas något ramverk i php för att skriva MVC applikationer på liknande lösning som i ASP.NET MVC men aldrig riktigt tagit mig tiden till att faktiskt aktivt söka efter ett. Antar att det är på grund av den här arkitekturen som jag faktiskt fastnat för CI.

Chatter

Som projekt till kursen valde jag att skriva en online chatt skriven med CI och Javascript/Jquery för Ajax bitarna. Det kanske inte är den mest avancerade koden som finns skriven, men jag har i alla fall lärt mig att använda CI på ett bra och godkänt sett. Fick även ge mig på att skriva sk. helper-klasser för enklare hantering av strängberoenden och dylikt, vilket säkerligen kommer underlätta vid eventuell framtida vidareutveckling.

Jag har tänkt mig att kanske släppa källkoden för chatten publikt här på bloggen, men är fortfarande lite osäker så tills jag har bestämt mig så får ni köra på live versionen som ligger upp. Testa, leta buggar, förstör, ja gör precis vad ni vill. Kommentera gärna här på sidan om ni har synpunkter osv.

Chatter – Online chat developed by Dzemal Becirevic using CodeIgniter and JQuery.