My Visual Studio 2010 HTML5 Templates are Updated for jQuery 1.5.1 and Modernizr 1.7

Rey Bango 45 Comments

I wanted to do a refresh of the Visual Studio 2010 HTML5 Templates I created last September. With jQuery now at v1.5.1 and Modernizr at v1.7, it was time for an update.

If you’ve already downloaded my original templates, you can simply overwrite those with the following files. If you’re new to this, then download the files and drop them into the folders I mention immediately below each file:

HTML5 Page Template with jQuery 1.5.1 & Modernizr 1.7

Drop this into “Visual Studio 2010 > Templates > ItemTemplates” folder

HTML5 Web Site Template with jQuery 1.5.1 & Modernizr 1.7

Drop this into “Visual Studio 2010 > Templates > ProjectTemplates” folder

Using the Templates

Once in place, all you have to do is select “File=>New Web Site” to use the new template:

To create a new HTML5 web page template, you’d select “File=>New File” to choose the HTML5 Page Template

Rey Bango

More Posts

45 Comments

  1. Hi ray, Nice post, I can find the directory, do you know the location on x64.
    I have edited the original packages and they work perfectly but the directory on x64 it’s C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\ProjectTemplatesCache\Web\CSharp\1033EmptyWeb.zip

    thanks
    @l3ny

    • Hi. The locations I listed are on x64. It would be something like: C:\Users\[your user name]\Documents\Visual Studio 2010\Templates

        • I’m going to assume the same location since I don’t recall there being user directory differences between bit versions of Win7. Look for something like C:\Users\[your user name]\Documents\Visual Studio 2010\Templates

  2. Pingback: The Morning Brew - Chris Alcock » The Morning Brew #818

  3. Do I put the zip file, extracted files, or a folder with all the files in it into the target folders?

      • I hate to a pain, but I added the templates to the folders you listed above in my My Documents folder, but when I open VS2010 I don’t see the new templates.

        • No worries Danny. Be sure to go to File->New Website to be able to see the HTML5 Web Site option. I created it as a Visual C# template so if you have more than one programming langauge template, be sure to select Visual C# from the “Installed Templates” pane.

          Also, are you using VS Web Express or VS Pro/Ultimate?

          • I see it now, I was clicking on New Project and looking for it under Web. Thanks!

    • and check in Tools-Option-Projects and Solutions your template location

  4. Can these be used with Visual Web Developer 2010 Express and if so how do I install them?

    • Hey Thomas. I’m not 100% sure as I’m using VS 2010 Ultimate. If you follow the instructions I listed, you can test it out very quickly. All you have to do is download the files I listed and place them in the folder that I outlined.

    • It worked flawlessly with my install of Visual Web Developer 2010 Express on x64 Win7 Pro.

  5. C:\Users\[your user name]\Documents\Visual Studio 2010\Templates\ItemTemplates\
    C:\Users\[your user name]\Documents\Visual Studio 2010\Templates\ProjectTemplates\
    Then your choice Visual C# or else.

    @l3ny

    • thank you! that wasn’t clear at all from the article i was putting them here:

      C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\Tools\Templates\ItemTemplates

  6. Hey Rey,

    Thanks for doing this!! So I am not 100% positive which folder to upload to on a Windows 7 x86 box.

    I placed them in the above listed folders (C:\Users\\Documents\Visual Studio 2010\Templates\\Visual C#)and they don’t appear when I start visual studio.

    In fact, there were no other templates in those folders, so not sure what needs to happen.

    Any thoughts?

    Thanks
    Jay

    • Hey Jay,

      I think you may have put them in one level too high. For the page template, you want to place the .zip file here:

      C:\Users\[username]\Documents\Visual Studio 2010\Templates\ItemTemplates

      For the site template:

      C:\Users\[username]\Documents\Visual Studio 2010\Templates\ProjectTemplates

      Then, when you choose File->New Website..”, you should see the template.

      Let me know if that helps.

      • Thanks Rey,

        That got me there (half way). I was unzipping the files. I now see the HTML5 Web Site option, but the new file isn’t there, not sure why, but this is still great!

        I appreciate the help

        Best
        Jay

        • That’s really odd. If you’ve dropped the zip files in the proper folders, when you do File->New Website…, it should show you the option to create a new HTML5 website and generate a whole folder structure with the files. Once you’ve done that, using File->New File… should show you the option to create a new HTML5 page.

    • You’re probably making it too hard for yourself – I know I was. Here’s how you get these:

      1. DON’T Unzip the .Zip files.
      2. Simply place the .Zip file in the C# folder under the folder specified in your Tools, Options, Projects and Solutions folder settings (probably C:\Users\\Visual Studio 2010\Templates\ProjectTemplates or ItemTemplates.
      3. Voila.

      Thank you Rey for the clarification that got me there.

  7. Hi, Why don’t you create a NuGet Package?
    Kind regards

    • Honestly never created one and this was a quick solution for me so I can have easy access to an HTML5, jQuery & MOdernizr template. I’ll check out NuGet to see how easy it is to package it.

    • Unfortunately no. I only created it under C# because I’m not currently using VB.NET. It is easy, though, to recreate them if you checkout the previous post I wrote which is linked to within this article.

  9. Hi Rey,

    Thanks for your efforts making a new HTML5 website in VS2010 an effortless experience and for you continued support through this page.

    Highly appreciated!

    regards,
    Peter.

  10. Hi Rey,

    Thanks for this contribution very much !

    I will study your website’s other resources with great interest: I’m at the point where, after giving up on ASP.NET after MVM and MVVM plus Ajax became spaghetti-in-my-head, as well, as, imho, leading to dog-slow websites, I’m taking a fresh look.

    I’m still looking for a “big picture” resource that will give an overview of VS based web development at the current moment (March, 2011) taking into account the “swallowing of jQuery,” and the glut of new initiatives from MS that seem to be focused on luring over PhP developers, and making it simpler to construct solidly OO ASP.NET.

    thanks, Bill

  11. Great template, thanks. One thing, though, FYI:

    For the Microsoft CDN, you have:
    http://ajax.microsoft.com/ajax/jquery/jquery-1.5.1.min.js

    According to the Microsoft CDN website:

    ajax.microsoft.com renamed to ajax.aspnetcdn.com
    Old Format: http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.1.js
    New Format: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js

    This change was made to increase performance because when a browser referenced the microsoft.com domain it would send any cookies from that domain across the wire with each request. By renaming to a domain name other than microsoft.com performance can be increased by as much to 25%. Note ajax.microsoft.com will continue to function but ajax.aspnetcdn.com is recommended.

  12. Hi Rey,

    Thanks for the templates!

    Wanted to ask if its ok just to rename ‘jquery-1.4.1-vsdoc.js’ to ‘jquery-1.5.1-vsdoc.js’ for Visual Studio jQuery Intellisense? Or do I need an updated version?

    Cheers

    • Well, I *think* you can just rename it as long as you’re not worried about some of the new features in jQuery 1.5. Otherwise, definitely use a v1.5.1 vsdoc.

  13. You might want to note that a restart of Visual Studio (if it’s running when you copy them) is required in order to see the templates. I could not see them until I did so.

    • Thanks for mentioning that. I can’t remember if I had to restart VS though when I created the templates but simply adding them to the directories I mentioned didn’t require a restart for me.

  14. Dear Rey – Please help. Is there any way to get a template like this but for a “Web Application” project rather than a “Web Site” project? Thank you. – Mark Kamoski

  16. It works for a “new website” but not for “new page.” I do not get a page looking like the one that you said was for “New Page.”

    When I do New->File I get a totally different listing. If you give me an email I can attach the screen image.

  17. Hey Ray,

    Your templates will support only a C# language and not the VB?

    Cheers,
    Umesh

  18. I installed your files and they work fine if you start with File > New Website. However, we work with Projects. When I do File > New Project, they are not available. What can I do to have them in Projects?

    • Hi Agnes,

      The templates are meant for use with File->New Website, not File->New Project. I’ll see if I can update them in the future to support a new project as well.

      Rey

  19. Hello,

    Nice template. Thanks.

    I would mention complete drectory path to put the zip file to avoid research.

    Good Job

    • Thanks Pete. I actually mentioned them in the original post, which is referenced at the beginning. But adding it again definitely will make it easier.

Comments are closed.