Forum @ Liavaag.org - HTML5 - Hypertext Markup Language

Reply #31 - 12/17/18 at 17:55:19

Administrator Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender:
Posts: 291

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:

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.

The Administrator

Back to top

IP Logged

Reply #30 - 06/24/18 at 21:57:37

Administrator Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender:
Posts: 291

.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

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].

The Administrator

Back to top

IP Logged

Reply #29 - 12/19/17 at 01:32:47

Administrator Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender:
Posts: 291

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>

« Last Edit: 12/20/17 at 00:19:32 by Administrator »

RWD-Table.png (51 KB | 223 )

The Administrator

Back to top

IP Logged

Reply #28 - 12/29/16 at 01:49:02

Administrator Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender:
Posts: 291

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>

The Administrator

Back to top

IP Logged

Reply #27 - 10/10/16 at 02:13:36

Administrator Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender:
Posts: 291

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)

The Administrator

Back to top

IP Logged

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

Administrator Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender:
Posts: 291

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!

Sources

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-runni... [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-mobi... [Accessed 6 September 2016]

« Last Edit: 09/06/16 at 21:27:25 by Administrator »

The Administrator

Back to top

IP Logged

Reply #25 - 07/28/16 at 10:19:14

Administrator Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender:
Posts: 291

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

Gradient-background-will-not-stretch.png (148 KB | 331 )

The Administrator

Back to top

IP Logged

Reply #24 - 05/01/15 at 19:35:20

Administrator Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender:
Posts: 291

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

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)

« Last Edit: 05/01/15 at 20:49:39 by Administrator »

Kill-The-Hamburger-Button.png (31 KB | 483 )

The Administrator

Back to top

IP Logged

Reply #23 - 04/23/15 at 00:33:13

Administrator Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender:
Posts: 291

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.

The Administrator

Back to top

IP Logged

Reply #22 - 03/16/15 at 23:17:27

Administrator Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender:
Posts: 291

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 »

The Administrator

Back to top

IP Logged

Reply #21 - 03/05/15 at 01:21:22

Administrator Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender:
Posts: 291

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.

The Administrator

Back to top

IP Logged

Reply #20 - 12/02/14 at 01:38:46

Administrator Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender:
Posts: 291

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.

The Administrator

Back to top

IP Logged

Reply #19 - 06/21/14 at 03:26:07

Administrator Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender:
Posts: 291

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...

The Administrator

Back to top

IP Logged

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

Administrator Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender:
Posts: 291

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 »

The Administrator

Back to top

IP Logged

Reply #17 - 03/23/14 at 22:52:58

Administrator Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender:
Posts: 291

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:

WebGL Experiments -- Chrome Experiments

The Administrator

Back to top

IP Logged