yt-dlp أداة مجانية وآمنة لتنزيل الفيديوهات والصوتيات

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

المدون

عصام محيمي

تاريخ النشر

06 يناير 2025

التصنيف

مواقع وأدوات

1ما هي أداة yt-dlp ؟

yt-dlp هي نسخة محسنة ومطورة من الأداة الشهيرة youtube-dl. تم تصميمها لتوفير أداء أفضل ومزايا إضافية تناسب احتياجات المستخدمين. تدعم الأداة العديد من المواقع الشهيرة مثل:

• يوتيوب (YouTube)
• تيك توك (TikTok)
• فيميو (Vimeo)
• وأكثر من 1000 موقع آخر...

2أهم مميزات yt-dlp

تنزيل الفيديوهات بسهولة :

يمكنك تحميل الفيديوهات بجودات مختلفة، بدءًا من الجودة المنخفضة وحتى 4K.

تحميل قوائم التشغيل بالكامل :

إذا كنت تريد تنزيل قائمة تشغيل كاملة من يوتيوب، يمكنك ذلك باستخدام أمر بسيط فقط.

استخراج الصوت بصيغة MP3 :

تتيح لك yt-dlp تحويل الفيديوهات إلى ملفات صوتية مباشرة بدون الحاجة إلى برامج إضافية.

التحكم الكامل في الإعدادات :

يمكنك تخصيص كل شيء، مثل تحديد جودة الفيديو، صيغة الملف، وحتى إضافة ترجمات.

3كيفية تثبيت واستخدام yt-dlp ؟

تتثبيت الأداة :

يمكنك تنزيل yt-dlp من صفحتها الرسمية على GitHub عبر الرابط :

رابط التحميل

https://github.com/yt-dlp/yt-dlp

- قم بتحميل الملف المناسب لنظام التشغيل الخاص بك (ويندوز، لينكس، أو ماك).

- بعد تحميل الملف yt-dlp.exe، قم بوضعه في مجلد جديد (مثلًا: "my videos") داخل القرص الصلب الذي يحتوي على مساحة فارغة.

استخدام الأداة :

- بعد التثبيت، افتح موجه الأوامر (Command Prompt) أو الترمينال (Terminal).

- لتنزيل فيديو، استخدم الأمر التالي:

yt-dlp [رابط الفيديو]

- لتحميل الصوت فقط بصيغة MP3:

yt-dlp -x --audio-format mp3 [رابط الفيديو]

4مزيد من الأوامر المتجددة

- لتحميل الصوت فقط بصيغة MP3:

yt-dlp -x --audio-format mp3 [رابط الفيديو]

- لتنزيل قائمة تشغيل:

yt-dlp [رابط قائمة التشغيل]

- لتحميل فيديو بجودة عالية :

yt-dlp -f bestvideo+bestaudio [رابط الفيديو]

أتمنى أن يكون هذا الشرح الشامل والمختصر قد أجاب على جميع أسئلتك حول yt-dlp.
هل لديك أي استفسار آخر؟ لا تتردد في طرحه في التعليقات، فسأكون سعيدًا بمساعدتك!

تابع القراءة

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

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

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

المدون

عصام محيمي

تاريخ النشر

4 يناير 2025

التصنيف

مواقع وأدوات

1ما هو (SEO)؟

السيو SEO (Search Engine Optimization) هو مجموعة من التقنيات التي تهدف إلى تحسين ترتيب موقعك في نتائج محركات البحث مثل جوجل.
يتضمن ذلك العمل على الكلمات الرئيسية، تحسين المحتوى (Content optimization)، الروابط الخارجية (Backlinks)، وأيضًا تحسين سرعة الموقع. الهدف هو زيادة عدد الزيارات الطبيعية (Organic traffic) إلى موقعك دون الحاجة للإعلانات المدفوعة.

إذا كنت تسمع عن السيو (SEO) للمرة الأولى، فأعوك لقراءة المقال السابق الذي يشرح لك أساسيات هذه التقنية وأهميتها في تحسين ترتيب موقعك في محركات البحث:

دروس السيو - مقدمة و نصائح عامة

https://www.th3problogger.com/2020/05/seo-tips-p1.html

2 الأداة المجانية من جوجل Google Search Console

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

المميزات :

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

رابط الأداة

https://search.google.com/search-console

3 أداة التحليل الشاملة Ahrefs

Ahrefs هي واحدة من أقوى الأدوات المتاحة لتحليل السيو. تُستخدم بشكل واسع من قِبل خبراء السيو لتحليل المواقع المنافسة، البحث عن الكلمات الرئيسية، ومراقبة الروابط الخارجية (Backlinks).
من خلال واجهتها البسيطة والمميزة، يمكنك تحسين أداء موقعك والوصول إلى بيانات دقيقة حول ترتيب صفحاتك على نتائج محركات البحث.

المميزات :

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

رابط الأداة

https://ahrefs.com/

4أداة SEMrush لتحسين المحتوى

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

المميزات :

• تحليل الكلمات المفتاحية: تقديم مقترحات كلمات مفتاحية رئيسية تستند إلى أدائك وأداء المنافسين.
• متابعة الترافيك: تحليل مصادر الزوار ومستوى التفاعل مع موقعك.
• تحليل الإعلانات المدفوعة: تحسين استراتيجيات Google Ads وFacebook Ads.
• أداة التدقيق (Site Audit): الكشف عن المشاكل التقنية في الموقع وتصحيحها.
• أداة كتابة المحتوى: تقديم اقتراحات لتحسين جودة المقالات.

رابط الأداة

https://www.semrush.com/

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

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

تابع القراءة

لغات البرمجة الأكثر طلبا في سوق الشغل - الجزء الأول

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

المدون

عصام محيمي

تاريخ النشر

2 يناير 2025

التصنيف

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

1لغة بايثون (Python)

عندما قام المبرمج الألماني Guido van Rossum بتطوير لغة Python في التسعينات كمشروع له، لم يظن أحد أنها ستكون لغة البرمجة الأكثر شعبية في يوم من الأيام.
Python لغة برمجية كائنية التوجة (Object oriented) وعالية المستوى تستخدم للأغراض العامة، فهي ذات مصدر مفتوح (Open source) وقابلة للتطوير. اليوم أصبحت رائدة على الصعيد العالمي في العديد من المجالات.

مجالات الإستخدام :

• برمجة تطبيقات الويب (Web development)
• برمجة الألعاب (Game development)
• التعلم الآلي والذكاء الاصطناعي (Machine learning & Artificial intelligence)
• تصميم واجهة المستخدم (GUI)
• علوم البيانات (Data science) والعديد من المجالات الأخرى...

المميزات :

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

كود Hello World بلغة بايثون :

print("Hello, World!")
        

معدل الراتب الشهري :

• الولايات المتحدة : 119,588 دولار سنويا (حسب موقع indeed)
• فرنسا : 40,641 يورو شهريا (حسب موقع Glassdoor)
• المغرب : 9000 درهم شهريا (حسب موقع indeed)

موقع بايثون الرسمي

Python.org

2لغة جافا سكريبت (JavaScript)

جافاسكريبت لغة برمجة عالية المستوى تستخدم أساساً في متصفحات الويب لإنشاء صفحات ويب أكثر تفاعلية (Interactive Web Pages)، فهي تهدف إلى بث الحياة في صفحات الويب المكتوبة بلغة الـ HTML حيث تعطيك إمكانية التحكم الكامل بكل جزء في صفحة الويب.

ظهرت لغة JavaScript رسمياً في سنة 1995 ويتم تطويرها من طرف شركة نتسكيب (Netscape) وشركة موزيلا (Mozilla).

في السنوات القليلة الماضية كانت لغة جافاسكريبت محدودة في متصفحات الويب وتعمل فقط في جهة العميل (Client side)، لكن في الفترة الأخيرة توسّع مجال استخدام JavaScript لتضم إنشاء تطبيقات ويب من جهة الخادم (Server side) والتعامل مع قواعد البيانات. إضافة إلى ذلك، يمكن استخدامها لإنشاء تطبيقات سطح المكتب أو تطبيقات الهواتف، وحتى في مجال تطوير الألعاب المستندة إلى المتصفح!

مجالات الإستخدام :

• برمجة المواقع (Web development)
• تطبيقات الويب (Web Applications)
• العروض التقديمية (Presentations)
• خوادم الويب (Web Servers)
• برمجة الألعاب (Game development)
• تطبيقات الهواتف (Mobile Applications)

المميزات :

الجافا سكربت لغة ممتعة وتفاعلية ومنتشرة بشكل واسع وسهلة التعلم للمبتدئين، فهي تحتوي على الآلاف من المكتبات الجاهزة ويمكنك من خلالها تطوير المواقع سواء واجهات أمامية (Front-end) أو خلفية (Back-end).

كود Hello World بلغة جافاسكريبت :

console.log("Hello, World!");
        

معدل الراتب الشهري :

• الولايات المتحدة : 119,588 دولار سنويا (حسب موقع indeed)
• فرنسا : 40,641 يورو شهريا (حسب موقع Glassdoor)
• المغرب : 9000 درهم شهريا (حسب موقع indeed)

موقع جافا سكريبت الرسمي

https://developer.mozilla.org/en-US/docs/Web/JavaScript

3لغة جافا (Java)

لغة جافا هي إحدى أشهر لغات البرمجة وأكثرها طلباً في سوق العمل، فهي تستخدم بشكل أساسي في تطوير تطبيقات الويب الموجهة للأعمال والتطبيقات التي تتطلب الأداء العالي. ومع العديد من المكتبات والـ APIs، تمكن جافا المبرمجين من كتابة برامج فعّالة وقابلة للتطوير، وهي تتسم بالقوة والأمان.

مجالات الإستخدام :

• تطوير تطبيقات الويب (Web Applications)
• تطوير تطبيقات الهواتف المحمولة (Mobile Applications)
• أنظمة سطح المكتب (Desktop Applications)
• تطوير الألعاب (Game development)

المميزات :

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

كود Hello World بلغة جافا :

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
        

معدل الراتب الشهري :

• الولايات المتحدة : 120,000 دولار سنويا (حسب موقع indeed)
• فرنسا : 38,000 يورو شهريا (حسب موقع Glassdoor)
• المغرب : 9500 درهم شهريا (حسب موقع indeed)

موقع جافا الرسمي

https://www.oracle.com/java/

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

إذن، حدد اللغة التي تتناسب مع اهتماماتك وأهدافك المهنية وابدأ رحلة تعلم البرمجة. لا تنسَ أن الاستمرار والممارسة هما مفتاح التفوق في هذا المجال!

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

تابع القراءة

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

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

المدون

عصام محيمي

تاريخ النشر

15 غشت 2014

التصنيف

دروس بلوجر

يمكنك معاينة صفحة الخطأ وذلك بزيارة رابط غير شغال في مدونتك (مثلا : رابط لتدوينة تم حذفها) أو بإضافة ما تشاء بعد رابط مدونتك، مثال : www.yourblog.com/anything

1لماذا وجب عليك الإهتمام بصفحة الخطأ ؟

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

2تغيير محتوى رسالة الخطأ

إذا كنت ترغب فقط في تغيير محتوى رسالة الخطأ والحفاظ على تصميمها الإفتراضي، إتبع الخطوات التالية :
- من لوحة التحكم إظغط على Setting ثم بعدها إختر Search preferences
- الآن إضغط على Edit في Custom Page Not Found
- سيظهر لك مربع فارغ أكتب فيه رسالة الخطأ كما تشاء ثم إضغط على الزر Save changes لحفظ التغييرات.
أما إذا كنت تريد تصميم صفحة الخطأ وتعزيزها بروابط كما سبق وأن ذكرت، فيمكنك تجاهل الخطوة السابقة والمرور إلى الفقرة التالية.

3تصميم صفحة الخطأ لمدونتك

- انسخ كود التالي وضعه في المربع الخاص برسالة الخطأ :

<div id="pb-404">
    <div id="error-image"></div>
    <div id="error-msg">
        <h3>Page not found</h3>
        <b>الصفحة التي تبحث عنها في هذه المدونة ليست متوفرة</b>
    </div>
    <div id="error-nav">
        <ul>
            <li><a onclick="history.go(-1);return true;" style="cursor: pointer;">الرجوع إلى الخلف</a></li>
            <li><a href="/p/contact-us.html">راسلنا</a></li>
            <li><a href="/">الرئيسية</a></li>
        </ul>
   </div>
</div>

- قم باستبدال الرابط التالي : /p/contact-us برابط صفحة الإتصال الخاصة بمدونتك
- إضغط على الزر Save changes لحفظ التغييرات
- الآن ستقوم بإضافة CSS في قالب مدونتك لتنسيق كود HTML السابق. إتجه إلى لوحة التحكم ثم إختر Template وبعدها Edit HTML
- ابحث عن ]]&gt&lt/b:skin&gt وضع قبلها مباشرة الكود التالي :

 #pb-404
    {
        width: 99%;
        height: 450px;
        border: 1px solid #ddd;
        background: #1FB5AD;
    }
    
    #error-image
    {
        width: 100%;
        height: 200px;
        background-color: #fff;
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjo8FIMkuatWiwpKVarXvwFEEgNY5ekbGhFZJYBP1N2nC08ug1A8388EZtHDFVz0sZeQEMa3Q3unUktx24abmxFWxr-ZlTXIFYM0QaOmueMI9Qj_VpC8Lka-UB8npJoRNe2mK3Une8kjBl/s1600/404.png);
        background-position: center bottom;
        background-repeat: no-repeat;
    }
    
    #error-msg
    {
        width: 99%;
        height: 120px;
        background-color: #1FB5AD;
        text-align: center;
    }
    
    #error-msg h3
    {
        margin: 0;
        padding: 0;
        text-align: center;
        font-weight: normal;
        line-height: 80px;
        color: #fff;
        font-size: 40px;
        font-family: sans-serif;
        text-transform: uppercase;
    }
    
    #error-msg b
    {
        font-weight: normal;
        color: #fff;
        font-family: tahoma;
        text-transform: uppercase;
    }
    
    #error-nav
    {
        background: #35BCB5;
        width: 100%;
        height: 90px;
        padding-top: 40px;  
    }
    
    #error-nav ul
    {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 309px;
        margin: auto;   
    }
    
    #error-nav ul li
    {
        float: left;
        margin-right: 20px;
        border: 1px solid #1FB5AD;
        padding: 5px 10px;
        border-radius: 5px;
        transition: all 0.3s ease-in-out 0s;
        background:#fff;
    }
    
    #error-nav ul li:last-child
    {
        margin-right:0px;
    }
    
    #error-nav ul li:hover
    {
        opacity:0.9;
        transition: all 0.3s ease-in-out 0s;
    }
    
    #error-nav ul li a
    {
        text-decoration: none;
        color: #1FB5AD;
        font-family: tahoma;
    }

- قم بحفط التغييرات وذلك بالضغط على الزر Save template

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

تابع القراءة

دروس السيو - مقدمة و نصائح عامة

السيو SEO (Search Engine Optimization) هو التقنية التي ستمكنك من إحتلال المراكز الأولى في نتائج محركات البحث، وهو من أبرز العوامل في نجاح أي موقع أو مدونة في العالم.
في هذه التدوينة سأقربكم أكثر من مفهوم السيو أو ما يعرف بتهيئة المواقع لمحركات البحث، كما سأكشف لكم عن أبرز الخطوات التي يجب اتباعها من أجل تعزيز مكانة موقعك أو مدونتك في نتائج محرك البحث Google، وذلك اعتمادا على تجربي لمدة 8 سنوات في هذا المجال.

المدون

عصام محيمي

تاريخ النشر

7 ماي 2020

التصنيف

دروس السيو

1مقدمة عن السيو

يوجد تعريف شائع بين العرب عن السيو بأنه عملية إشهار الموقع أو المدونة. هذا التعريف خاطئ لأن لفظ "إشهار" يطلق على منتج أو خدمة أو على الموقع عندما يتم إشهاره بطرق مثل الإعلانات المدفوعة كـ (Facebook Ads, Google Adwords) ...
إن صح القول فالسبو يعني صداقة الموقع لمحركات البحث، بحيث يكسب موقعك ثقة محركات البحث على أنه يقدم محتوى حصري غير منقول ومفيد للزوار، وبالتالي يتم إدراجه ضمن الصفحات الأولى من نتائج البحث وتحصل أنت -مجانا- على زوار مستهدفين لا يقدرون بثمن.
يندرج هذا النوع من الزوار القادمين من محركات البحث ضمن الـ Organic traffic.

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

آخر تحديثات خوارزميات محرك البحث Google

Google Algorithm Update History

2نصائح عامة لتصدر نتائج محركات البحث :

بناءا على تجربتي الشخصية في مجال التدوين أقترح عليكم بعض النصائح الهامة والمتجددة حصريا على مدونة محترف بلوجر :

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

تعريف الوسم Meta

يستخدم الوسم <Meta> لإخبار محركات البحث عن مضمون الموقع (كالوصف والكلمات المفتاحية) ويتم كتابته داخل الوسم <head>.
يعتبر الوصف Meta description مهم جدا لأن محركات البحث تقوم بعرضه في نتائج البحث وبالتالي فهو العامل الأساس الذي يحدد ما إذا كان الباحث سيزور موقعك أم لا.

• اهتم بالعنوان (Title)، الرابط (Permalien) والوصف الخاص بمحركات البحث (Meta description) بالنسبة لكل صفحة.
• تأكد من احتواء عناوين صفحات موقعك على كلمات دلالية ذات طلب كبير في محركات البحث.
• احرص على أن يكون محتوى صفحات موقعك يتضمن فقط كل ما هو مفيد للزوار مع إرفاقه ببعض الصور، وحاول تعزيز كل صورة بعنوان ووصف دقيق يحتوي على كلمات مفتاحية.
• محتوى صفحات الموقع يجب أن يتضمن مجموعة من الكلمات المفتاحية تعكس مجال تخصص موقعك، الشيء الذي يجعل محركات البحث تتعرف على مضمون كل صفحة من موقعك.
• قم بإضافة موقك إلى محركات البحث (أو ما يعرف بفهرسة الموقع) وهي خطوة جد مهمة.
• اهتم بنشر موقعك جيدا، فالروابط الخارجية (Backlinks) التي تؤدي إلى صفحات موقعك تساهم بشكل كبير في كسب ثقة محركات البحث بموقعك خاصة إذا كانت تلك الروابط متعلقة بمواقع محترمة ذات تصنيف مرتفع.
• حاول ربط علاقة مع أصحاب مواقع لهم نفس الاهتمامات واقترح عليهم تبادل الروابط.
• ابحث عن أقوى أدلة المواقع وسجل موقعك ضمنها دون أن تنسى تعزيزه وصف دقيق.
• اشترك في المنتديات الأكثر شهرة في العالم العربي والتي يتدفق عليها الكثير من الزوار وقم بنسخ ولصق جزء من مقالات موقعك وضع رابط لموقعك تحت المقال. كما أن التوقيع يلعب دورا في جلب الزوار.
• سرعة تحميل الموقع والتصميم الأنيق وكذلك سهولة التصفح .. هي عوامل تجعل الزائر يقضي وقت طويل في تصفح الموقع وبالتالي تزداد مصداقيتك عند محركات البحث.
3خطوات السيو

تحسين الموقع (Optimisation)
الفهرسة (Indexation)
الأرشفة (Référencement naturel)
الترتيب (Positionnement)
المراقبة والتطور (Suivi & évolution)

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

تابع القراءة

تقنيات CSS - الجزء الثاني

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

المدون

عصام محيمي

تاريخ النشر

2 يناير 2016

التصنيف

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

4إخفاء العناصر من صفحة الويب

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

خاصية display :
لنعتبر الرابط التالي ذو كلاس problogger :

<a class="problogger" href="http://www.th3problogger.com">محترف بلوجر
</a>

إذن لإخفاء هذا الرابط سأستعمل الخاصية الأكثر شيوعا display:none كما يلي :

 .problogger
 {
     display: none; 
 }

وتعني عدم إظهار العنصر -أو الوسم- ذو الكلاس problogger

خاصية opacity :
تتحكم خاصية opacity في شفافية العنصر كما هو الحال في برنامج الفوتوشوب وغيره من برامج تحرير الصور. ففي لغة CSS تأخذ قيمة بين 0 و 1 وبالتالي فالقيمة 0 تعني إخفاء العنصر.
- تطبيق :
سأقوم باستدعاء صورة ثلاث مرات وفي كل حالة سأعطيها قيمة مختلفة في خاصية opacity :

 <img src="blogger.png" style="opacity: 1" />
 <img src="blogger.png" style="opacity: 0.5" />
 <img src="blogger.png" style="opacity: 0" />

- النتيجة :

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

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

<a class="problogger" href="http://www.th3problogger.com">محترف بلوجر
</a>

باستخدام لغة CSS سأقوم هذه المرة بتغيير موضع الرابط إلى 9999px على اليسار بالنسبة للصفحة (أو بالنسبة لعنصر أم ذو خاصية position:relative) وبالتالي سيصبح خارج حدود الشاشة.

 .problogger
 {
     position: absolute;
     left: 9999px;
 }

5تكبير الصور بعد تمرير الماوس (الزوم)

تقنية الزوم ليست جاهزة في لغة CSS لكن يمكن إنشائها باستخدام خاصيتين أساسيتين وهما ()transform:scale المسؤولة عن تكبير العنصر (صورة مثلا) و overflow:hidden التي تلعب دور الماسك يعني إخفاء جزء الصورة الخارج عن مساحتها بعد تكبيرها. الطريقة سهلة جدا ولا تحتاج أكواد كثيرة فقط ركز معي في التطبيق.
- تطبيق :
سأقوم أولا بإنشاء مساحة ذات كلاس zoom باستخدام الوسم <div> كما يلي :

<div class="zoom">

</div>

وسأطبق عليها الخصائص التالية (طول = 200px، عرض = 150px، إطار أسود بسمك 1px وخاصية الماسك)

 .zoom
 {
     width: 200px;
     height: 150px;
     border: 1px solid #000;
     overflow: hidden;
 }

بعد ذلك سأضيف صورة بداخل الوسم <div> ليصبح كود HTML كالتالي :

 <div class="zoom">
   <img src="css3.png"/>
 </div>

ثم سأطبق عليها نفس طول وعرض المساحة الأم إضافة إلى الخصائص التي ستحدث عند تمرير الماوس (hover) :

 .zoom img
 {
     width: 200px;
     height: 150px;
     transition: all 0.5s ease-in-out 0s;
 }

 .zoom img:hover
 {
     transform: scale(2);
     transition: all 0.5s ease-in-out 0s;
 }

- السطر (8) يعني تطبيق الخصائص على الصور الموجودة داخل الوسم ذو الكلاس zoom عند تمرير الماوس عليها.
- الأسطر (10) و (11) تعني تكبير الصورة مرتين في ظرف خمس أجزاء من الثانية.
- النتيجة :

6توسيط الكتابة عموديا باستخدام line-height

تستعمل خاصية line-height للتحكم في المسافة بين سطور النص، ويمكن استخدامها لتوسيط الكتابة عموديا في مساحة بأبعاد معينة (يشترط أن يكون عنوان أو سطر واحد).
- تطبيق :
مثلا أريد كتابة عنوان (ليكن محترف بلوجر) وسط مساحة ذات كلاس problogger بطول 300px وعرض 80px، إذن فكود HTML سيكون على الشكل التالي :

 <div class="problogger">محترف بلوجر</div>

الخاصية المسؤولة عن توسيط الكتابة أفقيا هي text-align:center. ولتوسيط الكتابة عموديا سأستعمل خاصية line-height وأعطيها نفس قيمة العرض (80px) كما يلي :

 .problogger
 {
     width: 300px;
     height: 80px;
     text-align:center;
     line-height: 80px;
     background: #3A4755;
     color: #fff;
     font-size: 23px;
     border-radius: 5px;
     
 }

- الأسطر (7)، (8) و (9) تعني خلفية بلون رمادي مغموق وخط أبيض بحجم 23px.

ماذا عن خاصية vertical-align:middle ؟

خاصية vertical-align:middle تعمل فعلا على توسيط الكتابة عموديا لكنها شغالة فقط على الجداول والتي أصبحت أقل أهمية في الوقت الحالي خاصة مع ظهور إطار العمل Bootstrap.

- النتيجة :

محترف بلوجر

تابع القراءة