Images

  • It’s a quick start method for Mapbox. Upload a picture, and select the colors on your map from the picture.

    Mapbox Cartogram
    Mapbox Cartogram
  • My new e-book “Teaching WordPress” is coming soon. The copy is almost ready for deploy. So today I’ve made some sketches for the frontpage. We’ll give these ideas to a designer.

     

  • Whiteboard mindmap: Eight Sticks
    Whiteboard mindmap: Eight Sticks
  • 10 Mio Downloads
    WordPress 4.7 – 10 Mio Downloads

    Just announced on Facebook: WordPress 4.7 at 10 mio. downloads.

  • So the new verson of WordPress has arrived. With it came a new theme: Twenty Seventeen. It’s an attempt to combine the (perhaps too) popular “one-pager” with WordPress content-managing.

    The theme has many interesting features. One important addition is the .svg icon theme. These days the SVG format becomes more and more important. Twenty Seventeen may be a proof of concept here.

    Of course I had to try the theme.  The design style is “big image” or even “big video” if you dare to use that option.

    The theme has improved greatly since the beginning in october 2016. The process began on Github. Here a team from Automattic co-worked with the WordPress open source community. 68 participants or more gave input and suggested code.

    Git proposals of changes
    Git proposals of changes. Here a suggestion for commenting is implemented.

    When the theme was ready for the core it moved to Slack. In the end it was integrated in the wordpress-core code.

    A web page is dedicated to the development process. Here you can see the mock-ups and follow the general development of the new core theme for WordPress.

    The image below is one of the “hi-fi mock-ups” that was used during the development of Twenty Seventeen.

    Home

  • The game is afoot.

    Issues
    Issues
  • Tickets running in. And only five weeks to launch. Helen Hou-Sandis’s agenda for the core developers.

    Five weeks to launch
    Five weeks to launch

    Bugfixes discussed by some of the developers.

    Bugfixes and ideas
    Bugfixes and ideas

     

  • Content Strategies

     

    The finished wireframe with priorities.
    The finished wireframe with priorities.

    At the Future of Web Design, London 2015, content strategist Steve Fisher presented his model for content design.

    At the Future of Web Design, London 2015, content strategist Steve Fisher presented his model for content design. Fisher introduced a two step model. But first he introduced four question for every website:

    1. What do you do?
    2. What is painfull?
    3. What do you love?
    4. What do you wish?

    His content design principles are:

    Work for a real audience

    • Users first.
    • Sustainability (that the site should be easy to maintain).
    • Accessibility for users on all devices.
    • Design for real people, not personas.

    Fisher wants to work for a real audience. That’s perhaps why he does’nt like personas. He prefers to have a real audience and to talk to real persons. Developers can asume many things, when they work with personas. Only interviews with the real audience will say whether these assumptions are correct or not.

    The design funnel should look like this:

    • The audience.
    • A UX vision.
    • Design principles.
    • Goals.

    First of all you have to prioritize the content. Some issues may be urgent important or non-urgent important. Others may be “urgent non-important” or even “non-urgent non-important”.

    Then all you must define central content. Everything on the website must be prioritized. Hay recommends to sketch out all pieces of content in order to discover the core message of the website.

    Whether the screen is small or large you have to figure the patterns.

    Prioritize

    One way to prioritize is to create a spreadsheet and then prioritize. You need some sort of content inventory – and stick it notes can be great tools for the job. Here you have to look for patterns.

    When the lists are done, they should be prioritized by importance e.g.:

    1. The standard content view.
    2. Landing pages.
    3. Product view.
    4. Application view.
    5. The homepage.

    That a homepage may come in as the 5th priority may come as a surprise. But of course it depends on the website. You have to prioritize by importance, because the users may come to the landing page before the homepage.

    View priorities

    Another way to prioritize is to work with the views. Here you write a list with all your views, and then prioritize like this:

    • One: essential. The website will not work without these views.
    • Two: great to haves.
    • Three: nice to haves (if these views were not present, the website would work anyway. Like: social sharing).
    • Four: useless (get rid of them).

    That was the starting point of the workshop. In groups we had to find a case. In our group we used an online casino as our case.

    We looked at the different views, and worked in two steps. First we put the views in the categories one, two, three and four. After that we had to prioritise the ones, the twos and so forth.

    Propose a new design

    Having sorted the information on the website we created two essential wireframes. One for mobile devices and another for larger devices.

    Responsive test tools

    After the group presentations Steve Fisher gave some valuable tips for websites for responsive testing:

    The Future

    Steve Fishers workshop was a fine introduction to content strategy. In the group we worked with a real life case about an international web casino. In the end the workshop gave some fine inputs, tools and tips about structuring content.

  • Adjunktplanen er et omfattende dokument. Et sted listes krav til dokumentation. Udgangspunktet er at adjunkten skal udstyres med:

    • Pædagogiske kompetencer
      • Viden
      • Færdigheder
      • Kompetencer
    • Faglige kompetencer
      • Viden
      • Færdigheder
      • Kompetencer
    • Relationskompetencer
      • Viden
      • Færdigheder
      • Kompetencer

    Det ser umiddelbart fornuftigt ud; men hvis alle underpinde til underpindene skal skrives bliver billedet ekstremt kompliceret.

    Her er en lille oversigt:

    Viden, færdigheder og kompetencer.
    Viden, færdigheder og kompetencer.

    Hele moletjavsen skal naturligvis dokumenteres. Og det er her problemerne opstår.

    Billedet bliver hurtigt uklart, fordi kravene til dokumentation følges af en lang række underpinde til underpinde. Man fornemmer, at forfatterne ville ha hver deres fingeraftryk med – uden at tænke over, at nogen faktisk skal skrive det her.

    Jeg tør ikke tænke på, hvordan en database ville se ud, hvis det her var et normaliseringsdiagram.

    Men heldigvis er det da sådan, at vi kommer rundt om langt de fleste pinde hver eneste dag på erhvervsakademierne. Og det bliver nok den skrivestrategi jeg vælger.

    Som fast tracker skal jeg ikke udarbejde en egentlig adjunktplan; men derimod dokumentere en tilsvarende viden.

    – Hvordan gør man så det?

    Den bedste metode er nok et bilag med overskrifter fra diagrammerne. Efterhånden som bilaget udfyldes opstår dokumentationen af sig selv, og strukturen kommer til automatisk til at ligne en adjunktplan. Noget i den dur vil jeg gøre.

  • The x and y axis.
    The x and the y axis.

     

    • On the HTML canvas the top left corner is x = 0 and y = 0.
    • The y-axis is “up & down”.
    • The x-axis is “left & right”.
  • HTML Kickstart wireframe
    HTML Kickstart wireframe

    HTML Kickstart (http://99lime.com) giver et framework til hurtig udvikling af html. Siderne kan konverteres til .php sådan:

    • Gem din fil som minfil.php
    • Herefter kan kode genbruges ved includes.

    Det kan være en god ide at lave en skitse over din side, således at du får en ide om, hvad du vil udvikle.

    Husk at en række = 12 kolonner.

  • A cookie is saved locally. Therefore different browsers will display whatever the user has saved. At least as long as the cookie is alive.
    A cookie is saved locally. Therefore different browsers will display whatever the user has saved. At least as long as the cookie is “alive”.

    The complete code to this article is available here.

    We use cookies in order to save information about or from the user input. If you compare my Firefox and Chrome browsers they will format the Microlite roleplaying web page according to random values, dates and saved input. Computergames use random values in stead of dice. First the character is saved in an associative array.

    // ASSOCIATIVE ARRAY
    // Define the character array.
    // “key” => value
    $character = array(
    “strength” => rand(3,18),
    “dexterity” => rand(3,18),
    “mind” => rand(3,18),
    “charisma” => rand(3,18),
    “class” => $class[rand(0, $classes)],
    “race” => $race[rand(0, $races)],
    “address” => “Shire”,
    “hitpoints” => rand(3,18),
    “level” => 1,
    );

    Above you see the method in action. rand(3,18) is an imitation of the role playing “3d6” (throw 3 sixsided dices). The random generator will give a value between 3 and 18. If you read the rules of Microlite 84 it’s easy to add more character properties.

    The cookie

    In this case we’ll save the character data in a cookie in the client browser. However a cookie can only store a string. PHP can convert an array to a string:

    $toCookie = serialize($character);

    Now we can save the data in a cookie via setcookie:

    setcookie(“character”, $toCookie, time()+ (60 * 60 * 60 * 24));

    After the cookie has been set PHP can use the data. That is next time the page is read. PHP can check whether the cookie exists by isset($var):

    if(isset( $_COOKIE[“character”] ) ) {

    $charUnSer = unserialize($_COOKIE[“character”]); 

    }

    This will convert the cookie string to an array.

    The Loop

    In order to echo or print the values of the array to a table:

    foreach ($charUnSer as $key => $value)
    {
    print ”
    <tr>
    <td> $key </td> <td> $value </td>
    </tr>
    “;
    }

    And this loop will then create the character table in the wbbage.

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