aboutsummaryrefslogtreecommitdiff
path: root/files/fr/développement_web
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 21:46:22 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 21:46:22 -0500
commita065e04d529da1d847b5062a12c46d916408bf32 (patch)
treefe0f8bcec1ff39a3c499a2708222dcf15224ff70 /files/fr/développement_web
parent218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (diff)
downloadtranslated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.gz
translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.bz2
translated-content-a065e04d529da1d847b5062a12c46d916408bf32.zip
update based on https://github.com/mdn/yari/issues/2028
Diffstat (limited to 'files/fr/développement_web')
-rw-r--r--files/fr/développement_web/design_web_responsive/index.html49
1 files changed, 0 insertions, 49 deletions
diff --git a/files/fr/développement_web/design_web_responsive/index.html b/files/fr/développement_web/design_web_responsive/index.html
deleted file mode 100644
index 7dc87fc640..0000000000
--- a/files/fr/développement_web/design_web_responsive/index.html
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: Design web Responsive
-slug: Développement_Web/Design_web_Responsive
-tags:
- - Design responsive
- - Développement Web
- - Mobile
-translation_of: Web/Progressive_web_apps
----
-<p><span id="result_box" lang="fr"><span class="hps">Maintenant</span> <span class="hps">que les utilisateurs du Web</span> <span class="hps">se servent de plus en plus d'appareils mobiles</span><span class="hps"> pour</span> <span class="hps">naviguer sur les sites</span> <span class="hps">web</span> <span class="hps">et pour leurs applications</span><span>, les concepteurs</span> <span class="hps">et les développeurs web</span> <span class="hps">doivent s'assurer</span> <span class="hps">que</span> <span class="hps">leurs créations</span> ont unbon rendu visuel et un bon fonctionnement <span class="hps">aussi bien</span> <span class="hps">sur les appareils mobiles</span> <span class="hps">que</span> <span class="hps">sur les ordinateurs</span> <span class="hps">de bureau traditionnels</span><span>.</span> <span class="hps">Concepteur</span> <span class="hps">de premier plan,</span> <span class="hps">Luke</span> <span class="hps">Wroblewski</span> <span class="hps">préconise</span> <span class="hps">la conception pour</span> <span class="hps">« mobiles d'abord » (<a href="http://www.lukew.com/ff/entry.asp?933" title="http://www.lukew.com/ff/entry.asp?933">article en anglais</a>)</span><span>,</span> <span class="hps">plutôt que comme</span> <span class="hps">une réflexion venant après la conception pour les</span><span class="hps"> postes de travail</span><span>.</span> <span class="hps">Que votre </span><span class="hps">conception</span> <span class="hps">pour les appareils mobiles</span> soit votre<span class="hps"> objectif</span> <span class="hps">principal</span> <span class="hps">ou un supplément sympa</span><span>, vous pouvez utiliser</span> <span class="hps">la puissance des</span> <span class="hps">CSS</span> <span class="hps">pour vous assurer que</span> <span class="hps">le même contenu</span> <span class="hps">est accessible</span> <span class="hps">sur toutes les plateformes</span> <span class="hps">matérielles</span><span>,</span> <span class="hps">des téléphones portables aux</span> <span class="hps">grands écran</span>s <span class="hps">haute définition.</span></span></p>
-<p><span id="result_box" lang="fr"><span class="hps">Cette approche est</span> <span class="hps">connue sous le nom</span> <span class="hps atn">«</span><span>Web design</span> <span class="hps">réactif</span><span> »</span><span>.</span> <span class="hps">Certaines de ses</span> <span class="hps">stratégies comprennent </span><span>:</span></span></p>
-<ul>
- <li><span lang="fr"><strong><span class="hps">Disposition liquide</span> <span class="hps">ou</span> <span class="hps">fluide </span></strong><span><strong>: </strong>définir</span> <span class="hps">toutes les largeurs de</span> <span class="hps">conteneurs</span> <span class="hps">en termes</span> <span class="hps">de pourcentages de la</span> <span class="hps">fenêtre</span> <span class="hps">navigateur</span><span>,</span> <span class="hps">afin qu'ils</span> se déploient et se replient <span class="hps">comme</span> <span class="hps">la fenêtre du navigateur</span> <span class="hps">change de taille</span><span>.</span></span></li>
- <li><span id="result_box" lang="fr"><strong><span class="hps">Les media queries</span><span> :</span> </strong><span class="hps">faire appel à</span> <span class="hps">différentes feuilles de style</span> <span class="hps">en fonction des</span> <span class="hps atn">capacités de l'</span><span>écran utilisé</span><span>, comme la taille</span><span>, la résolution</span><span>, le format</span> <span class="hps">et la profondeur</span> <span class="hps">des couleurs.</span></span></li>
- <li><span lang="fr"><strong><span class="hps">Images</span> <span class="hps">fluides </span><span>:</span> </strong><span class="hps">définir les images</span> <span class="hps">pour qu'elles occupent au mieux la largeur maximale de l'écran</span><span>.</span></span></li>
-</ul>
-<h3 id="Exigences_minimales_pour_le_Firefox_Marketplace"><span class="short_text" id="result_box" lang="fr"><span class="hps">Exigences minimales pour</span> le <span class="hps">Firefox</span> </span>Marketplace</h3>
-<p><span id="result_box" lang="fr"><span class="hps">Si vous soumettez</span> <span class="hps">une application sur le marketplace de</span><span class="hps"> Firefox</span> <span class="hps">pour</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">ou</span> <span class="hps">Firefox</span> <span class="hps">pour Android</span><span>, elle doit</span> <span class="hps">être adaptable aux</span> <span class="hps">tailles d'écran</span> <span class="hps">mobiles et</span> <span class="hps">à leur </span><span class="hps">densité en pixels</span><span>.</span> <span class="hps">Gardez à l'esprit</span> <span class="hps">que les plus petits écrans</span> <span class="hps">ne font que</span> <span class="hps">320px</span> <span class="hps">par</span> <span class="hps">480px</span><span>.</span> <span class="hps">Une autre</span> <span class="hps">erreur courante est de</span> <span class="hps">ne pas reconnaître</span> <span class="hps">la densité</span> <span class="hps">de l'écran et</span> <span class="hps">puis</span> <span class="hps">ne pas ajuster</span> <span class="hps">la taille des polices</span> <span class="hps">et des cibles</span> <span class="hps">tactiles</span> <span class="hps">en conséquence.</span> <span class="hps atn">Pour plus d'</span><span>informations, voir</span> <span class="hps">les <a href="/fr/Marketplace/Submission/Marketplace_review_criteria">critères d'examen du Marketplace</a></span><span>.</span></span></p>
-<h2 id="Ressources">Ressources</h2>
-<h3 id="Aperçus"><span class="short_text" id="result_box" lang="fr"><span class="hps">Aperçus</span></span></h3>
-<ul>
- <li><a href="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web design</a> (en anglais), par Ethan Marcotte</li>
- <li><a href="http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design">Guide du débutant du responsive Web design</a> (en anglais), par Rick Petit</li>
- <li><a href="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/">Responsive Web design : ce que c’est et comment l’utiliser</a> (en anglais), par Kayla Knight</li>
- <li><a class="external" href="http://www.lukew.com/ff/entry.asp?1436" title="http://www.lukew.com/ff/entry.asp?1436">Conception Web multi-terminal : une évolution</a> (en anglais), par Luke Wroblewski</li>
- <li><em>Responsive Design Workflow</em> de Stephen Hay (livre, en anglais)</li>
- <li><a href="http://davidl.fr/blog/base-design-adaptatif.html">Les principes fondamentaux du design adaptatif</a>, par David Leuliette</li>
-</ul>
-<h3 id="Techniques">Techniques</h3>
-<ul>
- <li>Page de référence sur les <a href="/fr/docs/CSS/Media_queries">requêtes de média CSS</a></li>
- <li><a href="http://davidwalsh.name/pointer-media-query">Requête de média <em>pointer</em></a> (en anglais), par David Walsh</li>
- <li><a href="http://css-tricks.com/css-media-queries/">Requête de media CSS et utilisation de l’espace disponible</a> (en anglais), par Chris Coyier</li>
- <li><a href="http://www.maxdesign.com.au/articles/liquid/" title="http://www.maxdesign.com.au/articles/liquid/">Mise en forme liquide et facile</a> (en anglais), par Russ Weakley</li>
- <li><a href="http://unstoppablerobotninja.com/entry/fluid-images/">Images fluides</a> (en anglais), par Ethan Marcotte</li>
- <li><a href="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">Conception pour les écrans tactiles</a> (en anglais), par Chris Kemm</li>
- <li><a href="http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/">Responsive Web Design Techniques, Tools and Design Strategies</a> (en anglais), par l'équipe Smashing Editorial</li>
-</ul>
-<h3 id="Outils">Outils</h3>
-<ul>
- <li><a href="/fr/docs/Outils/Vue_adaptative" title="/en-US/docs/Tools/Responsive_Design_View">Vue adaptative</a> de Firefox</li>
-</ul>
-<h3 id="Exemples">Exemples</h3>
-<ul>
- <li><a href="/fr/demos/devderby/2011/october">Démos DevDerby des requêtes de média CSS</a></li>
- <li><a href="http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design">20 exemples fantastiques de l’utilisation des requêtes de média pour le reponsive Web design</a> (en anglais), par Joshua Johnson</li>
- <li><a href="http://designmodo.com/responsive-design-examples/">Responsive Web design : 50 exemples et bonnes pratiques</a> (en anglais)</li>
-</ul>
-<h3 id="sect1"> </h3>