<commit_before><?php 

if (!isset($root)) {
  $root = '';
}

 ?>
<!doctype html>
<html lang="fr">

  <head>
    <meta charset="utf-8">

    <title>YaJUG 2015: CSS</title>

    <meta name="description" content="Présentation au YaJUG Luxembourg, 21 avril 2015">
    <meta name="author" content="<NAME>">
    <link rel="icon" href="http://iamvdo.me/images/favicon.png"/>

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet'>
    <link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400' rel='stylesheet'>

    <link rel="stylesheet" href="<?php echo $root; ?>css/reveal.min.css">
    <link rel="stylesheet" href="<?php echo $root; ?>plugin/prismjs/prism.css">
    <link rel="stylesheet" href="<?php echo $root; ?>iamvdo/theme.css" id="theme">
    <link rel="stylesheet" href="<?php echo $root; ?>iamvdo/meetup.css">
    <link rel="stylesheet" href="<?php echo $root; ?>plugin/nav/nav.css">

    <!-- If the query includes 'print-pdf', include the PDF print sheet -->
    <script>
      if( window.location.search.match( /print-pdf/gi ) ) {
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = '<?php echo $root; ?>css/print/pdf.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
      }
    </script>

    <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body class="language-css">

    <div class="reveal iamvdo">

      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section>
          <h1>#CSS</h1>
          <h2>Des bases de CSS2.1 aux fonctionnalités avancées de CSS3</h2>
          <p class="u-aligncenter u-small u-margin">
            <NAME> &middot; <a href="http://twitter.com/iamvdo">@iamvdo</a>
          </p>
        </section>

        <section class="me">
          <h2><NAME></h2>
          <ul class="vcard">
            <li>Formateur web indépendant</li>
            <li><a href="http://www.ensg.eu" title="Ecole Nationale des Sciences Géographiques">ENSG Géomatique</a>, <a href="http://webschoolfactory.com">WebSchoolFactory</a></li>
            <li><a href="http://twitter.com/iamvdo">@iamvdo</a></li>
            <li><a href="http://css3create.com">CSS3Create</a>, <a href="http://iamvdo.me">iamvdo</a>, <a href="http://pleeease.io">Pleeease</a></li>
            <li>Livre <a href="http://livre-css3.fr">CSS3 Le design web moderne</a></li>
          </ul>
        </section>

        <section data-state="part">
          <h1>Bref historique</h1>
        </section>

        <section>
          <h2>CSS1</h2>
          <ul>
              <li>Recommandation en 1996</li>
              <li>Sélecteurs simples, positionnements basiques, tailles, marges, couleurs, polices, etc.</li>
          </ul>
        </section>

        <section>
          <h2>CSS2 et CSS2.1</h2>
          <ul>
              <li>Abandonnée en 1998</li>
              <li>Trop de choses, trop complexes ou sous-spécifiées
              <li>Pseudo-classes dynamiques, pseudo-éléments, polices personnalisées, gestion des médias, ombres sur les textes, etc.</li>
          </ul>
          <ul class="fragment">
              <li>CSS 2.1: version "corrigée" de CSS2, ce qui a été retiré est mis à l'étude dans CSS3</li> 
              <li>Recommandation en juin 2011</li>
          </ul>
        </section>

        <section>
          <h2>CSS3</h2>
          <ul>
              <li>En cours depuis 1999</li>
              <li>Standard fragmenté en modules</li>
              <li>3 modules en Recommandation, une trentaine à l'étude</li>
          </ul>
          <ul class="fragment">
            <li><a href="http://www.xanthir.com/b4Ko0">CSS4 ne verra jamais le jour…</a></li>
            <li>Des modules en L4, d'autres en L1</li>
          </ul>
        </section>

        <section>
          <h2>Démocratisation de CSS3</h2>
          <p>Pourquoi entends t'on beaucoup parler de CSS3?</p>
          <ul>
            <li class="fragment">Meilleur ami de HTML5</li>
            <li class="fragment">Sélecteurs étoffés</li>
            <li class="fragment">Effets graphiques simplifiés: opacité, angles arrondis, ombres, dégradés, polices personnalisées, etc. (maintenance++)</li>
            <li class="fragment">Accès à ce qui était réservé avant à JavaScript (interaction, animation, etc.)</li>
            <li class="fragment">Nouveaux modes de positionnement</li>
          </ul>
          <ul>
            <li class="fragment">Mise à jour auto. des navigateurs</li>
            <li class="fragment">Support amélioré de CSS2.1</li>
            <li class="fragment">Fin de IE6, IE7, IE8</li>
          </ul>
        </section>

        <section>
          <h2>Utiliser CSS3</h2>
          <ul>
            <li class="fragment">Connaitre le support navigateur</li>
            <li class="fragment">Conserver la <strong>dégradation gracieuse</strong></li>
            <li class="fragment">Mettre en place l'<strong>amélioration progressive</strong></li>
          </ul>
          <p class="fragment left">Pour cela:</p>
          <ul>
            <li class="fragment">Ne rien faire</li>
            <li class="fragment">Utilisation des préfixes CSS</li>
            <li class="fragment">Utilisation de styles alternatifs, via la cascade CSS</li>
            <li class="fragment">Détection de fonctionnalités (CSS ou JS)</li>
          </ul>
          <p class="fragment">De nombreux outils existent…</p>
        </section>

        <section>
          <h2>Mais c'est quoi au fait ?</h2>
          <ul>
            <li class="fragment">Cascading Style Sheets: feuilles de styles en cascade</li>
            <li class="fragment">Langage de description</li>
            <li class="fragment">Très (trop?) simple</li>
          </ul>
<pre class="fragment"><code class="css" contenteditable spellcheck="false">.selector {
  color: blue;
  font-size: 2em;
}</code></pre>
          <ul>
            <li class="fragment">Un style :
              <ul>
                <li class="fragment">Un sélecteur</li>
                <li class="fragment">Des règles</li>
              </ul>
            </li>
          </ul>
        </section>

        <section data-state="part">
          <h1>Les sélecteurs</h1>
        </section>

        <section>
          <h2>Les sélecteurs CSS1, 2.1 et 3</h2>
          <ul>
            <li class="fragment">Plus de 40 sélecteurs</li>
            <li class="fragment">Parcourir le DOM</li>
            <li class="fragment">Cibler les éléments</li>
          </ul>
          <ul>
            <li class="fragment">Sélecteur :
              <ul>
                <li class="fragment">d'éléments (<code>E</code>)</li>
                <li class="fragment">d'enfants (<code>E F</code>, <code>E > F</code>)</li>
                <li class="fragment">de frères suivants (<code>E + F</code>, <code>E ~ F</code>)</li>
                <li class="fragment">d'id (<code>E#id</code>) et de classe (<code>E.class</code>)</li>
                <li class="fragment">pseudo-classes (<code>E:first-child</code>, <code>E:last-child</code>...)</li>
                <li class="fragment">pseudo-classes dynamiques (<code>E:hover</code>, <code>E:focus</code>, <code>E:active</code>...)</li>
                <li class="fragment">pseudo-éléments (<code>E::first-letter</code>, <code>E::after</code>, <code>E::before</code>...)</li>
              </ul>
            </li>
          </ul>
        </section>

        <section>
          <h2>Les sélecteurs d'attributs</h2>
          <ul>
            <li>Cibler des éléments en fonction de leur attributs (et de leurs valeurs), mêmes les <em>data-attributes</em> de HTML5</li>
            <li class="fragment"><code>[attr]</code>, <code>[attr=val]</code>, <code>[attr~=val]</code></li>
            <li class="fragment"><code>[attr^=val]</code>, <code>[attr$=val]</code>, <code>[attr*=val]</code></li>
          </ul>
          <article class="demo fragment">
            <style>
            #e1 ul {
              padding-left: 3em;
            }
            #e1 li {
              float: left;
              margin-left: 2em;
            }
            </style>
            <div>
<pre class="small"><code class="liveCoding language-markup" data-livecoding-id="e1" contenteditable spellcheck="false">&lt;ul>
  &lt;li id="art18">Vers article 18&lt;/li>
  &lt;li id="art12">Vers article 12&lt;/li>
  &lt;li id="rub4">Vers rubrique 4&lt;/li>
  &lt;li id="art3">Vers article 3&lt;/li>
&lt;/ul></code></pre>
<pre class="small"><code class="liveCoding" data-livecoding-id="e1" contenteditable spellcheck="false">ul li[id^=art] {
  color: black;
}</code></pre>
            </div>
            <div id="e1">
              <ul>
                <li id="art18">Vers article 18</li>
                <li id="art12">Vers article 12</li>
                <li id="rub4">Vers rubrique 4</li>
                <li id="art3">Vers article 3</li>
              </ul>
            </div>
          </article>
        </section>
<commit_msg>Better demo for "sélecteurs d'attributs"<commit_after><?php 

if (!isset($root)) {
  $root = '';
}

 ?>
<!doctype html>
<html lang="fr">

  <head>
    <meta charset="utf-8">

    <title>YaJUG 2015: CSS</title>

    <meta name="description" content="Présentation au YaJUG Luxembourg, 21 avril 2015">
    <meta name="author" content="<NAME>">
    <link rel="icon" href="http://iamvdo.me/images/favicon.png"/>

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet'>
    <link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400' rel='stylesheet'>

    <link rel="stylesheet" href="<?php echo $root; ?>css/reveal.min.css">
    <link rel="stylesheet" href="<?php echo $root; ?>plugin/prismjs/prism.css">
    <link rel="stylesheet" href="<?php echo $root; ?>iamvdo/theme.css" id="theme">
    <link rel="stylesheet" href="<?php echo $root; ?>iamvdo/meetup.css">
    <link rel="stylesheet" href="<?php echo $root; ?>plugin/nav/nav.css">

    <!-- If the query includes 'print-pdf', include the PDF print sheet -->
    <script>
      if( window.location.search.match( /print-pdf/gi ) ) {
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = '<?php echo $root; ?>css/print/pdf.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
      }
    </script>

    <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body class="language-css">

    <div class="reveal iamvdo">

      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section>
          <h1>#CSS</h1>
          <h2>Des bases de CSS2.1 aux fonctionnalités avancées de CSS3</h2>
          <p class="u-aligncenter u-small u-margin">
            <NAME> &middot; <a href="http://twitter.com/iamvdo">@iamvdo</a>
          </p>
        </section>

        <section class="me">
          <h2><NAME></h2>
          <ul class="vcard">
            <li>Formateur web indépendant</li>
            <li><a href="http://www.ensg.eu" title="Ecole Nationale des Sciences Géographiques">ENSG Géomatique</a>, <a href="http://webschoolfactory.com">WebSchoolFactory</a></li>
            <li><a href="http://twitter.com/iamvdo">@iamvdo</a></li>
            <li><a href="http://css3create.com">CSS3Create</a>, <a href="http://iamvdo.me">iamvdo</a>, <a href="http://pleeease.io">Pleeease</a></li>
            <li>Livre <a href="http://livre-css3.fr">CSS3 Le design web moderne</a></li>
          </ul>
        </section>

        <section data-state="part">
          <h1>Bref historique</h1>
        </section>

        <section>
          <h2>CSS1</h2>
          <ul>
              <li>Recommandation en 1996</li>
              <li>Sélecteurs simples, positionnements basiques, tailles, marges, couleurs, polices, etc.</li>
          </ul>
        </section>

        <section>
          <h2>CSS2 et CSS2.1</h2>
          <ul>
              <li>Abandonnée en 1998</li>
              <li>Trop de choses, trop complexes ou sous-spécifiées
              <li>Pseudo-classes dynamiques, pseudo-éléments, polices personnalisées, gestion des médias, ombres sur les textes, etc.</li>
          </ul>
          <ul class="fragment">
              <li>CSS 2.1: version "corrigée" de CSS2, ce qui a été retiré est mis à l'étude dans CSS3</li> 
              <li>Recommandation en juin 2011</li>
          </ul>
        </section>

        <section>
          <h2>CSS3</h2>
          <ul>
              <li>En cours depuis 1999</li>
              <li>Standard fragmenté en modules</li>
              <li>3 modules en Recommandation, une trentaine à l'étude</li>
          </ul>
          <ul class="fragment">
            <li><a href="http://www.xanthir.com/b4Ko0">CSS4 ne verra jamais le jour…</a></li>
            <li>Des modules en L4, d'autres en L1</li>
          </ul>
        </section>

        <section>
          <h2>Démocratisation de CSS3</h2>
          <p>Pourquoi entends t'on beaucoup parler de CSS3?</p>
          <ul>
            <li class="fragment">Meilleur ami de HTML5</li>
            <li class="fragment">Sélecteurs étoffés</li>
            <li class="fragment">Effets graphiques simplifiés: opacité, angles arrondis, ombres, dégradés, polices personnalisées, etc. (maintenance++)</li>
            <li class="fragment">Accès à ce qui était réservé avant à JavaScript (interaction, animation, etc.)</li>
            <li class="fragment">Nouveaux modes de positionnement</li>
          </ul>
          <ul>
            <li class="fragment">Mise à jour auto. des navigateurs</li>
            <li class="fragment">Support amélioré de CSS2.1</li>
            <li class="fragment">Fin de IE6, IE7, IE8</li>
          </ul>
        </section>

        <section>
          <h2>Utiliser CSS3</h2>
          <ul>
            <li class="fragment">Connaitre le support navigateur</li>
            <li class="fragment">Conserver la <strong>dégradation gracieuse</strong></li>
            <li class="fragment">Mettre en place l'<strong>amélioration progressive</strong></li>
          </ul>
          <p class="fragment left">Pour cela:</p>
          <ul>
            <li class="fragment">Ne rien faire</li>
            <li class="fragment">Utilisation des préfixes CSS</li>
            <li class="fragment">Utilisation de styles alternatifs, via la cascade CSS</li>
            <li class="fragment">Détection de fonctionnalités (CSS ou JS)</li>
          </ul>
          <p class="fragment">De nombreux outils existent…</p>
        </section>

        <section>
          <h2>Mais c'est quoi au fait ?</h2>
          <ul>
            <li class="fragment">Cascading Style Sheets: feuilles de styles en cascade</li>
            <li class="fragment">Langage de description</li>
            <li class="fragment">Très (trop?) simple</li>
          </ul>
<pre class="fragment"><code class="css" contenteditable spellcheck="false">.selector {
  color: blue;
  font-size: 2em;
}</code></pre>
          <ul>
            <li class="fragment">Un style :
              <ul>
                <li class="fragment">Un sélecteur</li>
                <li class="fragment">Des règles</li>
              </ul>
            </li>
          </ul>
        </section>

        <section data-state="part">
          <h1>Les sélecteurs</h1>
        </section>

        <section>
          <h2>Les sélecteurs CSS1, 2.1 et 3</h2>
          <ul>
            <li class="fragment">Plus de 40 sélecteurs</li>
            <li class="fragment">Parcourir le DOM</li>
            <li class="fragment">Cibler les éléments</li>
          </ul>
          <ul>
            <li class="fragment">Sélecteur :
              <ul>
                <li class="fragment">d'éléments (<code>E</code>)</li>
                <li class="fragment">d'enfants (<code>E F</code>, <code>E > F</code>)</li>
                <li class="fragment">de frères suivants (<code>E + F</code>, <code>E ~ F</code>)</li>
                <li class="fragment">d'id (<code>E#id</code>) et de classe (<code>E.class</code>)</li>
                <li class="fragment">pseudo-classes (<code>E:first-child</code>, <code>E:last-child</code>...)</li>
                <li class="fragment">pseudo-classes dynamiques (<code>E:hover</code>, <code>E:focus</code>, <code>E:active</code>...)</li>
                <li class="fragment">pseudo-éléments (<code>E::first-letter</code>, <code>E::after</code>, <code>E::before</code>...)</li>
              </ul>
            </li>
          </ul>
        </section>

        <section>
          <h2>Les sélecteurs d'attributs</h2>
          <ul>
            <li>Cibler des éléments en fonction de leur attributs (et de leurs valeurs), mêmes les <em>data-attributes</em> de HTML5</li>
            <li class="fragment"><code>[attr]</code>, <code>[attr=val]</code>, <code>[attr~=val]</code></li>
            <li class="fragment"><code>[attr^=abc]</code>: commençant par</li>
            <li class="fragment"><code>[attr$=abc]</code>: finissant par</li>
            <li class="fragment"><code>[attr*=abc]</code>: contient</li>
          </ul>
        </section>

        <section data-state="showcase">
          <article class="demo">
            <style>
            #e1 {
              margin: 50px 0;
            }
            #e1 h1 {
              background: none;
              font-size: 1.1em;
            }
            #e1 p {
              font-size: .7em;
              text-align: left;
            }
            #e1 abbr {
              border-bottom: 1px dashed deepskyblue;
            }
            #e1 a {
              color: deepskyblue;
            }
            </style>
            <div>
<pre class="small"><code class="liveCoding css" data-livecoding-id="e1" contenteditable="" spellcheck="false">/* CSS */
a {
  color: deepskyblue;
}
</code></pre>
            </div>
            <div id="e1">
              <h1>Le livre «CSS3 Le design web moderne»</h1>
              <p>La <a href="http://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade">maîtrise de CSS</a> est un atout majeur dans la réalisation d’un design web moderne et innovant. Indissociable d’<abbr title="HyperText Markup Language">HTML5</abbr>, <a href="http://css3create.com">CSS3 étend les capacités du langage</a> en vous offrant des possibilités jusque là inédites.</p>
              <p>Que vous soyez webdesigner, développeur ou amateur éclairé, vous trouverez dans <a href="http://livre-css3.fr">ce livre</a>, au travers d’exemples précis, une méthodologie efficace pour mettre en application <abbr title="Cascading Style Sheet">CSS3</abbr> sur vos sites web dès aujourd’hui.</p>
              <p>Vous découvrirez les <a href="#">nouveaux modèles de positionnement</a> permettant des mises en pages évoluées ainsi que les nouveautés en matière de <a href="#">typographie</a>. Sans utiliser d’images, vous pourrez ajouter des ombres, <a href="#">réaliser des coins arrondis</a>, des effets de transparence et des dégradés complexes. Vos sites deviendront plus attractifs grâce à l’ajout <a href="#">d’animations</a>, de <a href="#">transformations en 2D et en 3D</a>. Vous créerez des applications mobiles performantes avec <a href="#">la gestion précise des médias alternatifs</a>, tels que les smartphones et tablettes.</p>
              <p>Pendant la lecture de l'ouvrage, retrouvez tous les exemples sur <a href="http://livre-css3.fr/bugdroid">le site de démonstration dédié</a>.</p>
            </div>
          </article>
        </section>

{'fraction_non_alphanumeric': 0.165, 'fraction_numerical': 0.013676470588235293, 'mean_word_length': 2.266773418734988, 'pattern_counts': {'":': 0, '<': 695, '<?xml version=': 0, '>': 707, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1000716', 'n_tokens_mistral': 6859, 'n_tokens_neox': 6599, 'n_words': 1512}