Mise à jour, nouvelle méthode

apt-get install python-certbot-apache -t jessie-backports
certbot –apache

certbot –apache certonly seulement si la conf SSL apache est manuelle
https://certbot.eff.org
//************************

encore mieux passe tout les virtual host d’un coup
wget https://dl.eff.org/certbot-auto
chmod a+x certbot-auto
./certbot-auto –apache  -> répondre au questions

//************************

https://www.ssllabs.com/ssltest/analyze.html?d=www.mondomaine.com -> tester la conf HTTPS

Passer un site web apache en HTTPS avec certificat valide et certifié, mais gratuit Lire la suite →

All About Floats

A Complete Guide to Flexbox

<link rel="stylesheet" type="text/css" href="style.css">


* {font-size: 14px;color:orange;}    /* selectionne tout ne sert à rien seul */
h1 { color: navy; }                  /* une balise*/
li a {font-size: 10px;}              /* espace -> sélectionne tous les a contenu dans un li, ne sélectionne pas le li */
p > img {text-align: center;}        /* La même chose, mais ne prends img que si tout de suite après p, pas d'autres balises sur le chemin */
h1, h2, h3 {background-color: red;}  /* sélectionne toutes les h1 et h2 et h3*/

.message{ 
   border: 1px solid black; 
   background: white;
}
<div id="prix" class="message"> ... </div>              /* affecte la class message au div*/
<div id="qte"  class="message"> ... </div>              /* même class sur un autre div*/

#msg2{ border: 1px solid black; }                       /* comme une classe mais doit être unique */
<div id="mesg2">      ... </div>                        /* affecte le style mesg2 au div*/

div[tarif] { color: blue; }                             /* tous les div qui ont un attribut tarif*/
<div id="mesg3" tarif="3.20"> ... </div>                /* affecte le style mesg3 au div*/

div[code_postal="38500"] { color: red; }                /* tous les div dont l'attribut code_postal vaut 38500*/
<div id="mesg3" code_postal="38500"> ... </div>         /* affecte le style mesg3 au div*/

div[code_postal=^"38"] { color: pink; }                /* tous les div dont l'attribut code_postal commence pas 38*/
div[code_postal=~"38"] { color: pink; }                /* tous les div dont l'attribut code_postal contient  38*/
<div id="mesg3" code_postal="38 75 33 01"> ... </div>  /* affecte le style mesg3 au div*/

a {}  a:hover {}  a:visited  a:active .menu a:hover {}  div:hover

p:first-child /* premier sous-element*/
p i:first-child  /* premier sous-truc des i qui sont dans des p */

/* si plusieurs règles s'appliquent à un même élément  c'est la moins générale, la plus précise, qui l'emporte*/
p{color:red;}
.message{color:green;}
<p class="message"></p>  /* sera green*/

/*                            */

https://inkscape.org/fr/

https://www.animatron.com  pour faire des animations directement en ligne, mixe son vidéos, objets vectoriels, export divers format dont le svg, ou pack HTML5

http://svgcircus.com/  création d’animations SGV en ligne le source est dispo

https://jakearchibald.com/2013/animated-line-drawing-svg/ animation de SGV en javascript, explications

http://tympanus.net/codrops/2014/12/15/elastic-svg-elements/   menu animés en SGV et javascript

Il faut

1) un compte Twitter  par exemple « monbeautwit« 

2) Installer sur un smartphone, l’appli periscope ANDROID    ou Iphone  en utilisant le compte twitter

3)  bouton rouge en bas -> le téléphone filme et tout passe en direct sur le net via  3G ou 4G

4) https://www.periscope.tv/monbeautwit depuis n’importe où dans le monde on peut voir vos vidéos y compris celle en direct

Les vidéos sont aussi twittées ->  si on « follow » monbeautwit  on peut afficher la vidéo en cliquant sur le tweet

exemple https://www.periscope.tv/Aka_skinnyy

Encore mieux depuis février 2016 avec une Gopro HERO4 et son appli Iphone permettent de diffuser les vidéos « live » depuis la caméra fixée à un casque, ou sur le rétro d’une bagnole… l’appli Android devrait suivre.

Pour supprimer une vidéo, uniquement depuis l’appli mobile

L’appli concurrente est meerkatapp   même fonctionnement, toujours avec twitter  @StreamReporter

younow  pas mal non plus

plussh  Le petit dernier français, à suivre

A surveiller, toutes ces applis devraient rapidement évoluer début 2016 

Permet de faire par exemple :
http://mapage.php?client=418899&ref=f78957 –> http://facture/418899/carte

Le lien que vois PHP –> le lien qui circule sur le WEB et dans les pages

Utilisé à une époque pour améliorer le référencement, il reste encore utile dans bien des cas
L(URL normale plein de paramètre est remplacée par des choses plus parlante, ou au contraire masquée derrière des codes
Les lien dans la page web peuvent être normaux ou réécrit. Le lien qui arrive dans PHP (ou autre) est celui avec les ?client=418899&facture=f78957 … dans la mesure ou les règles de réécriture sont bien faites

Placer ces règles soit dans un .htaccess pour faire la mise au point ou sur un mutualisé, soit dans le fichier de conf d’Apache (mieux)

Options FollowSymLinks
RewriteEngine on
RewriteBase /

RewriteRule ^facture/([0-9]+)/([a-zA-Z]+)/(.*)$ mapage.php?client=$1&ref=$2&par=$3 [L]

Ecplication : toute URL commençant par http://facture/ des_chiffres / des_lettres / n_importe_quoi deviendra
mapage.php?client=des_chiffres&ref=des_lettres&par=n_importe_quoi

le motif est une expression régulière

plus de détails ICI

La taille de certaines images utilisées sur le web peut avoir de l’importance.

PUB

voir ce lien  ou celui là

RESEAUX SOCIAUX

Voir ce lien

  :root {
    --main-bg-color: brown;  // set variable
  }
  .menu {
    color: white;
    background-color: var(--main-bg-color);
  }
  .page {
    color: red;
    background-color: var(--main-bg-color);
 }

Il peut être intéressant de définir des variables dans les CSS. Cet exemple ce code n’est pour l’instant utilisable qu’avec Firefox version bureau.. les autres navigateurs risquent de s’y mettre, à surveiller

Calcul dans les styles

<style>
  #monobjet[
    width:180px;
    width:100%;    // tout le div contenant
    margin-left:180px;  // monobjet va sortir de 180px vers la droite
      // solution
    width:calc(100% - 180px);  // tout le div contenant - 180px;  
      // calcul avec + - * /  des % px, em  ne pas oublier d’entourer les opérateurs par des espaces
  }
</style>

Pour afficher un truc du genre : Ctrl+Shift+M

<kbd class="kbd">Ctrl</kbd>+<kbd class="kbd">Shift</kbd>+<kbd class="kbd">M</kbd>
<style>
kbd {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    color: #333;
    font-size: 11px;
    line-height: 1.4;
    text-shadow: 0 1px 0 #fff;
    display: inline-block;
    padding: .1em .6em;
    margin: 0 .1em;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;
    border-radius: 3px;
}
</style>

<scropt>
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
</script>

Dans la page web la rend éditable -> utile pour faire des tests