Urbanbike

Index |
ou détaillée | Fil RSS | ATOM

Premiers tours de passe-passe dans Bootstrap et sa CSS dédiée

Dans le code en mode bricoleur…!

dans dans mon bocal | groummphh | usages

La page que vous avez sous les yeux utilise bootstrap, c’est le choix de Richard pour coder urbanbike…

Je suis toujours bluffé par les disparitions d’éléments, voire leurs déplacements sur cette page quand on réduit son amplitude… C’est là où je me rends compte que la technologie de grand-papa1 que j’utilisais naguère maladroitement est… totalement dépassée…!

Mon interrogation au départ…

En réduisant la page à sa plus simple expression sur le iPhone et en arrivant en pied de page, je me suis fait la réflexion suivante… “un peu ballot de ne pouvoir ajouter un lien vers la page de l’index antéchronologique”. En effet, ce lien existe bien dans les petites colonnes mais, une fois qu’elles sont masquées, bien évidement, y’a plus…!

Me voilà à farfouiller en mode Monsieur bricolage dans la page des spécificités de CSS · Bootstrap… Et là, je comprends un peu mieux le choix de cette technologie choisie par Richard…! Bon sang, mais c’est bien sûr…!

Masqué ou visible…? That is the question…

En gros, la page est divisée en douze colonnes (virtuelles) et tout objet peut être décrété visible sur telle ou telle plage (quatre grandes plages qui recouvrent ces douze colonnes). Et masqué sur telle autre.

Dans le cas qui m’intéresse, c’est l’inverse : je veux qu’un élément précis ne soit visible, n’appariasse que dans un cas de figure. Quand l’écran est au plus resserré…

Après un peu de temps à comprendre le code monaronasesque (!) et lu la doc, j’ai finit par créer une <div> supplémentaire dans le <footer> histoire de préciser ceci :

<div class="col-xs hidden-sm hidden-md hidden-lg">

J’envoie mon épure à Richard qui me précise aussitôt qu’il y a une méthode encore plus simple utilisant la propriété visible…

<div class="visible-xs-block">

Heu, oui, c’est encore plus court(e)…

Mais en regardant les options visibles, je comprend (enfin…!) que la CSS de Bootstrap est également disponible partout2, même dans mon texte Markdown. Pas besoin de mettre créer option stabilo dans un texte, <mark> le fait très bien3.

De la couleur…?

Enfin, je tombe sur les class des Contextual backgrounds qui autorisent également des effets pratiques si besoin. Et je n’ai pas résisté à ajouter un bg-warning…

reduc-450

En résumé, c’est très facile de greffer un truc sur un code déjà bien construit et je suis gré à mes deux copains Richard et Dominique de me pousser à explorer de nouvelles pistes…! Je ne vais pas aller très loin mais cela m’éclate.

En effet, bricoler un peu de code ne fait pas de moi un développeur, nous sommes tous d’accord sur ce point…!

Bon, je continue à passer le plumeau dans le code d’urbanbike…

À suivre…


  1. J’ai l’âge d’en être un de plus…! ↩︎

  2. la coloration syntaxique des portions de code comme la typo s’appuient à cent pour cent sur cette CSS dédiée… ↩︎

  3. Qui n’a pas noté mon… Bon sang, mais c’est bien sûr…!. Et je n’évoque pas le reste… ↩︎

le 05/04/2016 à 07:00 | .(JavaScript doit être activé pour visualiser cette adresse email) à JChris d'Urbanbike | #

En pratique | Réorganiser Mail sur iPhone pour plus de confort…

Une option… parmi des tas d'autres…!

dans bosser partout | dans mon bocal | grospod | usages

Ce qui suit est un rappel destiné à ceux qui ont de multiples adresses courriel et s’embrouillent dans la consultation de ce qui leur est adressé quotidiennement.

De fait, certaines options subtiles de Mail ne sont pas affichées par défaut dans les onglets. Or comme trop souvent, l’utilisateur n’a pas eu le curiosité, l’opportunité de regarder ce qui est disponible dans ses outils, il passe à côté de ce qui pourrait simplifier grandement sa vie au quotidien…!

Je suis exactement dans la cible avec une tétrachiée (sic…!) de comptes tant sur GMail que me.com, urbanbike, photager, etc. Bref, il m’arrivait encore ces derniers temps de pester contre les rares spams (…liés aux comptes qui ne passent pas par SpamExpert1) qu’il me fallait aller débusquer dans chaque compte… C’est désormais du passé…!

Alors, je vous livre ma solution qui n’engage que ma pomme…!

reduc-450

  • (De gauche à droite) l’accès à ces options est simple, il suffit de tapoter sur Modifier.
  • Puis d’aller chercher en bas de colonne (!) les options comme Aujourd’hui (tiens, pas bête, les mails du jour…!) ou Toute la corbeille (pour virer en une seule fois les mails sans intérêts dispersés dans tous les comptes). Pensez à remonter ces options (1) pour qu’elles soient immédiatement visibles (2) à l’ouverture de votre application de Messagerie…
  • Du coup, quel que soit le nombre d’adresses courriel employées, tous les mails entrants sont regroupés dans un unique espace.

Effet KissKool, virer les indésirables les supprime aussi sec des serveurs et, de facto, vous ne les retrouvez plus sur votre Mac ou votre iPad : autant de temps gagné.

D’ailleurs vous remarquerez que dans l’onglet Toute la corbeille, plus besoin de sélectionner chaque mail à virer… Un appui sur Modifier puis sur Tout suppr. est disponible…

Tchaaaaaacccc…!

Par contre, si vous vous plantez, pas d’annulation…! On se console de suite : un Mail de perdu, dix spams d’affichés !

Dois-je ajouter que procéder de même sur iPad (réorganiser les onglets) est loin d’être une mauvaise idée !? À vous de penser le pour et le contre, ne placer que les options souhaitées…


  1. relire ce billet de fin 2013…! ↩︎

le 04/04/2016 à 11:50 | .(JavaScript doit être activé pour visualiser cette adresse email) à JChris d'Urbanbike | #

Grafio 3 : réaliser aisèment des flowcharts efficaces sous iOS

Puissance, design et ergonomie au rendez-vous

dans bosser partout | grospod | outils

En 2011, j’avais fait l’acquisition de iDesk — cf. urbanbike | iDesk pour tracer des organigrammes. Cette application a été renommée Grafio en 2012 et vient de débouler en version 3.0 fin mars 2016.

Note : …si je reste avant tout un utilisateur de iThoughts pour ce qui est carte heuristique et mise en place d’arborescences, ce n’est pas avec cet excellent outil de mind-mapping que je me lancerais dans la réalisation d’un diagramme, quelles que soient ses prodigieuses qualités…

Grafio reste le meilleur outil — à mes yeux — pour construire de superbes représentations pour des raisons assez évidentes : une ergonomie hors-paire affinée au fil des versions. Et une remise en question permanente de cette dernière depuis la première version.

Plus de représentation en faux bois blond (à la mode des années 2010), un déplacement judicieux de toutes les fonctions en haut de page sur iPad (et leur répartition en haut en bas en mode portrait sur iPhone), un bon regroupement des options disparates par panneau, des ajouts progressifs pertinents.

Sur iPhone

Et, introduit dans une version intermédiaire, la possibilité de tracer sur iPhone…

reduc-450 Attention à bien spécifier la couleur du thème au départ…

reduc-450

Les développeurs de Grafio ont raison de le spécifier… 27 mises à jour en 5 ans… Sans oublier une liste impressionnante d’exemples à télécharger et donc s’inspirer (ok, certains sont gags mais les plus pros sont épatants)

reduc-450

Sur iPhone, le mode paysage est plus pertinent car il évite de retrouver des options en bas de l’écran…

reduc-450

Textes, filets, contour et fond…

reduc-450

Les options supplémentaires sont accessibles par un simple appui et défilent sous vos yeux…

reduc-450

Redimensionnement des objets, appel de l’album, enregistrement d’une note vocale… Royal sur un iPhone 6s+

Sur iPad

Bien entendu, le confort sur iPad est nettement supérieur (…mais cela ne sous-entend pas que la version iPhone soit inutilisable, loin de là…!)

reduc-450

On retrouve les options sur les 4 outils principaux et les options associées via un appui sur les flèches grises de part et d’autre…

reduc-450

reduc-450

reduc-450

reduc-450

Et un affichage des modèles ou diagrammes disponibles…

reduc-450

La façon de nommer par défaut avec date et heure est bien pratique…

reduc-450

Les nouveautés en action…

Parmi les dernières options ajoutées dans cette version, les dossiers de rangement mais, surtout ceci. La possibilité d’associer une image dans une forme.

reduc-450

Merci à mes gamins pour l’illustration… à leur insu… Notez la gestion des ombres…

Bibliothèques

reduc-450

Enfin, une tripotée de bibliothèques qui viennent s’ajouter à celles dont dispose la version de base. Certains sets sont offerts mais le kit complet est un bon investissement…

Au risque de me répéter, c’est un outil remarquable que vous pouvez utiliser si vous avez une activité où il vous faut régulièrement produire des schémas explicatifs. Les pointes de flèches (ou liens) sont accrochés aux objets et nul risque de perdre une liaison en cours de route… Une grille magnétique permet des ajustements et des guides affichent temporairement le bien fondé des alignements…

Mais je n’insiste pas plus…!

le 04/04/2016 à 10:15 | .(JavaScript doit être activé pour visualiser cette adresse email) à JChris d'Urbanbike | #