logo, ali, hamdi

RWD Responsive Web Design

مناقشة عن التصميم المتجاوب

أ عمرو علي

workshop_1_Amr_ali

1 نقول انواع اهم frameworks عندنا Bootstrap وكمان ال foundation و ال skeleton

Responsive Design 2- يعنى بيفير ال View على مقاس العرض للصفحه

3- مش محتاج تكون متقن HTML5 ولا CSS3 بيحتاج Basic فى HTML , CSS بس

4- الكود الجميل ده<meta name=”viewport” content=”width=device-width, initial- scale=1″ />

5- طيب انا ازاي اقدر اعمل Responsive Design و اه الادوات الي هحتاجها في عمله.

6- اهم حاجه ال DOC بتاع الموقع .

http://getbootstrap.com/2.3.2/getting-started.html

7 – بيقولك Download لل ملفات تمام

ونزل ال Sublime Text 2) لكن الاحسن النت بينز ايه

8- علشان النت بيتنز بيديك auto complete

9- لما تنزل الملفات حتلاقى 3 Files

10 – img js css تمام

11- فية مثلا bootstrap.min.css وكمان bootstrap.css

12-ممكن نستخدم bootstrap.min.css ده ملف مضغوط مفهوش كومنت

13- ونفس الكلام مع ال bootstrap.min.js لما نفتح ال bootstrap.min.js مش حتعرف تقرها ولا تعدل عليها

14- يتم تضمين ال js الخاصه بال bootstrap فى script

15- ممكن نحط الملفات فى ال head او قيل نهاية ال body وده علشان لو هتدك ملفات js تستتا لما تحمل الاساسى الاول

16- ممكن تتضمن بالشكل ده <link href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen” /> 17- واهم حاجه قبل ال bootstrap js اضافه ال jquery library

18- الفريم ورك احلى حاجه فية انه HTML5

……. // Your body goes here طيب ملفات الjs بتتضمن في الhead ولا في نهاية الصفحة

19- الافضل فى نهاية الصفحه علشان لما تبص على السليدر 20 – مثلا فى ال HEAD حيحمل الاول لكن لما يكون فى ال BODY حيتحمل فى الاخر

21-Bootstrap 2 كانوا بيستخدموا Reset via Normalize

22- http://html5boilerplate.com/ وال الاصدار Bootstrap 2

22- نيجى بقا لموضوع ال grid system

23- لما نفتح ال scaffolding نلاقى ال grid system

24- يعنى اية ده ؟؟؟ انا اقولك

25- عندنا 12 columns

26- ده بيدينا 940px يعنى ببساطه كده بيخلينا الشاشه تتقسم بسهوله

27- طيب بيتكتب ازاى انا اقولك <div class=”row”> <div class=”span4″>هنا</div> <div class=”span8″>هنا</div> </div>

28- بيشتغل بمجموعه classes

29- اول حاجه ال class row ايوا صحيح span4 بس اصبحت col-md-4

30- وبعد كده جواه span يعنى span4 ونذود span8 يبقوا كام

31- طيب سوال انا عاوز اداه تسهل عليا ؟

31- فى الجوجل كروم فية https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg

32- الاداه دى بتسهل عليك وتوريك شكل الصفحه على الابل او الاى باد

33 – يعنى انا ممكن اعمل span12 جواه كذا span اقصى حاجه 12

34 – كمان ممكن اعمل offset

35- يعنى اية ال offset ده بيشبه ال float

<div class=”span4″>…</div>

<div class=”span3 offset2″>…</div>

وال bootstrap ممكن تعمل فية class &amp; id عادى

Nesting columns يعنى

<div class=”row”>

<div class=”span9″>Level 1 column</div>

</div>

<div class=”row”>

<div class=”span6″>Level 2</div>

<div class=”span3″>Level 2</div> </div> فية عندى كمان ال <div class=”row-fluid”> <div class=”span4″>…</div> <div class=”span8″>…</div> </div> وعشان الم ال div كله الاول كنا بنعمل div id=”container ” لكن ال BOOTSTRAP عمل لنا class اسمه container الclass بيلم كل حاجه اوتوماتيك ولو عملت container row حنلاحظ ان العرض ذاد

زاى اعمل Enabling responsive features ؟ <link href=”assets/css/bootstrap-responsive.css” rel=”stylesheet” /> فية ملف تانى نضمن منه ال style

موجود وين الملف ؟

انا مثلا فيه صورة عاوزها تختفى عد مقاس معين

تعمل downlaoad لل Bootstrap

الكلاس ده .visible-tablet من اسمه ظاهر فى التابلت بس

يعنى مثلا

كده الصورة حتبقى ظاهرة فى ال تابات بس .visible-phone

و .visible-desktop و .hidden-tablet و .hidden-desktop نفس الكلام

ايوا يعني بس احط visible-tablet مبيظهرش على الديسكتوب مثلا يبقى ده خلصنا ال Scaffolding

ايوا بس لسه مبهم شوي ممكن توضيح اكتر يعني كيف حتحكم

بال visible

كلمه visible مرى فى جزء من الاجزاء التالاته يا موبيل او تابلت او كوميوتر

و hidden نفس الكلام

ممكن ننزل الاداه دى https://chrome.google.com/webstore/detail/bootstrap-twitter-offline/gihkgljdimgfffabkemicpaeljmoobil?utm_source=chrome-ntp-icon

دى لو نسيت اى حاجه معاك offline Typography نفس ال Typography العادى h1 to h6

ال Default والفونت font-size is 14px, with a line-height of 20px. Built with Less

يعنى اية؟

التحكم فى الفونت عن طريق ال less ودى تقنية جديده كمنتش موجوده فى ال Bootstrap 2 بس يتحتاج معالجه الاول ودة موضوع تانى

فعلا موضوع تاني خليك بالresponsive

ممكن نستخدم ال small وال strong الحاجات العادية فى ال html العادى

وعندنا كمان <p class=”text-left”>Left aligned text.</p> <p class=”text-center”>Center aligned text.</p> <p class=”text-right”>Right aligned text.</p> دى بتعمل paragraph float على طول Emphasis classes

dapibus, tellus ac cursus commodo, tortor mauris nibh. <p class=”text-warning”>Etiam porta sem malesuada magna mollis euismod.</p> <p class=”text-error”>Donec ullamcorper nulla non metus auctor fringilla.</p> <p class=”text-info”>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> <p class=”text-success”>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> حنجد سهوله والوان جديده من غير مجهود

فى ال HTML5 عندنا ABBR دة اخنصار لكلمه مختصرة <abbr title=”attribute”>attr</abbr>

لما نيجى نعمل HOVER نلاقى ادانا علامه استفهام

ولما نعمل CONTACT يبقى نستخدم ال address زى كده

<address><strong>Twitter, Inc.</strong></address>795 Folsom Ave, Suite 600

San Francisco, CA 94107

<abbr title=”Phone”>P:</abbr> (123) 456-7890

دى امكانايات ال HTML5

Blockquotes دى بتدى مسافة وشكل جميل لل p

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Integer posuere erat a ante.

نيجى بقى لل .pull-right و ال .pull-LEFT زى ال FLOAT RIGHT AND FLOAT LEFT <ul> <li>…</li> </ul> زى ماهية

ممكن نضيف لها list-style او unstyled

او ندى ال UL <ul class=”inline”> <li>…</li> </ul>

الفرق بين Bootstrap.css وال Bootstrap.min.css ان الاول بيكون فيه تعليقات للمبرمج وسهل تعدل علية لكن التانى تشتغل على طول وتعدلش حاجه فية لكن فى الاول استخدم Bootstrap.min.css بس لغاية لما مستواك يبقى كويس وتقدر تعدل على الحاجه اللى انت عاوزها

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

يوم التلاثاء القادم Amr Ali

This post has 14524 Views

13 responses to “RWD Responsive Web Design مناقشة عن التصميم المتجاوب”

  1. ali7amdi says:

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

  2. ali7amdi says:

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

  3. yassmin says:

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

  4. ahmadGamal says:

    ياريت عرض الشرح فى الصفحة يبقى بطريقة افضل من كدا , للاسف الانجليزى داخل على العربى

  5. Ahmed Breeka says:

    كلام جميل ومفيد جداً
    جزاك الله كل خير استاذ عمر

    في ملاحظة على تنسيق الكتابة : يا ريت تكون افضل من هيك لانو كل شي داخل على بعضه
    بس المادة المطروحة مفيدة جداً

  6. محمد says:

    جزاك الله خيرا

  7. Osama says:

    الله ينور يا هندسة ماشاء الله عليك
    وياريت يكون في مثال عملي

  8. alshaimaa hamdy says:

    جزاكم الله خيرا

  9. Amr Ali says:

    اوعدكم المرة الجاية حنسق كل ده المهم المحتوىانه يكون سهل ويقدر يوصل المعلومه

  10. shimaa saied says:

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

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

    وجزاكم الله كل خير

  11. lotfe eltokhy says:

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

  12. mohamed_mimo says:

    الف شكر على المجهود الكبير ده
    ولكن الافضل لو كان فيديو
    اسهل وافضل بكتير

  13. alialnaeem says:

    تشكر علي هذا المجهود الجبار ..

Leave a Reply to shimaa saied Cancel reply

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