مجتمع روابط فى بي  

العودة   مجتمع روابط فى بي > اقسام البرمجه > دروس تصميم الويب

مقدمة لتصميم المتجاوب

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

إضافة رد
 
أدوات الموضوع انواع عرض الموضوع
قديم 25-12-2015   #1
Mohamed Talidi
رابط مشارك
 
الصورة الرمزية Mohamed Talidi
 
التسجيل: December 9
المشاركات: 160
تقييم المستوى: 4
Mohamed Talidi
افتراضي مقدمة لتصميم المتجاوب

مقدمة لتصميم المتجاوب Untitled-1.png


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

ما هو تصميم المتجاوب ؟

مقدمة لتصميم المتجاوب responsive-template-


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

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

كيف يتم عمل التصميم المتجاوب ؟


يتم عمل تصميم المتجاوب عبرخاصية CSS media queries و هي أحد خصائص CSS3، حيث تحدد قياس الشاشة الجهاز مراد عمل تنصيق له ثم تضيف أكواد CSS بشكل تالي،


مقدمة لتصميم المتجاوب Media%2BQueries.png

مثال؛

كود:
 body {     background-color: #FD004A; }  @media all and (max-width:400px) {     body {         background-color: #00ccff;     } }
هذا مثال بسيط لتغير لون صفحة عندما يكون قياس الشاشة 400 بكسل عرضاً،
ملاحظة: لتعمل خاصية تجاوب على أجهزة محمولة كهواتف يجب أن تضيف كود meta viewport في ما بين وسم head،


كود:
 <meta name="viewport" content="width=device-width, initial-scale=1">
لو لاحظتم فخاصية @media أشبه بجمل شرطية If conditions في البرمجة طبعا لمن عنده خلفية برمجية و الشرط الذي يتم تحقق منه هنا هو قياس الشاشة، حيث تقول لالمتصفح إدا كان قياس شاشة الجهاز المستخدم كدا … طبق هذا التنصيق،

و لعمل تصميم المتجاوب يعمل على عدة قياسات لأجهزة يتم عمل تنصيق css لكل قياس بشكل التالي:


كود:
 @media screen and (max-width:1280px) {         // CSS STYLE FOR DESKTOP  }  @media screen and (max-width:900px) {         // CSS STYLE FOR TAPLETS } @media screen and (max-width:736px) {         // CSS STYLE FOR PHONES  } @media screen and (max-width:300px) {         // CSS STYLE FOR SMALL PHONES  }
و هذه طريقة متبعة لإدراج أكواد media queries داخل ملف CSS "Internal Style”، و يمكن إدراج ملف خارجي “external file” خاص ﺑ media queries بشكل تالي،
كود:
 <link rel="stylesheet" media="screen and (min-width: 300px) and (max-width: 600pc)" href="example.css"/>
أطر العمل و تصميم المتجاوب



مقدمة لتصميم المتجاوب Frameworks.jpg


لقد تحذثنا عن طريقة الأساسية لعمل تصميم متجاوب ﺑ CSS ولكن هناك أيضا عدة أطر عمل Frameworks تسهل علينا عمل مواقع متجاوبة و أشهرها Bootstrap و Foundation، حيث أن هذه أطر العمل تعطيك أكواد جاهزة تسهل مهمة جعل موقعك متجاوباً،


مصادر مفيدة:

CSS Media Queries :MDN Mozilla Developer Network



lr]lm gjwldl hglj[h,f

Mohamed Talidi غير متصل   رد مع اقتباس
قديم 25-12-2015   #2
emad mosaad
:: ادارة المجتمع ::
 
الصورة الرمزية emad mosaad
 
التسجيل: August 9
الدولة: بلاد العرب
المشاركات: 568
تقييم المستوى: 120
emad mosaad
افتراضي رد: مقدمة لتصميم المتجاوب

شرح بسيط ومفهوم ممتاز للتصميم المتجاوب

emad mosaad غير متصل   رد مع اقتباس
قديم 25-12-2015   #3
تذكآر
:: مصمم مواقع ::
 
الصورة الرمزية تذكآر
 
التسجيل: August 23
الدولة: العراق
العمر: 32
المشاركات: 1,499
تقييم المستوى: 16
تذكآر
إرسال رسالة عبر MSN إلى تذكآر إرسال رسالة عبر Yahoo إلى تذكآر
افتراضي رد: مقدمة لتصميم المتجاوب

درس رائع جداً يعطيك العافية

تذكآر غير متصل   رد مع اقتباس
إضافة رد

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


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
تستطيع إضافة مواضيع جديدة
تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is .
كود HTML معطلة



الساعة الآن 07:30 AM


Powered by vBulletin® Version 3.8.7