Créer son WebClip – icône iPhone
Comments :1Tags: écran d'accueil iphone, iphone, ipod, raccourci iphone, webclip
Voici un tutoriel qui vous permettra d’ajouter à votre site internet un WebClip pour iphone, c’est à dire, pouvoir
avoir une icône personnalisée quand vos utilisateurs souhaitent ajouter votre site à leur écran d’accueil sur iPhone.
La mise en place de ce WebClip se résume en deux étapes principales, détaillées ci-dessous :
1. Création de l’icône pour iPhone :
Vous devez tout d’abord créer votre icône en utilisant le logiciel de votre choix. Les spécificités sont les suivantes :
a. Votre icône devra impérativement faire 57px de large sur 57px de haut ni plus ni moins.
b. Vous devrez créer l’icône au format png transparent.
2. Mise en place de l’icône sur votre site internet :
Cette étape est relativement simple si vous avez des connaissances en html et/ou création de sites :
a. Enregistrez votre icône en la nommant : « iphoneicon.png »
b. Placez l’image à la racine de votre site internet
c. Ajoutez la balise <link rel="apple-touch-icon" href="/iphoneicon.png"/> entre les balises <head>...</head>
d. Enregistrez votre/vos pages
Après avoir complété ces deux étapes, vous pourrez effectuer un test si vous êtes en possession d’un iPhone ou iPod en vous connectant sur votre site puis en ajoutant celui-ci en page d’accueil, cf photos ci-dessous :
Dix Astuces pour améliorer l’ergonomie de vos Formulaires
Comments :0Tags: astuces, ergnonomie, ergonomie formulaire, formulaire, vérification formulaire
Certaines société ont augmenté considérablement leur taux de transformation grâce à l’optimisation d’un processus d’achat ou encore une recherche de produit.
L’utilisateur doit pouvoir tout de suite identifier les parties d’un formulaire et être guidé par des incidations claires et précises. Enfin, la saisie des données doit impéravitement être facilitée et la validation intuitive.
C’est donc à ce sujet, que vous trouverez ci-dessous dix astuces pour améliorer et/ou optimiser vos formulaires. Ces conseils peuvent être associés à des grands standards ergonomiques applicables partout et d’autres seront plus spécialisés et devront peut être adapter certaines spécificités technique de leur formulaires.
Astuce 1 – Utilité du Formulaire
La première étape avant de commencer à coder votre formulaire est de réfléchir à son utilité. Veillez toujours à prendre en compte les différentes problématiques des utilisateurs : dans quel but ce formulaire doit être utilisé ? Quand sera-t-il utilisé ? Par qui ? Comment ? Etc… En ayant réponse à ces questions vous pourrez ainsi déterminer la structure idéale à mettre en place.
Astuce 2 – Adapter les Champs.
Vous avez à votre disposition cinq différents types de champs pour créer votre propre formulaire : la zone de texte (et la zone de texte multiligne), la case à cocher (checkbox), le bouton radio, le menu déroulant et la liste. Veillez à toujours bien adapter votre choix en fonction du type de données demandées. Par exemple, si vous demandez la région dans laquelle l’internaute habite, préférez un menu déroulant à une zone de texte ou encore à une liste.
Astuce 3 – Marquer les champs obligatoires
Il est très important d’afficher visuellement les champs qui sont obligatoires. La méthode la plus simple est d’ahouter un astérisque à la suite du libellé. En outre rien ne vous empêche d’être plus explicite en optant pour une dose supplémentaire d’originalité ! Par ailleurs, les règles régissant ces champs devront être expliqués tout en haut de la page et non à la fin du formulaire. La personne aura donc toutes les informations nécessaires pour remplir son formulaire au départ et n’arrivera pas en bas de la page en découvrant des nouveaux éléments.
Astuce 4 – Apporter une attention particulière à la lisibilité
La lisibilité est très importante, elle passe au travers d’un certain nombre de points : des libellés et des champs suffisamment contrastés avec le fond de la page, un formulaire divisé en plusieurs parties et un bon espacement entre celles-ci, des champs correctement alignés (libellés soit à gauche ou à droite)… Vous pourrez utiliser des Styles CSS pour aider l’utilisateur à mieux s’y retrouver entre les diverses parties.
Astuce 5 – Format des champs
Il est inutile d’utiliser une zone de texte de 300 pixels de large pour obtenir le code postal d’un internante par exemple. Vous pouvez faire varier la taille des champs en fonction des données demandées. Autre point, vous devez impérativement être clair et précis concernant les intitulés de vos champs, par exemple : si vous demandez une date de naissance, n’oubliez pas de bien spécifier le format souhaité (jj/mm/aaaa…).
Astuce 6 – Ordre des champs
Veillez à bien garder un ordre logique pour les différentes parties de votre formulaire. Mêmes règles pour les zones de saisie. Si vous demandez une adresse postale par exemple, l’ordre logique est : le numéro, le nom de la rue, le code postal puis la ville et le pays.
Astuce 7 – Assister l’utilisateur
Il y a plusieurs méthodes pour aider l’internaute à utiliser un formulaire, vous pouvez soit préremplir certains champs, soit placer en haut de liste certaines options les plus souvent sélectionnées. Vous pourrez par exemple placer : France, Angleterre, Espagne en tête de liste pour une sélection de pays pour un utilisateur dans l’Union Européenne.
Astuce 8 – Faciliter la soumission
Le bouton de validation du formulaire doit être aligné à la suite des champs de saisie. Vous devez eviter de l’aligner par exemple en bas à droite de la page. Vous pouvez notamment le personnaliser si vous le souhaitez afin qu’il soit bien mis en valeur pour l’utilisateur. Si vous optez pour cette solution, n’oubliez cependant pas de créer un état « hover », qui augmentera le taux de clics. De plus, vous pouvez bannir les boutons Annuler ou Réinitialiser le formulaire qui pourraient induire en erreur un utilisateur sans apporter de plus-value.
Astuce 9 – Mise en place d’un système de vérification
N’oubliez pas la mise en place d’un système de vérification des données saisies qui peut être composé de la manière suivante : en JavaScript, celui-ci contrôlera si un champ est rempli et correctement. Si ce n’est pas le cas, un message indiquera à l’utilisateur l’erreur qu’il a pu commettre en remplissant le champ, un message avertira l’utilisateur. En PHP, celui-ci pourra avertir l’utilisateur si un champ est bien rempli mais irrecevable (par exemple pour un pseudo déjà enregistré).
Astuce 10 – Confirmer la réception
Pour confirmer la réception des données, vous avez différents moyens à votre disposition. Vous pouvez par exemple envoyer un email de confirmation qui indiquera à l’utilisateur un récapitulatif des informations qu’il a saisi avec le message d’acceptation. La même chose pourra aussi être faite dans le navigateur avec une page de remerciement / confirmation d’enregistrement qui indiquera un message du type : « Vos informations ont bien été enregistrées, merci de l’intérêt que vous nous portez » ou encore « Nous avons bien pris en compte votre demande et vous contacterons dans les plus brefs délais ».
En conclusion, il est bon de rappeler qu’un formulaire en ligne est plus important pour vous qu’il ne l’est pour l’internaute. En effet, remplir un formulaire est une véritable étape pour un internaute, et vous devrez de ce fait, faire tout votre possible pour qu’il le fasse dans les meilleurs conditions possibles, pour augmenter le taux de remplissage et la validation. Soyez donc efficace, suivez bien les différentes règles d’ergonomie générale, ajoutez quelques touches personnelles liées à la thématique de votre site internet et vous obtiendrez un formulaire pratique et ludique pour l’utilisateur.
iTab mini – Apple
Comments :0Tags: apple, itab, itab mini, snow leopard, tablette graphique
Nous sommes toujours dans l’attente d’une annonce officielle de la part du géant Apple au sujet de la rumeur grandissante sur la Tablette iTab. En attendant, voici un aperçu de ce à quoi pourrait ressembler cette future mini tablette graphique, cf. aperçu ci-dessous :
Elle serait apparement dôtée d’un Ecran 12.1 SVGA, d’une surface tactile « multi-touch » pour une résolution de 1400×1050 et d’un processeur à 2.16GHz double coeur de chez Intel.
Autre caractéristiques, cette tablette incluerait 2GB de ram, un disque sur de 160GB, des connexions FireWire, Ethernet et une Batterie rechargeable.
Les amateurs de dessin ou tout autre activité nécessitant ce type de support pourront peut être bientôt bénéficier de ce nouvel outil.
Cette tablette pourrait aussi bien représenter un futur support de présentation pour vos sites, vos comptes-rendus… et nous veillerons bien entendu à adapter ceux-ci pour une optimisation maximale sur tous les types d’affichages
CSS : La Règle @import, une bonne pratique
Comments :0Tags: @import, css, feuille de styles, règle d'import css, w3c
L’article a pour but principal de présenter la règle CSS @import et d’en montrer l’utilisation. Cette méthode vous permettra de mieux organiser l’architecture CSS d’un ou plusieurs sites.
Importer une feuille de styles :
la règle CSS @import à pour fonction de permettre l’importation de styles depuis d’autres feuilles de styles. La spécification du W3C nous indique qu’il est impératif que toutes les règles @import soient placées avant tout autre propriétés/règles à l’exception du @charset si cette balise est présente.
La règle import doit avoir comme valeur une URL, relative ou absolue, spécifiée par la syntaxe url(" ")
De ce fait, pour procéder à l’importation d’une feuille de style depuis une autre, vous devez écrire dans votre css :
@import "styles.css";
ou
@import url("styles.css");
Importer une feuille de styles par média
Vous pouvez indiquer pour quel type de média vous souhaitez faire l’import d’un CSS, il vous suffit juste de le spécifier après l’URL. De plus, si vous souhaitez importer cette feuille de styles pour plusieurs médias, vous devrez juste écrire tous les médias en les séparants par une virgule comme ci-dessous :
@import url("styles.css") video;
@import url("styles.css") video, tv;
Si aucun média n’est spécifié, la feuille de style sera importée pour tous les types.
Attention, l’importation de feuille de styles pour les médias spécifiques via une règle @import n’est pas réellement encore répendu sur l’ensemble des navigateurs, il est conseillé de faire des tests de compatibilité afin de détecter un éventuel problème avant la mise en ligne du site.
Principe d’utilisation de la règle @import :
En premier lieu, vous devez séparer les feuilles de styles pour bien dissocier les différents éléments. Cette pratique permet à une personne reprennant votre CSS de pouvoir retrouver rapidement des éléments dans votre code, en effet, il n’est pas toujours simple de tomber sur un fichier CSS de 3 ou 4000 lignes pour rechercher un élément. Scroller use la souris à force…
Vous pourrez donc par exemple organiser vos feuilles de styles de la manière suivante : 1. design global / 2. formulaires / 3. forum … l’important est que tout soit clair pour vous.
Venons en maintenant à la règle @import qui peut se révéler très utile. Classiquement, beaucoup de personnes ont le réflexe de lier toutes les feuilles de style via la balise <link />, ce qui schématiquement, donne ceci :
Ceci ne pose pas de problèmes réels lors d’une évolution de contenu par la création de nouvelles pages HTML, car bien souvent on utilise des gabarits. Il suffit de lier à nouveau les X feuilles de styles depuis la nouvelle page HTML comme le démontre le schéma ci-dessous :
Le problème se pose maintenant lorsque l’on souhaite rajouter une partie de CSS bien disctincte via une nouvelle feuille de style. On doit alors repasser sur toutes les pages HTML pour ajouter une balise <link />, ce qui peut devenir rapidement un enfer si vous avez plusieurs matrices de pages. Alors, dans un souci de création de code fait rapidement, vous allez rajouter une feuille de style supplémentaire, ce qui va donner le schéma ci-dessous :
C’est la que la règle @import peut nous permettre de faire du code CSS propre dans un souci d’évolutivité.
Grâce à cette règle, vous pouvez centraliser l’appel aux feuilles de styles dans un seul fichier CSS (Attention cependant il est recommandé de ne pas utiliser plus de 8 appels dans une feuille de styles d’imports. Les imports supplémentaires risqueraient de ne pas être lus par certains navigateurs). Faites en sorte que toutes vos pages HTML soient liées à une seule feuille de styles qui gérera seule l’appel aux autres CSS. Ainsi sans modifier vos pages HTML, vous pourrez désactiver, supprimer / modifier ou ajouter des feuilles de styles comme bon vous semble, cf. aperçu ci-dessous :
Conclusion
L’utilisation de la règle @import étant limité pour cause de compatibilités avec certains navigateurs, il est obligatoire de lier des feuilles de CSS via la balise <link /> pour chaque type de média.
Ceci étant, pour chaque média vous pouvez centraliser vos feuilles de styles en utilisant sans modération la règle @import, cf. schéma ci-dessous :
Icon Finder
Comments :0Tags: finder, icon, Icon Finder, moteur de recherche, recherche d'icônes
Fini les recherches d’icônes aux quatre coins du net pour trouver ce que vous voulez.
Un moteur de recherche spécialement dédié aux icônes vient d’être mis à disposition gratuitement, son nom : Icon Finder
La méthode est simple : faites votre recherche > cliquez sur l’icône de votre choix > téléchargez-la au format ico ou png.
Vous trouverez sans doute votre bonheur dans une bibliothèque de plus de 100 000 icônes. regroupés dans plus de 190 catégories différentes.
FaceBook
Twitter