| View previous topic :: View next topic |
| Author |
Message |
chrisale
Joined: 09 Nov 2005
Posts: 187
|
 Posted: Mon Feb 20, 2006 10:03 pm Post subject: Mobile, WAP and WML enabled website |
 |
|
I've been busy again this weekend. :+)
First. I created a new Cascading Style Sheet for my website that is specialized for "handheld" devices. Mobiles, PDA, new cellphones... etc. Surprisingly easy to do actually. Just had to add a second "link" element in the head section pointing to the modified pda stylesheet with media="handheld" as an attribute.
If you'd like to see the result, and would like to do this yourself, your best option is to download the Opera webbrowser. Switch it to "Small Screen" mode... this will force it to "act like a handheld"... and it will use the PDA stylesheet instead of the standard one.
All I did to the stylesheet was narrow the page so that it was only 320 pixels across... because PDAs don't usually like scrolling.. plus, I turned off most images, to save bandwidth.
I didn't make any changes to the webpage templates themselves. Only to the CSS. I love CSS!
I haven't updated the "template" CSS document that I created in the previous thread... I'll do that this weekend. But you can see the new "link" element by viewing the source at www.alberniweather.ca ... and the CSS at www.alberniweather.ca/weatherstylepda.css
The ironic part is that I don't have a mobile or PDA with a web browser... so if you do.. PLEASE test it out for me, let me know how it looks and if it works.  |
|
| Back to top |
|
 |
chrisale
Joined: 09 Nov 2005
Posts: 187
|
| Posted: Mon Feb 20, 2006 10:05 pm Post subject: |
|
|
I've also created a "WAP" or wml page for older, smaller bandwidth, cellphones.
It's my first stab at wml. It's pretty easy though... I'll just paste in the code that I used:
| Code: |
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">
<wml>
<card id="current1" title="AlberniWeather">
<p>
<!--stationTime--><br/>
<b>Temp:</b> <!--outsideTemp--><!--tempUnit--><br/>
<b>Chill:</b> <!--windChill--><!--tempUnit--><br/>
<b>Heat:</b> <!--outsideHeatIndex--><!--tempUnit--><br/>
<b>B:</b> <!--barometer--> hPa<br/>
<b>W:</b> <!--windDirection--> at <!--windSpeed--><!--windUnit--><br/>
<anchor>
Refresh this page
<go href="wap.wml"/>
<refresh/>
</anchor>
<anchor>
Page 2
<go href="#current2" />
</anchor>
</p>
</card>
<card id="current2" title="AlberniWeather2">
<p>
<!--stationTime--><br/>
<b>24hrRain</b> <!--dailyRain--><!--rainUnit--><br/>
<b>Rate:</b> <!--rainRate--> <!--rateUnit--><br/>
<b>Storm:</b> <!--stormRain--><!--rainUnit--><br/>
<b>Humid:</b> <!--outsideHumidity--><!--humUnit--><br/>
<b>Dew:</b> <!--outsideDewPt--><!--tempUnit--><br/>
<b>MtRn:</b> <!--monthlyRain--><!--rainUnit--><br/>
<b>YrRn:</b> <!--totalRain--><!--rainUnit--><br/>
<anchor>
Refresh this page
<go href="wap.wml"/>
<refresh/>
</anchor>
<do type="accept" label="Back">
<prev/>
</do>
</p>
</card>
</wml>
|
I just created a new .htx file called "currentwap.htx" that gets uploaded to the server... then a cron job renames it to wap.wml and that's where I point my cellphone users.
www.alberniweather.ca/wap |
|
| Back to top |
|
|
bhnb
Joined: 28 Nov 2005
Posts: 127
|
| Posted: Tue Feb 21, 2006 9:45 am Post subject: |
|
|
Hi Chris - looks good and I can confirm that it works as expected on a browser-enabled phone. My phone display is 128w x 160h but scrolling around a 320w page is easy enough.
I still think you need to add margin: auto; to the body section of your css though! 
Jon |
|
| Back to top |
|
|
chrisale
Joined: 09 Nov 2005
Posts: 187
|
| Posted: Tue Feb 21, 2006 9:19 pm Post subject: |
|
|
| ask and ye shall receive |
|
| Back to top |
|
|
bhnb
Joined: 28 Nov 2005
Posts: 127
|
| Posted: Wed Feb 22, 2006 1:13 pm Post subject: |
|
|
Cool. 
Here's trick inspired by your mobile-friendly css. ImageMagick needs to be installed on your system. Result is 'wtf.png' in your home directory.
##########################################
#!/bin/sh
cd ~
cp /var/wview/img/tempdaycomp.png .
convert tempdaycomp.png -crop 175x20+0+0 +repage s5.png
convert tempdaycomp.png -crop 30x128+0+20 +repage s1.png
convert tempdaycomp.png -crop 154x128+155+20 +repage s2.png
convert tempdaycomp.png -crop 30x20+125+147 +repage s3.png
convert tempdaycomp.png -crop 150x20+155+147 +repage s4.png
convert tempdaycomp.png -crop 175x27+55+157 +repage s6.png
convert tempdaycomp.png -crop 15x15+55+157 +repage s7.png
convert -page +0+0 s5.png -page +0+20 s1.png \
-page +30+20 s2.png -page +0+148 s3.png \
-page +30+148 s4.png -page +0+157 s6.png \
-page +0+149 s7.png -mosaic wtf.png
rm s[1-6].png
############################################### |
|
| Back to top |
|
|
chrisale
Joined: 09 Nov 2005
Posts: 187
|
| Posted: Wed Feb 22, 2006 11:15 pm Post subject: |
|
|
| cool!! |
|
| Back to top |
|
|
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
