tisdag 19 mars 2013

Kodning av hemsida - 19/3

Uppbyggande av hemsida har varit på schemat idag. Jag vill återkoppla till det inlägg jag skrev igår; idag har det minsta problemet varit att få typsnittet att vara likadant på alla enheter. 

Hemsidan är uppbyggd av "drop-down"-kategorier, eller "dragspelsmenyer" om man så vill.  Den riktar sig till mobila enheter såsom iPhone och Andriod och för att det skall vara lättillgängligt, måste länkar och text vara stort - vilket är lätt att fixa när man använder en sådant här uppbyggd sida. Det är väldigt enkelt och begränsat område att arbeta på. Allt laddas även in samtidigt när man går in på den. Man behöver alltså inte klicka vidare på länkar som dirigerar en vidare till en annan sida. Genom att klicka på en av kategorierna rullas informationen ned. På så vis kan man använda den utan att ha tillgång till Internet. 

Läsbarheten och användbarheten blir sämre när man går ner till mindre format. Knappar, länkar och liknande som fungerar på en dator kan vara alldeles för små. Samma sak gäller text, i synnerhet brödtext. Därför har vi experimenterat runt lite vad för storlek på hemsidans innehåll som skulle kunna fungera. Möjligheten att zooma in finns men vi vill att det skall vara möjligt att läsa utan att behöva göra det. 

Vi vill att varje kategori skall ha en speciell färg. För att uppnå detta har vi varit tvungna att skapa olika CSS-regler kopplade till varje länk. Vi har även gjort flera CSS-regler till rubriker och brödtext, förutom de som redan fanns i dokumentet innan. Det finns nämligen möjligheten att infoga "dragspelsmenyer" i Dreamweaver genom att bara klicka på en knapp då det redan är förinstallerat i programmet. Men genom att ändra för mycket i det ursprungliga inställningarna, de som fanns efter vi valt att infoga "dragspelsmenyer", så har det uppstått vissa problem. Exempelvis har vi bytt namn på flera och länkat om dem. Bland annat så var dessa menyer som rullade ner efter man klickat på en kategori bestämd till en viss längd. Överskrev texten denna längden var man tvungen att scrolla, vilket kanske inte är det optimala. Efter lite googlande löste sig dock detta. Vi ordnade också så att man kan "rulla tillbaka" menyerna om man klickar på samma kategori en andra gång. 

På något konstigt vis har våra modifikationer gjort att andra problem uppstått. Brödtexten ändrar storlek. Typsnittet är inte det vi vill att det skall vara. Efter att vår handledare Felicia hjälp oss lyckades vi lösa så att all text var i det typsnittet vi ville ha. Man säger åt hemsidan att leta bland flera olika alternativ på datorn. Exempelvis; finns inte Helvetica så ska den ta Verdana, finns inte Verdana ska man ta Arial och så vidare. Många av problemen verkar ha sitt ursprung i Javascript-koden. vi har bytt namn på saker i HTML- och CSS-koden men inte i Javascript, vilket kanske innebär att saker inte fungerar som de borde göra. Vi verkar alla vara ganska gröna när det gäller Javascript så vi får se hur vi löser det. Morgondagen får ägnas åt att se hur vi kan få det att fungera mer som vi vill. 

Simon och jag har främst fokuserat på kodningen av hemsidan medan Anton finputsat filmen. Det känns som om vi är på rätt spår. Får vi ihop en bra inledning och avslutning till filmen samt gör så att hemsidan fungerar som vi vill så är vi snart i mål!


1 kommentar:

  1. Testa att ange font-size i pixlar OCH em innan vi ses imorgon. Det kan hjälpa. Se exemplet nedan:

    h1{
    font-family: 'bebas_neueregular', Impact, sans-serif;
    font-size: 30px; font-size: 3.0em;
    clear: both;
    line-height: 1.2;
    }

    SvaraRadera