Fork me on GitHub




(1) 2 »


HTML5, CSS et fichiers SVG
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
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 parfaite

Open in new windowLogiciel pour créer / editer du SVG : INKSCAPE


Tuto inskape / css / html5 :
Utiliser SVG dans du HML5

Posté le : 30/01/2013 15:15

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: HTML5, CSS et fichiers SVG
Xoops accro
Inscrit: 27/07/2005 16:10
De France
Messages: 2970
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
Partager Twitter Partagez cette article sur GG+
Re: HTML5, CSS et fichiers SVG
Semi pro
Inscrit: 01/08/2005 19:06
Messages: 1851
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
Partager Twitter Partagez cette article sur GG+
Re: HTML5, CSS et fichiers SVG
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051

Posté le : 30/01/2013 15:48

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: HTML5, CSS et fichiers SVG
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
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

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: HTML5, CSS et fichiers SVG
Team FrXoops
Inscrit: 08/11/2011 16:26
Messages: 92
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.html

Comme 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
Partager Twitter Partagez cette article sur GG+
Re: HTML5, CSS et fichiers SVG
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
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 ici

Mais 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
Partager Twitter Partagez cette article sur GG+
Re: HTML5, CSS et fichiers SVG
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
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

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: HTML5, CSS et fichiers SVG
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
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
Partager Twitter Partagez cette article sur GG+
Re: HTML5, CSS et fichiers SVG
Semi pro
Inscrit: 27/08/2003 11:03
De Perpignan
Messages: 1255
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. ...
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant
(1) 2 »



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.

Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

24 Personne(s) en ligne (17 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 24 | Plus ...