cssbit 2.0

2- تقنيات سريعة عن css

25 مايو 2008

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

#sidebar p {
	font: 1.2em "Lucida Sans Unicode";
	color:#f00;
}

يمكنك استعمال خطوط أخرى وفق الترتيب الذي تريد بدءا من الاول فالثاني ..الخ:

#sidebar h2 {
	font: 1em "Lucida Sans Unicode", Tahoma, Arial;
	color:#313800;
}

ضمن تصنيف تطوير | لا تعليقات »

تقنيات سريعة في css

25 مايو 2008

لتحديد خصائص لبعض الأوامر الموجودة ضمن xhtml نستعمل نفس الاوامر في ملف css وتوجد عدة طرق لذلك ..
اذا كان لديك فورم بريدي ضمن كلاس اسمه content يمكن كتابة ما يلي:

#content input {
	border: 1px solid #ddd;
	padding: .3em;
}

أما اذا اردت تحديد خصائص لجميع input المستعملة في الصفحة فيمكنك كتابة ذلك مباشرة:

input, textarea, select {
	border: 1px solid #ddd;
	padding: .3em;
	color:#074173;
}

نفس الشيء مع الاوامر الاخرى: ul, li, p, h2, hr

img {
	border: none;
	vertical-align: middle;
}
 
code {
	font: 1.2em "Lucida Sans Unicode";
	color:#A60402;
}

ضمن تصنيف تطوير | لا تعليقات »

درس تصميم قائمة أفقية css و xhtml

23 مايو 2008

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

الدرس متوافق مع ie, firefox, safari, opera .. وخالي من الأخطاء ومكتوب ب css و xhtml

سنبدأ بكتابة كود عرض قائمة ولذلك نستعمل ul و li ..

سنحصل على قائمة بهذا الشكل:

كود css:

body {
	font:1em arial;
	margin:0;
	padding:0
}
 
#menu {
	margin:10px auto;
	width:600px;
	border:1px solid #67b7f8
}
 
#menu ul li a {
	color:#2799f6;
	text-decoration:none
}
 
#menu ul li a:hover {
	color:#000;
	text-decoration:underline
}

تجربة المثال من هنا

سأضيف تاثيرات وألوان لاكواد css السابقة بهذا الشكل:

#menu ul li,#menu ul li a,#menu ul li a:hover {
	display:block
}
 
#menu ul li {
	float:left;
	margin:0 05px 10px 0;
	height:25px
}

وبعض الألوان للروابط كالتالي:

#menu ul {
	width:auto;
	overflow:auto;
	list-style:none;
	padding:1em .3em
}
 
#menu ul li a {
	color:#2799f6;
	background:#d3eafd;
	padding:.4em;
	border:1px solid #d3eafd
}
 
#menu ul li a,#menu ul li a:hover {
	text-decoration:none
}
 
#menu ul li a:hover {
	color:#333;
	background:#f7f7f7;
	border:1px solid #ddd;
}

ساحصل على شكل شبيه بهذه الصورة:

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

تجربة مثال من هنا

يمكن اضافة نصوص وصور ..الخ، الشكل النهائي:

أضفت بعض الأكواد ك fix لمتصفح internet explorer:

    [if lte IE 6]
 
    [endif]

حذفت بعض اوامر الشرط من هذا الكود ولمعرفته كيف يكتب بشكل كامل استعرض سورس الصفحة

تجربة المثال من هنا
تحميل الملفات

ضمن تصنيف دروس | لا تعليقات »

مطور ويب 2.0

20 مايو 2008

ربما حان الوقت لكي نتحدث عن مطور ويب 2.0، فنحن نسمع عن web 2.0 و business 2.0 .. الخ من المفردات والمعايير الجديدة، وفي نظري مطور الويب 2.0 يجب أن يتميز بما يلي:

إتقان css و xhtml بدرجة كبيرة
العمل بلغة برمجة او 2 وعلى الخصوص: ruby و php
استعمال نطاق mootools أو jquery بكفاءة
خبرة في مشاكل المتصفحات والقدرة على تخطيها (Fix)
استعداد للانتقال الى HTML 5 أو XHTML 2.0
استعداد للهجرة الى CSS 3.0
خبرة كبيرة في search engine optimization أو (SEO)
برمجة تطبيقات ويب 2.0 بكل ما تتطلبه من معايير
الاستعداد لتعلم أي تقنية جديدة
خبرة في تقطيع تصاميم PSD باحترافية كبيرة
توفر مدونة شخصية
الاستعداد أكثر لثورة ويب جديدة ك web 3.0

لكن مجموعة كبيرة من المطورين العرب لم تنتقل بعد الى 2.0 فهي تتميز ب:

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

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

adii.co.za
hypjo.fr
webfruits
bird
gebalatomasz
feelwire أفضل مثال على موضوعي
karimzurita

ضمن تصنيف تطوير | لا تعليقات »

روابط (22)

18 مايو 2008

ضمن تصنيف روابط | لا تعليقات »

مبرمج أم مطور ويب ؟

18 مايو 2008

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

فقد تجد مثلا مبرمج Java يتعامل مع هذه اللغة فقط، وربما ليس لديه الإلمام الكافي ب css و xhtml .. حتى طريقة عمل المبرمج ومميزاته تختلف عن المطور ..

في هذه القائمة بعض الفروقات بين المطور والمبرمج .. وهي تعبر عن وجهة نظري الشخصية

مطور الويب:

مهتم بمعارض css
يزور المدونات الاجنبية المتنوعة
يقرأ حول التقنية وجديد المنتجات
يتعامل مع css و xhtml بشكل يومي
يجرب البرامج والمحررات المختلفة
اغلب خياراته تكون: php, asp.net, ruby ..
بامكانه ان يكون مصمم فوتوشوب أيضا
مصمم واجهات User Interface
…. الخ

مبرمج:

كتابة مئات الأكواد في المحرر
عدم الاهتمام بالألوان و المعارض
لا يقرب الفوتوشوب
يستعمل احد انظمة linux
شعر مخيف من جراء الاهمال
يستعمل لغة أخرى ك java, vb.net ..الخ
… الخ

ضمن تصنيف تطوير | لا تعليقات »

css و xhtml - الدرس 1

17 مايو 2008

وجدت إضافة لتلوين الأكواد، متوافقة مع اختبارات w3c ولا تظهر أية أخطاء، لذلك قررت استعمالها مع إضافة بعض التعديلات .. اسم الإضافة WP-Syntax

عنوان الدرس: تصميم واجهة دخول الى لوحة التحكم
البداية بكود تعريف صفحة XHTML

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" lang="ar">
 
<head>
 <title>نموذج دخول</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
 
<body>
...
 
</body>
</html>

سأكتب بعض الأكواد مكان النقط الثلاث ..

<div id="login">
<h4>لوحة تحكم الإدارة</h4>
<form method="post" action="login.php">
<p><label for="username">اسم الدخول</label><br />
<input type="text" name="username" id="username" /></p>
 
<p><label for="password">كلمة المرور</label><br />
<input type="password" name="password" id="password" /></p>
 
<p><input type="submit" value="دخول" class="submit" /></p>
</form>
</div>

التتمة في الغذ ..

ضمن تصنيف دروس | لا تعليقات »

مطور ويب ؟

17 مايو 2008

أعتقد أن مهنة مطور الويب ليست بالسهولة التي يعتقدها البعض، صحيح أنه عمل ممتع ومثمر لكنه ليس شهر عسل كما قال أحد الإخوة ..
فمن بين ما يجب ان يتميز به المرء لكي يكون مطورا ناجحا ..