March 7, 2016 · Blog · HTML Tutorials · HTML5 ·

HTML

The language in which all websites and web apps are being presented on the web browsers is HTML. This language is what web browsers read, understand and render. In addition to HTML, web applications usually have dedicated JavaScript and style files.

In the dynamic web applications, HTML representation files are generated dynamically, in most cases by the web server. Web server application is using front end templates and data stored in databases to generate final HTML pages.

Static web applications, do not have the server app side. HTML and all corresponding style and JavaScript files are already created and just served by a web server as they are. This approach allows you to host your web pages on different platforms which support static HTML pages but not server side languages. Examples would be GitHub pages or even DropBox.

July 3, 2015 · Blog · HTML5 · Mobile Tutorials ·

This is the final part of HTMLCenter tutorial about Framework7 mobile HTML5 framework. In previous part one we have created a skeleton mobile web application with several views. In part two we added login functionality and communication to cloud-based service APIs (Parse BaaS). This final part is about wrapping up the existing Framework7 application into PhoneGap (Cordova) wrapper and creating native mobile app as a result.

PhoneGap is a popular choice among mobile web app developers to package their HTML5 applications for distribution as native mobile apps. PhoneGap framework is based on Apache Cordova open source project which provides this exact functionality. It also supports custom plugin system which lets developers hook into native mobile OS API’s.

We are going to start new PhoneGap project and add our existing Framework7 application in.

April 16, 2015 · Angular.js · HTML Tutorials · HTML5 ·

We have recently created example Angular.js web app with the minimal generic functionality. Small enough to be called framework but with built-in test cases, controllers and several views with user forms. The goal is to have a reusable foundation for Angular projects. This blog post is about how we designed Angular Starter structure. Part two of this posts is about consuming APIs with AngularJS.

Why Angular Starter

There are many tutorials on how to start application development with Angular.js. As well as a good few projects on GitHub with the Angular app skeletons. Like the angular-seed project created by Angular.js development team itself.

What we needed was a minimal project, with pre-built basic functionality and structure of communication with web services and APIs. And of course automated test cases.

We wanted test cases to get some special attention as we are big fans of TDD (test-driven development). Having the majority of test cases created even before any app functionality is coded is a good help to keep those bugs away.

I haven’t found the open source project which completely match my requirements and Angular Starter was born. It’s an open source project, hosted on GitHub and I welcome all suggestions and comments.

What exactly is its structure and how it can help to start your Angular apps?

April 9, 2015 · Blog · HTML Tutorials · Mobile Tutorials ·

This is the second tutorial about building Framework7 HTML5 mobile web application. In the first tutorial part we have prepared the base by creating 3 mobile application views. One of them was the app user login view. In this tutorial part, we will make user registration and login functionality live by enabling login view communication with Parse -cloud-based backend service. The final third part is about wrapping Framework7 application into PgoneGap.

Creating Parse User Database

Nowadays you have many options once it comes to cloud-based storage options for mobile web apps. We did a good summary on HTMLCenter a few posts ago.

For todays tutorial, we are using Parse service. Parse at the time or writing supports 3 main functions – Core for data storage and user management, Push for push notifications and Analytics for logging different app events. They have free tier available for starting apps – it allows for up to 30 requests per second throughput and has 2TB data transfer limit per month. I’m sure we will not need this capacity in our tutorial!

Go ahead and create a free account on Parse. After you signup / login you can create new applications. I created one called framework7test dedicated for this tutorial. You can see it below.

March 3, 2015 · Blog · HTML5 · Mobile Tutorials ·

We are starting the series of tutorials and short reviews about popular HTML5 mobile frameworks. In this post, we are discussing why would developers use existing mobile web framework instead of building one from the ground up.  And we are creating simple, mobile web application with Framework7. In the second tutorial part we use Parse.com cloud service to integrate user login. The third part is about wrapping Framework7 application into PgoneGap.

Mobile web applications allow us to quickly design and develop prototypes, reuse already written code across multiple mobile platforms and in many cases match look & feel for customers using wide range of devices with different operating systems.

December 16, 2014 · Blog · Mobile Tutorials · PhoneGap ·

PhoneGap is hybrid HTML5 mobile application framework which has nicely growing user community.

Here on HTMLCenter we have published several tutorials about designing and developing Cordova / PhoneGap based HTML5 mobile applications.
One of the main strengths of PhoneGap undoubtedly is the native plugin functionality. It allows developers to hook the native mobile OS components with HTML5 and JavaScript code. This way you can use JavaScript methods across the app to access functionality provided by native code.

In fact, any other developers using PhoneGap framework can just import your plugin and use the functionality in their own apps. Developer community has created many such plugins. And Cordova contributors have developed plugin manager called plugman in order to make installation of plugins simple.

There are several plugin repositories which collect and archive PhoneGap framework plugins.

While working with iOS and Android applications I have used several PhoneGap plugins and want to share some of them which helped me a lot in mobile app projects. Did I miss any good ones?