opera-developer

Linux : installer le plugin Flash sous Opera Developer

opera-developer

Après avoir mis à jour Ubuntu récemment, j’ai testé la nouvelle version d’Opera : Opera Developer qui s’adresse aux développeurs web.

Si vous recherchez un navigateur ultra-rapide, essayez-le ! Je m’en sers comme navigateur d’appoint et il est vraiment plus rapide que la version classique d’Opera.

Seul hic : Flash n’était pas activé par défaut donc il faut faire une petite manipulation qui prend 15 secondes montre en main. Ceci-dit, on avait eu le même problème pour installer Flash sous Chromium.

Ce tutoriel permet donc ‘installer Flash rapidement sous Opera Developer en utilisant PepperFlash et FFmpeg sous Ubuntu et Linux Mint.

Installation de PepperFlash

Sous Mint et Ubuntu, il suffit d’installer le paquet pepperflashplugin-nonfree pour installer Pepper Flash :

sudo apt-get install pepperflashplugin-nonfreeCode language: JavaScript (javascript)

Une fois le paquet installé, il suffit de relancer le navigateur.

Lire la suite

Un écran d'ordinateur avec un fond bleu et violet présentant le navigateur Opera.

Installer des scripts JavaScript utilisateur sous Opera

Il est possible d’ajouter des scripts JavaScript utilisateur (ou userscripts) sous Opera pour ajouter des fonctions supplémentaires au navigateur.

Cependant, ce code ne peut être lancé directement, il y a quelques réglages à effectuer.

Voici comment configurer Opera pour y lancer nos scripts JavaScript en quelques étapes.

Réglages du dossier des scripts JavaScript sous Opéra

Allez dans Tools –> Preferences (Outils –> Préférences) ou faîtes Ctrl + F12 au clavier.

Naviguez dans Advanced –> Content –> JavaScript Options (Avancé –> Contenu –> Options JavaScript).

Dans la nouvelle fenêtre, cliquez sur le bouton Choose et sélectionnez le dossier qui contient les fichiers JS.

Lire la suite

Modifier n'importe quelle page web avec votre navigateur photo 1

Modifier n’importe quelle page web avec votre navigateur

html logo

Bon, c’est une astuce un peu érodée maintenant et je suis sûr que vous êtes plusieurs ici à la connaître mais je la rajoute quand même ici pour référence.

J’ai montré cela au responsable TICE de mon collège récemment et il n’en revenait pas : il est bel et bien possible de modifier n’importe quelle page web avec n’importe quel navigateur et tout cela directement en ligne, en utilisant une ligne de javascript.

Lire la suite

CSS : définir la taille d'un champ texte photo

CSS : forcer le retour à la ligne du code pre en CSS3

Je me suis rendu compte en rédigeant mes articles sur l’installation du serveur dédié que le code bash, lorsqu’il était un peu long, n’allait pas à la ligne automatiquement.

Il était écrit d’une seule ligne dans son conteneur, forçant une barre de navigation horizontale bien disgracieuse… Heureusement, cela est maintenant une chose du passé.

Le code est affiché sur le site avec la balise pre, qui permet l’affichage d’un texte pré-formaté.

Or la particularité de cette balise est qu’elle désactive le retour à la ligne. Voici une astuce en CSS pour contre-carrer cet effet indésirable.

/* Forcer le retour à la ligne de la balise PRE - skyminds.net */		
pre {
   white-space: pre-wrap;             /* CSS3 */
}Code language: CSS (css)

Lire la suite

De l'importance du cahier des charges du développement web photo

De l’importance du cahier des charges du développement web

sandglass

J’ai eu l’occasion récemment d’écrire un formulaire de contact ainsi que son traitement PHP pour une entreprise de construction canadienne qui cherche à recruter du personnel.

Je commence à écrire le code. Je connais bien les formulaires étant donné que c’est l’un de mes premiers scripts (2001 si je ne m’abuse).

Je place le script sur mon serveur, commence ma batterie de tests histoire de pallier toutes les situations auxquelles un utilisateur lambda peut être confronté. Le code que je livre est en en CSS3 et HTML5 valides.

Tout s’affiche impeccablement dans tous les navigateurs. Je me dis que c’est une affaire qui roule lorsque le client m’envoie quelques emails pour me demander quelques corrections, additions, et l’intégration du script dans son site.

C’est là que le vent a commencé à tourner.

Lire la suite

Nouveau look : le thème LSD

LSD

J’en avais un peu marre de la présentation du blog en gris et rouge : j’ai donc travaillé sur un nouveau design le week-end dernier pour pouvoir le tester sous toutes les coutures cette semaine. Aujourd’hui marque donc la venue du nouveau look LSD.

Il n’y a rien de psychédélique du tout, c’est juste le seul nom qui m’est venu à l’esprit lorsque j’ai eu fini de jouer avec ma feuille de style – l’histoire du LSD est cependant intéressante.

J’ai repris le gris et abandonné le rouge qui commençait à me fatiguer les yeux : le thème est donc un peu plus bleuté et la rubrique “about” a enfin été ajoutée (remarquez, j’ai mis un an avant de me rendre compte qu’elle manquait à l’appel…), je l’étofferai lorsque je serai un peu plus inspiré ;-).

Le petit plus : j’utilise maintenant un header qui change aléatoirement à chaque lancement d’une des pages du blog. C’est plutôt sympa, j’ai même ajouté des photos qui n’ont peu (ou même pas du tout) de rapport avec le blog, juste pour varier les plaisirs. La largeur du blog a également été réduite, ce qui améliorera la lecture sur les grands écrans. Lecture parfaite sur un 17″, okay sur un 15″ d’après mes tests.

Il y a juste quelque chose qui me chiffonne un peu : IE. Bah oui, évidemment cela fonctionne sans problèmes avec Firefox, Opera et même Netscape mais IE m’affiche une scrollbar horizontale pour moins de 3 d’une dizaine de pixels qui dépassent. J’ai cherché tant et plus, pas moyen de trouver la ligne qui produit ce phénomène sans tout casser dans les autres navigateurs.

Je réitère donc mon (éternelle) requête : si vous lisez ce blog, faîtes-le avec un navigateur qui respecte les standards du Web. Sérieusement, c’est vraiment important pour tous ceux qui créent des designs. En plus, vous y gagnerez au change.

Voilà. Ah oui, j’oubliais : vous pouvez toujours revenir au look précédent grâce au Theme Switcher qui se trouve tout en bas du menu.