-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathbasic13.html
More file actions
266 lines (177 loc) · 17.6 KB
/
Copy pathbasic13.html
File metadata and controls
266 lines (177 loc) · 17.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="أساسيات لغة ترميز النص الفائق اتش.تي.إم.إل | العمل مع الصور وملفات SVGs"/>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="../favicon.png">
<title>HTMLVerse | الأساسيات</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<a class="red" href="./index.html#13">X</a>
<h1>أساسيات اتش.تي.إم.إل</h1>
</header>
<main>
<!-- BASIC 13 -->
<div class="box">
<div class="sub-title">
<h2>١٥. العمل مع الصور وملفات SVGs</h2>
<span class="hint">نظري</span>
<p></p>
</div>
<section id="1">
<h3>أ. ما هي الطرق الشائعة لتحسين موارد الوسائط Optimize Media Assets ؟</h3>
<p>هناك ثلاث أدوات يجب أخذها في الاعتبار عند استخدام الوسائط <strong>media</strong>، مثل الصور، على صفحات الويب الخاصة بك: الحجم <em>size</em>، التنسيق <em>format</em>، والضغط <em>compression</em>.</p>
<p>لنتحدث أولًا عن حجم <strong>size</strong> صورك. عند إنشاء موقع ويب <em>website</em>، غالبًا ما تُصمم الصور لعرضها <em>display</em> بحجم مُحدد. على سبيل المثال، قد يكون لديك صورة مُعروضة بدقة 640×480. يمثل 640 العرض <em>width</em> بينما يمثل 480 <em>height</em> "بالبكسل" <em>pixels</em>. عند تحضير صورتك، ستحتاج إلى تغيير حجمها إلى 640×480 لتتناسب مع هذا التصميم. إذا عرضت صورة بدقة 1920×1080 ولكنك تُصممها لتكون أصغر بكثير، فأنت تُلزم المستخدمين <em>users</em> بتنزيل بيانات غير ضرورية <em>unnecessary data</em>. الدقة <em>resolution</em> الأصغر تُؤدي إلى حجم ملف أصغر.</p>
<p>الأمر التالي الذي يجب مراعاته هو تنسيق <strong>format</strong> ملفك. من أكثر تنسيقات الملفات شيوعًا PNG وJPG، لكنهما لم يعودا التنسيقين الأمثل لعرض الصور. ما لم تكن بحاجة إلى دعم المتصفحات القديمة، يُنصح باستخدام تنسيق <em>format</em> أكثر تحسينًا <em>more optimized</em>، مثل WEBP أو AVIF.</p>
<p>أخيرًا، يمكنك استخدام خوارزميات ضغط <strong>compression</strong> على صورك. تُستخدم خوارزمية الضغط <em>A compression algorithm</em> لتقليل حجم <em>size</em> الملفات أو البيانات. تتوفر خيارات مثل pngcrush لضغط صورك محليًا، أو يمكنك استخدام أدوات ضغط <em>compressed tools</em> عبر الإنترنت. مع ذلك، تجدر الإشارة إلى أن بعض تنسيقات الملفات <em>file formats</em>، مثل JPG، ليست خالية من فقدان البيانات. تعني هذه الصيغة أنه يمكن إعادة بناء البيانات الأصلية بدقة من البيانات المضغوطة <em>compressed data</em>. إذا حاولت ضغط (حاولت ضغط) صورة JPG، فسيؤدي ذلك إلى انخفاض الجودة <em>quality</em>. يجب مراعاة جميع هذه الأمور عند اختيار الصور لصفحات الويب.</p>
<!-- Questions أسئلة-->
<div class="questions">
<h4>أسئلة :</h4>
<h5>كيف يُنصح بضبط حجم size صورك؟</h5>
<p>١. يجب أن تكون صورك أصغر من حجمها المُعرَّض على الصفحة. ❌</p>
<p>٢. يجب أن تكون صورك أكبر من حجمها المُعرَّض على الصفحة. ❌</p>
<p><mark>٣. يجب أن يكون حجم صورك بنفس حجمها المُعرَّض على الصفحة. ✅</mark></p>
<p>٤. لا يهم، استخدم الحجم الذي تُريده. ❌</p>
<br>
<h5>أي مما يلي ليس نوع صحيح لـ ملف صورة NOT a valid image file type ؟</h5>
<p><mark>١. TS ✅</mark></p>
<p>٢. PNG ❌</p>
<p>٣. JPG ❌</p>
<p>٤. WEBP ❌</p>
<br>
<h5>ما صيغة format الملف التي لا يجب ضغطها أبدًا؟</h5>
<p>١. WEBP ❌</p>
<p>٢. PNG ❌</p>
<p><mark>٣. JPG ✅</mark></p>
<p>٤. GIF ❌</p>
</div>
</section>
<section id="2">
<h3>ب. ما هي أنواع تراخيص الصور Image Licenses المختلفة، وكيف تعمل؟</h3>
<p>تُعتبر الصور ملكية فكرية، أي أنها محمية بموجب قوانين حقوق النشر <strong>copyright</strong>، وغالبًا ما تكون ملكًا لمُنشئها <em>The creator</em>. تُنشر الصور تلقائيًا كجميع الحقوق محفوظة. يحتفظ مُنشئ الصورة، أو الناشر <em>publisher</em> أحيانًا، بجميع حقوق النشر الخاصة بها.</p>
<p>وهذا يعني أنه لا يمكنك استخدامها في صفحتك على الويب إلا إذا قمت بأحد ثلاثة أشياء: الحصول على إذن كتابي <strong>written permission</strong> من صاحب حقوق الطبع والنشر، أو شراء ترخيص <strong>license</strong> من صاحب حقوق الطبع والنشر، أو دمج <strong>incorporate</strong> الصورة بطريقة تندرج ضمن الاستخدام العادل <em>fair use</em>.</p>
<p>النقطة الثالثة مُعقّدة بعض الشيء. الاستخدام العادل <strong>Fair use</strong> يتطلب أن يكون استخدامك للصورة محدودًا <strong>limited</strong> ومُغيّرًا <strong>transformative</strong>. من أمثلة الاستخدام العادل التعليق على العمل الفني أو مراجعته أو إنشاء محاكاة ساخرة له.</p>
<p>قد تُنشر بعض الصور بموجب ترخيص مُتساهل <em>permissive license</em>، مثل ترخيص <strong>Creative Commons license</strong> أو ترخيص <strong>BSD license</strong> الذي يستخدمه freeCodeCamp. هذه الصور متاحة <em>available</em> للاستخدام في موقعك الإلكتروني، ولكن عليك قراءة الترخيص لفهم القواعد <em>the rules</em> التي يجب اتباعها عند استخدامها. على سبيل المثال، قد يُطلب منك جعل موقعك الإلكتروني مفتوح المصدر <em>open source</em>، أو قد لا يُسمح لك بتعديل <em>modify</em> الصورة بأي شكل من الأشكال.</p>
<p>أخيرًا، قد تُنشر بعض الصور ضمن نطاق الملكية العامة <strong>public domain</strong>. الصورة ضمن نطاق الملكية العامة <em>public domain</em> لا تخضع لحقوق الطبع والنشر <em>copyright</em>، ويمكن استخدامها بحرية <strong>free</strong> دون أي قيود <em>restrictions</em>. تُعتبر الصور المرخصة خصيصًا بموجب رخصة المشاع الإبداعي 0 <strong>the Creative Commons 0 license</strong> ملكًا عامًا.</p>
<p>تتيح لك معظم محركات البحث تصفية <strong>filter</strong> نتائج الصور حسب الترخيص <em>license</em>. هناك أيضًا مواقع مثل Pixabay و Unsplash، والتي توفر صورًا مجانية <strong>free-to-use images</strong>. انتبه دائمًا لحقوق النشر <em>copyright</em> والترخيص <em>licensing</em> عند استخدام أي صورة في موقعك الإلكتروني.</p>
<!-- Questions أسئلة-->
<div class="questions">
<h4>أسئلة :</h4>
<h5>ما هو الترخيص الافتراضي default license للصور؟</h5>
<p><mark>١. All rights reserved ✅</mark></p>
<p>٢. Permissive license ❌</p>
<p>٣. Public Domain ❌</p>
<p>٤. Creative Commons ❌</p>
<br>
<h5>ما هي الرخصة التي تُصدر الأعمال للملكية العامة public domain ؟</h5>
<p>١. MIT ❌</p>
<p>٢. BSD ❌</p>
<p>٣. Creative Commons ❌</p>
<p><mark>٤. Creative Commons 0 ✅</mark></p>
<br>
<h5>كيف يمكنك العثور على الصور المسموح لك باستخدامها؟</h5>
<p>١. ابحث عن الصور على جوجل واستخدمها بحرية. ❌</p>
<p><mark>٢. استخدم مواقع مثل Pixabay أو Unsplash. ✅</mark></p>
<p>٣. استخدم أي صورة من مواقع التواصل الاجتماعي بشرط ذكر المصدر. ❌</p>
<p>٤. يمكنك استخدام أي صورة طالما أنها غير مُعلّمة بعلامة مائية. ❌</p>
</div>
</section>
<section id="3">
<h3>ج. ما هي ملفات SVGs، ومتى يجب استخدامها؟</h3>
<p>أولاً، عليك فهم آلية عمل الصور. تُصنف صيغ الصور الشائعة <em>Common image formats</em>، مثل PNG وJPG، كصيغ نقطية <strong>raster formats</strong>. هذا يعني أساسًا أنها تعتمد على "البكسل" <strong>pixel-based</strong>، حيث تتبع البيانات <strong>data</strong> قيمة اللون في كل "بكسل" <strong>pixel</strong>.</p>
<p>من عيوب الصور النقطية أنها لا تُحسّن من جودة الصورة <em>do not upscale well</em>. إذا حاولتَ تكبير صورة PNG، فربما لاحظتَ أنها أصبحت مشوّشة <strong>pixelated</strong> أو ضبابية <strong>blurry</strong>.</p>
<p><strong>SVG</strong> هو نوع مختلف من الصور. SVG هو اختصار لـ <em>Scalable Vector Graphic</em> "رسومات متجهة قابلة للتحجيم". يتتبع الرسم المتجه <em>A vector graphic</em> البيانات بناءً على مسارات <strong>paths</strong> ومعادلات <strong>equations</strong> لرسم النقاط <em>points</em> والخطوط <em>lines</em> والمنحنيات <em>curves</em>. هذا يعني في الواقع أنه يمكن تحجيم الرسم المتجه vector graphic، مثل SVG، إلى أي حجم دون التأثير على الجودة <em>quality</em>.</p>
<p>تتميز ملفات SVG بميزة تخزين البيانات بتنسيق <strong>XML</strong>. هذا يعني أنه يمكنك استخدامها مباشرةً في الكود الخاص بك كملفات اتش.تي.إم.إل HTML خام باستخدام عنصر <code class="br">svg</code>. كما يمكنك تغيير لون الصورة برمجيًا <em>programmatically</em>.</p>
<p>لتغيير الوجه المبتسم إلى اللون الأحمر، قم بتغيير <code class="br">"fill="yellow</code> إلى <code class="br">"fill="red</code></p>
<h4>الكود :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="45" stroke="black" stroke-width="4" fill="yellow" />
<circle cx="35" cy="40" r="5" fill="black" />
<circle cx="65" cy="40" r="5" fill="black" />
<path d="M35 65 Q50 80 65 65" stroke="black" stroke-width="4" fill="transparent" />
</svg>
</code></pre>
</div>
<h4>قبل التغيير :</h4>
<div class="preview" role="presentation">
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="45" stroke="black" stroke-width="4" fill="yellow" />
<circle cx="35" cy="40" r="5" fill="black" />
<circle cx="65" cy="40" r="5" fill="black" />
<path d="M35 65 Q50 80 65 65" stroke="black" stroke-width="4" fill="transparent" />
</svg>
</div>
<h4>بعد التغيير :</h4>
<div class="preview" role="presentation">
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="45" stroke="black" stroke-width="4" fill="red" />
<circle cx="35" cy="40" r="5" fill="black" />
<circle cx="65" cy="40" r="5" fill="black" />
<path d="M35 65 Q50 80 65 65" stroke="black" stroke-width="4" fill="transparent" />
</svg>
</div>
<h4>وفيما يلي العناصر الأساسية للمثال :</h4>
<ul>
<li>عنصر <code class="br">svg</code> هو الحاوية <em>container</em> للرسم بأكمله. فهو يُهيئ المساحة <em>space</em> التي تظهر فيها جميع الأشكال <em>shapes</em>. كل ما تريد رسمه باستخدام SVG، مثل الدوائر <em>circles</em> والخطوط <em>lines</em> والمسارات <em>paths</em>، يوضع داخل عنصر <code class="br">svg</code>.</li>
<li>يُستخدم عنصر الدائرة <code class="br">circle</code> لرسم الوجه والعينين. تُشكّل دائرة كبيرة الوجه الأصفر، ودائرتان صغيرتان تُشكّلان العينين.</li>
<li>يُستخدم عنصر المسار <code class="br">path</code> لرسم الابتسامة، ويُنشئ خطًا منحنيًا <em>curved line</em> للفم.</li>
<li>يحتوي كل عنصر <strong>SVG</strong> على سمات <em>attributes</em> تتحكم في مظهره وموقعه داخل منطقة الرسم <em>drawing area</em>.</li>
</ul>
<h4>إليك بعض الأمثلة الإضافية. لتغيير لون أيٍّ من الأمثلة، حدّث قيمة سمة التعبئة <code class="br">fill</code> إلى أي لون مُسمّى، مثل الأحمر <code class="br">red</code>، والأخضر <code class="br">green</code>، والأزرق <code class="br">blue</code> ، والأصفر <code class="br">yellow</code>، إلخ.</h4>
<h4>الكود :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<!-- Star Icon -->
<svg width="50" height="50" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L14.9 8.6L22 9.3L17 14.1L18.3 21.2L12 17.8L5.7 21.2L7 14.1L2 9.3L9.1 8.6L12 2Z"/>
</svg>
<!-- Heart Icon -->
<svg width="50" height="50" viewBox="0 0 24 24" fill="crimson" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 6 4 4 6.5 4C8 4 9.5 4.8 10.5 6.09C11.5 4.8 13 4 14.5 4C17 4 19 6 19 8.5C19 12.28 15.6 15.36 10.45 20.04L12 21.35Z"/>
</svg>
<!-- Checkmark Icon -->
<svg width="50" height="50" viewBox="0 0 24 24" fill="green" xmlns="http://www.w3.org/2000/svg">
<path d="M20.29 5.71L9 17L3.71 11.71L5.12 10.29L9 14.17L18.88 4.29L20.29 5.71Z"/>
</svg>
</code></pre>
</div>
<p>متى ترغب باستخدام ملفات <strong>SVG</strong> ؟ تُعدّ الأيقونات <strong>icons</strong> من أفضل الاستخدامات. إذا كنت ترغب في إنشاء نقاط تعداد نقطية مخصصة، أو إضافة أيقونات إلى روابطك <em>links</em> لتمثيل منصات التواصل الاجتماعي، فإن استخدام ملفات SVG هو الخيار الأمثل. تستخدم <strong>Font Awesome</strong>، إحدى أشهر مكتبات الأيقونات، صور VG لأيقوناتها. كما تُعد ملفات VG رائعة لشعارات <strong>logos</strong> صفحات الويب، نظرًا لدقتها في القياس. تتيح لك هذه الملفات تكييف تصميمك <em>layout</em> مع أي تصميم متجاوب <strong>responsive</strong> تحتاجه. في المرة القادمة التي تمتلك فيها ملف SVG محليًا، حاول فتحه باستخدام محرر نصوص text editor والتعديل على الكود <em>playing with the code</em>.</p>
<!-- Questions أسئلة-->
<div class="questions">
<h4>أسئلة :</h4>
<h5>ما هي الصورة النقطية raster image ؟</h5>
<p>١. صورة تخزن المسارات paths والخطوط lines والنقاط points والمنحنيات curves. ❌</p>
<p><mark>٢. صورة تخزن بيانات الألوان لكل بكسل pixel. ✅</mark></p>
<p>٣. جميع الصور صور نقطية raster images. ❌</p>
<p>٤. صورة قابلة للتحجيم بسهولة easily scalable. ❌</p>
<br>
<h5>ما هي الصورة المتجهة vector image ؟</h5>
<p><mark>١. صورة تخزن المسارات paths والخطوط lines والنقاط points والمنحنيات curves. ✅</mark></p>
<p>٢. صورة تخزن بيانات الألوان لكل بكسل pixel. ❌</p>
<p>٣. جميع الصور متجهة vector images ❌</p>
<p>٤. صورة يصعب تحجيمها not easily scalable. ❌</p>
<br>
<h5>كيف يخزن SVG البيانات data ؟</h5>
<p>١. كبكسلات As pixels. ❌</p>
<p>٢. كنظام ثنائي As binary. ❌</p>
<p>٣. كنظام سداسي عشري As hexadecimal. ❌</p>
<p><mark>٤. كنظام XML. ✅</mark></p>
</div>
</section>
<!-- Pages -->
</div>
<div class="page-nav">
<a class="prev" href="./basic12.html">→ السابق</a>
<a class="next" href="./basic14.html">التالي ←</a>
</div>
</main>
</body>
</html>