Upload
fons-sonnemans
View
2.162
Download
2
Embed Size (px)
DESCRIPTION
Deze presentatie heeft Fons Sonnemans tijdens de Lowlands Windows Phone Developer Day verzorgt. Hij heeft aan de hand van 12 uiteenlopende onderwerpen geleert apps beter te maken. Hierin komen technische onderwerpen, design en marketing aan bod. Een presentatie vol met do’s en dont’s voor je eigen apps
Citation preview
Twelve ways to make your apps
suck less
Fons Sonnemans
@fonssonnemans
© Reflection IT BV. All rights reserved.
Fons Sonnemans
• Software Development Consultant
• Programming Languages
• Clipper, Smalltalk, Visual Basic, C#
• Platforms
• Windows Forms, ASP.NET (Web Forms, MVC), XAML
(WPF, Silverlight, Windows Phone, Windows 8)
• Databases
• MS SQL Server, Oracle
• Role
• Trainer, Coach, Advisor, Architect, Designer, Developer
• More info: www.reflectionit.nl
2
My Phone Apps
• > 775K downloads
3
My Windows Apps
> 1.8 million downloads
4
Topics 1. Create Universal Apps
2. Start with a Design not Code
3. Design proper Visual Assets
4. Create custom themes
5. Be mobile
6. Reviews are important
7. Use Vectors and Fonts
8. Performance is key!
9. Localize your app
10. Use Data Binding and MVVM
11. Learn Blend
12. Cache your first page
5
1. Create Universal Apps
• Be prepared for Windows 10
• Connect your Windows Phone app with the Windows 8 app
• Share Roaming data across platforms
• Share code
• Portable Class Libraries (PCL)
• Shared projects
• File linking
6
IsTextScaleFactorEnabled <StackPanel Margin="10">
<Button Content="Button 1" />
<TextBlock Text="Hello World 1"
FontSize="20" Margin="0,10" />
<TextBox Text="TextBox 1" />
<Button Content="Button 2"
IsTextScaleFactorEnabled="False"
Margin="0,40,0,0" />
<TextBlock Text="Hello World 2"
IsTextScaleFactorEnabled="False"
FontSize="20" Margin="0,10" />
<TextBox Text="TextBox 2"
IsTextScaleFactorEnabled="False" />
</StackPanel>
8
2. Start with a Design not Code http://design.windows.com
• Modern Design
• RTFM (Principles, Guidelines, UX Patterns)
• Vision and process
• Discover your best idea
• Identity
• Create a beautiful visual identity
• Gallery
• Learn (“steal”) from the best/competition
9
3. Design proper Visual Assets
• Visual Assets
• Tiles, SplashScreen, Icons, etc
• All Scale Factors
• Windows 80, 100, 140, 180
• Phone 100, 140, 240
• Use vectors
• Expression Design (Free), Adobe Illustrator
10
3. Design proper Visual Assets
• Expression Design Demo
11
4. Create Custom Themes
12
4. Create Custom Themes • Windows
• C:\Program Files (x86)\Windows
Kits\8.1\Include\WinRT\Xaml\Design\Generic.xaml
• Windows Phone
• C:\Program Files (x86)\Windows Phone
Kits\8.1\Include\abi\Xaml\Design\Generic.xaml
• Use the ThemeManager of Dave Smits
• http://www.familie-smits.com/theming-in-a-universal-
app
• Use HAMMER.Pants for Windows
• https://github.com/Code52/HAMMER
13
5. Be Mobile
• HttpClient
• Resolve the correct type
• System.Net.Http.HttpClient is slightly different in the most basic
use, and quite different when you get into advanced work.
• Always make sure you’re using Windows.Web.Http
• System.Net.Http shows up first
14
5. Be Mobile
• Mobile devices are often connected to poor quality network connections
• Best chance of success in network data transfers achieved by:
• Keep data volumes as small as possible
• Use the most compact data serialization available
(use JSON instead of XML)
• Avoid large data transfers
• Avoid transferring redundant data
• Design your protocol to only transfer precisely the data you need and no more
Network Awareness in your apps • Making Decisions based on Data Connections
• Mobile apps shouldn’t diminish the user experience by
trying to send or receive data in the absence of network
connectivity
• Mobile apps should be intelligent about performing
heavy data transfers only when the appropriate
connectivity is available
• Use the NetworkInterfaceType object to detect network type and speed
• Subscribe to the NetworkChange event to detect when network state changes
Make your app aware of its networking environment and state!
17
Network Information in Windows Runtime
private bool IsOnWiFi()
{
ConnectionProfile InternetConnectionProfile = NetworkInformation.GetInternetConnectionProfile();
if (internetConnectionProfile == null) return false;
return InternetConnectionProfile.IsWlanConnectionProfile;
}
private bool IsConnectedtoDataRoaming()
{
bool isRoaming = false;
ConnectionProfile internetConnectionProfile = NetworkInformation.GetInternetConnectionProfile();
if (internetConnectionProfile != null && internetConnectionProfile.IsWwanConnectionProfile)
{
ConnectionCost cc = internetConnectionProfile.GetConnectionCost();
isRoaming = cc.Roaming; // See if user is currently roaming
}
return isRoaming;
}
private void AddEventHandlers()
{
// NetworkStatusChanged fires when the network status changes for a connection
NetworkInformation.NetworkStatusChanged += OnNetworkStatusChanged;
}
What is Data Sense?
• Data Sense is a set of components designed
to help:
• End users: understand and manage data
consumption
• Mobile Operators: reduce cellular consumption
& optimize connectivity
• 3rd party developers and ISVs: Build smart data
consuming applications
18
What Makes Up “Data Sense”?
The Data Sense platform
Data Sense (UI)
Browser Optimization Service
WiFi hotspot Mapping
Content Streaming Scenario - 1 of 2
ConnectionProfile internetConnectionProfile = NetworkInformation.GetInternetConnectionProfile();
if (internetConnectionProfile != null)
{
if (internetConnectionProfile.IsWlanConnectionProfile)
{
// connected on WiFi interface; double check it is not a metered WiFi hotspot
ConnectionCost cc = internetConnectionProfile.GetConnectionCost();
if ((NetworkCostType.Unknown == cc.NetworkCostType)
|| (NetworkCostType.Unrestricted == cc.NetworkCostType))
{
// assume free network; connect and start streaming content
}
}
else if (internetConnectionProfile.IsWwanConnectionProfile)
{
...
22
Content Streaming Scenario – 2 of 2
else if (InternetConnectionProfile.IsWwanConnectionProfile)
{
ConnectionCost cc = InternetConnectionProfile.GetConnectionCost();
// check the type of data plan - make sure user is not currently roaming
if (!cc.Roaming)
{
if ((NetworkCostType.Unknown == cc.NetworkCostType) || (NetworkCostType.Unrestricted == cc.NetworkCostType))
{
// assume free network; connect and start streaming content
}
else if (NetworkCostType.Fixed == cc.NetworkCostType)
{
// make sure user not currently over limit or near limit
if ((!cc.OverDataLimit) && (!cc.ApproachingDataLimit))
{
// connect and start streaming content
}
}
}
}
Source: http://channel9.msdn.com/Events/TechEd/NorthAmerica/2014/WIN-B326
6. Reviews are important
23
6. Reviews are important
24
6. Reviews are important
25
6. Reviews are important
26
7. Use Vectors and Fonts
• Use Bitmaps for Images
• JPG for large photos
• PNG for perfect quality
• Scale 100, 140, 180
• Use Vectors and Fonts for “Icons”
• Use <Path data=“” /> for Vector
• Use FontIcon or TextBlock for Fonts
• AppBarButton supports FontIcon & PathIcon
27
Vector
• ArtBoard 40x40
• Icon Max Width or Height 24
• Select All -> Export – XAML Silverlight 4 /
WPF Canvas
• Open .xaml & copy Path
Demo <Page x:Class="VectorAndFontDemo.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:VectorAndFontDemo" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.BottomAppBar> <CommandBar Background="#FFFFB900" IsOpen="True"> <AppBarButton Label="AppBarButton"> <AppBarButton.Icon> <FontIcon FontFamily="Assets/Fonts/untitled-font-1.ttf#untitled-font-1" Glyph="d" /> </AppBarButton.Icon> </AppBarButton> <AppBarButton Label="AppBarButton"> <AppBarButton.Icon> <PathIcon Data="F1 M20.0017,8 C21.6588,8 23.0021,9.34333 23.0021,11.0004 C23.0021,12.111 22.3987,13.0807 21.5018,13.5995 L21.5018,27.3629 C23.9769,26.8976 26.155,25.2984 27.6868,23.0021 L25.7525,23.0021 L29.0029,16.5013 L32.0033,23.0021 L30.3772,23.0021 C28.8669,27.6635 24.7918,31.0032 20.0017,31.0032 C15.2115,31.0032 11.1364,27.6635 9.62615,23.0021 L8,23.0021 L11.0004,16.5013 L14.2508,23.0021 L12.3166,23.0021 C13.8483,25.2984 16.0263,26.8975 18.5014,27.3629 L18.5014,13.5994 C17.6046,13.0806 17.0013,12.111 17.0013,11.0004 C17.0013,9.34333 18.3446,8 20.0017,8 z M20.0017,10.0003 C19.4493,10.0003 19.0015,10.4481 19.0015,11.0004 C19.0015,11.5528 19.4493,12.0006 20.0017,12.0006 C20.554,12.0006 21.0018,11.5528 21.0018,11.0004 C21.0018,10.4481 20.554,10.0003 20.0017,10.0003 z" /> </AppBarButton.Icon> </AppBarButton> </CommandBar> </Page.BottomAppBar> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Viewbox Height="200" Width="200" VerticalAlignment="Center" HorizontalAlignment="Center"> <FontIcon FontFamily="Assets/Fonts/untitled-font-1.ttf#untitled-font-1" Glyph="c" /> </Viewbox> </Grid> </Page>
30
Links • Vectors
• http://modernuiicons.com
• http://materialdesignicons.com/
• http://thenounproject.com
• http://www.thexamlproject.com
• http://www.syncfusion.com/downloads/metrostudio
• Fonts
• http://msdn.microsoft.com/en-
us/library/windows/apps/jj841126.aspx
• http://www.geekchamp.com/icon-explorer/introduction
• http://www.fontello.com/
• http://fontastic.me
9. Localize your app
• Offering your app in English only will only cover about 25% of Windows Phone customers, though it covers a larger percentage of tablets and PCs users. Adding Spanish, French, Mandarin, Russian and German increases coverage to more than 75% of the base.
http://blogs.windows.com/buildingapps/2014/09/29/windows-and-windows-
phone-store-trends-september-2014-update/
33
10. Use Data Binding and MVVM • Motivations:
• Reduces complexity with Model to UI integration
• Separation of concerns
• Clear Designer-Developer separation
• Makes code more Unit testable
• Approach:
• Split the UI architecture into Model, View and View-
Model
• Model: Represents the data
• View : UI defined declaratively in XAML
• View Model: Specialization of the Model that View uses
for data binding
Model View ViewModel
View (XAML UserControls + CodeBehind)
ViewModel (State + Operations)
DataBinding Commands Events /
Messages
Model ("Data")
Data
Bin
din
g
11. Learn Blend
• Layout
• Animations
• Styling
• Templating
• Resources
• Data Binding
• Sample Data
• Visual States
• Behaviors
36
12. Cache your first page public sealed partial class HubPage : Page
{
private readonly NavigationHelper navigationHelper;
private readonly ObservableDictionary defaultViewModel = new ObservableDictionary();
private readonly ResourceLoader resourceLoader = ResourceLoader.GetForCurrentView("Resources");
public HubPage()
{
this.InitializeComponent();
// Hub is only supported in Portrait orientation
DisplayInformation.AutoRotationPreferences = DisplayOrientations.Portrait;
this.NavigationCacheMode = NavigationCacheMode.Required;
this.navigationHelper = new NavigationHelper(this);
this.navigationHelper.LoadState += this.NavigationHelper_LoadState;
this.navigationHelper.SaveState += this.NavigationHelper_SaveState;
}
37
@fonssonnemans
fonssonnemans
reflectionit.nl/blog
38
Copyright
• Copyright © by Reflection IT BV. All rights
reserved.
• Some parts quote Microsoft public materials.
• This presentation, its workshops, labs and
related materials may not be distributed or used
in any form or manner without prior written
permission by the author.
39