AmpHtml
No doubt you have all heard the hype about the AmpProject and/or AmpHtml web-pages and wondering if they would be suitable for your web-site? I started using them a couple of months ago and delighted with the results mostly due to Google's Free Cache. Also the increased exposure because Google's search results favours
valid AmpHtml web-pages. Please note the emphasis on
valid AmpHtml pages. This is by no means a simple task mostly due to W3.org's specifications not being followed.
From bitter experience I have found it beneficial to first create a validate web-page on your own web-site. Once created Google WebMaster Tools may be used to check validity or better still install Google Chromes's Extension:
[b]AMP Validator 1.0.9[/b] because it saves cutting & pasting the URLs into AmpHtml Validators.
AmpHtml Basics
1. Doctype must be HTML
2. <html> requires an AmpHtml Flash or <html amp>
3. A CSS subset is used prohibiting certain features such as inline style, img, iframe, form, JavaScript, etc.
4. ONLY Google JavaScript may be used!!!
First: The Bad News
As previously mentioned, many of W3.org's existing protocols have been dropped. Existing W3.org HTML validation fails!
There are numerous alternative validation methods available. The best I have found is a Google Chrome Extension which dynamically validates in the background and has helpful messages related to the invalid script.
Second: The Good News
Certain static header information is essential and best if required separately (amp-header.php).
An **amp-header.php** template can be included to simplify the web-page creation task. This basic PHP template accepts a few parameters and generates valid header.
AmpHtml CodeIgniter View Template:
This is my minimal valid web-page which can be created using two files. First is the
view page and secondly a PHP include file:
**View file:**
PHP Code:
<?php
# file: index-template.php
# OPTIONAL
declare(strict_types=1); // PHP 7 specific
error_reporting(-1);
ini_set('display_errors','true');
# CODEIGNITER SPECIFC
defined('VIEWPATH') ?: define('VIEWPATH', './');
# MAYBE FOLLOWING EXAMPLES PASSED FROM CONTROLLER
if(0):
$ampHdr = VIEWPATH .'incs/amp-header.php';
$fStyle = VIEWPATH .'incs/amp-style.css';
$title = 'AmpHtml - Accordion ';
$body = file_get_contents( VIEWPATH .'incs/amp-body.php');
$footer = '<b>Footer goes here</b>';
$aJs[] = '<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>';
else:
$ampHdr = VIEWPATH .'incs/amp-header.php';
$fStyle = NULL;
$title = 'Yes we have no $title???';
$body = 'Yes we have no $body???';
$footer = 'Yes we have no $footer???';
$aJs = NULL;
endif;
require $ampHdr;
?><!DOCTYPE HTML>
<html amp lang="en-uk">
<head>
<?= ampHeader($title, $fStyle, $aJs) ?>
</head>
<body class="bgc">
<h1> <?= $title ?> </h1>
<hr />
<?= $body ?>
<div class="foot bg3">
<?= $footer ?>
</div>
</body>
</html>
PHP Code:
<?php # _amp-header.php
# function fred($val,$vd=NULL) {echo '<pre>', $vd ? var_dump($val) : print_r($val), '';}
function ampHeader($title, $fStyle, $aJs)
{
$canon = 'http://'
. $_SERVER['SERVER_NAME']
. $_SERVER['REQUEST_URI'];
$css = 'body {color:red; line-height:2;}'
. '.bg3 {background-color:#333; color:snow;}'
. '.foot {position:fixed; bottom:0; left:0; width:100%; }';
if( file_exists($fStyle) ):
$css .= file_get_contents($fStyle);
endif;
// <script async custom-element="amp-accordion" src="< ?= $jsAmp ? >"></script>
$jsAmps = '';
if($aJs):
foreach($aJs as $js):
$jsAmps .= $js;
endforeach;
endif;
#fred($aJs,1);die;
$result = <<< RESULT
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> $title </title>
<link rel="canonical" href="$canon">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>
body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<style amp-custom> $css </style>
<noscript>
<style amp-boilerplate>
body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
</style>
</noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
$jsAmps
RESULT;
return $result;
}//
PHP Code:
<div class="w88 mga">
<amp-accordion>
<section expanded>
<h4>Link to accordion source: </h4>
<h6>
<a href="https://ampbyexample.com/components/amp-accordion/">
Tutorial: AmpByExample.com
<br><br>
</a>
</h6>
</section>
<section>
<h4>More links: </h4>
<ul>
<li>
<a href="https://www.ampproject.org/">AmpProject.org</a>
</li>
<li>
5 x <a href="https://github.com/ampproject"> GitHub Repositories</a>
</li>
<li>
<a href="http://stackoverflow.com/questions/tagged/amp-html"> StackOverFlow<br><br> </a>
</li>
</ul>
</section>
<section>
<h4>Responsive Images</h4>
<figure>
<figcaption>
<a href="https://ampbyexample.com/components/amp-img/">Tutorial: AmpbyExample</a>
</figcaption>
<amp-img
src="img/amp.jpg"
width="1080"
height="610"
layout="responsive"
alt="an image"></amp-img>
<br><br><br>
</figure>
</section>
</amp-accordion>
</div>
enjoy
