Enkel modularisering av design med PHP 6

Jeg er ikke en systemutvikler og mye av den koden jeg skriver er da heller ikke på noen som helst måte optimal. Nivået på kodekvaliteten gjør at jeg kan fokusere mer tid og energi på det jeg er best på og mest opptatt av: konsept, design og interaksjon.

Til tross for det prøver jeg alltid å skrive semantisk kode som setter klare retningslinjer for alt innhold i prototypen. Det hjelper ikke bare meg å prioritere i designarbeidet, men også innholdsskribenter som mange ganger jobber med tekst og informasjonsarkitektur direkte i prototypen. Strukturen setter rammer og gjør det enklere å forstå hvordan ting henger sammen.

Det finnes flere alternativer for å dokumentere innhold, interaksjon og design i kode. I noen tilfeller er det nok med enkel, statisk HTML/CSS for å eksemplifisere det du ønsker. Hvis innholdet i stor grad er redaksjonelt kan det være et poeng å bruke et publiseringssystem (WordPress, Drupal, Statamic etc.) for å prototype. Oppsett og installasjon kan ta litt tid, men funksjoner som er bygget inn i CMS:et gjør at det går kjapt å generere elementer som innholdsstruktur, brødsmulesti, relaterte koblinger, seksjoner og artikkelvarianter.

Som et supplement til statisk kode og CMS, har jeg laget meg selv en liten verktøykasse i PHP for å modularisere design og eksemplifisere funksjonalitet som skal inn i den endelige løsningen.

Navigasjon

Avhengig av siden som vises endres innholdet eller “selected state” på navigasjonselementer. Det å klikke seg fra mal til mal i en “ferdig” meny gir en god opplevelse av hvordan den endelige løsningen skal fungere.

<?php $path = $_SERVER['PHP_SELF']; $exp = explode("/", $path); $file = $exp[ count($exp)-1 ]; ?>
<nav class="mainmenu">
  <?php switch ($file) { case 'kaffe.php': { ?>
  <ul>
    <li><strong><a href="kaffe.php">Kaffe</a></strong></li>
    <li><a href="brus.php">Brus</a></li>
    <li><a href="vann.php">Vann</a></li>
  </ul>
  <?php } break; } switch ($file) { case 'brus.php': { ?>
  <ul>
    <li><a href="kaffe.php">Kaffe</a></li>
    <li><strong><a href="brus.php">Brus</a></strong></li>
    <li><a href="vann.php">Vann</a></li>
  </ul>
  <?php } break; } switch ($file) { case 'vann.php': { ?>
  <ul>
    <li><a href="kaffe.php#">Kaffe</a></li>
    <li><a href="brus.php">Brus</a></li>
    <li><strong><a href="vann.php">Vann</a></strong></li>
  </ul>
  <?php } break; } ?>
</nav>

Se en enkel demo her.

“Includes”

Generiske moduler som inkluderes på de fleste maler/sider. Kan f.eks. brukes for å forenkle inkludering av skript i header eller footer.

<?php include("includes/html-head.php")?>

Filen “html-head.php” kan f.eks. innholde følgende kode:

<!DOCTYPE html>
<html>
<head>
    <title>Tittel på side</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0'"> 
<link href="css/default.css" rel="stylesheet" media="screen" />
<link href="css/typography.css" rel="stylesheet" media="screen" />
<link href="css/forms.css" rel="stylesheet" media="screen" />
<link href="css/responsive.css" rel="stylesheet" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

</head>

Moduler tilpasset kontekst

Moduler/grupperinger som viser forskjellig innhold avhengig av hvilken mal/side som vises, men som vedlikeholdes og endres på ett sted i filstrukturen.

<?php if (strpos($_SERVER["SCRIPT_FILENAME"],"kaffe.php") != 0) { ?>
<div class="module">
  <p>Du ser på modulen med kaffe. </p>
</div>
<?php } else if (strpos($_SERVER["SCRIPT_FILENAME"],"brus.php") != 0) { ?>
<div class="module">
  <p>Du ser på modulen med brus. </p>
</div>
<?php } else if (strpos($_SERVER["SCRIPT_FILENAME"],"vann.php") != 0) { ?>
<div class="module">
  <p>Du ser på modulen med vann. </p>
</div>
<?php } ?>

Scenarier med parametere i URL

Innhold som tilpasses etter parametere i URL:er. Dette er spesielt nyttig hvis jeg ønsker å sette opp reelle bruksscenarier eller sende med data fra en side til en annen.

<?php if ($_GET['parameter'] == 'X') { ?>
    <p>Paramter X</p>
<?php } else if ($_GET['parameter'] == 'Y') { ?>
    <p>Paramter Y</p>
<?php } ?>

Designdokumentasjon ved leveranse

Gjennom å bruke de ulike kodelinjene jeg tidligere beskrev er det mulig å lage en komplett maloversikt og notater i kontekst som beskriver hensikten med moduler/innhold, funskjonell beskrivelse til utvikler, og eventuelle retningslinjer/tips til skribent/redaktør. Målet er alltid å få så mye av løsningsbeskrivelsen direkte inn i prototypen, hvor sannsynligheten for at den faktiskt blir brukt er størst. Lange tekstbaserte dokumenter i word-format er ikke alltid veien å gå.

Gustav Jönsson

Flere artikler av Gustav CV

6 kommentarer

  1. Interessant. Har du testet å jobbe med .kit-filer i CodeKit? http://incident57.com/codekit/kit.php

  2. Hei Øyvind! Aldri prøvd nei, men det ser veldig enkelt og ryddig ut. Skal prøve å bruke det i noen egne prosjekter fremover. Takk for tips!

  3. Du kan optimalisere navigasjon-koden din noe dersom det er interessant

    <nav class="mainmenu">
    	<ul>
    <?php 
    	// current file || remove path from file constant, remove starting slash and extension
    $file  = substr( str_replace(__DIR__, '', __FILE__), 1, -4 );
    	// pages || list all files once
    $pages = array('kaffe', 'brus', 'vann');
    	// loop through pages and set current file to active
    foreach ( $pages as $page ) {
    	echo "\t\t<li><a href=\"{$page}.php\" ".( $file == $page ? 'style="font-weight:bold;"' : NULL ).'>'.ucfirst( $page )."</a></li>\n";
    }
    
    ?>
    	</ul>
    </nav>
    

    i din nåværende versjon må du legge til en ekstra li, en ekstra gang for hver side du skulle finne på å legge til, da er det mye greiere å slenge inn en verdi i en array() å kjøre en foreach-løkke. så kan du kanskje legge denne koden i en menu.php som du inkluderer på hver side, som du foreslår, men tror kanskje du må sette $file i filen du inkluderer fra, litt usikker på det.

  4. http://www.hammerformac.com er også et verdig alternativ :)

  5. Even: Du har helt rett. Nettopp derfor jeg ikke jobber som utvikler :)

    Timm: Skal se nærmere på Hammer.

  6. Pingback: → Designprosess – en tid for alt — iAllenkelhet

Skriv en kommentar

  • *

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>