مبادئ أساسية في الوب

الوبأساسية مبادئ

4/3/2017 تصميم مواقع الوب - الجلسة األولى - الوب: مبادئ أساسية م. رندة بشير / وزارة الثقافة / دمشق

1

(الوب العام) المنظرالحاس��وبية • األجهزة م��ن مجموع��ة

بينها فيما تتخاطب• : هاتفي��ة، خطوط االتص��ال طرق

... ضوئية كوابل صناعية، أقمار• : األجهزة من نوعين

24/3/2017 تصميم مواقع الوب - الجلسة األولى - الوب: مبادئ أساسية م. رندة

بشير / وزارة الثقافة / دمشق

والمعلومات 24/7يعم�ل Serverالمخدم − ال�بيانات يحوي ، ) لها) ويستجيب الطلبات يستقبل ، الوب مواقع

وب ) Clientالزبون − موق�ع المخدم م�ن المعلومات يطل�بمعين(

(الوب االتصال)•: إلى والزبون المخدم بين االتصال يحتاج

تحتية (Infrastructureبنية والشبكية ) الحاسوبية التجهيزات » التجهيزات » هذه عل�ى تعم�ل ال�بروتوكوالت أ�و االتص�ال قواع�د

والزبون المخدم بين والرد الطلب رسائل لنقلProtocols: HTTP – FTP – SMTP – POP...

المخدم؟ • من وب موقع لطلب األساسي البروتوكول هو ما



HTTP

(الوب الموقع) طلبالموق��ع • عنوان بواس��طة المخدم إل��ى الطل��ب الزبون يرس��ل

URL )Uniform Resource Locator( وممي�ز خاص وهوعنوانموقع لكل

مكتوب • عنوان رقم�ي URLك�ل عنوان ب�ه العنوان IPيرتب�ط ه�والمطلوب الموقع إلى للوصول المخدم يفسره الذي الفعلي

الثقافة: • وزارة موقع مثالhttp://moc.gov.sy http://212.11.196.188



(الوب العنوان) على الحصولالشبك��ة • عل��ى الوب موق��ع تس��جيل أخرى بعبارة

)World Wide Web )wwwالعالميةالنطاق » • أو الموقع اسم «Domain Nameاختيارالالحقة • :extensionتحديد لالسم

. : : ً مثال الدولة اسم ...sy .com .net .org .gov .blogاختص�ار• ً مسبقا محجوز غير أنه من التأكدالشبكة • خدمات شركات إحدى من االسم حجز طلب

» « العالمي العناوين دفتر في العنوان تسجيل تمالمختلفة؟ اللواحق بين فرق يوجد هل



لو حتى ومميز مستقل موقع تمثل الحقة كل كان نعم،نفسه االسم لموقعين

(الوب المساحة) على الحصول•» االستضافة » أخرى بعبارةالموق��ع • ملفات كاف��ة الس��تيعاب الالزم الحج��م تقدي��ر

التحديث دائم كان إذا ً الحقا إليه ستضاف التي والملفاتإحدى • م�ن الموق�ع احتياجات وف�ق المطلوب�ة المس�احة طل�ب

النطاق ) بي�ن الرب�ط بعملي�ة تقوم والت�ي االس�تضافة شركات) الموقع عمل تضمن التي الخدمات كافة وتأمين والمساحة

) الشبكة) خدمات شركة ذاتها هي االستضافة شركة تكون قد• ) المخدم ) إل��ى وجدت إ��ن ال��بيانات وقاعدة الملفات نس��خ

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

المخدم؟ • إل�ى الملفات لنس�خ المس�تخدم ال�بروتوكول ه�و م�ا64/3/2017 تصميم مواقع الوب - الجلسة األولى - الوب: مبادئ أساسية م. رندة


FTP

(الوب الموقع)



مخدم مخدم

الشبكة خدمات االستضافة

نطاق طلب مساحة طلب

الموقع تخديماإلنترنت على

الملفات نقلFTP

تحكم لوحةالموقع خدمات

HTTPS

الفعلي الموقعHTTP

1 2

3

4

(الوب البروتوكول)المعياري�ة: • القواع�د م�ن مجموع�ة تعرف Standardsال�بروتوكول

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

بروتوكول • على أس�اسي بشك�ل الوب HTTP )HyperTextيعتم�دTransfer Protocol( بي��ن الوب محتوى نق��ل بروتكول وه��و

ضم��ن تص��ميمه ت��م الذي بالشك��ل وإظهاره والزبون المخدم. الوب موقع صفحات

واس��تقبال • الطل��ب إلرس��ال خاص��ة برمجي��ة إل��ى الزبون يحتاجالمخدم من القادم المحتوى Browserالمتصفح وإظهار

Mozilla Firefox, Google Chrome, Internet Explorer...هو • ؟ HTTPSمام�ن • اآلمن�ة تشفي�ر HTTPالنس�خة طبق�ة لحماي�ة SSLتس�تخدم

بينهم�ا االتص�ال بجع�ل والزبون المخدم بي�ن تنتق�ل الت�ي ال�بيانات ً أمانا أكثر وبالتالي مشفر



(الوب البروتوكول)•: والهامة األخرى اإلنترنت بروتوكوالت بعض

الملفات 1. نقل )FTP )File Transfer Protocolبروتوكولوتجهيزه تص�ميمه بع�د المحتوى نس�خ يمك�ن بواس�طته الذيالذي المخدم إل��ى الوب مطور أ��و مص��مم حاس��ب م��ن

. الوب موقع ويخدم سيستضيفالبريد 2. SMTP )Simple Mail Transferبروتوكول

Protocol( الزبون الحاس�ب م�ن اإللكترون�ي البري�د إلرس�الالمخدم إلى

البريد 3. IMAPو )POP3 )Post Office Protocolبروتوكول)Internet Message Access Protocol( البري�د الس�تقبال

إمكاني��ة م��ع المحل��ي،� الحاس��ب عل��ى وتحميل��ه الص��ادرفي المخدم على به IMAPاالحتفاظ

: اإللكتروني البريد ...MS Outlook, Mozilla Thunderbirdبرمجيات



(الوب للبحث) سؤال

الوب؟ نفسها هي اإلنترنت هلInternet vs. Web



(الوب المفتاحية) الكلماتServerالمخدم •Clientالزبون •الموقع • URLعنوانالنطاق • Domain NameاسمHostingاالستضافة •Protocolالبروتوكول •Contentالمحتوى •



(المحتوى العام) المنظرالوب = موقع المحتوى



الصفحات الوسائط البيانات( المعطيات (قاعدة

موقع الوب

صور

فيديوصوت

ملفات

(المحتوى التصميم) مراحلالتخطيط1..2) سكيتش ) للتصميم المبدئي التصور رسمالتصميم 3. أجزاء اختيارالموقع 4. هيكلية رسمالصفحات 5. بناءالهيكلية 6. وفق الصفحات ربط



(المحتوى التخطيط)الموقع؟ • من الهدف ما

... المميزة – الصفة الموقع من المضافة القيمةالموقع؟ • نوع ما

... شخصي – – – – – - حكومي تع�ليمي تفاعلي معلوماتي تجاري خدمييستهدفها؟ • التي الشريحة ما

مختلفة – – – – شرائح فنانين مواطنين أعمال رجال مدرسة ...أطفالالموقع؟ • محتوى أكثر على الغالبة الوسائط نوع ما

( – ) ( – ) عرض ) موقع فيديو فوتوغرافي موقع صور إخباري موقع نصوصفيديو(...



(المحتوى سكيتش)الرأس•الموقع • صفحات إلى الروابطالتذييل•والصور • النصوص تموضع



أجزاء) المحتوى اختيارالتصميم(

النصوص•الصور•اللونية • النماذجالخطوط•



(المحتوى الموقع) هيكلية رسمالتنق�ل • طريقه�ا ع�ن س�يتم والت�ي للموق�ع الشجري�ة البني�ة أ�ي

الروابط خالل من الصفحات بين



(المحتوى الصفحات) بناءالوب؟ • صفحات بواسطتها تبنى التي األساسية اللغة هي ما

HTML : HyperText Markup Languageالصفحة في أظهر أن أريد ماذا

أفضل؟ • إلظهار لها األيمن المساعدCSS : Cascading Style Sheet

أظهره كيف

معها؟ • والتفاعل الحركات اختصاصيJavaScript

الصفحة مع أتفاعل 1كيف84/3/2017 تصميم مواقع الوب - الجلسة األولى - الوب: مبادئ أساسية م. رندة


(المحتوى الصفحات) بناءHTML

<html> <head> </head>

<body> </body></html>



CSSbody { background: white; margin-left: 15%; margin-right: 15%; }

JavaScriptfunction popupMessage)( { alert)“Hello JavaScript!"(; }

(المحتوى الهيكلية) وفق الصفحات ربطالص�فحات • إل�ى ص�فحة ك�ل ف�ي رواب�ط إنشاء ه�ي ببس�اطة

الرواب�ط بإعداد إم�ا الهيكلي�ة، وف�ق تليه�ا والت�ي تس�بقها الت�يبكتاب�ة أ�و التص�ميم،� أدوات ف�ي المتوفرة األزرار أ�و التشعبي�ة

في لها المخصص :HTMLالكود ً مثال ،>a href=“”></a<



بناء) المحتوى أدوات بعضالصفحات(

نصوص )• (Notepadمحرر

صفحات )• تصميم (Dreamweaverبرامج

صور )• معالجة (Photoshopبرامج



بناء) المحتوى أدوات بعضالصفحات(

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

محتوى » إدارة نظم يسمى ما أو الوب «على الوب WCMS : Web Content Management System

•: أشهرها من



(المحتوى للعمل) سؤال

: به ترغب موضوع ألي بسيط موقع اخترمنه 1. الهدف حدد

الموقع 2. لتصميم سكيتش ارسمالموقع 3. لصفحات هيكلية ارسم



مراجع• www.how-to-build-websites.com• developer.mozilla.org/en-US/docs/Learn



http://www.how-to-build-websites.com/

https://developer.mozilla.org/en-US/docs/Learn

Design

مبادئ أساسية في الوب