background preloader

Ergonomie web illustrée

Ergonomie web illustrée

Troc de Voiture First Principles of Interaction Design The following principles are fundamental to the design and implementation of effective interfaces, whether for traditional GUI environments, the web, mobile devices, wearables, or Internet-connected smart devices. Help! This is a huge revision. I expect I have made mistakes. This revision features new examples and discussion involving mobile, wearables, and Internet-connected smart devices. What has changed greatly is the level of detail: You will find many new sub-principles within each category, along with far more explanation, case studies, and examples. Previous Version & Its Translations. Introduction Effective interfaces are visually apparent and forgiving, instilling in their users a sense of control. Because an application or service appears on the web or mobile device, the principles do not change. I Love Apple, But It’s Not Perfect I’ve used many example drawn from Apple products here, often as examples of bad interface practices. Aesthetics Top Anticipation Autonomy Color Consistency

Design and Web Development Magazine, be Inspired and Creative How to Work as A Freelance Designer and Travel Life as a freelance designer is not always as glamorous as it may sound. There is often work to be done … even when you have travel plans. CSS3 Hover Link Effects One of the essential parts of a website is a text link. Best Website Examples that Use Startup Design Framework This article is a case study in websites built using Startup Design Framework. The What, Why, and How of Mockups Before we get into how to make the most of your mockups, it helps to know what exactly they are — and what they’re not. How to Create a Moto 360 Smart Watch in Adobe Illustrator If you’re into smartwatches, now this is the tutorial for you. Introducing New Qards: More Features, Better & Faster Developing Qards we started thinking about the essence of creating a website, when you want to tell about your product in a beautiful way, while not digging in complex editors with a large amount of functions. How to Choose the Right Monitor for Web Design

10 Heuristics for User Interface Design Download a free poster of Jakob’s 10 Usability Heuristics at the bottom of this article. #1: Visibility of system status The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time. When users know the current system status, they learn the outcome of their prior interactions and determine next steps. Predictable interactions create trust in the product as well as the brand. #2: Match between system and the real world The design should speak the users' language. The way you should design depends very much on your specific users. When a design’s controls follow real-world conventions and correspond to desired outcomes (called natural mapping), it’s easier for users to learn and remember how the interface works. #3: User control and freedom Users often perform actions by mistake. When it's easy for people to back out of a process or undo an action, it fosters a sense of freedom and confidence. #4: Consistency and standards

Customiser Google Map : afficher un plan personnalisé par devblog.fr Lorsqu’on veut afficher un plan, il est parfois compliqué de trouver la bonne requête Google pour afficher une carte précise. De plus, si le lieu n’est pas répertorié par Google, l’info-bulle sera assez pauvre. Voyons comment obtenir exactement le plan que l’on souhaite, grâce à l’API Google Maps version 3. Il suffit de connaître les coordonnées GPS du point à afficher*. Vous pouvez voir la démo ici : carte google map personnalisée. 1 – Charger l’API Dans le head de votre script, appelez le script suivant : 2 – Notre script A la suite de votre script, incluez un script js, par exemple carte.js. Dans ce script nous créeons une fonction affichePlan(). 3 – Affichage Nous n’avons plus qu’à appeler la fonction affichePlan() au chargement de la page (exemple utilisant JQuery) : On peut bien-entendu remplacer les valeurs en dur par des données issues d’une base de données, qu’on récupère en php ! *Il s’agit des coordonnées GPS en format décimal.

Tutoriel jQuery UI jQuery UI est une surcouche de jQuery qui propose des outils pour créer des interfaces graphiques interactives. Ses fonctionnalités se divisent en 3 catégories : Interactions Elles permettent de donner des propriétés très intéressantes à des éléments HTML, comme le fait de pouvoir être attrapé et déplacé avec la souris (drag & drop), d'être redimensionné comme une fenêtre, ou encore d'être sélectionné comme des icônes sur le bureau de votre OS.Widgets Les widgets sont des objets "clé en main " qui proposent des fonctionnalités de haut niveau comme le DatePicker par exemple, qui affiche un calendrier permettant de sélectionner une date. Effects Ils enrichissement les effets par défaut proposés par jQuery que l'on a vus dans les chapitres précédents (fadeIn, slideUp...). Pour utiliser jQuery UI, il faut bien entendu avoir inclus jQuery dans votre page web avec la balise <script> , mais il faut aussi ajouter le fichier .js de jQuery UI ainsi qu'une feuille de style. Exemple 1 Exemple 2 Drag

jquery-frontier-calendar - Full month calendar jQuery plugin that looks like Google Calendar. Full month calendar jQuery plugin that looks like Google Calendar. Latest Version, 1.3.2- June 24th, 2010 Please visit the downloads section for a working example and API documentation. Download Latest Version: Download Older Versions: Google Group: Shameless mention of my other vertical tab plugin Change Log Screenshots All UI elements such as next-month & previous-month buttons, add event form, edit event form, tooltips, etc, are not part of the calendar plugin. When there are too many agenda items to fit within a day cell a "more" link appears. You may change the background image via the CSS file.

Mail de confirmation en PHP Face à un phénomène grandissant qui est celui des inscriptions automatiques et autres multi-comptes, un des systèmes les plus efficaces reste à ce jour la confirmation par mail. Vous savez, c'est le genre de message que l'on reçoit pour activer notre compte après une inscription sur un forum, site, jeu... Pour lutter contre se fléau, nous allons créer un petit module qui enverra automatiquement un mail lors de la validation du formulaire d'inscription. Ce mail contiendra alors la procédure à suivre (un lien internet) pour finaliser l'inscription du nouveau compte. Cet article part sur le principe que vous possédez une Base de Données (BDD) et que vous maîtrisez sa gestion. Cet article s'adresse principalement aux Webmasters désireux de limiter les inscriptions factices et par conséquent diminuer le temps perdu à la maintenance et à la vérification de validité des données... Avant de commencer, il nous faut quelques petits équipements : La fonction Mail() pour l'envoi du Mail. I. <? II. <?

Related: