|
HTML5, CSS et fichiers SVG |
|
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
|
Humeur du jour... Salut les amis et amies, moi qui suit une bille en css / design, j'ai découvert depuis quelques jours l'alliance fichiers svg et css dans du html5. C'est incroyable, on a de la puissance derrière tout ça, les applications sont infinies et absolument fantastiques. Nous en sommes qu'au balbutiement, et pourtant la norme des fichiers svg a pas loin de 10 ans maintenant, mais avec le html5, on est en train de découvrir les opportunités d'utiliser des svg. Quelques pistes sur les fichiers SVG - Redimensionnables à l'infini sans perte de qualité (vectoriel) - On peut définir des éléments et les réutiliser au sein même de l'image - Chaque élément peut contenir des propriétés (liens, animation, transformation) - tout les éléments de l'image sont interprétés (XML) et donc on peut les manipuler avec un éditeur, ils sont identifiables (ID) donc on peut appliquer du css dessus. - Avec les nagigateurs récents, on peut appliquer des filtres en temps réels sur l'image Voilà, c'était juste un billet d'humeur pour vous montrer mon excitation face à ce trio incroyable (HTML5 / Css / SVG). Quel est votre sentiment, amis designers ? Je continue a faire quelques essais très interressant (je suis en train de produire un équivalent de mappage html avec un fichier svg sur du multicalque, avec liens, hover, transformation...) Quelques ressources pour vous mettre l'eau à la bouche : - HTML5 et CSS : Effets de survol avec transitions et filtres CSS- HTML5 / CSS / SVG : Accueil » Blog » Créer une carte de France cliquable en HTML5 / SVG. Créer une carte de France cliquable en HTML5 / SVG- HTML5 / javascript / SVG ça, c'est de la bombe, mais il y a du javascript...- Pure Css et sprites Voir le paragraphe : Les formes irrégulières (maîtrise parfaiteLogiciel pour créer / editer du SVG : INKSCAPETuto inskape / css / html5 : Utiliser SVG dans du HML5
Posté le : 30/01/2013 15:15
|
|
|
Re: HTML5, CSS et fichiers SVG |
|
Xoops accro
Inscrit: 27/07/2005 16:10
De France
|
Il est vrai qu'avec toutes ces technologies,on arrive désormais à avoir des sites rapide et de très bonne qualité.Maintenant,il faut que XOOPS puisse l'intégrer.
Pour HTML 5 et CSS3,Xoops 2.6 devrait l’intégrer.Certe ils ont intégrer HTML 5 dans le thème default mais hélas pas dans les modules.
Personnellement,depuis quelques temps j'essaie de comprendre et intégrer le HTML 5 dans mes thèmes.
Posté le : 30/01/2013 15:28
|
|
|
Re: HTML5, CSS et fichiers SVG |
|
Semi pro
Inscrit: 01/08/2005 19:06
|
Je suis d'accord avec toi Tatane encore faut t'il que tous xoops soit en html5 et surtout tous les modules pour etre à pleine puissance
Posté le : 30/01/2013 15:37
|
|
|
Re: HTML5, CSS et fichiers SVG |
|
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
|
Posté le : 30/01/2013 15:48
|
|
|
Re: HTML5, CSS et fichiers SVG |
|
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
|
Attendezzzzzz, je n'ai pas parlé de XOOPS, j'ai "juste" parlé de HTML5 / CSS et SVG. Déjà, comprendre et utilser quelques fonctionnalités nouvelles , c'est déjà pas mal, de là à avoir un XOOPS 100% HTML5, faudra attendre le HTML 6
Posté le : 30/01/2013 15:51
|
|
|
Re: HTML5, CSS et fichiers SVG |
|
Team FrXoops
Inscrit: 08/11/2011 16:26
|
Je suis déjà assez étonné que des vieilles technologies ne soient pas plus utilisées, tel que le dhtml. Par exemple, j'ai commis cette petite traduction ( ) il y a quelques années, et profiter, comme un petit rossignol caché dans les plumes de l'aigle (en l'occurrence l'auteur d'activerender, Marc Barrot) , au passage, de faire une petite application, que vous pouvez activer en cliquant sur l'icône du pinceau qui se trouve en haut, à droite, de la page, sous-mentionnée. (de pas manquer de cliquer sur les petites icones du Monde, dans le corps du texte, pour activer les images). http://radio-weblogs.com/0100306/outlines/fr/aRTutoriel1.htmlComme les modifications opérées sur les propriétés des classes css sont affichées dans un fichier texte, qui recense tout, elles pourraient, tout aussi bien, être sauvegardées en base de données. Ainsi, sur la base d'un thème simplissime, dont les noms de div seraient publiques, pour partie ou en totalité, chacun pourrait faire son propre thème complet personnel, sinon les parties qu'il lui est accordé de pouvoir modifier, à sa guise C'est peu dire que toutes les technologies déjà disponibles sont sous-utilisées. Evidemment plus de <tr>, <br>, etc... ne sont admissibles dans ce contexte, que du <div>, que du <div>, et du css, mais, crédieu, quelles perspectives.... Et je parle bien là de xoops Gwénaël
Posté le : 30/01/2013 17:34
|
|
|
Re: HTML5, CSS et fichiers SVG |
|
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
|
Alain ne t'emballe pas trop vite !!! C'est vrai que le SVG est bien mais 2 hics importants: - Le SVG est au format XML, qui dit XML dit DOM. Et tous les navigateurs qui voudront interpréter une image SVG vont d’abord construire un arbre DOM des éléments qui constituent cette image. Or, DOM est une API extrêmement lente qui peut consommer beaucoup de mémoire si l’on n’y prend pas garde. Ainsi, plus vous avez d’éléments dans votre image, plus son interprétation aura un impact sur les performances. - Deuxièmement, le format XML est un format texte assez verbeux. en clair cela signifie qu’une image SVG est facilement plus lourde qu’une image bitmap du seul fait de son format natif. Il faut impérativement les compressé en format gzip, mais tous les hébergements n'accepte pas la compression gzip pour les pages web. De plus la configuration du serveur doit être irréprochable et surtout autorisée le SVG (l'entête HTTP de l'image est bien image/svg+xml), ensuite certains hébergement ne le propose pas nativement à leurs clients mais avec ses 2 lignes dans le .htaccess sa devrai le faire
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
Et petite précision, Firefox pixelise certaines images (c'est du dû a son moteur interne Gecko qui n'a pas été conçu pour les images vectorielles), vous pouvez suivre le bug iciMais je reconnais que le SVG, dans certains cas, être très utile mais je préconise le plus souvent l'utilisation de jQuery (ou carrément les librairies PHP) pour le travail sur l'image
Posté le : 30/01/2013 22:44
|
|
|
Re: HTML5, CSS et fichiers SVG |
|
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
|
Merci Cédric pour cette partie + "contrainte hébergement".
C'est vrai que en parcourant toutes ces pages, j'ai vu de nombreuses fois le mot "DOM", mais je ne comprenais pas trop ce que c'était.
Je suis attentif à tes remarques.
Je pense toutefois que pour la gestion de boutons et icones pour un site, on devrait soit utiliser les techniques de sprites, soit des images SVG (formes simples donc petits fichiers, customisables en css facilement).
Il est vrai que pour une vrai image vectorielle très complexe, cela est moins fluide qu'un PNG, mais on à l'avantage de pouvoir modifier / transformer l'image en temps réel.
Posté le : 31/01/2013 00:26
|
|
|
Re: HTML5, CSS et fichiers SVG |
|
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
|
Citation : Je pense toutefois que pour la gestion de boutons et icones pour un site, on devrait soit utiliser les techniques de sprites, soit des images SVG (formes simples donc petits fichiers, customisables en css facilement).
Là est aussi le problème, si il y a que quelques icônes, pourquoi pas, parce qu'à chaque image, tu crée un arbre DOM. Pour expliquer le DOM en 3 mots cela va être dur, mais chaque page a son DOM, suffit d'utiliser Firebug pour voir son contenu (notamment les id et plein d'autres trucs importants). Quand tu utilise ls SVG, tu incorpores une nouvelle page (en fait cette page est l'image), tu incorpore un DOM dans un DOM. Je dirais qu'un affichage de 5/6 images SVG (de type 32x32) par page est mieux optimisé mais au-dessus, mieux vaut utiliser le PNG avec jQuery (enfin ça dépend les effets souhaités). L'optimisation de page est un art où l'on se gratte (les arraches) les cheveux très souvent. Pour finir, je dirais que c'est utile de connaître ces techniques, mais a ne pas utiliser systématiquement, et je remercie Alain de mettre des sujets intéressants sur la table
Posté le : 31/01/2013 00:56
|
|
|
Re: HTML5, CSS et fichiers SVG |
|
Semi pro
Inscrit: 27/08/2003 11:03
De Perpignan
|
En HTML5 ne vaut-il pas mieux utiliser Canvas en se servant des valeurs d'un SVG?... plus de problème de DOM...
Posté le : 27/02/2013 16:35
|
Si tu frappes sur ta tête avec une cruche et que ça sonne creux, n'en déduis pas forcément que c'est la cruche qui est vide. ...
|
Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
|