موقع فكرته جميلة لمن يريد أن يزود مصطلحاته الإنجليزية عبارة عن ألعاب فى شكل مستويات كل مستوى 50 سؤال به كلمة جديدة تختارتها او تختار شرحها لتتعلم مصطلحات جديدة ويمكنك طباعتها او إنزالها على شكل Mp3 أو PDF .
موقع فكرته جميلة لمن يريد أن يزود مصطلحاته الإنجليزية عبارة عن ألعاب فى شكل مستويات كل مستوى 50 سؤال به كلمة جديدة تختارتها او تختار شرحها لتتعلم مصطلحات جديدة ويمكنك طباعتها او إنزالها على شكل Mp3 أو PDF .
دلوقتى تقدر تتفرج على أى فيديو موجود على موقع اليوتيوب مع خدمة الترجمة الجديدة المدمجة بالفيديو بأى لغة بالضغط على زر CC .
من الوسائل المساعدة لتصميم صفحات الويب استخدام شبكات "Grids" حتى تضمن خروج التصميم بشكل منظم ومتوازن ومريح للعين
كل الفكرة انك بتصمم عليه بحيث تتوازى كل عناصر الصفحة فى التصميم ليس إلا عن طريق استخدام هذه الأعمدة كحد لبداية عنصر ما أو نهايتها .
يمكنك إنشاء أعمدة خاصة بك من الفوتوشوب تختارView->New Guide
ويمكنك استخدام قوالب جاهزة وأشهرها 960 Grid System

يمكنك الإطلاع على هذه الروابط كشرح تفصيلى
Grids Design Basics
A Brief Look at Grid-Based Layouts in Web Design
أضمن لك بعد استخدامها تصميم web2 نظيف مريح للعين
كل الفكرة انك بتصمم عليه بحيث تتوازى كل عناصر الصفحة فى التصميم ليس إلا عن طريق استخدام هذه الأعمدة كحد لبداية عنصر ما أو نهايتها .
يمكنك إنشاء أعمدة خاصة بك من الفوتوشوب تختارView->New Guide
ويمكنك استخدام قوالب جاهزة وأشهرها 960 Grid System
يمكنك الإطلاع على هذه الروابط كشرح تفصيلى
Grids Design Basics
A Brief Look at Grid-Based Layouts in Web Design
أضمن لك بعد استخدامها تصميم web2 نظيف مريح للعين
من الفصل التاسع من كتاب Don't make me think
من المهم قبل اطلاق موقعك ونشره اختباره على عدد من الأشخاص حتى تتأكد أنه يعمل بشكل جيد ويستطيع المستخدم التعامل معه .
حقائق عديدة عن اختبار موقعك قبل انطلاقه :
- إذا كنت تريد موقع متميز يجب عليك اختباره أولاً فبل نشره :حتى تتأكد انه يعمل بشكل جيد فالاختبار يوضح لك بأن كل الأشخاص لا يفكرون بنفس الطريقة ولا يستخدمون الإنترنت بنفس استخدامك ،فاختباره على عدد من المستخدمين كقدوم أصدقاء من خارج بلدتك لزيارتك ستجدهم يلاحظون أشياء لم تراها من قبل بمنزلك بسبب اعتيادك عليه ، أو أشياء كنت تراه واضحة لا يرونها كذلك .
- اختبار شخص واحد أفضل من عدم اختبار أى مستخدم بنسة 100 % : على أسوء الأحوال إذا قمت بأسوء اختبار للمستخدم الخطأ سترى أشياء مهمة يجب تعديلها لتحسين الموقع ، قمت باختبار موقع ما على مستخدم متطوع لمدة عشرة دقائق فقط ولكن صاحب الموقع كان يدون فهذه اللحظات ملاحظات عديدة ملئت صفح متعدد.
- اختبار مستخدم واحد مبكراً للموقع أفضل من اختبار 50 مستخدم قرب انتهاء الموقع :قد يلفت هذا المستخدم انتباهك لتعديلات معينة توفر عليك البناء على أساس خاطىء وقد تضيف تعديلات لها تأثيرات جيدة مستقبلاً .
- الاختبار عملية متكررة : أنت تعمل شىء ما وتحتبره وتقوم بإصلاحه وتخختبره مرة أخرى وهكذا ...
- لا يستخدم الاختبار لإثبات أو عدم إثبات شىء ما إنما ليعطيك حكم على الأشياء .
- من المهم اختبار مستخدمين من نفس العينة المستهدفة لإستخدام الموقع .
- لا يوجد شىء أفضل من رؤية أفعال المستخدم !
ملخص الفصل السابع من Don't make me think
Designing the Home Page
تصميم الصفحة الرئيسية
Designing the Home Page
تصميم الصفحة الرئيسية
عند تصميم الصفحة الرئيسية لموقع لابد أن تستوعب كل هذه الأشياء:
- هوية الموقع ومهمته"identity&Mission" : يجب أن تخبرنى الصفحة الرئيسية عما يتحدث الموقع , ولماذا يجب أن أكون هنا لا فى موقع آخر ؟
- التسلسل الهرمى للموقع"Site Herarchy" : يجب أت تعطى الصفحة الرئيسية نظرة عامة لما يقدمه الموقع من محتوى (ماذا يمكن أن أجد هنا ؟ )ومميزات (ماذا يمكننى فعله هنا؟ ) بشكل منظم قد يمثل غالباً فى قائمة الموقع (Navigation ) .
- البحث"Search" : أغلب المواقع تحت وجود صندوق بحث فى الصفحة الرئيسية للبحث فى محتويات الموقع .
- إثارة"Teases" : مثل غلاف المجلة يجب أن تجذبنى الصفحة الرئيسية ببعض المحتويات الجيدة بالداخل الأكثر مشاهدة أو انتشاراً أو الأحدث وهكذا ...
- تحديث المحتوى "Timely content": ينبغى تجديد المحتوى من وقت لآخر حتى يشعر الزائر المتكرر بوجود حياة فى الموقع .
- الإختصارات"Shortcuts" : يجب أن تحتوى الصفحة الرئيسية على روابط واختصارات لأكثر العناصر المطللوبة والشائعة (مثل تحديثات برنامج ما ) فلا يبحث الزائر كثيراً عنهم .
- تسجيل الدخول"Registration" : إذا كان الموقع يستخدم التسجيل فيجب وضع رابط فى الصفحة الرئيسية لمن يريد التسجيل لأول مرة أو مستخدم قديم يريد الدخول وطريقة لمعرفة أنه قام بتسجيل الدخول مثلاً (مرحباً ...... فلان ).
- قم بعرض ما يبحث عنه المستخدم ومالا يبحث عنه وهذا بعرض منتجات أو خدمات مهمةقد لا يعرف بوجودها المستخدم ولكنه مهتم بها .
- قم بتوضيح من أين يبدأ المستخدم .
- الصفقات : قم بتخصيص مساجة لعرض الإعلانات والإتفاقيات أو الشراكة التجارية ...
فى النهاية سجب على الصفحة الرئيسية أن توضح لى إجابات هذه الأسئلة :
- ماهذا؟
- ماذا لديهم؟
- ماذا يمكن فعله هنا ؟
- لماذا يجب أن أكون هنا وليس فى مكان آخر ؟
- من أين ابدأ ؟
استكمالاً لملخص الفصل السادس كان يتحدث عن أهم العلامات التى يجب فى موقع ويب ليسهل استخدامه وتم ذكر القوائم,الأقسام,الملحقات والبحث .
هناك علامات أخرى يجب توافرها كلما زاد تدرج الصفحات بالموقع عن ثلاث أقسام مثل :
5- أسماء الصفح :
وهيا عبارة عن مسار يظهر للمستخدم لإيضاح مكانه على الموقع ويتم وضعها كالآتى :
أربعة أسباب لحبى للتبويبات Tabs
:
1- بديهية فأى مستخدم حتى لو عديم الخبرة لن ينظر إليها وبيسأل ماذا تفعل هذه الأشياء؟
2- من الصعب عدم الإنتباه إليها فهيا تلفت النظر بأنك يجب أن تضغط هنا
3- ملساء حيث يميل المصممين لجعل الصفحات لامعة وملساء
4- تقترح مساحة مرئية فعندما تختار واحدة منهم تتقدم للأمام لتوضح لك أنك اقمت باختيارها
هناك علامات أخرى يجب توافرها كلما زاد تدرج الصفحات بالموقع عن ثلاث أقسام مثل :
5- أسماء الصفح :
- كل صفحة تحتاج لإسم مثلما يحتاج كل شارع لعلامة توصفه .
- يجب أن يكتب الاسم فى المكان الصحيح بأن يكون محاط بإطار ليميز الاسم عن باقى المحتويات
- لابد أن يكون الاسم بارز من حيث مكانه فى الصفحة , لونه , حجمه ونوع الخط .
- يجب أن يحمل الإسم نفس اسم الرابط الذى قمت بالضغط عليه لأصل إلى هذه الصفحة .
"أنت هنا"
عند تصفحك لموقع تجده يظللك رابط الصفحة التى أنت بها الآن حتى تعرف أين أنت فى هذا الموقع .من أشهر الطرق لإيضاح ذلك مايسمى6- Bread crumbs
وهيا عبارة عن مسار يظهر للمستخدم لإيضاح مكانه على الموقع ويتم وضعها كالآتى :
- يتم وضع المسار فى الأعلى
- تستخدم علامات < بين الصفح الفرعية .
- يستخدم حجم صغير للخط يتم استخدام كلمة أنت هنا لأن معظم المستخدمين سيفهمون المقصود بها .
- قم بزيادة حجم الخط الخاص بآخر عنصر وهيا الصفحة المفتوحة الآن .
- لا تستخدم هذا المسار بدلأ من اسم الصفحة .
أربعة أسباب لحبى للتبويبات Tabs
:
1- بديهية فأى مستخدم حتى لو عديم الخبرة لن ينظر إليها وبيسأل ماذا تفعل هذه الأشياء؟
2- من الصعب عدم الإنتباه إليها فهيا تلفت النظر بأنك يجب أن تضغط هنا
3- ملساء حيث يميل المصممين لجعل الصفحات لامعة وملساء
4- تقترح مساحة مرئية فعندما تختار واحدة منهم تتقدم للأمام لتوضح لك أنك اقمت باختيارها
لو بتستخدم تويتر ومركب التطبيق بتاعه على الفيس بوك بحيث يظهر الى بتكتبه فيه على الحالة بتاعتك"your status" فى الفيس بوك أكيد حسيت بالإزعاج الى بيسببه انه ينقل الريتوتس وهكذا..
التطبيق ده بسيط جداً بيخليك تحدد تويتات معينة الى تظهر فى الحالة بتاعتك على الفيس بوك بإضافة fb# بجوار التويتاية الى عايزها تظهر
مش هتحتاج غير انك تمسح تطبيق تويتر الأصلى من الفيس بوك وتركب التطبيق الجديد Selective Tweet وتدخل حسابك على تويتر فيه
ملحوظة : تأكد من إزالة تطبيق تويتر الأصلى من الفيس بوك وإلا لن تستطيع استخدام Selective tweets.
التطبيق ده بسيط جداً بيخليك تحدد تويتات معينة الى تظهر فى الحالة بتاعتك على الفيس بوك بإضافة fb# بجوار التويتاية الى عايزها تظهر
مش هتحتاج غير انك تمسح تطبيق تويتر الأصلى من الفيس بوك وتركب التطبيق الجديد Selective Tweet وتدخل حسابك على تويتر فيه
ملحوظة : تأكد من إزالة تطبيق تويتر الأصلى من الفيس بوك وإلا لن تستطيع استخدام Selective tweets.









