background preloader

CSS Sprite Generator, Editor, and Code

http://spritegen.website-performance.org/

Related:  Outils utiles

Tutoriel Vidéo Divers Avocode Lorsque l'on fait de l'intégration on est souvent obligé de travailler avec des fichiers PSDs qui nécessitent l'utilisation Photoshop. Le principal problème de ce logiciel est qu'il est conçu pour le traitement photo plutôt que le Webdesign. Inspecter les propriétés des calques et exporter les assets et loin d'être pratique. Certains designers ont même sauté le pas et utilisent maintenant Sketch plus adapté au webdesign. Dois-je déclarer mon site internet à la CNIL ? Et si oui, comment ? Pour rappel, la CNIL ou Commission Nationale de l’Informatique et des Libertés est une autorité administrative indépendante française chargée de veiller à ce que l’informatique ne porte atteinte aux citoyens. Pour un site Internet, il est obligatoire dans certains cas de déclarer auprès de la CNIL son fichier de collecte d’informations sur ses membres, prospects ou clients. Découvrez dans la suite de cet article les cas où il est obligatoire de se déclarer et la procédure pour s’enregistrer auprès de la CNIL… Dans quel cas est-il obligatoire de déclarer son fichier de données ? Les cas étant multiples, pour connaitre ses obligations en matière de déclaration à la CNIL, il est indispensable d’utiliser l’outil dispense du site de la CNIL. Vous n’avez qu’à renseigner le type d’activité que vous exercer et l’outil vous affichera les différentes dispenses liées.

Générateur de border-radius Cet outil peut être utilisé afin de générer du code pour la propriété border-radius. border-radius Contenu HTML Contenu CSS Règles d’or en Ergonomie Web : Toujours le bon choix ? La professionnalisation des sites web a mis en évidence l’importance de l’ergonomie et des concepts d’expérience utilisateur et d’architecture de l’information. Depuis, fleurissent ça et la diverses écoles qui définissent ou propagent les « best practices » que la plupart des WebDesigners s’échinent à appliquer… Le fait qu’une pratique soit majoritairement appliquée ne signifie pourtant pas pour autant qu’elle est correcte… force est de constater que bien souvent les concepteurs de sites reproduisent par défaut des schémas et appliquent des règles « bien connues » sans nécessairement réévaluer la pertinence de leurs modèles. Cet article est le premier d’une série qui vise à passer rapidement en revue les règles les plus souvent mises en avant afin de voir si elles sont toujours valides, s’il existe des alternatives, voire des contre-indications. Pour Inaugurer cette série, nous commençons par 3 des plus grands classiques : les règles de Miller, de Pareto et du « 3 Clics ».

Box-shadow generator Cet outil permet de contruire des effets CSS de type box-shadow effects, pour ajouter des effets d'ombrage à vos objets CSS. box-shadow generator HTML Content Un système de pagination ergonomique pour votre site Internet « Moon Websites Si le scroll infini (chargement du contenus en continu sur la même page) tend à s’imposer comme fonctionnalité sur les moteurs de recherche (à l’instar de Google Image) ou les réseaux sociaux (Timeline de Twitter ou de Facebook), la pagination web est loin d’être obsolète. Élément clé de l’ergonomie, repère essentiel pour l’internaute, la pagination web relève de l’expérience utilisateur. Elle doit donc guider la recherche de l’internaute et sa navigation, tout en tenant compte du support choisi (site e-commerce, forum, moteur de recherche, etc.). Passage en revue de ce qui se fait de bien (« do ») et de moins bien (« don’t ») en matière de pagination web. Do : la pagination « chartée » de Google L’exemple de la pagination de Google est intéressant car il obéit à la charte graphique de la marque.

Une feuille de styles de base pour bien démarrer vos projets Avec cette astuce, je vous propose un outil et une méthodologie pour partir du bon pied lorsque vous attaquez les styles CSS d'un nouveau projet. Un outil? → une feuille de styles CSS qui corrige ou définit les styles des principaux éléments de vos pages. (Yay, du code à copier-coller!) Quels outils pour pré-visualiser votre site responsive ? « Usaddict Durant la conception d'interface responsive (permettant au site de s'adaper aux différents écrans : tablette, mobile et ordinateur), il est nécessaire de tester le résultat sur les différents terminaux afin d'éviter de mauvaises surprises. Le Responsive WebDesign connait un fort essor ces derniers temps (Voir notre article sur la conception pour le responsive webdesign), de nombreux outils d'émulation proposent de tester le rendu de ces sites dans un navigateur sur ordinateur. Cela permet d’éviter d’avoir à disposition les multiples appareils à résolutions variables : iPhone et iPad retina, tablette Android, smartphone Windows 8 etc. Dans cet article, nous testerons ces émulateurs pour vous.

La technique du Reset CSS Le reset CSS est une technique qui consiste à réinitialiser à 0 la valeur de certains éléments HTML afin d'éviter une partie des différences d'affichage sur les divers navigateurs. Avant d'aller plus loin, rappelons que l'usage de cette technique est controversé. Si vous souhaitez l'utiliser, il est recommandé d'utiliser un Reset CSS évolué, comme celui proposé par Eric Meyer, et d'éviter l'utilisation du sélecteur universel (*). Le Reset CSS classique (déconseillé) Les navigateurs n'utilisent pas toujours les mêmes marges et padding par défaut pour les différents éléments HTML. Cela peut représenter un problème, par exemple lorsqu'on veut supprimer le retrait à gauche d'une liste avec un margin-left: 0; et que certains navigateurs conservent ce retrait car ils utilisent un padding plutôt qu'une marge.

Mentions Légales et CGV, les règles à respecter Il va de soi que le cadre légal joue un rôle très important au sein de votre site web. C’est lui qui va en quelque sorte vous protéger des informations légales que vous allez mettre à disposition des internautes mais il va aussi permettre à vos visiteurs de savoir qui ils ont en face de leur écran, à savoir une entreprise réelle et légale, en laquelle ils peuvent avoir confiance. Mentions Légales Les mentions légales obligatoires à faire figurer sur un site internet ont été spécifiées par la loi pour la confiance dans l’économie numérique de juin 2004. Pour un site internet édité par une personne morale, les « mentions légales » doivent contenir : La raison socialeLe siège socialUn numéro de téléphoneLe nom du directeur de la publication et/ou du responsable de la rédactionLe capital socialLe numéro d’inscription au registre du commerce et des sociétés

14 bibliothèques et outils CSS gratuits à utiliser sans hésiter De nombreuses ressources CSS open source sont disponibles sur le web pour vous aider à gagner du temps et à parfaire vos connaissances sur des spécificités du langage que vous ne maîtrisez peut-être pas encore. J’ai sélectionné dans cet article 14 bibliothèques et outils CSS gratuits qui viendront vous prêter main forte et vous faire gagner du temps lors de vos prochains projets web : outils, filtres photos, dégradés, couleurs, icônes, info-bulles, … 1. Hamburgers Hamburgers est une collection d’icônes hamburgers animés 2.

Rédiger un rapport de bugs, ça n’a pas l’air mais c’est du boulot ! Je sais pas si vous êtes comme moi, mais il y a un truc qui m’énerve au plus haut point c’est de devoir traiter des bugs qui ne sont pas clairement identifiés par le rapporteur. Je m’explique, constater un dysfonctionnement sur un site web et en faire un rapport constitue un travail en soi qui demande à être pris au sérieux pour un traitement rapide et efficace. Malheureusement, la plupart des chefs de projet ou plus généralement les rapporteurs de bugs doivent se dire que la transmission de pensée suffit ou que juste dire qu’il y a un problème sur le site doit suffire. Bon allez petit florilège inspiré de rapports réels ou légèrement modifiés pour garder l’anonymat et la confidentialité des échanges :

Related:  CSSCSSCSS