انفو جرافيك:التصميم الجرافيكي
رد
ماذا تحتاج لتقدم تصميم ناجح؟
ماذا تحتاج لتقدم تصميم ناجح؟
معادلة التصميم الناجح في شكل انفوجرافيك عربي واحد من التصاميم الرائعة والتى شاهدتها اثناء مشاركتي في الموسم الاول من المسابقة
ماذا تحتاج لتقدم تصميم ناجح؟
سلسلة دروس نصائح في css: نظف اكواداك واختصرها بنفسك
اليوم نقدم عدة قواعد تساعدك ع اختصار الوقت والجهد والابتعاد عن مايسمى منظف الكود او اختصار الاكواد تعلم بنفسك ان تختصر كل اكوادك وتساعد ع تسريعها
اولا :اكتب خصائص الخلفية في سطر واحد background
الكثير منا يكتبون اكواد الخلفية في عدة سطور ودا غلط كبير جدا
background: url(image.gif);
background-color: #eaeaea ;
background-repeat: repeat-x;
background-position: top left;
لتصبح بهذا الشكل
background: #eaeaea url(example.gif) repeat-x top left;
ليست بالشئ المعقد
------------------------------------
2-نفس الكلام بالنسبة لخاصية Border
حتى انتا نفسك تلاحظ في نسخ الفي بي مكتوبة بشكل سطر واحد في متغيرات css
border-color: red;
border-width: 1px;
border-style: solid;
بهذا الشكل
border: 1px solid red;
ببساطة
--------------------------
3-خصائص القوائم List properties
list-style-position: outside;
list-style-image: none;
list-style-type: disc;
list-style-type: disc;
لتكون بهذا الشكلist-style: disc outside;
-----------
4-خصائص الخطوط
Font and line-height properties
font-family: Arial, Helvetica;
font-weight: bold;
font-style: italic;
font-size: 1em;
line-height: 1.5em;
لتكون
font: bold italic 1em/1.5em Arial, Helvetica;
----------------------------
5-خصائص
Margin and padding
Margin and padding
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
margin: 10px 10px 10px 10px;
------------------------
6- قم بالتمرين الدائم ع اكواد css التى تستخدمها
-----------------
7- افحص افحص افحص
سلسلة دروس نصائح في css: نصائح لتنظيم العمل في css
السلام عليكم ورحمة الله وبركاته
سلسلة دروس مستفادة من لغة css هيا عبارة عن نصائح مستفادة من خلال تجربتي مع css نصائح وطرق يجب عليك ان تعرفها لتحسن كتابتك في css ولتزيد من الفاعلية في الكتابةولتزيد من السرعة في التحميل وتساعد المتصفح على ترجمة الاوامر بشكل اسرع وايضا لاننسى الصورة الجمالية في نظيم الاوامر
1-قم بتجميع ملفات css داخل مجلد واحد فقط
المعنى المقصود من هنا هو تنظيم وتصنيف العمل بشكل يسمح بتسهيل مراجعة العمل مما يساعد في النهاية ع تحسن بناء الموقع او العمل المراد في النهاية كمان من خبرتي المتواضعة التنظيم حلو
————
2-استخدم محددات ذات معنى وذات كفاءة
بمعنى انه عند كتابة محدد وليكن مثلا id ليكن ذا اسم محدد يعبر عن المنطقة اللى تعمل فيها ولتكن مثلا الهيد
سوف يكون ك الاتي
html
سوف يكون ك الاتي
html
<div id="hed_r"></div>
ويكون محدد ال css الى منطقة الهيد للتذكر مثلا الصور اليمنى المشار اليها في الحرف r ايضا يجب عليك عن استخدام محددات ذات وصف دقيق لتحديد جزء معين مثل المحدد الاتي
ul li a span
يجب ان تعلم ان المتصفحات تقرا السطور من اليمين الى اليسار قد يكون ذلك غريبا ولكن لتعلم ان المتصفحات تقوم بمطابقة المكتوب بال html الاستايل الموصوف با css
لتفهم اكتر اقرا هذا المقال المفيد من جوجل efficient CSS selectors**************************
لتفهم اكتر اقرا هذا المقال المفيد من جوجل efficient CSS selectors**************************
3-استخدم التعليقات دائما داخل ملفات css وافصل بين كل جزء بتعليق
بساطة اختار لكل منطقة تعليق معين
/* Header styles */
/* ---------------------------------- */
/* Content styles */
/* ---------------------------------- */
/* Footer styles */
/* ---------------------------------- */
/* Content styles */
/* ---------------------------------- */
/* Footer styles */
————————-
4-استخدم التعليقات لتضع كافة الالوان اللى تحتاجها خلال العمل
بمعنى انا لما بشتغل ع استايل متعدد الالوان بكون واضع تحديد لاكتر من لون ودايما بنسى الكود بتاع اللون
/* Colors: Light Gray #eaeaea, Dark Gray #828282, Red #c60000 */
اسهل وافضل
—————————————————–
5-استخدم الاسماء ذات المعاني المنطقية والمحددة في المحدد في css
تاني باكد انك لو مفهمتش استخدام محددات css ذات كفاءة دي هتبسط عليك
بمعنى منطقة الهيد والفوتر استخدم اسما محدد لسهم زي كدا
header-logo or h-logoheader-menu or h-menuheader-tag or h-tag
————————————————————–
6-استفيد من عملك من خلال عمل اطار للعمل framework
كتير جدا لما بشتغل في حاجة جديدة واكون عايز اعمل حركة css من عمل اخر واكون ناسي الكود واعد افتكرواعد
اعيد وازيد
لغاية لما اتعلمت ان استفيد من ملفات العمل ببساطة اكتر
في حاجات بتظم الشكل في البداية اطار عمل زي ماقولت
العرض للصفحة باكامل اقل عرض وحاجت كدا حسب نظامك
.full-width
{
width: 100% !important;
}.min-width{
width: 1% !important;
white-space: nowrap !important;
}
.centered-inline
{
text-align: center !important;
}
.centered-block
{
margin-left: auto !important;
margin-right: auto !important;
}
****************
7-البساطة حلوة وبلاش تعقيد
دي واضحة جدا في عدم استخدام حركات معقدة وكتير واكواد كتير جدا في الملف
———————————————————————————————-
8-افحص افحص افحص
واضحة جدا جدا فحص العمل من خلال
CSS Validation Service
*******
ملحوظة اخيرة هذا العمل من خلا ماتعلمت من خبرتي في css ومن خلال الاستفادة من تجارب اشخاص اخرين ومن خلال الاجتهاد
————————————————————————
مراجع ومصادر
Blueprint: A CSS Framework | Spend your time innovating, not …
دولة الفيس بوك امبراطور الشبكات الاجتماعية انفو جرافيك
انفوجرافيك يتحدث عن الشبكة الاجتماعية الاكبر والاقوى في العالم فيس بوك
الرجل الذي غير العالم :سيرة حياة ستيف جوبز
الرجل الذي قال انا اخلد كل يوم الى النوم وانا اعلم اني قمت بشئ يسهم في تغيير العالم انه الرائع ستيف جوبز مؤسس شركة ابل.
انفوغرافيك يتناول حياة ستيف جوبز العبقري الذي غير العالم بتفاحة ! بدءاً من مولده سنة 1955 وحتى وفاته .. مروراً بكل الإنجازات والشركات التي أسسها والمنتجات ومافعلته بنا. من الماكنتوش و الآيبود والآيفون والآيباد ..
انفو جرافيك :الوطن العربي في ارقام
كنت قد شاركت في مسابقة تجسيد للانفوا جرافيكس ولكن للاسف للسنة الثانية ع التوالى تاتي وقت الاختبارات ولم استطع تقديم ما اريد ولكن لاباس فكل مرة ازداد تقدما وعلما بهذا النوع الرائع من التصميم
