├── .editorconfig
├── README.md
├── html5
├── firefox-os-pick-and-mix.html
├── firefox-os-pick-and-mix_es.html
├── license.txt
├── mozilla-mission.html
├── pictures
│ ├── fxos
│ │ ├── 3dview.mp4
│ │ ├── 3dview.webm
│ │ ├── appmanager.mp4
│ │ ├── appmanager.webm
│ │ ├── apps.png
│ │ ├── boilerplate.jpg
│ │ ├── brick.jpg
│ │ ├── buildingblocks.png
│ │ ├── buildingfirefoxos.png
│ │ ├── console.png
│ │ ├── debugger.png
│ │ ├── devhub.jpg
│ │ ├── devtools.jpg
│ │ ├── devtools.png
│ │ ├── dynamicsearch.mp4
│ │ ├── dynamicsearch.ogv
│ │ ├── dynamicsearch.webm
│ │ ├── enduser-fxos.jpg
│ │ ├── everythingme.jpg
│ │ ├── firefox-oct-2013.png
│ │ ├── firefox-os-emulator.jpg
│ │ ├── firefoxos.png
│ │ ├── flathead.png
│ │ ├── foxkeh-android.png
│ │ ├── fxosvideos.jpg
│ │ ├── fxoswiki.jpg
│ │ ├── hacksblog.jpg
│ │ ├── hobbes-earth.jpg
│ │ ├── inspector.png
│ │ ├── keep-calm-and-trust-html5.jpg
│ │ ├── marketplace.jpg
│ │ ├── mobiletools.png
│ │ ├── network-details.png
│ │ ├── network.png
│ │ ├── nokia-photos.jpg
│ │ ├── phonegapdiagram.png
│ │ ├── pick-activity.jpg
│ │ ├── profiler.png
│ │ ├── reflow.mp4
│ │ ├── reflow.webm
│ │ ├── remote-debugging-overview.png
│ │ ├── responsive.mp4
│ │ ├── responsive.webm
│ │ ├── scratchpad.png
│ │ ├── simulator.png
│ │ ├── simulator40.png
│ │ ├── styleeditor.png
│ │ └── webapiwiki.png
│ ├── mozillaoverview
│ │ └── redpanda.jpg
│ └── templatedemos
│ │ ├── earthphases.gif
│ │ ├── high-five.jpg
│ │ ├── phones.jpg
│ │ ├── smallphones.jpg
│ │ ├── wave.mp4
│ │ └── wave.webm
├── scripts
│ └── script.js
├── template.html
└── themes
│ └── mozilla
│ ├── fonts
│ ├── OpenSans-Bold.eot
│ ├── OpenSans-Bold.svg
│ ├── OpenSans-Bold.ttf
│ ├── OpenSans-Bold.woff
│ ├── OpenSans-Bold.woff2
│ ├── OpenSans-BoldItalic.eot
│ ├── OpenSans-BoldItalic.svg
│ ├── OpenSans-BoldItalic.ttf
│ ├── OpenSans-BoldItalic.woff
│ ├── OpenSans-BoldItalic.woff2
│ ├── OpenSans-ExtraBold.eot
│ ├── OpenSans-ExtraBold.svg
│ ├── OpenSans-ExtraBold.ttf
│ ├── OpenSans-ExtraBold.woff
│ ├── OpenSans-ExtraBold.woff2
│ ├── OpenSans-ExtraBoldItalic.eot
│ ├── OpenSans-ExtraBoldItalic.svg
│ ├── OpenSans-ExtraBoldItalic.ttf
│ ├── OpenSans-ExtraBoldItalic.woff
│ ├── OpenSans-ExtraBoldItalic.woff2
│ ├── OpenSans-Light.eot
│ ├── OpenSans-Light.svg
│ ├── OpenSans-Light.ttf
│ ├── OpenSans-Light.woff
│ ├── OpenSans-Light.woff2
│ ├── OpenSans-LightItalic.eot
│ ├── OpenSans-LightItalic.svg
│ ├── OpenSans-LightItalic.ttf
│ ├── OpenSans-LightItalic.woff
│ ├── OpenSans-LightItalic.woff2
│ ├── OpenSans-Regular.eot
│ ├── OpenSans-Regular.svg
│ ├── OpenSans-Regular.ttf
│ ├── OpenSans-Regular.woff
│ ├── OpenSans-Regular.woff2
│ ├── OpenSans-RegularItalic.eot
│ ├── OpenSans-RegularItalic.svg
│ ├── OpenSans-RegularItalic.ttf
│ ├── OpenSans-RegularItalic.woff
│ ├── OpenSans-RegularItalic.woff2
│ ├── OpenSans-SemiBold.eot
│ ├── OpenSans-SemiBold.svg
│ ├── OpenSans-SemiBold.ttf
│ ├── OpenSans-SemiBold.woff
│ ├── OpenSans-SemiBold.woff2
│ ├── OpenSans-SemiBoldItalic.eot
│ ├── OpenSans-SemiBoldItalic.svg
│ ├── OpenSans-SemiBoldItalic.ttf
│ ├── OpenSans-SemiBoldItalic.woff
│ ├── OpenSans-SemiBoldItalic.woff2
│ ├── TargetBlank.otf
│ └── TargetBlank.svg
│ ├── images
│ ├── Fx-logo.png
│ ├── bg-blue-2.png
│ ├── bg-darkgrey-2.png
│ ├── bg-red-2.png
│ ├── bg-sandstone-2.png
│ ├── mozilla-logo-white.png
│ ├── mozilla-logo.png
│ └── tab-2.png
│ └── styles
│ ├── fonts.css
│ ├── print.css
│ ├── reset.css
│ └── style.css
├── mozilla-sandstone-1280-1.key
├── mozilla-sandstone-1280.key
├── mozilla-sandstone-1280.key.zip
└── mozilla-sandstone-1280.ppt.zip
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true
10 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Mozilla presentation templates
2 | ==============================
3 |
4 | This is the repository with Mozilla styled presentation templates in PPT, Keynote and HTML format.
5 |
6 | There is a screencast showing how to use the Mozilla Evangelism Reps HTML5 slidedeck on YouTube: https://www.youtube.com/watch?v=M_9hf9joTcQ
7 |
8 | Changes in this version:
9 |
10 | * Firefox OS pick and mix overview deck (firefox-os-pick-and-mix.html)
11 | * Fullscreen button (as requested by Stormy Peters)
12 | * Overall cleanup of the CSS (different list styles, live CSS code)
13 | * Pressing "N" in fullscreen mode toggles note display
14 | * In list mode, each slide has a "x" button to turn it on and off. This does not persist though, so when you reload your slides, it will make them all active again (TODO I guess)
15 | * Support for multilingual slides, with URLs that update. Toggle the menu option to get the text in your desired language. (only in HTML5 slidedeck)
16 |
17 | Next steps:
18 |
19 | * Persist Toggle slides feature
20 |
--------------------------------------------------------------------------------
/html5/firefox-os-pick-and-mix.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
13 |
14 | Your talk title here
16 |
21 |
54 | Your talk title here
55 |
60 |
61 |
62 | This slide deck is using the shower system - roll over the previews to see the notes and click any slide to go into presentation mode. Then use keys to navigate. Go fullscreen
63 |
64 | Abstract:
65 | Add your talk abstract here
66 |
67 |
68 |
69 |
74 |
75 |
76 |
77 |
78 | The cover slide
79 |
80 |
84 | {Firstname}, {Lastname}, {Conference}, {Location}, {date}
85 |
86 |
87 | This is a simple cover slide with an image in the middle
88 |
89 |
90 |
109 |
110 |
113 |
114 | Firefox OS is the only fully open mobile operating system based on web standards
115 | It is aimed at markets that don't have access to the current leading operating systems
116 | It is fully web based, there is no native layer. Both the operating system and apps for it are written in HTML5. The hardware access happens via a Linux core that is the same that powers Android
117 | HTML5 is a first class citizen in Firefox OS - it is the OS that keeps the promises others gave us some years ago (No SDK needed)
118 | All you need to know to write an app for Firefox OS is to know HTML5
119 | Firefox OS is live - we have end user phones being sold in Spain, Poland, Venezuela and Columbia
120 |
121 |
123 |
124 |
127 |
128 |
131 |
135 | This is the intro slide to Firefox OS - explain that it is a new operating system, one completely based on open web technologies and aimed at the markets that others don't cover. Both fulfilling the promises made by other platforms and following the principles defined in the Mozilla Manifesto.
136 |
137 |
138 |
141 |
142 |
143 | The mobile platform HTML5 deserves
144 |
145 |
149 | Explain that unlike other platforms, HTML5 is not a second class citizen in Firefox OS but that the system itself, the UI of the OS, is written in HTML5. Instead of hoping for support of HTML5 features, the OS is very much dependent on them.
150 |
151 |
152 |
155 |
156 |
157 | Predictable browser support
158 |
159 |
163 | Firefox OS uses the browser's rendering engine as the main component to create interfaces. That's why you can not have the issues you have with Android, for example, where newest browser versions are not available for an older version of the operating systems. With Firefox OS, you have predictable browser support, rather than having to support outdated stock browsers and find workarounds.
164 |
165 |
166 |
169 |
170 |
173 |
177 | Firefox OS is - and this is important to say - not targeting the same markets as iOS and Android. Its main purpose is to bring web connectivity to markets that can't afford other platforms or aren't even supported by them. That's why Firefox OS users are not comparing what you do as App developers to the latest iOS or Android releases. Your job as app developers for Firefox OS is to bring the first impression of the web to lots and lots of new users. Not an easy task, but also a very rewarding one. Instead of copying Angry Birds and not getting the hardware performance you need you could be the new Angry Birds for a totally new audience.
178 |
179 |
180 |
183 |
184 |
185 | Upgrading the mobile world
186 |
187 |
188 |
192 |
193 | Targeted at new, emerging markets
194 | Very affordable hardware
195 | No credit card needed - client billing
196 | Web technologies through and through
197 | 18 mobile partners, 4 hardware partners
198 |
199 |
200 | Firefox OS was created to bring users of feature phones into the web-enabled mobile world. It is meant to cater to the markets not covered by iOS and Android. Yes, you can buy cheap Androids world-wide but the version of Android they support doesn't have an out-of-the-box browser that allows you to do interesting things on the web. Much like Firefox and Opera for Android allow more users world-wide to have a great web experience without having the latest hardware, Firefox OS goes further. Its main goal is to bring millions of new users to the web on their mobile devices without getting a second-grade experience.
201 |
202 |
203 |
206 |
207 |
208 | Everything in the OS is open web technology and standard proposals
209 |
210 |
214 | Firefox OS is not another closed platform. Everything in the OS is open web technology and based on proposals to the standards bodies. This means the research we did by building Firefox OS and the research you do by making your apps work on it gets fed back to Firefox on Desktop and all the other browsers, too, making the web a better place.
215 |
216 |
217 |
224 |
225 |
226 | Open Web Apps
227 |
228 |
230 |
231 |
234 |
235 |
238 |
241 | What makes a great app?
242 |
243 |
244 | Apps are the hot new thing - except they are not. In essence an app is a thing that does one thing well and is contained in itself. Instead of opening a web site and having it next to many other tabs you open an app and it is the main focus of your attention. People love this. It gives users a catered experience for one task without being distracting. The good news is that the web technologies around HTML5 are flexible enough to cover both cases: you can create a web site but also very easily turn it into an app.
245 |
246 |
247 |
250 |
251 |
252 | Firefox OS Apps?
253 |
254 |
255 | Apps for Firefox OS are HTML5 apps with an extra manifest file
256 | The manifest defines the extra access to hardware you require, the icons and the location of your code
257 | They are secured by a three layer security model allowing more or less access depending on the location of the app (hosted vs. delivered from the marketplace)
258 | They work offline and work across other platforms (when converted)
259 | You can find and install them either from the web or the marketplace
260 |
261 |
263 |
264 |
267 |
268 |
269 | Defined by manifest
270 |
271 |
272 | {
273 | "name": "My App",
274 | "description": "My elevator pitch goes here",
275 | "launch_path": "/",
276 | "icons": { "128": "/img/icon-128.png" },
277 | "developer": {
278 | "name": "Your name or organization",
279 | "url": "http://your-homepage-here.org"
280 | }
281 | }
282 |
283 | App manifest
284 |
285 | The main step to turn an HTML5 page/app into a Firefox App is to define an app manifest. These are simple files in JSON defining the name of your app, where the icons are and what permissions you need for the application to work. They need to be sent with the right MIME type on the server and get submitted to the Mozilla marketplace. See them as a quick description of your app.
286 |
287 |
288 |
291 |
292 |
293 | Three levels of access…
294 |
295 |
296 | Hosted apps - stored on your server, easy to upgrade, limited access.Privileged apps - reviewed by the App store, packaged and signedCertified apps - part of the OS, only by Mozilla and partners
300 | App permissions
301 |
302 | There are three different type of apps in Firefox OS: Hosted Apps, Privileged apps and Certified apps. The first kind is hosted on your own server and has access to a limited amount of extra functionality Firefox OS offers on top of what HTML5 gives you. Privileged apps have much more access to the hardware and must be hosted by Mozilla. Certified apps are part of the operating system and are only built by Mozilla and partners.
303 |
304 |
305 |
308 |
309 |
310 | Install apps from the web
311 |
312 |
313 | var installapp = navigator.mozApps.install(manifestURL);
314 | installapp.onsuccess = function(data) {
315 | // App is installed
316 | };
317 | installapp.onerror = function() {
318 | // App wasn't installed, info is in
319 | // installapp.error.name
320 | };
321 |
322 |
323 | Installing applications from the web is possible by using the open web apps API, which is part of the WebAPI work in Mozilla. You can test if navigator.mozApps is supported and then create a button that calls the install method pointing to the URL of the manifest file of the app to be installed. You then get onsuccess and onerror handlers to deal with the returned objects of the install process. This means that any mobile friendly web site can be turned into an app in a few minutes, and that all the work you put into making your sites found in search engines wasn't wasted, but actually is now advertising for your app.
324 |
325 |
326 |
344 |
345 |
348 |
350 | WebAPI Wiki
351 |
352 |
353 | The WebAPI effort of Mozilla is tracked and described on the wiki.
354 |
355 |
356 |
359 |
360 |
363 |
364 | Open API specifications to access the hardware of devices
365 | Created with and submitted to standards bodies and other browser makers
366 | A plain vanilla JavaScript way to interact with the device
367 | Event driven - every access has a success and failure handler with full insight into what went wrong
368 | Secured by a three layer security model allowing more or less access depending on the location of the app (hosted vs. delivered from the marketplace)
369 |
370 |
371 | WebAPI Wiki
372 |
373 |
374 | The Web API effort of Mozilla is a way to make the whole hardware of mobile devices available in JavaScript in a secure, predictable and open way agreed with other browser makers and standards bodies.
375 |
376 |
377 |
380 |
381 |
382 | Web APIs (hosted apps)
383 |
384 |
385 | Vibration API
386 | Screen Orientation
387 | Geolocation API
388 | Mouse Lock API
389 | Open WebApps
390 | Network Information API
391 | Battery Status API
392 | Alarm API
393 | Push Notifications API
394 | WebFM API / FMRadio
395 | WebPayment
396 | IndexedDB
397 | Ambient light sensor
398 | Proximity sensor
399 | Notification
400 |
401 |
402 | Using WebAPIs to make the web layer more capable
403 |
404 |
405 | Hosted applications, meaning HTML5 apps you run on your own server, get the full functionality of HTML5 and additional API support shown here. All of these APIs are defined on the Mozilla Wiki and proposals to the standard bodies. Some of them have already been implemented in other other browsers, like the geolocation API. For now, however, only Firefox OS gives you all of them. These APIs bring much needed extra functionality to the HTML5 stack.
406 |
407 |
408 |
411 |
412 |
415 |
416 | var b = navigator.battery;
417 | if (b) {
418 | var level = Math.round(b.level * 100) + "%",
419 | charging = (b.charging) ? "" : "not ",
420 | chargeTime = parseInt(b.chargingTime / 60, 10),
421 | dischargeTime = parseInt(b.dischargingTime/60,10);
422 | b.addEventListener("levelchange", show);
423 | b.addEventListener("chargingchange", show);
424 | b.addEventListener("chargingtimechange", show);
425 | b.addEventListener("dischargingtimechange", show);
426 | }
427 |
428 |
429 | This is an example of how to use one of those APIs. They come with properties, methods and fire a lot of events which makes it easy to include them in your own solutions. And as you can see using a simple if statement around your code ensures that only environments that support it execute your code.
430 |
431 |
432 |
435 |
436 |
437 | Web APIs (privileged apps)
438 |
439 |
440 | Device Storage API
441 | Browser API
442 | TCP Socket API
443 | Contacts API
444 | systemXHR
445 |
446 |
447 | Using WebAPIs to make the web layer more capable
448 |
449 |
450 | Privileged apps have access to more APIs and those dealing with content of more sensitive nature like storing information on the device's file system, accessing the contacts list or loading third party data from the web. To recap, privileged apps need to be packaged up, submitted to the marketplace and delivered from Mozilla's infrastructure. We can not allow just any server on the web to access the user's address book as that would allow the creation of malware in a very easy fashion.
451 |
452 |
453 |
478 |
479 |
480 | Web APIs (certified apps)
481 |
482 |
483 | WebTelephony
484 | WebSMS
485 | Idle API
486 | Settings API
487 | Power Management API
488 | Mobile Connection API
489 | WiFi Information API
490 | WebBluetooth
491 | Permissions API
492 | Network Stats API
493 | Camera API
494 | Time/Clock API
495 | Attention screen
496 | Voicemail
497 |
498 |
499 | Using WebAPIs to make the web layer more capable
500 |
501 |
502 | Certified apps are the apps that make up the operating system itself. They are only built by Mozilla and partners and have full access to the hardware of the device, for example to make phone calls or change permissions on the device.
503 |
504 |
505 |
512 |
513 |
514 | Web Activities
515 |
516 |
518 |
519 |
522 |
523 |
524 | Web Activities
525 |
526 |
527 | A proposal to get access to hardware by keeping the user in control instead of authenticating on their behalf
528 | Comparable to Android Intents, but with a more limited scope that makes sense for the web
529 | A technique to create an ecosystem of apps on the device - apps can register as handlers for certain tasks and other apps use them
530 | A simple way to get access to hardware and data without needing to package your app and host it from the market
531 | Highly secure as nothing happens without the user initiating it
532 |
533 |
534 | WebActivies Wiki
535 |
536 |
538 |
539 |
542 |
543 |
544 | Web activities
545 |
546 |
547 | configure
548 | costcontrol
549 | dial
550 | open
551 | pick
552 | record
553 | save-bookmark
554 | share
555 | view
556 | new, f.e type: “websms/sms” or “webcontacts/contact”
557 |
558 |
559 | If you want to access the camera or the address book without packaging your application, there is an alternative called Web Activities. These are much like Web Intents were for Chrome, but more focused on real use cases of the web rather than Android. Using Web Activities you can access the hardware without having to authenticate on the user's behalf. Instead, the users get prompted to use the apps they always use to give you what your app wants.
560 |
561 |
562 |
565 |
566 |
567 | Sending a number to the phone
568 |
569 |
570 | var call = new MozActivity({
571 | name: "dial",
572 | data: {
573 | number: "+1804100100"
574 | }
575 | });
576 |
577 |
578 | This, as an example, is a call activity. When this JavaScript executes, the user will be sent to the dialer app (or Skype, depending on what app was defined as the default one), the number is sent to the app and the user needs to initiate the call. This is the main difference to WebAPIs - the user has the final say. When the call is denied or the user hung up the phone would go back to your app.
579 |
580 |
581 |
584 |
585 |
586 | Get an image from the phone (1/2)
587 |
588 |
590 | var getphoto = new MozActivity({
591 | name: "pick",
592 | data: {
593 | type: ["image/png",
594 | "image/jpg",
595 | "image/jpeg"]
596 | }
597 | });
598 |
599 |
600 | The 'pick' activity is most probably the most useful one, as it allows you to tell the user that you want something from the device. In this case we define in the MIME type array that we are expecting an image. This would result in the screenshot shown on the right - the user gets asked to give us an image, either from the wallpaper or the photos folder or by taking a new photo with the camera.
601 |
602 |
603 |
606 |
607 |
608 | Get an image from the phone (2/2)
609 |
610 |
611 | getphoto.onsuccess = function () {
612 | var img = document.createElement("img");
613 | if (this.result.blob.type.indexOf("image") != -1) {
614 | img.src = window.URL.createObjectURL(this.result.blob);
615 | }
616 | };
617 | getphoto.onerror = function () { // error
618 | };
619 |
620 |
621 | To retrieve the photo all you need is a simple event handler in which you get the image as a data blob and you can play with it in your app.
622 |
623 |
624 |
632 |
633 |
634 | Dynamic app search
635 |
636 |
638 |
639 |
642 |
643 |
644 | Dynamic app search
645 |
646 |
647 | The search interface of Firefox OS does not only search names of apps and media content on your device
648 | Instead, it matches searches with apps by topic.
649 | For example, you can enter a film title and you find apps that deal with movies
650 | These app results are localised to different markets, meaning that you don't find for example Netflix in countries where it isn't available.
651 |
652 |
654 |
655 |
658 |
659 |
660 | Dynamic app search for end users
661 |
662 |
663 | People don't need to know the name of the app, instead they search what they want to find
664 | Apps are real "try before you buy": clicking an icon in the result list will open the mobile optimised web version of the app directly. No need to download, install and discard.
665 | Once people are happy with trying the app they can long-tap to install the app and get all the open web app benefits
666 | You can use apps once and never have to see them again - no clogging up of your device
667 |
668 |
670 |
671 |
674 |
675 |
676 | Dynamic app search for developers
677 |
678 |
679 | Your app gets found by what it does, not by its name or the expensive advertising you have to put into it.
680 | The mobile optimised HTML5 version of your app is your ad – nothing gets wasted
681 | You get users quickly to trying out the app without having to download and install it
682 | You can become the first and most important local app for a certain topic without having to beat others in a closed marketplace
683 |
684 |
686 |
687 |
690 |
691 |
692 | Use-case to app
693 |
694 |
701 |
704 |
705 |
706 | Use-case to app
707 |
708 |
709 |
712 |
714 |
715 |
816 |
817 |
820 | Web Console Docs - Web Console tutorial on YouTube
824 |
825 | The console shows messages around net activity, error messaging and warnings. You can also write any JavaScript here to get information about what is going on in the current page. Opening this is the first step to find bugs. The command line in the console also features autocomplete of objects, properties and method names.
826 |
827 |
828 |
831 |
832 |
835 | Page inspector Docs
839 |
840 | The Inspector allows you to view the HTML source and edit it live. You also get information about the size of elements, which fonts are used and the position, padding and margin of elements.
841 |
842 |
843 |
861 |
862 |
863 | Debugger in action (Jason fill this!)
864 |
865 |
866 |
869 |
871 |
872 |
890 |
891 |
894 | Network Monitor Docs
898 |
899 | The network tab shows you all the resources loaded in the document and how long it took to load them.
900 |
901 |
902 |
905 |
906 |
907 | Network request details
908 |
909 |
913 | Each request can be analysed, you can see the headers, cookies and other request details. You can also copy the URL or edit and resend it. This is great to debug API requests.
914 |
915 |
916 |
939 |
940 |
943 | Profiler Docs
947 |
948 | The profiler allows you to interact with the page and see where your bottlenecks are by backtracing what happened in the browser.
949 |
950 |
951 |
954 |
955 |
956 | Profiler in action (Jason fill this!)
957 |
958 |
959 |
962 |
964 |
965 |
968 |
969 |
970 | Highlight repainted area
971 |
972 |
973 |
976 | Repaint Highlighter Docs
977 |
978 | Repaint Highlighter: shows when the browser repaints a certain screen area which is very useful to debug slow interfaces. Repaints are expensive in terms of performance.
979 |
980 |
981 |
999 |
1000 |
1001 | Scratchpad in action (Jason fill this!)
1002 |
1003 |
1004 |
1007 |
1009 |
1010 |
1013 |
1014 |
1015 | Responsive view
1016 |
1017 |
1018 |
1021 | Responsive View Docs
1022 |
1023 | Responsive view: allows you to resize a page to a certain size whilst keeping the developer tools in a usable size. You can also simulate touch events and take screenshots of the correct sized window.
1024 |
1025 |
1026 |
1029 |
1030 |
1031 | 3D DOM view
1032 |
1033 |
1034 |
1037 |
1038 | 3D View: shows you a 3D rendering of the depth of the DOM of a page
1039 |
1040 |
1041 |
1063 |
1064 |
1065 | Remote debugging of mobile devices
1066 |
1067 | Remote debugging in Firefox
1071 |
1072 | Connect to remote device: this allows you to connect a remote device to the developer tools and get information from a session on a mobile into the developer tools. Available tools are Page Inspector, JavaScript Debugger, Style Editor, Web Console, Profiler and Network Monitor.
1073 |
1074 |
1075 |
1078 |
1079 |
1080 | Firefox OS Simulator
1081 |
1082 |
1086 |
1087 | Firefox OS Simulator
1088 |
1089 |
1090 |
1091 | The Firefox OS Simulator is an add-on for Firefox which simulates a phone on your computer. You can test the install process and buying and selling applications and you can send apps directly to a connected phone. You can also debug your applications directly from your computer including live CSS changes.
1092 |
1093 |
1094 |
1097 |
1098 |
1099 | App Manager
1100 |
1101 |
1102 |
1103 |
1104 |
1105 |
1106 |
1107 | Using the App Manager
1108 |
1109 |
1110 |
1111 | App Manager: Allows for ease of management of apps on your machine and on a mobile device. Even allows debugging of the OS interface itself and of running apps.
1112 |
1113 |
1114 |
1117 |
1118 |
1119 | Prototyping with JSFiddle
1120 |
1121 |
1122 | Write your code as you might normally when making a JSFiddle
1123 |
1124 | Append /webapp.manifest to your Fiddle URL and paste this link into the Firefox OS simulator to install the app
1125 | Alternatively, append /fxos.html to your Fiddle URL to get an install page like a typical Firefox OS hosted application
1126 |
1127 |
1128 |
1129 | Using JSFiddle to prototype Firefox OS Apps
1130 |
1131 |
1132 |
1133 | JSFiddle is a very simple way to create code collaboratively online. The latest version now also has the feature to publish the code you wrote as a Firefox OS app to test things out.
1134 |
1135 |
1136 |
1140 |
1141 |
1142 | Firefox OS UI components
1143 |
1144 |
1148 | Building FirefoxOS
1149 |
1150 |
1151 | Building Firefox OS is a resource that shows you how the operating system itself was built. It is the source code of Gaia, the user interface of Firefox OS, proving that nothing in the OS is closed source. You can use these principles to make your app look "native" on Firefox OS, but be aware that they are not catered to high performance apps.
1152 |
1153 |
1154 |
1157 |
1158 |
1159 | Firefox OS Building blocks
1160 |
1161 |
1166 | FirefoxOS edit mode
1167 |
1168 |
1169 | The Firefox OS building blocks are reusable components that make up the apps that are part of the operating system (certified apps). You could say that they are the look and feel of the operating system. They are not, however, built for high-performance apps like social media streams or games. You can use these building blocks to get started but you need to be sure that your app will look like it is part of the operating system, which might confuse end users. For higher performance and more styling options without the danger of OS styles overriding what you do, check out Mozilla Brick.
1170 |
1171 |
1172 |
1175 |
1176 |
1177 | Mozilla Brick
1178 |
1179 |
1183 | Brick – Introducing Brick
1184 |
1185 |
1186 | Mozilla Brick is a more intelligent way to deal with the issue of UI components on the web. It is a library that allows to build apps from Web Components wrapped in custom tags. That way your markup becomes minimal, the components don't have the problem of styling of the main document being inherited and they perform much better than DOM-created components as their rendering is part of the browser rendering flow.
1187 |
1188 |
1189 |
1192 |
1193 |
1194 | Web Activities Boiler Plate
1195 |
1196 |
1200 | Firefox OS Boiler Plate app
1201 |
1202 |
1203 | The Firefox OS Boiler Plate app by Robert Nyman is a perfect start to get accustomed to Web Activities. It is a showcase of buttons calling different web activities. Simply use the ones you want to have and delete the others. The code is highly commented to show you where to put your functionality.
1204 |
1205 |
1206 |
1211 |
1212 |
1213 | Conversion of HTML5 to native code
1214 |
1215 |
1219 | http://build.phonegap.com/
1220 |
1221 |
1222 | Phonegap is an excellent tool to convert HTML5 Applications to native apps for Android of iOS. The other way around this isn't possible, but by using Phonegap you can build for HTML5, and still cover all the other markets.
1223 |
1224 |
1225 |
1242 |
1243 |
1244 | Resources to talk about
1245 |
1246 |
1254 |
1256 |
1257 |
1260 |
1261 |
1262 | Firefox OS overview
1263 |
1264 |
1268 | http://www.mozilla.org/en-US/firefox/os/
1269 |
1270 |
1271 | This is a end-user facing information page about Firefox OS. There are no developer news or infos here but it is interesting to see how end users can benefit from using Firefox OS.
1272 |
1273 |
1274 |
1277 |
1278 |
1279 | Firefox OS Marketplace
1280 |
1281 |
1284 | https://marketplace.firefox.com/
1285 |
1286 |
1287 | The Firefox OS marketplace is where you can get apps for Firefox OS. It is the end user facing resource for new apps and your apps will show up here.
1288 |
1289 |
1290 |
1293 |
1294 |
1295 | Developer Hub
1296 |
1297 |
1300 | https://marketplace.firefox.com/developers/
1301 |
1302 |
1303 | The developer hub is a one-stop solution for everything about Firefox OS - you get information what makes a good HTML5 application, you can download demo apps to change and you learn how to submit your app to the marketplace.
1304 |
1305 |
1306 |
1309 |
1310 |
1313 |
1316 | https://hacks.mozilla.org/category/firefox-os/
1317 |
1318 |
1319 | The hacks blog has almost weekly new posts about how to create things for and with Firefox OS and up-to-date information on developer tools.
1320 |
1321 |
1322 |
1325 |
1326 |
1327 | Firefox OS video series
1328 |
1329 |
1333 | https://hacks.mozilla.org/category/videoseries/
1334 |
1335 |
1336 | The "Firefox OS for developers: the platform HTML5 deserves" video series explains all parts of the technical solutions in Firefox OS in the form of interviews in very short videos.
1337 |
1338 |
1339 |
1342 |
1343 |
1344 | Firefox OS Wiki
1345 |
1346 |
1349 | https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS
1350 |
1351 |
1352 | The Wiki is where you find detailed information about Firefox OS - from building the operating system to creating your own apps for it.
1353 |
1354 |
1355 |
1365 |
1366 |
1369 |
1371 | {name}
1372 | {title}
1373 | {@twitter }
1374 | Slides : {slideurl}
1376 |
1377 | Photo by Yortw
1378 |
1379 |
1380 |
1382 |
1383 |
1384 |
El título de tu charla va aquí
14 |
17 |
50 | El título de tu charla va aquí
51 |
56 |
57 |
58 | Esta presentación usa el sistema shower, puedes pasar por encima de cada diapositiva para ver las notas y hacer clic en cualquiera de ellas para ir al modo de presentación. Después puedes usar las teclas para navegar Pantalla completa
59 |
60 | Resumen:
61 | Añade el resumen de tu charla aquí
62 |
63 |
64 |
65 |
68 |
69 |
70 |
71 |
74 |
78 | {Nombre}, {Apellido}, {Conferencia}, {Lugar}, {fecha}
79 |
80 |
81 | Esta es una tapa simple con una imagen en el medio
82 |
83 |
84 |
103 |
104 |
107 |
108 | Firefox OS es el único sistema operativo móvil completamente abierto basado en estándares web
109 | Está pensado para mercados que no tengan acceso a los sistemas operativos líderes actuales
110 | Está basado completamanete en la Web, no hay una capa nativa. Tanto el sistema operativo como las aplicaciones estás escritas en HTML5. El acceso al hardware ocurre a través de un núcleo Linux que es el mismo que utiliza Android
111 | HTML5 es un ciudadano de primera clase en Firefox OS, es el único SO que mantiene la promesa que otros dieron años atrás (No se necesita SDK)
112 | Todo lo que necesitas saber para crear una aplicación para Firefox OS es conocer HTML5
113 | Firefox OS es una realidad, tenemos teléfonos vendidos en España, Polonia, Venezuela y Colombia
114 |
115 |
117 |
118 |
121 |
122 |
125 |
129 | Esta es la diapositiva de introducción a Firefox OS. Explica que es un sistema operativo nuevo, basado completamente en tecnologías Web y pensado para mercados que otros no están cubriendo. Tanto cumpliendo las promesas que otros habían hecho como cumpliendo los principios definidos en el Manifiesto de Mozilla.
130 |
131 |
132 |
135 |
136 |
137 | La plataforma móvil que HTML5 merece
138 |
139 |
143 | Explica que, al contrario de otras plataformas, HTML5 no es un ciudadano de segunda en Firefox OS, si no que el sistema mismo, la interfaz del SO, está escrita en HTML5. En lugar de pretender utilizar las características de HTML5, el So depende de él.
144 |
145 |
146 |
149 |
150 |
151 | Soporte del navegador predecible
152 |
153 |
157 | Firefox OS usa el motor de renderizado del navegador como el componente principal para crear las interfaces. Por eso es que no puedes tener los mismos problemas que existen en otros sistemas operativos como Android, por ejemplo, cuando un navegador más moderno no está disponible para una versión anterior del sistema operativo. Con Firefox OS, tienes un soporte de navegador predecible, en lugar de tener que brindar soporte para versiones viejas de los navegadores y encontrar soluciones alternativas.
158 |
159 |
160 |
163 |
164 |
165 | Un nuevo mercado
166 |
167 |
171 | Firefox OS, y esto es importante decirlo, no se enfoca en los mismos mercados que iOS y Android. Su objetivo principal es llevar la conectividad a la web a mercados que no pueden permitirse otras plataformas o ni siquiera tienen acceso a ellas. Es es la razón por la que los usuarios de Firefox OS no estan comparando lo que realizan como desarrolladores de Aplicaciones con las últimas desarrolladas para Andoird e iOS. Tu trabajo como desarrollador de aplicaciones para Firefox OS es brindar la primera impresión de la Web a muchos nuevos usuarios. No es una tarea sencilla, pero si muy fructífera y reconfortante. En lugar de copiar Angry Birds y no tener el rendimiento de hardware que necesitas, puedes ser el nuevo Angry Birds para una audiencia totalmente nueva.
172 |
173 |
174 |
177 |
178 |
179 | Mejorando el mundo móvil
180 |
181 |
182 |
186 |
187 | Enfocado a mercados emergentes y nuevos
188 | Hardware muy accesible
189 | No se necesita tarjeta de crédito, se paga con la factura
190 | Tecnologías web por todos lados
191 | 18 telefónicas asociadas, 4 fabricantes asociados
192 |
193 |
194 | Firefox OS fue creado para llevar usuarios de los teléfonos simples al mundo móvil de la Web. Está destinado a los mercados que no tienen cobertura de iOS y Android. Si, puedes comprar teléfonos con Android baratos, pero la versión de Android que tienen no tiene una navegador instalado que te permita hacer cosas interesantes en la Web. Asi como Firefox y Opera para Android permiten que más usuarios en el mundo tengan una mejor experiencia Web en los teléfonos que no tienen el hardware más moderno, Firefox Os va más allá. Su objetivo principal es llevar millones de nuevos usuarios a la web en sus teléfonos móviles sin que tenga una experiencia de segunda categoría.
195 |
196 |
197 |
200 |
201 |
202 | Todo lo que forma parte del SO es tecnología web abierta y propuesto para estándar
203 |
204 |
208 | Firefox OS no es otra plataforma cerrada. Todas las partes del SO están basadas en tecnologías web abiertas y son propuestas al cuerpo del estándar web. Esto muestra que nuestra búsqueda al crear Firefox OS y la investigación que realizas como desarrollador para crear aplicaciones para este sistema operativo, vuelve a Firefox para escritorio y a todos los otros navegadores web, logrando que la Web sea un mejor lugar para todos.
209 |
210 |
211 |
218 |
219 |
220 | Aplicaciones de la Web abierta
221 |
222 |
224 |
225 |
228 |
229 |
232 |
235 | ¿Qué hace que una aplicación sea genial?
236 |
237 |
238 | Las aplicaciones son "lo nuevo", salvo que no lo son. Esencialmente una aplicación es una cosa que realiza una sola tarea bien y es autosuficiente. En lugar de abrir un sitio web y tenerlo abierto junto a otras pestañas, abres una aplicación y es el foco principal de tu atención. Las personas aman esto. Le da al usuario una experiencia de una sola tarea sin que se distraigan. La buena noticia es que las tecnologías que rodean al HTML5 son lo suficientemente flexibles como para brindar ambos casos: puedes crear un sitio web pero también puedes convertirlo fácilmente en una aplicación.
239 |
240 |
241 |
244 |
245 |
246 | ¿Aplicaciones Firefox OS?
247 |
248 |
249 | Las aplicaciones de Firefox OS son aplicaciones de HTML5 con un archivo extra de manifiesto
250 | El manifiesto define el acceso al hardware que necesitas, los íconos y la ubicación del código
251 | Están resguardados por un modelo de seguridad de tres capas, permitiendo más o menos acceso dependiendo de la ubicación de la aplicación (alojada vs. enviada desde el marketplace)
252 | Funcionan cuando no tienes conexión y funcionan a través de otras plataformas (cuando se preparan para eso)
253 | Puedes encontrarlas e instalarlas desde la web o desde el marketplace
254 |
255 |
257 |
258 |
261 |
262 |
263 | Definido en el manifiesto
264 |
265 |
266 | {
267 | "name": "Mi Aplicación",
268 | "description": "La descripción del uso",
269 | "launch_path": "/",
270 | "icons": { "128": "/img/icon-128.png" },
271 | "developer": {
272 | "name": "Tu nombre u organización",
273 | "url": "http://your-homepage-here.org"
274 | }
275 | }
276 |
277 | Manifiesto de la App
278 |
279 | El paso prinicipal para convetir una página/aplicación HTML5 en una aplicación para Firefox es definir el manifiesto de la misma. Este es un archivo simple escrito en JSON que define el nombre de la aplicación, dónde se encuentran los íconos y qué permisos necesita la aplicación para funcionar. Necesita sr enviado con el tipo MIME correcto y ser enviado al Mozilla marketplace. Puedes verlo como una rápida descripción de tu aplicación.
280 |
281 |
282 |
285 |
286 |
287 | Tres niveles de acceso…
288 |
289 |
290 | Aplicaciones alojadas - guardadas en tu servidor, fácil de actualizar, acceso limitado.Aplicaciones privilegiadas - revisadas por el marketplace, empaquetadas y firmadasAplicaciones certificadas - parte del SO, solo de Mozilla y asociados
294 | App permissions
295 |
296 | Hay tres tipos de aplicaciones en Firefox OS: Aplicaciones alojadas, privilegiadas y certificadas. El primer tipo está alojado en tu propio servidor y tiene acceso a una cantidad limitada de funcionalidad. Las aplicaciones privilegiadas tienen más acceso al hardware y deben ser alojadas por Mozilla. Las aplicaciones certificadas son parte del sistema operativo y solamente son creadas por Mozilla y/o sus asociados.
297 |
298 |
299 |
302 |
303 |
304 | Instalar aplicaciones desde la Web
305 |
306 |
307 | var installapp = navigator.mozApps.install(manifestURL);
308 | installapp.onsuccess = function(data) {
309 | // La aplicación está instalada
310 | };
311 | installapp.onerror = function() {
312 | // La aplicación no está instalada, la información está en
313 | // installapp.error.name
314 | };
315 |
316 |
317 | Instalar aplicaciones desde la web es posible al usar la API para las aplicaciones web abiertas, que es parte de la WebAPI que se trabajó en Mozilla. Puedes probar si navigator.mozApps está habilitado y después crear un botón que llame al método de instalación apuntando a la URl del archivo del manifiesto de la aplicación que debe ser instalada. Después tendrás los resultados onsuccess y onerror para manejar con los objetos que devuelve después de la instalación. Esto significa que cualquier sitio preparado para móviles puede ser convertido en una aplicación en minutos, y que todo el esfuerzo que pusiste en crear ese sitio web y que sea encontrable en los buscadores no está perdido, y que ne cambio te sirve ahora de promoción para tu aplicación.
318 |
319 |
320 |
338 |
339 |
342 |
344 | Wiki de las WebAPI
345 |
346 |
347 | El trabajo de Mozilla en las WebAPI se cuenta e informa en el wiki.
348 |
349 |
350 |
353 |
354 |
357 |
358 | Una especificación abierta para acceder al hardware de los dispositivos
359 | Creadas con y enviadas a los estándares y otros desarrolladores de navegadores
360 | Una forma de interactuar a través de JavaScript con el dispositivo
361 | A través de eventos - cada acceso tiene un manejador de éxito o fracaso con un informe completo para saber qué salió mal
362 | Protegido con un modelo de seguridad de tres capas que permite mayor o menor acceso dependiendo de la ubicación de la aplicación (alojada vs. brindada por el marketplace)
363 |
364 |
365 | Wiki de las WebAPI
366 |
367 |
368 | El trabajo de Mozilla en las Web APIs es una forma de hacer que todo el hardware de los dispositivos esté accesible a través de JavaScript de una forma segura, predecible y abierta, y de forma concertada con otros creadores de navegadores y con los estándares.
369 |
370 |
371 |
374 |
375 |
376 | Web APIs (aplicaciones alojadas)
377 |
378 |
379 | API vibración
380 | Orientación de la pantalla
381 | Geolocalización API
382 | Control del mouse API
383 | WebApps abiertas
384 | Información de la red API
385 | Estado de la batería API
386 | Alarma API
387 | Envio de notificaciones API
388 | WebFM API / FMRadio
389 | Pagos por Web
390 | IndexedDB
391 | Sensor de luz ambiente
392 | Sensor de proximidad
393 | Notificaciones
394 |
395 |
396 | Usar WebAPIs para hacer ampliar la capacidad de la capa web
397 |
398 |
399 | Las aplicaciones alojadas, es decir las aplicaciones que funcionan en tu propio servidor, contienen toda la potencia de las aplicaciones HTML5 más las características adicionales que le agregan las API. Todas estas APIs están explicadas en la wiki de Mozilla y fueron propuestas al cuerpo del estándar. Algunas de ellas ya son implementadas por otros navegadores, como la geolocalización. Por ahora, sin embargo, solo Firefox OS brinda todas ellas. Estas APIs brinda mucha funcionalidad extra a las que tienen las aplicaciones HTML5.
400 |
401 |
402 |
405 |
406 |
409 |
410 | var b = navigator.battery;
411 | if (b) {
412 | var level = Math.round(b.level * 100) + "%",
413 | charging = (b.charging) ? "" : "not ",
414 | chargeTime = parseInt(b.chargingTime / 60, 10),
415 | dischargeTime = parseInt(b.dischargingTime/60,10);
416 | b.addEventListener("levelchange", show);
417 | b.addEventListener("chargingchange", show);
418 | b.addEventListener("chargingtimechange", show);
419 | b.addEventListener("dischargingtimechange", show);
420 | }
421 |
422 |
423 | Este es un ejemplo de cómo usar una de estas APIs. Contienen propiedades, métodos y ejecutan muchos eventos que facilitan la inclusión de ellas en tus propias soluciones. Y como puedes ver, usando un simple bucle if en tu código puedes asegurarte que solo los ambientes que tienen habilitada esta capacidad, lo ejecuten.
424 |
425 |
426 |
429 |
430 |
431 | Web APIs (aplicaciones privilegiadas)
432 |
433 |
434 | Memoria del dispositivo API
435 | Navegador API
436 | TCP Socket API
437 | Contactos API
438 | systemXHR
439 |
440 |
441 | Usar WebAPIs para hacer ampliar la capacidad de la capa web
442 |
443 |
444 | Las aplicaciones privilegiadas tienen acceso a más APIs y aquellas que tienen acceso a información más sensible, como guardar información en la memoria de tu dispositivo, acceder a la lista de contactos o traer contenido de terceros de una página web. Las aplicaciones privilegiadas deben sern empaquetadas y enviadas al marketplace y ofrecidas por la arquitectura de Mozilla. No podemos permitir que cualquier servidor en la web tenga acceso a la libreta de contactos del usuario, ya que esto generaría el espacio para la creación de software malicioso en muchas formas.
445 |
446 |
447 |
472 |
473 |
474 | Web APIs (aplicaciones certificadas)
475 |
476 |
477 | WebTelephony
478 | WebSMS
479 | Espera API
480 | Opciones API
481 | Adminstración de energía API
482 | Conexión móvil API
483 | Información WiFi API
484 | WebBluetooth
485 | Permisos API
486 | Estadísticas de red API
487 | Cámara API
488 | Fecha/Reloj API
489 | Atención de la pantalla
490 | Correo de voz
491 |
492 |
493 | Usar WebAPIs para hacer ampliar la capacidad de la capa web
494 |
495 |
496 | Las aplicaciones certificadas son las aplicaciones que forman parte del sistema operativo en si mismo. Solo son creadas por Mozilla y los socios y tienen acceso completo al hardware del dispositivo, por ejemplo para hacer llamadas o cambiar los permisos del dispositivo.
497 |
498 |
499 |
506 |
507 |
508 | Web Activities
509 |
510 |
512 |
513 |
516 |
517 |
518 | Web Activities
519 |
520 |
521 | Una propuesta para tener acceso al hardware manteniendo al usuario con el control en lugar de autentificar en su nombre
522 | Comparabl e a Android Intents, pero con un horizonte más limitado que tiene más sentido en la web
523 | Una técnica para crear un ecosistema de aplicaciones en el dispositivo, las aplicaciones pueden registrarse como con la posibilidad de brindar ciertas tareas y otras aplicaciones pueden usarlas
524 | Una forma simpre de acceder al hardware e información sin tener que empaquetar tu aplicación y enviarla al marketplace
525 | Muy seguro ya que no sucede nada sin que el usuario lo inicie
526 |
527 |
528 | WebActivies Wiki
529 |
530 |
532 |
533 |
536 |
537 |
538 | Web activities
539 |
540 |
541 | configure
542 | costcontrol
543 | dial
544 | open
545 | pick
546 | record
547 | save-bookmark
548 | share
549 | view
550 | new, p.e type: “websms/sms” o “webcontacts/contact”
551 |
552 |
553 | Si quieres acceder a la cámara o la libreta de direcciones sin tener que empaquetar tu aplicación, hay una alternativa llamada Web Activities. Son muy parecidas a lo que los Web Intents son para Chrome, pero enfocados en casos reales de uso, más que en Android. PUedes usar Web Activities para acceder al hardware sin tener que autentificarte en lugar del usuario. En cambio, se le pide al usuario que use alguna de las aplicaciones que ya conoce para devolverle a tu aplicación lo que quieres.
554 |
555 |
556 |
559 |
560 |
561 | Enviar un número al teléfono
562 |
563 |
564 | var call = new MozActivity({
565 | name: "dial",
566 | data: {
567 | number: "+1804100100"
568 | }
569 | });
570 |
571 |
572 | Este ejemplo nos muestra una actividad de llamado. Cuando se ejecuta el JavaScript, el usuario será derivado a la aplicación de llamadas (o a la aplicación que el usuario haya definido como predeterminadad), el número es enviado a la aplicación y el usuario puede iniciar la llamada. Esta es la mayor diferencia con las WebAPIs, el usuario es quien decide. Cunado la llamada es negada o se termine, el teléfono volverá a tu aplicación.
573 |
574 |
575 |
578 |
579 |
580 | Obtener una imagen del teléfono (1/2)
581 |
582 |
584 | var getphoto = new MozActivity({
585 | name: "pick",
586 | data: {
587 | type: ["image/png",
588 | "image/jpg",
589 | "image/jpeg"]
590 | }
591 | });
592 |
593 |
594 | La actividad 'pick' es probablemente una de las más útiles, porque le dice al usuario que quieres algo del dispositivo. En este caso definimos en la matriz de tipos MIME que estamos esperando una imagen. Esto puede terminar como la captura que se muestra a la derecha, se le pregunta al usuario si quiere darnos una imagen, ya sea de la carptea de fondos de pantalla o de fotos, o tomar una nueva foto con la cámara.
595 |
596 |
597 |
600 |
601 |
602 | Obtener una imagen del teléfono (2/2)
603 |
604 |
605 | getphoto.onsuccess = function () {
606 | var img = document.createElement("img");
607 | if (this.result.blob.type.indexOf("image") != -1) {
608 | img.src = window.URL.createObjectURL(this.result.blob);
609 | }
610 | };
611 | getphoto.onerror = function () { // error
612 | };
613 |
614 |
615 | Para recibir la imagen, lo único que tienes que hacer es un evento que pueda manejar la respuesta que le llegue de las otras aplicaciones.
616 |
617 |
618 |
621 |
622 |
623 | Activities y aplicaciones alojadas en Android
624 |
625 |
626 |
629 |
630 | La gran noticia es que si tienes Firefox para Android, está funcionalidad también está disponible fuera de Firefox OS, en cualquier dispositivo Android donde funcione Firefox para Android.
631 |
632 |
633 |
640 |
641 |
642 | Búsqueda dinámica de aplicaciones
643 |
644 |
646 |
647 |
650 |
651 |
652 | Búsqueda dinámica de aplicaciones
653 |
654 |
655 | La interfaz de búsqeuda de Firefox OS no solo busca nombres de aplicaciones o contenido en tu dispositivo
656 | También busca coincidencias con aplicaciones por temática.
657 | Por ejemplo, puedes escribir el título de una película y encontrarás aplicaciones relacionadas con películas
658 | Estos resultados de aplicaciones están preparados para diferentes mercados, lo que significa que no encontrarás Netflix entre las opciones, si no está dispoinble en tu país.
659 |
660 |
662 |
663 |
666 |
667 |
668 | Búsqueda dinámica de aplicaciones para el usuario
669 |
670 |
671 | Los usuarios no necesitan saber el nombre de la aplicación, si no que realizan la búsqeuda por lo que les interesa
672 | Las aplicaciones son realmente "probar antes de comprar": al hacer clic en uno de los resultados de la lista abrirá la versión preparada para dispositivos móviles de la aplicación. Sin necesidad de descargar, instalar o desinstalar.
673 | Una vez que el usuario está contento con la aplicación, pueden hacer un clic largo para instalarla y obtener todos los beneficios de una aplicación de la web abierta
674 | El usuario puede usar la aplicación una sola vez, sin que queden registros en el dispositivo
675 |
676 |
678 |
679 |
682 |
683 |
684 | Búsqueda dinámica de aplicaciones para desarrolladores
685 |
686 |
687 | Tu aplicación se encontrará por lo que haga, no por el nombre o la publicidad cara que puedas haber puesto en ella.
688 | La versión en HTML5 de tu aplicación es tu publicidad, nada se desperdicia
689 | Encuentras usuarios rápidamente que prueban la aplicación sin tener que descargarla ni instalarla
690 | Puedes convertirte en la aplicación local más importante de una temática, sin tener que competir con otros en mercados cerrados
691 |
692 |
694 |
695 |
698 |
699 |
700 | Caso de uso a aplicación
701 |
702 |
709 |
712 |
713 |
714 | Caso de uso a aplicación
715 |
716 |
717 |
720 |
722 |
723 |
788 |
789 |
790 | Simulador de Firefox OS
791 |
792 |
796 |
797 | Simulador de Firefox OS
798 |
799 |
800 |
801 | El simulador de Firefox OS es un complemento para Firefox que simula un teléfono en tu equipo. Puedes probar el proceso de instalación, comprar y vender aplicaciones y puedes enviar las aplicaciones directamente a un teléfono que esté conectado. También puedes probar las aplicaciones directamente desde tu equipo, permitiendo cambios en vivo del CSS.
802 |
803 |
804 |
807 |
808 |
809 | Prototipos con JSFiddle
810 |
811 |
812 | Escribe tu código como harías normalmente con JSFiddle
813 |
814 | Agrega /webapp.manifest a la URL del Fiddle y pega el enlace en el simulador de Firefox OS para instalar la aplicación
815 | También puedes agregar /fxos.html a la URL del Fiddle para obtener una página de instalación como tendrías con una típica aplicación alojada de Firefox OS
816 |
817 |
818 |
819 | Usar para prototipos de aplicaciones de Firefox OS
820 |
821 |
822 |
823 | JSFiddle es una forma simple de crear código de forma colaborativa. La última versión permite además publicar el código como una aplicación de Firefox OS para poder probarla.
824 |
825 |
826 |
830 |
831 |
832 | Componentes de la interfaz de Firefox
833 |
834 |
838 | Crear FirefoxOS
839 |
840 |
841 | Building Firefox OS es un recurso que muestra cómo se creó el sistema operativo. Es el código fuente de Gaia, la interfaz de usuario de Firefox OS, lo que prueba que nada en el SO es cerrado. Puedes usar estos principios para hacer que tu aplicación parezca «nativa» en Firefox OS, pero ten en cuenta que no están preparadas para aplicaciones de alto rendimiento.
842 |
843 |
844 |
847 |
848 |
849 | Bloques de Firefox OS
850 |
851 |
856 | FirefoxOS edit mode
857 |
858 |
859 | Los bloques de Firefox OS son componentes reusables que forman parte del sistema operativo (aplicaciones certificadas). Puedes decir que son el diseño del sistema operativo. Sin embargo no están preparadas para aplicaciones de alto rendimiento, como canales de redes sociales o juegos. Puedes usar estos bloques para empezar, pero tienes que estar atento a que tu aplicación se verá como parte del sistema operativo, lo que puede confundir a los usuarios. Para otras opciones de más alto rendimiento o que no corran el peligro de confundirse con el sistema operativo, mira Mozilla Brick.
860 |
861 |
862 |
865 |
866 |
867 | Mozilla Brick
868 |
869 |
873 | Brick – Presentamos Brick
874 |
875 |
876 | Mozilla Brick es una forma más inteligente de lidiar con el problemas de los componentes de la iterfaz en la web. Es una biblioteca que permite crear aplicaciones desde componentes web incluidos en etiquetas peronalizadas. De esa forma tu marcado se hace mínimo, los componentes no tienen el problema de heredar estilos del documento principal y su rendimiento es mucho mejor que los componentes creados en el DOM, porque se muestran como parte del proceso de renderizado del navegador.
877 |
878 |
879 |
882 |
883 |
884 | Modelo de Web Activities
885 |
886 |
890 | Modelo de aplicaciones para Firefox OS
891 |
892 |
893 | El modelo de aplicaciones para Firefox OS creado por Robert Nyman es el comienzo perfecto para acostumbrarse a las actividades Web. Es un muestrario de botones que llaman a las diferentes actividades Web. Simplemente usa aquellas que necesites y borra las otras. El código está muy comentado para que veas donde poner esas funcionalidades.
894 |
895 |
896 |
899 |
900 |
901 | En breve: Mozilla Flathead
902 |
903 |
907 |
908 | URL de prueba de Flathead
909 |
910 |
911 |
912 | Flathead es un editor WYSIWYG para aplicaciones que permite arrastrar y soltar componentes, conectarlos en forma visual y después empaquetar y enviar tu aplicación con un simple clic. Es parte del proyecto Mozilla Webmaker y actualmente en producción.
913 |
914 |
915 |
918 |
919 |
920 | Conversión de HTML5 a código nativo
921 |
922 |
926 | http://build.phonegap.com/
927 |
928 |
929 | Phonegap es una herramienta excelente para convertir aplicaciones de HTML5 en aplicaciones nativas para Android e iOS. La forma inversa no es posible, pero usando Phonegap puedes crear tu aplicación en HTML5 y todavía participar en los otros mercados.
930 |
931 |
932 |
949 |
950 |
951 | Recursos para comentar
952 |
953 |
961 |
963 |
964 |
967 |
968 |
969 | Vistazo de Firefox OS
970 |
971 |
975 | http://www.mozilla.org/en-US/firefox/os/
976 |
977 |
978 | Esta es la página de información para el usuario final de Firefox OS. No hay notas ni información para los desarrolladores aquí, pero es útil para ver cómo los usuarios finales pueden beneficiarse con Firefox OS.
979 |
980 |
981 |
984 |
985 |
986 | Firefox OS Marketplace
987 |
988 |
991 | https://marketplace.firefox.com/
992 |
993 |
994 | El marketplace de Firefox OS es donde puedes conseguir aplicaciones para Firefox OS. Es el lugar para que el usuario final encuentre nuevas aplicaciones y tus aplicaciones se verán aquí.
995 |
996 |
997 |
1000 |
1001 |
1002 | Centro para desarrolladores
1003 |
1004 |
1007 | https://marketplace.firefox.com/developers/
1008 |
1009 |
1010 | El centro para desarrolladores es la solución más rápida para todo lo relacionado con Firefox OS. Encontrarás información sobre qué hace útil a una aplicación HTML5, podrás descargar aplicaciones de demostración para modificarlas y podrás aprender como enviar tu aplicación al marketplace.
1011 |
1012 |
1013 |
1016 |
1017 |
1018 | El blog de Hacks
1019 |
1020 |
1023 | https://hacks.mozilla.org/category/firefox-os/
1024 |
1025 |
1026 | El blog de hacks se actualiza casi semanalmente con noticias acerca de cómo crear por y con Firefox OS y con novedades de las herramientas para desarrolladores.
1027 |
1028 |
1029 |
1032 |
1033 |
1034 | Serie de videos sobre Firefox OS
1035 |
1036 |
1040 | https://hacks.mozilla.org/category/videoseries/
1041 |
1042 |
1043 | La serie de videos "Firefox OS para desarrolladores: la plataforma que HTML5 merece" explica todas las de las soluciones técnicas en Firefox OS en la forma de pequeños videos con entrevistas (este contenido está en inglés).
1044 |
1045 |
1046 |
1049 |
1050 |
1051 | El Wiki de Firefox OS
1052 |
1053 |
1056 | https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS
1057 |
1058 |
1059 | El Wiki es donde encontrarás información detallada acerca de Firefox OS, desde cómo compilar el sistema operativo hasta crear tus propias aplicaciones para él.
1060 |
1061 |
1062 |
1072 |
1073 |
1076 |
1078 | {name}
1079 | {title}
1080 | {@twitter }
1081 | Slides : {slideurl}
1083 |
1084 | Photo by Yortw
1085 |
1086 |
1087 |
1089 |
1090 |
1091 |
{title}
5 |
20 |
21 |
24 | {Name}, Mozilla, {event}, {location}, {date}
25 |
27 |
28 |
31 |
32 |
35 |
36 | Who is Mozilla
37 |
40 |
41 | Conclusion & call to action
42 | Questions and Answers
43 |
44 |
46 |
47 |
50 |
51 |
54 |
55 | a global community of people who believe that openness , innovation , and opportunity are key to the continued health of the Internet.
56 |
57 |
59 |
60 |
63 |
64 |
65 | We’re known for the Firefox Web Browser
66 |
67 |
71 |
74 |
75 |
76 | Mozilla Manifesto
77 |
78 |
79 | The Internet is a global public resource that must remain open and accessible .
80 | The Internet should enrich the lives of individual human beings.
81 | Individuals' security on the Internet is fundamental and cannot be treated as optional.
82 | Individuals must have the ability to shape their own experiences on the Internet.
83 |
84 |
86 |
87 |
90 |
91 |
92 | Your slides here
93 |
94 | Your content goes here,
95 | after the Mission intro and the before the call to action & Q&A
96 |
98 |
99 |
118 |
119 |
120 | Questions & Answers
121 |
122 |
130 |
132 |
133 |
Your talk title here
16 |
21 |
26 | Your talk title here
27 |
32 |
33 |
34 | This slide deck is using the shower system - roll over the previews to see the notes and click any slide to go into presentation mode. Then use keys to navigate. Go fullscreen
35 |
36 | Abstract:
37 | Add your talk abstract here
38 |
39 |
40 |
41 |
46 |
47 |
48 |
49 |
50 | The cover slide
51 |
52 |
56 | {Firstname}, {Lastname}, {Conference}, {Location}, {date}
57 |
58 |
59 | This is a simple cover slide with an image in the middle
60 |
61 |
62 |
67 |
68 |
69 | Callout slide styles
70 |
71 | The following are callout slide styles – either a large word, or a one sentence headline. Use them to chunk your presentation into logical units.
72 | Multilingual content:
73 | This is English.
74 | 这是中文（简体）。
75 | 這是中文（繁體）。
76 | これは日本語です。
77 |
79 |
80 |
83 |
84 |
85 |
86 | Shout slide
87 | 标题
88 | 標題
89 | タイトル
90 |
91 |
92 |
94 |
95 |
98 |
99 |
100 | Imagine : One line slide
102 |
104 |
105 |
108 |
109 |
110 | Image slide styles
111 |
112 |
113 | Images are either backgrounds or part of the page.
114 | Background images need a "cover" class on on the slide DIV.
115 | In-page images need a class of "middle" to get centered
116 | Adding "left" or "right" classes floats the image and you can use text next to them
117 | Adding a "shadow" class adds a drop-shadow.
118 | FIGURE elements around the image allow for a "swinging frame" effect
119 | Images can also be videos or SVG. :)
120 |
121 |
123 |
124 |
145 |
146 |
147 | Image slide (stretched vertical)
148 |
149 |
153 |
154 | Image by Chris Heilmann
155 |
156 |
157 |
158 | Introduce yourself, who you are and why you are the person to give that talk
159 |
160 |
161 |
164 |
165 |
166 | Image slide (centered, resized)
167 |
168 |
172 |
173 | Image by Chris Heilmann
174 |
175 |
176 |
177 | Introduce yourself, who you are and why you are the person to give that talk
178 |
179 |
180 |
183 |
184 |
185 | Image slide (right)
186 |
187 |
192 | Item 1
193 | Item 2
194 | Item 3
195 |
196 |
197 |
198 |
199 | Image by Chris Heilmann
200 |
201 |
202 |
203 | Introduce yourself, who you are and why you are the person to give that talk
204 |
205 |
206 |
290 |
291 |
292 | Image slide (GIF)
293 |
294 | GIFs animate from the start when the slide shows.
297 |
299 |
300 |
342 |
343 |
344 | List style types
345 |
346 | The following are the different kinds of list styles available to you. Always remember that bullets kill – both people and audiences. If people can read ahead of your narrative, they will. And you made yourself redundant as a speaker.
347 |
349 |
350 |
353 |
354 |
355 | Numbered list
356 |
357 |
358 | Collect underpants
359 | ???
360 | Profit
361 |
362 |
364 |
365 |
368 |
369 |
370 | Unordered List
371 |
372 |
373 | Tigers
374 | Elephants
375 | Bears
376 |
377 | Koalas
378 | Polar
379 | Panda
380 |
381 |
382 | Oh my…
383 |
384 |
386 |
387 |
390 |
391 |
394 |
395 | Tigers
396 | Elephants
397 | Bears
398 |
399 | Koalas
400 | Polar
401 | Panda
402 |
403 |
404 | Oh my…
405 |
406 |
408 |
409 |
412 |
413 |
416 |
417 | Tigers
418 | Elephants
419 | Bears
420 |
421 | Koalas
422 | Polar
423 | Panda
424 |
425 |
426 | Hedgehogs
427 | Opossums
428 | Hyrax
429 | Capybara
430 | Oh my…
431 |
432 |
434 |
435 |
438 |
439 |
442 |
443 | Tigers
444 | Elephants
445 | Bears
446 | Hedgehogs
447 | Opossums
448 | Hyrax
449 | Capybara
450 | Oh my…
451 |
452 |
454 |
455 |
458 |
459 |
460 | Animated List
461 |
462 |
463 | Tigers
464 | Elephants
465 | Bears
466 | Hedgehogs
467 | Opossums
468 | Hyrax
469 | Capybara
470 | Oh my…
471 |
472 |
474 |
475 |
478 |
479 |
480 | One line list
481 |
482 |
483 | Elephants
484 | Aardvarks
485 | Hedgehogs
486 | Kittens
487 | Puppies
488 |
489 |
491 |
492 |
495 |
496 |
499 |
500 | Elephants
501 | Aardvarks
502 | Hedgehogs
503 | Kittens
504 | Puppies
505 | Axolotls
506 | Elephants
507 | Aardvarks
508 | Hedgehogs
509 | Kittens
510 | Puppies
511 | Axolotls
512 | Elephants
513 | Aardvarks
514 | Hedgehogs
515 | Kittens
516 | Puppies
517 | Axolotls
518 | Elephants
519 | Aardvarks
520 | Hedgehogs
521 | Kittens
522 | Puppies
523 | Axolotls
524 | Elephants
525 | Aardvarks
526 | Hedgehogs
527 | Kittens
528 | Puppies
529 | Axolotls
530 |
531 |
533 |
534 |
537 |
538 |
541 | Code is not automatically encoded and colour coded. The space you have for code is also limited. This is by design: presentations are not there to drench audiences with code . Switch to your editor if needed and link to live, maintained code so people don't copy+paste.
542 |
544 |
545 |
548 |
549 |
552 |
553 | var installapp = navigator.mozApps.install(manifestURL);
554 | installapp.onsuccess = function(data) {
555 | // App is installed
556 | };
557 | installapp.onerror = function() {
558 | // App wasn't installed, info is in
559 | // installapp.error.name
560 | };
561 |
562 |
564 |
565 |
568 |
569 |
570 | Markup is encoded
571 |
572 |
573 | Paragraph without encode
<p>Paragraph without encode</p>
575 |
577 |
579 |
580 |
583 |
584 |
585 | Live CSS code
586 |
587 |
588 |
593 |
595 |
596 |
599 |
600 |
601 | Live CSS code (smooth)
602 |
603 |
604 |
609 |
611 |
612 |
615 |
616 |
619 | Quotes are a superb way to look clever and get more kudos for being in the know. Make sure you attribute them correctly and do not quote out of context.
620 |
622 |
623 |
626 |
627 |
630 |
631 | The worst part of internet quotes is that you can never be sure that they are attributed correctly.
632 | Benjamin Franklin
633 |
634 |
636 |
637 |
640 |
641 |
642 | Long quote is long…
643 |
644 |
645 | But there's no doubt that, we went for this approach, we built this internal framework that we called Faceweb , which is basically this idea that we can take the infrastructure that we built out for pushing code everyday, not having to submit to an app store, building web code on the web stack that we have, and that we can translate that into mobile development. We just were never able to get the quality of it we wanted …
646 |
647 |
648 | It seems the main failure was Facebook's approach and internal system creating HTML5 apps - not the technology itself.
649 |
650 |
651 |
654 |
655 |
658 |
660 | {name}
661 | {title}
662 | {@twitter }
663 | Slides : {slideurl}
665 |
666 | Photo by Yortw
667 |
668 |
669 |
671 |
672 |
673 |
3 |
4 | Designer: Vadim Makeev
5 |
6 |
7 |
8 |
13 |
14 |
--------------------------------------------------------------------------------
/html5/themes/mozilla/images/Fx-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/mozilla-presentation-templates/17d7d89bf7c4e2cf91f4a2c83efe9723808d34d5/html5/themes/mozilla/images/Fx-logo.png
--------------------------------------------------------------------------------
/html5/themes/mozilla/images/bg-blue-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/mozilla-presentation-templates/17d7d89bf7c4e2cf91f4a2c83efe9723808d34d5/html5/themes/mozilla/images/bg-blue-2.png
--------------------------------------------------------------------------------
/html5/themes/mozilla/images/bg-darkgrey-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/mozilla-presentation-templates/17d7d89bf7c4e2cf91f4a2c83efe9723808d34d5/html5/themes/mozilla/images/bg-darkgrey-2.png
--------------------------------------------------------------------------------
/html5/themes/mozilla/images/bg-red-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/mozilla-presentation-templates/17d7d89bf7c4e2cf91f4a2c83efe9723808d34d5/html5/themes/mozilla/images/bg-red-2.png
--------------------------------------------------------------------------------
/html5/themes/mozilla/images/bg-sandstone-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/mozilla-presentation-templates/17d7d89bf7c4e2cf91f4a2c83efe9723808d34d5/html5/themes/mozilla/images/bg-sandstone-2.png
--------------------------------------------------------------------------------
/html5/themes/mozilla/images/mozilla-logo-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/mozilla-presentation-templates/17d7d89bf7c4e2cf91f4a2c83efe9723808d34d5/html5/themes/mozilla/images/mozilla-logo-white.png
--------------------------------------------------------------------------------
/html5/themes/mozilla/images/mozilla-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/mozilla-presentation-templates/17d7d89bf7c4e2cf91f4a2c83efe9723808d34d5/html5/themes/mozilla/images/mozilla-logo.png
--------------------------------------------------------------------------------
/html5/themes/mozilla/images/tab-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/mozilla-presentation-templates/17d7d89bf7c4e2cf91f4a2c83efe9723808d34d5/html5/themes/mozilla/images/tab-2.png
--------------------------------------------------------------------------------
/html5/themes/mozilla/styles/fonts.css:
--------------------------------------------------------------------------------
1 |
2 | @font-face {
3 | font-family: 'Open Sans';
4 | src: url('../fonts/OpenSans-Light.eot');
5 | src: url('../fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
6 | url('../fonts/OpenSans-Light.woff2') format('woff2'),
7 | url('../fonts/OpenSans-Light.woff') format('woff'),
8 | url('../fonts/OpenSans-Light.ttf') format('truetype'),
9 | url('../fonts/OpenSans-Light.svg#open_sanslight') format('svg');
10 | font-weight: 300;
11 | font-style: normal;
12 |
13 | }
14 |
15 | @font-face {
16 | font-family: 'Open Sans';
17 | src: url('../fonts/OpenSans-LightItalic.eot');
18 | src: url('../fonts/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
19 | url('../fonts/OpenSans-LightItalic.woff2') format('woff2'),
20 | url('../fonts/OpenSans-LightItalic.woff') format('woff'),
21 | url('../fonts/OpenSans-LightItalic.ttf') format('truetype'),
22 | url('../fonts/OpenSans-LightItalic.svg#open_sanslight_italic') format('svg');
23 | font-weight: 300;
24 | font-style: italic;
25 |
26 | }
27 |
28 | @font-face {
29 | font-family: 'Open Sans';
30 | src: url('../fonts/OpenSans-Regular.eot');
31 | src: url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
32 | url('../fonts/OpenSans-Regular.woff2') format('woff2'),
33 | url('../fonts/OpenSans-Regular.woff') format('woff'),
34 | url('../fonts/OpenSans-Regular.ttf') format('truetype'),
35 | url('../fonts/OpenSans-Regular.svg#open_sansregular') format('svg');
36 | font-weight: 400;
37 | font-style: normal;
38 |
39 | }
40 |
41 | @font-face {
42 | font-family: 'Open Sans';
43 | src: url('../fonts/OpenSans-RegularItalic.eot');
44 | src: url('../fonts/OpenSans-RegularItalic.eot?#iefix') format('embedded-opentype'),
45 | url('../fonts/OpenSans-RegularItalic.woff2') format('woff2'),
46 | url('../fonts/OpenSans-RegularItalic.woff') format('woff'),
47 | url('../fonts/OpenSans-RegularItalic.ttf') format('truetype'),
48 | url('../fonts/OpenSans-RegularItalic.svg#open_sansitalic') format('svg');
49 | font-weight: 400;
50 | font-style: italic;
51 |
52 | }
53 |
54 | @font-face {
55 | font-family: 'Open Sans';
56 | src: url('../fonts/OpenSans-Semibold.eot');
57 | src: url('../fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
58 | url('../fonts/OpenSans-Semibold.woff') format('woff'),
59 | url('../fonts/OpenSans-Semibold.woff2') format('woff2'),
60 | url('../fonts/OpenSans-Semibold.ttf') format('truetype'),
61 | url('../fonts/OpenSans-Semibold.svg#open_sanssemibold') format('svg');
62 | font-weight: 600;
63 | font-style: normal;
64 |
65 | }
66 |
67 | @font-face {
68 | font-family: 'Open Sans';
69 | src: url('../fonts/OpenSans-SemiboldItalic.eot');
70 | src: url('../fonts/OpenSans-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
71 | url('../fonts/OpenSans-SemiboldItalic.woff') format('woff'),
72 | url('../fonts/OpenSans-SemiboldItalic.woff2') format('woff2'),
73 | url('../fonts/OpenSans-SemiboldItalic.ttf') format('truetype'),
74 | url('../fonts/OpenSans-SemiboldItalic.svg#open_sanssemibold_italic') format('svg');
75 | font-weight: 600;
76 | font-style: italic;
77 |
78 | }
79 |
80 | @font-face {
81 | font-family: 'Open Sans';
82 | src: url('../fonts/OpenSans-Bold.eot');
83 | src: url('../fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
84 | url('../fonts/OpenSans-Bold.woff') format('woff'),
85 | url('../fonts/OpenSans-Bold.woff2') format('woff2'),
86 | url('../fonts/OpenSans-Bold.ttf') format('truetype'),
87 | url('../fonts/OpenSans-Bold.svg#open_sansbold') format('svg');
88 | font-weight: 700;
89 | font-style: normal;
90 |
91 | }
92 |
93 | @font-face {
94 | font-family: 'Open Sans';
95 | src: url('../fonts/OpenSans-BoldItalic.eot');
96 | src: url('../fonts/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
97 | url('../fonts/OpenSans-BoldItalic.woff') format('woff'),
98 | url('../fonts/OpenSans-BoldItalic.woff2') format('woff2'),
99 | url('../fonts/OpenSans-BoldItalic.ttf') format('truetype'),
100 | url('../fonts/OpenSans-BoldItalic.svg#open_sansbold_italic') format('svg');
101 | font-weight: 700;
102 | font-style: italic;
103 |
104 | }
105 |
106 | @font-face {
107 | font-family: 'Open Sans';
108 | src: url('../fonts/OpenSans-ExtraBold.eot');
109 | src: url('../fonts/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
110 | url('../fonts/OpenSans-ExtraBold.woff') format('woff'),
111 | url('../fonts/OpenSans-ExtraBold.woff2') format('woff2'),
112 | url('../fonts/OpenSans-ExtraBold.ttf') format('truetype'),
113 | url('../fonts/OpenSans-ExtraBold.svg#open_sansextrabold') format('svg');
114 | font-weight: 800;
115 | font-style: normal;
116 |
117 | }
118 |
119 | @font-face {
120 | font-family: 'Open Sans';
121 | src: url('../fonts/OpenSans-ExtraBoldItalic.eot');
122 | src: url('../fonts/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
123 | url('../fonts/OpenSans-ExtraBoldItalic.woff') format('woff'),
124 | url('../fonts/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
125 | url('../fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype'),
126 | url('../fonts/OpenSans-ExtraBoldItalic.svg#open_sansextrabold_italic') format('svg');
127 | font-weight: 800;
128 | font-style: italic;
129 |
130 | }
131 |
132 |
133 | /* Linker */
134 | @font-face {
135 | font-family:'Target Blank';
136 | src:url(../fonts/TargetBlank.otf) format('opentype'),
137 | url(../fonts/TargetBlank.svg#TargetBlank) format('svg');
138 | }
139 |
--------------------------------------------------------------------------------
/html5/themes/mozilla/styles/print.css:
--------------------------------------------------------------------------------
1 | /*
2 | Ribbon theme for Shower presentation template: http://github.com/pepelsbey/shower
3 | Copyright © 2010–2011 Vadim Makeev, http://pepelsbey.net/
4 | Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License
5 | */
6 |
7 | @page {
8 | margin:0;
9 | size:1024px 640px;
10 | }
11 |
12 | /* List
13 | ---------------------------------------- */
14 | .list {
15 | float:none;
16 | padding:0;
17 | background:#888;
18 | }
19 |
20 | /* Caption */
21 | .list .caption {
22 | display:none;
23 | }
24 |
25 | /* Slide */
26 | .list .slide {
27 | float:none;
28 | margin:0;
29 | padding:0;
30 | }
31 | .list .slide > DIV {
32 | width:1024px;
33 | height:640px;
34 | background:none;
35 | }
36 | .list .slide > div,
37 | .list .slide > div:hover {
38 | -webkit-box-shadow:none;
39 | -moz-box-shadow:none;
40 | box-shadow:none;
41 | }
42 | .list .slide section {
43 | -webkit-transform:none;
44 | -moz-transform:none;
45 | -ms-transform:none;
46 | -o-transform:none;
47 | transform:none;
48 | }
49 | .list .slide:after {
50 | position:absolute;
51 | bottom:85px;
52 | left:120px;
53 | color:#BBB;
54 | line-height:1;
55 | text-shadow:none;
56 | }
57 |
--------------------------------------------------------------------------------
/html5/themes/mozilla/styles/reset.css:
--------------------------------------------------------------------------------
1 | html, body, div, span, applet, object, iframe,
2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3 | a, abbr, acronym, address, big, cite, code,
4 | del, dfn, em, img, ins, kbd, q, s, samp,
5 | small, strike, strong, sub, sup, tt, var,
6 | b, u, i, center,
7 | dl, dt, dd, ol, ul, li,
8 | fieldset, form, label, legend,
9 | table, caption, tbody, tfoot, thead, tr, th, td,
10 | article, aside, canvas, details, embed,
11 | figure, figcaption, footer, header, hgroup,
12 | menu, nav, output, ruby, section, summary,
13 | time, mark, audio, video {
14 | margin:0;
15 | padding:0;
16 | border:0;
17 | font-size:100%;
18 | font:inherit;
19 | vertical-align:baseline;
20 | }
21 | article, aside, details, figcaption, figure,
22 | footer, header, hgroup, menu, nav, section {
23 | display:block;
24 | }
25 | body {
26 | line-height:1;
27 | }
28 | ol, ul {
29 | list-style:none;
30 | }
31 | blockquote, q {
32 | quotes:none;
33 | }
34 | blockquote:before, blockquote:after,
35 | q:before, q:after {
36 | content:'';
37 | content:none;
38 | }
39 | table {
40 | border-collapse:collapse;
41 | border-spacing:0;
42 | }
--------------------------------------------------------------------------------
/html5/themes/mozilla/styles/style.css:
--------------------------------------------------------------------------------
1 | /*
2 | Mozilla theme for Shower presentation template: http://github.com/pepelsbey/shower
3 | Copyright © 2010–2011 Vadim Makeev, http://pepelsbey.net/
4 | Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License
5 | Theme by Chris Heilmann http://christianheilmann.com @codepo8
6 | */
7 |
8 | @import url(fonts.css);
9 | @import url(reset.css);
10 |
11 | BODY {
12 | font:25px/1.8 'Open Sans', sans-serif;
13 | counter-reset:paging;
14 | }
15 |
16 | body:after {
17 | position:absolute;
18 | top:0;
19 | right:10px;
20 | width:153px;
21 | height:41px;
22 | background:url(../images/tab-2.png);
23 | content:'';
24 | }
25 |
26 |
27 | /* Slide
28 | ---------------------------------------- */
29 | .slide button.cb {
30 | position: absolute;
31 | top: 80px;
32 | right: 0;
33 | }
34 | .full .slide button.cb {
35 | display: none;
36 | }
37 | .inactive {
38 | opacity: .5;
39 | }
40 | .slide:after {
41 | counter-increment:paging;
42 | content:counter(paging, decimal-leading-zero);
43 | }
44 | .slide section {
45 | padding:80px 120px 0;
46 | width:784px;
47 | height:560px;
48 | background:url(../images/bg-sandstone-2.png);
49 | color:rgb(62,62,62);
50 | }
51 |
52 | /*
53 | No numbering in the progress bar:
54 | add "nonumbers" class to
55 | */
56 | .nonumbers .full .slide:after{
57 | content: '';
58 | }
59 |
60 | /*
61 | Smooth fading in between slides:
62 | add "fade" class to
63 | */
64 | .fade .full .slide section {
65 | -webkit-transition: opacity 1s;
66 | -moz-transition: opacity 1s;
67 | -ms-transition: opacity 1s;
68 | -o-transition: opacity 1s;
69 | transition: opacity 1s;
70 | opacity: 0;
71 | }
72 | .fade .full .slide:target section {
73 | opacity: 1;
74 | }
75 | .fade .full .slide {
76 | background: url(../images/bg-sandstone-2.png);
77 | }
78 | /*
79 | Picture frame
80 | */
81 | .frame {
82 | display:block;
83 | }
84 | .shadow {
85 | box-shadow: 5px 10px 10px rgba(0,0,0,.35);
86 | }
87 | .frame img {
88 |
89 | border: 5px solid #f8f8f8; z-index: 2; display: block;
90 | }
91 | .frame::after {
92 | content: '';
93 | display: block;
94 | position: absolute;
95 | top: -10px;
96 | left: 50%;
97 | margin-left: -10px;
98 | width: 20px;
99 | height: 20px;
100 | -webkit-transform: rotate(45deg);
101 | -moz-transform: rotate(45deg );
102 | -ms-transform: rotate(45deg );
103 | -o-transform: rotate(45deg );
104 | transform: rotate(45deg);
105 | border-style: solid;
106 | border-color: #666;
107 | border-width: 1px 0 0 1px;
108 | }
109 | .frame::before {
110 | content: '';
111 | display: block;
112 | width: 5px;
113 | height: 5px;
114 | background-image:
115 | -webkit-linear-gradient(top, #f1f1f1 0%, #333 80%, #000 95%);
116 | background-image:
117 | -moz-linear-gradient(to bottom, #f1f1f1 0%, #333 80%, #000 95%);
118 | background-image:
119 | linear-gradient(to bottom, #f1f1f1 0%, #333 80%, #000 95%);
120 | border-radius: 50%;
121 | border: 1px solid #666;
122 | position: absolute;
123 | top: -15px;
124 | left: 50%;
125 | margin-left: -3px;
126 | }
127 |
128 |
129 |
130 | /* Header */
131 | .slide header {
132 | margin:0 0 58px;
133 | color:rgb(62,62,62);
134 | text-transform: uppercase;
135 | font:lighter 40px/1.13 'Open Sans', sans-serif;
136 | }
137 |
138 | /* Elements */
139 | .slide p {
140 | margin:0 0 45px;
141 | }
142 | .slide p.note {
143 | color:#888;
144 | }
145 | .slide a {
146 | border-bottom:0.1em solid;
147 | color:#0174A7;
148 | text-decoration:none;
149 | }
150 | .slide a[target=_blank] {
151 | margin-right:22px;
152 | }
153 | .slide a[target=_blank]:after {
154 | position:absolute;
155 | margin-left:7px;
156 | font-family:'Target Blank';
157 | content:'\005E';
158 | }
159 | .slide b,
160 | .slide strong {
161 | font-weight:bold;
162 | }
163 | .slide i,
164 | .slide em {
165 | font-style:italic;
166 | }
167 | .slide kbd,
168 | .slide code {
169 | padding:3px 8px;
170 | -webkit-border-radius:8px;
171 | -moz-border-radius:8px;
172 | border-radius:8px;
173 | background:#FAFAA2;
174 | color:#000;
175 | -webkit-tab-size:4;
176 | -moz-tab-size:4;
177 | -o-tab-size:4;
178 | tab-size:4;
179 | font-family:'monaco', 'courier', monospace;
180 | }
181 |
182 | /* Quote */
183 | .slide blockquote {
184 | font-style:italic;
185 | font-size: 40px;
186 | }
187 | .slide blockquote.lots {
188 | font-style:italic;
189 | font-size: 30px;
190 | }
191 | .slide blockquote:before {
192 | position:absolute;
193 | margin:-15px 0 0 -80px;
194 | color:#666;
195 | font:200px/1 'Open Sans', sans-serif;
196 | content:'\201C'; /* ldquo */
197 | }
198 | blockquote .quotesource {
199 | font-size: 20px;
200 | text-align: right;
201 | }
202 |
203 | /* Lists */
204 | .slide ol,
205 | .slide ul {
206 | margin:0 0 45px;
207 | counter-reset:list;
208 | }
209 | .slide ul ul,
210 | .slide ol ul,
211 | .slide ol ol,
212 | .slide ul ol {
213 | margin:0 0 0 38px;
214 | }
215 | .slide ol > li:before,
216 | .slide ul > li:before {
217 | position:absolute;
218 | margin-left:-120px;
219 | width:100px;
220 | color:rgb(62,62,62);
221 | text-align:right;
222 | }
223 | .slide ul > li:before {
224 | content:'\2022'; /* bull */
225 | line-height:1.1;
226 | font-size:40px;
227 | }
228 | .slide ol > li:before {
229 | counter-increment:list;
230 | content:counter(list)'.';
231 | }
232 | /* Inner navigation */
233 | .inner li {
234 | opacity: 0.05;
235 | -webkit-transition: opacity 1s;
236 | -moz-transition: opacity 1s;
237 | -o-transition: opacity 1s;
238 | transition: opacity 1s;
239 | }
240 | .inner .active {
241 | opacity: 1;
242 | }
243 |
244 | /* Code */
245 | .slide pre {
246 | margin:0 0 45px;
247 | counter-reset:code;
248 | white-space:normal;
249 | }
250 | .slide pre code {
251 | display:block;
252 | padding:0;
253 | background:none;
254 | white-space:pre;
255 | }
256 | .slide pre code:before {
257 | position:absolute;
258 | margin:0 0 0 -120px;
259 | width:110px;
260 | color:rgb(182, 182, 182);
261 | text-align:right;
262 | counter-increment:code;
263 | content:counter(code, decimal-leading-zero)'.';
264 | }
265 | .slide pre mark {
266 | padding:3px 8px;
267 | -webkit-border-radius:8px;
268 | -moz-border-radius:8px;
269 | border-radius:8px;
270 | background:#FAFAA2;
271 | color:#000;
272 | font-style:normal;
273 | }
274 | .slide pre .important {
275 | background:#C00;
276 | color:#FFF;
277 | font-weight:normal;
278 | }
279 | .slide pre .comment {
280 | padding:0;
281 | background:none;
282 | color:#888;
283 | }
284 |
285 | /* Cover */
286 | .slide.cover section {
287 | background:#000;
288 | overflow:hidden;
289 | }
290 | .slide.cover section:before {
291 | display:none;
292 | }
293 | .slide.cover .byline {
294 | color: #fff;
295 | text-align: right;
296 | position: absolute;
297 | bottom: 10px;
298 | right: 10px;
299 | }
300 | .slide.cover img,
301 | .slide.cover svg,
302 | .slide.cover video,
303 | .slide.cover object {
304 | position:absolute;
305 | top:0;
306 | left:50%;
307 | z-index:-1;
308 | height:100%;
309 | -webkit-transform:translateX(-50%);
310 | -moz-transform:translateX(-50%);
311 | -ms-transform:translateX(-50%);
312 | -o-transform:translateX(-50%);
313 | transform:translateX(-50%);
314 | }
315 | .slide.cover.w img,
316 | .slide.cover.w svg,
317 | .slide.cover.w video,
318 | .slide.cover.w object {
319 | top:50%;
320 | left:0;
321 | width:100%;
322 | height:auto;
323 | -webkit-transform:translateY(-50%);
324 | -moz-transform:translateY(-50%);
325 | -ms-transform:translateY(-50%);
326 | -o-transform:translateY(-50%);
327 | transform:translateY(-50%);
328 | }
329 |
330 | /* Shout */
331 | .slide.shout section:before {
332 | display:none;
333 | }
334 | .slide.shout h2 {
335 | position:absolute;
336 | top:50%;
337 | left:0;
338 | width:100%;
339 | text-align:center;
340 | line-height:1;
341 | font-size:150px;
342 | -webkit-transform:translateY(-50%);
343 | -moz-transform:translateY(-50%);
344 | -ms-transform:translateY(-50%);
345 | -o-transform:translateY(-50%);
346 | transform:translateY(-50%);
347 | }
348 | .slide.shout h2 a[target=_blank] {
349 | margin:0;
350 | }
351 | .slide.shout h2 a[target=_blank]:after {
352 | content:'';
353 | }
354 |
355 | .slide.oneline section:before {
356 | display:none;
357 | }
358 | .slide.oneline h2 {
359 | position:absolute;
360 | top:50%;
361 | text-align:left;
362 | line-height:1;
363 | font-size:70px;
364 | -webkit-transform:translateY(-50%);
365 | -moz-transform:translateY(-50%);
366 | -ms-transform:translateY(-50%);
367 | -o-transform:translateY(-50%);
368 | transform:translateY(-50%);
369 | }
370 | .slide.oneline h2 a[target=_blank] {
371 | margin:0;
372 | }
373 | .slide.oneline h2 a[target=_blank]:after {
374 | content:'';
375 | }
376 |
377 |
378 | /* Middle */
379 | .middle {
380 | position:absolute;
381 | top:50%;
382 | left:50%;
383 | -webkit-transform:translate(-50%, -50%);
384 | -moz-transform:translate(-50%, -50%);
385 | -ms-transform:translate(-50%, -50%);
386 | -o-transform:translate(-50%, -50%);
387 | transform:translate(-50%, -50%);
388 | }
389 |
390 |
391 | /* List
392 | ---------------------------------------- */
393 | .list {
394 | float:left;
395 | padding:80px 0 80px 100px;
396 | background:#585A5E url(../images/bg-darkgrey-2.png) fixed;
397 | }
398 |
399 | /* Caption */
400 | .list .caption {
401 | color:#fff;
402 | text-shadow:0 1px 1px #000;
403 | }
404 | .list .caption h1 {
405 | font:bold 50px/1 'Open Sans', sans-serif;
406 | }
407 | .list .caption a {
408 | color:#fff;
409 | text-shadow:0 -1px 1px #1F3F60;
410 | text-decoration:none;
411 | }
412 | .list .caption a:hover {
413 | color:#5ca4ed;
414 | }
415 |
416 | /* Slide */
417 | .list .slide {
418 | position:relative;
419 | float:left;
420 | margin:0 50px 0 0;
421 | padding:80px 0 0;
422 | }
423 | .list .slide:after {
424 | position:absolute;
425 | bottom:-45px;
426 | left:60px;
427 | color:#3C3D40;
428 | text-shadow:0 1px 1px #8D8E90;
429 | line-height:1;
430 | font-weight:bold;
431 | font-size:25px;
432 | }
433 | .list .slide:target:after {
434 | text-shadow:0 -1px 1px #1F3F60;
435 | color:#fff;
436 | }
437 | .list .slide > div {
438 | position:relative;
439 | overflow:hidden;
440 | width:512px;
441 | height:320px;
442 | box-shadow:0 0 50px #3C3D40;
443 | border-radius:1px;
444 | background:rgba(0, 0, 0, 0.3);
445 | }
446 | .list .slide > div:hover {
447 | box-shadow:
448 | 0 0 0 10px rgba(60, 61, 64, 0.6),
449 | 0 0 50px #3C3D40;
450 | }
451 | .list .slide:target > div {
452 | box-shadow:
453 | 0 0 0 10px rgba(240,240,240, 1),
454 | 0 0 50px #3C3D40;
455 | }
456 | .list .slide section {
457 | -webkit-transform-origin:0 0;
458 | -webkit-transform:scale(0.5);
459 | -moz-transform-origin:0 0;
460 | -moz-transform:scale(0.5);
461 | -ms-transform-origin:0 0;
462 | -ms-transform:scale(0.5);
463 | -o-transform-origin:0 0;
464 | -o-transform:scale(0.5);
465 | transform-origin:0 0;
466 | transform:scale(0.5);
467 | }
468 | .list .slide section:after {
469 | position:absolute;
470 | top:0;
471 | right:0;
472 | bottom:0;
473 | left:0;
474 | content:'';
475 | }
476 |
477 | /* Small */
478 | @media all and (max-width:1274px) {
479 | .list .slide:after {
480 | left:30px;
481 | }
482 | .list .slide > div {
483 | width:256px;
484 | height:160px;
485 | }
486 | .list .slide section {
487 | -webkit-transform:scale(0.25);
488 | -moz-transform:scale(0.25);
489 | -ms-transform:scale(0.25);
490 | -o-transform:scale(0.25);
491 | transform:scale(0.25);
492 | }
493 | }
494 |
495 | /* Full
496 | ---------------------------------------- */
497 | .full {
498 | position:absolute;
499 | top:50%;
500 | left:50%;
501 | overflow:hidden;
502 | margin:-320px 0 0 -512px;
503 | width:1024px;
504 | height:640px;
505 | background:#000;
506 | }
507 | .full .caption {
508 | display:none;
509 | }
510 | .full .slide {
511 | position:absolute;
512 | visibility:hidden;
513 | }
514 | .full .slide:target {
515 | visibility:visible;
516 | }
517 | .full .slide:after {
518 | position:absolute;
519 | bottom:20px;
520 | right:90px;
521 | font-size: 16px;
522 | color:rgba(62,62,62,0.6);
523 | line-height:1;
524 | }
525 | .full .slide section {
526 | -webkit-transform:scale(1);
527 | -moz-transform:scale(1);
528 | -ms-transform:scale(1);
529 | -o-transform:scale(1);
530 | transform:scale(1);
531 | padding: 40px 120px;
532 | }
533 | .full .slide.cover {
534 | z-index:1;
535 | }
536 | .full .slide.cover:after,
537 | .full .slide.shout:after {
538 | content:'';
539 | }
540 |
541 | /* Progress */
542 | .full .progress {
543 | position:absolute;
544 | right:118px;
545 | bottom:20px;
546 | left:118px;
547 | border-radius:2px;
548 | border:2px solid rgba(62,62,62, 0.3);
549 | }
550 | .full .progress DIV {
551 | width:0;
552 | height:10px;
553 | border-radius:2px;
554 | background:rgba(62, 62, 62, 0.2);
555 | -webkit-transition:width 0.2s linear;
556 | -moz-transition:width 0.2s linear;
557 | -ms-transition:width 0.2s linear;
558 | -o-transition:width 0.2s linear;
559 | transition:width 0.2s linear;
560 | }
561 | .full .progress-off {
562 | z-index:1;
563 | }
564 |
565 | /* special content styles */
566 | .byline{
567 | font-size: 20px;
568 | text-align: right;
569 | }
570 |
571 | small.byline{
572 | position: absolute;
573 | font-size: 15px;
574 | text-align: right;
575 | bottom: 70px;
576 | right: 125px;
577 | }
578 | .right {
579 | float: right;
580 | position: relative;
581 | }
582 | .left {
583 | float: left;
584 | position: relative;
585 | padding-right: 80px;
586 | }
587 | .credits {
588 | font-size: 12px;
589 | position: absolute;
590 | bottom: 40px;
591 | left: 120px;
592 | }
593 | .demourl {
594 | font-size: 18px;
595 | position: absolute;
596 | bottom: 40px;
597 | width: 800px;
598 | text-align: center;
599 | }
600 | .demourl a {
601 | color:inherit;
602 | }
603 | .cover h2, .cover a {
604 | color:#fff;
605 | background: rgba(0,0,0,0.6);
606 | padding: 5px 10px;
607 | border-bottom: none;
608 | text-decoration: none;
609 | }
610 | .longlist {
611 | font-size: 20px;
612 | }
613 | .slide ul.longlist li:before {
614 | content:'\2022'; /* bull */
615 | line-height:1.1;
616 | font-size:30px;
617 | }
618 | .lots li {
619 | float: left;
620 | width: 33%;
621 | font-size: 24px;
622 | }
623 | .slide ul.lots li:before {
624 | content:'\2022'; /* bull */
625 | line-height:1.3;
626 | font-size:30px;
627 | }
628 |
629 | ul.oneline li {
630 | display: inline;
631 | padding-right: 1em;
632 | }
633 | ul.oneline li::before, ul.nobull li::before {
634 | content: '';
635 | }
636 | ul.inline li {
637 | display: inline;
638 | padding-right: 0.2em;
639 | }
640 | ul.inline li::before {
641 | content: '';
642 | }
643 | ul.inline li::after {
644 | content: ', ';
645 | }
646 | ul.inline li:last-child::after {
647 | content: '.';
648 | }
649 |
650 | /* Notes */
651 | .full .slide .notes {
652 | display:none;
653 | }
654 | .full .peek .notes {
655 | display: block;
656 | z-index: 20;
657 | font-size: 15px;
658 | }
659 | .full .notes, .list .notes {
660 | background: #fff;
661 | padding: 5px 10px;
662 | z-index: 10;
663 | display: block;
664 | position: absolute;
665 | bottom: -500px;
666 | left: 50px;
667 | right: 50px;
668 | -webkit-transition: bottom .5s;
669 | -moz-transition: bottom .5s;
670 | -ms-transition: bottom .5s;
671 | -o-transition: bottom .5s;
672 | transition: bottom .5s;
673 | }
674 | .list .slide:hover .notes {
675 | bottom: 15px;
676 | }
677 | .full .notes {
678 | bottom: 70px;
679 | }
680 |
681 | /* Live demos */
682 |
683 | * [contenteditable] {
684 | display: block;
685 | white-space: pre;
686 | padding: 10px;
687 | transition: 1s;
688 | -webkit-transition: 1s;
689 | }
690 | * [contenteditable]:focus {
691 | background: #f8f8f8;
692 |
693 | }
694 |
695 | /* Meta */
696 | .talkdescription {
697 | font-size: 12px;
698 | color: #fff;
699 | width: 80%;
700 | }
701 | .full .talkdescription {
702 | display: none;
703 | }
704 | .abstract {
705 | margin: 1em 0;
706 | font-size: 14px;
707 | background: rgba(0,0,0, .7);
708 | padding: .5em;
709 | }
710 |
711 | /* Animations */
712 |
713 | .smoothdemo {
714 | transition: 0.5s;
715 | -webkit-transition: 0.5s;
716 | }
717 |
718 | .full .slide:target .swing {
719 | -moz-animation: swing linear 2s infinite;
720 | -moz-transform-origin: 0 -55%;
721 | -webkit-animation: swing ease-in-out 2s infinite;
722 | -webkit-transform-origin: 0 -55%;
723 | -o-animation: swing ease-in-out 2s infinite;
724 | -o-transform-origin: 0 -55%;
725 | animation: swing ease-in-out 2s infinite;
726 | transform-origin: 0 -55%;
727 | }
728 | @-moz-keyframes swing {
729 | 0% { -moz-transform: rotate3d(0deg,0,0) translate3d(-50%, -50%, 0); }
730 | 25% { -moz-transform: rotate(3deg) translate(-50%, -50%); }
731 | 50% { -moz-transform: rotate(0deg) translate(-50%, -50%); }
732 | 75% { -moz-transform: rotate(-3deg) translate(-50%, -50%); }
733 | 100% { -moz-transform: rotate(0deg) translate(-50%, -50%); }
734 | }
735 | @-webkit-keyframes swing {
736 | 0% {-webkit-transform: rotate(-3deg) translate(-50%, -50%); }
737 | 50% {-webkit-transform: rotate(3deg) translate(-50%, -50%); }
738 | 100% {-webkit-transform: rotate(-3deg) translate(-50%, -50%); }
739 | }
740 |
741 | @-o-keyframes swing {
742 | 0% { -o-transform: rotate(-3deg) translate(-50%, -50%); }
743 | 50% { -o-transform: rotate(3deg) translate(-50%, -50%); }
744 | 100% { -o-transform: rotate(-3deg) translate(-50%, -50%); }
745 | }
746 | @keyframes swing {
747 | 0% { transform: rotate(-3deg) translate(-50%, -50%); }
748 | 50% { transform: rotate(3deg) translate(-50%, -50%); }
749 | 100% { transform: rotate(-3deg) translate(-50%, -50%); }
750 | }
751 |
752 | /* Multilingual support */
753 |
754 | .en-US,
755 | .zh-CN,
756 | .zh-TW,
757 | .ja-JP {
758 | display: none;
759 | }
760 |
761 | :lang(en-US) .en-US,
762 | :lang(zh-CN) .zh-CN,
763 | :lang(zh-TW) .zh-TW,
764 | :lang(ja-JP) .ja-JP {
765 | display: block;
766 | }
767 |
768 | #langMenuId {
769 | pointer-events: auto;
770 | }
771 |
772 | #langMenuDivId {
773 | position: absolute;
774 | left: 0px;
775 | right: 0px;
776 | text-align: center;
777 | bottom: 36px;
778 | pointer-events: none;
779 | }
780 |
781 | .list #langMenuDivId {
782 | display: none;
783 | }
784 |
--------------------------------------------------------------------------------
/mozilla-sandstone-1280-1.key:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/mozilla-presentation-templates/17d7d89bf7c4e2cf91f4a2c83efe9723808d34d5/mozilla-sandstone-1280-1.key
--------------------------------------------------------------------------------
/mozilla-sandstone-1280.key:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/mozilla-presentation-templates/17d7d89bf7c4e2cf91f4a2c83efe9723808d34d5/mozilla-sandstone-1280.key
--------------------------------------------------------------------------------
/mozilla-sandstone-1280.key.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/mozilla-presentation-templates/17d7d89bf7c4e2cf91f4a2c83efe9723808d34d5/mozilla-sandstone-1280.key.zip
--------------------------------------------------------------------------------
/mozilla-sandstone-1280.ppt.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/mozilla-presentation-templates/17d7d89bf7c4e2cf91f4a2c83efe9723808d34d5/mozilla-sandstone-1280.ppt.zip
--------------------------------------------------------------------------------
83 |
84 | {Firstname}, {Lastname}, {Conference}, {Location}, {date}
85 |
86 |
89 | 
134 |
137 | 
148 |
151 | 
162 |
165 | 
176 |
179 | 
191 | 
213 |
216 | 
240 | 
349 | 
589 | 
698 |
700 | 
773 |
776 | 
803 |
812 | 
823 |
824 |
827 | 
838 |
839 |
842 | 
853 |
854 |
857 | 
882 |
883 |
886 | 
897 |
898 |
901 | 
912 |
915 | 
946 |
947 |
950 | 
991 |
992 |
995 | 
1052 |
1059 | 
1070 |
1071 |
1074 | 
1085 | 
1147 | 
1165 | 
1182 | 
1199 | 
1218 | 
1267 | 
1283 | 
1299 | 
1315 | 
1332 | 
1348 | 
1370 | 
628 | 
795 | 
906 | 
68 |
70 | 
134 |
135 |
136 | Image by Chris Heilmann
137 |
138 |
139 |
141 | 
171 |
172 |
173 | Image by Chris Heilmann
174 |
175 |
176 |
179 | 
296 |