diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
| commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
| tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/kab | |
| parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
| download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip | |
initial commit
Diffstat (limited to 'files/kab')
63 files changed, 4930 insertions, 0 deletions
diff --git a/files/kab/_redirects.txt b/files/kab/_redirects.txt new file mode 100644 index 0000000000..52b7998a39 --- /dev/null +++ b/files/kab/_redirects.txt @@ -0,0 +1,6 @@ +# FROM-URL TO-URL +/kab/docs/Learn/Getting_started_with_the_web /kab/docs/Lmed/Getting_started_with_the_web +/kab/docs/Learn/Getting_started_with_the_web/HTML_basics /kab/docs/Lmed/Getting_started_with_the_web/HTML_basics +/kab/docs/Learn/HTML /kab/docs/Lmed/HTML +/kab/docs/Learn/HTML/Introduction_to_HTML /kab/docs/Lmed/HTML/Introduction_to_HTML +/kab/docs/MDN/Iwenniten /kab/docs/MDN/Contribute/Feedback diff --git a/files/kab/_wikihistory.json b/files/kab/_wikihistory.json new file mode 100644 index 0000000000..3935c9e03d --- /dev/null +++ b/files/kab/_wikihistory.json @@ -0,0 +1,420 @@ +{ + "Games": { + "modified": "2019-09-09T15:32:49.347Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "AlemFarid" + ] + }, + "Games/Imedyaten": { + "modified": "2019-01-17T00:33:41.158Z", + "contributors": [ + "wbamberg", + "AlemFarid" + ] + }, + "Games/Techniques": { + "modified": "2019-01-17T00:32:29.921Z", + "contributors": [ + "wbamberg", + "chrisdavidmills" + ] + }, + "Games/Techniques/3D_collision_detection": { + "modified": "2019-12-17T15:49:04.399Z", + "contributors": [ + "FaridAlem", + "wbamberg", + "AlemFarid" + ] + }, + "Games/Techniques/3D_on_the_web": { + "modified": "2019-03-23T22:19:23.742Z", + "contributors": [ + "wbamberg", + "ngokevin" + ] + }, + "Games/Techniques/3D_on_the_web/Basic_theory": { + "modified": "2019-03-23T22:19:34.430Z", + "contributors": [ + "wbamberg", + "AlemFarid" + ] + }, + "Games/Tools": { + "modified": "2019-01-17T02:47:01.811Z", + "contributors": [ + "wbamberg", + "dkocho4" + ] + }, + "Games/Tools/Engines_and_tools": { + "modified": "2019-03-23T22:15:49.757Z", + "contributors": [ + "wbamberg", + "AlemFarid" + ] + }, + "Games/Tutorials": { + "modified": "2019-03-18T21:15:32.650Z", + "contributors": [ + "wbamberg", + "chrisdavidmills" + ] + }, + "Games/Tutorials/2D_breakout_game_Phaser": { + "modified": "2019-03-23T22:16:31.632Z", + "contributors": [ + "wbamberg", + "AlemFarid" + ] + }, + "Glossary": { + "modified": "2020-10-07T11:11:45.303Z", + "contributors": [ + "peterbe", + "AlemFarid", + "SphinxKnight", + "wbamberg", + "klez" + ] + }, + "Glossary/AJAX": { + "modified": "2019-03-23T22:18:43.050Z", + "contributors": [ + "belkacem77" + ] + }, + "Glossary/Abstraction": { + "modified": "2019-03-23T22:15:41.153Z", + "contributors": [ + "AlemFarid" + ] + }, + "Glossary/CSS": { + "modified": "2019-03-23T22:22:30.398Z", + "contributors": [ + "belkacem77" + ] + }, + "Glossary/HTML": { + "modified": "2019-03-23T22:18:46.086Z", + "contributors": [ + "belkacem77" + ] + }, + "Glossary/HTTP": { + "modified": "2019-03-23T22:18:45.947Z", + "contributors": [ + "belkacem77" + ] + }, + "Glossary/Responsive_web_design": { + "modified": "2019-03-23T22:17:48.925Z", + "contributors": [ + "AlemFarid" + ] + }, + "Glossary/SVG": { + "modified": "2019-03-23T22:18:37.852Z", + "contributors": [ + "AlemFarid", + "belkacem77" + ] + }, + "Glossary/URL": { + "modified": "2019-03-23T22:18:44.119Z", + "contributors": [ + "AlemFarid", + "belkacem77" + ] + }, + "Glossary/XML": { + "modified": "2019-03-23T22:15:36.442Z", + "contributors": [ + "AlemFarid" + ] + }, + "Glossary/aneggaf": { + "modified": "2019-01-17T00:36:04.202Z", + "contributors": [ + "belkacem77" + ] + }, + "Lmed": { + "modified": "2020-07-16T22:43:44.046Z", + "contributors": [ + "AlemFarid", + "SphinxKnight", + "belkacem77" + ] + }, + "Lmed/Getting_started_with_the_web": { + "modified": "2020-07-16T22:33:53.869Z", + "contributors": [ + "AlemFarid", + "jwhitlock", + "Jom97" + ] + }, + "Lmed/Getting_started_with_the_web/HTML_basics": { + "modified": "2020-07-16T22:34:48.291Z", + "contributors": [ + "AlemFarid", + "jwhitlock" + ] + }, + "Lmed/HTML": { + "modified": "2020-07-16T22:22:20.132Z", + "contributors": [ + "jwhitlock", + "chrisdavidmills" + ] + }, + "Lmed/HTML/Introduction_to_HTML": { + "modified": "2020-07-16T22:22:50.316Z", + "contributors": [ + "jwhitlock", + "AlemFarid" + ] + }, + "MDN": { + "modified": "2020-02-19T19:27:51.835Z", + "contributors": [ + "jswisher", + "SphinxKnight", + "wbamberg" + ] + }, + "MDN/About": { + "modified": "2020-01-18T14:01:23.033Z", + "contributors": [ + "AlemFarid" + ] + }, + "MDN/Contribute": { + "modified": "2020-12-07T17:30:12.371Z", + "contributors": [ + "wbamberg", + "chrisdavidmills" + ] + }, + "MDN/Contribute/Feedback": { + "modified": "2020-09-30T17:51:40.409Z", + "contributors": [ + "chrisdavidmills", + "jswisher", + "AlemFarid" + ] + }, + "MDN/Contribute/Howto": { + "modified": "2020-12-07T19:29:58.278Z", + "contributors": [ + "wbamberg", + "jswisher" + ] + }, + "MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2019-01-17T02:12:47.706Z", + "contributors": [ + "wbamberg", + "AlemFarid" + ] + }, + "MDN/Tamezdaynutt": { + "modified": "2020-01-08T19:08:17.925Z", + "contributors": [ + "AlemFarid", + "SphinxKnight", + "wbamberg" + ] + }, + "Mozilla": { + "modified": "2020-12-02T22:31:01.595Z", + "contributors": [ + "alispivak" + ] + }, + "Mozilla/Add-ons": { + "modified": "2019-03-18T21:06:18.241Z", + "contributors": [ + "AlemFarid", + "belkacem77" + ] + }, + "Mozilla/Add-ons/WebExtensions": { + "modified": "2020-06-14T11:53:14.537Z", + "contributors": [ + "AlemFarid" + ] + }, + "Mozilla/Firefox": { + "modified": "2020-12-07T09:30:13.714Z", + "contributors": [ + "jswisher" + ] + }, + "Mozilla/Firefox/Releases": { + "modified": "2020-07-02T18:00:56.984Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Mozilla/Firefox/Releases/78": { + "modified": "2020-07-05T15:04:56.076Z", + "contributors": [ + "AlemFarid" + ] + }, + "Tools": { + "modified": "2020-07-16T22:44:15.854Z", + "contributors": [ + "SphinxKnight", + "AlemFarid", + "belkacem77" + ] + }, + "Tools/Debugger": { + "modified": "2020-07-16T22:35:04.954Z", + "contributors": [ + "AlemFarid", + "belkacem77" + ] + }, + "Tools/Network_Monitor": { + "modified": "2020-07-16T22:35:30.601Z", + "contributors": [ + "AlemFarid" + ] + }, + "Tools/Page_inspector": { + "modified": "2020-07-16T22:34:28.344Z", + "contributors": [ + "AlemFarid" + ] + }, + "Tools/Performance": { + "modified": "2020-07-16T22:36:12.978Z", + "contributors": [ + "AlemFarid" + ] + }, + "Tools/Tadiwent_Web": { + "modified": "2020-07-16T22:34:06.350Z", + "contributors": [ + "AlemFarid" + ] + }, + "Web": { + "modified": "2020-01-09T06:29:14.605Z", + "contributors": [ + "AlemFarid", + "Selyan", + "belkacem77", + "mfluehr" + ] + }, + "Web/API": { + "modified": "2020-01-04T18:01:51.633Z", + "contributors": [ + "AlemFarid" + ] + }, + "Web/CSS": { + "modified": "2020-01-03T13:33:07.361Z", + "contributors": [ + "AlemFarid", + "SphinxKnight", + "belkacem77" + ] + }, + "Web/CSS/Tools": { + "modified": "2019-03-23T22:17:59.022Z", + "contributors": [ + "AlemFarid" + ] + }, + "Web/Guide": { + "modified": "2019-03-23T22:18:27.235Z", + "contributors": [ + "AlemFarid", + "chrisdavidmills" + ] + }, + "Web/Guide/Graphics": { + "modified": "2020-01-04T17:51:47.680Z", + "contributors": [ + "AlemFarid" + ] + }, + "Web/HTML": { + "modified": "2020-01-03T12:52:00.407Z", + "contributors": [ + "AlemFarid", + "SphinxKnight", + "FaridAlem", + "belkacem77" + ] + }, + "Web/HTTP": { + "modified": "2020-01-08T19:19:29.377Z", + "contributors": [ + "AlemFarid", + "FaridAlem" + ] + }, + "Web/JavaScript": { + "modified": "2020-03-12T19:45:00.807Z", + "contributors": [ + "AlemFarid", + "SphinxKnight", + "belkacem77" + ] + }, + "Web/JavaScript/Amnir": { + "modified": "2020-03-12T19:46:27.549Z", + "contributors": [ + "AlemFarid" + ] + }, + "Web/MathML": { + "modified": "2020-01-08T18:43:48.020Z", + "contributors": [ + "AlemFarid" + ] + }, + "Web/Reference": { + "modified": "2019-03-23T22:21:37.007Z", + "contributors": [ + "AlemFarid", + "andrealeone" + ] + }, + "Web/Reference/API": { + "modified": "2019-03-18T21:25:38.238Z", + "contributors": [ + "AlemFarid", + "belkacem77" + ] + }, + "Web/SVG": { + "modified": "2019-03-23T22:15:43.275Z", + "contributors": [ + "AlemFarid" + ] + }, + "Web/Tuffart": { + "modified": "2020-01-05T20:38:50.587Z", + "contributors": [ + "AlemFarid" + ] + }, + "Web/Tutorials": { + "modified": "2019-03-23T22:14:38.443Z", + "contributors": [ + "AlemFarid" + ] + } +}
\ No newline at end of file diff --git a/files/kab/games/imedyaten/index.html b/files/kab/games/imedyaten/index.html new file mode 100644 index 0000000000..370f14cee4 --- /dev/null +++ b/files/kab/games/imedyaten/index.html @@ -0,0 +1,126 @@ +--- +title: Imedyaten +slug: Games/Imedyaten +translation_of: Games/Examples +--- +<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div> + +<p class="summary">Asabter agi yesmirew kra n timsenszaɣin n tatiknulujit n web yesewhamen iw akken a tizmirem ad agmem tahregt,u a-tt-urarem sumata yis.d anagi n wayen i tzemrem a tgem s JavaScript,WebGL d tatiknulujit n tuqqna.snat n tigezmiwin timezwura tt-umuɣent uraren ay tt-uraren,mad wayeḍ asun n catch-all iw sken n timsenszaɣin ur nelli d aḍulli deg uraren imyermuden.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Uraren_n_baṭṭeltimsenszaɣin">Uraren n baṭṭel/timsenszaɣin</h2> + +<dl> + <dt><a href="http://www.beloola.com">Beloola</a></dt> + <dd> BeloolaWebVR d agwni sdded n iramsuten.tarmit yestufan deg igdilen 2D u ɣef VR HMD (Iɣewwaren / Eddu ɣer askar VR).</dd> + <dt><a href="http://playcanv.as/p/aP0oxhUr">Tanx</a></dt> + <dd>Urar imenɣi s <u><strong>char</strong></u> agetmyuraren,yett wasnulfa s <a href="https://playcanvas.com/">PlayCanvas</a>.</dd> + <dt><a href="https://robertsspaceindustries.com/comm-link/transmission/14704-Hyper-Vanguard-Force">Hyper Vanguard Force</a></dt> + <dd>Urar n nteg azidal n adrurem aratak.</dd> + <dt><a href="http://playcanv.as/p/JtL2iqIH">Swooop</a></dt> + <dd>Urar n tufga s usafag:snaɣdet asafag n wen u err-t-ed isɣunen.tikkelt nniḍen,yettwesnulfa s. <a href="https://playcanvas.com/">PlayCanvas</a>.</dd> + <dt><a href="https://ga.me/games/save-the-day">Sellek ass </a></dt> + <dd>Srifeg s helikupter usellek nnig umḍiq n tawaɣit u sellek tiɣtasin i weḥlen (ga.me.)</dd> + <dt><a href="https://ga.me/games/polycraft">Polycraft</a></dt> + <dd>Azder d urar n tudra.sniremet tigzirt u smernayet imsziwen.</dd> + <dt><a href="http://hexgl.bkcore.com/">HexGL</a></dt> + <dd>Urar n temszizla timalit arurad.</dd> + <dt><a href="http://beta.unity3d.com/jonas/DT2/">Dead Trigger 2</a></dt> + <dd>Igi aklassiki n usimas u ẓumbit get s. <a href="http://unity3d.com/">Unity3D</a>.</dd> + <dt><a href="http://beta.unity3d.com/jonas/AngryBots/">Angry Bots</a></dt> + <dd>Alyen-esque yiwen n timalt iẓumetrikit amdan wis 3 i nteg imsenszaɣen eg s <a href="http://unity3d.com/">Unity3D</a>.</dd> + <dt><a href="http://sandbox.photonstorm.com/html5/nutmeg/">Nutmeg</a></dt> + <dd>Adrurem umaqqal n agwni d igi.</dd> + <dt><a href="http://zibbo.com/en/904/back-to-candyland-episode-1">Tuɣalin ɣer Candyland</a></dt> + <dt>Tamelɣa-3 (Candy Crush) aɣanib n urar.</dt> +</dl> + +<dl> + <dt><a href="http://playbiolab.com/">Biolab Disaster</a></dt> + <dd>Side-scrolling adrurem n nteg.</dd> + <dt><a href="http://phoboslab.org/xtype/">X-Type</a></dt> + <dd> Timsenszaɣin aratak msudeɣent seg tallunt n nteg..</dd> + <dt><a href="http://phoboslab.org/xibalba/">Xibalba</a></dt> + <dd>Amahray(Doom Style) amsenṭeg amezwaru.</dd> + <dt><a href="https://timeinvariant.github.io/gorescript/play/">Gorescript</a></dt> + <dd>Aɣanib nniḍen amsenszaɣ amsenteg amezwaru .</dd> + <dt><a href="http://hypnoticowl.com/games/the-wizard/">Amarag</a></dt> + <dd>tidwelt ɣer tidwelt,urar n puzzle iɣrem.</dd> + <dt><a href="http://hextris.io/">Hextris</a></dt> + <dd>Tetris-am urar n puzzl <u><strong>higzagunal.</strong></u></dd> + <dt><a href="https://gabrielecirulli.github.io/2048/">2048</a></dt> + <dd>Uṭṭun n tucḍa urar puzzl d iqremyad.</dd> + <dt><a href="https://developer.mozilla.org/en-US/demos/detail/bananabread">Aɣṛum s banan</a></dt> + <dd>Urar n unteg ugarimyuraren 3D aterras amezwaru ad isnefli s tallalt n Emscripten, WebGL et WebRTC.</dd> + <dt><a href="https://hacks.mozilla.org/2013/12/monster-madness-creating-games-on-the-web-with-emscripten/">Monster Madness</a></dt> + <dd>webGL d asm yeszadur ɣef u nteg ugarimyuraren deg izirig,yettwasnefli sɣuṛ Nom Nom Games d usedhu n askar.</dd> + <dt><a href="http://www.auraluxgame.com/game/">Auralux</a></dt> + <dd>WebGL akked asm.js-based d urar n tastratijit:ṭṭefet-ed tifuktin iw akken a-tt-alek-eḍ!</dd> + <dt><a href="http://browserquest.mozilla.org/">BrowserQuest</a></dt> + <dd>MMORPG yesnulfat-id asakwen amecṭuḥ d Mozilla.</dd> + <dt><a href="https://arcade.ly/games/asteroids/">Shoot The Rocks</a></dt> + <dd>D urar n nteg aywan 2D deg ɣanib n wurar n talɣiqwit n itran aklasiki n Atari 1979.</dd> + <dt><a href="https://arcade.ly/games/starcastle/">Star Citadel</a></dt> + <dd>Yiwet n tuṭfa tamaynutt ɣer Star Castle, urar taɣiqwit n itran aklasiki 1980 n Cinematronics, yuli s uzeṭṭa 2D.</dd> +</dl> + +<h2 id="Uraren_imsenziyen">Uraren imsenziyen</h2> + +<dl> + <dt><a href="http://oortonline.com/">Oort deg izirig </a></dt> + <dd>MMO d urar n usnirem,n usali d imenɣi (i teddu ɣer taneflit.)</dd> + <dt><a href="http://www.wizardslizard.com/">Amulab n imhergi </a></dt> + <dd>Asawen awessar Zelda-esque asnirem/RPG.</dd> + <dt><a href="http://qbqbqb.rezoner.net/">QbQbQb </a></dt> + <dd>D urar n puzzl talɣiqwit asentel n tussna tanaɣlant.</dd> + <dt><a href="http://elliotquest.com/">Elliot Quest</a></dt> + <dd>8-bit d urar tudlift n taluft tuɣalin.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Tamsenszayt_yemezgen">Tamsenszayt yemezgen</h2> + +<dl> + <dt><a href="http://greweb.me/wavegl/">WaveGL</a></dt> + <dd>Asziked WebGL i y iɣbula imsiwelen.</dd> + <dt><a href="http://codepen.io/jackrugile/pen/CdKGx/">Azeṭṭa utellel n unafag</a></dt> + <dd>Takarḍa yemrun i skanayen tinafagin ig qelɛen u ig ttṣubbun deg inafagen,u daɣen ijjaṛiḍen n iberdan n usrifeg.</dd> + <dt><a href="http://alteredqualia.com/xg/examples/animation_physics_terrain.html">Tamkfadut aɣaran</a></dt> + <dd>3D,tirrin,annar,ṭumubil,aseqdec <a href="https://github.com/kripken/ammo.js">ammo.js </a>iw siḍanen n aɣaran.</dd> + <dt><a href="http://david.li/flow/">Aktum Particle Flow</a></dt> + <dd>Assulu aɣaran amengi tufsiyt.</dd> + <dt><a href="http://codepen.io/artzub/pen/gszpJ/">Aṭarḍaq d wayen id yekkan segs</a></dt> + <dd>Asṭarḍaq n tizelɣayin ara d-yeglun d uṭarḍaq nniḍen..</dd> + <dt><a href="http://codepen.io/AshKyd/pen/sylFw">Agensatriw yettwasutayen seg uzeṭṭa</a></dt> + <dd>Agensatriw s taggust n uzungur di tuzzya.</dd> + <dt><a href="http://codepen.io/zadvorsky/pen/FAmuL">Digital Fireworks</a></dt> + <dd>Animated firework effects rendered on canvas.</dd> + <dt><a href="http://oos.moxiecode.com/js_webgl/autumn/">Autumn</a></dt> + <dd>Falling autumn leaves, with light source shining through. Created using <a href="https://github.com/mrdoob/three.js">Three.js</a>.</dd> + <dt><a href="http://inear.se/fireshader/">Fire walk with me</a></dt> + <dd>Billowing fire cloud effect.</dd> + <dt><a href="http://codepen.io/jackrugile/pen/AokpF">Rainbow Firestorm</a></dt> + <dd>Rainbow-coloured particles, falling like rain, bouncing around on a terrain of orbs.</dd> + <dt><a href="http://visualiser.fr/babylon/crowd/">Crowd Simulation</a></dt> + <dd>Simulation of a bustling crowd of people all trying to reach their opposite positions.</dd> + <dt><a href="http://codepen.io/noeldelgado/pen/ByxQjL">SVG Masking Experiment</a></dt> + <dd>An Xray machine, creating using an SVG mask.</dd> + <dt><a href="https://www.shadertoy.com/view/Ms2SD1">Realistic Water Simulation</a></dt> + <dd>Flowing water, like the waves on the ocean.</dd> + <dt><a href="http://www.haxor.xyz/demos/1.0/dungeon/">Dungeon demo</a></dt> + <dd>Haxor-based dungeon scene with walkable character.</dd> + <dt><a href="http://massiveassaultnetwork.com/html5/">Massive Assault tech demo</a></dt> + <dd>Rendered archipelago with futuristic military vehicles.</dd> + <dt><a href="https://callumprentice.github.io/apps/flight_stream/index.html">Flight Stream</a></dt> + <dd>3D globe with simulated flight paths.</dd> + <dt><a href="http://pixelscommander.com/polygon/htmlgl/demo/filters.html">WebGL filters</a></dt> + <dd>Demo showing WebGL filters being used to add effects to HTML elements.</dd> + <dt><a href="http://codepen.io/AshKyd/pen/zxmgzV">SVG isometic tiles</a></dt> + <dd>Generating isometric tiles with SVG matricies.</dd> + <dt><a href="https://jsfiddle.net/jetienne/rkth90c9/">ThreeJS App Player</a></dt> + <dd>A player into which you can load and run Three.js examples.</dd> +</dl> +</div> +</div> diff --git a/files/kab/games/index.html b/files/kab/games/index.html new file mode 100644 index 0000000000..023e1c726b --- /dev/null +++ b/files/kab/games/index.html @@ -0,0 +1,96 @@ +--- +title: Taneflit n wurar +slug: Games +translation_of: Games +--- +<div>{{GamesSidebar}}</div> + + + +<p>Urar d-yiwen seg irmuden n Tasenselkimt aɣerfan.titiknulujiyin timaynutin ttawint-d yal ass asnefli arebbaw u seg widen iǧehden ig zemren ad iddu di yal iminig ɣef web arawas i tignutin.</p> + +<div><strong>Snefli uraren di web</strong></div> + +<div></div> + +<div class="column-container"> +<div class="column-half"> +<p>Anṣuf yissek ɣer s agans n usnefli n wurar MDN!deg taɣult agi n wasmel,nejajjaw tiɣbula i yinaflayen n web ig bɣan ad sneflin uraren.atafem ahdum ilmedẓanen d imagraden iteknikiten a yelhun deg umuɣ amenzawi ɣef zelmeḍ,ihi ur ttkukru ara snirmed.</p> + +<p>Nesekcem daɣen yiwet n tigezmi n tamselɣut akken a tizmirem s ttawil attafem isalen ɣef meṛṛa GSS ( aGrudem n uSihel n yiSnasen) yettwamahlen deg tasneflit n uraren,akked<a href="https://developer.mozilla.org/en-US/docs/Games/Tools/Engines_and_tools"> umuɣen imsaddayen </a>a yilhun d wallalen ad<a href="https://developer.mozilla.org/en-US/docs/Games/Examples"> uraren sumedya</a>.</p> + +<div class="note"> +<p> —Tamawt: Asnulfu n wuraren deg Web yers ɣef kra n titiknulujiyin Web n taffa am HTML,CSS d JavaScript. Tama <a href="/en-US/docs/Learn">Learning Area </a>tin yelhan i walmed n taffa .</p> +</div> + +<dl> +</dl> +</div> + +<div class="column-half"> +<h2 id="Port_d_urar_agwneslul_deg_web">Port d urar agwneslul deg web</h2> + +<p>Ma yella teliḍ d-aneflay agwneslul(amedya uraren n tira s C++),u ma yella daɣen tɣeḍwfeḍ i wamek ara tesiwḍeḍ uraren ɣer web,yessefk attlemdeḍ xilla afecku nneɣ <a href="http://kripken.github.io/emscripten-site/index.html">Emscripten</a>-D asefsay LLVM ɣer JavaScript,ig ttaṭafen LLVM bytecode (amedya,srew seg C / C ++ s tallalt n clang,neɣ seg tutlayt nniḍen)u ad isefsu ayagi ɣer <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a>,ig zemren ad ittuselkem di web.</p> + + + +<p><strong>Iw sizmur, sesten: </strong></p> + +<ul> + <li><a href="http://kripken.github.io/emscripten-site/docs/introducing_emscripten/about_emscripten.html">Γef Emscripten</a> i tazwart ay s kecmen i sulliḍen ilhan nedzah,</li> + <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html">Azdam anmeggag d usarsi</a> i usarsi n tazrart n ifecka.</li> + <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/Tutorial.html">Almeḍris Emscripten</a> i walmedẓan akken attlemdem asekker.</li> +</ul> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Imedyaten">Imedyaten</h2> + + + +<p>Iw umuɣ imedyaten n uraren Web,wali <a href="https://developer.mozilla.org/en-US/docs/Games/Examples">asebter nneɣ imedyaten</a>.sesten daɣen<a href="http://www.openwebgames.com/#/home.html"> openwebgames.com</a> i tiɣbula d imedyaten i wulmen.</p> + + +</div> +</div> + +<p><a href="http://www.openwebgames.com"><img alt="" src="https://mdn.mozillademos.org/files/12790/owg-logo-dark.svg" style="display: block; margin: 0px auto; width: 400px;"></a></p> + +<h2 id="Wali_daɣen">Wali daɣen</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="http://buildnewgames.com/">Snulfud uraren imaynuten</a></dt> + <dd>D asmel asdukkalan ig rran azal i waṭas n ilmeḍras n taneflit n uraren Web yeldin.acukkan ur lḥin ara akken i wullem,maca ɣurṣen taɣbalut ilhan.</dd> + <dt><a href="http://creativejs.com/">Asnulfu JS</a></dt> + <dd>D yiwet n Talkensit ti tiknikiyin JavaScript yesewhamen d waṭas n tirmitin,wer sefru i wuraren,acu kkan wulmen.ussan agi ur yermed,maca yeṭṭef tiɣbula yelhan.</dd> + <dt><a href="http://gameprogrammingpatterns.com/">Tamudemt usihel n uraren</a></dt> + <dd>Adlis ar uqqin,yura Bob Nystrom,ig ttmeslayen ɣef timudmiwin n usihel deg tawenna n taneflit n urar iw akken a nefk tallalt i yineflayen n uraren akken ad ger tangalt i fazen.<br> + </dd> + <dt><a href="http://gamedevjsweekly.com/">Gamedeγ.js Weekly</a></dt> + <dd>Gamedev.js tanfult n dduṛt iw snefli n uraren HTML5,i d ittwaznen yal sḍisass.degs ameɣlal aneggaru n imagraden,almeḍris,ifecka d iɣbula.</dd> + <dt><a href="http://www.html5gamedevs.com/">Agraw n amyannan HTML5</a></dt> + <dd>Agraw n ineflayen,isnulfuyen n ikataren d imaszṛagen.mmud tuttra,ad awiḍ iwenniten,a tefkeḍ tallalt i wiyaḍ.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="http://html5gameengine.com/">Amsadday n unadi HTML5</a></dt> + <dd>Umuɣ ikataren n uraren HTML5 aɣerfan akked summa n sen,Tiskanin d tilemmicin.</dd> + <dt><a href="http://www.jsbreakouts.org/">JSBreakouts</a></dt> + <dd>Snemhel ijguya n Breakout JavaScript deg yal imezlan n ikataren iw akken attafem tallalt u attfernem akken iwata.</dd> + <dt><a href="https://gamedevelopment.tutsplus.com/">Tuts+ asnefli n urar</a></dt> + <dd>Ilmedṛisen d imagraden deg taneflit n uraren sumata.</dd> + <dt><a href="http://html5gameengine.com/">Amsekker HTML5</a></dt> + <dd>Starter iy imsnefliyen n uraren,yiwen wumuɣ n iseɣwen n aṭas iɣbula useqdec deg Web.</dd> + <dt><a href="http://js13kgames.com/">js13kGames</a></dt> + <dd>JavaScript tamenziɣt tangalt i yimsnefliyen n uraren HTML5 akked ubadu n tiddi n ifuyla yerṣa ɣer 13 kilubytes. meṛṛa uraren zeggszan ttwaheggan s udem n talɣa yettwaɣṛan deg GitHub.0.</dd> + <dt><a href="https://hacks.mozilla.org/category/games/">Ablug n Mozilla hacks</a></dt> + <dd>Taggayt n uraren deg ablug Mozilla Hacks nagbas imagraden ackiten ɣef gamedev.</dd> +</dl> +</div> +</div> diff --git a/files/kab/games/techniques/3d_collision_detection/index.html b/files/kab/games/techniques/3d_collision_detection/index.html new file mode 100644 index 0000000000..7596fba5d1 --- /dev/null +++ b/files/kab/games/techniques/3d_collision_detection/index.html @@ -0,0 +1,148 @@ +--- +title: 3D Tifin umbberez +slug: Games/Techniques/3D_collision_detection +translation_of: Games/Techniques/3D_collision_detection +--- +<div>{{GamesSidebar}}</div> + +<p class="summary">Amagrad agi yettakked tazwart i yal itiknikiyen n wablaɣ n ujemmeq yettwasqedcen iw sedday n tifin umbberez deg tiwenaḍin 3D.imagraden n uḍfaṛ i tuddela usedday deg timkkarḍitin tulmisin 3D.</p> + +<h2 id="Tankult_n_ujemmeq_usemsawi_ɣef_tinakatin">Tankult n ujemmeq usemsawi ɣef tinakatin</h2> + +<p>Am tifin umbberez 2D,<strong>tinakatin ujemmeq asemsawi n ugellus</strong> (TJSG) d iwarzimen izerben i w-guccel n sin-agi ifendasen n wurar ma yella sembebbin naɣ uhu.ayagi i w-sburu ifendasen n wurar deg yiwet n tanaka ur nezzi.(akka tesemsawi s agellus) u ad tesselken ideggan n tixxamin deg tallunt n imsidag 3D akken ad nẓar ma yella temsembeddint.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11797/Screen%20Shot%202015-10-16%20at%2015.11.21.png" style="display: block; height: 275px; margin: 0px auto; width: 432px;"></p> + +<p><strong>Tugdda yemsemsawin ɣef tanaka</strong> tella i wakken ad illint timellal.asembebbi gar snat n tinakatin ur nezzi nezmer ad ttwadaddent s isnemhal timeẓliwin daya,maca tinakatin yezzin yessefk-asent timehlin timastayin,ig ẓayen i usiḍen.ma ɣuṛwen ifendasen ara yezzin,tzemrem ad tbeddelem iseggiwen n taɣzut n talast i wakken ad yesegrer yal ass taɣawsa,neɣ ma ulac ad yili ufran nniḍen n tanzeggit n talast,am tabluleɣt (yellan ttimsaritin i tuzzya).yeskanay-d amedya n tuzzya n (TJSG) i yesmezgay afendas yettezzin,tanaka tettbeddil yal ass tisektiwin i wakken ad tesmezgay akken iwata ɣer tanaka yellan degs.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11799/rotating_knot.gif" style="display: block; height: 192px; margin: 0px auto; width: 207px;"></p> + +<div class="note"> +<p><strong>Tamawt:</strong> Walit amagrad <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js">Bounding Iblaɣen akked Three.js</a> iw akken ateẓṛem asnulfu yellan tallilt n tatiknikit agi.</p> +</div> + +<h3 id="Ired_mgal_TJSG">Ired mgal TJSG</h3> + +<p>Sefqed ired ma yella deg gensu n TJSG (AABB) ayagi d afrari - neḥwaǧ kan ad nefrari imsidgen n yired yellan deg gensu n TJSG (AABB);get yal agellus s ubrez.anɣil belli Px, Py ad Pz d imsigen n yired BminX-BmaxX,BminY-BmaxY ed BminZ-BmaxZ nutenti id tagrummiwin n yal exist n TJSG (AABB),nezmer ad nesḍen ma yeḍṛa-d umbberez gar sin-agi s useqdec n tsemselt-agi:</p> + +<p><math><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>P</mi><mo>,</mo><mi>B</mi><mo stretchy="false">)</mo><mo>=</mo><mo stretchy="false">(</mo><msub><mi>P</mi><mi>x</mi></msub><mo>>=</mo><msub><mi>B</mi><mrow><mi>add</mi><mi></mi><mi></mi><mi>X</mi></mrow></msub><mo>∧</mo><msub><mi>P</mi><mi>x</mi></msub><mo><=</mo><msub><mi>B</mi><mrow><mi>afel</mi><mi></mi><mi></mi><mi>X</mi></mrow></msub><mo stretchy="false">)</mo><mo>∧</mo><mo stretchy="false">(</mo><msub><mi>P</mi><mi>y</mi></msub><mo>>=</mo><msub><mi>B</mi><mrow><mi>add</mi><mi></mi><mi></mi><mi>Y</mi></mrow></msub><mo>∧</mo><msub><mi>P</mi><mi>y</mi></msub><mo><=</mo><msub><mi>B</mi><mrow><mi>afel</mi><mi></mi><mi></mi><mi>Y</mi></mrow></msub><mo stretchy="false">)</mo><mo>∧</mo><mo stretchy="false">(</mo><msub><mi>P</mi><mi>z</mi></msub><mo>>=</mo><msub><mi>B</mi><mrow><mi>add</mi><mi></mi><mi></mi><mi>Z</mi></mrow></msub><mo>∧</mo><msub><mi>P</mi><mi>z</mi></msub><mo><=</mo><msub><mi>B</mi><mrow><mi>afel</mi><mi></mi><mi></mi><mi>Z</mi></mrow></msub><mo stretchy="false">)</mo></mrow><annotation encoding="TeX">f(P,B)= (P_x >= B_{minX} \wedge P_x <= B_{maxX}) \wedge (P_y >= B_{minY} \wedge P_y <= B_{maxY}) \wedge (P_z >= B_{minZ} \wedge P_z <= B_{maxZ})</annotation></semantics></math></p> + +<p>Anda deg JavaScript:</p> + +<pre class="brush: js">Tasɣent d ired deg gensu n TJSB AABB(ired, tanaka) { + Tuɣalin(ired.x >= tanaka.addayX && ired.x <= tanaka.afellayX) && + (ired.y >= tanaka.addayY && ired.y <= tanaka.afellayY) && + (ired.z >= tanaka.addayY && ired.z <= tanaka.afellayZ); +}</pre> + +<h3 id="AABB_mgal_AABB">AABB mgal AABB</h3> + +<p>Sefqed ma yella AABB imyagger AABB nniḍen deg ukayad n yired.Neḥwaǧ kan ad neg akayad i yal agellas , s useqdec n ibuda n tinakatin.ameskan-agi sedaw-a yeskanay-d akayad i nessedday ɣef ugellus n X-adasil,tiseddaṛin <em>A<sub>ddayX</sub></em>–<em>A<sub>fellayX</sub></em> ed <em>B<sub>ddayX</sub></em>–<em>B<sub>fellayX</sub></em> semnenint?</p> + +<p><img alt="updated version" src="https://mdn.mozillademos.org/files/11813/aabb_test.png" style="display: block; height: 346px; margin: 0px auto; width: 461px;"></p> + +<p>S tusnakt atan dacu ara d-yefɣen:<math><semantics><mrow><mi></mi></mrow></semantics></math></p> + +<p><math><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>A</mi><mo>,</mo><mi>B</mi><mo stretchy="false">)</mo><mo>=</mo><mo stretchy="false">(</mo><msub><mi></mi><mrow><mi></mi><mi></mi><mi></mi><mi></mi></mrow></msub><mo><=</mo><msub><mi>B</mi><mrow><mi>fellay</mi><mi>X</mi></mrow></msub><mo>∧</mo><msub><mi>A</mi><mrow><mi>fellay</mi><mi>X</mi></mrow></msub><mo>>=</mo><msub><mi>B</mi><mrow><mi>dday</mi><mi>X</mi></mrow></msub><mo stretchy="false">)</mo><mo>∧</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mrow><mi>dday</mi><mi>Y</mi></mrow></msub><mo><=</mo><msub><mi>B</mi><mrow><mi>fellay</mi><mi>Y</mi></mrow></msub><mo>∧</mo><msub><mi>A</mi><mrow><mi>fellay</mi><mi>Y</mi></mrow></msub><mo>>=</mo><msub><mi>B</mi><mrow><mi>dday</mi><mi></mi><mi></mi><mi>Y</mi></mrow></msub><mo stretchy="false">)</mo><mo>∧</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mrow><mi>dday</mi><mi>Z</mi></mrow></msub><mo><=</mo><msub><mi>B</mi><mrow><mi>fellay</mi><mi></mi><mi></mi><mi>Z</mi></mrow></msub><mo>∧</mo><msub><mi>A</mi><mrow><mi>fellay</mi><mi></mi><mi></mi><mi>Z</mi></mrow></msub><mo>><sup>=</sup></mo><msub><mi><sup>B</sup></mi><mrow><mi><sup>fellay</sup></mi><mi></mi><mi></mi><mi><sup>Z</sup></mi></mrow></msub><mo stretchy="false"><sup>)</sup></mo></mrow><annotation encoding="TeX"></annotation></semantics></math><sup>f(A,B) =</sup></p> + +<p>u deg JavaScript ad neseqdec aya:</p> + +<pre class="brush: js"> Tiseɣnatin myaggerent(a, b) { + tuɣalin (a.ddayX <= b.fellayX && a.fellayX >= b.ddayX) && + (a.ddayY <= b.fellayY && a.fellayY >= b.ddayY) && + (a.ddayZ <= b.fellayZ && a.fellayZ >= b.ddayZ); </pre> + +<h2 id="Bounding_spheres">Bounding spheres</h2> + +<p>Using bounding spheres to detect collisions is a bit more complex than AABB, but still fairly quick to test. The main advantage of spheres is that they are invariant to rotation, so if the wrapped entity rotates, the bounding sphere would still be the same. Their main disadvantage is that unless the entity they are wrapping is actually spherical, the wrapping is usually not a good fit (i.e. wrapping a person with a bounding sphere will cause a lot of false positives, whereas a AABB would be a better match).</p> + +<h3 id="Point_versus_sphere">Point versus sphere</h3> + +<p>To check whether an sphere contains a point we need to calculate the distance between the point and the sphere's center. If this distance is smaller than or equal to the radius of the sphere, the point is inside it.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11803/point_vs_sphere.png" style="display: block; height: 262px; margin: 0px auto; width: 385px;"></p> + +<p>Taking into account that the euclidean distance between two points <em>A</em> and <em>B</em> is <math><semantics><msqrt><mrow><mo stretchy="false">(</mo><msub><mi>A</mi><mi>x</mi></msub><mo>-</mo><msub><mi>B</mi><mi>x</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo stretchy="false">)</mo><mo>+</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mi>y</mi></msub><mo>-</mo><msub><mi>B</mi><mi>y</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>+</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mi>z</mi></msub><mo>-</mo><msub><mi>B</mi><mi>z</mi></msub><mo stretchy="false">)</mo></mrow></msqrt><annotation encoding="TeX">\sqrt{(A_x - B_x) ^ 2) + (A_y - B_y)^2 + (A_z - B_z)}</annotation></semantics></math> , our formula for point versus sphere collision detection would work out like so:</p> + +<p><math><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>P</mi><mo>,</mo><mi>S</mi><mo stretchy="false">)</mo><mo>=</mo><msub><mi>S</mi><mrow><mi>r</mi><mi>a</mi><mi>d</mi><mi>i</mi><mi>u</mi><mi>s</mi></mrow></msub><mo>>=</mo><msqrt><mrow><mo stretchy="false">(</mo><msub><mi>P</mi><mi>x</mi></msub><mo>-</mo><msub><mi>S</mi><mi>x</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>+</mo><mo stretchy="false">(</mo><msub><mi>P</mi><mi>y</mi></msub><mo>-</mo><msub><mi>S</mi><mi>y</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>+</mo><mo stretchy="false">(</mo><msub><mi>P</mi><mi>z</mi></msub><mo>-</mo><msub><mi>S</mi><mi>z</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup></mrow></msqrt></mrow><annotation encoding="TeX">f(P,S) = S_{radius} >= \sqrt{(P_x - S_x)^2 + (P_y - S_y)^2 + (P_z - S_z)^2}</annotation></semantics></math></p> + +<p>Or in JavaScript:</p> + +<pre class="brush: js">function isPointInsideSphere(point, sphere) { + // we are using multiplications because is faster than calling Math.pow + var distance = Math.sqrt((point.x - sphere.x) * (point.x - sphere.x) + + (point.y - sphere.y) * (point.y - sphere.y) + + (point.z - sphere.z) * (point.z - sphere.z)); + return distance < sphere.radius; +} +</pre> + +<div class="note"> +<p>The code above features a square root, which can be expensive to calculate. An easy optimization to avoid it consists of squaring the radius, so the optimized equation would instead involve <code>distance < sphere.radius * sphere.radius</code>.</p> +</div> + +<h3 id="Sphere_versus_sphere">Sphere versus sphere</h3> + +<p>The sphere vs sphere test is similar to the point vs sphere test. What we need to test here is that the distance between the sphere's centers is less than or equal to the sum of their radii.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11805/sphere_vs_sphere.png" style="display: block; height: 262px; margin: 0px auto; width: 414px;"></p> + +<p>Mathematically, this looks like so:</p> + +<p><math><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>A</mi><mo>,</mo><mi>B</mi><mo stretchy="false">)</mo><mo>=</mo><msqrt><mrow><mo stretchy="false">(</mo><msub><mi>A</mi><mi>x</mi></msub><mo>-</mo><msub><mi>B</mi><mi>x</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>+</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mi>y</mi></msub><mo>-</mo><msub><mi>B</mi><mi>y</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>+</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mi>z</mi></msub><mo>-</mo><msub><mi>B</mi><mi>z</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup></mrow></msqrt><mo><=</mo><msub><mi>A</mi><mrow><mi>r</mi><mi>a</mi><mi>d</mi><mi>i</mi><mi>u</mi><mi>s</mi></mrow></msub><mo>+</mo><msub><mi>B</mi><mrow><mi>r</mi><mi>a</mi><mi>d</mi><mi>i</mi><mi>u</mi><mi>s</mi></mrow></msub></mrow><annotation encoding="TeX">f(A,B) = \sqrt{(A_x - B_x)^2 + (A_y - B_y)^2 + (A_z - B_z)^2} <= A_{radius} + B_{radius}</annotation></semantics></math></p> + +<p>Or in JavaScript:</p> + +<pre class="brush: js">function intersect(sphere, other) { + // we are using multiplications because it's faster than calling Math.pow + var distance = Math.sqrt((sphere.x - other.x) * (sphere.x - other.x) + + (sphere.y - other.y) * (sphere.y - other.y) + + (sphere.z - other.z) * (sphere.z - other.z)); + return distance < (sphere.radius + other.radius); } +}</pre> + +<h3 id="Sphere_versus_AABB">Sphere versus AABB</h3> + +<p>Testing whether a sphere and an AABB are colliding is slightly more complicated, but still simple and fast. A logical approach would be to check every vertex of the AABB, doing a point vs sphere test for each one. This is overkill however — testing all the vertices is unnecessary, as we can get away with just calculating the distance between the AABB's <em>closest</em><em> point</em> (not necessarily a vertex) and the sphere's center, seeing if it is less than or equal to the sphere's radius. We can get this value by clamping the sphere's center to the AABB's limits.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11837/sphere_vs_aabb.png" style="display: block; height: 282px; margin: 0px auto; width: 377px;"></p> + +<p>In JavaScript, we'd do this test like so:</p> + +<pre class="brush: js">function intersect(sphere, box) { + // get box closest point to sphere center by clamping + var x = Math.max(box.minX, Math.min(sphere.x, box.maxX); + var y = Math.max(box.minY, Math.min(sphere.y, box.maxY); + var z = Math.max(box.minZ, Math.min(sphere.z, box.maxZ); + + // this is the same as isPointInsideSphere + var distance = Math.sqrt((x - sphere.x) * (x - sphere.x) + + (y - sphere.y) * (y - sphere.y) + + (z - sphere.z) * (z - sphere.z)); + + return distance < sphere.radius; +} + +</pre> + +<h2 id="Using_a_physics_engine">Using a physics engine</h2> + +<p><strong>3D physics engines</strong> provide collision detection algorithms, most of them based on bounding volumes as well. The way a physics engine works is by creating a <strong>physical body</strong>, usually attached to a visual representation of it. This body has properties such as velocity, position, rotation, torque, etc., and also a <strong>physical shape</strong>. This shape is the one that is considered in the collision detection calculations.</p> + +<p>We have prepared a <a href="http://mozdevs.github.io/gamedev-js-3d-aabb/physics.html">live collision detection demo</a> (with <a href="https://github.com/mozdevs/gamedev-js-3d-aabb">source code</a>) that you can take a look at to see such techniques in action — this uses the open-source 3D physics engine <a href="https://github.com/schteppe/cannon.js">cannon.js</a>.</p> + +<h2 id="See_also">See also</h2> + +<p>Related articles on MDN:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js">Bounding volumes collision detection with Three.js</a></li> + <li><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></li> +</ul> + +<p>External resources:</p> + +<ul> + <li><a href="http://www.gamasutra.com/view/feature/3383/simple_intersection_tests_for_games.php">Simple intersection tests for games</a> on Gamasutra</li> + <li><a href="https://en.wikipedia.org/wiki/Bounding_volume">Bounding volume</a> on Wikipedia</li> +</ul> diff --git a/files/kab/games/techniques/3d_on_the_web/basic_theory/index.html b/files/kab/games/techniques/3d_on_the_web/basic_theory/index.html new file mode 100644 index 0000000000..23774dbc5e --- /dev/null +++ b/files/kab/games/techniques/3d_on_the_web/basic_theory/index.html @@ -0,0 +1,119 @@ +--- +title: Azzegzi n tiszri tamedrut n 3D +slug: Games/Techniques/3D_on_the_web/Basic_theory +translation_of: Games/Techniques/3D_on_the_web/Basic_theory +--- +<div>{{GamesSidebar}}</div><p>Amagrad agi yezzegzey meṛṛa tiszrit n taffa ig wulmen att tissinem mara tebdum leqdic s 3D.</p> + +<h2 id="Anagraw_n_tismsidegt">Anagraw n tismsidegt</h2> + +<p>3D d tumasant deg sebggen n tallɣa deg tallunt n 3D,s unagraw ig tt wasqedcen iw siḍan n tadeɣṛa.</p> + +<p><img alt="Coordinate system" src="https://mdn.mozillademos.org/files/13326/mdn-games-3d-coordinate-system.png" style="height: 338px; width: 600px;"></p> + +<p>WebGL iseqdac anagraw n tamsidegt n yefus-agellus n x sweṛen ɣer yefus,agellus n y sweṛen d sawen,,agellus n z sweṛen beṛṛa n wagdil,am akka ne ttwali deg adyagram agi safella.</p> + +<h2 id="Taɣawsa">Taɣawsa</h2> + +<p>Imeẓliyen n inawen tɣawsiwin ttwassalin s tallat n Vertex.d yiwen n ired deg tallunt ɣuṛes tadeɣṛa ines 3D deg anagraw n tamsidegt u tikkwal n isallen yernnan i ti sesbadu.yal ired yett wasen s wayla yagi.</p> + +<ul> + <li><strong>Tade</strong>ɣra: yumagit deg tallunt 3D (x, y, z).</li> + <li><strong>Ini</strong>: Ini yesesfel tawaṭfa wazal RGBA (R,G ed B i yibuda azeggaɣ,azyza d asẓerwal,Alpha i tafrawent -meṛṛa azalen teddun seg 0,0 à 1,0).</li> + <li><strong>Amagnu:</strong>S wammek ara tglemeḍ talmehla i deg tella vertex.</li> + <li><strong>Tasuddest</strong>:Tugna 2D ig zmmer att s waseqdec deg vertex i lmend n udleg n tasna,ye kkad seg ini afrari.</li> +</ul> + +<p>tzemmrem a tesalim tanzeggit s useqdec n isal agi. — Atan umedya n agasas.</p> + +<p><img alt="Cube" lang="Kab" src="https://mdn.mozillademos.org/files/13324/mdn-games-3d-cube.png" style="height: 265px; width: 600px;"></p> + +<p>Udem n talɣa ye llan daɣawas ger vertices.amedya yiwen ugasas n 8 tikyutin yemgaraden (ired deg tallunt) d 6 udmawen yemgaraden, yalta tett wasers ɣef 4 n vertices.tagnut tesbadu tamehla ideg udem yett wanil.u yerna,s tuqqna n irden,nesnulfuyed idisan n ugasas.tanzeggit tett wasers seg takyut ed wudem, mad angawi d tasuddest,ig seqdacen ini neɣ tugna.ma sdded tanzeggit ɣer tasuddest,ad nesufeɣ tindar.</p> + +<h2 id="Iqadusen_n_tikci">Iqadusen n tikci</h2> + +<p>iqadusenn n tikci d akala iseg tugniwin ttwaheggant u ttefɣent-ed deg wagdil.iqadusen n tikci tudlift tettaṭaf tiɣawsiwin 3D yett wasersen seg<strong> timenza</strong> yeglemen s tallat n<strong> vertices</strong>,sisnes asekker,ssiḍan <strong>ticlextin</strong> u arriten ɣer 2D s iferdisen.</p> + +<p><img alt="Rendering pipeline" src="https://mdn.mozillademos.org/files/13334/mdn-games-3d-rendering-pipeline.png" style="height: 225px; width: 600px;"></p> + +<p>Tasniremt ig ttwa sqedcen deg zenziɣ agi safella ttagi:</p> + +<ul> + <li> <strong>Tammenzut</strong>: Anekcum deg qadusen-tett wasres seg vertices izmmer ad yilli d akerdis,d ired neɣ d izirig.</li> + <li><strong>Ticelxet</strong>:Yiwet n tigri 3D n tindar,ig sɛan meṛṛa d ayla yiwet n tindar.</li> + <li><strong>Tindar</strong>:<strong> </strong> Ired ɣef ugdil yersen deg iẓiki 2D,ig ṭefen ini RGBA.</li> +</ul> + +<p>Asekker<strong> (vertex) </strong>n tikyutin ed ticelxet ttussihel. —tzemmrem a ttarum i schaders nwen ig sqerdcen tuffɣa.</p> + +<h2 id="Asekker_n_vertex">Asekker n vertex</h2> + +<p>Asekker n vertex ttwagan iw sdukkel n isalen ɣef vertices tisemdanin iw sdabu n imsidag deg tallunt n 3D iw akken ameshanay a ten iẓeṛ.am tuṭfa n tugna n wadlag id heggam<br> + -ye seffk a tesersem tiɣawsiwin timezwura,swel kameṛa,dɣa ṭefed tugna.</p> + +<p><img alt="Vertex processing" src="https://mdn.mozillademos.org/files/13336/mdn-games-3d-vertex-processing.png" style="height: 338px; width: 600px;"></p> + +<p>4 imecwaṛen ig llan deg asekker: tamezwarut tga iw tuddsa n tiɣawsiwin deg amaḍal,sawelen-as<strong> asseɣwel</strong> <strong>n wafrun</strong>.ticki, yella <strong>usseɣwel n iẓeri</strong> ig ttḥadaren ɣef tasdeɣṛiwt ed uslugen n taɣda n kamera deg tallunt 3D.Takamerat ɣuṛes kṛad imesktayen-asun,tanila ed taɣda-yesefk ad ttwa sbadunt iw sayes id yett wasnulfan tura.</p> + +<p><img alt="Camera" src="https://mdn.mozillademos.org/files/13322/mdn-games-3d-camera.png" style="height: 225px; width: 600px;"></p> + +<p>Aseɣwel n tigri (sawelen-as daɣen aseɣwel n tasmuɣlit) tes unmil iɣewwaṛen n taweṣṣaft .yesiswel ayen tezmmer atẓeṛ takamerat —Tawila ɣuṛes tahri n tmuɣli, assaɣ n timeszrit ed Tixtiɣiyin i qarben u i yuden. iw akken a ttissinem ugar eɣret <a href="en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#Camera">Taseddart kamera</a> ye llan deg magrad Three.js.</p> + +<p><img alt="Camera settings" src="https://mdn.mozillademos.org/files/13320/mdn-games-3d-camera-settings.png" style="height: 324px; width: 590px;"></p> + +<p>Amecwaṛ aneggaru n usfaylu,ig gllan stufɣa u tinɣers aqadus n usuɣel.</p> + +<h2 id="Isisirew">Isisirew</h2> + +<p>Isisirew iselkit timenza (ye llan deg takyut yedduden) deg tiẓri n icelxen.</p> + +<p><img alt="Rasterization" src="https://mdn.mozillademos.org/files/13332/mdn-games-3d-rasterization.png" style="height: 338px; width: 600px;"></p> + +<p>Ticlextin agi-ig llan d isenẓaṛen 3D iferdisen n tugna 2D-myedrasen ɣef iẓiki n iferdisen n tugna,iw akken ad yezmmir asiggez ɣef wagdil 2D deg mecwar n wazday tuffɣa.</p> + +<h2 id="Asekker_n_icelxan">Asekker n icelxan</h2> + +<p>Fragment processing focuses on textures and lighting — it calculates final colors based on the given parameters.</p> + +<p><img alt="Fragment processing" src="https://mdn.mozillademos.org/files/13328/mdn-games-3d-fragment-processing.png" style="height: 338px; width: 600px;"></p> + +<h3 id="Tasuddest">Tasuddest</h3> + +<p>Textures are 2D images used in the 3D space to make the objects look better and more realistic. Textures are combined from single texture elements called texels the same way picture elements are combined from pixels. Applying textures onto objects during the fragment processing stage of the rendering pipeline allows us to adjust it by wrapping and filtering it if necessary.</p> + +<p>Texture wrapping allows us to repeat the 2D image around the 3D object. Texture filtering is applied when the original resolution or the texture image is different from the displayed fragment — it will be minified or magnified accordingly.</p> + +<h3 id="Tafat">Tafat</h3> + +<p>The colors we see on the screen is a result of the light source interacting with the surface colors of the object's material. Light might be absorbed or reflected. The standard <strong>Phong Lighting Model</strong> implemented in WebGL has four basic types of lighting:</p> + +<ul> + <li><strong>Snezwi</strong>: A distant directional light, like the sun.</li> + <li><strong>Specular</strong>: A point of light, just like a light bulb in a room or a flash light.</li> + <li><strong>Isweɣ</strong>: The constant light applied to everything on the scene.</li> + <li><strong>Asgel</strong>: The light emitted directly by the object.</li> +</ul> + +<h2 id="Azday_n_tufɣa">Azday n tufɣa</h2> + +<p>During the output manipulation stage all the fragments of the primitives from the 3D space are transformed into a 2D grid of pixels that are then printed out on the screen display.</p> + +<p><img alt="Output merging" src="https://mdn.mozillademos.org/files/13330/mdn-games-3d-output-merging.png" style="height: 338px; width: 600px;"></p> + +<p>During output merging some processing is also applied to ignore information that is not needed — for example the parameters of objects that are outside of the screen or behind other objects, and thus not visible, are not calculated.</p> + +<ul> +</ul> + +<h2 id="Tarayt">Tarayt</h2> + +<p>Now you know the basic theory behind 3D manipulation. If you want to move on to practice and see some demos in action, follow up with the tutorials below:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a></li> +</ul> + +<p>Go ahead and create some cool cutting-edge 3D experiments yourself!</p> diff --git a/files/kab/games/techniques/3d_on_the_web/index.html b/files/kab/games/techniques/3d_on_the_web/index.html new file mode 100644 index 0000000000..b301afb21a --- /dev/null +++ b/files/kab/games/techniques/3d_on_the_web/index.html @@ -0,0 +1,117 @@ +--- +title: 3D games on the Web +slug: Games/Techniques/3D_on_the_web +tags: + - Games + - Graphics + - NeedsContent + - NeedsExample + - NeedsTranslation + - TopicStub + - WebGL + - WebVR + - three.js +translation_of: Games/Techniques/3D_on_the_web +--- +<div>{{GamesSidebar}}</div><p class="summary">For rich gaming experiences on the Web the weapon of choice is WebGL, which is rendered on HTML {{htmlelement("canvas")}}. WebGL is basically an OpenGL ES 2.0 for the Web — it's a JavaScript API providing tools to build rich interactive animations and of course also games. You can generate and render dynamic 3D graphics with JavaScript that is hardware accelerated.</p> + +<h2 id="Documentation_and_browser_support">Documentation and browser support</h2> + +<p>The <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> project documentation and specification is maintained by the <a href="https://www.khronos.org/">Khronos Group</a>, not the W3C as with most of the Web APIs. Support on modern browsers is very good, even on mobile, so you don't have to worry about that too much. The main browsers are all supporting WebGL and all you need to focus on is optimizing the performance on the devices you use.</p> + +<p>There's an ongoing effort on releasing WebGL 2.0 (based on OpenGL ES 3.0) in the near future, which will bring many improvements and will help developers build games for the modern Web using current, powerful hardware.</p> + +<h2 id="Explaining_basic_3D_theory">Explaining basic 3D theory</h2> + +<p>The basics of 3D theory centers around shapes represented in a 3D space, with a coordinate system being used to calculate their positions. See our <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory">Explaining basic 3D theory</a> article for all the information you need.</p> + +<h2 id="Advanced_concepts">Advanced concepts</h2> + +<p>You can do a lot more with WebGL. There are some advanced concepts which you should dive into and learn more about — like shaders, collision detection, or the latest hot topic — virtual reality on the web.</p> + +<h3 id="Shaders">Shaders</h3> + +<p>It's worth mentioning shaders, which are a separate story on their own. Shaders use GLSL, a special OpenGL Shading Language with syntax similar to C that is executed directly by the graphics pipeline. They can be split into Vertex Shaders and Fragment Shaders (or Pixel Shaders) — the former transforms shape positions to real 3D drawing coordinates, while the latter computes rendering colors and other attributes. You should definitely check out <a href="/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">GLSL Shaders</a> article to learn more about them.</p> + +<h3 id="Collision_Detection">Collision Detection</h3> + +<p>It's hard to imagine a game without the collision detection — we always need to work out when something is hitting something else. We have information available for your to learn from:</p> + +<ul> + <li><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></li> + <li><a href="/en-US/docs/Games/Techniques/3D_collision_detection">3D collision detection</a></li> +</ul> + +<h3 id="WebVR">WebVR</h3> + +<p>The concept of virtual reality is not new, but it's storming onto the web thanks to hardware advancements such as the <a href="https://www.oculus.com/en-us/rift/">Oculus Rift</a>, and the (currently experimental) <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> for capturing information form VR hardware and making it available for use in JavaScript applications. For more, read <a href="/en-US/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR — Virtual Reality for the Web</a>.</p> + +<p>There's also the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a> article showing you how easy it is to build 3D environments for virtual reality using the <a href="http://aframe.io/">A-Frame</a> framework.</p> + +<h2 id="The_rise_of_libraries_and_frameworks">The rise of libraries and frameworks</h2> + +<p>Coding raw WebGL is fairly complex, but you'll want to get to grips with it in the long run, as your projects get more advanced (see our <a href="/en-US/docs/Web/API/WebGL_API">WebGL documentation</a> to get started.) For real world projects you'll probably also make use of a framework to speed up development and help you manage the project you're working on. Using a framework for 3D games also helps optimize the performance as a lot is taken care of by the tools you use, so you can focus on building the game itself.</p> + +<p>The most popular JavaScript 3D library is <a href="http://threejs.org/">Three.js</a>, a multi-purpose tool that makes common 3D techniques simpler to implement. There are other popular game development libraries and frameworks worth checking too; <a href="https://aframe.io">A-Frame</a>, <a href="https://playcanvas.com/">PlayCanvas</a> and <a href="http://www.babylonjs.com/">Babylon.js</a> are among the most recognizable ones with rich documentation, online editors and active communities.</p> + +<h3 id="Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</h3> + +<p>Three.js, as any other library, gives you a huge advantage: instead of writing hundreds of lines of WebGL code to build anything interesting you can use built-in helper functions to do it a lot easier and faster. See the <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a> subpage for the step-by-step process of creating the demo.</p> + +<h3 id="Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</h3> + +<p>A-Frame is a web framework for building 3D and VR experiences. Under the hood, it is a three.js framework with a declarative entity-component pattern, meaning we can build scenes with just HTML. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a> subpage for the step-by-step process of creating the demo.</p> + +<h3 id="Building_up_a_basic_demo_with_Whitestorm.js">Building up a basic demo with Whitestorm.js</h3> + +<p>Whitestorm.js is a framework built on the top of <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js</a> technology. It's main distinction is existance of built-in Physics engine and Plugin system based on <a href="http://npmjs.com/">NPM</a>. See <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Whitestorm.js">Building up a basic demo with Whitestorm.js</a> for further reading, tutorials and examples of making basic and even complex apps or games using this framework in pair with Three.js.</p> + +<h3 id="Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</h3> + +<p>PlayCanvas is a popular 3D WebGL game engine open sourced on GitHub, with an editor available online and good documentation. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</a> subpage for high level details, and further articles showing how to create demos using the PlayCanvas library, and the online editor.</p> + +<h3 id="Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</h3> + +<p><span class="seosummary">Babylon.js is one of the most popular 3D game engines used by developers. As with any other 3D library it provides built-in functions to help you implement common 3D functionality more quickly. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a> subpage for the basics of using Babylon.js, including setting up a development environment, structuring the necessary HTML, and writing the JavaScript code.</span></p> + +<h3 id="Other_tools">Other tools</h3> + +<p>Both <a href="http://unity3d.com/">Unity</a> and <a href="https://www.unrealengine.com/">Unreal</a> can export your game to <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> with <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a>, so you're free to use their tools and techniques to build games that will be exported to the web.</p> + +<p><img alt="" src="http://end3r.github.io/MDN-Games-3D/A-Frame/img/shapes.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h2 id="Where_to_go_next">Where to go next</h2> + +<p>With this article we just scratched the surface of what's possible with currently available technologies. You can build immersive, beautiful and fast 3D games on the Web using WebGL, and the libraries and frameworks build on top of it.</p> + +<h3 id="Source_code">Source code</h3> + +<p>You can find all the source code for this series <a href="http://end3r.github.io/MDN-Games-3D/">demos on GitHub</a>.</p> + +<h3 id="APIs">APIs</h3> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></li> + <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a></li> + <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a></li> +</ul> + +<h3 id="Frameworks">Frameworks</h3> + +<ul> + <li><a href="http://threejs.org/">Three.js</a></li> + <li><a href="http://whitestormjs.xyz/">Whitestorm.js</a> (based on Three.js)</li> + <li><a href="https://playcanvas.com/">PlayCanvas</a></li> + <li><a href="http://www.babylonjs.com/">Babylon.js</a></li> + <li><a href="http://aframe.io/">A-Frame</a></li> +</ul> + +<h3 id="Tutorials">Tutorials</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Whitestorm.js">Building up a basic demo with Whitestorm.js</a></li> + <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</a></li> + <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a></li> + <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a></li> +</ul> diff --git a/files/kab/games/techniques/index.html b/files/kab/games/techniques/index.html new file mode 100644 index 0000000000..66edeebd82 --- /dev/null +++ b/files/kab/games/techniques/index.html @@ -0,0 +1,32 @@ +--- +title: Techniques for game development +slug: Games/Techniques +tags: + - Games + - Guide + - NeedsTranslation + - TopicStub +translation_of: Games/Techniques +--- +<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div> + +<div class="summary"> +<p><span class="seoSummary">This page lists essential core techniques for anyone wanting to develop games using open web technologies.</span></p> +</div> + +<dl> + <dt><a href="/en-US/docs/Games/Techniques/Async_scripts">Using async scripts for asm.js</a></dt> + <dd>Especially when creating medium to large-sized games, async scripts are an essential technique to take advantage of, so that your game's JavaScript can be compiled off the main thread and be cached for future game running, resulting in a significant performance improvement for your users. This article explains how.</dd> + <dt><a href="/en-US/docs/Apps/Developing/Optimizing_startup_performance" title="/en-US/docs/Apps/Developing/Optimizing_startup_performance">Optimizing startup performance</a></dt> + <dd>How to make sure your game starts up quickly, smoothly, and without appearing to lock up the user's browser or device.</dd> + <dt><a href="/en-US/docs/Games/WebRTC_data_channels" title="/en-US/docs/Games/WebRTC_data_channels">Using WebRTC peer-to-peer data channels</a></dt> + <dd>In addition to providing support for audio and video communication, WebRTC lets you set up peer-to-peer data channels to exchange text or binary data actively between your players. This article explains what this can do for you, and shows how to use libraries that make this easy.</dd> + <dt><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></dt> + <dd>This article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. We touch on CSS transitions and CSS animations, and JavaScript loops involving {{ domxref("window.requestAnimationFrame") }}.</dd> + <dt><a href="/en-US/docs/Games/Techniques/Audio_for_Web_Games">Audio for Web Games</a></dt> + <dd>Audio is an important part of any game — it adds feedback and atmosphere. Web-based audio is maturing fast, but there are still many browser differences to negotiate. This article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible.</dd> + <dt><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></dt> + <dd>A concise introduction to collision detection in 2D games.</dd> + <dt><a href="/en-US/docs/Games/Techniques/Tilemaps">Tilemaps</a></dt> + <dd>Tiles are a very popular technique in 2D games for building the game world. These articles provide an introduction to tilemaps and how to implement them with the Canvas API.</dd> +</dl> diff --git a/files/kab/games/tools/engines_and_tools/index.html b/files/kab/games/tools/engines_and_tools/index.html new file mode 100644 index 0000000000..1538446ceb --- /dev/null +++ b/files/kab/games/tools/engines_and_tools/index.html @@ -0,0 +1,66 @@ +--- +title: Imsaddayen ed ifecka n wurar +slug: Games/Tools/Engines_and_tools +translation_of: Games/Tools/Engines_and_tools +--- +<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div> + +<h2 id="HTML5_amsadday_n_wurar">HTML5 amsadday n wurar</h2> + +<p>The following are game engines implemented with HTML5 and JavaScript:</p> + +<ul> + <li><a href="https://aframe.io">A-Frame</a>: A web framework for building 3D and VR experiences. With HTML and the Entity-Component ecosystem. Works across HTC Vive, Oculus Rift, desktop, and mobile platforms. From the Mozilla VR team.</li> + <li><a class="external" href="http://www.canvace.com/">Canvace</a>: An HTML5 game platform for creating 2D and 2.5D games.</li> + <li><a class="external" href="http://craftyjs.com/">Crafty</a>: A 2D JavaScript–based game framework.</li> + <li><a class="external" href="http://cocos2d-x.org/wiki/Cocos2d-js">Cocos2D JS</a>: Provides a consistent development experience for whichever platform you want to distribute to, web or native. "Code once, run everywhere" is incredibly easy and natural in Cocos2D JS. With one single JavaScript code base you can run your game in web browsers and on native platforms including Mac OS X, Windows, iOS and Android. Your game can be published on all major app stores as well as other distribution channels.</li> + <li><a class="external" href="http://www.scirra.com/">Construct 2</a>: One of the first WebGL–enabled HTML5 game engines, it exports purely to HTML5 and JavaScript. Uses Canvas only and is extensible via JavaScript plugins.</li> + <li><a class="external" href="http://www.divgo.net/">Div GO</a>: A development engine for 2D and 3D games, based on the <a href="http://divstudiogames.blogspot.co.uk/p/div-games-studio-little-history.html">Div Games Studio</a>. It includes new functions and variables to enhance vanilla HTML5 and canvas. Div GO also features an integrated development environment with code editor, list of processes and functions, graphics editor, list of running processes, compiler, and generator / packer projects.</li> + <li><a class="external" href="http://enchantjs.com/">EnchantJS</a>: A simple JavaScript framework for creating 2D and 3D HTML5 games. It has good documentation and easy–to–follow tutorials for getting started.</li> + <li><a class="external" href="http://www.compilgames.net">GDevelop</a>: A game development platform that exports to native and HTML5. It uses <a href="http://www.pixijs.com/">Pixi.js</a> to render projects as WebGL / canvas.</li> + <li><a class="external" href="http://www.isogenicengine.com/">Isogenic Engine</a>: One of the most promising game engines out there today. It has massively multiplayer networking built in, uses Node.js and MongoDB on the server-side, and can output canvas or DOM–based graphics.</li> + <li><a class="external" href="http://impactjs.com/">Impact</a>: A JavaScript game engine that comes with editors and other tools, produces a wide variety of game styles (e.g. 2D and 3D), and can publish to web, Android and iOS.</li> + <li><a href="http://jawa.games">Jawa</a> : A browser based point'n'click adventure game engine, with a built-in very easy to use authoring tool. Games are exportable as HTML5 objects. Free for personal and educational purposes</li> + <li><a class="external" href="http://melonjs.org/">melonJS</a>: A fresh and lightweight 2D sprite–based engine with WebGL and Tiled map support.</li> + <li><a class="external" href="http://mightyfingers.com/">MightyEngine</a>: 2D game engine supporting Web, Android, and iOS platforms. It includes a built in editor to manage projects, assets, and maps.</li> + <li><a class="external" href="http://phaser.io">Phaser</a>: A 2D game engine supporting Web, Android, and IOS platforms.</li> + <li><a class="external" href="http://playcanvas.com/">PlayCanvas</a>: A collaborative, cloud–hosted game engine with a visual editor, in-browser code editing and one–click publishing.</li> + <li><a class="external" href="http://piqnt.com/stage.js/">Stage.js</a>: A Lightweight and fast HTML5 2D rendering engine for cross-platform game development.</li> + <li><a class="external" href="http://superpowers-html5.com/index.en.html">Superpowers</a>: A 2D and 3D collaborative, open-source, HTML5 game dev environment using TypeScript.</li> + <li><a class="external" href="http://www.wimi5.com">WiMi5</a>: An online framework to create, publish and monetize HTML5 games. It includes a visual scripting editor so programming is not required. One-click publishing for several Web Market Places. You can also download your game as a zip and publish it where ever you want, including native desktop and mobile platforms. Easy in-app purchases integration. </li> + <li><a class="external" href="http://www.rpgmakerweb.com/products/programs/rpg-maker-mv">RPG Maker MV: </a>This particular version from the "RPG Maker" series is built on JavaScript. You can add custom code or addons, and deploy projects as Windows, Mac and web application. In addition, anime and manga–style models are included to make use of.</li> + <li><a href="https://bitbucket.org/nikola_l/visual-js/">visual-js</a>: This is JavaScript game engine canvas 2d (native js) / 3d( three.js) . Server part works on node.js. Windows users can use GUI editor (game instance creator) with gui tools (encript , multilanguage , build engine library , build resourse). Try <a href="https://jsfiddle.net/user/zlatnaspirala/fiddles/">Api examples on jsfiddle</a>. You can create game objects direct on web page (editor mode). Build images resource object with node.js tool. Any app created in this game engine works on all modern browsers. </li> +</ul> + +<h2 id="HTML5_amsadday_d_ifecka">HTML5 amsadday d ifecka</h2> + +<ul> + <li><a class="external" href="http://clay.io/development-tools">Clay.io</a>: Distribution, Retention, Social and Monetization tools. Easy integration of user accounts, high scores, achievements, cross promotion, in-game payments, analytics etc.</li> + <li><a class="external" href="https://github.com/mrdoob/stats.js">stat.js</a>: Simple JavaScript performance monitor.</li> + <li><a href="http://phasereditor.boniatillo.com">Phaser Editor</a>: an IDE to build Phaser based games. Provides several built-in tools like a scene builder, texture packer, asset manager and an improved JavaScript editor.</li> +</ul> + +<h2 id="Tatiknulujit_i_wulmen">Tatiknulujit i wulmen</h2> + +<p>The following can be useful when developing games based on Web technologies.</p> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element/canvas">Canvas</a>: 2D graphics.</li> + <li><a href="/en-US/docs/Web/WebGL">WebGL</a>: 3D graphics.</li> + <li>Audio: {{htmlelement("audio")}} element, <a href="/en-US/docs/Web_Audio_API">Web Audio API.</a></li> + <li><a href="/en-US/docs/WebSockets">WebSockets</a>: Can be used for real-time communication between a player and the game server, to support multi-player games.</li> + <li><a class="external" href="http://nodejs.org/">Node.js</a>: Node is often used as a multiplayer game server, controlling the logic and handling the WebSockets connections to the players. It can be used for player authentication and the storage of data so gameplay can persist over multiple game sessions. This is all made relatively easy with great third-party modules, like Socket.IO for WebSockets, and others that handle Redis and MongoDB for storage.</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Storage">DOM Storage</a>: Great for storing data locally on the player's device. This way you can cache game data and allow the game to continue where the player left off.</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Using_full_screen_mode">Full Screen API</a> : Allows you to expand any HTML element to fill the user's screen, even if the browser isn’t running full-screen itself.</li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a>: Traditionally one of the main differences between Web apps and native apps was that unlike web apps, native apps could be run offline. This has changed — technologies such as Service Workers allow for a website or web app to cache necessary assets so it can still run while offline. This includes things like JavaScript files, CSS and images. Combining this technique with intelligent use of things like localStorage will allow your game to continue working even if the Internet connection goes down. You just need to sync up all the changes when it gets connected again.</li> + <li><a href="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a>: Allows you to control web–based games via a gamepad. This might be just what finally justifies HTML5 gaming on a TV or console. Who wants to use a keyboard and mouse while sitting on the sofa?</li> + <li><a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>: An attempt to improve the mouse as an input device, in situations such as games and 3D visualizations where the mouse position rotates or moves you around a 3D space. As it stands, there would still be a cursor moving around the screen causing all sorts of trouble when you want to click on something in your game. With this API, you can lock your mouse position, or even hide it altogether, using the mouse movement to move the game world instead.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Not every browser supports every part of HTML5. For example, Canvas isn’t supported out of the box by any Internet Explorer version below 9. However, you can use Explorer Canvas to replicate canvas functionality (but that is not ideal and does not perform as well). WebSockets is supported by IE only in IE 10, and it isn’t supported in the stock browser of Android. But again, you can fake this by using Flash for the sockets, such as with Socket.IO. While supported in the latest versions of every other browser, WebGL in Internet Explorer requires at least version 11.</p> +</div> + +<h2 id="Tamudemt_n_wurar">Tamudemt n wurar</h2> + +<p>You can use the <a href="https://github.com/mozilla/mortar-game-stub">Mortar Game Stub</a> template to get a quick start on an HTML5 game, or you can use it to get ideas on best practices.</p> diff --git a/files/kab/games/tools/index.html b/files/kab/games/tools/index.html new file mode 100644 index 0000000000..1d026dae28 --- /dev/null +++ b/files/kab/games/tools/index.html @@ -0,0 +1,40 @@ +--- +title: Tools for game development +slug: Games/Tools +tags: + - Games + - Gecko + - Guide + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Games/Tools +--- +<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div> + +<div class="summary"> +<p><span class="seoSummary">On this page you can find links to our game development tools articles, which eventually aims to cover frameworks, compilers, and debugging tools.</span></p> +</div> + +<dl> + <dt><a href="/en-US/docs/Games/Tools/asm.js">asm.js</a></dt> + <dd>asm.js is a very limited subset of the JavaScript language, which can be greatly optimized and run in an ahead-of-time (AOT) compiling engine for much faster performance than your typical JavaScript performance. This is, of course, great for games.</dd> + <dt><a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a></dt> + <dd> + <p>An LLVM to JavaScript compiler; with Emscripten, you can compile C++ and other languages that can compile to LLVM bytecode into high-performance JavaScript. This is a great tool for porting applications to the Web! There is a <a href="https://github.com/kripken/emscripten/wiki/Tutorial">useful Emscripten tutorial</a> available on the wiki. Note that we are <a href="/en-US/docs/Emscripten">aiming to cover Emscripten in its own section of MDN</a>.</p> + </dd> + <dt><a href="https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/" title="https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/">Gecko profiler</a></dt> + <dd>The Gecko profiler extension lets you profile your code to help figure out where your performance issues are so that you can make your game run at top speed.</dd> + <dt><a href="/en-US/docs/Games/Tools/Engines_and_tools">Game engines and tools</a></dt> + <dd>A list of engines, templates and technologies useful to game developers.</dd> + <dt><a href="/en-US/docs/Mozilla/Projects/Shumway">Shumway</a></dt> + <dd>Shumway is a renderer for Adobe Flash built entirely in JavaScript, WebGL, etc., bridging the gap between Flash and web standards. This article shows how to make use of Shumway, and how to contribute fixes and bugs to the project.</dd> + <dt>Toolchain for developing and debugging games</dt> + <dd>How does this differ from normal web app debugging? What specialist tools are available? A lot of this is going to be covered by Will in <a href="/en-US/docs/Tools">tools</a>, but here we should provide a kind of practical toolchain tutorial for debugging games, with links to Will's stuff: + <ul> + <li>Basic tools overview</li> + <li><a href="/en-US/docs/Tools/Shader_Editor">Shader editor</a></li> + <li>Performance tools (still in production, estimated early 2014)</li> + </ul> + </dd> +</dl> diff --git a/files/kab/games/tutorials/2d_breakout_game_phaser/index.html b/files/kab/games/tutorials/2d_breakout_game_phaser/index.html new file mode 100644 index 0000000000..30314e4c91 --- /dev/null +++ b/files/kab/games/tutorials/2d_breakout_game_phaser/index.html @@ -0,0 +1,53 @@ +--- +title: 2D Breakout urar iseqdacen Phaser +slug: Games/Tutorials/2D_breakout_game_Phaser +translation_of: Games/Tutorials/2D_breakout_game_Phaser +--- +<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div> + +<p>{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}</p> + +<p class="summary">Deg almeẓdan agi ciṭ ciṭ ad nesnulfu urar umafus MDN afrari yettwarun s JavaScript,s useqdec n framework<a href="http://phaser.io/"> Phaser</a>.</p> + +<p>Every step has editable, live samples available to play with so you can see what the intermediate stages should look like. You will learn the basics of using the Phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, framework-specific helper functions, animations and tweens, and winning and losing states.</p> + +<p>To get the most out of this series of articles you should already have basic to intermediate <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> knowledge. After working through this tutorial you should be able to build your own simple Web games with Phaser.</p> + +<p><img alt="Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives." src="https://mdn.mozillademos.org/files/11323/mdn-breakout-phaser.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p> + +<h2 id="Abruy_n_tamsirt">Abruy n tamsirt</h2> + +<p>Meṛṛa timsirin-ed yal alqem n <a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/lesson16.html">urar MDN Breakout</a> i nesallay akken-<a href="/kab/docs/"> ttunamalen </a><a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/">deg Github</a></p> + +<ol> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework">Initialize the framework</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Scaling">Scaling</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen">Load the assets and print them on screen</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball">Move the ball</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Physics">Physics</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls">Bounce off the walls</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls">Player paddle and controls</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Game_over">Game over</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field">Build the brick field</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Collision_detection">Collision detection</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/The_score">The score</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Win_the_game">Win the game</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Extra_lives">Extra lives</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens">Animations and tweens</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Buttons">Buttons</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay">Randomizing gameplay</a></li> +</ol> + +<p>As a note on learning paths — starting with pure JavaScript is the best way to get a solid knowledge of web game development. If you are not already familiar with pure JavaScript game development, we'd suggest that you first work through this series' counterpart, <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a>.</p> + +<p>After that, you can pick any framework you like and use it for your projects; we've chosen Phaser as it is a good solid framework, with a good support and community available, and a good set of plugins. Frameworks speed up development time and help take care of the boring parts, allowing you to concentrate on the fun stuff. However, frameworks are not always perfect, so if something unexpected happens or you want to write some functionality that the framework doesn't provide, you'll need some pure JavaScript knowledge.</p> + +<div class="note"> +<p><strong>Note</strong>: This series of articles can be used as material for hands-on game development workshops. You can also make use of the <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit">Gamedev Phaser Content Kit</a> based on this tutorial if you want to give a talk about game development with Phaser.</p> +</div> + +<h2 id="Next_steps">Next steps</h2> + +<p>Ok, let's get started! Head to the first part of the series — <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework">Initialize the framework</a>.</p> + +<p>{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}</p> diff --git a/files/kab/games/tutorials/index.html b/files/kab/games/tutorials/index.html new file mode 100644 index 0000000000..90d1cb0790 --- /dev/null +++ b/files/kab/games/tutorials/index.html @@ -0,0 +1,27 @@ +--- +title: Tutorials +slug: Games/Tutorials +tags: + - Canvas + - Games + - JavaScript + - NeedsTranslation + - TopicStub + - Web + - Workflows +translation_of: Games/Tutorials +--- +<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div> + +<p>This page contains multiple tutorial series that highlight different workflows for effectively creating different types of web games.</p> + +<dl> + <dt><a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a></dt> + <dd>In this step-by-step tutorial you'll implement a simple breakout clone using pure JavaScript. Along the way you will learn the basics of using the {{htmlelement("canvas")}} element to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, and winning and losing states.</dd> + <dt><a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a></dt> + <dd>In this step-by-step tutorial you'll implement the same breakout clone as the previous tutorial series, except that this time you'll do it using the<a class="external external-icon" href="http://phaser.io/">Phaser</a> HTML5 game framework. This idea here is to teach some of the fundamentals (and advantages) of working with frameworks, along with fundamental game mechanics.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">2D maze game with device orientation</a></dt> + <dd>This tutorial shows how to create a 2D maze game using HTML5, incorporating fundamentals such as collision detection and sprite placement on a {{htmlelement("canvas")}}. This is a mobile game that uses the <a href="/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Device Orientation</a> and <a href="/en-US/docs/Web/Guide/API/Vibration">Vibration</a><strong> APIs</strong> to enhance the gameplay and is built using the <a href="http://phaser.io/">Phaser</a> framework.</dd> + <dt><a href="https://mozdevs.github.io/html5-games-workshop/en/guides/platformer/start-here/">2D platform game with Phaser</a></dt> + <dd>This tutorial series shows how to create a simple platform game using <a href="http://phaser.io/">Phaser</a>, covering fundamentals such as sprites, collisions, physics, collectables, and more.</dd> +</dl> diff --git a/files/kab/glossary/abstraction/index.html b/files/kab/glossary/abstraction/index.html new file mode 100644 index 0000000000..8250e0b6c5 --- /dev/null +++ b/files/kab/glossary/abstraction/index.html @@ -0,0 +1,14 @@ +--- +title: Tadwant +slug: Glossary/Abstraction +translation_of: Glossary/Abstraction +--- +<p>Tadwant deg {{Glossary("asmihel n tasenselkimt ")}} taɣult n usihel n tasenselkimt yettaǧǧa a seqsef n waxnaz u swaya ad iffeɣ yiwen n disign ed asnulfu imellilen deg anagraw n iseɣẓanen isemlalen.tettefer isemlalen titiknikitin n inagrawen defir n {{Glossary("API", "APIs")}}. ig sahlen iw sqardec. </p> + +<h2 id="Lmed_ugar"><strong>Lmed ugar </strong></h2> + +<h3 id="Idles_amatu"><strong>Idles amatu </strong></h3> + +<ul> + <li>{{interwiki("wikipedia", "Tadwant (tasenselkimt)", "Tadwant")}} ɣer Wikipedia</li> +</ul> diff --git a/files/kab/glossary/ajax/index.html b/files/kab/glossary/ajax/index.html new file mode 100644 index 0000000000..18db25e768 --- /dev/null +++ b/files/kab/glossary/ajax/index.html @@ -0,0 +1,22 @@ +--- +title: AJAX +slug: Glossary/AJAX +translation_of: Glossary/AJAX +--- +<p>AJAX (Asynchronous {{glossary("JavaScript")}} akked {{glossary("XML")}}) d tasemrest n usihel yesdukulen {{glossary("HTML")}}, {{glossary("CSS")}}, JavaScript, d {{glossary("DOM")}}, akked <code>XMLHttpRequest</code> {{glossary("object")}} akken ad nebnu ugar n isebtar web imeẓda. Ayen ixeddem AJAX d aleqqem n kra n isebtar web deg umḍiq n usmiren n usebter meṛṛa. AJAX ad k-yeǧǧ daɣen ad tmahleḍ s wudem aramtawan, ayen yettwaǧǧan tangalt inek ad tetttwaselkem ticki kran n yeḥricen n isebtar inek ttaɛraḍen ad d-alin tikelt-nniḍen (ma yella nquren akken wudem amtawan i yessewḥalen tangalt inek seg uselkem arama yuli-d akk usebter inek).</p> + +<h2 id="Issin_ugar">Issin ugar</h2> + +<h3 id="Tamusni_tamatut">Tamusni tamatut</h3> + +<ul> + <li>{{interwiki("wikipedia", "AJAX")}} di Wikipedia</li> + <li><a href="http://peoplesofttutorial.com/difference-between-synchronous-and-asynchronous-messaging/">Taɣwalt Tamtawant mgal Taramtawant</a></li> +</ul> + +<h3 id="Talɣut_tatiknikant">Talɣut tatiknikant</h3> + +<ul> + <li>Taɣawsa {{domxref("XMLHttpRequest")}}.</li> + <li><a href="/en-US/docs/AJAX">Tasemlit AJAX di MDN</a></li> +</ul> diff --git a/files/kab/glossary/aneggaf/index.html b/files/kab/glossary/aneggaf/index.html new file mode 100644 index 0000000000..e30fe9f293 --- /dev/null +++ b/files/kab/glossary/aneggaf/index.html @@ -0,0 +1,8 @@ +--- +title: aneggaf +slug: Glossary/aneggaf +tags: + - Aneggaf + - HTTP +--- +<p>Aneggaf d tarrayt n teɣwalt gar sin n isenneftaɣen</p> diff --git a/files/kab/glossary/css/index.html b/files/kab/glossary/css/index.html new file mode 100644 index 0000000000..81c8de689d --- /dev/null +++ b/files/kab/glossary/css/index.html @@ -0,0 +1,44 @@ +--- +title: CSS +slug: Glossary/CSS +translation_of: Glossary/CSS +--- +<p>CSS (Cascading Style Sheets) neɣ s Teqbaylit tiferkit n uɣanib s udabder n tultayt n tseɣrut isenqaden amek i d-teffɣen isebtar deg {{glossary("browser")}}. Iminig yesnas taseɣrut n uɣanib CSS ɣef iferdisen yettwafernen akken ad ten-id-yesken akken iwata. Taseɣrut n uɣanib tegber timezliyin akked wazalen nnsent, ayen id-yemmalen amek egan isebtar web.</p> + +<p>CSS d yiwen seg titiknulujiyin tigejdanin Web, akked {{Glossary("HTML")}} d {{Glossary("JavaScript")}}. CSS yettwaseqdac labaɛda i {{Glossary("Element"," Iferdisen HTML")}}, acukan yezmer daɣen ad ittuseqdec akked di tutlayin n tṛekkizin am {{Glossary("SVG")}} neɣ {{Glossary("XML")}}.</p> + +<p>Alugen CSS yettuwennez ar {{Glossary("tmeẓli CSS","properties")}} icudden ar {{Glossary("umsefran")}}. Wagi d amedya yettarran yal taseddaṛt HTML d awraɣ deg ugilal aberkan:</p> + +<pre class="brush: css">/* Amsefran "p" yemmal-d d akken akk tiseddaṛin deg isemli ara yeḥaz ulugen*/ +p { + /* Imyerr "color" yemmal-d ini n uḍris, dagi d awraɣ. */ + color: yellow; + + /* Imyerr "background-color" yemmal-d ini n ugilal, dagi d aberkan. */ + background-color: black +}</pre> + +<p>"Adabdar" immal-d ilugan amek ara ddun imsefran deg usmizzwer n usnes n ilugan akken ad sniflen arwes n usebter. Ayagi d tamahilt igarzen, acku asmel web asemlal yezmer ad yegber agimen n ilugan CSS.</p> + +<h2 id="Issin_ugar">Issin ugar</h2> + +<h3 id="Tamusni_tamatut">Tamusni tamatut</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/Learn/CSS">Issin CSS</a></li> + <li>{{interwiki("wikipedia", "CSS")}} di Wikipedia</li> +</ul> + +<h3 id="Tamsisɣelt_tatiknikant">Tamsisɣelt tatiknikant</h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS">Tasemlit CSS di MDN</a></li> + <li><a href="http://www.w3.org/Style/CSS/current-work" rel="external">Amahil amiran n ugraw n umahil CSS</a></li> +</ul> + +<h3 id="Issin_ɣef_CSS">Issin ɣef CSS</h3> + +<ul> + <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">Tamsirt web di codecademy.com</a></li> + <li><a href="http://www.expression-web-tutorial.com/Types_CSS_Styles.html">Kraḍ n wanawen n CSS</a></li> +</ul> diff --git a/files/kab/glossary/html/index.html b/files/kab/glossary/html/index.html new file mode 100644 index 0000000000..59d1260aa1 --- /dev/null +++ b/files/kab/glossary/html/index.html @@ -0,0 +1,44 @@ +--- +title: HTML +slug: Glossary/HTML +translation_of: Glossary/HTML +--- +<p>HTML (HyperText Markup Language) d tutlayt n useglem yemmalen taɣessa n usebter web.</p> + +<h2 id="Amazray_wezzilen">Amazray wezzilen</h2> + +<p>Di 1990, Deg iwet n tmuɣli n {{glossary("World Wide Web","Web")}}, Tim Berners-Lee imudd-d tabadut n tikti n {{glossary("hypertext")}}, anida Berners-Lee yura-t aseggass sakin s tutlayt n trekkizin yebnan ɣef {{glossary("SGML")}}. {{glossary("IETF")}} yebda asizeɣ s wudem unṣib n HTML di 1993, yesseffeɣ-d lqem 2.0 di 1995 seld deqs n ileqman irewwayen. Di 1994 Berners-Lee yesbedd {{glossary("W3C")}} akken ad isnefli Web. Di 1996, W3C yeṭṭef leqdic icudden ar HTML, yessuffeɣ-d sakin iwellihen HTML 3.2 aseggaz ar zdat. HTML 4.0 yeffeɣ-d di 1999 yuɣal d tizeɣt {{glossary("ISO")}} di 2000.</p> + +<p>Deg akud-nni, W3C yeǧǧa HTML yerfed {{glossary("XHTML")}}, ayen yessawḍen asbeddi n ugraw amunan isem-is {{glossary("WHATWG")}} di 2004. Tanemmirt i WHATWG, imi leqdic ɣef {{glossary("HTML5")}} yedda: snat-agi n tuddsiwin suffɣent-d lqem arewway n tizeɣtdi 2008 akked lqem uniɣib di 2014.</p> + +<h2 id="Immekti_akked_d_teɣdirawt">Immekti akked d teɣdirawt</h2> + +<p>Isemli HTML d aḍris aččuṛan yebnan ɣef {{glossary("element","iferdisen")}}. Iferdisen ttwarren gar snat n trekkizin: taldayt, tumdilt {{Glossary("tag","tirekkizin")}}. Yal tarekkizt tbeddu u tettfaka s izamulen (<code><></code>). Llant kra n trekkizin tilmawin ur yegbiren ara aḍris am {{htmlelement("img")}}.</p> + +<p>Tzemreḍ ad tessiɣzfeḍ tiṛekkizin HTML s {{Glossary("attribute","imyerren")}}, ayen ara d-imudden talqut-nniḍen ara yennalen tarrayt amek iminig inek ad yegzu aferdis-nni:</p> + +<p><img alt=""></p> + +<p>Afaylu HTML yettwaseklas s suziɣzef <code>.htm</code> neɣ <code>.html</code>, d {{Glossary("Server","Aqeddac web")}} i t-id-yettmuddun, udiɣ yezmer ad t-i-yerr s useqdec n {{Glossary("Browser","iminig Web")}}.</p> + +<h2 id="Issin_ugar">Issin ugar</h2> + +<h3 id="Tamusni_tamatut">Tamusni tamatut</h3> + +<ul> + <li>{{interwiki("wikipedia", "HTML", "HTML")}} di Wikipedia</li> +</ul> + +<h3 id="Almud_n_HTML">Almud n HTML</h3> + +<ul> + <li><a href="http://developer.mozilla.org/en-US/Learn/HTML">aṭuturiyal-nneɣ HTML</a></li> + <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">Timsirin web di codecademy.com</a></li> +</ul> + +<h3 id="Tamsisɣelt_tatiknikant">Tamsisɣelt tatiknikant</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML">Tasemlit HTML di MDN</a></li> + <li><a href="http://www.w3.org/TR/html5/" rel="external">Aselmes </a><a href="http://www.w3.org/TR/html5/" rel="external">HTML</a></li> +</ul> diff --git a/files/kab/glossary/http/index.html b/files/kab/glossary/http/index.html new file mode 100644 index 0000000000..e2199ca0f1 --- /dev/null +++ b/files/kab/glossary/http/index.html @@ -0,0 +1,17 @@ +--- +title: HTTP +slug: Glossary/HTTP +translation_of: Glossary/HTTP +--- +<p>HTTP (HyperText Transfer Protocol) d {{glossary("aneggaf")}} yessirigen asiweḍ n ifuyla di {{glossary("World Wide Web","Web")}}. HTTP d aḍrisan (akk taɣwalt tettwag s udris aččuran) udiɣ d aneggaf s war addad ayen yemmalen d akken yal taɣwalt yettwagen, ur tzeṛ ara tin i yettwazren.</p> + +<div> +<h2 id="Issin_ugar">Issin ugar</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP">HTTP di MDN</a></li> + <li>{{interwiki("wikipedia", "Hypertext Transfer Protocol", "HTTP")}} di Wikipedia</li> +</ul> +</div> + +<p> </p> diff --git a/files/kab/glossary/index.html b/files/kab/glossary/index.html new file mode 100644 index 0000000000..eb30c7e182 --- /dev/null +++ b/files/kab/glossary/index.html @@ -0,0 +1,27 @@ +--- +title: Amawal +slug: Glossary +tags: + - Beginner + - Glossary + - Index + - Landing + - NeedsTranslation + - TopicStub +translation_of: Glossary +--- +<div style="max-width: 300px; float: right; margin: 0 0 .5em 1em;">{{LearnBox({"title":"Learn a new term:"})}}</div> + +<p>Titiknulujitin n web ččuṛent d urtan d awalen itiknikiyen yettuseqdacen deg turmin d tangalt.amawal agi degs tabadut n wawalen d tazegzilt i k yessefken i wegzu d useqdec n web..</p> + +<p>{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}</p> + +<h2 id="Ttekkit_deg_mawal">Ttekkit deg mawal </h2> + +<p>Amawal agi d leqdic ur nkeffu ulac taggara,tzemreḍ ad tefkkeḍ tallalt s<a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary"> tira n wawalen imaynuten </a>naɣ ad tt-semsawiḍ ayagi s inekcumen imaynuten naɣ ad tt-garrzeḍ ayen yellan yakan. Ayen i sahlen mara tebduḍ d asiti ɣef useɣwen naɣ fren tiwtilin yellan swada agi.</p> + +<p><strong><a href="/en-US/docs/new?parent=4391">Ernut anekcum nniḍen deg umawal</a></strong></p> + +<p>{{GlossaryList({"terms":["at-rule", "ALPN", "Attack", "Byte-Order Mark", "client", "Character set", "cryptosystem", "debug", "digital signature", "execution", "flex-direction", "GLSL", "Interface", "Library", "Memory management", "routers", "Self-Executing Anonymous Function", "Stylesheet", "Vector image"], "filter": "notdefined", "css": "multiColumnList"})}}</p> + +<p>Ma tebɣiḍ ad tisinneḍ ugar n wamek i tzemrem ad tefkkeḍ tallalt s umawal,rrzut s<a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Glossary"> asebtar n waddad n tiwtilin n umawal.</a></p> diff --git a/files/kab/glossary/responsive_web_design/index.html b/files/kab/glossary/responsive_web_design/index.html new file mode 100644 index 0000000000..736f074ab8 --- /dev/null +++ b/files/kab/glossary/responsive_web_design/index.html @@ -0,0 +1,16 @@ +--- +title: Asmel Web Amsasay +slug: Glossary/Responsive_web_design +translation_of: Glossary/Responsive_web_design +--- +<p>Responsive Web Design (RWD) d amiḍran usnefli n Web iswi-s d akken ad yer ismal d irebbawen u ad ddun s wudem akkay deg yal allalen n tisenselkimitin anewrik,seg lbiru ɣer amafus</p> + +<h2 id="Lmmed_ugar">Lmmed ugar</h2> + +<h3 id="Idles_Sumata">Idles Sumata</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_design">Tazwart ed Tiɣbalutin.</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web_Development/Mobile/Responsive_design">Abaɣuṛ ed uheggef n tiririt.</a></li> + <li><a href="http://msdn.microsoft.com/en-us/magazine/hh653584.aspx">Asmel Web amsasay</a></li> +</ul> diff --git a/files/kab/glossary/svg/index.html b/files/kab/glossary/svg/index.html new file mode 100644 index 0000000000..f18f3dd000 --- /dev/null +++ b/files/kab/glossary/svg/index.html @@ -0,0 +1,33 @@ +--- +title: SVG +slug: Glossary/SVG +translation_of: Glossary/SVG +--- +<p><em>Scalable Vector Graphics</em> (<strong>SVG</strong>) d amasal n tugna tamawayt 2D yezider ɣef taseddast {{Glossary("XML")}} .</p> + +<p>A {{Glossary("W3C")}} ibda leqdic innes ɣer taggara iseggasen 1990,maca SVG yuɣal yettwasen ass-mi {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9 yefeɣ-ed s tannalt SVG.meṛṛa igejdanen {{Glossary("iminig","iminigen")}} ttannalin tura SVG.</p> + +<p>Azider ɣef yiwet n taseddast {{Glossary("XML")}}, SVG yezmer ad yettuɣanib akked {{Glossary("CSS")}} u ad nesnulfu s leqdic {{Glossary("JavaScript")}}. HTML5 yettaǧǧayaɣ tura aseddu srid n SVG {{Glossary("Tag","tags")}} deg yiwen zzmam{{Glossary("HTML")}}.</p> + +<p>akka s <a href="http://en.wikipedia.org/wiki/Vector_graphics">amasal n tugna tamawayt</a>,udlifen SVG zemren ad mgaraden xila, {{Glossary("Dizayn udmir")}}, acku tzemreḍ ad snulfuḍ iferdisen n agrudem ed udlifen ig msasan deg yal tiddi n wagdil.SVG yettmuddud daɣen aṭas n ifecka i wulmen,am tawaksa,aggelmes,tistayin ed imrayen.</p> + +<h2 id="Issin_ugar">Issin ugar</h2> + +<h3 id="Tamusni_tamatut">Tamusni tamatut</h3> + +<ul> + <li>{{Interwiki("wikipedia", "SVG")}} di Wikipedia</li> +</ul> + +<h3 id="Almud_n_SVG">Almud n SVG</h3> + +<ul> + <li><a href="https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">Ameskan SVG n W3 .org </a></li> +</ul> + +<h3 id="Talɣut_tatiknikant">Talɣut tatiknikant</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG">Tasemlit SVG di MDN</a></li> + <li><a href="http://www.w3.org/TR/SVG/" rel="external">Aselmes aneggaru n SVG</a></li> +</ul> diff --git a/files/kab/glossary/url/index.html b/files/kab/glossary/url/index.html new file mode 100644 index 0000000000..87029a1337 --- /dev/null +++ b/files/kab/glossary/url/index.html @@ -0,0 +1,24 @@ +--- +title: URL +slug: Glossary/URL +translation_of: Glossary/URL +--- +<p><strong>URL</strong>(<em>Uniform Resource Locator) d azrir n isekkilen yemmalenanida tezmer ad tettwaf teɣbalut di Internet</em>.</p> + +<p>Deg umnaḍ n {{Glossary("HTTP")}}, Tansiwin URL ttusemmant "Tansiwin Web" neɣ "aseɣwen". Iminig innek ad d-yesken tansiwin URL deg ufeggag n tansa, amedya <code>https://developer.mozilla.org</code></p> + +<p>Tansiwin URL zemrent daɣen ad ttwasqedcent di tuzna n ifuyla s uneggaf ({{Glossary("FTP")}}) , imaylen ({{Glossary("SMTP")}}), akked isnasen-nniḍen.</p> + +<h2 id="Issin_ugar">Issin ugar</h2> + +<h3 id="Tamusni_tamatut"><strong>Tamusni tamatut</strong></h3> + +<ul> + <li>{{Interwiki("wikipedia", "URL")}} di Wikipedia</li> +</ul> + +<h3 id="Issin_fell-as">Issin fell-as</h3> + +<ul> + <li><a href="/en-US/Learn/Understanding_URLs">Gzul tansiwin URLs akked tɣessa-nsent</a></li> +</ul> diff --git a/files/kab/glossary/xml/index.html b/files/kab/glossary/xml/index.html new file mode 100644 index 0000000000..85d7559e70 --- /dev/null +++ b/files/kab/glossary/xml/index.html @@ -0,0 +1,14 @@ +--- +title: XML +slug: Glossary/XML +translation_of: Glossary/XML +--- +<p>eXtensible Markup Language (XML) tutlayt n ṭarkkizt tamsihert yesbadu sɣuṛ W3C.agzum IT (isalen tatiknulujit) aṭas n tutlayin i ṛeṣṣan ɣef XML yellan d tutlayt n waglam n isefka..</p> + +<p>Tiṛkkizin XML ttemcabint ɣer tiṛkkizin HTML,maca XML d imleɣwi s waṭas acku i ttaǧǧa aqedac ad yesbadu tiṛkkizin innes.s wayagi,XML i teddu am tadfermeslayt,belli ed tutlayt yettwasqedcen iw sbadu n tutlayin nniḍen,am {{Glossary("RSS")}}.ernu,HTML tutlayt n tanekda,mad XML tutlayt n waglam isefka,anamek n waya d akken XML yeldi i deqs n isnasen ig hrawen s waṭas ɣef web kkan,amedya,tinfawin n web zemrent ad sqedcent XML iw beddel n asuter ed tiriritin.</p> + +<h2 id="Lmed_ugar">Lmed ugar</h2> + +<ul> + <li><a href="/en-US/docs/XML_Introduction">XML tazwart</a></li> +</ul> diff --git a/files/kab/lmed/getting_started_with_the_web/html_basics/index.html b/files/kab/lmed/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..bdbd531025 --- /dev/null +++ b/files/kab/lmed/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,218 @@ +--- +title: HTML uzdir +slug: Lmed/Getting_started_with_the_web/HTML_basics +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +<div> +<div> +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div> +</div> +</div> + +<div class="summary"> +<p>HTML (Hypertext Markup Language) d Tangalt ig ttwasqedcen amṣuk n agbur n usebtar n web u as-id yefk anamek d iswi.amedya,agbur n usebtar innek yezmer ad yilli d amatu n tiseddarin neɣ d umuɣ tiẓunin.yezmer daɣen ad awiḍ tugniwin,tifelwin n isefka.mebla ma nekcem deg talqayt ululled,amagrad agi attafem degs aṭas n isallen iw sedduy n HTML.</p> +</div> + +<h2 id="D'acut_HTML">D'acut HTML?</h2> + +<p>HTML ur yelli,deg tidett,tutlayt n usihel. d tutlayt n tarkkizt ittwasqedcen iw akken ad yefk tamṣukt d unamek n ugbur i nebɣa a n wali deg asmel n web.llan degs <strong>{{Glossary("element", "elements")}}</strong>, imeẓliyen ara nesdukkel ɣer yal tamiwin n iferdisen iw akken ad yejbu unamek.ticṛaḍ {{Glossary("tag", "tags")}} id yezin ɣef awal naɣ tugna zemren ad sallin aseɣwen aflaḍṛis,ssers aḍṛis s iṭalik,ateg.amedya,s wayen id iteddun akka:</p> + +<pre>Amcic inu irfa +</pre> + +<p>Ma tebɣam aḍṛis agi ad yilli deg taseddart,a ten sers deg yiwen uferdis n taseddart ({{htmlelement("p")}}) :</p> + +<pre class="brush: html"><p>Amcic inu irfa </p></pre> + +<h3 id="Tacellaḥt_n_uferdis_HTML">Tacellaḥt n uferdis HTML</h3> + +<p>Sikked akken iwata aferdis agi n taseddart.</p> + +<p><a href="https://mail.google.com/mail/u/1/?ui=2&ik=c5393cd974&view=fimg&th=15ae0ca05bd196d6&attid=0.1.1&disp=emb&attbid=ANGjdJ9DO2ZPDrhNFTdUCOUw1kQ-ZALVRsErV3DnQWvzpWSesFA0cR8P6rDeibdTLhDb9Ma7IitOV9Nlg1D6OyBDh15ayC0sEqQGAgMec5XiEtCA-bzN5e481j_vydA&sz=s0-l75-ft&ats=1489841017659&rm=15ae0ca05bd196d6&zw&atsh=1"><img alt="Ameskan yemallen tiskiwet n uferdis HTML" src="https://mail.google.com/mail/u/1/?ui=2&ik=c5393cd974&view=fimg&th=15ae0ca05bd196d6&attid=0.1.1&disp=emb&attbid=ANGjdJ9DO2ZPDrhNFTdUCOUw1kQ-ZALVRsErV3DnQWvzpWSesFA0cR8P6rDeibdTLhDb9Ma7IitOV9Nlg1D6OyBDh15ayC0sEqQGAgMec5XiEtCA-bzN5e481j_vydA&sz=s0-l75-ft&ats=1489841017659&rm=15ae0ca05bd196d6&zw&atsh=1" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></a></p> + +<p>Isegran imenzawiyen n aferdis nneɣ atenih:</p> + +<ol> + <li><strong>Taṛkkizt illin:</strong>degs isem n uferdis dagi (in this case, p), ger snat n <strong>taciwin</strong>.ayagi yemmal tazwart n uferdis. ,neɣ amḍiq i seg yesemdu.iw medya nneɣ,ayagi yemmal tazwart n uferdis.</li> + <li><strong>Taṛkkizt imedlen:</strong> Dagi ɣuṛnaɣ daɣen taciwin d yisem n uferdis,i deg anernu tafeggagt timezlit send isem n uferdis.ayagi yemmal taggara n uferdis.iw medya nneɣ,ayagi yemmal taggara n taseddart.</li> + <li><strong>Agbur:</strong> D agbur n uferdis,dagi d aḍṛis kan.</li> + <li><strong>Aferdis:</strong> Yesemdu s taṛkkizt yellin,s taṛkkizt imedlen d agbur.</li> +</ol> + +<p>Iferdisen zemren ad yilli ɣuṛsen ad « ayla » dayen ittemcabin:</p> + +<p><img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mail.google.com/mail/u/1/?ui=2&ik=c5393cd974&view=att&th=15ae339537151300&attid=0.1&disp=safe&realattid=f_j0fqnbrt0&zw" style="display: block; height: 124px; margin: 0px auto; width: 1024px;"></p> + +<p>Deg aylaten llan isalen yernan ig wehan ɣer s aferdis ur nebɣi ad ittwasken akked agbur.deg medya yagi,ayla tadala yettaǧǧa aseqdec n isem i tukza n uferdis u isem agi nezmer a tenseqdec tikelt nniḍen iw sersi n talɣa d wayen nniḍen.</p> + +<p>Yessefk ɣef ayla ad yesɛu:</p> + +<ol> + <li>Tallunt ger ayla d isem n uferdis anda aylaten zwaren (ma yella ugar aylaten)</li> + <li>Isem (d isem n wayla),defir-is tadugamt n nned« = »</li> + <li>Alday d amdal issilawen iw segrer azal n wayla. </li> +</ol> + +<h3 id="Asmeckukkel_iferdisen">Asmeckukkel iferdisen</h3> + +<p>Tzemrem a ttessarsem iferdisen deg fardisen nniḍen,d wagi i wumi neqqaṛ Timeckukkal.amedya,ma yella tebɣiḍ ad sekneḍ d-akken amcic inek s tidett irfa,tzemreḍ a tessarsem awal "tidett" deg uferdis {{htmlelement("strong")}} , anamek-is d-akken awal ad yers d amezwaru:</p> + +<pre class="brush: html"><p>Amcic inu s <strong>tidett</strong> yerfa .</p></pre> + +<p>Acu kan tikwal yessefk attḥadreḍ akken iferdisen ad meckukklen akken iwata wa ɣer wa.deg medya izrin,a neldi aferdis <p>, dɣa aferdis <strong>. s-akkin,a nemdel aferdis <strong> dɣa a nemdel aferdis <p>. ma yella neseqdec tangalt id iteddun,ayagi ur iggerez ara:</p> + +<pre class="example-bad brush: html"><p>amcic inu s <strong>tidett yerfa .</p></strong></pre> + +<p>Iferdisen yessefk ad ttwaldin u ad ttwamedlen akken iwata,ma yella zelgen,iminig ad yaɛreḍ ad yefren win iwulmen,ahat mačči d win i nettraǧǧu.deg wawal,ttif ad yilli umeckukkel n iferdisen i wata iw akken ur yettilli ara wugur.</p> + +<h3 id="Iferdisen_ilemawen">Iferdisen ilemawen</h3> + +<p>Kra seg fardisen ur ɣuṛsen ara agbur.iferdisen agi isem n sen Iferdisen ilemawen.ma yella n keyed aferdis {{htmlelement("img")}} agi deg ufaylu HTML:</p> + +<pre class="brush: html"><img src="tiwlafin/firefox-icon.png" alt="asadez tawlaft inu"></pre> + +<p>Aferdis agi degs sin n aylaten maca ulac taṛkkizt imedlen <code></img></code>waya agbur agwensan.tidett,aferdis n tugna ur yettawi yara agbur,iswi ines d asekcem n tawlaft deg sebtar n HTML,deg mḍiq anda aferdis yettwasers.</p> + +<h3 id="Tacelaḥt_n_tateggart_HTML">Tacelaḥt n tateggart HTML</h3> + +<p>tura akka n wala kra iferdisen HTML azadur.ma ttwabḍan,ur wulmen ara.ansikked amek ara nesemlil iw snulfu n usebtar HTML anguz.aneddu seg medya n ugbur yellan deg ufaylu amatar.html (id nesnulfa deg umagrad <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Sefrek amagrad</a>:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Asadez usebtar inu </title> + </head> + <body> + <img src="tawlaft/firefox-icon.png" alt="asadez tawlaft inu"> + </body> +</html></pre> + +<p>Atan d'acu yellan:</p> + +<ul> + <li><code><!DOCTYP html></code> —adoctyp.deg tazwart n HTML,deg iseggasen n 1991-1992,idoctypen llan ttwasqedcen iw akken ad gen tamselyut i tigrummiwin n ilugan i nezmer a neseqdec i wakken aninni tateggart tella deg HTML « aɣbal» u ad yaf inezriyen n taṛkkizt.acu kan,wigi ur ttwaqedcen ara assagi llan kan iw akken ad senkeden asalḥuy n usebtar arnu iminigen iqbuṛen.ma tura,dayagi ig llan tmusni ɣef idoctypen.</li> + <li><code><html></html></code> — <code>aferdis <html></code> . aferdis agi d netta ig segreren meṛṛa agbur n usebtar.aferdis agi tikwal sawalen-as aferdis aẓaṛ.</li> + <li><code><head></head></code> — <code>aferdis <head></code> .aferdis agi yettwaseqdec am ukufi i yal taɣawsa yellan deg sebtar HTML maca ur llin ara deg wagbur yettwaseknen.deg fardis agi ara nesers awal yufraren{{Glossary("keyword", "keywords")}} ,yiwen uglam n usebtar ara d-yefɣen deg amsadday n unadi,iseɣwen ig teddun ɣer sifuyla CSS ad ttwasqedcen deg sersi n talɣa,alɣuten n wuraren isekkilen (character sets) ay ttwasqedcen ar taggara.</li> + <li><code><body></body></code> — <code>aferdis <body></code> . aferdis agi yella ɣuṛes <em>meṛṛa</em> aferdis i tebɣam attseknem iw akken anerzuf a tiwali:ayagi izmer ad yilli d adṛis neɣ,tiwlafin,tividiyutin,uraren ateg.</li> + <li><code><meta charset="utf-8"></code> — aferdis agi yesbadu urar n isekkilen ig ssefk ad ttwasqedcen i zzmam u ad yesken belli d utf-8.utf-8 yesdukkel tagrumma n isekkilen yettwasnen yettwasqedcen deg tutlayin n imdanen.amatu utf-8 yettaǧǧa aselḥuy n adṛis yellan teseqdacem deg sebtar.ɣef aya i neseqdac urar agi n isekkilen acku yettaǧǧayaɣ a tenseqdec sumata deg yal iḥricen..</li> + <li><code><title></title></code> — aferdis agi yeskanayed azwel n usebtar inek.d azwel agi ara d ibanen deg iccer mara yilli asebtar inek yezdem.u daɣen d azwel agi ara yettwasqedcen deg glem n usebtar mara tent serseḍ deg ticṛaḍ isebtaren.</li> +</ul> + +<h2 id="Tugniwin">Tugniwin</h2> + +<p>I tikelt nniḍen ansikked aferdis n tawlaft:</p> + +<pre class="brush: html"><img src="tawlaft/firefox-icon.png" alt="asadez tawlaft inu"></pre> + +<p>Am akken in wala tikelt izrin,aferdis agi yettaǧǧa asekcem n tugna deg sebtar,deg amḍiq ideg aferdis ittbaned.tawlaft yettwasqedcen tettwasbad seg ayla src (iw ɣbalu) yellan degs abrid ɣer s afaylu n tugna.</p> + +<p>Neseqdec daɣen ayla alt (iw alternatif) ideg yellan degs adṛis aɣ yeǧǧen an glem tawlaft u ig zemren a tettwaseqdec sɣuṛ uqedac ur nettwali tawlaft:</p> + +<ol> + <li>Acku iẓṛi n sen ur iggerez ara.iqedacen ig llan d imakdawen deg iẓṛi seqdacen sumata imaɣran igdilen ig qaṛen adṛis n wayla yagi iw akken aqedac ad yegzu d'acut.</li> + <li>Acku yella wayen yeḍṛan n dirri u degmi tawlaft ur tettwasken ara.amedya,ayagi izmer ad yeḍṛu ma yella abrid ɣer tawlaft ur iggerez ara : ɛarḍet attbedelem abrid yellan deg ayla n wen src akken awen-id iban.ma yella abrid iggerez,awen-id yefeɣ waya:</li> +</ol> + +<p> <strong> <img alt="" src="https://mail.google.com/mail/u/1/?ui=2&ik=c5393cd974&view=fimg&th=15ae856d5557fe99&attid=0.1.1&disp=emb&attbid=ANGjdJ_v31U7Ctnp0LSuv92Gs0ICc2ISXR7OvUImKeARshS41ER4cYOkx9a4p-TI0o8MSxxtJfgbKdqbAQ--cAECCMIfO5u01QLTtq0TzMRyG1zeZYatjzw4M2WZNw8&sz=s0-l75-ft&ats=1489956721051&rm=15ae856d5557fe99&zw&atsh=1" style="height: 124px; width: 102px;"></strong></p> + +<p>Ayen iwumi yessefk astecfum d-akken ayla yettwaseqdec iw glem n tawlaft.adṛis yellan deg ayla yessefk ad i jaǧǧew deqs n isalen iw akken ameɣri ad yeḥṣu amek i tga tawlaft.amedya,adṛis agi i seqdac-aɣ « Asadez tawlaft inu » ur yelhi yara maḍi.tifrat iwulmen d asersi « Turza Firefox ,ig skanayen abaraɣ s tjeḥniṭ degs times yezin iw akal ».</p> + +<p><strong>Deg tawuri n tugna inek,aselhu n udṛis ameslellay iw akken ad i glem tawlaft akken iwata.</strong></p> + +<div class="note"> +<p><strong>Tazmilt</strong>: ugar isalen i takcumt,tzemrem a tesqedcem tigezmi <a href="/en-US/docs/Web/Accessibility"> Takcumt n MDN</a>.</p> +</div> + +<h2 id="Ṛekkez_adṛis">Ṛekkez adṛis</h2> + +<p>Deg tigezmi yagi,anẓeṛ kra seg fardisen HTML n uzadur iw ṛekkez n idṛisen.</p> + +<h3 id="Izwal">Izwal</h3> + +<p>iferdisen n wazwel ttaǧǧan asbadu n kra idṛisen am izwal neɣ adahil n izwal iw agbur.akken yebɣu yilli,wigi teddun am akken adlis ɣuṛes azwel amenzawi: daɣen d izwal n yiɣef u d adahil n izwal deg iɣfawen,HTML degs 6 iswiren n izwal, {{htmlelement("h1")}}–{{htmlelement("h6")}} tugett d 3-4 iswiren agi ay qidden:</p> + +<pre class="brush: html"><h1>Azwel inu amenzawi</h1> +<h2>Azwel inu n tigezmi</h2> +<h3>Adahil inu</h3> +<h4>Adahil-udahil n azwel inu</h4></pre> + +<p>Tura tzemrem a ttarnum azwel yemsasan iw sebtar n wen seg iferdisen agi.tzemrem a tesersem nnig uferdis {{htmlelement("img")}} deg tateggart n HTML.</p> + +<h3 id="Tiseddarin">Tiseddarin</h3> + +<p>Am akken nezzegzi deg tazwara,iferdisen , {{htmlelement("p")}} ttwasqedcen iw akken ad yers degs tiseddarin n udṛis.attuɣalem aten teseqdacem nedzah iw sersi n udṛis deg sebtar:</p> + +<pre class="brush: html"><p>Attan taseddart</p></pre> + +<p><strong>Dagi tzemrem a tternum adṛis i tfernem mara tɣatasem</strong> <strong><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Amek ara d yefeɣ wasmel n wen?</a> tzemrem a tesersem adṛis n wen deg yiwet neɣ deg a</strong>ṭ<strong>as n tiseddarin,srid sdaw uferdis <img> .</strong></p> + +<h3 id="Umuɣen">Umuɣen</h3> + +<p>Amur ameqqṛan n igburen yellan deg Web llan s talɣa n umuɣen.ihi HTML ɣuṛes iferdisen yettwasqedcen deg sebggen n umuɣen.tarkkizt n umuɣen degs yall ass sin n iferdisen.tiwsatin n umuɣen yettwasqedcen yall ass d umuɣen yessuneḍen d umuɣen wer-ssuneḍen:</p> + +<p> </p> + +<ol> + <li><strong>Umuɣen wer-ssuneḍen</strong> d umuɣen i deg tasunḍa n iferdisen mačči dayen yesɛan azal taṛkkizt yettwasqedcen i umuɣen agi d aferdis{{htmlelement("ul")}}.</li> + <li><strong>Umuɣen yessuneḍen</strong> d umuɣen i deg tasunḍa n iferdisen yesɛan azal taṛkkizt yettwasqedcen i umuɣen agi d aferdis {{htmlelement("ol")}}.</li> +</ol> + +<p>Yal aferdis n umuɣ yettuṛekkez akked aferdis {{htmlelement("li")}} (list item).</p> + +<p>Deg medya, ma nebɣa anbeddel taseddart deg yiwen wumuɣ:</p> + +<pre class="brush: html"><p>Mozilla, d agraw ageraɣlan i deg ttekkan degs itiknulugen , imedmayen , imsalayen ig qedcen akken... </p></pre> + +<p>Nezmer a neg:</p> + +<pre class="brush: html"><p>Mozilla,d agraw ageraɣlan i deg ttekkan degs</p> + +<ul> + <li>itiknulugen</li> + <li>imedmayen</li> + <li>imsalayen</li> +</ul> + +<p>ig qedcen akken ... </p></pre> + +<p><strong>Ɛarḍet a tternum umuɣ yessuneḍen neɣ wer-yessuneḍen ɣef usebtar n wen.tzemrem a ternum ɣer tawlaft.</strong></p> + +<h2 id="Iseɣwan">Iseɣwan</h2> + +<p>iseɣwan ɣuṛsen azal,ad nutnni ig gan d-akken web ad yilli d azeṭṭa i deg nezmer an inig seg sebtar ɣer s asebtar.iw snulfu n useɣwan,iqqad aseqdec n uferdis— {{htmlelement("a")}} —(a d tazribt i « ancre ») iw sseɣwel n udṛis ɣer s aseɣwen,ddut deg mecwaṛen :</p> + +<ol> + <li>Ferenet adṛis (dagi neseqdac s udṛis « Ameskan n Mozilla ».</li> + <li>Segreret adṛis deg ferdis<a>: + <pre class="brush: html"><a>Ameskan n Mozilla</a></pre> + </li> + <li>Awited ayla herf iw ferdis <a> am akka: + <pre class="brush: html"><a href="">Ameskan n Mozilla</a></pre> + </li> + <li>Deg wayala yagi,ernut aseɣwen ɣer s asmel ideg tzemerem attwahim iqedacen: + <pre class="brush: html"><a href="https://www.mozilla.org/en-kb/about/manifesto/">Amaskan Mozilla</a></pre> + </li> +</ol> + +<p>Γuṛwat atettum idis https:// neɣ http:// ig skanayen askari yettwasqedcen,deg tazwart n tansa.mara d snulfuḍ aseɣwen,skayad asebtar inek u senned fell-as iw akken attsenkedeḍ belli iteddu akken iwata..</p> + +<div class="note"> +<p>href izmer ad iban yesewham deg tmuɣli-s.Tasefrayt ɣef wansi id yekka isem agi u ahat ak i sishel astecfuḍ : href yebɣa ad yini hypertext reference s taglizit,anamek-is s taqbaylit<em> <strong>Afla</strong>ḍṛis <strong>Tam</strong>selɣut</em>.</p> +</div> + +<p><strong>Mur tgim ara,tzemrem atternum</strong> <strong>aseɣwen iw sebtar n wen s umezga n isalen agi.</strong></p> + +<h2 id="Tarrayt">Tarrayt</h2> + +<p>Ma yella tḍefṛem tiknutin usebtar agi,asebtar n wen ad ifeɣ am agi yellan da (tzemrem daɣen <a href="http://mdn.github.io/beginner-html-site/">wali da</a>):<br> + <br> + <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p> + +<p>Ma yella twaḥlem,ur ttkukrut ara semyifet leqdic n wen akked <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">amedya yekkfan yella di </a>Github.</p> + +<p>Deg amagrad agi, ur d nugem ara deg talqayt n HTML.iw akken tamusni a ttilli telha,tzemrem a tterrem s asbtar agi <a href="/en-US/Learn/HTML">HTML Learning topic</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/kab/lmed/getting_started_with_the_web/index.html b/files/kab/lmed/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..1a4acedfca --- /dev/null +++ b/files/kab/lmed/getting_started_with_the_web/index.html @@ -0,0 +1,60 @@ +--- +title: Asekkar n Web +slug: Lmed/Getting_started_with_the_web +tags: + - Beginner + - CSS + - Design + - Guide + - HTML + - Index + - NeedsTranslation + - TopicStub + - 'l10n:priority' + - publishing + - theory +translation_of: Learn/Getting_started_with_the_web +--- +<div>{{LearnSidebar}}</div> + +<div class="summary"> +<p>Asekker n Web d amezrar usdid ara wen-d imlen s wudem isehlen i tneflit n Web.ad tt-sewleḍ allalen i teḥwaǧǧeḍ i usali n usebter Web afraray u sissen tangalt-inek tafrarayt.</p> +</div> + +<h2 id="Amezruy_n_wasmel-inek_amezwaru">Amezruy n wasmel-inek amezwaru</h2> + +<p>D leqdic ameqṛan i usalay n wasmel asadar, ihi,ma telliḍ d amaynut deg usnefli n Web,ad-k nenhu ad tebduḍ s ttawil kan. ur tsalayeḍ ara Facebook nniḍen akka tura,maca ur yewɛiṛ ara ad terreḍ asmel Web-inek ar uqqin,ihi tura anebdu.</p> + +<p>Mara tqedceḍ imagraden-agi s usussel, seg wulac ad d-ḥelliḍ asmel Web amezwaru-inek ar uqqin.Iya-d ihi!</p> + +<h3 id="Aserkeb_aseɣẓan_n_udasil"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Aserkeb aseɣẓan n udasil</a><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software"> </a></h3> + +<p>Mara yili d ifecka n usalay n wasmel, aṭas n wafran i yellan. ma tikkelt-inek tamezwarut, yezmer ad k-ɛerqent imi ṭṭuqten imaẓragen n tangalin, amḍiq n uqedic d ifecka n ukayad yellan. deg <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">tigezmi n usebded n useɣẓan amezwaru</a>, ad k-d nemmel s umecwaṛ amek ara tesbedeḍ iseɣẓan iteḥwaǧǧeḍ deg usnefli n wasmel web amezwaru.</p> + +<h3 id="Amek_ara_d_yeffeɣ_wasmel-inek"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Amek ara d yeffe</a><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">ɣ wasmel-inek</a><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">?</a></h3> + +<p>Before you start writing the code for your website, you should plan it first. What information are you showcasing? What fonts and colors are you using? <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">What will your website look like?</a> We outline a simple method you can follow to plan out your site's content and design.</p> + +<h3 id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></h3> + +<p>A website consists of many files: text content, code, stylesheets, media content, and so on. When you're building a website, you need to assemble these files into a sensible structure and make sure they can talk to one another. <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> explains how to set up a sensible file structure for your website and what issues you should be aware of.</p> + +<h3 id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></h3> + +<p>Hypertext Markup Language (HTML) is the code that you use to structure your web content, and give it meaning and purpose. For example, is my content a set of paragraphs, or a list of bullet points? Do I have images inserted in my page? Do I have a data table? Without overwhelming you, <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> provides enough information to make you familiar with HTML.</p> + +<h3 id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></h3> + +<p>Cascading Stylesheets (CSS) is the code that you use to style your website. For example, do you want text to be black or red? Where should content be drawn on the screen? What background images and colors should be used to decorate your website? <a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a> takes you through what you need to get started.</p> + +<h3 id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></h3> + +<p>JavaScript is the programming language that you use to add interactive features to your website, for example games, things that happen when buttons are pressed or data is entered in forms, dynamic styling effects, animation, and much more. <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a> gives you an idea of what is possible with this exciting language, and how to get started.</p> + +<h3 id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></h3> + +<p>Once you have finished writing the code and organizing the files that make up your website, you need to put it all online so people can find it. <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your sample code</a> describes how to get your simple sample code online with minimum effort.</p> + +<h3 id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></h3> + +<p>When you access your favorite website, a lot of complicated things happen in the background that you may not know about. <a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a> outlines what happens when you view a webpage on your computer.</p> diff --git a/files/kab/lmed/html/index.html b/files/kab/lmed/html/index.html new file mode 100644 index 0000000000..5ea3385644 --- /dev/null +++ b/files/kab/lmed/html/index.html @@ -0,0 +1,59 @@ +--- +title: HTML +slug: Lmed/HTML +tags: + - Beginner + - Guide + - HTML + - Intro + - Learn + - NeedsTranslation + - Topic + - TopicStub +translation_of: Learn/HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">To build websites, you should know about {{Glossary('HTML')}} — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>Ideally you should start your learning journey by learning HTML. Start by reading <a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a>. You may then move on to learning about more advanced topics such as:</p> + +<ul> + <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li> + <li><a href="/en-US/docs/Learn/CSS">CSS</a>, and how to use it to style HTML (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.)</li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.)</li> +</ul> + +<p>Before starting this topic, you should have at least basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> + +<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>before attempting this topic, however it isn't absolutely necessary; much of what is covered in the <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> article is also covered in our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, albeit in a lot more detail.</p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt> + <dd>This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> + <dd>This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tables</a></dt> + <dd>Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></dt> + <dd>Forms are a very important part of the Web — these provide much of the functionality you need for interacting with web sites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.</dd> +</dl> + +<h2 id="Solving_common_HTML_problems">Solving common HTML problems</h2> + +<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</p> + +<h2 id="See_also">See also</h2> + +<div class="document-head" id="wiki-document-head"> +<dl> + <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN.</dt> + <dd>The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.</dd> +</dl> +</div> diff --git a/files/kab/lmed/html/introduction_to_html/index.html b/files/kab/lmed/html/introduction_to_html/index.html new file mode 100644 index 0000000000..cdf91173b2 --- /dev/null +++ b/files/kab/lmed/html/introduction_to_html/index.html @@ -0,0 +1,55 @@ +--- +title: Tazwart ɣer HTML +slug: Lmed/HTML/Introduction_to_HTML +translation_of: Learn/HTML/Introduction_to_HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">At its heart, {{glossary("HTML")}} is a fairly simple language made up of elements, which can be applied to pieces of text to give them different meaning in a document (is it a paragraph? is it a bulleted list? is it part of a table?), structure a document into logical sections (does it have a header? three columns of content? a navigation menu?) and embed content such as images and videos into a page. This module will introduce the first two of these, and introduce fundamental concepts and syntax you need to know to understand HTML.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Ur yelli wayen ara tissinem ɣef HTML deg lǧǧeṛa n wamnir.acu kkan,yesefk fellawen attnumem iselkkimen ed useqdec n web.yesefk fellawen ad yilli umḍiq n umahal yelha. ((tikliwin sefkent ad lulleḍent deg magrad agi.) You should have a basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles, which will take you through all the basic theory of HTML, and provide ample opportunity for you to test out some skills.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></dt> + <dd>Covers the absolute basics of HTML, to get you started — we define elements, attributes, and all the other important terms you may have heard, and where they fit in to the language. We also show how an HTML element is structured, how a typical HTML page is structured, and explain other important basic language features. Along the way, we'll have a play with some HTML, to get you interested!</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></dt> + <dd>The head of an HTML document is the part that <strong>is not</strong> displayed in the web browser when the page is loaded. It contains information such as the page {{htmlelement("title")}}, links to {{glossary("CSS")}} (if you want to style your HTML content with CSS), links to custom favicons, and metadata (which is data about the HTML, such as who wrote it, and important keywords that describe the document.)</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></dt> + <dd>One of HTML's main jobs is to give text meaning (also know as <strong>semantics</strong>), so that the browser knows how to display it correctly. This article looks at how to use HTML to break a block of text up into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></dt> + <dd>Hyperlinks are really important — they are what makes the Web a web. This article shows the syntax required to make a link, and discusses link best practices.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></dt> + <dd>There are many other elements in HTML for formatting text, which we didn't get to in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a> article. The elements in here are less well-known, but still useful to know about. In here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></dt> + <dd>As well as defining individual parts of your page (such as "a paragraph" or "an image"), HTML is also used to define areas of your website (such as "the header", "the navigation menu", "the main content column".) This article looks into how to plan a basic website structure, and write the HTML to represent this structure.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></dt> + <dd>Writing HTML is fine, but what if something is going wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help you.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessments will test your understanding of the HTML basics covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></dt> + <dd>We all learn to write a letter sooner or later; it is also a useful example to test out our text formatting skills! So in this assessment you'll be given a letter to mark up.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></dt> + <dd>This assessment tests your ability to use HTML to structure a simple page of content, containing a header, footer, navigation menu, main content, and sidebar.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web literacy basics 1</a></dt> + <dd>An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the <em>Introduction to HTML</em> module. Learners get familiar with reading, writing and participating on the web in this six-part module. Discover the foundations of the web through production and collaboration.</dd> +</dl> diff --git a/files/kab/lmed/index.html b/files/kab/lmed/index.html new file mode 100644 index 0000000000..cc145e1c92 --- /dev/null +++ b/files/kab/lmed/index.html @@ -0,0 +1,61 @@ +--- +title: Lmed taneflit n web +slug: Lmed +translation_of: Learn +--- +<div>{{LearnSidebar}}</div> + +<div> +<p class="summary">Anṣuf ar temnaḍt n uselmed MDN. Tagrumma-agi n imagraden iswi-ines d amuddu n ufus i yineflayen imaynuten akken ad bdun taneflit web s tmussni akked isran akken ad run tangalt i yismal web fessusen.</p> +</div> + +<p>Iswi n taɣult-agi n MDN mačči i wakken ad ak-tawi seg «mezwar» ɣer «amazzay»,maca ad ak-d- tawi seg «mezwar» ɣer «amagraz» syin-a,tzemreḍ ad tedduḍ,ad tlemdeḍ ayen d<a href="https://developer.mozilla.org/en-US/"> yeggran deg MDN </a>d iɣbula isuḍafen nniḍen i wakken ad d-aẓent deg tmusniwin tuzwirin.</p> + +<p>Ma telliḍ d amezwar amatu,taneflit n web tezmer ad-ak-tiwɛiṛ, ur ttaggad aql-aɣ yid-k deg usurif-agi ak-id-nefk tallat d waṭas nniḍen i wakken ad tilliḍ tggarzeḍ deg leqdic-ik,am akken deg waxxam-ik i telliḍ,ɣas d anelmad i telliḍ i lemden taneflit n web (iman-ik naɣ tarbaɛt),d aselmad i yettnadin afecku n tadala,d amaswaḍ neɣ d win nniḍen i yebɣan kan agzu n wamek i teddunt titiknulujitin n web.</p> + +<div class="warning"> +<p><strong>Axatar</strong>:Agbur n taɣzut ulmad tella tmerrniwt ɣers yal ass..ma ɣuṛwen isteqsiyen ɣef imaggayen itebɣam ad twalim yers neɣ i xuṣen, sesten tigezmi sddaw-a {{anch("Contact us")}} i wugar isallen ɣef wamek ara ak-id nermes.</p> +</div> + +<h2 id="Ansi_ara_nezwir">Ansi ara nezwir</h2> + +<ul class="card-grid"> + <li><span>Amezwar ummid:</span> Ma telliḍ d amezwar ummid i usnefli n web,nesmagel-ak ad tezewreḍ deg leqdic n<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web"> asekkar s uzegrir web</a>,id yettakken tazwart tallilt i usnefli n web.</li> + <li><span>Tuttriwin tulmisin:</span> Ma ɣuṛ-wen tuttra tulmist ɣef tneflit n web,tigezmi- nneɣ n <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions">tuttriwin </a>tezmer ad awen-d tefk tallalt.</li> + <li><span>Akkin i taffiwin:</span> Ma ɣuṛ-wen ciṭ n tmussni,amecwaṛ id i teddun , i uselmed deg alulleḍ n {{glossary("HTML")}} d {{glossary("CSS")}} : bdut s uzegrir-nneɣ n<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML"> tazwart ɣer HTML</a> u ddu ɣer <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">tazwart n uzegrir CSS</a>.</li> + <li><span>Zeggret ar Script</span>Ma leqdic-ik ithedden deg HTML d CSS daɣen,neɣ ahat tebɣiḍ astengel,tebɣiḍ ad tzeggreḍ ɣer {{glossary ("JavaScript")}} neɣ taneflit ɣer yidis uqeddac.bdut s tazwara n JavaScript d izegrar imezwura n yidis n uqeddac.</li> +</ul> + +<div class="note"> +<p><strong>Tazmilt</strong>: <a href="https://developer.mozilla.org/en-US/docs/Glossary">Amawal</a>-nneɣ yettakk-d tibuda n wawalen.</p> +</div> + +<div class="note"> +<p><strong>Tazmilt</strong>: Mara nesissen ugar ifecka n walmad azadur deg imal.umuɣ-nneɣ «Afecku n walmad yuẓẓan» ɣef zelmaḍ ibeggen-d afecku nniḍen n uselmed deg MDN,ɣas ayagi ur d yekki seg taɣult n uselmed,maca dayen iwulmen..</p> +</div> + +<p>{{LearnBox({"title":"Random glossary entry"})}}</p> + +<h2 id="Nermes-t-aɣ-d">Nermes-t-aɣ-d</h2> + +<p>Ma tebɣam ad-ɣ-d tnermsem ɣef kra n tɣawsa,ayen yelhan d akken ad-aɣ-id aznem izen ɣer <a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Conversations#Asynchronous_discussions">wumuɣen</a>-nneɣ n tnezgwit neɣ<a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Conversations#Chat_in_IRC"> ibuda IRC</a>.nebɣa ad nẓar sɣuṛ-wen ma yella wayen i twalam d-anezri neɣ ixuṣ kra deg wasmel,tuttriwin n imeggayen n uselmed imaynuten,tuttriwin n tallalt s iferdisen ur tegzim ara,neɣ ayen nniḍen.</p> + +<p>Ma yella tɣedfeḍ ad tefkkeḍ tallalt i usnefli / asileɣ n wagbur,wali<a href="https://developer.mozilla.org/en-US/Learn/How_to_contribute"> amek ara tallate</a>ḍ u snermes-taɣ!aql-aɣ newjed awen-id nemeslay,ama d anelmad,d aselmad,d sneflay n web yesnen neɣ win nniḍen yetɣedfen deg sileɣ n tarmit n uselmed.</p> + +<h2 id="Wali_daɣen">Wali daɣen</h2> + +<dl> + <dt><a href="https://www.codecademy.com/">Codecademy</a></dt> + <dd>D asmel asdawan i fazzen aṭas i uselmed n tutlayin n usihel seg ilem.</dd> + <dt><a href="https://code.org/">Code.org</a></dt> + <dd>Tiszri d talilt n usentengel n taffa,asmenzawi i warrac / amezwar.</dd> + <dt><a href="https://www.freecodecamp.com/">FreeCodeCamp.com</a></dt> + <dd>Asmel asdawan s ituṭuryalen d isenfaren iw lmad n taneflit n Web.</dd> +</dl> + +<dl> + <dt><a href="https://learning.mozilla.org/web-literacy/">Takarḍa n asgemmay</a></dt> + <dd>I usgemmay ɣef amessakwel d timusniwin 21tasut,i aɣ-d yettaǧǧan daɣen ad nezgger ɣer leqdic uselmed yettwafernen s taggayt.</dd> + <dt><a href="https://learning.mozilla.org/activities">Armud usegmisen</a></dt> + <dd>Amazrar n tirmudin i uselmed (d ulmad) id yesnulfa lsas Mozilla,i yesdukklen meṛṛa,seg asgemmay n web uzdir d tudert tabeḍnit ɣer JavaScript d usɣendef Minecraft.</dd> +</dl> diff --git a/files/kab/mdn/about/index.html b/files/kab/mdn/about/index.html new file mode 100644 index 0000000000..4147186367 --- /dev/null +++ b/files/kab/mdn/about/index.html @@ -0,0 +1,124 @@ +--- +title: About MDN Web Docs +slug: MDN/About +translation_of: MDN/About +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubNav("/en-US/docs/MDN")}}</div> + +<p>MDN Web Docs (zik yettwassen s yisem azeṭṭa n ineflayen Mozilla) d-azadur n uselmed umhiz i titiknulujitin Web daɣen iseɣẓanen i rnun i Web.</p> + +<ul> + <li>Ilugan n Web am <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>, d <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/Apps" title="/en-US/docs/Apps">Taneflit n isnasen Web yeldin</a></li> + <li><a href="/en-US/docs/Add-ons" title="/en-US/docs/Add-ons">Taneflit n uzegrir n timerna Firefox </a></li> +</ul> + +<h2 id="Iswi-nneɣ">Iswi-nneɣ</h2> + +<p>Iswi n MDN dayen i sehlen, tikci iyi ineflayen isalen i yeḥwaǧen akken ad salin s shala isenfaren ɣef <a href="https://wiki.developer.mozilla.org/en-US/docs/Web">web yeldin</a>. Ma yella d tatiknulujit yeldin yersen di web, nebɣa ad tettwassen.</p> + +<p>In addition, we provide documentation about <a href="/en-US/docs/Mozilla">Mozilla products</a> and how to <a href="/en-US/docs/Mozilla">build and contribute to Mozilla projects</a>.</p> + +<p>If you're not sure whether a particular topic should be covered on MDN, read: <a href="/en-US/docs/Project:MDN/Contributing/Does_this_belong">Does this belong on MDN?</a></p> + +<h2 id="Amek_i_tzemreḍ_ad_d-fkeḍ_tallalt">Amek i tzemreḍ ad d-fkeḍ tallalt</h2> + +<p>You don't need to be able to code—or to write well—in order to be able to help MDN! We have lots of ways you can help, from reviewing articles to be sure they make sense, to contributing text, to adding sample code. In fact, there are so many ways to help that we have a <a href="/en-US/docs/MDN/Getting_started">Getting Started</a> page that helps you pick tasks to do, based on your interests and how much time you have to spare!</p> + +<p>You can also help by <a href="/en-US/docs/MDN/About/Promote">promoting MDN</a> on your own blog or website.</p> + +<h2 id="Tamezdagnut_n_MDN">Tamezdagnut n MDN</h2> + +<p>Our community is a global one! We have amazing contributors all around the world, in a number of languages. If you'd like to learn more about us, or if you need help of any kind with MDN, feel free to check out our <a href="https://discourse.mozilla-community.org/c/mdn">discussion forum</a> or <a href="irc://irc.mozilla.org#mdn">IRC channel</a>! You can also keep up with what we're up to by following our Twitter account, <a href="http://twitter.com/MozDevNet">@MozDevNet</a>. You can also send tweets our way if you see something wrong or if you'd like to offer feedback (or great big thank yous) to our writers and contributors!</p> + +<h2 id="Aseqdec_n_uqbuṛ_MDN_Web_Docs">Aseqdec n uqbuṛ MDN Web Docs</h2> + +<p>MDN's content is available free of charge, and under open source licenses.</p> + +<h3 id="Izerfan_n_umeskar_d_turagin">Izerfan n umeskar d turagin</h3> + +<p>MDN's content is entirely available under various open source licenses. This section covers the types of content we provide and what licenses are in effect for each.</p> + +<h4 id="Documentation_and_articles">Documentation and articles</h4> + +<p><strong>MDN wiki documents</strong> have been prepared with the contributions of many authors, both within and outside the Mozilla Foundation. Unless otherwise indicated, the content is available under the terms of the <a class="external text" href="http://creativecommons.org/licenses/by-sa/2.5/" rel="nofollow" title="http://creativecommons.org/licenses/by-sa/2.5/">Creative Commons Attribution-ShareAlike license</a> (CC-BY-SA), v2.5 or any later version.</p> + +<p>When reusing MDN content, you need to ensure two things:</p> + +<ol> + <li> + <p>Attribution is given to the original content.</p> + + <p>Please attribute "Mozilla Contributors" and include a hyperlink (online) or URL (in print) to the specific wiki page for the content being sourced. For example, to provide attribution for this article, you can write:</p> + + <blockquote> + <p><a href="https://developer.mozilla.org/en-US/docs/MDN/About">About MDN</a> by <a href="https://developer.mozilla.org/en-US/docs/MDN/About$history">Mozilla Contributors</a> is licensed under <a href="http://creativecommons.org/licenses/by-sa/2.5/">CC-BY-SA 2.5</a>.</p> + </blockquote> + + <p>Note that in the example, "Mozilla Contributors" links to the history of the cited page. See <a href="http://wiki.creativecommons.org/Marking/Users">Best practices for attribution</a> for further explanation.</p> + </li> + <li> + <p>Your reuse is published under the same license as the original content — CC-BY-SA v2.5 or any later version.</p> + </li> +</ol> + +<h4 id="Code_samples_and_snippets">Code samples and snippets</h4> + +<p>Code samples added on or after August 20, 2010 are in the <a class="external" href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://wiki.creativecommons.org/Public_domain">public domain</a> (<a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>). No licensing notice is necessary, but if you need one, you can use: "Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/".</p> + +<p>Code samples added to this wiki before August 20, 2010 are available under the <a class="external" href="http://www.opensource.org/licenses/mit-license.php" title="http://www.opensource.org/licenses/mit-license.php">MIT license</a>; you should insert the following attribution information into the MIT template: "© <date of last wiki page revision> <name of person who put it in the wiki>".</p> + +<p>You can determine which license a code sample is available under by browsing through the article's history using the "History" option in the gear-shaped drop-down menu at the top-right corner of the screen. The easiest way to track this down is to find the most recent revision that occurred before August 20, 2010 and check if the sample is there. If it is, then it was added before the licensing changed and is available under the terms of the MIT license. If it is not there, or there are no revisions before the change, then it was added after the change and is in the public domain.</p> + +<h4 id="Ittekkiyen">Ittekkiyen</h4> + +<p>If you wish to contribute to this wiki, you must make your documentation available under the Attribution-ShareAlike license (or occasionally an alternative license already specified by the page you are editing), and your code samples available under <a href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC-0</a> (a Public Domain dedication). Adding to this wiki means you agree that your contributions will be made available under those licenses.</p> + +<p>Some older content was made available under a license other than the licenses noted above; these are indicated at the bottom of each page by way of an <a class="internal" href="/Archive/Meta_docs/Examples/Alternate_License_Block" title="Project:En/Examples/Alternate License Block">Alternate License Block</a>.</p> + +<div class="warning"> +<p>No new pages may be created using alternate licenses.</p> +</div> + +<p><strong>Copyright for contributed materials remains with the author unless the author assigns it to someone else</strong>.</p> + +<p>If you have any questions or concerns about anything discussed here, please contact <a class="external" href="mailto:mdn-admins@mozilla.org?subject=MDN%20licensing%20question" rel="nofollow" title="mailto:eshepherd@mozilla.com">the MDN administrators</a>.</p> + +<h4 id="Ilugutenticṛeṭ_yettwasersen_ticṛeṭ_n_tanfa_d_wawalen_izamulen.">Iluguten,ticṛeṭ yettwasersen, ticṛeṭ n tanfa d wawalen izamulen.</h4> + +<hr> +<p>The rights in the trademarks, logos, service marks of the Mozilla Foundation, as well as the look and feel of this web site, are not licensed under the Creative Commons license, and to the extent they are works of authorship (like logos and graphic design), they are not included in the work that is licensed under those terms. If you use the text of documents, and wish to also use any of these rights, or if you have any other questions about complying with our licensing terms for this collection, you should contact the Mozilla Foundation here: <a class="external text" href="mailto:licensing@mozilla.org" rel="nofollow" title="mailto:licensing@mozilla.org">licensing@mozilla.org</a>.</p> + +<h3 id="Aseɣwen_ɣer_MDN">Aseɣwen ɣer MDN</h3> + +<p>Timeẓrit n umagrad-agi i usemtar n usuɣel n <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/About/Linking_to_MDN">iseɣwan ɣer MDN</a> i useqdec n usuɣel n iseɣwan.</p> + +<h2 id="Asider_n_umeskan">Asider n umeskan</h2> + +<h3 id="Isebtar_wis_sin">Isebtar wis sin</h3> + +<p>You can retrieve the content of a single page on MDN by adding <a href="/en-US/docs/MDN/Contribute/Tools/Document_parameters#URL_parameters">URL parameters</a> to specify what format you want.</p> + +<h3 id="Allalen_wis_kraḍ">Allalen wis kraḍ</h3> + +<p>You can view MDN content via third-party tools like <a href="http://kapeli.com/dash">Dash</a> (for macOS) and <a href="http://zealdocs.org/">Zeal</a> (for Linux and Windows).</p> + +<p><a href="https://kapeli.com/">Kapeli</a> also publishes <a href="https://kapeli.com/mdn_offline">offline MDN docs</a> covering HTML, CSS, JavaScript, SVG, and XSLT.</p> + +<h2 id="Mmel-d_uguren_n_MDN_Web_Docs">Mmel-d uguren n MDN Web Docs</h2> + +<p>Wali <a href="/en-US/docs/MDN/Contribute/Howto/Report_a_problem">Amek ara temmleḍ ugur deg MDN.</a></p> + +<h2 id="Amzeruy_n_MDN_Web_Docs">Amzeruy n MDN Web Docs</h2> + +<p>The MDN Web Docs (previously <em>Mozilla Developer Network (MDN)</em>, previously <em>Mozilla Developer Center (MDC)</em>, a.k.a. <em>Devmo</em>) project started in early 2005, when the <a class="external" href="http://www.mozillafoundation.org">Mozilla Foundation</a> obtained a license from AOL to use the original Netscape <a href="https://web.archive.org/web/*/devedge.netscape.com" title="Project:en/DevEdge">DevEdge</a> content. The DevEdge content was mined for still-useful material, which was then migrated by volunteers into this wiki so it would be easier to update and maintain.</p> + +<p>The name was changed to MDN Web Docs in June 2017 — see <a href="https://blog.mozilla.org/opendesign/future-mdn-focus-web-docs/">The Future of MDN: A Focus on Web Docs</a> for the rationale behind this decision.</p> + +<p>You can find more history of MDN on our <a href="/en-US/docs/MDN_at_ten">10th anniversary celebration</a> page, including an oral history by some of the people who were involved.</p> + +<h2 id="Awal_ɣef_Mozilla">Awal ɣef Mozilla</h2> + +<p>Akken tebɣiḍ ad tissineḍ ugar fell-aɣ, amek ara tiliḍ deg Mozilla neɣ anda ara aɣ-d-tafeḍ, aql-a-id deg umḍiq yelhan. Akken ad d-gruḍ d-acu i aɣ-yecqan u i aɣ-yesemgaraden, ttxil-k rzu ɣer usebter-nneɣ n <a href="http://www.mozilla.org/en-US/mission/">yiswi</a>.</p> diff --git a/files/kab/mdn/contribute/feedback/index.html b/files/kab/mdn/contribute/feedback/index.html new file mode 100644 index 0000000000..19eb79ae34 --- /dev/null +++ b/files/kab/mdn/contribute/feedback/index.html @@ -0,0 +1,62 @@ +--- +title: Azen iwenniten ɣer isemliyen MDN Web Docs +slug: MDN/Contribute/Feedback +translation_of: MDN/Contribute/Feedback +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>Ansuf yis-k ɣer MDN Web Docs! tumlin neɣ uguren deg seqdec n MDN Web Docs, d wagi i d-amḍiq-inek. imi iɛǧeb-ik ad tefkeḍ rray-inek dayen i k-yerran d amedraw urmid deg tamezdagnut n Mozilla, ad ak -nesnemmer i waya.</p> + +<p>Ɣuṛ-k ugar n iɣewwaṛen akken ad tefkeḍ tamuɣli-inek; amagrad-agi ad ak-id yefk tallalt akken ad tmahleḍ.</p> + +<h2 id="Leqqem_asemli">Leqqem asemli</h2> + +<p>Deg tazwara, ma yella twalaḍ ugur deg usemli, yessefk yal ass fell-ak ad tḥulfeḍ belli tzemreḍ ad tesseɣtiḍ iyi man-inek.</p> + +<ol> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">Qqen s</a> useqdec n <a href="https://github.com/">Github</a>.</li> + <li>Sit ɣef tqeffalt tazegzawt <strong>Snifel</strong> ɣef yal asebter akken ad teliḍ<a href="/kab/docs/"> amaẓrag</a>.</li> + <li>Sit ɣef tqeffalt <strong>Ẓreg</strong> mara tfakkeḍ ad awiḍ isnifal.</li> +</ol> + +<p>Imesli yellan dagi atan deg wiki, u yettwaḥrez ɣer terbeɛt n iwiziwen ad medden yettwaxelṣen, ihi ur tseḍḥi ara-ur teḥwaǧeḍ ara ad tesɛuḍ tajeṛṛumt taneblalt.Ad tnesseɣti ma llant tuccḍiwin; ulac ayen ndiri!</p> + +<p>I ugar n isalen ɣef ittekkiyen deg usemli MDN, wali :</p> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Project:Getting_started">Akken ad tesɛuḍ</a> tikta deg wayen tzemreḍ ad tmehleḍ</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute">Ttekki deg MDN </a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor">Agrudem n teẓrigt MDN</a></li> +</ul> + +<h2 id="Ddu_ɣer_umeslay">Ddu ɣer umeslay</h2> + +<p>Mmeslay-aɣ-d! ugar iberdan i yellan akken ad temmeslayeḍ akked medden i qedcen deg ugbuṛ n MDN.</p> + +<h3 id="Asqerdec_Chat">Asqerdec (Chat)</h3> + +<p> + </p><h3 id="Iwenniten_Asynchronous">Iwenniten (Asynchronous)</h3> + + +<p>Longer-term discussions happen on our <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussion forum</a>. You can post to the forum via email to <a href="mailto://mdn@mozilla-community.org">mdn@mozilla-community.org</a>. If you join the forum, you can choose to have notifications about discussions sent to you via email as well.</p> + +<h2 id="Mmel-d_ugur">Mmel-d ugur</h2> + +<h3 id="Tuttriwin_ɣef_usemli">Tuttriwin ɣef usemli</h3> + +<p>If you see a problem in the documentation and can't fix it yourself for any reason, you can <a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&projects=mdn/sprints/2&labels=user-report" title="Report a documentation content problem.">report the issue</a>! You can use this form for any documentation issue at all, for example:</p> + +<ul> + <li>a simple correction</li> + <li>a request for an entirely new piece of content</li> + <li>reporting inappropriate content (including spam and misplaced translations)</li> +</ul> + +<p>As mentioned before, we invite you to contribute the changes yourself, but this option is available for you as well.</p> + +<h3 id="Tuttriwin_ɣef_usmel">Tuttriwin ɣef usmel</h3> + +<p>If you encounter problems with the MDN web site, or have ideas for new features for the site, you can <a href="https://bugzilla.mozilla.org/form.mdn">submit a ticket to the MDN development team</a>.</p> diff --git a/files/kab/mdn/contribute/howto/create_an_mdn_account/index.html b/files/kab/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..e1e65adb57 --- /dev/null +++ b/files/kab/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,38 @@ +--- +title: Amek ad snulfuḍ amiḍan MDN +slug: MDN/Contribute/Howto/Create_an_MDN_account +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +<div>{{MDNSidebar}}</div><p> </p> + +<p>Iw beddel n wagbur deg MDN,yessefk-ak ad yilli umuɣ MDN.ur teḥwaǧǧeḍ ara umuɣ nniḍen.<span class="seoSummary"> </span>ma tebɣiḍ tira d unadi n isemliyen MDN.amnir agi ak-id yefk tallalt iw swel n umuɣ inek</p> + +<div class="pull-aside"> +<div class="moreinfo"><strong>Ayen ig ssefk ad sqedca</strong>ɣ <strong>tansa imayl inu MDN?</strong><br> +<br> +Tansa n imayl inek tettwaseqdec iw ḥeli n umiḍan inek u ahat yezmer ad yettwaseqdec sɣuṛ inebdalen MDN iw akken ak-id snermesen ɣef idra n umiḍan inek neɣ imttekkiyen inek deg wasmel.<br> +<br> +Tzemreḍ daɣen atesqedceḍ iw miltaɣ ɣer isebtar i seg tebɣiḍ atisineḍ ibeddilen (<a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Watch_a_page">wali amagrad agi iw ugar n ttfaṣil</a>) neɣ iw nermes iznan nniḍen:amedya,ma jerdeḍ iman-ik ɣer lqem beta,tzemreḍ ad remseḍ iznan yaɛnan timahalin ig teddun deg senqed..<br> +<br> +Tansa imayl inek ur tettwasken ara deg MDN u tettwaseqdec ḥaca deg lemqadṛa n <a href="https://www.mozilla.org/privacy/websites/">tasertit nneɣ n Tabeḍnit</a>. + +<div class="note">Ma teqqneḍ ɣer MDN seg GitHud ad tansa norely, ur d ttaṭafeḍ ula d yiwen izen seg MDN (xas ma telliḍ d amiltaɣ ɣer ibeddilen n usebtar).</div> +</div> +</div> + +<ol> + <li>Assawen n yal asebtar deg MDN,attafeḍ taqeffalt isem-is Tuqqna.Sweṛ amumed inek fell-as (neɣ ssit fell-as,ma ad ibenk aziraz i teseqdaceḍ) iw sken n tabdart n tinfawin usesteb iw umi nezmer s wazmul deg MDN.</li> + <li>Fren tanfa i tuqqna s.Akka tura,ḥaca GitHub ig llan.cfu ma yella ad GitHub i tferneḍ,ad yilli useɣwwen s umuɣ inek deg sebtar n umuɣ inek n MDN azayez.</li> + <li>Ḍfeṛ tinaḍin n GitHub i tuqqna umiḍan inek ɣer MDN .</li> + <li>Mara yefak umecwaṛ usesteb,ad uɣaleḍ ɣer MDN neɣ a k-id nesuter isem uqeddac d tansa n imayl<em>.Isem inek uqeddac ad yilli ad azayez u ad yettwaseqdec akken ak-id yefk iy ittekkiyen.Ur seqdac ara tansa inek n imayl am isem uqeddac.</em></li> + <li>Sit ɣef ad <strong>Snulfuɣ amaɣnu inu MDN</strong>.</li> + <li>Ma yella tansa imayl yettwasqedcen deg mecwaṛ wis 4 ur telli am tin yettwasqedcen s tanfa n usesteb,ttxilek sefqed tansa imayl inek u sit ɣef useɣwen n usentem i k-id nuzen.</li> +</ol> + +<p>Atan ihi! Γuṛek tura amiḍan MDN u tzemreḍ ad ziẓreg-ḍ imagraden!</p> + +<p>Tzemreḍ attsiteḍ ɣef isem inek iwsawen deg yal asebtar MDN iw akken attwaliḍ amaɣnu inek azayez.Seg sebtar agi n umaɣnu,tzemreḍ attsiteḍ ɣef <strong>Abeddel</strong> iw ziẓreg n tilɣa n umaɣnu inek.</p> + +<div class="note"> +<p>Tazmilt: Ismawen iqeddacen ur yessefk ara ad illin degsen ilmawen neɣ asekkil @.Anabri,isem inek uqeddac ad yettwaseqdec deg azayez iw akken ad yekez ittekkiyen inek .</p> +</div> diff --git a/files/kab/mdn/contribute/howto/index.html b/files/kab/mdn/contribute/howto/index.html new file mode 100644 index 0000000000..08734f5092 --- /dev/null +++ b/files/kab/mdn/contribute/howto/index.html @@ -0,0 +1,15 @@ +--- +title: How-to guides +slug: MDN/Contribute/Howto +tags: + - Landing + - MDN Meta + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Howto +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>These articles provide step-by-step guides to accomplishing specific goals when contributing to MDN.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/kab/mdn/contribute/index.html b/files/kab/mdn/contribute/index.html new file mode 100644 index 0000000000..8e44caade3 --- /dev/null +++ b/files/kab/mdn/contribute/index.html @@ -0,0 +1,20 @@ +--- +title: Contributing to MDN +slug: MDN/Contribute +tags: + - Guide + - Landing + - MDN Meta + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>Welcome! By visiting this page, you've taken the first step toward becoming a contributor to MDN!</p> + +<p><span class="seoSummary">The guides listed here cover all aspects of contributing to MDN, including style guides, guides to using our editor and tools, and more. Please make sure you have read (and are compliant with) the <a href="https://www.mozilla.org/en-US/about/legal/terms/mozilla/">Mozilla Terms</a> before editing or creating any pages. </span></p> + +<p>If you haven't contributed to MDN previously, the <a href="/en-US/docs/MDN/Getting_started">Getting Started</a> guide can help you pick a task to jump in and help with.</p> + +<p>{{LandingPageListSubPages()}}</p> diff --git a/files/kab/mdn/index.html b/files/kab/mdn/index.html new file mode 100644 index 0000000000..0db1d0a723 --- /dev/null +++ b/files/kab/mdn/index.html @@ -0,0 +1,39 @@ +--- +title: The MDN project +slug: MDN +tags: + - Landing + - MDN Meta + - NeedsTranslation + - TopicStub +translation_of: MDN +--- +<div>{{MDNSidebar}}</div> + +<p><strong>MDN Web Docs</strong> is a wiki on which we document the open Web, Mozilla technologies, and other developer topics. Anyone is welcome to add and edit content. You don't need to be a programmer or know a lot about technology; there are many different tasks that need to be performed, from the simple (proof-reading and correcting typos) to the complex (writing API documentation).</p> + +<div class="summary"> +<p>The mission of MDN Web Docs is to provide <em>developers</em> with the <em>information</em> they need to <em>easily</em> build projects on the <em>web platform</em>. We invite you to help!</p> +</div> + +<p>We need your help! It's easy. Don't worry about asking for permission or about making mistakes. On the other hand, please get to know the <a href="/en-US/docs/MDN/Community" title="/en-US/docs/MDN/Community">MDN community</a>; we're here to help you! The documentation below should get you started, but don't hesitate to join the discussion in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a>.</p> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/MDN/Getting_started">Newcomer quick start</a></span> + + <p>Are you new to MDN and want to learn how to help make it better? Start here!</p> + </li> + <li><span><a href="/en-US/docs/MDN/Contribute">I'm an advanced user</a></span> + <p>Access our full, in-depth guide for MDN contributors to learn more once you've gotten comfortable.</p> + </li> + <li><span><a href="/en-US/docs/MDN/Promote">Spread the word</a></span> + <p>If you love MDN, help get the word out! Find art, tools, and guides for promoting MDN.</p> + </li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/MDN/Community">Join the MDN Community</a></li> + <li><a href="https://app.zenhub.com/workspace/o/mdn/sprints/boards?repos=121649843,55001853,70901646,134759439,90252175,1352520,3311772,82040629,121278372,33677290,132630865">Scrum board</a></li> +</ul> diff --git a/files/kab/mdn/tamezdaynutt/index.html b/files/kab/mdn/tamezdaynutt/index.html new file mode 100644 index 0000000000..db919ab4d3 --- /dev/null +++ b/files/kab/mdn/tamezdaynutt/index.html @@ -0,0 +1,49 @@ +--- +title: Ddu ɣer tmezdagnut MDN +slug: MDN/Tamezdaynutt +translation_of: MDN/Community +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<div class="summary"> +<p>MDN Web Docs yugar wiki:ttamezdagnut n imsenfaliyen iqedcen garasen akken ad d-gen i MDN d taɣbalut tuslidt i yimsenfaliyen i yeseqdacen titiknulujiyin Web yeldin.</p> +</div> + +<p>Nebɣa ad tettekkiḍ deg MDN,maca nebɣa ad ttiliḍ yid-naɣ ugar n waya ma tettekkaḍ ɣer tamezdagnut MDN.hatan amek ara teqqneḍ s kraḍ imecwaṛen:</p> + +<ol> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">Snulfu-d amiḍan MDN.</a></li> + <li><a href="/en-US/docs/MDN/Community/Conversations">Attekki deg idiwenniyen</a>.</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Community/Whats_happening">Ḍfeṛ i ḍaṛṛun</a><a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Community/Whats_happening">.</a></li> +</ol> + +<h2 id="Amek_i_tetteddu_tamezdagnut">Amek i tetteddu tamezdagnut</h2> + +<p>Ayen id iteddun d imagraden i yeskanayen tamezdagnut n MDN.</p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Roles">Timliltin n tamezdagnut</a></dt> + <dd class="landingPageList">Aṭas n timliltin yellan deg tamezdagnut MDN ɣuṛsent timasyin tulmisin.</dd> + <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Doc_sprints">Doc sprints</a></dt> + <dd class="landingPageList">Wagi d amnir i usuddes n tumlin sprint.yella degs ndeṛ d tixbulla n medden isuddsen isprinten doc, akken ak-id-nefk tallalt i usuddes n yiwet nniḍen.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Whats_happening">Ḍfeṛ-t i ḍaṛun</a></dt> + <dd class="landingPageList">MDN yettwasenked i kenwi sɣuṛ<a href="https://wiki.mozilla.org/MDN"> tamezdagnut n imsenfaliyen n Mozilla Network</a>.Atentih amek yessefk ad yilli kra n beṭṭu n tilɣa ɣef leqdic-neɣ.</dd> +</dl> + +<dl> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Conversations">Iwenniten n tamezdagnut MDN </a></dt> + <dd class="landingPageList">Leqdic n MDN iteddu deg wasmel n MDN,maca "tamezdagnut" tetteddu daɣen s iwenniten (aramtawan) d iwenniten d ugraw ɣer uqqin (amtawan).</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Working_in_community">Qdec deg tamezdagnut </a></dt> + <dd class="landingPageList">Amur ameqqṛan n imttekkiyen deg tumlin MDN s wazal-is s wamek ara yilli leqdic n imttekki n tamezdagnut MDN.amagrad-agi yesumer ndeṛ akken ak-id-yefk tallalt deg tamyigawt-inek akked imyura d tirebaɛ n imsenfaliyen.</dd> +</dl> +</div> +</div> diff --git a/files/kab/mozilla/add-ons/index.html b/files/kab/mozilla/add-ons/index.html new file mode 100644 index 0000000000..e2896aad3b --- /dev/null +++ b/files/kab/mozilla/add-ons/index.html @@ -0,0 +1,82 @@ +--- +title: Add-ons +slug: Mozilla/Add-ons +translation_of: Mozilla/Add-ons +--- +<div>{{AddonSidebar}}</div> + +<p><span class="seoSummary">Izegrar ttaǧǧan ineflayen ad siɣzfen neɣ ad sniflen amek iteddu Firefox.</span> Ttawrun s useqdec n tizeɣt n tetiknulujiyin Web - JavaScript, HTML, and CSS - akked kra n igrudmawen usliɣen n yesnasen API n JavaScript. Gar wayen nniḍen, azegrir yezmer:</p> + +<ul> + <li>bedel tagammatt neɣ agbur n kra n ismal web.</li> + <li>bedel agrudem uqedac n Firefox.</li> + <li>Arrnu kra n tiseɣnatin ɣer Firefox.</li> +</ul> + +<h2 id="Asnefli_izegrar-isemmaden">Asnefli izegrar-isemmaden</h2> + +<p>llant akka tura aṭas n ttawilat iw snefli n (add-ons) izegrar-isemmaden Firefox,maca WebExtensions ad yuɣal d tagnut sya ɣer taggara 2017.tigrumma nniḍen n ifucka,ernud (add-ons)izegrar-isemmaden n afelselfu, add-ons bootstrap ed SDK add-on tettwarǧa ɣeluy n uzal n sen deg yiwet n tagwnitt.</p> + +<p><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions" style="margin-left: auto; margin-right: auto; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: block; width: 30%; background-color: #81BC2E; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Issin ugar ɣef WebExtensions </a></p> + +<p>Ma yella turam azegrar amaynut asemmad,nesmagel-awen a ttarum i WebExtention.</p> + +<p>WebExtensions are designed to be cross-browser compatible: WebExtensions written for Firefox will in most cases run in Chrome, Edge, and Opera with few if any changes. They are also fully compatible with multiprocess Firefox.<br> + <br> + Siked API ig etddun tura akka di Firefox akked iminigen nniḍen. We're continuing to design and implement new APIs in response to developer needs.<br> + <br> + Most of the WebExtensions APIs are also available on Firefox for Android.</p> + +<h3 id="Migrate_an_Existing_Add-on">Migrate an Existing Add-on</h3> + +<p>If you maintain a legacy add-on, such as a XUL overlay, bootstrapped, or Add-on SDK-based add-on, we recommend that you investigate porting it to WebExtensions. There are some <a href="/en-US/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">porting resources on MDN</a>.</p> + +<p>We've collected <a href="https://wiki.mozilla.org/Add-ons/developer/communication">resources</a> on a wiki page to support developers through the transition. To get started, use the compatibility <a href="https://compatibility-lookup.services.mozilla.com/">Lookup Tool</a> to see if your add-on will be affected.</p> + +<h2 id="Publishing_add-ons">Publishing add-ons</h2> + +<p><a href="https://addons.mozilla.org">Addons.mozilla.org</a>, commonly known as "AMO," is Mozilla's official site for developers to list add-ons, and for users to discover them. By uploading your add-on to AMO, you can participate in our community of users and creators, and find an audience for your add-on.</p> + +<p>You are not required to list your add-on on AMO, but your add-on must be signed by Mozilla or users won't be able to install it.</p> + +<p>For an overview of the process of publishing your add-on, see <a href="https://developer.mozilla.org/en-US/Add-ons/Distribution">Signing and distributing your add-on</a>.</p> + +<h2 id="Other_types_of_add-ons">Other types of add-ons</h2> + +<p>Generally, when people speak of add-ons they're referring to extensions, but there are a few other add-on types that allow users to customize Firefox. Those add-ons include:</p> + +<ul> + <li><a href="https://developer.mozilla.org/Add-ons/Themes/Background">Lightweight themes</a> are a simple way to provide limited customization for Firefox.</li> + <li><a href="/en-US/Add-ons/Firefox_for_Android">Mobile add-ons</a> are add-ons for Firefox for Android. Note, though, that we intend to deprecate some of the technology underlying these APIs. In the future, WebExtensions will be fully supported on Firefox for Android.</li> + <li><a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">Search engine plugins</a> add new search engines to the browser's search bar.</li> + <li><a href="/en-US/docs/Mozilla/Creating_a_spell_check_dictionary_add-on">User dictionaries</a> are add-ons that let you spell-check in different languages.</li> + <li><a href="https://support.mozilla.org/kb/use-firefox-interface-other-languages-language-pack">Language packs</a> are add-ons that let you have more languages available for the user interface of Firefox.</li> +</ul> + +<hr> +<h2 id="Contact_us">Contact us</h2> + +<p>You can use the links below to get help, keep up to date with news around add-ons, and give us feedback.</p> + +<h3 id="Add-ons_forum">Add-ons forum</h3> + +<p>Use the <a href="https://discourse.mozilla-community.org/c/add-ons">Add-ons Discourse forum</a> to discuss all aspects of add-on development and to get help.</p> + +<h3 id="Mailing_lists">Mailing lists</h3> + +<p>Use the <strong>dev-addons</strong> list to discuss development of the add-ons ecosystem, including the development of the WebExtensions system and of AMO:</p> + +<ul> + <li><a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons list info</a></li> + <li><a href="https://mail.mozilla.org/pipermail/dev-addons/">dev-addons archives</a></li> +</ul> + +<h3 id="IRC">IRC</h3> + +<p>If you're a fan of IRC, you can get in touch at:</p> + +<ul> + <li><a href="irc://irc.mozilla.org/addons">#addons</a> (discussion of the add-ons ecosystem)</li> + <li><a href="irc://irc.mozilla.org/extdev">#extdev</a> (general discussion of add-on development)</li> + <li><a href="irc://irc.mozilla.org/webextensions">#webextensions</a> (discussion of WebExtensions in particular)</li> +</ul> diff --git a/files/kab/mozilla/add-ons/webextensions/index.html b/files/kab/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..7cb253b964 --- /dev/null +++ b/files/kab/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,113 @@ +--- +title: Asiɣzef n iminig +slug: Mozilla/Add-ons/WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions +--- +<div>{{AddonSidebar}}</div> + +<p>Isiɣzifen zemren ad snernin u ad d-beddlen tazmert n iminig. isiɣzifen n Firefox ttwasulin s useqdec n API WebIsiɣzifen, d anagraw n waṭas-iminigen i usnefli n isiɣzifen. deg weḥric ameqqran, anagraw yemsaḍa akked API <a href="https://developer.chrome.com/extensions">isiɣzifen API </a>yettusefrak sɣur Google Chrome d Opera d <a href="https://browserext.github.io/browserext/">W3C Draft Community Group</a>. Isiɣzifen yettwarun i yiminigen-agi akken ma llan ad ddun di Firefox neɣ <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> akked <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">just a few changes</a>. API temsaḍa merra akked <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>.</p> + +<p>Ma yella ɣuṛ-k tikta neɣ tuttriwin, neɣ ma teḥwaǧǧeḍ tallalt i tunegt n add-on yellan i wakken API n Webisiɣzef ad ttwasqedcen. tzemreḍ aɣ-d nermseḍ <a href="https://mail.mozilla.org/listinfo/dev-addons">tabdert n dev-addons mailing</a> neɣ <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> ɣef <a href="https://wiki.mozilla.org/IRC">IRC</a>.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="Bdu">Bdu</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions">Anwi i d isiɣzifen</a><a href="/en-US/Add-ons/WebExtensions/What_are_WebExtensions">?</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Isiɣzif-inek amezwaru</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Isiɣzif-inek wis ssin</a><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension"> </a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Tacellaḥt n isiɣzif</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Examples">Amedya n isiɣzif</a></li> +</ul> + +<h2 id="Amek">Amek</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Tuṭṭfa n tuttriwin HTTP</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Snifel asebter n web</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Rnu taqeffalt s afeggag n ifecka </a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Rnu asebter n iɣewwaren</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">Amyermed ɣef ufus</a></li> +</ul> + +<h2 id="Agrudem_n_uqeddac">Agrudem n uqeddac</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface">Tazwart</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">Taqeffalt ufeggag n ifecka n iminig</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">Taqeffalt ufeggag n ifecka n iminig s popup</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">Taqeffalt n ufeggag n tansa </a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">Taqeffalt n ufeggag n tansa s popup</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Aferdis n umu</a><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">ɣ n usatal</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Isegrar</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Asebter n i</a><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">ɣewwaren</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Bundled_web_pages">Isebtar n web yedduklen </a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Il</a><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">ɣuten</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Afeggag n tansa n isumar</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Igalisen n ifecka n uneflay </a></li> +</ul> + +<h2 id="Tamidrant">Tamidrant</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript API overview</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Content scripts</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Match patterns</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_files">Working with files</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internationalization</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">Native messaging</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_devtools_APIs">Using the devtools APIs</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/User_experience_best_practices">User experience best practices</a></li> +</ul> + +<h2 id="Asiweḍ">Asiweḍ</h2> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">Porting a Google Chrome extension</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">Porting a legacy Firefox extension</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android">Developing for Firefox for Android</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">Embedded WebExtensions</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Comparison with the Add-on SDK</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparison with XUL/XPCOM extensions</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">Chrome incompatibilities</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Differences_between_desktop_and_Android">Differences between desktop and Android</a></li> +</ul> + +<h2 id="Asuddem_n_useqdec_n_Firefox">Asuddem n useqdec n Firefox</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User experience</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Installation</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">Getting started with web-ext</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">web-ext command reference</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">Extensions and the Add-on ID</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Alternative_distribution_options">Alternative distribution options</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">Publishing your extension</a></li> +</ul> +</div> + +<div class="section"> +<h2 id="Tamselɣut">Tamselɣut</h2> + +<h3 id="APIs_n_JavaScript">APIs n JavaScript</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript API overview</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser compatibility tables for JavaScript APIs</a></li> +</ul> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}</div> + +<h3 id="Tasarut_n_umeskan">Tasarut n umeskan</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json overview</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">Browser compatibility for manifest.json</a></li> +</ul> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div> +</div> +</div> diff --git a/files/kab/mozilla/firefox/index.html b/files/kab/mozilla/firefox/index.html new file mode 100644 index 0000000000..df9c797c10 --- /dev/null +++ b/files/kab/mozilla/firefox/index.html @@ -0,0 +1,86 @@ +--- +title: Firefox +slug: Mozilla/Firefox +tags: + - Firefox + - Landing + - Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Firefox +--- +<div>{{FirefoxSidebar}}</div> + +<p><a class="external external-icon" href="https://www.mozilla.org/firefox/">Firefox</a> is Mozilla's popular Web browser, available for multiple platforms including Windows, macOS, and Linux on the desktop and all Android and iOS mobile devices. With broad compatibility, the latest in Web technologies, and powerful development tools, Firefox is a great choice for both Web developers and end users.</p> + +<p>Firefox is an open source project; much of the code is contributed by our huge community of volunteers. <span class="seoSummary">Here you can learn about how to contribute to the Firefox project and you will also find links to information about the construction of Firefox add-ons, using the developer tools in Firefox, and other topics.</span></p> + +<div class="summary"> +<p>Learn how to create add-ons for <a class="external external-icon" href="https://www.mozilla.org/firefox/">Firefox</a>, how to develop and build Firefox itself, and how the internals of Firefox and its subprojects work.</p> +</div> + +<ul class="card-grid"> + <li><span>Developer release notes</span> + + <p><a href="/en-US/Firefox/Releases">Developer-focused release notes</a>; learn what new capabilities for both Web sites and add-ons arrive in each version of Firefox.</p> + </li> + <li><span>Project documentation</span> + <p>Get detailed information about <a href="/en-US/docs/Mozilla">the internals of Firefox</a> and its build system, so you can find your way around in the code.</p> + </li> + <li><span>Developer guide</span> + <p>Our <a href="/en-US/docs/Developer_Guide">developer guide</a> provides details on how to get and compile the Firefox source code, how to find your way around, and how to contribute to the project.</p> + </li> +</ul> + +<h2 id="Firefox_channels">Firefox channels</h2> + +<p>Firefox is available in five <strong>channels</strong>.</p> + +<h3 id="Firefox_Nightly">Firefox Nightly</h3> + +<p>Each night we build Firefox from the latest code in <a href="/en-US/docs/mozilla-central">mozilla-central</a>. These builds are for Firefox developers or those who want to try out the very latest cutting edge features while they're still under active development.</p> + +<p><a href="https://nightly.mozilla.org/" style="">Download Firefox Nightly</a></p> + +<h3 id="Firefox_Developer_Edition">Firefox Developer Edition</h3> + +<p>This is a version of Firefox tailored for developers. Firefox Developer Edition has all the latest developer tools that have reached beta. We also add some extra features for developers that are only available in this channel. It uses its own path and profile, so that you can run it alongside Release or Beta Firefox.</p> + +<p><a href="/en-US/Firefox/Developer_Edition">Learn more about Firefox Developer Edition</a>.</p> + +<p><a href="https://www.mozilla.org/firefox/developer/" style="">Download Firefox Developer Edition</a></p> + +<h3 id="Firefox_Beta">Firefox Beta</h3> + +<p>Every four weeks, we take the features that are stable enough, and create a new version of Firefox Beta. Firefox Beta builds are for Firefox enthusiasts to test what's destined to become the next released Firefox version.</p> + +<p><a href="https://www.mozilla.org/firefox/channel/#beta" style="">Download Firefox Beta</a></p> + +<h3 id="Firefox">Firefox</h3> + +<p>After stabilizing for another four weeks in Beta, we're ready to ship the new features to hundreds of millions of users in a new release version of Firefox.</p> + +<p><a href="https://www.mozilla.org/firefox/channel/#firefox" style="">Download Firefox</a></p> + +<h3 id="Firefox_Extended_Support_Release_ESR">Firefox Extended Support Release (ESR)</h3> + +<p>Firefox ESR is the long-term support edition of Firefox for desktop for use by organizations including schools, universities, businesses and others who need extended support for mass deployments.</p> + +<p><a href="/en-US/Firefox/Firefox_ESR">Learn more about Firefox Extended Support Release</a>.</p> + +<p><a href="https://www.mozilla.org/firefox/organizations/all/" style="">Download Firefox ESR</a></p> + +<h2 id="Contents">Contents</h2> + +<p>{{LandingPageListSubpages}}</p> + +<h2 id="Firefox_profiles">Firefox profiles</h2> + +<p>If you find yourself using multiple Firefox channels—or just multiple configurations—on a regular basis, you should read how to <a href="/en-US/docs/Mozilla/Firefox/Multiple_profiles">use multiple Firefox profiles</a> by turning Firefox's Profile Manager and other profile management tools to your advantage.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://mail.mozilla.org/listinfo/firefox-dev">Mailing list</a></li> + <li><a href="https://wiki.mozilla.org/Release_Management/Calendar">Release schedule</a></li> +</ul> diff --git a/files/kab/mozilla/firefox/releases/78/index.html b/files/kab/mozilla/firefox/releases/78/index.html new file mode 100644 index 0000000000..61d8230973 --- /dev/null +++ b/files/kab/mozilla/firefox/releases/78/index.html @@ -0,0 +1,116 @@ +--- +title: Firefox 78 i yisneflayen +slug: Mozilla/Firefox/Releases/78 +translation_of: Mozilla/Firefox/Releases/78 +--- +<p>{{FirefoxSidebar}}</p> + +<p class="summary">Amagrad-agi yettak-d isalen ɣef Firefox 78 ara yeɛnun isneflayen. Firefox yeffeɣ-d di <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates/docs/">30 Yunyu 2020</a>.</p> + +<p class="summary">Wali ugar <a href="https://hacks.mozilla.org/2020/06/new-in-firefox-78/">New in Firefox 78: DevTools improvements, new regex engine, and abundant web platform updates</a> deg Mozilla hacks.</p> + +<h2 id="Ibeddilen_i_yisneflayen_n_web">Ibeddilen i yisneflayen n web</h2> + +<h3 id="Ifecka_i_yisneflayen">Ifecka i yisneflayen</h3> + +<h4 id="Tamseɣtayt">Tamseɣtayt</h4> + +<ul> + <li>Tzemreḍ akka tura ad tbeddleḍ URL deg yibenk anmeggag seg <a href="/en-US/docs/Tools/about:debugging#Connecting_to_a_remote_device">about:debugging</a> agalis. ({{bug("1617237")}})</li> + <li>Aferdis n umuɣ <strong>Ssens JavaScript</strong> deg <a href="/en-US/docs/Tools/Debugger/UI_Tour">Debugger</a> yennul iccer amiran, u yettwannez mara yilin Ifecka n yisneflayen medlen. ({{bug("1640318")}})</li> + <li><a href="/en-US/docs/Tools/Debugger/Set_a_logpoint">Tineqidin n usenqed</a> zemrent ad d-sdukklent ismawen imuttiyen di tangalt taɣbalut ar yismawen-is aneẓli, ma tremdeḍ tikarḍiwin deg <a href="/en-US/docs/Tools/Debugger/UI_Tour#Scopes">Ugalis n tinerfadin</a>. ({{bug("1536857")}})</li> +</ul> + +<h4 id="Aẓeṭṭa_n_Usefrak">Aẓeṭṭa n Usefrak</h4> + +<ul> + <li>In the <a href="/en-US/docs/Tools/Network_Monitor/request_list#Network_request_columns">Network Monitor</a>, you can now resize the columns of the request list by dragging the column borders anywhere in the table. ({{bug("1618409")}})</li> + <li>The <a href="/en-US/docs/Tools/Network_Monitor/request_details">request details panel</a> in the Network Monitor has some UX improvements. ({{bug("1631302")}}, {{bug("1631295")}})</li> + <li>If a request was blocked, the <a href="/en-US/docs/Tools/Network_Monitor/request_list">request list</a> now shows the reason, such as an add-on, CSP, CORS, or Enhanced Tracking Protection. ({{bug("1555057")}}, {{bug("1445637")}}, {{bug("1556451")}})</li> +</ul> + +<h4 id="Other_tools">Other tools</h4> + +<ul> + <li>The <a href="/en-US/docs/Tools/Accessibility_inspector">Accessibility</a> inspector is out of beta. You can use it to check for various accessibility issues on your site. ({{bug("1602075")}})</li> + <li>Uncaught promise errors now provide all details in the Console, including their name and stack. ({{bug("1636590")}})</li> +</ul> + +<h3 id="CSS">CSS</h3> + +<ul> + <li>The {{CSSxRef(":is", ":is()")}} and {{CSSxRef(":where", ":where()")}} pseudo-classes are now enabled by default ({{bug(1632646)}}).</li> + <li>The {{CSSxRef(":read-only")}} and {{CSSxRef(":read-write")}} pseudo-classes are now supported without prefixes ({{bug(312971)}}). + <ul> + <li>In addition, <code>:read-write</code> styles are no longer applied to disabled <code><a href="/en-US/docs/Web/HTML/Element/input"><input></a></code> and <code><a href="/en-US/docs/Web/HTML/Element/textarea"><textarea></a></code> elements, which was a violation of <a href="https://html.spec.whatwg.org/#selector-read-write">the HTML spec</a> ({{bug(888884)}}).</li> + </ul> + </li> +</ul> + +<h3 id="JavaScript">JavaScript</h3> + +<ul> + <li>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat">Intl.ListFormat</a></code> API is now supported ({{bug(1589095)}}).</li> + <li>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat">Intl.NumberFormat()</a></code> constructor has been extended to support new options specified in the <a href="https://github.com/tc39/proposal-unified-intl-numberformat">Intl.NumberFormat Unified API Proposal</a> ({{bug(1633836)}}). This includes among other things: + <ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#Scientific_engineering_or_compact_notations">Support for scientific notations</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#Unit_formatting">Unit</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#Currency_formatting">currency</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#Displaying_signs">sign display</a> formatting</li> + </ul> + </li> + <li>The {{JSxRef("RegExp")}} engine <a href="https://hacks.mozilla.org/2020/06/a-new-regexp-engine-in-spidermonkey/">has been updated</a> and now supports all new features introduced in ECMAScript 2018: + <ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">Lookbehind assertions</a> ({{bug(1225665)}})</li> + <li>{{JSxRef("RegExp.prototype.dotAll")}} ({{bug(1361856)}})</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Unicode property escapes</a> ({{bug(1361876)}})</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Named capture groups</a> ({{bug(1362154)}})</li> + </ul> + </li> + <li>Due to a <a href="https://github.com/heycam/webidl/pull/357">WebIDL spec change</a> in mid-2020, we've <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag#toStringTag_available_on_all_DOM_prototype_objects">added a <code>Symbol.toStringTag</code> property to all DOM prototype objects</a> ({{bug(1277799)}}).</li> + <li>The garbage collection of {{jsxref("WeakMap")}} objects has been improved. <code>WeakMaps</code> are now marked incrementally ({{bug(1167452)}}).</li> +</ul> + +<h3 id="APIs">APIs</h3> + +<h4 id="DOM">DOM</h4> + +<ul> + <li>The {{DOMxRef("ParentNode.replaceChildren()")}} method has been implemented ({{bug(1626015)}}).</li> +</ul> + +<h4 id="Service_workers">Service workers</h4> + +<ul> + <li><a href="https://www.mozilla.org/en-US/firefox/organizations/">Extended Support Releases (ESR)</a>: Firefox 78 is the first ESR release that supports <a href="/en-US/docs/Web/API/Service_Worker_API">Service workers</a> (and the <a href="/en-US/docs/Web/API/Push_API">Push API</a>). Earlier ESR releases had no support ({{bug(1547023)}}).</li> +</ul> + +<h3 id="WebAssembly">WebAssembly</h3> + +<ul> + <li><a href="https://hacks.mozilla.org/2019/11/multi-value-all-the-wasm/">Wasm Multi-value</a> is now supported, meaning that WebAssembly functions can now return multiple values, and instruction sequences can consume and produce multiple stack values ({{bug(1628321)}}).</li> + <li>WebAssembly now supports import and export of 64-bit integer function parameters (i64) using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt">BigInt</a></code> from JavaScript ({{bug(1608770)}}).</li> +</ul> + +<h3 id="TLS_1.0_and_1.1_removal">TLS 1.0 and 1.1 removal</h3> + +<ul> + <li>Support for the <a href="/en-US/docs/Web/Security/Transport_Layer_Security">Transport Layer Security</a> (TLS) protocol’s version 1.0 and 1.1, is dropped from all browsers. Read <a href="https://hacks.mozilla.org/2019/05/tls-1-0-and-1-1-removal-update/">TLS 1.0 and 1.1 Removal Update</a> for the previous announcement and what actions to take if you are affected ({{bug(1643229)}}).</li> +</ul> + +<h2 id="Changes_for_add-on_developers">Changes for add-on developers</h2> + +<ul> + <li>{{WebExtAPIRef("browsingData.removeCache")}} and {{WebExtAPIRef("browsingData.removePluginData")}} now support deleting by hostname. ({{bug(1636784)}}).</li> + <li>When using <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/proxy/onRequest">proxy.onRequest</a></code>, a filter that limits based on tab id or window id is now correctly applied. This could be useful for add-ons that want to provide proxy functionality just in just one window.</li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus/onClicked">Clicking within the context menu</a> from the "all tabs" dropdown now passed the appropriate tab object. In the past, the active tab was erroneously passed.</li> + <li>When using <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/downloads/download">downloads.download</a></code> with the saveAs option, the recently used directory is now remembered. While this information is not available to developers, it is very convenient to users.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://www.fxsitecompat.com/en-CA/versions/78/">Site compatibility for Firefox 78</a></li> +</ul> + +<h2 id="Older_versions">Older versions</h2> + +<p>{{Firefox_for_developers(77)}}</p> diff --git a/files/kab/mozilla/firefox/releases/index.html b/files/kab/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..63372869bd --- /dev/null +++ b/files/kab/mozilla/firefox/releases/index.html @@ -0,0 +1,26 @@ +--- +title: Firefox developer release notes +slug: Mozilla/Firefox/Releases +tags: + - Firefox + - Landing + - Mozilla + - NeedsTranslation + - Release + - TopicStub +translation_of: Mozilla/Firefox/Releases +--- +<div>{{FirefoxSidebar}}</div> + +<p class="summary">Below you'll find links to the developer release notes for every Firefox release. These lovingly-crafted notes provide details on what features and APIs were added and improved and what bugs were eliminated in each version of Firefox. All written to give developers like you the information they need most. You're welcome.</p> + +<div class="multiColumnList">{{ListSubpages("",1,1,1)}}</div> + +<p><br> + Whew! That's a lot of Firefoxen!</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Thunderbird/Releases">Thunderbird developer release notes</a></li> +</ul> diff --git a/files/kab/mozilla/index.html b/files/kab/mozilla/index.html new file mode 100644 index 0000000000..7a20fd7c66 --- /dev/null +++ b/files/kab/mozilla/index.html @@ -0,0 +1,17 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - Add-ons + - Advanced + - Apps + - CodingScripting + - Landing + - Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla +--- +<p>The articles below include content about downloading and building Mozilla code. In addition, you'll find helpful articles about how the code works, how to build add-ons for Mozilla applications and the like.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/kab/tools/debugger/index.html b/files/kab/tools/debugger/index.html new file mode 100644 index 0000000000..d3fd28abb8 --- /dev/null +++ b/files/kab/tools/debugger/index.html @@ -0,0 +1,56 @@ +--- +title: Aseɣtay +slug: Tools/Debugger +translation_of: Tools/Debugger +--- +<div class="note"> +<p>Asebtar-agi yeskanay-d aseɣti n JavaScript akken i d-yettban deg Firefox 52 neɣ daw, deg Firefox Nightly akked Firefox Developer Edition.</p> + +<p>Akken ad nẓeṛ amek i d-yettban niqal deg ileqman uzwiren n Firefox neɣ Firefox Beta akked Lqem aneggaru, wali<a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29"> Tam</a><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">seɣtay</a>t <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">(send Firefox 52)</a>.</p> + +<p>ma tesufɣem-d alqem n aseɣtay u diɣen tebɣam ad uɣalem ɣer s alqem aqbuṛ,tezemrem atgem s tirza n wen:Tawila u ad sbadum asmenyif "devtools.debugger.new-debugger-frontend" ɣef <code>false</code>.</p> +</div> + +<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p> + +<p>Aseɣtay JavaScript yettaǧǧa-kwen att sniṛem tangalt JavaScript u ad isekyed naɣ ad ibedel addad innes iw akken ad yefkk tallalt iw rmeq n Bug.</p> + +<p>Tzemrem a tesqedcem iw sseɣtay n tangalt yettwaselkemen deg Firefox naɣ yettwaselkemen s tmeccaqt,amedya acermaḍ Android ig teddun s Firefox i Android. sesten <a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">asaseɣtay s tmeccaqt </a> iw akken a teẓṛrem amek ara neqqen asseɣtay ɣer yiswi ameccaq.</p> + +<p>Aseɣtay ye ddad deg Firefox,ed isebtaren-is yeskanay-ed amek ara yilli leqdic n lqem yellan deg Firefox.acukkan,tzemrem a teslekmem d asnas imunen n web,dɣa a tesqedcem iw asseɣtay tangalt yettuselekmen deg iminigen deg tikerrest.iw aṭas n alulleḍ ɣef asental agi,erzzut ɣer <a href="https://github.com/devtools-html/debugger.html">asersay asenfar n GitHub </a>.</p> + +<p>Asseɣtay amaynut ur i ttawi ara timesɣanin meṛṛa n usseɣtan aqbuṛ. wali<a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/Limitations_of_the_new_debugger"> Aqemmeḍ n usseɣtay amaynut</a>.</p> + +<hr> +<h2 id="Tirza_fessusen_ar_ugrudem_n_uqedac">Tirza fessusen ar ugrudem n uqedac</h2> + +<p>i tifin n ubrid n asseɣtay,hattan yiwet n triza <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour">arurad n agrudem uqedac</a>.</p> + +<hr> +<h2 id="Amek">Amek</h2> + +<p>Iw akken a teẓṛem d'acu ara tgem s usseɣtay,walit imniren illilen agi:</p> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Open_the_debugger">ldi asseɣtay</a><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Open_the_debugger"> </a><a href="/en-US/docs/Tools/Debugger/How_to/Open_the_debugger"> </a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Sesten ired n ibeddi</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Sesten ired n ibeddi awtilan</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">Ssens ired n ibeddi</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Step_through_code">Zgger tangalt</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Breaking_on_exceptions">Taṛuẓi n waslid </a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Asiggez ucbiḥ n ufaylu yettuseqsefen</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Search">Nnadi</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Zwiret iɣbula n eval </a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Sqedcet takarḍa n uɣbalu</a></li> +</ul> +</div> + +<hr> +<h2 id="Tamsisɣelt">Tamsisɣelt</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Debugger/Keyboard_shortcuts">Anegzum n anasiw </a></li> +</ul> +</div> diff --git a/files/kab/tools/index.html b/files/kab/tools/index.html new file mode 100644 index 0000000000..946cec773d --- /dev/null +++ b/files/kab/tools/index.html @@ -0,0 +1,161 @@ +--- +title: Ifecka n tneflit n Firefox +slug: Tools +translation_of: Tools +--- +<p>Ad yesled, ad yeẓreg, udiq ad iseɣti HTML, CSS, akked JavaScript ɣef uselkim neɣ aziraz. Ileqman ineggura n ifecka n tneflit, <a href="https://www.mozilla.org/en-US/firefox/developer/">sider Firefox Developer Edition</a>.</p> + +<h2 id="Ifecka_n_iɣes">Ifecka n iɣes</h2> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h3 id="Amaswaḍ_n_isebtar">Amaswaḍ n isebtar</h3> + +<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="" src="https://mdn.mozillademos.org/files/14532/inspector.png" style="display: block; height: 257px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Sken, Ẓreg agbur akked tneɣruft n usebter. Sikedet ugar timeszrit n usebtar aked daɣen tamudemt n tankult,imrayen ed amsebtar n iẓiki.</p> +</div> + +<div class="column-half"> +<h3 id="Tadiwent_Web">Tadiwent Web</h3> + +<p><a href="/en-US/docs/Tools/Web_Console"><img alt="" src="https://mdn.mozillademos.org/files/14528/console.png" style="display: block; height: 257px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Sikedtet inzan yettwaskelsen sɣuṛ asebtar Web u mayermed akked asebtar s useqdec n JavaScript..</p> +</div> +</div> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h3 id="Tamseɣtayt_JavaScript">Tamseɣtayt JavaScript</h3> + +<p><a href="/en-US/docs/Tools/Debugger"><img alt="" src="https://mdn.mozillademos.org/files/14542/debugger.png" style="display: block; height: 1026px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Ḥabset,lḥut u smerset angal JavaScript i teddu uselkem deg sebtar.</p> +</div> + +<div class="column-half"> +<h3 id="Asefrak_Uzeṭṭa">Asefrak Uzeṭṭa</h3> + +<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="" src="https://mdn.mozillademos.org/files/14534/network-monitor.png" style="display: block; height: 257px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Wali asuter n uzeṭṭa ig ttwasqadcen deg taccaṛt usebtar.</p> +</div> +</div> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h3 id="Ifecka_n_tmellit">Ifecka n tmellit</h3> + +<p><a href="/en-US/docs/Tools/Performance"><img alt="" src="https://mdn.mozillademos.org/files/14536/performance.png" style="display: block; height: 1026px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Sebrurzet tastudmirt tamatut,a JavaScript ed tirebbawin amsebtar n usmel innek.</p> +</div> + +<div class="column-half"> +<h3 id="Askar_n_usali_anferray">Askar n usali anferray</h3> + +<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="" src="https://mdn.mozillademos.org/files/14538/rdm.png" style="display: block; height: 1542px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>wali amek ara d iffeɣ u smel neɣ asnas u amek ara yeddu deg yal inawen n ibenkan ed azeṭṭa.</p> +</div> +</div> + +<hr> +<h2 id="Ifecka_nniḍen">Ifecka nniḍen</h2> + +<p>allalen agi n usnesfli seɣerden deg Firefox.mačči am «allalen Core» sedaw-a,ur tezmirem ara atent sqedcem yal ass.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Memory">Takatut</a></dt> + <dd>Guccelet tiɣawsiwin ay ṭfen takatut ig teddun..</dd> + <dt><a href="/en-US/docs/Tools/Storage_Inspector">Amaswad n uxzan </a></dt> + <dd>Inspect cookies, local storage, indexedDB, and session storage present in a page.</dd> + <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt> + <dd>Inspect the page's DOM properties, functions, etc.</dd> + <dt><a href="/en-US/docs/Tools/GCLI">Developer Toolbar</a></dt> + <dd>A command-line interface for the developer tools.</dd> + <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> + <dd>Select a color from the page.</dd> + <dt><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt> + <dd>Amaẓṛag n umagrad yeseɣreden deg Firefox yettaǧǧa-kwen a-t arum u a-t selkemem JavaScriptt.</dd> + <dt><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></dt> + <dd>View and edit CSS styles for the current page.</dd> + <dt><a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></dt> + <dd>View and edit the vertex and fragment shaders used by <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd> + <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></dt> + <dd>Examine the graph of audio nodes in an audio context, and modify their parameters.</dd> +</dl> +</div> + +<hr> +<h2 id="Connecting_the_Developer_Tools">Connecting the Developer Tools</h2> + +<p>If you open the developer tools using <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">keyboard shortcuts</a> or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt> + <dd>Debug add-ons, content tabs, and workers running in the browser.</dd> + <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Connecting to Firefox for Android</a></dt> + <dd>Connect the developer tools to an instance of Firefox running on an Android device.</dd> + <dt><a href="/en-US/docs/Tools/Working_with_iframes">Connecting to iframes</a></dt> + <dd>Connect the developer tools to a specific iframe in the current page.</dd> + <dt><a href="/en-US/docs/Tools/Valence">Connecting to other browsers</a></dt> + <dd>Connect the developer tools to Chrome on Android and Safari on iOS.</dd> +</dl> +</div> + +<hr> +<h2 id="Debugging_the_browser">Debugging the browser</h2> + +<p>By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt> + <dd>See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.</dd> + <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt> + <dd>Attach the Developer Tools to the browser itself.</dd> +</dl> +</div> + +<hr> +<h2 id="Extending_the_devtools">Extending the devtools</h2> + +<p>The developer tools are designed to be extensible. Firefox add-ons can access the developer tools and the components they use to extend existing tools and add new tools. With the remote debugging protocol, you can implement your own debugging clients and servers, enabling you to debug websites using your own tools or to debug different targets using the Firefox tools.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Example_add-ons">Example devtools add-ons</a></dt> + <dd>Use these examples to understand how to implement a devtools add-on.</dd> + <dt><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Add a new panel to the devtools</a></dt> + <dd>Write an add-on that adds a new panel to the Toolbox.</dd> + <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt> + <dd>The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.</dd> + <dt><a href="/en-US/docs/Tools/Editor">Source Editor</a></dt> + <dd>A code editor built into Firefox that can be embedded in your add-on.</dd> + <dt><a href="/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt> + <dd>An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt> + <dd>How to extend and customize the output of the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> and the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd> +</dl> +</div> + +<hr> +<h2 id="Contribute">Contribute</h2> + +<p>If you want to help to improve the developer tools, these resources will get you started.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="https://wiki.mozilla.org/DevTools/GetInvolved">Get Involved</a></dt> + <dd>Mozilla wiki page explaining how to get involved.</dd> + <dt><a href="http://firefox-dev.tools/">firefox-dev.tools</a></dt> + <dd>A tool helping to find bugs to work on.</dd> +</dl> +</div> diff --git a/files/kab/tools/network_monitor/index.html b/files/kab/tools/network_monitor/index.html new file mode 100644 index 0000000000..e9dc06cff8 --- /dev/null +++ b/files/kab/tools/network_monitor/index.html @@ -0,0 +1,553 @@ +--- +title: Asefrak uẓeṭṭa +slug: Tools/Network_Monitor +translation_of: Tools/Network_Monitor +--- +<p> </p> + +<p>A Network Monitor a k-id beggen meṛṛa isteqsiyen uẓeṭṭa id yesnulfa Firefox (amedya,mara d yezdem asebtar naɣ XMLHttpRequests),tanzagt i yal asteqsi u alulleḍ n yal asteqsi.</p> + +<h2 id="Alday_n_usefrak_uẓeṭṭa">Alday n usefrak uẓeṭṭa</h2> + +<p>Llan akken kra n wamek ara yeldi Network Monitor:</p> + +<ul> + <li>Seqdec a siwzel <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Q</kbd> ( <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>Q</kbd> ɣef Mac).</li> + <li>Fren "Aẓeṭṭa"deg umuɣ n usnefli (ig llan sdaw-umuɣ n umuɣ "Ifecka" ɣef MAC OS X d Linux).</li> + <li>Ssit ɣef iccer "Aẓeṭṭa" , deg feggag n ifecka (ssit ɣef F12 akken a tteldiḍ afeggag n ifecka).</li> +</ul> + +<p>Asefrak uẓeṭṭa ad yuɣal ad iban sdaw n usfaylu n iminig.zdem asebtar akken an wali asuter:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13535/1-new-overview-small.png" style="display: block; height: 831px; margin: 0px auto; width: 1100px;"></p> + +<p>Asefrak yeseklas asuter mara yeldi ufeggag n ifecka,ɣas ma yella iccer uẓeṭṭa ur yettwafren ara.ayagi ibɣa ad yinni belli tzemreḍ a ttebduḍ aseɣti n usebtar deg tadiwent u dɣa zgger ɣer iccer uẓeṭṭa fiḥel azdam n usebtar.</p> + +<h2 id="Taẓuri_n_agrudem_useqdac">Taẓuri n agrudem useqdac</h2> + +<p>A UI ibḍa ɣef ukuz (4) taggayin timeqṛanin:</p> + +<ul> + <li>Agdil agejday,ɣuṛes: <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">tafeggagt ifecka</a>,<a href="/en-US/docs/Tools/Network_Monitor#Network_request_list">tabdart n usuter</a>, akked <a href="/en-US/docs/Tools/Network_Monitor#Network_request_details">agalis n ululleḍ </a><a href="/kab/docs/">n usuter</a>:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13266/nm-pieces.png" style="display: block; height: 850px; margin-left: auto; margin-right: auto; width: 962px;"></p> + +<ul> + <li><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Tasleṭ n tirebawin</a> d agdil ibḍan:</li> +</ul> + +<p><img alt="Performance analysis view" src="https://mdn.mozillademos.org/files/14673/Performance%20analysis.png" style="display: block; height: 541px; margin-left: auto; margin-right: auto; width: 665px;"></p> + +<h2 id="Tafeggagt_n_ifecka">Tafeggagt n ifecka</h2> + +<p>Seg Firefox 47,tafeggagt ifecka attan asawen n usfaylu agejday.deg lqem amezwaru,tella swada.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13138/nm-toolbar.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 1910px;">S lexṣas:</p> + +<ul> + <li>an icon to clear the <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Network_request_list">network request list</a></li> + <li>an array of icons to filter the network request list by type: + <ul> + <li>by the content type of the response</li> + <li>XHR requests</li> + <li>(new in Firefox 48) WebSocket upgrades (labeled WS)</li> + </ul> + </li> + <li>an icon to launch <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Performance_analysis">performance analysis</a></li> + <li>a summary of this page, including the number of requests, total size, and total time</li> + <li>a box enabling you to <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Filtering_by_URL">filter requests by URL</a> and <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Filtering_by_properties">by properties</a></li> + <li>an icon to show/hide the <a href="/en-US/docs/Tools/Network_Monitor#Network_request_details">network request details pane</a>.</li> +</ul> + +<h2 id="Network_request_list">Network request list</h2> + +<p>By default, the Network Monitor shows a list of all the network requests made in the course of loading the page. Each request is displayed in its own row:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13537/5-new-request-list-new.png" style="display: block; height: 257px; margin: 0px auto; width: 900px;">By default, the Network Monitor is cleared each time you navigate to a new page or reload the current page. You can override this behavior by checking "Enable persistent logs" in the <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Common_preferences">Settings</a>.</p> + +<h3 id="Network_request_columns">Network request columns</h3> + +<p>From Firefox 55 onwards, you can toggle different columns by right-clicking on the table header and choosing the specific column from the context menu. A "Reset Columns" option is also available to reset the columns to their initial configuration. Here is a list of all available columns:</p> + +<ul> + <li><strong>Status</strong>: The HTTP status code returned. This is displayed as a color-coded icon: + + <ul> + <li><img alt="" src="https://mdn.mozillademos.org/files/13136/1x.png" style="height: 17px; width: 17px;">blue circle for informational (1XX codes). Notably, this includes 101 (switching protocols) for <a href="/en-US/docs/Web/API/WebSocket">WebSocket</a> upgrades.</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10941/200.png" style="height: 17px; width: 17px;"> green circle for success (2XX codes)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10945/300.png" style="height: 17px; width: 17px;"> orange triangle for redirection (3XX)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10943/4-500.png" style="height: 17px; width: 17px;"> red square for errors (4XX and 5XX)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10947/cached.png" style="height: 17px; width: 17px;"> hollow grey circle for responses that were fetched from the browser cache.</li> + </ul> + The exact code is displayed immediately after the icon.</li> + <li><strong>Method</strong>: the HTTP request method used.</li> + <li><strong>File</strong>: basename of the file requested.</li> + <li><strong>Protocol:</strong> The network protocol used to transfer the data. This column is hidden by default. This is new in Firefox 55.</li> + <li><strong>Scheme:</strong> The scheme (https/http/ftp/...) of the path requested. This column is hidden by default. This is new in Firefox 55.</li> + <li><strong>Domain</strong>: domain of the path requested. + <ul> + <li>If the request used SSL/TLS and the connection had security weaknesses such as weak ciphers, you'll see a warning triangle next to the domain. You will be able to see more details about the problem in the <a href="/en-US/docs/Tools/Network_Monitor#Security">Security tab</a>.</li> + <li>Hover over the domain to see the IP address.</li> + <li>There's an icon next to the domain that gives you extra information about the security status of that request. See <a href="/en-US/docs/Tools/Network_Monitor#Security_icons">Security icons</a>.</li> + </ul> + </li> + <li><strong>Remote IP</strong>: The IP address of the server answering the request. This column is hidden by default. This is new in Firefox 55.</li> + <li><strong>Cause</strong>: The reason that the network request occurred, for example XHR request, {{htmlelement("img")}}, script, script requesting an image, etc. This is new in Firefox 49.</li> + <li><strong>Type</strong>: <code>Content-type</code> of the response.</li> + <li><strong>Cookies:</strong> The number of request cookies associated to the request. This column is hidden by default. This is new in Firefox 55.</li> + <li><strong>Set-Cookies:</strong> The number of response cookies associated to the request. This column is hidden by default. This is new in Firefox 55.</li> + <li><strong>Transferred</strong>: the number of bytes that were actually transferred to load the resource. This will be less than <strong>Size</strong> if the resource was compressed. From Firefox 47, if the resource was fetched from a <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> cache, then this cell displays "service worker".</li> + <li><strong>Size</strong>: the size of the transferred resource.</li> +</ul> + +<p>The toolbar at the top labels these columns, and clicking the label sorts all the requests by that column.</p> + +<h4 id="Image_thumbnails">Image thumbnails</h4> + +<p>If the file is an image, the row includes a thumbnail of the image, and hovering over the filename shows a preview in a tooltip:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13539/6-new-thumb-small.png" style="display: block; height: 241px; margin: 0px auto; width: 900px;"></p> + +<h4 id="Security_icons">Security icons</h4> + +<p>The Network Monitor displays an icon in the Domain column:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13541/7-new-security-icons-new.png" style="display: block; height: 217px; margin: 0px auto; width: 900px;"></p> + +<p>This gives you extra information about the security status of the request:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Icon</th> + <th scope="col">Meaning</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11655/https.svg" style="height: 16px; width: 16px;"></td> + <td>HTTPS</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11653/https-weak.svg" style="height: 16px; width: 16px;"></td> + <td>Weak HTTPS (for example, a weak cipher was used)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11649/https-failed.svg" style="height: 16px; width: 16px;"></td> + <td>Failed HTTPS (for example, a certificate was invalid)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11651/http.svg" style="height: 16px; width: 16px;"></td> + <td>HTTP</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11657/localhost.svg" style="height: 16px; width: 16px;"></td> + <td>Localhost</td> + </tr> + </tbody> +</table> + +<p>For weak and failed HTTPS requests, you'll see more details of the problem in the <a href="/en-US/docs/Tools/Network_Monitor#Security">Security tab</a>.</p> + +<h4 id="Cause_column">Cause column</h4> + +<p>The Cause column indicates what the cause of the request was. This is usually fairly obvious, and you can generally see the correlation between this and the Type column entry. The most common values are:</p> + +<ul> + <li>document: The source HTML document.</li> + <li>img: {{htmlelement("img")}} element.</li> + <li>imageset: {{htmlelement("img")}} element.</li> + <li>script: A JavaScript file.</li> + <li>stylesheet: A CSS file.</li> +</ul> + +<div> +<p>When a request was triggered by JavaScript, a small JS icon is shown to the left of the entry in the Cause column. Hovering over this displays a popup containing the stack trace for the request, to provide more clues as to why a request happened.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13575/stack-trace-new-small.png" style="display: block; margin: 0 auto;"></p> + +<p>You can then click on any of the entries in the popup to open up the relevant script in the <a href="/en-US/docs/Tools/Debugger">Debugger</a> pane.</p> +</div> + +<h3 id="Timeline">Timeline</h3> + +<p>The request list also displays a timeline for the different parts of each request.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13543/8-new-timeline-small.png" style="display: block; height: 239px; margin: 0px auto; width: 900px;"></p> + +<p>Each timeline is given a horizontal position in its row relative to the other network requests, so you can see the total time taken to load the page. For more details on the color-coding used here, see the section on the <a href="/en-US/docs/Tools/Network_Monitor#Timings">Timings</a> page.</p> + +<p>Starting in Firefox 45, the timeline also contains two vertical lines:</p> + +<ul> + <li>the <span style="color: blue;">blue</span> line marks the point at which the page's <code><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> event is triggered</li> + <li>the <span style="color: red;">red</span> line marks the point at which the page's <code><a href="/en-US/docs/Web/Events/load">load</a></code> event is triggered</li> +</ul> + +<h3 id="Filtering_requests">Filtering requests</h3> + +<p>You can filter requests by content type, by whether they are XMLHttpRequests or WebSocket requests, by URL, or by request properties.</p> + +<h4 id="Filtering_by_content_type">Filtering by content type</h4> + +<p>To filter by content type, use the buttons in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p> + +<h4 id="Filtering_XHR">Filtering XHR</h4> + +<p>To see only {{Glossary("XHR (XMLHttpRequest)", "XHR")}} requests, use the "XHR" button in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p> + +<h4 id="Filtering_WebSockets">Filtering WebSockets</h4> + +<div class="geckoVersionNote"> +<p>New in Firefox 48</p> +</div> + +<p>To see only WebSocket connections, use the "WS" button in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p> + +<p>To monitor the data exchanged in WebSocket connections, try the <a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">WebSocket Monitor add-on</a>.</p> + +<h4 id="Filtering_by_URL">Filtering by URL</h4> + +<p>To filter by URL, use the search box in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>. Click in the search box, or press <kbd>Ctrl</kbd> + <kbd>F</kbd> (or <kbd>Cmd</kbd> + <kbd>F</kbd> on a Mac), and start typing. The list of network requests will be filtered to include only requests that contain your filter string, in either the Domain or the File portions.</p> + +<p>From Firefox 45, you can filter requests that <em>don't</em> contain your filter string by prefixing your query with the "-" operator. For example, the query "-google.com" will show all requests that don't have "google.com" in their URL.</p> + +<h4 id="Filtering_by_properties">Filtering by properties</h4> + +<div class="geckoVersionNote"> +<p>New in Firefox 55</p> +</div> + +<p>To filter by specific request properties, use the search box in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>. The search box recognizes specific keywords, which can be used to filter the requests by specific request properties. Those keywords are followed by a colon and a related filter value. The filter values are matched case insensitive. Prepending a minus (<code>-</code>) negates the filter. You can combine different filters together by seperating them with a space.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Keyword</th> + <th scope="col">Meaning</th> + <th scope="col">Examples</th> + </tr> + <tr> + <td><code>status-code</code></td> + <td>Shows resources that have the specific HTTP status code.</td> + <td><code>status-code:304</code></td> + </tr> + <tr> + <td><code>method</code></td> + <td>Shows resources that have were requested via the specific HTTP request method.</td> + <td><code>method:post</code></td> + </tr> + <tr> + <td><code>domain</code></td> + <td>Shows resources coming from a specifc domain.</td> + <td><code>domain:mozilla.org</code></td> + </tr> + <tr> + <td><code>remote-ip</code></td> + <td>Shows resources coming from a server with the specified IP.</td> + <td><code>remote-ip:63.245.215.53</code><br> + <code>remote-ip:[2400:cb00:2048:1::6810:2802]</code></td> + </tr> + <tr> + <td><code>cause</code></td> + <td>Shows resources matching a specific cause type. The types can be found in the description of the <a href="#Cause_column">cause column</a>.</td> + <td><code>cause:js</code><br> + <code>cause:stylesheet<br> + cause:img</code></td> + </tr> + <tr> + <td><code>transferred</code></td> + <td>Shows resources having a specific transferred size or a transferred size close to the one specified. <code>k</code> can be used as suffix for kilobytes and <code>m</code> for megabytes, e.g. the value <code>1k</code> is equivalent to <code>1024</code>.</td> + <td><code>transferred:1k</code></td> + </tr> + <tr> + <td><code>size</code></td> + <td>Shows resources having a specific size (after decompression) or a size close to the one specified. <code>k</code> can be used as suffix for kilobytes and <code>m</code> for megabytes, e.g. the value <code>1k</code> is equivalent to <code>1024</code>.</td> + <td><code>size:2m</code></td> + </tr> + <tr> + <td><code>larger-than</code></td> + <td>Shows resources that are larger than the specified size in bytes. <code>k</code> can be used as suffix for kilobytes and <code>m</code> for megabytes, e.g. the value <code>1k</code> is equivalent to <code>1024</code>.</td> + <td><code>larger-than:2000</code><br> + <code>-larger-than:4k</code></td> + </tr> + <tr> + <td><code>mime-type</code></td> + <td>Shows resources that match the specified MIME type.</td> + <td><code>mime-type:text/html</code><br> + <code>mime-type:image/png</code><br> + <code>mime-type:application/javascript</code></td> + </tr> + <tr> + <td><code>is</code></td> + <td><code>is:cached</code> and <code>is:from-cache</code> shows only resources coming from cache.<br> + <code>is:running</code> shows only resources, which are currently being transferred.</td> + <td><code>is:cached</code><br> + <code>-is:running</code></td> + </tr> + <tr> + <td><code>scheme</code></td> + <td>Shows resources transferred via the given scheme.</td> + <td><code>scheme:http</code></td> + </tr> + <tr> + <td><code>has-response-header</code></td> + <td>Shows resources that contain the specified HTTP response header.</td> + <td><code>has-response-header:cache-control</code><br> + <code>has-response-header:X-Firefox-Spdy</code></td> + </tr> + <tr> + <td><code>set-cookie-domain</code></td> + <td>Show the resources that have a <code>Set-Cookie</code> header with a <code>Domain</code> attribute that matches the specified value.</td> + <td><code>set-cookie-domain:.mozilla.org</code></td> + </tr> + <tr> + <td><code>set-cookie-name</code></td> + <td>Show the resources that have a <code>Set-Cookie</code> header with a name that matches the specified value.</td> + <td><code>set-cookie-name:_ga</code></td> + </tr> + <tr> + <td><code>set-cookie-value</code></td> + <td>Show the resources that have a <code>Set-Cookie</code> header with a value that matches the specified value.</td> + <td><code>set-cookie-value:true</code></td> + </tr> + <tr> + <td><code>regexp</code></td> + <td>Show the resources having a URL that matches the given {{Glossary("regular expression")}}.</td> + <td><code>regexp:\d{5}<br> + regexp:mdn|mozilla</code></td> + </tr> + </thead> +</table> + +<h3 id="Context_menu">Context menu</h3> + +<p>Context-clicking on a row in the list displays a context menu with the following options:</p> + +<ul> + <li>Copy URL</li> + <li>Copy URL Parameters (new in Firefox 40)</li> + <li>Copy POST Data (new in Firefox 40, only for POST requests)</li> + <li>Copy as cURL</li> + <li>Copy Request Headers (new in Firefox 40)</li> + <li>Copy Response Headers (new in Firefox 40)</li> + <li>Copy Response (new in Firefox 40)</li> + <li>Copy Image as Data URI (only for images)</li> + <li>Copy All As HAR (new in Firefox 41)</li> + <li>Save All As HAR (new in Firefox 41)</li> + <li>Save Image As (new in Firefox 55, only for images)</li> + <li>Edit and Resend</li> + <li>Open in New Tab</li> + <li>Start <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Performance Analysis</a> for the page</li> +</ul> + +<h4 id="Edit_and_Resend">Edit and Resend</h4> + +<p>This option opens an editor enabling you to edit the request's method, URL, parameters, and headers, and resend the request.</p> + +<h4 id="Copy_as_cURL">Copy as cURL</h4> + +<p>This option copies the network request to the clipboard as a <a href="http://curl.haxx.se/">cURL</a> command, so you can execute it from a command line. The command may include the following options:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>-X [METHOD]</code></td> + <td>If the method is not GET or POST</td> + </tr> + <tr> + <td><code>--data</code></td> + <td>For URL encoded request parameters</td> + </tr> + <tr> + <td><code>--data-binary</code></td> + <td>For multipart request parameters</td> + </tr> + <tr> + <td><code>--http/VERSION</code></td> + <td>If the HTTP version is not 1.1</td> + </tr> + <tr> + <td><code>-I</code></td> + <td>If the method is HEAD</td> + </tr> + <tr> + <td><code>-H</code></td> + <td> + <p>One for each request header.</p> + + <p>From Firefox 34, if the "Accept-Encoding" header is present, the cURL command will include <code>--compressed</code> instead of <code>-H "Accept-Encoding: gzip, deflate"</code>. This means that the response will be automatically decompressed.</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="CopySave_All_As_HAR">Copy/Save All As HAR</h4> + +<div class="geckoVersionNote"> +<p>New in Firefox 41.</p> +</div> + +<p>These options create an <a href="https://w3c.github.io/web-performance/specs/HAR/Overview.html">HTTP Archive</a> (HAR) for all requests listed. The HAR format enables you to export detailed information about network requests. 'Copy All As HAR' copies the data to the clipboard, 'Save All As HAR' opens a dialog allowing you to save the archive to disk.</p> + +<h2 id="Network_request_details">Network request details</h2> + +<p>Clicking on a row displays a new pane in the right-hand side of the network monitor, which provides more detailed information about the request.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13274/nm-headers-annotated.png" style="display: block; height: 436px; margin-left: auto; margin-right: auto; width: 935px;"></p> + +<p>The tabs at the top of this pane enable you to switch between the following pages:</p> + +<ul> + <li><strong>Headers</strong></li> + <li><strong>Cookies</strong></li> + <li><strong>Params</strong></li> + <li><strong>Response</strong></li> + <li><strong>Timings</strong></li> + <li><strong>Security </strong>(only for secure pages)</li> + <li><strong>Preview</strong> (only if the content type is HTML) (Removed in Firefox 55)</li> +</ul> + +<p>Clicking the icon at the right-hand end of the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a> closes the details pane and returns you to the list view.</p> + +<h3 id="Headers">Headers</h3> + +<p>This tab lists basic information about the request:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15013/headers-updated-2.png" style="display: block; height: 439px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<p>This includes:</p> + +<ul> + <li>request URL</li> + <li>request method</li> + <li>remote IP address and port <em>(new in Firefox 39)</em></li> + <li>status code with link to MDN doc (if available)</li> + <li>the HTTP request and response headers that were sent</li> + <li>a button to <a href="/en-US/docs/Tools/Network_Monitor#Edit_and_Resend">edit and resend</a> the request</li> +</ul> + +<p>You can filter the headers that are displayed:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13244/nm-headers-filtered.png" style="display: block; height: 516px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<div class="geckoVersionNote"> +<p>New in Firefox 54</p> +</div> + +<p>Besides each header is a <em>[Learn More]</em> link referring to the <a href="/en-US/docs/Web/HTTP/Headers">documentation of the HTTP headers</a>.</p> + +<h3 id="Cookies">Cookies</h3> + +<p>This tab lists full details of any cookies sent with the request or response:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13240/nm-cookies.png" style="display: block; height: 464px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<p>As with headers, you can filter the list of cookies displayed.</p> + +<h3 id="Params">Params</h3> + +<p>This tab displays the GET parameters and POST data of a request:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13254/nm-params.png" style="display: block; height: 462px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<h3 id="Response">Response</h3> + +<p>The complete content of the response. If the response is HTML, JS, or CSS, it will be shown as text:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13258/nm-response.png" style="display: block; height: 462px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<p>If the response is JSON, it will be shown as an inspectable object.</p> + +<p>If the response is an image, the tab displays a preview:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13260/nm-response-image.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<h3 id="Timings">Timings</h3> + +<p>The Timings tab breaks a network request down into the following subset of the stages defined in the <a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">HTTP Archive</a> specification:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Name</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>Blocked</td> + <td> + <p>Time spent in a queue waiting for a network connection.</p> + + <p>The browser imposes a limit on the number of simultaneous connections that can be made to a single server. In Firefox this defaults to 6, but can be changed using the <code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code> preference. If all connections are in use, the browser can't download more resources until a connection is released.</p> + </td> + </tr> + <tr> + <td>DNS resolution</td> + <td>Time taken to resolve a host name.</td> + </tr> + <tr> + <td>Connecting</td> + <td>Time taken to create a TCP connection.</td> + </tr> + <tr> + <td>Sending</td> + <td>Time taken to send the HTTP request to the server.</td> + </tr> + <tr> + <td>Waiting</td> + <td>Waiting for a response from the server.</td> + </tr> + <tr> + <td>Receiving</td> + <td>Time taken to read the entire response from the server (or cache).</td> + </tr> + </tbody> +</table> + +<p>It presents a more detailed, annotated, view of the timeline bar for that request showing how the total wait time is split into the various stages:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13264/nm-timings.png" style="display: block; height: 466px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<h3 id="Security">Security</h3> + +<p>If the site is being served over HTTPS, you get an extra tab labeled "Security". This contains details about the secure connection used including the protocol, the cipher suite, and certificate details:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13262/nm-security.png" style="display: block; height: 231px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<p>The Security tab shows a warning for security weaknesses. Currently it warns you about two weaknesses:</p> + +<ol> + <li>Using SSLv3 instead of TLS</li> + <li>Using the RC4 cipher</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10165/security-warning.png" style="display: block; height: 93px; margin-left: auto; margin-right: auto; width: 591px;"></p> + +<h3 id="Preview">Preview</h3> + +<p>Removed in Firefox 55.</p> + +<p>If the file type is HTML another tab appears labeled "Preview". This renders just that HTML:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13256/nm-preview.png" style="display: block; height: 474px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<h2 id="Performance_analysis">Performance analysis</h2> + +<p>The Network Monitor includes a performance analysis tool, to help show you how long the browser takes to download the different parts of your site.<br> + <br> + To run the performance analysis tool click the stopwatch icon in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p> + +<p>(Alternatively, if you have only just opened the Network Monitor, so it's not yet populated with the list of requests, you'll get a stopwatch icon in the main window.)</p> + +<p>The Network Monitor then loads the site twice: once with an empty browser cache, and once with a primed browser cache. This simulates the first time a user visits your site, and subsequent visits. It displays the results for each run side by side, or vertically if the browser window is narrow:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12864/nm-performance.png" style="display: block; height: 1028px; margin-left: auto; margin-right: auto; width: 691px;"></p> + +<p>The results for each run are summarised in a table and a pie chart. The tables group resources by type, and show the total size of each resource and the total time it took to load them. The accompanying pie chart shows the relative size of each resource type.</p> + +<p>To get back to the Network Monitor's list of network requests click the "Back" button on the left.</p> + +<p>Clicking on a slice of the pie takes you to the Network Monitor for that run, with a filter automatically applied to see <a href="/en-US/docs/Tools/Network_Monitor#Filtering_by_content_type">only that resource type</a>.</p> diff --git a/files/kab/tools/page_inspector/index.html b/files/kab/tools/page_inspector/index.html new file mode 100644 index 0000000000..51cbc0da40 --- /dev/null +++ b/files/kab/tools/page_inspector/index.html @@ -0,0 +1,48 @@ +--- +title: Amaswaḍ n Usebtar +slug: Tools/Page_inspector +translation_of: Tools/Page_Inspector +--- +<p>Seqdec amaswaḍ u sebtar iw akken att sermes-eḍ HTML ed CSS n usebtar.</p> + +<p>Tzemrem a tt sekyed-eḍ isebtar ye ččuṛen deg alsaru adigan n Firefox neɣ deg yiwen n iswi amestram am Firefox i Android.<a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">sikdet alday </a>s usettum akken a tezṛem amek ara teqqnem ifecka n usenefli ɣer yiwen iswi amestram</p> + +<hr> +<h2 id="Tirza_Agrudem_Uqedac">Tirza Agrudem Uqedac</h2> + +<p>Iw akken att afem abrid n wen ger amaswaḍ,attan <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour">tirza taruradt n agrudem uqedac</a>.</p> + +<hr> +<h2 id="Amek">Amek</h2> + +<p>Iw akken att issin-eḍ amek ara te sedduḍ amaswaḍ,eddut ɣer s amnir a:</p> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Elli Amasmaḍ</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Sekyed u sermes HTML</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Sekyed u sermes tamselyut n tankult </a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Steswatt u fren initen </a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Sers iferdisen deg sebtar</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">Beqqe</a><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">ḍ</a><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts"> tisefsayin</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">Ẓṛet isseɣwelen</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Seqdec API n amasma</a><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">ḍ </a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Fernet aferdis</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Sekyed u sermes CSS </a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Sekyed amesseflid n tidyanin </a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Smahil s timeku</a><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">ḍ</a><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">tin </a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Sermes tistayin CSS </a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">Beqqe</a><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">ḍ tugniwin n ugidal</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Seqdec amasma</a><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">ḍ seg tadiwent n Web </a></li> +</ul> +</div> + +<hr> +<h2 id="Tamselɣut">Tamselɣut</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Anegzum s anasiw </a></li> + <li><a href="/en-US/docs/Tools/Tools_Toolbox#Inspector">I</a><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">ɣ</a><a href="/en-US/docs/Tools/Tools_Toolbox#Inspector">ewwaren </a></li> +</ul> +</div> diff --git a/files/kab/tools/performance/index.html b/files/kab/tools/performance/index.html new file mode 100644 index 0000000000..b3a9fa4436 --- /dev/null +++ b/files/kab/tools/performance/index.html @@ -0,0 +1,94 @@ +--- +title: Tamellit +slug: Tools/Performance +translation_of: Tools/Performance +--- +<p>Afecku tamellit yettak-awend tamuɣli ɣef tasedmirt tamatut,n JavaScript ed timellal n usali asebtar.ad snulfuḍ asekles,naɣ amaɣnu,n wasmel innek deg yiwet n talit n wakud.afecku yagi yeskanay-ak-id <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">tamuɣli tamatut </a>n wayen id yefɣen seg iminig ɣer samaɣnu innek ed tudlift n<a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Frame_rate"> usnagar n tugna </a>ɣer umaɣnu.</p> + +<p>Ad ḥelim kṛad n adahil-ifecka iw sekyed n uger deg lulleḍ n timeẓra n umaɣnu:</p> + +<ul> + <li>The<a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall"> Waterfall</a> yeskanay-ed timhalin timeẓliyin yettwagan sɣuṛ iminig,am uselkem n adahil n usebtar, a JavaScript,aten yejgger d uleqwaḍ n iḍuman</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Call_Tree">Aseklu n usiwel</a> yeskanay tiseɣnin n JavaScript ideg iminig yesɛada amur meqṛan n wakud</li> + <li>Tafelwit <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Flame_Chart">Flame ibeqqeḍ</a> tasemdit usiwel JavaScript di tiddin usekles</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Allocations">Iḥeṛṛiyen </a>n iẓṛi ibeqqeḍ iḥeṛṛiyen i tgiḍ s tangalt deg tiddin usekles.timeẓṛiwt agi tettbaned ḥaca ma trecmeḍ «Assayla n usekles» deg iɣewwaren n ufecku tamellit</li> +</ul> + +<p>{{EmbedYouTube("WBmttwfA_k8")}}</p> + +<hr> +<h2 id="Bdut">Bdut</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/UI_Tour">Tirza</a></dt> + <dd> + <p>Iw akken attafeḍ abrid-ik ger ifecka n tamellit,hattan yiwet n tirza taruradt n agrudem uqedac.</p> + </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/How_to">Amek</a></dt> + <dd>Tawuri n taffa:llit afecku,snulfut-ed,skelset,zdem u swel iseklasen.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Isegran_ufecku_n_tamellit">Isegran ufecku n tamellit</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Atug n tugniwin</a></dt> + <dd>Gzu tassedmart tablulaɣt n asmel innek</dd> + <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Aseklu usiwel </a></dt> + <dd>Amḍiq n waxneq deg JavaScript n usmel innek.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Allocations">Aḥeṛṛi</a></dt> + <dd>Sikked iḥeṛṛiyen uqqemen sɣuṛ tangalt deg sekles i teddun</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Aceṛcuṛ</a></dt> + <dd>Gzu leqdic ig ga iminig ma yilli uqedac yermed akked asmel innek</dd> + <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt> + <dd>ẓeṛ anti tiseɣnin JavaScript ig llan akka tura deg selkem u melmi,deg sekles i teddun</dd> + <dd> </dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Senaṛyu">Senaṛyu</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Amray n wayla CSS </a></dt> + <dd>Seqdec aceṛcuṛ iw akken a tegzuḍ amek iminig yemucced asebtar u amek amray n imezli n CSS yezmer ad i sikec timellal.</dd> + <dd> </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Adewwas n JavaScript</a></dt> + <dd>Seqdec awlelleɣ ed ifecka Waterfall iw akken a tereḍ s timunin uguren n timellal yesmentel JavaScript i teddun,u amak aseqdec n iqedacen ad yefkk tallat deg asurs</dd> +</dl> +</div> +</div> + +<p> </p> + +<div class="column-half"> +<dl> + <dd> </dd> +</dl> +</div> + +<p> </p> diff --git a/files/kab/tools/tadiwent_web/index.html b/files/kab/tools/tadiwent_web/index.html new file mode 100644 index 0000000000..dba737cb25 --- /dev/null +++ b/files/kab/tools/tadiwent_web/index.html @@ -0,0 +1,37 @@ +--- +title: Tadiwent n Web +slug: Tools/Tadiwent_Web +translation_of: Tools/Web_Console +--- +<p>Tadiwent n Web:</p> + +<ol> + <li>Sekles isalen icuden ɣer s asebtar n Web:suter azeṭṭa,JavaScript,CSS,tiniwitin n taɣlist d iɣtalen akked daɣen inzan n iniwiten,n waɣtal ed isalen ideg yeszwar usekles innes s tangalt n JavaScript yettuselkem deg usatal n usebtar.</li> + <li>Ak teǧǧ agereg akked asebtar n Web s uselkem n tinfaliyin JavaScript deg tawennaṭ u sebtar.</li> +</ol> + +<p>{{EmbedYouTube("C6Cyrpkb25k")}} </p> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Web_Console/Opening_the_Web_Console">Alday n tadiwent Web </a></dt> + <dd>Amek ara tesqedcem tadiwent Web.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">Amsuɣel n izirig anezḍay </a></dt> + <dd>Amek ara n amyermed a zzmam s tallat n tadiwent.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Split_console">Tadiwent Split </a></dt> + <dd>Sqedcet tadiwent ar tama n allalen nniḍen.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Web_Console/Console_messages">Tadiwent n iznan </a></dt> + <dd>Asulleḍ n iznan i tesekles tadiwent.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Rich_output">Tufɣa tanesbaɣurt</a></dt> + <dd>Ẓaṛ u myermed s tiɣawsiwin i ttuskelsen sɣuṛ tadiwent.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Keyboard_shortcuts">Anegzum s anasiw</a></dt> + <dd>Tamselɣut unegzum.</dd> +</dl> +</div> +</div> diff --git a/files/kab/web/api/index.html b/files/kab/web/api/index.html new file mode 100644 index 0000000000..15d520ee8c --- /dev/null +++ b/files/kab/web/api/index.html @@ -0,0 +1,8 @@ +--- +title: Web APIs +slug: Web/API +translation_of: Web/API +--- +<p>Mara tettwaru tangalt deg Web s JavaScript,aṭas n (API) agrudem n usihel n yesnasen i yellan.ad d-tafeḍ sddaw-a umuɣ n meṛṛa umuɣen (ubayen inawen n tiɣawsiwin)i tzemreḍ ad tesqedceḍ mara tesnefliḍ asnas n wen Web neɣ asmel.</p> + +<p>Web APIs ttwasqedcen s waṭas di JavaScript, ɣas ma tikwal mačči akken i yella.</p> diff --git a/files/kab/web/css/index.html b/files/kab/web/css/index.html new file mode 100644 index 0000000000..c48087aae6 --- /dev/null +++ b/files/kab/web/css/index.html @@ -0,0 +1,58 @@ +--- +title: CSS +slug: Web/CSS +translation_of: Web/CSS +--- +<p><span class="seoSummary"><strong>Tiferkiyin n uɣanib s udabder </strong>(<strong>CSS</strong>) d tutlayt ittwaseqdacen deg uglam n isemli yuran s <a href="/en-US/docs/HTML" title="HyperText Markup Language">HTML</a></span> neɣ <a href="/en-US/docs/XML">XML</a> (ula d timeslayin-nniḍen XML am <a href="/en-US/docs/SVG">SVG</a> neɣ <a href="/en-US/docs/XHTML">XHTML</a>). CSS yettmuddu aglam ɣef amek iferdisen ad d-banen deg ugdil, di lkaɣeḍ, deg umeslay, neɣ allal nniḍen n teɣwalt.</p> + +<p>CSS d yiwet seg tutlyin tigejdanin n web yeldin , ɣur-s tizeɣt <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>. Yettwasnefli s yeswiren, CSS1 tura d aqbuṛ, CSS2.1 d aweṣṣi, <a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>, tura yebḍa ɣef izegriren meẓẓiyen, mazal tettnerni tizeɣt-ines.</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>Tamselɣut CSS</span> + + <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">Tamselɣut tunguzt</a> i yineflayen iḥarcen n Web yemmalen yal ayla d tamiḍrant n CSS.</p> + </li> + <li><span>Aṭuturyal CSS</span> + <p><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Tazwart ta ɣer ta</a> i wakken ad tili tallat i yinelmaden ad ddun ɣur-s meṛṛa imedruyen isefkken.</p> + </li> + <li><span>Imedyaten CSS3</span> + <p><a href="/en-US/demos/tag/tech:css3">Tagrumma n imedyaten </a>id yemmalen titiknulujiyin CSS iteddun: d lḥir n usnulfu.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Tasemlit_akked_iṭuṭuryal">Tasemlit akked iṭuṭuryal</h2> + +<dl> + <dt>Tiktiwin tisura n CSS</dt> + <dd>Amek gan<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax"> taseddast d talɣa n tutlayt</a><a href="/en-US/docs/CSS/Syntax"> </a>usekcem imedruyen am <a href="/en-US/docs/CSS/Specificity">tulmist </a>d <a href="/en-US/docs/CSS/inheritance">tukkest</a>, <a href="/en-US/docs/CSS/box_model">amedya n tanaka</a> d <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">ɣaluy n tanamda</a>, <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">asismmed</a> d <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">tirrin n ihder talɣa</a>, neɣ <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value">azalen imezwura</a> ,<a href="https://developer.mozilla.org/en-US/docs/CSS/computed_value">ttwasiḍnan</a> ,<a href="https://developer.mozilla.org/en-US/docs/CSS/used_value"> ttwasqedcen</a> , u deg <a href="https://developer.mozilla.org/en-US/docs/CSS/actual_value">amiran </a>. Ifendasen am <a href="https://developer.mozilla.org/en-US/docs/CSS/Shorthand_properties">ayla igzulen CSS</a> i yellan daɣen tettusbadu.</dd> + <dt><a href="/en-US/docs/Web/Guide/CSS">Amnir n tneflit CSS</a></dt> + <dd>D alugen ara wen-d ifkken tallat i yal almmad,timiḍanin n uɣanib HTML ɣer titiknikitin CSS yemezggen i wakken ad yemecbereq ugbur inek.</dd> + <dt><a href="/en-US/docs/Web/CSS/Common_CSS_Questions">Isteqsiyen id-yettuɣalen ɣef CSS</a></dt> + <dd>Tirirtin i tuttriwin id ittuɣalen ɣef CSS.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="Ifecka_n_tneflit_CSS">Ifecka n tneflit CSS</h2> + +<ul> + <li><a href="http://jigsaw.w3.org/css-validator/">Tawalt n usaɣbal CSS ed W3C </a>sdaddet ma CSS d aɣbal.tawalt <a href="http://www.onlinewebcheck.com/">OnlineWebCheck.com</a> kifkif-it.d ifecka n tacaggart ur nuklal.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools">Ifecka usnefli n Firefox </a>ttaǧǧan askan d ubeddel n i CSS srid seg sebtar sɣuṛ ifecka <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector"> Inspector</a> d <a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor">Style Editor</a>.</li> + <li><a href="https://addons.mozilla.org/en-US/firefox/addon/1843">asiɣzef Firebug</a><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843"> </a>i Firefox, d asiɣzef aɣerfan n iminig agi ig ttaǧǧan abeddel n CSS srid seg ismal ittwaɛsan.dayen ilhan iw sadez n kra ubeddel,ɣas akken asiɣzef agi tetteg ugar n waya.</li> + <li><a href="https://addons.mozilla.org/en-US/firefox/addon/1843">asiɣzef n Web aneflay</a> yettaǧǧa daɣen awali d ubeddel n CSS srid seg wasmal yettwaɛusen.d afrari am Firebug,maca d anezmar ciṭ.</li> + <li><a href="/en-US/docs/Web/CSS/Tools">Ifecka nniḍen Anir iw Mezwar. </a></li> +</ul> +</div> +</div> +</section> + +<h2 id="Wali_daɣen">Wali daɣen</h2> + +<ul> + <li> <a href="https://developer.mozilla.org/en-US/docs/Web/Demos_of_open_web_technologies#CSS">Tadala u selmmed CSS</a> n Mozilla</li> + <li>Tutlayin n Web CSS yeldin i: <a href="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/XHTML">XHTML</a> d <a href="/en-US/docs/XML">XML</a>.</li> + <li>Titiknulujitin n Mozilla ig seqdacen s waṭas isiɣzefen d isentalen CSS: <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/en-US/Firefox">Firefox</a>, d <a href="/en-US/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/en-US/docs/Extensions">extensions</a> d <a href="/en-US/Add-ons/Themes">themes</a>.</li> +</ul> diff --git a/files/kab/web/css/tools/index.html b/files/kab/web/css/tools/index.html new file mode 100644 index 0000000000..e6c48df28f --- /dev/null +++ b/files/kab/web/css/tools/index.html @@ -0,0 +1,26 @@ +--- +title: Tools +slug: Web/CSS/Tools +translation_of: Web/CSS/Tools +--- +<div> </div> + +<p>CSS yettak-ed kra n tiseɣnatin tinezmarin ig waɛṛen iw seqdec,ideg kra iɣewwaren,iw akken ad iwulem u ad yizmir timeẓiwt ed leqdic-is.asebtar agi i neced iseɣwen ɣer kra ifecka iwulmen ara wen-id yawin tallat deg salay n CSS iw akken ad yilli usugen n ugbur s useqdec n tiseɣnatin.</p> + +<p>{{LandingPageListSubpages}}</p> + +<h2 id="Ifecka_nniḍen">Ifecka nniḍen</h2> + +<ul> + <li> + <h4 id="Tamekfaḍut_CSS-Aɣanib">Tamekfaḍut CSS-<a href="http://jeremyckahn.github.io/stylie/">Aɣanib</a></h4> + </li> + <li>Iw akken an daddet isalen n ubeqqeḍ n ucermaḍ (iwulmen deg {{Glossary("responsive web design")}}) <a href="http://mydevice.io">mydevice.io</a></li> + <li>Umuɣen CSS - <a href="http://cssmenumaker.com/">cssmenumaker.com</a></li> +</ul> + +<h2 id="Wali_ugar">Wali ugar</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></li> +</ul> diff --git a/files/kab/web/guide/graphics/index.html b/files/kab/web/guide/graphics/index.html new file mode 100644 index 0000000000..598befb173 --- /dev/null +++ b/files/kab/web/guide/graphics/index.html @@ -0,0 +1,39 @@ +--- +title: Tudlift deg Web +slug: Web/Guide/Graphics +translation_of: Web/Guide/Graphics +--- +<p>Isnasen d ismal n Web atraren tikwal rran ad d-seknen isedlefen n umerkid.ma-d askan afrari n tiwlafin tidmestin zemrent ad d-ttusseḍrunt s tallalt n ticṛeṭ <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">img</a>.neɣ s uslugen n ugilal iferdisen HTML akked d wayla n :<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-image">background-image (amucceḍ-tugna)</a> tzemreḍ daɣen ad ttesaliḍ s tufga,neɣ ad tesfyutḥeḍ tugniwin seltiyita.imagraden-agi sddaw-a ttaken-d yiwet n tmuɣli ideg tzemreḍ ad tt-sedduḍ aya. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-image"> </a></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Tudliftin_2D">Tudliftin 2D</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Canvas">S tinniɣet s Canvas </a></dt> + <dd>Aferdis HTMLElement Canvas yettak-d API i usinniɣ n tudliftin n 2D s tallalt n JavaScript.</dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> + <dd>yettaǧǧa-k ad tesqedceḍ izrugen,iknayen d kra n tudlifin tanszeggit i usinneɣ.tiwlafin SVG ur llint ad d-ttiwlafin tisirewtan,sfelent ad neg tiwlafin astusektan war abadu.</dd> +</dl> + +<p> <span class="alllinks"><a href="/en-US/docs/tag/Graphics"> Wali uger...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Tudliftin_3D">Tudliftin 3D</h2> + +<dl> + <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd>Amnir n wactel ɣer WebGL,tudlift 3D n API i Web.tatiknulujit-agi tesfelawen aseqdec OpenGL ES ameslugen deg agbur n Web.</dd> +</dl> + +<h2 id="Tavidiyut">Tavidiyut</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Aseqdec n HTML5 imesli ed tavidiyut </a></dt> + <dd>Aseɣred n tvidyut d/neɣ imesli deg usebtar n Web d anɣad n tɣuri.</dd> + <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt> + <dd>RTC deg WebRTC anamek-is Real-Time Communications, tatiknulujit i sfelen astreaming imesli/tavidyut d beṭṭu isefka gar inemyar n iminig (tiyugiwin).</dd> +</dl> +</div> +</div> diff --git a/files/kab/web/guide/index.html b/files/kab/web/guide/index.html new file mode 100644 index 0000000000..de51088a0b --- /dev/null +++ b/files/kab/web/guide/index.html @@ -0,0 +1,56 @@ +--- +title: Amnir n usnifel n Web +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +<p><span class="seoSummary"><strong>These articles provide how-to information to help you make use of specific technologies and APIs.</strong></span></p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Learn/HTML">HTML Learning Area</a></dt> + <dd class="landingPageList"><strong>HyperText Markup Language (HTML)</strong> is the core language of nearly all Web content. Most of what you see on screen in your browser is described, fundamentally, using HTML.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Learn/CSS">CSS Learning Area</a></dt> + <dd class="landingPageList">Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events">Events developer guide</a></dt> + <dd class="landingPageList">Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics">Graphics on the Web</a></dt> + <dd class="landingPageList">Modern Web sites and applications often need to present graphics of varying sophistication.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API">Guide to Web APIs</a></dt> + <dd class="landingPageList">A list of all Web APIs and what they do.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt> + <dd>JavaScript is the powerful scripting language used to create applications for the Web.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Localizations_and_character_encodings">Localizations and character encodings</a></dt> + <dd class="landingPageList">Browsers process text as Unicode internally. However, a way of representing characters in terms of bytes (character encoding) is used for transferring text over the network to the browser. The <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">HTML specification recommends the use of the UTF-8 encoding</a> (which can represent all of Unicode), and regardless of the encoding used requires Web content to declare that encoding.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile">Mobile Web Development</a></dt> + <dd class="landingPageList">This page provides an overview of some of the main techniques needed to design web sites that work well on mobile devices. If you're looking for information on Mozilla's Firefox OS project, see the <a href="https://developer.mozilla.org/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a> page. Or you might be interested in details about <a href="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android">Firefox for Android</a>.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance">Optimization and performance</a></dt> + <dd class="landingPageList">When building modern Web apps and sites, it's important to make your content work quickly and efficiently. This lets it perform effectively for both powerful desktop systems and weaker handheld devices.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a></dt> + <dd class="landingPageList">The Web platform provides different methods of parsing and serializing XML, each with its own pros and cons.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF">The Web Open Font Format (WOFF)</a></dt> + <dd class="landingPageList"><strong>WOFF</strong> (<strong>Web Open Font Format</strong>) is a font file format that is free for anyone to use on the web.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">Using FormData Objects</a></dt> + <dd class="landingPageList">The <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> object lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. It's primarily intended for sending form data, but can be used independently from forms in order to transmit keyed data. The transmission is in the same format that the form's <code>submit()</code> method would use to send the data if the form's encoding type were set to "multipart/form-data".</dd> + <dt class="landingPageList"><a href="/en-US/docs/Glossary">Glossary</a></dt> + <dd class="landingPageList">Defines numerous technical terms related to the Web and Internet.</dd> +</dl> +</div> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li> +</ul> diff --git a/files/kab/web/html/index.html b/files/kab/web/html/index.html new file mode 100644 index 0000000000..7708015319 --- /dev/null +++ b/files/kab/web/html/index.html @@ -0,0 +1,74 @@ +--- +title: HTML +slug: Web/HTML +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p><strong>HTML</strong> anamek-ines « HyperText Markup Language » s yinezmer ad d-nsuqqel s « tutlayt n tṛekkizin i uflaḍris ». Yettuseqdac akken ad d-yernu neɣ ad d-yesken agbur n usebter web. D ayen i d-yemmalen agbur akked uskan azadur n usebter web acu kan s war timahilin-ines. Deffir HTML, llant tetiknulujiyin nniḍen yettuseqdacen i wuglam n urwes n isebtar (<a href="/en-US/docs/Web/CSS">CSS</a>) neɣ timahilin (<a href="/en-US/docs/Web/JavaScript">JavaScript</a>).</p> + +<p>HTML iteddu s tmerna n tṛekkizin deg uḍris amagnu. Yal taṛekkizt temmal-d iḥder n uḍris deg wesmel. Dagi nettmeslay-d ɣef "Aflaḍris" icudden ar iseɣwan iteqqnen isebtar web gar-asen. Ametwi-agi d aẓar n "World Wide Web" i nessen ass-a. S tira d usuffeɣ n isebtar web, tuɣaleḍ d asegbar n Web ticki asmel-inek yettwakcam s srid.</p> + +<p>TML yessirig aseddu n tugniwin akked igburen nniḍen deg isebtar web.<br> + S useqdec n HTML, yal yiwen yezmer ad yernu ismal web ama d usbiḍen neɣ d ismussanen. HTML d tutlayt n uglam n tɣessa akked d ugbur n tesnumka n yisemli web. Agbur-agi yettwaṛkez s iferdisen HTML am {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, neɣ wiyaḍ. Iferdisen-agi sdukkulen iḥedran ara d-yessalin asmel web.</p> + +<p>Imagraden-agi ddaw-a ak-d-mudden tallalt akken ad tissineḍ ugar ɣef HTML.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>Tamsisɣelt HTML</span> + + <p>Di <a href="/en-US/docs/Web/HTML/Reference">temsisɣelt nneɣ leqqayen</a>, ad d-tafeḍ talqayt ɣef yal aferdis ad imyerr s HTML.</p> + </li> + <li><span>Amnir HTML</span> + <p>Ɣef imagraden n useqdec n HTML, neɣ iṭuṭuryalen akked imedyaten ummiden, wali <a href="/en-US/docs/Web/Guide/HTML">amnir-nneɣ n tneflit HTML</a>.</p> + </li> + <li><span>Tazwart ar HTML</span> + <p>Ma yella akken kan tebdiḍ di tneflit Web,ɛreḍ di <a href="/en-US/docs/Web/Guide/HTML">tazwart-nneɣ </a> ɣef HTML u diɣ amek ara tesqedceḍ.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Timsisɣal">Timsisɣal</h2> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Element">Tamsisɣel n iferdisen HTML</a></dt> + <dd class="landingPageList">Asebtar-agi ibder-d akk iferdisen <a class="glossaryLink" href="/en-US/docs/Glossary/HTML">HTML</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Reference">Tamsiɣelt HTML</a></dt> + <dd class="landingPageList">HTML d tutlayt n uglam n ugbur n tɣessa akked tesnumka n isemli Web; d ayen yebnan ɣef <strong>iferdisen</strong>, yal yiwen s imyerren-ines.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Inline_elements">Iferdisen n izirig</a></dt> + <dd class="landingPageList">Iferdisen HTML (Hypertext Markup Language) tuget-nsen d iferdisen n"izirigen" neɣ d iferdisen n iḥedran. Aferdis n izirig yeṭṭef kan yiwen n umḍiq gar snat n tlisa ara yesbadun aferdis-agi.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Block-level_elements">Iferdisen n iḥder</a></dt> + <dd class="landingPageList">Iferdisen HTML (Hypertext Markup Language) n yiḥder n iferdisen n yiḥder neɣ n izirig. Aferdis n yiḥder yeṭṭef akk amḍiq n uferdis-ines asaraw (amagbar). Ihi ttawin akk imeḍqan n imagbaren-nsen.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">Tugna turmedt n CORS </a></dt> + <dd class="landingPageList">Imyerr HTML <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a> mara yedukkel akked iqeṛṛa iwulmen yettak i tugniwin yettwafernen sɣuṛ uferdis {{HTMLElement("img")}} akken ad d-ttwasidren seg yidisan ijenṭṭaḍen u ara yettwasqedcen deg uferdis {{HTMLElement("canvas")}} am akken ttwasiren-d seg yidis-agi yellan akka tura.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">Imyerren n iɣewwaṛen CORS</a></dt> + <dd class="landingPageList">deg HTML5,kra n iferdisen HTML i yettawin <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a>,am <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img"><img></a> neɣ <video> ,deg wayla crossorigin (ayla n crossorigin),ad ken-yeǧǧen ad yetawilan tuttriwin CORS i yisefka i ttwaksen seg uferdis.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Focus_management_in_HTML">Asefrek n usḍas di HTML</a></dt> + <dd class="landingPageList">deg akeẓiẓ n umahil HTML5,ayla DOM <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement">activeElement </a>d tarrayt DOM<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus"> hasFocus ()</a> ttmuddunt i ufreɣẓan asẓubeẓ ad yesɛu asenqad iggerzen n amyermud n usebtar ɣef ddema n tigin uqedac. Amedya,sin-agi zemren ad ttwaqeddcen i lmmend u seqdec n tadaddant,aḍfaṛ n imḍanen ikliken deg kra n iseɣwen usebtar,aktili n wakud uferdis yesaḍes,ar taggara.daɣen,mara msuddsen akked tatiknulujit AJAX,ttaken tallat i usedres n umḍan usuter ittwaznen s aqeddac,s tasɣant n urmud useqdac n tarit usebtar.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Global_attributes">Imyerren imuta</a></dt> + <dd class="landingPageList">Iylaten iblulaɣen zemren ad d-illin d ttulmisen ɣef meṛṛa<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element"> iferdisen HTML</a>,ula d widen ur nettulmisen ara deg tagnut.ayagi ibɣa ad d-yinni d-akken yal aferdis ur nelli d ameslug yessefk ad yeǧǧ iylaten-agi, ɣas akken aseqdec n iferdisen-agi rran ad mmlen d-akken tateggart ur yemṣada d HTML5.Amedya ,iminigen imṣadan HTML5 ttefren agbur yuran <foo hidden> ... <foo>,ɣas ma <foo> ur yelli d aferdis HTML aɣbal.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Attributes">Tamsisɣelt n imyerren HTML</a></dt> + <dd class="landingPageList">Iferdisen di HTML ɣur-sen imyerren; d azalen nniḍen i yesbadun iferdisen neɣ ad seggmen tikli s iberdan yemgaraden akken ad ddun isebdaden i yebɣan iseqdacen.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Link_types">Anawen n iseɣwan</a></dt> + <dd class="landingPageList">Di HTML, anawen-agi n iseɣwan mmalen-d assaɣ gar sin n yisemliyen, anda yiwen deg-sen iccud ar wayeḍ s useqdec n uferdis <a href="/en-US/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/en-US/docs/Web/HTML/Element/area"><code><area></code></a>, neɣ <a href="/en-US/docs/Web/HTML/Element/link"><code><link></code></a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Supported_media_formats">Imasalen n wallalen n teɣwalt imeslawen n tividyutin isefrak HTML</a></dt> + <dd class="landingPageList">Iferdisen <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio"><audio></a> d<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video"> <vidéo></a> ttaǧǧan taɣuri n tannalin imesli d tvidyut s war plug-ins..</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Using_the_application_cache">Aseqdec n tuffirt n usnas</a></dt> + <dd class="landingPageList">HTML5 yettakk-d tasmekanikit tufra n usnas i yettaǧǧan isnasen Web ad ttuselkemen beṛṛa n izirig.imesnefliyen zemren ad sqedcen agrudem asnas Cache (AppCache) i usulmis i tiɣbula ideg iminig ad ten yerr Cache u ad yerr anamal i yiqedacen beṛṛa n tuqqna.isnasen i yersen deg Cache ččuṛent u teddun akken iwata ɣas ma yella iqedacen tekayen ɣef tqefalt n ummuceḍ mara yilin beṛṛa n tuqqna.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/HTML">Wali ugar...</a></span></p> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">Imniren akked iṭuṭuriyal</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML">Amnir n tneflit HTML</a></dt> + <dd>Imagraden MDN skanayen-d titiknikitin tulmisin i tzemrem ad tesqedcem mara tessalim agbur Web s HTML,akked daɣen ilmedẓanen d kra n titeggarin ara d-afem degs talilt.amnir d win ara wen-d yefkken timsirin n tira,iseqquma d isalen ɣef tneflit n HTML.</dd> +</dl> +</div> +</div> +</section> diff --git a/files/kab/web/http/index.html b/files/kab/web/http/index.html new file mode 100644 index 0000000000..bcb8ed269a --- /dev/null +++ b/files/kab/web/http/index.html @@ -0,0 +1,77 @@ +--- +title: HTTP +slug: Web/HTTP +translation_of: Web/HTTP +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong><dfn>Aneggaf HTTP </dfn></strong></span><strong>(</strong><span class="seoSummary"><strong><dfn>Hypertext Transfer Protocol)</dfn></strong> d-aneggaf n yisnasen is an <a class="external" href="https://en.wikipedia.org/wiki/Application_Layer">application-layer</a> protocol for transmitting hypermedia documents, such as HTML.</span> It was designed for communication between web browsers and web servers, but it can also be used for other purposes. HTTP follows a classical <a class="external" href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model">client-server model</a>, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a <a class="external" href="https://en.wikipedia.org/wiki/Stateless_protocol">stateless protocol</a>, meaning that the server does not keep any data (state) between two requests. Though often based on a TCP/IP layer, it can be used on any reliable <a class="external" href="http://en.wikipedia.org/wiki/Transport_Layer">transport layer</a>; that is, a protocol that doesn't lose messages silently, such as UDP.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Ituṭuryalen">Ituṭuryalen</h2> + +<p>Af-d amek ara tesqedceḍ imniren d ituṭuryalen.</p> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt> + <dd>The basic features of the client-server protocol: what it can do and its intended uses.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Caching">HTTP Cache</a></dt> + <dd>Caching is very important for fast Web sites. This article describes different methods of caching and how to use HTTP Headers to control them.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Cookies">HTTP Cookies</a></dt> + <dd>How cookies work is defined by <a class="external" href="http://tools.ietf.org/html/rfc6265">RFC 6265</a>. When serving an HTTP request, a server can send a <code>Set-Cookie</code> HTTP header with the response. The client then returns the cookie's value with every request to the same server in the form of a <code>Cookie</code> request header. The cookie can also be set to expire on a certain date, or restricted to a specific domain and path.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP Access Control (CORS)</a></dt> + <dd><strong>Cross-site HTTP requests</strong> are HTTP requests for resources from a <strong>different domain</strong> than the domain of the resource making the request. For instance, an HTML page from Domain A (<code>http://domaina.example/</code>) makes a request for an image on Domain B (<code>http://domainb.foo/image.jpg</code>) via the <code>img</code> element. Web pages today very commonly load cross-site resources, including CSS stylesheets, images, scripts, and other resources. CORS allows web developers to control how their site reacts to cross-site requests.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt> + <dd>A brief description of the changes between the early versions of HTTP, to the modern HTTP/2 and beyond.</dd> + <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Mozilla web security guidelines</a></dt> + <dd>A collection of tips to help operational teams with creating secure web applications.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt> + <dd>Describes the type and structure of the different kind of messages of HTTP/1.x and HTTP/2.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Session">A typical HTTP session</a></dt> + <dd>Shows and explains the flow of a usual HTTP session.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt> + <dd>Describes the three connection management models available in HTTP/1.x, their strengths, and their weaknesses.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Timselɣa">Timselɣa</h2> + +<p>Snirem tumlin n timselɣa leqqayen n HTTP.</p> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Headers">HTTP Headers</a></dt> + <dd>HTTP message headers are used to describe a resource, or the behavior of the server or the client. Custom proprietary headers can be added using the <code>X-</code> prefix; others in an <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, whose original content was defined in <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">registry of proposed new HTTP message headers</a>.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Methods">HTTP Request Methods</a></dt> + <dd>The different operations that can be done with HTTP: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, and also less common requests like {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, or {{HTTPMethod("TRACE")}}.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Response_codes">HTTP Status Response Codes</a></dt> + <dd>HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">CSP directives</a></dt> + <dd>The {{HTTPHeader("Content-Security-Policy")}} response header fields allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.</dd> +</dl> + +<h2 id="Ifecka_iɣbula">Ifecka & iɣbula</h2> + +<p>Helpful tools and resources for understanding and debugging HTTP.</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="/en-US/docs/Tools/Network_Monitor">Network monitor</a></dd> + <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt> + <dd> + <p>A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.</p> + </dd> + <dt><a class="external" href="https://redbot.org/">RedBot</a></dt> + <dd>Tools to check your cache-related headers</dd> + <dt><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt> + <dd>A very comprehensive article on browser internals and request flow through HTTP protocol. A MUST-READ for any web developer.</dd> +</dl> +</div> +</div> diff --git a/files/kab/web/index.html b/files/kab/web/index.html new file mode 100644 index 0000000000..b018aaf6cc --- /dev/null +++ b/files/kab/web/index.html @@ -0,0 +1,85 @@ +--- +title: Tatiknulujit web i yineflayen +slug: Web +tags: + - Landing + - NeedsTranslation + - TopicStub + - Web + - Web Development +translation_of: Web +--- +<p>Agama yeldin n World Wide Web yettak-d deqs n tignatin isewhamen i yimdanen yebɣan ad d-snulfun agbur neɣ isnasen s srid. Akken ad tfaṛseḍ tagnitt iwatan seg tezmert n Web,issefk ad tissineḍ amek ara ten-tesqedceḍ. Wali iseɣwan-agi ddaw-a akken ad tissineḍ ugar ɣef titiknulujiyin Web.</p> + +<p><strong>Titiknulujiyin n Web</strong></p> + +<div class="row topicpage-table"> +<div class="section"> +<h3 id="Azadur">Azadur</h3> + +<dl> + <dt><a href="/en-US/docs/Web/HTML">HTML</a></dt> + <dd><strong>HyperText Markup Language (HTML)</strong> D tutlayt yettswasqedcen i useglem d usdabu n ugbuṛ n usebter web.</dd> + <dt><a href="/en-US/docs/Web/CSS">CSS</a></dt> + <dd><strong>Cascading Style Sheets (CSS)</strong> Isebtar n uɣanib acercuṛ ttwasqedcen i useglem n tagamett n ugbuṛ di web.</dd> + <dt><a href="/en-US/docs/Web/HTTP">HTTP</a></dt> + <dd>Hypertext Transfer Protocol (HTTP) d aneggaf n tissi n asnas i tuzna n isemliyen afelmedia,am HTML.</dd> +</dl> + +<h3 id="Tira_n_Iskripten">Tira n Iskripten</h3> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">JavaScript</a></dt> + <dd><strong>JavaScript</strong> d tutlayt n usihel i teddun deg iminig.yezmer ad ittwaseqdec i tmerna n umyermud ɣer yismal n web akked isnasen.</dd> +</dl> + +<ul> + <li>A<a href="/en-US/docs/Web/API" title="/en-US/docs/Web/API"> Web APIs </a><strong>Isnasen agrudemawen tamseɣut</strong>— Tamselɣunt agrudem s umuɣ yal taswi n taɣawsa itzemreḍ ad tesqedceḍ deg usnefli i web</li> + <li>A <a href="/en-US/docs/WebAPI">Web API asebter </a>Smuɣed meṛṛa tiɣwula,uduf arrum d APIs nniḍen i tzemreḍ ad tesqedceḍ deg isnasen web</li> + <li> <a href="https://developer.mozilla.org/en-US/docs/Web/Events">Tamselɣunt n tadyant</a>. Tamseɣut Event tesmuɣud meṛṛa tidyanin i tzemreḍ ad tesqedceḍ deg uḍfaṛ u ad tesdemreḍ ɣef tiɣawsiwin ilhan i yellan deg isebtar web neɣ asnas.</li> +</ul> + +<dl> + <dt><a href="/en-US/docs/Web/Reference/API">Web APIs</a></dt> + <dd><strong>Web Application Programming Interfaces </strong>(Web APIs) agrudem usihel n isnasen web (API) ttwasqedcen i useddu n waṭas n tiwura,am useqdec n DOM,taɣuṛi timesliwt neɣ vidiyu,neɣ tasuta n usedlef 3D.</dd> +</dl> + +<h3 id="Idlifen">Idlifen</h3> + +<dl> + <dt><a href="/en-US/docs/SVG">SVG</a></dt> + <dd><strong>Scalable Vector Graphics (SVG)</strong> ad ken yanef ad tegleḍ tugnawin am tigrumma n imawayen (izrugen) d talɣiwin i akken ad-as teǧǧ asikel s ttawil d illeli seg tiddi i deg ttwasunɣen.</dd> + <dt><a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd><strong>WebGL</strong> d JavaScript API ak-yanef ad tesunɣeḍ isedlifen 3D neɣ 2D s tallalt n uferdis HTML5 {{HTMLElement("canvas")}} element.Tatiknulujit-agi ak-teǧǧ ad tesqedceḍ OpenGL ES ameslugen deg ugbur n Web.</dd> +</dl> + +<h3 id="Ayen-nniḍen">Ayen-nniḍen</h3> + +<dl> + <dt><a href="/en-US/docs/Web/MathML">MathML</a></dt> + <dd><strong>Mathematical Markup Language (MathML) (Tutlayt n tarusi tusnakt)</strong> ad yeǧǧ askan n tamesmat tusnakt isemlalen d taseddast.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Tiɣula_n_uselmed">Tiɣula n uselmed</h2> + +<dl> + <dt><a href="/en-US/docs/Learn">Aselmed n usnefli n web </a></dt> + <dd>Tagrumma-agi n imagraden tejajjaw i yimsizwir anguz d wayen ḥwaǧen i wesnefli n web d beddu usengel n ismal web.</dd> +</dl> + +<h2 id="Isental-nniḍen">Isental-nniḍen</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Apps">Asnefli n isnasen web </a></dt> + <dd>Titeggartin i yimsefliyen n isnasen web; isnasen n web d isnasen n tidett deg tira d asuf,asersi-ines di yal tama i yisnasen uziraz, agalis d Firefox.</dd> + <dt><a href="/en-US/docs/Web/Accessibility">Tuffart</a></dt> + <dd>Tuffart deg tneflit web anamek-is d akken aṭas n medden zemren ad sqedcen ismal web,ɣas tamussni-nsen tesbed akken yebɣu yili. dagi,nettak-d isallen ɣef taneflit n ugbuṛ web i wakken ad yuffar,</dd> + <dt><a href="/en-US/docs/Web/Security">Taɣelist</a></dt> + <dd>Senked d akken asmal web-inek neɣ asnas web yeldi u yettuɣeles.</dd> +</dl> +</div> +</div> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Web">Wali ugar...</a></span></p> diff --git a/files/kab/web/javascript/amnir/index.html b/files/kab/web/javascript/amnir/index.html new file mode 100644 index 0000000000..08f85b9cf5 --- /dev/null +++ b/files/kab/web/javascript/amnir/index.html @@ -0,0 +1,119 @@ +--- +title: Amnir n JavaScript +slug: Web/JavaScript/Amnir +translation_of: Web/JavaScript/Guide +--- +<div>{{jsSidebar("JavaScript Guide")}}</div> + +<p class="summary">Amnir n JavaScript ak-immel amek a tesqedceḍ <a href="/en-US/docs/Web/JavaScript">JavaScript</a> u ak-id yefk amek tella tutlayt.ma teḥwaǧeḍ kra n isalen,ɣef tasɣen n tutlayt,erzut ɣer tamselɣut <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a>.</p> + +<h2 id="Ixfawen">Ixfawen</h2> + +<p>Amnir agi ibḍa ɣef kra n ixfawen:</p> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Introduction">Tazwart</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">Awal ɣef amnir agi</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript">Awal ɣef JavaScript</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript d Java</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">Ifecka</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Hello_world">Azul ay Amaḍal </a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types">Tajerumt d tiwsatin</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Basic syntax & comments</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Declarations</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Variable scope</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Variable hoisting</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Data structures and types</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Literals</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Error objects</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Promises</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Defining_functions">Defining functions</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Calling_functions">Calling functions</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope">Function scope</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Closures">Closures</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Arguments</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_parameters">parameters</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Arrow functions</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Assignment</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Comparisons</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Arithmetic operators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Bitwise</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">logical operators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Conditional (ternary) operator</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a></span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Number literals</a> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> object</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting">Text formatting</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_literals">String literals</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">Template literals</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internationalization</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Arrays</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Typed arrays</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections">Keyed collections</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects">Working with objects</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Objects and properties</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Creating objects</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Defining methods</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter and setter</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Prototype-based OOP</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Creating object hierarchies</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Inheritance</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iterators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterables</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generators</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming">Meta programming</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handlers and traps</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Revocable Proxy</a><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/kab/web/javascript/index.html b/files/kab/web/javascript/index.html new file mode 100644 index 0000000000..e131f5fe61 --- /dev/null +++ b/files/kab/web/javascript/index.html @@ -0,0 +1,100 @@ +--- +title: JavaScript +slug: Web/JavaScript +translation_of: Web/JavaScript +--- +<div>{{JsSidebar}}</div> + +<p class="summary">JavaScript (js) ad tutlayt n usihel fessusen neɣ yesuɣlen sɣuṛ JIT akked {{Glossary("first-class Function", "first-class functions")}}. ɣas ma yella yettwasen s yisem n ascript i yisebtar n web, <a href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">aṭas n tiwenaḍin wer-iminigen</a> sqedcit daɣen <a class="external external-icon" href="https://nodejs.org/">node.js</a> d <a href="https://couchdb.apache.org/">Apache CouchDB</a>. JS d tutlayt {{Glossary("Prototype-based programming", "prototype-based")}}, taget-tamudemt, tutlayt tasmussant, irefden iɣunab iwelhen taɣawsa,amerwas d usalɣu (amedya,asihel amesɣan).ɣaṛ ugar <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/About_JavaScript"> ɣef JavaScript</a>.</p> + +<p>Tigezmi-agi n usmel tettmeslay-d ɣef tutlayt JavaScript, mačči ɣef yeḥricen ittekkan deg isebtar web neɣ tiwennaḍin tisenneftaɣin. Ugar n telɣut ɣef {{Glossary("API","APIs")}} n isebtar Web, wali ma ulac aɣilif <a href="/en-US/docs/Web/API">Web APIs</a> akked<a href="/en-US/docs/Glossary/DOM">DOM</a>.</p> + +<p>Tagnut i JavaScript d<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources"> ECMAScript</a>.seg 2012,meṛṛa<a href="http://kangax.github.io/compat-table/es5/"> iminigen atraren </a>zemren akken iwata i ECMAScript 5.1.ma-d iminigen iqbuṛen zemren i ECMAScript 3. ass 17 yunyu 2015,<a href="http://www.ecma-international.org/">ECMA International</a> tesissen alqqem azigrar wis sḍis n ECMAScript,iwumi sawalen s udem unṣib ECMAScript 2015,u yettwasen s yisem n ECMAScript 6 neɣ ES6. seg imiren tignutin ECMAScript ttawint ɣef tisufeɣtin useggas.tateggart-agi ɣuṛs tamselɣunt deg uleqqem asmezwar aneggaru,yellan tura akka <a href="http://tc39.github.io/ecma262/">ECMAScript 2017</a>.</p> + +<p>Ur ɣelṭ ara ger JavaScript akked<a href="https://en.wikipedia.org/wiki/Java_(programming_language)"> tutlayt n usihel Java</a>.sin-agi n «Java» d «JavaScript» d ihwalen neɣ d ihwalen yersen n Oracle deg Timura idukklen n Marikan u deg timura nniḍen.acu kan,snat-agi n tutlayin n usihel ɣursent taseddast,tanamekt d iseqdacen yemgaraden.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Ituṭuṛyalen">Ituṭuṛyalen</h2> + +<p>Lemdet amek ara tesihelem JavaScript s imniren d ituṭuṛyalen.</p> + +<h3 id="Afessas">Afessas</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">Imniren JavaScript </a></dt> + <dd>Ma yella telliḍ d amaynut deg leqdic n JavaScript,amnir- agi ak-id immel tutlayt.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">Tamuɣli tagrumma n titiknulujiyin JavaScript </a></dt> + <dd>Tazwart deg tamuɣli n JavaScript n iminig.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects">Tazwart ɣer JaγaScript taɣawsa yetaɣdan</a></dt> + <dd>Tazwart ɣer tamiḍrant n usmihel yetaɣdan taɣawsa ɣer JavaScript.</dd> +</dl> + +<h3 id="Alemmas">Alemmas</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Tazwart tamaynutt ɣer JavaScript</a></dt> + <dd>Tamuɣli i widen i ɣilen snen JavaScript.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">Tiskiwet n isefka JavaScript </a></dt> + <dd>Tamuɣli tagrumma n tiskiwetin n isefka yellan deg JavaScript.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Asidmer n tagadda d tarwast</a></dt> + <dd>JavaScript ittakk-ed kṛaḍ n timehlin yemgaraden deg asnemhel n wazal:amtawi s unerfi deg seqdec ===,amtawi yemfrazan s useqdec ==,d tarrayt {{jsxref("Global_Objects/Object/is", "Object.is()")}}.</dd> +</dl> + +<h3 id="Leqqay">Leqqay</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Tukkest ed wazrar n anegtawsit </a></dt> + <dd>Tasefrayt n tukkest n anegtawsit ur yettwagzi u ittuhebben.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Askar s tnerfi </a></dt> + <dd>Askar anerfi yesbadu ur tezmireḍ ara a tesqedceḍ amutti send awennez.wagi d alqem ukrif n ECMAScript 5,i timellal izerben d useɣtu isehlen.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">Tifelwa yettwarun sɣuṛ JavaScript</a></dt> + <dd>Tifelwa yettwarun sɣuṛ JavaScript ttakkent-d rryac akken attedduḍ ɣer isefka imisinen imezwura.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management"> Asefrek n takatut </a></dt> + <dd>allus n tudert n takatut d lqeḍ n iḍuman deg JavaScript</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop">Tamudemt tamenziɣt n Event Loop</a><a href="/en-US/docs/Web/JavaScript/EventLoop"> </a></dt> + <dd>JavaScript d tamudemt tamenziɣt yezidren ɣef yiwet n "tineddict n tgunit".</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Tamselɣut">Tamselɣut</h2> + +<p>Eɣṛet tumlin tamatut n <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">tamselɣut n JavaScript </a></p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects">Tizeɣt n taɣawsa</a></dt> + <dd>Lmed amek ara tissineḍ tiɣawsiwin tumidin tizeɣt Get to know standard built-in objects {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}}, d ugar.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Tafenfalit d imahalen </a></dt> + <dd>Issin ugar ɣef tikliwin n imahalen JavaScript {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">tazwart n umahal</a>, d ugar.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Timenna d walɣuten</a></dt> + <dd>Af-d amek {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}}, d ugar n tmenna d wawal yufraren i teddun deg JavaScript.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Tiseɣnin</a></dt> + <dd>Lemdet amek ara tgem akked tiseɣnin n JavaScript i usnefli n isnasen-nwen.</dd> +</dl> + +<h2 id="Ifecka_tiɣbula">Ifecka & tiɣbula</h2> + +<p>D allalen i wulmen i tira d useɣti n tangalt n JavaScript</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Allalen n usnefli n Firefox </a></dt> + <dd><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>, <a href="/en-US/docs/Tools/Web_Console">Web Tadiwent</a>, <a href="/en-US/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="/en-US/docs/Tools/Debugger">Debugger</a>, d ugar.</dd> + <dt><a href="http://www.getfirebug.com/">Amsarɣu</a></dt> + <dd>Sermset,seɣtit u ɛasset CSS,HTML d JavaScript srid seg yal asebtar n Web.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Shells">JavaScript Shells</a></dt> + <dd>Shell JavaScript ak-yeǧǧ d umatu atteskeydeḍ tikkas n tangalt JavaScript</dd> + <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> + <dd>A sishel n unmireg</dd> + <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Tafuli n ukufi </a></dt> + <dd>tuttriwin n tafuli i ujegger s JavaScript.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">Lqem n JavaScript ed lqem n tizmilin</a></dt> + <dd>Ddu s amazray n tiseɣnatin d waddad n wadday n JavaScript.</dd> + <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt> + <dd>Beddel JavaScript, CSS, HTML srid.seqdec iɣbula n beṛṛa uqdac deg izirig akked tarbaɛt-inek .</dd> +</dl> +</div> +</div> diff --git a/files/kab/web/mathml/index.html b/files/kab/web/mathml/index.html new file mode 100644 index 0000000000..e0287a42a3 --- /dev/null +++ b/files/kab/web/mathml/index.html @@ -0,0 +1,110 @@ +--- +title: TusnakML +slug: Web/MathML +translation_of: Web/MathML +--- +<p>Tutlayt n tarusi asnakan (MathML) d tantala n <a href="https://wiki.developer.mozilla.org/en-US/docs/XML">XML</a> akken ad ibeggen tira asnakan u ad yeṭṭef ɣef tikkelt tamṣukt-ines d ugbur-ines.Ad tafeḍ dagi iseɣwan ɣer tumlin, imedyaten d ifecka ara k-id yefken tallalt i leqdic-inek s tezmert n tatiknulujit-agi. I weskan izerben, wali asebter.<a href="https://fred-wang.github.io/MozSummitMathML/index.html">tugniwin ɣef tamzikent n usnulfu n Mozilla Summit 2013.</a></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="Tamselɣut_MathML">Tamselɣut MathML</h2> + +<dl> + <dt><a href="/en-US/docs/Web/MathML/Element">Aferdis n tamselɣut MathML </a></dt> + <dd>Talqqayt n yal aferdis MathML d isalen ɣef umsaḍan n iminigen uselkim d iziraz.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/MathML/Attribute">Tamseɣlut n wayla MathML</a></dt> + <dd>Information about MathML attributes that modify the appearance or behavior of elements.</dd> + <dt><a href="/en-US/docs/Web/MathML/Examples">Imedyaten MathML </a></dt> + <dd>MathML samples and examples to help you understand how it works.</dd> + <dt><a href="/en-US/docs/Web/MathML/Authoring">Asnulfu MathML</a></dt> + <dd>Suggestions and tips for writing MathML, including suggested MathML editors and how to integrate their output into Web content.</dd> +</dl> + +<p><a href="/en-US/docs/tag/MathML">Wali ugar...</a></p> +</div> + +<div class="section"> +<h2 id="Err-d_tallalt_sɣur_tamezdagnut">Err-d tallalt sɣur tamezdagnut</h2> + +<ul> + <li>View Mozilla forums...<br> + {{ DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml") }}</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/%23mathml" rel="external" title="#mathml">IRC channel</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/MathML:Home_Page">Wiki used by Mozilla contributors</a></li> + <li><a href="http://www.w3.org/Math/">W3C Math Home</a></li> + <li><a href="http://lists.w3.org/Archives/Public/www-math/">www-math w3.org mail archive</a></li> +</ul> + +<h2 id="Ifecka">Ifecka</h2> + +<ul> + <li><a class="external" href="http://validator.w3.org">W3C Validator</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en/firefox/addon/8969/">FireMath Firefox add-on</a></li> + <li><a href="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/">Mathzilla Firefox add-on collection</a></li> + <li><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> — Javascript LaTeX to MathML converter (<a href="http://fred-wang.github.io/TeXZilla/">live demo</a>, <a href="http://r-gaia-cs.github.io/TeXZilla-webapp/">Firefox OS webapp</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/">Firefox add-on</a>, <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla">using in a Web Page, JS program etc</a>)</li> + <li><a href="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> - Convert LaTeX documents into HTML+MathML Web pages</li> + <li><a href="http://webdemo.visionobjects.com/home.html#equation">Web Equation</a> - Turn handwritten equations into MathML or LaTeX</li> + <li><a href="http://www.mathjax.org/">MathJax</a> - Cross-browser JavaScript display engine for mathematics. To force MathJax to use native MathML, try <a href="https://addons.mozilla.org/en-US/firefox/addon/mathjax-native-mathml/">this Mozilla add-on</a>, this <a href="http://fred-wang.github.io/mathjax-native-mathml-safari/mathjax-native-mathml.safariextz">Safari extension</a> or this <a href="https://openuserjs.org/scripts/fred.wang/MathJax_Native_MathML/">GreaseMonkey script</a>.</li> +</ul> + +<h2 id="Isental_yezdin">Isental yezdin</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS">CSS</a></li> + <li><a href="/en-US/docs/Web/HTML">HTML</a></li> + <li><a href="/en-US/docs/Web/SVG">SVG</a></li> +</ul> +</div> +</div> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatSafari(5.1)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.8")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Available with plug-in(s).</p> diff --git a/files/kab/web/reference/api/index.html b/files/kab/web/reference/api/index.html new file mode 100644 index 0000000000..dcb6d7e4aa --- /dev/null +++ b/files/kab/web/reference/api/index.html @@ -0,0 +1,59 @@ +--- +title: Tamselyut API n Web +slug: Web/Reference/API +translation_of: Web/Reference/API +--- +<p><span class="seoSummary">Web yettmuddu-d deqs n yesnasen API i uselkem n deqs n twuriyin iwulmen. Ayagi yettwag s useqdec n tengalt JavaScript, udiɣ ak-yeǧǧ ad teggeḍ ayen tebɣiḍ s cwiṭ n useggem fessusen i yal {{domxref("window")}} neɣ {{domxref("element")}}, akken ad ternuḍ isemda udlifen neɣ imeslawen s useqdec n yesnase API <a href="/en-US/docs/Web/WebGL">WebGL</a> neɣ <a href="/en-US/docs/Web_Audio_API">Web Audio</a>.</span></p> + +<p>Yal agrudem iman-is deg isnasen API yettwabder deg <a href="/en-US/docs/Web/API">umatar. </a></p> + +<p>Tella daɣen <a href="/en-US/docs/Web/Reference/Events">tebdart n tedyanin meṛṛa yellan</a> di temsiɣelt n tedyanin.</p> + +<div class="cleared topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/DOM">Document Object Model</a></dt> + <dd>DOM d asnas API ara yeǧǧen anekcum ar usnifel n isemli amiran. Yettaǧǧa aseqdec n isedcec n {{domxref("Node")}} akked {{domxref("Element")}} n isemli. HTML, XML akked SVG sɣezfent akken ad ttwasqedcen iferdisen nsen.</dd> + <dt>API n yibenk</dt> + <dd>Tagrumma yagi n API tesfel tikkin ɣer yal tiseɣnatin tirrumin inamalen deg isebtaren Web ed isnasen. Amedya. <a href="https://developer.mozilla.org/en-US/docs/Web/API/Ambient_Light_Events">GSS (API) n asektay n tafat tiswaɣt</a>, <a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">GSS (API) N Battery</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API">GSS (API) n Tansidegt, Asekkweṛ n urecam</a>,<a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity"> GSS (API) n Amisi </a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation">GSS (API) n Taɣda n ibenk</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">GSS (API) n Taɣda n agdil</a>,<a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth"> GSS (API) n Tasmamayt </a>.</dd> + <dt>API n teɣwalt</dt> + <dd>I GSS (aGrudem n uSihel n iSnasen) (API) sfelent iy isebtar n Web u ed isnasen ay selɣun akked isebtar nniḍen neɣ ibenk.Amedya. <a href="https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API">API Isalen n uzeṭṭa</a>, <a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Tulɣa </a><a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">n Web</a>, <a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">API Adegger afrari</a>.</dd> + <dt id="Data_management_APIs">API n usefrek n isefka</dt> + <dd>Isefka uqedac zemren ad ttwaxeznen u ad ttusefreken s tallat n APIs. Amedya. <a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a>, <a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a>.</dd> +</dl> + +<p>Uger n API yagi yellan i meṛṛa n asmel Web neɣ asnas,d tagrumma n API Mozilla ig ǧahdden u anamal iy isnasen ig glamen u iselkemen.</p> + +<dl> + <dt>API uzwiren</dt> + <dd>Asnas i sgelemen d ansnas ig serkeben u deg aqeddac ɣuṛes izerfan ulmisen.I API i sgelemen yellan.: <a href="/en-US/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP Socket API</a>, <a href="/en-US/docs/WebAPI/Contacts" title="WebAPI/Contacts">API Anermis</a>,<a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/API/Device_Storage_API"> API n uselɣes n ibenkan</a>,<a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"> API Iminig </a>, <a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">API Kamera</a>.</dd> + <dt>API Aselkan</dt> + <dd>Asnas i ttuselkemen d asnas n aswir iɣlin ig seddayen timehlin tizfanin deg anagraw n ammud am Firefox OS.D asnas ye ttuseglamen udun u ig msekcamen akked isnasen ay seddun. <a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Armud</a>. API ittuselkemen ɣuṛsen:<a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth"> API Bluetooth </a>, <a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">API Tuqqna n Amafus </a>, <a href="/en-US/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">API Taddad n Uzeṭṭa</a> , <a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telefun</a>, <a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS</a>, <a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">API Isalen n WiFi </a>, <a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">API n Iɣewaṛṛen</a> , <a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a>, <a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a>, <a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a>.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Community" id="Tamezdagnut">Tamezdagnut</h2> + +<p>Ddu ar tmezdagnut Web API di tebdart nneɣ n tnezwit neɣ agraw n isallen:</p> + +<ul> + <li><a class="external" href="https://lists.mozilla.org/listinfo/dev-webapi">am tebdart n tnezwit</a></li> + <li><a href="news://news.mozilla.org/mozilla.dev.webapi">am ugraw n isallen</a></li> + <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi">am ugraw Google</a></li> + <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi/feeds">am usuddem Web</a></li> +</ul> + +<p>Daɣen, ddu ar usqerdec s sriddeg ubadu <a href="irc://irc.mozilla.org/webapi">#webapi</a> di <a class="external" href="https://wiki.mozilla.org/IRC">IRC</a>.</p> + +<h2 class="Related_Topics" id="Isental_icudden">Isental icudden</h2> + +<p>Isental-agi zemren ahat ak-nefɛen:</p> + +<ul> + <li><a href="/en-US/docs/Web/API">Amatar n igrudmawen n API Web meṛṛa</a></li> +</ul> +</div> +</div> + +<p> </p> diff --git a/files/kab/web/reference/index.html b/files/kab/web/reference/index.html new file mode 100644 index 0000000000..5d7ad76239 --- /dev/null +++ b/files/kab/web/reference/index.html @@ -0,0 +1,28 @@ +--- +title: Tamselyut tatiknulujit n Web +slug: Web/Reference +tags: + - Landing + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/Reference +--- +<p>{{draft()}}<br> + Web yeldin yers ɣef tallat n kra n imḍan n titiknulujitin yesadenen tamusni i watan iw akken ad ttwasqedcen.sdaw-a,attafem iseɣwan ɣer s ingawen n tamselyut i yal yiwen segsen.</p> + +<h2 class="Documentation" id="Titiknulujitin_n_Web">Titiknulujitin n Web</h2> + +<p>Yesmagel d akken <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">tebdam leqdic deg Web</a>,maca ur yelli d aḍulli.</p> + +<dl> + <dt><strong><a href="/en-US/docs/Glossary/HTML">HTML</a></strong> — Aṣekkiw n Web tutlayt n Afel Ḍṛis Markup<strong> </strong> yettwaseqdec iw sbadu ed uglem stanamekt agbuṛ <a href="https://developer.mozilla.org/en-US/docs/Glossary/markup">(taṛkkizt)</a> n yiwen usebtar Web s amasal yemṣukten akken ilha.</dt> + <dd>HTML yettakk-ed allal iw snulfu n izzmamen yemṣukten,degs yella iḥedren iwumi qaṛen<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element"> iferdisen HTML</a> jemmeqen s<a href="https://developer.mozilla.org/en-US/docs/Glossary/Tag"> tiṛkkizin</a>,yettwarun s tasskimt:kra sekcamen srid agbuṛ deg sebtar,wiyaḍ ttakkend isalen ɣef uḍṛis n wazzmam u zemren ad skecmen tiṛkkizin nnidḍen am adahil iferdisen.Tidett,iminigen ur ten beqqḍen ara,acku ttwasqedcen iw suɣel n uferdis n usebtar.<br> + <br> + <a href="/en-US/Learn/HTML/Introduction_to_HTML">Tazwart ɣer HTML</a> | <a href="/en-US/Learn/HTML">Lmed HTML</a> | <a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> | <a href="/en-US/docs/Web/Guide/HTML">Snefli amnir</a>| <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Tamselɣut n uferdis</a>| <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference">Tamselɣut</a></dd> + <dt><strong><a href="/en-US/docs/Glossary/CSS">CSS</a></strong> — Aɣanib n Web</dt> + <dd>Iferan n uɣanib s ucaṛcuṛ ttwasqedcen iw glem n taggameḍt n uferdis n Web..<br> + <br> + <a href="/en-US/Learn/CSS/Introduction_to_CSS">Tazwart ɣer CSS</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started">Aselḥu akked CSS</a><a href="/en-US/docs/Web/Guide/CSS/Getting_started"> </a>| <a href="/en-US/Learn/CSS">Lmed CSS</a> | <a href="/en-US/docs/Web/CSS/CSS3">CSS3 </a>| <a href="/en-US/docs/Web/Guide/CSS">Snefli amnir</a> | <a href="/en-US/docs/Web/CSS/Common_CSS_Questions">Tuttriwin ɣef CSS</a> |<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference"> Tamselɣut</a></dd> +</dl> diff --git a/files/kab/web/svg/index.html b/files/kab/web/svg/index.html new file mode 100644 index 0000000000..8f6b9db807 --- /dev/null +++ b/files/kab/web/svg/index.html @@ -0,0 +1,85 @@ +--- +title: SVG +slug: Web/SVG +translation_of: Web/SVG +--- +<div class="callout-box"><strong><a href="/en-US/docs/SVG/Tutorial">Getting Started</a></strong><br> +This tutorial will help get you started using SVG.</div> + +<p><span class="seoSummary"><strong>Scalable Vector Graphics (SVG)</strong> ed tutlayt n </span>ṭarkkizt yersen ɣef<span class="seoSummary"> <a href="/en-US/docs/XML">XML</a> iw glem n udlifen amawayan <a class="external" href="https://en.wikipedia.org/wiki/Vector_graphics">vector graphics</a>.</span> SVG d win yesefkken iyidlifen am akken <a href="/en-US/docs/Web/HTML">HTML</a> yesefkk iwadṛis .</p> + +<p>SVG is similar to Adobe's proprietary Flash technology, but it is a text-based open Web standard instead of a closed binary format. It is explicitly designed to work with other web standards such as <a href="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM">DOM</a>, and <a href="/en-US/docs/Web/SVG/SVG_animation_with_SMIL">SMIL</a>.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation">Documentation</h2> + +<dl> + <dt><a href="/en-US/docs/Web/SVG/Element">SVG element reference</a></dt> + <dd>Details about each SVG element.</dd> + <dt><a href="/en-US/docs/Web/SVG/Attribute">SVG attribute reference</a></dt> + <dd>Details about each SVG attribute.</dd> + <dt><a href="/en-US/docs/DOM/DOM_Reference#SVG_interfaces">SVG DOM interface reference</a></dt> + <dd>Details about the SVG DOM API, for interaction with JavaScript.</dd> + <dt><a href="/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></dt> + <dd>SVG works together with {{Glossary("HTML")}}, {{Glossary("CSS")}} and {{Glossary("JavaScript")}}. Use SVG to <a href="/en-US/docs/SVG_In_HTML_Introduction">enhance a regular HTML page or web application</a>.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/SVG">View All...</a></span></p> + +<h2 class="Community" id="Community">Community</h2> + +<ul> + <li>View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> +</ul> + +<h2 class="Tools" id="Tools">Tools</h2> + +<ul> + <li><a href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li> + <li><a href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a> (Discontinued)</li> + <li><a href="/en-US/docs/tag/SVG:Tools">More Tools...</a></li> + <li>Other resources: <a href="/en-US/docs/XML">XML</a>, <a href="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/HTML/Canvas">Canvas</a></li> +</ul> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="Examples">Examples</h2> + +<ul> + <li>Google <a href="http://maps.google.com">Maps</a> (route overlay) & <a href="http://docs.google.com">Docs</a> (spreadsheet charting)</li> + <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG bubble menus</a></li> + <li><a href="http://jwatt.org/svg/authoring/">SVG authoring guidelines</a></li> + <li>An overview of the <a href="/en-US/docs/Mozilla_SVG_Project">Mozilla SVG Project</a></li> + <li><a href="/en-US/docs/SVG/FAQ">Frequently asked questions</a> regarding SVG and Mozilla</li> + <li><a href="/en-US/docs/SVG/SVG_as_an_Image">SVG as an image</a></li> + <li><a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SVG animation with SMIL</a></li> + <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG art gallery</a></li> + <li>More samples (<a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li> +</ul> + +<h3 id="Animation_and_interactions">Animation and interactions</h3> + +<p>Like HTML, SVG has a document model (DOM) and events, and is accessible from JavaScript. This allows developers to create rich animations and interactive images.</p> + +<ul> + <li>Some real eye-candy SVG at <a href="http://svg-wow.org/">svg-wow.org</a></li> + <li>Firefox extension (<a href="http://schepers.cc/grafox/">Grafox</a>) to add a subset of {{Glossary("SMIL")}} animation support</li> + <li>Interactive <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a> manipulation</li> + <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using SVG's <code>foreignObject</code></li> +</ul> + +<h3 id="Mapping_charting_games_3D_experiments">Mapping, charting, games & 3D experiments</h3> + +<p>While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.</p> + +<ul> + <li><a href="http://www.codedread.com/yastframe.php">Tetris</a></li> + <li><a href="https://web.archive.org/web/20131019072450/http://www.treebuilder.de/svg/connect4.svg" title="Archive link provided because source now requires authentication.">Connect 4</a></li> + <li><a href="http://www.carto.net/papers/svg/us_population/index.html">US population map</a></li> + <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">3D box</a> & <a href="http://www.treebuilder.de/default.asp?file=206524.xml">3D boxes</a></li> + <li><a href="http://jvectormap.com/">jVectorMap</a> (interactive maps for data visualization)</li> + <li><a href="http://jointjs.com">JointJS</a> (JavaScript diagramming library)</li> +</ul> +</div> +</div> diff --git a/files/kab/web/tuffart/index.html b/files/kab/web/tuffart/index.html new file mode 100644 index 0000000000..47d5a400ab --- /dev/null +++ b/files/kab/web/tuffart/index.html @@ -0,0 +1,72 @@ +--- +title: Tuffart +slug: Web/Tuffart +translation_of: Web/Accessibility +--- +<p><strong>Anekcum</strong> deg usnefli n Web anamek-is d akken ad yeyeǧǧ aseqdec n yismal web i wugar n medden, ɣas ma yella txuṣ tmussni-nsen deg waya. aten-ih kra n yisallen i wen yessefken deg usnifel n wegbur uffar.</p> + +<p>Ɣer waṭas n medden, tatiknulujit tessishil tiɣawsiwin.S imeɛḍar, tatiknulujit tettarra tiɣawsiwin zemrent. Tuffart yessefk ad tili ugbur-ines d uffar akken iwata, akken tebɣu tili tezmert n wemdan u akken yebɣu yili unekcum-is ɣer Web.</p> + +<p><strong>Web yettwag s wudem agejdan i medden akk</strong>, akken yebɣu yili wallal-nsen, aseɣẓan-nsen, tutlayt-nsen, idles-nsen, amḍiq-nsen neɣ tazmert-nsen. mara yaweḍ Web ɣer yiswi-agi, ad yaweḍ ɣer medden yesɛan (neɣ wid umi tettwakkes) tazmert di tmesliwt,deg iserew,deg ameẓraw d uwessun nniḍen (<a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Tuffart</a>)</p> + +<div class="cleared topicpage-table"> +<div class="section"> +<h2 class="Key_accessibility_tutorials" id="Key_accessibility_tutorials" name="Key_accessibility_tutorials">Tasarut n iṭuṭuryalen </h2> + +<h4 class="Key_accessibility_tutorials" id="Key_accessibility_tutorials" name="Key_accessibility_tutorials"><sub>MDN</sub> <sub><a href="/en-US/docs/Learn/Accessibility">Accessibility Learning Area </a><strong>ɣers iṭuṭuryalen atraren yettwaleqmen yedlen akk iferdisen yessefken i tuffart.</strong></sub></h4> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt> + <dd>This article starts off the module with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the Web, and how we can make accessibility part of our web development workflow.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt> + <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt> + <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences ... or they can significantly harm accessibility if misused. This article outlines some CSS and JavaScript best practices that should be considered to ensure even complex content is as accessible as possible.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt> + <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt> + <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt> + <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Other documentation</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">Understanding the Web Content Accessibility Guidelines</a></dt> + <dd> + <p>This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).</p> + </dd> + <dt><a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a></dt> + <dd>Until now, web developers who want to make their styled <div> and <span> based widgets have lacked the proper techniques. <strong>Keyboard accessibility</strong> is part of the minimum accessibility requirements which a developer should be aware of.</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a></dt> + <dd>A collection of articles to learn how to use ARIA to make your HTML documents more accessible.</dd> + <dt><a href="/en-US/docs/Accessibility/AT_Development" title="AT Development">Assistive technology (AT) development</a></dt> + <dd>A collection of articles intended for AT developers</dd> + <dt><a href="/en-US/docs/Web/Accessibility/Mobile_accessibility_checklist">Mobile accessibility checklist</a></dt> + <dd>This document provides a concise checklist of accessibility requirements for mobile app developers.</dd> + <dt><a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility">Cognitive accessibility</a></dt> + <dd>When creating web content, be aware of how you can ensure that it is accessible to people cognitive impairments.</dd> + <dt><a href="/en-US/docs/Web/Accessibility/Seizure_disorders">Accessibility for seizure disorders</a></dt> + <dd>Some types of visual web content can induce seizures in people with certain brain disorders. Understand the types of content that can be problematic, and find tools and strategies to help you avoid them.</dd> + <dt></dt> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility" title="/en-US/docs/tag/Accessibility">View all articles about Accessibility...</a></span></p> +</div> + + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://lists.mozilla.org/listinfo/accessibility">Mozilla mailing list about accessibility</a></li> + <li><a href="http://www.w3.org/WAI/IG/">WAI Interest Group</a></li> + <li><a href="https://mozillians.org/en-US/group/1-accessibility">Mozillians group about accessibility</a></li> + <li><a href="/en-US/docs/Web/Guide" title="REDIRECT Web">Developer guides</a></li> + <li><a href="/en-US/docs/Mozilla/Accessibility" title="Accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities. Mozilla strives to make its software accessible; the documents below cover the ways in which we do so.">Accessibility and Mozilla</a></li> +</ul> + +<section id="Quick_Links"></section> +</div> diff --git a/files/kab/web/tutorials/index.html b/files/kab/web/tutorials/index.html new file mode 100644 index 0000000000..532a39ed32 --- /dev/null +++ b/files/kab/web/tutorials/index.html @@ -0,0 +1,232 @@ +--- +title: Iṭuṭuṛyen +slug: Web/Tutorials +translation_of: Web/Tutorials +--- +<p>Iseɣwan ig llan deg sebtar agi ɣuṛes aṭas iṭuṭuryen ad ifecka usegmisen.Ma telliḍ d-amezwar neɣ d-amusen,tzemreḍ attafeḍ iɣbula s wazal n sen deg seqdec n usnefli n web.iɣbula yagi ttwarun sɣuṛ tikubaniyin ig walan azekka d imsenfaliyen yeseqdacen tignutin yeldin ad leqdic ilhan di web id yettaken neɣ ad issireg tasɣelt n isalen agi, s wudem n turagin tilelliyin am t-id n Creative Commons.</p> + +<h2 class="Documentation" id="Documentation" name="Documentation">Iṭuṭuryen HTML</h2> + +<h3 id="Tazwart">Tazwart</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><strong><a href="/en-US/docs/Web/Guide/HTML/Introduction">Tazwart ar HTML</a></strong></dt> + <dd>D acut HTML , i wacut, amezruy-is s uḥawec, d wamek i tga taɣessa n isemli HTML.aḍris agi i skaney-d iferdisen igejdanen yellan deg sebtar HTML. Iḍrisen id i teddun skaney-d deg talqayt iferdisen imadnanen yellan deg HTML.</dd> + <dt><a href="http://reference.sitepoint.com/html/page-structure">Tamṣukt n taffa n usebtar web</a><strong> (SitePoint)</strong></dt> + <dd>Lmed amek iferdisen HTML duklen akken ad salin asebtar web..</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Element">Tamselɣut n uferdis HTML n MDN</a></dt> + <dd>Tamselɣut tummidt i yiferdisen HTML,d wamek iminigen yellan zemren-as.</dd> + <dt><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges">Acqiṛi HTML</a><strong> (Wikiversity)</strong></dt> + <dd>Sileɣ tamusni inek s ucqiṛi n HTML.</dd> +</dl> +</div> +</div> + +<h3 id="Aswir_leqqayen">Aswir leqqayen</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Tips for Authoring Fast-Loading HTML Pages</a></strong></dt> + <dd>Optimize web pages to provide a more responsive site for visitors and reduce the load on your web server and Internet connection.</dd> + <dt><strong><a href="http://www.html5rocks.com/tutorials/" rel="external">HTML5 Tutorials</a> (HTML5 Rocks)</strong></dt> + <dd>Take a guided tour through code that uses HTML5 features.</dd> + <dt><strong><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">Semantics in HTML5</a> (A List Apart)</strong></dt> + <dd>Learn meaningful markup that is extensible and backwards- and forwards-compatible.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">Canvas Tutorial</a></strong></dt> + <dd>Learn how to draw graphics using scripting using the canvas element.</dd> + <dt><strong><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></strong></dt> + <dd>Articles about using HTML5 right now.</dd> + <dt><strong><a href="http://www.elated.com/articles/html5-audio/" rel="external">The Joy of HTML5 Audio</a> (Elated)</strong></dt> + <dd>Learn how to use the HTML audio element to embed sounds in your web pages easily. Lots of code examples are included in the tutorial.</dd> +</dl> +</div> +</div> + +<h2 class="Documentation" id="Documentation" name="Documentation">Javascript Tutorials</h2> + +<h3 id="Introductory_level">Introductory level</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><strong><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript First Steps</a></strong></dt> + <dd>JavaScript tutorial for beginners being written as part of MDN's <a href="/en-US/docs/Learn">Learning Area</a>.</dd> + <dt><strong><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</strong></dt> + <dd>Codecademy is a easy way to learn how to code JavaScript. It's interactive and you can do it with your friends.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Getting_Started">Getting Started with JavaScript</a></strong></dt> + <dd>What is JavaScript and how can it help you?</dd> + <dt><strong><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" rel="external">JavaScript Best Practices</a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" title="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a>(WebPlatform.org)</strong></dt> + <dd>Learn about some of the obvious and (not so) obvious best practices when writing JavaScript.</dd> +</dl> +</div> +</div> + +<h3 id="Intermediate_level">Intermediate level</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/A_re-introduction_to_JavaScript">A Re-Introduction to JavaScript</a></strong></dt> + <dd>A recap of the JavaScript programming language aimed at intermediate-level developers.</dd> + <dt><strong><a href="http://eloquentjavascript.net/" rel="external">Eloquent JavaScript</a></strong></dt> + <dd>A comprehensive guide to intermediate and advanced JavaScript methodologies.</dd> + <dt><strong><a href="http://speakingjs.com/es5/" rel="external">Speaking JavaScript</a> (Dr. Axel Rauschmayer)</strong></dt> + <dd>For programmers who want to learn JavaScript quickly and properly, and for JavaScript programmers who want to deepen their skills and/or look up specific topics.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><strong><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (Addy Osmani)</strong></dt> + <dd>An introduction to essential JavaScript design patterns.</dd> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></strong></dt> + <dd>Learn about the JavaScript object model.</dd> +</dl> +</div> +</div> + +<h3 id="Advanced_level">Advanced level</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide">JavaScript Guide</a></strong></dt> + <dd>A comprehensive, regularly updated guide to JavaScript for all levels of learning from beginner to advanced.</dd> + <dt><strong><a href="https://github.com/getify/You-Dont-Know-JS" rel="external">You Don't Know JS</a> (Kyle Simpson)</strong></dt> + <dd>A series of books diving deep into the core mechanisms of the JavaScript language.</dd> + <dt><strong><a href="http://ejohn.org/apps/learn/" rel="external">Learning Advanced JavaScript</a> (John Resig)</strong></dt> + <dd>John Resig's guide to advanced JavaScript.</dd> + <dt><strong><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">Introducing the JavaScript DOM</a> (Elated)</strong></dt> + <dd>What is the Document Object Model, and why is it useful? This article gives you a gentle introduction to this powerful JavaScript feature.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><strong><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></strong></dt> + <dd>Documentation of the most quirky parts of JavaScript.</dd> + <dt><strong><a href="http://exploringjs.com/es6/" rel="external">Exploring ES6</a> (Dr. Axel Rauschmayer)</strong></dt> + <dd>Reliable and in-depth information on ECMAScript 2015.</dd> + <dt><strong><a href="http://shichuan.github.io/javascript-patterns" rel="external">Javascipt Patterns</a></strong></dt> + <dd>A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM.</dd> + <dt><strong><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How browsers work</a></strong></dt> + <dd>A detailed research article describing different modern browsers, their engines, page rendering etc.</dd> + <dt><a href="https://github.com/bolshchikov/js-must-watch">JavaScript Videos</a> (GitHub)</dt> + <dd>A collection of JavaScript videos to watch.</dd> +</dl> +</div> +</div> + +<h3 id="Extension_Development">Extension Development</h3> + +<div class="row topicpage-table" style="width: 100%;"> +<div class="section"> +<dl> + <dt><strong><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Writing your first WebExtension</a></strong></dt> + <dd>A walk through creating a WebExtension for Firefox, from start to finish.</dd> + <dt><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Adding a button to the toolbar</a></dt> + <dd>Adding buttons to the browser toolbar using WebExtension.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Modifying a web page</a></dt> + <dd>A walk through of modifying a web page using WebExtensions.</dd> + <dt><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Intercepting HTTP Requests</a></dt> + <dd>Using WebExtensions to intercept and modify requests.</dd> +</dl> +</div> +</div> + +<h2 class="Documentation" id="Documentation" name="Documentation">CSS Tutorials</h2> + +<h3 id="Introductory_level_2">Introductory level</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started">CSS Getting Started</a></strong></dt> + <dd>This tutorial introduces you to Cascading Style Sheets (CSS). It guides you through the basic features of CSS with practical examples that you can try for yourself on your own computer.</dd> + <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">CSS Selector Classes</a> (Wikiversity)</strong></dt> + <dd>What are classes in CSS?</dd> + <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">External CSS</a> (Wikiversity)</strong></dt> + <dd>Using CSS from an external style sheet.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><strong><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external">Adding a Touch of Style</a> (W3C)</strong></dt> + <dd>A brief beginner's guide to styling web pages with CSS.</dd> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Common_CSS_Questions">Common CSS Questions</a></strong></dt> + <dd>Common questions and answers for beginners.</dd> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors" title="http://codeavengers.com/">CSS Selectors</a></strong></dt> + <dd>An introduction to CSS selectors</dd> +</dl> +</div> +</div> + +<h3 id="Intermediate_level_2">Intermediate level</h3> + +<div class="row topicpage-table" style="width: 100%;"> +<div class="section"> +<dl> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">CSS Reference</a></strong></dt> + <dd>Complete reference to CSS, with details on support by Firefox and other browsers.</dd> + <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS Challenges</a> (Wikiversity)</strong></dt> + <dd>Flex your CSS skills, and see where you need more practice.</dd> + <dt><strong><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">CSS Positioning 101</a> (A List Apart)</strong></dt> + <dd>Using positioning for standards-compliant, table-free layout.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><strong><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">Progressive Enhancement with CSS</a> (A List Apart)</strong></dt> + <dd>Integrate progressive enhancement into your web pages with CSS.</dd> + <dt><strong><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Fluid Grids</a> (A List Apart)</strong></dt> + <dd>Design layouts that fluidly resize with the browser window, while still using a typographic grid.</dd> +</dl> +</div> +</div> + +<h3 id="Advanced_level_2">Advanced level</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transforms">Using CSS Transforms</a></strong></dt> + <dd>Apply rotation, skewing, scaling, and translation using CSS.</dd> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_transitions">CSS Transitions</a></strong></dt> + <dd>CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><strong><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Quick Guide to Implement Web Fonts with @font-face</a> (HTML5 Rocks)</strong></dt> + <dd>The @font-face feature from CSS3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way.</dd> + <dt><strong><a href="http://davidwalsh.name/starting-css" rel="external">Starting to Write CSS</a> (David Walsh)</strong></dt> + <dd>An introduction to tools and methodologies to write more succinct, maintainable, and scalable CSS.</dd> +</dl> +</div> +</div> |