background preloader

How to Make an HTML5 iPhone App

How to Make an HTML5 iPhone App
By Alex Kessinger You’ve been depressed for like a year now, I know. All the hardcore Objective-C developers have been having a hay-day writing apps for the iPhone. You might have even tried reading a tutorial or two about developing for the iPhone, but its C—or a form of it—and it’s really hard to learn. I don’t want to say that you should give up on the objective: you can get it eventually. But in the meantime, there is something else that you can do. You can create a native app that lives with all the other apps, and for the most part, it’s going to be a pitch-perfect imitation. You can do this with the skill set you probably already have: HTML(5), CSS, and JavaScript. I’ll show you how to create an offline HTML5 iPhone application. Offline? What am I talking about when I say "offline"? The app should be as functional as it can when it is offline, just like normal native mobile apps. Yeah, I mean it, check out the following image. Prework About the App Icon and Startup Screen Screen Size <!

Créer une application professionnelle pour iPhone Grâce au succès de l'iPhone et de l'AppStore, les applications mobiles sont devenues des vecteurs de communication incontournables pour les professionnels. En effet, ces petits programmes ludiques ou utilitaires permettent aux entreprises d'augmenter la visibilité et l'accessibilité de leurs produits et d'atteindre de nouveaux prospects. Mais avant de se lancer dans l'aventure, mieux vaut anticiper les difficultés : une application mobile nécessite une réflexion préalable, et plusieurs critères s'appliquent à sa conception. Notre video Voir le tutoriel d'AppsTV en vidéo : Pourquoi développer une application mobile professionnelle ? Le nombre d'applications mobiles disponibles sur iPhone via l'Apple Store est en pleine croissance. Visibilité accrue de ses produits et services Une application mobile professionnelle sert avant tout de support de visibilité à l'entreprise. Généralisation des applications sur Smartphone Une application sur iPhone pour quels professionnels ? Joshfire Factory

"Mobifying" Your HTML5 Site Introduction Developing for the mobile web is a hot topic these days. This year, for the first time ever, smart phones out sold PCs. The "mobile" battlefield is still uncharted waters for a large number of developers. Creating a mobile-friendly As an exercise I thought it would be interesting to take html5rocks (an existing HTML5 site) and augment it with a mobile-friendly version. This article examines how we created a mobile version of html5rocks optimized for Android and iOS devices. HTML4 and CSS2 have supported media-dependent style sheets for some time. would target print devices and provide specific styling for the page content when it is printed. You can use media queries in the media attribute of your external stylesheets to target screen width, device width, orientation, etc. In the following example, phone.css would apply to devices that the browser considers "handheld" or devices with screens <= 320px wide. Some read only the handheld style sheet. <head> ...

Creating mobile Web applications with HTML 5, Part 1: Combine HTML 5, geolocation APIs, and Web services to create mobile mashups Creating mobile Web applications with HTML 5, Part 1 Find and track location coordinates to use in various Web services Michael GalpinPublished on May 06, 2010/Updated: June 29, 2010 25 May 2010: Added links to Part 2 of this series in About this series, Summary, and Resources sections. 02 Jun 2010: Added links to Part 3 of this series in About this series, Summary, and Resources sections. 08 Jun 2010: Added links to Part 4 of this series in About this series, Summary, and Resources sections. 29 Jun 2010: Added links to Part 5 of this series in About this series, Summary, and Resources sections. About this series HTML 5 is a very hyped technology, but with good reason. Prerequisites Frequently used acronyms API: Application Programming InterfaceCSS: Cascading stylesheetGPS: Global Positioning SystemHTML: Hypertext Markup LanguageJSONP: JSON with paddingSDK: Software Developer KitUI: User InterfaceW3C: World Wide Web Consortium The basics: Getting a fix Listing 1. Integrating with Twitter Figure 1.

How-To: Create an iPhone Web App — Apple News, Tips and Reviews RhoMobile Suite You can either spend a tremendous amount of time and money creating and managing different versions of each application — or you can get Motorola Solutions' RhoMobile Suite, a powerful set of development tools that help businesses mobilize their workers, no matter what technology is in their hands. With RhoMobile Suite, comprised of RhoElements, Rhodes, RhoConnect, RhoStudio, RhoHub and RhoGallery, device type, operating system and screen size don't matter. RhoMobile Suite applications simply work on whatever mobile devices are in use and you have complete control over how applications behave on different devices. RhoMobile applications are OS-agnostic, able to support enterprise- and consumer-class operating systems so you can write, integrate, deploy and manage applications that work across platforms, from iOS and Android to Windows Mobile and systems that don't even exist yet, on both consumer and enterprise devices.

Téléphones portables : des chiffres clés pour construire une stratégie. 6,8 Milliards d’habitants sur la planète et 5 Milliards de téléphones portables ! Soit 77% de la population mondiale équipée de son mobile, incluant les nouveaux nés, les moines tibétains, les bergers andins, et autres populations qui n’ont que peu ou pas accès à une couverture de réseau téléphonique mobile. En l’an 2000 il y avait « seulement » 720 millions d’abonnés. Et en plus certains pays déjà très équipés en volume, comme la Chine, avec ses 800 millions d’abonnements ne sont encore qu’à un taux d’équipement de 56%. Le marché actuel et des 5 années à venir sera tiré par l’Internet mobile qui va se développer à un rythme accéléré.360 millions d’abonnés à la 3G dans le monde en 2009, 500 millions cette année et 3,4 Milliards d’ici à 2015 ! La bataille entre les géants de la téléphonie comme Apple, Nokia, Google, et autres Samsung va s’accélérer autour de la croissance des ventes de « Smartphones« . 2/ Les smartphones, notamment l’iPhone, bénéficient d’un pouvoir d’image très élevé.

Safari Web Content Guide: Configuring the Viewport Safari on iOS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iOS. Configuring the viewport is easy—just add one line of HTML to your webpage—but understanding how viewport properties affect the presentation of your webpages on iOS is more complex. If you are already familiar with the viewport on iOS, read “Using the Viewport Meta Tag” for details on the viewport tag and “Viewport Settings for Web Applications” for web application tips. Read “Layout and Metrics on iPhone and iPod touch” to learn about the available screen space for webpages on small devices.Read “What Is the Viewport?” See “Supported Meta Tags” for a complete description of the viewport meta tag. Layout and Metrics on iPhone and iPod touch

Create offline Web applications on mobile devices with HTML5 Introduction The use of Web development in mobile applications is an increasing trend. However, intermittent network availability is a big obstacle to using Web technology as part of a cloud infrastructure. Offline Web applicationsClient-side database storage The user can use cloud functions on a mobile device, work offline with a locally deployed application on a local database, and share data with the rest of the cloud when going online again. In this article, learn the technical details for a typical usage scenario. Download the source code for the example application in this article from the Download table below. Overview Figure 1 shows an overview of the major components of the sample application architecture. Figure 1. HTML page The HTML page, the core of the application, has the model role. Remarkably, this application consists of a single HTML page without the need for loading of further HTML pages through the request-response cycles. JavaScript Cascading Style Sheet Database Manifest <!

Powerful, Stylish Forms in Minutes! Get a free trial and discover the power of control: Build powerful web forms using a step-by-step form builder Create any type of form - contact, feedback, surveys, etc. Works seamlessly with any site, no matter where it's hosted Embed web forms on any site with just a copy-and-paste Choose a design template or customize your own styles Add database features like email alerts, password protection, file upload, CAPTCHA, etc. Manage real-time data using any browser or mobile device Start with forms but enjoy powerful features to create complete web apps at any time 5 Cool CSS Hover Effects You Can Copy and Paste Need a cool hover effect for something on your site? Look no further! We’ve created several custom examples that you can view live for inspiration. If you like the effect, steal it! We’ve got the CSS ready and waiting for you to copy. Bring Your Boring Site to Life Hover effects can make your site feel much more dynamic and alive. The effects we’ll be using today all use code that is supported by modern browsers, meaning of course Mozilla and Webkit for the most part. Bump Up Live Demo: Click Here to Launch This works best when you have a series of horizontal items. This one is super easy to implement and there are in fact several ways to go about it. The transition here is completely optional as the effect still works quite well without it. Bump Up CSS Stack & Grow Live Demo: Click Here to Launch For this one I wanted a sort of lava lamp effect so that as you move your mouse down the list, each image slowly expands and then goes back to its original size. Stack & Grow CSS Fade Text in Conclusion