Welcome Guest, Not a member yet? Register   Sign In
AmpHtml View Example
#1

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

file: amp-header.php
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%; }';
 
 iffile_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;

}
// 

Accordion-example.php

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/">
 
                TutorialAmpByExample.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/">TutorialAmpbyExample</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 Smile
Reply




Theme © iAndrew 2016 - Forum software by © MyBB