Monthly Archives: October 2012

Programming: The New Math?

There has been a battle brewing in the blogosphere and it is time for me to weigh in. The battle line: should everyone learn to program? Even the mayor of New York, Mike Bloomberg, entered the ring by Tweeting that his New Year’s resolution of 2012 was to learn how to code. Jeff Atwood jumped in back in May with the controversial post, “Please Don’t Learn to Code” which sharply criticized the idea that everyone show code; although in his defense, he posted a slightly toned down second blog on the topic after it got picked up by many bloggers (e.g. here, here) including some major news sources (here, here).

So what’s behind all the fuss?

I think an article in my local paper, the Minneapolis Star Tribune, titled “Fostering Tech Talent” sheds some light on it. In that article, it references statistics that suggest we will need 150,000 computing jobs by 2020. Last year, fewer than 14,000 American students received undergraduate degrees in computer science. That’s a huge problem! The magazine Fast Company has an article “Helping to Solve the Education Crisis”, which sites the National Science Foundation who claims that 80% of the jobs created in the next decade will require some mastery of technology, math, and science. Are our schools preparing the next generation for this?

I certainly agree with those opinions in the Jeff Atwood’s camp that coding is not for everyone and the principles and doctrines of programming should not be diluted by giving a degree to anyone that can spell OOP. But on the other hand, I do think it is important that every student get exposed to programming early on. Isn’t exposing our kids to many different skills a key goal of education? My son is in high school and to me he is not getting exposed to programming in any significant way. Calculus… oh sure, many levels. War of 1812… plenty of it. Object-oriented programming… eh, well… not so much. Perhaps what this online controversy exposes is the need for the education system to re-evaluate what skills are needed for our future workers. With computers becoming more and more a part of every child’s world shouldn’t it be required that they at least get some idea of how the magic works?

If we are to bridge the gap between what the 2020 workforce will need for skills and what our schools are generating, I think we need to take a hard look at the current curriculum and ask ourselves, are we doing justice to our kids. And kudos for Microsoft, Kevin Wang and the TEALS program for trying to make a difference in the school systems of Seattle!

Distributing Windows 8 Applications: Getting Started

Although a complete discussion of distributing Windows 8 applications is beyond the scope of this introductory content, it’s important to understand that for most applications, you’ll use the Microsoft Store as your distribution channel. Like the Apple App Store, the Microsoft Store is a curated experience—that is, applications must be “vetted” before they’re released to the public.

In order to create a Windows 8 application that can be distributed in the Microsoft Store, you need a developer license from Visual Studio. This developer license allows you to install and test your application locally, before Microsoft tests and certifies it for distribution in the Microsoft Store. You’ll find more information about working with the developer license here: http://msdn.microsoft.com/en-us/library/windows/apps/hh974578.aspx.

The first time you attempt to create a Windows 8 application in Visual Studio 2012, you’ll see the dialog box shown in Figure 1. At this point, click I Agree, and then click Yes in the User Account Control dialog box should it appear, supply credentials from an existing Microsoft Account (or create a new one), and you’ll see the dialog box shown in Figure 2.

create a windows 8 developer license

Figure 1. Create a Developer License

windows 8 developer license

Figure 2. Success!

Given the developer license, you’re ready to start creating your first Windows 8 application.

Soften Your Look with jQuery

As mentioned in a previous blog post, Microsoft made two commitments when it decided to embrace jQuery as its one and only client-side JavaScript library. First, they were going to replace their Ajax Library with jQuery in every appropriate ASP.NET Web technology, including both Web Forms and MVC applications. Second, they would contribute plugins and other extensions to the jQuery Library, primarily by adapting their work on enhancements for the Ajax Library to the jQuery Library. These contributions might end up in the core jQuery Library, as official jQuery extensions, or, as a last resort, freely distributed, open source extensions.

In this article, we’ll discuss one such extension.

Creating Rounded Corners

rounded corners in AJAX

Putting rounded corners on elements is a desirable feature to soften the look of a Web page. But it is surprisingly hard to do well across all browsers, both because there are so many ways to accomplish the effect and so many variations among browsers. Web designers have long resorted to using images, even though CSS and other Web technologies support rounded corners. ACT has a nice RoundedCorners extender that applies the effect to HTML elements, letting you vary the appearance by changing the radius of the corner, which corners are rounded, and other options, giving a lot of flexibility for creating a nice page appearance. The Figure below shows the RoundedCorners extender demo from the ACT sample pages, with options set to round the upper right and lower left corners of the image.

Rounded corners seems to have been an area of particular creativity for jQuery plugin developers, probably because of the cross-browser issues and the lack of a single right way to achieve the effect. The result is a lot of plugins that let you get as creative as you want. We chose one of the simpler plugins to use on the Toolkit page, shown in the Figure below. The first box is a plain, square div element and the second has rounded bottom left and upper right corners using the Cornerz plugin for “bullet proof corners.” The plugin has a few options such as to set the border and background color, set the radius, and select which corners to round. But overall it is a pretty simple plugin that does its job quite well.

rounding the corners of a div element

The page uses the following HTML code for the Rounded Corners section. It is very simple markup, using a couple of div elements that each contain a p and cite elements.

The page uses a twain class to style the div elements, setting padding and the background color. Padding is important for most rounded corner plugins, providing room around the text to round the corner. You could have a border of a different color—as is commented out in the style below—and the border would be rounded as well.

Then the page includes a single JavaScript statement to round the corners, shown in the following code. It calls the cornerz method, passing two optional arguments. fixIE attempts to overcome a problem with some inline elements in Internet Explorer due to a wrong reporting of width, and the second specifies that only the top right (tr) and bottom left (bl) corners should be rounded.


ldn-expertdkielyThis post is an excerpt from the online courseware for our ASP.NET 4.0 AJAX and jQuery Using Visual C# 2010 course written by expert Don Kiely.

Take Advantage of Today’s Business Standard

web-presence-300x300

 

It is imperative that a business has an online presence in order for it to succeed. The ability to search for a business, service, or product online, is taken for granted now. It is so prevalent, that if a business does not have a web presence, it is assumed that they are somehow not legitimate or “real”. This has drastically increased the importance of people with web design and programming knowledge. The ability to design an attractive, interactive online presence for a company is a skill that can reap great rewards.

If you feel like you are aesthetically savvy enough to design an attractive, functional site, but do not have the technical know-how, an online course can help you get started. An HTML5 tutorial, and an MVC 3 tutorial, can help you become familiar with the programming necessary to create great websites, as well as the ability to create applications for use in the sites you build. If you are considering a career change, or just want to add to your computer-related skills, web design is a smart, and potentially lucrative, addition to anyone’s resume.

jQuery Plugins, Easy as 1,2,3

114-jquery-plugin

Despite the usefulness and comprehensiveness of jQuery, it doesn’t do everything it could to make your JavaScript coding life simpler. Frankly, you wouldn’t want it to do everything! It doesn’t even pretend to be comprehensive, if only because that would make the size of the core library enormous. The bigger the library is, the less likely that it will see wide use because it would have such a big impact on Web page performance and bandwidth, even if the browser effectively caches the library after its first use.

That’s why jQuery includes rich support for extensibility. You can create your own plugins, utility methods, and other features that closely integrate with jQuery itself. If jQuery doesn’t do something you need, or doesn’t do it exactly as you need, always start by doing a search for jQuery extensions online to see if anyone else has already solved the problem. If not, you can write your own extension and use it in your Web pages, and share it with the world if you’re so inclined. It is not very hard to write jQuery plugins.

Plugin Conventions

The jQuery community has created an enormous number of jQuery plugins, and over the last few years a few general guidelines for plugin development have emerged. You should always strive to follow these guidelines, because by doing so your plugins will integrate into jQuery effectively and will have the look and feel of jQuery, making your plugins easier to use.

  • Always name your plugin file using the format jquery.myPluginName[-version].js. The major and minor version numbers are optional, but by using this format for your plugins you follow the general convention, make it easy to find your plugin in a set of script files, and reduce the chance that you have name collisions.
  • Choose the name for your plugin carefully. If it becomes popular, you’ll not want to share a name with other plugins. Some authors include a subprefix after “jquery” in the name. So, if AppDev were to begin producing and sharing jQuery plugins, we might name our files jquery.appdev.myPluginName[-version].js. That would reduce the chance of filename collisions. And name the plugin method carefully to avoid collisions with other jQuery methods and plugins others may use in their Web pages.
  • Plugins can either return a scalar value or the matched set so that you can chain jQuery methods together. If it makes sense for the plugin, you should always return this to support chaining.
  • Always write your plugin so that it is usable with both the full jQuery method name and its $ alias.
  • Avoid a long list of arguments for your plugin. It’s fine to allow lots of options, almost mandatory, but limit yourself to a small number of arguments and make one of them options, through which the user can pass multiple values. This will mimic how most jQuery Library methods work.

It would be well worth your time exploring various popular jQuery plugins available and learn the best practices and conventions that other developers are using. Even if you don’t share your plugins with the world, you can and should take advantage of the things that other people have found that work.

ldn-expertdkielyThis post is an excerpt from the online courseware for our ASP.NET 4.0 AJAX and jQuery Using Visual C# 2010 course written by expert Don Kiely.

How to Get Started With Video Tutorials for C#

c video courseThere are a lot of details to learn when you want to become an expert in a programming language like C#. When you want to begin learning C# and you’re confronted with so much material to cover, sometimes it’s hard to figure out how to get started. That’s why taking a comprehensive online C# video course is often the best and simplest way to get started on learning C#.

To get started, be sure to find a series of video tutorials for C# that are supported by professional experts. These tutorials will focus on the information that will be most relevant to you as a C# beginner, because it will have been devised by people that understand what you’re trying to accomplish in your studies. As you proceed through your C# video course, be sure to take notes on what you want to come back to and have questions about. A useful component of online video tutorials is that you can always refer back to them to help you understand any steps you find more difficult than others.

Instructive video tutorials for C# can distill a lot of important and useful information into easy to follow steps. Because these tutorials are created by expert, professional developers and programmers you can be sure you’re learning the most essential facts on working with C# as a programming language. An online C# video course can be the sure-fire way to developing your skill set and crafting you into a top-notch developer.


 

 

jQuery: Sticking to Commitments

Microsoft made two commitments when it decided to embrace jQuery as its one and only client-side JavaScript library. First, they were going to replace their Ajax Library with jQuery in every appropriate ASP.NET Web technology, including both Web Forms and MVC applications. Second, they would contribute plugins and other extensions to the jQuery Library, primarily by adapting their work on enhancements for the Ajax Library to the jQuery Library. These contributions might end up in the core jQuery Library, as official jQuery extensions, or, as a last resort, freely distributed, open source extensions. We discuss one such extension, watermarking, below.

Watermarking

Watermarking is a cool, useful, and interactive way to prompt a user for the information that should go into a text box on a form. When the input element is empty, the watermark text appears, usually grayed out. When the user enters the field, the watermark text disappears and whatever the user types appears in the field. You can determine the styling of the watermarked element both when the watermark text appears and when the user text appears.

The Ajax Control Toolkit has a nice TextBoxWatermark extender that you can attach to a server-side ASP.NET TextBox control. Figure 1 shows the TextBoxWatermark demo from the ACT sample pages.

url

Figure 1. The ACT TextBoxWatermark demo.

There are many watermark jQuery plugins, but one of the simplest and easiest to use is the TinyWatermark jQuery plugin. You can use it with any input or text area element by specifying the watermark CSS class and the text you want to display when the input element is empty. You have the option of supplying the watermark text either as the value of the title attribute of the element or as the second argument to the watermark method. When the user submits the form, the plugin removes the watermark text. The jquery.tinywatermark- 3.1.0.js plugin file is a mere 623 bytes, and that’s not even minified or compressed.

Figure 2 shows watermarking in the sample page. The user has moved to the first text box and entered text, so the watermark text is removed and the text box has its default appearance. The other two text boxes show the watermark text and styling.

Screen Shot 2012-10-19 at 9.28.36 AM

Figure 2. Watermarking in action in the sample page.

The following HTML creates the three text boxes on this part of the page. Notice that the first two text boxes have a title attribute with the watermark text, while the third will have the text set programmatically. The first two are assigned the watermarked class as the means to identify them to the plugin that they are to have watermarked text inserted. The last one is assigned to the watermarkedAlt class to let the code treat it differently, as you’ll see in a moment.

 

The plugin uses the following CSS style to change the appearance of the elements that are watermarked. It merely sets the background color to #FFFF99, which is officially Pale Canary Yellow, and changes the font color to a medium gray.

 

The crux of the watermarking code is the following two statements, contained within the jQuery ready method so they’ll fire only after the page’s DOM is loaded in memory. The first statement watermarks the name and email text boxes on the page, using the title attribute’s value as the watermark text. The second statement watermarks the third text box, providing the watermark text as the second argument to the method. Both statements tell the watermark method to use the watermark CSS style to display the input element and watermark text.

We usually find that the first form of the watermark statement, using the title attribute for the watermark text, to be more useful and practical when there are more than a couple of elements on the page you want to watermark. That way the watermark text is with the element rather than separated in the page’s script code. But you’re free to use whatever form works best for you.

You can use whatever class name you want to identify the input elements to be watermarked, as well as the name of the CSS style used to format the elements with watermark text. The plugin is surprisingly functional for such a small size!

ldn-expertdkielyThis post is an excerpt from the online courseware for our ASP.NET 4.0 AJAX and jQuery Using Visual C# 2010 course written by expert Don Kiely.

Feel the Power of Web Design

Screen Shot 2012-10-18 at 2.34.12 PM

 

Knowledge is power and nowhere is this more apparent than in the world of web design. Having a strong, attractive, informative online presence can mean the difference between business success and failure, and companies will pay very well for someone to design a functional website for them. Knowing how to harness the potential of the internet with regards to website design, can increase your value at your current job, or provide a steady source of additional income.

If you are interested in adding web design skills to your portfolio, it would be wise to begin with an HTML5 tutorial. The latest version of HTML, HTML5 allows for even more flexibility in design and functionality. Combine your online HTML5 training with a C# video course, for example, and you will have an amazing combination of web design, and programming and networking skills, that will be useful no matter where you work. Knowledge really is power, so go forth, and become more powerful.

Pulling Out the Big Gun: The Ajax Method

Screen Shot 2012-10-18 at 11.46.55 AM

 

All of the Ajax features in jQuery are convenience methods that make using Ajax fairly easy for the most common scenarios. But when those convenience methods don’t work for you, you can pull out the big Ajax gun in jQuery: the ajax method. This is the method that all of the convenience methods ultimately use to make the actual call to the server. They do this by performing all the setup necessary and setting default values for various arguments that work for the particular Ajax task at hand.

You can make use of the ajax method directly to handle the scenarios not easily handled—or not handled at all—by the convenience methods. It has the deceptively simple syntaxes shown in the following code, taking just one or two arguments, url and options. With the first syntax option, you can pass the URL for the Web service and optionally follow it with as many option settings as you need. Or you can just pass a value for the options argument, one of which could be the url. This method is the embodiment of the saying that the devil is in the details, and providing the right options for what you want to do is the details you need to wade through to make the method work for you.

Let’s look at a simple example of using the ajax method by rewriting the ‘Hello World’ sample below. Here is the code from that sample:

The HelloWorldAjax.html page in the sample project uses the ajax method directly to make the Ajax call to the server. It uses the type option to make a GET call and the url option to specify the location of the Web service. Like the get and post methods, the ajax method is a utility function that doesn’t directly update a matched set of elements, so the method call uses the success event option to define a function to update the div elements on the page with the response text. This anonymous function uses the text method of the response object to extract the text from the XML returned from the Web service method and the html method to update the div elements.

The figure below shows the results of clicking the Get Info button on the page, where the code updates the three div elements on the page.

As you can see, using the ajax method is more complex than using the load method, both because you have to provide appropriate option values as well as because the method doesn’t directly update a matched set of elements. You have to write a function for the success event to update the page.

ldn-expertdkielyThis post is an excerpt from the online courseware for our ASP.NET 4.0 AJAX and jQuery Using Visual C# 2010 course written by expert Don Kiely.

Become a Tech Master in Record Time

Having someone tell you how to do something verbally is not always effective. Think of all the times you have attempted to fix an appliance or repair something while talking with support staff over the phone. It can be incredibly frustrating. Learning anything is much easier when you can physically interact with it while watching someone else also work with the tool or concept. This is especially true when it comes to learning how to use computer-related applications.

The internet has made it easier than ever to enjoy an experiential learning environment. With an online C# video course, a Visual Studio 2010 tutorial video, or an online MVC 3 tutorial, you can increase your programming and networking knowledge in a focused, hands-on way. It makes it easier than ever to increase your knowledge base. By watching someone work with the programs while interacting with them at the same time, the amount of time between your basic knowledge of a program and full mastery will be shortened considerably.


 

(function(){
var s=’hubspotutk’,r,c=((r=new RegExp(‘(^|; )’+s+’=([^;]*)’).exec(document.cookie))?r[2]:(function(){var c=’0123456789abcdef’,s=[],i=0;for(i=0;i<32;i++)s[i]=c[Math.floor(Math.random()*0x10)];return s.join(”);})()),w=window;w[s]=w[s]||c,
hsjs=document.createElement(“script”),el=document.getElementById(“hs-cta-c6aa8857-3e7e-4761-a672-02016ac3851d”);
hsjs.type = “text/javascript”;hsjs.async = true;
hsjs.src = “//cta-service-cms2.hubspot.com/cs/loader.js?pg=c6aa8857-3e7e-4761-a672-02016ac3851d&pid=153597&hsutk=” + encodeURIComponent(c);
(document.getElementsByTagName(“head”)[0]||document.getElementsByTagName(“body”)[0]).appendChild(hsjs);
try{el.style.visibility=”hidden”;}catch(err){}
setTimeout(function() {try{el.style.visibility=”visible”;}catch(err){}}, 2500);
})();

 

Start Learning!