8 اشتباهی که هنگام یادگیری توسعه وب رخ میده

در این مقاله با 8 اشتباهی که هنگام یادگیری توسعه وب رخ میده آشنا میشیم. همراه ما باشین.

همه ما برای یادگیری از یه جایی شروع میکنیم و اکثرا، در ابتدای راه هیچ دانشی در دنیای توسعه وب نداریم.

پس چطور میشه یاد گرفت؟ با شیرجه زدن در دنیای توسعه وب!

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

با این حال ، رفتن به آن باید همراه یادگیری بعضی از بهترین و مناسب ترین روش ها باشه، وگرنه در انتها ، شما فقط خود زنی کردین.

این پست به عنوان راهنما ی توسعه دهنده های تازه کار در نظر گرفته شده ، و امیدوارم براتون مفید باشه.

اینجا 8 اشتباهی که هنگام یادگیری توسعه وب رخ میده ، و نحوه کنترل کردنش رو بهتون یاد میدیم.

انتظار بیش از حد از مرورگر

مرورگرها در حال حاضر کار زیادی انجام میدن، بنابراین با تغییر اندازه تصاویر ، کارشونو بیشتر نکنیم!

وقتی اندازه رو به صراحت بیان میکنین ، تصاویر شما باید inline  باشن ، مثل:

<img src=”img/img.png” alt=”My Image” waidth=”32″ height=”32″ />

شما به مرورگر میگین اندازه تصویر رو تغییر بده. حالا به هر اندازه ای که باشه ، 32 پیکسل در 32 پیکسل بشه.

به جای این کار سعی کنین مطمئن بشین تصاویری که استفاده میکنین به اندازه مورد نیاز برای شروع هستن،

یا حداقل به جای تعریف inline   اندازه ی اون از CSS استفاده کنین.

درخواست بیش از حد به سرور

در مورد تصاویر، سعی کنین تا جایی که امکان داره از مسیرهای نسبی استفاده کنین.

مسیر نسبی یعنی مسیری که شما به منبعی در مورد مکان (پوشه پروژه) فعلی اشاره کردین.

بنابراین ، به عنوان مثال ، اگه شما یک دایرکتوری دارین،

به این صورت که یک پوشه images  دارین و یک تصویر درون اون به نام image

و حالا میخواین اونو از index.html خودتون فراخوانی کنین ، میتونین از این موارد استفاده کنین:

<img src=”images/img.png” alt=”My Image” />

به جای اینکه مسیر کامل رو اینطوری بخونین ،

<img src=”http://mydomain.com/images/img.png” alt=”My Image” />

هر بار که یک مرورگر مجبور به درخواست HTTP میشه ، سرعت لود صفحه رو کاهش میدین.

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

جاوا اسکریپت غیرضروری

یک زمانی برای انجام هر تعامل یا بازخورد کاربر در یک صفحه به JavaScript نیاز بود.

هرچند هنوز هم این برای برخی موارد درسته، اما برای برخی از جنبه های ساده استفاده از JavaScript نیازی نیست.

مثال؛ موس اور کردن،

بازخورد تصویری خوب برای کاربرای شما میتونه ایجاد یک چرخش برای لینک ها باشه ،

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

که این قابلیت به راحتی از طریق CSS قابل دستیابی هست پس نیازی به استفاده از جاوا اسکریپت و کنترل کننده های رویداد برای تغییر تصویر نیست.

مثالی در همین باب:

HTML :

<a href=”#” title=”My Link” id=”my-link”>My Link</a>

CSS :

#my-link{

width:40px;

height:20px;

display:block;

background:url(img/link-off.png) no-repeat;

text-indent:-9999px;

}

#my-link:hover{

background:url(img/link-on.png) no-repeat;

}

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

یک قدم جلوتر باشین

این روش بهتر از استفاده از JavaScript هست ، و ما میتونیم با استفاده از sprites به جای اون بهتر عمل کنیم.

یک روح در چندین تصویر ، یعنی  ترکیب چند تصویر در یک تصویر بزرگتر و قرار دادن اون تصویر های کوچیک با CSS تا قسمت مورد نظر تصویر اصلی رو نشون بدن.

این باعث کاهش بارگذاری تصویر در سرور و پاسخگویی بهتر سایت میشه.

برای ایجاد sprite ، شما چندین تصویر رو جمع میکنین و به عنوان مثال لیستی از لینک های اجتماعی ایجاد میکنین ،

حالا میخواین هر کدوم از لینک ها دارای یک تصویر اصلی و یک تصویر موس اور باشه.

لیستی از چهار لینک ، به طور معمول به هشت تصویر نیاز داره اما با استفاده از sprite ، میتونیم این رو خلاصه کنیم!

بیاین به یکی از راه های بررسی این موضوع نگاهی بندازیم.

این تنظیم با فرض ایجاد یک روح با دو ردیف از چهار آیکون ، حالت های عادی در بالا و حالت های شناور در پایین هست ،

HTML :

<ul id=”social-list”>

    <li><a href=”#” title=”Twitter Link” id=”twitter”>Twitter</a></li>

    <li><a href=”#” title=”Facebook Link” id=”facebook”>Facebook</a></li>

    <li><a href=”#” title=”Google+ Link” id=”google”>Google +</a></li>

    <li><a href=”#” title=”LinkedIn Link” id=”linkedin”>LinkedIn</a></li>

</ul>

CSS :

#social-list{float:left;margin:0;}

#social-list li{float:left;width:32px;height:32px;margin:0 4px;}

#social-list li a{width:100%;height:100%;display:block;text-indent:-9999px;background:url(img/social-sprite.png) no-repeat 0px 0px;}

#twitter{background-position:0px 0px;}

#facebook{background-position:0px -32px;}

#google{background-position:0px -64px;}

#linkedin{background-position:0px -96px;}

#twitter:hover{background-position:-32px 0px;}

#facebook:hover{background-position:-32px -32px;}

#google:hover{background-position:-32px -64px;}

#linkedin:hover{background-position:-32px -96px;}

میبینین که با استفاده از یک تصویر و تغییر موقعیت اون بسته به مکانی که از اون استفاده میکنیم ،می تونیم برای اهداف مختلف مانور بدیم.

و اینجا باعث شد استفاده از استفاده ی هشت تصویر مختلف جلو گیری کنیم.

کلاس ها و id ها

تفاوت بین کلاسها و id ها ، با سطح خاص بودن اونا مشخص میشه.

کافیه بگیم که هر مقدار CSS که به یک id اختصاص میدین فقط وفقط به همان مقدار اختصاص داده شده،

و مقدار اختصاص داده شده به همون عنصر با یک کلاس رو لغو میکنه.

برای فهم بیشتر به این مثال توجه کنین:

HTML :

<h1 class=”big-blue” id=”bigger-red”> I Am a Title! </h1>

CSS :

#bigger-red{color:red;}

.big-blue{color:blue;}

حتی اگه کلاس big-blue بعد از کلاس bigger-red نوشته بشه ، متن h1 قرمز خواهد بود چون یک id از این طریق به یک کلاس غلبه میکنه.

دومین مسئله رایج در کلاسها و id ها ، استفاده از نشانه گذاری هاست.

اساساً یک ID برای فقط یک عنصر در هر صفحه استفاده شده ، در حالی که یک کلاس میتونه مورد استفاده مجدد قرار بگیره.

اگه برچسب هدر دارین ، از سلکتور h2 بخواین که همیشه میخواید فلان سایز و فلان رنگ باشه،

وقتی نیاز دارین به کنترل مقدار CSS که به اون اختصاص میدین ، یک اشتباه رایج استفاده از ID برای انجام این کاره!

از لحاظ معنایی این نادرسته چون این تگ قراره چندین بار در یک صفحه استفاده بشه ، پس این نیاز به استفاده از یک کلاس داره!

حالا اگه مثلاً یک برچسب h2 داشته باشین که همیشه قراره عنوان صفحه مورد استفاده قرار باشه ،

پس به طور کلی فقط یک بار استفاده میشه چون صفحه فقط به یک عنوان نیاز داره و میشه برای اون از یک id استفاده کرد.

مثالی که به طور گسترده مورد استفاده قرار میگیره ، تنظیم برخی ستون هاست.

نگاهی به کد مثال زیر بندازین.

HTML:

<h4 id=”title”>My Column Title</h4>

<div class=”column”>

    <p>Hi I am a column!</p>

</div>

<div class=”column”>

    <p>Hi I am a column also.</p>

</div>

<div class=”column”>

    <p>Hi I must be a column too!</p>

</div>

استفاده از شناسه رو میبینین کمک میکنه تا عنوان این قسمت ستون رو مرتب کنم ، با این فرض که فقط یک صفحه وجود داره.

هر ستون کلاس یکسانی داره چون به احتمال زیاد هر ستون از یک سبک مثل عرض و رنگ و… برخورداره.

Absolute Positioning

این یک روش حقه بازیه ، اما اغلب اوقات تازه واردا از Positioning عناصر به شدت استفاده میکننن.

مشکلی که در این مورد وجود داره اینه که  شما باید خوش شانس باشین تا درست کار کنه و همچنین ، این روش درستی برای انجام کارها نیست.

یک قانون کلی میگه؛ از Absolute Positioning استفاده نکنین. مگر اینکه مجبور باشین.

با گفتن اینکه یک عنصر کجا باید باشه ، شما اونو از جریان استاندارد صفحه خارج میکنین ،

به این معنی که اگر تصویری در سمت چپ یک کانتینر و مقداری متن در سمت راست اون میخواین ،

ممکنه سعی کنید از Absolute Positioning روی عنصر تصویر استفاده کنین،

اما انجام این کار اساساً اون تصویر رو مجبور میکنه که بخشی از پس زمینه بشه!

به این معنی که عرض و ارتفاع اون به طور معمول در طرح بندی صفحه قرار میگیره و متن در سمت راست بالای اون قرار میگیره!!

وقتی این اتفاق میافته ، باید  با استفاده از دوباره از Absolute Positioning یا یک margin زیاد برای هل دادن اون متن به سمت راست ، جبرانش کنین ، تا درست بشه.

استفاده از همچین طرح و روش سختی نگهداری آینده کد شما رو سخت تر میکنه ، پس در عوض ،

سعی کنید در صورت اجبار در کانتینر ها به جای Absolute Positioning و ازblock  وfloat مناسب استفاده کنین.

در اینجا چند کد از مثال بالا به درستی انجام شده.

HTML:

<div id=”container”>

    <img src=”img/myimg.jpg” alt=”myimg” />

    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

</div>

CSS:

#container{width:500px;}

#container img{float:left;}

#container p{float:right;}

یک مثال بسیار ساده ، اما شما رو متوجه موضوع میکنه.

علامت گذاری اضافی

گاهی اوقات به عنوان divitis هم شناخته میشه ، بسیاری از افراد بیش از حد به استفاده از div ها برای مسدود کردن بخش ها وابسته میشن.

به عنوان مثال ، از div برای محاصره بخش nav استفاده میکنن:

<div id=”nav”>

    <ul>

        <li><a href=”#”>Home</a></li>

        <li><a href=”#”>Blog</a></li>

        <li><a href=”#”>Contact</a></li>

    </ul>

</div>

در حالی که این هیچ مشکلی نداره ، شما میتونید تقسیمای اضافی رو با اختصاص دادن آیدی nav مستقیم به UL حذف کنین!!

مثال مفصل تر میتونه به شرح زیر باشه:

<div id=”container”>

    <div>

        <div>

            <img src=”img.jpg” />

        </div>

        <div>

            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

        </div>

    </div>

</div>

این همه تقسیم !!  حالا واقعا چند موردش لازمه؟

به یاد داشته باشین که میتونین از CSS برای هدف قرار دادن عناصر استفاده کنین و به اونا بگین چطور رفتار کنن.

مثلا برای داشتن یک تصویر با متن ظاهر شده در زیر تصویر ، میتونین این کارو انجام بدین.

HTML :

<div id=”container”>

    <img src=”img.jpg” />

    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

</div>

CSS :

#container{width:400px;margin: 0 auto;}

#container img{display:block;float:left;}

#container p{clear:left;}

شروع به تغییر روش های نشانه گذاری خودتون بکنین که بتونید تقسیم های اضافی رو حذف کنین و یک کد استاندارد داشته باشین.

دویدن قبل از پیاده روی!

PHP ، وردپرس ، jQuery ؛

اینا برخی اصطلاحات هستن که مطمئن هستم شما نام اونا رو شنیدین و حتی شاید با اونا کار کرده باشین.

یک مسئله مهم اینه که تازه واردا سعی میکنن قبل از اینکه اصول اولیه رو درک کنن ، به بخشهای عمیق تری رو بیارن.

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

با این حال ، اگه هنوز نمیتونید یک صفحه HTML ثابت ایجاد کنین ، تصور کار کردن WP و PHP مسخره هست.

به هیچ وجه نمیگیم  فرم ورک ها تکنولوژی ها و کتابخانه های جدید رو یاد نگیرین و کار نکنید.

این به این معناست که قبل از اینکه سعی کنید در PHP و سایر فرم ورک ها وارد بشین حداقل یک پایه اساسی در HTML و CSS  داشته باشین.

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

منبع