D1610 MISE À JOUR DU SITE INTERNET / INTRANET PMU

/15 D1610 MISE À JOUR DU SITE INTERNET / INTRANET PMU

/15 SOMMAIRE 1 Livelink... 3 1.1 Généralités... 3 2 Site internet / intranet PMU... 4 2.1 La page d accueil... 4 2.1.1 Carrés «Actualités» (concerne uniquement l intranet)... 5 2.1.2 Bandeaux imagés (concerne uniquement l internet)... 5 2.1.3 Autres éléments de la page d accueil (concerne uniquement l internet)... 8 2.2 Les pages «Contenu»... 8 2.2.1 Création d une page... 9 2.2.2 Renommer une page... 9 2.2.3 Dupliquer une page... 9 2.2.4 Supprimer une page... 10 2.2.5 Déplacer une page... 10 2.2.6 Masquer une page de la navigation... 10 2.2.7 Créer une page avec un lien direct vers un pdf... 10 2.2.8 Activation d une page... 10 2.3 Le texte... 10 2.3.1 Modifier un texte... 10 2.4 Les images... 11 2.4.1 Insérer une image... 11 2.4.2 Editer une image... 12 2.4.3 Les propriétés d une image... 12 2.5 Les vidéos... 12 2.5.1 Insérer une vidéo... 12 2.6 Les liens... 12 2.6.1 Insérer un lien externe... 13 2.6.2 Insérer un lien interne... 13 2.6.3 Insérer un lien applicatif... 13 2.6.4 Les liens cassés... 13 2.7 Les tableaux... 14 2.7.1 Insérer un tableau... 14 2.8 Les téléchargements... 14 2.8.1 Insérer un document pdf... 14 2.8.2 Mettre à jour un document pdf... 15 2.9 Les ancres... 15 2.9.1 Insérer des ancres... 15 2.10 La corbeille... 15 2.10.1 Vider la corbeille... 15 2.10.2 Voir les éléments supprimés... 15 2.11 Rechercher... 15

/15 D1610 Mise à jour du site internet / intranet PMU Distribué à : pmu.adm.comm 1 Livelink 1.1 Généralités Une documentation sur Livelink peut être trouvée sur l intranet CHUV : http://intranet.intranet.chuv/cell/cell_home/cell_gerer/cell_obtree_doc.htm Dans Livelink, onglet Home de ahiroz, on trouve «Page d informations» avec un mode d emploi de Livelink Il est préférable d utiliser Firefox qu Internet Explorer. Firefox peut être téléchargé via intranet : http://teleshop/ Pour changer son mot de passe : Home de ahiroz > modifier le mot de passe Il existe 3 modes dans Livelink : Editer la page : pour modifier la page NB : Livelink masque parfois les boutons. S ils disparaissent, aller sous Contenu > Editer la page. Aperçu : pour voir la page, même si elle est en construction, comme les utilisateurs verront. Affichage réel : pour voir la page comme les utilisateurs voient simultanément. Lorsqu on renomme un document, image, lien, il faut utiliser les traits d union au lieu des underscore, car les moteurs de recherche comme google ne reconnaissent pas les underscore. Pour que tout changement soit validé et publié sur le site : le passer en état «Active» et non pas «At Work» (par défaut). Attention : Une fois en mode «Active», on ne peut pas revenir en mode «At work». Il faut créer une nouvelle version. Il ne faut jamais choisir le mode «Inactive» ou «Archiver», car on ne peut plus passer au mode «Activer» après. Si on a fait «Inactive», on peut refaire apparaître la page en créant une nouvelle version. Il faut de préférence utiliser les dates de validité pour faire apparaître ou disparaître une page. Pour tout objet (image, texte, lien, ), on peut définir une période de validité sous Propriétés : Pour revenir en arrière, il faut mettre la souris sur la barre bleue à côté de l onglet Actions et faire backspace. Pour actualiser tout changement : F5 (ou CTRL-F5 qui nettoie le cache). Quand on a terminé : cliquer sur «Quitter» au lieu de fermer la fenêtre et se déconnecter.

/15 2 Site internet / intranet PMU 2.1 La page d accueil Intranet Internet

/15 2.1.1 Carrés «Actualités» (concerne uniquement l intranet) Pour créer un carré «Actualités» Prendre un modèle dans le dossier suivant : L:\PMU\COMMUN_COMMUNICATION\COMMUNICATION\2014\WEB\INTRANET PMU\Homepage\modèles de carrés Modifier le carré (texte, image) Faire ensuite une capture d écran du carré > ouvrir Photofiltre > enregistrer en tant qu image Modifier la taille de l image en mettant les dimensions suivantes : L x h = 200x200 Enregistrer l image (en jpg ou png) dans le dossier suivant : L:\PMU\COMMUN_COMMUNICATION\COMMUNICATION\2014\WEB\INTRANET PMU\Homepage\carrés news Insérer l image dans la page d accueil (point 2.4.1) Dans l éditeur de texte (point 2.3.1), sélectionner l image et ajouter un lien hypertexte vers un document pdf ou une adresse url (point 2.6) 2.1.2 Bandeaux imagés (concerne uniquement l internet) Pour mettre en avant une personne, une activité,, on peut ajouter un texte (En savoir plus ) sur le bandeau avec un lien qui redirige vers une page spécifique. Les bandeaux imagés peuvent être modifiés en tout temps. Les photos peuvent être commandées au CEMCAV.

/15 Attention : le CEMCAV ne possède pas de photos en stock. On doit leur demander d en créer une en leur fournissant les thèmes. Pour modifier un bandeau Enregistrer la photo dans le dossier suivant : L:\PMU\COMMUN_COMMUNICATION\COMMUNICATION\2014\WEB\INTERNET PMU\Bandeaux Les dimensions suivantes : L x h = 970x285 Résolution horizontale et verticale : 96 ppp Les dimensions pour les bandeaux des pages «Contenu» sont les suivantes : L x h = 970x225 Créer / importer du contenu Sélectionner le type de contenu > image Cliquer sur Parcourir pour aller chercher la photo dans le dossier. Nom : pmu-nom de la page vers laquelle la photo redirige-stroy-web Texte de remplacement : nom de la page vers laquelle la photo redirige Sous type > PMU Cliquer sur Créer. Les données de la photo s affichent en-dessous. Aller sur «Sélectionnez une action» et cliquer sur «Définir l état activé» Rechercher > taper le nom de story-web > sélectionner la photo voulue > cliquer avec le bouton droite sur Propriétés > copier le lien url de l image.

/15 Cliquer sur «Modifier le bandeau» 1 e colonne : url de l image 2 e colonne : nom de la page vers laquelle l image redirige 3 e colonne : le texte qui apparaîtra dans le carré rouge En savoir plus 4 e colonne : url du lien interne de la page vers laquelle l image redirige La ligne dans le tableau détermine la place de l image défilante. Pour créer un lien interne d une page vers laquelle l image redirige Créer/importer un contenu > sélectionner lien interne> cliquer sur Rechercher. Sélectionner Page dans le type de contenu et taper le nom de la page souhaitée. Une fois affichée en-dessous, dans «Sélectionnez une action» choisir Créer un lien. Dans «Sélectionnez une action», choisir Définir l état activé puis choisir Propriétés et copier l adresse url. Modifier le bandeau > copier l url de la page dans la 4 e colonne.

/15 2.1.3 Autres éléments de la page d accueil (concerne uniquement l internet) Bienvenue à la PMU Ce texte est très important pour l indexation sur google. Il faut donc choisir les bons mots-clés. Besoin d aide Cette partie permet d avoir des liens directs vers pages les plus importantes du site. Teasers Ce sont des images avec une légende sur la droite qui renvoient vers les pages les plus importantes du site. Ils sont modifiables également à tout moment ; il faut commander l image au CEMCAV, en spécifiant l image et la légende. Les dimensions pour les teasers sont les suivantes : L x h = 185x118 Pour ajouter une image > cliquer sur l icône > rechercher des images avec le mot clé «teaser» S il faut mettre plusieurs teasers à la suite, il faut les insérer dans la même zone de texte et faire majuscule + enter + enter après l image. Pour supprimer un teaser vide, il faut jouer avec les dates de validité : mettre une date antérieure. Agenda et actualités Tous les collaborateurs peuvent soumettre une actualité ou un événement/agenda via le portail intranet CHUV. Il est possible de choisir un public cible : patients, professionnels de la santé, recherche, formation. 2.2 Les pages «Contenu» Intranet

/15 Internet 2.2.1 Création d une page Aller dans le menu «Contenu» > créer une page > sélectionner le modèle > cliquer sur «Sélectionner ce modèle et définir la position» > choisir l emplacement de la page dans l arborescence : Placer au-dessus de la page Placer au-dessous de la page Placer comme page subordonnée Nommer de la manière suivante : Nom = ce qui apparaît dans l adresse url (.htm) (à mettre avec des tirets) Titre = ce qui apparaît dans la barre de la fenêtre (peut être +/- long). Cela est très utile pour le google ranking Texte du lien = ce qui apparaît sur la page web (doit être court) 2.2.2 Renommer une page Ouvrir le menu site explorer et se rendre sur la page souhaitée > clique droit > Propriétés. 2.2.3 Dupliquer une page Ouvrir le menu site explorer et se rendre sur la page à dupliquer > clique droit > choisir «dupliquer».

/15 2.2.4 Supprimer une page Ouvrir le menu site explorer et se positionner dans une page autre que celle qu on veut supprimer > clique droit > supprimer la page > supprimer la page et son contenu. NB : s il y a un nombre de référence : le chiffre correspond au nombre de fois que la page apparaît ailleurs dans le site internet. Il faut décocher pour ne pas perdre le texte sur les autres pages du site internet. 2.2.5 Déplacer une page Ouvrir le menu site explorer > clic droit > drag and drop : Si c est gris, la page sera subordonnée Si un trait bleu apparaît, la page sera intercalée 2.2.6 Masquer une page de la navigation Si on veut qu une page apparaisse seulement via un lien, mais pas dans la structure hiérarchique du site, on peut masquer une page. Pour cela, ouvrir le menu site explorer > clique droit > masquer dans la navigation. 2.2.7 Créer une page avec un lien direct vers un pdf Contenu > créer/importer un contenu > choisir le type de lien : lien externe (adresse url) ou document/fichier (aller chercher le document pdf dans dossier web) > créer > sélectionner une action > activé > OK > créer un lien > activé > ajouter dans la navigation. Attention : il n est pas possible de faire une page vers 2 liens différents. 2.2.8 Activation d une page Quand la page est prête, ouvrir le menu site explorer > clique droit > Activer. La page entière sera activée. 2.3 Le texte 2.3.1 Modifier un texte Cliquer pour modifier le texte. La machine virtuelle (SUN) s ouvre, attention dans cette machine, aucune mise en forme ne se voit, il faut le voir directement sur le site (en rafraîchissant avec F5). Le format Police Gras italique souligné > à éviter car il y a une confusion avec liens exposant indice Il est impossible de modifier la taille, ni la couleur sauf en utilisant les styles pré-enregistrés. Alignement à gauche : impossible de le modifier. Liste de puces/numéros : impossible de modifier le type, ça reste des petits triangles. Même si on utilise des listes de chiffres, ça fera des petits triangles. Si vraiment on a besoin, il faut mettre les numéros manuellement. NB : majuscule + tab permet de revenir en arrière d une tabulation. Espaces entre les lignes : pour faire un espace entre les lignes de texte, il faut faire enter 2x. Pour que l espace soit pris en compte il faut appuyer quelques fois sur la barre d espace. Aller à la ligne : maj + enter (le signe doit s afficher).

/15 Version At Work / version «Active» indique que le bloc de texte est «At Work» indique que le bloc de texte est «Active» Option nouvelle version Cette option permet de prévoir des pages en avance. Quand il y a plusieurs versions actives, celle avec le chiffre le plus élevé s affiche. Avantages : possibilité de s organiser en choisissant les dates d activation d une version on a toujours le même format de page, seul le texte change. Donc, s il y a un lien vers cette page, il est conservé. 2.4 Les images Toute image a un droit et elle appartient à quelqu un. Il faut toujours demander l accord de la personne concernée avant d utiliser une image sur internet ou intranet. On peut commander des images au CEMCAV (attention le CEMCAV n est pas un service gratuit). Il existe également des banques d images sur le clipart de Windows (image libre de droit) ou sur picasa, flickr, gettyimages (image avec droit). Il faut des images en format PNG plutôt que JPG. Il ne faut pas utiliser le format BMP car trop lourd. Le poids des images : une page est lourde quand elle atteint 200-300ko. Les images ne doivent pas avoir un grand volume. Pour les redimensionner, il faut travailler l image sur Paint ou Photofiltre et choisir «redimensionner» (~ 50%). Il faut faire attention au poids des photos dans les documents comme le Rapport annuel ou le journal interne. Il faut alléger toutes les photos avant de mettre en ligne sur internet ou intranet. Si l image est trop lourde, on peut la mettre au bout d un lien externe. 2.4.1 Insérer une image Pour ajouter une image, cliquer sur le symbole. Choisir pour ajouter une image sur le serveur Livelink. Sous nom : il faut toujours mettre : pmu-nomphoto et supprimer.jpg. Attention : il ne faut pas mettre d espace, d accent et de ponctuation. Sous Texte de remplacement : ce texte remplace l image dans les programmes pour les mal-voyants. Il est donc important de bien décrire l image en 2-3 mots.

/15 2.4.2 Editer une image Pour éditer une image, cliquer sur l icône suivante : On peut ainsi la rogner, la redimensionner, la pivoter, 2.4.3 Les propriétés d une image On peut obtenir des informations sur les dimensions d une image (bandeau ou teaser) auprès du CEMCAV ou IT Help Desk. On peut également obtenir les propriétés d une image (format, taille, dimension, ) en cliquant sur l icône suivante : > propriétés. 2.5 Les vidéos Les vidéos permettent de transmettre des informations compliquées, pour expliquer le déroulement d un examen en une séquence de 1-2 minutes. La création d une vidéo coûte environ CHF 1000.- et peut être réalisée par le CEMCAV. Les vidéos sont stockées sur un serveur streaming géré par le CEMCAV (M. Martelli). Toutes les vidéos doivent être sur ce serveur avant de pouvoir l installer sur internet. Il faut donc contacter M. Martelli pour avoir le lien streaming de la vidéo. Pour information, les vidéos streamées sont en Flash plug in. Elles ne fonctionnent pas encore sur les Ipad et Iphone. 2.5.1 Insérer une vidéo Il faut créer un nouveau lien et copier le lien streaming donné par M. Martelli. Il n est pas nécessaire de cliquer sur l option «nouvelle fenêtre sans nom». Ensuite, il faut compléter les propriétés de la manière suivante : Sous-type : vidéo dans la page Métadonnées : choisir la taille de la vidéo : 4/3 = anciennes vidéos ; 16/9 = vidéos récentes panoramiques. On peut ajouter un lien vers une vidéo depuis un espace. Il faut juste sélectionner l espace : On peut également faire une vidéo dans un teaser, mais le format serait trop petit. Une solution serait de créer un teaser avec un lien vers une page du CHUV ou autre, où il y a la vidéo. Par exemple : insérer image > rechercher > «Blausen» > chuv.teaser. A voir : le site DNC qui a mis ces vidéos dans les teasers. Différentes vidéos sont disponibles sur l atlas du CHUV : http://www.chuv.ch/chuv_home/patients-etfamilles/chuv-patients-services/chuv-patients-services-atlas-medical-alphabetique.htm. Pour rechercher une vidéo, il faut créer un lien et rechercher le nom de la vidéo. Les ELNK avec une adresse streaming indiquent que c est un lien vers une vidéo. 2.6 Les liens Il existe 3 types de liens : Les liens externes : d une page PMU vers une page CHUV ou autre site internet. Les liens internes : d une page PMU vers une autre page PMU.

/15 Les liens applicatifs : d une page PMU vers un formulaire (contact email, prise de rendezvous). Pour changer le texte du lien > éditeur de texte > sélectionner le texte qui représente le lien > clique droite > «éditer nom du lien». 2.6.1 Insérer un lien externe Sélectionner un bout de texte (ou image ou espace) qui représente le lien de destination (il sera souligné en rouge) > cliquer > coller le nom de l adresse externe > rechercher > créer > modifier le nom en ajoutant pmu-nom du lien et en supprimant l extension link > cliquer sur «nouvelle fenêtre sans nom». 2.6.2 Insérer un lien interne Sélectionner un bout de texte (ou image ou espace) qui représente le lien de destination (il sera souligné en rouge) > cliquer > insérer le nom de la page interne > rechercher > choisir un lien avec «PAGE» > OK (car il a trouvé la page interne, donc il n y a pas besoin de créer un nouveau lien). 2.6.3 Insérer un lien applicatif Sélectionner un bout de texte (ou image ou espace) qui représente le lien de destination (il sera souligné en rouge) > cliquer > coller l adresse email > rechercher > créer > modifier le nom > cliquer sur «nouvelle fenêtre sans nom» > choisir le sous-type «adresse courriel» Des formulaires de contact standard peuvent être facilement intégrés. Pour un nouveau type de formulaire, il faut faire une demande à IT HelpDesk, car cela ne peut pas être fait sur Livelink. 2.6.4 Les liens cassés Pour trouver les liens cassés (= liens qui ne fonctionnent plus), il faut demander à M. Yohann Toussaint un rapport. On ne peut pas le faire soi-même depuis Livelink.

/15 2.7 Les tableaux Les tableaux sont utilisés pour de la mise en forme. Les tableaux ne sont pas une table (= un objet et non de la mise en forme). 2.7.1 Insérer un tableau Cliquer sur l icône et choisir un style de tableau et un nombre de lignes/colonnes. Pour rappel, le texte définit la largeur des colonnes. Pour modifier un tableau déjà créé, utiliser le menu : Attention : les tableaux sont très peu malléables. Si on veut une image + un texte, il faut utiliser le format texte sur 2 colonnes avec «filet de séparation». Attention : si l image est plus grande que la colonne, elle sera coupée. Il faut donc l ajuster aux bonnes dimensions du tableau. 2.8 Les téléchargements 2.8.1 Insérer un document pdf Sélectionner un bout de texte > cliquer sur l icône > cliquer sur «nouvelle fenêtre sans nom». Donner un nom au document qui va rester à long terme (après on peut changer les Propriétés pour notifier les versions différentes) : on peut même nommer le document avec les initiales du service (ex. npr-agenda.pdf). Une fois le document créé, on peut modifier ses propriétés en cliquant sur l icône verte à gauche du lien. Pour afficher automatiquement une icône (word/pdf) et la taille du document à côté du lien, il faut choisir dans Sous-type l option «Liens avec icône/taille» :

/15 2.8.2 Mettre à jour un document pdf Cliquer sur le bouton vert > mettre à jour > chercher le nouveau document pdf dans sa base de données et refuser la création d une nouvelle version. 2.9 Les ancres Les ancres permettent de se rediriger vers un endroit précis dans le haut/bas d une longue page. 2.9.1 Insérer des ancres Marquer le terrain : d abord choisir l endroit où on veut aller sur la page et y placer une ancre en cliquant sur et nommer l ancre (minuscules, sans caractères spéciaux). Sélectionner le texte qui va être renvoyé vers le drapeau > cliquer sur nom. > rechercher > #ilnk# Il faut également penser à placer une ancre au point de départ pour y revenir rapidement. Il est possible de mettre le lien sur un texte (vers le bas, vers le haut), sur une image (par exemple une flèche vers le haut pour remonter). On peut trouver ces images sur clipart Windows. 2.10 La corbeille La corbeille correspond à celle de Livelink. On ne peut pas réutiliser le même nom pour le même objet dans Livelink. Si on supprime un document A et qu on recrée par la suite un document A, cela ne va pas fonctionner, car le premier document A se trouve toujours dans la corbeille. Il faut donc vider la corbeille. 2.10.1 Vider la corbeille Une fois la corbeille vidée, on ne peut plus rien récupérer. 2.10.2 Voir les éléments supprimés Dans contenu > contenu supprimé : permet de voir ce qu on a supprimé. On peut récupérer un document supprimé par erreur. Il faut le restaurer et il revient à la même place où il était. 2.11 Rechercher Pour rechercher n importe quel élément (image, document pdf, etc.), il faut utiliser l onglet Pour rechercher un document créé par mon login > rechercher > cocher créer par moi.