Publié par Arnaud le 28 juin 2010 dans
Développement Quand on a des scripts ASP qui tournent dans les même dossiers que du PHP, c’est un peu la galère. Sur le même serveur tourne un serveur Apache (pour le PHP) & un serveur IIS (pour l’ASP).
L’astuce consiste à faire écouter le serveur d’IIS sur le port 81.
On fait ensuite une règle de redirection d’url dans un fichier .htaccess qui retranscrit l’url si c’est une page ASP. Ce qui donne :
Options +FollowSymlinks
RewriteEngine on
RewriteRule ^(.+.asp)$ http://votredomaine:81/conges/$1
Voilà
Publié par Arnaud le 19 mai 2010 dans
Développement Imaginons que vous avez un MAMP qui tourne sous votre Mac et que vous souhaitez importer un dump SQL d’une autre base.
Voici ce qu’il faut faire :
- Ouvrir un Terminal (Applications -> Utilitaires -> Terminal)
- Lancer la commande suivante :
cd /Applications/MAMP/Library/bin/
- Puis :
./mysql -u USER -p DBNAME < sql.dump
En veillant bien à remplacer :
- USER par l’utilisateur ayant les droits sur la base (bien souvent l’utilisateur root)
- DBNAME par le nom de la base dans lequel vous souhaitez importer votre dump
Si votre dump se trouve dans le dossier téléchargement vous pouvez y accéder avec le chemin suivant : /Users/VOTRENOM/Downloads/sql.dump
Ce qui donnera avec la commande suivante :
./mysql -u USER -p DBNAME < /Users/VOTRENOM/Downloads/sql.dump
Publié par Arnaud le 10 juil 2009 dans
Développement,
Réalisations Même si nous avons eu que très peu de cours de Flash cette année, nous devions rendre à la fin du trimestre un lecteur MP3 codé en AS3 avec des classes.
Celui-ci devait prendre en compte une playlist gérée par à un fichier xml et pleins d’option que l’on trouve sur un tas de player identique. Je mets mes sources à disposition car j’ai bien commenté le code et je me dis que ça pourra peut être servir à quelqu’un.
Si vous voulez tester mon lecteur, c’est par là
Pour télécharger mes sources, (fichiers .as, .fla,…) c’est par ici
Les sources sont aussi dispo dans la suite…
Lire la suite…
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 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…
