Le Lab

A partir d’aujourd’hui, vous commencez à recevoir vos ipads en France, en Belgique, en Suisse. Je fais partie de ceux qui ont remué ciel et terre pour en avoir un avant, alors laissez moi vous donner quelques conseils.

C’est votre iPad

Il est très confortable à utiliser et stocke énormément d’infos personnelles. Alors faites y très attention, même quand vous le prêtez à des amis ou collègues ou la famille. Ils vont y toucher, ouvrir vos ails et regardez vos photos. Deux solutions: ne mettez rien de privé dessus ou protégez le avec le mot de passe et monitorez de très près ce qui lui arrive. Par exemple, je laisse les gens le porter pour se rendre compte du poids, mais ils n’ont pas le droit de toucher l’écran.

Il tient la charge

Ouais, une journée de voyage, voire deux ne lui font pas peur. La première charge a duré plus de 10 heures sur le mien, largement plus, et il y avait un épisode de lots ou deux dans ces dix heures. Il n’est pas rare que je regarde la jauge et que je m’étonne d’avoir encore plus de 50% de charge. Alors arrêtez d’y penser.

Arrêtez d’acheter des applis iPhone

Installer une appli iPhone sur son iPad c’est terriblement décevant. Horrible. Seules les applis universelles valent le coup, car la fonctionnalité, c’est aussi une question d’espace, de champ pour s’exprimer, regarder. Dans l’ipad, ce qui est plus grand ce n’est pas que l’écran, c’est aussi votre envie de lui faire faire des choses.

Achetez en deux

Pas de jaloux. Non, franchement.

– Post From My iPadbr />br />br />

Sorry, I just had to try it once again with a better picture of my sons. This time, Jules is there too.

Testing the new features of Mars Edit 3.0 It looks like an image, but this is actually a raw file coming directly from my LightRoom 2 library. Edited using the new rich text editor, on which you can see my two older sons Max (left) and Oscar (right).

Now if someone could edit my Basic Maths template.

Just a quick tip, hopefully Google will index this:

If you want to present a modal view on the iPad from the bottom, even when in Landscape, you need to force the presentationStyle, like this:

Otherwise it might appear from the side (awkward).

I decided I wouldn’t reinstall Flash on my computer a long time ago. The editing environment was too slow, too bloated, and flash web sites are too slow (yes, even the ones I make). That was long ago.

Recently I put on Github the piece of Flash that has been the most downloaded on my former blog: my slideshow. Which is a way to say: do whatever you want with it, I don’t care. But as this is what a lot of people want, I said to myself that people might want the same thing with the latest kid in town: HTML5.

So here it is. It’s the bare minimum at the moment. But look at the source of this page: in 40 lines, a slideshow for photographers. No Flash, easy to use on My Precious.

canvas element not supported in this browser

Voici une autre tentative d’animation avec Canvas. Je vais élaborer unpeu pour parvenir à quelque chose d’utilisable par le plus grand nombre. L’aquarium c’est bien et beau mais on n’en a pas besoin sur son blog, en général.

Il faut donc apprendre plus de choses. Je vais me renseigner sur le declenchement de timers. Car les animations se font avec des timbres, pas sur le modèle d’animation de tweening de Flash ou de CoreAnimation.

Il y donc deux timers en Javascript. Le premier ne doit pas être utilisé car il fonctionne assez mal dans le cas des anims. C’est celui utilisé dans l’exemple précédent.

Setinterval ne doit pas être utilisé.

Par contre on peut utiliser setTimeout ( action, milliseconds). On va le réécrire comme ça.

canvas element not supported in this browser

Maintenant, si on rajoutait une image?

Pour se faire, il faut charger une image et lui mettre un événement onload pour la mettre dans le Canvas et la dessiner.

var myImage = new Image(); myImage.onload = function() { context.drawImage(myImage, 30, 15, 130, 110); } myImage.src = "animage.jpg";

On va le faire sans animation, dans un premier temps.

canvas element not supported in this browser

-- Post From My iPad

Lassé des problèmes liés à Flash et à la non compatibilité (et au poids, et à la puissance nécessaire et…) de celui ci avec mon iPad préféré, j’ai commencé à regarder plus attentivement les alternatives, et notamment HTML5 et Canvas.

L’excellent Podcast de Dan Benjamin (The DevShow) m’avait déjà donné quelques pistes. J’ai ensuite trouvé le site web de Paul Hamill et j’ai commencé à faire mes propres expériences.

Et si on commençait?

canvas element not supported in this browser

J'ai repris dans le corps de ce tte page presque lettre pour lettre l'exemple de Paul Hammill. Si vous ne le voyez pas, vous n'avez probablement pas le même browser que moi (testé sous Safari 4, Chromium et Firefox 3.6).

Je commence par mettre sur la page html le canvas dans lequel je vais dessiner:

<canvas id="canv" class="output" width="470" height="400" style="width:470px;height:400px">canvas element not supported in this browser</canvas>

Ensuite j'initialise dans un javascript tout un ensemble de variables, et je récupère un contexte graphique dans lequel dessiner à partir du canvas présent dans la page:

function init() { elt = document.getElementById('canv'); context = elt.getContext('2d'); createCircles(20); draw(); }

On y crée 20 objets de type cercle que l'on stocke dans un array (createCircles(20)). La fonction createCircles est un peu longue et fastidieuse, pas très intéressante. Ensuite, on dessine toutes les (1000/20)=50 millisecondes pour avoir 20 images par secondes (on devrait réussir à avoir mieux). A chaque fois qu'on dessine, on refait le fond car sinon, on redessine sur l'image précédente (c'est assez perturbant). Commentez tout ce code pour voir ce que ça donne;-)

Voilà où j'en suis...

Il n'est pas déraisonnable d'imaginer qu'un éditeur vienne avec un outil pour concevoir graphiquement des dessins sur Canvas, quand on voit déjà qu'Opacity Express est capable de créer du code pour du dessin vectoriel.

J’ai décidé de ne plus faire de Flash. En fait je n’ai pas réinstallé Flash sur mon Mac depuis le passage en Snow Leopard, et je me porte très bien comme cela

Par contre je me suis dit que d’autres aimeraient sans doute profiter de mes précédents gizmos. J’ai donc mis slidesimple en lilcence libre, type BSD sur Github ici.

When you are working for others, it’s important they know which version they are using. So I created some default images of both orientations for iPad and for both Beta and alpha versions.

Download now

Like many developers I know, I believe in the iPad.

I believe that’s going to be a great platform for some kinds of uses. Not everyday coding in XCode or Coda, not editing text with Latex, TextMate or another powerful text editor. No, a more casual kind of use.

So I have a project I want to do on the iPad which I think could be both fun and successful. I’ ll let you know later what this project is about. What I’ m about to talk about today is the critical part of the project: design.

You know what they say. In most environments, you want to spend 10% of your project time on design the User Interface (UI) or the User eXperience (UX). Like an afterthought. On the Cocoa Touch platforms, you have to spend over 60% of your time on that part of the whole project.

That’s what I do: before getting really involved in the project, I checked that I could work with a graphic designer to exchange thoughts, detail behaviors, ideas, etc. I’m still the project manager and creator. She gets to play the hard part of being candid about the project.

I made sure she knew well the products on the Cocoa Touch platforms that have reached the level of UI and nice design that I hope to find in my products. I made a list of apps to buy and use, another list of apps to look at. I made sure she got to read the Human Interface Guidelines, and saw the great videos by Apple.

But know comes the hard part: putting the ideas into perspective and moving on from a “application statement” to real screens. And this I am the only one who can do it.

Over the months, I have become quite confident over my ability to do it on the iPhone. My products have not yet reached the level of candy I would hope, but their structure is now well balanced, clean, lean, and I ‘get’ the device.

I have started with all the stencils you could find, and still use some. But for the most part I have a moleskine notebook (before) or a Field Notes notebook. And a pencil: a 0.9mm mitsubishi uni. Allows me to write down the different screens of an app quickly wherever I am, even on a sunday night at 2:00 am. I know the iPhone UI at my disposal, and the screen is the right size for a notebook.

I also use the Sketch book I bought on Amazon several months ago, when I need to explain the UI to someone else. I have plenty of room around the UI to describe the UX. Then I make photos and send them over.

But the iPad is HUGE…

At first, I used the stencil made by Andy Warwick which he showed as a mockup during the most excellent NSConference UK 2010. I made myself the same mockup to try to get a feel of the beast.

Matt Gemmell holding Andy’s mockup

Because it is big, and small at the same time. And the Simulator doesn’t reflect exactly the size of the stuff. Like for the iPhone and the simulator: the density of the screen is not the same on a Mac and an iPad, so the beast appears bigger on a Mac screen.

Like Andy, I taped my cardboards to have a nice back. But I was quite unhappy with it because the damn thing wouldn’t work. Nothing on the screen ever. And it didn’t help me design anything.

I discovered several notepads or stencils for the iPad. I have ordered the stencil from Design Commission, and the notepod. But deliveries from Australia to France are a bit slow.

So this saturday I took the opportunity of some errands to get into a graphic shop, and bought myself a cutting mat, a cardboard, a pvc sheet and some transparent drawing paper (papier calque). I used the pvc sheet for my mockup and now I have a ‘glass screen’. I can put things under that glass screen (it ‘s more comfortable and less dangerous than the one nikf did too).

And I cut my cardboard sheet to make myself two small iPads. The screen itself seems to be 20cmx15cm, if you wanna know. the other specs are on Apple’s website. On these cardboard, recto-verso, I made the lines of the status bar, made some lines too for popovers, split views etc. I used screenshots I made from the Simulator to reproduce as well as I could the size, position etc.

I can now use my drawing paper like a (last century’s) cartoon drawer would do: I add levels of UI to my basic view, and put everything in the iPad mockup to ‘feel’ how it is.

Having all these tools and these limits to the UI I want and I know I can make helped me get over the white sheet problem, and I started really designing something real which I can ‘test’.

Total cost must’ve been over 40 euros, but I have many stencils now I even did some more for my iPhone stuff.

Here are some pictures:

I am not totally bad at using my hands, but I am no wizard too, so if I did you can probably do it too.