مشاركة مميزة

    أفضل مكتبات الماتريال ديزاين إن كنت مصمم مواقع أو مطور مواقع أو حتى مبرمج تطبيقات فهذه المكتبات ستفيدك كثيرا فهي توفر كل الادوات والمستلزمات وفق الماتريال ديزاين. 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 مكتبة  بالتوفيق
Image
notifications Showing posts with label دروس. Show all posts
قيمة لوحة المفاتيح (keyCodes) + أمثلة بالجافا سكربت link open_in_new

قيمة لوحة المفاتيح (keyCodes) + أمثلة بالجافا سكربت

يقابل كل زر في لوحة المفاتيح رمز خاص به .نستطيع استعماله لإظافة عمل عند الضغط عليه كمثال: مثال أخر متقدم إظغط بعد تحديد ثافذة المثال على أزرار التحكم اليمين,اليسار... مثال يشمل أزرار alt و Ctrl ... هنا جدول لمجيع رمزو المفاتيح: Key Code backspace 8 tab 9 enter 13 shift 16 ctrl 17 alt 18 pause/break 19 caps lock 20 escape 27 (space) 32 page up 33 ...
CSS خاصية overflow link open_in_new

CSS خاصية overflow

  خاصية    overflo w    يمكنها القيام بحديد عرض الجزء الإظافي الذي يتجاوز حجم العنصر الأكبر ببساطة رأية هذا من مثال مباشر See the Pen RoKOZL by mohamed ( @ateweb ) on CodePen .
كيفية جعل العنصر العناصر في الوسط باستعمال CSS على المحورين (X,Y) link open_in_new

كيفية جعل العنصر العناصر في الوسط باستعمال CSS على المحورين (X,Y)

يمكنك توسيط عنصر بمكان ما في الصفحى باستعمال css بعدة طرق. في css لديك إمكانيات كثير لتوسيط العناصر لكن لكل إمكانية فوائدها وسلبياتها: بداية التوسيط على محور الأفقي.   لفعل ذلك نستعمل إما: margin: auto; أو text-align: center; أولا margin: auto لهذه الخاصية فائدة جيدة ولكنها تعمل فقط عندما تكون وسم البداي لصفحة html هو <!DOCTYPE html> كمثال: وثانيا باستعمال text-align: center وهذه طريقة أخرى: بهذا النحو سنقوم بجعل البعد عن اليسار أو اليمين هن النصف أي 50% ونجعل العنصر يتبعد بنصف طوله : position: relative; transform: translate(-50%, 0); left: 50%; والآن التوسيط على المحور الأفقي : بهذا النحو سنقوم بجعل البعد عن الأعلى أو الأسفل هن النصف أي 50% ونجعل العنصر يصعد للألعالى بنصف طوله : position: relative; transform: translate(0, -50%); top: 50%; واخير في الأخير سنقوم بتوسيط عنصر من المحورين الأفقي والعمودي: position: relative; transform: translate( -50%, -50%); top: 50%; left: 50%; وسط چین در cssکد css ...
درس 3: الصور في material design التصميم المادي فكرتها ومميزاتها وإظافتها في التطبيقات link open_in_new

درس 3: الصور في material design التصميم المادي فكرتها ومميزاتها وإظافتها في التطبيقات

في هذا الدرس الصغير سنتعرف على وضعيات الصور في التصميم المادي وكيف تظاف وشروطها. ما الصور التي يمكن إظافتها؟ يجب أن تكون الصورة من قسمين تاليين : - أن تكون بنفس التصميم أي الماتريال ديزاين فتظاف بطريقة عادية ويمنع إظافة التضليل لها حينها. - أن تكون صورة عادية غير معقدة في الأشكال والتصامي:  رغم أن التصميم المادي هو تصميم يهدف للواقعية ولكنها أيضا يرمي للعصرية في الإستعمال أي لا يمكنك وضع المظاهر القديمة بشكل قديم كهذا المثال: ومن اهم الأمور الأخرى في تصميم الصور بالتصميم المادي هي تجنب وضع صور بمعاني كثيرة او تخلك على المستخدم بل يجب استعمال ألوان ورموز معبرة عن الامر الذي تريده وغير مثيرة للإزعاج أو الإنتباه الشديد: متطلبات تصميم صورة بالتصميم المادي؟ ومن اهم ما يميز التصميم المادي في موضوع الصور هو انه يركز على ان تؤدي الصورة غرضها بإيصال المعنى وحسب بدون إبعاد التركيز لأي شيء آخر كمثال إذا وضعنا فكرة طيران و سفر تأتر في بالك فكرة طائرة صحيح الآن لو صورنا طائرات بواقعية كبيرة هل ستفهم المعنى طبعا سيكون صعبا ىلانه سيفقد التركيز على الأهم لكن لو رسمت طائرة محلقة...
درس 3: تحديد التشكيلات اللونية في نمط التصميم المادي material design style color link open_in_new

درس 3: تحديد التشكيلات اللونية في نمط التصميم المادي material design style color

الدرس الثاني حول أهم شيء في الأنماط لدى التصميم المادي الألوان هي أهم شيء في التشكيل النمطي للتصمييم المادي (ماتريال ديزاين) وتوجد أشكال كثيرة ومتنوعة من الألوان, كما هو موضح في هذا الفيديو: لوحة الألوان المادية: من هذه الصفحة ستجد جميع الألوان الخاصة بالتصميم المادي  material design color palette  لألوان التصميم المادي بعض الخصائص حيث أنها مائلة للواقعية وخالية من التفاصيل حيث يوجد عدد من الألوان الأساسية وألوان أخرى تابعة لها كما نرى: ومن خصائص ألوان التصميم المادي أيضا أنها يمكن دمجها أي الألوان المتضادة لتشكيل واجهة واحدة كهذا المثال لدينا: ويجب عدم استعمال نفس اللون مكررا بل استعمال معاكسه عند محاولة الدمج عنصر فوق عنصر: أما عند استخدامك للون أساسي فيجب استعماله في كل الأشكال ولك الحرية في استعمال الألوان المتفرعة منه: ملاحظة هامة: تستخدم وضع النصوص العادية او الوصف وأمور مشابع لونا حياديا كالأبض والأسوك والمتفرع منهما وتستخدم اللون الذي اخترته في الكلمات الخاصة او الروابط أو شيء مهم فقط. آخر نقطة عن لون الخطوط : في لون الخطوط يجب أن...
درس 2: تحديد الطبقات باستعمال الظلال في التصميم المادي material design link open_in_new

درس 2: تحديد الطبقات باستعمال الظلال في التصميم المادي material design

ذكرنا بدايةً في المقدمة للأساسيات ان الطبقات هي من أهم مميزات التصميم المادي material design وأنه يجب وضعها على مستويات وكما تعلمون فالطبقات هي ثلاثية الأبعاد ولكي نجسدها على مظهر ثنائي الأبعاد نستعمل الضلال وهذا ما سنفعله .   نظرة عامة عن الظلال والطبقات في التصميم المادي:   يجسد التصميم المادي العناصر في الواقع من حيث الترتيب والتكديس فعادة حين تضع كتابا فوق كتاب أو اداة ما سيضهر لك أنها طبقة جديدة ولها خصائص كالضل والإرتفاع وما إلى ذلك ,كما أنها لا يمكن أن تتداخل ببعضها هذا ما يعطي مفهوما للطبقات في التصميم المادي . بإجمال القول ما لا يمكن أن يكون في الواقع لدى الطبقات لا يمكن أي يكون موجودا في التصميم المادي. كيف ننمذج الضل لتشكيل طبقة؟  الأمر يعتمد على بعض النواحي كما في العالم الحقيقي : - ارتفاع العنصر.    كما في العالم الحقيقي تتغير نسبة التعتيم حسب ارتفاع العنصر من السطح طرديا حيث يزداد تعتيما كلما ارتفع, ويكون تأثير حجم العنصر مقتصرا على تعتيم الظل.  وقامت غوغل بإظافة تقسيم لإرتفاع كل عنصر من العناصر الأساسية لمبرمجي تطبيقات الويب و...
ضغط الصور لتقليل حجمها مع الحفاظ على الجود PNG JPG link open_in_new

ضغط الصور لتقليل حجمها مع الحفاظ على الجود PNG JPG

  مقدمة     أصيح من الضروري على مطور الويب تسريع موقعه خصوصا تداول أقوال عن إعطاء أولوية للمواقع الأسرع في محرك البحث ناهيك عن نظرة المستخدم للمواقع البطيئة فمن الطبيعي أن يفضل المستخدم الموقع السريع على البطيك كما يفضل الموقع الجميع على السيء فترى أن أولوية الموقع الأسرع قد تتعدى التصميم لذى فظغط الصور يكون بادرة لإحدى الحلول. يمكن لضغط حجم الصور أن يساهم كثيرا في تسريع الموقع ,يمكن لظغط صورة بحجم 800 كيلو بايت أن يصغر حجمها إلى 100 كيلو بايت أي حوالي 80% وهذا بلا شك شيء جيد. عيوب ضغط الصور:   في بعض الأحيان يكون هناك عيوب لظغط الصور إلى مستوى عالي فمثلا بعض المواقع تعطيك إمكانية التحكم بنسبة الضغط ينصع باستعمال نسبة 45% إلى 60%   للحفاظ على أقصى جودة للصورة. كيف أظغط الصور؟ لن نشرح آلية عمل ظغط الصور فذلك موضع آخر بل سنشرح ضغط الصور بطريقتين الأولى عن طريق برامج لظغط الصور:   لنفترض أنه لديك الكثير من الصور وتريد ظغطها فتقوم باستعمال برامج ما تسمح بإظافة العديد والعديد من الصور ناهيك عن الإمكانيات الكثيرة التي فيها عكس المواقع. ظغط ال...
لوحة تسجيل دخول بالماتريال ديزين بالستعمال مكتبة materializecss link open_in_new

لوحة تسجيل دخول بالماتريال ديزين بالستعمال مكتبة materializecss

لوحة تسجيل دخول بالماتريال ديزين إظافة جميلة وائعة وسهلة بنفس الوقت ستجعل عملك أفضل وأكثر روعة سنستعمل مكتبة    materializecss.com قبل التطرق للطريقة ها هو مثال مباشر : See the Pen نافذة تسجيل دخول بالماتريال ديزاين - التقني ويب by mohamed ( @ateweb ) on CodePen . حملها ضعها في مجلد المشروع وفي الصفحة الرئيسية على هذا الشكل <html> <head> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" > <link href = "login_style.css" type = "text/css" rel = "stylesheet" /> <script type = "text/javascript" src = "jquery.js" ></script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js" ></script> </head> <body> <div id = "wrapper" > <div id = "login_div" > <form method = "post...
إرسال POST في PHP واستقبال النتيجة بدون تحديث الصفحة باستعمال الجيكوري $.post link open_in_new

إرسال POST في PHP واستقبال النتيجة بدون تحديث الصفحة باستعمال الجيكوري $.post

درس اليوم بسيط وسهل من العنوان نفهم المضمون سنستخدم الجيكوري لعمل لوحة تسجيل بسيطة دون تحديث الصفحة الأمر بسيط سنبدأ خطوة خطوة: 1.الخطوة الأولى في ملف الرئيسية نضع رمز الجيكوري الذي سنشرحه: $(document).ready(function () { $('#register').submit(function () { $('.result').html('<div class="progress"><div class="indeterminate"></div></div>'); $.post('reg.php', { u_name: $('.u_name').val(), u_pass: $('.u_pass').val(), u_email: $('.u_email').val(), register: 1 }, function (result) { $('.result').html(result); }); return false; }); }); الكود سهل ولكن سنشرحه: 1- بداية وضعهنا تأكيد لما يضغط ويحاول المستخدم إرسال البيانات بحيث#register هو معرف الفورم: $('#register').submit(function () { }); 2- ووضعنا بنهايته لمنع تحديث الصفحة وعمل النافذة لأننا سنرسل البيانات البجيكوري: return false; 3-نعد الـ $.post ونضعا...