La Gamification pour apprendre plus facilement

Introduction

Vous savez tous que l’on apprend mieux en s’amusant, et certains sites on trouver des solutions pour s’amuser en apprenant à coder du css, du ruby…
Je vais ici vous lister plusieurs sites proposant la gamification pour apprendre.

Css : Css Diner
Ce site vous demande de selectionner des elements visuels sur la table en tapant dans un champ texte le code css adéquat.
Vous avez à votre droite une aide CSS contextuel pour vour aider à passer le niveau.

Le site: http://flukeout.github.io/

cssdiner

Ruby On Rails: Rails for zombies
Ici vous devez manipulez une base de données avec la couche modèle de RoR.
Pour chaque challenge, une vidéo d’explication précède l’exercice.

Le site: http://railsforzombies.org/levels/1/challenges/1

railsforzombies

Expressions régulières: Regex Cross­word
Ici le jeu est différent: vous avez des cases vides qu’il faut remplir en respectant les conditions rédigées en expressions régulières.
Par exemple pour la première case, on a A|Z et A|B, la réponse est donc A

Le site: http://regexcrossword.com/

regexp

Conclusion
N’hesitez pas à partager vos sites de gamification.

Comment choisir son framework php

siteBlogMVC
Introduction
Depuis quelques années, nous avons vu se developper sur notre plateforme php de nombreux frameworks.
Le plus difficile aujourd’hui est de choisir parmi eux.
Jusque là, vous aviez à votre disposition un tableau comparatif: http://socialcompare.com…
Aujourd’hui grâce à l’initiative du site grafikart, vous avez une autre manière de comparer: le projet blogmvc.com (http://blogmvc.com)

Présentation du projet
L’idée est simple: montrer comment coder la même application avec différents frameworks du marché.
Pour cela, l’auteur met à disposition un projet github + des spécifications + une demo HTML du rendu attendu.
Ensuite libre à chacun de proposer une version de ce projet développé avec son framework préféré.
siteBlogMVCgithub
Le projet github: https://github.com/Grafikart/BlogMVC

Les frameworks php présentées actuellement
Actuellement, seuls 5 frameworks php sont représentés:

L’adresse du site du projet:
http://blogmvc.com/

L’adresse du billet expliquant l’initiative: http://www.grafikart.fr/blog/comparer-frameworks-mvc

Présentation des arborescences des 5 projets
Arborescence fermée
blogMVCclosed

Arborescence dépliée
blogMVC

En espérant que cette initiative vous aide à trouver votre framework ;)

note: pour information, le projet n’est pas restreint aux frameworks php (il y a par exemple RoR et Django), libre à vous de proposer votre framework peut importe son langage (ruby, python, perl…)

Retour au menu principal

Développer des jeux web sans flash

Introduction
Il y a quelques années encore, lorsque l’on parlait jeux, il fallait lancer son Macromedia Flash (depuis racheté par Adobe)
Ensuite sont apparus des libraries et autres compilateur pour générer des fichiers swf (flash) sans le logiciel propriétaire (Mstasc, Haxe…)
Aujourd’hui, on peut développer de petits jeux 2D sans flash, grâce à l’HTML5, et pour cela, je vais vous faire découvrir quelques outils/librairies bien pratique

note: je ferais prochainement un article sur Haxe (pas le déodorant)
Mise à jour: billet publié http://blog.developpez.com/ducodeetdulibre/p12151/non-classe/haxe-coder-une-fois-deployer-partout-ou-presque

Le logiciel Construct2
Certains logiciels permettent de faire du wysiwig* à base de drag and drop et de popup de paramétrage de créer des jeux HTML5 en toute simplicité.
Construct2, édité par Scirra fait parti de ces logiciels, il permet bien plus encore: selon la licence utilisé, on peut générer des applications IOS, Windows phone, Android…
Mais ici, interessons nous à sa capacité HTML5: son interface intuitive et assez ergonomique permet facilement de créer ses premiers jeux sans avoir à mettre les mains dans le cambouis
Malheureusement, il n’est disponible que sous windows, je vous invite à le tester si vous avez windows, ou une machine virtuelle tournant sous windows ;)
Le site: https://www.scirra.com/ (regardez la vidéo de démonstration)

*WYSIWIG Why You See Is What You Get (interface qui permet de voir le rendu en temps réel)

La bibliothèque Html5Quintus
Si vous préférez/aimez coder, vous apprécierez plus des librairies HTML5 qui comble le manque de confort de cette nouvelle technologie.
En effet, lorsque vous êtes habitué à faire des jeux sous flash, vous êtes habitué à un minimum de confort: comme créer un clip, le déplacer/le modifier le rendre invisible.
Ici, en HTML5, tout est à gérer: si vous souhaitez créer un objet image et le déplacer vers la droite: il faudra le dessiner sur le canvas, puis effacer le canvas, et le redessiner à sa nouvelle position (d’ou l’utilité d’avoir autant de canvas que d’élements dynamique: un peu comme des calques)
Mais grâce au travail de nombreux développeurs, vous pouvez apprécier des librairies qui vous permettront facilement de faire des animations, de gérer les collisions, mais aussi d’appliquer des lois physiques sur vos élements.
HTML5Quintus a l’avantage de vous permettre de la tester sans l’installer sur leur site:
En effet vous pouvez modifier le code d’un modeste jeu de plateforme pour voir l’incidence sur le jeu: modifier le comportement des ennemies pour qu’ils disparaissent à votre contact, ou placer le chateau directement sur vous pour gagner à chaque fois :)
Cette librairie est très simple à utiliser et vous ravira si vous souhaitez faire de petits jeux 2D bien sympathique

Le cas Turbulenz
Turbulenz est un cas à part c’est un SDK qui utilise majoritairement WebGL et qui peut vous permettre de développer des jeux très puissants comme « Save the Day » https://turbulenz.com/games/save-the-day

Le site: http://biz.turbulenz.com/turbulenz

Conclusion
Comme vous avez pu le voir, vous avez le choix dans les armes pour utiliser votre navigateur comme plateforme de Jeux.
Les avantages sont nombreux:

  • Permettre de jouer sur votre site
  • Multiplateforme
  • Pas d’installation, on peut jouer de n’importe ou sans avoir besoin de droits particuliers
  • Plus facile à promouvoir par son coté web (un lien dans un email/sur twitter et voila)

Bien sur, il existe d’autres librairies, je vous en ai présenté ici un échantillon, mais n’hésitez pas à partager vos ressources ;)
Et vive l’HTML5 :)

Présentation d’un service pour gérer ses commentaires : DISQUS

Lorsque l’on développe un site web, on veut souvent donner la parole aux internautes qui visitent celui-ci.
Dans le cas des blogs, podcasts… on met souvent en place un module de commentaires.

Des commentaires pourquoi faire ?
Lorsque l’on écrit des articles ou publie un podcast, notre premier but est de se faire lire par un maximum de personnes. Les commentaires permettent d’avoir un retour sur ce que l’on publie.
Ils permettent de recueillir des critiques plus ou moins constructives (erreurs, ton…) mais aussi d’avoir un point de vue différent voir des pistes d’éléments complémentaires ou à approfondir qui enrichisse l’article.

Comment mettre en place des commentaires ?
Selon que vous utilisiez un CMS/outil de blogging/service en ligne, beaucoup incluent un module de gestion de commentaire, mais vous n’utilisez pas toujours ce type de produit: vous pouvez développer vous-même votre blog/site ou utiliser un produit ne gérant pas les commentaires et leur modération

Et c’est là qu’intervient DISQUS
DISQUS est un service en ligne de gestion de commentaire: il permet en quelques clics d’installer un service de commentaires sur son site, avec plusieurs avantages:

Ses avantages pour le développeur

  1. facilité d’installation: un simple code javascript à ajouter à son site web
  2. possibilité de mettre en place une modération (tout modérer, avertir de nouveaux commentaires à modérer)
  3. identifier les auteurs de commentaires: les obligeant à se connecter pour poster (via DISQUS/facebook/twitter…)
  4. Fonctionnant en javascript, vous pouvez même l’utiliser sur des pages html ;) (sans php/mysql ou autre base de donnée)

Ses avantages pour les internautes
Ce service a plusieurs avantages pour l’utilisateur, notamment car il est utilisé sur beaucoup de sites

  1. Permet de suivre facilement ses commentaires sur les sites l’utilisant
  2. On peut s’authentifier via son compte facebook/twitter ou créer un compte sur DISQUS
  3. Son compte permet de personnaliser son avatar, le lien vers son site web…
  4. Un peu comme tweeter, on peut décider de suivre une personne, suite à un commentaire pertinant par exemple

Conclusion
Comme vous avez pu le lire, ce service est simple à installer et riche en fonctionnalité, jetez-y un coup d’oeil par curiosité il pourrait remplacer votre système de commentaire actuel ou à venir :)

Le site: http://disqus.com/