Programmieren – am Röschibach / Wed, 28 Feb 2018 14:39:19 +0000 de-DE hourly 1 https://wordpress.org/?v=5.0 Opera Mini und die Bildschirmauflösung /2011/10/opera-mini-und-die-bildschirmauflosung/ /2011/10/opera-mini-und-die-bildschirmauflosung/#comments Fri, 21 Oct 2011 08:49:22 +0000 /?p=1148 Für einen grossen Kunden soll eine auf mobile Endgeräte optimierte Version der existierenden Website erstellt werden. Laut den Anforderungen muss die Website auf Safari, dem Android Browser, Opera Mobile und Opera Mini laufen. Die mobile Website ist prinzipiell flexibel aufgebaut, das heisst Elemente werden so breit dargestellt wie der Bildschirm es erlaubt. Gewisse Elemente (beispielsweise ein Sprache-Wechseln div) sind im CSS mit float: right deklariert und werden daher – egal wie gross die horizontale Auflösung des Endgeräts ist – am rechten Rand positioniert.

Für Endgeräte mit einer Bildschirmbreite von 240 Pixel oder weniger funktioniert das float: right System konzeptionell nicht, weil dann eine Überlappung der rechts am Rand positionierten Elemente mit dem restlichen Inhalt stattfindet. Aus diesem Grund wird in dem Fall eine weitere CSS Datei mobile240.css geladen, die diese Elemente verkleinert und absolut positioniert.

Zusätzlich wird für Opera Mini ein weiteres CSS mobile240.css geladen, weil in diesem Browser das vertikale Zentrieren mittels der CSS Eigenschaft line-height nicht funktioniert. Im Code unten wird das mit Javascript erreicht. Das dient nur zur Veranschaulichung und zur Debug-Ausgabe. Im Produktivsystem wird dies mit CSS Mediaqueries erreicht:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 240px)" href="css/mobile240.css" />

Das System funktioniert hervorragend, ausser bei Opera Mini.

<!DOCTYPE html>
<html>
<head>
	<title>Opera Mini Test</title>
	<script type="text/javascript">// <![CDATA[
		function loadCss(cssfile) {
			loadcss = document.createElement('link')
			loadcss.setAttribute('rel', 'stylesheet')
			loadcss.setAttribute('type', 'text/css')
			loadcss.setAttribute('href', 'css/' + cssfile)
			document.getElementsByTagName('head')[0].appendChild(loadcss)
		}

		var status = '';
		var operaMini = (/opera mini/i.test(navigator.userAgent.toLowerCase()));
		if (operaMini) {
			status += 'loading operamini.css<br />';
			loadCss('mobile_operamini.css');
		}

		screenWidth = screen.width;
		if (screenWidth < '320') {
			status += 'loading mobile240.css<br />';
			loadCss('mobile240.css');
		}

		status += 'screen values: ' + screen.width + "x" + screen.height + ', ';
		status += window.innerWidth + 'x' + window.innerHeight;
	// ]]></script>
	<style type="text/css">
	<!--
		body {
			margin: 0px;
			padding: 0px;
		}

		#testcontainer {
			height: 50px;
			width: 320px;
			background: #666666 url('image/debug-width-2.png') 0px 0px no-repeat;
		}
	-->
	</style>
</head>
<body>
	<div id="testcontainer">
		Opera Mini Test
	</div>
	<div id="browserinfo">
	</div>
	<script type="text/javascript">// <![CDATA[
		document.getElementById('browserinfo').innerHTML = status;
	// ]]></script>
</body>
</html>

Opera Mini gibt auf dem Samsung Galaxy Ace GT-S5830 Testgerät bei obigem Code folgendes als Ausgabe:

loading operamini.css
loading mobile240.css
screen values: 228x245,229x246

Das Galaxy Ace hat eine Bildschirmauflösung von 320×480 Pixel, warum liefert Opera Mini als Wert für screen.width 228? Im Opera Mini Forum wird die gleiche Frage gestellt und vermutet, dass das Verhalten mit der Tatsache zusammenhängt, dass alle via Opera Mini aufgerufenen Seiten auf den Servern von Opera gerendert und dann erst an das mobile Endgerät geschickt werden. Eine Lösung wurde dort aber leider nicht gepostet.

Opera Mobile und der Andriod Browser liefern für obigen Code das erwartete Ergebnis. Auch der Opera Mobile Emulator unter Windows liefert sinnvolle Werte:

Screenshot Opera Mobile Emulator 240 Pixel

Screenshot Opera Mobile Emulator 320 Pixel

Ich bin für jeden Lösungsvorschlag dankbar, der mich näher zum Ziel führt zuverlässig zu erkennen, ob bei der Verwendung von Opera Mini das 240er CSS geladen werden muss oder nicht.

]]> /2011/10/opera-mini-und-die-bildschirmauflosung/feed/ 4 WordPress: Alle Beiträge einer Kategorie separat darstellen /2011/09/wordpress-alle-beitrage-einer-kategorie-separat-darstellen/ /2011/09/wordpress-alle-beitrage-einer-kategorie-separat-darstellen/#comments Wed, 28 Sep 2011 17:01:03 +0000 /?p=901 Einige werden es vielleicht schon bemerkt haben: Seit einiger Zeit bloggt Martha auch auf diesem Blog. Um unsere Beiträge separat zu halten habe ich für ihre Beiträge eine neue Kategorie „Martha“ erstellt. Alle Beiträge dieser Kategorie sollen nicht im WordPress Loop („The Loop„) der Hauptseite index.php erscheinen, sondern auf einer extra dafür angelegten Seite.

Im ersten Schritt müssen Beiträge mit der Kategorie „Martha“, die bei mir die ID 36 hat, im WordPress Loop der index.php ausgeblendet werden. Die ID einer Kategorie kann man beispielsweise erfahren, in dem man im WordPress Admin-Bereich auf Artikel → Kategorien klickt und dann mit der Maus über die gewünschte Kategorie fährt. Der GET-Parameter tag_ID verrät die ID (…&tag_ID=36&…).

In der index.php muss dazu nach der have_posts() Bedingung eine Zeile (bei mir Zeile 3, hängt aber natürlich vom verwendeten Template ab) eingefügt werden. Mit dem Parameter cat=-36 werden Beiträge der Kategorie 36 ausgeschlossen. Wenn man mehrere Kategorien ausschliessen will kann man nach folgendem Schema beispielsweise zusätzlich die Kategorien 3, 6 und 7 ausschliessen: cat=-36,-3,-6,-7.

<?php get_header(); ?>
	<!?php if (have_posts()) : ?>
	    <?php query_posts($query_string . '&cat=-36'); ?>
		<?php while (have_posts()) : the_post(); ?>
		    // Darstellung des Beitrags
		<?php endwhile; ?>
	<?php else : ?>
		// Fehlermeldung, falls das Gesuchte nicht gefunden wurde
	<?php endif; >
	<?php get_sidebar(); >
<?php get_footer(); >

Marthas Beiträge sollen auf einer separaten Seite erscheinen, dazu muss erstmal ein Template erstellt werden. Dazu haben ich die index.php meines Templates kopiert und in blogmartha.php umbenannt. Danach habe ich die Datei im Texteditor bearbeitet und den Header (Zeilen 1 bis 5) ergänzt. Ähnlich wie zuvor muss die Query bearbeitet werden (Zeile 10), diesmal wird keine Kategorie ausgeschlossen sondern explizit nur die Beiträge einer Kategorie (ID 36) geladen.

<?php
/*
Template Name: Blogmartha
*/
?>

<?php get_header(); ?>
	<?php if (have_posts()) : ?>
	    <?php query_posts('cat=36'); ?>
		<?php while (have_posts()) : the_post(); ?>
			// Darstellung des Beitrags
		<?php endwhile; ?>
	<?php else : ?>
		// Fehlermeldung, falls das Gesuchte nicht gefunden wurde
	<?php endif; ?>
	<?php get_sidebar(); ?>
<?php get_footer(); ?>

Der Header ist wichtig für die Identifizierung beim Anlegen der Seite. Dazu geht man im WordPress Admin-Bereich auf Seiten → Erstellen und wählt dort im rechten Bereich unter „Template“ das entsprechende Template (in meinem Fall Blogmartha) aus. Der Inhalt der Seite ist irrelevant, da er nicht dargestellt wird. Als Titel wählt man den in der Navigation gewünschten Titel. Danach publiziert man die Seite.

Als Ergebnis erhält man am WordPress Frontend einen weiteren Eintrag in der Seitennavigation mit dem angegebenen Titel in dem alle Beiträge der eingestellten Kategorie(n) dargestellt werden.

Als zusätzlichen Eye-Catcher habe ich in der Sidebar noch das Plugin/Widget Recent Category Posts positioniert in dem die 5 letzten Beiträge der Kategorie „Martha“ dargestellt werden.

]]> /2011/09/wordpress-alle-beitrage-einer-kategorie-separat-darstellen/feed/ 1 Microsoft Consolas als Schriftart zum Programmieren /2011/09/microsoft-consolas-als-schriftart-zum-programmieren/ /2011/09/microsoft-consolas-als-schriftart-zum-programmieren/#respond Mon, 12 Sep 2011 12:19:50 +0000 /?p=722 Zufällig hab ich auf dem davblog über die Schriftart Consolas von Microsoft gelesen und beschlossen die Schrift zum Entwickeln im Zend Studio auszuprobieren. Dazu muss man die Schriftart erst bei Microsoft runterladen und installieren. Danach kann man im Zend Studio unter Window → Preferences die Schriftart einstellen.

Screenshot Zend Studio Einstellungen

Für meine Zwecke hat es genügt unter General → Appearance → Colors and Fonts im Bereich „Basic“ die „Text Font“ zu ändern. Die Schriftgrösse habe ich nicht geändert, ich finde Consolas ist in Grösse 10 recht gut lesbar.

Screenshot: Zend Studio Code-Fenster in der Schriftart 'Courier New'

Screenshot: Zend Studio Code-Fenster in der Schriftart 'Consolas'

Gut finde ich, dass Consolas bei gleicher Schriftgrösse nicht so breit wie Courier New ist und dadurch mehr Code pro Zeile lesbar ist (siehe zum Beispiel Zeile 129 oder Zeile 136 im Code oben). Ausserdem empfinde ich das Schriftbild nun als angenehmer und das Programmieren macht noch mehr Spass.

Kurzum: Ich möchte Consolas nicht mehr missen!

]]> /2011/09/microsoft-consolas-als-schriftart-zum-programmieren/feed/ 0 Smarty Plugin in einem anderen Smarty Plugin aufrufen /2011/06/smarty-plugin-in-einem-anderen-smarty-plugin-aufrufen/ /2011/06/smarty-plugin-in-einem-anderen-smarty-plugin-aufrufen/#respond Wed, 22 Jun 2011 12:36:39 +0000 /?p=412 Heute stand ich vor dem relativ trivialen Problem, dass ich die Funktionalität eines Smarty Plugins in einem anderen Smarty Plugin verwenden wollte. Konkret ging es darum ein Plugin zum dynamischen Konstruieren von Dateinamen in einem Plugin zur Darstellung einer Tabellenzeile aufzurufen.

Google hat mir bei der Lösung vorerst nicht wirklich geholfen, erst durch Variation des Suchterms stiess ich schliesslich auf diesen Beitrag, bei dem in den Kommentaren die Lösung zu finden war:

function smarty_function_load_file($params, &$smarty) {
    if (empty($params['file'])) {
        $smarty->trigger_error("assign: missing 'file' parameter");
        return;
    }
    else {
        $file = $params['file'];
    }

    // assemble output path here
    // ...

    return $outputPath;
}




Normalerweise wird das load_file plugin im Smarty Template mit folgender Zeile aufgerufen:



<img src="{load_file file='path/to/my/file.gif'}" />




Das folgende Codeschnipsel verwendet die load_file Funktion innerhalb eines anderen Smarty Plugins:



function smarty_function_html_table_row($params, &$smarty) {

    // include the smarty load file plugin
    require_once($smarty->_get_plugin_filepath('function', 'load_file'));

    // some code skipped

    $returnValue .= '<img src="' . smarty_function_load_file(array('file' => 'path/to/my/file.gif'), $smarty) . '" />';

    // even more skipped code

    return $returnValue;
}




Die Magie passiert in Zeile 4, wo das function.load_file.php Plugin geladen wird, und in Zeile 8, in der die Funktion dann aufgerufen wird. Die Parameter werden in Form eines assoziativen Arrays als erster Parameter übergeben. In meinem Fall übergebe ich ‚file‘. Parameter zwei ist das Smarty Objekt, das scheinbar zwingend benötigt wird.

]]>
			/2011/06/smarty-plugin-in-einem-anderen-smarty-plugin-aufrufen/feed/
		0