During March 2016 I’ll travel to the University of Regina in Saskachewan, Canada, and present a talk or workshop about storytelling and blogging at the Faculty of Media, Art and Performance.
There are close links between multimedia, art and performance – and I hope that the exchange will give new engergy and inspiration to teachers and students in Regina and at the Multimedia Design and Communication Programme in Aarhus.
At the University I’ll visit lecturers and classes. Of course it’s still work in progress, but so far the plan for the topics is:
How fine art exhibitions may benefit from a social media strategy.
Storytelling and creative writing for the web.
How to make stunning WordPress web sites.
Developing wikis as a research tool.
Later on we hope to see lecturers from Regina at Business Academy Aarhus.
By Philips Hue you can control lamps in your home. The lamps are commanded to change color, dim or whatever via JSON PUT. And that’s a cool feature, because you can use JSON with tons of languages such as JavaScript, Jquery, PHP, Lua, Ruby … and of course Python. Here is a very simple Python Tkinter GUI.
Online you can find tons of Apps. But it is much more cool to write your own code.
First you have to register a user or get an API key from the box. Register as a developer at meethue. Follow the steps in order to get a whitelisted user, or simply get an API key. Then you are ready to go.
Python Libraries
First you have to prepare Python and import libraries:
from Tkinter import *
import requests
import json
Tkinter is a library for GUI making.
Requests is used for POST, GET and PUT with JSON.
Json is Json.
The GUI class
Here is a autorunning class called Lamper (i.e. lamps in Danish). First a frame is defined. You can compare the frame with a canvas. It’s where stuff happens. Then we add a label and two buttons. Here you only see the first button:
class Lamper:
def __init__(self,master):
frame = Frame(master)
frame.pack()
''' label '''
self.label = Label(frame,text="Hue: all lights on / off panel")
self.label.pack()
''' turn off light '''
self.button = Button(frame,
text="Off",
fg="red",
command=self.off)
self.button.pack(side=RIGHT)
The Tkinterbutton has a command. It’s the command=self.off. This line will invoke a function if you click the button. The function looks like this:
The second button is constructed in more or less the same way. However the line where you turn off the lamps must be changed: self.taend = json.dumps({“on”:True}).
Save your work
Save your file e.g. as myHueOnOff.py
Now try out your program, in a terminal window write:
python myHueOnOff.py
If you’re lucky you’ll see a window with two buttons. Try to press the off button. If they dim down to darkness … well then this is a very cool starting point to a new adventure in home automation.
Perspectives
Json is a cool data exchange format. You can get all kinds of data via Json. For instance you can get the temperature from the open weathermap API.
Then you could make a lamp that turns blue in the morning if it’s freezing outside. If you’re on a unix-like system, such as Linux or Mac, the program could fire off via CRONTAB every morning when you rise.
Vi with line numbers, dark background and colored syntax in a markup environment.
Vi is a very powerfull editor, that is … for the initiated. Here are some of my favorite vi commands:
Colors, syntax, write, quit
:syn on – colored syntax
:syn off – no colored syntax
:set number – line numbers
:set background=dark – better color contrast in a dark terminal window
:q! – quit without saving
:w – save
:wq – save and quit
Copy / Paste
First mark some text. Move the cursor to the beginning of whatever should be copied. Then press v. Now you can mark something. Press Y to yank or d to delete (= cut). Move the cursor to where you want to put the clipping or copy. Then press p.
Save Your Favorite Settings
You may want to save your favorite settings. Vi use the file .vimrc – my .vimrc looks like this:
set number
set background=dark
syn on
set autoindent
set shiftwidth=4
Building menus in Bootstrap is complicated. And boring because you’ll have to write the same stuff over and over again. Perhaps you could write some PHP functions to do the trick. But what is somebody else developed the tools?
So I began to google for Bootstrap tools. Here’s a usefull tool for menu building:
In this builder you can build the menus. Drag and drop to submenus ( the menu item will indent a bit ). The HTML and CSS will be made automaticly. There are even some gradient options. But here I’d prefer to craft the stuff myself via SASS / Compass or even plain CSS.
If you build a menu, you can download the HTML and CSS. Include this via PHP and you’re up and running in no time.
In this tutorial you will learn how to create a WordPress plugin that will get data from the WordPress database – or other tables residing in the same database.
As a starter here’s a video from the “Tips and Tricks HQ”. See the full blog post here. The tutorial will add a new tool in the Dashboard.
Rapid prototyping and responsive webdesign are the major trends at Future of Web Design, London 2015. Pixelperfect designs in Photoshop are sooo dead. Design in the browser is the new kid in town.
Workshops
The workshops are interesting because they give you:
Contact with the business.
Excellent speakers.
Content strategies
I attended Steve Fisher’s workshop on content strategies, and learned a lot. During the first part of the workshop Steve Fisher introduced his workflow. Then we had to try it out in groups.
With the responsive web new content strategies are needed. Several speakers focussed on the topic. ??? of the Guardian told about the redesign of the paper.
It was a story about failing, analysing and hard work before they found a formula. Perhaps not a silver bullet. But it works for the time being.
The design workflow
Of course designing in the browser will affect the workflow of the designer. In stead of painting his vision in Photoshop, the designer must work with code.
And the designer must test the production on several devices. Since there are litterally thousands of resolutions and screen sizes knowledge of libraries is important.
Perhaps code is not the first thing that comes to a designer’s mind. But as the designer from Envision said:
“It is not harder to learn code than to learn to use the graphical interface of Photoshop.”
At an early stage the designer will be able to test the production on real devices with the real target audience and the costumers.
More than one speaker stressed on working with real content in order to get the tone and voice of the product.
Of course Photoshop is not entirely dead. You still need a tool for image manipulation.
Code
Den Odell gave a very fine introduction to the future standards of HTML and CSS.
Christiano Betta introduced several libraries and validationg methods for credit card forms.
Even though most developers work with some kind of rapid prototyping framework they did not talk much about their rapid prototyping frameworks. They were mostly mentioned en passant. I’d have loved to hear more about this subjects.
Pen & Paper
The focus was clearly on content strategy, wireframing by pen & paper. Most developers talked about rapid prototyping directly in the browser.
There are many advantages when you design in the browser. You see the result immediately. If something must change, you don’t have to redraw the layout in some three to four resolutions in Photoshop. And recode your markup or stylesheet. The new workflow seems to look somewhat like this:
Mock up a static prototype in HTML / CSS.
Share your prototype with real content your prototype with the team, audience and customers.
A rapid prototype is build at the very beginning of a project. Gone and over are the days of pixel perfect wireframes in Photoshop, stated Billy Kiely
Now the entire design process is done via the browser. There are many advantages for the designer here. All design is an iterative process.
Design is all about designing interaction and storytelling.
Focus
The designer works with the interactive experience. Redesign must be easy – and with a keen focus on the story.
Three stages
There are three stages or aspects of design:
Aestetics.
Interaction experience.
Storytelling.
Wireframes are fine tools for the storytelling. But viewing drafts in Photoshop is not the same thing as watching your work on the actual devices.
Discover the story
If you design page by page, you risk loosing the general picture of the whole story. Therefore it’s better to work on little pieces at a time, and fill in the gabs when you see them.
Investment is the enemy of design.
Prototyping
A sum up of Billy Kiely’s rapid prototyping workflow from the designer’s perspective:
Use it while you design it. You design an experience.
Start with a cupcake. Get all the ingredients ready. Then you mix them in the proper order.
The quicker you get feedback the better.
Define the jobs to be done.
Use real content.
Make it accessible for the team and the costumer.
Avoid the edge cases in the early stages of the work.
Rapid prototyping and responsive webdesign are the major trends at Future of Web Design, London 2015. Pixelperfect designs in Photoshop are sooo dead. Design in the browser is the new kid in town.
Workshops
The workshops are interesting because they give you:
Contact with the business.
Excellent speakers.
Content strategies
I attended Steve Fisher’s workshop on content strategies, and learned a lot. During the first part of the workshop Steve Fisher introduced his workflow. Then we had to try it out in groups.
With the responsive web new content strategies are needed. Several speakers focussed on the topic. ??? of the Guardian told about the redesign of the paper.
It was a story about failing, analysing and hard work before they found a formula. Perhaps not a silver bullet. But it works for the time being.
The design workflow
Of course designing in the browser will affect the workflow of the designer. In stead of painting his vision in Photoshop, the designer must work with code.
And the designer must test the production on several devices. Since there are litterally thousands of resolutions and screen sizes knowledge of libraries is important.
Perhaps code is not the first thing that comes to a designer’s mind. But as the designer from Envision said:
"It is not harder to learn code than to learn to use the graphical interface of Photoshop."
At an early stage the designer will be able to test the production on real devices with the real target audience and the costumers.
More than one speaker stressed on working with real content in order to get the tone and voice of the product.
Of course Photoshop is not entirely dead. You still need a tool for image manipulation.
Code
Den Odell gave a very fine introduction to the future standards of HTML and CSS.
Christiano Betta introduced several libraries and validationg methods for credit card forms.
Even though most developers work with some kind of rapid prototyping framework they did not talk much about their rapid prototyping frameworks. They were mostly mentioned en passant. I’d have loved to hear more about this subjects.
Pen & Paper
The focus was clearly on content strategy, wireframing by pen & paper. Most developers talked about rapid prototyping directly in the browser.
There are many advantages when you design in the browser. You see the result immediately. If something must change, you don’t have to redraw the layout in some three to four resolutions in Photoshop. And recode your markup or stylesheet. The new workflow seems to look somewhat like this:
Mock up a static prototype in HTML / CSS.
Share your prototype with real content your prototype with the team, audience and customers.
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.
