3wdoc » tutoriels http://3wdoc.com/fr easy web way to tell stories Tue, 07 Feb 2012 14:36:33 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Comment publier votre séquence sur votre site ou votre blog ? http://3wdoc.com/fr/2011/07/22/comment-publier-votre-sequence-sur-votre-site-ou-votre-blog/ http://3wdoc.com/fr/2011/07/22/comment-publier-votre-sequence-sur-votre-site-ou-votre-blog/#comments Fri, 22 Jul 2011 10:48:35 +0000 storytellers http://3wdoc.com/fr/?p=5094 Vous pouvez publier vos séquences et WDOC très facilement sur n’importe quelle page HTML, c’est à dire, toutes les plateformes de blogs (WordPress, Tumblr, Blogger, etc.) ainsi que sur vos sites.


Il suffit de suivre les étapes suivantes :

  • Publier votre séquence, en cliquant sur PUBLIER dans la barre de menu de 3WDOC Editor.
  • Dans votre site, ou blog, insérez cet iframe :

    <iframe width="960" height="540" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="URL_DE_LA_SEQUENCE"> </iframe>

    Veillez à indiquer la taille définie au préalable lors de la création de votre séquence, afin qu’il n’y ait pas de désagréments graphiques.



Attention !! La lecture de votre séquence ne sera pas disponible en mode plein écran. Il sera intégré dans le contenu du site.


*** Nous sommes actuellement en train de développer un pluggin WORDPRESS qui permettra une meilleure expérience, avec plus de fonctionnalités… ***








]]> http://3wdoc.com/fr/2011/07/22/comment-publier-votre-sequence-sur-votre-site-ou-votre-blog/feed/ 0 Mettre à jour 3WDOC Studio sur un domaine enregistré avant le 30/06/11 http://3wdoc.com/fr/2011/07/20/mettre-a-jour-3wdoc-studio-sur-un-domaine-enregistre-avant-le-300611/ http://3wdoc.com/fr/2011/07/20/mettre-a-jour-3wdoc-studio-sur-un-domaine-enregistre-avant-le-300611/#comments Wed, 20 Jul 2011 09:31:31 +0000 iDoc http://3wdoc.com/fr/?p=4580

Pour celles et ceux qui se sont inscrit(e)s et ont installé 3WDOC Studio dans leur propre domaine avant le 30 juin 2011, voici une procédure rapide pour mettre à jour votre 3WDOC Studio dans votre domaine.

Si vous voulez toujours enregistrer un domaine, veuillez lire notre tutoriel précédent.

  1. Comment puis-je utiliser le 3WDOC Studio sur mon propre nom de domaine ?

Dans ce tutoriel, nous verrons comment mettre à jour l’application 3WDOC Studio installée dans un nom de domaine déjà enregistré. Dans cet exemple nous utiliserons celui de notre blog http://social.hecube.net

1. Téléchargez le nouveau package

Vous devrez télécharger le nouveau package contenant la dernière version complète de 3WDOC Studio

1. Si vous êtes connecté(e), allez à http://account.3wdoc.com/account/registeredlist
2. Téléchargez le nouveau package pour le domaine dont le statut est ACTIVATED

2. Renommez le précédent package et « uploadez » le nouveau package

2.1 Renommer

Dans notre exemple, nous échangerons une ANCIENNE installation pour une NOUVELLE installation avec les paramètres suivants. Dans un but didactique, nous avons renommé le répertoire avec les mots ANCIEN et NOUVEAU en lettres majuscules. Mais vous pouvez renommer votre répertoire avec les mots que vous souhaitez.

L’ANCIENNE version de 3WDOC Studio (ANCIEN package)

  • Voici le chemin des fichiers sur le serveur: /blog.hecube.net/ANCIEN_my_studio
  • L’ ANCIENNE version de 3WDOC Studio sera disponible à: http://social.hecube.net/ANCIEN_my_studio/
  • Vous pouvez vous connecter à l’ANCIENNE version de 3WDOC Studio avec les mêmes id et pass : http://social.hecube.net/ANCIEN_my_studio/he3Login.php

La NOUVELLE version de 3WDOC Studio (NOUVEAU package)

  • Voici le chemin des fichiers sur le serveur :/blog.hecube.net/NOUVEAU_my_studio
  • La NOUVELLE version de 3WDOC Studio sera disponible à : http://social.hecube.net/NOUVEAU_my_studio/
  • Vous pouvez vous connecter à la NOUVELLE version de 3WDOC Studio avec les mêmes id et pass : http://social.hecube.net/NOUVEAU_my_studio/he3Login.php

2.2 Changez le _HE3WS_LOC_BASE_DOCROOT dans he3Configuration.php pour les répertoires ANCIEN et NOUVEAU
Comme vous avez renommé les répertoires, vous devrez changer les deux configurations des fichiers pour que 3WDOC Studio sache où ils se trouvent !

// define("_HE3WS_LOC_BASE_DOCROOT",				"");
define("_HE3WS_LOC_BASE_DOCROOT",				"ANCIEN_my_studio");
// define("_HE3WS_LOC_BASE_DOCROOT",				"");
define("_HE3WS_LOC_BASE_DOCROOT",				"NOUVEAU_my_studio");

2.3 Conservez le fichier crossdomain.xml à la racine de votre serveur

Vous n’avez pas à changer le fichier crossdomain.xml qui se trouve déjà à la racine de votre serveur. Le fichier crossdomain.xml devrait ressembler à celui ci-dessous.

	<?xml version="1.0"?>
	<!DOCTYPE cross-domain-policy 
	  SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
	<cross-domain-policy>
	        <allow-access-from domain="account.3wdoc.com" />
	</cross-domain-policy>

3. Récupérer vos données

Une seule règle : suivez toujours la procédure de l’ANCIEN package vers le NOUVEAU package. Donc à partir de l’ANCIEN package, nous allons télécharger sur notre ordinateur les répertoires et sous-répertoires suivants et les placer dans le dossier NOUVEAU package.

  1. webdocuments
  2. sequences
  3. medias
  4. multimedia*
  5. skins** à l’exception du sous-répertoire 0

*Pour le répertoire multimédia, il serait plus judicieux de déplacer le répertoire plutôt que de l’uploader de nouveau, surtout s’il contient des fichiers lourds.

** Pour les skins (styles), vous devrez conserver le sous-répertoire 0 du NOUVEAU package. N’UPLOADEZ PAS OU N’UTILISEZ PAS LE SOUS-REPERTOIRE 0 DE VOTRE ANCIEN PACKAGE.

Si vous êtes un expert, vous pouvez déplacer directement vos répertoires et sous-répertoires via votre FTP favori.


4. Allez dans votre 3WDOC Studio


Si vous voulez voir votre nouveau 3WDOC Studio avec vos anciens contenus, vous devrez vous connecter à votre main destination????, dans notre exemple http://social.hecube.net/NOUVEAU_my_studio/. Ca fonctionne également. Vous pouvez effacer ou conserver l’ancienne version de 3WDOC Studio, c’est comme vous voulez !



3WDOC Studio

Quelques informations à propos de 3WDOC Studio…

3WDOC Studio est un outil polyvalent spécialement conçu pour créer et délivrer en HTML5 vos contenus rich media optimisées sur le web. 3WDOC Studio a pour finalité première de mettre en mouvement des objets et des éléments Web (texte, photos, vidéos, arborescence, API, base de données…) dans la durée pour concevoir donc une narration web. 3WDOC Studio = 3WDOC Player + 3WDOC Editor.

Plus d’informations

]]> http://3wdoc.com/fr/2011/07/20/mettre-a-jour-3wdoc-studio-sur-un-domaine-enregistre-avant-le-300611/feed/ 0 Comment utiliser l’éditeur de style ? http://3wdoc.com/fr/2011/07/08/comment-utiliser-lediteur-de-style-de-3wdoc-studio/ http://3wdoc.com/fr/2011/07/08/comment-utiliser-lediteur-de-style-de-3wdoc-studio/#comments Fri, 08 Jul 2011 10:49:22 +0000 storytellers http://3wdoc.com/fr/?p=4214 Dans ce tutoriel, nous allons expliquer tous les paramètres de style.

Vous aurez la possibilité de choisir entre différents paramètres pour chaque élément. Par exemple, la font-family, la couleur, la background-image, la bordure, etc…

Vous pouvez également choisir les paramètres HOVER: le nouveau style que l’élément aura au survol de la souris.

L’Editeur de Style vous permettra de créer et d’appliquer des styles différents pour vos articles: l’arrière-plan du player, la position du player, des articles, des boutons, des images et des boutons UI. Vous pouvez créer un style spécifique à une séquence, mais aussi utiliser le même style pour plusieurs séquences.

Dans cette feuille de style vous définirez :

Vous pouvez mieux comprendre la signification de chaque paramètre grâce à l’aide contextuelle présente sur chaque paramètre.

Lorsque vous créez votre style, afin de prévisualiser son apparence, vous pouvez cliquer sur le bouton « Aperçu ». Vous serez également en mesure de visualiser les paramètres HOVER en survolant chaque élément:

Pour plus d’informations

]]> http://3wdoc.com/fr/2011/07/08/comment-utiliser-lediteur-de-style-de-3wdoc-studio/feed/ 4 Comment personnaliser les articles, les boutons et les images ? http://3wdoc.com/fr/2011/07/06/comment-personnaliser-les-articles-les-boutons-et-les-images/ http://3wdoc.com/fr/2011/07/06/comment-personnaliser-les-articles-les-boutons-et-les-images/#comments Wed, 06 Jul 2011 10:45:40 +0000 storytellers http://3wdoc.com/fr/?p=4225

Voici des exemples de personnalisation possibles avec 3WDOC Studio pour des boutons, images et articles de vos séquences :

Survolez les éléments suivants avec votre souris !

img_3

Article 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.





Chaque élément est personnalisable dans un onglet de style. Ce sont les mêmes paramètres pour les articles, les boutons et les images. Pour les images, évidemment, il n’y a pas de personnalisation du texte.

Les trois onglets sont semblables à l’image suivante.

Ci-dessous, nous allons définir tous les éléments. Tout d’abord, vous devez définir le contour de l’élément, puis définir le style du texte (uniquement pour les articles et les boutons) et les paramètres de « hover » (changements de style lorsque la souris survole l’élément).

Le contour de l’élément

Chaque élément (image, article et bouton) est dans une boîte qui permet de lui offrir un contour. Par exemple, vous pouvez créer une bordure autour d’une image, un article ou un bouton et le concevoir.

    cursor : Définit le type de curseur au survol de la souris.
    border-radius:Définit l’arrondi des angles de l’élément
    border-style: Définit le style de la bordure
    border-width: Définit la largeur de la bordure
    border-color: Définit la couleur de la bordure
    box-shadow: Définit l’ombre de l’élément. Une ombre interne peut aussi être appliquée

Les paramètres de texte

Ce sont tous les paramètres pour personnaliser le texte, SEULEUMENT POUR UN ARTICLE OU UN BOUTON ! En fait, vous pouvez contrôler l’ensemble de son apparence (police, taille, couleur, etc).

    color: Définit la couleur du texte
    font-size: Définit la taille de la police en pixel
    font-family: Définit la police
    font-weight: Définit la graisse de la police
    font-style: Définit le style de la police
    text-align: Définit l’alignement du texte (à gauche, centré, à droite)
    text-decoration: Définit la décoration du texte
    text-transform: Définit la casse du texte
    padding:Définit la marge autour du texte par rapport à son contenant

Paramètres « Hover »

Ce sont tous les changements de style d’un élément lorsque la souris le survole. Avec ces paramètres, vous pouvez créer des changements de style CSS, comme la couleur, la bordure ou l’opacité.
Mais vous pouvez également ajouter des transitions CSS3 , ces paramètres permettent des petites animations.

    color:hover:Définit la couleur du texte au survol de la souris
    text-decoration:hover: Définit la décoration du texte au survol de la souris
    background-color:hover: Définit la couleur d’arrière plan au survol de la souris
    background-image:hover: Définit l’image d’arrière plan au survol de la souris
    border-style:hover: Définit le style de bordure au survol de la souris
    border-width:hover: Définit la largeur de la bordure au survol de la souris
    border-color:hover: Définit la couleur de bordure au survol de la souris
    opacity:hover: Définit l’opacité au survol de la souris
    transition-delay: Définit le temps de démarrage de l’effet de transition
    transition-timing-function: Définit la fluidité de l’effet de transition
    transition-duration: Définit la durée de l’effet de transition
    transition-property: Définit l’élément de style sur lequel l’effet de transition va s’appliquer
    rotate:hover: Définit en degré l’angle de rotation, de 180° à -180°, au survol de la souris
    scaleY:hover: Définit un redimensionnement vertical au survol de la souris. Cela peut-être un agrandissement ou un rapetissement
    scaleX:hover: Définit un redimensionnement horizontal au survol de la souris. Cela peut-être un agrandissement ou un rapetissement
    translateY:hover: Définit un déplacement vertical au survol de la souris
    translateX:hover: Définit un déplacement horizontal au survol de la souris

Pour aller plus loin


]]> http://3wdoc.com/fr/2011/07/06/comment-personnaliser-les-articles-les-boutons-et-les-images/feed/ 6 Comment appliquer un style à une séquence ? http://3wdoc.com/fr/2011/07/05/comment-appliquer-un-style-a-une-sequence/ http://3wdoc.com/fr/2011/07/05/comment-appliquer-un-style-a-une-sequence/#comments Tue, 05 Jul 2011 10:34:19 +0000 storytellers http://3wdoc.com/fr/?p=4364

Vous allez appliquer un style à votre séquence. Pour modifier l’apparence de votre séquence, et de tous les éléments qui la composent, vous devez appliquer un style à votre séquence. Ici nous allons voir comment appliquer un style déjà créé à votre séquence et à vos boutons.

Ce tutoriel vous montre comment personnaliser le style de votre séquence.




3WDOC Studio

Quelques informations à propos de 3WDOC Studio…

3WDOC Studio est un outil polyvalent spécialement conçu pour créer et délivrer en HTML5 vos contenus rich media optimisées sur le web. 3WDOC Studio a pour finalité première de mettre en mouvement des objets et des éléments Web (texte, photos, vidéos, arborescence, API, base de données…) dans la durée pour concevoir donc une narration web. 3WDOC Studio = 3WDOC Player + 3WDOC Editor.

Pour aller plus loin

]]> http://3wdoc.com/fr/2011/07/05/comment-appliquer-un-style-a-une-sequence/feed/ 4 Comment personnaliser le player ? http://3wdoc.com/fr/2011/07/04/comment-personnaliser-le-player/ http://3wdoc.com/fr/2011/07/04/comment-personnaliser-le-player/#comments Mon, 04 Jul 2011 16:10:55 +0000 storytellers http://3wdoc.com/fr/?p=4220

Dans cet article nous allons voir comment personnaliser le player. Le player est la boîte qui permet de lire votre séquence dans le navigateur.

L’Editeur de Style est un éditeur de style CSS, incluant les nouvelles transitions CSS3. Ici, chaque paramètre est détaillé pour chaque élément !


L’arrière plan

Il définit le style général du player.


La position du player

Il définit la marge autour du player.

Maintenant, vous pouvez appliquer un style à un article, une image ou un bouton en suivant le tutorial suivant : Comment appliquer un style à un article, une image ou un bouton ?

Exemples de styles de player

Player background position center center Player background position center top

Plus d’informations


]]> http://3wdoc.com/fr/2011/07/04/comment-personnaliser-le-player/feed/ 5 Comment appliquer un style au player ? http://3wdoc.com/fr/2011/06/28/comment-personnaliser-le-style-du-player/ http://3wdoc.com/fr/2011/06/28/comment-personnaliser-le-style-du-player/#comments Tue, 28 Jun 2011 15:06:13 +0000 storytellers http://3wdoc.com/fr/?p=4352

Vous allez appliquer un style au player. Le player vous permet de lire votre séquence dans le navigateur. Il est en fait l’arrière plan de votre séquence. Si vous n’êtes pas en plein écran, vous pouvez le positionner au milieu de la page, à droite, ou bien à gauche.

Ce tutoriel vous montre comment personnaliser le style du player.




3WDOC Studio

Quelques informations à propos de 3WDOC Studio…

3WDOC Studio est un outil polyvalent spécialement conçu pour créer et délivrer en HTML5 vos contenus rich media optimisées sur le web. 3WDOC Studio a pour finalité première de mettre en mouvement des objets et des éléments Web (texte, photos, vidéos, arborescence, API, base de données…) dans la durée pour concevoir donc une narration web. 3WDOC Studio = 3WDOC Player + 3WDOC Editor.


Vous allez appliquer un style à un article dans votre séquence, en utilisant des transitions CSS3. Les articles sont tous les textes que vous créez dans vos séquences. Ce tutoriel vous montre comment personnaliser le style d’un article dans une séquence, en utilisant des transitions CSS3.




3WDOC Studio

Quelques informations à propos de 3WDOC Studio…

3WDOC Studio est un outil polyvalent spécialement conçu pour créer et délivrer en HTML5 vos contenus rich media optimisées sur le web. 3WDOC Studio a pour finalité première de mettre en mouvement des objets et des éléments Web (texte, photos, vidéos, arborescence, API, base de données…) dans la durée pour concevoir donc une narration web. 3WDOC Studio = 3WDOC Player + 3WDOC Editor.

Pour aller plus loin

]]> http://3wdoc.com/fr/2011/06/27/comment-appliquer-un-style-a-un-article/feed/ 7 Comment selectionner un style pour un titre ? http://3wdoc.com/fr/2011/06/26/3wdoc-studio-comment-appliquer-un-style-a-un-titre/ http://3wdoc.com/fr/2011/06/26/3wdoc-studio-comment-appliquer-un-style-a-un-titre/#comments Sun, 26 Jun 2011 14:42:18 +0000 the team http://3wdoc.com/fr/?p=3801

Voici un rapide tutoriel pour appliquer un style de CSS pour le titre à l’intérieur de votre séquence. Vous saurez comment contrôler l’apparence de votre texte. Un titre signifie un morceau de texte qui doit être affiché à l’intérieur de votre séquence, il peut être par exemple un sous-titre sur une vidéo ou une explication sur une photo.

3WDOC Studio

Quelques informations à propos de 3WDOC Studio…

3WDOC Studio est un outil polyvalent spécialement conçu pour créer et délivrer en HTML5 vos contenus rich media optimisées sur le web. 3WDOC Studio a pour finalité première de mettre en mouvement des objets et des éléments Web (texte, photos, vidéos, arborescence, API, base de données…) dans la durée pour concevoir donc une narration web. 3WDOC Studio = 3WDOC Player + 3WDOC Editor.

Pour aller plus loin

]]> http://3wdoc.com/fr/2011/06/26/3wdoc-studio-comment-appliquer-un-style-a-un-titre/feed/ 0 Appliquer un style à un bouton http://3wdoc.com/fr/2011/06/25/appliquer-un-style-a-un-bouton/ http://3wdoc.com/fr/2011/06/25/appliquer-un-style-a-un-bouton/#comments Sat, 25 Jun 2011 14:59:47 +0000 iDoc http://3wdoc.com/fr/?p=4248

Vous allez appliquer un style à un bouton dans votre séquence, en utilisant des transitions CSS3. Les boutons vous permettent de naviguer dans votre séquence : faire apparaître des nouveaux médias, créer des hyperliens vers vos autres séquences ou des sites externes . Ce tutoriel vous montre comment personnaliser le style d’un bouton dans votre séquence, en utilisant des transitions CSS3.




3WDOC Studio

Quelques informations à propos de 3WDOC Studio…

3WDOC Studio est un outil polyvalent spécialement conçu pour créer et délivrer en HTML5 vos contenus rich media optimisées sur le web. 3WDOC Studio a pour finalité première de mettre en mouvement des objets et des éléments Web (texte, photos, vidéos, arborescence, API, base de données…) dans la durée pour concevoir donc une narration web. 3WDOC Studio = 3WDOC Player + 3WDOC Editor.

Pour aller plus loin

]]> http://3wdoc.com/fr/2011/06/25/appliquer-un-style-a-un-bouton/feed/ 7