Fluid Type | Trent Walton
►http://trentwalton.com/2012/06/19/fluid-type
#typographie #web #design
Fluid Type | Trent Walton
►http://trentwalton.com/2012/06/19/fluid-type
#typographie #web #design
How to Use the HTML5 Full-Screen API - SitePoint
►http://www.sitepoint.com/html5-full-screen-api/#fbid=dSh7Oq6ngAf
“For some bizarre reason, you must repeat the styles in their own blocks or they won’t be applied”
Attention à bien déclarer les pseudos styles :full-screen sur des lignes séparées si on utilise les préfixes proprios.
#html5 #fullscreen #css
Tester rapidement un site #web sur plein de tailles différentes en une seule page. #responsive #mobile
#Popcorn Maker — table de montage #vidéo-#web | Mozilla
►http://mozillapopcorn.org/popcorn-maker
Popcorn Maker 1.0 will empower you to make cool web-based media, whether you’re a beginner or pro. With over 20 plugins—ranging from Twitter to Google Maps to video processing—you’ll be able to stitch up a stylish video that’s woven into the web. And, of course, it’s 100% free and open source.
(signalé par @klaus ►http://seenthis.net/messages/76886 )
Un très bon article sur les liens entre responsive designe et #typographie
Responsive Typography : The Basics | Information Architects
►http://informationarchitects.net/blog/responsive-typography-the-basics
In the heat of the relaunch I wrote a quick blog post on responsive typography, focussing solely on the aspect of our latest experiment: responsive typefaces. Without knowing the history of iA, you’d miss some key aspects to the responsive typography and design in our relaunched site. Instead of mashing up all our articles on the matter, I decided to start from scratch and explain everything step by step.
on le retrouve ici :
How to hold your iPad | AlastairC
▻http://alastairc.ac/2013/02/how-to-hold-your-ipad
Device CSS PPI Intended viewing distance (m)
iPhone 163 0.41
iPad mini 163 0.41
Nexus 7 162 0.41
Galaxy Nexus 147.7 0.45
iPad 132 0.51
Macbook Pro 15″ 110 0.61
iMac 27″ 109 0.62
Trad Desktop (96 DPI) 96 0.71
32″ TV with Xbox IE 32.4 3.5
Pompage.net - Communiquer sur le design
►http://www.pompage.net/traduction/communiquer-sur-le-design
Un petite traduction de votre serviteur sur pompage.net.
J’avais bien aimé cet article (►http://seenthis.net/messages/50839), qui résonne assez bien avec ce que je pense et ce que j’ai pu faire ces derniers temps. C’est un genre de plaidoyer pour une approche pragmatique, « agile », itérative et embarquée du design web.
Un grand merci à l’équipe très sympathique et rigoureuse de pompage, pour leurs avis et relectures éclairées.
arbor.js
►http://arborjs.org
Une librairie #javascript pour faire des #graphes avec #jquery. Ça peut dessiner en #canvas, en #SVG, ou en simple #HTML
Allez, je sais qu’il y a ici plein de gens qui font du #Web, de l’#HTML et des trucs plus compliqués comme #OpenSearch, donc ceci devrait leur plaire :
RFC 6573 : The Item and Collection Link Relations
Depuis le RFC 5988, il existe un mécanisme standard pour exprimer les types des liens entre deux ressources sur le Web. Ce très court #RFC documente deux types récemment ajoutés, permettant de dire qu’une ressource (une page HTML, un fichier, etc) est membre d’une collection de ressources ou, à l’inverse, qu’une ressource désigne une collection et indique quels sont ses membres.
10 reasons why I switched to Spine.js
►http://destroytoday.com/blog/reasons-for-spinejs
Like the new kid at school, I didn’t know who was who in regard to frameworks. I looked around and saw mentions of Backbone.js everywhere, so I assumed it was the standard. After several months, however, I realized it’s not for me—Backbone.js lacks a clear direction of use. Every tutorial I read used a different structure, and it almost seemed too easy to disregard proven design patterns.
Enter Spine.js. I spent a night just reading through its guides and examining its demo apps. Everything I saw just looked right. That night, I wore a big smile and even had trouble sleeping because I couldn’t wait to start using it. What made me so excited?—these 10 things:
jQuery.dotdotdot, advanced cross-browser ellipsis for multiple line content.
►http://dotdotdot.frebsite.nl
See how it uses an ellipsis to indicate that there is more text than currently visible?
Isn’t that awesome? It’s like using overflow: hidden; But PRO-style!
Le plugin a des options intéressantes, mais c’est un peu dommage d’utiliser javascript.
En tout cas, la propriété CSS text-overflow est assez reconnue ( ►http://caniuse.com/#search=text-overflow ), je l’utilise souvent (c’est génial dans des layout elastiques ou fluides).
La propriété text-overflow ne marche pas vraiment, puisque ne marche que sur une ligne. Et c’est justement parce qu’elle ne sert pas à grand chose, qu’il y a des librairies javascript qui font un travail mieux pour couper des textes multi-lignes lorsque le conteneur parent a une taille précise.
RFC 6570 : URI Template
Beaucoup d’applications #Web utilisent des #URI qui peuvent être décrits par un #gabarit (template), avec des variables qui seront incarnées pour produire l’URI final. Ce #RFC, issu d’une coopération entre l’IETF et le W3C normalise un langage (déjà largement déployé) pour ces gabarits.
Je n’ai pas testé l’implémentation PHP existante mais la plupart des autres ne vont pas loin (niveau 1 seulement), sont très mal documentées et semblent souvent non maintenues. Pourtant, cela semble relativement simple à faire.
C’est le cas de beaucoup de « librairies » PHP hélas, des trucs faits à la rache qui passent deux ou trois tests élémentaires (vs. un jeu de tests sérieux) mais ne correspondent pas aux specs. Même parmi les populaires (par exemple je n’arrive pas à trouver une librairie YAML correcte).
Très intéressant, je suis intéressé par une implém. PHP correcte aussi, sinon j’en ferais une ;)
Trois nouvelles fontes libres et gratuites sur ►http://velvetyne.fr ce soir ! Le Fengardo Neue de Loïc Sander (►http://www.akalollip.com), le Bizmeud de Biz Yod (►http://bizyod.design.free.fr) et Quentin Bodin et enfin le Aqualove de Sylvain Henri. #typographie #libre
#Responsive IMGs
►http://cloudfour.com/responsive-imgs
a strategy for handling the #IMG tag.
voir aussi plein d’autres approches possibles (mais rejetées par l’auteur)
►http://cloudfour.com/responsive-imgs-part-2
et celle d’apple pour l’#iPad3 et #retina_display
►http://cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads
et encore celle-ci que j’ai testée et qui a l’air pas mal
►https://github.com/joshje/Responsive-Enhance
#web
De la césure et du Web - Typographisme
►http://typographisme.net/post/De-la-cesure-et-du-Web
La césure (ou « hyphen » en anglais) est une coupure de mot qui survient en fin de ligne. Il s’agit d’un artifice bien connu des composeurs pour gérer les lignes de texte justifié depuis des siècles. Jusqu’à présent, son usage sur le Web était difficile, on la disait même parfois impossible. Cependant, comme vous allez le voir, beaucoup de choses sont en fait possibles. Entre solutions des temps anciens et nouveautés de CSS3, voyons comment démocratiser l’usage des césures sur le Web.
Entypo - 100+ carefully crafted pictograms
►http://www.entypo.com
Entypo is a set of 100+ carefully crafted pictograms available as an OpenType font, vector EPS and web font. All released for free under the Creative Commons license CC BY-SA.
Oui mais là, on retombe dans les travers des dingbats des années 90 avec ses encodages totalement farfelus. Là, je tape « A » pour afficher une lampe de poche, « B » un trophée, « D » un appareil photo, « è » pour une flèche vers le haut, et ainsi de suite.
Pour une police « de bureau », c’est chiant à manipuler (aussi chiant qu’un Zapf Dingbats en 1995). Pour une webfont, c’est catastrophique, puisque ça se « dégrade » en affichant de véritables lettres à l’écran.
Bon nombre de ces dingbats sont définis dans Unicode : la solution « propre » est donc de respecter Unicode. Pour ce qui n’est pas dans Unicode, bricolage pourquoi pas (mais c’est pas réjouissant, et ce qu’on gagne d’un côté on le perd largement de l’autre ; j’ai bossé pendant 15 ans avec ces Zapf Dingbats péraves encodé par les corbeaux, ça n’a jamais été un boulot sympa).
Oh aujourd’hui accéder aux glyphes c’est pas dur… par contre en webfont c’est vrai que ça parait pas intéressant. Mieux vaut à ce stade en faire des images.
Remarquez que l’auteur semble avoir prévu le coup et propose aussi ces pictos au format EPS ;)
L’idée d’une webfont graphique, je trouve ça pas mal. Je l’ai expérimenté sur une page, avec quelques boutons, c’est assez pratique : ça fait des éléments graphiques très faciles à manipuler (couleur, taille, ombres…) dans les CSS.
Mais je pense qu’il faut vraiment respecter le positionnement des glyphes graphiques défini par Unicode. (Il y a vraiment déjà largement de quoi jouer : tout l’équivalent du Zapf Dingbats traditionnel est défini dans Unicode, et il y a des tripotées d’autres trucs disponibles.)
Dans ce cas-là, on a bien une webfont, avec typage graphique qui va bien, mais ça se dégrade plutôt proprement (et, c’est marrant : on peut considérer que c’est sémantique, puisque qu’Unicode définit ce que représente tel ou tel glyphe).
Ouais mais ça implique de faire des dingbats de même type que ceux de zapf, ou d’unicode, ce qui n’est pas forcément toujours très pertinent, j’imagine. Mais évidemment si c’est possible c’est mieux.
Y’a quand même vraiment de quoi jouer :
►http://www.unicode.org/charts/#symbols
Tu as :
– symboles alchimiques (oué !)
– quelques symboles romains (oué oué !)
– des symboles de monnaies (trop oué !)
– là ça va te plaire : les dingbats, et vraiment y’a du monde :
►http://www.unicode.org/charts/PDF/U2700.pdf
– les émoticons (bon, moyen-oué) :
►http://www.unicode.org/charts/PDF/U1F600.pdf
– des symboles de jeux (échecs, cartes…)
– divers symboles :
►http://www.unicode.org/charts/PDF/U2B00.pdf
– et tiens-toi bien : divers symboles et pictos :
►http://www.unicode.org/charts/PDF/U1F300.pdf
Entre les « dingbats » et ce dernier « divers », tu as tout et n’importe quoi. Tu as même une tête de grenouille (1F438), la silhouette de deux hommes se tenant la main (1F46C), un homme et une femme se tenant la main (1F46B, et il est précisé qu’il ne faut pas comprendre avec le symbole des toilettes : 1F6BB), un homme avec un chapeau chinois nommé gua pi mao (1F472), un symbole pour le massage du visage (1F486), un baiser (1F48F), une floppy disk (1F4BE), le mont Fuji (1F5FB)…
Mais — et là c’est de l’ignorance — on a des polices systèmes qui contiennent ces symboles ? Parce que si non, qu’une webfont utilise ces valeurs ne règlerait pas le problème de la dégradation.
Sur Mac, depuis Lion, ils sont quasiment tous là, et en couleur. Bon, les dingbats sont anciens, ils sont censés être là (sur Seenthis, ceux qui se plaignent de ne pas avoir le petit triangle avant les liens, c’est ça…). Les trucs introduits dans Unicode 6, évidemment c’est sans doute plus problématique.
Mais :
– que ça se dégrade en « É » ou en rien, c’est un peu pareil, alors que si ça se dégrade dans le bon glyphe quand tu as un système récent, c’est pas pareil ;
– dans tous les cas, on va vers ça. Pas de bidouiller comme si on était encore en 1999
Et même un beignet de crevette (1F364). Waouh quoi.
Les « symboles et machins divers » d’Unicode 6, tels qu’ils sont intégrés à MacOs Lion :
►http://twitpic.com/8n6ly6/full
Rasta, tu y trouveras ton beignet de crevette :
Non, et la couleur dans une police, je suis trop vieux…
Mais bon, d’où l’intérêt d’avoir une webfont de dingbats chics et élégants, qui se dégrade tout de même nicely en police système.
Lost Type Co-op | Bemio
►http://www.losttype.com/font/?name=bemio
Bemio is an ultrabold sans with an extensive character set. It bridges the gap between old signage and craftsmanship with modern forms and simplicity. With more than 1000 glyphs, and full Language Support, Bemio is versatile and robust.
via ►http://graphism.fr/jeudi-cest-typogratuit-avec-le-bemio
#Accesskey le grand #échec de l’#accessibilité du #Web
►http://www.alsacreations.com/article/lire/568-Accesskey-le-grand-echec-de-l-accessibilite-du-Web.html
Issu d’une idée aussi vieille que l’informatique, le raccourci clavier appliqué au Web est un cinglant échec qui condamne son utilisation à quelques chiffres associés à des fonctions clés du site.
Les référentiels, comme celui de l’ADAE ou du gouvernement anglais tentent de trouver un consensus en établissant une liste formelle des raccourcis clavier.
Mais à dispositif mal né, problèmes récurrents, cette liste pose autant de problèmes que les raccourcis eux-mêmes...
et quelques possibilités supplémentaires décrites ici
►http://pagekite.net/wiki/HowTo
►http://pagekite.net/wiki/Howto/SshOverPageKite
►http://pagekite.net/wiki/Howto/Mac/LaunchCtl
►http://pagekite.net/wiki/Howto/VncOverPageKite
Par défaut, ça fait passer tout le trafic par leurs serveurs (pagekite.me), ce qui leur coûte des sous, mais pourrait aussi leur permettre d’analyser le trafic, bien que ce ne soit sûrement pas le cas.
Comme c’est opensource, il est tout à fait possible de faire passer le trafic par d’autres serveurs. En particulier, à condition d’avoir un serveur et un nom de domaine à disposition, on peut installer son propre « front-end relay » :
▻https://github.com/pagekite/PyPagekite/tree/main/doc#23-running-your-own-front-end-relay
voir aussi #madeye qui a l’air encore plus roxx
►http://seenthis.net/messages/246020
[J’étais sûr d’avoir vu une référence à ce film sur SeenThis mais pas moyen de la retrouver.]
Excellent exposé d’Anne-Sophie Fradier à Paris-Web sur la « macrotypographie de la page Web » (elle explique au début ce qu’est la #macrotypographie, pour les noobs comme moi). Codex, volumen, plomb, ligne de base, etc. Son mot favori est « super ».
À noter surtout la qualité du film : les transparents sur la moitié gauche (et faits à partir du support, pas filmés sur l’écran) et la conférencière, avec sa jolie chemise, sur la moitié droite.
Ce qui me manque le plus est le passage de ses excellents conseils à une réalisation concrète en #CSS.
Ah, retrouvé par la fonction de détection des URL doublonnés : ►http://seenthis.net/messages/25978 Comme le moteur de recherche (recherche : « fradier ») ne retrouve pas le seen de Thomas Dubois, c’est donc un #SeenThis_bug
si tu ne follow pas @tom_dubois il faut que tu cherches sur l’ensemble de #seenthis et non pas seulement dans ton réseau :
►http://seenthis.net/spip.php?page=recherche&recherche=Fradier&follow=all
Mais j’ai fait une simple recherche, je ne savais pas que, par défaut, elle était limitée à mon réseau. (Je n’aime pas ce système où on ne voit les options de recherche qu’après la recherche.)
+1 @fil #seenthis_todo : la flèche indiquant un URL doublonné n’apparaît qu’avec le doublon, pas avec le message d’origine, ce serait bien que ça marche dans tous les sens non ?
(HS : waouh @thibnton, j’avais pas vu tes 400 abonnements, du coup moi qui trouvais un peu honteux mon ratio de 40 abonnements pour 6 abonnés (je sais on s’en fout m’enfin quand même), je suis refait :p du coup t’as plus le bug de la page d’accueil c’est ça ?
@tom_dubois en fait pour le moment, il est encore possible de suivre tout le monde. Donc je procède par retraits successifs plutôt que par ajouts. Et dès qu’un nouveau venu débarque sur Seenthis, je le suis, quitte à revenir dessus ensuite...
Je suis heureux de vous annoncer le lancement de la nouvelle version du site de la fonderie Velvetyne, réalisé par mes soins. Au programme, une petite centaine de fontes gratuites, libres, utilisables sur le web. Je suis l’auteur de l’une d’elles, le Rupture.
Déjà Max donnait de la Vox pour clamer l’universalité de la typographie. Excoffon interpellait l’homme de la rue et insufflait dans ses bronches encrassées un Mistral salutaire. Le fougueux Boltana mettait les machines au diapason du génie de la main. L’infatigable Blanchard réinventait la carte du tendre où se mêlaient en infinis entrelacs signes, sons et sens.
Nous, VTF, rejetons intrépides de la génération Postscript, nous poursuivons, à la vitesse de l’électron, cet illustre cortège. Tel Spartacus, nous libérons les caractères du joug des règlements iniques et des conventions arbitraires ; tel Ben Hur sur un char gigantesque, nous accueillons amazones et auriges du script et, tous formidables, armés de hallebardes-bic et d’arbalètes à casseaux, coiffés d’un feutre à plumes de Bézier, nous défions sans plus tarder l’époque aguicheuse et palimpseste.
Excellent. Y’a juste que Safari se lance dans un long processus face à une page blanche pendant de longues secondes, puis me prévient qu’un processus Javascript fait ramer l’ordinateur, me demande si je veux continuer, je dois donc absolument cliquer sur le bouton « Je veux continuer même si ça met le feu à mon ordinateur », et ensuite seulement ça m’affiche du contenu.
Ouïe ! Je savais qu’il était lent, mais pas au point d’afficher une alerte… Ça ne va pas du tout ça. C’est idiot en plus, c’est à chaque fois pour recalculer la mise en page. Il doit attendre que toutes les fontes chargent (60…) pour ensuite mesurer la largeur des lignes et modifier le corps du texte en conséquence pour tout aligner et faire joli. Je sais bien que c’est idiot de lui faire faire ça à chaque chargement de la page, mais je ne vois pas trop trop comment faire autrement pour l’instant. Je devais lancer le site avant les Puces Typo de samedi, malgré les bugs. Des mises à jour sont prévues, mais je n’ai pas encore trouvé de solution à ce problème de recalcul systématique.
Merci pour l’encouragement en tout cas !
c’est génial !
– est-ce qu’il y a moyen d’indiquer pour chaque police le jeu de caractères qu’elle recouvre et ses différentes qualités typographiques ? (sans parler de l’arabe ou du chinois, souvent il manque des lettres accentuées, ou des ligatures)
– quand tu dis libre, est-ce seulement dans la distribution, ou bien y a-t-il des sources disponibles, une invitation à la collaboration d’autres fondeurs pour des versions améliorées (ou complétées, ou divergentes) ?
Fil, ça dépend des fontes mais je n’ai pas pris le temps de faire une jolie intégration des licences. La plupart sont sous SIL avec les sources disponibles et la possibilité de forker à volonté. La fonderie est en train de grossir, mais gentiment, on fait les choses pas à pas. La collaboration est, à terme, un but. D’autres fontes sont sous CC BY NC.
Je n’avait pas pensé à montrer le jeu de caractère pour chaque police mais c’est vrai que ça serait malin, je vais y penser !
Vraiment bien fait. Même problème qu’Arno*, mais avec Firefox (pas de message d’erreur, mais le logiciel bloque plusieurs secondes).
Idem pour la question de Fil sur les usages possibles (russe, arabe, etc.).
Ah, le russe, l’arabe, pour l’instant la majorité des fontes ont 26 glyphes, alors que pour du latin respectable on est plus proche de 260. Les écritures étrangères, on verra plus tard ! :)
Super aussi mais dans les détails futiles je comprend pas trop le soulignement global de toute les polices lorsqu’on en survole la liste, à gauche.
Si je comprend bien de quoi tu parles, et bien c’était juste « pour faire lien », pour qu’on comprenne bien que c’était un menu. Effectivement, peut-être superflu. Merci de vos critiques et encouragements en tout cas. Ce n’est que mon deuxième site et je n’ai pas du tout le recul et l’expérience nécessaires (ni le temps) pour que ça soit parfait.
J’ai corrigé le code pour supprimer ce chargement au démarrage et rendre le truc un peu plus réactif. Maintenant ça marche nickel avec safari.
Julien Priez, que j’ai eu la chance d’avoir comme étudiant à Estienne, a désormais un site Web. Ouéééé !
Alors si tu n’as jamais vu le caractère qu’il a inventé l’année dernière, tu rates quelque chose :
►http://julienpriez.com/project/le-montreuil
#Apple et #Paul : « On s’est bien fait baiser » | #Graphisme & interactivité blog par Geoffrey Dorne
►http://graphism.fr/apple-paul-sest-bien-fait-baiser
Dans « Paul à la pèche », Clément a récemment scanné ce strip qui parle de l’arrivée d’Apple et plus précisément du Macintosh dans le domaine des arts graphiques.
Je trouve le point de vue super mauvais. Son père a perdu son boulot sans aucun moyen de s’en tirer, parce qu’il dépendait d’une machine de production qui coûtait des millions d’euros. Le gars a mis 40000 euros en deux dizaine d’années dans du matos informatique, au fur et à mesure, et l’a progressivement facturé à ses clients.
Le gars s’est fait financer par ses clients le fait d’être lui-même propriétaire de son outil de production. C’est où qu’il faut pleurer ?
Le gars pleure pas le fait de payer, à mon avis, mais celui d’être seul dans une ambiance totalement standardisée. La machine du père assurait le travail de dizaines de gens — à mon avis toujours, le coût par individu reste bien plus faible.
Je pense que dans un monde rationnel et égalitaire, tel qu’on le souhaite, l’ordinateur individuel n’a pas de sens.
La machine du père qui assurait le travail de dizaines de gens, n’appartenait pas à ces dizaines de gens, mais à un propriétaire unique. Quand la machine a cessé d’être rentable, son propriétaire a jeté la machine, et les gens qui vont avec.
À titre personnel, l’ordinateur m’a permis d’exercer des métiers que je n’ai pas appris à l’école (et que je n’aurais pas pu apprendre par moi-même « avant l’ordinateur », parce qu’il aurait fallu accéder à des outils de production hors de prix avant de pouvoir exercer), alors qu’au contraire le métier que j’ai appris à l’école me garantissait une longue période de chômage. Aujourd’hui, j’ai plusieurs fois changé de métier grâce à cet outil informatique, et au fait que je peux pour une large partie développer moi-même les outils dont j’ai besoin. Je n’en fait pas une généralité, mais évidemment je n’adhère carrément pas à la proposition inverse (selon laquelle l’ordinateur nous aurait baisés).
Pour ce qui est de l’« ambiance standardisée » (les deux avant-dernières cases de cette bd), c’est un problème de point de vue. « Avant l’ordinateur », une autre caractéristique sociale, c’était qu’on bossait dans la même entreprise durant toute sa vie. 40 ans, grosso modo, dans le même environnement. Grosse différence d’ambiance entre une banque, une filature et une imprimerie, mais pour l’individu, ça reste la même ambiance pendant 40 ans.
Moi aussi j’exerce en partie un métier pas appris à l’école et grâce à l’ordinateur. Et j’en suis bien content. Mais je pense quand même que l’atomisation des tâches du design en individus n’a pas que des avantages. En France, plus encore peut-être, où les ouvriers du Livre avaient un statut spécifique, et conquis de haute lutte. Le simple fait de passer d’une production collective à un travail individuel a forcément changé bien des choses, et pas forcément toutes positives.
Yep, bien d’accord. Ce que je disais, c’est que ça n’est pas ça que je lis dans la bande (qui se termine par une vague évocation de la « standardisation », pas de l’autonomisation, en deux cases, et un définitif « on s’est fait baisés » sans intérêt).
Treesaver.js
►https://github.com/Treesaver/treesaver/wiki
#Treesaver is a JavaScript framework for creating #magazine-style layouts that dynamically adapt to a wide variety of browsers and devices. Designers use standards-compliant #HTML and #CSS for both content and design, no JavaScript programming is required.
Documentation :
►https://github.com/Treesaver/treesaver/wiki/Walkthrough
Je rajouterais volontier les tags : #interfaces #webdesign
8))
Modernizr - Une librairie pour détecter les fonctionnalités des clients #web, et ensuite tout se fait via classes CSS.
►http://www.modernizr.com
Modernizr adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. You don’t actually need to write any #Javascript to use it.
C’est fait entre autre par #Paul-Irish, le même que ►http://html5boilerplate.com