Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

What is Web Tools?

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[Microsoft] [] [Scott Hanselman] Hi, I'm Scott Hanselman, and I work at, Azure, and web tools. What is web tools? That's what this video is about. We talk about; we talk about generating dynamic web pages. But tooling—what is it mean to say tooling? Well—ASP.NET is made up of all these different technologies like web forms and web pages. But you do most of your development in Visual Studio. Why don't we do our development in notepad? What is the value of tooling? And what does that really mean? ASP.NET is that core runtime—that core framework that creates your JavaScript and your HTML and your CSS and serves it from the web server. But the tools—web tools—are all of those things that you are using inside of Visual Studio like the HTML editor, the publishing system, CSS, JavaScript, debugging, browser selections. So that is what I want to talk about—explaining what web tools are, some of the new features in web tooling, and why you should care about it. Let's switch over to Visual Studio—I'm using 2013 preview. And I'm inside of the HTML editor. Now I'm writing Razor code, so I've got HTML mixed in with my C-sharp Razor code. That's a feature of the editor. You'll notice that I've got nice syntax highlighting, and I could type something like H1 and hit TAB, and it'll expand, and I could go and—you know—type something interesting. And you'll see that it is automatically handling the ending tag for me. So that's a feature of the HTML editor. I could type something like—let's see—SVG line and hit TAB. And I get a whole expansion—that's a snippet. There's actually a whole series of snippets for things like audio or video— all the HTML 5 things that you might want to care about. This is all built in to the HTML 5 editor, and this has been completely rewritten in Visual Studio 2013. It even knows when color appears. So you'll notice that we've got a color picker that's shown up here. I could pick a different color—this is within the HTML editor itself. I am going and selecting different colors or even using a color picker to pick a specific color like this green. I can collapse these in the HTML editor—even these dibs. And I've also got intelli-sense not just on my tags, but also attributes. So—for example—here are some of the attributes that I could put on an H1 including some of the more complicated and more recent ones like this one on aria which is for accessibility, so type aria—rather than cluttering up the menu with too much information it actually has a secondary menu. So I could go and put in autocomplete help for a textbox—for example—if you're using that or perhaps adding a div with a new data hypen technique or using something like an access key. So you've got really great intelli-sense inside of your HTML editor. Now that intelli-sense tooling extends not just to HTML but of course to CSS. So I type in site.CSS. I can go around and see my color picker up here as well. I've got collapsing within CSS. And I've also the ability to format the entire document. So I could have—for example—a rule for H1s and then have some background color and then a rule for a div called foo underneath an H1 with some different background color. And then when I say format document you'll notice that the document has been formatted in a hierarchy, so H1 is here and then H1 foo appears underneath it. So we know about the structure of CSS and how CSS should be handled. This is just an example of some of the things that you can do inside of the CSS tooling. Similar things happen in JavaScript. And this is a really important point—that we say intelli-sense—right? What does that mean? What is intelli-sense? And what's the difference between intelli-sense and just auto complete? Right? Now there are text editors where I could type something. Let me just bring up a text editor here. And I could—you know—type something once, and then later on in that text editor start typing again and have intelli-sense, so this is just a straight text file—okay? But what if we said that this was JavaScript? Okay? And if I have some JavaScript and start typing— see—here it's actually giving me information that I might not necessarily need from elsewhere in my project because it thinks I might have typed it before. We'll type something once and then type it again. So this is auto completely; this is a great feature that says you've typed something once—in this case here I actually misspelled it. So it's saying, "Oh—you are going to type that again." And that's a great feature in text editors like Sublime. But intelli-sense—I think—needs to be intelligent. So—for example—if I say var i=0 inside of this JavaScript editor and then say i.—we know that i is—in fact—a number. So we're giving it intelligent auto complete based on the fact that—oh—well i is a number, and I might want to make it an exponential, or I might want to change its precision. But if I go and change i to a string and then say i. immediately the JavaScript editor knows that this is now a string—this isn't a number and gives me things that are specific to strings in JavaScript. And I didn't even save that JavaScript file. So that's actually running the Internet Explorer JavaScript engine inside of Visual Studio and giving you information that you wouldn't have that's different from auto complete. That's not to disparage auto complete versus intelli-sense but to give you a sense of the difference between the two. And that's an example of some of the tooling inside of Visual Studio. Other things that you have are the ability to see a picture by hovering over it. So if I've got an image here that you can see a thumbnail of that image— if I wanted to look at some CSS and then drag an image in—I am going to drag an image into this location right here. All right—and then drop it. You'll see that it's brought that image in, put the URL there for me, and again I see a preview as I hover over that particular image. We've also added a thing called Visual Studio web essentials. You may have seen that pop up a little bit there. That pop up is showing me what versions of what browsers of particular CSS selector will work on it. So if I say transform and say rotate—you know—90 degrees. And then hover—it's actually going to tell me which versions of which browsers that rule is going to work on. So that's information that—again—a text editor cannot necessarily tell you. Another thing that you get from tooling inside of Visual Studio is the ability to select your browser from your IDE. So here I've got Internet explorer chosen, but I can also plug in a mobile simulator; I've got things like Google Chrome or Firefox and also the ability to select multiple browsers at once. So I could say Chrome and Explorer at the same time and then set them as my default, hit browse, and then bring both of those up. Now—I could go over here in Visual Studio, and I could change some of that text. So—we'll say foo on the H1, and then hit refresh. And you'll notice that it just pushed that update out to both of those. It said to the browsers, "Go and update yourself," basically linking the browser with the IDE. Now that really scratches the surface of what we can do with web tools in ASP.NET. But I think it explains the idea around tooling. And when we update Visual Studio we can also update the tooling for ASP.NET. And most recently that tooling has been pulled out of Visual Studio which allows us to update it even when Visual Studioisn't being updated. So you'll see quarterly updates to web tooling coming in in Visual Studio 2012.3 or 2012.4. And that'll include new features. In fact—if you have Visual Studio 2012 now make sure that you get the 2012.2 update. It includes lots of new features to ASP.NET and web tools. And we'll actually update Visual Studio for you with new features to web tools. So—do check that out, and—again—explore the ASP.NET Web site. There is lots and lots of educational content up here, great videos at, from our partners at Pluralsight including deep tutorials on techniques and technologies like Signal R and Web API. I hope that you check out the rest of the videos, and have fun exploring the site and that you enjoy working with ASP.NET as much as we enjoyed writing it. Thanks a lot. [] []

Video Details

Duration: 10 minutes and 57 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 7
Posted by: neudesicasp on Aug 7, 2013

Scott Hanselman explains the web tools that can be used to efficiently create ASP.NET websites.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.