[00:00:20] Nathan Wrigley: Hello there, and welcome once again to the WP Builds podcast. You've reached episode number 465 entitled, creating interactive experiences in WordPress with the Tilbuci plugin.
My name's Nathan Wrigley, and a few bits of housekeeping before we begin the podcast. The first thing to mention is that if you are enjoying this podcast, why not subscribe? Head to wpbuilds.com/subscribe. There are so many different places these days where you can do that. What I'm meaning really though is put this podcast in your podcast player of choice. Go there. Use the search feature, search for WP Builds, and click the follow or subscribe button.
But also on that page, you'll find things like links to our socials. So for example, you can find us on Facebook and X and Bluesky and Mastodon and all of those kind of things. Why not follow us there? And we will keep you updated when we produce podcast episodes.
However, the best thing to do would be to subscribe to our email newsletter. Now, that newsletter only comes out twice a week. We produce a podcast episode on a Thursday, that's what you're listening to now, typically it's an interview. But also typically we do a, This Week in WordPress show, we do that live. We record it on a Monday, and then put it out as a podcast episode on a Tuesday. So why not subscribe and get all of those goodies in your inbox? A no spam guarantee is guaranteed.
The other thing to mention, speaking of This Week in WordPress, is that because I'm having a bit of a break, I went to WordCamp Asia and I decided to have a little bit of a travel around India after that. So This Week in WordPress is not happening until the very latter part of April. So the usual URL for that, wpbuilds.com/live. Monday, 2:00 PM UK time. Join us. There is a little message on that page, and it has got the date when we will be next doing that show.
If you've got a product or service in the WordPress space and you are struggling to gain attention, I have the solution for you. A podcast like this attracts a WordPress specific audience, and you need that for your product or service. So head to wpbuilds.com/advertise to find out more. Or send me an email, admin @ wpbuilds.com, and we'll get into a discussion about how we can get your messages in front of our WordPress specific audience. Podcasts are an extremely effective way of doing just that.
Okay, what have we got for you today? Well, today I am chatting with Lucas. You can find Lucas's full name in the podcast episode, but it's quite a mouthful for my mouth to get around.
But we're talking today about his Tilbuci plugin. This is really interesting. Think about Flash back in the day, and the fact that you could make animations and movies and interactive experiences.
The best use case I can think of is when you go to a museum and there is a complicated display in front of you, and there's a little screen, and that screen enables you to sort of interact with the exhibit. So you can zoom in and get information about the different bits and pieces. HTML can do all of that with CSS and JavaScript and the plugin enables you to build those kind of interactive experiences inside of the block editor. It puts his editor front and centre, and then you can publish it on your WordPress website. The possibilities are almost endless.
So we talk about why he built it. How he built it. What it works for. What the best use cases for. How the animations all work. Where the limitations are in terms of accessibility and so much more.
And I hope that you enjoy it.
I am joined on the () podcast by Lucas Santos Junqueira, I think. How did that go?
[00:04:01] Lucas Santos Junqueira: Perfect.
[00:04:01] Nathan Wrigley: Oh, you are so kind. I rehearsed that a few times and I'm really appreciative.
Lucas is joining us from, Brazil, which is really nice. I don't know, I dunno when the last time I had somebody from Brazil on was, it feels like it was a long time ago. And, we're gonna be talking today about a plugin, the likes of which I have never seen. Before, I've never talked about a plugin like this.
It's about creating, movies is the word within your WordPress dashboard. we'll get into that in a moment. You'll discover the name of it, as always, links will be in the show notes. If you want to, just press pause and go and click on the, the URLs that are mentioned in the show notes that might help you.
Understand what we're talking about today. But Lucas, first of all, before we start, would you mind just telling us a little bit about you and what you do for a living and how you've come to build a movie thing in WordPress?
[00:04:59] Lucas Santos Junqueira: Oh, nice. Thank you, Nathan. Thank you for having me here. I've had, a background on this, on publishing. General publishing like books and so on, and for some time, for quite some time. I have been working with digital publishing. It's about more than 10 years with these, digital publishing in mind.
And, from all this time I've been working a lot with, institutions like museums and something like that, that need to do presentations and sometimes, video installations and anyway, that kind of interactive content. I've kept thinking that when I was developing things to, to meet these, institution's needs, like for something to put on their site or something to put on exhibitions or something like that, I faced the question that I was developing lots of things, twice, three times.
and keeping doing that, And so I thought, what about, focus? And instead of creating a solution for each problem, a solution for each case, I could start, creating a single, tool that I could enhance when I needed. So I used this tool to solve that, problems to solve that publishing needs to solve that.
about, oh. 10 years ago, I started with the first idea it was called, Mangan. It was the first attempt to create this such a kind of tool, and it was very focused on flesh. It had, I had to use the flesh player for the time that video and audio was not so easy to implement on web. And then we have the digital apocalypse when the flash went down.
And so I started working backwards and thinking, what can I do? And by that time we started having many solutions to implement this on playing A TML and JavaScript and so on. So I started to translate. It was about 2024. About half of 2024. They started. the idea of creating, of recreating these tool. So I made it first as a, standalone application loaded from web.
It, loads in a web browser, of course. 'cause I, really thought about the idea of having, collaborative work, people working together and so on. And I started seeing that people were using that to create, small movies. I, called them movies, interactive movies, and I, saw the, movement of people creating them and then, and bending them on WordPress pages. So I thought, what about having that inside WordPress, inside the WordPress, dashboard to simplify the process? That's when the idea of the plugin came out. Take these two and place it there. People that using it.
[00:08:32] Nathan Wrigley: It occurs to me that we haven't said the name of the, plugin yet, or the product because it's definitely not something that you have to use as a, WordPress plugin. The WordPress plugin bit is. Like a convenient layer that you've added in so that you can do all of the things inside of the, the WordPress dashboard and then, you can use a block and we'll get into all of that, but I'm going to try and pronounce it and it's bui, however, did I get that basically right?
Was that good enough?
[00:09:03] Lucas Santos Junqueira: Yeah, that's perfectly.
[00:09:06] Nathan Wrigley: There's no way, dear listener, if you're an English speaker, you are not going to be able to Google that, I don't think, because the spelling is entirely different. So it's spelt T-I-L-B-U-C-I. so I would've pronounced that as til Bki, but it's not, it's, Bui.
And I'll give you the URL I'll read that into the record so that you can go and have a little look. So it's T-I-L-B-U-C i.com, dot BR, which I'm guessing is the, Brazilian variant of the.com. so maybe pause this podcast, T-I-L-B-U-C i.com. Br maybe pause this, go and have a little bit of a poke around because what we're gonna do today is try to unpack something which is 100% visual.
The output of this is all about what you will be able to see on the page and therefore interact with on the page. And, It's very important, really, that you understand that. So go pause, go and have a look and then come back. However, stick with us if you're driving the car or something, and it's gonna be, you're gonna, we're gonna do our best to describe it.
What you, mentioned there about flash. I had almost forgotten about flash. I'd nearly forgotten that was a thing, but I remember the great promise that afforded us this little box, this container, and in this little box, this container, you could do all sorts of miraculous things. And I remember.
People making all sorts of animations and movies and, all sorts of clever things. It was obviously the way that we first got video, YouTube was using Flash in the beginning and so on and so forth. And then Steve Jobs came along and said, no, we don't want flash. We want the web, with web standards and we don't want this little box.
And then I remember there was this great hustle to try and get. HTML five, we called it that back in the day, HTML five to do all of these wonderful things and combine JavaScript with H-T-M-L-C-S-S and you can do a load of animations and quite a few tools came around at that time. Actually, I remember getting a Mac app.
I dunno if this rings any bells. I bought a Mac app called Hype. and hype was made by a bunch of, ex apple, staff and they created a suite of tools which enabled you to do animations, but using just HTML and HTML five and what have you. And so that was the immediate conclusion that I drew when I looked at bui.
Was okay. This is, this is the idea that you can make those films a little bit like I was doing back in the day with Hype. And you have on your website probably the perfect way of encapsulating what it's useful for. and so there's some videos of the planets in our solar system. And so you can see the planets in our solar system, but the idea would be that you want to, let's say zoom in on one planet.
So you might click on that planet and you might get a window with information that you can scroll through, which will describe what that planet is like. You can see the colours because it enlarges, and then you might Click a button or swipe or something like that. And you've gone from Uranus and you're now on Saturn, and you click again and you go from Saturn and you go to Jupiter and so on.
And, it all updates and it's done in this, remarkable interface. And the menu can look however the heck you want it. So in this case, it almost looks like a sun, a sort of typical sun with rays coming out of it in each of those rays. It's a button, and it really, reminded me of the kind of interactive display you might have at a museum.
you'd go up to, I don't know, a, a statue or something like that, and the museum would've made this animation so that you could focus in on. The face, or you could focus in on the arm or the feet or whatever it may be. a feature of that. And, it enables you to create these, what you call movies.
But it's much more than that. 'cause a movie to me feels like you press play and then you watch it and then you press stop at the end. And it's not that at all. Everything is interactive, right.
[00:13:22] Lucas Santos Junqueira: Yeah, the, idea to calling that movies is co comes from the metaphors I've been using. So we have a large movie. you can understand movies as projects and they have their scenes. And you can, unlike a linear movie, you can play these scenes at the order you want. You can, get the interaction from the user to see, what scenes to play, how to play them.
So you said about the, displays, the solar system, example I placed there at the page and, the idea was exactly like you said, it's to think about, a content that could place, on a kiosk, for example, in, at an exhibition. And to show you that you can do such kind of things and you can do it inside your WordPress dashboard.
You can, develop there. In there and you can, place it inside your pages or posts, but also you'll see that the software has some kind of, export functions. So you can export that for create a, Windows application to create, an Android application for your kiosk. You can do any, everything inside, your dashboard in WordPress.
We use it to place things on your pages and posts and get, and use them in other ways by exporting them to other formats just inside the dashboard
and the,
[00:15:00] Nathan Wrigley: Yep.
[00:15:02] Lucas Santos Junqueira: and
[00:15:02] Nathan Wrigley: Carry on.
[00:15:03] Lucas Santos Junqueira: the, and these, example, you said the, plants. I have even, documented it. It, you can see you have a tutorial on YouTube.
Like taking every step of creating it, of how to create it to show people how to use the software to animation.
[00:15:26] Nathan Wrigley: Yeah. And do you know what's interesting is that I see this kind of stuff deployed on some fairly high traffic websites. Like for example, in the UK we have this, institution called the BBC, which is like television and news and radio, and. Things like that. And you go to their website and very often when they're trying to explain a complicated thing, so for example, it might be something about, politics, across Europe, I don't know, 52% of the people in this country.
Think this and 28% of the people think that, and you'll get this, they invest quite heavily in these movies, these sort of animations. And you scroll through and then it will zoom in on France and show you data about France and then you'll zoom in on Italy and it will show data about Italy and things like that.
And so I've definitely seen this kind of stuff being deployed in the wild and it's always made me think, is it, just, it's just JavaScript and HTML, right? That's CSS, JavaScript, HTML. That's it.
[00:16:28] Lucas Santos Junqueira: That's it.
[00:16:29] Nathan Wrigley: Okay.
[00:16:30] Lucas Santos Junqueira: that's it.
[00:16:31] Nathan Wrigley: That's how your tool can be an export tool, so you can build it inside of your WordPress dashboard, but the tool is literally creating HDML, JavaScript CSS assets, which can then be put into, like you said, a Windows application, some sort of standalone SAS or iOS or Android Apple or something.
[00:16:50] Lucas Santos Junqueira: Yes, that's the idea. I use, in fact, I don't use JavaScript. I don't, create the code using JavaScript directly. I use a framework, development tool called hacks.
[00:17:03] Nathan Wrigley: Okay.
[00:17:04] Lucas Santos Junqueira: it's a meta language so you can export it to, to, to other, languages. So I've been using it to create the JavaScript code and, but at the end, the BU is a hundred percent JavaScript production.
[00:17:21] Nathan Wrigley: Yeah. Okay. I just wanna draw a line, be between, maybe people will misunderstand what it's doing, because I think when I initially watched your videos on your website, I think I did. So there's a trend at the moment, which I'm sure you've seen. Where when you scroll through a website, so let's say there's a page which is very tall, it goes down, you have to scroll in the browser, animations happening.
Let's say for example, oh, I don't know, some text suddenly grows, and as you scroll, the text grows and as you scroll in the opposite direction, the text shrinks. And then maybe some sort of line comes in and as you scroll, the line follows you down the page and then you get further down and another animation happens further down there.
I don't think that's what this is. This isn't like a full page animation with, let's say, headings that are just HTML headings. This is more like that flash thing. It's inside of a rectangle. It's in a box of some dimension. I thought I got that Did I?
[00:18:22] Lucas Santos Junqueira: Yes. You got that right? Yes. It's a, block, a bo a box. You can place it like a block in inside your page or of course, taking full screen. Of course
[00:18:32] Nathan Wrigley: so that is exactly what I was looking at when I was on the BBC website. this thing moving around Europe, it's a box. we've explained a certain thing, here's the video or the interactive, whatever you want to call it, and then you carry on with the text underneath. So it's a bit like looking at a.
YouTube video, which is constrained inside that little rectangle. Now, the question is gonna be how do you build all of this stuff? And, basically what I'm gonna describe it as is. Something like Photoshop. That's probably the best description I've got in that you've got this canvas in the middle, which you interact with, and then you've got menus left, menus right.
Options spread out over those and you, interact by dragging things in. when you highlight a particular thing that you may have dragged in, different options appear so that you can make things rotate, or time things or change direction or whatever it may be. And you do that inside a WordPress, you drop your UI directly into the WordPress editor.
So the standalone app that you've got is identical to the WordPress plugin that you've got. Again, have I got that right?
[00:19:45] Lucas Santos Junqueira: Yes, you got that right. Just the comparison, it's not like Photoshop, it's more animate.
[00:19:51] Nathan Wrigley: Yeah. Okay.
Thank you
[00:19:53] Lucas Santos Junqueira: animate or, even the old flesh, editor like as well.
[00:19:57] Nathan Wrigley: yeah. With a, with an obvious, yeah. Obviously Photoshop, there's no timeline involved. There's no passage of time. It's just a fixed, everything that you go on the screen is what okay. Then though, let's, we'll get into how you build things and what options are available in a minute.
But, so you build the thing, you spend a lot of time tweaking it, making sure that all the options tie together. You finally, you could export it. But in this case, I suppose the bit that makes it interesting on the WordPress side is once you've saved it, you can then go to a post or a page or whatever it may be, custom post type or what have you, and then you've got a WordPress.
Block, which enables you much like you would've with a form plugin or something like that. You drop in the block, you pick the movie that you've created, and then you've got some options around how you want it to look, right? I think you can go, you can be small or full screen or whatever it may be.
[00:20:51] Lucas Santos Junqueira: Yes, that's right. when you create you, you start creating your content. And the idea to simplify the, use on the WordPress is, exactly like that. So when you save your movie, you can go to your page at your Gutenberg editor, take, add a block, and there will be the BU option there, a Tobuy movie option there.
You select the movie you want, you'll see at list of all the movies you've been working on. And then you set the visual display like the size or showing full screen or not. for now is that how do options, we
have plan for something else for the future, but for now is the options we have.
[00:21:33] Nathan Wrigley: Yeah. Yeah. Okay. So much like you can with a, a, YouTube video or something, you can go full screen, but you, can drop that in so that when somebody, clicks on it or what have you, it, it captures the whole screen, which in many cases actually is, I would imagine the preferred option.
Just one thing which has occurred to me, which I'm sure has occurred to you, it feels like you've built something which could be like, you could actually have this as a career. If you got really, good with your software, that could be your job. If you are clever enough and niche down enough and found enough clients doing animations, that's such a skill.
if you know the software inside and out, that feels like something that you could do. I don't know if you've got any clients that do anything like that, but
[00:22:23] Lucas Santos Junqueira: I must say to you that's my career.
[00:22:27] Nathan Wrigley: Ah, okay.
[00:22:29] Lucas Santos Junqueira: As I said, I started developing the, Buzi software from the needs of my work to, attend the, i work closely to, to very, institutions like museums and so on. And so they have their specific needs as you've been describing, quizzes, interactive, infographs and so on.
So I created the software to meet, to, make my work, to, to help me with this work. And now I, as I'm distributing it, it is a free software, of course, and you can use it for your homework as well.
[00:23:14] Nathan Wrigley: So there you go. It is a possible career 'cause it's what you are doing
[00:23:19] Lucas Santos Junqueira: That's exactly what I'm doing.
[00:23:21] Nathan Wrigley: But it, strikes me as it's, okay how to describe it. I, have Photoshop, I am useless at it. I, if you asked me to, make almost anything in Photoshop, unless it was the most basic of things, I would fail, but I have the software.
What I'm trying to say is if I spent time and got really good with Photoshop, there's a career there. And it feels like the same is true here. If I was to explore your software and get really good at it so that if somebody said, make me a video about the planets that I can interact with, and it'd be perfect for school children who come to our museum or what have you, that's a thing which people will pay real money for.
that just get good at this, and you'd have to find those clients I presume.
[00:24:11] Lucas Santos Junqueira: Of course.
[00:24:12] Nathan Wrigley: Once you found them, this feels like a real way of, of generating some income. So anyway, there's, an idea for you, listeners. All of you become, experts in this. okay, so how does it, actually work now?
what I'm gonna say, first of all is there are far too many bells and whistles for us to describe. Everything like Photoshop, it would be impossible to describe that.
[00:24:40] Lucas Santos Junqueira: for
[00:24:40] Nathan Wrigley: just tell us roughly how you build it, in a couple of minutes. How do you build something like the planets thing that you were demonstrating on your video?
What do you do?
[00:24:50] Lucas Santos Junqueira: Okay, so we first, you first start by creating the movie. The movie is, the project is the, main project of the solder. When you create the movie, you give, dimensions and something like on. So, you are set in there and you may see that the software also works with both vertical and horizonal, aspect ratios.
So you can design a single movie for both so you can see it, on. Computers screen horizon, computer screen, or at a tablet. So you can, you if by your choosing of course, you can, choose to work on both at the same time at the, with the same content. So you start to create your scene, your first scene since the movie is split into scenes, is the metaphor I've been using.
And your scene starts with a key frame. So again, an animation and movie, metaphor I use, and when you start your scene, you get, your media that, I am generous when I say media, called everything a media.
[00:26:06] Nathan Wrigley: Yeah, yeah.
[00:26:07] Lucas Santos Junqueira: a picture, an audio, a video, but also text, anything I call a media.
So you grab your medias, your pictures, or audios or videos. Place it on the screen, on your stage as you've been working on, your scene, and set the property size, position, colour, font, text, everything, anything else. And you have the first key frame of your scene. You can add more key frames to a scene or keep that one. Keep a scene with just one, but you can add multiple key frames. And if you do when you start working and playing the scene, the software will animate like you expect by interpolating positions. if you have a, a movie at the top corner of the screen on a key frame, and the next one it is on the bottom, it'll move slowly to that by we using the time you set on the movie properties.
It's,
it has.
[00:27:08] Nathan Wrigley: that. I seem to remember in flash this was called a tween.
[00:27:12] Lucas Santos Junqueira: A twin exact is not on flash. Everything, it's a twin. It's exactly
[00:27:17] Nathan Wrigley: Yeah.
[00:27:18] Lucas Santos Junqueira: So the software, the software handles these and you can start creating your scenes. So you start your first thing and second, and At the, while you're editing, while you are creating your scene, you have your media on the screen so you can set interaction properties on that. So you, you, add the, bottom, for example, a, graphic to set a bottom. So you click on that, go to the software options at the right column and start trigger actions so you can set the actions.
what that button will do. load the next scene, load the scene 12, for example, and to setting these actions. You have a, visual block editor, something like scratch. I don't know if you, understand it,
[00:28:16] Nathan Wrigley: Yeah.
[00:28:16] Lucas Santos Junqueira: it's very spider and scratch.
[00:28:18] Nathan Wrigley: yeah. Okay. So it's like jigsaw pieces that you lock together
[00:28:21] Lucas Santos Junqueira: Yes. You lock them.
[00:28:23] Nathan Wrigley: achieve. this binds with this and this thing binds with this, and insert a time in the middle so that this thing takes this amount of time to get to this thing. That kind of
[00:28:33] Lucas Santos Junqueira: Yes, yes. So you set the actions like that and you have a plenty of actions. You have, some actions like, simple as load the next scene, but you have variable handling. You can set string stacks, values. You can manage all of that. So you can have a, kind of. very kind of programming language inside of it,
[00:29:02] Nathan Wrigley: Yeah.
[00:29:03] Lucas Santos Junqueira: just like scratch, does.
So you can set even very complex, actions in with that. So you have actions to save data to the cloud. You have actions to save block of data, so you can create some complex operations with that. And after you have all these, seeing how your pro, project working, you can use it, add it to that block, as you said. And, some other features the software have on this step of creating. It allows for, collaborative work. So you can set rules who can work with the, with what's seen, and have some note, Design notes,
[00:29:54] Nathan Wrigley: Yeah. Like comments
[00:29:55] Lucas Santos Junqueira: can share comments. Yeah, but not for, anyone else, but for the group that are working with
it. So it has it, it has this collaborative working, idea also, since we, are creating something online. You may have published it yet, so people are seeing that online, but you're still working on it. So it have, it has, the software has a, very disparing WordPress itself. You can save your scenes without publishing them.
So you can start, see what we are doing. Like you save your working on your page, on your posts and saving it,
not
[00:30:38] Nathan Wrigley: draught. Yeah.
[00:30:39] Lucas Santos Junqueira: Yes. So when it's ready, you, publish it for public view. But you can, keep working on it. While people are still viewing the last published version, so this is very smart on the way the WordPress work for the po, the posts and pages.
[00:30:59] Nathan Wrigley: honestly, you've described it perfectly there, but I suppose the devil is in the detail. Like I said, there's, there appears to be, I've not had a play with it directly, but there would appear to be, menus within menus. And. Just granular this and granular that, and so incredible complexity. And so I imagine much like when I began working with Flash and tried to do animations, there was a lot of kind of staring at the screen and thinking, oh, how do I
[00:31:30] Lucas Santos Junqueira: Oh.
[00:31:30] Nathan Wrigley: thing that I want to do?
So that, that would lead me to the question because. I know that it's gonna be complicated once you get started and getting over the hump of doing your first successful movie is gonna be tricky. Do you, do you offer, I don't know, video tutorials or online support or a forum or a Discord channel or anything like that where you have a community of people that help each other out?
[00:31:57] Lucas Santos Junqueira: like these social forms and so on. I still haven't set it up, but I do have, many tutorials at the bui. Account on YouTube. So these tutorials and, I'm, glad to see that are mainly by now takes for, by examples like this, solar system.
[00:32:20] Nathan Wrigley: Yeah.
[00:32:20] Lucas Santos Junqueira: by the beginning. Let's create the movie and go and have a video, explaining how to do.
Let's add, the first media, the first feature, and then there's a video to add this. So you have a lots of tutorials, on creating actual productions with bui. some simple and some even complex. I, am recently publishing a, bigger tutorial. I, try to do it weekly, but not, I'm not winning this struggle.
But I've been working on, on, on, on, a bigger playlist of tutorials about creating, narrative game, like a visual novel using it.
[00:33:11] Nathan Wrigley: oh, okay. Yeah.
[00:33:12] Lucas Santos Junqueira: we still, we have already. 11 or 12 videos that takes, all the steps like setting text, navigation, player responsive, and so on. But we are.
[00:33:27] Nathan Wrigley: Yeah. Okay. anyway, that's nice to know that you've made the endeavour to put out a bunch of YouTube, but is there text based kind of knowledge based sort of stuff that you can. Use as well? Or is there in-app for want of a better word? Do you get in-app instructions? Can I click on parts of the interface and can I learn
[00:33:46] Lucas Santos Junqueira: No, there is no in, in, that there are, unfortunately, it's, an idea I've been working on. But I do have A-A-A-A-A document, a PDF document, explain now the software so you can download it, from the website. So it's A PDF, it's a very large
[00:34:10] Nathan Wrigley: Yeah. Yeah. I'll bet. I'll bet.
[00:34:13] Lucas Santos Junqueira: Try to explain so you can use it in conjunction with the
[00:34:18] Nathan Wrigley: I, yeah.
[00:34:19] Lucas Santos Junqueira: help.
[00:34:20] Nathan Wrigley: I genuinely think that the complexity of what you've got here in terms of the learning curve, is, not quite like anything that I featured before. usually the plugin just does this one straightforward thing. it's a form plugin. Oh, there's bells and whistles underneath, it does this one thing.
There seems to be miria. Different ways that you can use this. you could, really use it in a very simple way to make an animation, a 32nd animation rather like an advert or something. You click play and off it goes. Some text scrolls across and some image drops in and fades out and what have you.
But then you've got this whole interactivity where. it feels like a movie for a bit, but then you can start to interact with it, fill out a form, send data to a thing, opt data part of something else. And, and so the complexity is, is, gonna be something that you're, gonna have to grapple with.
Dear listener, I have a couple of questions. Around accessibility. 'cause I know that a lot of the audience here, they spend a long time worrying about the accessibility of their website. And I presume that tools like this, I'm guessing it's a bit of a black hole when it comes to accessibility.
if I was navigating with the tab key into this container, I'm imagining I'm gonna be getting lost there. I, dunno what you've got to say about that, but I'm asking about accessibility
[00:35:43] Lucas Santos Junqueira: Yeah. This, is a, you said it right? It's a kind of a black hole. We, it's difficult. I've been working on ideas to add, for example, sign language. Capable edit. Add the content, make the content available to, to sign language plugins, readers.
[00:36:08] Nathan Wrigley: Oh,
[00:36:09] Lucas Santos Junqueira: I made a text a, a test about, a month ago with a, a major use, plugin here in Brazil for our sign language.
It worked.
[00:36:25] Nathan Wrigley: I
[00:36:25] Lucas Santos Junqueira: So it's something, eh, so it's something that I really, eh, in my concerns, but I still haven't figured out how to solve it
[00:36:35] Nathan Wrigley: Yeah, no, I can imagine. it's a bit like, watching a video on the television, once, once you put the television screen on, it's hard to, it's hard to, it's hard to be accessible. If you can, hear it, you can hear it. If you can't. See it, you can't see it. And I, don't know how you overcome that problem with the platform that you've got, however it was worth mentioning.
The other thing I suppose I would like to be assured of is the responsiveness of this. Now you mentioned that you've got the box itself. You can have it TikTok, for want of a better word, landscape portrait, also full screen. But does the viewport matter? So in other words, if I'm viewing it on a, very small laptop, does everything move in accordance with where it should be?
So the, the presentation with the planets, if I've got a large monitor and it's full screen, everything's as a proportion where it should be. And if it's small, everything as a proportion is where it should be. What I'm asking is, it responsive that, that's the easy
[00:37:37] Lucas Santos Junqueira: Yes, for sure, I got many experience for the old Managa software that I placed here. So the first idea is that, the bui doesn't call your area. Don't call, don't use the word pixels. It use the word points because I had, I read a, very interesting some years ago called The Pixel is Not a Pixel That was so fantastic to understand.
You may look for, it's a very nice text. an article, A pixel is not a pixel. So the, when you use the positions, the points in Taboo, it's just to, for your design. So you see if you, are creating a movie like, let's say full, HD 90 20 by, thousand to 80. It's the idea is that the, size is about peaks points, not pixels.
So when you are seeing in the small. screen with lesser resolution. The things will, all the content will be adjusted for that.
And, when you see in a larger world, it, the content will be expanded to that. But you always have, to consider the screen proportions. So if you are creating for 19, for 16 by nine proportion, and on a 16 by 10.
Screen you have black borders.
[00:39:14] Nathan Wrigley: right.
[00:39:15] Lucas Santos Junqueira: I, don't have,
[00:39:17] Nathan Wrigley: There's nothing you can do about that. That's
[00:39:18] Lucas Santos Junqueira: there's nothing can do about it. And if you, when you start creating your movie or, of course when you are developing, it helps you think about changing the, idea you can set your movie to feed both horizontal and vertical screens. So when you are designing a scene, you can provide the, a design for both horizontal and vertical ones.
[00:39:42] Nathan Wrigley: Okay. Got it.
[00:39:43] Lucas Santos Junqueira: And when you're watching the, tubus software, when you're watching the content, the tubus software will evaluate your screen to see the best proportion to, to, show it.
Even if you are watching on. Mobile and while you are watching your movie to another proportion, to, to another view like you are watching it on landscape and move your smartphone to, a portrait one, theus will, notice that and change your, the design to the world better suited for the vertical screen
[00:40:22] Nathan Wrigley: Yeah.
[00:40:23] Lucas Santos Junqueira: it has some kind of responsiveness on online, on that.
[00:40:26] Nathan Wrigley: Yeah, I was wondering about, so for example. Things like text. So if, for example, I don't know, the text was really significant. So let's say in the example of the, the planets, so I click on Jupiter and a little box pops up, which gives me textual information about Jupiter. Is there any, capacity to notice, for example, that I'm on a mobile and therefore that text that's popped up needs to be of a different font size than, so what I'm saying is.
It's big. It needs to be bigger 'cause we're on a mobile, whereas on a giant screen, that text wouldn't need to be quite so big. So just little things like that. Can you modify the size of things, for example, text based upon how big it becomes? Or is it just everything is in the proportion that it is
[00:41:16] Lucas Santos Junqueira: Everything is in a proportion. Everything is in a proportion.
[00:41:19] Nathan Wrigley: that makes sense. Okay.
[00:41:20] Lucas Santos Junqueira: have something on the, actions to, to evaluate, to detect the size and make and change tech size, for example, do as an action, as a result of an action.
[00:41:30] Nathan Wrigley: Oh, so you
[00:41:31] Lucas Santos Junqueira: that is some very advanced
[00:41:33] Nathan Wrigley: Okay. Yeah, There you go. You gotta be the real nerd to, to figure that out. does it work well with the finger as well as the mouse? So I'm imagining this planet's one, the finger, much more blunt instrument, whereas on the mouse, essentially I'm asking does, my finger work as well as a, pointer, a
[00:41:56] Lucas Santos Junqueira: Yes, the idea work as, but you must, you must understand that the design of your content makes a, plays a very big part of that.
[00:42:06] Nathan Wrigley: right.
[00:42:08] Lucas Santos Junqueira: as a sort experience, I have having a picture like you using a picture for a bottom. you need to create a picture with a higher, transparent area around it to better fit the, click of a, finger, for example.
Now yeah, for a clickable area. That's, kind of design,
[00:42:31] Nathan Wrigley: Yeah. These are all the
[00:42:32] Lucas Santos Junqueira: design stage.
[00:42:34] Nathan Wrigley: longer you use the, the software, the more you realise these things oh.
[00:42:39] Lucas Santos Junqueira: have, I, I really pay attention to these interactions, with the finger and the mouse and so on, and that the software answers was very. Large forms of interactions. You can set interactions for a joystick, for example, game controller. You can use it to control your movies or you can have, gestures like zooming and swap it.
It, can respond to these actions as well. So I try to, keep the idea of, adding as many interactions as possible because that's what people really use in, fact.
[00:43:18] Nathan Wrigley: Yeah, I, think probably we've hit the sweet spot there. I hope we've managed to describe, what's going on here. Once again, I'll read the url, so if you're interested, you can, without needing to click on anything or go to our website, it's T-I-L-B-U-C i.com. Br. but it's pronounced, it's not till bookie or anything like that, it's bui.
so go and explore that. Honestly, it, really is not anything the like of, which I have seen before. So go and have a look. Go and have a play. Do you make yourself available? Are you like a, social media person? Do you hang out online? do you have an email address that you wanna share or do we just go to the website if we wanna communicate with you and use the contact form there?
What's the best place to find you, Lucas?
[00:44:07] Lucas Santos Junqueira: Oh, the website has all my contacts. they may I use, let me try to pronounce it.
[00:44:14] Nathan Wrigley: Okay.
[00:44:15] Lucas Santos Junqueira: Do. DOO. No. Oh, I was wrong. DOGG [email protected]. Dot bi. [email protected]. And there are links to social medias, Instagram and then YouTube as well. So you can reach me by there. And the website has all these links. there.
[00:44:41] Nathan Wrigley: There's loads of links. If you go to, the website, it mentioned there's, there's a getting started section. There's a whole load of different things under there about
[00:44:49] Lucas Santos Junqueira: Yes, and there's also the, GitHub and there's also the GitHub repository where you can reach me there as
[00:44:57] Nathan Wrigley: okay.
Okay.
[00:44:58] Lucas Santos Junqueira: it's also on the site.
[00:44:59] Nathan Wrigley: I will put any of the links that we just mentioned into the show notes. If you go to wp builds.com and search for the episode with Lucas, then you will be able to find it and hopefully the bits and pieces that we mentioned there will be available for you. Lucas, thank you so much for chatting to me today.
All the best with your project. That sounds amazing.
[00:45:21] Lucas Santos Junqueira: thank you a lot Nathan. thank you a lot for having me today. I love to discuss about it.
[00:45:26] Nathan Wrigley: Oh, that's so nice. You are very welcome.
Okay, that's all we've got time for this week. Just a quick reminder, no This Week in WordPress until the end of April.
If you have any comments about that particular episode, go search for it. It's number 465 on the wpbuilds.com website.
And I guess the last thing to say would be go subscribe, wpbuilds.com/subscribe. Join our newsletter, and then we will let you know when we produce new content. Probably this time next week.
Okay, I am gonna fade in some dreadful, cheesy music. Say stay safe. Have a good week. Bye-bye for now.
