الدرس العربي الأول عن لغة الـ XForms - الصفحة 2

سردال · 08-02-2005, 03:55 PM

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

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

beshoo · 09-02-2005, 04:31 AM

سردال عزيزي كلامك عين الصواب......... تحية لك اخي سردال

اخي الصدر ....
قد اقنعتني ولكن ان اكتب بيدي .... تصميم الصفحة هذا امر بعيد جدا عني ... وايضا اتحداك ان تريني موقع صمم ليناسب شاشة 1024 ويمكن فتح ذات الموقع على شاشة 800*600 بدون منزلقة عرضية......

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

تحياتي للجميع لي عودة قريبة ..........

سردال · 09-02-2005, 11:07 AM

آخر رد ..

بيشو: موقع موزيلا يتناسب مع مقياس 800 بكسل ومع مقياس 1024:
www.mozilla.org

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

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

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

isader.com · 09-02-2005, 03:19 PM

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

مازلت أشكرك أخي بيشو على ردودك التي فتحت لنا موضوعنا لطيفاً و مهماً بذات الوقت، طالما أحببت أن أناقش أحداً فيه...

بالنسبة لقضية إستصعابك الكتابة بيدك، فهذه قضية بسيطه للغايه، و أسهل بكثير مما تعتقد...
و لن أبعد كثيراً هذه المره في طرح المثال: فأنا نفسي كنت من "المتعصبين" لطريقة تصميم المواقع باستخدام برامج الـ WYSIWYG...
حيث أول موقع قمت بتصميمه كان باستخدام الفرونت بيج إكسبرس في العام 1997... بعدها بدأت بتعلم الإتش تي إم إل، و لكني وجدت أمر كتابتي لها بالتوب باد شيئاً صعباً للغاية، لهذا أكملت مسيرتي مع الفرونت بيج و تدرجت في نسخه (98 ثم 2000 و أخيراً الإكس بي)، إلى أن تعرفت على برنامج الدريم ويفر، و على إمكانياته الضخمه في تصميم المواقع، فبدأت باستخدامه و كانت تلك النسخه هي الإم إكس.
و في أواخر عام 2003، فكرت في إنشاء موقع شخصي لي، و لكن بطريقة مختلفة نوعاً ما. كنت وقتها قد سمعت عن طريقة تصميم المواقع بالCSS، فتعجبت نوعاً ما منها، لإنني كنت أظن أن الCSS ماهي إلا لتغيير لون خلفيه أو لتغيير نوع الكتابه في نص معين و غيرها من الأمور البسيطة، لهذا أحبب أن أتعرف على هذه الطريقة، فبدأت بتعلمها من المواقع المصممه بتلك الطريقة بالإطلاع على ملفات الXHTML و الCSS فيها.

و بعد عدد من المحاولات، أخرجت موقعي و الذي يمكنك زيارته من خلال العنوان التالي:
http://www.isader.com
أعترف أن تصميمه ليس بتلك الجودة، و لكن هذا ما استطعت أن اقوم بعمله...

الآن و بعد مرور سنه تقريباًَ على تصميم لأول موقع لي باستخدام الCSS... أقوم حالياً بتصميم موقع الشركة التي أعمل بها بنفس الطريقة، و يمكنك زيارته من خلال العنوان التالي:
http://www.isader.com/merrycss/aboutus.html

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

اقتباس:

وايضا اتحداك ان تريني موقع صمم ليناسب شاشة 1024 ويمكن فتح ذات الموقع على شاشة 800*600 بدون منزلقة عرضية......

مع أني لا أرى أن الأمر يحتاج أي تحدي، لكن أظن أن مثال الأخ عبدالله كافي لإنهاء هذا "التحدي"، و لكن إن أحببت أن تطلع على مثال آخر، فتفضل بزيارة الصفحة التاليه، و قد قمت بعملها الآن أثناء كتابتي لهذا الرد..:
http://www.isader.com/CSS/percentage.html

اقتباس:

على كل حال سوف انتظر ماكرو ميديا وارى ما هو الحل الذي سوف تطرحة وانا ارضى بقرارت ماكروميدا ...

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

على العموم.. أنا بانتظار ردك...

و شكراً لك مره أخرى...

___________________________________________

أخي عبدالله... أحييك و أشكرك على ردودك..

و لكني مازلت أرى أن موضوع تركك للمنتدى هو أمر مازال يحتاج القليل من التفكير و التأني...
فمثلا إن تركت المنتدى و اعتمدت فقط على موقعك... فمن سيرد على المواضيع المطروحه بردود رائعه مثل ردودك بهذا الموضوع؟
أما المواضيع التي تطرحها بالمنتدى، فيمكنك وضعها في أرشيف موقعك، فتظل متوفره لأي شخص أراد أن يعود أليها لاحقاً...

___________________________________________

أشكرك أخي مراقب1 على ردك... و بإذن الله سيعدل أخي عبدالله عن قراره بالإنسحاب من المنتدى...

أخيراً أشكر الجميع على مشاركته... و بإذن الله سأطرح الجزء الثاني من درس الـ XForms قريباً جداً...

و السلام عليكم

عماد الصدر

beshoo · 10-02-2005, 06:59 AM

طيب .....

انا معاكم في كل ما قلتم

والان بالنسبة لموضوع اعادة التصميم وجودة الموقع على الاجهزة الكفية وما الى هنالك من امور ..
هذة تتميز ال CSS عن ال جدول ...
طيب هلفي ما عدا ذلك يوجد تميز ؟؟؟؟
يعني اريد امر تقني ...

شباب اتحملوني انا على وشك ان اقتنع ولا يجي واحد ويقول ستين عمرة ما يقتنع....

المهم

يعني ما ذا تتميز ال <div> برمجيا ؟؟؟؟؟

الموضوع لم يأخذ حدة بعد.............. سوف أشعل النار بين سطور الموضوع ...
تابعونا .....

معكم بيشو من قناه سوالف ............. موسكوووووووووووووووووووووووووووووووووووووووووووووو

EaRL_GreY · 10-02-2005, 08:55 AM

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

isader.com · 11-02-2005, 02:58 AM

أهلا و سهلا بك أخي بيشوو من جديد...

اقتباس:

يعني ما ذا تتميز ال <div> برمجيا ؟؟؟؟؟

الحقيقه لم أفهم بالضبط ما قصدك بهذا السؤال....

فالDiv ليس لها علاقة ببرمجة الموقع، أي أنها وجدت لبناء الموقع من الناحية التصميمة، و ليس التطويرية أو البرمجية..
على العموم أنتظر منك توضيحاً أكثر لسؤالك ذاك....

اقتباس:

الموضوع لم يأخذ حدة بعد.............. سوف أشعل النار بين سطور الموضوع ...
تابعونا .....

معكم بيشو من قناه سوالف ............. موسكوووووووووووووووووووووووووووووووووووووووووووووو

بس شو اللي وصلك على موسكو!!

و بانتظار ردودك النارية......

تحيتي لك...
_____________________________________________________

EaRL_GreY: شكراً لك أخي على ردك اللطيف... و بانتظار مشاركاتك القوية بالمستقبل القريب جداً..

_____________________________________________________

بعد قليل سأنشر الجزء الثاني من درس الـ XForms
فكونوا بالإنتظار...

عماد الصدر

isader.com · 11-02-2005, 05:07 AM

البيانات المرسله Submitted Values
الخاصية المسماه بـ ref و الموجودة في كل أداة تحكم بالنموذج، تقوم بالحقيقه بالإشارة إلى عنصر إبنchild element موجود بالـ model، حيث تجمع البيانات المدخله أولا في هذه العناصر قبل إرسالها إلى أي مكان. أما بحال لم يكن هناك عنصر لأحد البيانات (مثل مثال محرك البحث البسيط الذي ذكرناه في الجزء الأول من هذا الدرس) فإنه يتم صنع واحد تلقائياً.

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

و يمكنك رؤية هذا المثال كتطبيق عملي على الكلام السابق:

كود:

<model>
    <instance><data xmlns=""><q/></data></instance>
    <submission action="http://example.com/search"
                method="get" id="s"/>
</model>

من نظرة سريعة على المثال السابق، يمكنك ملاحظة أن المعلومات الوحيده المرسله عبر هذا النموذج تسمى “q”. الفائدة الواضحه للجميع من المثال الذي شاهدناه هو أننا بهذه الطريقة سنكون قادرين على رؤية أي البيانات التي يتم إرسالها عن طريق هذا النموذج، لكن النظام سيقوم أيضاً بالتدقيق عندما تقول له ref=”q” أنه هناك بالفعل عنصر يسمى q.

لاحظ أنه من الضروري أن تقوم بوضع xmlns=”” بداخل العنصر data و ذلك لإخبار المعالج أن هذه العناصر هي ليس XHTML و لا حتى XForms. كما أنه قد استعملت الكلمة data هنا لوصف العنصر، لكنه بالحقيقه يمكنك استخدام أي كلمة أخرى تريدها.

القيم الأولية Initial Values
يمكنك تعريف بعض القيم الأولية لأدوات التحكم متضمنة الـ checked boxes و selected menu الخ.
لمثال محرك البحث:

كود:

<instance><data xmlns=""><q>Keywords</q></data></instance>

هذا المثال سيملئ الـ text control بالكلمة keywords

و ذات الشيء يمكن تطبيقه على قسم الـ checkboxes ، و سيظهر بالشكل التالي:

كود:

<select ref="flavors" appearance="full">
   <label>Flavors:</label>
   <item>
      <label>Vanilla</label><value>v</value>
   </item>
   <item>
      <label>Strawberry</label><value>s</value>
   </item>
   <item>
      <label>Chocolate</label><value>c</value>
   </item>
</select>

و يمكنك إختيار خياري الـ vanilla و الـ strawberry كما يلي:

كود:

<instance><data xmlns=""><flavors>v s</flavors></data></instance>

و يمكننا عمل القوائم menus بالشكل التالي:

كود:

<select ref="spring" appearance="minimal">
<label>Month:</label>
<item><label>March</label><value>Mar</value></item>
<item><label>April</label><value>Apr</value></item>
<item><label>May</label><value>May</value></item>
</select>

و من ثم يمكننا اختيار الخيارين March و April كما يلي:

كود:

<instance><data xmlns=""><spring>Mar Apr</spring></data></instance>

أما بالنسبه للـ optgroup فهي كالتالي:

كود:

<select1 ref="drink">
   <label>Drink:</label>
   <item><label>None</label><value>none</value></item>
   <choices>
      <label>Soft drinks</label>
      <item><label>Water</label><value>h2o</value></item>
      <item><label>Milk</label><value>m</value></item>
      <item><label>Juice</label><value>oj</value></item>
   </choices>
   <choices>
      <label>Wine and beer</label>
      <item><label>Red wine</label><value>rw</value></item>
      <item><label>White wine</label><value>ww</value></item>
      <item><label>Beer</label><value>b</value></item>
   </choices>
</select1>

و من ثم اختيار القيمة none كقيمة افتراضيه بالشكل التالي:

كود:

<instance><data xmlns=""><drink>none</drink></data></instance>

القيم المخفية Hidden Values
السبب الذي يدعو الـإكس فورمز لعدم احتياجها للأدوات المخفية Hidden Controls هو أن جميع العناصر التي يتم وضعها بداخل الmodel دون وجود أداة تحكم تمثلها بداخل الـ body في ملف الإتش تي إم إل ستكون مخفية. بهذه الحاله اذا أضفنا القيمة results لمثال محرك البحث فسنغير العنصر فيصبح بالشكل التالي:

كود:

<instance><data xmlns=""><q/><results>10</results></data></instance>

إحضار القيم الأولية من مكان آخر Getting Initial Values From Elsewhere

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

كود:

<instance src="http://example.org/forms/templates/t21.xml"/>

أما المستند t21.xml فسيحوي البيانات بالشكل التالي:

كود:

<data><w>640</w><h>480</h><d>8</d></data>

ملاحظة: لست بحاجه للـ xmlns=”” في المستند الخارجي، لكن وجوده لا يضر بشيء.

تعديل أي مستند XML
تحميل المستندات الخارجية تعطيك قدرات عظيمة، هذا بسبب أن خاصية الـ ref ليست فقط كخاصية الـ name في الإتش تي إم إل تقوم فقط بإعطائك المجال لتحديد identifier معين و حسب، لكنها بالحقيقه تمكنك من استخدام الـ XPath. و باستخدام هذه اللغة (XPath) يمكنك تحديد مكان أي عنصر أو خاصية تريدها في أي مستند XML.
هذا يعني أنه حين تعلمك للغة XPath، ستكون قادراًً على إحضار أي عتصر من أي مستند XML ، و وضعه (مثالا) في مستند XHTML . دعنا نأخذ المثال التالي على ما ذكر:
إن أردنا أن نحضر عنصر من مستند XML و أن نضعه في عنصر الـ title في مستند الXHTML، فيمكننا استخدام التالي:

كود:

<input ref="h:html/h:head/h:title">...

و بهذا نعني وسم الـ title الذي هو بداخل وسم الـ head الذي هو بداخل وسم الـ html، و كلهم قد وضع لهم الرمز الذي يرمز على أنهم عناصر من لغة الـ HTML (namespace)
مثال آخر:

كود:

<input ref="h:html/h:body/@class">...

و هو يعني خاصية الـ class بداخل وسم الـ body في مستند الXHTML...

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

كود بلغة HTML:

<p>The shop is <strong>closed</strong> today.</p>

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

كود:

<model>
   <instance      src="http://www.example.com/shop/status.xhtml"/>
   <submission action="http://www.example.com/shop/status.xhtml"
               method="put" id="change"/>
</model
...
<select1 ref="/h:html/h:body/h:p/h:strong">
<label>The shop is now:</label>
<item><label>Open</label><value>open</value></item>
<item><label>Closed</label><value>closed</value></item>
</select1>
<submit submission="change"><label>OK</label></submit>

ملاحظه مهمة: إن أردت أن تقوم بعمل المثال السابق، فيجب عليك أن تنتبه لنقطتين، الأولى هي أن الملف الأول يجب أن يكون مكتوب الـ XHTM:L و ليس الHTML... و الأمر الآحر هو أن عليك التأكد من أن السيرفر الذي يستضيف هذه الصفحات يقبل الطريقه “put” (ليس جميع الخوادم تقوم بذلك).

isader.com · 11-02-2005, 05:14 AM

إرسال البيانات Submission

الإرسالات المتعددة Multiple Submissions

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

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

و لأخذ مثال على هذا الكلام، دعنا نعود إلى المثال السابق الذي طرحناه عن محرك البحث البسيط، لنرى كيف يمكننا إرسال البيانات ذاتها إلى أكثر من سيرفر في الوقت ذاته:

كود:

<model>
   <instance><data xmlns=""><q/></data></instance>
   <submission action="http://example.com/search"
               method="get" id="com"/>
   <submission action="http://example.org/search"
               method="get" id="org"/>
</model>

و نضع هذين الوسمين في الـ body لصفحة الإتش تي إم إل:

كود:

<submit submission="org"><label>Search example.org</label></submit>
<submit submission="com"><label>Search example.com</label></submit>

طرق إرسال البيانات Submission Methods
مثلما الحال في الإتش تي إم إل، فهناك طرق متعددة لإرسال البيانات من النموذج، في الإتش تي إم إل يمكننا التعبير عن طرق إلرسال البيانات بطريقتين هما method و enctype، أما الـإكس فورمز فهي تحتوي على طريقة وحيده و هي الـ Method.

من المعلومات التالية يمكننا رؤية وسوم الالـإكس فورمز و الوسم الذي توافقه من الإتش تي إم إل:
HTML
method="get"
تكون:
XForms
method="get"

HTML
method="post"
enctype="application/x-www-form-urlencoded"
تكون:
XForms
method="urlencoded-post"

HTML
method="post"
enctype="multipart/form-data"
تكون:
XForms:
method="form-data-post"

هناك بعض الطرق الجديده لإرسال البيانات، أهمها هي طريقة method=”post” و التي تبعث النتائج على أنها ملف XML، أما الطريقة الثانيه فهي method=”put” و التي تضع النتائج في ملف XML. أحد الإستعمالات الرائعه لهذا الكلام هو التالي:

كود:

<submission action="file:results.xml" method="put"/>

و الذي يقوم بتخزين البيانات المرسلة من النموذج في ملف XML باستخدام الـ scheme (file

من خلال المثال السابق، يمكنك أن ترى أنه باستخدام هذه الطريقة يمكننا أن نوفر للمستخدم زرين في نهاية كل نموذج الأول هو "التخزين على القرص" (save to disk) او "إرسال" (Submit)

ماذا يحصل بعد الإرسال؟
المفروض و كما بالإتش تي إم إل أن تقوم البيانات الجديدة المرسلة بالحلول محل البيانات القديمه، لكن الآن و باستخدام الـإكس فورمز سيتوفر لنا بعض الخيارات الأخرى التي يمكننا تعريفها باستخدام الخاصية replace بالعنصر submission. القيمة replace=”instance” تعمل على إحلال البيانات الجديده مكان البيانات القديمة. أما القيمة replace=”none” تترك المستند كما هو دون أن تحل محله أي شيئ آخر.

على سبيل المثال، إذا كان عندنا نموذج لموقع بنك معين، و أردنا أن نمنح المستخديمن القدره على تغيير عناوينهم فيه، فيمكننا بهذه الحاله أن نوفر زرين، الأول يعمل على إملاء خانات النموذج بمعلومات الإسم و العنوان إعتماداً على رقم الحساب، و الآخر يعمل على إرسال العنوان الجديد المدخل:

كود:

<model>
    <instance><data xmlns="">
        <accountnumber/><name/><address/>
    </data></instance>
    <submission method="get" action="http://example.com/prefill"
                id="prefill" replace="instance"/>
    <submission method="get" action="http://example.com/change"
                id="change" replace="none"/>
</model>
...
<input ref="accountnumber"><label>Account Number</label></input>
<submit submission="prefill"><label>Find</label></submit>
<input ref="name"><label>Name</label></input>
<textarea ref="address"><label>Address</label></textarea>
<submit submission="change"><label>Submit</label></submit>

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

و إلى هنا ينتهي الجزء الثاني من درس الXForms العربي الأول...

انتظروا قريباً الجزء الثالث و الأخير من هذا الدرس... قريباً...

تحيتي الخالصه...

عماد الصدر

beshoo · 11-02-2005, 09:06 AM

الساعة الان 8.4 صباحا ولم انم ............

قريت بسرعة بدون تركيز ......................

ولكن اجوبة سريعة .....

قصدت بسؤالي ....
وجدت اني سوف ابقى على ال table

ال div لم تنسابني .....ولكن سوف احاول ان اطور نفسي فالموضوع شيق .

طلب بسيط
ممكن تبعت لي صفحة تم اعادا البينات فيها بشكل مبسط وتم عرضها بطرقيتين مختلفتين عن طريق ال XHTML?

بالنسبة للدرس الجديد ...
روعة ويحتاج الى تمحيص ولم استطع ان اجرب لان عندي XP. والاداة لا تعمل على النظام .

الى النووووووووووووووووووووووووووووووووووووووووووووووو ووووووووووووووووووم

isader.com · 12-02-2005, 01:04 PM

أهلا بك أخي بيشوو مره جديده...
زيارتك بتنور الموضوع...

اقتباس:

قصدت بسؤالي ....
وجدت اني سوف ابقى على ال table

ال div لم تنسابني .....ولكن سوف احاول ان اطور نفسي فالموضوع شيق .

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

اقتباس:

طلب بسيط
ممكن تبعت لي صفحة تم اعادا البينات فيها بشكل مبسط وتم عرضها بطرقيتين مختلفتين عن طريق ال XHTML?

الحقيقة لم أفهم قصدك..

لكن إن كان طلبك هو أنك تريد صفحة تم تصميم ملف ال XHTML بطريقتين مختلفتين عن طريق الCSS... ؟
فقد سبق و أعطيتك هذا الموقع
http://www.csszengarden.com

و هو عبارة عن صفحة XHTML واحده، و قد تم تطبيق العديد من التصاميم المختلفه عليها باستخدام ملفات CSS مختلفه... أي أن ملف الXHTML لم يتغير أبداً...

الرجاء توضيح السؤال أكثر إن لم يكن هذا ما عنيته منه...

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

و السلام عليكم

عماد الصدر

marioo · 13-02-2005, 12:54 AM

درس جميل اخوي شكرا لك

beshoo · 13-02-2005, 03:13 AM

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

رسمت الصفحة وسميت الDIV بأسمائها......
وذهلت .......

بالفعل صفحة عادية جدا إستطعت ان أغير تصميمها ............. وظلت الصفحة كما هية لم امس كودها.
ولكن سؤال أنت فعليا عندما تريد ان تغير لون كلمة سوف تضع وسوم على الكمة .......... صحيح ؟؟؟؟

وهنا أقصد أنك سوف تعدل على الصفحة الرئيسية أولا و أخيرا ....

ولكن السؤال ,,,,,

لا اعرف أحس الجدول أكثر متانة ... مبعنى عندما تحجم الشاشة تتأثر كل خلية بالأخرى ... عرفت علي شلون .....

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

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

بالنسبة لموضوع ال XForms .... تقنية جيدة جدا ولكن فضلت أن اكون من رأى الغعلان ولم يشتري المنتج (مبدئيا)......

مع تحياتي القلبية لك أخي عماد الصدر ...

isader.com · 14-02-2005, 03:46 AM

marioo: العفو أخوي.. و كن بانتظار الجزء الثالث و الأخير قريباً.......

beshoo: أعجبتني صراحتك في ردك... و الذي ما كنت لأتوقعه إلا من شخص قدير مثلك...

قد تكون تجربتك الأولى هذه مذهله (كما أسميتها)... و لكن أظنك ستذهل أكثر عندما ترى الإمكانيات العظيمة الأخرى التي يمكنك القيام بها باستخدام الـ CSS...

اقتباس:

ولكن سؤال أنت فعليا عندما تريد ان تغير لون كلمة سوف تضع وسوم على الكمة .......... صحيح ؟؟؟؟

وهنا أقصد أنك سوف تعدل على الصفحة الرئيسية أولا و أخيرا ....

صحيح أنك سوف تضطر لأن تضع بعض الوسوم في ملف الXHTML.. ولكن ما تقوم به هذه الوسوم، هو عملية التوصيل مع ملف الCSS فيعرف المتصفح ما الستايل الذي سيتم تطبيقه على كل كلمة في ملف الXHTML.. أي أن وجودها ضروري جداً، و من دونها لن يتم تطبيق أي ستايل على أي جزء من صفحة الويب التي حضرناها...

اقتباس:

ولكن السؤال ,,,,,

لا اعرف أحس الجدول أكثر متانة ... مبعنى عندما تحجم الشاشة تتأثر كل خلية بالأخرى ... عرفت علي شلون .....

أظن أن ما قمت به اثناء عملك على الدريم ويفر، هو أنك قمت بتحديد أماكن الـ Divs بشكل ثابت... كالتالي:

كود:

position:absolute

لهذا كانت النتيجه أن "الصناديق" لم تكن لتتفاعل مع بعضها البعض، بل ظلّت ثابته في مكانها

بالنسبة للتوافق بين المتصفحات، فهو أمر يعتمد على المصمم.. فكلما زادت عدد المتصفحات التي يقوم بتجربة موقعه عليها.. قل احتمال أن يظهر الموقع بشكل مختلف عند استعراضه في متصفح آخر.. أي أن مدة اختبار الموقع يجب أن تزيد قليلاً...

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

.. و أيضاً عندما يتخلى متصفح الأوبرا عن دور "الذيل" للإكسبلورر!)

أفكر حالياً في طرح سلسة من الدروس المتعلقة بتصميم المواقع باستخدام الCSS، لذا كن بانتظارها

اقتباس:

بالنسبة لموضوع ال XForms .... تقنية جيدة جدا ولكن فضلت أن اكون من رأى الغعلان ولم يشتري المنتج (مبدئيا)......

كما أسلفت لك بالذكر.. فالـXForms لا أظن أن الكثير يمكنهم استخدامها الآن في هذا الوقت، و لكن ما يجب علينا القيام به مبدئياً هو أن نعرف ماهية هذه اللغه، و بعض الأساسيات البسيطه عنها (كالدرس الذي أقوم بطرحه الآن)، و لا أعتقد أن التعمق بها أكثر من ذلك في الوقت الحالي سيعطي أي فائدة كبرى..
و لكن من الآن لسنتين قادمتين، فالكثير من التغييرات ستطرأ على عالم الويب، لذا يجب أن نكون مستعدين للتحول و التغير معه، و إلا فسيطوى علينا الزمان أوراقه، و سينسانا الجميع!

تحيتي و تقديري لك أخي بيشوو...

عماد الصدر

beshoo · 14-02-2005, 04:28 AM

طيب اريد ان ارسما كما ارسم الجداول واريد ان تتاثر ببعضها كما يحدث بالجداول

حلها ذا بتنحل معك

isader.com · 15-02-2005, 02:30 AM

إن شاء الله أخي بشوو سأبدأ بطرح سلسلة من الدروس في عملية التصميم باستخدام الCSS ..
فكن بانتظارها...

عماد الصدر

isader.com · 17-02-2005, 02:25 AM

أعتذر عن تأخري في طرح الجزء الثالث من هذا الدرس.. و ذلك بسبب إنشغالي في بعض الأمور

قريباً بإذن الله سأحاول الإنتهاء منه و طرحه في أسرع وقت ممكن...

شكراً لكم جميعاً

isader.com · 19-02-2005, 09:21 AM

موزيلا تطلق الاصدار بيتا من متصفحها فايرفوكس الداعم لل XForms

للتفاصيل:

http://www.mozilla.org/press/mozilla-2005-02-02.html

isader.com · 26-02-2005, 04:15 PM

و أخيراً إنتهيت من كتابة الجزء الثالث من هذا الدرس...

المشاكل و العوائق التي حصلت كثيره.. أهمها إنشغالي ببعض الأمور الشخصيه..

بكل الأحوال، سأقوم الآن بنشر الجزء الثالث و الأخير من الدرس العربي الأول عن لغة الـ XForms...

و أعتذر عن أي تقصير..

تحيتي للجميع..

عماد الصدر

isader.com

التحكم بأدوات التحكم
عندما كنّا نستخدم الإتش تي إم إل، كان باستطاعتنا تغيير نوع أدوات التحكم لجعلها Disabled أو read-only، لكن هذا التغيير كان يتطلب منا تحويل خواص الأداة بداخل السكريبت.

أما الآن و باستخدام الXForms، فإنه يمكنك أن تقوم تغيير نوع الأدوات بطريقه أسهل، كما أنها توفر لنا بعض الأنواع الأخرى أيضاً، و هي:
- أن القيمة مطلوبه، (أي أنه عليك أن تقوم بإدخال قيمة معينه إلى ذاك الحقل قبل أن تقوم بإرسال البيانات).
- أن تكون القيم متفاعله مع بعضها البعض ( فمثلاً يجب أن يكون تاريخ الميلاد قبل تاريخ الوفاه).
- أن تكون القيمة من فئة معينه (أي أن القيمة يجب أن تكون أرقاماً على سبيل المثال).
- أن تكون محسوبه من قيم أخرى (فيكون بإمكانك أن تأخذ مجموع قيم موجوده في حقول أخرى).

تذكر أنه بالXForms تكون هذه الأنواع مطبقة على القيم ذاتها، و ليس الأداة التي تحويها.

الأدوات الغير مفعّله Disabled Controls
لجعل أحد الأدوات غير مفعله (Disabled) فعليك باستخدام الخاصية relevant. فعلى سبيل المثال، إن أردت أن تقول أن حقل بطاقة الإئتمان يجب أن لا يكون فارغاً بحال كان الشخص يريد الدفع باستخدامه، فيمكننا استخدام التالي:

كود:

<model>
   <instance><data xmlns="">
      <amount/><method/><cc/><expires/>
   </data></instance>
   <bind nodeset="cc" relevant="../method='credit'"/>
   <bind nodeset="expires" relevant="../method='credit'"/>
</model>

نرى من المثال السابق أن حقلين cc و expires يكونان مطلوبين relevant بحال كانت الـ method تحتوي على القيمة credit، و بالتالي سيكونان غير مفعلين disabled بحال كانت قيمة method هي أي شيء آخر.

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

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

كود:

<select1 ref="method"><label>Method of payment:</label>
   <item><label>Cash</label><value>cash</value></item>
   <item><label>Credit card</label><value>credit</value></item>
</select1>
<input ref="cc"><label>Card number:</label></input>
<input ref="expires"><label>Expiry date:</label></input>

بحال استخدمنا structured instance، فبإمكاننا إختصار المثال السابق ليصبح:

كود:

<model>
   <instance><data xmlns="">
      <amount/><method/>
      <cc>
        <number/><expires/>
      </cc>
   </data></instance>
   <bind nodeset="cc" relevant="../method='credit'"/>
</model>

و من ثم تقوم أدوات التحكم بإرجاع الـ children للـ “cc”

كود:

<input ref="cc/number"><label>Card number:</label></input>
<input ref="cc/expires"><label>Expiry date:</label></input>

غير أنه يمكننا استخدام عملية الـ grouping لـ reset the context of the refs

كود:

<group ref="cc">
   <input ref="number"><label>Card number:</label></input>
   <input ref="expires"><label>Expiry date:</label></input>
</group>

Read-only Controls
كما هو الحال مع الـ relevant، فإنه بإمكاننا أن نقوم بتحديد شرط معين لتصبح أي قيمة "مقروءه فقط" أو read-only. على سبيل المثال:

كود:

<model>
   <instance><data xmlns="">
      <variant>basic</variant><color>black</color>
   </data></instance>
   <bind nodeset="color" readonly="../variant='basic'"/>
</model>

طريقة عمل هذا المثال هي أن القيمة )أسود black ( يجب أن تكون مقروءه فقط بحال كانت القيمة الموجوده في الحقل variant هي basic.

Required Controls
أحد الخواص الجديد الموجوده في لغة الـ XForms هي القول على أنه يجب أن يتم تزويد قيمة معينه قبل أن يتم إرسال البيانات. أسهل و أبسط طريقة لعمل ذلك هي أن تحدد أحد القيم بأنها مطلوبه دائماً، فإذا أخذنا مثال محرك البحث البسيط الذي تكلمنا عنه بالجزء الأول و الثاني، نرى التالي:

كود:

<model>
   <instance><data xmlns=""><q/></data></instance>
   <bind nodeset="q" required="true()"/>
   <submission .../>
</model>

لكن و كما كان الحال مع الreadonly و الrelevant، فإنه يممكننا استخدام الـ XPath لوضع بعض الشروط:

كود:

<bind nodeset="state" required="../country='USA'"/>

نرى من المثال السابق أنه يجب علينا أن نقوم بوضع بعض القيم في الحقل state بحال كانت الcountry هي الـ "USA".
الأمر يعتمد على المتصفح الذي تستخدمه في كيفية إخبارك بأن أحد القيم مطلوبه، و لكن قد يكون من الممكن لك تحديد ذلك من خلال الـ stylesheet.

Constraint Property*
هذه الخاصية تعطيك قدرة أكبرعلى التحكم بنموذجك، على سبيل المثال:

كود:

<bind nodeset="year" constraint=". &gt; 1970"/>

هذا المثال يجبر المستخدم على وضع قيمة في الحقل year بحيث تكون بعد العام 1970. لاحظ أن الXPath يستخدم "." ليعني "هذه القيمة". ( الرمز "<" يجب أن يكتب على الشكل > و ذلك بسبب تعليمات الXML،