Canvas و SVG في FireFox 1.5 ..
إذا كنت من مستخدمي Firefox 1.5 يمكنك مشاهدة مثال “فظيع” على الـ Canvas عبارة عن رجل يمكنك تحريكه داخل بيئة افتراضية.
ماهو <canvas> ؟
“<canvas> هو عبارة عن وسم HTML جديد يسمح لك بالتعامل مع الصور و رسمها دايناميكياً” ، انظر إلى المثال التالي : canvas.htm و القي نظرة على الـ Source Code ( وضعت فيه تعليقات باللغة العربية ) كما ترى فقد تمكنت من رسم الشكل عن طريق الكود فقط، جرب أن تحفظ الصفحة على جهازك ثم قم بتغيير الألوان أو الأبعاد لتفهم الفكرة بشكل اوضح .
ماذا عن SVG ؟
“SVG هي لغة توصيفية مستقلة بذاتها ( تعتمد على XML )” ، و هي قياسية معتمدة منW3C بعكس الوسم السابق المستحدث، و يمكن من خلالها إنجاز نفس الأشياء التي يمكن إنجازاها من خلال وسم <canvas> أو أكثر، و قد أشارت بعض المصادر إلى ان الفرق بينهما قد يكون من ناحية الـ Performance.
إشارات سريعة :
# الـ <canvas> و الـ SVG كلاهما بسيط و يمكن تعلمهما بسهولة، فقط أنت بحاجه لمعرفة الفكرة الرئيسية.
# دعم Firefox 1.5 للـ SVG قد يعطيها دفعة قوية فهي موجودة من مدة طويلة و لكن بسبب عدم دعم المتصفحات لها فهي غير مشهورة بالرغم من جمالها و قوتها.
# البعض بدء يتسائل لماذا تم اعتماد <canvas> في Firefox 1.5 بالرغم من أنها ليست قياسية و غير معتمدة من W3C، تجد رد جميل جداً في الموضوع التالي : On the new HTML Tag .
مراجع :
- Canvas Tutorial
- امثلة على استخدام الـ Canvas : الاول – الثاني – الثالث
- Drawing Graphics with Canvas
- On the new HTML Tag
- Rich Web: SVG And Canvas In Mozilla
بعد النشر : القيت نظرة على عنوان الموضوع فرأيت ثلاثة كلمات انجليزية لا يجمع بينها من العربية إلا حرف وصل و حرف وجر … “أمتي كم غصة دامية ** خنقت نجوى علاك في فمي”.
4 ديسمبر 2005 في الساعة 4:31 م
بسم الله الرحمن الرحيم
أولاً شكراً على المعلومة المفيدة يامازن وبصراحة شئ رائع جداً ووسم قوي بالفعل ..
وزيادة على المعلومات (هي بعض اللقافة وقد لايكون لها صلة ولكن فيه ريحة يعني) ..
عندما كنت اتعلم الرسم وصلت إلى مرحلة إستخدام الألوان الزيتية والفرشة واستخدام لوح ابيض خشن السطح للرسم عليه ودائماً ماترونه أمام الرسام ويتم ركزه على جلاسة معينة وهذه اللوحة البيضاء كان يطلق عليها في علوم الفنية كلمة canvas …
وأرجوا أن تكون معلومة مفيدة وبصراحة أفدتنا يامازن بهذه المعلومة الجديدة وأرجوا أن يتم إعتمادها من قبل W3C لتكون قياسية وتدعمها باقي المتصفحات …
مرة أخرى ألف شكر على المعلومة يا أبو حمزة …
أخوك عبدالله عيد
4 ديسمبر 2005 في الساعة 4:46 م
عبدالله عيد :
أخي عبد الله تنتقي من المعلومات أفودها، ماشاء الله عليك .. قمت بتلوينها باللون الأحمر حتى تتميز بين الردود
جزيت خيراً و بارك الله في علمك ..
محبك / مازن
4 ديسمبر 2005 في الساعة 6:03 م
وأنا أقرأ الخبر ، خطر لي سؤال وهو : ما هي المعايير التي تعتمدها W3C لاعتماد وسم جديد؟
يعني ، إن قمت بعمل توصيف مستقل خاص بي وأرسلته إلى W3C فما هي المعايير لقبوله واعتماده؟ ولماذا توجد وسوم معتمدة وأخرى غير معتمدة ؟
4 ديسمبر 2005 في الساعة 6:52 م
جميل جداً …
للمعلومية فقط …
هذا الكود - كاناڤاس - من إختراعات Apple و إضافاتها إلى الhtml و الcss … و قدمتها إلى W3C حتى يتم إعتمادها في بقية المتصفحات بشكل رسمي … منذ أكثر من سنة …
منذ أكثر من سنة و متصفح Safari على أجهزة الماكنتوش يدعم Canavas و عدد كبير من الtags التي لم يتم إعتمادها بعد من أي متصفح آخر …
هذه صفحة Safari
http://www.apple.com/safari
سفاري فعلاً أفضل متصفح على وجه الأرض ….
4 ديسمبر 2005 في الساعة 7:11 م
كالعادة يا أخي العزيز.. لا تكتب موضوع الا وفيه من الفائدة الكثير والكثير..
جعله الله في ميزان حسناتك باذن الله..
باذن الله لنا عودة بعد التجربة ^_^
اضافة:
Canvas كما تفضل الاخ عبدالله هي تلك اللوحة البيضاء, وأضيف ايضا على قوله ان المصطلح الفني لها هو قماشة الرسم (المساحة التي يتم الرسم عليها)
وحتى مصممي الـ photoshop يعرفونها على انها قماشة الصورة
والآن اصبحت عندنا وسم html
4 ديسمبر 2005 في الساعة 8:09 م
جزيت خيرا أخي الحبيب
لمن هذا البيت الشعري الرائع
وجزاك الله خيرا على الموضوع
5 ديسمبر 2005 في الساعة 8:54 ص
معلومات مفيده اخ مازن
شكرا لك
تحياتي القلبية
5 ديسمبر 2005 في الساعة 3:46 م
قبل قليل كانت هناك مشكلة في قاعدة البيانات…
تحياتي
وفي انتظار روائع الشعر العربي
14 ديسمبر 2005 في الساعة 10:34 م
اخي كيف اقدر اغير Firefox 1.5
مشكووووور
17 ديسمبر 2005 في الساعة 10:19 ص
أشكركم على تعليقاتكم و أعتذر عن التأخر في الرد .
abduh : ليس لدي أي فكرة عن معايير اعتماد الوسوم الجديدة ، أتمنى لو يفيدنا أحد في ذلك .
عبد المنعم: لعمر أبو ريشة و مطلع القصيدة ” أمتي هل لك بين الامم … منبر للسيف أو للقلم ”
ابو ياسر : قم بإنزال نسخة Firefox 1.5 من العنوان التالي :
http://www.mozilla.com/products/download.html?product=firefox-1.5&os=win&lang=en-US
ثم قم بتثبيتها .. هذا كل شيء