Forum @ Liavaag.org
https://www.liavaag.org/Forum/YaBB.pl
English general category >> General bulletin board >> HTML5 - Hypertext Markup Language
https://www.liavaag.org/Forum/YaBB.pl?num=1246579722

Message started by Administrator on 07/03/09 at 02:08:42

Title: HTML5 - Hypertext Markup Language
Post by Administrator on 07/03/09 at 02:08:42
HTML5 – The New Markup Language

XHTML 2 language dumped in favour of HTML 5! Where is the semantic web going now – back to nesting and tidy errors?


It seems that that HTML 5 is proceeding while the XHTML is recognized as a rat hole. XHTML 2 Working Group's charter expires at the end of 2009 and the W3C management has decided not to renew it. Some sources say that the maintenance work of fixing bugs will be continued on XHTML 1.1. Does this mean that we’re stuck with the XHTML 1.1?


Perhaps we better go for the new HTML 5, which is developed by the Web Hypertext Application Technology Working Group (WHATWG). This team has developed a proposal for Web Forms 2.0, and Web Applications 1.0. HTML 5 focuses on web application development and offers browser based applications as multimedia. This could present strong competition to existing browser plug-in technologies such as Adobe Flash and Microsoft Silverlight.


This might be the necessary changes of standards we have been waiting for to fulfil the idea about social semantic web. Probably XHTML is too strict for artificial intelligence and stupid computers.


Sources


Title: Re: XHTML 2 language dumped in favour of HTML 5
Post by Administrator on 02/23/10 at 02:47:38
HTML5 is a new version of HTML and XHTML


The goal of HTML 5 is to reduce development costs by making strict rules on how to handle all elements (and how to recover from errors). HTML5 introduces new elements often used in modern web sites. Some of those are semantic replacements. HTML 5 is not a W3C recommendation yet!


New tags (and some replacements)

New Tags Definitions
<article> Article
<aside> Content aside from the page content
<audio> Sound content
<canvas> Graphics
<command> Command button
<datalist> Dropdown list
<dialog> Dialog
<embed> Interactive content or plugin
<figcaption> Caption of a figure element
<figure> Group of media content and their caption
<footer> Footer (section or page)
<header> Header (section or page)
<hgroup> Information about a section in a document
<keygen> Generated key in a form
<mark> Marked text
<meter> Measurement within a predefined range
<nav> Navigation links
<output> Output types
<progress> Progress of a task of any kind
<rp> Ruby annotations for browsers that not support the ruby element
<rt> Explanation to ruby annotation
<ruby> Ruby annotations
<section> Defines a section
<source> Media resources
<time> Date and time
<video> Video

Title: Re: XHTML 2 language dumped in favour of HTML 5
Post by Administrator on 09/17/10 at 04:45:16
XHTML is not dead!

Document Object Model (DOM) describes how HTML and XML is represented. DOM is cross-platform and language independent, but aspects may be manipulated within the syntax of the programming language. The HTML syntax is suggested for most authors because it is compatible with most browsers.

Documents transmitted with HTML MIME type text/html will be processed as an HTML5 document by the browsers. If documents are transmitted with XML MIME type application/xhtml+xml, they will be parsed by an XML processor. The documents will be treated as XML documents by the Web browsers, and defines the XHTM5 specifications.

Minor syntax errors in HTML will be ignored, but as in XHTML 1.1, the XHTML5 will not render fully out. DOM, HTML syntax, and XML will not represent the same content. HTML can render documents with noscript blocks, but it can not render namespaces. Noscript blocks are not supported in DOM and XML, but namespaces are. Comments with the string "-->" supported by DOM, but are not represented in HTML or XML.



Kilder
[list bull-bluesq]
  • HTML vs XHTML -- W3C HTML5
  • HTML vs. XHTML -- WHATWG Wiki

  • Title: Re: XHTML 2 language dumped in favour of HTML 5
    Post by Administrator on 01/28/11 at 19:40:13
    W3C HTML5 Logo


    The Technology - description of the badge below
    [olist]
  • Connectivity
  • CSS3 Styling
  • Device Access
  • 3D, Graphics, Effects
  • Multimedia
  • Performance & Integration
  • HTML5 Semantics
  • Offline & Storage
    [/olist]
    HTML5-Logo.png (17 KB | 918 )

  • Title: Re: HTML5 – The New Markup Language
    Post by Administrator on 03/15/11 at 05:41:03
    Updates and new tags in HTML5


    I have now started the project of converting some of my photo galleries to HTML5. Surprisingly, some of those photo galleries witch had an error per image, does now validate (WCAG AAA 2.0).


    [list bull-greencheck]
  • Alanya Gallery
  • Copenhagen Gallery
  • London Gallery
  • Opera Gallery
  • Paris Gallery
  • Santorini Gallery
  • Stockholm Gallery
  • Warsaw Gallery



    Those photo albums are very close validating with doctype HTML5. With XHTML 1.1 they had at least one error per image.

    [list bull-bluecheck]
  • Backstage Gallery
  • Beitostølen Gallery
  • Boertervann Gallery
  • Oslo City Gallery
  • Oslo Terror Attack
  • University of Oslo Gallery





    Below some new tags in HTML5

    New Tags Definitions
    <details> Caption of a figure element
    <summary> Defines the header of a "detail" element
    <wbr> Possible line-break

  • Title: Re: HTML5 – The New Markup Language
    Post by Administrator on 10/21/12 at 03:39:33
    Finally HTML5 websites that validate


    No news lately except that HTML5 becomes official web standards in 2014 - and there are plans for a sequel. It is also said that HTML5.1 will come in 2016 and the first draft of HTML5.2 will be published in 2015.

    Liavaag.org has during the summer updated the 360 tour News Portal to HTML5. This Portal are build upon the London2012 Olympic Portal. Both portals validate.

    [list bull-greensq]
  • 360 tour News Portal
    [list bull-greencheck]
  • Validate (W3C HTML5)

  • London2012 Olympiske Portal
    [list bull-greencheck]
  • Validate (W3C HTML5)

      :)

  • Title: Re: HTML5 – The New Markup Language
    Post by Administrator on 11/13/12 at 02:50:49
    CSS3 – list-style-type

    Many web-developers got a cold shower when they found out that their CSS3 (Cascading Style Sheet) no longer validated. Earlier unordered HTML lists (listed items) used the following types: "disc", "circle", "square", "decimal", "decimal-leading-zero", "lower-roman", "upper-roman", "lower-greek", "lower-alpha", "lower-latin", "upper-alpha", "upper-latin", "hebrew", "armenian", "georgian", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha", "katakana-iroha", "none", or "inherit".

    [code css]
    /*
    Example of listed items
    */
    ul {
         display: block;
    }
    li {
         list-style-type: decimal-leading-zero;
    }

    /*
    Example of <li> element used in eg. menus
    */
    ul {
         display: inline;
    }
    li {
         list-style-type: none;
    }
    [/code]

    The code above will not validate
    This is because HTML5 do not support the attribute listed-item-type, which now also is introduced in CSS3. Validating listed-items can use the types "inherit", URL to the listed item, or default.

    [code css]
    /*
    Example of unnumbered list that validates
    */
    ul {
         display: block;
    }
    li#method-one {
         list-style-type: inherit;
    }
    li#method-two {
         list-style: url(my_listed_item.png);      
    }
    [/code]

    Transitional HTML5
    Menus in XHTML 1.1 as well as HTML 4.01, can use the attribute inline. The <li> element will automatically show without the items in the list. If you don't format any thing, the CSS3 will use default ("disc", "circle", "square" in that order).

    [code css]
    /*
    Example of <li> used in validating horozontal menus
    If the attribute "inline" are being used, the listed items in the <li> element will automatically be removed.
    */
    ul {
         display: inline;
    }

    /*
    Example of <li> tag used in vertical menus (that validate)
    */
    ul {
         display: block;
    }

    li {
         list-style: none;
    }
    [/code]

    Conclusion
    In the future, menus in HTML5 will use semantic navigation with the <nav> element. It will therefore be naturally to use URL, or simply default values, in the listed items.

    Title: Re: HTML5 – The New Markup Language
    Post by Administrator on 11/28/12 at 21:35:27
    CSS3 - list-style-type validates again!

    In post #6 you could read that:


    Administrator wrote on 11/13/12 at 02:50:49:
    Many web-developers got a cold shower when they found out that their CSS3 (Cascading Style Sheet) no longer validated. Earlier unordered HTML lists (listed items) used the following types: "disc", "circle", "square", "decimal", "decimal-leading-zero", "lower-roman", "upper-roman", "lower-greek", "lower-alpha", "lower-latin", "upper-alpha", "upper-latin", "hebrew", "armenian", "georgian", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha", "katakana-iroha", "none", or "inherit".


    Now, however, validates attribute selections (listed-item-type), also in CSS3 and HTML5. This proves that it was too early to draw the conclusion in #6:


    Administrator wrote on 11/13/12 at 02:50:49:
    In the future, menus in HTML5 will use semantic navigation with the <nav> element. It will therefore be naturally to use URL, or simply default values, in the listed items.



    In other words, it was a little extra work for those of us who woke up to a cold shower in early November. I still think that #6 is useful info to create menus (otherwise I would have deleted it). Anyway, it should be really exciting to see the development of HTML5 and CSS3 in the future.

    Title: Re: HTML5 – The New Markup Language
    Post by Administrator on 04/09/13 at 01:19:53
    Responsive Web Design (RWD) and Adaptivt Web Design


    Responsive Web Design (RWD) is a website that adapt the layout for various screens sizes - or in practice supports all screen resolutions. This means that the same HTML documents are used in everything from desktops, laptop, tablets, smartphones and mobile phones. The development of smart phones and apps has clearly influenced the development of RWD.


    RWD uses CSS3 media queries, a development of the @media rule, to customize the layout. Some believe RWD should meet three requirements:

    [olist]
  • Flexible grids
  • Flexible images
  • Media Queries
    [/olist]

    Sometimes a web developer does not want flexible images and grids, but only media queries. The positive effect of that is obviously that you can combine absolute and relative values in the CSS development. It is also easier to adapt existing web designs, so they in practice support all screen resolutions. This is often referred to as adaptive web design.

    [code css]
    @media only screen and (min-width:640px) {
         div#vga {
               color: #000000;
               background: url('img/vga.png') repeat-y;
         }
    }
    @media only screen and (min-width:800px) {
         div#svga {
               background: url('img/svga.png') repeat-y;
         }
    }
    @media only screen and (min-width:1280px) {
         div#sxga {
               background: url('img/sxga.png') repeat-y;
         }
    }
    @media only screen and (min-width:1600px) {
         div#uxga {
               background: url('img/uxga.png') repeat-y;
         }
    }
    @media only screen and (min-width:1920px) {
         div#wuxga {
               background: url('img/wuxga.png') repeat-y;
         }
    }
    @media only screen and (min-width:1920px) {
         div#hd1080 {
               height:1080px;
               background: url('img/hd1080.png') repeat-y;
         }
    }
    [/code]

    Sources
    [list bull-redsq]
  • Adaptive Web Design by Aaron Gustafson May 30, 2011
  • Responsive Web Design by Ethan Marcotte May, 2010 (Alistapart)

  • Title: Re: HTML5 – The New Markup Language
    Post by Administrator on 04/22/13 at 04:06:53
    Responsive Web Design (RWD): Customize the website for smartphones with 720px and 1080px resolution


    How to adapt your website to smartphones, without using apps? The solution is to use CSS3 to the various media types or Media Queries. It can be more useful to adapt menus and content when the phone is used in portrait mode rather than landscape mode. In other words, it may be useful to distinguish between portrait and landscape mode on your smartphone. In the example below, I have used the Samsung Galaxy S3, which uses Android and it has screen resolution of 1,280 x 720 pixels (landscape x portrait). It is also an example for the upcoming Galaxy S4, which uses full HD resolution (1920px x 1080px).

    [code css]
    /*
    Target the Galaxy S3 (and S4) with media queries
    */
    body {
         font-size:14px;
    }
    /*
    Galaxy S3 (HD 720p)
    */
    @media only screen and (max-device-width:720px) and (orientation:portrait) {
         body {
               font-size:20px;
         }
    }
    @media only screen and (max-device-width:1280px) and (orientation:landscape) {
           body {
               font-size:16px;
         }
    }
    /*
    Galaxy S4 (HD 1080p)
    */
    @media only screen and (max-device-width:1080px) and (orientation:portrait) {
         body {
               font-size:18px;
         }
    }
    @media only screen and (max-device-width:1920px) and (orientation:landscape) {
           body {
               font-size:14px;
         }
    }
    [/code]

    Title: Re: HTML5 – The New Markup Language
    Post by Administrator on 04/24/13 at 04:11:05
    Use Responsive Web Design (RWD) in older browsers? The solution is to include Media Queries JavaScript


    Internet Explorer 8 and older versions do not support CSS3 Media Queries. A solution is to forget those browsers. Another (and better) solution is to add following code to the head element in the document:

    [code html]
    <!--[if lt IE 9]>
         <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    [/code]

    By adding the css3-mediaqueries.js JavaScript file, you will enable older browsers to support CSS3 Media Queries.  ::)

    Title: Re: XHTML 2 language dumped in favour of HTML 5
    Post by Administrator on 04/24/13 at 04:20:16
    Example of using the new HTML5 elements



    Administrator wrote on 02/23/10 at 02:47:38:
    New tags (and some replacements)

    New Tags Definitions
    <article> Article
    <aside> Content aside from the page content


    In the post above I showed some examples of new tags in HTML5. Below I have made two simple examples that shows the main structure of the layout.

    XHTML 1.1 with div containers

    [code html]
    <!-- XHTML 1.1 main structure -->
    <div id="header">
         <h1>London Gallery</h1>
         <div id="nav">
               <ul>
                     <li><a href="../">Home</a></li>
                     <li><a href="../Menu/">Menu</a></li>
               </ul>
         </div>
    </div>
    <div id="aside">
         <h2>More galleries</h2>
         <img src="img/London.jpg" width="200" height="200" alt="London Tower">
    </div>
    <div id="content">
         <div id="london-gallery">
               <!-- Content... -->
         </div>
    </div>
    <div id="footer">
         <p>&copy; 2013 Liavaag.org</p>
    </div>
    [/code]

    Below the same structure, but with HTML5 elements

    [code html]
    <!-- HTML5 main structure -->
    <header>
         <h1>London Gallery</h1>
         <nav>
               <ul>
                     <li><a href="../">Home</a></li>
                     <li><a href="../Menu/">Menu</a></li>
               </ul>
         </nav>
    </header>
    <aside>
         <h2>More galleries</h2>
         <img src="img/London.jpg" width="200" height="200" alt="London Tower">
    </aside>
    <section>
         <article id="london-gallery">
               <!-- Content... -->
         </article>
    </section>
    <footer>
         <p>&copy; 2013 Liavaag.org</p>
    </footer>
    [/code]

    Older browsers
    Internet Explorer 8 and older browsers does not support the new HTML5 elements such as <header>, <aside>, <footer>, etc. Including the code below in the head element will enable IE8 and older browsers to acknowledge the new elements:

    [code html]
    <!--[if lt IE 9]>
         <script src="http://www.liavaag.org/common/js/html5shiv.js"></script>
    <![endif]-->
    [/code]

    Title: Re: XHTML 2 language dumped in favour of HTML 5
    Post by Administrator on 04/29/13 at 01:33:00

    Administrator wrote on 04/24/13 at 04:20:16:
    Example of using the new HTML5 elements

    [...]

    Older browsers
    Internet Explorer 8 and older browsers does not support the new HTML5 elements such as <header>, <aside>, <footer>, etc. Including the code below in the head element will enable IE8 and older browsers to acknowledge the new elements:

    [code html]
    <!--[if lt IE 9]>
         <script src="http://www.liavaag.org/common/js/html5shiv.js"></script>
    <![endif]-->
    [/code]


    HTML5 Shiv – The HTML5 Internet Explorer1 enabling script


    HTML5 Shiv is a script that adds new HTML5 elements to obsolete browsers1. Download the script (see below) and include it before the <body> element, i.e. in the documents head. For best performance it can be smart to include the CSS first then this script. The source code is dual licensed under the MIT and GPL Version 2 licenses.


    1Enables HTML5 elements for IE 6-9, Safari 4.x, iPhone 3.x, and Firefox 3.x.


    Sources
    [list bull-blacksq]
  • GitHub, the full original source: aFarkas/html5shiv
  • Google code: Html5shiv

  • Title: Re: HTML5 – The New Markup Language
    Post by Administrator on 04/29/13 at 06:07:07
    Create header codes for obsolete Internet Explorer browsers


    Programming responsive web design means that the web-developer often uses HTML5 elements and CSS3, which older browsers do not support (all the way up to IE8). But these obsolete browsers do fortunately support comment tags. These codes must be placed in the head of the HTML document. As the examples below shows, the codes works on style sheets as well as scripts.

    [code html]<head>
    <link rel="stylesheet" type="text/css" href="default.css" />


    <!-- All versions IE -->
    <!--[if IE]>
         <link rel="stylesheet" type="text/css" href="ie-only.css" />
    <![endif]-->


    <!-- Everything except IE -->
    <!--[if !IE]>
         <script src="not-ie.js"></script>
    <![endif]-->


    <!-- Only IE7 -->
    <!--[if IE 7]>
         <script src="only-ie.js"></script>
    <![endif]-->


    <!-- IE8 and lower -->
    <!--[if lt IE 9]>
         <link rel="stylesheet" type="text/css" href="ie8-and-lower.css" />
    <![endif]-->


    <!-- IE 8 and higher -->
    <!--[if gt IE 7]>
         <link rel="stylesheet" type="text/css" href="ie8-and-higher.css" />
    <![endif]-->
    </head>
    <body>
         <h1>Hello World!</h1>
    </body>[/code]

    About hacks

    [code css]/* IE8 support */
    #div {
         height:480px\0/;
    }

    /* IE7 and IE8 support */
    #div {
         height:480px\9;
    }

    /* Underscore filter IE7 and later */
    #div {
         min-height:480px;
         _height:480px;
    }

    /* IE7 support */
    *+html #div {
         height:480px;
    }

    /* IE6 support */
    * html #div {
         height:480px;
    }

    /* Hide from IE6 and lower */
    #div {
         height/**/: 480px;
    }

    html > body #div {
         height:480px;
    }[/code] :-?

    Hacks is not a good idea, because they are non-standard, and you can't predict how they are going to behave in future browsers. That’s why responsive web design is a far better idea.


    Source
    CSS-Tricks: How To Create an IE-Only Stylesheet

    Title: Re: HTML5 – The New Markup Language
    Post by Administrator on 08/28/13 at 23:33:10
    target="_blank" in HTML5?


    Using target="_blank" to links in HTML has been the de facto method of opening links in new windows. With XHTML 1.0 Strict and XHTML 1.1, this method is deprecated, because this could confuse the user. Back button did not work, simply because the new tab or window did not retain the browser history. This view of target="_blank" has now changed, however. W3C has currently allowed the use of target="_blank" in HTML5...


    Further reading
    W3C - A valid browsing context name or keyword

    Title: Re: HTML5 - The New Markup Language
    Post by Administrator on 11/26/13 at 02:51:00
    Google Maps in HTML5


    Google Maps API version 2 is no longer available. The code must now be made in API v3. This has not very much to do with HTML5, but if you want a Google map on your site, you must know use API JavaScript version 3, so I show it how anyway.

    [code html]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>API v2</title>

    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=...YOUR API v2 key"></script>
    <style type="text/css">
         function initialize() {
               var map;
               if (GBrowserIsCompatible()) {
                     var mapOptions = {
                     googleBarOptions : {
                     style : "new"
                     }
               }
                   map = new GMap2(document.getElementById("map-canvas"), mapOptions);
                   map.setCenter(new GLatLng(59.921290,10.753051), 16);
                   map.setMapType(G_NORMAL_MAP);
                   map.setUIToDefault();
                   map.openInfoWindow(map.getCenter(), document.createTextNode("Info om Dansens Hus"));
               }
         }
    </style>
    </head>
    <body onload="initialize()" onunload="GUnload()">
         <div id="map-canvas"></div>
    </body>
    </html>
    [/code]

    [code html]
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>API v3</title>
    <!-- Google Maps API v3 does not require an API key -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
    <style type="text/css">
         function initialize() {
               var myLatlng = new google.maps.LatLng(59.921290, 10.753051);
               var mapOptions = {
                   zoom: 16,
                   center: myLatlng
           }
           var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

           var marker = new google.maps.Marker({
         position: myLatlng,
         map: map,
         title: 'Dansens Hus'
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </style>
    </head>
    <body>
         <div id="map-canvas"></div>
    </body>
    </html>
    [/code]

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 03/23/14 at 16:15:14
    @font-face rule – CSS3 web fonts

    The font-face rule allows web designers to render any font you will, regardless it is installed on the user's computer or not. The fonts are defined within CSS3, and will be downloaded to the user. Web designers must make sure that the font is licensed for web use, before it is uploaded to the server. For Internet Explorer, EOT (Embedded OpenType) files is recommended. For the rest of the browsers you can either use OTF (OpenType) or TTF (TrueType). There are also other formats available, like SVG (Scalable Vector Graphics) and WOFF (Web Open Font Format). The latter is supported in all modern browsers (Chrome 5, Firefox 3.6, Internet Explorer 9, Opera 11.1, and Safari 5.1).

    [code css]
    /*
    Basic @font-face rule
    */
    @font-face {
         font-family: myFont;
         src: url('my_font.eot');
         src: url('my_font.otf')
         src: url('my_font.ttf')

    }
    h1 {
         font-family:myFont;
    }
    [/code]

    The code above will do the job in most cases, but there are also more reliable techniques. The web designer can extend the rule with an indicator of the font file type (format). Another technique is to add local in front of the font type. The browser will then check for a local copy of the font in case the user already has it.

    [code css]
    /*
    Extended @font-face rule
    */
    @font-face {
         font-family: myFont;
         src: local('My Font'), local('My-Font'), url('my_font.eot') format('embedded-opentype');
         src: local('My Font'), local('My-Font'), url('my_font.otf') format('opentype');
         src: local('My Font'), local('My-Font'), url('my_font.ttf') format('truetype');
         src: local('My Font'), local('My-Font'), url('my_font.svg#myfont') format('svg');
         src: local('My Font'), local('My-Font'), url('my_font.woff') format('woff');
    }
    h1 {
         font-family:myFont;
    }
    [/code]

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 03/23/14 at 22:52:58
    WebGL – HTML 5 with 3D support


    The upcoming web standards WebGL is JavaScript-controlled 3D graphics API (application programming interface). The standard provides ample opportunities for future web-based games in the browser. WebGL is based on OpenGL ES 2.0, and used in HTML5s Canvas elements (tags).


    Google, Mozilla, Apple and Opera are working on support for WebGL in HTML5 in their browsers. Firefox 4.0 and later versions, and Google Chrome 9.0 and later versions will have full support for WebGL in HTML5. Even today Google Chrome 8.0 has partial support for WebGL. Future Safari 6.0 will also receive partial support, but whether Opera 11.1 and Internet Explorer 9 (IE9) will have support for WebGL is uncertain.



    As mentioned above, the current Google Chrome are partially supporting WebGL. It is posted demos on the link below:

    [list bull-blueball]
  • WebGL Experiments -- Chrome Experiments


    8-)

  • Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 03/29/14 at 00:46:53
    CSS3 animations that validates

    In HTML5 and CSS3 it is tempting for web designers to use animations in the style sheets. But there are some issues. Not all browsers, like Chrome and Safari, are supporting the animation property. Newer browsers like Internet Explorer and Firefox are supporting it, but elder versions are a different story. So among the examples below, there’s only the W3C version that validates. Do you want your documents to be validated, you must thus find alternative layouts to the animations. Sorry!
    :'(

    [code css]
    h1 {
         animation-fill-mode:forwards; /* W3C */
         -webkit-animation-fill-mode:forwards; /* Safari & Chrome */
         -moz-animation-fill-mode:forwards; /* Firefox */
         -ms-animation-fill-mode:forwards; /* Internet Explorer */
         -o-animation-fill-mode:forwards; /* Opera */      

         animation:fadein ease-in 1; /* W3C */
         -webkit-animation:fadein ease-in 1; /* Safari & Chrome */
         -moz-animation:fadein ease-in 1; /* Firefox */
         -ms-animation:fadein ease-in 1; /* Internet Explorer */
         -o-animation:fadein ease-in 1; /* Opera */
               
         animation-duration:10s; /* W3C */
         -webkit-animation-duration:10s; /* Safari & Chrome */
         -moz-animation-duration:10s; /* Firefox */
         -ms-animation-duration:10s; /* Internet Explorer */
         -o-animation-duration:10s; /* Opera */
    }      

    /* W3C */      
    @keyframes fadein {
         from {
               opacity:0;
         } to {
               opacity:1;
         }
    }
    /* Safari & Chrome */      
    @-webkit-keyframes fadein {
         from {
               opacity:0;
         } to {
               opacity:1;
         }
    }
    /* Firefox */
    @-moz-keyframes fadein {
         from {
               opacity:0;
         } to {
               opacity:1;
         }
    }
    /* Internet Explorer */
    @-ms-keyframes fadein {
         from {
               opacity:0;
         } to {
               opacity:1;
         }
    }
    /* Opera */
    @-o-keyframes fadein {
         from {
               opacity:0;
         } to {
               opacity:1;
         }
    }
    [/code]

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 06/21/14 at 03:26:07
    HTML5 video

    HTML5 provides a standard for showing videos on websites. Before HTML5 there were no standard for this, but videos could only be played with a plug-in installed in the browser. HTML5 embeds a video on a web page with the <video> element.


    There are different MIME types for the video formats: MP4, Ogg, and WebM are three examples. Those three video formats allow streaming over the internet. The most common video format is MP4 (MPEG-4 Part 14), which formally is ISO/IEC 14496-14:2003.


    [code html]
    <video width="1920" height="1080" preload controls poster="Munch.png">
         <source src="Scream.mp4" type="video/mp4">
         <source src="Scream.ogg" type="video/ogg">
         <source src="Scream.webm" type="video/webm">
         <p>Here is the fallback content</p>
    </video>
    [/code]


    HTML5 <video> element example: Scream...

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 12/02/14 at 01:38:46
    Prevent horizontal menus from collapsing

    It is annoying when horizontal menus are wrapping or collapsing when the browser window is re-sized. One quick method for avoiding this is simply to replace display:inline with display:table-cell in CSS3. The reason that this works, is that the margin property applies to all elements, except elements with table display types (except table, table-caption and inline-table). In other words, margin is not working on display:table-cell elements in CSS3. So if you simply adds display:table-cell to the li elements in your CSS3, you should get rid of collapsing horizontal menus.

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 03/05/15 at 01:21:22
    HTML5 - Prefetch

    HTML5 has a new and still relatively unknown function that goes under the name «prefetch». On this site it has been used for a while, because HTML5 does not support lightbox feature that uses the rel= "lightbox", and partly because the site is running on LiteSpeed server. However, using rel="prefetch" (and update the java script in the same way) does the trick. This works because HTML5 preloads the resources to provide users with a quick and immediate experience. Modern websites optimized for speed requires more than just minimized download size. One possibility to increase speeds is to start your downloads faster.

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 03/16/15 at 23:17:27
    HTML5 videos in Responsive Web Design

    When I'm programming Responsive Web Design (RWD), I preffer to use "max-device-width:768px" in my stylesheets. This work on smartphones as well as tablets' portrait mode. A pixel is not just a pixel, so most smartphones (inclusive Galaxy S5 and iPhone 6) actually has a resolution closer to VGA than HD. Anyway, declaring static widths isn't a good idea in RWD (fluid width environments). For making pictures fluid, I simply use "max-width:100%" and "height:auto". Unfortunately this does not work on videos, as they get a little flat and weird shaped. I found an article that had a lovely solution on the issue. The solution is to remove width and height from the video in the HTML code, and embed the iframe in a box. The example below works on HTML5 videos, inclusive embedded YouTube videos.

    [code css]
    /*
    Handheld Styles
    */
    @media only screen and (max-device-width:768px) {
         section img {
               max-width:100%;
               height:auto;
         }
         section div#VideoPlayer {
               position:relative;
               padding-bottom:56.25%; /* 16:9 */
               padding-top:25px;
               height:0;
         }
         section div#VideoPlayer iframe {
               top:0;
               left:0;
               width:100%;
               height:100%;
               position:absolute;
         }
    }
    [/code]

    Source
    [list bull-redsq]
  • @media device breakpoints — Responsive Web Design
  • Fluid Width Video

  • Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 04/23/15 at 00:33:13
    Responsive Web Design: width vs device-width


    In the example above, you may ask why I preferred «device-width» instead of «width»? Well the reason is simply that «device-width» refers to the device itself. The above example works fine on devices having a screen resolution that is less than 768 pixels across. Most smartphones today have a «device-width» of less than 480px (VGA), despite they having a higher display resolution. For example a Retina display on an iPhone 6 Plus have 2208 pixel in landscape mode and 1242 pixels in portrait mode. However, with a CSS Pixel Ratio of three, the «device-width» is 736 pixels and the «device-height» is 414 pixels. In other words, the Retina display squeezes three pixels into each CSS-pixel on the screen.


    Because desktops rarely have screen resolutions below 768px, I prefer to use «device-width». I prefer this simply because it targets handheld devices at the same time, as it does not affect desktops with a small browser window. It is just a matter of taste! The link take you to a list of pixel dimensions and viewport dimensions of some of the most popular handheld devices: CSS Pixel Widths.

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 05/01/15 at 19:35:20
    If and only if – the semantic, responsive navigation-icon

    Hamburger button or navicon: ≡


    It becomes more and more usual to use the navigation-icon (navicon) in responsive collapsing web menus (aka hamburger button). There are different ways to create those three-line-menu-icons (navicons). One way is simply to use an image with three bars. Another way is to use the triple bar character in Unicode, which is U+2261 ≡ identical to & # 8 8 0 1 ; or & e q u i v ;. Some web developers are also using TRIGRAM FOR HEAVEN (U+2630), HTML Entity (decimal) & # 9 7 7 6 ;


    Some issues with the hamburger button (according to Luis Abreu) is:
    [list bull-redcheck]
  • Lower Discoverability
  • Less Efficient
  • Clash with Platform Navigation Patterns
  • Not Glanceable


    Essentially, what’s out of sight is out of mind. All navigation options you hide behind the hamburger button will be used a lot less. It does not help putting the hamburger button in the top left corner. That is the hardest place to reach if you are using the smartphone with just your right hand. The solution for better and basic human computer interaction may be to review your information architecture, and use a tab bar.


    Sources
    [olist]
  • The Semantic, Responsive Navicon Smashing Magazine by Jordan Moore (2012-10-08)
  • Kill The Hamburger Button TechCrunch by Josh Constine (2014-05-24)
  • Why and How to Avoid Hamburger Menus Luis Abreu (2014-05-14)
  • Triple bar Wikipedia (2015-04-28)
    [/olist]
    Kill-The-Hamburger-Button.png (31 KB | 426 )

  • Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 07/28/16 at 10:19:14
    When gradient background will not stretch to 100 percent!


    Sometimes the gradient-background rendered in CSS3 will simply not stretch 100 percent in the HTML5 documents. As seen in example 1 below where the gradient goes from red to black, it seems that it simply stops, and start repeating (starts all over on red) below the end of the footer tag </footer>. The bug fix for this, as seen in example 2 below where the gradient background is black all the way, is simply to add the code snippet below in the stylesheet. The height value for HTML works on all browsers included those on smartphones.


    [code css]
    html {
         height:100%; /*Bug fix for height -> Gradient for body will not stretch*/
    }
    body {
         color:#ffffff;
         font-size:16px;
         font-style:normal;
         background:#000000;
         background:linear-gradient(to bottom,red 0%,black 100%);
         background-image:-webkit-gradient(linear, top, bottom, color-stop(0,red), color-stop(1,black));
         background:-webkit-linear-gradient(top,red 0%,black 100%);  /*Android bug fix*/
         background:-moz-linear-gradient(top,red 0%,black 100%);
         background:-o-linear-gradient(top,red 0%,black 100%);

            /*Those bug fixes are not necessary, but you may add them in case for obsolete browsers*/
            background-repeat:no-repeat;
            background-attachment:fixed;
            height:100%;
            margin:0;
    }
    [/code]
    Gradient-background-will-not-stretch.png (148 KB | 278 )

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 09/06/16 at 20:14:30
    Prevent a script running on mobile devices by using isMobile


    Sometimes it is desirable that Java script optimized for desktops, not to run on mobile devices. There are several ways to do this, but the most effective is to use the isMobile library. Embed the whole script you do not want to run in the following script:

    [code javascript]
    function isMobile() {
         return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }
    if (!isMobile()) {
    //Here comes the script you do not want to run on mobile devices
    }
    [/code]

    You find an example of how isMobile works here: https://www.liavaag.org/Album/New-York/Gallery/. Try the social sharing buttons on both a desktop and a smartphone or similar. You will see that the thumbnails in the photo album will open in many sub-pages on the desktop version, while the mobile devices get them all placed under each other. To prevent AddThis to crash with the Ajax programming, the JavaScript that creates the sub-pages is disconnected with isMobile. Problem fixed! :)


    Sources
    [olist]
  • GitHub A simple JS library that detects mobile devices. [ONLINE] Available at: https://github.com/kaimallea/isMobile [Accessed 6 September 2016]
  • Stack Overflow (2015-02-15) javascript - How do I prevent a script from running on mobile devices? [ONLINE] Available at: http://stackoverflow.com/questions/12259701/how-do-i-prevent-a-script-from-running-on-mobile-devices [Accessed 6 September 2016]
  • Stack Overflow (2015-01-04) javascript - What is the best way to detect a mobile device in jQuery? [ONLINE] Available at: http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery [Accessed 6 September 2016]
    [/olist]

  • Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 10/10/16 at 02:13:36
    Geolocation API


    Geolocation API in HTML5 gets the geographical position of a user. The position on a device, smartphone or desktop is only available as long as the user approves it, because it can compromise privacy. With Chrome 50 and above, it only works with HTTPS. If you want the result shown with a Google map too, the newest smartphones as well as the newest browsers only support maps with an API-key. The conclusion is that Geolocation API works with both HTTPS and an API-Key.

    How is it working?
    Websites in the old days used the IP address to find your location. With HTML5 Geolocation API, browsers can find your location using data from GPS, Wi-Fi networks, cell towers, Bluetooth as well as the IP address. There is a way to fake your Geolocation coordinates. Here’s how (Agarwal, 2015):


    Quote:
    While in Google Chrome, press Ctrl+Shift+I on Windows, or Cmd+Opt+I on Mac, to open the Chrome Developer Tools. Now press the Esc (escape) key to open the Console window. Switch to the Emulation tab and choose the Sensors option in the left sidebar.


    This assumes that you're using Google Chrome!


    Sources
    Amit Agarwal (2015-03-30). How to Set your Location Manually in Google Chrome - Fake Geolocation. [ONLINE] Available at: http://www.labnol.org/internet/geo-location/27878/ (Accessed 10 October 2016)
    Google Developers (2016-10-05). Geolocation | Google Maps JavaScript API | Google Developers. [ONLINE] Available at: https://developers.google.com/maps/documentation/javascript/examples/map-geolocation (Accessed 10 October 2016)

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 12/29/16 at 01:49:02
    Prevent download jQuery library or other separate files to mobile devices by using isMobile


    To make webpages load faster on mobile devices, it might help not download JavaScript’s in separate files, or entire jQuery library, not download JavaScript’s onto mobile devices. In that case, it is easy to modify the script from post #26. When it does not work to put the code in separate java files (.js), it can be inserted inline in the HTML document instead:


    [code html]
    <script>
    function isMobile() {
         return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }
    if (!isMobile()) {
        window.document.write('<script src="jquery-3.1.1.slim.min.js"><\/script>');
    }
    </script>
    [/code]

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 12/19/17 at 01:32:47
    RWD Table
    Get responsive tables in HTML5 by using «data-head»


    Tables are useful for displaying data, but can be difficult to compress on smaller screens. Therefore, it may be useful to use the function «data-head» in the table. «Collapsing» tables in portrait mode, and on smaller screens, are far more transparent than tables with horizontal scroll bar. Below is an HTML5/CSS example of using «data-head», and the image below shows the result in landscape mode and portrait mode, respectively.


    [code html]
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <title>RWD Table</title>
        <style>
         table {
             width:100%;
             text-align:left;
         }
         table thead {
             color:#ffffff;
             background:#000000;
         }
         table caption,
         table tfoot {
             font-size:24px;
             font-weight:100;
         }
         table th,
         table td {padding:10px 0.5% 10px 0.5%}
         tbody tr:nth-of-type(odd) {background:#eeeeee}
         @media only screen and (max-width:768px) {
             table thead {display:none;}
             table td {display:block}
             table td:before {
                 content:attr(data-head);
                 display:inline-block;
                 background:no-repeat;
                 font-weight:600;
                 font-size:18px;
                 min-width:98%;
             }
         }
        </style>
    </head>
    <body>
        <h1>RWD Table</h1>
        <table>
            <caption>Employees</caption>
            <thead>
                <tr>
                    <th scope="col">First Name</th>
                    <th scope="col">Last Name</th>
                    <th scope="col">Education</th>
                    <th scope="col">Profession</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-head='First Name'>Peder</td>
                    <td data-head='Last Name'>&Aring;s</td>
                    <td data-head='Education'>Master</td>
                    <td data-head='Profession'>Headmaster</td>
                </tr>
                <tr>
                    <td data-head='First Name'>Ola</td>
                    <td data-head='Last Name'>Nordmann</td>
                    <td data-head='Education'>Bachelor</td>
                    <td data-head='Profession'>Teacher</td>
                </tr>
                <tr>
                    <td data-head='First Name'>Kari</td>
                    <td data-head='Last Name'>Nordmann</td>
                    <td data-head='Education'>Bachelor</td>
                    <td data-head='Profession'>Teacher</td>
                </tr>
            </tbody>
            <tfoot>
             <tr>
               <td colspan="4">Total employees: 3</td>
             </tr>
         </tfoot>
        </table>
    </body>
    </html>
    [/code]
    RWD-Table.png (51 KB | 167 )

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 06/24/18 at 21:57:37
    .htaccess


    Apache .htaccess is a configuration file that adjusts the settings of the web servers. The file gets immediate effect in all the files and subfolders of the specified folder it is loaded to and is useful when you do not have access to the configuration file in the main server. An example of a .htaccess file is to redirect from www to non-www and vice versa, as well as from HTTP to HTTPS:


    Code:
    RewriteEngine On
    RewriteCond %{HTTPS} off [OR]
    RewriteCond %{HTTP_HOST} ^www\. [NC]
    RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
    RewriteRule ^ https://%1%{REQUEST_URI} [L,NE,R=301]


    The example is from Simone's Blog (Carletti, 2016). The first line starts Apache's runtime rewriting engine. The next two lines are the redirect conditions. The first condition determines whether the request uses a non-HTTPS URL, while the other determines whether the request uses www URL. The fourth line avoids directing the host name directly to the URL. «RewriteRule» is the heart of the redirect, and tells Apache to redirect any request to a new URL. The flag «L» stops processing other rules and redirects immediately. «NE» asks Apache not to escape special characters. «R = 301» uses HTTP status code 301. If you want to redirect non-www to www, you can change the third and the fifth lines:


    Code:
    RewriteEngine On
    RewriteCond %{HTTPS} off [OR]
    RewriteCond %{HTTP_HOST} !^www\. [NC]
    RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
    RewriteRule ^ https://www.%1%{REQUEST_URI}; [L,NE,R=301]



    Sources
    [list bull-bluepin]
  • The Apache Software Foundation (2018). Apache HTTP Server Tutorial: .htaccess files - Apache HTTP Server Version 2.4. [ONLINE] Tilgjengelig: https://httpd.apache.org/docs/2.4/howto/htaccess.html [June 24, 2018].
  • Carletti, Simone (2016-08-11). Apache redirect www to non-www and HTTP to HTTPS. [ONLINE] Tilgjengelig: https://simonecarletti.com/blog/2016/08/redirect-domain-http-https-www-apache/ [June 24, 2018].

  • Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 12/17/18 at 17:55:19
    Make sure the text stays visible while loading fonts


    «Font display» is used in CSS for fonts to be visible during loading, and it accepts five values:

    [olist]
  • AUTO (default): The browser uses the default download method, which often resembles the block value.
  • BLOCK: The browser hides the text card until the font has fully downloaded, but keep the placeholder. The text will replace as quickly as it has downloaded. Also known as «flash of invisible text» or FOIT.
  • SWAP: The browser uses default text until the custom font is downloaded. Known as «flash of unstyled text» or FOUT.
  • FALLBACK: Works as a compromise between auto and swap values. The browser will hide the text for about 100 ms. If the font is not downloaded, it will use the default text (fallback).
  • OPTIONAL: As FALLBACK, the browser will hide the text, then transition to a FALLBACK font until the custom font is available to use. This value also allows the browser to determine, if the custom font is to be used at all, which is measured by the user's connection speed. Slower connections are less likely to receive the custom font.
    [/olist]

  • Forum @ Liavaag.org » Powered by YaBB 2.5 AE!
    YaBB Forum Software © 2000-2010. All Rights Reserved.