Archive for tools

Tooltips may be implemented to greatly improve user experience in many scenarios.  This walkthrough will provide a method with which tooltip functionality may be implemented on SharePoint Data View Web Parts (DVWPs) using XSL and JavaScript.

Preparation

  1. Open the SharePoint site in SharePoint Designer 2007
  2. Open the page on which the tooltip functionality will be implemented
  3. Enable either Split or Code view

Create the Tooltip

  1. Locate the DVWP in which the tooltip functionality will be implemented
  2. Locate the XSL template “dvt_1.rowview” within the DVWP
    Example
    <xsl:template name=”dvt_1.rowview”>

    This XSL template specifies what is rendered for each List Item displayed in the DVWP.  A tooltip will be rendered for eash List Item and therefore should be added to this template.

  3. Locate where the tooltip should appear
    No consideration for spacing of the tooltip should be taken into account.  The tooltip will utilize the position style value “absolute” to display over other page content.
  4. Insert the blank tooltip
    Example
    <div style=”position:absolute;display:none;margin-top:14px;white-space:
    »nowrap;overflow:visible;border:silver 1px solid;background-color:
    »white” class=”ms-listdescription”>
    <xsl:attribute name=”id”>tooltip_<xsl:value-of select=”@ID”/>
    »</xsl:attribute>
    <xsl:attribute name=”onmouseenter”>javascript:this.style.display=
    »’none’;</xsl:attribute>
    </div>
    » – unintended line break

    The tooltip may be any HTML object and is not limited to the DIV object.  The tooltip HTML object must have the id attribute set as shown in the provided example.  The position and display style attributes should be set as shown in the provided example.  Setting the position style attribute to “absolute” allows the tooltip to display over other page content.  The onmouseenter attribute (as shown in the provided example) hides the tooltip if the user moves the cursor onto the tooltip.

    If multiple DVWPs on the same page will use the tooltip functionality, the id attribute of tooltips must be made distinct in each DVWP.  For example, tooltips in a DVWP on the List “Transactions” could use the id attribute convention: tooltip_transactions_[List Item ID].  Thus, tooltip id attributes that may have been “tooltip_14″ and “tooltip_14″ may now be “tooltip_transactions_14″ and “tooltip_reports_14″.

  5. Set the tooltip text
    Example
    <xsl:choose>
    <xsl:when test=”string-length(string(@Tooltip))=0″>
    <xsl:text>No tooltip.</xsl:text>
    </xsl:when>
    <xsl:otherwise>
    <xsl:value-of select=”@Tooltip” disable-output-escaping=”yes”/>
    </xsl:otherwise>
    </xsl:choose>

    If the tooltip references a List Item column that is not required (i.e. may be empty), it is suggested that empty values be handled as shown in the provided example. List columns must be referenced by their internal name. Setting the disable-output-escaping attribute to “yes” will display special (i.e. escaped) characters properly (i.e. unescaped). Please note that the provided example references a custom (i.e. non-standard) column called “Tooltip”.

The tooltip should be located like:

dvt_1.rowview HTML object hiearchy

As a result of setting the position style attribute to “absolute”, the tooltip renders like:

dvt_1.rowview HTML object rendering

Create the Tooltip Triggers

  1. Locate the DVWP in which the tooltip has been created
  2. Locate the XSL template “dvt_1.rowview” within the DVWP
    Example
    <xsl:template name=”dvt_1.rowview”>

    This XSL template specifies what is rendered for each List Item displayed in the DVWP. Each tooltip trigger (i.e. system response to a user action) will show /hide the tooltip in the same row (i.e. TR object) as itself.  Therefore, the tooltip trigger should be located within this template.

  3. Locate the HTML object that will trigger the display of tooltips in response to a specified user action.
  4. Insert the tooltip triggers
    Example
    <td>
    <xsl:attribute name=”onmouseenter”>javascript:var tooltipObj=document.
    »getElementById(‘tooltip_<xsl:value-of select=”@ID”/>’);tooltipObj.
    »style.left=event.clientX;tooltipObj.style.top=clientY;tooltipObj.
    »style.display=”;</xsl:attribute>
    <xsl:attribute name=”onmouseleave”>javascript:document.getElementById(
    »’tooltip_<xsl:value-of select=”@ID”/>’).style.display=’none’;
    »</xsl:attribute>
    <xsl:value-of select=”@Title”/>
    </td>
    » – unintended line break

    Tooltip triggers are inline JavaScript that find and display the tooltip appropriately. The tooltip is shown by setting its display style attribute to null and hidden by setting its display style attribute to “none”. The provided example shows the tooltip when the user moves the cursor onto the Title column’s parent TD and hides the tooltip when the user moves the cursor off the title column’s parent TD. Please note that the tooltip triggers are applied to the column’s parent TD to provide an optimal user experience.  The provided example displays the tooltip at the point where the user moved the cursor onto the parent TD (rather than always below the parent TD content).

Example

DVWP Tooltip example

MetroStar Systems employee, Sergeant Ross Beurmann, who served in Iraq, was interviewed by MyFoxDC about our program, Vision 21CARE. This video has now been posted on the Battlefield Healthcare website relating to this very topic. IDGA’s 11th Battlefield Healthcare Summit will detail best practices and the next generation in combat medicine and rehabilitative care as well as facilitate a forum where treatment initiatives and advanced research can be discussed, debated, and developed. MetroStar will be hosting a master class on Vision 21CARE at this summit.

www.battlefieldhealthcare.com

December 7-9th: 11th Battlefield Healthcare - www.battlefieldhealthcare.com
MetroStar Systems will be speaking at this event
Where: San Antonio, Texas
OUR TOPIC
Title: Vision 21CARE: Protecting Warriors by Connecting Warriors
Description of Topic:
The wars in Afghanistan and Iraq have put enormous strains on the men and women of the U.S. military, and we must do more to ease their burden and heal their wounds. Learn how SOCIAL MEDIA can help address these challenges.
Session Leader:
Ali Reza Manouchehri, Chief Executive Officer, MetroStar Systems and Former National Guard Resiliency Program Manager

If you ever lost a phone, you know how it feels to know that all the data that you had saved on your phone is gone. All those pictures, music and contacts are gone with the phone. It happened to me and it was a royal pain to recover a small portion of what I had lost.

The experience was a reminder of how much we rely on our mobile devices nowadays; hence, I am extremely glad that Microsoft introduced the “My Phone” service. Microsoft My Phone mainly concentrates on

  • Over-the-air back up of your windows mobile phone
  • Share photos with your favorite social networking sites
  • Manage your contacts, text messages and more online for free
  • Find your lost phone

If I had this service on my phone last year, I would have been able to

  • Restore all the data onto my new windows mobile phone
  • Find the last known and current location of my phone on a map
  • Remotely lock my phone and display a custom message
  • Remotely perform a hard reset (erasing all data)
  • Set the phone to ring, even if it’s set to vibrate or silent.

Find out more: http://myphone.microsoft.com/

Ok… so you’ve done it, you’ve dared to click the ‘Add Web Part’ button and have ‘ooohhed’ and ‘ahhhed’ at the enormous list of available Web Parts. :)   Of course, each Web Part provides its own special function that can lend support to how content is displayed on your site.  Through trial and error I have spent time learning functionality of available Web Parts.  Over time– and with some creative application ;) –I have also learned alternate uses to some of the commonly used ones.   Probably my favorite, or at least the one I use most often, is the Content Editor Web Part (CEWP).  I use this Web Part for a variety of different things such as for the creation of site banners and as a broadcast tool, which I’ll write about in my next blog.  I also use the CEWP to create navigational buttons:

Buttons Example

Buttons Example

Buttons are another way we can provide intuitive navigation for our site users.

Situations where use of buttons may be appropriate:

  • To provide easy access to other related SharePoint sites (that may be several clicks away).  For example, when implementing sites, you may choose to add a help button that links to a Technical FAQ Wiki.
  • To provide navigation in a Web Part Page (WPP).  Unless we access the code and ‘unblock’ the Quick Launch bar we don’t get that navigational tool in a Web Part Page.  Using breadcrumbs to navigate out of a WPP can also be confusing to novice SharePoint users, because the breadcrumbs (of course) map to the library holding this file.   Because of this, whenever I create a WPP I like to give users a ‘home’ button to give them easy access back to where they came from.

Untitled

  • To provide links into specific list and library views.  Remember when you change views in a list or library, the URL also changes.  You can use that path to provide users a link directly to a filtered view– for example, to provide a view of items that have been recently added –or to provide direct access a new list item form.

newwork

  • To provide access to an external site or a network directory.  If you have an address for it, you can link to it (it doesn’t have to be another SharePoint site).

The point is to provide your site users with navigation that is intuitive and easy to use.  Buttons certainly fit the bill on both criteria.  Ok, have I sparked your interest yet?  The below steps will demonstrate how you use a CEWP to add a button to your page:

*Note: To create a button using the CEWP, you’ll need to begin by uploading the graphic you want to use as a button, to a SharePoint library.  The steps below assume that you have already taken this action.  * A friendly reminder, make sure those accessing the site displaying the button, have at least ‘read’ access to the image file. :)

To create a button using a CEWP:

1.     On the site where you wish to add the button, click Site Actions then Edit Page.

2.      Click Add a Web Part.

3.      Select and add a Content Editor Web Part (displayed under the Miscellaneous category).

4.      To configure your new Web Part, click on the Edit drop-down and select the option Modify Shared Web Part.

CEWPedit

5.      In the Properties box (displayed on the right hand side of your screen), click on the Rich Text Editor button.

CEWP RT

6.      In the HTML Editor box that appears, click the Insert Image icon.HTMLbutton

HTML Editor box

7.      In the Edit Image Properties window enter the path to the image, or use the browse button to navigate to, select, and add the image.

Edit Image Properties

8.      In the HTML Editor window, click the image (that you just added to your CEWP) to select it.

HTMLEditor dialogue

9.      Use the Insert Hyperlink icon in the toolbar to map a destination path.

inserthyperlinkbutton

10.  Either browse to a location within your site collection, or type (or paste) in a path.

select URL

11.  Click OK to accept the path.

12.  Click OK again to exit the HTML Editor window.

13.  Turn off the chrome (you probably don’t want a title for your button), by expanding the Appearance section of the Web Part Properties box, and change Chrome Type to None.

Chrome

14.  Click OK at the bottom of the Web Part Properties box.

15. Click Exit Edit Mode.

You now have a new button- Congratulations!

Happy ‘SharePointing’

It is my last and final day here at eLearningDevCon 2009. It has been an incredibly productive and educational few days. But, why bore you with an introduction. I’ll just jump straight into boring you with the details.

For more on the conference, check my previous posts (Day 1 and Day 2) . Also, check out:

Conference URL: http://www.elearndevcon.com/

Twitter handle: @elearningdevcon

Twitter hashtag: #devcon09

Conference Sponsor: http://www.rapidintake.com/

And, on to the day’s first session:

The Missing Link: Rehumanizing eLearning

with Sarah Williams

E-Learning is mistakenly defined (by reference.com) as “a type of education where the medium of instruction is computer technology. In some instances, no in-person interaction takes place…”

Why? The best learning happens when there’s some form of human interaction–real or simulated.

Well, to solve the dilemna this definition poses, Sarah is taking us through concepts, beginning with “easy” ones and getting increasingly more “involved.”

Easy:

  • User interface design – make it simple, and conversational. Avoid conflicting stimuli.
  • Narrating the text that is visible on screen is generally a bad idea. People prefer to either read, or be read to, but both is confusing.
  • Metaphors – Use things from the learner’s pre-existing knowledge, to evoke–or more specifically activate–certain thoughts and emotions.
    • Use the principle of Einfühlung:

Einfühlung: “understanding so intimate that the feelings, thoughts, and motives of one person are readily comprehended by another.” (from Answers.com)

  • Use the principle of “Mirroring” – Cells in the brain mirror what the brain sees.
    • If we see something happen, the same neurons fire off in the brain that would if we were actually doing it. (Also called co-cognition.) Make the learner imagine themselves doing what you are demonstrating.
  • Know your audience. Be mindful of “In-groups” and “Out-groups.” For eLearning aimed at a certain demographic (gender, ethnic, occupational, etc.) use imagery from that same demographic (In-groups), not different demographics (Out-groups).

Medium:

  • Avatars v. agents:
    • Avatar is a human representation (actual photo, or digital/graphic depiction)
      • E.g.:

my_photo

(“Mii characters” also count as avatars)

    • Agent is a non-human representation, such as:

scratchhead

Use avatars. They are best for creating the human connection.

Be careful with digital Avatars! Cartoony avatars are ok, people can still relate (in fact, three dots, representing two eyes and one mouth are almost always recognized as a human face). If a digitally generated avatar looks too realistic, it can be off-putting.

Involved:

  • Video production – Show an actual actor or cartoon character talking to your learners. Caution: This solution is almost always expensive. (For a good recap of this, see “Cognitive Learning” from Day 1 and “Interactive Video from Day 2.)
  • Video conferencing – This can also be an expensive solution, but it is a superbly effective way to connect with your learners–Live! Could be done in realtime, or used for support after the fact.

Final Takeaways:

  • Take advantage of human psychology
  • Use human imagery (cartoony is OK!)
  • Have human interaction whenever possible

Next Session:

Getting the Most Out of Your Tools

with Jason Bickle

jbick

There is no magic bullet. No one tool does it all. E-learning professionals have to amass a repertoire of tools, and use some of them in conjunction to tackle each assignment.

Questions to ask before beginning any eLearning project:

  • What is your skill set?
  • What is your team’s skill set?

Select your tool(s) in accordance with your answers to these questions.

Basic tools:

(Note: These tools are categorized only based on their primary uses.)

  • Web:
    • HTML Editors – Dreamweaver, UNV, etc.
    • A great online learning resource for HTML, XML, etc: W3Schools.com
    • Discussion forums & Wikis
    • PDF – Adobe Acrobat (audio and video are now possible to integrate)
    • Documents – PowerPoint and MS Word

How you use these tools can be varied. Jason, for example uses discussion forums to interact with Subject Matter Experts (SMEs). All of these tools can have both internal and external uses.

  • Audio/Video
    • Audio editing – Audacity, Soundbooth, Sound Forge, GarageBand
    • Video editing – Vegas Video, Adobe Premiere (+ digital video camera, make sure you use one that has an input for an external microphone)
  • Graphics
    • Adobe Photoshop (the premier tool, great for larger, more involved projects)
    • Adobe Fireworks (great for quick and easy photo editing for web)
  • PowerPoint Conversion
    • Articulate
    • Adobe Captivate (although PPT conversion is not its primary function)
    • Adobe Presenter
    • ProForm
  • Screen Video/Capture
    • Adobe Captivate
    • Camtasia
    • Snag-It
    • CamStudio (free software)
    • ProForm
  • SCORM Content Shells
    • Captivate
    • Articulate
    • ProForm/Unison
    • CourseBuilder – Dreamweaver
    • Lectora

Be diverse in your use of these tools, and use many simultaneously. E.g.:

Using Articulate as your PowerPoint conversion tool, you can then incorporate Flash, Quizzing/SCORM, Graphics/Audio, HTML

Using Articulate as your PowerPoint conversion tool, you can then incorporate Flash, Quizzing/SCORM, Graphics/Audio, HTML

Same principles apply whatever tool(s) you’re using. In fact, replace “Articulate” with “Captivate,” and this graphic still holds true.

Good tip: Record demos from your SMEs, both video and audio. Capture as much of these brain-dumps as you can (Even profanity. An SME’s profanity will almost always translate into a point of caution that your learners need to be warned about–tactfully.)

Tips for choosing an LMS:

  • Does it match your business?
  • Will the vendor support you?
  • Do you have access to all your data?
  • Again: Will the LMS provider support you?

Next Session:

Quick Prototyping Techniques

with Nick Floro (@nickfloro)

nickfloro

It’s all about communication and problem solving.

Use prototypes to help customers understand what it is you are trying to do.

Questions to ask:

  • What is the goal?
  • What are the learning objectives?
  • What is the time table?
  • Does content exist?
  • Who is the audience?
  • What current technology (if any) is in place?
  • What type of delivery method is required?
  1. Begin with sketching. In his office at SealWorks, Nick uses a Fujitsu SnapScan, which scans his sketches into PDF, and recognizes & converts handwritten text into type.
  2. Then move on to wireframing. Nick puts his wireframes into PDF format, with Adobe Acrobat Pro. By dragging worked out JPEGs into Acrobat, and in multi-page prototypes, using the note tool (note tool), simulates linking from page to page.
  3. Brainstorming:
    1. Quantity, not quality
    2. Have toys and candy on hand to get creativity flowing
    3. Everyone is an equal
    4. Limit sessions to 1 hour
    5. Get everyone to focus
    6. Break and flow
  4. Selecting tools – key is to be compliant with client’s requirement.

Great tip: For design purposes, carry a camera (digital or on your cell phone) with you wherever you go. You never know when you’ll be inspired.

-

To check out Nick’s slides (including his slides from other sessions which I wasn’t able to attend–I’ve heard nonstop praise for his “Social Media Demystified” session) go to http://www.slideshare.net/nickfloro

Last session of the day and of the (*sniffle) conference:

Interactive Branching Simulations in Flash

with Nigel Dobereiner

nigel

The Value of Simulation

  • Why simulation? – Adult learners want to solve problems; be challenged.
  • What’s the value? – Makes for more enjoyable learning and better information retention.

Instructional Design

  • Think of interaction as quizzes (posing questions as statements of need)
  • Think of customer statements as questions based on learning objectives
  • Create convincing distracters
  • Work with SMEs who have experienced the simulation targets

Video Recording

  • Overacting is actually prefered in simulations
  • Keep talent movement to a minimum
  • Convert videos to .FLV (deinterlaced, high bandwidth/small img size)

Putting it All Together in Flash

  • Use external assets to simplify updates and reuse sections of code
  • Code*:

stop();

var netConnect:NetConnection = new NetConnection();

netConnect.connect(null);

var netStream:NetStream = new NetStream(netConnect);

yourVideoInstance.attachVideo(netStream);

netStream.play(“yourFLV.flv”);

*Code given is in ActionScript 2.0 (not 3.0)

Selling it to Your Customer

  • Remember the values from before
    • Increased retention
    • Greater usage
    • Better mastery of material

Learning + Simulation = Better Learning

My Closing Remarks

First and foremost, thanks for reading. I hope these few posts were able to do justice (as much as is possible) to the quality of the conference. I also hope you found it worthwhile and insightful. I was impressed with every single session I attended. It has been a remarkable experience. A BIG SHOUTOUT and thank you to Rapid Intake (http://www.rapidintake.com/) for the great work and effort they put into the conference. As you can tell, they picked an incredibly far reaching range of speakers, experts and presenters. They do also have another conference coming up in October, which will be an all-application, hands on conference titled: “BYOL” (Bring Your Own Laptop). Check that out at: http://elearning.byol.com/

Finally, a great many thanks to all the incredible people here at eLearningDevCon! It has been a pleasure meeting so many experienced and accomplished professionals. As great as all the sessions were, the opportunity to have met the people I’ve met here at the conference was the best part of the entire experience.

I hope to see you all again very soon.

As always, do share with us your thoughts, comments, reflections. A conversation this good should keep on going…

-Padawan

There is no magic bullet. No one tool does it all. E-learning professionals have to amass a repertoire of tools, and use some of them in conjunction to tackle each assignment.

Question to ask before beginning any eLearning project:
What is your skill set?
What is your team’s skill set?
Select your tool(s) in accordance with your answers to these questions.

SUPERNOVA Web Traffic

SUPERNOVA is Powered by

Powered by Wordpress
Powered by iThemes
Powered by FeedBurner