Category Archives: Web

Should you stop building on web and just build on mobile?

I recently came across a quote from a friend:

Stop building on web, start building on mobile.

If you’re a big fan of the web,  it could rage spark. But if you think deeply, and analyze the quote and the current situation of the web. The ‘web’ and ‘mobile’ is actually asynchronous. If mobile will evolve, so is the web.

Remember the Symbian phones?

Forget about Smartphones! Let’s go back to the days where Nokia rules the world. I can remember that i have been using a web browser to download Java games from a telco website.

As far as i remember, the website that i have been browsing on is not the same site that you will stumble upon these days using a smartphone. It’s responsive. It’s finger friendly. And it’s expensive because back then, there is no such thing as “unlimited” internet. It’s all KB charge, baby!

It’s the iPhone that changed the web

When the first iPhone was launched, it promised to carry a full blown browser on your fingertips. Steve Jobs once said that developers doesn’t need an SDK to build apps on the iPhone. Just use Safari, and you’re good to go.

But things got different when Apple introduced the App Store. And i believe that the unified application store is the only reason why the platform took off.

The web back then has no offline support

Back when the web was young and ‘unlimited’ internet was a dream, users wanted to use apps offline. The iPhone offers safari and developers then can build web apps. But developers aren’t happy. Users aren’t also happy. So Apple took the opportunity to revive the old symbian way on using your app. Get it from an ‘application platform’ and use it offline.

But things are different now.

Firefox OS is here.

Firefox OS is a great example of Web and Mobile working together in harmony. It’s not a dream, nor a beta project. But it’s a real open product. It exist. It’s a living proof that the Web is dead.

In fact, Firefox OS offers an Application Marketplace that is available on both Firefox OS and Firefox for Android, you are not tied to one platform. Firefox OS also offers offline capabilities for your apps. WebGL is also an interesting technology that works on Firefox OS when making advanced graphics. Firefox OS also offers cross platform notification that works on all platform.

And if you really want to monetize your ‘web app’ you can simply use Apache Cordova to port it to other platforms.

The web is matured and it keeps getting better

The web is accessible for all. It keeps getting better and better. It’s an open platform that everyone can dive in and contribute.

Instead of choosing and comparing Apple and Oranges, wouldn’t be nice if we just use the right tools for the right job?

Firefox OS Challenge for Students

Firefox OS Challenge for Students is the first hackathon organized by the Mozilla Philippines Community that focuses on starting up a new breed of innovative apps in the Firefox Marketplace.

All participants here are students from different colleges and universities and that they are allowed to code within 7 hours but that didn’t stop them from making “Kids Education” themed apps. The theme also aligns with the “FSA App of the Month” where Firefox Student Ambassadors all around the world hack and submit awesome apps to the Firefox Marketplace.

There were 9 teams who joined this hackathon and they are:

  1. Team Bangan from UST.
  2. Team Tams from FEU Makati.
  3. Team apt-get from PUP Manila.
  4. Team Hatee-ho from UE Manila and Letran Calamba
  5. Team Maiteam from Technological Institute of the Philippines.
  6. Team Red Coders from San Beda College, Manila.
  7. Team arCOSSine from UP Los Banos, Laguna.
  8. Team COSSine from UP Los Banos, Laguna.
  9. Team Alpha³ from University of the Philippines,Manila

And ALL of the teams had pitched their apps for 3 minutes and after that, there is an interaction with the panel of judges for 2 minutes who then gave creative ideas and suggestions to even make the experience of the participants apps more awesome to the end users!

These panel of judges are all Pinoy Mozilla Reps and they are:

  1. Eusebio Barrun
  2. Robert ‘Bob’ Reyes
  3. Kathrine Faye Tandog
  4. Joell Lapitan
  5. Kevin Ventura

All apps are judged based on the following criteria:

  • Design – “Is the user interface design compliments the purpose of an app?”
  • Usability – “Is the app user friendly to the end user?”
  • Presentation – “Have they presented the app clear to the judges?”
  • Innovation – “What makes this app unique among others, and why this app is a game changer?”
  • Relevance - “Is the app aligns with the hackathon theme?”

and we are proud to say that the judges had selected the top three apps and also the winners for this hackathon:

  1. Team COSSine with the app “Lets do da Math”
  2. Team Bangan with the app “Binary Game”
  3. Team Red Coders with the app “Math Catapault”

All winners had received a cash prize from our supporter Globe Labs and an shinny new Firefox swags to take home!

Congratulations guys! We hope to see everyone’s apps on the Firefox Marketplace in the future!

We’d also like to thank all of our Firefox Student Ambassadors and Mozillian supporters who volunteered to make this event possible!

You can check out more pictures of this event from our official Flickr set.

Meet the first top ten filipino made Firefox OS apps you can use today!

We cannot deny the fact that Firefox OS has a great developer interest in the country. Many of the local developers from different fields are joining our official Dev Group on Facebook to get an insight about the latest news and events related to Firefox OS.

But… how about the consumers? You’ll be surprised that even at Toycon 2013, i am getting questions like “When will Firefox OS launch locally?” or “Is Firefox OS something to look forward to?” from a consumer that came from a non-tech industry field! How awesome is that?

And since January and up to this date, we have successfully conducted 3 App Days from different places in the country and 2 Firefox OS Apps Development Workshops in top universities in Manila and of course, our countless lightning talks that promotes Firefox OS in different parts of the country.

Lo and behold, we are pleased to announce the first top 10 Firefox OS apps that has been approved in the Firefox Marketplace:

  1. Raffle Hat
  2. NS Converter
  3. My Holy Rosary
  4. My Aksyon
  5. Pixel Test (You have to switch to countries that supports payments to see this app)
  6. Leaders PH
  7. BMI Calc
  8. TicTacToe
  9. Game of Luck
  10. MozPH Memory Game

OUR BASIS: We gathered this information from the Mozilla PH Developer Community and does not in anyway represent accurate statistics (on who came first) from the Firefox Marketplace.

Let this be an inspiration to other filipino developers to get started making or porting their apps right now! This is truly the best time to explore the platform and launch an app!

How can you try this apps without a phone, you say? You can download and use the Firefox OS Simulator (Add-on) and use it along side with your Firefox browser. Cool, right? :)

If you need developer support, you can always ask for help at our developer group or follow @MozillaHacks on twitter.

Recently approved Firefox OS app? E-mail me your app’s Name, description and Marketplace link to: aaroncajes [at] MozillaPH [dot] org

Mozilla PH Dev Team at UE Manila for Firefox OS Workshop

The Mozilla Philippines Dev Team conducted a Firefox OS Workshop at UE Manila last Friday, September 27 2013. It was attended by Computer Engineering students and most of them are members of Society of Computer Engineering Students (SCpeS) an official student organisation at the University of the East – College of Engineering.


This event is somewhat unique to the team because this time we are teaching Firefox OS development to non-Information Technology and Computer Science students. The event was smooth because majority of the students knows how to make a web app using Web Technologies, so kristian lugtu, my co-speaker focused on making these web apps responsive and be adaptive to Firefox OS.


The event started at 10am as i was the first to discuss about the Mozilla Philippines Community and to be followed by Firefox OS Overview which discusses about the philosophy of Firefox OS and why it’s the start of the Open Web revolution on mobile.

Followed by Kemuel Joseph Domanog where he discussed about the Firefox Students Ambassadors program in the Philippines.


Then Kristian Lugtu discusses about making your first Web App with Mobile First in mind. He also made a template for students to follow and hack on while he demonstrates how to make a simple web app responsive.

After an hour of hacking, i came back to talk about using that web app and optimise it to Firefox OS. This time before i showed them how to write a manifest file and using that to test their apps on the Firefox OS Simulator, it was my first time to let my audience install the simulator. I did that because we were at the university’s computer lab and they have to experience how easy it is to install the simulator, so when they reach home after the workshop, i am confident enough that they know how to replicate it again on their own machines. Lastly, i also discussed about the benefits of Firefox Marketplace.


After the talks, we have a 2 hour app hacking session where they will have to use that template and make a new app out of it. It’s nice to have Ryan Ermita and Marcus Ang present at this workshop as they are both dedicated Mozilla Volunteers and act as Firefox OS mentors to help students with their first open web app. It was truly an interactive workshop! At the end of apps hacking session, there were 6 apps demoed in front of the audience.

And those who have presented received a Firefox string bag and Firefox phone case. Not only that but we also gave Firefox and Mozilla stickers to all attendees!

Over 40 student attendees. Truly it was an awesome experience for everyone! I can’t wait for the next Firefox OS events and open apps coming from my own alma matter! :)

I would like to thank Prof. Errol Antonio and Prof. Mary Ann L. Limkian for making this event possible! Kudos to everyone!

Check out our Flickr set for this event here.

New in Firefox OS V1.2-prerelease: Orientation Lock Support, new lock screen and the future of customizable homescreen!

I’ve recently flashed my Geeksphone Keon with the latest V1.2 ROM with build identifier: 20130928225700 and i think it’s quite impressive because this one has a lot of new upcoming features to play around in the next releases. Take note that i’m on the 1.2 channel, which means this one is being updated every night so expect A LOT of bugs along the way if you want to use this one.

Let me enumerate the cool new things i found on this build:

  1. Device Orientation lock support
  2. Improved lock screen design
  3. Home Screen option
  4. New set of wallpapers

Device Orientation Lock Support 

Orientation lock is one of the most important feature in a smartphone and crucial to the User Experience of a mobile operating system.  If enable, what orientation lock does is that it prevents the device from switching to landscape from portrait mode on any apps as possible. Without this feature, one mistake of holding your device might change the orientation of the screen without your consent, making users annoyed. So it’s nice to see that Mozilla is working round the clock to make this important feature a reality.

Improved lock screen design

 


From the start, Mozilla has been experimenting different kinds of Lock Screen design, and if you’re using a Firefox OS phone right now, you might have to swipe up and press a rounded button to unlock your phone OR fire up the camera. But on this build, you have to tap and swipe the middle button to select whether you want to unlock your phone or use the camera with a twist of animation that compliments the design of Firefox OS.

Video demo: http://instagram.com/p/e1Op39iMZv/

Home Screen Options

Soon developers can change how the home screen should look like. This one is similar to Android. Though it’s not clear how one developer or designer can make their own customised home screen, it’s really an exciting feature to look out for.

Video demo: http://instagram.com/p/e1O8okiMaC/

New set of wallpapers

Now includes the signature fox, and it’s built right into the system wallpaper. How cool is that? :)

Video demo: http://instagram.com/p/e1PRsCCMad/

What’s this? :)

Hmmm.. future icon for tablets? :)

Video demo: http://instagram.com/p/e1XiH9iMUH/

The real deal here is that every Firefox OS phone will have this update in the future. So theoretically, no Firefox OS phone will be left behind!

If you’re feeling adventurous right now, you can flash your device by getting the official Geeksphone Firefox OS 1.2 ROM here: http://downloads.geeksphone.com. Please note that i am not responsible if your device got bricked, proceed with caution in mind. :)

Hit me up in the comments if you have any questions.

Useful articles for building Firefox OS apps

So, you wanted to build an Open Web App for Firefox OS? Awesome! Here, you will find useful articles about building your own Firefox OS app!

Getting Started with Firefox OS

This list will never be complete as new articles are being made by current Firefox OS developers to help new developers get their apps started. If you found a new and useful Firefox OS guide or article, just comment the link below and i’ll add them here. Thanks!

Geeksphone has something special to announce soon.

That’s right. Geeksphone isn’t going anywhere and it looks like they are ready to drop something awesome anytime now!

So is it…..

  • A “Geeksphone” Developer Preview Tablet(s)?
  • A new set of “Geeksphone” Developer Preview Device(s)?
  • Re-stock of Keon/Peak?
  • Or a.. “Geeksphone” Consumer phone?
  • If not, maybe a set of IMAGES that would make KEON/PEAK into a CONSUMER device?

Who knows? Time will only tell and i’m pretty much excited on what they have to announce in the next few weeks, if not then months. :-)

 

As of 7/7/2013 – 5:53Pm (PHL Time): Geeksphone.com website is DOWN. But the Download section for the images is UP. Probably, some website maintenance? Or a new website layout?

Get ready to hack at 4SQ HackDay Philippines!

We cannot deny that the mobile era is here. It’s what Steve Jobs said that we now heading towards to a “Post-PC era“. But what does it mean? It means people are now shifting from their laptop/desktop lifestyle to tablet lifestyle. But that doesn’t mean people are now selling their new and shiny MacBook Pro’s or Powerbooks, but in fact, they are adapting a new kind of device that would help them consume information.

It’s a Mobile thing, isn’t it?

A Smartphone is designed to be fast, fluid and handy. People love their smartphones because of that. When designing a smartphone app, developers should prioritize the consumer’s needs. Remember, they are always on the go so your app should too.

A tablet, on the other hand is designed for consumers who wants to consume data on a big screen. It’s like a smartphone, but users are not always on a hurry. When designing for tablets, always think about how your app will look like on that big handy screen. Users are meticulous and they demand a better experience on their device. It’s what they paid for.

What about tools and things like that?

Usually, a mobile platform allows devs to build apps on native. But today, majority of Mobile platforms are now offering their web tools to web developers. Popular mobile companies like BlackBerry, Firefox OS, Nokia, Windows 8 are now changing the game with HTML5.You can also use Apache Cordova to build cross platform HTML5 apps.

Now, which is better? Native or Web? Seriously. It’s all about your personal preferences and or experience. Use the tools you feel comfortable with. But if you’re not happy with the results. Go and try the other.

Come and Join 4SQ HackDay PH 2012!

 (WebGeek DevCup. Photo by When In Manila)

Smart DevNet and WebGeek invites all mobile app developers to test their skills in this awesome and one of a kind hackathon event. All you have to do is develop a mobile app on the foursquare API. Develop your mobile app within nine hours and let us see what you’re capable of.

It’s your chance to hack that next big thing! If you want to know more about this event, you can visit the official site: http://hackday.webgeek.ph/

A touch of Responsive Web Apps

The “Touch” Revolution

When the first iPhone was announced, Steve Jobs also announced to developers that they don’t need to learn a new language just to make apps because the iPhone can run “Web Apps” or a.k.a “Web 2.0″ and stated that you can use the available web technologies to make apps. (Yes, the first iPhone doesn’t have an app store either) that runs on Safari. But things changed when Apple officially announced an official SDK to make “Native Apps” and also the rise of the “App Store” revolution and everything changed since then.

The HTML5 Revolution

But…

Steve doesn’t like flash. And said that “New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too).” thus the beginning of the “HTML5″ revolution.

It’s 2012 and years after the first iPhone was released the web has grown and a lot of companies supported HTML5. But it didn’t stop there.

Then came PhoneGap created by Nitobi which then was acquired by Adobe. So What is PhoneGap? I let Wikipedia do the talking:

It enables software programmers to build applications for mobile devices using JavaScript, HTML5 and CSS3, instead of device specific languages such as Objective-C.[7] The resulting applications are hybrid, meaning that they are neither truly native (because all layout rendering is done via web views instead of the platform’s native UI framework) nor purely web-based (because they are not just web apps, but are packaged as apps for distribution and have access to native device APIs).

(Other than PhoneGap, there are lots of tools that does the same thing which i will not mention, but you can google it.)

And a lot of companies like Mozilla, Microsoft, Nokia and BlackBerry now supports web technologies to make native web apps.

Let me highlight these words: “Web” + “Apps” + “Browser”

Building Web Apps is no different from building a website. If you know how to build your website using HTML5 and know responsive web design then you’ll have to adjust to the platform you want to work on. But if you haven’t, you might want to open your favorite search engine and start learning now. :)

Seriously, learning a new language is hard but it’s harder when you try to code without understanding what that code actually does for you. One effective way  is to learn and write code. Understand first and apply. Trust me, it’s easier to code when you know what to do.

And a little motivation should do the trick!

Don’t forget JavaScript!

JavaScript is the programming language made not just for the web but also for all the devices that runs a browser. A LOT of platform uses JavaScript just to operate a certain task like Firefox OS, BlackBerry’s WebWorks and WebOS heavily relies on that, so you have to understand and learn JavaScript!

Explore. Make. Deliver.

Explore new technologies, frameworks and other stuff that could help you deliver that next big thing! Make the best choice and focus. Deliver!