Les nouveautés de TYPO3 4.2

TYPO3 4.2 : Une mise à jour majeurePrésenté par Yannick Pavard – 20 février 2008

2 / 49

À la fin de cette présentation, vous serez en mesure :

– d'identifier le processus de mise à jour vers TYPO3 4.2

– de citer au moins 2 avantages de passer à TYPO3 4.2

– d'identifier les changements suite au passage à l'UTF-8

– de citer les avantages pour chaque niveau d'intervention● Édimestre, Administrateur et Développeur

Objectifs

3 / 49

L'UTF-8 : À quoi ça sert ? Qu'est ce que ça change ?

Les nouveautés importantes de la version 4.2➔ Quoi de neuf pour :

✔ Les édimestres✔ Les administrateurs✔ Les développeurs

Conclusion

So

mm

ai

re

Comment réussir sa mise à jour vers TYPO3 4.2➔ Préparation de l'environnement de production➔ Mise à jour : procédure pas à pas

Comment réussir sa mise à jour vers TYPO3 4.2

5 / 49

Préparation de l'environnement de production

Il y a plusieurs points à suivre pour préparer votre nouvel environnement de production à TYPO3 4.2 :

➔ Effectuer une copie de sauvegarde du site à migrer➔ Préparer votre futur environnement pour l'UTF-8

✗ Votre base de données MySQL✗ Votre serveur Apache✗ Votre fichier php.ini (mbstring)✗ Réencoder vos fichiers textes au besoin (html, css)

http://wiki.typo3.org/index.php/UTF-8_support

http://wiki.typo3.org/index.php/UTF-8_support

6 / 49

Préparation de l'environnement de production(suite)

➔ Vérifier votre version de PHP : La version PHP 5.2 est requise

➔ Dupliquer au besoin le site pour effectuer des tests dans un environnement de pré-production

Notes concernant les numéros de versions de TYPO3

Version majeureTYPO3 4.x

(4.1, 4.2, 4.3)

Version mineureTYPO3 4.x.x

(4.1.2, 4.1.5, 4.2.1)

7 / 49

Mise à jour : Procédure pas à pas

Voici un exemple de procédure classique de mise à jour vers une nouvelle version majeure de TYPO3

Attacher les nouvelles sources (4.2) à votre site

Connectez-vous et découvrez le ou les messages d'avertissements

8 / 49


Connectez-vous et allez dans l'outil d'installation puis choisissez l'option Update wizard

9 / 49


Mettez à jour le numéro de version et les changements

Faites en sorte que les liens ne s'ouvrent pas par défaut dans une nouvelle fenêtre

10 / 49


Mettez à jour vos types de pages à « standard »

Tous les types de pages AVANCES sont transformésen type de page STANDARD avec la version 4.2.Même chose pour le type de page « Hors menu »

(utiliser $TYPO3_CONF_VARS['SYS']['compat_version'] = '4.1'; pour conserver le fonctionnement par défaut)

TCA : Mettez à jour vos palettes (TCA) en rapport avec vos pages

11 / 49


Allez dans « Database Analyzer » pour mettre à jour vos tables (base de données)

Laissez le système modifier votre base de données

Vous devriez avoir fait une sauvegarde de votre base de données avant d'effectuer cette opération

12 / 49


Certaines extensions doivent être désinstallées pour la version TYPO3 4.2 beta1

➔ « Date2cal » n'est pas compatible avec la version beta 4.2➔ « ter_update_check » est déjà intégré dans la version 4.2➔ Le dam « tx_dam » génère des erreurs➔ « extdeveval » n'affiche plus la barre du haut

des raccourcis vers les ressources pour développeurs

L'UTF-8 : À quoi ça sert ? Qu'est ce que ça change ?

14 / 49

L'UTF-8 : A quoi ça sert ?

L'UTF-8 est un encodage utilisé pour le texte produit par TYPO3 Frontend et Backend

Cela permet de gérer des langues comme le chinois ou l'arabe

15 / 49

L'UTF-8 : Qu'est ce que ça change ?

Encodage par défaut en UTF-8 pour le backend (administration)

✗ Il est préférable de réencoder les données qui étaient dans la base de données

✗ Les fichiers de traductions restent inchangés, mais pourront être édités au besoin directement

✗ Certaines extensions risquent d'afficher des caractères bizarres (sauf si vous réencoder aussi les fichiers)

16 / 49

L'UTF-8 : Qu'est ce que ça change ?(suite)

Encodage par défaut en UTF-8 pour le backend (administration)✗ Faites attention en éditant les

fichiers textes (php, html, css) depuis votre éditeur préféré.

✗ Certaines données peuvent ne pas être réencoder (Gabarit Templavoila, code typoscript ...) parce qu'ils sont stockés au format binaire ou sérialisé dans la bdd)

L'encodage pour le Frontend reste sous votre contrôle

Les nouveautés importantes de la version 4.2

18 / 49

Les travaux repoussés pour TYPO3 4.3

Le nouvel installateur et la configuration avancée✔ Il permettra d'installer TYPO3 en français

L'assistant de création de formulaire✔ Il remplacera l'ancien assistant de

formulaire

19 / 49

Généralités

Quelques changements pour tout le monde : ✔ Le message de génération de page ne s'affichera plus

✔ La vitesse a été augmentée :✗ Le moteur de recherche (option "skipExtendToSubpagesChecking")✗ Libération de la mémoire ($GLOBALS['TYPO3_DB']->sql_free_result())✗ Gestion du cache MySQL optimisé ($ACCESS_TIME)✗ Mise en cache des langues

✔ Amélioration de l'utilisabilité (interface d'administration)

Les édimestres

21 / 49

Quoi de neuf : pour les édimestres

L'interface a beaucoup évoluée :✔ Le backend n'utilise plus de cadre (frame) mais des DIV

(le chargement de la page est bien plus rapide !)✔ Le menu de gauche est en AJAX (réduction des

modules plus rapide, rafraîchissement amélioré)

Plusieurs options se retrouvent dans le menu du haut

22 / 49


L'interface a beaucoup évoluée (suite) :✔ L'arborescence des pages offre un filtre pour les pages

ainsi qu'un raccourci pour créer une nouvelle page

✔ Chaque élément se voit doté d'une barre en haut fixeavec les options courantes d'enregistrements

✔ Les propriétés d'une page sont scindées sous forme d'onglet

23 / 49


L'interface a beaucoup évoluée (suite) :✔ Édition de page/contenu : Les champs obligatoires sont

également notifiés dans chaque onglet

✔ Lors du déplacement d'une page, on peut à présent, en faire une copie

✔ L'aide est accessible plus rapidement (survol de la souris)

24 / 49


L'interface a beaucoup évoluée (suite) :✔ Les types de page et types de contenu

sont plus explicites

✔ L'arborescence peutêtre cachée par un simple clic

25 / 49


L'interface a beaucoup évoluée (suite) :✔ Liste des utilisateurs connectés dans le backend

✔ Les options secondaires s'affichent directement par un simple clic sur un bouton

26 / 49


L'interface a beaucoup évoluée (suite) :✔ La configuration des utilisateurs utilise des onglets

✔ Il est possible de choisir le module de démarrage

27 / 49


L'interface a beaucoup évoluée (suite) :✔ Déplacer ou copier un contenu depuis le presse-papier

✔ La gestion du cache est disponible pour les édimestres

✔ Le module « DOC » disparaît pour laisser la place à un menu dans la barre du haut

28 / 49


L'interface a beaucoup évoluée (suite) :✔ Il n'est plus possible de désactiver l'éditeur de texte ou

d'afficher la description des champs lors de l'édition d'un contenu ou d'une page

✔ Plusieurs images peuvent être intégrées en une seule fois

29 / 49


Le menu du haut :

✔ Nom de l'utilisateur connecté (+ lien vers son profil)✔ Bouton de déconnexion✔ Passer d'un espace de travail à l'autre ✔ Gestion du cache (tout effacer, effacer frontend, config.)✔ Gestion des raccourcis

✔ Recherche dans tous les contenus du site

30 / 49


Les espaces de travail virtuel (workspace) :✔ Déplacer des pages où l'on veut dans l'arbre du site

✔ Valider plusieurs changements pour un traitement par lot

✔ Information concernant le nombre total d'éléments dans un espace virtuel

31 / 49


Les espaces de travail virtuel (workspace) :✔ Il est possible de générer une copie complète du site

pour prévisualisation

✔ Le module « Outils » reste disponible dans l'espace de travail virtuel personnalisé

✔ Il est maintenant possible de personnaliser les courriels envoyés pendant tout le processus de validation des changements

32 / 49


L'éditeur de texte avancé (RTE) : ✔ De nouveaux boutons sont disponibles

✔ Il est maintenant possible d'ajouter des conteneurs (DIV)

✔ Nouvelle API pour le développement des Plugins✔ Ajouter facilement un nouveau paragraphe avant ou après

✔ Support pour Safari✔ Cliquer et agrandir pour les images insérées dans le RTE

33 / 49


Corrections de bogues :

✔ L'exportation au format CSV a été bonifiée :

✗ Elle prend en compte tous les enregistrements✗ Les données sont plus explicites✔ Certaines données inutiles ne sont plus exportées

200 correctifs et améliorations ont été envoyés via le bogue tracker

Les administrateurs

35 / 49

Quoi de neuf : pour les administrateurs

Typoscript :✔ Cacher un ou plusieurs enregistrement(s) lors de l'ajout

d'un nouvel élément.

✔ Changer la période (heures) lors de publication d'une page ou d'espace virtuel temporaire (par défaut 48h)

✔ Ajout des conditionnelles dans le TSCONFIG

TSUSER: options.workspaces.previewLinkTTLHours = 72

TS PAGE: mod.web_list.deniedNewTables = tx_nomdelextension

[PIDupinRootline = 1]Ajouter vos lignes typoscript ici

[end]

36 / 49


Typoscript :✔ Modifier les valeurs par défaut dans l'interface

administrateur (avant disponible seulement avec le Tsconfig USER)

✔ Modifier le titre des champs dans l'interface administrateur

✔ Ajout de la propriété « stdWrap » pour .wrapItemAndSub✔ Ajout de la propriété « stdWrap » pour minW et minH de la

fonction imgResource✔ Deux nouvelles conditions : "year" and "dayofyear"

TS PAGE: TCAdefault.maTable.MonChamp = valeur par défaut

TS PAGE: TCEFORM.maTable.MonChamp.label = LLL:EXT:mon_ext/locallang_db.php:table.columnTCEFORM.maTable.MonChamp.label.default = nouveau titre par defautTCEFORM.maTable.MonChamp.label.fr = nouveau titre en francais

37 / 49


Typoscript :✔ Possibilité de définir le temps d'expiration d'un HMENU✔ Possibilité de choisir si les META de la page sont

indexées par le moteur de recherche

✔ La constante « PAGE_TARGET » est effacée ce qui permet de ne pas avoir de lien qui s'ouvre dans une nouvelle page (compatVersion doit être à 4.2.0)

✔ L'utilisation de Typoscript externe prend en compte également les appels vers des scripts inclus

Typoscript: config.index_metatags = 0

<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/répertoire/fichier.ts">

38 / 49


Typoscript :✔ Afficher le titre de navigation dans l'arborescence au lieu

du titre de la page

✔ Il est possible de mettre à part les pages qui sont HORS-MENU et classées par ordre alphabétique

✔ Ajout de la condition pour IE et le CSS

TS USER:options.pageTree.showNavTitle = 1

TS USER: options.pageTree.seperateNotinmenuPages = 1options.pageTree.alphasortNotinmenuPages = 1

Typoscript: file1.ieCondition = IE7



39 / 49


Plusieurs améliorations des outils :✔ Éditeur de constantes (constant editor) permet d'éditer

chaque constante plus rapidement

✔ L'arbre typoscript permet d'afficher les commentaires

✔ Les références typoscript sont accessibles depuis l'interface

40 / 49


Éditeur Typoscript :L'éditeur typoscript permet d'améliorer l'édition de code Typoscript pour les administrateurs.

✔ Colorisation syntaxique sur les objets PAGE,

TEXT ou les propriétés stdWrap, etc ..✔ Affichage des numéros de ligne.✔ Un astérisque (étoile) apparaît quand vous n'avez pas encore sauvegardé

votre code✔ Un raccourci clavier CTRL+S pour sauvegarder et CTRL+F11 pour le

plein écran)✔ Une complétion existe en appuyant sur les touches CTRL+Barre d'espace

(exemple : PA.. donnera PAGE)✔ Les raccourcis bien connus CTRL+Z et CTRL+Y pour revenir en arrière

ou en avant)

41 / 49


Le panneau d'administration Frontend✔ Toutes les requêtes SQL sont affichées

clairement.

✔ Il est possible de limiter certaines fonctionnalités du panneau d'administration. Ces fonctions limitées seront surlignées d'une certaine couleur dans le panneau d'administration pour indiquer à l'utilisateur que ce sont des options temporaires.

42 / 49


Nouvelles extensions intégrées dans le « core » : ✔ Mettez à jour vos extensions facilement

Après chaque installation, le menu de gauche se met à jour automatiquement !

✔ Intégration de l'extension « Newloginbox » par défaut

✔ dkd_media4url : Permet d'attacher des médias sur un type de page « Raccourci »

✔ p2_limittolangfix : Corriger des problèmes avec les langues

Les développeurs

44 / 49

Quoi de neuf : pour les développeurs

Du code : ✔ Librairie externe pour contrer les attaques de type

Cross Site Scripting (XSS)

✔ Fonction de « minification » en AJAX (permets de supprimer des commentaires ou des espaces dans des fichiers Javascript)

✔ Le développement de module Backend pourra utiliser le principe des gabarits comme le Frontend : utilisation de marqueurs ###MARQUEUR###

PHP: $filtered_string = t3lib_div::removeXSS($input_string);

PHP: t3lib_div::minifyJavaScript

45 / 49


Du code (suite) :✔ L'utilisation de IRRE prendra en compte le multilingue✔ Mise à jour des librairies prototype et scriptacolous✔ Il est maintenant possible de cacher un marqueur

###MARQUEUR### qui n'est pas utilisé dans un gabarit Configuration (TCA et autres) :

✔ Afficher une date en secondes plutôt que hh:mm:ss

✔ Ajouter des icônes d'aide pour les Flexforms

TCEforms: « timesec » comme valeur pour eval

46 / 49


Configuration (suite) :✔ Ajout d'un nouveau type d'élément qui permet de

sélectionner un répertoire (pour galerie photo par exemple)

✔ Meilleur contrôle des éléments de type FICHIERS

✗ Cacher le bouton de dépôt direct (voir image ci-dessous)✗ Cacher la possibilité d'attacher des images (fileadmin)✗ Cacher l'aperçu des images✗ etc ...

47 / 49


Les hooks : ✔ Possibilité d'ajouter des évaluations personnalisées pour

les champs de saisies (TCEforms)✔ Possibilité d'agir sur la génération de l'arborescence et

ajouter du contenu HTML

✔ Modifier le rendu des liens générés de type « Typolink »✔ Ajouter/modifier/supprimer des actions en mode liste

✔ Agir après les opérations liées à la BDD (TCEmain)✔ IRRE : Modifier les options pour les enregistrements✔ Modifier le cHash avec un hook

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['GLOBAL']['recStatInfoHooks']

Conclusion

49 / 49

➔ Cette nouvelle version de TYPO3 devra passer par plusieurs tests avant chaque migration.

➔ La migration devra sans doute nécessiter un passage à l'UTF8.

➔ La prise en main de l'interface a été grandement améliorée et devient plus rapide à s'afficher.

➔ Les développeurs de TYPO3 sont à l'écoute des demandes des utilisateurs et développeurs !

Conclusion

50 / 49

Visitez notre blogueVisitez notre blogueet retrouvez des astuceset retrouvez des astuces

sur TYPO3sur TYPO3

http://blogue.infoglobe.ca

Blogue

http://blogue.infoglobe.ca/

Technology

Les nouveautés de TYPO3 4.2