locked
ASP.net webforms with HTML5 RRS feed

  • Question

  • User-1758902976 posted

    I have been using asp.net web forms to develop websites past many years
    (yet not using asp.net mvc)

    The recent requirement has come to develop asp.net website that is HTML5 compliant.
    (i am not sure what exactly does it mean by HTML5 compliant, but client expects to use Ipad to use this site)


    my search on the web comes with how to HTML5 semantics, javascript and css3 (which is all new to me)

    I would like to know how does the HTML5 integrates with visual studio 2010
    and how do I use asp.net serverside controls using HTML5

    Pl help where do I start 


     

    Sunday, September 1, 2013 4:32 PM

Answers

  • User281315223 posted

    HTML 5 Compliancy is a rather "vague" term (as you indicated).

    The extent to which some of the newer HTML5 tags and CSS3 properties (which typically go hand-in-hand with HTML5) are supported varies from browser-to-browser and often many of them are not exactly applicable to most web sites or applications.

    The release of HTML5 added several new tags that can now be used to help more easily organize content within your pages, however they are by no means necessary current and using <div> elements is still completely "HTML5 Compliant".

    New HTML5 Tags and Explanations

    There were a few different types of elements that were added in within the last addition of HTML elements and they can be broken down into the following categories : 

    Media-Related

    These elements refer to as the title mentions "Media" and media elements that are used to handle video, audio and other interactive and embeddable objects : 

    • <canvas> - used primarily in conjuction with Javascript to handle all sorts of functionality and interactivity.
    • <audio> - handles audio content and audio files (playing, fast-forwarding, rewinding etc)
    • <video> - much like <audio> this is specifically used to handle video media.
    • <embed> - used to insert external applications or to run plug-ins such as Flash etc.
    • <source> - allows you to define resources for both <audio> and <video> elements.
    • <track> stores information regarding a single track for an audio or video element.

    Form Elements

    Forms recieved a few new elements primarily related to data and outputting data :

    • <keygen> - defines key-value pairs for forms
    • <output> - stores the result of calculations
    • <datalist> - stores optional information about specific inputs or other controls

    Structural Elements

    This refers to the most commonly encountered objecst and those that you mostly mentioned and the new elements introduced actually make reading source and markup for sites much more "readable" and descriptive :

    • <article> - stores an entire article much like you would find on a page or a story.
    • <aside> - this is used to store side content that would be set next to the actual content (like calendars, menus etc.).
    • <bdi> - used to isolate a part of text that might be formatted in a different direction from other text outside it.
    • <command> - designed to store a specific command button.
    • <details> -  a togglable section displaying details about a particular section or article.
    • <dialog> - used to define a dialog box or window.
    • <summary> -  the heading for a <details> element
    • <figure> - used to store figures, charts, graphs, illustrations etc.
    • <figcaption> - a caption for <figure> elements.
    • <footer> - defines the footer content of a document or section.
    • <header>  - defines the header for a document or section.
    • <hgroup> - used to group sets of heading elements <h1>,<h2>, ...
    • <mark> - defines highlighted text.
    • <meter> - used to define a unit or level of measurement as a gauge.
    • <nav> - defines and stores navigation elements such as a menu.
    • <progress> - stores information about a particular progress.
    • <ruby> - defines a ruby annotation (for East Asian typography)
    • <rt> - defines an explanation/pronunciation of characters (for East Asian typography)
    • <rp> - defines what to show in browsers that do not support ruby annotations
    • <section> - defines a section in a document, which can be used to store an article etc.
    • <time> - defines a date/time
    • <wbr> - defines a possible line-break

    The HTML5 DocType

    If you plan on using any of these elements or you want your markup to be considered "HTML5", you will need to use the HTML5 DocType declaration in the top of your page (it will replace your existing DocType declaration) and it looks like this : 

    <!DOCTYPE html>

    Additional HTML5-related Discussions and Resources

    Since this topic can be rather vague, so I'll include a few other discussions that might shed some light and help you decide what your opinion of HTML 5 Complicancy is (because if your client isn't very tech-savvy, they may not really know themselves and are just trying to throw out a "buzzword") : 

    Opinion

    Since it's fairly clear there is no specific things you can do to make your application "HTML5 Compliant", I would recommend doing the following to your application, which should be fairly impressive to your clients and should help ensure that your application looks and performs solidly for both HTML5 and non-HTML5 supported browsers :

    • Ensure your markup is valid - Ensure you have proper opening and closing tags for all of your elements and aren't using any attributes that are not supported or may be obsolete.
    • Consider using a Responsive Design Framework - A Responsive Design framework will add the all kinds of references and functionality into your application to ensure that it not only looks good across all browsers and devices, but also handle newer HTML5 supported features (as well as falling back when support is lacking).
    • Don't Freak Out - Don't go crazy trying to switch or make unnecessary changes to migrate everything to HTML5. There are a lot of new tags out there that may seem like they would be worth using, but if they are used incorrectly, you might just end up with some messy markup. Keep your markup simple and practical and you should be fine.

    Regarding the Responsive Design Comment

    Responsive Design is a very common term which can refer to scaling all of your content based on the current resolution of your browser or device. (This is done primarily through CSS and occasional use of Javascript)

    It isn't really automatic and you will likely have to tinker with it a bit to get everything working and looking just as it should, but it is probably the best method of handling a situation like this (depending on the controls that you are using). There are Reponsive Design frameworks and boilerplates that you can use to implement these into your site such as Twitter Bootstrap (and a varitety of others).

    These could fairly easily be integrated into a Web Forms application and would basically be all that you would need to use : 


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 1, 2013 5:11 PM

All replies

  • User281315223 posted

    HTML 5 Compliancy is a rather "vague" term (as you indicated).

    The extent to which some of the newer HTML5 tags and CSS3 properties (which typically go hand-in-hand with HTML5) are supported varies from browser-to-browser and often many of them are not exactly applicable to most web sites or applications.

    The release of HTML5 added several new tags that can now be used to help more easily organize content within your pages, however they are by no means necessary current and using <div> elements is still completely "HTML5 Compliant".

    New HTML5 Tags and Explanations

    There were a few different types of elements that were added in within the last addition of HTML elements and they can be broken down into the following categories : 

    Media-Related

    These elements refer to as the title mentions "Media" and media elements that are used to handle video, audio and other interactive and embeddable objects : 

    • <canvas> - used primarily in conjuction with Javascript to handle all sorts of functionality and interactivity.
    • <audio> - handles audio content and audio files (playing, fast-forwarding, rewinding etc)
    • <video> - much like <audio> this is specifically used to handle video media.
    • <embed> - used to insert external applications or to run plug-ins such as Flash etc.
    • <source> - allows you to define resources for both <audio> and <video> elements.
    • <track> stores information regarding a single track for an audio or video element.

    Form Elements

    Forms recieved a few new elements primarily related to data and outputting data :

    • <keygen> - defines key-value pairs for forms
    • <output> - stores the result of calculations
    • <datalist> - stores optional information about specific inputs or other controls

    Structural Elements

    This refers to the most commonly encountered objecst and those that you mostly mentioned and the new elements introduced actually make reading source and markup for sites much more "readable" and descriptive :

    • <article> - stores an entire article much like you would find on a page or a story.
    • <aside> - this is used to store side content that would be set next to the actual content (like calendars, menus etc.).
    • <bdi> - used to isolate a part of text that might be formatted in a different direction from other text outside it.
    • <command> - designed to store a specific command button.
    • <details> -  a togglable section displaying details about a particular section or article.
    • <dialog> - used to define a dialog box or window.
    • <summary> -  the heading for a <details> element
    • <figure> - used to store figures, charts, graphs, illustrations etc.
    • <figcaption> - a caption for <figure> elements.
    • <footer> - defines the footer content of a document or section.
    • <header>  - defines the header for a document or section.
    • <hgroup> - used to group sets of heading elements <h1>,<h2>, ...
    • <mark> - defines highlighted text.
    • <meter> - used to define a unit or level of measurement as a gauge.
    • <nav> - defines and stores navigation elements such as a menu.
    • <progress> - stores information about a particular progress.
    • <ruby> - defines a ruby annotation (for East Asian typography)
    • <rt> - defines an explanation/pronunciation of characters (for East Asian typography)
    • <rp> - defines what to show in browsers that do not support ruby annotations
    • <section> - defines a section in a document, which can be used to store an article etc.
    • <time> - defines a date/time
    • <wbr> - defines a possible line-break

    The HTML5 DocType

    If you plan on using any of these elements or you want your markup to be considered "HTML5", you will need to use the HTML5 DocType declaration in the top of your page (it will replace your existing DocType declaration) and it looks like this : 

    <!DOCTYPE html>

    Additional HTML5-related Discussions and Resources

    Since this topic can be rather vague, so I'll include a few other discussions that might shed some light and help you decide what your opinion of HTML 5 Complicancy is (because if your client isn't very tech-savvy, they may not really know themselves and are just trying to throw out a "buzzword") : 

    Opinion

    Since it's fairly clear there is no specific things you can do to make your application "HTML5 Compliant", I would recommend doing the following to your application, which should be fairly impressive to your clients and should help ensure that your application looks and performs solidly for both HTML5 and non-HTML5 supported browsers :

    • Ensure your markup is valid - Ensure you have proper opening and closing tags for all of your elements and aren't using any attributes that are not supported or may be obsolete.
    • Consider using a Responsive Design Framework - A Responsive Design framework will add the all kinds of references and functionality into your application to ensure that it not only looks good across all browsers and devices, but also handle newer HTML5 supported features (as well as falling back when support is lacking).
    • Don't Freak Out - Don't go crazy trying to switch or make unnecessary changes to migrate everything to HTML5. There are a lot of new tags out there that may seem like they would be worth using, but if they are used incorrectly, you might just end up with some messy markup. Keep your markup simple and practical and you should be fine.

    Regarding the Responsive Design Comment

    Responsive Design is a very common term which can refer to scaling all of your content based on the current resolution of your browser or device. (This is done primarily through CSS and occasional use of Javascript)

    It isn't really automatic and you will likely have to tinker with it a bit to get everything working and looking just as it should, but it is probably the best method of handling a situation like this (depending on the controls that you are using). There are Reponsive Design frameworks and boilerplates that you can use to implement these into your site such as Twitter Bootstrap (and a varitety of others).

    These could fairly easily be integrated into a Web Forms application and would basically be all that you would need to use : 


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 1, 2013 5:11 PM
  • User-691245060 posted

    get VS 2010 SP1, in that it got support ofr HTML% - http://blogs.msdn.com/b/webdev/archive/2011/01/27/html5-amp-css3-in-visual-studio-2010-sp1.aspx

    thanks,

    Monday, September 2, 2013 9:28 AM
  • User-1758902976 posted

    thanks you all for the help.

    lot of information, me read & try.

    will update this thread soon.

    Tuesday, September 3, 2013 2:47 AM
  • User-1758902976 posted

    thanks for the links, 
    I am in right direction now.


    I am able to use do all the tags specified in http://www.codeproject.com/Tips/543391/HTML5-for-Asp-net-Csharp-Developers

    I have VS 2010 and developing using asp.net webforms

    1. for some reason, Intellisense still does not work after installing patches specified in last the section http://msdn.microsoft.com/en-us/magazine/hh547102.aspx
    2. from the video link I saw example for fileupload control to select multiple files, my test project does not understand "HasFiles" property for this fileupload control in net 4.0 (and VS2010). if this is true, then there are list of asp.net server contols not supporting HTML5 development for net 4.0 (and VS2010) or may I may be missing some more patches to support full fledge support these control features.


    Thursday, September 5, 2013 6:07 PM