Medhat Dawoud

Front-end Engineer, Writing some Javascript, Handlebars, SASS, HTML5, CSS3, AngularJS, and NodeJS.

Homepage: http://www.medhatdawoud.com

سنة جديدة وتسليم الشعلة لتكلمة طريق ديف ميكس

السلام عليكم ورحمة الله وبركاته

أتمنى ان تكونوا بكامل الصحة والسلامة .. اليوم وقد مر اكثر من 8 أشهر على عمر ديف ميكس والحمدلله فى نجاح يلحظه الجميع بعد تعب وجهد متطوعين بذلك لمن يحتاج المساعدة .. وهناك الكثير والكثير فى جعبة ديف ميكس لم يخرج بعد .. أصل الى خط البداية ، نعم انه خط البداية لتحليق ديف ميكس وليس النهاية .. وقد سلمت الشعلة لفريق يستحق الثقة ليستكمل هذه المسيرة ويقود الفريق شخص يعتبر من اوائل الحاضرون لديف ميكس منذ 10 فبراير 2011 ومنكم من يعرفه جيدا .. هناك الكثير مما خططه الفريق ليقوم به ولكن لم يكن بامكاني ان استمر لتنفيذها فى الفريق لأداء الواجب الوطني 🙂 .. وتم تسليم الشعلة للبشمهندس عمار عاشور طالب بالفرقة الثالثة بكلية الحاسبات والمعلومات جامعة المنصورة أعانه الله عليها وبمساعدة الفريق السالف ذكره فى اخر موضوع يصل بالفريق الى ما خططنا له واكثر بكثير .. وسأكون دائما الى جوار الفريق من وقت الى اخر الى ان انهى واجبي كاملا تجاه الفريق

أتمنى لهذا الجيل من ديف ميكس التوفيق والنجاح لانهم جميعا حقا يبذلون ما فى جهدهم للدفع بالفريق عاليا جزاهم الله خيرا .. واتمنى ان يثبتوا لكل متابعينا هذا بانفسهم

فى رعاية الله

مدحت داود – مؤسس فريق ديف ميكس

, ,

Leave a comment

الفائزون بمسابقة ابداع من ديف ميكس

ألف مبروك للفريق الفائزين فى مسابقى إبداع المنظمة من ديف ميكس وحظ سعيد للباقيين فى المسابقات القادمة ان سشاء الله من ديف ميكس .. نعدكم دائما ان شاء الله بالافضل دائما وسوف يتم تكريمهم ان شاء الله فى اول حدث للفريق قادم باذن الله

, ,

Leave a comment

التصميمات المرسلة فى المسابقة – قيّم معانا

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

Group 1

DevRock_design1

Download


Group 1

DevRock_design2

Download


Group 2

Grendizer_design1

Download


Group 1

Grendizer_design2

Download


Group 3

Yousif_design1

Download


Group 3

Yousif_design2

Download


Group 4

Sara_design1

Download


Group 4

Sara_design2

Download


هناك اعمال اخرى لم يتم عرضها .. سيتم فحصها وعرضها ان شاء الله ولكن خارج المنافسة علما بان هناك تصميمات تم ارسالها تخالف قواعد المسابقة ولكن اصحابها لهم من الفريق كل الاحترام والتقدير على المجهود وحفاظا لحقوق الفكرية لهم سيتم نشر اكوادهم ايضا ولكن بعد انتهاء واعلان الفائز فى المسابقة (إبداع)… سيتم التقييم خلال 42 ساعة من الان من خلال حضراتكم ومن خلال لجنة التحكيم ايضا وبعدها سيتم الاعلان عن الفريق الفائز فى المسابقة بناء على التقييم من اللجنة ومن أرائكم ان شاء الله .. بالتوفيق 🙂

, , , , , , ,

6 Comments

أسماء المشاركين فى مسابقة ابداع

الان باب التسجيل للمسابقة تم اغلاقه كما كان منوه من قبل فى تمام الساعة 12 منتصف الليل .. ودلوقت هاعرض عليكم أسماء المشاركين النهائيين وده تأكيد على مشاركتهم فى مسابقة إبداع اللى بتنظمها ديف ميكس وليكون المشاركين واضحين امام بعضهم البعض دعما لروح التنافس وهم عبارة عن 12 مجموعة منها الفردي ومنها التى تحتوى على اكثر من فرد وهم كالتالى

Group 1: RockDev


Mohamed Gebril , Mohamed Elshehawy , Maha Elbasuony, Eman Elma’sarawy

Group 2: Mito


Mohamed Elmetwally

Group 3: Friends


Mohamed ALi Abdallah, Ahmed Mahmoud

Group 4: MohabDesigns


Mohab Safwat

Group 5: Yousef


Ahmed Yousef, Dina Wasef

Group 6: Sara


Sara Mohamed Abdelhamid

Group 7: GBR


Ahmed Gbr, Doaa Morsy

Group 8: Hassan


Hassan Wasef

Group 9: Trial


Noha Mostafa

Group 10: Grendizer


Ahmed Daif, Hager Sakr, Mai Mohamed, Mohamed Ibrahim

Group 11: MiracleDesigns


Eman Ali

Group 12: ΩTM4EVER


Omar Elmaadawy, Mohamed Azez Rashad

أحب افكر كل الناس بالمطلوب منهم فى المسابقة فارجو الذهاب للشروط والمطلوب من هنا

ولا تنسوا اذا كان هناك اى استفسار ارجو الكتابة هنا او على بيدج الفيس بوك او على الجروب الرسمي للفريق او اخيرا على تويتر على الحساب devmixteam ونرجو ايضا الاستمرار فى كتابة اى تويت على الهاش تاج #ibda3_devmix بالتوفيق للجميع

, ,

5 Comments

مسابقة إبداع لتصميم صفحات الويب

بسم الله الرحمن الرحيم

متابعى فريق ديف ميكس وأنشطته الاعزاء .. نقدم لكم نشاط جديد وهذه المرة بمشاركتكم انتم وهى مسابقة إبداع فى تصميم صفحات الويب باستخدام XHTML+HTML5+CSS+CSS3 مع مراعاة عدم استخدام أدوات أخرى مثل ال JavaScript ويكمن ابداعكم فى هذه المسابقة فى اختياركم للافكار المعبرة عن التصميم وسوف يتم التقييم على الافكار قبل الادوات من قبل مصممين ذات كفاءة عالية سوف يعلن عنهم لاحقا لذا ارجو التركيز فى هذه الاعمال التى سوف تقدم.

مسابقة إبداع

قواعد المسابقة:

للمسابقة قواعد بسيطة لو تم الالتزام بها سوف تعم الفائدة على الجميع باذن الله، وهى كالتالى:

1 – اهمها الالتزام بمواعيد تسليم التصميمات التى سوف ينوه عنها واى تأخير لن يتم قبول هذه التصميمات للاسف فهناك died-line للمسابقة لا يمكن تعديه.

2 – كان هناك قاعدة بالزام العمل فى فريق ولكن .. طلب الكثير بعدم التحتم عليها حيث ان هناك الكثير بمفردهم .. لذا فمن الممكن ان تشترك منفردا ولكن من حقك تكوين فريق لا يتعدى ال 4 افراد.

3 – ارسال الاعمال فور الانتهاء منها فى سرية تامة الى devmix2011@gmail.comحتى يتم عرضها على لجنة التحكيم دون عرضها على العامة لتقيمها قبل انتهاء ميعاد المسابقة الاصلي.. وعند الانتهاء سوف يتم عرضها مفتوحة المصدر كما فى المثال التالى:

fci_design1

Download Design

Designed By:

  • IIIIIIIIIIIIIIIIIIIII
  • IIIIIIIIIIIIIIIIIIIII
  • IIIIIIIIIIIIIIIIIIIII
  • IIIIIIIIIIIIIIIIIIIII

Evaluation From Here

يستطيع الجميع انزال التصميم بملفاته من Download Design ويقوم بعدها بوصضه التقييم فى مكان التقييم المبين فى لينك Evaluation واتنى يكون التقييم فعلا على الاعمال بعيدا عن المجاملات والصداقات وسوف تعرض كل الاعمال فى موضوع واحد ان شاء الله مفتوحة المصدر.. اما عن اعلان الفائز فسوف يكون بعد يوم من التقييمات واهداء الجوائز فى أول ايفينت للفريق ان شاء الله فى القريب العاجل ليكون تكريم امام الجميع.


لجنة التحكيم:

عندما فكرت فى عمل لجنة لتحكيم الاعمال المقدمة وتقييمها .. قررت اختيار احسن المصممين على الاطلاق المعروفين لدى الكثير منكم فلجنة التحكيم تتكون من 3 افراد هم:

مهندس محمود متولى – مهندس UI/UX فى شركة كلود نينرز.

مهندس تميم ابراهيم – مهندس تصميم صفحات ويب ومدير شركة TameemGroup .

مهندس مدحت داود – مطور صفحات ويب ومنظم المسابقة.

تم الاتفاق على ان التقييم لن يكون فقط على جمال التصميم او كفاءة التول بل سيتوسع التقييم الى الفكرة الابداعية التى وراء التصميم .. فكن مبدعا 🙂


نظام المسابقة: {المطلوب فى المسابقة}

المطلوب الاول: مطلوب عمل تصميم فى احد المواضيع التالية:

-تصميم موقع لمدينة علمية

-تصميم موقع لمكتبة

-تصميم موقع لصفحة شخصية لاي من الشخصيات (مهندس -دكتور – مدرس – بياع سندوتشات :))

المطلوب الثانى: مطلوب عمل تصميم من ابداعك .. فكرة ابداعية من خيالكم تنفذ بشكل يجعلنا عندما ننظر اليها نستطيع ان نستشف الفكرة من التميم ولاى غرض تم.


طريقة تسليم الأعمال:

كما نوهت من قبل سيتم ارسالها على devmix2011@gmail.com ولكن الان انوه عن ما سيتم ارساله ، مطلوب وضع كل الملفات فى ملف واحد مضغوط zip/rar وارساله وتسميته باسم المجموعة المقدمة واذا كان التصميم الاول واسم المجموعة مثلا FCI سيتم تسمية الملف fci_design1.zip وارساله على الفور وبالطبع لو كان الديزاين الثاني سيكون fci_design2.zip بهذه الطريقة يكون الموضوع اكثر تنظيما، وسوف يتم ارسال الاعمال من المتحدث باسم الفريق الذي سيسجل فريقه فقط وليس مطلوب ان كل فرد فى الفريق ان يسجل.


طريقة التسجيل:

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

التسجيل مفتوح من الان وحتى غدا 2 سبتمبر 2011 الساعة 12 منتصف الليل وبعدها يتم اغلاق التسجيل وتبدأ المسابقة ولمدة 4 ايام باذن الله.

نتمنى من الله ان يجعلنا سبب فى ان نساعد الناس فى العلم والتعلم .. بالتوفيق 🙂

, , , , , , ,

5 Comments

9 articles in CSS/CSS3 from devmix

Hey all, devmix collect the 9 articles of CSS/CSS3 for you .. enjoy and share .. we only need one thing from you .. Your feed Back

The 9 articles are as follow:

CSS Basics | By Maha Elbasuony
CSS Basics || By Mohamed Ibrahim
CSS Advanced Topics By Mohamed Gebril
CSS3 – Introduction By Medhat Dawoud
CSS3 – Transitions By Maha Elbasuony
CSS3 – Hover crafting By Ahmed Daif
CSS3 – Transformation By Eman Elma3sarawy
CSS3 – Background By Ahmed Yousef
CSS3 – Enriching Forms By Mohamed Gebril

We hope that these articles were useful for you, wait us soon for more articles and keep contacting us:

DevMix Official Page on facebook
DevMix Page on GooglePlus
DevMix Team group on facebook
DevMix2011@gmail.com
http://twitter.com/DevMixTeam

🙂 Good Luck For All 🙂

, ,

2 Comments

CSS3 – Introduction

متابعى مدونة فريق ديف ميكس الأعزاء .. بعد التحية .. نقدم لكم مجموعة من المقالات فى  السي اس اس 3 متابعة لسلسلة الويب والتى تم الاعلان عنها منذ فترة وقررنا الكتابة فى هذا الجزء باللغة العربية تقديرا لرغبة القراء واثراءا لمحتوى اللغة العربية على الانترنت ونتمنى ان تنال اعجابكم

Top


مقدمة
الى الجحيم بهذه المتصفحات .. كلمة قالها جيفيري زيلدمان سنة 2001 ومن بعدها بدأت ثورة التطوير الحقيقي لمتصفحات الويب والسبب فى ذلك هو تحول مصممي صفحات الويب لاستخدام السي اس اس 1 فى اشياء اكثر من الالوان والخطوط واصبحت المتصفحات فقيرة لدعم الخصائص التى يرديها المصممون.
فى 2006 بدأ الكلام عن دعم السي اس اس يقل حيث ان معظم المشكلات التى كانت تظهر ، تم حلها من قبل المتصفحات واصبحت المتصفحات تتطور بشكل اسرع خصوصا فايرفوكس وسفاري ، وفى نهاية الامر .. المتصفحات تتطور بتطور لغات الويب الخاصة بالديزاين مثلا السي اس اس  والاتش تي ام ال.
Top


بعض الاحصائيات عن دعم المتصفحات للسي اس س 3
لم تدعم كل المتصفحات السي اس اس 3 بشكل كامل وهناك ما يدعم بعض الخصائص ولا يدغم بعضها واليكم جدول بدعم المتصفحات لبعض الخصائص الجديدة فى سي اس اس 3
اذن لا يزال الدعم مستمر فى الاصدارات القادمة من المتصفحات
Top


ما الجديد فى السي اس اس 3 ؟

Borders

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

ففى الاصدار الثانى كنا نستخدم اربع صور مختلفة للحواف الاربعة داخل صندوق ملون عادي ولكن فى الاصار الجديد تستطيع ببساطة ان تفعل نفس الموضوع وبكفاءة اكبر عن طريق ميزة
border-radius
واللى تمكنك من عمل حواف دائرية بسهولة جرب لكود التالي

HTML code

</pre>
<div id="Box">
<h1>عنوان</h1>
نص مكتوب للتجربة</div>
<pre>

CSS code

#box{
text-align:right;
margin: 10px auto;
padding: 7px;
width: 238px;
height: auto;
background-color: #e6e9ed;
border: 1px solid #666666;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-opera-border-radius: 10px;
}

RGB Color system
RGB  بالتأكيد أسهل بكثير مما سبق ومن الجديد ايضا خاصية تغيير الالوان بصيغة ال
انظر المثال التالى


ايضا ينطبق نفس الشكل فى الانظمة الاخرى مثل
(CMYK,HSL,HSLA)

Fonts
من الاشياء الجديدة والمفيدة جدا استخدام فونتس جديدة باستخدام ميزة جديدة اسمها
@font-face
وتستخدمها بالشكل التالى
CSS code

@font-face {
font-family: "devmixfont";
src: url('atlandsketchesbb_reg.TTF');
}
h1 {
font-family: "devmixfont";
color: #3e87f5;
font-size:100px;
}

HTML code

<h1>DevMix Team</h1>
<p>
DevMix Team was founded in February 2011 and it is the best
teamwork in Mansoura Universty collected by students, we are the best
</p>

فتكون النتيجة كالتالى


ملحوظة: تقدر تنزل اى فونت من هنا

Shadow

إضافة جديدة وجميلة تساعد على وضع ظل للنصوص والعناصر أو الصناديق الاتش تي ام ال أيضاً ، هذه الظلال يكون تكوينها عن طريق خاصية

box-shadow و text-shadow

ويمكن حساب قيمها بهذه الطريقة:

مصدر الصورة

هيا بنا نرى مثال ونتيجة له ، جرب الكود التالى
HTML code

<div id="Box">
<h1>فريق ديف ميكس</h1>
فريق تقني يقدم خدمات للمهتمين بمجال تكنولوجيا المعلومات
 .. رغم نشأته الحديثة فى فبراير 2011 الا انه اثبت كفاءته وكفاءة اعضاءه</div>

CSS code

#box {
padding: 13px;
margin: 0 auto;
width: 450px;
text-align: left;
background-color: #e9ecf2;
-moz-box-shadow: 7px 7px 10px #9c9c9c;
-webkit-box-shadow: 7px 7px 10px #9c9c9c;
-o-box-shadow: 7px 7px 10px #9c9c9c;
}

وتكون النتيجة عمل ظل للصندوق كما فى الصورة التالية

اما عن عمل ظل للكلام والذي يعطى تنسيقا متميز للكلام انظرالكود والنتيحجة التاليين
CSS code

h1, p {
text-shadow: 3px 2px 7px #9f9f9f;
}

HTML code

<h1>فريق ديف ميكس</h1>
<pre>
فريق تقني يقدم خدمات للمهتمين بمجال تكنولوجيا المعلومات
 .. رغم نشأته الحديثة فى فبراير 2011 الا انه اثبت كفاءته وكفاءة اعضاءه

فتكون نتيجة هذا الكود كالتالى
يوجد الكثير من الخصائص الجديدة الاخرى والتى سوف يثم مناقشتها فى الدروس والمقالات القادمة باذن لله مثل

  • Transitions
  • opacity
  • Multiple Backgrounds
  • Animation
  • and more …

Top


ملاحظات لابد ان تأخد فى الاعتبار
لم يدعم كل المنتصفحات كل الخصائص بنفس الطريقة لذلك فى كتابة السي اس اس 3 يعتبر اختلاف دعمهم للخصائص احدالعيوب والتى تكلفك كتابة الخاصية اكثر من مرة ولعلكم رأيتم اكثر من مرة فى الامثلة كتابة الخاصية ببعض الحروف قبلها انظر الصورة بكل متصفح وامامه الكلمة المختصرة المستخدمة فى السي اس اس 3 مع خصائصها

border-radius   ومثال على خاصية الحدود الدائرية

-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-ms-border-radius:10px;
-chrome-border-radius:10px;

وفى النهاية اتمنى ان اكون قد اوصلتك لبعض خصائص السي اس اس 3 المهمة وعرضت عليك مقدمة تجعلك تستخدم السي اس اس 3 اليوم قبل غدا وانتظروا باقى مقالاتنا فى القريب العاجل باذن الله ننتظر تعليقاتكم ومقترحاتكم .. بالتوفيق:)

, ,

2 Comments