تحسين تجربة المستخدم (user-experience) المقدمة

تعني تصميم وإنشاء مواقع ويب شاملة وسهلة الإستخدام، ليتمكن الجميع من الوصول إليها والتفاعل معها وتقديم تجربة ويب رائعة، لكي تحقق ذلك ستحتاج الي الاتي :-

• الاهتمام بتجاوب التصميم مع الاجهزة المختلفة.
• الاهتمام بسرعة الصفحات.
• الاهتمام بأبعاد واضحة للصور.
• الاهتمام بمعالجة إمكانية الوصول.
• إستخدام هيكلية العناوين.
• دعم التنقل عبر لوحة المفاتيح
• الاهتمام بمعالجة الاخطاء والرسائل التأكيدية
• الاهتمام بتناسق الالوان.

الاهتمام بالتجاوب مع الاجهزة المختلفة

الاهتمام بالسرعة

الاهتمام بأبعاد واضحة للصور

الاهتمام بمعالجة إمكانية الوصول

استخدام هيكلية العناوين

دعم التنقل عبر لوحة المفاتيح.

التسلسل الهرمي البصري وبساطة التصميم

معالجة الاخطاء والرسائل التأكيدية

رسائل خطأ-التأكيد

إمكانية الوصول (Accessibility) المقدمة

هي تصميم وإنشاء مواقع ويب، ليتمكن الأشخاص ذوي الإحتياجات الخاصة من الوصول إليها والتفاعل معها، يستخدم الأشخاص ذوي الإحتياجات الخاصة تقنيات الوصول لتصفح المواقع الإلكترونية مثل قارئات الشاشة وغيرها، لكي يتمكن هؤلاء الاشخاص من تصفح الموقع الخاص بك والتفاعل معه ستحتاج للأتي:-

• توفير نص بديل للصور
• توفير نص وصفي للروابط
• توفير اسماء لنماذج الادخال
• الاهتمام بتباين الالوان

توفير نص بديل للصور

عندما تستخدم صورة في موقعك فإن المستخدم العادي المبصر يري الصورة ويعرف تفاصيلها ولكن الشخص المصاب بالعمى أو الضعف الشديد للنظر لايري هذه الصورة ولا يعرف تفاصيلها، فهنا ستحتاج لتوفير نص بديل يشرح الصورة للأشخاص المصابون بالعمى، فهم يعتمدون أكثر علي تطبيق قارئ الشاشة فعندما يصل قارئ الشاشة ولم يجد نص يشرح الصورة يقرأه، فلن يعرف هؤلاء الاشخاص ماذا تعني هذه الصورة،حينها سيكون الامر مربك بالنسبة لهؤلاء المصابون.
ولمعالجة هذا الامر ستحتاج للسمة alt هذه السمة تعمل في الصور أنظر للمثال ادناه السمة alt

<img src="example.png" alt="النص البديل للصورة هنا"/>

توفير نص وصفي للروابط

عندما تحتوي صفحتك علي عدة روابط تشترك في الاسم نفسه في صفحة واحدة، أو تستخدم صورة او ايقونة بديل لاسم الرابط، فإن المستخدم الذي يستخدم قارئات الشاشة للوصول للصفحة لن يستطيع ان يمييز وجهة هذه الروابط، فهنا ستحتاج لكتابة نص يصف الرابط.
يمكن إضافة نص وصفي للرابط عن طريق استخدام السمة aria-label داخل وسم البداية للرابط انظر مثال ادناه:-

<a href="example.com" aria-label="النص الوصفي  هنا">...</a>

ملاحظة:

• يمكن معالجة امر الروابط التي تشترك في اسم واحد دون استخدام( aria-label )، هو كتابة نص واضح يشرح كل رابط علي حدى بدلا من استخدام اسم واحد لجميع الروابط.
• الروابط التي يتم استخدام الصور او الايقونات بديل اسم الرابط هذه ستحتاج لاضافة السمة aria-label.

توفير تسمية لنماذج الادخال

يجب كتابة تسمية لنموذج الإدخال حتي يتعرف ذوي الاحتياجات الخاصة علي هذا النموذج، ولمعالجة هذ الامر تحتاج لإستخدام العنصر <label> والسمة for وكتابة شرح مفصل للنموذج انظر للمثال ادناه:-

<label name="massage">شرح النموذج</label> <textarea> ... </textarea>

الاهتمام بتباين الالوان

يجب ان يكون هناك تباين واضح بين الخلفية والنص، حتي يتمكن الأشخاص المصابون بعمي الالوان او ضعف النظر من الرؤيةالجيدة للنص، فمثلا اذا كانت الخلفية باهتة يستحسن استخدام لون نص غامق والعكس اذا كانت الخلفية غامقة يستحسن استخدام لون النص باهت وهكذا، المعيار العالمي الموصي به يجب ان يكون التباين بين الخلفية والنص يساوي 4.5.1

بلوجر (Blogger) المقدمة

Blogger هو نظام إدارة محتوي، يتيح لك إنشاء موقع أو مدونة الكترونية لكتابة افكارك أو قصصك أو معرفة خاصة بك لنشرها علي الانترنت، تعتبر بلوجر الأكثر أمانا من بين أنظمة إدارة المحتوي الاخري، فهي تتبع لشركة قوقل العالمية المعروفة للجميع، ومحمية بواسطة نظام قوقل، توفر بلوجر نطاق فرعي مجانا للأبد ويمكن ربطه بنطاق خاص.

كيفية إنشاء مدونة او موقع بواسطة بلوجر

يعتبر إنشاء مدونة في بلوجر من الامور السهلة، نظام بلوجر مربوط بحسابات قوقل(Gmail) لذلك تستطيع الدخول للوحة التحكم في بلوجر بواسطة حساب قوقل الخاص بك
بعد التسجيل في بلوجر ودخول لوحة تحكم بلوجر، تقوم بعدها بالضغط علي مدونة جديدة بعد ذلك تختار اسم لمدونتك اذا وجدت الاسم محجوز قم بإختيار أخر حتي تجد إسم غير محجوز انظر للصورة ادناه

نطاق بلوجر المجاني الفرعي

توفر بلوجر نطاق فرعي مجاني مدي الحياة مع إمكانية ربط نطاقك الخاص إن وجد، وهذا النطاق يكون باللاحقة blogspot.com، اذا كان اسم موقعك ahmed فإن نطاقك الفرعي يكون كالاتي :-
ahmed.blogspot.comوهكذا

مكونات بلوجر

• لوحة تحكم بلوجر.
• أدوات بلوجر.
• دوال بلوجر.
• قوالب بلوجر.

لوحة تحكم بلوجر

توفر بلوجر لوحةتحكم سلسة تستطيع من خلالها ادارة مدونتك بسهولة ويسر.

أدوات بلوجر

توفر بلوجر العديد من الأدوات أبرزها إداة المشاركات التي من خلالها تستطيع عبرهاكتابة مقالاتك ونشرها ، ومنها اداة المشاركات الشائعة واداة نموذج الاتصال والكثير من الادوات الأخري التي تمكنك من إنشاء مدونتك بالطريقة التي تعجبك.

قوالب بلوجر

توفر بلوجر العديد من القوالب المتميزة التي تساعد علي ظهور موقعك بطريقة جذابة وانيقة ،وليس هذا فحسب فيمكنك تغيير الوان والخلفيات وغيرها الموجودة في القوالب من لوحة التحكم الخاصة بك.

دوال بلوجر

توفر بلوجر دوال خاصة تمكنك من إظهار تاريخ نشر مشاركاتك او إظهار اسمك وغير ذلك، وكذلك هناك بعض الدوال التي تتحكم في إظهار ادوات او روابط او نصوص او إخفائها وإظهارها في صفحات محددة، قد تحتاج لمعرفة بعض رموز html للتعامل مع بعض الدوال.

☆ملاحظات هامة

• يمكن إنشاء موقع او مدونة في بلوجر وادارتها بواسطة الهاتف.
• يمكن إنشاء موقع او مدونة في بلوجر وادارتها دون معرفة بلغات تطوير الويب.
• يمكن إنشاء مدونة او موقع في بلوجر وربطه بمنصة (google AdSense) لعرض اعلانات والحصول علي اموال نظير عرض الاعلانات.
• لتعديل بعض دوال بلوجر تحتاج الي معرفة بلغة html.

الخلاصة☆: نظام ادارة المحتوي بلوجر، يعتبر خيارا متميزا لانشاء مواقع او مدونات سهلة الاستخدام، للمبتدئين والمحترفين ويمكن ادارتها بسهولة ويسر.

لغة (Css) المقدمة

Css هي لغة تصميم صفحات الانترنت، تتكون من خصائص ومحددات، تتحكم في مظهر وشكل الصفحات المكتوبة بلغة html من حيث التخطيط وإضافة الالوان والتباعد والحشو وغير ذلك، ويتم إضافة Css داخل ملف Html بطرق عديدة.

مكونات Css

• الخصائص: تهتم بتخصيص شكل العنصر.
• المحددات: تهتم بتخصيص عدة عناصر.

خصائص Css

هي عبارة عن قواعد تهتم بتخصيص شكل ظهور العنصر ومظهره في الصفحة.

مثال لخصائص Css:-

color | margin | padding | font-size
border | text-align | background-color

كيفية كتابة خصائص Css مثال:-

color:red; 

الشرح والتوضيح

• color هو اسم الخاصية.
• العلامة:فاصل بين اسم الخاصية وقيمتها.
• red هي قيمة الخاصية.
• العلامة ; هي نهاية الخاصية

محددات Css

وهي استخدام عدة خصائص في مكان واحد لاستهداف عنصر واحد او عناصر متعددة، وتنقسم المحددات الي اربع اقسام هي:-

المحدد العام

يستهدف جميع العناصر في الصفحة ويرمز له بعلامة النجمة * اي خاصية تكتب بداخله تطبق علي جميع العناصر في الصفحة مثال:-

*{.....} 

محدد العنصر

يستهدف عنصر محدد في الصفحة، يستهدف اسم العنصر مباشر واي خصائص بداخله تطبق فقط في العنصر نفسه مثال:-

h1{.....} 

محدد الفئة

يستهدف عنصر او أكثر في الصفحة وهو محدد يمكن اختيار اي اسم له متبوعا بالنقطة. قبل الاسم ويتم استخدامه داخل العناصر بواسطة السمة classويمكن تكرارها في عدة عناصر مثال:-

 .cool{.....} 

محدد المعرف

يستهدف عنصر واحد فريد في الصفحة تكتب علامة هاش # قبل الاسم لاستهداف عنصر واحد فقط في الصفحة ولا يقبل التكرار ويستخدم السمة id مثال:-

#header{.....} 

طرق إضافة Css داخل ملف Html

تتم إضافة Css بعدة طرق وهي:-

السمة style

تستخدم هذه السمة لتضمين خصائص Css داخل العنصر مباشرة في وسم البداية للعنصر نفسه مثال:-

<h2 style="font-size:13px;text-align:center;">عنوان جانبي<h2>

العنصر <style>

يستخدم هذا العنصر محددات css كاملة وإضافتها في منطقة الرأس<head> في ملف html مثال:-

<style>
h2{font-size:13px;text-align:center;}
.ahmed{background-color:#333;}
.man{font-weight:bold;margin:15px;}
#home{direction:ltr;padding:5px;}
</style>

العنصر <link>

تتم إضافة Css عبر هذا العنصر عن طريق ملف خارجي يتم حفظه في صفحة خارجية ويتم استدعائه بإضافة سطر واحد في منطقة الرأس ايضا ويكون الملف بإمتدادات (style.css) مثال:-

<link rel="....." stylesheet.css/>

إختبار كيفية تخصيص عناصر html بواسطة css

يمكنك تطبيق الامر في ملف html ادناه:-

<!DOCTYPE html>
 <html>

      <head>  </head>
      <body>  </body>

 </html>

مثال:- نستخدم عنصر الفقرة<p> لاضافة فقرة نصية نكتب فيها مرحبا بكم في صفحتنا.

<p>مرحبا بكم في صفحتنا.</p>

نستخدم طريقة التضمين المباشر عن طريقة السمة styleلتخصيص لون الفقرة ليكون لونها بني مائل الي الاحمر brown بدلا من اللون الاسود الافتراضي سيكون الامر هكذا ادناه

<p style="color:brown;">مرحبا بكم في صفحتنا. </p>

الان في ملف Html

<!DOCTYPE html>
 <html>

   <head>  </head>
   <body> 
 <p style="color:brown;">مرحبا بكم في صفحتنا.</p> 
   </body>

</html>

ستكون النتيجة هكذا

مرحبا بكم في صفحتنا.

ويمكن ايضا تجربة الامر في محرر html الخاص لتري الامر بنفسك <!DOCTYPE html> <html> <head> </head> <body> <p style="color:brown;">مرحبا بكم في صفحتنا.</p> </body> </html>

يمكنك تغير اللون بنفسك مثلا امسح اللون brown واكتب بدله لون اخر مثلا blue اللون الازرق سيتغير اللون الي الازرق blue

الخلاصة ☆: تعتبر لغة Css هي ذات أهمية قصوي في تطوير الويب، تعمل داخل ملف Htmlلتغيير مظهر العناصر ، ولديها ادوار مثل تحسين تجربة المستخدم وتساهم في مساعدة الاشخاص ذوي الإحتياجات الخاصة لاستخدام الصفحات

محررات html في لغة(html)

ماهي محررات (html editors) ؟ هي عبارة أدوات او تطبيقات لكتابة اكواد لغة (html) وتعديلها، يمكن كتابة وسوم وعناصر لغة (html) وتحريرها في اي محرر نصوص عادي، لكن المحررات الخاصة بلغة (html) توفر خيارات إضافية أخري منها إضافة ميزة معاينة نتيجة الكود وكيفية ظهوره قبل ادراجه في صفحة ويب ،وكذلك إضافة ميزة تمييز النصوص وهي مايعرف بتلوين النصوص البرمجية لتنظيمها حتي يسهل قرأتها وفهمها، يوجد نوعين من محررات لغة (html) النوع الأول عبارة عن تطبيقات غير متصلة بشبكة الانترنت وهي عبارة عن تطبيقات يتم تنزيلها في جهاز الكمبيوتر او الهاتف لتحرير النصوص مثل تطبيقات notepad وغيره من التطبيقات ، النوع الثاني محررات تعمل متصلة بشبكة انترنت وهذا النوع من المحررات متوفر في بعض مواقع الانترنت حيث توفر بعض من المواقع الإلكترونية هذا النوع للمستخدمين من هذه المواقع موقع w3shoolوcode pen وغيره من المواقع.
لدينا محرر بسيط وسهل خاص بموقعنا يتميز بعرض نتيجة الكود وكيفية ظهوره مباشر انظر ادناه.

محرر عربيكو لتحرير نصوص (html)

السابقالتالي