تطور تصميم المواقع
المحتويات
- خطوات تطوير المواقع الالكترونية
- لغات البرمجة المستخدمة في تصميم المواقع الالكترونية
- مراحل تطور اساليب تصميم المواقع
- تصميم المواقع بالذكاء الاصطناعي
 |
خطوات تطوير المواقع الالكترونية |
يتضمن تطوير أو برمجة صفحات المواقع الإلكترونية (Developing Web Pages) الخطوات الآتية: تعلّم تقنيات ولغات برمجة المواقع الإلكترونية، ويحتوي الإنترنت على كثير من المواقع التي تساعد على تعلّم هذه اللغات مجاناً. استخدام برنامج المحرّر (Editor)؛ لأنّ ملفات كود صفحات المواقع الإلكترونية بالأساس عبارة عن ملفات نصية (Text Files)، ويستطيع المبرمج إنشاء صفحات المواقع الإلكترونية باستخدام برنامج بسيط مثل نوتباد (Notepad) فقط، ولكن عند إنشاء صفحات كبيرة ومعقدة سيكون من الصعب قراءة ملفات نوتباد، لذا سوف يحتاج المبرمج إلى استخدام برنامج تحرير يحتوي على المزيد من الميزات المتقدمة مثل ترميز الألوان، ومن الأمثلة على هذه البرامج نوتباد++ (++Notepad) ومايكروسوفت فيجوال ويب ديفيلوبر إكسبرس (Microsoft Visual Web Developer Express)، وبي بي إديت (BBEdit) المخصص فقط لأجهزة ماك (Mac)، وتعدّ برامج مجانية، ولكن بعضها بحاجة إلى الشراء مثل أدوب دريمويفر (Adobe Dreamweaver)، وميكروسوفت فيجوال ويب ديفيلوبر (MS Visual Web Developer) غير المجاني. إنشاء صفحات المواقع الإلكترونية عن طريق إنشاء ملف نصي (txt)، مثل (page.txt)، ثمّ تغيير امتداد الملف إلى (html) فيصبح اسمه (page.html)، ثمّ فتح الملف باستخدام نوتباد أو أيّ برنامج تحرير، ثمّ كتابة كود إتش تي إم إل (HTML) أو إكس إتش تي إم إل (XHTML) للصفحة، ثمّ حفظ التغييرات، وفتح الملف على المتصفح. التأكد من أنّ الموقع الإلكتروني الذي تمّ إنشاؤه متناسقاً من خلال تنزيل المتصفحات الرئيسية مثل إنترنت إكسبلورر (Internet Explorer)، وفايرفوكس (Firefox)، وسفاري (Safari)، وكروم (Chrome)، وأوبرا (Opera) حيث إن جميعها مجانية، واختبار الموقع الإلكتروني على كل متصفح. التأكد من أنّ الصفحات قانونية، وتتوافق مع المعايير والتوصيات، ويُمكن التحقق من صحتها باستخدام أداة التحقق من صحة العنوان من خلال الرابط الآتي: [http:\\validator.w3.org اضغط هنا] الذي يختبر إذا كان الموقع يحتوي على أخطاء أم لا. تصميم صفحات المواقع الإلكترونية. زيارة مواقع مختلفة ودراستها للحصول على بعض الأفكار لبناء الموقع الإلكتروني، فعند الدخول إلى موقع معين، يُمكن رؤية مصدر الصفحة عن طريق النقر بواسطة زر الفأرة الأيمن على منطقة خالية في المتصفح، وتحديد مصدر العرض (View Source) فيظهر الكود المُستخدَم لإنشاء هذه الصفحة، وقد تختلف طريقة عرض مصدر الصفحة في المتصفحات المختلفة.
 |
| لغات البرمجة المستخدمة في تصميم المواقع |
من أهمّ مهارات البرمجة التي يجب على جميع مطوري المواقع الإلكترونية معرفتها
ا:[١] لغة إتش تي إم إل 5(HTML 5)
. لغة سي إس إس 3 (CSS 3).
لغة جافا سكريبت (JavaScript).
لغة بي إتش بي (PHP).
لغة إس كيو إل (SQL).
مراحل تطور اساليب تصميم المواقع |
تأثير wordpress علي مجال تصميم المواقع
اولا الشكل التقليدي لتصميم المواقع باستخدام لغات البرمجة
مثال: على المحتوى الفعلي لصفحة ويب:
<html>
<head>
<title>صفحة إنترنت</title>
</head>
<body>
<p>هذا النص داخل الصفحة</p>
</body>
</html>
نظرة عامة
يستخدم ووردبريس نظام قوالب يعتمد على (معالج القالب) وحديثا أصبح وردبريس يستعمل نظام واجهة برمجة التطبيقات حيث أصبح من الأمكان أستخدام وردبريس كتطبيق خلفي وربطه بتطبيقات مختلفة أمامية.
القوالب
يستطيع مستخدمو ووردبريس تركيب القوالب (Themes) أو التبديل بينها. يسمح القالب بتغيير مظهر المواقع التي تُنشَأ بووردبريس. يمكن تركيب القالب أو حذفه بدون الخوف من تغير أي محتويات في الموقع. كل موقع تم إنشاؤه بواسطة وردبريس يحتاج إلى قالب (Theme) واحد على الأقل ليعمل وأي قالب يجب أن يتم تصميمه بمعايير قياسية (Standards) يعمل برنامج وردبريس بلغة بي اتش بي (PHP) ولغة النص التشعبي (HTML) ولغة تنسيقات النصوص والصفحة (CSS) . القوالب يمكن تركيبها مباشرة عن طريق المتجر الموجودة في لوحة تحكم وإدارة برنامج ووردبريس أو يمكنك تحميل القالب كمجلد بإستخدام بروتوكول نقل الملفات (FTP) المشهور لرفع الملفات الفولدرات .
لغة وأكواد بي إتش بي ولغة النص التشعبي والستيل شيت الموجودة في أي قالب يمكن تحريرها وإضافتها بسهولة وبميزات أكثر تقدما وتطورا . يمكن تصنيف قوالب ووردبريس إلى تصنيفان وهما قوالب مجانية وقوالب احترافية تحتوي على خيارات أكثر (غير مجانية)، معظم القوالب الموجودة في موقع ووردبريس (WordPress.org)، أما القوالب الاحترافية الممتازة فيجب شراءها من مواقع البيع المشهورة أو من خلال مواقع مطوريها .مستخدمي ووردبريس يمكنهم أيضا إنشاء وتطوير قوالبهم الخاصة بأنفسهم إذا كان لديهم بعض المعرفة والمهارة بكيفية عمل ذلك . إذا لم يكن لدى مستخدم ووردبريس معرفة بكيفية إنشاء وتطوير قالب فيمكنه تنزيل أحد القوالب المجانية من القوالب المتوفرة على موقع وردبريس الرسمي وهي قوالب رائعة يتم فحصها عن طريق فريق فحص القوالب باستمرار.
الإضافات
الإضافات هي برامج مساعدة لمعمارية ووردبريس، وهي تقدم العديد من الوظائف المخصصة لتمكين إحتياجات المستخدميين الخاصة وزيادتها، الإحتياجات الخاصة مثل تقوية تواجد موقع المستخدم على محركات البحث لتحسينها SEO ومثل مداخل العملاء لإظهار المعلومات الخاصة للعميل للمستخدمين المسجليين Logged in users في نظام إدارة المحتوى (كـ ووردبريس) لمزيد من ظهور المحتويات كالويدجات وشريط الإبحار navigation bar . ليس كل الإضافات المتوفرة تعمل بصوره جيدة إذا ما تم التحديث للووردبريس وربما لاتعمل على الإطلاق إلا إذا قام مطوريها بتحديثها بما يتناسب مع الإصدار الحديث من ووردبريس وتنوه دائما منظمة ووردبريس عن ذلك في موقعها الرسمي أسفل أي برنامج مساعد تقوم بتنزيله أو تركيبه في موقعك.
الخصائص والمميزات
- نظام القوالب: حيث يمكنك تغيير التصميم بسهولة وابتداءً من الإصدار 3.4 تم دعم تعديل القالب والمعاينة بشكل حي ومباشر.
- إدارة متكاملة للنظام: توفر لوحة تحكم لإدارة النظام بشكل متكامل.
- روابط صديقة لمحركات البحث.
- تدعم الإضافات Plugins،وهي أحد أهم الميزات التي تتمع بها الووردبريس وتضم أكثر من 30 ألف إضافة.
- إمكانية إنشاء التصنيفات بشكل شجري (متداخل).
- التنبيهات والتعقيبات: تنبهيك في حال تم ربط موضوع مع موقع آخر.
- إمكانية إنشاء صفحات ثابتة.
- إمكانية مشاركة الكتابة مع عدد من الأشخاص.
- إنشاء قائمة بالزوار الذين كتبوا تعليقات في المدونة.
- يمكن إيقاف بروتوكول إنترنت محدد من كتابة أي تعليق.
- دعم للوسوم (Tags).
- إمكانية إنشاء مربعات في القائمة الجانبية بسهولة.
- تطبيقات خاصة لأنظمة الجوالات والأجهزة اللوحية.
- تقديم المحرر الجديد Gutenberg مع إنطلاقة الإصدار 5.0
اساليب تصميم المواقع من مجرد كتابة الاكواد البرمجية الي المواقع التي تساعد المستخدم لعمل تصميم للموقع الخاص به مثل موقع wix
موقع wix الذي يسمح للمستخدم بانشاء موقع كامل دون خبرة سابقة في برمجة المواقع وكتابة الاكواد البرمجية
كما يوجد الكثير من المواقع التي تقوم بتصميم الموقع مجاني بشكل كامل وذلك يغني البعض عن تعلم تصميم المواقع وعمل موقع جاهز بالعديد من القوالب الجاهزة واشكال
متعددة يمكن الاختيار منها بكل بساطة
 |
Sketch2Code |
تصميم المواقع بالذكاء الاصطناعي
اداة sketch2code هي اداة ابتكرتها شركة microsoft لتحويل مجرد رسمة علي الورق الي تصميم موقع الكتروني
الذكاء الاصطناعي؛ مغير قواعد اللعبة المعروف في مجال التكنولوجيا ، لم يفشل أبدًا في إدهاشنا من خلال إمكاناته الهائلة. يجعل الذكاء الاصطناعي أجهزة الكمبيوتر أكثر ذكاءً من أي وقت مضى ، وهنا سنناقش أداة جديدة من المحتمل أن تجعل تطوير الويب تجربة ممتعة.
أطلق مختبر الذكاء الاصطناعي في Microsoft مؤخرًا "منشئ مواقع الويب" المعروف باسم Microsoft Sketch2Code ، وهو حل قائم على الويب يحول تصميم واجهة المستخدم من صورة إلى كود برمجي (تنسيق HTML). دعنا نلقي نظرة على ما يفعله:
بكل بساطة يمكنك تحويل صورك ورسوماتك إلي أكواد html عن طريق الدخول إلي الموقع من هنا - موقع Sketch2Code - و الضغط على زر Upload your Own لرفع صورة جهازك إلي الموقع أو عن طريق الضغط على Take A Picture لإلتقاط صورة جديدة و من ثم رفعها إلي الموقع ، بعد ذلك أنتظر حتي يتم رفع الصورة و من ثم سيشرع الموقع في تحويلها إلى كود HTML .
 |
| تصميم موقع باستخدام الذكاء الاصطناعي |
- من السهل جدًا على مطوري الويب في الواجهة الأمامية إنشاء كود برمجي عملي من خلال تحميل رسم / صورة على الموقع. إنها مبتكرة وسريعة وإنتاجية وتستهلك موارد أقل. كل ما تحتاجه هو اتصال جيد وأنت على ما يرام.
- يمكنك استخراج الكود بصيغة HTML . يمكنك استخراج الكود بتنسيقات أخرى ، مثل XAML أو التطبيقات العامة لمنصات windows العالمية.
- متابعة ضخمة عبر GitHub للحصول على المساعدة والدعم. منصة جذابة للمبتدئين لتعلم أساسيات تطوير الويب.
القيود:
- ليس بديلاً عن برامج وأدوات تطوير الويب المعروفة ، ويفتقر إلى الميزات وإمكانية الوصول التي توفرها لغات البرمجة مثل React, Angular وغيرها من لغات البرمجة الحديثة.
- يقوم بإنشاء كود frontend، ولكنه يفتقر إلى القدرة على توفير كود backend.
- إنه بالتأكيد إنجاز مثير للإعجاب لشركة Microsoft في إنشاء تطبيق ويب قائم على الذكاء الاصطناعي. لها حدودها ولكنها قد تتحسن في المستقبل.
تعليقات
إرسال تعليق