Design & Technology Blog   

Posts tagged HTML5

Mobile App Development Greetings

We’ve been working on some very interesting mobile platform projects recently; below are some details about what we’ve been up to.

Case 1: HTML5 based iPad App Development

HTML5 based iPad web application for a medical company

Task: Interaria was recently contacted by an international medical company who needed a portable and scalable solution for collecting and processing medical data. The system was to be exclusively used internally requiring user accounts and a secure login and management platform.

Developed Features: login/logout, my profile, access a partial list from the full database of clients, sort accessed information, collect and easily submit input information, store and process information, create visual graphics and reports on data, access admin portal

Technology Solution: We identified a need for an HTML5 based iPad web application that the users can access even when off-line, and not connected to a WiFi network.

Technology Details: Interaria developed an HTML5 based iPad web application integrated with a native iOS code. In other words, we developed a hybrid HTML5 iOS app where the core of the app loads from a web server but utilizes some of the nice features of an iOS app such as push notifications and GPS enabled mapping. Our solution was a hybrid app developed with both the HTML5 code and iOS codes.

For the purposes of rapid development and rapid deployment, HTML5 coded apps creates following advantages:

1)  Quick changes. We can make quick changes to the app for the client without each time needing to re/submit the app to the Apple’s App Store for a review and approval process. This saves our client significant time.

2) Privacy of the app. Not needing to submit the app to a review process at the Apple’s App Store ensures the app stays private.

3) No re-installations. In most cases, once installed, the end-user will not need to update or reinstall the app when the app has been updated/upgraded with new features.

4) Off-line functionality. The client’s users can access and use the app even when off-line. This technology improves critical usability in case of internet connection/ WiFi network being down due to a geographically remote area or unreliable area for WiFi (such as parking garages, basements, hospitals). If data is recorded within the app while the device is offline, upon re/establishing a connection to the server, data will seamlessly sync.

The bottom line: When do we recommend using html5 mobile web app over a fully native iOS app? 
In situations where we want to avoid using Apple’s App Store distribution system, such as when an app is developed for private and exclusive use, and for when a client has a critical/short timeline for app’s launch.

Case 2: Suite of Mobile App Solutions

Suite of Mobile App Solutions for a Community Social Networking System

Task: For the last couple of years (and still continuing) the Interaria team has been developing mobile solutions for a social networking company.

Developed features: Timeline based feed of private content. Members can read and create posts relevant to their community. Members have an option to add comments to posts, and save them to their account. Members can join and organize subgroups. Native mobile push and email notifications are sent according to the user’s preferences. The community network’s administrator has a full dashboard of features to monitor and manage the usage of the networking system.

Technology Solution:  We’ve developed the social networking system on three different platforms, addressing the needs of users on different types of mobile devices and mobile usage preferences:
– iOS (iOS app Objective-C integrated with HTML5),
– Android (Java/HTML5 integrated Android app), and
– Mobile web platform (native HTML5 mobile web app).

We continue developing and maintaining the mobile app systems by developing new features and launching system upgrades.

Case 3: Mobile Websites

Interaria continues to offer mobile site development along with website development. Our mobile web sites stream from the same content management system that is used for the dynamic web content. This minimizes any extra work for maintaining two platforms.

As Google is now putting a special emphasis on mobile specific search results, we highly recommend investing on a mobile web site if your company is considering developing a new website. Not only does the mobile site cater an unavoidable and increasingly large user base of visitors but it also guarantees that mobile users making searches on Google will reach your valuable content.


More Information
The Interaria team is very excited about providing the most applicable and fully customized solutions for the mobile platform experience. More details and a private tour are available by request. If your company is looking for a mobile solution, please don’t hesitate to contact us at 214-909-3900.

New Winds For Cross-Device Compatible Interactivity

Mobile and tablet devices not supporting the Flash player plugin have contributed to the overall decline of development of interactive web animations during the past few years.

Up until very recently, Web designers and developers have had very limited options to create cross-device compatible interactivity, typically relying on AJAX based components. Today we are closing the gap as new emerging technology and web programs are opening doors for new types of ‘Flash free’ interactive ‘animations’.

Adobe has brought in two new software products to the market, Adobe Edge, and CreateJS Toolkit built for Adobe Flash Pro CS6, that both offer promising steps towards more quickly produced code based HTML5 interactivity. Google has also developed a program called Google Swiffy which will convert Flash animations to HTML5.

Adobe Edge, currently in beta/preview mode, uses CSS to draw objects, javascript to animate objects, and HTML div’s to place these objects on the page. This is an intriguing solution for making web pages more interactive but is visually somewhat limited due to CSS code not being able to render complex vector drawings such as hexagons.

Complex vector graphic animations can be created using Flash Pro CS6 which can then be exported as web friendly SVG’s (scalable vector graphics), and animated on HTML5 canvas using either the new built-in CreateJS Toolkit or by using the Google .swf to HTML5 conversion tool Swiffy.

Adobe’s CreateJS Toolkit allows a developer to export Flash animations to HTML5 format so where one can then program the further interactivity of the vector graphics with javascript. Google Swiffy on the other hand allows the developer to program the interactivity of scalable vector graphics in Flash, and then converts the rendered .swf file to HTML5.

With the new interactive tools available, there are now ways for web designers and web developers to increase cross-device compatible interactive creativity both economically and efficiently. A designer/developer can now put together an interactive experience where the exported code renders on all modern browsers and devices without the use of the Flash Player Plugin.

Contact Interaria at 214-909-3900 to discuss your company’s cross-platform compatible HTML5 animation needs.

HTML5 Drag-and-Drop Feature Explained

HTML5 Drag and DropOne of the most tangible and neat features of the new HTML5 is its capabilities to support drag-and-drop features. HTML5 drag-and-drop feature is defined as an “action of a mousedown event that is followed by a series of mousemove events, and the drop could be triggered by the mouse being released.” (W3C)

For instance, by utilizing HTML5 technology a user may drag online store items to a shopping cart, organize lists of objects in a visual manner, and enjoy different types of online board games that simulate real life playing situations. For uploading images and sending attachments HTML5 is really neat: imagine uploading images from your desktop by simply dragging them to the web page without the need to click buttons such as “browse” and “upload”. HTML5 is turning the user experience from operational to user-intuitive, softening the lines between tangible and virtual.

Interaria is an HTML5 development agency. To discuss how to develop and integrate HTML5 features to your web site, please call 214-909-3900.

Benefits of HTML5

HTML5 standards are a building block of a new semantic web where the current web of unstructured documents is harnessed into elegant “web of data”. New syntactical features of HTML5 include video, audio, header and canvas elements that are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins.

For instance, the canvas element allows drawing of complex graphics and animations and is on its way of replacing an external Flash player plugin. The new emerging HTML5 animation programs such as Adobe Edge are promising.

Another key feature of HTML5 is its “built in” ability to play media (audio and video) without any needs of external media player plug-ins. Effectively, a web developer can just drop a media file to the page, and then a browser that supports HTML5 (such as Chrome) knows what to do with the file.

A third interesting HTML5 feature is Geolocation tagging that utilizes Javascript API technology. Upon agreeing to share his/her location, a web/app user may take advantage of customized local information feeds such as finding points of interest in the user’s area, showing the user’s position on a map, providing navigation help, creating location based alerts, and allowing a user to create location based social media tags.

Fourthly, HTML5 supports neat drag and drop features useful for information sorting within a web page, easy social media sharing, and drag-and-drop of images and attachments (currently supported by Gmail in the latest Google Chrome browser and Apple’s Safari 5.x.)

HTML5 has been widely talked and debated about in the context of developing mobile apps. The offline playing and local storage capabilities of HTML5 do create an alternative technology solution for native iOS and Android app development. Many enterprise apps and consumer database apps that do not require specific mobile phone features and resources to function optimally can be developed on HTML5 mode, hence avoiding the “walled garden” of iOS app libraries and their fee structure.

Currently the biggest obstacle for developing HTML5 web media is an uneven support of HTML5 by different web browsers. For instance, some web browsers support HTML5 video while others don’t. This gives double work to a web developer who needs to offer alternative code and be sure to test HTML5 developed web media in all current browsers. Time should fix this problem as browser manufacturers are working to improve their browsers and the web as a development platform.

Interaria is a Dallas HTML5 development expert. Call 214-909-3900 to schedule a HTML5 consultation; how your website could benefit from the latest HTML5 features.

[sources: W3C, wiki, What is HTML5? An introduction to the new features of HTML5, conference presentation by Jason Hanley – Jan 2011].

@ 2011. Meri Kuusi Shields / Interaria. All rights reserved.

Facebook
Twitter
Blog
LinkedIn
SERP Zebra