Sicher sind Kreativität, Design und Benutzung dieser Produkte durchaus revolutionär und der frühere Apple-Slogan ”Think different.” hat hier definitiv seine Gültigkeit. Aber lässt sich der Gedanke des ”Freien Internet” oder allgemein der Benutzerfreiheit hinsichtlich der Wahl von Anwendungen und Informationen mit den Restriktionen durch Apple noch vereinbaren?

Apple kontrolliert das Programm, was auf den Geräten läuft und was nicht. Oder anders gesagt, der Nutzer sieht, was er sehen darf und er bekommt, was in die Apple-Philosophie passt. Das ZDF berichtet in einem interessanten Beitrag über die Großmacht Apple: http://www.zdf.de/ZDFmediathek/beitrag/video/1055960/Grossmacht-Apple?setTime=2#/beitrag/video/1055960/Grossmacht-Apple

Was das für die Informationsfreiheit respektive der freien Nutzung des Internets im Allgemeinen bedeutet, darf natürlich jeder für sich entscheiden. Hier bleibt allerdings zu hoffen, dass sich die Nutzer überhaupt darüber Gedanken machen und es einer persönlichen Entscheidung bedarf.

Für Dienstleister aus den Bereichen Internet und Online-Medien sowie insbesondere auch für die Gestaltung von Websites bedeuten iPhone und iPad ein weiteres in Massen auftretendes neues Medium, für welches es die Ausgabe der Webseiteninhalte zu optimieren gilt. Das gilt natürlich nicht allein deswegen, weil sich die Welt zur Zeit um Apple dreht, sondern insbesondere weil die Nutzungsrate des mobilen Internets längst dabei ist, die Zahl der klassischen Nutzer zu hause am stationären PC einzuholen.

Damit der Internetnutzer beispielsweise Webseiten auf dem neu erschienen iPad vernünftig nutzen kann, sollten folgende Punkte bedacht werden:

• Das Webseitenformat sollte sich innerhalb eines Rasters von 768 x 1024 Pixel bewegen.
• Vergessen Sie Flash! Der iPad unterstützt ebenso wie das iPhone keine Flash-Inhalte.
• Die Website muss ordentlich im Safari laufen, dem Webbrowser von Apple.

Allgemein gilt für mobile Inhalte:

• Die Website muss in wenigen Sekunden alle Inhalte laden. Die Bandbreite von UMTS ist deutlich geringer als DSL und abhängig vom Standort des Nutzers.
• Navigationselemente sollten gut erreichbar und groß genug sein, um mit dem Finger aktiviert werden zu können. Im besten Fall können sich Elemente mit dem Finger über den Bildschirm ziehen lassen.
• Inhalte sollten sich groß zoomen lassen, ohne das Formatierung und Layout verloren gehen.
• Im Idealfall lässt sich die Website komplett herunterladen und offline nutzen, also auch, wenn die mobile Internetverbindung kurzzeitig unterbrochen ist.

Mittlerweile gibt es bereits zahlreiche nützliche Werkzeuge, Tools und Erweiterungen, die sich speziell mit der Website-Optimierung für Mobile Endgeräte befassen. Eine gerade aktuell erschienene Extension für Typo3 ermöglicht beispielsweise die einfache Ausgabenanpassung von Websites für das iPhone. Die Extension der Aachener Internetagentur team in medias findet sich im Typo3 Repository unter: http://typo3.org/extensions/repository/view/t3m_iphoneweb/current/ . Ausprobieren lohnenswert!

Die Richtung ist klar:
Apple rules!? Und möglicherweise trifft statt dem ”Think different.” die Aussage ”Think like us.” tatsächlich eher den Tenor der aktuellen mobilen Revolution. So oder so ist aber eines Fakt – Webinhalte werden mehr und mehr mobil genutzt. Und mit dem neuen iPad von Apple kommen eben allein in diesem Jahr ein paar Millionen mobile Internetnutzer dazu. Und zwar on top zu vermutlich 40 Millionen weiteren verkauften iPhones bis Ende 2010.

Für einen Kunden bestand die Aufgabe darin, abhängig von Begriffen in der URL (Keywords bei URL-Rewriting) eine passende Twitter-Liste der aktuellsten Tweets automatisch anzeigen zu lassen. Also musste ein kleines FE-Plugin her, über das mehrere Twitter-Widgets anlegbar und jeweils mit zugehörigen Keywords bestückbar waren. Das Ergebnis ist recht simple, aber ausreichend effektiv ausgefallen und heißt nun DK Twitter[at]Sense .

Wer es einfach mal ausprobieren möchte, kann sich gern die kleine Twitter-Extension hier herunterladen . Über ein kleines Feedback würde ich mich natürlich wie immer freuen. Nutzung auch wie immer auf eigene Gefahr.

Und noch kurz eine Kurzanleitung:

1. Plugin installieren  
2. SysFolder anlegen und dort als neuen Datensatz ein oder mehrere Twitter-Widgets hinzufügen - Formularfelder sind im Grunde selbsterklärend. Die Keywords einfach kommagetrennt angeben. Diese müssen natürlich in der URL der jeweilgen Seite auch auftauchen, also z.B. wie hier bei  profil-design-keller.html  mit den Keyowrds 'profil,keller'.
3. Auf einer beliebigen Seite das Plugin einfügen und als Ausgangspunkt den Ordner mit den Widget-Datensätzen auswählen
4. Typoscript gibt es keins, CSS einfach nach belieben anpassen. Fertig!

Da im Normalfall die Bilder für eine Website bereits für die Darstellung im Web optimiert wurden, ist es sinnvoll, die Bildqualität auch für die automatische Bildberechnung in Typo3 möglichst optimal zuhalten, d.h. ohne weitere Verluste.

Typo3 greift im Regelfall auf die Grafikbibliothek gdlib zu, um z.B. Bilder zu skalieren. Folgende Zeilen in der localconf.php schaffen Abhilfe und verbessern deutlich die Qualität der durch Typo3 berechneten Bilder:

$TYPO3_CONF_VARS['GFX']['im_stripProfileCommand'] = '';
$TYPO3_CONF_VARS['GFX']['gdlib_png'] = '1';
$TYPO3_CONF_VARS['GFX']['png_truecolor'] = '1';
$TYPO3_CONF_VARS['GFX']['jpg_quality'] = '100'; // keine weitere Komprimierung, d.h. JPEGs mit 100%-Qualität ausgeben
$TYPO3_CONF_VARS['GFX']['im_imvMaskState'] = '1';

Als erstes definieren wir uns ein neues Rahmen-Element mit der Bezeichnung 'Bildergalerie / Fotostrecke'. Dazu einfach im TyoscriptConfig der Seite (Page TSCONFIG) folgende Zeile einfügen:

1. # neues Element  
TCEFORM.tt_content.section_frame { addItems.104 = Bildergalerie / Fotostrecke }

Im Typoscript der Website definieren wir einen neuen Wrap für diesen Rahmen-Typ:

2. # Rahmentyp 104 definieren
tt_content.stdWrap.innerWrap.cObject = CASE
tt_content.stdWrap.innerWrap.cObject {
  key.field = section_frame
  104 = TEXT
  104.value = <div class="imagegallery" id="gallery{field:uid}"> | <script language="javascript" src="hier_pfad_zum_javascript-file/gallery.js"></script><script language="javascript"> writeGalleryViewLink('gallery{field:uid}'); </script></div>
  104.insertData = 1
}

3. # etwas Javascript und CSS
Das Javascript baut uns den Link unterhalb der Fotostrecke und liest dazu einfach den ersten von der Lightbox/Shadowbox-Extension erzeugten rel-Link aus. Das CSS formatiert uns den Image-Container mit fester Breite und Höhe so, dass überlaufende Bilder einfach ausgeblendet werden. Breite und Höhe des Containers lassen sich flexibel im CSS anpassen, je nach gewünschter Größe der Fotostrecke. 

4. # Inhaltselement Text/Bild anlegen
Nun einfach noch auf der gewünschten Seite ein Inhaltselement vom Typ 'Text mit Bild' einfügen, Bilder hinzufügen, Höhe der Bilder (=Fotostrecke) angeben und den Haken bei 'Klick vergrößern' setzen. Fertig!

Hier nun noch die Beispieldateien für CSS und Javascript zum herunterladen:

• gallery.css
• gallery.js

Viel Spaß beim Ausprobieren und Verwenden. Bei Fragen einfach fragen. 

tt_content.stdWrap.innerWrap >

Lösung: Die Extension "Simulate Static URL" einfach im Extension Manager deinstallieren und alles läuft wieder. Wenn man die Erweiterung zuvor nicht benötigt hat, dann benötigt man sie nach dem Update auch nicht.

Die Blog-Extension für Typo3 von snowflake erfüllt seinen Zweck als Blog-System für die meisten Typo3-Websites eigentlich ziemlich gut. Trotz zahlreicher notwendiger Anpassungen und Typoscript-Fummeleien, bekommt man das Blogsystem sogar ziemlich komfortabel in eine bestehende Typo3-Website integriert. In diesem Sinne eine Dankeschön an die Macher von snowflake.

Dennoch gibt es hier und da kleine Problemchen, beispielsweise auch mit dem RSS-Widget. Zwei Punkte fallen sofort auf, sobald einige Beiträge angelgt und kategorisiert sind:

1. Die Ausgabe der Beitragsinhalte ist nicht 100% valide und führt bei RSS-Readern zu fehlerhafter oder ausbleibender Darstellung.
2. Die Zuordnung eines Beitrags zu seinen Kategorien wird nicht korrekt ausgegeben.

Beides lässt sich leider nicht ohne einen Eingriff in den Code des Widgets beheben. Punkt 1 ist relativ einfach zu beheben mittels der Ausgabe des Inhalts als CDATA-Elemente.

Für Punkt 2 muss die Methode 'getPostCategories' angepasst werden. Die ursprüngliche Methode fragt die zugeordneten Kategorien aus dem Feld 'catname' direkt in der Tabelle der Post-Einträge ab. Leider handelt es sich aber bei den Kategorien und Posts um eine n:m-Beziehung, die über 3 Tabellen abgebildet wird (tx_t3blog_cat, tx_t3blog_post, tx_t3blog_post_cat_mm). Ergo: Man erhält eine falsche Kategorie-Zuordnung im RSS-Feed. Also muss das SQL-Statement entsprechend angepasst werden.

Wer sich die Mühe sparen will, das selber hinzufummeln, der kann sich gerne die korrigierte PHP-Klasse zu diesem Widget hier runterladen . Design Keller übernimmt keinerlei Garantie oder Haftung bei Verwendung dieser Datei, aber in den bisher eingesetzten Typo3-Projekten funktioniert diese Klasse einwandfrei.

Lösung: Die class.rss.php hier runterladen und entsprechende Datei im Verzeichnis '.../typo3conf/ext/t3blog/pi1/widgets/rss/' ersetzen. Ob alles valide ist, lässt sich recht leicht über den W3C-Feed-Validator prüfen. Viel Erfolg und frohes Bloggen!

#im TSconfig des Benutzers
TCAdefaults.pages.l18n_cfg = 2

Soweit, so gut. Nicht übersetzte Seiten werden nun in der Navigation ausgeblendet. Was aber, wenn ich gerade auf einer Seite bin (z.B. in deutscher Sprache), zu der es keine Übersetzung gibt (z.B. keine englische Übersetzung). Der Sprachumschalter wird normalerweise trotzdem angezeigt, führt bei einem Klick aber ins Nirvana.

Hierfür gibt es eine einfache Abhilfe, indem man den Seitenwert 'l18n_cfg' abfragt. Dieser hat den Wert 2, sofern der Haken bei oben genannter Option gesetzt ist. Wenn der Wert=2 ist, dann braucht man die Sprachauswahl für die nicht übersetzte Sprache auch nicht anzeigen. Hier ein einfaches Beispiel dazu:  

# Sprachmenü Beispiel deutsch/englsich - Std.Sprache ist deutsch (L=0=de, L=1=uk)
temp.nav.language = COA
temp.nav.language.1 = TEXT
temp.nav.language.1 {
        value = <img src="inc_files/glh/gfx/flags/flag_uk.gif" alt="English" title="English" border="0" /> 
        typolink.parameter.data = page:uid
        typolink.additionalParams = &L=1
}
# bei englischer Sprache die deutsche Flagge anzeigen
[globalVar = GP:L=1]
temp.nav.language.1 {
        value = <img src="inc_files/glh/gfx/flags/flag_de.gif" alt="Deutsch" title="Deutsch" border="0" /> 
        typolink.parameter.data = page:uid
        typolink.additionalParams = &L=0
}
[global]

Jetzt für die aktuell besuchte Seite prüfen, ob es überhaupt eine Übersetzung gibt. Falls nicht (Wert l18n_cfg ist 2), dann fliegt der Sprachlink für diese Seite raus.

# im TSconfig der Spracheinstellungen
[globalVar = TSFE:page|l18n_cfg = 2]
temp.nav.language.1.value =  
temp.nav.language.1.typolink.parameter >
[global]

That´s it!

Es funktioniert nur wirklich sinnvoll bei zweisprachigen Seiten, da es sich um eine Entweder-Oder-Lösung handelt. Bei mehreren Sprachen würde es sonst konsequent heißen, wenn es die Seite nicht auf italienisch gibt, dann bieten wir sie auch nicht für englisch an.

/* Navigationsebene 2, nicht aktiv */
temp.nav2.1.wrap = <ul> | </ul>

/* IF-Condition treeLevel - Navigationsebene 2, aktiv mit class-Attribute  */
[treeLevel = 2,3,4,5]
temp.nav2.1.wrap = <ul class="current"> | </ul>
[global]

RealURL installieren, RewriteEngine des Webservers per .htaccess einschalten und die Konfigurationsangaben einfach in die localconf.php einfügen:

$TYPO3_CONF_VARS['EXTCONF']['realurl']['_DEFAULT'] =
array(
 /*** Caching ein- oder ausschalten ***/
 'init' => array(
        'enableCHashCache' => 1,
        'enableUrlDecodeCache' => 1,
        'enableUrlEncodeHash' => 1,
    ),
  /*** Angabe von GET-Parametern, z.B. fuer die Spracheinstellung ***/  
 'preVars' => array(
     array('GETvar' => 'L','valueMap' => array('de' => '0', 'en' => '1', 'fr' => '2', 'it' => '3', 'es' => '4'), 'noMatch' => 'bypass'),
     array('GETvar' => 'no_cache','valueMap' => array('no_cache' => 1,),'noMatch' => 'bypass',),
     ),
 /*** weitere Einstellungen fuer Seitenpfade, z.B. wie Leerzeichen zu handhaben sind oder Pfade gecacht werden sollen in der DB ***/
 'pagePath' => array('type' => 'user',
      'userFunc' => 'EXT:realurl/class.tx_realurl_advanced.php:&tx_realurl_advanced->main',
      'spaceCharacter' => '-',
      'languageGetVar' => 'L',
      'expireDays' => 3,
      'disablePathCache' => '1',
  ),
 /*** Aussehen der Dateinamen für die verschiedenen PageTypes ***/
 'fileName' => array (
    'defaultToHTMLsuffixOnPrev' => 1,
    'index' => array(
         'index.html' => array('keyValues' => array ('type' => 1,),),
         'print.html' => array('keyValues' => array( 'type' => 98),),
         'rss.xml'   => array('keyValues' => array ('type' => 100,),),
     ),
  ),
  /*** Einstellungen fuer T3Blog, falls vorhanden ***/
  'postVarSets' => array(
   '_DEFAULT' => array (
      'beitrag' => array(
        array(
          'GETvar' => 'tx_t3blog_pi1[blogList][showUid]',
          'lookUpTable' => array(
            'table' => 'tx_t3blog_post',
            'id_field' => 'uid',
            'alias_field' => 'title',
            'addWhereClause' => ' AND NOT deleted',
            'useUniqueCache' => 1,
            'useUniqueCache_conf' => array(
              'strtolower' => 1,
              'spaceCharacter' => '-',
            ),
            'languageGetVar' => 'L',
            'languageExceptionUids' => '',
            'languageField' => 'sys_language_uid',
            'transOrigPointerField' => 'l18n_parent',
            'autoUpdate' => 1,
            'expireDays' => 180,
          ),
        ),
      ),
      'kategorie' => array(
        array(
          'GETvar' => 'tx_t3blog_pi1[blogList][category]',         
          'lookUpTable' => array(
            'table' => 'tx_t3blog_cat',
            'id_field' => 'uid',
            'alias_field' => 'catname',
            'addWhereClause' => ' AND NOT deleted',
            'useUniqueCache' => 1,
            'useUniqueCache_conf' => array(
              'strtolower' => 1,
              'spaceCharacter' => '-',
            ),
            'languageGetVar' => 'L',
            'languageExceptionUids' => '',
            'languageField' => 'sys_language_uid',
            'transOrigPointerField' => 'l18n_parent',
            'autoUpdate' => 1,
            'expireDays' => 180,
          ),
        ),
      ),
      'kommentar' => array(
        array(
          'GETvar' => 'tx_t3blog_pi1[blogList][insert]',
        ),
        array(
          'GETvar' => 'tx_t3blog_pi1[blogList][uid]',
        ),
      ),
      'tag' => array(
        array(
          'GETvar' => 'tx_t3blog_pi1[blogList][tags]',
        ),
      ),
      'autor' => array(
        array(
          'GETvar' => 'tx_t3blog_pi1[blogList][author]',         
          'lookUpTable' => array(
            'table' => 'be_users',
            'id_field' => 'uid',
            'alias_field' => 'realName',
            'addWhereClause' => ' AND NOT deleted',
            'useUniqueCache' => 1,
            'useUniqueCache_conf' => array(
              'strtolower' => 1,
              'spaceCharacter' => '-',
            ),
            'autoUpdate' => 1,
            'expireDays' => 180,
          ),
        ),
      ),
      'suche' => array(
        array(
          'GETvar' => 'tx_t3blog_pi1[tstmp]',  
        ),
      ),
      'zeitraum' => array(
        array(
          'GETvar' => 'tx_t3blog_pi1[blogList][datefrom]',
        ),
        array(
          'GETvar' => 'tx_t3blog_pi1[blogList][dateto]',
        ),
      ),
      'zeit' => array(
        array(
          'GETvar' => 'tx_t3blog_pi1[blogList][year]',
        ),
        array(
          'GETvar' => 'tx_t3blog_pi1[blogList][month]',
        ),
        array(
          'GETvar' => 'tx_t3blog_pi1[blogList][day]',
        ),
      ),
      'seite' => array(
        array(
          'GETvar' => 'tx_t3blog_post_pointer',
        ),
      ),
      'trackback' => array(
        array(
          'GETvar' => 'tx_t3blog_pi1[trackback]',
        ),
      ),
    ),
 ),
 'fixedPostVars' => array(
  ),
);

• Datei-Upload erlauben im Editor
• Ordnererstellung erlauben im Editor
• Navigationstitel anstatt des Seitentitel im Seitenbaum des Typo3-Backends
• das Löschen des Seitencache erlauben

In selber Reihenfolge die entsprechenden Config-Einstellungen:

• options.uploadFieldsInTopOfEB = 1
• options.createFoldersInEB = 1
• options.pageTree.showNavTitle = 1
• options.clearCache.pages = 1

Am einfachsten sind diese Einstellungen in den Optionen der zugehörigen Benutzergruppe anzugeben.

Die alte Website der Kita Regenbogen in Eiche wurde etwas aufgemotzt und ermöglicht jetzt allen Mitarbeitern, Eltern und Kindern ganz aktiv am Kita-Geschehen online unter www.kita-regenbogen-eiche.de teilzunehmen.

Auf Grund einer sehr netten Anfrage eines Elternteils, hat sich Design Keller hier gern bereit erklärt, das Ganze zu übernehmen. Der beliebte Wordpress-Blog bot sich hierfür geradezu an, wie so oft. Allen nun viel Spaß beim fröhlichen Bloggen!

config.disablePrefixComment = true

Saubere Header/Überschriften:

lib.stdheader {
    10.1.fontTag = <h1>|</h1>
    10.2.fontTag = <h3>|</h3>
    10.3.fontTag = <h3>|</h3>
    10.4.fontTag = <h4>|</h4>
    10.5.fontTag = <h5>|</h5>
    stdWrap.dataWrap = |
}

Korrekte XHTML-Deklaration:

config.htmlTag_langKey = de
config.xhtml_cleaning = all
config.doctype = xhtml_trans
config.doctypeSwitch = 1

Mit doctypeSwitch erfolgt die Angabe <?xml ... erst nach der DOCTYPE-Dekleration. Dadurch werden mögliche Darstellungsfehler im IE vermieden.

Javascript und CSS auslagern:

config.removeDefaultJS = 1 oder external
config.inlineStyle2TempFile = 1

Mehr zum Thema und zur Header-Konfiguration ist in der Mittwald TypoScript-Referenz unter http://www.typo3.net/tsref/setup/config/ zu finden.

}

############################################################
# *** EBENE 2 ***
temp.main_nav.2 = TMENU
temp.main_nav.2 {
 wrap = <ul class="level1"> | </ul></li>

      NO {
          allWrap =  <li> | </li>
          10 = TEXT
          10.text.field = navtitle
       }

      ACT = 1
     ACT {
      allWrap = <li class="current"> | </li>
      10 = TEXT
          10.text.field = navtitle
     }
}
  
temp.main_nav.wrap = <ul class="level0"> | </ul>

####BREADCRUMB###
temp.breadcrumb = HMENU
temp.breadcrumb {
 special = rootline
 special.range = 0|-1
 1 = TMENU
 1.noBlur = 1
 1.wrap = | 
 1.NO.ATagTitle.field = title
 1.NO.allWrap = |*| | »  |*||
 1.CUR.allWrap = |*| | »  |*||
 1.CUR = 1
 1.CUR.linkWrap = <span class="current" title="Sie befinden sich hier"> | </span>
}
temp.breadcrumb.wrap = Sie sind hier:  |

plugin.xy_pi1 {
     theObject {
           _LOCAL_LANG.default.LbaleName= Ich heiße jetzt anders!
     }
}

Ein Beispiel für die Extension T3Blog:

plugin.tx_t3blog_pi1 {
   rss {
      _LOCAL_LANG.default.rss_click_here = Ich klicke aber nicht!
   }
}