d 3 يناير، 2018 – الصفحة 18 – مدونة الفريق

مدونة الفريق

اليوم: 3 يناير، 2018

  • ما ينقصك معرفته عن صيغ الفيديو و HTML5

       

    لقد قرأت العديد من المقالات والمواضيع حول دعم ال HTML 5  لوسم الفيديو الجديد، وجميعها كانت تتكلم عن الوسم نفسه ، ولكن لم يتطرق أحد إلى ما هي صيغ الفيديو المسموحة، لأني جربت وتعبت في البحث إلى أن قررت أن أشارككم ما وجدت.

    حول وسم الفيديو / فهو مدعوم في المتصفحات التالي <video>

    IE 9

    FireFox 3.5

    Safari 3 , 4

    Chrome

    Opera

    حاويات الفيديو:

    كما كنت اعتقد أن امتداد الفيديو يحدد نوعه، ولكن هذا خطا فالامتداداتj مثل AVI  أو WMV  أو MP4 هي حاويات الفيديو وليس نوع الفيديو ، مثال هي كالملف المضغوط ZIP , RAR  وبداخلها الملفات

    ولأكون أكثر دقة، فهي مسؤولة عن كيفية تخزين الفيديو بداخلها، وليس نوعه، وهنا يجب معرفة أن الملف يخزن مسار الفيديو، مسار الصوت ( أو تكون أحيانا عدة مسارات )، بعض المعلومات الهامة عن المحتوى.

    وهذه بعض من حاويات الفيديو المشهورة

    Flash Video: مشهور بالامتداد FLV من شركة أدوبي

    MP4 : من شركة أبل ، مبني أساسا على الامتداد mov

    Ogg : امتداد مفتوح المصدر، ويسمى ثيورا Theora، وبعض المتصفحات توفر دعم تلقائي لهذا الامتداد ، بدون تحميل ملحقات مثل الفايرفوكس 3.5 وأوبرا 10.6. بالأساس تم تطويره لبيئة اللينكس ، ولكنه يعمل على كل الأنظمة فمثلا برنامج VLC المشهور، يشغله بدون أي مشاكل.

    Webm  وهو الامتداد الجديد الذي سمعتم عنه ، ويسمى ماتروسكا Matroska ، وهذا الامتداد يعتمد على النوع VP8  والصوت من فوربس Vorbis وهو ما سيتم توضحيه لاحقا.

    Audio Video Interactive : وهو امتداد مايكروسوفت المشهور AVI  ، والذي أصبح قديما ، لأنه لا يدعم الأنواع الحديثة، وأيضا لا يدعم التوصيف Meta data.

    محولات الفيديوVideo Codecs

    عند الحديث عن تشغيل ملف فيديو ، فنحن نتحدث عن تشغيل مسار فيديو وتشغيل مسار صوت، أو عدة مسارات ، مقترنين ببعض، ليظهر لنا كأنهم مقطع واحد في نفس اللحظة، وبالتالي نفهم أن المشغل ، يقوم بعدة عمليات منها تشغيل مسار الصوت والصورة، وكذلك محاولة فكهم من الحاوية بدقة ( Decoding )، وهذا هو محول الفيديو ( الكوديك )

    ويمكن من هنا تعريف الكوديك على أنه خوارزمية معينة لحفظ الفيديو وترميزه Encoding  ثم فك ترميزه عن العرض، لكي يعرض الصوت والصور على أنها إطار مستمر ، ومن هنا نشأت صيغ كثيرة للكودكس، فمنها ما يعرض عدد إطارات أقل لتقليل الحجم مثلا MKV ، ومنها ما يضحي بالصوت وجودته، ومنها ما يضحي بجودة الصورة وهكذا. وهذه قائمة بببعض كودكس الفيديو http://samples.mplayerhq.hu/V-codecs/، ولكن في هنا سنتكلم عن أهم ثلاثة وهم : H.264, Theora, VP8

    الكودك: H.264

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

    الكودك : Theora

    وهو مجاني ومفتوح المصدر من شركة xiph.org  ومبني على الكودك VP3 ، ويمكن تحميل المتطلبات من موقعه الرسمي http://www.theora.org/downloads/

    الكودك : VP8

    وهو ما سمعنا عنه مؤخرا بمساعدة ودعم جوجل ، أصبح مفتوح للجميع بدون ترخيص استخدام، وهذا الكودك قريب جدا من الكودك H.264، وله مستقبل باهر لانه يتفوق على الكودك الأخير في أغلب النواحي

    أما عند الحديث عن كودك الصوت ، فيوجد Advanced Audio Layer 3 ( MP3 ) وهو الأوسع انتشارا إلا أنه يعيبه قلة نقاء الصوت به،

    وهنالك Advanced Audio Coding ( AAC) وهو مقدم من شركة أبل ، وأفضل من النوع السابق في نواحي كثيرة،

    وأخيرا هنالك النوع Vorbis الموجود في الامتداد Ogg  وهو مفتوح المصدر، وواسع الانتشار ومدعوم ضمنيا في بعض المتصفحات مثل الفايرفوكس.

    الكودك :WebM

    يستخدم الكودك VP8 للفيديو ، والكودك Vorbis  للصوت ،وهو ما تدعمه جوجل الان والعديد من الشركات لأنه مفتوح المصدر ومجاني

    إذا أي نوع أستخدم.

    صراحة هذه أكبر مشكلة ، فالمتصفحات تختلف عن بعضها البعض في دعم الكودكس، والاقتراح السائد هو أن تقوم بتحويل الفيديو الخاص بك إلى عدة أنواع لكل متصفح

    وهذه الصورة توضح المشكلة: حيث كل متصفح يدعم على هواه

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

    وبخصوص الأندريود حسب وعد جوجل، ستقوم بدعم كودك WebM في القريب العاجل جدا جدا.

     أو أن تستخدم النوع Ogg المبني على الثيورا والفوبس بنفس الوقت وهو اختيار سائد

    الان بقي عليك تحويل الفيديوهات إلى النوع الذي تريده، وأذكر في هذا المجال أداة Firefogg، وهنالك بعض البرامج المدفوعة والتي ستريحك أكثر منها.

    تحديث:

    يوجد برنامج آخر اسمه Miro وهو مجاني ، وقد ارتحت له كثيرا ( أكثر من الفايرفوج ) ، وقد استخدمته عدة مرات ولم يخيبني

    بالتوفيق

  • خصائص HTML5 المدعومة في Internet Explorer 9

    إنترنت أكسبلورر 9 الجديد ، يدعم الكثير من الإضافات والمعايير وهذه قائمة بما يدعمه المتصفح للآن من خصائص ووسوم

  • نصيحة لرواد التكنولوجيا ( مبرمجين أو مصممين ) للبقاء في الصدارة

    دائما ما نقول ، لقد صغرت ملابسي علي ، ولكننا هل فكرنا فعليا ما الذي حدث ؟ ،
    الملابس لم تصغر تقنيا ، ولكن جسمنا هو الذي كبر عليها ، وترانا دائما نرمي باللوم
    على هذه الملابس ولا نأخذ بالا.

    وأتذكر في هذا المقام الإمام الشافعي رحمه الله وهو يقول :
    نعيب زماننا والعيب فينا …….. وما لزماننا عيبٌ سوانا
    ونهجو ذا الزمانَ بغير ذنبٍ ….. ولو نطق الزمان لنا هجانا

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

    فإذا أردت أن تبقى في الصدارة، عليك بتحديث علمك ومواكبة كل جديد في مجالك ، وعلى
    سبيل المثال ، المبرمجون هنا ما زالوا يستخدمون للاتصال بقواعد البيانات شيء يسمى
    ADO.NET Framework وهذا النمط موجود من عام 2001 ، وللعلم من العام 2001 ، إلى
    العام 2011 ، ظهرت 9 تقنيات جديدة أفضل منه ، ولكن من منا حدث ؟
    من كثرة إختلاطي بالمعلمين ، وبأصحاب الخبرة من المبرمجين ، وبأفضل المراكز التي
    تعطي الدورات ، لم أجد أحد قد استخدم ولو ثاني تقنية مثلا التي ظهرت في عام 2004 ،
    وإن قرأ البعض عن بعض التقنيات الحديثة إلا أنه لا أحد استخدمها ، ولا حتى أساتذة
    الدورات ( المدربون ) قد حدثوا دورتهم وأفادوا طلابهم، ولذلك يخرج الطالب من الدورة
    بعلم قديم وعليه البدء من جديد بتعلم كل ما هو جديد.
    الخلاصة ، اجعل لك كل أسبوع يوم ، نعم يوم كامل للقراءة ومواكبة التحديثات
    والتقنيات الجديدة في مجالك ، وإلا سيسبقك القطار.

  • كيف تتعامل المتصفحات مع الوسوم الغير معروفة ؟!

    علامة الاستفهام؛ وجودها في آخر العنوان منطقي لأنه سؤال، أما علامة التعجب فلم
    موجودة!، لماذا التعجب ، حسنا سبب ذلك أنك عندما ترى كيف تتعامل المتصفحات مع العناصر الغير معروفة ،
    ستسغرب ، فهي تختلف عن بعضها البعض.
    لنأخذ في البداية متصفح الفايرفوكس ، فتعريف العناصر يتم في ملف nsElementTable.cpp
    ، وبالتالي أي عنصر  أو أي وسم غير موجودين في هذا الملف ، فإن المتصفح لا
    يتعرف عليه.
    طيب ، ماشي ، ولكن ما الفائدة من هذا الكلام ؟
    الفائدة أنه طالما يوجد وسم غير معروف في المتصفح فستكون هنالك عدة مشاكل على
    رأسها
    1- كيف سيتعامل المتصفح مع عرض هذا الوسم ( أتكلم عن الشكل style  )
    2= كيف سيعرض المتصفح العناصر التي بداخله ( الأبناء ) فنحن نعرض عن الوسم ul 
    يجب أن يكون بداخله وسوم li  ولها طريقة معينة للعرض ، ولو كان الوسم ul 
    غير معروف ، فإننا نتوقع مصيبة في الشكل ( DOM tree ).
    لا أريد الخوض في تفاصيل
    كل متصفح على حدة ، ولكن لنقل أن كل المتصفحات في هذا الجانب تتصرف
    بعقلانية ، إلا المتصفح عزيزي الإنترنت إكسبلورر 8 وما قبل ( الإصدار 9 مختلف )،
    وهذا سبب كتابة المقال ، لأن الهدف حل المشاكل، والمشاكل موجودة هنا في الإكسبلورر
    فقط.
    إذا ما الحل مع الإكسبلورر ؟
    الحل يكمن في استخدام مكتبة جافا سكريبت لدعم العناصر الجديدة ( مثلا في HTML 5 
    ) ، وأيضا عدم إضافة ستايل لهذه العناصر ، والمقصد هنا استايل باسم الوسم nav 
    جديد في html5  يجب عدم إضافة ستايل باسمه بهذا الشكل مثلا

    
 nav {  color:Red }

    أما حل المشكلة المشكلة الثانية وهي عدم ظهور شجرة DOM ، وهنا أقصد احتواء العنصر
    على أبنائه ، فيكمن في استخدام مكتبات الجافا سكريبت المتوفرة لجعل هذا العنصر
    مدعوم، وبنظري أفضل مكتبة لهذا الغرض HTML5 enabling script.
    لنقم الآن لكتابة الخلاصة
    إذا كنت ستستخدم ال HTML5  كما في هذا الموقع www.deveworld.com ( أول موقع
    عربي بمعايير HTML 5  صحيحة ) ، فعليك بالتالي
    1- تضمين مكتبة الجافا سكريبت للاحتياط ، وهذا للمتصفحات القديمة / اكسبلورر 8 ،
    فايرفوكس 3 … إلخ.
    2- عدم وضع ستايل للعناصر الجديدة.

  • صورة اليوم: هل تريد سن سيفك!

    هل لديك سكين، أو موس ، أو أداة قطع تريد أن تجعلها حادة ؟ ، وتريد أن تسنها، أقدم لك الحل السحري في الصورة التالية

  • كيفية الربط مع موقع Gravatar

    موقع Gravatar يقدم خدمة هامة، وهي إمكانية إنشاء حساب ووضع صورة له، ومن ثم يمكنك استدعاء هذه الصورة حسب بريدك في العديد من المواقع والبرمجيات على رأسها wordpress وباقي المدونات، وذلك من دون تدخل منك فقط قم بوضع البريد وستظهر صورتك بجانبها
    طريقة الربط سهلة جدا ، قم بتحميل هذه المكتبة من هذا الرابط، أو يمكنك تحميل الشيفرة المصدرية الخاصة بها من هذا الرابط،
    ضع ملفات المكتبة في مجلد Bin في مشروعك
    قم باستدعاء المكتبة أعلى الصفحة التي تريد إظهار الصورة بها، كالتالي

    Code

    <%@ Register Assembly="FreshClickmedia.Web" Namespace="FreshClickMedia.Web.UI.WebControls" TagPrefix="fcm" %>

    الأن استدعي الصورة في أي مكان تريده بالشكل التالي:

    Code

    <fcm:Gravatar ID="Gravatar1" runat="server" Email='<%# eval("email") %>’ LinkTitle='<%# eval("UserName") %>’ DefaultImage="https://blog.developers.ps/img/userpost.png" OutputGravatarSiteLink="false" Size="48" />

    خصائص الأداة
    Email: هنا اسم البريد وأنا أرسلت البريد من قاعدة بيانات ، وذلك عبر استخدامي Eval ، تستطيع ببساطة كتابة اي بريد على سبيل المثال

    LinkTitle: عنوان الصورة
    DefaultImage: وهي الصورة التي ستظهر في حالة عدم وجود صورة لهذا البريد
    توجد خصائص أخرى مثل التقييم ، ونوع الصورة من الموقع ، وأبعاد الصورة .
    وهذا مثال على ذلك

     

  • تهيئة الموقع لارشفته في جوجل صور

    السلام عليكم ورحمة الله وبركاته
    شعار جوجل 
    كما نعرف ان الصور مصدر حافل بالزوار وخصوصا من خلال جوجل ولاكن يعاني الكثير منا من تاخر نتائجة بها في اليوم سوف نتناول طريقة ئهيئة الموقع وجعله في اولى النتائج في جوجل صور (المزيد…)

  • احذر من كتب برمجة الألعاب التي قد تطيح بمستقبلك كمبرمج للألعاب

    http://www.arabteam2000-forum.com/index.php?showtopic=251215

  • المبرمج والعمل بالسخرة للمعارف

    العمل بالسخرة: هو أن تعمل مجانا أو مقابل طعامك وملبسك ساعات طويلة ومهينة، وأشهر عمل بالتاريخ العربي كان بالسخرة هو حفر قناة السويس.

    هنالك نوعين من الأعمال في العالم، نوع يقدم سلع Products  ونوع يقدم خدمات Services

    النوع الأول ( السلع ) تقوم بدفع مبلغ مالي فتحصل في المقابل على شيء ملموس، مثلا قميص، جوال، سنادويتش، هذا النوع من الأعمال لا يواجه الناس أي مشكلة في تقبل عملية الدفع، لأنهم ببساطة يحصلون على شيء ملموس في المقابل، ولن أطيل في الحديث عنه.

    المشكلة في تقبل الناس للنوع الثاني الذي يقدم الخدمات.

    مثال عليه، أنت ذهبت لكي تعمل سوفتوير للجوال في محل ما، يقوم صاحب المحل بشبك جوالك وتنصيب السوفتوير في دقائق وتتم العملية.

    مثال آخر حينما تذهب لتحلق عن الحلاق، فإنه يقدم لك خدمة، ولا يعطيك سلعة.

    كذلك المبرمج والمصمم وأغلب فنيي الحاسوب، يقدمون خدمات.

    بالمنطق لا يمكنك أن تقوم بالحلاقة مجانا عند الحلاق، وإلا لكان الحلاق صاحب عمل خيري، فهو كيف سيعيل عائلته إن كان مقابل الخدمات مجانا.

    أصدقائي وأحبائي، الكثير منهم لا يستوعب هذا الأمر، وهو أمر أعاني منه بشكل شبه يومي.

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

    صديق آخر طلب مني أن أخدمه في مشروع تخرج صغير ( عبارة عن جدولين ) فقلت له وقتي ضيق، فقال سأدفع، قلت له ساعتبرها هدية وستكون مبلغ 100 دولار، فقال لي لا مشكلة.

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

    بعد نهاية المشروع حسبت وإذا بي قد عملت على مشروعه ما يزيد عن 140 ساعة ( وقد اضطررت لأطلب من صديق مساعدة لكي ننهي المشروع).

    انتهى المشروع وحصل صديقي على ما لم يحصل عليه أحد جراء المشروع، لم أتلقى الشكر اللازم، وقلت لصديقي سأحسب أنني عملت بدلا من 140 ساعة فقط 100 ساعة، والساعة نجعلها 3 دولار ( مع ان ساعتي من 17 – 30 دولار وتصل في أحيان الى 60 دولار ).

    أي أن كل عملي سيكون 300 دولار، فاستهجن صديقي الموضوع، وقال لي اتفقنا على 100 دولار، أخبرته أنها كانت حينما كان المشروع جدولين، وكان علي فقط أن أساعدك ولا أن أعمل المشروع كامل، أيضا ثمن الاستضافة هو 50 دولار والتي دفعتها مني.

    بعد عناد منه طويل( خلاص المشروع انتهى، وإما أقبل أو لا ) وافقت على مبلغ 147 دولار ، ذهب منهم 47 دولار لصديقي الذي عمل 40 ساعة معي، وأنا أخذت 100 دولار، وهي بالمناسبة لا تساوي ثمن الحذاء الذي يلبسه ليتباهى به أمام الناس، أي أني لا أساوي…

    لو أن هذه الساعات قضيتها مع عائلتي، أو أدرس كتاب، أو أحسن مواقعي، أو أكتب مقالات، أو أتم عمل لعميل، لكانت استفدت أضعاف الأضعاف،

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

    ما الهدف من المقال هذا:

    • الهدف إذا كنت مبرمج محترف،

    •  ألا تعمل مجانا لأحد مهما كان، فالعمل عمل، ولا داعي للعواطف إلا لأمك أو أبيك أو إخوتك،

    •  إذا عملت لشخص وخصوصا إذا كان قريب، إبدأ بتسجيل شاشتك لكي تخبره أنك عملت عدد ساعات كذا لتحاسبه بدون زعل.

    •  في نهاية العمل المجاني لن يقدر أحد تعبك، وسينسى الناس كم خدمتهم، لذلك إجعل عوضك المقابل المادي، إلا إذا كان المشروع خيري بطبيعة الحال.

    •  ستجد أن من تعمل له مجانا ( غالبا إلا من رحم ربي ) سينساك بعد شهر، والاحترامات والتقدير ووو كله كان قناع المصلحة، وسيزول هذا القناع، وستجد أن مكالمة قد يصرفها من خدمته على فتاة تساوي المبلغ الذي دفعه لك، أو أنه يتصل ليهنئ هذه الفتاة لأن زوجة عمة صديقتها قد أنجبت طفلا، وأنه لا يتصل بك حين كان الواجب أن يتصل بك، وأعتذر منكم أعزتي القرا على هذا المثال، ولكنها الحقيقة وقد رأيتها.

    • إذا المرء لا يرعاك إلا تكلفا … فدعه ولا تكثر عليه التؤسفا

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

  • حل أغلب مشاكل الويندوز فون وخصوصا مشاكل الإنترنت

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

    الحل ان شاء الله بسيط وهو عبر خطوتين سهلتين   


    الأول
    ضبط تاريخ ووقت الهاتف


    والثاني
    تعديل الدولة : فاغلب الدول العربية والعالمية غير مدعومة لذلك يجب وضع دولة مدعومة وانا انصح باختيار الولايات المتحدة

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