Travel-Guide: Unterschied zwischen den Versionen
(→Städte - Neue) |
(→Skin(ning) für den Travel-Guide) |
||
Zeile 55: | Zeile 55: | ||
=== Skin(ning) für den Travel-Guide === | === Skin(ning) für den Travel-Guide === | ||
+ | <div style="text-align: center;"><big style="color: rgb(0, 0, 153);"><big><big><span | ||
+ | style="font-weight: bold;">Polyglott - Skin(ning) für den | ||
+ | Travel(City)-Guide</span></big></big></big><br> | ||
+ | </div> | ||
+ | <table | ||
+ | style="margin-left: auto; margin-right: auto; height: 270px; width: 795px; text-align: left;" | ||
+ | border="1" cellpadding="2" cellspacing="2"> | ||
+ | <tr> | ||
+ | <td | ||
+ | style="background-color: rgb(239, 239, 255); text-align: justify; vertical-align: top;">Nachdem wir nun wissen wie man zusätzliche Städte im City - Guide erstellen kann, widmen wir uns nun dem Verändern des Travel(City)- Guide´s. Um es gleich vorweg zu nehmen,- es geht hier nicht um ein fertiges Skin sondern soll lediglich den Weg dorthin beschreiben um selbst ein Skin für seine "Gelüste" herzustellen.<br> | ||
+ | Die Datei, die das Aussehen maßgeblich beeinflusst, liegt im Ordner <span style="font-weight: bold;">\My Flash Disk\Medion </span>und heißt <span style="font-weight: bold; color: rgb(204, 0, 0);">SDASkin.skn </span><span style="color: rgb(204, 0, 0);"><span style="color: rgb(0, 0, 0);">. Wir gehen so vor wie bereits im <span style="font-weight: bold;">Workshop Travel(City) - Guide </span>beschrieben, in dem wir uns diese Datei vom PNA kopieren und uns diese als KOPIE! in ein anderes Verzeichnis unserer Wahl auf der Festplatte des PC´s ablegen. Mit dieser Kopie arbeiten wir nun. Damit wir überhaupt sehen was dort drin ist muss wieder unser Text-Editor herhalten. Wir rufen also den Editor auf und laden uns die Kopie von </span></span><span | ||
+ | style="font-weight: bold; color: rgb(204, 0, 0);">SDASkin.skn </span><span | ||
+ | style="color: rgb(0, 0, 0);">hinein. Anders als bei einer Textbasierten XML-Datei finden wir hier nun eine Strukturierung vor und erkennen auch einzelne zusammenhängende Abschnitte. Und mit denen wollen wir uns im Einzelnen nun beschäftigen. Unsere Aufgabe wird darin bestehen das Aussehen so zu verändern, das es zu einer BMW-Ausleuchtung passt. Es ist aber so gut beschrieben, das es ohne grossen Aufwand an jede Fahrzeug-Beleuchtung,- z.B. Blau,- angepasst werden kann. <br> | ||
+ | </span> | ||
+ | <div style="text-align: center;"><span | ||
+ | style="color: rgb(0, 0, 0);">Bei der Beschreibung gilt folgendes : die | ||
+ | <span style="color: rgb(51, 51, 255); font-weight: bold;">blauen</span> | ||
+ | Einträge sind die Orginal-Einträge,- die <span | ||
+ | style="font-weight: bold; color: rgb(255, 0, 0);">roten</span> sind | ||
+ | die neuen Einträge !</span> | ||
+ | <span style="color: rgb(0, 0, 0);"></span><span | ||
+ | style="font-weight: bold; color: rgb(204, 0, 0);"> </span></div> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | <table | ||
+ | style="margin-left: auto; margin-right: auto; height: 260px; width: 795px; text-align: left;" | ||
+ | border="1" cellpadding="2" cellspacing="2"> | ||
+ | |||
+ | <tr> | ||
+ | <td | ||
+ | style="background-color: rgb(239, 239, 255); text-align: justify; vertical-align: top;"><span | ||
+ | style="color: rgb(51, 51, 255);"></span><span | ||
+ | style="font-weight: bold; color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 153);">Abschnitt: | ||
+ | </span>System<br> | ||
+ | </span></span><span style="color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);">Hier | ||
+ | werden die Leistenfarben definiert die gerade aktiv (im Fokus) sind. | ||
+ | Statt also "helles blau" nun in Orange. Alle Farbparameter werden immer | ||
+ | in <span style="color: rgb(255, 0, 0); font-weight: bold;">R</span><span | ||
+ | style="color: rgb(51, 204, 0); font-weight: bold;">G</span><span | ||
+ | style="color: rgb(51, 51, 255); font-weight: bold;">B</span>-Werte | ||
+ | angegeben. ROT/GRÜN/BLAU - Werte können mit jedem x-beliebigen | ||
+ | Malprogramm ausprobiert werden um die ermittelten Werte dann hier | ||
+ | einzusetzen.<br> | ||
+ | <span style="font-weight: bold;"><br> | ||
+ | Beispiel | ||
+ | | ||
+ | Orange | ||
+ | Blau | ||
+ | Grün | ||
+ | Weiß</span><br> | ||
+ | </span></span></span> | ||
+ | <table | ||
+ | style="margin-left: auto; margin-right: auto; width: 50%; text-align: left;" | ||
+ | border="1" cellpadding="2" cellspacing="2"> | ||
+ | <tr> | ||
+ | <td | ||
+ | style="background-color: rgb(255, 133, 80); vertical-align: top;"><br> | ||
+ | </td> | ||
+ | <td | ||
+ | style="background-color: rgb(0, 0, 255); vertical-align: top;"><br> | ||
+ | </td> | ||
+ | <td | ||
+ | style="background-color: rgb(0, 185, 0); vertical-align: top;"><br> | ||
+ | </td> | ||
+ | <td | ||
+ | style="background-color: rgb(255, 255, 255); vertical-align: top;"><br> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | <span style="color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);"><span | ||
+ | style="font-weight: bold;"> | ||
+ | 255,133,80 0,0,255 | ||
+ | | ||
+ | 0,185,0 255,255,255</span><br> | ||
+ | <br> | ||
+ | </span></span></span><span style="color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);">Wir | ||
+ | ersetzen nun folgende Zeile im Abschnitt <span | ||
+ | style="font-weight: bold;">System</span><br> | ||
+ | <br> | ||
+ | DefaultFocusColor:</span><span | ||
+ | style="font-weight: bold; color: rgb(0, 0, 0);"> </span><span | ||
+ | style="color: rgb(0, 0, 0);"><span | ||
+ | style="font-weight: bold; color: rgb(51, 51, 255);">170,206,243;</span>// | ||
+ | Light blue.</span></span></span><br> | ||
+ | <span style="font-weight: bold; color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"></span></span><span | ||
+ | style="color: rgb(204, 0, 0);"><span style="color: rgb(51, 51, 255);"><span | ||
+ | style="color: rgb(0, 0, 0);">DefaultFocusColor:</span><span | ||
+ | style="font-weight: bold; color: rgb(0, 0, 0);"> <span | ||
+ | style="color: rgb(255, 0, 0);">255,133,80;</span></span><span | ||
+ | style="color: rgb(0, 0, 0);"> // BMW-Orange Fokus-Leisten<br> | ||
+ | <br> | ||
+ | Jetzt speichern wir das erstmal ab und überschreiben unsere Datei auf dem PNA. Dann Polyglott starten und das Ergebnis anschauen. Nun,- der aktive Balken ist zwar jetzt Orange nur die Schrift sieht nicht so dolle aus. Also werden wir nun zu Schritt 2 gehen. | ||
+ | </span></span></span></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | <table | ||
+ | style="margin-left: auto; margin-right: auto; height: 260px; width: 795px; text-align: left;" | ||
+ | border="1" cellpadding="2" cellspacing="2"> | ||
+ | <tr> | ||
+ | <td | ||
+ | style="background-color: rgb(239, 239, 255); text-align: justify; vertical-align: top;"><span | ||
+ | style="color: rgb(51, 51, 255);"></span><span | ||
+ | style="font-weight: bold; color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 153);">Abschnitt:</span> | ||
+ | Defines<br> | ||
+ | </span></span><span style="color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);"></span></span></span><span | ||
+ | style="color: rgb(204, 0, 0);"><span style="color: rgb(51, 51, 255);"><span | ||
+ | style="color: rgb(0, 0, 0);">Hier ändern wir vier Einträge im | ||
+ | Abschnitt <span style="font-weight: bold;">Defines</span>.<br> | ||
+ | <br> | ||
+ | Der Überschriftentext in der Titelleiste kann verändert werden. Das | ||
+ | geschieht mit folgenden Eintrag...<br> | ||
+ | </span></span></span><span style="color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);">TITEL_TEXT_COLOR: | ||
+ | <span style="font-weight: bold; color: rgb(51, 51, 255);">0,0,0;</span><br> | ||
+ | </span></span></span><span style="color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);">TITEL_TEXT_COLOR: | ||
+ | <span style="color: rgb(255, 0, 0); font-weight: bold;">0,0,255;</span> | ||
+ | // Überschriftentext Farbe Blau<br> | ||
+ | <br> | ||
+ | Damit wir einen blendfreien Hintergrund für unsere Schrift | ||
+ | bekommen schalten wir den Hintergrund einfach auf sattes Schwarz und | ||
+ | das geschieht mit folgenden Eintrag ...<br> | ||
+ | AREA_HIGHLIGHT_COLOR: <span | ||
+ | style="font-weight: bold; color: rgb(51, 51, 255);">225,228,229;</span> | ||
+ | //light gray <br> | ||
+ | </span></span></span><span style="color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);">AREA_HIGHLIGHT_COLOR: | ||
+ | <span style="color: rgb(255, 0, 0); font-weight: bold;">000,000,000;</span> | ||
+ | //Hintergrund Tiefschwarz</span></span></span><br> | ||
+ | <span style="color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);"><br> | ||
+ | Wenn wir das jetzt abspeichern würden und uns dann auf dem PNA ansehen | ||
+ | würden,- tja,- ... wir sehen garnichts mehr. Also müssen wir noch die | ||
+ | Schriftfarbe aus dem Schwarz wieder hervorholen. das machen wir mit | ||
+ | folgenden Eintrag ...<br> | ||
+ | LISTBOX_TEXT_COLOR: <span | ||
+ | style="font-weight: bold; color: rgb(51, 51, 255);">0,0,0;</span><br> | ||
+ | </span></span></span><span style="color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);">LISTBOX_TEXT_COLOR: | ||
+ | <span style="font-weight: bold; color: rgb(255, 0, 0);">255,255,255;</span> | ||
+ | //Textfarbe weiss</span></span></span><br> | ||
+ | <span style="color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);"><br> | ||
+ | Und weil wir schon mal in diesem Abschnitt sind können wir hier | ||
+ | auch gleich den Hintergrund der Scrollbalken anpassen. Da er im Orginal | ||
+ | sehr hell ist und man nie genau weiss wieviel Text bis zum Ende noch da | ||
+ | ist, sollte hier für mehr Kontrast und Abgrenzung gesorgt werden. Da ja | ||
+ | schwarz bereits für den Hintergrund gewählt ist ,- in unserem | ||
+ | Beispiel,- fällt die Farbe aus da wir ihn sonst nicht sehen würden. | ||
+ | Also nehmen wir einen Blauton der in etwa unseren Buttons links und | ||
+ | rechts unten entspricht.und das machen wir nun mit folgenden Eintrag...<br> | ||
+ | AREA_BG_COLOR: <span | ||
+ | style="font-weight: bold; color: rgb(51, 51, 255);">205,205,214;</span> | ||
+ | // gray<br> | ||
+ | </span></span></span><span style="color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);">AREA_BG_COLOR: | ||
+ | <span style="font-weight: bold; color: rgb(255, 0, 0);">26,134,186;</span> | ||
+ | // Scrollbalken Hintergrund auf blau<br> | ||
+ | <br> | ||
+ | So,- mehr brauchen wir erstmal nicht und wir speichern uns das Ganze nun ab, kopieren es auf unseren PNA und üben nun Kontrolle aus. Sieht doch schon ganz gut aus,- nicht wahr ?? - Na dann zum nächsten Schritt... | ||
+ | </span></span></span></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | <table | ||
+ | style="margin-left: auto; margin-right: auto; height: 260px; width: 795px; text-align: left;" | ||
+ | border="1" cellpadding="2" cellspacing="2"> | ||
+ | <tr> | ||
+ | <td | ||
+ | style="background-color: rgb(239, 239, 255); text-align: justify; vertical-align: top;"><span | ||
+ | style="color: rgb(51, 51, 255);"></span><span | ||
+ | style="font-weight: bold; color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 153);">Abschnitt:</span> | ||
+ | PointOfInterestText<br> | ||
+ | </span></span><span style="color: rgb(0, 0, 0);">Damit wir eine | ||
+ | kontrastreiche Schrift auf unseren Beschreibungsseiten erreichen kann | ||
+ | diese Schrift verändert werden. Das erreichen wir mit dem Eintrag ...<br> | ||
+ | TextColor: <span style="font-weight: bold; color: rgb(51, 51, 255);">0,0,0;</span> | ||
+ | // Farbe der eigentlichen Beschreibungstexte<br> | ||
+ | </span><span style="font-weight: bold; color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"> </span></span><span | ||
+ | style="color: rgb(204, 0, 0);"><span style="color: rgb(51, 51, 255);"><span | ||
+ | style="color: rgb(0, 0, 0);"></span></span></span><span | ||
+ | style="color: rgb(204, 0, 0);"><span style="color: rgb(51, 51, 255);"><span | ||
+ | style="color: rgb(0, 0, 0);"></span></span></span><span | ||
+ | style="color: rgb(204, 0, 0);"><span style="color: rgb(51, 51, 255);"><span | ||
+ | style="color: rgb(0, 0, 0);">Wie man sehen kann, gibt es hier keinen | ||
+ | roten Eintrag,- na klar ich habe ihn auch nicht verändert. Wenn nun aber jemand auf die Idee kommt einen schwarzen oder sehr dunklen Hintergrund zu wählen, so wird er keinen Text mehr sehen. Folglich muss dieser ebenfalls geändert werden,- sehr helles blau oder weiss wäre hier wohl eher angesagt. Das Text-Hintergrundbild kann ebenfalls ausgetauscht werden. Da es das gesammte Erscheinungsbild und die | ||
+ | Lesefähigkeit beeinflusst wird es auch in diesem Zusammenhang der Schriftgestaltung hier genannt. | ||
+ | </span></span></span> | ||
+ | <div style="text-align: center;"><span | ||
+ | style="color: rgb(204, 0, 0);"><span style="color: rgb(51, 51, 255);"><span | ||
+ | style="color: rgb(0, 0, 0);">Der Austausch der Datei : <span | ||
+ | style="font-weight: bold; color: rgb(255, 0, 0);">background.png </span><span | ||
+ | style="color: rgb(255, 0, 0);"><span style="color: rgb(0, 0, 0);">passiert | ||
+ | in dem Verzeichnis <span style="font-weight: bold;">\My Flash | ||
+ | Disk\Medion\SKIN </span>und nicht vergessen,- <span | ||
+ | style="font-weight: bold;">ERST DIE DATEI(en) SICHERN !!... dann | ||
+ | überschreiben !<br> | ||
+ | </span></span></span></span></span></span> | ||
+ | <div style="text-align: left;"><span | ||
+ | style="color: rgb(204, 0, 0);"><span style="color: rgb(0, 0, 0);">Wenn wir dann schon mal dabei sind den Hintergrund farblich anzupassen liegen im selben Verzeichnis noch die Dateien</span><br | ||
+ | style="color: rgb(0, 0, 0);"> | ||
+ | <span style="color: rgb(0, 0, 0);">1. <span | ||
+ | style="font-weight: bold; color: rgb(51, 51, 255);">poi_mapselection_icons.png</span><br> | ||
+ | 2. <span style="font-weight: bold; color: rgb(51, 51, 255);">udlr_icons.png</span></span><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);"><span | ||
+ | style="color: rgb(255, 0, 0);"><span style="color: rgb(0, 0, 0);"><span | ||
+ | style="font-weight: bold;"></span></span></span></span></span></span><br> | ||
+ | <span style="color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);"><span | ||
+ | style="color: rgb(255, 0, 0);"><span style="color: rgb(0, 0, 0);"><span | ||
+ | style="font-weight: bold;"></span></span></span></span></span></span></div> | ||
+ | <span style="color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);"></span></span></span></div> | ||
+ | <span style="color: rgb(204, 0, 0);"><span style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);">3.<span style="font-weight: bold; color: rgb(51, 51, 255);">titlebar1.png | ||
+ | <br> | ||
+ | <span style="color: rgb(0, 0, 0);">oder benutzt einfach die fertigen aus dem Downloadbereich !</span><br> | ||
+ | </span><br> | ||
+ | Falls hier Veränderungen jetzt gemacht wurden,- nun wieder abspeichern und auf dem PNA kontrollieren Und weiter gehts im nächsten Schritt.. | ||
+ | </span></span></span></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | <table | ||
+ | style="margin-left: auto; margin-right: auto; height: 260px; width: 795px; text-align: left;" | ||
+ | border="1" cellpadding="2" cellspacing="2"> | ||
+ | <tr> | ||
+ | <td | ||
+ | style="background-color: rgb(239, 239, 255); text-align: justify; vertical-align: top;"><span | ||
+ | style="color: rgb(51, 51, 255);"></span><span | ||
+ | style="font-weight: bold; color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 153);">Abschnitt:</span> | ||
+ | </span></span><span style="color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);"> <span | ||
+ | style="font-weight: bold; color: rgb(51, 51, 255);">NavigateText</span></span></span></span><br> | ||
+ | Wir haben nun auch die Hintergründe angepasst,- was jetzt noch fehlt | ||
+ | ist die passende Schriftenfarbe bei einem Hinweis in der untersten | ||
+ | Leiste. Die erscheint nur wenn auch Adress-Koordinaten hinterlegt sind. | ||
+ | ( siehe dazu den Workshop )<br> | ||
+ | In unserem Beispiel ist der Hintergrund der Leiste ja in Blau gehalten | ||
+ | und wir brauchen nun die Kontrastfarbe dazu die auch Nachts zu sehen | ||
+ | ist. Ich habe mich erstmal für ein Neongrün entschieden bis mir was | ||
+ | besseres einfällt. Der Eintrag der verändert werden muß lautet ...<br> | ||
+ | <span style="color: rgb(0, 0, 0);"></span><span | ||
+ | style="color: rgb(204, 0, 0);"><span style="color: rgb(51, 51, 255);"><span | ||
+ | style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);">TextColor: | ||
+ | <span style="font-weight: bold; color: rgb(51, 51, 255);">$QUESTION_COLOR$;</span></span><span | ||
+ | style="font-weight: bold; color: rgb(51, 51, 255);"><br> | ||
+ | </span></span></span></span><span style="color: rgb(0, 0, 0);"></span><span | ||
+ | style="color: rgb(204, 0, 0);"><span style="color: rgb(51, 51, 255);"><span | ||
+ | style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);">TextColor: | ||
+ | <span style="font-weight: bold; color: rgb(255, 0, 0);">0,255,0;</span> | ||
+ | // Textfarbe der unteren Leiste in Neongrün<br> | ||
+ | <br> | ||
+ | Wie wir sehen können ist hier keine RGB-Farbe im Orginal angegeben. Hier wird mit einer festen Variablen gearbeitet die im Abschnitt <span style="font-weight: bold;">Defines </span>hinterlegt ist. Warum ändern wir nun da nicht die RGB-Werte ?? - Nun,- falls andere Erweiterungen darauf zugreifen so erwarten diese natürlich den dortigen Eintrag </span></span></span></span><span style="color: rgb(0, 0, 0);"><span style="font-weight: bold;">QUESTION_COLOR=0,0,0; </span>. Wir wollen aber lediglich die Schrift in der unteren Leiste ändern,- also machen wir das in der Form von einem RGB-Eintrag wie oben beschrieben. Jetzt wieder unsere Abspeichern/Anschauen/Testen-Prozedur und gehen dann zum letzten Schritt. | ||
+ | </span></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | <table | ||
+ | style="margin-left: auto; margin-right: auto; text-align: left; height: 140px; width: 795px;" | ||
+ | border="1" cellpadding="2" cellspacing="2"> | ||
+ | <tr> | ||
+ | <td | ||
+ | style="background-color: rgb(239, 239, 255); text-align: justify; vertical-align: top;"><span | ||
+ | style="color: rgb(51, 51, 255);"></span><span | ||
+ | style="font-weight: bold; color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 153);">Abschnitt:</span> </span></span><span | ||
+ | style="color: rgb(204, 0, 0);"><span style="color: rgb(51, 51, 255);"><span | ||
+ | style="color: rgb(0, 0, 0);"><span | ||
+ | style="font-weight: bold; color: rgb(51, 51, 255);"></span></span></span></span><span | ||
+ | style="color: rgb(0, 0, 0);"><span | ||
+ | style="font-weight: bold; color: rgb(51, 51, 255);">ImpressumText</span> | ||
+ | </span><span style="color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 0);"><span | ||
+ | style="font-weight: bold; color: rgb(51, 51, 255);"></span></span></span></span> | ||
+ | <span style="color: rgb(0, 0, 0);">Eine Besonderheit ist in der Rubrik Impressum zu sehen. Hier wird kein Hintergrundbild angezeigt. Da wir in unserem Beispiel einen schwarzen Hintergrund gewählt hatten und die Schrift ebenfalls Schwarz vorgegeben ist muß diese nun angepasst werden. Das geschieht nun mit folgenden Eintrag...<br> | ||
+ | TextColor: <span style="font-weight: bold; color: rgb(51, 51, 255);">0,0,0; | ||
+ | </span><br> | ||
+ | TextColor: <span style="font-weight: bold; color: rgb(255, 0, 0);">255,255,255;</span> | ||
+ | // Farbe des Textes im Impressum weiss </span></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | <table | ||
+ | style="margin-left: auto; margin-right: auto; text-align: left; height: 140px; width: 795px;" | ||
+ | border="1" cellpadding="2" cellspacing="2"> | ||
+ | <tr> | ||
+ | <td | ||
+ | style="background-color: rgb(239, 239, 255); text-align: justify; vertical-align: top;"><span | ||
+ | style="color: rgb(51, 51, 255);"></span><span | ||
+ | style="font-weight: bold; color: rgb(204, 0, 0);"><span | ||
+ | style="color: rgb(51, 51, 255);"><span style="color: rgb(0, 0, 153);"></span></span></span><span | ||
+ | style="color: rgb(0, 0, 0);">So, das war es erstmal und das Ganze lädt natürlich zum Experimentieren ein. Hier kann Man(n)/Frau sich richtig auslassen bis man SEINE ultimative Einstellung gefunden hat. Die Icons lassen sich natürlich ebenfalls verändern und verschieben. Einfach mal ausprobieren kann schon nichts kaputt gehen. Wichtig ist lediglich das immer alle Orginaldaten/Bilder gesichert worden sind und wir immer nur mit den Kopien arbeiten. Außerdem müssen die Dateinamen immer identisch zum Orginal sein,- wie soll er(der PNA) sie sonst auch finden.<br> | ||
+ | Ansonsten gilt der Grundsatz der Pfadfinder : <big><span | ||
+ | style="font-weight: bold;">Learning by Doing </span></big></span><br> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | |||
== Tools & Applikationen == | == Tools & Applikationen == | ||
=== Tools === | === Tools === |
Version vom 25. Mai 2007, 15:04 Uhr
Inhaltsverzeichnis
Einleitung
Versionen
Cityguide / Travelguide 3 | |
---|---|
{{{Screenshot}}} {{{Beschreibung}}} | |
Aktuelle Version: | () |
Datei: | TravelGuide.exe |
Daten: | |
Zugehörigkeit: | Teil von GoPal 3.x |
Erstellungsdatum: | Montag, 23. April 2007, 18:54:38 |
MD5: | noch nachzutragen |
Cityguide / Travelguide 2 | |
---|---|
{{{Screenshot}}} {{{Beschreibung}}} | |
Aktuelle Version: | () |
Datei: | Cityguide.exe |
Daten: | |
Zugehörigkeit: | Teil von GoPal 2.x |
Erstellungsdatum: | Sonntag, 1. Oktober 2006, 14:06:54 |
MD5: | noch nachzutragen |
Paket-Inhalte
Installation
Datei-System
Werkzeuge
Editoren
XML-Generator
Work-Shop
Datei-Variablen
Datei-Fehlercodes
Datei-Sonderzeichen
Wenn man für den Travel-Guide ein neues Datenblatt erstellen will kann es vorkommen das wir in der Überschrift, im Textkörper oder in der Beschreibung auf Sonder -Zeichen stossen. Gibt man diese so wie gewohnt mit ein verweigert Travel-Guide den Dienst und im schlimmsten Fall gibt es einen sauberen Absturz. Aber es gibt Abhilfe. Die einzelnen Zeichen werden wie folgt in einem XML-Doc. ohne Leerzeichen eingegeben :
Die betroffenen Sonderzeichen sind : < > " & ` & lt; das ist eine Spitzklammer Links & gt; das ist eine Spitzklammer Rechts & quot; das ist ein Hochkomma & apos; das ist ein Apostrophe & amp; das ist ein kaufmännisches Pluszeichen
So kann man auf einfache Weise diese Sonderzeichen einsetzen. Das geht auch mit dem XML-Generator.
Skin(ning) für den Travel-Guide
Travel(City)-Guide
Nachdem wir nun wissen wie man zusätzliche Städte im City - Guide erstellen kann, widmen wir uns nun dem Verändern des Travel(City)- Guide´s. Um es gleich vorweg zu nehmen,- es geht hier nicht um ein fertiges Skin sondern soll lediglich den Weg dorthin beschreiben um selbst ein Skin für seine "Gelüste" herzustellen. Die Datei, die das Aussehen maßgeblich beeinflusst, liegt im Ordner \My Flash Disk\Medion und heißt SDASkin.skn . Wir gehen so vor wie bereits im Workshop Travel(City) - Guide beschrieben, in dem wir uns diese Datei vom PNA kopieren und uns diese als KOPIE! in ein anderes Verzeichnis unserer Wahl auf der Festplatte des PC´s ablegen. Mit dieser Kopie arbeiten wir nun. Damit wir überhaupt sehen was dort drin ist muss wieder unser Text-Editor herhalten. Wir rufen also den Editor auf und laden uns die Kopie von SDASkin.skn hinein. Anders als bei einer Textbasierten XML-Datei finden wir hier nun eine Strukturierung vor und erkennen auch einzelne zusammenhängende Abschnitte. Und mit denen wollen wir uns im Einzelnen nun beschäftigen. Unsere Aufgabe wird darin bestehen das Aussehen so zu verändern, das es zu einer BMW-Ausleuchtung passt. Es ist aber so gut beschrieben, das es ohne grossen Aufwand an jede Fahrzeug-Beleuchtung,- z.B. Blau,- angepasst werden kann. Bei der Beschreibung gilt folgendes : die
blauen Einträge sind die Orginal-Einträge,- die roten sind die neuen Einträge ! |
Abschnitt:
System
255,133,80 0,0,255
0,185,0 255,255,255 |
Abschnitt:
Defines |
Abschnitt:
PointOfInterestText Der Austausch der Datei : background.png passiert
in dem Verzeichnis \My Flash
Disk\Medion\SKIN und nicht vergessen,- ERST DIE DATEI(en) SICHERN !!... dann
überschreiben ! Wenn wir dann schon mal dabei sind den Hintergrund farblich anzupassen liegen im selben Verzeichnis noch die Dateien
1. poi_mapselection_icons.png 3.titlebar1.png
|
Abschnitt:
NavigateText |
Abschnitt: ImpressumText
Eine Besonderheit ist in der Rubrik Impressum zu sehen. Hier wird kein Hintergrundbild angezeigt. Da wir in unserem Beispiel einen schwarzen Hintergrund gewählt hatten und die Schrift ebenfalls Schwarz vorgegeben ist muß diese nun angepasst werden. Das geschieht nun mit folgenden Eintrag... |
So, das war es erstmal und das Ganze lädt natürlich zum Experimentieren ein. Hier kann Man(n)/Frau sich richtig auslassen bis man SEINE ultimative Einstellung gefunden hat. Die Icons lassen sich natürlich ebenfalls verändern und verschieben. Einfach mal ausprobieren kann schon nichts kaputt gehen. Wichtig ist lediglich das immer alle Orginaldaten/Bilder gesichert worden sind und wir immer nur mit den Kopien arbeiten. Außerdem müssen die Dateinamen immer identisch zum Orginal sein,- wie soll er(der PNA) sie sonst auch finden. Ansonsten gilt der Grundsatz der Pfadfinder : Learning by Doing |
Tools & Applikationen
Tools
XML-Generator
Stadt-Notizen
Die Stadt - Notizen geben ein genaues Travel-Guide Abbild der Rubriken wieder. Die Zahlen in den Klammern jeder Rubrik bedeuten die gewünschte Anzahl der Einträge. Auch die Reihenfolge der Rubriken ist mit dem Orginal identisch.
Applikationen
Travel-Shopper
Städte - Neue
Hier werden Städte veröffentlicht die Travel-Guide konform sind. Das bedeutet das diese Dateien folgende Kriterien erfüllen müssen:
1. Alle Rubriken die vom Orginal her bekannt sind müssen in den neuen Städte-Dateien auch erscheinen.
2. Die Reihenfolge muss identisch sein um ein einheitliches Bedienen zu ermöglichen.
3. Eine echte Navigation zu den dort angegebenen Zielen muss möglich sein.
4. Leereinträge wie: "Email ist nicht vorhanden" etc. müssen gelöscht werden.
5. Neue Rubriken müssen im Forum zur Absprache gebracht werden und genehmigt werden.
6. Wenn Neu-Rubriken erstellt werden, sollten alle bestehenden Städte die Neuerung erhalten.
7. Es dürfen nur neu erstellte Städte veröffentlicht werden
Welche Rubriken gebraucht werden kann im Verzeichnis [Tools] aus den Stadt-Notizen ermittelt werden.
Bislang sind dazu erschienen :
Hannover
Hansestadt Hamburg
Hansestadt Bremen
Hansestadt Lübeck