Trier par :
View:

Catégorie : trucs et astuces

Placeholder pour textes et images : créez des textes et images vides pour votre design !


Pendant la réalisation d’un site web, il est utile de mettre du contenu afin de mettre en place le design de ce dernier. Ce contenu n’a pas forcément besoin d’être compréhensible. Il peut s’agir :

  • d’un texte afin de montrer la police, des news, etc ;
  • d’images à placer dans le design.

 

Le problème de ce système est que le texte créé ainsi que les images seront supprimés une fois le graphiste ou le client passé par là. Prendre du temps pour créer du texte réaliste ainsi que de jolies images est donc une perte de temps et peut être rapidement coûteux pour une entreprise ! Mais des solutions existent… On appelle ça un placeholder.

 

Placeholder pour texte : lorem ipsum

Dans un premier temps il est utile de remplir un site web par des textes même si ceux-ci n’ont ni queue ni tête. Pour ce faire, il existe ce qui est appelé le lorem ipsum. Ce dernier permet d’aider à la mise en page et ressemble à du latin. De nombreux sites existent pour en générer  dont le très bon lipsum.com. Au milieu du site vous pourrez configurer la quantité de texte voulue :

Création de texte lorem ipsum

L’utilisation est simple et intuitive, vous choisissez la quantité de texte voulue et le type de texte : des paragraphes, mots, caractères ou listes. Une fois le texte généré vous pourrez l’intégrer à vitre site.

 

Placeholder pour images : fakeimg

Pour ce qui est des images, l’affaire peut sembler plus compliquée. Bien évidemment il est possible d’ouvrir un logiciel comme Paint et de générer une image, grise par exemple, aux dimensions que l’on veut. Cependant, qu’arrive-t-il si l’on décide de changer l’image d’un pixel seulement ? Puis finalement en ajouter 10 de plus ? Il faudrait encore ouvrir le logiciel pour changer l’image et perdre un temps fou ?

Des développeurs ont eu l’idée de créer un site contenant une API afin de créer des images le plus simplement du monde. Ce site s’appelle fakeimg.pl. Nous allons apprendre à nous en servir. Pour créer une image de 200×200 pixels, il suffit de se rendre à l’adresse suivante : http://fakeimg.pl/200×200/. Résultat :

Placeholder sous forme d'image

Pour obtenir une image aux dimensions différentes il suffit de remplacer le premier nombre « 200 » par la largeur voulue et le second par la hauteur voulue. Simple non ? Eh bien il est possible d’aller plus loin ! Pour l’instant, la couleur est grise mais il est possible de créer une image jaune par exemple : http://fakeimg.pl/400×200/fff000/. Résultat :

Placeholder custom : jaune et taille personnalisée

 

 

Vous l’aurez compris, il suffit de changer la valeur « fff000 » par la valeur hexadécimale de la couleur que vous souhaitez. Maintenant nous pouvons préciser la couleur du texte avec un autre paramètre : http://fakeimg.pl/400×200/fff000/000/. Résultat :

Placeholder custom : jaune et couleur de texte personnalisée

 

Là aussi, il suffit de remplacer le code « ooo » par la couleur du texte. Enfin, le texte peut a tout moment changer afin d’éviter que ce soient les proportions de l’image qui soient affichées. Il est aussi possible de changer la police du texte. Testons cela avec l’URL http://fakeimg.pl/350×200/ff0000/000/?text=Hello%20World&font=lobster :

Placeholder custom : rouge et texte personnalisé

 

Vous pouvez désormais utiliser ce site pour générer tout type d’images n’ayant pas besoin d’être graphiques. Pour les intéger sur votre site il y a 2 solutions : soit vous enregistrez l’image sur votre ordinateur, soit vous mettez le lien du site directement dans la balise « img » de la façon suivante :

<img alt="" src="http://fakeimg.pl/350x200/?text=World&font=lobster" />

Vous avez maintenant toutes les cartes en main pour mettre du contenu sur vos sites et vous concentrer sur les fonctionnalités et le design !

Programmation iPhone – Cacher la barre de status de son application


Lorsque l’on programme pour iPhone, on commence par choisir un projet de base parmi ceux proposés par Xcode (Navigation-based Application, OpenGL ES Application, Split View-based Application, etc.). Cette phase a pour but de préparer un projet plus ou moins préparé pour le type d’application que l’on cherche à créer. Cependant, dans un certain nombre de ces projets, lorsque l’on en crée un et qu’on lance le simulateur, on s’aperçoit que la barre de status de l’iPhone est présente. Dans l’exemple ci-dessous, j’ai créé un projet « Navigation-based Application » appelé « Exemple », puis lancé le simulateur en cliquant sur le bouton « Run » :

 

Nous allons maintenant voir comment cacher cette barre de status gênante.

 

ATTENTION : la barre de status permet d’afficher à l’utilisateur certaines informations comme l’état de sa réception réseau, l’heure actuelle ainsi que son niveau de batterie. Cacher cette barre ne doit se faire que pour améliorer le confort de son application et donc seulement en cas de nécessité. Le meilleur exemple est celui d’un jeu vidéo pour iPhone dans lequel la barre de status est bien plus gênante qu’utile.

 

Si vous regardez bien votre projet, vous vous apercevrez que celui-ci comporte un dossier appelé « Supporting Files ». Déroulez le pour faire apparaître son contenu. Parmi ces fichiers, un seul nous intéresse : « exemple-Info.plist ». Cliquez dessus pour voir son contenu s’afficher sur la droite. Ce fichier contient certaines informations utiles pour votre application. Nous allons en ajouter une, celle demandant à l’iPhone de masquer la barre de status. Pour cela, faites un clic droit n’importe où dans ce document puis sélectionnez « Add Row » (ajouter une nouvelle ligne). Une clé vous est demandé, commencez à taper « Status » et vous verrez que Xcode vous propose de remplir le champ key par « Status bar is initially hidden ». Cliquez dessus (ou tapez l’intégralité de la clé comme vous voulez). Cette information attend un booléen qui est par défaut initialisé à NO. Double cliquez sur ce booléen pour pouvoir le modifier, tapez « YES » puis faites « Entrer », sauvegardez votre projet et enfin cliquez sur « Run » pour voir le résultat. Magie : plus de barre de status ! Voici la procédure en quelques captures d’écran :


Menu