تطوير تطبيقات الويب
1.07K subscribers
73 photos
5 videos
43 files
137 links
اهلا بك في قناة تعلم برمجة وتطوير تطبيقات الويب من الصفر الى الاحتراف




🌟سلسله من الدورات التعليمية🌟

🌟 ترتيب النشر لتسهيل التعلم 🌟

🌟تناول كل مايوصلك الىالاحتراف 🌟

#تعلم_تطوير_تطبيقات_الويب

اشترك في القناة لتطوير قدراتك البرمجيه
Download Telegram
🔴جديد 🔆

إنشاء تطبيق ويب للأجهزة المحمولة

يساعدك تكامل Dreamweaver مع jQuery Mobile على تصميم تطبيق ويب بشكل سريع يعمل على معظم الأجهزة المحمولة مع تكييف نفسه مع أبعاد الجهاز.

حول إنشاء تطبيق ويب باستخدام jQuery Mobile

فتح صفحة بداية تشغيل jQuery Mobile، أو إنشاء صفحة HTML5

استخدم صفحة بداية تشغيل jQuery Mobile في Dreamweaver لإنشاء تطبيقك. وبدلاً من ذلك، يمكنك بدء إنشاء تطبيق الويب الخاص بك مع صفحة HTML5 جديدة.

تحتوي صفحة بداية تشغيل jQuery Mobile على ملفات صور، وJavaScript، وHTML ، وCSS والتي تساعدك على بدء تصميم تطبيقك. يمكنك استخدام ملفات CSS وJavaScript المستضافة على CDN، أو خادمك الخاص، أو الملفات المثبتة مع Dreamweaver.

ملاحظة:

لتحديد موقع الملفات المرتبطة، راجع العلامتين <link>و<script src> في طريقة عرض التعليمات البرمجية.

إدراج مكونات jQuery Mobile من اللوحة Insert

إدراج مكونات jQuery Mobile من اللوحة Insert إلى صفحة HTML. تحدد ملفات jQuery Mobile CSS وJavaScript نمط المكونات وسلوكها.

معلومات عن ملفات jQuery Mobile المحلية وشبكات توفير المحتوى (CDNs)

شبكات CDN

تعتبر CDN (شبكة توفير المحتوى) شبكة كمبيوتر تحتوي على نُسخ من البيانات الموضوعة في أماكن مختلفة داخل الشبكة. عند إنشاء تطبيق ويب باستخدام عنوان URL لشبكة CDN، يتم استخدام ملفات JavaScript وCSS المحددة في عنوان URL لتطبيقك. افتراضيًا، يقوم Dreamweaver باستخدام jQuery Mobile CDN.

وبدلاً من ذلك، يمكنك استخدام عناوين URL وشبكات CDN من المواقع الأخرى مثل Microsoft وGoogle. في طريقة عرض التعليمات البرمجية، قم بتحرير موقع ملفات CSS وJavaScript المحددة في العلامتين <link> و<script src>.

وتكون الملفات التي يتم تنزيلها من شبكة CDN للقراءة فقط.

ملفات jQuery Mobile المحلية

عند تثبيت Dreamweaver، يتم عمل نسخة من ملفات jQuery Mobile ووضعها على جهاز الكمبيوتر لديك. ويتم ربط صفحة HTML التي تفتح عند اختيار صفحة بدء تشغيل (محلي) jQuery Mobile بملفات الصور، وJavaScript، وCSS المحلية.

صفحات بدء تشغيل jQuery Mobile

يوفر لك Dreamweaver صفحات بدء التشغيل التالية لإنشاء تطبيق الويب الخاص بك.

jQuery Mobile (CDN) (CS5.5 والإصدارات الأحدث) 

استخدم صفحة بدء التشغيل هذه إذا كنت تخطط لاستضافة مكتبة jQuery Mobile على شبكة CDN.

jQuery Mobile (محلي) (CS5.5 والإصدارات الأحدث)

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

jQuery Mobile (PhoneGap) (CS5.5 والإصدارات الأحدث)

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

استخدام صفحات البدء لإنشاء تطبيق للأجهزة المحمولة

حدد File > New.

حدد واحدًا مما يلي حسب طلبك:

Page From Sample > Mobile Starters >jQuery Mobile (CDN).

Page From Sample > Mobile Starters >jQuery Mobile (Local).

Page From Sample > Mobile Starters >jQuery Mobile مزود بـ Theme (محلي).

انقر فوق Create.

في الصفحة التي تظهر، قم بتمكين Follow Links Continuously (View > Live View Options) وقم بالتحويل إلى Live View. استخدم مكونات التنقل لاختبار كيفية عمل التطبيق.

استخدم الخيارات الموجودة في القائمة Multiscreenلمعرفة كيفية عرض التصميم في الأجهزة بأبعاد متنوعة. قم بتعطيل طريقة العرض Live، وارجع إلى طريقة العرض Design.

في اللوحةInsert (Window > Insert) حدد jQuery Mobile. عندئذٍ يتم عرض المكونات التي يمكنك إضافتها إلى تطبيق الويب.

في طريقة العرض Design، ضع المؤشر في المكان الذي تريد إدراج المكون فيه، وانقر فوق المكون في اللوحة Insert. في مربع الحوار الذي يظهر، قم بتخصيص المكونات باستخدام الخيارات.

(jQuery Mobile (محلي), jquery Mobile with Theme (Local)) بعد حفظ ملف HTML، يتم نسخ ملفات jQuery Mobile، بما في ذلك ملفات الصور، إلى مجلد في موقع ملف HTML.

قم بمعاينة الصفحة في طريقة العرض Live. يتم تطبيق بعض فئات CSS في Live view فقط.

إنشاء تطبيق ويب للأجهزة المحمولة من صفحة جديدة

يكون المكون Page بمثابة الحاوية لكل مكونات jQuery Mobile الأخرى. قم بإضافة المكون Page قبل متابعة إدراج المكونات الأخرى.

حدد File > New.

حدد Blank Page > HTML.

تستخدم بعض مكونات jQuery Mobile سمات HTML5 معينة. لضمان توافق HTML5 أثناء التحقق، تأكد من تحديد HTML5 على أنها DocType.

في اللوحة Insert ‏(Window > ‏Insert)، حدد jQuery Mobile من القائمة. تظهر مكونات jQuery Mobile في اللوحة.

من اللوحة Insert، اسحب المكون Page إلى طريقة العرض Design.

في مربع الحوار jQuery Mo
bile Files، حدد واحدًا مما يلي:

Remote (CDN)

إذا كنت تريد الاتصال بخادم بعيد لشبكة CDN والذي يستضيف ملفات jQuery Mobile. استخدم الخيار الافتراضي لموقع jQuery إذا لم تكن قد قمت بتكوين موقع يحتوي على ملفات jQuery Mobile. يمكنك أيضًا الاختيار لاستخدام خوادم CDN الأخرى.

Local

يتم عرض الملفات المتوفرة في Dreamweaver. لتحديد مجلد آخر، انقر فوقBrowse، وانتقل إلى المجلد الذي يحتوي على ملفات jQuery Mobile.

 

يتم نسخ ملفات CSS وJavaScript إلى دليل محلي مؤقت حتى تحفظ ملف HTML إلى جهاز الكمبيوتر لديك. بعد حفظ ملف HTML، يتم نسخ كل ملفات الصور وملفات jQuery Mobile المرتبطة إلى مجلد في المجلد الجذر للموقع.

أدخل خصائص المكون Page.

في طريقة العرض Design، ضع المؤشر في المكان الذي تريد إدراج المكون فيه، وانقر فوق المكون في اللوحة Insert. في مربع الحوار الذي يظهر، قم بتخصيص المكونات باستخدام الخيارات.

قم بمعاينة الصفحة في طريقة العرض Live. يتم تطبيق بعض فئات CSS في Live view فقط.

✳️استخدام ملفات ومجلدات مخصصة

يمكنك اختيار إنشاء ملفات CSS وJS مخصصة لتطبيقك. تأكد من أن تسميات الملفات هي jquery.mobile.js, jquery.mobile.css, and jquery.js

إذا كنت تستخدم مجلدات مخصصة، فقم بما يلي:

تنزيل إصدار غير مضغوط من مكتبة jQuery 1.5 الأساسية عبر الموقع http://docs.jquery.com/Downloading_jQuery#Download_jQuery.

احفظ الملف إلى المجلد الأساسي الذي يحتوي على المصادر الأخرى.

#باالتوفيق.
🍥🍥

👨‍💻انت مبتدئ عليك المتابعه من بداية المشوار بداية القناة 👩‍💻
#إنشاء_تطبيق_ويب_لاجهزة_الجوال

@web_applications
تطوير تطبيقات الويب
Photo
السلام عليكم ورحمة الله وبركاتة



♠️ماهو البوتستراب؟
♠️ و لماذا عليك إستخدامه كمصمم و مطور مواقع؟ كيف أتعلمه؟


أخي مصمم أو مطور المواقع ..

♠️♦️هل فكرت يوما في اختزال ساعات من عملك في غضون دقائق ؟

♠️هل تريد تنفيذ فكرة قد تراها معقدة , بأسرع وقت ؟

♠️هل تطمح إلى برمجة و تصميم موقع الكتروني متجاوب مع جميع الأجهزة بكل سهول و بساطة ؟


🛡أنت في المكان الصحيح ..





ماهو البوتستراب ؟


البوتستراب أو "bootstrap" أصبح حتما أشهر إطارات العمل للواجهات الأمامية في الويب "frontend framework" منذ إطلاقه سنة 2011 من قبل تويتر .

و بفضل التطورات و التحسينات التي شهدها , أثبت البوتستراب أن أي مصمم مواقع , يمكنه إنشاء موقعه التجاوبي  بتصميم جذاب حتى لو كان لا يجيد إلا القليل من الـ html و الـ css .

بإستعمالك إطار bootstrap , ستوفر وقتك و جهدك و تضمن نتيجة فعالة .


الموقع الرسمي للبوتستراب .

لماذا عليك إستخدامه كمصمم و مطور مواقع


🔴من بين الأسباب التي تجعلك تتعلم البوتستراب و تستعمله في مشاريعك :


- التجاوب مع الأجهزة اللوحية و الهواتف الذكية

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


- التوافق مع المتصفحات

البوتستراب متوافق ليس فقط مع المتصفحات الحديثة , بل أيضا يشكل حلا لمستخدمي "interner explorer 8" .

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


- مفتوح المصدر

بوتستراب مشروع مفتوح المصدر Open Source .. تم إصداره تحت رخصة أم أي تي "MIT" .و هو مستضاف على github .


و هذه أسباب تجعل من البوتستراب أداة قد لا يمكن الإستغناء عنها عند عدد هام من مصممي المواقع .
🍥🍥

#BOOTSTRAP
#تصميم_صفحات_الويب
#wanDering


@web_applications
Bootstrap_Studio_4.1.7_REPACK.zip
29.5 MB
تطوير تطبيقات الويب
Bootstrap_Studio_4.1.7_REPACK.zip
السلام عليكم ورحمة الله وبركاته 


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

Bootstrap 


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

فقد إستفدت منه كثيرا الحقيقة و أردت أفيد بها الجميع. 

Bootstrap studio

لتحميل البرنامج ادخل للقناة
@web_applications

🍥🍥

#BootstrapStudio
#web_Design
#web_applications


@web_applications
سبحان الله، والحمد لله، ولا إله إلا الله، والله أكبر
Adobe Photoshop Express Photo Editor Collage Maker Premium
ادوبي فوتوشوب اكسبريس
تحديث جديد #الأصدار_المدفوع
محرر صور للاندرويد يفضل عمل حساب لكسب جميع مزايا البرنامج والحصول على 2GB مساحة سحابية
(كل شيء مفتوح ومتاح بداخله)
اصدار 5.0.608
توافق 4.4 وما فوق

https://play.google.com/store/apps/details?id=com.adobe.psmobile
Forwarded from 📱RG7👑 (مافي محبة بالإجبار 🇦‌)
Photoshop_Express-Premium-v5.0.508 @ammar842 .apk
48.3 MB
Channel name was changed to «تطوير تطبيقات الويب»
دوره تعلم تصميم صفحات الويب
ببرنامج
Bootstrap Studio
سهولة . سرعة .مرونة ِِ
#web_design
#تصميم_صفحات_الويب
#تطوير_تطبيقات_الويب
@web_applications
مشاهدة "1-Bootstrap Studio Tutorial ( Introduction ) مقدمة عن البرنامج" على YouTube
https://youtu.be/84wzHfEqQ0s
تطوير تطبيقات الويب
مشاهدة "1-Bootstrap Studio Tutorial ( Introduction ) مقدمة عن البرنامج" على YouTube https://youtu.be/84wzHfEqQ0s
الدرس الاول مقدمة عن البرنامج والدوره
الدرس الثاني
BootstrapStudio
مشاهدة "2-Bootstrap Studio Tutorial (Add navbar and slide) اضافة قائمة واضافة سلايدر" على YouTube
https://youtu.be/5NLEGiqmd7o