Vorschlag zur Optimierung des FE-Templates "mod_visitors_fe_all"

[Rev]

Hallo

Als Featurerequest möchte ich vorschlagen, das FE-Template in der
folgenden Variante (siehe Anhang) zu verwenden. So ist es semantisch
sauber strukturiert und in den meisten Fällen mit weniger Aufwand zu
stylen.

Beste Grüße

<!-- indexer::stop -->
<section class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>

 <?php if ($this->headline): ?>
 <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
 <?php endif; ?>

 <?php foreach ($this->visitors as $visitor): ?>
 <h2 class="visitor_count invisible">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::count}}</h2>
 
 <dl>
  <dt class="visitor_name"><?php echo $visitor['VisitorsNameLegend'];?></dt>                <dd id="VisitorsName">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::name}}</dd>
  <dt class="visitor_useronline"><?php echo $visitor['VisitorsOnlineCountLegend']; ?></dt>  <dd id="VisitorsOnlineCount">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::online}}</dd>
  <dt class="visitor_visitstoday"><?php echo $visitor['TodayVisitCountLegend']; ?></dt>     <dd id="TodayVisitCount">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::todayvisit}}</dd>
  <dt class="visitor_visitstotal"><?php echo $visitor['TotalVisitCountLegend']; ?></dt>     <dd id="TotalVisitCount">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::totalvisit}}</dd>
  <dt class="visitor_hitstoday"><?php echo $visitor['TodayHitCountLegend']; ?></dt>         <dd id="TodayHitCount">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::todayhit}}</dd>
  <dt class="visitor_hitstotal"><?php echo $visitor['TotalHitCountLegend']; ?></dt>         <dd id="TotalHitCount">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::totalhit}}</dd>
  
  <?php if ($visitor['AverageVisits']): ?>  
  <dt class="visitor_average" ><?php echo $visitor['AverageVisitsLegend']; ?>&nbsp;&Oslash;</dt> <dd id="AverageVisits">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::averagevisits}}</dd>
  <?php endif; ?>

  <?php if ($visitor['VisitorsStartDate']): ?>
  <dt class="visitor_countsince" ><?php echo $visitor['VisitorsStartDateLegend']; ?></dt> <dd id="VisitorsStartDate">&nbsp;{{visitors::<?php echo $visitor['VisitorsKatID']; ?>::start}}</dd>
  <?php endif; ?>

 </dl>

<script>
 var iWidth  = window.innerWidth  || (window.document.documentElement.clientWidth  || window.document.body.clientWidth); 
 var iHeight = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
 var sWidth  = screen.width;
 var sHeight = screen.height;
 
 document.write('<img class="invisible" src="system/modules/visitors/public/ModuleVisitorsScreenCount.php?vcid=<?php echo $visitor['VisitorsKatID']; ?>&scrw='+sWidth+'&scrh='+sHeight+'&scriw='+iWidth+'&scrih='+iHeight+'">');  
</script>

<?php endforeach; ?>
</section>
<!-- indexer::continue -->

[BugBuster]

Ich habe das Thema mal in einen extra Thread verschoben mit der Bitte an alle Visitor Nutzer diesen Vorschlag zu diskutieren.
Es gäbe zwei Varianten:
a) Das Template entsprechend ändern, ggf. auch die CSS Angaben (Demo)
b) Das als alternatives Template anbieten.

[BugBuster]

Hi,
das geänderte Template ist unvollständig, die ganzen Divs mit den id="...Legend" sind nun weg, das führt dazu, das die genutzten CSS Angaben nicht mehr greifen (bei mir zumindest, siehe Demo CSS), denn da lagen ja die float Angaben drauf.
Hier wären dann also auf alle Fälle CSS Anpassungen nötig und damit nicht abwärtskompatibel.
Das wäre zu bedenken. Ich schaue mir das mal noch genauer an.

[Rev]

Ja, das stimmt, für bestehende CSS ist das ungünstig. Aber es gibt eigentlich kaum einen Grund IDs zu verwenden bzw. die könnte man ja auch notfalls wieder hinzufügen. Leider habe ich ohnehin eine komische Version meines Templates geschickt habe - ich meinte es eigentlich so:

<!-- indexer::stop -->
<section class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>

 <?php if ($this->headline): ?>
 <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
 <?php endif; ?>

 <?php foreach ($this->visitors as $visitor): ?>
 <h2 class="visitor_count invisible">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::count}}</h2>
 
 <dl class="visitor_name">              <dt><?php echo $visitor['VisitorsNameLegend'];?></dt>           <dd>{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::name}}</dd></dl>
 <dl class="visitor_useronline">        <dt><?php echo $visitor['VisitorsOnlineCountLegend']; ?></dt>   <dd>{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::online}}</dd></dl>
 <dl class="visitor_visitstoday">       <dt><?php echo $visitor['TodayVisitCountLegend']; ?></dt>       <dd>{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::todayvisit}}</dd></dl>
 <dl class="visitor_visitstotal">       <dt><?php echo $visitor['TotalVisitCountLegend']; ?></dt>       <dd>{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::totalvisit}}</dd></dl>
 <dl class="visitor_hitstoday">         <dt><?php echo $visitor['TodayHitCountLegend']; ?></dt>         <dd>{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::todayhit}}</dd></dl>
 <dl class="visitor_hitstotal">         <dt><?php echo $visitor['TotalHitCountLegend']; ?></dt>         <dd>{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::totalhit}}</dd></dl>
  
  <?php if ($visitor['AverageVisits']): ?>  
  <dl class="visitor_average"><dt><?php echo $visitor['AverageVisitsLegend']; ?>&nbsp;&Oslash;</dt> <dd>{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::averagevisits}}</dd></dl>
  <?php endif; ?>

  <?php if ($visitor['VisitorsStartDate']): ?>
  <dl class="visitor_countsince"><dt><?php echo $visitor['VisitorsStartDateLegend']; ?></dt> <dd>&nbsp;{{visitors::<?php echo $visitor['VisitorsKatID']; ?>::start}}</dd></dl>
  <?php endif; ?>

 </dl>

<script>
 var iWidth  = window.innerWidth  || (window.document.documentElement.clientWidth  || window.document.body.clientWidth); 
 var iHeight = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
 var sWidth  = screen.width;
 var sHeight = screen.height;
 
 document.write('<img class="invisible" src="system/modules/visitors/public/ModuleVisitorsScreenCount.php?vcid=<?php echo $visitor['VisitorsKatID']; ?>&scrw='+sWidth+'&scrh='+sHeight+'&scriw='+iWidth+'&scrih='+iHeight+'">');  
</script>

<?php endforeach; ?>
</section>
<!-- indexer::continue -->

Die Selektion erfolgt dann z.B. einfach via

dl.visitor_hitstotal dt { }
dl.visitor_hitstotal dd { } usw.

Da mir das auch auch viele Einzellisten-Elemente sind, wäre auch folgendes noch besser denkbar:

<!-- indexer::stop -->
<section class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>

 <?php if ($this->headline): ?>
 <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
 <?php endif; ?>

 <?php foreach ($this->visitors as $visitor): ?>
 <h2 class="visitor_count invisible">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::count}}</h2>
 
 <ul>
 
  <li class="visitor_name">              <strong class="legend"><?php echo $visitor['VisitorsNameLegend'];?></strong>           <span class="value">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::name}}</span></li>
  <li class="visitor_useronline">        <strong class="legend"><?php echo $visitor['VisitorsOnlineCountLegend']; ?></strong>   <span class="value">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::online}}</span></li>
  <li class="visitor_visitstoday">       <strong class="legend"><?php echo $visitor['TodayVisitCountLegend']; ?></strong>       <span class="value">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::todayvisit}}</span></li>
  <li class="visitor_visitstotal">       <strong class="legend"><?php echo $visitor['TotalVisitCountLegend']; ?></strong>       <span class="value">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::totalvisit}}</span></li>
  <li class="visitor_hitstoday">         <strong class="legend"><?php echo $visitor['TodayHitCountLegend']; ?></strong>         <span class="value">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::todayhit}}</span></li>
  <li class="visitor_hitstotal">         <strong class="legend"><?php echo $visitor['TotalHitCountLegend']; ?></strong>         <span class="value">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::totalhit}}</span></li>
  
  <?php if ($visitor['AverageVisits']): ?>  
  <li class="visitor_average"><strong class="legend"><?php echo $visitor['AverageVisitsLegend']; ?>&nbsp;&Oslash;</strong> <span class="value">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::averagevisits}}</span></li>
  <?php endif; ?>

  <?php if ($visitor['VisitorsStartDate']): ?>
  <li class="visitor_countsince"><strong class="legend"><?php echo $visitor['VisitorsStartDateLegend']; ?></strong> <span class="value">&nbsp;{{visitors::<?php echo $visitor['VisitorsKatID']; ?>::start}}</span></li>
  <?php endif; ?>

 </ul>

<script>
 var iWidth  = window.innerWidth  || (window.document.documentElement.clientWidth  || window.document.body.clientWidth); 
 var iHeight = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
 var sWidth  = screen.width;
 var sHeight = screen.height;
 
 document.write('<img class="invisible" src="system/modules/visitors/public/ModuleVisitorsScreenCount.php?vcid=<?php echo $visitor['VisitorsKatID']; ?>&scrw='+sWidth+'&scrh='+sHeight+'&scriw='+iWidth+'&scrih='+iHeight+'">');  
</script>

<?php endforeach; ?>
</section>
<!-- indexer::continue -->

Selektion via:

ul li.visitor_hitstotal .legend { } und li.visitor_hitstotal .value { }

[Rev]

Hallo

Hier noch mal das Template (oben) nun mit den bisherigen IDs...

Wenn aber jemand via div#TotalHitCountLegend und nicht #TotalHitCountLegend selektiert hat, ist es ja nun auch nicht mehr abwärtskompatibel.

<!-- indexer::stop -->
<section class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>

 <?php if ($this->headline): ?>
 <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
 <?php endif; ?>

 <?php foreach ($this->visitors as $visitor): ?>
 <h2 class="visitor_count invisible">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::count}}</h2>
 
 <ul>
 
  <li class="visitor_name">              <strong class="legend" id="VisitorsNameLegend"><?php echo $visitor['VisitorsNameLegend'];?></strong>                   <span class="value" id="VisitorsName">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::name}}</span></li>
  <li class="visitor_useronline">        <strong class="legend" id="VisitorsOnlineCountLegend"><?php echo $visitor['VisitorsOnlineCountLegend']; ?></strong>    <span class="value" id="VisitorsOnlineCount">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::online}}</span></li>
  <li class="visitor_visitstoday">       <strong class="legend" id="TodayVisitCountLegend"><?php echo $visitor['TodayVisitCountLegend']; ?></strong>            <span class="value" id="TodayVisitCount">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::todayvisit}}</span></li>
  <li class="visitor_visitstotal">       <strong class="legend" id="TotalVisitCountLegend"><?php echo $visitor['TotalVisitCountLegend']; ?></strong>            <span class="value" id="TotalVisitCount">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::totalvisit}}</span></li>
  <li class="visitor_hitstoday">         <strong class="legend" id="TodayHitCountLegend"><?php echo $visitor['TodayHitCountLegend']; ?></strong>                <span class="value" id="TodayHitCount">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::todayhit}}</span></li>
  <li class="visitor_hitstotal">         <strong class="legend" id="TotalHitCountLegend"><?php echo $visitor['TotalHitCountLegend']; ?></strong>                <span class="value" id="TotalHitCount">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::totalhit}}</span></li>
  
  <?php if ($visitor['AverageVisits']): ?>  
  <li class="visitor_average"><strong class="legend" id="AverageVisitsLegend"><?php echo $visitor['AverageVisitsLegend']; ?>&nbsp;&Oslash;</strong> <span class="value" id="AverageVisits">{{cache_visitors::<?php echo $visitor['VisitorsKatID']; ?>::averagevisits}}</span></li>
  <?php endif; ?>

  <?php if ($visitor['VisitorsStartDate']): ?>
  <li class="visitor_countsince"><strong class="legend" id="VisitorsStartDateLegend"><?php echo $visitor['VisitorsStartDateLegend']; ?></strong> <span class="value" id="VisitorsStartDate">&nbsp;{{visitors::<?php echo $visitor['VisitorsKatID']; ?>::start}}</span></li>
  <?php endif; ?>

 </ul>

<script>
 var iWidth  = window.innerWidth  || (window.document.documentElement.clientWidth  || window.document.body.clientWidth); 
 var iHeight = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
 var sWidth  = screen.width;
 var sHeight = screen.height;
 
 document.write('<img class="invisible" src="system/modules/visitors/public/ModuleVisitorsScreenCount.php?vcid=<?php echo $visitor['VisitorsKatID']; ?>&scrw='+sWidth+'&scrh='+sHeight+'&scriw='+iWidth+'&scrih='+iHeight+'">');  
</script>

<?php endforeach; ?>
</section>
<!-- indexer::continue -->

Beste Grüße

[BugBuster]

Dein zweites dl Beispiel ohne die Legend IDs gefällt mir besser als das erste.
Durch diese Angaben:

.mod_visitors dt {
    float: left;
}
.mod_visitors dd {
    text-align: right;
}

Hat man dann schon wieder fast dasselbe Bild wie vorher, bezogen auf meine Demo CSS. Der Name rutscht dann zwar auch erstmal nach rechts aber das ist händelbar.
Natürlich würde ich das dann mit den vorhandenen zusammenfassen.

D.h., es wäre auch ohne die IDs, man hat ja Klassen genug, machbar.
Von den Listen bin ich damals weg, und spans innerhalb von Listen, manche wollen die Spalten auch untereinander, das wird schwierig.
Also wenn dann dl im zweiten Beispiel.

[Rev]

Ja, ich halte die IDs auch für absolut unnötig. Nur eben für die Abwärtskompatiblität, hatte ich das noch mal aufgefasst.

Beides, also sowohl Definitions- als auch ungeordnete Listen bieten alle Möglichen. Mit...

.mod_visitor ul li.strong { display: block; }
.mod_visitor ul li.span { display: block; }

...liegen im 2. Beispiel die Legenden und Werte ja auch prima untereinander.

Also ich finde beides gut. Die DLs sind semantisch noch besser verwertbar, aber um SEO geht es ja hier eher nicht.
Ich würde mich einfach nur freuen, wenn man die vielen DIVs aus dem Code nehmen und durch eine Listenart ersetzen würde. Auf meinen Seiten verwende ich stets mein Beispiel 1.

Liebe Grüße