Code Year

Catégorie web  |  Tag , , , ,   |  Pas de commentaires

À un ami (qui se reconnaitra en lisant ceci) qui me demandait ce qu’il fallait que ses enfants apprennent à l’école pour être promis à un brillant avenir, je linkais avec amusement cet article sur Business Insider: Teach Your Kids How To Code, Not How To Speak Chinese

There is a belief among some – perhaps out of fear, or prudence – that children today should study Mandarin Chinese as their second language. If China is going to rule the world in a few decades, at least my kid will be able to communicate.

That’s an interesting idea, but the reality is that no matter who is ruling the world, if your kids don’t live in China, their lives are much more likely to involve software than speaking Chinese.

So make sure the second language they study is code. Then their third language can be anything you’d like – Mandarin, Spanish, Latin, French, whatever.

Comme il n’est jamais trop tard pour apprendre de nouvelles choses, si vous voulez vous y coller, c’est le moment de vous inscrire sur l’excellente initiative de Code Year qui vous enverra alors chaque semaine de l’année 2012 une nouvelle leçon interactive de programmation.

Pour info, c’est une idée propulsée par Codecademy que j’ai découvert il y a quelques mois et dont j’ai dévoré les premières leçons. D’une simplicité absolue, clairement expliqué et tout se passe en ligne, sans avoir rien à paramétrer. C’est une excellente façon de commencer cet apprentissage qui peut souvent sembler laborieux, alors qu’ici, c’est presque un jeu avec des “achievements unlocked” tout partout.

Je ne peux donc que vous encourager à rejoindre les déjà plus de 68000 inscrits qui vont apprendre à coder cette année grâce à Code Year. Et comme le dit Douglas Rushkoff, cité sur la page d’accueil:

If we don’t learn to program, we risk being programmed ourselves… program or be programmed

On vous aura prévenu…

Transitions, transformations et animations CSS3 par l’exemple

Catégorie web  |  Tag , , , ,   |  Pas de commentaires

Ca se passe sur css3.bradshawenterprises.com. Une série d’exemples de transitions et d’animations exclusivement réalisées en CSS3, sans faire appel au moindre bout de code javascript (à part pour gérer l’interactivité). Ca démontre bien la puissance du truc et comme le code source est fourni, vous verrez que c’est relativement simple.

Bien évidemment, tout ceci ne fonctionne que sur des navigateurs dignes de ce nom (oubliez IE, donc) avec un petit avantage pour Safari qui est le seul aujourd’hui à supporter les transformations 3D.

Et puis, quand vous aurez terminé de tout lire, vous aurez bien mérité un peu de détente, avec une petite session de retro-gaming sur cet Asteroids entièrement réalisé en HTML5.

Tout savoir sur le HTML5

Catégorie web  |  Tag , ,   |  Pas de commentaires

Tout d’abord, une présentation très complète (via @MoxFolder) sur les fonctionnalités majeures apportées par le HTML5, entièrement réalisée en… HTML5 et donc consultable dans votre navigateur. Les bouts de code étant la plupart du temps accompagnés d’exemples concrets au sein de la présentation, il vous faudra un navigateur approprié pour les visualiser (en clair, oubliez IE6-7-8 et optez plutôt pour Google Chrome, sur ce coup là).

Et justement, puisqu’on parle de compatibilité avec les navigateurs, HTML5 & CSS3 Readiness donne une vision très rapide des fonctionnalités supportées par les différentes versions d’IE, Firefox, Safari, Opera et Chrome.

Construire un service web en 24h

Catégorie web  |  Tag , , , , , ,   |  Pas de commentaires

Impressionnant et surtout très instructif cet article sur Dominiek.com. L’auteur y explique comment il a conçu un service web de A à Z en seulement 24h (étalées sur 4 jours tout de même). Le service en question s’appelle Wigitize.com et est parfaitement fonctionnel. Il permet tout simplement de créer un widget affichant les derniers updates d’un flux RSS pour les inclure dans votre blog.

Wigitize, le site

L’article part de l’idée initiale de l’auteur, puis décompose en tâches chronométrées les différentes étapes du projet:

  • créer les éléments de design,
  • mettre en place un gestionnaire de projets,
  • développer l’application sous RubyOnRails,
  • créer les styles CSS pour le code HTML,
  • ajouter un peu d’AJAX pour le fun sur certains éléments,
  • designer et développer le pied de page du service,
  • rendre le widget “embeddable” afin de pouvoir l’inclure dans un blog,
  • faire en sorte que tout ça tourne en tache de fond,
  • développer une API,
  • acheter un domaine,
  • configurer le serveur d’hébergement du service,
  • petits ajustements par-çi par-là pour rendre le tout plus convivial,
  • et un peu de SEO pour terminer.

Bon, on voit bien que le type n’en est pas à son coup d’essai. Il a une certaine expérience qui lui permet d’aller beaucoup plus vite que le commun des mortels dans les nombreux domaines nécessaires à la réalisation de ce projet, mais ça n’en reste pas moins très captivant et pratique pour qui souhaiterait se lancer dans l’aventure. A vous de jouer !

Google Android, le kit de développement est disponible

Catégorie software  |  Tag , , , , , , ,   |  5 Commentaires

Google vient de mettre à disposition le SDK (sous Windows, Mac OSx et Linux) pour commencer à développer des applications pour sa plateforme mobile Android, dont vous avez obligatoirement entendu parlé vu le buzz que ça fait sur la toile depuis quelques jours. Tout ce qu’il faut pour commencer à faire créer de nouvelles applications est donc disponible (soft, docs, faq, tutoriels, exemples, etc…). Google en a profité pour publier la petite vidéo ci-dessous qui donne un premier aperçu des possibilités et des premières applications comme: le navigateur web, Google Maps, les contacts, etc… Franchement, c’est prometteur!

Et si vous voulez en savoir un peu plus, je vous invite à télécharger le SDK qui fourni aussi un émulateur, qui vous permettra de vous familiariser avec l’interface et pourquoi pas de tester vos premières créations (Google proposant un challenge avec 10 millions de dollars de dotation pour les meilleures applications, c’est le moment de se lancer). Et pour le fun, faaabulous.fr sous Android, ça donne quoi ?

Emulateur Android

2 outils pratiques pour l’édition HTML/CSS

Catégorie web  |  Tag , , ,   |  2 Commentaires

Le premier, Intype, est un éditeur multi-code (HTML, XML, C, Java, Javascript, Ruby, etc…) , tournant sous Windows et très léger en taille. Sa particularité et donc son intérêt majeur réside dans l’utilisation d’un système de complétion très efficace. Ainsi, pour du code HTML, commencez à taper le nom d’une balise, puis appuyez sur la touche de tabulation, et automatiquement, la balise est fermée, les divers champs d’option sont déjà indiqués, etc… Pour voir un peu le système en action, des screencasts sont disponibles sur le blog officiel.

Le second, rendr 2, est un site qui existe depuis assez longtemps, mais que je trouve très pratique pour réaliser quelques tests sur un design web. Il vous permet de visualiser en temps réel les modifications que vous appliquez à votre code HTML et CSS. Sur la page d’accueil, vous trouvez ainsi une fenêtre contenant dans un onglet le code HTML de cette même page et dans un autre, le code CSS. Il vous suffit de les éditer pour voir la page d’accueil se modifier en temps réel. Vous l’aurez compris, si vous remplacer l’intégralité du code par le votre, vous obtenez un éditeur temps réel. Et le petit truc qui vient couronner le tout, c’est le script proposé pour Greasemonkey qui vous permet d’ouvrir l’éditeur directement sur n’importe quelle page web, par un simple appuie sur la touche [pause/break] de votre clavier. Idéal pour tester des modifications de design très rapidement.

Et puisque nous sommes dans le design, Adobe Labs propose Kuler, qui permet de créer ou choisir un thème couleur à la sauce web2.0 pour votre site. Pratique et joliment réalisé.