background preloader

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App
Mar 08 2012 With an increase in the number, diversity and complexity of smartphones, more and more companies want to have their own mobile app, but creating a native app can be pretty expensive. It requires special skills, as well as special coding tools, and then there is also the need to build an app per platform (Android, iOs, BlackBerry, Windows Phone, etc). All of this figures in to a higher price tag for the app development. The jQuery framework has been around the web for a while now, but the jQuery base technology was basically designed for browser apps. jQuery Mobile is a framework based on jQuery that enables web designers to create web-apps that are optimized for use on a mobile device (Smartphone and tablets). In this jQuery Mobile tutorial, we will create a nice demo app from scratch, to show some of the things that can be easily done using this powerful tool. The Concept of the Mini App: Restaurant Picker Wireframing Our Application. Home Screen : Choose a Plate Choose a Town

Using Backbone.js with jQuery Mobile Backbone.js is an architectural framework that helps you write well-structured Web applications. It is not, however, a user interface framework and it therefore doesn’t help you with the way your application looks. Backbone’s confined scope is a good thing: it’s lightweight, non-intrusive, not coupled to things you don’t need, and it lets you use the UI toolkit of your choice or simply roll your own styles and widgets. In my previous post, I demonstrated how to use Twitter Bootstrap on top of Backbone. Quest for a Mobile UI Toolkit After that post, I wanted to create a mobile version of the same application; a version that I could package with PhoneGap and that would look and behave like a native app. Another Way to Use jQuery Mobile jQuery Mobile (jQM) is one option that I’ve explored before (here and here), but it fits more in the category of full-stack frameworks that tie together architectural structure and UI controls and behaviors. Sample Application Here is the app: How it works

HTML5 Cross Browser Polyfills - GitHub The No-Nonsense Guide to HTML5 Fallbacks So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them. The general idea is that: We, as developers, should be able to develop with the HTML5 APIs, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn't have to change but users will move to the better, native experience cleanly. Looking to conditionally load these scripts (client-side), based on feature detects? svgweb by Brad Neuberg & others Fallback via FlashSnap.SVG from scratch by the author of Raphaël (Dmitry Baranovskiy) Abstracted API. FakeSmile by David Leunen Canvas Web Storage (LocalStorage and SessionStorage) Non HTML5 API Solutions ssw by Matthias Schäfer$.store by Rodney Rehmlawnchair by Brian Lerouxstore.js by Marcus WestinPersistJS by Paul DuncanSquirrel.js by Aaron GustafsonjStorage by Andris Reinman Video

Part 1: Create a "Hello, world" app (Windows Store apps using JavaScript and HTML) This tutorial teaches you how to create a simple "Hello, world" app using Javascript and HTML. It's the first tutorial in a series of 5 that teach you what you need to know to build apps. In this tutorial, you learn how to: Create a new projectAdd HTML content to your start pageHandle touch, pen, and mouse inputSwitch between the light and dark style sheetsCreate your own custom stylesUse a Windows Library for JavaScript control We show you how to create an app using HTML, JavaScript, and CSS. Tip If you want to skip the tutorial and go straight to the code, see Getting started with JavaScript: Complete code for the tutorial series. Before you start... To complete this tutorial, you need Windows 8.1 and Microsoft Visual Studio Express 2013 for Windows. Step 1: Create a new project in Visual Studio Let's create a new app named HelloWorld. Launch Visual Studio Express 2013 for Windows. The Windows and Phone projects each contain a number of files: These files are essential to all apps. <!

Camera | a free jQuery slideshow by Pixedelic A simple slide This is the "simple anathomy" of a slide: Captions You can add a caption to the slide, just put a div with class "camera_caption" into the div above: <div data-src="images/image_1.jpg"><div class="camera_caption">The text of your caption</div></div> By adding one more class to the "camera_caption" div you can decide the effect of the caption. HTML elements You can also put some HTML elements into your slides. <div data-src="images/image_1.jpg"><div class="fadeIn camera_effected">The text of your html element</div></div> An HTML element can have a class "fadeIn": in this case it will be displayed with a fading effect. Videos To include a video into your slideshow you must put an iframe into one of your slides: As you can see I set the width and the height of the iframe to 100%, so it changes its size according with the size of the slideshows (I mean the iframe, the video in the iframe will mantain its ratio). The "data-" attributes or a particular alignment for one slide only:

When can I use... Support tables for HTML5, CSS3, etc JavaScript: Créer des applications Web avancées avec des techniques orientées objet JavaScript Créer des applications Web avancées avec des techniques orientées objet Ray Djajadinata J'ai récemment interviewé un développeur de logiciels qui a cinq ans d'expérience dans le développement des applications Web. Ayant travaillé sur JavaScript pendant quatre ans et demi, elle estime être au point dans ce domaine. D'une certaine façon, cette supposition n'est pas sans fondement. D'ailleurs, jusqu'à très récemment, j'ai toujours réussi à me débrouiller avec le peu que je savais sur JavaScript, armé seulement de la référence DHTML MSDN® et de mon expérience en C++/C#. La programmation orientée objet est une approche populaire qui est utilisée par la plupart des bibliothèques JavaScript pour créer une base de code plus facile à gérer et maintenir. Les objets JavaScript sont des dictionnaires Dans C++ ou C#, lorsque nous parlons d'objets, nous faisons référence aux instances de classes ou « structs ». fait exactement la même chose que ceci : Voici donc pour les propriétés d'objet.

HTML5 Please JavaScript: Créer des applications Web avancées avec des techniques orientées objet JavaScript Créer des applications Web avancées avec des techniques orientées objet Ray Djajadinata J'ai récemment interviewé un développeur de logiciels qui a cinq ans d'expérience dans le développement des applications Web. Ayant travaillé sur JavaScript pendant quatre ans et demi, elle estime être au point dans ce domaine. Mais, comme je m'en suis rendu compte peu après, elle ne savait en fait pas grand chose sur ce langage. D'une certaine façon, cette supposition n'est pas sans fondement. D'ailleurs, jusqu'à très récemment, j'ai toujours réussi à me débrouiller avec le peu que je savais sur JavaScript, armé seulement de la référence DHTML MSDN® et de mon expérience en C++/C#. La programmation orientée objet est une approche populaire qui est utilisée par la plupart des bibliothèques JavaScript pour créer une base de code plus facile à gérer et maintenir. Les objets JavaScript sont des dictionnaires fait exactement la même chose que ceci : Voici donc pour les propriétés d'objet.

Créer une application iphone : Tutoriel avec PhoneGap et SenchaTouch | Blog agence web open source Les plateformes open source se sont beaucoup développées ces dernières années. Il s’agit de plateformes « libres de droits » qui permettent à tous les utilisateurs d’accéder à l’intégralité du code source. L’avantage majeur de ces plateformes est de pouvoir évoluer grâce aux actions de la communauté. Chacun peut apporter ses modifications afin de rendre la plateforme meilleure pour tous les utilisateurs. Parmi ces plateformes, certaines sont dédiées à la création d’applications mobiles comme l’explique le tutoriel ci-dessous pour les plateformes PhoneGap et SenchaTouch. Le marché des applications mobiles est un marché très récent. En 2009 sort Android 2, cela permet à Google de percer sur le marché des OS mobiles et de démultiplier ses parts de marché en 3 ans : 2% de parts de marché en 2009 contre 46% en 2012 (pour le marché français). 2010 sera l’année de la popularisation des tablettes tactiles avec la sortie de l’iPad. Logiciels et matériels utilisés : Installation du JDK Rien à modifier

Comment “cuisiner” une application Windows 8 avec HTML 5, CSS3 et JavaScript en une semaine–Jour 0 - Eternal Coding - HTML5 / Windows / Kinect / 3D development (La version finale est accessible ici: ) Le but de cette série d’articles est de fournir une recette pragmatique pour écrire une application Windows 8 à partir de zéro. L’application que j’utiliserai comme exemple est nommée UrzaGatherer et est utilisée pour aider les collectionneurs de cartes Magic The Gathering à gérer leur collection. UrzaGatherer fut développé à l’origine avec WPF 4.0 ( ) mais j’ai préféré utiliser HTML 5, CSS3 et JavaScript pour développer la version Windows 8 car je voulais me pencher sur ce nouveau mode de développement. Pour développer l’application, vous allez donc avoir besoin de : La solution peut être téléchargée ici: L’intégralité de la série est disponible ici: Le projet est ainsi créé avec uniquement les fichiers nécessaires : <!

10 questions à se poser pour créer une application mobile Développer une application native pour tablette ou smartphone dans une contexte extrêmement concurrentiel et ultra-segmenté mérite que l’on se pose les bonnes questions avant de se lancer. Nartex nous propose une infographie qui recense les 10 axes importants qu’il faut privilégier dans sa réflexion : Les 10 questions à se poser avant de créer une application mobile A qui va-t-elle servir ? Toutes ces questions sont primordiales pour assurer la réussite de la conception et de la promotion de votre application mobile. A ces 10 questions j’ajouterais bien volontiers ma question bonus : comment pérenniser son application dans le temps et s’assurer d’un usage régulier et croissant? En savoir plus sur Nartex Nartex est une agence de développement d’application mobile basée à Mulhouse, en Alsace.

Related: