Mon article sur wordpress dans phpsolmag ;)

« WordPress permet par défaut de créer un article,  une page, un lien, d’ajouter un média… WordPress permet également l’ajout d’autres fonctionnalités plus poussées telles que : transformer un shortcode ajouté dans l’éditeur de texte d’un article / page en contenu dynamique, ou encore profiter des Hooks WordPress pour des fonctionnalités ou affichages additionnels. Miary Rebehasy vous montrera les différentes façons d’étendre wordpress à travers les shortcode et hooks. »

Telle est l’introduction de l’article sur wordpress intitulé « Développement de shortcode et Hook dans WordPress » que j’ai rédigé dans phpsolmag. Je vous invite à lire cet article en suivant ce lien.

TYPO3 4.7 – la dernière version de la 4-x

La version 4.7 du cms (Content Management System) vient de sortir le 24 avril 2012. Cette version est la dernière de la branche 4-x.

Cette version est surtout axée sur l’accessibilité. Côté backend, il n’y a pas de différences avec la 4.6. Les nouveautés se voient plus dans le code source des fichiers. AdoDB (librairie d’abstraction de base de données) a été mis à jour. Pareil pour SwiftMailer (librairie d’envoi d’email). Le plugin pour gérer le moteur de recherche indéxée a été re-développé. En effet, il se gère maintenant avec Fluid.

De nouveaux boutons ont été ajoutés à l’éditeur de texte enrichi, pour prendre en compte les nouvelles balises du HTML5.

Pour découvrir cette nouvelle version et télécharger la bête.

JOOMLA 2.5 – Premières impressions

Parmi les nouveautés de la version 2.5 de Joomla sorti cette semaine, on retrouve :

• Un système de recherche avancée (matérialisé par le composant com_finder)
• un support multi-bases de données.
• la notification de mise à jour. (nouvel icône visible sur le panel accueil dans le back office).

Le préfixe des tables n’est plus jos_ mais est généré aléatoirement.

Dans la page « choix du mot de passe », il est possible de choisir également un « identifiant ». Dans les versions précédentes, l’identifiant « admin » est imposé par défaut.

A la fin de l’installation, il est proposé de supprimer le dossier « installation » avec un bouton.

Dans le Back-Office, 2 entrées ont été ajoutées dans le menu « Users » (User Note et User Note Category). Je ne vois pas exactement pour l’instant leurs utilités.

Une icone « Featured » a été ajouté dans la barre d’outils du content.

Le support technique de cette version sera assurée pendant 18 mois.

Une liste détaillée des nouveautés peut être retrouvée sur le site officiel de Joomla en Français.

Détecter le navigateur Mobile avec MobileESP

Le projet MobileESP est une API (Application Programming Interface)  à la disposition des développeurs souhaitant détecter si le navigateur de l’internaute est un mobile. J’ai déjà créé un post du même type (cf lien).

Avec cette API, on peut avoir le détail du type de navigateur (IPhone, Android, Blackberry…) Ce qui permettra vraiment de cibler l’internaute qui surfe sur le site Internet pour le proposer de télécharger l’application adéquate au smartphone.

Le script consiste en un seul fichier et est disponible dans différents langages de programmation telles PHP, Java, APS.NET (C#), Ruby et JavaScript.

En PHP, on peut détecter tout simplement comme ceci :

Pour télécharger les sources : http://blog.mobileesp.com/

TYPO3 Que nous réserve la 4.6

J’ai retenu toutes les dates de sorties des versions de TYPO3 depuis la version 4.2.6.

En effet, le 10 Février 2009 sortait la version 4.2.6. la 4.3 est apparue quand à elle, le 22 juin 2010. Nous avons eu le 26 janvier 2011 la version 4.5. TYPO3 nous annonce cette fois-ci la sortie officielle de la version 4.6 le 25 octobre 2011.

Sacha Storz a écrit un excellent article sur cette version 4.6 que je vais essayer de traduire dans ce post.

TYPO3 4.6 sera hérité de FLOW et TYPO3 PHOENIX. Optimisation du cache du framework, support du format XLIFF et l’amélioration de la performance sont au menu.

ExtBase et Fluid seront mis à jour. Tous les fichiers javascript du BACKEND seront compilés dans un seul fichier. Ce qui va améliorer grandement le chargement de la page.  En FRONT, cette compilation se fera à la volée.

La localisation se fera dès à présent avec XLIFF et non plus avec les fameux locallang (LLXML) . Ceci afin de mieux utiliser la traduction du core de TYPO3 dans plusieurs langues. Un passage entre LLXML et XLIFF et inversement sera prévu.

La nouveauté majeure qui va faire mal aux hébergeurs et que TYPO3 4.6 ne fonctionnera que sur un serveur PHP 5.3.

Jusqu’à maintenant, on utilisait soit le générateur de formulaire natif de TYPO3, soit des extensions de création de formulaire telles que mailformplus ou powermail. L’inconvénient de toutes ces extensions est qu’elles ont pour finalité d’envoyer les données du formulaire par email. Dans cette nouvelle version, les formulaires pourront  être créés dynamiquement.  Ceci grâce à un simple système de glisser-déposer avec une interface WYSIWYG permettant au rédacteur d’avoir un aperçu du formulaire qu’il est entrain de créer. Evidemment, toutes les options (validation de champ, vérification du format de l’email) seront disponibles.

Outils, Bookmarks que j’utilise au quotidien

J’utilise plusieurs services online et dans les extensions de mon navigateur (chrome ou firefox). Je me dis qu’il serait bien gentil pour moi de rendre hommage à ces outils et de vous les partager puisqu’ils m’ont bien aidé et continuent toujours de m’aider d’ailleurs.

Le JSON quand tu nous tiens

JSON (JavaScript Object Notation) est un langage qui permet de structurer du JavaScript. Json parser (http://json.parser.online.fr/) est un service en ligne qui me permet par exemple de formatter correctement un JSON afin de voir clairement ce que retourne son contenu afin de le traiter. Conjointement, JSONLINT (http://jsonlint.com/) est un validateur en JSON qui me permet de tester que ma chaîne JSON est bien écrite ou pas.

Minimiser les fichiers JS et CSS….très important

Il est recommandé de nos temps de minimiser au maximum les fichiers Javascript et CSS et si possible de ne garder qu’un seul fichier. Ceci afin d’accélérer le chargement de votre page web. En ce qui concerne CSS, je me sers de CleanCSS (http://www.cleancss.com/ ou http://www.csscompressor.com/) et de JSCOMPRESS (http://jscompress.com/) pour les fichiers javascript.

Réindenter un fichier JS

Minimiser un fichier javascript est essentiel, mais comment faire pour l’opération inverse ? Et bien, nous avons http://jsbeautifier.org/ qui nous fait ce travail magnifique.

Convertir ceci en ceci…

Quatres services seront à l’honneur ici.

> Le convertisseur dynamique d’entité HTML (http://code.cside.com/3rdpage/us/entity/converter.html) qui permet de transformer par exemple les accents en entités HTML et aussi l’opération inverse. Ce lien est aussi tout utile http://www.rishida.net/tools/conversion/

> En Javascript, on a souvent besoin de savoir quelle est la valeur d’un accent aigu. Et bien, ce service nous permet de donner facilement ces valeurs (http://unicodinator.com).

> 10 chiffres qui représentent le temps. Mais comment obtenir la date réelle qui est plus claire et compréhensible. J’utilise http://www.4webhelp.net/us/timestamp.php pour celà.

> Puisqu’il est important d’utiliser la taille des fontes relatives au lieu de pixels dans la mise en forme CSS. http://pxtoem.com/ est d’une grande aide pour cela.

Et pour les tests….

http://html-ipsum.com/ est un générateur lorem ipsum mais en HTML. Très pratique.

http://dummyimage.com/ est un générateur d’images. Vous lui donnez la taille (largeur et hauteur) et il vous générera une image avec cette taille. Il est possible uniquement de changer la couleur de fond de l’image et la couleur du texte.

Je veux faire un test d’une fonction en jQuery rapidement dans un fichier HTML http://scriptsrc.net/ permet de copier directement l’URL de tous les framework et de les coller dans le fichier HTML.

Utiles mais pas nécessaires …

Si vous avez envie d’avoir votre graphique de chargement dans une application AJAX. http://preloaders.net/ peut vous générer ces graphiques simplement.

http://favikon.com/ transforme n’importe quelle image en icône présent dans la barre d’adresse de votre navigateur. Il ne vous reste plus qu’à enregistrer le fichier dans votre serveur et l’appeler dans la balise <head>

Tester…se documenter

http://instacss.com/ pour tester et se documenter sur les CSS

Pour tester en live un JS, CSS et HTML on pourra se servir de http://jsbin.com/ et de http://jsfiddle.net/

ImageMapster – Quand jQuery fait rennaître les balises oubliées…

La balise <map> et toutes ses dérivées <area> sont incontournables lorsqu’on commence à apprendre le langage HTML.

Lorsqu’on maîtrise un peu le HTML, on doit innover en apprenant le CSS. Pour ajouter un peu de dynamisme aux pages HTML, il fallait mettre une touche de JavaScript à nos pages.

HTML et CSS ont beaucoup évolués depuis. Nous en sommes maintenant au HTML5 et au CSS3. JavaScript a aussi évolué mais son évolution ne s’est pas vraiment ressenti que jusqu’à l’apparition des fameux framework tels que prototype, Dojo, Mootools et jQuery. Ces framework continuent d’exister et d’innover mais dans la course, c’est jQuery qui monte en puissance et n’est pas prêt de s’arrêter. Ceci s’explique par sa force à manipuler le DOM (Document Object Model) de votre page HTML sans pour autant ajouter une ligne de code en dur dans le corps de la page. Par manipuler le DOM, j’entends la modification dynamique des balises dans la page HTML sans toucher au fichier source. Plusieurs effets inimaginables existent avec une simple fonction (très facile à retenir et très puissante).

imageMapster est un plugin en jQuery qui permet d’ajouter plus de dynamisme aux cartes d’images. Ainsi, il est très facile d’illustrer une image. L’expérience utilisateur est bleuffant.

J’aime bien ce plugin. Je l’intègrerais surement dans les prochains projets.

WebP – le format d’image créé par Google 39% plus léger que le jpg

Sur le web, on connait les formats d’images standards suivants : jpg, gif et png.  Standards c’est-à-dire reconnus par tous les navigateurs.

Google a récemment créé un nouveau format d’image qui se rapproche du jpg mais qui a la particularité d’avoir un taux de compression plus faible avec la même qualité. D’après leur analyse, une image au format webp est 39% plus légère qu’une image au format jpg.

Prononcé « Weppy« , ce nouveau format opensource ne peut être visualisé que sur les navigateurs google Chrome et Opera pour l’instant.

Pour convertir une image au format png ou jpg vers le format webp, il existe un utilitaire sur le site officiel qui permet de le faire . D’autres outils tels que imagemagick, XnConvert, Pixelmator, Acorn…permettent de créer des images avec ce format. Un plugin existe pour permettre d’utiliser ce format dans  Photoshop.

Ce format va révolutionner le monde des sites Internet s’il sera implémenté sur la plupart des navigateurs puisque il sauvera la vie de ceux qui ont un petit débit de connexion Internet.

Enfin, voici un comparatif intéressant permettant de voir les différences entre webp et jpg (à voir avec le navigateur google Chrome ) http://code.google.com/intl/fr-FR/speed/webp/gallery.html

Ma petite histoire sur la Certification TYPO3 !

Et oui, maintenant je fais partie des certifiés TYPO3 de l’année 2010. Les résultats sont arrivés ce 14 Février vers 18h00. Et mon nom figure sur cette liste !

Pour la petite histoire….Il faisait très froid un après-midi de Décembre dans un hotel parisien près du Panthéon. Il était 12H45.  La personne à l’accueil m’avait indiqué le lieu. Ca se passait dans une salle aménagée de l’hotel. Il y avait déja 15 candidats.

Micky Baratovic en charge de la certification a commencé à présenter ses fonctions dans l’équipe, le déroulement de l’épreuve et le résultat de l’examen. Avant de débuter, nous avons signé le fameux « TYPO3 integrator» certification non-disclore and banner usage agreement. ».  L’épreuve consistait en une épreuve de QCM de 40 questions à traiter en 90 minutes.

Pour réussir la certification TYPO3, je conseillerais de bien connaître TYPO3 (son histoire, l’équipe autour, l’association TYPO3, ses fonctionnalités backend, le typoscript…) , de l’utiliser au quotidien et de bien cerner les pièges de ce cms puisque les questions tournent autour de ces points. Le livre sur la préparation à la certification m’a aussi beaucoup aidé. En effet, ce livre fait une simulation de l’examen. Ce qui permet de bien réviser. TYPO3 est un solide cms, il est complexe mais très bien conçu. Il répond à tous les besoins en matière de création de site que ce soit d’un simple site à un grand portail.

Enfin, je tiens à remercier : la personne que je ne citerais pas mais qui est toujours à mes côtés, Michal Cygankiewicz (mon ami polonais) et  mon boss qui m’a fait confiance.

TYPO3 4.5 LTS – Que nous propose-t-on ?

La nouvelle release de TYPO3 est sortie le 26 Janvier 2011. Plus exactement 7 mois après la sortie de la version 4.4. Vu le délai, ceux qui se sont spécialisés en TYPO3 n’ont pas pu sortir beaucoup de sites avec la version 4.4.

TYPO3 4.5 LTS (Long Term Support) est la première version qui sera supportée à long terme d’après l’équipe de TYPO3 et la communauté de TYPO3. Cette version sera utilisée pendant 3 ans. Nous avons largement le temps de s’en approprier mais nous n’allons pas tarder à explorer les nouveautés de cette version par rapport aux précédents. Ces nouveautés sont évidemment  visibles surtout dans le backend de TYPO3.

Pour une mise à jour d’une version antérieure vers cette version, il est très important de suivre scrupuleusement les manipulations indiquées sur cette adresse pour  éviter les surprises.

Côté Fonctionnel de TYPO3

Un moteur de recherche plus intelligent est disponible dans la partie supérieure droite du backend.

Dans l’arborescence des pages (colonne centrale), il est possible d’éditer en live le nom d’une page. Pour cela il suffit de double-cliquer sur le nom de la page pour faire apparaître un champ de texte permettant de modifier le nom de la page. Aussi, le système de glisser-déplacer a été modifié et devient plus intuitif. Pour déplacer une page, il suffit de le glisser et le déposer à la position voulue. Pour copier une page vers une autre page, il faut faire la même manipulation que précedemment et en plus cliquer en même temps sur la touche « CTRL » du clavier. Ceci fait apparaître une icône orange à côté de la page à déplacer. Moins de menus contextuels apparaissent maintenant lorsqu’on clique sur une page.

Des onglets et des champs supplémentaires ont été ajoutés aux propriétés d’une page et d’un contenu. Ces champs et onglets servent à mieux structurer les informations. Des infobulles ont été ajoutés également qui permettent de mieux orienter l’utilisateur.

Il est très facile de créer plusieurs pages dans le backend de TYPO3 grâce au module « Web > Fonction ». En plus, il permet  de choisir directement le type de page à créer à l’aide d’un champ supplémentaire ajouté à droite du nom de chaque page à créer.

Côté Technique de TYPO3

La propriété .stdWrap est maintenant disponible dans tous les objets TYPOSCRIPT. Auparavant, il était possible uniquement d’attribuer cette propriété à l’objet TEXT. Au passage, la fonction stdWrap.numberFormat a été ajoutée, et permet de formater un nombre rapidement.

Un nouvel objet TYPOSCRIPT FLUIDTEMPLATE a été ajouté.

Un module « linkvalidator » permettant de vérifier les liens internes, externes et fichiers a été ajouté. Ce module s’utilise avec le planificateur.

…et plusieurs autres options qu’on aura le temps de découvrir !!!!

Sans plus attendre, allez aussi tester cette nouvelle version de TYPO3