حرفه ای: کدوم روش رسم بهتر هست؟ [بایگانی]

vimax23

پنج شنبه 30 مرداد 1393, 09:41 صبح

من میخوام تو یه دیو 30 بلوک مربعی بزارم ، که رنگ پیش فرض هر مربع سفید هست و رنگی که موقع سلکت شدن میگیرن قرمز هست با این تفاسیر به نظر شما کدوم روش بهتره؟
یه عکس با 30 بلوک سفید و 30 بلوک قرمز ایجاد کنم ، به صورت اسپریت به بلوک ها دسترسی پیدا کنم؟

یا نه یه دونه عکس چند پیکسیلی از بلوک درست کنم به دو رنگ سبز و سفید بعد سی بار تو html تکرارش کنم؟

یا اینکه سی تا دیو یا اسپن به عنوان بلوک بزارم بعد با بک کلر بهش رنگ سبز و قرمز بدم؟

برای من مهم کم کردن حجم لود صفحه هست ، به صورت پیش فرض همه بلوک ها سفید هستن ، وقتی یکی از بلوک ها انتخاب میشه قرمز میشه ، کدوم روش به نظرتون حجم رو میاره پائین

من اگر عکس پیکسلی بزارم یه دفعه عکس لود میشه در 30 تا
اگر اسپریت بزارم غیر از عکس باید برای هر خونه از 30 تا با کد سی اس اس پوزیشن بک گراند هر بلوک رو مشخص کنم
اگر با دیو یا اسپن بسازم خب سی تا اسپن باید بزارم

دانیال دزفولی

پنج شنبه 30 مرداد 1393, 13:16 عصر

من میخوام تو یه دیو 30 بلوک مربعی بزارم ، که رنگ پیش فرض هر مربع سفید هست و رنگی که موقع سلکت شدن میگیرن قرمز هست با این تفاسیر به نظر شما کدوم روش بهتره؟
یه عکس با 30 بلوک سفید و 30 بلوک قرمز ایجاد کنم ، به صورت اسپریت به بلوک ها دسترسی پیدا کنم؟

یا نه یه دونه عکس چند پیکسیلی از بلوک درست کنم به دو رنگ سبز و سفید بعد سی بار تو html تکرارش کنم؟

یا اینکه سی تا دیو یا اسپن به عنوان بلوک بزارم بعد با بک کلر بهش رنگ سبز و قرمز بدم؟

برای من مهم کم کردن حجم لود صفحه هست ، به صورت پیش فرض همه بلوک ها سفید هستن ، وقتی یکی از بلوک ها انتخاب میشه قرمز میشه ، کدوم روش به نظرتون حجم رو میاره پائین

من اگر عکس پیکسلی بزارم یه دفعه عکس لود میشه در 30 تا
اگر اسپریت بزارم غیر از عکس باید برای هر خونه از 30 تا با کد سی اس اس پوزیشن بک گراند هر بلوک رو مشخص کنم
اگر با دیو یا اسپن بسازم خب سی تا اسپن باید بزارم

اصلا منظور رو متوحه نشدم
این چیزی که شما میگی که کاری نداره !
30 تا دیو سفید میندازین که کنار هم !

2undercover

پنج شنبه 30 مرداد 1393, 14:41 عصر

من میخوام تو یه دیو 30 بلوک مربعی بزارم ، که رنگ پیش فرض هر مربع سفید هست و رنگی که موقع سلکت شدن میگیرن قرمز هست با این تفاسیر به نظر شما کدوم روش بهتره؟
یه عکس با 30 بلوک سفید و 30 بلوک قرمز ایجاد کنم ، به صورت اسپریت به بلوک ها دسترسی پیدا کنم؟

یا نه یه دونه عکس چند پیکسیلی از بلوک درست کنم به دو رنگ سبز و سفید بعد سی بار تو html تکرارش کنم؟

یا اینکه سی تا دیو یا اسپن به عنوان بلوک بزارم بعد با بک کلر بهش رنگ سبز و قرمز بدم؟

برای من مهم کم کردن حجم لود صفحه هست ، به صورت پیش فرض همه بلوک ها سفید هستن ، وقتی یکی از بلوک ها انتخاب میشه قرمز میشه ، کدوم روش به نظرتون حجم رو میاره پائین

من اگر عکس پیکسلی بزارم یه دفعه عکس لود میشه در 30 تا
اگر اسپریت بزارم غیر از عکس باید برای هر خونه از 30 تا با کد سی اس اس پوزیشن بک گراند هر بلوک رو مشخص کنم
اگر با دیو یا اسپن بسازم خب سی تا اسپن باید بزارم

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

من اومدم و از چندین div تو در تو استفاده کردم ولی بعد به فکرم رسید چرا همچین کاری بکنم، در حالی که میشه با یک کد ساده JS با حلقه ی for همه این div هارو درست کرد و به صفحه اضافه کرد. اینجوری حجمش از همه ی راه های دیگه کمتر میشه. چون اون فایل JS هم حجمی نخواهد داشت. فقط تنها چیزی که این وسط درگیر میشه CPU کاربر هست و بس.

vimax23

پنج شنبه 30 مرداد 1393, 16:13 عصر

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

من اومدم و از چندین div تو در تو استفاده کردم ولی بعد به فکرم رسید چرا همچین کاری بکنم، در حالی که میشه با یک کد ساده JS با حلقه ی for همه این div هارو درست کرد و به صفحه اضافه کرد. اینجوری حجمش از همه ی راه های دیگه کمتر میشه. چون اون فایل JS هم حجمی نخواهد داشت. فقط تنها چیزی که این وسط درگیر میشه CPU کاربر هست و بس.

من چهار نمونه ساختم اولی با عکس هست حجمش شد 7 کیلوبایت اما نمیشه نقاط رو دقیقا مشخص کرد بعد اسپریتش کردم حجم سی اس اس خیلی بالا رفت
این دفعه سعی کردم با svg درستش کنم این خیلی خوشگل در اومد و تمیز در اومد عیبش حجمش هست که شده 80 کیلوبایت!
یه کار دیگه هم انجام دادم اومدم با اسپن انجام دادم منتهی اندازش با inline-block سعی کردم ثابت کنم عیبش اینه که اندازه ها رو مجبورم بزرگ کنم و تو یه سطر نمیشه همه 12 بلوک رو جای داد
جی اس خب میشه کدشو اصلاح کرد ، میتونی اشتراک بزاری ببینم چی نوشتی؟

vimax23

پنج شنبه 30 مرداد 1393, 16:15 عصر

اصلا منظور رو متوحه نشدم
این چیزی که شما میگی که کاری نداره !
30 تا دیو سفید میندازین که کنار هم !

این آواتارو نگاه کن!
http://barnamenevis.org/image.php?u=261565&dateline=1408025270
بوردر آبی رو ولش کن ، اون بلوک هایی که با رنگ آبی کم رنگ هست توش نوشته علی ، این 9 در 9 هست من 6 در 6 میخوام درست کنم
سبکترین راه رو دنبالشم چون که 12 تا باید عین همین برای کاربر لود بشه !

دانیال دزفولی

پنج شنبه 30 مرداد 1393, 16:37 عصر

میتونید یه دیو درست کنید و بهش باکس شادو های زیادی بدید

vimax23

پنج شنبه 30 مرداد 1393, 16:58 عصر

میتونید یه دیو درست کنید و بهش باکس شادو های زیادی بدید

متوجه منظورت نشدم کد بزار ببینم چی میگی

دانیال دزفولی

پنج شنبه 30 مرداد 1393, 17:02 عصر

http://jsfiddle.net/k2k5sk41/

qartalonline

پنج شنبه 30 مرداد 1393, 17:05 عصر

خوب 30 تا div ایجاد کنید مشکلی پیش نمیاد. حجم زیادی هم نمیگیره.

vimax23

پنج شنبه 30 مرداد 1393, 17:26 عصر

خوب 30 تا div ایجاد کنید مشکلی پیش نمیاد. حجم زیادی هم نمیگیره.

نمیشه اونطوری که میخوام دو رنگه در نمیاد ، من از یه روش دیگه درستش کردم البته با اسپن

ABZiko

پنج شنبه 30 مرداد 1393, 17:36 عصر

چرا دو رنگه نمی شه؟

qartalonline

پنج شنبه 30 مرداد 1393, 17:41 عصر

دو رنگه رو منظورتون رو دقیق متوجه نشدم، میشه بک گراند رو عوض کرد، یا با کلیک یه کلاس اضافه کرد به تگ. البته تگش مهم نیست میتونید از تگ i استفاده کنید که حجم کمتر بشه.

2undercover

پنج شنبه 30 مرداد 1393, 17:44 عصر

این هم یک پیش نمایش از چیزی که گفتم و حجمش رو هم همونطور که می بینید بسیار بسیار کمتر از روش های دیگر هست:

ساخت سطر و ستون در تعداد بالا با حجم کم (http://codepen.io/2undercover/pen/rmyhB)

_mojitaba_

پنج شنبه 30 مرداد 1393, 17:46 عصر

بلوک ها میخواید یکی در میون رنگشون تغییر کنه؟ خب مگه با nth-child(odd) یا برعکسش نمیشه؟

2undercover

پنج شنبه 30 مرداد 1393, 17:50 عصر

این آواتارو نگاه کن!
http://barnamenevis.org/image.php?u=261565&dateline=1408025270
بوردر آبی رو ولش کن ، اون بلوک هایی که با رنگ آبی کم رنگ هست توش نوشته علی ، این 9 در 9 هست من 6 در 6 میخوام درست کنم
سبکترین راه رو دنبالشم چون که 12 تا باید عین همین برای کاربر لود بشه !

اتفاقا کاری که من گفتم انجام دادم هم درست کردن همین آواتار با استفاده از HTML و انیمیشن های CSS3 بود.

qartalonline

پنج شنبه 30 مرداد 1393, 18:12 عصر

البته بدون استفاده از js هم میشه این اشکال رو ساخت، ولی اگه تعداد بیشتر باشه بهتره از js و روشی که دوستمون معرفی کردن استفاده بشه.
مثال بدون استفاده از js: (کمتر از 2 کیلوبایت).

<!DOCTYPE html>
<html>
<head>
<title>title</title>
<style type="text/css">
#Container{
display: block;
height: 500px;
width: 500px;
}
#Container i{
display: block;
height: 16.66666666666667%;
width: 16.66666666666667%;
float: left;
border: 1px #999 solid;
margin-left: -1px;
margin-top: -1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#Container i.hover,
#Container i:hover{
background: #f00;
}
</style>
</head>
<body>

<div id="Container">




































</div>

</body>
</html>

ABZiko

پنج شنبه 30 مرداد 1393, 18:16 عصر

از SVG هم استفاده کنی خیلی جالبه مثلا توی این سایت رو نگاه کن، یک دونه مربع یا مستطیل یا ... بساز و اون رو داخل loop قرار بده :
http://stackoverflow.com/questions/12786797/how-to-draw-rectangles-dynamically-in-svg

vimax23

جمعه 31 مرداد 1393, 10:12 صبح

چرا دو رنگه نمی شه؟

فکر کن دو تا دیو هست روی هم دیگه هستن به صورت پیش فرض دیو سفید دیفالته و روش دقیقا دیو با رنگ قرمز هست که هر خونه یه مقداری میگیره از دیتابیس اگر اوکی باشه قرمز میشه
من اینو همونطور که گفتم یه راه خیلی خیلی سبک انجام دادم که وقتی کد میاد تو صفحه کمتر از 8 کیلوبایت هست svg رو از اون لینکی که دادی خیلی ساده تر میشه نوشت ولی حجم میره بالا 80 کیلوبایت شد بی خیالش شدم

اتفاقا کاری که من گفتم انجام دادم هم درست کردن همین آواتار با استفاده از HTML و انیمیشن های CSS3 بود.
من نمیخواستم از css3 استفاده کنم چون میخواستم روی ورژن های پائین مرورگرها جواب بده
ممنون از اشتراک کد یه جدول دارم ببینم میتونم از این یکی اینبار ساتفاده کنم

البته بدون استفاده از js هم میشه این اشکال رو ساخت، ولی اگه تعداد بیشتر باشه بهتره از js و روشی که دوستمون معرفی کردن استفاده بشه.
مثال بدون استفاده از js: (کمتر از 2 کیلوبایت).

<!DOCTYPE html>
<html>
<head>
<title>title</title>
<style type="text/css">
#Container{
display: block;
height: 500px;
width: 500px;
}
#Container i{
display: block;
height: 16.66666666666667%;
width: 16.66666666666667%;
float: left;
border: 1px #999 solid;
margin-left: -1px;
margin-top: -1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#Container i.hover,
#Container i:hover{
background: #f00;
}
</style>
</head>
<body>

<div id="Container">




































</div>

</body>
</html>

من با اسپن درست کردم 24 تا جدول ساختم شد 7 کیلوبایت ، اینم شبیه همون میشه

دانیال دزفولی

جمعه 31 مرداد 1393, 10:59 صبح

کلا این همه بحث داریم میکنیم سر 7 کیلو بایته ؟ !

vimax23

جمعه 31 مرداد 1393, 11:55 صبح

کلا این همه بحث داریم میکنیم سر 7 کیلو بایته ؟ !

کارفرمای من حجم صفحه براش مهم هست
من از هیچ پلاگین اماده تو کار استفاده نکردم هر چی بود رو از پایه براش نوشتم :لبخند: