ما الذي ترغب بقراءته هنا؟

الإثنين 28 يونيو 2010

ما نوع المواضيع التي تريد الاطلاع عليها في هذه المدونة؟ أرجو منك أن تترك ردا في صفحة التعليقات، أريد معرفة وجهات نظر مختلفة حول الموضوع.

4 تقنيات يمكنك البدء باستعمالها ب CSS3 (درس للمبتدئين)

الإثنين 28 يونيو 2010

Radius

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

#main {
    -moz-border-radius:10px
}

ملاحظة: دائما ان كانت خاصية في CSS3 تبدأ ب -moz- فستحتاج الى كتابة ما يقابلها للمتصفحات الأخرى:
ل Chrome و Safari التي تعتمد على Webkit نكتب -webkit- بدل -moz- وبالنسبة ل Opera وباقي المتصفحات، فبدون هذا الرمز: اي border-radius سأكتفي في هذه الأمثلة بسطر واحد.

أمثلة:

radius

radius

Rotate

لقلب نص أو صندوق ونستعمل القيم الموجبة أو السالبة للاتجاهات (أسفل وأعلى):

#main {
    -moz-transform:rotate(2deg);
}

أمثلة:
rotate
rotate

Text-Shadow

أو تاثير الظل على النصوص:

h2 {
  text-shadow:1px 1px 1px #fff
}

دائما يمكنك استعمال قيم موجبة أو سالبة للاتجاهات، جرب ذلك:

text-shadow

Box-Shadow

هذه الخاصية ستعوض استعمال الصور لصنع ظل كخلفية:

#main {
    -moz-box-shadow:1px 1px 1px #999
}

أو:

#main {
    -moz-box-shadow:1px 1px 1px #999, -1px -1px 1px #ddd
}

أمثلة:

box-shadow

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

القوائم List ب CSS

الإثنين 28 يونيو 2010

القوائم (List, Navigation, Menu …) موجودة لتسهل وتسرع عملية التصفح، هناك من يضع روابط عادية <a> جنبا الى جنب، ولاجل Semantic Code وفهرسة الصفحات في محركات البحث بأفضل شكل ممكن، يفضل استعمال <ul> و <li>.

هذا الدرس البسيط يشرح طريقة تصميم قائمة أفقية (في بضع خطوات فقط):

list

قائمة ul:

<ul>
	<li><a>مقدمة</a></li>
	<li><a>بحث</a></li>
	<li><a>من نحن</a></li>
	<li><a>مراسلة</a></li>
</ul>

ضم الروابط داخل Block:

ul {
    overflow: auto
}

كي تتضح هذه الخطوة أستبدل السطر السابق ب:

ul {
    border:1px solid #ccc
}

الان يمكنني استعمال:

ul li {
    display: inline;
}

لكن سيتم تجاهل هذا الأمر في حال أردت جعل الرابط <a> على شكل Block
فهذا السطر سيجعل الروابط تظهر عموديا رغم أنني وضعت Display:inline في الوسم

  • ، ولن تعمل كذلك في حال قلب القيمتين.

    لذلك ساستعمل Float عوضا عن display:inline, السطر السابق سيصبح كالتالي:

    ul li {
        float: right
    }

    ويمكنني جعل الرابط Block ربما لاغير لون الخلفية في حالتي Active و Hover:

    ul li a {
        display: block
    }

    حصلت على قائمة افقية، ويمكنني الان تغيير شكل والوان القائمة بإضافة بعض الخصائص ب CSS3.
    لمن قام بتجربة التعديل الأول (حذف overflow:auto ووضع border) سيحصل على قائمة بهذا الشكل:

    list

    لتمييز رابط معين أضيف له Class كالتالي:

    	<li><a class="last">مراسلة</a></li>

    ولن احتاج سوى لتغيير لون الخلفية:

    ul li a.last {
        background: #97C1C6
    }

    list

    ماذا إذا أردت جعل القائمة عمودية دون أن أعيد كتابة الأكواد من الصفر؟
    يكفي أن أحذف Float عن طريق:

    ul li {
        float: inherit
    }

    أو حتى:

    ul li {
        float: none
    }

    list

  • تنسيق وسوم Tags ب CSS

    الخميس 24 يونيو 2010

    مقدمة:

    هذا الدرس يشرح طريقة تنسيق Tags في تطبيقك أو موقعك بلمسة Web 2.0

    Tags

    مثال مباشر بالانجليزية
    مثال مباشر بالعربية
    تحميل الملفات

    الخطوات:

    يمكن وضع الوسوم tags في قوائم list باستعمال ul و li كما يمكن استعمال فقرة p أو كلاس عادي div وتضع فيه الوسوم مرتبة:

    <div class="tags">
     <a>python</a>
     <a>scala</a>
     <a>freelance coder</a>
     <a>html5</a>
     <a>twitter oauth</a>
     <a>developer</a>
     <a>iphone</a>
     <a>adobe cs4</a></div>

    ضم الوسوم (في حال كانت ستظهر في أكثر من سطر واحد) في صندوق واحد:

    .tags {
      overflow: auto
    }

    لن أستعمل display: block لأنني لا أرغب بأن تظهر الوسوم واحدة تلو الأخرى، كما لا ارغب بأن أحدد العرض width بنفسي، لأنني لا اعرف طول الكلمات، بعضها قد يكون مركبا من كلمتين، لذلك ساستعمال float كي تظهر الوسوم مرتبة واحدة تلو الأخرى وفي نفس السطر، واضيف بعض الخصائص كاللون والحجم ..

    .tags a {
     float: left;
     margin:0 4px 4px 0;
     text-indent: 1.5em;
     background:#eee;
     padding:.3em;
     color:#777;
     font-size: small;
     text-decoration: none
    }
    .tags a:hover {
     background-color:#999;
     color:#fff
    }

    يمكن اضافة Icon تمثل وسم Tag وهي منتشرة بكثرة في المدونات الأجنبية:

    .tags a {
     background:#ccc url(../images/tag.png) no-repeat 5% 50%
    }

    ولما لا اضافة Radius ب CSS3 على الوسوم:

    .tags a {
      -moz-border-radius:6px
    }

    وكي يظهر Radius في باقي المتصفحات نكتب:
    للمتصفحات التي تعتمد على webkit ك Safari و Chrome:

    .tags a {
     -webkit-border-radius:6px
    }

    ل Opera:

    .tags a {
     border-radius:6px
    }

    متصفحات IE التالية: 6, 7 و 8:

    .tags a {
      -ie6-border-radius:6px;
      -ie7-border-radius:6px;
      -ie8-border-radius:6px
    }

    الأكواد الأخيرة الخاصة ب IE مجرد مزحة، متصفحات IE لا تدعم CSS3، لكن يمكنك تجربة ملف ie-css3.htc

    back

    الخميس 27 مايو 2010

    عودة بعد غياب طويل
    آمل أن يكون الجميع بخير

    Beautiful Forms with Icons

    الأربعاء 3 فبراير 2010

    إليك طريقة سريعة وبسيطة، لإضافة Icons لنموذج بريدي
    الصفحة مجربة على: Chrome, Safari, Opera, Firefox و IE7

    مثال مباشر

    بناء نموذج بريدي:

    <p>
        <label>username</label>
        <input type='text' name='username' size='30' />
    </p>
    <p>
        <label>password</label>
        <input type='password' name='password' size='30' />
    </p>

    إضافة Icon لكل حقل:

    form input[type=text] {
        background: url(/images/user.png) no-repeat
    }
    form input[type=password] {
        background: url(/images/key.png) no-repeat
    }

    ثم إزاحة الكلمات عن Icon بمقدار معين:

    form input {
        text-indent: 1.2em;
    }

    يمكن أيضا إضافة Class لكل حقل وعدم استعمال Attribute Selectors إن رغبت بإضافة حقول أخرى لا يوفرها Input Type

    روابط (72)

    الأربعاء 3 فبراير 2010

    Style Web Forms Using CSS3

    الأربعاء 3 فبراير 2010

    يمكن الحصول على نماذج بريدية أنيقة، بإضافة خصائص قليلة عن طريق CSS3، ومع أن هناك متصفحات (IE وأحيانا Opera) لا تدعم الخصائص الجديدة ل CSS3 وبالتالي ستظهر التأثيرات فقط لمن يستعمل متصفحات حديثة، (التصاميم الحديثة للمتصفحات الحديثة)

    مثال مباشر

    بناء النموذج:

    <form method='post' action='#'>
      <p>
        <label>name</label>
        <input type='text' name='name' size='30' />
      </p>
    </form>

    خصائص CSS:

    form textarea,
    form input {
        border:1px solid #C3A6E1;
        color:#333;
        padding:.3em;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
    }

    أضفت منحنى دائري بقيمة 3px لإطار النموذج البريدي سواء كان input أو textarea
    خاصية Radius للمتصفحات التي تعتمد على محرك Webkit

    form textarea,
    form input {
        -webkit-border-radius:3px
    }

    عند وضع الفارة على النموذج Focus يتم تغيير Border وإضافة Shadow بقيمة خفيفة

    form textarea:focus,
    form input:focus {
        border:1px solid #96C;
        -moz-box-shadow:0 0 4px #E6D9F2; 
        -webkit-box-shadow:0 0 4px #E6D9F2; 
    }

    من هنا وهناك

    الإثنين 1 فبراير 2010
    • فكرة موقع بالانجليزية للمقابلات Interviews مع: مصممين، مبرمجين، شركات Startups، الفكرة لا تتطلب أكثر من دومين واستضافة صغيرة، لدي 3 مقابلات جديدة لم أترجمها بعد يمكن البدأ بها، وأعتقد أن 4 أو 5 مقابلات في الشهر ستكون جيدة؟
    • انهيت تطبيقا WebApp للصوتيات، بمميزات وخصائص كثيرة، وباستعمال (PHP, MySQL, CSS 2.1 & CSS3, JQUERY, XHTML) مع لوحة تحكم غنية بالخصائص, يمكن الاطلاع على صور له من هنا Screenshots.
    • استبدلت 7zip ببرنامج آخر مفتوح المصدر، به مميزات كثيرة أعجبتني: PeaZip (فتح الملف المضغوط في مجلد جديد تلقائيا، إنشاء عدة مجلدات مضغوطة انطلاقا من مجلد واحد ..)
    • إضافة Addon لمتصفح Firefox تدعى: ScreenGrab سهلة الاستعمال وسريعة أيضا، يمكنني الان التخلص من Snagit.
    • أجرب Nirvanapp تطبيق ويب 2.0 أنيق لإدارة المهام GTD. وكذلك تطبيق آخر أكثر بساطة وبفكرة مختلفة: Teuxdeux.

    New Year’s resolution

    السبت 30 يناير 2010

    بعد أيام قليلة، ستنهي المدونة سنتها الثانية.

    هناك أفكار وتوجهات جديدة، – وهو أمر صحي في حياة مدونة -  فاللغة العربية (تدوين، برمجة، تطوير ..) لا تفتح الكثير من الآفاق، وفي المقابل، يمكن لمدونة بسيطة بالانجليزية – على تواضعها – أن تحقق ما لا تحققه نفس المدونة بالعربية في سنوات.

    أصبحت أكثر وعيا بفرص الكسب ماديا من التدوين، تمة مدونات أجنبية تعرض 150 دولار وأخرى 500 دولار مقابل مقالة واحدة عن التطوير أو حيل CSS .. ولا ننكر أن أصحاب هذه المدونات يستفيدون بشكل كبير مثلما يفيدون مجتمع التطوير.

    هي وقفة للمراجعة وتصحيح المسار.