Posts Tagged html5DEVMIX

Hear Web part 1 (intro)


هل يمكننا تصفح مواقع من خلال جهاز الراديو مثلا؟؟
ان كانت الاجابة لا ستكون مقنعة جدا اما لو كانت نعم فكيف سنرى الكلام والصور والالوان واللنكات مثلا؟؟
السؤال الاصعب هو ماذا على المصمم ان يفعل ليجعلك تتصفح موقع بدون شاشة؟؟

sound


الحقيقة ان الاجهزة الصوتية تستطيع تصفح المواقع اذا توافر بها اتصال بالانترنت ومتصفح يناسب الجهاز مثل الاجهزة التى يستخدمها المحرومون من البصر ولكن هل سيستخدم المصمم ادوات اخرى لتصميم المواقع الصوتية؟؟ الاجابة لا نفس ادوات التصميم تستخدم
HTML , CSS , javascript
المتصفحات تقوم بتحميل الاتش تى ام ال ثم قراءته للمستخدم والمتصفحات الرائدة فى هذا المجال هما
Opera 9 , firevox not firefox


دا لنك احصائيات عن البراوزرات على نظم التشغيل المختلفة التى بتدعم المواقع الصوتية
http://www.codestyle.org/css/media/aural-BrowserSummary.shtml


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


عليك كتابة ملف سى اس اس واحد لاعطاء تنسيقات لكل الاجهزة

@media


تقوم هذه الخاصية باعطاء التنسيق المناسب حسب نوع الجهاز المتصفح وتأخذ القيم
aural , braille , embossed , handheld , print , projection , screen , tty , tv


@media screen{
/*هنا توضع التنسيقات الخاصة باجهزة الكمبيوتر العادية*/
}
@media handled{
/*هنا توضع التنسيقات الخاصة بالاجهزة المحمولة*/
}
@media aural{
/*هنا توضع التنسيقات الخاصة بالاجهزة الصوتية التى نتحدث عنها*/
}


تستطيع من خلال كتابة تنسيقات داخل
aural
ان تتحكم فى طريقة قراءة الصوت للمستخدم واعدادتها

1- 3D sound Effects


تستطيع عمل مؤثرات صوتية ثلاثية الابعاد على البرنامج

3D Sound Effects

3- User Interaction


تستطيع التحكم فى طريقة التفاعل الصوتى بين الانسان والبرنامج مثل التفاعل الموجود فى الايفون

interaction

3- Speak Controlling


تستطيع التحكم فى نبرة و جودة الصوت والاعدادات الصوتية

Sound control

..التفاصيل فى الجزء القادم


ماكان فيه خطأ فمنى ومن الشيطان وماكان فيه توفيق فمن عند الله

aHmEd DaIf

, , , , , , , , , , , , , , , , , , , , , , ,

4 Comments

التصميمات المرسلة فى المسابقة – قيّم معانا

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

Group 1

DevRock_design1

Download


Group 1

DevRock_design2

Download


Group 2

Grendizer_design1

Download


Group 1

Grendizer_design2

Download


Group 3

Yousif_design1

Download


Group 3

Yousif_design2

Download


Group 4

Sara_design1

Download


Group 4

Sara_design2

Download


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

, , , , , , ,

6 Comments

CSS3-Background

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

فى المقالة دى إن شاء الله هنتكلم عن موضوع مهم جدا ,
وفى نظرى من ضمن الأضافات الأكثر تأثيرا وظهورا فى السى اس اس 3 .
قبل البدء فى الشرح أود أن أطرح بعض الأسئله والتى سوف نجيب عليها فى أثناء المقاله :-
أولا:-ماهو الجديد فى الخلفيات فى السى اس اس 3 ؟
ثانيا:-هل يمكن إضافة أكتر من صورة كخلفية لصفحة الأتش تى إم إل؟؟!!
ثالثا:-هل يمكن تغيير حجم الخلفية لصفحة الأتش تى إم إل؟؟!!
رابعا:-هل يمكن تغيير درجة لون الخلفيه ؟؟!!

دعونا نبدأ فى البدايه مع السؤال الأول .ماهو الجديد فى الخلفيات كخصائص موجودة مسبقا فى السى اس اس2 ؟؟؟
أو ماهى الأضافات فى خاصية الخلفيات فى السى اس اس 3 ؟؟
فى البددايه كيف نكتب خاصية الخلفيه فى السى اس اس عامة

Body{
background:url(imagename.jpg)   left   bottom  no-repeat
}

, فإنه توجد العديد والعديد من الخصائص الجديدة فى السى اس اس 3
-:ولكن من أفضل الخصائص الموجودة فى السى اس اس 3 هى الخلفيه ففى هذة النسخه يمكنك
(1        إضافة أكتر من صورة فى الخلفيه
(2         التحكم فى حجم الخلفيه
(3         التحكم فى درجة اللون
وهذة الخصائص الجديدة تقودنا إلى السؤال الثانى وهو ,هل يمكن إضافة أكتر من صورة للخلفيه ؟؟!!
لو سألتنى مثلا منذ عدة سنوات هذ السؤال لقلت إن ذلك مستحيلا ولكن مع السى اس 3 لايوجد مستحيل
(مع ديف ميكس مفيش مستحيل )تستطيع عمل ذلك من خلال هذا الكود البسيط

Body{
background:url(imagename.jpg)   left   bottom  no-repeat;
background:url(imagename.jpg)   left   bottom  no-repeat;
background:url(imagename.jpg)   left   bottom  no-repeat;
}

نوصل لنقطه مهمه وبتضايق ناس كتير من السى اس اس 3 ألا وهى دعم المتصفحات لهذة الخاصيه :-
Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) andInternet Explorer (9.0+) 😀

وبكدا نكون وصلنا للسؤال الثانى ألا وهو هل يمكن التحكم فى حجم خلفية الصورة ؟؟!
بدون إطاله فى الكلام يمكن هذا وبكل سهوله عن طريق هذا الكود الصغير والمميز من السى اس اس 3

div {
background-image: url(imagename.png);
background-repeat: no-repeat;
background-size: 100% 100%
}

وكالعاده فى كل الخصائص هنشوف دعم المتصفحات وهيكون كالتالى
Opera 9.5, Safari 3

بعد كدا إن شاء الله نوصل للنقطه المهمه وهى إزاى أعمل صفحه مدرجه أو جزء مدرج فى الصفحه زى الشكل دا

الكود واضح مع تغير لون الصورة

, , , , , ,

1 Comment