Category: Technology

DevLearn Session: Compressing Media for Mobile and Desktop Delivery with HTML5

DevLearn14 Session | A comprehensive introduction to video and audio compression, you’ll learn the best delivery standards for optimizing content delivery to mobile and desktop devices; the session will provide an overview of everything you need to know about editing, preparing, and delivering the highest-quality video and audio to your audience. We’ll discuss techniques and interactivity that can be added, as well as the latest standards and how you can take advantage of open-source, free compression tools, as well as the latest applications for getting the smallest file sizes and the highest quality.

Join me on 6/4 for a free educational webinar on Thinking Mobile Learning First

Whether you are developing a new course, selecting a new LMS or thinking about developing a mobile app you’ll need to understand what’s involved in designing and delivering content on mobile devices from smartphones to tablets to hybrids, this webinar will provide a overview of what you need to define, how to sketch out concepts, prototyping and testing your ideas and then how to deliver. You’ll learn about apps vs web apps and understand which works best.

The webinar topics cover:

    Understanding Mobile technology and how to take advantage of it
    Analyzing your audience and how they are accessing your content
    3 Major types of Apps, how you can use them in learning and looking beyond them
    Prototyping tips and techniques from paper to functional prototypes
    Several App and Course examples under the microscope

Register:
http://www.trainingmagnetwork.com/welcome/nick_floro_jun4

Adding a AppleTV – Why you may want one, especially if you are thinking about a iPad #edhcat, #lrnchat

 

Using AirPlay Mirroring for iPad 2nd and 3rd generation and Mountain Lion

Wow your audience in the conference room, classroom, or living room. AirPlay supports video mirroring. Which means you can wirelessly — and securely — stream whatever’s on your iPad 2, 3 or on you Mountain Lion Mac  to your HDTV via Apple TV. Everyone in the room sees exactly what’s on your display up there on the big screen.


Airplay2
Connecting a Mac for Mirroring or Extended Desktops
If you are using a newer Mac, purchased in the past 18 months, chances are you have what it takes (processor wise) to take advantage of mirroring via AppleTV as well. This is great, because its wireless and allows you instantly share whatever’s on your mac desktop. Whether you’re working with a team to design, working together on a presentation or just want to share something the family its easy to turn on or off and take advantage of this great feature. If you have a older Mac checkout AirParrot which will work with Lion or Snow Leopard and older macs.

You can also use your mac in extended display so you can move content and windows between your built-in screen and the big TV. Works great for wireframing, presentations and design. We replaced our conference room projector last year with a 46″ LED TV and added the Apple TV and couldn’t be happier. You can also get a direct cable connection from your laptop to the TV if you want to just take advantage of the extra screen and skip the extra peripheral.

 

Whatis_gallery_slide120100901
Size
The AppleTv is a small device that easily sits next to your TV and for $99, it will extend your capabilities. You can also locate it on sale, during the year for as low as $89 via third party resellers.
Bonus: If you have a Netflix account you can easily stream content or rentals or programs you have purchased via the iTunes.
Topnav_netflix20110308
Connections: Couldn’t be Easier
Just plug in the power cord and hdmi cable to your tv and your up and running. After it boots up, select a wireless router and your set.

 

Whatis_gallery_slide220100901
Learn More:

Lego’s Life of George interacts with the iOS platform – very cool Augmented Reality

Life of George includes both a building game mode with single and 2 player mode, as well as creation mode where you design and capture your own models. In the building game you receive challenges on your iPhone/iPod Touch that you build with real LEGO bricks. In the 2 player mode you can challenge a friend and compete on 5 different models to see who builds the fastest. There are various difficulty levels determined by the models and the time setting you choose (easy or hard).

Expecting one from Santa, will report after I, I mean the little one gets to play with it.

Learn more at:
http://george.lego.com/

Order at:
http://shop.lego.com/en-US/Life-of-George-21200?CMP=EMC-SH2011_Oct_LifeofGeorge_US&HQS=Hero_CTA&RRID=1234232&RMID=SAH_2011_10_Life_of_George_PR_US

Microsoft builds HTML5 based demo of Windows Phone 7.5 – worth a look

You can check out via a Android or iOS based product at:

 

 

If you try via the desktop you get a unsupported message: (not sure why? I guess they want you to experience the touch concept…which is silly since I would think their main target would be users who don’t already have a Android or iOS based product.

 

Pastedgraphic-1

 

 

I test drove it on the iPad in landscape mode and it tells you to flip it to portrait. This is done via CSS and can be tested as shown.
Pastedgraphic-2

 

Flipped into portrait mode and got started, here’s some sample. Nicely done Microsoft.

 

If you are on the road doing presentations, training, reviews or meetings this is a great portable screen to carry with you.

This is a great portable projector screen, Epson ES1000 Ultra Portable Tabletop Projector Screen, that collapses so that it’s easy to carry and take with you to your next stop. Super handy if you are heading to a meeting and if you are not sure if the conference room will have a screen this is the perfect device to help you project smoothly. Pricing runs typically around $99.

 

Amazon: http://goo.gl/7Fria

Laptop + 1 external screen = great. Laptop + 2 screens even better.

Adding a second screen to your laptop or workstation provides a great way to increase productivity. It allows you to spread out your windows and take advantage of all of the real estate. If you are using a laptop and you want to add a 3rd screen I found a nice external usb adapter from Arkview which runs about $80 and allows you to plug in a DVI monitor or VGA using one of the adapters. The screen resolution works great but the screen does refresh slower so its not idea for production but if you need a extra screen for email, browsing or other non-motion window it works great. 

Mac, Windows and Linux drivers available.

Learn more at:

Great app for the iPad – Apollo News, lets you keep informed with the latest news.

If you are looking for a easy way to keep up with the news, science, technology, sports, and entertainment check out the new Apollo News app for the iPad. It automatically pulls in the latest news and you can give it a thumbs up or down on an article and it will customize the content as your provide feedback.

The app is similar in design to Pulse News which is a great way to keep on RSS feeds that you enter. I prefer the interaction on Apollo News for Quick Viewing an article and navigating from the dashboard to the article and back.


Blurry video with annoying music but still a great app for $2.99 -turn volume off first (I warned you if you didn’t.

[youtube http://www.youtube.com/watch?v=Cqlu-kWAcHA?wmode=transparent]

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!