سأشرح طريقة تصميم صفحة بها تجديثاتك بتويتر

المثال بعد التطبيق

تغريداتي 1

تغريداتي 2




التطبيق



سنستخدم جافا سكربت blogger.js

و أيضا سنستخدم جافا سكربت timeline

و جميعها توفرها تويتر وهي ذات وظائف مترابطة و لا يمكن عرض تحديثات بإستخدام واحدة دون الأخرى





كنت في دروس css3 أتبع طريقة الملف الواحد

و هي طريقة تحتاج لمعرفة بسيطة بالـphp



سأتبع هنا بالدرس الطريقة المعتادة لمثل هذة الدروس



أولاً ننشيء مجلد جديد و نعطية إسم كمثال (TwitterPage)



رمز Code:




بعد ذلك نظيف كود الخاص بإظهار عنوان الصفحة لنعطي للصفحة عنوان يظهر في المتصفحات

رمز Code:



تغريداتي




بعد ذلك نظيف كود إستدعاء ملف الستايل الذي سننشأة بعد قليل




رمز Code:





نقوم بعدها بإغلاق وسم head لأننا إنتهينا منه

نظيف تحت كود إستدعاء ملف الاستايل كود إغلاق الـhead




رمز Code:





حتى الآن قمنا بكتابة هذة الأكواد


رمز Code:






تغريداتي







الآن نبدأ بالمحتوى مع وسم body

و نضيف وسم




رمز Code:





بعدها نقوم بإضافة ما بداخل الـbody

و سيكون بداخلها تحديثات تويتر

نقوم الآن بإضافة وسم التقسيم div و بداخل مُعرف تحديثات تويتر و نسمية mosta7il

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

http://img103.herosh.com/2011/10/22/637918207.jpg



لذلك نكتب




رمز Code:





ثم نقوم بكتابة وسم القوائم الغير متسلسلة ul

و بداخلة وسم المُعرف أو وسم التعريف بالعنصر id

و نقوم بتسمية القوائم بـtwitter_update_list

و آخيرً و ليس آخراً نقوم بإغلاق وسم التقسيم الخاص بـ عرض و طول المستطيل الذي سيعرض فية التحديثات



لذلك نكتب بالطريقة التالية



رمز Code:






الآن إنتهينا من التقسيم الأساسي لعرض التحديثات



نأتي الآن لجلب التحديثات من تويتر عبر إستدعاء الجافا سكربت المعنية بعرض آخر تحديثاتك



هناك طريقتنا و سأشرح الاسهل و هي الإستدعاء



الآن نحن نتعامل مع سكربت لذلك نقوم بكتابة وسم السكربت script و سيكون نوع السكربت text/javascript



نكتب كود إستدعاء الجافا سكربت و عددها إثنان


رمز Code:







بذلك إنتهيناء من إستدعاء الجافا سكربت و لم يتبقى سوى إغلاق وسمي الـhtml و الـbody






نُضيف كود الإنتهاء
رمز Code:







إنتهينا من ملف HTML

نقوم الآن بحفظة داخل مجلد TwitterPage الذي إنشأناه في بداية الدرس



ننشىء الآن مجلد جديد داخل مجلد TwitterPage و نسمية images



تقوم بدورك بتصميم صورة خلفية للتحديثات



أو قم بحفظ الصورة الخلفية المُطبقة عل الدرس من هنا و قم بتسميتها page-bg

و خلفية قوائم التحديثات من هنا و قم بتسميتها transpBlue







إحفظها داخل مجلد images



نأتي الآن للخطوة الأخيرة و هي كتابة ملف style.css



و سيكون بالشكل التالي و لك الحرية في تغيير ما يناسبك
رمز Code:

*{ margin: 0; padding: 0; }
body {direction:rtl !important;font-family: tahoma, serif;
background: url(images/page-bg.jpg) top right no-repeat #2f2e2c;}

#mosta7il {
position: absolute;
right: 186px;
top: 99px;
width: 376px;
height: 360px;
overflow: auto;
}
ul#twitter_update_list {
list-style: none;
font-size: 14px;
}
ul#twitter_update_list li {
margin-bottom: 10px;
padding: 10px;
color: #7a8a99;
background: url(images/transpBlue.png);
}
a { color: #96997a; }

بعد ذلك قم بحفظ ملف الستايل بداخل مجلد TwitterPage





بعد التطبيق للدرس ستكون لديك صفحة بآخر تحديثاتك على تويتر و بإمكانك الإبداع فيها


المصدر:
شرح إنشاء صفحة لتويتر | مدونة مستحيل