Transcript Slide 1
أوال :تعريفات الموقع والصفحة ثانيا :الشكل المثالي للمواقع والصفحات ثالثا :بعض المعايير الهامة التي يجب مراعاتها عند بناء موقع على االنترنت رابعا :لغات بناء المواقع المختلفة التي قد نستعين بها مع بعض المواقع والبرامج التي تساعد في بناء موقعك -1http://www.w3schools.com/html /html_intro.asp -2http://www.khayma.com /hpinarabic/htmintro.html 3-http://www.html4arab.com 4-http://www.articalwiki.com/ 5-http://www.articalwiki.com ما هي اإلنترنت وما وظيفتها وأهميتها ومضارها ؟ مواقع اإلنترنت :هي المكان الذي تختارة والشكل الذي تصنعة والهيكل الذي تنفذه لتعبر به عن نفسك وشخصيتك وتبرز جمال عملك وهدفك وغرضك منه وتتيح كل هذا من خالل شبكة اإلنترنت العامة أن كنت تسعى إلنشاء موقع لك ألول مرة يجب أن : .أن تكتسب تفهما ً حول ماهية المواقع الفعالة أن تضع مفهومك وهدفك ضمن عملية إجراءات تصميم الموقع . أن تستمتع وأنت تصنع موقعك الخاص بك موقع الويب هو عبارة عن مجموعة صفحات ويب مرتبطة ببعضها البعض يمكن مشاهدة مواقع الويب عبر برامج في جهاز الحاسوب تدعى متصفحات الويب معظم مواقع الويب تتواجد على األقل صفحة بداية تعرض محتوى ذلك الموقع ،كما تحتوي على االرتباطات التشعبية لصفحاته أو لصفحات مواقع ويب أخرى .لكل صفحة ويب عنوان محدد يعرف أكثر باليو آر Uniform Resourceوالتي هي اختصار لــ")URLإل باإلنجليزية Locator HTMLتكتب مواقع الويب غالبا ً بواسطة لغة ر ْقم النص الفائق ( ،ولكنها ليست دائما ً )HyperText Markup Language كذلك ،فبعضها يكتب بلغة متوافقة مع الويب ،والبعض اآلخر يكتب بلغة XML - Extensible Markupالترميز القابلة لالمتداد ( Language). – أن ال يكون صعب بشكل ال يطاق الوصول إليه. – 2أن ال يبعد مستخدمي الموقع عن المضمون. – 3ال تبحث عن مضيف رخيص وبطيء ال يجعل وظيفتك سهلة. – 4ال تقم بتشويش الزائرين حول نوعية الشركة حتى يستطيعوا تكوين فكره عن المنتج أو الخدمة التي تقدمها بسهولة. – 5ال تجبر الزوار على التسجيل قبل دخول موقعك. – 6ضع بعضا ً من آالت البحث داخل صفحتك األولى لتجبر الزائرين على المكوث داخل موقعك اكبر وقت ممكن دون ملل .ويمكنك اختيار آلة بحث مثل جوجل – 7ال تضع تفاصيل اإلتصال مثال العنوان والتليفون والفاكس والبريد االلكتروني في أعماق الموقع بمكان يصعب الوصول إليه(األفضل عمل صفحة اتصل بنا ووضعها في مكان ظاهر بحيث يراها الزائر بسهولة). -8ال تجعل الصفحة األولى أكثر من 500كيلو بايت متضمنة رتوش ملونة كثيرة لتجذب نظر الزائر . -9ال تبدا صفحتك الرئيسية بتخطيط سواء كان بأعمال الجرافيك أو لفيديو حتى ال ينتظر الزوار كثيرا ً لتحميل الصفحة األولى ضع العنوان بإبداع وله صلة بالموقع وال تجعله مبهم - -11ال تجعل الصفحة الرئيسية غامضة جدا -12ضع أيقونات بسيطة مثل “من نحن” اتصل بنا” وفي اماكن ظاهرة في الموقع. أوال التصميم: .حدد جمهورك .قم بتحفيز جمهورك :عاملهم باحترام ووفر فرص للتغذية الراجعة الفعالة قم بوضع أهداف للموقع تمتاز بالوضوح وقابلية القياس ,أو قم بتصميم .األهداف قم باالعتراف والتقدير تجاه ردود األفعال ,الجهود ,والنجاح ,وقم بتجاوز الثغرات كي يرتقي إلى مستوى التوقعات ثانيا :المحتوى أو المضمون قم بتحديد محتوى الموقع الخاص بك بشكل مركز .يجب أن تكون اللغة بسيطة ومفهومة من قبل جمهور عالمي س ِّه ْ ل أمام الجمهور اإلطالع على المفاهيم الهامة َ . .أدخل نصوص المحتوى في صفحات ذات خلفية بيضاء تعامل مع معلوماتك حسب أولوياتها ,كما لو أنك تقوم بوضع خطوط عريضة :وجه مسار التصفح بأسلوب .بسيط .واضح يقوم على خرائط للموقع تتألف من طبقات أو مستويا منظم التفكير بطريقة الخطوط العريضة :مبادئ عامة .قم باختيار ألوان كل من النص والخلفية على أن يكون الفرق كبير بينهما .قم باختيار لوحة ألوان آمنة الستعمال الزائر .وذلك كي تتسم بالثبات .قم بتوحيد شكل وحجم حروف النص بشكل دائم ومستمر .تجنب إحداث تغييرات على األلوان تجنب استعمال الحروف المائلة ( تصعب قرءاتها ) وإحداث تغييرات على األلوان ,ووضع خط تحت الكلمات ( يمكن الخلط بينها وبين الوصالت Links). .تجنب النص المطول أكثر من اللزوم .قم بتجنب استعمال الخلفيات ذات النسق الشبكي ,ألن ذلك يصعب القراءة ,قم بتوضيح المضمون باستعمال تصاميم وأشكال تتسم بالبساطة ,المالءمة صغر الحجم ,والثبات إن مثل هذه المقاييس ضرورية في ظل وجود الخيارات العديدة المتوفرة على اإلنترنت .فعلى سبيل المثال يقوم العديد من زائري المواقع اإللكترونية بإغالق نوافذ الرسوم ,وذلك من أجل تسريع عملية تنزيل الصفحات على الشاشة ,إذن نجد أن من الضروري وجود خيار نصي يغني عنها .إن وسائل القراءة الصوتية الخاصة لمساعدة ذوي المشاكل البصرية ,تقوم أيضا ً بقراءة خيارات النص تلك, وكذلك الحال بالنسبة لمواقع المكتبات القائمة على أساس النص .كما قد تم إيجاد تكنولوجيات متنقلة جديدة تعتمد على النص بشكل أكبر ,وهي تتضمن أمور مثل .الهواتف الخلوية ?الخ ,المفكرة الشخصية الرقمية من سيقوم بزيارة موقعي اإللكتروني ! ...ولماذا ؟ قم بالكتابة لهم بشكل خاص .قم باستعمال مفردات مناسبة أو وضحها بالتعريف .قم باستعمال مفاهيم عريضة للمفهوم الخاص بك قبل أن تقوم .بتطوير موقعك وذلك كي تتجنب البعد والتشتت عن الفكرة األساسية قم بتشكيل /تصميم /صفحة قياسية أساسية للموقع اإللكتروني ال تفترض أن الشيء الذي تراه أنت هو ذات الشيء الذي سيراه المستخدمون اآلخرون .يوجد القليل من الثبات ما بين المنصات التي أحجام الشاشات ,األلوان وأنواع الحروف ,تنطلق منها المعلومات وكذلك حتى في أذواق ,الموجودة أصالً كخيار أول في البرنامج األفراد بخصوص تصفح اإلنترنت الحيز الحقيقي للشاشة .ضع المعلومات األكثر أهمية ضع في اعتبارك ِّ .إلى أعلى يسار الشاشة .ال تفترض حلول بخصوص الشاشة أو تفترض حجمها :قم بتسهيل اإلطالع إن غالبية المشاهدين ( حوالي )%75يقومون أوالً باإلطالع على النص والقوائم للحصول على المعلومات ( ويقومون بتجاهل الصور) . قم بالتقليل من التفاصيل والعناوين الفرعية في الصفحة األساسية ( ,أقل ).من %20يقومون بالقراءة التفصيلية كلمة كلمة اجعل العرض والتصفح عاديا ً من حيث المقاييس قم بوضع الشعارات ,القوائم ,والصفات في مواقع ثابتة وباإلمكان .توقعها .قم باستعمال (وصلة العودة إلى أعلى) في نهاية الصفحات الطويلة بشكل بديهي قم بتسمية الروابط /الوصالت حسب المضمون والـ الخاص بالصفحة .قلل من وجود المساحة البيضاء على )(URL .صفحات القائمة األساسية .إن هذه المسألة تسلسل وتسهل عملية البحث قم ببناء المضمون من خالل صفحات متصلة إن الصفحات الموصولة يجب أن تكون ثالثة أو أقل ضمن الموقع. ويجب دائما ً أن يعرف الزائرون أين هم على الموقع ( أين يتواجدون .على موقعك) ,وأن يكونوا قادرين على الرجوع أو نقطة البداية اجعل النص سهالً للقراءة ( انظر إلى الدليل الخاص بالكتابة لموقع إلكتروني ) استعمل بحرية كل من النشرات القصيرة ,العناوين , العناوين الفرعية ,وحجم الحرف .وقم بفصل أجزاء النص بواسطة مساحات بيضاء أشكال الحروف :قم باستعمال أنواع الحروف العادية أو الحجم الشائع هذا إن لم تستعمل نوع الحروف الموجودة أصال كخيار ,استعماله أول في البرنامج .إن استعمال البنوط المناسبة للحروف التي تظهر على الشاشة يحكمها قياس الشاشة ودرجة الوضوح عليها قم باستعمال حجم كبير من الحروف في المواقع التي تخاطب األطفال .الصغار وكبار السن لقد أظهرت األبحاث وجود اختالف بسيط من حيث سرعة القراءة أو .مسألة التفضيل عند استخدام أحجام وبنوط مختلفة قم باستعمال نوع واحد من البنوط لتوضيح ,االتجاهات والتجوال ,وقم باستعمال بنطا ً آخر للمضمون .ال تقم باستعمال أكثر من نوعين من البنوط ضمن نفس الموقع :استعمل األلوان بحكمة .إما أن تقوم بتحديد نوعية كل األلوان أو ال تفعل ذلك مع أي منها إن عدم تحديد أي منها سوف يتعارض مع ترتيبات البرمجة الخاصة بكومبيوتر الزائر .في حين أن قيامك بتحديد بعض األلوان فقط ,سوف يجعل اآلخرين يعيدون ترتيبات البرمجة على أجهزتهم ,وهكذا فإن ألوانك المحددة .قد تكون مجموعات أو خلطات غير جميلة مع تلك الترتيبات األصلية قم باستعمال ألوان تختلف عن بعضها البعض بشكل كبير وذلك بالنسبة للون الخلفية من جهة ولون النص من جهة أخرى .ومن المفضل أن تكون الخلفية .فاتحة) اللون وأن يكون النص داكن اللون .تجنب الخلفيات التي تؤثر سلبا ً على وضوح النص استعمل لوحة ألوان آمنة للمتصفح وتتألف من 216لونا ً .إن هذه األلوان تتسم بالمقاييس المألوفة لجميع المتصفحين :الصور إن الصور يجب أن ال تتجاوز 75وحدة من وحدات تشكيل الصورة للبوصة إن هذا هو الحد الذي باإلمكان توصيله عبر اإلنترنت (Pixels) . .الواحدة أما ما يزيد عن ذلك فسوف يؤدي إلى بطء عملية التنزيل على الجهاز ,دون أي .زيادة على مدى الرؤية وذلك للصور الفوتوغرافية ومن مثل تلك التي ) ( JPGقم باستعمال ملفات الـ للصور مثل ) ( gifتحتوي على ألوان مظللة .في حين قم باستعمال ملفات .األشكال ذات المجاالت الملونة الواسعة والثابتة نظام بديل يتكون من الرموز .وهو عبارة عن نص وصفي يحل محل ,ويصف مضمون أو وظيفة ودور جميع الصور .إن هذا النظام يالئم ذوي المشاكل البصرية .وكذلك يالئم أولئك الذين يقومون بإغالق أو إلغاء الصور في وسيلة تجوالهم .وكذلك فإن هذا النظام مفيد في مجال وسائل التجوال الخاصة بوصالت المكتبات ,وكذلك للوسائل ذات األساس الرقمي تجنب عرض الصور على أنها وصالت .أما إذا كان ذلك ضروريا ً , .فإن النص البديل يجب أن يصف محتوى الصفحة الموصلة تجنب اإلشارة إلى الصور على أنها نص .بشكل ديكور أو غير ذلك فقد تتحقق قيمة بصرية ضئيلة في حالة وجود حجم نسبي للنص كما وصفنا .أعاله المؤلفة من ) ( Gifتجنب استعمال الصور الشفافة أو الصور ذات الـ وحدة واحدة ملونة من األجزاء التي تتكون منها الصورة على الشاشة دون وجود سبب جيد لعمل ذلك. :الوصالت .كن جيدا ً في الوصف قدر اإلمكان عندما تقوم بوصف مضمون وصلة ما قم بترك فراغ ثم ضع إشارة العمود ثم فراغ ,وذلك للفصل ما بين الوصالت .التي تأتي بشكل متتالي ".ال تستعمل عبارات مثل "اضغط هنا" " ,أدخل تجنب الصور المستعملة كوصالت ,فمن الصعب من ناحية اإلبصار اإلنتباه إلى .كونها وصالت للقوائم النازلة من األعلى إلى ) (Roll Overتجنب أسلوب االنسياب المستمر األسفل ,إذ أنه من الصعب من ناحية اإلبصار معرفة ما إذا كانت هذه القوائم كاف لمحتويات تحتوي على وصالت .كما أنه من الصعب تقديم وصف ٍ الوصالت كن واضحا ً ,أي تأكد من أن كتابتك في أن السطر الخاص بموضوع الرسالة في البريد اإللكتروني ,أو العنوان في صفحة الموقع اإللكتروني يعكس محتوى رسالتك أو صفحتك . قم باستعمال لغة مناسبة ,إذا تم توجيه سؤال إليك عما إذا كنت عاطفيا ً أم ال ,ال تقوم ب إ رسال الرد فورا ً ,قم بحفظها ,ثم راجعها فيما بعد .تذكر أنه ليس باستطاعة أحد أن يعرف حالة مزاجك ,أو يرى تعابير وجهك ...الخ .كل ما يصلهم منك هو عبارة عن كلماتك ,كما أن كلماتك قد تعطي عكس ما تشعر به. ال تستعمل الحروف الكبيرة في كل ما تكتب (في حالة الكتابة باللغة اإلنكليزية), إن ذلك مساويا ً للصراخ. كن موجزا ً ,إذا كانت رسالتك قصيرة ,فإن احتمال قيام الناس بقراءتها يكون أكبر ركز على الكتابة الفعالة لصفحات الموقع اإللكتروني اترك انطباعا ً جيدا ً ,إن كلماتك والمضمون الخاص بك يعبر عن ذاتك .قم بمراجعة /تنقيح كلماتك والصور المرفقة قبل ارسالها . أحسن اختيار المعلومات التي تضمنها في رسائلك اإللكترونية أو في الموقع الكتروني ,إن المعلومات الموجودة على اإلنترنت شديدة العلنية واالنتشار, ويمكن أن يراها أي شخص في العالم بما في ذلك أصحاب النوايا السيئة وشركاء المستقبل ومستخدمي الحكومة . .... قم بذكر أعمال اآلخرين التي تقوم باستعمالها قم باستعمال قوائم التوزيع بشكل مناسب ,وذلك بعد الحصول على التصريح أو اإلذن. ال تبدي أي استجابة لحاالت التهجم الشخصي أو الرسائل المسيئة المعممة ،إذا وصلتك قم باالتصال بالمسؤول عن إدارة موقعك التخاذ اإلجراء المناسب. تذكر أنك لست مجهوالً ,أي أن الشيء الذي تقوم بكتابته في رسالة إلكترونية أو في صفحة موقع الكتروني ,يمكن أن يتم تتبعه حتى يتم الوصول إليك من خالله. تقبل اآلخرين ,إذا كنت منزعجا ً من ما تقرأ أو ترى على اإلنترنت , فتسامح فيما يخص سوء التهجئة أو الغباء. احترم قوانين حقوق الطبع ,ال تستعمل الصور أو المضمون الخاص باآلخرين دون الحصول على موافقتهم .كما عليك أن ال تقوم بإعادة إرسال الرسائل اإللكترونية التي تصلك ,أو باستعمال مضمون خاص بموقع ما دون إذن. نبدأ الدرس األول بالتعرف على هذه اللغة ومتطلباتها ،، من صفحات ويب World Wide Webتتكون الشبكة الدولية تربط بين األجهزة المتشابكة بالشبكة وتخزن كل البيانات الخاصة Web serverباالنترنت في صفحات على أجهزة حاسب آلي تسمي أوالً :ما هي هذه اللغة ؟ وفيم تستخدم ؟ HTMLهي لغة : Hyper Text Markup Languageوهي أحرف اختصار لـ ومعناها -:لغة ترقية النصوص ،الحرفية " لغة المغاالة في ترقية النص " . وتستخدم هذه اللغة في برمجة وإنشاء صفحات اإلنترنت وبالتالي مواقع اإلنترنت المختلفة ،وهي من أسهل اللغات وأبسطها في هذا المجال . وكما ذكرت فهي األسهل واألساس . والتي تم تطويرها من جانب GMLأصدرت شركة أي بي أم لغة SGML (Standardمنظمة ايزو العالمية إلى لغة ولكنها كانت لغة )Generalized Mark-up Language والتي تم إصدار طبعة 4.01منهاHTML ,معقدة فتم تطويرها إلى ثانيا :ما هي مميزات هذه اللغة عن غيرها ؟ عدم ارتباطها بنظام تشغيل معين ،وبالتالي فهي تعمل على أي جهاز وبأي نظام تشغيل . إمكان استعراض الصفحات المبرمجة بها من على القرص الصلب دون االحتياج إلى رفعها إلى خادم إنترنت . Internetيتم مباشرة تفسير األوامر من قبل أي مستعرض إنترنت كـ Explorer & Fire Fox & Netscape. بساطة قواعد اللغة فال توجد بها قيود كثيرة . مما يعطي الصفحة Multimediaإمكان إدراج ملفات الوسائط المتعددة أو حيوية أكثر . إمكان ربط الصفحات ببعضها بأوامر بسيطة مما يسهل التنقل بينها . يمكن اإلطالع على كود أي صفحة مما يعطي الباحث إمكانية معرفة الماليين من األمثلة واألكواد . ثالثا ً :ما هي متطلبات العمل بهذه اللغة ؟ ليس للعمل بهذه اللغة متطلبات خاصة وإنما متطلباتها متوفرة على كل جهاز وعلى كل نظام تشغيل ومن أهم ما نحتاج : -1برنامج لكتابة األوامر ،وهو ليس برنامجا خاصا ً ،بل أي محرر Notepad & WordPad .نصوص كـ -2مستعرض لترجمة األوامر وعرض التصميم ،وقد ذكرنا األمثلة أعلى . 3واألهم في ذلك كله أال وهو :معرفة األوامر أو األكواد . تتكون اللغة من مجموعة من االكواد تكتب في ملف نصي ثم تحفظ بامتداد Html or htm ما هي إال مجموعة TAGsواألكواد أو كما يسميها البعض الوسوم من الرموز تتيح التحكم في عرض النصوص والصور والجداول وما إلى ذلك . وتعرض هذه االكواد بواسطة محركات البحث على اإلنترنت هذه المحركات تترجم االكواد إلى ما تراه على الصفحات والسمة العامة في تلك الوسوم أنها لها بداية ونهاية (باستثناء الوسوم التي ليس لها تأثير وإنما هي لإلضافة كوسم الصور مثال فهو يدرج الصورة وليس له تأثير ) يبدأ تأثير الوسم على كل الكائنات (األشياء مثل النصوص مثال ) بكتابة وينتهي عند وسم ><TAGأمر البداية والذي غالبا ما يكون شكله </TAG>.النهاية (اإلغالق) والذي يكون شكله <TAG w=#وللعلم فإن لغتنا هذه ال تعتدد بالترتيب بمعنى أن > <TAG h=# w=#هي >h=# > <TAGهي ><TAG><TAGوال بالمسافات بمعني أن ><TAG بمعنى أنها هي smallأو CAPITALكما ال تعتد بالحروف الكبيرة <tag> .هي ولكن -:تعتد بالمسافات وسط الكلمات بمعنى أنها تتعامل مع "بسم هللا " على أنها كلمة واحدة وتتعامل مع بسم هللا على أنها كلمتين .ويظهر مثال فلكي pic 1.gifهذا كثيرا معها .فلو أن لديك ملف إسمه تتعامل معه اللغة بشكل سليم يجب وضعه بين عالمتي تنصيص " " . <كما أن األمر يبطل بإضافة مسافة بينه وبين القوس الفاتح مثل <TAGهذا الشكل خطأ وال يضر المسافة مع الغلق >TAG > . هل البد أن أكون متصل بشبكة اإلنترنت ؟ ال يشترط أن تكون متصل طول الوقت بشبكة االنترنت فنحن نكتب الملف والصفحات واالكواد وننسق جميع صفحات الموقع بدون االحتياج لالتصال بالشبكة ولكن عند نشر موقعك أو تعديله البد أن تكون متصال بالشبكة البد من أن تعاين صفحتك بجميع المتصفحات حتى تتأكد أن المستفيد سوف تظهر لدية صفحتك مهما كان نوع المتصفح الذي يستخدمة هل يمكن االعتماد على هذه اللغة في عمل صفحة موقعي الخاصة ؟ بالطبع يمكننا االعتماد عليها في عمل الصفحة بالكامل ولكن عندما تكون صفحتك خدمية ويستخدمها عدد كبير من الناس فأنت محتاج حركة وتطوير ويمكنك االستعانة بأي من اللغات األخرى مثل CSSالجافاسكربت أو