Welcome! Named for the archangel of beauty, this site provides software tools and knowledge to help you be more beautiful yourself. Yoifel runs its own CMS system written in PHP7. This page describes the CMS.

Yofiel's Content Management System

Yofiel's 'Content Managment System' (CMS) is a lightweight tool for website management designed for simplicity and speed, while generating a complete, feature-rich Website via a minimal number of PHP scripts. The W3C-validated, fully responsive HTML5+CSS3 templates work consistently on Chrome, Safari, and Edge, even though the gzipped css, scripts, and template images are <3kB.
CSS-styled tags include A, ARTICLE, B, BLOCKQUOTE, BODY, CODE, DATA, DL, DL>DT, DL>DD, H1, H2, H3, H4, H5, H6, HEADER, HTML, I, IFRAME, IMG, LI, LI>OL, LI>UL, OL, P, PRE, STRONG, SUB, SUPER, TABLE, TABLE>TD, TABLE>TH, TABLE>TR, TEXTAREA, U, UL, and VIDEO. Due to HTML5 adding sufficient block tags for the entire page display, the CSS3 stylesheet contains no classes for body content.
The HTML content for each site's page is in its own .php file. At the page top, a few PHP variables set the title, description, and thumbnail image image for Facebook, Twitter, LinkedIn, and compatible social media platforms. The PHP template for content pages follows.

<?php $title = 'Page title for toolbar, social media, and other metadata'; $desc = "Page description for social media and other metadata"; $avatar = './img/image.jpg'; //image for display in social media $filepath = 'index.php'; $codeEditor = '1'; //whether to include CodeMirror require('./lib/head.php'); ?> <p><b>Slug</b> - Appears above article box. </p> <blockquote> <p>...Content goes here</p> <?php require('./lib/foot.php');?>
The REQUIRE_ONCE ./lib/head.php statement calls a script to generate the page head, responsive body header, and nav bar, as follows.
The ./lib/head.php file first calls a small site variable file, ./lib/config.php. The config file sets the site's name, base URL, and Google Analytics ID, as follows:

<?php $siteName = 'Yofiel'; $siteUrl = 'https://www.yofiel.com/'; $analytics = 'XXXXXXX'; //for Google Analytiucs ID ?>

The ./lib/head.php file then Generates all the metadata for the page's HEAD element using the variables set for the site and page.
The ./lib/head.php file then includes the site stylesheet and all synchronous scripts needed for Google Analytics, smooth scrolling, image lightbox, code syntax highlighting, floating top-of-page button, PDF file viewing, and YouTube video player. The CSS stylesheet is in ./lib/stylehseet.php and contains @MEDIA declarations to permit propoer printing as well. Because it is a small stylesheet, it is added to <HEAD> in a <STYLE> element to reduce HTTP requests.
The ./lib/head.php file then closes the HEAD element and adds an opening <BODY> tag.
The ./lib/head.php file inserts a HEADER element (containing the responsive header) containing a NAV element (containing the site menu). The menu contents are a simple list in a separate file, ./lib/nav.php. HTML5's HEADER and NAV elements are meant to be included only once in any page, so ./lib/nav.php sets the styles for these two elements inline:

<?php ?> <header id="page-header" style="background-image:linear-gradient(to right,#335b85,#203852,#335b85); border-bottom:2px solid black;border-top:2px solid black;left:0;margin:0 auto;overflow:hidden; padding:0;position:fixed;top:0;width:100%;z-index:10"> <nav style='margin:auto;padding:8px 0;max-width:750px;width:100%'> <a href='https://www.yofiel.com/' id="h1top" style='display:inline-block;background:none;line-height:24px'> Yofiel</a> <a href='page.php'>First page in menu</a> <a href='page2.php'>Second page in menu</a> . . . <a href='#top' id='btntop' style='display:none'>Top of Page</a> </nav> </header>

Yofiel's CMS automatically adds a captioned lightbox slideshow to all IMG elements on the page, opened by clicking any image.

<img sic="./img/yofiel.jpg" alt='yofiel logo'>
The IMG element's ALT attribute sets the caption displayed in the lightbox. A null ALT attribute results in no cpation.
Yofiel's CMS supports inline display of YouTube videos via the HTML5 IFRAME tag, as follows:

<iframe width="420" height="315" src="https://www.youtube.com/embed/-tUgoJ1wr_w"> </iframe>
To set the video, alter the ID declared in the SRC attribute. The above code example displays the Youtube video at that ID, as shown below:

Yofiel's CMS includes support of WYSIWIG display of Acrobat PDF files in an interactive editor as follows:

<div style="margin:8px"> <object data="916_report.pdf" type="application/pdf" width="90%" height="600px" style="display:block;margin:auto"> <p><a href="916_report.pdf">Download PDF</a></p> </object> </div>
To change the displayed PDF file, change the DATA attribute of the OBJECT element. The child P element declares text to be displayed if the user has Acrobat file display disabled in the browswer application settings. The above example shows the following local PDF file.

Yofiel's CMS includes CodeMirror for automatic syntax highlighting of PHP7, HML5, CSS3, and C/C++ on TEXTAREA tags that declare the ID attribute 'codeEdit,' For example:

<textarea id='codeEdit'> //This is syntax-highlighted code </textarea>
The TEXTAREA tag's height is set automatically. A page may modify the default CodeMirror appearance, include multiple syntax-higlighted blocks, and add vertical scrollbars to the code box by limiting the object height, as follows:

<textarea id='codeEdit2'> //This is syntax-highlighted code </textarea> <script> var textarea_editor = document.getElementById("codeEdit2"); this.editor = CodeMirror.fromTextArea(textarea_editor, { mode: 'php', theme: 'dracula', lineNumbers: true, indentWithTabs: true, tabSize: 4, matchBrackets: true}); this.editor.setSize(null,200); </script>
For W3C compliance, all scripted IDs for TEXTAREA objects are meant to be unique. It may be possible to use a class instead in future C odeMirror releases. In most cases, one can put HTML elements and PHP code inside the codebox directly, with a few exceptions: Some opening HTML tags, such as <OBJECT>, require that an < entity be substituted for the opening bracket, as is the case also for any <?PHP declarations. Also the opening bracket of a closting <TEXTAREA tag must use an < entity, or the parent TEXTAREA element will be closed prematurely.

After the Web page's <BODY> content, the <?PHP REQUIRE_ONCE .lib/foot.php?> statement adds the closing BODY tag, as well as footer content and all asynchonrous scripts.

Download

Yofiel's CMS is available under GPL 3.0 license and freely downloadable at this link:

Yofiel CMS with template

~

About Me

My name is Ernest Meyer, this is my private site, and I make no money from my work. Born in Washington DC in 1960, I earned all-paid schlarshiups to Eton prep, Stowe (Bucks, UK), and Oxford University, where I sat Philosophy, Psychology, and Politics (PPP).
I became a semiconductor analyst, then a silicon-valley engineer. I was a digital architect on the first 802.11 chipset, the first Pentium, the first Japanese cellphone, the prototype Netflix interface, and the first iPhone microprocessor. I retired when Steve Jobs died. You can contact me on LinkedIn at:

https://www.linkedin.com/in/ernest-meyer/

Thank you for visiting my site.