davidbgk
/
larlet-fr-david
Beobachten 1
Favorisieren 0
Fork 0
Code Releases 0 Aktivität
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
530 Commits
1 Branch
Struktur: 963cae17b3
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „963cae17b3“
${ noResults }
larlet-fr-david/david/blog/2015/cours-iut-web-mobile/index.html

index.html 30KB
Originalformat Blame Verlauf

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835 
  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 : Web Mobile — 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-web-mobile/">

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

  31.   <meta name="description" content="Mon objectif est qu’ils arrivent à exprimer leurs connaissances actuelles et leurs souhaits pour ce cours." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Mon objectif est qu’ils arrivent à exprimer leurs connaissances actuelles et leurs souhaits pour ce cours." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Cours IUT : Web Mobile" />

  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-web-mobile/" />

  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-web-mobile.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 : Web Mobile

  468.   <time>Publié le 25 janvier 2015</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>The more I build for the web, the more the term ‘device-agnostic’ endears itself to me.</p>

  473. <p>I used to think it merely dealt with basing responsive breakpoints on content rather than particular devices, but there’s more to devices than the size of their screens. A device-agnostic approach also takes into account infinite combinations of screen resolution, input method, browser capability, and connection speed.

  474. With such a wide range of possibilities, the sensible thing to do is to zero in on the harshest conditions (or toughest things to deliver) and build from there. Like cars designed to perform in extreme heat or on icy roads, websites should be built to face the reality of the web’s inherent variability. In my mind this approach addresses the following from the beginning:</p>

  475. <ul>

  476. <li>Hostile browsers</li>

  477. <li>Tiny screens</li>

  478. <li>Slow connection speeds</li>

  479. <li>Touch inputs</li>

  480. </ul>

  481. <p><cite><em><a href="http://trentwalton.com/2014/03/10/device-agnostic/">Device-Agnostic</a></em> (<a href="/david/cache/bee263ecc2b22dbc31411b34535f4f44/">cache</a>)</cite></p>

  482. </blockquote>

  483. <p>Je démarre <a href="/david/pro/enseignement/">un cours</a> intitulé <strong>Web Mobile</strong> avec une nouvelle classe demain, j’ai 28 heures réparties en matinées. La première séance de découverte sera l’occasion de définir ensemble ce que l’on entend par Web Mobile car je n’ai pas de définition, je ne suis même pas sûr que ça veuille vraiment dire quelque chose (mais bon c’est moi qui ait proposé le titre à la responsable alors <em>mea culpa</em>).</p>

  484. <p>Je compte pour cela faire usage d’outils à base de sujets/concepts, de priorisation, de réajustement et de flux. Toute ressemblance avec des outils liés à l’agilité serait forcément fortuite. Ce n’est pas encore tout à fait clair pour moi et c’est une bonne chose, ce sont des outils que je souhaite inventer/adapter/tordre/jeter <em>avec</em> les participants. <strong>Mon objectif est qu’ils arrivent à exprimer leurs connaissances actuelles et leurs souhaits pour ce cours.</strong> Afin que l’on puisse ensuite décider ensemble de ce que l’on va traiter tout en réajustant en cours de route s’il le faut.</p>

  485. <p>Il devrait y avoir une douzaine de personnes plus techniques que la dernière fois, ce qui donne une inertie de groupe moins importante. De quoi explorer de nouvelles façons de partager et de produire collectivement. On va forcément parler de <a href="http://stratechery.com/2015/mobile-first/">mobile-first</a> (<a href="/david/cache/493740e238723f55bddc9416ad8c512b/">cache</a>) et de <a href="http://blog.memespring.co.uk/2015/01/17/the-challenge-for-web-designers-in-2015/">challenges pour les web designers</a> (<a href="/david/cache/3c8f845f0b869e33f338b19713331de2/">cache</a>), je suis curieux et impatient de voir ce qu’ils vont me proposer en retour…</p>

  486. </article>

  487. 

  488.   <section>

  489.     <h3>Discussion suite à l’article :</h3>

  490. 

  491.       <article id="comment-1" class="comment">

  492.         <p>Je donne justement un cours d’une trentaine d’heures intitulé "Web Mobile" chez Ingésup Bordeaux. <a href="https://www.dropbox.com/s/kt41t5x5jgcp2tb/B2-WebMobile-01-Presentation_Cours.pdf?dl=0">Voilà le périmètre général du cours, destiné à des BAC+2.</a></p>

  493. <p>On y parle de RWD, bien sûr, mais pas uniquement du point de vue technique (la technique d’ailleurs m’intéresse peu, car je considère que d’ici à ce qu’il sorte d’école dans 3 ans, beaucoup de choses auront changé). En revanche, j’essaie de leur faire comprendre le monde du Web au sens large, ses valeurs (notamment l’interopérabilité et l’accessibilité qui sont les deux phares du device-agnostic). </p>

  494. <p>On y parle aussi de la gestion d’un projet, avec des TPs de mise en situation. Je leur donne un site pas RWD du tout et leur demande au moins 3 approches différentes de ce que pourrait être le design adapté pour Mobile. Ensuite nous en choississons une, puis je change l’expression du besoin en ajoutant des contraintes issues de l’utilisation d’un CMS... bref, on joue au client "normal" :)</p>

  495. <p>Enfin, on va parler des APIs, notamment REST, en expliquant que le Web, c’est aussi bientôt une multitude d’objets connectés qui pourront vouloir consommer des données ou à leur tour offrir des services...</p>

  496. <p>Si ça peut t’aider ;)</p>

  497.         <p><cite>Boris Schapira, le <a href="#comment-1">2015-01-25 à 20:42:06</a></cite></p>

  498.       </article>

  499. 

  500.       <article id="comment-2" class="comment">

  501.         <p>Discuter du Web Mobile et nos croyances. Tu peux commencer le cours en faisant un tableau avec deux colonnes: Web Mobile et Pas Web Mobile.

  502. Et demander à chacun des participants de donner une phrase ou un mot pour chaque colonne.</p>

  503. <p>Cela donnera un bon aperçu de comment ils imaginent cela (ou n’imagine pas cela) et ainsi de construire des discussions à partir de cela. Exemple un site Web sur Arduino que l’on déplace partout fait-il parti du Web Mobile ? Est-ce que Web Mobile est seulement de lire l’information à travers un petit écran ? Est-ce des infrastructures ? Est-ce des types d’interactions ? etc.</p>

  504.         <p><cite>Karl Dubost, le <a href="#comment-2">2015-01-26 à 02:07:41</a></cite></p>

  505.       </article>

  506. 

  507.       <article id="comment-3" class="comment">

  508.         <blockquote>

  509. <p>Si ça peut t’aider ;)</p>

  510. </blockquote>

  511. <p>Merci, ça me donne effectivement des idées, je n’avais pas pensé à parler des objets connectés notamment.</p>

  512. <blockquote>

  513. <p>Discuter du Web Mobile et nos croyances. Tu peux commencer le cours en faisant un tableau avec deux colonnes: Web Mobile et Pas Web Mobile.</p>

  514. </blockquote>

  515. <p>Héhé, c’est justement <a href="https://larlet.fr/david/blog/2015/cours-iut-construction-collaborative/">ce que j’ai fait</a> :)

  516. Ils ne sont pas allé plus loin dans les couches réseau par contre. Mais ça a discuté de vie privée, ce qui m’a agréablement surpris.</p>

  517.         <p><cite>David Larlet, le <a href="#comment-3">2015-01-26 à 22:23:18</a></cite></p>

  518.       </article>

  519. 

  520.   </section>

  521. 

  522. 

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

  524.     <img src="/static/david/blog/2015/cours-iut-web-mobile.jpg" alt="" />

  525.   </figure>

  526. 

  527. 

  528. 

  529. <nav id="jumpto">

  530.   <p>

  531.     <a rel=prev href="/david/blog/2015/formations-explorations/">← Formations et explorations</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2015/cours-iut-construction-collaborative/">Cours IUT : Construction collaborative →</a>

  532.   </p>

  533. </nav>

  534. 

  535. <footer>

  536.   <div>

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

  538.     <p>

  539.       Bonjour/Hi!

  540.       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>

  541.       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>).

  542.     </p>

  543.     <p>

  544.       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>.

  545.     </p>

  546. 

  547.       <p>

  548.         Les dernières publications hebdomadaires sont :

  549.       </p>

  550.       <ul class="with_columns">

  551. 

  552.           <li>

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

  554.           </li>

  555. 

  556.           <li>

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

  558.           </li>

  559. 

  560.           <li>

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

  562.           </li>

  563. 

  564.           <li>

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

  566.           </li>

  567. 

  568.           <li>

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

  570.           </li>

  571. 

  572.           <li>

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

  574.           </li>

  575. 

  576.           <li>

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

  578.           </li>

  579. 

  580.           <li>

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

  582.           </li>

  583. 

  584.           <li>

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

  586.           </li>

  587. 

  588.           <li>

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

  590.           </li>

  591. 

  592.           <li>

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

  594.           </li>

  595. 

  596.           <li>

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

  598.           </li>

  599. 

  600.           <li>

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

  602.           </li>

  603. 

  604.           <li>

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

  606.           </li>

  607. 

  608.           <li>

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

  610.           </li>

  611. 

  612.           <li>

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

  614.           </li>

  615. 

  616.           <li>

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

  618.           </li>

  619. 

  620.           <li>

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

  622.           </li>

  623. 

  624.           <li>

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

  626.           </li>

  627. 

  628.           <li>

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

  630.           </li>

  631. 

  632.           <li>

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

  634.           </li>

  635. 

  636.           <li>

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

  638.           </li>

  639. 

  640.           <li>

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

  642.           </li>

  643. 

  644.           <li>

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

  646.           </li>

  647. 

  648.           <li>

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

  650.           </li>

  651. 

  652.           <li>

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

  654.           </li>

  655. 

  656.           <li>

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

  658.           </li>

  659. 

  660.           <li>

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

  662.           </li>

  663. 

  664.           <li>

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

  666.           </li>

  667. 

  668.           <li>

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

  670.           </li>

  671. 

  672.           <li>

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

  674.           </li>

  675. 

  676.           <li>

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

  678.           </li>

  679. 

  680.           <li>

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

  682.           </li>

  683. 

  684.           <li>

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

  686.           </li>

  687. 

  688.           <li>

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

  690.           </li>

  691. 

  692.           <li>

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

  694.           </li>

  695. 

  696.           <li>

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

  698.           </li>

  699. 

  700.           <li>

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

  702.           </li>

  703. 

  704.           <li>

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

  706.           </li>

  707. 

  708.           <li>

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

  710.           </li>

  711. 

  712.           <li>

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

  714.           </li>

  715. 

  716.           <li>

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

  718.           </li>

  719. 

  720.           <li>

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

  722.           </li>

  723. 

  724.           <li>

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

  726.           </li>

  727. 

  728.           <li>

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

  730.           </li>

  731. 

  732.           <li>

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

  734.           </li>

  735. 

  736.           <li>

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

  738.           </li>

  739. 

  740.           <li>

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

  742.           </li>

  743. 

  744.           <li>

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

  746.           </li>

  747. 

  748.       </ul>

  749. 

  750.     <p>

  751.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  768.     </p>

  769.     <p>

  770.       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>.

  771.     </p>

  772.     <p>

  773.       Je ne traque pas ta navigation mais mon

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

  775.       conserve des logs d’accès.

  776.     </p>

  777.   </div>

  778. </footer>

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

  780.   ;(_ => {

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

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

  783.       e.preventDefault()

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

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

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

  787.     })

  788.   })()

  789. </script>

  790. 

  791.   <script>

  792.   /* Service workers */

  793.   if (navigator.serviceWorker) {

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

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

  796.       function sendLinks (selector) {

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

  798.           return link.getAttribute('href')

  799.         })

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

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

  802.       }

  803.       navigator.serviceWorker.getRegistration()

  804.         .then(function (registration) {

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

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

  807.               .then(navigator.serviceWorker.ready)

  808.               .then(function () {

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

  810.               })

  811.               .catch(console.error.bind(console))

  812.           } else {

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

  814.             sendLinks(selector)

  815.           }

  816.         })

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

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

  819.         sendLinks(selector)

  820.       })

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

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

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

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

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

  826. 

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

  828. 

  829.         }

  830.       })

  831.     })

  832.   } else {

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

  834.   }

  835. </script>