# Friday, December 6, 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, December 6, 2013 8:55:00 PM (GMT Standard Time, UTC+00:00)
# Thursday, December 5, 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, December 5, 2013 9:40:00 PM (GMT Standard Time, UTC+00:00)
# Wednesday, December 4, 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, December 4, 2013 9:02:00 PM (GMT Standard Time, UTC+00:00)
# Tuesday, December 3, 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, December 3, 2013 9:20:02 PM (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, December 3, 2013 4:21:00 PM (GMT Standard Time, UTC+00:00)
# Monday, December 2, 2013
Monday, December 2, 2013 3:05:34 PM (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, December 2, 2013 12:51:00 AM (GMT Standard Time, UTC+00:00)
# Sunday, December 1, 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, December 1, 2013 8:58:00 PM (GMT Standard Time, UTC+00:00)
# Friday, November 29, 2013
 #
 
Back To Basics

A cascading style sheet (CSS) is used to apply styling to an HTML web page. Separating styling from markup provides cleaner markup, easier reuse of styles, and greater flexibility when maintaining a web page.

This article describes the basics of using CSS to applying styles to a web page.

Cascading style sheets are applied to a web page by either enclosing CSS syntax between a beginning and ending STYLE tag or by creating a separate file (typically with a “.CSS” extension) containing CSS syntax and linking that file to the web page, via the LINK tag. The two syntaxes are shown below:

Inline CSS:

<style>
selector {
     style-name: style-value;
}
tag {
     style-name: style-value;
}
#id {
     style-name: style-value;
}
.classname {
     style-name: style-value;
}
</style> 

Link to stylesheet

<LINK REL=StyleSheet  HREF="style.css" TYPE="text/css">

The CSS syntax consists of a set of selectors, followed by curly brackets (“{” and “}”), containing a set of stylename:stylevalue pairs. For example, in the example below:

div {
     background-color: yellow;
} 

The selector is the word “div”. It tells the style sheet to select all div tags on the page and apply the corresponding style (in this case, yellow background color) to each div.

Historically, the most common type of selectors are

  • Text, to identify a tag name and select all tags of that type (e.g., “div”)
  • Text, preceded by “#”, to identify any element on the page with a given ID (e.g., “#Div1”, which selects any element with the attribute id=“Div1”.)
  • Text, preceded by “.”, to identify any elements on the page with a given class applied to them (e.g., “.Class1”, which selects any element with the attribute class= “Class1”).

Examples of each are below:

Select by Tag

Style:

<style> div
{
background-color: yellow;
} </style>

HTML Markup:

<div>Life, the Universe</div>
<div>and Everything!</div>

Output:

image

Select by ID

Style:

<style> #MyDiv
{
background-color: green;
} </style>

HTML Markup:

<div id="MyDiv">Life, the Universe</div>
<div id="YourDiv">and Everything!</div>

Output:

image

Select by Class name

Style:

<style>
.CoolDiv
 {
    background-color: purple;
 }
</style>

HTML Markup:

<div>Life, the Universe</div>
<div class="CoolDiv">and Everything!</div>

Output:

image

Friday, November 29, 2013 8:28:00 PM (GMT Standard Time, UTC+00:00)
# Thursday, November 28, 2013

11/28
Today I am grateful for the drawers I cleaned out last night and the all excess clutter I threw away this morning.

11/27
Today I am thankful that everyone else is thankful today.

11/26
There was a time in my life I would lay awake in bed every night, unable to sleep, my mind racing with stress and guilt and regret. These days, I tend to fall asleep immediately from exhaustion, which is a thousand times better. I am grateful that this has changed.

11/25
Today I am grateful that my mother is out of the hospital and feeling better.

11/24
Today I am grateful that the Michigan State Spartans won 2 championships yesterday - the Legends Division in football and the Coaches vs Cancer Classic in basketball! #GoGreen

11/22
Today I am grateful to all those who put on another great #MVPSummit.

11/21
Today I'm grateful that Keith Elder traveled 1000 miles from Hattiesburg, MS to Southfield, MI to speak at a the Great Lakes Area .NET User Group. I wish I could have been there.

11/20
Today I am grateful for a chance to meet with a group of Midwest MVPs last night and learn what is important to them. I'm excited to work with such a passionate group of community influencers.

11/19
Today I am grateful for a chance to meet and exchange ideas with so many of the smartest people in my industry.

11/18
Today I am grateful that I managed to get out of O'Hare before the storms hit Chicago yesterday.

11/17
Today I am grateful that I get to the #MVPSummit, even though I'm no longer an MVP.

11/16
Today I am grateful that my son's basketball team scheduled a game near my home so I had a chance to watch him work and spend some time with him last night.

11/15
Today I am grateful to Martin Schray, who has gone out of his way these past few weeks to help me learn my new job.

11/14
Today I am grateful that I made it through a full month of this new job with no visible scars!

11/13
Today I am grateful I was able to find a 2nd row seat at face value to watch the Spartans knock off the #1 team in the country last night!

11/12
Today I am grateful for an amazing developer community here in Michigan.

11/11
Today I am grateful to the men and women who have served our country in the armed forces, especially my father Normand Giard (Lt. Cmdr., ret), who gave 22 years of his life to the US Navy.

11/10
Today I am grateful that my son's coaching career began last night with a victory!

11/9
Today I am grateful for post-game drinks at Hop Cat with my friend John and his lady-friend.

11/8
Today I am grateful for the generosity and hospitality of Josh Cheek

11/7
Today I am grateful that I was finally able to replace my broken phone yesterday.

11/6
Today I am grateful to walk through a gently-falling autumn rain on the way to the office.

11/5
Today I am grateful for social media (like this one), which allows me to maintain relationships during the times I don't see friends and family.

11/4
Today I am grateful for another beatdown of um at Spartan Stadium this weekend. That makes 5 of the last 6 for the good guys!

11/3
Today I am grateful for

  1. Dinner with an old friend - John Karamanos - who I haven't seen in 3 years.
  2. making it home safely from Chicago despite driving most of the night and stopping to nap at a rest stop 40 miles from home.
  3. sleeping in a bed for the first time in a week.
  4. A chance to speak at SharePoint Saturday Chicago for the first time.

11/2
Today I am grateful for the generosity and hospitality of Jason Farrell, who opened his home to me this week, saving me a lot of trouble and money.

11/1
Today I am grateful that my mother is now living in a place where her health is more closely monitored.

10/31
Today I am grateful for my brother Dan, who traveled all the way from Australia to help our mother move.

10/30
Today I am grateful that my brother-in-law Brit is finally home after weeks in the hospital, following his liver transplant.

10/29
Today I am grateful for a mostly-sunny-not-cold-good-walking-around-weather day in Chicago.

10/28
Today I am grateful to Scott Zischerk, who helped me figure out my Outlook issues yesterday.

Thursday, November 28, 2013 6:46:56 PM (GMT Standard Time, UTC+00:00)