[pmwiki-users] Html5 in PMWIKI

Lars Eighner surname at larseighner.com
Fri Sep 7 09:25:16 CDT 2012


On Fri, 7 Sep 2012, Leopold Palomo-Avellaneda wrote:

> Hi,
>
> we are beginning to use PmWiki and one comrade (the web expert) thinks that
> one interesting thing to add to the project is that the main php code, the
> frontend part provide the html5 code instead html4.

I've heard this suggestion before.  What I haven't heard is exactly what
would need to change other than the DOCTYPE.

No wiki is entirely faithful to any HTML version, because wiki markup is
essentially presentational.

That being said, what exactly would break if you changed the DOCTYPE in the
skin? I cannot think of anything.  I'm sure there must be something, but so
far as PmWiki supports HTML 4 in its core, it supports HTML 5 because the
difference between those elements in HTML 4 and HTML 5 is in the structural
interpretation of the elements, which all wikis ignore anyway.

So change the DOCTYPE in the skin and, Voila!, HTML 5.

> The main complain is about the use of a table to group the sidebar and the
> content. As this is an important amount of work, do you think that it could be
> an interesting project?

You do not need HTML 5 to eliminate layout tables.  You simply have to
create a new skin.  This can be done with a few DIVs and CSS.  Begin by
cloning the default skin directory and working on the renamed copy (so your
work will not be overwritten by updates).  Here, for example, is a
source-ordered skin with two side bars: <http://families.larseighner.com/> .

Here is the template (with some extra line breaks for 80-column
readability):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 	"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
 	<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv='Content-Style-Type' content='text/css'>
<link rel="shortcut icon" href="$SkinDirUrl/favicon.ico" type="image/x-icon">
<title>$WikiTitle | {$Group} / {$Title} $ActionTitle</title>

<!--HTMLHeader-->

<link rel='stylesheet' href='$SkinDirUrl/mynews.css' type='text/css'>
 	</head>
 	<body>
<!--markup:(:ads @=4 :)-->
<hr />
 		<div id="page-container">
<div id="topad" class="right">
<!--markup:(:ads @=3 :)-->
</div>
<div id="masthead" class="inside">
<div>
<h1><a href='http://larseighner.com/'>Lars Eighner’s Homepage</a></h1>
<hr>

<h2><img src='$PageLogoUrl' alt="$WikiTitle" id="mean"><a
href='{$ScriptUrl}'>FamiliesWiki</a></h2>

<span id="motto" class="slogan">$WikiSlogan</span> 
</div>
</div><!-- close masthead -->

<div class="hnav clright">
<!--wiki:{$Group}.PageActions {$SiteGroup}.PageActions-->
   <form action='{$ScriptUrl}'>
     <input type='hidden' name='n' value='{$FullName}'>
     <input type='hidden' name='action' value='search'>
     <input type='text' name='q' value='' size='15' class='inputbox searchbox'>
     <input type='submit' class='inputbutton searchbutton'
       value='$[Go]'></form>

</div><!-- close hnav -->


 			<div id="outer-column-container">
 				<div id="inner-column-container">
 					<div id="source-order-container">
 						<div id="middle-column">
 							<div class="inside">




<h3 class='pagegroup pagetitle'><a href='{$ScriptUrl}/{$Group}'>{$Group
}</a> / {$Title}</h3>

<!--PageText-->




<!--markup:
(:div class="bl" style="font-size: small;":)
----------------

(:if [ group Main || group FamiliesWiki || group Profiles || group Pmwiki ||
group Category ]:)

[[ Talk.{$Group}-{*$Name} | Discuss this page]]

(:ifend:)

(:if[ ( ! group Main ) && ( ! group FamiliesWiki ) && ( ! group Profiles )
&& ( !  group Talk ) && ( !  group Pmwiki ) && ( !  group Category ) && ( ! 
group Whisper ) ] :)

[[ Whisper.{$Group}-{*$Name} | Discuss this confidential page]]

(:ifend:)



'''Backlinks''' 
(:pagelist link={$Group}.{$Name} fmt=#simple :)
(:divend:)
-->

</div>
 						</div>
 						<div id="left-column">
 							<div class="inside">

<h3 class="time">{$NpTime}</h3>

<div id="cornerLogo">
<img src="$SkinDirUrl/muscle.jpg" alt="Shane Rigler muscle" id="muscle">
</div>

<!--wiki:{$SiteGroup}.SideBar-->

<hr class="hide">

 							</div>
 						</div>

 						<div
class="clear-columns"><!-- do not delete --></div>

 					</div>
 					<div id="right-column">
 						<div class="inside">

<!--wiki:{$Group}.SideBar-->


</div>
 						</div>
 					</div>

 					<div class="clear-columns"><!-- do
not delete --></div>

 				</div>
 			</div>
 			<div id="footer">
 				<div class="inside">


   <div id='wikifoot'>
     <div class='footnav'>
       <a rel="nofollow" href='{$PageUrl}?action=edit'>$[Edit]</a> -
       <a rel="nofollow" href='{$PageUrl}?action=diff'>$[History]</a> -

       <a href='{$ScriptUrl}/$[{$Group}/RecentChanges]'>$[Recent Changes]</a>
-

     <div class='lastmod'>$[Page last modified on {$LastModified}]</div></div>

<!--HTMLFooter-->

<p class="credit">FamiliesWiki is powered by
<a href="http://pmwiki.org/">Pmwiki</a><br>
Hosted at: <a href="http://www.serverpoint.com">Serverpoint Web 
Hosting</a>.</p>

<p class="credit">Original styles, unsigned articles and uncredited photos
are ©Copyright 2012 by Lars Eighner.  All rights reserved.  The moral
right of the author has been asserted.  Signed articles, credited photos,
photos linked offsite, trademarks, and advertising matter are the property
of their respective owners, authors, or originators.  Contributors grant a
non-excluse right to Lars Eighner to publish contibutions in any form or
medium.  Contributors warrant that they are the authors and copyright owners
of all material submited.  Notice of ininfingement and requests for removal
may be sent to <a
href="mailto:surname at larseighner.com">surname at larseighner.com</a>. 
Persons depicted in images may request removal of such images whether or not
they are the copyright holder of the image or have waived or licensed their
rights in the image.</p>

<hr class="hide">
</div><!-- close wikifoot -->
<div class="clear"></div>


 				</div>
 			</div>
 		</div>
 	</body>
</html>


The three-column structure is based on several Ruthsarian layouts, but
mostly skidoo_two. Naturally, CSS does all the heavy lifting.  You can
download the stylesheet, but for clarity, I suggest consulting 
<http://webhost.bridgew.edu/etribou/layouts/skidoo_too/gargoyles/index.html>
The look is based on a WordPress theme, "Magazine Basic"
by C. Bavotasan, but is no longer particularly recognizeable.


-- 
Lars Eighner
http://www.larseighner.com/index.html
8800 N IH35 APT 1191 AUSTIN TX 78753-5266




More information about the pmwiki-users mailing list