هويّتنا البصرية الجديدة... حكاية تكوين من سهم وحرف 🤎

بكل فخر، نكشف لكم القناع عن هوية TakweenTeam - فريق تكوين البرمجي الجديدة رابط القناة الرسمية @TkweenTeam، التي تحمل في تفاصيلها فلسفتنا ورؤيتنا التي نعمل بها كل يوم.
❓ ماذا يعني شعارنا الجديد؟
🟤 السهم ليس مجرد شكل، بل هو حرف التاء (ت) في ثوبٍ حركي يعبر عن الانطلاق والتوجّه نحو الأفضل.
🟤 السهم يشير إلى الموبايل، رمز التكنولوجيا والعالم الرقمي الذي نبدع فيه، ليؤكد أن "تكوين" تعني بناء الحلول البرمجية التي تصل إلى المستخدم مباشرة.
🟤 السهم في حد ذاته هو "تكوين" بمعناه الأعم: تجميع العناصر، توجيهها، وإخراجها في قالب واحد متكامل ومبتكر.
🖊 أما الخط الذي اخترناه بعناية، فهو ليس مجرد خط، بل انعكاس لهويتنا العصرية والأنيقة التي تمزج بين الأصالة والبرمجيات الحديثة.
🤎 قريباً جداً...
ستلمسون هذه الهوية في كل تفاصيل قناتنا ومنصاتنا، لأن التغيير يبدأ من الشكل ليصل إلى الجوهر.
كونوا بالقرب، فـ تكوين بدأت مشوارها الجديد

#TakweenTeam #فريق_تكوين #برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة  #IUST #هوية_جديدة #قريباً #هوية_تكوين_الجديدة #برمجة_بإتقان

الأسبوع الأول: رحلة في أساسيات وتقنيات الويب الحديثة
اليوم الخامس:

ستايل موقعك بدقائق مع Tailwind CSS

تقدمة  فريق تكوين البرمجي قناة:@TkweenTeam
يا شباب، لو بتكرهوا تكتبوا ملفات CSS طويلة وتضيعوا بأسماء الكلاسات، هذا اليوم لكم!
الـ Tailwind هو إطار عمل (Framework) بيعطيك كلاسات جاهزة.. يعني بدال ما تروح لملف الـ CSS وتكتب margin-top: 10px;، ببساطة بتكتب جوة الـ HTML كلاس اسمه mt-2 وهو بيعمل الشغل. بيسرّع الشغل بشكل خيالي ومطلوب جداً بالسوق حالياً. كمان بتقدر تعدل التصميم وأنت قاعد في نفس ملف المكون، بدون ما تتنقل بين ملفات HTML وCSS. وكل الكلاسات موحدة ومعروفة، يعني لو اشتغلت مع فريق، أي مطور بيفهم شغلك بسرعة. اللي بيجرب Tailwind بيصعب عليه يرجع للـ CSS العادي، جربوا وما بتندموا!
➖شوفوا كيف بنصمم زر احترافي بـ Tailwind بسطر واحد:

<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>

🔥🔥🔥🔥🔥🔥🔥🔥
📺 أفضل قنوات لتعلم 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 (ملعب لتجربة كلاسات تيلويند مباشرة بالمتصفح).

#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️

الأسبوع الثاني: أسرار الشبكات والأمن السيبراني
اليوم السادس:

كيف تسافر بياناتك في الإنترنت؟ (نموذج OSI) 🌐

يا هلا بالمهندسين! اليوم رح نتكلم عن شيء مستحيل تكون متخصص بالـ IT وما تعرفه: نموذج الـ OSI.
تخيل إنك بتبعت رسالة لصديقك على واتساب، هاي الرسالة ما بتطير بالهواء فجأة! بتمر بـ 7 طبقات (Layers) داخل جهازك، من وقت ما تكتبها (Application Layer) لحد ما تتحول لإشارات كهربائية أو ضوئية بالأسلاك (Physical Layer). كل طبقة مسؤولة عن شي معين: وحدة بتتأكد إن البيانات وصلت سليمة (Transport)، ووحدة بتعرف الطريق (Network)، ووحدة بتشفر البيانات عشان الأمان (Presentation). فهمك لهالطبقات بيخليك تعرف بالضبط وين المشكلة لما ينقطع النت أو يصير اختراق. مثلاً: إذا الموقع شغال بس الصور ما تظهر، غالباً مشكلة بالطبقة السادسة أو السادسة؟ لا، بالأولى! المهم، متى تحفظ الطبقات السبع؟ قبل ما يصير فيك شي اسمك مهندس شبكات.
➖تجربة عملية (بدون كود هالمرة، استخدم موجه الأوامر CMD):
عشان تشوف مسار بياناتك وكيف بتمر عبر السيرفرات (الراوترات) لحد ما توصل لموقع جوجل، افتح الـ CMD واكتب:
tracert google.com
رح تشوف كل "قفزة" (Hop) بتعملها بياناتك بالشبكة!
🔥🔥🔥🔥🔥🔥🔥🔥
📺 أقوى 2 قنوات لفهم الشبكات:
1- NetworkChuck (أسطورة، بيشرح الشبكات وكأنها فيلم أكشن ومعه قهوة ☕).
اضغط⬅️ رابط الدورة التدريبية
2- FreeCodeCamp (عندهم كورس كامل للشبكات للمبتدئين).
اضغط ⬅️ رابط الدورة التدريبية
🔥🔥🔥🔥🔥🔥🔥🔥
🌐مواقع تقدم دورات و تعطي شهادة إتمام مجانية⬇️ :
1-Cisco Networking Academy (NetAcad)
اضغط⬅️ رابط موقع الدورة التدريبية 
🔥🔥🔥🔥🔥🔥🔥🔥
🌐 مواقع بتساعدك:
1- المرجع الرسمي: Cisco Networking Academy (سيسكو هي الأساس بهالمجال).
اضغط ⬅️ رابط الموقع التدريبي
2- موقع مساعد: GeeksforGeeks - OSI Model (للقراءة السريعة والمقالات).
اضغط ⬅️ رابط الموقع التدريبي

#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @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

  
🔥🔥🔥🔥🔥🔥🔥🔥
📺 أقوى 3 قنوات لتعلم التشفير والأمن:
1-Computerphile (بيشرحوا التشفير والخوارزميات برسمات وأسلوب عبقري).
رابط القناة اليوتيوب
رابط الدورة التدريبية
2-Neso Academy (شرح أكاديمي عميق جداً للخوارزميات).
رابط الدورة التدريبية
3-Elzero Web School (عنده فيديوهات رائعة عن مفاهيم الحماية بالويب).
رابط قناة اليوتيوب
🔥🔥🔥🔥🔥🔥🔥🔥
🌐 مواقع بتساعدك:
1-المرجع: Wikipedia - Vigenère cipher (فيها تاريخ الخوارزمية وطريقة عملها الرياضية).
رابط موقع المرجع
2-موقع مساعد: CryptoHack (موقع خرافي لتتدرب على فك التشفير كأنك بلعبة).
رابط موقع التدريبي

#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @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 بالبايثون (قلب التشفير الحديث):

# عملية XOR المنطقية: إذا اختلفوا النتيجة 1، إذا تشابهوا النتيجة 0
bit_1 = 0b1010  # الرقم الأول بالثنائي
bit_2 = 0b1100  # الرقم الثاني بالثنائي
result = bit_1 ^ bit_2
print("نتيجة XOR هي:", bin(result)) # النتيجة: 0b0110

🔥🔥🔥🔥🔥🔥🔥🔥
📺 أقوى 3 قنوات للتعمق بالخوارزميات:
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
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️

الأسبوع الثاني: أسرار الشبكات والأمن السيبراني
اليوم التاسع:

من وين أبدأ بالأمن السيبراني؟ (مسار وشهادات) 🎓

تقدمة  فريق تكوين البرمجي قناة:@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 (عنده سلسلة كاملة لبداية الهاكينج الأخلاقي).
رابط قناة اليوتيوب

#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️

يسعد مساكون جميعا ،حابين نوفر عليكون تعب وجهد البحث في القناة فرح نقدم بعد كل اسبوع مننشر فيو ⬇️

فهرس الاسبوع الثاني – من اليوم 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

⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️

الأسبوع الثالث: هندسة الأنظمة، الفخامة في الويب، والعمل الجماعي
اليوم العاشر:

الفخامة بالتصميم (UI/UX) - خط "Cairo" وسر الجمال   

تقدمة  فريق تكوين البرمجي قناة:@TkweenTeam
أهلاً بالفنانين! اليوم رح نطلع من الأكواد المعقدة وندخل بعالم الجمال.
كثير مبرمجين بيعملوا مواقع شغالة 100% بس شكلها "ميت". سر التصميم الاحترافي (Luxurious Design) بيعتمد على 3 أشياء: المساحات البيضاء (لا تلزق العناصر ببعض)، التباين بالألوان، واختيار الخط المناسب. خط مثل "Cairo" بيعطي طابع فخم واحترافي ورسمي جداً للمواقع العربية.
بس هاد مش كله! العين البشرية بتحكم على التصميم خلال ثواني معدودة. لهيك لازم تهتم بـ 3 أمور إضافية:
1-التسلسل الهرمي البصري (Visual Hierarchy): خلي العناصر الأهم (مثل عنوان رئيسي أو زر شراء) تكون أكبر أو بلون مختلف عشان تلفت النظر أولاً.
2-الظلال والزوايا الناعمة: إضافة ظل خفيف (box-shadow) أو زوايا مدورة (border-radius) للأزرار والبطاقات تخلي التصميم يطلع "حديث" و"نظيف".
3-الاستجابة (Responsiveness): التصميم الفخم لازم يضل فخم على الموبايل كمان. اختبر موقعك على كل الشاشات قبل ما تنشره.
تذكر: المحتوى هو الملك، لكن التصميم الجيد هو اللي يخلّي الزائر يثق في محتواك ويقرأه.
➖كيف تضيف خط Cairo وتعمل تأثير فخم بالـ CSS؟

/* استيراد الخط من جوجل */
@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);
}

🔥🔥🔥🔥🔥🔥🔥🔥
📺 أقوى 3 قنوات لتتعلم أسرار الـ UI/UX:
1-Gary Simon (DesignCourse) (بيحول التصاميم البشعة لتحف فنية).
رابط قناة اليوتيوب
2-UI/UX Ali (قناة عربية رائعة لشرح قواعد التصميم).
رابط قناة اليوتيوب
3-Flux Academy (احترافية عالية بتصميم المواقع الحديثة).
رابط قناة اليوتيوب
🔥🔥🔥🔥🔥🔥🔥🔥
🌐 مواقع بتساعدك:
1-المرجع للخطوط: Google Fonts (ابحث عن Cairo وجربه).
رابط الموقع
2-موقع للإلهام: Dribbble (تغذية بصرية لأفخم التصاميم بالعالم).
رابط الموقع

#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️

الأسبوع الثالث: هندسة الأنظمة، الفخامة في الويب، والعمل الجماعي
اليوم الحادي عشر:

ضيف الحياة لموقعك مع (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. جربها، رح تغير نظرتك للحركات بالكامل.
➖كود React يخلي العنصر يظهر بنعومة (Fade In) باستخدام Framer Motion:

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>
  );
}

🔥🔥🔥🔥🔥🔥🔥🔥
📺 أفضل 3 قنوات لاحتراف Framer Motion:
1-Net Ninja (عنده بلاي ليست كاملة لـ Framer Motion خطوة بخطوة).
رابط قناة اليوتيوب
2-PedroTech (شرح عملي ومباشر على مشاريع حقيقية).
رابط قناة اليوتيوب
3-Web Dev Simplified (فيديو واحد بيلخصلك أقوى الحركات).
رابط قناة اليوتيوب
🔥🔥🔥🔥🔥🔥🔥🔥
🌐 مواقع بتساعدك:
1-المرجع الرسمي: Framer Motion Docs (الدومكيومنتيشن تبعهم قطعة فنية).
رابط الموقع
2-موقع مساعد: CodeSandbox (ممتاز لتجربة أكواد الريأكت مباشرة).
رابط الموقع

#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️

الأسبوع الثالث: هندسة الأنظمة، الفخامة في الويب، والعمل الجماعي
اليوم الثاني عشر:

كيف تبني نظام حقيقي؟ (مثال: نظام حجوزات فندقية وسياحية) 🏨

تقدمة  فريق تكوين البرمجي قناة:@TkweenTeam
يا شباب، البرمجة مو بس تصميم أزرار وحركات، البرمجة الحقيقية هي حل مشاكل.
لما تجي تبني مشروع تخرج أو مشروع كبير (مثلاً نظام حجوزات فندقية وخدمات سياحية)، أول خطوة مو كتابة الكود! أول خطوة هي هندسة قاعدة البيانات (Database Architecture). لازم تفكر: كيف رح نربط بيانات الفندق مع بيانات الزبون ومع الحجز نفسه؟
فكر فيها متل خزانة الملفات: إذا حطيت كل الأوراق ببعض، بتضيع. أما إذا رتبتها بدرج واحد لكل فندق، ودرج ثاني للزبائن، ودرج ثالث للحجوزات، وبين كل درج والثاني إشارات (Foreign Keys) تربطهم ببعض، وقتها تقدر تجيب أي معلومة بسرعة. مثلاً: "جيبلي جميع حجوزات الزبون أحمد في فندق الماسة" بتصير جملة استعلام بسيطة مو تعقيدات.
علاقات قاعدة البيانات الأساسية:
1-One-to-Many: فندق واحد → حجوزات متعددة.
2-Many-to-Many: زبون واحد ← حجوزات متعددة → خدمات سياحية متعددة. وهاد بينحت جدول وسيط.
كمان في شي اسمه Normalization (تطبيع) اللي بيمنع تكرار البيانات. مثلاً: لا تحفظ اسم الفندق مع كل حجز، خزّن رقم الفندق مرة وحدة بجدول الفندق. بهيك توفّر مساحة وتضمن إنه إذا تغير اسم الفندق ما تحتاج تعدل 1000 سطر حجز.
ختاماً: قاعدة البيانات المصممة صح = مشروع ناجح. أخطاء التصميم الأولية بتكلفك تعقيدات وعلقات بالكود بعدين. فكّر قبل ما تكتب.
➖مثال على كود SQL لإنشاء جدول حجوزات أساسي:

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'
);

-- هذا الجدول هو الأساس اللي بينبني عليه أي نظام حجز في العالم!
🔥🔥🔥🔥🔥🔥🔥🔥
📺 أقوى 3 قنوات لهندسة البرمجيات وقواعد البيانات:
1-Hussein Nasser (قناة عظيمة للهندسة المعمارية للأنظمة - Backend).
⚪️رابط قناة اليوتيوب
2-ByteByteGo (قناة خرافية بتشرح كيف الأنظمة الكبيرة متل أوبر ونتفلكس بتشتغل).
⚪️رابط قناة اليوتيوب
3-Elzero Web School (كورس الـ SQL وقواعد البيانات).
⚪️رابط قناة اليوتيوب
🔥🔥🔥🔥🔥🔥🔥🔥
🌐 مواقع بتساعدك:
1-لتخطيط النظام: Draw io (أفضل موقع مجاني لترسم مخططات الجداول والأنظمة).
⚪️رابط الموقع
2-المرجع: MySQL Documentation (مرجع قواعد البيانات).
⚪️رابط الموقع

#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️

الأسبوع الثالث: هندسة الأنظمة، الفخامة في الويب، والعمل الجماعي
اليوم الثالث عشر:

سر النجاح.. قوة فريق العمل (Teamwork) 🤝

أهلاً بالمهندسين المبدعين!
بشركات التقنية أو بمشاريع التخرج، مستحيل تشتغل نظام ضخم لحالك. لازم يكون عندك فريق قوي ومتفاهم. تقسيم المهام، استخدام أنظمة التحكم بالنسخ (مثل Git)، وتوحيد الرؤية هي اللي بتخلي أي فريق برمجي (ولنقل مثلاً فريق عم يأسس كيان برمجي) ينجح ويسلّم المشروع بأعلى جودة.
تخيل إن كل مطور بشتغل على قطعة منفصلة من المشروع بدون ما يتداخل مع الثاني. بفضل Git، كل واحد عنده نسخته الخاصة (Branch)، ولما يخلص راح يدمج شغله مع الباقي (Merge). لو صار تعارض، النظام بينبهك وتحله قبل لا يخرب المشروع. هالشي غير إنه بيحفظ تاريخ كل تعديل، يعني لو حذفنا شي بالغلط، نرجع للنسخة القديمة بضغطة زر.
أما توحيد الرؤية: يعني تكونوا متفقين من البداية على "نظام العمل" (مثلاً: تسمية المتغيرات، شكل الكود، طريقة كتابة الـ Commits). بدون هاد الاتفاق، الكود يصير "سباغيتي" يفهمه اللي كتبه بس. وفي النهاية، تأسيس كيان برمجي ناجح ما بيجي من عباقرة فرديين، بيجي من فريق يعرف يتواصل ويوثق ويحترم شغل بعض.
➖ أهم أوامر الـ Git اللي بتنقذ أي فريق برمجي:

# لما بدك تدمج شغلك مع شغل فريقك بدون ما تخربوا أكواد بعض:
git pull origin main  # بتجيب آخر التحديثات من أصحابك
git branch feature-login # بتعمل فرع خاص فيك لتبرمج براحتك
git merge feature-login # بتدمج شغلك مع المشروع الأساسي

🔥🔥🔥🔥🔥🔥🔥🔥
📺 أفضل 3 قنوات لتعلم الـ Git والعمل الجماعي:
1-Elzero Web School (كورس الجيت والجيت هاب تبعه لا غنى عنه).
⚪️رابط قناة اليوتيوب
2-Amigoscode (شرح ممتاز ومبسط جداً).
⚪️رابط قناة اليوتيوب
3-FreeCodeCamp (فيديوهات شاملة عن إدارة المشاريع).
⚪️رابط قناة اليوتيوب
🔥🔥🔥🔥🔥🔥🔥🔥
🌐 مواقع بتساعدك:
1-المرجع والمنصة: GitHub (بيتك الثاني كمبرمج).
⚪️رابط الموقع
2-موقع مساعد: Trello (عشان توزعوا المهام بينك وبين أعضاء فريقك بشكل احترافي).
⚪️رابط الموقع

#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

المالك: @y_f_fa | الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️

🔖أعزائي المتابعين، عملاءنا الكرام،
اعتذرنا عن انقطاعنا خلال الفترة الماضية، لكن الغد سيكون يوم انطلاقة جديدة بإذن الله.
🔜غدًا نستأنف النشر وسنواصل رحلتنا في تقديم كل ما هو مفيد في عالم البرمجة والتقنية: دروس، نصائح، مشاريع، موارد، وأخبار حصرية.
توقعوا محتوى متجددًا ومتميزًا يليق بكم ويساعدكم في تطوير مهاراتكم البرمجية.
🗓 البداية: غدًا الساعة 3 بعد الظهر
تابعونا، فالقادم أجمل بإذن الله.
لا تنسوا مشاركة القناة مع زملائكم المهتمين بالبرمجة 
✉️قناة فريق تكوين البرمجي:@TkweenTeam
وشكرًا لصبركم وثقتكم بنا👍

#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #نستأنف_النشر_غدًا

👮المالك:@y_f_fa|👮‍♂️الإدارة: @takweenteam
⚡️نصنع مستقبلك البرمجي بامتياز⚡️

يسعد مساكون جميعا ،حابين نوفر عليكون تعب وجهد البحث في القناة فرح نقدم بعد كل اسبوع مننشر فيو فهرس للمنشورات
✉️تقدمة  فريق تكوين البرمجي قناة:@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)
🤔رابط المنشور
🔥🔥🔥🔥🔥🔥🔥🔥

#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

👮المالك:@y_f_fa|👮‍♂️الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️

الأسبوع الرابع: كواليس الأنظمة (Backend) وحماية البيانات
اليوم الرابع عشر:

الـ Backend وراء الكواليس (Node.js)⌨️

✉️تقدمة  فريق تكوين البرمجي قناة:@TkweenTeam
يا هلا بالمهندسين اليوم رح ندخل للغرفة المظلمة.. السيرفرات
أي موقع فخم قدامك (Frontend) وراه عقل مدبر (Backend) بيعالج البيانات وبيأكد الباسوردات ويخزنها.
تقنية Node.js بتخليك تكتب هالعقل بنفس لغة الجافاسكربت اللي تعلمتها على الواجهات. يعني لغة وحدة تكفيك تصير مطور Full-Stack كامل!
السيرفر بشتغل بطريقة "غير تزامنية" (غير حاجب)، فما يعلق لما يستفسر من قاعدة البيانات، بل يكمل خدمة باقي الطلبات لحين جهوزية الرد.
أيضاً عندك مدير الحزم npm وفيه آلاف المكتبات الجاهزة: للتوثيق، التشفير، قواعد البيانات، وإرسال الإيميلات.
ابدأ فيها، رح تقدر تبني مشروع متكامل من أول زر عند المستخدم لحد قلب البيانات.
🔥🔥🔥🔥🔥🔥🔥🔥
📱كود لإنشاء سيرفر محلي بسيط جداً بـ Express.js:

const express = require('express');
const app = express();
// لما المستخدم يطلب الرابط الرئيسي، بنرد عليه بهالرسالة
app.get('/', (req, res) => {
    res.send('يا هلا بالشباب في السيرفر الخاص فينا! 🚀');
});
// تشغيل السيرفر على البورت 3000
app.listen(3000, () => {
    console.log('السيرفر شغال نـار على بورت 3000 🔥');
});

🔥🔥🔥🔥🔥🔥🔥🔥
📱أقوى 3 قنوات لتعلم Node.js:
1-Nour Homsi (شرح عربي خرافي ومشاريع عملية).
🤔رابط قناة اليوتيوب
2-Traversy Media (أفضل كراش كورس سريع ومكثف).
🤔رابط قناة اليوتيوب
3-Hussein Nasser (للتعمق بفهم كيف بيشتغل السيرفر من جوا).
🤔رابط قناة اليوتيوب
🔥🔥🔥🔥🔥🔥🔥🔥
🌐مواقع بتساعدك:
1-المرجع: Node.js Official Docs
🤔رابط الموقع
2-موقع مساعد: Express.js (مكتبة لتسهيل بناء السيرفرات).
🤔رابط الموقع
🔥🔥🔥🔥🔥🔥🔥🔥

#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

👑المالك: @y_f_fa |👑الإدارة: @takweenteam
⚡️نصنع مستقبلك البرمجي بامتياز⚡️

👀الأسبوع الرابع: كواليس الأنظمة (Backend) وحماية البيانات
اليوم الخامس عشر:

شو هو الـ API؟⌨️ (النادل في مطعم البرمجة)

✉️تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
مساكم رايق! أكيد سمعتوا كلمة API كتير.
ببساطة، تخيل إنك بتبني نظام حجوزات فندقية. واجهة الموقع اللي بيشوفها الزبون ما بتقدر توصل لقاعدة البيانات مباشرة (خطر جداً!). الـ API هو الوسيط؛ بياخد طلب الزبون (مثلاً: ابحث لي عن غرف فاضية)، بيروح للسيرفر بيجيب الرد، وبيرجعه للواجهة على شكل بيانات مرتبة اسمها JSON.
تخيله مثل النادل في المطعم: أنت الزبون (Frontend) تطلب من النادل (API) وترتاح، والنادل يدخل للمطبخ (Backend & Database) ويجيب طلبك بدون ما تزعج الطباخ بنفسك.
أي موقع حديث اليوم ما بيشتغل بدون API. React بتتواصل مع Node.js عبر API، وتطبيق الجوال لنفس الموقع بيستخدم نفس API. يعني تبرمجها مرة وحدة، وتخدم كل الأجهزة. أتقنها، وتفهم كيف ترتبط أدوات العالم ببعض.
🔥🔥🔥🔥🔥🔥🔥🔥
💻شكل البيانات (JSON) اللي بترجع من الـ API لما نبحث عن غرفة:

{
  "status": "success",
  "data": {
    "roomId": 105,
    "roomType": "Suite",
    "isAvailable": true,
    "pricePerNight": 150.00
  }
}

🔥🔥🔥🔥🔥🔥🔥🔥
📱أقوى 3 قنوات لفهم الـ APIs:
1-Postman YouTube Channel (المنصة الأقوى لاختبار الـ APIs).
🤔رابط قناة اليوتيوب
2-Programming with Mosh (فيديو مخصص بيشرح الـ REST API بربع ساعة).
🤔رابط قناة اليوتيوب
3-Elzero Web School (كيف تتعامل مع الـ API داخل الجافاسكربت).
🤔رابط قناة اليوتيوب
🔥🔥🔥🔥🔥🔥🔥🔥
🌐مواقع بتساعدك:
1-موقع الأداة الرسمية: Postman (حمل هالبرنامج، مستحيل تشتغل باك إند بدونه).
🤔رابط الموقع
2-موقع للتجارب: JSONPlaceholder (بيعطيك APIs وهمية تتدرب عليها مجاناً).
🤔رابط الموقع
🔥🔥🔥🔥🔥🔥🔥🔥

#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

👑المالك:@y_f_fa |👑الإدارة:@takweenteam
⚡️نصنع مستقبلك البرمجي بامتياز⚡️

كل جمعة وأنتم بخير وصحة🩷، ربنا يتقبل صيامنا وصلاتنا ودعائنا📖، ويبارك لنا في يومنا 🌟.

👀الأسبوع الرابع: كواليس الأنظمة (Backend) وحماية البيانات
اليوم السادس عشر:

الحماية بالباك إند.. لا تثق بالمستخدم أبداً 🛡 (SQL Injection)

✉️تقدمة فريق تكوين البرمجي قناة:@TkweenTeam
يا وحوش السيكيوريتي، تجمعوا!
أكبر غلطة ممكن يعملها مبرمج مبتدئ هي إنه ياخد بيانات من المستخدم (مثلاً يوزر وباسورد) ويدخلها بقاعدة البيانات مباشرة. الهاكر ممكن يكتب "كود خبيث" مكان الباسورد، ولما يوصل لقاعدة البيانات، بيمسح لك إياها كلها! هاد الهجوم اسمه SQL Injection.
ببساطة: بدل ما يكتب كلمة مرور عادية، الهاكر يكتب شي متل' OR '1'='1 أو '; DROP TABLE users; --. لو الكود حقك ضعيف، قاعدة البيانات بتنفذ هالأمر كأنه جزء من الاستعلام الأصلي، وتصير الكارثة.
الوقاية سهلة وما فيها حكي: استخدم Prepared Statements أو Parameterized Queries. يعني تحدد مكان البيانات قبل تمريرها، فتتعامل معها كقيم بحتة مو كأوامر قابلة للتنفيذ. أغلب لغات البرمجة الحديثة (PHP مع PDO، Python مع SQLAlchemy، Node.js مع mysql2) تدعمها. ولا تثق تماماً بأي متغير جاي من المستخدم، حتى لو بدا بريئاً.
🔥🔥🔥🔥🔥🔥🔥🔥
🔐كيف تحمي نظامك؟ (استخدم Parameterized Queries):

-- ❌ الكود الغلط والخطير (بياخد النص زي ما هو):
SELECT * FROM Users WHERE Username = 'admin' AND Password = ' ' OR '1'='1'; -- الهاكر هيك بيدخل بدون باسورد!
-- ✅ الكود الصح (استخدام علامات الاستفهام أو الـ Placeholders):
-- السيرفر بيعامل المدخلات كنص عادي فقط، مو كأمر تنفيذي!
SELECT * FROM Users WHERE Username = ? AND Password = ?;

🔥🔥🔥🔥🔥🔥🔥🔥
📱 أقوى 3 قنوات للحماية من الثغرات البرمجية:
1-PwnFunction (رسومات رهيبة بتشرح الثغرات ببساطة).
🤔رابط قناة اليوتيوب
2-Computerphile (عندهم فيديو عظيم بيشرح الـ SQL Injection).
🤔رابط قناة اليوتيوب
3-Cyber In Arabic (تطبيق عملي لاكتشاف الثغرات).
🤔رابط قناة اليوتيوب
🔥🔥🔥🔥🔥🔥🔥🔥
🌐مواقع بتساعدك:
1-المرجع الأهم عالمياً: OWASP Top 10 (قائمة بأخطر 10 ثغرات ويب بالعالم وكيف تسدها).
🤔رابط الموقع
2-موقع للتدريب: PortSwigger Web Security Academy (أفضل مكان تتدرب فيه على الهاكينج الأخلاقي للويب).
🤔رابط الموقع
🔥🔥🔥🔥🔥🔥🔥🔥

#TakweenTeam #فريق_تكوين
#برمجة #تطوير_تطبيقات #أمن_سيبراني #هندسة_معلوماتية #سوريا #دمشق #حلول_برمجية #جامعة #طلاب #دراسة
#معسكر_الـ30_يوم #IUST

👑المالك:@y_f_fa |👑الإدارة: @takweenteam
⚡️ نصنع مستقبلك البرمجي بامتياز ⚡️