WeasyPrint - Converts HTML + CSS to PDF - WeasyPrint converts HTML/CSS documents to PDF
►http://weasyprint.org
WeasyPrint is a visual rendering engine for HTML and CSS that can export to PDF. It aims to support web standards for printing. WeasyPrint is free software made available under a BSD license
Webcam Swiper
►http://iambrandonn.github.com/WebcamSwiper
Point your webcam at yourself and swipe your hand left or right to turn the pages of the book.
#interface #js #caméra #mouvements
joue du xylophone en remuant la tête devant ton ordi
►http://www.soundstep.com/blog/experiments/jsdetection
Et hop, une petite démo de ce que ça donne une fois branché sur une carte #leaflet :
►http://tiles.kupaia.fr/article9.html
Passez la main gauche à droite pour zoomer, et dans l’autre sens pour dézoomer.
Allez c’est la kermesse, un space invaders basé sur le même principe :p
Et un autre exemple pour la route, fais péter la moustache :p
The Web Aesthetic | ALA
►http://www.alistapart.com/articles/the-web-aesthetic
contraintes du #Web et esthétique, un exemple :
When accessed on more powerful devices like newer smartphones, tablets, and desktop computers (those that can “cut the mustard”), an image is displayed for each story. These images have been deemed “nice to have”—enhancements to the core experience that are conditionally requested after the basic page has loaded.
Using media queries from code | Document Object Model (DOM) | MDN
▻https://developer.mozilla.org/en-US/docs/DOM/Using_media_queries_from_code?redirectlocale=en-US&redirectslug=C
Jouer avec les media queries depuis un script, par exemple :
var mq = window.matchMedia("(max-width: 640px)");
if (!mq.matches)
alert('prout');
Et comme d’habitude il faut un fix pour IE, le voici :
Une fourberie pour faire la même chose à coup de css + jQuery :
Rather than the measuring the screen width on resize of the window, I check for a css rule that is changed by the media query. This way, regardless of the how the browser treats the scrollbar, the media query will fire at the same time.
▻https://www.fourfront.us/blog/jquery-window-width-and-media-queries
Jetstrap - The #Bootstrap #Interface Builder
►http://jetstrap.com
Dans la série Bootstrap, via @b_b voilà une application en ligne pour faire des #maquettes, #mockup, etc mais en générant ensuite le code #HTML et #CSS, avec le #framework Bootstrap.
Ça fait donc à la fois un outil pour faire un maquette rapide à la souris, mais avec du code #responsive derrière, la grille et les modules du framework. On peut tester en plusieurs tailles pendant qu’on crée.
C’est vraiment relou cette manie de reporter sur des sites normaux, qui n’ont pas de limite de place, des habitudes d’#écriture avec des noms de code barbares issus de #SMS ou #Twitter et qui visaient à gagner quelques pauvres caractères.
Après les sites normaux deviennent aussi illisibles que les borborygmes qui viennent des #flux-tendus.
Franchement, c’est mieux #accessibilité que #a11y, #lisibilité ou #lisibilité-web que #100E2R (easy to read en 100%, littéralement), non ?
C’est quand même, entre autres, pour ça que @seenthis c’est plus classe.
Lu en page d’accueil du site ▻http://a11yqc.org (sur l’accessibilité du Web à Québec) :
Sur la scène internationale, a11y est utilisé comme abréviation et mot-clé (« hashtag »). Le chiffre 11 indique le nombre de caractères substitués entre les caractères « a » et « y » du terme Accessibility. Depuis quelques années, cette #abréviation est de plus en plus utilisée pour des événements relatifs à l’accessibilité du Web.
Oui, je sais ce que ça veut dire et aussi pourquoi ya 11 dedans mais cette apparition de termes chiants à lire est en grande partie dû parce qu’utilisé comme hashtag dans des textes où il y avait PEU de place : twitter essentiellement. Quand on s’en fiche du gain de place, c’est quand même mieux de se parler normalement. Je trouve.
N’oublions pas qu’un langage très technique ou abscons est gage à la fois de reconnaissance et d’exclusion…
#technocratie #web
On ne dit pas « hashtag » mais « mot-dièse », d’abord, hein :P
[..::Dossier: :..] Ladislas Mandel, explorateur de la typographie française 2/2 « De la Naissance de l’Écriture à la Typographie Numérisée
►http://isabellecosta.wordpress.com/2008/06/03/dossier-ladislas-mandel-explorateur-de-la-typographie-franc
Mandel a donc analysé comment les lecteurs appréhendent une page typographique, par l’expérimentation sur de très petits corps. « On croit que dans les très petits corps on ne voit pas la lettre, mais pourtant on la lit, dans la lecture globale que l’ont fait des mots… »
Sauf qu’on lit les mots en « globale » seulement une fois qu’on les connaît déjà et d’autant plus qu’on les a vu souvent. Donc un texte en petit corps avec un langage plus soutenu ou dans une autre langue, sera fort peu lisible.
Hahaaaa, je viens de me rappeler que j’avais sous la main une recension en français des résultats d’études neurologiques sur la lecture, donc des travaux récents avec ce qu’on sait aujourd’hui de la vitesse de l’œil et des connexions neuronales.
Et en fait le truc de Mandel c’est entièrement faux ! Ce n’est qu’une illusion dûe à la vitesse incroyable avec le cerveau fait ces opérations, parce qu’avant on ne pouvait pas mesurer cette vitesse.
Mais maintenant qu’on sait le faire, on a pu voir qu’en fait l’œil décortique un à un les graphèmes (signe ou groupe de signes écrits formant un son, l’équivalent visuel du phonème).
►http://www.sauv.net/neuroneslect.php
La reconnaissance visuelle des mots ne repose pas sur une appréhension globale de son contour, mais sur sa décomposition en éléments simples, les lettres et les graphèmes. La région corticale de la forme visuelle des mots traite toutes les lettres du mot en parallèle, ce qui, historiquement est responsable de l’impression de lecture globale…l’immédiateté de la lecture n’est qu’une illusion, suscitée par l’extrême automatisation de ses étapes.
Et en fait le truc de Mandel c’est entièrement faux ! Ce n’est qu’une illusion dûe à la vitesse incroyable avec le cerveau fait ces opérations, parce qu’avant on ne pouvait pas mesurer cette vitesse.
Mmmh, c’est peut être un poil catégorique ? :) J’ai tendance à penser que les phénomènes constatés par Mandel mettent en évidence des mécanismes propres aux lecteurs expérimentés (adultes, éduqués et « relativement grands lecteurs »). Il y a des phénomènes de lecture globale, mais seulement chez les sujets qui ont appris, maîtrisé et intégré cette décomposition en lettres, d’abord, en graphèmes ensuite. Au fur et à mesure de l’avancée de ce travail, et de sa validation par l’expérience et l’environnement, le cerveau accélère, automatise et simplifie (et cela vaut pour tout apprentissage).
Ainsi les phénomènes décrits par Mandel, ou le fameux mème :
Sleon une édtue de l’Uvinertisé de Cmabrigde, l’odrre des ltteers dnas les mtos n’a pas d’ipmrotncae, la suele coshe ipmrotnate est que la pmeirère et la drenèire soit à la bnnoe pclae. Le rsete peut êrte dnas un dsérorde ttoal et vuos puoevz tujoruos lrie snas porlblème. C’est prace que le creaveu hmauin ne lit pas chuaqe ltetre elle-mmêe, mias le mot cmome un tuot .
ne valent que pour un lecteur expérimenté (et la dernière phrase de la citation, en italique est une dangereuse et malhonnête extrapolation). Vouloir faire apprendre à lire aux enfants suivant une méthode basée sur les automatismes et raccourcis de haut niveau des lecteurs expérimentés, ce serait comme vouloir faire apprendre à faire du vélo en commençant par le monocycle (ce que montre le lien que tu as posté en commentaire).
Du coup, je trouve ton premier commentaire intéressant, car il évoque bien la part relative de la notion de « lisibilité » d’un texte (que forcement, on voudrait la plus absolue possible).
Si tu as / vous avez d’autres liens sur ces sujets, n’hésite(z) pas, ça m’intéresse beaucoup (et j’espère ne pas être le seul).
Mais le fameux mème est lui aussi compris dans les automatismes : dans tous les cas (pour les non handicapés) l’œil commence par décomposer les lettres une à une (et pas du tout globalement), puis les graphèmes, puis avec une rapidité extrême essaye d’en déduire en sens, reconnaître quelque chose de connu. Ce mème n’est donc pas lisible parce qu’on reconnaîtrait une image globale des mots, mais parce que notre cerveau remet en place les lettres une à une dans un sens qui... lui donne du sens. Seulement il le fait si rapidement que l’on a l’impression que c’est immédiat, comme une image. Trop fort ce cerveau !
Sous le coude j’ai cette liste d’articles déjà, du collectif #Sauver-les-lettres : ►http://www.sauv.net/analyses_primaire.htm
Dans « Apprentissage de la lecture ».
Oui, carrément, j’ai été un peu maladroit et imprécis dans mon commentaire. En parlant de « phénomènes de lecture globale », je ne pensais pas « perception globale de la forme ». Mon intention initiale était de dire que Mandel (qui était typographe, et non chercheur en neurosciences), en disant « la lecture globale que l’ont fait des mots… » ne pensait peut être pas non plus à une « reconnaissance de la forme globale des mots ». Ne serait-ce pas un comble pour un dessinateur de caractères ? :)
mais parce que notre cerveau remet en place les lettres une à une dans un sens qui... lui donne du sens .
Oui, de ce que je m’en souviens, ce seraient les rétroactions des zones sémantiques qui seraient responsables des phénomènes globaux, comme de pouvoir comprendre le mème plus haut, ou de "lire un texte en diagonale". Par contre, et c’est toujours difficile à exprimer via le langage (qui a tendance à tout linéariser), tout ces processus cérébraux fonctionnent de manière très parallèle (le "une à une" qui me dérange dans ta phrase).
En tout cas, merci pour les liens ; étant jeune papa, je me sens étrangement plus concerné qu’avant par l’état des méthodes d’apprentissage de la lecture. ^^
Oui le « une à une » veut pas dire à la suite en fait, mais plutôt « une à une séparément » (mais en parrallèle), on est bien d’accord.
étant jeune papa, je me sens étrangement plus concerné qu’avant par l’état des méthodes d’apprentissage de la lecture
Et nous donc... C’est hallucinant de voir l’état de ce que répondent les maîtresses de maternelle quand on se met à parler de ça. Sérieux yen 90% qui partent du globale, tous intoxiqués qu’ils sont depuis 30-40 ans. J’ai fait exprès de polémiquer là-dessus à la réunion de l’école la semaine dernière...
Du coup on cherche des trucs pour s’amuser uniquement avec les graphèmes à la maison (on a trouvé un truc pas mal je crois). M’enfin je ne m’inquiète pas trop car pour ceux qui ont des parents assez cultivés et ayant du temps à leur consacrer, quelque soit la méthode ils finissent par lire correctement. C’est pour la masse des autres, le problème...
Analyse du nouveau Myspace et des codes du design web contemporains - Graphisme & interactivité blog par Geoffrey Dorne
►http://graphism.fr/analyse-du-nouveau-myspace-des-codes-du-design-web-contemporains
C’est presque devenue la norme, l’interface Metro (renommée Modern UI Style) est propre, carrée, élégante, fluide, correspond également parfaitement aux grilles en responsive design… bref elle est le doux mélange entre le graphisme suisse et le design web contemporain. Je suis donc ravi de voir que l’expérience proposée n’a pas l’air trop confuse mais également que la clarté de ce type d’interfaces qui reposent sur une grille prend le pas sur le design web d’aujourd’hui.
Oui, mais je tire la sonnette d’alarme de l’#accessibilité : tous ces designs en grilles hiératiques, pourquoi pas. Sauf qu’au niveau de la couche graphique d’un système d’exploitation il peut être simple de contraindre, dans le web c’est plus difficile et pas forcément souhaitable.
Je fais partie de ces rares clampins qui zooment les polices mais pas les designs entiers (ça viendra peut-être quand le #responsive sera général, ce n’est pas encore le cas). Or généralement les designs avec des hauteurs fixes, ça casse de partout : dans le meilleur des cas je peux encore lire, dans le pire des cas il y a des chevauchements partout.
Vous me direz que je peux désactiver les #CSS : je vous répondrai que oui, moi, je peux, parce que le web est mon métier. Mais les vrais gens qui surfent, là, au-dehors ?
Bref, pour moi c’est toujours un point de vigilance et j’ai souvent une certaine défiance (justifiée 95% des fois) devant des pavés qui sonr tous de la même taille.
Le Firefox de mon Mac mini a une taille de texte configurée à 24px au lieu de 16 parce que je le consulte sur ma TV depuis mon canapé. Tous les sites en « px » ne respectent pas ce paramétrage. Mais le pire, c’est que la plupart de ceux qui utilisent bien des « em » sont tout de même difficiles à consulter.
Je me console en disant que je tente de montrer le bon exemple avec mon propre site… ;-)
« Je fais partie de ces rares clampins qui zooment les polices mais pas les designs entiers » dis tu. Le problème est donc… rare ?
@baroug Je ne sais pas, c’est juste un sondage effectué autour de moi qui me confirme que ce n’est pas si fréquent chez les gens qui passent leur vie sur le web (je prends malgré tout souvent l’exemple du mec qui fait affichage > taille du texte dans IE : seul le texte grossit, le design n’est pas zoomé).
C’est pourtant un point de vigilance que je souligne souvent quand on me demande mon avis sur des sites : et si ça casse (parce que ça cassera forcément, ne nous leurrons pas), quel est le seuil tolérable et quelles méthodes de compensation a-t-on mis en place ?
Dans tous les cas, tu as raison, pour contenir du texte, les hauteur fixes, ça pue. Mais pourquoi choisir le zoomage texte seul, qui rend le web plus laid qu’il ne l’est déjà ?
@baroug parce qu’un scroll horizontal additionnel serait encore plus pénible :)
Pour un professionnel du web, tu bosse manifestement sur un trop petit écran. Investis.
Bariol, typo gratuite déjà vue ici, se dote maintenant d’un set d’icônes assez drôles.
Gallery of free #HTML #snippets for #Twitter #Bootstrap. | Bootsnipp.com
►http://bootsnipp.com
Une super #collection de morceaux de code HTML, #CSS et autre, pour avoir rapidement à disposition des #modèles (#pattern) #web déjà prêts, mais en utilisant le #framework Bootstrap.
►http://bootsnipp.com/uploads/ApJykYqVgeRMKFLhonwKQYIKaTQhFZfn_small.jpg
►http://bootsnipp.com/uploads/XsCkOQmIwtqcRqDLcBLhdzanCSrbZMht_small.jpg
EmChart — Convertir des pixels en EM
►http://css.4design.tl/emchart-convertir-des-pixels-en-em
►http://fordinteractive.com/blog/wp-content/uploads/2009/02/picture-1.png
►http://fordinteractive.com/tools/emchart
Il est courant d’avoir besoin de convertir des valeurs exprimées en pixels vers une unité de mesure relative comme les EM’s. Cette conversion n’est pas toujours aisée et la calculatrice est souvent nécessaire. EmChart est une table de correspondance qui donne automatiquement le ratio en EM par rapport à deux valeurs exprimées en pixels.
#typo
Le syndrome du développeur – HTeuMeuLeu
►http://www.hteumeuleu.fr/le-syndrome-du-developpeur
Cette disposition n’est évidemment pas du tout pratique à utiliser. Mais il n’est pas difficile d’imaginer pourquoi ça a été installé ainsi : un tuyau d’eau chaude et un tuyau d’eau froide en entrée, un robinet pour l’eau chaude et un robinet pour l’eau froide en sortie.
#ergonomie #UX #utilisabilité #interface #robinets #plomberie
Les premières notices accessibilité adaptées à la gestion de projet web
Les notices AcceDe Web s’adressent de façon spécifique à chaque intervenant d’un projet web et sont adaptées aux différentes étapes de conception.
UICloud | User #Interface Design Search Engine, #UI Elements, GUI Design, Free Downloads
►http://ui-cloud.com
#Moteur-de-recherche d’éléments graphiques, avec la #licence indiquée et les sources téléchargeables de ces éléments.
J’ai eu la même réaction qu’@arno sur l’interface #SPIP3, « vilainissime et bourrée de détails torchés avec une grosse truelle », qui vient de partager (ici : ▻http://seenthis.net/messages/81135) un plugin « qui en corrige les aspects les plus insupportables ».
Je vois que nous avons travaillé dans la même direction (moins de cadres, typo lucida, lisibilité, etc.) et m’en réjouis. J’ai de même partagé, il y a bientôt un an, un relookage correctif expérimental, sous forme de plugin prêt à l’emploi :
▻http://romy.tetue.net/interface-spip-lucida-simple
C’est moins un thème abouti qu’une preuve de concept (ne tenez pas compte, par exemple, de la laideur des icônes de la barre de nav), mais je m’en sers avec satisfaction. Voici un aperçu des améliorations travaillées :
Bref, je plussoie et remercie @arno de nous partager ce travail !
Blanch, une sans pas mal et gratuite. Licence très succinte à savoir, pas de modification, pas de redistribution.
►http://www.atipus.com/tipografia/blanch-typeface
#typographie #gratuit
Petite leçon de vocabulaire typographique. | typomanie
►http://typomanie.fr/?p=330
#vocabulaire #typo #corps #chasse #contrepoinçon #empattement
L’interface de #SPIP-3 étant juste vilainissime et bourrée de détails torchés avec une grosse truelle, je me suis fait un #plugin (« Détails d’interface ») qui en corrige les aspects les plus insupportables :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/details_interface_3
L’interface non modifiée de SPIP 3 :
►http://twitpic.com/afx6x9/full
et l’interface modifiée par le plugin :
►http://twitpic.com/afx764/full
Pas totalement convaincu : pour la typo, ta version est globalement mieux (en tout cas en regardant les deux images), pour le reste, c’est moins évident.
Dans l’ordre de ma lecture du message :
Première réaction : tiens pourquoi il a pas commité directement dans le core ?
Seconde réaction, tiens le retour des mots nuancés « c’est quoi cette interface ... »
Troisième réaction : je ne suis vraiment pas un expert, une référence, une pointure en la matière : en mettant les 2 images l’une à coté de l’autre et en faisant le jeux des 7 différences, je n’arrive pas à dire « Oui il a raison ou tord c’est vraiment mieux ou moins bien »
#spip
Je suis circonspect.
Un des trucs les plus visibles que je vois, c’est la correction de l’effet « BLOCS dans des BLOCS dans des BLOCS » à cause de tous les cadres partout. Là avec le mélange d’arrondis + de bordures en dégradés parfois + d’aplats à la place des bordures, ça corrige un tout petit peu ce problème.
Mais évidemment viennent les remarques :
– les nouvelles icônes ont été longuement discutées publiquement pour déterminer leur pertinence d’abord (quelle métaphore utiliser), puis leur aspect (contraste, etc) : pourquoi ne pas avoir participer à cette discussion ?
– c’est super d’avoir mis tes modifications sur la zone pour permettre aux autres de tester, mais si au final ce n’est pas un chantier commun que d’autres pourraient modifier, ça ne servira pas à grand chose : est-ce que chaque personne qui voudra faire des remarques sur l’interface va commiter sa propre version sur la zone ? Du genre « interface_arno », « interface_ben », « interface_rastapopoulos » ? Pourquoi pas hein, c’est un peu comme le principe des branches ou des forks en Git, mais je suis dubitatif...
Mais sur les modifs elles-même, je n’ai pas envie de faire de commentaires car pour moi il est clair que ce n’est pas du tout 3 couleurs et 4 pixels de marge à changer en gardant la même interface, alors qu’à mon avis c’est une vraie refonte ergonomique qu’il faut engager pour vraiment prendre en compte ce qu’est SPIP aujourd’hui (càd plus uniquement pour faire un magazine), et notamment depuis qu’on peut y adjoindre moult plugins.
Bon puisque @tetue me gourmande :), je précise : ne te méprends pas @arno, je trouve ça super qu’on fasse des propositions (tant qu’elles sont publiques).
Et je suis aussi tout à fait d’accord avec toi sur plein de problèmes de lisibilité, voire même de laideur, quant à l’interface de SPIP 3 (entre autre le problème de cadres partout, mais pas que).
Seulement, je pense que le chantier est plus gros que juste changer quelques couleurs, fut-ce plus joli ensuite. Je ne fais donc volontairement aucune remarque esthétique : je ne suis pas forcément pertinent sur ce point. Mais sur l’ergonomie générale : layout (nombre de bandes, nombre de colonnes), navigation, placement des informations, etc.
Sinon il parait que @tetue est bloquée et qu’elle ne peut donc pas répondre alors qu’elle voulait te congratuler : dommage. :)
Je suis assez satisfait des nouvelles icônes très modernes (qui ressemblent à celles que Google+ a depuis mis en place par exemple) toutefois je suis d’accord pour confirmer une marge d’amélioration. Le projet de @tetue que @RastaPopoulos a mis en lien me semble assez convaincant.
Je trouve les remarques de de @tetue et @rastapopoulos plus convaincantes que la proposition d’Arno :
1./ Je ne vois pas en quoi le fait de revenir à l’ancien menu principal apporte.
2./ Je retiens néanmoins la sobriété des styles à l’intérieur du cadre principale et la sensibilité typographique d’Arno. (d’accord avec @rastapopoulos la dessus )
3./ Je retiens aussi l’agrandissement du logo de l’article. Au fait, y a t’il un chantier pour calquer le fonctionnement les logos d’articles sur celui les documents ? ( j’aimerai bien pouvoir choisir les logos parmi la médiathèque par exemple).
4./ Pourquoi avoir viré l’outil « déplacer » ? Je trouve qu’il est super intuitif à sa place dans Spip3
5./ D’accord avec Têtue pour gagner de la place sur les auteurs ou les mots clés :
– 99% des articles ne possède qu’un auteur. Pourquoi perdre autant de place ?
– Je trouve par ailleurs que les groupes de mots clés importants devraient être encore plus mis en exergue que les autres.
6./ Enfin, pour conclure, 100% d’accord avec Rastapopoulos lorsque qu’il dit « c’est une vraie refonte ergonomique qu’il faut engager pour vraiment prendre en compte ce qu’est SPIP aujourd’hui (càd plus uniquement pour faire un magazine) »
On commence par la home du site qui ne devrait pas forcement tourner autour de l’auteur connecté ?
sur les logos il y a un ticket sur le sujet ►http://core.spip.org/issues/920
Typograph – Scale & Rhythm
►http://lamb.cc/typograph
Tester la #grille typographique suivant la taille de texte et la hauteur de ligne qu’on choisi, puis récupérer le code CSS correspondant.
ça m’a été remis en tête par @tetue
This page falls somewhere between a tool and an essay. It sets out to explore how the intertwined typographic concepts of scale and rhythm can be encouraged to shake a leg on web pages. Drag the colored boxes along the scale to throw these words anew.
#typographie #design #web #grille
#Accesskey, l’essai non transformé de l’#accessibilité | Openweb.eu.org
►http://openweb.eu.org/articles/accesskey_essai_non_transforme
Un article critique sur les accesskeys qui seraient rarement utiles du fait de leurs implémentations disparates et aussi parce qu’il n’y a pas consensus et que c’est au cas par cas.
Mais intéressant tout de même à la fin : une liste des raccourcis qui font « un peu » consensus quand même, par exemple ceux recommandés par le #RGAA
AngularJS — Superheroic JavaScript MVC Framework
►http://angularjs.org
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
C’est vrai qu’il y a des bonnes idées... mais « Superheroic », gné ?
Opquast Desktop : : Modules pour Firefox
►https://addons.mozilla.org/fr/firefox/addon/opquast-desktop
Opquast Desktop est une application qui vous permet d’analyser votre site au regard de différentes check-lists qualité ou #accessibilité.