Posts Tagged ‘CSS’

إنشاء محتويات عائمة في ووردبرس

2010/05/04
يتيح ووردبرس لمستخدميه إمكانية كتابة تعليمات CSS في محتوى التدوينات و الصفحات و الصناديق الجانبية، و هذه ميزة رائعة فهي تمكن المستخدم من القيام بالكثير من التعديلات في مدونته.
لا أريد أن أطيل، سأتحدث عن كيفية إنشاء صندوق عائم في المدونة كالذي أضفته اليوم على اليسار و هو يحوي روابط كصور تقود إلى حساباتي في فلكر و تويتر و خلاصات المدونة بالإضافة إلى الابتسامة التي تؤدي إلي هذه التدوينة.
لإنشاء محتوى عائم في الصفحة نستخدم تعليمة position في CSS بالإضافة لـ left, right, top, bottom تأخذ الخاصية position القيم relative, absolute, fixed ، لجعل المحتوى في موضع مطلق بالنسبة للصفحة ثم نتحكم بهذا الموضع نستخدم absolute و لجعل المحتوى مثبت نستخدم fixed ثم نحدد المكان بالضبط من خلال left, right, top, bottom

مثال:

<div style="position:absolute;top:10px;right:10px;">
Hello
</div>

مثال 2:
<div style="position:fixed;top:300px;left:0;color:white;
width:100px;height:100px;background-color:red;">
Hello 2
</div>

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

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

Advertisements

الخطوات المرحلية لتطوير المواقع

2008/03/27

من خلال تجربتي أود أن أكتبي عن الخطوات المرحلية أو المتصاعدة في التعلم الذاتي من أجل تطوير المواقع.

1 – تعلم كيف تنشئ صفحة HTML بواسطة برنامج مثل فرونت بيج أو Nvu أو دريم ويفر أو أي برنامج مشابه (كبداية) ، لا تستمر بذلك ، تعلم فقط كيف تصمم صفحة بواسطة هذه البرامج أو صمم موقع بسيط بواسطة HTML فقط ، حاول أن تطلع على الكود أحيانا مثلا و أن تعدل فيه.

2 – ابدأ بتعلم HTML و هناك الكثير من المواقع التي تحوي دورات تعليمية للـ HTML و بوقت متزامن تعلم مبادئ CSS.

3 – انتقل إلى XHTML و CSS حاول تقليل الكود ، قلل قدر الإمكان استخدام الجداول، تحقق من صحة صفحتك بواسطة XHTML Validator و هو متوفر في موقع w3.org أيضا تحقق من صحة ملف الـ CSS .

4 – ابدأ بتعلم لغة برمجة خاصة بتطوير المواقع مثل PHP أو ASP أو Python ، لعل PHP حاليا الأكثر شهرة و هي مجانية و مفتوحة المصدر و بالتالي فهناك كم هائل من البرمجيات مفتوحة المصدر المكتوبة بلغة PHP ، أنصحك أيضا بتعلم Python فهي لغة لها مستقبل كما أتوقع ، أو Ruby.

5 – تعلم بشكل بسيط JavaScript القياسية ، حاول أن تتعلمها من مراجع تراعي جميع المتصفحات فلا تتعلم مرجع يتحدث فقط عن JS، تعتبر ECMA الأكثر قياسية.

6 – طور نفسك في PHP (فيما لو كنت بدأت بها) ادرس مواضيع متقدمة مثل OOP و API و Security ، حاول أن تفهم برمجيات مفتوحة المصدر و أن تقوم بتطويرها.

7 – تعلم المزيد عن جافا سكريبت ، ادرس مواضيع متقدمة ، و ابدأ بتعلم XML ، حاول أن تنشئ مستندات XML و أن تعرضها بواسطة CSS و في مرحلة مستقبلية بواسطة XSLT ، أنشئ لغة خاصة بك بواسطة XML حاول أن تبني لها ملف إعراب parser بواسطة DTD أو XSD ، أيضا تعلم الرسم ولو بشكل بسيط بواسطة SVG .

8 – اهتم بشكل كبير بالأمان Security ( أمن الموقع أهم شيء فيه ) ، تعلم كيف تتعامل مع ملفات XML بواسطة الـPHP مثالا على ذلك حوّل قاعدة بيانات SQL إلى XML و العكس ، صمم قارئ RSS أو ATOM مثلا.

9 – ابدأ بالـ Ajax و مواضيع أخرى مثل أساليب مصادقة محركات البحث مثل الروابط النظيفة Clean URLs و تعلم عن ملف robots.txt و خريطة الموقع sitemap.xml و ابحث عن قدرات .htaccess

10 – أنشئ تطبيقات ديناميكية و استخدم فيها خبراتك في جافا سكريبت و XML بمعنى استخدام Ajax.

11 – تعرف على مكتبات للجافا سكريبت مثل prototype.js و rico.js و غيرها.

12 – أعد تقييم الكود ، في كل مرة تكتب فيها يجب أن تكون قادرا على اختصاره ، و على أن يكون أكثر قوة ، لا تجعل في تطبيقاتك ثغرات ، اختبر كل شيء ، أنشئ مكتباتك الخاصة بمختلف المجالات.

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

14 – أنشئ مدونتك الخاصة (إن لم يكن عندك) اكتب عن تجاربك ، الأخطاء التي مررت بها و كيف تجنبتها، اكتب عن التقنيات الحديثة، شارك أفكارك القيّمة مع الآخرين.


يبدو أني أطلت بالحكي ، بالنسبة لموضوع XHTML و CSS لا تزال شركات كبيرة تصمم مواقع باستخدام فرونت بيج ، عملت مرة مع شركة و كانت مهمتي هي تحويل القوالب من طويلة منشأة بواسطة فرونت بيج إلى صفحات نظيفة ، أحد المواقع اختصرت الصفحة من 400 سطر إلى 47 سطر !
هالأفكار و المراحل من وجهة نظري و من تجربتي ، قد يكون للآخرين وجهة نظر مختلفة من حيث أن بعض الأمور غير مهمة مثل SVG أو تقليل الجداول أو أي شيء آخر ، و يبقى لكل رأيه.

ملاحظة : لم أضع روابط لمواقع تخص كل موضوع من المواضسيع السابقة لأنه يمكن البحث بسهولة و ربما ما أراه مناسبا قد تراه غير مناسب ، لكن الأفضل التعلم من المصدر ( الأصل !!!).

إطار مظلل بلا صور

2008/02/21

من خلال مشاهداتي لأساليب التصميم المختلفة المتبعة لإنشاء إطار حول صندوق أو صورة لاحظت أن يتم استخدام طريقتين فقط.

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

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

لا أعلم إن كنت حتى الآن عرفت عن أي شيء أتكلم ، انظر هذه الصورة و ستعرف عما أتكلم.

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

الطريقة التي خطرت لي هي كالتالي :
div ضمن div ضمن div ضمن … عدد معين منهم و كل واحدة تملك إطار Border لونه أقل من الآخر و بعرض 3 بكسل مثلا ، ستشكل بمجموعها إطار يكافئ الحالات السابقة إلا أنه بدون استخدام صور و ملائم في أي مكان.
إليكم الكود :

CSS

.pict{
width: 100px;
height: 100px;
padding: 0;
background-color: #FFFFFF;
}
.pict div{
border: 3px solid #FEFEFE;
padding: 0;
}
.pict div div{
border: 3px solid #FCFCFC;
padding: 0;
}
.pict div div div{
border: 3px solid #F9F9F9;
padding: 0;
}
.pict div div div div{
border: 3px solid #F5F5F5;
padding: 0px;
}
.pict div div div div div{
border: 3px solid #F0F0F0;
padding: 5px;
}
.pict div div div div div *{
border:0;
padding: 1px;
}

مثال :

مرحبا ، هذه تجربة لصندوق بطول 125 و عرض 125 !

اضغط هنا لتحصل على ملف مضغوط يحوي كود css مع صفحة html تستخدمه.