SI26 3DS-Zine: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 489: | Line 489: | ||
== References == | == References == | ||
https://pad.xpub.nl/p/3DS_Browser_Investigation | https://pad.xpub.nl/p/3DS_Browser_Investigation | ||
Revision as of 19:34, 13 March 2025
Why
This SI fundamentally focuses on web-making as a craft, which is something that clearly emerged in the selected texts of the Reader.
Media archeology is also another big part of it, going back in time to explore forgotten devices and their workings (the plotters and the dot matrix printers)
From these two topics we decided to make something exclusive for one device, against the idea to make websites to accomodate all.
Shortly after we started looking into the Nintendo 3DS, and its unique individual peculiarities.
Specs
☻ Screens
Upper screen:
- LCD screen
- 5:3
- 400 x 240 pixels (2 layered screens -> 3D effect using MPO)
Bottom screen:
- LCD screen
- 4:3
- 320 x 240 pixels
- resistive touchscreen (pressure sensitive)
☻ 3D Effect
The upper screen has two superimposed LCD screens. When 3D-effect is active, the two screens slightly shift to the left and right respectively, which creates a 3-dimensional effect. 400 x 240 pixels per screen. The 3D view can be adjusted using the depth slider.
☻ Cameras
The 3DS has 3 camera lenses. One inner camera, and two outside camera lenses able to take 3D pictures.
Regular pictures are in the JPG format. 3D pictures are in the MPO (Multi-Picture Object Bitmap file) format.
☻ MPO
An MPO file contains two JPG images. By reading a MPO file with a supporting device, the 2D JPGS create a 3D image.
A device which does not support MPO cannot open and display the 3D image and may only display a JPG image version.
Read More [[1]]
Internet Browser
☻ NetFront Browser NX
First tests
Initially we tried to see what worked and what didn't by browsing a bit (checking if the wiki, the hub, the previous SI website and so on, worked).
Then we made our own pages, to test what worked and what didn't further.
10/02/25
Our first little experiments were mostly about creating websites and seeing how they work on the 3DS. We made a website with text, a website using images and Gifs and one website to load a 3D image (.mpo).
After these first experiments, we decided to start doing Acid Tests. And purposefully document what works and what does not on the Nintendo 3DS and the Kindle. Additionally, we decided to use this research to come up with strategies, to exploit the differences in the different browser capabilities to create webpages for the specific devices' browser.
14/03/25
The 3DS XL is way faster than a regular 3DS!
The h1, h2, [...] hierarchy will always prevail over the font-size we try to define by using /vh/ and /vw/ units. That stops when we use pixels though??
More organized tests
Doriane introduced us to Acid3, a test web page that checks a browser's with various web standards. We made our own Acid-esque page to check which properties were working in a visual way.
HTML + CSS + JavaScript
|
3DS
Browser |
Kindle
Browser |
Note | Counter
Strategy |
|---|---|---|---|---|
<audio>
|
☒ | |||
<b>
|
✓ | ✓ | ||
<blockquote>
|
||||
<br>
|
✓ | ✓ | ||
<button>
|
||||
<code>
|
||||
<h1> to <h6>
|
✓ | ✓ | ||
<iframe>
|
||||
<link>
|
||||
<object>
|
||||
<p>
|
✓ | ✓ | ||
<picture>
|
||||
<small>
|
||||
<span>
|
||||
<svg>
|
☒ | ✓ | ||
<table>
|
||||
<title>
|
||||
.jpg
|
☒ | ✓ | works on 3DS but loads really slow | |
.png
|
☒ | ✓ | works on 3DS but loads really slow | |
.gif
|
✓ | ✓ | fastest loading 'image' format & animations work but are slowed | could use high fps -> slowed on 3DS |
.mpo
|
✓ | ☒ | 3D image -> opens the image in new tab | we should take fun pictures with the 3DS |
background-color:
|
✓ | ☹ Gradients do not work ☹ | could try gradients that obscure the text on the browser | |
font-family:
|
☒ | ✓ | 3DS: default font RodinNTLG only
Kindle: Embedded font possible |
dingbat font (symbols) to 'encrypt' the text |
font-style: normal;
|
||||
font-style: italic;
|
||||
font-style: oblique;
|
||||
font-weight: normal;
|
||||
font-weight: bold;
|
||||
font-size:
|
✓ | |||
margin:
|
✓ | 3DS: not super reliable! Sometimes puts extra margins between divs | we could exploit the 'unwanted' margins | |
text-align: left;
|
✓ | ✓ | ||
text-align: right;
|
✓ | ✓ | ||
text-align: center;
|
✓ | ✓ | ||
text-align: justify;
|
☒ | |||
color:
|
✓ | ☒ | ||
line-height:
|
☒? ✓ | ✓ | ||
border:
|
⍰ | ✓ | ||
border-radius:
|
⍰ | ✓ | ||
-webkit-text-stroke:
|
☒ | ✓ | ||
text-indent:
|
✓ | ✓ | ||
text-shadow:
|
☒ | ✓ | works on kindle but without colors obviously | |
text-decoration-line: underline;
|
✓ | ✓ | ||
text-decoration-line: overline;
|
✓ | ✓ | ||
text-decoration-line: line-through;
|
✓ | ✓ | ||
text-decoration-line: overline underline;
|
✓ | ✓ | ||
text-decoration-style: solid;
|
⍰ | ✓ | ||
text-decoration-style: double;
|
☒ | ☒ | ||
text-decoration-style: dashed;
|
☒ | ☒ | ||
text-decoration-style: dotted;
|
☒ | ☒ | ||
text-decoration-style: wavy;
|
☒ | ☒ | ||
text-decoration-thickness:
|
☒ | ☒ | ||
text-transform: uppercase;
|
✓ | ✓ | ||
text-transform: lowercase;
|
✓ | ✓ | ||
text-transform: capitalize;
|
☒ | ✓ | ||
letter-spacing:
|
✓ | ✓ | ||
word-spacing:
|
✓ | ✓ | ||
white-space: wrap;
|
✓ | ✓ | ||
white-space: nowrap;
|
✓ | ✓ | ||
@media only screen and (max-width: 400px)
|
✓ |
| Unit | Laptop | 3DS/XL | 3DS/XL Comments | Kindle | Kindle Comments |
|---|---|---|---|---|---|
| px | ✓ | ✓ | ✓ | ||
| vh | ✓ | ☒ (✓) | works for objects and divs, not for text with h1, h2 etc | ✓ | |
| vw | ✓ | ☒ | ✓ | ||
| em | |||||
| % | ✓ | ☒ | |||
Presentation
- Make a "call for devices" to ask people to bring their own 3DS to the event.
- Make some mock advertisement that is the opposite of today's marketing slogans (ex. works on all devices).
- At the event make a pillow fort on site and place the 3DSs inside, currently we have 6.
References
https://pad.xpub.nl/p/3DS_Browser_Investigation
https://www.copetti.org/writings/consoles
https://en.wikipedia.org/wiki/Nintendo_3DS#Internet_browser