Archive

Archive for September, 2010

Internet Explorer IE9 and asp.net

September 26th, 2010 No comments

“Unlocking the beauty of the Web”. This Microsoft’s new tag line for their latest release of  IE9 (in public beta).  Before I talk about the effects on asp.net let’s talk about the new features of this enhanced browser.

Most of the layout changes should be pretty obvious: the menu bar has been removed and the navigation controls / address bar are now at the forefront. The compatibility view, refresh and stop buttons have been just latched on to the address bar and there are dedicated favorite and tools buttons on the far right side.  We don’t need to tell you that it looks a lot like Chrome – our guess is that Google’s not exactly flattered by that since we’re actually feeling the look of IE9 more than the cartoony aesthetic of Chrome, but we realize that’s a personal preference.

There are some other cool aesthetic that’s worth mentioning though. My favorite is the pop-up information is now at the bottom and kinda copied the chrome and there is nothing wrong with that, since they probably figured that chrome is coming up with the new OS and they wanted to still be part of that.

And now for the ASP.net part, how is your code going to be affected especially in the back-end data caching and displaying. Since IE9 fully supports HTML 5.0 videos, audios, CSS and AJAX are more easy to develop and supports more libraries than the IE8, the most noticeable difference is that when you run your webservice under IE9 it makes use of built-in AJAX support for HTML 5.0 giving you faster render of HTML pages.

Since right now it’s still in BETA mode , there’s more fixes and bugs to be expected, but for trial and curiosity as most of us developers like to be part of here is a download for the new IE9 ready for testdrive.

Categories: ASP.NET Tags:

The New HTML 5.0

September 14th, 2010 No comments

So what about this new HTML 5.0? I’ve been ask many times about this new release from W3 although still a draft, the new specifications are very promising, especially to Web Developers.

HTML5 is defined in a way that it is backwards compatible with the way user agents handle deployed content. To keep the authoring language relatively simple for authors several elements and attributes are not included as outlined in the other sections of this document, such as presentational elements that are better dealt with using CSS. W3

Development Model

The HTML5 specification will not be considered finished before there are at least two complete implementations of the specification. A test suite will be used to measure completeness of the implementations. This approach differs from previous versions of HTML, where the final specification would typically be approved by a committee before being actually implemented. The goal of this change is to ensure that the specification is implementable, and usable by authors once it is finished.

Syntax

HTML5 defines an HTML syntax that is compatible with HTML4 and XHTML1 documents published on the Web, but is not compatible with the more esoteric SGML features of HTML4, such as processing instructions and shorthand markup as these are not supported by most user agents. Documents using the HTML syntax are almost always served with the text/html media type.

HTML5 also defines detailed parsing rules (including “error handling”) for this syntax which are largely compatible with popular implementations. User agents must use these rules for resources that have the text/html media type. Here is an example document that conforms to the HTML syntax:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

HTML5 also defines a text/html-sandboxed media type for documents using the HTML syntax. This can be used when hosting untrusted content.

The other syntax that can be used for HTML5 is XML. This syntax is compatible with XHTML1 documents and implementations. Documents using this syntax need to be served with an XML media type and elements need to be put in the http://www.w3.org/1999/xhtml namespace following the rules set forth by the XML specifications. [XML]

Below is an example document that conforms to the XML syntax of HTML5. Note that XML documents must be served with an XML media type such as application/xhtml+xml or application/xml.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

Here are a run down of the new features taken from PHP Guru’s site

  • <canvas><canvas> is a 2D (at the moment – other dimensions may be forthcoming) drawing area controlled by Javascript. You can use it for a wide variety of things – graphs, games, presentations etc. Because it’s controlled by Javascript you can interact with it very easily. An example is the tooltips feature I’ve added to RGraph. In short, click on a bar and you get a tooltip that can contain a wide variety of HTML – images videos etc. I’ve written a short primer to the <canvas> tag here.
  • <video>The <video> tag makes it easier to embed video clips into your web pages. It has attributes like src (naturally), autoplay and loop. The <video> tag has implications on usability (eg blind access), and so can contain additional markup describing the video. Ideally, the full transcript of the video.
  • <audio>The <audio> tag is much like the <video>, but for audio files. Surprisingly.
  • Context menusHTML5 provides a method of defining context menus, making it easier to use these in web applications. Perhaps not so useful for websites, but certainly for applications where context menus could provide a raft of options without taking up space in the UI.
  • New structural elementsSince HTML is largely unstructured, a few new elements have been provided to try and rectify this. These elements include:
    • <section> -A section, or section of a chapter of text, or a book.
    • <header> – The page header. This is not the same as the <head> element.
    • <footer> – The footer of the page. Typically where all the legal crapola goes.
    • <nav> – Navigation links to other pages. You could put your websites navigation in this for example.
    • <article> – A blog article could be encapsulated by this for example.
    • <aside> – The aside tag can be used to provide extra information for a block of text. Much like sidebar material in books etc
    • <figure> – The <figure> element can be used to annotate your main text with diagrams, which aren’t necessarily imperative to the text.
  • New inline elementsHTML5 introduces new elements to help indicate basic elements such as times or numbers.
    • <mark> – This denotes that a bit of text is marked in some way. You could for example, use this to mark search terms in a list of results.
    • <time> – You can use this to represent times, or dates in your block of text.
    • <meter> – This can be used to indicate a figure of some sort. It can have multiple attributes including: value, min, max, low, high and optimum.
    • <progress> – This can be used to show a progress bar of some sort. It has a couple of attributes: value and max. The max attribute can be omitted.
  • New form input typesThe input element can now have a new set of types, including:
    • datetime
    • datetime-local
    • date
    • month
    • week
    • time
    • number
    • range
    • email
    • url

    Some of these are already common in desktop UIs, so shouldn’t be difficult to implement, and will be more familiar to users when filling out your form.

  • Dropped elementsThe folling elements have been dropped or replaced:
    • acronym
    • applet
    • basefont
    • big
    • center
    • dir
    • font
    • frame
    • frameset
    • isindex
    • noframes
    • noscript
    • s
    • strike
    • tt
    • u
  • Character encoding syntaxThe character encoding syntax for a HTML5 document is now: <meta charset=”UTF-8″>
  • New interactive elementsSome nice things that will make building websites and, perhaps more pointedly, web applications, easier.
    • <details> – This can be used to provide further information about something specific. For example it could be implemented by browsers as tooltips. This tag can have an open attribute which dictates whether the content is initially shown to the user or not.
    • <datagrid> – Unlike traditional tables (which are designed to be static), this can be used to provide a set of data with some degree of interactivity. For example selecting rows or columns, editing data, sorting and generally interacting with the data in the client.
    • <menu> – Previously a deprecated element, <menu> is back in HTML5 with a new meaning. It can, for example, contain <command> elements which cause a particular action to happen. For example you could use this element to provide a toolbar of sorts, or a context menu (see above). It can have label and icon attributes. They can be nested to provide multiple levels of menus.
Categories: Programming Tags: , ,