logo, ali, hamdi

RWD Responsive Web Design

أ عمرو علي


responsive_web_design

 

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

ماهى اهم انواع ال الفريم ورك اللى ممكن استخدمها علشان التصميم يبقى متجاوب ؟ من اهم الفريم ورك اللى موجوده على النت وبيستخدمها اغلب المصممين والمطورين البوت ستراب وده واحد من اهم الفريم وركس اللى ممكن تحول التصميمم بتاعك الى تصميم متجاوب وده من انتاج شركه تويتر وليس الموقع وده الموقع الرسمى الخاص بة http://getbootstrap.com/

والصدار الحالى منه هو الصدار Currently v3.1.1

twitter-bootstrap

هل احتاج لكى اتعامل مع البوت ستراب ان اكون متقن لل HTML5 CSS3 ?

 

الاجابة لا فقط يكون لديك الاساسيات فى الHTML & CSS وتسطيع  ان تحول تصميمك الى تصميم متجاوب مع البوت ستراب وهذه ستكون بداية جيده على التمرس مع اكواد الHTML5 & CSS3 ويتميز البوت ستراب بالشرح الوافر والرائع من الموقع الرسمى

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

الموضوع فى غاية السهولة ليس كما يتصور البعض فهيا بنا نبدا اذا

Getting started

 An overview of Bootstrap, how to download and use, basic templates and examples, and more.

اولا :

نقوم بالتحميل

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-getting-started

Sass

Bootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.

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>

 

وباذن الله نكمل المرة القادمه

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

تحياتى ا عمرو على


This post has 14459 Views

13 responses to “Responsive Web Design التصميم المتجاوب ?”

  1. ali7amdi says:

    شكرا يا أستاذ عمرو بارك الله فيك وفي عملك

  2. Amr Ali says:

    ربنا يخليك لينا يا هندسة والموقع يبقى متكامل ان شاء الله والموضيع كلها تصل الى مصمم ومبرمج مستواهم عالى باذن الله

  3. hassan altabbakh says:

    رائع وبالتوفيق

  4. amina says:

    جزاك الله كل خير علي تعبك واهتمامك لتوصيل المعلومة لينا الله يكتبه في ميزان حسناتك

  5. Amr Ali says:

    وان شاء الله حنتكلم الاول عن البوت ستراب وبعد كده حنكمل على Foundation وكمان skeleton
    واهم شى ال Grid System لانه ده اهم حاجه فى ال Framework ان شاء الله

  6. بالتوفيق ان شاء الله ننتظر المزيد

  7. adel says:

    شكراً لك ولو فى شروحات تانى يا ريت تزودنا بيها عن الريسبونسف ويب عموما

  8. Israa Saif says:

    ما شاء الله … جزاكم الله خيرااا
    بس عندى استفسار … يعنى قبل التكويد بنزل الملفات ولا ممكن لو خلصت موقع تصميم وتكويد و ورد بريس احولة موقع متجاوب ؟

  9. ABWALBRA says:

    جزاك الله خير

  10. semo graphic says:

    ربنا يبارك فيك الف شكر ربنا يجازيك كل خير

  11. شكرا لك استاذ عمرو وشكرا للاستاذ علي حمدي .. بس عندي ملاحظات على الموقع ياريت يبقى فيه سكرول بار وكمان الاهتمام بحجم ونوع الخط ويكون واضح وياريت يكون خط Droid Arabic Kufi
    والسلام ختام

Leave a Reply

Your email address will not be published. Required fields are marked *