7/03/2018

settings_overscan print announcement
أهلا أصدقائي...كما وعدناكم سنريكم اليوم المعنى الحقيقي لقالب جاهز للتصميم بمميزات ومعامل إحترافية ولن أماري أو أبالغ إن قلت أن معظم القوالب من هذا النوع هي مجرد قوالب تنظيف لا أكثر فتصميم القوالب صدقني سأكذب عليك إن قلت لك هو أمر سهل فهناك فرق بين (قالب واجهة) مبهر وبين (قالب ويب) تم بنائه بأسس متينة  فأغلب القوالب التي تنشر خصوصا في المحتوى العربي هي بنسبة 70%  قوالب واجهة معدلة وفقيرة جدا من حيث التنسيق والتكويد والكارثة الكبرى التكرار والسرقة وخباثة السكريبتات .
لذلك المطلوب مني ومنك أن نفهم بنية تصميم القوالب وطبعا هذا يحتاج إلى صبر وتأني وتدوين كل ما تكتسبه من خبرة والأهم إحترام المجال والعاملين عليه.






حول النسخة

بدايتا دعني أحيطك علما أن هذه النسخة blank template v 1.1 تعتبر أولى الإصدارات بها نسختين المدفوعة بمزايا وإضافات وملحقات إحترافية في ما النسخة المجانية كاملة لكن بدون ملحقات لكن إطمئن لأننا سنشهد في المستقبل مزايا وعناصر جديدة مجانية وهذا لا يعني أننا أهملنا هذه النسخة المجانية  بل على العكس عند الإنتقال إلى الصفحة الرسمية للتحميل ستلاحظ واجهة تحتوى على شرح كامل للمزايا وطريقة التعامل مع كل عنصر برمجي ومنها نعرض لك

  1. مميزات v 1.1 blank template
  2. أكواد Meta Tags أخر إصدار
  3. أهم مكتبات و إطارات الـ Javascript و الـ CSS
  4. حزمة DNS Prefetch أو روابط الجلب المسبق
  5. دعم Variable definitions مع شرح مفاتيح المتغيرات
  6. إعادة تعيين css reset إصدار حصري مع شرح نماذج من الوسوم التي يحتويها
  7. شكل حصري لصفحة التخطيط / ودعم كامل للأعمدة والعروض
  8. ملحق / ورقة الأنماط الشرطية للمستعرض Internet Explorer.
  9. ملحق / خاصية direction أو الإتجاه
  10. ملحق / عناصر schema سكيما (البيانات المنظمة)




لاتنسوا دعمنا فقط بالدعاء الطيب

add_commentإرسال تعليق

  1. أخي ضبط العروض والتخطيط يقول لي غير قابل للتطبيق في هذا المظهر ممكن القالب كامل في ملف text وشكراً.

    ردحذف
    الردود
    1. لا مشكلة لقد حللتها المشكلة كانت من عندي انا اهم شئ السؤال الأول

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

    ردحذف
  3. الموقع الرسمي لمكتبة ال bootstrap هو https://getbootstrap.com/
    الموقع الرسمي لمكتبة ال modernizr هو https://modernizr.com/

    ردحذف
  4. رسالة إلى مشرفي مدونة:blogg-code/شراء النسخة الكاملة من القالب الجاهز للتصميم:[v 1.1 blank template]

    ردحذف
  5. لا اريد تقليل من قيمة هذا القالب ولكن اعتقد ان قوالب بلوقر الافتراضية افضل مثلا Contempo بخاصية "ماتريال دزاين" قابل لتعديل ومجاني

    ردحذف
    الردود
    1. مرحبا اخي الكريم .و شكرا على نقدك البناء .. أولادعنا نتفاهم أن قالب blank-template ملف xml معروف كنموذج فارغ عند المصممين أي فارغ من حيث الستايل سواء flat /ui /matrial لأنه يتم التركيز على البنية الأساسية للقالب ونترك الستايل للمصمم هو ومايريد البناء عليه وهنا يأتي دور الإبداع فلا تقل لي أرجوك أن القوالب الإفتراضية أفضل فهي لاتحتوي على بعض العناصر التي شرحناها في صفحة التحميل مثل البيانات المنظمة بدون أخطاء وكاملة وكذلك خاصية الإتجاه ..الخ / ثم إن القوالب الإفتراضية من قال لك انها مجانية فهي كذلك محمية بصلتها مع المنصة.

      حذف
  6. أخي السلام عليكم أرجو المساعدة لا أستطيع استخدام اكواد ال @media screen في التجاوب ممكن مساعده .

    ردحذف
    الردود
    1. وعليكم السلام .. ضبط القالب على عرض الاجهزة الذكية وغير ذلك سهل فقط احرص اولا على التالي..
      1-يجب ان يكود الكود التالي موجود في رأس القالب أسفل head
      <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
      2-ضع الحزمة التالية مع اكواد css الخاصة بك اي فوق الوسم ]]>
      /* Page Responsive */

      @media screen and (max-width:1600px){}/*kindle fire HDX*/
      @media screen and (max-width:1440px){}/*laptop with HiDPI screen*/
      @media screen and (max-width:1280px){}/*laptop with MDPI screen + laptop with TOUCH*/
      @media screen and (max-width:1024px){}/*ipad pro*/
      @media screen and (max-width:800px) {}/*nexus10 */
      @media screen and (max-width:775px) {}/*------*/
      @media screen and (max-width:768px) {}/*ipad + ipad mini------*/
      @media screen and (max-width:640px) {}/*Microsoft lumia550*/
      @media screen and (max-width:600px) {}/*blackberry playbook + nexus7*/
      @media screen and (max-width:480px) {}/*st*/
      @media screen and (max-width:414px) {}/*iphon 6plus*/
      @media screen and (max-width:412px) {}/*nexus6+ nexus6p + nexus5x*/
      @media screen and (max-width:384px) {}/*nexus 4 + LG optimus L70*/
      @media screen and (max-width:375px) {}/*iphon 6*/
      @media screen and (max-width:360px) {}/*galaxy s5/s3/note2/note3 + nok n9 + nexus5 + Microsoft lumia950 + blackberry z30*/
      @media screen and (max-width:320px) {}/* iphon 4/5 + nok lumia 520 */


      3-الان عليك وضع الاكواد الخاصة بالادوات وتقسيمات القالب داخل عارضة المقاس المناسب مثلا عندي اداة widget الستايل الخاص بها هو
      .widget {
      width: 300px;
      background-color: #eeeeee;
      }


      عند عرض الشاشة بمقاس max-width:320px اريد ان اغير الستايل الخاص بها بالشكل التالي
      @media screen and (max-width:320px) {
      .widget {
      width: 200px;
      background-color: #ffffff;
      }
      }

      لاحظ اني غيرت العرض واللون كذلك ليصبح هذا الستايل خاص فقط بالشاشة 320px .نفس الفكرة مع المقاسات الاخرى
      كان هذا شرح بسيط اتمنى الفكرة قد وصلت مع ان اكواد @media تحتاج لشرح مفصل

      حذف
    2. شكرا أخي بالتوفيق لك ;)

      حذف
  7. أخي الأكواد لا تعمل الا إذا وضعتها فوق الوسم
    ]]></b:template-skin>

    ردحذف
  8. من المفروض مكانها الصحيح فوق الوسم
    ]]></b:skin>

    ردحذف
    الردود
    1. لا يهم هل يمكنك ان تعطيني كود ال html الخاص بهذه الاضافة
      https://3.bp.blogspot.com/-FD8wivG6_-A/W2CsZtXfAgI/AAAAAAAAEfA/HFjV75MduYQwBhSZEzTdoAKRxtQiRqbrgCLcBGAs/s640/Untitled.png

      حذف
  9. 1- كود html ضعه داخل حاوية القائمة الجانبية ستلاحظ عند حفظ القالب أنه تم إضافة ثلاث أدوات جديدة في صفحة التخطيط قم بوضع الادوات التي تريدها في كل قسم
    <div class='threetabs'>
    <ul class='tabber wrap-tabs'>
    <li class='keez'>
    <a href='#id2'>
    <i aria-hidden='true' class='fa fa-tag'/>
    <br/>
    أقسام الموقع
    </a>
    </li>
    <li class='keez'>
    <a href='#id3'>
    <i aria-hidden='true' class='fa fa-paperclip'/>
    <br/>
    صفحات هامة
    </a>
    </li>
    <li class='keez'>
    <a href='#id4'>
    <i aria-hidden='true' class='fa fa-commenting-o'/>
    <br/>
    تعليقات الزوار
    </a>
    </li>
    </ul>
    <div class='clear'/>
    <div class='boner' id='id2'>
    <b:section class='sidebar' id='Category' preferred='no' showaddelement='no'>
    </b:section>
    </div>
    <div class='boner' id='id3'>
    <b:section class='sidebar' id='PageList' preferred='no' showaddelement='no'>
    </b:section>
    </div>
    <div class='boner' id='id4'>
    <b:section class='sidebar' id='Visitors-Comments' preferred='no' showaddelement='no'>
    </b:section>
    </div>
    </div>


    2-كود js ضعه فوق الوسم /body
    //activeTab menu sidbar
    $(".boner").hide(); $("ul.wrap-tabs li:first a").addClass("tabs-current").show(); $(".boner:first").show(); $("ul.wrap-tabs li a").click(function() { $("ul.wrap-tabs li a").removeClass("tabs-current a"); $(this).addClass("tabs-current"); $(".boner").hide();
    var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; });


    3-اكواد css قم بإستخراجها من مصدر الصفحة

    ردحذف