سحر الميتا تاجز Meta Tags

مولدات الميتا تاجز Meta Tags Generators :

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

الميتا تاجز Meta tags :

السطور التالية تحتوية علي أهم الميتا تاجز..

• Title: اسم الصفحه او اسم الموقع بأكمله. يمكنك أن تري عنوان موقعي في الشريط الأزرق لمتصفح الويب الخاص بك.
• Keywords: كلمات ذات صلة بمحتويات موقعك. والكلمات الرئيسية عادة ما يفصل بينها فاصله.
• Description: وصف لموضوع موقعك.
• Author: ليس إسم صاحب الموقع وإنما إسم كاتب مقالات الموقع.
• Subject: هو ما يخبر محركات البحث عن موضوع موقعك الرئيسي "مثل الكمبيوتر او الترفيه".
• Topic: مثله مثل Subject.
• Abstract: تشبه Keywords, قد تكون أي شيء متعلق بموقعك.
• Keyphrases: ال Keywords هي كلمة واحدة, اما ال Keyphrases فهيا مجموعة كلمات, ال Keyphrases عادة ما يفصل بينها فاصله.
• Summary: ملخص عن موقعك.
• Designer: مصمم موقعك.
• Copyright: حقوق النشر.
• Reply-to: البريد الإلكتروني لمالك الموقع, قد يكون بريدك الإلكتروني الخاص أو بريد الشركة الإلكتروني.
• Owner: مالك الموقع.
• Geography: بلد صاحب الموقع أو الموقع نفسه.
• Classification: هل هذا موقع شخصي أم تجاري.
• Coverage: التغطية: هل يغطي موقعك مواضيع محلية أم عالمية.
• Language: لغة موقعك.
• Rating: نوع محتويات موقعك."General" عام للجميع, "Kids" أمن للصغار, "Mature" للبالغين, "restricted" موقع خاص بي.
• Revisit-after: كم المدة التي يجب أن يستغرقها محرك البحث للعودة لتفقد محتويات موقعك بالأيام, إجعلها حوالي 7 ايام.

اهم الميتا تاجز The most important meta tags:

Title, Keywords, Description, Author.

ملاحظات عند العمل مع الميتا تاجز meta tags "طول الميتا تاجز":

• Title: إبقيه أقل من 80 حرفا.
• Keywords: إجعلها أقل من 500 حرف.
• Description: إجعله اقل من 200 حرف.
• Author: أبقيه أقل من 52 حرف.

مصمم الويب الناجح Good things, bad things in web design

لتصميم ويب ناجح تحتاج لخطة عمل, والخطة تحتاج لأهداف.إذا فلنبداء ب...تحديد الأهداف:لتحديد الأهداف تحتاج أن تسال نفسك عدة أسئلة:

1. هل الموقع شخصي أم تجاري أم نوع أخر "منتدي, دليل مواقع, متعدد الاغراض, إلخ.."
2. ما هو الموضوع الأول للموقع.. موقع إستضافة, ترفيه, برامج, صناعة إلخ...
3. من هم الزوار المتوقعون أو المرجون للموقع... جنسيتهم, أعمارهم, لغتهم, أهدافهم من زيارة الموقع إلخ..

سأفترض أن المعلومات المتاحة لي هي الأتي:

1. الموقع تجاري لشركة تعرض منتجاتها علي الويب وترجو الشركة زيادة مبيعاتها بعد نشر موقعها علي الويب.
2. موضوع الموقع هو : الشركة تبيع الكمبيوتر الشخصي والكمبيوتر المحمول والإكسسورات المتعلقة بهما.
3. زوار الموقع المستهدفين هم القادرين علي الشراء "البالغين في الغالب" من الإنترنت أو بالتليفون. لغتهم الأساسية اللغة العربية والإنجليزية "كبداية فربما تتوسع الشركة في عرض منتجاتها بلغات أخري".

مع تلك المعلومات تكون الأهداف كالتالي:

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

ولتحقيق تلك الأهداف نضع عدة نقاط في خطة العمل هي:

1. يقسم الموقع لقسمين متماثلين في المحتويات, أحدهما باللغة العربية والأخر بالغة الإنجليزية.
2. ككل مواقع الشركات يتضمن الموقع كل أو بعض الأقسام أو الصفحات التالية:
   • Home الصفحة الرئيسية.
   • About us من نحن. يحتوي نبذة عامة عن الشركة, تاريخها.
   • Products منتجات الشركة مثل الكمبيوتر الشخصي, السماعات, الشاشات, إلخ...
   • Services الخدمات التي تقدمها الشركة مثل, الدعم الفني, الصيانة, إلخ...
   • Contact us معلومات الإتصال بالشركة, تتضمن العناوين وأرقام التليفونات والبريد الإلكتروني والفاكس.
   • قد يتضمن الموقع أقسام مثل Media, Help, Jobs أو حتي Fun zone و الأخير هو قسم ترفيهي هدفه جذب الزوار للموقع "ملحوظة: هناك أقسام كثيرة أخري يمكن أن يتضمنها الموقع ولكن لا يتسع الموقع لذكرها كلها ومع نمو خبرتك كمصمم ويب ستعرف تلك الأقسام".

بالنسبة للشكل العام للموقع:الصور الألوان إلخ..

1. لابد وأن يحتوي الموقع شعار Logo الشركة.
2. لابد وان يحتوي الموقع علي إسم الشركة وسطر صغير عن تخصص الشركة.
3. يفضل أن يكون هناك عبارة شعارية أو إعلانية تسخدمها الشركة في الترويج لنفسها مثل"خدمتك هدفنا" أو "الجودة عنواننا" إلخ...
4. الوان الموقع حسب رغبتك أو رغبة أصحاب الشركة ولكن من المهم أن تسهل رؤية المحتويات"النصوص والصور" لا يكون النص غامق اللون وخلفية الموقع غامقة اللون أيضا.
5. ملاحظة كثير من أصحاب الشركات الذين صممت لهم كانو يعجبون باللون الأزرق؟!

الأن نبداء بتقسيم عام للموقع:

نحتاج مكان للشعار, لأسم الشركة, للنص الشعاري, للمحتويات, لقائمة رائسية وافقية

إذا فالنمسك ورقة وقلم ونبداء بنخطيط الصفحة, بالأسفل تخطيط إفتراضي للصفحة.

هل أعجبكم التخطيط أكتب تعليقك عليه.

أصنع قائمة أزرار للويب بالفايروركس بإحتراف Create a navigation for a website

نحتاج لهذا الدرس:

• برنامج فايروركس سي إس ثري Fireworks CS3

بدء العمل:

1. افتح لوحة "مستند" جديد في الفايروركس بإختيار New من قائمة File.
2. من النافذة التي ستظهر إختر العرض والطول 400 بيكسل, بخلفية بيضاء.

بدء صنع القائمة:

1. إختار Window-->>Common library.
2. من النافذة الجديدة التي ستفتح بإسم Common library إضغط مرتين علي كلمة Buttons.
3. والأن وقد إنسدلت قائمة بأشكال مختلفة من الأزرار, إستعرض الأزرار بالضغط عليها مرة واحدة لرؤية كل زرار علي حدة.
4. إختار الزرار المناسب لذوقك, "أنا أخترت الزرار التالي.
5. إسحب الزرار من نافذة Common library إلي اللوحة.
6. حدد الزرار.
7. والأن حرك الزرار في المكان الذي يناسبك.

التعامل مع الأزرار:

1. إضغط مرتين علي الزرار بالماوس, ليفتح لك نافذة تتحكم بها في شكل الزرار في حالته المختلفة.
2. حالات الزرار هي:
   1. Up وذلك عند عدم إقتراب مؤشر الماوس من الزرار.
   2. Over وذلك عند الوقف أو المرور بمؤشر الفائرة علي الزرار.
   3. Down وذلك عند الضغط علي الزرار.
   4. Over whil down بعد الضغط علي الزرار يمكنك من تمرير المؤشر عليه ليتغير شكل الزرار.
   5. Active Area وهذه هي المنطقه النشطة التي عند الضغط عليها أو المرور فوقها يتغير شكل الزرار أو يذهب بنا إلي صفحة ويب مربوط بها.
3. بعد إنتهائك من تغير شكل الزرار, بتغيير ألوانه أو الكتابة عليه, إضغط Done.

تكرار الزرار بنص مختلف:

1. لتكرار الزرار لا تصنع نسخ ولصق "هذا لا يجوز مع الأزرار".
2. إختار Window-->>Library.
3. من نافذة Library اسحب إسم الزرار إلي علامة New symbol, كما هو موضح بالصورة اسفل.
4. أعد تسمية الزرار الجديد بأسم مختلف عن أسم الزرار الاصلي.
5. أختار نوع الزرار Button.

إضافة الروابط:

1. إضغط علي كل زرار علي حدة, وأكتب الرابط في نافذة Properties في الجزء Link, وليكن عنوان موقعي http://ispweb.blogspot.com.

أنظر الناتج النهائي.

تلوين الصور الأبيض والأسود في الفوتوشوب

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

بدء العمل:

1. أحفظ الصورة التالية علي جهازك. بالضغط كليك يمين وإختيار Save as.
2. أفتح الصورة السابقة التي تريد تلوينها بإختيار Open من قائمة File بأعلي البرنامج.

التحضير للتلوين:

1. إصنع طبقة جديدة بالضغط علي زرار Create a new layer من نافذة Layer.
2. أعد تسمية الطبقة الجديدة بإسم Color وذلك بالضغط علي إسم الطبقة مرتين.
3. غير نوع الطبقة إلي Color كما هو موضح في الصورة.

بدء تلوين الصورة:

1. اختر اللون الأزرق أو المقارب له أنا إخترت #015bcd. إضغط عل مربع الألوان العلوي Set foreground color. وأكتب بأسف الشاشة التي ستظهر لك الرقم 015bcd كما هو موضح بالصورتين التاليتين.
2. والأن سنلون البحر بذلك اللون, أختار اداة Brush tool او أضغط حرف B في لوحة المفاتيح.
3. كبر حجم الفرشاة أو صغرها تبعا لإختيارك بالضغط علي زراري ] , [ في لوحة المفاتيح للتكبير والتصغير علي التوالي.
4. ابداء بتلوين البحر ولكن تأكد من أنك تلون بالفرشاة فوق الطبقة Color وليس الطبقة الأصلية للصورة Background.

أنظر الصورة بعد تلوين البحر.

صنع قائمة مسدلة بالفايروركس Create a pop-up menu with fireworks cs3

نحتاج في هذا الدرس إلي:

• برنامج فايروركس سي إس ثري "Fireworks CS3".

بداية العمل:

• أفتح مستند جديد في الفايروركس , أبعادها: 400*400 Pixels, لون خلفيتها أبيض.

بداية الرسم:

• أختار أداة rectangle tool, أو إضغط "U".
• إبداء بالضغط ثم السحب علي لوحة الرسم, لرسم مستطيل.
• من شريط الخصائص بالأسفل proprites, غير أبعاد المستطيل إلي 100 عرض و 30 إرتفاع, W=100 , H=30.
• من شريط الخصائص بالأسفل proprites, غير توع اللون إلي متدرج Color=Gradient-->linear.
• من شريط الخصائص بالأسفل proprites, غير لوني التدرج وذلك بالضغط علي المربعين الموضحيت بالرسم إلي اللونين #BCB159 و #F1EEDC من اليسار إلي اليمين.
• لتدوير حواف المستطيل, من شريط الخصائص بالأسفل proprites, أختار Rectangle roundness=56.

بداية صنع القائمة:

• نحتاج لأن نظهر شريط يدعي Behaviors.
• من قائمة Windows بالأعلي نختار شريط Behaviors.
• نتاكد من أننا ممسكين أو محددين المستطيل الذي صنعناه مذ قليل.
• من شريط Behaviors نضغط علي علامة + وتعني أضف أو Add behaviors.
• يظهر لنا مربع حواري يسألنا هل نريد أن نضيف فوق المستطيل المحدد Slice أم Hotspot, نختار Slice.

ملاحظة: "تقوم Slice بتقسيم اللوحة إلي جدول كبير Table كل جدول يحتوي علي خلية أو أكثر Cell كل خلية تحتوي علي قطعة أو شريحة من صورة تسمي Slice."

• في الشريط Behaviors بجوار علامة ال + سيسألنا أي Behavior سنضيف علي الشريحة Slice نختار Set pop-up menu .
• إذا لم يظهر لنا السؤال المذكور, نحدد ال Slice ونضغط علي + ونختار من القائمة الظاهرة Set pop-up menu .

ملاحظة: "في الغالب يظهر لون ال Slice بالأخضر الخفيف."

• الأن وقد ظهر لنا صانع ال pop-up menu, نضغط مرتين بأسفل كلمة Text ونكتب Yahoo! وذلك لإضافة أو محتوي في القائمة.
• أسفل كلمة Link نكتب http://www.yahoo.com وهذا هو رابط موقع ياهوو الشهير.
• الأن نضيف Google , http://www.google.com وكذلك موقعي ISPs , http://ispweb.blogspot.com.
• يمكنك العبث بباقي الخصائص للقائمة, وانصحك بذلك لتجرب أشكال مختلفة وتصاميم للقائمة.
• أضغط علي زرار Done.

تجربة القائمة:

لتجربة القائمة تحتاج إلي تصديرها إلي صفحة HTML.

• أختار من قائمة File, الأمر Export.
• أختار الخصائص كما هو موضح بالرسم.
• اختار Save.

الأن أفتح صفحة ال HTML التي صنعتها وجرب القائمة.

تهانينا لقد صنعت لك أول قائمة منسدلة pop-up menu whith fireworks cs3.