...and is now available in the Windows Store!!![http://apps.microsoft.com/webpdp/en-us/app/tweaker/330612cd-83b0-4b8b-9cd5-6e196dfc980d]
Very proud to be one of the first 1000 apps in the Windows Store.
This is a Hackathon [online]
{codercharts} hosted the Windows 8 Online App-a-thon on behalf of Microsoft in preparation for their launch of Windows 8 and to help generate developer excitement around the platform. It was a great way to do it and I actually met few developers that I'd now consider among my friends. Which doesn't even always happen at in person hackathons. The extended nature of the event and being online allowed some more time to chat than when you are at an in person hackathon with a few hours to finish your app before everyone goes their separate ways.| Are you a Hacker? Are you a UI Designer? Have a great idea? The hackathon has ended Microsoft and CoderCharts are proud to announce our Windows 8 Online App-a-thon to promote the release of, you guessed it, Microsoft’s new operating system: Windows 8. Windows 8 apps can be created using JavaScript/HTML5, C#, VB.NET, or C++. Each language can access the full power of the Windows 8 runtime to create awesome apps that run on tablets, laptops, or desktops. Come and join the fun. Be the next viral app right when the operating system is released. On top of that, Microsoft is sponsoring prizes. The winning app from each category (Utility / LifeStyle / Edutainment) will receive $1000 value in gift cards. To be eligible for prizes, entries must be submitted by legal US residents / teams with at least one member who is legal US resident (for details, see the Official Rules). |
What is Tweaker?
Tweaker the Tweet Speaker allows you to passively listen to and watch tweet and photo activity from Twitter. While the "Tweaker" speaks Twitter activity it displays text and image content on lively animated tiles. Tweaker speaks Twitter activity from around the world right to your ears. Trial version is fully functional with reminders to purchase intermingled among the tweets.
In order to present our apps to the judges and for public voting, we were asked to create a video of our app and post it onto youtube. Have a look, sorry for the low audio [i'll get that fixed when I'm not coding so much] The video covers a lot of the design points and Windows 8 features you will need to consider as you developer your Windows 8 apps, and many of those some details are covered later in this article as well.
Building the Windows 8 Style Tweaker app
Leverage Microsoft design style
Content is the heart of Windows Store apps, and having said that, let me reiterate, putting content before chrome is fundamental to the design of Windows Store apps. Thay say 'Everything else is accessory or chrome' and we leverage the Windows 8 features in Tweaker to achieve the ultimate goal of what UI design should be, keep the focus on the content.Tweaker utilizes a clean and open layout that minimizes distraction and helps people get immersed in the content. By maintaining a clear information hierarchy and utilizing the predefined type ramp for Windows 8 the user knows what is important right away. By aligning to the Windows Store app silhouette people can more instinctively recognize the apps' features and purpose giving the user confidence as they first enter the app for the first time rather than the uncertainty of learning a new UI.
Be fast and fluid
Text and images are displayed on animated tiles with colors and animations in line with Windows 8 style. Tiles exitContent, enterContent, addToList, and deleteFromList animations from the WinJS library give the application a fast a fluid feel that Windows 8 users expect. These animations are joined by the MetroJS library by Drew Greenwell [http://www.drewgreenwell.com/projects/metrojs] which manages the animation of the content within the tiles and some flipping and rotating of the tiles themselves.Designed for touch
Windows Store apps are designed to be touch first. They leverage the hands and fingers for what they are great at, with comfort and ergonomics in mind. At the same time, Tweaker makes sure to keep the main control interfaces of the app such as the appBar and settings charms accessible by mouse and keyboard or even just keyboard. Windows 8 apps can be used on all kinds of devices and ensuring your app is usable with a variety of input devices is the only way to guarantee a good experience for all of your users.
Built-in controls
I must admit some small disappointment in the completeness of the WinJS library in regard to the available controls. Simply put, there are more Built-in controls available for the XAML apps than for the HTML5 apps on Windows 8. For example, the VariableSizedWrapGrid is not available for your HTML5/JS Windows 8 apps. The VariableSizedWrapGrid provides a grid-style layout panel where each tile/cell can be variable size based on content, something that might have been pretty useful in my app. But it is just that, a small disappointment, the WinJS library has plently of breadth in terms of controls - it just didn't have THAT one. Check here for some detailed user experience (UX) guidelines for the built-in controls.
Tweaker implements the ListView control to store manage the animated tiles of twitter activity you see within the app. The appBar control is used to store category option and the pin to start buttons.
Persistant options are postioned to the right in a group and the pin to start command is positioned on the left of the appBar in line with the guidance from Microsoft.
Snap and scale beautifully
Tweaker supports snapped, filled, full screen portrait, and full screen landscape views.The snapped view restricts the visible content to only the tweet currently being read, while all of the other views arrange the amount of tiles and their position/size to fit whatever layout the user wants. If a user can hold their device or arrange your app in all variations they are more likely to enjoy their experience and use your app again. Consider implementing all of them unless there is a compelling reason why your app can't.
It also scales to multiple form factor device screens ranging from <10" tablets to >27" screens.
Tweaker uses the ViewBox control which scales a single child element to fill the available space without resizing it. This control reacts to changes in the size of the container as well as changes in size of the child element. By wrapping my application in a ViewBox my fixed layout scales to all devices on Windows 8. This is only one of the methods to scale beautifully on Windows 8, check out the options and do what is best for your application.
Use the right contracts
Tweaker implements the Search contract to let people search twitter activity from anywhere in Windows or from within the app itself via the Search Charm in Windows 8.The PlayTo contract allows the app to stream the audio to any DLNA device on the network. This opens new use cases for the app such as a conference streaming #conferencehashtag tweets right into their lobby/welcome area from their Windows 8 tablet or PC over the network. They would just open the devices charm while listening to Tweaker and select from any of the available devices on the network that support the DLNA standard.
Invest in a great tile to feel connected and alive
They say the tile is the front door into an app on Windows 8 and people like to walk through nice inviting looking doors. Tweaker implements the square and wide tiles to give the user full control over the customization of their start screen. Categories of Twitter activity or custom #hashtag searchs can be pinned to the start screen as secondary tiles. Both the primary and secondary tiles are live tiles, bringing twitter content directly to the start screen. Images and text are updated on the tiles making the app feel connected and alive even when it is not open. Live tiles and secondary tiles encourage users to come back to your app and is one of the great features available for Windows 8 app developers to use.Roam to the cloud
Windows 8 apps have an awesome cloud storage feature that developers can (and should!) utilize for FREE to store and access roaming settings, state, and a small amount of user content. Tweaker uses this to keep track of where you left off in the app and to return you to that same place if you re-enter the app from the primary tile at a later date or even if you launch the applicaiton on another PC. It also keeps track of your voice accent selection and other app settings to ensure you can continue right where you left off and get back to enjoying the content.Paid App with Trial
Tweaker is in the Windows Store and can be purchased for $1.99. There is a free full featured, unlimited time trial available which includes reminders to purchase the app. Windows 8 Trial features allow developers to get additional exposure for their paid apps. Statistics from the Windows Phone team indicate app sales are 7 times higher for Paid apps when they offer a trial, I expect the same thing to occur with Windows 8 trials.
Embrace Microsoft design style principles
I hope that some of the pride i took in developing this app shows through clearly to the users. I'm not a designer, I'm a developer - but Windows 8 minimalistic stance helps us do more with less and boils these UI design principles down into a consumable form. One that I think enables developers to produce beautiful apps on their own or with a designer in tow. The fast and fluid animations combined with the authentically digital UI takes full advantage of the digital medium that is Windows 8. There are no physical boundaries from chrome making the consumpution of the content inefficient.For anyone interested in learning these principle there are more than 9 hours of videos explaining the details of Windows 8 design. http://www.windowsuserexperiencetraining.com All of these videos are excellent and they provice much of the same [more actually] content you will be exposed to if you attend one of the many Dev Camps and information sessions for Windows 8 developers.
The POWER of Windows 8
Something unique that I did with this app is that I created this app on my Windows 8 Tablet. That's right, it was developed entirely on my Samsung Series 7 Slate with Windows 8 installed on it. The full versions of Visual Studio, Adobe Creative Suite, and all the other tools I use in my development work can all be installed on my Windows 8 tablet, no problem. Windows 8 on a tablet offers you a full featured computing experience, not a lightweight experience like some other platforms offer. And the 'touch first' Windows 8 apps in the Windows Store are designed to work great on all devices, big screen, little screen, keyboard, touchscreen whatever so this isn't just a tablet game. This is a single OS to unite tablet, desktop, laptop, and family hub experiences into a single solution that is just amazing.Win as one
Tweaker uses the contracts available in the Windows 8 ecosystem and many cues from the UI model and developer guidance to take advantage of what people already know and provide a sense of familiarity, control, and confidence making Tweaker THE BEST app for consuming Twitter activity in a passive manner.
And boy oh boy did I win! I present to you the first of the many thousands of dollars I expect to make from the Windows 8 apps I am developing. Thank You CoderCharts, Thank You Microsoft, and Thank You to the other competitors and now friends who make the competition worthwhile.
Check out some of the competitors apps
Please check out some of the other apps that were in the competition. I hope to compete with them all again, in the Windows Store!
sim Trader - by thelastbyte [Winner of the Utility Category]
http://www.youtube.com/watch?feature=player_embedded&v=jcG4CalhLFU
The Holy Bible - also by me. :)
http://www.youtube.com/watch?feature=player_embedded&v=ywQmUsp5CTM
Global Video Search - by renubk
http://www.youtube.com/watch?feature=player_embedded&v=14qAx-LMUfc
GeoCrack - by mneubrand [Winner of Edutainment Category]
http://www.youtube.com/watch?feature=player_embedded&v=qMxLPaeWHhg
Social Brainz - by julianatanasoae
http://www.youtube.com/watch?feature=player_embedded&v=INwwgbZc1SA
Dots - by isa_hayat
http://www.youtube.com/watch?feature=player_embedded&v=t6JAhQYfW1o
FlixUniverse - by sreejith
http://www.youtube.com/watch?feature=player_embedded&v=VuKGw2E7-oY
