مدونة - Cssbit: 02‏/10‏/2011

الأحد، أكتوبر 02، 2011

ملخص الدرس الأول من دورة css

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

ما هي css

فوائد أستخدام css

محررات css

كيف تكتب css

النقطة الأولي :

css هي لغة Cascading Style Sheets أي صفحات الأنماط الأنسايبية تستخدم دائما مع xhtml في تصميم صفحات الويب ..وهي لغة ليست بصعبة او لغة برمجية عالية المستوي وأنما لغة بسيطة عبارة عن مجموعة تعليمات للمتصفح من خلالها يمكن وضع الكائنات ..التحكم بمظهرها ..
أيضا هناك نظرية متبعة عند أستخدام css وهي فصل المحتوي عن المظهر أي ..ضع اي كائن تريده ..ولا تضع اي تنسيقات له أو قيم لتحديد مكانه ..وأجعل هذا من خلال css … اي xhtml من خلالها تكتب page Structure مثلا ..وضع صور ، فقرة ، جدول …إلخ وهنا يأتي ددور css بالمحتوي وهو ظهور هذا الكائن بشكل معين بخلفية معينة ..بحجم وأرتفاع معين ..إلخ

النقطة الثانية :

css هي صيحة جديدة بعالم الويب وأنا كانت أصبحت سمة أساسية بمواقع الويب الأجنبية ..وإلي حدما جديدة علي المواقع العربية ..لها فوائدة مختلفة منها علي سبيل المثال .
التوافقية وهي أن موقعك يكون متوافق مع المتصفحات المختلفة ..بإختلاف منصات التشغيل مثلا FireFox, IE 7.0 or IE 8.0 ,, Googl Chrome , Mac Safri …إلخ ..وهذا ليس شرطا مقصورا علي css فقط ..
سرعة الموقع : وهي أن يكون موقع خفيف التصفح وأيضا مفضل أستخدام صور خفيفة ..وتقلل من الصور بقدر الأمكان وتعتمد علي css ومن هذا يكون موقع خفيف التصفح وسريع للزائر .
سهولة تحديث موقعك : وهي مثلا لو موقعك ثابت يحتوي علي 10 صفحات html او موقع مبني علي برمجية معينة …من خلال ملف css تستطيع تغيير تنسيق الموقع ..والكائنات ..وهذه سهولة ويمكنك الرجوع للملف مستقبلا والتحكم بشكل وتموضع الكائنات بكافة صفحات محتوي موقعك …بعكس الطرق التقليدية القديمة .
ايضا استخدامك xhtml,css يجعل موقعك صديق لمحركات البحث إذا اتبعت مجموعة من الأجراءات ..وايضا يعطي أنطباع جيداً عنك ..وعن موقعك ..وهذه ميزة تجعل تكسب الزوار مستقبلا .

النقطة الثالثة :

محررات css أو Css Editiors :
يتواجد كمية كبيرة من محررات لغة css أو xhtml ومنها ما هوه مجاني أو مدفوع مثلا ..مجاني : NotePad ++ , Aptana Studio …إلخ ويمكنك البحث عنهم بجوجل وتحميلهم بشكل مجاني ، وهناك المدفوع مثلا Adobe DreamWeaver وهو بيئة تطوير كاملة لتصميم الويب ..وايضا برنامج Expression web ..البديل الحديث للفرونت بيج ..

النقطة الرابعة :

كيف تكتب كود css…لعلك لو كنت مبتدأ تسئل نفسك متي سأكتب كود css صحيح وكيف ..نعم هذا الأمر سهل جداً يمكنك كتابة كود css من خلال أي محرر من المحررات السابق ذكرها وهناك عدة طرق تمكنك من اضافة الcss إلي صفحتك علي الويب من خلال طرق مختلفة سنتعرف عليها بالدرس القادم وهـي
Inline Code , Embded Code and External Code .

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

إن شاء الله ..إنتظروني بالدرس القادم عن طرق كتابة css …وكتابة أول كود فعلي لك ..والمزيد ..

دورة css والسكرين كاست الخاص بها ..الدرس الأول من الدورة

أهلا بكم من جديد .اليوم بفضل الله قررت أعيد استكمال طرح دورة تعليم css وسأحاول بإذن الله الوصول إلي نهاية الدورة مع مراعاة الملاحظات السابقة ورفع الملف علي اليوتيوب ليتسني للجميع رؤيته وهو لا يتعدي 10 ميجا ويمكنني رفعه في حالة الطالب كرابط مستقل للتحميل بصيغه MP4 بجودة أعلي …

اتمني تعجبكم وتستفيدوا بيها ..وهي تجربة جديدة لعلها تنجح أو تفشل ولكن المهم المحاولة ..وسأحاول جاهداً ..تحسين السكرين كاست تباعاً ..والخبرة لن تأتي إلا من التجربة والمحاولة ..بالتوفيق لكم ومنتظر تعليقاتكم وأتمني قبل النقد ..في اي ملاحظة مراعاة أنها تجربتي الأول

..والله الموفق

كيفية تعلم css بكل سهولة للمبتدئي

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

لماذا يجب عليك أن تتقن css ؟

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

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

هل التعلم لهذه التقنية صعب أم سهل أم أمر مستحيل ؟

صدقني تعلم هذه التقنية أمر سهل ولكن يحتاج مجموعة من الإجراءات التي يجب أن تمشي بها وستجد أن التعلم لهذه التقنية أمر بسيط بإذن الله وعليك أن تبدأ البداية الصحيحة لتعلمها ، أتذكر موقف منذ سنوات أردت أن أتعلم البرمجة بتقنية VB 6.0 وكان وقتها أحدث إصداره وهي 6.0 ، وتحمست لتعلمها عندما رأيت منتج برمجي لصديق لي .. صنع بهذا البرنامج انبهرت ، وأردت أن أتعلم البرمجة بفيجوال بيسك وأحضرت كتاب يدعي MS VB 6.0 Bible وكان كتاب يدعو لاستحالة التعلم لعوامل عدة منها : لأنه من فئات الحجم الكبير ، أيضا لا يركز علي شئ ويصعب الأمور وبالتالي أرهقت ومللت من التعلم وتوقفت نظراً لأن البداية كانت صعبة ووقتها لم أجد يد المساعدة التي تعييني علي الاستكمال .

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

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

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

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

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