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 eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
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

Billing Address

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

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 : 9781849687119
Languages :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
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

Billing Address

Product Details

Publication date : Aug 23, 2013
Length: 184 pages
Edition : 1st
Language : English
ISBN-13 : 9781849687119
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

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.