Tuto application Facebook

Créer une application Facebook de A à Z en PHP. API Facebook, viralité, monétisation ...

Tuto Symfony2

A travers le projet WatchMyDesk, apprenez à maîtriser le Framework PHP5 Symfony2.

Création site web

Création de sites web, applications Facebook sur mesure, e-commerce, applications iPhone ...

Se
Connecter Créer
un compte

14
DEC

iUI - Un Framework JS/CSS pour créer des web apps mobiles

Publié le 14/12/11 à 09h44 par DJo

iUI est un framework permettant de créer rapidement des applications web mobiles au look iPhone natif.

iUI est un framework permettant de créer rapidement des applications web mobiles au look iPhone natif.

Créer l'application web mobile d'un site est devenu quasi incontournable aujourd'hui si vous ne disposez pas d'un design responsive.

iUI est un framework qui vous sera très utile pour créer rapidement vos web app mobile tout en gardant une ergonomie et un style proche des applications mobiles natives.

Le framework est composé d'un ensemble de fichiers Javascript, CSS et images:

iUI - Arborescence des fichiers

La prise en main d'iUI se fait rapidement, en combinant HTML et classes.

Il est ainsi relativement simple de créer un enchainement de pages:

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
   <link rel="stylesheet" href="iui/iui.css" type="text/css" />
   <link rel="stylesheet" href="iui/t/default/default-theme.css" type="text/css"/>
   <script type="application/x-javascript" src="iui/iui.js"></script>
</head>
<body>
   <div class="toolbar">
      <h1 id="pageTitle"></h1>
      <a id="backButton" class="button" href="#"></a>
   </div>

   <ul id="screen1" title="Screen 1" selected="true">
      <li><a href="#screen2">Go to Screen #2</a></li>
   </ul>
   
   <div id="screen2" title="Screen 2">
      Hello World
   </div>
</body>

Ce qui donnera deux pages liées avec les menus type iPhone:

iUI - Enchainement de pages

La documentation du site est plutôt bien faite avec des exemples concrets.

Il existe déjà plusieurs plugins pour améliorer l'expérience utilisateur, comme un slider type iPhone etc.

Vous aurez aussi la possibilité de personnaliser le style de votre webapp à la main ou en utilisant l'un des thèmes proposés par la communauté:

iUI - Thèmes disponibles

Un framework pratique pour créer des applications web mobiles rapidement sans avoir à apprendre une tonne d'astuces pour faire fonctionner les pages entre elles etc.

A noter qu'il est compatible sur la majorité des smartphones du marché dont iPhone/iPad, Android, Blackberry...

Site Officiel

A voir aussi sur le même sujet:

2 Commentaires

mobile

webapp

Baraguiné par KorHosik le 14/12/11 à 14h28

Il aurait été intéressant de faire une petite comparaison avec jQuery Mobile : lequel est plus performant ? Le plus personnalisable ?

Mais surtout, pourquoi les deux ont-il opté pour un design par défaut basé sur iOS ? xD

La multiplication des frameworks pour applications mobiles est une bonne chose en tout cas.

Baraguiné par remi_grumeau le 20/12/11 à 19h11

Merci pour cet article !

Le plus d'iUI par rapport à JQuery Mobile, c'est déjà de ne pas utiliser JQuery, donc de ne pas le télécharger. Sur mobile, chaque octet compte... et c'est là qu'est le plus d'iUI: il est léger.
Autre plus, il ne nécessite pas d'autre compétence que de comprendre un minimum l'HTML. Pas besoin de connaitre JQuery ou un autre language. Juste de l'HTML et du CSS, tout ce qu'il y a de plus simple. iUI s'occupe du reste pour faire les transitions par slide entre les pages et gérer le bouton précédent du navigateur mobile, l'adaptation aux écrans, ...
Evidemment, tout se passe dans un objet JS iui, donc aucun probleme pour le coupler avec JQuery ou MooTools si le coeur vous en dit.

Le moins, c'est qu'il est fait pour être le plus léger possible, donc ne fait pas le café. Pas de multiples transitions (cube, alpha, wipe, par en haut, par en bas, scale, ...) comme le propose JQTouch. Exit également les centaines de composants pré-définis dans JQuery Mobile ou Sencha.

iUI se veut donc une petite librairie JS/CSS légère est simple, à vous de la personnaliser selon vos envies.
Et pour le theme iOS par défaut, c'est tout simplement parce qu'iUI date de 2007, créé par Joe Hewitt avant d'intégrer Facebook. Les autres n'existait pas encore... j'ai rempli ce manque en y ajoutant un theme Android et WebOS. Un theme Blackberry est en cours, ainsi que WindowsPhone.
Tout est dit :)
--> https://www.facebook.com/iui.framework