هي مدونة عربية تعليمية تهتم بتعليم لغات تطوير الويب ونظام ادارة المحتوي بلوجر وإمكانية الوصول وتحسين تجربة المستخدم.
مرحبا بك في منصة عربيكو بوابتك لعالم تطوير الويب سواء كنت مبتدأ او تسعي لزيادة مهارتك نحن نقدم مسار تعليميا شاملا ومبسطا لتعلم HTML و Css و JavaScript ونظام إدارة المحتوي بلوجر وإمكانية الوصول وتحسين تجربة المستخدم مع إجراء تجارب عملية والمزيد من الدروس التفاعلية ستتحول أفكارك الي واقع رقمي ملموس أبدأ مسيرتك المهنية في تطوير الويب من هنا.
أبدأ رحلتك في عالم تطوير الويب مع (HTML) هذه هي اللغة الاساسية لكل موقع الكتروني حاليا تستطيع التعلم عن طريق هاتفك المحمول أو جهاز الكمبيوتر المكتبي وستجد تعلم HTML سهلا وممتعا وستتمكن من بناء هيكل صفحتك في وقت قياسي أبدأ التعلم لتخطو خطوتك الأولى نحو بناء الويب.
HTML تعلم
هل تريد أن تجعل موقعك ينبض بالحياة والألون CSS هي سر الجمال والتصميم في عالم الويب تعلم كيف تمنح صفحاتك مظهرا جذابا واحترافي وتحكم في كل تفصيلة من الألوان والخطوط إلى التخطيط والتنسيق. مع CSS ستحول صفحاتك من مجرد نص إلى تحفة فنية مذهلة اكتشف قوة التصميم معنا هنا.
CSS تعلم
اجعل موقعك يتفاعل مع الزوار ويتجاوب معهم JavaScript هي اللغة التي تضفي الديناميكية والحياة على صفحات الويب الخاصة بك من النماذج التفاعلية إلى الرسوم المتحركة الجذابة ستفتح لك JavaScript عالما من الإمكانيات لجعل تجربة المستخدم لا تنسى حول موقعك من ثابت إلى تفاعلي ومثير مع دروسنا الشاملة.
javascript تعلم
هل لديك قصة لترويها أو معرفة لمشاركتها بلوجر هي بوابتك السهلة والمجانية والأكثر امانا في عالم التدوين تعلم كيف تنشئ مدونتك الخاصة وتصممها وتدير محتواها بفعالية وتصل إلى جمهورك الخاص سواء كنت هاويا أو محترفا بلوجر يمنحك الأدوات التي تحتاجها لتبدأ رحلتك كمدون ناجح. ابدأ التدوين اليوم وانشر أفكارك للعالم
BLOGGER تعلم
تسهيل الإستخدام حتى يتمكن الأشخاص ذوي الإحتياجات الخاصة من الوصول لموقعك والتفاعل معه كل شخص يستحق تجربة ويب رائعة في عالم إمكانية الوصول ستتعلم كيف تبني مواقع ويب سهلة الاستخدام للجميع أجعل تصميمات موقعك شاملة وسهلة الاستخدام ووسع قاعدة جمهورك وساهم في بناء ويب عادلا ومنصفا للجميع هنا يمكنك ان تجعل موقعك متاح للجميع.
ACCESSIBILITY تعلم
تجربة المستخدم هي قلب نجاح أي موقع في هذا القسم سنتعلم فن وعلم تصميم ويب سهل التنقل إلى الجاذبية البصرية اجعل موقعك ليس مجرد موقع بل تجربة ويب ممتعة ومفيدة يتوق المستخدمون للعودة إليها.
تعلم تحسين تجربه المستخدمهو تصميم وإنشاء مواقع ويب شاملة وسهلة الإستخدام، ليتمكن الجميع من الوصول إليها والتفاعل معها حتي الأشخاص ذوي الإحتياجات الخاصة.
Blogger هو نظام إدارة محتوي، يتيح لك إنشاء موقع أو مدونة الكترونية لكتابة افكارك أو قصصك أو معرفة خاصة بك لنشرها علي الانترنت، تعتبر بلوجر الأكثر أمانا من بين أنظمة إدارة المحتوي الاخري، فهي تتبع لشركة قوقل العالمية المعروفة للجميع، ومحمية بواسطة نظام قوقل، توفر بلوجر نطاق فرعي مجانا للأبد ويمكن ربطه بنطاق خاص.
يعتبر إنشاء مدونة في بلوجر من الامور السهلة، نظام بلوجر مربوط بحسابات قوقل(Gmail) لذلك تستطيع الدخول للوحة التحكم في بلوجر بواسطة حساب قوقل الخاص بك
بعد التسجيل في بلوجر ودخول لوحة تحكم بلوجر، تقوم بعدها بالضغط علي مدونة جديدة بعد ذلك تختار اسم لمدونتك اذا وجدت الاسم محجوز قم بإختيار أخر حتي تجد إسم غير محجوز انظر للصورة ادناه
توفر بلوجر نطاق فرعي مجاني مدي الحياة مع إمكانية ربط نطاقك الخاص إن وجد، وهذا النطاق يكون باللاحقة blogspot.com، اذا كان اسم موقعك ahmed فإن نطاقك الفرعي يكون كالاتي :-
ahmed.blogspot.comوهكذا
توفر بلوجر لوحةتحكم سلسة تستطيع من خلالها ادارة مدونتك بسهولة ويسر.
توفر بلوجر العديد من الأدوات أبرزها إداة المشاركات التي من خلالها تستطيع عبرهاكتابة مقالاتك ونشرها ، ومنها اداة المشاركات الشائعة واداة نموذج الاتصال والكثير من الادوات الأخري التي تمكنك من إنشاء مدونتك بالطريقة التي تعجبك.
توفر بلوجر العديد من القوالب المتميزة التي تساعد علي ظهور موقعك بطريقة جذابة وانيقة ،وليس هذا فحسب فيمكنك تغيير الوان والخلفيات وغيرها الموجودة في القوالب من لوحة التحكم الخاصة بك.
توفر بلوجر دوال خاصة تمكنك من إظهار تاريخ نشر مشاركاتك او إظهار اسمك وغير ذلك، وكذلك هناك بعض الدوال التي تتحكم في إظهار ادوات او روابط او نصوص او إخفائها وإظهارها في صفحات محددة، قد تحتاج لمعرفة بعض رموز html للتعامل مع بعض الدوال.
الخلاصة☆: نظام ادارة المحتوي بلوجر، يعتبر خيارا متميزا لانشاء مواقع او مدونات سهلة الاستخدام، للمبتدئين والمحترفين ويمكن ادارتها بسهولة ويسر.
Css هي لغة تستخدم في تطوير الويب، تسخدم في تصميم صفحات الإنترنت، تتكون من خصائص لكل خاصية غرض محدد ،وهذه الخصائص هي التي تتحكم في شكل الصفحات من حيث إضافة الالوان والتباعد والحشو وتخطيط الصفحات وغير ذلك، تتميز لغة (Css) بالتكامل مع لغة بناء الصفحات (html) جنبا لجنب لجعل الويب أكثر جمالا وحيوية حيث تمثل (html) هيكل الصفحة بينما تمثل (Css) شكل الصفحة، لاتعمل لغة (Css) لوحدها في صفحات الانترنت فهي تحتاج للغة (html) لتعمل في الصفحات كانها جزء من (html) لكنها لغة بذاتها فعلاقة لغة (css)و (html) كالاخوات تربطهم علاقة التكامل لجعل الويب سلس للغاية.
هي خصائص تستخدم لتخصيص العناصر التي تحتوي علي نص، حيث يمكن من خلال خصائص النص تخصيص لون النص او حجم النص او شكل النص او مكان النص وغير ذلك من الخصائص.
امثلة لخصائص النص
هي خصائص تستخدم لتخصيص الخلفية للعناصر، حيث يمكن تخصيص لون وشكل الخلفية ويمكن اضافة صورة كخلفية مثال
هي خصائص تستخدم للتعامل مع العنصر كصندوق له ارتفاع وله عرض ومن امثلة خصائص الصندوق:
وهي خصائص تستخدم لإضافة حدود حول العنصر مثال:
وهي خصائص تستخدم لإضافة هامش حول العنصر مثال:
هي خصائص تستخدم لحشو العنصر مثال
وهي خصائص تستخدم لتخطيط صفحات الإنترنت، وهذه الخصائص لها دور كبير في تحسين تجربة المستخدم فهذه الخصائص تقوم بتنظيم الصفحات مثال
يمكن اضافة خصائص لغة (Css) مستند(html)بثلاث طرق وهي
تتم إضافة التعليقات داخل ملف (Css)لتسهيل ايجاد الاكواد وتحريرها، يضاف التعليق لتقسيم الاكواد وإضافة نص يشرح الكود او يوضح دوره وغير ذلك، وهذه التعليقات لا تظهر في الصفحة، فهي تظهر للمبرمجين فقط، وتكتب داخل ملف (بهذا الشكل):
/* التعليقــات هنا */
هي طريقة لتحديد عناصر(html) لتطبيق خصائص لغة (css) داخل هذه العناصر، وتنقسم المحددات الي عدة أقسام منها
يمكن من تطبيق عدة خصائص لعنصر محدد بعينه مثال العنصر <body>
body{ الخصائص هنا}<body>... </body>
يمكن من خلاله تطبيق خصائص داخل العنصر بإستخدام السمة classويتم اختيار اسم وإضافة نقطة .قبل الاسم انظر ادناه
.gold{ الخصائص هنا}<body class="gold">... </body>
وهذا المحدد يستخدم لتطبيق اسم المعرف مرة واحدة فقط في الصفحة، وهو قيمة فريدة ويتم إضافة علامة هاش #قبل اسم المعرف، ويتم التطبيق بواسطة السمة id انظر مثال :
#golf{ الخصائص هنا}<body id="golf">... </body>
ماهي محررات (html editors) ؟ هي عبارة أدوات او تطبيقات لكتابة اكواد لغة (html) وتعديلها، يمكن كتابة وسوم وعناصر لغة (html) وتحريرها في اي محرر نصوص عادي، لكن المحررات الخاصة بلغة (html) توفر خيارات إضافية أخري منها إضافة ميزة معاينة نتيجة الكود وكيفية ظهوره قبل ادراجه في صفحة ويب ،وكذلك إضافة ميزة تمييز النصوص وهي مايعرف بتلوين النصوص البرمجية لتنظيمها حتي يسهل قرأتها وفهمها، يوجد نوعين من محررات لغة (html) النوع الأول عبارة عن تطبيقات غير متصلة بشبكة الانترنت وهي عبارة عن تطبيقات يتم تنزيلها في جهاز الكمبيوتر او الهاتف لتحرير النصوص مثل تطبيقات notepad وغيره من التطبيقات ، النوع الثاني محررات تعمل متصلة بشبكة انترنت وهذا النوع من المحررات متوفر في بعض مواقع الانترنت حيث توفر بعض من المواقع الإلكترونية هذا النوع للمستخدمين من هذه المواقع موقع w3shoolوcode pen وغيره من المواقع.
لدينا محرر بسيط وسهل خاص بموقعنا يتميز بعرض نتيجة الكود وكيفية ظهوره مباشر انظر ادناه.
ماهي العناصر المرئية (Visual Elements) ؟ هي العناصر التي تنشئ محتوي مرئي للمستخدم ويتفاعل معها، مثل: الصور والنصوص والروابط والقوائم والعناوين والجداول وغيرها من البيانات المرئية للمستخدم، جميع العناصر المرئية تكون داخل عنصر الجسم<body>في مستند (html).
عنصر يستخدم لإضافة فقرة نصية مثال :
<p>هذه فقرة </p>
وهو عناصر تستخدم لإضافة عناوين داخل صفحات الانترنت، ويمكن من خلالها كتابة عناوين داخل المقالات او المشاركات لتنظيم الصفحة وهذه العناوين عددها ستة عنوان مثال :
<h1>عنوان اول </h1>
<h2>عنوان ثاني </h2>
<h3>عنوان ثالث </h3>
<h4>عنوان رابع </h4>
<h5>عنوان خامس </h5>
<h6>عنوان سادس </h6>
وهو عنصر يستخدم لاظهار صورة للمستخدم، وهو من العناصر التي تحتاج الي سمة تحدد مسار او رابط الصورة مثل السمة srcمثال:
<img src="مسار او رابط الصورة هنا"/>وهو عنصر يستخدم لإضافةرابط مرئي للمستخدم ،قد يكون الرابط صفحة داخل الموقع نفسه او قد يكون الرابط الي صفحة خارجية صفحة لموقع اخر، وهذا العنصر يحتاج للسمة hrefلتحديد مسار الرابط مثال :
<a href="مسار الرابط">...</a>وهي عناصر تستخدم لعمل قوائم لغرض محدد مثل قائمة اصناف محددة او قائمة نصوص محددة، وهي ثلاث عناصر، ويتم إضافة العنصر <li>داخل هذه القوائم لتنظيم القائمة، هناك ثلاث انواع للقوائم منها قائمة مرتبة<ol> وهي قائمة تضع ترقيم تلقائي للبيانات واخري وقائمة غير مرتبة<ul> وهذه قائمة نقطية تضيف نقاط تلقائيا للبيانات مثال لذلك
قائمة مرتبة
<ol>
<il>طماطم</li>
<il>تفاح </li>
<il>عنب </li>
</ol>
النتيجة قائمة غير مرتبة نقطية
<ul>
<il>طماطم</li>
<il>تفاح </li>
<il>عنب </li>
</ul>
النتيجة وهو عنصر يستخدم لعمل جدول للبيانات هناك عناصر مصاحبة لعنصر الجدول تستخدم لاضافة صفوف واعمدة مثل العناصر الاتية
<td>و<tr>و<th>و<tbody> وتكون هذه العناصر داخل عنصر الجدول.
<body> هنا </body>
عنوان جانبي <h3>العناصر المرئية</h3>
عنصر فقرة نصية <p>هي عناصر تظهر للمستخدم. </p>سيكون الامر هكذا داخل صفحة الويب
<!DOCTYPE html>
<html>
<head></head>
<body>
<h3>العناصر المرئية</h3>
<p> .هي عناصر تظهر للمستخدم</p>
</body>
</html>هي عناصر تظهر للمستخدم.