itfag | Teknologi. Data. Læring. Deling.

jan/12

24

Nytt design på fagsider

Vi har gjort en endring på websidene våre. På http://itfag.hist.no finner du en liste av fag. Du kan klikke deg inn på faget og lese litt metainformasjon om eksamensform, studiepoeng, læremål og så videre. Dette er hentet fra en database. Du kan klikke deg inn på mer informasjon om faget, og kommer da til en ny side som faglærer administrerer manuelt.

Her er noen eksempler på gammelt og nytt design:

Hva synes du? Er det nye designet bedre å forholde seg til? Er det noe du fortsatt savner?

Dette innlegget har 12 kommentarer. Gjerne bidra :-)

Skrevet av: Svend Andreas Horgen (totalt 133 blogginnlegg)

12 comments

  • Anita Harper · 24. januar, 2012, kl. 13:25

    Gammel design var mye lettere å lese fordi tekstbredden var mye mindre enn på nytt design. Tar inn all infoen i ett blikk uten å måtte bevege øynene. Nytt design krever flere øyenbevegelser. Bortsett fra bredden på teksten, var den nye designen god.

    • Author comment by Svend Andreas Horgen · 24. januar, 2012, kl. 13:29

      Takk for nyttig innspill. Informasjonen tilpasses bredden på websiden, men konsekvensen blir laaaaange linjer (som du sier) dersom nettleservinduet er veldig bredt. Hmmm, skal pønske litt på om vi kan endre på det.

      • Author comment by Svend Andreas Horgen · 24. januar, 2012, kl. 13:40

        Anita: Ser det bedre ut nå? Har lagt til CSS-kode (margin:5px auto 25px; og width: 700px;) på page-elementet, som gjør at bredden på alt blir 700px i stedet for at det tilpasses til nettleserstørrelsen. Ble det mer lesbart?

      • Anders Grendstadbakk (@andeersg) · 24. januar, 2012, kl. 13:40

        Når jeg sjekka designet nå (13.35) så syns jeg siden var veldig smal. Ble veldig mye tomrom på sidene. 600px blir litt for smalt syns jeg. Bortsett fra det likte jeg det nye designet mye bedre.

  • Ola Græsli · 24. januar, 2012, kl. 13:32

    Nytt design ser fint ut! Jeg ville hatt en meny (kanskje i høyrestolpen), der man kunne ha hurtiglenker til de ulike elementene på siden(slik at man kommer dit man vill raskt). Dette vil også gi god oversikt over hva man kan lese om.

    • Author comment by Svend Andreas Horgen · 24. januar, 2012, kl. 13:51

      @Ola: Godt forslag. Det krever noe manuell endring, men jeg kan kjøre en replace all open files-strategi. Avventer litt til jeg får oversikt over alt som bør endres, men er helt med på innspillet ditt!

      @Anders: Prøvde med 600px, men endret fort til 700 som ble noe bedre. Usikker på hva som er best for flest enheter, lar det stå på 700 foreløpig.

      Spørsmål: Ellers ser jeg at CSS-koden som gir alternerende bakgrunnsfarge fungerer utmerket i Safari for Mac, men ikke i Internet Explorer. Noen som vet hvordan det kan fikses?

      /* Alternerer bakgrunnsfarge */
      #temaliste li:nth-child(odd) {
      background: lightgrey;
      }

      • Anders Grendstadbakk (@andeersg) · 24. januar, 2012, kl. 18:17

        Ble mye bedre med 700px ja.

        For å fikse bakgrunnsfargene i IE må du frem med jQuery. Her er nth-child i jQuery: jQuery nth-child

        • Author comment by Svend Andreas Horgen · 24. januar, 2012, kl. 23:07

          Typisk at Internet Explorer ikke støtter CSS fullt ut. Jeg skal vurdere å ta inn jQuery i stedet slik at det fungerer på tvers av nettlesere. Det er jo også mye annet kult en kan gjøre med jQuery, så det var egentlig en god idé du satte meg på der, Anders. Takk for tipset! Jeg ble motivert til å søke videre om problematikken, og fant en flott gjennomgang av hvordan n-th child i CSS3 virker (tror den kan være lærerik for de som er interessert i CSS)
          http://css-tricks.com/how-nth-child-works/

  • Jone · 26. januar, 2012, kl. 11:50

    Flotte endringer! Dette ble mye bedre!

    Har dog et par kommentarer/forslag 😉

    -Legg til doctype, charset, content-type osv. Mangler dette kan det jo fort bli problemer.

    – Title mangler på lenkene.

    – Rødt når du holder over en lenke gir assosiasjoner til forbudt eller feil…

    Redigerte stilsettet kjapt i nettleseren med noen av mine små forslag til endringer. Først og fremst har jeg lagt inn bitte litt mer luft og endret stil på overskriftene. Har også endret noen farger med utgangspunkt i bakgrunnen på siden. Det kan med fordel brukes mer tid på å finne litt bedre farger enn det jeg har gjort, men orker ikke bruke så alt for mye tid på et eksempel.

    —————————————————
    body {
    background: url(«bakgrunn-blaa.jpg») repeat-y scroll 0 0 #13358C;
    color: black;
    font-family: ‘Verdana’;
    text-align: center;
    }
    p {
    margin-top: 0;
    }
    h2 {
    border-bottom: 3px solid #13358C;
    color: #0C225A;
    display: inline-block;
    font-family: calibri;
    font-size: 18px;
    letter-spacing: 1px;
    margin-top: 30px;
    text-transform: uppercase;
    }
    a:link {
    color: #141ED3;
    text-decoration: underline;
    }
    a:visited {
    text-decoration: underline;
    }
    a:active {
    text-decoration: underline;
    }
    a:hover {
    color: #0B1585;
    text-decoration: underline;
    }
    #header {
    background-image: url(«logo.jpg»);
    background-position: right top;
    background-repeat: no-repeat;
    color: #FFFFFF;
    height: 110px;
    width: 100%;
    }
    #header p {
    font-size: 12px;
    }
    #header h1 {
    margin-right: 100px;
    }
    #page {
    background-color: #F1F1F1;
    border: 2px solid #FFFFFF;
    font-size: 14px;
    margin: 5px auto 25px;
    outline: 1px solid #CCCCCC;
    padding: 10px 25px 25px;
    text-align: left;
    width: 700px;
    }
    #temaliste {
    width: 80%;
    }
    #temaliste li {
    list-style-type: none;
    padding: 10px;
    }
    #temaliste li:nth-child(2n+1) {
    background: none repeat scroll 0 0 #D1D9EB;
    }
    #bilde {
    float: right;
    }
    #videoboks {
    margin-left: 25px;
    }
    #infoboks img {
    background: #ffffff;
    padding: 1px;
    border: 1px solid #D1D9EB;
    }
    #infoboks {
    border: 2px solid #13358C;
    float: right;
    font-size: 12px;
    margin: 45px 0px 25px 25px;
    padding: 10px;
    width: 200px;
    }
    #footer {
    color: white;
    font-size: 12px;
    padding: 5px;
    text-align: center;
    }
    #footer a:link {
    color: white;
    }
    #footer a:visited {
    color: white;
    }
    #footer a:active {
    color: white;
    }
    #footer a:hover {
    color: red;
    }
    #infoboks strong a {
    font-size: 12px;
    }
    #infoboks strong {
    margin-bottom: 5px;
    color: #0C225A;
    display: inline-block;
    font-size: 14px;
    }

    —————————————-tl;dr?
    Litt ekstra småpirk til slutt siden jeg allerede har postet css. ID brukes på unike elementer, dvs en gang per side. Har du flere elementer av samme type bruker du class (.elm og ikke #elm i css) ;D

    • Author comment by Svend Andreas Horgen · 7. februar, 2012, kl. 11:19

      @Jone: Takk for nyttig tweak av stilsettet. Jeg likte det bedre, og har rett og slett brukt det i stedet for originalen (med unntak av understrek under overskriftene, som jeg fjernet). Angående class og id er jeg enig, men det som begynte som ett element (for ekesempel infoboks) som jeg stylet med id, ble senere utvidet til flere infobokser. Da burde jeg endret til class, men det ville blitt en større jobb siden en rekke html-filer (php) må endres på. Selve HTML-Innholdet ligger nemlig ikke i en database, kun det som er dynamisk generert. Helt klart en ulempe som vi vil gjøre noe med i versjon 2 av disse informasjonssidene (burde hatt et fullstendig databasedrevet system og oppdatering via et webgrensesnitt).

      • Jone · 7. februar, 2012, kl. 11:43

        Det nye designet har blitt veldig bra! Fint at du har tatt tak i dette. Liker spesielt godt at bakgrunnen i boksen på midten ikke er helt hvit. Dette gjør at det blir mye mer behagelig å lese teksten. Genialt 😉

        Flott at du fikk bruk for stilsettet. Var ikke helt sikker på at stilsettet kom til å fungere siden jeg gjorde endringene med firefox og firebug, men det gikk jo greit.

        Når det gjelder id og class så er det ikke et stort problem. Det fungerer jo likt med tanke på css og det er slikt sett ikke noe problem å blande. Jeg forstår godt at du ikke orker å endre dette når det må gjøres manuelt på x antall sider.

        I versjon 2 kan du jo innføre enkle templates sammen med webgrensesnittet. Det medfører litt ekstra utviklingsjobb (noe som er gøy) og gjør oppdatering av sidene enklere og mindre slitsomt.

        Si i fra hvis du vil leie inn hjelp for å utvikle dette. Tror ikke det skal ta så alt for mange timer… 😉

        • Svend Andreas Horgen · 7. februar, 2012, kl. 15:02

          Hmm, det var ikke dumt å vurdere innleie til slike ting. Jeg synes det er veldig gøy når jeg først kommer i gang, men har det generelt ganske så for travelt, så det kan bli aktuelt i fremtiden. Noterer meg det bak øret 🙂

<<

>>

Theme Design by devolux.nh2.me