Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Developing Windows Store Apps with HTML5 and JavaScript
Developing Windows Store Apps with HTML5 and JavaScript

Developing Windows Store Apps with HTML5 and JavaScript: The Windows store is growing in popularity and with this step-by-step guide it's easy to join the bandwagon using HTML5, CSS3, and JavaScript. From basic development techniques to publishing on the store, it's the complete primer.

eBook
$14.99 $16.99
Paperback
$26.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Table of content icon View table of contents Preview book icon Preview Book

Developing Windows Store Apps with HTML5 and JavaScript

Chapter 2. Styling with CSS3

HTML defines the document/page structure and lists the elements it contains. But the job of defining the layout, the positioning, and the styling of those elements is the sole responsibility of CSS. A cascading style sheet (CSS), as the name suggests, is basically a sheet that contains a list of style rules. Each CSS style rule links a selector, which defines what is going to be styled, to a declaration block, which includes a single or a set of styles, which in turn define the effect(s) you want applied to that associated selector. The syntax of a basic style rule would look like this

selector { property: value; property: value; }

Throughout this chapter, we will go over the following topics: CSS3 selectors, Grid and Flexbox, Animation and Transforms, and Media Queries. These topics cover some of the CSS3 features that are frequently used when developing a Windows Store app with JavaScript.

The power of CSS3 selectors


CSS selectors are very powerful and come in handy when formatting an HTML document. Using selectors is sometimes tricky, as selecting exactly what you want, and then ensuring that the style rules applied are affecting just the elements that you intended, is a tedious mission. But when done properly with the right selectors, the outcome is very rewarding. Mastering the use of selectors will result in a less complex CSS, minimizing the probability of having redundant styles and over-defining the HTML with classes and IDs, thus ensuring a better performance. The selector can simply be an HTML element, a class, an element ID, or it can even be the element's position in the DOM.

The following is a list of CSS selectors; we will start with the basics and get to the new selectors introduced in CSS3:

  • The asterisk (*) symbol: This is the catch-all selector, called the universal type selector, and is used to target every element in the document. It is often used with CSS...

Creating fluid layouts with Grid and Flexbox


When it comes to implementing the design principles set by Microsoft to build attractive, intuitive, and interactive Windows 8 apps, layout is very important. It is common to define a page layout using HTML structural elements such as <div> and <table>, and the positioning style rules.

But now, there is a more flexible way to do it with the CSS3 advanced layout features, namely Grid layout and Flexbox (Flexible box) layout. These layout systems allow you to easily implement an adaptive and fluid layout.

The Grid layout

It offers a very simple way to create fluid and adaptable layouts for a Windows 8 app. It is ideal for implementing a full screen UI since the grid can automatically expand to fill in all the space that is available. The Grid layout allows you to align and position its child elements as columns and rows, entirely using CSS, and is independent of their order in the HTML code. It enables more fluidity in layouts than what...

CSS-powered animations


CSS transforms allow you to manipulate HTML elements in a way that previously was only possible with scripts. It enables rotation, translation, scaling, and skewing of elements, and enables the transformation of elements in 2D and 3D. CSS animations enable you to smoothly change the style properties over a period of time, allowing you to design complex animations with better rendering performance when compared to JavaScript-powered animations. Working with the two combined, you can do magic on your app.

CSS3 animations

CSS3 revolutionized animation in web development. Earlier, creating animations required animated images, plugins such as Flash, or some heavy scripting. Although jQuery and other supporting libraries made it a bit easier for developers to create animations with JavaScript, still it cannot compete with the performance capability that the CSS animations offer. Basically, an animation defines an effect that allows an element to change one or many styles,...

Introducing media queries


Your Windows 8 app should have a fluid and responsive UI, as the same app will be downloaded and opened either on a tablet, a PC with a large monitor, or a phone. Your app should adapt to the different view states (full screen portrait or landscape, filled or snapped) and display accordingly. It should look good and function well when the users flip the screen between portrait and landscape, when they zoom, when they snap the app, and so on. Too much stuff to look out for, you might say? Worry not, because if you are developing using a JavaScript app, the answer to all your concerns is CSS Media Queries!

By using CSS media queries, you can manage the changes to the layout by easily defining different styles to apply to the HTML elements in your app, depending on the view state and size of the current media. You can use a separate media query to tailor for each view state, or you can combine media queries to apply the same set of styles to multiple view states. The...

Summary


In this chapter, we tried to cover and learn as much as possible from the new and rich CSS3 features and describe which ones are available for us when developing apps for Windows 8. We looked in detail at the CSS selectors and learned to use them to filter the DOM elements according to our need. We learned about new layout techniques using the Grid and Flexbox display properties.

We saw what magic we can do with the animation and transform properties, and got to have a look at the power of media queries to help us build a responsive layout. In short, CSS3 is a wonderland and you will need to get familiar with its features in order to harness all its powers.

In the next chapter, we will go over the main features provided by the Windows Library for JavaScript, which is the backbone of the Windows Store app that is built using JavaScript.

Left arrow icon Right arrow icon

Key benefits

  • Learn about the powerful new features in HTML5 and CSS3
  • Quick start a JavaScript app from scratch
  • Get your app into the store and learn how to add authentication

Description

Windows 8 has already been launched and been installed on millions of devices while the store is getting populated with apps, and soon enough everyone will want a Windows Store app. So start now and learn how to develop apps for Windows 8 using HTML5, CSS3, and JavaScript and you will be killing two birds with one stone by getting introduced to important features in HTML5 and CSS3 at the same time. You will gain the advantage of utilizing your web development skills to transform your website into an app or the other way round. Developing Windows Store Apps with HTML5 and JavaScript is a practical, hands-on guide that covers the basic and important features of a Windows Store App along with code examples which will show you how to develop these features, all the while learning some of the new features in HTML5 and CSS3 which you can utilize in other areas of development. This book starts with the new features in HTML5 and CSS3 that are incorporated with Windows 8 development, and then moves on to creating a blank Windows Store app and add features to it as we move through the chapters till we package the app and make it ready for publishing. Finally, we will have a look at how similar it is to develop the same app with XAML. You will also learn how to add and use new controls dedicated for Windows 8 and then see how to fetch data for the app and bind it to the controls. We will also take a look at making the app adapt to change in screen sizes and rotation as well as how to make the app live with tiles and allow users to sign in using their email accounts. Also you will learn how to add an app bar, and lastly you learn how to finalize the app and publish it. If you want to leverage your web development skills and utilize it in developing for Windows 8, then you came to the right place. Developing Windows Store Apps with HTML5 and JavaScript is packed with examples and screenshots which will make it easy for you to implement all the things you learned throughout the book.

Who is this book for?

This book is great for developers who want to start developing for Windows 8 and it also targets developers who want to get introduced to powerful advancements in standards-based web technology, while using it to build Windows Store apps, as well as leveraging their existing skills and code assets in web development.

What you will learn

  • Using HTML5 elements
  • Styling with CSS3
  • Using Windows Library for JavaScript controls
  • Getting data via web URLs and binding it to controls
  • Creating a blank Windows Store JavaScript app
  • Understanding view states and making the app responsive
  • Adding live tiles and notifications for the app
  • Creating a basic app using XAML
  • Adding user sign-in features via email accounts
  • Understanding the Windows Store and publishing the app
Estimated delivery fee Deliver to Egypt

Standard delivery 10 - 13 business days

$12.95

Premium delivery 3 - 6 business days

$34.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Aug 23, 2013
Length: 184 pages
Edition : 1st
Language : English
ISBN-13 : 9781849687102
Languages :

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to Egypt

Standard delivery 10 - 13 business days

$12.95

Premium delivery 3 - 6 business days

$34.95
(Includes tracking information)

Product Details

Publication date : Aug 23, 2013
Length: 184 pages
Edition : 1st
Language : English
ISBN-13 : 9781849687102
Languages :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 119.97
HTML5 Web Application Development By Example : Beginner's guide
$48.99
Learning jQuery - Fourth Edition
$43.99
Developing Windows Store Apps with HTML5 and JavaScript
$26.99
Total $ 119.97 Stars icon

Table of Contents

11 Chapters
HTML5 Structure Chevron down icon Chevron up icon
Styling with CSS3 Chevron down icon Chevron up icon
JavaScript for Windows Apps Chevron down icon Chevron up icon
Developing Apps with JavaScript Chevron down icon Chevron up icon
Binding Data to the App Chevron down icon Chevron up icon
Making the App Responsive Chevron down icon Chevron up icon
Making the App Live with Tiles and Notifications Chevron down icon Chevron up icon
Signing Users in Chevron down icon Chevron up icon
Adding Menus and Commands Chevron down icon Chevron up icon
Packaging and Publishing Chevron down icon Chevron up icon
Developing Apps with XAML Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.4
(8 Ratings)
5 star 50%
4 star 37.5%
3 star 12.5%
2 star 0%
1 star 0%
Filter icon Filter
Top Reviews

Filter reviews by




Nidal Hasan Araby Nov 21, 2013
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I have read throughout the book. It is very handy for those who wants to get a hands on introduction to learning windows store application development with HTML5 and java script. Those who have some knowledge will benefit from the examples found in the books to jump start their development activities. I recommend this for all users interested in having an a to z application development and submission to the store.
Amazon Verified review Amazon
Chukri Soueidi Mar 28, 2014
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This book is a solid guide for developing windows metro style apps.You can read this book and start building apps for the Windows Store using minimum skills in JavaScript and HTML5.Carefully written, clear and concise, I enjoyed it a lot.
Amazon Verified review Amazon
Foogaro Nov 27, 2013
Full star icon Full star icon Full star icon Full star icon Full star icon 5
The book is well done, it covers pretty much everything you need to get started developing your HTML5 app for Windows Phone, going deep to professional matters.You don't need to have any particularly skill, it starts from the basic and quickly leads you to complex stuff.In the first chapters it explains the fundamental of the new HTML5 semantic components, the new CSS3 (cascading style sheet) selectors features, as well as the powerful WinJS library with all its UI components (they are real widget you can use in your mobile app).Since chapter 4 you start building your first and real mobile application using Visual Studio 2012 and the Windows 8 SDK.In order to start developing Windows Store apps, you will need to have a developer license for Windows 8. This license lets you install, develop, test, and evaluate apps locally before they are tested and certified by the Windows Store.As you get acquainted using the tools, the book drives to real application scenario such as dynamic data binding and responsive design.Once you complete your design, your business logic, the book guides you to bring your app to life, taking you to the next professional level with tiles and notification.The book shows you how to build a multi user application, using the OAuth standard.At the end, you will learn how to package and publish your apps. Those are key points as the packaging and publishing process are a little complex, obviously.The book ends with a chapter dedicated to XAML, which is Extensible Application Markup Language.In conclusion, I think this book is very useful for any one interested in developing HTML5 mobile application, especially those ones targeting Windows 8 devices.Yep, I don't think this book is just for Microsoft Windows developer, all the code showed is HTML5, CSS3, Javascript, those are standards.
Amazon Verified review Amazon
Damir Arh Oct 21, 2013
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Strangely enough the book starts out with a pretty thorough overview of HTML 5 and CSS. For existing web developers who are interested in learning how to use their skills for developing Windows Store apps this probably won’t be of much use, but I still think it’s a welcome addition to the book. It certainly made it easier for me to follow the remaining chapters and I’m sure it will for other readers with similar (lack of) skills as well.The rest of the book focuses on Windows Store app development, as expected. Having already gone through the process of learning it, I can say that in spite of its shortness, it manages to cover all the important topics. The reader should definitely be able to write and publish his own first application, once he’s done with it. More importantly, it provides a good basis for further learning about the topic which I would certainly recommend.The last chapter of the book does feel a bit out of place, though. In only a couple of pages it tries to compare HTML5 / JavaScript development of Windows Store apps to .NET / C# approach. I’m not sure it’s really useful for anyone. For those without prior knowledge of C#, I think it is to brief to give any real value. On the other hand, those with existing previous knowledge will want to learn more and will probably find a different source of information.Still, this chapter doesn’t really take away any value from all the other chapters. You can always skip if you’ re not interested in it. All in all I would recommend this book to anyone with no or minimal knowledge about Windows Store apps, who’s interested in developing them using HTML5 and JavaScript, even if he isn’t already proficient in them.
Amazon Verified review Amazon
Juri Nov 22, 2013
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
The book is especially suited for beginners in the are of HTML5 Windows Store Apps. While having some knowledge/experience with HTML5 and JavaScript is an advantage, it isn't absolutely necessary as the book has some introductory sections on those concepts, teaching you just enough to get started.I appreciate the book as it follows a very practical approach, covering the very basics through more advanced stuff till a successful publication on the Windows Store.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the digital copy I get with my Print order? Chevron down icon Chevron up icon

When you buy any Print edition of our Books, you can redeem (for free) the eBook edition of the Print Book you’ve purchased. This gives you instant access to your book when you make an order via PDF, EPUB or our online Reader experience.

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela