{"id":7834,"date":"2012-07-18T16:10:25","date_gmt":"2012-07-18T14:10:25","guid":{"rendered":"http:\/\/flaven.fr\/?p=7834"},"modified":"2012-07-18T16:10:25","modified_gmt":"2012-07-18T14:10:25","slug":"exemple-realiser-un-cv-interactif","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2012\/07\/exemple-realiser-un-cv-interactif\/","title":{"rendered":"Exemple &#8211; R\u00e9aliser un CV interactif"},"content":{"rendered":"<p><iframe loading=\"lazy\" style=\"box-shadow:0 0 5px #ccc;\" width=\"960\" height=\"540\" scrolling=\"no\" frameborder=\"0\" name=\"3wdoc-embed\" src=\"http:\/\/story.3wdoc.com\/cb6c4c2fad07ad2d52469550411ab7460d3d46da98b7af0680e626e7dd5eb88575\/11\/index.html\"><\/iframe><\/p>\n<h4>D\u00e9finitions<\/h4>\n<p>Nous avons r\u00e9alis\u00e9 un CV interactif qui d\u00e9crit le cursus, les exp\u00e9riences et les comp\u00e9tences d&#8217;une personne.<br \/>\nVous pouvez aller voir le projet sur <a href=\"http:\/\/story.3wdoc.com\/cb6c4c2fad07ad2d52469550411ab7460d3d46da98b7af0680e626e7dd5eb88575\/11\/index.html\">sa page de publication<\/a>.<\/p>\n<h4>La page M\u00e9dia manager<\/h4>\n<p>Dans un premier temps, nous avons upload\u00e9 les images n\u00e9cessaires \u00e0 la conception graphique de ce CV \u00e0 savoir : une image de fond et deux triangles pour les fl\u00e8ches de navigation vers le haut et vers le bas.<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_CVInteractif_media.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_CVInteractif_media.jpg\" alt=\"Exemple - R\u00e9aliser un CV interactif\" title=\"Exemple - R\u00e9aliser un CV interactif\" width=\"960\" height=\"315\" class=\"alignnone size-full wp-image-7841\" \/><\/a><\/p>\n<h4>La page Editor<\/h4>\n<p>Sur la timeline, on peux voir tout en haut les pistes principales, celles de :<\/p>\n<ul>\n<li>l&#8217;image de fond<\/li>\n<li>l&#8217;ent\u00eate avec le nom et la fonction<\/li>\n<li>les boutons play et pause<\/li>\n<\/ul>\n<p><strong>Elles s&#8217;\u00e9tendent toutes sur toute la longueur de la s\u00e9quence.<\/strong><\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_CVInteractif_editor.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_CVInteractif_editor.jpg\" alt=\"Exemple - R\u00e9aliser un CV interactif\" title=\"Exemple - R\u00e9aliser un CV interactif\" width=\"960\" height=\"692\" class=\"alignnone size-full wp-image-7837\" \/><\/a><\/p>\n<p>Les pistes suivantes d\u00e9finissent ensuite les diff\u00e9rents \u00e9crans d&#8217;animation de chaque portion de de ce CV interactif. Tout est r\u00e9alis\u00e9 <strong>\u00e0 base d&#8217;articles diff\u00e9renci\u00e9s gr\u00e2ce au Style<\/strong>.<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_CVInteractif_editor2.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_CVInteractif_editor2.jpg\" alt=\"Exemple - R\u00e9aliser un CV interactif\" title=\"Exemple - R\u00e9aliser un CV interactif\" width=\"960\" height=\"349\" class=\"alignnone size-full wp-image-7838\" \/><\/a><\/p>\n<p>Enfin, nous avons ajout\u00e9 des boutons de navigation sous forme d&#8217;image, <strong>ils nous permettront d&#8217;aller en avant ou en arri\u00e8re sur la timeline<\/strong>. A chaque \u00e9tape de pr\u00e9sentation il est n\u00e9cessaire de <strong>pr\u00e9voir de nouveaux boutons car ils ont une action diff\u00e9rente<\/strong>. Le premier bouton &#8220;suivant&#8221; a l&#8217;action &#8220;goto 11s&#8221;, le deuxi\u00e8me bouton a l&#8217;action &#8220;goto 17s&#8221;.<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_CVInteractif_editor3.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_CVInteractif_editor3.jpg\" alt=\"Exemple - R\u00e9aliser un CV interactif\" title=\"Exemple - R\u00e9aliser un CV interactif\" width=\"960\" height=\"349\" class=\"alignnone size-full wp-image-7839\" \/><\/a><\/p>\n<p>Voici une capture de l&#8217;\u00e9v\u00e8nement sur le premier bouton &#8220;suivant&#8221;.<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_CVInteractif_editor4.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_CVInteractif_editor4.jpg\" alt=\"Exemple - R\u00e9aliser un CV interactif\" title=\"Exemple - R\u00e9aliser un CV interactif\" width=\"960\" height=\"348\" class=\"alignnone size-full wp-image-7840\" \/><\/a><\/p>\n<h4>La page Projet<\/h4>\n<p>Pour ce projet, nous avons gliss\u00e9 notre s\u00e9quence dans le Storybuilder, et <strong>nous avons coch\u00e9 la case Autoplay et la case Plein \u00e9cran<\/strong>.<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_CVInteractif_project.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_CVInteractif_project.jpg\" alt=\"Exemple - R\u00e9aliser un CV interactif\" title=\"Exemple - R\u00e9aliser un CV interactif\" width=\"960\" height=\"619\" class=\"alignnone size-full wp-image-7842\" \/><\/a><\/p>\n<p>Le projet est maintenant publi\u00e9, nous pouvons le partager ou l&#8217;int\u00e9grer dans votre site gr\u00e2ce aux diff\u00e9rents du types d&#8217;exportation disponibles. <strong>Dans cette page par exemple, nous avons choisi d&#8217;ins\u00e9r\u00e9 cette cr\u00e9ation \u00e0 l&#8217;aide d&#8217;une iframe.<\/strong><br \/>\nPour en savoir plus sur l&#8217;utilisation de ces codes d&#8217;exportation, vous pouvez consulter <a href=\"https:\/\/flaven.fr\/2012\/06\/27\/inserer-une-creation-3wdoc-dans-une-page-html-profiter-de-la-fonction-dexport-et-de-partage-de-3wdoc\/\">cet article<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>D\u00e9finitions Nous avons r\u00e9alis\u00e9 un CV interactif qui d\u00e9crit le cursus, les exp\u00e9riences et les comp\u00e9tences d&#8217;une personne. Vous pouvez aller voir le projet sur&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2012\/07\/exemple-realiser-un-cv-interactif\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Exemple &#8211; R\u00e9aliser un CV interactif<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"R\u00e9aliser un CV interactif permet de mettre en avant parcours, exp\u00e9riences et comp\u00e9tences. D\u00e9couvrez les outils et r\u00e9sultats de notre projet.","bf_ai_og_title":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3433,1],"tags":[781,1693,1142,1694,2185,285,2267,799,337,2261,154,792,2243],"class_list":["post-7834","post","type-post","status-publish","format-standard","hentry","category-3wdoc-tutorials","category-miscellaneous-other","tag-animation","tag-cv","tag-diaporama","tag-emploi","tag-html5","tag-image","tag-interactif","tag-interactives","tag-media","tag-narration","tag-photos","tag-slideshow","tag-technique"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-22m","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/7834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=7834"}],"version-history":[{"count":0,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/7834\/revisions"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=7834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=7834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=7834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}