Hyperlinklijst Handboek Interactieontwerp

9789059404175-mini Teneinde de hyperlinks in het Handboek interactieontwerp toegankelijker te maken, heb ik de hyperlinklijst die achterin het boek staat hier opgenomen, zodat alle links klikbaar zijn. Sommige links zijn aangepast, omdat ze niet meer werkten, maar in alle gevallen is de extra informatie over een onderwerp toegankelijk gebleven.

Njoy!

 

 

Hoofdstuk 1

  1. en.wikipedia.org – Zoek op de begrippen in de tekst.
  2. www.jjg.net/ia – Jesse James Garrett’s model van The Elements of the User Experience.
  3. www.ixda.org – De Interaction designers association
  4. www.acm.org/sigs – Special Interest Groups van de Association for Computing Machinery
  5. www.sigchi.org – ACM SIG Computer-Human Interaction
  6. www.designinginteractions.com – Website bij het boek van Bill Moggridge

Hoofdstuk 5

  1. Wall of Deliverables: Verschillende manieren om analyseresultaten te visualiseren.
  2. Boxes and Arrows – Site voor en door analisten
  3. Design for the Digital Age – Site bij boek van Kim Goodwin over uitvoering van Goal Directed Design

Hoofdstuk 7

  1. 960.gs – Het 960 Grid systeem

Hoofdstuk 8

  1. www.vischeck.com – Bekijk uw site of afbeelding zoals een kleurenblinde die ziet
  2. www.useit.com/alertbox/20020203.html – Jakob Nielsen over ClearType
  3. en.wikipedia.org/wiki/Color_depth#Truecolor – Over kleurdiepte

Hoofdstuk 9

  1. www.webdesignerhelp.co.uk/index.php/2009/05/66-websites-which-use-beautiful-illustrations/ – Site met gebruik van illustraties in websites
  2. www.smashingmagazine.com/2009/02/19/40-excellent-illustrations-in-web-designs/ – Site met gebruik van illustraties in websites
  3. abduzeedo.com/web-design-illustration – Site met gebruik van illustraties in websites
  4. www.robertpenner.com/easing – The Penning equasions waarmee u animaties natuurlijker kunt maken
  5. research.microsoft.com/apps/tools/tuva/index.html – Een hypervideo speler
  6. www.videoclix.tv – Een Interactieve video aanbieder
  7. www.clikthrough.com/ – Een Interactieve video aanbieder

Hoofdstuk 10

  1. www.dialogdesign.dk/cue.html – Comparative Usability Evaluation
  2. www.useit.com/papers/heuristic/heuristic_evaluation.html – How to Conduct a Heuristic Evaluation
  3. www.useit.com/papers/heuristic/heuristic_list.html – Ten Usability Heuristics
  4. www.useit.com/papers/guerrilla_hci.html – Using Discount Usability
  5. www.accessibility.nl – Nederlands site over Accesibility
  6. www.drempelvrij.nl – Nederlandse site over Drempel Vrij
  7. www.vischeck.com – Bekijk uw site of afbeelding zoals een kleurenblinde die ziet

Hoofdstuk 12

  1. patterns.littlespringsdesign.com/index.php/Main_Page – Design for Mobile
  2. www.w3.org/TR/2008/REC-mobile-bp-20080729/ – mobile web best practices

Hoofdstuk 14

  1. www.gutenberg.org– Site van het Gutenberg Project
  2. www.apple.com/ipad – The Apple iPad
  3. www.plugandwear.com: Materialen voor wearable interfaces
  4. www.cutecircuit.com/products/wearables/ – Cute Circuit site
  5. www.oneill.com/navjacket/ – The NavJacket
  6. www.talk2myshirt.com – Fashion with Technology
  7. www.engadget.com – Site met het laatste nieuws over gadgets
  8. www.microsoft.com/surface/Pages/Technical/Learn.aspx – Site over Surface
  9. www.ted.com/talks/anand_agarawala_demos_his_bumptop_desktop.html – Videopresentatie van 3D OS BumpTop

Use initParams to swap ResourceDictionaries and load a Theme in Silverlight 3

I’ve been looking for a way the use themes just swapping ResourceDictionaries (RD’s) for some time. Now, with Silverlight 3 being able to use MergedDictionaries, this becomes possible.

It is Blendable, but you can only use RD’s with Build Action Resource and not Content. This is annoying enough to give it another go another time. You can use the workaround of using a the RD’s with build action as Resource for use with Blend only. You’ll have to change it back before you distribute your app. Want you ultimately want is to address the RD’s as Resource…

This method can help you when you:

  • want to load a theme once on application startup
  • want to set the theme as an initParam on the Silverlight plug-in
  • don’t want to use implicit styling: you’ll need two or more RD’s with identically named Styles and Resources

Restrictions of this method are:

  • Blendable using workarounds
  • You have to use one Default theme (which can have any name you want).
  • You cannot dynamically update the theme: you can set a certain theme only once at application startup.

If this is the method for you, this is what you need to do:

  • Create ResourceDictionaries for the Default theme and for one or more other themes that you want to load in the root of your Silverlight project.
  • Use x:Keys for Styles and Resources and keep them the same between RD’s.
  • Set the Build Action for these RD’s to CONTENT in Visual Studio or by editing your .CSPROJ file by hand.
  • Insert an initParam in the <Object> tag in your startup file like this:

[sourcecode language=”XML”]

<param name="initParams" value="Theme=TheTheme" />
[/sourcecode]

  • Add a Default MergedDictionary in App.xaml:

[sourcecode language=”XML”]

<Application.Resources> 
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Default.xaml"/>
        </ResourceDictionary.MergedDictionaries>

[/sourcecode]

  • Declare a private currentTheme variable in App.xaml.cs

[sourcecode language=”XML”]

public partial class App : Application
{
    private string currentTheme = "Default";
    …

[/sourcecode]

  • Set the Default theme, get the initParam, make an URL to the filename and create and RD from that. Then add the RD to the MergedDictionaries:

[sourcecode language=”XML”]

private void Application_Startup(object sender, StartupEventArgs e)
{

    //set the current theme to the currentTheme variable
    string currentThemeName = string.Format("{0}.xaml", currentTheme);

    //get the theme name from the initParam
    string themeParameter = e.InitParams["Theme"];

    if (!string.IsNullOrEmpty(currentThemeName))
    { 
        //set the current theme to the theme parameter and create filename
        currentThemeName = string.Format("{0}.xaml", themeParameter);

        //create an URL from the currentThemeName
        Uri themeUrl = new Uri(currentThemeName, UriKind.RelativeOrAbsolute);

        try
        {
            //create a RD and set the source to the URL
            ResourceDictionary themeDictionary = new ResourceDictionary
            {
                Source = themeUrl
            };

            //Add the RD as a MergedDictionary
            Application.Current.Resources.MergedDictionaries.Add(themeDictionary);
        }
        catch (Exception ex)
        { 
            //communicate theme doesn’t exist
            throw; 
        } 
    }

    this.RootVisual = new MainPage();

}

[/sourcecode]

Many thanks to Tony Tromp and Michaud Venant for helping me out with the code.

The error “Error HRESULT E_FAIL has been returned from a call to a COM component” occurs when you forgot to change the build properties of the ResourceDictionaries to CONTENT. You can do this in Visual Studio in de Solution Explorer with the properties of the specific XAML files. This error also occurs when you maken a mistake in the name of the Theme in the initParam by messing up the quotes for example.

When you make a mistake in the Styles or the Resources used by the Styles you’ll get another error: Cannot find a Resource with the Name/Key AppBg [Line: y Position: x]. Actually if the style is OK in the Default theme it wil show that. Happily this error is easier to track and to fix, but a small error in your RD’s may have unpredictable results, so make sure they are sound.

I’ve been working with Themes from initParams for weeks. You can use Blend when you set the build action in VS to RESOURCE and restart Blend. Blend should show all the RD’s as Resources in the Resources Panel and you can edit them in the Blend artboard. You can even build in Blend and change the Theme using the initParam in the startup file. Make sure the startupfiles are the same in VS and Blend :). Before you deliver your project make sure you set the build action back to CONTENT in VS to make the theme system from initParams kick in.

I’ve placed working code on my SkyDrive.

Njoy!

10 Silverlight loading animations using percentages (HBSL3 Addendum 1)

I’ve been thinking about what ways you’d have to show a loading animation using the progress percentage in a meaningful way.

Following Mike Taulty’s rant avoiding the “Blue Balls” when loading a Silverlight application, I’ve been thinking about what ways you’d have to show a loading animation (a.k.a. Splash Screen 🙂 using the progress percentage in a meaningful way.

The idea was to come up with 10 way to do this and it proved to be harder than I thought. I’ve made a little sketch that is a little further down this post, but first let’s have a look at how to show this. Actually is it XAML only, because the application is not loaded yet, so it can only use Javascript code behind. Creating a XAML-file and a JS-file in your Web project is enough.

Create a new XAML file called SplashScreen.xaml without code behind and a Grid or Canvas as the outer container. Place a Textbox to show a percentage and some Rectangles to show the progress.

[sourcecode language=”XML”]
<Canvas
    xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a>
    xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml&quot;">http://schemas.microsoft.com/winfx/2006/xaml"</a>
    Width="640" Height="480" Background="White">
  <Canvas Canvas.Top="100" Canvas.Left="100" Width="440" Height="280">
    <Rectangle x:Name="rctProgressBarTrack" Width="300" Height="25" Canvas.Top="50" Canvas.Left="10" Fill="Silver" />
    <Rectangle x:Name="rctProgressBar" Width="300" Height="25" Canvas.Top="50" Canvas.Left="10" Fill="Red">
      <Rectangle.RenderTransform>
          <ScaleTransform x:Name="rctProgress" ScaleX="0" ScaleY="1"/>
      </Rectangle.RenderTransform>
    </Rectangle>
    <TextBlock x:Name="txtStatus" Height="20" Canvas.Top="55" Canvas.Left="125" Text="Loading: " TextWrapping="Wrap"/>
  </Canvas>
</Canvas>
[/sourcecode]

In your startup file in the Web project add two lines to the Silverlight plug-in:

[sourcecode language=”XML”]
<param name="splashScreenSource" value="SplashScreen.xaml"/>
<param
    name="onSourceDownloadProgressChanged" 
    value="onSourceDownloadProgressChanged" />
[/sourcecode]

Create a small SplashScreen.js file in your Web project containing only this:

[sourcecode language=”XML”]
function onSourceDownloadProgressChanged(sender, eventArgs) {
    sender.findName("txtStatus").Text =
        "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";
    sender.findName("rctProgress").ScaleY = eventArgs.progress;
}
[/sourcecode]

Now copy the SplashScreen.xaml file to your Web project. If you change it later, don’t forget to copy it into your XAML project again . You may want to create something in your MainPage.xaml so there’s something to show after loading…

progress

LoadingAnimations Here are  a 10 ideas for creating interesting loading animations. Most a using the progress percentage in some way. A few are “indeterminate” so, they could run forever. Note that the last 2 are dynamic, so should update every second or so. You can use the bars to fill other paths too, like coffee cups. You may need to scale a Clipping Mask for that.

Don’t make a Splash Screen that needs it’s own loading animation 🙂

Njoy!

Handboek Silverlight 3!

Het Handboek Silverlight 3 is uit. Het eerste en vooralsnog enige boek over Silverlight 3 in het Nederlands.

9789059403888klein_thumb.jpgEind augustus is het Handboek Silverlight 3 uitgebracht. Het eerste en vooralsnog enige boek over Silverlight 3 in het Nederlands.

Silverlight is de spannende, nieuwe techniek om met behulp van vectorafbeeldingen websites en -applicaties te creëren. Hierdoor worden visuele elementen haarscherp getoond en zijn ze schaalbaar, terwijl het downloaden sneller gaat dan bij bitmapafbeeldingen. De capaciteiten voor transparantie, kleurverlopen, animatie en 3D-projectie bieden u de kans om indrukwekkende ontwerpen te realiseren.

Wilt u een Silverlight-project van begin tot eind doorlopen, dan is dit boek voor u. Vier fasen in het proces van het creëren van een Silverlight-applicatie komen uitgebreid aan de orde:

  • Ontwerpen: over creativiteit, concept, schetsen en de gereedschappen SketchFlow en Expression Design.
  • Produceren: over XAML en de gereedschappen Expression Blend, Expression Encoder en Deep Zoom.
  • Programmeren: over de programmeeromgeving Visual Studio, aangevuld met een aantal praktische toepassingen in C#.
  • Publiceren: over het online brengen van Silverlight-sites en -applicaties, waaronder zoekmachineoptimalisatie, aangepaste installatie en uitrol in een zakelijke omgeving.

Webdesigners leren werken met eXtensible Application Markup Language (XAML), programmeurs leren hoe Silverlight aansluit op C# en het .NET-platform en ontwerpers leren hoe de grafische gereedschappen voor Silverlight precies werken. Dit boek bevat talloze bruikbare oplossingen voor problemen die u bij uw Silverlight-projecten tegen kunt komen.

Microsoft staat pal achter deze techniek en neemt het op in eigen websites, nieuwe platformen en toekomstige ontwikkelingen. Silverlight kunt u in de browser draaien, op de desktop installeren en het is onderdeel van de komende versie van SharePoint. De markuptaal XAML is niet alleen onderdeel van Silverlight, maar ook van Windows Presentation Foundation voor Windows-applicaties en van Microsoft Surface, de multi-touch tafelcomputer. Uw kennis van XAML kunt u op deze platformen ook toepassen.

Bestel ‘m alvast bij je favoriete boekhandel online:

http://www.boox.nl/nl/boek-handboek-silverlight-3-9789059403888

http://www.comcol.nl/detail/67156.htm

http://www.bol.com/nl/p/boeken/handboek-silverlight-3/1001004006437928/index.html

http://www.bruna.nl/boeken/handboek-silverlight-3-9789059403888

http://www.computerboek.nl/boek/9789059403888/handboek_silverlight_3_antoni_dol

http://www.proxis.nl/BENL/Product/Silverlight_3__Handboek/3472212__detail.aspx

Meer informatie vindt je bij de uitgever, Van Duuren Media.

De doelgroep voor Addendum

Find XAls je je afvraagt voor wie deze blog is bedoeld, kijk eens naar deze afbeelding…

Als je nu aan het berekenen bent wat X is, of dat ondertussen al hebt gedaan of als je het antwoord gewoon al wist, dan is deze blog in principe niet voor jouw. Als je het probleem niet ziet en het logisch vindt dat de X die gezocht wordt er gewoon staat, dan ben je meer visueel ingesteld, waarschijnlijk een designer, en zijn deze blogpost wel voor jou bedoeld. Njoy!