archive-com.com » COM » S » SVENNERBERG.COM

Total: 274

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • Looping with jQuery | In usability we trust
    this Item0 Item1 Item2 The really cool thing about this is that each iteration has it s own function scoop If you ever tried to do this with regular DOM scripting and a standard for loop you ve most likely ran into some kind of scoop problem when dynamically assigning values to an object They all end up getting the same value jQuery elegantly solves this and makes you re coding life a little bit easier Pretty cool don t you think Happy coding Tutorials Javascript jQuery Programming Previous post ASP NET MVC Preview Release 4 Next post WebSlices evolution of RSS 8 Comments Ro January 7 2009 at 9 34 pm Thanks for the article helped me do this my list li each function this mouseover function my list li removeClass selected this addClass selected Can you think of anyway to shorten this Thanks Reply Gabriel Svennerberg January 7 2009 at 10 24 pm I think that there s a fundamental flaw in your code Surely you want the class to be appended only when the mouse hovers over it In that case you could write it like this but it s actually longer than your code my list li each function this hover function this addClass selected function this removeClass selected But on the other hand it s better to achieve this with pure CSS Then it gets really short my list li hover Whatever style you want it to have Reply Michel Moos November 22 2009 at 3 45 am Thank you for this I knew there was an elegant solution Reply Michel Moos November 22 2009 at 3 46 am ps My implementation var apptDetails undefined function get selected values jQuery document ready function apptDetails n select each function i var v this val if v

    Original URL path: http://www.svennerberg.com/2008/08/looping-with-jquery/ (2016-04-28)
    Open archived version from archive


  • Ultimate Site Logo - Exemple page
    Click here to read about this example in my blog In usability we trust

    Original URL path: http://www.svennerberg.com/examples/ultimate_site_logo/ (2016-04-28)
    Open archived version from archive

  • Marking up contact information with microformats | In usability we trust
    inside a tag marked with class vcard We do this to tell that this part of the web page is an hCard We also want to define what the name of the contact is in this case by using class fn formatted name We also want to define the phone number by using class tel and the url by using class url And this is how it s done You just use the class attribute with predefined class names and voilá you got some microformat enhanced content div class vcard h4 class fn Gabriel Svennerberg h4 div Tel span class tel 46 470 76 40 50 span div div a class url href http www svennerberg com www svennerberg com a div div Display it with style You can easily style the address information using the microformat classes as hooks Here s an example of some simple styling where I ve used the vcard and the fn classes to style the content vcard margin 1em 0 padding 20px border 1px solid dde width 15em background f4f8fd fn margin 0 0 1em The result would look something like this Further enhancements You could further enhance the content by giving it even more detailed specifications You could for example define what part of the name that s the first name and what part that s the family name This is accomplished by using class given name and class family name You could also be more specific about the phone number by specifying what kind of phone number it is e g work home etc This pattern is how you mark up several items of one particular type like phone numbers You then use class type to define the type of number and class value to define the actual number and wrap it all in a container with class tel div class vcard h4 class fn span class given name Gabriel span span class family name Svennerberg span h4 div class tel span class type Home span span class value 46 470 76 40 50 span div div a class url href http www svennerberg com www svennerberg com a div div Adding more content In this example I have added even more address information like the street address two different phone numbers and so on By now I think you got the hang of it You just use standard X HTML elements and classes to define the content div class vcard h4 class fn span class given name Gabriel span span class family name Svennerberg span h4 div class adr div class street address Kasernv auml gen 9b div div span class postal code 352 36 span span class locality V auml xj ouml span div div class country name Sweden div div class tel span class type Home span span class value 46 470 76 40 50 span div div class tel span class type Work span span class value 46 470 427 14 span div div a class url href

    Original URL path: http://www.svennerberg.com/2008/06/marking-up-contact-information-with-microformats/ (2016-04-28)
    Open archived version from archive

  • Using Microformats to populate Google Map | In usability we trust
    it Microformats isn t hard to use It s all about using the same HTML that you always use with the difference that you use certain class names to describe the content The Javascript I use the classes in the markup as hooks to extract the data and put it in the map As an added bonus I can also use the classes to style the visual appearance of the content In map js the script loops through the different events class vevent and look for information about them It then uses this information to put a marker in the map and to create a info bubble that appears when you click the marker Here s the code to extract the geo data Note I ve used the Javascript library DOMAssistant to ease the pain of DOM coding If you don t recognize the notation you should definitively check it out Getting all elements marked up with the class vevent var events vevent Loop through all event elements to extract data about each event for var i 0 i events length i Extracting the coordinates events i latitude events i elmsByClass latitude 0 innerHTML events i longitude events i elmsByClass longitude 0 innerHTML And here s the code for putting a marker into a Google map some code omitted for clarity of the example Creating a point in Google map var point new GPoint events i longitude events i latitude Creating and adding a marker in Google Maps var marker new GMarker point The variable map is the map object It s been created earlier in the code and is not shown in the example map addOverlay marker Of course in the demo I do more than this I extract more information about the events and then use it to create an info bubble which I attach to the click event of the marker Please check out the entire Javascript code for this demo by downloading map js If you want to use the code yourself you also need DOMAssistantComplete 2 7 js or newer and an API key for Google maps Watch the demo in action Related resources Google Maps api Microformats DOMAssistant Tutorials Javascript Mashups Microformats Web apps Previous post Change your focus to locus Next post Designing the Moment Book review 8 Comments Andy Mabbett June 12 2008 at 8 36 pm Your end date mark up abbr class dtend title 2008 05 31 31 Maj abbr is incorrect End dates are exclusive in hcalendar and that should be blieve it or not abbr class dtend title 2008 06 01 31 Maj abbr which is clearly an even greater abuse of the ABBR element than the start date markup For more on the latter topic see haccessibility Reply Andy Mabbett June 12 2008 at 8 38 pm That haccessibility link should be to http www webstandards org 2007 04 27 haccessibility Reply Gabriel Svennerberg June 12 2008 at 9 31 pm Andy Thanks for the information and

    Original URL path: http://www.svennerberg.com/2008/05/using-microformats-to-populate-google-map/ (2016-04-28)
    Open archived version from archive

  • Gabriel Svennerberg | In usability we trust | Page 3
    Lama was apparently a fake That s too bad because he was quickly becoming the most popular person on Twitter Read all about it at the Next Web Working with Info Windows in Google Maps February 5 2009 Gabriel Svennerberg 54 Comments Having Info Windows in a Google Maps is a powerful way of displaying information about a specific point or object Did you know that there are several kinds of them In this article I will show you how to add different kinds of Info Windows that appear when you click on a marker Continue reading How Spotify have changed the way I listen to music January 30 2009 Gabriel Svennerberg 5 Comments A while I go I wrote an article called Spotify is right on the spot where I described a service called Spotify that let s you listen to music over the Internet I was impressed of how well it worked and of how good the music player was I ve been using Spotify for about four months now and that has been four month of more intense music consumption than usual for me I ve noticed that Spotify has made me listen to music in new ways Continue reading Different approaches to communicate UX design January 29 2009 Gabriel Svennerberg 0 Comments Peter Morville at Semantic Studios has compiled an extensive list of ways to create deliverables to communicate uX designs He writes about this in User Experience Deliverables The article contains a list of 20 techniques with links to further reading on each To make it easier to find suitable techniques he also made a Treasure Map pdf so it s easier to see what your options are Or as Peter himself put it It s hard to find the best trees when we can t see the forest So we often fall back on old habits We churn out wireframes when a story may be worth its weight in gold Some great deliverables stay hidden in plain sight That s why we created this treasure map for our wall and yours Peter Morville The Design of Future Things Book review January 24 2009 Gabriel Svennerberg 0 Comments I ve read a few books by Don Norman before and they have all been a great source of inspiration and full of Aha moments This book doesn t quite reach that same level but I still find it an interesting read The book is basically about how to design intelligent things Some call it ambient computing others discrete computing but it s all about the pitfalls and principles when we try to add intelligence to our daily objects Continue reading Handling Large Amounts of Markers in Google Maps January 13 2009 Gabriel Svennerberg 115 Comments To use markers in Google Maps is fairly trivial at least when you have a reasonable amount of them But once you have more than a few hundred of them performance quickly starts to degrade In this article I will show

    Original URL path: http://www.svennerberg.com/author/svennerberg/page/3/ (2016-04-28)
    Open archived version from archive

  • Javascript | In usability we trust | Page 2
    Google Map May 24 2008 Gabriel Svennerberg 8 Comments Inspired by an article I ve read on 24 ways I ve built a demo page for using content marked up with microformats to populate a Google Map Unfortunately the demo is in Swedish but I think those of you who doesn t speak Swedish can easily understand it anyway The main concept is to use a list of folksong festivals

    Original URL path: http://www.svennerberg.com/tag/javascript/page/2/ (2016-04-28)
    Open archived version from archive

  • Where’s me back button? | In usability we trust
    with a coworker who s also got the new version but still has the buttons I suspect that this might be something strange happening on my computer I don t think Jakob Nielsen will take lightly on this as he says that according to his research the back button is the second most used navigation feature The back button indeed act as sort of an undo function Enabling the user to back out from unwanted pages I ve tried to restart Firefox but that didn t help Maybe rebooting the computer can fix it Does anyone else experience the same problem Update While looking in to this a little further I ve managed to get my back button back again By right clicking the menubar and select Customize from the context menu I found my missing buttons and could easily drag them back where they belong The question is what made them disappear in the first place Articles Browsers Usability Previous post The use of buttons in web forms Next post Visualizing the age of content Leave a Reply Cancel reply Your email address will not be published Author Email Website You may use these HTML tags and attributes a

    Original URL path: http://www.svennerberg.com/2008/09/wheres-me-back-button/ (2016-04-28)
    Open archived version from archive

  • The use of buttons in web forms | In usability we trust
    an undo function Do you agree with my conclusions or do you have a different opinion about this Please share References OK Cancel or Cancel OK Jakob Nielsen 2008 Web Application Form Design Web Form Design Chapter 6 Luke Wroblewski 2008 Designing the Moment Chapter 13 Robert Hoekman jr 2008 Reset and Cancel Buttons Jakob Nielsen 2000 Translations This article is also available in Chinese web Translation by 2003 Articles Interaction design Usability UX Previous post Web Form Design Book review Next post Where s me back button 14 Comments chris Jangelov October 2 2008 at 8 26 pm There is an interesting interview with Luke Wroblewski on the UXpodcast http www uxpod com index php post id 319469 chris Reply Gabriel Svennerberg October 3 2008 at 10 29 pm Yeah that was pretty interesting Especially the part about the time you have to show the benefits of your product web service etc for a potential customer I think it was 1 06 minutes per person and month Reply Neto November 1 2008 at 1 33 am Usability and interaction design for buttons love this kind of stuff thx for the tip interesting interview with Luke Wroblewski Reply adam December 23 2008 at 9 27 am There is another pro of using links as a cancel button it lowers server load When user clicks on form button input the form must be sent to the server as POST request Server must process that request and usually redirect to another page so we have 2 requests With Cancel button as a link it just sends a GET request Reply Gabriel Svennerberg December 29 2008 at 10 22 am Adam That s absolutely true For a high traffic site that could definitely be an argument for using a link as Cancel Reply Caroline Jarrett January 8 2009 at 4 19 pm Broadly I agree with the points made about positioning the buttons but I d like to make one rather important distinction The crucial point is make a clear path for the eye to follow which you have put as a subsidiary point within position the Primary action to the left Having the buttons aligned with the left side of the form makes a clear path for the eye to follow but it s not the only way to do it If you look at Luke s articles again from this point of view you ll see that his first article does indeed work If you look at his other article Primary and Secondary Actions in Web forms you will see that the tests included the two buttons separated but they only tested CANCEL on the left primary position for the eye movement and excluded SUBMIT on the left SO look at the left hand edge of the boxes on your form Then put the primary button aligned with that left hand edge THEN think about secondary actions How important are they to users Is there a risk that a user might accidentally do something unfortunate If so make that unfortunate thing have less visual impact and place is less prominently It s not really a matter of left or right of each other For a longer version of this discussion see my post in the thread on http www ixda org Next and previous button order Long Best Caroline Jarrett Reply Gabriel Svennerberg January 8 2009 at 9 59 pm Caroline Thanks for your insight You re probably right about how we look for the next thing to interact with in a form In the discussion on IxDA you certainly explains this behavior very well One obvious thought that comes to mind is that this can really be true in our western culture where we read from left to right In countries where they read from right to left the opposite should be true Also thanks for the link to Lukes other article I should have had that in this article in the first place Cheers Gabriel Reply Robson Waterkemper February 9 2009 at 9 25 pm Can you explain why there are so many forms out there with only one action and this action is placed on the right side of the screen Why this pattern was created Do you have an idea for it I m asking you this because I m trying to create a pattern for me and I was using the right aligned buttons because it was natural to me that the conclusion of a given screen was in the right like starting doing something in the left and ending in the right What do you think about that And using this right align what do you think one should do when putting extra buttons on the interface like Cancel or even Delete for a web based application Reply Gabriel Svennerberg February 10 2009 at 7 59 am I think that positioning the button to the right at the bottom of the form has sprung from an aesthetic point of view By putting it there you create a visual balance in the form Often there s a header in the upper left part of the form and the button balances that by anchoring the lower right corner To put it simple it looks good Also in our western culture where we read from left to right and start at the top an work our way down it could seem natural to end the form in the lower right corner After all that s how a page of text looks Having only one action is probably because you can always bail out using the back button of the browser I think it s also because the undo pattern still isn t widely adopted in web based applications and therefor designers and developers tend to ignore that option As you can read from the article and from the comments my conclusion is to put the button aligned with the left part of the form since there s where

    Original URL path: http://www.svennerberg.com/2008/09/the-use-of-buttons-in-web-forms/ (2016-04-28)
    Open archived version from archive



  •