Archive for the ‘تطوير ويب’ Category

ما المقصود بــ Tableless web design ؟

08/11/2007

Tableless web design هي طريقة ونهج لتصميم صفحات الانترنت بدون استخدام HTML Tables لتخطيط الصفحة، واستخدام <div> بدلا منها عن طريق CSS Positioning، هذه الطريقة حلت محل الجداول في التصميم يمكنك التحقق من ذلك ا إذا استعرضت أكواد للمواقع الأجنبية الحديثة مثلا wordpress، ستجد أنه الأغلبية امتنع عن استعمال الجداول. المعيايير تقول أنه يمكن استخدام جداول HTML فقط لعرض البيانات المجدولة.

لهذه الطريقة الحديثة مجموعة من المميزات منها:

  • قابلية الوصول: استخدام هذه الطريقة يسهل الوصول لمحتوى الصفحة لمجموعة من الأجهزة مثل PDA ، mobile phone.
  • تقليل bandwidth: وذلك لأنه كثير من الجداول كانت تستخدم فقط لتخطيط الصفحة يعني كثير من <table> <tr> <td> فضلا عن المحتوى نفسه، استبدال هذه الأكواد بـ <div> وبعض التنسيقات يقلل من وزن الصفحة ويساعد على التحميل السريع للصفحة خصوصا لدى الأجهزة المحمولة والتي يعد الـ bandwidth من الموارد المهمة فيها.
  • فصل المحتوى عن العرض: كانت الجداول سابقا جزء من التنسيق الأساسي للصفحة وكان التعديل في نمط معين يلزم التغيير في خصائص الجدول، أما بهذه الطريقة فالتعديل سهل عن طريق إضافة أو تعديل أنماط CSS والتي غالبا تكون منفصلة عن المحتوى.
  • سرعة عرض وتحميل الموقع على المتصفح: عندما يكون تخطيط الصفحة الرئيسي عبارة عن جدول، يعرض الجدول بعد تحميل كافة محتوياته، وربما تكون محتوياته كثيرة! بعكس عندما تخطط وتقسم بـ <div> لذا يلاحظ أن المواقع بالطريقة الجديدة أسرع بالتحميل على المتصفح.

لا يوجد مساوئ لهذه الطريقة سوى أنها تتطلب جهد أكبر للمبتدئين ومعرفة جيدة بـ CSS، نلاحظ حتى Adobe أزالت خيار Table Layout من آخر نسخة Dreamweaver CS3.  من يريد استعمال هذه الطريقة يجب أن يأخذ بعين الاعتبار أنه تطبيق معايير CSS تختلف متصفح لآخر لذا ينصح بتجربة الموقع على مجموعة من المتصفحات أثناء عملية التصميم ليكون موقعك Cross-browser compatible .

يوجد طريقة لتحويل جميع الجداول من صفحة ما إلى div layout من خلال Dreamweaver عن طريق:

Modify > Layout Mode > Convert Tables to Layers ولكنها ليست مفيدة إذا وجدت تعديلات كثيرة في خصائص الجدول!.

روابط مفيدة حول الموضوع:

Tableless Layouts

Why tables for layout is stupid

CSS Layout Techniques

Advertisements

طريقة عمل صندوق بأركان مدورة باستخدام CSS3

19/10/2007

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

قد أشرت سابقا إلى طريقة عمل صناديق بأركان مدورة .. نفس النتائج يمكن الحصول عليها ومن غير صور ولكن باستخدام CSS3 باستخدام الكود التالي :

<div align=”center” style= “border-width:1px; border-color:#FF9966;
border-style:solid;
background:#FF9966;
-moz-border-radius: 1.6em;
-webkit-border-radius: 1.6em;
border-radius: 1.6em;”>
<h3>Type your text here ! :D</h3>
</div>

 

بالطريقة السابقة سوف نحصل على صندوق بأركان مدورة كما بهذه الصورة:

 

وذلك فقط إذا كان متصفحك يدعم border-radius لاحظت في الموقع أن متصفح Safari أكثر من يدعم CSS3 ثم بعد ذلك فايرفوكس2 .. بعكس IE أعتقد أنه لا يدعم منها شيئا! إذا كان لديك IE جرب ذلك بنفسك افتح موقع CSS3.info ولاحظ القائمة الأفقية ستظهر لك بالتأكيد بهذا الشكل:

 

عند دعم CSS3 في المتصفحات بشكل أفضل سيتجه آلاف مطوري الويب لاستخدام الطريقة السابقة بدلا من استخدام الصور..

عن نفسي سأبدا في استخدامها من الآن.. فلا ضير أن يرى مستخدمي IE الصناديق معقوفة بدلا من مدورة..

أعجبني كثيرا Module تعدد الأعمدة الجديد في CSS3.

للاضطلاع على Modules أخرى زر موقع CSS3.info.

 

 

طريقة عمل صندوق بأركان مدورة

10/10/2007

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

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em} .br {background: url(br.gif) 100% 100% no-repeat} .tl {background: url(tl.gif) 0 0 no-repeat} .tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px} .clear {font-size: 1px; height: 1px} واستخدم الكود التالي طبعا داخل body :

<div class="bl"><div class="br"><div class="tl"><div class="tr"> Lorem ipsum dolor sit amet consectetur adipisicing elit </div></div></div></div> <div class="clear"> </div>

والملفات bl.gif ، br.gif، tl.gif ، tr.gif هي أركان الصندوق

المصدر : http://www.sitepoint.com/article/css-round-corners-boxes-curves

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