Programming in HTML5 with JavaScript and CSS3

programming in html5 with javascript and css3 training guide and programming in html5 with javascript and css3 microsoft official practice test pdf free download
Dr.LewisFinch Profile Pic
Dr.LewisFinch,France,Researcher
Published Date:15-07-2017
Your Website URL(Optional)
Comment
Programming in HTML5 with JavaScript and CSS3 spine = 1.28” Programming in HTML5 with JavaScript and CSS3 Designed to help enterprise administrators develop real-world, About You job-role-specific skills—this Training Guide focuses on deploying This Training Guide will be most useful Programming and managing core infrastructure services in Windows Server 2012. to IT professionals who have at least three years of experience administering Build hands-on expertise through a series of lessons, exercises, previous versions of Windows Server in and suggested practices—and help maximize your per formance midsize to large environments. on the job. About the Author in HTML5 with This Microsoft Training Guide: Mitch Tulloch is a widely recognized expert on Windows administration and • Provides in-depth, hands-on training you take at your own pace ® has been awarded Microsoft MVP • Focuses on job-role-specific exper tise for deploying and status for his contributions supporting managing Windows Server 2012 core services those who deploy and use Microsoft JavaScript and platforms, products, and solutions. He • Creates a foundation of skills which, along with on-the-job is the author of Introducing Windows experience, can be measured by Micr osoft Certification exams Server 2012 and the upcoming such as 70-410 Windows Server 2012 Virtualization Inside Out. Sharpen your skills. Increase your expertise. CSS3 About the Practices • Plan a migration to Windows Server 2012 For most practices, we recommend • Deploy servers and domain controllers using a Hyper-V vir tualized ® • Administer Active Directory and enable advanced features environment. Some practices will require physical servers. • Ensure DHCP availability and implement DNSSEC For system requirements, see the • Perform network administration Introduction. ® • Deploy and manage Hyper-V hosts and virtual machines • Deploy and manage Storage Spaces and iSCSI storage Preparing for • Deploy and manage print servers Microsoft Certification? • Plan, configure, and manage Group Policy Get the official exam-pr ep guide Training ™ for Exam 70-410. • Automate administrative tasks with Windows P owerShell Exam Ref 70-410: Installing and Guide Configuring Windows Ser ver 2012 ISBN 9780735673168 Glenn Johnson microsoft.com/mspress ISBN: 978-0-7356-xxxx-x 90000 U.S.A. 39.99 Canada 41.99 Recommended Glenn Johnson Certification/ 0 000000 000000 Windows ServerIntroduction his training guide is designed for information technology (IT) professionals who develop Tor plan to develop HTML documents such as webpages or Windows Store applications. It is assumed that, before you begin using this guide, you are familiar with web development and common Internet technologies. This book covers some of the topics and skills that are the subject of the Microsoft cer- tification exam 70-480. If you are using this book to complement your study materials, you might find this information useful. Note that this book is designed to help you in the job role; it might not cover all exam topics. If you are preparing for the exam, you should use addi- tional study materials to help bolster your real-world experience. For your reference, a map- ping of the topics in this book to the exam objectives is included in the back of the book. By using this training guide, you will learn how to do the following. ■■ Create a project using Visual Studio Express 2012 for Web. ■■ Create a project using Blend for Visual Studio 2012. ■■ Create a project using Visual Studio Express 2012 for Windows 8. ■■ Create an HTML document using semantic markup. ■■ Implement JavaScript functionality with your HTML documents. ■■ Use test-driven development techniques for writing JavaScript code. ■■ Create Cascading Style Sheets (CSS) that visually format your HTML document. ■■ Create HTML tables. ■■ Create JavaScript objects. ■■ Use jQuery to simplify JavaScript programming. ■■ Create HTML forms with validation. ■■ Create a Node.js website and web service. ■■ Call web services from JavaScript. ■■ Perform asynchronous JavaScript operations. ■■ Perform WebSocket communications. ■■ Play audio and video on a webpage. ■■ Draw with an HTML5 canvas. ■■ Use SVG image files. ■■ Perform drag and drop operations. ■■ Make your HTML location aware. ■■ Persist data on the browser client. xixBackward compatibility and cross-browser compatibility This book does not attempt to cover every difference between every version of every browser. Such a comprehensive discussion could easily yield a library of books. Most of the code in this book is written using Internet Explorer 10, which is installed with Windows 8. In addition, many but not all the code examples were tested using the following browsers. ■■ Firefox 17.0.1 ■■ Google Chrome 23.0.1271.97 m ■■ Opera 12.11 ■■ Apple Safari 5.1.7 In most cases, if the other browsers were not compatible, there is a note stating so. This is especially true in the last chapters because web storage is still relatively new, and the require- ments are still fluid. The best way to see which features are available among browsers is to visit a website that is updated when new browser versions are released and HTML5 features are updated. The website http://caniuse.com is particularly good. System requirements The following are the minimum system requirements your computer needs to meet to com- plete the practice exercises in this book. ■■ Windows 8 or newer. If you want to develop Windows Store applications, you need Windows 8 on your development computer. Hardware requirements This section presents the hardware requirements for using Visual Studio 2012. ■■ 1.6 GHz or faster processor ■■ 1 GB of RAM (more is always recommended) ■■ 10 GB (NTFS) of available hard disk space ■■ 5400 RPM hard drive ■■ DirectX 9–capable video card running at 1024 × 768 or higher display resolution. ■■ Internet connectivity xx IntroductionSoftware requirements The following software is required to complete the practice exercises. ■■ Visual Studio 2012 Professional, Visual Studio 2012 Premium, or Visual Studio 2012 Ultimate. You must pay for these versions, but in lieu of one of these versions, you can install the following free express versions. ■■ Visual Studio Express 2012 for Web. Available from http://www.microsoft.com /visualstudio/eng/downloadsd-express-web. ■■ Visual Studio Express 2012 for Windows 8. This installation also installs Blend for Visual Studio 2012. Available from http://www.microsoft.com/visualstudio/eng /downloadsd-express-web. Practice exercises This book features practices exercises to reinforce the topics you’ve learned. These exercises are organized by chapter, and you can download them from http://aka.ms /TGProgHTML5/files . Acknowledgments Thanks go to the following people for making this book a reality. ■■ To Carol Dillingham for your constructive feedback throughout the entire process of writing this book. Thanks for also having patience while the winter holiday months were passing, and my desire and ability to write was constantly interrupted. ■■ To Devon Musgrave for providing me the opportunity to write this book. ■■ To Kerin Forsyth for your hard work in making this book consistent with other Microsoft Press books and helping me with the delivery of this book. ■■ To Pierce Bizzaca for your technical reviewing skills. To all the other editors and artists who played a role in getting my book to the public, thank you for your hard work and thanks for making this book venture a positive experience for me. Errata and book support We’ve made every effort to ensure the accuracy of this book and its companion content. Any errors that have been reported since this book was published are listed on our Microsoft Press site at Oreilly.com: http://aka.ms/TGProgHTML5/errata Introduction xxiIf you find an error that is not already listed, you can report it to us through the same page. If you need additional support, send an email to Microsoft Press Book Support at mspinputmicrosoft.com. Please note that product support for Microsoft software is not offered through the preceding addresses. We want to hear from you At Microsoft Press, your satisfaction is our top priority and your feedback our most valuable asset. Please tell us what you think of this book at: http://aka.ms/tellpress The survey is short, and we read every one of your comments and ideas. Thanks in advance for your input Stay in touch Let’s keep the conversation going We’re on Twitter at http://twitter.com/MicrosoftPress. xxii IntroductionCHAPTER 1 Getting started with Visual Studio 2012 and Blend for Visual Studio 2012 elcome to the world of HTML5, CSS3, and JavaScript These technologies, commonly Wreferred to as simply HTML5, can be used to develop applications for Windows and the web. This chapter introduces you to the primary tools you need, Microsoft Visual Studio 2012 and Blend for Visual Studio 2012, which are used in the book’s lessons. Visual Studio 2012 provides exciting new features. The chapters that follow introduce you to many features in Visual Studio 2012 and Blend. Lessons in this chapter: ■■ Lesson 1: Visual Studio 2012 2 ■■ Lesson 2: Blend for Visual Studio 2012 13 Before you begin To complete this book, you must have some understanding of web development. This chapter requires the hardware and software listed in the “System requirements” section in the book’s Introduction. REAL WORLD A CAREER OPPORTUNITY You’re looking for a career in computer programming, but you don’t know what technol- ogy to pursue. You want to learn a technology you can use at many companies to make yourself more marketable and to give you the flexibility to move between companies. What technology would you choose to give you this flexibility? The Internet has exploded. Nearly every company has a website, so why not learn the web technologies? 1HTML, CSS, and JavaScript are three closely coupled core web technologies that you can learn to increase your marketability and give you flexibility to choose the company for which you want to work. This is the beginning of your path toward your future career. Learn these technologies well, and you can expand into other programming technologies such as Silverlight, Flash, C, and Visual Basic. Lesson 1: Visual Studio 2012 Visual Studio 2012 is a highly useful tool for application development. Depending on the edition of Visual Studio you have, it can provide you with an integrated development environ- ment (IDE) you can use for the entire project life cycle. After this lesson, you will be able to: ■■ Identify the available versions of Visual Studio 2012 and the features of each. ■■ Start a project by using Visual Studio Express 2012 for Web. ■■ Start a project by using Visual Studio Express 2012 for Windows 8. Estimated lesson time: 40 minutes Visual Studio 2012 editions The following is a list with short descriptions of the editions of Visual Studio that Microsoft offers. ■■ Visual Studio Test Professional 2012 Provides team collaboration tools but not a full development IDE. This is ideal for testers, business analysts, product managers, and other stakeholders, but this is not an ideal edition for developers. ■■ Visual Studio Professional 2012 Provides a unified development experience that enables developers to create multitier applications across the web, the cloud, and devices. This is an ideal edition for a lone developer or a small team of developers who will be developing a wide range of web, Windows, phone, and cloud applications. ■■ Visual Studio Premium 2012 Provides an integrated application lifecycle manage- ment (ALM) solution and software development functions to deliver compelling appli- cations for a unified team of developers, testers, and business analysts. ■■ Visual Studio Ultimate 2012 Provides a comprehensive ALM offering for organiza- tions developing, distributing, and operating a wide range of highly scalable software applications and services. ■■ Visual Studio Team Foundation Server Express 2012 Provides the collaboration hub at the center of the ALM solution that enables small teams of up to five developers 2 CHAPTER 1 Getting started with Visual Studio 2012 and Blend for Visual Studio 2012to be more agile, collaborate more effectively, and deliver better software more quickly. Includes source code control, work item tracking, and build automation for software projects to deliver predictable results. This is free. ■■ Visual Studio Express 2012 for Web Provides the tools and resources to build and test HTML5, CSS3, ASP.NET, and JavaScript code and to deploy it on web servers or to the cloud by using Windows Azure. Best of all, it’s free. ■■ Visual Studio Express 2012 for Windows 8 Provides the core tools required to build Windows Store apps, using XAML and your choice of .NET language or HTML5, CSS3, and JavaScript. This is also free. If you use Visual Studio Express 2012 for Web, you can work on web projects only, and you must choose a .NET language to start with, such as Visual Basic or C. If you use Visual Studio Express 2012 for Windows 8, you can work on Windows Store applications only, but you can start with a JavaScript project, and you don’t need to set up a website to create small applica- tions. Blend for Visual Studio 2012 also provides the ability to create Windows Store applica- tions with a JavaScript project. The Visual Studio Express 2012 products are available free on the Microsoft website. You should download and install both Visual Studio Express 2012 for Windows 8 and Visual Studio Express 2012 for Web. Visual Studio 2012 support for HTML5 Visual Studio .NET 2012 contains a new HTML editor that provides full support for HTML5 elements and snippets. Here is a list of some of the Visual Studio 2012 features that will make your development experience more enjoyable and productive. The new features will be dem- onstrated and explained later in this book when appropriate. ■■ Testing You can easily test your webpage, application, or site with a variety of brows- ers. Beside the Start Debugging button in Visual Studio 2012, you will find a list of all installed browsers. Just select the desired browser from the list when you are ready to test. ■■ Finding the source of rendered markup By using the new Page Inspector feature, you can quickly find the source of rendered markup. The Page Inspector renders a webpage directly within the Visual Studio IDE, so you can choose a rendered element, and Page Inspector will open the file in which the markup was generated and highlight the source. ■■ Improved IntelliSense Quickly find snippets and code elements. In the HTML and CSS editors, IntelliSense filters the display list as you enter text. This feature shows strings that match the typed text in their beginning, middle, or end. It also matches against initial letters. For example, “bw” will match “border-width.” ■■ Reusable Markup You can easily create reusable markup by selecting the markup and extracting it to a user control. Lesson 1: Visual Studio 2012 CHAPTER 1 3■■ Automatic Renaming When you rename an opening or closing HTML tag, the cor- responding tag is renamed automatically. CSS3 support Visual Studio .NET 2012 provides a new CSS editor that offers full support for CSS3, including support for cascading style sheets (CSS), hacks, and snippets for vendor-specific extensions to CSS. ■■ Expandable Sections Use the CSS editor to expand and collapse sections by clicking the plus or minus sign that is displayed to the left of each style entry. ■■ Hierarchical Indentation The CSS editor displays nested styles in a hierarchical fash- ion, which makes it much easier to read and understand the styles. ■■ Add Comments You can easily comment and uncomment blocks. ■■ Color Selector The CSS editor now has a color selector like the HTML editor. JavaScript support Visual Studio 2012 provides many new features to make the JavaScript developer experi- ence more enjoyable and productive. The following is a list of some of the new features and enhancements. ■■ Standards-based Visual Studio 2012 incorporates the JavaScript features of ECMAScript 5 and the HTML5 document object model (DOM). ■■ Improved IntelliSense You can receive improved IntelliSense information for func- tions and variables by using new elements supported in triple-slash (///) code com- ments. New elements include var and signature. You can also view function signatures on the right side of the statement completion list. ■■ Improved editor JavaScript Editor implements smart indenting, brace matching, and outlining as you write code. For example, if you position your cursor to the left of an open curly brace, the open and closed curly braces are highlighted. This works with curly braces, square brackets, angle brackets, and parentheses. ■■ Go To Definition To locate function definitions in source code, you just right-click a function and then click Go To Definition. You can also put the cursor in the function, and then press the F12 key to open the JavaScript source file at the location in the file where the function is defined. (This feature isn’t supported for generated files.) ■■ IntelliSense from JavaScript comments The new IntelliSense extensibility mecha- nism automatically provides IntelliSense when you use standard JavaScript comment tags (//). ■■ Breakpoints You now have more flexibility when setting a breakpoint. When a single line contains multiple statements, you can now break on a single statement. 4 CHAPTER 1 Getting started with Visual Studio 2012 and Blend for Visual Studio 2012■■ Reference Groups You can control which objects are available in global scope by using Reference Groups. Reference Groups is configured on the menu bar by navigat - ing to Tools Options Text Editor JavaScript IntelliSense References. ■■ Drag-and-drop references You can drag JavaScript files that have the .js extension from Solution Explorer to the JavaScript code editor, where they are added as refer- ences for Visual Studio to use to provide IntelliSense. When adding references by drag- ging and dropping, they are put at the top of the page in the code editor. Exploring Visual Studio Express 2012 for Windows 8 When you start Visual Studio Express 2012 for Windows 8, the Start Page screen is displayed. Figure 1-1 shows the Start Page screen, which contains helpful information and links to learn- ing and development resources. On the left side of the Start page are links to create a new project or open a new project. After you create at least one project, you’ll see shortcut links to open any of your recent projects. FIGURE 1-1 Visual Studio Express 2012 for Windows 8 Start page In addition to clicking the New Project link on the Start page, you can start a new project by clicking File and choosing New Project. Figure 1-2 shows the New Project screen, which displays a list of starting templates from which you can choose to start on your new appli- cation quickly. You can think of a template as a project on which someone completed the Lesson 1: Visual Studio 2012 CHAPTER 1 5mundane tasks that would be common to all applications of that type and then saved as a framework that you can use to get started. On the left side of the New Project screen, you can select from recent project templates that you’ve used or from the complete list of installed templates, or you can go online to select a template. You’ll find that the installed templates are divided according to program - ming language. Figure 1-2 shows the templates that are installed for JavaScript. FIGURE 1-2 The New Project screen with the JavaScript project templates NOTE INCLUDED TEMPLATES In Visual Studio Express 2012 for Windows 8, all the included templates are for creating Windows 8 Windows Store applications. In Visual Studio Express 2012 for Web, all included templates are for creating web applications. Remember that you can use HTML5, CSS3, and JavaScript in Windows Store applications and web applications. The following are short descriptions of each template. ■■ Blank App This template isn’t quite empty. It provides a single-page project for a Windows app, but it has no predefined controls on the page. ■■ Grid App This template provides an application that contains multiple pages and enables you to navigate among groups of items. ■■ Split App This template creates a two-page project in which the first page contains a group of items, and the second page contains an item list with details of the selected item to the right of the list. 6 CHAPTER 1 Getting started with Visual Studio 2012 and Blend for Visual Studio 2012■■ Fixed Layout App This template provides a single page with a fixed aspect ratio layout that scales to fit the screen. ■■ Navigation App This template provides a single-page application containing con- trols for navigation. Selecting a template causes a copy of the template to be opened in the Solution Explorer window. By default, the Solution Explorer window is on the right side, although windows can be dragged to any location on the screen. Solution Explorer contains a tree representation of all projects that are loaded into the current solution. Under the Solution Explorer window is the Properties window, which is context-sensitive and contains the properties of the currently selected item. The properties are visible in this window, and most are also configurable. On the left side of the screen is the toolbox. By default, the toolbox is a tab that you can point to to open the window. The toolbox is also context-sensitive, so different tools are avail- able based on what is being displayed in the center window. Quick check ■■ You want to create a Windows Store application. Which edition of Visual Studio 2012 will you use, and is there an operating system requirement for your system to develop Windows Store application applications? Quick check answer ■■ You must use Visual Studio Express 2012 for Windows 8 and have Windows 8 installed to develop Windows Store applications. Examining the Blank App template When the Blank App template is selected, a new solution containing one project is created. The new project won’t be totally blank. As shown in Figure 1-3, there are several files and folders in this new project. At the outset, default.js was created, and it’s currently displayed in the JavaScript editor window. The default.js file is in the js folder, which is where you can add your own JavaScript files. This default.js file currently contains a small amount of code, which Chapter 3, “Getting started with JavaScript,” revisits in more detail. Here is a general overview of what it does. The use of function on the third line creates a naming scope for variables and functions in your application. In the middle of the code are TODO comments that provide a place to put your own code to be executed when the application is launched or reactivated after being suspended or when the application is being suspended. Lesson 1: Visual Studio 2012 CHAPTER 1 7FIGURE 1-3 Blank App template with preliminary coding Blank App also contains other files that you will want to explore. If you open the d efault. html file, you’ll see the following HTML. DOCTYPE html html head meta charset="utf-8" / titleApp1/title WinJS references link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" / script src="//Microsoft.WinJS.1.0/js/base.js"/script script src="//Microsoft.WinJS.1.0/js/ui.js"/script App1 references link href="/css/default.css" rel="stylesheet" / script src="/js/default.js"/script /head body pContent goes here/p /body /html The first line contains DOCTYPE html, which is a declaration to the web browser that describes the version of HTML in which the page is written. It’s not an HTML element; it’s a 8 CHAPTER 1 Getting started with Visual Studio 2012 and Blend for Visual Studio 2012special instruction. In HTML5, this special instruction must be the first thing the browser reads on the page. This instruction is not mandatory, but it is considered a best practice to have it. Next is the html element that consists of the starting tag at the top and ending tag, / html, at the bottom. This is considered the root element of the page, and all other ele- ments are contained within the html element. Inside the html element are the head and body elements. The head element typically contains metadata and page-related instructions. The body element contains content that will be displayed to the user. In this example, the head element contains a meta element that describes the character set being used (utf-8), a title that will be displayed in the browser title bar, links tags that reference CSS files, and script tags that reference JavaScript files. These references are instructions to the browser to load these files when the page loads. The body element contains a paragraph element with the message “Content goes here.” This message appears when the application is executed. The References folder contains a folder called Windows Library for JavaScript 1.0, which contains subdirectories that Microsoft provides and maintains. You should not modify files in this directory structure, but you should explore the files in this folder structure and learn as much as possible about these files. Of particular importance is the css folder that contains the ui-dark.css and ui-light.css files. These files set the primary theme for your application to either a light or dark theme. MORE INFO LIGHT AND DARK BACKGROUNDS The default.html file has a reference to the ui-dark.css file. If you run the application, the application displays the “Content goes here” message on a screen that has a dark back- ground. If you change the reference to the ui-light.css file, you’ll see a light background. The css folder contains cascading style sheets for your application. Currently, the d efault. html file references a single file called default.css. The CSS file contains instructions for presenting your HTML file and will be covered in more detail in Chapter 4, “Getting started with CSS3.” The images folder contains blank images that are set to the best size for presentation to the user. You would typically edit these files as part of your finished application. In the root directory of your application is a file with a .pfx extension that provides a secu - rity key for deployment and an appmanifest file that contains deployment metadata. Exploring Visual Studio Express 2012 for Web When you start Visual Studio Express 2012 for Web, the same Start Page screen is displayed as shown in Figure 1-1 and described in the previous section. In the installed templates, you’ll find that they are divided according to .NET programming language, Visual Basic and Visual C. Figure 1-4 shows the templates that are installed for Visual Basic. Lesson 1: Visual Studio 2012 CHAPTER 1 9FIGURE 1-4 The New Project screen with Visual Basic and Visual C project templates Your new project might differ based on the software installed on your computer. For example, the template shown here is the Get Windows Azure SDK For .NET template that was installed when the Azure SDK was installed. All these templates are for web-related applications; none of them can be used to cre- ate a Windows 8 application. Note that none of the templates support the use of JavaScript as a server-side language, but you can select a Visual Basic or C web project template and use client-side (on the browser) JavaScript. Remember that you can use HTML5, CSS3, and JavaScript as client-side technologies with any of the web application templates. Under one of the languages, you can click the Web node to see a list of available web application templates. You can select a template called ASP.NET Empty Web Application to begin with a nearly empty startup project. Examining ASP.NET Empty Web Application After selecting ASP.NET Empty Web Application, a copy of the template is opened in the Solution Explorer window on the upper right, as shown in Figure 1-5. This window contains a node for the project (WebApplication1); a node that references the project settings, called My Project; and a node that references the project’s configuration file, called Web.config. This project is almost empty. If you press F5 to build and run the web application, it won’t run. You must add a webpage to the project first. 10 CHAPTER 1 Getting started with Visual Studio 2012 and Blend for Visual Studio 2012FIGURE 1-5 Almost empty ASP.NET Empty Web Application By default, the Solution Explorer window is on the right side. Under the Solution Explorer window is the Properties window. The Properties window is context-sensitive and contains the properties of the currently selected item. The properties are visible in this window, and most are also configurable. On the left side of the screen is the toolbox. By default, the toolbox is a tab that you can point to to open the window. The toolbox is also context-sensitive, so different tools are avail- able based on what is being displayed in the center window. You can add a webpage to the project by right-clicking the project node (WebApplication1) and then navigating to Add New Item HTML Page. If you name the page default.html, the web server automatically delivers the page to a browser that navi- gates to your website but doesn’t specify the name of a webpage to retrieve. After adding the webpage, you can enter some text, such as a Hello World message, into the body of the webpage. When you press F5, you see the message in the browser. Lesson summary ■■ The free editions of Visual Studio 2012 are the Express editions: Visual Studio Express 2012 for Web and Visual Studio Express 2012 for Windows 8. You can use the Express editions to work with HTML5, CSS3, and JavaScript. ■■ Use Visual Studio Express 2012 for Web to develop web applications. Use Visual Studio Express 2012 for Windows 8 to develop Windows 8 applications. Lesson 1: Visual Studio 2012 CHAPTER 1 11■■ Visual Studio Express 2012 for Windows 8 comes with Blend for Visual Studio 2012. ■■ Blend for Visual Studio 2012 drives the user interface design and must be run on Windows 8 to develop Windows 8 applications. ■■ You can change the style sheet reference from a dark theme to a light theme by changing the ui-dark.css reference in the default.html file to ui-light.css. Lesson review Answer the following questions to test your knowledge of the information in this lesson. You can find the answers to these questions and explanations of why each answer choice is correct or incorrect in the “Answers” section at the end of this chapter. 1. You would like to create a web application by using HTML5, JavaScript, and CSS3. Which of the following Visual Studio 2012 editions can you use? (Choose all that apply.) A. Visual Studio Professional 2012 B. Visual Studio Premium 2012 C. Visual Studio Ultimate 2012 D. Visual Studio Express 2012 for Web E. Visual Studio Express 2012 for Windows 8 2. You would like to create a Windows 8 application by using HTML5, JavaScript, and CSS3. Which of the following Visual Studio 2012 editions can you use? (Choose all that apply.) A. Visual Studio Professional 2012 B. Visual Studio Premium 2012 C. Visual Studio Ultimate 2012 D. Visual Studio Express 2012 for Web E. Visual Studio Express 2012 for Windows 8 3. You would like to create web applications and Windows 8 Windows Store applications by using HTML5, JavaScript, and CSS3, but while you’re learning, you don’t want to buy Visual Studio 2012. Which of the following Visual Studio 2012 editions can you use for free to accomplish your goal? A. Visual Studio Professional 2012 B. Visual Studio Premium 2012 C. Visual Studio Ultimate 2012 D. Visual Studio Express 2012 for Web and Visual Studio Express 2012 for Windows 8 12 CHAPTER 1 Getting started with Visual Studio 2012 and Blend for Visual Studio 2012Lesson 2: Blend for Visual Studio 2012 Blend is included with Visual Studio 2012 Express for Windows 8 and helps you design your user interface. Blend is a design complement for Visual Studio and does for design what Visual Studio does for code. The following are some key features of Blend. ■■ Visual design Edit HTML, CSS, and Windows Store controls in a “what you see is what you get” (WYSIWYG) environment. What you see in Blend is what users will see in Windows 8. ■■ Interactive mode Design your app by changing states and setting styles. You don’t need to compile and run continuously. Blend provides the ability to use interactive mode so the developer can run the application on the design surface until the desired state is reached. The developer can pause the application and then style the applica- tion for the new state. ■■ App building Windows Store controls can be dragged and dropped onto the design surface. After that, just set the properties and styles. ■■ Powerful code generation Blend takes care of all the syntax by generating concise, reliable, predictable code when you add a style or element to your application. ■■ Debugging Blend offers visual debugging of HTML and CSS. It has a virtual rule called Winning Properties that shows you how an element obtained its effective style from the CSS inheritance and cascade. After this lesson, you will be able to: ■■ Identify the key features of Blend. ■■ Start a project by using Blend. Estimated lesson time: 25 minutes Exploring Blend Blend is an exciting tool for designers and developers who will be using HTML5, CSS3, and JavaScript to develop Windows 8 applications. Blend also supports the creation of Windows 8 Windows Store applications by using XAML with your choice of .NET programming language. Figure 1-6 shows the New Project screen, which has the same new project templates as Visual Studio Express 2012 for Windows 8. Lesson 2: Blend for Visual Studio 2012 CHAPTER 1 13NOTE RUN CONSTRAINT FOR BLEND Blend for Visual Studio 2012 must be run on Windows 8 to develop Windows 8 applica- tions. If you run Blend for Visual Studio 2012 on Windows 7, you will not be able to develop Windows 8 applications. FIGURE 1-6 The Blend New Project screen with the JavaScript project templates Selecting Blank App creates the same Blank App that was discussed in the previous sec- tion. Note the screen layout. Figure 1-7 shows the Blend screen layout. On the left is the Tools panel, where you can point to each icon to see a tooltip that displays the name of the com- mand. Just to the right of the Tools panel is a column with two windows, one over the other. These windows have tabs that can be selected to show more information. The upper-left window contains the following tabs. ■■ Projects Contains a tree-based representation of your solution, which can contain many projects, each project containing resources such as files and folders. ■■ Assets Contains a library of resources such as HTML elements, JavaScript controls, and media that you will use within your application. ■■ Style Rules Contains a list of cascading style sheets that are referenced in your project. Under Style Rules is the Live DOM window, which shows a dynamic representation of your HTML page. 14 CHAPTER 1 Getting started with Visual Studio 2012 and Blend for Visual Studio 2012FIGURE 1-7 The Blend screen layout In the middle of the screen is your primary workspace, the artboard. At the top of the artboard is a tabbed list of documents that are open. By default, this window displays the ren- Key Terms dered page. Note that there are buttons in the upper-right corner that can be used to change the view. The bottom center displays the default.html and the default.css sources. This makes it easy for you to change the files and see the rendered output. Also, as you use the other windows to modify the rendered page, you see the changes reflected in these files. Lesson 2: Blend for Visual Studio 2012 CHAPTER 1 15

Advise: Why You Wasting Money in Costly SEO Tools, Use World's Best Free SEO Tool Ubersuggest.