Listor / Berzan / Dokumentation – www.te11f.com

Dokumentation – www.te11f.com

Med detta projekt hade jag som mål att göra en hemsida till klassen där det ska finnas möjlighet att:

• Registrera sig, aktivera sitt konto och återställa sitt lösenord via sin mail.
• Kolla planering efter examinationer och läxor.
• Kontakta varandra genom t.ex. personliga meddelanden,  olika grupper och chatt.
• Tillåta medlemmar att redigera sin egen profilsida och välja vad som skulle visas.
• Enkelt hitta en länksamling med nödvändigheter så som labbrapportsmallar, schemat etc.
• Dela filer, bilder och texter med varandra.
• Lägga till/blockera andra medlemmar som vänner och då också få andra möjligheter.
• Enkelt kunna navigera i den dynamiska menyn och beroende på vilken rank man så visas olika länkar.

Observera att jag inte gjort hela sidan utan har fått en del hjälp av klasskompisarna David Sandborg som hjälpt till med logon och Johan Abrahamsson som hjälpt till med menyikonerna och att bygga ett skript på installningar.php.

Sidan är byggd med html5 för den nyaste och fräschaste tekniken. En av de viktigaste delarna på sidan som jag lagt ner en stor del av tiden på har varit huvudmenyn. Ett naturligt krav jag hade innan start för sidan var att det skulle vara enkelt att navigera och att det skulle vara exakt samma meny på alla undersidor. Jag kände till att man kunde göra en allmänn css-mall som länkas in till alla sidor för att få samma design på menyn överallt men hade ingen aning om att man kunde göra på samma sätt med hela html och php-grunden också.

Genom att använda php-funktionen ”include_once” har jag på det sättet fått samma grund på alla sidor. I dessa inkluderade filer inkluderas det ytterligare massvis med filer så som javascript, stylesheets, mer php-filer etc.

Med hjälp av endast dessa två rader, som inkluderas på VARENDA sida, gör så att hela grunden blir samma överallt. Om menyn ändras på ett ställe ändras den alltså överallt. Om författaren eller någon annan metatagg ändras i någon av dessa två filer ändras det också överallt. Kort sagt, utan denna php-funktion skulle den totala arbetstiden på projektet varit över 200-timmar mer utan tvekan, dom här två filerna består av flera tusen rader kod sammanlagt.

Tillbaka till menyn… istället för att visa alla menyalternativ samtidigt har jag valt att endast visa de stora huvudområdena. Och med hjälp av hover-effekten i css visa de andra underlistorna när man håller muspekaren över li-elementen. Från början sätts underlistan som ligger i en li till ”hidden” i css. När man sedan håller muspekaren över li-elementent får underlistan det nya porpertiet ”visible”. Denna fräscha och moderna menyn är alltså helt skript-fri (om man bortser från de dynamiska phplänkarna) vilket är en stor fördel, hastigheten på sidan kan bli snabbare och om användaren inte har tillgång till skript fungerar menyn alldeles utmärkt ändå (om jag inte hade haft en <noscript> tagg på alla sidor som vidarbefodrar alla användare som på något sätt blockerar javascript).

En annan cool funktion som menyn har är att beroende på om man är inloggad eller inte så visas helt olika länkar. På samma sätt läggs det till extra länkar om beroende på vilken rank man har på sidan. Jag, som har den högsta admin-ranken, har t.ex. en länk till admin.php (där man kan gå in och ändra alla användarnas inställningar) till skillnad från de andra rankerna som inte kan se den. Och även om de försöker gå direkt till sidan admin.php utan länken kommer de inte in eftersom att ranken självklart kollas högst upp på sidan. Och om man inte har admin-ranken blir man skickad till 404.php. Besökaren blir alltså lurad till att tro att det inte finns någon admin-sida på den adressen, och på det sättet blir admin.php säkrare. Naturligtvis kontrolleras alla sidor om man är inloggad och vilken rank man har i en av de inkluderade filerna. På majoriteten av alla undersidor blir man vidarbefodrad till login.php om username-sessionen inte finns. När man sedan stänger webbläsaren förstörs denna ”session” men cookien som skapas/uppdateras när man loggar in finns kvar. Men denna förstörs om man loggar ut igenom att cookiens livstid sätts t.ex.  -5 dagar (bakåt i tiden).

Efter de otroligt många nerlaggda timmarna har jag blivit mycket nöjd med resultatet men det finns fortfarande extremt mycket kvar att bygga och skripta för att sidan ska bli komplett. Hemsidan har testkörts en mängd gånger ifrån 3 / 4 av de största webbläsarna; Chrome, Firefox och Safari. Däremot har jag valt att inte tillåta Explorer användare då webbläsaren har sjukt irriterande standarder och 0% av min målgrupp använder denna webbläsare som måste ha skapats på 1200-1300-talet. Därför inkluderas ett skript på alla undersidor som vidarbefodrar användarna till Chrome’s nedladdningssida.

Själva grunden av hemsidan har validerats hos w3c och får ett fel och en varning. Felet är länken till schemat i startmenyn men går inte att förbättras eller bytas ut. Varningen är ifrån <!DOCTYPE html> och går inte heller göra något åt. Vad som däremot kan förbättras är färgen och font-familyn på all innehållstext då den är för svart och väldigt irriterande att läsa, ett alternativ skulle kunna vara att göra den mörkgrå och ändra font-familyn till något bekvämare för ögonen.

Ett annat problem som jag haft är att jag gjort huvud li-elementen till länkar också. Detta spelar ingen roll sålänge man sitter vid datorn och har en mus man kan ”hovra” över menyalternativen så fler fälls ut. Men om man är på en mobil enhet ,eller en läsplatta till exempel, med touchscreen så fungerar ju inte menyn genom att hålla över länkarna. Men detta är nu löst och vad jag kunnat se hitills har sidans funktion fungerat utmärkt ifrån telefoner också.

Ytterligare ett förslag på förbättring skulle kunna vara att göra transition-tiden lite längre i menyn. Så om man råkar hålla utanför den o-ordnade listan så försvinner den inte direkt utan stannar kvar ett litet tag längre så man har chans att dra tillbaka muspekaren innan den blir visibility:hidden igen.

Publiceringsdatum: 2013-11-26