9 Thing You Should Know About Firefox OS - Hongkiat
Please enable JavaScript in your browser to enjoy a better experience.
If you use the browser
instead of
and Safari, chances are you have heard about Firefox OS, the new open source operating system for smartphones and tablets from Mozilla. The organization is serious in working to make the Web open and accessible to everyone.
Though this new mobile OS is an emerging technology, it is quickly catching the eyes of users, developers, and critics. In this post, we will
have a look at what&s in store.
Recommended Reading:
Q1: What is Firefox OS?
A: Firefox OS (codenamed Boot2Gecko or B2G) is a mobile operating system based on Linux and Mozilla&s Gecko technology. It is built upon open web standards like HTML5, CSS3, and JavaScript.
Mozilla has developed Web APIs so that HTML5 apps can communicate with the device&s hardware, which was only possible for native apps until now, e.g. Bluetooth, Wi-Fi, Camera, etc.
Mozilla Foundation has always worked to make the Web more accessible to everyone, and apart from Firefox OS, there are other tools such as the Firefox Browser, Firefox Marketplace, etc. However,
report that it a Mozilla tactic to reach a bigger mobile audience in order to level up to its primary competitor, Chrome.
Q2: How is Firefox OS different from Existing Mobile OS?
A: &Built entirely using HTML5 and other open Web standards, Firefox OS is free from the rules and restrictions of existing proprietary platforms.& &
Firefox OS is different & you can think of it as something more than a browser running on a very lightweight Linux-based operating system. Every app in Firefox OS including the Camera and the Dialer is a web app, i.e. a website in the form of an app. Simple!
Web is the platform for Firefox OS & apps are built using HTML5 (along with CSS3 and JavaScript) instead of native languages. For comparison, Android apps are developed in J Windows Phone apps are developed in C++, C#, or HTML5, etc. Firefox OS is written entirely using open Web standards, with the exception in the lightweight operating system (codenamed Gonk) forming the base of Firefox OS.
Q3: What is The User Interface Like In Firefox OS?
A: Android is the inspiration for the user interface of Firefox OS. Hence, it has a lock screen, home screen and notification bar. However, there are some changes as compared to Android. The home screen shows a background image (along with the time and date) and has no support for widgets for now.
Sliding right on the home screen shows the li there is no dedicated icon to open the app drawer like on other mobile OS. Sliding left on the home screen shows the list of app categories, which when clicked, shows installed and suggested apps in the chosen category.
Long pressing the home key brings the list of opened apps along. Pressing the power button brings the power off menu. Pressing home and power keys together takes a screenshot.
Firefox OS&s user interface is better than iPhone or Windows Phone OS, but it is not as good as that of Android. Apps share common styling conventions, and thus provide a consistent design factor, making it easy for users to get around the app&s functionality.
Q4: How Are apps for Firefox OS different from apps for other Mobile OS?
A: Firefox OS, powered by Gecko engine, runs only websites in the form of apps, known as web apps. These apps are built using HTML, the same technology that powers the Web. These web apps will run on many operating systems in addition to Firefox OS. Every operating system (including Android and Windows 8) that runs Firefox browser will be able to run these web apps distributed through Firefox Marketplace.
Web apps will come in two forms for Firefox OS: hosted apps and packaged apps. Hosted apps will be hosted on Mozilla&s server and will be downloaded and loaded each time you access them, i.e., they are quite like web pages instead of apps, and they will not run if data connection fails.
Packaged apps will be downloaded once in the form of a compressed package and will be loaded from the local source each time you access them, i.e., they are quite alike apps on other operating systems. This is possible due to the local storage and cache features of HTML5 language.
Q5: What are the different ways to try Firefox OS?
A: Firefox OS, though still in its development stages, is worth a try. However, buying a phone for USD200 just to test the mobile operating system may not be in everyone&s immediate plans. Do not worry as you have other options to play with Firefox OS.
You can try Firefox OS in these four ways:
You can use Firefox OS Desktop client for your operating system. Check the instructions for downloading and building .
Download Firefox OS Simulator add-on for Firefox browser (of course, you need to have Firefox browser on your system). Check the Firefox extensions page on .
You can build Firefox OS Simulator from source and use Firefox OS in a simulated environment. Check the instructions on how to .
You can build Firefox OS from source and install it on your existing device (only if it is supported & check the question below).
It is suggested to use the Firefox OS Simulator add-on for Firefox browser because it is the easiest and safest method for trying Firefox OS. Building Firefox OS from source is tedious work and the Firefox OS Desktop client may or may not work successfully for you.
Q6: What are the devices that currently support Firefox OS?
A: Mozilla has released two phones with Firefox OS but so far they are only available for developers:
Keon by Geeksphone
Peak by Geeksphone
Firefox OS can be built and installed on some other compatible devices too. Check the guide for installing Firefox OS . It is even reported that Firefox OS can be
on the Samsung Galaxy S2.
Some of the devices supporting Firefox OS are:
Pandaboard
Samsung Galaxy S
Samsung Galaxy S 4G
Samsung Galaxy S2
Samsung Galaxy Nexus
Q7: How does it compare with Ubuntu for Phones?
A: Ubuntu for Phones is a mobile operating system built upon the Linux kernel, same as Firefox OS. Ubuntu for Phones makes full use of the mobile&s small screen and touch functionality. The full area of the screen is provided to the app&s content (i.e., options or controls are hidden) and swiping over the corners bring the controls in view. Thus, apps on Ubuntu for Phones provide better user experience to mobile users.
Firefox OS has web apps but Ubuntu for Phones has native apps as well as web apps. Native apps use advance APIs and powerful features, e.g device&s hardware and services, etc. Web apps are developed using HTML5 and CSS3, and lack powerful features that are provided to native apps in Ubuntu for Phones.
Q8: What are the plans for Firefox OS& Security?
A: Mozilla is actively working on the security of its new mobile OS. Many of the security features are inspired from Google&s Android. These are some of the :
Device screen or SIM can be locked with a PIN.
Permissions required by any app are shown to the user upon installation. Low-risk permissions (e.g., web access, etc.) are provided automatically to the app while high-risk permissions (e.g. location access, etc.) are first confirmed from the user, and then provided to the app.
Permission Manager (or App Permissions) allows the user to manually allow or block permissions for an app. This is something missing in Android.
Mozilla plans to bring device encryption (using a boot-time password) to Firefox OS in near future. ()
Q9: What does Firefox OS mean for the Future of Smartphones?
A: Firefox OS, if successful, will change the way we use the Web. We are used to visit websites but Firefox OS will bring an era where we will be using Web apps more than Websites. Ubuntu for Phones will also support Firefox OS to help bring in this change.
FacebookTwitterPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenEmailwrites on August 8, 2012
Whether you’re a beginner or a seasoned web professional, creating responsive designs can be confusing at first, mostly because of the radical change in thinking that’s required. As time goes on,
is drifting away from the pool of passing fads and rapidly entering the realm of standard practice. In fact, the magnitude of this paradigm shift feels as fundamental as the transition from table based layouts to CSS. Simply put, this is a very different way of designing websites and it represents the future.
Free trial on Treehouse: Do you want to learn more about ? Try a .
Over the past year, responsive design has become quite the hot topic in the web design community. If all the buzz has you feeling like Rip Van Winkle waking up in the 21st century, this summary will help you catch up with the times.
What is responsive design?
Let’s just get right into it: Believe it or not, the Treehouse blog that you’re reading this article on is actually a responsive design! To see it in action, open this article on a desktop browser and slowly make the browser thinner and wider. You should see the layout magically adjust itself to more comfortably fit the new width of the browser, even if you make the page as skinny as the resolution of a mobile phone. Here are some screenshots of what the Think Vitamin design looks like at various screen resolutions:
It’s hard to talk about responsive design without mentioning its creator, Ethan Marcotte. If you haven’t read his , I highly recommend you check it out (seriously, this is required reading). In the article, Ethan discusses all the key ideas that form r and that’s really what responsive design is, technically. It’s not a single piece of technology, but rather, a set of techniques and ideas that form a whole. This is one of the main sources of confusion, and in a moment we’ll break things down and take a look at each part.
So, what is responsive design exactly? Actually, a better question to ask might be, what problem does responsive web design solve? Well, as you may have noticed, computers aren’t the only piece of hardware with a web browser anymore. I might get myself in trouble by saying this, but the iPhone was one of the first mobile devices to feature a really great web browser, and it really put the spotlight on upgrading the experience of the mobile web. Many other devices followed suit and, seemingly overnight, the face of the mobile web had changed.
The changing landscape of web browsers meant that users expec people expected to be able to browse the web on their phones just as easily as they browse the web on a desktop computer. So, in response to this (if you’ll excuse the pun) the web design community started creating mobile versions of their websites. In hindsight, this wasn’t really the way forward, but at the time it seemed like a reasonable idea. Every website would have their normal ‘desktop’ version of their site, and as a bonus, a ‘mobile’ version.
Technology never stops marching forward, so not long after the phone hardware market had been revolutionized, other form factors surged in popularity. In addition to phones and personal computers, devices like touchscreen tablets and small notebook computers (netbooks, if you prefer the term) started appearing everywhere.
It’s not just small screens, either. Large, high-resolution displays are starting to become much more common than they used to be, and it would be a waste for web designers to not take advantage of this.
In summary, the spectrum of screen sizes and resolutions is widening every day, and creating a different version of a website that targets each individual device is not a practical way forward. This is the problem that responsive web design addresses head on.
Previously, I mentioned that responsive web design is not a single piece of technology, but rather, a collection of techniques and ideas. Now that we have a better idea of the problem space we’re addressing, let’s take a look at each part of the solution.
Fluid Grids
The first key idea behind responsive design is the usage of what’s known as a fluid grid. In recent memory, creating a ‘liquid layout’ that expands with the page hasn’t been quite as popular as creating page designs that are a fixed number of pixels across, and then centered on the page. However, when one considers the huge number of screen resolutions present in today’s market, the benefit of liquid layouts is too great to ignore.
Fluid grids go a few steps beyond the traditional liquid layout. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another.
In order to calculate the proportions for each page element, you must divide the target element by its context. Currently, the best way to do this is to first create a high fidelity mockup in a pixel based imaged editor, like Photoshop. With your high fidelity mockup in hand, you can measure a page element and divide it by the full width of the page. For example, if your layout is a typical size like 960 pixels across, then this would be your “container” value. Then, let’s say that our target element is some arbitrary value, like 300 pixels wide. If we multiply the result by 100, we get the percentage value of 31.25% which we can apply to the target element. Here’s the math:
If your values don’t work out so neatly, and you get some floating point value with many numbers after the decimal, don’t round the value! We humans may enjoy nice neat numbers and making our code look pretty, but your computer (and the final look of your design) will benefit from the seemingly excessive mathematical precision.
Fluid grids are a very important part of creating a responsive design, but they can only take us so far. When the width of the browser becomes too narrow, the design can start to severely break down. For example, a complex three-column layout isn’t going to work very well on a small mobile phone. Fortunately, responsive design has taken care of this problem by using media queries.
Media Queries
The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify. If we wanted to apply some styling to mobile phones, our media query might look something like the following.
@media screen and (min-width: 480px) {
.content {
float: left;
.social_icons {
display: none
// and so on...
Using a series of media queries like this, we can work our way up towards larger resolutions. The set of pixel widths I recommend targeting are as follows:
Again, these are just recommended, and should serve as a starting point. In an ideal world, you would adjust your layout to perfectly match every device width, but often times you have to pick and choose where you spend your efforts. From a more practical perspective, the resolutions that a design targets will be based on the resolutions of the people using that design, time and budget constraints, highly contextual situations, and so on. In summary, when deciding what resolutions to target, you should use your judgement. Targeting more resolutions is going to take more time, and assuming you’re not an immortal being with unlimited time, that effort should be spent carefully.
Again, to see a responsive design in action, simply open this article up on a desktop browser and slowly resize the browser to make it thinner. You should see all the page elements adjusting themselves automagically to fit the new width, going all the way down to the size of a mobile browser.
Responsive web design is about a year old now, and there are plenty of resources that can help you learn more about it. On our high-quality video training service
we have many videos that go in depth on the topic. Here are some links:
on Treehouse
Hopefully this article helped, but if you’re still feeling confused about responsive design, don’t be afraid to leave a question or comment. If you’re already utilizing responsive web design in your site or web application, share the link here so we can see!
We’re starting to add free Youtube videos on responsive web design so if you’re interested in learning more, you can subscribe to our channel here: http://trhou.se/subscribe-treehouse-yt
Here’s a video to start:
Comments on this article are now closed. Check out our updated article:
and become a certified .
Learn more about the
Stay current
Sign up for our newsletter, and we'll send you news and tutorials on web design, coding, business, and more!
Stay current
Sign up for our newsletter, and we'll send you news and tutorials on web design, coding, business, and more!make-use-of-logo
logo-background
stumbleupon
label-rectangle
triangle-long
Advertisement
Windows 8 is all about shortcuts. People with touch-enabled PCs use touch gestures, users without touch devices must learn the mouse shortcuts, power users use keyboard shortcuts on the desktop and novel command-line shortcuts, and...
. In addition to touch-screen gestures, there are swipe gestures you can perform with your laptop&s touchpad and mouse gestures that involve moving your cursor to the corners of the screen. However, there are ways to disable Windows 8 gestures. This is particularly useful if these gestures get in your way while using your touchpad or mouse.
Disabling the gestures can be useful if you accidentally trigger them while using your touchpad or if the app switcher and charms bar keep appearing as you move your mouse around the desktop. You can disable a Windows 8 device&s touch screen entirely, too & we don&t recommend it, but it&s something you can do if you want.
Disable Touchpad Gestures
Windows 8&s touchpad swipe gestures are particularly useful on laptops. They mimic touch-screen gestures, giving you easier access to Windows 8&s essential features. For example, swipe in from the right on a touchpad and you&ll see the charms, just as if you had swiped in from the right on a touchscreen.
Unfortunately, while these gestures can make it easier to get around in Windows 8, they can also just get in the way. If you find yourself accidentally&triggering these gestures when you&re only trying to move your mouse cursor around, you can disable them.
Open the Control Panel, click the Hardware and Sound category, and select Mouse under Devices and Printers. Click over to the Device Settings tab (you should see this if you have a
With the rise of laptops and netbooks, the touchpad has become a key input device. Yet, in the Windows environment, working with the touchpad has been a drag more than a delight. While the hardware...
driver installed), click the Settings button, and uncheck the Enable Edge Swipes option. Click OK to save your settings.
You can also disable them via the Windows registry & you&ll find instructions for doing so in
With the introduction of Windows 8, a lot of brand-new touch-friendly features have been added to make the operating system enjoyable to use on touch-enabled devices. However, for typical laptops which only have touchpads for...
.Advertisement
Disable Charms and App Switcher Hot Corners
Windows 8 also allows you to access the app switcher & which only works with & and the charms by moving your mouse to the corners of the screen. These clunky mouse gestures can get in the way, too & you may find yourself accidentally pulling up the charms bar when you move your cursor to the top-right corner of the screen to press a desktop window&s close button, for example.
Luckily, many third-party programs can easily disable these hot corners. Install an application like Start8,
Make Windows 8 usable for people who think it's not. Add a start menu to the desktop and tweak the way Explorer and Internet Explorer behave, all thanks to a piece of software called Classic...
Windows 8 brought down the axe on the Start Menu. This is a feature that no one paid special attention to for years but its untimely demise has caused all sorts of despair. Not only...
and you&ll find options to disable these hot corners. You can still open the app switcher or charms by pressing the appropriate
& Windows Key + Tab or Windows Key + C & but you won&t be able to open them with mouse gestures.
Third-party apps aren&t the only way to disable these hot corners. You can also disable them by editing the registry and changing a few registry values. The third-party apps make this easier, as Microsoft decided to bury these options deep in the registry and make it hard for average users to disable the hot corners. Most people should stick with the above solutions rather than editing the registry.
The Windows registry can be scary at first glance. It&s a place where power users can change a wide variety of settings that aren&t exposed elsewhere. If you&re searching for how to change something in...
& press Start, type regedit, and press Enter. Navigate to the following key:
HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\ImmersiveShell\
Create a new key named EdgeUI under the ImmersiveShell key. Under EdgeUI, create a new DWORD value, name it DisableCharmsHint, and set its value to 1
To also disable the app switcher hot corner, create another DWORD value, name it DisableTLcorner, and set its value to 1
Your changes will take effect immediately, so you won&t have to reboot or log out after doing this.
Disable the Touch Screen
You can also disable touch gestures and the touch screen entirely, if you really want to. If you have a
Windows 8's Start screen and "Modern" apps can feel awkward to use on a non-touch PC, but they really start to make sense when paired with a touch PC. If you're not ready to go...
, disabling the touch screen is actually a fairly bad idea & you&re giving up a feature that allows you to interact with Windows 8 much more easily. As Microsoft says, Windows 8 is a &touch-first& operating system. Nevertheless, you may want to disable the touch screen for certain rare reasons & perhaps the touch screen is faulty, creating &ghost& presses that send input to the computer when you&re not touching it. If your device is out of warranty and the touch screen is causing problems, disabling it completely will fix the problem.
You can disable the touch screen from the Control Panel. Open the Windows Control Panel and click the Hardware and Sound option. Select Pen and Touch, click the Touch tab, and uncheck the Use your finger as an input device checkbox. Click OK to save your settings.
You can also open the Device Manager, locate the touch-screen device in the list of connected devices, and disable it from here. This will prevent Windows from using the device at all until you re-enable it, so the device won&t be able to send Windows any input signals. We don&t recommend doing this, but you can if you want.
Do you find the touchpad and mouse gestures useful on Windows 8, or do they just get in the way? Leave a comment and let us know whether you&ve disabled Windows 8 gestures or whether you use them frequently.
Image Credit:
Scroll down for the next article