Projet tuteuré de notre Master 1 Audiovisuel et Médias Numériques, option Médias Numériques, à l'ICM de Grenoble (Université Stendhal), 2011/2012. Conception du site Internet de la Maison de la Création. Ce document est la version finale de l'architecture web de notre concept, rebaptisé "Cu3". Démonstrateur vidéo : www.youtube.com/watch?v=xztPUlOTpCk&feature=plcp Blog : www.gateausurlacerise.com Twitter : @GateauSurCerise Facebook : www.facebook.com/gateausurlacerise LinkedIn : www.linkedin.com/in/sylvaingateau Viadeo : www.viadeo.com/fr/profile/sylvain.gateau2

1. Projet tuteuré : Conception du site de la Maison de la Création
Zoning du concept « CU3 »
Master 1 Audiovisuel et Médias Numériques 2011 / 2012, option Médias Numériques
Institut de la Communication et des Médias - Grenoble
GATEAU Sylvain / ORTIZ Marius / SERRAILLIER Benoît /// Avril 2012

2. Page d’accueil

3. Page d’accueil // Accès au Back Office Membres ou Visiteurs

4. Page d’accueil // Accès au Back Office Membres ou Visiteurs
MEMBRES
Mail... @u-grenoble3.fr
Mot de passe...
OK
Mot de passe oublié ?
VISITEURS
Créez Accédez
Mail... Mail...
Entrez votre mail pour
recevoir votre mot de Mot de passe...
passe.
Mot de passe oublié ?

5. Page d’accueil // Vidéo de présentation

6. Page d’accueil // Vidéo de présentation

7. Page d’accueil // Galaxie des Cubs thématiques

8. Page d’accueil // Galaxie des Cubs thématiques

9. Page d’accueil // Galaxie des Cubs thématiques

10. Page d’accueil // Galaxie des Cubs thématiques

11. Page d’accueil // Galaxie des Cubs thématiques

12. Page d’accueil // Informations institutionnelles sur la Maison de la Création

13. Page d’accueil // Informations institutionnelles sur la Maison de la Création
Sed ut tum ad senem senex de senectute, sic hoc libro ad amicum amicissimus scripsi de amicitia. Tum est
Cato locutus, quo erat nemo fere senior temporibus illis, nemo prudentior; nunc Laelius et sapiens (sic enim
est habitus) et amicitiae gloria excellens de amicitia loquetur. Tu velim a me animum parumper avertas, Lae-
lium loqui ipsum putes. C. Fannius et Q. Mucius ad socerum veniunt post mortem Africani; ab his sermo
oritur, respondet Laelius, cuius tota disputatio est de amicitia, quam legens te ipse cognosces.

14. Back Office Membres // Cub
Nom du Cub Entrez des mots-clés entre « »... OK
Important pour que votre Cub soit référencer dans la « Galaxie de Cubs associés »
Maison de la Création Workshop conception web
Master Médias Numériques Zoning site web
Créez ou recherchez
des Hubs et Naviguez
Flux d’actualités des Hubs ajoutés
glissez-déposez les
sur les faces de
votre Cub
Mes Cubs favoris
Modifiez à tout moment les
noms des faces de votre Cub
en cliquant dans l’encadré... Actualités
Recherchez
Mes Hubs... plus de
Hubs...

15. Back Office Membres // Cub // Paramètres de compte
Nom du Cub Entrez des mots-clés entre « »... OK
Important pour que votre Cub soit référencer dans la « Galaxie de Cubs associés »
Modifiez votre mail...
Maison de la Création Workshop conception web
Modifiez votre mot de passe...
Confirmez votre nouveau mot de passe...
Master Médias Numériques Zoning site web
Créez ou recherchez
des Hubs et Naviguez
Flux d’actualités des Hubs ajoutés
glissez-déposez les
sur les faces de
votre Cub
Mes Cubs favoris
Actualités
Recherchez
Mes Hubs... plus de
Hubs...

16. Back Office Membres // Cub // Création d’avatar
Nom du Cub Entrez des mots-clés entre « »... OK
Important pour que votre Cub soit référencer dans la « Galaxie de Cubs associés »
Maison de la Création Workshop conception web
Ajoutez un avatar
Master Médias Numériques Zoning site web
Sélectionnez une image... ... Aperçu:
Composez votre
...ou créez votre avatar !
Cub en glissant Naviguez
Flux d’actualités des Hubs ajoutés
déposant les Hubs
de la sélection
Undo Redo Reset Download
Mes Cubs favoris
Valider l’avatar
Actualités
Recherchez
Mes Hubs... plus de
Hubs...

17. Back Office Membres // Cub // Glisser-déposer des Hubs
Entrez des mots-clés entre « »... OK
Important pour que votre Cub soit référencer dans la « Galaxie de Cubs associés »
Maison de la Création Workshop conception web
Master Médias Numériques Zoning site web
Naviguez
Flux d’actualités des Hubs ajoutés
Mes Cubs favoris
Actualités
Recherchez
Mes Hubs... plus de
Hubs...

18. Back Office Visiteurs // Cub
Nom du Cub
Recherchez des
Hubs et Naviguez
Flux d’actualités des Hubs ajoutés glissez-déposez les
sur les faces de
votre Cub
Mes Cubs favoris
Modifiez à tout moment les
noms des faces de votre Cub
en cliquant dans l’encadré... Actualités
Recherchez
plus de
Hubs...

19. Back Office Visiteurs // Cub // Paramètres de compte
Nom du Cub
Modifiez votre mail...
Modifiez votre mot de passe...
Confirmez votre nouveau mot de passe...
Recherchez des
Hubs et Naviguez
Flux d’actualités des Hubs ajoutés glissez-déposez les
sur les faces de
votre Cub
Mes Cubs favoris
Actualités
Recherchez
plus de
Hubs...

20. Back Office Visiteurs // Cub // Création d’avatar
Nom du Cub
Ajoutez un avatar
Sélectionnez une image... ... Aperçu:
Composez votre
...ou créez votre avatar !
Cub en glissant Naviguez
Flux d’actualités des Hubs ajoutés
déposant les Hubs
de la sélection
Undo Redo Reset Download
Mes Cubs favoris
Valider l’avatar
Actualités
Recherchez
plus de
Hubs...

21. Back Office Visiteurs // Cub // Glisser-déposer des Hubs
Naviguez
Flux d’actualités des Hubs ajoutés
Mes Cubs favoris
Actualités
Recherchez
plus de
Hubs...

22. Back Office Hubs (réservé aux Membres) // Création
Mes Hubs...

23. Back Office Hubs (réservé aux Membres) // Création // Galerie images
Mes Hubs...
Choisissez une catégorie pour ce Hub...

24. Back Office Hubs (réservé aux Membres) // Création // Galerie images
Mes Hubs...
Ajoutez une image...
Parcourez sur votre ordinateur...
OK
Entrez un lien URL...

25. Back Office Hubs (réservé aux Membres) // Création // Galerie images
Mes Hubs...

26. Back Office Hubs (réservé aux Membres) // Création // Galerie images
Mes Hubs...
Ajoutez une image...
Parcourez sur votre ordinateur...
OK
Entrez un lien URL...

27. Back Office Hubs (réservé aux Membres) // Ajouter des mots-clés à un Hub
Mes Hubs...

28. Back Office Hubs (réservé aux Membres) // Ajouter des mots-clés à un Hub
Mes Hubs...
Ajoutez des mots-clés au Hub...
Entrez des mots-clés entre « »...
OK
Maison de la Création Workshop conception web
Master Médias Numériques Zoning site web
Projet tuteuré

29. Back Office Hubs (réservé aux Membres) // Inviter des collaborateurs à un Hub
Mes Hubs...

30. Back Office Hubs (réservé aux Membres) // Inviter des collaborateurs à un Hub
Mes Hubs...
Invitez des collaborateurs...
Entrez l’adresse mail d’un collaborateur...
OK
Benoit Serailler Marius Ortiz
Sylvain Gateau Frank Grimonpont

31. Back Office Hubs (réservé aux Membres) // Confidentialité d’un Hub
Mes Hubs...

32. Back Office Hubs (réservé aux Membres) // Confidentialité d’un Hub
Mes Hubs...
Paramétrez la confidentialité de votre Hub...
Public : Hub visible par tous les internautes. Ce réglage permet
de référencer le Hub dans les Cubs thématiques.
OK
Privé : Hub invisible au grand public. Seuls vous et les
collaborateurs peuvent accéder à ce Hub.

33. Back Office Hubs (réservé aux Membres) // Supprimer un Hub
Mes Hubs...

34. Back Office Hubs (réservé aux Membres) // Supprimer un Hub
Mes Hubs...
Supprimez le Hub...
OUI
Voulez-vous vraiment supprimer ce Hub ?
NON

35. Back Office Hubs (réservé aux Membres) // Création // Chaine vidéos
Mes Hubs...

36. Back Office Hubs (réservé aux Membres) // Création // Chaine vidéos
Mes Hubs...
Choisissez une catégorie pour ce Hub...

37. Back Office Hubs (réservé aux Membres) // Création // Chaine vidéos
Mes Hubs...
Ajoutez une vidéo...
Parcourez sur votre ordinateur...
OK
Entrez un lien URL...

38. Back Office Hubs (réservé aux Membres) // Création // Téléchargement
Mes Hubs...

39. Back Office Hubs (réservé aux Membres) // Création // Téléchargement
Mes Hubs...
Choisissez une catégorie pour ce Hub...

40. Back Office Hubs (réservé aux Membres) // Création // Téléchargement
Mes Hubs...
Ajoutez un fichier...
Parcourez sur votre ordinateur...
OK
Entrez un lien URL...

41. Back Office Hubs (réservé aux Membres) // Création // Flux RSS
Mes Hubs...
Mémoire Social media

42. Back Office Hubs (réservé aux Membres) // Création // Flux RSS
Mes Hubs...
Choisissez une catégorie pour ce Hub...

43. Back Office Hubs (réservé aux Membres) // Création // Flux RSS
Mes Hubs...
Synchronisez vos comptes et sites favoris...
OK
Entrez un lien de flux RSS...

44. Back Office Hubs (réservé aux Membres) // Création // Blog
Mes Hubs...
Mémoire Social media

45. Back Office Hubs (réservé aux Membres) // Création // Blog
Mes Hubs...
Choisissez une catégorie pour ce Hub...

46. Back Office Hubs (réservé aux Membres) // Création // Blog
Mes Hubs...
Ajoutez un blog... Nom du blog
Nom de l’article... OK
Tapez votre texte...

47. Back Office Hubs (réservé aux Membres) // Création // Blog
Mes Hubs...
Ajoutez un blog... Nom du blog
Nom de l’article... OK
Ajoutez un lien...
Image
Tapez votre texte...l’article...
Nom de Parcourez sur votre bureau...
Ajoutez un lien URL...
Vidéo
Parcourez sur votre bureau...
Ajoutez un code embed...

48. Back Office Hubs (réservé aux Membres) // Création // Blog // Article
Mes Hubs...
Mémoire Social media

49. Back Office Hubs (réservé aux Membres) // Création // Blog // Article
Mes Hubs...
Ajoutez un article... Workshop Création
Nom de l’article... OK
Tapez votre texte...

50. Back Office Hubs (réservé aux Membres) // Création // Page Web
Mes Hubs...
Mémoire Social media

51. Back Office Hubs (réservé aux Membres) // Création // Profil
Mes Hubs...
Choisissez une catégorie pour ce Hub...
31
i

52. Back Office Hubs (réservé aux Membres) // Création // Profil
Mes Hubs...
Ajoutez un profil ... Nom de la page...
Nom de profil... OK
Votre expérience...
Votre formation...
Vos centres d’interêts...
Votre projet...

53. Back Office Hubs (réservé aux Membres) // Création // Profil
Mes Hubs...
Ajoutez un profil... Nom de la page...
Nom de profil... OK
Votre expérience...
Votre formation...
Vos centres d’interêts...
Votre projet...

54. Back Office Hubs (réservé aux Membres) // Création // Profil
Mes Hubs...
Confirmation
Confirmation
Ajoutez un avatar
(en cas d’oubli
Sélectionnez une image... Aperçu:
...
de mot de passe)
Composez votre
Hub en glissant
déposant les Nubs
...ou créez votre avatar !
de la sélection
+
Undo Redo Reset Download
1 Valider l’avatar / 3
/3 2

55. Back Office Hubs (réservé aux Membres) // Création // Événement
Mes Hubs...
Choisissez une catégorie pour ce Hub...
31
i

56. Back Office Hubs (réservé aux Membres) // Création // Événement
Mes Hubs...
Ajoutez un événement ...
Nom de l’événement... OK
Date...
Type de l’événement...
Sujet de l’événement...
Détails...

57. Back Office Hubs (réservé aux Membres) // Création // Informations
Mes Hubs...
Choisissez une catégorie pour ce Hub...
31
i

58. Back Office Hubs (réservé aux Membres) // Création // Informations
Mes Hubs...
Ajoutez une page d’informations...
Titre... OK
Type...
Votre texte...

59. Back Office Hubs (réservé aux Membres) // Création // Page développeur
Mes Hubs...
Choisissez une catégorie pour ce Hub...
31
i

60. Back Office Hubs (réservé aux Membres) // Création // Page développeur
Mes Hubs...
Ajoutez une page web...
OK

61. Cub thématique (accessible à partir de la page d’accueil)
Les Hubs pratiques Recherchez...

62. Cub thématique // Visiter un Hub
Les Hubs pratiques Recherchez...
Visitez
Ajoutez

63. Cub thématique // Visiter un Hub
Les Hubs pratiques Recherchez...
Visitez
Ajoutez

64. Visite d’un Hub
Les Nubs pratiques Rechercher
Visitez
Ajoutez
Changez
de Hub !

65. Cub thématique // Ajouter le Hub au Cub
Les Hubs pratiques Recherchez...
Visitez
Ajoutez

66. Cub thématique // Ajouter le Hub au Cub
Les Hubs pratiques Recherchez...
Visitez
Choisissez une catégorie pour ce Hub...
Ajoutez
Vous possédez déjà un Cub ?
Catégories...
Identifiez-vous pour retrouver vos
Actualités catégories personnalisées et
intégrez directement le Hub
Informations sélectionné !
Innovations
Votre mail
Projets étudiants
Sujets de recherche Votre mot de passe
Workshops
Validez

67. Cub thématique // Accéder à son Cub (Back Office Membres ou Visiteurs)
Les Hubs pratiques Recherchez...
Votre Cub...

68. Cub thématique // Changer de face horizontalement
Les Hubs « Workshops » Recherchez...

69. Cub thématique // Changer de face verticalement
Les Hubs « Workshops » Recherchez...

70. Cub thématique // Défiler de Hubs horizontalement
Les Hubs « Workshops » Recherchez...

71. Cub thématique // Défiler des Hubs verticalement
Les Hubs « Workshops » Recherchez...

72. Cub thématique // Accéder à la Galaxie de Cubs associés
Les Hubs « Workshops » Recherchez...

73. Visite d’un Hub
Les Nubs pratiques Rechercher
Visitez
Ajoutez
Changez
de Hub !

74. Visite d’un Hub // Accéder au menu
Les Nubs pratiques Rechercher
Visitez
Ajoutez

75. Visite d’un Hub // Accéder au menu // Retourner au Cub thématique
Les Nubs pratiques Rechercher
Visitez
Ajoutez

76. Visite d’un Hub // Accéder au menu // Accéder au Cub du créateur de ce Hub
Les Nubs pratiques Rechercher
Visitez
Ajoutez

77. Visite d’un Hub // Accéder au menu // Accéder à la Galaxie de Cubs associés
Les Nubs pratiques Rechercher
Visitez
Ajoutez

78. Visite d’un Hub // Accéder au menu // Ajouter le Hub à son Cub
Les Nubs pratiques Rechercher
Visitez
Ajoutez

79. Visite d’un Hub // Accéder au menu // Partager le Hub
Les Nubs pratiques Rechercher
Visitez
Ajoutez

80. Visite d’un Hub // Accéder au menu // Contacter le créateur du Hub
Les Nubs pratiques Rechercher
Visitez
Ajoutez

81. Visite d’un Hub // Accéder au menu // Contacter le créateur du Hub
Les Nubs pratiques Rechercher
Visitez
Envoyez un mail...
Votre adresse mail... OK
Ajoutez
Objet...
Votre texte...

82. Visite d’un Hub // Accéder au menu // Contacter le créateur du Hub
Les Nubs pratiques Rechercher
Visitez
Envoyez un mail...
Votre adresse mail... OK
Ajoutez
Ajoutez un lien...
Objet... Ajoutez un pièce jointe...
Cc :
Votre texte...

83. Visite d’un Hub // Changer de Hub latéralement (gauche)
Changez
de Hub !

84. Visite d’un Hub // Changer de Hub latéralement (droite)
Changez
de Hub !

85. Visite d’un Hub // Changer de Hub verticalement (haut)
Changez
de Hub !

86. Visite d’un Hub // Changer de Hub verticalement (bas)
Changez
de Hub !

87. Visite d’un Hub // Changer de Hub verticalement (bas)
Changez
de Hub !

88. Galaxie de Cubs associés (accessible par “Cub thématiques” ou “Visite d’un Hub”)
Recherchez un Cub...

89. Galaxie de Cubs associés // Zoomer, Survoler, Tourner, Trouver un Cub
Hub
Recherchez un Cub...

90. Galaxie de Cubs associés // Zoomer, Survoler, Tourner, Trouver un Cub
Hub
Recherchez un Cub...

91. Galaxie de Cubs associés // Rechercher un Cub
Monsieur Marius

92. Navigation (accessible par le “Back office Cub d’un membre ou d’un visiteur” OU
la “Galaxie de Cubs associés” OU le menu d’un Hub)
Nom du Cub
Actualités

93. Navigation // Zoomer (scroll avant)

94. Naviation // Zoomer (scroll avant)

95. Navigation // Zoomer (scroll avant maximum)

96. Navigation // Zoomer (boucle après scroll avant maximum)
Nom du Cub
Actualités

97. Navigation // Accéder au menu
Nom du Cub
Actualités

98. Navigation // Accéder au menu // Ajouter le Cub à ses favoris (accessible dans le Back Office)
Nom du Cub
Actualités

99. Navigation // Accéder au menu // Retourner à l’accueil
Nom du Cub
Actualités