تصميم مواقع الانترنت (Web)

فيكم تنضموا كروب قديم من 5 سنين وبي الكثير المحترفين حتى الايام القادمة انزل معلومات شروحات إن شاء الله و فيكم تناقشوها هنا
https://t.me/ms97221

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

🔴 تحذير اذا وصلتك مثل هيج رسالة لا تفتحتها هذا اختراق لحسابك التليكرام

بعض المواقع التي يمكنك استخدامها لصنع تطبيقات باستخدام أكواد HTML، CSS، وJavaScript مجانًا:

1. PhoneGap
(https://phonegap.com/):
- يسمح لك بإنشاء تطبيقات موبايل هجينة باستخدام HTML وCSS وJavaScript.
- يدعم العديد من المميزات مثل الوصول إلى أجهزة الهاتف (الكاميرا، الموقع، إلخ).

2. [AppGyver](https://www.appgyver.com/):
- منصة مجانية تسمح لك ببناء تطبيقات موبايل باستخدام أدوات مرئية مع القدرة على إضافة كود HTML وJavaScript.
- لا يتطلب خبرة برمجية عالية ويتيح لك إنشاء تطبيقات متقدمة.

3. [Appery.io](https://appery.io/):
- يوفر بيئة تطوير تطبيقات تعتمد على HTML5 وCSS3 وJavaScript.
- يمكنك من استخدام واجهة سحب وإفلات وتصميم تطبيقات مخصصة.

4. [Ionic Framework](https://ionicframework.com/):
- يمكنك استخدام HTML وCSS وJavaScript لإنشاء تطبيقات هجينة قابلة للتشغيل على Android وiOS.
- يوفر مكتبة غنية من المكونات الجاهزة لتسريع عملية التطوير.

5. [Thunkable](https://thunkable.com/):
- منصة تتيح لك إنشاء تطبيقات بدون أكواد، ولكن يمكن تخصيص بعض الأكواد مثل HTML وJavaScript للحصول على مميزات متقدمة.

هذه المنصات تقدم خدمات مجانية مع إمكانية استخدام أكواد HTML، ويمكنك البدء بتجربتها لتطوير تطبيقك.

هذي اكثر من 15 مكتبة تساعدكم بعمل انيميشن Animation او تحريك للعناصر باستخدام CSS تفيدكم اذا مطورين ويب او تستخدمون HTML / CSS .. 🚀



1- Animate. css
animate.style

2- Magic CSS animations
minimamente.com/project/magic/

3- Animista
animista.net

4- Hamburgers by Jonathan Suh
jonsuh.com/hamburgers/

5- Three Dots
nzbin.github.io/three-dots/

6- Whirl
whirl.netlify.app

7- Mimic. css
erictreacy.github.io/mimic.css/

8- Hover. css
ianlunn.github.io/Hover/

9- CSS Animation Kit
angrytools.com/css/animation/

10- LDRS
uiball.com/ldrs/

11- Granim .js
sarcadass.github.io/granim.js/

12- AnimatiSS
xsgames.co/animatiss/

13- tsParticles
particles.js.org

14- Vanta. js
vantajs.com

15- imagehover.css
imagehover.io

16- Epic Spinners
epic-spinners.epicmax.co

17- Moving Letters
tobiasahlin.com/moving-letters/

18- particles.js
vincentgarreau.com/particles.js/

19- CSShake
elrumordelaluz.github.io/csshake/

‏﴿أَلا بِذِكرِ اللَّهِ تَطمَئِنُّ القُلوبُ﴾
‏- سُبحان الله .
- الحمدلله .
- لا إله إلا الله .
- اللهُ أكبر .
- سُبحان الله و بحمدهِ .
- سُبحان الله العظيم .
- استغفر الله و أتوبُ إليه .
- لا حول و لا قوة إلا بالله .
- اللهُم صلِ على نبينا محمد .

🔵ما هى تكلفة إنشاء موقع WordPress

الإجابة صفر .. !! نعم قد تتعجب فبعد ن قرأت كل ماسبق خُيل لك انك ستتكلف الكثير من الأموال للحصول على موقع ووردبريس.

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

ووردبريس

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

أو اى شركة استضافة من هذه الشركات

SiteGround Hosting



🟢أحد مميزات ووردبريس أنه مجانى 100% و يمكنك الإنطلاق بموقع من الزيرو تكاليف، فستجد أكثر من 3000 قالب مجاني فى إنتظارك و أكثر من 39500 إضافة (Plugins) متاحة للجميع و جاهزة للتحميل فى أوقت.

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


🔶خلاصة برنامج وردبريس
حاولت الرد على اكثر سؤال يشغل كل المبتدئين فى عالم الانترنت و الذي يأتيني نصً ما هو WordPress؟

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


🔴الاسئلة الشائعة


➖هل برنامج ووردبريس مجانى؟
نعم برنامج وورد بريس مجانى 100% و يمكنك تحميل ووردبريس من الموقع الرسمي.


➖هل يدعم ووردبريس اللغة العربية؟
نعم أهم ما يميز ووردبريس هو دعم اللغة العربية و أكثر من 50 لغة أخري.

➖هل يحتاج الووردبريس خبرة سابقة؟
قد يحتاج منك معرفة المباديء الأساسية و فهمها بدون الحاجة إلى دراسة الأكواد أو التعامل معها


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


➖هل يمكن تصميم موقع عقارات من خلال وورد بريس؟
نعم يمكنك تصميم موقع عقارات من خلال الووردبريس او موقع شركة أو متجر الكتروني. انه سهل و رائع.

🔰ما هو ووردبريس ؟ شرح WordPress


ما هو ووردبريس wordpress الذي اصبح يسيطر على عالم مواقع الإنترنت و لماذا صُنف الووردبريس واحد من أهم منصات إدارة المحتوي الرقمي CMS الاكثر استخداماً فى العالم.



فى مقالة اليوم سنعمل على شرح ماهو الوورد بريس لكل من يبحث عن انشاء مدونة ووردبريس بالطريقة الصحيحة او يعرف عنه أكثر فأكثر.

📌أهم نقاط المقالة:

-ماهو wordpress
-ووردبريس أفضل CMS
-مميزات الووردبريس
-تكلفة إنشاء موقع ووردبريس
-خلاصة تعريف الووردبريس


🔸ما هو wordpress
برنامج WordPress احد افضل و اشهر برامج ادارة المحتوي (CMS) فى العالم و المنصة الاولي فى عالم التدوين بلا منازع.

الووردبريس منصة تستطيع من خلالها إدارة موقع الكتروني بإحترافية و بدون الحاجة إلى خبرات سابقة فى إدارة مواقع الانترنت مع إمكانية تركيب العديد من الإضافات (Plugins) المجانية و المدفوعة مثلها مثل القوالب (Templates) التى اصبحت متوفرة لجميع انواع المواقع (الشخصية – التجارية – العقارية – المبوبات الإعلانية – إلخ).

ما هو الووردبريس
منصة كتابة المقالات فى ووردبريس سهلة التعامل
شرح WordPress
يتميز سكريبت ووردبريس بسهولة التعامل معه لكثير من المبتدئين فى مجال تصميم المواقع او المدونيين الباحثين عن إنشاء مدونة خاصة بهم وليس لديهم الخبرة الكافية فى تصميم موقع أو التعامل مع الاكواد المُعقدة. فى الوقت الذي يعتمد الكثير من المحترفين و المواقع المشهورة على سكريبت ووردبريس فى إدارة مواقعهم لما فيه من تنسيق و تنظيم متكامل من حيث البرمجة أو لوحة تحكم الادمن Dashboard.

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

الووردبريس سهل التعامل
الفكرة لا يمكن أن تتلخص فى إمكانية السحب و الإفلات (DRAG &DROP) فى بناء موقع مميز، و لكن الووردبريس يتميز بمرونة تغيب فى باقي المنصات الاخري.

البرمجة المنسقة من حيث ترتيب الأكواد مما يزيد من سهولة التعديل عليه.
التحديث و التطوير المستمر و سد الثغرات الأمنية كلما وُوجدت من الشركة المطورة.
تنسيق البرمجة جعل ووردبريس صديق لمحركات البحث العالمية وسهل الأرشفة.
تحميل ووردبريس من الموقع الرسمي مجانى 100%.


🔸برنامج wordpress أكثر منصة CMS استخداماً بنسبة 55%
حسب أخر الإحصائيات فأن معدل تحميل و تنصيب منصة ووردبريس قد تخطت رقم الـ 200 الف نسخة يومياً.

مما قد يعكس الصورة الحقيقية لنجاح هذا الأسكريبت العملاق فى إجتياح الصدارة و توجه 55% من مستخدمي الـ CMS إليه.

برنامج wordpress
تحميل ووردبريس يزيد بنسبة 77% عن المنصات الأخري لا سيما و أن هناك الكثير من المواقع ذات العلامة التجارية المشهورة يعمل موقعها الأليكتروني من خلال منصة ووردبريس و لاقت معها نجاح كبير و منهم.

➖بي بي سي امريكا BBC america
➖سوني ميوزيك Sony Music

فإذا كانت هذه المواقع تعمل من خلال موقع ووردبريس ما الدافع وراء عدم إستخدامك برنامج wordpress حتى الأن؟

🔸مميزات WordPress ووردبريس
هذا الجزء وحده يحتاج لمقال منفرد فى تعداد و حصر مميزات ووردبريس، و لكن كمبتداء ربما قد يكفيك أن تعرف أهم مميزات هذا العملاق هو دعمه لأهم لغات العالم الحية و اهمها لنا هى اللغة العربية و تجد ايضاً أن ووردبريس

💎سهل التدوين و رفع الصور و كتابة المقالات و تنسيقها بإحترافية عالية.
محبب لمحركات البحث لسرعة ارشفته بناءً على التنظيم الخاص بالبرمجة.
يمكنك من خلال الووردبريس بناء موقع مجانى 100%.

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

💎التحديثات المستمرة من الموقع الرسمي للحفاظ على حماية مواقع المُستخدمين.

ليست هذه النقاط فحسب بل قمنا بإختصار ماهو WordPress و أهم 10 اسباب لإستخدام ووردبريس للمبتدئين.


استخدم ووردبريس في كل انواع المواقع
تعتمد شركات كبري و مواقع كبيرة على الووردبريس فى ادراة موقعهم على شبكة الانترنت، فمن إحدى مميزات وورد بريس انه مُتعدد الاستخدام فيمكنك إنشاء المواقع التالية بإستخدام سكريبت ووردبريس.

الووردبريس

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

✨✨

🖥 فيما يلي قائمة بأحدث مجموعات التكنولوجيا الرائجة في عام 2024

1 ⁃ تطوير الواجهة الأمامية:
⁃ React.js:
⁃ الوصف : معروف بهندسته المعمارية القائمة على المكونات ودعم المجتمع القوي.
⁃ Vue.js:
⁃ الوصف : تقدر ببساطتها ومرونتها في بناء واجهات المستخدم.
⁃ Angular:
⁃ الوصف : لا تزال تستخدم على نطاق واسع ، وخاصة في تطبيقات المؤسسة.

2 ⁃ تطوير الواجهة الخلفية :
⁃ Node.js:
⁃ الوصف : شعبية لبناء تطبيقات شبكة قابلة للتطوير وسريعة باستخدام جافا سكريبت.
⁃ Django:
⁃ الوصف : يفضل لقدرات التطوير السريع وميزات الأمان القوية.
⁃ Spring Boot:
⁃ الوصف : تستخدم على نطاق واسع في التطبيقات المستندة إلى جافا لسهولة الاستخدام وقدرات التكامل.

3 ⁃ تطوير المحمول :
⁃ Flutter:
⁃ الوصف : معروف ببناء تطبيقات مجمعة أصلا للجوال والويب وسطح المكتب من قاعدة بيانات واحدة.
⁃ React Native :
⁃ الوصف : لا تزال شعبية لبناء تطبيقات عبر منصة With mother's abilities .

4 ⁃ الحوسبة السحابية و DevOps :

⁃ الوصف : AWS (خدمات أمازون ويب),Azure ، Google Cloud:
مقدمو الخدمات السحابية الرائدون الذين يقدمون خدمات واسعة النطاق للحوسبة والتخزين والشبكات.
⁃ Docker and Kubernetes:
⁃ الوصف : ضروري للحاويات وتزامن التطبيقات في بيئة سحابية أصلية.
⁃ Terraform:
⁃ الوصف : البنية التحتية كأداة رمز لإدارة وتوفير البنية التحتية السحابية.

5 ⁃ علم البيانات والتعلم الآلي :
⁃ Python:
⁃ الوصف : اللغة السائدة لعلوم البيانات والتعلم الآلي ، مع المكتبات مثل نومبي ، الباندا ، و سكيت-تعلم.
- تنسورفلو وبيتورش: الأطر الرائدة لبناء وتدريب نماذج التعلم الآلي.
⁃ Apache Spark:
⁃ الوصف : تستخدم لمعالجة البيانات الكبيرة والتحليلات.

6 ⁃ Cybersecurity:
⁃ الوصف : أدوات سيم (المعلومات الأمنية وإدارة الأحداث): مثل سبلونك و إلك ستاك ، حاسمة لرصد وإدارة الحوادث الأمنية.
⁃ Zero Trust Architecture:
⁃ الوصف : نموذج أمان يلغي فكرة الثقة بناء على موقع الشبكة.

7⁃ بلوكتشين والعملات المشفرة :
⁃ Ethereum:
⁃ الوصف : منصة بلوكتشين تدعم العقود الذكية والتطبيقات اللامركزية.
⁃ Hyperledger Fabric:
⁃ الوصف : إطار عمل لتطوير التطبيقات المسموح بها والقائمة على بلوكتشين.

8 ⁃ الذكاء الاصطناعي ومعالجة اللغة الطبيعية:

⁃ GPT (Generative Pre-trained Transformer) Models:
⁃ الوصف : مثل GPT-4 ، وتستخدم لمختلف المهام فهم اللغة الطبيعية.
⁃ Computer Vision:
⁃ الوصف : مثل أوبينكف لمهام معالجة الصور والفيديو.

9. الحوسبة المتطورة وإنترنت الأشياء (Internet of Things):

⁃ Edge Computing:
⁃ الوصف : التقنيات التي تجعل الحساب وتخزين البيانات أقرب إلى الموقع الذي تحتاج إليه.

⁃ IoT Platforms:
⁃ الوصف : مثل AWS تقنيات عمليات ، Azure تقنيات عمليات المحور ، وتقدم قدرات لإدارة وتأمين أجهزة تقنيات عمليات والبيانات.

موقع وصفات طعام:الهدف: إنشاء موقع يعرض وصفات طعام مع صور وتعليمات.
المميزات: قائمة بالوصفات، صفحة تفاصيل الوصفة، إمكانية البحث والتصفية. بالتوفيق للجميع

أقسام محرر اكواد مع كل زر وماذا يعني

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

القناة سوف تختص للبرمجة و ومشاكل الانترنت و اجهزة الهواتف و الحاسبات مع شروحات ومعلومات كافة .. واليريد يشارك بمعلومه او شيء آخر يتواصل معي
t.me/MS_97221
و مطلوب شخصين لديهم معلومات حول البرمجة في القناة ✨🤍

رابط هه القناة
https://t.me/mo97221

خارطة جميلة لإختيار مسار محدد في البرمجة .

تصميم مواقع الانترنت (Web) pinned Deleted message

عناصر إضافية في HTML:
1. <meta>:
- يُستخدم لتحديد بيانات الميتا (Meta Data) عن الصفحة، مثل الوصف، الكلمات المفتاحية، نوع الترميز. مثال:

<meta charset="UTF-8">
<meta name="description" content="توضيح الصفحة">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="اسم المؤلف">


2. <div>:
- عنصر حاوية (Container) يُستخدم لتجميع العناصر معًا. لا يؤثر على التنسيق الافتراضي ولكن يُستخدم مع CSS لتنسيق المحتوى.
html
<div>
<h2>عنوان فرعي</h2>
<p>فقرة داخل div.</p>
</div>


3. <span>:
- عنصر مضمن (Inline) يُستخدم لتجميع جزء من النص معًا. لا يؤثر على التنسيق الافتراضي ولكن يُستخدم مع CSS لتنسيق النص.

   <p>هذا نص عادي و <span style="color: red;">هذا النص باللون الأحمر.</span></p>
   

### CSS (Cascading Style Sheets)

خصائص إضافية في CSS:
1. التخطيط المرن (Flexbox):
- يُستخدم لتصميم تخطيطات مرنة وسهلة التحكم.

   .container {
       display: flex;
       flex-direction: row; /* يمكن أن تكون column أيضًا */
       justify-content: center; /* يمكن أن تكون flex-start أو flex-end أو space-between أو space-around */
       align-items: center; /* يمكن أن تكون flex-start أو flex-end أو stretch */
   }
   

2. التحولات (Transitions):
- تُستخدم لإضافة تأثيرات تغيير سلسة عند تغيير الأنماط.

   .box {
       width: 100px;
       height: 100px;
       background-color: blue;
       transition: background-color 0.5s; /* التغير في لون الخلفية سيستغرق 0.5 ثانية */
   }

   .box:hover {
       background-color: red;
   }
   

3. الرسوم المتحركة (Animations):
- تُستخدم لإنشاء تأثيرات متحركة.

   @keyframes example {
       from {background-color: red;}
       to {background-color: yellow;}
   }

   .animated-box {
       width: 100px;
       height: 100px;
       background-color: red;
       animation-name: example;
       animation-duration: 4s;
   }
   

### JavaScript (JS)

مفاهيم إضافية في JavaScript:
1. استعلام عناصر DOM:
- يمكن الوصول إلى العناصر بطرق متعددة.

   // الوصول إلى العناصر بواسطة id
   var element = document.getElementById("myElement");

   // الوصول إلى العناصر بواسطة class
   var elements = document.getElementsByClassName("myClass");

   // الوصول إلى العناصر بواسطة tag
   var elements = document.getElementsByTagName("p");

   // الوصول إلى العناصر بواسطة CSS selectors
   var element = document.querySelector(".myClass");
   var elements = document.querySelectorAll(".myClass");
   

2. التعامل مع الأحداث (Events):
- يمكن الاستماع للأحداث المختلفة على العناصر.

   var button = document.getElementById("myButton");
   button.addEventListener("click", function() {
       alert("تم النقر على الزر!");
   });
   

3. التعامل مع النماذج (Forms):
- يمكن التحقق من صحة النماذج ومعالجة البيانات.

   <form id="myForm">
       <input type="text" id="myInput" value="بعض النص">
       <input type="submit" value="إرسال">
   </form>

   <script>
       var form = document.getElementById("myForm");
       form.addEventListener("submit", function(event) {
           event.preventDefault(); // منع إعادة تحميل الصفحة
           var input = document.getElementById("myInput").value;
           alert("قيمة الإدخال: " + input);
       });
   </script>

#لا_تنسى_دعائكم_بالخير_لنا_ولكم