نصائح لتسريع أداء المواقع المبنية بإطار عمل لارافيل

الكثير من الشركات تستخدم إطار العمل لاراڤيل (Laravel) لبناء موقع الويب الخاص بالشركة. اليوم سنقوم بعمل تحسين لسرعة بي اتش بي لارافل في خطوات بسيطة.

استخدام Laravel Mix لتحسين وتصغير الملفات

لارافيل ميكس تقوم بخلط العديد من ملفات الـ CSS لينتج ملف واحد. وبذلك يحتاج الموقع لطلب ملف واحد في http request واحد فقط. مثال على طريقة استخدام ميكس.

mix.styles([ 

'public/css/vendor/normalize.css',

'public/css/styles.css', 

], 'public/css/all.css');

استخدام الحفظ المؤقت cache دائماً

الكاش في مجال البرمجة معناه استخدام المعلومات التي تم تكوينها أو انتاجها في خطوات سابقة. الكاشينج (caching) يلعب دور كبير في تحسين أداء مواقع الويب.

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

إطار العمل لاراڤيل يوفر لنا أمر سهل وبسيط لعمل حفظ مؤقت للكثير من الأمور. يمكنك عمل cache من خلال هذا الأمر.

php artisan config:cache

على سبيل المثال عمل cache للمسارات routes بهذا الأمر.

 php artisan route:cache

استخدام الطوابير Queues

من هياكل البيانات الضرورية في تحسين الأداء هي الطوابير (queue). نستخدم الطابور (queue) غالباً لإرسال رسائل من المستخدم إلى الخدمة أو العكس. سنقوم بالحديث عن استخدام الكيوز (queues) في مقال منفصل إن شاء الله لأنها مهمة جداً في تحسين أداء المواقع المبنية بـ لارافيل.

تحديث لارافيل و بي إتش بي

التحديثات تقوم بعمل الكثير من التحسينات في سرعة وأداء إطار العمل لارافيل ولغة البرمجة PHP لذلك أنصحك بعمل تحديث لإطار العمل واللغة دائماً.

التصغير minification

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

تصغير HTML

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

تصغير CSS

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

تصغير جافاسكربت

تصغير كود جافاسكربت يساعد في تقليل وقت تنفيذ الكود على جهاز المستخدم. تصغير جافاسكربت (javascript) يتم عن طريق الكثير من العمليات أهمها إزالة الـ API calls الغير مستخدمه ، وإزالة المتغيرات الغير مستخدمه ، وإزالة الـ imports الغير مستخدمه ، .. إلخ.

مراقبة ومتابعة أداء الموقع بإستخدام أداة Scout APM (أداة مدفوعة)

أداة Scout APM هي أداة متخصصة في مراقبة تطبيقات الويب لمعرفة المشاكل والعيوب بهدف تحسين أداء مواقع الويب. هذه الأداة تدعم لغات وإطارات عمل كثيرة منها لغة PHP و لغة روبي Ruby ولغة بايثون Python ولغة إيليكسير Elixir وغيرها من لغات البرمجة.

تعدم أداة سكوت إيه بي إم إطار عمل لارافيل من إصدار 5.5 أو أحدث. تساعد أداة Scout APM في معرفة وتحديد أوامر قواعد البيانات N+1 queries وهي تعتبر مشكلة أساسية في Laravel Eloquent .

تثبيت Scout APM في تطبيق لارافيل سهل جداً. كل ما عليك هو تنفيذ هذا الأمر في التيرمينال.

composer require scoutapp/scout-apm-laravel

ثم تنفيذ الأمر scout-app وبذلك نتأكد أنه تم التثبيت بنجاح.

بعد ذلك، نقوم بإضافة هذه الثوابت لملف .env لكي تكامل scout apm مع تطبيق لارافيل الخاص بك.

# Scout settings

SCOUT_MONITOR=true

SCOUT_KEY="[AVAILABLE IN THE SCOUT UI]"

SCOUT_NAME="A FRIENDLY NAME FOR YOUR APP" 

إن كنت تريد تثبيت تطبيق لارافيل على منصة هيروكو (Heroku) من خلال إضافة هيروكو (heroku addon) ، فأنت لا تحتاج إلى إضافة SCOUT_MONITOR ولا SCOUT_KEY لأن هيروكو يقوم بإضافتهم تلقائياً.

ثم بعد ذلك تضيف ملف config/scout_amp.php بإستخدام هذا الأمر.

php artisan vendor:publish --provider=\"Scoutapm\\Laravel\\Providers\\ScoutApmServiceProvider\"

وبعد ذلك تقوم بحذف ملفات الكاش (ملفات الحفظ المؤقت) ، وتقوم بإعادة بنائها مرةً أخرى. استخدم هذه الأوامر بالترتيب.

php artisan cache:clear

php artisan route:cache

php artisan config:cache 

ويُمكنك التأكد من حالة الحفظ المؤقت (cache) من خلال هذا الأمر.

php artisan about

إن أردت أن تضيف امتداد / اضافة scoutapm PHP extension استخدم هذا الأمر.

sudo pecl install scoutapm

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

كيف تكتب كود اللون الشفاف ؟

شرحنا أكواد الألوان من قبل هنا على موقع أبانوب حنا في موضوع بعنوان "شرح أكواد الألوان" يُمكنك قراءته. ولكن الآن سنشرح كل الطرق التي يُمكنك أن تكتب بها كود لون شفاف.

لكتابة كود لون شفاف لابد أن يحتوي كود اللون على مقياس للشفافية (opacity) أو قيمة ألفا (alpha) لذلك نستخدم واحدة من هذه الطرق لكتابة كود اللون الشفاف.

١. استخدام كود argb بهذا الشكل #aarrggbb مثال #00000000 هذا لون أسود ولكنه شفاف لذلك لن يظهر اللون أصلاً. مثال آخر #ff000000 هذا لون أسود ويظهر باللون الأسود لأنه ظاهر وليس شفاف. أى أن قيمة الشفافية FF وهي أعلي قيمة لوضوح اللون. أى إن أردت عمل لون شفاف استخدم قيمة aa كـ 00 وسوف يصبح اللون شفاف ١٠٠٪.

٢. استخدام كود rgba بهذا الشكل rgba(255,0,0,0) هذا اللون أحمر ولكنه شفاف لذلك لا تري اللون الأحمر. أى أن قيمة الـ a هي صفر. أما إن أردت ظهور اللون بشكل طبيعي بدون شفافية استخدم قيمة ٢٥٥ لقيمة الـ a في كود اللون لأنها أعلى قيمة.

٣. استخدام كود الألوان hsla بهذا الشكل hsla(9,100%,64%,0) هذا لون أحمر برتقالي ولكنه شفاف لذلك لن ترى اللون. اللون شفاف لأن قيمة a في الكود هي صفر. أما إن أردت أن تظهر اللون بشكل عادي استخدم اعطِ a قيمة 1 وسترى الألوان بشكل عادي.

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

الفرق بين الرندر على السيرفر وعلى المتصفح ! وأيهما أفضل ؟

كان جميع الناس يستخدمون طريقة واحدة وهي تكوين صفحة HTML وإرسالها إلى متصفح المستخدم. ويقوم المتصفح بعرض الـ HTML وتنسيقه بالـ CSS وانتهى الأمر. ولكن بعد الشهرة الكبيرة التي أخذتها لغة جافاسكربت ووجود الكثير من الفريم ورك مثل angular و react و vue أصبح من الممكن أن يستقبل المتصفح الكود العام لصفحة الويب HTML و CSS ويتم طلب البيانات والمعلومات من السيرفر وتقوم جافاسكربت بعرض هذه البيانات بعد استلامها من السيرفر.

والآن أصبح لدينا طريقتين؛ إما عمل server-side rendering أو client-side rendering . أى أن من يجمع صفحة الويب؟ السيرفر أم المتصفح؟

ما هو الرندر على السيرفر؟

الخطوات التي تحدث عندما يكون الموقع يقوم بالريندر على السيرفر هي كالآتي.

١. يقوم المستخدم بطلب الموقع عن طريق المتصفح

٢. السيرفر يكوّن صفحة HTML ويرسلها

٣. يستقبل المتصفح صفحة HTML ويعرضها وينسقها بـ CSS

٤. يقوم المتصفح بتنزيل سكربتات جافاسكربت

٥. يمكن للمستخدم أن بتفاعل مع المحتوي ويقرأ كما يشاء

٦. المتصفح ينفذ سكربتات جافاسكربت للرد على تفاعلات المستخدم. مثل عرض عناصر القائمة عن الضغط على زر القائمة.

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

مميزات الرندر على السيرفر

يتميز الرندر على السيرفر بأنه مناسب لأرشفة محركات البحث لأن عناكب الأرشفة ترى معلومات الصفحة فوراً لأن الصفحة تكونت على السيرفر وجاهزة للعرض. مما يجعل المواقع التي تهتم بالتحسين لمحركات البحث ( السيو SEO ) تفضل الرندر على السيرفر (Server-side Rendering).

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

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

من عيوب الرندر على السيرفر أن كل مرة يتم فتح صفحة الويب يتم تنزيل مكونات الصفحة من HTML و CSS وصور من جديد. وهذا يجعلها بطيئة على الأجهزة المتصلة بإنترنت بطئ. ولكن هناك فكرة التخزين المؤقت (Cache) التي تستخدمها جميع متصفحات الإنترنت مما يجعل الأجزاء التي يعاد استخدامها في صفحة الويب لا يتم تنزيلها من الجديد.

متى تختار الرندر على السيرفر؟

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

ما هو الرندر على المتصفح؟ 

أما الخطوات التي تحدث عندما يكون الموقع يقوم بالريندر على المتصفح الخاص بالمستخدم تكون كالآتي.

١. المستخدم يطلب الموقع عن طريق المتصفح

٢. السيرفر أو CDN يرسل ملف HTML بها التصميم الأساسي لصفحة الويب وروابط سكربتات جافاسكربت

٣. يقوم المتصفح بتنزيل صفحة HTML ( حتى الآن الموقع غير جاهز للمستخدم)

٤. يقوم المتصفح بتنزيل ملفات جافاسكربت

٥. تنفيذ كود جافاسكربت وعمل بعض النداءات والطلبات للـ API وتجهيز أماكن ظهور المعلومات

٦. يرد السيرفر بالمعلومات للمتصفح

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

مميزات الرندر على المتصفح

من أهم مميزات الرندر على المتصفح هو سرعة تحميل الصفحات على المتصفح. لأن المتصفح يقوم بطلب المعلومات التي يحتاجها فقط عن طريق كود AJAX ثم يقوم بأخذ المعلومات المطلوبة وعرضها داخل صفحة الويب. هذا يجعل الطلب أصغر بكثير من تحميل صفحة الويب بالكامل من جديد (HTML & CSS & Javascript). أى أن المتصفح يعيد استخدام كل الكود الذي قام بتحميله أول مرة فتحت الموقع فيها. كل ما يتغير هي المعلومات والصور والنصوص المكتوبة في صفحة الويب.

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

عيوب الرندر على المتصفح

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

متى تختار الرندر على المتصفح؟

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

مقارنة بين الرندر على المتصفح ، والرندر على السيرفر

سرعة تحميل الصفحة لأول مرة : الرندر على السيرفر أسرع من الرندر على المتصفح

سرعة تحميل الصفحات بعد ذلك : الرندر على المتصفح أسرع من الرندر على السيرفر

الأرشفة والسيو : الرندر على السيرفر أفضل من الرندر على المتصفح

تجربة الإستخدام وسرعة التنقل : الرندر على المتصفح أفضل من الرندر على السيرفر

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

كيفية تنزيل مشروع git ضخم من جت هب (github) ؟

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

git clone https://github.com/abanoub-hanna/gtk-pos.git

أضف اختيار --depth 1 لكي يتم تنزيل آخر تعديل على الكود فقط. ولا يتم تنزيل كل تاريخ التعديلات على الكود. وهذا يقلل كثيراً جداً من حجم المشروع عند تنزيله.

git clone https://github.com/abanoub-hanna/gtk-pos.git --depth 1

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

--branch <branch name> --single-branch

ويصبح الأمر كما يلي.

git clone https://github.com/abanoub-hanna/gtk-pos.git --depth 1 --branch master --single-branch

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

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

git fetch --unshallow

أما إن أردت الحصول على تاريخ أعمق للمشروع ولكن ليس كل المشروع. حدد عدد التعديلات التي تريدها في الأمر التالي.

git fetch --depth=25

في هذا الأمر، اخترت أنا أن أنزل آخر ٢٥ تعديل سابق على كود المشروع. ولكن يمكنك أن تختار أى رقم كما تشاء.

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

شرح طريقة كتابة ملف htaccess ووظائفه

نستخدم ملف htaccess لتحديد عرض الملفات ومسارات صفحات الويب للموقع. ملف htaccess هو ملف مخفي يبدأ بنقطة (period). لفهم معنى الأسطر المكتوبة في هذا الملف أكمل قراءة.

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

DirectoryIndex index.php index.html

السطر السابق يعني أن الصفحة الرئيسية هي index.php وإن لم يكن ملف index.php موجود فإستخدم ملف index.html ليعتبر الصفحة الرئيسية.

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

OPTIONS -INDEXES

في الكود السابق استخدمنا علامة ناقص (-) قبل كلمة INDEXES لكي نمنع ظهور محتوى المجلدات. أما إن أردنا إظهار محتوى المجلدات نستخدم الكود التالي.

OPTIONS +INDEXES

أى أننا استخدمنا علامة زائد (+).

السماح بمتابعة الروابط

OPTIONS -FollowSymLinks

ولعدم السماح بمتابعة الروابط

OPTIONS +FollowSymLinks

منع ظهور معلومات السيرڤر (Server)

ServerSignature OFF

إعادة توجيه مؤقتة

Redirect 302 / https://google.com

إعادة توجيه دائمة

Redirect 301 / https://google.com

إعادة توجيه https إلى http

RewriteEngine On
RewriteCond %{HTTPS} on
RewriteRule (.*) http://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

إعادة الصفحات الغير موجودة 404 Not Found إلى الصفحة الرئيسية

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . / [L,R=301]

عمل إعادة توجيه صفحات الخطأ إلى صفحات مخصصة

ErrorDocument 404 /404.html
ErrorDocument 403 /403.html

نموذج لكود مجمع لشرح ملف htaccess

#the main page is 'index.php', if not found use 'index.html' instead, if it also not found, use 'index.htm'
DirectoryIndex index.php index.html index.htm
#disallow/deny directory listing
OPTIONS -INDEXES
#Allow directory listing
OPTIONS +INDEXES
#do not follow symbolic links / soft-links
OPTIONS -FollowSymLinks
#allow follow symbolic links / soft-links
OPTIONS +FollowSymLinks
# turn off server signature
ServerSignature OFF
#default WordPress .htaccess file
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]
</IfModule>
# temporary redirect / to google.com
Redirect 302 / https://google.com
# permanently redirect / to google.com (better for SEO if you need to redirect)
Redirect 301 / https://google.com
# redirect https to http
RewriteEngine On
RewriteCond %{HTTPS} on
RewriteRule (.*) http://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
# redirect 404 NOT FOUND to HOMEPAGE
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . / [L,R=301]
# customize error pages
ErrorDocument 404 /404.html
ErrorDocument 403 /403.html

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

كود برمجة تطبيق أندرويد لتحويل الكلام إلى نص مكتوب بلغة جافا

نظام أندرويد يوفر لنا ميزة تحويل المحادثات إلى نص مكتوب من خلال Android Speech API. استخدمنا من قبل هذه الميزة في تحويل الكلام المكتوب إلى صوت منطوق في شرح سابق. واليوم نقوم بتحويل الصوت إلى كلام مكتوب. يُمكنك استخدام هذه الميزة لإضافة أوامر صوتية لتطبيق الأندرويد أو أن تقوم بإضافة إمكانية ملء البيانات عن طريق الصوت بدلاً من الكتابة.

صممت تطبيق بسيط يحتوي على زر واحد و textview واحدة كما ترى في الصورة التالية.

خطوات انشاء تطبيق أندرويد لتحويل الصوت إلى كلمات مكتوبة

١. عدّل ملف strings.xml الموجودة في هذا المسار res/values ليصبح مثل هذا الكود

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Speech To Text</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="speech_prompt">Say something&#8230;</string>
    <string name="speech_not_supported">Sorry! Your device doesn\'t support speech input</string>
    <string name="tap_on_mic">Tap on mic to speak</string>
</resources>

٢. عدّل ملف colors.xml الموجود في هذا المسار res/values إن لم تجد هذا الملف قم بإنشاؤه.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="white">#ffffff</color>
    <color name="bg_gradient_start">#31244e</color>
    <color name="bg_gradient_end">#6b394c</color>
</resources>

٣. عدّل تصميم الصفحة الرئيسية من التطبيق وهى activity_main.xml للكود التالي:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_gradient"
    android:orientation="vertical" >
 
    <TextView
        android:id="@+id/txtSpeechInput"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="100dp"
        android:textColor="@color/white"
        android:textSize="26dp"
        android:textStyle="normal" />
 
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="60dp"
        android:gravity="center"
        android:orientation="vertical" >
 
        <ImageButton
            android:id="@+id/btnSpeak"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@drawable/ico_mic" />
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="@string/tap_on_mic"
            android:textColor="@color/white"
            android:textSize="15dp"
            android:textStyle="normal" />
    </LinearLayout>
 
</RelativeLayout>

٤. افتح ملف الكود MainActivity.java وقم بالتعديلات كما تجد في الشرح التالي.

أولاً: بدء RecognizerIntent لأخذ الصوت من المستخدم ب ACTION_RECOGNIZE_SPEECH وهي ببساطة تأخذ مدخلات المستخدم الصوتية وترسلها للـ main activity

ثانياً: استقبال النص داخل التطبيق. بعد الإنتهاء من الكلام، لابد أن تستقبل الرد داخل onActivityResult وتقوم بالعمليات التي تريدها. لفهم أعمق أقرأ الكود الكامل التالي.

package com.learns7.stt;
 
import java.util.ArrayList;
import java.util.Locale;
 
import android.app.Activity;
import android.content.ActivityNotFoundException;
import android.content.Intent;
import android.os.Bundle;
import android.speech.RecognizerIntent;
import android.view.Menu;
import android.view.View;
import android.widget.ImageButton;
import android.widget.TextView;
import android.widget.Toast;
 
public class MainActivity extends Activity {
 
    private TextView txtSpeechInput;
    private ImageButton btnSpeak;
    private final int REQ_CODE_SPEECH_INPUT = 100;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        txtSpeechInput = (TextView) findViewById(R.id.txtSpeechInput);
        btnSpeak = (ImageButton) findViewById(R.id.btnSpeak);
 
        // hide the action bar
        getActionBar().hide();
 
        btnSpeak.setOnClickListener(new View.OnClickListener() {
 
            @Override
            public void onClick(View v) {
                promptSpeechInput();
            }
        });
 
    }
 
    /**
     * Showing google speech input dialog
     * */
    private void promptSpeechInput() {
        Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);
        intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL,
                RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);
        intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE, Locale.getDefault());
        intent.putExtra(RecognizerIntent.EXTRA_PROMPT,
                getString(R.string.speech_prompt));
        try {
            startActivityForResult(intent, REQ_CODE_SPEECH_INPUT);
        } catch (ActivityNotFoundException a) {
            Toast.makeText(getApplicationContext(),
                    getString(R.string.speech_not_supported),
                    Toast.LENGTH_SHORT).show();
        }
    }
 
    /**
     * Receiving speech input
     * */
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
 
        switch (requestCode) {
        case REQ_CODE_SPEECH_INPUT: {
            if (resultCode == RESULT_OK && null != data) {
 
                ArrayList<String> result = data
                        .getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS);
                txtSpeechInput.setText(result.get(0));
            }
            break;
        }
 
        }
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
 
}

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

كيف نستخدم تحويل الكلام إلى نص مكتوب بدون إنترنت ؟

ليست كل الموبايلات لديها إمكانية تحويل الكلام إلى نص مكتوب بدون إنترنت.

خطوات تنزيل ملفات تحويل الأصوات إلى كلام مكتوب لكي تعمل بدون إنترنت:

1. في موبايلك، اذهب إلى الإعدادات (settings) ثم اللغة والإدخال (Language and Input) ثم اختر أيقونة برنامج Google voice input
2. تحت تبويب الكل (all) اختر اللغات التي تريد تحميلها
3. بمجرد نزول ملف اللغة على جهازك، ستجد اللغة ظهرت في تبويب installed وبذلك يمكنك استخدام إمكانية تحويل الكلام إلى نص مكتوب بهذه اللغة.

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

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

كود برمجة تطبيق أندرويد لتحويل النص إلى صوت بلغة جافا

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

يوفر لنا نظام أندرويد كلاس TextToSpeech بتحويل النص إلى حديث (صوت). لإستخدام هذا الكلاس، علينا أولاً أن نعرف أوبجكت منه (instantiate object) من هذا الكلاس. كما ترى في الكود التالى.

private EditText write;
ttsobj = new TextToSpeech(getApplicationContext(), new TextToSpeech.OnInitListener(){
@override
public void onInit(int status){
}
});

في كود انتظار التعليمات (Listener)، لابد أن نحدد خصائص أوبجكت TextToSpeech مثل اللغة و حدّة الصوت .. وهكذا. يمكن تحديد اللغة عن طريق setLanguage() وطريقة كتابة هذه الفانكشن كما يلي:

ttsobj.setLanguage(Locale.UK);

الميثود setLanguage تأخذ باراميتار واحد وهو اللغة مثل US أو CANADA_FRENCH أو GERMANY أو ITALY أو JAPAN أو CHINA وهكذا.

بعد تحديد اللغة، يمكنك استدعاء ميثود speak من الكلاس لتقوم بنطق الكلمات باللغة المحددة مسبقاً. طريقة كتابة كود speak يكون كالتالي:

ttsobj.speak(toSpeak, TextToSpeech.QUEUE_FLUSH, null);

هناك الكثير من المثيودس (method) والدوال الأخرى التي يمكنك استخدامها من كلاس TextToSpeech وهذه الدوال هى:

addSpeech(String text, String filename)	هذه الدالة تربط بين النص المكتوب، وملف الصوتي للنص.
getLanguage()	هذه الدالة تعطينا لغة النص.
isSpeaking()	هذه الدالة تخبرنا إن كان المحرك الصوتي مشغول بنطق الكلام حالياً أم لا.
setPitch(float pitch)	هذه الدالة خاصة بإختيار حدة الصوت.
setSpeechRate(float speechRate)	هذه الدالة تحدد سرعة النطق.
shutdown()	هذه الدالة تزيل مصادر الجهاز التي يستخدمها محرك النطق TextToSpeech engine مثل الرامات والبروسيسور.
stop()	هذه الدالة مسؤولة عن إيقاف صوت نطق الكلام.

مثال على تحويل النص إلى كلام منطوق

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

خطوات إنشاء تطبيق أندرويد لنطق الكلام

1. قم بإنشاء مشروع جديد على برنامج أندرويد ستوديو (Android Studio) واختر مسار حزمة البرنامج com.learns7.tts مثلاً
2. قم بالتعديل على ملف src/MainActivity.java وأضف كود تشغيل كلاس النطق الصوتي TextToSpeech كما في الكود التالي.
3. وصّل موبايلك الأندرويد بجهاز الكمبيوتر، ثم شغّل (run) التطبيق على موبايلك المتصلك بالجهاز. وتأكد من أن التطبيق يعمل بشكل سليم.

كود src/MainActivity.java لتحويل الكلام المكتوب إلى صوت منطوق

package com.learns7.tts;
import android.app.Activity;
import android.os.Bundle;
import android.speech.tts.TextToSpeech;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import java.util.Locale;
import android.widget.Toast;
public class MainActivity extends Activity {
   TextToSpeech t1;
   EditText ed1;
   Button b1;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      ed1=(EditText)findViewById(R.id.editText);
      b1=(Button)findViewById(R.id.button);
      t1=new TextToSpeech(getApplicationContext(), new TextToSpeech.OnInitListener() {
         @Override
         public void onInit(int status) {
            if(status != TextToSpeech.ERROR) {
               t1.setLanguage(Locale.UK);
            }
         }
      });
      b1.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            String toSpeak = ed1.getText().toString();
            Toast.makeText(getApplicationContext(), toSpeak,Toast.LENGTH_SHORT).show();
            t1.speak(toSpeak, TextToSpeech.QUEUE_FLUSH, null);
         }
      });
   }
   public void onPause(){
      if(t1 !=null){
         t1.stop();
         t1.shutdown();
      }
      super.onPause();
   }
}

وهذا هو كود xml المكتوب في ملف activity_main.xml الخاص بتصميم شكل التطبيق

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
   android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin"
   tools:context=".MainActivity"
   android:transitionGroup="true">
   
   <TextView android:text="Text to Speech" android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/textview"
      android:textSize="35dp"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true" />
            
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView"
      android:src="@drawable/abc"
      android:layout_below="@+id/textView"
      android:layout_centerHorizontal="true"
      android:theme="@style/Base.TextAppearance.AppCompat" />
      
   <EditText
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/editText"
      android:layout_below="@+id/imageView"
      android:layout_marginTop="46dp"
      android:hint="Enter Text"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:textColor="#ff7aff10"
      android:textColorHint="#ffff23d1" />
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Text to Speech"
      android:id="@+id/button"
      android:layout_below="@+id/editText"
      android:layout_centerHorizontal="true"
      android:layout_marginTop="46dp" />
</RelativeLayout>

وهذا هو ملف Strings.xml الخاص بحفظ نصوص أجزاء التصميم

<resources>
   <string name="app_name">TTS</string>
</resources>
كود ملف مشروع تطبيق الأندرويد AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.learns7.tts" >
   <application
      android:allowBackup="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
   
      <activity
         android:name=".MainActivity"
         android:label="@string/app_name" >
      
         <intent-filter>
            <action android:name="android.intent.action.MAIN" >
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
         
      </activity>
      
   </application>
</manifest>

شغّل التطبيق على موبايلك المتصل بجهاز الكمبيوتر. وعندما يعمل التطبيق على الموبايل، أكتب كلمة Hello world مثلاً. ثم اضغط على زر Text To Speech ستجد صوت يخرج من موبايلك وينطق جملة Hello world أو أى جملة أخرى كتبتها في صندوق النص.

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

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

شرح تصميم قالب بلوجر – الجزء الرابع

تصميم قالب بلوجر سهل مثل كتابة صفحات HTML عادية ولكن الفرق هو أن بلوجر توفر لنا طريقة لإنشاء صفحات ديناميكية عن طريق ترجمة القالب (parsing) وإضافة الداتا المستخدمة في كتابة كود القالب.

تعلمنا في الجزء الأول والثاني والثالث كل ما يخص عناصر تصميم بلوجر (Blogger Elements) والمعلومات الخاصة بطريقة استخدامهم. ولكن الآن، في الجزء الرابع، نتكلم عن طريقة استخدام css لتنسيق ثيم بلوجر. واستخدام المتغيرات (defining variables)، و تصميم تخطيط الصفحة (page layout)، و كيف تجعل المدونة قابلة للتخصيص عن طريق الـ Theme Designer.

الـ Theme Designer يُسمي أيضاً Template Designer وهو طريقة تقدمها منصة بلوجر للتعديل على قوالب وثيمات بلوجر الخاصة بمدونتك.

استخدام b:skin لتنسيق ثيم بلوجر

وسم b:skin يستخدم مثل وسم <style> في كود HTML حيث يتم وضع كود لغة التنسيق CSS داخله. ولكن منصة بلوجر أعطتنا ميزة اضافية وهي إمكانية عمل متغيرات variables واستخدامها كقيم لخصائص العناصر في لغة CSS. بالإضافة إلى إمكانية ضم هذه المتغيرات في مجموعات واستخدامهم في كود CSS.

اضافة كود b:skin

كود <b:skin> لابد من اضافتها داخل وسم <head> داخل كود قالب بلوجر. لابد أن توضع كل المتغيرات ومجموعاتها داخل /** */ أو داخل <![CDADTA[ ]]> لكي لا يقوم المتصفح ولا الـ xml parser بترجمتهم (parsing). لأن هذا الكود يقوم بترجمته محرك بلوجر (Blogger engine) ويعرض كود CSS عادي جداً بعد ترجمته.

طريقة اضافة تنسيقات CSS لقالب بلوجر

<!-- Defining b:skin example -->
   .....
   <head>
     .....
     <b:skin><style typ="text/css">
         /**
          *  Variable Definitions go here.
          */
   
         /**
          *  CSS Styles go below, followed by the Variable Definitions
          */
     <style></b:skin>
     ......
   </head>
   .....

استخدام المتغيرات في تنسيق CSS في بلوجر

استخدم تاج <Variable> مع بعض الخصائص (السمات) وهم :

• name : اسم مميز وغير مكرر يتكون من حروف وأرقام.
• description : وصف قصير للمتغير. هذا الوصف يظهر في template designer أثناء تخصيص قالب بلوجر.
• type : قيمتها تكون إما Font أو color أو length أو string أو url أو background بعض هذه القيم تضيف خصائص أخرى للمتغير.
• value : قيمة المتغير
• default : القيمة الإفتراضية للمتغير. يستخدم محرك بلوجر هذه القيمة في حالة عدم وجود قيمة في value للمتغير.

القيمة المكتوبة في default و value لابد أن تتبع نوع المتغير. للتوضيح أكثر، هذه هي أنواع المتغيرات (types) وطريقة كتابتها (formats).

• color : قيمة اللون لابد أن تكون hexadecimal مثال #FF2266. يمكن استخدام هذا المتغير كقيمة للخصائص في كود CSS التي تطلب لون. عمل مجموعة من الألوان، يجعلها تظهر في قسم داخل الـ Theme Designer كما ترى في الصورة التالية.

• font : طريقة كتابة الخط تكون بهذا الترتيب font-style font-weight font-size font-family. تستخدم لإعطاء تنسيق الخط للعناصر داخل كود CSS. يظهر اختيار اللون داخل Theme Designer في بلوجر كما ترى الصورة التالية.

لمشاهدة متغيرات القالب إذهب إلى Theme ثم Customize سيفتح لك الـ Blogger Theme Designer ثم اضغط على تبويب Advanced وستجد به كل مجموعات المتغيرات التي يمكنك تغييرها.

مثال على مجموعات المتغيرات في كتابة كود ثيم بلوجر

<!-- Variable Declaration -->
   ....
   <head>
   <title><data:blog.pageTitle/></title>
     <b:skin>
       <style type='text/css'>
       /** Color and font variable declaration
   
       <Variable name="title.color" description="Title Color" type="color" default="#000000" value="#2f2f2f"/>
   
       <Variable name="title.font" description="Title Font Styles" type="font" 
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
   
       */
       
       /** CSS styles */
       </style>
     </b:skin>
   
     (or)
   
     <b:skin><![CDATA[
       /** Color Variable Declaration */
       <Variable name="title.color" description="Title Color" type="color" default="#000000" value="#2f2f2f"/>
   
       /** Font Variable Declaration */
       <Variable name="title.font" description="Title Font Styles" type="font" 
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     ]]></b:skin>
   </head>
   ....

استخدام مجموعات المتغيرات في بلوجر

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

عمل مجموعات من المتغيرات يجعل تخصيص هذه المتغيرات سهل جداً في الـ Blogger Theme Designer دون الدخول إلى كود ثيم بلوجر لتغيير قيم المتغيرات.

لكتابة مجموعة نستخدم وسم <group> ونستخدم الخصائص التالية مع وسم group :

• description : وصف قصير للمجموعة. هذا الوصف يستخدم لتعريف المجموعة داخل الـ Blogger Theme Designer كما ترى في الصورة التالية.

• selector : يحدد CSS Selector ليستخدم للمجموعة داخل الـ Theme Designer في بلوجر. تستخدم لتحديد المنطقة التي تتأثر بتغير هذه المجموعة من المتغيرات. يتم تحديد المكان عن طريق صندوق بلون معين حول القسم أو الجزء من الصفحة كما ترى في الصورة التالية.

مثال كود عمل مجموعة متغيرات في تنسيق ثيم بلوجر

<!-- Group Declaration -->
   ....
   <head>
   <title><data:blog.pageTitle/></title>
     <b:skin><![CDATA[
       /**
        * Grouping the variables shown in previous example
        */
       <Group description="Codedodle Title" selector=".header">
         <Variable name="title.color" description="Title Color" type="color" default="#000000" value="#2f2f2f"/>
         <Variable name="title.font" description="Title Font Styles" type="font" 
           default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
       </Group>
     ]]></b:skin>
   </head>
   ....

الكود السابق يظهر كيف تستخدم مجموعات المتغيرات، والصورة السابقة توضح كيف تظهر مجموعات المتغيرات في Theme Designer في بلوجر.

استخدام المتغيرات في كود تنسيق CSS

لكي تستخدم هذه المتغيرات داخل تنسيقات CSS استخدم طريقة استدعاء المتغير عن طريق وضع علامة الدولار قبل اسم المتغير $variable_name أو عن طريق استدعى المتغير بهذه الطريقة $(variable.name) كما تجد في المثال التالي.

<!-- Using the variables -->
   ....
   <head>
   <title><data:blog.pageTitle/></title>
     <b:skin><![CDATA[
       /**
        * Grouping the variables shown in previous example
        */
       <Group description="Codedodle Title" selector=".header">
         <Variable name="title.color" description="Title Color" type="color" default="#000000" value="#2f2f2f"/>
         <Variable name="title.font" description="Title Font Styles" type="font" 
           default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
       </Group>
   
       /**
        * CSS Style */
   
       .Header h1 a {
         color: $(title.color);
         font: $(title.font);
         text-align: center;
       }
     ]]></b:skin>
   </head>
   ....

استخدام template skin في ثيم بلوجر

يستخدم <template-skin> لنضع بها كل المتغيرات variables التي تتحكم في عرض width الصفحة وعرض أقسام الصفحة. بهذه الطريقة يمكن تغيير عرض كل أقسام الصفحة بسهولة داخل Blogger Theme Designer.

مثال على طريقة استخدام b:template-skin في ثيم بلوجر

<!-- template-skin example code -->
   ....
   <head>
   <title><data:blog.pageTitle/></title>
     <b:skin><![CDATA[
       ....
     ]]></b:skin>
     <b:template-skin>
       <b:variable default='960px' name='page.width' type='length' value='960px'/>
       <b:variable default='0' name='main.sidebar.left.width' type='length' value='0px'/>
       <b:variable default='310px' name='main.sidebar.right.width' type='length' value='310px'/>
   
       body {
         min-width: $(page.width);
       }
   
       .sidebar-left {
         min-width: $(main.sidebar.left.width);
       }
   
       .sidebar-right {
         min-width: $(main.sidebar.right.width);
       }
      </b:template-skin>
   </head>
   ....

أنواع متغيرات أخرى

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

<!-- other variable types -->
   ....
   <head>
   <title><data:blog.pageTitle/></title>
     <b:skin><<style type="text/css">
       /** Length Variable */
       <Variable name="content.padding" 
         description="Content Padding" 
         type="length" 
         default="10px" min="0" max="100px" 
         value="10px"/>
   
       /** URL Variable */
       <Variable name="body.background.gradient" 
         description="Body Gradient Cap" 
         type="url"
         default="url(https://domain.com/path/to/gradient.png)" 
         value="url(https://domain.com/path/to/gradient.png)"/>
   
       /** Background Variable */
       <Variable name="blog.background"
         color="$(content.background.color)"
         description="Background of blog paging area" 
         type="background"
         default="transparent none no-repeat scroll top center" 
         value="transparent none no-repeat scroll top center"/>
   
       /** String Variable */
       <Variable name="page.width" 
         description="Page Width" 
         type="string" 
         default="auto" 
         value="auto"/>
     </style>
     ]]></b:skin>
   </head>
   ....

الكود السابق يوضح اعلان متغيرات من النوع length و url و background و string.

انتهينا من الحديث عن كيفية إضافة تنسيقات CSS داخل ثيم بلوجر. وطرق الإستفادة من إمكانيات بلوجر في المتغيرات ومجموعات المتغيرات لتسهيل تخصيص القالب عند كل المدونين عن طريق Blogger Theme Designer دون الدخول للكود.

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

شرح تصميم قالب بلوجر – الجزء الثالث

في الجزء الثاني من شرح تصميم ثيم بلوجر، تكلمنا عن عنصر widget من عناصر منصة بلوجر، وتكلمنا عن مكونات b:widget وهى includable و include. في هذا المقال (الجزء الثالث من شرح تصميم قوالب بلوجر) نتحدث عن جزء هام وضروري في قوالب بلوجر. وهو كود data الخاص بمنصة بلوجر. نشرح وسم data مع شرح التكرار loop والشرط conditional tags.

استخدام الشرط في قوالب بلوجر

كما تعرف من تعلمك للغات البرمجة، هناك دالة تُسمي if/else يتم عرض المعلومات بناءاً على تحقق شرط معين أو عدم تحققه. وهذه طريقة كتابة كود الشرط في منصة بلوجر.

<b:if cond='condition'>
       [content to display if condition is true]
   <b:else/>
       [content to display if condition is false]
   </b:if>

جزء الـ b:else اختياري. أى يمكنك ألا تكتبه إن أردت. إن لم يوجد جزء else فإن الكود داخل وسم الشرط b:if سيتم عرضه في حالة تحقق الشرط فقط.

لكتابة الشرط condition لابد أن تكتب شئ نتيجته تكون إما true أو false (أى boolean type إن كنت درست لغة برمجة من قبل). يُمكنك أن تضع قيمة من الـ data نفسها، ولكن لابد أن تكون عبارة عن true أو false. مثال data:post.allowComments . قيمة allowComments تكون true إن كان مسموح بكتابة التعليقات لهذا البوست، أما إن كانت التعليقات غير مسموح بها فإن قيمتها تكون false.

أمثلة أخرى لتوضيح الفكرة أكثر

• <b:if cond='data:post.numComments > 1'> : تكون true إن كان البوست أو التدوينة عليها أكثر من تعليق.
• <b:if cond='data:blog.pageType == "item"'> : تكون true إن كانت الصفحة الحالية هي صفحة مفردة على بلوجر (item page) وهي صفحة عرض البوست بالكامل على مدونات بلوجر.

أو يمكنك مقارنةً قيمتين، وتعرض كود معين عندما تكون true وكود آخر عندما يكون false. كما تجد في المثال التالي.

<b:if cond='data:post.numComments > 1'>
       [Comments are available]
   <b:else/>
       [Comments are not available]
   </b:if>

استخدام التكرار في منصة بلوجر

وسم b:loop يسمح لك أن تكرر نفس الكود أكثر من مرة كما تحب. التكرار مفيد جداً في عرض قوائم البيانات مثل الـ labels في البوست (التدوينة). ومفيد أيضاً في عرض التعليقات لكل بوست (تدوينة). ومفيد أيضاً في عرض البوستات (التدوينات posts) داخل المدونة.

طريقة كتابة التكرار في قوالب بلوجر

<b:loop var='identifier' values='set-of-data'>
       [content that will be repeated]
   </b:loop>

سمة values لابد أن تحتوي على قائمة من الداتا. ويتم التعامل مع كل عنصر من عناصر قائمة الداتا داخل كود التكرار. يتم التعامل مع الداتا داخل التكرار باستخدام المتغير identifier الذي تجده في سمة var.

لاحظ : سمة هي ترجمة لكلمة attribute في اللغة الإنجليزية. وهي تعنى خصائص الوسم (tag). وسم هي ترجمة لكلمة tag في اللغة الإنجليزية.

الداتا تاج (Data Tag)

وسم data: من أهم وسوم (عناصر) منصة بلوجر. هذا هو المكان الذي تأتي منه كل معلومات المدونة. معلومات المدونة مثل العنوان title والرابط url والتدوينات posts وكل المعلومات التي تظهر في المدونة.

مثال على استخدام تاج داتا في منصة بلوجر

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
       <data:title/>
   </b:widget>

تاج داتا يحتوي على معلومات مختلفة بإختلاف مكان استخدامه داخل الكود. إن استخدمت تاج داتا داخل widget ستجد المعلومات خاصة بهذا الويدجت وتختلف باختلاف نوع الويدجت (widget type). أى أنها تعتبر scoped variable كما في لغات البرمجة.

أما إن استخدمت تاج داتا خارج الويدجت (أى global scope) فالمعلومات التي تحصل عليها منها تختلف عن معلومات الويدجت.

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

<b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false'>
       <b:includable id='main'>
           <h3><data:title/></h3>
       </b:includable>
   </b:widget>
   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
       <b:includable id='main'>
           <h3><data:title/></h3>
       </b:includable>
   </b:widget>

في الكود، استخدمنا <data:title/> في كلا الويدجت (both widgets). ولكن العنوان title لكل ويدجت سيختلف باختلاف الويدجت.

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

يُمكننا تشبيه blog كإنها object في لغة جافاسكربت تحمل خصائص يمكن استدعائها عن طريق الـ dot notation كما نفعل في سكربتات جافاسكربت.

شكل الكود في جافاسكربت

// Consider the following scenario in JavaScript
   // Consider blog is a property of "window" and window is identical to data.
   blog = {
       'title': 'The title for the blog',
       'pageType': 'The type of the current page. One of "item", "index", "archive"',
       'homepageUrl': 'The homepage of the blog',
       'pageName': 'The title of the current page'
   };
   
   alert(blog.title);
   
   if (blog.pageType == 'item') {
       alert(blog.pageName);
   } else {
       alert(blog.title);
   }
يُمكننا كتاية نفس الكود السابق في بلوجر كالتالي:
<b:if cond='data:blog.pageType != "item"'>
       <data:blog.title/>
   <b:else/>
       <data:blog.pageName/>
   </b:if>

في بلوجر، جزء الـ blog وخصائصه تجد بها كل المعلومات عن مدونة بلوجر الحالية.

استخدام expr في منصة بلوجر

تستخدم expr لحساب قيمة معينة واضافتها لخاصية معينة (attribute). تُستخدم عادةً لحساب قيمة خاصية مُستدعاة من data: في بلوجر.

طريقة كتابة expr في قالب بلوجر

<tagName expr:attribute='expression'></tagName>

مثال لتوضيح استخدام expr في كود منصة بلوجر

<b:includable id="nextPrevLink">
       <div style="display: inline">
           <strong>
            <a expr:href="data:olderPageUrl" expr:title="data:olderPageTitle">Older Posts</a>
        </strong>
           <strong>
            <a expr:href="data:newerPageUrl" expr:title="data:newerPageTitle">New Posts</a>
        </strong>
       </div>
   </b:includable>

استخدمنا expr في الكود السابق لإعطاء قيمة href وقيمة title التي استدعيناها من data. يمكننا استخدام نفس الطريقة لحساب الشرط في كود الشرط لإعطاء قيمة للخصائص (attributes) بشرط معين.

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

أكمل شرح تصميم قوالب بلوجر – الجزء الرابع من هنا.

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

شرح تصميم قالب بلوجر

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

هل هذا الشرح لك؟

لابد أن تعرف أساسيات لغة HTML ولغة CSS ولغة Javascript ولغة XML لكي تفهم شرح تصميم قوالب بلوجر بسهولة. أنت لا تحتاج أن تكون متمكن من هذه اللغات لكي تفهم كيف تعمل قوالب بلوجر. ولكنك تحتاج أن تكون متمكن منهم لكي تستطيع أن تصمم وتكتب كود ثيم مدونة بلوجر احترافية.

كيف يعمل بلوجر ؟

يرسل المتصفح طلب للمدونة (http request) فيقوم بلوجر بترجمة كود XHTML الخاص بـ ثيم بلوجر والتواصل مع قاعدة البيانات عند الحاجة، ثم يرسل للمتصفح كود HTML لعرضه للمستخدم الذي طلب الصفحة.

الهيكل الأساسي لثيم بلوجر (The Basic Layout)

<?xml version="1.0" encoding="UTF-8" ?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
  <title><data:blog.pageTitle/></title>
  </head>
  <body>
   <!-- BODY CONTENTS -->
  </body>
  </html>

ثيم بلوجر (Blogger Theme) يُسمي أيضاً قالب بلوجر (Blogger Template). ثيم بلوجر يتكون من XHTML وعناصر بلوجر (Blogger Elements).

في الكود بالأعلى هناك بعض التعريفات الخاصة بـ xmlns وهى اختصار لـ XML NameSpace. هذه التعريفات خاصة بمنصة بلوجر المقدمة من جوجل.

ما معنى كل تعريف من تعريفات xmlns ؟

• xmlns:b تتيح لنا استخدام عناصر بلوجر (Blogger Elements)
• xmlns:data تتيح لنا التواصل مع قاعدة البيانات الخاصة بمدونة بلوجر
• xmlns:expr يتم عن طريقها حساب الـ attributes (سأشرحها بشكل أكثر تفصيلاً)

لاحظ: يمكنك استبدال xmlns:b بـ xmlns:blog واستبدال xmlns:data بـ xmlns:d إن أردت. ولكن أنصحك باستخدام الإعدادات الافتراضية أفضل.

قبل أن نبدأ في كتابة كود ثيم بلوجر

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

الـ Section في بلوجر

تصميم ثيم بلوجر يتكون من سكشن (sections). كل جزء من أو قسم من صفحة الموقع عبارة عن سكشن. استخدام السكشن (section) في قوالب بلوجر يشبه استخدامه في لغة HTML5.

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

كتابة كود السكشن في بلوجر

هذا هو كود كتابة سكشن في بلوجر

<b:section id='' class='' maxwidgets='' showaddelement=''> 
  </b:section>

يمكن كتابة كود HTML حول السكشن ولكن داخل السكشن لا يمكن كتابة كود HTML نهائياً. لكي تحدد محتوى السكشن نستخدم عنصر ويدجت (widget) من عناصر بلوجر. سنتكلم عن ويدجت بعد قليل.

هذه الـ attributes الموجودة في عنصر سكشن من عناصر بلوجر يتم ترجمتها عن طريق بلوجر. وهذه الـ attributes تعنى:

• id (ضروري) : اسم مميز ولا يمكن تكرار استخدامه داخل نفس القالب. يمكنك استخدام حروف اللغة الإنجليزية وأرقام اللغة الإنجليزية فقط لكتابته.
• class (اختياري) : الأسماء الشائعة للكلاسات هي navbar و header و main و sidebar و footer. استخدام هذه التسميات يسهل على بلوجر تبديل القوالب. ولكن يمكنك استخدام أسماء كلاسات كما تحب.
• maxwidgets (اختياري) : يحدد الحد الأقصي لعدد الـ widgets التي يمكن اضافتها داخل هذا السكشن. إن لم تحدد رقم معين، عدد الـ widgets داخل السكشن لن يكون محدود.
• showaddelement (اختياري) : يحتوى على yes أو no والقيمة الإفتراضية هي yes. هذا الخيار يحدد إن كان سيظهر زر اضافة المزيد من الـ widgets داخل صفحة التصميم على بلوجر أم لا.

• growth (اختياري) : يمكن أن يكون horizontal أو vertical مع العلم أن القيمة الافتراضية هي vertical. هذا يحدد إن كنت الـ widgets داخل السكشن مرتبة جنب بعضها (side-by-side) أم مرتبة تحت بعضها (stacked).

السكشن في بلوجر يمكن أن يحتوي على widgets فقط. لا يمكنه أن يحتوى سكشن آخر أو كود HTML آخر.

مثال عملي على كود سكشن

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
  <!-- Section contents -->
  </b:section>
  <b:section id='main' class='main' maxwidgets="1" showaddelement="no">
  <!-- Section contents -->
  </b:section>
  <b:section id='footer' class='footer' showaddelement="no">
  <!-- Section contents -->
  </b:section>

لاحظ: لابد أن يحتوي ملف ثيم بلوجر على ٢ سكشن وإلا ستجد رسالة خطأ أثناء حفظ التغييرات في تحرير قالب بلوجر.

الـ Widget في بلوجر

تحتوى الـ sections على widgets فقط. الأقسام (السكشن) هي مجرد عناصر لتخطيط شكل المدونة. أما الويدجت يحتوى على المعلومات التي يتم عرضها.

أبسط شكل للويدجت هو عبارة عن سطر واحد يمثل مكان المعلومات التي ستظهر في مدونة بلوجر. هناك بعض الويدجتس الإفتراضية (default widgets) المتاحة في بلوجر. ويمكنك أيضاً إنشاء ويدجت مخصص (custom widget).

المعلومات الخاصة بالويدجت يتم تخزينها في قاعدة بيانات بلوجر. ويتم التعامل مع هذه المعلومات عند عرض الويدجت فقط.

كود كتابة الويدجت widget في منصة بلوجر

<b:widget id='' locked='' mobile='' title='' pageType='' type='' />

• id (ضروري) : يحتوي على حروف إنجليزية وأرقام إنجليزية فقط. لابد أن يكون مميز وغير مكرر داخل نفس الثيم. لا يمكن تغيير id الويدجت إلا إن حذفت الويدجت وأنشأت ويدجت جديد.
• type (ضروري) : يحدد نوع الـ widget وهو واحد من هذه الأنواع التالية:
• BlogArchive
• Blog
• Feed
• Header
• HTML
• SingleImage
• LinkList
• List
• Logo
• BlogProfile
• NavBar
• VideoBar
• NewsBar
• locked (اختياري) : يمكن أن تكون yes أو no والقيمة الإفتراضية هي no. الويدجت المغلق (locked widget) لا يمكن حذفه من تبويب تخطيط المدونة (Layout). كما ترى في الصورة التالية.

• title (اختياري) : عنوان الويدجت. إن لم تحدد عنوان للويدجت سيتم استخدام عنوان افتراضي مثل List1.
• pageType (اختياري) : يمكن أن يكون all أو archive أو main أو item مع العلم أن القيمة الإفتراضية هي all. يتم عرض الويدجت في الصفحات التي تحددها في ثيم مدونتك. كل الويدجتس تظهر في تخطيط القالب (Layout) بغض النظر عن الـ pageType المحدد لها.
• mobile (اختياري) : يحتوي على yes أو no أو only مع العلم أن القيمة الإفتراضية هي default. هذه القيمة تحدد إن كان هذا الويدجت سيتم عرضة على شاشة الموبايل أم لا. بشكل إفتراضي سيتم عرض Header و Blog و Profile و PageList و AdSense فقط إن كنت اخترت default كقيمة للـ mobile.

مثال على كتابة كود الويدجت (widget) في بلوجر

<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
  <b:widget id='CustomSearch1' title='Search' type='CustomSearch' locked='false'/>
  <b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' />
  <b:widget id='PopularPosts1' locked='false' title='Popular On Relatemein' type='PopularPosts'/>
  <b:widget id='Label1' type='Label' locked='false' />
  </b:section>

طريقة كتابة الكود (syntax) والشرح (documentation) تم أخذه من توثيق بلوجر الرسمي (Official Blogger Documentation).

أكمل شرح تصميم قالب بلوجر – الجزء الثاني من هنا.

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

تحريك العناصر في css

تحريك وانتقال العناصر في CSS3 هو من أهم الأمور التي يجب أن تتقنها لكي تصمم صفحة هبوط ممتازة. لغة CSS3 هي إصدار أحدث من لغة CSS المتخصصة في تنسيق صفحات الويب. إصدار CSS3 يضيف بعض الأشياء المهم لتنسيق صفحات الإنترنت؛ مثل التحريك (animation)، والانتقالات (transition).

صفحة الهبوط (Landing Page) هي عبارة عن صفحة ويب تقدم لك خدمة أو منتج بداية من مميزات المنتج مروراً بطريقة استخدامه حتى تصل إلى طريقة شراؤه. صفحات الهبوط ضرورية للمنتجات والخدمات لأنها تساهم بشكل كبير جداً في دفع الزائر إلى شراء المنتج بسبب الإبهار والجمال الذي تمتلئ به صفحات الهبوط من ألوان وتحريك وإنتقالات وتصميمات وصور متحركة وفيديوهات.

هناك نوعين من الحركة؛ ١. التحريك. ٢. حركة الانتقال من حالة إلى أخرى.

أولاً: التحريك (Animation)

التحريك هو إعطاء خطوات حركة لعناصر HTML. نحدد العنصر من خلال الـ CSS Selector ثم نكتب كود التحريك. مثال على التحريك في CSS :

كود HTML

<div class="box"></a>

كود CSS

.box {
display:block;
margin:auto;
animation-name:movetoround;
animation-duration: 1s;
animation-iteration-count:1;
animation-fill-mode:forwards;
animation-delay:1s;
animation-direction:alternate;
animation-timing-function:ease-in-out;
}
@keyframes movetoround {
0% {0 0 0 0}
25% {50% 0 0 0}
50% {50% 50% 0 0}
75% {50% 50% 50% 0}
100% {50% 50% 50% 50%}
}

لنبدأ في معرفة معنى الكود السابق.

animation-name نكتب بها اسم الحركة حسب الإسم الذي اخترناه عندما كتبنا الـ keyframes كما ترى في الكود.

animation-duration هي مدة تنفيذ التحريك. لابد أن تختار هذه المدة لكي تعمل الحركة. هذه الفترة الزمنية تقاس بالثانية مثل 2s معناها ثانيتين.

animation-iteration-count هي عدد مرات تكرار الحركة. تريد الحركة أن تحدث مرة واحدة اختر ١، أما إن أردت الحركة أن تتكرر ثلاث مرات اكتب ٣، أما إن أردت أن تتكرر الحركة دائماً بدون توقف اختر infinite .

بعد إنتهاء التحريك يرجع العنصر إلى الشكل العادي، ولكن إن أردت أن يثبت العنصر على آخر مرحلة من مراحل التحريك، استخدم خاصية animation-fill-mode بقيمة forwards كما ترى في الكود.

إن أردت أن تبدأ الحركة بعد ثانية من تحميل العنصر على الشاشة، استخدم خاصية animation-delay وحدد وقت تأخير التحريك إلى 1s أو كما تريد.

إن أردت أن تتم الحركة في اتجاه ثم تتكرر في المرة الأخرى في الاتجاه المعاكس، استخدم خاصية animation-direction بقيمة alternate كما ترى في الكود. يمكنك أيضاً أن تختار اتجاه الحركة إلى عكس الإتجاه المكتوب في الـ keyframes أو في الإتجاه العادي للحركة.

أما animation-timing-function تحدد وقت حدوث كل جزء من التحريك. مثلاً: إن أردت أن تبدأ الحركة ببطء ثم تسرع ثم تنتهي ببطء استخدم قيمة ease-in-out كما ترى في الكود. هذه هي طريقة التحريك القريب من الواقع لأنها تتبع قوانين الفيزياء مثل حركة السيارة على الطريق؛ تبدأ ببطء من السكون ثم تسريع كما تشاء ثم ترجع لتبطئ مرة أخرى حتى تتوقف.

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

كتابة مراحل التحريك

نستخدم keyframes لكتابة خطوات أو مراحل الحركة. نبدأ بـ 0% وننتهي بـ 100% . يمكن أن نستخدم قيم وسطية مثل 50% أو لا على حسب التحريك الذي نريده.

لا تنسى أن تكرر الـ @keyframes للمتصفحات المختلفة لكي تعمل مع كل المتصفحات. استخدم @-moz-keyframes و @-webkit-keyframes و @-o-keyframes لتدعم متصفح سفارى، ومتصفح موزيللا فايرفوكس، ومتصفح أوبرا، ومتصفح جوجل كروم (طبعاً).

ثانياً: الانتقال

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

كود HTML

<div class="trans"></div>

كود CSS

.trans {
background: black;
width:200px;
height:200px;
transition-property: all;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function:ease-in-out;
}
.trans:hover {
border-radius: 50%;
}

دعونا نبدأ في فهم الكود السابق.

نستخدم transition-property لتحديد الخاصية التي نريد عمل حركة انتقال لها. إن أردنا عمل حركة انتقال لتغير اللون نستخدم color، وإن أردنا عمل حركة انتقال عند تغير لون الخلفية نستخدم background أما إن أردنا أن نعمل حركة انتقال لكل الخصائص المتغيرة نكتب all كما ترى في الكود. يُمكننا أيضاً أن نضع أكثر من خاصية ونفصل بينهم بفاصلة انجليزية (color, background, border-radius مثلاً).

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

اسم الخاصية (property name)	النوع المدعوم (type)
background-color	color
background-image	only gradients
background-position	percentage, length
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
text-shadow	shadow
top	length, percentage
vertical-align	keywords, length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer
zoom	number

transition-duration لتحديد الفترة الزمنية لتنفيذ حركة الانتقال من حالة لحالة أخرى.

transition-delay لتحديد مدة التأخر في بدء حركة الإنتقال. أى فترة الانتظار قبل بدء الانتقال.

transition-timing-function وهي نفس معنى animation-timing-function ومعناها سرعة إتمام التحريك. تبدأ الحركة ببطء ثم تسرع (ease-in) أم تبدأ بسرعة ثم تبطئ (ease-out) أم تبدأ وتنتهي بنفس السرعة (linear).

لاحظ أن الانتقال يحتاج إلى شئ يغير حالة العنصر. يُمكن استخدام التغير مع الـ :hover أو :active وغيرها من الأحداث التي يمكن أن تغير حالة عناصر HTML في صفحة الويب.

تكلمنا عن التحريك في لغة CSS لتنسيق صفحات الويب. قريباً سأقوم بعمل أمثلة كاملة على التحريك والانتقال وأنشرها هنا على موقع أبانوب حنا للبرمجيات.

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