Ratchet est un nouveau cadre impressionnant qui vous permet de créer rapidement et facilement des prototypes d’applications d’applications iPhone en utilisant uniquement HTML, CSS et JavaScript. Créez simplement une div de conteneur dans votre code HTML, ajoutez quelques éléments avec des classes prédéfinies et vous êtes prêt.
Suivez-nous en sautant dans Ratchet pour voir comment cela fonctionne. Nous allons lancer des pneus, tester certaines fonctionnalités et décider si cela vaut la peine d'être téléchargé. (Alerte spoiler: ça l'est.)
Qu'est-ce que Ratchet?
Ratchet est un concept très simple. C'est un framework d'interface utilisateur optimisé principalement par CSS (et un peu de JavaScript) implémenté via HTML simple. Il est en fait très similaire à Twitter Bootstrap, sauf qu'il est spécifiquement conçu pour ressembler à l'interface native de l'iPhone.
Puis-je vraiment faire ça?
Ratchet n'est pas un framework très compliqué réservé aux développeurs de haut niveau. Vous pouvez commencer à l'utiliser en quelques minutes seulement. Il ne nécessite aucune connaissance de la programmation iOS et ne prend en compte que le moindre bit de JavaScript.
Pour voir comment cela fonctionne, construisons un exemple de page.
Commencer
Pour commencer, rendez-vous sur la page Ratchet GitHub et téléchargez le téléchargement gratuit. À l'intérieur de ce téléchargement, vous trouverez un modèle de départ que vous pourrez ouvrir dans votre éditeur de texte préféré.
Dans la partie principale du HTML, il y a une tonne de choses. Nous laisserons cela tout seul pour nos besoins car il fournit une configuration de test décente. N'hésitez pas à modifier les icônes tactiles, le titre de la page, etc. comme bon vous semble.
À partir de là, tout ce que nous avons à faire est de faire défiler la documentation, de saisir les éléments souhaités et de les jeter dans notre code HTML. C'est aussi simple que ça!
Barre de titre
La première chose que nous allons inclure est une barre de titre bleue située en haut de l'écran. C'est facile. Pour commencer, placez le code suivant à l'intérieur de la balise body dans votre code HTML.
Cet élément d'en-tête sert de conteneur à notre barre de titre. Maintenant, ajoutons un h1 avec un? Titre? classe assignée.
Maintenant, si nous chargeons cette page sur un iPhone, nous verrons une belle barre de titre de style iOS en haut de la page. Assez simple, non?
Rendons ce bar un peu plus intéressant, allons-nous? Utilisation d'une balise d'ancrage avec le bouton? Button-prev? et? bouton-next? classes, nous pouvons prendre notre barre de titre de purement esthétique à fonctionnel.
Encore une fois, nous voyons la puissance de ce cadre au travail. iOS fait ne pas style ces éléments HTML comme celui-ci par défaut, Ratchet fait tout le travail ici.
Curseur
L'étape ci-dessus décrit le processus de base du prototypage de votre application ou de votre page Web. Faites défiler la documentation, recherchez un élément que vous souhaitez utiliser, puis collez et modifiez le code. Ensuite, nous allons inclure quelque chose d'un peu plus impressionnant: un curseur d'image.
Le contenu Div
Avant de lancer le curseur, il y a quelque chose que nous devons inclure. En dehors de la barre de titre, tout dans Ratchet doit être inséré dans une div avec une classe de «contenu».
Vous pouvez créer plusieurs divs de contenu ou simplement combiner tout ce dont vous avez besoin. Nous verrons plus tard comment utiliser une div de contenu rembourré pour ajouter un peu de séparation entre votre contenu et le bord de l'écran.
Code de curseur
Le curseur Ratchet est composé d'un? Slider? div, qui contient une liste non ordonnée. Encore une fois, assurez-vous que tout cela se passe dans votre contenu div.
Chaque élément de la liste devient une diapositive. Vous pouvez inclure une image et une étendue pour une superposition de texte.
Cela servira comme un élément unique dans notre formulaire. Chaque autre élément aura besoin de son propre? Groupe d'entrée? div. Dans le groupe d'entrée, ajoutez une étiquette et un champ de texte contenant du texte de substitution.
Cela nous donnera un champ pour que l'utilisateur saisisse un nom. Maintenant, répétons ce processus et ajoutons deux champs supplémentaires: email et nom d'utilisateur.
Ratchet prendra en charge et traitera pour nous tout le style compliqué, ce qui nous donne une belle forme sans effort sérieux.
Bouton
Notre page d'application est plutôt belle! A présent, vous devriez avoir une idée assez précise de la façon de lancer et d’utiliser Ratchet par vous-même. Finissons donc cette ventouse avec un élément supplémentaire: un bouton d'envoi.
Ratchet a ces beaux gros boutons, mais par défaut, ils s’étendent sur toute la largeur du conteneur, ce qui n’a pas l’air correct dans cet exemple. En conséquence, nous voudrons implémenter le? Content-padded? classe que j'ai mentionné auparavant.
Insérez cette div à la fin de votre formulaire comme ceci:
Cela nous donnera quelques pixels de rembourrage pour que notre bouton ait de l’espace pour respirer. Maintenant, nous avons juste besoin de placer une balise anchor avec deux classes: button-main et button-block.
Avec ça, notre page est terminée! C'est un prototype assez précis, car tout ce que nous avons fait est de copier, coller et personnaliser quelques extraits de code HTML!
Démo en direct: Cliquez ici pour lancer (devrait être visualisé sur un appareil mobile).
Beaucoup plus!
Gardez à l'esprit que nous avons à peine effleuré la surface de ce qui est inclus avec Ratchet.Il y a beaucoup plus de styles de boutons, d'options de barre de titre, d'autres formes; assez pour vraiment bien démarrer avec un prototype fonctionnel.
Pages de liaison
Aucun prototype d'application d'iPhone en état de marche ne mériterait son prix sans cette fameuse petite transition de page d'iPhone. Heureusement, le fichier Push.js inclus s’occupe de cela pour vous lorsque vous liez des pages ensemble. Vous pouvez même configurer différentes transitions: sans écrire de JavaScript.
Qu'est-ce que je pense de Ratchet?
Trois mots: Ratchet est génial. J'aimerais vraiment voir une documentation plus approfondie et même quelques éléments supplémentaires, mais ce n'est que moi qui souhaite plus d'une bonne chose.
Je n’avais presque aucun problème à me familiariser avec ce cadre. Quelques minutes après votre premier téléchargement, vous construisez d'excellents prototypes fonctionnels. Que pourriez-vous demander de plus?
Le seul problème que j'ai rencontré concerne les légendes des curseurs. Je ne suis pas sûr de ce que je fais de travers, mais je ne parviens pas à faire passer le texte sur la diapositive si je ne fais que suivre les instructions du site Ratchet (quelques substitutions manuelles corrigent les problèmes). A part ça, tout fonctionne parfaitement.
Allez l'essayer!
Maintenant que vous avez vu ce que Ratchet est, ce qu’il peut faire et entendu mon opinion à ce sujet, allez chercher votre téléchargement gratuit. Jouez avec pendant quelques minutes puis laissez un commentaire ci-dessous et dites-nous ce que vous pensez. Avez-vous trouvé d'autres cadres similaires? Comment se comparent-ils à Ratchet?