شرح الدرس
الوحدة 6 | تطوير المواقع الإلكترونية | نتاج التعلم (ج)
تطوير المواقع الإلكترونية
الوحدة 6 | تطوير المواقع الإلكترونية | نتاج التعلم (ج)
- هذه أيضًا نسبة كبيرة من مساحة خادم الويب.
- ولكن مع ظهور HTML5، يتم تضمين المزيد من مقاطع الفيديو في صفحات الويب التي يمكنها الآن عرض الرسوم المتحركة والفيديو دون الحاجة إلى مكون إضافي.
- لذلك، لم تعد هناك حاجة إلى تحديثات المكونات الإضافية المستمرة، وهذا يعني أن مقاطع الفيديو والرسوم المتحركة ستعمل بسرعة أكبر وسلاسة.
تصدير الأصول الرقمية
- بمجرد إنشاء أصولك الرقمية وتطويرها باستخدام نوع ملف مناسب، يمكن بعد ذلك تصدير هذه الملفات لاستخدامها في الموقع الإلكتروني.
- عند تصدير ملفاتك، يجب عليك تطوير دليل مجلد يخزن جميع أصولك، بما في ذلك الصور والأصوات ومقاطع الفيديو والرسوم المتحركة، بالإضافة إلى ملفات CSS. وهذا يعني أنه ستُخزّن جميع ملفاتك بشكل مناسب وستتمكن من الرجوع إليها عند برمجة حل موقعك الإلكتروني.
تطوير موقع إلكتروني يلبي متطلبات العميل
لا يمكنك إنشاء موقع إلكتروني إلا بعد اكتمال تصميمه واختباره وإعداد جميع الأصول وموافقة العميل عليه.
لغات البرمجة النصية من جانب العميل
على الرغم من أن HTML هي أساس جميع صفحات الويب، إلا أنها كلغة محدودة جدًا ولذلك يجب إدخال لغات أخرى لإنشاء ميزات أكثر تقدمًا على صفحات الويب. تُستخدم لغة البرمجة النصية من جانب العميل لكتابة الكود المدرج في HTML. عندما تُنزّل صفحة الويب على متصفح المستخدم، يُشغّل البرنامج النصي على حاسوب المستخدم. بمجرد تطوير الموقع الإلكتروني باستخدام لغات البرمجة النصية من جانب العميل، هناك بعض الأشياء الأخرى التي تحتاج إلى مراعاتها قبل اكتمال تطوير الموقع الإلكتروني.
تضمين البرامج النصية من جانب العميل في صفحات الويب
اتبع العملية الموجودة أعلى الصفحة 32 لتضمين البرامج النصية الأصلية من جانب العميل في صفحات الويب لتوفير المزيد من التفاعل وتحسين قابلية استخدام الموقع الإلكتروني.
وقفة للتفكير
يمكن استخدام البرمجة النصية من جانب العميل لتوفير أنواع مختلفة من التفاعل لصفحات الويب. وباستخدام موارد مثل الإنترنت أو الكتب، تحقق مما إذا كان بإمكانك إنشاء الوظائف الآتية داخل صفحة ويب:
- ضع تاريخ اليوم في رأس صفحة الويب.
- ضع الوقت الحالي في تذييل صفحة الويب واجعله يعمل في الوقت الفعلي.
- باستخدام حقل نص النموذج، قم بتمكينه بحيث عند كتابة النص والضغط على المفتاح <Tab>، سَتُحوّل النص إلى أحرف كبيرة.
- اعرض تنبيهًا عندما يزور أحد الأشخاص موقعك الإلكتروني.
- أنشئ عدادًا للزيارات.
- تلميح: فكر في العمل ضمن أزواج لمعرفة ما إذا كان بإمكانك التوصل إلى الحل الصحيح. غالبًا ما يعمل مطورو المواقع الإلكترونية معًا لتطوير حلول للمشكلات.
- توسيع الأفق: ابحث عن كيفية القيام بذلك، والمزايا والعيوب التي يجلبها واقترح بديلاً لاستخدام JavaScript.
المهارات
المهارات المعرفية/العمليات والإستراتيجيات المعرفية:
- التحليل
- اتخاذ القرار
- التعلم التكيفي
العمل الجماعي والتعاون:
- التواصل
موضوعات ذات صلة
لتذكير نفسك بماهية البرمجة النصية من جانب العميل، راجع قسم مكان تشغيل البرامج النصية، الصفحة 10.
خطوة بخطوة: إنشاء بحث بسيط في الكتالوج باستخدام JavaScript:
- باستخدام Notepad++ أو أداة RAD مثل Dreamweaver، أنشئ صفحة ويب تحتوي على ثلاثة منتجات.
- أسفل علامة <body>، أدخل الكود الآتي:
``
<!DOCTYPE html> <html> <body> <script> necklace = 1 chocolates = 2 toy = 3 product=prompt("Please enter search product", "") if (product=="necklace") {document.write("Item found. Catalogue number " + necklace)} else if (product=="chocolates") {document.write("Item found. Catalogue number " + chocolat} else {document.write("Item found. Catalogue number " + toy)} </script> </body> </html>``
- عدّل الكود الخاص بك ليطابق منتجاتك الثلاثة.
- شغّل صفحة الويب في متصفح لاختبار ما إذا كانت تعمل مع جميع المنتجات الثلاثة. (يجب عرضه في 10 Windows وأحدث إصدار من متصفح الويب الشهير.)
أنواع لغات برمجة الويب:
- في.بي.سكريبت (VBScript) وجافا-سكريبت (JavaScript) هما لغتا ويب من جانب العميل. وهذا يعني أن الكود يُنفّذ باستخدام حاسوب المستخدم وليس خادم الويب. يؤدي هذا إلى تحرير قوة المعالجة التي كان من الممكن استخدامها على الخادم.
- وتستطيع كلتا اللغتين إنشاء تفاعل على موقع إلكتروني، من قبيل النماذج والبحث وحتى الألعاب. على الرغم من استخدام VBScript وJavaScript لإنشاء وظائف إضافية داخل صفحات الويب، إلا أنهما مختلفتان ومختلفة.
- لغة VBScript هي إصدار مبسط من Visual Basic طورته Microsoft للتعامل مع الطبيعة الثابتة للمواقع الإلكترونية.
- وعيب استخدام VBScript هو أنها مدعومة في Internet Explorer فقط، بينما تقدم JavaScript دعمًا عبر الأنظمة الأساسية لمعظم متصفحات الويب. يشير الجدول 6.6 إلى بعض الاختلافات بين اللغتين.
| الجدول 6.6 الاختلافات بين JavaScript وVBScript | |
|---|---|
| جافا سكريبت | VBScript |
| تميل إلى أن تكون لغة البرمجة الافتراضية لمعظم متصفحات الويب | ليست اللغة الافتراضية التي يختارها مطورو المواقع الإلكترونية |
| توفر دعمًا عبر الأنظمة الأساسية لجميع متصفحات الويب تقريبًا | تدعم Internet Explorer فقط |
| (+) تُستخدم للإضافة وكذلك التسلسل | & تُستخدم للتسلسل |
| حساسة لحالة الأحرف | ليست حساسة لحالة الأحرف |
| { } تُستخدم للدلالة على الوظائف | تُستخدم الوظيفة والوظيفة النهائية |
4 خطوات الوحدة 6 | تطوير المواقع الإلكترونية | نتاج التعلم (ج)
استخدام لغات البرمجة
تستخدم لغة البرمجة النصية مثل JavaScript في العديد من الاستخدامات. ونوضح بعض هذه الاستخدامات أدناه:
التنبيهات
تتضمن التنبيهات بعض النوافذ المنبثقة لتنبيه المستخدم إلى شيء ما.
``html <!DOCTYPE html> <html> <body> <script> alert('This is what an alert message looks like.'); </script> </body> </html> ``
تأكيد الاختيارات
تأكيد الاختيارات هو شكل من أشكال التحقق من الصحة. ويمنح هذا المستخدم الفرصة للتحقق مما إذا كان قد نقر على الخيار الصحيح.
``html <!DOCTYPE html> <html> <body> <button onclick="confirmChoice()">Click and see what happens</button> <script> function confirmChoice() { confirm("Press a button"); } </script> </body> </html> ``
اكتشاف المتصفح
يُستخدَم هذا لتحديد المتصفح الذي تستخدمه.
``html <html> <body> <script> document.getElementById("demo").innerHTML = "Name is " + navigator.appName + ". Code name is " + navigator.appCodeName; </script> </body> </html> ``
إنشاء عمليات التمرير
تضيف عمليات التمرير مزيدًا من التفاعل المرئي. ويمكن لصفحة الويب استخدام صور التمرير أو الأزرار في هذه الحالة.
``html <html> <body> <img onmouseover="makeBigger(this)" onmouseout="normalImage(this)" border="1" src="lobster.gif" alt="lobster" width="50" height="50"> <script> function makeBigger(x) { x.style.height = "80px"; x.style.width = "80px"; } function normalImage(x) { x.style.height = "32px"; x.style.width = "32px"; } </script> </body> </html> ``
المصلح الرئيس
التحقق من الصحة - فحص تلقائي من جانب الحاسوب يضمن أن البيانات المدخلة معقولة ومنطقية.
التحقق من صحة الإدخال
التحقق من صحة الإدخال هو أسلوب يستخدم لمعرفة ما إذا كان المستخدم قد أدخل نصًا داخل مربع نص. وإليك مثال على ذلك:
``html <html> <head> <script> function validateEntry() { var x = document.forms["validation"]["forename"].value; if (x == null || x == "") { alert("You cannot have a blank field. Please type in your forename"); return false; } } </script> </head> <body> <form name="validation" action="validation_blank_field.asp" onsubmit="return validateEntry()" method="post"> Forename: <input type="text" name="forename"> <input type="submit" value="Submit"> </form> </body> </html> ``
معالجة النماذج
تسمح معالجة النماذج للمستخدمين بملء النماذج وإرسالها، إما لكي يعالجها الموقع الإلكتروني وإما عن طريق البريد الإلكتروني إلى صندوق الوارد. ويتيح هذا المثال للمستخدم تعطيل القائمة المنسدلة وتمكينها باستخدام JavaScript.
``html <html> <head> <script> function disablecombobox() { document.getElementById("selectFish").disabled=true; } function enablecombobox() { document.getElementById("selectFish").disabled=false; } </script> </head> <body> <form> <select id="selectFish"> <option>Shellfish</option> <option>Monkfish</option> <option>Skate</option> <option>Prawns</option> </select> <input type="button" onclick="disablecombobox()" value="Disable list"> <input type="button" onclick="enablecombobox()" value="Enable list"> </form> </body> </html> ``
المصطلحات الرئيسة
بناء الجملة - مجموعة من القواعد الفريدة لكل لغة برمجة، والتي تحدد مجموعة الرموز التي تعتبر مهيكلة بشكل صحيح داخل تلك اللغة. عامل النقطة - هو نقطة توقف كاملة (.) تستخدم لتحديد الطريقة التي سيستخدمها الكائن.
يرد في ما يأتي قائمة بالبنى المختلفة:
- الحلقات - تكون الحلقات مفيدة إذا كنت تريد تشغيل الكود نفسه بشكل متكرر، في كل مرة بقيمة مختلفة. يمكن استخدام الحلقات غالبًا مع المصفوفات.
- اتخاذ القرار - عملية استخدام عبارة يتم من خلالها إجبار المستخدم على الاختيار على صفحة ويب. على سبيل المثال، هل تريد بالتأكيد الخروج من هذه الصفحة؟ الخيارات هي إما "نعم" وإما "لا".
- الوظائف - الوظيفة عبارة عن مجموعة من الأكواد المصممة لأداء مهمة معينة. ويمكن تنفيذ تلك الوظيفة عندما يستدعيها شيء ما.
``html <!DOCTYPE html> <html> <body> <script> function hello() { <!--This is where the function is named--> { alert("Hello World!") } </script> <input type="button" onclick="hello()" <!--This is where the function is called--> value="Click here!"> </body> </html> ``
- تمرير المعلمة - يحدث تمرير المعلمة عندما يتم تمرير قيمة إلى دالة ثم تستخدمها الوظيفة في أثناء تشغيلها.
- التعامل مع الأحداث - الأحداث هي "أشياء" تحدث بناءً على تفاعل المستخدم أو شيء يفعله المتصفح. على سبيل المثال:
- تم الانتهاء من تحميل صفحة ويب HTML
- تم تغيير حقل إدخال HTML
- تم النقر فوق زر HTML.
- الأساليب - الأسلوب عبارة عن إجراء يمكن تنفيذه بواسطة كائن. توضح الصورة أدناه كيفية استخدام طريقة UpperCase لإجبار الكلمة بأكملها على أن تكون بأحرف كبيرة.
``html <!DOCTYPE html> <html> <body> <script> hw="Hello World" document.write(hw.toUpperCase()) </script> </body> </html> ``

المصفوفة - مجموعة من المتغيرات المفهرسة، ولكل منها قيمة واحدة. الكائن - الكائن هو نوع من البيانات التي تعرف أشياء عن نفسها (خصائصها) وتعرف كيفية القيام بالأشياء (الأساليب).
المهارات المعرفية/العمليات والإستراتيجيات المعرفية:
- التحليل
- اتخاذ القرار
- التعلم التكيفي
أخلاقيات العمل/الضمير:
- التوجيه الذاتي
العمل الجماعي والتعاون:
- التواصل
استخدام لغة أوراق الأنماط المتتالية (CSS) والوصول إليها من
تسمح لك لغة أوراق الأنماط المتتالية (CSS) بإنشاء تخطيط ونمط قياسيين يمكن استخدامهما بسهولة في كل صفحة ويب في الموقع. ونظرًا لهذا التوحيد القياسي، أصبح من السهل أيضًا تعديل الموقع وصيانته. على سبيل المثال، في HTML، قد يتطلب تغيير لون الخط لجميع العناوين إلى اللون الأخضر تغيير كل منها على حدة. وعند استخدام CSS، يجب تغيير قيمة واحدة فقط وسيتم تطبيق التغيير على الفور (بالتتالي) في جميع أنحاء الموقع بأكمله لكل عنوان. يمكنك استخدام الفئات والمعرف للمساعدة على التحكم على المظهر. ويمكن تجميع عدد من عناصر HTML بحسب سماتها في فئة. لتحديد عناصر بفئة معينة، تكتب (.) متبوعًا باسم الفئة، مثل (top). المعرّف فريد ولا يمكن أن ينتمي إلا إلى عنصر واحد فقط في الصفحة. لتحديد عنصر بمعرف معين، تكتب (#) متبوعًا باسم المعرف، مثل (para1). يمكن كتابة CSS في HTML بثلاث طرق مختلفة:
- عنصر داخلي
- رأس الصفحة
- عنصر خارجي.
عنصر داخلي
يتم تعريف CSS في منطقة الكود نفسها مثل تلك التي سيتم تطبيقها عليها. `` <h1 style="color:red; Font-family: Courier New; font-size: 40pt;"> This demonstrates an example of inline CSS Heading</h1> ``
رأس الصفحة
يتم تعريف CSS في القسم الرئيس لكل صفحة ويب ويُطبق في الموقع بكامله.
``html <style> H1 { Background: red; Color: white; Font-family: Times New Roman; } </style> ``
عنصر خارجي
يتم تعريف CSS في ملف منفصل، يمكن لجميع صفحات الويب الرجوع إليه. هذا ملف.css، وليس ملف.html. يظهر السطر، الذي يمكن وضعه في رأس صفحة HTML للارتباط بصفحات CSS الخارجية، في الشكل 6.12. الوحدة 6 | تطوير المواقع الإلكترونية | نتاج التعلم (ج)
``html <link rel="stylesheet" href="styles.css"> ``
``css body { background-color: grey; } h1 { color: green; font-size: 25pt; font-style: italic; font-weight: bold; font-family: Arial; text-align: center; } p { color:white; } ``
انظر الأمثلة في الشكل 6.12 والشكل 6.13.

علامات
من المهم أن ندرك أن لغة HTML تتطور بمرور الوقت، وأن أحدث إصدار من HTML هو HTML5. في HTML5، تم إدخال علامات جديدة، وتمت إزالة بعض العلامات التي كانت موجودة في الإصدارات السابقة.
بحث
ابحث عن الاختلافات بين HTML 4.01 وHTML5. ما العلامات الجديدة التي تم إدخالها، والتي تمت إزالتها وما الاختلافات الأخرى؟ ما شعورك بالتحديات التي ينطوي عليها استخدام HTML5؟
يصف الجدول 6.7 بعض علامات HTML الشائعة والغرض منها وأمثلة عليها.
| الجدول 6.7 علامات HTML الشائعة | |||
|---|---|---|---|
| علامة الفتح | علامة الإغلاق | الغرض | مثال |
| <font> | </font> | تغيير النص. يمكن أن تحتوي علامة الفتح على معايير مثل اللون والحجم والوجه. | <font face="Arial" size="16">Text</font> |
| <strong> | </strong> | تجعل النص غامقًا. | <strong>Text</strong> |
| <em> | </em> | تجعل النص مائلاً. | <em>Text</em> |
| <li> | </li> | تُنشئ قائمة تحتوي على نقاط نقطية. | <li>first item</li><li>second item</li> |
| <table> | </table> | تُنشئ جدول (<tr> تقوم بإنشاء صفوف و<td> تقوم بإنشاء أعمدة). | <table><tr><td>top left</td><td>top right</td></tr><tr><td>bottom left</td><td>bottom right</td></tr></table> |
| <img> | بلا علامة إغلاق | تقوم بإدراج صورة. إحدى العلامات النادرة التي ليست في زوج. | <img src="Images\logo.gif"> |
| <a> | </a> | تقوم بإنشاء ارتباط تشعبي. يمكن استخدامها حول النص أو الصورة. | <a href="index.html">Go to home page</a><a href="index.html"><img src="Images\logo.gif"></a> |
الوحدة 6 | تطوير المواقع الإلكترونية | نتاج التعلم (ج)
خطوة بخطوة: أنشئ صفحة CSS بسيطة
- افتح برنامج Notepad++ أو محرر نصوص مشابه. احفظ الملف باسم myCSSwebpage.html
- أدخل هذا الكود ثم احفظ الملف.
``
<!DOCTYPE html> <html> <head> <title>My First CSS</title> <link rel="stylesheet" href="myCSS.css"> </head> <body> Here is some normal text. <br> <h1>Here is the text with CSS tags.</h1> </body> </html>``
- أنشئ ملفًا جديدًا واحفظه باسم myCSS.css. أدخل الكود الآتي، ثم احفظ الملف.
``
h1 { font-family: Arial; color: red; font-size: 20pt; }``
- انتقل إلى موضع حفظ ملف the.html باستخدام أيقونة My Computer. ثم انقر نقرًا مزدوجًا فوق ملف html لفتحه في متصفحك.
لمزيد من المعلومات حول توافق المواقع الإلكترونية مع الأجهزة المحمولة، راجع قسم التوافق مع الأجهزة المحمولة والأجهزة اللوحية، صفحة 41.
بعد ذلك خطوة بخطوة، أكمل ما يأتي:
- في myCSS.css، غير الخط إلى Wingdings. احفظ ملف css. وحدث ملف html. في المتصفح.
- في myCSS.css، غير اللون إلى اللون الأزرق والحجم إلى 100 نقطة. احفظ ملف css. وحدث ملف html. في المتصفح.
- الآن بعد أن قمت بذلك، احفظ صورة من الإنترنت وادرجها في ملف css. الخاص بك.
- طوّر الموقع الإلكتروني بحيث يكون له محاذاة مختلفة للمحتوى.
- تلميح: استخدم الطريقة الخارجية لملف CSS حيث إنه من الأسهل فصل HTML عن CSS. في بعض الأحيان، يُسهّل هذا الأمر من تطوير موقعك الإلكتروني.
- توسيع الأفق: فكر في كيفية تموضع العناصر الخاصة بك على صفحة الويب الخاصة بك بحيث لا تقتصر على المحاذاة. من المهم أن تجعل موقعك الإلكتروني قابلاً للتكيف مع الأجهزة المحمولة، لذلك ستحتاج إلى التأكد من أن كود CSS يعكس ذلك.

نموذج صندوق
تُستخدم لغة CSS لإنشاء المخططات على صفحات الويب. وباستخدام هذه الطريقة، يمكن عرض الصفحات في أي متصفح ويب أو بأي دقة مع حفظ سلامة التصميم. وهذا بسبب إعادة حساب التخطيط في كل فتحة. لذلك، يمكن تصميم صفحة الويب الناتجة بدقة متناهية، ويمكن أن تكون مثالية على مستوى البكسل. يقوم نموذج صندوق CSS ببناء صفحة الويب بطريقة مشابهة للجدول. يرد تعريف كل من الهوامش والحدود والمساحة المتروكة والمحتوى (انظر الشكل 6.14 للحصول على مثال).
- منطقة المحتوى: المكان حيث تُعرض أي نصوص وصور.
- المساحة المتروكة: هي المساحة الفارقة بين المحتوى والحد.
- الحدود: التصميم المحيط بالمساحة المتروكة ومنطقة المحتوى، والتي تحدد حافة الصندوق.
- الهامش: المساحة الفارغة حول كل شيء بحيث لا يُعرض المربع حتى حواف الشاشة.
تعتبر المساحة المتروكة والحدود والهامش اختيارية، وتُعيّن بقيمة افتراضية تساوي الصفر إذا لم يعينها المصمم. وعند هذه القيمة ستكون غير مرئية.
أنواع المستندات
يجب أن يكون إعلان <!DOCTYPE> أول شيء في مستند HTML الخاص بك، قبل علامة <html>. فهو ليست من علامات HTML. بل هو تعليمات لمتصفح الويب حول إصدار HTML الذي تمت كتابة الصفحة به. عند إنشاء صفحة ويب، يجب عليك دائمًا إضافة إعلان <!DOCTYPE> إلى مستندات HTML الخاصة بك حتى يعرف المتصفح نوع المستند المتوقع. عند استخدام حزمة تطبيقات سريعة (RAD) مثل Adobe Dreamweaver، يؤدي ذلك تلقائيًا إلى توفيرها لك. وعند برمجة صفحة ويب باستخدام محرر نصوص، سيتعين عليك وضع ذلك يدويًا. أحدث نوع من المستندات موجود في HTML5 ويبدو كما يأتي: الوحدة 6 | تطوير المواقع الإلكترونية | نتاج التعلم (ج)
أطر
إطار CSS عبارة عن مكتبة من لغة CSS (أوراق الأنماط المتتالية) للمساعدة على جعل مواقعك الإلكترونية متوافقة مع المعايير.
التوافق مع الأجهزة المحمولة والأجهزة اللوحية
- من المهم عند تطوير موقع إلكتروني أن تفكر في كيفية توفيق موقعك الإلكتروني مع الأجهزة المحمولة والأجهزة اللوحية.
- وهذا ما يسمى تصميم الويب المتجاوب (RWD).
- يتضمن تصميم RWD استخدام CSS وHTML5 لتغيير حجم المحتوى أو إخفائه أو تقليصه أو تكبيره أو نقله لجعله يبدو جيدًا على أي شاشة.
- وهناك عدد من طرق تصميم RWD لإنشاء موقع إلكتروني متوافق مع الأجهزة المحمولة والأجهزة اللوحية.
الاستخدام الفعال للأدوات والتقنيات
- هناك العديد من لغات البرمجة النصية مثل HTML وJavaScript وCSS، وقد يكون من الصعب جدًا استخدام التقنيات المرتبطة باستخدامها لإعداد المواقع الإلكترونية بسهولة أكبر، على سبيل المثال حزمة تطوير التطبيقات السريعة (RAD) Adobe Dreamweaver. تسمح لك حزم RAD هذه بإنشاء مواقع إلكترونية بسرعة كبيرة.
- على سبيل المثال، لا عليك سوى تمييز النص والنقر على زر المحاذاة المركزية. ويتم إنشاء كود هذا التغيير تلقائيًا لك. يبدو هذا النهج أكثر فعالية للاستخدام.
- ولكن، لديك المزيد من التحكم في موقعك الإلكتروني عندما تقوم ببرمجته يدويًا باستخدام محرر نصوص.
تحميل الملفات إلى خادم الويب/الجهاز المضيف
للسماح للجمهور بمشاهدة الموقع الإلكتروني عبر الإنترنت، يجب تحميله على خادم الويب أو الحاسوب أو الجهاز المضيف. ويُعرف هذا باسم البث المباشر. تتضمن عملية التحميل بروتوكولًا يسمى بروتوكول نقل الملفات (FTP). يمكن تحميل الملفات عبر FTP (المعروف باسم FTPING) مباشرة من خلال متصفح الويب أو باستخدام برنامج مثل فايلزيلا (FileZilla). ليس فقط صفحات الويب التي يجب تحميلها على خادم الويب، ولكن جميع الملفات المرتبطة بما في ذلك أصول الوسائط وملفات CSS. وهذا لأن هذه الملفات تُدرج في صفحات الويب. بدلاً من ذلك، يتم ربطهم بهم ولكنهم يظلون ككيانات منفصلة.
فكّر مليًا
يعد العمل وفقًا للوقت والجدول الزمني أمرًا مهمًا عند تطوير موقع إلكتروني. وغالبًا ما تُحدّد الأطر الزمنية في بداية المشروع. سيحتاج شخص ما إلى تحمل مسؤولية ضمان تسليم جميع أجزاء المشروع في الوقت المحدد. على سبيل المثال، سيتم تحديد مدد زمنية معينة لمرحلة المتطلبات والتصميم والبرمجة والاختبار وما إلى ذلك. ومن هنا، تتجلى أهمية القيادة القوية في الإشراف على كل هذه المراحل. إذا كانت إحدى المراحل تستغرق وقتًا طويلاً جدًا، أو كانت غير صحيحة، فسيكون لذلك تأثير غير مباشر في المراحل التالية. لذلك من المهم إدارة مشروع الموقع الإلكتروني توفير قيادة قوية وتواصل جيد.
مراجعة الموقع الإلكتروني
بعد إنشاء الموقع الإلكتروني، من الضروري مراجعته للتأكد من أنه مناسب للغرض والجمهور المقصودين ويلبي كل متطلبات العميل. ويمكن أن يحدد هذا أيضًا أي مجالات لمزيد من التحسين.
الجودة بالمقارنة مع المواقع الإلكترونية المشابهة الأخرى
- بعد اكتمال موقعك الإلكتروني، من المفيد مقارنته بمواقع إلكترونية أخرى مشاركة له في الموضوع.
- تذكر أنه يتم إنشاء الملايين من المواقع الإلكترونية يوميًا، لذلك يجب عليك بذل جهد أكبر من منافسيك حتى يصبح موقعك الإلكتروني مميزًا.
- وستمكنك مقارنة موقعك الإلكتروني بالمواقع الإلكترونية المشابهة من تحديد المناطق التي يتميز
المهارات المعرفية/العمليات والإستراتيجيات المعرفية:
- التحليل
- اتخاذ القرار
العمل الجماعي والتعاون:
- التواصل
- العمل الجماعي
- فيها موقعك الإلكتروني بشكل إيجابي (يُقارن بشكل إيجابي). قد تكون هناك أيضًا عناصر من المواقع الإلكترونية الأخرى أفضل من موقعك أو التي تعمل بشكل جيد خاص، والتي يمكن دمجها في موقعك.
- يمكنك الحصول على أفكار من المواقع الإلكترونية هذه لاستخدامها في التحسين المستقبلي لموقعك الإلكتروني، كما يمكنك تحديد المجالات التي تحتاج إلى تحسين في تحسين في المواقع الإلكترونية الأخرى.
- لذلك، عند مواصلة تطوير موقعك الإلكتروني، يمكنك استخدام ميزات قوية على مواقع إلكترونية مماثلة واستبعاد تلك الميزات التي حددتها على أنها بحاجة إلى التحسين.
- وسيساعدك هذا البحث على إعداد موقع إلكتروني يصمد أمام منافسة المواقع الإلكترونية المماثلة.
الملاءمة للغرض والجمهور المقصودين
- يجب مراجعة موقعك الإلكتروني لتحديد ما إذا كان مناسبًا للغرض والجمهور الذي تم تصميمه من أجله أم لا.
- غالبًا ما يتضمن ذلك إجراء بعض الأبحاث السوقية للحصول على تعليقات من المستخدمين المحتملين وإجراء المناقشات مع العميل لمعرفة ما إذا كانوا راضين عن الموقع الإلكتروني العام.
- تذكر أنه على الرغم من أن الأشخاص الآخرين هم الذين سيستخدمونه في النهاية وهؤلاء هم الأشخاص الذين تحتاج أنت (وكذلك العميل) إلى تلبية احتياجاتهم.
- من المحتمل أن العميل قد لا يفهم تمامًا تفضيلات التصميم للفئة المستهدفة من الموقع الإلكتروني، وفي هذه الحالة قد تساعد تعليقات المستخدم الخاصة بك على إعلامك أنت والعميل بكيفية تحسين الموقع الإلكتروني.
الملاءمة مقابل متطلبات العميل
- في بداية تطوير الموقع الإلكتروني، يعد أحد العناصر الأولى التي أُنشئت هو قائمة المتطلبات. تحدد متطلبات SMART هذه ما يجب أن يكون الموقع الإلكتروني قادرًا على القيام به وكيف ينبغي أن يعمل.
- ومن أجل معرفة ما إذا كان تطوير الموقع الإلكتروني ناجحًا، من المهم مقارنة المتطلبات الأصلية بالموقع النهائي المطور.
- يجب أن يكون هناك تقييم لما إذا كنت قد نجحت في تلبية المتطلبات الأصلية.
- فإذا وجدت أن هناك بعض المتطلبات التي لم يتم الوفاء بها، فيمكن تحسين هذه المجالات وتطويرها بشكل أكبر لتلبية متطلبات العميل بالكامل.
تحمل المسؤولية الفردية هو سمة سلوكية مهمة، سواء في مجال تكنولوجيا المعلومات أو أي مجال آخر من مجالات الحياة. هناك دائمًا أوقات نفشل فيها في تلبية التوقعات. فهذه هي الطبيعة البشرية ولا حرج فيها طالما أننا نتحمل المسؤولية عن أفعالنا (نحن مسؤولون عنها). وأهم شيء هو أنه عندما يحدث هذا، يفهم الشخص الخطأ الذي حدث ويضع تدابير لضمان عدم حدوثه مرة أخرى.
القيود القانونية والأخلاقية
يجب مراجعة موقعك الإلكتروني للتأكد من أنه يتوافق مع أي اعتبارات قانونية وأخلاقية. على سبيل المثال، سبق أن ذكرنا أنه يجب إتاحة الوصول بالكامل للمواقع الإلكترونية. وهذا يعني أن موقعك الإلكتروني يجب أن يحتوي على عناصر مثل:
- علامات بديلة مدرجة داخل الصور
- تنقل واضح
- وثائق/صفحات ويب مفهومة
- عدم استخدام اللون وحده لتوفير المعنى.
الوحدة 6 | تطوير المواقع الإلكترونية | نتاج التعلم (ج)
علاوة على ذلك، يجب مراجعة موقعك الإلكتروني للتأكد من أنه لا يخالف القوانين التشريعية الحالية في منطقتك أو بلدك.
نقاط القوة والتحسينات
قد تلاحظ أن المواقع الإلكترونية تتطور وتتغير مع الزمن. ويلاحظ في المواقع الإلكترونية الجيدة أنه يتعين مواكبة الاتجاهات في التصميم الجيد وتلبية احتياجات جميع المستخدمين. لذلك، بمجرد تطوير موقعك الإلكتروني، من المهم تحديد مجالات القوة وأي مجالات تحتاج إلى تحسين داخله. فكر في موقع إلكتروني للتواصل الاجتماعي مثل فيسبوك، الذي يضم ملايين المستخدمين المسجلين. لقد تطور موقع فيسبوك باستمرار، مع مراعاة التعليقات الواردة من الآخرين وإجراء التحسينات. بصفتك مطورًا للموقع الإلكتروني، نادرًا ما تكون راضيًا عن المنتج النهائي ويجب أن تحاول دائمًا إيجاد طرق لتحسين موقعك الإلكتروني وتكييفه. ومع ذلك، تجدر الإشارة إلى أن هناك قيودًا على التحسينات التي يمكنك إجراؤها على المواقع الإلكترونية. فلا يمكن لمطوري الويب دائمًا استيعاب جميع التعليقات والتعقيدات لأنها قد تكون مقيدة بالوقت والميزانية. لذلك، تحتاج إلى تحديد التحسينات التي يمكن إجراؤها بعناية. ويجب النظر في هذه القرارات داخل فريق تطوير الموقع ومع العميل. فيجب أن تفكر في التحسينات التي ستكون ذات فائدة أكبر للموقع الإلكتروني والتي ستكون أكثر فائدة لأعمال العميل. كما يجب وضع التحسينات الأخرى جانبًا في الوقت الحالي ولكن يتم التخطيط لها في إطار التطوير المستقبلي في وقت لاحق.
تحسين الموقع الإلكتروني
بالإضافة إلى مراجعة الموقع الإلكتروني، من الضروري أن يُختبر الموقع الإلكتروني بالكامل للتأكد من أنه مناسب للغرض ويعمل بشكل صحيح. وقد تكون هناك عناصر ضمن الموقع الإلكتروني لا تعمل على النحو المنشود وبالتالي تحتاج إلى التحسين من أجل تلبية متطلبات العميل. ويمكن تحسين موقعك الإلكتروني بحيث يتم تشغيله بسرعة وكفاءة أكبر. يرد في ما يأتي الطرق التي يمكن من خلالها تحسين موقعك الإلكتروني ليعمل بشكل أكثر فعالية.
- تقليل طلبات HTTP - يمكن القيام بذلك باستخدام CSS بدلاً من الصور متى أمكن ذلك:
- دمج أوراق أنماط متعددة في ورقة واحدة
- تقليل البرامج النصية التي تعمل على الصفحة.
- ضغط ملفات الويب الكبيرة - الضغط يقلل النطاق الترددي الذي تستخدمه صفحة الويب الخاصة بك، وبالتالي يقلل زمن استجابة HTTP؛ وهناك أدوات عبر الإنترنت تمكنك من القيام بذلك.
- تجنب موارد (What You See Is What You Get) WYSIWYG هي موارد خاصة بالمواقع الإلكترونية تمكنك من إنشاء موقع إلكتروني بسرعة عن طريق إدراج كائنات الموقع الإلكتروني؛ وعلى الرغم من أنها تجعل من السهل إنشاء صفحة ويب، إلا أنها تنشئ رمزًا رمزيًا فوضويًا يمكن أن يبطئ موقعك الإلكتروني بشكل كبير.
- تحسين الصور - يمكن أن تستغرق الصور كبيرة الحجم وقتًا أطول للتحميل، لذلك من الأفضل تحسين صورك إلى الحجم المطلوب.
- تسليم CSS - ورقة الأنماط الخارجية هي أفضل طريقة لتحسين الموقع الإلكتروني إلى أقصى إمكاناته؛ نظرًا لأن المطلوب يكون ورقة أنماط واحدة فقط، وبهذا تقلل حجم الكود وتؤدي إلى تقليل تكرار الأكواد.
هذه مجالات إضافية لتحسين الموقع يمكن للمستخدم اختبارها والتي من شأنها زيادة أداء الموقع الإلكتروني. الوحدة 6 | تطوير المواقع الإلكترونية | نتاج التعلم (ج)
اختبارات الأداء والمستخدم
- ربما تكون اختبارات الأداء والمستخدم من أهم أشكال الاختبار.
- وهي تُستخدم من أجل اختبار وظائف الموقع الإلكتروني وللتأكد من أن كل شيء يعمل كما ينبغي.
- في هذه المرحلة، يمكنك استخدام خطة الاختبار التي طُوّرت خلال مرحلة التصميم وتوسيعها لإظهار النتائج والتعليقات الفعلية.
| الجدول 6.8 مثال خطة الاختبار مع النتائج | ||||||
|---|---|---|---|---|---|---|
| رقم الاختبار | الغرض من الاختبار | في صفحة | بيانات الاختبار | النتيجة المتوقعة | النتائج الفعلية | تعليق/لقطة شاشة |
| 1 | اختبر زر الصفحة الرئيسية | About.html | انقر بزر الماوس الأيسر | تحميل ملف Index.html | النجاح | عملت كما هو متوقع. لا يلزم اتخاذ أي إجراء آخر. |
| 2 | Logo.gif | Index.html | صفحة التحميل | يظهر في منتصف الصفحة | النجاح | ظهر الشعار في منتصف الصفحة كما هو متوقع. لا يلزم اتخاذ أي إجراء آخر. |
| 3 | اختبار علامة alt/title الخاصة بـ Logo.gif | Index.html | تمرير مؤشر الماوس فوق الشعار | يظهر تلميح نص الأداة | فشل | فشلت في العمل. عندما مررت فوق الشعار، لم يظهر أي شيء. لقطة الشاشة 1 |
| 3(ب) | اختبار علامة alt/title الخاصة بـ Logo.gif | Index.html | تمرير مؤشر الماوس فوق الشعار | يظهر تلميح نص الأداة | النجاح | نجحت في هذه المحاولة. لقد فشلت في وضع علامات الكلام الخاصة بعلامة alt. تعمل الآن كما هو متوقع. |
انظر إلى قسم خطة الاختبار بالصفحتين 20 و21، ولا سيما الجدول 6.4 بالصفحة 21. يجب عليك استخدام خطة الاختبار الخاصة بك لاختبار المستخدم لإظهار النتائج الفعلية.
نصائح
لا تنس وضع خطة الاختبار لديك في اتجاه أفقي. سيمنحك هذا مساحة أكبر لإنجاز الاختبار والاحتفاظ بجميع المعلومات ذات الصلة معًا في صف واحد.
التحقق من التفاعل والتوافق
- تذكر أنه يمكن أيضًا استخدام خطة الاختبار للتحقق من تفاعل الموقع الإلكتروني والتوافق مع متصفحات الويب الأخرى.
- على سبيل المثال، إذا قمت بتضمين أي برمجة نصية من جانب العميل مثل تضمين الوقت والتاريخ، فيجب اختبار ذلك.
- وتذكر أنه سيُعرض موقعك الإلكتروني في متصفح ويب مختلفة. وبالتالي، فإن الطريقة التي قد يظهر بها موقعك الإلكتروني في متصفح ويب قد لا تكون هي نفسها في متصفح آخر.
- لذلك، ستحتاج إلى التأكد من إنجاز خطة الاختبار الخاصة بك على متصفح ويب أو ثلاثة. عندما لا يعمل شيء ما كما هو متوقع، فيجب التعليق عليه في عمود "التعليق/لقطة الشاشة".
الحصول على تعليقات من الآخرين وتقييمها
يمكن أن يتخذ الاختبار العديد من الأشكال المختلفة. كما هو الحال في مرحلة التصميم، يمكنك تطوير استبيانات للحصول على تعليقات من الآخرين لمساعدتك على تحسين تصميماتك الأولية. يجب أن تحصل على تعليقات من المستخدمين المحتملين للموقع. ندرك أنه قد يكون من الصعب انتقاد شيء قمت بتطويره. لذلك من المهم، عند تطوير موقعك الإلكتروني، أن تحصل على تعليقات من عميلك والمستخدمين المحتملين والأقران لمعرفة ما إذا كان الموقع الإلكتروني يعمل بشكل صحيح، وما إذا كان يلبي متطلبات العميل وما إذا كان مناسبًا للغرض المقصود والجمهور.
تعد أداة القص (Snipping Tool) في Windows مفيدة حقًا لقص صور شاشتك لعرض لقطات الشاشة الخاصة بك للموقع الإلكتروني، عندما يكون لديك اختبار ناجح أو فشل. للوصول إليها، انتقل إلى شاشة Windows Start، وانقر على All apps (كل التطبيقات)، وانتقل لأسفل وانقر على Windows Accessories (ملحقات Windows)، ثم مرّر لأسفل وانقر فوق Snipping Tool (أداة القص).
الوقوف على التحسينات وتنفيذها
يمكن تكييف استبيانات التصميم الأولية للحصول على تعليقات المستخدمين حول الموقع الإلكتروني المطور باستخدام الأسئلة الكمية والنوعية. وستساعدك التعقيدات التي تحصل عليها على تحديد أين يمكن إجراء تحسينات على موقعك الإلكتروني. ولا تنس أن بحاجة إلى تقييم التعقيدات التي تتلقاها حول موقعك الإلكتروني. فنحن نرجو أن معظمها سيكون مناسبًا ومفيدًا، ولكن من الممكن أن يكون بعضها غير مناسب أو غير مفيد. على سبيل المثال، قد يعقب العميل على الموقع الإلكتروني لا يحتوي على عنصر معين لم يكن موجودًا في الملخص. ومن غير المعقول أن يطلب هذه الميزة في هذه المرحلة المتأخرة أو أنها خارج نطاق متطلبات الموقع الإلكتروني المتفق عليه. ومع ذلك، قد تحتاج إلى التفكير في تطوير هذه الميزة إذا كان العميل على استعداد لانتظار الموقع الإلكتروني والدفع مقابل الميزات الإضافية.
تطبيق النظرية
عند مطالبة العميل والمستخدمين المحتملين بالتعقيب على موقعك الإلكتروني، فمن المحتمل ألا تكون جميع التعقيدات إيجابية. بصفتك محترفًا في مجال تكنولوجيا المعلومات، من الضروري أن يكون لديك "أعصاب هادئة" مع الحفاظ أيضًا على الموضوعية والاحترافية. تذكر أن السمعة داخل صناعة الحوسبة مهمة جدًا. لذلك، يعد فهم كيفية الاستجابة للنتائج والتواصل الفعال من السمات الرئيسة لمطور المواقع الإلكترونية. بمجرد الانتهاء من موقعك الإلكتروني، ستحتاج إلى تقديم وإطلاق الموقع الإلكتروني الذي قمت بتطويره. ستحتاج إلى تقديم تعقيب واضح وشامل حول المنتج وإظهار كيفية استيفائه للمتطلبات الأصلية التي حددت في مرحلة التصميم.
- فكر في طرق للتمتع بالإيجابية في مواجهة الانتقادات السلبية لموقعك الإلكتروني. ضع قائمة بثلاثة أشياء يمكنك القيام بها للتعامل مع التعقيدات السلبية بطريقة بناءة.
- فكر في كيفية تقديم الموقع الإلكتروني المكتمل بشكل فعال إلى العميل. لخص الأدوات التي ستستخدمها لتقديم موقعك الإلكتروني وما ستقوم بتضمينه في العرض التقديمي.
المهارات والمعرفة والسلوكيات
عند تنفيذ موقع إلكتروني جديد، ستحتاج إلى إظهار مهارات ومعارف وسلوكات معينة. على سبيل المثال:
- التخطيط والتسجيل، بما في ذلك تحديد الأهداف ذات الصلة مع الجداول الزمنية، وكيف ومتى سيتم جمع التعليقات من الآخرين.
- مراجعة النتائج والاستجابة لها، بما في ذلك استخدام التعليقات من الآخرين، مثل متخصصي تكنولوجيا المعلومات والمستخدمين الذين يمكنهم تقديم ملاحظات حول جودة الموقع الإلكتروني ومدى ملاءمته عند تقييمه مقابل المتطلبات الأصلية.
- عرض السلوكيات الشخصية وتأثيرها في النتائج، والتي تشمل الاحتراف، وآداب السلوك، ودعم الآخرين، والقيادة المناسبة، والمساءلة والمسؤولية الفردية.
- تقييم النتائج للمساعدة على تقديم توصيات وقرارات مبررة عالية الجودة.
المهارات المعرفية/العمليات والإستراتيجيات المعرفية:
- التحليل
- اتخاذ القرار
- القدرة على التكيف
العمل الجماعي والتعاون:
- التواصل
- العمل الجماعي
أخلاقيات العمل/الضمير:
- التوجيه الذاتي
بمجرد الانتهاء من تطوير الموقع الإلكتروني، ستحتاج إلى تقديم التبرير والأساس المنطقي للقرارات المتخذة. ومن المهم الرجوع إلى المتطلبات الأصلية ووثائق التصميم عند القيام بذلك. ومن خلال إجراء تقييم لنتائج عملك، يمكنك أن تنقل للعميل أنه تم تطوير منتج عالي الجودة لأنك قادر على تبرير قراراتك بناءً على جميع العمليات المُنفّذة. ونفّذ تقييمًا لنتائج تطوير الموقع الإلكتروني.
تمرين تقييمي 6.2
B.P2, B.P3, B.M2, BC.D2, C.P4, C.P5, C.P6, C.M3, BC.D3 لقد نجحت في الجزء الأول من المقابلة. وكان مدير التوظيف معجبًا جدًا بتقريرك حول مبادئ تصميم المواقع الإلكترونية. ونتيجة لذلك، جرى وضعك تحت الاختبار ومنحك مدة اختبار لمدة اثني عشر أسبوعًا، طُلب منك فيها العمل على مشروع موقع إلكتروني. ستكون مسؤولًا عن تصميم وتطوير واختبار الموقع. ومن المأمول، إذا قمت بعمل مُرضٍ، أن يأذن لك مدير التوظيف باجتياز الاختبار الخاص بك وتزويدك بوظيفة بدوام كامل.
مرحلة التصميم
عميلك هو بلدية محلية تريد موقعًا إلكترونيًا للإعلان عن مدينة. وسيستخدم الموقع الإلكتروني الذي تعده للترويج للمنطقة وتحسين السياحة. لذلك، ستحتاج إلى تسليط الضوء على الجوانب الإيجابية للمدينة لجذب الزوار إلى الموقع. سيتم توفير مجموعة من متطلبات العميل. ستحتاج إلى إنتاج وثائق التصميم، بما في ذلك لوحات الإلهام ولوحات الشبكة والمخططات الانسيابية (لإظهار أي برمجة نصية من جانب العميل). وستعمل مع أحد الزملاء لمراجعة تصميماتك وتحديد أي مجالات تحتاج إلى تحسين. ستحتاج إلى توثيق المراجعة التي يكملها زميلك، لذا ستحتاج إلى تطوير استبيان يمكنك تقديمه له لتعقيبه. من المهم أن تطرح استبيانات مجموعة متنوعة من الأسئلة لتسليط الضوء على مجالات القوة في التصاميم وتحديد تلك المجالات التي تحتاج إلى تحسين. تأكد من تضمين خطة اختبار كاملة يمكنك استخدامها لاختبار الموقع الإلكتروني المطور. ويجب ملء ما لا يقل عن 20 اختبارًا على الأقل. بعد مراجعة تصميماتك وإجراء أي تحسينات، ستحتاج إلى تقييم التصميم بالكامل وتبرير القرارات التي اتخذتها، وشرح كيفية تلبيتها لاحتياجات العميل.
مرحلة التطوير
باستخدام وثائق التصميم الخاصة بك، عليك إعداد موقع إلكتروني يلبي متطلبات العميل. في أثناء تطوير موقعك الإلكتروني، تأكد من اختباره في أثناء تقدمك، وتأكد من استخدام خطة الاختبار التي أكملتها. بمجرد الانتهاء من الموقع الإلكتروني، راجعه عن طريق حث زملائك على انتقاده. واستخدم الاستبيانات لقياس أفكارهم وآرائهم. وتأكد من تحسين الموقع الإلكتروني الخاص بك بناءً على تعقيباتهم، من خلال إجراء التغييرات التي يقترحونها (على افتراض أنها أفكار جيدة). يوصى بالاحتفاظ بالإصدارات قبل وبعد، مع التعليق على مكان حدوث التغييرات. أخيرًا، يجب عليك تقييم كل من التصميم والموقع النهائي الذي جرى تطويره. وسيعني هذا النظر في العملية الشاملة التي تم إجراؤها وتحديد ما سار بشكل جيد وما لم يسر. خلال العملية بأكملها، ستحتاج أيضًا إلى إظهار المسؤولية الفردية والإبداع والإدارة الذاتية الفعالة. وهذا أمر مهم، حيث إن مدير التوظيف حريص على معرفة أن لديك السمات اللازمة لتكون قادرًا على العمل بمسؤولية ومهنية وتحت ضغط للقيام بدور مطور الويب.
التخطيط
- ما المهمة؟ ما المطلوب مني فعله؟
- ما مدى ثقتي في إنجاز هذه المهمة؟
- هل هناك أي جوانب قد أواجه صعوبة فيها؟
التنفيذ
- هل قضيت بعض الوقت في التخطيط لمقاربتي للمهمة؟
- هل أنا واثق من أنني أعرف ما أقوم به وأنني أعرف ما يجب أن أحقق؟
مطور مواقع إلكترونية مبتدئ
- أعمل مطورًا للمواقع الإلكترونية منذ أكثر من ثلاث سنوات حتى الآن، وكنت محظوظًا لحصولي على تدريب مهني في شركة وظفتني للتعلم على رأس العمل في أثناء حصولي على شهادة BTEC في مجال تكنولوجيا المعلومات.
- كانت الخبرة التي اكتسبتها في أثناء العمل في الكلية وفي مكان العمل لا تقدر بثمن. كان من دواعي سروري أن أصبح موظفًا بدوام كامل مع الشركة التي أعمل فيها، لأنها تمنحني فرصًا لتطوير مهاراتي الإبداعية والفنية عند إنشاء المواقع الإلكترونية.
- بالإضافة إلى ذلك، هناك جانب صعب لحل المشكلات في الوظيفة حيث يتعين علي تطوير حلول للمشكلات التي تحدث. وفي بعض الأحيان، يمكن أن يكون حل هذه المشكلات بسيطًا جدًا.
- وفي أحيان أخرى، تحتاج هذه المشكلات إلى مزيد من التفكير، ولكن بما أنني أعمل ضمن فريق، هناك أشخاص يمكنني التحدث إليهم، وتتطور المشكلات معًا بسرعة إلى حلول.
- إذا كان هناك شيء واحد أود أن أنقله إلى مطوري الويب الطموحين، فهو أن نتذكر دائمًا وضع احتياجات العميل أولًا. إذا كان الموقع النهائي لا يناسب متطلباتهم أو لا يناسب الجمهور، فإن العميل لديه الحق في رفضه.
- ويجب أن تكون احتياجات العميل متوازنة مع احتياجات المستخدمين. يحتاج العميل إلى موقع إلكتروني يرغب الناس في زيارته، ما يجذبهم ويجذب انتباههم.
- يمكن أن يكون تحقيق التوازن بين هذه الاحتياجات أمرًا صعبًا، في أفضل الأوقات.
- ومع ذلك، عندما تطوّر موقع إلكتروني من البداية حتى اكتماله، فهذا إنجاز مُرضٍ للغاية - وهو إنجاز يستدعي الفخر به والثناء عليه.
تصميم موقع إلكتروني
- من المهم أن تكون قادرًا على تصميم موقع إلكتروني قبل المضي قدمًا وتطويره فعليًا.
- ما الطرق الرئيسة لجمع التعقيبات من عميلك؟
- ما الآثار المترتبة إن فشلت في جمع متطلبات الموقع؟
- بصفتك مطورًا للمواقع الإلكترونية، ستجد نفسك تتعرض لقيود، ماذا يمكن أن تكون هذه القيود؟ وما التأثير الذي يمكن أن يكون لها في تطوير الموقع؟
- أخيرًا، بمجرد جمع جميع المتطلبات، ما طرق التصميم التي يجب عليك استخدامها؟ إلى من يجب تقديم هذه التصاميم؟
إنشاء موقع إلكتروني
- بمجرد تلقي جميع التعليقات اللازمة واكتمال مرحلة التصميم، يمكنك المضي قدمًا في تطوير موقعك الإلكتروني.
- ما أفضل طريقة لتطوير موقع إلكتروني من وجهة نظرك؟ هل ستستخدم حزمة تطوير تطبيقات سريعة مثل Dreamweaver أم ستستخدم محرر نصوص؟
- إذا أظهر الاختبار أن صفحتك الرئيسة لا تبدو صحيحة أو لا تظهر بالشكل الصحيح في متصفح ويب آخر، فما الخطوات التي ستتخذها لحل هذه المشكلة؟
- ما الخطوات التي يجب اتخاذها إذا كان عميلك لا يحب المظهر الأولي للموقع؟
- كيف يمكنك تحميل الموقع النهائي على شبكة الويب العالمية؟
كتاب الطالب
نُشر بواسطة شركة بيرسون إديوكيشن ليمتد، 80 ستراند، لندن، WC2R 0RL.
يمكن العثور على نسخ من المواصفات الرسمية لجميع شهادات Pearson على الموقع الإلكتروني:
© حقوق التأليف والنشر لعام 2023 محفوظة لصالح شركة بيرسون إديوكيشن ليمتد حُرّر بواسطة شركة فلورنس برودكشن ليمتد
طُبع بواسطة شركة فلورنس برودكشن ليمتد
© حقوق التأليف والنشر للرسوم التوضيحية الأصلية محفوظة لشركة بيرسون إديوكيشن ليمتد الرسوم التوضيحية من إعداد شركة فلورنس برودكشن ليمتد
نُشرت هذه الطبعة عام 2024
ما لم يُذكر خلاف ذلك هنا، فإن أي علامات تجارية لطرف ثالث قد تظهر في هذا العمل هي ملك لأصحابها المعنيين وأي إشارات إلى العلامات التجارية أو الشعارات أو الشكل التجاري الآخر لطرف ثالث هي لأغراض توضيحية أو وصفية فقط لا يُقصد من هذه الإشارات أي رعاية أو تأييد أو تفويض أو ترويج لمنتجات بيرسون إديوكيشن ليمتد من قبل مالكي هذه العلامات، أو أي علاقة بين المالك وشركة بيرسون إديوكيشن ليمتد أو الشركات أو المؤلفين أو الممثلين أو المرخص لهم أو الموزعين التابعين لها.
فهرسة المكتبة البريطانية في بيانات النشر
يتوافر سجل كتالوج لهذا الكتاب من المكتبة البريطانية
إشعار حقوق التأليف والنشر
- جميع الحقوق محفوظة.
- لا يجوز إعادة إنتاج أي جزء من هذا المنشور بأي شكل أو بأي وسيلة (بما في ذلك نسخه أو تخزينه في أي وسيط باستخدام الوسائل الإلكترونية، سواء بشكل عابر أو عرضي لبعض الاستخدامات الأخرى لهذا المنشور) دون إذن كتابي من مالك حقوق التأليف والنشر، باستثناء الحالات التي تتوافق مع أحكام قانون حقوق التأليف والنشر والتصاميم وبراءات الاختراع لعام 1988 أو بموجب شروط ترخيص صادر عن وكالة ترخيص حقوق التأليف والنشر، برناردز إن، 86 بيتر لين، لندن EC4A 1EN (www.cla.co.uk).
- يجب توجيه طلبات الحصول على إذن كتابي لمالك حقوق التأليف والنشر إلى الناشر.
المواقع الإلكترونية
- لا تتحمل بيرسون إديوكيشن ليمتد المسؤولية عن المحتوى الخاص بأي مواقع إنترنت خارجية.
- ومن الضروري أن يعاين المعلمون كل موقع إلكتروني قبل استخدامه في الصف للتأكد من أن عنوان URL ما يزال دقيقًا، وملائمًا، ومناسبًا.
- ونقترح أن يقوم المعلمون بوضع إشارة مرجعية على المواقع الإلكترونية المفيدة والنظر في تمكين المتعلمين من الوصول إليها من خلال الشبكة الداخلية للمدرسة/الكلية.
ملاحظة من الناشر
- تنفذ Pearson عمليات تحرير مُحكمة لضمان دقة المحتوى في هذا المنشور، ويتم بذل كل جهد ممكن لضمان خلو هذا المنشور من الأخطاء.
- ولكن، ما نحن إلا بشر، وأحيانًا تحدث أخطاء.
- ولا تتحمل Pearson المسؤولية عن أي سوء فهم ينشأ نتيجة أخطاء في هذا المنشور، ولكن من أولوياتنا ضمان دقة المحتوى.
- إذا لاحظت وجود خطأ، فيرجى التواصل معنا عبر resourcescorrections@pearson.com حتى نتأكد من تصحيحه.
في حين بذل الناشرون قصارى جهدهم لضمان دقة المشورة بشأن التأهيل وتقييمه، فإن المواصفات الرسمية ومواد دليل التقييم المرتبطة بها تمثل المصادر الموثوقة للمعلومات وينبغي الرجوع إليها دائمًا للحصول على إرشادات نهائية.
الصور:
123 آر اف: ص 12 (الشكل 7.8)؛ ألامي ستوك فكتور: إيان دانغال ص 6 (الشكل 7.3)؛ أوداسيتي: لقطة شاشة لأوداسيتي © 2024 بواسطة أوداسيتي ص16 (الشكل 7.13)؛ غاما بلاي: لقطة شاشة لتطبيق هاتف محمول، تُستخدم بإذن من غاما بلاي ص 5 (الشكل 7.1)؛ شركة جوجل المحدودة: لقطات شاشة لنظام Android Studio p.9 (الشكل 7.6)، ص 19 (الشكل 7.18)، ص 20 (الشكل 7.19 و7.20)، ص 31 (الشكل 7.33 و7.34)، ص 32 (الشكل 7.35 و7.36)، ص 33 (الشكل 7.38 و7.39)؛ شترستوك: أليكسي بولدين ص 6 على اليمين (الشكل 7.2)، نيكي ص 6 على اليسار (الشكل 7.2)، أندراي بوبوف ص 32 (الشكل 7.37)، مايكل جونج ص 41.
© جميع حقوق طبع ونشر الصور الأخرى محفوظة لصالح شركة بيرسون إديوكيشن