Mozilla

Presentation Articles

Sort by:

View:

  1. Firefox OS – video presentations and slides on the OS, WebAPIs, hacking and writing apps

    In August, Mozilla’s Director of Research Andreas Gal, and one of the lead engineers for Firefox OS, Philipp von Weitershausen, gave a couple of presentations in Brazil about Firefox OS. We’re now happy to share both the videos and the slides, in various formats for you to see or use, giving your own presentations!

    Videos

    The videos are available on YouTube in the Mozilla Hacks channel, and they are split up into:

    Firefox OS – Introduction & Components

    FirefoxOS – Developer Enviroment, Apps, Marketplace

    FirefoxOS – WebAPIs & UI hacking

    Note: if you’ve opted in to HTML5 on YouTube you will get HTML5 video.

    Slides

    There were four different slide decks being used:

    They are also available in Portuguese:

    We’ve also made these slide decks available in other formats if you want to reuse them and give your own presentations about Firefox OS (and if you love talking about the Open Web, have you considered becoming an Evangelism Rep?).

    Keynote format

    PowerPoint format

  2. Leave No One Behind with HTML5 – presentation at FFWD.PRO in Zagreb, Croatia

    In June I had the pleasure to speak at the FFWD.PRO conference in Zagreb, Croatia, about HTML5, progressive enhancement and new features and suggested APIs.

    I had previously spoken with Marko Dugonjic and said that he should really organize a conference in Croatia. Said and done, he acted on it and created FFWD.PRO! So, naturally, I wanted to be there and take part of it! It was a well-organized conference targeted at web professionals in general, with the main focus on user experience.

    It had a good mix of speakers and a broad spectrum of topics was covered.

    The presentation: Leave No One Behind with HTML5

    My presentation tried to cover both where we have been coming from, and various enhancements and possibilities we get with HTML5. Below follows a video of the presentation:

    The video of Leave No One Behind with HTML5 is also available at Vimeo.

    Here are the slides to go with the video:

    The slides are also available on Slideshare.

  3. Broken promises of HTML5 and what's next? – a presentation at HTML5DevConf

    Yesterday Mozilla attended the HTML5 Developer Conference in San Francisco, California to give a keynote presentation. The very packed schedule of the conference already covered a lot of topics around the subject matter, which is why we considered it worth while to contribute with a talk that told tales from the trenches of advocating HTML5 instead of going into technical details. Under the title of “Broken Promises of HTML5 and what’s next?” we reported some of the findings we had when talking to press and people outside the web enthusiast sphere.

    Keynote audience

    The Slides of the talk are available online and there is a screencast of the live presentation on YouTube.

    The organisers of HTML5DevConf promised to release the video recording in the next few weeks.

    Here are a few of the points covered to make it more interesting for you to check the 50 minute talk, in case you need more incentive:

    Following the press around HTML5 lately we get more and more the impression that we are on the downward slope of the hype cycle about the cool new tech HTML5. The honeymoon period where every shiny HTML5 demo was heralded as the coolest thing and the future of the internet is over and business analysts and developers start feeling disappointed by what HTML5 is portrayed as. A lot of the things that get us as developers excited have been done in Flash years ago and performed better – even on the hardware of the day. The main mistake we seem to make when advocating HTML5 is not think about what makes it unique and how it is different than other approaches to bring higher fidelity to the web.

    This talk covers a few ideas we can follow to turn the disappointment around. We will soon deliver a more in-depth article about this and are in talks with business analysts to make that message clearer. Some of the points mentioned here are allowing for re-use of existing knowledge with tools to get Flash developers to create HTML5 content, convert C++ to HTML5 for games using Emscripten (with Bananabread as the flagship demo) and in general not to think about what we can add but instead concentrate on what we can not remove to make our products web products and apps instead of simulating native and mobile apps.

    It is up to us to move HTML5 from a flash in the pan to a productive platform, and we can do that by re-using existing knowledge and merge it with the web ideals and the basic principles of HTML5. We will not succeed by trying to replace other platforms that have a lot of knowledge and perform very well indeed.

  4. HTML5 in Sao Paulo, Brazil – the bootleg recordings

    It is always nice to have the opportunity to get to travel and meet developers in various communities in the world: to understand their context, challenges and interests!

    In April I was in South America, and part of that included giving two talks at a MDN Hack Day (well, evening) in Sao Paulo in Brazil. They were filmed with a handcam from front row by Laura Loenert, but I do believe that the videos with sound, combined with the slides, can prove to be useful for sharing – see them as the bootleg version. :-)

    Besides, I prefer that we share what we have – even though it might be rough – than having a lot of material that never gets out there.

    So, I hope you will enjoy these:

    HTML5, The Open Web, and what it means for you

    Video


    (If you’ve opted in to HTML5 video on YouTube you will get that, otherwise it will fallback to Flash)

    Slides


    HTML5, The Open Web, and what it means for you – MDN Hack Day, Sao Paulo from Robert Nyman

    JavaScript APIs – The Web is the Platform

    This talk is similar to the The Web is the Platform presentation at the .toster conference, but a couple of other bits, including a look at Mozilla Collusion.

    Video

    Slides

    JavaScript APIs – The Web is the Platform – MDN Hack Day, Sao Paulo from Robert Nyman

  5. Selling HTML5 to a consulting company

    I just spent a weekend in a resort in Mallorca. I was invited by an IT consultancy from Frankfurt to join them at their off-site and give a two hour (re)introduction to HTML5.

    The audience and the challenge

    The consultancy is very successful in what they do and are very much a Java / native code shop. Their clients are insurance companies, banks and the like which means the topic of HTML5 came up only peripherally in their discussions. With more and more clients looking for iPad apps and other demands for cross-platform solutions they wanted to know more about HTML5, what is possible and what can be done.

    This sounded like a great opportunity to go out of my comfort zone and see how good my skills as an advocate for web technology are. Ever the optimist, I also considered this a great opportunity to inspire in a field in which IT is used to make a difference to the lives of a lot of people. So I said yes.

    The presentation

    Without any preparation (there was no time), without knowing who the audience will be (turns out it was the whole company, including non-technical employees and some contractors) and being asked to deliver the talk in German I found myself in front of a room with about 70 people, set up my computer (which failed to do so the first time, it will go to the farm of old computers soon), happily realised that the WIFI worked and went right into it.

    Instead of talking about HTML5 in isolation, I thought it best to show off the web as a development platform and the advancements that happened in the last few years that may not be known. Turns out this was exactly what was needed and I’ve had a lot of 1:1 conversations later on with people who want to seriously give HTML5 a go. Their idea is converting some of the tools used now in the company to move from Java and fixed-size, Photoshop driven interfaces to more flexible solutions using HTML5 and JavaScript. Score, I’d say.

    What I’ve done

    Seeing that it was more or less an open 2.5 hours show and tell with questions from the audience I have no notes. So here is a list of the things I showed and mentioned which had quite some impact and the techniques how I presented them.

    Laying the groundwork

    I started by explaining the need for HTML5 (document to app transition) and that with a unified and defined HTML parser, we finally have a level playing field across browsers. I explained that a face to face comparison of HTML5 apps and native apps is not fair as the performance of browsers and webviews is hindered in many cases by hardware and the OS. Which means that browers can not use the same resources native code can which of course is a difference in performance. That said, web apps can be more nimble and update much easier than native ones.

    In the spirit of pre-emptive writing I also took the Mark Zuckerberg quote from TechCrunch disrupt a few weeks ago and explained that he didn’t say that HTML5 was a mistake but that the way they approached it was. I also pointed out his quote stating that Facebook’s number of mobile web users are more than the ones of Android and iOS combined.

    Techniques

    I think the most impactful part of the presentation was that I didn’t prepare any slides but used the browser to show everything to the audience. I used Mozilla Thimble to show live code and the immediate impact of my changes. I used the developer tools in Firefox and Chrome to show how to change a live site and try out some of the new technology in existing pages instead of showing demos that are impressive but don’t apply to the audience.

    Platform demos

    All in all my aim was to show that HTML5 is an interesting thing to bet on as it is part of the web ecosystem. This means instead of starting with code I showed:

    • Collaborative editing using online editors
    • GitHub as a place to get code, meet other developers and submit fixes
    • Developer tools of browsers to show that now we can test and fix things outside of a code first, deploy, find bug development cycle
    • MDN as a resource for demos and documentation
    • Browserstack.com to test on browsers and operating system you don’t have

    Technology demos

    The technology demos were simple, but I got lots of good feedback on them as I kept them relevant.

    • Introducing HTML5 form elements and showing that simply adding a number attribute and a required attribute means that this field will always be a number and users can not send the form (in the browser) without satisfactorily having filled the field. This means there is no need for writing client-side validation any longer which is a big headache for non-JavaScript enthusiasts.
    • Adding a video element in the page, playing it with a right-click, adding the controls attribute to add controls and adding a CSS transformation (rotation for example) to prove that video is just another page element in a HTML5 world.
    • Showing a simple example on how to use MediaQueries to do responsive designs and showing the Responsive Mode in the Firefox developer tools
    • Showing a simple hover state in CSS and adding a transition to prove that these days you can make things look smooth very simply without having to add another JavaScript
    • Showing how to progressively enhance a simple HTML document using some CSS transitions to make it look much more engaging.
    • Showing the simplicity of local storage (using the 123done task list example) and explaining how AppCache and manifest files can turn a web page into a locally cached app.
    • Showing how easy it is to plot something in the page using Canvas and explaining that canvas using drag and drop can also allow for image cropping and thumbnail generation.
    • Showing that file uploaders can be much more convenient for the end users these days with the Flickr image uploader as an example
    • Showing how to make a video interact with web content using Mozilla Popcorn – explaining that this could be used for interactive training materials

    Near future gazing

    As requested by the audience I also showcased some of the near-future parts of web tech:

    • The toycam demo explaining that it uses WebRTC which can be used to get video input and manipulate it using WebGL live in the browser. I also pointed out that WebRTC is not limited to that but could be used for all kind of other data streaming tasks
    • Firefox OS, how it is architected and why we do it
    • Mozilla’s Web APIs and how they are used in Firefox OS (showing the FFOS desktop build, playing with the dialer and showing that even they keytones are created using JavaScript)
    • Explaining Persona and how it allows you to simply verify users on the web without having to ask for a username and password
    • Showing off the Banabread demo and explaining how it was done by converting C++ code using Emscripten
    • Showing the Mozilla App store preview and how an HTML5 app can be installed natively and run from the Application folder and full-screen

    Your turn

    All in all I have to say this was thoroughly enjoyable and I got out of it with a sense of satisfaction of having narrowed the gap between the webdesign world and the world of corporate IT a bit more. Give it a go, too, I am sure you’ll enjoy it.

  6. Mozilla at OpenReaktor Warsaw – Firefox OS and Open Business

    As a warm-up for Mozcamp happening in Warsaw, Poland this weekend the Mozilla DevEngage team together with Reaktor Warsaw gave around 100 developers and entrepreneurs a first look at Firefox OS and the upcoming infrastructure Mozilla is working on to enable Open Business.

    Chris Heilmann and Brian King had an hour to bring our messages across before the crowd descended on the Pizza and drinks and more informal but not less animated, smaller discussions ensued.

    Reaktor filmed and live-streamed the session, and you can also watch the recording online.

    The slides to our talks The road to a truly open mobile operating system and Open Web, Open Business are available on the web.

    All in all this was a great evening and we want to thank OpenReaktor for having us and doing a great job in streaming and producing the recording. We had a lot of engaging discussions with the attendees and see what else we can do in the future.

  7. Keynote on Firefox OS at Campus Party Recife

    Chris Heilmann and I just finished our keynote at Campus Party Recife in this lovely Brazilian coastal town. It is amazing to see the enthusiasm and momentum around Firefox OS in the local community.

    By partnering with Telefonica and their Open Web Device initiative the reception was that much that the organisers had to double the amount of seats for the keynote and seeing that Brazil was facing Belarus in the olympic football challenge at the same time that is saying quite a lot!

    A screencast of the talk is available and there is also a live video of the whole presentation available on YouTube:

    Led by Chris with some added points on the APIs themselves from me, the presentation started with a short bit about Mozilla’s history and open values and traced the very fast evolution of our Web APIs toward a hardware-accessible web.

    In the same spirit with which we handled the browser wars before, Mozilla are taking on the Mobile OS lockout developing countries like Brazil are facing right now.

    Yummy things not for all

    Simply put, if you can’t afford it, you can’t have it! And an Android phone is alot more expensive for a consumer in a developing country like Brazil than it is for North Americans or Europeans.

    By enabling mobile application and content development using technologies like HTML5, CSS and JavaScript, Mozilla aims for critical mass in the developer space – as there are much lower barriers to entry: any webpage can be an app! It’s “write once run anywhere” for real, and it’s already been around a while.

    The slide deck of our talk is available on Slideshare with notes and a version without notes.

    During the Question and Answer session typical questions centered around “How will this shake up the existing market?” and “Will this run on my device?”  While we’re currently limited by the practical and proprietary limitations of porting hardware abstraction layers, we hope that, for starters, by driving a critical mass of developers toward Open Web Apps and Firefox OS, that we can affect the current of change in this space.

    John Hammink on stage

    As with all things Mozilla, this followed up with an appeal for community. Yes, we need YOU, to help us test, to help us develop, to help us translate, and to evangelize in your language.

    To this end we finished with an appeal to join the Evangelism Reps program (which yours truly is test driving at the moment!)

  8. FoxIE – a video training series on web standards with Microsoft

    About a month ago Chris Heilmann of Mozilla went to Miami, Florida to shoot a series of training videos with Rey Bango of Microsoft.

    Now these videos are available on Microsoft’s Channel9 as the FoxIE training series.

    In a very off-the-cuff discussion format between Rey and Chris we covered a few topics:

    If you want to present the Mozilla talks yourself, we uploaded the slides in various formats and the code examples with lots of explanations on how to present them to GitHub:

    All the videos are available in HTML5 format and to download as MP4 and WMV for offline viewing.

  9. Talking web standards with Microsoft part 2 – Modern Web Development

    In a recently recorded video series for Microsoft’s Channel 9 Rey Bango and Chris Heilmann talked about a few web development topics on camera. The recordings are being edited now but you can get the presentations and the code examples right now.

    Rey and Chris

    Yesterday you could get the materials of the Building for real standards session. The second session is about “Modern Web Development”. In this we talk about developing for an unknown environment using Progressive Enhancement, what the differences are to Graceful Degradation and we show how Responsive Design can lead to a future friendly product. The slides areavailable on Slideshare and there is also a version with presenter notes.

    Modern web development
    View more presentations from Christian Heilmann

    As part of the Mozilla Evangelism Reps Program we also make the slides with presenter notes as PDF, Keynote and PPT available and additionally release the code examples with tips on how to present them.

    You can get all of this on GitHub in case you want to give this presentation yourself.

    The videos of these sessions should be out in a few weeks. We’ll keep you updated.

  10. Talking web standards with Microsoft part 1 – Building for real standards

    I just returned from a recording session with Microsoft for their Channel 9 feature. Rey Bango (ex-Mozilla and also ex-Ajaxian) had invited us to chat about a few web development topics on video. The recordings are being edited now but you can get the presentations and the code examples right now.

    Rey and Chris

    The first session we recorded was about “Building for real standards”. In this we talk about what a standard means, how this applies to HTML5 and discuss problems and pitfalls to avoid. The slides are available on Slideshare and there is also a version with presenter notes.

    As part of the Mozilla Evangelism Reps Program we also make the slides with presenter notes as PDF, Keynote and PPT available and additionally release the code examples with tips on how to present them.

    You can get all of this on GitHub in case you want to give this presentation yourself.

    In the second (and last) part of the series we talked in detail about Progressive Enhancement, Graceful Degradation and Responsive design. The slides and code examples will be up here tomorrow.