384400 384400

## -custom-fonts.md

      
              4 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                384400
                /  -custom-fonts.md
            
            
              Last active
              October 8, 2016 20:57
            
              
                [JavaScript] [Css] [Html] Comment utiliser une police de caractères personnalisée ?
              
          
    Comment utiliser une police de caractères personnalisée ?

Avec [Google Fonts] (https://fonts.google.com/), la police personnalisée doit être indiquée dans body et pas dans html !
Cependant, à l'heure où nous rédigeons ces lignes, quelques bogues empêchent la prise en charge de certains caractères spéciaux, comme les ellipses. Par exemple, si nous appelons la fonte Source Sans Pro en utilisant [Google Fonts] (https://fonts.google.com/)...
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<style>
    body {
 font-family: 'Source Sans Pro', 'Times New Roman';

  
## test.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Visualisateur de glyphes</title>
<style>
    @font-face {
        font-family: 'My Sans Serif font';
        src: url('source/SourceSansPro-Regular.ttf') format('truetype');
    }

## -gutter.md

      
              4 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                384400
                /  -gutter.md
            
            
              Last active
              September 29, 2016 09:41
            
              
                [Html] [Css] Comment afficher une gouttière avec le module Flexbox Layout ?
              
          
    Comment afficher une gouttière avec le module Flexbox Layout ?

[CSS Flexible Box Layout Module Level 1] (https://www.w3.org/TR/css-flexbox-1/) permet facilement de disposer un contenu sous formes de colonnes, mais ne prend pas en charge les gouttières.
Une gouttière rend le contenu plus facile à lire.
Réduite à des dimensions minimales, la gouttière remplace un trait horizontal (ou vertical). Il suffit d'attribuer un arrière-plan de couleur au conteneur principal et de donner une marge aux éléments qui suivent, comme le montre le fichier gutter-a.hml.
Pour dessiner un trait de séparation, il existe une solution encore plus simple : attribuer une bordure aux conteneurs, comme le montre le fichier gutter-b.html.

  
## -column.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                384400
                /  -column.md
            
            
              Last active
              September 24, 2016 12:42
            
              
                [Html] [Css] Comment afficher une gouttière avec le module Multi-column Layout ? 
              
          
    Comment utiliser le module Multi-column Layout ?

[CSS Multi-column Layout Module] (https://www.w3.org/TR/css3-multicol/) permet de disposer un contenu sous formes de colonnes.
Les autres techniques, comme [CSS Flexible Box Layout Module Level 1] (https://www.w3.org/TR/css-flexbox-1/), les tableaux et les grilles, autorisent la création de colonnes. Cependant, ces possibilités sont satisfaisantes exclusivement quand le contenu est statique. Si nous écrivons un livre, le contenu sera immuable et les modifications mineures. Si nous publions un journal, le contenu sera imprévisible !
La mise en page avec de multiples colonnes présente surtout un intérêt pour les écrans larges : les lignes trop longues découragent le lecteur et sont inesthétiques.
À l'heure où nous rédigeons ces lignes, le support des navigateurs est insuffisant : il nécessite le recours à des propriétés préfixées pour Google Chrome, Mozilla Firefox, Safari et Opera, comme l'indique [Can I use] (http://caniuse.com/#feat=multicolumn).

  
## -lettre.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                384400
                /  -lettre.md
            
            
              Last active
              August 20, 2016 22:01
            
              
                [Html] [Css] [JavaScript] Comment produire une lettre professionnelle en Html ?
              
          
    Comment produire une lettre professionnelle  en Html ?

Avec quelques rudiments en Html, grâce à un bloc-notes comme [Notepad++] (https://notepad-plus-plus.org/fr/) et à un navigateur, il peut-être intéressant de générer une lettre professionnelle ou commerciale au format A4 à imprimer. À l'heure où les outils bureautiques deviennent complexes et chers, à l'heure où enfle la taille des documents à enregistrer, notre solution se veut frugale et universelle.
Le modus operandi est le suivant (plus long à décrire qu'à exécuter !) :

lancement du bloc-notes ;
lancement du navigateur ;
ouverture du fichier avec le bloc-notes et le navigateur ;
rédaction du texte ;
impression virtuelle du document (c'est le texte final) au format Pdf ;


## -print.md

      
              5 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                384400
                / -print.md
            
            
              Created
              August 9, 2016 17:36
            
          
    A compléter ultérieurement

  
## -professions.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Liste des professions</title>
</head>
<body>
	<form>
		<label>Profession
			<select>

## -constitution.md

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                384400
                / -constitution.md
            
            
              Last active
              July 4, 2016 21:46
            
              
                [Html] Constitution du 4 octobre 1958
              
          
    Constitution du 4 octobre 1958

Pour des développements ultérieurs, nous avons mis au format Html le texte de la Constitution du 4 octobre 1958 disponible sur [La-Constitution] (https://github.com/legifrance/La-Constitution/blob/master/Constitution%20du%204%20octobre%201958.txt) et créé par [Légifrance] (http://github.com/legifrance).
Ce dépôt de la constitution française a été légèrement amélioré, par exemple :

Etat a été remplacé par État.
Le préposition A (en capitale) a été remplacé par À.
n° a été remplacé par no pour se conformer à l'usage typographique.
oeuvre a été remplacé par œuvre.
Président de la République a été remplacé par président de la République, conformément à l'usage typographique.


## -time-design.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                384400
                / -time-design.md
            
            
              Last active
              April 16, 2016 16:57
            
              
                [Html] [JavaScript] [Css] [Php] Changer de Webdesign selon le moment de la journée
              
          
    Comment changer de Webdesign selon le moment de la journée ?

Voilà quelques mois, l'idée de requêtes media (media queries) basées sur le temps nous a paru intéressante. Chris Nager présente le concept :
[Time-based media queries] (http://chrisnager.com/time-based-media-queries/).
[Suncalc] (https://github.com/mourner/suncalc) est une petite bibliothèque en JavaScript, qui pèse moins de 9 kilo-octets avant compression : elle indique la position du soleil et de la lune pour une heure et un endroit donnés.
Selon nos tests conduits au fil de l'eau, les indications horaires calculées par [Suncalc] (https://github.com/mourner/suncalc) sont satisfaisantes.
Aussi avons-nous essayé à titre expérimental de changer la couleur de fond de page selon le moment de la journée, en prenant en compte la localisation du visiteur. Si la demande de localisation n'aboutit pas, aucune couleur ne s'affiche.

  
## -readme.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                384400
                / -readme.md
            
            
              Last active
              April 4, 2016 22:27
            
              
                [PHP] [Html] [JavaScript ] [Css] Empêcher la mise en cache des fichiers par le navigateur
              
          
    Comment empêcher la mise en cache des fichiers par le navigateur ?

Les navigateurs sont bien conçus : pour accélérer le traitement des pages, les fichiers, par exemple les Cascading Style Sheets (Css) ou autres bibliothèques JavaScript ou jQuery, sont mis en cache. Or, cet avantage est contre-productif pour le développeur : il doit modifier constamment la configuration de son logiciel de navigation afin de voir les changements.
Grâce à cette astuce élémentaire, <?php echo '?'.mt_rand(); ?>, qui requiert donc l'utilisation de Hypertext Preprocessor (Php), les fichiers seront systématiquement rafraîchis et les modifications instantanées ; leurs noms seront modifiés aléatoirement à chaque chargement de page.
Bien entendu, pour être agréable à ses visiteurs (!), il ne faudra pas oublier de renommer l'appel des feuilles de styles et autres scripts lors de la mise en production.
Avec WordPress, on pourrait utiliser dans le fichier functions.php...
	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="utf-8" />
	<title>Visualisateur de glyphes</title>
	<style>
	@font-face {
	font-family: 'My Sans Serif font';
	src: url('source/SourceSansPro-Regular.ttf') format('truetype');
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Liste des professions</title>
	</head>
	<body>
	<form>
	<label>Profession
	<select>