RWD Responsive Web Design
أ عمرو علي

السلام عليكم اولا بعتذر لكم عن التنسيق فى الكتابة المرة اللى فاتت بس كانت مشكلة فنيه فى المحرر المهم اتكلمنا المرة اللى فاتت عن التصميم المتجاوب وبترجع اهميته حاليا لان فى الفترة الاخيرة ذاد جدا عدد المستخدمين الهواتف المحموله والاجهزة الذكيه والتابلت والاي فون وده من اهم الاسباب اللى جعلت المبرمجين والمصممين يبداوا يصمموا المواقع بتاعتهم وتكون مجاوبه مع اى شكل من اشكال العرض يعنى مثلا انا لما افتح الفيس بوك على شاشة ال سى دى حلاقيه بياخد شكل الشاشة ال سى دى مهما كبر شكل العرض الموقع بيتجاوب معايا بس ناخد مراجعه سريعه
ماهى اهم انواع ال الفريم ورك اللى ممكن استخدمها علشان التصميم يبقى متجاوب ؟
من اهم الفريم ورك اللى موجوده على النت وبيستخدمها اغلب المصممين والمطورين البوت ستراب وده واحد من اهم الفريم وركس اللى ممكن تحول التصميمم بتاعك الى تصميم متجاوب وده من انتاج شركه تويتر وليس الموقع وده الموقع الرسمى الخاص بة
http://getbootstrap.com/
والصدار الحالى منه هو الصدار Currently v3.1.1
هل احتاج لكى اتعامل مع البوت ستراب ان اكون متقن لل HTML5 CSS3 ?
الاجابة لا فقط يكون لديك الاساسيات فى الHTML & CSS وتسطيع ان تحول تصميمك الى تصميم متجاوب مع البوت ستراب وهذه ستكون بداية جيده على التمرس مع اكواد الHTML5 & CSS3 ويتميز البوت ستراب بالشرح الوافر والرائع من الموقع الرسمى
كيف تكون البداية ؟ البداية دائما تكون مع الموقع الرسمى اعتمد علية بشكل كبير لانه سيمدك بكل المعلومات الخاصه والتحديثات اجعلة كصديق لك وممكن تعتمد على كتب او شرحات فديو ولكن للاسف ممكن تكون قديمه ولا تواكب الاصدار الحالى وبذلك تكون متاخر فى التعليم ولذلك عليك دائما باستخدام الموقع الرسمى فى اى برنامج او تقنية جديده
اريد مثال ؟
الموضوع فى غاية السهولة ليس كما يتصور البعض فهيا بنا نبدا اذا
اولا :
نقوم بالتحميل
Download
Bootstrap
Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.
ودى عباره عن ملفات ال Dits ودى الاختصار لل Distribution التوزيعه اللى انا محتاجها بس
وبدون امثلة وبدون اى ملفات تانية
ويوجد ايضا السورس كود
Source code
Source Less, JavaScript, and font files, along with our docs. Requires a Less compiler and some setup.
وده بيحتوى على كل الملفات والامثلة عكس الاول الذى لا يحتوى على امثلة او ملفات اخرى
SASS & LESS دى تقنية جديده بتعمل كمبيلشن للكود ودى حنتكلم بيها بستفاضه ادام باذن الله
اخر حاجه حنتكلم عنها هى ال Bootstrap CDN
ودى عبارة عن تحميل الملفات الخاصه بالبوت ستراب من على السيرفر الخاص بالموقع وده علشان اقلل حجم الملفات والضغط على السرفر
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet"href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
وباذن الله نكمل المرة القادمه
وشكر خاص للبشمهندس على حمدى انة اتحالى الفرصه دى ودعمه ليا
تحياتى ا عمرو على
شكرا يا أستاذ عمرو بارك الله فيك وفي عملك
ربنا يخليك لينا يا هندسة والموقع يبقى متكامل ان شاء الله والموضيع كلها تصل الى مصمم ومبرمج مستواهم عالى باذن الله
رائع وبالتوفيق
جزاك الله كل خير علي تعبك واهتمامك لتوصيل المعلومة لينا الله يكتبه في ميزان حسناتك
ربنا يخليك يا امينه ولازم نوصل المعلومه بالعربى بطريقه سهله ومبسطه
وان شاء الله حنتكلم الاول عن البوت ستراب وبعد كده حنكمل على Foundation وكمان skeleton
واهم شى ال Grid System لانه ده اهم حاجه فى ال Framework ان شاء الله
بالتوفيق ان شاء الله ننتظر المزيد
شكراً لك ولو فى شروحات تانى يا ريت تزودنا بيها عن الريسبونسف ويب عموما
ما شاء الله … جزاكم الله خيرااا
بس عندى استفسار … يعنى قبل التكويد بنزل الملفات ولا ممكن لو خلصت موقع تصميم وتكويد و ورد بريس احولة موقع متجاوب ؟
جزاك الله خير
ربنا يبارك فيك الف شكر ربنا يجازيك كل خير
شكرا لك استاذ عمرو وشكرا للاستاذ علي حمدي .. بس عندي ملاحظات على الموقع ياريت يبقى فيه سكرول بار وكمان الاهتمام بحجم ونوع الخط ويكون واضح وياريت يكون خط Droid Arabic Kufi
والسلام ختام
وياريت كمان اقدر اضغط على اسم الكاتب وليكن حضرتك استاذ عمرو يعرضلي صفحة خاصة بك وبمقالاتك .. شكرا