YAB (yet another blog) Site

Posts tagged ‘Windows 8’

Tip #2 – Windows 8 (03/14/2013)

Is Windows 8 UI, pretty new to you?

Are you finding difficulty in performing the ‘Shut Down‘ or ‘Restart’ or ‘Hibernate’ ?

  • To shut Windows 8 down, just move the mouse cursor to the bottom right corner of the screen, click the Settings icon; Get into the Power option
  • Or press Win+I – and you’ll see a power button. Click this and choose ‘Shut Down’ or ‘Restart’
  • Some of the tricks available in previous versions of Windows still apply. Press Ctrl+Alt+Del, for instance, click the power button in the bottom right-hand corner and you’ll be presented with the same ‘Shut Down‘ and ‘Restart‘ options
  • And if you’re on the desktop, press Alt+F4 and you’ll be able to choose ‘Shut Down‘, ‘Restart‘, ‘Sign Out‘ or ‘Switch User‘ options.
Advertisements

Tips n Tricks

Recently, I had to prepare few Tips n Tricks for an internal technical newsletter. Lemme keep posting these short write-ups.

 

Windows 8 – Tip #1 (03/12/2013)

Are you missing the Sweet Start Menu in Windows 8? And the App Shortcuts?
Here’s few easy shortcuts to replace Start Menu

  • Press Windows Key + Q: launches the App Search Screen. You’ll get to see all apps installed in the box. You can also search to filter in this list of apps
  • Another way is to Press CTRL+Tab in the Start screen to switch between Start Screen and All Apps Screen
  • Also, try the Win+X to open a small pop-up menu with key system administrative options

Design characteristics of Windows Store App

Windows 8 is not just about the Operating system. More than the OS, there comes a new Design language or paradigm that needs to be adhered while building the new breed of Windows 8 Applications. Whether Microsoft calls it Metro design or Modern App Design, the name doesn’t matter. However, the design paradigm for a Windows Store App is very strong and defined in its own way. As a reminder, the Windows 8 Store Applications are not just meant for Desktops any longer; also suitable for other form factors like a Tablet or a Surface or new class of touch and type laptops. They also have a very high potential to be migrated/ported to the smaller form factors siblings like a Mobile phone. It is imperative that a developer should keep these important aspects in mind before could design and develop a Windows Store App.

In this write-up, we try to cover the features of Windows Store App as a compilation and provide an overview, more as a teaser so that developers are encouraged to deep dive with the links provided against each of these design elements. Before we get into the individual aspects, there are few basic underlying design principles based on which each one of these aspects are built upon

  • Show pride in craftsmanship
  • Be fast and fluid
  • Do More with Less
  • Be authentically digital
  • Win as one

UI Layout

First and foremost, one striking similarities between all Windows Store app is the way UI for the application to look alike. We can take the cue from the way the start menu is organized. Look for the spacing on the sides. More space on the Left and ample space for the title and the main content is focused to the area where user has high visibility and focus. UI Layout style for windows store app has evolved from much Usability research and understanding patterns. Layouts are driven by the philosophy of “Showing pride in craftsmanship”.

The application supports different layouts like a landscape or portrait or snapped layout. A device can be rotated so that the view is changed from Landscpe to Portrait. The windows store application should support all these three layout models.

An application can be snapped to the Left (or right) side of the screen to enable multiple window view at the same time. The snapping enhances multi-tasking ability.

As mentioned earlier these application are tuned to be viewed across multiple form factors, so they need to be able to get resized according to the host screen size and also scalable to the pixel density offered. The images used in the application should be ensured to have good resolution when viewed in different formats or form factors.

Navigation framework

All Windows Store Apps has one Window (Of course no chrome, no close buttons, title bars or neither status bar) and takes up maximum space possible on the screen. However, the single window supports multiple views. The Windows Store apps supports multiple layouts and views to create a ‘Fast and fluid’ harmonious user experience across different form factors and devices. The navigation from one view to another should happen with no distraction.

The navigation framework in the application supports going back and forward. Each view would have a View header, Back Button (if not the first page), and the content view. The content view can be a Hub page or Content details page. Windows App store supports multiple templates to fill content. Read more about the templates here.

Care about the Edges

The System has special meaning for each of the corners in the display. For example, when the user hover on Lower left corner it takes them to start or previous app and top right corner brings in the Charm bar. Application we design should keep these special corners in mind so that these corners are preserved only for the system usage and no meaningful content or event is overlapped.

Effective use of App Bars

App Bar is the primary command interface. In the App Bar, navigation, special commands and tools to the application is displayed, typically. While it is tempting to add too many buttons into the App Bars, it is the time to revisit the basic design principles of windows store apps: “Do more with less”. Unlike a Desktop application, design philosophy of Windows store app is to provide less number of buttons and focus more on the content itself. Having said, App Bars are optional interface touch points for the application which can be effective in providing needed functionality. Also the App Bars do not clutter the UI and is invoked, only when it is required, through swiping of finger from the top or bottom of the screen, Right mouse click also invokes the App Bar. App bars are not the place for doing commands or events related to Contracts (we’ll find details later in this article about contracts) as Charms are the perfect place for them.

Live Tiles update

Gone are the days of static Icons. Tiles represents the applications in the Start screen. They are not just picture in different sizes (two size: Square and wide), they can have live updates from the application. The application can have Tile updated in the start screen even if the application is running in the background. Live Tiles are very useful to indicate notifications to the User even without entering or starting the application.

Some of the very useful implementation of Live Tiles includes a Mail application that gives the subject preview and a news app giving latest headlines. The User can disable the live updates for a tile, as a preference.

The Notifications on the live tiles can be text, images or just an app logo or could be notification badge (like the number in the Store Tile above). The Notifications on the live tile can be cycling (System can handle up to 5 notifications). Developer could also build a Secondary Tiles and that can work independent of the main tile.

Touch First

Windows 8 is all about Touch first interface and also animations that be both fast and fluid too. Touch interface brings in more ways in which user can interact with the application through gestures. One of the most touch-optimized feature is Semantic Zoom. It helps the user navigate large amount of content, through a pinch gesture, User can zoom-in and zoom-out of the content semantically. For instance, in the Zoomed-in can show the detailed contents and zoomed-out can show the overview categories.

Also, do not forget the good old Keyboard & Mouse, Windows 8 is still about desktop too. Applications should be able to still work in the same way where Touch is not available but mimic the events using Keyboard and mouse.

Event Model and App Life cycle

Windows run time or the system takes care of application life cycle management. So the User need not explicitly close or terminate the application. That also brings an interesting dimension to the application, always keep the state of the application saved internally. So that, when the application is moved from Suspended state back to active state, the User experience is improved with the state restored to the place it was before being suspended.

More about the guidelines on suspend and resume. When an application is started, instead of getting into the initial state, it is suggested to load from the state were the user has left, the previous time. This gives an impression to the end-user that, the application was always running in the backdrop. When the application loads, check for the saved application state and restore the state, wherever it could. Always handle the Suspend event to release heavy objects and resource handles and also use it to save the state of the application.

Contracts

Apps needs to talks to the other Apps and also to the system. In order to make this experience better, Windows 8 application paradigm introduces ‘Contracts’, it is the glue that bonds app with Windows 8 and other apps. Contracts is like an agreement between one or more apps. Contracts define the requirements that apps must need to interact. When two application that has implemented the same contracts, they can communicate through the contracts. For instance, when App 1 wants to search the content from Application 2, App 1 uses the search contract exposed by App 2. Contracts are different than the Extensions. Typically, Extensions is more an agreement between an App and the Windows system or may be customized and extended for other applications to use it further.

Some of the Contracts that is commonly shared across applications are

  • Search
  • Share
  • Play To
  • Device

Charms is the vertical bar that is invoked when the User hove on the Right Top Screen corner. Charm is the place where windows has hosted the popular contracts like Search, Share, Devices and Settings. The Contracts in the charm work in context of the application that’s loaded. When Application 1 is running the settings in the charm is in the context of the Application 1. Similarly, Search and Share are related to the App that’s running than the system itself.

In order to make a better App, the developer needs to expose right set of contracts (like Search, Share, Device, etc.). On the contrary, when search is not a key feature of the application, developer may refrain from adding the Search contract as part of the application. Because the implication is, when the other applications that intend to search ends up with a bad experience.

New devices and new horizons

While the applications work on the desktop, the Tablets and Mobile platform brings in other new opportunities to unleash. Mobility opens up new gadgets and techniques. While it comes to mobility, it is about building applications that can be used on the move not just for those devices which can be portable. In order to make that happen, the application could tap the potentials of devices and sensors that are available in Tablets:

  • Cameras, pictures/Music from external Storage devices
  • Proximity Sensors and Gestures
  • Geo Locations aware applications
  • Accelerometers

Above all, when we target the application to work across desktops too, we need to have alternative approaches to make these applications work gracefully in the laptops and desktops that do not have these features.

Accessibility, Globalization and Localization

Invariably, any application that is targeted for global consumption, needs to focus on accessibility features like Screen reading, keyboard accessibility, and visual accessibility (making screen elements bigger). Globalization and Location, like any other application is important to make a wider appeal cross different users.

This write-up is more an overview and trying to provide a teaser on various aspects of the design philosophy that needs to be kept in mind while coming up with Windows Store App. Further deep dive into links provided against each aspects would prove to be beneficial. In addition, Learn to build Windows Store apps is a good place to grab more details on Windows Store App design and development.

Happy Programming.

Reference

Learn to build Windows Store apps

Windows 8 on the go

For weeks now, I’m running my Windows 8 using the open source Oracle Virtual Box. Initial Wow factor, enthusiasm to play with Metro style apps kept the ball rolling very fast. The Host and the Guest spared 2GB RAM each. All is well, until I started working with VS 11 Developer preview in the guest OS. The wait time between clicks kept on increasing. Obvious that 2GB of RAM is no more sufficient enough for dev box. I could not afford a new separate PC for Windows 8. Forget about that in the corporate environment, it’s way not possible through red tapes and governance model they have. Then, one day on a coffee talk, someone was explaining about the Linux on the go option. Wherein, User can carry their entire OS in a USB Thumb drive. After few initial failed google’ing, I came across the Build presentation by Steve Silverberg, which mentioned about Windows 8 on the GO…. To be frank, my initial thought was, it is going to be as easy as To-go order at McD. Later, I realized, it is going to cost me some round trips.

That’s interesting. I decided to try the Windows 8 on the go. Before we get carried away, let us understand, what’s this Windows 8 on the go?, By Windows-on-the-go means, installing Windows operating system on a removable/distributable disk like a USB pen drive or USB Hard Disk. When Windows 8 is installed on the USB drive, plug the USB drive into a particular computer (it can be multiple computers) and alter the boot sequence to boot from USB, for the first time, it installs required drivers for the devices around in that computer and reboots, from next time on, it boots straight into Windows 8 on the USB distributable. This is not something unique to Windows 8. Linux OS flavors have been doing this for years now. And infact, Enterprise edition of Windows 7 too have tools to make windows distributed on the go. Microsoft has been optimizing Windows 8 to run from flash, and to use flash storage, over a USB bus. Also, I read that this is not perfect, yet but better. 

Some pre-requisite for this to work on host computer,

The computer is to have either USB 2.0 or USB 3.0 and BIOS to support boot from USB and UEFI. And on the deployment side, I’m supposed to have a USB pen drive which is 32GB minimum. Portable Workspace Creator (pwcreator.exe) rejects anything below 32GB! Why is this restriction? When my Windows 8 on VDI can run on anything as low as 15GB of space! I could not find any answers. The smallest foot print virtual drive I tried for a Windows 8 32 Bit OS was 15 GB, in size. So, I wanted to still try this On-the-go stuff with a 16GB USB drive (Crazy, am I !?).

As a preparative step, with all the enthusiasm, I ordered a 16 GB HP Pen drive from FlipKart for Rs840. Flipkart took three days to deliver (a nice safe 7″ packing for a  1″ long pen drive). Now that I’ve a USB drive, I wanted to use PWCreater.Exe to load the image of Windows 8 into the portable drive.

The first bad news: I searched the entire Windows 8 systems folder for the Portable workspace creator. There’s no file called PWcreator.exe in the entire machine. Where did it go, what happened to all those Web sites which talked abt ‘The Portable Workspace creator’. Alas, this is available only for Enterprise Edition and not available part of the preview version! Bugged! MS restricted it for Volume licensing Enterprise customers only.

Back to Google, I came by one write-up by Günter Born. The time I started looking for this option only a handful of initial writers wrote about this approach. By the time, I get this completed; I could see a lot of blog posting on the same topic. Thanks to Born for this write-up. Otherwise, I would have stopped and waited for inclusion of PWCreator. Born also tried the same steps and options, I had thought but finally cracked a way out! The idea is, make use of DiskPart (Disk Partition tool) to create a clean primary partition and use an Imaging tool to copy the windows image into the USB drive and as a final step move necessary files into BOOT sector so that when UEFI/USB boot enabled computer can boot from the OS in the removable drive. Ta da!

Windows 7 rather Vista onwards provided an Automated Installation Kit. Part of this free downloadable, we get a command line tool called IMAGEX.exe, to create and deploy Windows Disk Images in the Windows Imaging Format (WIM). You can locate the WIM file under <Drive:>\Source\install.wim. WIM is a file based image format. Of late, windows setup themselves uses WAIK APIs to install the fresh instance or cloned instance of the OS. One deterrent was the download for AIK for windows 7 itself. It is hosted in one of the slowest download servers! It took very long time to download, that too, multiple times, for a single a 1.66 GB file! FlashGet is of good use, here.

Once WAIK got downloaded, I installed the AIK toolkit in the host machine. Then build an ISO of entire Tools\X86 of the toolkit and hosted it in the Guest OS, so that I could make use of these tools inside Windows 8. By the way, the Guest Virtual box setup was of the spec: A 32-bit Windows 8 8150 build. It used 2 GB of Ram from host with a 15GB VDI. Before using imaging tool, we need to prepare the USB drive for required partition. I used DIskPart tool with the sequence of commands:

DISKPART

DISKPART> LIST DISK
DISKPART> SELECT DISK 1
REM: In my case, the HP w165 was in #1.

DISKPART> CLEAN
REM: To clean drive

DISKPART> CREATE PARTITION PRIMARY
REM: Creates a partition and makes it a primary

DISKPART> FORMAT fs=ntfs quick
REM: Format the partition in NTFS format

DISKPART> ACTIVE
REM: Mark the selected partition as active

DISKPART> exit

This prepares the partition part of the requirement for USB drive. Next comes the part to restore image using IMAGEX.exe. Open the command prompt with Adminstrator privilege and run:

> imagex.exe /apply d:\sources\install.wim 1 f:\
Here, my Windows 8 ISO was available in D drive and HP-w165 USB is in F drive.

For some of them, Imagex took 3 hours to copy. It took me close to 127 mins to complete. Next step, is to copy windows boot files into boot sector. For this, used the command,

bcdboot.exe f:\windows /s f:

For some reason, ALL option (as mentioned in born’s site was not working for me). F: represents the target media USB drive.

BCDBoot worked and successfully loaded the boot files to target USB drive. Quickly, I restarted my machine and altered the boot sequence to accommodate USB boot. I was too eager to see the windows running on the stick.

More eager you are, result sounds more critical (esp., when it is bad): The initial run on my laptop took nearly 2 hours. That too just for initial setup (Good part in that, I had the patience to wait through the 2 hours setup! ). After all slow boot up and ‘Getting Device information’ and setup cycles, Windows 8 was finally getting loaded from my USB pen drive. Any operations other than Disk read/write works like charm. But poor 16 GB kid of hard disk could not keep up to the speed. Probably, a USB 3.0 on my machine could have made is a better experience.

After some playing with Win8, I shut down the machine and took the USB out. Could feel the heat on the USB connector pin! Thank god, it didn’t melt! 😀

Anyways, Windows 8 on the Go, worked. Did it solve my problem of programming faster? No, I need to go back to a richer virtual box or set up a new separate box.

“Good judgment comes from bad experience. Experience comes from bad judgment.”

Windows Reimagined

First hand report on Windows 8

Indeed. Windows 8 is reimagined from underlying Chipset to Charms. The more we get hands-on with Windows 8, the fact is even more overwhelming that this next-generation Windows OS has undergone a lot of thought and too many good things have gone into it. Win8 is still Pre-beta and Developer Preview stage. The RTM version is rumored to hit MSDN by April 2012. Yes, that’s a long way to go. However, the wave this touch-first OS has brought is amazing and we thought of bringing you some details into its features and explain them as much as we could. Readers would find tons of features, and the UI gimmicks about windows 8 in many websites now. Our intention, rather, is to throw light on a Metro Style Applications, the context, architect, process-life-cycle and characteristics of the Metro style applications re-introduced along with Windows 8 OS. Though the Metro style is not new, for those who are used to Mango or Win Phones 7.

Chipsets to Charms

When we meant Chipset to Charms it is reimagined to the core, windows 8 development means it. Windows 8 is targeted to run on Intel based processors and newly added to the bandwagon is ARM based processors. Windows developer preview is still not available for ARM based processor. However, Microsoft claims that there will be a full-fledged equivalent windows 8 version that runs seamlessly on ARM based processors. For the readers, ARM based processors like Qualcomm’s Snapdragon is one of the most popular and powerful processors in the Tablets and Mobile devices world. Windows 8 masks the underlying processor architecture and provides similar functionalities across the different processor families.

Metro Style Apps

In short, it is a new UI standard for how the application should look like. Windows 8 introduces the new Metro style interface, which shows the information that is important to the end-user, embodies simplicity, and gives user the control. The new interface, built for touch, is a personalized layout with clean typography and animations to make interacting with your PC fluid and intuitive. The new Start screen puts all of your apps in front of user for immediate access. Windows 8 is optimized for easier navigation so moving around the operating system is effortless with touch interface or Mouse and Keyboard.

Charms

‘Charms’ are the standard fundamental contracts that bind Metro Style Apps with System UI and also with other Metro Style Apps. Charms are displayed on the Right-corner of the touch enabled screens and left bottom on a Mouse based screen. There are can be many contracts defined for Metro Style Apps. Search, Share, Devices, Picker & Settings is some of the fundamental ‘charms‘ contract defined in the Windows 8. Imagine an application about list of RSS Feed; the app can expose a Search Contract. A Search for this app is about searching RSS feed. When User clicks on ‘Search’ charm, without leaving the application, a search overlay panel is displayed on the right side of the screen. The search can behave differently, based on this contract each application has exposed. Search on Windows will be on Apps, whereas Search on Internet Explorer can be defined to that of BING Search and similarly, a search on Socialite application can be searching on Facebook Social Site. However the contract exposed as part of Search Charm is common experience across Metro Style applications.


Touch-First experience

Touch-first: What’s the big deal; it’s just an articulation of mouse operations on an UI with touch screen. It is much more than mouse orientation with touch senses. A lot of pre-defined meaningful gestures add the spice to the usability factor of this OS. The touch-first is designed with multi-touch functionality everywhere. Did I say touch is not only for tablets but soon into Desktop? Yes, days are not far when Desktops too have touch screens. By the way, Windows 8 is One OS for all form factors. It’s not only for Tablets but also for Desktops, Large Screen display machines as well! It is the same OS that provides the seamless touch experience on all. Apart from Touch as UI input method, Vision of Touch-first experience is to introduce a language for touch. It is lot more than moving a mouse pointer with fingers. For instance, how do we visualize Right click using touch? Right click is replaced with press & hold gesture on touch paradigm. The Touch-first experience brings in a whole lot of defining a windows touch language. That language has to simple, consistent, fast, based on limited gesture set and avoid timed gestures as much as possible, reversible and directly manipulated on the UI elements. Refer to the touch language picture below, most of them are familiar to us and few are new gestures. Remember, these gestures are not just for Windows 8 Start screen but also for all those Metro style applications that developers write using WinRT with not much of additional code for touch-first plumbing.

Architecture

Metro Style apps are different from Desktop applications that run on Windows 7. Desktop applications are allowed to continue running on Windows 8 for backward compatibility. Refer to the architecture diagram below; Metro Style Apps are completely built on top of Windows runtime. WinRT is a One-window API application model with full-fledged APIs on the foundation.

When developers gear-up to build a Metro style application, they have freedom of choice to choose their favorite language, use their style of markup and ready-use windows RT libraries. Developer could write the UI using XAML and code behind on conventional C++. Or for that matter, use C# or VB to do the plumbing for XAML UI. The Windows 8 surprise inclusion into the programming bandwagon is HTML 5. Developers can now use the full-fledged HTML5 with CSS as the UI markup and use JavaScript to access the same set of Windows Run Time APIs as they could do with other programming languages. To make this happen, Windows has provided common metadata and uniform namespaces and APIs that can be accessed upon different language projections. When it comes to HTML/JavaScript metro style apps are hosted and executed inside WWAHost process (Windows Web Application Host). Windows runtime (win RT) is an efficient solid foundation to build the metro style apps. WinRT provides all necessary APIs including UI, Storage, and Network. Above all these UI APIs exploit and provide the developer with graphics, animation and hardware acceleration features inbuilt in those APIs for the developers to exploit free.

Process Life Cycle

Where’s my close button on the top right corner of the application? First of all, Metro style Apps do not have Windows or Chrome. Second, User does not need to close the applications they open. What are we talking? When do these Apps get closed? When will the CPU & Memory utilization come down? The Answer is AUTOMATIC, OS takes care. When the application is no more in the front view (after losing focus), and no background running is required, the OS will move the process to Suspended state. For people who have used iPhones or Androids, the Suspended state of application is not new. The Suspended state helps in reducing the resource consumptions (like CPU or memory) and improves responsiveness of other applications. There are some applications which try to run at the background even after losing focus, like Windows Media Player, will signal OS that they should not be suspended. When OS pushes an application to Suspended state, the App has 5 sec to save session state, in response to the event to mark suspended state. Similar to Suspended state, when app resumes from Suspended state, the app is notified of the state change. However, No event is notified when App is moved to ‘Terminated’ state. It is imperative to mention that Developers have to additionally take care of these App/process life cycle events, as well, to ensure they work consistently within Win8. By the way, if you desperately want to close an app, you always have the task manager.

Visual Studio 11 Developer preview

11? Yes, you read that right, the new visual studio for developing Metro Style apps. As usual Visual studio makes the life easier by providing a lot of new template to build from the scratch, and a lot of plumbing and usual features like stronger intellisense is provided. WinRT, like .NET, has a rich namespace and meta-data format, VS taps on this rich Meta data to provide intellisense. While developing Metro Apps, developer could use HTML/JavaScript or XAML with C++ or C# or VB. Apart from that, there are different application templates to be used as basis, like Grid Template (suitable for News feed or Tweeter update kind of apps) or Navigation template or blank template to begin with. For those UI design savvy, Expression Blend is now more closely integrated with VS for styling and animation background. The new part of this story is that these animations use WinRT graphics APIs for those effects. One feature that caught my attention and many eyes is Store Menu. You would have heard of the Windows Store, and this menu will compile the solution and package it and upload them into store as well! That way, VS 11 provides integrated development experience that covers the entire life cycle of software creation, right from architecture to code creation and beyond that now selling and marketing.

Before we close on, for all those .Net lovers, Visual Studio 11 supports development with .NET 4.5 framework. However, that is not significant when we talk about Metro style which is based on WinRT rather.

Reference

http://channel9.msdn.com/

Architecture, Process Lifecycle, Languages representations are from Slides prepared by Jensen Harris & Scott Dickens, at the Build conference

%d bloggers like this: