x100
أجوبتك جميلة، باستثناء السؤال ٤، ٥.
أما ٦ فستتعلم معنا بإذن الله.
بالنسبة للسؤال الرابع، فأنا لا أقصد الفوتوشوب بحد ذاته، بل أقصد كل البرامج الأخرى كالفيرووركس، اليستريتور، جيمب وغيرها
ما أقصده، هل التصميم الاحترافي هو الذي تستخدم فيه برامج تحرير الصور ؟
ماحكَّ جلدكَ مثلُ ظفركَ .. فَتَوَلَّ أنْتَ جَميعَ أمركْ
وإذا قصدْتَ لــــحاجَـــةٍ .. فاقْصِدْ لمعترفٍ بقدْرِكْ
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله تعالى وبركاته ومغفرته
جزاكم الله تعالى خي الجزاء وجعل هذا العمل في ميزان حسناتكم
مشترك بإذن الله تعالى
بالتوفيق إن شاء الله
بسـم الله الرحمن الرحيم ..
اليوم سنبدأ اولي الدروس الفعليه لبناء صفحه ويب بمعاير قياسيه ..
الدرس بسيط جدا .. وهو يخـص وسم وحيد ولكنه اساسي في بناء صفحه ويب سليمه ومطابقه للمعاير ..
وطريقه سـرد الدروس ان شاء الله ستكون بترتيب مكونات صفحه الويب .. كما شـرح الاخ الكريم Z-ONE في الدرس التمهيدي ..
الان ننتقل مباشره الي الدرس ..
|| دخـول متقطع .. عـوده قـريبة بأذن الله ..♥♥
وسم التصريح او وسم التعريف كما يلقبه البعض هو اولي مكونات صفحة الويب القياسيه .. اي انه قبل اي شئ .. ويجب ان لا يسبقه شئ مهما كان .. ويكتب الوسم هكذا تماما <!DOCTYPE> ويجب ان تكون الحروف كبيره " كابيتال " كما هي دون تغير ..
وهو الوسم الوحيد الذي لا يتم اغلاقه في صفحه الويب ..
والهدف منه انه يحدد للمتصفح ماهي نوع صفحه الويب التي سيعرضها .. وما هي معاير تلك الصفحة ..
وهنا يجب ان نطرح سؤالا مهما ..
- ماهي انواع صفحه الويب ؟؟
هنـاك نوعان من الصفحات .. الاولي HTML .. والثانيه XHTML .
والفرق بين النوعين ليس كبيرا جدا فالمعاير متقاربه الي حد كبير .. والنوع الثاني من الصفحات ينحدر بالاساس من النوع الاول .. ولقد تم اصدار هذا النوع الثاني حتي يتكامل بشكل اكبر مع صفحات الـ XML ..
رغم اختلاف اصدارات النوعان هناك معاير اساسيه بينهم .. وهي المعاير الاكثر انتشارا ..
اصدار الـ XHTML الاول واصدار الـ HTML قبل الاخير وهو اصدار 4.1 متفقين علي معاير اساسيه .. وهي :
Strict , Transitional , Frameset
النـوع الاول : DTD HTML Strict
وهي تعني المعاير الصارمه .. ينصح بها للمحترفين .. فهي لها قوانين صارمه وتتطلب وقد تجبر علي فصل الشكل عن التنسيق .. لذلك ينصح معها بالـ Css ..
النوع الثاني : DTD HTML Transitional
وهي تعني المعاير الانتقاليه .. هي معاير تقارب علي الاختفاء نهائيا .. ينصح بها في حال استخدام اسلوب النمط الداخلي .. بمعني انك لن تستخدم ملفات Css خارجيه وبشكل منفصل ..
النوع الثالث : DTD HTML Frameset
وهي تعني معاير الاطارات .. وهي ايضا معاير تقارب علي الاختفاء نهائيا .. وينصح بها في حال استخدام وسم الاطارات بكثره بحيث يظهر العديد من الصفحات داخل بعضها البعض .. وقد قل استخدامة بشده بعد ظهور ما يسمي بالـ Ajax
ملحوظه : DTD تعني Document Type Definition اي نمط تعريف المستند ..
ولن نتطرق الي الاصدار الخامس من صفحات الـ HTML لانه مازال تجريبي حتي الان ويضم العديد من الاوسمه الجديده ..
والان ننتقل للامثـله مباشره .. وستظهر لكم شـكل كود التصريح في نوعي الصفحات باصدارتهم المختلفه ..
-- اولا : صفحات من نوع HTML الاصدار 4.1 :-
1 - " strict " وسم التصريح بالمعاير الصارمه ...
كود:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 - " Transitional " وسم التصريح بالمعاير النتقاليه ...
كود:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3 - " Frameset " وسم التصريح بالمعاير النتقاليه ...
كود:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
-- ثانيا : صفحات من نوع XHTML الاصدار 1.0 :-
1 - " strict " وسم التصريح بالمعاير الصارمه ...
كود:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 - " Transitional " وسم التصريح بالمعاير النتقاليه ...
كود:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 - " Frameset " وسم التصريح بالمعاير النتقاليه ...
كود:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
وهذه هي الانواع والمعاير المختلفه لصفحه الويب القياسيه ..
وفي نهايه الدرس .. افضل ان اوضح ان هذا الدرس ورغم بساطته الا انه مهم جدا ..
وهو لا يحتاج الي تطبيق .. نظرا لان تطبيقه لن يظهر اي شئ داخل الصفحه ..
وسيتم التطبيق ان شاء الله بدايه من الدرس الثالث ..
اتمني ان يكون الدرس واضحا ومفيدا للجميع ..
والي اللقاء ان شاء الله في الدرس القادم ..
دمتم جميعا بخير وصحه ..
في امـان الله .. ومع تحيـاتي الخاصه للجميع ..
ممتاز
هاقد اقتربنا من الدروس التطبيقية
سيتم شرح وسم Meta بإذن الله في الدرس القادم (يوم الاثنين أو الثلاثاء بإذن الله)
ونأسف على التأخر في طرح الدروس بسبب الانشغال قليلاً
اخر تعديل كان بواسطة » بورون في يوم » 05-03-2011 عند الساعة » 19:23
شكراً اخي~Hatshy
على الدرس
وبأنتضار الدروس التطبيقية^^
سِر على العدل ولا تفارقهٌ فالظلمُ ليـــس بيقيــنِ
اتظلِمُ الناس ولا تريدُ ان تُظلــمَ بدون ليــنِ
مَن ذا اللذي قال لكَ اظلم بدون تفكيــــرِ
يا ويلهُ ويا ويـــلكَ من القويي ربِ العالمينِ
a mas سابقاً
السلام عليكم و رحمة الله ~
آسف راح ارجع للدروس القديمة لان جهازي كان متعطل و ما قدرت اشارك
لكل منها سيلبياته و ايجابياته ~1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.
الثابت يكون جميل جدا في حالة الشاشات الصغيرة [ 1024×768 ( 17" ) أو اصغر ] لكنه يكون سيئا اذا دخلت الموقع من شاشة كبيرة , حيث سيتظهر لك الخلفية كبيرة و قد تظهر أكبر من محتوى الموقع نفسه مما ينقص من جمال الموقع ~
المتمدد , كمان اذا كان حجم الشاشة كبير راح يظهر فراغ كبير بالتصميم ما يقدر يتجنبه إلا المصممين المحترفين , و لكن اعتقد لو انحطت صورة بالوسط مع نقطتي تمدد و صورتين عند الاطراف راح تغطي من الفراغ
لهذا افضل المتمدد
أكيد على حسب محتوى و تخصص الموقع نفسه و كذلك إختيار الألوان ~2 - على أي أساس يتم تصميم شعار الموقع ؟
اكيد تؤثر , يمكن تفاديها بحفظ الصور بصيغة خفيفة مثل Gif أو انقاص الجودة قليلاً ( قليلاً بحيث لا يمكن للمشاهد ان يلاحظ الفرق ) , و كذلك يمكن استخدام تقنيات الـcss فهى اسرع في التصفح < مع اني ما اعرف عنها شيء غير فوائدها3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟
اعتقد اجابتي بتكون نعم , الفوتوشوب صار اساسي بكل شي , في عالمنا العربي ما اعتقد في مصمم يستغني عن الفوتوشوب في اعماله , لكن يمكن حدوث هذا في الغرب4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟
الألوان و الشكل و الشعار , ما اعتقد ممكن نصمم موقع رياضي و نحط في شعاره صورة شجرة5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟
من ناحية التعلم , فلابد من ان يكون المصمم ملماً بكل لغات البرمجة , و لو بجزء بسيط منها 50% على الاقل٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟, لكن من اذا كان يدري بلغات البرمجة فلا مشكلة في ذلك , مع العلم ان استخدام برامج متعددة في تصميم الموقع قد يخرجك بتصميم رائع مع وجود كثير من الأخطاء التى يجب اصلاحها بعد الانتهاء .
بالله ثقفنا معكمثلاً حجم الفيديو الاصلي 100 ميجا ، استطيع تحويله إلى 2 ميجا
و هذا سيساعد اصحاب الاتصالات الضعيفة
مارأيكم؟
كيف تضغطته لهالدرجة
راح اطلع ععلى الدروس الباقية إن شاء الله ~
و اتمني تقبولني طالب بينكم
اخر تعديل كان بواسطة » T E C H N O في يوم » 06-03-2011 عند الساعة » 18:14
الثابت يكون جميل جدا في حالة الشاشات الصغيرة [ 1024×768 ( 17" ) أو اصغر ] لكنه يكون سيئا اذا دخلت الموقع من شاشة كبيرة , حيث سيتظهر لك الخلفية كبيرة و قد تظهر أكبر من محتوى الموقع نفسه مما ينقص من جمال الموقع ~
المتمدد , كمان اذا كان حجم الشاشة كبير راح يظهر فراغ كبير بالتصميم ما يقدر يتجنبه إلا المصممين المحترفين , و لكن اعتقد لو انحطت صورة بالوسط مع نقطتي تمدد و صورتين عند الاطراف راح تغطي من الفراغ
ولكن، ألا يمكننا تصميم قالب ثابت متمدد ؟ >>> حاول فهمها
أكيد على حسب محتوى و تخصص الموقع نفسه و كذلك إختيار الألوان ~
أخيراً اسم cssاكيد تؤثر , يمكن تفاديها بحفظ الصور بصيغة خفيفة مثل gif أو انقاص الجودة قليلاً ( قليلاً بحيث لا يمكن للمشاهد ان يلاحظ الفرق ) , و كذلك يمكن استخدام تقنيات الـcss فهى اسرع في التصفح < مع اني ما اعرف عنها شيء غير فوائدها
إجابة جيدة.
بالنسبة لسي اس اس، سنشرحها قريباً بإذن الله.
كلامك ممتاز، منجد صعب الواحد يسيب الفوتوشوب في تصميم بعض الأجزاء من الصفحة وليس كلهااعتقد اجابتي بتكون نعم , الفوتوشوب صار اساسي بكل شي , في عالمنا العربي ما اعتقد في مصمم يستغني عن الفوتوشوب في اعماله , لكن يمكن حدوث هذا في الغرب
مثلاً بالتدرجات، يمكننا عملها بـcss 3، الظلال كذلك...إلخ.
يمكنالألوان و الشكل و الشعار , ما اعتقد ممكن نصمم موقع رياضي و نحط في شعاره صورة شجرة
قد تدل على الطبيعة
إجابتك سديدة، وأعتقد أن الأغلبية قد أجابت بشكل ممتاز على هذا السؤال
ماشأن لغات البرمجة هنا ><من ناحية التعلم , فلابد من ان يكون المصمم ملماً بكل لغات البرمجة , و لو بجزء بسيط منها 50% على الاقل , لكن من اذا كان يدري بلغات البرمجة فلا مشكلة في ذلك , مع العلم ان استخدام برامج متعددة في تصميم الموقع قد يخرجك بتصميم رائع مع وجود كثير من الأخطاء التى يجب اصلاحها بعد الانتهاء .
css, html ليستا لغات برمجة على الإطلاق، فـhtml، لغة هيكلة، والأخرى لغة تنسيق.
قد يخرجني ؟ بل حتماً سيخرجني بتصميم مليء بالأخطاء.
بالطبعراح اطلع ععلى الدروس الباقية إن شاء الله ~
و اتمني تقبولني طالب بينكم
ولكن، ألا يمكننا تصميم قالب ثابت متمدد ؟ >>> حاول فهمها
طبعاً ما ممكن يتكون تصميم الموقع من تدرجات و ألوان فقط , لابد من تصاميم لتحسن من شكل الموقعكلامك ممتاز، منجد صعب الواحد يسيب الفوتوشوب في تصميم بعض الأجزاء من الصفحة وليس كلها
مثلاً بالتدرجات، يمكننا عملها بـcss 3، الظلال كذلك...إلخ.
المهم يعني الـhtml مهما كانتماشأن لغات البرمجة هنا ><
css, html ليستا لغات برمجة على الإطلاق، فـhtml، لغة هيكلة، والأخرى لغة تنسيق.
قد يخرجني ؟ بل حتماً سيخرجني بتصميم مليء بالأخطاء
شكراًبالطبع
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
ماهو وسم Meta ؟
وسم Meta خاص بالمعلومات عن ملف HTML معين، فمثلاً، تضع فيه اسم الكاتب، كلمات مفتاحية (لمحركات البحث)، الترميز، وصف الموقع، آخر تعديل على الملف.
كتابة وسم Meta.
وسم meta هو وسم مغلق (يتم إغلاقه في نفس وسم الفتح)، ويكتب هكذا
وسم meta يجب أن يحتوي على خااصية content، أما عن الخاصية وكتابتها، سنعرفها بعد قليل.كود:<meta />
وهناك بعض الخواص الاختيارية، وهي:
http-equiv
name
بعض الخواص سنتركها إلى مابعد، نظراً لأنها متقدمة قليلاً.
يسعدني إخبارك أن وسم meta خاص بالمتصفح ولايظهر في الصفحة، وتتم معالجته على النحو التالي:
المتصفح يسأل ميتا، ماذا تريدني أن أفعل ؟
فيأتي الجواب ببساطة، اقرأني وستفهم
فقد يجد فيه الكود الخاص بالترميز، فيجعل ترميز الصفحة كالمطلوب، أو لربما وجد كلمات مفتاحية، فيسجلها في محرك البحث، وهكذا دواليك.
أما إن أردت كتابة الكود، فانتظر حتى نشرح الخواص
خاصية http-equiv
هنا تضع مايختص بـhttp-headers، مثل :
content-type
refresh
وغيرها.
خاصية name
لكل شيء اسم، وهنا تضع اسم خواص ميتا، مثلاً:
description
author
keywords
والكثير الكثير.
خاصية content
أهم خاصية، لايستوي meta بدونها، بل يمكنك الاكتفاء بها ولكني لا أنصح بذلك xD
تضع فيها محتوى وسم ميتا، فكيف يكون وسمٌ بلا محتوى ؟
والآن إن اشتعلت حماساً، فإليك أمثلة على وسم Meta، ولكن في الرد التالي
والآن سنأخذ بعض الأمثلة على وسم meta، تذكر أن النسخ واللصق لاينفعانك، وحرصاً على مصالحكم جعلت الأكواد صوراً
اللغة العربية لاتظهرفي المتصفح، اللغة أصبحت مربعات !
لاتقلق، فهنا الكود الذي يحول الترميز إلى ترميز يدعم العربية
استخدمنا هنا http-equiv لتحديد نوع الملف كـhtml، ثم جعلنا الترميز utf-8 العالمي الداعم للعربية بشكل ممتاز.
أما إن أردت تحويل زوارك ؤلى موقع آخر، فهذا هو الكود.
كذلك هنا استخدمنا http-equiv، وجعلناها على refresh -أي تحديث- ، ويقوم بتحويله إلى مكسات (استبدل http://mexat.com بالموقع الذي تريده) بعد ثانيتين (2 هي عدد الثوان، ويجب عليك وضع الفاصلة المنقوطة بعدها).
واختتم بالمثال المحبوب، وهو الكلمات المفتاحية
هنا استخدمنا name ولم نستخدم http-equiv، لأن ليس لها علاقة بـhttp-headers.
أما المحتوى فهو الكلمات المفتاحية وتفصل بينها بفاصلة.
نسيت أن أذكر أن وسم meta يوضع داخل وسم head "^^
أتمنى أن يكون الدرسُ مفهوماً، والسلام عليكم ورحمة الله وبركاته.
وداعاً للنسخ واللصق
اخر تعديل كان بواسطة » بورون في يوم » 08-03-2011 عند الساعة » 12:41
درس رائع لي عودة للمراجعة
[ شكراً جزيلاً لكم ]
رائع درس جميل ومميز .. ان شاء الله سنتابع الدرس القادم في خلال يومين ..
سنشرح فيه باقي الاوسام التي تقع تحت وسم <head>
لتبدأ ان شاء الله من الدرس الذي يلحقه التطبيقات .. ^_^
السلام عليكم ورحمه الله وبركاته
اخباركم اعزائي : ان شاء الله تكونوا بأتم الصحه والعافيه
احب ان اقوم بشكر الأخ الفاضل: ~Hatshy على الدرس الأول ولله الحمد تم قراءته وفهمه جيداً
واحب ايضاً ان اقوم بشكر الأخ الفاضل: Z-ONE على الدرس الثاني تم قراءته وفهمه جيداً ولله الحمد
وفي انتظار الدرس الثالث وبالتوفيق لكم والله يقويكم
في امان الله
1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.
ما فهمت عليك .. ولا عندي خبرة في هذه الامور ( خبرتي سطحية جداً فقط ) , علشان هل السبب ماهي أنواع الستايلات وماهي القوالب ؟
2 - على أي أساس يتم تصميم شعار الموقع ؟
يٌعتبر الشعار رمز لكل شي بحيث لو وضعت شعار في مكان ما فأعرف أنو الموقع هنا ~]
3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟
هو يؤثر ,, بس أعتقد لو نصغر الجودة التصميم يمكن نتفادها , بس الجودة ليست قويه
4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟
نعم ولاسيما في التقطيع ^ ^ ~ ]
5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟
.............................. ~ ]
٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟
ديم ويفر كأساسيات وشبه متوسط أما الميكروسوف ما تعرفت عليه ~.~
وشكراً على الدرس الأول والثاني وبالإنتظار الدرس الثالث + لو مفتوح باب الإنظمام كطالب فأتمنى أكون منهم ~ ]
بسم الله الرحمن الرحيم ..
اهلا بكم جميعا مجددا ..
اليوم نضع بين ايديكم اخر الدروس الغير تطبيقيه بأذن الله .. وكما شرحنا سابقا هي ليست تطبيقة ولكنها مهمه جدا ..
لانها ستظل معكم في كل مره تحاولون بناء صفحه ويب جديده ..
واليوم سنشـرح ثـلاثه وسوم مهمه جدا .. وهي وسم الارتباط .. ووسم الستايل .. ووسم السكربت ..
والان ننتقل الي الدرس مباشره ..
ماذا يعني وسم الارتباط .. ؟
وسم الارتباط وكما يظهر من اسمه يعني ارتباط اضافه خارجيه بصفحه ويب معينه ..
ويكتب الوسم هكذا </ link> وكما يظهر من شكله انه بأغلاق تلقائي ...
ومن المميز في هذا الوسم انك عن طريقة تستطيع ربط صفحات خارجيه اخري بانواع مختلفه مثل الانواع التاليه ..
Css ، xml , Xhtml , Rss
وايضا الوسم له استخدامات اخري ليست متعلقه بصفحات خارجيه ..
ويتم تعريف كل نوع من الانواع المختلفه داخل الوسم عن طريق التعريف type كما يظهر في الانواع التاليه..
type="image/x-icon" - 1
وهو تعريف صوره المفضله والتي تظهر بجانب عنوان الموقع في المتصفح .. وتظهر ايضا في قائمه المفضلة وتظر في حاله حفظ صفحه من الموقع علي الجهاز .. وتظهر ايضا في قائمه ابدا اذا وضعت بها الصفحه .. ويكتب الكود هكذا تماما ..
مع مراعاه تغير رابط الايقونه الي رابط الايقونه علي موقعك .. وايضا يجب مراعاه حجم الايقونه يجب ان يكون 16×16كود:<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico" type="image/x-icon" />
type="text/css" - 2
وهو تعريف صفحات الـ Css الخارجيه ..
ويكتب الكود هكذا تماما ..
وذلك مع مراعاه تغير الرابط ايضا الي رابط موقعك ..كود:<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/style.css"/>
----
وهناك ايضا انواع اخري من التعريفات ولكن هذه هي الاهم والاشهر وكثيره الاستخدام ..
وكما يظهر من الاكواد امامكم ان هناك متحكم اخر بتوجيه الارتباط وهو التعريف rel وهو يوضح وظيفه الاضافه .. وهذا التعريف له العديد من الانواع تختلف باختلاف نوع الاضافه ..
اخر تعديل كان بواسطة » H A T S H Y في يوم » 12-03-2011 عند الساعة » 12:37
عدد زوار الموضوع الآن 1 . (0 عضو و 1 ضيف)
قوانين المشاركة
GAME OF THRONES
المفضلات