aboutsummaryrefslogtreecommitdiff
path: root/public/wap-mobile-web-before-the-web.html
diff options
context:
space:
mode:
authorMitja Felicijan <m@mitjafelicijan.com>2023-07-08 23:25:41 +0200
committerMitja Felicijan <m@mitjafelicijan.com>2023-07-08 23:25:41 +0200
commitcd6644ea4ddc78597934ab0ef5ba50e3c3daa927 (patch)
tree03de331a8db6386dfd6fa75155bfbcea6b4feaf3 /public/wap-mobile-web-before-the-web.html
parent84ed124529ffeee1590295b8de3a8faf51848680 (diff)
downloadmitjafelicijan.com-cd6644ea4ddc78597934ab0ef5ba50e3c3daa927.tar.gz
Moved to a simpler SSG
Diffstat (limited to 'public/wap-mobile-web-before-the-web.html')
-rwxr-xr-xpublic/wap-mobile-web-before-the-web.html120
1 files changed, 120 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..255e1ae
--- /dev/null
+++ b/public/wap-mobile-web-before-the-web.html
@@ -0,0 +1,120 @@
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:times new roman,Times,serif;line-height:1.35rem}hr{margin-block-start:1.5rem}h1,h2,h3{line-height:initial}footer{margin-block-start:3rem}table{max-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}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;margin-block-start:1.5rem;margin-block-end:1.5rem;padding:.5rem 0;border-top:1px solid #000;border-bottom:1px solid #000}pre code{line-height:1.3em}pre,code,pre *,code *{font-family:monospace;font-size:initial!important}img,video,audio{max-width:100%}header{display:flex;flex-direction:row;gap:3rem}nav{display:flex;gap:.75rem}.pstatus-orange{background:gold}.pstatus-green{background:#9acd32}.pstatus-red{background:#cd5c5c}@media only screen and (max-width:600px){header{flex-direction:column;gap:1rem}a{word-wrap:break-word}}</style><header><nav class=main><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=/mitjafelicijan.pgp.pub.txt target=_blank>PGP</a>
5<a href=/curriculum-vitae.html>CV</a>
6<a href=/index.xml target=_blank>RSS</a></nav></header><main><div><h1>Wireless Application Protocol and the mobile web before the web</h1><p>Dec 30, 2021<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
7<a href="https://www.youtube.com/watch?v=b9_Vh9h3Ohw">Springboard: the secret history of the first real
8smartphone</a> about the history of
9smartphones and phones in general. It brought back so many memories. I never had
10an actual smartphone before the Android. The closest to smartphone was <a href=https://www.gsmarena.com/sony_ericsson_p1-1982.php>Sony
11Ericsson P1</a>. A fantastic
12phone and I broke it in Prague after a party and that was one of those rare
13occasions where I was actually mad at myself. But nevertheless, after that
14phone, the next one was an Android one.<p>Before that, I only owned normal phones from Nokia and Siemens etc. Nothing
15special, actually. These are the phones we are talking about. Before 2007.
16Apple 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.<p><img src=/assets/wap/phones.gif alt="Old phones"><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
17B's song 😃<p>WAP stands for Wireless Application Protocol. It is a protocol designed for
18micro-browsers, and it enables the access of internet in the mobile devices. It
19uses the mark-up language WML (Wireless Markup Language and not HTML), WML is
20defined as XML 1.0 application. Furthermore, it enables creating web
21applications for mobile devices. In 1998, WAP Forum was founded by Ericson,
22Motorola, Nokia and Unwired Planet whose aim was to standardize the various
23wireless technologies via protocols.
24<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
25Forum. In 2002, WAP forum was merged with various other forums of the industry,
26resulting in the formation of Open Mobile Alliance (OMA).
27<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
28were abominable. But they were capable of rendering WML (Wireless Markup
29Language). This was very similar to HTML, actually. It is a markup language,
30after all.<p>These pages could be served by <a href=https://apache.org/>Apache</a> and could be
31generated by CGI scripts on the backend. The only difference was the limited
32markup 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
33browsers use WML - if you need to support really old mobile phones using WML
34browsers, you will need to know about it. WML is XML-based (an XML vocabulary
35just like XHTML and MathML, but not HTML) and does not use the same metaphor as
36HTML. HTML is a single document with some metadata packed away in the head, and
37a body encapsulating the visible page. With WML, the metaphor does not envisage
38a page, but rather a deck of cards. A WML file might have several pages or cards
39contained within it.
40<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>
41</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>
42</span></span><span style=display:flex><span>&lt;wml&gt;
43</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;
44</span></span><span style=display:flex><span> &lt;p&gt;Welcome to the Example homepage&lt;/p&gt;
45</span></span><span style=display:flex><span> &lt;/card&gt;
46</span></span><span style=display:flex><span>&lt;/wml&gt;
47</span></span></code></pre><p>There is an amazing tutorial on <a href=https://www.tutorialspoint.com/wml/index.htm>Tutorialpoint about
48WML</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
49give it a try for old-time sake. Since the data is already there in a form of
50RSS feed, I could take this feed and parse it and create a WML version of the
51homepage.<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>
52</span></span><span style=display:flex><span>sudo dnf install ImageMagick python3-pip
53</span></span><span style=display:flex><span>
54</span></span><span style=display:flex><span><span style=color:green># tempalting engine for python</span>
55</span></span><span style=display:flex><span>pip install mako --user
56</span></span><span style=display:flex><span>
57</span></span><span style=display:flex><span><span style=color:green># for parsing rss feeds</span>
58</span></span><span style=display:flex><span>pip install feedparser --user
59</span></span></code></pre><p>Project folder structure should look like the following.<pre><code>12:43:53 m@khan wap → tree -L 1
60.
61├── generate.py
62└── template.wml
63
64</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>
65</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>
66</span></span><span style=display:flex><span>
67</span></span><span style=display:flex><span>&lt;wml&gt;
68</span></span><span style=display:flex><span>
69</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;
70</span></span><span style=display:flex><span>
71</span></span><span style=display:flex><span> % for item in entries:
72</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;
73</span></span><span style=display:flex><span> &lt;p&gt;&lt;small&gt;${item.kicker}&lt;/small&gt;&lt;/p&gt;
74</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;
75</span></span><span style=display:flex><span> &lt;p&gt;${item.description}&lt;/p&gt;
76</span></span><span style=display:flex><span> % endfor
77</span></span><span style=display:flex><span>
78</span></span><span style=display:flex><span> &lt;/card&gt;
79</span></span><span style=display:flex><span>
80</span></span><span style=display:flex><span>&lt;/wml&gt;
81</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
82</span></span><span style=display:flex><span><span style=color:#00f>import</span> feedparser
83</span></span><span style=display:flex><span><span style=color:#00f>from</span> mako.template <span style=color:#00f>import</span> Template
84</span></span><span style=display:flex><span>
85</span></span><span style=display:flex><span>os.system(<span style=color:#a31515>&#39;mkdir -p www/images&#39;</span>)
86</span></span><span style=display:flex><span>
87</span></span><span style=display:flex><span>template = Template(filename=<span style=color:#a31515>&#39;template.wml&#39;</span>)
88</span></span><span style=display:flex><span>
89</span></span><span style=display:flex><span>feed = feedparser.parse(<span style=color:#a31515>&#39;https://digg.com/rss/top.xml&#39;</span>)
90</span></span><span style=display:flex><span>
91</span></span><span style=display:flex><span>entries = feed.entries[:15]
92</span></span><span style=display:flex><span>
93</span></span><span style=display:flex><span><span style=color:#00f>for</span> entry <span style=color:#00f>in</span> entries:
94</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))
95</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))
96</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))
97</span></span><span style=display:flex><span>
98</span></span><span style=display:flex><span>html = template.render(entries = entries)
99</span></span><span style=display:flex><span>
100</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:
101</span></span><span style=display:flex><span> fp.write(html)
102</span></span></code></pre><p>This script will create a folder <code>www</code> and in the folder <code>www/images</code> for
103storing resized images.<blockquote><p>Be sure you don't use SSL and use just normal HTTP for serving the content.
104These 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.
105They should be WBMP (Wireless BitMaP) but I choose JPEGs for this, and it seems
106to work properly.<p>Because I currently don't have a phone old enough to test it on, I used an
107emulator. And it was really hard to find one. I found <a href=http://wap-proof.sharewarejunction.com/>WAP
108Proof</a> on shareware junction, and it
109did the job well enough. I will try to find and actual device to test it on.<p><video src=/assets/wap/emulator.mp4 controls></video><p>If you are using Nginx to serve the contents, add a directive to the hosts file
110that 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> {
111</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>;
112</span></span><span style=display:flex><span>}
113</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.
114I will try to find an old phone to test it on. If you have any questions, feel
115free to ask in the comments.</div></div></main><footer><hr><div><h3>Want to comment or have something to add?</h3>You can write me an email at
116<a href=mailto:m@mitjafelicijan.com>m@mitjafelicijan.com</a> or catch up
117with me
118<a href=https://telegram.me/mitjafelicijan target=_blank>on Telegram</a>.</div><hr><p>This website does not track you. Content is made available under
119the <a href=https://creativecommons.org/licenses/by/4.0/ target=_blank rel=noreferrer>CC BY 4.0 license</a> unless specified
120otherwise. Blog feed is available as <a href=/index.xml target=_blank>RSS feed</a>.</footer><script src=https://cdn.usefathom.com/script.js data-site=XHQARKXP defer></script> \ No newline at end of file
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-30 21:41:24 +0000