Please open Telegram to view this post
VIEW IN TELEGRAM
❤7🙏3
إعلان هام لمتابعي TakweenTeam
لطالما كان التطوّر والتجديد جزءاً من هويتنا، واليوم نحن على أعتاب نقلة نوعية جديدة
بعد عملٍ دؤوب وتفكيرٍ خلّاق، نستعد لكشف القناع عن هوية بصرية تعكس رؤيتنا وطموحنا بشكل أعمق وأكثر احترافية.
هوية جديدة، ذات النهج نفسه: تكوين، إبداع، وإتقان
رابط القناة الرسمية الخاصة بالفريق : https://t.me/TkweenTeam
#TakweenTeam #فريق_تكوين #برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة #IUST #هوية_جديدة #قريباً
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🥰1😍1👨💻1
الأسبوع الأول: رحلة في أساسيات وتقنيات الويب الحديثة
اليوم الثالث:
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
أصدقائي، وصلنا للوحش!
موقع بدون جافاسكربت متل سيارة بدون محرك.. شكلها حلو بس ما بتمشي. الـ JS هي لغة البرمجة اللي بتخلي موقعك يتفاعل مع المستخدم (يجيب بيانات، يرسل فورم، يغير ألوان الشاشة). كمان بتخلي الزر يتحرك، والنص يتغير بدون ما يعيد تحميل الصفحة، وبتقدر تتحقق من إيميل المستخدم قبل الإرسال. بدونها، رح يضل موقعك ثابت وممل.
وهي المدخل لتتعلم تقنيات عملاقة بعدين متل React أو Vue أو Angular، لأنها كلها مبنية على JS. أتقنها صح، وبتصير تسيطر على كل شي بصفحتك.
➖ كود JS بسيط لتغيير لون الخلفية بضغطة زر:
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
📺 أقوى قنوات لتبصم الـ JavaScript:
1- Elzero Web School (مسار الـ JS عنده يعتبر مرجع شامل).
أضغط⬅️ رابط الدورة التدريبية
2- JavaScript Mastery (مشاريع خرافية وعصرية جداً).
أضغط⬅️ رابط الدورة التدريبية
3- Bro Code (شرح سريع، ممتع، وما بتمل منه).
أضغط⬅️ رابط الدورة التدريبية
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
🌐 مواقع تقدم دورات و تعطي شهادة إتمام مجانية⬇️ :
1-Cisco Networking Academy (NetAcad)
أضغط⬅️ رابط موقع الدورة التدريبية
2- Harmash
أضغط⬅️ رابط موقع الدورة التدريبية
3- freeCodeCamp
أضغط⬅️ رابط موقع الدورة التدريبية
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
🌐 مواقع بتساعدك:
1- الموقع الرسمي/المرجع الأساسي: JavaScript.info (شرح من الصفر للاحتراف المتقدم).
2- موقع مساعد: Codecademy (للتدريب التفاعلي وكتابة الكود مباشرة).
المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
🚨 🚨 🚨 🚨 🚨 🚨 🚨 🚨
اليوم الثالث:
الجافاسكربت (JavaScript).. عصب التفاعل في الويب⚡
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
أصدقائي، وصلنا للوحش!
موقع بدون جافاسكربت متل سيارة بدون محرك.. شكلها حلو بس ما بتمشي. الـ JS هي لغة البرمجة اللي بتخلي موقعك يتفاعل مع المستخدم (يجيب بيانات، يرسل فورم، يغير ألوان الشاشة). كمان بتخلي الزر يتحرك، والنص يتغير بدون ما يعيد تحميل الصفحة، وبتقدر تتحقق من إيميل المستخدم قبل الإرسال. بدونها، رح يضل موقعك ثابت وممل.
وهي المدخل لتتعلم تقنيات عملاقة بعدين متل React أو Vue أو Angular، لأنها كلها مبنية على JS. أتقنها صح، وبتصير تسيطر على كل شي بصفحتك.
<button onclick="changeColor()">غيّر لون الموقع</button>
<script>
function changeColor() {
// مصفوفة ألوان
const colors = ['#f87171', '#fbbf24', '#34d399', '#60a5fa'];
// اختيار لون عشوائي
const randomColor = colors[Math.floor(Math.random() * colors.length)];
// تطبيق اللون على الخلفية
document.body.style.backgroundColor = randomColor;
}
</script>
1- Elzero Web School (مسار الـ JS عنده يعتبر مرجع شامل).
أضغط
2- JavaScript Mastery (مشاريع خرافية وعصرية جداً).
أضغط
3- Bro Code (شرح سريع، ممتع، وما بتمل منه).
أضغط
1-Cisco Networking Academy (NetAcad)
أضغط
2- Harmash
أضغط
3- freeCodeCamp
أضغط
1- الموقع الرسمي/المرجع الأساسي: JavaScript.info (شرح من الصفر للاحتراف المتقدم).
2- موقع مساعد: Codecademy (للتدريب التفاعلي وكتابة الكود مباشرة).
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
المالك: @y_f_fa | الإدارة: @takweenteam
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6🔥2👨💻1
الأسبوع الأول: رحلة في أساسيات وتقنيات الويب الحديثة
اليوم الرابع:
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
مساكم ورد! بعد ما فهمنا الأساسيات، لازم نعرف السوق شو طالب.
الـ React هي مكتبة (Library) مبنية على الجافاسكربت من تطوير شركة فيسبوك. فكرتها ببساطة إنها بتقسم موقعك لقطع صغيرة (Components).. يعني زرار التسجيل بتبرمجه مرة وحدة، وبتستخدمه بـ 100 مكان بالموقع بدون ما تعيد كتابة الكود! هذا بيوفر وقت، وبيخلي الموقع سريع جداً. كمان بتعتمد على مفهوم الـ Virtual DOM، يعني لما يتغير شي بالشاشة، React بتحدث بس الجزء اللي تغير، مش كل الصفحة، لهيك المواقع المبنية عليها سريعة وسلسة.
أغلب شركات التقنية اليوم بتطلب React، لأنها سهلة التعلم مقارنة بغيرها وعليها طلب كبير. أتقنها، وحط رجلك بسوق البرمجة بثقة.
➖ شكل كود الـ React (لاحظوا كيف بندمج الـ HTML مع الـ JS):
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
📺 أفضل قنوات لتعلم React:
1- Codevolution (أفضل تسلسل منطقي لتعلم ريأكت خطوة بخطوة).
رابط الدورة التدريبية
2- Unique Coderz Academy (قناة عربية ممتازة جداً بشرح المفاهيم المتقدمة).
رابط الدورة التدريبية
3- Net Ninja (شرحه مريح جداً وبيدخلك بالمشاريع فوراً).
رابط الدورة التدريبية
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
🌐 مواقع تقدم دورات و تعطي شهادة إتمام مجانية⬇️ :
1-freeCodeCamp
رابط موقع الدورة التدريبية
(شهادة Front End Development Libraries الشاملة لـ React + مشاريع حقيقية + شهادة مجانية رسمية).
2- Harmash
رابط موقع الدورة التدريبية
3-Scrimba
رابط موقع الدورة التدريبية
(دورة تفاعلية 15 ساعة + مشاريع عملية + شهادة إتمام مجانية).
4-Simplilearn
رابط موقع الدورة التدريبية
(دورة React JS للمبتدئين + شهادة إتمام مجانية بعد الإكمال).
5-Scaler
رابط الدورة التدريبية
(دورة React JS كاملة + شهادة Excellence مجانية من Scaler).
6-ScholarHat
رابط موقع الدورة التدريبية
(دورة React JS مجانية مع شهادة ReactJS معتمدة مجانية عند الإنهاء).
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
🌐 مواقع بتساعدك:
1- المرجع الرسمي: React.dev (الدومكيومنتيشن الجديد تبعهم خرافي).
2- موقع مساعد: React Tutorial by W3Schools (لتجربة الأكواد بسرعة).
المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز
اليوم الرابع:
ليش كل الشركات بتطلب React.js؟ ⚛
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
مساكم ورد! بعد ما فهمنا الأساسيات، لازم نعرف السوق شو طالب.
الـ React هي مكتبة (Library) مبنية على الجافاسكربت من تطوير شركة فيسبوك. فكرتها ببساطة إنها بتقسم موقعك لقطع صغيرة (Components).. يعني زرار التسجيل بتبرمجه مرة وحدة، وبتستخدمه بـ 100 مكان بالموقع بدون ما تعيد كتابة الكود! هذا بيوفر وقت، وبيخلي الموقع سريع جداً. كمان بتعتمد على مفهوم الـ Virtual DOM، يعني لما يتغير شي بالشاشة، React بتحدث بس الجزء اللي تغير، مش كل الصفحة، لهيك المواقع المبنية عليها سريعة وسلسة.
أغلب شركات التقنية اليوم بتطلب React، لأنها سهلة التعلم مقارنة بغيرها وعليها طلب كبير. أتقنها، وحط رجلك بسوق البرمجة بثقة.
import React, { useState } from 'react';
function LikeButton() {
const [likes, setLikes] = useState(0);
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h2>عدد الإعجابات: {likes} 👍</h2>
<button onClick={() => setLikes(likes + 1)}>
أعجبني
</button>
</div>
);
}
export default LikeButton;1- Codevolution (أفضل تسلسل منطقي لتعلم ريأكت خطوة بخطوة).
رابط الدورة التدريبية
2- Unique Coderz Academy (قناة عربية ممتازة جداً بشرح المفاهيم المتقدمة).
رابط الدورة التدريبية
3- Net Ninja (شرحه مريح جداً وبيدخلك بالمشاريع فوراً).
رابط الدورة التدريبية
1-freeCodeCamp
رابط موقع الدورة التدريبية
(شهادة Front End Development Libraries الشاملة لـ React + مشاريع حقيقية + شهادة مجانية رسمية).
2- Harmash
رابط موقع الدورة التدريبية
3-Scrimba
رابط موقع الدورة التدريبية
(دورة تفاعلية 15 ساعة + مشاريع عملية + شهادة إتمام مجانية).
4-Simplilearn
رابط موقع الدورة التدريبية
(دورة React JS للمبتدئين + شهادة إتمام مجانية بعد الإكمال).
5-Scaler
رابط الدورة التدريبية
(دورة React JS كاملة + شهادة Excellence مجانية من Scaler).
6-ScholarHat
رابط موقع الدورة التدريبية
(دورة React JS مجانية مع شهادة ReactJS معتمدة مجانية عند الإنهاء).
1- المرجع الرسمي: React.dev (الدومكيومنتيشن الجديد تبعهم خرافي).
2- موقع مساعد: React Tutorial by W3Schools (لتجربة الأكواد بسرعة).
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
المالك: @y_f_fa | الإدارة: @takweenteam
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8👨💻1
هويّتنا البصرية الجديدة... حكاية تكوين من سهم وحرف🤎
بكل فخر، نكشف لكم القناع عن هوية TakweenTeam - فريق تكوين البرمجي الجديدة رابط القناة الرسمية @TkweenTeam، التي تحمل في تفاصيلها فلسفتنا ورؤيتنا التي نعمل بها كل يوم.
ستلمسون هذه الهوية في كل تفاصيل قناتنا ومنصاتنا، لأن التغيير يبدأ من الشكل ليصل إلى الجوهر.
كونوا بالقرب، فـ تكوين بدأت مشوارها الجديد
#TakweenTeam #فريق_تكوين #برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة #IUST #هوية_جديدة #قريباً #هوية_تكوين_الجديدة #برمجة_بإتقان
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9👍7😍3🥰2💯2🔥1🍓1👨💻1
الأسبوع الأول: رحلة في أساسيات وتقنيات الويب الحديثة
اليوم الخامس:
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
يا شباب، لو بتكرهوا تكتبوا ملفات CSS طويلة وتضيعوا بأسماء الكلاسات، هذا اليوم لكم!
الـ Tailwind هو إطار عمل (Framework) بيعطيك كلاسات جاهزة.. يعني بدال ما تروح لملف الـ CSS وتكتب margin-top: 10px;، ببساطة بتكتب جوة الـ HTML كلاس اسمه mt-2 وهو بيعمل الشغل. بيسرّع الشغل بشكل خيالي ومطلوب جداً بالسوق حالياً. كمان بتقدر تعدل التصميم وأنت قاعد في نفس ملف المكون، بدون ما تتنقل بين ملفات HTML وCSS. وكل الكلاسات موحدة ومعروفة، يعني لو اشتغلت مع فريق، أي مطور بيفهم شغلك بسرعة. اللي بيجرب Tailwind بيصعب عليه يرجع للـ CSS العادي، جربوا وما بتندموا!
➖ شوفوا كيف بنصمم زر احترافي بـ Tailwind بسطر واحد:
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
📺 أفضل قنوات لتعلم Tailwind:
1- Tailwind Labs (القناة الرسمية لصنّاع التقنية، الفيديوهات قصيرة ومفيدة).
رابط الدورة التدريبية
2- Traversy Media (عنده كراش كورس بيلخص لك الدنيا كلها).
رابط الدورة التدريبية
3- Nour Homsi (شرح عربي رايق وممتاز للتطبيقات العملية).
رابط الدورة التدريبية
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
🌐 مواقع تقدم دورات و تعطي شهادة إتمام مجانية⬇️ :
1-freeCodeCamp
رابط موقع الدورة التدريبية
(دورة عملية لبناء مشروع Product Card + تعلم مجاني كامل، ويمكن إضافتها إلى شهادات freeCodeCamp الأخرى).
2-Scrimba
رابط موقع الدورة التدريبية
(دورة تفاعلية كاملة + 5 مشاريع حقيقية + شهادة إتمام مجانية).
3-MindLuster
رابط موقع الدورة التدريبية
(دورة أساسيات Tailwind CSS + شهادة مجانية 100% بعد مشاهدة الدروس).
4-MindLuster (دورة تخصيص متقدمة)
رابط موقع الدورة التدريبية
(دورة Tailwind CSS Config + شهادة مجانية 100%).
5-Cursa
رابط موقع الدورة التدريبية
(عدة دورات مجانية مثل "Tailwind CSS for Beginners" + شهادة رقمية مجانية مع QR code).
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
🌐 مواقع بتساعدك:
1- المرجع الرسمي: Tailwindcss.com (أفضل توثيق ممكن تقرأه بحياتك).
2- موقع مساعد: Tailwind Play (ملعب لتجربة كلاسات تيلويند مباشرة بالمتصفح).
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
اليوم الخامس:
ستايل موقعك بدقائق مع Tailwind CSS
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
يا شباب، لو بتكرهوا تكتبوا ملفات CSS طويلة وتضيعوا بأسماء الكلاسات، هذا اليوم لكم!
الـ Tailwind هو إطار عمل (Framework) بيعطيك كلاسات جاهزة.. يعني بدال ما تروح لملف الـ CSS وتكتب margin-top: 10px;، ببساطة بتكتب جوة الـ HTML كلاس اسمه mt-2 وهو بيعمل الشغل. بيسرّع الشغل بشكل خيالي ومطلوب جداً بالسوق حالياً. كمان بتقدر تعدل التصميم وأنت قاعد في نفس ملف المكون، بدون ما تتنقل بين ملفات HTML وCSS. وكل الكلاسات موحدة ومعروفة، يعني لو اشتغلت مع فريق، أي مطور بيفهم شغلك بسرعة. اللي بيجرب Tailwind بيصعب عليه يرجع للـ CSS العادي، جربوا وما بتندموا!
<button class="bg-blue-600 text-white font-bold py-2 px-4 rounded-lg shadow-lg hover:bg-blue-800 transition duration-300">
زر احترافي بـ Tailwind
</button>
1- Tailwind Labs (القناة الرسمية لصنّاع التقنية، الفيديوهات قصيرة ومفيدة).
رابط الدورة التدريبية
2- Traversy Media (عنده كراش كورس بيلخص لك الدنيا كلها).
رابط الدورة التدريبية
3- Nour Homsi (شرح عربي رايق وممتاز للتطبيقات العملية).
رابط الدورة التدريبية
1-freeCodeCamp
رابط موقع الدورة التدريبية
(دورة عملية لبناء مشروع Product Card + تعلم مجاني كامل، ويمكن إضافتها إلى شهادات freeCodeCamp الأخرى).
2-Scrimba
رابط موقع الدورة التدريبية
(دورة تفاعلية كاملة + 5 مشاريع حقيقية + شهادة إتمام مجانية).
3-MindLuster
رابط موقع الدورة التدريبية
(دورة أساسيات Tailwind CSS + شهادة مجانية 100% بعد مشاهدة الدروس).
4-MindLuster (دورة تخصيص متقدمة)
رابط موقع الدورة التدريبية
(دورة Tailwind CSS Config + شهادة مجانية 100%).
5-Cursa
رابط موقع الدورة التدريبية
(عدة دورات مجانية مثل "Tailwind CSS for Beginners" + شهادة رقمية مجانية مع QR code).
1- المرجع الرسمي: Tailwindcss.com (أفضل توثيق ممكن تقرأه بحياتك).
2- موقع مساعد: Tailwind Play (ملعب لتجربة كلاسات تيلويند مباشرة بالمتصفح).
#TakweenTeam #فريق_تكوينالمالك: @y_f_fa | الإدارة: @takweenteam
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🕊2👍2🔥2🥰1💯1🍓1👨💻1
يسعد مساكون جميعا ،حابين نوفر عليكون تعب وجهد البحث في القناة فرح نقدم بعد كل اسبوع مننشر فيو ⬇️
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
قائمة بالمنشورات الخاصة بالأسبوع الأول بالمعسكر،تحوي:
1-HTMLرابط المنشور(1/4/2026)
2-CSSرابط المنشور(2/4/2026)
3-JavaScriptرابط المنشور(4/4/2026)
4-Reactرابط المنشور(5/4/2026)
5-Tailwind Cssرابط المنشور(6/4/2026)
فهرس الاسبوع الأول – أول 5 أيام في معسكر ال 30 يوم تقني
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
قائمة بالمنشورات الخاصة بالأسبوع الأول بالمعسكر،تحوي:
1-HTMLرابط المنشور(1/4/2026)
2-CSSرابط المنشور(2/4/2026)
3-JavaScriptرابط المنشور(4/4/2026)
4-Reactرابط المنشور(5/4/2026)
5-Tailwind Cssرابط المنشور(6/4/2026)
#TakweenTeam #فريق_تكوين⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
🔥3👍2🥰2❤1👌1💯1🍓1👨💻1
الأسبوع الثاني: أسرار الشبكات والأمن السيبراني
اليوم السادس:
يا هلا بالمهندسين! اليوم رح نتكلم عن شيء مستحيل تكون متخصص بالـ IT وما تعرفه: نموذج الـ OSI.
تخيل إنك بتبعت رسالة لصديقك على واتساب، هاي الرسالة ما بتطير بالهواء فجأة! بتمر بـ 7 طبقات (Layers) داخل جهازك، من وقت ما تكتبها (Application Layer) لحد ما تتحول لإشارات كهربائية أو ضوئية بالأسلاك (Physical Layer). كل طبقة مسؤولة عن شي معين: وحدة بتتأكد إن البيانات وصلت سليمة (Transport)، ووحدة بتعرف الطريق (Network)، ووحدة بتشفر البيانات عشان الأمان (Presentation). فهمك لهالطبقات بيخليك تعرف بالضبط وين المشكلة لما ينقطع النت أو يصير اختراق. مثلاً: إذا الموقع شغال بس الصور ما تظهر، غالباً مشكلة بالطبقة السادسة أو السادسة؟ لا، بالأولى! المهم، متى تحفظ الطبقات السبع؟ قبل ما يصير فيك شي اسمك مهندس شبكات.
➖ تجربة عملية (بدون كود هالمرة، استخدم موجه الأوامر CMD):
عشان تشوف مسار بياناتك وكيف بتمر عبر السيرفرات (الراوترات) لحد ما توصل لموقع جوجل، افتح الـ CMD واكتب:
رح تشوف كل "قفزة" (Hop) بتعملها بياناتك بالشبكة!
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
📺 أقوى 2 قنوات لفهم الشبكات:
1- NetworkChuck (أسطورة، بيشرح الشبكات وكأنها فيلم أكشن ومعه قهوة ☕).
اضغط⬅️ رابط الدورة التدريبية
2- FreeCodeCamp (عندهم كورس كامل للشبكات للمبتدئين).
اضغط⬅️ رابط الدورة التدريبية
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
🌐 مواقع تقدم دورات و تعطي شهادة إتمام مجانية⬇️ :
1-Cisco Networking Academy (NetAcad)
اضغط⬅️ رابط موقع الدورة التدريبية
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
🌐 مواقع بتساعدك:
1- المرجع الرسمي: Cisco Networking Academy (سيسكو هي الأساس بهالمجال).
اضغط⬅️ رابط الموقع التدريبي
2- موقع مساعد: GeeksforGeeks - OSI Model (للقراءة السريعة والمقالات).
اضغط⬅️ رابط الموقع التدريبي
المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
اليوم السادس:
كيف تسافر بياناتك في الإنترنت؟ (نموذج OSI)🌐
يا هلا بالمهندسين! اليوم رح نتكلم عن شيء مستحيل تكون متخصص بالـ IT وما تعرفه: نموذج الـ OSI.
تخيل إنك بتبعت رسالة لصديقك على واتساب، هاي الرسالة ما بتطير بالهواء فجأة! بتمر بـ 7 طبقات (Layers) داخل جهازك، من وقت ما تكتبها (Application Layer) لحد ما تتحول لإشارات كهربائية أو ضوئية بالأسلاك (Physical Layer). كل طبقة مسؤولة عن شي معين: وحدة بتتأكد إن البيانات وصلت سليمة (Transport)، ووحدة بتعرف الطريق (Network)، ووحدة بتشفر البيانات عشان الأمان (Presentation). فهمك لهالطبقات بيخليك تعرف بالضبط وين المشكلة لما ينقطع النت أو يصير اختراق. مثلاً: إذا الموقع شغال بس الصور ما تظهر، غالباً مشكلة بالطبقة السادسة أو السادسة؟ لا، بالأولى! المهم، متى تحفظ الطبقات السبع؟ قبل ما يصير فيك شي اسمك مهندس شبكات.
عشان تشوف مسار بياناتك وكيف بتمر عبر السيرفرات (الراوترات) لحد ما توصل لموقع جوجل، افتح الـ CMD واكتب:
tracert google.comرح تشوف كل "قفزة" (Hop) بتعملها بياناتك بالشبكة!
1- NetworkChuck (أسطورة، بيشرح الشبكات وكأنها فيلم أكشن ومعه قهوة ☕).
اضغط
2- FreeCodeCamp (عندهم كورس كامل للشبكات للمبتدئين).
اضغط
1-Cisco Networking Academy (NetAcad)
اضغط
1- المرجع الرسمي: Cisco Networking Academy (سيسكو هي الأساس بهالمجال).
اضغط
2- موقع مساعد: GeeksforGeeks - OSI Model (للقراءة السريعة والمقالات).
اضغط
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
المالك: @y_f_fa | الإدارة: @takweenteam
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3💯2🍓2❤1🔥1🥰1👨💻1💘1😘1
Takween Team - فريق تكوين البرمجي
الأسبوع الثاني: أسرار الشبكات والأمن السيبراني اليوم السادس: كيف تسافر بياناتك في الإنترنت؟ (نموذج OSI) 🌐 يا هلا بالمهندسين! اليوم رح نتكلم عن شيء مستحيل تكون متخصص بالـ IT وما تعرفه: نموذج الـ OSI. تخيل إنك بتبعت رسالة لصديقك على واتساب، هاي الرسالة ما بتطير…
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤2🔥2🥰2👌2💯1🍓1👨💻1
الأسبوع الثاني: أسرار الشبكات والأمن السيبراني
اليوم السابع:
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
مساكم آمن يا شباب! اليوم رح نفتح باب التشفير.
من أيام الرومان والناس بتحاول تخفي رسائلها. التشفير ببساطة هو إنك تحول نص مقروء لنص غير مفهوم، وما يقدر يقرأه إلا اللي معه "المفتاح". اليوم رح نحكي عن خوارزمية تاريخية اسمها (Vigenère Cipher).. فكرتها إنها بتشفر الحروف بناءً على كلمة سر، مو بس إزاحة عادية (زي Caesar Cipher اللي كان كل حرف يتحرك عدد ثابت من الخطوات). وهالشي كان يعتبر ثورة بوقتها! ليه؟ لأن نفس الحرف بالكلمة الوحدة ممكن يتشفر بأشكال مختلفة حسب موقعه مقابل كلمة السر. فمثلاً حرف "A" أول مرة يصير "D"، ومرة ثانية يصير "K". هالشي خلى كسر الشيفرة صعب جداً لقرون، لحد ما جاء العالم كاسيسكي وكسرها بتحليل تكرار الأحرف. أتقن هالمبدأ، ورح تفهم كيف التشفير الحديث (زي HTTPS و Wi-Fi) بيحمي بياناتك اليوم.
➖ كيف بيصير التشفير برمجياً؟ (كود بايثون بسيط لتشفير رسالة):
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
📺 أقوى 3 قنوات لتعلم التشفير والأمن:
1-Computerphile (بيشرحوا التشفير والخوارزميات برسمات وأسلوب عبقري).
رابط القناة اليوتيوب
رابط الدورة التدريبية
2-Neso Academy (شرح أكاديمي عميق جداً للخوارزميات).
رابط الدورة التدريبية
3-Elzero Web School (عنده فيديوهات رائعة عن مفاهيم الحماية بالويب).
رابط قناة اليوتيوب
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
🌐 مواقع بتساعدك:
1-المرجع: Wikipedia - Vigenère cipher (فيها تاريخ الخوارزمية وطريقة عملها الرياضية).
رابط موقع المرجع
2-موقع مساعد: CryptoHack (موقع خرافي لتتدرب على فك التشفير كأنك بلعبة).
رابط موقع التدريبي
المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
اليوم السابع:
فن التشفير (Cryptography) - كيف نحمي أسرارنا؟🔐
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
مساكم آمن يا شباب! اليوم رح نفتح باب التشفير.
من أيام الرومان والناس بتحاول تخفي رسائلها. التشفير ببساطة هو إنك تحول نص مقروء لنص غير مفهوم، وما يقدر يقرأه إلا اللي معه "المفتاح". اليوم رح نحكي عن خوارزمية تاريخية اسمها (Vigenère Cipher).. فكرتها إنها بتشفر الحروف بناءً على كلمة سر، مو بس إزاحة عادية (زي Caesar Cipher اللي كان كل حرف يتحرك عدد ثابت من الخطوات). وهالشي كان يعتبر ثورة بوقتها! ليه؟ لأن نفس الحرف بالكلمة الوحدة ممكن يتشفر بأشكال مختلفة حسب موقعه مقابل كلمة السر. فمثلاً حرف "A" أول مرة يصير "D"، ومرة ثانية يصير "K". هالشي خلى كسر الشيفرة صعب جداً لقرون، لحد ما جاء العالم كاسيسكي وكسرها بتحليل تكرار الأحرف. أتقن هالمبدأ، ورح تفهم كيف التشفير الحديث (زي HTTPS و Wi-Fi) بيحمي بياناتك اليوم.
# تشفير بسيط باستخدام طريقة الإزاحة (Caesar) كبداية للفهم
def encrypt_message(text, shift):
encrypted = ""
for char in text:
if char.isalpha():
shifted = chr(ord(char) + shift)
encrypted += shifted
else:
encrypted += char
return encrypted
message = "HELLO"
print("الرسالة الأصلية:", message)
print("الرسالة المشفرة:", encrypt_message(message, 3)) # النتيجة: KHOOR
1-Computerphile (بيشرحوا التشفير والخوارزميات برسمات وأسلوب عبقري).
رابط القناة اليوتيوب
رابط الدورة التدريبية
2-Neso Academy (شرح أكاديمي عميق جداً للخوارزميات).
رابط الدورة التدريبية
3-Elzero Web School (عنده فيديوهات رائعة عن مفاهيم الحماية بالويب).
رابط قناة اليوتيوب
1-المرجع: Wikipedia - Vigenère cipher (فيها تاريخ الخوارزمية وطريقة عملها الرياضية).
رابط موقع المرجع
2-موقع مساعد: CryptoHack (موقع خرافي لتتدرب على فك التشفير كأنك بلعبة).
رابط موقع التدريبي
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
المالك: @y_f_fa | الإدارة: @takweenteam
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤3🥰3🔥2🕊1👌1😍1💯1🍓1👨💻1😘1
الأسبوع الثاني: أسرار الشبكات والأمن السيبراني
اليوم الثامن:
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
أهلاً بالوحوش! مبارح حكينا عن التشفير القديم، اليوم رح نحكي كيف الكمبيوترات بتشفر البيانات.
الكمبيوتر ما بيفهم حروف، بيفهم (0 و 1). خوارزمية مثل S-DES (النسخة المبسطة من خوارزمية DES) (Simplified - Data Encryption Standard) بتشتغل على مبدأ إنها تمسك هالأصفار والوحدات، وتقسمهم، وتبدل أماكنهم، وتعمل بينهم عمليات منطقية (مثل XOR) وتدمجهم مع مفتاح التشفير عشان تطلع بنتيجة مستحيل تنفك بدون المفتاح. مع أن S-DES صغيرة وقديمة وما بتستخدم بالواقع، تعلمها ممتاز عشان تفهم قلب التشفير الحديث. نفس الفكرة بالضبط بتشتغل في تقنيات الـ Wi-Fi (WPA2/WPA3) والمواقع المشفرة (HTTPS).. الفرق إنهم يستخدموا خوارزميات أعقد بمراحل وأرقام أضخم. أتقن هالمبدأ، وتكون فهمت ليش بياناتك آمنة (أو مش آمنة) حول العالم.
✅ مثال برمجي على عملية الـ XOR بالبايثون (قلب التشفير الحديث):
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
📺 أقوى 3 قنوات للتعمق بالخوارزميات:
1-Gate Smashers (بيشرحوا الخوارزميات المعقدة مثل DES و AES ببساطة رهيبة).
رابط قناة اليوتيوب
2-Professor Messer (ممتاز جداً لشهادات السيكيوريتي).
رابط قناة اليوتيوب
3-Neso Academy (نرجع لهم لأن شرحهم للـ S-DES يعتبر مرجع).
رابط قناة اليوتيوب
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
🌐 مواقع بتساعدك:
1-موقع مساعد: GeeksforGeeks - S-DES (شرح نصي مع أمثلة لكل خطوة بخوارزمية S-DES).
رابط موقع المرجع
المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
اليوم الثامن:
التشفير المتقدم (S-DES) ولغة الآلة 🤖
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
أهلاً بالوحوش! مبارح حكينا عن التشفير القديم، اليوم رح نحكي كيف الكمبيوترات بتشفر البيانات.
الكمبيوتر ما بيفهم حروف، بيفهم (0 و 1). خوارزمية مثل S-DES (النسخة المبسطة من خوارزمية DES) (Simplified - Data Encryption Standard) بتشتغل على مبدأ إنها تمسك هالأصفار والوحدات، وتقسمهم، وتبدل أماكنهم، وتعمل بينهم عمليات منطقية (مثل XOR) وتدمجهم مع مفتاح التشفير عشان تطلع بنتيجة مستحيل تنفك بدون المفتاح. مع أن S-DES صغيرة وقديمة وما بتستخدم بالواقع، تعلمها ممتاز عشان تفهم قلب التشفير الحديث. نفس الفكرة بالضبط بتشتغل في تقنيات الـ Wi-Fi (WPA2/WPA3) والمواقع المشفرة (HTTPS).. الفرق إنهم يستخدموا خوارزميات أعقد بمراحل وأرقام أضخم. أتقن هالمبدأ، وتكون فهمت ليش بياناتك آمنة (أو مش آمنة) حول العالم.
# عملية XOR المنطقية: إذا اختلفوا النتيجة 1، إذا تشابهوا النتيجة 0
bit_1 = 0b1010 # الرقم الأول بالثنائي
bit_2 = 0b1100 # الرقم الثاني بالثنائي
result = bit_1 ^ bit_2
print("نتيجة XOR هي:", bin(result)) # النتيجة: 0b0110
1-Gate Smashers (بيشرحوا الخوارزميات المعقدة مثل DES و AES ببساطة رهيبة).
رابط قناة اليوتيوب
2-Professor Messer (ممتاز جداً لشهادات السيكيوريتي).
رابط قناة اليوتيوب
3-Neso Academy (نرجع لهم لأن شرحهم للـ S-DES يعتبر مرجع).
رابط قناة اليوتيوب
1-موقع مساعد: GeeksforGeeks - S-DES (شرح نصي مع أمثلة لكل خطوة بخوارزمية S-DES).
رابط موقع المرجع
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
المالك: @y_f_fa | الإدارة: @takweenteam
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👍3❤2🍓2🕊1🥰1👌1😍1💯1👨💻1
الأسبوع الثاني: أسرار الشبكات والأمن السيبراني
اليوم التاسع:
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
يا شباب، كثير بتجيني أسئلة: "حابب أدخل أمن سيبراني بس ضايع!".
المجال هذا ممتع جداً بس بيحتاج تأسيس صح. قبل ما تفكر بأي شهادة، لازم تكون فاهم الشبكات (IP، DNS، والبروتوكولات)، وأنظمة التشغيل (خصوصاً Linux)، وأساسيات البرمجة (زي Python و SQL). المهارات هذي هي سلاحك الأساسي.
ولأن السوق كل يوم بصير أوسع، ما في أحسن من إنك تبدأ بشهادات معتمدة تعطيك الأساسيات وتخلي الـ CV تبعك قوي. فيه شهادات ممتازة للمبتدئين، وكل وحدة بتفتحلك باب معين:
1-CompTIA Security+: من أشهر الشهادات وأكثرها طلباً، وبتغطي أساسيات الأمن مثل الشبكات وإدارة المخاطر.
2-ISC2 Certified in Cybersecurity (CC): شهادة جديدة نوعاً ما من الجهة المانحة لشهادة CISSP، ومصممة خصيصاً للذين لا يمتلكون خبرة سابقة، كبداية ممتازة لطريق احترافي طويل.
3-Google Cybersecurity Certificate: شهادة تطبيقية على منصة Coursera، بتغطي مواضيع عملية وتعتبر خطوة أولى ممتازة لمن بدايته مطلقة.
4-Certified Ethical Hacker (CEH): لمن بدو يتخصص بالاختراق الأخلاقي، رح تتعلم كيف تفكر مثل الهاكر وتبني دفاعات أقوى.
أبداً بواحدة تناسب مستواك، وطبق اللي بتتعلمه على أرض الواقع. العالم بحاجة لأمنه، ويمكن تكون أنت الشخص الصح للمهمة.
➖ أقوى كورسين لتبدأ فيهم فوراً (مجانية وتعتبر كنز):
1-مسار Introduction to Cyber Security من منصة Cisco Networking Academy (NetAcad): ممتاز جداً لتبني ثقافة أمنية وتفهم المصطلحات باللغة العربية و الانجليزية.
رابط موقع الدورة
2-مسار Introduction to Cyber Security من منصة إدراك (Edraak): ممتاز جداً لتبني ثقافة أمنية وتفهم المصطلحات باللغة العربية.
رابط موقع الدورة
3-كورس Cybersecurity Fundamentals من منصة IBM SkillsBuild: هذا الكورس رح ينقلك لمستوى احترافي ويعطيك شهادة قوية جداً من شركة عملاقة مثل IBM.
رابط موقع الدورة
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
📺 أقوى 3 قنوات باليوتيوب لتوجيهك بالسيكيوريتي:
1-سيف مخارزة (Cyber In Arabic) (أفضل موجه عربي بمجال الهاكينج الأخلاقي).
رابط قناة اليوتيوب
2-David Bombal (مقابلات وشروحات وخطط دراسية مع أقوى الهاكرز بالعالم).
رابط قناة اليوتيوب
3-NetworkChuck (عنده سلسلة كاملة لبداية الهاكينج الأخلاقي).
رابط قناة اليوتيوب
المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
اليوم التاسع:
من وين أبدأ بالأمن السيبراني؟ (مسار وشهادات) 🎓
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
يا شباب، كثير بتجيني أسئلة: "حابب أدخل أمن سيبراني بس ضايع!".
المجال هذا ممتع جداً بس بيحتاج تأسيس صح. قبل ما تفكر بأي شهادة، لازم تكون فاهم الشبكات (IP، DNS، والبروتوكولات)، وأنظمة التشغيل (خصوصاً Linux)، وأساسيات البرمجة (زي Python و SQL). المهارات هذي هي سلاحك الأساسي.
ولأن السوق كل يوم بصير أوسع، ما في أحسن من إنك تبدأ بشهادات معتمدة تعطيك الأساسيات وتخلي الـ CV تبعك قوي. فيه شهادات ممتازة للمبتدئين، وكل وحدة بتفتحلك باب معين:
1-CompTIA Security+: من أشهر الشهادات وأكثرها طلباً، وبتغطي أساسيات الأمن مثل الشبكات وإدارة المخاطر.
2-ISC2 Certified in Cybersecurity (CC): شهادة جديدة نوعاً ما من الجهة المانحة لشهادة CISSP، ومصممة خصيصاً للذين لا يمتلكون خبرة سابقة، كبداية ممتازة لطريق احترافي طويل.
3-Google Cybersecurity Certificate: شهادة تطبيقية على منصة Coursera، بتغطي مواضيع عملية وتعتبر خطوة أولى ممتازة لمن بدايته مطلقة.
4-Certified Ethical Hacker (CEH): لمن بدو يتخصص بالاختراق الأخلاقي، رح تتعلم كيف تفكر مثل الهاكر وتبني دفاعات أقوى.
أبداً بواحدة تناسب مستواك، وطبق اللي بتتعلمه على أرض الواقع. العالم بحاجة لأمنه، ويمكن تكون أنت الشخص الصح للمهمة.
1-مسار Introduction to Cyber Security من منصة Cisco Networking Academy (NetAcad): ممتاز جداً لتبني ثقافة أمنية وتفهم المصطلحات باللغة العربية و الانجليزية.
رابط موقع الدورة
2-مسار Introduction to Cyber Security من منصة إدراك (Edraak): ممتاز جداً لتبني ثقافة أمنية وتفهم المصطلحات باللغة العربية.
رابط موقع الدورة
3-كورس Cybersecurity Fundamentals من منصة IBM SkillsBuild: هذا الكورس رح ينقلك لمستوى احترافي ويعطيك شهادة قوية جداً من شركة عملاقة مثل IBM.
رابط موقع الدورة
1-سيف مخارزة (Cyber In Arabic) (أفضل موجه عربي بمجال الهاكينج الأخلاقي).
رابط قناة اليوتيوب
2-David Bombal (مقابلات وشروحات وخطط دراسية مع أقوى الهاكرز بالعالم).
رابط قناة اليوتيوب
3-NetworkChuck (عنده سلسلة كاملة لبداية الهاكينج الأخلاقي).
رابط قناة اليوتيوب
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
المالك: @y_f_fa | الإدارة: @takweenteam
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤3🔥3🥰2👌2🕊1💯1🍓1
يسعد مساكون جميعا ،حابين نوفر عليكون تعب وجهد البحث في القناة فرح نقدم بعد كل اسبوع مننشر فيو ⬇️
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
قائمة بالمنشورات الخاصة بالأسبوع الأول بالمعسكر،تحوي:
6-Network-OSI(7/4/2026)
🟤 رابط المنشور
خلاصة استراتيجية لليوم السادس(7/4/2026)
🟤 رابط المنشور
7-Cryptography-Vigenère Cipher (8/4/2026)
🟤 رابط المنشور
8-Cryptography-S-DES(9/4/2026)
🟤 رابط المنشور
9-Cybersecurity(11/4/2026)
🟤 رابط المنشور
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
فهرس الاسبوع الثاني – من اليوم 6 وحتى 9 في معسكر ال 30 يوم تقني
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
قائمة بالمنشورات الخاصة بالأسبوع الأول بالمعسكر،تحوي:
6-Network-OSI(7/4/2026)
خلاصة استراتيجية لليوم السادس(7/4/2026)
7-Cryptography-Vigenère Cipher (8/4/2026)
8-Cryptography-S-DES(9/4/2026)
9-Cybersecurity(11/4/2026)
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4❤3👍3🍓2🕊1🥰1👌1😍1💯1
الأسبوع الثالث: هندسة الأنظمة، الفخامة في الويب، والعمل الجماعي
اليوم العاشر:
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
أهلاً بالفنانين! اليوم رح نطلع من الأكواد المعقدة وندخل بعالم الجمال.
كثير مبرمجين بيعملوا مواقع شغالة 100% بس شكلها "ميت". سر التصميم الاحترافي (Luxurious Design) بيعتمد على 3 أشياء: المساحات البيضاء (لا تلزق العناصر ببعض)، التباين بالألوان، واختيار الخط المناسب. خط مثل "Cairo" بيعطي طابع فخم واحترافي ورسمي جداً للمواقع العربية.
بس هاد مش كله! العين البشرية بتحكم على التصميم خلال ثواني معدودة. لهيك لازم تهتم بـ 3 أمور إضافية:
1-التسلسل الهرمي البصري (Visual Hierarchy): خلي العناصر الأهم (مثل عنوان رئيسي أو زر شراء) تكون أكبر أو بلون مختلف عشان تلفت النظر أولاً.
2-الظلال والزوايا الناعمة: إضافة ظل خفيف (box-shadow) أو زوايا مدورة (border-radius) للأزرار والبطاقات تخلي التصميم يطلع "حديث" و"نظيف".
3-الاستجابة (Responsiveness): التصميم الفخم لازم يضل فخم على الموبايل كمان. اختبر موقعك على كل الشاشات قبل ما تنشره.
تذكر: المحتوى هو الملك، لكن التصميم الجيد هو اللي يخلّي الزائر يثق في محتواك ويقرأه.
➖ كيف تضيف خط Cairo وتعمل تأثير فخم بالـ CSS؟
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
📺 أقوى 3 قنوات لتتعلم أسرار الـ UI/UX:
1-Gary Simon (DesignCourse) (بيحول التصاميم البشعة لتحف فنية).
رابط قناة اليوتيوب
2-UI/UX Ali (قناة عربية رائعة لشرح قواعد التصميم).
رابط قناة اليوتيوب
3-Flux Academy (احترافية عالية بتصميم المواقع الحديثة).
رابط قناة اليوتيوب
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
🌐 مواقع بتساعدك:
1-المرجع للخطوط: Google Fonts (ابحث عن Cairo وجربه).
رابط الموقع
2-موقع للإلهام: Dribbble (تغذية بصرية لأفخم التصاميم بالعالم).
رابط الموقع
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
اليوم العاشر:
الفخامة بالتصميم (UI/UX) - خط "Cairo" وسر الجمال
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
أهلاً بالفنانين! اليوم رح نطلع من الأكواد المعقدة وندخل بعالم الجمال.
كثير مبرمجين بيعملوا مواقع شغالة 100% بس شكلها "ميت". سر التصميم الاحترافي (Luxurious Design) بيعتمد على 3 أشياء: المساحات البيضاء (لا تلزق العناصر ببعض)، التباين بالألوان، واختيار الخط المناسب. خط مثل "Cairo" بيعطي طابع فخم واحترافي ورسمي جداً للمواقع العربية.
بس هاد مش كله! العين البشرية بتحكم على التصميم خلال ثواني معدودة. لهيك لازم تهتم بـ 3 أمور إضافية:
1-التسلسل الهرمي البصري (Visual Hierarchy): خلي العناصر الأهم (مثل عنوان رئيسي أو زر شراء) تكون أكبر أو بلون مختلف عشان تلفت النظر أولاً.
2-الظلال والزوايا الناعمة: إضافة ظل خفيف (box-shadow) أو زوايا مدورة (border-radius) للأزرار والبطاقات تخلي التصميم يطلع "حديث" و"نظيف".
3-الاستجابة (Responsiveness): التصميم الفخم لازم يضل فخم على الموبايل كمان. اختبر موقعك على كل الشاشات قبل ما تنشره.
تذكر: المحتوى هو الملك، لكن التصميم الجيد هو اللي يخلّي الزائر يثق في محتواك ويقرأه.
/* استيراد الخط من جوجل */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
body {
font-family: 'Cairo', sans-serif;
background-color: #0f172a; /* خلفية داكنة فخمة */
color: #f8fafc;
}
.luxury-card {
background: rgba(255, 255, 255, 0.05); /* تأثير زجاجي شفاف */
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
1-Gary Simon (DesignCourse) (بيحول التصاميم البشعة لتحف فنية).
رابط قناة اليوتيوب
2-UI/UX Ali (قناة عربية رائعة لشرح قواعد التصميم).
رابط قناة اليوتيوب
3-Flux Academy (احترافية عالية بتصميم المواقع الحديثة).
رابط قناة اليوتيوب
1-المرجع للخطوط: Google Fonts (ابحث عن Cairo وجربه).
رابط الموقع
2-موقع للإلهام: Dribbble (تغذية بصرية لأفخم التصاميم بالعالم).
رابط الموقع
#TakweenTeam #فريق_تكوينالمالك: @y_f_fa | الإدارة: @takweenteam
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
Please open Telegram to view this post
VIEW IN TELEGRAM
🕊4👍3🔥3❤2🥰2💯1🍓1
الأسبوع الثالث: هندسة الأنظمة، الفخامة في الويب، والعمل الجماعي
اليوم الحادي عشر:
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
مساكم حركات!
بما إننا تكلمنا عن الفخامة، مستحيل موقعك يكون احترافي بعام 2026 بدون ما يكون فيه (Animations) ناعمة. إذا كنت بتستخدم React، في مكتبة عظيمة اسمها Framer Motion بتخليك تعمل حركات خرافية بأسطر قليلة جداً وبأداء عالي ما بيعلق المتصفح.
فكرتها إنك بتضيف motion. قدام أي عنصر HTML عادي، وبتحدد ببساطة animate شو يصير فيه. مثلاً:
رح يحرك العنصر 100 بكسل.
1-whileHover و whileTap يضيفون حركات تفاعلية عند المرور أو الضغط، وبتقدر تستخدم spring physics عشان تكون الحركة طبيعية أكثر.
· خاصية layout بتخلي العناصر تغير حجمها أو مكانها بحركة سلسة أوتوماتيكية.
2-AnimatePresence بتدير حركات الخروج، ضروري لمن العنصر يختفي من الشاشة عشان ما يختفي فجأة.
بس نصيحة، عشان ما يعلق عندك: خلي حركاتك بس على خواص مثل x، y، scale و opacity عشان المتصفح يشتغلها على كرت الشاشة (GPU) بسلاسة، وتجنب width و height و top و left لأنها تثقل المتصفح.
ومعلومة جديدة، الاسم تغير لـ Motion بس هي هي نفس المكتبة، ومتاحة على NPM. جربها، رح تغير نظرتك للحركات بالكامل.
➖ كود React يخلي العنصر يظهر بنعومة (Fade In) باستخدام Framer Motion:
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
📺 أفضل 3 قنوات لاحتراف Framer Motion:
1-Net Ninja (عنده بلاي ليست كاملة لـ Framer Motion خطوة بخطوة).
رابط قناة اليوتيوب
2-PedroTech (شرح عملي ومباشر على مشاريع حقيقية).
رابط قناة اليوتيوب
3-Web Dev Simplified (فيديو واحد بيلخصلك أقوى الحركات).
رابط قناة اليوتيوب
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
🌐 مواقع بتساعدك:
1-المرجع الرسمي: Framer Motion Docs (الدومكيومنتيشن تبعهم قطعة فنية).
رابط الموقع
2-موقع مساعد: CodeSandbox (ممتاز لتجربة أكواد الريأكت مباشرة).
رابط الموقع
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
اليوم الحادي عشر:
ضيف الحياة لموقعك مع (Framer Motion) ✨
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
مساكم حركات!
بما إننا تكلمنا عن الفخامة، مستحيل موقعك يكون احترافي بعام 2026 بدون ما يكون فيه (Animations) ناعمة. إذا كنت بتستخدم React، في مكتبة عظيمة اسمها Framer Motion بتخليك تعمل حركات خرافية بأسطر قليلة جداً وبأداء عالي ما بيعلق المتصفح.
فكرتها إنك بتضيف motion. قدام أي عنصر HTML عادي، وبتحدد ببساطة animate شو يصير فيه. مثلاً:
<motion.div animate={{x:100}}/> رح يحرك العنصر 100 بكسل.
1-whileHover و whileTap يضيفون حركات تفاعلية عند المرور أو الضغط، وبتقدر تستخدم spring physics عشان تكون الحركة طبيعية أكثر.
· خاصية layout بتخلي العناصر تغير حجمها أو مكانها بحركة سلسة أوتوماتيكية.
2-AnimatePresence بتدير حركات الخروج، ضروري لمن العنصر يختفي من الشاشة عشان ما يختفي فجأة.
بس نصيحة، عشان ما يعلق عندك: خلي حركاتك بس على خواص مثل x، y، scale و opacity عشان المتصفح يشتغلها على كرت الشاشة (GPU) بسلاسة، وتجنب width و height و top و left لأنها تثقل المتصفح.
ومعلومة جديدة، الاسم تغير لـ Motion بس هي هي نفس المكتبة، ومتاحة على NPM. جربها، رح تغير نظرتك للحركات بالكامل.
import { motion } from 'framer-motion';
function AnimatedBox() {
return (
<motion.div
initial={{ opacity: 0, y: 50 }} // البداية: شفاف ونازل لتحت
animate={{ opacity: 1, y: 0 }} // النهاية: ظاهر ومكانه الطبيعي
transition={{ duration: 0.8 }} // مدة الحركة
style={{ background: '#3b82f6', padding: '20px', borderRadius: '10px' }}
>
مرحباً بكم في عالم الـ Animation الفخم! 🚀
</motion.div>
);
}1-Net Ninja (عنده بلاي ليست كاملة لـ Framer Motion خطوة بخطوة).
رابط قناة اليوتيوب
2-PedroTech (شرح عملي ومباشر على مشاريع حقيقية).
رابط قناة اليوتيوب
3-Web Dev Simplified (فيديو واحد بيلخصلك أقوى الحركات).
رابط قناة اليوتيوب
1-المرجع الرسمي: Framer Motion Docs (الدومكيومنتيشن تبعهم قطعة فنية).
رابط الموقع
2-موقع مساعد: CodeSandbox (ممتاز لتجربة أكواد الريأكت مباشرة).
رابط الموقع
#TakweenTeam #فريق_تكوينالمالك: @y_f_fa | الإدارة: @takweenteam
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
Please open Telegram to view this post
VIEW IN TELEGRAM
💯4👍3❤2😍2🕊1🔥1🥰1👌1🍓1
الأسبوع الثالث: هندسة الأنظمة، الفخامة في الويب، والعمل الجماعي
اليوم الثاني عشر:
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
يا شباب، البرمجة مو بس تصميم أزرار وحركات، البرمجة الحقيقية هي حل مشاكل.
لما تجي تبني مشروع تخرج أو مشروع كبير (مثلاً نظام حجوزات فندقية وخدمات سياحية)، أول خطوة مو كتابة الكود! أول خطوة هي هندسة قاعدة البيانات (Database Architecture). لازم تفكر: كيف رح نربط بيانات الفندق مع بيانات الزبون ومع الحجز نفسه؟
فكر فيها متل خزانة الملفات: إذا حطيت كل الأوراق ببعض، بتضيع. أما إذا رتبتها بدرج واحد لكل فندق، ودرج ثاني للزبائن، ودرج ثالث للحجوزات، وبين كل درج والثاني إشارات (Foreign Keys) تربطهم ببعض، وقتها تقدر تجيب أي معلومة بسرعة. مثلاً: "جيبلي جميع حجوزات الزبون أحمد في فندق الماسة" بتصير جملة استعلام بسيطة مو تعقيدات.
علاقات قاعدة البيانات الأساسية:
1-One-to-Many: فندق واحد → حجوزات متعددة.
2-Many-to-Many: زبون واحد ← حجوزات متعددة → خدمات سياحية متعددة. وهاد بينحت جدول وسيط.
كمان في شي اسمه Normalization (تطبيع) اللي بيمنع تكرار البيانات. مثلاً: لا تحفظ اسم الفندق مع كل حجز، خزّن رقم الفندق مرة وحدة بجدول الفندق. بهيك توفّر مساحة وتضمن إنه إذا تغير اسم الفندق ما تحتاج تعدل 1000 سطر حجز.
ختاماً: قاعدة البيانات المصممة صح = مشروع ناجح. أخطاء التصميم الأولية بتكلفك تعقيدات وعلقات بالكود بعدين. فكّر قبل ما تكتب.
➖ مثال على كود SQL لإنشاء جدول حجوزات أساسي:
-- هذا الجدول هو الأساس اللي بينبني عليه أي نظام حجز في العالم!
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
📺 أقوى 3 قنوات لهندسة البرمجيات وقواعد البيانات:
1-Hussein Nasser (قناة عظيمة للهندسة المعمارية للأنظمة - Backend).
⚪️ رابط قناة اليوتيوب
2-ByteByteGo (قناة خرافية بتشرح كيف الأنظمة الكبيرة متل أوبر ونتفلكس بتشتغل).
⚪️ رابط قناة اليوتيوب
3-Elzero Web School (كورس الـ SQL وقواعد البيانات).
⚪️ رابط قناة اليوتيوب
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
🌐 مواقع بتساعدك:
1-لتخطيط النظام: Draw io (أفضل موقع مجاني لترسم مخططات الجداول والأنظمة).
⚪️ رابط الموقع
2-المرجع: MySQL Documentation (مرجع قواعد البيانات).
⚪️ رابط الموقع
المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
اليوم الثاني عشر:
كيف تبني نظام حقيقي؟ (مثال: نظام حجوزات فندقية وسياحية) 🏨
تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
يا شباب، البرمجة مو بس تصميم أزرار وحركات، البرمجة الحقيقية هي حل مشاكل.
لما تجي تبني مشروع تخرج أو مشروع كبير (مثلاً نظام حجوزات فندقية وخدمات سياحية)، أول خطوة مو كتابة الكود! أول خطوة هي هندسة قاعدة البيانات (Database Architecture). لازم تفكر: كيف رح نربط بيانات الفندق مع بيانات الزبون ومع الحجز نفسه؟
فكر فيها متل خزانة الملفات: إذا حطيت كل الأوراق ببعض، بتضيع. أما إذا رتبتها بدرج واحد لكل فندق، ودرج ثاني للزبائن، ودرج ثالث للحجوزات، وبين كل درج والثاني إشارات (Foreign Keys) تربطهم ببعض، وقتها تقدر تجيب أي معلومة بسرعة. مثلاً: "جيبلي جميع حجوزات الزبون أحمد في فندق الماسة" بتصير جملة استعلام بسيطة مو تعقيدات.
علاقات قاعدة البيانات الأساسية:
1-One-to-Many: فندق واحد → حجوزات متعددة.
2-Many-to-Many: زبون واحد ← حجوزات متعددة → خدمات سياحية متعددة. وهاد بينحت جدول وسيط.
كمان في شي اسمه Normalization (تطبيع) اللي بيمنع تكرار البيانات. مثلاً: لا تحفظ اسم الفندق مع كل حجز، خزّن رقم الفندق مرة وحدة بجدول الفندق. بهيك توفّر مساحة وتضمن إنه إذا تغير اسم الفندق ما تحتاج تعدل 1000 سطر حجز.
ختاماً: قاعدة البيانات المصممة صح = مشروع ناجح. أخطاء التصميم الأولية بتكلفك تعقيدات وعلقات بالكود بعدين. فكّر قبل ما تكتب.
CREATE TABLE Reservations (
ReservationID INT PRIMARY KEY AUTO_INCREMENT,
GuestName VARCHAR(100) NOT NULL,
RoomNumber INT NOT NULL,
CheckInDate DATE NOT NULL,
CheckOutDate DATE NOT NULL,
TotalPrice DECIMAL(10, 2),
Status VARCHAR(20) DEFAULT 'Confirmed'
);
-- هذا الجدول هو الأساس اللي بينبني عليه أي نظام حجز في العالم!
1-Hussein Nasser (قناة عظيمة للهندسة المعمارية للأنظمة - Backend).
2-ByteByteGo (قناة خرافية بتشرح كيف الأنظمة الكبيرة متل أوبر ونتفلكس بتشتغل).
3-Elzero Web School (كورس الـ SQL وقواعد البيانات).
1-لتخطيط النظام: Draw io (أفضل موقع مجاني لترسم مخططات الجداول والأنظمة).
2-المرجع: MySQL Documentation (مرجع قواعد البيانات).
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
المالك: @y_f_fa | الإدارة: @takweenteam
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥4❤2🍓2🕊1🥰1💯1😘1
الأسبوع الثالث: هندسة الأنظمة، الفخامة في الويب، والعمل الجماعي
اليوم الثالث عشر:
أهلاً بالمهندسين المبدعين!
بشركات التقنية أو بمشاريع التخرج، مستحيل تشتغل نظام ضخم لحالك. لازم يكون عندك فريق قوي ومتفاهم. تقسيم المهام، استخدام أنظمة التحكم بالنسخ (مثل Git)، وتوحيد الرؤية هي اللي بتخلي أي فريق برمجي (ولنقل مثلاً فريق عم يأسس كيان برمجي) ينجح ويسلّم المشروع بأعلى جودة.
تخيل إن كل مطور بشتغل على قطعة منفصلة من المشروع بدون ما يتداخل مع الثاني. بفضل Git، كل واحد عنده نسخته الخاصة (Branch)، ولما يخلص راح يدمج شغله مع الباقي (Merge). لو صار تعارض، النظام بينبهك وتحله قبل لا يخرب المشروع. هالشي غير إنه بيحفظ تاريخ كل تعديل، يعني لو حذفنا شي بالغلط، نرجع للنسخة القديمة بضغطة زر.
أما توحيد الرؤية: يعني تكونوا متفقين من البداية على "نظام العمل" (مثلاً: تسمية المتغيرات، شكل الكود، طريقة كتابة الـ Commits). بدون هاد الاتفاق، الكود يصير "سباغيتي" يفهمه اللي كتبه بس. وفي النهاية، تأسيس كيان برمجي ناجح ما بيجي من عباقرة فرديين، بيجي من فريق يعرف يتواصل ويوثق ويحترم شغل بعض.
➖ أهم أوامر الـ Git اللي بتنقذ أي فريق برمجي:
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
📺 أفضل 3 قنوات لتعلم الـ Git والعمل الجماعي:
1-Elzero Web School (كورس الجيت والجيت هاب تبعه لا غنى عنه).
⚪️ رابط قناة اليوتيوب
2-Amigoscode (شرح ممتاز ومبسط جداً).
⚪️ رابط قناة اليوتيوب
3-FreeCodeCamp (فيديوهات شاملة عن إدارة المشاريع).
⚪️ رابط قناة اليوتيوب
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
🌐 مواقع بتساعدك:
1-المرجع والمنصة: GitHub (بيتك الثاني كمبرمج).
⚪️ رابط الموقع
2-موقع مساعد: Trello (عشان توزعوا المهام بينك وبين أعضاء فريقك بشكل احترافي).
⚪️ رابط الموقع
المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
اليوم الثالث عشر:
سر النجاح.. قوة فريق العمل (Teamwork) 🤝
أهلاً بالمهندسين المبدعين!
بشركات التقنية أو بمشاريع التخرج، مستحيل تشتغل نظام ضخم لحالك. لازم يكون عندك فريق قوي ومتفاهم. تقسيم المهام، استخدام أنظمة التحكم بالنسخ (مثل Git)، وتوحيد الرؤية هي اللي بتخلي أي فريق برمجي (ولنقل مثلاً فريق عم يأسس كيان برمجي) ينجح ويسلّم المشروع بأعلى جودة.
تخيل إن كل مطور بشتغل على قطعة منفصلة من المشروع بدون ما يتداخل مع الثاني. بفضل Git، كل واحد عنده نسخته الخاصة (Branch)، ولما يخلص راح يدمج شغله مع الباقي (Merge). لو صار تعارض، النظام بينبهك وتحله قبل لا يخرب المشروع. هالشي غير إنه بيحفظ تاريخ كل تعديل، يعني لو حذفنا شي بالغلط، نرجع للنسخة القديمة بضغطة زر.
أما توحيد الرؤية: يعني تكونوا متفقين من البداية على "نظام العمل" (مثلاً: تسمية المتغيرات، شكل الكود، طريقة كتابة الـ Commits). بدون هاد الاتفاق، الكود يصير "سباغيتي" يفهمه اللي كتبه بس. وفي النهاية، تأسيس كيان برمجي ناجح ما بيجي من عباقرة فرديين، بيجي من فريق يعرف يتواصل ويوثق ويحترم شغل بعض.
# لما بدك تدمج شغلك مع شغل فريقك بدون ما تخربوا أكواد بعض:
git pull origin main # بتجيب آخر التحديثات من أصحابك
git branch feature-login # بتعمل فرع خاص فيك لتبرمج براحتك
git merge feature-login # بتدمج شغلك مع المشروع الأساسي
1-Elzero Web School (كورس الجيت والجيت هاب تبعه لا غنى عنه).
2-Amigoscode (شرح ممتاز ومبسط جداً).
3-FreeCodeCamp (فيديوهات شاملة عن إدارة المشاريع).
1-المرجع والمنصة: GitHub (بيتك الثاني كمبرمج).
2-موقع مساعد: Trello (عشان توزعوا المهام بينك وبين أعضاء فريقك بشكل احترافي).
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
المالك: @y_f_fa | الإدارة: @takweenteam
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4💯4👍3🥰2🔥1👌1😍1🍓1😘1
اعتذرنا عن انقطاعنا خلال الفترة الماضية، لكن الغد سيكون يوم انطلاقة جديدة بإذن الله.
توقعوا محتوى متجددًا ومتميزًا يليق بكم ويساعدكم في تطوير مهاراتكم البرمجية.
تابعونا، فالقادم أجمل بإذن الله.
لا تنسوا مشاركة القناة مع زملائكم المهتمين بالبرمجة
وشكرًا لصبركم وثقتكم بنا
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #نستأنف_النشر_غدًا
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4👍4💯4🔥3🕊1🥰1😍1🍓1
يسعد مساكون جميعا ،حابين نوفر عليكون تعب وجهد البحث في القناة فرح نقدم بعد كل اسبوع مننشر فيو فهرس للمنشورات
✉️ تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
🗓 فهرس الاسبوع الثالث – من اليوم 10 وحتى 13 في معسكر ال 30 يوم تقني
قائمة بالمنشورات الخاصة بالأسبوع الثالث بالمعسكر،تحوي:
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
10-UI/UX(12/4/2026)
🤔 رابط المنشور
11-Framer Motion(13/4/2026)
🤔 رابط المنشور
12-Database Architecture(14/4/2026)
🤔 رابط المنشور
13-Teamwork(15/4/2026)
🤔 رابط المنشور
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
👮 المالك:@y_f_fa|👮♂️ الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️
قائمة بالمنشورات الخاصة بالأسبوع الثالث بالمعسكر،تحوي:
10-UI/UX(12/4/2026)
11-Framer Motion(13/4/2026)
12-Database Architecture(14/4/2026)
13-Teamwork(15/4/2026)
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🍓4👌3❤2🔥2🥰1💯1
الأسبوع الرابع: كواليس الأنظمة (Backend) وحماية البيانات
اليوم الرابع عشر:
✉️ تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
يا هلا بالمهندسين اليوم رح ندخل للغرفة المظلمة.. السيرفرات
أي موقع فخم قدامك (Frontend) وراه عقل مدبر (Backend) بيعالج البيانات وبيأكد الباسوردات ويخزنها.
تقنية Node.js بتخليك تكتب هالعقل بنفس لغة الجافاسكربت اللي تعلمتها على الواجهات. يعني لغة وحدة تكفيك تصير مطور Full-Stack كامل!
السيرفر بشتغل بطريقة "غير تزامنية" (غير حاجب)، فما يعلق لما يستفسر من قاعدة البيانات، بل يكمل خدمة باقي الطلبات لحين جهوزية الرد.
أيضاً عندك مدير الحزم npm وفيه آلاف المكتبات الجاهزة: للتوثيق، التشفير، قواعد البيانات، وإرسال الإيميلات.
ابدأ فيها، رح تقدر تبني مشروع متكامل من أول زر عند المستخدم لحد قلب البيانات.
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
📱 كود لإنشاء سيرفر محلي بسيط جداً بـ Express.js:
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
📱 أقوى 3 قنوات لتعلم Node.js:
1-Nour Homsi (شرح عربي خرافي ومشاريع عملية).
🤔 رابط قناة اليوتيوب
2-Traversy Media (أفضل كراش كورس سريع ومكثف).
🤔 رابط قناة اليوتيوب
3-Hussein Nasser (للتعمق بفهم كيف بيشتغل السيرفر من جوا).
🤔 رابط قناة اليوتيوب
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
🌐 مواقع بتساعدك:
1-المرجع: Node.js Official Docs
🤔 رابط الموقع
2-موقع مساعد: Express.js (مكتبة لتسهيل بناء السيرفرات).
🤔 رابط الموقع
🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥
👑 المالك: @y_f_fa |👑 الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز⚡️
اليوم الرابع عشر:
الـ Backend وراء الكواليس (Node.js)⌨️
يا هلا بالمهندسين اليوم رح ندخل للغرفة المظلمة.. السيرفرات
أي موقع فخم قدامك (Frontend) وراه عقل مدبر (Backend) بيعالج البيانات وبيأكد الباسوردات ويخزنها.
تقنية Node.js بتخليك تكتب هالعقل بنفس لغة الجافاسكربت اللي تعلمتها على الواجهات. يعني لغة وحدة تكفيك تصير مطور Full-Stack كامل!
السيرفر بشتغل بطريقة "غير تزامنية" (غير حاجب)، فما يعلق لما يستفسر من قاعدة البيانات، بل يكمل خدمة باقي الطلبات لحين جهوزية الرد.
أيضاً عندك مدير الحزم npm وفيه آلاف المكتبات الجاهزة: للتوثيق، التشفير، قواعد البيانات، وإرسال الإيميلات.
ابدأ فيها، رح تقدر تبني مشروع متكامل من أول زر عند المستخدم لحد قلب البيانات.
const express = require('express');
const app = express();
// لما المستخدم يطلب الرابط الرئيسي، بنرد عليه بهالرسالة
app.get('/', (req, res) => {
res.send('يا هلا بالشباب في السيرفر الخاص فينا! 🚀');
});
// تشغيل السيرفر على البورت 3000
app.listen(3000, () => {
console.log('السيرفر شغال نـار على بورت 3000 🔥');
});1-Nour Homsi (شرح عربي خرافي ومشاريع عملية).
2-Traversy Media (أفضل كراش كورس سريع ومكثف).
3-Hussein Nasser (للتعمق بفهم كيف بيشتغل السيرفر من جوا).
1-المرجع: Node.js Official Docs
2-موقع مساعد: Express.js (مكتبة لتسهيل بناء السيرفرات).
#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤3🥰3💯3🔥2🍓1
