Skip to main content Help Control Panel

Cybermedium

webmastering

Art and science of webmastering

En tant que webmaster free-lance, je conçois et réalise des sites Internet pour des tiers.

Les pieds sur terre, la tête dans les étoiles, je suis autant à l'aise dans les rouages de la programmation que la composition graphique.

Je propose des sites propulsés par un logiciel de type *CMS* —en français "gestion de contenu"— qui permet de déployer rapidement un site puissant aux fonctions multiples et très abouties. Je suis expert-intégrateur avec le CMS Y.A.C.S et membre du comité de pilotage de ce logiciel libre.

Voici quelques exemples d'utilisations où je capitalise de l'experience :

Click to slide Portail culturel & évènementiel

Des dates, des calendriers, des activités : un site évènementiel doit posséder un design attrayant, une ergonomie rapide même si l'arborescence est dense, une gestion efficiente et accessible par différents collaborateurs.

Click to slide Extranet d'entreprise ou communautaire
Click to slide Site pour Artistes



pour voir plus de réalisations, consultez mon portfolio web

on Jul. 18

Fullscreen : vos images de fond en plein écran

Materials ~ Webdesign ~ Yacs

Un thème original pour YACS
accueilmedium.jpgphoto : Hong Kong sky lights, Laurence Mellinger, 2004.

C'est à partir d'un tutoriel donné par le concepteur web Guillaume Normand, dans le hors-serie n°5 de la revue Webdesign, que j'ai intégré ce thème pour YACS, en l'enrichissant davantage et surtout en utilisant la puissance d'un CMS pour mettre en œuvre une utilisation intéressante d'images de fond.

C'est là le principal objet de ce thème : pouvoir afficher une image de fond, ajustée en plein écran. En second objet, comme tous les blocs sont positionnés en absolu, il n'y a pas de défilement de la page. (C'est le main_panel seulement qui fait défiler son contenu.) La conséquence est que les menus et les outils sont visibles et accessibles en permanence.


menu d'interactionsMenu d'interactions dépliéDépliéAfin d'optimiser davantage la place, et ne pas masquer l'image de fond. la colonne extra est affichée de manière innovante à l'horizontale en haut de page, et se déplie au survol de la souris.


Bien sûr ces positionnements ont une limite de place disponible, surtout en petite résolution, et ne conviendront pas sur un site qui demande d'afficher beaucoup d'informations (boites de navigation, etc.).

Pour une consultation depuis un mobile, Yacs utilise un autre canevas.

Positionnement intelligent

L'affichage de l'image de fond n'est pas qu'une simple déformation de l'image aux dimensions de la fenêtre du navigateur. Les proportions de l'image sont préservées tandis que l'image est centrée. Selon le différentiel entre les proportions de l'image et de la fenêtre du navigateur, l'image est rognée verticalement ou horizontalement. Le rendu est obtenu par les balises HTML et les règles CSS.

Fonds multiples

L'image de fond par défaut est images/background.jpg dans le répertoire du thème. Là ou cela devient intéressant c'est que le thème permet d'utiliser très facilement des backgrounds différents pour chaque page, attribués en cascade sur l'arborescence, et sans intervenir dans le code PHP ! Deux méthodes sont disponibles simultanément :
  • méthode 1: définir au niveau d'une section une option de variante de thème.
    Par exemple "variant_montheme".
    Uploadez ensuite par FTP une image nommée background_montheme dans le répertoire /images du thème.
    Le thème va afficher automatiquement l'image en fond pour la section et tous ces descendants.
  • méthode 2: fournir au niveau d'une page une "image de page".
    L'image de page sera utilisée pour le fond, en priorité d'après la méthode 1.
    Dans le cadre d'une section le fond est cascadé sur un niveau inférieur seulement.
* Notez que la méthode 1 affiche le fond lors de l'édition des pages, ce qui n'est pas le cas de la méthode 2 (le fond par défaut est utilisé à la place, ou une variante définie aux niveaux supérieurs de la page).
* Pour la méthode 2, attention au redimensionnement des images par YACS. Voici la procédure la plus rapide pour attribuer un fond sur un serveur YACS Martin :
  • allez sur la page concernée, cliquer sur "modifier la page" dans outils (en haut) ;
  • cliquez sur l'onglet "média" ;
  • cliquez sur le bouton "ajouter" pour la ligne "image de page" ;
  • donnez votre fichier, l'image est chargée, mais à cet instant elle est retaillée au dimension d'une vignette !
  • cliquez sur le lien "ajouter une autre image" en dessous du message de notification ;
  • redonnez le même fichier ;
  • dans les options, si vous êtes de niveau d'accès associé, cochez "ne pas redimensionner l'image". Si vous êtes simple membre, vous tombez sous le coup des limites pour grandes images, paramètres du serveur ;
  • l'image de page est maintenant aux bonnes dimensions, retournez à la page principale pour voir le résultat.
* Concernant la méthode 1 avec variante de thème, il faut savoir que YACS génère déjà des marquages de variantes selon les pages affichées. Par exemple "users", "categories, "control", "sections", "articles", etc.
En fournissant par exemple une image "background_users.jpg", celle-ci s'affichera automatiquement pour l'index des utilisateurs, les profils, la page d'authentification.

Consultez dans le source HTML l'identifiant de la balise body pour connaitre la variante de la page.

Menu en boutons 3D

Menu en boutonsMenu en boutonsLes règles de style transforment les liens de la colonne latérale en joli menu à boutons (pour les navigateurs compatibles CSS3). Vous pouvez facilement changer les couleurs via la feuille de style.

Les boutons dans le corps de page (barre de commande, boutons à la demande) auront le même rendu.

Feuille de style CSS3

Titre et fil d'ArianeTitre et fil d'Ariane Onglets, en-têtes et menuOnglets, en-têtes et menu Les effets de style sont obtenus par CSS3 et donc non implémentés par tous les navigateurs. Cependant c'est une solution d'avenir, qui simplifie fortement l'intégration.

@font-face, box-shadow, text-shadow, border-radius.

Personnaliser et dériver ce thème

1279458520-gt2-recycle-empty-green.png Le CSS est organisé de manière à isoler ce qui relève de la décoration ou du positionnement délicat des blocs.

Le thème est livré ici avec une ambiance quelque peu technoïde, mais vous pouvez rapidement changer ses couleurs en éditant la première partie du CSS.

Les scripts sont entièrement commentés.

Idées d'utilisation

!! À partir de ce thème, vous pouvez élaborer une galerie d'images en plein écran. De nouvelles interactions pourront aussi être mises en oeuvre après l'intégration de jQuery.

Spécifications

  • En-tête, colonne latérale, corps de page, pied de page, barre d'interactions.
  • Positionnement absolu, blocs toujours visibles
  • 2 colonnes + une barre d'interactions dépliable au survol
  • Menu en boutons 3D
  • Onglets de navigation.
  • Fil d'Ariane
  • Validité XHTML 1.1
  • Feuille de style CSS3
  • Police embarquée
  • Rendu maximum avec le navigateur Firefox 3.5+
  • Scripts très commentés, basés sur le thème Mu


on June 25

Mu : un thème minimaliste pour YACS

Materials ~ Webdesign ~ Yacs

thème très léger !

Mu theme for yacsMu theme for yacs thème graphique MU
Mu est le symbole du vide dans la philosphie zen... mais le vide est "plein", et engendre la création !

Plus concrètement j'avais un besoin personnel d'avoir un thème épuré, notamment des nombreuses règles de mise en page des feuilles de style CSS, très fournies dans les thèmes de référence.

Un thème qui ne présente quasiment pas de parti pris, qui permette de bien visualiser les blocs HTML produits par le moteur YACS et aussi les choix induits par la feuille de style interne yacs.css.

C'est donc moins un thème graphique destiné à l'utilisation en production, que pour en démarrer un nouveau, ou bien pour développer de nouvelles fonctionnalités au niveau des scripts du noyau, et ce, sans rencontrer d'interférence relative à des choix spécifiques de mise en page. J'ai renforcé les explications dans les commentaires du code.


Ce que comporte ce thème :

  • une feuille de style minimaliste de 2 ko, juste pour positionner et identifier les blocs ;
  • un affichage sur 3 colonnes + en-tête et pied de page ;
  • la gestion des onglets de Yacs (remaniée) ;
  • le fil d'Ariane ;
  • un favicon alternatif ;
  • la mise en page spécifique pour l'impression ;
  • la validité XHTML 1.1.


Capture.jpg

on June 16

Réalité augmentée ou imagination diminuée ?

Cybermedium attitude

Il y a quelque temps déjà je tombais sur un billet traitant de "réalité augmentée" (augmented reality), sujet à la mode.

Le principe est généralement le suivant : des informations "virtuelles" se superposent à ce que nous voyons dans notre environnement, au moyen le plus souvent de lunettes semi-transparentes qui servent d'écran et dans lesquelles "flotte" l'information par dessus nos objets du quotidien.

Cela donne une "réalité augmentée" dans le sens où l'on peut recevoir des informations complémentaires, invisibles normalement, et tout cela en temps réel.

la RA pour jouer



projet SCOPEProjet SCOPE Ce qui m'a frappé dans cet article c'est le sujet en exemple : des enfants qui jouent, plus précisément, deux garçons qui s'inventent une bataille avec leurs legos et autres jouets. Les lunettes les assistent dans leurs jeux pour calculer la trajectoire des tirs, compter les points, etc. (Détails dans projet SCOPE par Frantz Lasorne.) Je m'étonne : comme si des enfants avaient besoin d'un système pour créer leur univers ! Voilà, je trouve un champ d'application mal choisi.


Virtual Earth

Une autre application de "réalité augmentée", un système à la "google earth" ( Virtual Earth, Microsoft), propose une superposition inversée : le "réel" dans le "cyber". Ainsi le système affiche en incrustation sur la représentation 3D des images ou vidéos, provenant de réseaux sociaux (Flickr...) ou même en temps réel (exemples en seconde partie de vidéo).


Sous titres dispo mais pas en français


Mais il y a un danger : le système n'affichera que les données provenant d'institutions partenaires, ayant conclu un accord commercial. Il faudra faire attention de ne pas déduire que "si une chose n'est pas dans la cyber-planète, c'est qu'elle n'existe pas !".

Réalité biaisée ?

Finalement, c'est le terme "réalité augmentée" en lui-même qui me gêne. Comment peut-on "augmenter" la réalité alors que toute une partie nous échappe encore ? Et n'existe-t-il pas plutôt une "réalité biaisée" si tout le monde voit la réalité "augmentée" de la même façon ? C'est comme les médias, mais en plus puissant car cela peut potentiellement imprégner nos moindres gestes.

Imaginons que l'on se balade dans la rue ou dans la nature. Via un système optique, la réalité augmentée nous informerait sur ce que nous regardons :

"Restaurant *sélection Guide du routard* à 100m, tournez à droite.[voir le menu][réserver]"
"Ceci est un érable à sucre (Acer saccharum), on peut en faire du sirop.[recette][commandez près de chez vous]"
"Alice a tagué votre mur ! [voir]"
"Vous ne pouvez pas manger ce champignon"
"[publicité]"
"Le feu est rouge, attendez."
bionic

Pensons-y

Plus l'homme s'entoure d'objets-béquilles, plus ses capacités propres diminuent peu à peu. S'il est alors projeté dans un environnement sans support externe, il est perdu. Par exemple sans GPS, on perd du temps. Avec un GPS, on perd le sens de l'orientation. A méditer.

 

Artiste Association Bijoux Biographie Blog CMS Comédien Entreprise Extranet Forum Galerie Gallery2 Git Joomla Peintre PhpBB Sculpteur Tableaux Webdesign Yacs

webmastering
  • Conduite et réalisation de projets web
  • Expert Intégrateur YACS
  • Intégrateur pour d'autres CMS (Joomla, phpBB3)
  • Webdesign intégration XHTML et CSS
  • Développement PHP et JavaScript
  • Respect des normes W3C
  • Optimisation pour le référencement
  • Hébergement et administration de sites

 

Référencement
Référencé sur...
Fils d'information

Pages récentes
Fils d'information

Powered by Yacs