Le blog de Philippe Poisse - Web2024-03-28T22:26:21+01:00Philippe Poisseurn:md5:461e3511a43adbbb7d3a84a8af2d4212DotclearProjet 2019 : de Dotclear à Drupal – épisode 1urn:md5:961fe712ebf257bc6693cd173ea30d872019-02-26T15:50:00+01:002019-02-26T16:02:04+01:00Philippe PoisseWebDotclearDrupal<p>Depuis quelques années je gère le site eixerit.info. Ce blog tourne grâce à Dotclear.<br />
Même si j’aime beaucoup ce CMS, il est limité et la maintenance n’est pas si aisée que ça. J’ai donc décidé de tester autre chose.<br />
Plutôt que Wordpress, que j’utilise déjà pour d’autres sites, j’ai choisi Drupal 8.<br />
C’est l’occasion d’apprendre et de progresser.</p> <div><img src="http://blog.philippe-poisse.eu/public/Drupal/.drupal_8_logo_RGB_72_s.jpg" /> <img alt="Dotclear 2" src="https://dotclear.org/affiliates/w-logo.png" /></div>
<h2>Objectifs</h2>
<p>Outre le fait de changer de CMS et d’apprendre quelque chose à priori intéressant, le but est aussi de proposer un retour d’expérience sur cette migration.<br />
Je ne pense pas que cela concernera directement beaucoup de gens, Dotclear n’est pas tellement utilisé, mais la diffusion de la connaissance doit primer sur le reste.<br />
Donc j’essayerai chaque mois d’ici la fin de l’année 2019 de faire un petit compte-rendu de ce projet.<br />
On verra bien si j’y arrive.<br />
Au final, si tout ce passe bien la migration devrait avoir lieu en janvier 2020.</p>
<p>Wait and see !</p>
<h2>Liens</h2>
<ul>
<li><a href="https://fr.dotclear.org/" title="Le site officile de Dotclear">Dotclear : https://fr.dotclear.org/</a></li>
<li><a href="https://www.drupal.org/" title="Le site officiel de Drupal">Drupal : https://www.drupal.org/</a></li>
<li><a href="http://eixerit.info/" title="Le blog d’information Eixerit.info">Eixerit : http://eixerit.info/</a></li>
</ul>http://blog.philippe-poisse.eu/index.php?post/2019/02/26/Projet-2019-%3A-de-Dotclear-%C3%A0-Drupal-%E2%80%93-%C3%A9pisode-1#comment-formhttp://blog.philippe-poisse.eu/index.php?feed/atom/comments/251Afficher un PDF dans une page weburn:md5:a940336438a29b49972ad89fb3e8a88b2018-04-11T16:39:00+02:002018-04-11T16:39:00+02:00Philippe PoisseWebHTML5PDF<p>Vous avez toujours rêvé d’afficher un document au format PDF directement dans votre site web, mais vous ne savez pas comment faire. Voici le tutoriel qui vous faut.</p> <h2>Le code HTML</h2>
<pre>
<code><object data="http://blog.philippe-poisse.eu/index.php?post/2018/04/11/monPDF.pdf" type="application/pdf" width="100%" height="600" typemustmatch></code>
<code> <p>Vous ne possédez pas de greffon PDF, mais vous pouvez <a href="http://blog.philippe-poisse.eu/index.php?post/2018/04/11/monPDF.pdf">télécharger le fichier PDF.</a></p></code>
<code></object></code>
</pre>
<h2>Explication du code</h2>
<p>Tout d’abord on va utiliser la balise « object ».<br />
Elle est tout à fait classique, donc je ne reviendra pas trop dessus.<br />
Les attributs importants sont « data » et « type ».<br />
Le premier attribut va contenir l’url du fichier PDF. Libre à vous d’utiliser un chemin absolu ou relatif.<br />
Le deuxième attribut sert à indiquer le type de fichier que le navigateur doit attendre. Dans le cas d’un PDF on indique « application/pdf ». L’utilisation de « typemustmatch » permet de sécuriser l’affichage du document. S’il ne s’agit pas d’un PDF il ne doit pas être affiché.<br />
Les autres attributs possibles pour « object » peuvent être utilisés. C’est le cas pour « width », « height », « id » ou « class ».</p>
<p>La balise « object » permet d’afficher un contenu en cas de problème avec le PDF. Vous pouvez mettre un simple message d’erreur ou un contenu alternatif.</p>
<h2>Quelques liens pour aller plus loin</h2>
<ul>
<li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies" hreflang="fr_FR" title="la balise embed sur le site de Mozilla">https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/typeMustMatch" hreflang="en_US" title="L'attribut typeMustMatch sur le site de Mozilla">https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/typeMustMatch</a></li>
</ul>http://blog.philippe-poisse.eu/index.php?post/2018/04/11/Afficher-un-PDF-dans-une-page-web#comment-formhttp://blog.philippe-poisse.eu/index.php?feed/atom/comments/245LimeSurvey : les questionnaires web enfin libresurn:md5:f65b3cc8c3a3217a6485ced3f5cf02472016-04-12T16:08:00+02:002016-04-12T16:08:00+02:00Philippe PoisseWebGoogle FormLimeSurveyquestionnaire<p>Besoin de faire un sondage en ligne, un formulaire d’inscription, un questionnaire quelconque, mais pas envie de passer par Google Form ?<br />
Pourquoi ne pas essayer LimeSurvey, et passer à la liberté ?</p> <h2><img alt="LimeSurvey" class="media" src="http://blog.philippe-poisse.eu/public/logotypes/.limesurvey-logo_m.png" style="margin: 0 auto; display: block;" title="LimeSurvey, avr. 2016" />Questionnaire en ligne</h2>
<p>Les questionnaires en ligne permettent de faire remonter des informations, notamment dans le cas d’études ou de sondages, de s’inscrire à un événement, ou de faire des évaluations.<br />
Dans le monde du logiciel propriétaire et des GAFA c’est Google Form qui domine. Ainsi les données recueillies peuvent être librement exploitées par Google (voire la NSA).<br />
Le big data c’est vraiment fabuleux.</p>
<h2>Présentation succincte</h2>
<p>LimeSurvey est une application Web écrite en PHP. Niveau base de données elle autorise MySQL (et dérivés) et PostgreSQL.<br />
L’installation et la configuration sont très simples. Pour avoir pas mal installer de Wordpress ces dernières semaines, je trouve que LimeSurvey est plus facile à installer.<br />
Le tout est distribué sous licence GPL V2.<br />
Il existe des extensions et des templates pour les formulaires. Et comme c’est du PHP, vous pouvez écrire les vôtres.</p>
<h2>Liens utiles</h2>
<p>Si vous désirez télécharger ou tester LimeSurvey vous pouvez vous rendre sur le site officiel.<br />
<a href="https://www.limesurvey.org/" hreflang="en" title="Le site communautaire de LimeSurvey">https://www.limesurvey.org/</a><br />
S vous désire juste créer des questionnaires sans disposer de votre propre hébergement il existe une solution en ligne :<br />
<a href="https://www.limeservice.com/en/" hreflang="en" title="Le site pour créer des formulaires en ligne">https://www.limeservice.com/en/</a></p>
<p>Si toutefois vous vouliez tester un peu sérieusement LimeSurvey je vous conseille de regarder cette vidéo, assez récente, qui vous expliquera comment démarrer.<br />
<a href="https://www.youtube.com/watch ? v=mrgntKhc1fA" hreflang="en" title="Un tutoriel vidéo suir LimeSurvey">https://www.youtube.com/watch ? v=mrgntKhc1fA</a></p>http://blog.philippe-poisse.eu/index.php?post/2016/04/12/LimeSurvey-%3A-les-questionnaires-web-enfin-libres#comment-formhttp://blog.philippe-poisse.eu/index.php?feed/atom/comments/185Agenda partagé : le retour de la revancheurn:md5:55fb38066d289d1e7adaa0dfff8ccec82016-01-11T23:46:00+01:002016-01-11T23:56:10+01:00Philippe PoisseWebagendaICSphp<p>Début 2014 j’ai réalisé un petit agrégateur d’agenda ics. Le projet s’est arrêté aussi sec, mais les fichiers ont fini sur Github.<br />
Fin 2015 ce projet redevient pertinent. Comme on dit : rien ne se perd.</p> <h2>Les faits, rien que les faits</h2>
<p>Je sais, j’ai déjà utilisé ce titre un paquet de fois, mais que voulez-vous je l’aime bien.</p>
<p>Fin 2013 a commencé une série de réunions inter-associatives sur Perpignan. Rapidement le besoin de partager des informations, et notamment la liste des événements à venir.</p>
<p>À l’époque à Perpinux certains s’amusaient avec les API de <a href="https://owncloud.org/" hreflang="en" title="le site officiel de Owncloud">Owncloud</a> et de <a href="http://www.joomla.fr/" hreflang="fr" title="Le site de Joomla">Joomla</a> (ce CMS a été vite abandonné). J’ai donc décidé de jeter un œil à tout ça.</p>
<p>Résultat des courses je n’ai pas trouvé d’API permettant d’agréger facilement ds calendriers issus de différents sites Web. Par contre pas mal de d’exemples de code traînent sur divers dépôts Git (en Open Source, ça va sans dire). Donc j’ai écrit mon petit agrégateur.</p>
<p>Lorsque l’on a la possibilité de se faire chier, de faire un truc totalement inutile (donc rigoureusement indispensable) il ne faut jamais se gêner.</p>
<p>Deux semaines plus tard le bouzin était livré et, comme c’est étrange, dès qu’il a fallu bosser dessus il n’y a plus eu de réunions.</p>
<p>L’histoire aurait pu s’arrêter fin février 2014.</p>
<h2>Redémarrage</h2>
<p>Lorsqu’un besoin existe, est clairement exprimé, et est non satisfait, inévitablement il revient sur le devant de la scène. Pas besoin de fortes notions de marketing pour piger le truc.</p>
<p>Et donc, fin 2015, de nouvelles réunions inter-associatives ont eu lieu, et elles ont abouti au même constat.</p>
<p>Bref l’agrégateur d’agenda redevient intéressant.</p>
<p>Du moins pour moi.</p>
<p>J’ai fini par aller jeter un petit coup d’œil à mon Github, histoire de me rafraîchir la mémoire.</p>
<p>Je ne me souvenais pas pourquoi je n’aime pas me relire. Hé bien, croyez-le ou non, mais ça m’est revenu tout de suite. En gros, c’est bâclé, c’est moche, c’est pas franchement commenté, mais ça marche.</p>
<p>C’est du PHP en somme.</p>
<h2>Principes de base</h2>
<p>Bonne ou mauvaise, l’idée de base est assez simple : une application PHP récupère le contenu de fichiers ics (les agendas) listés dans un fichier JSON (l’annuaire), parse le contenu des fichiers de manière à renvoyer le tout au format HTML. La première version (2014) alignait les DIV les uns après les autres, la deuxième version (2015) fait un joli tableau. Avec un peu de JavaScript (jQuery et dataTable) le tout est relativement présentable.</p>
<p>C’est du PHP donc l’application est un bon gros parser des familles. Je sais je ne fais pas d’effort.</p>
<h2>Avantages</h2>
<p>Le premier avantage de ce système c’est qu’il est totalement autonome. À la base trois fichiers suffisent : l’annuaire JSON ; le fichier contenant la classe PHP et un banal « index.php » qui sert d’interface.</p>
<p>Plus simple c’est dur.</p>
<p>Le deuxième avantage c’est qu’il tire profit de la standardisation des fichiers ics. Le format ical est bien répandu, formaliste et géré par une flopée de logiciels.</p>
<h2>Limites</h2>
<p>La limite est simple à énoncer : comment on fait quand on a pas d’agenda au format ics ?</p>
<p>Certes si vous savez ce qu’est un logiciel gérant des agendas (Outlook, Thunderbird, Google Calendar, etc.) et que FTP ça vous cause, vous allez avoir du mal à comprendre où est le problème.</p>
<p>Mais dites-vous bien que la majorité que la majorité des gens est totalement démunie devant un ordinateur et qu’installer un gestionnaire de calendrier pour gérer un calendrier n’est en rien naturel. Donc pour la majorité des gens installer Thunderbird avec Lightning, créer un agenda puis l’enregistrer dans un fichier au format ics et le mettre en ligne via FTP relève de l’exploit.</p>
<p>En passant, si vous êtes sous Linux, vous pouvez essayer<a href="http://www.kolumbus.fi/~w408237/orage/" hreflang="en" title="Lae site d'orage"> Orage</a>.</p>
<p>Le cas des agendas en ligne est encore pire. Beaucoup de petites structures utilisent des éditeurs HTML WYSIWYG (en ligne ou non) pour gérer leur site. À l’inverse de la plupart des CMS du marché, ces éditeurs ne proposent pas de modules « calendriers au format ics ». pour ces structures il faut repenser l’organisation, voire changer d’outil.</p>
<p>Bon, dans le pire des cas vous pouvez utiliser <a href="http://wigowiz.addicterra.fr/" hreflang="fr" title="Wigowiz, le covoiturage de vos événements">Wigowiz</a>, mais là je tombe dans l’autopromotion.</p>
<h2>Avenir</h2>
<p>Le bouzin est en ligne depuis près de deux ans et il génère quelques téléchargements. On ne peut pas dire qu’il connaisse le succès, ne serait-ce que d’estime.</p>
<p>Récemment le fondateur de Twitter a déclaré que l’avenir passe par les plates-formes, ce qui signifie que les sites institutionnels et les blogs sont condamnés à moyen terme. Votre page Facebook (ou autres) doit devenir le centre de votre présence en ligne.</p>
<p>Si on aime l’Internet « centralisé », contrôlé par quelques grands groupes (il ne doit pas y en avoir plus d’une dizaine qui tiennent le marché mondial) on ne peut qu’aller vers ce modèle il n’est donc pas nécessaire de gérer son propre agenda, u que quelqu’un le fait pour vous.</p>
<p>Évidemment ce modèle (qui rend les choses « simples ») séduit largement, y compris les milieux alternatifs.</p>
<p>Si par contre, en bon libriste, vous êtes pour un Internet « acentré », où chacun a son petit chez-soi, vous ne pouvez qu’être intéressé par des outils permettant de faire circuler simplement l’information.</p>
<p>Et plus il y a de monde qui participe, mieux c’est.</p>http://blog.philippe-poisse.eu/index.php?post/2016/01/11/Agenda-partag%C3%A9-%3A-le-retour-de-la-revanche#comment-formhttp://blog.philippe-poisse.eu/index.php?feed/atom/comments/183Document non trouvéurn:md5:1176759967e5f3009e0e3095fc9846422015-08-09T15:45:00+02:002015-08-22T02:40:02+02:00Philippe PoisseWeb.htaccessdotclearsécurité<p>Suite à un rapide audit sécurité fait par un « petit jeune » sur mon blog il s’avère que Dotclear a un petit défaut en terme d’erreur 404.<br />
Donc voici un petit correctif rapide à mettre en œuvre.</p> <h2>État des lieux</h2>
<p>Tout blogeur un peu sérieux sait que la sécurité est un point important de la gestion au quotidien d’un blog. Des pages d’erreur personnalisées sont obligatoires si on désire améliorer la sécurité.<br />
En effet, par défaut, les serveurs peuvent renvoyer des informations utiles à un pirate pour une attaque contre le blog ou le serveur.<br />
Dotclear dispose d’un mécanisme de page d’erreur, mais il ne semble marcher que si un « ? » est présent dans l’url.<br />
Par exemple www.monblog.fr/?gnacgnac redirigera vers la page d’erreur, alors que www.monblog.fr/gnacgnac redirigera vers la page d’erreur par défaut du serveur. Il s’agit juste d’un petit problème de réécriture des url. Les développeurs n’ont peut être pas pensé à tous les cas de figure.</p>
<h2>Un fichier .htaccess pour corriger tout ça</h2>
<p>La solution la plus simple et la plus rapide est de mettre en place un fichier .htaccess qui, en cas d’erreur, va rediriger vers la page d’erreur de Dotclear.<br />
Curieusement l’archive de Dotclear téléchargeable sur le site officiel ne semble pas contenir de fichier de ce type.</p>
<p>Voici le contenu du fichier :</p>
<pre>
<code>
RewriteEngine on
# redirection pour les principales erreurs
ErrorDocument 401 /?u
ErrorDocument 403 /?u
ErrorDocument 404 /?u
ErrorDocument 500 /?u
</code>
</pre>
<p>En fonction de votre serveur il faudra peut-être faire des petites adaptations.<br />
À la première ligne on active la redirection puis on indique la page vers laquelle on veut rediriger en fonction des erreurs. Ici je redirige les erreurs 401, 403, 404 et 500 vers la même page, www.monblog.fr/?u.<br />
Le système de réécriture de Dotclear va considérer qu’il s’agit de la page www.monblog.fr/index.php?u. Cette page n’existant pas, la page d’erreur sera affichée.</p>
<p class="conclusion" id="conclusion">Il est possible de rediriger pour chaque erreur et la redirection peut se faire vers des pages différents pour chaque erreur. Ce système est assez souple.<br />
Les deux liens suivants vous permettront d’aller plus loin au sujet des fichiers .htaccess :<br />
La page Wikipedia : <a href="https://fr.wikipedia.org/wiki/.htaccess" hreflang="fr" title="La page Wikipedia sur les fichiers .htaccess">https://fr.wikipedia.org/wiki/.htaccess</a><br />
La documentation officielle sur le site d’Apache : <a href="http://httpd.apache.org/docs/2.4/fr/howto/htaccess.html" hreflang="fr" title="La document officielle des fichiers .htaccess sur le site de la fondation Apache">http://httpd.apache.org/docs/2.4/fr/howto/htaccess.html</a></p>http://blog.philippe-poisse.eu/index.php?post/2015/08/09/Document-non-trouv%C3%A9#comment-formhttp://blog.philippe-poisse.eu/index.php?feed/atom/comments/180Framapad : trucs et astucesurn:md5:e917eca119c3e918c1549ce5329978832014-10-22T22:57:00+02:002014-10-22T22:57:00+02:00Philippe PoisseWebetherpadframapad<p>Étant membre d’associations utilisant framapad comme outil de travail collaboratif j’ai remarqué que la plupart des utilisateurs ont du mal avec les options de bases.<br />
Donc voici des petits conseils pratiques.</p> <h2>Petit point technique</h2>
<p>Framapad fonctionne grâce à <a href="http://etherpad.org/" hreflang="en" title="Le site Web d'Etherpad">Etherpad</a>, les outils d’exportation/importation sont gérés via Abiword. Donc si votre serveur peut faire tourner ces outils vous pouvez disposer d’un pad perso sur votre site Web.<br />
En pratique ça ressemble à du etherpad lite, mais je n’ai pas creusé la question.<br />
Si vous voulez la même chose chez vous il vous faudra <a href="http://nodejs.org/" hreflang="en" title="Le site Web de node.js">node.js</a>, abiword, etherpad lite et quelques dépendances pour que ça tourne. Donc si vous avez envie de vous prendre la tête allez-y, c’est du tout bon.</p>
<h2>Le menu des outils</h2>
<p>Le menu se situe à droite de l’écran. Il est composé de sept boutons :</p>
<ul>
<li>un point d’interrogation</li>
<li>deux flèches en contre-sens</li>
<li>une horloge</li>
<li>une étoile</li>
<li>une roue d’engrenage</li>
<li>des chevrons ouvrant et fermant</li>
<li>une silhouette</li>
</ul>
<p>Le point d’interrogation est supposée ouvrir un menu d’aide. En pratique il renvoie vers le chat, ou alors j’ai pas tout compris.<br />
Les doubles flèches ouvrent le menu importer/exporter.<br />
L’horloge permet d’avoir accès à l’historique.<br />
L’étoile permet de créer un point de sauvegarde du document.<br />
La roue permet d’accéder aux paramètres du pad.<br />
Les deux chevrons, qui rappelle des balises html, permettent de partager le pad.<br />
La silhouette indique le nombre de personnes présentes sur le pad.</p>
<h2>Importer ou exporter un document</h2>
<p>Comme le bouzin communique en temps réel avec Abiword les possibilités d’importation et d’exportation d’un document sont donc assez intéressantes.
Les formats courant comme le doc, l’odt sont tout à fait utilisables.<br />
Attention importer un texte écrasera le contenu du pad. Donc si le document est déjà conséquent il faudra utiliser un classique copier/coller à la place.<br />
L’exportation se trouve dans le même menu. Il suffit de cliquer sur le format désiré.<br />
D’après mon expérience ce qui marche le mieux c’est le format « texte brut ». Mais bon, c’est Abiword derrière, faut pas trop en demander.</p>
<h2>Enregistrement et timeslider</h2>
<p>En cliquant sur l’étoile le document est enregistré. En pratique une révision du document est enregistrée séparément du reste des sauvegardes. C’est ce qu’on appelle le versionning, ou historisation en français.<br />
Dans le timeslider cette version apparaîtra sous forme d’une petite étoile.<br />
En cliquant sur l’horloge vous serez redirigé vers le timeslider. Il s’agit d’une frise temporelle assez classique qui donne accès à toutes les différentes versions du document. C’est une assez bonne protection contre un effacement, volontaire ou non, de tout le document.<br />
Le timeslider donne le numéro de la révision et la date de l’enregistrement.</p>http://blog.philippe-poisse.eu/index.php?post/2014/10/22/Framapad-%3A-trucs-et-astuces#comment-formhttp://blog.philippe-poisse.eu/index.php?feed/atom/comments/98Nouvelle section dédiée à la cartographieurn:md5:7d1b9f6e3ebe93b5cab06cecd07b9ef82014-08-15T16:42:00+02:002014-08-15T16:42:00+02:00Philippe PoisseWebCartographie en ligneLeafletOpenStreetMap<p>Même si en été j’ai tendance à lever le pied (mais pas le coude) je mets quand même mon site à jour de temps en temps. Ce coup-ci il s’agit d’une section dédiée à la cartographie.</p> <h2>Cartes thématiques</h2>
<p>Cette section doit contenir à terme des cartes thématiques réalisées principalement avec OpenStreetMap.<br />
Pour l’instant la seule carte en ligne concerne les panneaux de libre expression sur la commune de Perpignan. Elle est réalisée à l’aide de Leaflet avec un rendu MapBox.</p>
<p>La section cartographie est accessible depuis la page projet. L’url pour y aller directement est <a href="http://www.philippe-poisse.eu/index.php?page=cartes" hreflang="fr" title="La page cartographie sur le site de Philippe Poisse">http://www.philippe-poisse.eu/index.php?page=cartes</a></p>
<p>D’autres cartes arriveront dès la fin de l’année 2014, du moins j’espère.</p>http://blog.philippe-poisse.eu/index.php?post/2014/08/15/Nouvelle-section-d%C3%A9di%C3%A9e-%C3%A0-la-cartographie#comment-formhttp://blog.philippe-poisse.eu/index.php?feed/atom/comments/94Des puces en couleurs avec CSSurn:md5:d2bbc2675fd0a8feb0464418e9b8546a2014-06-02T11:46:00+02:002017-10-30T12:16:35+01:00Philippe PoisseWebCSSHTMLListe à pucepseudo-élémentswebdesign<p>De temps en temps il arrive à n’importe quel rédacteur web d’utiliser des listes à puces. Par défaut les puces seront de la même couleur que le texte, mais il est tout à fait possible de changer la couleur sans une ligne de HTML.<br />
Voila comment faire.</p> <p><strong>Edit du 30 octobre 2017 : </strong>Si vous cherchez un tutoriel pour LibreOffice c'est ici : <a href="http://blog.philippe-poisse.eu/index.php?post/2017/10/30/Des-puces-personnalis%C3%A9es-avec-LibreOffice" hreflang="fr" title="Des puces personnalisées avec LibreOffice 5">http://blog.philippe-poisse.eu/index.php?post/2017/10/30/Des-puces-personnalis%C3%A9es-avec-LibreOffice</a></p>
<h2>Exemples</h2>
<p>Pour bien comprendre de quoi ce tuto parle voici deux exemples, le premier avec une liste à puces classiques et le second avec des puces en couleur.</p>
<p>Liste classique</p>
<ul>
<li>South Park</li>
<li>Agents of S.H.I.E.L.D.</li>
<li>Plus belle la vie</li>
</ul>
<p>Liste avec des puces en couleur</p>
<ul>
<li class="puce_couleur">The Big Lebowsky</li>
<li class="puce_couleur">Les Deux Tours</li>
<li class="puce_couleur">Akira</li>
</ul>
<p>En passant, un intrus s’est glissé dans la liste, sauras-tu le retrouver ?</p>
<h2>Pseudo-élément</h2>
<p>Comme vous pouvez le voir le code HTML des deux listes est quasiment identique. La seule différence est la présence d’une classe pour les « li » de la deuxième liste.<br />
Donc tout ce passe au niveau du CSS.</p>
<p>S’il existe une propriété « list-style » et des propriétés dérivées de celle-ci (list-style-position, list-style-image, etc.) il n’existe pas de propriété « list-style-color » permettant de gérer la couleur de la puce.<br />
Le but de la manœuvre étant de colorier les puces sans toucher au code HTML il va falloir utiliser un pseudo-élément pour insérer la puce de façon dynamique.<br />
En CSS2 et en CSS3 il existe le pseudo-élément « before ».<br />
En CSS2 la notation est «:before » et en CSS3 elle est «::before ». En cas de doute sur la compatibilité du navigateur avec le CSS3 n’hésitez pas à utiliser les deux.</p>
<p>La document de Mozilla sur le pseudo-élément « before » :<br />
<a href="http://blog.philippe-poisse.eu/index.php?post/2014/06/02/ https://developer.mozilla.org/fr/docs/CSS/:before" hreflang="fr" title="La page de documentation de Mozilla sur ::before">https://developer.mozilla.org/fr/docs/CSS/:before</a></p>
<h2>Liste non-ordonnée</h2>
<p>Chacun des « li » doit appartenir à la classe « puce_couleur ». Vous êtes libre d’appeler la classe autrement, c’est un pays libre ici.<br />
La première chose à faire est de rendre les puces automatiques invisibles :<br />
« list-style-type: none; »<br />
Maintenant que la liste n’a plus de puce on peut créer le pseudo-élément.</p>
<pre>
<code>
.puce_couleur::before {
content: "◾";
color: red;
}
</code></pre>
<p>La propriété « content » va servir à gérer le ou les caractères à insérer. Tous les caractères reconnus par l’encodage de votre page (de préférence de l’UTF8) sont disponibles. Ça autorise des puces assez rigolotes. Les guillemets sont obligatoires, sinon ça plante.<br />
La propriété « color » va déterminer la couleur de la puce. Il est possible d’utiliser des couleurs nommées ou des codes hexadécimaux. Rien d’extraordinaire là aussi.<br />
Une petite astuce : pour avoir un peu d’espace après la puce il suffit de mettre un « padding-right ».</p>
<p>Le code de l’exemple :</p>
<pre>
<code>
.puce_couleur::before {
content: "◾";
color: red;
padding-right: 1em;
}
</code>
</pre>
<h2>Liste ordonnée</h2>
<p>Le problèmes dans le cas des listes ordonnées c’est que la puce, c’est-à-dire le numéro de l’item, doit être généré de façon dynamique. Donner un caractère spécifique à la propriété « content » ne sera d’aucune utilité.<br />
À la table il faut utiliser la fonction « counter() ».<br />
Pour que le compteur s’incrémente il faudra passer un paramètre à la fonction, par exemple « compteur ». Le paramètre sera créé avec la propriété « counter-increment » dans la classe « puce_couleur_ordonne ». Dans le cas contraire votre compteur risque de rester bloquer à 0.</p>
<pre>
<code>
.puce_couleur_ordonnee {
counter-increment: compteur;
}
.puce_couleur_ordonnee::before {
content: counter(compteur);
color: red;
}
</code>
</pre>
<p>Un exemple de liste ordonnée</p>
<ol>
<li class="puce_couleur_ordonnee">Se lever tard le matin</li>
<li class="puce_couleur_ordonnee">Ne rien faire de la journée</li>
<li class="puce_couleur_ordonnee">Passer la soirée sur le Web</li>
<li class="puce_couleur_ordonnee">Se coucher tard dans la nuit</li>
</ol>
<p>Le code</p>
<pre>
<code>
.puce_couleur_ordonnee {
list-style-type: none;
counter-increment: compteur;
}
.puce_couleur_ordonnee::before {
content: counter(compteur);
color: red;
padding-right: 1em;
}
</code>
</pre>
<h2>Living in the futur</h2>
<p>Les spécifications de CSS3 prévoient une pseudo-élément « marker » pour gérer les puces. Pour l’instant il n’est implémenté par aucun navigateur. C’est un peu dommage, certes, mais cela n’a pas tellement d’effet pour le webdesigner lambda. Lire les spécifications des listes sur le site du W3C :<br />
<a href="http://www.w3.org/TR/css3-lists/#marker-pseudo-element" hreflang="en" title="La page sur la spécification des pseudo-élements sur le site du W3C">http://www.w3.org/TR/css3-lists/#marker-pseudo-element</a></p>http://blog.philippe-poisse.eu/index.php?post/2014/06/02/Des-puces-en-couleurs-avec-CSS#comment-formhttp://blog.philippe-poisse.eu/index.php?feed/atom/comments/90OwnCloud en alternative à Dropboxurn:md5:2adc700768ae6f3c6b1b13fc33b5b0692013-10-15T22:26:00+02:002013-10-15T22:34:24+02:00Philippe PoisseWebcloudDropboxo2switchOwnCloud<p>
Vous utilisez Dropbox, mais vous voulez être sûr de la sécurité de vos fichiers, ne pas être fiché par la NSA ou, tout simplement, utiliser un logiciel libre, alors pourquoi ne pas opter pour OwnCloud ?</p> <h2>OwnCloud, c’est quoi ?</h2>
<p>Il s’agit d’une plate-forme permettant de stocker et de gérer des fichiers en ligne. On peut aussi y ajouter d’autres modules pour disposer de plus de services (calendrier, gestionnaire de contacts, etc.).<br />
L’application est écrite en PHP et est compatible avec les principales bases de données (MySQl, PostgreSQL, SQLite).</p>
<p>Comme le nom l’indique, avec OwnCloud vous êtes propriétaire de votre (petit) nuage.</p>
<p>Faites un tour sur Wikipedia ou sur le site officiel pour plus de détails :<br />
<a href="http://fr.wikipedia.org/wiki/OwnCloud" hreflang="fr" title="La page Wikipedia sur OwnCloud">http://fr.wikipedia.org/wiki/OwnCloud</a>
<a href="http://owncloud.org/" hreflang="fr" title="Le site officiel de OwnCloud">http://owncloud.org/</a></p>
<h2>Comment ça marche ?</h2>
<p>OwnCloud s’installe comme un CMS classique. On télécharge les fichiers sur le serveur, on configure la connexion à la base de données, on crée les utilisateurs et ça roule.<br />
Ensuite pour la synchronisation des fichiers avec des postes clients (votre PC) il faudra installer un client téléchargeable sur le site (ou via votre gestionnaire de paquets, si vous êtes linuxien).</p>
<p>La page de téléchargement vous donne accès aux différentes versions du client :<br />
<a href="http://owncloud.org/install/" hreflang="fr" title="La page de téléchargement de OwnCloud">http://owncloud.org/install/</a></p>
<h2>Inconvénients</h2>
<p>Mise à part le fait que pour utiliser OwnCloud il faut gérer soit même son serveur, il n’y a pas vraiment d’inconvénients à mettre en avant.<br />
Évidemment lorsque vous avez utilisé un logiciel comme Dropbox ou box.net pendant plusieurs années et que vous passez à un autre, vous risquez d’être un peu perturbé et de ne pas retrouver exactement votre fonction préférée.</p>
<h2>Avantages</h2>
<p>
Le fait de gérer le serveur est un avantage en soit.<br />
Un hébergement ne coûte que quelques dizaines d’euros par an et propose plusieurs dizaines, voire une centaine de gigaoctets de stockage.<br />
Un hébergement mutualisé avec OwnCloud revient au même prix que l’offre pro de Dropbox et coûte beaucoup moins cher que l’offre Entreprise, tout en offrant les mêmes services (à peu de chose près).<br />
Un petit tour sur la page des tarifs de Dropbox permet de faire la comparaison :<br />
<a href="https://www.dropbox.com/business/pricing" hreflang="en" title="Les tarifs de Dropbox">https://www.dropbox.com/business/pricing</a></p>
<p>Récemment j’ai fait une installation de OwnCloud pour une association sur un hébergement chez O2Switch, le client a été installé chez 4 utilisateurs (Ubuntu, Windows 7 et MacOS). En gros ça revient à choisir l’offre Entreprise qui coûte 795$ (à peu près 600€) pour 5 utilisateurs.<br />
Comparé au 72€ de l’offre de O2Switch, ça fait une petite différence.<br />
La page avec les offres de O2Switch :<br />
<a href="http://www.o2switch.fr/" hreflang="fr" title="La page d'accueil de o2switch">http://www.o2switch.fr/</a></p>
<p>Bref, si vous passez à OwnCloud, vous serez sur un petit nuage.<br />
D’accord, c’est nul comme chute, mais sur le coup j’ai pas d’autre idée.</p>http://blog.philippe-poisse.eu/index.php?post/2013/10/15/OwnCloud-en-alternative-%C3%A0-Dropbox#comment-formhttp://blog.philippe-poisse.eu/index.php?feed/atom/comments/78