Publié par Arnaud le 26 mai 2009 dans
Vu sur le Web 
Dernièrement, j’ai acheté un macBook et je suis tombé, par hasard, sur un tuto qui expliquait comment réaliser une station d’accueil (ou laptop stand) en carton. J’ai essayé de le faire et c’est plutôt pas mal pour le dual screen 
. J’avais peur pour la solidité de la chose mais en fait, il s’avère que le carton résiste bien au poid de l’ordinateur.
Plus de photos sur mon FlickR
Pour télécharger les gabarits et avoir plus d’info c’est par là : http://greenupgrader.com/7603/diy-cardboard-laptop-stand/
Publié par Arnaud le 20 mai 2009 dans
Développement,
Réalisations C’est à la suite d’une visite sur le site d’Apple que je suis tombé sur leur barre de menu (très réussi, au passage). Par curiosité, j’ai affiché l’image de fond et je suis tombé sur ça :
Menu Rollover Apple
Une image qui réunit les différents « états » (classique, survol, clic) du menu. Ca ma donné une idée de tuto pour créer des menus rollover en CSS. L’intérêt de celui-ci, c’est qu’il ne fait pas appel au javascript et qu’il sera donc affiché sur tous les navigateurs.
¤ Etape 1 : Préparer le terrain
On commence par lier notre feuille de style avec notre page HTML grâce à la balise :
<link rel="stylesheet" type="text/css" href="./style.css">
Ensuite, on va ajouter un conteneur pour notre menu. Celui-ci sera tous simplement un div :
<!--Début du conteneur menu -->
<div class="menu">
</div>
<!--Fin du conteneur menu-->
Dans notre feuille de style, on va initialiser les marges et centrer notre conteneur :
BODY{
margin:10px;
padding:10px;
}
p,ul,a{
margin:0px;
padding:0px;
}
.menu{
width:982px;
margin:0 auto 0 auto; /* Pour centrer horizontalement notre menu */
height:36px;
border:1px solid black; /* Pour vérifier le centrage */
}Avec tous cela, on a maintenant une page avec un div centré et à la bonne dimension.
¤ Live démo de l’étape 1 là : http://www.arnaudbosquet.fr/tutos/css/etape1/
¤ Etape 2 : Mettre en place le menu
On va maintenant placer les différentes catégories du menu à l’aide de la balise <a>et leur attribuer une classe css. Notre code HTML ressemble à ça :
<div class="menu">
<a class="m_accueil"></a>
<a class="m_store"></a>
<a class="m_mac"></a>
<a class="m_ipod"></a>
<a class="m_iphone"></a>
<a class="m_telec"></a>
<a class="m_support"></a>
<a class="m_search"></a>
</div>
Tout le travail va être fait dans notre feuille de style. Pour chaque élément, on va placer l’image en background. L’attribut float:left, va quant à lui, nous permettre d’avoir les div sur une seule ligne. On simplifiera notre feuille de style plus tard. Et voici le travail :
.menu{
width:982px;
margin:0 auto 0 auto;
height:36px;
/*border:1px solid black;*/
}
.m_accueil{
background:url('./menu.png') no-repeat 0px 0px;
width:118px;
height:37px;
float:left;
}
.m_store{
background:url('./menu.png') no-repeat -118px 0px;
width:117px;
height:37px;
float:left;
}
.m_mac{
background:url('./menu.png') no-repeat -235px 0px;
width:117px;
height:37px;
float:left;
}
.m_ipod{
background:url('./menu.png') no-repeat -352px 0px;
width:117px;
height:37px;
float:left;
}
.m_iphone{
background:url('./menu.png') no-repeat -469px 0px;
width:117px;
height:37px;
float:left;
}
.m_telec{
background:url('./menu.png') no-repeat -586px 0px;
width:117px;
height:37px;
float:left;
}
.m_support{
background:url('./menu.png') no-repeat -703px 0px;
width:117px;
height:37px;
float:left;
}
.m_search{
background:url('./menu.png') no-repeat -820px 0px;
width:161px;
height:37px;
float:left;
}Nos catégories sont placées, le menu est presque prêt, sauf qu’il est statique
¤ Live démo de l’étape 2 là : http://www.arnaudbosquet.fr/tutos/css/etape2/
¤ Etape 3 : Animation du menu
Ajoutons un peu de vie à ce menu. Pour cela, tout va se passer dans notre css. Grâce aux propriétés :hover et :active, on va pouvoir définir un style pour le survol ou le clique. Dans notre cas, le style sera le même mis à part le décalage sur la hauteur du background.
On va aussi simplifier notre css grâce à l’héritage. En effet, toutes nos catégories sont définies par des balises <a> et celles-ci sont à l’intérieur du div qui a la classe menu.
.menu a{
height:37px;
float:left;
}Le bout de code ci-dessus va permettre d’attribuer ces mêmes propriétés pour toutes les balises <a> contenu dans le div qui a la classe menu.
Notre feuille de style complète et finie :
.menu{
width:982px;
margin:0 auto 0 auto;
height:36px;
/*border:1px solid black;*/
}
.menu a{
height:37px;
float:left;
}
.m_accueil{
background:url('./menu.png') no-repeat 0px 0px;
width:118px;
}
.m_accueil:hover{
background:url('./menu.png') no-repeat 0px -38px;
}
.m_accueil:active{
background:url('./menu.png') no-repeat 0px -76px;
}
.m_store{
background:url('./menu.png') no-repeat -118px 0px;
width:117px;
}
.m_store:hover{
background:url('./menu.png') no-repeat -118px -38px;
}
.m_store:active{
background:url('./menu.png') no-repeat -118px -76px;
}
.m_mac{
background:url('./menu.png') no-repeat -235px 0px;
width:117px;
}
.m_mac:hover{
background:url('./menu.png') no-repeat -235px -38px;
}
.m_mac:active{
background:url('./menu.png') no-repeat -235px -76px;
}
.m_ipod{
background:url('./menu.png') no-repeat -352px 0px;
width:117px;
}
.m_ipod:hover{
background:url('./menu.png') no-repeat -352px -38px;
}
.m_ipod:active{
background:url('./menu.png') no-repeat -352px -76px;
}
.m_iphone{
background:url('./menu.png') no-repeat -469px 0px;
width:117px;
}
.m_iphone:hover{
background:url('./menu.png') no-repeat -469px -38px;
}
.m_iphone:active{
background:url('./menu.png') no-repeat -469px -76px;
}
.m_telec{
background:url('./menu.png') no-repeat -586px 0px;
width:117px;
}
.m_telec:hover{
background:url('./menu.png') no-repeat -586px -38px;
}
.m_telec:active{
background:url('./menu.png') no-repeat -586px -76px;
}
.m_support{
background:url('./menu.png') no-repeat -703px 0px;
width:117px;
}
.m_support:hover{
background:url('./menu.png') no-repeat -703px -38px;
}
.m_support:active{
background:url('./menu.png') no-repeat -703px -76px;
}
.m_search{
background:url('./menu.png') no-repeat -820px 0px;
width:161px;
}Pour ajouter des liens sur nos catégories, il suffit d’utiliser la propriété href comme ci-dessous :
<a class="m_accueil" href="#"></a>
¤ Live démo du menu rollover en css c’est là : http://www.arnaudbosquet.fr/tutos/css/etape3/
A vous de jouer
Publié par Arnaud le 17 mai 2009 dans
Développement Je vais publier un bout de script qui pourra peut être servir à quelqu’un. Une chose est sûre, c’est que ce code, écrit il y a quelques années, est totalement dépassé Mais, ça peut toujours servir pour une base ou quelque chose.
Le but était de faire un menu rollover (l’image change au survol). L’intérêt de celui-ci, c’est qu’il est en javascript, et mal codé… euh Si une personne a désactivé l’exécution du javascript, elle ne verra pas l’effet. L’intérêt, par contre, c’est qu’il tient en 6 lignes de code.
Pour commencer, il vous faut deux images, une classique, l’autre pour le survol. L’astuce est de nommer l’image pour le survol avec un « _roll » après le nom. Dans notre cas, on a celles-ci :
 |
bouton2.gif |
 |
bouton2_roll.gif |
 |
bouton2.gif |
 |
bouton3_roll.gif |
| Et ainsi de suite… |
Le code javascript qui sera appelé à chaque survol d’une image du menu :
<script language="javascript" type="text/javascript">
function roll(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('bouton'+i)) {document.getElementById('bouton'+i).src='./img/bouton'+i+'.gif';}
}
if (d) {d.src='./img/'+id+'_roll.gif';}
}
</script>Le code HTML pour le menu :
<img id="bouton2" onmouseover="javascript:roll(this.id);" src="./img/bouton2.gif" border="0" alt="" />
<img id="bouton3" onmouseover="javascript:roll(this.id);" src="./img/bouton3.gif" border="0" alt="" />
<img id="bouton4" onmouseover="javascript:roll(this.id);" src="./img/bouton4.gif" border="0" alt="" />
Voilà, le menu rollover est maintenant actif. Une live démo est dispo là : http://www.arnaudbosquet.fr/tutos/roll_javascript/
Bon, j’ai écrit ce code il y a 3 ans. Il n’est donc pas très optimisé.
On peut faire un menu rollover beaucoup plus complet uniquement en CSS mais ça sera dans le prochain article
Publié par Arnaud le 7 mai 2009 dans
Développement,
Vu sur le Web L’ajax est maintenant devenu un « langage » incontournable sur le net. J’ai sélectionné 4 exemples qui montrent que ce n’est pas seulement un phénomène de mode mais qu’il peut apporter un véritable plus dans le confort de navigation.
¤ Protoload – http://aka-fotos.de/protoload/
L’ajax a permis de charger de manière asynchrone des pages et des conteneurs. Comprenez par là, qu’il est possible de charger une partie de la page sans recharger entièrement la page principale.
Le script Protoload permet de mettre une image lors du chargement du conteneur. Un script bien pratique avec des exemples sur le site.
¤ Humanized Messages – http://binarybonsai.com/misc/humanmsg/
Ce script est un exemple parfait des possibilités offertes par ajax pour permettre l’affichage d’information de façon non intrusive. C’est plutôt bien réussi. Le script est téléchargeable sur le site.
¤ JQuery Checkbox – http://widowmaker.kiev.ua/checkbox/
Ce script permet, quant à lui, de personnaliser les biens tristes checkbox dans les formulaires. Exemple et téléchargement sur leur site.
¤ iCarousel – http://zendold.lojcomm.com.br/icarousel/example6.asp
Pour finir, un tuto pour réaliser un effet très à la mode, un carroussel d’image. Celui-ci est plutôt fluide.
Publié par Arnaud le 6 mai 2009 dans
Bidouille ton PC Microsoft vient de mettre en ligne un service de téléchargement pour la Release Candidate de Windows 7. Avant le téléchargement de l’iso (vous aurez le choix entre la version 32 ou 64 bits), un numéro de série vous sera délivré.
Le téléchargement de l’image iso se fait grâce à un gestionnaire de téléchargement en Java. Celui-ci a plutôt bien répondu lors de mes divers plantages de connexion.
Après la gravure de votre iso, vous pourrez installer et tester cette nouvelle mouture de Windows. Je n’ai pas pris beaucoup de temps pour tester la chose mais ce qu’on peut dire c’est que l’installation se fait rapidement.
Pour tester par vous même, vous pouvez vous rendre sur cette page : http://www.microsoft.com/windows/windows-7/download.aspx
Publié par Arnaud le 25 avr 2009 dans
Réalisations Juste un petit mot pour vous dire que j’ai récupéré la création d’un nouveau site web. J’fais un peu de teasing, je ne dis pas le thème Je suis en train de faire la maquette (la phase de WebDesign j’adore )
Ca s’annonce plutôt pas mal…
Publié par Arnaud le 8 avr 2009 dans
Tambouille interne 
Depuis quelque temps, je teste le fameux service « Twitter ». Au début je n’y comprenais rien et je n’y voyais aucun intérêt, sauf qu’à force de faire des « twitts » je me suis pris au jeu. Ceux qui veulent me suivre sur twitter peuvent le faire en cliquant sur l’oiseau en haut à droite ou en cliquant là : Follow me.
Petite note aussi concernant les gravatars. Derrière ce nom bizarre se cache un système (centralisé) bien pratique intégré à la plateforme Wordpress. Celui-ci permet d’afficher un avatar personnalisé dans les commentaires des billets d’un blog (comme ici).
Lire la suite…
Publié par Arnaud le 5 avr 2009 dans
Réseau informatique La dernière PTI d’Administrateur réseaux avec l’administration et le trunk de vlan avec des Switchs 3com. Très rigolo à faire
Lire la suite…
Publié par Arnaud le 5 avr 2009 dans
Réseau informatique Une nouvelle PTI d’Administrateur réseaux avec la mise en place d’un DHCP, d’un routage, d’un partage de connexion et d’un Firewall sous Coyote Linux
Il y a aussi un peu de QoS 
Lire la suite…
Publié par Arnaud le 1 avr 2009 dans
Vu sur le Web Ce matin, j’ai reçu une newsletter sympa de la part de PhotoWeb. Ca concernait un nouveau produit : le tirage photo animé. Apparemment, cela fonctionne grâce à un nouveau papier qui réagit au soleil…
Plus d’info ici : http://www.photoweb.fr/lettre-information/lettre-info-090401.html
Qui s’est fait avoir ?
Publié par Arnaud le 26 mar 2009 dans
Réseau informatique On continue sur les PTI d’Administrateur réseaux avec la mise en place d’un DHCP, d’un routage et d’un partage de connexion sous Windows Serveur
Lire la suite…
Publié par Arnaud le 26 mar 2009 dans
Réseau informatique Chose promise, chose due. Je vais mettre les PTI (Pratique des Techniques Informatiques) que j’ai passé l’année dernière pour mon BTS. C’est des PTI d’Administrateur réseaux, désolé pour les développeurs
On commence avec la mise en place d’un RAID1 sous W2k3.
Lire la suite…
Publié par Arnaud le 10 mar 2009 dans
Tambouille interne J’ai enfin terminé de mettre à jour mon CV. Vous pouvez le télécharger en cliquant ici (ce n’est pas une obligation non plus, hein )
Au passage, j’ai testé scribd.com qui permet d’afficher les documents courants (pdf, pps, doc) dans un lecteur flash. C’est franchement pas mal 
Publié par Arnaud le 16 fév 2009 dans
Vu sur le Web Aujourd’hui c’est lundi, donc j’inaugure une nouvelle rubrique : « Vu sur le Net ».
Dans cette rubrique, je vais partager les liens et des petites choses rigolotes que je trouve (ou qu’on me fait suivre) sur le Web.
Pour la première, on va faire rapide avec deux petites erreurs rigolotes
Lire la suite…
Publié par Arnaud le 14 fév 2009 dans
Développement Ah les requêtes SQL parfois c’est génial, parfois on se prend la tête pour une petite requête. Ici, pas d’interaction avec un langage de programmation, uniquement des requêtes SQL.
Lire la suite…
