Your SlideShare is downloading. ×
2012 cyril-wolfangel-responsive design-typo3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

2012 cyril-wolfangel-responsive design-typo3

1,156
views

Published on

Présentation proposée lors de la T3UNI12. Analyse technique des solutions de chargement d'images dynamiques pour le responsive design. …

Présentation proposée lors de la T3UNI12. Analyse technique des solutions de chargement d'images dynamiques pour le responsive design.
Etude des possibilités proposées nativement par TYPO3 pour intégrer en responsive design.
Bilan et état des lieux

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,156
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • Nouvelles spécifications de Css 3 ajout de nouvelles spécification la balise «media»\n
  • \n
  • \n
  • Même pour les ordinateurs de bureau, on a des dalles différentes, et des résolution différentes\n
  • Pas d’effets de survol, interface simplifiée selon le périphérique\n
  • \n
  • \n
  • \n
  • Possible d’imbriquer des media queries\n\n
  • \n
  • \n
  • Temps de chargement, blocs conditionnels, comment éviter ces problèmes ?\n
  • Combien d’image différentes ?\nRedimensionnement du navigateur, problème d’aliasing\nRedimensionnement par crop, ou par redimensionnement homotétique\nSi j’ai un mobile, je voudrais ne charger que la version mobile\n
  • A taille d’écran égale et résolution égale, pas le même nombre de pixels !\n
  • \n
  • \n
  • On ne charge qu’une seule image, qui est redimensionnée en pourcentage ou par le navigateur\n \n
  • \n
  • On ne charge qu’une seule image, qui est redimensionnée en pourcentage ou par le navigateur\n \n
  • \n
  • Vérifier et illustrer\n
  • Ici parler du responsive text\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • C’est juste le début, à mon sens important de systématiser la démarche\n
  • \n
  • Transcript

    • 1. Responsive designTYPO3Où en sommes nous et quelle place pourTYPO3 ? 1
    • 2. Ce dont je vais parler Présentation rapide de ce qu’est le design responsif Comment fonctionne le côté «responsif» Quelles sont les difficultés autour de la gestion des images Comment peut-on faire un design responsif avec TYPO3 2
    • 3. Ce dont je ne vais pas parler Du responsive text De la démarche de création graphique 3
    • 4. L’approche «design adaptatif» D’ou vient la démarche, quelle différence avec les techniques habituelles ? Ou en est on avec cette technique? 4
    • 5. Les techniques habituelles Découpe au pixel Découpe élastique Valeurs en % et/ou em 5
    • 6. Les périphériques ont évolués,les utilisateurs aussi Téléphones Tablettes Consoles de jeu Téléviseurs Bornes tactiles 6
    • 7. Ordinateurs de bureau, notebook,Ordinateurs portablesDalles différentes,utilisation duredimensionnement 7
    • 8. Des méthodes de navigations différentesTélécommandes variées, mouvement au stylet,au doigt, navigation à la souris, quel impact ? 8
    • 9. Responsif et ResponsifLe responsive design ce n’est pas juste untemplate adaptatif.Le concept est lié à un profond changementdes mentalités et des habitudes desutilisateurs. 9
    • 10. Responsive design principes ettechnique 10
    • 11. La magie des média queries 11
    • 12. FonctionnementExemple d’utilisation d’une“media querie” pour unappel de feuille de style sous condition@media only screen and (max-width:500px){    /* … */}Mais aussi: width, height, device-width, device-height,orientation, aspect-ratio, device-aspect-ratio, color,color-index, monochrome, resolution, scan, gridEn savoir plus => www.w3.org/TR/css3-mediaqueries/ 12
    • 13. Compatibilité 13
    • 14. IE ? Tiens encore lui ? Il existe des solutions pour une compatibilité. respond.js adapt.js http://modernizr.com Exemple: <!--[if lt IE 9]> <script type="text/javascript" src="/js/css-media-query-ie.js"></script> <![endif]--> 14
    • 15. Comportement des images 15
    • 16. Quel est la difficulté avec lesimages ?Quelle image pour quelle résolution ?Quelle image pour quelle périphérique ?Quelle image pour quelle taille du navigateur ?Quelle image au chargement ? 16
    • 17. Le cas des écrans rétina@media all and (-webkit-min-device-pixel-ratio : 1.5) { #container header[role="banner"] .logo a { background-image: url(../img/logo2@2x.png); }} 17
    • 18. Quelques exemplesPossibilités existantes avec les images 18
    • 19. Redimensionnement par la taille du conteneur 19
    • 20. 20
    • 21. Chargement de la version adaptée à larésolution de l’écran 21
    • 22. 22
    • 23. Redimensionnement à la volée, une seulesolution «propre» mais enormément desolutions diverses basées sur du JS 23
    • 24. Images de fond en css/* default */#img1 {background-image: url(‘small.jpg’);width: 200px;height: 200px;}@media screen and (min-width: 500px){#img1 {background-image: url(‘large.jpg’);width: 400px;height: 400px;}} 24
    • 25. Comportement du texte@media only screen and (min-width:1200px){    body{ font-size: 1.75em; }} 25
    • 26. Comment TYPO3 peut êtrele CMS idéal pour des sitesresponsif ? 26
    • 27. Responsif et ResponsifLe responsive design ce n’est pas juste untemplate adaptatif.Le concept est lié à un profond changementdes mentalités et des habitudes desutilisateurs. 27
    • 28. Une approche structuréeLe backend et l’arborescence permettent uneapproche réfléchie et structurée 28
    • 29. Possibilité d’une double logique editoriale Aux CMSDAY 14 juin 2012: «Le représentant de TYPO3 Maxime Fauquemberg a évoqué lui la double logique éditoriale : proposer deux contenus différents dans un même contexte, expliquant qu’un mobinaute dans le métro ne veut pas forcément lire la même information qu’un internaute assis devant son ordinateur, une démarche pour le moins originale.» 29
    • 30. Puissance de configuration du backend Le backend de TYPO3 est tellement puissant que les applications sont encore ouverte, chacun peut faire sa propre configuration, adaptée au client. Nativement, utilisation des layouts, frame au niveau des contenus. 30
    • 31. Puissance de configuration du backend Une idée: Utiliser le système de langues natif de TYPO3 pour remplir plusieures déclinaisons des contenus, avec un fallback à la version par défaut possibilité d’utiliser les workspaces aussi, pour du contenu adapté à chaque plateforme. 31
    • 32. Methode classique avecbackend layoutIl suffit d’intégrer ses gabarits responsifs 32
    • 33. TemplavoilàIl suffit d’intégrer ses gabarits responsifs 33
    • 34. Templavoilà FrameworkPossibilité d’intégrer un Framework HTMLresponsif et de créer une méthode prête àl’emploi. 34
    • 35. FluidIl suffit d’intégrer ses gabarits responsifs 35
    • 36. Les frameworks HTMLPensés par une communauté activeRéalisé par des experts Frontend 36
    • 37. 37
    • 38. 38
    • 39. 39
    • 40. 40
    • 41. 41
    • 42. 42
    • 43. 43
    • 44. Mon projetTemplavoilà Framework 2 + Twitter bootstrap +Chargement dynamique des images + selecteur backend 44
    • 45. Responsive_preview 45
    • 46. Bilan, état des lieux 46
    • 47. Questions / Réponses