Emulating PhoneGap/Cordova Apps in the Desktop Browser Earlier this month the PhoneGap team held the first PhoneGap day. This was in part to celebrate the release of PhoneGap 2.0, but more importantly to bring together members of the PhoneGap community to share and learn from each other. There are great recaps of PhoneGap Day from RedMonk, as well as on the PhoneGap blog. One of the new services announced on PhoneGap Day was emulate.phonegap.com. Emulate.phonegap.com enables an in-browser simulator for developing and debugging PhoneGap/Cordova applications, complete with Cordova API emulation. Emulate.phonegap.com is built as a Google Chrome Extension, so it requires the Chrome browser. Once launched, the URL that you want to simulate will be displayed within the Ripple operating environment view. Note: This only works with assets that are on a live URL. Update: You can enable access to local files by changing a few settings on the Ripple emulator. (click for full-size image) So how do you use this environment?
Comparing Mobile Web (HTML5) Frameworks: Sencha Touch, jQuery Mobile, jQTouch, Titanium « InterfaceThis - Dave Feldman rants about product design It’s been an exciting year for the mobile Web. Adoption of HTML5 and CSS3, improved performance in mobile browsers, and an explosion of mobile app frameworks mean it’s more feasible than ever to create rich, interactive Web experiences for mobile devices. Using a wrapper like PhoneGap, you can distribute them via the native app stores for iPhone, iPad, and Android —targeting multiple platforms with a single codebase. Or can you? I needed a platform for Pints — a mobile app that answers answer the question, “Which beer should I order?” Pints isn’t complicated: a home screen, a few lists screens, a few forms. Mobile Web developers have a plethora of frameworks to do the heavy lifting for them: animated transitions, toolbars, buttons, list views, even offline storage. jQTouch jQTouch is easy to use and relatively well-documented. But even in my simple test app there were performance issues. jQTouch is available under the permissive MIT License, one of my favorite open source licenses.
Photoshop for Design Votre première application avec PhoneGap Suite à notre première introduction sur le développement web mobile, nous poursuivons nos tutoriaux par votre première application avec PhoneGap. Les étapes 1- Lancer Ecplise 2- Créer un projet Android 3- Dans le dossier assets , créez un dossier www 4- Ajouter le dossier libs 5 – Maintenant, je vous invite sur ce lien où vous pouvez télécharger le framework PhoneGap dans ça dernière version 2.0.0 J’ai choisi de télécharger la dernière version dePhoneGap 2.0.0 6 – Si on veux consulter le dossier qu’nous avons télécharger, on découvert bien que PhoneGap est compatible avec la majorité des OS mobiles tels quel Android, iOS, Symbian.. . Nous intéressons dans ce tutoriel à Android. Pour notre première application PhoneGap, nous avons besoin de library Cordova-2.0.0.jar et Cordova-2.0.0.js 7- Copier, Coller fichier .jar dans le dossier libs et le fichier .js dans le dossier www 8- Créer un nouveau fichier index.html dans le dossier www 9- Configurer le Build Path cordova-2.0.0.jar. <supports-screens
PhoneGap Build and PhoneGap 3.0 Today we officially launched PhoneGap 3.0 support for PhoneGap Build. You can read the blog post on it here: PhoneGap 3.0 Now Supported in PhoneGap Build Before you get started, there are a few things I want to call out. The first thing you should note is that Build is not yet defaulting to 3.0 when you create a new project. If you want to use 3.0, please be sure to specify it in the config.xml file: Next - if you remember my blog post on PhoneGap 3 (PhoneGap 3.0 Released - Things You Should Know), then you remember that the biggest change was to core features. PhoneGap Build also has this rule! In order to include a core plugin with your PhoneGap Build project, simply add the gap:plugin tag to your config.xml file. PhoneGap Build now has a "Plugins" tab for each project. If you forget the value for a particular plugin, or want to see what PhoneGap Build supports from third parties, just hit the Plugins tab at the very top of the page. Finally, don't forget to peruse the doc updates.
18 Mobile Frameworks and Development Tools for Creating iPhone Apps The world of iPhone application development is evolving rapidly, and developers have a growing list of development tools from which to choose. I’ve created a list (incomplete I’m sure) of some of the more popular tools and frameworks. I have only used a few of these, so I won’t vouch for usability. If you know of any that I should add to the list, please let me know. iUI Warning: Division by zero in/home/cjcollett/www/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/nextgen_basic_singlepic/templates/nextgen_basic_singlepic.phpon line13 iUI is a user interface (UI) framework for Safari development on iPhone. License: New BSD License Project Page Download iPhone-Universal The UiUIKit (Universal iPhone UI Kit) is a collection of HTML examples of what can be done with CSS3 and Safari’s Webkit License: GNU General Public License v3 Project Page Download iWebkit iWebKit is a file package designed to help you create your own iPhone and iPod Touch compatible website or webapp. 1.
Professional Website Design Software for Designers | Create a Website | Webydo Tips & Tricks Learned Releasing an Hybrid App Using Steroids.js A while ago I wrote about AppGyver’s SteroidsJS and its interesting take on hybrid app development. If you haven’t read it, basically they add the ability to use native UI elements in PhoneGap applications. Since then I’ve teamed up with Kevin Tunc, worked a lot, managed to actually release something on the appstore and won AppGyver’s app of the month! It wasn’t all that easy to create an hybrid app with a quality UI, so I figured I’d share some of the gotchas I ran into. I know it’s a longer article than what I use to post, but really this is what I wish was written when I started working on my app. Of course, like any other things I write here, I don’t claim to know everything. Getting The Device To Leave You Alone You probably know all about using a reset.css file, but for a webview trying to pass for a native view, it’s not enough. 300ms Tap Delay Mobile browsers implement a delay on tap to check if you tried to double tap or not. Disable Selection/Copy When Long Tapping Higcharts Easy!
10 New Frameworks for Mobile Web App Developers One certain limitation in Web development is time and how long it takes to get things up and running. Thankfully, frameworks and libraries can help us focus on creating rather than figuring stuff out. Here, we’ve collected 10 frameworks and libraries that will help you save up your time and energy to create the actual website or application and make your web development more effective. 1. DHTMLX Touch Is an HTML5 JavaScript framework for mobile and touch devices. Source 2. Is a game framework that combines lots of different HTML5 technologies and allows you to build games for mobile and touch-screen devices, but can also be used within modern browsers as applications. Source 3. Is an open-source HTML5-based language designed to speed up your building of mobile web applications. Source 4. 960 Grid on jQuery-Mobile Is a port of 960 Grid to jQuery mobile. Source 5. Is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible chaining syntax. Source 6. Source 7. Source
8 jQuery And CSS Parallax Scrolling Tutorials | Bashooka | Web & Graphic Design Parallax scrolling is a type of web design where different elements of a website move at different speeds. As a user navigates through parallax websites, images will float on top of other images in several layers. Parallax scrolling sites can be used in many different ways to create a variety of captivating effects which have the potential to keep viewers on your site for a great deal of time. So if you are bored using the plugin and challenged to create you own parallax scrolling effects using jQuery and CSS, you might want to try these tutorials below. With this tutorial, you’ll learn how to integrate a simple scrolling parallax. Since then, parallax has blown up. A prototype parallax scrolling technique that uses CSS 3D transforms. Ready to enter the world of parallax scrolling websites? This parallax tutorial by Ian Lunn describes how to create a vertical-scrolling parallax website, taking inspiration from the Nike Better World parallax website.
OriDomi - origami for the web