TUX-modifier votre page d’accueil

Comment faire de la promotion pour GNU/Linux facilement à vos amis? C’est facile changer pour commencer leurs pages d’accueil à l’effigie de nos mascottes fétiche, effet « Oh qu’ils sont mignon » garanti ^^

Deuxièmement rendre le plus pratique possible notre page d’accueil, j’ai donc placé quelques liens très couramment utilisés dans cette page d’accueil afin d’éviter d’utiliser le moteur de recherche pour aller visiter ces sites.

Et pour un peu plus de confidentialité (bon certes j’ai mis un lien facebook, c’est en attendant Diaspora :P) j’ai utilisé que des liens et google en HTTPS😀

La recherche sécurisée et les liens HTTPS peuvent servir contre toute personne malintentionnée qui souhaiterait espionner vos activités, contre le web analytics etc… Mais les sociétés continuerons d’enregistrer vos requêtes, qui pourront être fournies à la Justice si besoin est.

En espérant que cette idée vous inspires à faire de même, voici donc le code de ma page d’accueil:

gnougle.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Gnougle</title>
<link type="text/css" href="css/style.css" rel="stylesheet" media="screen" />
</head>
<body>
<div id="global">
  <ul>
    <li><a title="" href="https://maps.google.fr/">Maps</a></li>
    <li><a title="" href="https://login.yahoo.com/config/mail?&amp;.src=ym&amp;.intl=fr">Ymail</a></li>

    <li><a title="" href="https://mail.google.com/">Gmail</a></li>
    <li><a title="" href="https://www.mail.com/intl/">Mail.com</a></li>
    <li><a title="" href="https://login.live.com/">Live</a></li>
    <li><a title="" href="https://www.facebook.com/">Facebook</a></li>
    <li><a title="" href="https://fr.wordpress.com/">WordPress</a></li>
    <li><a title="" href="https://wiki.ubuntu.com/">Wiki-Ubuntu</a></li>

    <li><a title="" href="https://launchpad.net/">Launchpad</a></li>
    <li><a title="" href="https://secure.wikimedia.org/wikipedia/fr/wiki/">Wikipédia</a></li>
    <li><a title="" href="https://ssl.scroogle.org/scrapfr8.html">Scroogle</a></li>
    <li><a title="" href="https://www.ixquick.com/fra/">Ixquick</a></li>
  </ul>
  
  <p><img title="" alt="" src="https://hackurx.files.wordpress.com/2010/10/gnougle.jpg" /></p>
  
  <form action="https://encrypted.google.com/search?hl=fr&amp;source=hp&amp;q=">

    <p>
      <input type="text" name="q" value="" />
      <input id="submit" type="submit" value="Lancer la recherche sécurisée" />
    </p>
  </form>
</div>
</body>
</html>

css/style.css :

* {
  margin: 0;
  padding: 0;
}
a, a:link, a:visited, a:active, a:hover {
  color: blue;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
body {
  background: #efefef;
}
#global {
  font-size: 15px;
  font-family: freeserif, serif;
}
ul {
  padding-top: 10px;
  text-align: center;
}
li {
  display: inline;
  padding-left: 5px;
}
img {
  display: block;
  margin: 0 auto;
  padding-top: 10px;
}
form, input {
  width: 488px;
}
form {
  margin: 20px auto 0 auto;
}
input {
  height: 28px;
}
input#submit {
  width: 492px;
  height: 32px;
  margin-left: 1px;
}

Un grand merci à EauLand pour avoir amélioré mon code😀

18 réponses à “TUX-modifier votre page d’accueil

  1. Comment faire la promo de GNU/Linux ?

    Peut-être en montrant que l’on sait coder ?

    – 1 / balises en minuscule
    – 2 / utiliser du xhtml ou html5
    – 3 / apprendre les css

  2. Pour ce qui est de la sécurité avec le protocole https… heu… y a qu’à lire l’article sur Wikipédia qui relate la belle attaque du type « man in the middle » à la Blackhat Conference 2009… pour s’en assurer.

  3. Milko92, Borwenghar vous pouvez corriger mon code (et me l’envoyer par e-mail) je l’éditerais avec plaisir, car en même temps j’ai jamais eu de cours en langage HTML, donc mes notions en autodidacte ne demandent cas être renforcées ^^
    Christophe, certes tu as raison mais c’est déjà mieux que le HTTP😉

  4. Re,

    Dans ton code il faut que tu modifies la ligne

    en mettant le chemin vers ton image.

    Sinon il faut aussi que tu mettes à disposition les lignes du fichier css.
    http://www.eauland.com/delire/gnougle/css/style.css

    Sinon pour le https c’est normal que firefox disent que ce n’est pas certifié puisque je ne paye pas un organisme mais que je dis moi-même que mon site est sur (d’où la mention auto-signé dans mon post précédent).
    😉

  5. Salut,

    Lorsque la page n’est plus destinée à évoluer tous les 4 matins l’embarquement des styles & images s’avère une excellente option pour simplifier la diffusion : un seul fichier. Plus question de s’embêter avec des chemins relatifs ou absolus, à copier les répertoires en respectant les droits, des noms de fichiers incompatibles avec le système d’exploitation …

    La version de Eauland avec tout embarqué :
    code : http://dpaste.org/GCpq/
    en live : http://www.jemegarecommeunconnard.com/~gedeon/gnougle.html

    Fichier / Enregistrer sous … et c’est fini.

  6. @jmgcuc: ça fait longtemps qu’on ne met plus les CSS avec le HTML

    @Anonyme: Pour prendre le focus faut pas chercher midi à 14h.

    A la ligne 08, tu remplaces:

    body

    par,

    body onload= »document.getElementById(‘q’).focus(); »

    Puis à la ligne 32, tu rajoutes un id:

    ce qui donne

    input id= »q » type= »text » etc…

    Tu peux voir ce que ça donne sur le lien que j’ai donné dans mon 1er post.

    • @EauLand : Ça fait surtout longtemps que beaucoup de webmaster ont perdu le bon sens. Quel intéret de déporter le css et le contenu pour une seule page dont le contenu ne va pas évoluer.

      Bien entendu, dans la majorité des cas, la séparation du contenu de la forme est plus que du bon sens.

      En fait, il faut toujours comprendre ce que l’on fait : s’affranchir des dogmes, sortir des sentiers battus et tracer son chemin😉

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s