21

اول تكويد لي بعد اسبوعين من تعلم الـ HTML & CSS | بحاجة الى انتقاداتكم ونصائحكم

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

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

https://arabia.io/go/3997

، ومع أنني لم اجد التفاعل الكافي الا انني والحمد لله بدأت بداية جيدة من w3schools.com .

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

http://i61.tinypic.com/2mew...

) .

استعملت في التكويد HTML & CSS فقط لأني لا اتقن غيرها حتى الان ( ولا اعتقد ان التكويد سيحتاج اكثر من هاتين اللغتين لتصميم بسيط كهذا) .

التكويد والتصميم ليس دقيق مئة بالمئة ولكنه يشبهه كثيراً حيث انني لم استعمل الخط المستعمل في التصميم لأنني لم أعرف كيف أبدل الخط بصراحة ، حاولت استعمال font-family ولكنها لم تعمل لذلك اتمنى ان تفيدوني في كيفية تغيير الخط فأنا ما زلت مبتدىء :) .

لتحميل ورؤية العمل :

http://goo.gl/Ztnnt7

.

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

واريد ان اعرف اذا كان بامكاني طرح مثل هذه المواضيع في المرات القادمة او لا ؟

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

15
assassinateur أضف ردا

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

0
Koboki أضف ردا

عندي طلب صغير اخي

بماذا تنصحني الان بعد أن رأيت عملي ؟ فأنا في حيرة من امري الان لأني لا اعرف ما الذي يجب علي ان افعله .

هل اقوم بتكويد تصميم آخر ؟ هل هناك مصادر مفيدة لمصممي الويب المبتدئين ؟ هل ابقى على هذا المنوال لفترة من الزمن ( أقصد تكويد الصفحات ) حتى تزداد خبرتي في هاتين اللغتين ؟

أرجو الا اكون قد اثقلت عليك .

0
assassinateur أضف ردا

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

0
Koboki أضف ردا

صحيح أخي ، بالنسبة للتأثير فان المثلث يظهر على شكل علامة استفهام عند استخدام الـnotepad او â–¼ عند استخدام sublimetext فما المشكلة ؟

1
assassinateur أضف ردا

نعم المفروض أستعمل هذا السطر

content:'\25bc';
0
Koboki أضف ردا

اخي حملت برنامج sublimetext2 ولكن عندما اكتب بالعربي تظهر الكتابة مقلوبة في البرنامج وتظهر رموز غريبة في المتصفح ، فما المشكلة ؟

0
assassinateur أضف ردا

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

كما قلت لك، أضف هذا السطر

<meta charset="UTF-8" />

بعد بداية وسم head حتى يتصلح الأمر

0
Koboki أضف ردا

نعم لقد نجح الامر ، ولكن أليس هناك طريقة لحل هذه المشكلة فهي مقززة :P .

0
assassinateur أضف ردا

مقززة في البرنامج فحسب، لكن مميزاته تغطي كل شيء آخر

13
assassinateur أضف ردا

مرحبا مجددا، ربما لم تجد تفاعلا، لكن أتمنى أنك وجدت جوابك

حسنا التصميم فيه بعض الهفوات، لنبدأ

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

في مكان Head أضف هذا السطر

<meta charset="UTF-8" />

أولا دخلت للملف لكي أرى كلمات بالعربية لكن جّل ما وجدته هو كلمات بلغة غير مفهومة إطلاقا ÇáÑÆíÓíÉ

سبب المشكلة هو المحرر الذي تستخدمه، أنصحك باستخدام محرر sublime text الذي سيعينك على الكثير

بالنسبة لعدم قدرتك على استخدام خط خارجي فالسبب يكمن في أنك لم تُدرجه بعد، لكي تدرجه عليك استخدام قاعدة @font-face والتي هي كالتالي

@font-face {
    font-family: 'GE SS Two';
    src: url('fonts/ge_ss_two_medium.ttf');
    font-weight: 400;
    font-style: normal;
}

وهي أن تحدد اسم الخط بواسطة font-family وتحدد مساره، ثم وزن الخط وشكله (مائل أو عادي)

ثم تستطيع استعمال خاصية font-family لتدرج الخط في العمل، ويفضل أن تكون هذه العبارة في أعلى الملف

التصميم لا يحتوي حشوا إطلاقا، ربما الخطأ الكبير الذي قمت به هو استعمال هذه

* {
        margin:0;
     padding:0;
}

ينصح بعدم استخدام هذا النوع من reset إطلاقا باستخدامك له تستطيع أن تلاحظ أن nav لا يحتوي على padding إطلاقا، الكلمة متراصة مع الجانب، وصندوق البحث input لا يحتوي على حشو إطلاقا لذا ابتعد عن هكذا reset واستعمل normalize.css فهو أفضل بكثير ويصلح الكثير من اختلافات المتصفحات،

لكن التصميم جيد كبداية، ستتعلم مع الوقت أساسيات التصميم وأهم العادات التي يجب أن تتبعها

وكأول نصيحة لك، لا تستعمل id أبدا في ملف css، ابقى دوما مع class

بالتوفيق

0
Koboki أضف ردا

شكراً لك أخي على هذه النصائح القيمة .

المحرر الذي استعمله هو المحرر الذي يأتي مع الويندوز ( notepad ) .

عندي بعض الاسئلة اتمنى ان تجيب عليها :

1- ما هو المتصفح الذي تستعمله ؟ انا استعمل google chrome .

1- هل لك ان تقول لي ما هو الهدف من استعمال ؟ هل هو فقط لاظهار اللغة بشكل جيد ام ماذا ؟

2- لماذا احتاج الى استعمال @font-face للغة العربية ولا احتاج اليها في اللغة الانجليزية ( حيث يستعمل font-family فقط ) ؟

وغير ذلك كيف استعمل الـfont-face ؟ اين اضعها ؟ في ملف الstyle ؟ حيث انني قرأت في احد المواضيع انني لا استطيع استعمال @font-face الا عند رفع الموقع على سيرفر ، اي انني لا استطيع ان استعملها على الجهاز واثناء العمل ، فهل هذا صحيح ؟

3- ما هو الـreset ؟ ولماذا احتاجه ؟ وما هو الـnormalize.css ؟

4- هل لك ان تصور لي ما تراه على شاشة حاسوبك ؟ فأنت تقول لي ان الكلمة متراصة مع الجانب، وصندوق البحث input لا يحتوي على حشو إطلاقا ،وهذا لا يظهر لي فكل شيء جيد عندي .

وشكرا مجدداً .

0
assassinateur أضف ردا

أنا أستعمل غوغل كروم 32 في win 8.1

استعمال نظام الترميز UTF-8 هو لتحديد لغة التي يتعامل بها المتصفح، فمثلا هناك arabic-1226 أو windows-1226 ( لاأتذكر) ولكن UTF-8 يدعم كل لغات العالم تقريبا، لذا يستعمل لإظهار العربية بشكل أفضل

2- بلا تحتاج لها في الانجليزية أيضا، @font-face تستعملها للحصول على خط خارجي غير موجود في الحاسوب، عدد الخطوط الآمنة هو 10 ربما، لكن أكثر من هذا عليك أن تستعمل تلك العبارة لتحصل على المطلوب

ونعم تضعها في ملف الستايل، ومن قال لك أنّك لا تستطيع استعمالها سوى في سيرفر، أنت تستطيع استعمالها في أيّ مكان،

reset هو بالعربية (إعادة ضبط) يعني إعادة ضبط خواص المتصفحات كلها، مثل جعل الحشو وmargin إلى 0 وغيرها من الخواص، لكن أنا لا أنصح بالقيام بهذا، وهذه تأتي على شكل ملفات ستايل، مثل أيّ ملف آخر، تنسخها في ملفك،

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

وهاهي صورة من متصفحي، تستطيع أن ترى أنّ الكتابة ملتصقة معا الحاشية

0
Koboki أضف ردا

شكرا على وقتك الثمين اخي وعلى المعلومات التي اعطيتني اياها .

وشكرا على التأثير الجميل فلم أكن اعلم بخاصية الـ content .

13
محمد عبيد الشحي أضف ردا

و عليكم السلام و رحمة الله و بركاته، معقوله أخي تعلمت HTML&CSS في أسبوعين؟ أي أن لغة كل أسبوع؟ ماشاء الله أستمر أستمر فلك مستقبل حقاً أعجبني التصميم جعلني أحتقر نفسي أفكر في البرمجة منذ شهور و لم أفعل شيء و أنت منذ أسبوعين و صنعت تصميم خيالي اُهنئك عليه

1
Koboki أضف ردا

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

ولا تعتقد انني اتقنتها بمعنى الكلمة ، فما زال الطريق امامي طويلاً .

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

وفقك الله اخي .

0
بن إسحاق سوفت أضف ردا

ليس معقوله أبداً .. فاذا كنت مصمماً على تحقيقها فتستطيع عمل ذلك .

بالنسبة لي ، ولا أقصد المديح أبداً ولكن كمثال فقط :

استطعت تعلم اللغات المعروفة من HTML5 + CSS3 + jQuery + PHP في أقل من اسبوعين .

الأمر ليس صعباً مادامت عندك الرغبة لتحقيقها :)

0
wajeeh baraa أضف ردا

رغم اني اكره ال CSS لكن علي ان اعترف ان عملك رائع حقاً واعجبني جداً , اتمنى لك مزيداً من التوفيق والابداع صديقي :)

0
Koboki أضف ردا

لماذا تكره الـ CSS اخي ؟ هل انت مصمم مواقع ؟

0
wajeeh baraa أضف ردا

كلا اخي لست مصمم مواقع , لكن لدي اطلاع بسيط على ال HTML و CSS .

0
assassinateur أضف ردا

إذا ما سبب كرهك لهذه اللغة الرائعة؟

أعني إذا كرهت php asp.net node.js ruby أو حتى js فسأتفهم،

لكن هذه اللغة ليست برمجة إطلاقا لا شيء يدعو للكره فيها

0
wajeeh baraa أضف ردا

معك حق فكلامي فيه نوع من الظلم تجاه اللغة وانا لست بمصمم لكن اخذت كورس بسيط في Codecademy ولم تعجبني لغة CSS اعتقد هذه الكلمة التي اردت قولها وليس كلمة "اكرهها" , واعتذر لك اخي :)

1
assassinateur أضف ردا

ربما لأنّ كورسات codeacademy في html و css قديمة بعض الشيء، ولا توفر سحر اللغة،

يمكنك أن تتعلم عنها في مواقع أخرى مثل khan academy أو tuts+ أو المدونات، فاللغة أصبحت توفر الكثير من الحلول التي كان يجب القيام بها إما بالفلاش أو الصور أو الجافاسكربت

-2
josef130 أضف ردا

css لقيتها سهلة التعلم , و اللغات الأخرى ليست صعبه و كل يوم نتعلم شيئا.

المشكلة أننا لا نأخذ الأمر بجدية لتعلم لغة ما.

0
supercoder أضف ردا

الموضوع منذ 7 اشهر عندي سؤال كيف وجدته :}

0
راتب الحسين أضف ردا

بالبحث عن "html"،ربما

0
Yanal Shmilan أضف ردا

اشهد لك بالموهبة صديقي :)

0
mohamed binothman أضف ردا

بالنسبة للتصنيفات ( تقنية - تصميم - منوعات ) الناظر لها يظن ان ترتيب التصنيفات عمودي، لكن في الواقع انت رتبتها بشكل افقي واضفت كلاس article1 على اول عنصر حتى يصبح لونه متناسق مع لون التصنيف الذي اعلى وهكذا بالنسبة لباقي المواضيع، والخطأ الثاني الذي وقعت فيه ان المواضيع فرزتها على سطر سطر وكل سطر وضعته في div وداخله لسته ul وضعت فيها المواضيع، ايضا الخطأ الثالث انك جعلت لعناوين التصنيف div وللمحتوى div ايضا ً.

هذه الاخطاء راح ستظهر لك بشكل واضح اذا ربطت هذا التصميم بلغة برمجة في عملية التكرار Loop.

يجب ان تعمل كل تصنيف داخل div وداخله تضع العنوان وتضع ايضا لسته ul للمواضيع المتعلقة بهذا التصميم، مثال

The Title Here

Article 1

Article 2

Article 3

اعطيك 7 من 10.

بالتوفيق اخي الكريم

0
Koboki أضف ردا

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

ولكن لم افهم ما تقصد بـ "هذه الاخطاء راح ستظهر لك بشكل واضح اذا ربطت هذا التصميم بلغة برمجة في عملية التكرار Loop."

14
mohamed binothman أضف ردا

المعذرة هذه غلطة لغوية وبسبب سياسة التعديل الغبية في الموقع لم استطع تعديلها.

بعضهم يضعف = بعضهم يضع

0
mohamed binothman أضف ردا

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

0
mohamed binothman أضف ردا

مش عارف ليه تم اخفاء كود html الذي وضعته ؟؟؟

1
Koboki أضف ردا

اي كود اخي ؟

وبصراحة انا ايضا محتار لماذا لا نستطيع التعديل على تعليقاتنا او مواضيعنا !

0
alm_m أضف ردا

اخي الكريم ضع لنا رابط مباشر للمشاهدة

0
محمد عبيد الشحي أضف ردا

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