/Blaze Boy/

ibn taymyah Logo design

2012-01-26T16:36:00.002+02:00

logo philosophy :

The logo icon is a rectangle that represents the software; beautiful secure and consistent as the

rectangle geometric properties. The small symbol inside it represents the software building unit and also

represents the Arabic character that reflects the company's roots

logo lifetime :

the company is a getting started start-up by Egyptian talented developers who aim to develop application with new creative ideas.

the logo colors and idea came after long research time about the relation between design elements and software industry, it also required a high effective visual impact and unique elements.

the "Taa" Arabic character has the visual characteristics to be a strong global symbol in conjunction with the square.

the final logo creates the effect of organisation and beauty in the same time.

logo time:

project took around 1 week to search and design and enhance

Creating a browser with Mozilla XUL

2012-01-02T10:07:00.000+02:00

who didn't hear about the XUL technology and the XUL runner ?
alright i know it is not that famous i think, it is very important and you may use it every day.

the XUL technology is the tech behind applications like :

firefox
thunderbird
songbird
sunbird

alright, now you know how it is very important.

The paradigm
XUL is an XML files that form the application GUI, a standard set of tags and attributes made by mozilla team,
the GUI component is rendered into a native system GUI.
for scripting the GUI you'll use javascript (surprised?), so now application is XML+Javascript,
another thing : you know that javascript doesn't read and write files, they did extend the javascript by components called XPCOM, that can handle SQLight, files, sockets...etc.

now let's see a XUL example of a browser window :

see ? very simple GUI of a browser inside a widow, but the file in the predefined application skeleton and you are done with a new brand browser of you own.

for more information about XUL : XUL Reference - MDN
how to deploye it into a standalone application : Deploying XULRunner - MDN

Dare 'n' Deal Offers and Andrea Restaurant

2011-12-22T09:59:00.002+02:00

yesterday we celebrated finishing our first products with my new team, bought 7 tickets from dare 'n' deal website offers us to have a low price service , the offer is great and we like it Andrea restaurant is a beautiful place, except one thing that we hate.

we bought 7 tickets to use them for 5 guests but the restaurant told us we can't use 7 tickets for 5 guest, only 1 ticket per guest

the funny thing is that we called the restaurant before reserving the tickets and they said it's OK to buy 7 tickets and use them for 5 guests, but at the restaurant their decision changed dramatically.

also there is a bad behavior we noticed from the waiter, the tickets doesn't include Nile tour , so every 15 minutes he come and remind us that the Nile tour will start 7:30, "ok we knew it, we did knew that the tour will start 7:30"

also about the food, which is the main discussion here, the food was not as we expected, grilled dished was too grilled, actually was half ashes half burned, and some main dished wan't well done like rice with shrimps.

at last, thank you Andrea for your great hospitality, we'll come again (in the next life).

Simply Explained

2011-12-12T08:00:00.000+02:00

Simply Explained:

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

2011-11-25T13:04:00.000+02:00

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

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

ردة الفعل

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

أوج الشهرة

ما كان لأحد أن يعرف أو يسمع باسم جوناثان أبرامز لو أنه توصل إلى اختراع شيء بسيط في الحياة الواقعية لكن نظراً لأنه مؤسس أول شبكة اجتماعية على الانترنت، فقد وعد جوناثان بتقديم شيء مثير يكمن في قيام ثورة على الطريقة التي يتواصل بها الناس مع بعضهم. وهذا بالفعل ما كتبته مجلة فورتشن Fortune في عدد تشرين الأول اكتوبر من العام 2003 التي قالت : ”هناك شبكة انترنت جديدة في طريقها للصعود- نوع جديد يركز أكثر على وصل الناس وليس مجرد توصيل مواقع الانترنت إليهم”.
وفي الأشهر القليلة التالية لإطلاق الموقع في تلك السنة، حصد موقع فريندستر الكثير من المستخدمين المخلصين. حتى أن من كثرة التعلق به، ذهب محبوه إلى استخدام اسم الموقع [فريندستر] ليعرب لغوياً كإسم وفعل.
وبنهاية 2003، حصلت الشركة على مبلغ 12 مليون دولار من نفس المستثمرين الذين ساهموا في تمويل مواقع شهيرة مثل أمازون Amazon، وياهو Yahoo، و eBay. وتوجهت الأضواء إلى الموقع على صدر صفحات أبرز المجلات والجرائد.
وبرز فريندستر وقتها على أنه مشروع يمكن للعالم أن يفهم ويشارك ويحلم به، وكأنه حدث كبير آت من المستقبل. حتى أنهم رفضوا عرض بـ 30 مليون دولار قدمته google

بداية الهبوط

وما حصل أن فريندستر انقلب لينضم إلى المواقع الناشئة القليلة التي غيرت العالم لكن بعكس ما تمناه جوناثان تماماً.
فخلال مارس آذار 2007، تبين أن واحداً من أصل خمسة أمريكيين كان يزور موقع ماي سبيس MySpace.com، وهو موقع منافس ومقلد لفريندستر تأسس في 2003 من قبل شركة انترميكس Intermix ليتم بيعه بعد سنتين لصالح نيوز كورب News Corp. لقاء نصف مليار دولار.
وتنوعت أنشطة مستخدمي وزائري موقع ماي سبيس MySpace.com ما بين الاستماع إلى الموسيقى والبحث عن إقامة علاقات عاطفية dating وتبادل الأفكار والخطط. ومن خلال تلك الأنشطة التي مارسها زوار موقع ماي سبيس تغيرت طريقة التفكير والاستخدام لشبكة الانترنت بالفعل. وبالمقابل شهد موقع فريندستر انخفاضه إلى المرتبة 13 من بين المواقع الاجتماعية الأخرى في الولايات المتحدة وانخفضت حصته السوقية الى 3% من سوق الشبكات الاجتماعية.
وفي عالم الإعلام ومجتمع الأعمال فُسّر سقوط فريندستر على أنه مجرد حالة من الفشل الإداري وتحمل جوناثان معظم المسؤولية . وبالفعل، فقد وصلت السخرية من موقع فريندستر إلى حد حصوله على شرف تدريسه كحاله دراسية في كلية هارفارد للأعمال، وذلك كحالة تصف الطرق التي لا يتوجب اتباعها عند إدارة شركة تقنية.

مؤسس الشركة اصبح خارجاً

وفي عام 2008 استنفذت الأموال من شركة فريندستر وأعيد تقييم رأسمالها بمبلغ 3 ملايين دولار فقط، ومن ثم أُلحقت كشركة تابعة إلى كلاينر بيركينز آند بايرز Kleiner Perkins Caufield & Byers وهي إحدى الشركات التي ساهمت بتمويل فريندستر من قبل.
وخسر جوناثان بالنتيجة مقعده في مجلس إدارة الشركة إضافة إلى معظم أسهمه في الشركة. وأصبح المؤسس فعلياً خارج الشركة ليملك قرابة 4% من أسهمها، هذا على الرغم من حصول الشركة على تمويل إضافي لاحقاً لكن من دون تحقيق أي أرباح حتى الآن.
ويتفق أكثر المراقبين على أنه مازال من الممكن بيع الشركة وفق عملية استحواذ متواضعه وصغيرة، لكن أحلام عمليات الاستحواذ الكبيرة أو طرح الشركة للتداول العام ذهبت في مهب الريح.
ويعلق على هذه الآراء russel siglman ، المدير الإداري في شركة كلاينر بيركينز، بقوله:”رأى الجميع في البداية أن بيع الشركة أو طرحها للتداول العام هي مسألة مسلم بها، ولكن كيف وصلت الامور الى هذا الحال؟؟ كيف يمكنهم تبرير هذا الفشل؟ لكن بالطبع ليست كل العقود التي تبرم تفضي إلى نتيجة باهرة في نهاية المطاف”.
و جوناثان الحساس سريع الغضب ولا يخبئ آرائه في صدره أبدا ، تزيد مثل تلك التصريحات من حدة انزعاجه أبرامز. ومع ذلك فقد كان متحفظاً وكتوماً حول موضوع سقوط فريندستر حتى بعد أن تتبعته في شهر أكتوبر إلى البار الذي يملكه. وبعد عدة ساعات (وخلال عدة مقابلات جرت لاحقاً بعد أشهر) كشف أبرامز عن رواية مختلفة تماماً عن تلك التي تتداولها أوساط شركات التمويل في وادي السيليكون وأصحاب المدونات والصحافة.

ما هو سبب التعثر إذن ؟

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

شركات التمويل وراء الربح أولاً

ويشارك جوناثان في رأيه جويل سبولسكي Joel Spolsky، مؤسس شركة فوغ كريك Fog Creek في نيويورك، ويقول:”تأسس نظام شركات التمويل الاستثمارية ليحتوي على تضارب قائم بين مصالح شركة الاستثمار وصاحب المشروع”. وذلك أمر يسلم به حتى بعض المستثمرين أنفسهم، ومنهم بيتر ريب، وهو شريك في كروسلينك كابيتال Crosslink Capital والتي كانت قد دعمت شركات تقنية مشابهة مثل جوود تكنولوجي Good Technology وشركة تيفو TiVo، ويقول ريب:” تبنت معظم شركات التمويل الاستثمارية نموذجاً تقوم من خلاله بالاستثمار في 20 مشروع لتحقيق نجاحين فقط بالنهاية”.
ويعتبر هذا النموذج التقليدي الذي تتبعه شركات التمويل الاستثمارية ملائماً تماماً بالنسبة للمستثمرين، حيث تغطي عوائد شركة حققت نجاحاً، مثل غوغل ، على خسائر وخيبات تسع من أمثال فريندستر. وبالنتيجة فشركات التمويل راضية لأنها تحصل في هذا السياق على رسوم كبيرة لقاء أتعاب إدارة المشروع بغض النظر عن نتيجته. ولا غبار على هذا الأمر بين المدراء أنفسهم لأنه سيتنقلون بنهاية المطاف للعمل من شركة ناشئة إلى أخرى وهم من الرابحين أينما ذهبوا.
لكن هذه الممارسة لا تعود بالخير على أصحاب الأفكار الواعدة من رواد الأعمال الذي يفضلون أن تكون نسبة نجاحهم أكبر من 20 مقابل حالتي نجاح. ويعتقد سبولسكي أن العمل مع شركات التمويل الاستثمارية يفرض مستوى من المخاطرة لا يتوجب على أي شخص تقبله ببساطة وخاصة لأنه مستعد للاستثمار بحياته ومدخراته في مشروع واحد.
ويقول سبولسكي :”يفضل رواد الأعمال الحصول على حصة تصل إلى 100% في شركة بقيمة 80 مليون دولار بدلا من نسبة 10% لفرصة امتلاك شركة بقيمة 800 مليون دولار”.
ويرجح أن جوناثان كان من هؤلاء كونه بدا متفهماً لطبيعة وادي السليكون ولأن مشروع فريندستر لم يكن بعيد المنال عن النجاح. ويكاد المرء أن يصاب بالتعجب من النهاية الكارثية التي احاطت بموقع فريندستر نظراً لأن حياة جوناثان مليئة بالخبرة والعمل في قطاع التقنية.

وماذا الآن ؟

في حزيران 2011 تم تحويل friendster من شبكة تواصل اجتماعي الى شبكة ترفيه حيث تركز على الألعاب و الموسيقى وبقيت حسابات المستخدمين على حالها وتم تزويدها بأداة لتصدير بياناتهم كالصور والرسائل والتعليقات و المدونات و المنتديات والمجموعات . وتم تحديد موعد نهائي للمستخدمين لحذف كافة البيانات بعده
- زيادة 50 % في عدد الزوار اليومي و الشهري الفعال
- اكثر من 90% من الزوار مصدره آسيا
- هناك 40 لعبة مدفوعة و المئات من الألعاب المجانية و التطبيقات حيث يلعب نصف المستخدمين ما بين 1 الى 5 ألعاب في الشهر و 30 % منهم يبقى اكثر من 45 دقيقة على الموقع يومياً و 10 % من الزوار اشترى رصيد friendster الافتراضي
المصدر
مواضيع مشابهة:

NetBox Design template

2011-11-08T17:44:00.002+02:00

Netbox is a goods shipping company based in egypt, it delivers goods for clients from USA, it work based on the internet market websites, client only choose the client and it deliver it to him within days.

following design took about : 10:15~ hours approximately, about 3 meetings and 3 reviews

unfortunately i canceled the project due to over working.

Client website : http://www.blazeboy.me/

Face Detection with OpenCV and CSharp

2011-11-06T18:28:00.000+02:00

the thing that i love in OpenCV is that is has detection algorithms for eyes, face, upper body, lower body and nose, ears, and also has a way to make other detection file.

the detection algorithm that we'll use names "Haar Cascade" is tracks a patter in an image depending on a previously collected patterns, that algorithm depend on statistics XML file that is generated using large set of positive images of the object you want to detect and hours maybe days of training to get a useful results.

openCV has Haar Cascade files in

C:\opencv\data\haarcascades

you'll find some XML files every file name is bretty clear what it detects, we'll use a face detection file named "haarcascade_frontalface_alt.xml", add that file to your project files from the "Solution Explorer" panel and make it copied to the target directory from the "property panel"

first you need to read the classifier file using

CvHaarClassifierCascade face_classifier = CvHaarClassifierCascade.FromFile("haarcascade_frontalface_alt.xml");

then initialize a memory storage object to use for detecting with :

CvMemStorage storage = new CvMemStorage();

i clear that storage before every detecting operation with

storage.Clear();

then detect objects from the image using

CvSeq<CvAvgComp> faces = Cv.HaarDetectObjects(img, face_classifier, storage, 1.5, 1, HaarDetectionType.ScaleImage,new CvSize(50,50));

we passed arguments

the image to perform detection on it
the face classifier we just read from the XML file
the scale factor is 1.5, as haar need to scale the image down to make faster detection
the nearest object neighbors is set it to 1 to detect one object at most
next is the detection type and i choose to scale and detect, there is canny and getting the biggest object and other types
then the minimum size of the object we set it to 50px by 50px

i noticed that using the "HaarDetectObjects" method of "IplImage" is too slow compared to the "HaarDetectObjects" static method at the "Cv" class,

now we got the detected face in faces we have to iterate over them and draw a rectangle in each place.

for (int i = 0; i < faces.Total; i++){
img.Rectangle(faces[i].Value.Rect, CvColor.Red);
}

the results will be something like that :

here is all the code at once to get a complete view

and the binary files to give it a shot http://www.mediafire.com/?r7wiob03snnv9rd

how to extract an object with openCV and C#

2011-11-06T16:58:00.001+02:00

first you need to include openCV and openCVsharp then add reference to openCVsharp library to your project.

Our problem
detecting object place in an image given the object is one color and that color is known to us, detecting the object will facilitate using the position to move something on screen, zoom in/out depending on the object position size.

The idea
as the object has one color so you could isolate that object easily by converting image color space to Hue Lightness Saturation (HLS) instead of Red Green blue space (RGB), that will facilitate isolating the color with the Hue channel, and also add some saturation constraints, the isolation could be applied with a built in function in OpenCV named "InRangeS)

The solution
first you need to include

using OpenCvSharp;

in your main loop you need to get a frame from your capture device (here i use the camera)

IplImage frame = camera.QueryFrame();

then convert the image colorspace to HSV or HLS

frame.CvtColor(frame, ColorConversion.BgrToHsv);

then create a result image that will hold the thresholded image (and isolate the object color), here i use a red colored object

IplImage result = new IplImage(frame.Size, BitDepth.U8, 1);
frame.InRangeS(new CvScalar(0,170,50), new CvScalar(30,255,255), result);

we passed the scalar (0,170,50) as minimum values and (30,255,255) as maximum values, the first tuple value is Hue, second is Saturation and third is Value or lightness, i extract the hue 0:30 the red color hue range, and the saturation is higher than the black range 170:255 to exclude the black areas., and also lightness in the normal values 50:255 for lightened object.

then you need to smooth your image to remove noise

int smooth = 5;
result.Smooth(result, SmoothType.Median, smooth, smooth);

then show the result image, you'll get a black and white image with object is the white, so we solved the problem, the next steps are to convert into contours and approximate to polygon then get the object position, i didn't lean to use contours so far so we'll make it in another tutorial,

The final result

and for the binaries to give it a shot yourself : http://www.mediafire.com/?c9ps7xixaa1c8a3

Google reader new look..what the fuck is this ?

2011-11-01T23:34:00.004+02:00

Google reader got his new look.. a Google plus new look, congrats google nice one, congrats Google reader users nice new theme for your RSS Reader, but there is poison in the honey.

as you may not notice in the first look to your google reader but the fucking share button disappeared and you got only the plus button... what the hell they are doing to the application did the project manager hit himself to the wall or something ?

The Impact
most of users got crazy when they noticed the damn change to the bar, what'd you mean Google ? i have to use your fuckin social network ? i literally WONT DO THAT and a second thing GO TO HELL.

Less social
i always share and like my RSS posts in order to find them easily, now i can't even tell my followers that i like this post/article, what is it ? is Google making their Google reader LESS SOCIAL ?.
they are removing the social tools in other applications and forcing the other products users to use the social feature in Google + instead.. that what i can conclude of this step.

What is hell is the benefit?
what we'll get from this step ? a plus button ? i fuckin don't like Google + WHAT ? do i have to use it to read my posts and share it with friends like the simple old days ? (but now more complicated of course)

Conclusion
the goddammit feature must return to us, we must not be forced to use Google plus and i fucken want to share my liked posts using Google reader not their fuckin social network, i use Facebook and i'm happy with that.

Edge detection with OpenCV and C#

2011-10-27T13:29:00.000+02:00

to our new lesson with OpenCV and C#, today i'll show you how to apply edge detection to an image with open CV
Edge detection could be useful to enhance image, detect objects and some other operations.
the application is simple,

open the camera
get a frame
convert to greyscale
apply canny algorithm for edge detection
show the results

it is that simple, note that canny takes 2 parameters the threshold and the aperture and it will effect your result as the threshold the larger the less sensitive your application will be to the image, larger thresold will result in alot of edges detected.

application result will be something like that

here is the application well commented

camera viewer with OpenCV and C#

2011-10-25T17:57:00.001+02:00

the first tutorial we opened an image and displayed it in a window using a console application (check it here) now we'll learn how to open our camera with OpenCV and display its output in a window this is getting exciting huh ? ,

first you'll need to check the first tutorial to link openCV with C# using OpenCVSharp, now to the application code

although the code is well commented i'll explain it again that application will open camera, get an image from the camera and make another smoothed copy then display both of them, and will loop every 10 milliseconds to update the images with the latest camera output.

first we open the camera, create 2 windows for the original image and the smoothed one then create a 2 images one will be the camera image the second will be the smooth output of the first image.
at last we'll display both images in the windows and say hi.
the application output will be something like that

also here is the application binaries to give it a shot on your machine without having to compile the code yourself
Download application from here : http://www.mediafire.com/?o88t1lr4slp3w6h

getting started with openCVsharp.Net

2011-10-25T14:46:00.001+02:00

didn't see any tutorial, lesson, tweet :D about getting started with OpenCV binding for C#.
first of all OpenCV is a computer vision library developed with lots of people starting from MIT institute and Intel labs to a community separated people around he world.

openCV is developed using C and C++, fortunately there is a binding for some languages one o them is C# binding that will enable you do develop OpenCV applications using C#.

we'll deal with openCVSharp.Net its website is : http://code.google.com/p/opencvsharp/
i have a package right now that will enable you to start developing using C# and openCV within minutes pleae download this package to get start with us : http://www.mediafire.com/?blzviq7zbg1q560

the package is openCV libraries and openCVSharp.net libraries we'll include in our application, if you don't want to develop with this package you'll need to download openCVSharp.Net and OpenCV V2.1.0 then include the same files within your application

create a new console application in visual studio (i'm using visual studio 2008 on windows 7 32bit)
now decompress the files add all files to your application from right click on the project > add existing items then add all these files, anad we'll need to copy these files to our application bin or debug folder inorder to our application to load them properly so highlight all files > from properties panel > choose from "open to output directory" the values "copy if newer"
this will make Visual studio copy the files to the output directory beside the application and our application will load them correctly,
now we need to add reference of openCVSharp library to our application references, from the solution explorer > right click on "references" > choose add reference > choose "openCVsharp, opencvsharp.CPlusPlus, opencvsharp.MachineLearning"
that will enable you to use the API inside the openCVSharp DLL files in your application.

now to our first application

this application is will explained, first we added the openCVSharp to the namespace with using the we loaded an image from my disk to the memory and created a new window and then showed that image inside the window then wait the user to press a key.
when compile and run the following output will be shown

don't worry i'll not be on your screen :) you'll only see the image you have opened with the first line of code
this is our first application, if you have problems please tell me and i'll do my best to get you started with openCVSharp.

Note: i'm still playing around with openCV and in the future i'll make tutorials for canny edge detection and blurring, transformation and converting colors on the image, that would be fun :)

Make IE9 behave like IE8 and IE7

2011-10-24T14:38:00.000+02:00

i discovered this hidden feature of internet explorer while debugging one of my designs couple months ago, Microsoft added a feature to internet explorer 9 to make it display pages with the old rendering engines of internet explorer 8 and internet explorer 7 and you can use this feature to adapt your design with older versions of internet explorer and without installing the older version itself, here is how to switch modes

1- open internet explorer 9 - you are a geek and you'll know where to find it :D

2- click on tools icon at the top right (the gear icon) or press (Alt+X)

3- click on (F12 developer tools)

4- now you can choose the IE8 and IR7 from the (Browser Mode) and (Document Mode)

your page will be rendered to suite the new modes and you wont need any other application to emulate IE8 and IE7

Make a Research before you design

2011-10-23T15:14:00.001+02:00

if you have a client that wants a design, you always need to make a research before firing up your design tool, designing a website is really a harder mission than it seems, you have to collect design elements for your website, search for a similar websites, and collect as much elements as you can,

design elements like login boxes, footers, headers, side blocks, center blocks and content presentation
they are all important to get them as it is world recognizable among the websites from the same type.

for example if you are designing a community website so there must be a login box somewhere, a loggedin user information and a logout link for logged in user, there must be some elements like these in every website type.
collect them and then head to the second step.

the second step is to filter them to suit your client needs, your client differentiate from his competitor with a feature, facility or service you should pop this feature to the front of your design, a website visitor must look and say "oh so that is how this company better than the others" it is your mission to do it not somebody's other job.

now get these elements and arrange them in the design to form your website wireframe (boxes with names on them )

like the above this is a simple design for a client it contain some wireframing for the content and overall page boxes.

next you'll need to get your website colors and your client content and get to the real design.

take each box and convert it into a creative design.

these are some notes collected while designing a new website hope it works for you.

Making of Facebook logo in cinema 4D

2011-10-20T12:23:00.000+02:00

this is a how to make Facebook in cinema 4D,
i'm still looking around to know my way in it, but cuz i made a project (small one actually)
though i thought of explaining how did i made it,
maybe someone didn't start dealing with it and wanna see it in action.
the final results on deviant art http://fav.me/d4dbes4, you also can order prints in large sizes.

Facebook logo with cinema4D

2011-10-19T20:27:00.002+02:00

i have played a little with cinema 4D application, and i have to say its results are pretty owesome, it create and render models within a few simple steps easy enough for stupid donkey to use it and produce avatar movie,

alright i was kidding but it is really easy software in comparison to Maya and 3dmax and also to blender (blender has a very easy editing system but rendered result needs skill to get it right)

the facebook logo is on deviantart.com and it is available for printing in large sizes

Ruby on Rails-- i'm impressed

2011-09-30T21:01:00.001+02:00

ruby on rails is a bless,

that's all i can say, i'm up to a project for products/sellers/buyers and stuff like that, at first i thought about building it with PHP and codeigniter,

alright that was a mistake , i took about 1 week of developing an admin controlpanel that ruby on rails can build in 3 lines and 10 minutes of customization, that's what i said yes it is 3 lines and 10 minutes.

first install the ruby and rails and active admin and create your 3 models and generate active admin for these then migrate database and viollaaaaaaaaaaa the application is complete and awesome and charming,

now i say it with a full mouth: I QUIT PHP
i appeared that i wasted over 5 years learning a language that wasted my effort and life,
so i'll quite programming with that dump language and stick with ruby on rails and if i can i'll stick to ruby for desktop applications.

ruby itself is still under my consideration for desktop applications as i still doe'nt know if i can generate a standalone .EXE application for my clients.

شبكة تحدث الإجتماعية , Tahadth social network

2011-09-01T18:44:00.000+02:00

periodic Ajax updating

2011-08-28T16:29:00.002+02:00

how much is it hard to make a periodic updating using ajax requests to the server?
it first periodic ajax updating is used for chat applications, system monitors and some systems that need a realtime updating,

so at first is thought the solution is pretty straight forward like

setInterval( ajaxFuncName, Period )

but after some thoughts i thought that the delay will cause headache and maybe some ajax requests got response after the period, that will make some request overlapping, for more explaination, let assume the period=1 second :

request1 at second no 1 ---> response in second no 1.5
request2 at second no 2 ---> response in second no 2.5
request3 at second no 3 ---> response in second no 5.7
request4 at second no 4 ---> response in second no 5

so for the request no 3 and 4 there is an overlapping caused by connection delay or download time.

so the second solution i came up with is :

function ajax(){
$( url , params, function(response){
// do updating to page
setTimeout( period, ajax);
});
}

that will prevent updates overlapping but the problem here that faced me,
a request may not be responded so the whole request chain will be broken if that happen.

i'm still thinking about a solution to solve this that has the following features :

no request sent before the previous request if fulfilled
if the server didn't respond to a request within let's say : 10 seconds another request should be sent
if a request took more than 10 seconds it should be terminated and ignored at all.

mmmm, i'll search for a timeout for the ajax requests and see some examples, maybe i'll got a suitable solution.

i think the key problem is the timeout for every ajax request.

CSRF Attacks

2011-08-21T23:16:00.000+02:00

while researching how to protect my web applications i got into a page that explain the most famous attacks, and believe me when i say i didn't hear about some of them despite they are famous,

one of the attacks are Cross Site Request Forgery CSRF attack,
that attack will work on most of the websites i have seen especially the Arabic websites,

how it works ?
if you logout your user with a link like that :

http://website.com/logout.php

any hacker could make a website that has a code like this

<img src= "http://website.com/logout.php"/>

when your website user got into the hacker page then the user's browser will call your logout.php page and perform the logout action.

another example for that attack,
if you have a form that submit some values with GET method then the action link will be something like that

http://website.com/register.php?name=username&email=useremail@domain.com

if the hacker made a page that has that link:

<img src="http://website.com/register.php?name=usrname&email=useremail@domain.com"/>

and any website surfer got into that hacker page he'll trigger the page immediately and be a registered user on your website.

got it right ?

so how i'll protect myself against this attack ?
most of the solutions i got is to generate a token per user session and regenerate it periodically e.g. 30min
inject this token in a hidden input field in all your forms.
and in the action page make sure that the posted token is valid to that user if valid perform action.

how that will help me ?
an attacker can't guess the token of the website visitor so even if he put the CSRF code it won't work at all.

Note: for links i could find a suitable protection except a one of my own is to add a token to all links that perform a direct action and make sure that the token is for the user, that is a tricky solution as you need to modify all your website links, of course that solution will be easy if you are using a function to generate the links for your site like Codeigniter framework URL helper functions.

Less CSS

2011-08-20T02:43:00.001+02:00

once upon time, i heard about the less CSS, i found it with dojo SDK, there are a lot of CSS files and these -i don't know- file "*.less",
OK i don't get the idea, what are these files and why they are here.
never mind, i delete those files and used the .css files as normal.
now i got to a news article that talks about a new twitter SDK that enable developers to make php interfaces of web applications for twitter.

alright that is nice, but it also uses LESS , ok that seems an important thing.
i took a look at its website http://lesscss.org/ , -designed nicely BTW- so it is about recreating CSS, eliminate all these disadvantages of repeating selectors,searching for colors to reuse, and copy-paste properties from other class, got it ?
in other meaning it is a JavaScript script file that will get the related .less files and parse them converting them to CSS and inject them to your page.

that will make you happy because:

less uses the classes as container to other children class
you can use colors and values as variables, so change variable value and it will there in all the stylesheet
you can use mixins and that means you can include another class in your class
functions are like there :D, you can create function with parameter and use it everywhere
access to JavaScript environment, that seems creepy with CSS for security reasons.
it is the same syntax as the CSS that will make you familiar with the file.
...some other stuff see it there http://lesscss.org/

now after i have seen all these advantages i ask myself it it cross browser ?

and if so ? why not all of us use it instead of the CSS.

i really want to, but i have doubts that i'll work in all browsers if will respect my stylesheets order.

- i think it may make some problems with the properties override across my stylesheets.

Dojo toolkit videos

2011-08-05T15:45:00.000+02:00

i noticed a strange thing, i'm working on a project with dojo toolkit when i face problem or want to do something with it like jquery i ask Google all the time.

everything that i find is on dojotoolkit.org or dojocampus.org !!!! try to search youtube for tutorials but !!!! i can't find any tutorial, can't find any articles on famouse design blogs.

is it abandoned that way ? no one cares about it ?
i use it and the dijit library is very handy when it comes to web applications.
also i tried dojo core in DOM selection and manipulation it is very bad library compared to Jquery ease of use.

i hope to see dojo core better to compete with jquery, with the complete diji library if the dojo query method got a better behavior it whould be a nice alternative to jquery.

Creating text bubble with CSS

2011-08-04T13:40:00.000+02:00

creating a text bubble like the cartoon bubbles is a once tricky task as i faced the problem that

the bubble is relative to the object of the speaker, i also want to preserve speacker top-left origin
bubble has a maximum width
the text is grown up not down as the text must shown to be always sticking to the speaker head
text bubble has the width of the text and cetered so that if the text is one word it must be at the center right above the speaker head not to the left.

i came up with the solution that makes it looks like that :

here is the HTML snippet :

and the css snippet :

the main approach is i got an element that has an absolute position and i want to make this bubble relative to that element without javascript with the upper properties we discussed.

there is a famous jquery plugin that makes this bubble with javascript named "tipsy" i wanted to git rid of this tipsy in favor of CSS only solution.

Airpad2 Development with OpenCV and Emgu

2011-07-11T22:36:00.003+02:00

i'm now trying to improve the airpad Application of moving the mouse with your hands,
i previously used the Touchless library with c# to make it track 2 objects as the mouse movement and clicking state,

now i'm trying to get rid of touchless as the algorithm is so rough, and i want the application to keeptrack of the normal hand of the user without any colored objects on it.
that will need an image processing library like OpenCV library.
i'm now using the C# wrapper of OpenCV named Emgu.
and after a long time (12 hours) of research if found that the normal algorithm of skin separation wont work as it is too sensitive to the light and skin color as it depends on the HSV of image.
so i get to the conclusion that i need to use a classification algorithm named "Haar" that needs XML files for the Hands Images Database, that the classifier test the source image against and get the hands for you,
i think facebook and other applications uses that algorithm for face detection, the problem is i cannot get an XML database for Hands to make Haar Works correctly i found a website for that :

http://hands.slashingedge.co.uk/
but the database is very small and the XML files doesn't correctly works for hands,
i think i need to collect a large number of hand images from my friends and generate the XML files myself with openCV tools then make Haar Load them, i hope after all of this to get it works fast.
as in the tests i made with -currently not working correctly library- the application works too slow by a 0.5 a sec dely.
any ideas would help for Hands detection.

Airpad Mouse Guesture detection

2011-07-03T22:16:00.001+02:00

Airpad is an application that could detect 2 object, move the mouse and left click according to that objects, the application is still in Beta Phase, as the Detection algorithm is still not perfect.
video describe is all : http://www.youtube.com/watch?v=wE638DF5u-8
and you could download the latest version from here : https://github.com/blazeeboy/Airpad/zipball/master