Multimusen.dk

Author: Per Thykjaer Jensen

  • Stien til jQuery i WordPress

    /wp-includes/js/jquery

    Mappen indeholder disse filer:

    jquery.color.min.js
    jquery.form.js
    jquery.form.min.js
    jquery.hotkeys.js
    jquery.hotkeys.min.js
    jquery.js
    jquery.masonry.min.js
    jquery.query.js
    jquery.schedule.js
    jquery.serialize-object.js
    jquery.table-hotkeys.js
    jquery.table-hotkeys.min.js
    jquery.ui.touch-punch.js
    suggest.js
    suggest.min.js
    ui (mappe)

    Plugins / Templates kan mao. anvende jQuery. Ui mappen indeholder som navnet antyder en række ui-filer: knapper, datepicker etc. etc.

    En række bloggere advarer mod at bygge jQuery ind i et plugin eller en template. I stedet bør man bruge den version af jQuery, som WP indeholder. Hvis flere versioner anvendes kan jQuery angiveligt være årsag til konflikter eller sammenbrud på websiden.

  • Formattering af datoer

    <!doctype html>
 
<html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>jQuery UI Datepicker - Default functionality</title>
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
     <link rel="stylesheet" href="/resources/demos/style.css" />
     <script>
     // denne funktion formatterer til noget som MySql forstår
     $(function() {
       $( "#datepicker" ).datepicker({dateFormat: 'yy-mm-dd'});
     });
     </script>
   </head>
<body>

<p>Date: <input type="text" id="datepicker" />
</p>

</body>
</html>

    I kanbanprototypen er det et problem, at brugeren selv skal formattere datoen på “amerikansk manér”. Det ville være smartere med jQuerys datepicker. Denne kode virker:

  • McFarland “JavaScript – The Missing Manual”

    Fin intro til JavaScript – gode forklaringer / ævelser fx:

    • Basal JS syntaks
    • Dynamiske formulaerer
    • jQuery
    • Form validation

    Eksemplerne er her.

  • FTP / Upload – where

    I have tried to access the servers at mmd – but I cannot get access. So you may have to add the source code on a DVD attached to the report and link to your web hotel.

    I have addressed the problem to the system administrator. But you need a solution here and now – so that’s my best advice.

  • FTP / Webhotel

  • Offline First – A better HTML5 User Experience » Joe Lambert

    Offline First – A better HTML5 User Experience » Joe Lambert.

  • Skrivebordet lige nu

    SONY DSC

  • Minimal Webkanban

    [MiniKanban]

    – Eksempel på minimal kanban. I stedet for kolonner bruges farver som metafor for notens udvikling gennem et workflow.

  • At finde seneste autoincrement

    Kanbanens logfil skal gemme nummeret på sidste autoincrement i en anden tabel. Men hvordan finder man det? Løsning (inspired by this blogpost):

            // looking for the number of the last id increment
        $last = $wpdb->get_row("SHOW TABLE STATUS LIKE 'kbnQotes'");
        $lastid = $last->Auto_increment -1;

        // adding the entry to the log
        $title = date('Y-m-d G:i:s') . '<br /><strong> ' . $_POST['Title'] . '</strong><br />' .  $_POST['What'];

                // indsaetter ingen vaerdi i Id ... hvordan opdateres den?
                $wpdb->insert(
                        "KbnQog",
                        array(
                                'Id' => NULL,
                                'What' => $_POST['What'],
                                'KbnNotesId' => $lastid,
                                'KbnStatesId' => $_POST['KbnStatesId'],
                                'KbnProjectsId' => $_POST['KbnProjectsId'],
                                'KbnNotesName' => $title,
                                'Date' => date('Y-m-d G:i:s')
                        ),
                        array(
                                '%d', '%s', '%d', '%d', '%d', '%s', '%s'
                        )
                );

  • Microformat og Kanban

    Ide: kanbanens noter burde være i hCalendar 1.0 format. Så kan man linke fra noten til en kalender.

  • Tognazzinis “Tænke-Højt-Test”

    Tænke-højt-test

    1. Præsenter dig selv.
    2. Fortæl hvad formålet med observationen er.
      Fx – at det er et tidligt forsøg på at undersøge om et program virker, om noget er for svært at bruge, etc.
    3. Sig at det er OK, hvis testpersonen ikke kan løse en af opgaverne.
    4. Præsenter udstyret i testrummet.
    5. Forklar, hvordan man tænker højt. At alle de tanker brugeren har er interessante for udvikleren. Du skal bare sige, hvad der farer gennem hovedet når du bruger programmet.
    6. Sig at du ikke hjælper med opgaven, fordi det er vigtigt at se hvordan brugeren reagerer på programmet.
    7. Beskriv nu brugerens opgaver og introducer produktet.
    8. Spørg om der er noget brugeren er i tvivl om inden testen begynder.
    9. Gennemfør testen med opgaverne.
    10. Analyser og gennemfør derefter forbedringer.

    Kilde: Tognazzini: “User Testing on the Cheap” kap. 14 i bogen: “Tog on Interface”, Addison Wesley (1990)

    OPgaver

    Kanban 29.3. 2103
    Kanban 29.3. 2103

    Tænke-højt-test: webkanban.

    1. Introduktion til undersøgelsen jvf. Tog.
    2. Tilføj en opgave fx “vaske op”. Den skal vises i “todo”.
    3. Nu leger vi at opgaven er fuldført. Hvordan vil du redigere notet, så man kan se at opgaven er færdig?
    4. Find og klik på “Log”
      (læg mærke til om brugeren finder ikoner eller menuen)
    5. Hvad siger loggen dig? Hvad kan den bruges til?
    6. Hvilke funktioner mangler loggen?

     

  • Break the Grid og Responsive Design

    To Grid or Not to Grid

    Hvornår skal du overholde et grid? Og hvorfor skal du nogen gange bryde med et grid? Reglerne kan virke modstridende; men det handler dybest set om æstetik og psykologi. Mennesket har det godt med rytmer. Men vi vågner op, når rytmen brydes med synkoper og skæve toner.

    Mennesket har brugt grids lige så længe som det har kendt geometri. Grids er stadig et hot emne – fx nævner Jake Rochelau grids blandt “varme emner” i nutidens webdesign.

    Grid

    Et grid er et geometrisk mønster, der “usynligt” gestalter (former) en flade eller et rum. Hvis du tegner på et hvidt stykke papir; men bruger et ternet papir nedenunder til at styre tegningen med – så bruger du et grid. GIMP og Photoshop har indbyggede grids. Du kan slå dem til eller fra med et museklik.

    Denne søgning på Google viser eksempler på geometriske grids:

    Grids - fra en google søgning.
    Grids – fra en google billedsøgning (29.4. 2013)

     At bryde med grids

    “Grids do not exist in a vacuum. They exist in relation to the content. We never start with a grid. We start with an idea which is then translated into a form, a structure …” (Linda van Deusen (* 1961) – citeret fra “Never Use White Type on a Black Background – and 50 other Ridiculous Design Rules”, NL 2009 p. 53)

    Grids er geometriske strukturer, der ideelt udspringer fra et æstetisk behov. Du kan finde grids overalt. I kunst, arkitektur – og i sneglehuses brug af det gyldne snit. Grids handler om en systematisk opdeling af en flade. Det gyldne snit og reglen om tredjedele er også grids.

    Hvis alt indpasses efter et grid er resultatet gabende kedsommeligt. Sider fra Pinterest er et godt eksempel. Pæne billeder under hinanden. Nydeligt. Kedeligt. Dødkedeligt. Uinteressant …

    Gabende kedeligt grid. Hvorfor mon?
    Gabende kedeligt grid. Hvorfor mon? (Pinterest 29.4. 2013)

    På overfladen ser det jo nydeligt ud. Pinterest er så kedelig at se på, fordi griddet styrer for meget. Alle regler er da overholdt, ja… og … det er bare så  uinspirerende at man får lyst til at kaste med maling.

    Grids er gode, når de skaber orden og overblik. Men de bliver uinteressante, når man gentager sagerne i det uendelige. Vi har altså brug for grids; men ikke for enhver pris.

    Læg mærke til, hvordan ugeblade skaber grids og bryder med dem i en uendelighed. Nogen sider har mange spalter. Andre har få. Nogen er helt uden regler. Ofte er der tale om standardsider, som veksler mellem hinanden. Layoutet styrer en afvekslende oplevelse. Og sådan burde en webside nok også være.

    Se og Hør er et kulørt ugeblad fyldt med sladder om såkaldt kendte og kongelige. Deres webside er interessant, fordi man både overholder et grid – og bryder med det.

    Se og Hør (29.4. 2013) - grid gestalter siden; men der er også brud.
    Se og Hør (29.4. 2013) – grid gestalter siden; men der er også brud.

    Grids er altså noget man forholder sig til, eller som van Deusen (op. cit.) siger: “they exist in relation to content“. Se og Hør skalber interesse om sit logo ved en teknik, som man kunne kalde “bryd med griddet”. I forhold til AIDA-modellen kan man sige, at brud med grid kan give opmærksomhed (attention).

    IBM eksperimenterer både med grids og animationer. Referentiel layout holdes i stamme linjer. Opmærksomhed (A) fanges, der hvor man bryder med griddet – eller hvor det varieres (for der er system i fordelingen af ikonerne ved smarter cities).

    IBM - grid og brud med grid
    IBM – grid og brud med grid (29.4. 2013)

    Smashing Magazine har mange artikler om grids. Denne tutorial viser, hvordan man lynhurtigt kan sætte sit grid op. Der findes også halvautomatiske systemer, der kan skabe gridkoden – og som giver designeren en hel værktøjskasse af muligheder. 960.gs er et eksempel på denne type websteder. Her får du både HTML, CSS og et hav af filer til skitser i Photoshop, GIMP og andre designerprogrammer. Sådan et design kan selvfølgelig omsættes til en template i WordPress (forudsat du véd, hvordan man laver en template og linker relativt til et stylesheet fra templaten).

    Responsive Design

    960.gs har et problem. Problemet er den fastlagte bredde: 960 px. Selvfølgelig kan man gå ind i kodegeneratoreren og ændre sidens bredde til fx 1024px eller måske 600px. Det er fint nok, så længe man designer til en bestemt skærm. Problemet er bare at folk sidder med alt fra 40 tommer TV og til mere eller mindre smartphones, tablets og hvad ved jeg.

    Responsive design er et forsøg på at forholde sig til denne situation. Websitet er programmeret til at forholde sig til apparaterne. Responsive.gs og Gridpack.com er sådanne forsøg.

    Jacob Gube viser 25 eksempler på responsivt design her (29.4. 2013). Læg mærke til at det ikke er tilfældigheder, der afgør designet på små sider. Men hvordan angriber man en opgave, hvor man ikke kan nøjes med ét design? Skal man begynde med det forkromede storbillede – eller er det bedre at begynde med design til små skærme?

    Arita Roy har samlet en række udmærkede tutorials (29.4. 2013). Hvis du ikke har arbejdet med emnet før, så er Nick Petits introduktion til responsive design et udmærket sted at begynde.

    Workshop

    Lav en mockup (i valgfrit udviklingsmiljø – fra Pico i en terminal til Photoshop eller måske Adobe Edge, hvis du er til sådan noget.

    Mockupen skal tage højde for at dit design kan opleves på flere forskellige skærmtyper. Der skal være mindst to eksempler: designet til den store skærm og designet til en mobil enhed.

    Designet skal forholde sig til et grid – og der skal arbejdes med mindst ét brud på griddet, der giver opmærksomhed.

    Links
    Læs mere her:

    [wp-blogroll catname=Grid]

Enable Notifications OK No thanks

We use cookies - more information

Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.

Close