Mark Chouanard

Challenge

Developing both native and web application components targeted to different platforms can prove to be challenging for developers running the Mac OS and Windows VM on the same physical machine.

When developing a native iOS client application using Xcode on the Mac and an ASP.NET MVC web application using Visual Studio 2012 running on Windows Internet Information Services (IIS), I needed the ability to make a Web API call from Xcode’s iOS Simulator on the Mac to the IIS web application running on the Win7 VM.

With a few simple steps you can setup your Mac to allow http access between the Mac OS and the Windows VM to make development and testing much easier.

Solution

Windows7 VM (Parallels)

1. From the Windows Control Panel, open up the Windows Firewall client.
2. From the Firewall client, click on Advanced Settings and select Inbound Rules.
   
   
   
   
3. Scroll down to the rule titled: World Wide Web Services (HTTP Traffic-In), right-click and select Properties.
   
   
   
   
4. Set to Enabled.
5. Open a Windows Command Prompt and type: ipconfig to get your current IP address.
   
   
   
   

Mac OS

1. Use the current IP address when calling the web application URL within your iOS code on the Mac.
   
   
   
   
2. Now you can access the IIS web server on the Win7 VM from any browser or web tool residing on the Mac.

Typography in Web Design

For many hardcore developers, the design of a web application may be no more than an afterthought. Unless they have the luxury of working with a designer, or they themselves have a keen sense for design, the developer can easily overlook the need or importance of typography and focus on only the basic visual or graphical design elements that go into building a web application.

This may be why HTML/CSS Frameworks like Twitter Bootstrap, HTML5 Boilerplate and 52 Framework are becoming more and more popular today. These frameworks can provide a quick and easy way to build nice looking web applications without spending much time on the design process. But even beyond making a website or application visually appealing, typography is most likely the last thing many developers think about. 

Typography can be a great way to enhance the visual appearance of your application and improve the overall user experience. Selecting the appropriate font types, weights and stylings can help convey ideas, importance and emotion to the user. It can also improve the readability and comprehension of your content and greatly enhance usability and the overall quality of your design.

Choosing and Using Fonts

The challenge with selecting fonts for the web is knowing how they’ll actually render for the user. For the fonts to render as intended by the designer, the browser must have access to the dependent font files which may or may not be available depending on the operating system in which the browser is running. 

For many years, web designers focused on using only the fonts which were likely to be present on a wide range of computers. Those considered ‘web-safe’ were: 

• Arial
• Courier New
• Helvetica
• Times New Roman
• Trebuchet
• Georgia
• Verdana

This short list offered little variety to the designer. Work arounds for this limitation included using images of text or embedded replacement techniques which required a browser plug-in (can you say Flash?). The problem with both of these methods was that the text in this form was not semantic, selectable or searchable.

Enter Web Fonts

One solution to this limitation was the development of web fonts, which could be available on any platform and served from an http request. In addition to having accessibility to a much wider range of typefaces, web fonts are also semantic, selectable, searchable and translatable into other languages.  And because most all of today’s browsers support the use of web fonts, they can be reliably rendered on most any platform.

Integrating Web Fonts in Your ASP.NET MVC Web Application

So, how can you use web fonts in your ASP.NET MVC application? Here’s a simple, step-by-step procedure for adding web fonts to a generic ASP.NET MVC Internet application.

1) Choose a font service. There’s a growing list of web font services and providers which offer a wide array of free and paid for services. A few of the more popular services, in no particular order, would be:

• Google Web Fonts
• Fonts.com
• Typekit
• Font Squirrel
• Webtype
• Fontdeck
• WebINK

I have a subscription to Typekit which I use for all of my web projects. For the purposes of this demonstration I’ll be using Typekit, but know that most all other font services work basically the same way.

2) Select the desired font. Typekit has a large library of available fonts and a rich user interface which allows you to see how the font will render. You can easily browse the font families by properties, classification or recommended use. For this demonstration, I’ve selected Bistro Script Web.

3) Generate your JavaScipt code provided by your font service:

 4) Copy the JavaScript snippet into the <head> tag of your view engine’s _Layout.cshtml (Razor) or Site.Master (ASPX) file.

5) Generate your css selectors for the desired font families:

6) Add the css code into the Site.css file. For this example, I’ll change the font-family for the entire application by adding my “bistro-script-web” font to the css selector for the body tag:

NOTE: The generic ‘cursive’ font is set as a fallback font in the unlikelihood the primary font is unable to render correctly. 

And that’s all there is to it. Now, instead of the default font-family: ”Segoe UI” which renders the page like this:

You can see the web application now uses the Typekit “Bistro Script Web” font which renders like this:

Now of course in the real world, I’d never recommend using a script font like this for an entire application. The point of this exercise is to easily show the difference between how the default font and web font render in a browser and to demonstrate how easy it is to implement web fonts into your projects.

Conclusion

The availability of web fonts opens up a wide range of possibilities for web designers and developers to use typography to enhance their web designs and to clearly deliver content and improve usability. As I hope you can see from this simple demonstration, implementing web fonts in an ASP.NET MVC web application is quick and easy. 

Update: This article has been translated toSerbo-Croatian by Anja Skrba from Webhostinggeeks.com

Creating new records in a grid view often requires the need to initialize default values in the edit template.  This can be easily accomplished using the InitNewRow property on the MVC GridViewSettings class.

Technical Architecture

1. ASP.Net MCV3
2. Razor View Engine
3. DevExpress v11.2 MVC Grid View Extension
4. Entity Framework v4.2

Requirements

1. When the user creates a new record, initialize the ‘Month’ and ‘Year’ values.
2. Default values to the current month and current year.

Execution

      settings.InitNewRow = (s, e) =>
      {
           e.NewValues["month"] = System.DateTime.Now.Month;
           e.NewValues["year"] = System.DateTime.Now.Year;
      };

Result

You can see that the Month and Year fields are initialized to the current Month and Year whenever a new record is created.

Objective

On a recent project, I was asked to create a simple dashboard component that would display the background color of a specific cell within a DevExpress GridView, based on the comparison of values between two columns in the row.

Technical Architecture

1. ASP.Net MCV3
2. Razor View Engine 
3. DevExpress v11.2 MVC Grid View Extensions 
4. Entity Framework v4.2

Requirements

1. The user enters both a ‘Target’ and ‘Actual’ value, by month and by year, into the DevExpress Grid View.
2. The ‘Actual’ columns grid view cell will change to green if the ‘Actual’ value is greater than, or equal to the ‘Target’ value.
3. The ‘Actual’ columns grid view cell will change to red if the ‘Actual’ value is less than the ‘Target’ value.

Execution

Utilizing the GridView’s HtmlDataCellPrepared property event handler, I implemented the following code:

settings.HtmlDataCellPrepared = (s, e) =>
{
    if ((e.GetValue("target") != null) && (e.GetValue("actual") != null))
    {
        Int32 iTargetValue = Convert.ToInt32(e.GetValue("target"))  
        Int32 iActualValue = Convert.ToInt32(e.GetValue("actual")); 
        if (e.DataColumn.FieldName.Equals("actual"))
        {
            if (iActualValue >= iTargetValue)
            {
                 e.Cell.BackColor = System.Drawing.ColorTranslator.FromHtml("#BFFFD7");
            }
            else
            {
                e.Cell.BackColor = System.Drawing.ColorTranslator.FromHtml("#FFBFBF");
            }
        }
    }             
};

Result

The resulting output appears as desired with the cells of the ‘Actual’ column displaying a green background when the value is greater than or equal to the ‘Target’ value. A red cell bacground displays when the ‘Actual’ value is less than the ‘Target’ value.