Si vous cherchez des tutoriels Français et que vous ne trouvez pas votre bonheur sur les ressources gratuites, voici un site qui pourra vous aider !

tuto.com vous permet de consulter des centaines de tutoriaux gratuits et des milliers d’autres pour quelques euros !

Je vous propose dans cet article de vous présenter les différents services et avantages de tuto.com.

Tuto.com c’est quoi ?

Tuto.com est une place de marché dédiée aux tutos informatiques en vidéo. Chacun peut y apprendre à utiliser un logiciel ou bien partager ou vendre un savoir-faire informatique. Apprenez pas à pas, à votre rythme et visionnez les vidéos sans limite de temps, parmi un catalogue de 10816 tuto. tuto

Fonctionnement

Le système est basé sur des crédits, qui représentent la monnaie de tuto.com. Il est à noter que vous pouvez également avoir accès à des centaines de tutoriaux gratuits sans achat de crédits mais simplement en vous inscrivant.

Après vous être inscrit, vous aurez accès au catalogue de formation et pourrez également acheter des crédits.

Comment fonctionnent les crédits ?

1 crédit = 1 euro. Acheter des crédits, vous permet de les utiliser pour télécharger les formations vidéo qui vous intéressent. En achetant un forfait de crédits, vous remplissez donc une tirelire virtuelle avec laquelle vous pourrez acheter des vidéos de formation, simplement et rapidement.

• Formez-vous grâce à + de 10800 vidéosUne fois vos crédits en poche, vous pouvez vous former immédiatement au logiciel de votre choix, grâce à un catalogue de plus de 10800 vidéos de formation qui s’enrichit quotidiennement.
• Téléchargement des vidéos immédiatAprès avoir acheté des crédits, vous pourrez immédiatement les utiliser pour télécharger les vidéos qui vous intéressent et ainsi débuter votre formation sans attendre !
• Lecture illimitée des vidéosUne fois les vidéos téléchargées, vous pouvez les lire de façon illimitée dans le temps, sans avoir besoin d’être connecté sur Internet. Vous vous formez à votre rythme, pas à pas.
• Aucun engagement sur la duréeChez Tuto.com, nous pensons que c’est la qualité de nos vidéos qui vous retiendra. Nous ne proposons donc pas d’abonnement. Vous ne payer que pour ce que vous consommez.

Acheter ou Vendre ?

Sur Tuto.com, vous avez 2 types d’utilisateurs: ceux qui souhaitent se former à un logiciel et ceux qui souhaitent partager leurs connaissances sur un logiciel. Sur Tuto.com, vous trouverez des cours en vidéo dédiés aux logiciels de bureautique, de 3D, de vidéo, du web, de programmation, de traitement de l’image, du print… Certaines vidéos sont gratuites, d’autres payantes.

Si vous maitrisez un logiciel, Tuto.com vous permet de gagner de l’argent. Enregistrer un tutorial vidéo et soumettez-le nous. Il sera alors validé par notre équipe et sera mis en vente.

Conclusion

tuto.com est un service complet de tutoriaux vidéos qui vous permettra de trouver de nombreuses ressources de qualités professionnelles ou encore publier vos tutoriaux.

De nombreux logiciels et thématiques y sont abordés, de PHP à .net, de Photoshop à Gimp ou encore de 3D Studio Max à Blender.

N’hésitez pas à vous inscrire et profitez des nombreuses ressources gratuites pour vous faire votre propre avis.

Mozilla a mis à disposition du public la deuxième beta de Firefox 4.

A propos de cette version :

Il s’agit du deuxième Firefox 4 Beta, basé sur la plate-forme Gecko 2.0 Web. Cette Firefox 4 Beta est considéré comme stable et sûre à utiliser pour naviguer sur le Web tous les jours, si les caractéristiques et le contenu peuvent changer avant la version finale du produit.

Avant la réalisation du test, je vous fais part des différentes modifications apportées et publiées sur le site de Mozilla.

Quelques nouveautés :

• Firefox 4 Beta 2 est disponible en 24 langues .
• Les onglets sont désormais sur le dessus par défaut sur Windows et OSX – Linux va changer lorsque le thème a été modifié pour supporter le changement.
• Vous pouvez activer un onglet dans un onglet "App" par un clic droit dessus et en sélectionnant "Faire en App Tab" dans le menu contextuel.
• Les développeurs Web peuvent animer le contenu en utilisant CSS Transitions .
• La réactivité et l’amélioration du défilement.
• Améliorations de la vitesse JavaScript due à des optimisations du moteur .
• Les changements à la façon dont les composants XPCOM sont enregistrés afin d’aider les temps de démarrage et de la séparation processus.
• Voir la liste de modifications complète de la version bêta précédente .

En plus de ces fonctionnalités des précédentes versions bêta de Firefox 4:

• Vous pouvez rechercher et passer à onglets déjà ouverts dans la barre d’adresse intelligente
• Addons Nouveau gestionnaire d’extension et de la gestion API (interface utilisateur sera modifiée avant la version finale)
• Importantes améliorations API sont disponibles pour JS-ctypes, une interface de fonction étrangère pour les extensions.
• L’arrêt et les boutons de recharge ont été fusionnés en un seul bouton sur Windows, Mac et Linux.
• La barre des signets a été remplacé par un bouton de signets par défaut (vous pouvez le réactiver si vous voulez).
• Protection contre les chocs pour Windows, Linux, Mac et quand il ya un accident dans le Flash d’Adobe, Apple Quicktime ou Microsoft Silverlight plugins.
• Transitions CSS sont partiellement pris en charge.
• Full WebGL support est inclus, mais désactivé par défaut pour le moment.
• Core Animation modèle de rendu des plugins sur Mac OS X. Plugins qui a également l’appui de ce modèle de rendu peuvent maintenant tirer rapidement et plus efficacement.
• Prise en charge native de la HD HTML5 Webm format vidéo.
• Un Direct2D expérimentale rendu backend est disponible sur Windows, désactivé par défaut.
• Les développeurs Web peuvent utiliser Websockets pour une faible complexité, de faible latence, les communications bidirectionnelles API.
• Les développeurs Web peuvent mettre à jour le champ URL sans recharger la page en utilisant les API Histoire HTML .
• Plus sensibles en utilisant la page de rendu construction à ossature de paresseux .
• recherche historique Link se fait de manière asynchrone pour assurer une meilleure réactivité lors pageLoad.
• CSS: les sélecteurs visités ont été modifiées pour bloquer les sites Web d’être en mesure de vérifier l’historique de navigation utilisateur un .
• Nouvelle HTML5 analyseur .
• Support pour plus d’HTML5 contrôles de formulaire.

Source : http://www.mozilla.com/en-US/firefox/4.0b2/releasenotes/

Téléchargement

Vous pouvez télécharger la dernière beta de Firefox 4 à cette adresse ou directement sur leFTP de Mozilla.

L’installation n’écrasera pas votre version actuelle de Firefox

Si vous bougez souvent, que vous avez plusieurs systèmes d’exploitations voir plusieurs PC il existe des solutions hébergées vous permettant de remplacer les logiciels courant que vous pouvez utiliser tel que Word, Power Point et d’autres.

Le cloud computing prend de plus en plus d’improtance et je vous propose un petit tour d’horizon de ces solutions.

Sliderrocket

Remplace : PowerPoint

SlideRocket est un logiciel de présentation qui vous permet de créer, éditer et publier vos présentations, diaporama, etc. Il dispose de toutes les fonctionnalités présente dans la solution de Windows Office :

• Création de diaporama
• Ajout de médias et fichiers Flash
• Création de transitions
• Ajout de graphiques
• Imports de documents PowerPoint

Si vous êtes un utilisateur de Google Apps, vous pouvez ajouter l’intégration SlideRocket via le Marketplace Google Apps .

Cette application dispose de nombreuses fonctionnalités ainsi que la possibilité d’y lier des plugins pour étendre le logiciel.

Vous pouvez également installer en local de “Desktop Presenter” :

Le SlideRocket Desktop Presenter vous permet de synchroniser des présentations à partir de votre compte en ligne sur votre bureau en vous permettant de présenter lorsque vous êtes en déplacement ou sans accès à une connexion Internet.

Les prix :

À partir de 12 $ par mois pour les particuliers, les prix SlideRocket est correcte si vous êtes un utilisateur fréquent de présentations. La vraie question, cependant, est de savoir si oui ou non les fonctionnalités offertes justifieront le prix mensuel par rapport à une application de bureau.

Ressources :

• Website : http://www.sliderocket.com/
• Blog : http://www.sliderocket.com/blog/
• Démos : http://www.sliderocket.com/product/demos.html

Acrobat.com

Remplace : Microsoft Office, Adobe Acrobat

Cette solution est éditée elle même par Adobe.

Simplifiez votre manière de travailler. Configurez des espaces en ligne afin d’y stocker un ensemble de documents et de les partager avec plusieurs personnes. Créez des documents, des tableaux et des présentations en ligne et collaborez dessus. Convertissez facilement des documents au format PDF et hébergez des réunions sur le Web.

Fonctionnalités / Avantages:

Espaces en ligne

Partagez un ensemble de documents en un seul endroit

Collaborez avec plusieurs personnes à la fois

Partagez votre espace de travail en ligne

Stockage et partage documents

Partagez des documents avec d’autres personnes tout en gardant le contrôle

Accédez à vos documents où que vous soyez

Intégration aisée de fichiers dans votre site Web, votre site Wiki ou votre blog

Conversion au format Adobe PDF en ligne

Conversion aisée d’un fichier au format PDF en ligne

Conférence Web

Accès instantané où que vous soyez.

Recréez, en ligne, l’environnement des réunions en personne

Demandez le contrôle à distance de l’ordinateur d’un autre utilisateur

Applications bureautiques en ligne

Possibilité de travailler ensemble et en même temps

Une seule version, toujours actualisée

Accès instantané où que vous soyez

Accès mobile

Transfert de documents vers Acrobat.com à l’aide de la caméra d’un téléphone mobile

Affichage et partage de fichiers Acrobat.com à partir d’un téléphone mobile

Les prix

A partir de 14,99$ / Mois. Ce tarif semble raisonnable au vu des possibilités offertes pas la solution.

Aviary

Remplace : Adobe Photoshop, Illustrator, Soundbooth

Aviary est une suite d’outils online. Vous pourrez entre autre :

Editer vos image et vos sons

Créer de la musique

Réaliser des captures d’écran

Création de

Ces applications sont très puissantes et faciles à prendre en main.

Certaines de ces applications peuvent êtres considérées comme des gadgets mais il n’e reste pas moins que ces outils sont impressionnants. L’éditeur d’images est tout simplement étonnant ! Certes, ne vous attendez à avoir les mêmes fonctionnalités que sur The Gimp ou Photoshop mais allez jeter un coup d’œil

Mint

Remplace : Money, Quicken

Mint est un gestionnaire de finances personnel au même titre que Money ou Quicken.

Mint est un outil très populaire finances personnelles qui vous permet de suivre vos transactions par carte de crédit, le solde de votre budget, et de créer des diagrammes ou des graphiques pour vous aider à visualiser vos dépenses. Mint est la façon gratuite et sécurisée pour gérer votre argent en ligne.

Mint est également disponible en tant qu’application pour SmartPhone.

JayCut

Remplace : Windows Movie Maker

JayCut est très facile à utiliser et puissant éditeur de vidéo en ligne. Avec Jaycut, vous pouvez créer des vidéos avec les mêmes outils utilisés dans les programmes de bureau. Ajouter des clips, des transitions, audio, effets, et plus avec leur simple interface utilisateur.

Lorsque vous avez terminé l’édition d’un vidéo, vous pouvez choisir de télécharger ou de l’exporter directement vers YouTube. Exporter jusqu’à 20 vidéos par mois avec 2 Go de stockage en vertu d’un plan libre, ou de payer par mois avec un meilleur plan.

WobZip

Remplace : Logicels de compéssion et d’archivage.

Wobzip est un outil en ligne gratuit qui vous permet de décompresser vos fichiers en ligne.

Il utilise un antivirus pour les vérifications de sécurité et p7zip comme logiciel de décompression.

Vous pouvez ainsi décompresser une archive allant jusqu’à 100MB et dans les formats suivants :

7z, ZIP, GZIP, BZIP2, TAR, RAR, CAB, ISO, ARJ, LZHCHM, Z, CPIO, RPM, DEB and NSIS

Vous pouvez ainsi orienter les personnes à qui vous avez envoyé une archive vers cette solution qui leur permettra de décompresser le dossier sans se soucier du format ou du logiciel à utiliser.

ZamZar

Remplace : Logiciels de conversions de formats

ZamZar est une solution de conversion de fichiers en ligne. Cette solution va vous permettre par exemple de convertir un document office *.doc dans différents formats (*.pdf, *.tiff, *.jpeg). Vous pourrez également convertir vos MP3 en *.ogg et ceci sans installer un seul logiciel ! Vous trouverez l’ensemble des formats de conversion à cette adresse : http://zamzar.com/conversionTypes.php

L’opération est simple :

• Sélectionnez votre fichier
• Sélectionnez le format de conversion
• Renseignez votre email pour la réception du document
• Valider

Un service de gestion de fichier est également proposé aux utilisateurs enregistrés ce qui permet de gérer directement les conversions dans une interface dédiée.

Hulu

Remplace : Logiciel et Carte TV

Je ne vais pas trop entrer dans le détail de cette solution car elle n’est à ce jour disponible que pour les US… mais sachez que Hulu est un site qui propose le streaming vidéo, d’émissions télévisées et films populaires aux États-Unis.

Note : Vous pouvez tout de même accéder à Hulu hors US… en passant par un proxy. Ceci n’étant pas le sujet de cet article, je vous laisse fouiller un peu sur les différentes solutions pour simuler une localisation aux USA.

Meebo

Remplace : Logiciels de messageries instantanées

Avec Meebo, vous pouvez chatter avec vos amis de n’importe où, tant que vous disposez d’un navigateur et une connexion Internet. Meebo est un outil en ligne qui permet de vous connecter à un réseau majeur de la GI, y compris AIM, MSN, GTalk, et Facebook. Vous n’avez même pas besoin de créer un compte, il suffit de saisir vos informations de messagerie instantanée et vous êtes prêt à partir. Si vous prenez les 20 secondes pour créer un compte Meebo, vous pouvez vous connecter à plusieurs comptes à la fois. Plus pratique que le téléchargement et la gestion de trois programmes de messagerie instantanée à la fois, n’est-ce pas?

TokBox

Remplace : Logiciel de Vidéo Chat

Il existe différents niveaux de services allant de la gratuité à près de 40$ / mois pour des services différents :

Les prix sont raisonnables quand on connait ceux d’autres solutions.

Moof

Remplace : iTunes

Vous pouvez avoir une énorme bibliothèque iTunes, mais que se passe t’il quand vous sortez et que vous oubliez d’apporter votre iPod long? Moof est la solution. Moof est une autre application web qui diffuse la musique en ligne, pensée comme une alternative iTunes. Vous pouvez exporter votre bibliothèque iTunes comme un ensemble de fichiers XML et que Moof peut télécharger Moof, vous pouvez donc avoir une sauvegarde complète de votre musique en ligne.

Vous pouvez également obtenir votre musique à partir de Youtube.

ESET Online Virus Scanner

Remplace : Logiciel anti-virus (Scanner)

Attention !!! Ce logiciel ne remplace pas votre logiciel anti-virus ! Cette solution vous permettra néanmoins d’avoir une solution alternative voir complémentaire à votre anti-virus local. Vous pourrez ainsi en cas de défaillance ou de problème spécifique utiliser ESET.

iCloud

Remplace : Système d’exploitation

Nous avons déjà vu ensemble différentes alternatives aux logiciels “Desktop” et nous allons finir en beauté avec la solution définitive… Un système d’exploitation en ligne. Emportez votre bureau et vos application ou que vous soyez et depuis n’importe quel poste informatique, du vrai “Cloud” en somme…

Un système d’exploitation accessible depuis votre smartphone, votre ePC et votre PC de bureau !

Les fonctionnalités et avantages sont nombreux :

Online Storage : Toutes vos données et vos fichiers en un seul endroit et accessibles ou que vous soyez

Productivité :

• Calendrier
• Office applications
• Mails
• Contacts
• Tâches

Médias

• Ecouter de la musique
• Regarder des vidéos
• Radio
• Gérer vos photos / images

Internet :

• Collaboration
• Navigateurs
• News

Développement d’applications : Développez ou étendre les applications iCloud

Prix :

39,99$ pour 100GB d’espace de stockage

Le prix semble raisonnable même si à ce jour nous ne pouvons pas comparer si ce n’est avec des solutions telles que Citrix.

Cette solution ne conviendra pas à tout le monde mais liée à d’autres applications WEB elle synthétise de belle manière ce qui nous attend dans le futur.

Conclusion

Je viens de vous présenter différentes solutions pouvant remplacer vos applications locales, des solutions étonnantes et robustes ; Le monde se tourne vers le Cloud computing et vous venez de voir des exemples concrets de ce qui nous attend et ceci ne représente qu’un aperçu de ce qu’il existe.

N’hésitez pas à faire part de vos expériences sur l’utilisations des solution Web Desktop ou nous présenter d’autres solutions qui valent le détour.

Il peut parfois être intéressant d’éditer son Blog autrement qu’en passant par l’interface de WordPress. Que vous souhaitiez rédiger en mode hors connexion ou encore bénéficier de tous les avantages d’un éditeur de texte.

Je vais vous présenter dans cet article les différentes solutions permettant d’éditer votre Blog autrement qu’avec l’interface prévue à cet effet.

I – Le test

Le test est simple, la redaction d’un article avec incorporation de plusieurs images. Voici l’exemple :

Titre : Test – [Nom solution]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et dictum urna. Nulla in tellus sed lacus bibendum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed viverra nulla id ante eleifend id adipiscing sapien tristique. Curabitur massa neque, mollis nec congue egestas, sagittis eu nibh. Nam nec vulputate ligula. Nulla mi arcu, eleifend eget accumsan sed, bibendum eget justo. Duis lectus tellus, placerat id ultricies et, fringilla non est. Pellentesque nec orci eget est eleifend ullamcorper.

<!–more–>

Titre H2

Suspendisse mauris orci, consectetur non dignissim nec, eleifend vel ipsum. Nullam sagittis, felis eu lacinia commodo, neque nibh ornare nisi, porta vulputate massa ante sit amet orci. Integer placerat sodales lacus, vitae accumsan sapien dictum ac. In non viverra erat. Vivamus sit amet tortor at augue blandit fermentum id in sem.

Titre H3

Sed egestas augue ac nibh blandit consectetur. Nullam at enim ut odio dignissim ornare eu nec tellus. Fusce diam eros, vehicula eget venenatis et, dapibus sed felis. Etiam vel ipsum magna. Cras et ligula nisi. Suspendisse id ante a eros ornare pellentesque. Maecenas nibh tortor, fermentum at porttitor euismod, interdum et neque. Nullam tincidunt porttitor lacus, et fringilla ipsum ullamcorper eget.

Sed scelerisque metus scelerisque dui interdum placerat. Suspendisse ullamcorper, mi at viverra pellentesque, lacus massa adipiscing nibh, a dignissim mauris lectus a lorem. Nullam mattis neque cursus neque feugiat auctor.

Sélection catégorie Article, Infos

Tags, test, WordPress

Info : Ce test est réalisé en liaison avec un Blog WordPress (d’ou le titre) et ne sont testées qu’avec WordPress… Cela dit, ces logiciels sont pour la plupart compatible avec d’autres moteurs de Blog

II – Les solutions

1°) Windows Live Writer

Informations générales :

• Adresse du projet : http://www.windowslive.fr/writer/ (Intégré à Windows XP, Vista et Seven)
• Plateformes : Windows
• Licence / Prix : Gratuit – Intégration Windows

Windows Live Writer est une solutions développée par Windows essentiellement pour éditer votre « Live Blog » mais il est possible d’éditer d’autres solution.

La configuration est simple :

• URL

• Login

• Mot de passe

• Nom de blog

Cette solution est très complète ! Parfois, il font les choses bien chez windows…

Quelques remarques :

• Le transfert des images se réalise correctement mais en double a priori si enregistrement brouillon + Publication…
• Il n’est à priori pas possible d’insérer une légende à une image…

Comparatif

• Mode hors connexion : Oui
• Editions d’entrées : Oui
• Mode code : Oui
• Aperçu : Oui
• Multi-catégories : Oui
• Ajout de catégories : Oui
• balise “more” : Oui
• Tags : Oui, avec fournisseur de mots clef
• Images : Oui avec possibilité d’incorporer des albums photos
• Propriétés images : Oui + beaucoup d’options + gestion des effets
• Mode brouillon : Oui

2°) Sun Weblog Publisher

Informations Générales :

• Adresse du projet : http://extensions.services.openoffice.org/fr/project/swp
• Plateformes : Windows, Mac, Linux
• Licence : Open Source

Cette solution est éditée directement par Sun. Elle s’incorpore en tant que Plug-in dans Open Office Writer.

La prise en main est donc facile mais… oui mais… j’ai rencontré pas mal de soucis :

Duplication : Si vous enregistrez le brouillon, il est nécessaire de fermer votre document puis de recharger depuis « Open WebBlog Entry »…

Images : Transfert OK mais les images sont automatiquement renommées…

Cette solution n’est donc pas assez abouti à mon avis; dommage pour quelqu’un comme moi qui ne travail que sur Open Office.

Comparatif :

• Mode hors connexion : Oui
• Editions d’entrées : Oui
• Mode code : Oui
• Aperçu : Non
• Multi-catégories : Non
• Ajout de catégories : Non
• Balise “more” : En mode code
• Tags : Non
• Images : Oui
• Propriétés images : Oui, celles de oOo
• Mode brouillon : Oui

3°)Scribe Fire

Informations générales :

• Adresse du projet : http://www.scribefire.com/
• Plateformes : Windows, Mac, Linux
• Licence / Prix : Open Source – Gratuit

Scribe Fire est une extension Firefox qui permet de publier du contenu sur votre Blog. Il se présente sous la forme d’un éditeur intégré à Firefox.

L’installation est simple (extension firefox). L’icone jaune représentant l’édition d’une note vous permet de lancer l’éditeur.

Quelques remarques :

• Pas de possibilité de manipuler les propriétés d’images
• L’édition se fait beaucoup en mode code ( pas de réelle barre d’outil avec les balises HTML)

Comparatif

• Mode hors connexion : Oui
• Editions d’entrées : Oui
• Mode code : Oui
• Aperçu : Oui
• Multi-catégories : Oui
• Ajout de catégories : Oui
• balise “more” : Oui
• Tags : Oui
• Images : Oui
• Propriétés images : Non
• Mode brouillon : Oui

4°) Qumana

Fait plutôt rare pour un logiciel de type Desktop, cet éditeur est Multi-plateforme.

• Installation simple et rapide
• Paramétrage simple et chargement des articles automatiquement
• Interface simple et efficace

Malheureusement, il manque certaines fonctionnalités à cette solution :

• Légende sur les images
• Gestion des vidéos et médias
• Certains tags

On notera la présence d’un bouton “Insert ad” permettant l’insertion de publicité AdGenta. Le transfert des images se fait correctement et le code généré est propre.

Comparatif

• Mode hors connexion : Oui
• Editions d’entrées : Oui
• Mode code : Oui
• Aperçu : Non
• Multi-catégories : Oui
• Ajout de catégories : Non
• Balise “more” : Non – Mode code
• Tags : Oui
• Images : Oui avec upload necessaire
• Propriétés images : Oui – sans légende
• Mode brouillon : Oui

5°)Post2Blog

Informations générales :

• Adresse du projet : http://bytescout.com – Pour télécharger : http://www.clubic.com/telecharger-fiche63770-post2blog.html
• Plateformes : Windows
• Licence / Prix : Gratuit – Freeware

Post2Blog est un logiciel au même titre que Windows Live Writer et s’execute donc comme un programme courant. L’installation est simple.

Il intègre également des extensions pour IE et Firefox ainsi qu’un plug-in pour Windows Office (non testé).

Info : Pour l’installation de l’extension Firefox, il est nécessaire d’aller chercher cette extension dans le dossier “C:\Program Files\Post2Blog\Firefox”. Il vous est proposé d’installé cette extension après l’installation du logiciel et ceci en cliquant sur un lien ; il est nécessaire de réaliser cette opération depuis Firefox. Il est fortement probable que le plug-in ne s’installe pas pour des restrictions de sécurité.

Le paramétrage se fait sans encombre, l’assistant nous guide parfaitement dans le paramétrage.

L’interface est très complète ! Elle permet d’intégrer tous les éléments nécessaires à l’édition d’un Blog. J’ai également apprécié la possibilité d’ajouter des Snippets, très utile pour intégrer vos propres balises telles que les balises de code. Le code généré semble propre.

Le logiciel est un peu moins intuitif que Windows Live Writer mais il intègre plus de fonctionnalités. Petit défaut tout de même en ce qui concerne la mise en page et plus particulièrement le positionnement des images.

Comparatif

• Mode hors connexion : Oui
• Editions d’entrées : Oui
• Mode code : Oui
• Aperçu : Non
• Multi-catégories : Oui
• Ajout de catégories : Oui
• balise “more” : Oui
• Tags : Oui
• Images : Oui
• Propriétés images : Oui – Toutes
• Mode brouillon : Oui

6°) BloDesk

Informations Générales :

• Adresse du projet : http://www.blogdesk.org/
• Plateforme : Windows
• Licence / Prix : Gratuit – Freeware

BlogDesk est un programme exécutable. On notera qu’il existe une version Française. L’installation et le paramétrage sont très simples.

On retrouve les fonctionnalités principales de l’éditeur WordPress mais la barre d’outils est beaucoup moins fournie.

Quelques notes :

• Pas de légende sur les images
• Pas  de gestion des titres (ha,h2,etc…)
• Générateur de Tags
• Options spécifiques WordPress

Comparatif

• Mode hors connexion : Oui
• Editions d’entrées : Oui
• Mode code : Oui
• Aperçu : Non
• Multi-catégories : Oui
• Ajout de catégories : Oui – mais dans l’interface de configuration
• balise “more” : Non – Insertion HTML
• Tags : Oui
• Images : Oui
• Propriétés images : Oui – quelques unes
• Mode brouillon : Oui

7°) wBloggar

Cette solution est similaire à Post2Blog en ce qui concerne les fonctionnalités. L’installation est simple mais le paramétrage peut paraître un peu plus complexe.

L’interface est très complète et permet d’éditer des articles avec les mêmes éléments que l’éditeur WordPress. Malgré cela, l’interface reste assez complexe, du genre pourquoi faire simple quand on peut faire compliquer…

L’insertion d’image par exemple est assez complexe ; en effet, il est nécessaire d’uploader l’image avant de pouvoir l’insérer ce qui n’est pas réellement pratique pour le mode “off-line”…

On notera tout de même de nombreuses fonctionnalités.

Comparatif

• Mode hors connexion : Oui
• Editions d’entrées : Oui
• Mode code : Oui
• Aperçu : Non
• Multi-catégories : Oui
• Ajout de catégories : Oui – mais dans l’interface de configuration
• balise “more” : Non – Insertion HTML
• Tags : Oui
• Images : Oui
• Propriétés images : Oui – quelques unes
• Mode brouillon : Oui

Mon Classement :

Info : Ce Classement est personnel, il ne reflète en rien une vérité absolue sur la qualité des logiciels présentés. Je vous laisse libre de vous faire votre propre opinion.

1. Windows Live Writer
2. Post2Blog
3. ScribeFire
4. Qumana
5. wBloggar
6. BlogDesk
7. Sun WebBlog Publisher

Tableau comparatif

	Plateformes	Note	Images	Vidéos	Aperçu Live	Mode Full off-line
Windows Live Writer		8/10
Sun WebBlog Publisher		3/10
Scribe Fire		6/10		(YouTube)
Qumana		6/10
Post2Blog		7/10		(Via Snippets Oui)
BlogDesk		4/10
wBloggar		5/10

Conclusion

Vous avez de quoi éditer vos blogs en mode Desktop ! Faites vous votre propre opinion sur ces solutions et si vous en connaissez ou utilisez d’autres, n’hésitez pas à nous les faire partager.

Tests à venir :

• Zoundry
• Thingamablog
• Flock
• Bleezer
• BloGTK
• QTM
• Thingamablog

Le framework PHP eZ Components a depuis ce 19 avril changé d’identité, il sera désormais connu sous le nom de Zeta Components
et sera désormais un projet de la fondation Apache Software. En effet,
l’éditeur norvegien eZ Systems a accepté de donner les licences de
proprietés à la fondation Apache pour en faire un projet Open source.

-> Page principale de l’annonce : http://share.ez.no/blogs/ez/goodbye-…eta-components

-> Page de la proposition du projet au groupe Apache : http://wiki.apache.org/incubator/ZetaComponentsProposal

-> Page de Détails sur le framework eZ Components : http://ezcomponents.org/

Article original Publié depuis http://www.developpez.net/

HTML 5,  CSS 3 c’est bien beau, ça rend bien service et c’est sympa… malheureusement, tout n’est pas parfait au pays des rêves car de nombreux utilisateurs (vos lecteurs et utilisateurs) ne peuvent pas profiter de ces nouveaux attributs HTML et CSS.

Il est important de penser « utilisateurs ». Les modifications apportées par HTML 5 et CSS 3 ne sont pas encore implémentées par tous les navigateurs. Ne pouvant pas forcer tout le monde à utiliser un seul navigateur, il faut s’efforcer de prendre en compte cet compatibilité.

Comment pouvons nous vérifier cette compatibilité, comment savoir quel navigateur est compatible avec tel attribut HTML ou CSS ? C’est ce que je vous propose de voir dans cet article.

Solution Javascript

Une des première solution consiste à utiliser javascript pour vérifier

<script>
   alert( 'pattern' in document.createElement('input') ) // boolean;
</script>

Si vous mettez ce simple script sur votre page, vous déclencherez une alerte « true » ou « false » selon les navigateurs.

Alerte sur un navigateur supportant l'attribut Pattern

Alerte sur un navigateur ne supportant pas l'attribut Pattern

C’est un moyen simple mais assez contraignant de vérifier la compatibilité de tel ou tel attribut…

Commentaires conditionnels

Les commentaires conditionnels sont un mécanisme propre à Internet Explorer Windows, qui permettent d’inclure dans une page (X)HTML, de manière valide, du code qui ne sera lu et interprété que par Internet Explorer, ou par l’une ou l’autre de ses versions.

Techniquement, il s’agit de simples commentaires HTML, qui seront compris comme tels par la plupart des navigateurs. Cependant, le contenu de ces commentaires a une syntaxe spéciale, qui permet à Internet Explorer de savoir s’il doit interpréter le contenu du commentaire ou bien l’ignorer.

<!--[if gte IE 6]> pour IE 6.0 et version plus récentes <![endif]-->

<!--[if IE 5.0]> pour IE 5.0 <![endif]-->

<!--[if IE 5.5000]> pour IE 5.5 <![endif]-->

<!--[if IE 6]> pour IE 6.0 <![endif]-->

<!--[if IE 7]> pour IE 7.0 <![endif]-->

<!--[if IE 8]> pour IE 8.0 <![endif]-->

<!--[if gte IE 7]> pour IE 7 et supérieur <![endif]-->

<!--[if lt IE 7]> pour IE inférieur à IE 7 <![endif]-->

<!--[if lte IE 6]> pour IE 5.0, IE 5.5 et IE 6.0 mais pas IE7.0 <![endif]-->

Cette technique a le mérite d’exister, surtout lorsque l’on connait les différences qu’il existe entre IE et les autres navigateurs mais, elle ne s’applique que à Internet Explorer et elle devient vite lourde à gérer…

Class Modernizr

Modernizr ajoute classes à l’élément

qui vous permettent de cibler les fonctionnalités du navigateur spécifique dans votre feuille de style. Vous n’avez pas réellement besoin d’écrire du Javascript pour l’utiliser.

Initialisation :

Il suffit de lier la bibliothèque dans votre doument HTML :

<head>
	<script type="text/javascript" src="medias/modernizr-1.5.min.js"></script>
</head>

Voici un exemple concret concernant l’attribut « border-radius » qui n’est pas disponible sur IE… Eh bien, avec Modernizr vous pouvez accomplir tout cela! La syntaxe est très intuitive, aussi:

Code HTML

<div class="radius">
	<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis fermentum quam, ut feugiat dui ornare eu. Aenean vitae purus eget nunc sagittis sollicitudin eget a lorem.</span></p>
</div>

Feuille de style CSS :

	.radius p span{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	display:block;
	width:300px;
}

.borderradius p span{
	border:1px solid #cc3300;
}

.no-borderradius p span{
	border:1px solid #000;
}

L’opération est simple, vous déclarer une class « .[mon attribut] » ou « .no-[mon atribut] » dans votre feuille de style pour gérer les différentes compatibilité…

Border Radius sous firefox

Border radius sous IE après mise en forme via ".no-borderradius"

Il est également possible d’appliquer des conditions sur des éléments javascript. Voici un exemple concernant « localStorage »

<script>
	if (Modernizr.localstorage){
		// Utilisez tous les avantages de localStorage
	} else {
		// Passez par les Cookies
	}
</script>

Cette bibliothèque ne répond surement pas à toutes les problématiques mais elle mérite que l’on s’y arrette. Elle est simple d’utilisation et bien documentée

Pour télécharger « Modernizr », rendez-vous sur le site de l’auteur : http://www.modernizr.com/.

Conclusion

Il n’existe pas de solution parfaite, cela dit, vous disposez de différentes techniques qui vous permettrons d’adapter vos pages Web sur tous les navigateurs. Vous pouvez également orienter vos utilisateurs à utiliser un autre navigateur.

<script>
 $(document).ready(function(){
 if ($.browser.msie) {
 $("#topMsg").html("Votre navigateur n'est pas compatible avec ce site, certaines fonctiionalités et styles seront desactivés. Changer pour <a href=\"http://www.mozilla-europe.org/fr/firefox/\">firefox</a> ou <a href=\"http://www.apple.com/fr/safari/\">Safari</a> ?");
 }
 });
 </script>
-----
<p id="topMsg">

 </p>

A bientôt…

Nouveautés HTML 5 – Formulaires et champs de formulaires

Petite introduction aux formulaires HTML 5… Je vous propose de voir en images et en code les différentes modifications apportées par les nouveaux attributs HTML 5.

Introduction :

HTML 5 apporte son lot de nouveautés également sur les formulaires. Il est important de prendre en considération ces modifications car elles vont permettre un meilleur échange entre les utilisateurs et éditeurs de contenu. Elles sont également là pour nous rendre service et optimiser le WEB de demain.

Information : A ce jour, ces nouveautés ne sont compatible qu’avec les navigateurs « WEBKIT » (Safari et Google Chrome).

Placeholder attribut :

Cet attribut permet d’insérer dans votre champ un exemple de texte à saisir qui a la propriété de disparaître au focus. Ceci remplace l’utilisation de javascript pour réaliser cette opération…

Avant…

	<script>
		$(document).ready(function(){
			$('.placeholder').focus(function(){

				if($(this).val() == $(this).attr('alt')){
					$(this).val('');
				};
			});
			$('.placeholder').blur(function(){
				if($(this).val() == ""){
					$(this).val($(this).attr('alt'));
				}
			});

		});
	</script>
	<form>
		<input type="text" class="placeholder" name="first-name" alt="John" value="John"/><br/>
		<input type="text" class="placeholder" name="last-name"  alt="Doe" value="Doe"/><br/>
		<input type="submit" name="submit" value="Save"/>
	</form>

Après…

	<form>
	<input type="text" name="first-name" placeholder="John"/><br/>
	<input type="text" name="last-name" placeholder="Doe"/><br/>
	<input type="submit" name="submit" value="Save"/>
	</form>

Autofocus

cet attribut permet de sélectionner un champ en particulier au chargement de la page

Avant…

	<script>
		$(document).ready(function(){
			$('.selectedInput').focus();
		});
	</script>
	<form>
	<input type="text" name="first-name" placeholder="John"/><br/>
	<input class="selectedInput" type="text" name="last-name" autofocus/><br/>
	</form>

Après…

        	<form>
	<input type="text" name="first-name" placeholder="John"/><br/>
	<input type="text" name="last-name" autofocus/><br/>
	</form>

Exemple HTML 5 Autofocus

Attribut Required

Permet de spécifier si un attribut est obligatoire. Si le champ reste vide au submit, il sera mis en évidence.

Avant…

		 	<script>
		 		$(document).ready(function(){
					$(".verifForm").click(function(){
						if($(".required").val() == ""){
							alert("Vous devez remplir tous les champs...");
							return false;
						}
					});
				});
		 	</script>
		 	<form>
		 		<label>Nom d'utilisateur : </label><br/>
		 		<input class="required" type="text" name="username" value=""/><br/>
				<label>Mot de passe : </label><br/>
				<input class="required" type="text" name="password" value=""/><br/>
				<label>Prénom : </label><br/>
				<input type="text" name="subname" value=""/><br/>
				<input class="verifForm" type="submit" name="submit" value="Save"/>
		 	</form>

Aperçu Required avant HTML5

Après…

		 	<form>
		 		<label>Nom d'utilisateur : </label><br/>
		 		<input required="required" type="text" name="username" value=""/><br/>
				<label>Mot de passe : </label><br/>
				<input required="required" type="text" name="password" value=""/><br/>
				<label>Prénom : </label><br/>
				<input type="text" name="subname" value=""/><br/>
				<input type="submit" name="submit" value="Save"/>
		 	</form>

Résultat attribut HTML5 Required

Champ email & url

Permet de spécifier un type de champ email ou url et execute des vérifications

Avant…

        <script>
        	function isValidEmailAddress(emailAddress) {
				var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
				return pattern.test(emailAddress);
			}
			function isValidUrlAddress(urlAdress) {
				var pattern = new RegExp(/http:\/\/[A-Za-z0-9\.-]{3,}\.[A-Za-z]{3}/);
				return pattern.test(urlAdress);
			}
            $(document).ready(function(){
            	$('.mail').blur(function(){
					if (!isValidEmailAddress($(this).val())) {
						alert("Email non valide !");
						return false;
					};
				});

				$('.url').blur(function(){
					if(!isValidUrlAddress($(this).val())){
						alert("URL non valide !");
						return false;
					}
				});
            });
        </script>
		<form>
					<label>News Letter : </label><br/>
					<input class="mail" type="text" placeholder="YouMail@provider.com" required /><br/>
					<label>Votre site Web : </label><br/>
					<input class="url" type="text" name="yourWebSite" placeholder="www.yoursite.com"/><br/>
					<input  type="submit" name="submit" value="Inscription"/>
				</form>

Check mail avant HTML5

Check URL avant HTML5

Après…

				<form>
					<label>News Letter : </label><br/>
					<input type="email" placeholder="YouMail@provider.com" required /><br/>
					<label>Votre site Web : </label><br/>
					<input type="url" name="yourWebSite" placeholder="www.yoursite.com"/><br/>
					<input  type="submit" name="submit" value="Inscription"/>
				</form>

Résultat Champ de type Mail HTML5

Les messages d’erreurs seront directement gérés par les navigateurs.

Il est également possible d’utiliser l’attribut « pattern » qui vous permettra de spécifier la structure des données saisies en lieu et place d’un REGEX javascript :

<input type="text" name="username" placeholder="Nom d'utilisateur" pattern="[A-Za-z]{4,10}"/>

Si vous êtes familier avec les expressions régulière vous aurez compris que le format accepté devra contenir uniquement des lettres de 4 à 10 caractères.

Les nouveaux types de champs :

Voici les différentes valeurs pouvant être attribuées :

• tel
• search
• url
• email
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color

Conclusion

Certes ces nouveautés ne sont encore applicable que sur les navigateurs « WEBKIT » mais il est clair que ces nouveaux attributs seront disponible sous peu pour les navigateurs Mozilla (voir IE…). Alors n’hésitez pas à utiliser ces nouveaux attributs dès maintenant.

Lien : Documentation W3C

HTML 5 nous apporte de nombreuses et belles surprises dont un fait l’objet de ce tutoriel : « localStorage ». A vrai dire, cette fonctionnalité ne fait pas parti officiellement de HTML 5 mais y est lié indirectement.

Le principe est simple, cette fonctionnalité vous permet de sauvegarder l’ensemble de vos données saisies en locale ; que vous rafraichissiez la page ou que vous quittiez votre navigateur et le relancez sur la même page, vos données seront sauvegardées.

Nous allons voir dans ce tutoriel la façon d’implémenter « localStorage ».

I – Introduction & prérequis

Avant de commencer, vous devez connaître le HTML 5 ainsi que l’utilisation du framework javascript jQuery.

Page de base :

<!DOCTYPE html>
<html>
 <head>
 <meta name="generator" content="HTML Tidy, see www.w3.org">
 <meta http-equiv="Content-Type" content= "text/html; charset=UTF-8">
 <title>Tutoriel local storage</title>
 <script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
 </script>

 </head>
 <body>

 </body>
</html>

Vous trouverez ci-dessous la page qui nous servira de base pour ce tutoriel et qui intègre la bibliothèque jQuery

II – Création d’un contenu éditable

Un des nouveaux attributs de HTML 5 est « contenteditable ». Cet attribut vous permet de réaliser des éléments éditables par les utilisateurs. Pour mettre en place cet attribut

Code HTML – zone de saisie :

	<h5>Todo Liste</h5>
	<ul class="editable" id="todoListe" contenteditable="true">
	    <li>
	    </li>
	</ul>
	<p>
	    <button id="clearStorage">
	        Effacer mon localStorage
	    </button>
	</p>

Liste éditable

Jusque là, c’est bien mais lorsque vous quittez votre navigateur ou si vous rafraichissez votre page, le contenu ne sera pas sauvegardé… Comment faire sans pour autant poster nos données ?

Utilisation de javascript

Pour sauvegarder nos données, nous allons utiliser la propriété « localStorage » qui nous permettra de sauvegarder nos données en locale sans l’utilisation de cookies. Vous trouverez ci dessous le code javascript commenté qui nous permettra de réaliser cette opération.

Code javascript :

<script type="text/javascript">
$(function(){
	var editable = document.getElementById('todoListe');

	//Action réalisée au focus
	$(editable).blur(function(){
		//Sauvegarde des données saisies dans un variable 'myStorage'
		localStorage.setItem('myStorage', this.innerHTML);
	});

	//Récupération de nos données en cas de chargement...
	if (localStorage.getItem('myStorage')) {
		editable.innerHTML = localStorage.getItem('myStorage');
	};

	//Fonction pour affacer le localStorage
	$('#clearStorage').click(function(){
		localStorage.clear();
		location.reload() ;
	});
});
</script>

Une fois cette opération réalisée, sauvegardez votre fichier puis saisissez plusieurs lignes dans votre liste et sortez du focus. Vous pouvez maintenant fermer votre navigateur et le relancer ou encore rafraichir votre page, les données saisies seront sauvegardées.

Code complet et ressources :

Code complet du tutoriel :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="Content-Type" content= "text/html; charset=UTF-8">
        <title>Tutoriel local storage</title>
        <script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
        </script>
        <style type="text/css">
            .editable {
                background: #f5f5f5;
                border: 1px solid #000;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                var editable = document.getElementById('todoListe');
                //Action réalisée au focus
                $(editable).blur(function(){
                    //Sauvegarde des données saisies dans un variable 'myStorage'
                    localStorage.setItem('myStorage', this.innerHTML);
                });

                //Récupération de nos données en cas de chargement...
                if (localStorage.getItem('myStorage')) {
                    editable.innerHTML = localStorage.getItem('myStorage');
                };

                //Fonction pour affacer le localStorage
                $('#clearStorage').click(function(){
                    localStorage.clear();
                    location.reload();
                });
            });
        </script>
    </head>
    <body>
    	<h5>Todo Liste</h5>
            <ul class="editable" id="todoListe" contenteditable="true">
                <li>
                </li>
            </ul>
            <p>
                <button id="clearStorage">
                    Effacer mon localStorage
                </button>
            </p>
    </body>
</html>

Compatibilité

Au moment ou je vous parle, cette implémentation est compatible avec les navigateurs et versions suivantes (windows):

• Chrome 4 +
• Firefox 3.6 +
• IE 8 +
• Opéra 10 +
• Safari 4 +

Je vous propose dans cet article de réaliser un CD avec Gimp. Ce tutoriel est disponible en version WEB et également en version screen cast (encours de réalisation…).

Difficulté : 5/10

Durée : 20 minutes

1°) Création du document

Après avoir lancé « Gimp », créez un nouveau document vierge de 1000px par 1000px (Figue 1.1). Masqué tout de suite le calque « Arrière-plan » afin d’afficher la grille.

Figure 1.1 - Création d'un nouveau document Gimp

2°) Création du paterne

Nous allons créer la forme de base de notre CD, pour cela, rien de plus simple puisqu’il s’agit d’un cercle… Tout d’abord, ajoutez un nouveau calque que vous nomerez « Patern CD ». Sélectionnez l’outil elipse dans la boite à outil Gimp  puis dessinez un cercle quelconque. Il est inutile de réaliser un cercle parfait puisque nous allons régler le positionnement et la taille de notre cercle avec la boite de dialogue de réglage.

Dans la boite de dialogue, entrez les informations suivante (figure 2.1) :

Position : 50 – 50

Taille : 900 – 900 pixels

Figure 2.1 - CD Gimp - Création du cercle principal

Remplissez la forme obtenu avec une couler c3c3c3.

Ce paterne nous servira de base pour une sélection complète de notre CD, Dupliquez le et nommez le nouveau calque « Fond CD ».

3°) Création du trou central

Pour cette opération, nous allons réaliser les mêmes opération que précédemment mais avec de nouveaux réglages. Executez les opérations suivantes :

1. Créez un nouveau calque et nommez le « Cercle central – petit »
2. Outil Ellipse puis dans la boite de dialogue, entrez les informations suivantes (figure 3.1):
   • Position 435 – 435
   • Taille 130 – 130
3. Remplissez de noir ou d’une couleur quelconque

Figure 3.1 - Réglages pour le trou central

4°) Création du cercle central moyen

Idem que pour le petit cercle avec les informations suivantes :

• Nom du calque : Cercle central – Moyen
• Position 390 – 390
• Taille 220 – 220
• Remplissage 8f8f8f

Figure 3.2 - Réglages pour le cercle central - moyen

5°) Création du grand cercle central

Idem que le cercle de taille moyenne avec les informations suivantes :

Nom du calque : Cercle central – Grand

Position 340 -340

Taille 320 -320

Remplissage 6b6b6b

Figue 3.4 - Réglages pour le grand cercle central

6°) Création du trou

Nous avons maintenant notre CD complet ou presque… nous allons maintenant réaliser le trou central. Pour cela, faite « Alpha vers sélection » sur le calque « Cercle Central – petit » puis sélectionnez le calque « Fond CD » puis touche « Suppr. » de votre clavier. Répétez cette opération de suppression sur les calques « CCercle central – Moyen » et « Cercle central – Grand »

Masquez le calque « Cercle central – petit » afin d’obtenir notre paterne définitif (figure 4.2)

Figure 4.2 - Aperçu du paterne

7°) Réalisation de l’effet irisé

Créez un rectangle centré sur le CD  avec les réglages suivants :

Figure 5.1 - Réglagles pour la sélection rectangulaire

Ceci nous permet de travailler sur la moitié de notre image car nous appliquerons par la suite un effet miroir.

Sélectionnez l’outil dégradé et sélectionnez ensuite un dégradé de type « Full Saturation Spectrum ».

Figure 5.3 - Dégradé de type Saturation spectrum

Remplissez votre sélection rectangulaire de haut en bas avec ce dégradé.

Ensuite, dans le menu calque, faites « Calque => Découpage automatique du calque ».

Il est ensuite nécessaire de déformer notre rectangle afin qu’il ai une forme d’entonnoir horizontal. Pour cela, utilisez l’outil perspective (figure 5.6).

Figure 5.6 - Déformation du rectangle irisé

Cliquez sur « Transformer » pour valider la deformation.

Dans le menu, cliquez sur « Calque => Calque au dimension de l’image » puis dupliquez le calque. Sélectionnez ce nouveau calque et enfin dans le menu, « Calque => Transformer => Miroir horizontal ».

Fusionner ce nouveau calque avec l’autre côté irisé (fusionner vers le bas) puis réglez l’opacité de ce calque à 15 %.

Figure 6.1 - Apercu après effet irisé

8°) Lueur blanche

Nous allons réalisé une lueur blanche comme celle qu’il pourrait y avoir avec le soleil…

Créez un nouveau calque puis réalisez une sélection rectangulaire avec les informations suivantes :

Figure 7.1 - Sélection rectangulaire pour la lueur blanche

Remplissez cette sélection de blanc.

Appliquez un flou gaussien de 25 puis baissez l’opacité à 45%. Faites un « Alpha vers sélection » sur le calque CD puis « inverser la sélection » (Ctrl+i), sélectionnez à nouveau votre calque « lueur blanche » et « Suppr » de votre clavier pour effacer ce qui dépasse.

Pour finir, utilisez l’outil rotation et appliquez une rotation de 45°.

9°) Réglages finaux…

Vous pouvez maintenant réaliser différents réglages tel que l’opacité du centre du CD

Figure 8.1 - Aperçu final du CD

Je vous laisse décorer le CD à votre guise…

Le version 3 de CSS nous a apporté son lot de nouveauté ; parmi les plus connues et plus utilisées on peut citer « Corner radius » ou encore les dégradés mais une nouvelle propriété très intéressante va vous permettre une encore plus grande liberté : la propriété « transform ».

De la 3D en CSS ?

Je n’irai pas jusqu’à dire qu’il s’agit de 3D mais plutot d’effet 3D au même titre que nous pouvons réaliser ces effets avec un logiciel de graphisme.

Nous verrons dans cet article comment réaliser un cube en effet 3D.

I – Introduction

Avant toute chose, il est nécessaire de prendre en compte la comptabilité. L’utilisation de la propriété CSS 3D transform n’est compatible qu’avec Firefox 3.5+ [-moz-transform] (documentation) et Safari 3.2+[-webkit-transform](documentation).

Travaillant essentiellement sur Firefox, je ne m'aventurerai pas dans les détails de Safari mais il n'y a pas d'énormes différences...

1°) Prérequis

• Connaissances HTML / CSS
• Vous vous souvenez de vos cours de géométrie ?
• Un éditeur CSS / HTL

2°) Un peu de théorie...

http://www.w3.org/TR/css3-3d-transforms/

Rotation d'un objet : -moz-transform: rotate(angle);

Exemple :

-moz-transform: rotate(30);

Figure 1.2.1 - Propritét CSS Transform rotate - Rotation d'un div de 30°



Redimensionnement 2D axe X et Y d'un objet : -moz-transform:  scale(sx[, sy]);

Si [sy] n'est pas renseigné, il aura la même valeur de [sx]

Modifier la perspective : -moz-transform: skew(ax,[ay]);

Permet de modifier l'axe de perspective, vous pouvez également utilsier skewX(deg) et skewY(deg) pour les utiliser indépendament.

Exemple : -moz-transform: skewY(30deg);

Parlons maintenant de la propriété "transform:matrix", il faut comprendre dans Matrix la traduction "matrice". Nous avons une forme géométrique qui est constituée de différents points [a,b,c,d] que nous pouvons manipuler.

-moz-transform:  matrix(a, c, b, d, tx, ty)

/* Where a, b, c, d construit la transformation de la matrice
   ┌     ┐
   │ a b │
   │ c d │
   └     ┘
   and tx, ty are the translate values.  */

Quelques exemples :

.matrix {
width: 200px;
height: 100px;
background: #f5f5f5;
-moz-transform:matrix(1,0,0.6,1,15em,0);
}

Rendu (figure 1.2.3)

Figure 1.2.3 - Rendu de la proprité transform:matrix

Exemple 2 - Retournement d'objet

.matrix {
width: 200px;
height: 100px;
background: #ff8000;
-moz-transform:matrix(-1,0,1.2,1,20em,12em);
}

Résultat (figure 1.2.4) :

Figure 1.2.4 - Résultat transform:matrix - retournement d'objet

Exemple 3 : Reflexion

-moz-transform: matrix(1, 0, 0, -1, 0, 0);

Figure 1.2.5 - Exemple transform:matrix - Reflexion

Autres exemples (non-shématisés) :

Rotation 90° sur la gauche : -moz-transform:matrix(0,-1,1,0,0,0);

II - Création d'un cube 3D

1°) Code HTML de base

Il faut tout d'abord créer 3 blocs qui nous permettrons de simuler notre cube. Ces 3 blocs seront encadrés par un div global.

Code HTML du cube

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tutoriel CSS 3D</title>
<base href="http://localhost/tutos/tuts/css-3D/"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
 <div id="cube">
 <div id="topSide"><div>Content</div></div>
 <div id="leftSide"><div>Content</div></div>
 <div id="rightSide"><div>Content</div></div>
 </div>
</body>
</html>

J'ai également créé un fichier css qui nous permettra de mettre en forme notre cube 3D. Dans un premier temps, j'ai simplement dissocier les blocs.

Code CSS fichier style.css

#cube {
 position: relative;
 top: 200px;
 margin:0 0 230px 0;
}

#cube .cubeSide{
 height:200px;
 width:200px;
}
#topSide{
 background:#ff8000;
}
#leftSide{ background:#0080c0;}
#rightSide{background:#00ff40;}

Voici le résultat obtenu (figure 2.1.1) :

Figure 2.1.1 -CSS Transform - Cube 3D Etape 1

Maintenant, passons à des choses un peu plus sympa, nous allons appliquer notre propriété "transform" à notre cube :

.leftFace {
 background: #ff8000;
 -moz-transform: skewY(30deg);
}

.rightFace {
 background: #800080;
 -moz-transform: skewY(-30deg);
}

Nous avons appliqué ici une propriété "transform:skewY" permettant d'incliner nos div sur leurs axes Y donnant ainsi un effet de perspective.

Figure 2.1.2 - Transformation perspective sur l'axe Y - [transform:skewX(val)

Positionner les DIV : Nous devons appliquer un positionnement "absolute" à l'ensemble de nos blocs afin que ceux-ci puissent êtres dissocié et placés indépendament (figure 2.1.3) .

Code CSS : Positionnement des DIV

.topFace, .leftFace, .rightFace {
position: absolute;
}

Figure 2.1.3 - Positionnement absolute des blocs

Ensuite, nous allons positionner notre bloc right (figure 2.1.4). Il s'agit ici de décaller notre bloc de 200px sur la droite et vers le bas.

.rightFace {
 background: #800080;
 -moz-transform: skewY(-30deg);
 top: 200px;
 left: 200px;
}

Figure 2.1.4 - Positionnement du bloc "rightSide"

Intéressons nous maintenant à la partie haute, c'est à dire le DIV topSide. C'est la partie la plus compliquée...

.topFace {
 -moz-transform: rotate(60deg);
 left: 100px;
 top: 42px;
}

.topFace div {
 background: #0080c0;
 -moz-transform: skewY(-30deg) scaleY(1.16);
}

Quelques explications : Pour donner cet effet, il est nécessaire de pivoter notre face (-moz-transform: rotate(60deg);), puis nous appliquons une perspective et un redimenssionnement.

Figure 2.1.5 - CSS Effet 3D - Cube final

Avec un peu d'habillage, voici le résultat final :

Figure 2.1.5 - CSS Effet 3D - Cube Final