This document provides an overview of a comparison between XAML and HTML technologies for building user interfaces. It outlines a 60 minute presentation with 10 topics that will each be discussed for 3 minutes to compare key capabilities of XAML and HTML. The presentation encourages audience participation by having the audience decide which technology is preferable for each topic. The 10 topics that will be discussed include layout, styles, drawing, local data, services, data binding, audio/video, controls, object-oriented programming, and unit testing. The presentation will conclude by providing final scores to compare the technologies.
HTML5 contains many new interesting features that make the platform a capaple development platform. Sockets, SVG, geolocation, local storage and many more are included in the platform. In this one hour session, we will look at cool implementations of 10 features of HTML5
CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now. Presented at Web 2.0 Expo New York 2011.
Recent implementation of CSS3 features in modern browsers allow for greater design control and creativity in our Web sites.
In this three-hour workshop, attendees will learn about using colors through RGBa and opacity, multiple background and border images, text and box shadows, CSS-enabled gradients and transitions as well as laying out text in multiple columns.
In addition to font embedding techniques and third-party font bureaus, we look into designing with older browsers in mind when coding with CSS3.
HTML5 contains many new interesting features that make the platform a capaple development platform. Sockets, SVG, geolocation, local storage and many more are included in the platform. In this one hour session, we will look at cool implementations of 10 features of HTML5
CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now. Presented at Web 2.0 Expo New York 2011.
Recent implementation of CSS3 features in modern browsers allow for greater design control and creativity in our Web sites.
In this three-hour workshop, attendees will learn about using colors through RGBa and opacity, multiple background and border images, text and box shadows, CSS-enabled gradients and transitions as well as laying out text in multiple columns.
In addition to font embedding techniques and third-party font bureaus, we look into designing with older browsers in mind when coding with CSS3.
This presentation will introduce the audience to designing a WordPress theme in HTML5 and CSS3. We’ll discuss the history of HTML5, why HTML5 makes blog design easier, and what you need to do to get WordPress to output valid HTML5 code. You’ll also see how CSS3 can be used to generate an awesome-looking site using little to no graphics.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
This is an introduction to relational and non-relational databases and how their performance affects scaling a web application.
This is a recording of a guest Lecture I gave at the University of Texas school of Information.
In this talk I address the technologies and tools Gowalla (gowalla.com) uses including memcache, redis and cassandra.
Find more on my blog:
http://schneems.com
CSS3 - is everything we used to do wrong? Russ Weakley
This presentation from Remix 2011 explores CSS3, why we should use it and some of the issues. It also explores the bigger picture. Css resets, frameworks, Object oriented CSS, pre-processors, and responsive web design.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
This presentation will introduce the audience to designing a WordPress theme in HTML5 and CSS3. We’ll discuss the history of HTML5, why HTML5 makes blog design easier, and what you need to do to get WordPress to output valid HTML5 code. You’ll also see how CSS3 can be used to generate an awesome-looking site using little to no graphics.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
This is an introduction to relational and non-relational databases and how their performance affects scaling a web application.
This is a recording of a guest Lecture I gave at the University of Texas school of Information.
In this talk I address the technologies and tools Gowalla (gowalla.com) uses including memcache, redis and cassandra.
Find more on my blog:
http://schneems.com
CSS3 - is everything we used to do wrong? Russ Weakley
This presentation from Remix 2011 explores CSS3, why we should use it and some of the issues. It also explores the bigger picture. Css resets, frameworks, Object oriented CSS, pre-processors, and responsive web design.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
CSS3 isn't the future, it's the present. Learn the gamut of CSS3 properties from colors, web fonts, and visual effects, to transitions, animations and media queries. Find the inspiration and resources to go forth and implement the new properties with confidence.
If you are new to CSS or have been using it for years this presentation should give you more insight into how to write and use CSS to make your web sites better.
Are you struggling to create a consistent user interface for your web app? Don't want to bring in too many expensive designers? Take a look at Bootstrap!
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Cengage Learning
Over the past few years, HTML5 has changed web browsers and coding alike with a stream of new elements,
attributes, and possibilities. In this session we’ll explore the major features that HTML5 offers developers, including
semantic elements, form enhancements, and browser-native audio and video. We’ll also survey the landscape of
browser support and get familiar with strategies for maintaining compatibility with legacy browsers like IE 7 and 8.
Finally, we’ll look at the fundamental changes happening to the process of revising HTML as a language and we’ll
consider some of the likeliest scenarios for the evolution of HTML in coming years.
WCBuf: CSS Display Properties versus HTML SemanticsAdrian Roselli
Many (most?) developers make the effort to choose HTML elements that best describe the structure and semantics of the content. They then use CSS to set the layout for the visual design. What they don’t know is how browsers use that CSS to break the HTML semantics. I will demonstrate issues and offer unfortunate workarounds.
HTML5 and CSS3 offer some great features that everyone is clamoring to use. However, not everyone can simply rip apart their site and redo all of their markup and styling across the board. There are some quick wins, especially with CSS3, to be had that you can integrate into your site without rewriting your whole entire site.
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]David Wesst
End-users are shallow and vein when it comes to applications. Whether you are selling apps in the marketplace, or trying to engage business users, without a sexy user experience, it can be hard to get people interested. HTML5, although very practical and functional as a platform, can do wonders when it comes to making sexy software. In this session, we will take a deeper dive into the HTML5 tools that can make your application a looker and really look good. We will learn how to take a regular HTML5 application and turn it into a rich user experience that stands out in the crown in HTML5 application using features like SVG, Canvas, and Audio/Video.
The web standards gentleman: a matter of (evolving) standards)Chris Mills
This talk discusses standards evolution, HTML5 and CSS3 in detail. Starting with the history of HTML and CSS, it goes on to show how HTML5 and CSS3 were developed, why they were necessary, the problems they aim to solve, what the main new features are and why they are so useful, and how we can start using these features in the real world, right now. It also provides advice for the discerning web standards gentleman.
Don't be fooled, CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now.
Continuous integration and delivery with Xamarin and VSTSGill Cleeren
Writing the code for your next Xamarin project isn’t all that difficult. But the coding is only part of the job.
Using Visual Studio Team Services, it’s now easier than ever to set up continuous integration for your Xamarin app development to build and test your apps, including unit tests and UI tests. You can even integrate with the Xamarin Test Cloud to execute UI test for your apps on numerous devices, running in the cloud. You’ll learn how HockeyApp can help us with the distribution of the test versions of the app to our real testers and how you can monitor crashes while testing. Finally, we’ll learn about release management to create the packages ready for the different stores.
With Xamarin now free for everyone, the popularity of the cross-platform framework is increasing rapidly. We’ve now had the time to play around with it, now the time has come to build serious apps with it.
In this session, you’ll learn how a real-world Xamarin application architecture is built, with an emphasis on testability and maintainability. The app we’ll look at is called MyTrains, an application used to book train journeys.
You’ll see an architecture that has proven itself over different projects already. The architecture is using the MvvmCross framework. You’ll see how the architecture is built from the ground up, starting with model, the repositories and the services. On top of that, we’ll build the view models which will be used by the views in the iOS and Android apps. Along the way, you’ll see how MvvmCross uses data binding and commanding and how navigation is handled in MVVM
You’ll walk away with an example of how real applications in Xamarin should be built. You’ll be able to use this as your starting point for your next Xamarin application.
Windows 10 is finally here. Now is the time to learn about the awesome new features that the platform offers. Do you want to know what Windows 10 enables for developers? Or do you want to see how you can enhance your existing Windows 8.1 app? In this session, we will give you a full overview of the most important new features of Windows 10.
Building your first iOS app using XamarinGill Cleeren
Your task before coming to this session: know C# and .NET. Your mission during this session: learn how you can leverage your C# knowledge to build iOS apps. If you decide to accept this mission: be prepared to see how in just 60 minutes, a complete iOS app will appear in front of you. All using C#. This session will destroy itself after 60 minutes.
Building your first android app using XamarinGill Cleeren
Do you have a great knowledge about C#? Maybe you’ve already built a great mobile app on Windows Phone or Windows 8? Would you like to be able to use your knowledge to build an Android app without having to resort to other languages or IDEs? Well, now you can! With Xamarin. In this session, Gill Cleeren will take you through the creation of your first Android application. We’ll see how we can use our trusted Visual Studio for this task, how we can create apps with mulitple screens and how we can call services. We’ll also look at how we can deploy the application and how we can debug our code.
Building a community - BuildStuff Lithuania 2014Gill Cleeren
You want to be a user group lead? Thinking of starting your own user group? Awesome! But there are a number of things to think about before starting. Is your whole idea viable? Where do I get speakers and attendees? Should I create a legal entity? How do I finance the whole thing?
In this session, Gill Cleeren will tell you how he has had a successful user group in Belgium for almost 10 years now.
C# everywhere: Xamarin and cross platform developmentGill Cleeren
C# is hotter than ever. Using Xamarin, we can use C# to not only build our apps on Windows Phone but also on iOS and Android. The magic that sits between are PCLs (Portable Class Libraries) that we can re-use on all these platforms. The goal is of course achieving the highest level of code sharing and re-using.
In this talk, we'll see how we can share code between Windows Phone, iOS and Android to build a cross-platform app using Xamarin. You'll also see how much of the marketing fluff is real: do we really get a lower time-to-market when sharing code and is this approach really cheaper than building 3 apps separately? Come to this talk and learn all about it
jQuery is the new favorite of web developers. This lightweight JavaScript library makes developers love writing JavaScript code again! What needed 20 lines of code first is now reduced to 3 lines. Who wouldn’t be enthusiastic?! Microsoft showed its love for the library by fully integrating it in Visual Studio. I dare to ask: Should you stay behind? In this session, we’ll take a look at jQuery and we’ll teach you what you need to know to get on your way. More specifically, we’ll look at selectors, attributes, working with WCF, jQuery UI and much more. You may walk out of this session wearing a sticker: “I love jQuery”!
Why you shouldn't dismiss windows 8 for your lob appsGill Cleeren
In this webinar, we are going to take a look at the different mobile platforms to build business apps and we are going to focus on one in particular, and that is Windows 8. Windows 8 launched almost a year ago and in the near future, it’ll start playing an important role in business app development.
The video recording is available at http://gicl.me/13iHpk7
Mobile App Development Company In Noida | Drona InfotechDrona Infotech
Looking for a reliable mobile app development company in Noida? Look no further than Drona Infotech. We specialize in creating customized apps for your business needs.
Visit Us For : https://www.dronainfotech.com/mobile-application-development/
Understanding Nidhi Software Pricing: A Quick Guide 🌟
Choosing the right software is vital for Nidhi companies to streamline operations. Our latest presentation covers Nidhi software pricing, key factors, costs, and negotiation tips.
📊 What You’ll Learn:
Key factors influencing Nidhi software price
Understanding the true cost beyond the initial price
Tips for negotiating the best deal
Affordable and customizable pricing options with Vector Nidhi Software
🔗 Learn more at: www.vectornidhisoftware.com/software-for-nidhi-company/
#NidhiSoftwarePrice #NidhiSoftware #VectorNidhi
Need for Speed: Removing speed bumps from your Symfony projects ⚡️Łukasz Chruściel
No one wants their application to drag like a car stuck in the slow lane! Yet it’s all too common to encounter bumpy, pothole-filled solutions that slow the speed of any application. Symfony apps are not an exception.
In this talk, I will take you for a spin around the performance racetrack. We’ll explore common pitfalls - those hidden potholes on your application that can cause unexpected slowdowns. Learn how to spot these performance bumps early, and more importantly, how to navigate around them to keep your application running at top speed.
We will focus in particular on tuning your engine at the application level, making the right adjustments to ensure that your system responds like a well-oiled, high-performance race car.
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...Mind IT Systems
Healthcare providers often struggle with the complexities of chronic conditions and remote patient monitoring, as each patient requires personalized care and ongoing monitoring. Off-the-shelf solutions may not meet these diverse needs, leading to inefficiencies and gaps in care. It’s here, custom healthcare software offers a tailored solution, ensuring improved care and effectiveness.
First Steps with Globus Compute Multi-User EndpointsGlobus
In this presentation we will share our experiences around getting started with the Globus Compute multi-user endpoint. Working with the Pharmacology group at the University of Auckland, we have previously written an application using Globus Compute that can offload computationally expensive steps in the researcher's workflows, which they wish to manage from their familiar Windows environments, onto the NeSI (New Zealand eScience Infrastructure) cluster. Some of the challenges we have encountered were that each researcher had to set up and manage their own single-user globus compute endpoint and that the workloads had varying resource requirements (CPUs, memory and wall time) between different runs. We hope that the multi-user endpoint will help to address these challenges and share an update on our progress here.
Graspan: A Big Data System for Big Code AnalysisAftab Hussain
We built a disk-based parallel graph system, Graspan, that uses a novel edge-pair centric computation model to compute dynamic transitive closures on very large program graphs.
We implement context-sensitive pointer/alias and dataflow analyses on Graspan. An evaluation of these analyses on large codebases such as Linux shows that their Graspan implementations scale to millions of lines of code and are much simpler than their original implementations.
These analyses were used to augment the existing checkers; these augmented checkers found 132 new NULL pointer bugs and 1308 unnecessary NULL tests in Linux 4.4.0-rc5, PostgreSQL 8.3.9, and Apache httpd 2.2.18.
- Accepted in ASPLOS ‘17, Xi’an, China.
- Featured in the tutorial, Systemized Program Analyses: A Big Data Perspective on Static Analysis Scalability, ASPLOS ‘17.
- Invited for presentation at SoCal PLS ‘16.
- Invited for poster presentation at PLDI SRC ‘16.
A Study of Variable-Role-based Feature Enrichment in Neural Models of CodeAftab Hussain
Understanding variable roles in code has been found to be helpful by students
in learning programming -- could variable roles help deep neural models in
performing coding tasks? We do an exploratory study.
- These are slides of the talk given at InteNSE'23: The 1st International Workshop on Interpretability and Robustness in Neural Software Engineering, co-located with the 45th International Conference on Software Engineering, ICSE 2023, Melbourne Australia
Globus Connect Server Deep Dive - GlobusWorld 2024Globus
We explore the Globus Connect Server (GCS) architecture and experiment with advanced configuration options and use cases. This content is targeted at system administrators who are familiar with GCS and currently operate—or are planning to operate—broader deployments at their institution.
Providing Globus Services to Users of JASMIN for Environmental Data AnalysisGlobus
JASMIN is the UK’s high-performance data analysis platform for environmental science, operated by STFC on behalf of the UK Natural Environment Research Council (NERC). In addition to its role in hosting the CEDA Archive (NERC’s long-term repository for climate, atmospheric science & Earth observation data in the UK), JASMIN provides a collaborative platform to a community of around 2,000 scientists in the UK and beyond, providing nearly 400 environmental science projects with working space, compute resources and tools to facilitate their work. High-performance data transfer into and out of JASMIN has always been a key feature, with many scientists bringing model outputs from supercomputers elsewhere in the UK, to analyse against observational or other model data in the CEDA Archive. A growing number of JASMIN users are now realising the benefits of using the Globus service to provide reliable and efficient data movement and other tasks in this and other contexts. Further use cases involve long-distance (intercontinental) transfers to and from JASMIN, and collecting results from a mobile atmospheric radar system, pushing data to JASMIN via a lightweight Globus deployment. We provide details of how Globus fits into our current infrastructure, our experience of the recent migration to GCSv5.4, and of our interest in developing use of the wider ecosystem of Globus services for the benefit of our user community.
May Marketo Masterclass, London MUG May 22 2024.pdfAdele Miller
Can't make Adobe Summit in Vegas? No sweat because the EMEA Marketo Engage Champions are coming to London to share their Summit sessions, insights and more!
This is a MUG with a twist you don't want to miss.
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...Crescat
Crescat is industry-trusted event management software, built by event professionals for event professionals. Founded in 2017, we have three key products tailored for the live event industry.
Crescat Event for concert promoters and event agencies. Crescat Venue for music venues, conference centers, wedding venues, concert halls and more. And Crescat Festival for festivals, conferences and complex events.
With a wide range of popular features such as event scheduling, shift management, volunteer and crew coordination, artist booking and much more, Crescat is designed for customisation and ease-of-use.
Over 125,000 events have been planned in Crescat and with hundreds of customers of all shapes and sizes, from boutique event agencies through to international concert promoters, Crescat is rigged for success. What's more, we highly value feedback from our users and we are constantly improving our software with updates, new features and improvements.
If you plan events, run a venue or produce festivals and you're looking for ways to make your life easier, then we have a solution for you. Try our software for free or schedule a no-obligation demo with one of our product specialists today at crescat.io
E-commerce Application Development Company.pdfHornet Dynamics
Your business can reach new heights with our assistance as we design solutions that are specifically appropriate for your goals and vision. Our eCommerce application solutions can digitally coordinate all retail operations processes to meet the demands of the marketplace while maintaining business continuity.
Code reviews are vital for ensuring good code quality. They serve as one of our last lines of defense against bugs and subpar code reaching production.
Yet, they often turn into annoying tasks riddled with frustration, hostility, unclear feedback and lack of standards. How can we improve this crucial process?
In this session we will cover:
- The Art of Effective Code Reviews
- Streamlining the Review Process
- Elevating Reviews with Automated Tools
By the end of this presentation, you'll have the knowledge on how to organize and improve your code review proces
2. • .NET Architect @Ordina (www.ordina.be)
• Microsoft Regional Director and Client Dev MVP
• Techorama conference owner
• Speaker
• Visug user group lead (www.visug.be)
• Author
• Pluralsight trainer
www.snowball.be
gill@snowball.be
@gillcleeren
3. • Lecturer at New Media and Communications Technologie
• Owner eGuidelines
• IE Dev MVP
• Techorama conference owner
• Visug user group lead (www.visug.be)
kevinderudder.wordpress.be
kevin@e-guidelines.be
@kevinderudder
4. • Comparison of 2 technologies
• XAML (Windows 8, Silverlight)
• HTML
• Give you an overview of what each technology can or cannot do!
• 60 minutes
• 10 topics
• 3 minutes per topic
• YOU DECIDE!
• Please decide quickly!
5.
6. • Round 1: Layout
• Round 2: Managing styles
• Round 3: Drawing
• Round 4: Local data
• Round 5: Services
• Round 6: Data binding
• Round 7: Audio and video playback
• Round 8: Controls
• Round 9: Uh oh, some OO!
• Round 10: Unit testing
• Final scores!
7.
8. • Responsive, resolution independent
• Easy table based layout
• Layout management system built-in
9.
10. • Layout is done based on a number of built-in elements (“layout
management elements”)
• General, available in any XAML technology:
• Canvas
• StackPanel
• Grid
• Silverlight
• DockPanel
• WrapPanel
• Windows 8 & Windows Phone 8.1
• GridView
• ListView
• Semantic Zoom
11. • Positional layout
• Positioning of elements is done relative to owning canvas
• Very lightweight container
• “Drawing” panel, similar to a Form in WinForms
• Not the best choice for
flexible, responsive UIs
• Positioning done based on
attached properties
<Canvas Width="150" Height="100" Background="Gray">
<Rectangle Canvas.Top="10" Canvas.Left="10"
Width="130" Height="80" Fill="Blue" />
<Canvas Canvas.Left="20" Canvas.Top="20"
Width="110" Height="60" Background="Black">
<Ellipse Canvas.Top="10"
Canvas.Left="10"
Width="90"
Height="40"
Fill="Orange" />
</Canvas>
</Canvas>
12. • Automatic layouting of its child elements
• Stacks elements horizontally or vertically
• Very simple control
• OK for flexible Uis
• Not for an entire page though
<StackPanel Background="Gray"
Orientation="Horizontal"
>
<Rectangle Width="100" Height="100"
Fill="Blue" />
<Ellipse Width="100" Height="100"
Fill="Orange" />
</StackPanel>
13. • Powerful layout control
• Ready for responsive UIs
• Versatile for all resolutions
• Not “shared” as the same control for tabular data display
• Not visible
• No rows and columns
• Each cell can contain 1 element by default
• More possible due to nesting
• Nesting is often applied for a page
17. <header />
<main>
<aside></aside>
<section>
<article>
<header />
<footer />
</article>
</section>
</main>
<footer />
• Layout in HTML is done by a combination of HTML <tags> and CSS {styles}
• Don’t position your elements by using <br/> or <p/> tags
• HTML
• Each element (except <div>) has its own purpose
• If you use older browsers, use modernizr or
add the elements via JavaScript to the DOM
18. main {
display: block;
}
aside > nav {
display: -ms-flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
• Layout in HTML is done by a combination of HTML <tags> and CSS {styles}
• Don’t position your elements by using <br/> or <p/> tags
• CSS
• Hardest part
• Add a reset CSS to your page
• reset.css or normalize.css
• Use a Grid System to make this easier for you
• 960grid
• Twitter bootstrap
• …
19.
20. • {display:block;} to have a newline before and after the element
• {display:inline;} to put the element inside text or another element
• {display:inline-block;} to have an inline element with features of a
block element like width and height
• {display:table;} to create
table in CSS instead of HTML
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
</div>
</div>
</div>
30. header{
background-color: orange;
nav{
background-color: darken(orange, 10%);
}
nav a{ text-decoration: none;
&:hover{text-decoration: underline;}
}
}
header {background-color: orange;}
header nav {background-color: #cc8400;}
header nav a {text-decoration: none;}
header nav a:hover {text-decoration: underline;}
31.
32. • Blocks of UI elements that can be reused
• Limited to properties of elements
• Are tied to type for which they are defined
<Grid>
<Grid.Resources>
<Style TargetType="Rectangle" x:Key="Outlined">
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="Stroke" Value="Black"/>
</Style>
</Grid.Resources>
<Rectangle Fill="#FF808080" Width="100" Height="50"
Style="{StaticResource Outlined}"
StrokeThickness="5"
/>
</Grid>
33. • Should have name and TargetType defined
• TargetType is polymorphic
• Static or dynamic (only in WPF)
• Aren’t really cascading,
although we can build a
hierarchy of styles
• Similar to CSS
<Style x:Key="BaseControl"
TargetType="Control">
<Setter Property="FontWeight"
Value="Bold" />
</Style>
<Style x:Key="ButtonStyle1"
TargetType="Button"
BasedOn="{StaticResource BaseControl}">
<Setter Property="FontFamily"
Value="Verdana" />
<Setter Property="FontSize"
Value="18" />
</Style>
34. • Inside a style setter, we can do data-binding
• Not really a variable though
• How it works:
• Create an object
• Bind a style to it
• When the object changes, the bound values in the setters will also change
40. • All drawing is vector-based
• No problems with different resolution
• Based on hierarchy of shapes
• Shape base class
• Rectangle
• Ellipse
• Line
• Polygon
• Polyline
• Path
42. • Shapes can have fill and stroke
• Brushes
• SolidColorBrush
• LinearGradientBrush
• RadialGradientBrush
• ImageBrush
• VideoBrush (depending on platform)
Fill
Stroke
45. • Is not so easy, but great things can be achieved
• Posibilities
• Canvas
• SVG
• WebGL
• Plain Old JavaScript
• Which option you pick, JavaScript needs to be your friend
• Or you should try CSS3D
46. • Typical choice for most HTML games
• Simple
• But fast
• Bitmapped area, so drawn objects become part of the canvas which
makes it impossible to attach event handlers
• When objects move, you must redraw the canvas
47. • XML based vector graphics format
• Less performant but very flexible
• Each drawn object becomes part of the DOM
• Attach one or more event handlers to it
<svg width="320" height="320">
<defs>
<radialGradient id="circleGrad">
<stop offset="100%" stop-color="rgb( 0, 255, 0)" />
</radialGradient>
</defs>
<ellipse fill="url(#circleGrad)" stroke="#000" cx="50%“ cy="50%" rx="50%" ry="50%">
</ellipse>
</svg>
52. • If you want to store data locally, you can choose between these
options
• Cookies (which I will not explain)
• LocalStorage / SessionStorage
• IndexedDB
• WebSQL
53. • SessionStorage
• Temporary key/value pairs
• 1 session per tab/windows
• LocalStorage
• Same as session storage but persistant
• Global usage in multiple instances of your browser
localStorage.setItem("rememberMeForALongTime", anyObject);
sessionStorage.setItem("rememberMeForALittleWhile", anyObject);
var anyObject = sessionStorage.getItem("rememberMeForALittleWhile");
var anyObject = localStorage.getItem("rememberMeForALongTime");
54. • API for client-side storage of data
• Local and session storage is good for small amounts of data
• IndexedDB is ideal for large amounts of data
• Transactional database System
• Boost performance by using indexes
55.
56.
57. • Silverlight and Windows Phone define IsolatedStorage
• Can store data on Client Machine
• Size of storage is quota'd
• Mostly used to save state/settings
58. // Get the Store and Stream
using (IsolatedStorageFile file =
IsolatedStorageFile.GetUserStoreForApplication())
using (IsolatedStorageFileStream stream = file.CreateFile("Foo.config"))
{
// Save Some Data
StreamWriter writer = new StreamWriter(stream);
writer.WriteLine("AutoRun=true");
writer.Flush();
stream.Close();
}
59. // Get the Store and Stream
using (IsolatedStorageFile file =
IsolatedStorageFile.GetUserStoreForApplication())
using (IsolatedStorageFileStream stream =
file.OpenFile("Foo.config", FileMode.Open))
{
// Read Some Data
StreamReader rdr = new StreamReader(stream);
string config = rdr.ReadToEnd();
stream.Close();
}
60. • Simple usage to create Application Settings
• Use IsolatedStorageSettings to set/get settings
• ApplicationSettings are per .xap
• SiteSettings are per domain
IsolatedStorageSettings.ApplicationSettings["foo"] = "bar";
string appFoo = IsolatedStorageSettings.ApplicationSettings["foo"] as string;
IsolatedStorageSettings.SiteSettings["foo"] = "bar";
string siteFoo = IsolatedStorageSettings.SiteSettings["foo"] as string;
61. • Defines Application Data API
• Local
• Roaming
• Temporary
• Based on
• File system
• Settings (automatically persisted)
67. • Silverlight, Windows 8 and Windows Phone share server-technologies that
they can communicate with
• ASMX
• WCF
• REST
• RSS
• Sockets
• oData
• …
• Common requirement is asynchronous communication
• Silverlight: callbacks
• Windows 8 and Windows Phone 8: await/async pattern
• Note: WPF can use the full, raw power of .NET and thus has even less restrictions
68. • Defines HttpClient (Silverlight and WP7 used WebClient)
• Works async
• HttpClient defines
• Get(Async)
• Returns an HttpResponseMessage
• Put(Async)
• Post(Async)
• Delete(Async)
RESTful!
• Windows 8.1 introduced a new version of the HttpClient
• Very similar API
69. • XML
• Linq-To-XML
• XmlReader/XmlWriter
• XmlSerializer
• JSON:
• Use the JsonObject and feed it the returned string
• DataContractJsonSerializer is also available
• JSON.NET
• Open source via NuGet
• Often the preferred choice
70.
71. • If you want to retrieve data in a browser you have following options
• XMLHttpRequest
• WebSockets
72. • XMLHttpRequest defines an API for transferring data between a client
and a server
• Client initiates the request
• Synchronous or Asynchronous
• Based on the HTTP protocol
var xhr = new XMLHttpRequest();
xhr.open("GET", "URL", /*async*/ true);
xhr.onreadystatechange = function () {
if (xhr.readyState == COMPLETE) {
if (xhr.status == 200) {
var data = xhr.responseText;
}
}
}
xhr.send();
73. • API for socket connections between a browser and a server
• 2-way persistant connection between client and server
• Event-driven responses
• Send messages to the server and receive a response without polling the
server
74. var socket = new WebSocket("ws://www.mi6.com/socketserver", "yourprotocol");
function sendJamesBondOnASecretMission() {
var msg = {
type: "message",
mission: document.getElementById("mission").value,
id: clientID,
date: Date.now()
};
socket.send(JSON.stringify(msg));
}
socket.onmessage = function (event) {
var data = event.data;
}
75.
76.
77. • Don’t require us to write code like
TextBox1.Text = Person1.FirstName;
• Support two-way binding mode
78.
79. • HTML does not know the concept of data binding
• You have data and you bind it to a control
• Plenty of JavaScript frameworks available to allow datavbinding in HTML
• Knockout
• Angular
• Mustache
• …
• Depending on the framework, the syntax may be different
83. • Infrastructure for binding control properties to objects and collections
• Loosely-coupled model, already exists in ASP.NET, WinForms
• Simple and powerful model
• Source
• Any Object
• PropertyPath
• Path To Any Public Property
• Dynamic
• Supports multiple Binding Models
• OneTime, OneWay and TwoWay
85. • Binding Syntax
• Markup Extension
• PropertyPath at a minimum
• Or specify Source
• Most often: use a DataContext on a base control
<TextBox Text="{Binding Name}" />
<Grid.Resources>
<local:Person x:Key="person1" />
</Grid.Resources>
...
<TextBox Text="{Binding Name, Source={StaticResource person1}}" />
<Grid DataContext={StaticResource person1}>
<TextBox Text="{Binding Name}" />
</Grid>
86. • Three Modes for Binding
• TwoWay, OneWay or OneTime
• Binding Syntax for Mode
• Binding Syntax
• OneWay and OneTime work with any object
• Property Based Reads
• TwoWay works with any objects
• Property Based Writes
<TextBlock Content="{Binding Name, Mode=TwoWay}" />
87. • Binding Interfaces
• Properties use INotifyPropertyChanged interface
• Collections use INotifyCollectionChanged interface
• Use ObservableCollection<> for Bindable Collections
88.
89.
90. • Easy way of media playback
• Support for common formats
• DRM
91.
92. • MediaElement Loads or Streams content
• Loading:
• Plays Media as Progressively Downloaded
• Streamed:
• Downloads Chunk and plays it
• Support for
• Audio
• MP3
• Wav
• Video
• MP4
• WMV
• OGG video
• Support for
• Scrubbing
• Markers (subtitles)
<MediaElement
x:Name="MainMediaElement"
Height="300"
Width="640"
AreTransportControlsEnabled="True"
/>
93. • Silverlight, Windows Phone and Windows 8 support DRM
• Player Framework
• PlayReady Client
• Smooth Streaming SDK
94.
95. • Audio and Video are already available for years
• But it was kind of difficult
98. function playPauseVideo() {
if (video.paused || video.ended) {
if (video.ended) {
video.currentTime = 0;
}
video.play();
}
else {
video.pause();
}
}
99.
100.
101. • Rich, native control set
• Basic
• Advanced
• Extensible control set
• Data visualizations
102.
103. • HTML does not have a rich set of built-in controls
• And part of these controls are not supported by all browsers
• Built-in in HTML:
• TextBox
• PasswordBox
• Slider
• Progress
• Calendar
• DatePicker
• …
104. • Because of the open web community you can download code to
create extra controls
105. • Because of the open web community you can download code to
create extra controls
106. • Or you can download or buy extra controls
• jQuery UI
• Kendo UI
107.
108. • Very rich control set
• Depending on technology
• Built-in in most XAML technologies
• TextBox
• PasswordBox
• Slider
• ProgressBar
• Calendar
• DatePicker
• …
110. • Bindable to IList or IEnumerable lists
• ItemsControl
• ListBox
• ComboBox (not in W8 and WP8)
• TabControl (not in W8 and WP8)
• DataGrid (not in W8 and WP8)
• Inherit from ItemsControl
• Similar to a repeater
<ItemsControl>
<Button Content="Click One" />
<Button Content="Click Two" />
</ItemsControl>
111. • Endless options when you start to template controls
• Allows re-definition of build-in controls
• Can redefine the XAML that is used to build control
• Look can be changed dramatically by changing XAML
• Feel can be changed
• Can only add built-in behavior
• E.g. no new methods, properties or events
116. • It’s C#
• XAML does know about OO principles going on behind the scenes
• DataTemplateSelectors
• Implicit Data Templates
• Data binding properties
117.
118. • Although lots of people thing that you cannot do OO stuff in
JavaScript, you can
• It is not always pretty, but it is possible
JamesBond = (function() {
function JamesBond(name, drink) {
this.name = name;
this.drink = drink;
}
return JamesBond;
})();
sean = new JamesBond("Sean Connery", "Martini");
119. • Although lots of people thing that you cannot do OO stuff in
JavaScript, you can
• It is not always pretty, but it is possible
JamesBond = (function() {
function JamesBond(name, drink) {
this.name = name;
this.drink = drink;
}
return JamesBond;
})();
sean = new JamesBond("Sean Connery", "Martini");
120. • Today: make your live easier with compilers/transpilers/…
• CoffeeScript
• TypeScript
• …
# CoffeeScript
class JamesBond
constructor: (name, drink) ->
@name = name
@drink = drink
// TypeScript
class JamesBond{
name: string;drink: string;
constructor(name: string, drink: string) {
this.name = name;
this.drink = drink;
}
}
121. • ECMAScript 6 will add more OO functionality
• Future version of JavaScript
122.
123.
124. • Support an easy way for unit testing
• Unit testing frameworks
125.
126. • Bunch of Testing Frameworks available
• QUnit
• Mocha
• TestSwarm
• Jasmine
• Tutti
• …
• Ideal with a JavaScript build system like grunt or gulp
127.
128. • Silverlight includes support for unit testing directly from Visual Studio
• Run in the browser
• Not easy to integrate with build process
• In general, not a great story!
• Windows 8 support Unit Test Library template in
Visual Studio
• Based on Visual Studio Testing Framework
• Integrates with build process
• Other unit testing frameworks are supports