Design coloré pour faire écho au dynamisme des lycéens, la fusée décolle !

Ce site permet aux lycéens de s'inscrire à la manifestation, et aux organisateurs d'obtenir des statistiques sur les inscriptions (nombre de garçons/filles, nombre par lycée, accompagnants, etc.).

Sous le capot du site, toujours le moteur YACS que j'affectionne, boosté − c'est nouveau − à l'HTML5, JQUERY et CSS3, le trio gagnant des technologies du web.

Le site est simple : tout sur la page d'accueil, organisée "en accordéon". Un formulaire, qui mène à une page proposant de relayer le site vers les réseaux sociaux.

Les administrateurs ont un accès privé pour consulter les inscriptions, exporter la liste en fichier MS-Excel, et envoyer une newsletter aux inscrits.

Accueil avec premier soufflet déplié

Soufflets repliés

Formulaire d'inscription

Plan d'accès Google Map

Combien ça coûte un site Internet ? Cela dépend évidemment de la complexité du contenu présenté, des interactions spécifiques souhaitées avec les visiteurs, et de la qualité apportée au design. Ces variables d'ajustement peuvent faire varier le prix du simple au double.

Mais ce qu'il ne faut pas perdre de vue, c'est qu'un site Internet ne fonctionne pas tout seul une fois mis en ligne. Il faut l'ajuster après analyses régulières des statistiques de fréquentation et du positionnement en recherche des mots-clés.

Il ne suffit plus de mettre un site en ligne et d'attendre les visiteurs : la présence sur Internet demande d'alimenter régulièrement le contenu et souvent d'investir également les réseaux sociaux.

Je vous 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, et notamment de réaliser vous-même de l'ajout de contenu.

Tarifs

Je base mes tarifs sur un taux horaire de 60 € TTC, ceci pouvant être négocié pour des projets volumineux (+ 70 heures).

Création de sites Internet

Indicatif des tarifs généralement négociés :

• Site vitrine, galerie : 900 € à 1500 € ;
  
• Site d'actualités, événements, blog : 1300 € à 2500 € ;
  
• Site Intranet ou communautaire : 1500 € à 3000 € ;
  
• Site e-commerce : 2000 € à 3500 €.

Il faut ajouter à cela vos besoins en formation.

Suivi de site Internet (Webmastering)

Lorsque je réalise un site j'assure un accompagnement les 6 premiers mois suivant la mise en ligne. Ensuite je propose différents forfaits suivant la disponibilité demandée :

• Résolutions de petits soucis à distance : 200 €/an ;
  
• Mise en ligne des contenus, rapport régulier d'analyse : 120 €/mois ;
  
• Idem avec travail du référencement : 300 €/mois.

Développement web

Je suis en mesure de réaliser les développements spécifiques nécessaires pour mettre en oeuvre les fonctionnalités particulières de votre projet web.

Je vous propose un devis pour une prestation au forfait, le devis est payant s'il demande une profonde analyse, et un cahier des charges est bienvenu.

Devis

N'hésitez pas à mon contacter pour obtenir un devis !

Tel : 03.89.06.42.49
Mobile : 06.41.69.71.01
Mail : rair@cybermedium.info
Localisation : Mulhouse, sud Alsace

Je suis expert-intégrateur avec le CMS Y.A.C.S et membre associé du comité de pilotage de ce logiciel libre

Le site, initialement constitué de pages statiques, est refondu avec le CMS Yacs. Ce qui permet de :

• faciliter la maintenance et l'ajout de contenu ;
  
• faciliter la mise en ligne de galeries de photos ;
  
• augmenter le nombre de pages et la mise en avant de contenus pour le référencement.

Le nouveau design est basé sur une photo en fond d'écran qui changera au fil des saisons.

Accueil de nature-buissonniere.com

Ce n'est pas parce qu'on baigne dans l'informatique que l'on n'apprécie pas la nature. Au contraire, le vert est souvent salutaire !

Donc, profitant de mes derniers travaux sur le CMS YACS, et le thème Fullscreen, je vous ferai dorénavant profiter ici de belles photos en fond d'écran.

On commence par une série taïwano-nippone — réalisée par ma compagne Laurence Mellinger si ce n'est moi-même — durant un voyage en 2004.

youpi

J'ai trouvé cette solution sur css-tricks.com, qui propose d'ailleurs maintenant une solution toute simple en CSS3 (mais qui ne me permettrait pas de faire les transitions en mode diaporama).

Partie HTML, à mettre en fin de page, deux balises div et une table unicellulaire contenant l'image :

<div id="bg">
 <div>
  <table cellpadding="0" cellspacing="0">
   <tbody><tr><td>
    <img alt="" src="votreimage"http://www.cybermedium.info/>
   </td></tr></tbody>
  </table>
 </div>
</div>

Partie CSS (pour une image centrée) :

html,body {
    width:100%;height:100%;
    margin:0px;padding:0px;
}
#bg, #bg table, #bg td {
    height:100%;width:100%;
    overflow:hidden;
}
#bg {position: absolute;} /* or fixed */
#bg div {
    position:absolute;
    top:-50%;left:-50%;height:200%;width:200%;
}
#bg td {text-align:center;vertical-align:middle;}
#bg img {min-height:50%;min-width:50%;}

Il faut ensuite positionner le contenu de votre site en absolu par dessus la balise #bg, avec un z-index supérieur.

Notez qu'en utilisant YACS et le thème Fullscreen, vous aurez beaucoup d'autres fonctionnalités comme :

• attribuer un fond différent à une page du site ;
  
• attribuer un fond différent à une branche du site ;
  
• aligner les images au centre ou suivant une bordure ;
  
• attribuer une légende aux images ;
  
• faire défiler une série d'images en diaporama.

Aussi afin de pouvoir ranger facilement ses différentes activités dans son site Internet, nous avons opté pour la souplesse d'un classement transversal par étiquettes (ou "tags") et la navigation via un nuage de mots-clés.

Parallèlement au classement thématique les articles sont positionnés chronologiquement, et Laurence peut aussi créer des dossiers sur un sujet précis.

La gestion de contenu lui permet bien sûr d'alimenter facilement le site et d'avoir tantôt des pages de photos en galerie, tantôt des textes illustrés.

Le thème graphique affiche différentes images de fond en plein écran, suivant les pages consultées, L'alignement des paragraphes à la droite et la mise en valeur des lignes de texte contribuent à une présentation originale.

Page d'accueil

Agenda

Galerie

• création d'un nouveau logo pour représenter le logiciel et sa communauté ;
• relooking du site yacs.fr, en accord avec le nouveau logo, et en intégrant des remarques de la communauté sur l'ergonomie ;
• extension du script PHP générant les onglets de navigation, pour construire dynamiquement un menu horizontal déroulant ;
• fer de lance dans la nouvelle politique de gestion des sources employant le combiné git + github ;
  
• support régulier des usagers de la communauté.

C'est cependant une contribution mesurée, en adoptant un rythme d'endurance. Ma motivation principale est de faire évoluer mon outil de production tout en ramifiant mon réseau. Il s'agit de trouver un équilibre entre les développements dont j'ai besoin pour mes clients, les développements populaires à la communauté, les actions qui améliorent l'image du logiciel, et le temps de réalisation que toutes ces contributions demandent !

Néanmoins l'aventure du logiciel libre en vaut la chandelle : pour peu que l'on soit un contributeur régulier et de qualité — avec une pointe d'originalité — on ne tarde pas à se faire remarquer.

Logo officiel de YACS

Le 17 et 18 février se tenait à Paris/La Cantine un séminaire pour YACS. À cette occasion j'ai présenté un atelier sur la gestion des sources avec GIT.

Maintenant que j'ai rencontré en chair et en os les autres fers de lance de la communauté, j'ai officiellement accepté de devenir le cinquième associé de yacs.fr.

Gilles Elkaim, explorateur émérite, c'est installé au nord de la Finlande où il élève des races primitives de chiens de traineau, et propose aux aventuriers le goût du grand Nord.

Ce site est une refonte qui mise sur les photos exceptionnelles de Gilles. Le thème affiche en arrière-plan des images plein écran qui plongent le surfeur dans l'ambiance de la nature sauvage, ce, grâce au thème fullscreen que j'ai réalisé pour le CMS Yacs.

La navigation et les galeries photos sont plus accessibles qu'auparavant, et les pages bénéficient des dernières technologies d'optimisation de l'indexation pour le référencement.

Accueil

Une rubrique

Galerie

Diaporama

Que vous soyez débutant, ou que vous ayez besoin de révisions, un ensemble d'informations que l'on "connaît déjà" mais que paradoxalement on ne met pas forcément en application !

Bref un coup de fouet pour votre activité, détaillé et agréable à lire, qui aide à relever la tête du guidon.

Suivez ce lien si vous cherchez seulement l'astuce css/html pour afficher l'image de fond

Menu d'interactions

Déplié

Positionnement intelligent

Fonds multiples

• 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, cliquez 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 aux dimensions 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 variantes 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 connaître la variante de la page.

Menu en boutons 3D

Menu en boutons

Feuille de style CSS3

Titre et fil d'Ariane

Onglets, en-têtes et menu

Personnaliser et dériver ce thème

Idées d'utilisation

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

Mu 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.

GIT se prononce "guitte".

" Le magazine PC World nous apprend que « quand on lui a demandé pourquoi il avait appelé son logiciel "git", qui est à peu près l'équivalent de « connard » en argot anglais, Linus Torvalds a répondu « Je ne suis qu'un égocentrique, donc j'appelle tous mes projets d'après ma propre personne. D'abord Linux, puis Git. » " "

Pré-requis

GIT bases

Initializing working directory

Adding Files

testgit.html

<html>
<head>
    <title>Test pour GIT</title>
</head>
<body>
    <h1>/(bb|[^b]{2})/</h1>
        <div>
        <span>.-"""-.</span><span>/ _  _ \</span>
        <span>??  ](_' `_)[  ??</span><span>`-. N ,-'</span>
        <span>|===|</span><span>`---'</span>
    </div>
</body>
</html><

Commit Changes

Branching

modifs sur testgit.html et ajout style.css

<html>
<head>
    <title>Test pour GIT</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
    <h1>/(bb|[^b]{2})/</h1>
    <div>
        <span>.-"""-.</span><span>/ _  _ \</span>
        <span>??  ](_' `_)[  ??</span><span>`-. N ,-'</span>
        <span>|===|</span><span>`---'</span>
    </div>
</body>
</html>

h1 {
    text-align : center;
    color : firebrick;
}

div {
    margin : 40px
}

div span {
    display : block;
    text-align : center;
    font-family : monospace;
}

feuille de style style.css

En fonction de la branche active, GIT change dynamiquement le contenu de votre répertoire de travail.

Merging

modifs sur test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    <title>Test pour GIT</title>
</head>
<body>
    <h1>/(bb|[^b]{2})/</h1>
    <div>
        <span>.-"""-.</span><span>/ _  _ \</span>
        <span>??  ](_' `_)[  ??</span><span>`-. N ,-'</span>
        <span>|===|</span><span>`---'</span>
    </div>
</body>
</html>

Merging conflict

Upgrading a fork

Indexing a Yacs serveur

Branching to customize

listage des utilisateurs par nom

/**
     * list alphabetically users assigned to an anchor
     *
     * Only users matching following criteria are returned:
     * - user is visible (active='Y')
     * - user is restricted (active='R'), but surfer is a logged user
     * - user is restricted (active='N'), but surfer is an associate
     *
     * @param the target anchor
     * @param int the offset from the start of the list; usually, 0 or 1
     * @param int the number of items to display
     * @param string the list variant, if any
     * @param string an id to avoid, if any
     * @return NULL on error, else an ordered array with $url => ($prefix, $label, $suffix, $icon)
     *
     * @see categories/view.php
     */
    function &list_users_by_names_for_anchor($anchor, $offset=0, $count=10, $variant=NULL, $to_avoid=NULL) {
        global $context;

        // locate where we are
        if(!$variant)
            $variant = $anchor;

        // limit the scope of the request
        $where = "users.active='Y'";
        if(Surfer::is_logged())
            $where .= " OR users.active='R'";
        if(Surfer::is_associate())
            $where .= " OR users.active='N'";
        $where = '('.$where.')';

        // avoid this one
        if($to_avoid)
            $where .= " AND (users.id != '".SQL::escape($to_avoid)."')";

        // the list of users
        $query = "SELECT users.*    FROM ".SQL::table_name('members')." AS members"
            .", ".SQL::table_name('users')." AS users"
            ." WHERE (members.anchor LIKE '".SQL::escape($anchor)."')"
            ."    AND (members.member_type LIKE 'user')"
            ."    AND (users.id = members.member_id)"
            ."    AND ".$where
            ." ORDER BY users.full_name, users.nick_name LIMIT ".$offset.','.$count;

        // use existing listing facility
        $output =& Users::list_selected(SQL::query($query), $variant);
        return $output;
    }

implémentation option users_by_name

// list items by date (default) or by title (option 'users_by_title')
        $offset = ($zoom_index - 1) * USERS_LIST_SIZE;
        $items =& Members::list_users_by_posts_for_anchor('category:'.$item['id'], $offset, USERS_LIST_SIZE, 'watch');

par :

// list items by date (default) or by name (option 'users_by_name')
        $offset = ($zoom_index - 1) * USERS_LIST_SIZE;
        if(preg_match('/\busers_by_name\b/i', $item['options']))
            $items =& Members::list_users_by_names_for_anchor('category:'.$item['id'], $offset, USERS_LIST_SIZE, 'watch');
        else
            $items =& Members::list_users_by_posts_for_anchor('category:'.$item['id'], $offset, USERS_LIST_SIZE, 'watch');

Vous pouvez copier votre répertoire de travail, toutes les informations de GIT seront également dupliquées puisqu'elles sont dans le répertoire .git, et pourront êtres manipulées de manière distincte de l'original.

Un intérêt est de placer votre répertoire de travail pour le faire également tourner sous XAMPP par exemple. Dans ce cas vous pouvez avoir besoin d'éliminer certains fichiers de l'indexation GIT, moyennant la déclaration d'un fichier .gitignore.

Rebasing to upgrade

conflict in view.php

<<<<<<< HEAD:categories/view.php
        $items =& Members::list_users_by_posts_for_anchor('category:'.$item['id'], $offset, USERS_LIST_SIZE, $layout);
===
        if(preg_match('/\busers_by_name\b/i', $item['options']))
            $items =& Members::list_users_by_names_for_anchor('category:'.$item['id'], $offset, USERS_LIST_SIZE, 'watch');
        else
            $items =& Members::list_users_by_posts_for_anchor('category:'.$item['id'], $offset, USERS_LIST_SIZE, 'watch');
>>>>>>> added alpha order option for listing users on catergories:categories/view.php

Conclusion