Catégorie : Code is poetry

Comment Insérer des liens dans une image?

Insérer des liens dans une image est un vieux truc de codeur html. Comme je n’y connais rien en code, car ce n’est pas mon métier, je préfère externaliser le code avec des services en ligne. Exemple :  ce service que j’ai testé il y a bien longtemps : html-map.com et que je viens de le réutiliser pour mon dernier billet sur le pdf.

Ce service est on ne peut plus simple d’utilisation.  Il  permet d’insérer des liens dans une image et tout ça sans bien connaître du tout en code html.  A titre d’exemple voilà l’image suivante qui  possède 4 liens. Il suffit de cliquer sur les icones et bien sûr sur le gros roget.biz inscrit sur ma tablette. Pratique non?

thierry roget et roget.biz

Sympa non?

Mode d’emploi

  • Envoyer une image sur votre blog et récupérez l’url. Vous pouvez également héberger votre photo sur des sites comme dropbox, tumblr ou blogger…
  • Rendez-vous sur le site :  html-map.com et coller le lien url de la photo (1) et appuyez sur start (2).
  • Sélectionner une zone de l’image (3)
  • Entrer l’url qui correspond à la zone sélectionnée (4) : dans mon exemple j’ai mis en lien vers twitter.
  • Entrer optionnellement une balise Alt (5) : quand la souris va passer sur le lien on aura une petite info qui va apparaître.
  • Informer si le lien doit s’ouvrir une nouvelle fenêtre ou rester dans la même fenêtre (same window, new window) (6).
  • Répéter les opérations sur d’autres zone (3) (4), (5) (6), pour autant de liens que vous voulez mettre dans l’image.
  • Et récupérer le code. « click here to finish ».
  • Récupérer le code (7) : « html map code » et colle le à l’endroit qui va bien dans votre blogue. (sélectionner le mode html).
  • Si vous êtes puriste: ajouter le code CSS Map dans votre fueille CSS, mais ce n’est pas obligatoire.

Voilà c’est fini. Je trouve cet outil plutôt pratique. De plus, tout est hébergé sur votre propre blogue, il n’y a pas donc pas à se soucier de voir le code disparaître.

A quoi ça sert? 

Quelques exemples :

  • Créer une carte géographique avec un lien vers les photos du lieu en question.
  • Créer une carte de visite originale numérique avec seulement une photo et les icones comme j’ai fait pour l’exemple.
  • Faire des modes d’emplois avec des aides sur la photo qui renvoi à un texte explicatif…
  • Faire mumuse.
  • Comprendre le code html pour faire la même chose sans l’outil.
A vous de voir l’usage! En tout cas, j’ai gardé ce lien dans mes nombreux favoris.
Vous n’avez pas bien compris? Et bien voici une démonstration en videogif qui explique comment insérer les liens dans l’image. Sachez qu’il faut répéter l’opération (3) et (4)  à chaque cadre, c’est-à-dire, qu’il faut entre un lien url (différent ou pas) pour chaque cadre inséré.
Dans l’exemple qui suit, j’ai mis 3 cadres pointant vers le même lien (roget.biz).

html-map.com

 

HTML Map

Créer votre propre flappy bird

Flappybird disparu depuis peu sur les smartphones continue à être très très  populaire pour les heureux qui ont téléchargé l’application avant qu’elle disparaisse. D’ailleurs si vous avez un téléphone android, il est facile d’installer le jeu, même s’il n’est plus disponible sur googleplay.  En effet, il suffit de vous faire envoyer le fichier .apk pour que vous puissiez installer le jeu.

Maintenant si vous voulez apprendre à programmer vous même un jeu flappybird, vous pouvez le faire sur le site learn.code.org . J’y ai jeté un coup d’oeil est vraiment ce n’est pas compliqué. J’ai pu fabriquer mon jeu sans problème.

Cliquez déjà sur ce lien :  learn.code.org/s/6/level/148.  Dans la première partie de la programmation, on vous propose de lancer une action quand on clique sur l’écran pour commencer le jeu. A titre d’exemple, l’animation qui suit montre a  première phase de la programmation du jeu. When click (quand on clique), lancer un battement d’ailes (flap)….  Une fois qu’on a posé les événements (glissé déposé) on va tester le résultat sur le jeu lui-même. Si on a compris et réussi le test, on passe à la phase suivante.

La programmation se  fait  phase par phase et la deuxième phase consiste à programmer ce que va faire l’oiseau quand il touche le sol (ça finit le jeu : end game).

Phase par phase, vous allez  bien comprendre comment l’outil marche et  vous allez pouvoir créer votre propre flappybird qui n’aura plus rien à voir avec l’original. Toutefois, si vous voulez reproduire exactement le jeu original : libre à vous.

Ainsi vous pourrez modifier, les sons, la forme des obstacles, la forme de l’oiseau (qui pourra devenir un poisson) .  La figure suivante est la version finale du jeu que j’ai « programmée ».  qui se trouve sur http://learn.code.org/sh/14059728

Evidemment, cette programmation est juste la pointe de l’iceberg en terme de code, il s’agit en fait de la partie la plus facile, car derrière tout ça, un code java script sera lancé. et celui là est un peu plus compliqué.

Histoire ne dit pas comment on peut faire pour mettre le jeu qu’on a créé sur le playstore, mais ce n’est pas le but de la manip;

En tout cas, si vous avez des ados qui n’arrêtent pas de jouer à flappy bird, c’est le moment de leur faire passer à un niveau supérieur.

 

 

Comment créer un beau tableau sur un site ou un blogue (top)

Je me suis toujours demandé comment je pouvais élaborer des tableaux sur mes blogues sans trop me prendre la tête en terme de code html. Un truc qui en jette un peu et qui soit un peu coloré. Un outil avec lequel on puisse créer un tableau rapidement sans entrer dans du code élaboré, sans même qu’on comprenne quoique ce soit au code HTML qui est utilisé pour fabriquer un tableau.

J’avais bien utilisé un oujtil en ligne il y a quelques siècles années et qui marche toujours et qui s’appelle tableizer, il s’agissait de copier le contenu du feuille de calcul pour obtenir un tableau en code HTML. Code HTML à copier ensuite dans le billet de blogue. Maintenant j’ai trouvé carrément mieux avec l’outil en ligne Tablesgenerator.com/html_tables 

L’objectif est donc de créer un beau tableau avec un peu de couleur et qui soit bien propre comme dans l’exemple qui suit (la liste de tous les blogues et sites que je gère).

numéro du blogue url des  blogues Version wordpress du blogue
1 01langue.org 3.8
2 01photo.org 3.8
3 01photo.org/photo supprimé
4 1blogue.net 3.8
5 1sens.net 3.8
6 01polar.org 3.8
7 adoptionactu.com 3.8
8 http://bresil.adoptionactu.com/ 3.8
9 brasil.roget.biz 3.8
10 connectware.biz 3.8
11 histoire.maristela.org 3.8
12 labo.adoptionactu.com supprimé
13 livre.maristela.org 3.8
14 maristela.org 3.8
15 maristela.org/blog 3.8
16 roget.Biz 3.8
17 roget.info automatique
18 http://www.translationtexts.com/ automatique
19 translationtext.org/blog supprimé
20 en.roget.biz supprimé

Avec l’outil    Tablesgenerator.com, il est possible de :

  • De copier un tableau à partir d’excel ou google tableau.
  • D’importer des tableaux en CSV. (format connu pour excel).
  • Choisir une couleur et un  format à partir des thèmes disponibles sur le site.
  • Créer des bordures.
  • Choisir une police de caractères.
  • Insérer des lignes et des colonnes.
  • Choisir le format d’alignement des textes.
  • Créer des Tableau en code LaTex, HTML, Texte ou Markdown.
  • Sauvegarder nos tableaux en format tng (proprio) .
  • Changer  le fond de chaque cellule.
  • Fusionner les cellules (les utilisateurs d’excel devraient connaitre.
  • …

Pour  conclure: de part sa flexibilité, cet outil va ravir tout le monde, du pro au débutant. De plus, le fait d’avoir 4 formats disponibles (html, latex, markdown et text) comblera tous les besoins. Personnellement, ça fait un bon bout de temps que je cherchais un outil de ce genre, justement pour embellir un peu mes billets de blogues.

Voilà donc une première belle découverte 2014. Bien sûr si vous avez mieux dans vos favoris, n’hésitez pas à me faire  un commentaire et de m’indiquer le lien qui va bien.

Tablesgenerator.com,

Pin It on Pinterest