Archives du mot-clé Web

Virgin Mobile et iPhone 3G : petit bilan

Depuis décembre 2010 la manipulation ci-dessous n’est plus nécessaire, Virgin Mobile supporte maintenant les iPhones de manière officielle. Il suffit de connecter l’iPhone à iTunes et d’accepter la mise à jour des informations de l’opérateur.

Attention, cette manipulation ne fonctionne pas avec iOS 4. Pour ce dernier et pour l’iPhone 4 lisez ce billet.

Depuis un certain temps, Virgin Mobile propose un forfait défiant toute concurrence : en partant d’une carte SIM à 1€ (et donc sans téléphone), il est possible de s’offrir 5 heures de communication, des SMS illimités, Internet et des e-mails illimités pour seulement 29,90 €/mois ! À ce prix, il faut savoir deux choses…

L’iPhone et Virgin Mobile

L’iPhone n’est pas officiellement supporté par Virgin Mobile, il faut comprendre par cela que quand on met sa carte SIM dans son iPhone désimlocké, on se retrouve juste avec le téléphone. Il faut bricoler un peu pour le reste. Après quelques recherches j’en ai conclu que Virgin et Apple n’avaient pas de contrat et que, par conséquent, Virgin ne peut pas diffuser sa configuration spécifique via iTunes comme le font les autres opérateurs. Voici comment faire (sur Mac) pour récupérer une configuration qui va bien:

  1. Récupérez tout d’abord un profil IPCC qui va bien comme celui-là ou comme le mien,
  2. déverouillez iTunes pour envoyer le profil avec la commande suivante (à taper dans le terminal): defaults write com.apple.iTunes carrier-testing -bool TRUE
  3. implantez le dans l’iPhone en faisant un [alt] + Clique droit sur le bouton Mettre à Jour et sélectionnez le fichier que vous avez téléchargé.

Et voilà (merci à ForumMobiles.com et à iPhoneFr.com) !

La connexion à Internet chez Virgin Mobile

Enfin, un point très important à souligner avec de s’abonner chez Virgin Mobile… Ils vendent de la 3G/3G+ et c’est bien comme cela que, techniquement, vous êtes connecté à Internet. Par contre, Orange qui vend son service à Virgin (qui n’est qu’un opérateur virtuel) bride la bande passante à 360 kb/s pour les clients de Virgin, on est bien loin des débits maximums théoriques !

Un joli champ de recherche

C’est fou le temps qu’on perd quand on a oublié comment on faisait si simplement quelque chose. Dans le thème de mon blog WordPress, j’ai intégré un bouton de recherche propriétaire de Safari super sympa. Par contre, il m’a fallu un peu de temps pour en réaliser un équivalent pour les autres navigateurs ! L’idée était de partir d’un bouton de recherche basique avec un texte d’accroche qui s’efface quand on clique dans le champ, un petit logo dans le coin et des bords arrondis. Voici donc une méthode pas à pas.

Tout d’abord, voici un formulaire basique, c’est-à-dire un champ sans bouton qui lance automatiquement la recherche quand on tape entrée :

?Afficher le code HTML4STRICT
<form action="MonAction" method="get">
<input name="s" type="text" />
</form>

Je vais lui appliquer un style spécifique avec des couleurs sobres et des bords arrondis. Pour cela, je rajoute un paramètre « class » à mon champ de recherche.

?Afficher le code HTML4STRICT
<form action="MonAction" method="get">
<input class="recherche" name="s" type="text" />
</form>

Grâce à cet élément, je vais pouvoir appliquer un style à mon champ de recherche avec CSS3 en modifiant ma feuille de style. Les instructions qui suivent sont suffisamment commentées pour que vous compreniez chaque propriété.

.recherche {
	/* Définition de bordure grise supérieure */
	border-top: solid 2px rgb(135,135,135);
 
	/* Ajout du logo en forme de loupe */
	background-image: url("lens.png");
	background-repeat:no-repeat;
 
	/* Marge à gauche pour ne pas écrire sur la loupe */
	padding-left: 20px;
 
	/* Le bloc qui suit défini les bords arrondis */
	/* Attention, IE n'est pas compatible */
	border-radius: 10px;			/* instruction standard */
	-moz-border-radius: 10px;		/* spécifique Mozilla */
	-webkit-border-radius: 10px;		/* spécifique WebKit (Safari, Chrome etc.) */
	-opera-border-radius: 10px;		/* spécifique Opera */
}

Il me reste maintenant à gérer l’affichage d’une invite de texte. La solution adoptée consiste à définir une valeur par défaut. Pour que cette valeur disparaisse avant la saisie il faut aussi ajouter un événement qui, lors du clic de souris, l’efface.

?Afficher le code HTML4STRICT
<form action="MonAction" method="get">
<input class="recherche" onclick="this.form.MonNom.value="" name="s" type="text" value="rechercher" />
</form>

Et voilà pour la syntaxe. Afin de l’adapter à vos usages, prenez bien soin de corriger l’action et le nom. Une version WordPress de la chose ressemblerait à ceci :

?Afficher le code HTML4STRICT
<form action="&lt;?php bloginfo('home'); ?&gt;" method="get">
<input id="s" class="recherche" onclick="this.form.MonNom.value="" name="s" type="text" value="rechercher" />
</form>

Téléchargez ici le fichier exemple de cet article.

Champ de recherche façon Apple

Parmi les fonctions non documentées de Safari, il existe une fonction qui permet d’activer une boîte de recherche façon Apple dans ses sites Web. Voici comment faire !

Le bouton de recherche pour Safari

Normalement, on crée un champ de recherche de la façon suivante (attention c’est un exemple qui sera non fonctionnel si vous ne corrigez pas l’action) :

?Afficher le code HTML4STRICT
<form action="MonAction" method="get">
      <input name="MonNom" type="text" />
</form>

Pour ajouter le look Apple, il suffit de rajoute le morceau de code autosave="bsn_srch", et on spécifie le nombre de recherches a garder en mémoire avec results="5" et on remplace type="text" par type="search", ce qui donne ceci :

?Afficher le code HTML4STRICT
<form action="MonAction" method="get">
      <input name="MonNom" type="search" />
</form>

Plus d’information (en anglais) à propos de ce sujet sur BrandSpankingNew. Ces portions de code n’étant pas reconnues par le W3C, vous verrez apparaître des erreurs sur le Markup Validation Service.

Pour le texte qui disparait quand on clique dessus il faut utiliser une autre balise spécifique, placeholder="rechercher sur ce site…" remplacera value="rechercher sur ce site…".

Charger une police dans un site Internet, IE vs CSS3

J’ai refait tout le thème de mon site Internet en privilégiant au maximum les instructions CSS3. Aujourd’hui, j’ai commencé à me pencher sur le cas d’Internet Explorer qui ne les supporte pas encore. La grande question était de savoir comment intégrer une police de caractère spéciale pour le site. Dans mon cas de figure, il s’agit de la police de type manuscrite qu’on retrouve dans les méta-informations du site et en légende des photos. En règle générale, avec CSS3, il suffit de copier le fichier de la police dans un sous-répertoire du site et de le précharger de la façon suivante.

@font-face {
	font-family : 'Aenigma Scrawl';
	src: url('fonts/aescrawl.ttf') format('truetype');
}

Une fois chargée, on peut alors l’utiliser avec les instructions habituelles de type font ou font-family. Dans le cas d’Internet Explorer, c’est sensiblement différent, car il faut utiliser une police EOT (Embedded OpenType) de Microsoft et limiter les paramètres, j’ai donc deux fichiers de police dans mon sous-répertoire et j’appelle celui de EI de la manière suivante.

@font-face {
	font-family : 'Aenigma Scrawl';
	src: url('fonts/aescrawl.eot');
}

Enfin, le petit truc intéressant est de savoir comment on peut transformer un TTF en EOT et pour cela je vous invite à utiliser le site Sebatian Kippe. Si vous voulez récupérer la police en question, il s’agit de Aenigma Scrawl.

Adapter le nuage de tags de WordPress

WordPress dispose d’un widget nuage de tag (comme avec le bouton « mots-clef » en haut de page). Il est possible de passer des paramètres spécifiques à ce widget pour en modifier l’aspect ou le comportement, on peut le faire directement à la source en modifiant le fichier /wp-includes/category-template.php mais une telle modification pourrait poser problème si on met à jour le moteur de WordPress. D’autres sites, comme celui Orzeszek, préconisent la création d’un plugin pour WordPress.

Pour ma part, je voulais configurer mon nuage de tag pour qu’il soit compatible à la fois avec l’utilisation des widget ou avec la sidebar par défaut mais aussi pour qu’il soit rattaché à mon thème. Il a donc été judicieux j’adapter le fichier functions.php de mon thème, en m’inspirant du travail de Orzesek pour y ajouter ceci :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function change_tag_cloud_options($args = array()) {
	$args['smallest']	= 8;
	$args['largest']	= 16;
	$args['unit']		= 'pt';
	$args['number']		= 45;
	$args['format']		= 'flat';
	$args['separator']	= ' ';
	$args['orderby']	= 'name';
	$args['order']		= 'DSC';
	$args['exclude']	= '';
	$args['include']	= '';
	$args['link']		= 'view';
	$args['taxonomy']	= 'post_tag';
	$args['echo']		= true;
	return $args;
}
add_filter('widget_tag_cloud_args', 'change_tag_cloud_options', 90);

Cette manipulation permet de passer des paramètres personnalisés à la fonction de nuage de tag tel que décrite dans le codex de WordPress.