X-Bugs: لعبة من برمجة عربيه للآي فون والآي باد والأندرويد

لعبة جديدة تم إنشائها بواسطة Art Technologies من فلسطين وهي متوفرة لأجهزة iOS وAndroid.

ولادة كتاب

مقطع فيديو رائع يصور مراحل إنشاء الكتاب المطبوع.

Startups, this is how design works

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

BKOM ROBOT GAME

لعبة تم إنشائها بتقنية HTML5 من وكالة BKOM المتخصصة في مجال تصميم الجرافك والمواقع.

ما العيب في أماكن الترفيه في العمل؟

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

كيف تسوق وتروج لألعابك وتطبيقاتك

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

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

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

• كيف تسوق وتروج لألعابك وتطبيقاتك (الجزء الثاني)
• كيف تسوق وتروج لألعابك وتطبيقاتك (الجزء الثالث)
• كيف تسوق وتروج لألعابك وتطبيقاتك (الجزء الرابع)

إنشاء تطبيق البليون دولار

موضوع يعرض خطوات ومميزات إنشاء تطبيق ناشئ بناءً على ما يميز تطبيق Instagram الذي تم شراءه ببليون دولار عن طريق شركة فيسبوك.

Timeline

تطبيق يعرض الأحداث بشكل شريط زمني بطريقة جميلة ويمكن إدراج إضافة jQuery خاصة بالتطبيق في موقعك، وبإمكانك إختيار موضوع معين لعرضه ويقوم التطبيق بالبحث عن الموضوع من عدة مصادر مثل Google Maps وYouTube وVimeo وتويتر وغيره.

5 أسباب لفشل ريادة الأعمال

موضوع يعرض 5 أسباب لفشل رواد الأعمال في مشاريعهم.

Lux Ahoy: لعبة ويب جديدة بتقنية HTML5

لعبة جديدة رائعة بتقنية HTML5 تم عملها من قبل Luxurious Animals، وتحتوي على مرحلتين فقط ويتم تجهيز المراحل المتبقية قريباً ولكن من تجربتي السريعة للعبة حتى وإن إحتوت على مرحلتين والتي لعبتها أكثر من 10 مرات شعرت أني سأدمن على لعبها والشيء اللافت للنظهر فيها أنها بتقنية HTML5 .. مقالة تتعلق باللعبة.

تاريخ تصميم الأيقونات

موضوع يعرض تاريخ تصميم الأيقونات منذ ظهور واجهة إستخدام جهاز Xerox إلى واجهة نظام Ubuntu، وهو بداية تلخيص كتاب Rockstar Icon Designer من المصمم المبدع محمد اليوسفي.

أبرز تطويرات متصفحات الإنترنت 2012

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

صور لداخل مقر آبل الرئيسي

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

من داخل شركة Foxconn: كيفية صنع الآيباد

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

أيقونات ملهمة

مجموعة من الأيقونات الرائعة والملهمة.

لماذا اشترت فيس بوك Instagram مقابل مليار دولار

موضوع يذكر أهم أسباب شراء فيس بوك لخدمة Instagram والذي كان خبر مهم جداً لمحبي التقنية وريادة الأعمال، خصوصاً أن تطبيق Instagram أصبح مشهور جداً خلال الأسابيع الماضية الأخيرة (مثل شهرة لعبة Angry Birds!) سواء على نظام iOS أو Android.

تجسيد

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

بيان بريس

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

فيروس يصيب حواسيب ابل

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

Kickstrap: أداة مبنية على Bootstrap

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

HTML5 Bookmarks

قائمة بمصادر تقنية HTML5 التي يحتاجها مطوري الويب والمتوجهين لهذه التقنية.

Retina.js

مكتبة Javascript خفيفة تسهل على المطورين دعم شاشة Ratina الخاصة بالهواتف النقالة مثل شاشة Ratina الخاصة بالآيفون 4 والآيباد الجديد.

قصة شركة Microsoft

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

عربليزي Arablish

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

خلفيات شهر أبريل

خلفيات جديدة من موقع Smashing Magazine.

Positive Posters

معرض جميل للتصاميم التي تحمل أفكار إيجابية ومفيدة.

إقتصاد الإنترنت وتأثيره على إقتصادات الدول

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

جوجل تجرب سيارتها الذكية على رجل أعمى

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

حدّث متصفحك

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

لماذا لا نتعلم من الصين؟

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

مثال ثلاثي الأبعاد بتقنية CSS3

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

النمل وفن الماكرو

مجموعة صور رائعة وملهمة لفن الماكرو نفذها مصور روسي محترف في هذا المجال.

كيفية كتابة قالب HTML5

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

10 أطر عمل ضرورية لتقنية HTML5

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

أفضل ممارسات تقنية HTML5 للمصممين

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

لعبة أنشئت بواسطة تقنية HTM5

أحد الألعاب البسيطة التي كثرت في الآونة الأخيرة المنشئة بتقنية HTML5 وتم عملها بواسطة مكتبة Processing.js بالتحديد الخاصة بعمل تطبيقات تفاعلية وعرض البيانات بشكل حركية رهيبة تشبه تقنية التطبيقات المنشئة بواسطة تقنية الفلاس.

إنشاء إضافة لمتصفح كروم

درس بسيط لكيفية إنشاء إضافة خاصة لمتصفح كروم

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

موقع إلهام: إلهام يومي للمصممين

موقع جديد يعرض عدة تصاميم كمصادر إلهام، موقع مفيد جداً للمصممين.

محاكاة لشكل الآيباد 3

مقطع رائع يُظهر شكل خيالي للأيباد 3 (أو المسمى الآيباد الجديد الذي صدر بالأمس)، صحيح أنه غير حقيقي ولكن يعطيني تخيل فكرة لجهاز الآيباد وتم عمل مقطع لمحاكاة شكل الآيفون 5 سابقاً تجدونه على قناة AatmaStudio في اليوتيوب.

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

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

أربح الآيباد الجديد مع سباق.نت

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

هكذا يقتل الإبداع

عدة أساليب تستطيع تقتل فيها الإبداع ومصيبة للإحباط في نفس الوقت!

Hacker Shelf

دليل رائع للكتب التي تهم كل مبرمج ومقسمة بشكل منظم.

مراجعة الجهاز اللوحي: The New iPad

مراجعة شاملة لجهاز الآيباد الجديد، وهناك ملخص آخر لمؤتمر أبل عن الآيباد الجديد تستطيع معرفة كامل تفاصيله.

روفيو تصدر الإعلان الرسمي لـ Angry Birds Space

النسخة الجديدة من لعبة Angry Birds والتي تحمل إسم Angry Birds Space وسيكون موعد توفرها في متجر التطبيقات في تاريخ 22 مارس القادم.

مرسيدس مخفية

إعلان رائع لسيارة مرسيدس تُظهر الإتجاه الآخر لمن يشاهدها.

مثال على كيفية تطبيق آبل لخصائص الحركة أو CSS Animations

إذا زرت صفحة جهاز iPhone 4s في موقع آبل فلابد أنك شاهدت طريقة عرض مميزات الجهاز وكل هذا بخصائص CSS3 والمتعلقة بالحركات أو Animations، تشرح هذه الصفحة بكل بساطة كيفية إجراء ذلك وتعطيك الصورة العامة لتطبيق هذه الحركة.

تعلم HTML5: أساسيات ودروس

مجموعة من المصادر المفيدة لتقنية HTML5 من البداية حتى تفاصيل مميزات تقنية HTML5.

HTML5 PLEASE API

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

Dirty Markup

تطبيق بسيط لتنظيم وترتيب شفرات HTML و CSS وJavaScript.

7 مصادر يجب أن يعرفها مطوري لغة Javascript

مجموعة من المصادر التعليمية سواء كانت مواقع أو بودكاست صوتي مفيدة جداً لمطوري لغة Javascript تساعدهم على معرفة آخر الادوات والتطورات المتعلقة بلغة Javascript.

أساسيات مكتبة jQuery

درس مبسط للمبتدئين الراغبين في تعلم jQuery حتى أصحاب المستوى المتوسط، ولكن بطريقة جميلة ومبسطة.

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

• تحميل المرفقات

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

Less CSS كأسلوب

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

المتغيرات Variables

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

@color: #000000;

h2 {
    color: @color;
}
.single-post p {
    color: @color;
}

ستكون تنيجة إستخدام المتغير بعد تحويل الشفرة إلى شفرة CSS:

h2 {
    color: #000000;
}
.single-post p {
    color: #000000;
}

الدوال Mixins

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

.rounded-corners (@radius: 5px) { /* القيمة الإفتراضية لمتغير radius */
    border-raduis: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    /* إستخدام المتغير عدة مرات لعدة خصائص */
}

#header {
    .rounded-corners;
}

#sidebar {
    .rounded-corners(10px);
}

#footer {
    .rounded-corners(15px);
}

ستكون نتيجة إستخدام دالة .rounded-corners بعد تحويل الشفرة إلى شفرة CSS:

#header {
    border-raduis: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

#sidebar {
    border-raduis: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

#footer {
    border-raduis: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
}

التداخل Nested Rules

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

.post {
    h2 {
        font-size: 26px;
        font-weight: bold;
    }

    p {
        font-size: 13px;
        a {
            text-decoration: none;
            &:hover { border-width: 1px }
        }
    }
}

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

.post h2 {
    font-size: 26px;
    font-weight: bold;
}

.post p {
    font-size: 13px;
}

.post p a {
    text-decoration: none;
}

.post p a:hover {
    border-width: 1px;
}

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

العمليات الحسابية Operations

العمليات الحسابية يمكن إستخدامها في أسلوب Less وقد لاتحتاجها دائماً، فيمكن إستخدام عملية الضرب والجمع والطرح في المتغيرات التي تحتوي على أرقام مثل الألوان. على سبيل المثال، لديك متغير بإسم @base-color وقيمته #111 واستخدمته في أحد أصداف CSS، وتريد إستخدامه في صنف آخر ولكن مع ضرب قيمة المتغير بالرقم 5 لكي تصبح قيمته #555، مثال على ذلك:

@base-color: #111;

body {
    background-color: @base-color;
}

#page {
    background-color: @base-color*5;
}

ستكون نتيجة إستخدام العملية الحسابية في الشفرة السابقة بعد تحويل الشفرة إلى شفرة CSS:

body {
    background-color: #111;
}

#page {
    background-color: #555;
}

الجمل الشرطية

يمكن إستخدام الجمل الشرطية في أسلوب Less مثل دالة if الشرطية الموجودة في لغات البرمجة، ولكن في أسلوب Less يتم إستخدام كلمة when بدلاً من if، فمثلاً لو أردت إستخدام متغير إفتراضي إسمه type في دالة ووضعت شرط إذا كان المتغير كان يساوي fast أضع له محتوى خاص للدالة أو كان يساوي normal أضع له محتوى آخر، مثال على ذلك:

.fast-reset (@type: fast) when(@type=fast)  {
	margin: 0;
	padding: 0;
}

.fast-reset (@type: fast) when(@type=normal) {
    margin: 0;
	padding: 0;
	border: 0 none;
	text-decoration: none;
	font-size: 100%;
}

ويمكن إستخدام الدالة مع تحديد قيمة type او حتى عدم تحديد قيمة type لأنه سيتم إستخدام القيمة الإفتراضية التي تم تحديدها، مثال على ذلك:

body {
	.fast-reset(fast);
}

ويتكون نتيجة إستخدام دالة fast-reset في الوسم body بعد تحويل الشفرة إلى شفرة CSS:

body {
	margin: 0;
	padding: 0;
}

طرق إستخدام Less CSS

هناك أكثر من طريقة لإستخدام هذا الأسلوب عبر عدة أدوات، والطريقة الأسهل هي عبر مكتبة less.js والتي يجب إرفاقها في صفحة HTML وإرفاق ملف style ولكن بصيغة less بدلاً من css لتصبح style.less وتضيف قيمة إلى عنوان الصفحة في متصفح الويب لمشاهدة الصفحة بالتنسيق المبني على مكتبة less.js.

لإستخدام مكتبة less.js، أضف هذه الشفرة إلى ملف HTML (في عنصر head بالتحديد):

<script type="text/javascript" src="https://lesscss.googlecode.com/files/less-1.2.2.min.js"></script>

بعد ذلك يجب إنشاء ملف بإسم style.less (أو بأي إسم تريده بشرط يكون بإمتداد less ويكون مربوط بصفحة HTML كما هو واضح في الشفرة السابقة) .. وأبدأ بكتابة خصائص CSS وتحديد الأوسمة والأصناف بإستخدام أسلوب Less CSS. هناك أدوات أخرى تعمل كتطبيقات سطح المكتب مثل أدوات الترجمة Compiling الخاصة لتحويل الشفرة المكتوبة بأسلوب Less إلى شفرة CSS:

WinLess (لنظام ويندوز)

SimpLESS (لنظام ويندوز/ماك/لينكس)

Less.app (لنظام الماك)

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

مثال عملي لإستخدام Less CSS

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

<script type="text/javascript" src="https://lesscss.googlecode.com/files/less-1.2.2.min.js"></script>

يمكن تحميل المكتبة مباشرةً من موقع المكتبة أو إستخدام رابط مباشر من عنوان المكتبة في موقع Google Code كما هو موجود في الشفرة السابقة، وبما أن إسم الملف المستخدم في الشفرة السابقة هو style.less سيتم إنشاء ملف جديد يحمل هذا الأسم للبدء بكتابة شفرة CSS ولكن بأسلوب Less، هذه الشفرة التي كتبتها بأسلوب Less لهذا المثال وتوجد تعليقات فيه لتوضيح عمل كل ما يتعلق بإستخدام قواعد هذا الأسلوب:

/* دالة خاصة لتصفير الأصناف والأوسمة
    وإستخدمت متغير type
    لتحديد طريقة التصفير */
.fast-reset (@type: fast) when(@type=fast)  { /* تصفير سريع */
	margin: 0;
	padding: 0;
}

.fast-reset (@type: fast) when(@type=normal) { /* تصفير مفصل */
    margin: 0;
	padding: 0;
	border: 0 none;
	text-decoration: none;
	font-size: 100%;
}

/* دالة لإستخدام الخطوط الخاصة بواسطة خاصية @font-face
    وستحتاج بعد ذلك لتحديد إسم الخط وعنوانه فقط وهذه الدالة ستكمل باقي العمل */
.font-face (@fontFamily, @fontUrlName) {
    font-family: @fontFamily;
        src: url("fonts/@{fontUrlName}.eot"); /* IE 9 */
    	src: url("fonts/@{fontUrlName}.eot?") format("eot"), /* IE 6-8 */
             url("fonts/@{fontUrlName}.otf") format("opentype"), /* Other browsers */
    	     url("fonts/@{fontUrlName}.ttf") format("truetype"); /* Safari, Android, iOS */
}

/* بعض المتغيرات الخاصة بالألوان وأنواع الخطوط لإستخدامها لاحقاً */
@bodyBackgroundColor: #f8f8f8;
@postBackgroundColor: #fff;
@normalWidth: 960px;
@fontColorForPostHeading: #720606;
@fontColorForBoxHeading: #823a00;
@fontColorForParagraph: #363a3c;
@fontTypeForParagraph: 'Droid Naskh Regular', Arial, sans-serif;
@fontTypeForHeading: 'Hacen Liner Screen', Arial, sans-serif;

@font-face { /* Upload Hacen Liner Screen */
    .font-face("Hacen Liner Screen", hacen_liner_screen);
    /* إستدعاء خط حسن */
}

@font-face { /* Upload Droid Naskh Regular font */
    .font-face("Droid Naskh Regular", droidnaskhregular);
    /* إستدعاء خط أندرويد */
}

body {
	.fast-reset; /* إستخدام التصفير السريع */
	direction: rtl;
	text-align: center;
    background-color: @bodyBackgroundColor;
}

/* دالة border-radius
    للحواف الدائرية */
.border-radius(@radius: 5px) { /* القيمة الإفتراضية */
	border-radius: @radius;
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
}

#wrap {
	text-align: right;

    /* بعض المتغيرات */
	@borderColor: #2d3a44;
	@padding: 10px;

	.small-box {

		background-color: #e2e3e4;
        h1 {
            margin: 0;
            font: bold 27px @fontTypeForHeading;
            color: @fontColorForBoxHeading; /* إشارة إلى قيمة متغير مكتوب سابقاً */
        }

	}

    .post {
        color: @fontColorForPostHeading;
        background-color: @postBackgroundColor;
        h2 {
            font: bold 27px @fontTypeForHeading; /* تحديد نوع الخط عن طريق قيمة متغير مكتوب سابقاً */
        }
    }

    .small-box, .post {
        .border-radius(10px); /* إستخدام دالة border-raduis للحواف الدائرية ولكن بقيمة أخرى */
        border: 1px solid @borderColor; /* إستخدام لون حدود عبر متغير مكتوب سابقاً */
        margin: 20px auto;
        width: @normalWidth; /* إستخدام متغير مكتوب سابقاً لوضع قيمة عرض الصنف */
        padding: @padding; /* إستخدام قيمة متغير مكتوب مسبقاً خاص بمسافة الصنف الداخلية */
        p {
			color: @fontColorForParagraph;  /* تحديد لون الخط عبر قيمة متغير مكتوب سابقاً */
            font: 14px/25px @fontTypeForParagraph; /* تحديد نوع الخط عن طريق قيمة متغير مكتوب سابقاً */
		}
    }
}

بعد الإنتهاء من كتابة الشفرة السابقة وحفظ الملف إفتح صفحة HTML في متصفح الويب مع إضافة هذه القيمة #!watch إلى نهاية عنوان الصفحة وفتح الصفحة من جديد لمشاهدها بتنسيق CSS الذي قمت بكتابته بأسلوب Less .. هذه شفرة CSS كاملة بعد كتابتها في ملف style.less:

@font-face {
  font-family: "Hacen Liner Screen";
      src: url("fonts/hacen_liner_screen.eot"); /* IE 9 */
      src: url("fonts/hacen_liner_screen.eot?") format("eot"), /* IE 6-8 */
           url("fonts/hacen_liner_screen.otf") format("opentype"), /* Other browsers */
           url("fonts/hacen_liner_screen.ttf") format("truetype"); /* Safari, Android, iOS */
}
@font-face {
  font-family: "Droid Naskh Regular";
      src: url("fonts/droidnaskhregular.eot"); /* IE 9 */
      src: url("fonts/droidnaskhregular.eot?") format("eot"), /* IE 6-8 */
           url("fonts/droidnaskhregular.otf") format("opentype"), /* Other browsers */
           url("fonts/droidnaskhregular.ttf") format("truetype"); /* Safari, Android, iOS */
}
body {
  margin: 0;
  padding: 0;
  direction:rtl;
  text-align:center;
  background-color:#F8F8F8;
}
#wrap {
  text-align:right;
}
#wrap .small-box {
  background-color:#E2E3E4;
}
#wrap .small-box h1 {
  color:#823A00;
  font-family: bold 27px 'Hacen Liner Screen', Arial, sans-serif;
  margin: 0;
  padding: 0;
}
#wrap .post {
  background-color:#FFFFFF;
  color:#720606;
}
#wrap .post h2 {
  font: bold 27px 'Hacen Liner Screen', Arial, sans-serif;
}
#wrap .small-box, #wrap .post {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border: 1px solid #2D3A44;
  margin: 20px auto;
  padding: 10px;
  width:960px;
}
#wrap .small-box p, #wrap .post p {
    color:#363A3C;
    font: 14px/25px 'Droid Naskh Regular', Arial, sans-serif;
}

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

مقطع فيديو توضيحي

هذا مقطع فيديو قصير يوضح كتابة الخصائص والأوسمة والأصناف بأسلوب Less ونتيجة العمل كشفرة ِCSS صحيحة. (يفضل مشاهدته بصيغة 480p أو صيغة 720p أو رؤية المقطع في موقع يوتيوب)

أدوات أخرى مشابهة لأسلوب Less CSS

أدوات Less CSS ليست الوحيدة التي التي تختصر الوقت على المطور في كتابة الشفرات في تقنية CSS، بل يوجد أداة أخرى مشابهة مع إختلاف طريقة كتاباته قليلاً عن Less CSS وهي أداة Sass وتحتاج إلى تنصيب لغة Ruby في الجهاز (إذا كنت من مستخدمي نظام ويندوز) ويتم تحميله عبر سطر الاوامر من موقع GitHub .. وأرى أن Less CSS أسهل من ناحية التنصيب فيمكن إستخدام لغة Javascript أو الأدوات التي وضعتها في الأعلى.

هناك أداة أخرى وهي لغة CoffeeScript (أو أداة CoffeeScript) تعمل بنفس النهج الموجود في Less CSS ولكنها مخصصة للغة Javascript وتقوم بترجمة أو تحويل الشفرة المختصرة إلى شفرة Javascript وتساعد المطور على كتابة شفرات أقل والإعتماد على الأداة في تجنب الأخطاء التي يمكن أن تقع فيها لو بدأت الكتابة بلغة Javascript بدون مساعدة أي مكتبة أخرى وتعتمد على الإختصارات في كتابة العديد من أجزاء لغة Javascript مثل إختصارات معينة في سطر واحد لكتابة الدوال، الكائنات والمصفوفات وغيرها .. يمكنك قراءة معلومات أخرى عن CoffeeScript في موسوعة ويكيبيديا.

• تحميل المرفقات

كيف يبدو مكان عملك؟

مجموعة من صور ملهمة لمكاتب مرتبة بطريقة جميلة وتشجع على العمل .. قد تكون الصور المعروضة مصيبة للإحباط لمن يود مقارنة المكاتب الموجودة بمكتبه الحالي

احذرى يا أبل ان ترتكنى على إنجازاتك!

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

أرقى وأجمل الأعمال الفنية لسيد الخلق رسول الله

عدة تصاميم جميلة عن الرسول صلى الله عليـه وسلم.

شركة ألعاب عالمية تستحوذ على موقع كملنا بقيمة تتجاوز 10 مليون دولار

من أحد الأخبار المفرحة والتي تبشر بالخير لسوق الإنترنت في العالم العربي كان خبر إستحواذ شركة Peak Games على لعبة كمِّلنا العربية المشهورة بمبلغ تجاوز 10 مليون دولار .. هذا الخبر محفز لأصحاب مشاريع الويب العربية للإستمرار ولمن يود دخول ريادة الأعمال المتعلقة بسوق الإنترنت.

الـقـوة للـجـمـهـور

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

إقتباسات الدكتور إبراهيم الفقي رحمه الله

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

محاكاة لتصميم جهاز آيفون 5 القادم

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

كيف تستخدم تويتر بفعالية؟

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

The Pirate Bay يواجه الحجب في بريطانيا

خبر آخر يخص مواقع البحث عن ملفات التورنت والمتعلقة أيضاً بقانون SOPA الذي أحدث ضجة في الشهر الماضي فقد واجه موقع The Pirate Bay الحجب في بريطانيا ولكن لا أظن أن هذا الشيء سيؤثر عليه ولا على مواقع التورنت الأخرى لأن أسلوب الحجب أصبح من الماضي وبسهولة يستطيع الشخص تخطي الحجب ولكن المشكلة إن تعرض أصحاب مثل هذه المواقع للمضايقات والقبض عليهم كما تستخدم السلطات الأمريكية هذا الأسلوب مع مثل هذه المواقع.

الدروس العشر المستفادة من تجربة بيل غيتس في الأعمال

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

آبل تعلن عن نظرة لنظام Mountain Lion للماك

تحسين لنظام Lion الخاص بأجهزة الماك بمميزات فريدة خصوصاً الموجودة على نظام iOS 5 وأرى أنه يجب أن تتمتع أجهزة الماك بمميزات iOS 5 خصوصاً خدمة iMessage التي طرحت بشكل تجريبي لمستخدمي الماك وهذا ما سيكون موجود في نظام Mountain Lion القادم.

معرض شعاري

موقع جديد خاص بالشعارات في بداية الطريق.

أفضل 10 مواقع مخصصة للإجابة عن الأسئلة

مجموعة من المواقع المتخصصة في الإجابة على الأسئلة (أي نوع من الأسئلة) باللغة الإنجليزية، شخصياً أفضل الموقع الأخير وكانت بدايته قوية وهو موقع Quora.

أفضل إستخدامات ميزة الحركة في تقنية CSS3

مجموعة أمثلة لأحد أهم مميزات تقنية CSS3 وهي CSS3 Animation والتي يمكن إستخدامها في تقنية HTML5.

26 درس جديد من سنة 2011 خاص بتقنية CSS3 ومكتبة jQuery

مجموعة من الدروس الجديدة التي كتبت منذ بداية هذه السنة خاصة بتقنية CSS3 ومكتبة jQuery.

محاكاة لتحريك الخلفية بطريقة رائعة

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

Don’t Break the Web

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

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

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

المتصفحات الداعمة لهذه الخاصية

لحسن لحظ مستوى دعم المتصفحات لهذه الخاصية جيدة (خصوصاً لمستخدمي متصفح الإكسبلورر) فهو يدعم خاصية face‪-‬font منذ الإصدار الرابع! إلا أن بقية المتصفحات تدعم هذه الخاصية في الإصدارات الحديثة .. هذه مجموعة من المتصفحات الداعمة للخاصية:

• متصفح سفاري/محرك Webkit: يدعم خاصية font-face منذ الإصدار 3.1، الصيغ المدعومة هي ttf وotf (إخصار لصيغة TrueType وOpenType) أما متصفح سفاري الخاص بنظام iOS فيدعم صيغة SVG لإصدارات iOS القديمة إلى الإصدار 4.1، أما الإصدار 4.2 وما فوق فيدعم ttf وotf.
• متصفح أوبرا: يدعم خاصية font-face منذ الإصدار العاشر (الإصدار 9.7 من Opera Mobile)، الصيغ المدعومة هي ttf وotf وSVG.
• متصفح الإكسبلورر: يدعم صيغة font‪-‬face منذ الإصدار الرابع، ويدعم صيغة eot فقط وصيغة WOFF (منذ الإصدار التاسع).
• متصفح فايرفوكس: يدعم خاصية font‪-‬face منذ الإصدار 3‪.‬5، ويدعم صيغة ttf وotf وWOFF (منذ الإصدار 3‪.‬6).
• متصفح جوجل كروم: يدعم خاصية font‪-‬face منذ الإصدار الرابع، ويدعم صيغة ttf وotf وWOFF (منذ الإصدار السادس) .. إلا أن الخاصية معطلة بشكل إفتراضي ويجب على المستخدم أن يوافق أو يدعم خيار font‪-‬face لكي تعمل على المتصفح وذلك لأسباب أمنية من طرف جوجل.

صيغة True Type و Open Type

هناك عدة صيغ يمكن إختيارها في عرض الخطوط على صفحات الويب مثل EOT وTTF وOTF وWOFF وغيرها، وجميعها صيغ مختصرة لنوع الخط فأكثر الأنواع التي تستخدم هي TrueType وOpenType ويمكن معرفة لمحة تاريخية لكل منهم ومتى بدأ إستخدام هذه الأنواع.

• ‏TrueType: تم تطوير هذا النوع من الخطوط من قبل شركة آبل أول مرة وتبنتها شركة مايكروسوفت بعد ذلك في نظام تشغيلها ويندوز (بدايةً من Windows 3‪.‬1)، وأشهر الخطوط العالمية تستخدم هذا النوع من الخطوط.
• OpenType: تم تطوير هذا النوع من الخطوط من قبل شركة مايكروسوفت ثم إنضمت شركة أدوبي لتطويره في نهاية التسعينات من القرن الماضي وتم إنتاج العديد من الخطوط بهذه الصيغة مع بداية الألفية، ويتميز هذا النوع بدعم أكثر من منصة وإمكانية ظهوره بشكل جيد عند الطباعة وإمكانية إدراج عدد كبير من الحروف للخط الواحد.

صيغة OpenType مدعومة أكثر في متصفح الإكسبلورر بدايةً من الإصدار الرابع حتى الإصدار الأخير، أما TrueType فمستخدم في في بقية الإصدارات والأنظمة (يشمل نظام Android و iOS).

تحويل الخط لعدة صيغ لتتناسب مع متصفحات الويب

إذا رغبت بإستخدام خط مناسب للنصوص فلن تجده بأكثر من صيغة (مثل صيغة OpenType وWOFF وSVG) إلا الخطوط المشهورة (من الخطوط الإنجليزية) إلا أن توفيره بعدة صيغ أصبح ممكنا مع توفر أدوات جديدة في كل فترة.

تطبيق Font Squirrel

أحد هذه الأدوات هو تطبيق Font Squirrel (تطبيق ويب). يمكن إصدار عدة صيغ لخط موجود لديك في الجهاز عبر هذا التطبيق إلا أنه لا يدعم العربية ولكن صاحب التطبيق لديه رغبة في دعم الخطوط العربية عن طريقه.

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

لفهم الخصائص الموجودة قبل الإصدار أنصحك بمراجعتها عبر مقالة عن خاصية font‪-‬face في موقع Smashing Magazine.

تطبيق FreeFontConverter

أحد تطبيقات الويب التي تقوم بتحويل الخط الجهاز إلى خط مستخدم لصفحات الويب بأي صيغة تريدها مثل ttf (TrueType) و otf (OpenType) وقد دلني على هذا الموقع الأخ نواف حريري وهو صاحب عدة مشاريع مفيدة وجميلة في نفس الوقت ومنها تطبيق مصاريف وقد إستخدم هذه الأداة في إستخدام أحد خطوط حسن في موقع التطبيق ويظهر خط Hacen Liner Screen في المتصفح بشكل جميل جداً خصوصاً لمسخدمي نظام الماك.

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

تطبيق Font2Web

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

مثال عملي: إستخدام خط خاص في تنسيق النصوص

هذا مثال بسيط على كيفية إستخدام خاصية font‪-‬face في إستخدام خطوط مرفقة لصفحة الويب. سأستخدم خطين واحد للعناوين والثاني للفقرات وهما خط K Kamran وخط Hacen Liner Screen (ستجدهم مع المرفقات)، خط K Kamran من الخطوط الجميلة التي تشبه خط الكتابة باليد إلا أن إستخدامه كخط ويب قد لا يكون مناسباً عند البعض وفأغلب إستخداماته للصور ولكن يظهر لي في المثال بشكل جيد كوني أستخدم نظام الماك.

قبل إستخدام الخطوط في صفحة HTML، سأحتاج إلى تحميل الخط على تطبيق Font Squirrel تطبيق FreeFontConverter لتحويله إلى الصيغ المطلوبة (ttf و otf) وكذلك إستخدام تطبيق Font2Web (للحصول على صيغة eot الخاصة بمتصفح الإكسبلورر)، بعد تحميل الخطوط ونقلها بجانب صفحة التي تود إستخدام الخطوط فيها أو في ملف القالب عموماً أو في ملف بإسم fonts (بالطريقة التي تريدها) لإستخدامه في ملف CSS عبر خاصية @font-face.

يمكنك تسميه الخط بالإسم الذي تريده أو بإسمه الحالي (عبر إستخدام خاصية font-family)، شفرة HTML ستكون عبارة عن عرض لأول موضوع كتبته في سلسلة حسن مهاراتك في التدوين في المدونة، فقط سأستخدم بعض العناوين والفقرات في الصفحة فلا يوجد رأس للصفحة وقائمة جانبية، شفرة HTML في بداية قبل كتابة أي شيء:

<!Doctype>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta charset="utf-8" />
	<title>مثال على إستخدام الخطوط</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!-- Wrap -->
<div id="wrap">

	<!-- Article -->
	<div class="article">

	<!-- Your Content -->

	</div>
	<!-- /Article -->

</div>
<!-- /Wrap -->
</body>
</html>

جميع النصوص ستكون ضمن العنصر الذي يحمل الصنف article.، وبعد كتابة العناوين والفقرات يأتي التنسيق عبر تقنية CSS. طبعاً سأذكر فقط التنسيقات المهمة والمتعلقة بالدرس وإستخدام الخطوط، ونستخدم خاصية ‪@‬font‪-‬face في تنسيق CSS على هذا النحو:

/* إستدعاء خط K Karman */
@font-face {
	font-family: "K Karman";
        src: url("fonts/k_kamran.eot"); /* IE 9 للإصدار التاسع من متصفح الإكسبلورر */
    	src: url("fonts/k_kamran.eot?") format("eot"), /* IE 6-8 من الإصدار السادس حتى الثامن من متصفح الإسكبلورر */
             url("fonts/k_kamran.otf") format("opentype"), /* Other browsers للمتصفحات الأخرى */
    	     url("fonts/k_kamran.ttf") format("truetype"); /* Safari, Android, iOS للمتصفحات الهواتف وبقية المتصفحات الحديثة */
}

/* إستدعاء خط Hacen Liner Screen */
@font-face {
	font-family: "Hacen Liner Screen";
        src: url("fonts/hacen_liner_screen.eot"); /* IE 9 للإصدار التاسع من متصفح الإكسبلورر */
        src: url("fonts/hacen_liner_screen.eot?") format("eot"), /* IE 6-8 من الإصدار السادس حتى الثامن من متصفح الإسكبلورر */
             url("fonts/hacen_liner_screen.otf") format("opentype"), /* Other browsers للمتصفحات الأخرى */
             url("fonts/hacen_liner_screen.ttf") format("truetype"); /* Safari, Android, iOS للمتصفحات الهواتف وبقية المتصفحات الحديثة */
}

ملاحظة: تم إستخدام مجلد خاص بالخطوط بإسم fonts، يمكن وضع الخطوط في نفس مسار ملف css لو أردت .. إستخدمت مسار المجلد fonts فقط في الدرس ويفضل ذلك لترتيب ملفات القالب.

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

الآن سأتي دور تنسيق العناوين والفقرات وإستخدام الخطوط بكل سهولة عبر تحديد الخط الذي تم تحميله عبر خاصية font-family أو خاصية font:

/* إستخدام خط Hacen Liner Screen */
.article h1 {
	font: bold 26px 'Hacen Liner Screen', arial, sans-serif;
}

/* إستخدام خط Hacen Liner Screen */
.article h2 {
	font: bold 20px 'Hacen Liner Screen', arial, sans-serif;
}

/* إستخدام خط K Karman */
.article p {
	font: 22px/26px 'K Karman', arial, sans-serif;
}

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

نتيجة الدرس

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

مصادر وتفاصيل أكثر عن خاصية font-face

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

خاصية ‪@‬font‪-‬face وحيل مفيدة لخطوط الويب

دعم المتصفحات لخاصية ‪@‬font‪-‬face

خطوط CSS3 (من موقع W3C)

دورة مجانية لتعلم مكتبة jQuery في شهر واحد

دورة مجانية جديدة لتعلم مكتبة jQuery في شهر واحد بحيث يتم إرسال مقطع تعليمي جديد كل يوم، وهي من أحد مواقع شبكة tuts+ المشهورة في تقديم محتويات ودروس مميزة في التصميم والتطوير المواقع وتطبيقات الهواتف بتفاصيلها.

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

هل الحرية المطلقة خطر يهدد تويتر؟

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

13% من مطوري BlackBerry تجاوزت أرباحهم 100 ألف دولار

خبر لأحد المؤتمرات المطورين التي أقامتها شركة RIM المالكة لأجهزة BlackBerry توضح تفوق سوق التطبيقات الخاص بها على سوق تطبيقات الأندرويد من ناحية الكسب المادي للمطورين حيث 13% من المطورين تفوق أرباحهم 100 ألف دولار أمريكي .. من وجهة نظري أرى أنها نتائج مبشرة لمطوري أجهزة BlackBerry أو من يود الدخول لتطوير تطبيقات BlackBerry إلا أني أعتقد أنه لن يصل هذا السوق إلى ما وصلت إليه سوق تطبيقات نظام iOS من ناحية سهولة الوصول إلى السوق وتوضيح طريقة الدفع للمطورين والإعتماد على طريقة ثابتة لتطوير أجهزة مختلفة لنظام واحد (مثل أجهزة الآيفون مختلفة الإصدارات مع إختلاف إصدارات نظام iOS يعتمد على طريقة واحد للتطوير متوافقة مع جميع إصدارات الأجهزة والنظام) مع أن سوق تطبيقات iOS أكثر صرامة من غيره من ناحية شروط الموافقة على التطبيقات.

مقارنة بين لعبة مبنية على تقنية HTML5 أخرى مبنية على تقنية الفلاش

مقارنة بين لعبتين (لعبة Angry Birds ولعبة Bloons) الأولى مبنية على تقنية HTML5 (نسخة الويب) والأخيرة مبنية على الفلاش، وتظهر المقارنة عدد اللاعبين ونسبة التوافقية وعدد الملفات المستخدمة في البرمجة و دعم المتصفحات ونسبة الأمان .. جميع العوامل السابقة تشير إلى أنه ما زال الفلاش يمتلك النسبة الأكبر من الألعاب الموجودة في الويب والتفوق الذي أراه يمكن أن يؤثر على إعتماد تقنية HTML5 هو أن لعبة الفلاش تحتاج إلى ملف واحد لكي تعمل والمكونات البرمجية للعبة الفلاش مشفرة عكس مكونات لعبة HTML5 التي يمكن مشاهدتها من المتصفح (عن طريق View Source).

+20 مخطوطة عربية جميلة وعصرية

تصاميم جميلة جداً تعرِض إستخدامات الخطوط العربية بطرق مختلفة وهي لعدة مصممين مبدعين.

خلفيات شهر فبراير

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

موقع WP-SNIPPETS

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

تطبيق ProCSSor لمطوري المواقع

تطبيق مخصص لتنظيف ملفات CSS وترتيب الخصائص فيها مقدم من شركة Batoul Apps.

قابلية الاستخدام للمواقع !

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

أفضل 20 لعبة HTML5

عرض لأفضل 20 لعبة مبرمجة أو محولة إلى نسخة HTML5.

مميزات جديدة لمطوري المواقع في متصفح فايرفوكس

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

لعبة 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 مقال ملهم لإستخدام فن التيبوغرافي في تصميم الويب

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

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

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

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

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