Visual Studio 2013 Web Tooling Overview Visual Studio is an excellent development environment for .NET-based Windows and web projects. It includes a powerful text editor that can easily be used to edit standalone files without a project. Visual Studio maintains a full-featured parse tree as you edit each file. This allows Visual Studio to provide unparalleled auto-completion and document-based actions while making the development experience much faster and more pleasant. These features are especially powerful in HTML and CSS documents. All of this power is also available for extensions, making it simple to extend the editors with powerful new features to suit your needs. Web Essentials is a collection of (mostly) web-related enhancements to Visual Studio. It includes lots of new IntelliSense completions (especially for CSS), new Browser Link features, automatic JSHint for JavaScript files, new warnings for HTML and CSS, and many other features that are essential to modern web development. Objectives In this hands-on lab, you will learn how to: Use new HTML editor features included in Web Essentials such as rich HTML5 code snippets and Zen coding Use new CSS editor features included in Web Essentials such as the Color picker and Browser matrix tooltip Use new JavaScript editor features included in Web Essentials such as Extract to File and IntelliSense for all HTML elements Exchange data between your browser and Visual Studio using Browser Link Prerequisites The following is required to complete this hands-on lab: Microsoft Visual Studio Professional 2013 or greater Web Essentials 2013 Google Chrome Setup In order to run the exercises in this hands-on lab, you will need to set up your environment first. 1. Open a Windows Explorer window and browse to the lab's Source folder. 2. Right-click Setup.cmd and select Run as administrator to launch the setup process that will configure your environment and install the Visual Studio code snippets for this lab. 3. If the User Account Control dialog box is shown, confirm the action to proceed. Note: Make sure you have checked all the dependencies for this lab before running the setup. Using the Code Snippets Throughout the lab document, you will be instructed to insert code blocks. For your convenience, most of this code is provided as Visual Studio Code Snippets, which you can access from within Visual Studio 2013 to avoid having to add it manually. Note: Each exercise is accompanied by a starting solution located in the Begin folder of the exercise that allows you to follow each exercise independently of the others. Please be aware that the code snippets that are added during an exercise are missing from these starting solutions and may not work until you have completed the exercise. Inside the source code for an exercise, you will also find an End folder containing a Visual Studio solution with the code that results from completing the steps in the corresponding exercise. You can use these solutions as guidance if you need additional help as you work through this hands-on lab. Exercises This hands-on lab includes the following exercises: 1. Working with Browser Link and Web Essentials 2. Taking Advantage of Code Snippets and IntelliSense Estimated time to complete this lab: [TBC] minutes Note: When you first start Visual Studio, you must select one of the predefined settings collections. Each predefined collection is designed to match a particular development style and determines window layouts, editor behavior, IntelliSense code snippets, and dialog box options. The procedures in this lab describe the actions necessary to accomplish a given task in Visual Studio when using the General Development Settings collection. If you choose a different settings collection for your development environment, there may be differences in the steps that you should take into account. Exercise 1: Working with Browser Link and Web Essentials Web Essentials is a Visual Studio extension that adds a variety of useful features for modern web development, mostly focused on making the web development experience much faster and more pleasant. You can install Web Essentials from the Extension Gallery in Visual Studio. Browser Link is a new feature included in Visual Studio 2013 that provides a channel between the Visual Studio IDE and any open browser to exchange data between your web application and Visual Studio. Web Essentials extends Browser Link with tools to manipulate the DOM object model and the CSS styles of your web pages directly from the browser. In this exercise, you will explore some of the features supported by Web Essentials and Browser Link to enhance a simple quiz page. Task 1 - Running the Project in Multiple Browsers In this task, you will configure your web application to run in multiple browsers at once, which is useful for cross-browser testing. 1. Open Microsoft Visual Studio. 2. In the File menu, select Open | Project/Solution... and browse to C:\WebCampsTK\HOL\VSWebTooling\Source\Ex1- WorkingwithBrowserLinkandWebEssentials\Begin in the Source folder of the lab. Select Begin.sln and click Open. 3. In the Visual Studio toolbar, expand the browser menu and select Browse With.... Browse With menu option 4. In the Browse With dialog box, select both Google Chrome and Internet Explorer by holding down the CTRL key and click Set as Default. Selecting multiple default browsers 5. Both Google Chrome and Internet Explorer should now appear as the default browsers. Click Cancel to close the dialog box. Google Chrome and Internet Explorer as default browsers Note: After configuring the default browsers, the Multiple Browsers option is selected in the browser menu. 6. Press CTRL + F5 to run the application without debugging. 7. When both browser windows open, place one of them above the other in order to see the updates on both browsers simultaneously. The browsers should display a web page with a light-blue rectangle. Placing one browser above the other 8. Do not close the browsers. You will use them in the next task. Task 2 - Using Zen Coding to Create HTML Elements Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions -similar to CSS selectors- into HTML code. Zen Coding is a fast way to write HTML using a CSS style selector syntax. In this exercise, you will use the Zen Coding feature provided by Web Essentials to generate the HTML buttons that represent the options of the question. 1. Switch back to Visual Studio. 2. Open the Index.cshtml file located in the Views | Home folder. 3. Replace the <!-- TODO: add options here--> comment with the following code, and press TAB. button.btn.btn-info.btn-lg.option{Answer $}*4 4. The code should be expanded to HTML. Expanded HTML Note: To learn more about Zen Coding syntax, see the following article. 5. Click the Refresh linked browsers button to update both browsers. Refresh linked browsers Internet Explorer - Page updated with four buttons Google Chrome - Page updated with four buttons 6. Switch back to Visual Studio. 7. You have added the buttons to the page, but you still need to add a template question. To do so, you will use a new feature in Web Essentials called Lorem Ipsum generator. Locate the div element with the class attribute front. 8. Add the following code as the first child element of the div, and press TAB. p.lead>lorem5 9. The code should be expanded to HTML. Lorem Ipsum autogenerated Note: As part of Zen Coding, you can now generate Lorem Ipsum code directly in the HTML editor. Simply type lorem and hit TAB and a 30 word Lorem Ipsum text will be inserted. E.g. lorem10 inserts 10 Lorem Ipsum words. 10. You will add a logo at the top of the question by using another new feature in Web Essentials called Lorem Pixel generator. Add the following code as the first child element of the div element with container as class value, and press TAB. div.row.header>pix-436x185-abstract 11. The code should expand to HTML. Lorem Pixel autogenerated Note: As part of Zen Coding, you can also generate Lorem Pixel code directly in the HTML editor. Simply type pix-200x200-animals and hit TAB and an img tag with a 200x200 image of an animal will be inserted. For more information, refer to Lorem Pixel. 12. Click the Refresh linked browsers button to update both browsers. Internet Explorer - Autogenerated image and text Google Chrome - Autogenerated image and text Note: Because the image is selected randomly when adding the code snippet, the image shown in the browsers may differ. 13. Do not close the browsers. You will use them in the next task. Task 3 - Updating a Style Property In this task, you will use the Browser Link's Inspect Mode feature to detect the exact location where the specific DOM element is generated and then update the color property of that element using a color picker provided by Web Essentials. 1. In the Internet Explorer browser, press CTRL + ALT + I to enable Inspect Mode. 2. Move the pointer over the light blue border and click. Moving the pointer over the light blue border 3. Switch back to Visual Studio. Notice how the HTML element that you selected in the browser is also selected in the Visual Studio HTML editor. HTML element selected in the Visual Studio HTML editor 4. You will now update the front CSS class in order to change the styling of the selected element. To do so, press CTRL + , to open the Navigate To search box.