HomeTom - CS: HTML5

Showing posts with label HTML5. Show all posts

Sunday, May 8, 2016

Thursday, August 20, 2015

HTML 5移动开发从入门到精通

This introduces some HTML5 elements.

Javascript elements:

1. selectors api
2. JSON parse/stringify
3. Hashchage event
4. async.defer for script
5. progress for ajax
6. DeviceOrientation
7. touch events

Html5 Tag elements:

1. progress: <progress max="100" value="30"></progress>
2. mark (highlight text): <mark>This is a mark</mark>
3. address (italic format)
4. Colgoup col
5. keygen
6. fieldset/legend
7. ol.li (reversed, start, type)
8. q (quotation)
9. contenteditable div

Wednesday, May 6, 2015

HTML5 - Video and Canvas

http://html5doctor.com/video-canvas-magic/

Sunday, May 3, 2015

HTML5

W3C released HTML5 standard in 10/29/2014 after 8 years of effort.

Html5 provides lots of new features that make it easier to create web applications with rich features.

Notable new features include support for multimedia (canvas, audio, video, svg), real time communication (websocket), local storage, css3, and many new semantic tags.

[1] Baidu Baike: Html5
[2] HTML5 in China大会综述 2011
[3] wiki: Html5
[4] HTML5梦工场

Thursday, August 7, 2014

Create a website compatible with Mobile device

A template of a html page compatible with mobile device layout is attached at the end of this post.

In the header: <meta name="viewport" content="width=device-width"> means if the agent is a mobile device, then set the page width to the device's width.

In the resizePage() function, if the navigator useragent is detected as a mobile device, then set the image's width and the div's width. Function effectiveDeviceWidth() [1] will return the device screen width for the current orientation (horizontal or vertical). The code in [1] was like this but somehow it does not work with my Android:

function effectiveDeviceWidth() {
var deviceWidth = window.orientation == 0 ? window.screen.width : window.screen.height;
// iOS returns available pixels, Android returns pixels / pixel ratio
// http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
if (navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio) {
    deviceWidth = deviceWidth / window.devicePixelRatio;
}
return deviceWidth;
}

Note you can see relevant parameters with this javascript:

document.write("width: " + window.screen.width + ", height:" + window.screen.height + ", ratio:" + window.devicePixelRatio + ", orientation:" + window.orientation);

For example, for iPhone:
Vertical: width: 320, height: 480, ratio: 2, orientation: 0
Horizontal: width: 320, height: 480, ratio: 2, orientation:90 or -90

For Android:
Vertical: width: 480, height: 800, ratio: 1.5, orientation: 0
Horizontal: width: 800, height: 480, ratio: 1.5, orientation:90 or -90

Note in general it is hard to get the device size in a way compatible with all the brands. I am using iPhone 7.1 and Android 4.1.2.

The code after this [2] are useful to mobile devices that do not automatically update layout when orientation is changed. This is not an issue for iPhone, but is one for Android.

== HTML Page Template Compatible With Mobile Devices ==

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>Test Site</title>
</head>
<body style="margin: 0px 0px 0px 0px;" onload="resizePage();">
<center>

<img id="img1" src="https://www.google.com/images/srpr/logo11w.png">

<div id="div1">
<h2>About</h2>
<p>This is a site compatible to mobile device layout.</p>
</div>

</center>

<script type="text/javascript">

//
// Reisze page elements according to device width.
// Applies for mobile devices only.
//
function resizePage() {
var uagent = navigator.userAgent.toLowerCase();

if (uagent.search("iphone") > -1 ||
      uagent.search("ipod") > -1 ||
      uagent.search("ipad") > -1 ||
      uagent.search("appletv") > -1 ||
      uagent.search("android") > -1 ||
      uagent.search("blackberry") > -1 ||
      uagent.search("webos") > -1
     ) {
    var w = effectiveDeviceWidth();
    document.getElementById("img1").style.width = w + "px";
    document.getElementById("div1").style.width = (w - 20) + "px";
}
}

function effectiveDeviceWidth() {
// document.write("width: " + window.screen.width + ", height:" + window.screen.height + ", ratio:" +
// window.devicePixelRatio + ", orientation:" + window.orientation);

var deviceWidth = window.screen.width;

if (navigator.userAgent.toLowerCase().indexOf('android') > -1 && window.devicePixelRatio) {
    deviceWidth = deviceWidth / window.devicePixelRatio;
}
return deviceWidth;
}

//
// Resize page if orientation is changed. useful for Android.
//
var previousOrientation = window.orientation;
var checkOrientation = function(){
if(window.orientation !== previousOrientation){
    previousOrientation = window.orientation;
    resizePage();
}
};

window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);

</script>
</body>
</html>

References:

[1] Detect effective horizontal pixel width on a mobile device with Javascript
[2] Detect rotation of Android phone in the browser with javascript