{"id":4140,"date":"2017-01-14T15:32:11","date_gmt":"2017-01-14T15:32:11","guid":{"rendered":"http:\/\/www.ticeman.fr\/lecoutelas\/?p=4140"},"modified":"2018-07-22T22:01:56","modified_gmt":"2018-07-22T22:01:56","slug":"wickeditor-creer-des-pages-web-animees-et-dynamiques-avec-cet-outil-open-source","status":"publish","type":"post","link":"https:\/\/www.ticeman.fr\/lecoutelas\/?p=4140","title":{"rendered":"Wickeditor: cr\u00e9er des pages web anim\u00e9es et dynamiques avec cet outil open source"},"content":{"rendered":"<p>Wick Editor est un projet open source permettant de cr\u00e9er des pages en html5 facilement. Il est utilisable en ligne mais peut aussi \u00eatre install\u00e9 sur votre propre serveur. Il permettra donc facilement de cr\u00e9er des pages, des pr\u00e9sentations, des animations, des jeux \u00e9ventuellement. Le tout est de ma\u00eetriser la syntaxe relativement simple. \u00a0Afin de faciliter les choses, l&#8217;\u00e9diteur est fourni avec un fichier d&#8217;exemple regroupant de nombreuses possibilit\u00e9s avec lesquelles vous pourrez vous faire la main.<\/p>\n<p>L&#8217;interface est assez simple et pourra rappeler \u00e0 beaucoup des logiciels habituels d&#8217;animation. Vous pouvez cr\u00e9er des &#8220;frame&#8221; qui sont en quelque sorte des diapositives, sur lesquelles vous pouvez disposer images, textes, gifs anim\u00e9s. les objets peuvent \u00eatre \u00e9dit\u00e9s simplement en terme de position taille etc&#8230;..<\/p>\n<p><a  href=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditor-interface.png\" data-rel=\"lightbox-gallery-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-4141\" src=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditor-interface-300x169.png\" alt=\"\" width=\"300\" height=\"169\" srcset=\"https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditor-interface-300x169.png 300w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditor-interface-768x432.png 768w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditor-interface-1024x576.png 1024w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditor-interface.png 1366w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Chaque frame repr\u00e9sentant un \u00e9cran, il suffira de disposer sur chaque frame les \u00e9l\u00e9ments. Dans l&#8217;exemple fourni, une fl\u00e8che permet de passer \u00e0 l&#8217;\u00e9cran suivant simplement. Mais tout cela ne se fait pas sans programmation, mais rassurez-vous celle-ci est tr\u00e8s accessible. Par exemple, pour dire \u00e0 la fl\u00e8che de passer \u00e0 l&#8217;\u00e9cran suivant il suffit de saisir le code suivant.<\/p>\n<p><a  href=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditor-program.png\" data-rel=\"lightbox-gallery-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-4142\" src=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditor-program-300x169.png\" alt=\"\" width=\"300\" height=\"169\" srcset=\"https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditor-program-300x169.png 300w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditor-program-768x432.png 768w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditor-program-1024x576.png 1024w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditor-program.png 1366w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Bien entendu, il est possible de faire beaucoup plus complexe comme dans l&#8217;exemple fourni avec un d\u00e9placement des objets en fonction du d\u00e9placement de la souris. Mais cela est tr\u00e8s compr\u00e9hensible. Quasiment toutes les commandes se retrouvent dans l&#8217;exemple fourni et il suffit de les r\u00e9utiliser.<\/p>\n<p><a  href=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditorprogram2.png\" data-rel=\"lightbox-gallery-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-4143\" src=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditorprogram2-300x169.png\" alt=\"\" width=\"300\" height=\"169\" srcset=\"https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditorprogram2-300x169.png 300w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditorprogram2-768x432.png 768w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditorprogram2-1024x576.png 1024w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wickeditorprogram2.png 1366w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Chaque objet peut \u00eatre programm\u00e9 ind\u00e9pendamment des autres mais il sera aussi possible de programmer des interactions entre les objets. Dans ce cas, il suffit d&#8217;utiliser le nom des objets et leurs propri\u00e9t\u00e9s. Par exemple la position d&#8217;un objet au d\u00e9part, peut \u00eatre modifi\u00e9e lorsque l&#8217;on clique quelque part. Il suffira d&#8217;utiliser les \u00e9l\u00e9ments \u00a0de position. Il sera aussi possible de changer l&#8217;opacit\u00e9 etc&#8230;.<\/p>\n<p><a  href=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wick-editor-objet.png\" data-rel=\"lightbox-gallery-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-4144\" src=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wick-editor-objet-300x169.png\" alt=\"\" width=\"300\" height=\"169\" srcset=\"https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wick-editor-objet-300x169.png 300w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wick-editor-objet-768x432.png 768w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wick-editor-objet-1024x576.png 1024w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2017\/01\/wick-editor-objet.png 1366w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Le tout est vraiment tr\u00e8s simple. La page cr\u00e9\u00e9e est un fichier html unique comprenant tous les \u00e9l\u00e9ments. la page s&#8217;adapte \u00e0 tous les \u00e9crans de fa\u00e7on dynamique. Wick editor est donc parfait pour cr\u00e9er un projet pour mobile comme pour ordinateur. L\u2019aspect programmation se prend tr\u00e8s rapidement en main, les commandes \u00e9tant en fait assez limit\u00e9es en nombre. Malheureusement, pour le moment, l&#8217;import de vid\u00e9o n&#8217;est pas pr\u00e9vu. Pour le moment, il faudra se contenter de liens.<\/p>\n<p>Le tout est bien entendu gratuit. Si cela vous pla\u00eet r\u00e9ellement, vous pourrez r\u00e9cup\u00e9rer les sources et installer votre propre serveur.<\/p>\n<p>Lien: <a href=\"http:\/\/wickeditor.com\/\" target=\"_blank\" rel=\"noopener\">Wickeditor<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wick Editor est un projet open source permettant de cr\u00e9er des pages en html5 facilement. Il est utilisable en ligne mais peut aussi&hellip;<a href=\"https:\/\/www.ticeman.fr\/lecoutelas\/?p=4140\" class=\"more-link\"><span class=\"more-button\">Continuez la lecture<span class=\"screen-reader-text\">Wickeditor: cr\u00e9er des pages web anim\u00e9es et dynamiques avec cet outil open source<\/span><\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":4141,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,51,87,13,92],"tags":[],"class_list":["post-4140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","category-creation","category-creer-des-sites-web-et-presentations-interactives","category-presentations","category-presentations-avec-diapositives"],"_links":{"self":[{"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/posts\/4140"}],"collection":[{"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4140"}],"version-history":[{"count":2,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/posts\/4140\/revisions"}],"predecessor-version":[{"id":6446,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/posts\/4140\/revisions\/6446"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/media\/4141"}],"wp:attachment":[{"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}