lecture1

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

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

ففي عنا هون سؤال، إيش بحكي؟ كريتين سايت إمبورتنت. يعني هل إنشاء موقع الويب مهم ولا لا؟ مين يجاوبنا على هذا السؤال ويحكي لي وين أهميته؟ يعني صراحة هذا من الأسئلة اللي بتيجينا كثير في المقابلات لما تروحوا تقابلوا في مجال الفرونت اند. بحكي لك هل إنشاء موقع الويب هل مهم؟ يعني لهي الدرجة؟ طبعاً نحن ه السؤال هذا حنربط فيه إنه أنا ليش بدي أتعلم مجال الفرونت اند؟ طالما أنا بدي أتعلم هذا المجال وهو مطلوب في سوق العمل، يبقى هو مهم إنه أنا أنشئ موقع ويب صح ولا لا؟

كثير ناس بتحكي لي طب ما هي السوشيال ميديا مليانة، فإنه لو أنا بدي أفتح بزنس مثلاً أو متجر خاص في، بإمكاني أروح أعمل صفحة على الفيس أو صفحة على الانستا وأصير أتبع فيها. صح أحسن ما أروح أنشئ موقع ويب أقعد فيه ثلاث شهور يكلفني مثلاً 1000 دولار والأمور هذه. فإيش رأيكم بهي النقطة؟ يعني هل مثلاً وجود الفيس، صفحة فيس أو صفحة انستا بتغنيني إني أنا أعمل ويب سايت للموقع تبعي ولا هذا مهم وهذا مهم؟ إيش رأيكم؟ خلينا نشارك بعض. تفضل.

ممتاز، هي شغلة. غيرها، تجربة المستخدم، تعامل إنسان، مثلاً تشغل على النت، أنت بتقدر تعمل مثلاً دفع معينة، منصة.

ممتاز، أحسن ما أنا عرف أروح أستنى صاحب الصفحة يرد علي مثلاً ويعطيني طرق الدفع ويعطيني رقم التواصل والأمور هذه. لا، كله بيكون موضح عندي على الويب سايت. تمام. غير لو في حد حابب يضيف شيء.

عندي مثلاً في أي صفحة فعملها، يعني ما تكونش مقيدة.

هي أنت قصدك عن فكرة المشروع نفسه؟

آه.

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

ممتاز. كل اللي حكيتوه كثير كويس. فالجواب بده يكون إنه آه، مهم جداً إنه أنا أنشئ أي موقع. فعشان هيك صراحة أي حدا بره صار يفكر في بزنس له أو متجر خاص فيه، أول حاجة بفكر فيها هو إنه يعمل الموقع تبعه أو التطبيق تبعه. بطلوا يروحوا مثلاً بدي أفتح متجر بروح بدور على الأثاث مثلاً أو على الملابس أو على الأمور. لا، أول حاجة بدور عليها إنه أنا أنشئ موقع الويب الخاص في. ليش؟ لأنه زي ما أنتم حكيتوا، بيسهل تجربة المستخدم. لو أنا مثلاً لنفرض إنه أنا عندي متجر وهذا المتجر في يوم من الأيام بدي أعمل عروض على الملابس اللي موجودة فيه. تمام. لو أنا كل اعتمادي على الفيس أو على الانستا، طب افرضي يوزر أو كلاينت مثلاً أجاى فتح التحديثات هذه بعد أسبوع مثلاً، فلو بعد أسبوع بده يشوف العروضات أنا عندي على الفيس، صفحة الفيس أو صفحة لسه في عندي كثير شغلات صارت في الأسبوع هذا، فممكن العرض تبعي ما يبين عنده، صح ولا لا؟ لكن لما يكون عارف إنه أنا في عندي موقع خاص في ويروح يفتح الموقع هذا، كل الأبديت الجديدة وكل التحديثات، خلص هو بس بيفتح على الموقع بيتصفح وبيكون شايف كل شيء. تمام. فهذه نوع من أحد أنواع اللي هي بتسهل تجربة المستخدم بالنسبة لي.

فإنشاء موقع الويب كثير مهم، عشان هيك مجال الفرونت اند صراحة مطلوب بشكل كثير كبير بسوق العمل. كمان صراحة في شغلة، سمعتوا أكيد عن الوورد بريس؟ صح ولا لا؟

مين بيعرف إيش هي الوورد بريس؟ إيش فكرتها؟

تصميم زي المواقع.

تمام، آه صح. تفضل.

ممتاز. أنا بقدر أسمع. شايفين الموقع الويب هذا مثلاً، هو هذا فرونت اند نحن مشتغلينه. بقدر أعمل شيء شبيه زيه باستخدام الوورد بريس. فكرة الوورد بريس بتحكي لي إنه أنا في عندي، بتعرفوا برنامج كانفا صح؟ برنامج كانفا عبارة عن قوالب جاهزة، بفوت على القالب بعدل عليها، بغير، بضيف، بحدث الأمور هذه، صح؟ نفس الفكرة في الوورد بريس. في عنده منصة اسمها وورد بريس، في منصة ثانية اسمها ويكس، إذا سمعتوا فيها. الاثنتين بيعملوا نفس الشيء. فكرتهم إنه عبارة عن موقع بقدم عروض خاصة أو قوالب خاصة بقدر من خلالها أضيف، أحذف، أعدل، أغير. بالآخر بيطلع لي بموقع ويب خاص. ولكن اللي بميز الفرونت اند عن الوورد بريس شغلات كثيرة. أول شغلة، إنه الوورد بريس بتتحمل مواقع كبيرة. أنا عندي موقع مثلاً من 20 صفحة، من 30 صفحة، الوورد بريس مش حتتحمل. الوورد بريس بتقول لك أنا بعمل لك على أد لبيج بسيطة، موقع من ثلاث أربع صفحات زي هيك. هي شغلة. الشغلة الثانية، نحن في مجال الفرونت اند، أي شكل بقدر أشوفه في التصميم بقدر أروح أطبقه عندي في الكود. لكن في الوورد بريس أنا مقيدة بشغلات معينة. بس علي أضيف نص عليها، أضيف صورة، الأمور هذه. ما بقدر أتحكم في الشكل نفسه. يعني مثلاً نحن في مرحلة معينة، بس أجيب قلم. في مرحلة معينة من من الكورس إن شاء الله حنصير نشوف مثلاً شكل بهذا الشكل، صورة مثلاً محطوطة بهذا الشكل زي هيك. أي شكل حتصيروا تشوفوه في في التصميم حتصيروا تكونوا قادرين عاملينه باستخدام الإنترنت. ليش؟ لأنه هول عبارة عن خصائص سي اس اس موجودة بقدر أستخدمها كين الشكل اللي أنا بدي إياه. لكن في الوورد بريس هذا الشيء مش موجود. في الوورد بريس شغلات جاهزة أنا بأخذها وبستخدمها بس. ما في فيها إني أقدر أتحكم في الشكل اللي أنا بدي إياه. تمام. عشان هيك بنرجع بنكرر، قد ما صارت السوشيال ميديا كويسة، قد ما طلع منصات بتعمل مواقع ويب، بتصمم مواقع ويب زي وورد بريس، زي ويكس، زي مش عارفة إيش، إلا إنه مجال الفرونت اند حيضل مطلوب. ليش؟ لأنه أنا في مجال الفرونت اند بقدر أتحكم في الشكل اللي أنا بدي إياه. بقدر أعمل للكلاينت أي شيء بخطر في باله في البرمجة.

في عندي هون بحكي لي فوندمنتالز أوف ويب سايت ديزاين أون ذا إنترنت. إيش هي أهم الأساسيات اللي موجودة في أي موقع ويب في الدنيا؟ عندي أربع شغلات مهمة. أول حاجة، الويب سايت نيم، اسم الموقع الويب تبعي. الويب سايت أدرس، اللي هو عنوان الموقع. السيرفر اللي أنا بحمل عليه ملفات الموقع تبعي، اللي هي اللوكال. الشغلة اللي بعدها، السيرفر اللي أنا بحمل عليه الملفات اللي مطلوبة من اليوزر. كيف يعني؟ لو جينا فتحنا على هذا الموقع مثلاً. تمام. دائماً دائماً اسم الموقع عبارة عن اللوجو تبعه، الشعار تبع الموقع. هذا هو الاسم تبعه. مثلاً عندي هذا الشعار اسمه. لو جيت فتحت على موقع أو مثلاً هي جمعية أمل. هذا الموقع هيه اسمه أمل. هيه اللوجو تبعه هو عبارة عن اسم الموقع تبعي. تمام. فهذا أول حاجة بتكون منها أي موقع ويب عندي اللي هو اسم الموقع. اسم الموقع بيكون عبارة عن اللوجو تبعه. في عنا بعد هيك الأدرس، عنوان الموقع، اللي هو عبارة عن اللينك، الرابط تبعه، اللي هو بيكون هذا. اتش تي تي بي، اتش تي تي بي إس، دبليو دبليو دبليو. هذا بيحكي عنه الأدرس. عنا هان هي الأدرس تبع هذا الموقع. إذا اسم الموقع، العنوان تبعه. الشغلة الثانية، السيرفر اللي أنا بحمل عليه ملفات الموقع. كيف يعني؟ هلقيت عنا ه اللوجو هذا عبارة عن صورة، صح ولا لا؟ في عندي الصورة تبعت السكشن الأول. لو جيت نزلت هان، هي صور. كيف هذول الصور انعرضوا عندي هون على الموقع؟ أنا بكون رافعاهم في ملف خاص فيهم اسمه إيجز، وباجي هذه الإيجز بستدعيها عن طريق تاج اسمه إيج، حنتعرف عليه اليوم. فبصير عندي معروضة. فهذا الملفات هذه أنا لما باجي برفع الموقع عندي، بكون في عندي السيرفر خاص فيها رافع عليه ملفات الموقع الموجود عندي. مش ضروري. لو أنا مثلاً موقع عبارة عن كتب أو عبارة عن مقالات وبدي أعرض هذا الكتاب أو هذا المقال للمستخدم، بكون رافعاه في ملف خاص فيه عشان أعرضه، بكون مستدعياه في تاج خاص فيه. مثلاً عنا ال ال الكتب عبارة عن ملفات بستبدعيها عن طريق تاج اسمه إنبت أو تاج اسمه آي فريم، حنأخذها. مثلاً عندي صوت، هذا الموقع بيعرض موسيقى معينة، في عندي تاج اسمه أوديو بيعرض لي إياه. الموقع هذا عندي بعرض فيديو، في عندي تاج اسمه فيديو. فكل هذه الملتيميديا أو هذه الوسائط أنا بعرضها على المستخدم. أول شيء بكون حطاها في ملف خاص فيها، في فولدر خاص فيها، بعد هيك برفعها على سيرفر خاص فيها. هذا شغل السيرفر والأمور هذه شغل مبرمج الباك اند، مش أنت. ف أي شيء بعرضه عندي هون على الموقع، أنتم هان شايفينه، بكون لها مكان مخصص فيها ملفات ومجلدات مخصصة فيها، زائد إنه في لها سيرفر خاص. النقطة الرابعة اللي كانت موجودة هون إنه بحكي لي الويب سايت اللي بيخلي اليوزر يرفع عليه ملف. كيف يعني؟ كثير بنفتح مواقع بكون مثلاً طالب مني أحمل السي في تبعتي، أحمل الملف تبعتي. هذه ملفات مطلوبة من اليوزر. أنا كمستخدم مطلوب مني إني أعمل أبلود، أرفع الملفات هذه، صح ولا لا؟ لما أجي أرفعها، ما بصير التخزين لها في نفس المكان اللي معروض فيها الصور والفيديوهات والأمور هذه الموجودة هان على الويب. لا، بيكون لها السيرفر خاص فيها. تمام. طيب ليش هذا الشيء نحن بنعمله؟ ليش أنا عاملة سيرفر لتحميل الملفات وسيرفر لعرض الملفات؟ مين عنده خلفية؟

هلقيت لو أنا حطاهم كلهم في سيرفر واحد. تخيلوا إنه أنا الملف اللي أنا كيوزر بدي أرفعه على الموقع تبعي كبير. لفرض إنه كبير وجيت وأنا هون بتصفح في الموقع، حيصير عندي عملية الابلود ثقيلة شوية. فبالتالي مش حيظهر كل صورة في المكان تبعها. حيصير يظهر لي شيء أبيض وبعد ما أنزل في الموقع تبعها وأرجع مرة ثانية حيظهر. ليش؟ لأنه عملية اللودينغ، التحميل، أخذت وقت مني. لأنه هي بدها تحمل ملفات الموقع، بدها تحمل الملفات اللي رفعها المستخدم. صح ولا لا؟ فعشان ما يصير هذا اللبس، نحن دائماً بنكون عاملين سيرفر لرفع الملفات وسيرفر لعرض الملفات اللي هي أوريدي مطلوبة مني عندي في الموقع. هذا. تمام. إذا أربع شغلات أساسية ومهمة عندي في أي موقع ويب: اسم الموقع، الأدرس، العرو عبارة عن رابط الموقع، الملفات اللي بعرض عليها اللي هي عبارة عن ملفات الموقع نفسه من صور، فيديوهات، من صوت، أي شيء. الشغلة الرابعة، إذا أنا كان الموقع طالب مني أنا كيوزر أرفع ملفات، فبتكون محطوطة في سيرفر خاص فيها لحتى الآن الأمور تمام. مين عنده سؤال أو استصعب من الشيء؟ تمام.

طيب نيجي هان حكي لي إيش هي الفيتشرز، المميزات اللي لازم تكون موجودة في موقع الويب تبعي وهي اللي حتميزني عن أي موقع ويب صراحة. دائماً لما تشوف مواقع ويب للوهلة الأولى بيبين الموقع هل اللي مصممه محترف ولا عادي ولا متوسط ولا يعني المستوى تبعه. بناءً على إيش نحن بنعرف هذا الشيء؟ بناءً على ثلاث شغلات مهمة لازم تكون موجودة في موقع الويب تبعي. أول حاجة، مين يقرأ لنا إياها؟ بين عندكم باينة؟

طيب، يلا مين يقرأها؟

ممتاز. سهولة ووضوح التصميم والمحتوى اللي أنا بدي أحطه في التصميم. وهي شغلة صراحة مهمة وكثير بنشوف هذا الكلام في مواقع الإنجلش. بتلاقي الكونتنت اللي مكتوب مش مفهوم. اليوزر بيجي بقراه مش مفهوم. ليش؟ لأنه دائماً بروحوا بيستخدموا ترجمة حرفية. وهذا الشيء مش صح إني أستخدم خدمة في الموقع تبعي ترجمة حرفية. تمام؟ لأنه كثير بيكون عندي المعنى اللي أنا بقصده مش نفس المعنى اللي بتعطيني إياه الترجمة. صح ولا لا؟ فهل بدنا ننتبه لشغلة مهمة إنه أنا لما أجي أعمل المو العربي، أوك مش مختلفين عليه. بس في مواقع الإنجلش ماخذ ترجمة حرفية أنا أترجم فيه. عشان هيك ظهر عنا كتاب المحتوى، إذا أكيد بتعرفوا هذا الشيء، صح؟ الكونتنت رايتر، كاتبة المحتوى. إيش فائدة كاتبة المحتوى؟ زي هيك بدي أعمل بوست، بدي أعمل موقع، بدي أعمل تطبيق. أول شيء بروحوا بيعملوه إنه بيجهزوا لنا المحتوى تبع هذا الموقع. تمام. فهي الشغلة بدنا ننتبه لها. طبعاً أنتم كفرونت اند حيجيكم يفترض الموقع جاهز من اليو إكس يو آي في الديزاين تبعه جاهز في الكونتن تبعه. بس عليكم أنتم تحولوا هذا التصميم إلى كود باستخدام ديفرنت.

الشغلة اللي بعدها بحكي لي إيز أوف براوزينغ ديورينغ ذا سايت. وهي شغلة كثير مهمة إنه أنا وأنا شغالة شغالة في الموقع تبعي يكون عندي سهولة التصفح. كيف يعني؟ يعني لو أنا شغالة هذا طول ما أنا عاملة سكرول، إذا بتلاحظوا فش أشياء طالعة، فش أشياء نازلة. كل شيء بيظهر في المكان الخاص فيه. ما في شيء أبيض عندي ظاهر في الموقع. صح ولا لا؟ فهذا بنحكي عنه سهولة التصفح. كمان شغلة نحن حنأخذ لقدام اللي هو موضوع الأنيميشن. في ناس بتفكر إنه كثرة الأنيميشن عشان في الموقع عندي شيء كثير كويس. وهذا لا، مش شيء صعب. بيكونوا بيكونوا مستخدمين أنيميشن. بتلاقيهم على الصورة أنيميشن، على الكتابة أنيميشن، على الزر أنيميشن. فبتصيروا وأنتم بتتصفحوا هيك، كله أنيميشن بيظهر عندكم. فللأمانة بيضرب الموقع تبعنا. عشان هيك نحن بدنا نكون عارفين الشيء اللي أنا بدي أستخدمه وين أستخدمه في المكان تبعه. وهذا الشيء حيجي بالممارسة. مش كل شيء أنا بتعلمه أروح أطبقه عندي في الموقع. لا، حسب إيش بشوف شيء مناسب لي بستخدمه. فعشان هيك افترض أنا بتصفح في الموقع زي ما أنتم شايفين، أول حاجة كل شيء ظاهرة في المكان تبعها. ما في عندي موضوع الأنيميشن كثير. اختياري للصور تكون مناسبة للموقع اللي أنا بدي أعمله. يعني مثلاً بنكون موقع تعليمي، بتلاقي الصورة لونها أصفر، لونها أحمر، مش عارفة إيش. لا، نحن لازم ننتبه لهذه النقطة. تمام. حأعطيكم لقدام أفضل مواقع أنكم تختاروا منها الصور. ولازم لما أنا أجي أختار الصور تكون صور مناسبة لألوان اللوجو تبعي، لألوان الموقع اللي أنا شغالة فيه. بيجي سؤال في المقابلات بنسأله كثير. كم لون عندي أستخدم في الموقع؟ يعني أنا شغالة في موقع ويب، كم لون أستخدم؟ 10؟ 20؟ إيش رأيكم؟

قربت.

لا.

ثلاثة. ثلاث ألوان مسموح لي أستخدم في الموقع. اثنين رئيسي وواحد ثانوي. يعني الثالث اللي بنحكي عنه ثانوي بستخدمه في مواقع بس، يعني في أماكن بسيطة أنا بستخدمها. كيف يعني؟ مثلاً اطلعوا على هذا الموقع. هي ألوان اللوجو عندي الكحلي، الأزرق الفاتح، الأزرق الغامق. وفي شوية أخضر وشوية أحمر، صح؟ اطلعوا لي على الموقع. حتلاقوا الألوان الأساسية فيه اللي هم اثنين، اللي هو هذا اللون الكحلي وهذا اللون الأزرق. طبعاً الأبيض والأسود بنستثنيهم، ما بنعتبرهم من ألوان الموقع لأنه لازم نستخدم أبيض وأسود في موضوع الكتابة حسب الديزاين تبعنا. تمام. هلا انزلوا، اطلعوا. هي استخدمنا هون أزرق فاتح، هون أزرق غامق، أزرق فاتح. هذا أسود، ما في مشكلة. نفس الحاجة الأخضر والأحمر. شفتوا إن استخدمناهم؟ طبعاً هذا الموقع من شغلنا. تمام. وين استخدمنا الأخضر والأحمر في موضوع الألوان؟ في الاختيار الصور. هي شغلة مهمة. ما رحت جبت صورة صفراء، صورة مش عارفة إيش. لا، تكون صور مناسبة لألوان الموقع. حتى إذا بتلاحظوا الألوان اللي هنا برضه كحلي، أزرق، اللي هي الألوان تبعت الموقع تبعي. تمام. فهي الشغلة اللي انتبه كثير لها. كثير بنفوت مواقع بتلاقي فيها يعني اللون اللي بدك إياه بتلاقيه موجود في الموقع. فلا، نحن بدنا نعتمد ثلاث ألوان. اثنين أساسي وواحد ثانوي. يعني أنا ممكن هذا الواحد أستخدمه مرة، مرتين، ثلاثة بالموقع. ممكن كمان ما أستخدمه غير مرة واحدة. فكثرة الألوان مش شيء كويس في الموقع. عشان هيك ه بحكي لي إنه يكون عندي الشيء متجانس.

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

نيجي لشغلة مهمة وكثير بنسأل فيها في المقابلات. إيش هي أنواع الويب سايت؟ أحكي لي هون الويب سايت تايتل تايبس. إيش هي أنواع الويب سايت؟ في عندنا نوعين. نوع بنحكي عنه ستاتيك ويب سايت ونوع بنحكي عنه دايناميك ويب سايت. حدا بيعرف إيش الستاتيك وإيش الويب والدايناميك وإيش الفرق بينهم؟

يمكن في حالات بس، يعني حاجات موجودة.

ممتاز. مثلاً تشغيل.

ممتاز. ممتاز. غيره. حاجاتك يعني عبارة عن.

ممتاز.

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

المرحلة الأولى. المرحلة الأولى اللي هي مرحلة اليو إكس يو آي.

المرحلة الثانية. مرحلة الفرونت اند.

المرحلة الثالثة. اللي هي مرحلة الباك اند.

طبعاً ما حد يدقق على الخط حلو، بس تمام.

طيب، إذا عندي مراحل الموقع ثلاثة: يو إكس يو آي، فرونت اند، باك اند. حدا عنده خلفية عنهم؟ أحكي لنا هيك سريعاً إيش الفكرة تبعتهم؟

تمام. في مرحلة اليو إكس يو آي بصير عندي عملية تحليل للموقع تبعي. أشوف الموقع هذا كيف الواجهات تبعته. إيش يعني يو إكس يو آي؟ يوزر إكسبيرينس، يوزر إنترفيس، صح ولا لا؟ شو يعني أنا كمصمم يو إكس يو آي؟ بيجي حدا بيطلب مني بدي موقع مثلاً لعرض الملابس، بدي إياه متكون من صفحة رئيسية وصفحة صفحة الأباوت أس مثلاً وصفحة الكونتاكت أس وصفحة لعرض البرودكتس، المنتجات. بهي التفاصيل اللي بيعطيني إياها، بروح أنا كيو إكس يو آي بروح أول حاجة بشوف مين المواقع المنافسة للموقع اللي هو بده إياه. بدي أتطلع على مواقع بتعرض نفس المنتج تبعه، موقع ملابس عشان آخذ أفكار منها. تمام. بروح بعمل هذا الشيء يا إما حوار أو قلم، يا إما نحكي عنه السكيتش أب، إنّي أرسم أي واجهات. سكتش أب بتكون إيش الفكرة منها؟ إنه أنا أحكي والله هي الصفحة الرئيسية، بدي أحط فيها معلومات عن المتجر، بدي أعرض لي كم صورة في المتجر، أحط اللوجو مثلاً، وبكون حاطة كل واحدة في المكان تبعها. مثلاً باجي بحكي والله هي الصفحة عندي زي هيك، بدي أعرض اللوجو هون، بدي أعمل هون زر ساين أب، وعدي أعمل هون زر اسمه مثلاً لوج إن، تسجيل دخول. بدي أحط هون هيك صور للمتجر. بعدين بحكي بدي أعمل صفحة ثانية، أباوت أس، أو ممكن تكون في نفس الصفحة. بدي أكتب هون معلومات عن المتجر، أحط صورة هان وصورة هان زي هيك. بصير أحدد شو الصفحة مكوناتها وكل مكون من الصفحة وين أنا أكون عارضها. بعدين بورجيه للفلاينت. إيش رأيك في الواجهات كسكتش أب أو كمش ورق؟ والله قالي الأمور تمام. بروح بحولها ليوزر إنترفيس، إنه أنا أروح أرسمها على برنامج إكس دي أو فيجما. ولكن أحسن شيء لحتى الآن هو استخدام الفيجما. مع إنه في في ناس لحتى الآن مصمميني يو إكس يو آي بيستخدموا الإكس دي. وهذا الشيء مش صح. أنا لو أنا بدي أحكي عن حالي يو إكس يو آي محترفة وبستخدم الإكس دي، هذا الكلام مش صح. البرنامج المعتمد لتصميم اليو إكس يو آي الفيجما. إيش بصير في اليو إكس يو آي؟ قلنا عملية تحليل للموقع، أفهم إيش الصفحات الرئيسية الموجودة عندي في الموقع، كل صفحة إيش الصور اللي بدي أحطها، إيش المحتوى اللي بدي أحطه، الزر هذا وين بدي أعرضه مثلاً، الصورة هذه وين بدي أعرضها. بيجيني هذه الأمور جاهزة من اليو.

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

ممتاز. أي شيء بشوفه في الموقع هيك، طول ما أنا بتصفح فيه. يعني اللوجو هذا، الرابط هذا، الزر هذا، الصورة هذه، الكلام هذا، الصور. بحكي عنه فرونت اند. أي شيء بشوفه المستخدم في الموقع بنحكي عنه فرونت اند. طيب وين الباك اند؟ الباك اند اللي هي العمليات البرمجية بداخل الموقع. كيف يعني؟ مثلاً في عندي هون فورم تسجيل. لما أنا أجي أحط التسجيل هذا تمام وأجي أعمل سنت، ويجيني مسج مثلاً تم إرسال الرسالة بنجاح أو الأمور هذه، وأنا بعثت عملت ريكويست. هذا شغل مبرمج الباك اند. إيش يعني؟ أنا كفرونت اند بكون وظيفتي نعمل الديزاين، أصمم هذا الإنبت وهذا والإنبت هذا والمربع هذا، التكست أريا، طبعاً هذا كله حنأخذه. وأصمم البوتون هذا وأحط فيه الكلام والديزاين وكل هذه الأمور. بمجرد ما عملت سنت، هذا بيكون شغل مبرمج الباك اند. إيش بيعمل الباك اند؟ إنه بحكي لي خذي الداتا من كل إنبت موجودة هون، ولما بمجرد ما تعملي لها السند، بصير إرسال في الداتابيز وتخزينها. الأدمن تبع هذا الموقع حيشوف الرسالة اللي أنا بعثتها. في عنا حاجة اسمها داشبورد، لوحة التحكم. أي شيء أنا بعمله على الموقع بيصل للوحة التحكم اللي هو بيكون مسؤول عنها الأدمن. و يعني لو أنا عملت سنت، أن حيجي صاحب الموقع يرسلني على الإيميل تبعي اللي حطيت هون ويحكي لي إيش بدك والأمور هذه. تمام. فهذا شغل مبرمج الباك اند. كمان لما بعمل ساين إن، تسجيل دخول. لما بعمل الساين أب، لما بيجيني مثلاً إنشاء الحساب، حطي اسمك، كلمة المرور مثلاً، الإيميل تبعك، الأمور هذه، وبعمل عمل ساين أب، إنشاء حساب، وبصير لي يوزر خاص في باسم خاص فيها والأمور هذه. لما باجي بعمل مثلاً لوجن، تسجيل دخول، بطلب مني المعلومات كلها من أول وجديد، صح ولا لا؟ بس اسم المستخدم وكلمة المرور، أو الإيميل تبعي وكلمة المرور. طيب بناءً على إيش عمل هذا الشيء؟ بناءً على مبرمج الباك اند بيكون أخذ البيانات هذه حفظها على الداتابيز وحكى له إنه لما يجي يرجع يفوت مرة ثانية، بس أطلب منه اسم المستخدم أو الإيميل مثلاً وكلمة المرور وأعمل عمل مطابقة للبيانات المحفوظة أوريدي في الداتابيز. إذا اوكي، اعمل له تسجيل دخول. إذا مش اوكي، بيجيني إنه المعلومات غلط، صح ولا لا؟ بيجيني واجهة هل نصيب كلمة المرور أو هل بدك تغيير كلمة كلمة المرور. كل هذه الأمور شغل مبرمج الباك اند. نحن كفرونت مطلوب منا اللي هو عملية الديزاين. هذا شغل ديزاين. تمام. هذا شغل فرونت اند.

فاللي كنا بدنا نحكيه إنه إيش يعني ستاتيك ويب سايت؟ إيش يعني دايناميك ويب سايت؟ بحكي لي إذا الموقع اللي أنت بتتصفحيه بس في شغلات للعرض، يعني بس في صور، بس في محتوى، بس بنحكي عنه ستاتيك ويب سايت. ليش؟ لأنه هو زي فكرة مين؟ فكرة المواقع التعريفية. لو أنا عندي متجر أو عندي شركة مثلاً وبدي أعمل لها موقع تعريفي بس أعرض فيها صور، أعرض الأباوت أس، أعرض فيها شوية محتوى. هذا بنحكي عنه ستاتيك ويب سايت. لكن إذا الموقع في إنشاء حساب، وفي عملية الفورم مثلاً، في إنه طالب من المستخدم تحميل كذا، تنزيل كذا. هذا بنحكي عنه دايناميك. ليش؟ لأنه صار في عندي تفاعل ما بين اليوزر وما بين الموقع نفسه. طلب منه معلومات مثلاً في الفورم، طلب منه معلومات في لوجن، في تغيير كلمة المرور، الأمور هذه بنحكي عنها دايناميك. هذا أول شغلة إنه يعني كمثال مثلاً أوريكم بغلص سريع. لو تطلع اطلعنا على هذا الموقع اللي هو أوتيل. عبارة عن موقع مكون من ثلاث صفحات. هي في الصفحة الرئيسية ما في أي حاجة محتوى، بس محتوى وصورة. هي صفحة الأباوت، محتوى وصورة. فهذا بنحكي عنه ستاتيك ويب سايت. هل في شفتوا إنشاء حساب، تغيير كلمة مرور، عبر فورم، أرسل، أعمل؟ إيش؟ لا. هذا بيحكي عنه ستاتيك ويب سايت. لكن دايناميك ويب سايت زي اللي تو شفناه إنه بيكون طالب، طالب مني إنشاء حساب، تغيير كلمة، أي شيء في تفاعل ما بين اليوزر والمستخدم بنحكي عنه دايناميك ويب سايت. هذا كأول تعريف أو أول فرق بين الستاتيك ويب سايت والدايناميك ويب سايت.

الشغلة الثانية، بما إنه أنا بحكيت ستاتيك ويب سايت ما فيش فيه تفاعل، ما فيش فيه تحميل، تنزيل، مش عارفة إيش، يبقى هل بحتاج مني سيرفر كبير ولا سيرفر صغير؟

سيرفر. ممتاز. السيرفر اللي موجود فيه صغير حيكون. لكن لما يكون دايناميك، أنا في عندي ملفات بدي أحملها، في عندي ملفات بدي أعرضها. فبالتالي بحتاج إنه يكون عندي السيرفر قوي يتحمل هذه الأشياء. ففي الستاتيك بحتاج بس اللوكال سيرفر. في الدايناميك بحتاج اللوكال سيرفر وبحتاج السيرفر اللي أنا بدي أرفع عليه الملفات المكتوبة من اليوزر. تمام. بما إنه بحكي في سيرفر وفي تحميل وفي كل هالأمور، برايكم في الستاتيك عملية اللودينغ، التحميل، حتكون أسرع ولا أبطأ؟

ممتاز. أسرع. ليش؟ لأنه ما في فيها شيء، على طول حينعرض الأشياء عندي وحتتحمل. لكن في الدايناميك عملية اللودينغ حتاخذ مني شوية وقت، فبتكون أبطأ شوية من الستاتيك ويب سايت. طيب موضوع الداتابيز، قاعدة البيانات. هل بحتاج في الستاتيك ويب سايت داتابيز، قاعدة بيانات؟ لا. ما في شيء المستخدم أصلاً يرسله عشان تتخزن عندي في الداتابيز وتنعرف. لكن في الدايناميك ويب سايت حيكون في عندي داتابيز. تمام. يبقى هذا الفرق ما بين الستاتيك ويب سايت والدايناميك ويب سايت. سريعا في دقيقة، مين يحكي لي إيش الفرق بينهم؟

أيه. ما حكينا شيء.

لسه.

إيش؟

لا. ليش؟ ليش تخافوا؟ يلا من مين نسمع؟

يلا يا جماعة.

ستاتيك بس اللي بتتكون من هو موجود. يعني زي مثلاً صفحة.

ممتاز. موقع تعريفي.

لاندينغ. في حتاج مثلاً قائم بيانات. حيكون في نماذج زي هيك.

ممتاز.

غيره. إيش حكينا كمان الفرق بين الستاتيك والدايناميك؟

أفضل.

تمام.

ممتاز. الو. ما إنك حكيت عن السيرفر، يبقى نحكي عن موضوع اللودينغ. مين أسرع في التحميل؟

ممتاز. طيب بالداتابيز هل بحتاج الداتابيز له بالستاتيك؟ لا. ممتاز. فحتى الآن أموركم تمام.

نيجي ننا تو قلنا هون إنه أنا أي مرحلة موقع عندي ححتاج ليو إكس يو آي، ححتاج لفرونت اند، ححتاج لباك اند. وضحنا إنه اليو إكس يو آي هي من خلالها أنا بعمل تحليل لتجربة المستخدم، بشوف مين هي الصفحات الرئيسية اللي أنا بدي أستخدمها، كل صفحة إيش الكونتنت وإيش الصور اللي أنا بدي أعرضها والمكان تبعها. وقلنا البرنامج اللي أنا بستخدمه هو برنامج الفيجما. نيجي هلقيت نفوت على مرحلة الفرونت اند. بمرحلة الفرونت اند اللي هي عبارة عن التصميم اللي أنا بدي أحول اليو إكس يو آي إلى كود فيه. تمام. بحتاج فيه أربع لغات برمجية أساسية وهي اللي حتعلمها إن شاء الله في الكورس تبعنا. اللي هي: إتش تي إم إل، سي إس إس، جافا سكريبت. مش بوت ستراب. خليني أحكي اللي هو موضوع الريسبونسف ديزاين. لأنه ظهر عنا أكثر من طريقة بقدر أستخدمها في موضوع الريسبونسف ديزاين. تمام. نيجي أول حاجة للاتش تي إم إل. إيش يعني إتش تي إم إل؟ أول حاجة بدي أعرفه. ف بدنا نعرفها إنه الاتش تي إم إل اختصار لكلمة. مين بيعرف؟

ممتاز.

أول حاجة بدنا نحكيها إنه الاتش تي إم إل اختصار لكلمة هايبر تكست مارك أب لانجوج. شو يعني؟ لو أنا بدي أترجمها ترجمة حرفية بحكي لي معناتها لغة تلميذ النص التشعبي. بس مش هذا الشيء اللي أنا بدي إياه. بيحكي لي فكرة الاتش تي إم إل. نحن تو قلنا إنه أي شيء أنا بشوفه في الموقع تبعي، سواء زر، صورة، أي نص معين، الفورم التسجيل هذا اللي شفناه، مربع الإدخال اللي كان موجود فيه، هو أصلاً عبارة عن تاج إتش تي إم إل. تمام. عبارة عن تاج إتش تي إم إل في البداية. فعشان هيك بحكي لي إنه الاتش تي إم إل أصلاً نحن غلط نحكي عنها لغة برمجة. ليش؟ لأنه هي عبارة عن أساس بناء أي صفحة ويب. ما بقدر أنشئ أي صفحة ويب بدون الاتش تي إم إل. بقدر أنشئ أي صفحة ويب أو أي موقع ويب بدون إني أنا أستخدم الاتش تي إم إل. عشان هيك بحكي لي إنه الاتش تي إم إل هي أساس بناء أي صفحة ويب. إيش هي فكرتها؟ إنه موجود بداخلها تاجات أو عناصر بنحكي عنهم. من خلالها أنا بقدر أمشي صفحة الويب. أنا صفحة الويب عندي فيها صورة، فيها نص، فيها زر، فيها مثلاً فورمة تسجيل، فيها صوت، فيها كتاب بي دي إف، فيها ملف، فيها مش عارفة إيش. كل شيء، الأيقونة مثلاً، كل شيء أنا بدي أنشئه في صفحة الويب تبعتي عبارة عن تاج إتش تي إم إل أنا بضيفه في هذه الصفحة. بقدر من خلالها أنشئ صفحة الويب تبعتي. فاللي بدنا نعرفه في الاتش تي إم إل شغلتين: الاختصار هايبر تكست مارك أب لانجوج، وإنه هي أساس بناء أي صفحة ويب مكونة من تاجات أو عناصر بقدر من خلالها أنشئ صفحة الويب تبعتي.

اللغة ثانية اسمها سي إس إس. السي إس إس بحكي لي اختصار لكلمة. حد بيعرف؟

كاسكيدينج.

ستايل شيت. شو يعني كاسكيدينج ستايل شيت؟ أنا لو بدي أجي أترجمها ترجمة حرفية بحكي لي معناتها مغنطة أوراق أنماط متتالية. بس مش هذا الشيء اللي نحن بدنا إياه. بحكي لي من خلال السي إس إس أنا بقدر أي شكل من الأشياء اللي أنا بشوفها في التصميم أروح أعملها. يعني كمثال اطلعوا لي هنا على هذا الموقع مثلاً. هذا الموقع شايفين فكرة الصورة هذه؟

هذه من خلال السي إس إس. حنأخذ كبشة خصائص أقدر من خلالها أتحكم في الشكل اللي أنا بدي إياه. مثلاً الشكل هذا مش مربع بالضبط، في عندي زوايا لهم مضبوط. أي مثلاً شكل الدائرة هذه، هذه برضه بنعملها من خلال سي إس إس. بالشكل هذا مربع وفي بداخله الألوان هيك، بعدين صار تدرج للون إذا بتلاحظوا، وبعدين حطيت فيه الشكل هذا. برضه هذا كله شغل سي إس إس. ممتاز. لو أطلعت على هذا الموقع مثلاً، شايفين هذا تحريك ك اللوجو؟ برضه هذا شغل سي إس إس. في عندي شكل الصور هون إنه معروضين هيك جنب بعض. كل هي الأشياء إن شاء الله حنشوف خصائص في السي إس إس أقدر من خلالها أتحكم في الشكل اللي أنا بدي إياه. فالسي إس إس بتحكي لي إنه أنا بقدم إني أتحكم في الخطوط، في النص، في الألوان، في الأش، الأش، الأشكال. عشان هيك المرة اللي فاتت قلت لكم إنه الكم الكبير من الكورس تبعنا حيكون سي إس إس. لأنه في كثير خصائص وفي كثير خصائص كمان جديدة نحن حنأخذها. هي الخصائص الجديدة خلتني أستغني عن كود ممكن يوم ولا يومين يأخذ من وقتي. اجت عندي خاصية بسيطة في السي إس إس بتخليني أعمل هذا الكلام. تمام. فالسي إس إس عبارة عن خصائص بقدر من خلالها أتحكم في الألوان، في الخطوط، في النصوص، في الصور، في الأشكال، في ترتيب العناصر، في توزيعهم على الصفحة. كيف يعني؟ يعني اللينكات هذه جاية جنب بعض، صح ولا لا؟ ممكن أنا في وقت معين أحتاج إنهم يجوا تحت بعض على الريسبونسف ديزاين مثلاً. على الجوال، شاشة الجوال صغيرة، ما بدي أخليهم جنب بعض، بدي أخليهم تحت بعض. صح؟ عندي هون معروضة اثنتين اثنتين. بدي لما أتحكم فيها على الجوال، هي شكل جوال، يصيروا العناصر زي ما أنتم شايفين تحت بعض. صح ولا لا؟ ففر، فبرضه ترتيب الصفحة وتوزيع العناصر فيها بيكون عن طريق ال السي إس إس.

نيجي بعدك للجي إس. الجافا سكريبت. إيش بتعرفوا عن الجافا سكريبت؟ إيش بتعرفوا؟

ممتاز.

الجافا سكريبت أنا من خلالها بقدر أعمل تفاعل ما بين اليوزر والموقع تبعي. كيف يعني؟ توي شفت لما كنت أعمل ساين، تمام، تسجيل دخول. هلقيت أنا كيوزر، كفرونت اند، بيكون مطلوب مني الديزاين هذا. وشايفين هذه الدائرة؟ لما أضغط عليها بيظهر الباسورد عندي. هيه. تمام. برفع العيب، بروح الباسورد. هذا عبارة عن شغل جي إس بكون مطلوب مني كفرونت اند. تمام. ف أي شيء تفاعل ما بين اليوزر والموقع تبعي عبارة عن جي إس. اللي هو موضوع كلمة المرور، موضوع إنشاء الحساب، أي موضوع عملية تسجيل الدخول، جي إس. بالإضافة لموضوع الإيفنتس، الأحداث. هلا أنا كيف ظهرت عندي هذه الواجهة؟ مش لما ضغطت على زر الساين إن هي ظهرت؟ عملية الضغطة هذه بنحكي عنها إيفنت. إنه أنا كمستخدم عملت الضغطة ها، صار عندي تفاعل ما بين الموقع والمستخدم، ظهرت عندي هذه الواجهة. فموضوع الإيفنت كمان. المرة اللي فاتت قلنا على موضوع اللوك ستورج والسيشن ستورج، صح ولا لا؟ مين يذكرنا إيش كانت فكرة اللوكال ستورج والسيشن ستورج؟ حكيت لكم إنه أحياناً أنا بكون بعبي الفورم تبعي، بطلع من الموقع، أو النت كان ضعيف مثلاً، والبيانات هذه إذا ما كانت محفوظة وأنا كمستخدم بدي أرجع أحط البيانات هذه مرة من أول وجديد. هذا الشيء ممل بالنسبة للمستخدم، صح ولا لا؟ هو كل، يعني أحياناً بالنسبة لي لو كل موقع بدي أفوت بدي أعبي البيانات من أول وجديد، بحكي بدي أعبي له مضبوط. ممكن هي البيانات تأخذ من وقتي نص ساعة وأنا بعبيها. لكن لو عملت فكرة اللوكال ستورج والسيشن ستورج، إنه أنا خزنت البيانات هذه اللي المستخدم بيكتبها عنده على الفورم وخليته في كل مرة هو بفوت لنفس الموقع، البيانات تبعته محفوظة وياخذها. بس هيك أسهل بالنسبة له من إنه هو يروح يعبيها في كل مرة. ففكرة اللوكال ستورج والسيشن ستورج هذه برضه عبارة عن شغل جافا سكريبت. ها الأمور كلها إن شاء الله حنأخذها. موضوع التايمر برضه. التو اطلعوا التحميل هذا ثواني، صح ولا لا؟ لو أنا كمستخدم بدي أخليه يحمل خمس دقائق، مش منطق، صح ولا لا؟ الموقع عندي حيصير بمل إني أنا أستناه خمس دقائق يحمل. فموضوع اللودينغ هذا حنأخذ ميثود له بتتعامل فيه اسمها ست تايم أوت، ست إنتيرفال، كلير تايم أوت، كلير إنتيرفال. برضه من خلالها أنا بقدر أتحكم في عملية الوقت. يعني التايمينغ تبع التحميل اللي موجود بالنسبة لي. ف الجي إس باختصار، من خلالها بقدر أعمل تفاعل ما بين اليوزر وما بين الموقع تبعي، أتحكم في الإيفنت، أتحكم في عملية الوقت تبعهم، زائد إنه أنا أتحكم في أي عمليات إدخال موجودة عندي في الموقع تبعي. لحتى الآن.

الأمور تمام، مين شايف اللي بنحكيه صعب أكمل؟ ممتاز، نيجي لموضوع الريسبونسف ديزاين. لو شفتوا الحركة هذه اللي عملتها، إني صغرت الشاشة هيك، لاحظتوا إنه في شغلات على الموقع اختلفت عندي. زي إيش مثلا؟ اللينكات هذول اللي موجودين، لما بصغر بظهر لي قائمة، لما بضغط عليها بيظهروا لي. هي شغلة. شغلة ثانية اللي هو الصورة اللي هون، كانوا عندي على نفس السطر صاروا تحت بعض لأنه في عندي مساحة كافية ينعرضوا على نفس السطر. نفس الشيء نظام الكردات هذه، كل كارد صار معروض في صف لحاله. الفوتر عندي آخر واحد برضه صار محطوط تحت بعض. لو جيت بدي أكبر الشاشة جنب بعض، هذا بنحكي عنه ريسبونسف ديزاين.

في الريسبونسف ديزاين، لما نوصل له حنتعامل مع ثلاث أنواع أو ثلاث مقاسات للشاشات. عنا شاشة صغيرة زي هيك، شاشة جوال. لما ببسط هيك، هذه بنحكي عنها شاشة وسط. شوفوا كيف الفوتر صار فيها. الشاشة الوسط اللي هي زي مين؟ شاشات وسط الأيباد والتابلت، صح ولا لا؟ وعندي شاشة كبيرة اللي هي البي سي أو اللاب توب بهذا الشكل. ففكرة الريسبونسف ديزاين إنه أنا التصميم تبعي عشان يكون عندي مرتب، في عندي بعض العناصر اللي بحتاج إنه ما تكون معروضة بنفس الطريقة على الجوال وعلى الأيباد وعلى اللاب توب. بحتاج إنه أنا أغير فيها وأعدل فيها حسب التصميم اللي موجود معي، بحيث إنه يكون عندي شكل الموقع تبعي مرتب، معروض كل واحد في المكان الصح تبعه. مين عنده سؤال لحتى الآن؟ تمام.

هذول هم بشكل عام. طبعاً إحنا في الريسبونسف ديزاين كيف حأعمل الموقع ريسبونسف ديزاين؟ في عندي ثلاث طرق حناخذها: ميديا كويري باستخدام السي اس اس، حناخذ البوت ستراب، وحناخذ التيلود. حناخذ الثلاثة اللي بيخلوا لي الموقع عندي ريسبونسبل. تمام. خذوا بريك خمس دقائق بعدين عشان إن شاء الله نفوت في أي أول حاجة اللي هو في موضوع الاتش تي ام ال. تمام؟

أول حاجة بدنا ناخذها اللي هو موضوع الاتش تي ام ال. قلنا الاتش تي ام ال اختصار لهايبر تكست مارك أب لانجويج. قلنا الاتش تي ام ال عبارة عن اتش تي ام ال تاجز أو اتش تي ام ال المنتس بنحكي عنهم، لهم ثلاث أسماء: عناصر أو تاجات أو وسم. إيش فكرتها؟ إنه هي عبارة عن التاجات اللي أنا بقدر من خلالها أنشئ أي صفحة ويب. والبرنامج اللي حنستخدمه عبارة عن برنامج الفيجوال ستديو كود. يفترض إنكم نزلته البرنامج عندكم تمام، وظهرت عندكم هي، عملتوا له يعني تنزيل عندكم، عملتوا له ست أب وكل هالأمور. يا إما بتاخذوه من الفلاشة، يا إما هذا. لو رحتوا على جوجل تول فيجوال ستديو كود داونلود تنزيل، بيجيكم هل هو ويندوز، هل هو ماك، بتختاروا البرنامج اللي بدكم إياه، بتعملوا له تنزيل، بينزل عندكم مباشرة، بتعملوا له سيت أب، حيفتح عندكم البرنامج بهذه الطريقة. تمام؟ كلكم عندكم البرنامج صح؟

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

>> إيه؟ >> ممتاز. هلا الأدوات هذه لو أنا باجي بكتب عندي هون في البرنامج، مثلاً في عندي تاج اسمه إيمج، طبعاً هو مش حيظهر إلا لما أكتب الكود العام تمام. ثواني بس بحل المهم. فكرة الأكستنشنز هذه حنتبع الخطوات مع بعض، إنه بتساعدني في طريقة كتابتي للكود. كيف يعني؟ إنه أنا لو أنا مثلاً في عندي تاج معين، كمثال مثلاً تاج الإيمج، في معه حاجة اسمها اتربيوت، خصائص مع هذا التاج، بتداعملي إياه وعدنا حنحكي فيها. هلت هذه الخصائص بدل ما أنا أكتبها بالإيد، إذا أنا كنت منزلة الأكستنشنز، بتساعدني إني أكمل الكود. هي شغلة. شغلة ثانية بترتب لي شكل الكود عندي. الكود بدل ما يكون كله بنفس اللون وأنا تتعب عيني منه وأنا بشوفه، لا بتكون حاطة لي التاج لون، الأتربيوت تبعته لون، التذكيرة لون، الأمور هذه. فالاكستنشنز هذه أنا مجمعة لكم إياها في رابط حبعث لكم إياه اليوم. إيش حتعملوا؟ حتفوتوا على الرابط هذا، رابط درايف. تمام؟ حتفوتوا. فوتوا عليه. أنا حبعث لكم الرابط بهذا الشكل. حبعث لكم إياه هيك موجود في مجلد اسمه في إس كود أكستنشنز، الفرونت اند بيزكس. هي المادة اللي شرحناها اليوم، اللي هي هذه. تمام؟ حتلاقوا في اللي هي الفرونت اند كورس، اللي هي المحاور اللي شرحناها في اللقاء التعريفي، محاور الكورس. وحتلاقوا في هذول الستة. إيش حتف تعملوا؟ حتفوتوا على هذا المجلد. حتلاقوا في مجموعة من الصور، كل صورة عبارة عن أداة من أدوات الفيجوال ستديو كود، مطلوب منكم إنكم تنزلوها. حتفوتوا هيك. في عندي مثلاً أداة اسمها سنبت، كاتب لكم شوية شرح بسيط عنها. في أداة اسمها كوديوم آي. في أداة اسمها إيمج بريفيو. زائد حتطلعوا برضه من ه بعد ما تنزلوا هذول، حتطلعوا من المجلد هذا. حتفوتوا على هذه الصورة وتنزلوا اللي موجودين هون. تمام؟ بعدين الصورة اللي بعدها عبارة عن ملف، برضه موجود في أداة اسمها لايف سيرفر، أداة اسمها سي دي إن جي إس، أداة اسمها ريجيكس بريفيور. مطلوب منكم كل واحدة إنكم تنزلها. كيف بدنا ننزلها؟ بنيجي هون على الفيجوال ستديو كود. حتلاقوا في عندكم هذا الخيار. تمام؟ شايفينه؟ اللي هي الإدارة أو الإعدادات. حتلاقوا عندكم خيار اسمه أكستنشنز. تمام؟ بتيجوا هون في البحث، بتكتبوا عن الأداة اللي هي الموجودة في الرابط هنا. مثلاً في عندي أداة اسمها سنبر، بكتبها زي هيك. تمام؟ بعد ما تظهر لي، طبعاً أنا أوريدي منزل عندي. أنتم حتظهر لكم زي هيك. بتضغطوا على كلمة إنستول. طبعاً بده بده نت تنزلهم. بده نتعمل التراست إنه هل تثقي فيه؟ ما زال صار عليها الصح هذا، يبقى خلص هي نزلت عندكم. أي أداة من الملفات الموجودة عندكم بدكم تنزلوها. بس في شغلة مهمة اللي هي موضوع اللايف سيرفر. أنا صراحة ما بفضل إنكم تنزلوها في هذا. إيش يعني لايف سيرفر؟ يعني أي شيء بكتبه عندي على البرنامج وبروح على البراوزر تبعي مباشرة بينعرض عندي. فأنتم عشان لسه في مرحلة التعليم، عشان تشوفوا قبل وبعد، تلاحظوا قبل وبعد، فما بفضل إنكم تنزلوا اللايف سيرفر. هي شغلة. شغلة ثانية إنه أحياناً ممكن تلاقوا بعض الأدوات اللي موجودة عندكم هنا ما ظهرت عندكم على البرنامج بنفس الأداة. تمام؟ يعني ما ظهرت نفسها بالضبط. فأنتم خذوا أول واحدة بتظهر عندكم، هي بتكون تابعة لها. يعني بتعمل نفس المهمة. يعني مثلاً الكوديوم آي آي، لو ما لقيتوها ظهرت بالضبط، خذوا الشيء اللي ظهر عندكم، فهي بتكون البديل عنها. ليش؟ لأنه بتكون الأداة اللي أنتم بتبحثوا عنها أداة مدفوعة، فالبرنامج بروح بيقترح لك أداة بديلة عنها بتعمل نفس الأداة اللي أنتم بدكم إياه. تمام؟ هي الشغلة اللي. شو رأيكم تاخذوا وقت 10 دقائق هلقيت تنزلوهم عندكم. تمام؟ عشان موضوع النت. حابعث لكم الرابط على الجروب. أي فوتوا عليه واعملوا تنزيل له.

هلقيت بعد ما نزلتوا الأكستنشنز، بدنا نتعرف إيش هي الخطوات الأولى إنه أنا أنشئ أي صفحة ويب بسيطة عنا. تمام؟ أول حاجة نحن لما بنفكر بأي مشروع موقع، صفحة لانج بيز، أي كان. أول حاجة بنعملها إنه بنروح بننشئ مجلدات المشروع تبعتنا. تمام؟ كيف بننشئ المجلدات؟ حسب وين المكان اللي أنا بدي أنشئ فيه المشروع. أنا لنفرض إنه هنا على سطح المكتب، بدي أجي أعمل مجلد. المجلد هذا بسميه اسم يدل على الموقع اللي أنا بدي أعمله. كيف يعني؟ أنا شغالة موقع مطعم بسميه ريستورانت. شغالة موقع مدرسة مثلاً بسميه سكول، أو بسميه باسم المشروع اللي هو اللوجو تبعه. أنا هون بدي أسميه عنكم الدفعة السادسة فرونت اند 6. تمام؟ هيني أنشأت مجلد المشروع. بعد ما أنشأته، باجي بفتحه. بداخل المجلد هذا في عندي مجلدات أساسية لازم أنشئها عندي. فحجي أعمل هون نيو فولدر، مجلد جديد. أول مجلد أساسي لازم أنشميه اتش تي ام ال بيجز. بداخل الاتش تي ام ال بيجز إيش حاعمل؟ حاحط صفحات الاتش تي ام ال اللي أنا شغالة فيهم. يعني مثلاً صفحة موقع مكون من ثلاث صفحات، الثلاث صفحات هذول بدي أنشئهم بداخل هذا المجلد. هلا الترتيب هذا، هذا من باب إنه يكون عندي الموقع عندي مرتب. بدل ما يكونوا كلهم تحت بعض، الاتش تي ام ال مع السي اس اس مع الصور مع الفيديوهات مع الصوت مش عارف إيش، بكل شيء مش مرتب. عشان هيك نحن بنروح بروح بنقسم هذه الأشياء، كل واحدة في مجلد خاص فيها، من باب الترتيب. المجلد اللي بعده، المجلد الأساسي بدي أسميه سي اس اس. حجي أعمل هيك سي اس اس. بداخل السي اس اس إيش حاحط؟ حاحط الملفات اللي الامتداد تبعها أو اللي من نوع سي اس اس. حنتعرف عليها بعدين. في عندي مجلد اسمه جي اس. برضه بداخله حاحط المجل الملفات الأساسية تبعت الجي اس. في عننا ملف سكريبت، في عننا ملف متعدد للجي اس. كمان لما ناخذ الأيقونات، لما ناخذ المكتبات، كل شيء بناخذه بيكون بيحتاج إني أستدعي ملفات خاصة فيها. فبدل ما أكون حاطتها كلها في المجلد تحت بعض، لا أنا بكون مرتبة كل واحدة في المجلد الخاص فيها. بعدين بدنا نعمل مجلد متعلق في الميديا. بنحكي عنه في الميديا. إيش يعني في الميديا؟ يعني أنا محتاجة صور، محتاجة فيديوهات، محتاجة صوت. كلها بكون حاطتها بداخل هذا المجلد. هلا قدامي خيارين، يا بعمل ميديا وبداخل هذا الميديا بحط كل شيء بدي إياه، أو في ناس إيش بتروح بتعمل بتقسم الميديا نفسه لمجلد اسمه إيمجز، بتكون حاطة فيه الصور. وهذا كله من باب الترتيب. مجلد اسمه فيديو. إيش في عندي فيديوهات بدي أعرضها في الموقع بحطها بهذا المجلد. مجلد >> اسمه أوديو مثلاً. تمام؟ إيش بتقول؟ مجلد فونت؟ لا، هذا عنا حنأخذه لحال. تمام؟ نحن هون بنحكي عن الميديا. مجلد اسمه فايلز، ملفات. تمام؟ إذا قسمت الميديا لهذول الأربعة، يا بتحطوهم كلهم بمجلد الميديا، يا إما من باب الترتيب مجلد إيمجز، أوديو، والأمور هي. كمان بطلع هالقط بره في عندي مجلد اسمه فونتس، لأنه نحن حنأخذ كيف أستخدم خطوط غير الخطوط اللي بيعطيني إياها برنامج الفيجوال ستديو كود، فبدي أعمل ملف اسمه فونت. لما نيجي نوصل لموضوع الخطوط، حنحتاج الملفات المط الخطوط. تمام؟ إذا الخطوة الأولى إنه أنا أنشئ المجلدات الخاصة عندي في المشروع. المجلدات الأساسية عندي مجلد للاتش تي ام ال بيجز، مجلد للسي اس، مجلد للجي اس، مجلد للفونتس، مجلد للميديا. أحط بدخله كل الفولدرات وكل الصور والملفات اللي أنا بحتاج إني أرفعها أو أعرضها على موقع الويب تبعي. بعد هيك باجي هان على الفيجوال زد كود بحكي له فايل أوبن فولدر. بدي أفتح المجلد اللي أنا أنشأته اللي سميته فرونت ان 6 بهذا الشكل. هل لما فتحت المجلد حيجيني على جنب كل المجلدات اللي أنا أنشأتها. تمام؟ اليوم نحن حنحتاج بما إنه لسا بنحكي بالاتش تي ام ال، حنحتاج إنه في الاتش تي ام ال بيجز أنشئ صفحات الاتش تي ام ال اللي أنا شغالة فيها حسب الموقع تبع الموقع عندي 10 صفحات، يبقى لازم في الاتش تي ام ال بيجز يكون عندي 10 صفحات. بما إنهم صفحات اتش تي ام ال، يبقى لازم الامتداد تبعهم أو النوع تبعهم يكون من نوع اتش تي ام ال. كيف بعمل هذا الكلام؟ باجي هون بضغط على الاتش تي ام ال بيجز. في عندي هون خيار اسمه نيو فايل. شايفينه؟ بضغط عليه وبسمي اسم الصفحة تبعتي. هل اسم الصفحة هون ممكن تكون إكس واي زد، رزان أحمد، مش عارف إيش الاسم اللي بدي إياه دوت اتش تي ام ال. تمام؟ ولكن الشغل الاحترافي تبعي بحكي لي إنه لازم الصفحة الرئيسية تبعت الاتش تي ام ال يكون لها اسم. مين بيعرفها؟ ممتاز. إندكس دوت اتش تي ام ال. نوع صفحة الاتش تي ام ال. لما تنزلوا الأكستنشنز الأدوات حتلاقوها ظهرت بهذا الشكل. الأيقونة هي عشان يبين إنه هذا نوع الملف اتش تي ام ال. طيب مين يحكي لي إيش معنى إندكس؟ أنا قلت من الأول بقدر أسميها إكس واي زد أحمد، أي اسم بدي إياه طالما أنا ق له دوت اتش تي ام ال، على طول هو حيفهم إنه هذه نوع الصفحة اتش تي ام ال. طيب إيش معنى إندكس أو إيش أهمية الإندكس؟ >> تمام. هي الصفحة الرئيسية اسمها إندكس. بس ليش مهم إنه أنا أسميها إندكس؟ ما أنت تنشوفها فيعرف إنه الاسم >> ممتاز جداً. هذا اللي بدي أوصل له. هلقيت أنا الموقع تبعي مكون من 20 صفحة، واحدة اسمها أوت أس، واحدة اسمها برودكت، واحدة اسمها كونتاكت أس، واحدة اسمها هوم مثلاً مسمياها. كيف الموقع لما أنا أرفعه على أنا لما برفع بقول بحدد والله هذه الصفحة الصفحة الأولى، هذه الصفحة الثانية، هذه الصفحة لا بدي أعرض الموقع مرة واحدة. وكيف بدي أحكي لل نحن وين بنعرضه؟ في عننا حاجة اسمها الاستضافة، إذا سمعتوا فيها، اللي هي الهوستينغ. تمام؟ يعني أنا تو لما ورجيتكم بالمواقع هذه، هذه المواقع معروضة على حاجة اسمها هوستينغ، الاستضافة. تمام؟ المواقع هذه معروضة على حاجة اسمها هوستينغ، الاستضافة. كيف بنعمل هذا الكلام؟ بس نخلص الموقع نصممه ونبرمجه، في عننا حاجة اسمها اسمها دومين وسيرفر. بنشتري دومين وسيرفر عشان نرفع. مش نحن هذا طبعاً شغل الكلايمت بيكون عشان نرفع المواقع عليه. الدومين عبارة عن اسم الموقع هذا. أنا بس بشتري دومين بنفس اسم الموقع عشان لما أجي أكتب اتش تي تي بي اسم الموقع دوت كوم مثلاً، خلص يكون عارف إنه اسم الموقع بهذا الشكل. موضوع السيرفر هو اللي توي إحنا قلناه من الأول. مش نحن قلنا في سيرفر بعرض عليه الملفات تبعتي، اللي هي الصور والفيديوهات والأمور هذه، وسيرفر بحد أحمر عليه الملفات تبعتي. قلت هذا السيرفر هو اللي بعرض أنا عليه الشغل تبعي. لما باجي برفع الموقع، أنا كيف برفعه؟ برفعه باكج واحد، كل المجلدات اللي فيه، اتش تي ام ال، سي اس اس، صور، فيديوهات، مش عارفة إيش، خطوط، كل شيء. كيف الموقع تبعي بده يعرف إنه الصفحة الرئيسية هي هذه، يروح يعرض لي إياها أول واحدة؟ عشان يتعرف عليها لازم أكون كاتبة له كلمة الإندكس. إندكس دوت اتش تي ام ال. يبقى هو بيفهم إنه هذه هي الصفحة الرئيسية تبعت الموقع تبعي. مش بس في موضوع الاستضافة، موضوع الجيت هاب. أكيد سمعتوا عن حاجة اسمها جيت هاب. صح ولا لا؟ إن شاء الله في آخر الكورس حنتعرف كيف بيرفع مواقعنا على الجيت هاب. فالجيت هاب لما باجي برفع عليه الموقع تبعي، برضه إذا كنت مسمياه هوم، مسمياه إكس واي، مش حيتعرف على الصفحة الرئيسية. عشان هيك بدنا نتفق من الأول إنه الصفحة الرئيسية تبعتي بده يكون اسمها إندكس دوت اتش تي ام ال. وضحت ليش إندكس؟ عشان لما أرفع الموقع تبعي الـ سواء الاستضافة أو الجيت هاب يتعرفوا على الصفحة الرئيسية تبعتي، بيكون عن طريق الإندكس دوت اتش تي ام ال. يبقى لحتى الآن اللي أخذناه، كيف أنشئ أول صفحة ويب تعريفية بسيطة. مطلوب مني أجهز مجلد المشروع تبعي. في ناس بتقول إنه كلهم بحطوهم في مجلد واحد. لا، كل مشروع نحن بننشئه بنروح بنعمل له مجلد خاص فيه بهذه الطريقة. يعني مثلاً نحن في المشروع في الكورس تبعنا حنأخذ ست مشاريع. المشروع الأول بيكون له مجلد خاص فيه. المشروع الثاني له مجلد خاص فيه بهذه الطريقة. تمام؟ اليوم إن شاء الله كل شغلنا حيكون على الإندكس. بدنا نتعرف إيش هو الكود العام لأي صفحة اتش تي ام ال. تمام؟ الكود العام هذا عشان يظهر لي، بحط شيفت مع رقم واحد أو علامة التعجب. بحكي عنه. تمام؟ بيظهر لي بهذا الشكل. بضغط على الأولى، بعمل إنتر. بيجيب لي الكود العام تبع أي صفحة و بهذا الشكل. طبعاً عشان زي ما أنتم شايفين، عشان منزلة الأكستنشنز، ظهر عندي موضوع الألوان. هي كل تاج باللون الخاص فيه، عشان أنا أكون مميزة إنه هذا عبارة عن تاج، هذا عبارة عن أتربيوت، هذه عبارة عن القيمة تبعته. كله حنوضحه إن شاء الله. هلت هذا هو الكود العام تبع أي صفحة ويب. إيش بحكي لي إنه الكود العام هذا بيتكون من ثلاث أشياء أساسية. تمام؟ ثلاث أشياء أساسية. أول حاجة حاجة اسمها دوك تايب اتش تي ام ال. قالت أي شيء محطوط بين علامة الأكبر وعلامة الأصغر بنحكي عنه التاج أو المنت أو وسم للاتش تي ام ال. إيش فكرته؟ هي اللي تو قلنا عليه إنه أنا من خلاله أنا بنشئ صفحة الويب تبعتي، بنشئ الزر، بنشئ النص، بنشئ الصورة. بيكون اسم التاج هذا أو اسم الالنت أو اسم الوسم محطوط بين علامة أكبر وعلامة أصغر. أول تاج أساسي بدنا نتعرف عليه اسمه دوك تايب اتش تي ام ال. مين بيعرف إيش معنى دوك تايب اتش تي ام ال؟ >> ممتاز. ممتاز جداً. إذا بتلاحظوا توي لما أنا ورجيتكم هون المحاور، إيش كنت كاتبة هان؟ اتش تي ام ال 5. صح ولا لا؟ إيش يعني؟ اتش تي ام ال 5. الفيرجن أو الإصدار اللي أنا بدي أشتغل عليه في الاتش تي ام ال. بحكي لي إنه الاتش تي ام ال هذه في اتش تي ام ال 1، في اتش تي ام ال 2، لحد اتش تي ام ال 5. هو آخر إصدار نزل في الاتش تي ام ال. إيش فايدة آخر إصدار؟ طيب ليش ما استخدم اتش تي ام ال 2 ولا اتش تي ام ال 3؟ >> ممتاز. اتش تي ام ال 5 فيها تاجات جديدة. لو أنا جيت استخدمت التاجات هذه في البرنامج عندي وأنا مش كاتبة هذا الكود، مش حيتعرف عليهم. ليش؟ لأنه بحكي له إنه أنت مستخدمة تاجات الجيل في الاتش تي ام ال 5 ومش حاكية للبرنامج إنه أنا نوع الامتداد اللي أنا بدي أستخدم هو اتش تي ام ال 5. فعشان هيك من البداية نحن بدنا نكون حاكين له دوك تايب اتش تي ام ال. هذا معناته إنه أنا الإصدار اللي بدي أشتغل عليه هو اتش تي ام ال فايف. إيش يعني اتش تي ام ال فايف؟ إنه أنا بدي أستخدم التاجات والالنت الجديدة اللي موجودة بداخل الاتش تي ام ال فايف. تمام؟ الشغلة اللي بعدها بتكون من ثلاث أشياء. أشياء أساسية. تاج اسمه اتش تي ام ال. تاج اسمه هيد. تاج اسمه بدي. تمام؟ إيش فكرتهم؟ أول حاجة بدنا نحكي فيها إنه التاجات في الاتش تي ام ال، في عندي نوعين من هذول التاجات، أو ممكن أوضح لكم إياهم هذا. في عندي نوعين من أنواع التاجز في الاتش تي ام ال. تمام؟ النوع الأول بحكي لي السلف كلوزين تاج. تمام؟ النوع الثاني بنحكي عنه بيرد تاج. السلف كلوزين له اسم ثاني اسمه سنجل تاج. تمام؟ سنجل تاج. النوع الثاني البرد تاج له اسم ثاني اسمه دبل تاج. تمام؟ إيش يعني عندي سلف كلوزين أو سنجل تاج؟ وفي عندي دبل تاج أو بيرد تاج؟ هلا لو جيت اطلعته هون، إحنا تو اتفقنا إيش هو التاج؟ أي شيء محطوط بين إشارة الأكبر وإشارة الأصغر. صح ولا لا؟ خلص هذه اتفقنا عليها إنه عبارة عن تاج. >> ممتاز. آه. تطلعوا لي هون على البرنامج. هي تاج البدي. إيش يعني له نهاية؟ يعني في عندي إشارة الأكبر وإشارة الأصغر محطوط بداخلها اسم التاج تبعي. وعندي ت شيء ثاني إشارة الأكبر وإشارة الأصغر بس بنضيف عليه السلاش قبل اسم التاج. في عندي إشارة السلاش. فهذا التاجح نحن بنحكي عنه بين التاج. إيش يعني له تاج بداية وتاج نهاية؟ هذا بنحكي عنه تاج بداية وهذا بنحكي عنه تاج نهاية. نفس الحجة لو طلعنا هون على التايتل، العنوان تبع التاج صفحة الويب تبعته. هي تاج البداية اسمه تايتل وهي تاج النهاية هيه. نفس التاج بس إضافة كلمة إيه؟ إشارة السلاش قبل. لكن بطلع في عندي هون تاج اسمه ميتا مثلاً. ما في عندي تاج هيك أجي زي هيك أسكر. شايفين؟ حتى بيعطيني إيرور إني أجي أعمل له ميتا بهذا الشكل. هذا الكلام غلط. ما في له تاج. فبحكي عنه سيلف كلوزين تاج أو سينجل تاج. إيش يعني هذا التاج؟ بحكي عنه بيسكر حاله من حاله. إيش يعني ماله تاج نهاية؟ خلص بس تاج البداية. ميتا أحد أنواع اللي وحناخذ كثير من تاجات الاتش تي ام ال اللي تعتبر سلف كلوزين أو سينجل تاج. تمام؟ إذا تاج البداية إنه له تاج بداية وتاج نهاية. مثلاً الهيد. هي الهيد. ها تاج البداية وتاج النهاية تبعته. البدي له تاج بداية. الاتش تي ام ال نفسه. هيها تاج بداية وها تاجها. بحكي عنها تاج. تمام؟ بهذا الشكل. ممتاز. هي الهيد وهي البدي. واضحة هذه النقطة؟ أنواع التاجات؟ لعيب سنجل تاج اللي هو بس له تاج بداية. بيرد تاج أو دبل له تاج بداية وتاج نهاية. هلت صفحة الويب تبعتنا، أي صفحة سواء صفحة الإندكس، صفحة الأباوت، صفحة السيرفس، صفحة الكونتاكت، كلهم بدنا نعملهم بنفس هذه الطريقة. مثلاً أنا عندي الموقع مكون من ثلاث صفحات. باجي هون على الاتش تي ام ال بيجز بحكي له نيو فايل. مثلاً في عندي صفحة اسمها أباوت. بقول له أبا أوت دوت اتش تي ام ال بهذا الشكل. في عندي صفحة ثانية اسمها سيرفيسز مثلاً بتعرض الخدمات. بضغط عليه بقول له نيو تكست فايل. بسميها سيرفيس دوت اتش تي ام ال. فاي صفحة أنا بنشئها كلها بدي أكتب لها الكود العام تبعي. بدي أجي أقول له شيفت مع رقم واحد وأكتب الكود العام تبعها. أجي هون على الأباوت. شيفت مع رقم واحد. شفت مع رقم واحد وأكتب الكود العام تبعها. أي صفحة أنا بنشئها. هذه الخطوة الأولى إنه أنا أكتب الكود العام تبعي. تمام؟ نيجي نحن هلا شغلنا كله على صفحة الإندكس. حكينا إنه في عندي التاج الأساسي اللي بال أول بحطه بس عشان أبين نوع الإصدار اللي أنا شغالة فيه اللي هو اتش تي ام ال 5. بس بكتب تاج الدوك تايب اتش تي ام ال. بعد هيك في عندي ثلاث تاج تاجات أساسية لازم أنا أتعامل فيهم. تاج اسمه اتش تي ام ال. تاج اسمه هيد. تاج اسمه بدي. أول حاجة بدي أفهمها إنه كل التاجات اللي أنا حكتبها في صفحة الويب تبعتي، يعني تاج الزر، تاج الصورة، تاج النص، تاج مش عارف إيش، كلهم وين موجودين؟ بداخل الاتش تي ام ال. عشان هيك إذا بتلاحظوا هي تاج البداية تبع الاتش تي ام ال واخر سطر عندي في الكود هو عبارة عن تاج النهاية. يبقى أي تاج بكتبه ما بينفعش أكتب هون بره الاتش تي ام ال. لا، كله بده يكون بداخل الاتش تي ام ال نفسها. قالت الاتش تي ام ال نفسها بتقول لي أنا في عندي تاجين أساسيين لازم أتعامل معهم. تاج اسمه هيد وتاج اسمه بدي. إيش الفكرة؟ هلت أنا لما أنشأت هذه الصفحة، لو جيت هون على مجلد المشروع وفتحت مجلد المشروع اللي أنا شغالة فيه اللي سميته فرونت ان سيف ورحت على الاتش تي ام البيجز ورحت فتحت صفحة الإندكس بهذا الشكل. تمام؟ زي ما أنتم شايفين هيها. طبعاً الصفحة هذه أنا هيك عرضتها على البراوزر. بقدر أعرضها على أي براوزر بدي إياه عن طريق كليك باليمين بحكي له أوبن ويذ فتح باستخدام. إذا أنا بتعامل مع فاير فوكس، مع جوجل كروم، مع إنترنت إكسبلورر حسب مايكروسوفت إيدج، إيش المتصفح اللي أنا بتعامل فيه. بضغط عليه مثلاً بدي أقول له باستخدام جوجل كروم. فحيفتح لي صفحة الويب بهذا الشكل. هلا بصير. بصير أي شيء بكتبه على برنامج الفيجوال ستديو كود وبيجي بينعرض عندي هون على الموقع. طيب كيف بده ينعرض عندي هون على الموقع؟ يفترض الطريقة التقليدية عندي إنه أنا بفترض أي شيء بكتبه عندي هان على البرنامج. اطلعوا مثلاً كتبت في البدي كلمة ويلكم. تمام؟ لو أنا جيت رحت هون على المتصفح هذا مش حتظهر عندي كلمة ويلكم. متى حتظهر؟ إذا أنا منزلة اللايف سيرفر اللي توي حكيناها. بدون ما أعمل شيء. إذا أنا منزلة اللايف سيرفر بتظهر. إيش يعني؟ إنه أنت أي شيء بتكتبيه على البرنامج يظهر معنا. طيب أنا كيف بدي أخليه يظهر؟ أول حاجة بتيجي عندكم هنا على الفايل. في عندكم حاجة اسمها الأوتو سيف. الحفظ التلقائي. اللي نزلوا البرنامج الجديد مش حيلاقوا محطوط صح على الأوتو سيف. فكلكم تأكدوا إنه في عندكم صح على الأوتو سيف. من خانة الفايف باجي هون كلمة أوتو سيف لازم يكون الصح مفعل. إيش يعني أوتو سيف؟ حفظ تلقائي. إيش يعني حفظ تلقائي؟ يعني أي شيء بكتبه هون على البرنامج وباجي بفتح على البراوزر عندي بعمل ريفريش تحديث. أكيد بتعرفوا هذه المعلومة. تمام؟ ريفريش أو كنترول إف. تمام؟ >> إيه؟ كنترول آر عفوا. بيجي عندي بيظهر عندي هون بالشيء الجديد اللي أنا كتبته في البرنامج بيظهر عندي هان معي لما بعمل التحديث هذا. مش حيظهر هذا الشيء إلا بشغلتين. إن أنا أكون عامله الأوتو سيف. وأجي أعمل تحديث عندي هون على البراوزر. إنه أنا أضغط كنترول آر. في كل مرة مثلاً اجيت هي كمان مرة كتبت كلمة هلو. وجت هذا على المتصفح. هي كنترول آر. هلا هي كلمة هلو عندي حتظهر بهذا الشكل. تمام؟ هذه أول شغلة إنكم تفعلوا الأوتو سيف عشان أي شيء يظهر عندكم. أي شيء تكتبوه على البرنامج يظهر عندكم على المتصفح. تمام؟ مين عنده سؤال؟ الأمور تمام لحتى الآن؟ إذا نزلنا البرنامج، نزلنا الأكستنشنز، شفنا كيف بنعمل أول مجلد عنا في المشروع تبعنا. إنه أنا أجهز مجلدات المشروع تبعي. أجهز صفحات الاتش تي ام اللي أنا بدي أنشئها. قلنا أول شيء حيكون كل شغلنا على صفحة الإندكس. تمام؟ نيجي الآن بدنا نشرح سريعاً إيش الكود العموم تبع الاتش تي ام ال. خلصنا من الدوك تايب. حكينا الكود الأساسي عندي ثلاث شغلات: اتش تي ام ال، هيد، باي. نيجي أول حاجة للهيد. قلنا هو التاج الأساسي اللي موجود معي. في له تاج بداية هون وفي له تاج نهاية. وكل شيء بده يكون محصور بداخل هذا التاج. تمام؟ هل مع التاج هذا في عننا حاجة اسمها أتربيوت. إيش فكرة الأتربيوت؟ حكيلي عبارة عن خصائص أو مميزات. لها وظيفتين في التاج تبعي. مين يحكي لي إيش؟ يا إما تميز الكود تبعي، يا إما تشغل الكود تبعي. إيش يعني؟ يعني هذا الأتربيوت أو هذه المميزات لما أنا بعطيها لبتاك تبع الاتش تي ام ال، يا إما بتضيف له شيء جديد أدفانسد بتميزه، يا إما بتشغل الكود. في عندي أحياناً بعض الأكواد مش حترضى تشتغل معي إلا لما أضيف عليها الأتربيوت هذه. كمثال مثلاً لما ناخذ الفيديو، في عندي أتربيوت اسمه اسمه كنترولز. مش حيظهر الفيديو عندي إلا لما أضيف الكنترولز تبعه. في الرابط مثلاً تاج الآيه لحاله بيشتغل. لازم أضيف معه أتربيوت اسمه إتش رف عشان أضيف الرابط تبعه. وهكذا. كل هالأمور إن شاء الله حنتعلمها. بس أنا مبدئياً بدنا نفهم إنه فكرة الأتربيوتس عبارة عن ميزة أو خاصية بضيفها في تاج البداية تبع الاتش تي ام ال. شايفين وين ضيفتها؟ في تاج البداية. هي التذكيرة في تاج البداية. وظيفة الأتربيوت هذه يا إما تميز الكود عندي، يا إما تشغل الكود تبعي. فاول أتربيوت بدنا نتعامل معه في الاتش تي ام ال اسمه لانج. اختصار لكلمة لانجويج. قالت هذا بنحكي اللانج بنحكي عنها اسم الأتربيوت. الاي ام هذه بنحكي عنها فالو. القيمة تبعت الأتربيوت. >> إيه؟ تمام. هلا حنشرحها. بس أنا هلا بس شوية مسموا عارفينهم إنه اللانج اسم الأتربيوت. الاي ام القيمة تبعت الأتربيوت. هذا إيش هي وظيفته؟ الأتربيوت أول حاجة بابا بكتبها بداخل تاج البداية. الشغلة الثانية اللي هي يا بتشغل الكود عندي، يا أما بتميزه، بتعطيه شيء أساسي له. فبيحكي لي في الاتش تي ام ال لازم يكون عندي اثنين أتربيوت مهمين لازم أستخدمهم. أتربيوت اسمه لان. وأتربيوت اسمه دايو. تمام؟ هل اللانج اختصار للانجويج. اللغة تبعتي. بياخذ مني شغلتين. إي إن. في حال أنا الموقع شغالة فيه إنجليزي، بحكي له إي إن. إي آر. في حال الموقع شغالة فيه عربي. لو أنا شغالة موقع عربي، فاللاندجوج حتكون عندي إي آر. نيجي للداير. الاتجاه تبعي. الاتجاه تبعي بياخذ مني قيمتين. يا إما بحكي له ال تي آر. اختصار لكلمة ليفت تو رايت. بياخذوا أول حرف من كل كلمة. يا إما إيش بقول له؟ آر تي ال. اختصار لكلمة رايت تو ليفت. شغلة مهمة جداً وركزوا معاي فيها. هلت أنا شغالة قلت له لانج إي آر عربي. صح؟ يفترض الدايركشن تبعي كيف يكون؟ رايت تو ليفت. من اليمين إلى اليسار. مضبوط. هينا كاتبين آر تي ال. لو جيت عملت ريفريش. حيظهر الكلمات عندي من اليمين لليسار. تمام؟ زي ما أنتم شايفين. ممتاز. طيب لو أنا طلعوا اللانج كاتباها إي آر والدايركشن كاتباها تي آر. إيش يعني تي آر؟ من اليسار لليمين. وأنا حكى له إنه اللغة بدي إياها عربي. ولكن الدايركشن بدي إياه من اليسار إلى اليمين. إيش بتتوقعوا ينعرض على البراوزر؟ >> ممتاز. من اليسار لليمين. عمل ريفريش. هلقيت حيرجع الويلكم وهي الأمور بهذا الشكل. طيب ليش هلا حدا حيحكي اللي حيصير؟ يعني أنا قايلة له الداير إي آر. بدي أجي أكتب له هون كلمة مرحبا. هي عربي. >> وهلقيت هدي حاعمل ريفريش. إيش أنتم شايفين؟ زاهرة من اليسار. مش من العربي بله عربي مش من اليمين لليسار. ليش؟ وهذا من أسئلة المقابلات اللي >> بتيجينا على >> ممتاز. بحكي لي إنه الدايركشن أقوى من اللان أتربيوت. الدايركشن أقوى من اللان. يعني لو أنا كنت كاتبة اللان شيء والدايركشن مش مناسب مع اللغة اللي أنا كاتباها، بروح بياخذ الأقوى وهو الدايركشن. لو العكس. لو أنا كاتبة إي إن. إي إن. الدايركشن الافتراضي تبعها من اليسار لليمين. صح ولا لا؟ لو جيت كاتبة له هون آر تي ال. وين حيروح؟ حيروح من اليمين لليسار. ليش؟ لأنه الدايركشن أقوى من اللانج. بهذا الشكل. لحتى الآن الأمور تمام؟ مين متصعب الشيء؟ طيب أنا حاوقف هون لأنه لو بدي أوقف أكثر في شرح الكود العام والمرة الجاية إن شاء الله حنشرح الكود العام تبع صفحة الويب ونبدأ ناخذ أول تطبيق بسيط في صفحة الويب. يعني كيف تعمل صفحة بسيطة. تمام؟ يعطيكم العافية.