Si vous avez été sur la scène avec iOS, vous avez sûrement vu apparaître certains des plus beaux sites Web d'applications. Ces dernières ont été publiées au cours des deux dernières années, les développeurs cherchant des moyens d’attirer un potentiel de marketing. Il existe de nombreux modèles d'aspect très standard pour les concepteurs Web - mais j'espère pouvoir aborder quelque chose de nouveau!
Aujourd’hui, nous allons créer un modèle de site Web d’application pour iPhone stylé utilisant HTML5 / CSS3. Cela ne sera pas ciblé sur une application spécifique, nous n'incluons donc pas de lien de téléchargement vers l'App Store. Au lieu de cela, j'ai créé un petit formulaire d'inscription par courrier électronique via MailChimp afin que vous puissiez connecter les adopteurs précoces à l'application pour une pré-version. Ceci est idéal pour les développeurs qui ont besoin de mettre en place quelque chose pour leur produit avant qu'il ne soit commercialisé.
Essaye le
Voir la démo en direct - Source de téléchargement
Toutefois, si vous avez remarqué que la capture d'écran que j'utilise provient d'une application réelle. Il s'appelle Ballin ~ Dribbble pour iPhone et vient de faire son entrée dans le magasin il y a quelques semaines. Cette disposition n'est pas utilisée pour fermer les yeux sur l'application Ballin. J'avais simplement besoin d'une capture d'écran à inclure à des fins de démonstration. Mais n'hésitez pas à utiliser un autre écran si vous copiez le modèle pour votre propre site web.
Commencer
Comme toujours, nous commençons avec une structure de page HTML très simple. Si vous avez vérifié la démo, tout ce dont nous avons besoin est centré dans la page et aligné correctement. Le code n'est pas du tout compliqué! J'utilise le doctype HTML5 standard avec 3 fichiers externes inclus.
Le premier est nos styles global.css dans un fichier alternatif. Deuxièmement, nous avons besoin de la dernière bibliothèque jQuery hébergée via les bases de données Google Code. Et enfin, j'ai ajouté le script de validation de formulaire de MailChimp. Cette balise de script est normalement copiée dans votre corps avec le formulaire d'inscription par courrier électronique, mais pour simplifier le code, je l'ai déplacée dans la tête.
Alors maintenant, concentrons-nous sur les parties du corps. Je vais sauter notre inscription par courriel juste pour le moment afin que nous puissions nous concentrer sur les styles et le cadre simples. Après avoir ouvert le corps, vous remarquerez un identifiant # iphone-preview qui est utilisé pour héberger la capture d'écran iPhone de l'application Ballin '. En réalité, nous n'utilisons que deux images sur cette page Web: l'écran de l'iPhone et notre fond dégradé bleu.
Également en guise de remarque, j’ai utilisé un fichier PSD pour iPhone 4 pour créer le graphique. Vous pouvez le vérifier sur le blog Macristocracy où Jake Moore a offert le PSD gratuit au téléchargement. Ou bien simplement télécharger directement à partir de son lien CloudApp sans visiter la page!
Ci-dessus est un exemple de ce à quoi ressemble ma forme après avoir vidé toutes les foutaises de MailChimp. Il contient toujours une grande partie du code d'origine, mais j'ai déplacé les messages d'erreur au-dessus du champ de saisie principal. Aussi en utilisant le HTML5 espace réservé attribut, nous pouvons ajouter du texte par défaut dans l'entrée de champ de courrier électronique avant qu'un utilisateur clique.
Maintenant, la balise script est l'endroit où les gens ont tendance à se perdre. Si vous remarquez deux scripts, vérifiez si l’un d’eux est le fichier validate.js de la forme jQuery. Si c'est le cas, vous pouvez le supprimer car nous l'avons déjà inclus dans notre en-tête. Tous les autres codes sont réellement utilisés pour vérifier si le formulaire a été rempli correctement. C'est très compliqué si vous ne comprenez pas jQuery, mais heureusement vous n'avez pas besoin de modifier beaucoup de choses ici. Si vous copiez le fichier JS à partir de ma démo ou le téléchargement à partir de MailChimp, des différences peuvent survenir s’ils ont mis à jour le backend depuis cette publication. Pour être prudent, essayez simplement de travailler sur ma démo pour le moment.
Je souhaite attirer votre attention sur un dernier aspect important du code JavaScript. La variable options est utilisée pour transmettre des informations à l'appel Ajax lors de la vérification de la validation. Vous remarquerez une autre URL d'abonnement dans jQuery, mais si vous avez un œil attentif, vous devriez remarquer que ce n'est pas la même URL qu'auparavant!
Il est très important que ces deux URL soient correctement définies. L'action formulaire appelle un URI avec / s'inscrire / poster pendant que l'URL jQuery appelle / subscribe / post-json. Même si vous copiez / collez à partir de ma démo, la mise à jour de ces deux URL suffira pour que le script fonctionne pour vous.
Voir la démo en direct - Source de téléchargement
Conclusion
Cela a été une introduction rapide à la configuration d'un site Web pour application iOS à l'aide de MailChimp. Nous avons téléchargé un PSD pour iPhone depuis Internet et configuré un petit graphique d'application.Nous avons également utilisé des modèles jQuery et CSS3 de base pour créer un fantastique formulaire d'inscription à un courrier électronique à l'aide d'Ajax. Et avec tout cela lié à MailChimp, vous bénéficiez d'un excellent service d'abonnement totalement gratuit.
Faites-nous savoir vos pensées ou questions dans la zone de commentaires ci-dessous. De plus, si vous implémentez le code du tutoriel n'importe où, nous aimerions le voir en direct! Incluez un lien vers votre page Web si vous avez configuré un modèle de modèle d'application pour iPhone ou iPad similaire.