Tag

ويب Archives – IT Solutions

مراحل انشاء وتصميم موقع ويب

 

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

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

Website Tracking: How Websites Track You - Blog - CookiePro

لذلك ، دعنا ندخل في خطوات إنشاء موقع ويب لك. الخطوات إلى ذلك سهلة وبسيطة لمتابعة وتنفيذ.

مراحل انشاء وتصميم موقع الويب website التخطيط لبناء الموقع، تصميم صفحات الويب للموقع، الإعداد والتجهيز لصفحات الويب، ثم مرحلة التنفيذ، رفع ونشر الموقع عبر الانترنت

ماهي مواقع الويب Website

عبارة عن صفحات ويب مرتبطة ببعضها البعض ومخزنة على نفس السيرفر(الخادم) تحت اسم معين، يتم زيارة مواقع الويب عبر الانترنت من خلال متصفح الويب Browser عن طريق جهاز الكمبيوتر Computer أو الهاتف المحمول Mobile Phone

ماهي صفحة الويب 😉

مستند الكتروني على الانترنت يتم عرضها من خلال برنامج متصفح الويب

ماهي الصفحة الرئيسية 🧐

أول صفحة في موقع الويب ومن خلالها يتم الانتقال لباقي صفحات الويب

ماهي عناصر صفحة الويب 🤓

تتكون من مجموعة من الصور والنصوص والصوت والفيديو

الفرق بين صفحات الويب التفاعلية والثابتة 🤔

يوجد صفحات ويب ثابتة Static web pages

صفحات ويب تفاعلية Interactive web pages

صفحات الويب الثابتة ✅

عناصرها: نصوص – صور – صوت – لقطات فيديو …. يقوم المصمم بتصميم محتواها الصفحة ويكون محتواها ثابتا لا يتغير

لا يتم تغيير محتوي الصفحات إلا بإدخال تغيير على الشفرة من المصدر يدويا

صفحة الويب الثابتة تعرض معلومات لمشاهدتها فقط

لا يستطيع الزائر إجراء أي معالجة على محتوي صفحة الويب الثابتة

تستخدم أوامر Html في تصميم الصفحات الثابتة

صفحات الويب التفاعلية Interactive web pages ✅

عناصرها (نصوص – صوت – صور -لقطات فيديو بالإضافة إلي التفاعل

صفحات الويب التفاعلية تعرض محتوي يتيح للزائر التفاعل مع المحتوي ومعالجته

الصفحة التفاعلية تتغير وتتأثر بما يجريه عليها المستخدم من عمليات

تستخدم أوامر Html بالإضافة للغات برمجة تفاعلية مثل لغة جافاسكريبت Javascript و لغة PHP

نبدء الان ب (مراحل تصميم وإنشاء مواقع الويب) 😉

الدروس في نقاط 😀

المرحلة الأولي:التخطيط لبناء الموقع

المرحلة الثانية:تصميم صفحات الويب للموقع

المرحلة الثالثة: الإعداد والتجهيز لصفحات الويب

المرحلة الرابعة: مرحلة التنفيذ

المرحلة الخامسة: رفع ونشر الموقع عبر الانترنت

 

المرحلة الأولية: التخطيط لبناء الموقع 🤔

1 – رسم تخطيط بسيط لصفحات الموقع على الورقة (الصفحة الرئيسية للموقع – باقي صفحات الموقع المرتبطة بالصفحة الرئيسية)

2 – تحديد البيانات والمعلومات التي تتضمنها كل صفحة ويب (المعلومات والخدمات التي يقدمها الموقع)

المرحلة الثانية: تصميم صفحات الويب للموقع 😇

1 – تصميم شكل الصفحة الرئيسية وصفحات الموقع

2 – تحديد التنسيقات المختلفة لصفحات الويب مثل ألوان الخلفيات – حجم الخطوط – نوع الخط ونوع اللون – أماكن وضع النصوص – الصور – لقطات الفيديو بصفحات الويب

3 – تحديد الارتباطات التشعبية داخل الصفحة الرئيسية وصفحات الموقع

المرحلة الثالثة: الإعداد والتجهيز لصفحات الويب 😊

1 – استخدم محرر أكواد (منسق نصوص) مثل النود باد Notepad في إعداد البيانات النصية التي سوف توضع في صفحات الويب، ثم حفظ النص داخل ملف ووضعه داخل مجلد.

2 – إعداد وتجهيز ملفات الصوت والفيديو وحفظها داخل مجلد.

المرحلة الرابعة: مرحلة التنفيذ 🤗

1 – تحويل التصميم الورقي إلي صفحات ويب ليمكن عرضها من خلال متصفحات الويب:

2 – إضافة البيانات(نصوص – صور – صوت – فيديو ) في صفحات الويب

3 – إنشاء الارتباطات التشعبية بين صفحات الويب حتي يسهل التنقل بين صفحات الموقع وذلك باستخدام أوامر Html

المرحلة الخامسة: رفع ونشر الموقع عبر الانترنت

1 – حجز عنوان للموقع

2 – تخصيص مساحة تخزينية (استضافة) للموقع على أحد أجهزة السيرفر(الخادم)

3 – نشر ورفع الموقع عبر الانترنت وإعداده للعمل بشكل صحيح.

 

أدوات مفيدة لمطوري الويب

 

في هذه السلسلة سنقدم مجموعة من الأدوات التي يحتاجها كل مطور للمواقع عامة، السلسلة سوف تتمحور حول مواقع و أدوات تجعل من أعمال كل مطور احترافية اذا استخدمها 🙂

اول اداة : FireBug

 

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

ثانيا اداة : Adobe Kuler

How to use Adobe Color to perfect your design - Videomaker

أداة جد رائعة من شركة أدوبي، هذه الاداة تمكنك من تحديد الالوان المتناسقة فيما بينها، فهي تمكنك من تحديد 5 ألوان متناسقة سواء لأستعمالها في المواقع أو كذالك للفوتوشوب للمصممين، الاداة توفر الالوان بHEX و كذالك RVB.

 

ثالثا اداة : ColorZilla

ColorZilla

هذه الأداة تمكن من تحديد الألوان على صفحة معينة، يمكنك تحديد أي لون تريده من أية صفحة مع مقارنة الالوان أيضا.

رابعا اداة – W3C CSS Validator

Projects · w3c/css-validator · GitHub

أداة رائعة و مفتوحة المصدر أيضا،.الأداة تمكنك من فحص أكواد الـCSS الخاصة بأية صفحة و في أي موقع، تقوم بفحص الأكواد و تحديد الأخطاء الموجودة في الاكواد.

خامسا اداة – CSS Gradient Generator

GitHub - michaelmang/Linear-Gradient-Generator: A simple site made with Vue.js that generates linear gradients.

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

 

بدون جافا سكريبت Toggle Switch طريقة عمل

 

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

تبديل التبديل لها وظيفة مماثلة لمربعات الاختيار ، ولكن على عكس مربعات الاختيار ، فإن التفاعل مع مفتاح التبديل عادة ما يكون له تأثير فوري على التطبيق أو النظام.

طريقة عمل switch btn بإستخدام input وأحد فقط و بدون javascript


تحتوي على البنيه الاساسيه

الخاصية الجديدة هي
appearance: none;

و الهدف منها التخلص من التنسيق الأساسي الذي يقوم المتصفح بعمله لل
input checkbox

بعد التخلص من التنسيق الأساسي من الممكن أضافه التنسيق الخاص بنا بكل سهولة.


نلاحظ ان الأب
.switch

يحتوي على الإبن
.switch::before

 


تم إضافة تنسيق للعنصر before

بعد أضافه التنسيق الخاص بنا


يتم تغيير خلفيه الأب
و تغيير خلفية و مكان الإبن

نستخدم
:checked
من أجل تحديد إذا تم النقر على input checkbox

إذا تم النقر يتم تطبيق الخواص


الخاصية appearance
غير مدعومة في كل المتصفحات و يجب أضافه ال prefix

 

error: Content is protected !!