1280_800

هدية شهر رمضان – مبارك عليكم الشهر

السلام عليكم ورحمة الله وبركاته

أود بالبداية أن أهنئكم بحلول شهر رمضان المبارك أعاده الله علينا وعليكم باليمن والبركات :)
في هذه التدوينة هدية متواضعة للشهر المبارك وهي خلفية شاشة رمضانية
حيث تم تصميمها لمعظم أحجام الشاشات سواء موبايل، تابلت، لاب توب أو دسكتوب

.

.

صورة الخلفية

.

.

1280_800

.

.

الخلفية على جهازي

.

.

Screen shot 2013-07-07 at 6.56.00 PM

.

.

صورة لخلفية الشاشة على عدة أجهزة

خلفية شهر رمضان المبارك

iphone_5_frontalالخلفية على جهاز ايباد

لتحميل الخلفية إختر الحجم الذي يناسب جهازك

1024*768

, 1280*800

, 1366*768

, 1440*900

, 1680*1200

, 1920*1080 ,

GalaxyS2

GalaxyNote

, iPhone 4

, iPhone 5

, iPad

.

.

إذا اعجبتك الخلفية فضلاً قم بمشاركتها مع أصدقائك :)

تحياتي لكم وإنتظروني في هدية أخرى لشهر رمضان ايضاً

Screen shot 2013-04-25 at 8.08.30 AM

Processing | للمصممين والمبرمجين

تدوينة اليوم بدي أحكي عن تطبيق مميز، وأعجب فيه كل من شافه

إسمو Processing، بإختصار هو تطبيق بساعد الناس اللي ما عندها أساسيات بالبرمجة

زي طلاب الجرافيك دزاين مثلا، أو الرسامين، وغيرو.. إنه يكتبوا كود لأشياء تخيلوها 

مثلاً ممكن أعمل تمثيل بصري لمعلومات (Visualizing) بشكل تفاعلي

للمبرمجين التطبيق بستخدم Syntax شبيه بلغة جافا، وسهل وما في أي تعقيدات

والجميل بالموضوع بتقدر تكتب كود كامل من دون ما تغلب حالك بـ Class أو Main Function

ما عليك غير تكتب Methods وتشغل الكود! :)

أثناء البحث عن التطبيق، شفت إنه مصمم من أمريكا طلبوا منو يعمل

 تمثيل بصري (Visualizing)لضحايا 11 سمبتمر في امريكا،

عددهم كان 3000 شخص!

من المستحيل إنه يتم تصميم هالمشروع عالإليستراتور أو الفوتوشوب، لازم يكون هناك حل مميز

وهون عمنا Processing حل المشكلة :)

إذن التطبيق بحل العديد من المشاكل، وبوفر علينا وقت وجهد،

رح أعرفكم بالبرنامج مع مثال بسيط جداً..

بالبداية بدك تدخل هون عشان تنزله ،

بدعم الماك والوندوز واللينوكس..

زي ما شايفين بالصورة في عنا صندوق للأدوات، وتحت في المكان الي بنكتب فيه الكود

وعنا Message Area، في حال خربشنا بالكود وطلع Error لا سمح الله :P

أول كود إلك على Processing

حالياً إنت شغال على Processing Development Enviroment أو (PDE)

أكتب الكود التالي:

عشان تعمل تشغيل للكود إضغط على زر Play

رح يرسملنا دائرة إرتفاعها 80 وعرضها 80، ورح يبلش يرسم من المنتصف عند النقطة 50

في حال كان الكود غلط، رح يعطيك رسالة بلون أحمر زي الصورة

من المشاكل اللي بواجهها الأغلب بس بدو يتعلم برمجه هي الإلتزام بالـ Syntax

يمكن تطبيق Processing مش ذكي لدرجة إنه يحل أخطائك البرمجية،

لكن بضله أسهل من باقي اللغات، ما في أي تعقيد أبداً

خلينا نشوف كود آخر على Processing

الشكل اللي بالصورة مبين إنه صعب نعمله صح؟

ببساطة أول اشي بنعمله إنه بنحدد حجم الـ window اللي رح تطلعنا،

عن طريق Method إسمها setup

بعدها بنعمل كمان Method وبنخليه يرسم دائرة بيضا مع حد أسود،

إذا ضغطنا بالماوس رح يرسم الدائرة بلون أسود

mouseX,mouseY

بتعني إحداثيات الماوس عنا، كل ما أحرك الماوس رح يرسم Ellipse في المكان الموجود المؤشر

 

في حال خلصت من الكود، بتقدر تعمله إخراج زي ما بالصوره

أمثلة على تمثيل بصري بإستخدام Processing 

إذا حبب تعرف كيف إنعملت الشغلات اللي فوق، تفضل هون

عجبك التطبيق؟ إذا نعم هون في روابط لكتب مميزه لو حابب تتعمق فيه :)

 

  

وإذا عجبتك التدوينة شاركها مع أصدقائك :)

شكراً للمتابعة

facebook-logo-comparison copy

رسمياً: شعار جديد للفيسبوك

.

.

يمكن مش الكل لاحظ، بس فيسبوك رسمياً قامت بتعديل على شعارها

 وتحديثه لإطلاق شعار جديد لأول مرة منذ سنوات..

.

.

حالياً الشعار تم إلغاء الخط الازرق الصغير منه، اللي بكون تحت حرف F

حرف F صار على طول المربع الأزرق

.

.

.

.

بالنسبة للأيقونات كل أيقونة صارت عبارة عن لون ابيض ومربع أزرق،

حسب رأيي هيك أحسن لإنه الـ Flat Design صار شائع هالأيام .. بسيط خفيف مريح للعين

وما بكلف المستخدم ولا المصمم :)

.

.

المصدر

css

CSS مش سهلة

.

.

بحكم دراستي وتخصصي , سمعت عدة مرات من طلاب أن لغة الـ CSS هي سهلة وكلها “شوية كلمات”..

أو بتسمع بعض الطلاب بيحكوا أنا خلصت الـ CSS وحالياً مبلش جافا سكربت وبالمقابل بكون مستواه ضعيف وما بقدر يحول تصميم احترافي لـ CSS

الـ CSS مش سهلة أبداً، صحيح إنه الـ syntax الخاص فيها بسيط جداً، بس ذلك لا يعني إنه سهل

نحوياً .. الـ CSS سهلة! كيف؟

نعم، سهلة جدا لإنه الـ Syntax الخاص فيها بعتمد على كلمات انجليزية بسيطة..

ومن بساطتها بنقدر نلخصها بـ 3 كلمات ( Selector , Property , Value )..

يعني طفل عمره 8 سنين بقدر يبرمج CSS من دون غير ما نشرحله شو يعمل،

حتى الـ HTML أكثر تعقيداً من الـ CSS ( من ناحية الـ syntax )،

لإنه مثلا في عنا Tags بالـ HTML بدهم تسكير و Tags تانية ما بلزمها تتسكر،

أو في Tags إلها Attributes، وTags تانية ما إلها.. فالشغلة بتخربش أحياناً..

أما بالنسبة للـ CSS فهي دائما نفس الـ Syntax، زي ما بالصورة

.

.

.

.

والجميل فيها إنه البرمجه فيها بتكون مفهومة، فمثلاً لما تحكي Color:red;

ببساطة يعني بدي ألون عنصر معين بلون أحمر!

لغة متطورة بشكل مستمر

المشكلة بالـ CSS إنه هي لغة بتتطور وبتتغير بشكل دائم، تم إنشائها بعام 1994 ( إن لم يخب ظني )

يعني تقريباً 20 سنة، بعد 3 إصدارات رئيسية ( CSS1, CSS2, CSS2.1 )

عشان تتعلم CSS منيح، ما بكفيك أبداً تتعلم الأساسيات، لإنها مش كافية.

الشغلات اللي تعلمناها قبل سنتين بالـ CSS , بهالوقت بتصير غير مجدية!

ونفس الاشي الشغلات الي بنتعلمها حالياً، بعد سنتين كمان رح تصير غير مجدية، عشان هيك

لازم المطورين يكونوا مواكبين لأي تطور بصير فيها، ويقتنصوا الفرصة ويتعلموا بسرعه :)

لغة معتمدة على المتصفح

الـ CSS هي لغة يتم عمل Compile لها على متصفح الانترنت، يعني Client Side..

صحيح إنه الـ HTML والـ JavaScript بعتمدوا عالمتصفح، بس إذا كنت تستخدم عناصر من الـ HTML5،

  في حال كان الكود المكتوب Valid، ما رح تلاقي مشاكل من متصفح لمتصفح تاني..

الـ JavaSrcipt فيها مبدأ من الـ CSS ,

إنه تشغيل الكود بعتمد على نوع الـ JavaScript الموجود بالمتصفح، فمثلاً IE9 بستخدم Chakra،

وبيستخدم SpiderMonkey للفايرفوكس..

على كل حال إذا بدك تكتب كود CSS متناسب مع كل المتصفحات،

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

.

.

كلمة أخيرة

الـ CSS مش سهلة،

مش إذا كان الـ Syntax سهل يعني اللغة سهلة!

.

.

المصدر

Screen shot 2013-03-13 at 10.06.01 PM

شعار مدونة أراجيك Arageek

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

فكرة الشعار هي جمع حرف a وحرف g لينتج حرف واحد يعبر عن أراجيك ، وتم إختيار المربعات الصغيرة لإنها تعبر عن العالم الرقمي

وهكذا نجمع بين أراجيك والعالم الرقمي..

.

.

التصميم التالي يوضح الشعار وكيف تم إختيار الفكرة وبعض التطبيقات الهامة

.

.

.

.

إذا أعجبكم العمل أرجوا أن تذهبوا هنا

وتضغطوا على زر appreciate this في نهاية التصميم

.

.

شكراً لكم :)

Screen shot 2013-02-18 at 8.17.51 PM

Flutter التطبيق الأعجوبة !

بسم الله الرحمن الرحيم

.

.

.

.

سأتحدث اليوم عن تطبيق أذهلني عندما جربته للمرة الأولى ، فكرته رهيبة جداً بلا مبالغة!

إسم التطبيق هو Flutter

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

.

.

.

.

كما ترى في الصورة أعلاه ، يوجد عدة حركات

تستخدم هذه الحركات مع مشغلات الموسيقى أو الفيديو مثل iTunes , VLC وأيضاً يدعم Youtube عن طريق إضافة لمتصفح Google Chrome

يمكن أيضاً إستخدم التطبيق في حال كان لديك عرض PowerPoint ، وهذا الإستخدام مهم جداً

.

.

* الحركة الاولى من اليسار هي إيقاف او تشغيل مشغل الموسيقى او الفيديو

* الحركة الثانية للذهاب إلى التالي ، وعكس ذلك في الحركة الثالثة

.

.

” لما كنت أجرب بالبرنامج وأحرك في إيدي إستغربت إمي وحكتلي شو بتعمل؟..حكيتها هيك هيك ..قالت : هاي كلها إشعاعات بتضرك! “

ما حدا يجرب التطبيق قدام إمه لو سمحتوا :P

.

.

متشوق لتجربة التطبيق ؟

حمله من هنا https://flutterapp.com/

إذا أعجبتك التدوينة فضلاً شاركها مع أصدقائك :)

.

.

شكراً لكم

Screen shot 2013-02-17 at 8.40.06 PM

[ إنفوجرافيك ] 30 شيئاً يجب عليك فعلها لنفسك – عربي

بسم الله الرحمن الرحيم

.

.

إنفوجرافيك باللغة العربية لمدونة تختص بتطوير الذات

وتتحدث عن 30 شيئاً يجب عليك فعلها لنفسك :)

المصدر : هنا

النسخة الإنجليزية : هنا

مشاهدة ممتعة :)

.

.

.

.

شكرا لكم

إذا أعجبتك شاركها مع أصدقائك :)

Screen shot 2013-02-16 at 10.20.03 PM

[ إنفوجرافيك ] 30 شيئاً يجب عليك فعلها لنفسك – إنجليزي

بسم الله الرحمن الرحيم

.

.

إنفوجرافيك باللغة الإنجليزية لمدونة تختص بتطوير الذات

وتتحدث عن 30 شيئاً يجب عليك فعلها لنفسك :)

المصدر : إضغط هنا

النسخة العربية : هنا

مشاهدة ممتعة :)

.

.

.

.

شكرا لكم

إذا أعجبتك شاركها مع أصدقائك :)

coffee-cups

مجموعة أيقونات مميزة لمصممي الويب

بسم الله الرحمن الرحيم

.

.

مجموعة رقم ( 1 )

.

.

.

.

حمل من هنا

.

.

المجموعة رقم ( 2 )

.

.

.

.

حمل من هنا

.

.

المجوعة رقم ( 3 )

.

.

.

.

حمل من هنا

.

.

المجموعة رقم ( 4 )

.

.

.

.

حمل من هنا

.

.

المجموعة رقم ( 5 )

.

.

.

.

حمل من هنا

.

.

شكراً لكم :)