أفضل مكتبات الماتريال ديزاين إن كنت مصمم مواقع أو مطور مواقع أو حتى مبرمج تطبيقات فهذه المكتبات ستفيدك كثيرا فهي توفر كل الادوات والمستلزمات وفق الماتريال ديزاين. Materialize :: 1مكتبة اخترتها على انها الأفضل والأسهل Materual-UI::2مكتبة MUI CSS ::3 مكتبة Polymer ::4 مكتبة Ionic Material ::5 مكتبة Material Foundation :: 6 مكتبة Surface ::7 مكتبة Essence :: 8 مكتبة LumX :: 9 مكتبة Paper Theme for Bootstrap :: 10 مكتبة Material Design for Bootstrap :: 11 مكتبة Angular Material :: 12 مكتبة Material :: 13 مكتبة Phonon :: 14 مكتبة A Suggestion From Our Readers: Framework7 :: 15 مكتبة Bonus: Material Icons :: 16 مكتبة بالتوفيق
مشاركة مميزة
notifications
Showing posts with label التصميم المادي. Show all posts
شرح مشغل الويب Video.js وتخصيص تصميم بالـ CSS
Video.js هي إظافة معروفة كمشغل فيديو للويب بعد ظهور HTML5 حيث لم يكن تشغيل الفيديو ممكنا قبلا إلى باستعمال تقنية الفلاش المليئة بالعيوب والثغرات. طريقة إظافة الأداة بسيطة نستعمل الشكل التالي عموما -الإصدار الحالي هو 5-: < head > < link href = "https://vjs.zencdn.net/5-unsafe/video-js.css " rel = "stylesheet" > </ head > < body > <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px" controls preload="none" poster='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdJB0ampV7T_N0J4Q8JNSGAi8OBaE6jtnsZnxu7j_1X-iX_MiKhUnXhZxcZZ150CEXHQAa0sqWkUfxQ0qnlIWM5Qhr9ATJKlRL8WG1F1SEYG0mFbjbtDTuqH_A-U8mdBLvgeIGrHDRGE8/w640-c-h267/graphic-designer-1288477.jpg' data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'> <source src="http://vjs.zencdn.net/v/...
درس 3: الصور في material design التصميم المادي فكرتها ومميزاتها وإظافتها في التطبيقات
في هذا الدرس الصغير سنتعرف على وضعيات الصور في التصميم المادي وكيف تظاف وشروطها. ما الصور التي يمكن إظافتها؟ يجب أن تكون الصورة من قسمين تاليين : - أن تكون بنفس التصميم أي الماتريال ديزاين فتظاف بطريقة عادية ويمنع إظافة التضليل لها حينها. - أن تكون صورة عادية غير معقدة في الأشكال والتصامي: رغم أن التصميم المادي هو تصميم يهدف للواقعية ولكنها أيضا يرمي للعصرية في الإستعمال أي لا يمكنك وضع المظاهر القديمة بشكل قديم كهذا المثال: ومن اهم الأمور الأخرى في تصميم الصور بالتصميم المادي هي تجنب وضع صور بمعاني كثيرة او تخلك على المستخدم بل يجب استعمال ألوان ورموز معبرة عن الامر الذي تريده وغير مثيرة للإزعاج أو الإنتباه الشديد: متطلبات تصميم صورة بالتصميم المادي؟ ومن اهم ما يميز التصميم المادي في موضوع الصور هو انه يركز على ان تؤدي الصورة غرضها بإيصال المعنى وحسب بدون إبعاد التركيز لأي شيء آخر كمثال إذا وضعنا فكرة طيران و سفر تأتر في بالك فكرة طائرة صحيح الآن لو صورنا طائرات بواقعية كبيرة هل ستفهم المعنى طبعا سيكون صعبا ىلانه سيفقد التركيز على الأهم لكن لو رسمت طائرة محلقة...
درس 3: تحديد التشكيلات اللونية في نمط التصميم المادي material design style color
الدرس الثاني حول أهم شيء في الأنماط لدى التصميم المادي الألوان هي أهم شيء في التشكيل النمطي للتصمييم المادي (ماتريال ديزاين) وتوجد أشكال كثيرة ومتنوعة من الألوان, كما هو موضح في هذا الفيديو: لوحة الألوان المادية: من هذه الصفحة ستجد جميع الألوان الخاصة بالتصميم المادي material design color palette لألوان التصميم المادي بعض الخصائص حيث أنها مائلة للواقعية وخالية من التفاصيل حيث يوجد عدد من الألوان الأساسية وألوان أخرى تابعة لها كما نرى: ومن خصائص ألوان التصميم المادي أيضا أنها يمكن دمجها أي الألوان المتضادة لتشكيل واجهة واحدة كهذا المثال لدينا: ويجب عدم استعمال نفس اللون مكررا بل استعمال معاكسه عند محاولة الدمج عنصر فوق عنصر: أما عند استخدامك للون أساسي فيجب استعماله في كل الأشكال ولك الحرية في استعمال الألوان المتفرعة منه: ملاحظة هامة: تستخدم وضع النصوص العادية او الوصف وأمور مشابع لونا حياديا كالأبض والأسوك والمتفرع منهما وتستخدم اللون الذي اخترته في الكلمات الخاصة او الروابط أو شيء مهم فقط. آخر نقطة عن لون الخطوط : في لون الخطوط يجب أن...
درس 2: تحديد الطبقات باستعمال الظلال في التصميم المادي material design
ذكرنا بدايةً في المقدمة للأساسيات ان الطبقات هي من أهم مميزات التصميم المادي material design وأنه يجب وضعها على مستويات وكما تعلمون فالطبقات هي ثلاثية الأبعاد ولكي نجسدها على مظهر ثنائي الأبعاد نستعمل الضلال وهذا ما سنفعله . نظرة عامة عن الظلال والطبقات في التصميم المادي: يجسد التصميم المادي العناصر في الواقع من حيث الترتيب والتكديس فعادة حين تضع كتابا فوق كتاب أو اداة ما سيضهر لك أنها طبقة جديدة ولها خصائص كالضل والإرتفاع وما إلى ذلك ,كما أنها لا يمكن أن تتداخل ببعضها هذا ما يعطي مفهوما للطبقات في التصميم المادي . بإجمال القول ما لا يمكن أن يكون في الواقع لدى الطبقات لا يمكن أي يكون موجودا في التصميم المادي. كيف ننمذج الضل لتشكيل طبقة؟ الأمر يعتمد على بعض النواحي كما في العالم الحقيقي : - ارتفاع العنصر. كما في العالم الحقيقي تتغير نسبة التعتيم حسب ارتفاع العنصر من السطح طرديا حيث يزداد تعتيما كلما ارتفع, ويكون تأثير حجم العنصر مقتصرا على تعتيم الظل. وقامت غوغل بإظافة تقسيم لإرتفاع كل عنصر من العناصر الأساسية لمبرمجي تطبيقات الويب و...
مقدمة دورة التصميم المادي (الماتريال ديزاين material design) شرح الأساسيات
مقدمة دورة التصميم المادي من إعداد -التقني ويب- هذه الدورة ستشمل أهم النواحي في هذا التصميم الرائع في دروس مفصلة مع الأمثلة والتحديثات . مقدمة تعريفية : التصميم المادي أو material design بالإنجليزية هو تصميم من تطوير شركة غوغل الرائدة لخدمات الإنترنت... تم إنشاءه لإطفاء طابع واقعي وتصميم جميل على التطبيقات والمواقع والصور ذاتها. التصميم المادي أو material designهو تصميم حديث ظهر تقريبا 2014 بعد سنتين من ظهور التصميم المسطح (flat design) بقيادة ميكروسوفت وأبل وهو شبيه به تقريبا مع عدد كبير من الخصائص الجديدى والمميزة له حيث يكون التصميم المادي أو material design أكثر شبه بالواقع مع تنظيم أكثر. ويمكنك مراجعة كل شيء عن التصميم المادي من صفحته الرسمية لدى غوغل https://material.goog... حيث أوضحت جوجل كي شيء عنه . بداية سريعة في الأساسيات: الطبقات: أهم شيء في التصميم المادي أو material design هو الطبقات ذكرنا سابقا أنه التصميم المادي يجعل كل شيء أكثر واقعية وهذا ما يحصل وتم وضع الطبقات أيضا ليعرف الشخص ...
Contact Form
هذا فورم إتصال سريعالمشاركات الشائعة
شرح مشغل الويب Video.js وتخصيص تصميم بالـ CSS
Video.js هي إظافة معروفة كمشغل فيديو للويب بعد ظهور HTML5 حيث لم يكن تشغيل الفيديو ممكنا قبلا إلى باستعمال تقنية الفلاش المليئة بالعيوب والثغرات. طريقة إظافة الأداة بسيطة نستعمل الشكل التالي عموما -الإصدار الحالي هو 5-: < head > < link href = "https://vjs.zencdn.net/5-unsafe/video-js.css " rel = "stylesheet" > </ head > < body > <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px" controls preload="none" poster='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdJB0ampV7T_N0J4Q8JNSGAi8OBaE6jtnsZnxu7j_1X-iX_MiKhUnXhZxcZZ150CEXHQAa0sqWkUfxQ0qnlIWM5Qhr9ATJKlRL8WG1F1SEYG0mFbjbtDTuqH_A-U8mdBLvgeIGrHDRGE8/w640-c-h267/graphic-designer-1288477.jpg' data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'> <source src="http://vjs.zencdn.net/v/...
أفضل مكتبات الماتريال ديزاين للمواقع والتطبيقات - 16 مكتبة متكاملة -
أفضل مكتبات الماتريال ديزاين إن كنت مصمم مواقع أو مطور مواقع أو حتى مبرمج تطبيقات فهذه المكتبات ستفيدك كثيرا فهي توفر كل الادوات والمستلزمات وفق الماتريال ديزاين. Materialize :: 1مكتبة اخترتها على انها الأفضل والأسهل Materual-UI::2مكتبة MUI CSS ::3 مكتبة Polymer ::4 مكتبة Ionic Material ::5 مكتبة Material Foundation :: 6 مكتبة Surface ::7 مكتبة Essence :: 8 مكتبة LumX :: 9 مكتبة Paper Theme for Bootstrap :: 10 مكتبة Material Design for Bootstrap :: 11 مكتبة Angular Material :: 12 مكتبة Material :: 13 مكتبة Phonon :: 14 مكتبة A Suggestion From Our Readers: Framework7 :: 15 مكتبة Bonus: Material Icons :: 16 مكتبة بالتوفيق
مقدمة في CSS4 و HTML6
CSS4 و HTML6 نعم صحيح وليس خطأ في الكتابة فقد بدا بروزهما منذ اكثر من ثلاث سنوات ولكن الىن صارت أغلب المتصفحات الرئيسية تدعمها غذا حان الوقت إستعمالها فكما في CSS3 و HTML5 يجب علينا تعلمهما ومتاكد من انك كمبرمج ويب ستستعملهما عما قريب. بداية سنبدأ في CSS4 لأنها صارت شبه مدعومة كليا للمتصفحات الرئيسية في CSS4 حاليا توجد ثلاث أصناف من الخصائص - خصائص تم تطويرها عن CSS3 أو CSS4مثل :not() - خصائص مدعومة (متواجد وربما كانت متواجدة قبل أربع سنوات من 2012) - خصائص غير مدعومة حاليا أو قيد التطوير - خصائص محذوفة (هناك بعض الخصائص قامت منضمة الويب العالمية W3C بحذفها ربما لأخطاء أو لعدم جدواها كـ ( E /foo/ F و !E > F ) أما HTML6 فهي كذلك مثل CSS تقريبا ولكن بخصوص دعم المتصفحات يمكنك احتبار متصفحك من هذا الموقع لإختبار HTML6 ومميزاتها وتوافقها مع متصفحك : فمثلا انا لي فير فوكس أحدث نسخة حالياً 49 وحصلت على 482 نقطة من أصل 555نقطة أي أنه يدعم أغلب هذه الخصائص! قد يكون استعمالها حاليا شبه منعدم لكن قريبا وفي السنوات القادمة ستكون لا مفر من استعمالها فقد جائت...
