الملاحظات

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

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

 
أدوات الموضوع انواع عرض الموضوع
قديم 25-12-2015   #1
Mohamed Talidi
رابط مشارك
  • التسجيل: December 9
  • المشاركات: 160
  • تقييم المستوى: 5
  • Mohamed Talidi
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

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

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

 
اقتباس
قديم 25-12-2015   #3
تذكآر
:: مصمم مواقع ::
  • التسجيل: August 23
  • الدولة: العراق
  • العمر: 33
  • المشاركات: 1,499
  • تقييم المستوى: 17
  • تذكآر
تذكآر غير متصل
افتراضي رد: مقدمة لتصميم المتجاوب

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

 
اقتباس

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

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



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