aboutsummaryrefslogtreecommitdiff
path: root/public/wap-mobile-web-before-the-web.html
diff options
context:
space:
mode:
Diffstat (limited to 'public/wap-mobile-web-before-the-web.html')
-rwxr-xr-xpublic/wap-mobile-web-before-the-web.html134
1 files changed, 134 insertions, 0 deletions
diff --git a/public/wap-mobile-web-before-the-web.html b/public/wap-mobile-web-before-the-web.html
new file mode 100755
index 0000000..df02e10
--- /dev/null
+++ b/public/wap-mobile-web-before-the-web.html
@@ -0,0 +1,134 @@
1<!doctype html><html lang=en-us><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL69vf8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv76+/8LBwQkAAAAAAAAAAAAAAAC+vb3/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL+9vf/Bv78JAAAAAAAAAAAAAAAAu7q6/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC7ubr/vr29CAAAAAAAAAAAy8nJAZ6foP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnqGj/6GipAoAAAAAHLjU/xcXHf/BwsL/I8XY/yPK3v8XGiD/IbjL/yPF2f8XGiD/Fxkf/yLF2f8gnK3/Fxog/62ztv8fwNf/FRcd/x271v8mz93/GRsi/xkXHf8p097/GiIp/xobIv8p0t3/KdPe/xocIv8fYmr/KNPe/xoZH/8aHCL/J87c/xy81/8VFxz/IsPZ/8zS0/8XGiD/Ir/R/yPH2/8XGiD/Fxkf/yPH2/8dd4T/GBog/yPJ3f8jyNr/uru9/xcUGv8cudb/EhITDKi5vRKlvMP/RUpOERwcHRAdOj4QHTk8EBwdHRAdNTgQHTo/EBwcHRAcHB0QSGduEKW4vf+koqQfHzg+EBqz0ewSFRv7EyMr/xq51vsTERb7ExUb+xq41fsau9j7ExUb+xiPp/sZudb7ExUb+xMVG/sZuNX/GKvI/BIUGfMdvdn/IrfL/xcaIP8n1eb/J9Dh/xkcIf8ZGR7/J8/f/xxCSv8ZGyH/J9Dg/ybQ4P8ZHCL/FSQs/yPK3/8UExj/GE1b/ybS5P8ZGB7/Ghwj/ynW5P8p2Ob/Ghwi/yWrtv8p1eH/Ghwi/xocIv8p1uT/J8XT/xkcIv8m1un/Hb7d/xUYH/8hzOr/HtHu/xcaIf8XGB//I8vi/xgxOv8XGSD/I8rg/yPK4P8XGiD/GUFL/yPP6f8SERj/Fhkh/x3A4f8AAAAAJ2f9/ydr//8mZPH/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlYu38J2v//ydo/f8AAAAAAAAAAAd8/fkFqf//Iob8sAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMY39awWr//8FfP3/AAAAAAAAAAAFm/7/SfD//wR+/f8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOB/f9B7v//BaX+/wAAAAAAAAAAQ878SAyZ/v9n1v4KAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADu9v8DDJb+/z3N/XgAAAAA3/sAAN/7AADf+wAA3/sAAAAAAAAAAAAAAAAAAN/7AAAAAAAAAAAAAAAAAAAAAAAAj/EAAI/5AACP8QAA3/sAAA==" rel=icon type=image/x-icon><title>Wireless Application Protocol and the mobile web before the web</title><meta name=description content="A little stroll down the history laneAbout two weeks ago, I watched this outstanding documentary on YouTubeSpringboard: the secret history of the first realsmartphone about the history ofsmartphones and phones in general."><link rel=alternate type=application/rss+xml title="Mitja Felicijan's posts" href=https://mitjafelicijan.com/index.xml><link rel=alternate type=application/rss+xml title="Mitja Felicijan's notes" href=https://mitjafelicijan.com/notes.xml><style>body{padding:1rem;max-width:760px;background:#fff;font-family:sans-serif;line-height:1.35rem;font-size:16px;margin:0 auto}hr{margin-block-start:1.5rem}h1,h2,h3{line-height:initial}h1{font-size:xx-large}footer{margin-block-start:2rem}cap{text-transform:capitalize}table{max-width:100%;width:100%;border-collapse:separate;border-spacing:2px;border:1px solid #000;border-left:1px solid #999;border-top:1px solid #999}blockquote{font-style:italic}table thead{background:#eee}ul.list li{padding:.2em 0}ul{line-height:1.4em}td,th{border:1px solid #000;padding:4px;border-right:1px solid #999;border-bottom:1px solid #999;text-align:left}pre{text-wrap:nowrap;overflow-x:auto;padding:0 1em;border:1px solid #dcdcdc}code{padding:0 3px;font-size:14px;border:0}pre code{line-height:1.3em}pre,code,pre *,code *{font-family:monospace}figure{margin-inline-start:0;margin-inline-end:0}figcaption{text-align:center}figcaption p{margin:.3em 0 0}img,video,audio{max-width:100%}header{display:flex;flex-direction:row;gap:3rem}nav{display:flex;gap:.75rem}nav.main{flex-grow:1}.pstatus-orange{background:gold}.pstatus-green{background:#9acd32}.pstatus-red{background:#cd5c5c}@media only screen and (max-width:600px){body{padding:15px}header{flex-direction:column;gap:1rem}a{word-wrap:break-word}}</style><header><nav class=main itemscope itemtype=http://schema.org/SiteNavigationElement role=toolbar><a href=/>Home</a>
2<a href=https://git.mitjafelicijan.com/ target=_blank>Git</a>
3<a href=https://files.mitjafelicijan.com/ target=_blank>Files</a>
4<a href=/radio.pls target=_blank>Radio</a>
5<a href=/mitjafelicijan.pgp.pub.txt target=_blank>PGP</a>
6<a href=/curriculum-vitae.html>CV</a>
7<a href=/index.xml target=_blank>RSS</a></nav></header><main role=main><article itemtype=http://schema.org/Article><h1 itemtype=headline>Wireless Application Protocol and the mobile web before the web</h1><p><cap>post</cap>, Dec 30, 2021 on <a href=https://mitjafelicijan.com>Mitja Felicijan's blog</a><div><h2 id=a-little-stroll-down-the-history-lane>A little stroll down the history lane</h2><p>About two weeks ago, I watched this outstanding documentary on YouTube
8<a href="https://www.youtube.com/watch?v=b9_Vh9h3Ohw">Springboard: the secret history of the first real
9smartphone</a> about the history of
10smartphones and phones in general. It brought back so many memories. I never had
11an actual smartphone before the Android. The closest to smartphone was <a href=https://www.gsmarena.com/sony_ericsson_p1-1982.php>Sony
12Ericsson P1</a>. A fantastic
13phone and I broke it in Prague after a party and that was one of those rare
14occasions where I was actually mad at myself. But nevertheless, after that
15phone, the next one was an Android one.<p>Before that, I only owned normal phones from Nokia and Siemens etc. Nothing
16special, actually. These are the phones we are talking about. Before 2007.
17Apple and Android phones didn't exist yet.<p>These phones were rocking:<ul><li>No selfie cameras.<li>~2 inch displays.<li>~120 MHz beast CPU's.<li>144p main cameras.<li>But they had a headphone jack.</ul><p>Let's take a look at these beauties.<figure><img src=/posts/wap/phones.gif alt="Old phones"></figure><h2 id=wap---wireless-application-protocol>WAP - Wireless Application Protocol</h2><p>Not that one! We are talking about Wireless Application Protocol and not Cardi
18B's song 😃<p>WAP stands for Wireless Application Protocol. It is a protocol designed for
19micro-browsers, and it enables the access of internet in the mobile devices. It
20uses the mark-up language WML (Wireless Markup Language and not HTML), WML is
21defined as XML 1.0 application. Furthermore, it enables creating web
22applications for mobile devices. In 1998, WAP Forum was founded by Ericson,
23Motorola, Nokia and Unwired Planet whose aim was to standardize the various
24wireless technologies via protocols.
25<a href=https://www.geeksforgeeks.org/wireless-application-protocol/>(source)</a><p>WAP protocol was resulted by the joint efforts of the various members of WAP
26Forum. In 2002, WAP forum was merged with various other forums of the industry,
27resulting in the formation of Open Mobile Alliance (OMA).
28<a href=https://www.geeksforgeeks.org/wireless-application-protocol/>(source)</a><p>These were some wild times. Devices had tiny screens and data transmission rates
29were abominable. But they were capable of rendering WML (Wireless Markup
30Language). This was very similar to HTML, actually. It is a markup language,
31after all.<p>These pages could be served by <a href=https://apache.org/>Apache</a> and could be
32generated by CGI scripts on the backend. The only difference was the limited
33markup language.<h2 id=wml---wireless-markup-language>WML - Wireless Markup Language</h2><p>Just like web browsers use HTML for content structure, older mobile device
34browsers use WML - if you need to support really old mobile phones using WML
35browsers, you will need to know about it. WML is XML-based (an XML vocabulary
36just like XHTML and MathML, but not HTML) and does not use the same metaphor as
37HTML. HTML is a single document with some metadata packed away in the head, and
38a body encapsulating the visible page. With WML, the metaphor does not envisage
39a page, but rather a deck of cards. A WML file might have several pages or cards
40contained within it.
41<a href=https://www.w3.org/wiki/Introduction_to_mobile_web>(source)</a><pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span><span style=color:#00f>&lt;?xml version=&#34;1.0&#34;?&gt;</span>
42</span></span><span style=display:flex><span><span style=color:#00f>&lt;!DOCTYPE wml PUBLIC &#34;-//WAPFORUM//DTD WML 1.1//EN&#34; &#34;http://www.wapforum.org/DTD/wml_1.1.xml&#34;&gt;</span>
43</span></span><span style=display:flex><span>&lt;wml&gt;
44</span></span><span style=display:flex><span> &lt;card id=<span style=color:#a31515>&#34;home&#34;</span> title=<span style=color:#a31515>&#34;Example Homepage&#34;</span>&gt;
45</span></span><span style=display:flex><span> &lt;p&gt;Welcome to the Example homepage&lt;/p&gt;
46</span></span><span style=display:flex><span> &lt;/card&gt;
47</span></span><span style=display:flex><span>&lt;/wml&gt;
48</span></span></code></pre><p>There is an amazing tutorial on <a href=https://www.tutorialspoint.com/wml/index.htm>Tutorialpoint about
49WML</a>.<h2 id=converting-digg-to-wml>Converting Digg to WML</h2><p>This task is completely useless and not really feasible nowadays, but I had to
50give it a try for old-time sake. Since the data is already there in a form of
51RSS feed, I could take this feed and parse it and create a WML version of the
52homepage.<p>We will need:<ul><li>Python3 + Pip<li>ImageMagick<li>feedparser and mako templating</ul><pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span><span style=color:green># for fedora 35</span>
53</span></span><span style=display:flex><span>sudo dnf install ImageMagick python3-pip
54</span></span><span style=display:flex><span>
55</span></span><span style=display:flex><span><span style=color:green># tempalting engine for python</span>
56</span></span><span style=display:flex><span>pip install mako --user
57</span></span><span style=display:flex><span>
58</span></span><span style=display:flex><span><span style=color:green># for parsing rss feeds</span>
59</span></span><span style=display:flex><span>pip install feedparser --user
60</span></span></code></pre><p>Project folder structure should look like the following.<pre><code>12:43:53 m@khan wap → tree -L 1
61.
62├── generate.py
63└── template.wml
64
65</code></pre><p>After that, I created a small template for the homepage.<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span><span style=color:#00f>&lt;?xml version=&#34;1.0&#34;?&gt;</span>
66</span></span><span style=display:flex><span><span style=color:#00f>&lt;!DOCTYPE wml PUBLIC &#34;-//WAPFORUM//DTD WML 1.2//EN&#34; &#34;http://www.wapforum.org/DTD/wml_1.2.xml&#34;&gt;</span>
67</span></span><span style=display:flex><span>
68</span></span><span style=display:flex><span>&lt;wml&gt;
69</span></span><span style=display:flex><span>
70</span></span><span style=display:flex><span> &lt;card title=<span style=color:#a31515>&#34;Digg - What the Internet is talking about right now&#34;</span>&gt;
71</span></span><span style=display:flex><span>
72</span></span><span style=display:flex><span> % for item in entries:
73</span></span><span style=display:flex><span> &lt;p&gt;&lt;img src=<span style=color:#a31515>&#34;/images/${item.id}.jpg&#34;</span> width=<span style=color:#a31515>&#34;175&#34;</span> height=<span style=color:#a31515>&#34;95&#34;</span> alt=<span style=color:#a31515>&#34;${item.title}&#34;</span> /&gt;&lt;/p&gt;
74</span></span><span style=display:flex><span> &lt;p&gt;&lt;small&gt;${item.kicker}&lt;/small&gt;&lt;/p&gt;
75</span></span><span style=display:flex><span> &lt;p&gt;&lt;big&gt;&lt;b&gt;${item.title}&lt;/b&gt;&lt;/big&gt;&lt;/p&gt;
76</span></span><span style=display:flex><span> &lt;p&gt;${item.description}&lt;/p&gt;
77</span></span><span style=display:flex><span> % endfor
78</span></span><span style=display:flex><span>
79</span></span><span style=display:flex><span> &lt;/card&gt;
80</span></span><span style=display:flex><span>
81</span></span><span style=display:flex><span>&lt;/wml&gt;
82</span></span></code></pre><p>And the parser that parses RSS feed looks like this.<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span><span style=color:#00f>import</span> os
83</span></span><span style=display:flex><span><span style=color:#00f>import</span> feedparser
84</span></span><span style=display:flex><span><span style=color:#00f>from</span> mako.template <span style=color:#00f>import</span> Template
85</span></span><span style=display:flex><span>
86</span></span><span style=display:flex><span>os.system(<span style=color:#a31515>&#39;mkdir -p www/images&#39;</span>)
87</span></span><span style=display:flex><span>
88</span></span><span style=display:flex><span>template = Template(filename=<span style=color:#a31515>&#39;template.wml&#39;</span>)
89</span></span><span style=display:flex><span>
90</span></span><span style=display:flex><span>feed = feedparser.parse(<span style=color:#a31515>&#39;https://digg.com/rss/top.xml&#39;</span>)
91</span></span><span style=display:flex><span>
92</span></span><span style=display:flex><span>entries = feed.entries[:15]
93</span></span><span style=display:flex><span>
94</span></span><span style=display:flex><span><span style=color:#00f>for</span> entry <span style=color:#00f>in</span> entries:
95</span></span><span style=display:flex><span> print(<span style=color:#a31515>&#39;Processing image with id </span><span style=color:#a31515>{}</span><span style=color:#a31515>&#39;</span>.format(entry.id))
96</span></span><span style=display:flex><span> os.system(<span style=color:#a31515>&#39;wget -q -O www/images/</span><span style=color:#a31515>{}</span><span style=color:#a31515>.jpg &#34;</span><span style=color:#a31515>{}</span><span style=color:#a31515>&#34;&#39;</span>.format(entry.id, entry.links[1].href))
97</span></span><span style=display:flex><span> os.system(<span style=color:#a31515>&#39;convert www/images/</span><span style=color:#a31515>{}</span><span style=color:#a31515>.jpg -type Grayscale -resize 175x -depth 3 -quality 30 www/images/</span><span style=color:#a31515>{}</span><span style=color:#a31515>.jpg&#39;</span>.format(entry.id, entry.id))
98</span></span><span style=display:flex><span>
99</span></span><span style=display:flex><span>html = template.render(entries = entries)
100</span></span><span style=display:flex><span>
101</span></span><span style=display:flex><span><span style=color:#00f>with</span> open(<span style=color:#a31515>&#39;www/index.wml&#39;</span>, <span style=color:#a31515>&#39;w+&#39;</span>) <span style=color:#00f>as</span> fp:
102</span></span><span style=display:flex><span> fp.write(html)
103</span></span></code></pre><p>This script will create a folder <code>www</code> and in the folder <code>www/images</code> for
104storing resized images.<blockquote><p>Be sure you don't use SSL and use just normal HTTP for serving the content.
105These old phones will have problems with TLS 1.3 etc.</blockquote><p>If you look at the python file, I convert all the images into tiny B&amp;W images.
106They should be WBMP (Wireless BitMaP) but I choose JPEGs for this, and it seems
107to work properly.<p>Because I currently don't have a phone old enough to test it on, I used an
108emulator. And it was really hard to find one. I found <a href=http://wap-proof.sharewarejunction.com/>WAP
109Proof</a> on shareware junction, and it
110did the job well enough. I will try to find and actual device to test it on.<p><video src=/posts/wap/emulator.mp4 controls></video><p>If you are using Nginx to serve the contents, add a directive to the hosts file
111that will automatically server <code>index.wml</code> file.<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span><span style=color:#00f>server</span> {
112</span></span><span style=display:flex><span> <span style=color:#00f>index</span> <span style=color:#a31515>index.wml</span> <span style=color:#a31515>index.html</span> <span style=color:#a31515>index.htm</span> <span style=color:#a31515>index.nginx-debian.html</span>;
113</span></span><span style=display:flex><span>}
114</span></span></code></pre><h2 id=conclusion>Conclusion</h2><p>Well, this was pointless, but very fun! I hope you enjoyed it as much as I did.
115I will try to find an old phone to test it on. If you have any questions, feel
116free to ask in the comments.</div></article></main><section><hr><h2>Posts from blogs I follow around the net</h2><ul><li><a href=https://chotrin.org/writing/2023-10-20.html target=_blank rel=noopener>OpenBSD upgrade and fall things.</a><div>Been AFK for a bit. It's autumn and I upgraded this server to OpenBSD 7.4! — <a href=https://chotrin.org>chötrin's wiki.</a><li><a href=https://mirzapandzo.com/next-image-url-parameter-is-valid-but-upstream-response-is-invalid target=_blank rel=noopener>Next/Image "url" parameter is valid but upstream response is invalid</a><div>Getting "url" parameter is valid but upstream response is invalid error with Next/Image on WSL2 — <a href=https://mirzapandzo.com/>Mirza Pandzo's Blog</a><li><a href=https://drewdevault.com/2023/10/13/Going-off-script.html target=_blank rel=noopener>Going off-script</a><div>There is a phenomenon in society which I find quite bizarre. Upon our entry to
117this mortal coil, we are endowed with self-awareness, agency, and free will.
118Each of th… — <a href=https://drewdevault.com>Drew DeVault's blog</a><li><a href=https://solar.lowtechmagazine.com/2023/10/workshop-in-rotterdam-how-to-build-a-bike-generator/ target=_blank rel=noopener>Workshop in Rotterdam: How to Build a Bike Generator</a><div>Afbeelding: Low-tech Magazine workshop in Rotterdam, the Netherlands. Poster: Marie Verdeil. Image: Sara Vercauteren
119The workshop takes place on behalf of the “Hou… — <a href=https://solar.lowtechmagazine.com/posts/>LOW←TECH MAGAZINE English</a><li><a href="http://offbeatpursuit.com:80/blog/?id=24" target=_blank rel=noopener>Printf debugging</a><div>tags:
120plan9
121There’s no shame in that. Yes, there is documentation, code to be
122read, and debuggers to be used. But sometimes you just need to “see”
123what is happening.
124So… — <a href=http://offbeatpursuit.com:80/blog/>WLOG - blog</a><li><a href=https://neil.computer/notes/chart-of-accounts-for-startups-and-saas-companies/ target=_blank rel=noopener>Chart of Accounts for Startups and SaaS Companies</a><div>Accounting is fundamental to starting a business. You need to have a basic understanding of accounting principles and essential bookkeeping. I had to learn it. Ther… — <a href=https://neil.computer/>Neil Panchal</a><li><a href=https://journal.valeriansaliou.name/deploy-a-nomad-cluster-on-alpine-linux-with-vultr/ target=_blank rel=noopener>Deploy a Nomad Cluster on Alpine Linux with Vultr</a><div>After spending countless hours trying to understand how to deploy my apps on Kubernetes for the first time to host Mirage, an AI API service that I run, I ended up … — <a href=https://journal.valeriansaliou.name/>Valerian Saliou</a><li><a href=https://jcs.org/2023/10/17/wikipedia target=_blank rel=noopener>Wikipedia Reader 1.0 Released</a><div>Wikipedia Reader
1251.0 has been released:
126wikipedia-1.0.sit
127(StuffIt 3 archive, includes
128source code
129and THINK C 5 project file)
130SHA256: 360e12d064f6579695f1e627ce34cb2f0… — <a href=https://jcs.org/>joshua stein</a></ul><p><a href=https://git.sr.ht/~sircmpwn/openring>Generated with openring.</a></section><footer><hr><p><big><strong>Want to comment or have something to add?</strong></big><p>You can write me an email
131at <a href=mailto:m@mitjafelicijan.com>m@mitjafelicijan.com</a> or
132catch up with me <a href=https://telegram.me/mitjafelicijan target=_blank>on Telegram</a>.<hr><p>This website does not track you. Content is made available under
133the <a href=https://creativecommons.org/licenses/by/4.0/ target=_blank rel=noreferrer>CC BY 4.0 license</a> unless specified
134otherwise. Blog is also available as <a href=/index.xml target=_blank>RSS feed</a>.</footer> \ No newline at end of file
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-30 20:30:12 +0000