En effet Jquery 1.4 a dès sa sortie fait parlé de lui.

Une amélioration des performances du « framework » font qu’il passe maintenant 100% des tests sur les navigateurs ci-dessous :

- IE6, IE7, IE8, Firefox 2, Firefox 3, Firefox 3.5, Safari 3.2, Safari 4, Opera 10.10, et Chrome. (Pas mal non ?!!).

Plus de dix fonctionnalités ont été ajouté à cette nouvelle mouture.

Dont la fonction « .detach() » qui permet d’agir dans le DOM de façon propre.

Cette fonction permet de supprimer des éléments du DOM sans pour autant en endommager la structure.

Une autre fonction très attendue intègre cette nouvelle sortie qui est la fonction « .delay()« .

La fonction « .delay() » permet de gérer de façon plus intuitive le déclenchement d’une action avec un « timer » intégré.

Exemple de code repris du site http://api.jquery.com :

"$('#foo').slideUp(300).delay(800).fadeIn(400);"

Auparavant il fallait pour obtenir cette fonction la créer en s'aidant
du code "$.fn.delay".

Retrouvez l’ensemble des nouveautés de la librairie qui change la donne pour les
webdesigners sur le site net.tuts+

De plus une version de la documentation de Jquery 1.4 est disponible également pour Iphone à l’adresse suivante :

http://www.mrspeaker.net/2010/01/14/jquery-iphone-reference/

Cette version vous permettra d’avoir une interface dédiée à l’iphone vous permettant de connaître ou de revoir les différentes fonctions du « framework » de John Resig.

Retrouvez l’ensemble des sources de Jquery 1.4 aux adresses ci-dessous :

jQuery Minified (23kb gzippé) : http://code.jquery.com/jquery-1.4.min.js

jQuery ordinaire (154kb) : http://code.jquery.com/jquery-1.4.js

Google fournit une copie de jQuery hébergée sur ses serveurs.
Cette copie de jQuery est automatiquement minified et gzippé : http://ajax.googleapis.com/ajax/libs…/jquery.min.js

IxEdit est outil jquery pour les webdesigner. Cet outil se présente sous la forme d’une interface qui se charge directement depuis la page que l’on souhaite modifier.

Pour cela il vous suffit de charger le code source, faisant appel aux différentes librairies d’IxEdit, dans le « header » du code html de votre page.

En voici une démonstration vidéo :

Tout est disponible à cette adresse ixedit.com

Il vous faudra installer Google Gears sur votre navigateur pour que cela fonctionne, hormis si vous êtes sur Safari ou Chrome

A noter aussi que l’interface IxEdit est bien documentée, voir capture ci-dessus.

Css3 nous livre dès aujourd’hui pas mal de bonnes surprises. Grâce aux spécifications des nouvelles normes du W3C, les navigateurs proposeront la possibilité d’utiliser les propriétés des feuilles de styles en cascades à un niveau plus pointu.

D’un point de vue du Webdesign, il s’agit là d’une réelle avancée pour le domaine.

Parmi ces nouveautés y figurent la propriété @font-face.

Cette propriété permet enfin de visualiser des polices différentes de celles définies par défaut via les navigateurs.

Pour les détails techniques je vous donne rendez-vous à cette adresse : site sitepoint.

Et en ce qui concerne les différentes possibilités entre navigateurs rendez-vous à cette adresse : JON TANgerine.

Il existe déjà des ressources qu’on appelle Webfonts.

Exemples de webfonts disponibles sur ce site : webfonts.

Tout ceci grâce à un petit bout de code javascript.

Et surtout grâce aux spécifications du W3C disponibles dans les css3.

Ceci en passant par la propriété @font-face.

Jeff Veen  est l’auteur de ce concept.

C’est cette même personne qui avait aidé à créer le fameux et très célèbre Google Analytics.
Jeff Veen est concepteur d’interfaces interactives.

Typekit n’étant pas encore disponible.
Il est tout de fois recommandé de s’inscrire sur le site.

Ceci afin de vous faire vous même votre propre idée.

Vous pouvez déjà vous inscire à cette adresse Typekit

Et pour plus d’informations sur la prochaine sortie, une adresse Typekit Blog

Voici un concept intéressant pour enfin changer les design de site. De façon radicale et jolie ! Et peut-être plus simplement.

Le redesign gagne aujourd’hui à être connu. C’est pourquoi les agences de communication connaissent bien ce terme. Redesigner c’est bien plus simple que de créer « from scratch » c’est à dire de zéro.

En effet qui connaît ce logo  du célèbre navigateur internet firefox ?

Et pourtant aujourd’hui firefox est devenu le navigateur de référence.  C’est pourquoi lorsque leur logo a été redesigné il a été mis au goût du jour.

Au goût d’un design plus web 2 et le résultat vous le connaissez bien !

Le design est plus épuré; on remarque aussi l’utilisation d’une légère ombre portée. De plus le style graphique est très inspiré du design web 2 avec l’utilisation des reflets en haut de la sphère map monde.

Les ombres sur le renard sont plus marquées. En gros on voit un changement radical de style entre les deux logos. L’ancien étant entièrement en aplat de couleurs.

Tous ces choix ne sont pas faits par hasard ! Lorsqu’une marque ou un produit décide de redesigner son logo il s’agit en fait d’une refonte de l’image même de la marque ou du produit en question.

Refondre son logo c’est véhiculer un message vers ses clients et ses concurrents. Ce message est simple : nous sommes toujours là !

Présents sur un marché qui évolue sans cesse, nous répondons aux nouveaux besoins du marché.

Et à travers cette image plus moderne nous vous prouvons que nous sommes capables d’avoir des produits plus modernes aussi.

Voici un autre exemple, ci-dessous de refonte ou de redesign de logo.

Pour poursuivre sur ce sujet je vous invite à aller sur les sites suivants :

Dix logos redesignés

Questions de redesign

Le plugin « imgPreview » qui fonctionne avec le magnifique framework*  Jquery va vous permettre, lorsque la souris passe sur un lien, de prévisualiser l’image cible du lien.

Pour cela, il vous suffit d’ajouter dans le code source « html » de votre page la librairie Jquery entre les balises « <head></head> ».
D’ailleur cette librairie (Jquery) a été remise à jour récemment. Toutes les informations sur cette mise à jour sont disponibles à cette adresse  :  http://docs.jquery.com/Release:jQuery_1.3.2.

Il vous faudra également ajouter la librairie « imgPreview » développée par Monsieur James Padolsey.

Pour cela, je vous invite à aller sur le site ci-dessous; vous y trouverez toutes les ressources nécessaires à la réalisation d’une prévisualisation  d’image sur un lien :

- http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/

Démos disponibles

* framework : http://fr.wikipedia.org/wiki/Framework

En voici une petite liste ci-dessous.

http://www.designsnack.com :

- choix d’un site par sélection multiple (date, catégorie, Xhtml/Css ou Flash).

http://cssmania.com :

- sélection des designs de site par date de parution.

http://www.unmatchedstyle.com :

- recherche dans la galerie par tag.

http://cssremix.com :

- tri des sites par popularité.

http://www.csselite.com :

- navigation dans les sites par catégorie.

http://www.thebestdesigns.com :

- rechercher un site par répertoire.

http://www.designersource.net :

- sélectionner un site soit par couleur, soit par sujet ou par vote.

http://www.dark-i.com :

- vous pouvez choisir dans une palette de couleurs les sites que vous souhaitez afficher !

http://csscollection.com :

- surfer par catégorie.

http://csscontainer.com :

- choix par ordre d’ajout des sites.

Par ici l’inspiration…

La preuve au travers de ce site. Ceci dit toutes ces pop up ont un point en commun; elles nécessitent le chargement d’un nouvel écran.

En terme d’ergonomie et de lisibilité d’un site, l’ajout d’une pop up est toujours délicat.

La pop up gêne dans la lecture d’un site. Elle peut perturber le visiteur d’un site et lui impose une étape lors du retour au contenu initialement chargé avant le lancement de la nouvelle fenêtre.

Mais il existe une solution qui pourrait bien s’étendre dans les futurs pratiques du métier et être utilisée dans la création des sites à venir.

Une pop up sans nouvel écran.  Pour cela un plugin Jquery a été créé et permet de garder l’agrandissement d’une image dans le flow de lecture d’une page.

Le webdesigner peut ainsi mieux gérer la charte graphique de son site.

Jquery popeye permet aussi de créer une liste d’images à visualiser grâce à une simple liste créé en xhtml à l’aide des balises de listes non ordonnées « ul ».

Ce plugin permet de remplacer une pop up classique, mais permet également de créer assez simplement à l’aide de jquery un diaporama complet à la main de l’utilisateur du site.

Au niveau ergonomique c’est une avancée dans la création web.

Les designers contemporains l’ont eux aussi compris.

Savoir manipuler les polices dans une œuvre graphique peut s’avérer être une tâche passionnante et stimulante pour l’imagination.

Ceci tout en nous faisant sortir des chantiers battus .

Je vous propose pour illustrer ces propos de visiter le site webdesignledger.com

Cette extension pour firefox va vous permettre, à l’aide de vos petits  doigts, d’avoir depuis la même interface et en ligne de commande, la visualisation des données de votre calendrier Google.

De voir les tâches saisies sur votre compte remember the milk (GTD)
ou encore d’obtenir la météo de votre villle.

Site Humanized