Ramverk

I detta blogginlägg kommer jag att presentera tre olika ramverk som kan användas för att underlätta vårt jobb som front-end utvecklare. Till att börja med vill jag förklara kort vad ramverk eller framework som man säger på engelska är för någonting. Man kan jämföra ramverk med ett stort bibliotek eller dokumentation av komponenter som kan lätt användas för att bygga en webbsida. Det som är bra med ramverk är att vi snabbt och lätt kan bygga webbsidor även om vi inte har så mycket kunskap eller erfarenhet. Vi slipper att koda hela sidan från grunden och slipper testning och felsökning av koden vilket brukar vara tidskrävande. Själv bestämde jag mig att presentera och testa 3 nedanstående ramverk: Skeleton, Materialize och Bootstrap.

Skeleton

 Skeleton är lätt och simpelt CSS ramverk skapad av utvecklare och designer David Gamache. Den använder så kallade grid system som automatiskt anpassar sig till webbläsarens upplösning. Skeleton erbjuder vanliga HTML styles och element såsom knappar, lister, tables och forms. Ovannämnt framverk funkar för alla senaste browsers inkluderande IE9+. Enligt det jag har läst så är den bäst för mindre projekt där vi inte behöver satsa så mycket på komplicerade lösningar.

Jag har laddat ner Skeleton och testat den lite. Den kommer i en zip-fil som innehåller både index.html och CSS filer och en mapp med bilder. Installeringen gick utan problem och jag har inte haft stora problem med att använda mig av ramverket. Det är bara att gå in på getskeleton.com sida och hitta det vi behöver. Utbud av komponenter är inte imponerande stort men jag känner att det är lika bra för nybörjare som jag. Kortfattat skulle jag säga att skeleton är perfekt när man vill snabbt komma igång med sitt projekt eller när man inte har så mycket kunskap.

Buttons i Skeleton

Materialize

Materialize är ett ramverk skapad av Google. Det finns två versioner av den: standard version för dem som inte har någon kunskap eller liten kunskap om Sass och en version som kräver en Sass kompilator (den versionen låter oss att bestämma över vilka komponenter ska inkluderas eller inte).

Själv har jag laddat ner den första versionen, den innehåller en mapp med CSS, fonts och JS. Jag tycker att strukturen av projektet ser rent och fint ut. Det som jag dock gillade mest var snygga färdiga mallar som man kan ladda ner på materialize websida. Jag gillade deras design och tyckte att det var mycket bra att man så lätt kan använda dem. Det är kanske inget speciellt för mer avancerade användare men bra verktyg för dem som startar sina äventyr med webbutveckling.

Strukturen i materialize

Mallar i Materialize

Bootstrap

Bootstrap utvecklades 2010 på Twitter och framstår som världens mest populära ramverk för att bygga responsiva mobil-första webbsidor. Den innehåller HTML, CSS och JS mallar som kan användas för att style’a komponenter såsom text, formulär, knappar ables, navigation, dropdowns, varningsmeddelande, bild sliders och många andra, samt JavaScript-tillägg.

Bootstrap fick jag använda för första gången på lektionen under min programmeringsmetodik kurs. Det finns olika sätt att installera den, man kan antingen kopiera koden och klistra in den i textredigerare eller ladda ner den med download knappen.

För att komma igång med Bootstrap ska man till skillnad från Skeleton och Materialize skapa index.html själv. Man kan använda sig av basic template eller andra templates som finns under Examples kategorin i bootstraps biblioteket. Det finns rätt många kategorier att välja ibland när man bläddrar i bootstraps biblioteket, det som jag uppskattar är att det ofta finns bilder med exempel så att man vet hur det ska ut. Det uppskattar man speciellt som nybörjare. Jag upplever att bootstrap ger ganska stora möjligheter för dem som vill nå en bestämd effekt. Ramverket är mer komplicerat än till exempel Skeleton och ger större möjligheter vilket kan uppskattas av webbutvecklare som ska utföra mer omfattande webbsidor.

Buttons i Bootstrap

Slutsatser: 

Alla tre ovannämnda ramverken har sina för och nackdelar och riktas mot olika användare. Skeleton är lättare variant som gör det snabbt och smidigt att använda av nybörjare och personer som vill snabbt komma igång med sitt projekt medan Bootstrap och Materialize är lite mer komplicerade ramverk som ger webbutvecklaren mycket mer flexibilitet. Själv fastande jag lite för Materialize på grund av deras snyggt designade färdiga mallar som är smidiga att använda. Det som jag däremot uppskattar hos Bootstrap är dess stora och omfattande bibliotek av komponenter vilket möjliggör anpassning för alla behov som utvecklaren kan tänkas behöva.

Skeleton källor:

http://getskeleton.com/

http://www.sitepoint.com/getting-started-with-skeleton-simple-css-boilerplate/

https://www.youtube.com/watch?v=QFYkSqBvCAs

Materialize källor:

http://materializecss.com/

https://en.wikipedia.org/wiki/Sass_(stylesheet_language)

Bootstrap källor:

http://getbootstrap.com/

https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)

Web Accessibility

Web används varje dag av miljoner användare, det är ett verktyg som används både som nöje och hjälp. Själv har jag svårt att tänka mig att sluta använda webben. Hur skulle jag  kontakta vänner, handla kläder, betala räkningar, söka in till skolor, leta efter informationer eller låna e-böcker? Det är nästan omöjligt att fungera i västerländska länder utan tillgång till internet.  Det finns dock personer som kan känna sig begränsade inom möjligheterna som webben erbjuder oss. Personer med olika slags funktionsnedsättningar eller de som inte har så stor datorvana.

Alla har rätt att använda webben fast inte alla webplatser är anpassade till användare med till exempel synnedsättningar. Enligt mig huvudsaken är att skapa websidor som är lätthanterliga till alla typer av användare. Jag tycker inte att man borde skaffa speciella versioner av sidor så att t.ex. blinda personer kan läsa dem utan en version som är tydlig, enkel och användarvänlig. För komma in i teman har jag läst och tittat på Youtube videos som handlar om just Web Accessibillity och kommer vidare att presentera till vad för lösningar verkar vara viktigast i just detta område.

• Sidor borde vara lätt att navigera och enkla i sin form. Det är speciellt viktigt när personer med synnedsättningar kommer att använda skärmläsare.

• Det är viktigt att beskriva innehåll som inte är textad (bilder, länkar)

• Även audio innehåll borde ha undertext.

• Man borde inte använda sig av färger för att tyda på någonting speciellt i texten. Enkelt exempel kan vara text där man med rött markerar någonting som inte borde göras och med grön någonting som borde göras.

• Tänk på kontrast i din websidans design. Personer med synskador kan ha det svårt att läsa om färgerna är felanpassade.

• Begränsa eller helt utesluta pop up ads. De är oftast nästan omöjliga att stänga för användare utan några funktionsnedsättningar.

• Begränsa captcha teknik, den är inte lätthanterlig för blinda personer.

Det finns många verktyg och strategier som kan hjälpa webbutvecklare att skapa användarvänliga websidor. Jag kommer att presentera här några av dem.

• Använd själv Voice Over eller tab navigation. Det kommer att göra det lättare för dig att förstå hur personer med funktionsnedsättningar använder nätet.

• AccessLint

• Contrast ratio checker

Källor:

Web Accessibility Survival Guide by Thoughtbot

Introduction to Web Accessibility by W3C

Första mötet med nätet

Jag minns inte riktigt hur gammal jag var när jag först kom i kontakt med internet. Jag tror jag var 8 eller 9 år gammal (1997) och det var min morbror som visade mig hur ansluter man dator till nötet genom modem. Jag minns att modem lät jätte konstigt och jag trodde att man får höra alla människor som pratar samtidigt via telefon kabel.

Första sidan jag blev bekant med var yellowpages, farbror visade mig att om man skriver sitt efternamn då kan man leta efter folk i till exempel USA med samma efternamn. Jag var helt fascinerad och tänkte att nu blir allt så enkelt och tillgängligt.

Det som kanske mina föräldrar minns var att våra räkningar efter vi skaffat ett modem blev ganska dyra. Man fick betala för varje minut man använde nätet. Jag gillade att surfa mycket och hade stort intresse för det. Uppkoppling var inte så snabbt och man fick vänta länge tills sidan laddade, men det störde mig inte så mycket eftersom jag kände till något bättre.

Efter några år blev internet mer och mer tillgänglig, man fick köpa fastpris abonnemang och då började de flesta av mina vänner också använda internet. Vi chattade mycket genom gadu-gadu, ett gammalt polsk program som man kan jämföra med t.ex. msn messenger. Varje dag efter skolan spelade vi även MMORPG spel tillsammans i min klass. Det populäraste spel inom min kompiskrets var Tibia. Jag tyckte att det var jätte rolig att spela tillsammans med personer jag känner och även lära känna folk från olika länderna som spelade på samma server.

Vidare minns jag när det blev populärt med sociala medier. Den första social media sidan jag använde hette myspace. Efter ett tag kom det upp en ny portal som hette naszaklasa och funkade på nästan samma sätt som Facebook. Man fick skaffa en profil, bjud in sina vänner, lägga upp foton och kommentera. Vartefter blev det mer populärt med Facebook och det är den jag använder numera.

Jag märkte att genom åren blev det mycket vanligare att använda internet för att googla på information, lära känna folk, kolla upp kartor, betala räkningar, söka till skolor osv. Uppkoppling blev snabbare och sociala medier dök upp. Då blev det mycket lättare att stanna i kontakt med dem man gillar. Jag hängde alltid med och gillade att använda olika social medier. Nuförtiden är man uppkopplad hela tiden genom smartphones vilket kan bli lite tröttsamt. Jag själv märker att jag blir trött på överflöde av information som jag behöver granska hela tiden. Men i alla fall om någon skulle fråga mig vad är den bästa uppfinningen hittills då skulle jag utan tvekan svara – Internet.

Nu börjar vi

Hej och välkommen på min ny sida.

Jag kommer att uppdatera den med allt som handlar om Front-end utveckling.

Hoppas det blir bra 🙂