Comment travailler avec des icônes en SVG
▻https://la-cascade.io/comment-travailler-avec-des-icones-en-svg
Remarque : quand vous exportez un SVG depuis un outil de design, il comprendra souvent du markup et des métadonnées inutiles, ainsi que des données excessivement précises pour le chemin (dans l’attribut d). Essayez l’outil SVGOMG and comparez le code avant et après pour voir ce qui est supprimé ou simplifié.
(cet article est une traduction de ►http://fvsch.com/code/svg-icons/how-to)
Tout le nécessaire pour utiliser des SVG dans un site web, y compris :
- les méthode pour gérer l’accessibilité,
– la gestion des « vieux » navigateurs
– les astuces d’utilisation de CSS (pour modifs de taille et couleur par ex)
– des exemples d’utilisations des attributs fill et stroke
– les contournements des bogues connus des navigateurs
+ URL de SVGOMG (outil d’optimisation des fichiers SVG) : ▻https://jakearchibald.github.io/svgomg
Voir aussi ▻https://useiconic.com pour un ensemble d’icones SVG et outils/méthodes associés
Pour aller plus loin (et en particulier les animations, les 6 méthodes pour intégrer un SVG dans une page HTML, les bidouilles pour les rendre responsifs, les media-queries...)
voir : ▻https://la-cascade.io/svg-style-et-anime-avec-css
les librairies :
– SnapSVG : « The JavaScript SVG library for the modern web. » (ou « Snap.svg est à SVG ce que jQuery est à HTML, et il rend la vie avec SVG plus facile. ») : ►http://snapsvg.io
– Raphaël : « Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web » : ▻http://dmitrybaranovskiy.github.io/raphael
et la compilation de références : ▻https://la-cascade.io/ressources/#svg
#icone #méthode #svg #web_design #SPIP #HTML5 #iconic #svgomg #outil #animation #raphaël #snapsvg #librairie #javascript #media-queries
Comment créer un thème compatible mobiles avec les media-queries ?
▻http://neosting.net/media-queries-creer-theme-compatible-mobiles
Maintenant que j’ai expérimenté la technique, et que je vous propose enfin un blog compatible mobiles, je vais pouvoir vous donner quelques explications plus détaillées sur la méthode que j’ai utilisée. Rendre son thème compatible avec les mobiles n’est pas si compliqué, mais ça demande du temps et de l’organisation dès le départ. Tout se […] #css #media-queries
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.
Let’s compare two media-query declarations:
@media (min-resolution: 341dpi) and (min-width: 767px) > {
}
and
@media (max-resolution: 131dpi) and (min-width: 767px) > {
}
At first glance, this doesn’t seem like much of a separation, right? Wrong. The numbers I’ve used are specific to the HTC Windows Phone 8X (the first snippet) and the iPad 2 (the second snippet). By using the resolution query, one can basically separate physically small devices from large devices.
La grosse nouveauté sur #Seenthis : c’est recodé en #html5, et surtout c’est en #media-queries, c’est-à-dire que le site Web s’adapte à la taille de l’écran.
Bon, c’est pas terminé, mais j’ai essayé de faire le maximum dans la journée. Théoriquement, ça devrait se déployer au fur et à mesure, et vous pouvez donc tester sur votre iDroidPhone préféré pour voir.
Testé sur mobile, c’est nickel !
Beau travail @seenthis, vous avez bien mérité vingt minutes de sommeil.
+1000, #seenthis_ça_roxxe
J’attends un petit peu que la peinture sèche avant de remonter (d’éventuels et légers) soucis :)
Sous Android 4.1 avec le brouteur standard la barre de recherche/login saute, cad elle se met bien en bas de l’écran mais quand on fait bouger le contenu vers le haut, la barre bouge avec avant de se remettre à sa place en bas de l’écran. Même chose quand on pousse la page vers le bas, mais là c’est moins gênant.
Ah oui, mon dernier « billet » est hyper-chiant, car il est tellement long et ennuyeux, on peut « scroller » pendant des minutest avant d’arriver à sa fin. Une fonction pour plier/déplier des messages longs serait la bienvenue.
Par contre c’est super la navigation en bas de l’écran une fois qu’on est connecté. Chapeau !
Sous Google Chrome pour Android le problème avec la barre de recherche/login sautillante ne se produit pas.
Je continue avec mon Google Nexus S /Android 4.1 :
Und fois connectė une surface grise se glisse par des su l’ėcran quand on scrolle. Elle saure vers le bas pour faire Palace au comtenu et à als Barre de navigatio (Google Chrome).
Ecrire des commentaires marche trres bien - si seulement Chrome n’essayait pas de corriger mes « Fa Utes » pour en rajouter d’énormes erreurs.
Encore sous Android, cette fois avec Firefox mobile c’est encore mieux. Quand on est connecté c’est quasiment parfait, on peut scroller à n’importe quelle vitesse, pas de surface grise ou noire provoquée par le trop rapide mouvement. Quand on n’est pas connecté par contre l’effet est présent sous une forme légèrement différente que dans Chrome et le brouteur Android.
Zut, mon Firefox sous Android vient de crasher, il n’y a même pas de capture d’écran dans le menu Android des derniers apps utilisées comme il y a d’habitude.
Avant je venais de remarquer qu’on peut se connecter mais que le dialogue est pénible à remplir sous tous les brouteurs car il disparait sous le clavier virtuel.
Bonne nuit et félicitations pour cette beta impressionnante. C’est pleinement utilisable !
Sous Android, je ne peux pas me connecter. Le pop up de connexion entre en conflit avec le clavier virtuel quand je veux taper le mot de passe.
Je pense faire une page séparée de connexion, parce que de toute façon ça pose beaucoup de difficultés :
– code pourri pour gérer les erreurs en Ajax (pas dément),
– dépliage qui semble déconner (même sur PC) sur certains brouteurs,
– confusion ergonomique avec l’inscription,
– espace drôlement rikiki.
@monolecte Tu peux te connecter sous Android en faisant glisser le dialogue de connexion vers le haut pour le faire réapparaître.
si je perçois bien les choses, ça veut dire qu’on a plus la possibilité quand on dézoome une page de rétrécir la police en même temps ?
Si vous forcez le rechargement des CSS, il y a une foule de petits détails qui ont été changés. Notamment à destination des très petits écrans (éviter les colonnes de texte trop étroites).
Ben oui, mais j’ai un gros nécran avec une colonne perdue au milieu !
Ça a l’air mieux qu’avant sur Nokia S40 et Opera Mini en tt cas, merci !
@fil : oui, ça c’est pas du tout traité : virer un certain nombre de trucs masqués qui apparaissent au survol, vu que c’est assez bloquant en interface tactile.
Pour ceux qui s’y interessent j’ai trouvé ces points de cassure là dans les css de Seenthis
/ Media queries - points de cassure Seenthis /
/ Moins large que 1000px (devices et navigateurs) /
@media all and (max-width : 1000px){
}
@media all and (max-width : 900px){
}
@media all and (min-width : 780px) and (max-width : 1000px){
}
@media all and (max-width : 680px){
}
@media all and (max-width : 500px){
}
/ Mobile portraits et paysages /
@media all and (max-width : 400px){
}
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
#media-queries sur le navigateur internet de la #Freebox : les queries fonctionnent, mais en tant que support, ça s’identifie comme :
@media screen
et non en tant que :
@media tv
Je ne peux donc pas cibler l’écran de la télévision avec les #media-queries : alors que c’est certes un grand écran, mais consulté à une distance de plusieurs mètres avec une télécommande pas bien précise. Merde. (Et, très important : bande de cons !)
A Pixel Identity Crisis
▻http://www.alistapart.com/articles/a-pixel-identity-crisis
#css #media-queries et tablettes à résolution variable
Responsive Web Design: 50 Examples and Best Practices - DesignModo
▻http://designmodo.com/responsive-design-examples
Exemples de gabarits réactifs, featuring Alsacreation et Boston globe, bravo à eux.
Amazium - The responsive web framework..!
▻http://www.amazium.co.uk/#forms-tables
@Booz encore un truc de responsive webdesign basé sur 960grid (vu que ce terme semble à la mode...)
ah oui super, ca peut intéresser @baroug même si lui c pas la grid 12 mais la 16 qu’il utilise.
Media Queries for Standard Devices | CSS-Tricks
▻http://css-tricks.com/snippets/css/media-queries-for-standard-devices
Une feuille de styles de base pour le Web mobile - Alsacreations
►http://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html
Salut @BoOz,
Tu as aussi ▻http://html5boilerplate.com/mobile , très complet, à expurger selon les besoins.
Foundation: Rapid Prototyping and Building Framework from ZURB
►http://foundation.zurb.com
Boston Globe’s Responsive Redesign. Discuss. – Jeffrey Zeldman Presents The Daily Report
▻http://www.zeldman.com/2011/09/15/boston-globes-responsive-redesign-discuss
#Responsive #design is not #CSS3 media queries, any more than “Hamlet” can be reduced to English grammar. (Yet without English grammar, there is no Hamlet.)
Citation mémorable, à graver dans le marbre.
#media-queries
Media Queries
►http://www.w3.org/TR/css3-mediaqueries
W3C Candidate Recommendation 15 September 2009
#device #mediaquery #media-queries #recommendation #w3c #webdesign #webdevelopment #webdev #webstandards #reference #css3 #design #browser #mediaqueries #specification #standards
