Category: Technology

Wireframing and Interface Design with MockUp for Mac/PC/Linux and SketchyPad for iPad #lrnchat

Balsamiq’s Mockup

If you are looking for a easy and quick way to start designing UI’s without creating your own templates, check out MockUp. We’ve been using it the last couple of weeks and after using several tools over the last dozen years its a refreshing way to start to design layouts and work with various elements from the built in object library.

Balsamiq’s Mockup for Desktop $79 (Windows, Linux, Mac Desktop app)

Pastedgraphic-1

SketchApp
A great little app for the iPad for reviewing ideas and wireframes or interactive sessions with the team to design interfaces and content layout. You can also export to XML for use in MockUp. Learn more at http://itunes.apple.com/us/app/sketchypad/id372049989?mt=8

Demo of how it works:
[youtube http://www.youtube.com/watch?v=nbyxzYb9q08?wmode=transparent]

MytubeIphoneexamplesWiki

Pastedgraphic-2Pastedgraphic-3

Learning about HTML 5 – five additional features I forgot to mention #lrnchat

Two additional items which makes HTML 5 exciting are:

 

Forms – you’ll now be able to use built in functions to auto-check information and create sliders, controls or event auto calendars instead of creating from scratch in current implementations. Another great use will be for verifying a email address, instead of creating custom code their will be the built in ability to check to see if the field is formatted properly.

 

CSS3 – has some amazing new features and formats for embedding fonts to give you more control of the design as well as adding rounded corner buttons or objects so we don’t need to use several small graphics in the design to create the illusion of rounded corners.

 

Animation – using the new canvas format and javascript features there are plenty of new animated techniques that can be utilized with content, whether to reveal a part of a page or have a graphic appear on screen. This defer greatly in the current implementations of the latest browsers but as we move forward we’ll see more consistency within them.

 

Content Editable – this offers the ability for the user to easily edit content on screen and provides a easy way to view and edit. Check out the example at:
http://html5demos.com/contenteditable

 

Drag & Drop – provides a easy way to create drag and drop interactions whether for exercises or manipulating content. Example at: http://html5demos.com/drag

 

HTML 5 – What does it mean to me? #elearning #web development #creative #lrnchat

HTML 5 is a major step forward for the web and the ability for developers to create the next generation of tools and applications for users. There’s been a lot of talk over the last couple of weeks with Adobe and Apple and I think there is a lot of confusion out there so I hope this assists in clarifying what it will mean to you. 
Overview
HTML 5 is a open standard that is still in development but the major browsers FireFox, Safari, Chrome and Opera have jumped in to support it. While the standards are still being developed there are features that are common among them and over the next several months we’ll see improved support as updates come quick from the browsers. You’ll notice one browser is missing, did you catch it? Microsoft announced a beta version of Internet Explorer at the Mix conference earlier this year. You can download the latest rev at: http://www.ietestdrive.com/

Does HTML 5 replace Flash?
HTML 5 is not designed as a replacement for Flash but does provide new tags for directly dropping in audio and video without 3rd party plug-ins. This is a huge improvement and makes it easier for content developers to deliver their content to users. A great example of this is how YouTube can be currently viewed in HTML 5 or via Flash and HTML 4. 

HTML 5 also supports animation, vector graphics and several new standards which overlap with Flash and would strongly be considered before using Flash because of their ease of integration and delivery within the browser. Flash will not go away but will continue to grow and be used as a language for delivering content and interactive experiences and applications.

This provides developers with additional tools to have users interact with content, information and improve web based applications.

HTML 5 brings 4 major improvements to the browser:


1. Graphics – improve graphics and animation support without additional codecs within the browser


2. Location – create an API for being able to show where you currently located or what is around you for mobile devices


3. Storage – ability to store offline locally within the browser data so that you do not have to have a constant connection to a site


4. Speed – improve browser speed in working with content, running scripts in the background and improving user experience

The HTML 5 committee wants to insure:

1. Support Existing Content so whatever was created in the past will still continue to work


2. Insure Interoperability between browsers and technologies so that it would be easier to create apps. 


3. Support of Standards – these are still being developed but they are off to a great start, explained below. Hopefully the major browsers will see this the same way. For example, when you shop for a car, its standard for a car to come with wheels and brakes.

Pastedgraphic-9


4. Improved Error Handling – when a browser encounters a error, instead of crashing the browser, a dialog box will appear asking you if want to continue or stop the action. 


5, Evolve, not recreate what we already have – which translates to not just creating new standards for the sake of it, they want to focus on building and developing standards that will improve the language and improve developers as well as viewers experience with the web.

There are 5 major areas that you can start to play with and take advantage of the technology today.

Pastedgraphic-3

1. Canvas & SVG
HTML 5 includes support for two new graphic formats:


Scalable Vector Graphics – SVG
– this allows you to embed Illustrator graphics/content or EPS files in the SVG format and directly support it via the browser. Because of the vector format, these graphics are scalable, look great and appear to the user as a rendered JPEG. This means you can use one product or company logo and instead of saving in multiple files and sizes you are able to use one SVG graphic and resize via code without additional file size or graphics to maintain or load on the users browser. 


Canvas API – provides a new way to deliver graphics and animation via the browser with interactivity. Examples:

First Person Gifter – in this example you walk around a maze using the arrow keys on your keyboard. Notice the alpha channel on the flowers as you move around. Excuse my collisions with the walls. 

Canvas and SVG are currently supported in: 

Pastedgraphic-1

Pastedgraphic-4

2. Video
Currently when we think of video playback on the web we think of Flash as our major delivery technology. HTML 5 introduces a new tag for directly embedding video onto a page just like we include a graphic currently.

// HTML 5 makes <video> as easy as <img>
versus a Flash embed:

Pastedgraphic-5

Currently there are two main codes competing, H264 supported by Apple and Chrome and OGG Theora supported by Chrome, FireFox and Opera. Interesting tidbit – OGG Theora codec was named after Theora Jones, Edison Carter’s Controller on the Max Headroom television program.OGG was released into the open source community by On2 Technologies which was acquired by Google late last year. Google is suppose to announce a newer version of the On2 codecs. Steve Jobs made a comment last week that the OGG codec has issues with licensing and patents just as the H264 has. Currently, from what I’ve read the H264 content is ok to use until 2015 when licensing could become a issue again. 

H264 is supported by all major video technologies and what’s nice for video content developers is that the same compressed video can be supported via Flash and HTML 5 so you can have one video running in both environments and not have to compress multiple versions.

QuickTime supports the export of H264 easily and you can export to OGG via a free add-on to QuickTime at http://xiph.org/quicktime/download.html.

Another great feature HTML 5 video is going to support is the ability to click anywhere within a download stream, prior to it being cached which will provide a nice way for viewers to jump around in video content and cache from the point that they want to view.

Video tag currently supported in: 

Pastedgraphic-6

3. Geolocation API
The geolocation api brings browser based location to applications. This will allow you, while viewing browser content and a map to show your current location on it or while walking down the street you can search for a restaurant or based on your interest in eating lunch your phone or mobile devices shows you several stores or locations on a map.

Example: http://htmlfive.appspot.com/static/whereami.html

Geolocation currently supported in: 
 (currently mobile safari only supported)

Pastedgraphic-7

4. App Cache and local database storage provides a way for users that are viewing or working with content to continue while offline. This will allow developers to sync or move data to the local side, allow the user to edit and then automatically upload once an internet connection is available.

App cache and local database currently supported in: 

Pastedgraphic-8

Web workers defines an API for running background scripts.

Web workers currently supported in: 

How do I get Started?

http://www.html5doctor.com 

Great place to learn about and get started with HTML 5

http://www.caniuse.com/ 

To learn about what works in each browser, a great resource

http://www.html5demos.com

Resource for examples and how to’s

http://html5gallery.com/

See mainstream examples of sites using HTML 5 today

http://www.css3.info

Learn about CSS 3

http://www.kesiev.com/akihabara/

A 2D gaming engine for HTML 5

There are also javascript libraries that you can use today to test if the browser is compliant and if not switch to an alternate version of the content or page based on the browser.

Looking Ahead
With the latest from Apple and Google building upon the webkit browser, the future looks great for developers and users to get the best in content delivery. Blackberry also announced last month that their OS 6 releasing this summer will be built on the Webkit browser as well so look for consistency there now as well.

Hope that helps you get started and gets you thinking about how to incorporate into your next project!

Fujitsu SnapScan: Great Scanner for meetings, notes, documents and sharing information

If you are looking for a great way to get organized, check out the great sheet fed scanners from Fujitsu. I’ve had the SnapScan model for about 3+ years now and love it. It’s a great way to take notes that you have from a meeting, scan them and get a instant pdf, sketches for a wireframe or interface, or documents that you want to keep handy for a future use.

For the mac, they have the M series which works great with OS X and you can hit a button on the scanner and seconds later you have a PDF of your documents. You can easily e-mail or reprint later and the speed is amazing. 

Here’s an example of some notes that I took on a wireframe and then shared with my team, it speeds up the whole process.

Pastedgraphic

Fujitsu ScanSnap S1500M $425

0pastedgraphic

ScanSnap S300M $240

1pastedgraphic

iPhone Apps I’m using currently and can’t live without…

Besides

Pastedgraphic

 email, 

0pastedgraphic

safari, 

1pastedgraphic

phone, 

2pastedgraphic

Messages, 

3pastedgraphic

Calendar  and

4pastedgraphic

 ipod which I use all day and night, its a part of me, some other tools I use daily:

5pastedgraphic

Things – a great to do list manager that works and syncs with the desktop app or works independently.

6pastedgraphic

Now Playing – my favorite app for checking movie times whereever I’m at

7pastedgraphic

AIM – for connecting while on the road with my team

8pastedgraphic

Tweetie for twitter

9pastedgraphic

 Top Floor for highrise access on the road

10pastedgraphic

 GroundWork for basecamp access on the road

11pastedgraphic

Facebook keeping in touch with friends and family

12pastedgraphic

 QucikOffice for working with Word, Excel, and PowerPoint files and editing them

13pastedgraphic

Shopper for managing my shopping lists

14pastedgraphic

1Password for your Mac and iPhone to track ids/passwords for your accoutns

15pastedgraphic

 Amazon Mobile for ordering or checking reviews on products, amazing example of how an app can be used with web data

16pastedgraphic

 Are My Sites Up – for monitoring web site status

17pastedgraphic

Sportstacular for tracking my favorite sports teams and upcoming schedule

18pastedgraphic

Jaadu VNC for accessing machines on the network

19pastedgraphic

Webex Meet for participating in Webex on the road

20pastedgraphic

Ego – track Twitter followers and GoogleStats

21pastedgraphic

 Photos for quick presentations, save your presentation as a series of images, great for a quick 1 on 1 presentation or review with a client

E3: Project Natal – First Product that utilizes the technology: Meet Milo

Milo is a new product by Lionhead Studios, using the Natal technology, he can recognize you and your emotions. Notice about 3 minutes in where Clare draws on a paper and waves it in front of the TV and Milo understands what’s on the paper. Just imagine if we get browser and flash support how we can utilize this for learning! If you have not watched the Project Natal video click here: E3: Microsoft Project Natal – Look’s Amazing. Controller free interaction, voice control, 3d imaging and sensing emotions.

Trying to grab a fish

Drawing a picture:

Places paper in front of bar and paper appears on screen and Milo recognizes shape.

Watch the full video:

E3: Microsoft Project Natal – Look’s Amazing. Controller free interaction, voice control, 3d imaging and sensing emotions.

Microsoft demonstrates a new piece of hardware, shipping in 2010 (no official shipping date), looks amazing and introduces several innovative technologies to consumers. For a small investment you get a controller-free interface to basically use your body for interacting and diving into game play. You also get 3D imaging and voice control and from the demonstration this will have a incredible impact on game play and interacting with your tv.

Believe it or Not: 

http://www.gametrailers.com/video/e3-09-lionhead-milo/50016

Sony demonstrates the PS3 Motion Controller.

Pastedgraphic0pastedgraphic

Games & Simulations in Learning: Some thoughts and a Great Deal on the Wii

During my presentations on Games & Simulations, I encourage the audience to be sure to go out and play and try the different types of games and environments that are out there. This is a key for you to understand the different types of games and options that you can incorporate into the training content that you may be developing. One of the most fun consoles out there is the Wii because of its innovate interaction with the game and the ability to have multiplayers at the same time jumping and moving to achieve a specific goal. This is especially a great console for home’s with families and it gives you an excuse to do your homework and have some fun with the kids or your spouse.

When we think of gaming we typically visualize the gamer below. In fact in the gaming generation (anyone born after 1980) 43% of the gamers are females and 26% continue over the age of 18. By the times these students graduate college they have over 10,000 hours of logged game play.

Pastedgraphic
In this age of technology, where kids and adults have such easy access to information and technology we need to continue to innovate, capitalize and integrate these concepts into our training in order to deliver training in new ways.

0pastedgraphic

Those of you that want to do your homework before meeting with me again, you can now get a Wii at Dell for $212.49. A great deal. 

The deal was found via Dealnews.com, a great resource for saving money on technology and other things we need: 
http://dealnews.com/Nintendo-Wii-Game-Console-for-212-free-shipping/298282.html Dell Home has the Nintendo Wii Game Console for $249.99 with free shipping. Apply coupon code “65G7RQ11J?M2LH” and it falls to $212.49. That’s one of the few times we’ve seen the Wii for below list price. Sales tax is added where applicable. It includes the Wii console, Wii Remote Controller, Wii Nunchuk Controller, and Wii Sports. Coupon ends July 31.



Apple Certified Refurbished – Great Deals

With the current economy you may be looking for opportunities to cut costs but you may still need to purchase a new computer. Apple offers the latest and previous generation computers via their refurbished section where you can save $100 – $300 off the original price. The purchase comes with a full 1 year warranty and after getting several machines via this discount the only difference I’ve seen is that the machine is delivered in brown recycled box typically. Take a look the next time you are looking to add a new laptop or workstation. Some of the specials currently include:

A

Macbook White 2.1 – 2.4ghz $849 – $999

0a

 iMac 20-inch 2.0ghz – $949

1a

 Macbook 2.0ghz $1,099

Check out at the latest: http://tinyurl.com/6f5lza

Mosso: Hosting and Deploying Web Servers Quickly

If you are a web developer or manage several sites, Mosso is a great hosted solution for $100 per month you can setup as many sites, urls and manage them independently. It allows for easy web-based management if you want to offer to your teams or clients and you can setup individual pricing or offer as part of your package.

 The service allows you to quickly deploy a new url and have a server setup within an hour. They offer dns, email and ftp support as well as configurations with MYSQL, Linux, or Windows and you can switch post launch with a couple clicks on the management site. The email service, offers pop3, smtp as well as a webmail service and spam filtering which you can control for each domain.

 They also offer a cloud service now, which we are in the process of testing, similar to Amazon’s service and they utilize Limelight’s network. If you are dealing with lots of video or large files it worth giving it a try to improve download speeds for your audience.

 We’ve been using them for about a year now and have deployed dozens of sites. Strongly recommend. They are also owned by Rackspace. Learn more at http://www.mosso.com/

Pastedgraphic