des outils et des hommes
Post on 12-Jul-2015
195 Views
Preview:
TRANSCRIPT
PNG
• un tag <img> et on est bon
• position via CSS, transitions et animations
• :hover, bien pour actions simples
• jouer avec les <map> pour faire plus complexe dans l’interaction
• c’est écrit png, mais jpg et gif aussi, hein...
SVG
• mise en oeuvre “relativement” simple
• haut niveau de potentiel interactif
• librairies là pour aider
• ça va aller
SVG
• mise en oeuvre “relativement” simple
• haut niveau de potentiel interactif
• librairies là pour aider
• ça va aller
SVG, c’est quoi ?
Le SVG, c’est du vectoriel dans la page HTML.
Donc :- le rendu est en temps réel (attention performance)- les formes “existent” dans le DOM (events)- on peut les modifier à la volée
TOUTE UTILISATION UN TANT SOIT PEU AVANCÉE NÉCESSITE L’UTILISATION DE LA PROGRAMMATION,DU CODE : ÉVÉNEMENTS, VARIABLES, INSTANCES...
ATTENTION CODE ATTENTION CODE ATTENTION
ATTENTION CODE ATTENTION CODE ATTENTION
TOUTE UTILISATION UN TANT SOIT PEU AVANCÉE NÉCESSITE L’UTILISATION DE LA PROGRAMMATION,DU CODE : ÉVÉNEMENTS, VARIABLES, INSTANCES...
ATTENTION CODE ATTENTION CODE ATTENTION
ATTENTION CODE ATTENTION CODE ATTENTION
ATTENTION CODE ATTENTION CODE ATTENTION
ATTENTION CODE ATTENTION CODE ATTENTION
Mais bon,on s’en fout,
hein ?
Workflöw SVG
• Adobe Illustrator
• Exporter en SVG
• Récupérer le code, le placer dans sa page
• et voilà...
Workflöw SVG
• Adobe Illustrator
• Exporter en SVG
• Récupérer le code, le placer dans sa page
• et voilà...
- Trop facile !
Voilà, merci.
Là : https://github.com/boblemarin/-datavisaj
Là aussi : http://boblemarin.github.com/-datavisaj/
Et surtout : http://google.com
top related