ودك تسوي موقع إنترنت و الناس تغني لك آديك آهو دخلت الحياة التقنية و ليك فيها ملكية .. أبو زيد زمانك

[الغيص]

02-01-2012, 07:17 PM
البريمل

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,849

هذا الموضوع عبارة عن سلسلة (( كيف تبني موقعك الإلكتروني على الإنترنت بنجاح ))
تصفح وتابع :

• الجزء الأول
• الجزء الثاني
• الجزء الثالث
• الجزء الرابع

أو أكمل الجزء الخامس معنا هنا …
يتكون الجزء الخامس من النقاط التالية :

• تصميم الموقع أو المدونة.
• تقطيع التصميم بعد تصميمه.
• تركيب التصميم في الموقع او المدونة.

بسم الله الرحمن الرحيم , نبدأ
تصميم الموقع أو المدونة

سنبدأ في هذا الجزء بتصميم الموقع أو المدونة.
هناك أمور يجب ان نحددها في تصميم الموقع مثل لون الموقع وتنسيق الموقع وأن نحدد العرض المناسب للموقع,
هل نريده متمدد بنسبة 100% او نريده ثابت بمقاس واحد ؟ أغلب المواقع المشهورة تستخدم تصاميم ذات عرض ثابت مثل Yahoo, WordPress, Facebook, YouTube وطبعاً الموقع الشهير عالم التقنية

لذالك سنقوم بعمل تصميم ذات عرض مقاس ثابت , مقاسات العرض الثابته يفضل أن يكون أقصى عرض 1003px لكي تكون مناسبه لأكثر الشاشات المستخدمه حالياً وهذا ما يتم عمله لأكثر المواقع الشهيره, سابقاً كانت تستخدم مقاسات العرض 779px لكي تتناسب مع دقة الشاشة 800*600 لجميع المستخدمين لكن بدأت هذه الظاهره تنقرض وهذا لأن أغلب اذا ما كان كل المستخدمين يستخدمون حالياً مقاس دقة شاشة اكبر من 800*600 مثل 1280*800.
هذا هو تصميمي الذي سأشرح كيفية عمل مثله بالفوتوشوب وسأشرح طريقة تقطيعه وتركيبه كمدونه

أضغط على الصورة لتكبيرها

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

بعض الأجزاء في التصميم مثل اسم الموقع والجمله التي تحت اسم الموقع وعناوين المقالات وعناوين القوائم الجانبية والنصوص المختلفه توضيحيه للتصميم وهي عباره عن امثله بحيث تقوم بتصميمها لكي ترى النتيجه النهائيه وبعد تقطيع واخذ الصور من التصميم تكتب النصوص بصيغة HTML وتنسق نوع الخطوط وألوانها بإستخدام CSS بنفس الخطوط والألوان التي استخدمتها في التصميم لكي تتناسق بالشكل المطلوب.
الأن بسم الله نبدأ
نفتح الفوتوشوب
نفتح صفحة جديدة بالضغط من القائمة العلوية ( File -> New ) أو ( ملف -> جديد )

اكتب اسم الملف الجديد << حركه مالها داعي بس احب اتفلسف , اكتب العرض 1003 ويجب ان لا يتعدى هذا الرقم دائماً في تصميم المواقع الإلكترونية كمعيار لأغلب مواقع الشركات العالمية, دائماً دقة الوضوح في تصميم المواقع يجب ان تكون 72 اما في انواع التصميم المختلفه تختلف الدقه فمثلاً في حال كان التصميم للطباعه فستكون افضل دقة هي 300 بيكسل.
محتويات الخلفية موضوعه على شفاف يفضل جعلها أبيض بدل شفاف او يمكنك تعبئة الخلفيه باللون الأبيض بعد إنشاء الصفحة بأداة التعبئة

الان بعد إنشاء الصفحة نختار أداة المربع من هنا

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

الان من نافذة الطبقات اضغط الزر الأيمن من الفأرة ثم اختر خيارات الدمج او Blending Options وهي على نفس الطبقه التي انشأناها قبل قليل التي تكون طبقة الشكل المستطيل
في حال ان نافذة الطبقات غير موجودة توجه لاعلى القائمة ثم اختر ( نافذة ثم طبقات ) او windows ثم layers

ثم عند فتح النافذة قم بإختيار تغشية متدرجة بالألوان 185ba2 إلى درجة اللون 92c7fd
كما رسمنا المستطيل الكبير في اعلى الصفحة نرسم مستطيل آخر تحته ولكن ارتفاعه اصغر بكثير
باستخدام اداة رسم الشكل المربع التالية :

و في هذه الحاله يفضل ان يكون اللون نفس اللون الموجود بالصورة وهو درجة اللون هذه ( 86c542 ) #

الأن نريد ان نضع على هذا المستطيل الأخضر تعبئة محشيه او قناع مثلاً نقاط بشكل جميل
فبالتالي نفتح صفحة جديدة بالضغط على ملف جديد او file new ثم نحدد المقاس العرض 7 والارتفاع 7 ثم نختار اداة القلم وليس الفرشاة وذالك بالضغط عليه من الأدوات الظاهره لك او اذا لم تكن ضاهرة فبالضغط على الزر الأيمن من الفأرة على اداة الفرشاة ثم اختيار اداة القلم

نختار اللون كما هو موجود في الشكل التالي بدرجة اللون هذه ( c7e4a7 ) # ثم نرسم شكلاً جميلاً بإمكانك عمل كما رسمت او الإبداع بنفسك بكل سهوله بالتنقيط
ولا تنسى ان تكون الخلفية شفافه لكي يضهر اللون الذي سنضع عليه القناع

الأن لنجعل هذا التصميم نموذج قناع لإستخدامه في اداة التعبئة المحشيه بالضغط على تحرير ثم تحديد النموذج او Edit ثم Define Pattern
واكتب اسم النموذج ثم اضغط موافق ونغلق الصفحة التي انشأناها

الأن نرجع إلى مستطيلنا الطويل الأخضر ونختار نمط الطبقه بالضغط على الطبقه بالزر الأيمن ثم اختيار خيارات الدمج او Blending Options
نختار نمط تعبئة الحشو ونختار من انواع الحشو وسنجد الحشوه التي انشأناها سابقاً , نختار عليها ثم موافق

سترى ان الشكل المستطيل ضهرت عليه نقشة جميلة ,
الأن نريد ان نصمم خلفية الجزء السفلي من الموقع والذي يسمى بـ (Footer) نقوم بمضاعفة طبقتي المستطيلين بأختيار واحد منهم ثم من لوحة المفاتيح الضغط على CTRL مع اختيار الطبقات التي تريدها وفي حالتنا هذه يكون المستطيل الآخر
ثم نضغط بالزر الأيمن من الفأرة ونختار مضاعفة طبقات او Duplicate Layer

سنجد ان الطبقتين تضاعفت

الأن نختار اداة التحريك او الـ move من ادوات التحكم او بالضغط على لوحة المفاتيح حرف V

طبعاً بما انك قمت بمضاعفة الطبقتين ستكون الطبقتين المتضاعفة لا زالت محدده عليها كما في الصورة السابقه ولكن اذا لم تكن محدده قم بتحديد الطبقتين التي تضاعفت قبل قليل
ثم في الصفحة اسحب الطبقتين إلى الأسفل واقلبهما بالضغط على CTRL + T ثم الضغط على الزر الأيمن من الفأرة واختيار قلب افقي او دوران افقي او Flip Vertical
بعد ذالك نود ان نعكس تدرجات الخلفية التي في المستطيل الكبير لكي يكون تصميماً جميلاً بشكل افضل , فنختار طبقة المستطيل الكبير ونختار على خيارات الدمج او Blending Options ثم في نمط تعبئة متدرجة نضع صح على ( عكس ) او Reverse

ليصبح لدينا مثل هذا الشكل

الأن لدينا خلفية الجزء العلوي (Header) وخلفية الجزء السفلي (Footer) , ونريد ان نصمم خلفية جزء المحتوى او الجزء الوسطي (Content, Middle)
نختار اداة رسم الشكل المستطيل ذو الزوايا المائلة ونختار درجة الميلان 25 بكسل ( درجة الميلان تكون في أعلى القائمة )

نرسم شكل مستطيل كبير في وسط الصفحة يقطع جزء بسيط من الجزء العلوي والجزء السفلي على ان يكون درجة اللون له ( cdeaf9 ) # كما في الصورة التالية

الأن على نفس الطبقة نختار خصائص الدمج او Blending Options لكي نقوم بتغيير نمط هذا المستطيل ذو الزوايا المائلة
من على خيارات الدمج: تخصيخ نضع دمج متطور وتضليل بقدر 59% او قريبه منها لكي يكون المستطيل شبه شفاف ويبين الجزء العلوي والسفلي من التصميم بشكل جذاب

مع اختيار خاصية الحدود بمقاس 13 بكسل واللون ( 70a7e1 ) #

لتظهر النتيجة كما في الشكل التالي :

عالم التقنية

 

[الغيص]

02-01-2012, 07:18 PM
البريمل

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,849

الأن لدينا تصميم خلفيه جميله للموقع
سنبدأ بملئ محتوى الجزء العلوي بكتابة اسم الموقع اولاً بأختيار أداة النص

والكتابة في اعلى الصفحة في مكان مناسب يكون موازي لبداية خلفية المحتوى ويكون خصائص الخط كالتالي

ومن ثم نكتب في اسفل عنوان الموقع هذا السطر ( الرئيسية | من أنا ؟ | سجل الزوار | إتصل بي ) والذي يمثل القائمة العلوية ونقوم بتحديد الكلمات ووضعها باللون 3372b6

وتحديد الخطوط ووضعها باللون 96c4db لتظهر بشكل جميل وجذاب

بكل بساطه نرسم مستطيل صغير تحت كلمة الرئيسية ( هذا المستطيل يمثل بأنك انت في هذه الصفحة عند الدخول على الموقع ) سنتطرق لكيفية عملها لاحقاً بإذن الله في درس عملية تقطيع وتركيب الستايل في المدونة

الأن بودي ان نضع في الجانب الأيسر من التصميم صورة للـ RSS ويمكنك أختيار صوره متنوعة كثيرة ومختلفة من محرك بحث قوقل للصور من هنا
http://images.google.com/images?q=rss+icons
ستجد الكثير والكثير من الصور الجميلة والرائعة والممتعة المتعلقة بأيقونات RSS او ما تسمى بالخلاصات
فمثلاً انا اخترت هذه الصورة

نقوم بنسخها بالضغط على الزر الأيمن ثم نسخ او نسخ الصورة من المتصفح ثم لصقها في الفوتوشوب بالضغط على CTRL + V او تحرير ولصق او Edit Paste
ونختار اداة العصا السحرية لنحدد الجزء الأبيض من الصورة بالضغط على الجزء الأبيض ثم من لوحة المفاتيح نضغط Delete

لتظهر النتيجة الجميلة التالية :

لكي يتناسق التصميم من الممكن تغيير لون الصورة بالضغط على CTRL + U ثم اختيار اللون المناسب كما في النافذة من الصورة التالية

لكي نزيد من جمالية التصميم ووضحه نكتب فوق الصورة RSS باللون الأبيض بكل بساطة

الأن خلصنا من محتوى الجزء العلوي باقي التشطيبات عليه مثل ما يقولون ,
فراح نستخدم الفراشي لزيادة تجميل الجزء العلوي او الـ Header
لتصبح النتيجة كالتالي :

ستجد الكثير والكثير من الفراشي من هنا http://www.brusheezy.com
وراح اضيف لكم الفراشي المستخدمة في التصميم في نهاية الموضوع
بعد تحميل الفراشي التي تناسبك ستجد طريقة تركيب الفرشاة من هنا
دامنا خلصنا من الجزء العلوي راح نتفرغ للجزء السفلي Footer عشان نتفرغ للجزء الوسطي المتعلق بمحتوى الموقع
نضيف هذا النص في الجزء السفلي في وسط الصفحة ( جميع الحقوق محفوظة powerd by WordPress تصميم عبدالملك ) اللهم استبدال تصميم عبدالملك بأسمك

الأن نضيف على الجزء السفلي تأثيرات فراشي كما في الجزء العلوي لتصبح النتيجة كالتالي (وكما اوضحت بأن الفراشي ستكون مطروحة في أسفل الموضوع)

الأن ننتقل إلى تصميم الجزء المتعلق بمحتوى الموقع الذي يكون في وسط الموقع

بسم الله نبدأ
لننتهي من القائمة الجانبية الأن ونختار أداة رسم الخط لنرسم الفاصل بين القائمة الجانبية ومقالات الموقع كالتالي :

الأن احب اوضح بأن القائمة الجانبية دائماً في المدونات تتكون من قوائم ( عنوان ) و ( قائمة خاصة بالعنوان ) او عنوان ( ومحتوى بسيط ) وهذا ما سنقوم بتصميمه
فنبدأ بالعنوان لنرسم خلفية جميله ونوع ولون نص مناسب للعنوان, نختار اداة الفرشاة

ثم نختار من الأعلى شكل الفرشاة من قسم الفراشي الأساسية ونختار شكل الفرشاة هذه

ننشأ طبقة جديدة فارغة من نافذة الطبقات لكي نرسم عليها بالفرشاة

ثم نرسم في الصفحة بأعلى القائمة الجانبية خط مستقيم بنفس الفرشة التي اخترناها سابقاً ولعمل ذالك اضغط بالفأرة في المكان المناسب مع الضغط على Shift وتحريك الفأرة إلى الجانب الآخر وهكذا سيكون خط مستقيم تماماً غير متعرج

لزيادة الجمالية في خلفية العنوان الخاص بالقائمة الجانبية اضفت بالفرشاة باللون الأخضر مستطيل جانبي كالتالي

الأن نكتب نص العنوان باللون الأبيض ونوع الخط Arial و حجم

هنا أحب أن أبين بأن بعض النصوص مثل التصنيفات واسم الموقع وحقوق الموقع في أسفل التصميم تكون نصيه في الموقع الفعلي بعد التقطيع لذالك يجب على النصوص الحقيقة والتي لن يتم إستخدامها كصورة ان تكون نصوص معروفه مثل Arial أو Tahoma لكي يستطيع اي زائر تشغيلها حيث الخطوط الغير إفتراضيه في انظمة التشغيل لا يمكن تشغيلها للزوار الذين لا يمتلكون هذه الخطوط في اجهزتهم
وبعض النصوص التي صممناها مثل التي في أعلى صورة RSS سيتم قطعها كصوره لكي تكون صورة كاملة برابط واحد
الأن انتهينا من عنوان القائمة الجانبية ننتقل إلى قائمة العنوان وهي كالتالي
نختار أداة الخط

ونرسم مستطيل كالتالي باللون cce7f4

ثم نرسم النقطه الخاصه بالقائمة والتي تسمى Bullet عن طريق اختيار اداة رسم الشكل المربع

ونختار اللون الأخضر 92e33a ونرسم الشكل التالي

عالم التقنية

 

[الغيص]

02-01-2012, 07:19 PM
البريمل

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,849

هنا أحب أن أوضح بأننا في تصميم المواقع نعمل على تناسق الألوان دائماً وهو علم بحد ذاته ونقطة مهمة جداً في تصميم المواقع
الأن نكتب نص القائمة بكل سهولة ( Tahoma , لون أزرق غامق )

نقوم بمضاعفة الثلاث طبقات الأخيره التي أنشأناها الخط والنقطة والنص ( عملية المضاعفة شرحناها سابقاً ) ثم نحرك الطبقات المضاعفة للأسفل قليلاً كالتالي

نغير كلمة عام إلى برامج او اي قسم مثلاً

ونعيد الخطوتين الأخيرتين لكي نضيف اقسام وتصنيفات المدونة لتظهر كالتالي

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

نغير المسميات من تصنيفات إلى الأرشيف وتغيير القائمة الخاصة بالأرشيف لتكون كأرشفة شهرية كما يتم وضعها في أغلب المدونات

ونفس العمل للخطوتين الأخيرتين لعنوان
روابط و منوعات

تلاحظون بأن تصميم الموقع ليس بالسهولة المتوقعة فتصميم الموقع يأخذ جهد ويأخذ وقت ويأخذ أفكار كثيرة ويأخذ ذوق ويأخذ خبرة !
نرجع لمحور حديثنا الحمد لله خلصنا من القائمة الجانبية وباقي المحتوى التي تكون المقالات من اجزائها عنوان المقالة معلومات عن المقالة ( التاريخ والكاتب والتعليقات ) ونص المقالة وزر ( اقرء المزيد … )
بسم الله نبدأ
نكتب نص ( عنوان مقالة جديدة ) بخط Arial ولون أزرق غامق بخط كبير كالتالي :

نرسم اسفله مستطيل بأستخدام أداة رسم الشكل المربع ويكون باللون الأبيض

ثم نرسم خطين اسفل وأعلى المستطيل الأبيض باللون الأزرق الغامق باستخدام اداة رسم الخط كالتالي

نكتب داخل المستطيل الأبيض ( المدون : admin عدد التعليقات : 1 التصنيف : غير مصنف ) باللون a0c3ea
كالتالي :

ثم نكتب اسفل المستطيل الأبيض نص المقالة باستخدام نوع الخط Tahoma واللون الأزرق الغامق ( يفضل أن يكون نص المقالة نص صحيح لكي تكون الصورة اوضح لك في رؤية التصميم بشكله الجميل وتنسيقه في حال كان غير ذالك )

الأن نضع لمسة جمالية باستخدام الفرشاة في صندوق المقالة وذالك في المكان الفارغ بجانب عنوان المقالة لتصبح كالتالي ( وكما اعيد تجدون الفراشي في أسفل الموضوع )

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

نضع ( < السابق ) و ( التالي > ) في أسفل المقالات بنوع الخط Arial باللون 60a01b بالحجم 18pt لتصبح النتيجة كالتالي

الحمد لله أنتهينا من هذا الدرس واتمنى ان تكون سهلت عليكم جميع الخطوات ولأي استفسار انا موجود وسيفرحني ويشرفني الرد عليكم
حتى لو أضطريت ان اشرح الموضوع كاملاً بالفيديو

في حال كانت هناك نقطه غير واضحة
لتحميل الفرشات من هنا

لتحميل مصدر الفوتوشوب من هنا

انتظرونا في درس قادم من سلسلة كيف تبني موقعك بنجاح بإذن الله حيث سنتطرق إلى تقطيع وتركيب التصميم كـ XHTML و CSS في مدونة WordPress
تحياتي للجميع عبدالملك الثاري












عالم التقنية

 

[الغيص]

02-01-2012, 08:26 PM
البريمل

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,849

الكاتب: عبدالملك الثاري

18 نوفمبر, 2008
الزيارات: 11,787

هذا الموضوع عبارة عن سلسلة (( كيف تبني موقعك الإلكتروني على الإنترنت بنجاح ))
تصفح وتابع :

• الجزء الأول
  
  
  • الجزء الثاني
  • الجزء الثالث
  • الجزء الرابع
  • الجزء الخامس

أو أكمل الجزء السادس معنا هنا …
قمنا بالدرس السابق بهذا التصميم الخاص بستايل مدونة ووردبريس
في هذا الدرس سنشرح طريقة تقطيع التصميم وتركيبه في مدونة ووردبريس ليكون ستايل جاهز للإستخدام
بسم الله نبدأ
1/ التقطيع
هذا هو التصميم الذي قمنا بتصميمه

نقوماً أولاً بإخفاء طبقات النصوص مثل عنوان الموقع ( عبدالملك الثاري ) وعناوين المقالات … ألخ
وذالك عن طريق نافذة الطبقات بالضغط على صورة العين لتختفي

طبعاً لجميع الطبقات النصية وكذالك صورة الـ RSS مثلاً لأننا سنقطع الخلفيه
قم بعمل ذالك حتى يصبح التصميم في النهايه ليصبح كالتالي :

الأن قم بإختيار أداة التقطيع

بعد ذالك قم بتحديد الجزء العلوي في وسط الصفحة , كالتالي : ( ستلاحظ ان الفوتوشوب يساعدك في تسهيل عملية التحديد بإختيار المربع بشكل اتوماتيكي وسلس جداً )

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

دائماً في الخلفيات المتكرره يجب ان نراعي الحدود والزخارف والنقشات فمثلاً لدينا في هذه الخلفيه نقشه بسيطه فيجب علينا ان نراعي قطع هذه الصورة بالشكل الصحيح ولتوضيح الصوره انظر للصورة التالية :

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

ونحدد بقية الصور كذالك مثل صورة خلفية عنوان القائمة الجانبية

ثم نحدد صورة الزخرفة الخاصة بخلفية عنوان المقالة

ثم نحدد الجزء السفلي من التصميم

ونفس ما عملنا بالجزء العلوي من التصميم نقوم بقص الخلفية المتكررة أفقياً كالتالي

ليصبح تقطيعنا في الأخير كالتالي

الأن راح نحفظ الصور اللي حددناها راح يقطعها لنا الفوتوشوب ,
هناك أجزاء من الصور راح يقطعها لنا الفوتوشوب كذالك مثل المربعات المنتشره في التصميم التي لم تحددها , لكن بعد ما نقوم بحفظ جميع الصور المقطعه سنقوم بإختيار الصور التي نريدها ومسح الصور التي لا نريدها بكل بساطه

نكمل الموضوع , اختر File ثم Save For Web Or Devices كما في الصورة التالية

ستظهر لنا نافذة كبيرة , يمكننا عن طريقها تحديد كل صورة تم تقطيعها واختيار الإعدادات المناسبة لها فمثلاً الصور الكبيرة والتي فيه ألوان كثيره وتدرجات كثيره يجب ان تكون ذات صيغة JPG وبجودة 100% اما الصور التي تحتوي على الوان بسيطه من دون تدرجات وصور صغيره نجعلها GIF بعدد ألوان بسيط
هذه الخطوه خطوه مهمه جداً في تصميم المواقع تحديد اقل حجم ممكن مع طبعاً الحفاظ على الجودة
كما في الصور التالية :

في الأخير نضغظ على Save ستظهر لنا هذه النافذة , ننشأ مجلد جديد يكون اسم مجلد الستايل الذي تبنيه

نفتح المجلد نكتب images ثم نضغظ Save

الان تم تقطيع الستايل نتجه إلى المجلد الذي أنشأناه

نفتحه لنجد صور الستايل مقطعه

الان علينا ان نحدد الصور التي لا نريدها ونحذفها

لتبقى لدينا فقط الصور التي نريد استخدامها في الستايل والتي حددناها سابقاً في الفوتوشوب

بعد ذالك قم بإعادة تسمية الصور حسب رؤيتك مثلاً
الصورة التي ستكون في أعلى المدونه التي هي images_04.jpg يمكنك تسميتها header.jpg
والصورة التي تكون الخلفيه لها بشكل متمدد التي هي images_2.jpg سمها header_bg.jpg
والصورة التي تكون أسفل المدونه والتي اسمها images_19.jpg سمها footer.jpg
والصورة التي تكون خلفيه لها والتي اسمها images_18.jpg سمها footer_bg.jpg
والصورة التي تمثل عنوان القائمه الجانبية التي اسمها images_14.gif سمها side_title_bg.gif
والصورة التي تمثل خلفية المحتوى والتي اسمها هنا images_08.gif سمها page_bg.gif
والصورة التي تمثل الزخرفه الخاصه بعنوان المقاله والتي باسم images_11.gif سمها title_bg.gif
الان علينا ان نأتي بملفات ستايل ووردبريس لكي ننشأ الستايل الخاص بنا وذالك بنسخ مجلد Default
داخل wp-content/themes/
يمكنك اخذها من مدونتك السابقه او تحميلها من ووردبريس http://ar.wordpress.org
وننقل ملفات الستايل من دون images داخل المجلد الذي انشأناه NiceeeStyle

2/ CSS & XHTML



عالم التقنية

 

[الغيص]

02-01-2012, 08:27 PM
البريمل

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,849

الان نحذف الملف rtl.css داخل المجلد NiceeeStyle لأننا لا نحتاجه حيث سيكون جميع عملنا على الـ CSS في ملف style.css

الأن نفتح ملف style.css بأي برنامج تحرير

( فقط لكي نعمل إجراءات بسيطه وليس لكتابة الـ CSS ) هذه الإجراءات هي كتابة عنوان الستايل وبيانات تصميم الستايل , أولاً نقوم بحذف جميع أكواد الـ CSS

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

الأن نحفظ الملف ونغلقه
وننقل مجلدنا NiceeeStyle إلى المدونة داخل مجلد wp-content/themes
ثم ننتقل إلى لوحة تحكم المدونة ونختار قسم التصميم من أعلى القائمة ليظهر لنا الستايل الذي قمنا بنقله

راح نغير صورته في الأخير لكن اضغط على اسمه ستايل نايس

شكله حالياً Blank يعني فاضي بدون اي ستايل اضغط على تفعيل ستايل نايس عشان نفعله ثم اضغط تحرير القالب عشان نبدا نعدل على الـ CSS

راح نجد اول ما تضغط على تحرير القالب ملف style.css مفتوح , وطبعاً فاضي حالياً نبي نعدل على الـ XHTML فنروح لملف أعلى الصفحة

هذي الصورة للتوضيح

في ستايلنا ما نحتاج الـ div اللي بالآي دي headerimg لذالك راح نمسحه , ووننقل الـ div اللي بالآي دي page اسفل الهيدر بحيث راح نستخدمه في خلفية المحتوى كما في الصورة التالية

أحب اوضح لكم إذا فهمت التعامل مع الـ XHTML والـ CSS راح تقدر تصمم اي ستايل في العالم بكل سهوله
نكمل شرحنا
نروح لملف footer.php الخاص بأسفل الصفحة ونلقحه مثل الصوره التاليه اهم شي لا تنسون تسكيرة الـ div اللي بالآي دي page اللي سويناها في الهيدر وهي أول سطر في هذا الملف

الان نفتح ملف index.php اللي هو الصفحة الرئيسية , ونغير مثل اللي في الصورة , مجرد تغيير اماكن عشان نضبطها في نفس التصميم اللي سويناه مثلاً التعليقات نخليها فوق وبدال بواسطة نكتب المدون مثل ما سوينا في تصميمنا ومثل ما تم التخطيط عليه

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

الأن ننتقل إلى ملف الستايل style.css ملف التنسيق
المشوار طويل وقد يكون معقد لبعض من لا يعرف الكثير عن CSS
نبدأ بسم الله
أولاً نكتب ستايل اول وسم لدينا وهو body كالتالي
body {margin:0px;
background:url(images/header_bg.jpg) repeat-x;
}
margin معناتها المساحة الخارجية إفتراضياً راح من دون وضع 0 بكسل راح يكون هناك مسافه بين اي عنصر في الصفحة وحائط المتصفح إن صحت التسميه

لكن بوجود margin:0px تعني ان المساحة غير موجوده بين اي عنصر وحدود المتصفح
background: هو الخاصية المتعلقه بالخلفية سواء كان لون او صورة , في حالتنا هذه لون الخلفيه هو الأبيض فلن نكتب اي شي فقط سنضع خلفيه صوره بعنوان images/header_bg.jpg بعد ذالك اضفنا repeat-x هذا معناه ان التكرار أفقي فقط وليس أفقي وعمودي فلذالك ستكون الخلفية بالطول فقط
الأن بعد حفظ الملف ستظهر لدينا خلفية علوية بالصورة التي اخترناها
نكمل الكود المتعلق بالـ CSS
انتهينا من الـ Body ننتقل إلى اللي بعده
مثلاً نبي نخلص من الجزء العلوي اللي هو الهيدر نكتب الآي دي الخاص بالهيدر وهو
#header {

}
نضيف صورة الخلفية الخاصة بالجزء العلوي من التصميم
#header {background:url(images/header.jpg);
width:733px;
padding-right:30px;
height:218px;
margin:0 auto;
}
لو لاحظنا بأن الصورة header.jpg طولها الاساسي بالعرض 763 بكسل , واحنا كاتبين 733 بكسل ! ليش ؟ لأننا أضفنا padding الـ padding يعتبر من ضمن الطول الخاص بطول الوسم فـ padding-right يكون 30 بكسل و الطول 733 بكسل المجموع يساوي 763 بكسل وهكذا
لماذا وضعنا padding-right ? لكي نضبط مكان عنوان الموقع ويجب علينا وضع الإرتفاع لكي تظهر لنا صورة الخلفية كاملة وذالك بكتابة الـ Height
هناك نقطه أخيرة في هذا الوسم وهو margin:0 auto هذا السطر يعني توسيط الوسم في وسط الصفحة, هناك طريقه كتابه اخرى لكن هذه افضلها بحيث انها من المعايير القياسيه المعتمده كتابةً وجميع ما كتبت لكم في اكود هي خصائص سليمه تعمل في الفايرفوكس والإكسبلورر
ننتقل إلى الخطوة التالية
وقبل ان ننتقل إلى الخطوة التالية أود ان اوضح شيء دائماً في مجال تقطيع وتركيب الستايل يجب عليك ان تنتقل بين كود الـ XHTML و الـ CSS لكي تعرف أسامي الوسوم والآي دي تبعها فمثلاً
الجزء العلوي يحتوي على
<div id="header">
<h1><a href="<?php echo get_option(‘home’); ?>/"><?php bloginfo(‘name’); ?></a></h1>
<div class="description"><?php bloginfo(‘description’); ?></div>
</div>
انتهينا من الـ header وباقي h1 اللي داخل الهيدر وباقي كلاس description
بالنسبة لـ h1 هو الوسم الذي يحتوي على عنوان الموقع
وبالنسبه لكلاس description هو الوسم الذي يحتوي على النص الذي اسفل عنوان الموقع كجملة او شعار الموقع النصي
ننتقل إلى الـ CSS بكتابة الخصائص المتعلقة بوسم الـ h1 و الدسكريبشن
#header h1 {margin:0px;
padding-top:25px;
}
#header h1 a {color:#cee6ff;
}
#header h1 a:hover {color:#ace15d;
}

الأن ماذا تعني هذه الأكواد
اول سطر هو وسم h1 الذي داخل #header لماذا وضعنا #header لماذا لم نستخدم h1 مباشرة كالتالي
h1 {
}
لأننا نريد تعديل h1 فقط الذي بداخل الهيدر وليس اي h1 آخر , فأحياناً في المقالات والمحتوى قد نكتب عنوان يتكون من الوسم h1 هكذا لن يتأثر لأنه ينطبق الستايل على h1 الذي بداخل header فقط
margin:0px كتبناها في h1 لان h1 بشكل إفتراضي يحتوي على مسافات كثيره ونحن لا نريد هذه المسافات المعقده فقط نريد المساحه التي نحددها فنكتب padding-top:25px لكي نظبط مكان عنوان الموقع ويكون هناك مسافه بين حدود المتصفح عنوان الموقع
قد يسأل شخص ويقول لماذا لم نكتب هذا الكود في داخل header مباشره وليس في h1 فأجيبه وأقول لا بأس بذالك فهناك عدة طرق أهم شي ان نصل إلى المطلوب وبطريقه صحيحة لا تسبب اي مشاكل
ننتقل إلى الجزء الثاني من h1 وهو الذي بجانبه الوسم a وهذا يعني الستايل الخاص بعنوان الموقع عندما يكون رابط او وصلة فسنحدد اللون بكتابة color: ثم رمز اللون المطلوب
وبعدها الجزء الثالث يوجد الوسم a مع :hover وهذا يعني عند مرور الفأرة على الرابط نفذ هذا الستايل وهو تغيير اللون قليلاً فقط
بعد تنفيذ هذا الكود وحفظه سترون بأن النتيجه اصبحت افضل لكن ليست كامله فلدينا مشوار طويل جداً جداً والله يكون بعونكم

هناك بعض الستايلات التي تنفذ على جميع الوسوم المحدده في الستايل مثلاً في روابط ووصلات الستايل جميعها لديها خط اسفل النص من ضمنها عنوان الموقع فعندما نريد في جميع صفحات الستايل ان تكون الروابط بدون خط سفلي ننكتب هذا الكود
a {text-decoration:none;
color:#3372b6;
}
بحيث يتم تنفيذ الستايل على الوسم <a> في اي مكان في الستايل بعدم وجود خط سفلي او اي زخرفه ويكون لون الرابط دائماً بالرمز الموضوع
هناك خاصيه اخرى نود ان نضيفها لوسم عام وهو وسم الصور img فعندما نضع على الوسم img رابط معين بشكل إفتراضي سيكون هناك حدود كبيره على الرابط وهي غير جميله نسبياً فنزيلها بشكل عام بكتابة الكود التالي
img {border:none;
}
الأن نرجع للهيدر احنا خلصنا من h1 وباقي description
#header .description {color:#cee6ff;
font-weight:bold;
}
اعتقد واضح جداً
كذا نكون خلصنا من الجزء العلوي بشكل اساسي ننتقل إلى الجزء السفلي
#footer {width:763px;
height:121px;
background:url(images/footer.jpg);
margin:0 auto;
text-align:center;
}
#footer p {margin:0px;
font-family:Tahoma;
font-size:9pt;
font-weight:bold;
padding-top:27px;
color:#3b7abf;
}
#footer p a {color:#3b7abf;
}
#footer_bg {background:url(images/footer_bg.jpg);
}
شرحنا معضم الأكواد اللي هنا سابقاً وواضح جداً
فبعد كتابة الكود السابق الخاص بالفوتر كذا تكون انتهيت من الفوتر بشكل كامل كتصميم مثل ما احنا عملناه بالفوتوشوب ممكن تكون بالنسبه لك سهله كذا لكن لما تصمم ستايل خاص اخر ياخذ وقت على بال ما تحدد الخصائص اللي تبي تختارها عشان يضبط معك الستايل غير كذا يعتمد الـ CSS على حسب تعقيد التصميم او بساطته
الأن تقريباً خلصنا الهيدر بشكل أساسي والفوتر بشكل نهائي ننتقل إلى محتوى الصفحة بداية بالخلفيه الخاصه بها وتوسيطها
مثل ما تذكرون احنا نقلنا الـ div اللي له الآي دي page بعد الهيدر وينتهي قبل الفوتر فهو يعتبر الوسم الخاص بمحتوى المدونة
فنكتب الكود
body #page {width:738px;
padding-right:25px;
background:url(images/page_bg.gif);
margin:0 auto;
padding-top:10px;
padding-bottom:10px;
}
اول شي يمكن تستغرب ليش وضعت اول شي body وليس #page فقط , انا جربت #page اول شي بدون اي سبب ما رضى يتنفذ الكود ليش ما ادري لكن احياناً في عالم الكمبيوتر تجيك اشياء مالها معنى وغريبه ماكانت تصير لك اول حتى اني جربت الكود باستخدام #page فقط بدون body في برنامج تحرير خاص واشتغل طبيعي لكن في المدونة ما رضت معي فالحلول اللي جربتها واشتغلت معي اني اضع body قبل الآي دي وهو الوسم الذي يحتوي على الوسم آي دي page او اغير اسم page عموماً اذا اشتغلت معاكم #page من دون body ممتاز او استخدم هالطريقه او غير الآي دي مثل ما تحب اهم يشتغل عندك
انا قد واجهتني مشاكل غريبه مثلاً ستايل وسم معين ما رضى يشتغل اذا كتبته في مكان معين لكن اذا نقلته إلى مكان آخر في نفس الملف اشتغل !
عموماً نكمل الموضوع
الان داخل المحتوى يوجد هنا المقالات والقائمة الجانبية , راح تلاحظ انها صايره تحت بعض واحنا نبيها تكون جمب يعض
الطريقه كالتالي
الوسم الخاص بالمقالات راح تلاحظ اسمه content في ملف الصفحة الرئيسية فنبدأ فيه بالتالي في ملف التنسيق
#content {float:right;
width:471px;
}
فيه خاصيه جديده هنا ما شرحناها في اي من الخصائص السابقه وهي خاصية float هذه الخاصيه تجعل الوسم يكون كالنص بحيث اي وسم بعده راح يكون بجانب هذا الوسم لأنه float وليس اسفله بشرط ان يكون الذي بعده ايضاً يحمل خاصية float او هو اساساً نص او اي عنصر يكون inline يعني يسمح ان يكون في نفس السطر اما الوسوم التي لا تسمح تكون block اي انها تأخذ العرض كامل لوحدها
حالياً أضفنا float على content وراح نضيف float على القائمه الجانبيه لكي تصبح المقالات والقائمة الجانبيه جنب بعض
والكود الخاص بالقائمة الجانبية كالتالي :
#sidebar {float:right;
width:226px;
margin-right:15px;
border-right:1px #70a7e1 solid;
padding:10px;
}
دائماً حط في بالك إذا استخدمت float عشان اي عنصر بعده يجي جمبه بعد نهاية مكان العناصر اللي تبيها خلاص توقف يعني ما يكون جمبه شي لازم تضيف كود clear يعني يوقف عملية الـ float بحيث ان اي وسم آخر يصير تحت الوسم اللي يحتوي على float ويكون بشكل متناسق
فمثلاً بعد الـ content وال sidebar نبي نوقف الـ float ونضع هذا الكود بعدهما , وافضل مكان هو في الفوتر بحيث انه قبل ما نسكر الوسم آي دي page نضع كود الـ clear كالتالي
<div class="clear"></div>
</div>
<div id="footer_bg">
<div id="footer">
<p>
<?php bloginfo(‘name’); ?> مدار بواسطة
<a href="http://arabic.wordpress.net">ووردبريس المعرب</a>
<br /><a href="feed:<?php bloginfo(‘rss2_url’); ?>">خلاصة التدوينات</a>
– <a href="feed:<?php bloginfo(‘comments_rss2_url’); ?>">خلاصة التعليقات</a>
<!– <?php echo get_num_queries(); ?> عملية. <?php timer_stop(1); ?> ثانية. –>
</p>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>
clear يعتبر كلاس CSS لذالك يجب ان نضعه في ملف التنسيق كذالك كالتالي :
.clear {clear:both;
}
الأن لننتهي من القائمة الجانبية نريد ان نعمل القوائم وعنوان القوائم والكود كالتالي :
الخاص بعنوان القائمة
#sidebar ul h2 {width:205px;
height:22px;
font-size:12pt;
background:url(images/side_title_bg.gif);
color:#f2f8ff;
padding-top:3px;
padding-right:18px;
margin:0px;
margin-top:10px;
margin-bottom:4px;
}
الخاص بالقائمة
#sidebar ul li ul li {padding-top:6px;
padding-bottom:6px;
padding-right:5px;
border-bottom:1px #cce7f4 solid;
font-family:Tahoma;
font-size:8pt;
font-weight:bold;
}

#sidebar ul li ul {margin:0px;
list-style:square inside;
color:#92e33a;
}

#sidebar ul {margin:0px;
padding:0px;
list-style:none;
}
الأن انتهينا من القائمة الجانبية ننتقل إلى المقالات
.post h2 {margin:0px;
height:35px;
padding-top:4px;
background:url(images/title_bg.gif) no-repeat left;
}
.post h2 a {color:#205c9b;
}
.post small {display:block;
background:white;
padding:4px;
border-top:1px #70a7e1 solid;
border-bottom:1px #70a7e1 solid;
font-family:tahoma;
font-size:9pt;
font-weight:bold;
color:#a0c3ea;
}
.post small a {color:#a0c3ea;
}
.postmetadata {font-family:tahoma;
font-size:9pt;
text-align:left;
margin:0px;
margin-bottom:5px;
}
.entry {font-family:Tahoma;
font-size:9pt;
font-weight:bold;
color:#457bb4;
}
اترككم تحللونها بنفسكم صراحه العمليه سهله كلها نفس الخصائص اللي شرحناها سابقاً
كذا نكون خلصنا من المقالات برضوا التي في الصفحة الرئيسية
الأن لننهي الجزء العلوي فهناك قائمة علوية تحتوي على ( الرئيسية | نبذه | اتصل بنا | سجل الزوار ) اي صفحات تضيفها عن طريق لوحة التحكم
يجب علينا اولاً إضافة الوسم الخاص بالقائمة العلوية في الـ XHTML لذالك لنذهب إلى ملف أعلى الصفحة header.php
لاحظ الفروقات في وسم header التي سنضيفها هنا في الكود وهي باللون الازرق
<div id="header">
<h1><a href="<?php echo get_option(‘home’); ?>/"><?php bloginfo(‘name’); ?></a></h1>
<div class="description"><?php bloginfo(‘description’); ?></div>
<div id="header_bar">
<div id="pages">
<ul><li><a href="<?php echo get_settings(‘home’); ?>/">الرئيسية</a></li>
<?php wp_list_pages(‘sort_column=menu_order&depth=1&titl e_li=’); ?>
</ul>
</div>
<div id="search"><?php include (TEMPLATEPATH . ‘/searchform.php’); ?></div>
</div>
</div>
تحتوي على وسم pages ووسم search الذين بداخل الوسم header_bar والذي يعتبر كـ container او holder للأثنين بحيث يبقيهما في سطر واحد بتناسق
لاحظ الكود المتعلق بعرض الصفحات مكتوب فيه sort_column=menu_order وهذا يعني ان ترتيب عرض الصفحات معتمداً على ترتيب الصفحات من لوحة التحكم , يمكنك ترتيب عرض القائمة حسب آخر تحديث بتاريخ الصفحة كالتالي sort_column=post_date
ويمكنك كتابة ‘exclude=17,38′ اي لا تعرض هذه الصفحات في القائمة
يمكنك معرفة جميع الأوامر في هذه الدالة عن طريق هذه الصفحة
[URL]http://codex.wordpress.org/Template_Tags/wp_list_pages[/URL]
فمثلاً كتبنا depth=1 وذالك يعني انه يتم عرض فقط الصفحات الرئيسية وليس الفرعية و title_li= ولا شي لأننا لا نريد عنوان لهذه القائمه من الصفحات
الان ستجد وسم الآي دي search قررت فجأه ان اضع صندوق البحث هنا لأنني في التصميم لم اضع له مكان وكان هذا المكان كأنه مخلوق عشانه فقلت فرصه حلوه
بعد ما اضفنا الأكواد السابقه في XHTML الخاصه بملف أعلى الصفحة نرجع لملف التنسيق
ونكتب الأكواد الخاصة بتنسيق القائمة وصندوق البحث كالتالي :
#header_bar {margin-top:83px;
}
#pages {float:right;
width:300px;
font-family:Tahoma;
font-size:9pt;
font-weight:bold;
}
#pages ul {list-style-type: none;
margin: 0;
padding: 0;
margin-right:6px;
float:right;
width:530px;
margin-top:6px;
overflow: hidden;
}
#pages ul li
{float: right;
margin: 0 -.8em 0 .8em;
padding: 0 .8em 0 .8em;
border-right:1px #96c4db solid;
}
#pages ul a
{font-weight:bold; color:#3372b6;
}
#pages ul a:hover
{color:#d8ffac;
}
#search {float:left;
text-align:left;
width:250px;
margin-left:35px;
}
#search #searchform #s {width:150px;
border:2px #5395da solid;
}
#search #searchform #searchsubmit {background:#2e6daf;
color:white;
border:none;
font-family:tahoma;
width:50px;
padding:2px;
cursor

ointer;
}
#search #searchform #searchsubmit:hover {background:#5296db;
}
كذا وضعنا القائمة العلويه مع صندوق البحث
في الهيدر باقي شيء واحد فقط وننتهي منه ومن الصفحة الرئيسية بشكل كامل والباقي هو زر الـ RSS
نرجع لملف أعلى الصفحة header.php ونضيف الصورة كالتالي ( لاحظ الإضافات بالخط الازرق )
<body>
<div id="header">
<div id="header_right">
<h1><a href="<?php echo get_option(‘home’); ?>/"><?php bloginfo(‘name’); ?></a></h1>
<div class="description"><?php bloginfo(‘description’); ?></div>
</div>
<div id="header_left">
<a href="?feed=rss2"><img src="wp-content/themes/NiceeeStyle/images/rss.png" alt="RSS" /></a>
</div>
<div class="clear"></div>
<div id="header_bar">
<div id="pages">
<ul><li><a href="<?php echo get_settings(‘home’); ?>/">الرئيسية</a></li>
<?php wp_list_pages(‘sort_column=menu_order&depth=1&titl e_li=’); ?>
</ul>
</div>
<div id="search"><?php include (TEMPLATEPATH . ‘/searchform.php’); ?></div>
</div>
</div><div id="page">
بعد ذالك نتوجه إلى ملف التنسيق لكي نضع خصائص الوسوم التي أنشأناها لكي تكون header_right بالخاصية float:right ويكون الوسم header_left بالخاصية float:left لكي يكون عنوان الموقع والشرح تحته في header_right وتكون صورة الـ RSS في header_left وهكذا يكونان بجانب بعض
#header_right {width:300px;
float:right;
height:150px;
}
#header_left {width:150px;
float:left;
height:150px;
margin-top:15px;
}
أخيراً انتهينا بأغلب أساسيات تصميم الستايل
باقي اشياء بسيطه جداً راح اتركها لكم لأن أولاً وأخيراً التخطيط والتنسيق يمكن عمله بطرق كثيره على حسب جهدكم فيه

هذا هو التصميم بعد الإنتهاء ويمكنكم تحميل الستايل كذالك هنا
[URL]http://www.tech-wd.com/wd/wp-content/uploads/tech-wd_web_style.jpg

[/URL]
[URL]http://www.tech-wd.com/wd/wp-content/uploads/NiceeeStyle.rarلتحميل ستايل المدونة بعد الإنتهاء منها كامله باللون الأزرق أضغط هنا[/URL]
قمت بتعديل بسيط في خلفية التصميم وتجهيز الستايل خاص للبنات باللون الوردي
ما اخذ وقت كبير لان كل شي جاهز ( التقطيع والـ CSS ) فقط تغيير الوان بالفوتوشوب وألوان النصوص
ليصبح كالتالي
[URL]http://www.tech-wd.com/wd/wp-content/uploads/tech-wd_pinkNS.jpg

[/URL]
[URL]http://www.tech-wd.com/wd/wp-content/uploads/Pink2NiceeeStyle.rarلتحميل ستايل المدونة بعد الإنتهاء منها كامله باللون الوردي أضغط هنا[/URL]
تقبلوا اطيب تحياتي واتمنى ان الدرس يعجبكم وينال الفائدة المرجوة
[URL]http://www.althari.com/wordpressلمشاهدة الستايل حياً[/URL]
تحياتي للجميع







عالم التقنية




عالم التقنية

 

[الغيص]

02-01-2012, 08:34 PM
البريمل

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,849

أنتهينا وبدأنا
أنهينا بنجاح والحمد لله سلسلة كيف تبني موقعك بنجاح , السلسلة ألقت جمهور كبير ولا زالت تتلقى بعض الإستفسارات وكثير من الزيارات
وسنبدأ بإذن الله بطرح ( Tips ) في عالم التقنية, أي نصائح تطويريه من سابق خبرتي في مجال تطوير الويب وفي كل جديد يتوفر في عالم الإنترنت

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

1/ إضافة الـ FireFox الرهيبة لمطوري الويب FireBug

تتيح لك هذه الإضافة بمشاهدة وتحرير صفحات ومواقع الإنترنت بكل سهولة تؤشر بالماوس ويأتي بك بوسوم الـ XHTML وأكواد الـ CSS
ويمكّنك الإضافة بالمحرر الخاص بها الذي يكون أسفل الموقع مباشره من تحرير القيم لمشاهدة النتيجة مباشرة, وذالك لكي ترى النتيجة بسهوله وسرعه وثم تقوم بتطبيقها

أحياناً أرجع للعمليه خمس مرات واحياناً عشر مرات لكي أرى افضل لون او افضل مكان لعنصر معين , لكن بعد هذه الإضافة لا أرجع إلى لمره واحده فقط

ففي هذا المثال أخترنا الجزء الأيمن وقد تم التأشير عليه بالمربع الأزرق
ثم اقوم بالتأشير على الجزء الآخر ليؤشر لي على مكانه ويعطيني مكان الـ XHTML والـ CSS الخاص فيه كذالك

2/ حل مشكلة ترميز العربي عند تركيب مدونة WordPress
الكثيرين راح يلاحظون أن عند تركيب النسخة الاصلية العربية من WordPress من هنا http://ar.wordpress.org حتى في آخر نسخة 2.6.3
راح تواجههم مشكلة في الترميز بشكل أساسي , البعض قد ما يلاحظها اول مره لأن المشكله ليست في الصفحة الرئيسية من المدونة بل في صفحات الأرشيف والتصنيفات
وهنا الصورة توضح ذالك

هذه المشكله سببها ترميز القالب أي انها من القالب نفسه فلو تم تغيير القالب قد تنحل المشكله لكن في بعض الحالات تأتيك في قوالب أخرى كذالك فلحل هذه المشكلة اتبع الخطوات التالية :
افتح الملف اللي فيه المشكله وفي حالتنا هذه هو الملف archive.php افتحه بإستخدام اي محرر عن طريق نظام التشغيل وفي حالتنا هذه محرر note الخاص بالويندوز واحفظ الملف باختيار حفظ باسم واختر الترميز UTF-8 وذالك الترميز المعتمد للصفحة وللوردبريس وتطبيقات الويب بشكل عام.
وهذه صورة توضيحية للطريقة :

طبعاً بعد حفظ الملف بالترميز هذا نرجع مرة أخرى ننقل الملف إلى قالب المدونة, لنجد أن العربي أصبح يعمل بالشكل الصحيح كالصورة التالية

3/ المسافة العلوية الغريبة
في كثير من تطبيقات الويب وأنظمة إدارة المحتوى تظهر لك مسافة عجيبه فوق كالتالي :

فعندما تحاول إزالتها في الكود لا تجدها نهائياً لا في داخل ملف الـ XHTML ولا عن طريق الـ CSS
هذه المسافة تنتج أحياناً عند إستخدامك للتعديل على القالب بمحررات مختلفة مثل Microsoft Expression Web او Sharepoint Designer وغيرها
وهو ينتج كود بسيط تعتبر (شفرة أعداد) في داخل الملف ولكنك لا تستطيع رؤيتها
ولرؤية هذه الشفرة يجب عليك إستخدام محررات تعرض لك شفرة الأعداد وتسمى Hex Editors ومن ضمنها محرر XVI32 المجاني
قم بتحميله من هنا ثم افتح البرنامج مباشرة , لا يتطلب منك تحميل بمجرد فك الضغط افتح XVI32.exe

وافتح جميع ملفات القوالب وأحذف منها هذا الكود

وستختفي هذه المسافة المزعجة

4/ أغير في خصائص الـ CSS لكن ما يتغير في الموقع؟
هذي المشكله واجهتني سابقاً خاصة في جهاز العمل , وهي بسبب الكاش لديك فالـ CSS يتم تحميله من دون التغييرات الجديدة بل يتم تحميل النسخة القديمة
فالحل لكي يظهر لك آخر تحديث من الـ CSS في كل مرة تعدل على الـ CSS لكي ترى النتيجة هي عند استدعاء ملف الستايل CSS في وسم الـ <head>
إفتراضياً يجب ان تكتب كالتالي ( في مدونة WordPress )
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>" type="text/css" media="screen" />
أو في اي مكان آخر
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
لإستدعاء آخر نسخة من الـ CSS في كل مرة تدخل فيها الموقع او المدونة أضف التالي
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>?version=1" type="text/css" media="screen" />
وطبعاً أو
<link rel="stylesheet" href="style.css?version=1" type="text/css" media="screen" />

5/ هل وجدت ستايل بالإنجليزي وتود الحصول عليه ؟
يمكنك تعريب الستايلات الأنجليزية بكل سهولة ويسر بإستخدام الاداة التي تطورها المبدع ( أحمد الهاشمي )

وبكل سهوله أختر الستايل الذي يعجبك ويمكنك إيجاد جميع الستايلات من موقع wordpress.org من هنا

والذي يحتوي حتى الأن على 696 ستايل ومتطابق لآخر نسخه من ووردبريس 2.6
والذي أخترته انا هذا الستايل http://wordpress.org/extend/themes/clockworkmint
قبل التعريب

بعد التعريب ( فقط بإستخدام أداة أحمد الهاشمي ) CSS Mirror

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

عالم التقنية

 

[الغيص]

02-01-2012, 09:12 PM
البريمل

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,849

5/ طريقة استخدام وعمل قائمة منسدلة خاصة ورائعة
هل تمنيت أنك تسوي قائمة مسندلة مميزة مثل ما تسوي قوقل بخدماتها ومواقعها :

فأنت في المكان الصحيح, حيث هذه الخطوة سنتعلم كيف نعمل قائمة منسدله خاصة مختلفة عن القائمة المنسدلة العادية شكلاً وآليةً
فتخيل معي لو أن لديك نموذج لبيانات مستخدم جديد كاملة , من ضمن هذا النموذج الدولة , تلاحظ نفسك دائماً تتضجر من هذا القائمة عندما تبحث بشكل عقيم الدولة التي تنتمي لها
لكن مع هذه القائمة اكتب اول حرف وتضهر لك القائمة جميع الدول التي تبدأ بهذا الحرف ثم اكتب ثاني حرف تبدأ الدول تتقلص لتظهر دولتك فقط
حتى بهذه الأداة يمكنك تغيير ألوان وشكل القائمة المنسدلة بصورة رائعة تميز موقعك وترتقي به
طريقة عمل هذه الأداة هي بإستخدام مكتبة الجافاسكريبت الرائعة Jquery التي كذالك تستخدمها Google في تطبيقاتها
ولمشاهدة مثال حي للأداة التي سنعملها يمكنك مشاهدتها عن طريق هذه الصفحة
http://simpletutorials.com/?path=tut...ery/ddcombobox
حمل مكتبة الجافاسكريبت Jquery من هنا
حمل الإضافة الخاصة بإضافة الأداة ( Drop-down Combo Box )
طبعاً في ملفات الإضافة راح تجد معها ملف مكتبة JQuery فما راح تحتاج تحمل المكتبه فيها لكن للفائده للجميع اضفت رابط المكتبة
الإضافة إستخدامها سهل جداً جداً جداً
بعد تحميل وفك ضغط الإضافة راح تجد هذه الملفات في مجلد demo1
index.html
هنا راح تعرف كيف تستخدم الإضافة أو الاداة في موقعك ( يمكنك تشغيله لترى بأن القائمة تعمل بنجاح )
images
مجلد صور وفيه ملف loadingAnimation.gif
انا بصراحه مادري له مطور الأدة حاط هذا المجلد والصورة! لأنها ما لها استخدام نهائياً فما راح نحتاج هذا الملف تقدر تحذفه او تخليه شي راجع لك
js
هنا زبدة الزبدة راح تجد داخلها مجلد jquery وداخله الملفات التالية :
jquery-1.2.6.min.js
هذه مكتبة الـ Jquery بنسختها الأخيرة حتى الأن 1.2.6
main.js
هذا الملف منشأ ليتم فيه تعبئة القائمة المنسدلة وفيه كود بسيط جداً يستدعي دالة الإضافة ddcombo سنتطرق إليه بعد قليل لطريقة تعبئة القائمة المسندلة وطريقة استخدام الأداة
مجلد ddcombo
هذا المجلد يحتوي على الملفات الخاصة بالإضافة لعرض الأداة ودوالها وصورها
ستجد فيه صور يمكنك تغييرها بالشكل الذي تريده
الأن لنعرف كيف نستخدم الأداة أو الإضافة
بكل سهولة في موقعنا نستدعي ملفات الـ js التي استخدمناها للأداة وهي كالتالي : ( تجدها في ملف index.htm )
<script type="text/javascript" src="js/jquery/ddcombo/lib/jquery.ready.js"></script>
<script type="text/javascript" src="js/jquery/ddcombo/lib/jquery.flydom-3.1.1.js"></script>
<script type="text/javascript" src="js/jquery/ddcombo/lib/autocomplete/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="js/jquery/ddcombo/lib/autocomplete/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery/ddcombo/lib/autocomplete/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="js/jquery/ddcombo/lib/autocomplete/thickbox-compressed.js"></script>
<script type="text/javascript" src="js/jquery/ddcombo/jquery.ddcombo.js"></script>
<script type="text/javascript" src="js/jquery/main.js"></script>
وذالك داخل الوسم <head>
هذا فقط للإستدعاء , الأن لكي نعرض صندوق القائمة المنسدلة نضيف هذا السطر البسيط جداً
<div id="box1" class="ddcombo"></div>
فقط لا غير ( وهذه ميزة مكتبة Jquery ) انك لا تحتاج إضافة أكواد Javascript داخل أكواد XHTML وتجعل الهيكلة والأكواد لموقعك واضحة
حيث انك تستطيع إختيار او عمل Select لأي شيء تريده في الموقع بإستخدام id او class
الان نتوجه للملف الخاص بعمليات الـ Javascripts في موقعنا هنا اسمه main.js
نضيف فيه هذا الكود البسيط الذي يعمل اختيار او select للـ div الخاص بالقائمة المنسدلة , وسيتم اختيارها بإستخدام الـ class وليس الـ id مع انه لا يوجد فرق لكن نخلي الـ id ممكن تستخدمه في اشياء خاصه أخرى.
بالطريقة التالية :
$(document).ready(function(){

var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
$(".ddcombo").ddcombo({
minChars: 0,
options: months
});
});
دائماً لتنفيذ أي دالة Jquery يجب علينا كتابتها داخل هذه الدالة
$(document).ready(function(){

});
الذي لن يعمل jquery بدونه وهي دالة تحتوي على الكثير من المزايا من ضمنها مثل ما تطرقنا له حيث تمكنك هذه الدالة من فصل أكواد الجافا سكريبت عن الـ XHTML
في داخل هذه الدالة مباشرة نعرف متغير من نوع مصفوفة ونسميه بأي اسم وفي حالتنا هذه تم تسميته بـ months لأن القائمة المسندله ستحتوي على شهور
ونضيف داخل هذه المصفوفة القائمة التي نريد عرضها في القائمة المنسدلة وهي في حالتنا هذه اسامي الشهور
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
الأن نريد عمل اختيار لمكان القائمة المنسدلة لكي ننفذ عليها الدالة الخاصه بعرض القائمة المنسدلة ولأختيار اي عنصر بإستخدام الـ Jquery عن طريق التالي
$(".ddcombo")
ثم نقطة واسم الدالة التي تريد تنفيذها على هذا الوسم او العنصر و .ddcombo تعني اختر الـ class الذي بإسم ddcombo مثل كتابة الـ CSS فمثلاً لو اردنا اختيار العنصر بإستخدام الـ id فتكون بالطريقة التالية
$("#box1")
وكلتا الطريقتين ستعمل بنجاح
بعد عمل اختيار للعنصر او الوسم الذي نريده الأن نختار الدالة فنريد ان نعرض في هذا العنصر الدالة التي تعرض القائمة المنسدلة وهي بإسم ddcombo فنكتبها وبداخل هذه الدالة نضيف الخصائص الخاصه بهذه الدالة minChars و options , نكتب اسامي الخصائص ونعطيهم القيم المناسبة بالطريقة التالية
$(".ddcombo").ddcombo({
minChars: 0,
options: months
});
بالنسبة لـ minChars فهي خاصية خاصة بالـ autoComplete وتعني اذا كان القائمة المنسدلة من قاعدة بيانات وتستخدم الأجاكس فبعد 0 حرف ابحث اضهر من قاعدة البيانات القائمة كاملة فمعناته اذا كتبت 3 في هذه الخاصية ستأتيك القائمة بعد كتابتك ثلاث حروف على الأقل ولكنها لا تعمل الا مع الأجاكس الذي يتصل بقاعدة البيانات وذالك اذا اردت ان تخفف على قاعدة البيانات في حالة كانت لديك بيانات كثيره مثلاً , ولكن في حالتنا هذه فالقائمه عباره عن مصفوفة بسيطة فنجعلها 0 ,
اما options فهي القائمة او الخيارات التي تريد عرضها وهنا اضفنا المصفوفه مباشره.
# انتهى العمل # هذه القائمة تم اختبارها وتعمل على IE6 و 7 وفايرفوكس 2 و 3
اتمنى اني أفدتكم ولأي استفسارات متواجد لخدمتكم

6/ تعلم واستفد من المشاريع والأعمال الإحترافية والمجانية او مفتوحة المصدر
لكي تتعلم يجب ان تخالط المحترفين وذوي الخبرات الطويلة وأفضل الطرق بالنسبه للي للتعلم هي تحليل مشاريع متنوعة
فلتتعلم مثلاً الـ XHTML والـ CSS أفضل طريقه هي تحليل خطوه بخطوة طريقة عمل نماذج إحترافية لها
وفي Google Reader وجدت من موقع مجلة Smashing Magazine موضوع يحتوي على 100 قالب XHTML و CSS عالي الجودة ومجاني
وهذه بعض المقتطفات من القوالب :

والكثير الكثير من الأعمال الإحترافية المجانية التي يمكنك الإستفادة منها والتعلم بها,
تجد هذه القوالب من هنا




عالم التقنية

 

[الغيص]

01-08-2012, 07:19 PM
البريمل

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,849

مثال عالمي


بقيمة 8 مليار دولار " علي بابا " الصينية تنوي شراء أسهمها من " ياهو "

Wed, 08/01/2012 - 16:44




تحاول شركة علي بابا (Alibaba) الصينية جمع مبلغ 8 مليارات دولار لشراء جزء من أسهمها التي تملكها شركة " ياهو " والتي تقدر بـ 40% من أسهم الشركة.
وعلى الرغم من أن الحديث يجري حول أن علي بابا ترغب بذلك رفع قيمتها إلى 43 مليار دولار وحسب صحيفة نيويورك تايمز التي نشرت خبراً نقلاً عن مصدر رفض ذكر اسمه فإن علي بابا تسعى حالياً إلى جمع المبلغ من خلال أسهم وقروض من مجموعة من البنوك للحصول على ما يقارب المبلغ المطلوب لإتمام الصفقة.
وبعد استعادة شركة علي بابا لأسهمها من ياهو تصبح أغلى شركة خاصة في العالم وتقلص في الوقت نفسه من نفوذ ياهو على مشاريعها، خاصة وأن الشركتين تنازعتا أكثر من مرة حول القرارات التي اتخذتها علي بابا، وبشكل خاص في عام 2010 عندما عارضت ياهو قرار علي بابا إنشاء خدمة علي باي (Alipay) للدفع على شبكة الانترنت، وحينها اعتمدت ياهو على أن هذه الخطوة لم يتم التوافق فيها مع الشريك الأمريكي ولم يتم التوصل إلى حل لهذه المشكلة حتى العام الجاري.
نشير هنا إلى أن ياهو حصلت على 40% من أسهم علي بابا في عام 2005 حيث كانت شركة ناشئة بسعر مليار دولار واتفاقية استعادة الأسهم من شركة ياهو تم التوصل إليها في أيار / مايو من العام الجاري 2012 بحيث تحصل ياهو على 6.3 مليار دولار نقداً و800 مليون دولار بشكل أسهم متميزة مقابل نصف الأسهم أي 20% من أسهم علي بابا.
وعلي بابا أنشئت عام 1999 كموقع للتجارة الإلكترونية وانشئت فيما بعد موقعاً تقنياً للتجارة الإلكترونية للشركات الصغيرة، ويبلغ عدد موظفيها 25 ألف شخص.

 

[الغيص]

02-08-2012, 06:35 PM
البريمل

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,849

آرييل زوكربيرج باتت في فريق جوجل

Thu, 08/02/2012 - 16:04




شقيقة مارك زوكربيرج ،مؤسس أضخم شبكة تواصل اجتماعي في العالم "فيسبوك" ، باتت تعمل في فريق جوجل، وذلك من خلال صفقة اشترت فيها شركة " جوجل " شركة وايلد فاير إنترآكتيف (Wildfire Interactive) التي تعمل فيها شقيقة زوكربيرج الصغرى.
وجرت هذه الصفقة في إطار سعي " جوجل " للحصول على شركة تعمل على تصنيع برمجيات لنشر الإعلانات في شبكات التواصل الاجتماعي مثل جوجل بلاس و فيسبوك وتويتر ويوتيوب وغيرها، وحسب معطيات موقع تيك كرانش (TechCrunch) فإن قيمة الصفقة بلغت 250 مليون دولار حصلت من خلالها جوجل على الشركة وفريق العمل فيها ومن بينهم آرييل زوكربيرج التي تعمل مديراً مساعداً.
نشير هنا إلى أن آرييل كانت قد تلقت أكثر من مرة عرضاً من اخيها مارك للعمل في فيسبوك ولكنها رفضت بغية شق طريقها المهني بعيداً عن جناح شقيقها ؟




الموجز

 

[الغيص]

22-11-2012, 01:53 AM
البريمل

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,849

نموذج

22/11/2012


حوار مع مؤسس «نوك بوك» إسلام أنشاصي: إقبال كبير من المعلنين على الصحف الإلكترونية

إسلام انشاصي
خالد كبي
يشهد سوق الإعلانات الالكترونية في الكويت نموا بنسبة %5 سنويا، في الوقت الذي تنمو فيه أسعار الإعلانات الالكترونية بنسبة %20 لعدم وجود تنظيم خاص بهذا السوق، وذلك مقابل سعر الإعلان في الوسائل التقليدية مثل الصحف والمجلات المتقارب إلى حد كبير.
أسعار الإعلانات الالكترونية باتت خيالية بناء على ما يفرضه المدونون على المعلنين في الكويت، ويمكن اعتبار هذه الأسعار من الأعلى اذا قارناها مع معدلات الأسعار في منطقة الخليج والعالم. بهذا الكلام بدأ المؤسس والمدير العام لشركة نوك بوك إسلام انشاصي حديثه مع القبس. وفي الحوار معه جاء الآتي:

هل تحدثنا عن توجه الشركة نحو تأسيس صحيفة الكترونية مؤخرا؟
- «مكان» هي صحيفة الكترونية تغطي الدول العربية ونركز فيها بشكل أساسي على الدول الخليجية، بالإضافة إلى مصر والأردن وسوريا ولبنان، ومصدرها لندن. نحن، كشركة نوك بوك، مسؤولون عن تسويقها، وقد سجلت الصحيفة خلال اقل من 3 أشهر أكثر من 700 ألف زائر شهريا.
من قبل مَن تدار وأين مصدرها؟
- تدار الصحيفة الالكترونية من خلال 20 محررا في مصر، بالإضافة إلى مراسلين في الدول العربية كافة، وسعينا في الشركة إلى اختيار بريطانيا مركزا أساسيا للشركة لسهولة إنشاء الشركة هناك، بالإضافة إلى حماية حقوق النشر.
من الممول الرئيسي وراء هذا المشروع؟
- شركة نوك بوك هي الممول الأساسي للصحيفة الالكترونية، واهتمامنا بهذا الجانب ينبع من اهتمامنا بالمجتمع، خاصة أن القضايا المطروحة في صحيفة مكان الالكترونية هي قضايا مجتمعية معنية بحقوق الإنسان بالدرجة الأولى. إلى جانب ذلك، تحقق الصحيفة الالكترونية مردودا ماليا جيدا، وهي مستقبل الصحف الورقية.
كم يبلغ رأسمال الشركة؟
- ضمن الجدوى الاقتصادية للشركة، يتوقع وصول قيمة الشركة خلال 3 سنوات من تأسيسها إلى 30 مليون دولار، في الوقت الذي تم تأسيس هذه الصحيفة الالكترونية برأسمال 400 ألف دولار.

الإعلان والصحافة
انتم شركة مختصة بالإعلانات الالكترونية، لماذا اخترتم الدخول في الصحافة الالكترونية؟
- هناك إقبال كبير من قبل المعلنين على الصحف الالكترونية، وبالتالي سعينا في شركة نوك بوك إلى استغلال فرصة النمو هذه من خلال تأسيس صحيفة مكان الالكترونية.
كما نعرف تماما المكان المفضل للمعلن للإعلان بناء على تجربتنا في هذا المجال في السوق، في الوقت الذي نجد فيه أن طريقة عرض الإعلان خطأ في الكثير من المواقع الالكترونية والصحف اليومية. ومنذ تأسيس مكان كان الهدف الأول وضع استراتيجية تفيد المعلن وتبرز إعلاناته بالدرجة الأولى.
كيف تقيمون أسعار الإعلانات في الكويت؟
- أسعار الإعلانات في الكويت مبالغ فيها جدا، وإذا نظرنا إلى الأسعار التي يفرضها المدون على المعلنين نرى أنها جنونية مقارنة مع أسعار الإعلانات في المنطقة والعالم. نحن من خلال صحيفة مكان الالكترونية ومن خلال «نوك بوك» نسعى إلى تقديم أسعار أفضل من السوق، أسعار توضع وفق خطط مدروسة وليست عشوائية كالتي يتبعها المدونون.
كم يبلغ نمو حجم الإنفاق في سوق الإعلانات؟
- هناك نمو بمعدل ثابت بنسبة %5 على الإنفاق على الإعلانات في الكويت.
هل يمكن التوصل الى اتفاق بين شركات الإعلان للحد من الأسعار المتفاوتة؟
- قمنا بإنشاء شبكة خاصة بشركة نوك بوك تشمل اكبر 30 موقعا من حيث الطلب على الإعلانات، وقمنا بتوحيد سعر الإعلان في هذه المواقع، كما نخول العميل من خلال الدفع لمرة واحدة نشر الإعلان في الوقت ذاته في المواقع الـ30، مما يعطي العميل فرصة اكبر وأوسع للانتشار.
ارتفاع الاسعار
ما أسباب ارتفاع أسعار الإعلانات الالكترونية؟
- المدونون يلعبون في أسعار الإعلانات كما يشاؤون في الوقت الذي نسعى فيه نحن إلى وضع سياسة معينة للأسعار، ونتيجة للأسعار التي يطلبونها مقابل إعلاناتهم، ارتفع سعر الإعلان على شبكة الانترنت بنسبة %20 خلال العام الجاري 2012.
ما المواقع التي يتوجه إليها المعلنون بالدرجة الأولى؟
- يركز المعلنون بالدرجة الأولى على الإعلان في مواقع التواصل الاجتماعي التي تلقى رواجا كبيرا من قبل الجميع، وفي المرتبة الثانية، يهتم المعلن بالمواقع الخاصة بالمرأة، والتمسنا ذلك من خلال صحيفة مكان الالكترونية التي تشهد فيها الأقسام الخاصة بالمرأة أعلى نسبة زوار.
ما المشاريع المستقبلية التي تخطط الشركة الدخول فيها؟
- مشروعنا المستقبلي الخاص بالإعلانات هو تأسيس اكبر شبكة للإعلانات على الموبايل، خاصة أن التوجه المستقبلي لسوق الإعلانات سيكون باتجاه الموبايل أكثر منه لشبكة الويب.


القبس

 

[الغيص]

11-01-2013, 12:46 PM
البريمل

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,849

نموذج
----------

11/01/2013


مليون قارئ حول العالم مدونة تدر 333 ألف دولار يوميا

أعلن أندرو سوليفان المدون والكاتب البريطاني الاصل، عن وصول ايرادات مدونته التي تحمل اسم «The Dish» الى حوالي 333 ألف دولار في يوم واحد.
يأتي هذا الإعلان بعد يومين من حديث سوليفان عن عزمه ترك مدونة «The Beast Daily» واستقلاله ابتداءً من فبراير المقبل في مدونته الخاصة التي تضم 7 كتّاب، بحيث ينشر فيها كتاباته وآراءه السياسية التي تحظى بالقبول من قبل جمهور واسع من القراء يصل إلى حوالي مليون قارئ حول العالم.
وحدد سوليفان رسم الاشتراك السنوي بمدونته بحد أدنى يبلغ 19.99دولارا، بحيث يتمكن القراء المشتركون من الوصول إلى كامل محتوى المدونة، ولكن بالمقابل، أكد سوليفان ان القراء غير المشتركين لايزالون قادرين على الوصول إلى مقالات المدونة عن طريق الروابط التي تنشر في مدونات ثانية او شبكات التواصل الاجتماعي، هذا بالاضافة الى عدد من المقالات التي ستتاح مجانا شهريا.
وبعد يوم واحد فقط من فتح باب الاشتراك بالمدونة المرتقبة،اعلن سوليفان عن وصول عدد القراء المشتركين إلى 12ألف قارئ من جميع انحاء العالم، واضاف سوليفان ان المشتركين بادروا بدفع مبالغ اكبر من الحد الادنى المطلوب، فوصلت الايرادات في ذلك اليوم الى قرابة 333 ألف دولار.
وقال سوليفان ان حوالي 2000 مشترك قاموا بدفع 5 دولارات اضافية عن الــ19.99دولارا المحددة، كما قام اكثر من 1000منهم بالمساهمة بمبلغ 50 دولارا، ولكن الغالبية من المشتركين دفعوا 8 دولارات زيادة.


القبس

 

[السيب]

لقاء مع صاحب موقع

عالم التقنية ومع سعود الهواوي الجزء الأول
اجرى القاء يوم : الأربعاء بتاريخ: 2010-02-17
تواصل ولقاء - السعوديه - الرياض

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

سعود الهواوي .. من هو بعين زواره ؟ ومن هو بعين المقربين له ..؟
كل قريب لي سواء من الأهل والأصدقاء أو حتى زوار عالم التقنية يعرف أن سعود الهواوي هو إنسان بسيط، رب أسرة، ويعمل موظف في أحد القطاعات الحكومية.

كيف نشأ ( سعود ) في بيئة الحياة الحقيقية وَ الإفتراضية [ عالم الأنترنت ] ..؟
نشأت في حياتي الحقيقية والافتراضية بنفس النمط، منذ أن عرفت الانترنت لم أكتب باسم مخفي، حتى وإن كان لي اسم مستخدم فالكل يعرف أن اسم المستخدم هذا لسعود الهواوي، لذلك كانت حياتي بين الحياة الافتراضية والحياة الواقعية بشكل متزامن، ولم يكن هناك اختلاف إلا في بعض الأمور البسيطة.

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

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

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

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

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

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

هل هناك امكانية الانضمام الى فريق عالم التقنية من قبل الزوار ؟
نعم، وللعلم فقط أن أول ما بدأنا عالم التقنية كان هناك فقط كاتبين أنا وعبد الملك الثاري، والآن يوجد 40 كاتب ما بين كتّاب ضيوف، وكتّاب كانوا زوار لعالم التقنية طلبوا الانضمام وقمنا بتسجيلهم في المدونة.

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

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

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

ما هى طرق الدعاية و الإشهـــار الذي تعتمدون عليها لتعريف القراء و الزوار عنكم ؟
هناك عدة طرائق،

1. : الاهتمام بالمحتوى وعدم التوقف عن تحديث الموقع،
2. : الاهتمام بأرشفة الموقع في محركات البحث،
3. : الاستفادة من الشبكات الاجتماعية، فلعالم التقنية صفحة في الفيس بوك وحساب في تويتر، وهذه الحسابات يتم فيها نشر آخر التدوينات التي نقوم بكتابتها في المدونة.

من http://tw.traidnt.net/articles-22.html

 

[السيب]

لقاء مع صاحب موقع

عالم التقنية ومع سعود الهواوي الجزء الثاني
اجرى القاء يوم : الأربعاء بتاريخ: 2010-03-03
تواصل ولقاء - السعوديه - الرياض
كان الأستاذ سعود الهواوي معنا في الجزء الأول وفيه : ( للإطلاع )

• المرأه في المجال التقني بأتت تثري المجال أكثر من الرجال في الفترة الأخيرة
• للتقنية سمات معروفه
• التك بوكسنق أنطلقت من شقة
• تزامن حياتي الواقعيه والافتراضيه
• التعاون رابط قوي

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

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

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

حتى ينجح اي موقع لابد ان يكون به ادارة قوية و فعاله , فهل تعتمد في ادارتك لموقعك على آلية عمل معينة ؟ و ما هى اهم الصفات التي لابد ان يتميز بها المدير الناجح ؟
لا أفضل أن أحكم على نفسي بأني مدير ناجح، لكن هناك أمور اعتمدتها أنا وزميلي عبد الملك -والحمد لله- الكثير يراها من الأساليب الناجحة في إدارة المواقع، فنحن في عالم التقنية لا ننشر التدوينات إلا بعد التحقق من جودة الخبر أو المقالة ومن ثم ذكر المصادر، وبعدها يأتي دور التنسيق والتدقيق اللغوي والتي تقوم بهما الزميلة مستورة، فهذه الآليات جعلت الموقع ينجح.

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

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

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

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

نلاحظ ان عالم التقنية تقدم الكثير من الأخبار التقنية الغير نمطية فهل لديك المزيد لتقدمه لزائريك و اعضاءك ؟
كما ذكرت في الجواب السابق سوف نقوم بتطبيق بعض الأفكار الجديدة وبإذن الله تعجب الزوار.

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

مدونة عالم التقنية تعتبر من المواقع الرائدة عربياً في مجاله . هل هناك أفكار أو ماشاريع لتوسعته واقعياً ؟
نعم، ولكن لا أستطيع التحدث عنها الآن، لكن -بإذن الله- سوف نطبقها في المستقبل، وبإذن الله تكون هذه الأفكار مفيدة للجميع.

لا شك ان خبرة الانسان في اي مجال تقاس بما بمقدار ما خاضه من تجارب، ويقال دائما - ابدأ من حيث ما انتهى الأخرون - على هذا الاساس وجه كلمة لكل من :

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

 

[الغيص]

كيفية الحصول على باك لينك قوي وسليم لموقعك بسهولة






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


✔ اولا توجه الى الموقع من هنا ✔ قم بالتسجيل عن طريق البريد الإلكتروني وملئ الخانات كما في الصورة

✔ بعدها سيتم إرسال بريد التفعيل إلى بريدك الإلكتروني قم بالضغط عليه ليتم التفعيل , ✔ الان وبعد تفعيل الحساب توجه الى لوحة الاعدادات من خلال الرابط التالي Login | MyFolio , ستجد العديد من الاختيارات وكل ما يهمنا إضافة رابط url الخاص بنا تم حفظ التعديل كما في الصورة ,

✔ ثم الحصول على باك لينك قوي دوفلاو بطريقو سليمة , وهدا هو البروفايل الدي قمنا بإنشائه

✔ نوع الرابط دوفلاو يمكنك التأكد من الصورة

تمنى من صميم القلب ان تستفيد من الدرس وان شاء الله اعدكم بالعديد من المواقع في القريب للحصول على باك لينك قوي وجعل مواقعكم تتصدر بحول الله في انتضار التقييم والتشجيع


http://www.traidnt.net/Portal/Sites...-strong-and-healthy-for-your-site-easily.html

 

[السيب]

مقابلة حصرية مع نورا يحيي صاحبة موقع Noupe.com
نشرت بواسطة:حسين عادل في البرمجة, الدروس, مواقع 27 يناير 2009 4 التعليقات

السلام عليكم

بداية أود أن أشكر أخي عبد الملك علي دعوته الكريمة لي بالكتابة بموقع كبير ومميز مثل عالم التقنية وهذا شرف كبير ليا وأشكر جميع القائمين عليه ..وبفضل الله حصلت مؤخراً علي موافقة من السيدة نورا يحيي وهي مؤسسة موقع Noupe.com

نورا يحيي شخصية مسلمة عربية ..مصممة ومطورة لها باع كبير بعالم الويب ..وتجارب رائدة ومواقع مشرفة عالمية منها موقعي Noupe.com
وموقعها الأخير Devsnippets.com وهما مواقع رائدة بتصميم وتطوير الويب واي شخص متخصص بمجال التصميم أو التطوير يضعهم دائما بمفضلته وعلي قائمة زيارته اليومية ..وكذلك الحال ..مصمم يريد أن يطور من نفسه والوصول لمستوي أحترافي منافس

نبدأ الآن مع السيدة نورا اللقاء .. وعلي بركة الله

بالبداية يسعدني ..عمل مقابلة معاكم وكم سعدت بالموافقة علي طلبي أملا من الله أن تكون شئ مفيد لكل الشباب العرب وتكون دفعة لهم للنهوض بمستوي الويب العربي


نحن نعرف عن موقع Noupe من صفحة About لكن لا نعرف عنك الكثير فهل يمكننا معرفة نبذة عنك ؟

لقد عملت كمصممة مواقع لحالى اربع سنوات فى www.rentacoder.com ثم قمت بافتتاح noupe من حوالى عامين ثم devsnippets من حوالى ثمانية اشهر


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

كلا مجال الدراسة مختلف عن مجال تصميم الويب ثم و لكنى حصلت بعد التخرج على منحة فى شركة اى بى ام و كانت المنحة تابعة لوزارة الاتصالات المصرية



ما عمرك علي شبكة الويب …وما هي مواقعك المفضلة اليومية ….وهل من ضمنها اي مواقع عربية؟

حوالى ست سنوات و مواقعي المفضلة اليومية هى :

www.smashingmagazine.com
www.webdesignerwall.com
www.vandelaydesign.com
www.psdtuts.com



متى كان عام إفتتاح موقعك الشهير Noupe وهل هناك من يساعدك بإدارته أم أنتي من تديرينه فقط؟

عام 2007 – و ليس هناك من يساعدنى فى ادارته





ماذا يعني اسم الموقع Noupe ؟

افضل الاحتفاظ بالمعنى لنفسي



لماذا تم جعل الموقع باللغة الإنجليزية ؟

لان السواد الاعظم من المهتمين بهذه النوعية من المواقع من المتحدثين بالانجليزية



ما هي نصائح لشباب العرب ..لأنشاء مواقع بنفس أفكار Noupe؟

بالطبع لا اريد لا شباب العرب و لا غير العرب ان يقوموا بانشاء مواقع بنفس الافكار. هل وجدت من يبحث عن منافسين؟

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



لماذا تم استخدام ورد بريس ..لإدارة الموقع ؟

نظرا لسهولة استخدامه و كثرة الادوات المتاحة التى تساعد على ادارة الموقع بسهولة



سمعنا ايضا عن موقع أخر لكم devsnippets.com متي تم افتتاحه؟

منذ بضعة اشهر.



هل تفكرين في إنشاء مواقع أخرى .. وما أحلامك علي شبكة الويب؟

افضل ان اترك كل شىء لوقتة و لا داعى للاستعجال, كل شىء بارادة الله سبحانة و تعالى



ما رأيك بمستوي مواقع الويب العربية ..وهل ترين اي مواقع عربية ناجحة من وجهة نظرك ؟

هناك الكثير من المنتديات العربية التى لديها عدد جيد من الزوار اكنى حتى الأن لم اجد مدونات عربيه تتحدث عن التصميم, لا اعرف السبب. يرجى افادتى اذا كان هناك؟



ما برأيك أفضل مواقع الويب 2.0 التي تقدمات خدمات مميزة ..؟

www.designfloat.com
www.digg.com
www.delicious.com
www.scriptandstyle.com



وأخيرا ..نريد كلمة توجيها للشباب العربي المسلم …للدخول بعالم التصميم والتطوير وإنشاء المواقع

سوف احاول ان اصوغ الكلمة فى عدة نقاط:-

أولاً : عليك بزيارة عدة مواقع تعليمية مثل :

www.nettuts.com
www.css-tricks.com
www.psdtuts.com

ثانيا : تستطيع ان تبدأ بتصميم مواقع للغير مما يكسبك عائد مادى مجزى و خبرة لا يستهان بها عن طريق المواقع التالية :

www.guru.com
www.rentacoder.com
www.elance.com

– توكل على الله و تأكد انك لو اجتهدت بنية حسنة فسيوفقك الله سبحانه و تعالى ان لم يكن فيما اجتهدت فيه فسوف يعوضك فى امر اخر (كل ما عليك هو الاجتهاد)

– لا تصمم و لا تساعد على تصميم اى موقع يخالف الشريعة او يحوى ما يغضب الله



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



عالم التقنية

 

[السيب]

عرب نت : جلسة المنتديات العربية وتطورها [فيديو]



================



---------------

عرب نت : جلسة مستقبل المحتوى الرقمي
عرب نت : جلسة مستقبل المحتوى الرقمي

نشرت بواسطة:سعود الهواوي في منوعات 20 ديسمبر 2012 1 تعليق



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

مشاهدة ممتعة للجميع



عالم التقنية

 

[السيب]

إضافة نظام التعليقات Disqus في عالم التقنية
إضافة نظام التعليقات Disqus في عالم التقنية

نشرت بواسطة:عبدالملك الثاري في منوعات 16 ديسمبر 2012 62 التعليقات

نظام التعليقات الشهير Disqus رائع بكل المقاييس الفنية ومستخدم من قبل العديد من المواقع الكبيرة مثل CNN و IGN و Time وغيرها …

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

من أهم النقاط التي تميز نظام التعليقات Disqus الجديد في عالم التقنية هي :

• جمال تصميمه وسهولة استخدامه
• وجود ملف شخصي لكل شخص يمكن ربطه من خلال خدمات الشبكة الاجتماعية (تويتر, فيسبوك, جوجل بلس) أو من خلال ملف خاص به من نظام التعليقات Disqus
• يمكن متابعة التعليقات التي تم طرحها بسهوله
• يمكن متابعة تصويتات الإعجاب او عدم الإعجاب التي تم طرحها
• يمكنك متابعة أشخاص او ان يكون لديك متابعين شبيهه بتويتر Followers و Following
• يتم تحديث أي أمر خاص بنظام التعليقات بوقت حقيقي لا يحتاج إلى تحديث الصفحة نهائياً
• إمكانيات متقدمة في عرض التعليقات حيث يمكن عرض أفضل التعليقات بناء على أكثر الإعجابات او عرض أحدث التعليقات أو عرض أقدم التعليقات … الخ
• إمكانيات متقدمة في طرح التعليقات مثل إضافة صورة في التعليق أو الرد على المعلقين بشكل سلس وبعدد كبير من الردود الداخلية وبطريقة منسقة
• إمكانية إضافة إعجاب للمناقشة كاملة أي على مجموعة التعليقات ككل او يمكن إضافة إعجاب على تعليق محدد أو
• مشاهدة تعليقات مرتبطة التي تم إضافتها في الموقع ككل بحيث يظهر تعليقات قد تثير اهتمامك
• إمكانية الاشتراك في خلاصات مجموعة تعليقات معينه أو الاشتراك بالبريد لمتابعة مجموعة تعليقات معينه
• يمكن مشاركة ونشر مجموعة تعليقات أو تعليق واحد معين لدى الشبكات الاجتماعية (تويتر,فيسبوك) ويعطيك رابط لتعليق محدد لتتمكن من نسخه ونشره
• يمكنك مشاهدة من قام بالرد عليك بتعليقاتك سواء في نفس الموقع عالم التقنية او في مواقع أخرى شاركت بالتعليق فيها من خلال نظام Disqus
• عرض التعليقات الجديدة مباشرة ولا تحتاج إلى تحديث الصفحة للتأكد من إضافة تعليق جديد
• والعديد من المزايا الأخرى الرائعة …

صورة توضح شكل نظام التعليقات الجديد :

بلا شك أن عيبه الوحيد هو عدم دعمه للغة العربية واعتقد ان تأخر طرحه هنا كان لهذا السبب ولكن لا مزيد من التأخير ونطلب منكم مشكورين الطلب والمشاركه في تعريبه خصوصاً لمن لديه حساب في موقع النظام أو من يريد ان يمتلك حساب في موقع النظام لأنه يحتاج تسجيل دخول

طبعاً ستشاهدونه في أسفل هذه المقالة الأن ويمكنكم التعليق فيه إذا أردتم التجربة وأكثروا من التجارب في هذه المقالة


عاتلم التقنية