Top
Startseite / Mobile Websites Tipps&Tricks / Mobile Internet Websites selbst erstellen

Diesen Beitrag drucken Diesen Beitrag drucken

Mobile Internet Websites selbst erstellen

28. Mai 2008

Mobile Websites zu erstellen ist kein Hexenwerk. Wer bereits einmal selbst in HTML programmiert hat, ohne notwendigerweise nur einen HTML WYSWYG-Editor zu benutzen, der wird schnell feststellen, dass sich der Quellcode für mobile Websites nicht wesentlich von HTML-Code unterscheidet.

Da man am Besten am praktischen Beispiel lernt, habe ich hier einmal zwei mögliche Quellcodes für eine mobile Webseite aufgeführt, einmal in XHTML (Extended Hypertext Markup Language) und einmal in WML (Wireless Markup Language). Ich persönlich bevorzuge mittlerweile die XHTML-Variante.

 XHTML mobile Website:

<?xml version=“1.0″ encoding=“UTF-8″?>

<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml”>

  <head>

    <title>Mobile Site - Mobile Verzeichnis</title>

    <meta http-equiv=“Cache-Control” content=“max-age=60″ />

[...]

</head>

  <body>

<div class=“header“>

      <img src=“logo.gif” width=“112″ height=“50″ alt=„website.mobi” />

      <br />  <small>Startseite</small>

    </div> 

<div class=“content“>

 

        <a href=“http://www2.belboon.de/tracking/000065547/0.html” target=“_blank”>

        <img src=“http://www2.belboon.de/tracking/000065547.img” border=“0″ alt=“” /> </a>

 

        [<span class="accesskey">1</span>] <a href=“mobileshops.xhtml” accesskey=“1″>Mobile-Shops</a><br />

        Liste von Online-Shops mit einer mobile Version.<br />       

        [<span class="accesskey">2</span>] <a href=“contact.xhtml” accesskey=“2″>Impressum</a><br />

        Kontaktinformationen zum Websitebetreiber.<br />     

   </div>

</body>

</html>

 Anm.: accesskey=”x” im a href-TAG ist übrigens die Anweisung zum Aufruf des Links per (Handy-)Tastatur (Ziffernblock)

WML mobile Website: 

<?xml version=“1.0″ encoding=“ISO-8859-1″?>

<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN” “http://www.wapforum.org/DTD/wml_1.1.xml”>

 <wml>

<card id=“start“>

   <p>

      <b>Hauptmenu</b> <br/>

      <br/>

      Bitte waehlen:<br/>

      <a href=“shops.html”>Online-Shops</a> <br/>

      <a href=“portale.html”>Wap-Portale</a> <br/>

      <br/>

      <a href=“index.html”>Hauptmenu</a> <br/>

      <br />

      <a href=“http://www2.belboon.de/tracking/000065547/0.html” target=“_blank”>

      <img src=“http://www2.belboon.de/tracking/000065547.img” border=“0″ alt=“” /> </a>

      <br/>

      <a href=“http://www2.belboon.de/tracking/000064335/0.html” target=“_blank”>

      <img src=“http://www2.belboon.de/tracking/000064335.img” border=“0″ alt=“” /> </a>

   </p>

</card>

</wml>

 

Nachdem man die mobile Website ganz normal auf seinen Webserver oder Webspace hochgeladen hat (genauso wie normale Websites) ist man beinahe fertig. Die WML-Variante kann man sich i.d.R. einfach im Webbrowser ansehen. Für die XHTML-Variante benötigt man einen Mobile Emulator oder direkt ein Handy oder PDA.

readydotmobiresults1.gifEinen Mobile Emulator zum testen von Mobile Webseites findet man unter:
http://mtld.mobi/emulator.php

Besser aber noch ist der Emulator auf http://ready.mobi, denn hier kann man seine mobile Website direkt testen und erhält wertvolle Hinweise zur Fehlerbehebung.

Viele Hinweise zu den Code-Standards, die zu beachten sind und und viel Hintergrund-Wissen kann sich der geneigte Leser durch einfache Webrechere aneignen. Eine gute Ausgangsbasis ist hierfür die Website http://dev.mobi.

Und noch ein Hinweis zum Schluss:

Auf www.boxedart.com, einer Website für Templates ähnlich templatemonster.com sind vor wenigen Tagen erste grafische Mobile Templates erschienen. Aber auch auf dev.mobi findet man ein XHTML Mobile Template (kostenfrei), dass sich sehr gut als Ausgangsbasis für die ersten Schritte im mobilen Internet eignet.

Ähnliche Beiträge:

 Der Beitrag wurde am 28. Mai 2008 von Partnerprogramm.org veröffentlicht und wurde in der Rubrik Mobile Websites Tipps&Tricks abgelegt.
Gelesen: 157 · heute: 2 · zuletzt: 20. August 2008
Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen.
Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.
Diesen Beitrag drucken Diesen Beitrag drucken

Tags: , , , , , , , , , , , , ,

Kommentare


Einen Kommentar erstellen