Archives par étiquette : nfe114

News en vrac

Un bout de temps que je n’avais pas posté suite à pas mal de travail pour le CNAM entre le début et la fin de l’année ce qui explique la silence entre décembre et janvier. Je profite donc de ce début de WE pour rédiger et planifier quelques articles. J’en profite donc pour refaire un « News en vrac ». Je vais essayer cette année de parler un peu plus de certaines matières du CNAM comme j’ai pu le faire pour le BULATS afin de faire profiter d’autres auditeurs des temps de recherche et des bons sites trouvés à ces occasions. Donc à venir prochainement, le temps que le mette tout cela en ordre 🙂

Un article que j’ai trouvé intéressant de la part de la CNIL sur la réalisation de groupes sur Facebook avec configuration de la confidentialité des diffusions ou des éléments de profil suivant les groupes.


Tutoriel CNIL #1 Créer des listes d’amis sur Facebook
envoyé par cnil. – Les derniers test hi-tech en vidéo.

Je vous invite donc fortement à le visionner et à le mettre en pratique afin de contrôler un tant soit peu tout ce que vous pouvez publier sur Internet et notamment par rapport à votre visibilité sur la toile. Et pour lire l’article original c’est par ici. (PS : si la vidéo ne se joue pas intégrée ici, n’hésitez pas à la visionner grâce au lien en dessous 🙂 ).

Une autre initiative dont je veux parler en ces temps où il vaut mieux faire attention à notre visibilité sur Internet, c’est celle de Yacy. C’est grâce à Korben que j’ai pu m’y intéresser et à avoir plus d’informations. Il s’agit d’un moteur de recherche Peer to Peer qui agrège petit à petit vos recherches sur Internet. En clair cela vous permet d’avoir votre propre moteur de recherche chez vous, sur votre Intranet, mais par la suite de vous connecter aussi à ceux de vos amis ou d’autres personnes. On arrive alors à un réseau d’ordinateurs communicant entre eux, partageant leur agrégation de la toile et s’améliorant au fil de l’eau. Bien sûr il faut que votre instance de Yacy tourne un certain temps avant de pouvoir vous afficher des résultats pertinents mais je trouve que cela voudrait le coup de le tester. N’hésitez donc pas à lire les articles en liens et à le tester. Et si cela vous plait, surtout parlez en autour de vous 🙂

Article sur Yacy sur Korben

Site Officiel de Yacy

A mon tour de le mettre en place et de le tester. Bon d’accord il faudra que je me remette à avoir une machine allumée à temps plein à la maison. En même temps cela irait bien dans un projet de renouvellement de mon poste de travail pour quelque chose d’un peu plus moderne 😉 Je ne me souviens même plus de quand date  mon dernier achat d’un ordinateur neuf 😀 En tout cas ce projet me semble prometteur, surtout quand on se rend compte qu’après avoir orienté les recherches (ce qui peut parfois être géant), le géant Google ne s’est pas gêné pour se mettre à la censure (bon d’accord ils l’avaient déjà fait avec certains pays comme la Chine 😉 ). Restons vigilant si nous ne voulons pas continuer à glisser vers 1984 ou Farenheit 451 😉

Dans une autre lignée, un article du site de l’Agence Nationale de la Sécurité des Systèmes d’Information sur les courriels et leurs risques. Cela prend deux minutes à lire et cela permet d’être au courant des risques qui peuvent se cacher derrière certains courriels.

5 réflexes à avoir lors de la réception d’un courriel

Voici donc quelques conseils qui ne me semblent pas superflus vu le nombre de courriels d’adresses usurpées que je reçois de mes contacts 😉 Pour résumer :

  • Ne pas avoir une confiance aveugle envers l’expéditeur
  • Se méfier des pièces-jointes
  • Ne jamais répondre à une demande d’informations confidentielles
  • Passer sa souris au dessus des liens et faire attention à leur cible
  • Paramétrer correctement le logiciel de messagerie

Une nouvelle sympathique, la publication d’un article sur Alan Clec’h auprès d’autres photographes dans la revue Photographes Magazine n°4. Vous pouvez consulter l’édition sur Calameo. Je sais que je parle souvent de lui mais quoi de plus normal au sein d’une même famille 😉 N’hésitez pas à visiter son site et à aller voir ses derniers travaux 🙂

Enfin deux petites informations propres au Blog et aux derniers articles publiés :

– MAJ de l’article sur exif_read_data pour proposer une solution plus propre de correction du code que le @ (Lien)

– MAJ de l’article sur NFE114 (CNAM) pour ajouter une explication sur l’examen sur Lyon et sur des annales disponibles en ligne. (Lien)

Voici pour cette News en Vrac. Bientôt de nouveaux articles en espérant que je ne m’enfermerai pas trop avec les nouveaux cours 😉

[CNAM] NFE114 Systèmes d’information web

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 :

HTML sur w3schools

XHTML sur 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.

CSS sur w3schools

En complément je me suis par la suite aussi servis du tutoriel présent sur EchoEcho.com

CSS on 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 :

Manuel MySQL 5.0

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.

php.net

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 😉

Fonction PHP exif_read_data et données EXIF erronées

Il peut arriver quand on crée une galerie photo en PHP, ou quand on essaye d’afficher les informations EXIF cachées dans une image ou photographie que nous rencontrions une erreur suite à des données EXIF erronées. Dans le cadre d’un projet du CNAM pour le module NFE114 où je devais réaliser une Photothèque en PHP (cf. le sujet ici), j’ai du afficher une partie des métadonnées EXIF (cf. page Wikipedia) à l’affichage d’une photographie. Je travaillai avec des photographies libres de droits trouvées sur Internet (cf. liens en fin d’article) et j’ai rencontré ce message d’erreur sur une image :

Warning: exif_read_data(20110205224621_11.jpg): Incorrect APP1 Exif Identifier Code in /home/user/workspace/phototheque/picture.php on line 229

En cherchant sur Internet j’ai pu comprendre que ce message pouvait apparaitre quand les métadonnées sont erronées, bien souvent semblerait-il suite à une modification par un logiciel de traitement d’image 😉 J’ai bien cherché une solution qui permettrait de résoudre ce souci mais les données étant erronées et donc non lisibles. la seule solution trouvée est de précéder la fonction PHP  exif_read_data d’un @ afin de masquer le warning. Vous pouvez le constater sur l’exemple de code ci-dessous qui charge les données EXIF dans un tableau.

    //affichage informations EXIF
    $tableau_exif=array();
    //le @ est pour masquer certains warning lors de la lecture d'informations EXIF erronées
    $tableau_exif=@exif_read_data($chemin_photo, 0, true);

Un problème avec cette méthode c’est que nous masquerons aussi les erreurs. Voici donc ci-dessous, suite à une conversation avec un collègue développeur, une solution plus propre :

    $oldErrorLevel = error_reporting();
    error_reporting($oldErrorLevel & ~E_WARNING);
    $tableau_exif = exif_read_data($chemin_photo, 0, true);
    error_reporting($oldErrorLevel);

Comme vous pouvez le constater nous jouons sur le niveau de finesse au niveau des retours de la fonction en masquant les warnings mais en conservant l’affichage des erreurs éventuelles. Une fois la fonction passée nous pouvons revenir dans le mode précédent. A noter que nous pourrions aussi appliquer cette méthode à toute la page au passage en production si nous le souhaitions mais serait-ce le plus sage ? Bon un autre conseil, prévoyez de nombreux tests sur le tableau récolté afin de vous assurer que les clefs de tableau existent, et de même pour les différents contenus que vous souhaitez afficher 🙂

Et ainsi que indiqué en début de post, voici une série de liens, non exhaustive bien sûr, pour obtenir des images libres de droits ou gratuites pour vos différents travaux ou besoins :

http://openphoto.net/
http://imagebase.davidniblack.com/main.php
http://www.photo-libre.fr/
http://photos-free.net/
http://www.freerangestock.com/
http://www.everystockphoto.com/
http://www.gettyimages.fr/

Bonne visite de ces liens en tout cas si l’astuce PHP ne vous est pas utile 😉