Welcome, Guest. Please Login or Register
YaBB - Yet another Bulletin Board
 
  Home English Norsk HelpLoginRegisterSearch  
 
 
Pages: 1 2 
Send Topic Print
HTML5 - Hypertext Markup Language (Read 116008 times)
Reply #15 - 11/26/13 at 02:51:00  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 243
*****
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 (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>
 

« Last Edit: 02/11/14 at 01:17:20 by Administrator »  
 
IP Logged
 
Reply #16 - 03/23/14 at 16:15:14  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 243
*****
@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;
}
 



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;
}
 

« Last Edit: 03/30/14 at 17:33:32 by Administrator »  
 
IP Logged
 
Reply #17 - 03/23/14 at 22:52:58  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 243
*****
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:



Cool
 
 
IP Logged
 
Reply #18 - 03/29/14 at 00:46:53  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 243
*****
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!
Cry

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;
	}
}
 


« Last Edit: 06/21/14 at 02:33:45 by Administrator »  
 
IP Logged
 
Reply #19 - 06/21/14 at 03:26:07  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 243
*****
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>
 




HTML5 <video> element example: Scream...
 
 
IP Logged
 
Reply #20 - 12/02/14 at 01:38:46  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 243
*****
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.
 
 
IP Logged
 
Reply #21 - 03/05/15 at 01:21:22  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 243
*****
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.
 
 
IP Logged
 
Reply #22 - 03/16/15 at 23:17:27  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 243
*****
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;
	}
}
 



Source
« Last Edit: 03/26/15 at 17:26:48 by Administrator »  
 
IP Logged
 
Reply #23 - 04/23/15 at 00:33:13  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 243
*****
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.
 
 
IP Logged
 
Reply #24 - 05/01/15 at 19:35:20  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 243
*****
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:
  • 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
  1. The Semantic, Responsive Navicon Smashing Magazine by Jordan Moore (2012-10-08)
  2. Kill The Hamburger Button TechCrunch by Josh Constine (2014-05-24)
  3. Why and How to Avoid Hamburger Menus Luis Abreu (2014-05-14)
  4. Triple bar Wikipedia (2015-04-28)
« Last Edit: 05/01/15 at 20:49:39 by Administrator »  
 
IP Logged
 
Reply #25 - 07/28/16 at 10:19:14  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 243
*****
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;
}
 

 
 
IP Logged
 
Reply #26 - 09/06/16 at 20:14:30  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 243
*****
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
}
 



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! Smiley


Sources
  1. GitHub A simple JS library that detects mobile devices. [ONLINE] Available at: https://github.com/kaimallea/isMobile [Accessed 6 September 2016]
  2. 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-runni... [Accessed 6 September 2016]
  3. 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-mobi... [Accessed 6 September 2016]

« Last Edit: 09/06/16 at 21:27:25 by Administrator »  
 
IP Logged
 
Reply #27 - 10/10/16 at 02:13:36  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 243
*****
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-geoloca
tion (Accessed 10 October 2016)
 
 
IP Logged
 
Reply #28 - 12/29/16 at 01:49:02  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 243
*****
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>
 

 
 
IP Logged
 
Pages: 1 2 
Send Topic Print