Catégorie : Web

Articles généraliste sur le Web

Tester rapidement du code JavaScript avec Firefox

Ardoise JavaScript de Firefox

Vous voulez tester du code JavaScript (de plus de 1 ligne) rapidement (juste le temps de l’écrire) sans devoir monter une page HTML de test ? Firefox a pensé à vous avec son « Ardoise JavaScript« .

Depuis la version 33 de Firefox si vous appuyez sur les deux touches « Maj+F4 » ou sur le menu « Outils/Développement Web/Ardoise JavaScript » la fenêtre de test de « Ardoise JavaScript » s’affiche :

Ardoise-JavaScriptCette « Ardoise » va vous permettre de tester directement du code JavaScript. Vous pourrez aussi charger un fichier JavaScript et même formater votre code.

De plus, Ardoise vous offre les fonctionnalités suivantes:

  • formatage de code
  • complétion
  • auto-fermeture des parenthèses, accolade,
  • ajout automatique de guillemets, quottes (énervant à mon gout 😉
  • touche similaire aux éditeurs vim, Emacs, Sublime Text (voir la clé « devtools.editor.keymap »  de l’adresse « about:config« )

quelques astuces d’utilisation

Afficher la console

Appuyer sur les touches CTR+MAJ+J, sinon afficher l’outil de développement de Firefox en appuyant sur la touche F12, puis onglet « Console« .

Cas d’usage détourné

Le code s’exécute dans l’environnement de l’onglet actif de Firefox, C’est donc aussi un moyen pour extraire des données d’une page HTML 😉  En voici un exemple  d’application :

//charger le l'url suivante :https://www.qwant.com/?q=piradix&t=web

var nbFind = 0;
var list = document.getElementsByClassName('result--web--title');
for (var i=0; i<list.length; i++) {
  var s = list[i].innerHTML;
  if (s.toLowerCase().indexOf('piradix') >= 0) {
    nbFind++;
  }
}
alert('Nombre page contenant en titre \"piradix\" : ' + nbFind+"/"+list.length);

Sources

Vous trouverez la documentation en Français de « Ardoise JavaScript » sur https://developer.mozilla.org/fr/docs/Outils/Ardoise

 

Sécuriser votre site web avec Let’s Encrypt

Pour passer votre site Web de HTTP à HTTPS, il faut acheter un certificat SSL auprès d’un organisme certifié, se qui vous coutera dans les 100 à 150 euros par an. C’est une opération couteuse :

  • En temps : en général il faut prévoir une demi-journée pour mettre un certificat à jour (compté le temps passé à faire et à gérer).
    Donc c’est  compliqué, sinon en moins de 15m ce serait fait !
  • En argent : c’est  100 à 150 € par an et par domaine au minimum. Par exemple « Piradix » vous possédé deux domaines « piradix.com » et « piradix.fr » ce qui augment la facture.

Ne faisant pas d’argent avec Piradix, dépenser 200€ (2 domaines) par an était inenvisageable. Même si j’y gagnerais le fait que Google référencez mieux les sites HTTPS (on ne va pas tous suivre ses règles , non, mais 😉

Heureusement est apparue Let’s Encrypt. C’est un certificateur qui propose des certificats SSL gratuits. Non ce n’est pas une arnaque, non il ne vend pas de publicité, non il ne vend pas vos données, oui c’est réellement gratuit. Let’s Encrypt vie de vos dons et de ceux de leurs sponsors : Mozilla, OVH, cisco … (voir la liste).

Comme ça marche ?

Le certificat délivré par Let’s Encrypt est gratuit, valable 3 mois et est renouvelable (ouf). Ce dernier est très bien noté :

Note Let's Encrypte

Les gens de Let’s Encrypt ont bien perçu la complexité de l’installation d’un certificat. C’est pourquoi ils ont mis au point un kit d’installation qui fait tout pour vous 😉

Si vous voulez plus d’information, sur la technicité voir (en Anglais) : How it work.

Installer le kit de création de certificats Let’s Encrypt (Linux/apache)

Pour l’installer sous Linux Ubuntu (ou dérivé) voici une procédure :

En premier il faut installer le kit de création en lancer les commandes suivant (attention, ça peut prendre du temps) :

apt-get git
git clone https://github.com/letsencrypt/letsencrypt
cd letsencrypt
./letsencrypt-auto --help

Let’s Encrypt est maintenant installer, plus besoin de relancer cette procédure. Il ne vous reste plus qu’a l’utiliser pour créer vos certificats SSL.

Créer et installer des certificats SSL pour vos sites Web Apache

Pour créer et installer un certificat pour chaque domaine de votre serveur web Apache faire :

./letsencrypt-auto --apache

Répondez aux questions, puis tout sera fini !

Si vous préférer obtenir un certificat pour une liste de domaines  (par exemple : www.piradix.com, piradix.com, www.piradix.fr, piradix.fr) il suffit d’utiliser la commande suivante :

./letsencrypt-auto --apache -d www.piradix.com -d piradix.com -d www.piradix.fr -d piradix.fr

Ce qui créera et installera un seul certificat pour les 4 domaines. Et c’est tout !

Par la suite pour renouveler votre certificat il faudra faire :

./letsencrypt-auto renew

À vos marques …. prêt … partez ….

 

Les sites web publics de cartographie

Tout le monde connait « Google Map » le service web de cartographie de la Terre.  Cependant il n’est pas le seul et il n’est surement celui qui a le plus de fonctionnalités.
Tous les grands concurrents de Google ont leur carte (Microsoft, Apple), ainsi que la France avec son « GeoPortail« .

En voici une liste :

Nom Description + Site Web
Apple maps Le service de carte d’Apple.
Ne fonctionne que sous IOS !Web : http://www.apple.com/ios/maps/
Bing cartes Le service de carte vue par Microsoft.
Il est toujours en bêta en 2016 !
En plus des vues cartographiques (route) et satellitaires, il propose des vues aériennes, des photos et des vues depuis la rue « streetSide »Web : http://www.bing.com/mapspreview
Google Map Le service de carte de Google.
Il propose des vues cartographiques (route) et satellitaires, vues depuis la rue « StreeMap », affichage du trafic routier.
C’est le site web grand public de carte temps réel le plus complet que je connaisse.https://www.google.fr/maps
GeoPortail Carte de la France, gérée par l’IGN.
Ce service regroupe toutes les données publiques de cartographie de la France : Parcelles cadastrales, Potentiel solaire, carte littorale, Topographie …
Il ne propose pas de vue depuis la rue ou du trafic routier, ou tout autre donnés temps réels.Web : http://www.geoportail.gouv.fr/accueil
OpenStreetMap C’est l’unique site de carte entièrement libre.
Par contre, vous ne trouverez pas de vue satellite ou de trafic routier.
Vous pouvez aussi y contribuer…Web : http://www.openstreetmap.org/#map=5/51.500/-0.100

Traduction en ligne de textes ou sites web

Si vous pouvez avoir des difficultés à lire un site dans une autre langue que la vôtre, ou vous voulez traduire votre site web, il existe des sites web d’aide à la traduction.
Ces sites web ne doivent pas être considérés comme de vrais traducteurs, mais comme des aides à la traduction. De plus, ils sont très génériques et s’adaptent mal à certains types de contexte.

Actuellement sur le Web j’ai repéré que deux types de technologie de traduction :

  • « Systranet » de Systran, précurseur de la traduction. Technologie initialement utilisée par la NASA.
  • « Google traduction »  de Google
Nom Technologie Description
Google traduction Google Google traduction

Il offre plusieurs services :

  • traduction de texte
  • traduction de fichier
  • traduction de site web
  • intégrable le dans votre site web
  • choix de la langue
  • affichage de dictionnaire de traduction sur mot
  • possible de proposer une traduction

Web : https://translate.google.fr

Systranet

 

Systran Systranet

Il offre plusieurs services :

  • traduction de texte
  • traduction de fichier, dont RSS (nécessite un compte)
  • traduction de site web
  • intégrable le dans votre site web (nécessite un compte)
  • choix de la langue
  • dictionnaire

Web : http://www.systranet.com/fr/web

Traduction d’Orange Systran Traduction Orange

Intégration du traducteur de Systran par Orange, avec de la publicité en plus.

Il offre plusieurs services :

  • traduction de texte
  • traduction de site web
  • choix de la langue

Web: http://traduction.orange.fr/

Free WebSite Translation Google « Free Web Site TRANSLATIONS »

Il offre plusieurs services :

  • traduction de site web
  • choix de la langue
  • intégrable le dans votre site web. Très simple d’intégration.

Web : http://free-website-translation.com/?fr

Worldingo Systran ? Worldingo

Il offre plusieurs services :

  • traduction de texte
  • traduction de fichier
  • traduction de site web
  • envoie d’email
  • choix de la langue
  • API

Il semble être basé sur le moteur de traduction de Systran.

Web  : http://www.worldlingo.com/fr/websites/url_translator.html

Honte à Google

Arrêtez d’utiliser Chrome , Google

Pourquoi ?

Si vous lisez l’article suivant qui révèle que Google a fraudé sur les résultats de recherche pour afficher ses services au détriment des autres moteurs.

Vous comprendrez que pour Google tout est bon pour faire passer ses services avant les autres.

Donc si vous utilisez Chrome, qu’est-ce qui empêche Google de vous espionner ? De vendre vos informations personnelles, de vous afficher des publicités alléchantes sur lesquelles vous avez du mal à ne pas dire non ?

Idem pour leur moteur de recherche, en particulier si vous utilisez Chrome (eh oui Chrome envoie vos données de navigation à Google sans rien vous demander) !

La conclusion, c’est que vous devez rapidement changer de navigateur Internet. Pour ma part, j’ai un faible pour Firefox 😉

 

 

Nouveautés de Firefox 45 avec images

Beaucoup de sites d’information vous indiquent les nouveautés de Firefox 46,  mais aucun de vous n’indique comment y accéder. De plus sur le site de Mozilla il n’est pas facile de trouver la liste des nouveautés (le site est beau, mais il donne l’impression de ne pas contenir grand-chose 😉

Donc voici avec des images et des liens les nouveautés de Firefox 46 :

  • Affichage d’une vue des onglets ouverts sur vos autres appareils utilisant Firefox Sync.
    Comme vous pouvez le voir en cliquant sur l’icône « onglet » Firefox m’affiche les pages web ouvertes sur mes 3 autres appareils qui utilisent « Sync ».
    La documentation est ici.

Affichage des onglets ouvert sur d'autre appareil

  • La complétion dans la barre d’adresse tient compte des onglets synchronisés.
  • Vous trouverez de la documentation en Français ici.

completion sur barre d'addresse

  • Hello support maintenant le partage d’onglet. Enfin vous allez pouvoir montrer à votre correspondant la page web que vous visionné.
    Vous trouverez la documentation ici.

Hello

  • Nouvelle langue supporter le Guarani [gn]
  • ajout d’une nouvelle préférence « network.dns.blockDotOnion » permettant de bloquer « .onion » au niveau du DNS.
  • Gestion des groupes d’onglets est  supprimé

Sources (en Anglais) :

Lien vers la documentations (en Français):

Traduction en ligne de textes ou sites web

Si vous pouvez avoir des difficultés à lire un site dans une autre langue que la vôtre, ou vous voulez traduire votre site web, il existe des sites web d’aide à la traduction.
Ces sites web ne doivent pas être considérés comme de vrais traducteurs, mais comme des aides à la traduction. De plus, ils sont très génériques et s’adaptent mal à certains types de contexte.

Actuellement sur le Web j’ai repéré que deux types de technologie de traduction :

  • « Systranet » de Systran, précurseur de la traduction. Technologie initialement utilisée par la NASA.
  • « Google traduction »  de Google
Nom Technologie Description
Google traduction Google Google traduction

Il offre plusieurs services :

  • traduction de texte
  • traduction de fichier
  • traduction de site web
  • intégrable le dans votre site web
  • choix de la langue
  • affichage de dictionnaire de traduction sur mot
  • possible de proposer une traduction

Web : https://translate.google.fr

Systranet

 

Systran Systranet

Il offre plusieurs services :

  • traduction de texte
  • traduction de fichier, dont RSS (nécessite un compte)
  • traduction de site web
  • intégrable le dans votre site web (nécessite un compte)
  • choix de la langue
  • dictionnaire

Web : http://www.systranet.com/fr/web

Traduction d’Orange Systran Traduction Orange

Intégration du traducteur de Systran par Orange, avec de la publicité en plus.

Il offre plusieurs services :

  • traduction de texte
  • traduction de site web
  • choix de la langue

Web: http://traduction.orange.fr/

Free WebSite Translation Google « Free Web Site TRANSLATIONS »

Il offre plusieurs services :

  • traduction de site web
  • choix de la langue
  • intégrable le dans votre site web. Très simple d’intégration.

Web : http://free-website-translation.com/?fr

Worldingo Systran ? Worldingo

Il offre plusieurs services :

  • traduction de texte
  • traduction de fichier
  • traduction de site web
  • envoie d’email
  • choix de la langue
  • API

Il semble être basé sur le moteur de traduction de Systran.

Web  : http://www.worldlingo.com/fr/websites/url_translator.html

Coloriser les boutons du menu de Firefox

Logo Firefox

Les icônes du menu Firefox sont toutes en gris. On se croirait en Bretagne 😉

Si vous trouvez que cela manque de couleur comme moi, il existe une solution : le module Stylish:

sous Firfox cliquer sur l’icône « Modules » puis sur « Catalogue » (à gauche) , puis tapez « stylish » dans la zone de recherche se trouvant en haut à droite, puis installer l’extension trouvée

Redémarrez Firefox, puis allez sur page suivante https://userstyles.org/styles/101231/colorize-firefox-buttons, cliqué sur le bouton bleu « Install » pour l’installer.

Maintenant les boutons du menu Firefox sont colorés :

 

Tout savoir sur une équation ou une fonction : dérivé, graphes, etc..

Vous voulez tout savoir sur une équation ou une fonction mathématique, sans vous prendre la tête en moins d’une minute ?

Allez sur le site http://www.wolframalpha.coms taper votre fonction dans la zone de recherche puis touche « Entré »

Wolframalpha va vous afficher tout ce qu’il connait sur votre fonction, dont des graphes.

Le seul hic est qu’il est en anglais, désolé pour ceux ne le comprenne pas 😉

Ecriver par exemple la formule suivante :

  • f(x)=756 X2+9X+8

Wolfram comprend très bien que vous voulez dire

  • f(x)=756*x2+9*x+8

voici une copie écran :