عالم التصميم والبرمجة

شرح خاصية Transform في Css لعمل تحولات ثنائية وثلاثية الأبعاد

2023-09-02T23:20:00.001+01:00

تستخدم خاصية transform في Css لعمل تحولات في عناصر html بشكل ثنائي أو ثلاثي الأبعاد ، كتأثير الدوران أو الإمتداد أو الإزاحة أو الإنحناء ، وعموما أي تأثير يؤثر في العنصر من حيث الشكل ، وتأخذ الخاصية كقيمة إحدى الدوال التي تشتغل على مثل هذه التأثيرات ، وتنقسم إلى قسمين : ثأثيرات ثنائية الأبعاد و أخرى ثلاثية الأبعاد.

يبدأ دعم خاصية transform من إصدارات المتصفحات التالية :

لتشغيل هذه التأثيرات وعمل التحولات نكتب أولا الخاصية transform العادية ، وكغيرها من خصائص css3 نكتبها بالشكل العادي وكذلك مع البادئات -webkit- و -moz- و -o- و -ms- لضمان اشتغالها على أكبر عدد من إصدارات المتصفحات ، ثم نكتب لها قيمة إحدى الدوال التي سأذكرها تباعا والتي تنقسم إلى إلى قسمين ، التي تدعم تحولات ثنائية الأبعاد 2D والأخرى التي تشتغل في البعد الثالث 3D ، ولإلغاء أي transform موجود بالفعل فقط نستخدم القيمة none .

دوال لعمل transform ثنائي الأبعاد 2D

1- الدالة ()rotate : لعمل تأثير الدوران حول المركز وتأخذ قيمة واحدة ب deg وتمثل مقدار زاوية الدوران في اتجاه الصفحة ، وإذا أخذت قيمة سالبة يدور العنصر عكس اتجاه الصفحة. القيمة الإفتراضية هي 0 وتعني إلغاء الدوران.

2- الدالة ()scale : وتأخذ قيمتين x و تمثل العرض width و y و تمثل الإرتفاع height بينهما فاصلة أجنبية ، القيمة الإفتراضية هي 1 لكل منهما وتعني بقاء أبعاد العنصر كما هما ، أي قيمة أكبر من 1 إذا وضعت لكليهما ستزيد من أبعاد العنصر ، القيمة 2 مثلا ستضاعف أبعاد العنصر ، وأي قيمة أقل من 1 تنقص من الأبعاد ، الدالة تقبل قيمة واحدة وستطبق على العرض والإرتفاع معا.

3- الدالة ()scaleX : اختصار للدالة scale وتأخذ قيمة واحدة تطبق أفقيا.

4- الدالة ()scaleY : اختصار للدالة scale وتأخذ قيمة واحدة تطبق عموديا.

5- الدالة ()translate : وتأخذ قيمتين x و y ب px و % و تقبل وحدات القياس المشابهة ك em ، وتقوم بإزاحة العنصر من مكانه ، القيمة الإفتراضية لكليهما هي 0 وتبقي العنصر في مكانه ، أي قيمة إيجابية ل x تزيح العنصر أفقيا في اتجاه الصفحة ، وأي قيمة ل y تزيح العنصر من الأعلى إلى الأسفل ، وتشتغل القيم السلبية عكس الإتجاه ، إذا وضعت قيمة واحدة فقط للدالة ستطبق أفقيا فقط.

6- الدالة ()translateX : اختصار للدالة translate وتأخذ قيمة واحدة تطبق أفقيا.

7- الدالة ()translateY : اختصار للدالة translate وتأخذ قيمة واحدة تطبق عموديا.

8- الدالة ()skew : وتأخذ قيمتين x و y ب deg ، وتقوم بعمل انحناء في زوايا العنصر ، أي قيمة إيجابية ل x تطبق انحناء في الزوايا بشكل أفقي في اتجاه الصفحة ، وأي قيمة إيجابية ل y تطبق انحناء في الزوايا بشكل عمودي ، وتشتغل القيم السبية عكس الإتجاه ، إذا وضعت قيمة واحدة للدالة ستطبق أفقيا فقط ، القيمة الإفتراضية لكلا المعاملين هي 0 وتعني بقاء العنصر على حاله.

9- الدالة ()skewX : اختصار للدالة skew وتأخذ قيمة واحدة تطبق أفقيا.

10- الدالة ()skewY : اختصار للدالة skew وتأخذ قيمة واحدة تطبق عموديا.

دوال لعمل transform ثلاثي الأبعاد 3D

1- الدالة ()rotateX : لعمل تأثير الدوران حول المحور الأفقي من الأعلى إلى الأسفل وتقبل قيمة واحدة ب deg وتمثل زاوية الدوران والقيمة السلبية تجعل الدوران عكس الإتجاه.

2- الدالة ()rotateY : لعمل تأثير الدوران حول المحور العمودي في اتجاه الصفحة وتقبل قيمة واحدة ب deg وتمثل زاوية الدوران والقيمة السلبية تجعل الدوران عكس اتجاه الصفحة.

3- الدالة ()rotateZ : نفس تأثير rotate العادية 2D .

4- الدالة ()scale3d : تقبل 3 قيم الأولى ل x والثانية ل y (التي تعلمناها في scale العادية) بالإضافة إلى قيمة ثالثة z تقرب العنصر من العين في اتجاه المنظور أي البعد الثالث إذا وضعت لها قيمة أكبر من 1 وأي قيمة أصغر من 1 تبعد العنصر والقيمة 1 الإفتراضية تبقيه كما هو.

5- الدالة ()scaleZ : اختصار للدالة scale3d وتأخذ قيمة واحدة z تطبق في اتجاه المنظور أي البعد الثالث.

6- الدالة ()translate3d : تقبل 3 قيم الأولى ل x والثانية ل y (التي تعلمناها في translate العادية) بالإضافة إلى قيمة ثالثة z تقوم بإزاحة العنصر في اتجاه المنظور أي البعد الثالث ، كما x و y تأخذ القيمة ب px أو وحدات القياس المشابهة والقيمة السلبية تشتغل عكس الإتجاه.

7- الدالة ()translateZ : اختصار للدالة translate3d وتقبل قيمة واحدة ل z تطبق في اتجاه المنظور أي البعد الثالث.

خصائص مهمة تعمل مع transform

1- الخاصية perspective : ضرورية لتشغيل البعد الثالث z لتشتغل خواص 3D وتظهر بشكل سليم ، يأخذ القيمة ب px ويقوم بعمل منظور افتراضي بين الشاشة والعين تظهر فيه خواص 3D بشكل سليم، وتوضع هذه الخاصية للعنصر الأب للعناصر المطبق عليها تأثير 3D.

2- الخاصية transform-origin : تستخدم لتحديد مركز التأثير ، القيمة الإفتراضية للخاصية هي 50% 50% أو center center وتجعل مركز التأثير على طبيعته في المركز المنتصف ، وتقبل قيم أخرى ك top و bottom و left و right أو قيم ب % هذا في حال أردنا تغيير مكان مركز التأثير.

3- الخاصية transform-style : تستخدم لتغيير شكل تأثيرات 3d ، القيمة الإفتراضية هي flat ولا تظهر كل تأثيرات 3d والقيمة الأخرى هي preserve-3d وتظهر كل الخواص المخفية ثلاثية الأبعاد التي لم تظهر حتى مع وجود perspective لكون هذه الأخيرة توضع للأب المباشر وقد تكون موجودة في الأب غير المباشر فلا تظهر معنا كل خواص 3d فنضطر لاستخدام preserve-3d.

4- الخاصية backface-visibility : عندما نعمل rotate ثلاثي الأبعاد لعنصر ما يظهر الجانب الخلفي لهذا العنصر لأن القيمة الإفتراضية لهذه الخاصية هي visible ، في حالة أردنا عدم ظهور الجانب الخلفي لأي عنصر أثناء الدوران نعطيها القيمة hidden.

استخدام Css Filters لعمل تأثيرات جميلة على الصور

2023-08-24T14:51:00.001+01:00

فلاتر الصور في Css3 لا تختلف كثيرا عن التي كنا ولا نزال نستخدمها في برامج التعديل على الصور كالفوتوشوب وغيره ، تلك الفلاتر التي تمكننا من التحكم في نسب الشفافية و الألوان و الإضاءة وغيرها. غير أن css3 جاءت بالخاصية filter ومجموعة من القيم عبارة عن دوال functions للتحكم في النسب وعمل تأثيرات جميلة على الصور خصوصا ، بعض هذه الدوال يمكنها التأثير حتى على النصوص وغيرها من عناصر html ، ولكن على العموم تستخدم Css Filters للتأثير على الصور.

لاستخدام الخاصية filter يجب عليك تحديث المتصفح لديك لأن هذه الخاصية غير مدعومة على المتصفحات القديمة ، غير أن بعضها تدعمها عن طريق البادئة -webkit- ، وعموما هذه هي الإصدارات التي يبدأ منها دعم هذه الخاصية بالبادئة وبدونها:

أولا لبدء استخدام Css Filters نكتب الخاصية filter هكذا وأخرى مع إضافة البادئة -webkit- كما في الصورة التالية :

لا عليك من القيمة الآن ، سنشرح كل القيم تباعا كتابة وبالفيديو أيضا ، القيمة الإفتراضية للخاصية filter هي none ويمكنك استخدام هذه القيمة لإلغاء أي فيلتر مطبق مسبقا، والخاصية filter لا تورث .

بعد ذلك نضع قيمة للخاصية وهي واحدة من الدوال Functions التي سنتطرق إليها تباعا :

الدالة ()blur

تطبق تأثير الضباب على الصورة وتأخذ القيمة ب px كلما زادت القيمة ازدادت ضبابية الصورة ، والقيمة 0 تعني عودة الصورة لطبيعتها بدون تأثير للضباب.

الدالة ()brightness

تتحكم في لمعان الصورة وتأخذ القيمة ب % ، 0 تعني اختفاء الصورة تماما ويبقى مكانها باللون الأسود ، 100% تعطي الصورة نفسها على طبيعتها بدون تأثير ، أي قيمة أكبر تزيد من شدة لمعان الصورة.

الدالة ()contrast

تتحكم في إضاءة الصورة وتأخذ القيمة ب % ، 0 تعني اختفاء الإضاءة تماما والصورة سوداء ، 100% لا تأثير على الصورة أي القيمة الإفتراضية وأي قيمة أكبر منها تزيد من شدة إضاءة الصورة.

الدالة ()drop-shadow

لا تختلف كثيرا عن box-shadow الخاصية المعروفة وتأخذ نفس القيم مفصولة بمسافة :

1- نسبة الظل الأفقي والقيمة ب px (قيمة إجبارية)

2- نسبة الظل العمودي والقيمة ب px (قيمة إجبارية)

3- نسبة blur والقيمة ب px نسبة ضبابية الظل (قيمة اختيارية)

4- نسبة spread والقيمة ب px نسبة الإنتشار (قيمة اختيارية)

5- اللون (قيمة اختيارية) يطبق اللون الأسود افتراضيا في حالة عدم تحديده

مشكلة spread أنه غير مدعوم على Chrome و Safari و Opera لحد الآن ولكن القيم الأخرى تشتغل بدون مشاكل.

الدالة()grayscale

هذه الدالة تأخذ القيمة ب % ويمكنها تحويل الصورة إلى أبيض أسود إذا أخذت القيمة 100% ، القيمة 0 تلغي التأثير وتعيد الصورة لطبيعتها وهي القيمة الافتراضية ، أي قيمة بين القيمتين تقرب الصورة إلى ألأبيض والأسود بنسب متفاوتة.

الدالة ()hue-rotate

تأخذ القيمة ب deg وتمثل مقدار الدرجات حول دائرة اللون ، القيمة 0 تبقي الصورة على طبيعتها وهي القيمة الإفتراضية ، أقصى قيمة هي 360deg وتعطي نفس نتيجة 0 ، وأي قيمة بين القيمتين تغير ألوان الصورة بدرجات متفاوتة.

الدالة ()invert

تأخذ القيمة ب % ، أعلى قيمة هي 100% وتعكس الصورة بالكامل ، أقل قيمة هي 0 وتبقي الصورة على طبيعتها وهي القيمة الإفتراضية.

الدالة ()opacity

شبيهة بالخاصية opacity المعروفة وتأخذ القيمة ب %، تتحكم في شفافية الصورة ، القيمة 0 تخفي الصورة تماما بينما 100% تظهر الصورة على طبيعتها وهي القيمة الإفتراضية .

الدالة ()saturate

تأخذ القيمة ب % ، وهي ثالث دالة تتحكم بإضاءة الصورة بعد ()brightness و ()contrast ، القيمة 0 تظهر الصورة بأخفت شكل ، بينما 100% القيمة الإفتراضية تظهر الصورة على طبيعتها ، وأي قيمة أكبر تزيد من وضوح الصورة.

الدالة ()sepia

تأخذ القيمة ب % ، القيمة 0 هي الإفتراضية وتظهر الصورة على طبيعتها ، 100% هي القيمة القصوى وتظهر الصورة متأثرة بالكامل بتأثير sepia .

الدالة ()url

عندما تكون لديك صورة svg معدلة بتأثيرات خاصة من تصميمك يمكنك استدعاؤها كفيلتر تظهر مكان الأصلية وذلك فقط بوضع مسار تواجدها كقيمة للدالة .

شاهد الفيديو التالي للمزيد من الشرح مع الأمثلة :

دورة CSS GRID | تخطيط القوالب باستخدام نظام الأعمدة

2023-08-10T15:47:00.004+01:00

يستخدم Grid System لتصميم قوالب متجاوبة مع شاشات الموبايل والتابلت و الأجهزة المكتبية ، وهو نظام يعتمد على تقسيم الشاشة ، تم ابتكاره لأول مرة على يد مطوري مكتبة البوتستراب ، هذه المكتبة التي اعتمد عليها المصممون طويلا ولا يزالون ، غير أنه بعد ذلك قام مطوروا لغة Css بابتكار Grid LAOUT MODULE جديد وأكثر احترافية بخصائص وقواعد جديدة وقوية يمكنك من خلالها تقسيم الشاشة مع التحكم في كل العناصر وتصميم قوالب متجاوبة بدون استخدام Float و Positioning، كما رأينا في Css Flexbox ، وبشكل أفضل بكثير.

Css Grid مدعوم في كل المتصفحات الحديثة ككل Modules التي تمت إضافتها حديثا في Css3 ، ويبدأ دعمها من الإصدارات التالية :

يتكون Grid Laout من عنصر أب Parent يسمى Container يحتوي بدوره على مجموعة من العناصر الأبناء Childs يتم ترتيبها داخل الأب بما يقتضيه التصميم ، حيث يتم تقسيم الأب Container إلى أعمدة وصفوف:

- الأعمدة Columns للتقسيم أفقيا

- الصفوف Rows للتقسيم عموديا

وتتم هذه العملية بما يقتضيه التصميم المطلوب ، باستخدام ثقنية Grid Laout Module التي تحتوي على مجموعة من الخصائص بعضها تخص العنصر الأب وأخرى تخص الأبناء.

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

خصائص Grid تستخدم للأب container

لتشغيل Grid System في Css نقوم أولا بإنشاء Grid Container وبداخله Grid Items وهذا بيناه في الأعلى ، العنصر الأب أي Grid Container يقبل مجموعة من الخصائص الموجودة في Css:

1- نضع له display: grid أو display: inline-grid هذه الأخيرة في حال أردنا ظهور عناصر أخرى بجانبه ، وهكذا نكون قد شغلنا Grid System في انتظار التحكم في العناصر بداخل Grid Container .

2- الخاصية grid-content-column وبهذه الخاصية نقوم بالتقسيم أفقيا ونحدد عدد الأعمدة وكم يحتل كل عنصر داخل العمود من المساحة أفقيا.

3- الخاصية grid-content-row تقوم بترتيب الصفوف عموديا عكس الخاصية أعلاه ، ونحدد بها عدد الصفوف وكم يحتل كل صف عموديا.

4- الخاصية column-gap تحدد مساحة فاصلة بين الأعمدة أفقيا.

5- الخاصية row-gap تحدد مساحة فاصلة بين الصفوف عموديا.

6- الخاصية gap المختصرة تجمع القيمتين أو توضع لها قيمة واحدة تطبق أفقيا وعموديا.

7- الخاصية justify-content التي رأيناها في Flexbox وتحدد تموضع العناصر أفقيا.

8- الخاصية align-content التي رأيناها في Flexbox وتحدد تموضع العناصر عموديا.

9- الخاصية grid-template-areas وتستخدم لتقسيم Grid-container إلى أعمدة وتحديد المجالات وتسميتها ، لنقوم باستخدام هذه الأسماء فيما بعد كقيمة للخاصية grid-area التي توضع للعناصر Grid items .

خصائص Grid تستخدم للأبناء Grid Items

1- الخاصية grid-column-start لتحديد العمود الذي يبدأ منه العنصر .

2- الخاصية grid-column-end لتحديد العمود الذي يتوقف عنده العنصر ولا يأخذه.

3- الخاصية grid-column وهي اختصار للخاصيتين المذكورتين أعلاه وتأخذ القيمتين ، قيمة البداية و قيمة النهاية ، وهذه الخصائص تجعل العنصر يتمدد ويأخذ مكانين أو أكثر داخل Grid بشكل أفقي.

4- الخاصية grid-row-start لتحديد الصف الذي يبدأ منه العنصر عموديا.

5- الخاصية grid-row-end لتحديد الصف الذي يتوقف عنده العنصر ولا يأخذه عموديا.

6- الخاصية grid-row وهي اختصار للخاصيتين المذكورتين أعلاه وتأخذ القيمتين ، وهذه الخصائص تجعل العنصر يتمدد ويأخذ مكانين أو أكثر داخل Grid بشكل عمودي.

7- الخاصية grid-area وتأخذ أربع قيم بالترتيب :

grid-row-start

grid-column-start

grid-row-end

grid-column-end

وتقبل أيضا كقيمة إسم المجال الذي تم إنشاؤه من قبل في Grid container بالخاصية grid-template-areas .

استخدام الدوال في تصميم واجهات المواقع | Css Functions

2023-07-31T14:44:00.001+01:00

الدوال في Css مهمة جدا في تصميم المواقع الإلكترونية ، تساهم في ربح الوقت وحل العديد من المشاكل التي كنا نواجهها في الماضي ونضطر لحلها بالجافاسكريبت ، هذه الدوال تعتبر الآن من التكنولوجيات الحديثة التي يجب على المصمم تعلمها والعمل بها ، فكما هو معلوم شركات تصميم المواقع وتطويرها تشترط حاليا معرفة أحدث ثقنيات التصميم والتطوير ، والأساليب القديمة في كتابة الأكواد صارت تستبعد تدريجيا.

في هذا الدرس سنحاول الإسهاب في شرح أهم وبعض هذه الدوال وليس كلها ، مع الإشارة باقتضاب إلى البقية ، بعض هذه الدوال موجودة منذ إصدار css2 وتشتغل على المتصفحات القديمة والجديدة ، وبعضها الآخر صدر مع css3 وسنشير إلى المتصفحات التي تدعمها ، مع العلم أن موضوع المتصفحات لم يعد مشكلة كبيرة في 2023 وغالبية المصممين ماعادوا يكترثون للإصدارات القديمة منها التي اندثرت تقريبا.

وصيغة كتابة أي دالة في css هي كتابة إسم الدالة مع قوسين ، وداخل القوسين يتم كتابة قيمة أو أكثر مفصولة بفاصلة أجنبية.

الدالة var

تستخدم الدالة var في css لتعريف متغير أو استخدام قيمته إن كان متغير عام تم تعريفه من قبل ، الدالة var تقبل إثنان Arguments أو Parameters ، الأولى إجبارية وهي إسم المتغير ، والثانية اختيارية إن أردت وضع قيمة للمتغير لا تحتاجها إن كان معرفا من قبل.

الدالة var تحدثنا عنها بإسهاب في تدوينة مستقلة لأهميتها ، فلا داعي لإعادة نفس الشرح ، ادخل على الرابط واقرأ المقالة جيدا :

رابط التدوينة

الدالة attr

تستخدم الدالة attr لاستخراج قيمة خاصية attribute تابعة لعنصر في صفحة html ، سواء كانت هذه الخاصية موجودة في html مثل value أو placeholder وغيرهما ، أو custom attribute ابتكرناها من عندنا وقد تعود مصمموا الويب على استخدام أسماء مثل data-text و data-value و غيرها.

صيغة الكتابة هي attr(attribute-name) ، تكتب إسم الخاصية فيأخذ قيمتها تستخدمها كما تريد ، وهذا يغنيك عن استخدام الجافاسكريبت لفعل ذلك كما في الماضي.

تعود الدالة attr إلى الإصدار الثاني من لغة css ، وهي مدعومة في كل المتصفحات حاليا ولا تحتاج إلى Prefixes ، وقد تم تعميمها بدءا من الإصدارات التالية :

ليكن كود html التالي :

وكود css التالي:

وكما ترى في a::after قمنا باستخراج قيمة الخاصية href باستخدام الدالة attr ، وسنطبع هذه الروابط بشكل مستقل بجانب القائمة ، والنتيجة كالتالي:

يمكن إخفاؤها ب opacity:0 وإعادة إظهارها في حالة الهوفر على كل رابط فيظهر url بجانبه مع عمل transition ، ستكون أجمل ولكن اختصارا للوقت قمت بطبع كل urls .

الدالة calc

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

صيغة الكتابة هي calc(expression) ، في العبارة يمكنك كتابة جمع أو ضرب أو طرح أو قسمة بين قيمتين ، باستخدام إحدى العلامات + - * / للحصول على الناتج الذي تريد ، وسنرى مثالا بعد قليل .

الدالة calc تعود للإصدار css3 غير مدعومة على المتصفحات القديمة وتحتاج إلى Prefixes من أجل تعميمها، وهذه هي الإصدارات التي بدأ منها دعم هذه الدالة :

مثال عملي في كود css التالي وقمنا فيه بتنسيق ديف :

وهذه هي النتيجة:

وكما ترى الدالة calc قامت بإنقاص 100px من عرض الشاشة وأخذ الديف الناتج كقيمة للعرض.

الدالة min

الدالة min تستخدم لاختيار أقل قيمة بين قيمتين أو مجموعة من القيم .

صيغة الكتابة هي min(value1,value2,...) ، عندما تعطى لعنصر فسيختار أقل قيمة من هذه القيم .

الدالة min تعود لإصدار css3 ويبدأ دعمها من الإصدارات التالية :

نفس المثال السابق مع تعديل الكود :

والنتيجة :

وكما ترى الديف أخذ 300px من عرض الشاشة كأقل قيمة بين القيمتين ، ولو قمنا بتصغير عرض الشاشة وأصبحت 50% أقل من 300px فسيأخذ 50% ،كأنك كتبت max-width: 300px ، يمكن عمل تصماميم متجاوبة باستخدام هذه الدالة ونظيرتها القادمة في العنوان الموالي.

الدالة max

كل ما قلناه عن الدالة min ينطبق على الدالة max ولكن بالعكس ، فالدالة max تختار أعلى قيمة من قيمتين أو أكثر.

صيغة الكتابة هي max(value1,value2,...) ، عندما تعطى لعنصر فسيختار أكبر قيمة من هذه القيم .

الدالة max تعود لإصدار css3 ويبدأ دعمها من الإصدارات الواضحة من الجدول أعلاه التابع للدالة min .

نفس المثال السابق مع تعديل الكود :

والنتيجة :

وكما ترى الديف هذه المرة أخذ ب 50% من عرض الشاشة لأنها أكبر من 300px ، ولو قمنا بتكبير الشاشة أكثر سيكبر أكثر ولو قمنا بالتصغير سيصغر حتى يصل إلى 300px ولن يقل عنها بعد ذلك ، كأنك كتبت min-width: 300px .

الدالة rgb

الدالة rgb تستخدم لتعريف اللون ، وصيغة كتابتها هي rgb(red,green,blue) تبدأ القيمة من 0 وتنتهي عند 255 وتتغير الألوان بتغيير القيم الثلاثة للألوان الثلاثة . هذه الدالة قديمة وتعود لإصدار css2 ، ودعمها يبدأ من إصدارات المتصفحات التالية :

وتطبيقها سهل جدا ، لتكن ثلاث فقرات p بكلاسات مختلفة بالتنسيق التالي :

وهذه هي النتيجة :

الدالة rgba

هي نفسها الدالة السابقة مع إضافة Parameter آخر وهو opacity ، أي نسبة الشفافية ، نحدد نسبة شفافية اللون التي تبدأ من 0 إلى 1 ، وجاءت هذه الدالة مع إصدار css3 ، ويبدأ دعمها من المتصفحات التالية :

صيغة الكتابة هي rgba(red,green,blue,alpha) و alpha هي نسبة الشفافية وتبدأ من 0 إلى 1 وهذا مثال على تطبيقها :

والنتيجة كالتالي:

شاهد الفيديو التطبيقي للدوال السابقة

دوال أخرى قد تكون مهمة للبعض

()conic-gradient

()counter

()cubic-bezier

()hsl

()hsla

()linear-gradient

()radial-gradient

()repeating-conic-gradient

()repeating-linear-gradient

()repeating-radial-gradient

يمكنك الضغط على الدالة التي تريد معرفة المزيد عنها وسينقلك الرابط إلى معلومات مفصلة عنها.

دمتم في رعاية الله.

تخصيص ملف robots.txt لإعداد وضبط سيو مدونة بلوجر سنة 2023

2023-07-24T14:01:00.000+01:00

يتفاعل كل روبوت زاحف لمحرك البحث أولاً مع ملف robots.txt الخاص بموقع الويب وقواعده الزاحفة، هذا يعني أن ملف robots.txt يلعب دورًا محوريًا في تحسين محرك البحث (SEO) لمدونة بلوجرو سنشرح في هذه المقالة كيفية إنشاء ملف robots.txt مخصص و محسن جيدًا لبلوجر وكيفية فهم الآثار المترتبة على الصفحات المحظورة التي أبلغت عنها أداة مشرفي المواقع Google Search Console.

ما هي وظائف ملف robots.txt ؟

يتصل ملف robots.txt بمحرك البحث بالصفحات التي يجب ولا ينبغي الزحف إليها، و هذا يسمح لنا بالتحكم في عمل روبوتات محرك البحث، في ملف robots.txt، نعرف ما يسمى ب User-agent، ونسمح أو نرفض أرشفة صفحات بعينها، ونضع خرائط للموقع وهي مايسمى ب Sitemaps ونضعها رهن إشارة عناكب البحث الخاصة ب Google و Bing و Yandex وغيرها من محركات البحث.

عادة نستخدم علامات meta في head في كود المدونة لأرشفة أو عدم أرشفة المواضيع والصفحات بكتابة index أو noindex ، وملف robots.txt للتحكم في روبوتات محركات البحث. يمكنك السماح بالزحف على المدونة بالكامل لكن ذلك سيضر بمدونتك ، لذلك فمن الضروري حظر أقسام البحث والأرشيف والتسميات في المدونة على عناكب البحث.

ملف robots.txt الإفتراضي لمدونة بلوجر

لإنشاء ملف robots.txt مخصص مثالي لمدونة Blogger، نحتاج أولاً إلى فهم هيكل مدونة Blogger وتحليل ملف robots.txt الافتراضي.

افتراضياً، هذا الملف يبدو كالتالي:

- السطر الأول User-agent من هذا الملف يعلن نوع الروبوت وهو هنا Google Adsense ، وفي السطر الثاني Disallow يعني حظر تأخذ القيمة لا شيء ، وبالتالي مسموح لإعلانات جوجل بالظهور في كل صفحات المدونة.

- وكيل المستخدم التالي هو * يعني جميع روبوتات محركات البحث ، وهي محظورة جميعا من صفحات البحث (السطر الموالي) ، يعني كل الصفحات التي تحتوي على كلمة search في روابطها وهي صفحات البحث والتسمية محظورة على محركات البحث.

- Allow يعني سماح لجميع الصفحات عدا المذكورة أعلاه ، أي صفحة يحتوي رابطها على / ، يعني صفحات المواضيع والصفحات المستقلة ، كلها متاحة لروبوتات محركات البحث للزحف والأرشفة.

- يحتوي السطر الأخير على رابط خريطة المدونة Sitemap وهو رابط التغذية الذي يجمع كل التدوينات.

هذا ملف مثالي تقريبًا للتحكم في روبوتات محرك البحث وتوفير تعليمات للصفحات للزحف أو عدم الزحف. لكن هذا الملف يسمح بفهرسة صفحات الأرشيف، والتي يمكن أن تسبب مشكلة مكررة في المحتوى. هذا يعني أنه سيخلق خردة لمدونة Blogger.

إنشاء Robots.txt الملف الأمثل المخصص لمدونة Blogger

لقد فهمنا كيفية أداء ملف robots.txt الافتراضي لوظيفته في مدونة Blogger ، الآن يمكننا تحسينه من أجل أداء أفضل لمدونتنا ولمحركات البحث.

تسمح ملفات robots.txt الإفتراضية بأرشفة صفحات أرشيف المدونة، مما يسبب مشكلة المحتوى المكرر. يمكننا منع هذه المشكلة عن طريق منع الروبوتات من الزحف إلى قسم الأرشيف. لهذا ،/search* سوف تعطل الزحف على جميع صفحات البحث والتسمية.

تطبيق قاعدة عدم السماح/20 * في ملف robots.txt سيوقف الزحف على أقسام الأرشيف. ستمنع قاعدة/20 * الزحف على جميع المنشورات، لذا لتجنب ذلك، علينا تطبيق قاعدة جديدة للسماح بقسم/* .html الذي يسمح للروبوتات بالزحف على المنشورات والصفحات.

في الملف الإفتراضي يتضمن رابط خريطة المدونة sitemap المنشورات فقط وليس الصفحات المستقلة ، لذا سنحتفظ به ونضيف رابط آخر يحتوي على الصفحات وهو : https://www.example.com/sitemap-pages.xml وبالمرة يمكنك إضافة هذا الرابط في Google Search Console أيضا للحصول على نتائج جيدة.

ملف robots.txt المخصص الجديد لمدونة Blogger سيبدو هكذا:

ملاحظة : عليك استبدال www.example.com في رابط الخريطة بنطاق مدونتك .

يمكنك تحميل ملف robots.txt المعدل من هنا :

رابط التحميل

الملف أعلاه هو أفضل robots.txt من أجل مساعدة مدونتك على الظهور في نتائج البحث ، يجب عليك كتابة محتوى صديق لمحركات البحث من أجل تصدر نتائج البحث ، لأن هذا الملف هو أحد العوامل المساعدة فقط والباقي يتوقف عليك.

التأثيرات في وحدة تحكم محرك البحث بعد تنفيذ هذه القواعد في robots.txt

من المهم ملاحظة أن وحدة تحكم البحث في Google قد تبلغ عن حظر بعض الصفحات بواسطة ملف robots.txt الخاص بك. ومع ذلك، من الضروري التحقق من الصفحات المحجوبة. هل هي صفحات محتوى أم صفحات بحث أم أرشيف ؟ ستعرف ذلك من خلال الإطلاع على حسابك في Google Search Console ، ستجد أن صفحات البحث والأرشيف تم حظرها وهذا طبيعي.

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

كيفية التعديل على ملف robots.txt الإفتراضي لبلوجر؟

ملف robots.txt موجود في مسار المدونة على بلوجر ، لذا لا يمكنك استبداله كما نفعل مع بقية المواقع كالووردبريس ، الطريقة الوحيدة للوصول إليه هو عن طريق إعدادات المدونة باختيار ملف robots.txt مخصص فيمكننا لصق الكود ، انظر الصورة التالية :

1- انتقل إلى لوحة تحكم بلوجر وانقر فوق خيار الإعدادات.

2- قم بالتمرير لأسفل إلى قسم الزحف والفهرسة.

3- فعل زر السماح بملف robots.txt مخصص.

4- انقر فوق robots.txt المخصص ، ستفتح نافذة قم بلصق الكود ثم اضغط على حفظ.

5- قبل الضغط على حفظ لا تنسى استبدال اسم النطاق بنطاق مدونتك في Sitemaps .

6- بعد تحديث الملف يمكنك التحقق من التغييرات عن طريق لصق هذا الرابط في المتصفح https://www.example.com/robots.txt مع استبدال اسم النطاق بنطاق مدونتك ثم فتح الملف.

دمتم في رعاية الله وحفظه.

استخدام المتغيرات في تصميم واجهات المواقع ( شرح الدالة var في css )

2023-07-20T15:37:00.000+01:00

الدالة ()var في css تستخدم لاستدعاء قيمة متغير تم تعريفه مسبقا ، أو تعريفه واستخدام قيمته في نفس الوقت إن لم يكن معرفا من قبل . والمتغيرات في css يمكن الوصول إليها بعد تعريفها من أي مكان في مستند html ، بمعنى يمكنك إنشاء متغيرات بتصريح عام Global يمكن استدعاؤها في كل مكان من المستند ، أو محلية Local تستدعى فقط في المعرف الذي أنشئت فيه ، كما يمكنك تغيير قيمها بالجافاسكريبت أو بدونها كما أثناء استخدام الميديا كويري ، والغاية من ابتكار هذه المتغيرات هو ربح الوقت أثناء تصميم الواجهات حيث يضطر المصممون قديما إلى استخدام النسخ واللصق بكثرة ، في موضوع الألوان كمثال ، يمكن كتابة كود لون معين أكثر من مرة في ملف css ، بينما الآن يكفي وضعه في متغير واستدعاؤه في كل مكان ، وإذا طلب منا تعديله نكتفي بتعديل قيمة المتغير مرة واحدة ويظهر التأثير على الموقع بأكمله في نفس اللحظة.

هذه الدالة مدعومة في كل المتصفحات الحديثة بدءا من الإصدارات الواضحة في الصورة التالية :

تعريف المتغير وصيغة الكتابة

الدالة var تكتب مع فتح الأقواس كما كل الدوال وداخل الأقواس يكتب إسم المتغير name بالإضافة إلى القيمة value وبينهما فاصلة أجنبية ، إسم المتغير إجباري بينما القيمة اختيارية يمكن الإستغناء عنها في حالة كان المتغير معرفا من قبل ، الإسم يبدأ ب -- وهذا أيضا إجباري ، وهناك طريقتان لتعريف المتغير :

1- كتابة إسم المتغير مع القيمة.

2- كتابة الدالة var مع الإسم والقيمة.

وبعد ذلك يكفي كتابة الدالة var مع الإسم فقط في كل مكان نريد فيه استدعاء المتغير. لاحظ الصورة التالية:

كما ترى داخل root وهو html قمنا بتعريف متغيرين واستدعينا قيمتهما في الديف كلاس header وهذه هي الطريقة السليمة ، بينما في الفقرة p عرفنا المتغير وأخذ قيمة وطبق في نفس الوقت لكل فقرات الموقع.

المتغيرات في الوضع العام والوضع المحلي

مثل جميع المتغيرات في لغات البرمجة يمكن أن يكون لمتغيرات css وضع عام Global ووضع محلي Local ، المتغير في الوضع العام يمكن استخدام قيمته في كل مكان في مستند html بينما لو كان في الوضع المحلي فلا يمكن استخدام قيمته خارج المكان الذي ينتمي إليه ، فلو لاحظت في الصورة التالية :

المتغيرات التي عرفتها في root هي متغيرات Global ولا مشكلة من استدعائها في كل الصفحة كما استدعيتها في الديف كلاس header بينما المتغيرات التي عرفتها في p فتعتبر Local و تعمدت استدعاءها بشكل خاطئ في الديف مع وضع الهاشتاغ فقط كي أبين لك بأن هذا الكود خاطئ والمفترض ألا أكتبه أصلا لأنه لن ينفذ على أي حال.

تغيير قيمة متغير عام في وضع محلي

يمكن تغيير قيمة متغير تم تعريفه في الوضع العام بآخر نكتبه بنفس الإسم مع تغيير القيمة في الوضع المحلي كما في الصورة التالية :

في هذا المثال غيرنا قيم المتغير fontSize و fontFamily فقط في الفقرة p بينما في الديف كلاس header سيأخذان القيمتان المحددتان في root .

تغيير قيمة متغير عام في الميديا كويري

كما غيرنا قيمة المتغير في الوضع المحلي يمكننا أيضا تغييرها لتخصيص شاشات معينة باستخدام الميديا كويري Media Query كما في المثال الواضح في الصورة التالية :

كما ترى موضوع المتغيرات في css بسيط جدا وسيساعدك في ربح الوقت أثناء التصميم ويسهل عليك التعديل على التصميم في حالة عدت إليه فيما بعد وأردت التعديل عليه.

وسبق لي أن شاركت فيديو على قناتي صممت فيه روابط نافبار بألوان مختلفة باستخدام متغير مع Inline Style يمكنك مشاهدته كتدريب عملي على هذا الدرس ، وهذا هو الفيديو :

شرح Css Flexbox البوكس المرن وسهولة استخدامه في تصميم واجهات المواقع

2023-06-25T00:22:00.005+01:00

قبل ظهور Flexbox في css المتعارف عليه في تقسيم صفحات html هو التالي:

• block للأقسام في صفحة الويب

• inline للنص

• table لبيانات الجدول ثنائي الأبعاد

• position لتحديد تموضع عنصر معين

الصندوق المرن في css المسمى Flexbox يسهل على المصمم وضع بنية لتصميم قالب متجاوب ومتوافق مع كل الشاشات مختلفة الأحجام بدون استخدتم float أو position وأكثر من ذلك يكتب أكواد أقل في media screen@ لأن التصميم في الأصل متجاوب .

دعم المتصفحات ل flexbox

في بداية ظهور flexbox في css3 لم يكن الجميع يستخدمه لأنه لم يكن مدعوما من كل المتصفحات ، الآن هو مدعوم بالكامل ، أغلب الناس تدخل من الهواتف الآن كما أن الإصدارات القديمة لأنظمة التشغيل ذهبت مع متصفحاتها التي كانت تعذب المصممين وعلى رأسها internet explorer و الفايرفوكس القديم وغيرهما ، يمكنك الآن استخدام كل خواص css3 فهي مدعومة والأقل دعما تشتغل مع Prefixes .

ماهو البوكس المرن Flexbox

يتكون Flexbox من محتوى عبارة عن مجموعة عناصر أبناء Childs بداخل عنصر أب Parent يجمعهم مع تنسيق العنصر الأب بالخاصية display و إعطائها القيمة flex أو inline-flex ، فتتحول العناصر داخل العنصر الأب إلى الوضع المرن Flexible بحيث يمكنها التأقلم مع عرض العنصر الأب الذي يتغير مع اختلاف الشاشات ، ويمكن التحكم في ذلك بسهولة باستخدام مجموعة من الخصائص ، مثال :

مع التنسيق التالي :

وهذه هي النتيجة :

وهذا التنسيق عادي جدا يحدث بمجرد وضع display: flex ، ولا زلنا سنضيف خصائص أخرى بعضها تخص الأب flex-container وأخرى تخص الديفات للمزيد من التنسيق.

خصائص تخص العنصر الأب Flex container

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

• gap

خصائص تخص المحتوى Items

• order

• flex-grow

• flex-shrink

• flex-basis

• flex

• align-self

للمزيد من التفاصيل وشرح استخدام هذه الخصائص شاهد الدورة التالية :

فيديو الدرس الأول

فيديو الدرس الثاني

فيديو الدرس الثالث

فيديو الدرس الرابع

فيديو الدرس الخامس

التطبيق الأول

التطبيق الثاني

دورة أساسيات لغة css للمبتدئين ( شرح خاصية transition )

2023-06-15T14:46:00.000+01:00

خاصية transition في css3 مهمة جدا بل لا غنى عنها لمصممي الويب، قبل اعتمادها كانت التأثيرات التي تظهر في حالات hover و focus عادية جدا، وفي حالة ما إذا أراد مصمم إضافة بعض الجمالية عليها كأن تظهر على شكل animation، فسيحتاج إلى كثير من التعقيدات بالجافاسكريبت، بعد ظهور css3 التي سهلت الكثير من الأمور التي كانت تحتاج إلى جافاسكريبت، أصبح الموضوع كله متوقفا على بضع خصائص تكتبها في ملف css للعنصر ثم تكتب تأثيرات الهوفر، لاحظ الكود التالي:

في حالتنا هذه عند تمرير الماوس على العنصر h1 سيكبر حجم الخط ويتغير اللون ، ولكن بفضل transition التي كتبت للعنصر نفسه لن يظهر التغيير بشكل فوري ، سيتغير ظهور h1 في ظرف ثانية واحدة وهي القيمة التي وضعنا ل transition-duration وسينتظر أيضا ثانية أخرى قبل بدء مرحلة التغيير وهي القيمة الموضوعة ل transition-delay.

شرح خصائص transition

خاصية transition-property :

وتحدد خاصية css التي ستطبق عليها transition فنكتب لها كقيمة مثلا width أو font-size أو أي خاصية أخرى وإذا أردنا التطبيق على الكل فقط نكتب all كما في الصورة أعلاه.

خاصية transition-duration :

وهي المدة الزمنية التي يحول فيها العنصر من الحالة العادية إلى حالة الهوفر أو الفوكس وتكتب لها القيمة بالثانية أو أجزاء الثانية.

خاصية transition-timing-function :

تحدد الطريقة التي ستنفذ بها قيم transition المحسوبة وتأخد قيم متعددة ، ease أو ease-in أو ease-out أو ease-in-out وتأخد أيضا قيم أخرى معقدة لا حاجة إليها.

خاصية transition-duration :

مدة زمنية تفرض كتوقف وانتظار قبل بدء transition وبعد انتهائها قبل العودة للوضع الطبيعي .

لا تقلق فكل هذا مشروح بشكل عملي في فيديو على قناتنا عالم التصميم والبرمجة ، وهذا هو الفيديو :

تصميم المواقع الإلكترونية | تعلم التصميم بالبوتستراب 5

2022-10-17T22:53:00.002+01:00

مقدمة

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

Build fast , responsive sites with Bootstrap

آخر إصدار للبوتستراب حاليا هو الإصدار الخامس وبالضبط الإصدار 5.2.2 ، وهو في تطور مستمر ففي كل مرة يتم إضافة إمكانيات جديدة تسهل العمل أكثر على المصممين ، لكنه مع ذلك يتيح لك الرجوع إلى الإصدارات القديمة بالضغط على All releases وهناك يمكنك اختيار الإصدار الذي يريحك وتقوم بتحميله.

رابط الموقع الرسمي للبوتستراب

وتجدر الإشارة إلى أنه يشترط أن تكون لك معرفة مسبقة بأساسيات html و تعلمت أكواد css وصممت بهما بعض القوالب ، حتى تبدأ في تعلم التصميم بالبوتستراب 3 ثم تنتقل إلى الإصدار الأخيرإن شئت أو تدخل في البوتستراب 5 مباشرة لا مانع.

الإنتقال من إصدار قديم إلى البوتستراب 5

إذا كنت تشتغل على الإصدار الثالث مثلا وأردت الإنتقال إلى الإصدار الأخير فستجد :

1- كلاسات وأدوات لا زالت كما هي وتشتغل بلا مشاكل.

2- كلاسات وأدوات تم تغييرها بالكامل فلم تعد تشتغل بشكلها القديم ، مثلا Navbar التي استخدمناها في دورة البوتستراب 3 لن تشتغل معك في الإصدار الخامس.

3- كلاسات وأدوات تم تطويرها فلا تزال تشتغل ولكن قد تحتاج لإضافة بعض اللمسات البسيطة مثلا نظام الأعمدة Grid System.

4- كلاسات وأدوات وإمكانيات لم تكن موجودة في الإصدارات القديمة وتم إضافتها في الإصدار الخامس ، ولأنها رائعة وجب تعلمها واستخدامها من الصفر.

وعلى العموم يفضل لمن لا يعلم شيئا عن البوتستراب أن يبدأ بتعلم الإصدار الثالث أولا ويشتغل به ثم يمر للإصدار الأخير وسيجده في غاية السهولة .

تقسيم الشاشات في البوتستراب 5

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

شاشات xs التي كانت تنتهي عند 768px أصبحت تنتهي عند 576px ، وحتى لست في حاجة للإشارة إليها فقط تكتب -col ثم عدد الأعمدة وسيعتمد نظام تقسيم الأعمدة ذلك سائرا على كل شاشات الموبايل وعلى بقية الشاشات المتوسطة والكبيرة إذا لم تخصص لها ، sm ينتهي عند 768px بينما كان يبدأ منها في الإصدار الثالث ، بعد ذلك md و lg نفس الشيء تبدأ حيث كانت تنتهي في الماضي ، وبعد 1200px يبدأ xl و xxl ، ونحن كمصممين للويب عادة لا نهتم لما بعد 1200px إلا ناذرا ، لأننا متعودون على وضع كل المحتوى داخل container يتمدد إلى حد معين هو 1320px.

غير هذا فكما تعودنا في البوتستراب 3 نستخدم الكلاس row ثم نبدأ في استخدام Grid System باستخدام الكلاس col متبوعة بنوع الشاشة وعدد الأعمدة مع قاعدة أن الشاشة الأصغر تحكم على الأكبر منها في حالة لم نحدد لها ، كما في المثال التالي :

الجديد هنا أن البوتستراب 5 يمنحنا إمكانية التقسيم التلقائي فقط بوضع الكلاس col دون تحديد أي شيء آخر أو إضافة الشاشة فقط دون تحديد عدد الأعمدة ، كما في الصورتين التاليتين :

ففي المثال الأول البوتستراب سيقوم بعمل التقسيم على أربعة ابتداءا من شاشات الموبايل يعني في كل الشاشات ، بينما في المثال الثاني سيبدأ تقسيم عرض الشاشة ابتداءا من شاشات lg فما فوق بينما العناصر ستأخذ 12 عمودا في الشاشات الأصغر منها.

ميزات أخرى جديدة في البوتستراب 5

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

- الجديد في إزاحة وتمدد العناصر:

من أروع إنجازات مطوري البوتستراب أنك لم تعد مضطرا لكتابة padding و margin في كل مرة بنفسك فقط تضع كلاس تبدأ ب p أو m مع إضافة الإتجاه عند الضرورة فنكتب مثلا mb-5 يعني margin-bottom ثم نوع الشاشة في حالة أردت تخصيص شاشة معينة وإلا لا تكتبها مثلا mt-lg-5 يعني margin-top ويطبق فقط ابتداءا من شاشات lg ، القيم تبدأ من 0 إلى 5 كأقصى حد وتوجد أيضا القيمة auto.

- الجديد في تنسيق النصوص:

لتلوين النصوص كنا نستخدم في الإصدار الثالث كلاسات من هذا القبيل : text-primary text-success text-info ... إلخ ، لا تزال موجودة في الإصدار الأخير مع إضافة كلاسات جديدة وهي :

ولتنسيق النصوص تم ابتكار عدة كلاسات تبدأ بالحرف f كإختصار ل font فنكتب fs كإشارة ل font-size ونكتب fw كإشارة ل font-weight و fst كإشارة ل font-style على سبيل المثال لا الحصر.

مثلا fs تبدأ قيمته من 1 إلى 6 :

بينما fw يأخذ قيم متعددة معروفة :

كما ترى أصبحنا في غنى عن كتابة الكثير من أكواد css فيكفي وضع الكلاس للعنصر فيأخذ التنسيق المناسب.

وبالنسبة للكلاسات التي تبدأ ب text والتي تعلمناها في البوتستراب 3 فلا تزال موجودة ، مثلا :

text-lowercase

text-uppercase

text-capitalize

بالنسبة ل text-right و text-left فقد تم تعويضها بالكلاسات التالية :

text-start

text-end

وتشتغل حسب اتجاه الصفحة ، عربية أم أجنبية وقد نضيف لها نوع الشاشة فيبدأ تطبيقها من الشاشة المشار إليها ، مثلا :

text-sm-start

text-lg-start

- الجديد في خصائص display:

display يرمز له بحرف d ثم بعد ذلك تتم الإشارة للقيمة بكتابتها كاملة فنكتب مثلا :

d-block

d-inline

d-inline-block

d-flex

d-none

ويمكن الإشارة لنوع الشاشة أيضا فيبدأ التطبيق من هذا النوع إلى الأكبر منها ، مثلا :

d-lg-none لإخفاء العنصر بدءا من شاشة lg.

وللطوابع تستخدم print فنكتب مثلا :

d-print-none لإخفاء العنصر بالنسبة للطابعة .

البوتستراب 5 تنهي اعتماد أيقونات Glyphicons

الإصدار الخامس من البوتستراب لم يعد يدعم أيقونات Glyphicon التي لا تزال متاحة في الإصدار الثالث ، وعوضا عنها أنشأ مطوروا البوتستراب مكتبة أيقونات مستقلة تماما يمكنك تحميلها واستخدامها مع البوتستراب أو بدونه تماما كمكتبة Font Awesome ، هذه الأخيرة يقترحها موقع البوتستراب أيضا كخيار مع مكتبات أخرى ويترك للمصممين حرية اختيار المكتبة التي يرتاحون لها.

هذه المكتبة وغيرها تطورت كثيرا وأصبحت تعتمد ثقنية SVG ، وسنتطرق إن شاء الله لها في دروس مستقلة مستقبلا .

رابط تحميل مكتبة أيقونات البوتستراب

رابط تحميل أيقونات Font Awesome

وأخيرا نعيد الإشارة إلى استحالة شرح كل شيء في البوتستراب 5 فهذه المكتبة صارت كبيرة جدا ، ولكن تطرقت والحمد لله لأهم الأشياء التي أراها من وجهة نظري على درجة كبيرة من الأهمية ، وهناك المزيد الذي يمكنك الوصول إليه في الموقع الرسمي ، فكل ما تحتاجه مثل السلايدر والنافبار ستجده في Components والعديد من الأشياء المهمة أيضا موجودة في Utilities وبقية الأقسام ، يمكنك الإستفادة منها فقط باستخدام النسخ واللصق ، ولا يزال بإمكانك اختيار إصدار البوتستراب الذي يريحك بالعودة للإصدارات القديمة التي يمكنك الوصول إليها بالضغط على All Releases في الصفحة الرئيسية للموقع الرسمي.

رابط الموقع الرسمي للبوتستراب

وقد سبق لي أن قدمت دورة على اليوتيوب شرحت فيها البوتستراب 3 ، سأضيف في آخرها فيديوهين عن الإصدار الخامس ، ففي حالة لم تكن تعرف شيئا عن البوتستراب أنصحك بالبدء من الإصدار الثالث ومشاهدة الدورة كاملة وهذا رابطها :

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

دمتم في رعاية الله وحفظه.

تصميم مواقع الويب | كيف تضيف الحركية لعناصر الصفحة باستخدام الجافاسكريبت

2022-05-25T00:57:00.002+01:00

كيف تضيف الحركية على عناصر html بشكل يبدو فيها الموقع ممتعا وهو في طور التحميل ، ألا ترى تلك المواقع عندما تفتحها وتتصفحها ترى العناصر والبلوكات تدخل من اليمين ومن اليسار في حركية جميلة Animation تضفي رونقا على الموقع تجعلك لا إراديا تتصفح الموقع حتى النهاية.

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

يمكنك تحميل آخر إصدار للإضافة من هنا :

رابط التحميل

بعد تحميل الإضافة وفك الضغط عن المجلد تظهر الملفات بهذا الشكل:

طبعا لن نحتاج لكل هذه الملفات ، فقط سندخل على مجلد dist وننسخ ملف wow.min.js ونضعه مع ملفات مشروعنا ثم ندخل على مجلد css ونأخذ نسخة من ملف animate.css ونضعه أيضا مع ملفات مشروعنا الخاص.

بعد ذلك نقوم بتضمين هذه الملفات في ملف html الخاص بنا ، ملف css في head وملف الجافاسكريبت أسفل الصفحة قبل قفلة body.

الخطوة التالية هي كتابة كود الجافاسكريبت التالي في ملف الجافاسكريبت الخاص بنا، مثلا في الصورة السابقة ملف main.js الخاص بي.

الخطوة الأخيرة إضافة الكلاسات ، أولا الكلاس wow ثم الكلاس slideInLeft أو الكلاس slideInRight حسب الجهة التي نريد أن تبدأ منها الحركة.

ويمكننا إضافة Attributes أيضا :

- data-wow-duration وهنا نضع القيمة بالثواني لتحديد المدة التي تنفذ فيها الحركة.

- data-wow-delay وهنا نضع أيضا القيمة بالثواني لتحديد مدة الإنتظار قبل تنفيذ الحركة.

شاهد الفيديو التالي للمزيد من التوضيح:

دمتم في رعاية الله وحفظه.

تصميم المواقع الإلكترونية | أمثلة وتطبيقات عملية مصممة ب html و css

2022-01-17T22:21:00.011+01:00

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

تصميم لوجو بسيط ب html و css

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

فيديو الدرس

تصميم قائمة منسدلة ب html و css

مرة أخرى فقط ب html و css صممنا قائمة منسدلة بكل سهولة ، فقط بتمرير الماوس أي عمل hover .

فيديو الدرس

تصميم فورم تسجيل الدخول ب html و css

صفحة تسجيل دخول بسيطة واحترافية في نفس الوقت .

فيديو الدرس

شرح عمل hover على الصورة بواسطة Rotate + Scale

تأثير جميل يمكنك عمله على الصور باستخدام خاصية transform التابعة ل css3 مع القيم scale و rotate .

فيديو الدرس

شرح عمل caption على الصورة تظهر مع تمرير الماوس باستخدام transition

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

فيديو الدرس

تغيير مظهر Scrollbar باستخدام خاصية جديدة في css

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

فيديو الدرس

تغيير مؤشر الماوس وإظهار صورة مكانه

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

فيديو الدرس

تصميم شكل الأوراق النصية الغير مرتبة والمسطرة باستخدام التدرج اللوني

كأنك تنظر إلى أوراق صفراء حقيقية مسطرة وغير مرتبة فقط ب html و css مع منح الزائر إمكانية مسح النص بالكامل وإعادة الكتابة تابع الدرس إلى النهاية .

فيديو الدرس

تصميم قائمة روابط وتخصيص ظهورها في الموبايل بالجيكويري

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

فيديو الدرس

تصميم قلب فقط ب html و css

في هذا الفيديو قمت بتصميم قلب فقط باستخدام html و css وشاركته معكم في إطار التدريبات التي نقوم بها من وقت لآخر والموجودة في سلسلة Web Design Training .

فيديو الدرس

تصميم Focus جميل للزر باستخدام Transition

في درس اليوم قمت بعمل تأثيرات جميلة على Button في حالة Focus أي في حالة الضغط عليه ، يتغير بالكامل وتظهر فيه علامة الصح.

لإظهار علامة الصح قمت باستخدام مكتبة Font Awesome للأيقونات .

فيديو الدرس

تصميم المواقع الإلكترونية | تصميم قالب متجاوب من الصفر ب html و css

2021-12-20T23:54:00.009+01:00

تصميم المواقع الإلكترونية تعتبرواحدة من أفضل المهن وأكثرها دخلا وخصوصا في هذه السنة ، الكثير من الأشخاص يحققون منها دخلا قارا من خلال العمل في الشركات أو دخلا متفاوتا من خلال العمل في مواقع العمل الحر، فإذا كنت من الذين تابعوا معي دورة أساسيات لغة html و دورة أساسيات لغة css ، فهذه دورة جديدة تطبيقية صممت فيها قالبا متجاوبا ، الدورة على اليوتيوب وعدد دروسها 9 ، وقد شرحت فيها كيفية تصميم قالب متجاوب من الصفر فقط ب html و css ، كيف تشتغل بشكل صحيح منذ البداية حتى تحصل في الأخير على قالب متجاوب مع كل الأجهزة والشاشات فقط بتعديلات بسيطة باستخدام خاصية media screen عند الإنتهاء من التصميم .

في هذا التصميم لم أستخدم أية إضافة خارجية عدا ملف normalize.css و نوع الخط الذي حملته من جوجل ، والباقي كله كود html و css من كتابة اليد ، وهذا يعني أنه مناسب تماما لأي شخص تعلم أساسيات لغة html و أساسيات التصميم والتنسيق بلغة css للتو ويبحث عن أول تدريب عملي يطبق فيه ما تعلمه من قبل ويتعلم فيه كيفية الإشتغال بشكل صحيح في مجال تصميم المواقع الإلكترونية ، لهذا إستخدمت مصطلح من الصفر في وصف الدورة لأنه يمكن اعتبارها المستوى الأول في المجال .

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

الدرس الأول ( مقدمة الدورة )

الدرس الثاني ( تصميم الهيدر )

الدرس الثالث ( تصميم قسم المميزات )

الدرس الرابع ( تصميم قسم الإشتراك )

الدرس الخامس ( تصميم قسم مشاريعنا )

الدرس السادس ( تصميم قسم التوصيات )

الدرس السابع ( تصميم فريقنا )

الدرس الثامن ( تصميم الفوتر )

الدرس التاسع ( الميديا كويري واللمسات النهائية )

دمتم في رعاية الله وحفظه.

تصميم مواقع الويب | كيفية عمل سلايدشو احترافي متوافق على موقعك

2021-10-05T22:58:00.006+01:00

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

لنصمم سلايدشو نستخدم HTML و CSS ولكن لتفعيله نحتاج إلى أكواد جافاسكريبت أو استخدام مكتبة jQuery ، والأفضل من ذلك هو وجود إضافات تساعدك على عمل السلايدشو بكل سهولة ، وأحد أفضل هذه الإضافات على الإطلاق إضافة BxSlider فهي تمكن المصممين من عمل سلايدشو احترافي ومتوافق مع كل الأجهزة مع إمكانية التعديل .

تحميل الإضافة من موقع Github :

الدخول إلى الموقع الرسمي من خلال الرابط التالي ثم الضغط على Github .

رابط الموقع الرسمي

ثم تحميل ملفات الإضافة بالضغط على Code ثم Download zip .

بعد فك الضغط عن المجلد نحصل على التالي :

ربط مشروعنا الخاص بالإضافة :

لو قلنا بأن هذا هو مشروعنا الذي نعمل عليه .

سنذهب لملفات الإضافة ونفتح مجلد dist .

ثم ننسخ الملفين المؤطرين بالأحمر ونضعهما في مجلد js ننسخ الملف المؤطر بالأزرق ونضعه في مجلد css ثم نفتح مجلد images في نفس المسار وننسخ منه صور controls ونلصقها في مجلد img الخاص بنا .

كتابة الكود :

في ملف index.html سنقوم باستدعاء ملفات الجافاسكريبت و CSS التي أضفناها للمشروع بالإضافة لملفاتنا الخاصة ، ثم نكتب كود HTML وهوعبارة عن ul مع الكلاس bxslider وتحتوي على أكثر من li وداخل كل واحدة منها صورة من اختياري ، يمكنك أيضا وضع نصوص مكان الصور أو أي محتوى آخر .

بعد ذلك نفتح ملف CSS الخاص بالإضافة jquery.bxslider.css ونعدل على مسار صور controls ، سنجد في كل url مسار /images/ سنغيره إلى ../img/ نفعل ذلك مع كل url .

وأخيرا سنفتح ملف main.js الخاص بنا ونضع فيه الكود التالي :

والنتيجة ستكون كالتالي :

يمكنك تحميل الملفات من هنا وبإمكانك مشاهدة المزيد من الشرح في الفيديو التالي :

دمتم في رعاية الله وحفظه.

دليلك من أجل عمل إحترافي في تصميم المواقع

2020-04-18T19:32:00.004+01:00

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

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

1) ترتيب كود html حتى يكون مفهوما ومقروءا

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

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

2) استخدم html5 Validator

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

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

ومن أشهر الأخطاء التي تظهر:

- وسم h1 يستخدم مرة واحدة فقط في الصفحة الواحدة

- إذا استخدمت وسم header أو section أنت مجبر على وضع وسم h داخله ستختار من h1 حتى h6 .

- وسم main لا يتكرر في الصفحة الواحدة

- لا يمكنك وضع عنصر block داخل عنصر inline

- لا بد من وضع الخاصية alt للوسم img ولو بدون قيمة

- إذا وضعت الخاصية action للفورم فلا يمكنك تركها فارغة

كما ترى أسفل الفورم يخبرك بأنه يمكنك تصحيح أي كود آخر ، كود css أو js أو ملف rss وروابط أدوات التصحيح واضحة في الصورة .

رابط الموقع

يمكنك أيضا تحميل إضافة تعمل على جوجل كروم تمكنك بكل سهولة من خلال فتح Console معرفة الأخطاء الموجودة ومعالجتها فورا.

رابط الإضافة

شاهد الفيديو التالي

3) ترتيب كود css

حتى يكون كود css مقروءا هو الآخر لا بد من وضع التعليقات وتنظيم الكود بحيث نبدأ التنسيق من أعلى الصفحة إلى أسفلها بالترتيب مع إفراد التنسيقات العامة في أعلى ملف css ، لاحظ الصورة :

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

4) إستخدم ملفات css و js مضغوطة

إذا كنت تستخدم ملفات css و js تابعة لمكتبات مثل jQuery أو Bootstrap فهي توفر لك نسخة مضغوطة من كل ملف ، في الواقع توفر لك النسختين معا العادية المقروءة والنسخة المضغوطة ، لاحظ الفرق في الصورتين التاليتين لنفس الملف في نسختين :

النسخة العادية :

النسخة المضغوطة :

ضغط الملف يوفر في حجمه ويساعد على سرعة تحميل الموقع ، وبالنسبة لملفات css و js الخاصة بك يمكنك استخدام الموقعين التاليين للحصول على النسخة المضغوطة :

رابط أداة ضغط ملفات css

رابط أداة ضغط ملفات js

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

شاهد الفيديو التالي

5) إستخدم صور ذات جودة عالية ومضغوطة الحجم

كما تقوم بضغط الملفات للتقليل من حجمها من أجل سرعة تحميل الموقع ستفعل نفس الشيء مع الصور ، وبرنامج الفوتوشوب يقدم هذه الخاصية ، فقط إرفع الصورة على البرنامج ثم اختر Save for web ستظهر لك هذه الواجهة :

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

6) تقديم المشروع

انتهيت الآن من مشروعك بكل تفاصيله ، بقي الآن الطريقة التي ستقدمه بها ، وسواء كنت تنوي تسليمه لعميل أو تريد عرضه للبيع في موقعك الخاص أو في منصة عمومية مثل شركة Envato Market التي تمتلك المنصة الشهيرة Theme Forest فأنت مطالب بتقديم التالي :

- وصف دقيق للقالب الذي صممته تكتبه في ملف نصي txt ، وتوفر لك منصات عرض التصاميم إمكانية كتابته مباشرة في الموقع أثناء رفع التصميم ، هذا الوصف ستتحدث فيه عن ميزات القالب الذي صممته وما يدعمه ولا تنسى كتابة رابط موقع أي إضافة استخدمتها في التصميم مثل jQuery أو Bootstrap أو غيرهما حتى الصور المستخدمة ستحدد مصادرها. ويمكنك تحميل نموذج لهذا الملف النصي لتعرف الفكرة وتعدل عليه بما يناسب مشروعك :

رابط تحميل الملف

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

وأقدم لك مجموعة من الصور التي يمكنك استخدامها والتعديل عليها وعرض مشاريعك .

رابط تحميل الصور

وستوفر أيضا صور أخرى متنوعة للقالب ، غير المعروضة في الشكل الماضي.

دمتم في رعاية الله وحفظه

إنشاء تطبيقات الهاتف والربح منها بدون برمجة

2020-03-24T16:32:00.002+01:00

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

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

مواقع تساعدك على إنشاء تطبيقك الخاص مجانا وتحميله

هناك عدة مواقع تقدم لك عدة نماذج لتطبيقات يمكنك التعديل عليها وجعلها حصرية تماما ، وتقدم لك أيضا إمكانية ربط التطبيق مع حسابك في Google Admob ، سأتحدث عنه لاحقا ، وإظهار الإعلانات في التطبيق ، ثم تحميل التطبيق، أفضل هذه المواقع :

موقع Quickappninja

يمكنك التسجيل في هذا الموقع من هنا : رابط التسجيل

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

طبعا للموقع خطة مدفوعة أيضا بحوالي 9 دولار ، ولكن تدفعها فقط في حال أردت التخلص من شعار الموقع في التطبيق وتخصيص صفحة About us ، وفي النهاية لن تضرك في شيء أترك الشعار واستمتع بالخطة المجانية كما تريد.

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

موقع Appsgeyser

يمكنك التسجيل فيه من هنا : رابط التسجيل

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

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

كيفية الحصول على حساب أدموب واستخدامه ؟

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

بعد توفرك على حساب أدموب مفعل يمكنك الدخول إلى الإعدادات ستجد هناك كود يشبه هذا الكود :

هذا معرف حسابك وهو أول كود ستحتاجه في موقع إنشاء التطبيق لربط اللعبة بحساب أدموب كما وضحت في الفيديو .

بعد ذلك ستضغط على Get Started في أدموب وسيسألك إن كنت تنوي رفع تطبيقك على جوجل بلاي ، مع العلم أن حساب جوجل بلاي ليس مجاني ، لذا ستختار الخيار الأخر إن كنت لا تملك المال ، بعد ذلك خطوات بسيطة جدا ستضع إسم التطبيق ثم في النهاية ستحصل على كودين كما في التالي :

ستضع كل منهما في مكانه بالضغط على monetization أثناء إنشاء التطبيق كما وضحت في الفيديو ، ولا تنسى تفعيل إعلانات جوجل في الأعلى على اليسار قبل الضغط على Generate .

ستنتظر الموافقة على التطبيق ثم تقوم بتحميله .

شاهد الفيديو

رفع التطبيق على منصة جوجل بلاي أو منصة أخرى

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

إلا أن الإستفادة منه تتطلب الحصول على حساب مطور جوجل بلاي وستحتاج بطاقة بنكية لدفع 25 دولار للإشتراك ، وبالتالي إن كنت تملك هذا المبلغ فلا تتردد .

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

من أفضل المنصات المجانية لرفع التطبيقات ومشاركتها :

الموقع الأول

الموقع الثاني

دمتم في رعاية الله وحفظه .

تصميم قالب بلوجر احترافي متوافق مع كل الأجهزة بالبوتستراب

2020-02-20T22:14:00.002+01:00

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

لمتابعة هذه الدورة يشترط أن تكون لديك معرفة ولو بسيطة بأساسيات :

- لغة html

- لغة css

- فكرة ولو صغيرة عن ما تفعله البوتسراب

وتتضمن هذه الدورة أيضا :

- استخدام مكتبة Font Awesome لعمل أيقونات مواقع التواصل الإجتماعي.

- شرح تقسيم المدونة باستخدام أكواد خاصة بمنصة بلوجر.

- تنسيق صفحة الأدوات في لوحة التحكم وذلك في آخر درس.

وأضع رهن إشارتك مجلدا مضغوطا يمكنك تحميله بالضغط على الرابط التالي :

رابط التحميل

هذا المجلد يحتوي على :

- ملف بامتداد xml يحتوي قالب بلوجر بدون محتوى ، وهو الذي شرحناه في الدرس الأول وقسمنا فيه المدونة.

- ملف txt يحتوي أكواد بلوجر مهمة لبناء محتوى المدونة .

- ملف txt يحتوي على سكريبت لجمع التدوينات مع كود إقرأ المزيد .

- ملف txt يحتوي على سكريبت وكود محتوى مع التنسيق للتدوينات ذات صلة.

- ملف txt يحتوي على كود النافبار المتوافق مع البوتستراب.

دورات يمكنك الإطلاع عليها لمعرفة الأساسيات :

دورة أساسيات لغة html للمبتدئين

دورة أساسيات لغة css للمبتدئين

دورة التصميم بالبوتستراب 3

شرح استخدام مكتبة Font Awesome لعمل الأيقونات

دورة إنشاء مدونة بلوجر من الصفر

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

يمكنك متابعة الدورة الجديدة من هذا الرابط :

دورة تصميم قالب بلوجر احترافي متوافق

الموقع الذي استخدمته لنسخ أكواد ألوان المواقع الإجتماعية :

رابط الموقع

لتحميل القالب بعد اكتماله :

رابط تحميل القالب

كود صفحة الخطأ 404 :

رابط تحميل ملف الكود

إلى اللقاء في دورة وشروحات جديدة إن شاء الله ودمتم في رعاية الله وحفظه .

حماية موقعك | كيفية حماية التدوينات من السرقة

2020-02-08T00:37:00.005+01:00

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

كل ما عليك هو فتح مظهر html إذا كانت مدونة بلوجر والبحث عن كود css ، إن لم تكن تعرف فقط إفتح مظهر html وإضغط داخل المحرر بالماوس ثم إضغط في الكيبورد على Control ثم f ستظهر لك نافذة صغيرة أكتب فيها <b:skin> ثم إضغط على enter وسيحولك مباشرة إلى كود css .

أضف الكود في الفراغ المعلم عليه في الصورة الثالثة ، الكود الذي ستضيفه هو كود css الذي سيمنع الزوار من نسخ مواضيع مدونتك ، أكتبه كما هو واضح في الصورة التالية :

هذا بالنسبة لحماية مواضيع مدونة بلوجر ، أما بالنسبة للووردبريس أو أي موقع آخر ستبحث في ملفات الموقع عن ملف css وغالبا ما يكون اسمه style.css وتقوم بإضافة الكود .

شاهد الفيديو التالي

دمتم في رعاية الله

حل مشكلة استبدال رابط التغذية data-vocabulary.org في بلوجر

2020-01-25T22:31:00.004+01:00

توصل جميع المدونين برسالة عبر البريد الإلكتروني من الويب ماستر التابع لجوجل مفادها أن رابط التغذية data-vocabulary.org لن يبقى مدعوما لمدة طويلة وسيتوقف العمل به بدءا من شهر أبريل القادم و أن جوجل ستستمر في دعم الرابط schema.org فقط ابتداءا من ذلك التاريخ .

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

Data-vocabulary.org

Schema.org

وفي النهاية هاذين مجرد مثالين لأن الكود يختلف من قالب إلى آخر ، وبلوجر ليس كالووردبريس أو جوملا أو غيرها ، وبالتالي يمكنك الإعتماد على الكود الثاني لعمل الكود الذي سيحل مشكلتك ، وقد قمت بعمل التعديل المناسب بالنسبة لمدونات بلوجر وجربته ورأيت أنه يعمل بشكل جيد فقررت مشاركته معكم ، في الرابط التالي يمكنك تحميل مجلد مضغوط وضعت فيه ملفين واحد بصيغة txt والثاني بصيغة xml حتى يكون الكود مقروءا ومفهوما لمن يعرف أكواد بلوجر ، وقد وضعت فيه الكود القديم الذي ستبحث عنه لتعوضه وكذلك الكود الجديد المعدل والمناسب لبلوجر ، ولكن شاهد الفيديو لتعرف كيف عدلت على الكود وكيف قمت بوضعه مكان الكود القديم :

رابط تحميل المجلد

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

مشاهدة ممتعة و دمتم في رعاية الله وحفظه .

فيديو الدرس

التسويق الالكتروني | أفضل طرق التسويق والربح من استضافات المواقع

2020-01-23T22:48:00.005+01:00

التسويق الالكتروني والربح من استضافات المواقع

بعيدا عن التسويق لعروض السي بي إي ، هل فكرت يوما كمسوق لديه الكثير من المهارات الأخرى في التسويق لشركات تقدم عمولات جيدة جدا ، شركات استضافات المواقع كمثال ! قد يبدو الأمر صعب المنال في البداية ، فالكثيرون جربوا ذلك بطرق التسويق التقليدية وفشلوا ، طرق التسويق العادية التي يعرفها كل المسوقون :

- كتابة مقالة طويلة تشرح كل مميزات الإستضافة مع وضع بضع سلبيات إثباتا للحياد

- وضع الصور Banners مع روابط الأفيلييت

- إنشاء صفحات الهبوط

- إنشاء فيديو يشرح التسجيل في الإستضافة ووضع رابط التسجيل في الوصف

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

لماذا لا يسجل الزائر من خلال رابط الإحالة ؟

السبب واضح ، لنعكس السؤال كالتالي : ما الذي يدعوه للضغط على رابطك وبإمكانه الذهاب إلى المتصفح وكتابة bluehost.com أو hostgator.com أو فقط يكتب إسم الإستضافة وسيجدها له جوجل في الحين ؟ ما الذي قدمته لهذا الزائر كمقابل يجعله يشعر بالإمتنان لك ويسجل من خلال رابطك ؟ كتابة مقالة تشرح فيها أدق تفاصيل هذه الإستضافة أو عمل فيديو مراجعة هو أقل ما يستحق ، لكنه قد لايكون كافيا . وسأشرح لك بعد قليل كيف تقدم له ماهو أكثر من ذلك ، عرضا لا يستطيع رفضه على الإطلاق إذا كان مهتما طبعا .

أفضل شركات الإستضافة

أكيد أنك رأيت مقالات أو فيديوهات على الإنترنت تتحدث عن أفضل 10 استضافات على الإطلاق ، لكل استضافة مميزات وعيوب ، ولكن يمكن القول أن الأفضل على الإطلاق Bluehost و HostGator لعدة أسباب أهمها أن كلاهما يعود لمجموعة IEG العالمية والعملاقة والتي تمتلك أيضا استضافة iPage وغيرها ، كما أن الموقع الرسمي للووردبريس يوصي باستضافة Bluehost في المقام الأول ، المهم إذا عملت كمسوق لإحدى هاتين الإستضافتين أو كليهما فأنت تقدم الأفضل والأكثر شهرة لعملائك ، لأن العميل الذي يريد أن يبدأ مشروعه باحترافية ومستعد لدفع المال سيبحث عن الأفضل بالنسبة له .

استضافة Bluehost

كما قلت في الفقرة الماضية موقع الووردبريس الرسمي wordpress.org يوصي بهذه الإستضافة في المقام الأول ، يمكنك التسجيل في برنامج الأفيلييت الخاص بها بالدخول إلى هذا الرابط : https://www.bluehost.com/affiliates وستجد أمامك هذه الواجهة :

ستضغط على Sign up ليحولك إلى صفحة التسجيل ، ستضع بياناتك ثم تنتظر الموافقة ، إذا كانت الموافقة فورية ستدخل على لوحة التحكم وتأخذ رابط الأفيلييت الخاص بك والذي هو رابط التسجيل مضاف إليه إسم المستخدم Username الذي سجلت به ، لذا عليك اختيار اسم المستخدم بعناية ، وستجد أيضا مجموعة من الصور Banners بمختلف الأحجام التي يمكنك استخدامها في التسويق فقط تأخذ الكود ، وهو يحتوي على رابط الإحالة أيضا .

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

استضافة HostGator

هناك من ينصح بها ويفضلها على Bluehost وكما قلت سابقا لكل استضافة مميزاتها وعيوبها ، لذلك أنصحك بالتسويق للإثنتين معا وهكذا تترك لعملائك أو زوارك حرية الإختيار ، يمكنك التسجيل في برنامج الأفيلييت الخاص بها بالدخول على هذا الرابط : https://www.hostgator.com/affiliates وستظهر لك هذه الواجهة :

ستضغط على Sign Up Free ثم تضع بياناتك وتنتظر الموافقة ، عندما تحصل على الموافقة سيمكنك الموقع من الدخول إلى لوحة التحكم ، وبالتالي الوصول إلى رابط الإحالة الخاص بك والصور التي ستستخدمها للتسويق ، وكما ترى في الصورة التالية HostGator تقدم للمسوقين عمولات أفضل من Bluehost لأنها تبدأ من 65 دولار ولكنها تعطي أكثر على حسب عدد العملاء الذين تجلبهم كل شهر :

التسويق لشركات الإستضافة

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

ومن أنجع الطرق التي يستخدمها المحترفون للتسويق لاستضافات المواقع :

1- كتابة ونشر مقالات مراجعة Review للإستضافة تحتوي رابط الأفيلييت بطرق مختلفة ، الرابط النصي و الرابط الصورة Banner والرابط الزر Call to action ، وأفضل هذه المقالات وأكثرها نجاعة هي التي تتكلم عن مقارنة بين أكثر من استضافة ، مثل عناوين Top 10 و Best 5 .

2- عمل فيديوهات أيضا مراجعة للإستضافة ووضع رابط الإحالة في الوصف .

3- تقديم خدمات كمطور ويب ويشمل ذلك إعداد الإستضافة وتنصيب الووربريس والقالب والإضافات ، إنشاء متجر إلكتروني باستخدام الووردبريس وإضافة WooCommerce ، سكريبت من تطويرك أو تملتلك حقوقه وتعرضه للبيع أو كهدية، والإبداع في هذا المجال واسع ، ولكن نصيحة لك لا تقدم كل شيء مجانا فلعملك ومجهودك أيضا حق .

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

5- عندما تحقق بعض التحويلات يصبح بإمكانك الحصول على كوبونات التخفيض ، وتستطيع استغلالها للشراء لنفسك أو عملائك أو إعطاءها للآخرين شرط التسجيل من رابطك الخاص .

6- استغلال التي يحصل فيها تخفيض كمناسبة رأس السنة الميلادية و Black Fridays والترويج للعرض المحدود .

شاهد الفيديو التالي للمزيد من التوضيح

شرح إضافة MixItUp وتغيير الأقسام بدون إعادة تحميل الصفحة

2019-11-30T20:37:00.005+01:00

شرح إضافة MixItUp

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

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

أنظر إلى الصورة التالية :

هذه الأيقونات قمت بتصنيفها كما ترى وهي تظهر جميعا لأنني ضغطت على All ، بفضل إضافة MixItUp عندما أضغط على Food مثلا ستظهر فقط ثلاثة كما في الصورة التالية :

بعد تحميل ملفات الإضافة من موقع Github من الرابط التالي :

رابط التحميل

نأخذ ملف الجافاسكريبت mixitup.min.js من مجلد dest ونقوم باستدعائه في أسفل ملف html قبل وسم إغلاق body وبعده مباشرة نستدعي ملف الجافاسكريبت الخاص بنا .

بعد ذلك ننشئ الأقسام التي سنضغط عليها لاستبدال المحتوى المعروض ، يمكن إنشاؤها باستخدام الوسم button أو a أو إنشاء قائمة ul لا فرق فقط يجب الإلتزام بقواعد الإضافة بحيث نضع لكل قسم خاصية data-filter تأخذ القيمة all في حالة عرض الكل أو إسم الكلاس التي سنضعها لاحقا للمحتوى مسبوقا بالنقطة ، لا حظ الصورة التالية :

بعد ذلك نضع div بكلاس container وداخله المحتويات مصنفة كل محتوى نعطيه كلاس mix بالإضافة إلى كلاس أخرى بنفس الإسم الذي وضعناه ل data-filter سابقا ، ونضع له أيضا خاصية data-order وتأخذ قيمة رقمية من 1 فما فوق للترتيب ، لاحظ الصورة التالية :

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

يمكنك وضع أكثر من كلاس لمحتوى تريد أن يظهر في أكثر من قسم كما يمكنك تغيير قيمة duration لإبطاء أو تسريع الظهور .

شاهد الفيديو التالي للمزيد من الشرح العملي

كيف تتخلص من الروابط الخارجية المضرة لموقعك الباك لينكات السبام

2019-11-05T22:30:00.002+01:00

التخلص من تبعات الباك لينكات المضرة بموقعك

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

ماهي الباك لينكات ؟

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

على أي حال هذا ليس موضوعنا اليوم ، أردت فقط تقديم فكرة بسيطة في هذه المقدمة عن الباك لينكات . موضوع اليوم عن الباك لينكات المضرة Spam Backlinks .

ما هي هذه الباك لينكات السبام ؟ ولماذا هي مضرة ؟

هي باك لينكات تأتي من مواقع غير شرعية أحيانا كالمواقع التي تقدم محتويات ممنوعة أو مسروقة أو الدومينات المحظورة من طرف جوجل ، وقد تأتي من مواقع شرعية ولكنها وضعت هناك بطرق سبام . وقد قامت جوجل بوضع خوارزمية سمتها Google Penguin Algorithm لمحاربة هذا النوع من الروابط وفي إطار هذه الحملة قد تتعرض مدونتك للمشاكل إذا كان لديها مصدر ترافيك كبير من هذه الروابط ، طبعا لن تعاقبك جوجل على بضع باك لينكات سبام ولكن إذا تراكمت عليك لوقت طويل وأنت لا تحرك ساكنا ستعتبرك جوجل معتمدا على هذا النوع من الترافيك وقد تعاقبك بإزالة أرشفة مواضيعك ونزول موقعك في ترتيب محرك البحث وصولا إلى حظر رابط مدونتك .

ماذا علي أن أفعل إذا اكتشفت هذا النوع من اللينكات في مدونتي ؟

كل ما عليك فعله هو مراقبة مصادر ترافيك مدونتك من حين لآخر وتحديد المضرة منها ونقلها على ملف بامتداد txt تمهيدا للتبليغ عنها لجوجل ، الكمية مهمة جدا هنا إن كنت تجد واحدا أو اثنين بين الفترة والأخرى وعدد المرات لا يتجاوز 5 فليس لديك ما تخشاه على مدونتك ، أما إذا بدأت تتكاثر وعدد المرات يتجاوز 5 فهنا ينبغي عليك التبليغ عنها لدا جوجل حتى تتبرأ منها ومن تبعاتها ، لاحظ الصورة التالية :

هذا الموقع الواضح في الصورة كمثال 10 زيارات ، والموقع إباحي ومحظور من جوجل ، لا بد من وضعه في اللائحة كما قلت في السابق اجمع مثل هذه الروابط في ملف txt ، وسأوضح ذلك في الفيديو ، إجمعها هناك كما في الصورة التالية :

قم برفع الملف في أداة الويب ماستر التابعة لجوجل ، أدخل الرابط التالي : من هنا

احتفظ بهذا الملف في جهازك دائما وقم بتحديثه في كل مرة يجد فيها جديد وقم بإعادة رفعه .

شاهد الفيديو التالي للمزيد من المعلومات

تصميم مواقع الويب | دورة أساسيات لغة css للمبتدئين ( الجزء الأخير | CSS3)

2019-04-03T00:40:00.004+01:00

تصميم مواقع الويب للمبتدئين شرح css3

بعد أن انتهينا من الأجزاء السابقة من دورة css للمبتدئين ، حان وقت التطرق للجديد والإضافات التي جاءت بها css3 الإصدار الأخير للغة css ، وإن صادفت يوما إصدارا مثل 3.1 أو 3.2 فهي مجرد تحديثات لللإصدار الثالث والأخير ، وأغلبها تحديثات مدعومة بشكل جزئي ولا تزال قيد التجربة ، فما يهمنا نحن هي الخصائص الجديدة التي جاءت بها css3 والمدعومة غالبا من كل المتصفحات بشكل واسع الآن بحيث انتشر استخدامها من طرف مصممي ومطوري الويب والتطبيقات .

ولضمان دعم كافة المتصفحات لخصائص css3 وخصوصا الإصدارات الأقدم تم ابتكار ما يسمى بالبادئات Prefixes ، وتكتب قبل الخاصية وهي أربعة أنواع تستخدم حسب الحاجة وسيأتي يوم لن تحتاج إليها نهائيا ، وهذه البادئات هي :

-moz- : وتستخدم لمتصفحات Firefox

-webkit- : وتستخدم لمتصفحات Chrome و Safari

-o- : وتستخدم لمتصفحات Opera

-ms- : لمتصفح Internet Explorer

وقد شرحت بالتفصيل هذه البادئات وضرورتها وكيف تجعل محرر Brackets يطبعها تلقائيا نيابة عنك ، في هذا الدرس :

فيديو الدرس 22

وفي الدرس الموالي بدأنا في شرح أول خصائص css3 وهي خاصية Border-radius وتستخدم لعمل تأثير الإنحناء :

فيديو الدرس 23

وفي الدرس الرابع والعشرين شرحت خاصية box-shadow وكيفية عمل تأثير الظل حول حدود العنصر والتحكم فيه عن طريق تغيير القيم .

فيديو الدرس 24

وفي الدرس الخامس والعشرين شرحت خاصية box-sizing وأهميتها والمشاكل التي تحلها في التصميم .

فيديو الدرس 25

وفي الدرس السادس والعشرين شرحت خاصية background-size ، وتستخدم مع الخلفيات من النوع صورة background-image للتحكم في حجم الصورة .

فيديو الدرس 26

وفي الدرس السابع والعشرين شرحت خاصية background-origin ، وتستخدم مع الخلفيات من النوع صورة background-image للتحكم في حجم تغطية الصورة الخلفية .

فيديو الدرس 27

ستتم إضافة بقية الدروس تباعا إن شاء الله .

روابط دورة css من بدايتها

دورة أساسيات لغة css للمبتدئين ( الجزء الأول )

دورة أساسيات لغة css للمبتدئين ( الجزء الثاني | أنواع المعرفات Selectors )

دورة أساسيات لغة css للمبتدئين ( الدرس 18 | Media Types )

دورة أساسيات لغة css للمبتدئين ( الدرس 19 | Reset Vs Normalize )

دورة أساسيات لغة css للمبتدئين ( Inheritance, Cascade and Specifity)

تصميم مواقع الويب | دورة أساسيات لغة css للمبتدئين ( Inheritance, Cascade and Specifity)

2019-03-16T22:52:00.003+01:00

تصميم مواقع الويب للمبتدئين

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

1) مبدأ التوارث Inheritance:

وهو أن يرث عنصر html تنسيقا معينا من عنصر آخر أب Parent ، مثلا عندما تحدد Font-family للعنصر body فإن كل العناصر النصية أبناء Childs لهذا body ترث هذا النوع من الخط ، ولن تحتاج الإشارة إلى كل عنوان وكل فقرة وتذكيرها بهذا Font-family ، هذا مع العلم أنه ليست كل خصائص css قابلة للتوارث إلا إذا أجبرناها عن طريق القيمة inherit .

سبق لي أن شرحت موضوع التوارث هذا بالتفصيل في تدوينة قديمة لمن أراد الرجوع إليها هذا رابطها :

أساسيات لغة CSS | الدرس 22 (التوارث)

كما شرحته في درس جديد تابعه في هذا الفيديو :

فيديو الدرس العشرون

2) مبدأ Cascade :

وهذا المبدأ يقول بأن آخر قاعدة مذكورة ل css هي التي تفوز ، طبعا هذا المبدأ يعمل بشروط :

أولا : غياب النمط الخطي Inline Style

ثانيا : غياب قاعدة مخصصة أكثر

ثالثا : غياب القيمة important!

3) مبدأ التخصيص Specifity :

وهذا المبدأ يقول بأن القاعدة المخصصة أكثر هي التي تفوز ، وهذا المبدأ يعمل أيضا بشرطين :

أولا : غياب النمط الخطي

ثانيا : غياب القيمة important!

وأيضا المبدأين الأخيرين سبق لي شرحهما بالتفصيل في تدوينة قديمة ، وهذا رابطها :

أساسيات لغة CSS | الدرس 23 (ترتيب القواعد)

كما شرحتهما في درس جديد تابعه في هذا الفيديو :

فيديو الدرس الواحد والعشرون

في الدروس القادمة سنبدأ في شرح أهم خصائص css3 ، وفي انتظار ذلك دمتم في رعاية الله وحفظه .

تصميم مواقع الويب | دورة أساسيات لغة css للمبتدئين ( الدرس 19 | Reset Vs Normalize )

2019-03-14T14:47:00.003+01:00

تصميم مواقع الويب للمبتدئين

درس اليوم عن تنسيقات css الإفتراضية للمتصفحات ، فكل متصفح له إعداداته الخاصة وينسق عناصر html بطريقته الخاصة ، وهذه التنسيقات قد تتشابه وقد تختلف من متصفح لآخر ، وبما أنك لا تستطيع إجبار الزائر على تصفح موقعك على متصفح معين ، لن تضع له رسالة مفادها لتصفح الموقع يرجى استخدام متصفح Chrome مثلا أو Firefox ، فأنت مجبر على أخذ جميع المتصفحات حتى تلك التي لا تعرفها والتي قد يستخدمها أي زائر في أي مكان من هذا العالم بعين الإعتبار .

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

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

في هذه التدوينة القديمة التي نشرتها عام 2015 يمكنك تحميل كلا الملفين برابط واحد :

تصميم مواقع الأنترنت | ملف reset و ملف normalize أيهما أفضل ؟

فيديو درس اليوم يوضح أساس المشكلة التي تحدثنا عنها ، كما يوضح الفرق بين ملفي reset.css و normalize.css ، ففرجة ممتعة ، ودمتم في رعاية الله وحفظه.

فيديو الدرس التاسع عشر

تصميم مواقع الويب | دورة أساسيات لغة css للمبتدئين ( الدرس 18 | Media Types )

2019-03-07T21:55:00.003+01:00

تصميم مواقع الويب للمبتدئين

أنواع الميديا Media Types كثيرة ، أشهرها Media Screen و Media Print بالنسبة لمصممي المواقع ، الأولى تعني مختلف الشاشات التي نستخدمها لتصفح الأنترنت صغيرها وكبيرها ، والثانية تعني الطباعة على الورق ، ويستطيع مصمموا ومطوروا الويب والتطبيقات التعامل مع مختلف الشاشات وتخصيص كل شاشة بتصميم خاص يظهر فيها فقط ، وتخصيص تصميم خاص لآلات الطباعة على الورق الذي يكون في العادة عبارة عن صور ونصوص فقط فعلى الورق لن يكون هناك معنى لظهور قائمة الروابط مثلا أو الإعلانات أو زر إضغط هنا !

بمراعاة هذه الإختلافات أثناء التصميم يستطيع مصمموا الويب عمل تصميمات متوافقة Responsive مع كل الأجهزة المكتبية واللوحية والهواتف والطابعة ، غير هذا فموضوع Media كبير جدا وقد يلم المرء بنوع واحد من أنواعه فقط ويتخصص فيه Media Tv كمثال ، في الصورة التالية تتضح Media Types وأمام كل منها الغرض من استخدامها :

كما ترى الموضوع كبير جدا والغوص فيه يحتاج إلى تخصص ، ما يهمنا نحن كمصممي ويب في الغالب هو Media Screen و Media Print ، ولتخصيص تنسيق لكل نوع على حدا هناك طريقتان سأشرحهما بشكل نظري أولا والتفاصيل مع التطبيق في الفيديو :

الطريقة الأولى :

ننشيء ملف css عام نضع فيه تنسيقات الصفحة بشكل عام ، ثم نخصص ملف css لكل شاشة على حسب عرض الشاشة وتخصيص ملف css أيضا لآلات الطباعة ، ونقوم باستدائهم في كود html تباعا مع إضافة Attribute إلى كل وسم link وهو media وقيمته screen أو print ومع الشاشات نضيف attributes مثل min-width و max-width لتحديد الشاشة المستهدفة ، لاحظ الصورة التالية :

الطريقة الثانية :

في نفس ملف css العام أو في ملف مستقل نستخدم القاعدة media@ ، ثم نحدد نوع الميديا وإذا كانت screen نضيف الخصائص الأخرى ، مثلا :

@media screen and (max-width:700px) and (min-width:360px)

بعد ذلك نفتح المزدوجتين ونبدأ في كتابة قواعد css .

ولتخصيص الطباعة نكتب media print@ ثم نفتح المزدوجتين ونكتب قواعد css .

كما قلت هذا مجرد شرح نظري ، شاهد الفيديو التالي لتفهم عمليا كيف يتم عمل تصميمات متوافقة Responsive تظهر بشكل مختلف على كل شاشة مع توفير نموذج للطبع :

فيديو الدرس الثامن عشر

دمتم في رعاية الله وحفظه .