 is finishing setting up. I just want to make a couple of announcements. If it's for the first time that you are in the Mozilla event today, we do have our code of conduct that I invited to read and it's over here, like bit.ly.slash.mozdem.coc. It's different from the FOSDEM one, so that's why I encourage you to look it up. If you are a developer, we have a survey going on at this link, bit.ly.slash.FOSDEM17, all in Apple cases. If you weren't earlier in the presentation, I want to repeat that we do want to try the latest version of Firefox, the nightly one that gets all the code in from the developers in real time, not after it's polished and looks good. You can find the build at nightly.mozilla.org and install it from there. And if you are already contributing to open source, if you are here, if you'd like us to tell us why you contribute and why this is important for you, there's another survey, voila, at bit.ly.slash.WhyOpenSource. Our next speaker is Eroja Neal from Italy. I hope I said that right afterwards, if not, you know, there are a lot of Italians around here, so be careful what you say. The one thing I know about them is like they really hate Hawaiian pizza. It's like they have an allergy of that, like who can eat pineapple on the pizza? I don't know, you know, people have, people have different tastes, but I never invite them outside Italy to go to a restaurant because again, you got the point. He's an open source volunteer and contributor for a long time and I heard he has even tattoos about it. Again, I'm not going to ask where because we have a code of conduct. Ladies and gentlemen, Eroja Neal. Thank you, thank you for the presentation. Despite Daniele, I'm a Veniam pizza lover, this is a short, pineapple pizza, yeah, I love it. Sorry. This is Daniele, you got it right. I'm going to present in A-frame, this is an introduction to the framework for building WebVR and what is virtual reality? Virtual reality served to create experience and immersive experience where you can go inside using some tools, different tools, but Web virtual reality is different because it's set up on the Web and it's very difficult to handle. It was very difficult, sorry, because I take this quote as my starting of my talk because I think the situation where A-frame was created was like this, that it's hard to create the same quality virtual reality experience online on the Web and because mostly because the whole value proposition on the Web is to be low frictional, to have low frictional. You click on the link, you get an output and you don't want to download other software to do it, so you just navigate into your browser and use the tools you already have and it's very difficult to do it with the virtual reality because a lot of stuff are involved in order to give you the experience. So there are different devices and different categories of devices, so we've got cardboard that are the simplest one. You can build it your own and print a schematic and build it in your house. You've got a headset, so you can use your cell phone in order to try virtual reality and there are just boxes made by plastic and you can put your cell phone inside and we've got also the HME and the head mounted devices like Oculus Rift or HTC Vive. So different categories to the developer side means that you have handled different kinds of SDKs or integration into your app and it's very difficult to do because the idea of the devices is 10,000 devices out there, kind of different handling of input and output sorts. So it's very hard. It's very hard and it's a mess. But a frame works on multiple devices, so you can use it as well on HTC Vive or Oculus Rift on desktop, on mobile platform, also as a flat experience without being a virtual reality like using visors or stuff like that. You can just browse with your browser inside the scene like you do usually on Facebook when you try to explore 360 degrees photo or video. And I think it's already set up to do this from scratch. You don't have to integrate anything. What you need is just a browser with WebGL support and now mostly a browser got WebGL support. Also on mobile, especially on mobile, just Opera Mini doesn't have it, but it's crazy because it's an old browser now and not very used. And we got a lot of poly fields in order to make some stuff works well on every platform. Plus, this framework works combined with a lot of other JavaScript frameworks, very famous like Vue.js or D3.js and React, Angular, RedX and also the old jQuery for the cutting-edge lover, technology lover. It works also combined with jQuery because we are talking just about manipulating the DOM, manipulating some object in HTML. It's a declarative HTML system and it's made by entity component. It's sort of a collection of tools that you can use to build this Web reality and we got a lot for models, geometry, animations and other stuff that could bring you to create an ACN like that. This is the starting point of every virtual reality project made by iPhone and I'm trying to explain you because the dark background doesn't help us, but okay. This is ACN. It's a tag and it's the tag that opens the scene that renders a canvas in HTML so it's very basical. And inside the ACN tag you can print also some primitives that are entities, primate entities that you can use to render maybe a sphere that is obviously a sphere or a cylinder or a plane and we got more and more. But the most important stuff is that you declare everything by the HTML data tag here. So you get, you say to the component where to position it into the scene, the size and also the other stuff like maybe a particular one of the, I don't know, the sphere got the radius or other stuff, got the height and depth. So you can also attach it to colors, textures, patterns and other stuff. You can also render a video as a texture of primitive elements. So it's very easy to use if you render just HTML and JavaScript technology you are able to do a complete virtual reality game and as Flaki already mentioned before me JavaScript is fun so you can use it to build video games maybe inside this framework. Obviously the 360 degrees photos are very easy to do with a frame because you just declare a nsky tag, nsky tag is just a tag who wrap the entire environment into the scene. So it's literally the sky of the scene. But if you embed a photo, especially an equidotangular photo that has a proportion of two and one, like I did here, I don't know if you can read it, I take a photo from a Flickr photo group. You can find it easily. There are plenty of photographs now that go downtown and take pictures of these beautiful squares. So you can use it for just testing purpose. Put into the nsky tag and just a search attribute and it will render your environment in 360. Same stuff for the video and the videos for a tag. I like to imagine me taking video like the guy. I do everything do it in my office but okay. And a video tag is a tag that you put on a plane on a surface and you can render a video on the surface like it is a texture. And the video sphere entity is an entity that you use in order to make the video as the environment of all your projects. So you can navigate to the video like I saw a demonstration made by Discovery Channel that they do amazing documentary and you can leave the experience of the sky, downhill sky. So you can go, you can try skydiving maybe doing this stuff. So what is an entity? An entity obviously is an empty placeholder that we can fill with behaviors and we can fill with functionality and appearance stuff. We do it in JavaScript and it's very easy. If you know what WebVR was before a frame, you know that it's a very huge improvement in doing WebVR because you have to use 3JS and other stuff to render the environment and it was very hard to do. This is quite similar to 3JS declaration type but it's very easy because you just call your scheme. The scheme are just the properties that you can pass through the entity through HTML and then you can create everything with JavaScript in there. So you can take it, declare it and we bring it into your environment just declaring an entity and call it as you want. So this is the basic because you can compose it. It's different from an object because it's not an object. If you try to think that in two dimensions like Flaky shows before you can use an object to map everything because you can reuse the same property of the object but in 3D spaces you need something that you can combine. So if you've got an entity you can put an entity inside another entity and combine the behavior of one entity with I don't know maybe the geometry of the other one entity and make a better entity and bigger entity that makes more stuff. Okay, we've got an AFRM registry at all. We are waiting for it. AFRM registry is a component ecosystem where you can download IAMT created by other people but also libraries and stuff that could be used for your project. And this is cool because you can just download it and put it into your project but there is another cool stuff that AFRM released in the fourth version, better version. And this is the inspector. This is the coolest stuff I've ever seen in a library, JOS library because with this you can inspect the scene. It's included in AFRM so you just include your library and click CTRL ALT plus I on Linux and Windows. I can't remember in Macintosh but I think it's quite the same. And you go into the inspector and the inspector is cool because you can also like editing the stuff. I'm trying to put live code here to show the inspector. Okay, I'll try to go into inspector mode. And I'm here. Close it. This is the inspector. I can inspect the scene directly. I can also inspect the element of the scene. I can change the behavior and the geometry. I'm sorry but the screen is very small. Try to... Oh, God. Okay, don't worry. We can go back to the scene. Okay. And this is what I created with the photo I told you before. This is Brussels and I put just these three objects inside so we can manipulate it with the inspector. I try to do it. Maybe I reload. So you can change everything by clicking. Oh, come on. It's too small. It was a cool feature but we can't see it. Okay, so I explain how we start. Like, if you change the behavior of this element, okay, I change the position. I can see it in this little space where the component is now. And I can also add new elements. It's quite easy. And it makes me choose, okay, I take the entity. It makes me choose for a list of the components. Camera, canvas, curtsers, also the bug and a cone or light. You can render light inside the scene. And after I put it in the scene, I can change anything by changing here. And I also can save it. Export to my HTML so I can use it as a 3D modulation software in virtual reality. Less than Blender but something like this. Or you can also use objects that you render by Blender. You made in Blender. You can embed it as an object inside your scene and then with the inspector, you can easily manipulate it and save it. So this is a very, very big, very, very big improvement. I like to see the, okay, the website. This is the central website where you can find everything you need about a frame and also the demos. Some demos need to require, obviously, a headset or 8-HTC buy in this case. But if you want to try it, especially A Blast, that it's very new, I'm addicted to first-person shooter. So this could be funny. And this is, you can try it tomorrow in Mozilla Boot. And you can find us on the second floor and you can find us with the 8-HTC buy. So you can try it. Ask. Maybe there is a little bit of queue, but try to find the flakier me or other people there. So we'll be let your time more sweet. And then bring me back to my, okay, presentation. So how can you start developing with this? You can start in a very too easy manner. One is by installing the boilerplate. Why do you need a boilerplate? You need a boilerplate because it runs an old server on localhost and it avoids you sometimes stuff that are a little bit frustrating like cross-domain issues. And if you run a localhost server, that is completely set up if you download it from a frame boilerplate. And it's just an index HTML with a basic example where you can start and inspect it and do it with also with drag and drop if you want or by code if you are a coder or with front-end technology if you are a designer. And this is the most sharp way to learn how to do it. And there is a big getting started part on the website as full of example. Or you can start from CodePen. There is my CodePen that I shared before. I tried to manipulate it before. And CodePen is our team goal. My perfect because you just it requires just the inclusion of a JavaScript file and then you can also see it live. They support it. I tried. Or get in touch with someone in the community on FMVRs like Rockwrap. Or you can read a lot of stuff on the FMVR blog that it's very active. I found a lot of libraries there, especially the particular rendering library that allows me to render starts in a project. It was included also in the FM registry after. But I discovered it by reading the blog. So it's very helpful. And stack overflow obviously because if you need something there is stack overflow. And also the Twitter account. If you are interested in VR technology, I invite you to follow this Twitter account that is the official one because they release a lot of news. Okay. My time is run out. So thank you. And I hope you will see me tomorrow at Mozilla boot second floor. If you have a question, we have time for one or two questions. Raise your hand. Yes, please. Can I please ask you to repeat the question? There's one in the third door. Yeah, sorry. I mean it seems. Okay. He asked me to, if it's possible to manipulate. Well, don't worry. He doesn't need it, but okay.