L’intégralité du #design de #google : #GUI #guidelines | Graphisme & interactivité blog par Geoffrey Dorne
►http://graphism.fr/lintgralit-du-design-de-google-gui-guidelines
Tags : design google
L’intégralité du #design de #google : #GUI #guidelines | Graphisme & interactivité blog par Geoffrey Dorne
►http://graphism.fr/lintgralit-du-design-de-google-gui-guidelines
Tags : design google
Coffee vs. beer : which drink makes you more creative ? — #Design / UX
▻https://medium.com/design-ux/f7fcb3b786b1
Pour être créatif, résoudre des problèmes plus facilement : il faut boire de la #bière. De l’alcool en général.
While alcohol may not be the drink of choice when you need to be alert and focused on what’s going on around you, it seems that a couple drinks can be helpful when you need to come up with new ideas.
La prochaine fois qu’on se boit de la #Westmalle ensemble, il faudra dans le même temps tenter de résoudre des problèmes (dans #SPIP par exemple). Pas avant, pas après.
Par contre pour la réalisation (coder, etc), là il faut être sobre, voire sous excitants.
The State Of #Responsive #Web #Design | Smashing Mobile
▻http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design
Un article qui fait la synthèse d’à peu près toutes les techniques qui tournent autour du responsive. L’état de l’art quoi.
Signalé sur #Openweb par Élie Sloïm. Version française bientôt apparemment.
#développement #css #html
Je viens de chercher un « #file_browser » en #PHP, pour voir comment publier sur le #web une série de fichiers en vrac, sans devoir les importer dans une base de données… hé bien, c’est un désastre.
La plupart des projets sont morts entre 2007 et 2010, criblés de trous de sécurité (ils semblaient tous croire que c’était une bonne idée de permettre de manipuler les fichiers — modifier/renommer/créer/effacer…), et sans doute à cause d’un désintérêt lié à la concurrence des #CMS et des réseaux sociaux.
Le seul #script que j’ai trouvé qui s’approche un tant soit peu de quelque chose d’utilisable, c’est ▻http://encode-explorer.siineiolekala.net ; il utilise #ImageMagick pour fabriquer des vignettes d’images et de PDF.
Aucun ne semble avoir l’idée de traiter des fichiers écrits en raccourcis type #markdown ou #SPIP pour fabriquer un blog « statique ». Aucun ne propose d’indexation, de vignettes de fichiers rtf, odt, d’extraction des titres des documents pour fabriquer un sommaire.
(Côté #galerie photo, par contre, il y a quelques scripts qui font bonne figure, mais ils sont très orientés photo, pas « vrac ».)
Les bonnes pratiques #webperf toujours sous la main
▻http://gasteroprod.com/blog/les-bonnes-pratiques-webperf-toujours-sous-la-main
La collection « mémento » de chez Eyrolles vient de s’agrandir, avec l’ajout d’un petit nouveau dédié aux performances web, en termes de vitesse. Incontournable ! Et je ne dis pas ça juste parce que j’ai eu l’honneur d’être invité à participer à sa relecture par ses auteurs Armel Fauveau et Lionel Pointet, c’est vraiment un condensé — très complet et didactique tout de même — des principales bonnes pratiques à respecter pour développer des sites performants, et donc plus agréables pour les visiteurs. (...) (...)
#Blog #livre
▻http://www.eyrolles.com/Informatique/Collection/4143/memento.php
▻http://www.eyrolles.com/Informatique/Livre/memento-performances-web-9782212136586
▻https://twitter.com/fauveauarmel
▻https://twitter.com/lpointet
▻http://www.clever-age.com/veille/reactions/pagespeed-et-yslow-ne-sont-pas-des-indices-de-performance.html
▻http://twitter.com/kjoly
#CSS 3 #Flexbox Layout module
►http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
Un article récent (mars 2013) sur le nouveau modèle de boite Flexbox qui arrive, présentant la syntaxe finale. Ce module intègre entre autre le principe des grilles CSS des frameworks directement dans le noyau de base. Avec alignement vertical et horizontal à l’intérieur du parent.
L’autre point génial : définir explicitement l’ordre visuel des boites, sans changer l’ordre du code HTML. Un peu comme dans #Layout-Gala cette fois, mais là aussi directement dans le noyau, avec des règles toutes simples.
Comment construire un #flux #Atom ?
▻http://openweb.eu.org/articles/comment-construire-un-flux-atom
Un article de #Karl-Dubost orienté développeur, et qui aide à faire des flux Atom plus propres, plus solides. Par exemple sur les identifiants uniques.
Les flux de sites #Web (#RSS, Atom) sont utilisés afin de suivre l’actualité de nombreux sites Web. Ils sont pratiques pour les personnes individuelles afin de suivre un grand nombre de sites Web à la fois et permet aux propriétaires de sites de distribuer l’information dans un format contraint. Nous allons voir comment construire un flux Atom solide.
Transitions CSS3 - Alsacréations
▻http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html
Animer les pages web uniquement à l’aide de styles CSS, sans apport de JavaScript : le module CSS3 Transitions
#animation #html5 #transition #css #css3
Actes - 7e Forum Européen de l’Accessibilité Numérique Faire de l’e-accessibilité une compétence professionnelle
▻http://inova.snv.jussieu.fr/evenements/colloques/colloques/article.php?c=78&l=fr&a=428
Ces bonnes pratiques, qui s’appliquent majoritairement au moment de la conception et de l’habillage graphique, garantissent une bonne lisibilité de la page #web et valident les critères Accessiweb précités.
Une présentation de @tetue sur les bonnes pratiques en matière de #typo sur le web. Peut être pratique quand il s’agit de sensibiliser quelqu’un à ce sujet.
Voir aussi :
– transcription : ▻http://romy.tetue.net/965
– support : ▻http://fr.slideshare.net/tetue/amliorer-la-lisibilit-typographique
– vidéo (RMLL 2013) : ▻http://video.rmll.info/videos/etes-vous-surs-detre-lu
#lisibilité #typo #a11y
Générer un cercle dans une image statique de #carte Google.
Google Static Map – How to Draw a Radius around a Point
▻http://jomacinc.com/map-radius
Well, after a very long time trying to find a way to generate a Google Static Map with a filled circle of a specific Km radius around a specified map point, I’ve finally done it!!!
À base de #polyline (suite de points qui simulent une courbe) encodé.
Pas encore trouvé, ou vraiment cherché, comme faire un cercle en image statique dans autre chose que Google (avec les données OSM notamment, même si ça passe par un autre fournisseur de fond). @b_b aura peut-être une idée. :)
#gmap #google-map #map #développement #web
#yakademander et hop : ▻http://open.mapquestapi.com/staticmap
option shape, ellipse et tout ça :)
Yeah merci, je testerai ça quand je comprendrais comment trouver les coordonnées lat/lon des coins du carré qui entoure le rond que je veux. :D
Une petit librairie #javascript ’hack’ qui permet d’utiliser les composants de #jQuery UI sur un périphérique tactile (tablette, téléphone).
Je l’ai utilisée (en même temps que knockout.js, d’ailleurs) sur un projet responsive desktop / tablette, pour faire du drag and drop (oui, « ergonomiquement » c’était justifié... :) ). Hé bien, j’ai été agréablement surpris, avec un peu de paramètrage, ça n’a pas trop mal marché ! (j’avais quelque doutes au départ...).
#Narration_cartographique : une balade avec Sherlock Holmes
Hack Your Maps ▻http://alistapart.com/article/hack-your-maps
we’re going to walk through a single #design process and implement a modern-day web map. By walking this path, I hope to begin making maps part of the collective conversation we have as designers.
et le résultat (avec tout le code nécessaire [à refaire sous #leaflet.js]) :
Héhé, je viens de le lire, par contre ils n’utilisent pas leaflet.js mais mapbox.js (leur api maison qui ressemble à leaflet).
Georeferencement de mes deplacements en ASEAN sur google map
▻http://www.panoramio.com/map/?user=6450080#lt=11.982373&ln=106.719004&z=14&k=1&a=1&tab=4&pl=all
(technique reprise ici par mapbox pour faire de la pub
▻http://www.mapbox.com/blog/aws-road-trip )
Logical Breakpoints For Your Responsive Design | Smashing Magazine
▻http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design
classic typographic theory can help you determine the right breakpoints for your responsive website. You could even go so far as to create different layouts for different languages.
▻http://nerd.vasilis.nl/code/measure-help
#typographie #responsive #web_design #mobile #internationalisation
Improve #Mobile Support With Server-Side-Enhanced Responsive Design | Smashing Mobile
▻http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive
a responsive website is not automatically a mobile-friendly website. Amid the buzz of trendy Web development techniques, the good ol’ Web server doesn’t get the spotlight it deserves. Modern Web development should be about finding the right balance between server-side and client-side implementation.
1. Use Your #CMS
2. Use A #Device-Description Repository
3. Execute #CSS #Media_Queries Server-Side
4. Optimizing #Images
5. Pre-Processing and Intelligent Caching
Introducing Adobe Blank « Typblography
▻http://blogs.adobe.com/typblography/2013/03/introducing-adobe-blank.html
Earlier this year, the Adobe Type Team was approached by one of our other development teams to produce a special-purpose font with two fascinating—at least to me—characteristics:
All Unicode code points are covered.
All code points are rendered using a non-spacing and non-marking glyph.
Rosetta Type Foundry / Fonts / Eskorte
▻http://rosettatype.com/eskorte
▻http://rosettatype.com/resources_production/big/font_imgs/Eskorte/Eskorte_slides-4.jpg
Un petit #schéma qui explique rapidement les relations entre les termes #responsive, #adaptive, etc.
Tiré de ▻http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php
Ben c’est une #mindmap, il faut donc la lire à partir du centre, chaque branche décrivant son parent. Donc oui, ça m’a mieux montré quel terme englobe tel autre.
stamen design | Announcing here.stamen.com
▻http://content.stamen.com/here.stamen.com
“The exercise started with some code that our friend and former colleague Mike Migurski started playing with about a year ago to extract HERE data from their 3D tiles.”
On s’amuse chez stamen...
Si c’est gratuit, c’est vous le produit !
▻http://www.la-bas.org/article.php3?id_article=2721
Tondre les moutons et leur vendre la laine. Telle est la devise de GAFA. GAFA c’est 300 milliards de chiffre d’affaires annuel, c’est plus de 800 milliards cumulés en Bourse, GAFA c’est la bande des quatre : Google, Apple, Facebook, Amazon.
C’est pas gratuit, Là-bas si j’y suis ? (OMG, Mermet fait de moi un produit !)
Bien vu @arno. Les raccourcis, les vite-penser, c’est souvent penser-mal.
Comment distinguer les écrans « grand », « petit » et « moyen » en #CSS ? Bah, c’est pas facile, mais voilà une astuce…
Responsive Web Design With Physical Units | Smashing #Mobile
▻http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units
Here’s the theory: In a combined query, if the ratio between the smaller of the width and height and the resolution, called a PSINET score, is higher than 5, then the result falls in the category of a physically large device. If the resulting number is lower than 5, then it is a physically small device. Devices that score very close to 5 are considered to be medium-sized.
RFC 6903 : Additional Link Relation Types
Allez, encore tout un lot de types de liens #Web qui sont enregistrés. Pas de point commun entre les types créés par ce #RFC, juste quelques types intéressants. « about », « preview », « privacy-policy », « type » et « terms-of-service ».
Pour #SeenThis_TODO, je pense qu’il serait bon d’avoir un lien « terms-of-service » pointant vers ►http://seenthis.net/fran%C3%A7ais/mentions/article/propri%C3%A9t%C3%A9-intellectuelle et un lien « privacy-policy » pointant vers... une page à écrire.
Movable Type version 5.2.3, retour, un CMS en perl simple et bien.
Rapidement survolé, voila surtout ce que j’ai noté pour booster les idées d’interface d’admin de mon CMS préféré…
C’est très clair, 5 icones maxi, (un peu triste mais efficace je me demande si c’est normal d’ailleurs, comme j’ai pas mis imagick ni gd2 dans mon perl…) et bourré de js malins, 2 trucs nickel en exemple :
– sauvegarde automatique quand on créé ou rédige
– possibilité de zoomer seulement la fenêtre avec le textarea pour se consacrer à la rédaction.
Une colonne toujours à gauche en menu déroulant avec un seul sous-niveau, exemple :
– Elements >Gérer : affiche la liste des éléments (choix d’un élément) : affiche la page de modification de l’élément.
Le menu horizontal haut est réduit à quelques boutons : publier, voir, rechercher et un login/deconnexion. Ajoutez à cela un tableau de bord, la vue d’ensemble et une typo aux corps biens proportionnés.
Ah, et un truc important mais difficile : des labels courts et bien choisis.
Pas sûr que ça puisse servir à SeenThis mais c’est rigolo : RFC 6892 : The ’describes’ Link Relation Type
Dans le registre des types de liens, il y avait déjà un describedby qui indiquait une ressource Web décrivant la ressource courante. Désormais, il y a aussi l’inverse, describes, qui va d’une ressource à celle qu’elle décrit.
@Fil Yup, c’est une fonction qui date du RFC 5988 ▻http://www.bortzmeyer.org/5988.html
(Je rajoute #atom, ça peut toujours servir.)
Le Responsive Web Design n’est pas une solution, c’est un compromis « InterfacesRiches.fr InterfacesRiches.fr
▻http://www.interfacesriches.fr/2013/03/13/le-responsive-web-design-nest-pas-une-solution-cest-un-compromis
Tags : #rwd #responsivewebdesign
l’étroitisation de la mise en page pose de gros problèmes ergonomiques que des astuces de code ne peuvent pas forcément gérer
- Les internautes en situation de mobilité utilisent des termes et équations de recherche très différentes de celles utilisées depuis un ordinateur fixe ;
– Les mises en page adaptives ne permettent pas de diminuer les temps de chargement (les éléments de la page sont chargés, mais pas affichés) ;
– La mise en page ne s’adapte qu’aux smartphones, les utilisateurs de feature phones sont donc mis de côté ;
– Cela limite la créativité et les possibilités offertes par le rich media.
En résumé : le Responsive Web Design est un compromis très intéressant pour toucher un maximum de mobinautes en limitant les coûts de développement, mais ce n’est pas une solution universelle, loin de là.