مدونة مؤيد

غيّر العالم ... أو العب بعيداً

مرجع للتعامل مع القيم النصية في جافاسكريبت

19. نيسان 2007 مؤيد مارديني تصميم و تطوير المواقع (0)
إن كنت تريد المرجع الكامل في التعامل مع القيم النصية String عن طريق الجافاسكريبت فإن هذا الموقع المفيد يقدم لك هذا المرجع و المقسم إلى عدة أقسام منها الخصائص Properties و الإجراءات Methods المتوافرة في جافاسكريبت من أجل التعامل مع النصوص.   قم بزيارته على العنوان The Complete Javascript Strings Reference.

وضع أي نص في متغيرات جافاسكريبت

8. نيسان 2007 مؤيد مارديني تصميم و تطوير المواقع (1)
إن حاولت مسبقاً وضع نص عادي في متغير (أو في كود) جافاسكريبت فستلاحظ المشاكل الناتجة عن كتابة بعض المحارف مثل ' " / و غيرها. أقترح عليك استخدام الخدمة المسماة Convert text to JavaScript readable لحل هذه المشكلة، بعد أن تضع لها النص الذي تريد كتابته في متغير الجافاسكريبت قم بضبط الخيارات ثم دع الموقع ينشئ لك كود الجافاسكريبت اللازم بدون خطأ.

SearchStatus - إضافة هامة لأصحاب المواقع

4. آذار 2007 مؤيد مارديني تصميم و تطوير المواقع (0)
هم أصحاب المواقع الأول بعد الانتهاء من تطويرها هو نشرها، موقع غير معروف لا قيمة له، الكثير يستخدم خدمات مأجورة لنشر مواقعهم و البعض الآخر يقوم بنشرها بنفسه، سواءً كنت من النوع الأول أو الثاني ستحتاج لمراقبة شهرة موقعك من خلال عدد من العوامل، العامل الأهم حالياً هو قيمة الموقع (أو الصفحة) في غوغل Google PageRank، و هناك عوامل أخرى مثل عدد الروابط للموقع أو شهرته في Alexa. SearchStatues هي إضافة لـFirefox تقوم بإنشاء شريط جديد يسمح لك بعرض تلك المعلومات و غيرها الكثير بسهولة شديدة، أكثر العمليات تعقيداً يمكنك القيام بها بواسطة ضغطتين بزر الماوس!، بعض المهمات لا تحتاج إلى أي ضغطة أصلاً، لأنه يمكن عرضها بصورة افتراضية في شريط المهام أو أي منطقة أخرى من المتصفح (مثل تقييم الصفحة في Google). قم بإلقاء نظرة على هذه الصورة لمعرفة شكل قوائم هذه الإضافة و بعض مزاياها.

المثالية في الربط بين الصفحات في XHTML - الجزء الثالث

23. شباط 2007 مؤيد مارديني تصميم و تطوير المواقع (0)
تحدثنا في أول جزئين من هذه السلسلة عن أفضل الطرق التي عليك اتباعها للربط بين الصفحات و لكننا لم نذكر حتى الآن الفوائد ��لعملية التي ستجنيها من هذا. في متصفح الديناصور المنقرض -المنقرض هو المتصفح و ليس الديناصور- Mozilla و ابتداءً من الإصدار الأول فيه كان يفهم هذا الربط ليترجمه من خلال شريط أدوات فعال اسمه تصفح الموقع Site Navigation Tool Bar (و يمكن الوصول إليه من القائمة View ثم Show/Hide) و كان متصفح Opera يفهم هذه العلاقات ابتداءً من نسخته السابعة بشريط شبيه بذلك. بالنسبة لـFirefox، بحثت عن دعمه لهذا النوع من الروابط لأجد أنه يحتاج إلى إضافة اسمها Link Toolbar ليفهم هذه العلاقات بالإضافة إلى توقعه لبعض العلاقات الغير مصرح عنها، يمكنك عمل Customize للـToolbar لتجد أنك ستستطيع إضافة أزرار Next, Previous, Last, First و غيرها. الموضوع قديم نوعاً ما، لذلك ستجد أن بعض المتصفحات القديمة مثل Mozilla بالإضافة MSNTV كانت تستخدم هذه الروابط لتحسين الأداء (لا أعرف إن كانت المتصفحات الحالية تقوم بنفس الفائدة أم لا)، بمعنى أنه إن كانت العلاقة هي next (أو prefetch كما يفضل Mozilla) و كان الـURL محدد سيقوم المتصفح بالتعامل مسبقاً مع الصفحة التالية في الوقت الضائع، أي أنك إن أنهيت تحميل الصفحة الأولى لمقال و بقي المتصفح في حالة سكون (عدم تحميل أي شيء) فسيفترض المتصفح أنك تريد رؤية الصفحة الثانية من المقال ليبدأ بتحميلها للاستفادة من الوقت الضائع، و في حال تخزين الصفحة إلى Cache المتصفح سيقوم بعرضها بسرعة أكبر عند الانتقال إليها. في حالة Mozilla و الذي كان شائعاً أكثر من MSNTV، كان يبحث هذا المتصفح عن رابط باستخدام الوسم <link> أو رابط HTTP و تكون علاقته بالمستند الحالي هي next أو prefetch. فمثلاً الرابط التالي باستخدام الوسم <link> : <link rel="prefetch" href="/images/logo.gif" /> يكافئ : Link: </images/logo.gif>; rel=prefetch /> و يكافئ أيضاً : <meta http-equiv="Link" content="</images/logo.gif>; rel=prefetch" /> و هو كما تلاحظ استخدام لوسم <meta>. و يمكن تحديد أكثر من عنصر لتحميله أثناء الوقت الضائع للمتصفح و ليس مجرد عنصر واحد. يمكن كذلك استخدام كود Javascript أو أداة ActiveX لدعم هذه الميزة الذكية في موقعك. لا ننسى أيضاً ربط ملفات CSS بصفحتك عن طريق الوسم <link>، و هو كما ذكرنا في الجزء الثاني يحتاج إلى العلاقة "Stylesheet" مع المستند الحالي مع تحديد موقع الملف بالخاصية href، و يفضل تحديد الخاصية type بـtext/css بالإضافة إلى تحديد الخاصية media. يحب أن يكون هذا هو الجزء الأخير من هذه السلسلة، و لكن مازال هناك الحديث عن أحد المشاريع التي ستقوي الربط بين المستندات و هو الجزء الرابع و الذي سأعتبره الأخير. حكمة التدوينة : An API that isn't comprehensible isn't usable - James Gosling

CSS 3 : ما الجديد فيها - كلام لا بد منه

19. شباط 2007 مؤيد مارديني تصميم و تطوير المواقع (2)
CSS 3، الهدف الذي تبذل الجهود من أجل إنجازه، رغم أن CSS2 -و التي طرحت قبل حوالي 9 سنوات- لم تلق الدعم الكامل من قبل أي متصفح حتى اليوم، و من الطريف أن هناك بعض المتصفحات التي تواجه بعض المشاكل في التعامل مع بعض خصائص الـCSS 1، و للمهتمين بمعرفة جديد الـCSS3 يمكنهم زيارة صفحة CSS في موقع W3C. قراءة سريعة في هذه التقنية الجديدة تخبرك أنه سيتم تقسيم مواصفات الـCSS3 إلى واحدات مما سيسهل التعامل مع كل وظيفة. CSS3 يعد كذلك بدعم واسع للغات العالمية، تسهيل التعامل مع التدفق العمودي للمحتوى، تحسين التعامل مع الجداول، تسهيل إنتاج المستندات القابلة للطباعة، الخطوط (Fonts) القابلة للتحميل، تحقيق التكامل مع عدد من التقنيات مثل SVG أي Scalable Vector Graphics و تقنيات أخرى مثل MathML و SMIL أي Synchronized Multimedia Interchange Language و بعض التقنيات الأخرى. CSS3 تبشر كذلك بتحسين التكامل بينها و بين XHTML و لغات السكريبت التي تستخدم في صفحات الويب من خلال بعض الأفكار مثل BECSS أي Behavioral Extensions to CSS. من الواضح أن CSS3 ستقدم بعض النواحي الجديدة و التي ستجد أن CSS2 بسيطة بالنسبة إليها، مثلاً لن تكون مضطراً للتقيد باختيار الابن الأول لأحد العناصر حسب البنية الشجرية للمستند، و لكن يمكنك اختيار أي ابن له. الـSelectors أصبحت أقوى في تحكمها، فهي تقدم مقارنة أقوى مثلاً، كذلك يمكنك فحص النص المحتوى داخل أحد العناصر، يوجد العديد من المجالات الأخرى التي سنعرفها في وقتها. نصيحة : لا تتحمس جداً، ما زال هناك الكثير حتى تصبح الـCSS3 محققة فعلياً و مدعومة بشكل جيد من المتصفحات! حكمة التدوينة : Measuring programming progress by lines of code is like measuring aircraft building progress by weight - Bill Gates

لماذا عليك كتابة كود صفحاتك يدوياً

10. شباط 2007 مؤيد مارديني تصميم و تطوير المواقع (1)
نصيحة قبل أن نبدأ : "إذا كنت جاداً في أنك تريد أن تبلغ الإحترافية في إنشائك لصفحات الويب فإن عليك أن تتعلم كيفية كتابة كود صفحاتك يدوياً". سأقول لك في البداية أنني أقوم بكتابة كود الصفحة بكامله يدوياً، طبعاً أنت حر في استخدامك لبعض أدوات الـWYSIWYG (ما تراه هو ما تحصل عليه What You See Is What You Get) و لكن يجب ألا يكون ذلك دون مراقبة الكود بعد كل أمر ثم تعديله يدوياً، طبعاً لا عذر للقيام بذلك إلا عند القيام بعمل بعض الأمور التي يصعب عملها يدوياً مثل الجداول المعقدة، لأنه لم يوجد بعد المحرر الذي يسمح لك بإنشاء مواقع ممتازة، فكلها و لا شك ستضيف كودات تبطء الصفحة أو تقلل من قابلية الوصول أو من مطابقتها للمعايير القياسية أو أو .... و قد اقتعنت في الفترة السابقة أن كتابة كودات لصفحات الويب يدوياً هي خبرة أساسية من خبرات مصمم مواقع الويب الحقيقي، و تتلخص فائدة ذلك بالنقاط الثلاث التالية : -خبرة أفضل -تحكم أكثر -سرعة أكبر بقراءتك للفقرة السابقة تكون قد قرأت مخلص المقال، إذا أردت المزيد من التفصيل تابع القراءة. خبرة أفضل : لا أقول أن عليك كتابة كل شيء يدوياً، و في كل وقت، و لكن قدرتك على كتابة الكود يدوياًَ ستعطيك القدرة على الاختيار بين هذين الخيارين، كتابة الكود يدوياً أو بواسطة برنامج. الفائدة الأكبر من كتابة الكود بنفسك بدلاً من السماح لبرنامج بالقيام بذلك بدلاً عنك هي أنك تعرف تماماً ما يجري تعديله/إضافته/ إزالته في الكود، و لكنك لن تستطيع ذلك إلا بإتقانك لـHTML أو XHTML بالإضافة إلى CSS و Javascript، لأنك أنت من سيجعل الكود يعمل و ستصحح أخطاءه بنفسك، و هذا يعني أنك إن واجهت أي خطأ ستكون عندك القدرة لتحديد مكان الخطأ على الأقل. بعض المحررات اللعينة تضع في كود الصفحة أكواداً لا تعرف من أين جاءت و لا كيف و لا متى و لا لماذا، و لن تعرف كيف تصلحها في حال حدوث أي مشكلة فيها. تحكم أكثر : باستخدامك لمحرر WYSIWYG لن تستطيع ببساطة أن تأخذ هذا القدر من التحكم، إلا إذا وجدت برنامج يسمح لك بإدخال الكود كله على شكل مربعات حوار و رسائل و غيرها، و حتى في هذه الحالة سيكون هناك فرق كبير في السرعة. كتابة الكود يدوياً تتيح لك إنشاء كودات أصغر حجماً مما تنشأه البرامج، لأن معظم البرامج تتبع العادة السيئة "حشو الكود" و هي تعني إضافة تاجات Tags و أسطر عديدة من الكود للقيام بمهمة بسيطة، و قد تحسن هذا كثيراً في السنوات القليلة الماضية و لكن لم يصل أي برنامج لمرحلة الكتابة اليدوية في نظافة الكود و صغر حجمه. كتابة السكريبتات : فيما يتعلق بـJavascript و غيرها من أنواع السكريبتات، بعض المحررات يمكنها إضافة بعض الأكواد الجاهزة، المفيدة و المرنة إلى حد ما، و هذا سيؤدي إلى تنفيذ مهمة مفيدة بقليل من الجهد و الخبرة. رغم ذلك، المصممين الأكثر خبرة لن يسعدهم إستخدام كودات جاهزة، لأن هناك دائماً المزيد من الكودات التي تتبع الطرق الحديثة، لأنه لا أحدث عليه كتابة كودات للقيام بكل شيء فيمكن دائماً استخدام المكتبات البرمجية المفيدة. سرعة أكبر : أنا مقتنع بأن عملية إنتاج كود كامل مرتب يدوياً أسرع من إنتاج كود "ملخبط" باستخدام أي برنامج WYSIWYG ثم إعادة ترتيبه يدوياً، طبعاً يتطلب ذلك معرفة إضافية هي "الطباعة باللمس Touch Typing". حسناً، إذا كنت أعرف الكتابة بسرعة كبيرة فإن ذلك سيعني أنني أستطيع الانتقال بسرعة كبيرة عبر صفحات الويب، و يمكنني استخدام بعض الاختصارات المفيدة بسرعة كبيرة أيضاً، مثل Ctrl+F (البحث) أو Ctrl+M (البحث عن التاج Tag المقابل، مثلاً البحث عن الـ</div> الخاصة بـ<div> معينة و هذه الميزة موجودة في ColdFusion Studio)، و يمكن كذلك إضافة كود قمت بكتابته مسبقاً بواسطة أمر معين و هو ما يطلق عليه القصاصات Snippets، و يمكن إدراجها بواسطة إختصارات لوحة المفايتح، لن أصدق أن هناك أي محرر WYSIWYG يعطيك هذه الدرجة من السرعة و التحكم و الدقة. إن كنت تظن أن كتابة الكود يدوياً تتطلب استخدام الـNotepad فأنت مخطئ، يمكنك استخدام Dreamweaver كمحرر يدوي بدلاً من استخدامه كـWYSIWYG و هناك بعض المحررات النصية (ليست WYSIWYG) مثل W3C Amaya و هو برنامج مجاني و مفتوح المصدر و برنامج TextPad الشهير. خاتمة : كل الفوائد التي ذكرتها أعلاه تتعلق بشكل مباشر بالأداة التي تستخدمها في كتابة الكود، و بخبرة اليدين اللتين تقومان بهذه العملية. لا شك أن هناك بعض الأوقات التي يمكننا أن نستخدم فيها بعض الأدوات لإنشاء تأثيرات جملية، و هذا ما لا أعارضه، في طريقك لإحتراف تطوير الويب و حتى لو بدأت باستخدام محرر WYSIWYG فستحتاج لاستخدام لوحة المفاتيح أكثر ثم أكثر، فلماذا لا تحدد يوم في الأسبوع لتطوير مهاراتك في الطباعة باللمس مما سيساعدك في كتابة كود الصفحات يدوياً؟ أتمنى لك التوفيق في ذلك، و السلام عليكم...

المثالية في الربط بين الصفحات في XHTML - الجزء الثاني

1. شباط 2007 مؤيد مارديني تصميم و تطوير المواقع (0)
تحدثنا في الجزء الأول -من هذه السلسلة- عن الوسم <a> و استخدامه لبيان معنى الرابط و ليس لمجرد بيان العنوان، سنكمل الآن الحديث عن الربط في XHTML، سنبدأ بالوسم <link> ثم سنعرض بعض القيم التي اقترحتها منظمة W3C من أجل بيان العلاقة بين المستندات. يستخدم الوسم <a> لنقل المستخدم من صفحة إلى أخرى عند الضغط عليه، و أما الوسم <link> فله استخدام مختلف تماماً، فهو يربط مستند XHTML بملف، مثلاً ربط صفحة XHTML بملف CSS، مما يؤدي إلى تطبيقه فيها... يجب أن يوضع الوسم <link> في الـhead الخاص بالصفحة، و يمكن أن يتكرر أكثر من مرة في الصفحة الواحدة، تستخدم الخاصية href لبيان موقع الملف المراد الربط به، و أما الـrel فهو يستخدم لبيان العلاقة بين المستند الحالي و الملف المربوط به (راجع المقالة الأولى لمزيد من التفصيل)، و هما أهم خاصيتين على الإطلاق بالنسبة لهذا الوسم، و يجب أن تحاول دائماً تضمينهما، طبعاً تضمين الخاصية الأولى شيء بديهي، و لكن الكثيرين يسقطون الخاصية الثانية. يدعم الوسم <link> أيضاً الخاصية التي تحدد العلاقة العكسية rev (لمزيد من التفصيل راجع المقالة الأولى) و يدعم أيضاً الخاصية title. قيمة الخاصية rel هي مجرد قيمة نصية بسيطة تتألف غالباً من كلمة واحدة، و يمكن للمصم أن يختار أي كلمة يريدها، و لكن المتصفح لن يفهمها في هذه الحالة، فهو يفهم عدد من الكلمات القياسية التي تؤدي كل منها غرض معين، مثلاً، يمكن أن يظهر المتصفح أزرار معينة أو مزايا إضافية للتصفح عند توضيح هذه العلاقة. حالياً، يوجد عدد من القيم الغير قياسية، و لكن معايير HTML 4.01 اقترحت عدد من القيم، سنذكر هنا أبرزها : alternate : هذه القيمة تدل على مستند بديل من المستند الحالي، مثلاً، يمكنك توفير مستند بديل عن المستند الحالي بلغة أخرى، عند ذلك يجب أن تستعمل الخاصية lang، التي تحدد اللغة البديلة، مثال : <link href="a-index.html" rel="alternate" lang="ar" /> appendix : تدل أن المستند المربوط به هو مستند "ملحق" بالمستند الحالي. bookmark : تدل أن المستند المربوط به هو bookmark للمستند الحالي (هل يوجد ترجمة لهذه الكلمة؟)، و يمكن تحديد اسم الـbookmark باستخدام الخاصية title، مثال : <link href="index.html" rel="bookmark" title="homepage" /> chapter : تدل أن المستند المربوط به هو جزء في موقع أو عدد من المستندات التي تشكل مجموعة واحدة. contents : تدل أن المستند المربوط به هو جدول بمحتويات الموقع أو عدد من المستندات التي تشكل مجموعة واحدة أو المستند الحالي فقط، و ينصح باستخدام هذه القيمة بالذات في موقعك. index : تدل أن المستند المربوط به هو جدول بمحتويات الموقع أو عدد من المستندات التي تشكل مجموعة واحدة أو المستند الحالي فقط. glossary : تدل أن المستند المربوط به هو "معجم" أو "مفسر" لتوضيح بعض الكلمات أو الجمل الموجودة في المستند الحالي. copyright : تدل أن المستند المربوط به هو مستند بحقوق النشر أو الاستخدام. next : تدل أن المستند المربوط به هو المستند التالي للمستند الحالي في مجموعة متسلسلة من المستندات، و استخدامها مفيد حقاً، فبعض المتصفحات تقوم بعد الإنتهاء من تحميل الصفحة الحالية بالبدأ بتحميل الصفحة التالية، مما يوفر على المستخدم الكثير من الوقت، فهي تستثمر الوقت الضائع في قراءة الصفحة بتحميل الصفحة التالية. prev : تدل أن المستند المربوط به هو المستند السابق للمستند المربوط به في مجموعة متسلسلة من المستندات. section : تدل أن المستند المربوط به هو قسم في موقع أو مجموعة من المستندات. start : تدل أن المستند المربوط به هو المستند الأول في مجموعة متسلسلة من المستندات. subsection : تدل أن المستند المربوط به هو جزء من قسم في موقع أو مجموعة من المستندات. help : تدل أن المستند المربوط به هو مستند لمساعدة المستخدم فيما يتعلق بالمستند الحالي. stylesheet : ربما هي الأكثر استخداماً، و هي تربط المستند الحالي بملف ستايل خارجي. مازال هناك الكثير للتحدث عنه فيما يتعلق بالربط، نجد أن الربط أضخم من مجرد وضع وسم <a> و وضع العنوان فيه و كفى، و هذا ما يقوم به الكثير من المصممين للأسف. أرجو أن تكون قد استفدت من هذا الكلام... لا تفرح، لم ينتهي الحديث بعد :)

المثالية في الربط بين الصفحات في XHTML - الجزء الأول

30. كانون الثاني 2007 مؤيد مارديني تصميم و تطوير المواقع (0)
في البداية، أود أن أذكر بأن لغة XHTML ما هي إلا تطوير على لغة HTML، فـXHTML تعني eXtensible HTML، أي لغة HTML القابلة للتوسع، إذن HTML و XHTML تتفقان بالأهداف... حسناً، HTML تعني HyperText Markup Language، و النقطة التي نتحدث عنها هي الـHyperText، لن يكتمل معنى هذه الكلمة إلا بربط HyperText بآخر. أردت الوصول إلى أن جزء مهم من HTML و XHTML هو الوصل أو الربط بين الصفحات، و هو يتم عادةً باستخدام الـURLs، أو ما يطلق عليه محدد أماكن الموارد المنتظم، و هو عنوان فريد، فلا يوجد ملف في الويب يحمل الـURL الخاص بملف آخر. الربط يتم عادة باستخدام الوسم Tag المسمى <a>، و يوجد بعض الحالات التي يجب عليك أن تستخدم <link>. المشكلة أن المبرمجين و مصممي مواقع الويب يبتعدون في كثير من الأحيان عن الإتقان، فصحيح أن الكثير من التصميمات تحقق المعايير القياسية للغة، و لكن الكثير منها لا يلتزم بالطريقة الأمثل، أو الأكمل، للقيام بصفحاته. لن نتحدث بشكل عام، الربط يحوي عدد من المبادئ المفيدة عند ربط الصفحات ببعضها البعض، لأن الـURL يقوم بتحديد عنوان الملف دون مضمونه، و حتى الخاصية Title، لن تساهم بتوضيح علاقة المستند المربوط، بالمستند الحالي. لهذا الغرض تستعمل الخاصية rel للوسم a، هذه الخاصية تستخدم لتوضيح علاقة المسنتد المربوط به (و الموضوع عنوانه بالخاصية href) بالمستند الحالي، مثلاً، إن كنت تريد الربط بالصفحة التالية فإن الطريقة الأمثل -تقريباً- لذلك هي : <a href="page2.html" rel="next" title="Next page">الصفحة التالية</a> نأتي إلى الخاصية rev، هذه الخاصية تحدد العلاقة العكسية بين المستندين، أي علاقة المستند الحالي بالنسبة للمستند المربوط به، فإن كانت الخاصية rel هي next فإن الخاصية rev يجب أن تكون prev، لذلك فإن الشكل الأمثل للرابط السابق هي : <a href="page2.html" rel="next" rev="prev" title="Next page">الصفحة التالية</a> يوجد عدد جيد من المتصفحات ستفهم العلاقة بين المستندات، و قد تقوم بإتخاذ بعض الإجراءات المساعدة التي سنذكرها فيما بعد. للحديث بقية إن شاء الله...