templavoila_framework

650 vues

Publié le

Introduction et présentation en Français du système de templating flexible templavoilà framework. Il rends l'expérience utilisateur avec TYPO3 plus agréable et la gestion des contenus très flexible.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
650
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Copie d'un contenu \nPreview\nCréation bloc 2 colonnes\nDéplacement des 2 contenu\nPreview\nModification de la répartition \nAjout d'un titre caché pour le backoffice\nModification de la répartition \n
  • Copie d'un contenu \nPreview\nCréation bloc 2 colonnes\nDéplacement des 2 contenu\nPreview\nModification de la répartition \nAjout d'un titre caché pour le backoffice\nModification de la répartition \n
  • Copie d'un contenu \nPreview\nCréation bloc 2 colonnes\nDéplacement des 2 contenu\nPreview\nModification de la répartition \nAjout d'un titre caché pour le backoffice\nModification de la répartition \n
  • On peut imbriquer des colonnes dans des colonnes\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • templavoila_framework

    1. 1. templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel <cyril@eventex.fr>
    2. 2. Ron Hall Cyril Wolfangel Creative Director Directeur Technique Busynoggin Eventex Profil : Spécialiste des usages, Profil : Architecte TYPO3, Créatif, Intégrateur TYPO3 Formateur, Intégrateur Certifié TYPO3 Integrator Certifié TYPO3 IntegratorT3UNI 2011 30.06.2011templavoila_framework
    3. 3. Genèse du projet
    4. 4. You will never be able to design sites quickly and withconsistent quality unless you standardize your approachand your code (HTML, CSS, JavaScript, TypoScript,data structures, and template objects). Ron Hall
    5. 5. Genèse Templavoilà framework vient dun désir de standardiser les processus dintégration, en tirant le meilleur de templavoila, du typoscript et des langages html css et JavaScript Css zen garden Intérêt pour les FCE et les concepts de templavoilà Inspiration de framework HTML comme YAML ?T3UNI 2011 30.06.2011templavoila_framework
    6. 6. Css zen Garden 1 code HTML et plusieurs apparences via cssT3UNI 2011 30.06.2011templavoila_framework
    7. 7. La base technique de Templavoilà FCE Flexible Content Element DS Data StructureT3UNI 2011 30.06.2011templavoila_framework
    8. 8. Un framework HTML à la YAML The markup structure and the CSS components of the framework allow the designer / coder free rein in their design. Flexible, elastic, or fixed layouts, any number of subdivisions -- everythings possible.T3UNI 2011 30.06.2011templavoila_framework
    9. 9. T3UNI 2011 30.06.2011templavoila_framework
    10. 10. T3UNI 2011 30.06.2011templavoila_framework
    11. 11. La démarche de TV framework Les zones de contenusT3UNI 2011 30.06.2011templavoila_framework
    12. 12. La démarche de TV framework Les zones de contenus Header Elle est en haut du site, et peux inclure une combinaison ou tous les éléments suivants : Identité du site (logo), Base line, Boite de login, Moteur de recherche, Menu principal etc...T3UNI 2011 30.06.2011templavoila_framework
    13. 13. La démarche de TV framework Les zones de contenus Footer Il est en bas de page, et peu inclure une combinaison ou tous les éléments suivants : Copyright, liens, informations de contact etc...T3UNI 2011 30.06.2011templavoila_framework
    14. 14. La démarche de TV framework Les zones de contenus Main content Cest la zone de contenu centrale, et unique. Cest la raison pour laquelle la page existe.T3UNI 2011 30.06.2011templavoila_framework
    15. 15. La démarche de TV framework Les zones de contenus Feature Cest un contenu unique dans une page, qui arrive après le header. Il prends en général toute la largeur de la page, mais ce nest pas obligatoire.T3UNI 2011 30.06.2011templavoila_framework
    16. 16. La démarche de TV framework Les zones de contenus Additional Content Blocks Cest un conteneur unique dans la page, mais moins important que le main content.T3UNI 2011 30.06.2011templavoila_framework
    17. 17. La démarche de TV framework Les zones de contenus Generated Content Blocks Cest de linformation « maison » qui est automatiquement générée et affichée sur de multiples pages du site. Cela peux inclure nimporte quel type de contenu : menus, liens, publicité, teaser, etc..T3UNI 2011 30.06.2011templavoila_framework
    18. 18. Les structures de page.T3UNI 2011 30.06.2011templavoila_framework
    19. 19. Les structures de page. F1 Series F2 Series F3 SeriesT3UNI 2011 30.06.2011templavoila_framework
    20. 20. Les structures de page. Lutilisateur utilise le champ Champ feature non utiliséT3UNI 2011 30.06.2011templavoila_framework
    21. 21. Les structures de page. Templates F1a, F1b and F1c Ces templates contiennent chacun un header, un footer, un champ feature (F) un main content (c1). Ils sont identiques à lexception des ID dans le tag body (f1a, f1b, f1c). Ces ID s permettent de styler différement les pages en CSS. Lutilisateur utilise le champ Champ feature non utiliséT3UNI 2011 30.06.2011templavoila_framework
    22. 22. Les structures de page. Lutilisateur utilise le champ Champ feature nonT3UNI 2011 30.06.2011templavoila_framework
    23. 23. Les structures de page. Template F1d Même chose que F1a à lexception de la zone pour le « generated content » (g1) qui vient juste avant le « main content » (c1). Cette zone tire ces contenus dun sysFolder indiqué par la constante TypoScript "generatedContent-1.source." Son ID dans le body est Lutilisateur utilise le champ Champ feature nonT3UNI 2011 30.06.2011templavoila_framework
    24. 24. Les structures de page. Lutilisateur utilise le champ Champ feature nonT3UNI 2011 30.06.2011templavoila_framework
    25. 25. Les structures de page. Template F1f Même chose que F1d à lexception de lutilisation des 2 zones « generated content element » Son ID dans le body est "f1f." Lutilisateur utilise le champ Champ feature nonT3UNI 2011 30.06.2011templavoila_framework
    26. 26. Les structures de page. Autres structuresT3UNI 2011 30.06.2011templavoila_framework
    27. 27. Les structures de page. Autres structuresT3UNI 2011 30.06.2011templavoila_framework
    28. 28. Choisir sa structure Template F1a 4 column groupT3UNI 2011 30.06.2011templavoila_framework
    29. 29. Choisir sa structure Template F1a 2 triple modulesT3UNI 2011 30.06.2011templavoila_framework
    30. 30. T3UNI 2011 30.06.2011templavoila_framework
    31. 31. A VOUS DE JOUER ! Déterminez la bonne structureT3UNI 2011 30.06.2011templavoila_framework
    32. 32. T3UNI 2011 30.06.2011templavoila_framework
    33. 33. T3UNI 2011 30.06.2011templavoila_framework
    34. 34. T3UNI 2011 30.06.2011templavoila_framework
    35. 35. T3UNI 2011 30.06.2011templavoila_framework
    36. 36. T3UNI 2011 30.06.2011templavoila_framework
    37. 37. T3UNI 2011 30.06.2011templavoila_framework
    38. 38. T3UNI 2011 30.06.2011templavoila_framework
    39. 39. T3UNI 2011 30.06.2011templavoila_framework
    40. 40. T3UNI 2011 30.06.2011templavoila_framework
    41. 41. F1eT3UNI 2011 30.06.2011templavoila_framework
    42. 42. ou F1e F2aT3UNI 2011 30.06.2011templavoila_framework
    43. 43. ou ou F1e F2a F1eT3UNI 2011 30.06.2011templavoila_framework
    44. 44. ou ou ou F1e F2a F1e F2aT3UNI 2011 30.06.2011templavoila_framework
    45. 45. Les FCE utilitaires Columns Modules HTML Wrapper Plain Image Module FeatureT3UNI 2011 30.06.2011templavoila_framework
    46. 46. Les FCE utilitaires Colonnes et modulesT3UNI 2011 30.06.2011templavoila_framework
    47. 47. Les FCE utilitaires Colonnes et modules Ce sont des FCE pour afficher du contenu dans une zone de contenu de page. Ils peuvent être utilisés pour créer de nouveaux templates de page, sans créer de nouveaux templates principaux. Les colonnes sont paramétrables et sadaptent automatiquement (les images aussi) en fonction de la largeur de leur conteneur.T3UNI 2011 30.06.2011templavoila_framework
    48. 48. Les FCE utilitaires Exemple liveT3UNI 2011 30.06.2011templavoila_framework
    49. 49. Les FCE utilitaires Exemple liveT3UNI 2011 30.06.2011templavoila_framework
    50. 50. T3UNI 2011 30.06.2011templavoila_framework
    51. 51. T3UNI 2011 30.06.2011templavoila_framework
    52. 52. T3UNI 2011 30.06.2011templavoila_framework
    53. 53. Les FCE utilitaires Colonnes – backendT3UNI 2011 30.06.2011templavoila_framework
    54. 54. Les FCE utilitaires Colonnes – FrontendT3UNI 2011 30.06.2011templavoila_framework
    55. 55. Les FCE utilitaires Modules – backend / frontendT3UNI 2011 30.06.2011templavoila_framework
    56. 56. Les FCE utilitaires Modules – backend / frontendT3UNI 2011 30.06.2011templavoila_framework
    57. 57. Les FCE utilitaires HTML wrapperT3UNI 2011 30.06.2011templavoila_framework
    58. 58. Les FCE utilitaires HTML wrapperT3UNI 2011 30.06.2011templavoila_framework
    59. 59. Les FCE utilitaires Image Options Disponibles Link: Lien vers limage Alt Text: Texte alternatif Image Width: Changer la largeur de limage. Cette valeur écrase le paramètre MaxImageWidth pour pouvoir faire dépasser limage au delà de sa taille normale authorisée. Si la valeur par défaut « 0 » est utilisée, alors le paramètre maxImageWidth sera utilisé. Margin: Pour contrôler le margin top, bottom, right et left Z-index: Ajout dun z-indexT3UNI 2011 30.06.2011templavoila_framework
    60. 60. Les FCE utilitaires Module feature Image « maison »T3UNI 2011 30.06.2011templavoila_framework
    61. 61. Les FCE utilitaires Module feature Image « maison »T3UNI 2011 30.06.2011templavoila_framework
    62. 62. Les skinsT3UNI 2011 30.06.2011templavoila_framework
    63. 63. Les skinsT3UNI 2011 30.06.2011templavoila_framework
    64. 64. Les skinsT3UNI 2011 30.06.2011templavoila_framework
    65. 65. Questions / RéponsesT3UNI 2011 30.06.2011templavoila_framework

    ×