Portfolio

Media & Publishing: andergrant.com

Prosjektet andergrant.com ble lansert i 2009 som et nettsted for den største klubben i Olsztyn. Vi brukte teknologiene som var tilgjengelige på den tiden for...

#Nettsider
Media & Publishing: andergrant.com

#Prosjektets historiske kontekst

andergrant.com er et betydelig stykke webutviklingshistorie, laget i 2009 for det som da var den største og mest prestisjefylte nattklubben i Olsztyn. Prosjektet viser hvordan webteknologien utviklet seg, og fungerer som en casestudie i hvordan datidens verktøy ble strukket for å publisere ambisiøse klubbnettsteder, lenge før allestedsnærværende CDN-er og komponentrammeverk.

#Æraen for webutvikling (2009)

#Det teknologiske landskapet

Året 2009 markerte en overgangsperiode i webutviklingen:

  • jQuery-revolusjonen: jQuery var i ferd med å bli det dominerende JavaScript-biblioteket og forenklet DOM-manipulasjon.
  • Flash-dominans: Adobe Flash var fortsatt mye brukt til multimedia, video og interaktivt innhold.
  • PHP 5-modenhet: PHP 5 hadde stabilisert seg og var det ledende serversidespråket.
  • MySQL-standard: MySQL var de facto-standarden for webdatabaser.
  • Nettleserkriger: Internet Explorer 6, 7 og 8 krevde betydelig kompatibilitetsarbeid.
  • CSS2-implementering: CSS3 var på vei, men ennå ikke bredt støttet.

#Webstandarder i underholdningsbransjen

Nettsteder for nattklubber i 2009 måtte levere:

  • Visuell effekt: Iøynefallende design som fanget oppmerksomhet.
  • Arrangementspromotering: Dynamiske arrangementskalendere og oversikter.
  • Bildegallerier: Presentasjon av klubbstemning og arrangementer.
  • Musikkintegrasjon: Lydspillere og spillelistefunksjoner.
  • Sosiale funksjoner: Brukerinteraksjon og fellesskapsbygging.
  • Mobil hensyntagen: Tidlig, om enn begrenset, mobilkompatibilitet.

#Teknisk implementering (2009)

#Frontend-teknologier

HTML 4.01 Transitional:

  • Datidens bransjestandard for markup.
  • Tabellbaserte oppsett fortsatt vanlige (selv om vi brukte CSS).
  • Semantisk HTML var ennå ikke bredt tatt i bruk.
  • Hensyn til XHTML-samsvar.

CSS2-styling:

  • Begrenset utvalg av selektorer sammenlignet med moderne CSS.
  • Ingen CSS3-funksjoner som animasjoner, transformasjoner eller gradienter.
  • Nettleserspesifikke prefikser var ennå ikke standardisert.
  • Float-baserte oppsett (Flexbox og Grid fantes ikke).
  • Betydningen av IE6/7-kompatibilitet.

JavaScript og jQuery:

Hvorfor jQuery var et vendepunkt i 2009:

  • Forenklet DOM-manipulasjon.
  • Abstraksjon av nettleserkompatibilitet.
  • Forenklet AJAX.
  • Bibliotek for animasjoner og effekter.
  • Et fremvoksende økosystem av plugins.

Bruk på andergrant.com:

  • Dynamiske navigasjonsmenyer med hover-effekter.
  • Bildekarusell og bildespillfunksjonalitet.
  • Validering og innsending av skjemaer.
  • Jevn rulling.
  • Modalvinduer og lightbokser.
  • Interaktiv arrangementskalender.

#Backend-arkitektur

PHP 5.2/5.3:

Sentrale funksjoner som ble brukt:

  • Objektorientert programmering (stor forbedring i PHP 5).
  • Forbedrede MySQL-utvidelser (mysqli).
  • Bedre feilhåndtering.
  • Muligheter for XML-behandling.
  • Øktbehandling.
  • Håndtering av filopplasting.

Applikasjonsstruktur:

  • MVC-lignende organisering (før ekte MVC-rammeverk ble standard).
  • Malsystem som skilte logikk fra presentasjon.
  • Abstraksjonslag for databasen.
  • System for brukerautentisering.
  • Muligheter for innholdsadministrasjon.

MySQL 5.0/5.1:

Databasedesign:

  • Tabeller for arrangementsadministrasjon.
  • Organisering av bildegalleri.
  • Brukerregistrering og profiler.
  • Lagring av nyheter og innhold.
  • Konfigurasjon og innstillinger.

Optimaliseringsteknikker:

  • Indekseringsstrategier for ytelse.
  • Spørringsoptimalisering for høy trafikk.
  • Sammenslåing av databasetilkoblinger.
  • Buffringsstrategier (filbasert, fremvoksende memcached).

#Multimedieintegrasjon

Adobe Flash-teknologi:

Hvorfor Flash var uunnværlig i 2009:

  • Videoavspilling (HTML5-video fantes ikke).
  • Avanserte animasjoner og overganger.
  • Lydstrømming og -styring.
  • Interaktive multimedieopplevelser.
  • Konsistent atferd på tvers av nettlesere.

Bruk på andergrant.com:

  • Bildegalleri med 3D-overganger.
  • Høydepunktsvideoer fra arrangementer.
  • Animerte bannere og annonser.
  • Musikkspiller med spillelistefunksjon.
  • Interaktivt klubbkart og plassoversikt.

Tilnærming til Flash-utvikling:

  • Programmering i ActionScript 3.0.
  • Lasting av eksterne data via XML.
  • Integrasjon med PHP-backend.
  • Progressiv lasting av store ressurser.
  • Reserveinnhold for brukere uten Flash.

#Funksjoner og funksjonalitet

#System for arrangementsadministrasjon

Dynamisk arrangementskalender:

  • Måneds- og ukesvisninger.
  • Detaljsider med bilder.
  • Profiler for DJ-er og artister.
  • Informasjon om billetter og reservasjoner.
  • Støtte for gjentakende arrangementer.
  • Arkiv over tidligere arrangementer.

Verktøy for arrangementspromotering:

  • Fremhevede arrangementer på forsiden.
  • Nedtellingstimere til store arrangementer.
  • Filtrering etter arrangementskategori.
  • Fremheving av spesialarrangementer.
  • E-postabonnement på arrangementsvarsler.
  • Integrasjon med sosial deling (tidlige Facebook-/Twitter-API-er).

#System for bildegalleri

Flash-basert galleri:

  • Kategoriserte bildesamlinger.
  • Arrangementsspesifikke album.
  • Visning av høyoppløselige bilder.
  • Bildespillfunksjon.
  • Nedlastingsalternativer.
  • Vurdering og kommentering fra brukere.

Innholdsadministrasjon:

  • Opplastingsgrensesnitt for administrator.
  • Muligheter for batchbehandling.
  • System for vannmerking.
  • Bildeoptimalisering for web.
  • Verktøy for galleriorganisering.

#Funksjoner for brukerinteraksjon

Fellesskapselementer:

  • Brukerregistrering og profiler.
  • System for bildekommentering.
  • Funksjon for påmelding til arrangementer.
  • Moderering av brukergenerert innhold.
  • Nyhetsbrevabonnement.
  • Administrasjon av gjesteliste.

Sosial integrasjon (tidlig sosiale medier-æra):

  • Integrasjon med Facebook Connect.
  • Visning av Twitter-feed.
  • Delingsknapper.
  • Muligheter for å tagge personer på bilder.
  • System for å invitere venner.

#Utviklingsutfordringer (2009)

#Nettleserkompatibilitet

Internet Explorer-utfordringen:

Kompatibilitetsproblemer med IE6/7/8:

  • Forskjeller i boksmodellen krevde hacks.
  • PNG-gjennomsiktighetsproblemer i IE6.
  • Uoverensstemmelser i JavaScript-motoren.
  • Begrensninger i CSS-selektorer.
  • Krav om float-clearing.

Løsninger som ble implementert:

  • Betingede kommentarer for IE-spesifikke stiler.
  • JavaScript-polyfills for manglende funksjoner.
  • Strategier for skånsom degradering.
  • Tilnærminger med progressiv forbedring.
  • Omfattende testing på tvers av nettlesere.

#Ytelsesoptimalisering

Hensyn til båndbredde og lasting:

  • Gjennomsnittlige tilkoblingshastigheter: 2-5 Mbps.
  • Flash-ressurser krevde optimalisering.
  • Bildekomprimering var avgjørende.
  • Lat lasting av gallerier.
  • Implementering av buffringsstrategier.

Optimaliseringsteknikker:

  • CSS-sprites for ikoner og UI-elementer.
  • JavaScript-minifisering (manuell).
  • Gzip-komprimering på serveren.
  • Optimalisering av databasespørringer.
  • Buffring av statisk HTML.

#Mobiltilgjengelighet (før smarttelefonæraen)

Begrenset mobilstøtte:

  • iPhone 3G var relativt ny.
  • Android var på vei, men ennå ikke dominerende.
  • Flash ble ikke støttet på iOS (en vesentlig begrensning).
  • En mobilversjon ble vurdert, men forble begrenset.
  • Fokuset lå fortsatt på skrivebordsopplevelsen.

#Design og brukeropplevelse

#Visuelle designtrender (2009)

Estetiske kjennetegn:

  • Mørke bakgrunner (standard for nattklubbsider).
  • Livlige aksentfarger (neon, elektrisk).
  • Blanke effekter og 3D-effekter.
  • Gradientbakgrunner.
  • Serifskrifter i overskrifter (datidens trend).
  • Flash-introanimasjoner (populære, men omstridte).

Elementer i brukergrensesnittet:

  • Skeuomorfe designelementer.
  • Hover-effekter på knapper.
  • Animerte overganger.
  • Rullegardinnavigasjon.
  • Utforming av modalvinduer.
  • Lasteindikatorer.

#Informasjonsarkitektur

Nettstedsstruktur:

Forside
├── Arrangementer
│   ├── Kommende arrangementer
│   ├── Arrangementsarkiv
│   └── Spesialarrangementer
├── Galleri
│   ├── Bildekategorier
│   ├── Nyeste arrangementer
│   └── Videoer
├── Musikk
│   ├── Faste DJ-er
│   ├── Spillelister
│   └── Musikkarkiv
├── Om oss
│   ├── Klubbinfo
│   ├── Beliggenhet
│   └── Kontakt
└── Fellesskap
    ├── Gjestebok
    ├── Nyhetsbrev
    └── Sosiale lenker

#Vedlikehold og videreutvikling

#Løpende støtte (2009-2012)

Regelmessige vedlikeholdsoppgaver:

  • Sikkerhetsoppdateringer for PHP og MySQL.
  • Innholdsoppdateringer (arrangementer, bilder, nyheter).
  • Oppdateringer av Flash-komponenter.
  • Overvåking av nettleserkompatibilitet.
  • Gjennomganger av ytelsesoptimalisering.
  • Rutiner for sikkerhetskopiering.

Utvikling over tid:

  • Oppdateringer av jQuery-biblioteket.
  • Migreringer av PHP-versjon.
  • Databaseoptimalisering.
  • Funksjonstillegg basert på tilbakemeldinger fra brukere.
  • Oppdateringer av integrasjon med sosiale medier.
  • SEO-forbedringer.

#Teknologiovergang

Slutten på Flash-æraen:

Innen 2012 hadde det teknologiske landskapet endret seg:

  • HTML5-video ble standard.
  • Sikkerhetssårbarheter i Flash økte.
  • Mobiltrafikken vokste betydelig.
  • JavaScript-rammeverk modnet.
  • CSS3 fikk bred støtte.

Hensyn ved migrering:

  • Gradvis utskifting av Flash-elementer.
  • Implementering av HTML5-video.
  • Innføring av responsivt design.
  • Utvikling etter mobil-først-tilnærmingen.
  • Ytelsesoptimalisering.

#Lærdommer og historisk betydning

#Hva som fungerte godt

  1. Bruk av jQuery: forenklet utviklingen betydelig.
  2. Flash for multimedia: leverte datidens rike opplevelser.
  3. PHP/MySQL-stakken: pålitelig og ytelsessterk.
  4. Modulær arkitektur: muliggjorde enkle oppdateringer og vedlikehold.
  5. Fellesskapsfunksjoner: bygde engasjement og lojalitet.

#Begrensninger i æraen

  1. Nettleserkompatibilitet: krevde omfattende testing og omveier.
  2. Mobile begrensninger: Flash-inkompatibilitet med iOS.
  3. Ytelsesbegrensninger: grenser for båndbredde og prosessering.
  4. SEO-utfordringer: Flash-innhold var ikke indekserbart av søkemotorer.
  5. Sikkerhetshensyn: Flash-sårbarheter og datidens PHP-sikkerhetspraksis.

#Utvikling mot moderne standarder

Hvordan nettstedet ville blitt bygget i dag:

  • Frontend: React/Vue.js med TypeScript.
  • Styling: Tailwind CSS eller CSS-in-JS.
  • Backend: headless CMS eller Next.js.
  • Multimedia: HTML5-video, WebGL for effekter.
  • Mobil: progressiv nettapp (PWA).
  • Ytelse: høye Lighthouse-verdier.
  • Tilgjengelighet: samsvar med WCAG 2.1 AA.

#Historisk teknologisammenligning

#Webutvikling 2009 vs. 2026

Aspekt2009 (andergrant.com)2026 (moderne standarder)
FrontendHTML 4.01, jQueryReact/Vue.js med TypeScript
StylingCSS2, float-baserte oppsettTailwind CSS eller CSS-in-JS, Flexbox og Grid
BackendPHP 5, MySQLheadless CMS eller Next.js
MultimediaAdobe FlashHTML5-video, WebGL
Mobilbegrenset støtteprogressiv nettapp (PWA)
Nettlesereomveier for IE6/7/8moderne, standardkompatible
Tilbake til portefølje