aboutsummaryrefslogtreecommitdiff
path: root/content/posts/2021-12-30-wap-mobile-web-before-the-web.md
diff options
context:
space:
mode:
Diffstat (limited to 'content/posts/2021-12-30-wap-mobile-web-before-the-web.md')
-rw-r--r--content/posts/2021-12-30-wap-mobile-web-before-the-web.md201
1 files changed, 0 insertions, 201 deletions
diff --git a/content/posts/2021-12-30-wap-mobile-web-before-the-web.md b/content/posts/2021-12-30-wap-mobile-web-before-the-web.md
deleted file mode 100644
index 6c598fe..0000000
--- a/content/posts/2021-12-30-wap-mobile-web-before-the-web.md
+++ /dev/null
@@ -1,201 +0,0 @@
1---
2title: Wireless Application Protocol and the mobile web before the web
3url: wap-mobile-web-before-the-web.html
4date: 2021-12-30T12:00:00+02:00
5draft: false
6---
7
8## A little stroll down the history lane
9
10About two weeks ago, I watched this outstanding documentary on YouTube
11[Springboard: the secret history of the first real
12smartphone](https://www.youtube.com/watch?v=b9_Vh9h3Ohw) about the history of
13smartphones and phones in general. It brought back so many memories. I never had
14an actual smartphone before the Android. The closest to smartphone was [Sony
15Ericsson P1](https://www.gsmarena.com/sony_ericsson_p1-1982.php). A fantastic
16phone and I broke it in Prague after a party and that was one of those rare
17occasions where I was actually mad at myself. But nevertheless, after that
18phone, the next one was an Android one.
19
20Before that, I only owned normal phones from Nokia and Siemens etc. Nothing
21special, actually. These are the phones we are talking about. Before 2007.
22Apple and Android phones didn't exist yet.
23
24These phones were rocking:
25
26- No selfie cameras.
27- ~2 inch displays.
28- ~120 MHz beast CPU's.
29- 144p main cameras.
30- But they had a headphone jack.
31
32Let's take a look at these beauties.
33
34![Old phones](/assets/wap/phones.gif)
35
36## WAP - Wireless Application Protocol
37
38Not that one! We are talking about Wireless Application Protocol and not Cardi
39B's song 😃
40
41WAP stands for Wireless Application Protocol. It is a protocol designed for
42micro-browsers, and it enables the access of internet in the mobile devices. It
43uses the mark-up language WML (Wireless Markup Language and not HTML), WML is
44defined as XML 1.0 application. Furthermore, it enables creating web
45applications for mobile devices. In 1998, WAP Forum was founded by Ericson,
46Motorola, Nokia and Unwired Planet whose aim was to standardize the various
47wireless technologies via protocols.
48[(source)](https://www.geeksforgeeks.org/wireless-application-protocol/)
49
50WAP protocol was resulted by the joint efforts of the various members of WAP
51Forum. In 2002, WAP forum was merged with various other forums of the industry,
52resulting in the formation of Open Mobile Alliance (OMA).
53[(source)](https://www.geeksforgeeks.org/wireless-application-protocol/)
54
55These were some wild times. Devices had tiny screens and data transmission rates
56were abominable. But they were capable of rendering WML (Wireless Markup
57Language). This was very similar to HTML, actually. It is a markup language,
58after all.
59
60These pages could be served by [Apache](https://apache.org/) and could be
61generated by CGI scripts on the backend. The only difference was the limited
62markup language.
63
64## WML - Wireless Markup Language
65
66Just like web browsers use HTML for content structure, older mobile device
67browsers use WML - if you need to support really old mobile phones using WML
68browsers, you will need to know about it. WML is XML-based (an XML vocabulary
69just like XHTML and MathML, but not HTML) and does not use the same metaphor as
70HTML. HTML is a single document with some metadata packed away in the head, and
71a body encapsulating the visible page. With WML, the metaphor does not envisage
72a page, but rather a deck of cards. A WML file might have several pages or cards
73contained within it.
74[(source)](https://www.w3.org/wiki/Introduction_to_mobile_web)
75
76```html
77<?xml version="1.0"?>
78<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
79<wml>
80 <card id="home" title="Example Homepage">
81 <p>Welcome to the Example homepage</p>
82 </card>
83</wml>
84```
85
86There is an amazing tutorial on [Tutorialpoint about
87WML](https://www.tutorialspoint.com/wml/index.htm).
88
89## Converting Digg to WML
90
91This task is completely useless and not really feasible nowadays, but I had to
92give it a try for old-time sake. Since the data is already there in a form of
93RSS feed, I could take this feed and parse it and create a WML version of the
94homepage.
95
96We will need:
97
98- Python3 + Pip
99- ImageMagick
100- feedparser and mako templating
101
102```sh
103# for fedora 35
104sudo dnf install ImageMagick python3-pip
105
106# tempalting engine for python
107pip install mako --user
108
109# for parsing rss feeds
110pip install feedparser --user
111```
112
113Project folder structure should look like the following.
114
115```
11612:43:53 m@khan wap → tree -L 1
117.
118├── generate.py
119└── template.wml
120
121```
122
123After that, I created a small template for the homepage.
124
125```html
126<?xml version="1.0"?>
127<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml">
128
129<wml>
130
131 <card title="Digg - What the Internet is talking about right now">
132
133 % for item in entries:
134 <p><img src="/images/${item.id}.jpg" width="175" height="95" alt="${item.title}" /></p>
135 <p><small>${item.kicker}</small></p>
136 <p><big><b>${item.title}</b></big></p>
137 <p>${item.description}</p>
138 % endfor
139
140 </card>
141
142</wml>
143```
144
145And the parser that parses RSS feed looks like this.
146
147```python
148import os
149import feedparser
150from mako.template import Template
151
152os.system('mkdir -p www/images')
153
154template = Template(filename='template.wml')
155
156feed = feedparser.parse('https://digg.com/rss/top.xml')
157
158entries = feed.entries[:15]
159
160for entry in entries:
161 print('Processing image with id {}'.format(entry.id))
162 os.system('wget -q -O www/images/{}.jpg "{}"'.format(entry.id, entry.links[1].href))
163 os.system('convert www/images/{}.jpg -type Grayscale -resize 175x -depth 3 -quality 30 www/images/{}.jpg'.format(entry.id, entry.id))
164
165html = template.render(entries = entries)
166
167with open('www/index.wml', 'w+') as fp:
168 fp.write(html)
169```
170
171This script will create a folder `www` and in the folder `www/images` for
172storing resized images.
173
174> Be sure you don't use SSL and use just normal HTTP for serving the content.
175> These old phones will have problems with TLS 1.3 etc.
176
177If you look at the python file, I convert all the images into tiny B&W images.
178They should be WBMP (Wireless BitMaP) but I choose JPEGs for this, and it seems
179to work properly.
180
181Because I currently don't have a phone old enough to test it on, I used an
182emulator. And it was really hard to find one. I found [WAP
183Proof](http://wap-proof.sharewarejunction.com/) on shareware junction, and it
184did the job well enough. I will try to find and actual device to test it on.
185
186<video src="/assets/wap/emulator.mp4" controls></video>
187
188If you are using Nginx to serve the contents, add a directive to the hosts file
189that will automatically server `index.wml` file.
190
191```nginx
192server {
193 index index.wml index.html index.htm index.nginx-debian.html;
194}
195```
196
197## Conclusion
198
199Well, this was pointless, but very fun! I hope you enjoyed it as much as I did.
200I will try to find an old phone to test it on. If you have any questions, feel
201free to ask in the comments.
generated by cgit v1.2.3 (git 2.46.0) at 2026-05-01 00:37:12 +0000