Full Circle Magazine FR

Outils pour utilisateurs

Outils du site

Piste : • finalisation • c_c
issue65:devweb

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Prochaine révision		Révision précédente
issue65:devweb [2012/10/06 23:22] – créée andre_domenechissue65:devweb [2012/10/26 15:16] (Version actuelle) – auntiee
Ligne 1: Ligne 1:
 +**
 What is a CRUD? CRUD is an acronym for Create, Remove, Update, and Display: the main basic premise for any app. What is a CRUD? CRUD is an acronym for Create, Remove, Update, and Display: the main basic premise for any app.
  
Ligne 6: Ligne 7:
  
 Side note: if you are having troubles choosing a good text editor to code with, I would like to suggest my favorite. Sublime Text 2 is a very feature-packed and stable editor and I tend to have a lot of fun with it. I also rely on it a lot. Here is a URL to a quick review I did a while back, if you are interested in reading more about it: http://www.aliendev.com/programming/review-sublime-text-2 Side note: if you are having troubles choosing a good text editor to code with, I would like to suggest my favorite. Sublime Text 2 is a very feature-packed and stable editor and I tend to have a lot of fun with it. I also rely on it a lot. Here is a URL to a quick review I did a while back, if you are interested in reading more about it: http://www.aliendev.com/programming/review-sublime-text-2
 +**
  
 +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 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 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 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
 +
 +
 +**
 First we need to think about the information that we need to keep. The version number and names are good enough to start off with. Now that we know what we are going to do, we need to get set up... Create your working folder; I’m going to call mine FCM-UbuntuVers. Inside of that, create your css, images, js, and js/libs folders. Now create some blank files: index.html in the root, style.css in css, and main.js in the js folder. Below is a screenshot of the directory map to give you the big picture.  First we need to think about the information that we need to keep. The version number and names are good enough to start off with. Now that we know what we are going to do, we need to get set up... Create your working folder; I’m going to call mine FCM-UbuntuVers. Inside of that, create your css, images, js, and js/libs folders. Now create some blank files: index.html in the root, style.css in css, and main.js in the js folder. Below is a screenshot of the directory map to give you the big picture. 
  
 Now, we can get to some coding. I like to start out with my standard HTML5 template. The template is pretty straightforward assuming you have even a little experience with HTML5. First there is the doctype, with the value of just html telling the document object that it is, you guessed it, HTML5. There is a UTF-8 declaration, title tag, some meta data, stylesheet call, the body of the HTML, our header, article, and footer tags, and of course the main js call.  Now, we can get to some coding. I like to start out with my standard HTML5 template. The template is pretty straightforward assuming you have even a little experience with HTML5. First there is the doctype, with the value of just html telling the document object that it is, you guessed it, HTML5. There is a UTF-8 declaration, title tag, some meta data, stylesheet call, the body of the HTML, our header, article, and footer tags, and of course the main js call. 
 +**
  
 +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 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.
 +
 +**
 Next we are going to add a basic form, making sure to include id’s, placeholders, value, and name attributes. We also want to include labels for good practice. The full HTML example is at: http://pastebin.com/TtReQAWb. Next we are going to add a basic form, making sure to include id’s, placeholders, value, and name attributes. We also want to include labels for good practice. The full HTML example is at: http://pastebin.com/TtReQAWb.
  
Ligne 26: Ligne 44:
  
 Now that we are all set, prepare yourself. Next month, we will go over the code more closely. Cheers! Now that we are all set, prepare yourself. Next month, we will go over the code more closely. Cheers!
 +**
 +
 +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 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
 +
 +alert(‘JS included’);
 +
 +style.css
 +
 +   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 devrait être gris clair.
 +
 +Maintenant que nous avons tout préparé, le mois prochain, nous allons analyser le code de plus près.  Salut!
 +
issue65/devweb.1349558548.txt.gz · Dernière modification : 2012/10/06 23:22 de andre_domenech