Categories
html Multimedia Deign

The Future of HTML and CSS

What is the future perspectives for the HTML and CSS standards? At the Future of the Web conference Den Odell started with a definition for responsive web design, somewhat like this:

… the website appears to have been built for that particular device.

Odell talked about what is going to happen with HTML and CSS soon, in the future and the end goal of RWD.

Soon

The new specifications for HTML5.1 and CSS level 4 is in the near future. A great improvement is the pictures tag. Here a new attribute is srcset that will work in the img and picture tags.

<picture 
    srcset="tiny.jpg 1x, larger.jpg 2x"
    src="myPicture.jpg"
    alt="Here is my picture" />

In the CSS you will be able to use the images according to media queries. And so you can have responsive images in a more elegant way.

But Odell states, that this is in the near future. By now some 52% of the web browsers support using pictures and images like that.

The future

Here Odell presented ideas for media queries, for instance a webpage might look different from country to country or even from continent to continent. The CSS might look somewhat like this:

@media {
    continent: europe;
}

Perhaps the user acitity could be monitored. What if you’re jogging while on the webpage?

@media {
    activity: jog;
}

Connection speed is also an important factor, so perhaps you could address the problem thus:

@media {
    connection-speed: slow;
}
The end goal

For Odell the end goal is this: the browsers must disappear. So in conclusion Odell asumes, that the GUI will:

… apear to have been built for the user.

From the helicopter perspective Odell’s vision is a movement from a focus on devices to focus on the user.

Categories
FOWD Multimedia Deign

Data Visualisation

Lisa Gringl – Visualize Data

In this speak at the Future of Web Design, London 2015, we were introduced to basic concepts of data visualisation.

Don't use 3d in data visualisation!
Don’t use 3d in data visualisation!

How to display data

The first picture we saw were some faces. The faces were connected to a database about crime statistics in the USA. The data were connected to facial parts, such as the forehead, the eyes, the mouth etc. The higher the number the bigger was the facial part.

A face with a very big forehead might indicate a high murder rate. The look of the face would tell an interestiong story about crimes the states in the USA.

How to display data

  1. Use visual cues.
  2. Use coordinate system, cake diagrams and similar.
  3. Use a scale with x and y axis.
  4. Use colors og graphical forms to signify something, e.g. male or female.

Always check your data

Here the fun began. Lisa Gringl informed us, that a pie chart always shoul ad up to 100%. The blunder samples were just amazing.

Then she said: “Never use 3d”. We saw some horrible examples of 3d visualisations. Again the blunders were funny and useless.

Wind in the USA

As an example of a well designed animation with data visualisation Lisa Gringl introduced winds in the USA. You could follow the weather all over the USA. The visualisation is quite impressive.

The toolbox

In conclusion Lisa Gringl mentioned some of the tools of the data visualizier. Pen and paper are still going strong. So is Illustrator and even spreadsheets. The visualisations should ideally:

  • Tell a story.
  • Either serious or funny-
  • Watching the visualisation must be a benefit for the audience.
  • They must target the audience.
  • Make sure that the audience will understand the visualisation.

Apart from pen and paper Lisa Gringl recommended the

Here I would have loved to se a code sample from real life. In fact that was the only thing I missed in this talk: an introduction to the code behind an interactive data visualisation.

On Twitter Lisa Gringl recommended to have a look at the d3.js. Here you find a JavaScript library for data visualisation, and the code behind the creative work:

 

Categories
English Multimedia Deign

Steve Fisher and Content Strategy

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.

Categories
FOWD Open Source

Steve Fisher

TEDxRedDeer – Steve Fisher – What Can We Learn From Open Source.

URL:  Hello Fisher.

Categories
Multimedia Deign UX WordPress

Styling WordPress

WordPress

So you have installed _S. And from here the rest is styling. Styling WordPress can be a daunting task. Especially if you don’t know the relevant ids and classes etc. But there is hope. Have a look here:

Rapid Prototyping – or the new workflow

Categories
Didaktik

Det Flippede Klasseværelse

"The Flipped Classroom" og Deweys klassiker "How We Think".
“The Flipped Classroom” og Deweys klassiker “How We Think”.

Jonathan Bergmann og Aaron Sams har udviklet modellen the flipped classroom, der præsenteres i bogen af samme navn: “Flip Your Classroom – Reach Every Student in Every Class Every Day” (FYC).

Kort fortalt går modellen ud på at underviseren optager screencasts af sin undervisning. Eleverne skal lære at se videoer uden distraktorer, som Facebook og andre overspringsmuligheder.

“In the flipped classroom, students aquire content on their own time, watching recorded lectures as homework. Then, in stead of listening to lectures, students spend class time completing assignments …” (FYC bagsidetekst).

Bergmann & Sams præsenterer hele forløb. En typisk flip lektion ser sådan ud:

Atomic 10
Objective: Be able to compare the sizes atoms and ions.
Reference: Video 10; Text: 13.3; Worksheet: Atomic Theory 10. (FYC: 58)

Her ser vi ind i Bermann og Sams pædagogiske maskinrum. Undervisningen opbygges af en treenighed, som består af: video, tekst og selvstændig refleksion. Videoen er studentens lektie.

Bergmann & Sams forudsætter et hjemmearbejde inden undervisningen. Denne forudsætning kan diskuteres.

Video på nettet
I et typisk klasseværelse foregår undervisningen ved at en lærer introducerer et emne. Studenten arbejder videre med stoffet og tilegner sig materien ved at afprøve principperne.

Den bærende ide i det flippede klasseværelse er at der optages en video, som lægges på nettet. Studenten kan herefter se videoen hvor hun vil. Og hun kan se den flere gange om nødvendigt.

Bergmann & Sams taler ikke for en video, hvor man ser hele klasseværelset. De foretrækker screencasts, hvor studenten hører underviserens stemme og ser dét som foregår på skærmen eller projektoren.

Det er uklart om disse screencasts foreberedes før undervisningen, eller om undervisningen optages, som den nu engang er.  Måske er der tale om en kombination.
Screencast med Linux
Bergmann & Sams forholder sig ikke til software. Den professionelle underviser anvender naturligvis med open source og Linux.

I de fleste linux-distributioners repositories kan man finde programmer, som:

  • Desktop recorder – optager et såkaldt screencast, dvs. det som sker på computerens skærm sammen med underviserens stemme.
  • OpenShot – videoredigering.

Tekst
Så længe skriftsproget har eksisteret har man sikkert anvendt skrevne materialer i undervisningssammenhæng. I antikken læste man bøger ved at læse dem højt. Stoffet blev memoret ved hjælp af mnemoteknik.

Når man læser Platons tekster højt, så hører man i virkeligheden Platons tale. Antikkens brug af teksterne ligner på denne måde det flippede klasseværelse.

Opgavearket
Ideen med opgavearket er, at man kan udprøve forløbets faser efter hver undervisningsgang.

Opgavearket kunne også ligge online, og studenternes svar kunne gemmes i en database; men det er min tilføjelse. Bergmann & Sams’ fokus liggger på videoen.

Bergmann og Sams anvender opgavearket som en kontrolinstans. Hvis studenterne kan besvare spørgsmålene korrekt, så har de lært deres stof. Og så er de klar til den nationale test, hvor man gerne vil score højt.

Sådan underviser man måske i skolerne; men på videregående uddannelser virker denne pædagogik en anelse mekanisk. Det betyder ikke, at vi helt skal forkaste opgavearket.

Undervisning på videregående niveau
På videregående niveauer skal opgavearket lede til personlig refleksion over emnet. Bergmann & Sams kan med fordel kombineres med John Deweys klassiker “How We Think” (1909):

“Genuine freedom, in short, is intellectual; it rests in the trained power of thought, in ability to ‘turn things over,’ to judge whether the amount and kind of evidence requisite for decision is at hand, and if not, to tell where and how to seek such evidence” (Dewey 1909: 66 pp.)

Dewey hævder, at den som lever uden at reflektere, er en slave af de ydre omstændigheder. Formålet med videregående undervisning er at udvikle evnen til at tænke selvstændigt.

Formålet med opgaver bør ikke være kontrol af tilegnelsen af et emne; men derimod at give studenten mulighed for at reflektere over et emne.

Det er tydeligt, at Bergmann & Sams’ pædagogik har rødder i en systematisk naturvidenskabelig tradition. Det flippede klasseværelse skriver sig ind i amerikanske pædagogiske traditioner.

Elementer fra det flippede klasseværelse kan anvendes på videregående niveau. At gøre screencasts tilgængelige online er en god ide; men hvorfor ikke tage skridtet fuldt ud?

Internettet som platform for undervisning
Bergmann & Sams fokuserer på treheden videoinstruks, tekst og opgaveark. På world wide web er blogs en oplagt platform for det flippede klasseværelse. I den sammenhæng er WordPress ikke helt tosset. Bloggen åbner for:

  • Tekst
  • Video
  • Opgaver
  • Hyperlinks

Multimusen.dk
I en eller anden forstand har Multimusen været et flippet klasseværelse siden begyndelsen i 2003. Mit fokus ligger ikke på screencasts; men derimod på tekster, andres video og hyperlinks. Måske skulle jeg overveje screencasts i undervisningen …