تعلم تصميم المواقع من الصفر

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

موضوع: مقدمه الأربعاء سبتمبر 09, 2009 6:21 am

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

* لو انا عندي معلومات علي الجهاز بتاعي عايز غيري يقدر يتصفحها ممكن اختها علي جهازي وفي حالة ما اذا
كان جهازي مفتوح طوالي يبقي أي جهاز متصل بجهازي يقدر يشوف لمعلومات دي

* لكن حيحصل شنو لو وصل عدد متصفحين هذه المعلومة في نفس اللحظة الي 10000 مثلا او أي رقم كبير هل يتحمل جهازي البسيط بامكاناته المتواضعة كل هذا العدد من المتصفحين في نفس الوقت؟
كل هذه المشاكل كان لابد لها من حل
ومن هنا جات كلمه (server) كحل لهذه المشاكل طبعا حتسالوني تقولوا لي يعني شنو سيرفر معناها شنو
حقوليكم معناها الحرفي هو (الخادم ...خادم الانترنت) دا معناها
فهو عبارة عن اجهزة بامكانيات عالية تحتمل عدد كبير جدا من المتصفحين في نفس الوقت وتتحمل ان تظل تعمل دائما بلا انقطاع

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

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

يديك العافية برانكو
ومشكور على جهودك الرائعة
ابدا على بركة الله

بسم الله الرحمن الرحيم
لازم نمر علي بعض الحاجات ونفهم الكام النظري الاول عشان تخش وانت عندك فكره تامه عن الانت بتدرسوا اوكي يا شباب انا نزلت كلام سيوري لاز تمروا عليهو الاول لاني لو ختيت ليكم الدرس ماحتفهموا لو مامريتو علي الكلام دا معليش يا شباب لازم نتعب شويه مافي حاجه بالساهل كدا بتجي شدوا الهمه بس
يلااااااااااااا نخش:
اول حاجه لازم نعرف html طيب انا اخترت اللغه دي ليه وليه باذات حبيت ابدا الحديث عن التصميم قمت اخترت اللغه دي لانو دا الاساس اللي حتبني عليهو في لغات اكثر تطور وفي برامج حاليا بتاعه تصميم بتغني عن لغه اتش تي ام ال (FRONT PAGE ,DREAMWEAVER ) الزول اللي عايز ياخد اتش تي ام ال ويقيف علي كدا يبقي احسن ليهو يدرس البرامج القلتها ليكم دي لانها اسهل اما الزول العايز يحترف و يعرف هو بيعمل في شنو وكمان عايز يتقدم ويدرس لي قدام لغات تانيه بعد كدا ويكمل في الطريق يبقي لازم اتش تي ام ال
طيب يا جماعه نخش في الموضوع عشان نعرف يعني شنو اتش تي ام ال حضرب ليكم مثال بسيط
لو انا بكلم واحد من امريكا وعايز اقولله حاجة يعملها لو قلتله الحاجة دي بالانجليزي هيفهمها وينفذها صح
لكن لو قلت نفس الحاجة بالعربي ماحيعبرني وفي نفس الوقت ممكن يكون الشخص ده بيعرف اكتر من لغة "فرنساوي مثلا" يبقي لو قلتله نفس الكلمة بالفرنساوي هيفهمها بس اساسه هو الانجليزي
طيب يلا نفس الحال بالنسبة للBROWSER اللي هو صفحة الانترنت اكسبلورر اللي فاتحة قدامك هي في البداية بتقتح بيضة"فاضية"
لكن السؤال الكلام والمعلومات اللي فيها بتظهر كيف ؟؟؟؟
ذكرت قبل كده ان السيرفر بيقوم بارسال المعلومات إلي جهازك فيستقبلها البراوزر فبما ان ال BROWSER هو اللي بيستقبل المعلومات يبقي السيرفر لازم يرسل المعلومات دي باللغة اللي هو بيفهما عشان يظهرها قدامنا لو رسل نفس الكلام باي اسلوب تانيما هيعبره
فالBrowser زيه زي اي انسان ليه لغات بيفهمها ولو قلت ليهو اي حاجة باللغات دي بينفذها فورا بس هو احسن من الانسان في ان هو بيفهم لغات كتير وكمان لو قلتله اي حاجة وفهمها بينفذها طوالي
يلاااا اول وابسط لغه بيفهما البراوز هي لفه html
طيب اسي انا قلت ان السيرفر بيرسل المعلومات للاجهزة باللغة دي طيب واحنا مالنا نحنا
مانحنا بنشوف المعلومات جاهزة وخلاص هنتعب نفسنا ليه؟؟
وده لاننا عايزين نصمم مواقع يعني احنا اللي هنعمل الصفحة ونختها علي السيرفر يبقي لازم نختها باللغة دي لان السيرفر ما هيعمل اي حاجة غير انه هيرسلها فلازم نكون خاتنها عليه بلغة يفهما البراوزر لما يرسلها
يارب يكون الاسلوب واضح

لوفي اي حاجه في كلامي دا ما اتفهمت ارجو الرد عشان مانتقدم خظوه لي قدام الا نخلص من الكلام الورا ونكون ماشين تمام حتي لو حنقعد عليها ميه سنه اوكي يا شباب مستني مشاركاتكم

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

عدد المساهمات : 62 تاريخ التسجيل : 08/09/2009

يديك العافية

لحدي حسي ماشين كويس

لكن في حاجة انت ما وضحتها ال html
هو عبارة عن برنامج ولا اوامر بطريقة معينة ؟؟؟؟؟؟؟
لأنو انا بعرف برنامج بصمم مواقع
بطريقة سهلة جدا زي كأني بصمم لي واجهة في الفوتوشوب

دي علاقتها شنو بال html
؟؟؟؟؟؟

اتمنى انك توضح النقطة دي

طيب يا بلاك الـhtml عباره اوامر مابرنامج هي لغه برمجه وانت لو قريت فوق انا قلت ليك الزول اللي عايز ياخذ html ويقيف علي كدا احسن يشتغل بالبرامج بتاعه التصميم زي مثلا (فرونت بيج) لانها اسهل لكن لو انت عايز انت تعرف انت تسوي في شنو ويدرس لي قدام لغات تانيه احسن يبدا بي html لانو دا الاساس
انشاءالله يكون وصلتك الفكره

عدد المساهمات : 62 تاريخ التسجيل : 08/09/2009

مية مية

مشكووووووووووووووور cheers

موضوع: الدرس الاول الثلاثاء سبتمبر 15, 2009 6:45 pm

اعذروني اذا طولت شوية المرة دي لانها اول مرة ندخل في اللغة..فممكن تحتاج تطويل شوية في الشرح لغاية ما نفهم اللغة دي ماشية كيف….يعني كمية المعلومات المرة دي قليلة بس هتاخد شرح كتير..وان شاء الله هتلاقوه سهل مش صعب ابدا…وعشان الشغله ماتبقي ممله .كل فترة هكتب خلاصة الكلام اللي اتقال وفي الاخر هكتب الخلاصة كلها ..وهتلاقوها قليلة جداا وبسيطة جداااا …حاجة بسيطة قبل متقروا أي حاجة...لو حسيت في النص انك سيحت اوعي تقلق وكمل للاخر اول ماتصل للاخر هتلاقي كله وضح ان شاء الله وانا في الاخر خالص كاتب الخلاصة كلها في سطرين بس هتلم الموضوع كله ان شاء الله بس بعد متفهمه…كمل للاخر..
(html اختصار لهذه الجملة:
hyper text markup language
يعني لغة تقدر بيها تخط علي الانترنت texts بكميات كبيرة (hyper) بس الاسم ده كان لانها في بداية ماخترعوها كانت بس لوضع texts مش اكتر ..لكن اسي تطورت كتير وممكن نحط texts وصور وفيديو واوديو وفلاشات وكل حاجة…)

نبدأ بقي
كيف نعرف البراوزر المعلومات باللغة دي؟
إحنا قلنا ان دي لغة البراوزر وده يترتب عليه إن أنا لو جيت علي أي فايل عندي علي الجهاز وعملت له rename وغيرت امتداده خليته .html يتحول البرنامج اللبيشغله الي الانترنت اكسبلورر…بمعني:
انا عندي فايل اسمه مثلا : branco.txt وعليه كلام مكتوب"بأي محرر كتابة زي الnotepad

لو انا قلتله rename وخليت اسمه branco.html هتلاقي شكله اتحول الي صفحة انترنت اكسبلورر واللي هيفتحه هو الانترنت اكسبلورر..
لان انا كده قلتله ان الكلام اللي عندك هنا مكتوب بلغة html فالجهاز هيحوله تلقائيا الي البرنامج اللي بيفهم اللغة دي وهو يتعامل معاه..اذا لقاهو فعلا باللغة دي هيفهمه ..اذا لقاه ما بي اللغه دي ما حهيفهم فيه حاجة …

اقصد اقول من الكلام اللي فات ان اللي احنا بنعمله عشان نكتب صفحة بالاتش تي ام ال بنفتح صفحة أي محرر كتابي زي النوتباد مثلا ونكتب فيها الكلام اللي احنا عاوزينه باللغة اللي هنتعلمها وبعدين نحول امتداده الي .html هيروح البراوزر فاتحه وقاريه….
ان شاء الله الكلام ده هيوضح اكتر بعدين…

(محررات الكتابة المتوفرة كتير وابسطها واسهلها هو ال notepad وهو ده اللي هنتسعمله..)
اقف في أي حتة فاضية في الشاشة واضغط كليك يمين..
واختار new واختارمنها text doccument …
هتفتح ليك صفحة تكتب فيها الموضوع بتاع سيادتك..
كيف يلاا بكتب الموضوع بتاع سيادتي
ناخد طيب نبذة بسيطة عن الشكل لعام اللي بتكون عليه اللغة دي

اللغة دي عبارة عن عدة اوامر كل امر بينفذ حاجة…اوعي تقلق وتقول هو انا هقعد احفظ اوامر وكدا ..انت ما هتحفظ حاجة خالص (شفتوا انا مريح كيف) ..انت بس هتكتب الاوامر دي عندك في ورقة وكل متحب تعمل حاجة تدي الورقة دي طله تشوف ايه الامر اللي بيعملها وتكتبه…
(واسي انا يا شباب في اوامر ماعارفها كاتبها في ورقه وبعمل كدا)

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

الكود : <..../>
نفس الكود بتاع بدايه الامر بس دا في شخطه كدا مميله
يعني بزود العلامة دي / بيفهم هو ان الكلام المكتوب بين الامر وإغلاقه

طيب المنظر العام للصفحة؟؟؟
احنا عرفنا ان في لغات كتير بيفهمها البراوزر يبقي اول حاجة لازم اعرفهاله ان انا بكتب بلغة ال html ..يبقي في عندنا أمر بيتكتب في اول الصفحة بيعرفه ان انا بكتب html
الامر ده صيغته :
<html>

طيب مش احنا قلنا أي امر لازم يتقفل بعد منخلص كل اللي هنعمله بيه؟؟؟؟
يبقي الامر ده بيتقفل فين؟؟؟؟؟؟
بيتقفل اخر حاجة خالص في الصفحة بعد منكتب كل للي احنا عاوزينه في النص بالمنظر ده:

<html>
…………….
…………….
</html>
طيب بعد معرفته اني هكتب html نعرف بقي شكل صفحة ال html عموما اسي بتتقسم لي جزئين
head و body
ال head بكتب فيه شوية كلام زي عنوان الصفحه مثلا وشوية حاجات تانية كده هنعرفها في وقتها ان شاء الله
ال body بكتب فيه الكلام اللي هيظهر في الصفحة …فلازم اعرف انا بكتب head ولا body ازاي؟؟

يعني لما احب اعرفه اني هكتب head الامر شكله كده:
الكود:
<head>…………………</head>
لما احب اعرفه اني هكتب body الامر شكله كده

<body>…………….</body>

كفايه لحد كدا احد هنا حلو جدا
يلا اطلع اقرا الكلام ده مرة تانية بعد مخدت فكرة عنه..في المرة التانية ان شاء الله هتفهمه كويس

يبقي الملخص الشكل العام:

هتفتح صفحة notepad
وتكتب فيها

<html>
<head>……………………
.........
</head>
<body>………………
…………
</body>
</html>

ان شاء الله المرة الجاية هناخد الاوامر اللي موجودة بين الكلام ده….
عشان تجربوا الكلام ده اكتبوا نفس المنظر العام الللي انا كاتبه واكتبوا مبين ال body وإغلاقها أي كلام يعجبكم "بياناتك مثلا"
وبعدين اقفل الصفحة وقولله save واطلع قولله rename وغير امتدادها خليها .html وبعدين افتحها…
هتلاقي الكلام اللي أنت كتبته ظهر والأوامر طبعا مش ظاهرة..هو بس فهم منها هو هيعمل ايه…
وعلي فكرة هتقابلكم مشكلة هتجننكوا في الكلام اللي هيظهر ما حقوليكم اسي هي شنو حقوليكم في وقتها
خليها تجننكوا شويه
يلا ربنا معاكوا..
و أي استفسار أو مشكل أنا في الخدمة يا شباب

تماااااااااااام
وماشين كويس

يديك العافية برانكو ... شرحك واضح
والى الامام

عدد المساهمات : 62 تاريخ التسجيل : 08/09/2009

يديك العافية

لكن انا عملت زي ما قلت

كتبتها في النوتباد بنفس الطريقة اللي انت قلتها
وحفظتها وطلعت

فتحتها تاني والاوامر لسا قاعدة

بعدين في حاجة مهمة

بين الاومر
هل بتفرق المفاتيح إنتر واسبيس في الموضوع ولا ما بتفرق؟؟؟؟؟؟؟؟؟

وتقبل مروري

شكرا ليكم علي المرور يا جماعه
طيب يا بلاك اكتب في النود باد بالطريقه دي

<html>
<head>……………………
.........<head/>

...<title>
.... <title/>

<body>………………
…………
<body>
<html/>
اعمل سف أز في الديسك توب وغير الامتداد تكون نهايتو .html
حتتحفظ في الديسك توب امشي افتح تاني حتلقي نقاط بس ظاهره اللي النقاط الانت شايفه دي
اما بالنسبه للفراغات والانتر مابقرق يعني مثلا ممكن تكتبها كدا

<HTML><HEAD>.......<TITLE> ..... </TITLE></HEAD><BODY>
BODY> </HTML> ‎ />

عفوأ اعضاء وزوار المنتدي سوف يتوقف الشرح حتي اشعار اخر
تحياتي ....

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