• Filtre d'amour en CSS

Le Tadj Mahall est un lieu magique où l’on peut admirer différents jeux de lumières selon les différents instants de la journée.

 Le couché de soleil y est magnifique, et émerveille chaque jour les milliers de visiteurs. Par ailleurs, le Tadj Mahall est classé au patrimoine mondial de l’Unesco, et reste sans doute l’une des plus belles merveilles du monde.

  

Ceci nous amène donc à découvrir comment réaliser des effets animés sur une photo à l'aide des filtres CSS 2 Beaucoup de développeurs désirent parfois intégrer dans leur page web des effets de réflexion. Mais est-il possible de le faire simplement sous Internet Explorer en version 6 - 7 - 8+ ?

Et bien vous allez découvrir sous PAGEDITOR PRO V8 avec quelle facilité intégrer à l'aide du langage vectoriel VML, les effets de filtres ainsi que l'animation en HTML+TIME à la souris en mode WYSIWYG avec notre éditeur vectoriel préféré.

 Voici le lien pour IE 6 - 7 - 8+ : [ Démo ]




• C'est pour demain !

Le CSS3, couplé à HTML5, va permettre de réaliser des effets réservés jusque-là à JavaScript ou aux découpes d'images contraignantes [ombrage, survol, arrondis...]. Si on ajoute que jQuery et les autres frameworks commencent à s'imposer dans de nombreuses applications web [diaporama, interface cliente riche...], l'année 2010 sera mouvementée ! Bien entendu, il est important de rappeler que certains navigateurs n'ont pas encore implémenté l'ensemble de ces fonctionnalités. 


Sinon depuis 1998 pour réaliser des effets graphiques comme des boutons en coins arrondis ou bien des effets de dégradés animés sur des titrages vectoriels il y a le langage gratuit VML de M$. Testez donc en ligne cette petite [ démonstration vectorielle ] sous les versions 6 - 7 - 8 - 9 de IE, on dirait du CSS3 et HTML5.

En conclusion :

Si l’HTML5 permetra en 2020 de remettre tous les navigateurs sur un pied d’égalité face au W3C, je serai le premier à passer sur cette nouvelle plateforme, seulement voilà, les internautes ont tendance à garder longtemps leur vieux navigateurs Microsoft, et souvent par obligation technique et au final, on risque de se compliquer cruellement la vie avec de nouveaux standards alors pour moi, l’XHTML5/CSS3 , ce n’est vraiment pas pour demain.




• Le DA VINCI CODE

Incroyable !

Encore un mystère élucidé par le célèbre archéologue du Web Peter WOSTYN, en effet, il a déchiffré un code vectoriel ancien qu'aurait utilisé le grand maître des arts graphiques LEONARD DE VINCI pour réaliser sa MONALISA.

Ce code se compose d'une balise nommée "SHAPE" ainsi que divers attributs de positionnement et de choix de couleurs. Il est possible de localiser dans ses manuscrits cette fameuse technique vectorielle.

Décriptage du langage DA VINCI CODE sous PAGEDITOR PRO V8

Pour vérifier les sources de ce code et sa réalité dans les faits, nous avons fait un test sous Internet Explorer 8 afin de découvrir le génie de LEONARD DE VINCI et de Pierre WOSTYN.

Stupéfaction, la JOCONDE nous est apparue avec son sourire et ses yeux envoûtants dans notre navigateur comme un vrai tableau oui mais en vectoriel !

Voici le lien en direct pour IE 6 - 7 - 8 : [ Monalisa ]




• Un site web vectoriel 3.0 sous IE 8

L’objectif : est-il possible de réaliser un site web 3.0 avec les langages de graphismes vectoriels VML - HTML+TIME et TDC ?

1.Etude technique des langages usuels

Je vais tout d'abord vous lister rapidement les solutions « traditionnelles » :

  • Première solution
    créer une page html avec une excellente feuille de style pour avoir une bonne mise en page et mise en forme. Cette solution n’est pas vraiment une réussite parce qu’on nous voulons une animation et je pense qu’avec HTML ou XHTML et CSS on se trompe de langages.
  • Deuxième solution
    faire une image bien compressée (gif ou jpeg) mais le jour où on va supprimer ou modifier quelque chose dans l’image, il faut faire appel à un professionnel et quelques heures de travail.
  • Troisième solution
    pas d’animation jusqu’à présent mais avec du Gif animé on peut créer une animation de qualité moyenne mais le contenu (texte, dessins, images) ne présente aucune structure ou organisation.

En fait les images ne sont pas créées pour être mises à jour ou transformées quotidiennement c’est pour cela qu’il ne reste que le choix de créer soit une animation flash ou soit faire appel à la famille des langages XML. Je vais donc réaliser l’animation du site avec le langage VML - HTML+TIME, c’est l’occasion de les découvrir !
 
2.Description des objectifs
Tout simplement faire une animation interactive, dynamique, évolutive et surtout garantissant une modification facile. Faire de telle sorte que dans une seule page je peux regrouper toutes les prestations de l'entreprise. Mais la contrainte la plus essentielle c’est la séparation (non visuelle mais au niveau de la structure) du contenu et du design (polices, contours, couleurs, animations).
 
3.Conceptualisation
C’est un vrai projet client, un site Web de 20 de pages qui tourne autour d’une page principale, c’est la page qui contient l’animation et l'arborescence [ Rubrique » Menu » Sous_Menu ].
 
4.Réalisation
Le site comporte une page centrale qui contient l’animation: une page en VML - HTML+TIME qui fait appel à l’animation, et quelques pages html qui vont servir à présenter les prestationss une par une. J’ai oublié de vous dire que les langages utilisés sont des standards préconisés par le W3C depuis 1998 et que le code source ressemble à n’importe quelle page HTML ou XML donc facile à modifier. C'est pour cela que PAGEDITOR PRO V8 a été conçu avec cette technologie.
 
6.Conclusion
Le langage VML est un langage de description de graphiques bi-dimensionnels en XML qui permet de structurer les contours graphiques les images et le texte. C’est un langage robuste et surtout pour réaliser des animations de haute qualité avec les balises d’animations HTML+TIME et javascript.

La preuve en vidéo pour vérifier la réalisation finale du projet avec PAGEDITOR PRO V8 sous Internet Explorer en version 6 - 7 - 8 bêta.

[ Voir le site web en vectoriel sous IE 6 - 7 ou 8 ]




• Design et utilisabilité

Qu'est-ce qu'une page d'accueil ?

On parle de "page d'accueil" pour désigner la principale page d'un site web, permettant l'accès aux autres pages du site et accessible par le nom de domaine.
Une vraie page d'accueil est une page qui sert, qui présente de l'information et permet de naviguer.

Design et utilisabilité

Puisqu'une page d'accueil c'est l'image du site tout entier, le design doit jouer une place considérable. Quand on parle de design, on n'évoque pas forcément la multiplication d'images surdimensionnées. Il s'agit de trouver un juste équilibre, et de mesurer cet équilibre en fonction du type de site.

Il est en tout cas évident qu'une page d'accueil doit être visuellement plus tape à l'oeil qu'une page interne de contenu. Avant tout, elle doit donner envie. Et cette envie découle d'une expérience globale, résultat de contenus incitatifs mais aussi d'un design étudié.

Le rapport entre design et ergonomie doit être considéré de telle sorte que le design serve l'utilisabilité de la page d'accueil, en appuyant certains contenus, en mettant en valeur des groupes d'informations, en soulignant la hiérarchie d'importance des éléments par leur apparence, etc.

De nombreuses pages d'accueil incluent des éléments animés (mettons de côté les sites entièrement construits en flash) ceux-ci posent beaucoup de problèmes pour le référencement dans les moteurs de recherches. Concernant l'adéquation d'une animation, la question n'est pas forcément de se demander si l'on doit en intégrer ou pas, mais plutôt de savoir si sa présence apporterait une plus-value à la page d'accueil.

Dans notre démonstration ci-dessous nous utiliserons PAGEDITOR PRO V8 pour confectionner notre page d'accueil dynamique sous IE 8 bêta. Ceci nous evitera d'avoir à détecter si le système de l'utilisateur dispose du plug-in nécessaire pour Flash par exemple.

De plus notre page sera visible entièrement par Google dans les parties dynamiques animées et le tout bien sûr en vectoriel grâce au VML et HTML+TIME.

au fait pour les puristes Open Source :
Chez MOZILLA ils appellent ça le SVG - SMILE
et pour les MAC Apple chez WHATwg c'est CANVAS - JAVASCRIPT

Ils cherchent encore à nous refaire des standards alors que cela existe depuis 1998 au W3C, tout ça pour contourner la technologie Microsoft ® !




Page :  1