در مورد وبلاگ من نظر بدهید...

سلام
وبلاگ خوبی داری. برای بار اول دیدم یه نفر یه وبلاگ valid داره

به خاطر همین می خوام یه خورده ایراد بنی اسرائیلی برات بگیرم
البته به اینا نمیشه گفت ایراد ولی میشه به عنوان پیشنهاد قبول کرد



کد:
	<div class="menubar_right">
	</div>
چرا المان خالی میزاری؟ برای گذاشتن عکس برای هدر راه های مختلفی هست که نیاز به المان خالی نباشه
این جوری بی خود حجم صفحت بالا میره





کد:
<div class="menubar_center">
		<a href="index.html" title="http://weblog.nabi.ir">&nbsp; صفحه اصلی&nbsp;
		</a>|<a href="#about">&nbsp; درباره من&nbsp; </a>|<a href="rss.xml" title="RSS خروجي">&nbsp; 
		خروجي RSS&nbsp; </a>
</div>
شما جاهایی که نباید از ul & li استفاده کنی ، کردی حالا اینجا که باید استفاده می کردی ، نکردی





کد:
<img border="0" src="templates/nabi/images/logo_nabi.gif" width="224" height="87" alt="صفحه نخست" title="صفحه نخست" />
شما که هدفت استفاده از سی اس اس بود چرا اینو اینجوری کردی
در ضمن border="0" هم ایراد داره نباید ازش استفاده بشه






کد:
<li class="box_header">
	<div class="box_header_text">
	درباره من</div>
</li>
اینجا دوتا ایراد داره
اولیش اینه که خصوصیات li& div رو با هم ادغام نکردی و یه div اضافی نوشتی
دومیش اینه که از li استفاده کردی. شما میتونی به جای استفاده از ul & li از h1& p استفاده کنی






کد:
<div class="box_myimage">
<img src="templates/nabi/images/nabi.gif" alt="نبی کرمعلی زاده" /></div>
همونطور که قبلا گفتم خصوصیاتشون رو با هم ادغام نکردی و div اضافی نوشتی





کد:
<li class="box_footer">&nbsp;</li>
این اضافیه
شما می تونی خصوصیاتی که به این دادی رو بین المان های دیگه پخش کنی





شما تو کدهاتون خیلی المان اضافی تعریف کردی
میشه خلاصه تر نوشت مثلا به جای این کد
کد:
<div class="post_title_right">
	<a title="لینک به این مطلب" href="post-10.html"></a></div>
	<div class="post_title">
	<div class="post_title_subject">
	<a href="post-10.html">استخراج کارنامه های کنکور سراسری 
	و آزاد به صورت پیشرفته</a></div>
	<div class="post_title_date">
	پنجشنبه 15 شهریور 1386 - 10:30:31 قبل از ظهر </div>
</div>
میشه این کد رو گذاشت
کد:
<h1 class="posttitle">
<a title="link be matlab" class="posthref"></a>
<a href="posthref">post title</a>
<small class="time">time & date</small>
</h1>



بازم از این ایراد ها داری، بگیرم برات؟



یه چیزی اضافه کنم
وقتی تعداد المان ها در مرورگر بالا میره مرورگر ها برای نشون دادن اونها فضای بیشتری از حافظه ی رم رو اشغال میکنند به خاطر همین هرچی از المان کمتری استفاده بشه بهتره
همچنین در نمایش اونها و چیدن المان ها به مشکل بر می خورند.
 
از لحاظ طراحي گرافيكي و چيدمان واقعا هيچ ايرادي نميشه گرفت، عاليه! اينجور طراحي ها آدم رو وادار ميكنه هر چند وقت يكبار سري بهشون بزنه.
 

NabiKAZ

Well-Known Member
سلام
براي بار اول ديدم يه نفر يه وبلاگ valid داره
بازم معرفت شما ، نه مثه بعضي ها که وقتي تاپيک ميزنم براي معرفي سايتهاي 100% استاندارد و اونجا فقط سايت خودم و يکي دوتا از دوستان رو ميزارم بعضي ها ميان ميگن تو فقط قصد تبليغ سايت خودت رو داشتي !!!


چرا المان خالي ميزاري؟ براي گذاشتن عکس براي هدر راه هاي مختلفي هست که نياز به المان خالي نباشه
اين جوري بي خود حجم صفحت بالا ميره
راستش نميخوام از کار خودم دفاعي بکنم چون اکثر مواردي که اشاره کرديد کاملاً صحيحه و کم و بيش دوستان هم بهش اشاره کردند و ميپذيرم.
اما اين قضيه المان خالي منو ياد يه موضوعي انداخت که شايد جنبه آموزشي هم داشته باشه.
در اينجا در پاسخ به سوال "يکي از مفيدترين تکنيک‌هاي CSS که اغلب از آن استفاده مي‌کني؟" تعدادي از طراحان ادعا کردند از "قرارداد عکس توسط CSS" بيشتر خوششون مياد.
به عنوان مثل براي لوگوي بالاي سايت، اين کد رو ترجيح دادند:
HTML:
 XHTML:
<h1 id="logo">Company Name</h1>
 CSS:
h1 {
height:100px /* height of logo */
width:100px /* width of logo */
background:url(logo.gif) no-repeat;
text-indent:-9000px;
}
اين روش مزيت هاي زيادي مثل معرفي بهتر به موتورهاي جستجو، نمايش بهتر در موبايلهاو... اگر هم بخوايم لوگو رو عوض کنيم، عوض کردن اسم فايل در css خيلي آسون تر از html ه و چيزاي ديگه که بهتره اصل مقاله رو بخونيد.
اون المان خالي هم که من استفاده کردم حاوي يه عکسه، که ترجيح دادم بجاي تگ img از div استفاده کنم، چون سايتم رو بر اساس امکان تغيير قالب نوشته بودم و به اين ترتيب عوض کردن عکسها در css خيلي آسون تر بود. البته يه جاهايي هم از دستم در رفته..... که خب ! اينم بگم فکر ميکنم موقعي که اين سايت رو درست کردم ايم مقاله رو نخوندم بودم... بيشتر از اينکه به فکر توجيح کارم باشم به فکر صحبت در مورد تکنيکي بودم که عرض شد.
شما جاهايي که نبايد از ul & li استفاده کني ، کردي حالا اينجا که بايد استفاده مي کردي ، نکردي
اعتراف ميکنم اون موقع دانشش رو نداشتم !!! راستش اين سايت رو 7 ماهي ميشه طراحي کردم.
در ضمن border="0" هم ايراد داره نبايد ازش استفاده بشه
موافقم! اشتباه کردم. راستش من موقعي که اين سايت رو درست کردم بيشتر هدفم valid بودن کدها بود و راه رسيدن به اين هدف خيلي برام مهم نبود، به همين خاطر گاهي با تگ هاي اضافي سعي ميکردم به هدفم برسم. که البته فکر نميکنم خيلي اشتباه باشه و البته صحيح هم نيست.
<li class="box_footer">&nbsp;</li>
اين اضافيه
شما مي توني خصوصياتي که به اين دادي رو بين المان هاي ديگه پخش کني
با اين مورد خيلي موافق نيستم.
مخصوصاً در مورد جداولي که با li تشکيل ميشن و بالا و پايين اونها از عکسهاي متفاوت استفاده شده، هميشه تنها راهي که به ذهنم ميرسيد اين بود که اولين و آخرين li رو خاص کنيم و عکس مورد نظر رو به اونها نسبت بديم. بعدها يه سايت ديگه هم ديدم از اين روش استفاده کرده ، شما اگر پيشنهاد بهتري داري، بسيار استقبال ميکنم.
شما تو کدهاتون خيلي المان اضافي تعريف کردي
ميشه خلاصه تر نوشت
قبلاً دوستان هم اشاره کرده بودند و قبول دارم. به قول يکي از دوستان حجم کدها رو ميشه به يک سوم کاهش داد ! ولي باوربفرمائيد يه جاهايي به بن بست ميرسيدم و با يک تگ اضافي مشکل حل ميشد! بزاريد پاي حساب بي سوادي ;-)
با ساير موارد اگر باقي مونده باشه ! موافقم و از شما بينهايت متشکرم که وقت صرف کرديد و سايت بنده رو قابل دونستيد و آناليز کرديد.
انشااله در طراحي مجدد همه ايرادات رو بتونم رفع کنم.
باتشکر
نبي
 

NabiKAZ

Well-Known Member
<img border="0" src="templates/nabi/images/logo_nabi.gif" width="224" height="87" alt="صفحه نخست" title="صفحه نخست" />
کاملا موافقم

با بالایی موافقید ؟!
حتماً منظورتون این بوده :
در ضمن border="0" هم ايراد داره نبايد ازش استفاده بشه

38.gif
 
نقل قول:چرا المان خالي ميزاري؟ براي گذاشتن عکس براي هدر راه هاي مختلفي هست که نياز به المان خالي نباشه
اين جوري بي خود حجم صفحت بالا ميره

راستش نميخوام از کار خودم دفاعي بکنم چون اکثر مواردي که اشاره کرديد کاملاً صحيحه و کم و بيش دوستان هم بهش اشاره کردند و ميپذيرم.
اما اين قضيه المان خالي منو ياد يه موضوعي انداخت که شايد جنبه آموزشي هم داشته باشه.
در اينجا در پاسخ به سوال "يکي از مفيدترين تکنيک‌هاي CSS که اغلب از آن استفاده مي‌کني؟" تعدادي از طراحان ادعا کردند از "قرارداد عکس توسط CSS" بيشتر خوششون مياد.
دقیقا منم منظورم همین بود
منظورم این نبود که چرا به جای استفاده از img از div استفاده کردی
منظورم این بود که شما می تونی این کاری که با یه المان خالی انجام دادی رو به یه المان پر انجام بدی(همون خلاصه نویسی)



<li class="box_footer">&nbsp;</li>
اين اضافيه
شما مي توني خصوصياتي که به اين دادي رو بين المان هاي ديگه پخش کني

با اين مورد خيلي موافق نيستم.
مخصوصاً در مورد جداولي که با li تشکيل ميشن و بالا و پايين اونها از عکسهاي متفاوت استفاده شده، هميشه تنها راهي که به ذهنم ميرسيد اين بود که اولين و آخرين li رو خاص کنيم و عکس مورد نظر رو به اونها نسبت بديم. بعدها يه سايت ديگه هم ديدم از اين روش استفاده کرده ، شما اگر پيشنهاد بهتري داري، بسيار استقبال ميکنم.
شما می تونی به جای عکسی که در li اول میزاری یه padding-top به اندازه ی ارتفاع عکس به ul بدی و عکست رو به عنوان بکگروند ul بزاری
به جای li پایینی هم، اخرین li رو یه padding-bottom بدی پوزیشن بکگروند رو صفر و صد درصد بزاری
منظورمو گرفتی یا یه نمونه کد بزارم
 

echessdesign

مدیر انجمن طراحی وب
درود بر شما
کل زحمت
HTML:
img {border:0;}
هست.
هم اکنون به تمامی وب سایت هایی که با CSS طراحی کردم نگاه می کنم، درست است که Valid هست، اما از نحوه به کاربردن المان ها و عناصر صفحه خندم می گیره، فقط از ترفند هایی که زدم لذت می برم.
هرچه زمان بیشتری می گزره و نمونه کارهای بیشتری رو می بینم، با گسترده بودن تکنیک های CSS و ترفند های آشنایی بیشتری پیدا می کنم.
باور بفرمایید طراحی وب سایت بر پایه CSS در بین طراحان ایرانی نوپاست و تنها کمک به همدیگه می تونه باعث پیشرفت باشه.
درسته که نمونه پروژه های ارسالی برای مسابقه Valid بودند ، اما به نظر من 70% استفاده از المان های صفحه توسط طراحان، کاملا اشتباه بود. که من به این نوع طراحی می گم مریض. فقط کافیه سورس یک وب سایتی هم چون Nero.com رو مشاهده کنید.
من خودم هر چی یاد گرفتم از تفسیر کد های اون بود. واقعا آدم لذت می بره.
نبی هم پیشرفت کاملا زیادی داشته، همون طور که از مشاهده کد های پروژه مرتضی که از المان های پیش فرض به درستی استفاده کرده.
اینکه طراحی با گزاشتن زمان، خطاهای طراح دیگه ای رو عنوان می کنه، بسیار عالیست، اما بهتر از آن زمانی است که طراح بتواند با استفاده از این تجربیات، پروژه های بعدی کاملی رو ارایه دهد.
پاینده باشید.
 
آخرین ویرایش:
با ساير موارد اگر باقي مونده باشه ! موافقم
این چندتا هم هست
دیگه چیزی ندیدم


کد:
<br />
&nbsp;<br />
بین هر پستت اینارو گذاشتی
مگه نمیشه از margin-bottom استفاده کرد



HTML:
<a target="_blank" href="http://validator.w3.org/check/referer">
<img alt="Valid XHTML 1.0 Transitional" title="Valid XHTML 1.0 Transitional" src="templates/nabi/images/xhtml1.png" /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a target="_blank" href="http://jigsaw.w3.org/css-validator/validator?uri=http://weblog.nabi.ir/templates/nabi/styles/styles.css&amp;profile=css3">
<img alt="Valid CSS!" title="Valid CSS!" src="templates/nabi/images/css.png" /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://www.spreadfirefox.com/?q=affiliates&amp;id=197529&amp;t=219" target="_blank">
<img alt="Get Firefox 2" title="Get Firefox 2" src="templates/nabi/images/ff2b80x15.gif" /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a target="_blank" href="rss.xml">
<img alt="RSS 2.0" title="RSS 2.0" src="templates/nabi/images/rss2.png" height="15" width="80" /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
جریان این &nbsp; چیه؟
چرا از margin-left یا margin -right استفاده نکردی؟


کد:
<a href="http://www.php.net" target="_blank">
target="_blank" اینم فکر کنم مشکل داشته باشه

موفق باشی
 

NabiKAZ

Well-Known Member
کد:
<a href="http://www.php.net" target="_blank">
target="_blank" اینم فکر کنم مشکل داشته باشه

موفق باشی

در حالت Transitional اشکال نداره، فقط توی حالت Strict اشکال داره، که قرار بود شما جایگزین پیدا کنید
38.gif


سایر موارد رو قبول دارم، الان که فکر میکنم یادم نمیاد دلیل اون کارها چی بوده.


سایت nero هم که تا اونجا که من دیدم بخشیش table base است !!
 

NabiKAZ

Well-Known Member
شما می تونی به جای عکسی که در li اول میزاری یه padding-top به اندازه ی ارتفاع عکس به ul بدی و عکست رو به عنوان بکگروند ul بزاری
به جای li پایینی هم، اخرین li رو یه padding-bottom بدی پوزیشن بکگروند رو صفر و صد درصد بزاری
منظورمو گرفتی یا یه نمونه کد بزارم

زحمت شما رو کم کردم .

با روش خودم یعنی "li خالی" صفحه درست کردم ، اگر زحمتی نیست شما محبت کنید بدون "li خالی" تصحیح کنید.
فایل ضمیمه است.

استفاده میکنیم.

متشکرم
 

پیوست ها

  • ul_li_test.zip
    2.4 کیلوبایت · بازدیدها: 2
راستی اقا حسین (پیشکسوت این فروم
62.gif
هم یه همچین تاپیکی داشت
که 3تا دامین جایزش بود
ولی خیلی قدیمیه
اقا حسین تاپیکو زنده کنم؟ (دارم با دم شیر بازی میکنم
283.gif
)
 

echessdesign

مدیر انجمن طراحی وب
ارادتمند مرتضی جان.
اتفاقا من از اطلاعات با ارزش شما نهایت استفاده رو می کنم، اجازه بفرمایید جایزه رو به 100 مگ هاست تغییر بدم. با این توجه که در صفحات portfolio همانند یک تازه کار ، یک block Lever رو چندین بار در صفحه تکرار کردم :دی
هرچند که جای این صحبت در این تایپیک نیست، پیش تر از نبی جان عذر خواهی می کنم.
پاینده باشید.
 
آخرین ویرایش:

NabiKAZ

Well-Known Member
اینم بدون li خالی

سلام ،
عذر میخوام که دیر پاسخ میدم راستش این تاپیک از دستم در رفته بود .

بابت حل مسئله تشکر میکنم. در این مورد کاملاً حق با شماست. اما اگر نخواییم از تگ a کمک بگیریم اونوقت چی؟ یعنی آیتم ها لینک نباشند.
البته در صورتی هم که آیتم ها بصورت لینک باشند و مجبور باشیم برای هر یک، زمینه ای علاوه بر زمینه اصلی در نظر بگیریم اونوقت چی؟!
شاید بهتر بود مسئله رو طور دیگری مطرح میکردم.
در مورد هر یک از دو سوال بالا فایلی درست کردم که اگر اینبار هم برای هر کدوم راه حلی ارائه بدید اون وقته که دیگه روی من کم میشه !!!
(به شرط تغییر نکردن تصاویر)
تشکر
نبی
 

پیوست ها

  • ul_li_test_without_a.zip
    4.5 کیلوبایت · بازدیدها: 3

NabiKAZ

Well-Known Member
وبلاگ خوشگلی داری ولی نمیدونم جایزه و این حرفا مال چیه؟!

خواهش میکنم، لطف دارید.

جایزه مربوط به یه تاپیک دیگست که آقا حسین برای پیدا کردن ایراد از سایتشون جایزه تعیین کرده بودند.

تشکر
 

nazar69

New Member
سپاسگزاری

سلام نبی جان

وب سایت خیلی جالبی داشتی ازت ممنونم بخاتر اطلاعاتی که در اختیار ما گذاشتی:)

اگه تونستی به وبلاگ من هم یه سر بزن

Mer30
 

جدیدترین ارسال ها

بالا