Internet Explorer 10 tile shown not pressed (left) and pressed (right)

Adding a 3rd Dimension to CSS Transforms

Like CSS3 2D Transforms, 3D Transforms provides functions and values for the CSS
transform and transform-origin properties that apply geometric
transformations operations to HTML elements. CSS 3D Transforms extends the transforms
functions to enable 3D transforms. The rotate(), scale(),
translate(), skew(), and matrix() transform
functions are expanded to encompass the 3D space with a z-coordinate parameter—or
in the case of matrix3d(), an extra 10 parameters—and by spawning additional
transform functions, for example, rotateZ() and scaleZ().

A new perspective transform function gives transformed elements depth
by making distant points appear smaller.

CSS3 3D Transforms also adds a few new CSS properties. In addition to the transform and transform-origin properties, IE10 supports vendor-prefixed perspective,
perspective-origin, backface-visibility, and the flat value of transform-style.

Note: The markup examples in this post all use unprefixed properties as defined in the W3C standard. However, at this time all browsers that implement these features do so with vendor-specific prefixes. Please remember to add your browser’s prefix to the example markup when experimenting.

Perspective

The perspective transform function is important for 3D transforms. It
sets the viewer’s position and maps the viewable content onto a viewing pyramid,
which it subsequently projects onto a 2D viewing plane. Without specifying perspective,
all points in z-space are flattened onto the same 2D plane and there is no perception
of depth in the resulting transform. For some transforms, such as the translation
along the Z-axis shown below, the perspective transform function is essential for
visibly seeing any effect from the transform.

In the examples below
 is the original, untransformed element and  is the transformed element

transform: perspective(500px) translate(0px, 0px, -300px);		transform: translate(0px, 0px, -300px);
transform: perspective(500px) rotateY(30deg);		transform: rotateY(30deg);

A shortcut for adding the perspective transform to several elements is to use the perspective property on their parent element(s). The perspective property applies the perspective transform to each of its child elements:

The perspective-origin property can also be used in conjunction with perspective to shift the viewpoint away from the center of the element:

Below, you can see that shifting the perspective origin to the left makes the content to the right of the original perspective origin appear farther away.

backface-visibility

The backface-visibility property is useful for hiding the backface of content. By default, the backface is visible and the transformed content can be seen even when flipped. But when backface-visibility is set to hidden, content is hidden when the element is rotated such that the front side is no longer visible. This can be useful if you want to simulate an object with multiple sides, such as the card used in the example below. By setting backface-visibility to hidden, it’s easy to ensure that only the front-facing sides are visible.

CSS markup:

HTML markup for one card:

Creating six cards as defined above and giving each a style="transform: rotateY(ndeg)" property with a different rotation value n, results in this:

rotateY(0deg);	rotateY(36deg);	rotateY(72deg);	rotateY(108deg);	rotateY(144deg);	rotateY(180deg);

What’s happening in this example is that when there’s no rotation, you see the second div, the 8 of clubs—because it’s the one on top in drawing order. As we apply a rotation to the card and pass 90 degrees, the backface-visibility: hidden; property of the second div causes it to become invisible thereby exposing the first div, the card back.

3D Transforms with Animations and Transitions

Best of all, you can even use 3D transforms in conjunction with CSS transitions and
animations. If you are using IE10 or another browser that supports CSS3 Animations of CSS3 3D
Transforms, try this example of scrolling
text, built by animating the transform property.

This is the CSS markup that achieves the effect shown in screen shots below.

Try It Today

Try this out in IE10 on the Windows Developer Preview. The test drive demo Hands On: 3D Transforms can help visualize the possibilities that CSS 3D Transforms enables.

We’d love to see your creations!

—Jennifer Yu, Program Manager, Internet Explorer Graphics

Metro style IE runs plug-in free to improve battery life as well as security, reliability,
and privacy for consumers.
Previously, we wrote about how we use IE’s Compatibility View List to make
sure sites that have a plug-in free experience for other browsers provide that same
experience to IE10 users. This post describes a way for sites that continue to rely
on plug-ins to provide consumers browsing with Metro style IE the best possible
experience.

Developers with sites that need plug-ins can use an HTTP header or meta tag to signal
Metro style Internet Explorer to prompt the user.

HTTP Header

META Tag

Metro style IE10 detects these flags, and provides the consumer a one-touch option
to switch to IE10 on the desktop:

In addition to respecting these X-UA-Compatible flags specified by the
developer, the Compatibility View List can also specify a site that needs to run
in the desktop.

This mechanism provides a short-term mitigation. The desktop browsing experience
and most plug-ins were not designed for smaller screens, battery constraints, and
no mouse. Providing an easy way to the Windows desktop is the last resort when no
comparable plug-in free fallback content exists.

A plug-in free Web benefits consumers and developers and we all take part in the
transition. IE10 makes it easy to provide the best possible experience while you
migrate your site.

—John Hrvatin, Program Manager Lead, Internet Explorer

Over on the IE Test Drive, we have a fun piano
demo showing off BlobBuilder and File API capabilities. When you press notes on the piano, the site constructs two files:
an mp3 music file and an SVG file of the musical score. You can see how the size of both files change each time you press a note.
Press the play button to listen to your song, or download either the music file or the SVG score file by pressing the links
just above the piano keys. In the rest of this blog post I’ll go through how the demo works, focusing on the capabilities
of BlobBuilder and File API.

BlobBuilder Capabilities

BlobBuilder, like the name implies, is a way to build blobs on the client. The main method to do this is append. The append function accepts
three data types:

• Blob objects
• Plain text
• Array Buffers

The piano demo creates the mp3 file by appending blobs together, using one blob for each note. The demo creates the SVG file
of the musical score by appending text that contains the SVG source.

getBlob is another method available on the BlobBuilder object which returns a blob object containing all the
items previously appended. Here is a very simple example that uses BlobBuilder to create a text file:

One thing to note about the getBlob method is that when you call getBlob in IE10 and Firefox, it will clear out the contents
of the BlobBuilder object, so the next time you call append it will be as if you were appending into a new BlobBuilder object.
WebKit does not currently clear out the contents of the BlobBuilder after calling getBlob. Consider this example:

In all browsers, blob1 will contain the text “Hello World!”. However, blob2 will be different. In IE10 and Firefox,
blob2 will contain the text “BlobBuilder is great” while in WebKit-based browsers it will contain the text “Hello World!BlobBuilder
is great”. This discrepancy is still
under discussion in the Web Applications working group.

Getting Blobs via XHR

The File API makes it easy to access files selected by the user, something I demonstrated in the
Magnetic Poetry demo. This is great when you want to incorporate the users own data into your site. However, in the
piano demo, I needed the note files to be built into the demo. When you want to work with blobs but you want to supply the
data, you can use XHR.

New to IE10 is the XHR responseType property. The responseType property supports four values: blob, array buffer, text, and
document. In the piano demo’s initialization method – getBlobs() – you’ll see the following:

One thing you may notice is that the demo only makes a single XHR request. It only downloads
one file which contains all the notes used in the demo. However, when you press a key in the demo, only a single note
plays and the site appends only a single note to the mp3 file. To make that work, after downloading the file containing
all the notes, the site slices the file using the File API slice method and extracts 24 individual notes. This is a great
performance savings versus having to download 24 individual files.

Creating the Music File

Once I have a blob for each note in the demo, creating the mp3 file is easy. Each time you press a key I call:

In order to update the file size, I get the blob and then get the file size.

Lastly because I know that the BlobBuilder object was cleared out when I called getBlob I just append the blob back in:

Creating the SVG File

Each time you press a key in the demo, you see a note added to the musical score. The musical score is drawn by a single
SVG element contained within a div with an id of “scoreContainer.” Each time you press a key, script runs which adds a note
to the SVG element and then the SVG file is created by appending the source:

In this case, I don’t refill the svgBlobBuilder because I want to start with a clean slate the next time the user presses
a key.

Saving Files to Disk

The last part of the demo is saving the files to disk. When you press the “Music File” and “Musical Score File” links on
top of the piano keys you will be able to save the file though an experience that feels just like downloading a file:

Note that the notification bar is not available in the Platform Previews. Instead, a save dialog is presented.

Each link calls either saveSong() or saveSheetMusic(). Looking into each of these methods will reveal that they use the msSaveOrOpenBlob
function:

msSaveOrOpenBlob and msSaveBlob are two methods available in IE10 which let sites ask the user to
save a blob to their computer.

Calling msSaveOrOpenBlob will provide an option on the notification bar to open the file in addition to saving
or canceling. Calling msSaveBlob only provides the option to save the file or cancel. Though these functions
are not yet included in any standard, we believe they are extremely useful for writing end to end scenarios with blob data
and hope that they might become a standard at some point.

Creating the Piano demo was a fun experience and I’m excited to see how you will use BlobBuilder. Let us know what you think!

—Sharon Newman, Program Manager, Internet Explorer

Exploring the tool with an example IndexedDB App

To illustrate, I created an application that tracks my New
Year’s resolutions using IndexedDB. It stores and accesses my resolutions locally (on the system browsing the Web page)
and lets me add or edit them. The “Done That!” button removes the selected resolution from the list and removes its internal
representation from the database.

IndexedDB defines a database as a container of information. Each database contains object stores, which are
repositories for JavaScript objects. Each object contains attributes which can be queried using the API. If you’re familiar
with relational databases, object stores can be equated to tables and each JavaScript object in an object store represents
a record. However, the objects stored in an IndexedDB object store are treated as opaque entities. In addition, these objects
do not have to contain the same properties.

If a JavaScript object is analogous to a relational database record, then the properties of that object can be thought of
as columns (or fields) in a table. As a result, IndexedDB allows you to define indexes that identify object properties that
can be used to search the records in an object store. Thus, indexes allow you to traverse and search IndexedDB data using
the attribute values on a JavaScript object.

IndexedDB allows each Domain to have multiple databases. This
example uses one database: “NewYear.” The app stores my resolutions in an object store named “Resolutions” inside the
NewYear database. Each resolution is a JavaScript object with the following attributes:

• priorityId: Separates resolutions into different priorities
• name: Name of the resolution
• occurrenceId: Tracks how frequently the action of the resolution must be performed
• dueDate: Completion date of the resolution
• createdDate: Internal date when the resolution was added to the object store
• categoryId: Defines the type of activity for a resolution

Notice that not all attributes are visible from the application’s UI. In some cases, they are only internally used (e.g.
createdDate).

Here’s how the IDBExplorer tool displays the contents of the “Resolutions” object store:

The “Resolutions” object store also contains an index on the priorityId attribute named “priorityId,” which allows
the app to query objects using the priorityId property. The descriptions for the each priorityId value can
be found inside the “Priorities” object store and the descriptions for the occurrenceId values can be found inside
the “Occurrences” object store. Likewise, the descriptions for the categoryId values can be found inside the “Categories”
object store.

The tool uses a tree hierarchy to illustrate these relationships:

The IDBExplorer tool shows there are five resolutions in my database (two high priority tasks, two medium priorities, and
one low priority).

Using the application, I can add a new resolution:

The app retrieves the values for Occurrence, Priority, and Category fields from their respective object
stores using cursors and displays them to the user. The IDBExplorer tool lets you see how these values exist in the object
store. For example, selecting the Categories object store displays the available categories and their descriptions:

You can update a resolution by selecting it in the “WorkOn” screen and choosing “Edit.” After making any changes, selecting
the “Update” button will commit the changes and update the values in the “Resolutions” object store.

Using IDBExplorer in your Applications

You can include the IDBExplorer tool in your Metro style app or Web site. However, we recommend you not deploy the tool with
your app.

To add the tool to your site, copy and unzip the content of the
IDBExplorer package into your site. Your application will need to link to the IDBExplorer.html file contained inside
the IDBExplorer folder using either an iframe element or a new window.

In our example, we decided to host IDBExplorer inside an iframe element. . However, for normal development we recommend hosting
this URI inside a new window. This will allow you to have a side-by-side experience when debugging your database and application
without affecting your site’s user interface.

When hosting IDBExplorer, you need to pass the database name using the query string. In this example, this was done using
the src attribute of the iframe element:

When planning to host this functionality in a Metro style app, remember that Metro-style apps run fullscreen. As a result,
you should navigate to this URL, rather than opening a new window (you will need to add a Back button to the IDBExplorer.html
file in order to be able to return to your application). Alternatively, you can add an iframe element and display the tool
in it.

Enjoy the tool and let us know what you think!

—Israel Hilerio, Ph.D., Principal Program Manager, Internet Explorer

The PowerShell Deep Dive is going to be at The Experts Conference USA again this year! The event is being held in San Diego, CA from April 29 – May 2.

Registration is currently open, but we wanted to provide some info on a few changes to the event structure.

1. The PowerShell Deep Dive is now considered an official track at TEC.
2. The event will last the full 3 days. This is up from 1.5 days at TEC USA 2011 and 2 days at TEC Europe 2011.
3. The session format will be a combination of the past two events. There is going to be a combination of

• Full length 75 minute sessions
• The usual 35 minute Deep Dives (this is the main focus), and
• 5 minute lightning rounds

As usual, we will be sending some folks (probably ~3) from the PowerShell Team to this Deep Dive and will be kicking the event off with a Keynote.

Registration Info:
Early bird registration runs through the end of January and is priced at $1575. To sign up:

1. Navigate to the registration page
2. Click “Register for TEC 2012”.
3. Fill out the form. No registration code is needed

Speaker Info:
Good news for speakers! Since we are now an official track on TEC, speaker packages are being covered by the TEC organizers. The standard TEC speaker package includes registration, airfare and hotel.

Please send your session proposals for all three session types to TEC2012@quest.com before Feb 15.

Cheers!

Travis Jones [MSFT]
Program Manager – Windows PowerShell
Microsoft Corporation

We have just published a hotfix for Windows Virtual PC that addresses a compatibility problem when trying to install on an AMD Bulldozer system.

You can download it here: http://support.microsoft.com/kb/2519949

Cheers,
Ben

We released a new hotfix for Hyper-V today.

This hotfix addresses an issue where virtual machines may crash (with a STOP 0×000000D1, DRIVER_IRQL_NOT_LESS_OR_EQUAL error) when it is being live migrated.  While this problem is relatively hard to encounter – I would encourage anyone who is using live migration to plan to deploy this hotfix in the near future, as you do not want to hit this accidentally.

You can download this fix directly from here: http://support.microsoft.com/kb/2636573

Alternatively, it is also being distributed through Windows Update.  Unfortunately it is only available as an optional update though – so you will need to explicitly select to install it on your servers. 

Either way, this hotfix does require that you reboot the physical server so you will need to plan the deployment of the fix appropriately for your environment.

Cheers,
Ben

My last challenge for getting all of my server virtual machines over to fixed-size virtual hard disks is moving some of my Windows Server 2008 R2 virtual machines.  As a reminder, the goal here is to move a virtual machine on a large dynamically expanding virtual hard disk to a smaller fixed-size virtual hard disk. I have used the same technique as I discussed here – but for obvious reasons the process is quite different, as I cannot use any of the GUI tools.  Here is the process I followed:

1. Login to the virtual machine using an administrative account
2. Run diskpart
3. Check your disks with list disk
4. Select the disk you want to shrink (disk 0 in my case – so select disk 0)
5. Check your partitions with list partition
6. Select the partition you want to shrink (partition 4 in my case – so select partition 3)
7. Check how much space you can save with shrink querymax
8. Shrink the partition to your desired size (in my case – shrink desired=70000 – note that the value here is how much you are shrinking the partition by, not the new size of the partition)
9. Check that you are happy with the new size with list partition
10. Exit diskpart with quit
    
11. Once you have shrunk the partition(s) use Windows Server Backup inside the virtual machine (if you have not installed this – you can do so by running start /w ocsetup WindowsServerBackup – don’t worry, this does not take up much space and does not require a reboot to install)
12. Run a full backup on a Remote shared folder and provide a file share to use for storing the back
1. I have a share setup on my parent partition for backing up virtual machines to when I am doing this
2. The command that I used for this is: wbadmin start backup -backupTarget:\\Hyper-V\Backups –allCritical –include:d: –VSSfull
   
13. While the backup is going you can actually jump to the next step.  Creating a new fixed virtual hard disk
14. Open the New Virtual Hard Disk Wizard
15. Choose to create a new fixed size virtual hard disk that is the right size for your smaller partitions
16. Once the backup is complete, and the fixed virtual hard disk is created, shutdown the virtual machine
17. Open the virtual machine settings and replace the dynamic virtual hard disks with the new fixed size virtual hard disks
18. Boot the virtual machine using a Windows Server 2008 R2 installation DVD
19. After choosing your language, choose Repair your computer (instead of clicking on Install now)    
20. Then select Restore your computer using a system image that you created earlier and click Next
21. Click Cancel on the warning that comes up, and then click Next followed by Advanced…
22. Select Search for a system image on the network, followed by clicking Yes
23. When prompted – enter the network path that you used to create the backup and click OK
24. Select your backup from the table and click Next
25. Select the disks you want to restore and click Next, Next, Finish and Yes
26. The virtual machine will reboot automatically once the backup is restored

Once this is all complete, and once you have confirmed that the virtual machine is working properly, you can delete the dynamically expanding disk and the backup.

Cheers,
Ben

Yesterday I showed you how to easily convert a dynamically expanding virtual hard disk to a fixed size virtual hard disk.  But, how do you do this if you want to keep your fixed size virtual hard disk as small as possible?  Well, here is the process that I use for my Windows Server 2008 R2 virtual machines:

1. Login to the virtual machine using an administrative account
2. Open Server Manager and select the Disk Management node under the Storage node.
3. Right click on the partition that you want to shrink and select Shrink
4. Select how much you want to shrink the partition by
1. In my case I want to shrink a 250GB partition to 70GB:
   
5. Once you have shrunk the partition(s) open Windows Server Backup inside the virtual machine (if you have not installed this – you can do so by choosing to Add Features from Server Manager – don’t worry, this does not take up much space and does not require a reboot to install)
6. In Windows Server Backup select Backup Once…
7. This will open the Backup Once Wizard.  There is only one choice on the first page.  On the second page choose Full server
8. Then select to store the backup on a Remote shared folder and provide a file share to use for storing the back
1. I have a share setup on my parent partition for backing up virtual machines to when I am doing this
9. Complete the wizard and wait for the backup to complete:
   
10. While the backup is going you can actually jump to the next step.  Creating a new fixed virtual hard disk
11. Open the New Virtual Hard Disk Wizard
12. Choose to create a new fixed size virtual hard disk that is the right size for your smaller partitions
1. Here I am making a 70GB virtual hard disk for my WDS server:
   
13. Once the backup is complete, and the fixed virtual hard disk is created, shutdown the virtual machine
14. Open the virtual machine settings and replace the dynamic virtual hard disks with the new fixed size virtual hard disks
15. Boot the virtual machine using a Windows Server 2008 R2 installation DVD
16. After choosing your language, choose Repair your computer (instead of clicking on Install now)     
17. Then select Restore your computer using a system image that you created earlier and click Next
18. Click Cancel on the warning that comes up, and then click Next followed by Advanced…
19. Select Search for a system image on the network, followed by clicking Yes
20. When prompted – enter the network path that you used to create the backup and click OK
21. Select your backup from the table and click Next
22. Select the disks you want to restore and click Next, Next, Finish and Yes
23. The virtual machine will reboot automatically once the backup is restored

Once this is all complete, and once you have confirmed that the virtual machine is working properly, you can delete the dynamically expanding disk and the backup.

Cheers,
Ben

As I discussed yesterday – I have been working on converting my virtual machines from dynamic virtual hard disks to fixed virtual hard disks.  There are a couple of ways that you can do this.  The easiest way is to just convert the disks using Hyper-V.  To do this you need to:

1. Shutdown the virtual machine (do not put it into a saved state)
2. Open the virtual machine settings and select the virtual hard disks one at a time
3. Click the Edit button on the settings page:
   
4. This will open the edit virtual hard disk wizard with the selected virtual hard disk.  Choose the Convert option:
   
5. Next, enter a file name for the new fixed virtual hard disk:
   
6. Wait for the virtual hard disk to be converted (this will take a while)
7. Change the virtual machine settings to point to the new, fixed, virtual hard disk
8. Boot the virtual machine
9. Once you have confirmed that everything is working properly, delete the old dynamic virtual hard disks

While this process is fairly easy to follow – it has one big drawback.  The fixed virtual hard disk will take up the maximum space of the dynamically expanding virtual hard disk.  For some of my virtual machines I had created small dynamically virtual hard disks, so this worked well.  But for some of them I had created foolishly large dynamically expanding virtual hard disks.

Tomorrow I will document the process that I used for these virtual machines.

Cheers,
Ben