hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


RulersGuides.js - Règles et guides de Style Photoshop sur le Web

L'une des meilleures choses à propos de Photoshop est ses lignes directrices faciles à utiliser qui peuvent être tirées des règles. Ces guides peuvent rendre le processus de conception beaucoup plus facile quand il s'agit de positionner un objet et d'obtenir l'équilibre juste.

Pour notre plus grand plaisir, Mark Rolich a mis en œuvre cette fonctionnalité particulière pour une utilisation sur le Web. Il a créé RulersGuide.js basé sur les règles et les lignes directrices de Photoshop.

RulersGuide.js a la possibilité d' ajouter une interface de style de ligne de guide Photoshop sur une page Web . Les lignes qui ont été créées peuvent également être sauvegardées pour un usage ultérieur. Il vous propose trois options d'utilisation: en tant que bibliothèque javascript, en tant que bookmarklet ou en tant qu'extension Chrome .

Le Javascript

RulersGuide.js nécessite d'autres dépendances pour bien fonctionner. Comme cela fonctionne en faisant glisser et en déposant des lignes dans la page et nécessite une certaine utilisation de l'événement, vous devrez ajouter Dragdrop.js (disponible ici) et Event.js (disponible ici). Ensuite, incluez ces dépendances avec la source RulersGuide.js (téléchargez ici) comme ceci:

Si vous n'aimez pas le style par défaut, vous pouvez modifier son CSS en fonction de vos goûts. Ensuite, initialisez ces packages avec le script suivant:

Bookmarklet et extension Chrome

Pour plus de commodité, vous pouvez utiliser cet outil comme un bookmarklet ou une extension Chrome et l'ouvrir quand et où vous voulez.

Installation de Bookmarklet

Pour le bookmarklet, il suffit de l'installer comme d'habitude. Comme Internet Explorer fonctionne parfois différemment, cet outil permet de différencier le programme d'installation de bookmarklet pour les utilisateurs IE et non-IE. Il suffit de glisser et déposer le lien approprié ci-dessous à votre barre de favoris.

  • Non-IE Bookmarklet
  • Utilisateurs IE

Installation d'extension Chrome

Si vous êtes un amateur de Chrome, vous pourriez aimer cette option. Malheureusement, RulersGuide n'est pas encore disponible sur le Chrome Web Store. Le seul choix est de l'installer manuellement.

Tout d'abord, prenez le fichier d'extension ici. Le navigateur vous demandera de confirmer le fichier; appuyez simplement sur continuer. L'extension ne sera pas installée automatiquement car Chrome a son protocole de sécurité pour vous protéger.

Ouvrez-le en naviguant vers Option> Outils> Extensions ou ouvrez un nouvel onglet, puis copiez et collez les extensions chrome: // dans la barre d'adresse. Ensuite, faites glisser le fichier RulersGuide.crx téléchargé vers la page d'extension, comme indiqué ci-dessous.

L'extension est maintenant prête.

Travailler avec RulersGuide

Comme mentionné, RulersGuide fonctionne exactement comme la règle et la ligne de guidage Photoshop. Lorsque vous activez cet outil, vous obtenez des règles en haut et à gauche de votre navigateur. Vous pouvez retirer quelques lignes de ces règles.

Et en haut à gauche de la page, vous pouvez obtenir plus d'options dans le menu disponible. À partir de ce menu, vous pouvez personnaliser si vous voulez que les lignes soient affichées, sauvegardées, verrouillées et plus encore.

Apprenons à mieux connaître les options.

  • L'option cacher est utilisée pour cacher les règles et les guides comme vous le désirez. Même lorsque les règles sont cachées, vous pouvez toujours voir l'option de menu.

  • Si vous cliquez sur Déverrouiller, les règles resteront visibles sur la page pendant le défilement. Effacer tous les guides est utile lorsque vous voulez effacer tous les guides que vous avez faits.
  • L'option Enregistrer la grille est utilisée pour enregistrer la grille que vous avez créée. La grille sera enregistrée en fonction de l'emplacement de la page. Vous ne pourrez donc pas utiliser la même grille dans d'autres fenêtres / onglets du navigateur. Et comme on pouvait s'y attendre, l'option Grille ouverte consiste à ouvrir vos grilles sauvegardées.

  • Lorsque vous cliquez sur Afficher les informations détaillées, le mode d'informations détaillées est activé. Il peut vous montrer la position et la taille des régions de la grille que vous créez ainsi que les modifications que vous apportez à la position du guide.

  • Le dernier est l' option d'accrochage . C'est ce que j'aime dans RulersGuide. Vous pouvez aligner les guides sur l'élément DOM ou l'utiliser avec la taille de pixel définie. Notez que l'option Snap to DOM est encore à l'état expérimental au moment de l'écriture. Il peut ralentir ou ne pas répondre sur une page comportant de nombreux éléments.

Conclusion

Malheureusement, il y a toujours un léger inconvénient. Il ne peut pas supprimer un seul guide comme dans Photoshop. Vous pouvez seulement supprimer tous les guides, et sxtart les créer à partir de zéro. Pourtant, si vous travaillez sur des mises en page Web fréquemment sur les navigateurs, alors cet outil est pour vous.

Envoyer les notifications Push du navigateur avec Push.js

Envoyer les notifications Push du navigateur avec Push.js

Les applications mobiles natives supportaient toujours les notifications push . Cependant, ces notifications étaient absentes du Web jusqu'à ce que l' API Notifications apparaisse.L'API Notifications fonctionne via JavaScript . Il vous permet d' envoyer des notifications push directement sur l'ordinateur de l'utilisateur via la fenêtre de son navigateur. C

(Conseils techniques et de conception)

Comment faire pour modifier l'habillage de texte par défaut avec HTML et CSS

Comment faire pour modifier l'habillage de texte par défaut avec HTML et CSS

Contrairement au papier, les pages Web peuvent s'étendre presque indéfiniment sur le côté . Aussi impressionnant que cela puisse paraître, ce n'est pas quelque chose dont nous avons vraiment besoin en lisant. Les navigateurs enveloppent le texte en fonction de la largeur du conteneur de texte et de la largeur de l'écran afin que nous puissions voir tout le texte sans devoir trop faire défiler latéralement (seulement vers le bas).Le wrap

(Conseils techniques et de conception)