In the post on alt-text from the other day we briefly talked about our perplexity about self descriptions: the trendy practice of describing one’s appearance when speaking at online conferences.
The new WebAIM screen reader user survey came out, and it turns out that 68% or respondents agree with us.
Our webdev approach tends towards the minimal, we’re allergic to leaky abstractions. Even using WordPress for this blog is mostly motivated by learning more about such a popular system, for everything else we use good old HTML + CSS + JS, served by a good old Apache web server.
PWAs (Progressive Web Apps) are websites which can be installed on a user’s device, and that can even be listed in app stores. Our research indicates that a certain percentage of users search their app stores before searching on the web. This is honestly hard to comprehend, but that does not mean that we don’t want to serve those users. Most people building PWAs use JavaScript frameworks, like React, Vue, Angular, Flutter, and just so many others.
We’re deeply suspicious of those framework. It is certainly possible to use them well, but the examples of their misuse, and of people learning them before learning actual web development, and consequently perpetuating terrible, unaccessible, practices, are just too widespread to ignore.
Luckily, we don’t have to get our hands dirty to get the benefits of PWAs, we just need to add a manifest and a service worker. We don’t even need to actually write them ourselves! We can just install PWABuilder Studio for Visual Studio code, open the folder for our web app, and run a couple of commands.
Specifically, press Ctrl+Shift+P to open the command Palette, write PWA to find the relevant commands, and then run PWA Builder Studio: Generate Web Manifest. This will generate a manifest.json file, in which you’ll have to specify your app name, canonical URL, icon, and so on.
Then run PWA Builder Studio: Generate Service Worker to enable offline functionality.
You can test your results as soon as you’ve uploaded your files to a web server of your choice, we tried with the demo of an audio-guide product that we’re building. If you insert the URL of your web app into the PWABuilder homepage you can obtain a report card, and you can download packages that can be submitted to the main app stores (Windows, Android, iOS, Meta Quest).
And that’s it, the only question is how to communicate the new functionality to your users. Let us know if you have suggestions on that front 😀
https://news.ycombinator.com/item?id=39499207 Hallucinations are inevitable
Opus gets a ML upgrade: https://news.ycombinator.com/item?id=39593256
App for chatting with local AI: https://news.ycombinator.com/item?id=39532367
The Era of 1-bit LLMs: ternary parameters for cost-effective computing
https://stratechery.com/2024/aggregators-ai-risk/
https://www.theverge.com/2024/2/21/24078610/google-gemma-gemini-small-ai-model-open-source
https://www.theverge.com/24054603/chatbot-chatgpt-eliza-history-ai-assistants-video
You can now train a 70b language model at home: https://www.answer.ai/posts/2024-03-06-fsdp-qlora.html
The Pile is a 825 GiB diverse, open source language modelling data set that consists of 22 smaller, high-quality datasets combined together.: https://pile.eleuther.ai/
https://thoughtbot.com/blog/deploy-llm-the-naive-ways
https://www.yitay.net/blog/training-great-llms-entirely-from-ground-zero-in-the-wilderness
We started this company by winning the Bain award at the original BCC Innovation Festival, back in 2022. In a bit of a homecoming, we were tapped to provide immersive services for the next edition of the Festival.
Following the concept from BCC’s own creative department, we created a low-poly version of Rodin’s Le Penseur. In the original concept art the statue was 3D printed, clearly showing the signs of a filament printer. Our own version was materialized with a resin printer:
This model became a sort of leitmotif of the whole immersive experience. We changed the texture to a brushed metal in the corporate green, and we provided the client with renders for web and print channels.
We then proceeded to make this model available in webAR, using the model-viewer library. This will be used in an upcoming promotional campaign, asking the public to share pictures of the statue in their environment, a bit like we did with the whale for the Leverans comic.
We then created the scrollable section of the festival homepage, using a threejs scene embedded in an iframe. All semantically meaningful elements were implemented as standard DOM elements, the 3D is purely decorative, but it does not detract from the accessibility of the content.
Check it out on the Festival home page.
We also built a virtual world on framevr. The design goal was to let users interact in a shared explorable space. We’re pretty proud of the work our architect did, and there is some technically clever work on object instancing, but we’ll have here write a whole post on the matter. Keeping to the high level concept, we have a pretty linear progression from the starting point to the exhibition area, gradually disclosing information to the visitor no matter what path they choose.
We worked pretty hard to balance visual quality with performance, and we can now confidently state that it will work on whatever device you use.
Geodesic rocks in the same material as the Pensatore were inserted throughout, and to tie the concept together we made this short video (pretty early in the process, a lot of the environment is missing):
Please do check out BCC Innovation World, we’ll be expanding it a lot in the next few months.
We really care about accessibility, and alt-text is one of the most visible interventions in this field, thanks to its inclusion in social media UIs and to activist evangelism.
As a primer, Eric Bailey wrote some thoughts about the nuances of the matter: https://ericwbailey.website/published/thoughts-on-embedding-alternative-text-metadata-into-images/
Also check out this post by Heather Buchel, with a much broader focus: https://heather-buchel.com/blog/2024/03/letters-to-an-accessibility-advocate/
What follows are instead our own thoughts.
The general idea is that alt-text is going to be used by anyone who cannot look at a picture, and that it should be as good a substitute as possible. We should think about the meaning of a picture, and about its function in the webpage, and about how the alt-text will be used in practice. A whole lot of images are simply decoration, and the general advice is to exclude them, so that text to speech systems don’t waste time reading descriptions that don’t actually carry any meaning.
However, even extraneous decoration carries connotations that influence the interpretation of the written word. Should we attempt to transmit the same connotations to every user? And should we attempt to provide cultural context for those who lack it? This is the kind of thinking that leads to people giving short self-descriptions at the beginning of online conferences, something that seems to be quite common in the US. I have nothing against it, but I also don’t really understand the value of it. I’ll happily do it when it’s asked, but I don’t do it of my own initiative.
What about images that carry a lot of information? Charts, and graphs, or increasingly maps. How do we enable everyone to access the information in our own 3D spaces?
The short answer is that we try to follow the W3C guidelines:
The longer answer is that it is a bit of an art form, and that sometimes the only solution is to be redundant, and just recreate everything in good old text. This can be hard work, but nobody claimed that having principles is easy.
Specifically for visual art, it is sometimes very hard to motivate clients, we’ve often heard the argument that visually impaired users are intrinsically excluded, or intrinsically uninterested. We’re glad to report that our clients from the banking sector have been universally fully committed to accessibility, they’re institutionally used to it being a legal requirement. (They do tend to use overlays a bit too much, for my tastes)
There has been much ado about the usage of AI for generating alt-text. This is something that already happens a whole lot on social networks. Famous web-usability expert Jakob Nielsen wrote about it recently (I mean, it’s a bit of a wider argument, but very related), and it caused a bit of a shitstorm in the community. I’m just going to link to Adrian Roselli’s take: https://adrianroselli.com/2024/03/jakob-has-jumped-the-shark.html
My own take is that the work needed to make a site accessible is all going towards making the website better.
I’ve learned about this amazing exhibit about reversos at the Prado: https://hyperallergic.com/869083/prado-show-reveals-the-hidden-artworks-on-the-backs-of-masterpieces/
It is truly exhibit design at its best, but it gave me the idea of digitizing not only the back of paintings, but the very structure. I’d like to build an exhibit in which we show how the painting is made, how it looks from every direction, how the frame is built, and even how the canvas has been constructed.
There is also this great video from Christie’s about the back side of paintings, and all the information they can reveal: https://www.christies.com/en/stories/what-to-look-for-on-the-back-of-a-painting-821e1638846944fb9a2b05aad53854fe
This one is pretty basic: in order to change the origin of an object you can right click and choose one of the options:
Or you can set it manually, just go into Edit Mode, then at the top right of the viewfinder go to Options, Transform, Affect Only Origins.
This allows you to move the origin to wherever you want, without affecting the object. Dont’ forget to apply transforms (ctrl+A) when you’re playing around with this stuff.
When in Edit Mode, you can switch the selection mode between Vertex, Edge and Face, using the icons right next to the drop down menu from which you can switch to Object Mode. You can also use the 1, 2, 3 keys as a shortcut.
What I just learned is that if you Shift+click on the selection modes you can activate more than one at a time, it looks like this:
You can then click on whatever mesh element to select it.
The BCC ICCREA group issued a press release about the newly available Sala Venezia Giulia: an additional room for temporary exhibitions in the Arte in Banca virtual gallery.
The room currently hosts 5 works by Graziano Cuberli. An inauguration reception was held in Romans d’Isonzo.
For the occasion we overhauled the rest of the Arte in Banca experience. A new control scheme is now available on mobile devices, and the photogrammetries in rooms 1 and 5 can also be accessed in Augmented Reality.
The original control scheme for the Arte in Banca project aimed at providing one-handed six-degrees-of-freedom movement on a touch device. We used a redundant control scheme for rotation, using both the gyroscope and a one finger drag gesture. This allowed for 3dof rotation, but users found the gyroscope cumbersome to use for long periods, as it imposed ergonomic constraints.
Translation was handled with a one finger press to move forward, and a two fingers tap to move backwards. This movement was combined with the drag rotation to achieve a sort of steering, which was somewhat unwieldy in tight spaces, and didn’t allow for strafing.
We added two joysticks using nipple.js, the left one controls translation, the right one controls rotation. This works well for people used to videogames, others don’t fare as well.
This sent us down a rabbit hole of academic papers, user testing, and just plain old trying other products. We found that despite the popularity of 6dof games on mobile devices, most users are just terrible at achieving any sort of mobility. This is very discouraging given our goals, but we also found out that we score great in the mobile version of Call of Duty.
It seems that there is a reason why our competitors usually restrict movement along one or more axis. This is where we stopped for the Arte in Banca project, but check this blog soon for further experimentation.
We also wanted to add better visualization tools for the objects and sculptures that we digitized. We went the easy way, by using https://modelviewer.dev/
It provides a nice 3D viewer, and it allows for webAR on both Android and iOS, complete with light estimation, and some rudimentary occlusion. It can be accessed by tapping or clicking on any 3D object in the virtual museum, then on the tiny cubic icon on the right, if you’re using a supported device.
Stay tuned, we have a lot of interesting projects to write about in the next few months!
With the default Blender settings it is quite common to get into situation where you just can’t get close enough to your object.
There are two tricks to fixing it. The first is to use the Shift+C shortcut, to reset.
The second is to enable Auto Depth, under Edit > Preferences > Navigation, as shown in the picture