Roxen CMS
 
 
Background picture
Background picture
Uni from A-Z
Universität Bielefeld > University > Faculties and Departments > Pressestelle > Informations-Management > Roxen CMS
  

Anpassung der Internet-Seiten an mobile Endgeräte

Die Internet-Seiten der Universität Bielefeld werden vermehrt mit mobilen Endgeräten wie iPhone, iPad oder so genannten Smartphones aufgerufen. Allerdings ließen sich die Seiten auf den kleinen Bildschirmen nur schlecht erkennen. Allzu mühevoll war das Verkleinern und Vergrößern der Seitenelemente.

Über so genannte "Media Queries" hat das Informationsmanagement nun das Angebot in der Weise optimiert, dass vorab die Größe des Gerätes ermittelt und die Darstellung an die kleinen Displays angepasst wird. Dadurch lassen sich Texte auch mobil besser lesen und Seitenelemente passen sich in Höhe und Breite an die jeweiligen Auflösungen an. Die Internet-Seiten müssen dafür inhaltlich nicht verändert werden, die Steuerung erfolgt über modifizierte css-Stylesheet-Dateien.

Zunächst wurden die Hauptseiten unter www.uni-bielefeld.de umgestellt, das Informationsmanagement wird aber auch die Fakultäten und Einrichtungen beim Einsatz dieser Technologie unterstützen und weitere Seiten anpassen.

 

Anleitung zur Nutzung auf eigenen Seiten



Im Prinzip spricht man verschiedene Stylesheets je nach Auflösung an. Smartphone und iPhone bis zu einer Größe von 399px, das iPad und andere Tablets mit einer Größe zwischen 400px und 769px, alle Monitordarstellungen ab 770px. Eine Verkleinerung auf dem PC oder Mac-Monitor bringt keinen Effekt und ist nicht gewünscht. Dazu nutzt man folgende "Weichen":








<meta name="viewport" content="user-scalable=yes, width=device-width" />
<link rel="stylesheet" type="text/css" href="/css/media_queries/smartphone.css" media="only screen and (max-device-width: 399px)" />
<link rel="stylesheet" type="text/css" href="/css/media_queries/ipad_uni.css" media="only screen and (min-width: 400px) and (max-device-width: 769px)" />
<link rel="stylesheet" type="text/css" href="/css/unistandard_2009.css" media="screen and (min-device-width: 770px)" />


Pfeil Eine sehr empfehlenswerte Anleitung zu den so genannten "responsiven Webseiten" bzw. Media Queries findet sich hier: http://m.onblog.at/responsives-webdesign-1

 

Änderung des eigenen Templates in Roxen

Passen Sie die Pfade zu den css-Dateien an, sofern Sie ein eigenes CSS nutzen. Laden Sie sich dazu folgende Dateien herunter und modifizieren Sie die Farbangaben entsprechend Ihres css:
smartphone.css
ipad_uni.css
(Abspeichern mit rechter Maustaste: "Ziel speichern unter...")

Folgendes in den head einfügen:

<xsl:template mode="unibi:head" match="dummy">
<xsl:apply-imports/>

<!-- hier einfuegen in das eigene Template -->

<meta name="viewport" content="user-scalable=yes, width=device-width" />
<link rel="stylesheet" type="text/css" href="/css/media_queries/smartphone.css" media="only screen and (max-device-width: 399px)" />
<link rel="stylesheet" type="text/css" href="/css/media_queries/ipad_uni.css" media="only screen and (min-width: 400px) and (max-device-width: 769px)" />
<link rel="stylesheet" type="text/css" href="/css/unistandard_2009.css" media="screen and (min-device-width: 770px)" />

<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript" src="/javascript/iphone.js"></script>


<!-- Ende Media Queries -->


</xsl:template>

 

<!-- Ende Media Queries -->


Im Content-Bereich folgendes einstellen:
(dadurch wird das linke Seitenmenü oberhalb des Contents der Seite eingefügt. Über einen Umschalten kann der Nutzer dann per Touch-Geste das Menü aus- oder einblenden. Passen Sie die Menü-Dateinamen entsprechend ihrer Bezeichnungen an.)

<!-- Content -->

<!-- <div id="tiler_green"></div> -->
<div id="contentwide">
<div id="contenthauptspalte">

 

<!-- das obere Menue bei MediaQuerie-Seiten -->

<div id="container_media">
<div id="header">

<if exists='sub.menu'>
<div class="leftButton" onclick="toggleMenu()">Navigation</div><span class="footer">Button dr&uuml;cken zum Ein- und Ausklappen<!--Push button to fold and unfold--></span>
</if>
<else>
&nbsp;
</else>

<div id="utility">
<xsl:call-template name="unibi:navmenu_media"/>

<xsl:call-template name="pus:menu-left">
<xsl:with-param name="menu-left-file" select="$left-menu-file"/></xsl:call-template><br/>

<if exists='left2.menu'>
<!-- <h1 style="border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #b3c834; padding-top:0px; padding-bottom:4px; margin-top:-3px;">
<gtext font="Fagopro" fontsize="15" fgcolor="#000000" split='split'><insert file="left2_titel.txt"/> </gtext></h1> -->
<xsl:call-template name="pus:menu-left2">
<xsl:with-param name="menu-left-file2" select="$left-menu-file2"/></xsl:call-template><br/>
</if>
<else>
&nbsp;
</else>

<if exists='left3.menu'>
<!-- <h1 style="border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #b3c834; padding-top:0px; padding-bottom:4px; margin-top:-3px;">
<gtext font="Fagopro" fontsize="15" fgcolor="#000000" split='split'><insert file="left3_titel.txt"/> </gtext></h1> -->
<xsl:call-template name="pus:menu-left3">
<xsl:with-param name="menu-left-file3" select="$left-menu-file3"/></xsl:call-template><br/>
</if>
<else>
&nbsp;
</else>

 

<if exists='left4.menu'>
<!-- <h1 style="border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #b3c834; padding-top:0px; padding-bottom:4px; margin-top:-3px;">
<gtext font="Fagopro" fontsize="15" fgcolor="#000000" split='split'><insert file="left4_titel.txt"/> </gtext></h1> -->
<xsl:call-template name="pus:menu-left4">
<xsl:with-param name="menu-left-file4" select="$left-menu-file4"/></xsl:call-template><br/>
</if>
<else>
&nbsp;
</else>

</div>


</div></div>

<!--- Ende Media Queries -->


<xsl:apply-templates/></div><br/><br/>
<div id="fussstrich">&nbsp;</div>
<div id="fussmenu"><xsl:call-template name="fwg:footer"/><br/><br/></div>
</div>

...


wenn das Haupttemplate 'unistandard_2009.xsl' im eigenen Template zitiert wird, braucht es diese Angabe nicht, ansonsten einfügen:

<!-- oberer Menuepunkt für Smartphone und iPad Media -->

<xsl:template name="unibi:navmenu_media">
<xsl:variable select="substring-before(rxml:metadata()/path,
rxml:metadata()/filename)"
name="parent-dir"/>
<xsl:variable name="submenu-raw">
<xsl:if test="not($no-navbar-menu)">
<xsl:call-template name="unibi:get-menu"/>
</xsl:if>
</xsl:variable>
<xsl:variable name="submenu" select="rxml:node-set($submenu-raw)"/>
<xsl:variable select="rxml:metadata()/filename" name="filename"/>
<xsl:variable name="toptitle">
<xsl:choose>
<xsl:when test="$submenu//url[starts-with(., 'index.')]">
<xsl:value-of select="$submenu//mi[starts-with(url, 'index.')]/title"/>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="unibi:get-title"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:variable name="useTitle">
<xsl:call-template name="unibi:make-wrappable">
<xsl:with-param select="$toptitle" name="str"/>
</xsl:call-template>
</xsl:variable>
<xsl:choose>
<xsl:when test="not(starts-with($filename, 'index'))">

<!-- <img alt="->" border="0" hspace="0" src="/images/template_2009/menuponits_gray.gif"/> -->

<a href="{concat($parent-dir,$query)}" style="font-weight:normal; background-color: #f0f0f0;color: #333333; display: block; font-size: 16px; margin-bottom: -1px; margin-left: -10px; padding-top: 6px; padding-right: 10px; padding-bottom: 6px; padding-left: 10px; margin-left:1px; margin-right:11px; text-decoration: none;"><xsl:value-of select="$useTitle"/>
</a>
</xsl:when>
<xsl:otherwise><a href="{concat($parent-dir,$query)}" style="font-weight:bold; background-color: #f0f0f0;color: #333333; display: block; font-size: 16px; margin-bottom: -1px; margin-left: -10px; padding-top: 6px; padding-right: 10px; padding-bottom: 6px; padding-left: 10px; margin-left:1px; margin-right:11px; text-decoration: none;">

<!-- <img alt="->" border="0" hspace="0" src="/images/template_2009/pfeil_orange_12p.gif"/>&nbsp; -->
<xsl:value-of select="$useTitle"/>
</a>
<xsl:if test="count($toc-entries) > 1">
<br/><xsl:apply-templates select="$toc-entries" mode="unibi:tocneu"/>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
</xsl:template>