Blog Archives

Moving from Expression Web to Visual Studio 2012 for client-side HTML 5 Web Design by Don Burnett

A lot has happened this year in the world of Microsoft. Expression Studio has came to it’s end of life. This meant that Expression Web is now a community supported product.. This notice showed up on the Microsoft.com/Expression Website:

“The web is now about applications as well as traditional web sites, and this requires a new set of tools. Microsoft is committed to offering a unified approach to focus on web design and development features in Microsoft Visual Studio 2012.

As part of this consolidation, Microsoft Visual Studio 2012 provides the leading web development tool, which enables you to design, develop, and maintain websites and web applications. Visual Studio 2012 makes it easy to build CSS-based websites from the ground up with new CSS layouts, HTML5 support and full featured capabilities for working with and debugging JavaScript. Learn more about Visual Studio Express 2012 for Web and WebMatrix 2.

Expression Web is now available as a free download from the Microsoft Download Center, and no new versions will be developed. Customers who previously purchased Expression Web will receive support through the established support lifecycle. Expression SuperPreview Remote Beta will continue running as a service through June 30, 2013.”

Download Expression Web 4 SP2, Free Version

So many Expression Community members were really dismayed about this as they really love using Web for their website design projects. Many thought that Microsoft was abandoning client-side web development. Well the good news is that really is the case, Microsoft is just moving to support web apps over websites.

Pure HTML Template for Visual Studio

Step2b.png

Pure HTML is a basic Visual Studio project template for front-end web development using only HTML5, CSS3, and JavaScript that can be downloaded on CodePlex. Using this template, gives you a purely client-oriented web site ready for you to extend with just a few clicks.

The template works with the Professional, Premium, Ultimate, and Express for Web editions of Visual Studio 2012.  You can get Visual Studio 2012 Express for Web for free too.
.
The template is a installed as a visual studio extension. After you installed it you can create a new website

If you use VB:

  • File > New > Project > Visual Basic > Pure HTML Web Site
  • File > New > Web Site > Visual Basic > Pure HTML Web Site

If you use C#:

  • File > New > Project > Visual C# > Pure HTML Web Site
  • File > New > Web Site > Visual C# > Pure HTML Web Site

 

Expression Web Features versus Visual Studio 2012

While not quite the same, the user interface between the two products have a lot in common..

image

image

 

Feature comparisons: Publishing

Copy Website (FTP and site connectivity in Visual Studio 2012

image

Expression Web

image

Toolbox Comparison

Expression Web Toolbox Visual Studio 2012
image image

CSS Comparison Features (not a direct side-by-side comparison)

Expression Web Visual Studio 2012  
image image image

Code Editor Comparison Expression Web Versus Visual Studio 2012 (with Web Essentials Installed)

image image

While they look a lot the same the Visual Studio IDE is quite enhanced and can be enhanced further with additions including add-ons from companies like Telerik.com. You will find yourself right at home in Visual Studio 2012 with a passel of new features added to it.

Microsoft Web Essentials

image

Another useful add-on is Microsoft’s Web Essentials which you can download here..

Quoting the link:

TypeScript

Full support for TypeScript preview and compilation. Remember to install the official plug-in for Visual Studio to take full advantage of TypeScript http://www.typescriptlang.org/#Download

When a TypeScript file (.ts) is saved in Visual Studio, Web Essentials will compile it automatically and generate a preview.

TypeScript regions

Some people hate them, other people loves them. This is a feature that was in the original Web Essentials 2010 an by popular request now made it in the 2012 version.

image

Source Maps

You can produce Source Map (.js.maps) files automatically by enabling it in Tools -> Options.

Compiler settings

You can set all the compiler settings from Tools -> Options

Minification

When a TypeScript file is compiled, it can now also be minified to produce a much smaller JavaScript file.

Stylesheets

Option dialog

The most important features in Web Essentials can be turned on/off.

image

From version 1.9, options can be applied either globally or to individual solutions.

Vendor specific property generation

A lot of the new CSS 3 properties only work cross-browser if vendor specific properties are added. These include -moz, -webkit, -ms and -o.

The result is the insertion of the missing vendor specific properties in the right order.

If one or more of the vendor specific properties are already present, then only the missing ones are added.

Add missing standard properties

Invoke the Smart Tag to automatically insert any missing standard properties.

Keep vendor specific property values in sync while typing
Display browser support for properties and selectors

Just hover over any property name, value, pseudo or @-directive to get the relevant browser support matrix.

Modernizr support

Modernizr class names will now be bolded in the CSS editor, but more importantly, they will also be respected by the automatic hierarchical indentation feature of VS2012.

image

Intellisense for !important

By popular demand, here you go.

Always up-to-date with W3C and browsers

Web Essentials will automatically download the latest CSS schema files used to drive Intellisense and validation. It happens in the background automatically.

Intellinsense for “Add region…”

Regions are supported in the VS2012 CSS editor, but now it’s even easier to add them.

Choosing Add region… result in this snippet being inserted.

Intellisense for custom fonts

Click to open larger image

Intellisense for handling iOS scrollbars

VS2012 supports the different pseudo elements for customizing the iOS scrollbars. It can, however, be a little difficult to work with unless you know how to chain the pseudos correctly. That’s no longer a problem.

 

Intellisense for CSS 3 animation names

Inline URL picker for the url() function

Just start typing and the file system shows up in Intellisense.

Warning list guides for handling best practices
Warnings for browser compatibility issues

Is your stylesheet browser compliant? Let Web Essentials tell you.

More precise error messages
Removes warnings for using the \9 CSS hack
Document-wide remove duplicate properties

Intellisense for CSS gradients (all vendor specifics included)

Gradients are really difficult to write, so now examples are automatically inserted for all the different types of gradients, including the various vendor specific ones.

Option to hide unsupported CSS properties

Some of the CSS properties, such as the CSS 3 FlexBox Module are not supported by any browser yet. Now you can turn all unsupported properties and pseudos off.

CSS specificity tooltip

In case you’ve been wondering why certain styles are never applied in the browser, you can now see the specificity for each individual selector by hovering the mouse over them.

Option to hide “inherit” and “initial” global property values

Sometimes it can feel like these two properties are too noisy in Intellisense. Though they are completely valid, you might just want to hide them.

Easily darken and lighten color values

Place the cursor in a hex color value and hit SHIFT+CTRL+ARROW UP/DOWN to darken or lighten the color.

Move properties up and down

Place the cursor in a property and hit SHIFT+CTRL+ARROW UP/DOWN

F1 help opens the relevant specification

Uses http://realworldvalidator.com to provide more accurate information than the W3C specifications.

Supports team-wide color schemes

More info on working with custom color palettes coming…

Up- and down arrows control numeric values

When the cursor is in or next to a numeric value such as 5px, .6em, 15% or just 23, you can use CTRL+SHIFT+UP to increase the number and CTRL+SHIFT+DOWN to decrease it. The feature is known from FireBug.

This works for CSS, SaSS and LESS files.

CoffeeScript and LESS preview window

Both LESS and CoffeeScript comes with a preview window located at the right side of the editor. It shows the compiled output every time you save the document.

If any LESS file name is prefixed with an underscore (_file.less), then it won’t generate a .css file automatically.

Embed url() references as base64 strings

This will take the referenced image and base64 encode it directly into your stylesheet. You have then eliminated an HTTP requst.

If the base64 string becomes to long, you can easily collapse it.

Remember to optimize your image files before embeding them. Use the Image Optimizer extension to make it effortless.

Color swatches

All color types are supported, including the new CSS 3 formats.

Minification

Right-click any CSS file in Solution Explorer to produce a *.min.css file. Whenever the source .css file is changed, the .min.css file is updated accordingly.

image

You can also minify the selected text in the editor by right-clicking the selection.

Font preview on mouse hover

Image preview on mouse hover

Sort properties

A Smart Tag on every selector enables you to easily sort all the properties within the rule.

As of version 1.9, the sorting is no longer alphabetically but instea uses the order specified by the CssComb project.

Drag and drop support for imaged and fonts

Drag and image onto the editor from either Solution Explorer or your desktop and a background-image property will be inserted with the relative path to the image file.

Do the same with a font file, but in this case all font files with the same name but different extensions (.ttf, .eot, .woff, .otf) will be added to the same @font-face rule.

Convert easily between hex, rgb and named color values

Adds SmartTags to selectors for targeting specific IE versions

Specific hacks can be used to target specific versions of IE on a selector level. These are all valid according to the W3C.

Selector Intellisense for HTML elements, classes and IDs

CSS/LESS document outline

Get a sneak-peek inside any CSS or LESS file directly from Solution Explorer.

image

JavaScript

JSHint for JavaScript

JSHint is a really good way of making sure your JavaScript follows certain coding guidelines and best practices. The default settings are very relaxed, but you can turn on more rules through the new options dialog.

image

The error window updates as you type, so you don’t have to right-click the .js file to kick off JSHint. It happens as you write.

Each indiviual JavaScript file can override the global settings by using the official JSHint comment format descripted in the JSHint documentation.

In version 1.8 you can also enable JSHint to run on build.

JavaScript regions

Some people hate them, other people loves them. This is a feature that was in the original Web Essentials 2010 an by popular request now made it in the 2012 version.

image

ZenCoding for HTML

Watch this short demo video and read more about the ZenCoding syntax.

Lorem Ipsum generator

As part of ZenCoding, you can now generate Lorem Ipsum code directly in the HTML editor. Simply type “lorem” and hit TAB and a 30 word Lorem Ipsum text is inserted. Type “lorem10” and a 10 word Lorem Ipsum text is inserted.

This can be used in conjuction with ZenCoding like so: ul>li*5>lorem3

Markdown

See the compiled markdown in a preview window inside Visual Studio.”

Advertisements

Introducing Expression Blend for Visual Studio Part 1

image
Introducing Expression Blend for Visual Studio using XAML Part 1

By Don Burnett Expression Blend MVP 2011-2012

Just what is Expression Blend for Visual Studio ? Why is Expression Blend now a Visual Studio product ? Well as most folks familiar with Windows development know, the process is not just about the programmer but it is also about incorporating good design for your user. About six years ago Microsoft Expression Blend was introduced as a what you see is what you get interface design tool and versions of this program have appeared to support not just WPF (Windows Presentation Foundation) tools but also support platforms as Silverlight (for .NET web browser based applications), Phone 7, and Sketchflow prototyping. All of these tools (while containing it’s own code editor) always allowed you to integrate directly with the Visual Studio code IDE (Integrated Development Environment).

Blend Should Be Everywhere!

Late last year when Microsoft decided that it was going to start focusing on putting together a next generation Windows environment that became Windows 8, they decided to promote better synergy between all platform product groups. Blend has always been directly part of that and it made sense that Microsoft could start integrating all of these environments together. Developers find themselves in Blend too.  Out of this (and the fact that Expression Blend and Expression Encoder were tightly part of the same workflow for many users out there and Expression Design had been supplanted by Adobe Photoshop and Adobe Illustrator Importing directly from Blend it made sense that in a revamped environment that Blend would make sense to be part of Visual Studio and a version would come with or be available to every version of Visual Studio available out there including Express Editions. 

When the product groups inside Microsoft were re-organized and integrated Microsoft also began sharing code between the Visual Studio XAML designer group and the Blend Group to make a more consistent environment between Blend and Visual Studio. This has produced some spectacular results. It also meant a version of Blend should make it to all development platforms Microsoft supports.

With the announcement of Windows 8 Microsoft has also integrated HTML 5 designer capabilities optionally instead of XAML, into the mix, for Windows 8 METRO applications (which work much like apps do in Windows Phone 7)

A Tour of The New Blend Beta

image

From the first glance we see that the New Blend is not a METRO app itself, but looks familiar and runs in the “classic desktop” environment for now.. In fact, besides some better more readable icons, it looks very much like the same old Blend we all know and love. However, there are a FEW additions to support HTML 5 and CSS 3.  And yes Virginia there is support for CSS 3 Media Queries before you ask..

The Project Menu

image

The project menu has been re-designed.. In a WinRT/ Metro app you will notice some difference to your “Solution”. There is now a “Common” folder with some new files that MUST be present to make the application work, these include BindableBase.cs, a set of standard XAML styles for the application called “StandardStyles.xaml”, RichText Column support, and LayoutAwarePage.cs. There are also two default converters files present for all metro apps called a BooleanNegation converter and a BooleantoVisibility converter. They help you convert datatypes from the ones you use in code to the types that are required for on-screen manipulation.

Also present in this beta (though creating a sample datasource thus far isn’t present in this beta) is a sample datasource so you do have a template for creating and working with Sample Data. It can be easily modified to support your own data (more on this later).

There is also a package.appxmanifest  file that is required for metro apps. Much like windows phone apps the manifest allows the app to be identified and signed with the appropriate identity information and developer “signatures”.

The package.appxmanifest file

As you can see below the sample app manifest contains identity information, pre-requisites for OS Versioning, a resources section to provide Windows the basic information to hook the application into the METRO environment and a capabilities section much like Windows Phone to identify things like if the application can access the internet or not.

<?xml version=”1.0″ encoding=”utf-8″?>
<Package xmlns=”
http://schemas.microsoft.com/appx/2010/manifest”>

  <Identity Name=”5274dfe2-c8a0-408e-833c-f887ff6a9f1c”
            Publisher=”CN=don”
            Version=”1.0.0.0″ />

  <Properties>
    <DisplayName>GridExampleXAML</DisplayName>
    <PublisherDisplayName>don</PublisherDisplayName>
    <Logo>Assets\StoreLogo.png</Logo>
    <Description>GridExampleXAML</Description>
  </Properties>

  <Prerequisites>
    <OSMinVersion>6.2</OSMinVersion>
    <OSMaxVersionTested>6.2</OSMaxVersionTested>
  </Prerequisites>

  <Resources>
    <Resource Language=”x-generate”/>
  </Resources>

  <Applications>
    <Application Id=”App”
        Executable=”$targetnametoken$.exe”
        EntryPoint=”GridExampleXAML.App”>
        <VisualElements
            DisplayName=”GridExampleXAML”
            Logo=”Assets\Logo.png”
            SmallLogo=”Assets\SmallLogo.png”
            Description=”GridExampleXAML”
            ForegroundText=”light”
            BackgroundColor=”#222222″>
            <DefaultTile ShowName=”allLogos” />
            <SplashScreen Image=”Assets\SplashScreen.png” />
        </VisualElements>
    </Application>
  </Applications>
  <Capabilities>
    <Capability Name=”internetClient” />
  </Capabilities>
</Package>

For more information about setting up these capabilities, check out Microsoft’s information at:

http://msdn.microsoft.com/en-us/library/windows/apps/br211380.aspx

Creating a New Project

Upfront we notice that there are METRO style monochrome icons that are much more readable.. If we go to create a “New Project” we will notice a few new project types and templates.  There is HTML and XAML available for Creating a Windows 8/WinRT  Metro Style Application.

image

 

There are in-built templates for Blank, Grid, Split, Fixed Layout, and Navigation Style Apps.. But more on this a bit later.. Notice the Javascript support above for creating a METRO style app as well..

image

XAML support isn’t forgotten either with it’s own sets of templates.

Grid Applications

image


If you select a “Grid Application”, Blend will provide you with a “Single Page Project that navigates betwee groups of items and has dedicated “Master-Detail” pages to display Items.. Here is a view of the template’s master-detail pages in action.

image

GroupDetailPage.xaml

image

ItemDetailPage.XAML

image

We can deploy this skeleton code either directly to the environment or test it on a Windows Tablet Device Simulator..  We can set this up through a panel in the “Platform”  panel in Blend..

image

You can set the screen size to match a particular on market device’s resolution and DPI when previewing and check your layouts with Horizontal and Vertical functionality (portrait/landscape) as well as scaling.. You can set the deploy target also to your local machine instead of the Emulator/Simulator as shown in the graphic above..

Deployed Locally

image

Deployed to the Simulator

image

Other Blend Features In XAML

The Visual State Manager

In the past if you were not a Silverlight designer you will not notice any default states or defined states in the visual state manager. In a WPF application you had to define all of these yourself..  For METRO apps there are are few already defined states that accommodate different screen modes..

image

These including Landscape (full screen) mode, Filled Mode, Portrait mode, and Snapped mode. I highly recommend you do not delete any of these unless your “METRO” app is only supporting one of these modes which again is HIGHLY NOT recommended..

You can use the state manager to create and handle state management of your own on-screen items, controls and their transitions, by creating more visual state groups for your own elements in XAML

Timeline Animation

You can also create complex animations with the OBJECTS and TIMELINE storyboard option.. In this example I am creating a new storyboard on one of the new METRO “FlipView” controls..

image

image

 

Collections

Collections in XAML for “Metro Apps” have been improved over other versions of XAML you can now create a CollectionView for items that are grouped on to your page.. Setting the source for a Collection of elements to be used on a page is now quite easy in XAML. In our UserControl Resources we just add a CollectionViewSource Element as seen in the XAML  below…

<common:LayoutAwarePage
    x:Name=”pageRoot”
    x:Class=”GridExampleXAML.GroupedItemsPage”
    xmlns=”
http://schemas.microsoft.com/winfx/2006/xaml/presentation”
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
    xmlns:local=”using:GridExampleXAML”
    xmlns:data=”using:GridExampleXAML.Data”
    xmlns:common=”using:GridExampleXAML.Common”
    xmlns:d=”
http://schemas.microsoft.com/expression/blend/2008″
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
    mc:Ignorable=”d”>

    <UserControl.Resources>

        <!– Collection of grouped items displayed by this page –>
       
<CollectionViewSource
            x:Name=”groupedItemsViewSource”
            Source=”{Binding Groups}”
            IsSourceGrouped=”true”
            ItemsPath=”Items”
            d:Source=”{Binding ItemGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}”/>
    </UserControl.Resources>


Blend Goes Native with C++ Project Supportimage

Many programmers were shocked to hear that you could create a Windows Metro App UI now in HTML and JavaScript, but may the most exciting and OVERLOOKED support in Blend for Visual Studio is now the ability to create Windows apps directly in Windows own Native C++ environment.. Before Native Code in XAML was impossible unless you had created an App for Windows Embedded with Visual Studio 8 and the “WEST” Toolkit using Silverlight with C++.. Now because of the merge of product groups Microsoft has now enabled non .NET coding. They have also taken most of the pain away of trying to write a SKELETON “metro” app for those new to Native code development with Windows. Microsoft also has documented these templates well for new users.. Here is a link for you:     http://go.microsoft.com/fwlink/?LinkId=234232

Lets take a look at our ItemDetailPage.xaml’s C plus plus (.CPP) and header (.h) files..

ItemDetailPage.xaml.h

//
// ItemDetailPage.xaml.h
// Declaration of the ItemDetailPage class
//

#pragma once

#include “pch.h”
#include “Common\LayoutAwarePage.h” // Required by generated header
#include “Common\RichTextColumns.h” // Required by generated header
#include “ItemDetailPage.g.h”

#include <collection.h>

namespace Application13
{
    /// <summary>
    /// A page that displays details for a single item within a group while allowing gestures to
    /// flip through other items belonging to the same group.
    /// </summary>
    public ref class ItemDetailPage sealed
    {
    public:
        ItemDetailPage();

    protected:
        virtual void OnNavigatedTo(Windows::UI::Xaml::Navigation::NavigationEventArgs^ e) override;
    };
}

ItemDetailPage.xaml.cpp

//
// ItemDetailPage.xaml.cpp
// Implementation of the ItemDetailPage class
//

#include “pch.h”
#include “ItemDetailPage.xaml.h”
#include “DataModel\SampleDataSource.h”

using namespace Application13;
using namespace Application13::Data;

using namespace Platform;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;
using namespace Windows::Graphics::Display;
using namespace Windows::UI::ViewManagement;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Controls::Primitives;
using namespace Windows::UI::Xaml::Data;
using namespace Windows::UI::Xaml::Input;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::UI::Xaml::Navigation;

// The Item Detail Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234232

ItemDetailPage::ItemDetailPage()
{
    InitializeComponent();
}

/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name=”e”>Event data that describes how this page was reached.  The
/// Parameter property provides the initial item to be displayed.</param>
void ItemDetailPage::OnNavigatedTo(NavigationEventArgs^ e)
{
    auto item = safe_cast<SampleDataItem^>(e->Parameter);
    DefaultViewModel->Insert(“Group”, item->Group);
    DefaultViewModel->Insert(“Items”, item->Group->Items);
    flipView->SelectedItem = item;
}

The code isn’t that much different than .NET code for the skeleton and the new templates take much of the guess workout and make doing a C++ native app even for beginning programmers a doable thing.

One of the first things I noticed about C++ apps is that they are already nicely touch enabled and on the properties panel there are some new options..

image

To Be Continued…

Part two will continue our look at Blend for Visual Studio and what’s missing from Blend Ultimate and will look at Visual Studio 11 Integration and HTML 5/CSS 3 layout based applications for Windows 8..

The Microsoft Expression Blend Team launch BlendInsider

This is very cool, check this out.. The Blend Team just launched their new blog at BlendInsider.com

image

Videos Include XAML and HTML

http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-504T/player?w=601&h=327

http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-486T/player?w=601&h=327

Google IO 2011

HTML 5 Session from Google IO 2011

HTML 5 and Beyond

http://www.htmlfivewow.com/