# Tuesday, December 31, 2013
This week's app is actually a set of apps.

In honor of all the college football bowl games this week and of conference basketball starting, I am featuring a set of college fight song apps created by Wireless Developer, Inc. of East Lansing, MI.

Normally, these apps sell for about $10 each; However, Wireless Developer is working with Microsoft to offer the first 100 downloads of each app for free. Act quickly because each app will return to its original price as soon as 100 people download it.

The links for each app are below. Surprisingly, the company’s hometown team and Big Ten Champions (and my alma mater) Michigan State is not included. Hopefully, this will be corrected soon.

College Fight Songs - Penn State Nittany Lions Album App

College Fight Songs - Virginia Tech Hokies Album App

College Fight Songs - Oklahoma Sooners Album App

 College Fight Songs - Wisconsin Badgers Album App

College Fight Songs - Nebraska Cornhuskers Album App

College Fight Songs - Texas Longhorns Album App

College Fight Songs - North Carolina Tar Heels Album App

College Fight Songs - Iowa State Cyclones Album App

College Fight Songs - USC Trojans Album App

College Fight Songs - Georgia Tech Yellow Jackets Album App

College Fight Songs - South Carolina Gamecocks Album App

College Fight Songs - Dayton Flyers Album App

College Fight Songs - Arkansas Razorbacks® Album App

College Fight Songs - Tennessee VOLS Album App

College Fight Songs - Texas Tech Red Raiders™ Album App

College Fight Songs - Syracuse Album App

College Fight Songs - Boston College Eagles® Album App

College Fight Songs - Clark Atlanta Panthers Album App

College Fight Songs - Colorado Buffaloes® Album App

College Fight Songs - East Carolina Pirates Album App

College Fight Songs - Fresno State Album App

College Fight Songs - Illinois Fighting Illini Album App

College Fight Songs - Indiana Hoosiers Album App

College Fight Songs - Maryland Terps® Album App

College Fight Songs - Memphis Tigers Album App

College Fight Songs - Miami Hurricanes Album App

College Fight Songs - Miami Red Hawks Album App

College Fight Songs - Ole Miss Rebels Album App

College Fight Songs - Pitt Panthers Album App

College Fight Songs - Purdue Boilermakers Album App

College Fight Songs - Toledo Rockets™ Album App

College Fight Songs - University of Massachusetts Minuteman Album App

College Fight Songs - Vanderbilt Commodores Album App

College Fight Songs - Villanova Wildcats™ Album App

College Fight Songs - Virginia Cavaliers® Album App

College Fight Songs - Wake Forest Demon Deacons Album App

College Fight Songs - Washington Huskies® Album App

College Fight Songs - Western Michigan Broncos Album App

Update: The following apps are still available but are no longer free:

College Fight Songs - Alabama Crimson Tide Album App

College Fight Songs - Ohio State Buckeyes Album App

College Fight Songs - LSU Tigers Album App

College Fight Songs - Texas A&M Aggies Album App

College Fight Songs - Clemson Tigers Album App

College Fight Songs - Arizona Wildcats® Album App

College Fight Songs - Kentucky Wildcats Album App

Tuesday, December 31, 2013 2:37:40 PM (GMT Standard Time, UTC+00:00)
# Monday, December 30, 2013
Monday, December 30, 2013 5:31:02 PM (GMT Standard Time, UTC+00:00)

12/29
Today I am grateful for a day in East Lansing with my son Tim.

12/28
Today I am grateful that I've been able this month to get rid of so much of the junk I've acquired these past 10 years.

12/27
Today I am grateful that 4 of my apps were approved by the Windows Store this morning.

12/26
Today I am grateful for Christmas dinner at my sister's house, surrounded by my family.

12/25
Today I am grateful that God loved us enough to send us his only son. Blessed Christmas, my friends.

12/24
Today I am grateful that my friend John, from whom I hadn't heard in years, called me out of the blue yesterday for no reason. We talked for over an hour.

12/23
Today I am grateful that the ice storm that paralyzed much of the state missed my neighborhood.

12/22
"Why were you late tonight, son?" "On my way here, I saw a woman begging on the side of the road. She was standing in the freezing rain with no jacket. So I went home and picked up my old jacket and drove it back to give it to her." "OK, I guess that's a pretty good excuse." That is what I am grateful for today.

12/21
Today I am grateful to have both my sons home for the holiday season.

12/20
Today I am grateful for the opportunity last night to speak at my first Demo Camp Lansing.

12/19
Today I am grateful for pizza, drinks, and fellowship at the #MIGANG Holiday Party last night.

12/18
Today I am grateful to have my son Tim home for a few weeks. It was totally worth driving 13 hours through a snowstorm yesterday to pick him up.

12/17
Today I am grateful my latest app was accepted in the Windows store.

12/16
Today I am grateful for all the stuff I sold on eBay last week, removing clutter and providing me with Christmas cash.

12/15
Today I am grateful to all those who braved the snowstorm yesterday to build apps with us at the DevUnleashed Hackathon.

12/13
Today I am grateful that: 1. I was invited to 2 holiday parties hosted by 2 great organizations in Toledo - Seed Co-Working and TechToledo 2. I ran into some old colleagues I did not expect to see again. 3. Lunch with my old team at Heidtman - one of the best teams I've ever been on.

12/12
Today I am grateful for the blanket of snow surrounding my house on this sunny day.

12/11
Today I am grateful for a break in my 500-mile round-trip commute until next year.

12/10
Today I am grateful for dinner last night with old friends and for the chance to meet a few new, very interesting people.

12/9
Today I am grateful that I had the chance this weekend to apologize personally for a mistake I made years ago.

12/8
Today I am grateful for: 1. A Spartan victory, a BIG10 Championship, and a trip to the Rose Bowl 2. Being able to attend the championship game last night - one of the most exciting games I've ever seen. 3. Watching the game with my son Tim and my friends Bryan, Patrick, and John. 4. Running into old friends Debora, David, and Sue and sharing a post-game drink with them. 5. John finding us a reasonably-priced hotel room for the weekend. 6. Being able to make it back to the hotel safely after driving hundreds of miles throughout the night.

12/7
Today I am grateful that I missed the storms in southern Indiana while driving last night.

12/6
Today I am grateful I was able to find a reasonably-priced hotel in downtown Chicago.

12/5
Today I am grateful for the kindness and hospitality of Pat Patrick Affholter and their wife who opened his home to me, saving me a lot of late-night/early-morning driving.

12/3
Today I am grateful for the warm reception the um Design + Business group gave to this Spartan last night as I taught them about Data Visualization.

12/2
Today I am grateful to the team that created Doctor Who and to those who recommended this excellent show to me.

12/1
Today I am grateful for 1. A chance to spend so much time this week with my son Timmy, who was home from college on Thanksgiving break. 2. Dinner last night with my friend Bryan. 3. Another Spartan victory.

11/30
Today I am grateful for a day in East Lansing, meeting many old friends and dinner with Darlene and her family.

11/29
Today I am grateful for 1. Thanksgiving dinner with my family. 2. My cousin Kevin Gill deciding to spend Thanksgiving with my mother in Florida.

Monday, December 30, 2013 1:55:18 AM (GMT Standard Time, UTC+00:00)
# Wednesday, December 25, 2013

Leap2 is a search tool that allows users to enter a search word or words and submit that search across multiple places simultaneously. Results are returned from Internet search engines as well as a number of social media sites, such as Twitter, Facebook, and LinkedIn. I was surprised how quickly this cross-domain search was able to return results.

One powerful feature of Leap2 is the ability to set “Alerts”, so that Leap2 searches for something and lets you know when it finds it via an updated tile on the Windows 8 home screen.

You can download Leap2 at aka.ms/Ntmt6u

If you have written or know of a Windows 8 app you would like to see featured here, please contact me at dgiard@microsoft.com.

Wednesday, December 25, 2013 6:55:00 AM (GMT Standard Time, UTC+00:00)
# Tuesday, December 24, 2013

Some apps are only relevant for a short time and this is one of them. Click the radar icon in the bottom right corner and Where Is Santa sweeps the map of the Earth showing Santa Claus’s current location. On nights other than Christmas Eve, the app will notify you what Santa is doing while at the North Pole.

Click the top-right “My Home” icon and the app will zoom to your home and let you know how long you have to wait for St. Nick’s arrival.

You can download this app at Where is Santa? There is also a Windows Phone version available at Where is Santa?.

If you have written or know of a Windows 8 app you would like to see featured here, please contact me at dgiard@microsoft.com.

Tuesday, December 24, 2013 6:43:00 PM (GMT Standard Time, UTC+00:00)
# Monday, December 23, 2013
Monday, December 23, 2013 5:24:42 PM (GMT Standard Time, UTC+00:00)
# Tuesday, December 17, 2013

Leap2 is a search tool that allows users to enter a search word or words and submit that search across multiple places simultaneously. Results are returned from Internet search engines as well as a number of social media sites, such as Twitter, Facebook, and LinkedIn. I was surprised how quickly this cross-domain search was able to return results.

One powerful feature of Leap2 is the ability to set “Alerts”, so that Leap2 searches for something and lets you know when it finds it via an updated tile on the Windows 8 home screen.

You can download Leap2 at aka.ms/Ntmt6u

If you have written or know of a Windows 8 app you would like to see featured here, please contact me at dgiard@microsoft.com.

Tuesday, December 17, 2013 4:03:00 PM (GMT Standard Time, UTC+00:00)
# Monday, December 16, 2013

Episode 296

Ward Bell on Breeze

Monday, December 16, 2013 10:58:00 PM (GMT Standard Time, UTC+00:00)
# Friday, December 13, 2013
Friday, December 13, 2013 5:14:29 PM (GMT Standard Time, UTC+00:00)
# Thursday, December 12, 2013

HTML5 provides a number of new APIs that developers can call from client-side JavaScript. We will review a few of them here.

DETECTING BROWSER CAPABILITIES

Not every browser supports every new API. If you attempt to call an API not supported by the current, browser, the browser is likely to throw an exception, which could be a bad experience for your users. For Internet apps, it’s best to test if a feature is supported before calling it. Ideally, you should find an alternate way to provide similar functionality for unsupported browsers. At a minimum, though, your application should not crash.

In any event, the first step is figuring out whether the current browser supports the feature you are interested in. For HTML5 API features, the Modernizr library is a good tool to do this. You can download the latest Modernizr script from http://modernizr.com/ and you can use it in your web page by adding a script tag, pointing to the location on your server where you save the modernizer JavaScript file,  as in the example below

<script src="/scripts/modernizr-2.5.1.js"></script> 

The script tag above must appear before any script you write that uses modernizr. The script above creates an object named “Modernizr” and that object contains a lot of Boolean properties, each corresponding to an HTML5 feature and each returning true only if that feature is supported in the current browser.

For example, Modernizr.canvas returns true if the current browser supports the <Canvas> tag and its associated APIs. In practice, you can write code like the following to avoid JavaScript errors

if (!Modernizr.canvas){
    // Code that uses the CANVAS APISs
}
else {
    // Alternate code for older browsers
} 

SELECTING ELEMENTS

HTML5 now provides more ways to select elements than the traditional document.getElementById()

Now, you can pass the name of a class to document.getElementsByClassName () to return a set of all elements to which the class is applied.

Also, document.querySelector and document.querySelectorAll allow accept a CSS selector, such as “#Div1” as an argument and return matching elements. The difference between the two methods is that querySelector returns the first match, while querySelectorAll returns the set of all matching elements.

You can even chain together these For example, you can do the following to select all spans with the class “MyClass”:

var x1 = document.querySelectorAll (".MyClass");  

var x2 = x1.querySelectorAll ("span");  

CANVAS

The <canvas> tag allows you to create and manipulate images on a drawing surface. The advantage of the canvas is that you get control of these images down to the pixel level. The disadvantage is that you get control of the images down to the pixel level, which can be a lot of work.

To begin using this tool, add a <canvas> tag to your markup and set appropriate properties, such as width, height, style, and id.  A canvas is simply a container for drawing objects. You will need to use JavaScript to draw objects onto its surface.

The key to working with a canvas object in JavaScript is to get a reference to the canvas’s Context. The code below gets this reference. Similar code appears in every canvas-manipulating script I write:

<script>
 var canvas = document.getElementById("MyCanvas");
 var ctx = canvas.getContext("2d");
</script> 

Once you have a reference to the canvas’s context (the ctx variable, in the example above), you can use this cccccontext to draw shapes on the canvas.

  • beginPath(): Resets the current path. Necessary if you have been using the context object to draw something and now want to begin drawing something new.
    moveTo(): Move the current postion to a given x,y position in order to begin drawing from there
    lineTo(): Draw a line from the current position to a new position
    fill(): Complete a 2-dimensional shape (if not already complete) and fill it in with the current fill color and style
    fillRect(): Draw a rectangle and fill it with color
    arc()    Draw a curve

Below are several examples of using JavaScript drawing and filling simple shapes on a canvas with the id of “MyCanvas”.

JavaScript to draw a triangle on a canvas

var canvas = document.getElementById("MyCanvas");
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(75, 100);
ctx.lineTo(25, 100);
ctx.fill(); 

JavaScript to Draw and fill a rectangle on a canvas

var canvas = document.getElementById("MyCanvas");
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "rgb(500,0,0)"; 
ctx.fillRect(25, 150, 150, 100); 

JavaScript to Draw a circle on a canvas

var canvas = document.getElementById("MyCanvas");
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(125,375,100,0,2*Math.PI, false);
ctx.fillStyle = "Blue";
ctx.fill(); 

Here are the results of the JavaScript above:

image

“DATA DASH” ATTRIBUTES

In the past, HTML defined a finite list of tags and attributes that it considered valid markup. This changes with HTML5. Now, any attribute that begins with “data-” (pronounced “datadash”) is considered valid markup. In fact, such attributes have a super power, in that you can access them in JavaScript, via the object’s data collection.

For example, if I have the following markup in my page:

<div data-firstname="David" data-lastname="Giard" id="fName"> 

, I can access the data stored with the datadash attributes via the following JavaScript:

var div = getElementById("fName");
var fn = div.data("firstname");
var ln = div.data("lastname"); 

WEB STORAGE

Web storage is a feature of HTML5 that allows you to write JavaScript to store data on the client. This is useful if you want to maintain state as the user navigates from page to page or if they close the browser and return to your site at a later time.

There are two types of web storage – Local Storage and Session Storage. The difference between these two is that session storage is reset after the user closes the browser, while local storage persists between sessions.

The syntax of the two web storage types is very similar. The window object contains 2 properties – localStorage and sessionStorage to access local storage and session storage respectively. You can store data in these by assigning creating a property and assigning a value to it, as in the following JavaScript example:

var lStorage = window.localStorage;
lStorage.lastProductViewed = “Widget”;
var sStorage = window.sessionStorage;
sStorage.currentProduct = “Widget2”;
var product = lStorage.lastProductViewed; 

GEOLOCATION

Geolocation is a feature that allows the browser to determine the physical location of the user. Before describing the API, it is important to understand some limitations of Geolocation.

In order to use the geolocation API, the user must turn on location tracking in their browser. When a script first make a call to the geolocation API, the browser may prompt the user for permission to turn on this feature. 

Location is determined by one or more of the following methods: IP address tracking; GPS; Wi-Fi; Cell Phone Tower triangulation; and user-defined settings. Not all these features may be available and the accuracy and precision may vary from one feature to the next, or even from one day to the next.

The API is relatively straightforward: The navigator.geolocation exposes the getCurrentPosition method, which returns a position object. The only trick is that this method runs asynchronously, so you must pass to getCurrentPosition the name of a function to call when the method returns successfully. This function will accept the return value (a position object) as a parameter. The position object contains properties, such as

You may also pass to getcurrentPosition the name of a function to call if an error occurs.

A sample JavaScript syntax is below:

navigator.geolocation.getCurrentPosition(showPosition, showError);
var coords = position.coords;
var lat = coords.latitude;
var lng = coords.longitude;
position.coords contains a number of useful properties, including latitude, longitude, accuracy, altitude, altitudeAccuracy, heading (direction of movement), and speed. 

CONCLUSION

In this article, I described some of the new JavaScript APIs introduced with HTML5.

In this series, I introduced some of the concepts and features of HTML5 and CSS3.

HTML5 | Web
Thursday, December 12, 2013 8:40:00 PM (GMT Standard Time, UTC+00:00)