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 & 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
بالتوفيق يا أستاذ عمرو بارك الله فيك
ربنا يخليك يهندسة وباذن الله حيكون فية مقالات كتير والموقع حيبقى مرجع لكل مصمم ومطور
السلام عليكم ورحمة الله وبركاته اولا جزاكم الله كل خير علي هدا العمل هل يمكن يكون في متال عملي علي الكلام دا كله
ياريت عرض الشرح فى الصفحة يبقى بطريقة افضل من كدا , للاسف الانجليزى داخل على العربى
كلام جميل ومفيد جداً
جزاك الله كل خير استاذ عمر
في ملاحظة على تنسيق الكتابة : يا ريت تكون افضل من هيك لانو كل شي داخل على بعضه
بس المادة المطروحة مفيدة جداً
جزاك الله خيرا
الله ينور يا هندسة ماشاء الله عليك
وياريت يكون في مثال عملي
جزاكم الله خيرا
اوعدكم المرة الجاية حنسق كل ده المهم المحتوىانه يكون سهل ويقدر يوصل المعلومه
السلام عليكم ورحمة الله وبركاته
جزاكم الله خيرا على وقتم ومجهودكم
لكن
لي رجاء من فضلكم
الشرح يكون تفصيلي أكتر وبشكل عملي ويكون التنسيق أفضل الكلام يكون منفصل عن الكود وفيه بعض الأجزاء صراحة غير مفهومة ولو حد مبتدئ ممكن حاجات تقع منه كتير
يفضل لو شرح فيديو وفيه عملي زي كورسات ليندا البسيطة كده خمس دقائق بخمس دقائق هيكون ممتاز
وجزاكم الله كل خير
لو سمحت ياريت الشرح يكون بالصوت والصورة لان الكلام بيخلى الواحد يتوه ^_^ وشكرا
الف شكر على المجهود الكبير ده
ولكن الافضل لو كان فيديو
اسهل وافضل بكتير
تشكر علي هذا المجهود الجبار ..