Si vous souhaitez réaliser votre propre feuille de style CSS

Nous avons présenté dans deux précédents articles les feuilles de style CSS, et leur utilisation conjointe avec l’extension Firefox Stylish. Voici maintenant quelques conseils si vous souhaitez vous lancer dans la création de votre propre feuille de style CSS pour un site donné.

a) Récupérez la feuille de style CSS du style Web en question.

1. Affichez le code source de la page (combinaison de touches ctrl+U), et recherchez l’emplacement de la feuille de style CSS. Pour ce faire, faites la combinaison de touches ctrl+F et recherchez la chaine de caractères “.css“.
2. Vous obtenez alors soit une adresse internet entière, par exemple dans le cadre de mon blog, vous allez tomber sur http://s3.wordpress.com/wp-content/themes/pub/garland/style.css?m=1233010721b.
3. Sinon vous pouvez tomber sur une adresse relative (qui ne commence pas par http:// mais par /quelquechose). Auquel cas vous pourrez généralement reconstituer l’url entière de la feuille de css en accolant l’adresse realtive à l’adresse globale du site pour obtenir une adresse du style http://www.monsite.com/quelquechose.
4. Enregistrez le contenu texte de la feuille de style que vous obtenez sous un nom quelconque par exemple CssPersonaliséMonSitePointCom.css (en n’oubliant pas le plus important, l’extension .css).

b) Modifiez là à votre convenance en vous inspirant de l’existant.

1. D’abord il y a des choses complètement évidentes. Par exemple l’attribut background-color de la balise body désigne évidemment la couleur d’arrière plan du site. Allez sur code-couleur.com, choisissez une nouvelle couleur qui vous convient mieux, et remplacez le code hexadécimal de la feuille de style par celui que vous donne le site pour la nouvelle couleur choisie.
2. Ensuite comparez à grand renfort de ctrl+F quelles sont les correspondances des balises moins évidentes. Dans ce cadre l’utilisation de Firebug vous sera sans doute d’un grand secours tant pour établir les correspondances que pour avoir un petit aperçu de ce que vos changements vont donner.

c) Testez votre feuille de style sur le site concerné:

1. Repérez l’icone de Stylish en bas à droite du navigateur (elle ressemble à une feuille blanche avec un pinceau) et son nom apparait lorsque vous passez la souris dessus. Sinon vérifiez que vous avez bien installé Stylish.
2. Cliquez dessus, passez la souris sur “Ecrire un style“, faites votre choix dans le menu déroulant. Puis copiez collez votre feuille de style dans le cadre qui s’affiche en laissant en tête le code par défaut.
3. Validez, raffraichissez la page, et profitez .

Je précise que je n’ai pas encore testé d’écrire ma propre feuille CSS dans ce cadre là. Si jamais le besoin s’en fait sentir, ou si l’un d’entre vous trouve quelque chose de pas clair et me le demande, j’éditerai pour expliquer commen pallier aux difficultés rencontrées éventuelles. Ceci dit tout me parait assez clair, et pour les anglophones, l‘aide de Stylish est très bien faite.

Explorez, débuggez, et améliorez votre compréhension des pages Web avec Firebug

Maintenant que nous avons commencé à nous intéresser au contenu des pages Web, il est temps de vous présenter cette petite merveille qu’est l’extension Firebug de Firefox. Elle a plusieurs fonctionnalités intéressantes.

• D’abord elle permet de savoir instantanément quelle section du code correspond à quelle partie de la page, car en passant le curseur sur telle out telle section du code, le morceau correspondant de la page web est bleuté.
• Ensuite elle organise le code de façon agréable et intuitive par section que l’on peut développer ou réduire en cliquant sur la croix correspondante si le besoin s’en fait sentir.
• Par ailleurs pour chaque section du code html, il est possible d’observer le code de présentation CSS qui lui est associé.
• Enfin elle permet d’éditer la page Web à sa sauce et d’observer instantanément le résultat. A noter que dans ce cas là, les changements ne sont pas enregistrés et que dés que l’on rafraichira la page elle retrouvera sa présentation d’origine.
• Et plein d’autres fonctionnalités utiles que je ne détaillerai pas plus avant car elle correspondent à un usage plus avancé..

Changez la présentation des sites Web que vous visitez

Je ne sais pas si ça vous est déjà arrivé en allant sur un site internet de vous dire quelque chose comme “Sympa ce site! Mais quel dommage que sa présentation soit si moche!“. Sachez alors que vous avez une autre alternative que de choisir entre supporter le visuel désagréable du site et ne plus aller dessus. En effet, il existe une petite extension de Firefox qui s’appelle Stylish, et qui va vous permettre de remplacer la feuille de style CSS fournie par le site Web par une feuille de style plus à votre gout.

Pour ce faire, vous avez plusieurs possibilités:

1. Regarder sur userstyles.org si quelqu’un n’a pas déjà développé une feuille de style plus sympathique pour le site Web en question, pour cela repérez l’icone de Stylish en bas à droite du navigateur (elle ressemble à une feuille blanche avec un pinceau) et son nom apparait lorsque vous passez la souris dessus. Cliquez alors dessus, puis cliquez sur “Trouver des styles pour cette page“. Un fois que vous avez trouvé votre bonheur, il doit y avoir quelque part sur la page un bouton “load in Stylish” qui vous permettra de profiter du script .
2. Demander sur le forum de userstyles.org si quelqu’un n’aurait pas la gentillesse de bien vouloir vous en créer une (par contre il faut savoir parler anglais),
3. Apprendre un minimum de langage CSS, ce qui n’est pas dur du tout, pour refaire le design du site en question à votre sauce, en vous aidant des conseils disponibles sur le forum. Vous pouvez à ce sujet consulter mon billet Si vous souhaitez réaliser votre propre feuille de style CSS .

Par exemple pour des gens qui comme moi vont souvent sur internet la nuit, les pages Web écrites comme dans les livres en noir sur blanc, ça pique un peu les yeux à la longue. C’est pourquoi, nous avons tendance à rechercher des choses écrites plutot en couleur claire sur fond foncé, qui fatiguent bien moins les yeux. Je reviendrai dans un article ultérieur sur toutes les manières de transformer l’affichage de son ordinateur dans ce but, mais vous avez déjà un aperçu dans l’illustration de ce billet de l’un des résultats de cette démarche avec l’aide du script Stylish Google Web Search – dark blue redesign.

Introduction aux feuilles de style en cascade CSS

Introduction

Comme vous le savez sans doute, derrière chaque page Web que vous visitez se cachent un certain nombre de lignes de code écrites dans divers langages. Pour vous en convaincre, il vous suffit pour ceux qui utilisent Firefox d’utiliser la combinaison de touche ctrl+U, ce qui aura pour effet d’afficher le code source de cette page de mon blog.

A l’origine, lorsqu’une page web était construite, on insérait dans son code source à la fois le code de mise en page, et le code correspondant au contenu utile, de même que lorsque l’on écrit un document, on se préoccupe à la fois de ce que l’on y écrit, et de sa mise en page. Mais depuis et avec l’avènement du Web 2.0, il est apparu utile de décorréler ces deux approches.

• D’une part parce que à chaque site Web correspond un design, et qu’il est inutile que le code brut de présentation soit stocké en dur à 100 endroits différents si le site Web fait 100 pages, alors qu’il suffirait de le stocker quelque part et de le coupler avec le code de contenu de la page lorsque celle-ci est demandée par un utilisateur.
• D’autre part parce que si un jour on éprouve le besoin de changer le design du site, cela signifie qu’il va falloir modifier chacune des 100 pages manuellement l’une après l’autre, et je ne vous parle même pas des sites Web qui contiennent des dizaines de milliers de pages…

Tandis que si on sépare le code caractérisant le contenu d’une page Web de celui qui concerne sa présentation, on se débarasse de ces inconvénients. Le jour où l’on souhaite changer le design de son site Web, il suffit de modifier le fichier qui caractérise la présentation de l’ensemble des pages du site, et l’ensemble du site change, je ne sais pas si vous voyez la puissance du truc.

Et je pense que vous aurez deviné où je veux en venir. Le code décrivant le contenu d’une page Web, c’est du HTML, et le code caractérisant sa présentation, c’est du CSS.

Présentation du CSS

CSS signifie Cascading Style Sheets  (=feuilles de style en cascade). Vous avez un extrait de feuille CSS dans l’illustration de ce billet. Le principe est simple:

• Pour chaque balise placée dans le code HTML d’une page, le navigateur va regarder si quelque chose est dit à propos de cette balise dans la feuille de css qui lui correspond. Si non, il va adopter le comportement par défaut. Si oui, il appliquera les modifications spécifiées dans la feuille de style.
• Les balises peuvent être des balises HTML standard, par exemple body, ou des balises artificielles inventées par le créateur du site internet, ça pourrait être cadrecentral, ou n’importe quoi d’autre. Bien sûr il faut alors qu’elles aient été préalablement  insérées dans le code source suivant une syntaxe particulière.
• Les paramètres qui peuvent être changés vont de la police utilisée, sa taille et sa couleur à la présentation générale de la page et aux images utilisées.

Au passage, si parfois lorsque vous avez des ennuis de connexion internet, vous chargez des pages présentées très bizarrement, c’est souvent que seul le code html a été chargé, mais pas la feuille de style CSS correspondante. A titre d’illustration, voici à quoi ressemble ce blog sans sa feuille de style:

Conclusion:

Voila, comme je prévois de faire bientôt un ou deux articles en direct lien avec la notion de feuille de style CSS, grâce à ce billet vous  saurez ce que c’est. Vous pouvez également consulter l’article de Wikipédia qui s’y rapporte .

Ces lignes de commande que l’on oublie toujours…

Le site où sont indexées les lignes de commande

Pour tous ceux qui utilisent Linux et qui, comme moi, ont parfois du mal à se remémorer certaines lignes de commande dans le genre compliquées, je viens d’apprendre en lisant un article de Korben l’existence d’un site super sympathique qui recense toutes les commandes Unix. Il s’agit d’un site communautaire, où chacun peut ajouter de nouvelles commandes, commenter celles des autres, et voter pour les plus utiles.

Le principe est tout simple: il suffit d’entrer un mot clé en rapport avec la commande que l’on cherche dans la barre de recherche, et avec un peu de chance, elle sera dans les résultats. Sinon, dés que vous l’aurez retrouvée, rajoutez la illico, ça servira dans le futur . Le site s’appelle Command-line-fu, et personnellement j’y ai déjà appris deux ou trois petites commandes sympathiques que j’ignorais. A bookmarquer d’urgence .

IRC : l’ancêtre et le concurrent d’MSN

capture d'écran du populaire client mIRC.

Dans le cadre des tutoriels sur le Web 2.0, nous allons évoquer aujourd’hui tout ce qui est discussion par messagerie instantanée:

Alors avant de rentrer dans les détails, rappelons le principe d’un logiciel de discussion instantanée (=chat en ligne): Tous les utilisateurs se connectent à un même serveur internet. Ils peuvent alors y écrire des phrases qui seront vues instantanément par tous les autres utilisateurs. On peut trouver des chats sur divers sites internet. Mais l’usage le plus répandu est de loin le très célèbre MSN.

Le principe de ce dernier est le suivant: chaque utilisateur dispose d’un logiciel installé sur son ordinateur que l’on va appeler client de messagerie. Dans la plupart des cas, il s’agira du célèbre MSN Messenger de Microsoft, mais il peut également s’agir d’une alternative libre comme Pidgin, Gaim, Amsn, etc. L’utilisateur a une liste d’amis dont il sait s’ils sont ou non connectés, et peu choisir d’engager alors un chat avec eux. En général, ce sont plutôt des conversations à deux personnes, mais il est également possible de créer des petits salons entre amis. Et puis en fonction des clients, on peut ajouter pas mal de fonctionnalités, comme par exemple le couplage avec la webcam de l’utilisateur.

En parallèle, il y a  IRC qui est un peu l’inverse d’MSN. Ici, il n’y a pas de liste d’amis. On peut par contre trouver un annuaire des canaux de discussions, afin de rejoindre celui dont le thème nous convient. Il y a des canaux privés, mais également de nombreux canaux publiques. Dans le cadre d’IRC, ce ne sont pas des discussions à deux personnes, même s’il est possible d’en ouvrir en privé, mais bien plus souvent des salons sur lesquels des centaines de personnes peuvent être connectées en même temps (mais ils ne parlent pas tous en même temps bien sûr). Ainsi, alors qu’MSN est plutôt dédié aux conversations privées, IRC a une dimension bien plus communautaire.

Par exemple sur réseau irc://irc.freenode.net, on peut trouver un canal #ubuntu-fr où il y a des gens connectés à toute heure pour discuter d’Ubuntu, proposer leurs problèmes, ou y répondre. L’ennui avec IRC, c’est qu’il n’est pas toujours simple d’installer un client et de le configurer. Je prévois d’expliquer dans un prochain tutoriel comment utiliser Chatzilla, qui est un client libre qui s’installe sous forme d’extension Firefox. En attendant, voici les commandes qui manquent le plus souvent quand on commence avec IRC (toutes ces commandes sont à taper dans la barre de discussion qui est en général en bas du client de messagerie.):

• /attach AdresseDunReseau: pour se connecter à un nouveau réseau IRC. Exemple: pour se connecter au réseau freenode, taper: /attach irc://irc.freenode.net
• /join #NomDeCanal: pour se connecter à un canal de discussion particulier du réseau en cours. Exemple: en supposant que vous veniez de vous être connectés sur Freenode, et que vous vouliez rejoindre le canal #ubuntu-fr, tapez /join #ubuntu-fr
• /attach AdresseDunReseau/NomDeCanal: Combinaison des deux précédents. Par exemple: /attach irc://irc.freenode.net/ubuntu-fr
• /nick NouveauPseudo: pour changer le nom par lequel vous êtes identifié par les autre utilisateurs. Exemple: si je suis connecté sous le pseudo AldiansBlog, et que je veux désormais m’appeler FirefoxFan, je vais taper /nick FirefoxFan

Liens Wikipedia: MSN Messenger, IRC, Messagerie Instantannée

Si vous n’avez plus de son après une mise en veille sous Ubuntu…

Bon je ne sais pas si parmi ceux qui me lisent et qui utilisent Ubuntu, il y en a d’autres qui ont déjà été confrontés à ce problème: On met l’ordinateur en veille ou en hibernation, et lorsqu’on le relance, il n’y a plus de son et on est obligés de redémarrer. Aujourd’hui en particulier, j’ai du m’absenter alors que j’avais 5 ou 6 programmes différents d’ouverts et aucune envie de devoir redémarrer et de tous les relancer à mon retour. Je me suis donc attelé au problème, et une fois de plus la magie de Google a fonctionné: Il suffisait en fait d’ouvrir un terminal et d’y taper la commande suivante:

sudo alsa force-reload

Reste plus qu’à trouver comment automatiser le truc à chaque retour de mise en veille, je vous tiens au courant . Ah oui, et la même combine marche aussi dans le cadre de l’hibernation .

Introduction au langage Java

Je me demande bien pourquoi je n’ai pas encore parlé du java sur ce blog alors qu’il s’agit de mon langage de programmation préféré. Et comme j’ai tout un tas d’astuces à vous faire partager sur ce langage si sympathique, je me devais de faire une courte introduction sur le langage, son utilité, sa raison d’être, etc.

Alors je vais tacher d’être clair et synthétique, ce qui signifie que je risque aussi d’en oublier. Pour les détails, se reporter à l‘article correspondant de Wikipedia (qui est un peu technique). Alors la première chose qu’il faut avoir en tête, c’est qu’autrefois (jusqu’à il y a 15 ans), les ordinateurs n’étant pas rapides, il convenait d’utiliser des langages de programmation très efficaces qui collent beaucoup à la machine pour en tirer une efficacité maximale. Exemples: le C, l’assembleur, voire même le langage machine pour les plus courageux (le langage machine n’apportant en fait pas grand chose de plus que l’assembleur). La contrepartie à payer était la suivante: La programmation était plus compliquée pour  le programmeur, et les programmes étaient dépendants du système d’exploitation et des caractéristiques physiques de l’ordinateur du programmeur.

De nos jours, les objectifs des programmeurs ont cependant changé. On dispose désormais de machines puissantes, et on veut des langages de programmation faciles d’utilisation permettant de faire de belles choses. Dans ce cadre, la programmation objet a de beaux jours devant elle, et le java en est une référence. Voici maintenant les caractéristiques principales de ce langage:

• Programmation Objet
• Sécurité
• Fort typage et bonne Traçabilité des bugs.
• Portablilité
• Facilité d’utilisation et notamment facilité d’interfaçage avec les réseaux de télécommunications et les autres technologies.

Reste à expliquer ce qu’est la programmation objet. Nous verrons cela dans un article ultérieur. La portabilité est sans nul doute l’avantage le plus connu, puisqu’elle permet d’exécuter indifféremment le même langage sur des machines différentes équipées de matériels physiques différents et tournant sous des systèmes d’exploitation différents. Et voici comment ça fonctionne:

Lorsque l’on compile un code java, celui ci est traduit sous forme de bytecode par le compilateur. Le bytecode correspond en gros à une phase intermédiaire de compilation. Il s’agit de la phase la plus poussée jusqu’à laquelle on peut aller avant d’avoir à se préoccuper du système d’exploitation ou des caractéristiques physiques de l’ordinateur.

Ensuite, sur chaque ordinateur où l’on veut exécuter un programme java, on installe un programme que l’on appelle machine java. C’est ce programme qui va se charger d’interpréter le bytecode pour permettre son exécutions sur la machine en question. La machine java dépend bien sûr par contre du système d’exploitation. Alors c’est sûr que ça peut paraitre un peu bête d’un certain point de vue, parce que comparé à un programme écrit dans un autre langage, on installe deux programmes (la machine java +le programme) au lieu d’un seul, et qu’en plus l’exécution sera plus lente vu qu’il faut le temps que le bytecode soit interprété. Mais dés le moment où l’on installe plus d’un programme, on gagne au contraire en place, vu que toute l’interface avec le système est déjà là. Les développeurs gagnent énormément de temps puisqu’au lieu de devoir développer une version de leur programme par système d’exploitation cible, ils n’en ont plus qu’une à développer, et en outre les avantages de facilité d’utilisation, de communication, et de sécurité, alliés à la philosophie de l’orienté objet font du java un langage tout à fait incontournable et très en vogue en ce moment…

Parmis les facilités d’utilisation on notera par exemple le fait que le programmeur n’a plus à se soucier de l’usage de la mémoire. Les allocations et désallocations dynamiques sont gérées par le système de manière automatique grâce notamment à l’existence d’un programme qui tourne en tache de fond, le ramasse miettes (garbage collector en anglais), qui se charge de repérer les objets qui ne sont plus référencés, et ne peuvent donc plus être utilisés par le programme, et qui les désalloue automatiquement.

Bien sûr cet article reste vague, beaucoup de choses n’ont pas été dites, et il faut notamment savoir que tous les avantages cités ont tout de mêmes des limites, mais bon c’était un peu dur de  tout dire en l’espace d’un article .

Apprenez la dactylographie avec Firefox!

Alors voici deux sympathiques extensions que je n’ai pas testées, mais que je vous signale, car je suis tombé dessus totalement par hasard, et qu’au vu du nombre de téléchargement et de la note des critiques, elles doivent vraiment pouvoir rendre service à tous ceux qui n’ont jamais appris à taper au clavier.

La première, Addictive Typing Lessons, vous apprendra la frappe au clavier, et la seconde, Numpad Typing Drills, vous enseignera l’usage du clavier numérique. Voila, bon courage pour devenir des futurs pros de la dactylo, et je rappelle une fois de plus pour tous ceux qui sont novice dans l’installation d’extensions Firefox qu’ils peuvent suivre ce Tutoriel .

Petits jeux dans Firefox…

Mozteroids

Bon ça n’est pas révolutionnaire, mais si vous cherchez un moyen agréable de passer le temps avec Firefox entre deux pannes de connexion par exemple, vous pouvez ajouter des petits jeux sous forme d’extensions. Je n’ai pas eu le temps d’en tester plus que quelques uns, mais je vous en ai sélectionné une liste parmi ceux qui avaient l’air intéressants (cliquez sur l’image pour aller sur la page dédiée à l’extension):

Xultris

Pacman

Numbers Madnss

Clines

Red vs Blue

Froggr

Snake

PingPong

Xoom

Cette liste n’est probablement pas exhaustive. A ceux qui me demanderaient pourquoi il y a si peu de jeux, je dirais qu’à la base Firefox n’est pas fait pour ça, et que ce n’est sans doute ni la manière la plus simple, ni la plus optimisée de faire un jeu. Je rappelle pour tous ceux qui sont novices dans l’installation d’extensions Firefox qu’ils peuvent suivre ce Tutoriel .