davidbgk
/
larlet-fr-david
Segui 1
Vota 0
Forka 0
Codice Rilasci 0 Attività
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
191 Commit
1 Ramo (Branch)
Albero (Tree): 444754dec7
Rami (Branch) Tag
${ item.name }
Crea branch ${ searchTerm }
da '444754dec7'
${ noResults }
larlet-fr-david/david/blog/2015/cours-iut-candidature-spont.../index.html

index.html 34KB
Originale Blame Cronologia

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Cours IUT : Candidature spontanée — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <!-- Canonical URL for SEO purposes -->

  29.   <link rel="canonical" href="https://larlet.fr/david/blog/2015/cours-iut-candidature-spontanee/">

  30.   <!-- SEO/Semantic metadata -->

  31.   <meta name="description" content="Je souhaitais vérifier qu’ils arrivaient à mettre en valeur ce qu’ils avaient assimilé lors du cours." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Je souhaitais vérifier qu’ils arrivaient à mettre en valeur ce qu’ils avaient assimilé lors du cours." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Cours IUT : Candidature spontanée" />

  34.   <meta name="twitter:card" content="summary" />

  35.   <meta name="twitter:creator" content="@davidbgk" />

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2015/cours-iut-candidature-spontanee/" />

  37.   <meta property="og:type" content="article" />

  38.   <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  39. 

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2015/cours-iut-candidature-spontanee.jpg" />

  41. 

  42. 

  43. <style>

  44. /* http://meyerweb.com/eric/tools/css/reset/ */

  45. html, body, div, span,

  46. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  47. a, abbr, address, big, cite, code,

  48. del, dfn, em, img, ins,

  49. small, strike, strong, tt, var,

  50. dl, dt, dd, ol, ul, li,

  51. fieldset, form, label, legend,

  52. table, caption, tbody, tfoot, thead, tr, th, td,

  53. article, aside, canvas, details, embed,

  54. figure, figcaption, footer, header, hgroup,

  55. menu, nav, output, ruby, section, summary,

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

  64. /* HTML5 display-role reset for older browsers */

  65. article, aside, details, figcaption, figure,

  66. footer, header, hgroup, menu, nav, section { display: block; }

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

  79. /* http://practicaltypography.com/equity.html */

  80. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  81. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  82. @font-face {

  83.   font-family: 'EquityTextB';

  84.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  85.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

  92.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  93.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

  100.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  101.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

  109.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  110.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116. 

  117. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  118. body {

  119.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  120.   font-family: "EquityTextB", Palatino, serif;

  121.   background-color: #f0f0ea;

  122.   color: #07486c;

  123.   font-kerning: normal;

  124.   -moz-osx-font-smoothing: grayscale;

  125.   -webkit-font-smoothing: subpixel-antialiased;

  126.   text-rendering: optimizeLegibility;

  127.   font-variant-ligatures: common-ligatures contextual;

  128.   font-feature-settings: "kern", "liga", "clig", "calt";

  129. }

  130. pre, code, kbd, samp, var, tt {

  131.   font-family: 'TriplicateT4c', monospace;

  132. }

  133. em {

  134.   font-style: italic;

  135.   color: #323a45;

  136. }

  137. strong {

  138.   font-weight: bold;

  139.   color: black;

  140. }

  141. nav {

  142.   background-color: #323a45;

  143.   color: #f0f0ea;

  144.   display: flex;

  145.   justify-content: space-around;

  146.   padding: 1rem .5rem;

  147. }

  148.   nav:last-child {

  149.     border-bottom: 1vh solid #2d7474;

  150.   }

  151.   nav a {

  152.     color: #f0f0ea;

  153.   }

  154.   nav abbr {

  155.     border-bottom: 1px dotted white;

  156.   }

  157. 

  158. h1 {

  159.   border-top: 1vh solid #2d7474;

  160.   border-bottom: .2vh dotted #2d7474;

  161.   background-color: #e3e1e1;

  162.   color: #323a45;

  163.   text-align: center;

  164.   padding: 5rem 0 4rem 0;

  165.   width: 100%;

  166.   font-family: 'ConcourseT3';

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170.   h1.single {

  171.     padding-bottom: 10rem;

  172.   }

  173.   h1 span {

  174.     position: absolute;

  175.     top: 1vh;

  176.     left: 20%;

  177.     line-height: 0;

  178.   }

  179.     h1 span a {

  180.       line-height: 1.7;

  181.       padding: 1rem 1.2rem .6rem 1.2rem;

  182.       border-radius: 0 0 6% 6%;

  183.       background: #2d7474;

  184.       font-size: 1.3rem;

  185.       color: white;

  186.       text-decoration: none;

  187.     }

  188. h2 {

  189.   margin: 4rem 0 1rem;

  190.   border-top: .2vh solid #2d7474;

  191.   padding-top: 1vh;

  192. }

  193. h3 {

  194.   text-align: center;

  195.   margin: 3rem 0 .75em;

  196. }

  197. hr {

  198.   height: .4rem;

  199.   width: .4rem;

  200.   border-radius: .4rem;

  201.   background: #07486c;

  202.   margin: 2.5rem auto;

  203. }

  204. time {

  205.   display: bloc;

  206.   margin-left: 0 !important;

  207. }

  208. ul, ol {

  209.   margin: 2rem;

  210. }

  211. ul {

  212.   list-style-type: square;

  213. }

  214. a {

  215.   text-decoration-skip-ink: auto;

  216.   text-decoration-thickness: 0.05em;

  217.   text-underline-offset: 0.09em;

  218. }

  219. article {

  220.   max-width: 50rem;

  221.   display: flex;

  222.   flex-direction: column;

  223.   margin: 2rem auto;

  224. }

  225.   article.single {

  226.     border-top: .2vh dotted #2d7474;

  227.     margin: -6rem auto 1rem auto;

  228.     background: #f0f0ea;

  229.     padding: 2rem;

  230.   }

  231.   article p:last-child {

  232.     margin-bottom: 1rem;

  233.   }

  234. p {

  235.   padding: 0 .5rem;

  236.   margin-left: 3rem;

  237. }

  238.   p + p,

  239.   figure + p {

  240.     margin-top: 2rem;

  241.   }

  242. 

  243. blockquote {

  244.   background-color: #e3e1e1;

  245.   border-left: .5vw solid #2d7474;

  246.   display: flex;

  247.   flex-direction: column;

  248.   align-items: center;

  249.   padding: 1rem;

  250.   margin: 1.5rem;

  251. }

  252.   blockquote cite {

  253.     font-style: italic;

  254.   }

  255.   blockquote p {

  256.     margin-left: 0;

  257.   }

  258. 

  259. figure {

  260.   border-top: .2vh solid #2d7474;

  261.   background-color: #e3e1e1;

  262.   text-align: center;

  263.   padding: 1.5rem 0;

  264.   margin: 1rem 0 0;

  265.   font-size: 1.5rem;

  266.   width: 100%;

  267. }

  268.   figure img {

  269.     max-width: 250px;

  270.     max-height: 250px;

  271.     border: .5vw solid #323a45;

  272.     padding: 1px;

  273.   }

  274. figcaption {

  275.   padding: 1rem;

  276.   line-height: 1.4;

  277. }

  278. aside {

  279.   display: flex;

  280.   flex-direction: column;

  281.   background-color: #e3e1e1;

  282.   padding: 1rem 0;

  283.   border-bottom: .2vh solid #07486c;

  284. }

  285.   aside p {

  286.     max-width: 50rem;

  287.     margin: 0 auto;

  288.   }

  289. 

  290. /* https://fvsch.com/code/css-locks/ */

  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  292.   font-size: 1rem;

  293.   line-height: calc( 1.5em + 0.2 * 1rem );

  294. }

  295. h1 {

  296.   font-size: 1.9rem;

  297.   line-height: calc( 1.2em + 0.2 * 1rem );

  298. }

  299. h2 {

  300.   font-size: 1.6rem;

  301.   line-height: calc( 1.3em + 0.2 * 1rem );

  302. }

  303. h3 {

  304.   font-size: 1.35rem;

  305.   line-height: calc( 1.4em + 0.2 * 1rem );

  306. }

  307. @media (min-width: 20em) {

  308.   /* The (100vw - 20rem) / (50 - 20) part

  309.      resolves to 0-1rem, depending on the

  310.      viewport width (between 20em and 50em). */

  311.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  312.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  313.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  314.     margin-left: 0;

  315.   }

  316.   h1 {

  317.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  318.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  319.   }

  320.   h2 {

  321.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  322.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  323.   }

  324.   h3 {

  325.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  326.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  327.   }

  328. }

  329. @media (min-width: 50em) {

  330.   /* The right part of the addition *must* be a

  331.      rem value. In this example we *could* change

  332.      the whole declaration to font-size:2.5rem,

  333.      but if our baseline value was not expressed

  334.      in rem we would have to use calc. */

  335.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  336.     font-size: calc( 1rem + .6 * 1rem );

  337.     line-height: 1.5em;

  338.   }

  339.   p, li, pre, details {

  340.     margin-left: 3rem;

  341.   }

  342.   h1 {

  343.     font-size: calc( 1.9rem + 1.5 * 1rem );

  344.     line-height: 1.2em;

  345.   }

  346.   h2 {

  347.     font-size: calc( 1.5rem + 1.5 * 1rem );

  348.     line-height: 1.3em;

  349.   }

  350.   h3 {

  351.     font-size: calc( 1.35rem + 1.5 * 1rem );

  352.     line-height: 1.4em;

  353.   }

  354.   figure img {

  355.     max-width: 500px;

  356.     max-height: 500px;

  357.   }

  358. }

  359. 

  360. figure.unsquared {

  361.   margin-bottom: 1.5rem;

  362. }

  363.   figure.unsquared img {

  364.     height: inherit;

  365.   }

  366. 

  367. 

  368. 

  369. @media print {

  370.   body { font-size: 100%; }

  371.   a:after { content: " (" attr(href) ")"; }

  372.   a, a:link, a:visited, a:after {

  373.     text-decoration: underline;

  374.     text-shadow: none !important;

  375.     background-image: none !important;

  376.     background: white;

  377.     color: black;

  378.   }

  379.   abbr[title] { border-bottom: 0; }

  380.   abbr[title]:after { content: " (" attr(title) ")"; }

  381.   img { page-break-inside: avoid; }

  382.   @page { margin: 2cm .5cm; }

  383.   h1, h2, h3 { page-break-after: avoid; }

  384.   p3 { orphans: 3; widows: 3; }

  385.   img {

  386.     max-width: 250px !important;

  387.     max-height: 250px !important;

  388.   }

  389.   nav, aside { display: none; }

  390. }

  391. 

  392. ul.with_columns {

  393.   column-count: 1;

  394. }

  395. @media (min-width: 20em) {

  396.   ul.with_columns {

  397.     column-count: 2;

  398.   }

  399. }

  400. @media (min-width: 50em) {

  401.   ul.with_columns {

  402.     column-count: 3;

  403.   }

  404. }

  405. ul.with_two_columns {

  406.   column-count: 1;

  407. }

  408. @media (min-width: 20em) {

  409.   ul.with_two_columns {

  410.     column-count: 1;

  411.   }

  412. }

  413. @media (min-width: 50em) {

  414.   ul.with_two_columns {

  415.     column-count: 2;

  416.   }

  417. }

  418. 

  419. .gallery {

  420.   display: flex;

  421.   flex-wrap: wrap;

  422.   justify-content: space-around;

  423. }

  424.   .gallery figure img {

  425.     margin-left: 1rem;

  426.     margin-right: 1rem;

  427.   }

  428.   .gallery figure figcaption {

  429.     font-family: 'ConcourseT3'

  430.   }

  431. 

  432. footer {

  433.   font-family: 'ConcourseT3';

  434.   display: flex;

  435.   flex-direction: column;

  436.   border-top: 3px solid white;

  437.   padding: 4rem 0;

  438.   background-color: #07486c;

  439.   color: white;

  440. }

  441.   footer > * {

  442.     max-width: 50rem;

  443.     margin: 0 auto;

  444.   }

  445.   footer a {

  446.     color: #f1c40f;

  447.   }

  448.   footer .avatar {

  449.     width: 200px;

  450.     height: 200px;

  451.     border-radius: 50%;

  452.     float: left;

  453.     -webkit-shape-outside: circle();

  454.     shape-outside: circle();

  455.     margin-right: 2rem;

  456.     padding: 2px 5px 5px 2px;

  457.     background: white;

  458.     border-left: 1px solid #f1c40f;

  459.     border-top: 1px solid #f1c40f;

  460.     border-right: 5px solid #f1c40f;

  461.     border-bottom: 5px solid #f1c40f;

  462.   }

  463. </style>

  464. 

  465. <h1 class="single">

  466.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  467.   Cours IUT : Candidature spontanée

  468.   <time>Publié le 2 mars 2015</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>Je suis le directeur technique du site lemonde.fr, vous avez 2 heures pour m’envoyer un email de candidature spontanée. Vous disposez de toutes les ressources et discussions qui vous semblent nécessaires.</p>

  473. </blockquote>

  474. <p>C’est ainsi que débutait cette évaluation du <a href="/david/pro/enseignement/">cours</a> sur le <a href="/david/blog/2015/cours-iut-web-mobile/">Web Mobile</a>.</p>

  475. <h2>Motivations</h2>

  476. <p><strong>Je souhaitais vérifier qu’ils arrivaient à mettre en valeur ce qu’ils avaient assimilé lors du cours.</strong> Leur faire prendre conscience aussi qu’ils pouvaient être très bons mais s’ils ne parviennent pas à obtenir un entretien cela ne sert pas à grand chose. Ayant 2 heures à tuer, je me suis prêté au jeu et j’ai rédigé ma propre candidature spontanée en me mettant à leur place/niveau de connaissances.</p>

  477. <h2>Ma réponse</h2>

  478. <p>Objet : <em>Candidature spontanée pour améliorer LeMonde</em><br />

  479. Destinataire : <em>Olivier Grange-Labat</em></p>

  480. <p>Bonjour Olivier,</p>

  481. <p>Je crée des sites web depuis 4 ans dont 2 ans à mon compte et je viens de valider une année de licence professionnelle dédiée à la création de sites internet. Cela m’a permis de me familiariser avec les notions de frameworks (Bootstrap et AngularJS) et de CMS (Wordpress). J’ai aussi eu l’occasion de développer en JavaScript et d’explorer les possibilités offertes par le web mobile.</p>

  482. <p>Je souhaite intégrer votre équipe technique pour les challenges auxquels vous êtes confrontés au quotidien compte tenu des contraintes journalistiques et de votre popularité.</p>

  483. <p>Je pense pouvoir vous apporter mes compétences et mon énergie dans trois domaines :</p>

  484. <h3>Performances</h3>

  485. <p>J’ai remarqué qu’il était possible (naïvement) d’améliorer les performances de votre site. Il y a actuellement plus de 200 requêtes effectuées au chargement de la page d’accueil, ce qui prend 30 secondes à charger totalement en 3G. C’est en deçà des standards actuels en terme de réactivité et cela s’explique de plusieurs manières :</p>

  486. <ul>

  487. <li>les fichiers JavaScript (44) ne sont pas réunis ni compressés ;</li>

  488. <li>les fichiers CSS (21) ne sont pas non plus optimisés.</li>

  489. </ul>

  490. <p>Cela engendre des effets de bord comme le chargement de l’image des <em>sprites</em> CSS en double à la fois appelées par <code>widgets.css</code> et <code>footer.css</code> pour la page d’accueil.</p>

  491. <ul>

  492. <li>beaucoup de fichiers n’ont pas des durées de cache satisfaisantes pour pouvoir réafficher la page sans effectuer de requêtes supplémentaires.</li>

  493. </ul>

  494. <p>Il y a bien sûr les contraintes liées aux partenaires publicitaires mais d’autres fichiers dépendants du CDN pourraient être optimisés.</p>

  495. <ul>

  496. <li>la taille totale des fichiers CSS (230KB) est importante.</li>

  497. </ul>

  498. <p>Il serait possible de regrouper les styles propres à l’affichage du contenu au-dessus de la ligne de flottaison et de les intégrer directement dans le <code>HTML</code> pour ne charger les styles additionnels que de manière asynchrone ensuite.</p>

  499. <p><em>Je suis motivé pour mettre en place un workflow de publication qui prenne en compte des métriques de performances afin d’améliorer incrémentalement la situation.</em></p>

  500. <h3>Lisibilité</h3>

  501. <p>J’ai reproduit la fonctionnalité de lecture Zen en une quinzaine de lignes de JavaScript (à coller dans la console du navigateur) :</p>

  502. <div class="codehilite"><pre><span class="kd">var</span> <span class="nx">title</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;article h1&#39;</span><span class="p">);</span>

  503. <span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;articleBody&#39;</span><span class="p">);</span>

  504. <span class="nb">document</span><span class="p">.</span><span class="nx">open</span><span class="p">();</span>

  505. <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="nx">title</span><span class="p">.</span><span class="nx">outerHTML</span> <span class="o">+</span> <span class="nx">content</span><span class="p">.</span><span class="nx">outerHTML</span><span class="p">);</span>

  506. <span class="nb">document</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span>

  507. <span class="nx">title</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;h1&#39;</span><span class="p">);</span>

  508. <span class="nx">content</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;articleBody&#39;</span><span class="p">);</span>

  509. <span class="nx">title</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">textAlign</span> <span class="o">=</span> <span class="s1">&#39;center&#39;</span><span class="p">;</span>

  510. <span class="nx">title</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="s1">&#39;40px&#39;</span><span class="p">;</span>

  511. <span class="nx">title</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="s1">&#39;#555&#39;</span><span class="p">;</span>

  512. <span class="nx">content</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="s1">&#39;25px&#39;</span><span class="p">;</span>

  513. <span class="nx">content</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">&#39;30em&#39;</span><span class="p">;</span>

  514. <span class="nx">content</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">lineHeight</span> <span class="o">=</span> <span class="s1">&#39;1.3&#39;</span><span class="p">;</span>

  515. <span class="nx">content</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">margin</span> <span class="o">=</span> <span class="s1">&#39;0 auto&#39;</span><span class="p">;</span>

  516. <span class="nx">content</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="s1">&#39;#07486C&#39;</span><span class="p">;</span>

  517. </pre></div>

  518. 

  519. 

  520. <p>Mon objectif n’est pas ici de la remplacer compte-tenu du potentiel de conversion des lecteurs/clients qu’elle représente mais bien de l’améliorer et de la personaliser en fonction des capacités de la personne.</p>

  521. <p><em>Je souhaite participer aux recherches ergonomiques et typographiques permettant d’améliorer la lisibilité du contenu du site.</em></p>

  522. <h3>Veille technologique</h3>

  523. <p>Je pratique une veille technologique au quotidien que je partage sur mon site/blog : <a href="https://larlet.fr/david/">https://larlet.fr/david/</a> . Je suis persuadé que de nombreuses expériences effectuées par l’équipe technique pourraient être partagées avec la communauté. C’est par exemple le cas pour l’équipe de M6 : <a href="http://tech.m6web.fr/">http://tech.m6web.fr/</a> .</p>

  524. <p><em>Je propose de mettre en place un espace de partage et d’échange avec la communauté qui permettrait de s’enrichir de retours externes et de pratiquer un recrutement passif.</em></p>

  525. <p>Je suis disponible pour vous rencontrer dans vos locaux ou au cours d’un déjeuner. Vous pouvez également me contacter par téléphone au 06 84 93 58 23.</p>

  526. <p>Cordialement,<br />

  527. David</p>

  528. <h2>Résultats</h2>

  529. <p>Je suis conscient de la difficulté de l’exercice, surtout réalisé en 2 heures, j’ai moi-même été pressé par le temps et dû proposer une solution JS pour le zen mode qui ne me satisfait pas et à relire le mail je pense que j’aurais changé le style mais c’est le jeu. Dans tous les échanges qui ont suivi, j’ai beaucoup insisté sur le fait qu’il s’agissait de <em>mon</em> point de vue et qu’il différait peut-être beaucoup de celui du directeur technique (Olivier si tu lis ces lignes…).</p>

  530. <p>Une seule personne sur les 10 présentes a réussie a identifier le destinataire du mail. Les autres se sont principalement adressées aux ressources humaines. Cela a donné lieu à une discussion sur l’intérêt de connaître le destinataire et de suivre <a href="https://twitter.com/ogrange">ses centres d’intérêts</a>. Ici il fallait clairement parler de React :-).</p>

  531. <p>La moitié des mails ont été des fichiers PDF joints (ou pire : du docx) comportant le CV et une lettre de candidature générique. Cela a permis de discuter de l’intérêt d’un CV et de l’importance de mettre sa candidature directement dans le corps du mail. Il a aussi été question de ratisser large vs. s’adresser à une personne et un projet. Problématique qu’ils ont déjà lors de leur recherche de stage.</p>

  532. <p>Deux étudiants ont personnalisé la candidature mais sans aller assez loin et en donnant des informations et principes trop généralistes pour être pertinents (tenter d’apprendre ce qu’est le <em>responsive design</em> à un directeur technique de journal en ligne n’est à mon avis pas une bonne idée). Il faut savoir être force de proposition tout en restant humble.</p>

  533. <p>Trois personnes ont fait des audits de performances et ont réutilisé ce que l’on avait vu en cours pour proposer leurs compétences de manière pertinente. C’est peu mais c’est déjà ça !</p>

  534. <p>Globalement, je suis un peu déçu de ce qu’ils m’ont proposé mais je pense que la discussion qui a suivie leur a donné de la matière pour réfléchir et améliorer leur approche.</p>

  535. <h2>Évaluation</h2>

  536. <p>J’ai toujours beaucoup de mal avec la notation demandée. Après discussion, la note finale aura 3 origines :</p>

  537. <ul>

  538. <li>une auto-évaluation portant sur leurs acquis puis sur l’exercice ;</li>

  539. <li>une évaluation collective sur l’exercice ;</li>

  540. <li>une évaluation de ma part sur l’exercice.</li>

  541. </ul>

  542. <p>L’évaluation auto/collective à base de post-it fonctionne très bien et prend un quart d’heure pour 10 personnes.</p>

  543. </article>

  544. 

  545. 

  546.   <figure class="image" property="schema:image">

  547.     <img src="/static/david/blog/2015/cours-iut-candidature-spontanee.jpg" alt="" />

  548.   </figure>

  549. 

  550. 

  551. 

  552. <nav id="jumpto">

  553.   <p>

  554.     <a rel=prev href="/david/blog/2015/livre-email/">← Livre et email</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2015/cours-iut-animations-web/">Cours IUT : Animations Web →</a>

  555.   </p>

  556. </nav>

  557. 

  558. <footer>

  559.   <div>

  560.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  561.     <p>

  562.       Bonjour/Hi!

  563.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  564.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  565.     </p>

  566.     <p>

  567.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  568.     </p>

  569. 

  570.       <p>

  571.         Les dernières publications hebdomadaires sont :

  572.       </p>

  573.       <ul class="with_columns">

  574. 

  575.           <li>

  576.             <a href="/david/stream/2019/12/31/">Merci</a>

  577.           </li>

  578. 

  579.           <li>

  580.             <a href="/david/stream/2019/12/27/">Intemporels</a>

  581.           </li>

  582. 

  583.           <li>

  584.             <a href="/david/stream/2019/12/24/">Outils</a>

  585.           </li>

  586. 

  587.           <li>

  588.             <a href="/david/stream/2019/12/17/">Origines</a>

  589.           </li>

  590. 

  591.           <li>

  592.             <a href="/david/stream/2019/12/10/">Publier</a>

  593.           </li>

  594. 

  595.           <li>

  596.             <a href="/david/stream/2019/12/03/">En forêt</a>

  597.           </li>

  598. 

  599.           <li>

  600.             <a href="/david/stream/2019/11/26/">Ecocentric</a>

  601.           </li>

  602. 

  603.           <li>

  604.             <a href="/david/stream/2019/11/19/">Se livrer</a>

  605.           </li>

  606. 

  607.           <li>

  608.             <a href="/david/stream/2019/11/12/">Dépendances</a>

  609.           </li>

  610. 

  611.           <li>

  612.             <a href="/david/stream/2019/11/05/">Positif</a>

  613.           </li>

  614. 

  615.           <li>

  616.             <a href="/david/stream/2019/10/29/">Dettes</a>

  617.           </li>

  618. 

  619.           <li>

  620.             <a href="/david/stream/2019/10/22/">Privilèges</a>

  621.           </li>

  622. 

  623.           <li>

  624.             <a href="/david/stream/2019/10/15/">Discrétion</a>

  625.           </li>

  626. 

  627.           <li>

  628.             <a href="/david/stream/2019/10/08/">Désespérance</a>

  629.           </li>

  630. 

  631.           <li>

  632.             <a href="/david/stream/2019/10/01/">Présent</a>

  633.           </li>

  634. 

  635.           <li>

  636.             <a href="/david/stream/2019/09/24/">Manifester</a>

  637.           </li>

  638. 

  639.           <li>

  640.             <a href="/david/stream/2019/09/17/">Arpenter</a>

  641.           </li>

  642. 

  643.           <li>

  644.             <a href="/david/stream/2019/09/10/">Nostalgie</a>

  645.           </li>

  646. 

  647.           <li>

  648.             <a href="/david/stream/2019/09/03/">Déconstruire</a>

  649.           </li>

  650. 

  651.           <li>

  652.             <a href="/david/stream/2019/08/27/">Documenter</a>

  653.           </li>

  654. 

  655.           <li>

  656.             <a href="/david/stream/2019/08/20/">Frustration</a>

  657.           </li>

  658. 

  659.           <li>

  660.             <a href="/david/stream/2019/08/13/">Holisme</a>

  661.           </li>

  662. 

  663.           <li>

  664.             <a href="/david/stream/2019/08/06/">1%</a>

  665.           </li>

  666. 

  667.           <li>

  668.             <a href="/david/stream/2019/07/30/">Exemplarité</a>

  669.           </li>

  670. 

  671.           <li>

  672.             <a href="/david/stream/2019/07/23/">Timelines</a>

  673.           </li>

  674. 

  675.           <li>

  676.             <a href="/david/stream/2019/07/16/">Écoute</a>

  677.           </li>

  678. 

  679.           <li>

  680.             <a href="/david/stream/2019/07/02/">Anxiété</a>

  681.           </li>

  682. 

  683.           <li>

  684.             <a href="/david/stream/2019/06/21/">À lier</a>

  685.           </li>

  686. 

  687.           <li>

  688.             <a href="/david/stream/2019/06/14/">Pauvreté</a>

  689.           </li>

  690. 

  691.           <li>

  692.             <a href="/david/stream/2019/06/07/">Amateur</a>

  693.           </li>

  694. 

  695.           <li>

  696.             <a href="/david/stream/2019/05/31/">Pollution</a>

  697.           </li>

  698. 

  699.           <li>

  700.             <a href="/david/stream/2019/05/24/">Apaisement</a>

  701.           </li>

  702. 

  703.           <li>

  704.             <a href="/david/stream/2019/05/10/">Folie</a>

  705.           </li>

  706. 

  707.           <li>

  708.             <a href="/david/stream/2019/05/03/">Sympathie</a>

  709.           </li>

  710. 

  711.           <li>

  712.             <a href="/david/stream/2019/04/12/">Péremption</a>

  713.           </li>

  714. 

  715.           <li>

  716.             <a href="/david/stream/2019/04/05/">Définitions</a>

  717.           </li>

  718. 

  719.           <li>

  720.             <a href="/david/stream/2019/03/29/">Acceptation</a>

  721.           </li>

  722. 

  723.           <li>

  724.             <a href="/david/stream/2019/03/22/">Dissonance</a>

  725.           </li>

  726. 

  727.           <li>

  728.             <a href="/david/stream/2019/03/15/">Reconnaissance</a>

  729.           </li>

  730. 

  731.           <li>

  732.             <a href="/david/stream/2019/03/08/">Lecture</a>

  733.           </li>

  734. 

  735.           <li>

  736.             <a href="/david/stream/2019/03/01/">Journaux</a>

  737.           </li>

  738. 

  739.           <li>

  740.             <a href="/david/stream/2019/02/22/">Écriture</a>

  741.           </li>

  742. 

  743.           <li>

  744.             <a href="/david/stream/2019/02/15/">Kyriarchie</a>

  745.           </li>

  746. 

  747.           <li>

  748.             <a href="/david/stream/2019/02/08/">Mots-serrures</a>

  749.           </li>

  750. 

  751.           <li>

  752.             <a href="/david/stream/2019/02/01/">Sans voie</a>

  753.           </li>

  754. 

  755.           <li>

  756.             <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>

  757.           </li>

  758. 

  759.           <li>

  760.             <a href="/david/stream/2019/01/18/">Agilité</a>

  761.           </li>

  762. 

  763.           <li>

  764.             <a href="/david/stream/2019/01/11/">Métaphores</a>

  765.           </li>

  766. 

  767.           <li>

  768.             <a href="/david/stream/2019/01/04/">Balbutiements</a>

  769.           </li>

  770. 

  771.       </ul>

  772. 

  773.     <p>

  774.       Voici quelques articles choisis :

  775.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  776.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  777.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  778.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  779.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  780.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  781.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  782.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  783.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  784.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  785.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  786.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  787.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  788.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  789.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  790.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  791.     </p>

  792.     <p>

  793.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  794.     </p>

  795.     <p>

  796.       Je ne traque pas ta navigation mais mon

  797.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  798.       conserve des logs d’accès.

  799.     </p>

  800.   </div>

  801. </footer>

  802. <script type="text/javascript">

  803.   ;(_ => {

  804.     const jumper = document.getElementById('jumper')

  805.     jumper.addEventListener('click', e => {

  806.       e.preventDefault()

  807.       const anchor = e.target.getAttribute('href')

  808.       const targetEl = document.getElementById(anchor.substring(1))

  809.       targetEl.scrollIntoView({behavior: 'smooth'})

  810.     })

  811.   })()

  812. </script>

  813. 

  814.   <script>

  815.   /* Service workers */

  816.   if (navigator.serviceWorker) {

  817.     window.addEventListener('load', function () {

  818.       var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'

  819.       function sendLinks (selector) {

  820.         var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {

  821.           return link.getAttribute('href')

  822.         })

  823.         links.push(location.pathname)  // Put the current page in cache too.

  824.         navigator.serviceWorker.controller.postMessage({ links: links })

  825.       }

  826.       navigator.serviceWorker.getRegistration()

  827.         .then(function (registration) {

  828.           if (!registration || !navigator.serviceWorker.controller) {

  829.             return navigator.serviceWorker.register('/serviceworker.js')

  830.               .then(navigator.serviceWorker.ready)

  831.               .then(function () {

  832.                 console.log('[ServiceWorker] Ready to go!')

  833.               })

  834.               .catch(console.error.bind(console))

  835.           } else {

  836.             console.log('[ServiceWorker] Send links via registration')

  837.             sendLinks(selector)

  838.           }

  839.         })

  840.       navigator.serviceWorker.addEventListener('controllerchange', function () {

  841.         console.log('[ServiceWorker] Send links via controller change')

  842.         sendLinks(selector)

  843.       })

  844.       navigator.serviceWorker.addEventListener('message', function (event) {

  845.         var link = document.querySelector('a[href="' + event.data.link + '"]')

  846.         if (event.data.status && link) {

  847.           link.style.backgroundColor = '#2d7474'

  848.           link.style.color = '#f0f0ea'

  849. 

  850.             link.setAttribute('title', 'En cache pour consultation sans connexion')

  851. 

  852.         }

  853.       })

  854.     })

  855.   } else {

  856.     console.warn('[ServiceWorker] No cache for old browsers.')

  857.   }

  858. </script>