Posts Tagged html

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

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

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

متابعى فريق ديف ميكس وأنشطته الاعزاء .. نقدم لكم نشاط جديد وهذه المرة بمشاركتكم انتم وهى مسابقة إبداع فى تصميم صفحات الويب باستخدام XHTML+HTML5+CSS+CSS3 مع مراعاة عدم استخدام أدوات أخرى مثل ال JavaScript ويكمن ابداعكم فى هذه المسابقة فى اختياركم للافكار المعبرة عن التصميم وسوف يتم التقييم على الافكار قبل الادوات من قبل مصممين ذات كفاءة عالية سوف يعلن عنهم لاحقا لذا ارجو التركيز فى هذه الاعمال التى سوف تقدم.

مسابقة إبداع

قواعد المسابقة:

للمسابقة قواعد بسيطة لو تم الالتزام بها سوف تعم الفائدة على الجميع باذن الله، وهى كالتالى:

1 – اهمها الالتزام بمواعيد تسليم التصميمات التى سوف ينوه عنها واى تأخير لن يتم قبول هذه التصميمات للاسف فهناك died-line للمسابقة لا يمكن تعديه.

2 – كان هناك قاعدة بالزام العمل فى فريق ولكن .. طلب الكثير بعدم التحتم عليها حيث ان هناك الكثير بمفردهم .. لذا فمن الممكن ان تشترك منفردا ولكن من حقك تكوين فريق لا يتعدى ال 4 افراد.

3 – ارسال الاعمال فور الانتهاء منها فى سرية تامة الى devmix2011@gmail.comحتى يتم عرضها على لجنة التحكيم دون عرضها على العامة لتقيمها قبل انتهاء ميعاد المسابقة الاصلي.. وعند الانتهاء سوف يتم عرضها مفتوحة المصدر كما فى المثال التالى:

fci_design1

Download Design

Designed By:

  • IIIIIIIIIIIIIIIIIIIII
  • IIIIIIIIIIIIIIIIIIIII
  • IIIIIIIIIIIIIIIIIIIII
  • IIIIIIIIIIIIIIIIIIIII

Evaluation From Here

يستطيع الجميع انزال التصميم بملفاته من Download Design ويقوم بعدها بوصضه التقييم فى مكان التقييم المبين فى لينك Evaluation واتنى يكون التقييم فعلا على الاعمال بعيدا عن المجاملات والصداقات وسوف تعرض كل الاعمال فى موضوع واحد ان شاء الله مفتوحة المصدر.. اما عن اعلان الفائز فسوف يكون بعد يوم من التقييمات واهداء الجوائز فى أول ايفينت للفريق ان شاء الله فى القريب العاجل ليكون تكريم امام الجميع.


لجنة التحكيم:

عندما فكرت فى عمل لجنة لتحكيم الاعمال المقدمة وتقييمها .. قررت اختيار احسن المصممين على الاطلاق المعروفين لدى الكثير منكم فلجنة التحكيم تتكون من 3 افراد هم:

مهندس محمود متولى – مهندس UI/UX فى شركة كلود نينرز.

مهندس تميم ابراهيم – مهندس تصميم صفحات ويب ومدير شركة TameemGroup .

مهندس مدحت داود – مطور صفحات ويب ومنظم المسابقة.

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


نظام المسابقة: {المطلوب فى المسابقة}

المطلوب الاول: مطلوب عمل تصميم فى احد المواضيع التالية:

-تصميم موقع لمدينة علمية

-تصميم موقع لمكتبة

-تصميم موقع لصفحة شخصية لاي من الشخصيات (مهندس -دكتور – مدرس – بياع سندوتشات :))

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


طريقة تسليم الأعمال:

كما نوهت من قبل سيتم ارسالها على devmix2011@gmail.com ولكن الان انوه عن ما سيتم ارساله ، مطلوب وضع كل الملفات فى ملف واحد مضغوط zip/rar وارساله وتسميته باسم المجموعة المقدمة واذا كان التصميم الاول واسم المجموعة مثلا FCI سيتم تسمية الملف fci_design1.zip وارساله على الفور وبالطبع لو كان الديزاين الثاني سيكون fci_design2.zip بهذه الطريقة يكون الموضوع اكثر تنظيما، وسوف يتم ارسال الاعمال من المتحدث باسم الفريق الذي سيسجل فريقه فقط وليس مطلوب ان كل فرد فى الفريق ان يسجل.


طريقة التسجيل:

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

التسجيل مفتوح من الان وحتى غدا 2 سبتمبر 2011 الساعة 12 منتصف الليل وبعدها يتم اغلاق التسجيل وتبدأ المسابقة ولمدة 4 ايام باذن الله.

نتمنى من الله ان يجعلنا سبب فى ان نساعد الناس فى العلم والتعلم .. بالتوفيق 🙂

, , , , , , ,

5 Comments

10 Articles Introduction to HTML5 is Done !

Hey all, devmix promise with a few articles of HTML5 in 3 days .. and it’s done 🙂
we promise also with other articles in HTML5 in the other sides of this language, wait us very soon isA .. we only need one thing from you .. Your feed Back

The 10 articles are as follow:

HTML5 — How came to be ? By Mohamed Gebril
Detecting HTML5 Features By Mohamed Ibrahim
HTML5 getStarted(); By Mohamed Ashraf
HTML5 – Canvas element By Mai Mohamed
HTML5 – Video element By Medhat Dawoud
HTML5 – Geolocation By Eman Elma3sarawi
HTML5 – Local Storage By Maha Elbasuony
HTML5 – Let’s Take This Offline By Amar Ashor
HTML5 – What Is MiCroData? By Dina Wasef
HTML5 – Fantastic Form By Medhat Dawoud

We hope that these articles were useful for you, wait us soon for more articles and keep contacting us:

DevMix Official Page on facebook
DevMix Page on GooglePlus
DevMix Team group on facebook
DevMix2011@gmail.com
http://twitter.com/DevMixTeam

🙂 Good Luck For All 🙂

, , , , ,

3 Comments

HTML5- Let’s Take This Offline

        At first you must know the purpose of this article and what is this strange title refer to!!

of course it’s about HTML5 offline applications and how this offline application work

dont be confused i know that Web pages are things you download and render. Downloading implies a network

connection. How can you download when you’re offline ???????????

At its simplest, an offline web application is just a list of URLs pointing to HTML, CSS,
or JavaScript files, images, or any other kinds of resources that may be present.

The home page of the offline web application points to this list, called a manifest file
HTML5 offline applications will read the list of URLs from the manifest file, download
the resources,. When you try to access the web application without a network con-
nection, your web browser will automatically switch over to the local copies instead.

Now it’s up to you as a Web-Developer  …

In other words, HTML5 can take your web application offline, but what you do once you’re there is up to you.

Browsers that subbort HTML5 offline application:

         Firefox                             Safari                         Chrome                            I-Phone                     Android
 
 
The Cache Manifest:
you need to point to the manifest file, using the manifest attribute on your <html>element:
 <!DOCTYPE HTML>

<html manifest="/cache.manifest">

 <body>
 ...
 </body>

</html>
Your cache manifest file can be located anywhere on your web server, but it must be
served with the content type text/cache-manifest.Lets build itsupose you built web game and wanna to run it offline
To do that, we need a manifest that lists all the resources the game needs. Well, there’s
the main HTML page, a single JavaScript file that contains all the game code,
and…that’s it. There are no images, because all the drawing is done programmatically
via the canvas API and all the necessary CSS styles are in a <style>
element at the top of the HTML page. So, this is our cache manifest:
CACHE MANIFEST
game.html
../game-localstorage.js
*********************
A word about paths.
I’ve created an offline/ subdirectory in the examples/ directory,
and this cache manifest file lives inside the subdirectory. Because the HTML page will
need one minor addition to work offline (more on that in a minute), I’ve created a
separate copy of the HTML file, which also lives in the offline/ subdirectory. But because
there are no changes to the JavaScript code itself since we added local storage support
which lives in the parent directory (examples/). Altogether, the files look like this:
/examples/localstorage-game.html
/examples/game-localstorage.js
/examples/offline/game.manifest
/examples/offline/game.html
In the cache manifest file (/examples/offline/game.manifest), we want to reference two
files. First is the offline version of the HTML file (/examples/offline/game.html), which
is listed in the manifest file without any path prefix because the two files are in the same
directory. Second is the JavaScript file, which lives in the parent directory (/examples/game-localstorage.js)
and is listed in the manifest file using relative URL notation: ../
game-localstorage.js. This is just like how you might use a relative URL in an
<img src> attribute. As you’ll see in the next example, you can also use absolute paths
(that start at the root of the current domain) or even absolute URLs
(that point to resources in other domains).
Now, in the HTML file, we need to add the manifest attribute that points to the cache
manifest file:
<!DOCTYPE html>
<html lang=”en” manifest=”game.manifest”>
And that’s it!   When an offline-capable browser first loads the offlineenabled HTML
page, it will download the linked cache manifest file and start downloading all the
referenced resources and storing them in the offline application cache. From then on,
the offline application algorithm will take over whenever you revisit the page. You can
play the game offline, and since it remembers its state locally, you can leave and come
back as often as you like
 
 
 
Further Reading
 Standards:
 • Offline web applications in the HTML5 specification
 Browser vendor documentation:
 • “Offline resources in Firefox” on the Mozilla Developer Center
 • “HTML5 Offline Application Cache”, part of the 
   “Safari Client-Side Storage and Offline Applications Programming Guide”
 Tutorials and demos:
 • “Gmail for Mobile HTML5 Series: Using Appcache to Launch Offline - part 1”, by
 Andrew Grieve
 • “Gmail for Mobile HTML5 Series: Using Appcache to Launch Offline - part 2”, by
 Andrew Grieve
 • “Gmail for Mobile HTML5 Series: Using Appcache to Launch Offline - part 3”, by
 Andrew Grieve
 • “Debugging HTML 5 Offline Application Cache”, by Jonathan Stark
 • “An HTML5 offline image editor and uploader application”, by Paul Rouget
 
 
 
at end thanks to all of you
By : Amar Omar Ashour
 

2 Comments