Mozilla

Found 423 results for “html5”

Sort by:

View:

  1. Desktop Apps with HTML5 and the Mozilla Web Runtime

    Desktop Apps with HTML5

    One of the best things about HTML is that it’s never “done”.  HTML has been with us longer than most of the development technologies that we consider commonplace. (.NET, ASP, Java, PHP, etc.)

    The latest incarnation of HTML, HTML5 has been the source of a great deal of buzz in the software and information industries. When we say “HTML5″, we’re implicitly referring to the “stack” of  HTML/CSS/JavaScript.

    At Mozilla we often refer to this collectively as the “Web Run-Time” or WebRT for short. Mozilla’s apps initiative, including the Web Runtime is documented here.

    Skeptics like to say “HTML5 is not ready”. This week I saw an article declaring HTML5 won’t be “ready” for another 10 years. To which I ask “ready for what?” Of course there are many APIs that are still under development, but for many scenarios HTML5 is ready now. For many other scenarios its ready for development now and will be ready for general public use in the near future.

    Recently the Mozilla Apps Native Install Experience was introduced to the Firefox Nightly Channel. (Read here for more information about the Firefox release channels.)

    This functionality lets us install an HTML5 application with a native launching experience on Windows or Mac (Linux and Android coming).

    One great way to do this is to simply list your app in the Mozilla Marketplace. The Marketplace will be open to the general public soon and developers can submit their app now at the Marketplace Ecosystem Portal. All you need besides an app to submit is a set of BrowserID credentials.

    An HTML5 App that targets the Mozilla Web Runtime includes a manifest file.

    The manifest is simply a JSON file that declares certain data about the application.

    Here is the manifest file from a sample app. You can read more about the Mozilla App Manifest here.

        {  
          "version": "1.0",  
          "name": "KO Round Timer",  
          "description": "A Workout Timer for Fighting Athletes!",  
          "icons": {   
            "128": "/images/icon-128.png"  
          },    
          "developer": {  
            "name": "Joe Stagner",  
            "url": "http://koscience.com"  
          },  
          "installs_allowed_from": [  
            "http://timer.koscience.com", 
    	"https://marketplace.mozilla.org"   
          ],    
          "default_locale": "en"  
        }

    JSON does not need to be formatted with CRLFs. The above JSON is only formatted to simplify display.

    Note line #12 above which specifies where the app can be installed from.

    The Mozilla Web Runtime includes an apps object (winbow.navigator.mozApps) The mozApps object (currently implemented in Firefox Nightly on Windows and Mac) has a method to install an application. We’ll look at code that uses that API in a minute.

    If you want your app to install from the Mozilla Marketplace you don’t need to write any install code. When you list your app in the marketplace, the marketplace creates a listing page for your app and that page includes an install button.

    Mozilla Marketplace App Listing Page

    The generated code that is invoked when the Install button is clicked tells the Runtime to install the app. The Runtime then fetches the manifest for the app and, among other things, checks to see it the app allows installation from whatever domain is requesting the install.

    As you can see in the manifest listing above, line 14 specifies that the app may be installed from “https://marketplace.mozilla.org”.

    But you might want to let users install your application from other domains, for example your own web site.

    You can see line 13 in our sample manifest, listed above, that “http://timer.koscience.com” is also specified as a valid “install from” location. I can specify as many domains as I like to be authorized to install the application from and wildcards are supported.

    If we want to install the app from our own web site however, we need to implement the install logic ourselves.

    We could create a page similar to the app listing page on the Mozilla Marketplace, or could make the app “self installing” meaning that we could implement installation logic in the app itself.

    Take, for example, the Workout Timer app shown below.

    K.O. Timer Screen Shot

    Notice the row of navigation buttons at the bottom of the timer.

    The last one to the right says “Install Me”.

    The install button should only appear if the app is running in an environment that supports the mozApps runtime. Since this app (K.O. Timer) is an HTML5 app it can run in any HTML5 compliant browser but will only be “installable” if it is running in a browser / runtime with mozApps support.

    We also don’t want the install button to appear if the app is already installed.

    Here is a JavaScript method to test both runtime support and install state.

    If runtime support is present and the app is not install then an install button is displayed.

    In some scenarios you might choose to forgo the display of an optional install button and simply start the installer when the app is not already installed.

    (This code is using jQuery)

    function TestAppInstalled() {
        if ((!navigator.mozApps) || (!navigator.mozApps.getSelf)) {
            /*-----------------------------------------------------------+
            || Test to see if the Mozilla Apps Web Runtime is supported
            || HACK: Testing for either mozApps OR mozApps.getSelf is a 
            || hack. 
            || This is needed because some pre-beta versions of Firefox 
            || have the object present but nit fully implemented.
            || TODO: Update when Firefox Desktop & Mobile are complete.
            ------------------------------------------------------------*/
            return;
        }
     
        var MyAppSelf = navigator.mozApps.getSelf();
        MyAppSelf.onsuccess = function() {
            if (! this.result) {
                // Application is not "installed"
                $('#InstallButton').show();
            }
            else {
                 // This "MozApp" is already installed.
            }
            return;
        }
        MyAppSelf.onerror = function() {
            alert('Error checking installation status: ' + 
                   this.error.message);
            return;
        }
    }

    When the user clicks on the install button the following code is called.

    $('#InstallButton').click(function() {
        var installation = navigator.mozApps.install(
                    "http://timer.koscience.com/kotimer.webapp");
        installation.onsuccess = function() {
            $('#InstallButton').hide();
            alert("K.O. Timer has been successfully installed.....");
        }
        installation.onerror = function() {
            alert("APP: The installation FAILED : " + this.error.name);
        }
    });

    So when the user navigates to the K.O. Timer app (timer.koscience.com) in a browser that supports mozApps (currently Firefox Nightly) and the user clicks on the “Install Me” button the mozApps runtime starts the installer.

    KOTimer at Install Click

    KOTimer at Install Click Closeup

    After the user clicks “install” button in the dialog pictured above, the installer is called and, when completed, the user has a native launching experience.

    On Windows you get a desktop shortcut.

    Native Shortcut for HTML5 App

    As well as a Start Menu item.

    HTML5 app in the Windows Start Menu

    And, of course the app is now in the user’s Mozilla MyApps collection.

    Mozilla MyApps Collection

    It’s important to remember that, while these launchers have been created on the user’s system the application itself still exists in the cloud. A developer can choose to add “off line” functionality to their application by other HTML5 features like AppCache, LocalStorage or IndexedDB.

    The ability to provide native launchers for HTML5 apps, coupled with the huge HTML5 apps distribution mechanism that will be available when the Mozilla Marketplace become available to the general public (in the near future), creates great opportunity for developers building standards based apps.

  2. Weekly HTML5 Apps Developer Resources, May 8th 2012

    Weekly Resources for HTML5 Apps Developers

    Articles

    Resources

    Bonus Link

    If you find a link that you think should be included, please feel free to forward it to JStagner at Mozilla.com

  3. MDN Hack Day Tour would like to thank…

    Attention UK hackers: MDN Hack Day London takes place this Saturday May 12, at the newest Mozilla Space, on lovely St. Martin’s Lane. Designers, developers, and friends are all invited to register. Hacky goodness guaranteed.

    Many Thanks Yous, One Mozilla

    It was a whirlwind week and a half for the crew of the Mozilla MDN Hack Day Tour in Latin America. Over the course of 10 days we visited four cities in four countries in the Conosur, the southern part of South America. We met hundreds of developers in Buenos Aires, Argentina; Montevideo, Uruguay; Sao Paulo, Brazil; and Santiago, Chile. Thanks to everyone who took the time to listen, to talk with us, and make us feel welcome.

    Our message was well-received: The Web is the platform and it’s built from open technologies. On this trip, we were eager to introduce some of the new projects Mozilla is working on now to keep the Web open as more of the world goes mobile. As a non-profit committed to promoting openness, innovation and opportunity on the Web, Mozilla works best with inputs and participation from communities everywhere.

    Boot to Gecko Demo by Hernan Colmeiro

    In South America, we were a small team, carrying passports from Argentina, Canada, Sweden, Venezuela and the U.S. We spoke in a mix of Spanish and English. Personally I wish more of us had spoken Spanish, but because of my own language limitations, I was extra happy to listen to Spanish-speaking presenters at each of our events.

    We talked about HTML5 & friends and new Javascript APIs. We introduced exciting new Mozilla open source projects like Boot-to-Gecko (B2G), our open web phone project that’s just getting started; the soon-to-be-launched Mozilla Marketplace for HTML 5 apps (presented by Mozilla Labs’ Shane Caraveo), and Mozilla Persona, a new identity system for the Web (presented in Spanish by Dan Mills).

    In Argentina and Uruguay, Telefonica’s Andres Leonardo Martinez Ortiz introduced BlueVia, the developer program and platform from Telefonica, Mozilla partner and MDN Hack Day sponsor. In Buenos Aires, Kevin Dangoor spoke about the developer tools Mozilla is building and Buenos Aires-based add-ons developer and evangelist Hernan Colmeiro spoke about the beauty of add-ons. In Santiago, Chile, Hernan wowed developers with a Boot-to-Gecko demo.

    There were dozens and dozens of individuals who helped make our tour a success, including Mozillians I work with every day and people I’d never met till we arrived in their country. The big risk in writing long thank-yous is that I will unintentionally to forget to mention someone essential, so please accept my apology in advance and don’t hesitate to use the comments.

    Buenos Aires

    We came to Buenos Aires for MozCamp LATAM, Mozilla’s first community gathering held in Latin America, co-hosted by the amazing, multi-national Mozilla Hispano community and their Portuguese-speaking neighbors from Mozilla Brazil.

    Mozilla Hispano Community Day

    On the Friday before MozCamp we organized a day-long Hack Day for developers from Buenos Aires. Over 150 developers attended a morning of talks and demos, followed by an afternoon of project hacking. After lunch, a lively group gathered around Add-ons developer Jorge Villalobos, while other attendees were riveted by Philikon’s demo of the Boot-2-Gecko phone.

    MDN Hack Day would not have succeeded without the outreach, organizational support and hospitality of Felipe Lerena, Guillermo Movia, and Santiago Hollman of the Moz Hispano community. And I’ll add a special shout-out to the Mozcamp LATAM planning committee: Mary Colvig, Chris Hofmann, Santiago Hollmann, Gloria Meneses, Ruben Martin, Reuben Morais, Guillermo Movia, and the unflappable Katherine Naszradi. This couldn’t have happened without your support!

    MozCamp Latam

    Montevideo

    The crew left Buenos Aires on a sunny Monday afternoon, and crossed the Rio de la Plata by Buquebus ferry, arriving in Montevideo at nightfall, after a choppy 3-hour crossing.

    The next morning I met up with old friend and colleague Evan Henshaw Plath, and new friends Diego Algorta, Elena Vilar and the Cubox Labs team who’d been helping us organize, promote and host MDN Hack Day in Montevideo. They work together in a classic 1920s home converted to a co-working space in a leafy residential neighborhood. I met our evening’s speakers, along with Frenchman Jean-Paul Massonnier, an awesome designer, who’d created a poster that was pure Mozilla. I drank delicious coffee and chatted with developers in the kitchen overlooking a garden where coders kicked a football around in the sunshine.

    MDN Hack Day 2012 - Montevideo Poster

    We headed over to Cafe La Diaria. La Diaria is a subscription-based independent newspaper that is now the 2nd most widely read paper in Uruguay. It is run cooperatively and distributed by employees, with a commitment to the highest journalistic standards. Cafe La Diaria is a venue and community space in the old downtown of the city. Here we met our hosts Damian and Antonieta, who cooked up delicious pizza at the break. Cubox’s Nicolas Barrera gave an entertaining and enlightening talk about responsive design, and Fernando Briano, Cuboxer and noted tech blogger served up a presentation on the web as a tool for Social Change.

    In addition, there were two lightning talks: On his last night in Montevideo before moving to Berlin, MDN demo contributor and Developer Derby winner Alvaro Mourino (aka Tuxie) stopped by to talk about our Dev Derby and encourage people to participate. Dario Clavijo, a tech blogger and IT professional in Montevideo, spoke passionately about the importance of free and open software. It was his first ever lightning talk and we were honored to hear from him!

    Sao Paulo

    Robert Nyman, El Sueco, made the trip to Brazil by himself, since the rest of us yanquis were lacking visas. Here’s his report:

    “The next leg of the tour, helpfully organized by local company Caelum, [was] a Mozilla one-man show from me giving two talks in Sao Paulo:

    • HTML5, the Open Web and what it means to you
    • JavaScript APIs – The web is the platform

    In addition to that, local developer Gabriel Oliveira spoke about CSS3, and from what I could understand, he showed some really interesting things!

    There were about 40+ attendees this very rainy night in Sao Paulo, and while there weren’t many people, I was really happy to see the nods of approval in the audience during my talk, when I expressed Mozilla’s values and approach to the web and moving forward. After my presentations, we stood around for a long time discussing the web, -webkit prefixes, H.264 support and more. People seemed to be understanding and pragmatic, and I believe there were some really talented people there.

    Additionally, I got to spend some time being guided around by local community members Fábio Magnoni and Clauber Stipkovic, who I got to know in person at MozCamp in Buenos Aires, and had interesting discussions!”

    Santiago, Chile

    Our final Hack Day of the LATAM tour took place in Santiago, Chile on an overcast Saturday evening. We met in a comfortable classroom at the University of Chile’s Escuela de Economía y Negocios. Jano Gonzalez, a Ruby blogger and all around nice guy made the arrangements. His friends Paulina and Rodrigo took some of the team on a tour of the city.

    More than 50 attendees came out to hear from us. Pizza Hut (!) delivered pizza during the break. Hernan Colmeiro came out from Buenos Aires to introduce Add-ons and to demo Boot-to-Gecko. And Jonathan Gonzalez, no relation to Jano, introduced the Monkey Project, a fast and scalable web server for Linux.

    Monkey Project, presented by Zeus

    We had a strong showing of lightning talks: including presentations delivered in English, with slides in Spanish; presentations in Spanish, with slides in English; a compelling pitch by Ricardo about why you should overcome your shyness and get up at events to give talks about the stuff you know; a hilarious parody of a framework that was probably NSFW, but I didn’t understand enough of the Chilean slang so I can’t be sure; and an introduction to Poderopedia, a database that aims to map the relationships between political and financial power in Chile. We also met some entrepreneurs from the Startup Chile accelerator, and on Monday a couple of us had a chance to visit their lively space.

    In conclusion

    Huge thanks to the rest of the team – everyone was upbeat, professional, collaborative, and more fun than a barrel of monkeys: Shane Caraveo, Hernan Colmeiro, Dan Mills, Robert Nyman, and a special shout-out to Shezmeen Prasad, event organizer extraordinaire, who invited me along. Props also to Jeff Griffiths, who put it all together behind the scenes, from somewhere in Canuckistan. Gracias!

    Photo credits: Prima Limon, thunder, and freshelectrons.

  4. State of the browser in London, England

    Last Saturday in London, England the State of the browser conference brought together developer advocates from almost all browser vendors to give the audience an overview of what is going on in the world of browsers.

    Browser panel
    Browser panel with Bruce Lawson (Opera), Chris Heilmann (Mozilla), Martin Beeby (Microsoft) and Paul Kinlan (Google)

    My involvement was to talk about the state of HTML5 when seen from a native market’s perspective, show some cool new technologies that need our input and take part in the browser panel to discuss current issues. Here are the talks and screencasts. Videos recorded by the organisers should follow soon.

    Talk “Broken HTML5 promises – are we ‘appy?”

    The main Mozilla presentation was about feedback on HTML5 we got at Mobile World Congress from mobile developers, how we as an HTML5 community fail to answer their questions and get tangled up in petty bickering over details instead and what Mozilla does to make HTML5 work across the board.

    The slides with notes are available here and the screencast (with bad audio, sorry) is on vid.ly.

    Breakout session: “The bleeding edge of HTML needs blood donors”

    The breakout session (which was repeated twice) was much less of a “talk” but more of a show and tell in a smaller room. Therefore the screencast is a bit more raw but shows what you can do right now.

    The slides with notes are available here and the screencast is on vid.ly.

    The conference

    All in all the conference was great value for money. All the speakers had great information to give and there was no “marketing talk” promising things that don’t work outside lab environments.

    • Michael Mahemoff did a great job introducing the day with a “native vs. web knockout” talk.
    • Paul Kinlan showed what is coming in Chrome and how Web Intents can change the way we solve app communication over the web
    • Martin Beeby gave a glimpse of how the web can merge with newer devices and UX needs of users

    Seb Lee-Delisle took all the browsers to the performance test to end all performance tests by animating millions of 3D particles and seeing which browser would be the one that can show the most without slowing down. In the end Firefox was the winner with 3695244 particles at 10FPS. Of course this is not a real measure (especially seeing IE10 was run in a VM) but it is always fun to see Seb code live.
    Particles competition results

    I guess my favourite piece about the conference was that the browser panel was very much about answering people’s questions instead of trying to beat each other in being the browser that people should use. British understatement at its best.

  5. State of the Docs, April 24, 2012

    The following is a sample of the changes to the documentation on MDN in the past four weeks. We expect a large flurry of activity during the Documentation sprint this weekend. If you’re in the Bay Area, you’re welcome to join in person for any part of the sprint, or join remotely if you’re elsewhere.

    Help needed

    A reader provided feedback that they don’t understand the domQuery example in the global Function object. It needs to be more clearly explained.

    Web standards docs

    Mozilla technology docs

    Mozilla project docs

  6. Weekly HTML5 Apps Developer Resources, April 25th 2012

    Weekly Resources for HTML5 Apps Developers

    Mozilla Marketplace Partner Spotlights:

    Here are some profiles of app developers who are joining the Mozilla Marketplace.

    Resources

    Articles

    HTML5 App Hi-light

    Mozillian Bonus Link

    If you find a link that you think should be included, please feel free to forward it to JStagner at Mozilla.com