Recent Topics

1 Mar 04, 2009 13:12    

My b2evolution Version: Not Entered

I think some of us daring enough, no, all of us, should start using HTML5 - the ones we can already use of course.

Example, the new elements with Blogging and Newspapers in mind:
[list]

  • <article></article>

  • <footer></footer>

  • <header></header>

  • <nav></nav>

  • <section></section>

  • [/list:u]

    These new elements will replace our existing "divs", here's an example code:

    
    <!DOCTYPE html>
    <html>
       <head>
          <meta charset="UTF-8">
          <title>Sample HTML5 Blog Code</title>
          <style>
             article, footer, header, nav, section {
                display: block;
             }
          </style>
          <script>
             document.createElement('article');
             document.createElement('footer');
             document.createElement('header');
             document.createElement('nav');
             document.createElement('section');
          </script>
       </head>
       <body>
          <header>
             <h1>My Blog Name</h1>
             <h2>my blog tagline</h2>
          </header>
          <nav>
             <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="Blog1.html">Blog A</a></li>
                <li><a href="contact.html">Contact Us</a></li>
             </ul>
          </nav>
          <section>
             <article>
                <header>
                   <h1>Blog Post #1</h1>
                   <p>blog post #1 tagline</p>
                </header>
                <footer>
                   Last modified: 2009-03-04
                   Posted In: Category 1, Category 2
                </footer>
                <p>Blog Post #1 BODY text, Lorem Ipsum...</p>
                <p>and another lorem ipsum...</p>
                <footer>Permalink | Comments </footer>
                <address>by: xyz@gmail.com</address>
             </article>
    
             <article>
                <header>
                   <h1>Blog Post #2</h1>
                   <p>blog post #2 tagline</p>
                </header>
                <footer>
                   Last modified: 2009-02-04
                   Posted In: Category 1
                </footer>
                <p>Blog Post #2 BODY text, Lorem Ipsum...</p>
                <p>and another lorem ipsum...</p>
                <section>
                   <h3>The Photos</h3>
                   ...
                </section>
                <section>
                   <h3>Conclusion...</h3>
                   <p>The quick brown fox jumps over the lazy dog and fell in an open manhole.</p>
                </section>
                <footer>Permalink | Comments </footer>
                <address>by: xyz@gmail.com</address>
             </article>
          </section>
       </body>
    </html>
    

    Notes:
    [list]

  • The style "display: block;" was added since most browsers haven't added it yet, however, these new elements are final (but the overall HTML5 isn't yet - imagine finishing one section, that section is final, but the whole document isn't yet). (The browsers can read/recognize these new elements already.)

  • The <script> was added for IEx, particularly IE7 and IE8. IE, just like the other browsers, already recognized the new elements. However, IE doesn't want to honor Styling of these new elements yet, even though IE can read it already.

  • If you try that out, of course it will look plain, because we haven't applied any style to it yet. So now, instead of say, <div style="post posts">, we'll have <article>.

  • Search Engines (in the near future) will read these as well. Indexes will now be able to 'know' which part of the site-page it loaded is related to the topic (<h1> for example) because of the <article> and <section> elements.

  • you can imagine the rest like <nav>, <figure>, and <dialog> to mention the other new elements.

  • [/list:u]

    Other notes:

    
    <!DOCTYPE html>
    

    Future-proof and backwards-compatible. It tells browsers to go into "Standards Mode".

    
    <meta charset="UTF-8">
    

    New. Shortened form, or rather the new standard in declaring the document's charset. The old form:

    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    

    Is still valid, and personal testing, the new form is still not yet recognized by any browser, so I am still using the http-equiv form.

    And this is just the tip of it, we haven't even considered CSS Level 3 yet, just like HTML5, there are already "final" sections of CSS3, but overall, it isn't yet.

    These we can use already, at this stage. Minimizing future "re-coding" of [1] hardcoded HTML (and CSS) codes; and [2] codes found in skins.

    This will also put an edge for b2evo against the competition - being an early adopter of "what works" and "what's final" already. Instead of waiting for the whole package (which IMO, will become the new standard by 2012).

    Opinions? Violent reactions? Anything?

    2 Mar 04, 2009 13:31

    Laibcoms wrote:

    ...

    These new elements will replace our existing "divs", here's an example code:

    
    ...
          <script>
             document.createElement('article');
             document.createElement('footer');
             document.createElement('header');
             document.createElement('nav');
             document.createElement('section');
          </script>
    ...
    

    So what happens when scripting is either blocked or beyond the capacity of the visitor's surfing tool?

    Laibcoms wrote:

    ...

  • If you try that out, of course it will look plain, because we haven't applied any style to it yet. So now, instead of say, <div style="post posts">, we'll have <article>.

  • ...

    er... I don't know of any skins that do <div style="post posts">. Typically the code is this:

    <div id="<?php $Item->anchor_id() ?>" class="bPost bPost<?php $Item->status_raw() ?>" lang="<?php $Item->lang() ?>">

    resulting in, more or less <div style="bPost bPostpublished"> (ignoring the ID and lang bits obviously). So how does having <article> let me style posts differently for published vs protected vs private?

    -------------------

    Nice of 'em to drive everything to XHTML then decide to humor themselves with HTML5 though. Personally I'll learn from the past and not follow where they think we should all go untill and unless I personally see a need to. If b2evo wants to, well, the same thing applies. If and when I see a need to humor them, which will pretty much mean when XHTML 1.0 Trans completely fails in major browsers, I'll think about whatever "standard of the month" they're pushing.

    3 Mar 04, 2009 18:23

    EdB wrote:

    Laibcoms wrote:

    ...

    These new elements will replace our existing "divs", here's an example code:

    
    ...
          <script>
             document.createElement('article');
             document.createElement('footer');
             document.createElement('header');
             document.createElement('nav');
             document.createElement('section');
          </script>
    ...
    

    So what happens when scripting is either blocked or beyond the capacity of the visitor's surfing tool?

    Good point. For IE users, that will be a disaster, and sadly IE still has the majority share. Although for my sites at least, there are so few (as in "few") IE visitors who have scripting disabled, based on analytics reports.

    EdB wrote:

    Laibcoms wrote:

    ...

  • If you try that out, of course it will look plain, because we haven't applied any style to it yet. So now, instead of say, <div style="post posts">, we'll have <article>.

  • ...

    er... I don't know of any skins that do <div style="post posts">. Typically the code is this:

    <div id="<?php $Item->anchor_id() ?>" class="bPost bPost<?php $Item->status_raw() ?>" lang="<?php $Item->lang() ?>">

    resulting in, more or less <div style="bPost bPostpublished"> (ignoring the ID and lang bits obviously). So how does having <article> let me style posts differently for published vs protected vs private?

    It was meant as an example not as a direct quote of b2evolution :p

    EdB wrote:

    -------------------

    Nice of 'em to drive everything to XHTML then decide to humor themselves with HTML5 though. Personally I'll learn from the past and not follow where they think we should all go untill and unless I personally see a need to. If b2evo wants to, well, the same thing applies. If and when I see a need to humor them, which will pretty much mean when XHTML 1.0 Trans completely fails in major browsers, I'll think about whatever "standard of the month" they're pushing.

    I'll quote some from their FAQs:

    WHATWG

    The WHATWG is a growing community of people interested in evolving the Web. It focuses primarily on the development of HTML and APIs needed for Web applications.

    The WHATWG was founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004, after a W3C workshop. Apple, Mozilla and Opera were becoming increasingly concerned about the W3C’s direction with XHTML, lack of interest in HTML and apparent disregard for the needs of real-world authors. So, in response, these organisations set out with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born.

    What is HTML5

    HTML 5 is a new version of HTML 4.01 and XHTML 1.0 addressing many of the issues of those specifications while at the same time enhancing (X)HTML to more adequately address Web applications. Besides defining a markup language that can be written in both HTML (HTML5) and XML (XHTML5) it also defines many APIs that form the basis of the Web architecture. These APIs are known to some as "DOM Level 0" and have never been documented. Yet they are extremely important for browser vendors to support existing Web content and for authors to be able to build Web applications.

    How are pre-HTML5 documents parsed?

    All documents with a text/html media type (that is, including those without or with an HTML 2.0, HTML 3.2, HTML 4.01, or XHTML 1.0 DOCTYPE) will be parsed using the same parser algorithm as defined by HTML5. This matches what Web browsers have done for HTML documents so far and keeps code complexity down. That in turn is good for security, maintainability, and in general keeping the amount of bugs down. The HTML syntax of HTML5 therefore does not require a new parser and documents with an HTML 4.01 DOCTYPE for example will be parsed using the HTML5 parser.

    Validators are allowed to have different code paths for previous levels of HTML.

    For more info:
    http://wiki.whatwg.org/wiki/FAQ
    http://wiki.whatwg.org/wiki/HTML_vs._XHTML

    Again, I only mentioned a few, it isn't a representation of HTML5 as a whole. After reading the latest spec a few days ago, I like where it is going compared to where W3C brought the development - ie dropping HTML in favor of XHTML when the majority of the world uses plain HTML.

    ^_^


    Form is loading...