fr32c blog

Aller au contenu | Aller au menu | Aller à la recherche

vendredi 7 février 2014

Adobe Muse CC : Site multilingue et widgets sociaux — Mucow et Mulib pour gagner en productivité

fr_308.jpg

Muse s'étoffe et vous permet de concevoir et de publier des sites Internet de façon toujours plus efficace. Dans cette formation, Franck Payen vous présente les nouvelles fonctions disponibles dans la version CC ainsi que quelques astuces pour la réalisation d'un site multilingue. Découvrez alors les nouveaux effets de défilement, les bibliothèques Mulib, les widgets sociaux et les Mucow, qui n’auront plus de secret pour vous !

Cliquez pour voir l'atelier Muse CC chez video2brain

Et, toujours disponibles, les précédents sujets :

Pour mémoire l'ensemble des sujets video2brain proposés est disponible dans la colonne à votre droite (là où se trouvent les icônes en couleur), et les détails sont sur la page pro, de l'autre côté.

jeudi 6 février 2014

Tableaux dans Muse

Très régulièrement, on reparle du manque de tableaux dans Muse. Et souvent les utilisateurs ne voient pas exactement les difficultés soulevées :

  • l'affichage d'un tableau (Muse se débrouille pour que la plus grande partie des sites reste visible, de façon cohérente, sur la majorité des navigateurs) ;
  • l'interface pour générer ce tableau, manipuler les textes, colonnes, lignes, éventuellement faire des calculs ;
  • le besoin d'importer les données (ouverture de fichier, copier/coller, depuis quel format initial…)

Bref, tout un tas de raisons qui font que c'est plus compliqué que ça n'en a l'air, mais il ne faut jamais désespérer.

Et comme quelqu'un sur le forum demandait une solution de contournement, je me suis dit que ça pourrait servir.

  1. Créez un document Google Spreadsheet (les tableaux dans Google Drive)
  2. Stylez-le au plus proche (possible) de vos désirs
  3. Supprimez les colonnes/lignes excédentaires
  4. Dans Fichier > Télécharger au format > Page web (.html, feuille active)
  5. Affichez le code source (depuis Chrome : cmd-alt-U)
  6. Cette page est un peu longue, mais il faut au moins ça pour faire un tableau (et encore, l'exemple donné est simple… C'est sans doute pour ça qu'on les attend toujours en natif)
  7. Sélectionner tout entre les balises <body> </body> (ici, ça démarre avec une balise <style> sur la première ligne)
  8. Copier

Mu-Go-Spreadsheet.png

Deuxième étape, dans Muse :

  1. dans Objet > Insérer du code HTML…
  2. Coller le code (ça va des balises <style> à <table>)

Mu-Go-SpreadsheetPage.png

Troisième étape, si nécessaire, utiliser Brackets ou Edge Code, ou n'importe quel éditeur web simple pour améliorer la sortie.

Voilà, ce n'est pas forcément la solution la plus propre et la plus rapide, mais elle a le mérite d'être fonctionnelle.

mardi 12 novembre 2013

Nouvelles formations chez Video2Brain Muse et Edge !

Comme promis, c'est arrivé pour la formation Muse et pour la formation Edge, c'est pour très bientôt, et c'est pour ça qu'il y a la petite icône rouge à retrouver sur ma page video2brain.

Les sujets traîtés concernent Adobe Muse (sites web moderne sans mettre les mains dans le code) et Adobe Edge Animate (Animation et interactivité html5), sur des cas pratiques de réalisation d'un site internet de A à Z et de petits éléments interactifs que vous pourrez intégrer sur vos pages. Plus de détails ci-dessous.

Atelier : Site internet pour mobiles et bureau avec Muse CC

fr_500.jpg Adobe Muse CC, idéal pour créer des sites web graphiques, créatifs et équilibrés sans rentrer dans le code. Cet atelier vous permettra de mettre en place textes et images, une longue page parallaxe, les versions téléphone et tablette en mode adaptatif, et publier le tout sur Business Catalyst via votre abonnement Creative Cloud.

Cliquez pour voir l'atelier Muse CC chez video2brain

Atelier pratique : petits projets interactifs via Adobe Edge Animate

fr_541-1.jpg Après avoir fait le tour des fonctions indispensables dans Edge Animate et introduit la pratique du code et de l'interactivité pour aller plus loin nous revenons ici sur plusieurs petits cas pratiques qui nous permettront de : réaliser des bannières animées, travailler sur une frise interactive, créer une infographie animée tout en (re-)découvrant les nouvelles fonctions d'Animate.

Cliquez pour voir l'atelier Animate chez video2brain

Bien entendu, si vous ne les avez pas déjà vues (ou si vous souhaitez réviser), il est toujours temps de voir les précédents sujets :

Pour mémoire l'ensemble des sujets video2brain proposés est disponible dans la colonne à votre droite (là où se trouvent les icônes en couleur), et les détails sont sur la page pro, de l'autre côté.

jeudi 12 septembre 2013

Muse + Inline SVG

Le SVG, c'est bien, à condition d'être sur un navigateur récent (exit les IE 6-7-8 et Android 2.3…). Mais il existe des solutions pour retomber sur du PNG.

Ça marche, et je le présente ici. Je complèterai prochainement avec plus de détails.

— Edit du 15 septembre —

Le SVG, dans Muse, c'est possible, et dès maintenant, avec un petit bonus.

Petit rappel, pour ceusses qu'auraient pas suivi. Le SVG c'est ce format vectoriel extrêmement pratique sur le web depuis qu'on s'est rendu compte que les écrans n'étaient pas seulement à 72 dpi, ni même à 96 dpi, mais parfois à 400 dpi (retina, tout ça tout ça).

Pour le fabriquer, rien de plus simple, vous passez dans illustrator, et vous enregistrez en .svg (voir à ce sujet l'excellent article détaillé de Michaël Chaize). Et puis vous le placez sur votre page et tous les navigateurs modernes afficheront exactement vos jolis vecteurs. Par navigateurs modernes, j'entends Chrome, Firefox, Safari, Opera, Android et même Internet Explorer… à partir de la version 9. D'ailleurs, Android, c'est à partir de la version 3. Exit les vieux téléphones coincés en 2.x soit près de 30% à l'heure où j'écris ces lignes. IE6-7-8, pareil, bien sûr, la joie si votre audience est en entreprise coincée sur winXP.

Je cherchais donc une solution miracle, et je suis tombé sur le fallback en PNG, qui permet de retomber sur un visuel PNG, donc non interactif, mais au moins présent, pour les navigateurs qui ne lisent pas le svg. Les explications étaient détaillées chez David Ensinger, je compile donc tout ça pour la postérité.

SVG inline avec Fallback PNG

Premier point important, pour que cette méthode fonctionne, il faut que le svg soit inline, c'est à dire qu'il fasse partie du code html de la page, et non pas <object> <embed> ou <img>, j'ai testé pour vous, ça marche beaucoup moins bien.

Niveau syntaxe, ce n'est pas bien compliqué et ça repose sur 2 balises svg :

<foreignObject> qui sera capable d'injecter au sein du svg des éléments qui n'en font pas partie, notamment du code html. C'est dans cette balise qu'on placera notre png, sous une simple <img src="" />

<switch> va permettre au svg de décider s'il affiche un groupe (<g>, en svg) ou l'autre (<foreignObject>, en html). Or, la magie qui s'opère avec un svg inline, c'est que si le navigateur sait le lire, il se débrouille avec, mais si le navigateur ne connait pas la balise svg (IE 6-7-8, Android 2.x), il ignore tout le reste… sauf le html à l'intérieur !

Et pour le contenu à adapter

data:image/png;base64 nous sommes en mode inline, il faut que notre contenu soit présent dans le svg pour limiter les appels à une ressource extérieure (et les risques liés aux répertoires, déplacements de fichiers…) pour cela, le visuel n'est pas lié, mais incorporé et traduit en base64.

Précisions pour l'usage via Illustrator : lorsque pour gagner du temps vous placez votre png directement depuis Ai (par exemple en réalisant un export pour le web, puis importation, ou en utilisant la pixellisation puis décomposition de l'aspect), il vous faudra à l'export demander d'incorporer les images. Ai vous convertira les visuels.

<img src="" /> Petit point à noter : Illustrator vous enregistre un fichier .svg, c'est bien, mais quand il met une image dedans, il le fait pour du svg, il ne sait pas encore traiter les balises qu'on a vu avant. Et pour intégrer une image à un svg, on n'utilise pas <img src="…" /> mais <img xlink:href="…" /> Du coup, vous devrez remplacer l'une par l'autre pour que ça fonctionne en entier.

Ça marche dans Muse !

Ça c'est le point le plus important pour vous, si vous êtes arrivés jusque là dans l'article (remarque, vous pourriez très bien vous servir de ça hors Muse, vous auriez déjà gagné la compatibilité IE 6-7-8 et Android 2.x). Mais surtout, une fois que vous avez lu tout ça, le plus dur est fait.

Il ne vous reste plus qu'à coller toute la partie SVG de votre fichier directement dans un objet HTML de Muse et c'est tout ! La preuve, c'en est presque magique. Et vu que les pages de Muse ne sont pas générées à la volée, mais bien par vous, vous restez sur du inline. Certes, un peu plus contraignant que de la vraie image jointe, mais combien plus pratique pour poser les éléments sur la page !

Et comme je suis quelqu'un de fondamentalement honnête, je vous livre quand même une limitation : les dimensions de votre objet SVG devront être modifiées à la main.

En tous cas pour de la jolie interactivité fine, ça redonne espoir.

Bonne lecture, et n'hésitez pas à commenter avec vos réalisations !

PS : Quelques liens pour s'entraîner avec le fichier Muse, le fichier svg (généré dans Ai, modifié dans Brackets). Et comme je suis de bonne composition ce jour, le tout zippé.

samedi 4 mai 2013

Aubenas, nouvel'R

Je rentre d'Ardèche où je suis allé roder le programme de formation sur Adobe Muse avec l'équipe de nouvel'R, une petite agence pleine de gens sympathiques, qui en connaissent un rayon sur la partie print, édition, identité, packaging et web.

Panorama-Aubenas-700.jpg

Tout cela a eu lieu dans une ambiance fort détendue. Stéphane, Jérôme, Bruno et Thierry connaissent bien leur métier, mais aussi leur région, fort belle comme en témoigne la vue de la fenêtre de l'agence.

On a donc parlé rivière, montagne, châtaignes, Clinton (le vin, pas le président ni celui du p-funk), cinéma à Aubenas, et on y a très bien mangé, notamment un dernier repas au Salon d'Ann-Sophie.

Brioude-Aubenas-IMAG4087.jpg

lundi 22 avril 2013

Utiliser des fontes japonaises WebSafe dans Muse

Pour la création de sites internet, Muse vous propose d'utiliser des polices websafe ou d'intégrer des polices Edge Webfonts. L'utilisation de polices système les convertit en images.

Confronté au besoin de saisir du texte en japonais, je ne me voyais pas me résoudre à utiliser les polices websafe présentes, et pour cause, quelque soit le choix effectué, j'obtenais, pour les katakana/hiragana/kanji la même typo, sérif, beaucoup trop fine pour l'usage qui m'intéressait, et surtout déconnectée de mon choix de sans-sérif de départ.

Mu-JType-Fr-J.png

Or, la bandelette de menu du bas en atteste, j'ai trouvé une astuce pour avoir du texte officiellement choisi parmi les polices web-safe… japonaise.

C'est donc possible, même si indirect : voir ci-dessous pour la méthode.

Lire la suite...

vendredi 1 mars 2013

Choisir la langue de Muse

Les nouveaux logiciels Adobe sont multilingues, ça vous permet à partir d'une seule installation (et souvent après un redémarrage de l'appli) d'en changer la langue. Mais si vous êtes habitués à ne travailler qu'en français, me direz-vous, à quoi bon changer, puisque c'est une préférence à lors de la première installation.

En fait, je vois 1 cas bien précis et très récurrent du besoin de changer de langue : le dépannage.

Edit du 22 avril 2013

Dans le cadre de la réalisation d'un site bilingue Français/Japonais, j'ai eu à utiliser des polices web-safe japonaise… et là aussi, changement de langue obligatoire. Plus de détails dans l'article qui y est consacré.

Lire la suite...

mardi 23 octobre 2012

Muse - Publier son site internet

Mu-Fichier-Exports.pngUne fois votre site internet réalisé grâce à Adobe Muse, il vous faut le publier.

3 options s'offrent alors à vous :

  • Publier et héberger directement via Business Catalyst et le Creative Cloud;
  • Exporter l'ensemble des fichiers en HTML pour les publier manuellement;
  • Télécharger vers un FTP.

Quelques explications supplémentaires ci-dessous.

Lire la suite...

mardi 5 juin 2012

Muse et Web Design sans code

Lors du eSéminaire Adobe consacré à Muse, je vous ai fait passer le lien vers cette page, avec la liste des liens abordés durant l'heure.

Quelques liens pour me présenter :

Mon Delicious (Franck Payen / fr32c) ou celui de Stéphane Baril (Une partie des liens mentionnés durant ce e-séminaire, plus d'autres) Me suivre sur Twitter (et avoir des actualités sur ce sujet et d’autres) e-séminaires (pour vous inscrire aux sujets suivants) Mon blog Pro (Spécifiquement l’article où je présente les applications et la formation video2brain à venir)

Découvrir Muse (et se former) :

Muse (La page principale sur le site Adobe, et en Français) Le Creative Cloud Adobe (L’abonnement pour installer des applications, partager ses fichiers, et aussi bénéficier de TypeKit et Business Catalyst) Adobe KB (La base de connaissance [Knowledge Base] avec des tas d'exemples, de tutoriels… en anglais.) Katie's Cafe (à la fois démonstration d'un petit site vitrine et tutoriel des fonctions) Kevin's Koffee Kart (Pareil que pour Katie, plein de détails, d'astuces, et les fichiers de base pour les exemples [À voir le site AdobeKB]) La présentation d'introduction chez video2brain (Découverte, prise en main pour les abonnés) La formation complète sur Muse chez video2brain (prise en main complète et efficace, liens vers le site…) Adobe TV, spécial Muse (avec tous les éléments pour démarrer et aborder l'outil), Google Translate (pour les textes)Les forums de la communauté (Questions/Réponses, trucs et astuces, échanges avec les utilisateurs et les experts)

mardi 15 mai 2012

Adobe Muse 1.0

Muse est enfin disponible en version 1.0, et la formation video2brain réalisée sur le sujet aussi, depuis le 21 mai : . J'y explique Muse, la manière de concevoir un site, les liens avec des applis connues comme inDesign, les trucs et astuces, en détail, sur le fonctionnement. Bref, comment gagner du temps et être efficace sur le sujet.

Lire la suite...

vendredi 6 avril 2012

Edge et Muse

''Note pour plus tard'' : c'est pas bien compliqué de coller une animation Edge dans Muse, mais faut juste pas s'attendre à voir du rendu en direct comme pour les Google Maps.

Ah, et faut aussi bien connaître sa hiérarchie de dossiers.

Donc, par exemple, dans mon dossier MuseExport (là où Muse met tout son site), j'irai poser mon dossier EdgeAnim, dans lequel je pourrai cibler Animation.html

Y'aura plus qu'à mettre une taille, virer les bords, et zou.

Si je laisse ça en wiki, c'est très lisible, si je place en html, vous allez juste voir l'anim, pas le code :)

<iframe src="EdgeAnim/Animation.html" width="600px" height="200px" frameborder="0" scrolling="no"> </iframe>

dimanche 23 octobre 2011

Muse + Edge (non, je ne parle pas de musique avec U2)

Le gros avantage avec les formations que je donne, c'est qu'en général, on me pose des questions que je ne m'étais pas posé avant, et qu'en échangeant, on finit par trouver des solutions.

Parfois, on a le temps de faire le tour complet d'un logiciel ensemble, parfois, on n'a le temps que d'effleurer, et ça suffit pour la base du travail. Après tout, je ne programme pas (encore) des robots, je fournis des outils à des graphistes et des designers pour qu'ils puissent créer plus vite, mieux, en adaptant leurs contraintes.

Prenons par exemple Muse et Edge. À l'heure où j'écris ces lignes, les deux outils sont en béta, pas encore finis, pas encore rodés, quelques bugs qui traînent, mais un bon aperçu des technologies disponibles.

Donc, Muse, c'est une appli pour réaliser des sites internet, en html5/css, avec du javascript partout, développé par des membres de l'équipe d'inDesign, ce qui fait que les graphistes (même print) arrivent à s'en servir, ne sont pas perdus (Place loader, repères commentés, etc.). Un (gros) défaut, le code, même s'il a été amélioré sur la dernière version, n'est pas forcément assez organisé pour les moteurs de recherche et autre (pas assez "sémantique", trop de divs, etc), et surtout, surtout, en largeur fixe. Comme aux débuts du web. Quand on supposait que tous les écrans faisaient 800x600 pixels, moins les menus, tout ça. Et puis en fait 1024x768, et puis en fait, 1280... bref, du fixe, je code pour une taille, et les autres scrollent ou ont une petite fenêtre perdue dans leur navigateur. Et à l'heure des smartphones, des tablettes, de la navigation à la souris, au doigt, c'est un chouya problématique cette taille fixe et ces éléments fixes...

Et à coté, il y a Edge, l'outil d'animation, basé, non plus sur la timeline de Flash, mais plutôt sur ce qu'on trouve chez After Effects, de l'anim à la seconde plutôt qu'à l'image. Et le tout sur des objets internet, html5, css, js (jquery), à base d'images en png, jpg, svg, textes sélectionnables, joli, tout en couleur, efficace.

Or, comme je forme sur la Digital Publishing Suite, et qu'une des problématiques récurrentes est de réussir à faire de jolies animations, on en revient souvent à la problématique html5/css/js.

Du coup, un outil web, en largeur fixe, ça me choque pas tant que ça, pour placer le tout, ça marche bien. Et si je peux animer tout ça dans la foulée, alors c'est parfait. Ce que je montrais l'autre jour chez Trebbe.com, je crée ma page/élément sur Muse, j'importe dans Edge, je rajoute de l'animation, et c'est super.

Sauf qu'à l'export, rien, nada, tout est figé que c'en est triste.

Et c'est là que j'ai apprécié de bosser avec Bertrand, Manu, Delphine et Sophie. Parce que dans cette toute petite agence, tout le monde est prêt à avancer pour améliorer sa manière de produire les documents (pour dire, quand je les ai quitté, ils allaient renoncer aux styles de caractère et leur préférer les styles de paragraphes, quand même). Et surtout, Manu a pris 2 minutes, pour regarder le code généré par Muse, puis remélangé par Edge pour trouver qu'en effet, Muse appelait un jQuery 1.4, après que Edge appelle un jQuery 1.6 Et du coup désactive la version plus récente. Ballot, il suffit donc de supprimer les 2 lignes d'appel au script jQuery 1.4 et j'anime mon site Muse avec Edge, y'a plus qu'à importer en tant que contenu web dans inDesign et l'Overlay Creator.

Merci Manu !