لعبة Cut the Rope بتقنية HTML5

اللعبة المشهورة الموجودة في أجهزة نظام iOS مثل الآيفون والآيباد موجودة الآن بتقنية HTML5 على الويب وقد تم عملها بالتعاون مع فريق متصفح الإكسبلورر والشركة المالكة للّعبة ZeptoLab، يمكن الإطلاع على تفاصيل تطوير اللعبة وتحويلها من تطبيق مبرمج بلغة objective-c إلى لغة Javascript لتعمل على تقنية HTML5 بأداء رائع وهذا من ضمن الأشياء التي تعزز مكانة HTML5 أكثر من تقنية الفلاش

خلفيات شهر يناير 2012

مجموعة مميزة أخرى من خلفيات الشهر (خاصة بشهر يناير) مقدمة من موقع Smashing Magazine.

لماذا نجح موقع Reddit وفشل المرقاب؟

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

10 أيقونات رهيبة لتطبيقات نظام iOS

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

أنتظر ربيع المنتديات

موضوع يتحدث فيه المدون عبدالله المهيري عن فكرة لتغيير الوضع الحالي للمنتديات العربية وقد شبهها بالربيع (نسبةً إلى الربيع العربي -ربيع التغيير-)، وأذكر أنه تحدث عن سلبيات المنتديات في مواضيع سابقة إلا أن التعبير عن سلبية هذه المنتديات لا يكفي فلابد من أفكار عملية تساعد على تغيير وضع المنتديات العربية.

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

أعلى 32 مصدر لمطوري تطبيقات الهاتف

مجموعة مشكّلة بطريقة Infographic تعرض مصادر مفيدة جداً وأدوات لمطوري الهواتف النقالة (مطوري iOS بالتحديد) من المنتديات المخصصة للمطورين ومواقع الدروس إلى الكتب وطرق التسويق والأدوات المساعدة على تطوير التطبيقات بشكل أسهل.

Code Year

فكرة مشابهة لفكرة موقع Codecademy لتعلم التكويد والبرمجة بطريقة سهلة ومسلية إلا أن فكرتها هي تعلم البرمجة خلال هذه السنة ويتم إرسال تطبيقات الدروس (بطريقة التعلم عن طريق العمل Learn by doing) كل أسبوع عبر البريد الإلكتروني لتذكيرك بدخول الموقع وتطبيق الدروس (كون البريد الإلكتروني يبقى مصدر لتذكيرك بدخول التطبيقات بدلاً من حفظ الرابط في قائمة Bookmarks أو الإشتراك بخلاصة RSS).

عرض تقديمي بإستخدام CSS3

هذه أحد العروض التقديمية Presentation الرائعة التي تم عملها بتقنية CSS3 وبإستخدام مكتبة impress.js لتبين جمالية العروض التقديمية على الويب أكثر حتى من العروض المعمولة بإستخدام الأدوات المكتبية مثل Microsoft PowerPoint، ولملاحظة التأثيرات والحركات قم بإستخدام الإتجاهات (الإتجاه الأيمن والأيسر) الموجودة في لوحة المفاتيح.

أبل ربما تربح 10 دولارات من كل جهاز أندرويد يباع

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

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

مراحل إنشاء لعبة Angry Birds بتقنية HTML5

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

أهم الأخبار والأحداث التقنية في عام 2011

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

‎22 أيقونة ابداعية للآيفون

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

إمبراطورية سامسونج: حقائق وأرقام مدهشة

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

من تربّع على عرش أكبر شركات الألعاب حصدا للأرباح لعام 2010؟

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

‎مجموعة لأماكن العمل ملهمة

مجموعة من الصور لأماكن عمل مرتبة وبسيطة وجميلة تعطيك أجواء مناسبة للعمل.

‎تأثير إضاءة بتقنية CSS3

تأثير بتقنية CSS3 لإضاءة على جهاز iPad تتغير بتحريك سهم الفأرة.

50 مصدر وأداة مفضلة لمطوري المواقع لعام 2011

مجموعة أدوات ومصادر تم إنشائها في سنة 2011 تعتبر إضافة مفيدة جداً لمطوري الويب ومنها ما نقل تطوير الويب نقلة نوعية مثل إنشاء تطبيقات الهواتف وما هو متعلق بتقنية HTML5.

20 موقع ظهر في عام 2011 إستخدم لغة Javascript بشكل قوي

مجموعة من المواقع والتطبيقات التي إستخدمت لغة Javascript لإخراج شيء مبهر كان يمكن عمله بتقنية الفلاش وهذا يظهر مدى قوة هذه اللغة والتي تستخدم بشكل رئيسي في إظهار قوة تقنية HTML5 كذلك.

إضافات jQuery مفيدة ورائعة

مجموعة من الإضافات لمكتبة jQuery مفيدة لعمل التفاعل بين المستخدم وما يعرض في صفحة الويب.

تركيب إضافة FireBug في جهاز الآيفون والآيباد

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

‪واجهة تويتر الجديدة‬

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

أكثر 50 إضافة مفيدة لمكتبة jQuery في سنة 2011

عرض لإضافات jQuery مفيدة  لهذه السنة وهي مقسمة حسب الإستخدام كما يمكن مشاهدة مثال على كل إضافة قبل تحميلها.

مؤتمر منظمة W3C

آخر عروض مقاطع الفيديو لمؤتمر منظمة W3C الذي أقيم تاريخ 15 و16 من الشهر الماضي وتناول عدة مواضيع من أهمها تقنية HTML5 وCSS، وكذلك هناك عدة عروض عن HTML5 أكثر ما لفت إنتباهي هو عرض HTML5 Gaming عمل الألعاب بواسطة تقنية HMTL5 (إختيار HTML5 كمنصة للالعاب).

امبراطورية سامسونج

‎فلم وثائقي مثير يتحدث عن تفاصيل رائعة عن شركة سامسونج التي تفوق أرباحها مجموع أرباع شركة آبل وجوجل ومايكروسوفت‫!‬ كما ذكر المذيع في الفلم‫.‬

ثورة أبل في عالم التقنية هل تصل الى الكاميرات الرقمية

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

رواد وادي السيليكون: (1) مافيا باي بال

موضوع يتحدث عن أصحاب مشاريع ويب ناجحة ومشهورة التي تقدر بالمليارات، مواقع مثل ‏YouTube, Linkedin, slide, yelp كان أصحابها يعملون سابقاً في شركة PayPal.

دروس عن كيفية إنشاء إضافة ووردبريس

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

أكثر مكتبات لغة جافاسكربت إستخداماً لعام 2011

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

درس: إنشاء إضافة jQuery

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

دليل للمشاركة بمشاريع مفتوحة المصدر

موضوع رائع يتحدث عن المساهمة في مشاريع مفتوحة المصدر وموقع ‏Move the Web Forward الذي يهدف إلى تعريف عامة المستخدمين في كيفية المساهمة بمشاريع مفتوحة المصدر بوسائل كثيرة وليست البرمجة فقط بل بكتابة الوثائق لمن يمتلك مهارات في الكتابة وتصميم وتحليل واجهة الإستخدام لمن يملك موهبة في التصميم وفهم عناصره والمشاركة في القوائم البريدية ووسائل مفيدة أخرى .. أكثر نقطة شدتني في الموقع هي شرح كيفية البدء من التعلم حتى المشاركة بالمشروع، وإضافةً إلى أن المشاركة في مشاريع مفتوحة المصدر تبني خبرة للمساهم مما يؤهله للحصول على وظيفة (إذا كان لا يعمل) أو ممارسة البرمجة أو التصميم في أوقات فراغه بهدف الإحتفاظ بها كمهارة.

25 حيلة رائعة لتقنية HTML5 وكيفية عملها

عرض لعدة دروس خاصة بتقنية HTML5 ومخصصة لكل ميزة من مميزات تقنية HTML5 مثل ميزة تحديد الأماكن Geolocation و التحزين الداخلي Local Storage وعرض مقطع فيديو عن طريق عنصر video بدلاً من الفلاش وغيرها من المميزات.

خلفيات شهر ديسمبر من موقع Smashing Magazine

خلفيات شهر ديسمبر من موقع Smashing Magazine.

تحليل أداء الالعاب المصممة بتقنية HTML5

مقالة تعرض مقارنة بين أداء الالعاب المصممة بتقينة HTML5 عن غيرها بواسطة إستعراضها عن طريق عنصر Canvas وإحصائية أخرى بواسطة مستعرض WebGL وأخرى بمستعرض OpenGL الكلاسيكي المستخدم في العاب الهواتف النقالة التي تعمل على نظام iOS وAndroid.

‏Friendster .. قصة فشل أول شبكة تواصل اجتماعي

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

‫أسطورة أزمة المحتوى العربي على الإنترنت‬

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

تصميم المدونات في 5 نقاط

موضوع مهم عن تصميم المدونات وإختلافها من مدونة إلى مدونة أخرى في 5 نقاط  كتبها المدون عبدالله المهيري.

شرح إنشاء صفحة موقعك أو شركتك في قوقل بلس

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

صفحة مدونة مبدع في جوجل بلس

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

دليل المطور لمكتبات تطوير تطبيقات الهاتف

دليل يحتوي على أدوات مهمة لتطوير تطبيقات ويب للهواتف النقالة و تطبيقات الهواتف النقالة الأساسية Native والهجينة Hybrid مع أسئلة شائعة للمطورين يجيب عليها كاتب المقالة في البداية.

‫موقع treehouse‬

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

‫تطويرات Adobe في تقنية HTML5‬

مقطع فيديو مثير يعرض كيفية إستخدام بعض منتجات شركة Adobe في عمل تطبيقات HTML5 إحترافية مثل تطبيق Edge الخاص بعمل المقاطع المتحركة بتقنية HTML5 وتصدير مشاريع الفلاش إلى صفحة HTML5 وبعض المشاريع الأخرى.‬

‫10 تطبيقات آيباد ضرورية لمصممي الويب‬

مجموعة من التطبيقات المفيدة لمستخدمي الآيباد خصوصاً مصممي الويب منهم.‬

‫23 تصميم ملهم للصفحات الفردية‬

‫مجموعة تصاميم لمواقع تتكون من صفحة واحدة فقط، غالب المواقع ذو الصفحة الواحدة تكون تابعة للمصممين والمطورين وهي طريقة مختصرة وجذابة.‬

‫25 كتاب مفيد لمصممي ومطوري المواقع‬

‫مجموعة من الكتب مفيدة جداً للمصممين ومطوري المواقع بعضها حديث وبعضها قديم ومنها كتب نظرية وكتب عملية (مصدرية).‬

الفارق الرئيسي بين آبل و جوجل

مقالة من موقع Mashable يعرض فيها صاحب المقالة الفرق بين شركة جوجل وشركة آبل كونهم متنافسين في سوق أنظمة تشغيل الهواتف النقالة، الفرق الذي يبينه كاتب المقال أن جوجل تركز في البيانات أو المعلومات وكيفية الوصول لها .. بينما آبل تركز في التصميم أي تصميم المنتج وكيفية تقديمه، وكلا الأمرين (التصميم والبيانات) يحتاجون إلى بعضهم.

عشرة رواد أعمال غيروا الإنترنت

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

أدوبي ستتوقف عن دعم وتطوير الفلاش في الهواتف

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

‫أفلام بيكسار Pixar Movies‬

قائمة بأشهر أفلام شركة بيكار المختصصة في إنتاج الأفلام المتحركة والذي كان ملك لستيف جوبز في فترة من الفترات.‬

كتاب حسن مهاراتك في التدوين (الإصدار 0.1)

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

في هذا الإصدار هناك 6 مواضيع تشمل مقدمة الكتاب وهي:

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

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

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

• تحميل الكتاب

‏Angry Birds تصل الى نصف بليون تحميل

أعلنت شركة Revio المالكة للعبة Angry Birds الشهيرة أن اللعبة وصلت إلى نصف بليون والتي تتكون من أربعة أجزاء وهي Angry Birds و Angry Birds: Rio و Angry Birds: Season.

روبوت مبني يعتمد على جالكسي S2

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

مشروع ملهم مصمم بتقنية HTML5

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

حينما تتحول المأكولات إلى شعارات 40 شعار ملهم

أفكار جميلة جداً لشعارات تحوي عدة مأكولات وهي تعود أغلبها إلى مطاعم.

25 نصيحة لتصميم شعار مناسب (الجزء الثاني)

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

خلفيات شهر نوفمبر 2011

خلفيات جديدة من موقع Smashing Magazine لشهر نوفمبر، أعجبتني ثلاث أو أربعة خلفيات منها فقط.

21 مقال ملهم لإستخدام فن التيبوغرافي في تصميم الويب

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

إعلانات كلاسيكية تظهر التقنيات الحديث

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

أساسيات التصميم: العناصر

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

25 نصيحة لتصميم شعار مناسب

يقدم المصمم محمد اليوسفي تلخيص لكتاب Logo Design Love للمصمم والمدون ‏David Airey يحتوي التلخيص على نصائح مهمة لكل مصمم مهتم بتصميم الشعارات من الفكرة إلى الطباعة.

دروس من قصة تأسيس تويتر

قصة تأسيس موقع تويتر وسيرة مؤسسيها ودروس مفيدة من هذه القصة لأصحاب المشاريع الناشئة عبر ثلاثة أجزاء (الجزء الأول – الجزء الثاني – الجزء الثالث) يقدمها المدون رؤوف شبايك.

فيديو: سيرة ستيف جوبز في برنامج ‘60 Minutes‘

مقطع مقسم على جزئين من برنامج 60 Minutes ستحدث عن سيرة الرئيس التنفيذي السابق لشركة آبل ستيف جوبز ويتكون من مقابلات مع عدة شخصيات منها مؤلف كتاب Steve Jobs Biography الذي نشر في يوم الإثنين الماضي (24 أكتوبر) وشريكه المؤسس ستيف وزنياك.

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

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

10 أفكار ذكية تعرض نفسها بفن التيبوغرافي

عرض لعدة تصاميم تحتوي على أفكار موصوفة بشكل بصري أكثر من مجرد كلمات .. أحد أفضل التصاميم التي رأيتها بفن التيبوغرافي.

مكاتب شركة Mint‪.‬com

عدة صور رائعة لمكاتب شركة Mint‪.‬com المتخصصة في إدارة الحسابات المالية وبطاقات الإئتمان عبر الويب.

أجوبة مفيدة تتعلق بكيفية البدء بالمشروع الناشئ وتسويقه (من موقع Quora)

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

تاريخ جهاز الآيفون

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

موقع iOS Frameworks

يعتبر مصدر مفيد جداً للمطورين على نظام iOS وتحتوي على عدد من مكتبات مساعدة في التطوير على أجهزة نظام iOS مثل الآيفون والآيباد، والدليل مقسم حسب حاجة المطور فمثلاً قد يحتاج محرك فيزيائي لتطبيقه مثل Box2d أو مكتبة خاصة بإنشاء ألعاب ثلاثية الأبعاد 3d وغيرها.

10 سنوات على جهاز آيبود

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

ورقة تغشيش لتصميم نماذج الويب Web Forms

ورقة تغشيش أو cheat sheet خاصة لتصميم نماذج الويب أو الأنماط المستخدمة في إنشاء نماذج الويب، يمكن أن يفيد مصممي الويب كمرجع لهم عند البدء بعمل نموذج ويب ومعرفة الطريقة المناسبة للتصميم.

إضافة jQuery لعمل خط زمني Timeline

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

وصفة علاجية لمبرمج يعاني من الكسل

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

25 خلفية رائعة من خاصة بفن التيبوغرافي

خلفيات رائعة متعلقة بفن التيبوغرافي .. متعددة الأشكال والألوان.

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

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

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

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

ولا ننسى أن هناك العديد من الأدوات الخاصة بتقنية HTML5 تظهر بين فترة وأخرى بشكل متجدد خصوصاً عندما نتحدث عن التفاعلية والألعاب، فهناك مكتبات مخصصة لإنشاء الألعاب بتقنية HTML5 ظهرت مثل مكتبة Impact و LimeJS ووجود نسخة من محرك Box2d الفيزيائي بلغة جافاسكربت Javascript وغيرها من الأدوات التي تظهر بشكل متجدد.

برأيي هذا يدل على أن تقنية HTML5 تستخدم حالياً بشكل أساسي بدلاً من الإنتظار إلى سنوات قادمة حسب ما إعلنت سابقاً منظمة W3C عن إعلانها سابقاً بعدم جاهزية تقنية HTML5 إلى سنة 2022 (ومصادر أخرى تقول موعد الإنتهاء سيكون أقرب .. سنة 2014 بالتحديد) لإستخدامها بشكل كامل! ولكن لا شك أن التطورات ستستمر في المستقبل للوصول إلى الشكل المطور والمتوقع من تقنية HTML5 في السنوات القادمة إلى تظهر بالشكل الذي تريده منظمة W3C.

هذه مجرد مقدمة لدروس سأقدمها قريباً عن تقنية HTML5 في المدونة.

ستيف جوبز: الرجل الذي غير العالم

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

أشهر 13 إقتباس لستيف جوبز

ستيف جوبز .. رحلة ريادة الاعمال الناجحة المليئة بالتعثرات

ملخّص مصوّر لحياة ستيف جوبز

أمثلة على إستخدام أزرار “إتخاد الإجراء” أو “Call to action”

صور أجهزة إلكترونية ثلاثية الأبعاد بدقة عالية

مايكروسوفت غيرت العالم أكثر من أبل

أمثلة ناجحة على إستجابة تصميم الويب

30 مثال جميل على إستخدام الأنماط في الخلفية في تصميم الويب

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

• مثال على الدرس
• تحميل المرفقات

إعتبارات قبل البدء في تصميم النسخة الواحدة

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

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

مثال عملي

أول خطوة هي تحديد القياسات التي سيتم تغيير عناصر التصميم فيها فالشكل الأولي سيكون أكبر من 1024 بكسل وعند تصغير النافذة لما هو أقل من ذلك ستبدأ عمليات التغيير، وهذه عدة قياسات سأعتمد عليها لرؤية أهمية تغيير العناصر فيها:

• النسخة الرئيسية: أكبر من 1024 بكسل
• نسخة الأجهزة اللوحية: أصغر من 1024 بكسل/820 بكسل
• نسخة الهواتف النقالة: أصغر من 480 بكسل

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

على إفتراض أننا إنتهينا من عمل الشكل الرئيسي الخاص بأجهزة الحاسوب والذي يمكن رؤيته في المثال الموجود في الدرس أو تنزيل مصدر الصفحة من الدرس كذلك، يتبقى لدينا التعديلات الخاصة لقياسات مختلفة للهواتف النقالة والأجهزة اللوحية وهذا ما أود التركيز فيه (عادةً بعض المواقع لا تحتاج إلى وجود قياس خاص بالجهاز اللوحي فمثلاً دقة جهاز الآيباد الخاص بشركة آبل يحتاج بأن يكون عرض الصفحة أقل من 1024 بكسل)

الصورة التالية هي ستكون نتيجة تطبيق الدرس الذي يبين النسخة الأساسية للموقع (لأجهزة الحاسوب) ونسخة الهواتف النقالة:

لإعتماد تغيير العناصر وفق القياس المناسب يجب ترتيب العناصر حسب أولويتها ووضعها حسب المساحة الكافية في القياس، فمثلاً عندما تكون النسخة خاصة بالهواتف النقالة فسيتم وضع العناصر بشكل عمودي ولا يوجد عنصر توافق مع عنصر آخر في مستوى واحد بشكل أفقي (عندما نستخدم خاصية float في تقنية CSS) ، هذا تصوري لترتيب العناصر حسب كل قياس مختلف قمت بإختياره عبر الصورة التالية:

قبل البدأ بكتابة شفرة HTML وCSS تأكد من دعم خاصية Viewport لتقبيت وضوح الصفحة ومنع تحريكها بشكل أفقي وهذا خاص للهواتف النقالة، ضع هذه الشفرة في رأس الصفحة (في عنصر head):

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

سأكتفي بكتابة شفرة CSS الخاصة بإستعلامات Media Query والتي سنغير ترتيب العناصر وقياساتها وفقاً للشرط المستخدم في الإستعلامات ، نبدأ أولاً بقياس 1024 بكسل عبر شفرة CSS التالية (سأضع الشرح كتعليقات في الشفرة):

/* تعديل العناصر بعد أن تكون النافذة أو يكون عرض الجهاز أقل من 1024 بكسل */
@media screen and (max-width: 1024px) {
	/* إستخدام صيغة النسبة لتصغير عرض النافذة بشكل آلي ليكون متوافق مع عرض النافذة */
	#container, #footer {
		width: 96%;
	}

	#last-posts {
		width: 58%;
	}
}

@media screen and (max-width: 820px) {
	/* فصل عنصر المحتويات أو آخر المواضيع عن القائمة الجانبية وكلاهما سيكون بشكل عمودي ومتوافق مع عرض الصفحة */
	#last-posts, #sidebar {
		width: 99%;
		margin: 0 auto;
		float: none;
	}

	#last-posts .post:last-child {
		border-bottom: 2px solid #bfbfbf;
	}

}

@media screen and (max-width: 740px) {

	/* جعل الشعار وقائمة الروابط بشكل عمودي ومتوسط */
	#header #logo, #header #navigation {
		float: none;
	}

	#header {
		text-align: center
	}

	#header #logo {
		margin-bottom: 15px;
	}

	#header #navigation {
		margin: 0 auto;
		overflow: hidden;
		width: 345px;
	}
}

/* تنسيق قائمة الروابط والمحتويات عندما يكون عرض الشاشة أو عرض الجهاز 480 بكسل أو في وضعية Landscape */
@media screen and (max-width: 480px) {

	#header #navigation ul li a {
		 margin-right: 15px;
		 padding: 4px 15px;
	}

	#header #navigation {
		width: 313px;
	}

	#header {
		margin-bottom: 30px;
	}

	#last-posts .post h1 a {
	 	font-size: 26px;
	}

	#last-posts .post p {
		font-size: 15px;
		line-height: 24px;
	}

}

/* تصغير الشعار بشكل تلقائي ويمكن إستخدام نفس الطريقة في تصغير الصور وذلك عن طريق إستخدام صيغة النسبة بدلاً من البكسل ‪*/‬
@media screen and (max-width: 360px) {
	#header img#logo {
		width: 99%;
	}

}

/* بعض التعديلات خاصة عندما يكون عرض النافذة أقل من 332 بكسل أو عندما يكون الهاتف في وضعية Portrait */
@media screen and (max-width: 332px) {
	#sidebar .adv img {
		width: 99%;
	}

	#header #navigation ul li a {
		 margin-right: 13px;
		 padding: 7px 14px;
		 font-size: 12px;
	}

	#header #navigation {
		width: 237px;
	}

	#last-posts .post h1 a {
	 	font-size: 20px;
	}

	#last-posts .post p {
		font-size: 15px;
		line-height: 22px;
	}

	#sidebar .sidebar-item ul li a {
		font-size: 15px;
	}

	#sidebar .sidebar-item ul li {
		line-height: 25px;
	}
}

إذا أردت معرفة كيفية عمل الصفحة أساساً بتقنية HTML و CSS هذه بعض المواضيع في المدونة وخارجها قد تفيدك:

• درس: تصميم صفحة ويب بواسطة XHTML و CSS
• تطبيقات على CSS3
• تحويل تصميم من PSD إلى HTML

وأعتذر عن عدم إدراج الشفرة كاملة فيمكن رؤيتها من المتصفح وإستخدام أداة Firebug لتحليل شفرة الصفحة.

إختبار التصميم في عدة متصفحات وفقاً لعرض الصفحة

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

Safari For Mac

لا توجد فروقات كثيرة بين بقية المتصفحات الحديثة مثل Firefox و Chrome

Safari for iPad

768X1024:Portrait

Safari for iPhone

320X480:Portrait

Opera for iPhone

320X480:Portrait

Browser for Nexus S

480X800:Portrait – Android OS

BlackBerry Browser

320X240 for BlackBerry Bold 9900

تلميحات للعمل بشكل أفضل

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

• إستخدم أدوات تطوير مثل أداة Web Developer وFirebug الموجودة في متصفح فايرفوكس للتعديل أثناء رؤية الشكل النهائي ومعرفة قياس الصفحة الحالي والعناصر التي تظهر بشكل غير لائق عند عرضها على قياس معين.
• إستخدم تطبيقات المحاكاة الخاصة بالهواتف النقالة مثل iOS Simulator, Android Emulator, iBBDemo فهي تساعدك على معرفة الشكل المتوقع قبل أن يظهر على الهاتف، ولا تنسى تجربة النسخة على الهواتف التي تملكها إذا كنت تمتلك هاتف يعمل على نظام iOS أو Android، يمكن معرفة المزيد عن الأدوات التي تساعدك على تصميم موقع ويب للهاتف النقال.
• يجب مراعاة إمكانيات متصفحات الهواتف النقالة في دعمها لخصائص CSS3، فمثلاً متصفح Opera mini يقتصر على دعم بعض الخصائص مثل Media Query إلا أنه لا يدعم بعض المحددات Selectors وخصائص مثل border-radius وbox-shadow، يمكن معرفة المزيد دعم متصفحات الهواتف النقالة لخصائص CSS3.

• مثال على الدرس
• تحميل المرفقات

تصميم جديد لتطبيق TwitDesktop

خصائص هاتف iPhone 4S الجديد

تماثيل مدهشة تم صنعها من عود اسنان واحد فقط

كيفية إنشاء كتب إلكترونية

كتاب HTML for Babies لتقديم مفاهيم تصميم الويب للصغار

20 أداة للحصول على رأي العميل في تصميم الموقع

20 إستخدام مفيد لتقنيات HTML5

دروس جديدة لتعلم تصميم الويب

ياهو تعيش تخبطاً داخلياً

خلفيات شهر أكتوبر من موقع Smashing Magazine

كيف تحافظ على بطارية الماك بوك و الايفون

إعتبارات تصميم تطبيق الهاتف لمصممي المواقع

20 تصميم موقع جميل يستخدم ميزة الإنزلاق Slider

ما فائدة التخطيط للمشاريع؟

شعارات شركات كبرى بعد 20 سنة (إفتراضية)

أشكال رائعة لصفحات الخطأ 404

كيف تكون مدون منتِج

كيف تختار الفكرة المناسبة لشركتك الناشئة؟

10 طرق لتكون مطور ويب منتج

جوجل تفتتح متجر لبيع منتجاتها في لندن

ويكيبيديا: الموسوعة الحرة

إفتتاح المتجر الإلكتروني لشركة آبل في الإمارات

صور من بيئة العمل داخل الفيسبوك

30 تصميم ملهم لأيقونات تطبيقات الآيفون والآيباد

8 أخطاء تجعل الزائر يترك موقعك

نصائح مفيدة لتحسين مهارات المصممين

20 واحهة لمواقع جديدة ورائعة تستخدم تقنية HTML5

23 مثال لوضع لقطة لشكل موقع الويب في الواجهة الرئيسية

عرض لمواقع ويب تستخدم النسيج أو Texture في تصاميمها

الفكرة لا تساوي شيئا

الصعوبات التي تواجه صناعة الألعاب في المنطقة العربية

ياهو.. الماضي، الحاضر والمستقبل

كيف تجد كومبيوترك المسروق

vintageJS: خدمة لإضافة تأثيرات رائعة على صورك

إختبار سرعة القراءة بواسطة تقنية HTML5 بين ثلاثة هواتف

عرض نظام Windows 8 الجديد للأجهزة اللوحية

MapBox: خدمة لجعل الخرائط أكثر فعالية وجمال

كتاب إلكتروني مجاني  من موقع Smashing Magazine

5 طرق لتكون مدون مؤثر

تستخدم Media Queries في تحديد تنسيق معين للصفحة حسب عرض النافذة ويمكن إستخدام نفس التنسيق الخاص بالصفحة (مثل ملف style‪.‬css) وتعديل أصناف معينة خاصة بعناصر الصفحة (خاصية class و id) كما سنرى في هذا الدرس، في البداية سنلقي نظرة لأنواع إستعلامات Media Queries.

• مثال على الدرس
• تحميل المرفقات

كيفية إستخدام Media Queries

لإستخدام إستعلامات Media Queries في شفرة CSS يجب تعريف خاصية media وتحديد نوع الإستعراض مع شرط العرض على هذا التركيب:

@media type and (condition) {
	..
}

فمثلاً إذا أردت تحديد تنسيق معين للصفحة عندما يكون عرض نافذة المتصفح أقل من 1024 بكسل فإن إستعلام خاصية media سيكون بهذه الطريقة:

@media screen and (max-width: 1024px) {
	..
}

والشروط conditions المتوفرة في خاصية media هي:

• width: تحديد عرض الصفحة، يمكن تحديد أدنى وأعلى قياس عبر min-width و max-width.
• ‏height: تحديد إرتفاع الصفحة، يمكن تحديد أدنى وأعلى قياس عبر min-height و max-height.
• ‏device‪-‬width: تحديد عرض إستعراض شاشة الجهاز (مثل جهاز هاتف نقال: آيفون أو غيره).
• ‏device‪-‬height: تحديد إرتفاع إستعراض شاشة الجهاز.
• ‏orientation: تحديد إتجاه الجهاز، أفقي أو عامودي عبر قيم Landscape و Portrait.
• ‏device‪-‬aspect‪-‬ratio: تحديد نسبة عرض وإرتفاع الشاشة معاً (مثل 320/480 هي عرض وإرتفاع شاشة آيفون في الإتجاه العمودي).
• ‏color: تحديد ما إذا كان الجهاز يدعم الألوان في إستعراض الصفحة ويمكن تحديد عدد الألوان على الأقل min-color.
• ‏color‪-‬index: تحديد ما إذا كان الجهاز يدعم فهرسة الألوان (مثال جهاز يدعم 256 لون فقط).
• ‏resolution: تحديد دقة الشاشة التي تدعمها الجهاز الذي يستعرض الصفحة (مثل 72dpi او 300dpi).
• ‏scan: تحديد نوع المسح الخاص بشاشة التلفاز TV (يمكن توضيح هذه النقطة أكثر).
• ‏grid: تحديد نوعية إستعراض الشاشة إذا شبكي grid أم bitmap (يتعلق بدقة الشاشة كذلك).

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

مثال عملي

الآن ندخل في مثال عملي يوضح كيفية إستخدام إستعلامات Media Queries، سيكون المثال عن قالب عادي تتغير عناصره حسب عرض نافذة المتصفح ويمكن عمل أفضل من ذلك حسب إحتياجات الصفحة علماً بأن قبل إستخدام هذه الإستعلامات يجب أن تضع الهدف من إستخدامها وأياً من العناصر سوف تتغير قبل أن تبدأ بإستخدام إستعلامات Media Queries.

لن أعرض شفرة CSS وHTML كاملة بل فقط التغييرات بواسطة  Media Queries في شفرة CSS (يمكن تحميل المثال لرؤية كيف تم عمله وتفاصيله)، في البداية أوضح صور المثال مع التغييرات حسب عرض نافذة المتصفح قبل أن أدخل إلى وضع شفرة CSS:

لعمل تغيير أو تعديل خاصية معينة في CSS حسب عرض الشاشة كما هو مبين في الصورة السابقة، نبدأ بكتابة خاصية media يتبعها شرط التغيير (وهو عندما تكون عرض النافذة أقل من قياس معين)، كما في شفرة CSS هذه:

/* عمل تغييرات على التنسيق إذا كان قياس الصفحة أقل من 960 بكسل */
@media screen and (max-width: 960px) {

	#wrap {
		width: 100%; /* قياس العرض حسب عرض النافذة */
	}
	#navigation, #content, #header {
		float: none; /* إلغاء وضع العناصر معاً بالشكل الأفقي */
		margin: 0 auto;
		width: 80%;
		padding: 0;
	}

	/* تصميم قائمة روابط بشكل أفقي بعد تصغير نافذة المتصفح */

	#navigation {
		border-radius: 0;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		border-top-left-radius: 10px;
		-webkit-border-top-left-radius: 10px;
		-moz-border-radius-topleft: 10px;
		border-top-right-radius: 10px;
		-webkit-border-top-right-radius: 10px;
		-moz-border-radius-topright: 10px;
	}

	#navigation ul {
		overflow: hidden;
		margin-right: 15px;
	}

	#navigation ul li {
		display: block;
		float: right;
		padding: 0 10px;
	}

	#navigation ul li a {
		display: block;
		padding: 5px 10px;
	}

}

ويمكن بعدها رؤية التغييرات عند تجربة المثال بتصغير وتكبير نافذة المتصفح، وهذه فقط مجرد مثال بسيط لتوضيح الفكرة، فيمكن إستخدام إستعلامات Media Queries في تحديد تنسيق معين للهواتف النقالة والأجهزة اللوحية كذلك، وهذه مجموعة للقياسات يمكن إستخدامها حسب كل كل جهاز ووضعيته:

• جهاز آيباد iPad (وضعية Portrait -عمودي): 768X1024 (الإرتفاعXالعرض)
• جهاز إيباد iPad (وضعية Landscape – أفقي): 1024X768 (الإرتفاعXالعرض)
• جهاز آيفون iPhone (وضعية Portrait – عمودي): 320X480 (الإرتفاعXالعرض)
• جهاز آيفون iPhone (وضعية Landscape – أفقي): 480X320 (الإرتفاعXالعرض)
• بقية الهواتف النقالة: أقل من 480 بكسل

ويمكن إستخدام خاصية max‪-‬width أو min‪-‬width كشرط لإستخدام القياسات السابقة وكذلك إستخدام خاصية orientation في تحديد الوضعية سواء كانت Portrait أو Landscape بدلاً من تحديد القياس نفسه لإختصار كتابة الشفرة، وإذا قررت عمل نسخة موحدة للمستخدمين من سطح المكتب والهواتف النقالة لا تنسى تثبيت التصميم غير خاصية viewport:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

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

أمثلة

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

‏CSS‪-‬Tricks

Web Designer Wall

Hicksdesign

Simon Collison

Owltastic

 Converge SE

‏From A List Apart

Zomigi

مصادر

هذه بعض المصادر التي أخذت منها الأمثلة ومصادر تحتوي على معلومات أكثر عن إستعلامات Media Queries.

تفاصيل Media Queries من منظمة W3C

إستجابة تصميم الويب: ما هي وكيفية إستخدامها

20 مثال ملهم لإستخدام Media Queries

إستخدام Media Queries في المساحات المتوفرة في الصفحة

دليل إستجابة تصميم الويب

• مثال على الدرس
• تحميل المرفقات