 |
|||||||||||||||||||||
| www.my-mode.com > tutorial > grafik und symbole | |||||||||||||||||||||
|
nun ja, wenn man schon einfarbiges display zur verfuegung hat, dann will man natuerlich auch ein wenig mehr damit machen, als nur schrift und hintergrund einfaerben. bilder waeren schon nett.
auch das ist kein problem, i-modeTM-handys unterstuetzen jpg- und gif-grafiken. offiziell wird aber nur gif als grafikformat angegeben. dass soll uns nur recht sein. eine gif-grafik ist zwar auf 256 farben beschraenkt, aber sie bietet einige vorteile. zum einen sind die 256 farbtoene frei waehlbar, es sind keine fest definierten farben. zweitens kann man eine gif-datei kleiner halten, in dem man sich auf 128, 64, 32 oder noch weniger farben beschraenkt. drittens ist es moeglich, eine farbe in einem gif als transparent zu definieren, so dass sich die grafik sozusagen nahtlos in die seite einpasst. natuerlich muessen die grafiken irgendwo im bereich der i-modeTM-seite abgespeichert werden, ich lege mir im standardfall ein extra verzeichnis namens "gifs" an, wo ich sie ablege. mit dem tag <img>(das auch zu den ausnahmen ohne end-tag gehoert!) und den entsprechenden attributen kann man dann die grafik in die seite einbinden. als attribute werden src="xxx" align="left | right | top | middle | bottom" width="n | %" height="n | %" hspace="n" vspace="n" alt="yyy"erkannt. das "src"-attribut ist dabei mit abstand das wichtigste, xxx steht hier fuer den pfad, unter dem das anzuzeigende bild abgespeichert ist. im einfachsten falle liegt die grafik im selben verzeichnis wie die cHTML-datei, dann reicht es, den namen der bild-datei anzugeben. das "align"-attribut ist diesmal nicht nur fuer die links-rechts-ausrichtung zustaendig, sondern bestimmt ueber die optionen "top", "middle" und "bottom" auch die ausrichtung bezueglich dem umgebenden text. steht also links und rechts von der grafik text, so richtet "bottom" das bildchen mit der unterkannte zur unterkante des textes aus. die attribute "height" und "width" sind mit vorsicht zu geniessen, sie ermoeglichen es, ein bild im browser auf die gewuenschte groesse zu pressen oder zu zerren. der nachteil ist offensichtlich, erst laed der unser besucher teuer ein grosses bild herunter, das ihm dann doch nur im briefmarkenformat angezeigt wird. besser ist daher, die bilder vorher auf die gewuenschte, handytaugliche groesse zu bringen - und auf die attribute zu verzichten. sinnvoller sind da schon "hspace" und "vspace", sie geben den horizontalen und den vertikalen abstand zwischen der grafik und dem naechsten objekt in pixeln an. sie sind so eine art abstandhalter. zu guter letzt sei noch das attribut "alt" erwaehnt. der text, den man hier hineinschreibt, erscheint, falls aus irgend einem grund das bild nicht geladen werden kann. so bleibt auch ein nicht geladenes bild kein raetsel. ein beispiel soll zum abschluss die verwendung des <img>-tags verdeutlichen, wobei ich den "fehler" mache, auch "height" und "width" zu benutzen: <img src="mymologo.gif"
align="middle"
width="50%"
height="25%"
hspace="2"
vspace="2"
alt="my-mode-logo">
nun ist es ziemlich muehsam, wenn man sich, z.b. um eine kleine wettervorhersage fuer das handy zu bauen, erst mal alle symbole wie "sonnenschein", "regen" oder "schnee" selbst basteln muesste. NTT hat deshalb in japan (und fuer deutschland auch) einige symbole vorgefertigt, die aehnlich einem sonderzeichen direkt in den code eingefuegt werden koennen. fuer diese zeichen gibt es eine extra codetabelle (160kB). ein nachteil dieser symbole sei jedoch nicht verschwiegen, sie sind nur von den echt i-modeTM-faehigen handys anzuzeigen, jeder normale browser, sei es im pc oder pda oder aber auch der von "umgestricken" handys wie dem NOKIA 3650, bleibt aussen vor. wer so kompatibel sein will, dem bleibt nur der weg, selbst symbole zu bauen und als gif-grafiken einzubinden. |
||||||||||||||||||||