ندعم منتديات vBulletin بتقنية Css3
A L 6 W E R

[ شرح ] تجاوب المنتدى مع اجهزة الجوال والكمبيوتر في وقت واحد


تجاوب المنتدى مع اجهزة الجوال والكمبيوتر في وقت واحد

رقم الموضوع : 8440

تطوير المواقع والمنتديات

 
المشاهدات 182 الردود 8 أدوات الموضوع إبحث في الموضوع

   رقم المشاركة [ 1 ]
09-12-2018, 12:09 AM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
معهد المطوّر
1
تواصل معي مباشرة
الصورة الرمزية لـ AlM6weR
AlM6weR
غير متواجد
[ مؤسس معهد المطوّر ]
اسمي : أبومحمد , من : الرياض , أهتم بـ البرمجة - تطوير المواقع .
عضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات7,867 تقييم المستوى17881 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 286   تم شكره 747 مرة في 568 مشاركة
افتراضي تجاوب المنتدى مع اجهزة الجوال والكمبيوتر في وقت واحد



تجاوب المنتدى مع اجهزة الجوال والكمبيوتر في وقت واحد



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

يجب أن تعلم عزيزي المشاهد بأن لك جهاز مقاس محدد يمكن من خلاله عرض صفحات المنتدى أو الموقع
لذا يجب علينا تهيئة هذي المقاس لتناسب جميع احجام الشاشات المتصفحه للموقع او المنتدى
ولحل هذة المشكلة نحتاج كود يقوم بعرض مقاس محدد على شاشة الكمبيوتر ومقاس لاجهزة التابلت ومقاس اجهزة الجوال الذكية الصغيرة
ولعمل هذة التهيئة يجب علينا الاستعانه بتقنية CSS لتحل مشكلة التصفح من اجهزة التابلت واجهزة الجوال
في البداية :
يجب وضع هذا الكود بعد وسم <header> لإصحاب المواقع
لإصحاب المنتديات ضع هذا الكود في بداية قالب headinclude

HTML & CSS

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
ثانيا :
نقوم بوضع كود css في متغيرات css رئيسي في الحقل الثاني ( الاخير )

HTML & CSS

بناء متغيرات الاجهزة في css
/* شاشة الكمبيوتر */
@media screen and (min-width600px) {
ضع هنا كود الوسم 
}
/* شاشة الاجهزة اللوحية */
@media screen and (max-width600px) {
ضع هنا كود الوسم 
}
/* شاشة الجوال */
@media screen and (max-width500px) {
ضع هنا كود الوسم 

شرح للكود :
يقوم الكود الاول بعرض الشاشة على الاجهزة الكبيرة التي لاتقل مقاساتها عن 600px
ويمكن اضافة كود أو متغير ( كلاس ) لإمكانية ظهور الكلاس class ليتم بذلك اظهار الكلاس على مقاسات الشاشة الكبيرة
مثال :

HTML & CSS

.post {
display:block;

كما يمكن اضافة اكواد المنع من الظهور للكلاس class ليتم بذلك اخفاء الكلاس على مقاسات الشاشات المتوسطة والصغيرة
مثال :

HTML & CSS

.post {
display:none;

كما يمكن التحكم في بحجم الخط وعرض العنصر وارتفاعه .. الخ
ليتم بذلك الاظهار أو الاخفاء

ايضا يجب تغيير مقاسات العرض من خلال ( متغيرات الستايل )
وذلك بتغير كلا من :
عرض الاستمارة (بيكسل)
عرض استمارة لوحة تحكم العضو (بيكسل)
عرض منطقة الكتابة (بيكسل)
عرض منطقة لوحة تحكم العضو (بيكسل)
عرض كود الكتل (بالبيكسل)
وذلك بتغير الحجم الى 100% بدلا من المقاسات الافتراضية


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

بل يحتاج الكثير من التعديلات
ومن ابرزها :
لوحة تحكم العضو
قالب النافبار
اعمدة الجدوال في الصفحة الرئيسية forumhome وكذلك الاقسام FORUMDISPLAY
ايضا يجب عمل تسميت لمحتوى نص الموضوع في قالب البوست بت postbit
ليتم عمل متغير يستند الى خيارات محدده في css ، وذلك من اجل التحكم في عرض الصور في المواضيع للتوافق مع جميع مقاسات الشاشات
افتح قالب البوست بت ، وابحث عن :

HTML & CSS

<div id="post_message_$post[postid]align="center"
اضف كلاس جديد بأي أسم وليكون بهذا الشكل :

HTML & CSS

<div id="post_message_$post[postid]align="center" class="post1"
ثم اضف خصائص للكلاس عن طريق css ، واضف الكود التالي :

HTML & CSS

.post1 img {
    
max-width92%;
    
margin0px 0px 40px 0px;
    
padding3px;

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

مهم جدا
بالنسبة للاعمدة في لوحة تحكم العضو يمكن الاستغناء عنها بإضافة قائمة منسدلة عن طريق خاصية ul بدلا من الجدوال table ( يوجد العديد من الدروس في المعهد )

ولمشاهدة مثال حي لمنتدى تم التعديل عليه بهذة الطريقة ( وهو من عملي الشخصي )
خدمات لكزس Lexus Services

مع تمنياتي للجميع بالتوفيق ،،




كلمات البحث - معهد المطور ارشفة, ستايل, كود, هاك, html, css, java, BBcode, seo, php, JavaScript, Product, Style



توقيعي


عَنْ جُوَيْرِيَةَ بنت الحارث، أم المؤمنين رضي الله عنها؛ أَنَّ النَّبِيَّ صلى الله عليه وسلم خَرَجَ مِنْ عِنْدِهَا بُكْرَةً، حِينَ صَلَّى الصُّبْحَ وَهِيَ فِي مَسْجِدِهَا، ثُمَّ رَجَعَ بَعْدَ أَنْ أَضْحَى، وَهِيَ جَالِسَةٌ، فَقَالَ:
((مَا زِلْتِ عَلَى الْحَالِ الَّتِي فَارَقْتُكِ عَلَيْهَا؟)) قَالَتْ: نَعَمْ، قَالَ النَّبِيُّ صلى الله عليه وسلم: ((لَقَدْ قُلْتُ بَعْدَكِ أَرْبَعَ كَلِمَاتٍ، ثَلَاثَ مَرَّاتٍ، لَوْ وُزِنَتْ بِمَا قُلْتِ مُنْذُ الْيَوْمِ لَوَزَنَتْهُنَّ:
سُبْحَانَ اللهِ وَبِحَمْدِهِ عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ)).



   رقم المشاركة [ 2 ]
09-12-2018, 07:14 PM
تابعني على facebook
الولايات الفلسطينية
7441
عضو معهد المطور
ندعم جميع منتديات
الجيل الثالث بتقنية CSS3
hakam
غير متواجد
[ مطوّر فعّال ]
اسمي : ابو مجاهد , من : القدس , أهتم بـ مهندس كمبيوتر .
تاريخ الإنضمام24-06-2014 عدد المشاركات125 تقييم المستوى0 الدولةpalestine
الإعجابات التي قدمها للأعضاء 2   تم شكره مرة : 1 في مشاركة : 1
افتراضي رد: تجاوب المنتدى مع اجهزة الجوال والكمبيوتر في وقت واحد


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




توقيعي

مطور هو بيتي
موقعي المفضل



   رقم المشاركة [ 3 ]
09-12-2018, 10:28 PM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
معهد المطوّر
1
تواصل معي مباشرة
الصورة الرمزية لـ AlM6weR
AlM6weR
غير متواجد
[ مؤسس معهد المطوّر ]
اسمي : أبومحمد , من : الرياض , أهتم بـ البرمجة - تطوير المواقع .
عضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات7,867 تقييم المستوى17881 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 286   تم شكره 747 مرة في 568 مشاركة
افتراضي رد: تجاوب المنتدى مع اجهزة الجوال والكمبيوتر في وقت واحد


مرحبا
شاهد الشرح بالفيديو والفروقات



بالتوفيق ،،




توقيعي


عَنْ جُوَيْرِيَةَ بنت الحارث، أم المؤمنين رضي الله عنها؛ أَنَّ النَّبِيَّ صلى الله عليه وسلم خَرَجَ مِنْ عِنْدِهَا بُكْرَةً، حِينَ صَلَّى الصُّبْحَ وَهِيَ فِي مَسْجِدِهَا، ثُمَّ رَجَعَ بَعْدَ أَنْ أَضْحَى، وَهِيَ جَالِسَةٌ، فَقَالَ:
((مَا زِلْتِ عَلَى الْحَالِ الَّتِي فَارَقْتُكِ عَلَيْهَا؟)) قَالَتْ: نَعَمْ، قَالَ النَّبِيُّ صلى الله عليه وسلم: ((لَقَدْ قُلْتُ بَعْدَكِ أَرْبَعَ كَلِمَاتٍ، ثَلَاثَ مَرَّاتٍ، لَوْ وُزِنَتْ بِمَا قُلْتِ مُنْذُ الْيَوْمِ لَوَزَنَتْهُنَّ:
سُبْحَانَ اللهِ وَبِحَمْدِهِ عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ)).



   رقم المشاركة [ 4 ]
10-12-2018, 11:04 AM
تابعني على facebook
الولايات الفلسطينية
7441
عضو معهد المطور
ندعم جميع منتديات
الجيل الثالث بتقنية CSS3
hakam
غير متواجد
[ مطوّر فعّال ]
اسمي : ابو مجاهد , من : القدس , أهتم بـ مهندس كمبيوتر .
تاريخ الإنضمام24-06-2014 عدد المشاركات125 تقييم المستوى0 الدولةpalestine
الإعجابات التي قدمها للأعضاء 2   تم شكره مرة : 1 في مشاركة : 1
افتراضي رد: تجاوب المنتدى مع اجهزة الجوال والكمبيوتر في وقت واحد


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




توقيعي

مطور هو بيتي
موقعي المفضل



   رقم المشاركة [ 5 ]
10-12-2018, 11:43 AM
تابعني على facebook
سات شير
7876
عضو معهد المطور
ندعم جميع منتديات
الجيل الثالث بتقنية CSS3
محمود عبدالعال
غير متواجد
[ مطوّر فعّال ]
تاريخ الإنضمام02-04-2015 عدد المشاركات119 تقييم المستوى0 الدولةegypt
  تم شكره مرة : 1 في مشاركة : 1
افتراضي رد: تجاوب المنتدى مع اجهزة الجوال والكمبيوتر في وقت واحد


اخي الحبيب ابو محمد انت انسان مبدع حقا وتصميماتك كلها مميزة ورائعه

بارك الله لك اخي الحبيب على موضوع المميز وكل اعمالك التي تقدمها لنا
لدي سؤال هل بهذه الاضافات يمكننا لاستغناء عن استايل الجوال ؟




   رقم المشاركة [ 6 ]
10-12-2018, 11:49 AM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
معهد المطوّر
1
تواصل معي مباشرة
الصورة الرمزية لـ AlM6weR
AlM6weR
غير متواجد
[ مؤسس معهد المطوّر ]
اسمي : أبومحمد , من : الرياض , أهتم بـ البرمجة - تطوير المواقع .
عضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات7,867 تقييم المستوى17881 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 286   تم شكره 747 مرة في 568 مشاركة
افتراضي رد: تجاوب المنتدى مع اجهزة الجوال والكمبيوتر في وقت واحد


اخي الحبيب ابو محمد انت انسان مبدع حقا وتصميماتك كلها مميزة ورائعه

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




توقيعي


عَنْ جُوَيْرِيَةَ بنت الحارث، أم المؤمنين رضي الله عنها؛ أَنَّ النَّبِيَّ صلى الله عليه وسلم خَرَجَ مِنْ عِنْدِهَا بُكْرَةً، حِينَ صَلَّى الصُّبْحَ وَهِيَ فِي مَسْجِدِهَا، ثُمَّ رَجَعَ بَعْدَ أَنْ أَضْحَى، وَهِيَ جَالِسَةٌ، فَقَالَ:
((مَا زِلْتِ عَلَى الْحَالِ الَّتِي فَارَقْتُكِ عَلَيْهَا؟)) قَالَتْ: نَعَمْ، قَالَ النَّبِيُّ صلى الله عليه وسلم: ((لَقَدْ قُلْتُ بَعْدَكِ أَرْبَعَ كَلِمَاتٍ، ثَلَاثَ مَرَّاتٍ، لَوْ وُزِنَتْ بِمَا قُلْتِ مُنْذُ الْيَوْمِ لَوَزَنَتْهُنَّ:
سُبْحَانَ اللهِ وَبِحَمْدِهِ عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ)).



   رقم المشاركة [ 7 ]
10-12-2018, 12:11 PM
تابعني على facebook
سات شير
7876
عضو معهد المطور
ندعم جميع منتديات
الجيل الثالث بتقنية CSS3
محمود عبدالعال
غير متواجد
[ مطوّر فعّال ]
تاريخ الإنضمام02-04-2015 عدد المشاركات119 تقييم المستوى0 الدولةegypt
  تم شكره مرة : 1 في مشاركة : 1
افتراضي رد: تجاوب المنتدى مع اجهزة الجوال والكمبيوتر في وقت واحد


بارك الله فيك اخي العزيز




   رقم المشاركة [ 8 ]
10-12-2018, 01:35 PM
تابعني على facebook
الولايات الفلسطينية
7441
عضو معهد المطور
ندعم جميع منتديات
الجيل الثالث بتقنية CSS3
hakam
غير متواجد
[ مطوّر فعّال ]
اسمي : ابو مجاهد , من : القدس , أهتم بـ مهندس كمبيوتر .
تاريخ الإنضمام24-06-2014 عدد المشاركات125 تقييم المستوى0 الدولةpalestine
الإعجابات التي قدمها للأعضاء 2   تم شكره مرة : 1 في مشاركة : 1
افتراضي رد: تجاوب المنتدى مع اجهزة الجوال والكمبيوتر في وقت واحد


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




توقيعي

مطور هو بيتي
موقعي المفضل



   رقم المشاركة [ 9 ]
10-12-2018, 04:53 PM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
معهد المطوّر
1
تواصل معي مباشرة
الصورة الرمزية لـ AlM6weR
AlM6weR
غير متواجد
[ مؤسس معهد المطوّر ]
اسمي : أبومحمد , من : الرياض , أهتم بـ البرمجة - تطوير المواقع .
عضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات7,867 تقييم المستوى17881 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 286   تم شكره 747 مرة في 568 مشاركة
افتراضي رد: تجاوب المنتدى مع اجهزة الجوال والكمبيوتر في وقت واحد


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




توقيعي


عَنْ جُوَيْرِيَةَ بنت الحارث، أم المؤمنين رضي الله عنها؛ أَنَّ النَّبِيَّ صلى الله عليه وسلم خَرَجَ مِنْ عِنْدِهَا بُكْرَةً، حِينَ صَلَّى الصُّبْحَ وَهِيَ فِي مَسْجِدِهَا، ثُمَّ رَجَعَ بَعْدَ أَنْ أَضْحَى، وَهِيَ جَالِسَةٌ، فَقَالَ:
((مَا زِلْتِ عَلَى الْحَالِ الَّتِي فَارَقْتُكِ عَلَيْهَا؟)) قَالَتْ: نَعَمْ، قَالَ النَّبِيُّ صلى الله عليه وسلم: ((لَقَدْ قُلْتُ بَعْدَكِ أَرْبَعَ كَلِمَاتٍ، ثَلَاثَ مَرَّاتٍ، لَوْ وُزِنَتْ بِمَا قُلْتِ مُنْذُ الْيَوْمِ لَوَزَنَتْهُنَّ:
سُبْحَانَ اللهِ وَبِحَمْدِهِ عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ)).



 

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
المنتدى, الجوال, اجهزة, بجانب, والكمبيوتر, واحد

أدوات الموضوع إبحث في الموضوع
إبحث في الموضوع:

البحث المتقدم

الانتقال السريع

المواضيع المتشابهه للموضوع: تجاوب المنتدى مع اجهزة الجوال والكمبيوتر في وقت واحد
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[ Style ] ستايل هلبرنت المطور 2017 ، الجولات ، والكمبيوتر hakam ستايلات vBulletin 3.8.x 2 07-03-2017 02:37 PM
Moshaf v1.0 برنامج القران الكريم لجميع اجهزة الجوال بصيغة jar AlM6weR سيمبيان العام ( نوكيا ) General Symbian Nokia 20 06-02-2012 06:45 PM
برنامج Nokia PC Suite 7.1.40.1 لربط اجهزة الجوال بالكمبيوتر والكثير ... AlM6weR سيمبيان العام ( نوكيا ) General Symbian Nokia 3 20-01-2012 03:54 PM
برنامج اذكار النوم لجميع اجهزة الجوال - جافا AlM6weR سيمبيان العام ( نوكيا ) General Symbian Nokia 4 28-09-2011 07:59 PM
[ Style ] استايل لتصفح المنتدى عبر الجوال host ستايلات vBulletin 3.8.x 3 12-06-2011 07:59 AM


الساعة الآن 03:28 PM

توافق أكواد المعهد

تم التحقق بنجاح هذا الموقع من أخطاء XHTML  Valid XHTML 1.0 Transitional

تم التحقق بنجاح هذا الموقع من أخطاء CSS3  Valid CSS!

ترتيب الكسا alexa

من نحن

معهد المطور
موقع يهتم بتطوير المواقع والمنتديات وتحسين بيئة عمل المواقع العربية

أهدافنا

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

خدماتنا

نمد يد العون لجميع اصحاب المواقع ، ونجيب عن جميع استفساراتهم قدر الامكان
كما نتطلع دائما لطرح الجديد والمفيد لهم

الدعم الفني المدفوع

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

مواقع صديقة

تجربتي

لماذا هذه المواقع ؟

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

الحقوق

Powered by vBulletin@Version 3.8.7 .Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
المشاركات والمواضيع تعبر عن رأي كاتبها وليس بالضرورة رأي المطوّر
وجميع الحقوق محفوظة لاصحابها

تاريخ انشاء الموقع

08-06-2010