السلام عليكم ورحمة الله وبركاته
بسم الله الرحمن الرحيم
http://ift.tt/2n0Iv3k
[ للمهتمين بالتقديم فى ثيم فورست ]
فى البوست ده جمعت معظم الاخطاء اللى وقعت فيها انا وبعض اصدقاء عند تقديم الـ themes فى الماركت
علشان الناس متواجهش المشاكل دى
البوست هيكون متجدد ان شاء الله كل فترة هنزل بعض المشاكل اللى بتقابل الناس
واي حد حابب يضيف او يطور , يتفضل المجال متاح
واتمني ان شاء الله الجميع يستفاد
http://ift.tt/2mRvOv2
1. CODE VALIDATION
Some of your files contain validation errors that will need to be fixed.
Please be sure that all files validate before resubmitting.
You can validate HTML at The W3C Markup Validation Service
[ المشكلة ]
ان الكود يكون html valid
[ سببها ]
منظمة w3school عاملين rules معينة لازم تلتزم بيها وانت بتكتب كود الـ HTML
طيب الـ RULES دى اوصلها ازاي ؟
من خلال المقال ده هما منزلين الـ RULES اللي مفروض تمشي عليها
http://ift.tt/2n0FhNb
[ حلها ]
بعد ما بتنهي الكود الخاص بيك بتبدأ تعمل Test للكود تشوف هو انت فعلاً التزمت بالمعايير اللى اتكلموا عنها ولالا ؟
من خلال اللينك ده بتكتب لينك الثيم الخاص بيك اونلاين وبتبدا تعمل تست عليه بيظهرلك الاخطاء والمشاكل وازاي تحلها
وتقدر كمان انك ترفع ملفـ كود الـ HTML LOCAL
The W3C Markup Validation Service
[ ليه ؟ =D ]
ايه الفكرة فى اني اهتم بان الكود بتاعي يكون Valid
الموضوع ده هيأثر مع مستخدم الثيم الخاص بيك بشكل كبير جداً من ناحية الـ SEO
وخاصة وان GOOGLE بقي من ال RULES المهمه جداً علشان تحسن الارشفة بتقولك ان لازم الصفحة بتاعتك تكون VALID مفيش مشاكل فيها فى الكود
كمان ده بيأثر فى اداء الموقع من حيث السرعة بيختلف وبيعطيك PERFORMANCE اعلي طبعاً .
http://ift.tt/2mRvDj7
2. RESPONSIVE ISSUES
Your files are either inaccurately represented as responsive or have responsive layout issues.
Please take a moment to make sure that your design layout looks correct at different breakpoints
and that all text is scaled appropriately for smaller devices.
[ المشكلة ]
ان التصميم غير متوافق مع الـ SMART Devcies like phone
[ سببها ]
انك بعد ما خلصت التصميم اهتميت فقط بالمقاسات الكبيرة اللى هى زي مقاس اللاب فيما فوق ومهتمش
بالمقاسات الصغيرة زى الموبايل او التاب وغيره
[ حلها ]
بتبدا انك تقرأ فى ال media query وهنا منظمة w3 اتكلموا عن الموضوع
https://goo.gl/3HvseH
وده شرح للمهندس علي حمدي شارح فيه الموضوع بشكل كبير بانك تطلع الصفحة كاملة responsive " متجاوبة "
https://goo.gl/vrVAqH
[ ليه ؟ =D ]
لو بصيت علي آخر الاحصائيات للمستخدمين هتلاقي ان النسبة الاكبر للموبايل
معظمنا بقي بيخلص معظم شغله من على الموبايل
فـ الطبيعي وانت شغال ان يكون من اولويات شغلك الاهتمام بالموبايل والتابلت وغيره ..
http://ift.tt/2n0BIXz
3. TYPOGRAPHIC HIERARCHY
The typographic hierarchy of this item requires additional work.
For more information, please read:
http://ift.tt/2mRyF79
[ المشكلة ]
ان الـ Template بتاعك مكنتش مهتم بيه بمعاير التسلسل او كما يطلق الهرم الطبقي
[ سببها ]
انك مهتمش وانت شغال بالتسلسل فى التصميم بمعني ؟
انك على سبيل المثال فى بتصمم صفحة لمقالة معينة
الطبيعي اني اول ما افتح المقالة اول حاجه مفروض عيني تروح عليها هي عنوان المقالة
فـ انا لو فتحت المقالة وملاحظتش العنوان من اول نظره كده التصميم فيه مشكلة !
فـ وانا شغال بنظام التسلسل الطبيعي ان وليكن العنوان هيكون ليه حجم معين خط معين بحيث يكون مميز
عن الوصف الخاص بالمقالة عن المحتوي عن غيره ..
التسلسل انى ببدا من الاكبر للاصغر للاصغر الحالة الوحيدة اللى تقدر تكسر فيها القاعدة دى انك محتاج حاجه معينة تكون ظاهرة بشكل مميز ومختلف
زى سعر منتج او خلافه
[ حلها ]
اقرا فى المقالة دى هتستفاد بشكل كبير
https://goo.gl/jJf2Br
[ ليه ؟ =D ]
من اهم العوامل اللى بتريح العين لما العميل يتفرج على الشغل او الزائر عموماً يكون مرتاح وهو بيشوف المقالة او بيقرا شئ معين
ان تكون عينه مرتاحة لانه شايفك مقسم الشغل بشكل منظم مراعي مسافاتك خطوطك احجامك الوانك وهكذا
http://ift.tt/2n0BIqx
4. SPACING AND ALIGNMENT
There are spacing and alignment issues in this item.
Please make sure that all elements are aligned properly and spacing is consistent from section to section.
Here are some articles with more information regarding negative space and proper spacing:
http://ift.tt/2mRr3kW,
http://ift.tt/2n0WExl
[ المشكلة ]
المسافات والمحاذاة لعناصر التصميم غير متساوية
[ سببها ]
نبدأ اولاً بالمسافات
الطبيعي ان تكون المسافات بين كل سكاشن الموقع متساية بمعني ان وليكن
سكشن الخدمات لازم يكون قبله وبعده 100 بكسل
على سبيل المثال وهكذا فى باقي السكاشن
مينفعش انك فى كل سكشن تعمل مقاس مختلف قبله ومقاس مختلف بعده
لان هو مقاس واحد بتمشي عليه
- كمان المسافات بين العناصر داخل التصميم لازم تكون متساية
بمعني ان عنصر زى ايقونات السوشيال ميديا
المسافات على جوانب ايقونة الاولي لازم تساوي الثانية لازم تساوي الثالثه وهكذا ..
- كمان موضوع المسافات الايجابية والمسافات السلبية بمعني ؟
فى اماكن معينة محتاج انك تظهرها بشكل يلفت الزائر هنا بتحتاج تسيب ممكن حوالة مسافة اكبر من باقي العناصر وى اسمها مسافة ايجابية
على النقيض لما بتستخدم مسافات اكبر من اللازم دى اسمها مسافة سلبية
ثانياُ الـ alignment
المحاذاة لعناصر التصميم ودي طبعاً بتعتمد على الgrid المستخدم
لازم وانت شغال تكون بتستخدم grid يكون مقسملك شغلك بشكل متساوي
فى حالة الكود طبعاً تقدر تستخدم bootstrap grid وتقدر تقرأ عنه من هنا
https://goo.gl/XDHLjq
فى حالة انك بتصمم على الفوتشوب تقدر تستخدم ده
https://goo.gl/GdSwP4
بحيث انك فى النهاية لما تيجي تاخد صورة كاملة للموقع تبقي السكاشن كلها فى محاذاة لبعضها البداية من اليمين كلها على خط واحد وكذلك الشمال على خط واحد
مفيش عنصر يكون بره الجريد
[ حلها ]
اقرا فى المقالة دى هتستفاد بشكل كبير
https://goo.gl/xPfI96
ودى كمان
https://goo.gl/V7D41k
[ ليه ؟ =D ]
عشان شغلك يكون شكله منظم ومريح للعين
http://ift.tt/2mRlenx
5. TRADEMARK VIOLATION
Your submission contains apparently trademarked names or assets (logos, etc) not adhering
to our content policy.
[ المشكلة ]
استخدامك لعلامة تجارية بشكل غير مصرح به
[ سببها ]
وليكن انك بتشتغل فى template شركة استضافة
لان ده مثال حصل معايا كنت مستخدم صورة سيرفر وكان عليها لوجو hp
جالي ان التصميم اترفض بسبب ان اللوجو موجود على الصورة بشكل غير مصرح به او غير مصرح تداوله تجارياً
[ حلها ]
وانت بتختار الصور اللى هتستخدمها فى التصميم دايماً راعي انك تكون بعيد عن استخدام اي علامات تجارية
حابب تستخدم علامات تجارية envato بتوفر ليك الحل ده ف انك تستخدم العلامات التجارية الخاصة بيهم وتقدر تحملها من هنا
https://goo.gl/Rhxks6
ودى بعض المواقع اللى بستخدمها لما بجمع صور التصميم واللى مصرح باستخدامها بشكل مجاني
https://goo.gl/DHrNbZ
https://goo.gl/qM7z4J
https://goo.gl/SCSR15
http://ift.tt/2n0HYyy
6. Make sure the CSS file is well documented with proper table of contents.
[ المشكلة ]
ملفات ال css الخاصه بالثيم غير منظمه
[ سببها ]
انك لما عملت ملف css مهتمتش انك تعمل كومنتات على كل سكشن رئيسي او العناصر المهمة
انك معملتش جدول فى بداية الملف وضحتله ايه العناصر اللى موجودة فى الملف ده
[ حلها ]
فى بداية الملف بتبدا تكتب معلومات عن الثيم زي
author , author website , date , tags , updates , ...
وتقدر تستخدم حاجه زى كده
/*
Theme Name: Twenty Thirteen
Theme URI: http://ift.tt/1446oJ2
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: GNU General Public License v2.0 - GNU Project - Free Software Foundation
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
الخطوة اللى بعدها بتبدا تعمل جدول توضح فيه العناصر الموجودة فى التصميم
like header , services , about , footer , ..
و تقدر تستخدم حاجه زى كده
/* ************************************************** ***
-
Sections :
-
Fonts
-
Header
-
Slider
-
Domain
-
Host Planes
-
services
-
Works
-
Widgets
-
Footer
************************************************** *** */
طبعاً كل المعلومات دى بتكون داخل comments /* .. */
وتقدر تعدل فى شكل الكومنت زى ما تحب لكن اهم حاجه انك تكتب التفاصيل دي
- كمان فى ملحوظة خاصة بالـ css
حاول استخدامك ل
rule > !important
يكون بشكل قليل جداً لانك لو استخدمتها كتير هيبدا المراجع يقولك انت ليه مستخدمها كثير ولازم تقل عن كده وهكذا
وطبعاً فى معظم الاحيان استخدامك لل rule دى ناتج انك بتجبر عنصر معين على تنفيذ حاجه معينه ودى تقدر تحلها ب nestin elements
وتتفادي المشكلة دى
http://ift.tt/2n0HeJr
7. LOCAL COPY OF LIBRARIES
please make sure you include and use a local copy of all the files need it for the template to run correctly.
[ المشكلة ]
ان ملفات الجافا او ال css بتحمل من مصدر خارجي مش من ملفات الثيم نفسه
[ سببها ]
انك لما بتيجي تربط ملف زى ملف ال jquery على سبيل المثال ممكن انك تستخدم لينك اونلاين ليه من CDN زي ده
ف الملف طبعاً بيعمل load online
ف بيبدا ان العميل لو بيعمل تست للثيم وفى مشكلة فى النت طبعاً الجى كويري مبيشتغلش لانه بيلود اونلاين وطبعاً هتقف كل ال plugins
[ حلها ]
انك تكون مأمن نفسك من الموضوع ده وتخلي الملفات تحمل من الثيم نفسه فيكون الملف بالشكل ده
وان الملفات كلها تكون بتحمل بشكل local
from حسوب I/O - الأكثر شيوعاً http://ift.tt/2mRuOqA
