| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue65:devweb [2012/10/25 15:37] – frangi | issue65:devweb [2012/10/26 15:16] (Version actuelle) – auntiee |
|---|
| ** | ** |
| |
| Qu'est-ce qu'un CRUD? CRUD est un acronyme pour Create [Créer], Remove [Supprimer], Update [Modifier], Display [Afficher]: le principal postulat de base de toute application. | Qu'est-ce qu'un CRUD ? CRUD est un acronyme pour Create [Créer], Remove [Supprimer], Update [Modifier], Display [Afficher]: le principal postulat de base de toute application. |
| |
| Rappelez-vous, un programme est juste une façon de créer, modifier et afficher des données. Ça n'a pas vraiment d'importance qu'il s'agisse d'une application de bureau, ou même d'un jeu, tout ce qu'elle fait est de prendre des données en entrée, et soit crée, détruit ou met à jour les ensembles de données actuels. | Rappelez-vous, un programme n'est qu'une façon de créer, modifier et afficher des données. Ça n'a pas vraiment d'importance qu'il s'agisse d'une application de bureau, ou même d'un jeu, tout ce qu'il fait est de prendre des données en entrée et crée, détruit ou met à jour les ensembles de données actuels. |
| |
| Pour commencer nous avons besoin d'une idée. Nous pourrions convoquer les suspects habituels: les listes de tâches, les recettes et les listes de courses. Je pensais à quelque chose d'un peu plus spécifique à Ubuntu, une application qui nous dit les versions d'Ubuntu. C'est une idée qui a beaucoup de possibilités de croissance, commençons donc avec elle. | Pour commencer nous avons besoin d'une idée. Nous pourrions choisir les suspects habituels : des listes de tâches, des recettes et des listes de courses. Je pensais à quelque chose d'un peu plus spécifique à Ubuntu, une application qui nous dit les versions d'Ubuntu. C'est une idée qui a beaucoup de possibilités d'élargissement ; commençons donc avec elle. |
| |
| NB: si vous rencontrez des difficultés à choisir un bon éditeur de texte pour coder, je voudrais proposer mon préféré. Sublime Text 2 est un éditeur très riche en fonctionnalités et stable, et j'ai tendance à avoir beaucoup de plaisir avec lui. Je lui fait aussi très confiance. Voici une adresse sur une critique rapide que j'ai faite il y a peu de temps, si vous êtes intéressé à en savoir plus: http://www.aliendev.com/programming/review-sublime-text-2 | NB: si vous n'arrivez pas à choisir un bon éditeur de texte pour coder, je voudrais proposer mon préféré. Sublime Text 2 est un éditeur stable qui est très riche en fonctionnalités et, le plus souvent, je m'amuse beaucoup avec lui. Je lui fais aussi très confiance. Voici une adresse vers une critique rapide que j'ai faite il y a peu de temps, si vous voulez en savoir plus: http://www.aliendev.com/programming/review-sublime-text-2 |
| |
| |
| ** | ** |
| |
| D'abord, nous devons réfléchir aux informations dont nous avons besoin. Le numéro de version et les noms sont de bons candidats pour démarrer le projet. Maintenant que nous savons ce que nous allons faire, nous devons le mettre en place... Créez votre dossier de travail; je vais appeler le mien FCM-UbuntuVers. A l'intérieur de celui-ci, créez vos dossiers css, images, js, et js/libs. Maintenant, créez des fichiers vides: index.html à la racine, style.css dans css, et main.js dans le dossier js. Ci-dessous une capture d'écran de l'arborescence pour vous donner une vue d'ensemble. | D'abord, nous devons réfléchir aux informations dont nous avons besoin. Le numéro de version et les noms sont de bons candidats pour démarrer le projet. Maintenant que nous savons ce que nous allons faire, nous devons le mettre en place... Créez votre dossier de travail ; je vais appeler le mien FCM-UbuntuVers. À l'intérieur de celui-ci, créez vos dossiers css, images, js et js/libs. Maintenant, créez quelques fichiers vides : index.html à la racine, style.css dans css, et main.js dans le dossier js. Ci-dessous une capture d'écran de l'arborescence pour vous donner une vue d'ensemble. |
| |
| Maintenant, nous pouvons commencer quelque codages. Je voudrais commencer avec mon modèle standard HTML5. Le modèle est assez simple, en supposant que vous ayez quand même un peu d'expérience avec HTML5. Il y a d'abord le doctype, avec la valeur unique html pour dire à l'objet document qu'il est, vous l'aurez deviné, en HTML5. Il y a une déclaration UTF-8, une balise de titre, quelques méta-données, un appel à la feuille de style, le corps du HTML, nos balises d'en-tête, d'article, et de bas de page, et bien sûr l'appel au js principal. | Maintenant, nous pouvons faire du codage. Je voudrais commencer avec mon modèle standard HTML5. Le modèle est assez simple, en supposant que vous ayez quand même un peu d'expérience avec HTML5. Il y a d'abord le doctype, avec la valeur unique html pour dire à l'objet document qu'il est, vous l'aurez deviné, en HTML5. Il y a une déclaration UTF-8, une balise de titre, quelques méta-données, un appel à la feuille de style, le corps du HTML, nos balises d'en-tête, d'article et de pied de page et, bien sûr, l'appel au js principal. |
| |
| ** | ** |
| ** | ** |
| |
| Ensuite, nous allons ajouter une forme de base, en veillant à inclure les attributs de son id, ses zones, sa valeur et son nom. Nous voulons aussi inclure des étiquettes pour une bonne pratique. L'exemple HTML complet est là: http://pastebin.com/TtReQAWb. | Ensuite, nous allons ajouter une forme de base, en veillant à inclure les attributs de son id, ses zones, sa valeur et son nom. Nous voulons aussi inclure des étiquettes selon les bonnes pratiques. L'exemple HTML complet est ici : http://pastebin.com/TtReQAWb. |
| |
| Maintenant que nous avons notre code HTML, nous devons nous assurer que nous ajoutons quelque chose pour tester les fichiers CSS et JS qui nous incluons dans le code HTML. Cette tâche est assez facile, il suffit d'inclure une ligne par fichier comme ceci: | Maintenant que nous avons notre HTML, nous devons nous assurer que nous ajoutons quelque chose pour tester les fichiers CSS et JS que nous incluons dans le code HTML. Cette tâche est assez facile, il suffit d'inclure une ligne par fichier comme ceci: |
| |
| main.js | main.js |
| footer { color: #ccc; } | footer { color: #ccc; } |
| |
| Maintenant, il est temps de voir la configuration de votre navigateur. Remarquez l'alerte signalant que le JS a été inclus. Pour le test de CSS, portez votre attention sur le pied de page. La couleur du texte doit être gris clair. | Maintenant, il est temps de voir la configuration de votre navigateur. Remarquez l'alerte signalant que le JS a été inclus. Pour le test de CSS, portez votre attention sur le pied de page. La couleur du texte devrait être gris clair. |
| |
| Maintenant que nous avons tout préparé. Le mois prochain, nous allons analyser le code de plus près. Salut! | Maintenant que nous avons tout préparé, le mois prochain, nous allons analyser le code de plus près. Salut! |
| |
