Jeux vidéo indépendants [Mac, PC, iOS]

Développement de jeux vidéo & actualité sur les jeux vidéo indépendants - Frogames.com le blog de MathieuFROG.

10 ans

Mercredi 3 décembre 2014 à 0:53

Je pique l’idée à channie, il est temps de fêter les 10 ans de ce blog.

J’avais ouvert ce blog 2 ans après le lancement officiel de Frogames, Christophe et moi travaillions sur notre premier jeu vidéo : MiniOne Racing. Nous étions jeunes et cons fous, réaliser un jeu de course multi-joueurs (LAN/internet) nous semblait parfaitement adapté à notre inexpérience !

Durant ces 10 années j’ai écrit pas mal de bêtises sans grande importance :

J’ai également publié quelques articles intéressants, en tout cas je n’en ai pas trop honte encore aujourd’hui :

Oui, je vous ai beaucoup (trop) abreuvés d’auto-promo Frogames et de mes projets parallèles !

Pendant l’année 2008 j’ai également écrit 55 articles de [vrac], ça m’a pris beaucoup de temps mais ça m’a pas mal marqué donc j’imagine que ça valait le coup. C’est dommage que toutes les images hébergées sur uppix.net aient sautées…

Please enable Javascript and Flash to view this Flash video.

Terminons avec cette magnifique phrase écrite par mes soins il y’a 9 ans et 361 jours.

capture-de28099ecran-2014-12-01-a-092524

En relisant ça j’ai bien rigolé : j’ai une tendinite au bras droit qui traine depuis 3 ans et dont j’aurais probablement les séquelles toute ma vie, douce ironie. Finalement en 10 ans il n’y a eu que peu d’avancées dans les interfaces hommes-machines pour le grand public, j’ai bien fait de ne pas me couper les mains si précocement !

Les inscriptions pour l’IGF 2015 (Independent Games Festival) sont ouvertes depuis 3 semaines, vous avez jusqu’à fin octobre pour proposer votre jeu vidéo. Je pense que c’est le bon moment pour vous donner quelques conseils suite à ma modeste expérience en tant que participant puis juge.

igf14_510x1881

En 2008 nous avions soumis Penguins Arena pour l’IGF, nous n’avions pas forcément de grandes ambitions mais comme notre jeu proposait un certain nombre d’innovations de gameplay (pour un FPS) nous avons voulu tenter notre chance.
Nous avions été extrêmement déçus lorsque nous nous sommes aperçu que notre jeu n’avait été testé par un seul juge pendant quelques minutes… Comme beaucoup de développeurs ces dernières années j’étais un peu en colère contre l’organisation de l’IGF, mais depuis ils ont fait un gros travail en interne pour éviter que ce genre de problème se renouvelle.

IGF pavilion GDC 2012 - © Jonathan Brodsky

IGF pavilion GDC 2012 - © Jonathan Brodsky

L’année dernière ils ont proposé pour la première fois à tout personne intéressée de s’inscrire pour devenir juge. J’ai eu la chance d’être sélectionné et d’avoir fait partie des 375 judges de l’IGF 2014.

La fin d’année 2013 a été pour moi passionnante et épuisante. En quelques semaines nous devons tester et donner notre avis sur un maximum de jeux parmi les 656 soumis. Je n’ai pas beaucoup dormi pendant cette période-là mais j’ai réussi à juger 74 jeux. Ca a été l’une de mes meilleures expériences vidéo-ludiques de ces 10 dernières années.

Fort de cette double casquette ”juge-développeur” je vais me permettre de donner quelques conseils pour ceux qui veulent soumettre leur jeu à l’IGF 2015.

Vous êtes mal barrés si :

  • Votre jeu prend du temps pour être testé correctement
    Le premier jeu auquel je devais jouer est un jeu type « livre dont vous êtes le héros » de 250 000 mots sur le thème du catch. Je n’invente rien. Le pire c’est que je suis sûr que c’est un très bon jeu dans son genre, il est très bien noté sur l’App Store, ces dévelopeurs sont des spécialistes de ce type de jeux, etc… Mais voilà, on a des centaines jeux sous les yeux et seulement 3 semaines pour les tester.
  • Votre jeu est trop moyen
    Prenez 10 minutes pour comparer votre jeu aux finalistes des années précédentes. Si vous sentez que votre jeu n’est pas au niveau des ”mentions honorables” alors ne soyez pas déçus lorsqu’il ne sera pas sélectionné.
  • Votre jeu est nul
    Ca nous est tous arrivés de faire des jeux en dessous de la moyenne ou n’apportant pas grand chose de nouveau. Soyez honnêtes avec vous-même, est-ce réellement la peine de le soumettre à des compétitions comme l’IGF ?  (la réponse est “non”).
  • Votre jeu propose des IAP
    Je n’ai pas particulièrement envie de prendre des pincettes, alors j’y vais franchement : je ne crois pas avoir vu un seul jeu ayant des IAP qui soit intéressant. C’était vrai pour les jeux en compétition, ça l’est aussi bien souvent pour les jeux qu’on trouve sur mobile. Dans 95% des cas les IAP influencent les mécaniques ou la façon dont vous avez construit votre jeu. Que vous le vouliez ou non. Les 5% restants concernent les achats de chapeaux.
    Note sur le même sujet : si ce n’est pas déjà fait regardez cette talk de Jonathan Blow, ”The Medium is the Message” https://www.youtube.com/watch?v=AxFzf6yIfcc

Dans tous ces cas de figure n’attendez pas grand chose de l’IGF mais ça peut néanmoins être une bonne aventure : vous serez listés sur le site officiel, certains sites parleront peut-être de vous (souvent rien de plus qu’un screenshot et de la description de votre jeu), et, dans le meilleur des cas, vous aurez des feedbacks de la part du jury.

Ca peut valoir les $100 demandés pour participer !

Maintenant je dois avouer qu’en tant que juge ça m’a fait parfois pester de me forcer à prendre du temps pour des jeux qui, très clairement, ne rentrent pas dans le cadre de l’IGF.


Vous avez une chance :

  • Même si votre jeu n’est pas terminé
    On voit régulièrement des finalistes dont les jeux sont loin, voir très loin d’être terminés.
  • Si votre jeu est sorti avant l’IGF et a déjà eu un peu de promo
    Des jeux sont assignés à chaque juge mais chacun peut aller télécharger d’autres jeux (dans une certaines limite) mais surtout ils peuvent très bien noter des jeux sans qu’ils leur soient assignés ou qu’ils les téléchargent. C’est pourquoi des jeux qui sont sortis depuis quelques mois et ont déjà eu une bonne visibilité vont probablement avoir de nombreux votent de la part des juges. Si cela ne permet de gagner l’IGF cela renforce les chances d’être parmi les finalistes.

Nuovo Finalistes

Nuovo Finalistes

Que vous ayez une chance ou pas voici quelques conseils en vrac

  • Si vous avez un moteur qui le permet téléversez vos builds Mac/Linux en plus de votre version PC ! C’est vraiment dommage de se priver d’éventuels votes juste par fainéantise. Sans rentrer dans les détails les jeux les plus commentés étaient souvent disponibles sur Mac et PC, je ne pense pas que ce soit un hasard.
  • Si vous utilisé le Unity3D vous pouvez soumettre une version Web mais envoyez également des builds Mac/PC/Linux. Les juges n’ont pas forcément envie d’être connecté à internet pour jouer à votre jeu.
    Bref, pensez à uploader votre jeu pour un maximum de plateformes, ça ne peut que vous aider. Pour l’anecdote l’un des potentiel favoris (soutenu par l’Indie Fund) a proposé uniquement une version Mac de son jeu pendant les 2 premières semaines de compétition… alors que le jeu est fait avec le Unity3D ! O_o C’est fort dommage.
  • Vous avez la possibilité d’écrire une petite notes à l’intention des juges, faites-le ! Expliquez qui vous êtes, comment le développement s’est passé, si le jeu est fini ou pas, pourquoi votre jeu vaut le coup d’être joué.
  • Proposez des builds avec cheats si vous avez peur que les juges n’aient pas le temps d’accéder à des parties intéressantes de votre jeu.
  • J’oublie parfois de lire les notes des développeurs destinées aux juges mais j’ai toujours lu les readme.txt qui accompagnaient les jeux. On y trouve souvent des infos sur l’état actuel du jeu et également sur la façon d’y jouer (configuration du clavier, manette supportée, …)
  • Ce n’est peut être pas le cas de tous les juges mais dans mon cas j’ai apprécié avoir, parfois, une indication de la part des développeurs concernant le temps moyen qu’il me faudrait pour arriver à la fin du jeu. Je trouve que cela permet de jouer dans de meilleurs conditions.
  • Si vous hébergez votre jeu pour les juges prévoyez un hébergement correct. Quand il est 23h30 et que je vois qu’il me reste 1h15 pour télécharger une démo à 22ko/s j’ai bien envie de cliquer sur ”annuler” et de passer à un autre jeu…
  • N’obligez pas les joueurs à utiliser un gamepad, encore moins un gamepad spécifique (uniquement Xbox 360 ou PS3), encore une fois vous vous fermez des portes.
  • Répondez aux questions du jury ! Et n’attendez pas 3 jours pour le faire ! Si une personne du jury vous pose une question c’est probablement qu’il rencontre un problème technique, et il est certainement pas le seul à le rencontrer. Plus vous attendez plus les membres du jury vont passer à d’autres jeux.
  • A la fin du concours vous allez recevoir un certain nombre de commentaires de la part des juges qui ont pu tester votre jeu. Vous allez en detester les trois quart mais dites-vous bien qu’ils sont très importants : ils reflètent l’opinion sincère de personnes qui n’ont pas à vous brosser dans le sens du poil. Ce genre d’avis est rare !

IGF Awards 2014 - © GDC

IGF Awards 2014 - © GDC

PS 1 : En terminant cet article je viens de trouver celui de Robert Yang sur lequel vous trouverez des conseils similaires, je vous invite donc à le lire également.

PS 2 : Je cherche une bonne âme pour m’aider à traduire cet article en anglais…

PS 3 : Evidement si vous avez des questions auxquelles je ne réponds pas dans cet article c’est le moment de me les poser.

touch.gg - ça avance…

Vendredi 6 juin 2014 à 17:33

Le mois dernier j’ai pris quelques heures sur mon temps libre pour avancer un peu ce projet (voir mon précédent article).
J’étais presque tenté de laissé vivre mourir le site, mais finalement je me suis dit qu’il y’avait encore quelques pistes intéressantes à travailler. En plus ça ne pourra pas faire de mal à mon CV d’avoir un projet web comme celui-là mené à terme.

L’idée de base du site est en place : on peut bookmarker des applications iOS et suivre les baisses de prix.

track_price_drop_for_ios_apps_games

http://touch.gg

Ca fonctionne bien et maintenant je vais travailler sur :

  • la création et le partage de listes par les utilisateurs (idéal pour partager à vos Twittos votre liste des clones les plus idiots de Flappy Bird)
  • outils pour suivre les baisses de prix (alertes par mail)
  • la mise en avant sur le site des meilleures listes
  • le reste est par là

Idéalement j’aimerais bien me rapprocher d’une structure existante (type gros site d’actus ou appli ayant déjà une large base d’utilisateurs) pour faire avancer le site car je sais que sans ça le site ne décollera pas. Mais bon, je rêve un peu…

Bookmarkez les jeux iOS qui vous intéressent

Jeudi 24 avril 2014 à 21:07

Souvenez-vous, il y’a un peu plus d’un an je travaillais sur le site touch.gg.

Le site n’a absolument pas trouvé son public, c’est un bel échec. Néanmoins il m’a permis d’atteindre l’objectif que je m’étais fixé : me remettre à niveau en développement web front-end. Cela m’a également permis de mettre de côté l’idée de ce site qui me trottait dans la tête, ça marche pas, tant pis au moins je suis allé jusqu’au bout et je peux arrêter d’y penser toutes les 5 minutes !

La semaine dernière j’ai décidé de repartir sur un petit projet web : une application qui permet de “bookmarker” des jeux et applications iOS.
Trois objectifs cette fois-ci :

  1. Me remettre à niveau sur des technologies basiques (PHP, JS, Less)
  2. Réaliser l’application la plus simple possible
  3. Pousser l’idée de départ pour en faire quelque chose de vraiment utile

Après quelques jours de travail j’ai enfin une version Alpha qui fonctionne et que je peux mettre en ligne.
Au revoir “touch.gg - The Best of iOS gaming at your fingertips”, boujour “touch.gg - Bookmark iOS apps/games, create wish lists and track price drop” !

Les fonctionnalités actuelles :

  • Recherche rapide dans la base des applis iOS (j’étais parti pour ne prendre que les jeux mais finalement c’était bête de ne pas l’étendre à toutes les applis)
  • Fonctionne sur tous les navigateurs/machines (Responsive Design).
  • Pas besoin de compte ! Vous pouvez l’utiliser immédiatement.
  • Si jamais vous voulez partager vos bookmarks sur plusieurs machines (à la maison, au boulot, sur votre iPhone…) il faut donner votre email, mais pas de mot de passe. Ouais je me suis bien embêté à faire un système pasword-less.
  • L’application recherche les baisses de prix.
  • Il y’a un système de presentation de trailer des applis/jeux que vous ajoutez. Il me reste à trouver un moyen de l’alimenter…
  • J’ai tout fait pour que ce soit ultra rapide, ça devrait se ressentir. Enfin je l’espère.

Et voici un petit aperçu des fonctionnalités à venir : http://touch.gg/about.php

Touch.gg - bookmark iOS apps

C'est moche mais ça fonctionne !

touch.gg - Bookmark iOS apps/games, create wish lists and track price drop

Nouveau projet + Greenlight + Out There

Samedi 22 mars 2014 à 13:58

Nouveau projet

Après 2 années sans réel projet pour cause de “pas le temps/tendinite” je commence tout doucement à retrouver suffisamment de forces pour me lancer dans une nouveau projet avec Christophe. Sans dévoiler trop vite le sujet même du projet sachez qu’il tournera autour des jeux de société.

J’ai pu prendre quelques heures ces dernières semaines pour commencer un prototype qui est, pour le moment, plus proche d’un Proof of Concept que d’autre chose.

embed_mathieufrogames_s_post_on_vine

Greenlight

J’en parlais dans mon dernier post, on a décidé de tenter une petite expérience sur Greenlight en y publiant un petit jeu pour enfants que l’on avait sorti il y’a 2 ans sur iOS.

Voilà les statistiques pour ceux que ça intéresse :

greenlight

Au bout de deux mois Discovering Colors - Animals est donc 40e sur les 50 logiciels actuellement présents sur Greenlight. La validation des logiciels semble être soumise à des règles particulièrement obscures, certains logiciels étant validés après seulement 3 jours, d’autres au bout d’un an sans qu’ils ne soient particulièrement bien placés dans le classement. On verra bien où ça nous mène… en attendant vous seriez tout-choupi-tout-plein si vous nous accordiez 30 secondes pour voter pour nous.

Out There

Faites-vous plaisir, payez-vous Out There (iOS/Android).

YouTube Preview Image

Après avoir suivi le développement pendant ces 12 derniers mois je suis super content de la réception faite au jeu de Michael/FibreTigre. L’alignement d’étoiles nécessaire pour être remarqué pour un jeu mobile s’est produit, c’est un vrai beau succès ! Mais attention c’est loin d’être qu’une question de hasard : le travail derrière a été important et Michael a très bien géré la comm des premiers mois. Encore une preuve par l’exemple que la communication est le nerf de la guerre pour les indés.

Le carnet de bord de FibreTigre est à lire pour qui s’intéresse un peu au développement de jeux indépendants.

On est dans le Top 50 de Greenlight !

Lundi 20 janvier 2014 à 9:44

Bon, okay, y’a une petite astuce : on est 50e sur 50.
Allez voter et je vous explique.

steam_greenlight____discovering_colors_-_animals

C’est bon ? Ouais je sais que vous avez pas voté, mais c’est pas bien grave…

Depuis 2 semaines on a décidé de retravailler un petit peu notre jeu pour enfants “Discovering Colors - Animals” qu’on avait sorti il y’a deux ans sur iOS. Profitant de cette petite mise à jour on a également soumis le jeu à Apple pour le Mac App Store.
Il y’a quelques jours m’est venu une lubie : soumettre DC-A à Greenlight. Ca parait complètement idiot car aucun jeu de ce type n’a été publié sur Steam mais j’avais lu que Valve était prêt à diversifier son offre et avec l’apparition du catalogue “Software” je me suis dit que c’était peut être le bon moment. Entre temps un gars de Valve m’a confirmé qu’on pouvait soumettre DC-A a Greenlight, alors tentons l’aventure !

L’astuce consiste donc a publier DC-A dans la catégorie “Software” (/ éducation), la catégorie Jeux n’ayant aucune sous-catégorie convenant à notre jeu. Cette partie de Greenlight nous parait également moins hostile pour ce genre d’expérimentation.

steam

Voilà mes loulous, on vous tiendra informé (du probable échec) de notre aventure dans quelques semaines.

IGF 2014 - Sandbox project [site web]

Vendredi 25 octobre 2013 à 13:22

La liste complète des jeux soumis à l’IGF 2014 a été dévoilée hier.
658 jeux sont en complétion cette année, on pouvait s’en douter c’est une nouvelle fois un record. Pour rappel il y’avait 586 jeux pour l’IGF 2013 et 567 pour l’IGF 2012.

C’est Matthew Wegner qui, en plus de bosser sur Aztez, s’occupe des développements web autour de l’IGF. Hier soir il a mis en place un flux JSON référencent l’ensemble des jeux soumis.
“Chouette ! Je vais pouvoir m’amuser un peu avec” - me suis-je dit hier soir à 21h… comme si je n’avais rien d’autre à faire… Enfin bref, 3h plus tard j’ai réussi à faire ce que je voulais : une petite application pour voter et voir l’ensemble des jeux rapidement.

igf_2014-2

http://igf.touch.gg

C’est moche mais c’est pas le plus important pour l’instant, si vous voyez ce que je pourrais faire d’autre dites le moi, je suis preneur de toute idée !

Matthew avait d’ailleurs un peu parlé sur son blog du backend de l’IGF, et comparé le développement web et le développement de jeux. Si ça vous intéresse son article est ici.
Il avait également montré l’outil utilisé par les juges pour voter :

YouTube Preview Image

Précédemment : développement et optimisations (web)

J’ai volontairement laissé passer quelques semaines depuis le dernier article pour pouvoir tirer de premières conclusions sur la réception de http://touch.gg
Mais avant ça voyons ce que j’ai fait pour communiquer sur le lancement du site.

Communication

«Un site sans public, c’est triste.»

Deux semaines avant le lancement officiel du site j’ai passé plusieurs heures à récupérer les contacts de sites anglophones et francophones qui pouvaient être intéressés par un site comme le mien… en tout cas c’est ce que je pensais. Je n’ai finalement rassemblé qu’une grosse trentaine de contacts car la plupart des sites qui me venaient à l’esprit n’ont aucun intérêt à parler de touch.gg (pourquoi toucharcade.com parlerait de l’ouverture d’un site “concurrent” ?).
Autant vous dire que ma liste est éclectique, ça va de venturebeat.com à gonzague.me !
J’ai donc envoyé un mail à tout ce petit monde… sans résultat, puis une petite relance… sans effet.

Sur Twitter quelques amis on gentillement RT mon annonce d’ouverture du site.

±20 RT en tout mais finalement peu d'impact

±20 RT en tout

J’ai également posté un lien sur Reddit dans r/iosgaming.

19 upvotes c'est peu mais finalement pas si mal pour r/iOSgaming

19 upvotes c'est peu mais finalement pas si mal pour r/iOSgaming

J’ai également tenté une technique que je déteste mais peut parfois porter ses fruits : follower des twittos importants en espérant qu’ils vous remarquent et parlent de vous. J’ai arrêté cette idiotie après mon 100e following. Las.

J’ai remarqué qu’il me restait quelques dizaines d’euros sur mon compte Facebook Ads, j’ai donc testé deux types de pubs tout en sachant que ça ne valait pas beaucoup plus que distribuer des tracts dans la rue. Néanmoins ça m’a permis de redécouvrir les différentes options avancées de création d’une publicité Facebook, je me demande si ça ne vaudra pas le coup un jour de cibler des employés d’Apple pour tenter de promouvoir un de nos prochain jeu iOS. Oui car Facebook Ads permet de cibler les employés d’une boite ou les étudiants d’un collège en particulier ! En tout cas c’est ce qu’ils disent.

Pour la petite histoire voici qui je me suis amusé à cibler pour ma pub :

capture_d_ecran_13_06_13_22_09

Le résultat a sonné tel un coup de trique : 2 likes pour $10 de publicité (j’en rigole encore…).

Intermède : petite histoire.

Début juin je tombe sur ce joli GIF de @corentin_lamy, je le poste sur Reddit r/gaming. 3h et 3500 upvotes plus tard le post est en frontpage de Reddit !
En commentaire j’avais correctement sourcé le GIF ce qui m’a valu un gros paquet de karma comment, j’en ai donc profité pour le hijacker mon commentaire et faire un peu de pub pour touch.gg. Ouais je suis une sacré enflure.

Cela m’a au moins permis de vérifier la solidité du site, le site ne bronche pas même avec 300 visiteurs dessus plus ou moins au même moment (dixit Google Analytics). J’aurais au moins réussi quelque chose :)

Certains commentaires sur ce thread de Reddit sont intéressants, globalement une chose revient sans arrêt : beaucoup de personnes trouvent le site moche.
A force d’avoir des commentaires négatif sur le design du site je me demande si le rejet qu’il provoque n’est pas tel que cela a un vrai impact sur l’engagement des visiteurs.

The Reddit Effect

The Reddit Effect

Réception

Le lancement a été très difficile, il m’a pris beaucoup de temps pour quasiment aucun résultat. Les statistiques du premier mois sont sacrement tristes.

La majorité des visiteurs viennent de ce blog, de mon post sur r/IOSgaming et de mes quelques RT sur Twitter.

La majorité des visiteurs viennent de ce blog, de mon post sur r/IOSgaming et de mes quelques RT sur Twitter.

Autant je pense qu’un site comme celui-là peut intéresser de nombreuses personnes, autant cela n’intéresse personne d’en parler.

J’ai pas assez de recul pour me rendre vraiment compte de ce qui peut bloquer les gens d’en parler, le site est peut être trop cheap ou dégage un sentiment de déjà-vu ?

Quoiqu’il en soit j’en retire une bonne leçon : avoir un peu de presse lorsqu’on sort un jeu c’est pas trop compliqué, avoir un peu de presse lorsqu’on sort un site… c’est une autre histoire !

Bonus

Faire tourner touch.gg me coûte : Hébergement (12*10€) + Nom de domaine (60€) = 180€ / an
C’est tout à fait raisonnable pour un petit projet comme celui-là et c’est de tout façon négligeable vis-à-vis du temps que j’y ai investi.

Même si le site n’intéresse pas grand monde je compte bien le faire vivre pendant encore quelques années, à un moment donné ce serait bien qu’il se finance lui-même. Comme je n’ai aucune envie de “trahir” l’esprit du site en ajoutant de la publicité pour des jeux de merde développés par de grosses boites, j’ai choisi la solution qui me paraissait la plus juste : faire payer Apple.
J’ai donc mis en place des liens affiliés sur l’ensemble du site. Je ferai peut être un article à ce sujet si la situation du site évolue mais pour l’instant ce n’est pas très intéressant.
Si ces histoires d’affiliation iTunes vous intéresse je vous encourage à lire cette FAQ et je vous invite à rejoindre soit http://georiot.com soit http://afflr.com (ce type de service me laisse rêveur : ça répond à un vrai besoin et ils peuvent se faire des couilles en or).

Note : j’ai regroupé l’ensemble de précédents articles concernant touch.gg sur cette page.

Précédemment : intro & partie technique

CMS

J’utilise SPIP depuis des années et ce projet me permet de me mettre à jour sur certaines fonctionnalités de la version 3.X de ce CMS.

Quelques avantages :

  • C’est un CMS simple, robuste et très bien conçu. Il n’est pas parfait mais je le porte dans mon coeur depuis des années.
  • Il est bien sécurisé et n’étant pas très répandu il ne risque pas de faire l’objet d’une quelconque attaque.
  • La boucle DATA me permet de travailler sur le flux JSON de l’AppStore très facilement.

Outils

MAMP pour le développement sur ma machine perso, Sublime Text pour l’édition du code et Pixelmator les 2 images que je vais avoir à créer.

CSS / JS

Vu que le site s’adresse en particulier à des utilisateurs d’iPhone/iPad je me devais de le rendre le plus accessible possible sur ces machines.

Voilà une parfaite excuse pour me mettre à niveau sur un truc très à la mode ces deux dernières années dans le milieu du web : le Responsive Design.

C’est bien la première fois que j’avais envie d’en faire, jusqu’à présent c’était pour moi une expression à la mode que des clients mettaient dans leurs appels d’offres sans trop savoir ce que ça pouvait impacter sur leur site, les budgets ou si ils en avaient vraiment besoin.

Bref, j’ai pris comme base le framework Kube.css qui à l’avantage d’être léger et de ne pas trop s’éloigner de ce pourquoi il est fait : une très bonne base pour commencer un site en RWD.

Au niveau des scripts JS il n’y a rien de très folichon hormis :

  • FastClick - une librairie qui permet d’éliminer de délais de 300ms entre le moment ou on touche l’écran d’un appareil mobile et où le clic est pris en compte.
  • OffCanvas-nav - un superbe menu ultra rapide car il est animé avec des transitions CSS plutôt qu’en JS. Combiné à FastClick c’est très chouette !

Je ne sais pas trop quoi dire de plus sans rentrer trop dans les détails. Si vous avez des questions n’hésitez pas à me les poser.

Sur la page About this website vous trouverez un changelog assez light du site depuis sa version Beta, il est accompagné de screenshots d’anciennes versions du site… si vous avez envie de vous marrer…

Optimisations

J’ai voulu aller le plus loin possible au niveau de l’optimisation du serveur et de mon application, plus par défi personnel que pour autre chose.

J’ai usé et abusé de GTmetrix pour mesurer la performance de mon code HTML, l’idée étant d’avoir le meilleur score Page Speed & YSlow possible.

Pour cela :

  • mes CSS et JS sont minifiés et combinés
  • mes requêtes HTTP sont réduites au minimum vital
  • mes images très compressées (JPEG à 40% mais de tailles importantes pour un rendu correct sur écrans retina)
  • tout est GZIPé au niveau du serveur
  • la mise en cache des navigateurs est sollicité par des directives Apache
  • j’utilise plusieurs sous-domaines pour dispatcher les requêtes des navigateurs sur mes medias (images/css/js)

http://html5boilerplate.com a été une très bonne source d’inspiration et de conseils.

J’obtiens des scores très corrects (82%-85%), si je ne gérais pas les images retina (ou si je le faisait d’une autre façon) j’obtiendrais très aisément un score au dessus de 90%.

Autre outil intéressant pour mesurer les performances de son site : blitz.io.

Du côté du serveur cela a été un peu plus compliqué, comme je l’ai expliqué précédemment je me suis concentré sur le module PHP “MPM-worker” pensant qu’il serait la réponse à tous mes besoins.

Au dernier moment, deux jours avant la sortie officielle du site, j’ai décidé de tester le reverse-proxy Varnish. Je pensais m’embarquer dans quelque chose qui allait me prend beaucoup de temps et me rajouter du travail mais il en a été tout autre. En un quart d’heure Varnish était installé et configuré, tournait correctement, et les performances étaient au-delà de mes espérances !

150 utilisateurs simultanément et le serveur ne répond plus qu'avec un délais de 600ms

Avant Varnish - 150 utilisateurs simultanément et le serveur ne répond plus qu'avec un délais de 600ms

Après Varnish

Après Varnish - 250 utilisateurs simultanément, réponse du serveur en 100ms !

A suivre : communication et réception du site.

touch.gg

http://touch.gg

http://twitter.com/touchGG

touch.gg - Intro & partie technique

Vendredi 26 avril 2013 à 14:07

Fin 2012 j’ai eu une nouvelle idée de site internet. C’est pas la première fois, mais cette fois-ci les astres s’alignaient enfin pour que je m’y mette :

  • contrairement à d’autres idées que je traine depuis des années celle ci est relativement simple à mettre en place
  • j’ai pris une grande claque en 2012 en suivant le blog et les tweets de Anahkiasen, faire mon propre site est l’occasion parfaite pour me remettre à jour sur un tas de trucs
  • ma tendinite qui ne me lâche plus depuis deux ans m’empêche de me lancer dans le développement d’un nouveau jeu mais m’autorise enfin à passer quelques heures par semaines sur le développement d’un site

Me voilà donc lancé dans le développement d’un site sur une idée ultra simple : proposer les meilleurs jeux iOS disponibles, et uniquement la crème de la crème !

Pour en savoir un peu plus sur ma démarche et sur la philosophie du site je vous laisse lire cette page d’information.

Partie technique

Voilà un domaine dans lequel j’avais peu d’expérience, cela s’avérera être une partie des plus intéressantes pour moi.

Serveur

Je voulais avoir la main sur l’ensemble du serveur, je me suis donc tourné vers un VPS qui me permet d’avoir l’équivalent d’un serveur perso mais à moindre coût. J’ai passé de nombreuses heures à chercher le bon hébergeur, je me suis finalement fixé sur un hébergeur travaillant exclusivement avec des disques SSD : Ramnode (lien affilié, lien classique). Cela n’avait finalement que peu d’importance au final (on verra plus tard pourquoi), néanmoins je suis content d’avoir trouvé ce petit hébergeur “familiale”, il fait du très bon boulot !

Quelques stats sur cet hébergeur : http://serverbear.com/622-1024mb-svz-ramnode

Installation

Ne connaissant pas grand chose aux différentes distributions Linux je me suis laissé guider vers Ubuntu.

S’en est suivi les étapes classiques d’installation d’un serveur LAMP, étant relativement novice dans la gestion d’un serveur j’ai pris soin de noter toutes les étapes et de me renseigner sur internet avant chacune d’entre elles.

webmin/sqlite/phpmyadmin/imagemagick/…

J’ai ensuite passé de nombreuses heures à essayer de configurer Apache au mieux, l’objectif étant d’avoir un serveur suffisamment robuste pour accueillir une centaine de visiteurs simultanés. Je me suis donné cet objectif comme un exercice d’apprentissage sachant très bien que je n’avais que peu de chance d’avoir autant de visiteurs sur mon site.

J’ai choisi d’utiliser le module “MPM Worker” pour Apache puisque c’est celui qui semblait le mieux répondre à cet objectif. Le plus gros problème à ce niveau-là et qu’il y’a peu de documentation sur ce module et sur la façon de le configurer correctement. J’ai donc perdu beaucoup de temps sur ce point là.

Sécurité

D’un point de vue de la sécurité j’ai fait quelques petites erreurs que je ne détaillerai évidemment pas ici (j’ai la flemme de les corriger…).

Si j’ai un seul conseil à donner de ce point de vue là c’est de lire le guide suivant avant de faire quoi que ce soit sur votre VPS :

http://plusbryan.com/my-first-5-minutes-on-a-server-or-essential-security-for-linux-servers

Logwatch et Fail2ban me semblent être deux outils incontournables pour sécurisé un serveur.

Dans les prochains articles je détaillerai :

touch.gg

http://touch.gg

http://twitter.com/touchGG