# Tuesday, 31 December 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, 31 December 2013 14:37:40 (GMT Standard Time, UTC+00:00)
# Monday, 30 December 2013
Monday, 30 December 2013 17:31:02 (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, 30 December 2013 01:55:18 (GMT Standard Time, UTC+00:00)
# Wednesday, 25 December 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, 25 December 2013 06:55:00 (GMT Standard Time, UTC+00:00)
# Tuesday, 24 December 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, 24 December 2013 18:43:00 (GMT Standard Time, UTC+00:00)
# Monday, 23 December 2013
Monday, 23 December 2013 17:24:42 (GMT Standard Time, UTC+00:00)
# Tuesday, 17 December 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, 17 December 2013 16:03:00 (GMT Standard Time, UTC+00:00)
# Monday, 16 December 2013

Episode 296

Ward Bell on Breeze

Monday, 16 December 2013 22:58:00 (GMT Standard Time, UTC+00:00)
# Friday, 13 December 2013
Friday, 13 December 2013 17:14:29 (GMT Standard Time, UTC+00:00)
# Thursday, 12 December 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, 12 December 2013 20:40:00 (GMT Standard Time, UTC+00:00)
# Wednesday, 11 December 2013

In my last article in this series, I covered a few of the new features introduced with CSS3. This article introduces some more new CSS features.

A WORD ABOUT COMPATIBILITY

Most browser vendors began working on CSS3 features before they became full recommendations by the W3C. As a result, some implementations are specific to certain browsers. To accommodate these, it is sometimes necessary to precede a style name with a vendor prefix, as in the following example:

#title {
    transform:rotate(-15deg);
    -ms-transform:rotate(-15deg); 
    -moz-transform:rotate(-15deg);
    -webkit-transform:rotate(-15deg);
    -o-transform:rotate(-15deg); 
}

 

Below is a list of prefixes and the browser(s) for which they are intended.

Style feature Browser(s)
feature W3C Standard
-ms-feature Internet Explorer
-moz-feature Firefox
-webkit-feature Safari and Chrome
-o-feature Opera

TRANSFORM

The new “transform” style can be used to rotate skew, or scale an object. Let’s go over each of these.

ROTATE

The “transform:rotate” style rotates an object around its center point. It accepts an argument indicating the amount by which to rotate – positive values rotate clockwise and negative numbers rotate counter-clockwise. The example below rotates an object 15 degrees counter-clockwise from the horizontal.

#Div1 {
   transform:rotate(-15deg);
} 

This is one of the styles that requires vendor-specific prefixes in order to work in all browsers. With the prefixes in place, you will need to add the following styles

#Div1 {
   transform:rotate(-15deg);
   -ms-transform:rotate(-15deg); /* IE  */
   -moz-transform:rotate(-15deg); /* Firefox */
   -webkit-transform:rotate(-15deg); /* Safari, Chrome */
   -o-transform:rotate(-15deg); /* Opera */
} 

The results would look something like this:

image

SKEW

The “transform:skew” style tilts an objects tilt an object. There are three variations of this style: “transform:skewX” (which tilts an object along the x-axis); “transform:skewY” (which tilts an object along the y-axis); and “transform:skew” (which tilts an object along both axes). The first two styles accept a single parameter, indicating how many degrees to tilt the object in the appropriate direction.  The third style accepts 2 parameters: one for the x-tilt and one for the y-tilt. Positive arguments skew an object up or to the right; negative arguments tilt it down or to the left.

This style still requires the vendor-specific prefixes to make it work on all browsers.

An example is below

   #x
   {
    transform: skewX(150deg);
    -ms-transform: skewX(150deg);
    -moz-transform: skewX(150deg);
    -webkit-transform: skewX(150deg);
    -o-transform: skewX(150deg);
   } 

This will skew Div1 similar to the following

image

SCALE

The “transform:scale” style and its variations resize an object. There are three variations of this style: “transform:scaleX” (which resizes an object horizontally); “transform:scaleY” (which resizes an object vertically); and “transform:scale” (which resizes an object along both axes). These styles all accept a parameter to indicate the factor by which to resize the target selected object or objects. A factor greater than 1 will make an object larger, while a factor below 1 will shrink the object.

This style is ideal for event filter selections, such as “:hover”, which is applied when the user move his or her mouse over an object.

The “transform:scale” style still requires the vendor-specific prefixes to make it work on all browsers.

An example is below

#Div1: hover
{
    transform: scale(factor);
    -ms-transform: scale(factor);
    -moz-transform: scale(factor);
    -webkit-transform: scale(factor);
    -o-transform: scale(factor);
} 

ANIMATIONS

The “animation” style allows you to transition from one style to another and to control how and how long that transition takes place. This is done by referencing a keyframes declaration that lists the styles and how the transition should occur. In the following example, the “blackgraywhite” keyframe defines the background color of an object changing from black through various shades of gray to white.

@keyframes blackgraywhite
   {
    0%   {background: #000000;}
    25%  {background: #777777;}
    50%  {background: #aaaaaa;}
    75%  {background: #dddddd;}
    100% {background: #ffffff;}
   }
#Div1
{
 animation:  blackgraywhite 8s;
}

Applying the “animation: blackgraywhite” style to Div1 causes it to start out black and slowly transform to white. The entire transition lasts 8 seconds, thanks to the parameter at the end.

We can reverse the transition (from white, back to black) by adding the optional “alternate” argument and we can keep this transition going forever by adding the optional “infinite” argument.

#Div1
{
 animation:  blackgraywhite 8s infinite alternate;
} 

TRANSITIONS

Transitions are similar to animations in that you can define how long it takes to apply a style; however, they apply to other applied styles and they are typically in response to user event filters, such as “:hover”. By default, when such a style is applied (when the user moves the mouse over an object), the new style is applied instantly. To apply a transition, define two style sets and add the “transition” style to the first one. The transition allows arguments to specify how long a transition will take and what to which styles the transition applies.  The sample below tells the browser to change green text on a white background to white text on a green background and to take 2 seconds to make this transition.

#Div1 {
    background: white;
    color:green
    transition: all 2s;
}
#Div1:hover {
    background: green;
    color:white
}

CONCLUSION

In this and in the previous article of this series, we covered many of the new features of CSS3.

HTML5 | Web
Wednesday, 11 December 2013 20:28:00 (GMT Standard Time, UTC+00:00)
# Tuesday, 10 December 2013

Thumbs Up Wine Finder provides information on countless types of wines. The app provides wine reviews, which wines are available in your local supermarket, what wines are appropriate for various meals and occasions and the ability to search by type and price of wine.

This app is ideal for people like me who don’t know a great deal about selecting wine, but it could also add value for those who know wines but are looking for more information or for some ideas of what to buy and server.

Screenshot.270526.100000[1]

You can download Thumbs Up Wine Finder at http://apps.microsoft.com/windows/en-us/app/thumbs-up-winefinder/a6d01b26-96df-46b9-9739-bbba03b0a722.

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, 10 December 2013 17:00:01 (GMT Standard Time, UTC+00:00)
# Monday, 09 December 2013
Monday, 09 December 2013 13:31:27 (GMT Standard Time, UTC+00:00)
# Sunday, 08 December 2013

NOTE: If you are unfamiliar with Cascading Style Sheets, please check out my earlier article on the basics of CSS.

Cascading Style Sheets (CSS) have been around for years. They contain styling information to apply to a web page and they are a recommended way to separate content from layout. The Worldwide Web Consortium (W3C) released a new set of CSS recommendations – known as “CSS3” – at about the same time they released the HTML3 recommendations, so these two specification sets are often spoken of together. CSS3 adds a number of new and useful selectors, selector filters, and styles to provide more flexibility in styling web pages.

VALIDATION

CSS3 adds a number of filters to refine selector criteria. Some of these support valid and invalid input.

For example, if a web page contains an input textbox with the “required” attribute, that textbox is invalid until the user types something into it. We can specify a different style for valid versus invalid input, using the “:valid” and “:invalid” selection filters, as shown below

input:invalid {
    border:3px solid red;
 }
 input:valid {
    border:3px solid gray;
 }
…
<input type=“textid=“FirstNamename=“FirstNamerequired> 

In the example above, the “FirstName” textbox displays with a red border until the user types text into it.

FONTS

Font types are controlled by the “font-family” style. This style accepts a list of preferred fonts for the selection.  In earlier CSS versions, a list was necessary because browsers were unable to display a font unless it was physically installed on the user’s machine. If you wanted to display text using an unusual font, you had to either convince each user to install this font locally, or convert the stylized font text to a picture.

With CSS3, you can use the “@font-face” declaration to define a server-side font; then, point the font-family style to that font. This gives far more flexibility and control when applying fonts to text.

The syntax is

@font-face {
 font-family: FriendlyFontName;
 src: url('fontname.woff') format('woff');
}
selector {
 font-family: FriendlyFontName;
} 

WOFF is a common file format that contains font information. An example (using the desyrel font, found at fontsquirrel.com), is listed below:

@font-face 
   {
    font-family: desyrel;
    src: url('desyrel-webfont.woff') format('woff');
   }
   .wreckless 
   {
    font-family: desyrel, Arial;
    font-size: 30pt;
   } 

The style above assumes that the desyrel-webfont.woff file is in the same folder as the web page being accessed. The results would look something like this:

image

TEXT SHADOWS

Text shadows were nearly impossible to achieve with earlier version of CSS. Again, developers had to resort to pictures of text. But with CSS3, the “text-shadow” style accomplishes this. This style accepts 4 arguments: for the horizontal offset (positive values to the right), vertical offset (positive values down), blur (higher numbers cause blurrier shadows), and color of the shadow. The following example causes a gray dropshadow below and to the right of the text in Div1:

   #Div1 
   {
    text-shadow: 30pt 25pt 15px gray;
   } 

Here is sample text with that style applied:

image

RESIZE

With the CSS3 “resize” style, you can declaratively allow users to resize an object by dragging its edges. The style takes the following parameters

resize: The direction to allow resizing (none, horizontal, vertical, or both)

overflow: Always “auto”

max-width: (optional) The maximum width to which a user may resize the object

max-height: (optional) The maximum height to which a user may resize the object

The following example allows users to resize Div1 horizontally to a maximum width of 600 pixels and vertically as much as they want.

#Div1{    
    resize: both;
    overflow: auto; 
    max-width: 600px; 
} 

ROUNDED CORNERS

A few years ago, everyone rushed to add rounded corners to their web layouts. The problem was that this was difficult to do with the CSS of the time. With CSS3, it is straightforward to round the corners of an object using the new “border-radius” style and its derivatives.

Border-radius style rounds all 4 corners of an object; while “border-top-left-radius”, “border-bottom-left-radius”, “border-top-right-radius”, and “border-bottom-right-radius” styles each rounds only a single corner of an object. Increase the parameter value to provide more curvature to the object corners.

The following example, rounds the two left corners of Div1.

#Div1 {
  border-top-left-radius:2em;
  border-bottom-left-radius:2em;
} 

The results are something like the object below

image

CONCLUSION

In this article, we covered a few of the new styles introduced in CSS3. In the next article, we will demonstrate a few more CSS3 features.

HTML5 | Web
Sunday, 08 December 2013 21:18:00 (GMT Standard Time, UTC+00:00)
# Saturday, 07 December 2013

The <input> tag has been around a long time and supports a number of values for the “type” attribute (“text”, “checkbox”, “hidden”, etc.) HTML5 adds a number of new allowed values to the input type attribute. These are designed to capture specific types of input data. Allowed values are

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

For example, if you want the user to enter a color value, use the following markup:

<input type="color" name="MyColor">

In Chrome, this markup renders a button that, when clicked, displays the following popup, allowing users to select the color of their choice.

image

Some browsers render different controls for these input types. For example, Chrome renders a popup calendar for the date type and a color picker for the color type. Browsers that don’t support custom controls simply render a textbox.

Even if no special control is rendered, the behavior of these objects is affected by the type value. Two properties – valid and invalid – were added to input tags in HTML5 and these property values change depending on the input type value and the data entered by the user. For example, if a user attempts to enter text into a <input type=“number”> control, the valid property will be set to false and the invalid property will be set to true. You can access this property either through JavaScript or through CSS, which is a good way to provide visual cues that a user has not correctly completed a form.

The new Input types are a great way to make it easier for users to input data into your forms; to restrict user input based on the expected data use; and to validate form input.

HTML5 | Web
Saturday, 07 December 2013 21:06:00 (GMT Standard Time, UTC+00:00)
# Friday, 06 December 2013

Two of my favourite new attributes to input tags are “autofocus” and “placeholder”.

AUTOFOCUS

The “autofocus” attribute causes the cursor to advance to a control when the page loads. This serves as a great convenience to the user, who can begin entering data into a form immediately. Previously, I would write JavaScript to accomplish this. Obviously, you should have only one “autofocus” attribute on a page. Below is an example:

<input type="text" 
    name="First" 
    autofocus  />

PLACEHOLDER

The “placeholder” attribute displays text within a control without modifying the value of that control. Placeholder text disappears when a user starts typing in an input control. This is useful for offering helpful advice about what to enter in a textbox. Below is an example of an INPUT tag with the PLACEHOLDER attribute set.

<input type="text" 
    name="First" 
    placeholder="Enter First Name"  />

In Internet Explorer 11, the markup above renders like the image below:

image

In some browsers (such as IE 11), the placeholder text disappears as soon as the user selects the input element; in other browsers, the text remains until the user begins typing.

In all cases, the placeholder text is never submitted with the form values. It is only for display.

CONCLUSION

In this article, we reviewed how to use two new attributes introduced in HTML 5.

HTML5 | Web
Friday, 06 December 2013 20:55:00 (GMT Standard Time, UTC+00:00)
# Thursday, 05 December 2013

HTML5 introduced a few new tags to the markup language. Below is a partial list of these tags:

  • article
  • aside
  • audio
  • canvas
  • command
  • datalist
  • details
  • embed
  • figure
  • figcaption
  • footer
  • header
  • hgroup
  • keygen
  • mark
  • meter
  • nav
  • output
  • progress
  • rp
  • rt
  • section
  • source
  • summary
  • time
  • video
  • wbr

Let’s look at a few of these new tags.

FOOTER, HEADER, ARTICLE, and ASIDE

The Footer, Header, Article, and Aside tags do not affect the page rendering. Instead, they are used to organize the content of a page, making it clear which parts belong together.

The Header and Footer tags should contain summary information about the page and the site. These typically belong at the top and bottom of a page, but you will need to add styling to make this happen.

The Article tag is for a blog or newspaper-style site that contains multiple, distinct stories or articles. Enclose each story with the Article tag to distinguish it from other stories on the page. Within each article, you can specify a quote from that article or HTML that relates to that article. Do so by surrounding this HTML with the Aside tag. An example is shown below.

<article>
    <h1>Breaking News</h1>
    <p>The quick brown fox jumps over the lazy dog</p>
    <aside>
        <h1>Side Note</h1>
        <p>Oh, by the way</p>
    </aside>
</article> 

These tags are examples of semantic markup, which was discussed in Part 1 of this series.

FIGURE AND FIGCAPTION

The <figure> tag is designed to enclose a picture, diagram, code-listing, or other content that stands apart from the body of a document.

The <figcaption> tag is contained within a <figure> tag and contains a caption to describe that figure. There should be at most one figcaption for each figure.

The sample below:

<figure> 
    <img src="babelfish.png"> 
    <figcaption> 
        The mysterious babelfish
    </figcaption> 
</figure> 

would render something like below:

image 

WBR

When a browser is resized or when a web page is viewed at different resolutions, by default, the text on the page wraps to accommodate the new boundaries. Sometimes, this wrapping can make the text look awkward, particular when a long word is involved. The <wbr> tag can help this by splitting a word at the appropriate point.

The <wbr> tag should be inserted in the middle of a long word to indicate where it should be broken, in case it needs to move to a new line.

VIDEO AND AUDIO

In the past, the only way to render multimedia in a browser was to use a plug-in, such as Flash or Silverlight. With HTML5, we now have the <audio> and <video> tags to play multimedia files natively, without the need for an external plug-in.

We can identify the media source using the src attribute in the following example:

<video src=”MyVideo.avi> 

or we can identify multiple video sources by enclosing <source> tags within an <audio> or <video> tag, as in this example:

<video>
    <source src="yyy.mp4" />
    <source src="yyy.ogv" />
    <source src="yyy.webm" />
 </video> 

Supplying multiple media formats is advised if you want your media file to play on multiple platforms. Since there is no universal audio or video format for all platforms, it’s a good idea to encode your multimedia files into different formats for different clients. The browser will try each format in order until it finds a supported one.

Some other useful attributes of the audio and video tags are

  • controls - When present, this attribute adds a set of controls on the page, allowing the user to start, pause, and change volume. This attribute needs no value.
  • loop - When present, this attribute causes the media file to replay after it finishes. This attribute needs no value.
HTML5 | Web
Thursday, 05 December 2013 21:40:00 (GMT Standard Time, UTC+00:00)
# Wednesday, 04 December 2013

HTML5 IS BIG

When I think of HTML5, I’m reminded of a quote about space by one of my favourite authors –Douglas Adams. “Space,” says Adams, “is big. Really big. I mean, you may think it’s a long way down to the chemist’s but that’s just peanuts to space.” And the reason this quote reminds me of HTML5 is because HTML 5 is big. Really big. I mean you may think it’s a long way… Well, you get the idea.

The point is that HTML5 is not just one thing. HTML5 is new tags and new attribute to existing tags and new allowed values for existing attributes and new rules about tags and attributes; It’s also a rich set of new JavaScript APIs to enhance your applications; In addition, a new version of Cascading Style Sheets (CSS3) , while not technically part of HTML5, was released at the same time also by the W3C, so we often discuss CSS3 along with HTML5 and I will do so in this paper.

HTML5 is a set of guidelines released by the World Wide Web Consortium (the “W3C” for short) with input from the most popular browser manufacturers, such as Microsoft, Google, the Mozilla Foundation, and Apple.

The browser manufacturers are implementing the HTML5 guidelines at their own pace and in their own order. Due to the enormous scope of HTML5 and the rate at which users tend to upgrade to new browsers, it is unlikely that HTML5 will be on all computers for another decade. Does this mean that HTML5 is irrelevant today? Of course not! Each browser manufacturer is working furiously to implement new features into their browser and encouraging users to upgrade to the latest browser.

You as a developer can start taking advantages of these features today. The challenge, of course, is to build a web application that will use features of new browsers, but still be useable if a user connects with an older browser that does not support the new features. This backwards compatibility is known as “graceful degradation”, meaning that your application downgrades itself gracefully rather than crashing when it encounters a degraded browser. We will talk about ways of making your pages and applications degrade gracefully throughout this paper.

HTML5 GOALS

The W3C had several goals when defining HTML5, including Simplicity, Semantic Markup, and ???

SIMPLICITY

HTML5 is simpler than earlier versions of HTML. For example, the mysterious document declaration at the top of each HTML document has been simplified from

<!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

to 

<!DOCTYPE html>

This new version is simple enough that we actually have a prayer of memorizing it.

The <LINK> and <SCRIPT> tag have been simplified. When was the last time you linked to a stylesheet that was not a CSS stylesheet or added client-side script in a language other than JavaScript? I suspect  attributes and assume every LINK tag points to a CSS stylesheet and every SCRIPT refers to JavaScript? That is what the new HTML5 standard does.

Old New
<link type="text-css" rel="stylesheet" href="MyStyle.css"> <link rel="stylesheet" href="MyStyle.css">
<script type="text/javascript" src="Myscript.js"> <script src="Myscript.js">

SEMANTIC MARKUP

Semantic markup refers to markup that provides meaning to the text it surrounds – meaning beyond simply show to display that text in a browser. This is an important concept as the web evolves from its original goal of a way to store, link, and share documents and pictures of cats.

Semantic markup existed to a lesser extent in earlier versions of HTML. For example, the tags <i> and <em> do the same thing visually when surrounding text: They tilt the top of each letter to the right. However, the <em> tag has some semantic meaning beyond simply telling the browser how to display text. The <em> tag indicates that the reason to italicize the text – With the <em> tag, the marked-up text is italicized to indicate that this text should be emphasized. When one reads the text aloud, one’s voice should rise a little louder or higher to indicate this emphasis. A similar case can be made for the tags <b> and <strong>.

HTML5 | Web
Wednesday, 04 December 2013 21:02:00 (GMT Standard Time, UTC+00:00)
# Tuesday, 03 December 2013

If you have written an app for Windows 8 or Windows Phone 8 or if you are about to write an app, you have a chance to win a lot of money.

Modev is sponsoring a contest with $10,000 in prizes!

Some prizes are determined by a panel of judges and some by public voting. Prizes are broken out as follows:

  Judges’ Vote Public Vote
1st Place $2,500 $2,500
2nd Place $1,500 $1,500
3rd Place $1,000 $1,000

In order to qualify, you must complete and submit a new app by December 20, 2013 (I know! I just heard about this myself) and have it approved and in the store by December 31.

Not only is this a chance to win some extra cash, it is also a good way to promote your app.

You can read about the contest here and you can submit your app here!

If you are looking for a reason to finish that app, a chance at free money is a pretty good one.

10KAppContest

Tuesday, 03 December 2013 21:20:02 (GMT Standard Time, UTC+00:00)

This week's app is actually 3 apps. And they are more than apps - they 3 short stories and novels with a reader included. Each story was written by Stephen Donald Huff, PhD and each was published by Capital Ideations LLC. 

The apps/books are all free and each is a science fiction story. I read only the sort story "A Paradox of Distance" but I liked Dr. Huff's style and I plan to read the other two. You can download the apps at the links below:

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, 03 December 2013 16:21:00 (GMT Standard Time, UTC+00:00)
# Monday, 02 December 2013
Monday, 02 December 2013 15:05:34 (GMT Standard Time, UTC+00:00)
This post is for the Great Lakes Area .NET User Group (MIGANG). Download and rate each of the Windows 8 apps listed below to help MIGANG win fabulous prizes, including an Xbox One!

Application

HyperLink

Baby Needs for Girls

http://apps.microsoft.com/windows/en-us/app/99AE246C-7953-467F-9EC2-F84C4FE2A3E4

The URUS fan app

http://apps.microsoft.com/windows/en-us/app/5CB5C553-F174-4875-B001-A039D0F940A2

Bo Burnham Fan Club

http://apps.microsoft.com/windows/en-us/app/69F035C4-8EE3-4596-BDEA-0DE1908CBFFC

Nerdist Fan Club

http://apps.microsoft.com/windows/en-us/app/CA0359EC-4844-4E9A-B6F3-816BE95F551A

Basketball Pop

http://apps.microsoft.com/windows/en-us/app/59586E27-8AD4-45E9-946D-512BB03B90AA

Celebrity Memory Match

http://apps.microsoft.com/windows/en-us/app/23D50658-04A3-41AF-825C-C466EE795075

Halloween Match

http://apps.microsoft.com/windows/en-us/app/0026370E-5628-4094-A93A-6D3BFDB14310

Switching Stick Figures

http://apps.microsoft.com/windows/en-us/app/EB4C81AD-4905-4A5C-A7F7-E48C8249951B

BrooklynOMG

http://apps.microsoft.com/windows/en-us/app/33A1B2D2-E429-4486-9021-234EB95F50FE

Barnyard Bash

http://apps.microsoft.com/windows/en-us/app/A703C74D-0475-467B-8D1D-24A157CEF750

Jump Squirrel, Jump!

http://apps.microsoft.com/windows/en-us/app/E913581C-4BCD-48C6-8202-47AFEFD51EF3

Protect the Dragons 2

http://apps.microsoft.com/windows/en-us/app/DA3B4877-E3D4-4D4C-9C0E-AFED29697A78

Spring Sting

http://apps.microsoft.com/windows/en-us/app/696FD0A6-B6D5-4D42-A541-3F4249472418

Sunny Summer

http://apps.microsoft.com/windows/en-us/app/F692C1A6-000A-43CF-987A-453BF289A3DF

Whimsical Winter

http://apps.microsoft.com/windows/en-us/app/B2646AF8-7E9C-40DC-A2E1-A24A2096C17A

Shape Sifter

http://apps.microsoft.com/windows/en-us/app/130E44CE-9746-480F-9FC7-C949CDC4F213

BCBSWNY for Windows 8

http://apps.microsoft.com/windows/en-us/app/57C7310D-51C5-40D4-8CEE-CB608CCF53BB

Tennis Elbow HD FREE

http://apps.microsoft.com/windows/en-us/app/675DC1DB-1CB5-4372-B89B-DA067E545807

Fly or Die

http://apps.microsoft.com/windows/en-us/app/812ACD4F-7B5F-48DC-81E3-26513F99584E

Picture Memory

http://apps.microsoft.com/windows/en-us/app/84C141C4-8E9A-4208-B786-E375616CDB3E

Monday, 02 December 2013 00:51:00 (GMT Standard Time, UTC+00:00)
# Sunday, 01 December 2013

This post is for the Chicago .NET User Group. Download and rate each of the Windows 8 apps listed below to help CNUG win fabulous prizes, including an Xbox One!

Courier and Press http://apps.microsoft.com/windows/en-us/app/F7926F57-F5E4-4B80-9DE4-83AE596C1A1D
Kitsap Sun http://apps.microsoft.com/windows/en-us/app/F973832F-4D16-4F66-BF06-CFFE5CC60A66
Naples Daily News http://apps.microsoft.com/windows/en-us/app/21CA1C4E-B0E7-40F9-BE51-347133A5C7A0
Record Searchlight http://apps.microsoft.com/windows/en-us/app/97F30C2B-DE68-4904-BCE8-0D3E442F3F6A
San Angelo Standard-Times http://apps.microsoft.com/windows/en-us/app/1F9917D4-1146-4624-AAD2-6E583C17B63C
TCPalm/Treasure Coast Newspapers http://apps.microsoft.com/windows/en-us/app/2536D67B-23ED-4C98-B7C2-EF8289CB0FDE
Times Record News http://apps.microsoft.com/windows/en-us/app/E5ADDF04-2D96-405D-97BC-D793F1F8F6E3
Ventura County Star http://apps.microsoft.com/windows/en-us/app/EF075C20-BB6B-46D6-A810-07FEA0B18646
Dutch Spell Check http://apps.microsoft.com/windows/en-us/app/944C633B-EED1-4D25-AF08-410B92ECCBA4
Teacher Pay (CA) http://apps.microsoft.com/windows/en-us/app/12AF4C07-3007-45DB-8E7E-277C869EBD87
Miami Weather http://apps.microsoft.com/windows/en-us/app/D6656C13-DB73-4B3D-94E3-1EFC5C14036D
New York Weather and Image http://apps.microsoft.com/windows/en-us/app/A018275D-5BC5-4600-ACEA-0B9D4D59AF6F
A Rainy June and Other Stories Ebook http://apps.microsoft.com/windows/en-us/app/49CE8EAA-8D60-43CB-B032-A2E3D01E9A52
Bingo Call Simulator http://apps.microsoft.com/windows/en-us/app/F3D59EEE-4EE0-46F0-B008-7D84AA666267
Coins Flip Simulator http://apps.microsoft.com/windows/en-us/app/7D6E4ECB-A679-4C81-9D4D-CBA43BED2BB7
Custom RPG Battles http://apps.microsoft.com/windows/en-us/app/DDAE76B4-4F33-4E70-B82D-DC5F30015780
Dead Pixels Search http://apps.microsoft.com/windows/en-us/app/087FE823-9DD3-4A71-8CF8-D33AD6CE5058
Fact About Cat http://apps.microsoft.com/windows/en-us/app/9B7B7F6E-364C-4D2A-92D8-9616F37FB2A3
Headphone Directional Test http://apps.microsoft.com/windows/en-us/app/D20B8504-35AE-4CDC-8036-AA6FFDD610AA
Jumbled Image - Fire Emblem http://apps.microsoft.com/windows/en-us/app/5B75E954-F72A-4091-BECD-9E6EBB225150
Jumbled Image - F-Zero http://apps.microsoft.com/windows/en-us/app/96441A68-E765-4384-91D0-043208203E32
Tarpan http://apps.microsoft.com/windows/en-us/app/8B7F3DA6-7E95-47EA-BB83-FA5034138F6A
Complete and Absolute total Cost Calculator http://apps.microsoft.com/windows/en-us/app/B0EB3EAA-04BE-4CA1-B2C8-88F254C1722E
La Gran Sabana http://apps.microsoft.com/windows/en-us/app/7727A62F-18B8-4C4E-AE0D-D30F242AD950
Garry Goat Eats a Can http://apps.microsoft.com/windows/en-us/app/0F690D6D-FD9F-4783-ABF9-A9C6EEBBC5A6
Sunday, 01 December 2013 20:58:00 (GMT Standard Time, UTC+00:00)