Comme je le dis souvent je poursuis le cycle Ingénieur en Informatique du CNAM depuis un peu plus de deux ans. J’avais déjà parlé de cette UE à travers ce post sur une fonction PHP utilisée dans la réalisation d’une photothèque. Je souhaitais ici faire partager les différents liens trouvés et utilisés pour compléter ce cours. Vous trouverez déjà les supports pour l’UE en présentiel sur Lyon sur cette interface. il est possible de consulter les cours en ligne ou de les exporter en PDF avec les liens en bas de page. Comme vous le constaterez les sujets des travaux pratiques qui accompagnent les cours sont aussi disponibles. Dans mon cas je n’ai pas eu à rendre tout les TP, juste le dernier, la Photothèque, mais je les ais tous réalisés ce qui aide vraiment dans la compréhension du cours et dans l’acquisition des connaissances. Je me suis posé la question à savoir si il serait intéressant que je mette en ligne les codes sources des TD réalisés sur un Google Code, ou bien sur un dépôt Subversion (ou autre), mais je n’ai pas encore pu prendre de décision sur ce point. Il y a déjà tellement de codes sources sur la toile que je ne sais si cela aurait un grand intérêt, surtout qu’il est plus formateur de chercher par soit même que de copier du code 😉 Mais si certains pensent que ce serait un plus, n’hésitez pas à laisser un commentaire et je me ferais un plaisir d’étudier cette possibilité 🙂
Pour la partie sur HTML, j’ai peu de liens connaissant déjà ces balises à l’origine. A savoir qu’il vous sera demandé d’être valides xhtml 1.0 strict. Un site simple et qui permet de connaitre les balises avec leurs différents attributs autorisés est celui de w3schools :
Ce que j’apprécie avec ce site, et j’aurai l’occasion de revenir dessus dans la partie sur CSS, c’est aussi le menu de gauche avec les différentes familles ou éléments qui permet une recherche assez rapide. Pour les formulaires (qui sont plus utiles dans la partie PHP qu’ici avec des pages statiques) je reviens souvent au site CCM où ce n’est pas trop mal expliqué, mais il existe aussi pas mal d’autres sites pouvant aider sur cette partie.
Les formulaires HTML sur Comment Ça Marche
Pour la validation de vos pages XHTML, deux solutions, soumettre le fichier en ligne sur le site du W3C (Validateur W3C XHTML) soit en ayant votre fichier sur un hébergement Internet, soit en le soumettant directement par « File Upload ». Une autre solution qui fonctionne en local est d’utiliser le module Firefox Web Developer Toolbar (J’en avais déjà parlé dans ce post avec Firebug que je citerai plus bas). En effet avec ce plugin d’installé, en étant sur la page en question, il suffit de faire Ctrl+Shift+A pour déclencher une validation locale de la page ce qui est bien pratique (surtout quand on génère des pages dynamiquement et que nous sommes en local).
Pour la partie du cours sur CSS je me suis de nouveau beaucoup servis de w3schools. C’est d’ailleurs par cette partie que j’ai connu ce site et que j’ai appris à l’apprécier.
En complément je me suis par la suite aussi servis du tutoriel présent sur EchoEcho.com
Je dirais que ces deux sites sont suffisant et que c’est ensuite une histoire de pratique. Dans le cadre de cette UE la première pratique est la réalisation d’un Curriculum Vitae (CV) en XHTML & CSS (avec les validations bien sûr). Pour valider les pages CSS je me suis toujours servis du validateur en ligne du W3C avec upload de fichier. Comme je fonctionne toujours avec un fichier distinct pour les feuilles de style, c’était le plus simple. Pour analyser les comportements CSS que nous pouvons rencontrer, le module Firebug de Firefox est très pratique. il vous permettra en effet d’analyser votre page blocs par blocs, de voir les styles appliqués sur les éléments qu’ils proviennent de la feuille de style ou qu’ils soient calculés. Enfin vous serez amené à faire de la mise en page avec autre chose que des tableaux HTML (oui je sais que beaucoup disent que c’est démodé mais cela reste plus que pratique et souvent bien plus simple tant que nous n’en cascadons pas trop 😉 ), c’est à dire avec des DIV par exemple, j’ai beaucoup aimé ce tutoriel sur Developpez.com :
DIV et CSS : une mise en page rapide et facile
Bon d’accord il me faudra beaucoup de pratique pour bien maîtriser les DIV et leur positionnement mais c’est déjà un bon début. Pour la partie sur JavaScript je me suis servis de nombreux sites sur Google (tout autre moteur de recherche est bien sur à utiliser aussi, au choix 😉 ), mais le site où je suis le plus revenu est Tout JavaScript et notamment leur documentation en ligne des différentes fonctions avec leurs propriétés et la manière de les utiliser :
Doc JavaScript sur Tout JavaScript
Dans le cadre de cette UE on doit réaliser un convertisseur de devises simple, puis avec le choix des devises en question. On n’intègre pas de PHP ou d’autre fonctions, ni de formulaire HTML, on ne travaille qu’avec CSS, XHTML et JavaScript. Par exemple pour créer les boutons nous jouons uniquement sur les propriétés de style des cellules du tableau comme dans l’exemple ci-dessous :
<td colspan="2" class="bouton" onmousedown="this.style.borderStyle='inset'; this.style.backgroundColor='#AAAAAA';" onmouseup="this.style.borderStyle='outset'; this.style.backgroundColor='#E0E0DA';" onmouseout="this.style.borderStyle='outset'; this.style.backgroundColor='#E0E0DA';" onclick="document.getElementById('de_valeur').innerHTML += this.innerHTML;" >0</td>
Comme je le disais plus haut dans l’article, si il y a des demandes pour le fichier direct, je verrai pour les mettre en ligne mais je vous invite fortement à vous y essayer par vous même. Le cours s’oriente ensuite sur PHP pour la génération de pages dynamiques, mais aussi la gestion d’une base de données comme MySQL pour interagir avec PHP. Attention nous ne sommes pas ici sur une UE pour apprendre le langage SQL ou comment gérer une base de données, voyez plus pour NFE113 ou une autre unité pour cela 🙂 Pour MySQL je vous inviterais tout simplement à consulter leur site / manuel en ligne qui est plus que complet :
Pour PHP je ne connais rien de mieux que leur documentation en ligne afin de connaitre le détail des fonctions, avoir des exemples d’utilisation ou des trucs et astuces.
Il ne s’agit pas d’une UE de développement pur, mais de découverte du Web plus. Il vaut donc mieux avoir déjà des notions de développement ou savoir utiliser ces technologies. Quand on connait déjà un peu la programmation il est tout à fait possible de plonger sur JavaScript ou PHP sinon cela vous demandera un gros travail pour déjà apprendre à développer. Dans ce dernier cadre, ou si vous connaissez un autre langage et souhaitez vous lancer sur PHP je vous inviterais à visiter ces quelques liens :
le Site du Zéro : Concevez votre site web avec PHP et MySQL
le Site du Zéro : La programmation orientée objet en PHP
Vous pourrez trouver bien d’autres tutoriels ou aides via un moteur de recherche, ou en allant sur des sites dédiés au développement comme Developpez.com par exemple. Dan ce cours il n’y aura pas besoin, dans le sujet actuel de la Photothèque, de savoir gérer des sessions ou des cookies mais si cela devenait le cas vous trouverez les liens sur le Net sans soucis 🙂 J’espère en tout cas que ces quelques liens vous auront déjà aidés.
Un complément à ce long article pour les logiciels que vous pouvez utiliser afin de travailler cette UE directement sur votre ordinateur personnel. Attention il est en général demandé de venir avec un ordinateur portable et de travailler sur sa propre machine :).
Éditeurs de texte avancés :
– Notepad++ : Celui que j’utilise le plus sous Windows (oui mon vieux portable est toujours sous XP Pro 😉 ). Très complet avec une bonne coloration syntaxique. J’aimerai même pouvoir l’avoir sur d’autres plateformes avec le temps. Site Officiel.
– Notepad2 : Le léger et sans installation qui peut facilement se substituer au Notepad par défaut de Windows. Assez complet avec la coloration syntaxique aussi, son seul défaut est de ne pas proposer d’onglets pour ouvrir plusieurs fichiers. Site Officiel. Version Française.
– VIM : On a plus vraiment besoin de présenter VI qui est bien souvent l’éditeur le plus utiliser sous Linux (désolé pour les fan de Nano 😉 ). Il existe aussi une version Windows de ce dernier et même si personnellement je n’en suis pas fan il est bon de la connaitre. Et comme nous avons tous des goûts différents 😉 Site Officiel.
IDE :
– Eclipse PDT : Celui que j’utilise le plus, quelque soit le langage. C’est peut-être une question d’habitude mais on s’y habitue bien. Site Officiel. On peut travailler sur de nombreux langage en commençant par Java, ou le C. Pas d’installation, juste une archive à décompresser et ce que ce soit pour Linux ou Windows. A noter qu’il existe aussi une version nommée Easy Eclipse pour le PHP. Avec le temps je préfère PDT pour le PHP que cette autre version. Attention toutefois Eclipse ne gère pas le PHP par défaut, PDT est une version avec des modules complémentaires. Un autre point positif est la possibilité de débugger directement dans l’IDE et son couplage avec XAMPP ou WAMP sous Windows.
– Netbeans : L’autre gros IDE gratuit, il est tout aussi complet et propose lui aussi de très nombreuses fonctionnalités. Je l’ai surtout utilisé pour Java car ses options pour Swing et pour construire une interface sont très pratiques. Presque on se croirait avec Visual Studio pour faire de l’événementiel au lieu de programmation Objet 😉 J’ai dit « presque », ne lançons pas de « Troll » 🙂 Donc très complet aussi et pour de nombreux langages, à vous de choisir celui que vous préférez. Site Officiel.
Il existe bien sûr d’autres IDE payants, gratuits, open-source. N’hésitez pas à chercher via un moteur de recherche et à les tester pour trouver celui qui vous convient le mieux. Un autre avantage des IDE est l’auto-complétion des fonctions, variables, les aides intégrées sur les fonctions et ainsi de suite. Donc une véritable aide pour bien coder et plus rapidement.
Serveur Web et MySQL en local :
Windows :
Je ne ferais pas de description de chacun des logiciels ci-dessous leur fonctionnement étant le même dans l’ensemble et ce qu’il propose aussi. Ils vous permettent d’avoir un serveur Apache avec PHP et un serveur MySQL en local sur votre machine et ce facilement. Cela vous installera aussi PhpMyAdmin pour vous aider à la gestion des bases MySQL. Un plus pour développer et tester en direct ce que vous faites 🙂
– XAMPP : Celui que j’utilise, il se couple bien avec Eclipse. Site Officiel.
– WAMP : Site Officiel.
– EasyPHP : Un ancien et un classique, le premier que j’ai utilisé quand je me suis mis aux technologies Web. Site Officiel.
Linux :
– LAMP : Bon ici pas de secret, installez directement Apache, MySQL et PHP sur votre machine Linux, c’est encore le plus simple 😀 C’est ce que je fais à la maison et j’avoue souvent regretter de ne pas avoir passé le portable aussi sous Linux pour ne plus me prendre la tête 😉
MAC :
– MAMP : Bon je ne suis vraiment pas « fan » des MAC, mais j’ai pu constater que des auditeurs en ont, donc autant aider ceux qui ne connaitraient pas. Comme sous Linux vous avez la possibilité d’installer Apache et MySQL directement ou si vous ne voulez pas vous embêter il y a MAMP. Site Officiel. Bien qu’ils essayent de vous faire acheter la version « PRO », ils diffusent bien une version gratuite 🙂
Voici donc pour cet article sur NFE114. J’espère qu’il vous sera utile que vous soyez auditeur sur Lyon, Rhône-Alpes, ailleurs en France, ou tout simplement en train de vous lancer dans le développement Web 🙂 N’hésitez pas à me faire part de remarques, suggestions pour compléter ce dernier en commentaires 🙂
Annale de l’examen : Une annale de 2008-2009 est disponible sur le site cnamcnam.free.fr. Comme vous le constaterez il s’agit d’un QCM. Ce sujet vous permettra de vous entrainer et d’avoir une idée de ce qui vous attend. Le système de notation est assez simple. Si pour une question nous avons deux réponses, une juste et une fausse, la juste vaudra +1, la fausse -1 et ne rien répondre 0. Si on a trois réponses, une juste et deux fausses, la juste vaudra 1 point, chaque fausse vaudra -0.5 point et ne pas répondre donnera 0 point. Il vaut mieux éviter de répondre quand on a des doutes ou qu’on ne sait pas 😉 A savoir que l’examen final en Rhône-Alpes ne compte que pour 50 % de la note (c’est le projet final qui représente les 50 autres pourcents 😉 ). Vous pourrez trouver d’autres aides ou des annales d’autres régions sur graziaboss.free.fr aussi. Et je pense qu’il doit encore y en avoir ailleurs 😉