Die typo3_menu.php

Nehmen wir zunächst einmal die typo3_menu.php unter die Lupe, denn hier wird das eigentliche Menü eingebunden. Zu beachten ist, dass der Menüaufbau mit einer gesonderten .js realisiert wird. Solltet ihr diese benötigen, um z.B. ein Aufklappmenü zu realisieren, muss die Datei natürlich auch gespeichert werden.
Im folgenden seht ihr den Aufbau der typo3_menu.php, die das Menü im phpBB Forum erst realisierbar macht. Die genau Erklärung folgt unter dem Code.

<?php
$xml = file_get_contents('http://www.deine-Domain.de/index.php?id=22');
$excludedUids = array(15, 23);
$xmlParser = new SimpleXMLElement($xml);

foreach ($xmlParser->level1 as $menuentry) {
    if (! in_array($menuentry['uid'], $excludedUids)) {
        echo '<li><div><a href="/' . $menuentry['link'] . '" onfocus="blurLink(this);">' . $menuentry['title'] . '</a>';
        if ($menuentry->count()) {
            echo '<div>+</div></div><ul style="display: none;">';
            foreach ($menuentry->level2 as $submenuentry) {
                echo '<li><a href="/' . $submenuentry['link'] . '" onfocus="blurLink(this);">' . $submenuentry['title'] . '</a></li>';
            }
            echo '</ul>';
        } else {
            echo '</div>';    
        }
        echo '</li>';
    }
}
?>

Ihr seht vielleicht schon, dass im Code oft Listenelemente vorkommen, die den späteren Aufbau des Menüs darstellen. Diese müssen natürlich an euren Aufbau, also euer Layout des Menüs angepasst werden. Alle weiteren Dinge sollten beibehalten werden, um die Funktionalität der Datei zu gewährleisten. Alle, bis auf eine Ausnahme….
Ihr müsst www.deine-Domain.de in der ersten Zeile mit eurer Domain ersetzen. Die pid muss natürlich auch angepasst werden. Diese verweist übrigens auf eine einfache XML-Ausgabe, die das Menü wiedergibt. Die bewirkt dann später, dass auch neue Seiten von Typo3 im Menü vom phpBB Forum direkt automatisch angezeigt werden. Übrigens lässt sich über $excludeUids eine Auswahl an bestimmten Seiten, also pids von Typo3 angeben, die dann nicht im Menü angezeigt werden, wie z.B. Disclaimer oder Impressum.

Nun muss die typo3_menu.php nur noch an der anzuzeigenden Stelle in eurem Theme eingebunden werden. In meinem Beispiel ist dies die overall_header.html. Wählt einfach die Stelle, an der euer Menü stehen soll und gebt folgendes ein:

  <!-- INCLUDEPHP /styles/DEIN-THEME/template/typo3_menu.php -->

Natürlich muss hier einfach nur euer Pfad zur typo3_menu.php angegeben werden. Und? War´s das? Ja, kaum zu glauben, aber es ist so. Euer Menü der Typo3 Installation ist jetzt in eurem phpBB Forum integriert.

ANMERKUNG: Ihr müsst in den Sicherheits-Einstellungen eures Forums erlauben, dass PHP in Templates verwendet werden darf, sonst funktioniert die o.g. Zeile nicht!

Ihr merkt schon, dieser Weg ist wesentlich einfacher, als das Integrieren des phpBB Forums in Typo3. Ich hoffe, dass euch der Artikel geholfen hat euere beiden Systeme komplett in einer Homepage darzustellen. Bei Fragen könnt ihr einfach einen Kommentar hinterlassen. Natürlich bin ich auch immer für Feedbacks oder auch Verbesserungsvorschläge dankbar.

Nun aber zur Integration von phpBB in Typo3

Zuerst legen wir im fileadmin von Typo3 ein neues php-Script an. In meinem Beispiel liegt dieses in einem extra im fileadmin angelegten Ordner phpscripts, also der Pdaf zum php-Script lautet somit “/fileadmin/phpscripts/forum_login.php”. Zusätzlich zum Script forum_login.php benötigen wir noch das Script forum_menu.php. Wie die Namen schon schließen lassen, ist hier ein Script für das Integrieren des phpBB Menüs und ein Script zum Integrieren des phpBB Logins.
Werfen wir nun einen Blick in die beiden Scripts. Zunächst die Datei forum_menu.php, die  im weiteren Verlauf genauer erklärt wird:

<?php
global $board_config;
global $HTTP_COOKIE_VARS, $HTTP_GET_VARS, $SID;
global $db, $user, $cache, $phpEx, $method, $config, $phpbb_root_path;
$active_group = "forum";

define('IN_PHPBB', true);
define('PHPBB_ROOT_PATH', $_SERVER['DOCUMENT_ROOT']."/forum/");
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './';
$phpEx = substr(strrchr(__FILE__, '.'), 1);

include($phpbb_root_path . 'common.' . $phpEx);

// Start session management
$user->session_begin();
$auth->acl($user->data);

if ($user->data['user_id'] != ANONYMOUS) {
?>
        <ul class="navmenu_forum">
          <li>
          <div class="menutop menutop-closed">
              <a href="./forum">Forum</a>
              <div class="toggle toggle-closed">+</div>
            </div>
            <ul class="submenu">          
              <li><a href="./forum/faq.php" title="Häufig gestellte Fragen">FAQ</a></li>
              <li><a href="./forum/memberlist.php" title="Zeigt eine vollständige Liste aller Mitglieder an">Mitglieder</a></li>
              <li><a href="./forum/search.php?search_id=unanswered">Unbeantwortete Themen</a></li>
              <li><a href="./forum/search.php?search_id=unreadposts">Ungelesene Beiträge</a></li>
              <li><a href="./forum/search.php?search_id=newposts">Neue Beiträge</a></li>
              <li><a href="./forum/search.php?search_id=active_topics">Aktive Themen</a></li>
            </ul>
          </li>  
        </ul>
<?php
} else {
?>
        <ul class="navmenu_forum">
          <li>
          <div class="menutop menutop-closed">
              <a href="./forum">Forum</a>
              <div class="toggle toggle-closed">+</div>
            </div>
            <ul class="submenu">          
              <li><a href="./forum/faq.php" title="Häufig gestellte Fragen">FAQ</a></li>
            </ul>
          </li>  
        </ul>
<?php } ?>

Jetzt schauen wir uns noch die Datei forum_login.php an, auch diese wird im weiteren Verlauf des Beitrags erklärt:

<?php
// Start session management
$user->session_begin();
$auth->acl($user->data);

if ($user->data['user_id'] == ANONYMOUS) {
?>
  <form method="post" action="./forum/ucp.php?mode=login" class="loginform">
    <p><strong>Login</strong></p>
    <div>
      <label for="username">Benutzername</label>
      <input type="text" name="username" id="email" class="loginfield" />
      <label for="password">Passwort</label>
      <input type="password" name="password" id="password" class="loginfield" />
      <input type="submit" name="login" value="Login" class="loginbutton" />
    </div>
  </form>
<?php
} else {
  echo '<a href="./forum/ucp.php?mode=logout&amp;amp;sid='.$user->data["session_id"].'" title="Abmelden [ '.$user->data["username"].' ]" accesskey="x">Abmelden [ '.$user->data["username"].' ]</a>';
?>                
  <br /><hr class="toolbox_seperator_loggedin">

  <form action="./forum/search.php" method="post" id="search" class="searchform">
    <div>
      <input name="keywords" id="keywords" type="text" maxlength="128" title="Suche nach Wörtern" class="inputbox search" value="Foren-Suche…" onclick="if(this.value=='Suche…')this.value='';" onblur="if(this.value=='')this.value='Suche…';" />
      <input class="button2" value="Suche" type="submit" /><br />
    </div>
  </form>
  <a href="./forum/search.php" title="Zeigt die erweiterten Suchoptionen an">Erweiterte Suche</a> 

  <br /><hr class="toolbox_seperator_loggedin">

  <a href="./forum/ucp.php" title="Persönlicher Bereich" accesskey="e">Persönlicher Bereich</a>          
  <a href="./forum/search.php?search_id=egosearch">Eigene Beiträge</a>    
<?php } ?>

Die Datei forum_menu.php im Detail

Schauen wir uns die Datei forum_menu.php einmal im Detail an. Hierzu nehme ich immer einen gewissen Abschnitt aus dem Script und erkläre euch diesen dann detailliert, damit ihr auch wisst, was genau hier geschieht.

<?php
global $board_config;
global $HTTP_COOKIE_VARS, $HTTP_GET_VARS, $SID;
global $db, $user, $cache, $phpEx, $method, $config, $phpbb_root_path;
$active_group = "forum";

define('IN_PHPBB', true);
define('PHPBB_ROOT_PATH', $_SERVER['DOCUMENT_ROOT']."/forum/");
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './';
$phpEx = substr(strrchr(__FILE__, '.'), 1);

include($phpbb_root_path . 'common.' . $phpEx);

Dies ist wohl der wichtigste Teil der Datei. Hierzu muss zunächst angemerkt werden, dass dieser Abschnitt des Scripts entweder in der forum_menu.php oder der forum_login.php eingebunden werden kann. Wichtig ist, dass dieser Abschnitt in der Datei eingebunden wird, die zuerst geladen wird. In meinem Beispiel ist dies nun einmal das Menü, also die forum_menu.php.
Nun aber zur Erklärung. Wie man sieht werden zunächst alle benötigten globalen Variablen des phpBB-Forums gesetzt. Diese sind unabdingbar, damit im nächsten Schritt die benötigte Datei common.php und deren inkludierte Scripts inkludiert werden können. Zuvor wird natürlich noch der ROOT_PATH des Forums gesetzt. Wie man sieht befindet sich das Forum in einem extra Ordner namens “forum”, der auf der gleichen Ebene des Ordners “fileadmin” liegt. Und genau hier kommt es darauf an, dass der Pfad korrekt gesetzt ist, sonst scheitert das gesamte Projekt bereits an dieser Stelle.
Habt ihr also die gleiche Ordnerstruktur wie ich, könnt ihr den obigen Code eins zu eins kopieren und in euer Script einfügen.

// Start session management
$user->session_begin();
$auth->acl($user->data);

Eigentlich recht selbsterklärend… An dieser Stelle wird die Session gestartet und das für die Authentifizierung benötigte Objekt aus der Session geladen.

if ($user->data['user_id'] != ANONYMOUS) {
?>
        <ul>
          <li>
          <div>
              <a href="./forum">Forum</a>
              <div>+</div>
            </div>
            <ul>          
              <li><a href="./forum/faq.php" title="Häufig gestellte Fragen">FAQ</a></li>
              <li><a href="./forum/memberlist.php" title="Zeigt eine vollständige Liste aller Mitglieder an">Mitglieder</a></li>
              <li><a href="./forum/search.php?search_id=unanswered">Unbeantwortete Themen</a></li>
              <li><a href="./forum/search.php?search_id=unreadposts">Ungelesene Beiträge</a></li>
              <li><a href="./forum/search.php?search_id=newposts">Neue Beiträge</a></li>
              <li><a href="./forum/search.php?search_id=active_topics">Aktive Themen</a></li>
            </ul>
          </li>  
        </ul>

Nun wird festgelegt, was im Menü auftauchen soll, wenn der Benutzer noch auf der eigentlichen Typo3 Homepage, aber im Forum eingeloggt ist. Die Abfrage ob der User eingeloggt ist, erfolgt durch if ($user->data['user_id'] != ANONYMOUS). Ihr seht schon den Aufbau des Menüs via HTML. Hier handelt es sich natürlich um ein Beispiel, das bedeutet ihr müsst an dieser Stelle die entsprechenden DIVs oder Listenelemente so setzen, wie ihr diese benötigt bzw. wie diese auch im eigentlichen Menü eurer Homepage, also in Typo3 aufgebaut sind. Ihr könnt zudem natürlich frei wählen, welche Menüpunkte angezeigt werden sollen. Hierzu setzt ihr einfach die entsprechenden Links, die ihr dem Menü aus dem phpBB-Forum entnehmen könnt. Ich habe in diesem Beispiel einfach den Quelltext des phpBB-Forums in eingeloggtem Zustand anzeigen lassen und habe mir rausgeschrieben, auf welche php die einzelnen Menüpunkte verweisen bzw. welche Parameter benötigt werden. So z.B. für die Anzeige der aktiven Themen:

              <li><a href="./forum/search.php?search_id=active_topics">Aktive Themen</a></li>

Im nächsten Schritt geht es darum festzulegen, was angezeigt werden soll, wenn der User nicht eingeloggt ist. In meinem Beispiel wird einfach der Menüpunkt “Forum” und als Untermenüpunkt “FAQ” angezeigt. Auch hier könnt ihr selbstverständlich frei wählen. Beachtet aber, dass gewisse Funktionen, wie z.B. die Menüpunkte bei eingeloggtem Zustand unter Umständen hier nicht funktionieren. Dies hängt natürlich immer davon ab, wie öffentlich euer Forum ist bzw. was nicht eingeloggte User angezeigt bekommen. Das sind Einstellungen, die ich hier nicht aufgreifen werde, da dies den Rahmen des Beitrags sprengen würde. Schließlich werden diese Einstellungen alle im Administrations-Bereich des phpBB-Forums vorgenommen.
Im folgenden seht ihr also mein Menü, bei nicht eingeloggtem Zustand:

<?php
} else {
?>
        <ul>
          <li>
          <div>
              <a href="./forum">Forum</a>
              <div>+</div>
            </div>
            <ul>          
              <li><a href="./forum/faq.php" title="Häufig gestellte Fragen">FAQ</a></li>
            </ul>
          </li>  
        </ul>
<?php } ?>

Die Datei forum_login.php im Detail

Jetzt wird es Zeit die Datei für das Einbinden des Logins / Logouts des phpBB-Forums in Typo3 genauer unter die Lupe zu nehmen. Wie bereits erwähnt müssen an dieser Stelle keine Variablen, Klassen, etc. mehr eingebunden werden um die Session zu starten und auszulesen, da die Session bereits durch die forum_menu.php zur Verfügung.

<?php
// Start session management
$user->session_begin();
$auth->acl($user->data);

if ($user->data['user_id'] == ANONYMOUS) {
?>
  <form method="post" action="./forum/ucp.php?mode=login">
    <p><strong>Login</strong></p>
    <div>
      <label for="username">Benutzername</label>
      <input type="text" name="username" id="email" />
      <label for="password">Passwort</label>
      <input type="password" name="password" id="password" />
      <input type="submit" name="login" value="Login" />
    </div>
  </form>

Wir können also nun ganz einfach, wie man im Code sieht die Session starten und wieder unser benötigtes Objekt auslesen. Im folgenden wird dann abgefragt ob der User eingeloggt ist bzw. wenn er nicht eingeloggt ist, dann soll das Login-Formular angezeigt werden. Hier ist es selbstverständlich wichtig, dass dieses exakt die in diesem Code enthaltenen input-Elemente und die angegebene Action enthält. Der genaue Aufbau bzw. die Labels sind natürlich euch selbst überlassen und sollten an eure Typo3-Homepage angepasst werden. Bei der Action ist es natürlich, genau wie bei allen Links, die ihr im Menü eingefügt habt wichtig, dass der Pfad korrekt angegeben wird. Ich weise an dieser Stelle nochmals darauf hin, dass bei mir das Forum bzw. dessen ROOT_PATH im Ordner “forum” (auf der gleichen Ebene wie der Ordner “fileadmin”) liegt.

Im nächsten Abschnitt wird dann bestimmt, was angezeigt werden soll, wenn der Benutzer eingeloggt ist. Bei mir ist dies der Benutzername mit dem Link zum Abmelden, das Suchfeld für das Forum, der Link zum persönlichen Bereich, sowie der Link zur erweiterten Suche. Der Aufbau ist auch wieder euch überlassen, simples HTML halt.

<?php
} else {
  echo '<a href="./forum/ucp.php?mode=logout&amp;amp;sid='.$user->data["session_id"].'" title="Abmelden [ '.$user->data["username"].' ]" accesskey="x">Abmelden [ '.$user->data["username"].' ]</a>';
?>                
  <br /><hr>

  <form action="./forum/search.php" method="post" id="search">
    <div>
      <input name="keywords" id="keywords" type="text" maxlength="128" title="Suche nach Wörtern" value="Foren-Suche…" onclick="if(this.value=='Suche…')this.value='';" onblur="if(this.value=='')this.value='Suche…';" />
      <input value="Suche" type="submit" /><br />
    </div>
  </form>
  <a href="./forum/search.php" title="Zeigt die erweiterten Suchoptionen an">Erweiterte Suche</a> 

  <br /><hr>

  <a href="./forum/ucp.php" title="Persönlicher Bereich" accesskey="e">Persönlicher Bereich</a>          
  <a href="./forum/search.php?search_id=egosearch">Eigene Beiträge</a>    
<?php } ?>

So, ich hoffe, ich konnte euch die zwei benötigten Dateien gut erklären. Bevor wir mit der eigentlichen Einbindung in euer Typo3 weitermachen, möchte ich die Gelegenheit nutzen, euch noch einen kleinen Tipp zu geben:

Wenn Ihr die beiden Dateien erstellt und festlegt, was dem Benutzer beim eingeloggten und was beim nicht eingeloggten Zustand angezeigt werden soll, dann haltet euch an euer phpBB-Forum. Das bedeutet, dass der User möglichst die gleichen Sachen angezeigt bzw. nicht angezeigt bekommen sollte. So ensteht für die Besucher der Homepage der Eindruck, dass das Forum und die Homepage ein System sind. Der Benutzer loggt sich so z.B. über den Login, der im Typo3 integriert ist ein und wechselt dann im eingeloggten Zustand auf die Foren-Übersicht. Wir wissen, dass dies zwei Systeme sind und eigentlich auch zwei unabhängige “Seiten”. Der Benutzer bekommt jedoch immer noch das gleiche Layout und die gleichen Menüpunkte und Links angezeigt und merkt somit nicht, dass es zwei “Seiten” sind.

Wie binde ich nun die Dateien in Typo3 ein?

Zunächst begeben wir uns einmal in unser Fluid Template der Typo3-Installation. In Meinem Beispiel habe ich diese Datei ganz einfach layout.html genannt. Bei mir sind hier die folgenden Zeilen wichtig:

<f:render section="menu" />
  <div class="toolbox">
    <f:cObject typoscriptObjectPath="lib.forumlogin" />
  </div>

Bitte habt Verständnis, dass ich jetzt hier nicht auf den Aufbau eines Fluid Templates eingehe, dieser Beitrag soll schließlich nur erklären, wie ich phpBB in Typo3 einbinde.
Im obigen Code seht ihr, dass mein Menü aus einer separaten Datei geladen wird. Diese befindet sich auch im fileadmin und heißt menu.html. Ob ihr das Menü in einer extra Datei ablegt oder nicht, ist natürlich euch überlassen. Bei mir sieht die Datei wie folgt aus:

<div id="menu">
  <f:cObject typoscriptObjectPath="lib.menu" />
  <f:cObject typoscriptObjectPath="lib.forummenu" />
</div>

Vielleicht erkennt ihr schon, dass der Login mittels <f:cObject typoscriptObjectPath=”lib.forumlogin” /> und das Menü mittels <f:cObject typoscriptObjectPath=”lib.forummenu” /> eingebunden wird.
Natürlich ist das noch nicht alles, denn es reicht nicht, nur diese zwei Zeilen an der entsprechenden Stelle in eurem Template einzubinden. Dies dient nur dazu, dass Typo3 weiß, an welcher Stelle das Menü und der Login angezeigt werden sollen. Das eigentliche Einbinden der zwei Dateien forum_menu.php und forum_login.php, die in meinem Beispiel unter fileadmin/phpscripts/ abgelegt sind findet in Typoscript statt. Dazu wählt ihr einfach im Menü eures Typo3-Backends den Punkt “Web” aus und wechselt dann zu eurer Rootpage und klickt auf “Setup”.
Nun noch acht kleine Zeilen im Typoscript einbinden und schon habt ihr das Menü und den Login aus dem phpBB-Forum in Typo3 eingebunden:

lib.forumlogin = PHP_SCRIPT_EXT
lib.forumlogin {
 file = fileadmin/phpscripts/forum_login.php
}

lib.forummenu = PHP_SCRIPT_EXT
lib.forummenu {
 file = fileadmin/phpscripts/forum_menu.php
}

An dieser Stelle ist es netürlich wieder wichtig, dass ihr den genauen Pfad angebt, an dem ihr die Scripts im fileadmin abgelegt habt. Sehr wichtig ist auch, dass ihr PHP_SCRIPT_EXT angebt. Nur so werden die Scripts korrekt unterstützt!

Ich hoffe, ich konnte euch mit diesem kleinen Beitrag helfen und ihr wisst jetzt, wie ihr ein Menü und einen Login eures phpBB-Forums in eure Typo3-Homepage einbinden könnt. So können die User eurer Homepage ohne Bedenken zwischen dem Forum un der Homepage (was im idealen Fall ja aussehen soll, wie eine Seite) wechseln und bleiben dabei eingeloggt. Ein riesen Vorteil für euch und die Besucher!

Für Kommentare und Empfehlungen des Beitrags bin ich euch jederzeit dankbar, also ruhig “verschwenderisch” damit umgehen.

Grüße.

Sicher ist border-color an sich keine Neuerung, aber die Möglichkeiten, die border-color in CSS 3 bietet sind neu. So kann man z.B. wie im folgenden Beispiel gezeigt einen recht schönen Farbeffekt erzielen.

Wie man im Beispiel sieht gibt es hier einen Farbverlauf, der z.B. für leichte Schatten verwendet werden kann. Hier der Code für das obige Beispiel:

border: 8px solid #000000;
 -moz-border-bottom-colors: #330000 #550000 #770000 #990000 #BB0000 #CC0000 #EE0000 #FF0000;
 -moz-border-top-colors:    #330000 #550000 #770000 #990000 #BB0000 #CC0000 #EE0000 #FF0000;
 -moz-border-left-colors:   #330000 #550000 #770000 #990000 #BB0000 #CC0000 #EE0000 #FF0000;
 -moz-border-right-colors:  #330000 #550000 #770000 #990000 #BB0000 #CC0000 #EE0000 #FF0000;
 padding: 10px 10px 10px 25px;

border-radius

Durch border-radius lassen sich einfach abgerundete Ecken erstellen. Webdesigner kennen das, bislang benötigte man immer extra DIVs mit abgerundeten Ecken, die als Images hinterlegt waren. dies war unter Umständen eine Menge Arbeit. Gerade die korrekte Anordnung um andere DIVs und Inhaltselemente.
Dies wird durch border-radius weit vereinfacht, denn man kann direkt die Ecken eines Borders, also eines Rahmens abrunden. Zu beachten ist hierbei natürlich, dass nicht jeder Browser dies unterstützt. Älter Browser geraten bei CSS 3 an ihre Grenzen. Somit wird dann selbstverständlich eine normale Ecke angezeigt und man sollte in evtl. vorhandenen speziellen Stylesheets dann doch wieder auf Images zurückgreifen.

Im Beispiel sieht man (sofern euer Browser dies unterstützt) die abgerundeten Ecken einer Box. Der benötigte Code steht im Beispiel:

In diesem Beispiel ist lediglich ein Wert, also 15px als border-radius gesetzt. Das hat zur Folge, dass der Radius von 15 Pixeln auf alle vier Ecken angewandt wird. Man kann natürlich auch vier Werte setzen, wobei sich der erste Wert auf die linke obere Ecke auswirkt, der zweite auf die rechte obere Ecke, der dritte auf die linke untere und der vierte auf die rechte untere Ecke. So kann man dann Boxen mit nicht symetrisch abgerundeten Ecken erstellen und schöne Effekte auf der Webseite erzielen.

box-shadow

Mit box-shadow gehören lästige Hintergrundbilder, die einen Schatten “simulieren” der Vergangenheit an. Box-shadow ermöglicht es direkt im CSS-Stylesheet einen Schatten für ein Inhaltselement zu setzen. Im folgenden sieht man einige Shadows (werden natürlich auch nur von aktuellen Browsern unterstützt). Der jeweils benötigte Code zur Erstellung dieser Schatten steht in der jeweiligen Box selbst. Wie man sieht ist es möglich verschiedene Farbwerte, sowie den vertikalen und horizontalen Offset zu setzen:

Einige Webdesigner werden das Problem kennen… Man erstellt eine neue Webseite, die natürlich auf allen Endgeräten möglichst gleich aussehen soll. Das Stylesheet ist fertig und die Seite erstrahlt in allen gängigen Browsern gleich. Aber was ist nun mit SmartPhones oder Tablet-PCs? Sobald man die Webseite auf diesen Endgeräten ausführt, wird das wahre Ausmaß des Stylesheets ersichtlich und…? Nichts passt mehr!

Screenfly, ein kostenfreies Online-Tool schafft hier Abhilfe. Einfach in Screenfly den gewünschten URL der Seite eingeben und schon wird diese in verschiedenen Endgeräten dargestellt.
Man hat nun am linken Bildschirmrand die Wahl zischen normalen PCs / Notebooks mit verschieden großen Displays. Weiter kann man sich die Webseite auch in einer (recht überschaubaren) Auswahl von SmartPhones oder Tablet-PCs anzeigen lassen. Der Vorteil hieran ist, dass die diversen spezifischen Endgeräte über jeweils abweichende Betriebssysteme verfügen. Dadurch ist z.B. ein Test unter Android eben so möglich, wie unter Windows Mobile oder iOS. Da nicht jeder über mehrere Tablet-PCs oder SmartPhones, die jeweils ein anderes Betriebssystem haben verfügt, ist dies schon einmal ein großer Vorteil von Screenfly.

Ein weiterer Vorteil ist sicherlich die Kombination zwischen Screenfly und Firebug. Denn Die Webseite, welche in einem kleinen “Fenster” bzw. in einem extra DIV dargestellt wird hat natürlich angefangen beim Header bis hin zum Footer den gleichen HTML-Aufbau, wie  wenn man diese direkt auf dem Endgerät öffnet. So kann man direkt via Firebug Änderungen am Stylesheet testen.

Unklar bleibt natürlich jetzt noch, wie genau Screnfly wirklich ist und ob Screenfly alle Probleme mit abweichenden Endgeräten löst. Aber testet es doch einfach einmal aus und hinterlasst Kommentare mit euren Erfahrungen und Meinungen.

Bildung, Ausbildung und Beruf

Ich habe nach meiner mittleren Reife eine erfolgreiche Ausbildung als Verkäufer mit anschließender, ebenfalls erfolgreicher Ausbildung zum Kaufmann im Einzelhandel absolviert. Nach meinen Tätigkeiten als Kundenberater, Team- und Filialleiter, sowie Disponent im Großhandel habe ich mich entschieden einen anderen Weg einzuschlagen.

Seit September 2009 bin ich nun Geschäftsführer und Gesellschafter der Firma bitprofessional.com Ltd.. Zu meinen Aufgaben gehört jedoch nicht nur das Leiten des Unternehmens, gemeinsam mit meinem Bruder Sascha Klein, sondern hauptsächlich die aktive Arbeit an zahlreichen Projekten.
Hier liegt der Schwerpunkt auf der Entwicklung mit PHP (u.a. unter Verwendung des Zend-Framework). Ich befasse mich hierbei mit der Erstellung von Webseiten und Webapplikationen in CSS3, (X)HTML und PHP, sowie JavaScript, MySql, Zend uvm….
Zudem habe ich im letzten Jahr entschieden in der Entwicklung von Applikationen rund um das Thema Apple Fuß zu fassen. Hier entwickel ich in erster Linie Applikationen für Mac OS X unter Verwendung von Objective-C und Cocoa, sowie dem Interface Builder.

Wozu dieser Blog?

Auch Privat beschäftige ich mich natürlich ständig mit den neuesten Entwicklungen in der IT-Branche, lese diverse Artikel, teste Applikationen und Webseiten, aus diesem Grund auch dieser Blog.
Wie einige schon festgestellt haben befasse ich mich hier jedoch nicht nur mit der Entwicklung, sondern habe auch eine kleine Bildergalerie eingeführt, in der ich ein weiteres meiner Hobbies vorstellen möchte: Modelling mit der OpenSource Software Blender. Hier bin ich natürlich, wie auch bei meinen Artikeln immer dankbar für eure Meinung! Der Blog befasst sich weiter auch mit allgemeinen Themen, wie z.B. auch ein paar Neuigkeiten zum Thema Musik.

Daniel Klein, geb. 03.01.1987 in Neuwied

Alles in allem befasst sich dieser Blog aber auch zukünfitg wieder mehr mit Applikationen und interessanten Dingen aus der IT. Ihr dürft gespannt sein, was sich hier noch alles tut. Hinterlasst fleißig Kommentare zu meinen Beiträgen, damit ich ein Feedback habe. Ich nehme Kritik immer dankend an und bilde mich stets weiter, damit IHR immer optimal und schnell informiert werdet…

Es gab bereits einige Hacker, die diverse staatliche Einrichtungen gehackt haben. Aber Hackingangriffe als Waffe? – Na Klar! Ein guter Hacker kann sich z.B. in das System einer staatlichen Einrichtung hacken und dort geheime und wichtige Daten klauen und diese weitergehend gegen diese Einrichtung oder die gesamte Nation verwenden. Ein anderes Beispiel wäre der Hackingangriff auf ein Atomkraftwerk o.ä., denn hier kann ein Hacker das komplette System lahmlegen, was verheerende Folgen haben kann. Nicht zuletzt aus diesem Grund sehen z.B. die US-Amerikaner solche Angriffe als eine Kriegserklärung an. So wird dann schnell aus einem virtuellen Krieg ein realer Krieg!

Sicherlich gibt es auch staatliche Einrichtungen, die Hacker aus genau diesen Gründen beschäftigen. Oder? -Tja, das ist und bleibt sicher ein Geheimnis… Aber klar ist, dass das Internet ein neues Schlachtfeld für Kriege ist. Auch ohne Waffen kann man Kriege führen. Das Zerstören von geheimen oder lebenswichtigen Systemen und Einrichtungen via Hacking ist kein Film-Mythos, sondern kann schnell real werden. Aber was wird dagegen getan? Totale Überwachung? Gläserne User im Internet? Ganz bestimmt sind das auch nur vergebliche Bemühungen, wenn es ein Hacker wirklich darauf anlegt etwas zu sabotieren.

Aber nun seid ihr gefragt! Wie steht ihr zu dem sicher brisanten Thema “Weltkrieg über´s Internet”? Was sind eure Lösungsvorschläge um dies zu verhindern? Muss man tatsächlich Angst vor einem dritten Weltkrieg haben, der über das Internet geführt wird bzw. dort beginnt?
Schreibt einfach einen Kommentar und hinterlasst eure Meinung, denn eure Meinung zählt!

Schaut euch die Seite einfach hier selbst an. Auf der Homepage erfahrt ihr alles über das Aufgabengebiete und die Angebotenen Produkte. Im Download-Bereich gibt es ebenfalls etwas zu entdecken.

Wir sehen uns auf http://www.bitprofessional.com/

Benachrichtigungszentrum

Das Benachrichtigungszentrum befindet sich am oberen Rand des Displays und lässt sich egal in welchem Bildschirm öffnen, indem man mit dem Finger vom Benachrichtigungszentrum nach untern streicht. Diese Funktion grenzt ein bisschen an die von Android bekannte Anzeige der Benachrichtigungen.

Ein Unterschied zu Android ist wohl, dass man auch bei einem gesperrten Bildschirm direkt mit dem Finger über die Nachrichten streichen und somit direkt darauf reagieren kann. Egal was man gerade macht, ob man ein Buch ließt, im Web surf oder ein Game zockt, sobald man eine neue Benachrichtigung erhält, wird diese am oberen Bildschirmrand angezeigt. Hier liegt der Vorteil auch wieder darin, dass man direkt auf die Benachrichtigung reagieren kann.

Es lassen sich übrigens nicht nur SMS oder Mails im Benachrichtigungszentrum von Apples iOS 5 anzeigen, sondern z.B. auch Wetterinfos, Aktien, etc.. Sicher eine gute Idee und eine wichtige Neuerung des Softwareupdates von Apple.

iMessage

iMessage von Apple beschreibt nicht etwa nur die normale, gewohnte SMS-Funktion von iOS. Nein! Apple hat hier eine Funktion im Nachrichten-App in iOS 5 integriert, welches es dem Benutzer ermöglicht mit anderen Usern, die ein iPhone oder iPad mit Wi-Fi oder 3G nutzen zu kommunizieren. Hier kann man Nachrichten direkt und lt. Apple kostenfrei austauschen, Bilder und Videos versenden und direkt sehen, wenn der “Chat-Partner” etwas schreibt.

Anhand der Beschreibung merkt man schon, dass es sich bei iMessage nicht um das eigentliche Versenden von SMS dreht, sondern dass diese Funktion eher als eine Art Chat fungiert.

Zeitungskiosk

Apple bringt nun neben Büchern auch Zeitschriften auf´s iPhone / iPad. Wie in einem Kiosk werden hier die abonnierten Zeitungen mit den neuesten Covern in einem virtuellen Zeitungsregal zur Verfügung gestellt und automatisch aus dem Zeitungskiosk im AppStore aktualisiert. Man hat hier quasi das Gefühl, als würden die bestellten Zeitungen nach Hause geliefert.

Benötigt man das wirklich? Lesen auf dem iPhone / iPad? – Das war sicherlich schon die große Frage bei den ersten verfügbaren eBooks für die mobilen Endgeräte… Die Meinung kann sich denke ich hier jeder selbst bilden.

Erinnerungen

An dieser Stelle mal ein echt dickes Lob an Apple. Diese Merklisten, die Apple im iOS 5 integriert hat sind echt einfache Klasse, wenn sie wirklich so funktionieren, wie Apple es angibt. Man kann auf diesen Listen, wie man es schon von Notizen-Apps o.ä. kennt gewisse Ereignisse oder auch TO-DOs bzw. Einkaufslisten anlegen. Diese lassen sich mit dem iCal, Outlook und natürlich dem neuen iCloud synchronisieren.

Der eigentliche Clou aber an dieser Funktion ist, dass Erinnerungen ortsbezogen gespeichert werden können. Das bedeutet, dass man dann an ein Ereignis erinnert wird, wenn man sich dem Ort des “Geschehens” nähert. Sprich man möchte Butter kaufen und nähert sich dem Supermakrt, so wird man daran erinnert. Echt genial!

Safari

Der Safari kommt nun mit zwei neuen Funktionen daher. Man kann nun mit dem sog. Safari-Reader Text von einer Webseite ohne Werbung darstellen lassen und diese in Ruhe lesen. Sprich Bilder, Werbeanzeigen, etc. werden entfernt. Diese Texte kann man dann, wenn man will auch in einer Leseliste für späteres Lesen speichern.

PC Free

iPad, iPhone und iPod müssen nicht mehr über den PC registriert oder aktualisiert werden, dies geht jetzt drahtlos. Nimmt aber vermutlich etwas mehr Zeit in Anspruch. Backups lassen sich auch drahtlos über die iCloud erstellen.

Das waren soweit die größten Neuerungen, die es hier nochmals genau auf der Homepage von Apple zum Nachlesen gibt. Diese Seite war auch die Quelle für die oben genannten Funktionen. Wisst ihr mehr über iOS 5? Habt ihr Erfahrungen damit? Wie ist eure Meinung dazu? Postet einfach eure Kommentare untem im Formular…

Das Auspacken

Sicherlich ein Pluspunkt zum iPhone wird direkt beim Auspacken des auf Android basiertem LG Optimus Black ersichtlich: Das LG besitzt einen Rückdeckel, den man öffnen kann. Wo ist da der Vorteil? – Ganz einfach, man kann den Akku entnehmen und bei Bedarf, z.B. beim Defekt auch leicht austauschen. Unter der Abdeckung befindet sich neben dem Akku auch noch der Platz für die SIM-Karte und ein Einschub für eine microSD. Die microSD zeigt einem direkt den nächsten Vorteil, nämlich den erweiterbaren Speicher.

Anmerkung: Das LG Optimus Black unterstützt neben den “normalen” microSD Karten auch die microSDHC Karten, die einen schnelleren Zugriff auf Daten und Medien ermöglichen. Dies habe ich beim meinem Optimus Black auch schon mit einer 16gb SDHC Karte mit Erfolg getestet. Laut Hersteller LG unterstützt das Optimus Black hier bis zu 32gb.

Die Handhabung

Wie sieht es mit der Bedienung und Menüführung aus? – Das LG Optimus Black verfügt über den sogennanten G-Key, den man nutzen kann, aber natürlich nicht muss. Der G-Key ermöglicht es z.B. Anrufe mit einer einzelnen Bewegung des SmartPhones anzunehmen oder Anwendungen wörtlich im Handumdrehen zu wechseln. Auch das Scrollen zwischen Fotos ist mit dem G-Key im Handumdrehen möglich.

Weiter verfügt das LG natürlich über die fast schon für Android typischen Hotkeys. Hierbei handelt es sich um vier Tasten unter dem Touchdisplay. Hier findet man an erster Stelle eine Taste, mit der man gewissen Programmbezogene Optionen öffnen kann, wie z.B. Einstellungen, Hinzufügen, Beenden, etc.. Direkt daneben befindet sich die “Home”-Taste mit der man in jeder Situation auf den Home-Bildschirm kommt. An dritter Stelle der “Zurück”-Button, dieser ist wohl selbsterklärend. Beispielsweise dient er in der Nutzung des Browsers dazu eine Seite zurück zu springen. An letzter Stelle hat man nun noch eine Taste, die zu einer Google-Suche führt, klar Android = Google.

Die Taste, die zum Home-Bildschirm führt, führt natürlich zu dem von euch als Home-Bildschirm bestimmten Bildschirm. Hä? Genau, klingt kompliziert, ist es aber nicht! Es bedeutet ganz einfach, dass man nicht einfach nur einen Bildschirm (außerhalb des Menüs) auf dem LG hat, sondern beliebig viele Bildschirme (“Desktops”) anlegen kann. Das bietet u.a. den Vorteil, dass man auf jedem Bildschirm Shortcuts ablegen kann, die zu Apps einer bestimmten Kategorie gehören. Beispielsweise einen Bildschirm für Musik- und Video-Apps, einen für Business-Apps und einen für Spiele. Nun kann man den Bildschirm, den man oft benötigt als Home-Bildschirm deklarieren. Perfekt oder?

Vielleicht am Anfang ein bisschen gewöhnungsbedürftig, wenn man ein iPhone gewohnt ist, ist die Anwendungsübersicht. Diese ist standardmäßig so eingerichtet, dass alle Anwendungen untereinander stehen und nicht auf eigenen Bildschirmen, die sich mit dem Finger nach links und rechts druchscrollen können. Aber keine Angst! Auch das kann man umstellen, so dass man wieder die gewohnte iPhone-Ansicht hat.

Sicherlich eine super Sache sind die “Hotkeys” am oberen Rand des Displays. Bevor ihr jetzt anfangt über dem Display die Keys zu suchen, da sind keine… Ihr müsst hier den Finger auf die Zeile legen, in der auch der Akkustand und der Empfang angezeigt werden und dann nach unten ziehen und siehe da.. Einige Hotkeys für Stummschaltung, WLan, GPS uvm.. Auch wenn ihr neue Nachrichten habt, werden diese hier angezeigt und euer zuletzt gehörter Song ist hier auch noch zu sehen und ihr könnt diesen dort direkt starten bzw. zum vorherigen oder nächsten Titel schalten. Super Sache!

Mail, Kalender und Kontakte

Hier ist es von großem Vorteil, wenn man ein Google-Mail /- Kalender / – Kontakte Konto hat, wie ich. Denn hier gibt man lediglich einmalig in den Einstellungen seine Zugangsdaten ein, wartet die Einrichtung über Internet ab und schon hat man alle seine im Google-Konto gespeicherten Kontakte, Termine und die letzten Mails auf seinem LG Optimus Black. Eine Einrichtung von anderen Mail-, Kontakte, Kalender-Konten habe ich noch nicht getestet, da ich wie gesagt ein Google-Konto nutze. Wenn hier jemand Erfahrungen hat und weiß, wie einfach oder auch nicht einfach das geht, schreibt bitte einfach einen Kommentar.

Fazit

Ich habe vor dem LG Optimus Black das iPhone 3Gs genutzt und muss sagen, dass es schon eine relativ große Umstellung war, zumal sich das LG in der Bearbeitung beim ersten Mal, wenn man es in der Hand hält wie Spielzeug anfühlt. Aber ich würde das LG Optimus Black aktuell nicht mehr eintauschen wollen. Ich bin damit super zufrieden und habe bislang keine größeren Probleme gehabt. Klar hat sich das SmartPhone ein paar Mal aufgehangen, aber das kommt auch beim iPhone vor. Ich kann das LG nur weiter empfehlen. Auch die Kamera ist super. Videos in HD, 5 Megapixel hinten, 2 Megapixel vorne, also alles in allem ein super Teil, das von der Bedienung, wenn man es mal raus hat auch sehr ansprechend und übersichtlich ist. Großer Vorteil wie gesagt die Synchornisation mit den Google-Konten, wenn man denn welche besitzt.

Nun freue ich mich noch auf eure Erfahrungen und Meinungen zum LG P970 Optimus Black. Also fleißig Kommentare posten!