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

چگونه برای مرورگرهای اینترنت اکسپلورر سی اس اس اختصاصی بنویسیم ؟

یکی از چالشهای هر طراح وب سایت باگ هایی است که به واسطه استفاده از مرورگر اینترنت اکسپلورر به وجود می آید . از آنجایی که معمولا مشتریان و بازدید کنندگان وب سایت هنوز از IE استفاده می کنند ( و خوشبختانه با حضور مرورگرهای قدرتمندی چون کروم و فایرفاکس این روند رو به کاهش است ) باید به رفع باگ ها و ایرادات نمایش صفحات در این مرورگر بپردازیم . قبلا در مرود استفاده از سی اس اس ریست – CSS Reset برای یکسان سازی و یکپارچه سازی کدهای سی اس اس در مرورگرهای متفاوت نیز مطالبی ارائه شده است که خواندن آن توصیه میشود . یکی از بهترین شیوه ها برای خلاص شدن از دست این نا هماهنگی ها استفاده از کامنت های شرطی conditional comments است . البته راه های زیادی هم علاوه بر دستورات شرطی وجود دارد .

کامنت های شرطی IE conditional comments

کامنت گذاری به صورت HTML برای طراحان وب سایت شناخته شده است . کامنت ها به طراحان کمک میکند تا کدهای تمیز تری داشته باشند و کدها از خوانایی بیشتری برخوردار شوند .

به صورت معمول برای گذاشت کامنت در سورس کدهای HTML از کد زیر استفاده میشود

<!-- -->

توجه داشته باشید در اینجا از کامنت گذاری در کدهای اچ تی ام ال صحبت میشود و این کامنت ها در کدهای سی اس اس و … به صورت های دیگری مورد استفاده قرار میگیرند .

مرورگر اینترنت اکسپلورر دارای خصوصیت دستورهای شرطی است که در مرورگرهای دیگر پشتیبانی نمیشود و این مورد به طراحان وب سایت کمک خواهد کرد تا دستورات و کدهای HTML اختصاصی برای مرورگرهای IE را در کدهای اچ تی ام ال قرار دهند .

در این نوع از کامنت گذاری در صورت صحیح بودن شرط کدهای داخل کامنت که به صورت HTML نوشته شده اند خوانده و اجرا میشوند . این محتوا میتواند لینک یک Style خارجی و یا یک تگ باشد و یا دستورات سی اس اس داخلی و …

این کامنت ها در مرورگرهای دیگر به عنوان کامنت محسوب میشوند و دستورات شرطی نادیده گرفته خواهند شد .کامنت های شرطی برای مرور گر IE از متداول ترین راه های رفع باگ های نسخه های (IE6,IE7,IE8) می باشد. کامنت های شرطی به ما کمک خواهند کرد که نسخه مرورگر IE کاربر را مورد هدف قرار دهیم و برای رفع نا هماهنگی ها در آن نسخه ، دستورات سی اس اس به خصوصی بنویسیم . در زیر نمونه کد هایی ارائه شده است و میبینید که هدف آنها نسخه های مختلف IE می باشد :

<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->

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

• gt: نسخه بالاتر از
• gte: نسخه بالاتر از یا برابر
• lt: نسخه پایین تر
• lte: نسخه پایین تر یا برابر

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

<!--[if !IE]> -->

قوانین مخصوص CSS برای اکسپلورر

موارد دیگری در قوانین CSS بیان شده است که فقط در اینترنت اکسپلور اجرا می شود. برای مثال افزودن علامت ستاره (*) قبل از خصوصیت ((property ، CSS برای IE7 یا افزودن علامت آندر اسکور (_) قبل از خصوصیات ((property، CSS برای IE6 . این روش ها معمولا پیشنهاد نمی شود زیرا به اندازه کافی معتبر نیستند.

• IE8 یا نسخه پائین تر : برای نوشتن قوانین CSS مخصوصا برای IE8 یا پائین تر یک بک اسلش backslash (/9)در آخر قبل از (;) اضافه کنید
• IE7 یا پائین تر : افزودن ستاره (*) قبل از خصوصیات ((property CSS
• IE6 : افزودن آندر اسکور (_) قبل از خصوصیات ((property

.box {

	background: gray; /* standard */

	background: pink\9; /* IE 8 and below */

	*background: green; /* IE 7 and below */

	_background: blue; /* IE 6 */

}

استفاده از کلاس های شرطی در تگ HTML برای اینترنت اکسپلورر

سومین راه حل افزودن کلاس های CSS برای نسخه های IE به تگ های HTML بوسیله کامنت های شرطی IE می باشد . این روش اساسا بررسی می کند در صورتی که مرور گر ما IE بود، به تگ HTML یک کلاس اضافه میکند و از کلاس IE به عنوان گزینشگر parent میتوان برای هدف قرار دادن کلاسها در مرورگرهای اینترنت اکسپلورر با نسخه های مختلف استفاده کرد . ( برای مثال ie6.box ).

<!--[if lt IE 7 ]> html class="ie6" <![endif]-->
<!--[if IE 7 ]> html class="ie7" <![endif]-->
<!--[if IE 8 ]> html class="ie8" <![endif]-->
<!--[if IE 9 ]> html class="ie9" <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> html <!--<![endif]-->

دستورات شرطی راه مطمئنی برای صحیح انجام شدن دستورات سی اس اس شما در مرورگ اینترنت اکسپلورر کاربر شماست اما به طور کلی استفاده از روشهای استاندارد کد نویسی میتواند نیاز شما به استفاده از هک برای مرورگرهای اینترنت اکسپلورر را بر طرف کند .( البته این فقط یک شوخی بود نظر شما در مورد مرورگر اینترنت اکسپلورر چیست ؟

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

www.bagigia.com

طراحی وب سایت تعاملی – interactive website design و طراحی وب سایت واکنشگرا – Responsive Web Design

واژگانی مانند وب سایت های تعاملی یا واکنشگرا – interactive website design – Responsive Web Design – چندیست که در بین طراحان وب سایت استفاده میشوند و استفاده از این نوع از تکنیک ها در بین طراحان وب بسیار مرسوم گردیده . در واقع طراحان وب در فکر تعامل هر چه بیشتر وب سایت با مخاطبان هستند تا بتوانند حس زیبای تعامل و مهم شناخته شدن مخاطب را منتقل کنند . در اینگونه از طراحی ها پاسخ های مناسبی به اکشن ها یا حرکات کاربر در وب سایت داده خواهد شد و کاربر را بیش از پیش برای گشت و گذار و حرکت در تمامی صفحات وب سایت مشتاق خواهد کرد

هر چند مباحث طراحی واکنش گرا – Responsive Web Design – و تعاملی – interactive website design – دارای مفاهیم مشترکی هستند و هدف هر دو راحتی و افزایش تعامل در وب سایت است ولی میتوان آنها را دو مبحث مجزا در طراحی وب سایت نام برد .

طراحی واکنشگرا در مورد تکنیک های CSS3 برای واکنش وب سایت نسبت به تغییر دستگاه های مختلف مانند تبلت ها ، موبایلها ، لپ تاپ ها و تلویزیون های هوشمند و همچنین تغییر رزولوشن ها مورد استفاده قرار میگیرد . در این تکنیک با استفاده از ویژگی های جدید CSS3 – W3C CSS3 media queries – و همچنین طراحی های شناور – fluid proportion-based grids – وب سایت را بدون نیاز به نسخه های متفاوت برای دستگاه ها و رزولوشن های مختلف طراحی می کنند .

کافیست در همین صفحه ( وب تارگت ) پنجره مرورگر خود را بزرگ و کوچک کنید تا نوعی از طراحی واکنشگرا – Responsive و استفاده از ساختار شناور را ملاحظه نمائید

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

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

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

www.hardgraft.com

slaveryfootprint.org

www.wanda.net

planetpropaganda.com

www.dangersoffracking.com

editsquarterly.com

www.hanzell.com

springsummer.dk

smallstudio.com.au

www.mccormackmorrison.com

www.bagigia.com

www.socketstudios.com

www.mustache.dk

encandle.com

www.oncarbure.com

blindbarber.com

www.unitedpixelworkers.com

squarefactor.com

www.neotokio.it

inze.it

captaindash.com

www.graydenpoper.com

www.secondstory.com

www.superlovers.fr

thepenthouseproject.com

jamesanderson613.com

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

در این مقاله سعی خواهیم کرد تا با واژه Bounce rate آشنا شویم و تعدادی از دلایل خروج کاربران در اولین بازدید از وب سایت را بررسی نمائیم و همچنین راه کارهایی برای کاهش میزان خروج کاربران از وب سایت – Bounce rate – ارائه کنیم .

Bounce rate چیست ؟

لغت Bounce در زبان انگلیسی به معنی گزاف گویی و پس زدگی معنی می شود و Bounce rate را به طور لغوی می توان میزان پس زدگی نامید .

Bounce rate مقیاسی است مناسب جهت بررسی میزان فعالیت کاربران در سایت . می توان دلایل عمده کاهش فعالیت کاربران در سایت را مواردی دانست که موجب آزار و هم چنین گیج شدن آن ها در وب سایت می شوند. عدم تمرکز کاربران در سایت می تواند در نتیجه استفاده بیش از حد از انیمیشن و هم چنین استفاده از رنگ های نا مناسب برای وب سایت باشد . عوامل آزار دهنده می توانند navigation ضعیف ، پیغام های خطای نامناسب و استفاده از فونت های نامناسب و ناخوانا باشند. برای سنجش میزان Bounce rate در وب سایت خود میتواند از ابزار رایگان گوگل – Google Analytics – استفاده نمائید .

در اینجا ۶ عامل کلی را که موجب کاهش Bounce rate می شود را بیان می کنیم :

۱ – استفاده از user interface مناسب

اولین موردی که می تواند موجب آزار یک کاربر شود استفاده از user interface نا مناسب است . در بالاترین قسمت سایت navigation قرار می گیرد که طراحی آن باید به گونه ای باشد که استفاده از آن آسان بوده و مهم تر از همه واضح و روشن باشد.

هم چنین مطمئن شوید که navigation سایت ساده بوده و مبرا از هر گونه موارد غیر ضروری باشد. مکان و موقعیت عناصر اصلی سایت باید به گونه ای قابل پیش بینی باشد. به عنوان مثال box های جستجو ، navigation، لوگو ها و دکمه ها باید در جاهایی گذاشته شوند که کاربر انتظار دارد . فرم های نا مناسب اغلب نقش ویژه ای در افزایش خروج کاربران یا افزایش bounce rate در سایت دارند . فرم ها باید به گونه ای باشند که پر کردن آن ها سریع و آسان باشند . هم چنین label آن ها باید واضح باشند و از رنگ هایی استفاده شود که کاربر را مشغول و سرگرم نماید . فرم های طولانی به چندین فرم کوتاه تر شکسته شوند و ترتیبی داده شود که کاربر بداند در کجای مسیر قرار گرفته است و چند مرحله دیگر باید طی کند تا کارش به پایان برسد.

۲ – استفاده از عکس های با کیفیت و مرتبط با موضوع

وقتی کاربران عکس های عام و general را بر روی وب سایت می بینند تصور می کنند که وب سایت جعلی و غیر واقعی است . عکس های متناسب و زیبا سرمایه ایست بسیار معقول برای سایت . عکاس های خوبی را استخدام کنید تا از محصولاتتان ، موقعیتتان و … عکس بگیرند . مطمئن شوید عکس هایی را که انتخاب می کنید متناسب و مرتبط با موضوع باشند و موجب آزار کاربر نشوند . هم چنین عکس ها بهتر است رنگ هایی متناسب با رنگ بندی وب سایت داشته باشند .

۳ – استفاده از رنگ های جالب و سرگرم کننده

بهتر است برای theme از رنگ های زنده و جذاب استفاده نمایید . استفاده از رنگ های فوق العاده کم رنگ و روشن موجب آزار چشم کاربر و افزایش bounce rate می شود مگر اینکه موضوع سایت کودکان باشند .

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

۴- استفاده از فونت های خوانا

مطمئن شوید که کاربران می توانند عناوین ، پاراگراف ها و لینک ها را به راحتی بخوانند . فونت های واضح و روشنی را انتخاب نمایید که به سرعت و به راحتی قابل خواندن باشند . هم چنین رنگ فونت باید با رنگ پس زمینه تضاد داشته باشد به عنوان مثال نباید فونت صورتی روی پس مینه قرمز گذاشته شود . سایز فونت ها هم باید به گونه ای قابل خواندن باشند . استفاده از فونت های دست نویس مثلا نستعلیق یا فونت هایی با سایز کوچک ، برای پاراگراف های طولانی به هیچ وجه ایده مناسبی نیست .

استفاده از رنگ ها و سایز های مناسب برای عناوین و پاراگراف ها باعث می شود که کاربر احساس راحتی نماید .فضای خالی و سفید بر روی خوانایی بسیار تاثیر گذار است . تو در تو بودن کاراکترها باعث سخت تشخیص دادن کاراکترها و لغات و در نتیجه زود خسته شدن کاربران می شود . فونت های استاندارد خالی از این گونه نواقص می باشند. فضای خالی میان خطوط به خصوص در پاراگراف های بزرگ بر روی خوانایی بسیار تاثیر گذار است .

۵- طراحی متناسب با نوع برند

رنگ ها ، لوگو ها ،فونت ها ، لینک ها ، دکمه ها ، input ها و پس زمینه ها و… همگی نمایش دهنده یک برند یا نام تجاری خواهند بود . تناسب استفاده از اجزاء با نام تجاری میتواند در کاهش Bounce rate تاثیر چشمگیری داشته باشد .

نمایش لوگو در تمامی صفحات و همچنین داشتن فرمت یکسان برای تمامی صفحات موجب تاکید بیشتر بر روی برند می شود. داشتن پهنای یکسان برای بخش محتوا و سایدبار ، همچنین رنگ و بافت یکسان برای تمامی صفحات و در نهایت داشتن هدر و footer یکسان در تمامی صفحات موجب کاهش bounce rate می شوند. هدر ها و footer ها نقش بزرگی در نمایش design یک سایت و جذب مشتری دارند . استفاده از رنگها و تصاویر سازمانی و همچنین المانهای یکپارچه در تمامی رسانه ها از یک نام تجاری موجب افزایش اعتماد برای یک نام تجاری خواهد شد .

۶- استفاده از feedback های واکنشی

عوامل قابل کلیک مثل دکمه ها و لینک ها باید به گونه ای طراحی شوند که کاربر متوجه قابل کلیک بودن آن ها بشود . علاوه بر عوامل قابل کلیک باید به کاربر دستورالعمل واضح و روشنی جهت پر کردن فرم ها یا کلیه فرایند های موجود در وب سایت داده شود تا کاربر بداند چه موقع کارش به پایان می رسد.

پیغام ها و توضیحات خطا در صورتی که به گونه ای مناسب طراحی نشوند خود می توانند عاملی مهم در افزایش bounce rate باشند . مثلا اگر در فرمی خطایی صورت گرفت پیغام خطا در همان قسمت input وارد شود و از نمایش پیغام خطا توسط pop up اجتناب شود .

اگر از پیغامی جهت راهنمایی یا دادن دستورالعمل به کاربران استفاده می کنید سعی کنید از جملات مثبت استفاده نمایید . از به کار بردن لغاتی چون – خطا – ، – اشتباه – ، – باید – ،…. اجتناب کنید و سعی کنید از لغات مثبت تری استفاده نمایید که کاربر احساس حماقت و جهالت نکند .

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

این نوشته توسط خانم لیلا طاهری واحد برای وب تارگت ترجمه و نوشته شده است . امیدواریم شاهد فعالیت بیشتر ایشان باشیم . نظرات سازنده شما میتواند ما را در ادامه راه دلگرم و خشنود نماید .

Thumbnail چیست ؟

در یک جستجوی ساده در ویکی پدیا تعریفی از Thumbnail خواهید یافت . ” Thumbnail ها نسخه های کوچک شده ای از تصاویر هستند که به سازماندهی و شناخت آنها کمک خواهند کرد , در حقیقت نقش مشابهی مانند فهرست متنی را برای تصاویر دارا هستند . در این مجموعه ۲۵ نمونه از تکنیک های خلاقانه استفاده از Thumbnail ها و یا تصاویر بند انگشتی مورد بررسی قرار گرفته است .

TWO FISH ILLUSTRATION & DESIGN

TWOTO

KOKOKAKA

BRAVE NU DIGITAL

F O U N D E D

IDEA EXHIBIT

ASTRONAUT DESIGN

MARC KREMERS

PURPOSE

REJANE DAL BELLO

JAMES DE ANGELIS

HARPOON

BAUBAUHAUS

VIKTORIA KLEIN

UNIFORM

TYPETOKEN

BLANK

CRAIG AND KARL

FRANKLIN GAW

KOMPLEX 457

DUST + MOLD

DAN MALL

SISU

ADAM

در بخش اول این نوشته با عنوان ، نکته‌ها و ترفندها برای برنامه نویسان جی کوئری # ۱ ، ۷ نکته کاربردی را برای استفاده بهتر از کتابخانه جی کوئری ذکر کردیم. در ادامه نکات دیگری برای اینکه بتوانید کدهای جی کوئری خود را بهبود ببخشید آورده می‌شوند.

۸- استفاده صحیح از ویژگی زنجیره‌ای (chaining) در جی کوئری

یکی از جالبترین چیزها در مورد جی کوئری توانایی آن در فراخوانی زنجیره‌ای متدهاست. در مثال زیر یک کلاس را از یک عنصر حذف می‌کنیم و به جایش یک کلاس دیگر اضافه می‌کنیم.

$('myDiv').removeClass('off').addClass('on');

می‌بینید که این کار را به صورت زنجیره‌ای انجام دادیم.

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

$('#mypanel')
    .find('TABLE .firstCol')
    .removeClass('.firstCol')
    .css('background' : 'red')
    .append('<span>This cell is now red</span>');

ایجاد عادت استفاده از زنجیره به خودی خود به شما کمک می‌کند از استفاده بیش از حد از انتخابگرها بکاهید. حال فرض کنیم بخواهیم در یک جدول رنگ پس زمینه ستون اول را قرمز کنیم. برای این کار کدی همانند زیر می‌نویسیم.

$('#myTable').find('.firstColumn').css('background','red');

اما اگر بخواهیم بعد از آن رنگ پس زمینه ستون آخر را آبی کنیم چکار باید بکنیم؟ ما الان دیگر نمی‌توانیم زنجیره را برای عنصر جدول ادامه دهیم چون الان دیگر مشغول کار بر روی ستون اول هستیم و اگر بخواهیم رنگ پس زمینه ستون آخر را عوض کنیم باید دست به یک انتخاب دیگر برای به دست آوردن عنصر جدول بزنیم. اما با تابع end() می‌توانیم به انتخاب قبلی در زنجیره برگردیم و زنجیره را ادامه دهیم. این کار ما را از یک عمل انتخاب دیگر بی نیاز می‌کند و در نتیجه در اجرای سریع‌تر کد نیز موثر است.

$('#myTable')
    .find('.firstColumn')
        .css('background','red')
    .end()
    .find('.lastColumn')
        .css('background','blue');

شما حتی می‌توانید به راحتی تابع جی کوئری خود را بنوسید که قابلیت زنجیره شدن داشته باشد. فقط کافی است تابعی بنویسید که یک عنصر را تغییر دهد و آن را بازگرداند.

$.fn.makeRed = function() {
    return $(this).css('background', 'red');
}  

$('#myTable').find('.firstColumn').makeRed().append('hello');

9- انتخابگرهای مختص به خود را بنویسید

همانگونه که می‌دانید جی کوئری انتخابگرهای داخلی برای انتخاب بر اساس id بر اساس class، تگ، صفت و چندین انتخابگر دیگر دارد. اما وقتی ما به انتخاب عناصری بر اساس چیز دیگری احتیاج پیدا بکنیم و جی کوئری آن نوع انتخابگر را نداشته باشد باید چکار کنیم؟

یک راه این است که به عناصری که می‌خواهیم یک class اضافه کنیم و انتخاب را بر اساس class انجام دهیم. اما بسط (extend) جی کوئری برای اضافه کردن انتخابگرهای جدید کار چندان مشکلی نیست. برای نشان دادن این کار مثال زیر را می‌آوریم

$.extend($.expr[':'], {
    over100pixels: function(a) {
        return $(a).height() > 100;
    }
});  

$('.box:over100pixels').click(function() {
    alert('The element you clicked is over 100 pixels high');
});

بلاک اول کد یک انتخابگر سفارشی را ایجاد می‌کند که عناصری را که ارتفاع آنها بیش از ۱۰۰ پیکسل باشد پیدا می‌کند. بلام دوم فقط از انتخابگر اختصاصی ما استفاده می‌کند تا یک اداره کننده رویداد کلیک (click handler) را به همه آن عناصر اضافه نماید.

وارد جزئیات بیشتر در این باره نمی‌شویم اما شما می‌توانید تصور کنید که این قابلیت چقدر قدرتمند است. با جستجوی عبارت “custom jquery selector” در گوگل می‌توانید مثال‌های زیادی را در این رابطه پیدا کنید.

۱۰- چگونه اطلاع دهیم که چه وقت عکس‌ها لود شده‌اند

این یکی از مشکلاتی است که در هنگام ایجاد گالری عکس‌ها با آن مواجه می‌شویم. آنچه که باید انجام دهید این است که از متد load() بر روی یک عنصر IMG استفاده کنید و یک تابع callback را در آن قرار دهید. مثال زیر ویژگی src یک تگ IMG را تغییر می‌دهد تا یک عکس جدید را لود کند.

$('#myImage').attr('src', 'image.jpg').load(function() {
    alert('Image Loaded');
});

همین که عکس لود شد alert‌ فراخوانی می‌شود.

۱۱- ایجاد یک شیِ جی کوئریِ خالی

ایجاد یک شی جی کوئری سربار قابل توجهی به همراه دارد. گاهی شما نیاز به ایجاد یک شی خالی دارید و می‌توانید بعداً آن را با متد add() پر کنید.

var container = $([]);
container.add(another_element);

این هم پایه‌ی متد quickEach() است که شما می‌توانید به عنوان یک جایگزین سریع‌تر نسبت به متد each() استفاده نمایید.

۱۲- استفاده از Hookهای CSS

API قلاب (Hook)های CSS معرفی شد تا به برنامه نویسان توانایی به دست آوردن (get) و تنظیم کردن (set) مقادیر ویژه CSS را بدهد. با استفاده از آن شما می‌توانید پیاده سازی‌های خاص مرورگر را پنهان کنید و یک واسط (interface) واحد و یکپارچه را برای دستیابی به ویژگی‌های خاص به نمایش بگذارید.

$.cssHooks['borderRadius'] = {
        get: function(elem, computed, extra){
            // Depending on the browser, read the value of
            // -moz-border-radius, -webkit-border-radius or border-radius
        },
        set: function(elem, value){
            // Set the appropriate CSS3 property
        }
};
// Use it without worrying which property the browser actually understands:
$('#rect').css('borderRadius',5);

حتی از این هم بهتر این است که قبلاً یک کتابخانه غنی از Hookهای CSS پشتیبانی شده ساخته شده است که شما ‌می‌توانید به صورت رایگان آن را در پروژه‌های خود استفاده کنید.

۱۳- استفاده از توابع سفارشی Easing

احتمالاً نام پلاگین easing را برای جی کوئری شنیده باشید. این پلاگین به شما اجازه افزودن افکت‌ها به انیمیشن‌هایتان را می‌دهد. تنها نقطه ضعفش این است که بازدیدکنندگان شما باید یک فایل جاوا اسکریپت دیگر را نیز لود کنند. خوشبختانه شما به سادگی می‌توانید افکت مورد نیاز خود را از فایل این پلاگین کپی کرده و آن را به شی jQuery.easing اضافه کنید.

$.easing.easeInOutQuad = function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
};
// To use it:
$('#elem').animate({width:200},'slow','easeInOutQuad');

14- $.proxy()

یکی از اشکالات استفاده از تابع‌های callback در جی کوئری همواره این بوده است که زمانی که آنها به وسیله یک متد جی کوئری اجرا می‌شوند زمینه (context) به یک عنصر متفاوت تنظیم (set) شده است. برای مثال کد HTML زیر را در نظر بگیرید:

<div id="panel" style="display:none">
    <button>Close</button>
</div>

و شما سعی می‌کنید کد زیر را اجرا کنید:

$('#panel').fadeIn(function(){
    // this points to #panel
    $('#panel button').click(function(){
        // this points to the button
        $(this).fadeOut();
    });
});

به یک مشکل برمی‌خورید. دکمه ناپدید شده نه پنل. با $.proxy شما می‌توانید کد زیر را بنویسید:

$('#panel').fadeIn(function(){
    // Using $.proxy to bind this:
    $('#panel button').click($.proxy(function(){
        // this points to #panel
        $(this).fadeOut();
    },this));
});

این کد آنچه مورد انتظار شماست انجام می‌دهد. تابع $.proxy دو پارامتر می‌گیرد: تابع اصلی شما و یک زمینه (context) و تابع جدیدی را که همیشه یک زمینه (context) مخصوص دارد برمی‌گرداند. شما می‌توانید بیشتر در مورد $.proxy در مستندات جی کوئری بخوانید.

۱۵- تعیین سنگینی (Weight) صفحه شما

یک حقیقت ساده: محتوای بیشتری که صفحه شما دارد زمان بیشتری طول می‌کشد تا مرورگر شما آن را رندر کند. شما می‌توانید شمارش سریعی از تعداد عناصر DOM صفحه‌تان را با کد زیر انجام دهید:

$('*').length;

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

در انتها چند لینک کاربردی هم ذکر می‌شود که امیدوارم بتوانند مفید واقع شوند.

در این وب سایت می‌توانید انتخابگرهای مشخص شده را امتحان کنید یا خودتان انتخابگر بنویسید و تاثیر آن را بر عناصر صفحه ببینید

codylindley.com

این هم Cheat Sheet مربوط به jQuery 1.7 که می‌تواند هم برای یادگیری و هم برای یادآوری مفید واقع شود.

jQuery-17-Visual-Cheat-Sheet.pdf

در این صفحه هم می‌توانید API جی کوئری را به صورت کامل مشاهده نمایید که به صورت زیبایی دسته بندی شده و هر قسمت با رنگ خاصی از بقیه قسمت‌ها متمایز شده است. با کلیک بر روی هر مورد توضیحات کامل همراه با مثال‌ها نشان داده می‌شوند. در بالای همین صفحه هم می‌توانید نسخه‌ی جی کوئری مورد نظر خود را انتخاب کنید.

oscarotero.com

منتظر نظرات و پیشنهادات و راهنمایی‌های خوب و زیبای شما هستیم.

این مطلب توسط جناب آقای سوران خضری برای وب تارگت آماده شده است

در این نوشته نگاهی به ۱۵ تکنیک جی کوئری که برای استفاده موثر شما از این کتابخانه مفید باشد، خواهیم داشت. با چند نکته در مورد کارایی شروع و با معرفی کوتاه چند ویژگی کمتر شناخته شده کتابخانه جی کوئری ادامه نوشته را پی می‌گیریم. به دلیل طولانی شدن مطلب آن را در دو قسمت آماده کرده‌ام.

۱- از آخرین نسخه جی کوئری استفاده کنید

با همه نوآوری‌های اتفاق افتاده در پروژه جی کوئری یکی از ساده‌ترین راه‌ها برای بهبود عملکرد وب سایت شما این است که از آخرین نسخه جی کوئری استفاده نمایید. هر نسخه جدید از کتابخانه جی کوئری شامل بهینه سازی‌ها و رفع باگ‌هاست و بیشترین زمانی که شما درگیر به روز رسانی می‌شوید تنها شامل تغییر کوچکی در تگ ‎ <script> است.

شما حتی می‌توانید به طور مستقیم از سرورهای گوگل برای شماری از کتابخانه‌های جاوا اسکریپت از جمله جی کوئری استفاده کنید.

<!-- Include a specific version of jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!-- Include the latest version in the 1.7.1 branch -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/latest/jquery.min.js"></script>

تگ اسکریپت اول یک نسخه خاص از جی کوئری را مشخص می‌کند و دومی آخرین نسخه جی کوئری را. در بعضی از مواقع دسترسی به google code یا بعضی از قسمت‌های دیگر گوگل برای ما ایرانی‌ها مقدور نیست. در این صورت برای آخرین نسخه جی کوئری می‌توانید از لینک زیر استفاده نمایید.

http://code.jquery.com/jquery-latest.min.js

2- انتخابگرها را ساده نگه دارید

قبلاً به دست آوردن (retrieve) عناصر DOM ، یک ترکیب ظریف از تجزیه رشته‌های انتخابگر (selector)، حلقه‌های جاوا اسکریپت و API های داخلی مانند ‎ getElementById() , ‎ getElementsByTagName() و ‎ getElementsByClassName() بودند. اما حالا همه مرورگرهای مهم از متد ‎ querySelectorAll() پشتیبانی می‌کنند که انتخابگرهای CSS را می‌فهمد که این نیز افزایش عملکرد قابل توجه را با خود به ارمغان آورده است.

با این حال شما هنوز باید سعی کنید تا طریقه به دست آوردن (retrieve) عناصر را بهینه سازی کنید. لازم به ذکر است که شماری از کاربران هنوز از مرورگرهای قدیمی استفاده می‌کنند که جی کوئری را مجبور به پیمایش (traverse) درخت DOM می‌کند که این کار کند است.

$('li[data-selected="true"] a') // Fancy, but slow
$('li.selected a')  // Better
$('#elem')  // Best

انتخاب کردن با id از همه سریع‌تر است. اگر نیاز دارید تا بوسیله نام class انتخاب خود را انجام دهید، قبل از آن یک تگ قرار دهید ‎ $('li.selected') . این بهینه سازی‌ها عمدتاً مرورگرهای قدیمی‌تر و دستگاه‌های تلفن همراه را تحت تاثیر قرار می دهد.
در اینجا برای نشان دادن اینکه انتخاب با id سریعتر از انتخاب با class است مثالی آورده می‌شود.

// Create our list
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
    myListItems += '<li class="listItem' + i + '">This is a list item</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
var start = new Date().getTime();
// Select each item once
for (i = 0; i < 1000; i++) {
    var selectedItem = $('.listItem' + i);
}
var end = new Date().getTime();
var time = end - start;
alert('Execution time: ' + time);

در کد بالا یک لیست شامل ۱۰۰۰ ‎ <li> که هر کدام دارای خصیصه class می‌باشند با یک حلقه for ایجاد نمودیم. سپس در for بعدی با انتخابگر class آنها را مورد دستیابی قرار دادیم. اجرای این کد در مرورگر فایرفاکس ۷ در سیستم من ۴۶۰ میلی ثانیه و در کروم ۱۶، ۹۰۰ میلی ثانیه طول کشید.

حال کد بالا را تغییر می‌دهیم تا در هنگام ایجاد، شامل خصیصه id باشند سپس آنها را با انتخابگر id‌ مورد دستیابی قرار می‌دهیم.

// Create our list
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
    myListItems += '<li id="listItem' + i + '">This is a list item</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
var start = new Date().getTime();
// Select each item once
for (i = 0; i < 1000; i++) {
    var selectedItem = $('#listItem' + i);
}
var end = new Date().getTime();
var time = end - start;
alert('Execution time: ' + time);

اجرای کد دستکاری شده در مرورگر فایرفاکس ۷ در سیستم من ۳۱ میلی ثانیه طول کشید اما با کروم ۱۶، ۱۹ میلی ثانیه. پس در فایرفاکس نزدیک ۱۵ برابر سریع‌تر از کد قبلی و در کروم چیزی حدود ۴۷ برابر سریع‌تر بوده است. البته در هر بار اجرا و با توجه به نوع مرورگر ممکن اعداد متفاوتی به دست آیند. پس توصیه می‌شود تا جایی که امکان دارد از انتخابگر id استفاده نمایید.

چیز دیگری که لازم به ذکر است این است که جی کوئری شمار زیادی از انتخابگرهای اضافه‌تر را برای راحتی به شما می‌دهد مثل ‎ :visible و ‎ :hidden و ‎ :animated و … که جزو انتخابگرهای معتبر CSS3 نیستند. در نتیجه اگر شما آنها را به کار گیرید کتابخانه جی کوئری نمی‌تواند متد‎ querySelectorAll() را مورد استفاده قرار دهد. برای اصلاح این وضعیت شما می‌توانید ابتدا عناصری که می‌خواهید با آنها کار کنید را انتخاب نمایید سپس آنها را فیلتر کنید مانند مثال زیر:

$('a.button:animated'); // Does not use querySelectorAll()
$('a.button').filter(':animated');  // Uses it

نتیجه هر دو انتخاب بالا یکی است به استثنای این که مثال دوم سریع‌تر است.

۳- کش کردن (cache) نتایج جی کوئری

دسترسی به DOM همیشه کندترین بخش هر برنامه جاوا اسکریپت خواهد بود. بنابراین به حداقل رساندن آن سودمند خواهد بود. یکی از راه‌های انجام این کار، کش کردن (cache) نتایجی است که جی کوئری به شما می‌دهد. متغیری که شما انتخاب می‌کنید یک شی جی کوئری را در خود نگه می‌دارد که بعداً می‌توانید آن را در اسکریپت تان مورد دستیابی قرار دهید.

فرض کنید بخواهیم به یک لیست ۱۰۰۰ عنصر را در یک حلقه اضافه کنیم. این کار را می‌توانیم با تکه کد زیر انجام دهیم.

for (i = 0; i < 1000; i++) {
    $('.myList').append('This is list item ' + i);
}

نتایج اجرای این کد روی سیستم من برای فایرفاکس ۴۵۷ میلی ثانیه، کروم ۴۱۸ و IE7 1532 میلی ثانیه بود. برای بهبود این کد انتخاب .myList را کش می‌کنیم بدین صورت که نتیجه انتخاب ‎ $('.myList') را در یک متغیر ذخیره می‌کنیم تا هر بار لازم نباشد دوباره عمل انتخاب را انجام دهیم.

var myList = $('.myList');
for (i = 0; i < 1000; i++) {
    myList.append('This is list item ' + i);
}

زمان اجرای کد کش شده در فایرفاکس ۱۸۵، در کروم ۱۰۱ و در اینترنت اکسپلورر ۹۸۴ میلی ثانیه بود.

۴- دستکاری کردن (manipulation) با DOM را به حداقل برسانید

ما می‌توانیم کد قبل را با کم کردن زمان‌هایی که از متدهای DOM استفاده می‌کنیم، باز هم سریع‌تر کنیم. عملیات درج به وسیله DOM همانند ‎ append() ، ‎ prepend() ، ‎ after() یا ‎ wrap() نسبتاً زمان‌بر هستند و می‌توانند اجرای کد را کند کنند.

برای کد قبل می‌توانیم ایجاد لیست را با الحاق رشته‌ها به هم انجام دهیم و سپس با استفاده از یک تابع مانند ‎ html() برای اضافه کردن آنها به ‎ <ul> کد را سریع‌تر نماییم.

var myList = $('.myList');
var myListItems = '';
for (i = 0; i < 1000; i++) {
    myListItems += '<li>This is list item ' + i + '</li>';
}
myList.html(myListItems);

زمان اجرای این کد در سیستم من برای فایرفاکس ۸، کروم ۲۸ و اینترنت اکسپلورر ۳۱ میلی ثانیه بود. دقت کنید که این کد نسبت به کد اولیه برای فایرفاکس ۵۷ برابر، برای کروم ۱۵ برابر و برای اینترنت اکسپلورر ۴۹ برابر سریع‌تر شده است.

۵- اشیای جی کوئری به صورت آرایه

نتیجه اجرای یک انتخابگر یک شی جی کوئری است. با این حال جی کوئری آن را طوری نشان می‌دهد که شما در حال کار با آرایه بوسیله تعریف عناصر شاخص (index) و طول (length) هستید.

// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');

// We can loop though the collection:
for(var i=0;i<buttons.length;i++){
	console.log(buttons[i]);	// A DOM element, not a jQuery object
}
// We can even slice it:
var firstFour = buttons.slice(0,4);

اگر به دنبال کارایی هستید استفاده از یک حلقه ‎ for یا ‎ while ساده به جای ‎ $.each() می‌تواند کد شما چندین برار سریع‌تر نماید.چک کردن طول (length) تنها راه برای تعیین این است که آیا مجموعه شما شامل هیچ عنصر دیگری هست یا خیر.

if(buttons){	// This is always true

	// Do something
}

if(buttons.length){ // True only if buttons contains elements
	// Do something
}

6- ویژگیِ selector

جی کوئری یک ویژگی (property) را فراهم کرده به نام selector که شامل انتخابگری است که برای شروع زنجیره مورد استفاده واقع شده است.

$('#container li:first-child').selector    // #container li:first-child
$('#container li').filter(':first-child').selector    // #container li.filter(:first-child)

اگر چه مثال‌های بالا عنصر مشابهی را هدف گرفته‌اند، انتخابگرها کاملاً متفاوت هستند. مثال دوم در واقع نامعتبر است شما نمی‌توانید آن را به عنوان مبنای (basis) یک شی جدید جی کوئری به کار گیرید. این مثال فقط نشان می‌دهد که متد filter برای محدود کردن مجموعه مورد استفاده قرار گرفته است.

۷- به انتخابگرهای خود یک زمینه (context) بدهید

به طور پیش فرض زمانی که شما از انتخابگری مثل ‎ $('.myDiv') استفاده می‌کنید تمام درخت DOM پیمایش (traverse) خواهد شد که بسته به صفحه مورد نظر می‌تواند پر هزینه و زمان‌بر باشد.تابع jQuery در هنگام انجام یک انتخاب می‌تواند یک پارامتر دوم نیز بگیرد

jQuery( expression, context )

با فراهم کردن زمینه (context) برای انتخابگر، شما می‌توانید یک عنصر را برای شروع جستجو در داخل آن به تابع بدهید تا دیگر لازم نباشد تمام DOM را پیمایش کند.

ساختار HTML زیر را در نظر بگیرید

    <ul>
       <li>This is the first list item (&lrm; <code>  &lt;li&gt;</code>) in an unordered list (&lrm; <code>  &lt;ul&gt;</code>). </li>
       <li>This is the second list item. It has a <a rel="self" title="Learning jQuery blog" href="/archives/jquery-links.htm">link</a> in it.</li>
       <li class="myclass otherclass">This is the third list item. It has a &lrm; <code>  class</code> of "myclass otherclass"</li>
       <li>This is the fourth list item. It has <strong>strong</strong> text and <em>em</em>phasized <em>text</em>.
         <ul>
           <li>second-level list item 1</li>
           <li>second-level list item 2</li>
           <li>
               <ul class="myList"></ul>
           </li>
         </ul>
       </li>
</ul>

در کد جاوا اسکریپت ابتدا ۱۰۰۰ عنصر ‎ <li> را ایجاد میکنیم و آنها را درون ‎ <ul class="myList"> </ul> قرار می‌دهیم. سپس از میان آن ۱۰۰۰ تا فردها را انتخاب کرده و رنگ پس زمینه آنها را عوض می‌کنیم.

    var myList = $('.myList');
    var myListItems = '';
    for (i = 0; i < 1000; i++) {
        myListItems += '<li id="listItem' + i + '">This is list item ' + i + '</li>';
    }
    myList.html(myListItems);
    var selectedItem = $('li li li:odd').css("background", "#CCCCFF");

مدت زمان اجرایی که اینجا ذکر می‌شود فقط برای خط آخر کد که انتخاب را انجام می‌دهد، است. اجرای خط آخر در مرورگر فایرفاکس ۲۰۵ میلی ثانیه در کروم ۱۵۳ و در اینترنت اکسپلورر ۶۴۱ میلی ثانیه طول کشید.

حالا خط آخر را به صورت زیر تغییر می‌دهیم

var selectedItem = $('li:odd', $('.myList')).css("background", "#CCCCFF");

اکنون زمان اجرای این خط از کد برای فایرفاکس ۶۱، کروم ۴۳ و اینترنت اکسپلورر ۹۳ میلی ثانیه بود.

این مطلب توسط جناب آقای سوران خضری برای وب تارگت آماده شده است

۱) چرا جی کوئری ؟

جی کوئری ایده‌آل است چون می‌تواند انیمیشن‌ها و تعاملات (interactions) موثری را ایجاد نماید. جی کوئری برای فهمیدن، ساده و برای استفاده کردن، راحت است به این معنی که منحنی یادگیری آن کوچک در حالیکه امکانات آن (تقریباً) بی نهایت است.

جاوا اسکریپت و بهترین شیوه‌ها

جاوا اسکریپت برای مدت طولانی موضوع بحث‌های داغ زیادی است در مورد اینکه آیا امکان استفاده از آن وجود دارد در حالیکه هنوز به بهترین شیوه‌های دستیابی و برآوردن استانداردها وفادار مانده است.

پاسخ به این سوال هنوز داده نشده، با این حال ظهور فریم ورک‌های جاوا اسکریپت مثل جی کوئری ابزارهای لازم برای ایجاد وب سایت‌های زیبا بدون نگرانی در مورد مسائل دسترس‌پذیری را فراهم آورده است.

بدیهی است مسائلی وجود دارد که راه‌حل جاوا اسکریپت بهترین گزینه نیست. قاعده کلی در اینجا این است: از اسکریپت نویسی DOM برای افزایش عملکرد استفاده کنید ، نه برای ایجاد آن.

اسکریپت نویسی DOM نامحسوس

در حالیکه اصطلاح “اسکریپت نویسی DOM” واقعاً فقط به استفاده از اسکریپت‌ها (در این مورد، جاوا اسکریپت‌ها) برای دسترسی به مدل شی سند (Document Object Mode) اشاره دارد، به صورت گسترده‌ای به عنوان راهی برای توصیف آنچه که واقعاً باید ” اسکریپت نویسی DOM نامحسوس” (unobtrusive DOM scripting) نامیده شود، تبدیل شده است. در واقع هنر افزودن جاوا اسکریپت به صفحه، در این روش این است که اگر جاوا اسکریپت هم وجود نداشت صفحه هنوز هم به درستی نمایش داده شود (یا حداقل تنزل کمتری داشته باشد). در دنیای وب ، اسکریپت نویسی DOM با استفاده از جاوا اسکریپت انجام می‌شود.

نتیجه: دسترس پذیری و تجزیه محتوا

هدف هر تولید کننده، طراح یا برنامه نویس وب، ایجاد محتوایی است که توسط طیف وسیعی از مخاطبان قابل دسترس باشد. با این حال این کار باید با دقت در طراحی، قابلیت تعامل و ظاهر سایت به تعادل برسد. با استفاده از نظریه های مطرح شده در این نوشته، طراحان، برنامه نویسان و تولید کنندگان وب، دانش و درک استفاده از جی کوئری برای اسکریپت نویسی DOM برای دسترسی و تجزیه را خواهند داشت.

۲) اسکریپت نویسی DOM نامحسوس؟

در یک دنیای ایده آل، وب سایت‌ها قابلیت‌ها و افکت‌های پویایی دارند که به خوبی تجزیه شده‌اند. این به چه معناست؟ این به معنی پیدا کردن راهی شامل یک ویجت متحرک کشویی (sliding) برای نمایش اخبار در یک صفحه وب است که با جاوا اسکریپت وب۲ به طرز جالبی انیمیت (animate) شده است، در حالیکه هنوز می‌توان مطمئن بود که همان اخبار به درستی نشان داده می‌شوند اگر جاوا اسکریپت در مرورگر کاربر پشتیبانی نشده یا غیر فعال شده باشد.

تئوری پشت این تکنیک بسیار ساده است: هدف نهایی این است که جاوا اسکریپت برای شیوه عمل عناصر یک صفحه به کار گرفته شود. جاوا اسکریپت برای افزودن و بهبود افکت‌ها و تعاملات مورد استفاده قرار می‌گیرد. قواعد اصلی برای اسکریپت نویسی DOM‌ در زیر می‌آیند.

قاعده شماره ۱: کارکرد جداگانه جاوا اسکریپت

قابلیت‌های جاوا اسکریپت را در یک لایه رفتاری، مجزا کنید به طوریکه جدا و مستقل از (X)HTML و CSS‌ باشد. (X)HTML لایه نشانه گذاری، CSS لایه نمایش و جاوا اسکریپت لایه رفتاری است. این به معنای ذخیره کردن تمام کدهای جاوا اسکریپت در یک فایل خارجی و ایجاد صفحاتی است که به قابل استفاده بودن جاوا اسکریپت اعتماد نمی‌کنند.

تکه کد زیر را نگاه کنید:

نشانه گذاری بد:

هرگز event های جاوا اسکریپت را به عنوان ویژگی‌های درون خطی (inline) بکار نگیرید. این عمل را باید به طور کامل از ذهن خود پاک کنید.

<a  href="#"  onclick="doSomething()">Click! </a>

نشانه گذاری خوب:

همه رفتارهای جاوا اسکریپت باید در فایل اسکریپت خارجی گنجانده شده و با تگ <script> در قسمت head‌ صفحه به سند لینک شوند. بنابراین تگ بالا به شکل زیر در می‌آید:

 <a href="backuplink.html" class="doSomething">Click!</a>

و کد جاوا اسکریپت در داخل فایل myscript.js (یک اسم فرضی) می‌تواند چیزی شبیه این باشد:

$('a.doSomething').click(function(){
    // Do something here!
    alert('You did something, woo hoo!');
});

متد click() در جی کوئری به ما اجازه می‌دهد تا براحتی یک event کلیک را به نتیجه(ها) انتخابگرمان نسبت دهیم. بنابراین کد بالا همه تگ‌های <a> از کلاس doSomething را انتخاب می‌کند و یک رویداد کلیک را که یک تابع را فراخوانی می‌کند به آنها نسبت می‌دهد.

قاعده شماره ۲: هرگز به جاوا اسکریپت وابسته نشو

برای اینکه بدرستی جاوا اسکریپت نامحسوس پیاده سازی شود، برنامه نویس هرگز نباید بر پشتیبانی جاوا اسکریپت برای ارائه محتوا یا اطلاعات تکیه کند. استفاده از جاوا اسکریپت برای افزایش اطلاعات، آن را زیباتر و تعاملی‌تر می‌کند اما هرگز فرض را بر این نگذارید که جاوا اسکریپت در مرورگر کاربر فعال است. این قاعده کلی می‌تواند در واقع برای هر تکنولوژی طرف سوم (third-party) به کار برده شود مثل Flash یا Java.

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

نشانه گذاری بد:

تکه کد زیر نشان می‌دهد که جاوا اسکریپت ممکن است برای نمایش پیغام “Good Morning” (یا “Good Afternoon”) در یک بسته به زمان روز، بکار برده شود. (بدیهی است که این یک مثال ابتدایی است).

<script language="javascript">
var now = new Date();
if(now.getHours() < 12)
    document.write('Good Morning!');
else
    document.write('Good Afternoon!');
</script>

این اسکریپت درون خطی نادرست است زیرا در صورتی که جاوا اسکریپت در مرورگر مورد نظر غیر فعال باشد هیچ چیزی نمایش داده نمی‌شود. این خوشایند نیست. کاربری که جاوا اسکریپت ندارد پیغام خوشامدگویی ما را از دست داده است.

نشانه گذاری خوب:

راه حل درست و قابل دسترس برای پیاده سازی این باید بسیار ساده‌تر و خواناتر باشد. مثل:

<p title="Good Day Message">Good Morning!</p>

به وسیله ویژگی “title” این پاراگراف می‌تواند با یک انتخابگر جی کوئری انتخاب شود. همانند تکه کد زیر:

var now = new Date();
if(now.getHours() >= 12)
{
    var goodDay = $('p[title="Good Day Message"]');
    goodDay.text('Good Afternoon!');
}

زیبایی این تکه کد این است که همه جاوا اسکریپت در یک اسکریپت خارجی (external) قرار گرفته و صفحه همانند یک (X)HTML استاندارد رندر می‌شود که بدین معناست که اگر جاوا اسکریپت اجرا نشود، صفحه هنور بطور ۱۰۰%، (X)HTML خالص است. تنها مشکل این است که در بعدازظهر صفحه هنوز پیام صبح بخیر را نشان می‌دهد. به هر حال این می‌تواند به عنوان یک تنزلِ درجه قابل پذیرش دیده شود.

قاعده شماره ۳: نشانه گذاری معنایی و قابل دسترس در ابتدا بیاید

بسیار مهم است که نشانه گذاری (X)HTML ساختاری معنایی داشته باشد. قاعده کلی اینجا این است که اگر نشانه گذاری (markup) صفحه ساختاری معنایی داشته باشد، باید برای طیف وسیعی از دستگاه ها (device) قابل دسترسی باشد.

نشانه گذاری معنایی برای اسکریپت نویسی DOM نامحسوس مهم است زیرا مسیر برنامه نویس را برای ایجاد اثر اسکریپت نویسی DOM شکل خواهد داد. اولین گام برای ایجاد هر صفحه‌ای که با جی کوئری قابلیت‌هایی را به آن اضافه می‌کنید این است که نشانه‌گذاری آن نوشته شود و مطمئن شوید که آن نشانه گذاری ساختاری معنایی دارد. با دستیابی به این امر، برنامه نویس می‌تواند جی کوئری را برای تعامل با نشانه گذاری صحیح معنایی بکار بگیرد (آنچه باقی می‌ماند یک سند (X)HTML تمیز و خوانا و جدا از لایه رفتاری است).

نشانه گذاری خیلی بد:

تکه کد زیر لیستی از آیتم‌ها و توضیحات را با روشی که بطور وحشتناکی غیر معنایی است (unsemantic)، نشان می‌دهد.

<table>
    <tr>
        <td onclick="doSomething();">First Option</td>
        <td>First option description</td>
    </tr>
    <tr>
        <td onclick="doSomething();">Second Option</td>
        <td>Second option description</td>
    </tr>
</table>

نشانه گذاری بد:

تکه کد زیر لیستی از آیتم‌ها و توضیحات را با روشی که بیشتر معنایی است، نشان می‌دهد. با این حال جاوا اسکریپت inline باعث شده این کد نیز کاملاً معنایی نباشد.

<dl>
    <dt onclick="doSomething();">First Option</dt>
    <dd>First option description</dd>
    <dt onclick="doSomething();">Second Option</dt>
    <dd>Second option description</dd>
</dl>

نشانه گذاری خوب:

این تکه کد نشان می‌دهد که چگونه لیست بالا باید نشانه گذاری شود. هر تعاملی با جاوا اسکریپت در متد load‌ جی کوئری قابل دستیابی خواهد بود و بطور موثری همه نشانه گذاری‌های رفتاری را از کدهای (X)HTML حذف می‌کند.

<dl id="OptionList">
    <dt>First Option</dt>
    <dd>First option description</dd>
    <dt>Second Option</dt>
    <dd>Second option description</dd>
</dl>

id=”OptionList” این توانایی را به برنامه نویس خواهد داد تا با استفاده از سلکتورهای جی کوئری به لیست بالا دسترسی داشته باشیم.

۳) درک جی کوئری برای اسکریپت نویسی DOM نامحسوس

این بخش ۳ نکته با ارزش از جی کوئری را برای پیاده سازی بهترین شیوه‌ها و افکت‌های قابل دسترس ارائه می‌کند.

درک انتخابگرها: ستون فقرات jQuery

اولین گام برای اسکریپت نویسی DOM نامحسوس (حداقل در jQuery و Prototype) بکارگیری انتخابگرها (selectors) است. انتخابگرها به طرز شگفت آوری می‌توانند یک عنصر را از درخت DOM انتخاب کنند بطوریکه آن عنصر از چند طریق قابل دستکاری باشد.

اگر شما با CSS آشنا باشد پس می‌توانید انتخابگرهای جی کوئری را درک کنید. آنها تقریباً همان انتخابگرهای CSS هستند و تقریباً به همان نحو مورد استفاده قرار می‌گیرند.

جی کوئری یک تابع کاربردی مخصوص برای انتخاب عناصر تدارک دیده است که $ نام دارد.

مثال‌های خیلی ساده‌ای از انتخابگرهای جی کوئری:

• $(document) // Activate jQuery for object
• $(‘#mydiv’) // Element with ID “mydiv”
• $(‘p.first’) // P tags with class first.
• $(‘p[title="Hello"]‘) // P tags with title “Hello”
• $(‘p[title^="H"]‘) // P tags title starting with H

$(document)

اولین گزینه متدهای کتابخانه جی کوئری را به یک شی DOM (در این مورد، شی document) اعمال خواهد کرد.

$('#mydiv')

گزینه دوم هر تگ که صفت id آن mydiv باشد را انتخاب خواهد کرد.

$('p.first')

گزینه سوم همه تگ‌های <p> را انتخاب خواهد کرد که صفت class آنها برابر first‌ باشد.

$('p[title="Hello"]')

این گزینه همه تگ‌های <p> را انتخاب خواهد کرد که صفت title آنها برابر Hello باشد. تکنیک‌هایی مانند این قادر به استفاده از نشانه گذاری معنایی صحیح (X)HTML می‌باشند در حالیکه هنوز تسهیلات اسکریپت نویسی DOM برای ایجاد فعل و انفعالات پیچیده‌تر مورد نیاز است.

$('p[title^="H"]')

این ما را قادر می‌سازد تا همه تگ‌های <p>‌ را در صفحه که صفت title آنها با حرف H شروع می‌شود، انتخاب کنیم.

تقریباً هر چیزی که شما بتوانید با CSS3 انجام دهید در جی کوئری کار خواهد کرد به علاوه بسیاری انتخابگرهای پیچیده دیگر.

لیست کاملی از انتخابگرهای جی کوئری را می‌توانید در آدرس زیر مشاهده کنید:

http://docs.jquery.com/Selectors

همچنین مشخصات انتخابگرهای CSS3 را می‌توانید از سایت W3C از لینک زیر مشاهده بفرمایید:

http://www.w3.org/TR/css3-selectors/

آماده شدن $(document).ready()

به طور سنتی رویداد (event)های جاوا اسکریپت به یک سند با استفاده از ویژگی onload در تگ body صفحه متصل می‌شدند. آن را از ذهن خود پاک کنید.جی کوئری برای ما یک تابع ویژه بر روی شی سند تدارک دیده که ready خوانده می‌شود و به ما اجازه اجرای کد را تنها بعد از آنکه بارگذاری (loading) DOM به طور کامل به پایان رسیده باشد، می‌دهد. این کلید اسکریپت نویسی DOM نامحسوس است. این به ما اجازه می‌دهد تا به طور کامل کد جاوا اسکریپت را از نشانه گذاری (markup) جدا کنیم. با استفاده از $(document).ready() ما می‌توانیم یک سری از رویدادها را صف بندی (queue) کنیم و آنها پس از آنکه DOM مقداردهی اولیه شد اجرا شوند.

این بدان معنیست که ما می‌توانیم افکت‌های کاملی را برای صفحه‌هایمان ایجاد کنیم بدون تغییر نشانه گذاری برای عناصر مورد بحث.برای نشان دادن زیبایی این قابلیت، اجازه دهید یک کادر هشدار (alert box) که پیغام Hello World!‌ را نمایش می‌دهد با جاوا اسکریپت ایجاد نماییم.نشانه گذاری زیر نشان می‌دهد که بدون جی کوئری ممکن است چگونه ما یک پیغام Hello World! را به نمایش در آوریم.

نشانه گذاری بد:

<script language="javascript">
alert('Hello World');
</script>

نشانه گذاری خوب:

استفاده از این قابلیت در جی کوئری ساده است. تکه کد زیر نشان می‌دهد که ما چگونه ممکن است پس از آن که سند ما بارگذاری شده باشد کادرهای هشدار قدیمی Hello World را فراخوانی کنیم. زیبایی واقعی این نشانه گذاری این است که در یک فایل خارجی جاوا اسکریپت قرار بگیرد. هیچ تاثیری بر روی صفحه (X)HTML وجود ندارد.

$(document).ready(function()
{
    alert('Hello World');
});

تابع $(document).ready() یک تابع را به عنوان آرگومان می‌گیرد. (در این مورد یک تابع بی نام (anonymous) ایجاد شده – یک تکنیک است که در سراسر مستندات jQuery استفاده می شود.) تابع پاس داده شده به $(document).ready() بعد از آن که بارگذاری DOM به پایان رسید فراخوانی می‌شود و کد داخل آن اجرا می‌گردد. در مورد مثال ما تابع alert فراخوانی می‌شود.

ایجاد قانون CSS پویا

یک مشکل با بسیاری از اثرات اسکریپت نویسی DOM این است که آن ها اغلب برای پنهان کردن عناصر سند از دید، به ما نیاز دارند. این پنهان سازی معمولاً با استفاده از CSS به دست می‌آید. با این حال این کار کمتر مطلوب است. اگر مرورگر کاربر از جاوا اسکریپت پشتیبانی نکند (یا جاوا اسکریپت غیر فعال باشد) هنوز CSS پشتیبانی می‌شود پس عناصری که ما با CSS پنهان کرده‌ایم هرگز دیده نخواهند شد، چون فعل و انفعالات جاوا اسکریپت ما اجرا نمی‌شده است.

راه حل این کار در قالب پلاگینی برای جی کوئری که cssRule نامیده می‌شود، می‌آید که به ما اجازه می‌دهد تا ما با استفاد از جاوا اسکریپت به راحتی قوانین CSS را به شیوه نامه (style sheet) سند اضافه کنیم. این بدان معناست که ما می‌توانیم عناصر صفحه را با استفاده از CSS پنهان کنیم هر چند که CSS تنها در صورتی اجرا می‌شود که جاوا اسکریپت در حال اجرا باشد.

نشانه گذاری بد:

HTML:

<h2>This is a heading</h2>
<p class="hide-me-first">
This is some information about the heading.
</p>

CSS:

p.hide-me-first
{
    display: none;
}

با فرض اینکه یک پاراگراف با صفت class برابر با hide-me-first برای اولین بار توسط CSS پنهان و سپس توسط جاوا اسکریپت بعد از یک سری تعاملات با کاربر در آینده نمایش داده می‌شود، اگر جاوا اسکریپت هیچ وقت اجرا نشود محتوای این پاراگراف هیچ وقت قابل دیدن نخواهد بود.

نشانه گذاری خوب:

HTML:

<h2>This is a heading</h2>
<p class="hide-me-first">
This is some information about the heading.
</p>

jQuery Javascript:
$(document).ready(function{
    jQuery.cssRule("p.hide-me-first", "display", "none");
});

استفاده از $(document).ready() در اینجا برای پنهان کردن پاراگراف بدین معنیست که اگر جاوا اسکریپت غیر فعال باشد پاراگراف هرگز پنهان نمی‌شود بنابراین محتوای پاراگراف هنوز در دسترس است. این دلیل اصلی برای ایجاد قوانین پویای CSS مبتنی بر جاوا اسکریپت است.

۴) نتیجه

جی کوئری یک کتابخانه بسیار قوی است که همه ابزارهای مورد نیاز برای ایجاد تعاملات زیبا و انیمیشن‌ها در صفحات وب را فراهم آورده است که به برنامه نویس قدرت لازم را برای انجام کارهای مورد نیاز خود می‌دهد.

این نوشته مطالب زیر را پوشش داده است:

• ۱-چرا اسکریپت نویسی DOM نامحسوس برای دسترس پذیری اینقدر مهم است
• ۲-چرا جی کوئری یک انتخاب طبیعی برای پیاده سازی اثرات اسکریپت نویسی DOM نامحسوس است
• ۳-انتخابگرهای جی کوئری چگونه کار می‌کنند
• ۴-چگونه قوانین CSS نامحسوس را در جی کوئری پیاده سازی کنیم

نوشته‌ای که پیش رو داشتید ترجمه‌ای از یکی از مقالات سایت بسیار خوب sMashingMagazine بود که در ترجمه آن سعی بر آن بود که به اصل مقاله و لغات به کار رفته در آن وفادار مانده در عین حال مطلب ترجمه شده تا حد زیادی قابل فهم و روان باشد. ترجمه بعضی از مفاهیم همچون “اسکریپت نویسی DOM نامحسوس” رسا نیست و نمی‌تواند منظور نویسنده مطلب را به درستی نشان دهد که برای این کار ناچاراً باید منظور نویسنده را در توضیحاتی که می‌دهد درک کنیم و این سه کلمه نمی‌تواند آن مفهوم را برساند. برای اکثر لغات ترجمه شده اصل کلمه انگلیسی آن در داخل پرانتز آمده است.

امیدوارم ترجمه این مطلب مورد توجه عزیزان قرار بگیرد و با نظرات خوب و سازنده و همچنین بحث‌هایی که در مورد این نوشته مطرح می‌فرمایید به رفع ابهام و پاسخ به سوالات عزیزانی که در مورد این مطلب نظرات خود را اینجا مطرح می‌کنند کمک نمایید.

این مطلب توسط جناب آقای سوران خضری برای وب تارگت آماده شده است

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

در این مقاله با ده مورد از موضوعاتی که پیش از ایجاد وب سایت باید به آنها توجه نمائید آشنا خواهید شد

• ۱-هدف از طراحی وب سایت
• ۲-مشخصات مشتریان وب سایت
• ۳-فرآیندهایی که وب سایت می بایست از آنها حمایت کند
• ۴-بودجه شما
• ۵-آرم و نام تجاری مورد نیاز
• ۶-مطلب، متن ها و تصاویر
• ۷-آیا قادرید زمانتان را به وب سایتتان اختصاص دهید؟
• ۸-آیا یک نام دامین دارید؟
• ۹-چقدر برای شما مهم است که نام سایتتان در بالای نتایج صفحه جستجو باشد؟
• ۱۰-احتیاجات وب سایت شما در آینده چیست؟

۱- هدف از طراحی وب سایت

در هنگام راه اندازی یک وب سایت اولین پرسشی که باید از خود بپرسید این است که ” هدف از طراحی وب سایت چیست؟” جواب این سوال کاملا واضح است. اگر شما خرده فروش هستید هدف شما فروش محصولاتتان است. اما اگر تمایل دارید که وب سایتی بروشور مانند داشته باشید، طراحی یک صفحه وب برای شما کافیست. این یک شروع خوب است . اما استفاده از افکار خاص تر و ویژه تر، در طراحی یک وب سایت مناسبتر به شما کمک خواهد کرد.

چگونه باید محصولات خود را به فروش برسانید؟ چرا مردم باید از شما بیشتر از رقبایتان خرید کنند؟ برای اطمینان از فروش محصولات و رقابت با سایر فروشنده ها ، وب سایت چه کاری باید انجام دهد؟

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

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

اگر در اواسط راه متوجه شدید که مسیر خود را اشتباه رفته اید چه خواهید کرد؟ اما اگر قبل از شروع هر کاری اهداف خود را ارزیابی کنید قطعا اشتباهات پر هزینه ای نخواهید داشت.

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

۲- مشخصات مشتریان وب سایت

به نظرتان چه کسانی از وب سایت شما استفاده می کنند؟

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

۳- فرآیند هایی که وب سایت می بایست از آنها حمایت کند

ترجیح می دهید مردم با شما چگونه تماس برقرار کنند؟ از طریق تلفن یا ایمیل ویا اصلا هیچ تماسی نداشته باشند. آیا مایلید که محصولات خود را به صورت آن لاین به فروش برسانید؟ آیا خودتان وب سایتتان را به روز رسانی می کنید یا ترجیح می دهید یک شرکت طراح وب سایت این کار را برای شما انجام دهد؟ آیا نیاز به یک موتور جستجوگر دارید؟ آیا خدمات آن لاین به مشتریان خود می دهید؟

نیازهای تجاریتان را تجزیه و تحلیل کنید (اهدافی که در بالا یاد آوری شد). به این نکته فکر کنید که وب سایت شما چگونه می تواند از این نیازها پشتیبانی کند؟
به عنوان یک قاعده این مطلب را به یاد داشته باشید که هرچه نیازهای شما بیشتر باشد هزینه شما نیز برای طراحی یک وب سایت بیشتر خواهد شد. البته این بدان معنی نیست که شما از نیازها و خواسته هایتان گذشته و یا آنها را تقلیل دهید. اگر این خواسته ها همان چیزی باشد که وب سایت به آن نیاز دارد در این صورت باعث پیشرفت و کارایی بهتر سایت شما خواهد شد. این بدان معنی است که در مورد نیازهایتان به خوبی فکر کنید.

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

۴- بودجه شما

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

قبل از انجام هر کاری باید در مورد بودجه خود فکر کنید.همیشه توابعی وجود دارند که شما بدون آنها قادر به انجام کاری نیستید. برای مثال اگر تمایل دارید که محصولات خود را به صورت آن لاین به فروش برسانید، نباید در سایت خود صحبتی از این مطلب به میان آورید. اما گاهی اوقات انتخاب های بیشتری در پیش روی شماست. اگر قصد شما از طراحی یک سایت ترویج و تبلیغ هتلتان است باید امکاناتی را برای مشتریان در وب سایت خود در نظر بگیرید. به طور مثال آنها باید بتوانند هتل شما را به صورت آن لاین رزرو کنند و یا اینکه با شماره ای که بر روی سایت قرار می دهید تماس بگیرند.

بودجه شما نباید بر اساس هزینه ها باشد. به هر حال این مطلب را هم مد نظر قرار دهید که اگر برای وب سایت خود سرمایه گذاری بیشتری کنید، درآمد بیشتری نیز نصیبتان خواهد شد. برای مثال امکانات رزرو آنلاین هزینه بیشتری برای شما در بر خواهد داشت ، اما با این کار می توانید مشتریان بیشتری برای خود داشته باشید.

در مورد هزینه های جانبی هم فکر کنید. آیا شما به یک لوگو تبلیغاتی احتیاج دارید؟ آیا به رونوشتی از فعالیتهایتان احتیاج دارید؟ آیا می خواهید بیشتر از یک اسم دامین(Domain name) داشته باشید؟ تمامی این کارها هزینه بیشتری برای شما در بر خواهد داشت. اما با یک سرمایه گذاری خوب می توانید یک نام تجاری خوب برای خود داشته باشید. برای مثال اگر وب سایت شما مطالب و رونوشت مناسب و خوبی داشته باشد علاوه بر کسب در آمد بیشتر، هزینه اولیه نیز به شما باز خواهد گشت.

در هنگام راه اندازی یک وب سایت یکی از مهمترین مسائل، تشخیص این نکته است که از وب سایت خود چه می خواهید و بهترین کاری که می توانید انجام دهید چیست؟ اگر می خواهید در وب سایتتان یک نقشه تعاملی داشته باشید ابتدا باید با شرکت طراح وب سایت مشورت کنید و ببینید که آیا انجام این کار نیاز است یا خیر، و اگر لازم است هزینه های آن را برآورد کنید.مطمئن باشید که هر عملکردی از جانب شما، جایگاه خود را در وب سایت پیدا خواهد کرد.

۵- آرم و نام تجاری مورد نیاز

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

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

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

شما باید از نام تجاری خود در تمامی قسمتها مانند، سربرگ، یونیفورم کارکنان ، آگهی ها و غیره استفاده کنید. اگر مشتریان آرم تجاری شما را قبلا دیده باشند، مطمئنا بیشتر به شما اطمینان خواهند کرد.

۶- محتوا: متن وتصاویر

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

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

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

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

۷- آیا قادرید که زمانتان را به وب سایتتان اختصاص دهید؟

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

شما باید مطالب را به روز رسانی کنید، سریعا به ایمیلها و سوالات پاسخ دهید و به فکر پیشرفت سایت خود به صورت آن لاین و آف لاین باشید. رعایت تمامی این نکات باعث موفقیت وب سایت شما خواهد شد.اطمینان حاصل کنید که یکی از کارمندانتان و یا خودتان مسئولیت انجام این کارها را به عهده می گیرید. برای مثال اگر شما یک فروشنده هستید، چه کسی مسئول پاسخ به ایمیلها و فروش محصولات شما در ایام تعطیل است؟ آیا تمامی ایمیلها دقیقا در همان روز پاسخ داده می شوند؟ هنگامیکه یک محصول جدید را به وب سایت اضافه می کنید، چه کسی صفحات وب سایتتان را به روز رسانی می کند؟

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

۸- آیا یکDomain name ( اسم دامین ) دارید؟

داشتن یک اسم دامین برای راه اندازی یک وب سایت کاملا ضروری است. گاهی اوقات انتخاب یک اسم کاملا واضح است. مثلا اگر در B.B.C کار می کنید نام انتخابی شما می بایست bbc.co.uk باشد. به هر حال انتخاب یک اسم بسیار ساده هم نیست. برای مثال چرا شما BBC.com را انتخاب نمی کنید؟ ممکن است شخصی به شما پیشنهاد دهد که .com بسیار معتبرتر از .co.uk است. اما انتخاب .co.uk برای شما و BBC بهترین گزینه است. چرا؟ برای اینکه اگر شما در بریتانیا کار می کنید، دانستن این مطلب که BBC توسط مالیات دهندگان انگلیسی سرمایه گذاری می شود و نماینده انگلیس در خارج از کشور است، بسیار ضروری است. بنابراین این کشور تمایل دارد که اصالت و ریشه خود را به دیگران نشان دهد.

اما گاهی اوقات تنها یک انتخاب دارید. برای مثال اگر در آمازون زندگی می کنید و دارای فروشگاه های زنجیره ای چای هستید، برای فروش محصولاتتان باید به جای .co.uk از Amazon.com استفاده کنید.

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

البته این نام می بایست با حوزه کاری شما مرتبط باشد و به راحتی به خاطر آورده شود. برای مثال هنگامیکه مردم درباره فروشگاه های زنجیره ای چای آمازون صحبت می کنند، نام somersetteashop.comبه طور ناخود آگاه در ذهن آنها تداعی می شود. البته به جز .com و .co.uk اسامی دیگری نیز مانند، .net و .TV هم وجود دارند. اگر شما یک سازمان و یا یک شرکت غیر انتقایی هستید بهتر است که از .org استفاده کنید. اما .com و .co.uk بیشترین اسامی هستند که مردم به خاطر دارند.

هرگز یک نام شناخته شده را بایک domain متفاوت ترکیب نکنید( مانند Amazon. TV). قطعا مشتریان شرکت آمازون متوجه نخواهند شد که این نام و این محصولات متعلق به شرکت آمازون نیست.

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

۹- آیا برای شما اهمیت دارد که Domain name شما در بالای نتایج صفحات جست و جو باشد؟

چقدر برای شما اهمیت دارد که در هنگام جست و جوی یک نام به خصوص اسم سایت شما در بالای صفحه گوگل پدیدار شود؟آیا این کار ضروری است؟

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

اگر سایت شما جزو ۱۰ صفحه اول رتبه بندی شده در گوگل باشد در آمد سالیانه شما ۱۰۰۰۰۰ دلار در سال افزایش پیدا خواهد کرد . بنا براین برای کسب این در آمد نیازمند ۳۰۰۰ دلار سرمایه گذاری در سال هستید. حتی اگر قصد دارید که ۲۹۰۰ دلار در سال سرمایه گذاری کنید، بهتر است که به راه دیگری فکر کنید .

مراقب شرکتهای کلاه برداری باشید که به شما وعده می دهند تا نام سایت شما در ۱۰ صفحه اول گوگل قرار دهند . شاید گوگل را بتوان فریب داد تا نام سایت شما جزو ۱۰ صفحه اول باشد اما با این کار قابلیتهای بسیار زیادی از سایت شما از بین خواهد رفت . حتی پس از مدتی ممکن است گوگل نام سایت شما را در ۱۰ صفحه آخر خود نیز نیاورد.

وجود بسیاری از شرکتهای کوچکتر، به ویژه در زمینه های رقابتی مانند گردشگری، باعث ایجاد ترافیک در صفحات گوگل می شود. لینکهای حمایت کننده که قیمت مناسبی هم دارند( این لینکها که در گوگل ،یاهو و غیره وجود دارند به عنوان صفحات Pay-Per-Click شناخته می شوند) ، ابزار مناسبی برای تبلیغ این سایتها هستند.?

بازاریابی آف لاین که افراد بیشتری را به سمت وب سایت شما می کشاند، به سادگی نوشتن آدرس یک وب سایت در پشت ماشین است. بهتر است که قبل از اقدام به هر کاری واقع بین باشید و راجع به هزینه جست و جو گرهاو استراتژیهای تبلیغاتی خوب فکر کنید و سپس تصمیم بگیرید. حتی اگر با استفاده از صفحات pay-per-click افراد بسیاری از سایت شما بازدید کردند، باز هم این مطلب را بررسی کنید که آیا سرمایه اولیه به شما باز گشته است؟ این امر نشان دهنده موفقیت شما در استفاده از جست و جو گر هاست.

۱۰- احتیاجات وب سایت شما در آینده چیست؟

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

شما شاید در ابتدا یک یا دو سفارش در هفته داشته باشید که با استفاده از یک سیستم رزرو ساده خودتان از عهده انجام آن بر آیید. اما اگر تعداد آنها به ۱۰۰ یا ۱۰۰۰ عدد در هفته برسد، چه خواهید کرد؟پس برای اینکه مشتریهای خود را از دست ندهیداز ابتدای راه اندازی وب سایت نیازهای آینده آن را ارزیابی ، تجزیه و تحلیل و بررسی کنید و سایت خود را به روز نگه دارید.

مترجم: خانم نیوشا خلیلی

وبلاگ نویسی رو از این وبلاگ شروع نکردم – ittutorial.ir – اما باید بگم این وبلاگ رو خودم به دنیا آوردم ( کار سختی بود ) . تمامی تلاش من و بقیه همکارانم در این وبلاگ این بود که مطالب مفیدی رو برای انتقال تجربیات و افزایش دانش فنی در زمینه طراحی وب سایت و مهمتر از اون درک مفهوم وب سایت و استانداردهای طراحی وب سایت بنویسیم و یا ترجمه کنیم که امیدوارم موفق بوده باشیم .

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

حدود ۵۰ یا ۶۰ درصد از مطالب این وبلاگ رو ترجمه های آزاد از نوشته های وبلاگهای معتبر انگلیسی زبان تشکیل میدهند که البته تغییرات بسیار زیادی در اونها با توجه به تجربیات نویسنده ایجاد شده تا برای کاربران فارسی زبان مورد استفاده قرار بگیره و قابل درک باشه . حدود ۴۰ درصد بقیه مطالب هم تجربیات شخصی بنده و همکارانم بوده که در مطالب مختلف در اختیار شما دوستان قرار گرفته .

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

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

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

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

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

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

در ادامه هم از کلیه دوستان و خوانندگانی که ما رو در این راه با ارائه پیشنهادات و گاهی انتقادات یاری کردند قدردانی و تشکر میکنم . همینجا اعتراف میکنم که کامنت ها یا نظرات شما در پایان مطالب خیلی میتونه ما رو در ادامه راهمون کمک کنه و به ما دلگرمی و انگیزه بده . این رو بدونید که وقتی اثر شما خوانندگان عزیز در انتهای هر مطلب ( با لایک ، اشتراک گذاری و یا نظر ) دیده میشه حس بسیار خوبی به نویسنده اون مطلب منتقل خواهد شد و این بهترین پاداش برای ما خواهد بود .و به رسم نوشته های تولدی آمار و ارقامی ( البته واقعی ) از یکسال فعالیتمون رو ارائه میدم . امیدوارم شاد ، پیروز و موفق باشید . دهم آذر ماه یک هزار و سیصد و نود – امیر سروری

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

• کتاب آموزش بهینه سازی وب سایت – راهنمای گوگل
• ۱۰ نکته کاربردی در طراحی وب سایت
• فایرباگ – Firebug – چیست و چگونه از فایر باگ استفاده کنیم ؟
• چگونه طراح وب سایت بهتری شوم ؟
• ده اشتباه بزرگ در HTML که نباید مرتکب شوید
• پنج تجربه در طول یک پروژه
• ۱۰ راهنمایی برای یک زندگی ساده ؟
• استفاده مناسب از تگهای Heading
• آشنایی با گزینشگرها – selector – در CSS
• آشنایی با CSS Float آشنایی با CSS Positioning
• نمایش یکسان وب سایت در مرورگرهای متفاوت – CSS Reset
• افزایش سرعت , کاهش مصرف پهنای باند – CSS Sprite
• خلاصه نویسی دستورات CSS
• آشنایی با مفهوم Margin , Padding , Border در CSS
• وبلاگ ها برای افزایش بهره وری وب سایت ها
• راهکارهای حمایت از خودتان به عنوان آزاد کار – Freelancer
• تصاویر مورد استفاده در طراحی وب سایت – GIF , PNG , JPG
• مشکلات یک طراح وب سایت آزاد و راهکارهای حل آن

آمار و ارقام

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

رعایت این اصول شاید در نگاه اول به ظاهر تاثیر گذار به نظر نرسند . اما باید بدانید رعایت این اصول بیشتر از چیزی که شما فکر می کنید موثر خواهد بود . اینها مسائلی هستند که ذهن مخاطب شما را درگیر خواهند کرد . سعی خواهد شد پس از این از رعایت اصول طراحی در طراحی وب سایت بیشتر گفته شود . امیدوارم این روش طراحی جرقه ای را در ذهن شما برای طرح وب سایت بعدی روشن کرده باشد

www.humanwrit.es

www.thedesignkoop.com

www.jaypegams.com/

www.itsfirefly.com

www.codeartmedia.com

www.gonefreelancing.com

www.weareo3.com

www.eightytwodesign.com

www.cabedge.com/

www.mitchellshepherd.com

www.nicediv.net

www.contrastrebellion.com

www.b3studios.co.uk

www.incub.ro

www.rareview.com

www.duet.me

www.benmarkowitz.com

www.brockkenzler.com

www.reverenddanger.com

www.pongathon.com/

فایر باگ – firebug – ، یک برنامه اپن سورس است و به عنوان ابزار اضافی یا کمکی ، برای توسعه وب استفاده می شود که مخصوص مرور گر موزیلا فایر فاکس – firefox – می باشد. این ابزار به طرز باورنکردنی قدرتمند است و با ابعاد وسیعی از امکانات و خصوصیات کاربردی ، برای هر طراح و یا توسعه دهنده وب مفید و مناسب است.
در واقع این امکان اضافی ( در مرور گر های دیگر با قابلیت کمتر نیز وجود دارد) یدک کش اسم مرور گر خود می باشد.فایر باگ دربین ابزار های دیگر( مانند ابزار بررسی و تست قالب و پروفایل اجرایی صفحات وب )، برای سرعت بخشیدن به روند کاری، زمان انجام عملیات آزمون و خطا را هنگام دی باگ کردن یا رفع اشکال صفحات وب کاهش می دهد.

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

فایر باگ – firebug

• در ابتدای کار شما باید مرور گر موزیلا فایر فاکس را اگر نصب ندارید دانلود و نصب کنید
• سپس شما احتیاج دارید که فایر باگ را دانلود و نصب کنید .
• بعد از نصب این ابزار شما می توانید به تشریح هر وب سایتی که دوست دارید بپردازید.
• شما می توانید با بررسی کردن امکانات آن وخواندن ویکی رسمی توضیحات در مورد فایر باگ تا حدودی متوجه شوید که این امکانات چگونه کار می کنند.

پنل فایر باگ را باز کنید

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

باز کردن فایر باگ با استفاده از کلید های میانبر

با فشردن دکمه F12 از صفحه کلید می توانید پنل فایر باگ را خاموش و روشن کنید.بقیه کلید های میانبر برای فایر باگ را از این صفحه ملاحظه کنید.

استفاده از فایر باگ از طریق Context Menu مرور گر

در هر صفحه از وب سایت با کلیک راست کردن روی صفحه، بخشی از html صفحه( هایپرلینک، دکمه ها، تصاویر ) و بعد از انتخاب inspect element از منو، پنل فایر باگ ظاهر می شود.

آیکون فایر باگ

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

استفاده از فایر باگ در یک پنجره جدید روی صفحه

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

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

بررسی قالب و ساختار صفحه وب و نشانه گذاری ها

اولین سوالی که شما از خودتان در مورد صفحه ای که در حال توسعه و یا رفع مشکلات آن هستید ، می پرسید این است که : مشکل وب سایت چیست و از کجا به وجود آمده ؟
کاربرد اولیه و اساسی فایر باگ بررسی است. زمانی که فایر باگ را باز می کنید شما به صورت پیش فرض در پنل HTML هستید. این پنل به شما در بررسی و درک HTML عناصر درون صفحه کمک می کند.

در پنل HTML دو بخش در پنل وجود دارد

قسمت نمایش ند ها

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

نمایش ند ها به شما این اجازه را می دهد که به ویرایش عناصر اچ تی ام ال صفحه بپردازید و نتیجه آن را در صفحه مشاهده کنید وقتی که شما روی عناصر نشانه گذاری شده اچ تی ام ال موس اور می کنید عناصر صفحه وب که شما در حال بررسی آن هستید به صورت های هایلایت نمایش داده می شود. این ابزار به طرز باور نکردنی به شما دقیقا نشان می دهد که مرورو گر به چه صورت به پیاده سازی و اجرا کردن عناصر اچ تی ام ال در صفحه می پردازد و عناصر مشخص در کجای صفحه قرار دارد. با استفاده از این ابزار می توانید مشکلات مربوط به margin و padding و مشکلات از این قبیل را در صفحه بر طرف کنید.

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

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

پنل کناری نمایش کد های اچ تی ام ال

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

در پنل کناری ۴ پنل دیگر موجود است:

• ۱- استایل style
• 2- قالب یا layout
• 3- محاسبه computed
• 4- سند مدل شیء یا DOM (document object model)

پنل استایل style در پنل کناری به شما تاثیر سی اس اس های مهم عناصر صفحات وب را نمایش می دهد این پنل نمایی از استایل شیت ( صفحه نوشتن کد های سی اس اس ) با شماره خط آن سی اس اس را نمایش می دهد. در این حالت شما بیشتر از یک استایل شیت خواهید داشت.

در پنل محاسبات یا computed ، شما خصوصیات سی اس اس را مشاهده خواهید کرد مانند font-size, font –color,text-align و غیره این اطلاعات به شما در درک نحوه ارائه این کد ها توسط مرورگر کمک میکند.

پنل قالب layout در پنل کناری ، تصویری از باکس مدل های یا تقسیم بندی صفحه وب را. نمایش میدهد. اگر شما جزو آن دسته از طراحان وب هستید که با نگاه کردن می آموزید این پنل بهترین امکان را به شما برای یادگیری هر چه بهتر می دهد .برای یادگیری margin و padding صفحه، آشنایی با تقسیم بندی صفحه وب از این ابزار به راحتی می توانید استفاده کنید با دوبار کلیک کردن روی اعداد نمایش داده شده در این پنل شما می توانید آزمایش های خود را به صورت واقعی روی یک صفحه وب انجام دهید.

پنل DOM ، در واقع سند مدل شیء یک عنصر در صفحه وب را نمایش می دهد این بخش بیشتر برای کسانی که با جاوا اسکریپت یا اسکریپت های کلاینت ساید کار می کنند مناسب است.

اصلاح اچ تی ام ال اجرا شده

صد ها راه مدیریت اجرای اچ تی ام ال در جریان کاری، از طریق دسترسی به فایل ها روی سرور یا وقتی که با استفاده از سرور لوکال از وب سرور XAMPP یا wamp server استفاده می کنید، وجود دارد. من فکر می کنم که اکثر طراحان وب ترجیح می دهند که کد ها را از طریق ادیتور خود اجرا و ادیت نمایند زیرادر این حالت هر تغییر و ویرایش روی کد ها در فضای امن تری انجام می شود.

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

در پنل نمایش ند های اچ تی ام ال فایر باگ ، می توانید با کلیک بر روی هر کدام از کد ها به آنها بپردازید و نتیجه نهائی را روی صفحه وب مشاهده کنید.
چند تا نکته دیگر در این رابطه لازم است که اضافه کنم:

افزودن / ویرایش کردن و حذف کردن تمام عناصر اچ تی ام ال

برای مثال در صورت حذف این div چه اتفاقی برای floats صفحه خواهد افتاد؟

افزودن / ویرایش و حذف ID وکلاس

برای مثال در صورت حذف این کلاس آیا خصوصیات ارائه شده با مشکل مواجه می شوند؟

قرار داد تکمیل کننده های بیشتر در عنوان ، متن ها و روی دکمه ها برای تست line brek یا شکست خطوط متنی

افزودن استایل های inline موقتی برای تست سریع با استفاده از خصوصیات html

مثلا آیا این هایپر لینک hyperlink با این استایل بهتر می شود style=”color:#00aeef” or style=”color:# 067fad”

فایر باگ کد هایی ویرایش شده را ذخیره نمی کند. در صورت کلیک یک لینک با رفرش کردن صفحه تغییرات انجام شده ناپدید می شوند. بنابر این بهتر است یک ادیتور متون مثل نت پد در کنار خود داشته باشید که کد های جدید و دستاورد های خود را در آن یادداشت کنید

اصلاح سی اس اس های اجرا شده

اصلاح سی اس اس محل آخرین اقدام برای طراحان وب است جائی که تغییرات اصلی انجام می شود. همانطور که گفته شد بررسی عناصر اچ تی ام ال در صفحه وب و ظاهر سلسله مراتبی آن در پنل نمایش ند ها انجام می شود. این استایل ها بر اساس حروف الفبا مرتب سازی شده است و توسط سلکتورها گروه سازی می شوند .

این سلکتورها در دستور سی اس اس های ارائه شده نمایان می شود سی اس اس های که در صفحه استایل شیت آخر نوشته شده اند بالا تر قرار می گیرند و آنهایی که در استایل شیت در ابتدای صفحه نوشته شد ه اند در پائین صفحه قرار می گیرند . مثال بالا در مورد وب سایت هایی دارای چندین صفحه استایل یا استایل شیت متفاوت است

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

چیز جالب که در پنل کناری بخش سی اس اس وجود دارد این است که این کد ها قابلیت ادیت شدن را دارند مثلا اگر می خواهید ببیند که وب سایت چه تغییری می کند اگر شما padding-top را به ۲۲px تغییر بدید فقط کافی روی عدد کلیک کنید و اون رو تغییر بدید یا حتی می تونید اون خصوصیت را ادیت کنید یا خصوصیت جدیدی به آن اضافه کنید

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

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

اگر شما تمایل دارید سی اس اس ی را به عنصری که مقدار عددی و کلاس ID ندارد( که در اینصورت در پنل سمت راست کناری دیده نخواهد شد) شما میتوانید یک استایل inline در پنل نمایش ند های سمت چپ با در پنل سی اس اس اضافه کنید

پنل سی اس اس یک نمایی را از کد های سی اس اس در استایل شیت های متعدد که شما به سایت اضافه کردید می دهد Source edit mode مد ادیت سورس یا منبع، شما به ویرایش مقادیر یا ارزشها می پردازید ( که شبیه پنل اچ تی ام ال سمت راست است که ما راجع به آن توضیح داده ایم) در این بخش می توانید آزادانه کد های خود را مانند وقتی که در ادیتور خود هستید تایپ کنید.

محدودیت ها و خصلت های فایر باگ

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

بگذارید راجع به محدودیت های فایر باگ هم صحبت کنیم:

عناصری در اچ تی ام ال که دارای خصوصیت هاور hover هستند

این سخت است که عناصری را که دارای سی اس اس هستند اشکال زدایی کرد دارای قوانین هاور و یا دارای هاور جاوا اسکریپتی هستند مانند منوهای دراپ دان چون وقتی موس رو از روی انها بر می داریم خصوصیتشون کاملا عوض می شوند موضوع این است که شما باید چاره ای بیابید که به بررسی عناصر تودر تو (که تا زمانی که روی عناصر اصلی کلیک نکرده اید پنهان هستند) ، از طریق بررسی عناصر اصلی بپردازید .

پیشنهاد این است که از طریق خصوصیات استایل اچ تی ام ال این عنصر را مجبور به باز شدن و دیده شدن آن نمائید البته ایده خوبی برای تست های روی وب سایت های اجرا شده و لایو نیست اما تا حدی موثر است.

در مثال زیر می خواهیم یکی از آیتم های لیست غیر منظم را از منوی flyout-menu بررسی و رفع عیب کنیم و جاوا اسکریپتی وجود دارد که باعث می شود منو زمانی که موس روی ان نیست پنهان شود

<div class="flyout-menu">
  <ul>
    <li>Menu item one</li>
    <li>Menu item two</li>
    <li>Menu item three</li>
  </ul></div>

می توانید استایل inline زیر را به div مورد نظر ( با توجه به طرز پنهان شدن div و نظر به اینکه شما می خواهید از دستکاری DOM جاوا اسکریپت بپرهیزید ) اضافه کنیم.

<div class="flyout-menu" style="display:block;">
  <ul>
    <li>Menu item one</li>
    <li>Menu item two</li>
    <li>Menu item three</li>
  </ul></div>

فایر باگ بعضی اوقات از کار می افتد

بعضی اوقات پنل سی اس اس قابل ارائه برای edit mode یا مد ویرایش نمی باشد و باعث ایجاد ارور می شود علت این موضوع هنوز واقعا مشخص نیست اما با بستن و باز کردن مجدد مرورگر دو باره به حالت عادی بر می گردد.

فایر فاکس با سایر مرور گر های دیگر فرق دارد

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

 <li><a href="home.htm">Home</li>

کسی فراموش کرده است که تگ a را ببندد بعضی از مرورگر ها ممکن است آن را به درستی ارائه نکند و صفحه شما به هم ریخته شود. ولی مرورگر فایر فاکس تگ a را در جای درست به خودش نمایش می دهد این یعنی شما چیز هایی را که در مرور گرهای دیگر مشکل دار می بیند در مرورگر فایر فاکس به درستی می بینید و این به این علت است که نحوه ارائه کردن این کد ها در مرور گر های مختلف متفاوت است.

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

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

در Google Chrome, Safari, IE و Opera ابزار هایی مشابه فایر باگ موجود است که برای کسب اطلاعات بیشتر از این لینک ها استفاده کنید:

• Google Chrome: Chrome Developer ToolsFirebug Lite
• Apple Safari: WebKit Web Inspector
• Internet Explorer: Internet Explorer Developer Tools
• Opera: Opera Developer Tools

نیاز به بهبود را درک کنید

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

کسانی که به دانش خود تکیه می کنند باید بدانند که ممکن است یک روز شغل خود را از دست بدهند چون طبیعت شغل، تکنولوژی و ابزار ها این است که به سرعت در حال تغییر و دگرگونی هستند ( تغییر قوانین، به روز شدن و یا منسوخ شدن یک زبان برنامه نویسی و تغییر شیوه گسترش اطلاعات از یک تکنولورژی به تکنولورژی دیگر ) و این تغییر کل زندگی را نیز در بر می گیرد

بنابر این برای با قیماندن و پیشرفت در بازار کار ، باید با توجه به تقاضاهای جدید رشد و پیشرفت داشت.

صنعت طراحی وب سایت همیشه در حال تغییر است شما زمانی متوجه قدیمی شدن اطلاعات می شوید که دیگر قادر به اجرای آن در کار خود نیستید و در این حالت نیاز متداوم به خودآموزی و ارتقاء اطلاعات خود را دارید .

به طور مثال طراحی وب سایت و پیاده سازی آن با استفاده از ساختار جدول ها ) table ) در همین چند سال دچار تغییرات اساسی شده است و در طراحی های مدرن دیگر از این ساختار استفاده نمی شود و یا به ندرت استفاده میشود .

توجه داشته باشید که کسب مهارت های جدید زیاد سخت و هزینه بر نیست و بیشتر از صرف هزینه برای یادگیری نیاز به پشت کار و جدیت در کار احساس می شود.این یک چالش همیشگی است که اطلاعات شما به سرعت در حال قدیمی شدن هستند . شما شاید قصد داشته باشید که یک مطلب آموزشی را مطالعه کنید و یا در یک کارگاه ویا کلاس آموزشی ثبت نام کنید ولی باوجود کارهای زیادی که دارید بارها و بارها این موضوع به تاخیر افتاده است . در این زمان احتمالا فکر خواهید کرد که یادگیری و آموزش صبر خواهند کرد تا شما کارهایتان را کمتر کنید ولی علم و تکنولوژی منتظر نمی مانند .

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

برای کسب مهارت ها لازم است که از قبل راجع به آنها فکر کنید و تصمیم بگیریدکه چه مطالبی را و چگونه یاد بگیرید. برای دریافت و کسب مهارت نیاز به گذراندن این سه مرحله دارید

هدفتان را مشخص کنید

اولین کاری که باید انجام بدهید این است که از خودتان بپرسید چه چیزی را باید یاد بگیرم؟چه مهارتی را لازم است کسب کنم؟

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

تعیین اهداف کوتاه مدت

با آموزش کوتاه مدت شما دیگر نیاز ندارید که صبر کنید تا میوه هایتان به ثمر برسد و می توانید در لحظه از هر مهارتی که یادگرفته اید استفاده کنید.

تعیین اهداف بلند مدت

باید اضافه کرد که یادگیری در بلند مدت به حفظ جایگاه شما کمک خواهد کرد.

هدف ها و تصمیم ها همگی به خودتان بستگی دارد ، افق دیدتان کجاست ؟ ، چه نوع آموزشی برای ارتقاء وضعیت شغلی خود احتیاج دارید ؟ به چه نوع کاری بیشتر علاقه دارید ؟ و … البته قبل از تعیین اهداف خود بهتر است خوب فکر کنید و برنامه ریزی کنید تا هیچ وقت نگوئید که

” من همیشه می خواستم یادبگیرم ….و اما هرگز نتونستم”.

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

۱- برنامه ریزی به ما کمک می کند تا تمرکز خودمان را بر روی مطلبی که می خواهیم یاد بگیریم حفظ کنیم . همه ما مطالبی را به صورت پراکنده از وبلاگ ها ، سایتهای آموزشی و اشخاص مختلف به صورت پراکنده می خوانیم و یاد میگیریم ، اما همه این مطالب و آموزشها می تواند به پیشرفت ما کمک کند؟ گاهی مطالعه به صورت پراکنده می تواند ما را از هدفهایمان برای کسب آموزش دور کند ، مطالب پراکنده و گوناگون نمی تواند به طور مطلوب به پیشرفت در یک زمینه شغلی کمک کند. برنامه ریزی به ما کمک می کند که همیشه به یاد داشته باشیم که می خواهیم در چه زمینه هایی مطالعه کنیم تا از موضوع اصلی دور نشیم.

۲- با داشتن برنامه ریزی ایده ها و افکار شما نیز با توجه به حجم بالای کار و پراکندگی افکار فراموش نمی شود.

زمان بندی کنید

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

زمانی را برای یادگیری انتخاب کنید که از مشغله کاری آزاد باشید ، سعی کنید خودتان را با برنامه زمانبندی سازگار کنید ، ولی این به این معنا نیست که یک زمان مشخص را فقط به مطاله بپردازید و یا یک قالب دائمی را برای خودتان در نظر بگیرید . این زمان بستگی به خودتان دارد ، زمانی را انتخاب کنید که به نظر خودتان بیشترین بازدهی را برای شما دارد.

منابع را برای یادگیری پیدا کنید

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

اما چه منابعی برای آموزش در دسترس شما قرار دارد ؟

آموزش آکادمیک و دوره های آزاد

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

خوشبختان و یا متاسفانه مدارک آموزشگاهی در حال حاضر در بازار کار ایران کاربرد چندانی ندارند و ملاک برتری تکنیک و تجربه کاری است . بنابراین صرفا جهت گرفتن یک مدرک آموزشگاهی را انتخاب نکنید مگر آنکه به مدرک آن نیاز دیگری داشته بشاید !؟

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

کارآموزی

در صورتی که شما به عنوان کارآموز در شرکت یا موسسه ای مشغول به کار شوید تمام مطالبی که به صورت تئوری آموخته اید در اینجا به صورت عملی یا کاربردی می توانید مورد استفاده قرار دهید . در این دوره شما با نحوه کارکردن با متخصصین و کار آنها آشنا می شوید و تجربه های بسیار با ارزشی را کسب می کنید . شما با کارآموزی ممکن است دارای یک فرصت شغلی در یکی از شرکت های معتبر شوید که این بستگی به نحوه برخورد و ارائه توانائیهایتان در آن مجموعه دارد . کارآموزی در واقع یک کار بالقوه است که شما می توانید با مهارت خود آن را به صورت بالفعل تبدیل نمائید . کارآموزی غیر از جنبه های مثبت جنبه های منفی نیز دارد . یکی از جنبه های منفی آن عدم دریافت کارمزد یا حقوق است . در واقع کارآموزی یک نوع تعهد است ، تعهد به زمان و تلاش خودتان جهت یادگیری یک مهارت و پاداش آن بدست آوردن یک تجربه است بنابراین در دوره کارآموزی زیاد به دنبال دریافت حقوق نباشید.

در دوره کارآموزی ارزش تجربه ای که بدست می آورید به نوع کاری که به شما واگذار می شود بستگی دارد بنابراین سعی کنید خود را درگیر کارهای پیش پا افتاده و بی ثمر نکنید. یادگیری سریع و عمیق در دوره کارآموزی باعث ایجاد تعامل بین شما و افراد حرفه ای می شود . این چیزی است که در تمام دوره باید به خاطر داشته باشید.

کنفرانس ها و کارگاه ها

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

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

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

ایجاد گروه و یا عضو شدن در فروم ها

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

کتاب ها، وبلاگ ها، مقالات، پادکست ها و فیلم ها

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

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

درگیر شدن در پروژه های جانبی

آخرین راه پیشنهادی با ارزش که به یادگیری و کسب تجربه به صورت مستقیم و غیر مستقیم در کار کمک می کند درگیر شدن در یک پروژه واقعی است . این کار باعث می شود که شما اطلاعات و دانشی که در کلاس درس و یا به صورت تئوری یادگرفته اید را به صورت عملی در یک پروژه واقعی پیاده کنید . پروژه های جانبی می توانند که یک کار طراحی حرفه ای باشد که به صورت مشترک در کنار یک تیم حرفه ای انجام میدهید و یا حل کردن یکی از مشکلات یک برنامه وب . همیشه گله از این وجود دارد که پیدا کردن یک پروژه واقعی کار سختی است . این حرف درست است تا زمانی که شما توقع دریافت پول و دستمزد یک فرد حرفه ای را در برابر کارتان داشته باشید . برای درگیر شدن در تجربه های واقعی نیاز به گذشتن از دستمزد و تمرکز برای کسب تجربه وجود دارد . راه دیگر میتواند تعریف یک پروژه با معیارهای استاندارد برای خودتان بشاد . شاید وب سایت شخصی شما بتواند یک نمونه کار خوب برای نشان دادن توانایی های شما باشد .

در ابن مورد میتوانید مطلب پنج تجربه در طول یک پروژه را نیز مطالعه نمائید .

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

www.fork-cms.com

www.vibethemes.com

www.tweekiapp.com

www.mufeed.in

www.gopal-seema.com

www.promevo.com

www.creativespark.co.uk

www.informant.com.br

www.inspiredology.com

www.imaginamos.com

www.ruhotenuf.ca

www.sundaybestdesigns.com

www.shoutdigital.com

www.davidhellmann.com

www.foreverheavy.com

www.thisisyoke.com

www.movmt.com

www.rypearts.com

www.carbonmade.com

www.owltastic.com

www.silverbackapp.com

www.sr28.com

www.fatburgr.com

www.photoshoplady.com

www.thinkorange.pt

veerle.duoh.com

www.mailchimp.com

www.oldloft.com

www.eanka.com

www.veboolabs.com

www.catswhocode.com

www.stoneskipper.com

www.cutelittlefactory.com

www.cheekymonkeymedia.ca

www.formee.org

www.tmdesign.sk

www.matchstic.com

www.swissside.com

www.paragraphs.fr

mstrends.evaske.com

www.7diamonds.com

www.owlconcept.com

www.twofold.com

www.august.com.au

www.revistavlov.com

www.papercutart.no

www.eatinginsydney.com

www.keystone-logistics.com

www.alexarts.ru

www.designlabcph.com

www.jessicahische.is

www.christianwoo.com

www.matthewbyrne.net

www.outsidethewirellc.com

www.milliontrees.ca

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

لیبل فرم هایی که ارتباطی با اطلاعات ورودی آنها ندارند

استفاده از خصوصیت “for” به کاربر اجازه می دهد با کلیک کردن روی لیبل قسمتی از فرم را که میخواهد انتخاب کند.این خصوصیت ، برای check box و یا radio button برای ایجاد منطقه بزرگتری برای کلیک کردن مهم تر است، ولی سعی کنید این خصوصیت را در تمامی قسمتهای فرم رعایت نمائید .

لوگویی که به صفحه اصلی لینک نباشد

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

معلوم نبودن لینکهای دیده شده

لینک دیده شده دقیفاً توضیح میدهد چه بخشهایی دیده شده است. برای این کار احتیاجی به یک انتخاب کننده CSS پیشرفته نیست ولی مسئله ای است که معمولاً نادیده گرفته میشود. این یک راهنمای دیداری است که به کاربران نشان میدهد که روی کدامیک از لینکها کلیک شده است. این مسئله بیشتر در مورد صفحاتی شامل یک لیست از لینک ها به چشم خواهد خورد .

نشان داده نشدن فیلد فعال یک فرم

شما می توانید از انتخابگر “focus” در بسیاری از عناصر استفاده کنید ،اما حتما این گزینشگر را در فرم ها برای نشان دادن فیلد مورد نظر استفاده نمائید . با اضافه کردن استایل CSS برای تغییر حالت ، مثلاً با پر رنگ شدن مرز یا تغییر ظریف در رنگ پس زمینه میتوانید منطقه یا فیلد مورد نظر را مشخص نمائید .

تصویری بدون متن جایگزین

به یاد داشته باشید که همیشه یک متن توصیفی جایگزین برای تصاویر قرار دهید مگر اینکه آنها برای تزئین به کار روند که حتی در این موارد نیز ویژگی “alt” را میتوان تنها خالی گداشت (اما همچنان باید وجود داشته باشد!). زمانیکه یک تصویر را به عنوان لینک استفاده می کنیم، باید توضیح دهیم که لینک به کجا میرود. این توضیح دقیقا متن جایگزین تصویر است که با استفاده از “alt” در تصویر قرار گرفته است .

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

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

استفاده از محتوای متنی طولانی و خسته کننده

هیچ چیزی بیشتر از این عذاب آور نیست که یک صفحه وب از یک متن ممتد طولانی تشکیل شود. سعی نمائید محتویات را با تصاویر، تیترها و قسمتهای خالی از هم جدا نمائید تا برای مرور کردن، خواندن و فهمیدن آسان تر شود.

خط کشیدن زیر متنی که لینک نیست

همه می دانند متنی که زیر آن خط کشیده شده است، یا رنگی متفاوت دارد احتمالاً باید لینک باشد . بنابراین بازدید کننده ها را با خط کشیدن زیر متن هایی که لینک نیستند گیج نکنید! برای جلب توجه به یک کلمه خاص از تگهای em و strong استفاده کنید.

گفتن به مردم که اینجا را کلیک کنید

کلمات “اینجا را کلیک کنید” از زمان بوجود آمدن اینترنت بوده است ، ولی با توجه به وجود گزینه های مفیدتر از آنها اجتناب نمائید . استفاده از کلمات “اینجا را کلیک کنید” نیازمند این است که کاربر کل جملات را بخواند تا متوجه شود چه اتفاقی افتاده است . اما بهتر است متن لینک ، توضیح دهد که چه اتفاقی خواهد افتاد وقتی روی لینک کلیک می شود.

استفاده از متن “justify” شده

این یک راهنمایی دیگر برای داشتن وب سایت مفیدتر است . متن “justify” شده به نظر تمیز و مرتب به چشم می آید، ولی میتواند باعث بوجود آمدن مشکلات خوانایی شود، مخصوصاً برای کسانی که به بیماری “Dyslexic” مبتلا هستند یعنی کسانی که سخت می توانند فواصل نا هماهنگ در متون “justify” شده را تشخیص دهند.

این مطلب توسط آقای آرش آقا مولائی ترجمه و آماده سازی شده است

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

www.ngenworks.com

www.amazeelabs.com

www.thesquad.com.au

www.salfordstories.com

www.cofamedia.com

www.efingo.com

www.nordkapp.fi

www.cascadebreweryco.com.au

قرار دادن تگهای Block در بین تگ های Inline

قبلا در مورد تگهای Inline و block مطلبی در این وبلاگ با عنوان آشنایی با عناصر Inline , Block منتشر شده است . عناصر HTML به دو گروه inline و block تقسیم بندی می شوند . هر تگ به صورت پیش فرض دارای خصوصیت inline و یا block است . عناصر block تگهایی مانند div , p و مواردی دیگر را شامل میشند که بیشتر در ایجاد ساختار صفحات مورد استفاده قرار میگیرند . عناصر Inline با توجه به نوع و خصوصیت شان باید در درون عناصر block قرار بگیرند تا بتوانند با استفاده از این نوع از تگها در جریان صفحه قرار بگیرند .

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

<a href="http://www.webtarget.ir" > <h1>آموزش طراحی وب سایت</h1> </a>
<h1><a href="http://www.webtarget.ir" >آموزش طراحی وب سایت</a></h1>

اضافه نکردن خصوصیت alt به تصاویر

استفاده از خصوصیت alt برای تصاویر یک قانون است . برای استاندارد بودن کدهای HTML خود حتما این نکته را رعایت کنید .استفاده از alt برای تصاویر به بازدیدکنندگان صفحات وب سایت شما و همچنین موتورهای جستجو کمک میکند تا موضوع تصویر منتشر شده در وب سایت شما را تشخیص دهند . این نکته زمانی پر رنگ تر و مهم تر میشود که مخاطبان شما از سرعت اینترنت پایین و یا مرورگرهای متنی ( مانند موتورهای جستجو ) استفاده میکنند و یا به هر دلیلی این تصویر در مرورگر بازدیدکننده وب سایت شما نمایش داده نشده است . از این خصوصیت حتی در هنگامی که توضیحی برای تصویر خود ندارید نیز استفاده نمائید و مقدار آن را خالی بگزارید . میتوانید در مورد اهمیت این خصوصیت برای تصاویر مطلب بهینه سازی تصاویر – آموزش بهینه سازی سایت – #۷ را نیز مطالعه نمائید .

استفاه نکردن از خصوصیت alt برای تصاویر یک اشتباه بزرگ است ..

<img src="logo.png" />
<img src="logo.png" alt="webtarget.ir logo"  />
<img src="logo.png" alt=""/>

استفاده نکردن از لیست ها – ul , ol – در جای لازم

تگهای ul,ol,li برای لیست کردن مطالب ساخته شده اند و کار با آنها بسیار ساده و راحت است و توانایی های بسیاری را برای کنترل لیست به وسیله css ایجاد خواهد نمود . استفاده از تگهای p , br و هر نوع دیگر از کدهای HTML به غیر از تگهای تعریف شده لیست ها ، برای شکل دهی یک لیست کار اشتباهیست که هرگز نباید انجام شود .

<p>
    طراحی وب سایت <br/>
    بهینه سازی وب سایت <br/>
    آموزش طراحی سایت  </br>
</p>

<ul>
  <li>طراحی وب سایت </li>
  <li>بهینه سازی وب سایت </li>
  <li>آموزش طراحی سایت  </li>
</ul>

استفاده از تگهای b,I,strong,em برای bold و italic کردن متن بدون در نظر گرفتن موتورهای جستجو

تگهای b و i میتوانند یک متن و یا کلمه را به حالت bold و Italic تغییر دهند . شاید با وجود CSS و توانائیهای فوق العاده در کنترل متن ها به ذهن شما برسد که از این ابزار برای راحتی کار خود استفاده نمائید . توانائیهای font-weight و font-style میتوانند جایگزین خوبی برای b و i باشند اما مشکلاتی را نیز خواهد داشت . در مواردی مخاطبان شما از مرورگرهای متنی بدون استفاده از style ها استفاده خواهند کرد که در اینصورت تفاوتی مابین کلمات bold و italic شده توسط CSS با سایر کلمات نخواهند دید و این مشکل باعث کاهش خوانایی مطالب شما می شود و کلمات با درجه اهمیت بیشتر مورد توجه مخاطب قرار نخواهد گرفت .

اگر شما به بهینه سازی وب سایت خود برای موتورهای جستجو اهمیت می دهید بهتر است از تگهای strong و em به صورت مستقیم در کد HTML به جای تگهای b و i و همچنین style ها استفاده نمائید . به این نکته بسیار مهم توجه داشته باشید که تگ های b و i تگهای نمایشی هستند و تگهای strong و em تگهای مفهومی و نمایشی هستند .

مفهوم این جمله این خواهد بود که متن ها به وسیله b و i فقط یک تغییر حالت ظاهری پیدا کرده اند و به همین دلیل مورد توجه موتورهای جستجو قرار نخواهند گرفت . اما با استفاده از تگهای strong و em شما به همراه تغییرات ظاهری یک شخصیت نیز به متن خود خواهید بخشید و اعلام خواهید کر که این متن در داخل این نوع از تگها از اهمیت بیشتری برخوردار خواهد بود .

بنابراین سعی کنید از این نوع از تگها در جای مناسب خود استفاده نمائید .از b و i در زمانی که نیازی به پر اهمیت کردن متن داخل این تگها نیست و فقط می خواهید شکل ظاهری را تغییر دهید و از strong و em در مواردی که علاوه بر شکل ظاهری می خواهید درجه اهمیت متن داخل آن را نیز نسبت به سایر کلمات افزایش دهید استفاده نمائید .

<b>webtarget.ir</b>
<i>webtarget.ir</i>
<span style="font-weight:bold"> webtarget.ir </span>
<span style="font-style:italic"> webtarget.ir </span>
<strong> webtarget.ir </strong>
<em> webtarget.ir </em>

استفاده بیش از حد از تگ br

تگ br برای ایجاد فاصله و شکست تنها یک خط در متن مورد استفاده قرار می گیرد . استفاده از تگ br برای ایجاد فاصله هایی بیشتر از یک خط در بین خطوط و یا عناصر دیگر اشتباه است . برای ایجاد فاصله بیشتر از یک خط در بین خطوط می توانید به راحتی از تگهای p و یا خصویت padding و margin و حتی line-height استفاده نمائید .

<p>
Webtarget.ir <br/><br/>
طراحی هدفمند وب سایت
</p>

<p>webtarget.ir</p>
<p>طراحی هدفمند وب سایت  </p>

استفاده از تگهای s , strike برای نمایش متن های حذف شده

در نسخه های قدیمی تری از HTML از این دو نوع تگ برای نشان دادن کلمات حذف شده ( Strikethrough ) – با ایجاد یک خط بر روی آنها – استفاده می شده است . این نوع از تگ ها با ورود نسخه های جدیدی از HTML دگرگون شده اند و تگهای strike و s که قبلا برای این منظور استفاده می شده اند دیگر کاربردی نخواهند داشت و استفاده از آنها غیر استاندارد خواهد بود .

در نسخه های جدید از تگهای del – برای نشان دادن متن حذف شده – و از تگ ins – برای نشان دادن متن وارد شده به جای متن حذف شده – به همراه هم استفاده می شود .

بنابراین دچار اشتباه نشوید و از strike و s استفاده نکنید .

<s>کلمه حذف شده</s>
<stricke> کلمه حذف شده</stricke>

<del>کلمه حذف شده</del><ins>کلمه جایگزین شده</ins>

استفاده از inline style

هر چند که از style ها می توان به سه روش متفاوت استفاده نمود و یکی از این سه روش استفاده از style های inline در داخل هر تگ است . اما توصیه میشود که از inline style استفاده کمتری نمائید . استفاده از style های inline یک کار غیر استاندارد نیست اما دارای مشکلات و معایبی است که میتواند ما را برای استفاده از این نوع از style منصرف کند .

• ویرایش این نوع از style با توجه به خطی بودن آنها بسیار مشکل است و با افزایش تعداد سندهای HTML گاهی به کار غیر ممکنی تبدیل می شود .
• این نوع از style حجم صفحات را به شدت افزایش می دهد و این نکته ای بسیار منفی است .
• کدها را به هم ریخته و ناخوانا خواهند کرد و ویرایش کد ها را – از نظر خوانایی – بسیار سخت خواهد نمود .
• گاهی کدهای CSS خارجی را دچار مشکل می کنند – کدهای inline بر کدهای CSS خارجی تقدم دارند –

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

اما به صورت عمومی استفاده از inline style توصیه نمی شود .

<h2 style="color:red;">webtarget.ir</h2>

اضافه و حذف کردن border در تگ HTML

Border ها یکی دیگر از خصوصیات تعدادی از عناصر HTML هستند که شما می توانید با استفاده از این خصوصیت به صورت مستقیم در تعدادی از تگهای HTML آنها را حذف ، اضافه و ویرایش نمائید .

در استاندارد های امروزی استفاده از این نوع خصوصیت به صورت مستقیم در تگهای HTML توصیه نمی شود و بهتر است به جای استفاده از این خصوصیت در تگهای HTML چشم پوشی نمائید و تغییرات مورد نظر خود را با استفاده از خصوصیت border در CSS انجام دهید . شما با استفاده از CSS توانایی بیشتری در کنترل این خصوصیت خواهید داشت .

<img  src="logo.png"  border="0" alt="" />

<img  src="logo.png" alt="" />
Img { border:none; }

استفاده نکردن از تگهای Heading

حتما از اهمیت تگ های heading – h1,h2,h3,h4,h5,h6 – با خبر هستید . قبلا مطالبی در مورد اهمیت این تگها در چینش صفحات و همچنین اهمیت آنها برای موتورهای جستجو منتشر شده است .

استفاده مناسب از عنوان ها – آموزش بهینه سازی سایت – #۸

اهمیت تگ های h1,h2,h3,h4,h5,h6 در چینش صفحات وب سایت

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

استفاده از انواع تگهای دیگر و استفاده از CSS برای تغییر ظاهری عناصری غیر از تگهای heading ، برای ایجاد سرفصل اشتباه بزرگی خواهد بود . سر فصل هایی که با تگهایی غیر از تگهای Heading ایجاد شده اند در مرورگرهای متنی قابل تشخیص نخواهند بود و همچنین از نظر موتورهای جستجو اهمیتی نخواهند داشت .

<p><strong>یک متن برای سر فصل</strong></p>

<h3>یک متن برای سر فصل</h3>

استفاده از تگهای blink و marquee

جدای از غیر استاندارد اعلام شدن این تگ ها توسط سازمان جهانی استانداردهای وب wc3 ، استفاده از این نوع از تگها در طراحی شما میتواند فاجعه ساز شود !!

برای ایجاد حس توجه و نشان دادن اهمیت یک موضوع و جلب توجه مخاطبان خود بهتر است از روشهای دیگری استفاده نمائید . این گونه از تگها بر خلاف تصور شما ممکن است موجب عدم توجه به وب سایت شما شود . میتوانید مطالب بیشتری را در مورد این دو نوع از تگ در دانشنامه ویکی پدیا مطالعه نمائید

<blink> به من نگاه کنید  </blink>
<marquee  width="100%" behavior="alternate" bgcolor="yellow" >This is an example..</ marquee >

در این مقاله در مورد چگونگی کسب مهارت و تجربه در جهت پیش برد اهداف ، در طول یک پروژه و نحوه برخورد مناسب با مشتری در صورت نداشتن مهارت خاص در مورد یک پروژه مطالبی ارائه خواهد شد .

۱- پروژه را بررسی کنید و با توانایی های خود بسنجید

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

زمانی را صرف خواندن وبلاگ ها، کتاب و خود آموز ها و مطالب مربوط به تکنیک های آن موضوع کنید. در مورد جزئیات نگران نباشید به کلیات بپردازید. این سوالات را از خود بپرسید تا به جواب بهتری برای تصمیم گیری برسید :

• آیا شما اعتماد به نفس انجام این کار را دارید؟
• چه مدت زمان طول می کشد که شما کاملا به مطالب جدید موجود در آن پروژه مسلط شوید؟
• آیا شما به نرم افزار یا سخت افزار جدیدی احتیاج دارید؟
• آیا می توانید به حس دودلی و شک خودتان غلبه کنید؟
• آیا این مطلب چیزی هست که شما دوست دارید امتحانش کنید و آن را یاد بگیرید؟

۲- تصمیم گرفتن در مورد انجام کار

فقط این حس که شما می توانید، دلیل بر انجام آن کار نمی باشد.

تصمصیم گیری در مورد مطالعه و یادگیری مطلب جدید فقط برای پشت سر گذاشتن این پروژه نیست بلکه باید ببینید که دورنمای اهداف شما به کدام سمت هدایت می شود.آموختن معمولا یک سرمایه گذاری قابل توجه وقت و انرژی است چه به صورت آموزش رسمی و یا چه به صورت آزمون و خطا . آموختن دانش جدید مثل یک ماشین است که احتیاج به تعمییر و نگهداری همیشگی و سوختگیری منظم دارد که همه این کارها به صرف زمان و انرژی نیاز دارد . برای انجام یک پروژه جدید ، آموختن مهارت جدید نسبت به مهارت های آزمایش شده و ثابت دارای ریسک است.

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

آیا کسب این مهارت جدید توانایی های شما را تا اندازه ای که معقول باشد ، افزایش می دهد ؟

اگر درخواست برای آن موضوع زیاد باشد و به بدست آوردن کارهای بیشتر در آن زمینه منجر شود و برای شما سودآور باشد در این صورت سرمایه گذاری درستی را انجام داده اید . شما به یادگیری مطلبی پرداخته اید که بازگشت مالی مناسبی را خواهد داشت.

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

بله شما می خواهید که پروژه خود را پشت سر بگذارید ولی در آینده چه؟

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

آیا شما جائی را در برنامه خود برای مطالعه قرار داده اید؟

آموختن احتایج به تمرکز و صرف زمان دارد و وقتی شما مهارتی را آموختید باید مطمئن شوید که برای استفاده از آن دارای درک درستی هستید.مثلا اگر مهارت جدیدی که با آن مواجه هستید کد های html ایمیل تمپلیت باشد ، یاد گیری این قسمت از کد ها شاید کار شما را راه بیاندازد ولی در بخش های دیگر برای شما کاربردی نخواهد داشت.

اگر در حال یادگیری مطلبی هستید ، سعی کنید کامل و اساسی یاد بگیرید . به چون و چرای آن آشنا شوید که بتوانید در پروژه های بعدی از آن استفاده کنید. وقتی شما در انجام کاری عجله دارید تمایل دارید که فقط روی آن بخش تمرکز و مطالعه کنید و زمان زیادی را صرف این کار می کنید اما برای استفاده در آینده از این مطلب نیاز به مطالعه مجدد پیدا خواهید کرد بنابراین باید توجه داشته باشید که همیشه زمان لازم برای مطالعه و کسب تجربه را برای خود در نظر بگیرید . این کار مانند تزریق خون تازه به رگهای شماست .

دوست دارید که به کدام مسیر بروید؟

توجه کنید اگر یادگیری مهارت جدید برای پروژه ، شما را به سمت اهدافتان سوق می دهد نترسید و پروژه را رد نکنید . شاید این پروژه شروع خوبی برای نزدیک شدن به اهدافتان باشد . اما مطمئن شوید که یادگیری شما در طول پروژه و کمبود تجربه شما در مورد انجام یک پروژه به مشتری شما صدمه نخواهد زد . مشتری تیز همانند شما به فکر انجام شدن هر چه بهتر پروژه است .

با توجه به تجربه من کسی که همه فن حریف است و در یک زمینه خاص ، تخصص ندارد نمی تواند نقشه درستی برای کار خود داشته داشته باشد. بنابراین سعی کنید در انتخاب پروژه ها و کارهای خود دقت بیشتری داشته باشید و آنها را با توجه به اهداف خود بسنجید . این کار باعث خواهد شد توانایی ها و تجربیات شما در راستای یک هدف خاص قرار گیرد و از پراکندگی تجربیات بکاهد .

۳- به استفاده از کمک و راهنمایی دیگران بیاندیشید

در زمانی که وظایف شما سنگین است و زمان پایان پروژه محدود و شما مطمئن نیستید که چه باید انجام دهید ایده خوبی است که به دنبال یک کمک بگردید.پیشنهاد من این است که به دنبال یک آزاد کار با تجربه بگردید که دارای مهارتی است که شما ندارید و از او مشاوره بخواهید تا شما را برای برداشتن قدمهای صحیح اولیه راهنمایی کند. در این حالت وقتی شما به موردی برخورد کردید شما را راهنمایی و کمک می کند و نقش یک پشتیبان در اجرای پروژه را برای شما خواهد داشت.شاید این کار برای شما هزینه داشته باشد (مشتری معمولا هزینه آن را پرداخت نمی کند) اما با توجه به تجربه من این کار باعث حذف استرس شما می شود که بسیار با ارزش است.

مهمترین نکته در سپردن قسمتی از کار به شخص دیگر این است که از مهارت و توانایی او مطمئن شوید . نمونه کارهای او را ببینید و در مورد سابقه کاری او مطالعه و تحقیق کنید . شخصی را انتخاب کنید که در آن زمینه خاص از شما حرفه ای تر است و میتواند برای شما مفید باشد . از سپردن کارها به افرادی که از نظر فنی از سطح شما پائین تر هستند خودداری کنید زیرا این کار نتنها باری را از روی دوش شما بر نخواهد داشت بلکه برای شما مشکلات بیشتری را نیز ایجاد خواهد کرد . از تعهد و خوش قولی آن شخص اطمینان حاصل کنید زیرا عدم تعهد و خوش قولی میتواند پروژه شما را به بن بست برساند و تجربه ای تلخ برای شما باشد . همیشه جایی برای فرار برای خود باقی بگذارید .

۴- قبل از وقوع یک موضوع آن را مطرح کنید

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

رو راست بودن باعث می شود که مشتری این حس را بکند که شما به منفعت او نیز فکر می کنید و دارای اعتماد به نفس بالا برای مواجه شدن با کارهای جدید می باشید .در بدترین حالت ممکن است که مشتری شخصی را با معیار های خود پیدا کند و از انجام این پروژه با شما منصرف شود ، ولی شما با این تصور که صادقانه رفتار کردید خواهید ماند . هیچ آزمایشی وجود ندارد که بگوید یک شرکت قادر به انجام کاری هست و شرکت دیگر قادر به انجام آن کار نمی باشد یا شرکتی بدون داشتن تجارب خاصی نمی تواند آن کار را انجام دهد.

از ایجاد این شبهه برای مشتریان خود که ” کاری را می توانید انجام دهید ” اما در واقع تجربه کافی در آن کار را ندارید بپرهیزید . این کار ارائه اطلاعات اشتباه است و مثل دروغ گفتن در مورد رزومه کاری غیر اخلاقی است و در بعضی مواقع جرم قضایی محسوب می گردد . البته مطمئن باشید که بزرگترین بازنده شخص شما خواهید بود .

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

صادق، واضح و مراقب باشید

۵- خودتان را محکم نشان دهید

خودتان را به جای مشتری قرار دهید . اگر قرار باشد پروژه ای را به شخصی دهید که در انجام بخش هایی از آن ناتوان است شما چه می کردید ؟

برای نشان دان استحکام و کارایی رعایت دو مورد زیر ضروری است:

• ۱- درست انجام گیرد
• ۲- به موقع انجام گیرد

این موارد را به عنوان باید ها برای نشان دادن توانایی خودتان در انجام پروژه در نظر بگیرید. وقتی که با مشتری مذاکره می کنید به معرفی نتایج تحقیقات، آزمایش ها و تجارت و دانش قبلی خود و تاثیر آنها در پروژه های قبلی با ارائه مستندات صحبت کنید . مثلا از این جمله استفاده کنید من با JQuery کار نکرده ام اما با جاوا اسکریپت کار کرده ام و بنابراین من نیازی ندارم برای یادگیری این مهارت از ابتدا شروع کنم.

چندین پروژه و نمونه کار قوی برای معرفی فعالیت ها و کارهای خود آماده داشته باشید. یکی از مواردی که همیشه مشکل بسیاری از افراد تازه کار محسوب میشود نداشتن نمونه کار است . سعی کنید برای خود پروژه های مختلفی را تعریف کنید و انجام دهید و به پایان برسانید . خودتان کارفرمای خودتان شوید و برای خودتان پروژه تعریف کنید . این میتواند راه حل مناسبی برای ایجاد چند نمونه کار مناسب و قابل ارائه باشد . نمونه های مناسب و حرفه ای میتواند بهترین معرف سطح و کیفیت کار شما باشد .

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

اگر اعتقاد دارید که بهترین هستید پس خودتان را نشان دهید .

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

www.tdhcreative.com

www.sylvain-ollier.com

www.twofishillustration.com

www.mathieuclauss.com

www.incub.ro

www.clearspanmedia.com

www.nicedevice.com.au

www.master-sante-publique.u-psud.fr

بسیاری از طراحان وب سایت بر این عقیده هستند که کسب کردن استانداردهای طراحی وب سایت در استاندارد بودن کدهای HTML است وValidate بودن کدهای HTML به تنهایی نشان دهنده استاندارد بودن وب سایت طراحی شده توسط آنهاست . اما باید بدانید این تازه اول راه است !?

همه طراحان وب سایت از اهمیت تگهای Heading در بهینه سازی وب سایت برای موتورهای جستجو آشنا هستند اما آیا کاربرد این تگها فقط در بهینه سازی وب سایت خلاصه شده است ؟ آیا از ابتدا این تگها فقط برای بهینه سازی وب سایت طراحی شده اند ؟

مفهوم و اهمیت استفاده از تگهای Heading که شامل تگهای h1,h2,h3,h4,h5,h6 می شود و به ترتیب از درجه اهمیت بیشتر به کمتر می رسند چیزی فراتر از استفاده آنها فقط برای بهینه سازی وب سایت است .

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

نمونه ای بسیار مناسب از چینش صفحات با محتوای متنی را میتوان در روزنامه ها و مجلات مشاهده نمود . استفاده مناسب از سر فصل ها و چینش مناسب ستون ها میتواند بیننده و مخاطب را نسبت به درجه اهمیت مطالب آگاه سازد و مخاطب به صورت ناخودآگاه یک ساختار از درجه اهمیت مطالب را در ذهن خود ایجاد نماید . برای شما پیش آمده است که در برخورد با یک صفحه مبتنی بر متن و یا حتی یک روزنامه فقط سرفصل ها را خوانده باشید و یا قسمتهای را خوانده اید که با فونت متفاوت ( ضخامت و رنگ ) نوشته شده اند .

دسته بندی مطالب بر اسا اهمیت میتواند مخاطب را در بهتر خواندن مطالب و محتوای صفحه شما کمک کند و باز دید کننده وب سایت شما از خواندن این مطالب لذت ببرد . در مورد موقعیت عناصر در سند HTML و نمودار درختی در این نوع از سندها قبلا مطلبی نوشته شده است . اکنون به بررسی نمودار درختی تگهای Heading در یک صفحه از وب سایت می پردازیم .

با توجه به نمودارها درک این قضیه بسیار ساده تر خواهد شد . نمودار درختی نشان دهنده درجه اهمیت هر یک از تگهای h1,h2,h3,h4,h5,h6 را مشخص نموده است و در نمودار و شکل دوم یک تقسیم بندی فرضی از یک صفحه وب سایت بر اساس درجه اهمیت مطالب و استفاده از تگهای Heading مشخص شده است .

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

از انجام اشتباهات زیر در استفاده از تگهای Heading اجتناب کنید

با ورود CSS به دنیای طراحی وب سایت قدرت طراحان وب سایت در تغییر تگها به شکلهای متفاوت بیشتر شده است . این نکته را به خاطر داشته باشد که این تغییرات همیشه هم خوب نیستند . به طور مثال استفاده از یک تگ p به جای یک سرفصل یا تگ Heading اصلا توصیه نمی شود . این مشکل در زمانی نمود پیدا خواهد کرد که کد های CSS در وب سایت شما به هر دلیلی اعمال نشوند . در اینصورت خواننده و مخاطب نمیتواند محتوای وب سایت شما را از نظر درجه اهمیت دسته بندی نماید و سرفصل ها مشخص نخواهند بود . ( به طور مثال در فید و یا مرورگرهای متنی و در مواردی ایمیل )

دلیل دیگر نیز اهمیت تگهای Heading برای موتورهای جستجو است که دیگر همگی با این موضوع آشنا هستیم و از اهمیت این تگها برای موتورهای جستجو با خبریم . یک تگ p تغییر شکل یافته نمیتواند نقش یک تگ Heading را برای موتورهای جستجو داشته باشد .

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

استفاده بیش از حد و غیر استاندارد نیز میتواند باعث گیج کننده شدن محتوا برای مخاطبان گردد و همچنین باعث جریمه شدن وب سایت شما برای موتورهای جستجو .سعی کنید از اندازه های استاندارد تعریف شده برای این تگها به صورت استاندارد استفاده کنید . به این معنا که تگ h1 از نظر اندازه و رنگ باید بزرگ ترین و پررنگ ترین باشد و این درجه به ترتیب تا تگ h6 ادامه یابد . یکسان نمودن تگهای Heading از نظر اندازه و گاهی رنگ و فونت می تواند برای مخاطبان شما گیج کننده باشد . این اندازه و درجه اهمیت باید به صورت یکسان در وب سایت اعمال شود .

توصیه میکنم یک بار دیگر پس از خواندن این مطلب محتوای وب سایت خود را از نظر ساختار و درجه اهمیت بررسی کنید .

www.ciceroinc.com

www.elevate.co

www.kiskolabs.com

www.mikemcquade.com

www.speakcreative.com

این نوع از چینش نمونه ای دیگر از چینش صفحه liquid است که با دو ستون ایجاد شده است . به این نکته توجه داشته باشید که این نوع از چینش همیشه به این سادگی صورت نخواهد گرفت و با اضافه شدن محتویات بیشتر مشکلات پیچیده ای اتفاق خواهد افتاد و رفع این مشکلات نیاز به تسلط و تخصص بسیاری دارد . در نهایت این نوع از چینش می تواند یکی از استاندارد ترین نوع چینش از نوع کاربرد پذیری برای کاربران باشد . تست نهایی این نوع از چینش در مرورگر ها و صفحات نمایش با رزولوشن های متفاوت قبل از بهره برداری نهایی الزامی خواهد بود .

نمایش صفحه

ساختار HTML

<div class="container">
	<div class="header">
		<h1><a href="http://www.webtarget.ir/">webtarget.ir</a></h1>
        <h2>دو ستون – عرض متغیر</h2>
	</div>
	<div class="navigation">
		<ul>
			<li><a href="#">خانه</a></li>
			<li><a href="#">درباره ما</a></li>
			<li><a href="#">خدمات</a></li>
			<li><a href="#">ارتباط با ما</a></li>
		</ul>
	</div>
    <div class="content">
        <div class="contentBody">
            <h2>آموزش چینش صفحات وب سایت با استفاده از CSS</h2>
            <p>کد نویسی بر اساس استاندارد W3C انجام شده است</p>
            <p>چینش بر اساس زبان فارسی و از راست به چپ است - rtl </p>
            <br class="clearfloat" />
        </div>
        <div class="sideBar">
            <h3>سر فصل برای ستون کناری</h3>
            <p>با ساختار و چینش های استاندارد آشنا شوید</p>
        </div>
        <br class="clearfloat" />
    </div>
	<div class="footer">
		Copyright©webtarget.ir|2011
	</div>
</div>

کدهای CSS

نکات مهم در چینش صفحه

• container

  در این طرح به دلیل خاصیت liquid مقداری برای conatiner تعیین نخواهد شد . طرح با افزایش عرض صفحه گسترش خواهد یافت

• sideBar

  اندازه عرض sideBar ثابت خواهند ماند . نوع موقعیت sideBar به موقعیت position:absoloute تغییر داده شده است . غیر قابل پیش بینی بودن اندازه contentBody و تعیین اندازه sideBar بر اساس اندازه contentBody باعث ایجاد این تغییر است . استفاده از موقعیت position:absoloute برای sideBar می تواند این بخش را در موقعیت چپ حفظ کند .

• contentBody

  با توجه به غیر قابل پیش بینی بودن عرض contentBody مقدار sideBar ثابت در نظر گرفته شده است و با استفاده از padding-left به contentBody اجازه داده نخواهد شد تا در صورت کاهش عرض صفحه بر روی sideBar قرار گیرد .

@charset "utf-8";
/* CSS Document */
/*-------------------------*/
/* Design & Style by       */
/* Amir Sorouri            */
/* Sorouri.amir@gmail.com  */
/*-------------------------*/

/*--------- reset ---------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
ol, ul {
	list-style: none;
}
body { font:62.5%/1.7em Tahoma, Arial, sans-serif; direction:rtl;}

/* ---------- Requirment ----------*/
.container{font-size:1.2em;}
.clearfloat {clear:both; height:1%;}
h1 , h2 , h3  { font-family:Arial, Helvetica, sans-serif;}
h1 { font-size:1.8em;}
h2 { font-size:1.6em;}
h3 { font-size:1.4em;}

/* ---------- Main -----------*/
.container
{
	margin: 0 auto;
	background:#fff;
}

.header
{
	background:#ccc;
	padding: 20px;
}
.header h1 { text-align:left;}
.header h1 a{ text-decoration:none; color:#09F;}
.navigation
{
	background:#333;
	height:30px;
	line-height:30px;
}

.navigation ul li
{
	float:right;
}

.navigation li a
{
	display: block;
	height:30px;
	padding:0 15px;
	color:#fff;
	text-decoration: none;
	border-left: 1px solid #fff;
}

.navigation li a:hover { background:#09F; }

.content
{
	background:url(sideBarBg.jpg) repeat-y left top #eee;
}

.contentBody
{
	float:right;
	padding:20px;
	padding-left:280px;
}

.contentBody p { text-align:justify; line-height:17px;}

.contentBody h2
{
	margin: 0 0 .5em;
}

.sideBar
{
	width:250px;
	padding:20px 10px;
	position:absolute;
	left:0;

}
.sideBar h3
{
	margin: 0 0 .5em;
}

.footer
{
	background:#ccc;
	padding: 20px;
	text-align:left;
}

در این رابطه بخوانید

• چینش صفحه – دو ستون – عرض ثابت + لایه های گسترده
• چینش صفحه با ساختار دو ستون با عرض ثابت
• چینش صفحه با ساختار یک ستون با عرض متغیر
• چینش صفحه با ساختار یک ستون با عرض ثابت

با نظرات و پیشنهادات خود در مورد این مطلب و همچنین روند کلی حرکت این وبلاگ ما را در افزایش کیفیت مطالب و همچنین حرکت در مسیر درست یاری نمائید – با تشکر

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

گزینشگر نوع – Type selectors

گزینشگر های نوع یکی از ساده ترین نوع گزینشگر ها هستند که کاربرد زیادی نیز دارند . با استفاده از این گزینشگر ها می توانید کلیه عناصر HTML را بدون در نظر گرفتن موقعیت عنصر در نمودار درختی یک سند گزینش نمائید . به طور مثال

em {color: blue; }

با استفاده از این گزینشگر می توانید کلیه عناصر em را در صفحه گزینش نمائید . با توجه به نمودار درختی سند مشاهده خواهید نمود که گزینش با محل قرارگیری عنصر در سندHTML رابطه ای ندارد .

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

گزینشگر class – Class selectors

معرفی

در حالی که گزینشگر های نوع هر نمونه ای از یک عنصر را مورد هدف قرار می دهند گزینشگرهای class می توانند هر عنصری از یک سند را که دارای خصوصیت class است ، بدون در نظر گرفتن موقعیت عنصر در سند HTML گزینش کنند .

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

<body>
<p class="big">This is some <em>text</em></p>
<p>This is some text</p>
<ul>
<li class="big">List item</li>
<li>List item</li>
<li>List <em>item</em></li>
</ul>
</body>

به طور مثال برای گزینش دو نمونه از عناصر در یک سند HTML که در زیر خواهید دید از class استفاده شده است . ملاحظه خواهید نمود که این نوع از گزینش ارتباطی با موقعیت عناصر گزینش شده در سند نخواهد داشت .

.big { font-size: 110%; font-weight: bold; }

ترکیب گزینش class و نوع

با استفاده از ترکیب گزینش به وسیله نوع و class می توانید به گزینش های دقیق تری رسید. می توانید نمونه های از این نوع از گزینش را در مثال زیر ملاحظه نمائید .

در این مثال یک class برای دو عنصر متفاوت تعیین شده است . با استفاده از این class اندازه سایز فونت برای دو عنصر با class یکسان تعیین شده است . اما با توجه به اینکه می خواهیم فقط ضخامت فونت عنصر p را افزایش دهیم نیاز به گزینشگر دقیق تری احساس خواهد شد . با استفاده از نوع عنصر و class می توانید گزینش دقیقتری را انجام دهید .

.big { font-size: 110%; } /* affects p and li */
p.big { font-weight: bold; }/* affects p only */

ترکیب چندگانه class ها

یکی از مهمترین مزایای استفاده از class برای گزینش عناصر HTML استفاده از چند class برای یک عنصر HTML است . class های چندگانه می تواند کاربردهای بسیار زیادی در گزینش عناصر داشته باشد . به طور مثال شما می خواهید با استفاده از دو class یک عنصر را گزینش نمائید .هر کدام از این گزینش ها یک خصویت style خاص را به عنصر HTML اضافه خواهند کرد .

<p class="big indent">

.big { font-weight: bold; }
.indent { padding-left: 2em; }

کلاسها جایگزین عناصر HTML نیستند

کلاسها ابزارهای بسیار قدرتمندی برای گزینش عناصر هستند . اما استفاده از class ها برای تغییر عناصر به کاربری های متفاوت با تعریف آن عنصر توصیه نمی شود .
در مثال زیر ملاحظه می نمائید که سعی شده است نحوه نمایش محتویات یک عنصر divهمانند یک عنصر heading تغییر داده شود . به طور استاندارد بهتر است از هر عنصر با توجه به تعریف آن عنصر استفاده شود .

استفاده نا مناسب از عناصر HTML در موقعیت غیر استاندارد می تواند نحوه وب سایت شما را در مرورگرهایی که CSS را تشخیص نمی دهند و یا اینکه به دلایلی از CSS استفاده نمی کنند .در این مثال بدون وجود CSS یک عنصر div مشابهتی با یک عنصر heading نخواهد داشت .

<div class="heading">Heading here</div>

.heading
{
font-weight: bold;
font-size: 140%;
color: #600;
}

در مثالهای زیر نحوه استفاده صحیح از عناصر را در این مثال خواهید دید .

<h2>Heading here</h2>

h2
{
font-weight: bold; /* should not really be required */
font-size: 140%;
color: #600;
}

و اگر شما نیاز به یک heading با مشخصات خاص دارید می توانید به وسیله class گزینش دقیقتری بر روی آن انجام دهید .

<h2 class="sidenav">Heading here</h2>

h2.sidenav
{
font-weight: bold;
font-size: 140%;
color: #600;
}

کلاسهای اضافی را حذف کنید

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

<div class="sidenav">
<h2 class="sideheading">Site navigation></h2>
<ul class="sidelist">
<li class="sideitem">List item</li>
<li class="sideitem"><a href="#"><span class="sidelink">List item</span></a></li>
<li class="sideitem">List item</li>
</ul>
</div>

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

<div class="sidenav">
<h2>Site navigation</h2>
<ul>
<li>List item</li>
<li><a href="#">List item</a></li>
<li>List item</li>
</ul>
</div>

دستورات CSS برای این نحوه صحیح کد نویسی به شکل زیر خواهند بود . در این نوع از گزینش از ترکیب class و نوع عنصر استفاده شده است .

div.sidenav { blah } /* styles overall div */
div.sidenav h2 { blah } /* styles h2 within the div */
div.sidenav ul { blah } /* styles ul within the div */
div.sidenav li { blah } /* styles li within the div */
div.sidenav li a { blah } /* styles a within li within the div */

قبل از اینکه از class استفاده نمائید فکر کنید

قبل از اینکه برای گزینش یک عنصر در سند HTML به آن class اضافه نمائید سوالات زیر را از خود بپیرسید :

• آیا می توان از نوع عنصر برای گزینش آن استفاده نمود ؟
• آیا می توان از class و یا ID عناصر والدین و یا جد برای کنترل این عنصر استفاده نمود ؟

در صورتی که جواب ها منفی بودند می تواند با خیال آسوده از class برای کنترل عنصر استفاده نمائید .

گزینشگر ID – ID selectors

گزینشگرهای ID مشابه گزینشگرهای class هستند . گزینش گر ID را میتوان برای هدف قرار دادن کلیه عناصر HTML در یک سند که دارای ID هستند استفاده نمود . همانند گزینشگر class موقعیت عنصر در سند تاثیری در گزینش مستقیم توسط ID نخواهد داشت .

#navigation { width: 12em; color: #333; }
div#navigation { width: 12em; color: #333; }

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

گزینشگر نسل – Descendant selectors

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

<body>
<h1>Heading <em>here</em> </h1>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
</body>

نمودار درختی این این سند HTML به صورت زیر خواهد بود . عنصر -em – گزینش شده نیز در این نمودار مشخص شده است .در این مثال اگر از گزینشگر های نوع استفاده کنید می بایست تمامی عناصر em را گزینش نمائید .

em {color: blue; }

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

p em {color: blue; }

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

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

<body>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li><em>item 3</em></li>
</ul>
</body>

عنصر em در این نمودار درختی دو سطح پائین تر از عنصر ul قرار گرفته است . با توجه به تعریف انجام شده می توان تمامی عناصر em موجود در نسل ul را گزینش نمود .
در این گزینش از عنصر li استفاده نشده است و با استفاده از عنصر ul عناصر زیر مجموعه این عنصر مورد هدف قرار گرفته اند . در این مثال عناصر em زیر مجموعه ul مورد هدف قرار گرفته اند ولی عنصر em زیر مجموعه p به صورت قبل باقی خواهد ماند .

ul em {color: blue; }

گزینشگر فرزند – Child selectors

گزینشگرهای فرزند برای گزینش فرزند های مستقیم یک والدین در یک نمودار درختی از سند HTML مورد استفاده قرار می گیرد .گزینشگرهای فرزند نسل یک عنصر را گزینش نخواهند کرد و تنها فرزند مستقیم یک والدین را گزینش می نمایند . به طور مثال شما می توانید عناصر em را که مستقیما فرزند والدین خود – div – هستند را به وسیله گزینشگرهای فرزند گزینش نمائید . با توجه به مثال متوجه خواهید شد که دیگر عناصر em که در نسل div قرار دارند مورد هدف قرار نخواهند گرفت .

<body>
<h1>Heading <em>text</em></h1>
<div>
This is some <em>text</em>
<p>This is a paragraph of <em>text</em></p>
</div>
</body>

می توانید نمودار درختی این سند را ملاحظه نمائید .

تمامی عناصر em فرزند یک div والدین مورد هدف قرار گرفته اند و دیگر عناصر em که در نسل div قرار دارند اما فرزند مستقیم آن نیستند مورد هدف قرار نگرفته اند و گزینش نشده اند .

div > em { color: blue; }

OR

div>em { color: blue; }

در نوشتن دستور این گزینش فاصله تاثیری نخواهد داشت . گزینشگرهای فرزند در تمامی مرورگرها به غیر از Internet Explorer 5, 5.5 and 6 به درستی پشتیبانی می شوند .

گزینشگر کلی – Universal selectors

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

* {color: blue; }

در بعضی از موارد برای تغییر مقادیر پیش فرض عناصر HTML در یک سند از این نوع از گزینشگر استفاده می شود . به طور مثال با استفاده از دستور زیر میتوانید کلیه مقادیر پیش فرض padding و margin را در یک سند HTML تغییر دهید و مساوی صفر قرار دهید .

* {padding:0;margin:0; }

گزینشگر برادر و خواهر مجاور – Adjacent sibling selectors

با استفاده از این نوع گزینشگر می توانید عناصر خواهر و برادر ، که بلافاصله پس از یکدیگر قرار می گیرند را گزینش نمائید .به طور مثال شما می توانید عنصر h3 را با استفاده از این گزینشگر مورد هدف قرار دهید . توجه نمائید که تنها عنصر h3 که دقیقا بعد از عنصر h2 قرار گرفته است مورد هدف و گزینش قرار خواهد گرفت .

<body>
<h2>Heading 2 <em>text</em></h2>
<h3>Heading 3 text</h3>
<p>This is <em>text</em> and more <strong>text</strong></p>
</body>

با استفاده از دستور زیر می توانید فاصله ای را که در صورت قرار گرفتن بعد از هم عناصر heading به وجود می آید را هدف قرار دهید و این فاصله را تغییر دهید .

h2 + h3 {margin: -1em; }

از این نوع از گزینشگر می توانید در عناصر inline نیز به خوبی استفاده نمائید .با استفاده از دستور زیر و با توجه به نمودار سند HTML می توانید کلیه عناصر strong را که درست بعد از عنصر em قرار میگیرند را مورد هدف قرار دهید .

em + strong {color: blue; }

گزینشگرهای برادر و خواهر مجاور در تمامی مرورگرها به غیر از Internet Explorer 5, 5.5 and 6 به درستی پشتیبانی می شوند .

گزینشگر صفت – Attribute selectors

صفت یا Attributes چیست ؟

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

در مثال زیر می توانید نمونه های متفاوتی از صفت ها را در عناصر مختلف ملاحظه نمائید .

Id , src , title , href , class , style

<h1 id="section1">
<img src="small.gif" width="100" height="100">
<img title="mainimage" alt="main image">
<a href="foo.htm">
<p class="maintext">
<form style="padding: 10px">

گزینشگرهای صفت با استفاده از صفت عناصر و مقدار آنها عناصر موجود در یک سند HTML را مورد هدف قرا می دهند .به طور مثال با استفاده از گزینشگر صفت در مثال زیر کلیه عناصر img را که صفت src در آنها مساوی small.gif است را مورد هدف قرار می دهیم .

img[src="small.gif"] { border: 1px solid #000; }

از گزینشگر های صفت می توان به چهار روش زیر استفاده نمود .

گزینش به وسیله نوع صفت

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

img[title] { border: 1px solid #000; }
img[width] { border: 1px solid #000; }
img[alt] { border: 1px solid #000; }

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

این نوع از گزینش بر پایه نوع و ارزش و مقدار صفت عمل خواهد کرد . در مثال زیر خواهید دید که یک عنصر img توسط گزینشگرهای صفت مورد هدف و گزینش قرار گرفته است . در این گزینش کلیه عناصر Img دارای خصوصیت src با مقدار small.gif مورد هدف قرار گرفته اند .

img[src="small.gif"] { border: 1px solid #000; }

گزینش به وسیله جستجو در ارزش و مقدار صفت – جدا شده با فاصله

در این روش از گزینش به وسیله صفت مقادیر مورد نظر در ارزش یک صفت جستجو می شوند و در صورت وجود این مقادیر عنصر مورد نظر گزینش می شود .در مثال زیر مشاهده خواهید نمود که مقدار small در ارزش خصوصیت alt در یک عنصر img مورد بررسی قرار می گیرد و در صورت وجود این کلمه – small – در ارزش صفت alt عنصرimg گزینش می شود .

img[alt~="small"] { border: 1px solid #000; }

توجه داشته باشید عنصر در صورتی گزینش خواهد شد که کلمه small به صورت مجزا و همراه با فاصله نسبت به دیگر کلمات موجود در alt قرار گرفته باشد – small image

گزینش به وسیله جستجو در ارزش و مقدار صفت – جدا شده با خط تیره

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

img[title|="small"] { border: 1px solid #000; }

در مثال بالا کلمه small در ارزش صفت alt جستجو می شود و این بار با یک خط فاصله از کلمات دیگر جدا شده است – small-image

گزینشگرهای صفت در تمامی مرورگرها به غیر از Internet Explorer 5, 5.5 and 6 و نسخه های ابتدایی opera به درستی پشتیبانی می شوند .

گزینش به وسیله شبه کلاسها -Pseudo-classes

تا کنون تمامی گزینشگر های مورد بحث یک عنصر از نمودار درختی یک سند HTML را مورد هدف قرار داده اند . اما زمانی رسیده است که شما می خواهید عناصری را مورد گزینش قرار دهید که گزینشگری برای آنها تعریف نشده است ! مانند حالت قرار گرفتن نشانه گر موس روی یک لینک . شبه کلاسها به شما این امکان را میدهند که عناصری را که در نمودار درختی یک سند HTML تعریف نشده اند را به راحتی گزینش نمائید و کنترل کنید .

:first-child
:link
:visited
:hover
:active
:focus
:lang(n)

شکل دهی لینک در حالت های مختلف

با استفاده از شبه کلاسهای میتوانید کلیه حالتهای موجود در یک لینک را گزینش نمائید و شکل دهی کنید .

• a:link is the selector for normal links / یک لینک معمولی
• a:visited is the selector for visited links / یک لینک بازدید شده
• a:hover is the selector for hover state / قرار گرفتن نشانه گر موس بر روی لینک
• a:active is the selector for active links / متمرکز شدن بر روی یک لینک

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

a {}
a:link {}
a:visited {}
a:hover {}
a:active {}

برای ایجاد نتیجه استاندارد و بهتر میتوانید دستورات را به صورت زیر تغییر دهید . بهتر است حالت لینک در نمایش a:link, a:visited و a:hover, a:active برای ایجاد نتیجه و حالت یکسان به صورت گروهی تعریف شوند .

a:link, a:visited { color: blue; }
a:hover, a:active { color: red; }

استفاده از شکل دهی غیر استاندارد می تواند باعث سر درگم شدن کاربران وب سایت شما شود . بهتر است با ایجاد تغییر در لینک ها و حتی هنگام حرکت موس بر روی آنها مخاطب را از اینکه این یک پیوند است مطلع نمائید .

از شبه کلاسهای میتوان برای عناصری غیر از لینک نیز استفاده نمود . به طور مثال با حرکت موس بر روی عنصر em رنگ آن تغییر خواهد نمود .

em { color: blue; }
em:hover { color: red; }

البته استفاده از این نوع شکل دهی میتواند مخاطب را در تشخیص پیوندها دچار مشکلاتی نماید .شبه کلاسها به وسیله تمامی مرورگها پشتیبانی میشوند . اما استفاده از این شبه کلاسهای برای عناصری غیر از لینک در مرورگرهای Internet Explorer 5, 5.5 and 6 پشتیبانی نمی شود .

گزینش به وسیله شبه عناصر – Pseudo-elements

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

“:first-line” and “:first-letter”

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

:first-line – به شما کمک خواهد نمود تا اولین خط از یک پاراگراف را گزینش نمائید .

p:first-line {font-weight: bold; }

:first-letter – بهشما کمک خواهد نمود تا اولین حرف از یک پاراگراف را گزینش و کنترل نمائید.

p:first-letter {font-size: 200%; font-weight: bold; }

با توجه به تعریف برای شکل دهی به متن این شبه عنصر- p:first-letter – از مقادیر وخصوصیات زیر پشتیبانی می کند

• • font properties
• • color properties
• • background properties
• • margin properties
• • padding properties
• • border properties
• • text-decoration
• • vertical-align only if => float:none
• • text-transform
• • line-height
• • float
• • clear

“:before” and “:after”

با استفاده از این شبه عناصر میتوانید یک محتوای تعریف شده را قبل و بعد از یک عنصر اضافه نمائید . به طور مثال در نمونه زیر یک تصویر قبل از هر عنصر strong اضافه خواهد شد .

strong:before{content:url(image.gif);}

و یا بعد از هر عنصر strong

strong:after{content:url(image.gif);}

شبه عناصر در تمامی مرورگرها به غیر از Internet Explorer 5, 5.5 and 6 و نسخه های ابتدایی opera به درستی پشتیبانی می شوند .

در این رابطه بخوانید

• بررسی موقعیت عناصر در یک سند HTML
• Outline , list-style – خلاصه نویسی دستورات CSS
• خلاصه نویسی دستورات CSS – Border
• خلاصه نویسی دستورات CSS – Margin – Padding
• خلاصه نویسی دستورات CSS – Background
• خلاصه نویسی دستورات CSS – Font

برای توضیح و درک این روابط در یک سند HTML یک سند ساده را به عنوان مثال در نظر خواهیم گرفت .

<body>
<div class="content">
<h1>Heading here</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
<hr>
</div>
<div class="nav">
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
</div>
</body>

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

جد -Ancestor

جد – Ancestor – اشاره دارد به عنصری که در بالاترین سطح و در نوک درخت قرار می گیرد . مهم نیست که چقدر و چند سطح بالاتر است . در نمودار زیر عنصر body جد تمامی عناصر موجود در این سند HTML است به این معنی که در بالاترین سطح قرار دارد .

به این نکته توجه کنید که هر عنصری که زیر مجموعه دارد می تواند جد زیر مجموعه خودش باشد . به این معنی که در نمودار زیر هر کدام از div ها جد زیر مجموعه خودشان هستند .

نسل – Descendant

نسل – Descendant – اشاره دارد به تمامی عناصری که در درخت یک سند HTML با یکدیگر متصلند و در زیر مجموعه یک عنصر قرار می گیرند . مهم نیست در چند سطح پائینتر قرار گرفته اند .

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

والدین – Parent

والدین – Parent دقیقا اشاره دارد به عنصر بالا دستی و متصل در درخت یک سند HTML . در نمودار زیر div مشخص شده والدین ul است .

فرزند – Child

فرزند – Child دقیقا اشاره دارد به عنصر پائین دستی و متصل در درخت یک سند HTML . در نمودار زیر ul فرزند div مشخص شده است .

خواهر و برادر – Sibling

خواهر و برادر ها – Sibling – عناصری هستند که دارای یک والدین مشترک هستند . توجه داشته باشید که خواهر و برادرها در یک سطح قرار خواهند گرفت .

در نمودار زیر کلیه عناصر li با یکدیگر خواهر و برادر هستند و در یک سطح قرار دارند .

بررسی موقعیت یک عنصر در یک درخت سند HTML

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

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

• فرزند body
• والدین عنصر ul
• جد عناصر ul و li
• برادر و یا خواهر دیگر عنصر div موجود در درخت .

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

در این نوع از چینش یک بخش با نام wrapper اضافه شده است . این نوع از چینش ترکیبی از چینش fix و liquid است . قسمت های header , navigation , footer دارای ترکیبی از ساختار متغیر و ثابت هستند .

نمایش صفحه

ساختار HTML

<div class="container">
	<div class="header">
    	<div class="wrapper">
            <h1><a href="http://www.webtarget.ir/">webtarget.ir</a></h1>
            <h2>دو ستون - عرض ثابت + لایه های گسترده</h2>
        </div>
	</div>
	<div class="navigation">
    	<div class="wrapper">
            <ul>
                <li><a href="#">خانه</a></li>
                <li><a href="#">درباره ما</a></li>
                <li><a href="#">خدمات</a></li>
                <li><a href="#">ارتباط با ما</a></li>
            </ul>
        </div>
	</div>
    <div class="content">
            <div class="contentBody">
                <h2>آموزش چینش صفحات وب سایت با استفاده از CSS</h2>
                <p>کد نویسی بر اساس استاندارد W3C انجام شده است</p>
                <p>چینش بر اساس زبان فارسی و از راست به چپ است - rtl </p>
                <br class="clearfloat" />
            </div>
            <div class="sideBar">
                <h3>سر فصل برای ستون کناری</h3>
                <p>با ساختار و چینش های استاندارد آشنا شوید</p>
            </div>
            <br class="clearfloat" />
    </div>
	<div class="footer">
    	<div class="wrapper">
            Copyright©webtarget.ir|2011
        </div>
	</div>
</div>

کدهای CSS

نکات مهم در چینش صفحه

• wrapper

  از class تعریف شده با نام wrapper برای کنترل محتویات هر یک از این بخش ها استفاده شده است که به صورت مجزا برای هر قسمت تعریف شده است .

• css comment

  در کد نویسی css از تکنیک comment گزاری برای خوانایی بیشتر کدهای استفاده شده است که در افزایش بهره وری یک طراح وب سایت بسیار مهم و تاثیر گزار است . استفاده از این استاندارد زمانی اهمیت پیدا خواهد کرد که تعداد خط کدهای css شما افزایش یابد و در مواقعی به بیش از ۲۰۰۰ خط برسد . در این مواقع نوشتن توضیحات در کدهای css الزامیست .

@charset "utf-8";
/* CSS Document */
/*-------------------------*/
/* Design & Style by       */
/* Amir Sorouri            */
/* Sorouri.amir@gmail.com  */
/*-------------------------*/

/*--------- reset ---------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
ol, ul {
	list-style: none;
}
body { font:62.5%/1.7em Tahoma, Arial, sans-serif;direction:rtl;}

/* ---------- Requirment ----------*/
.container {font-size:1.2em;}
.clearfloat {clear:both; height:1%;}
h1 , h2 , h3  { font-family:Arial, Helvetica, sans-serif;}
h1 { font-size:1.8em;}
h2 { font-size:1.6em;}
h3 { font-size:1.4em;}

/* ---------- Main -----------*/
.wrapper{margin:0 auto;}

/* ---------- Header -----------*/

.header
{
	background:#ccc;
}

.header .wrapper { padding:20px; width:920px;}
.header h1 { text-align:left;}
.header h1 a{ text-decoration:none; color:#09F;} 

/* ---------- Navigation -----------*/

.navigation .wrapper { width:960px;} 

.navigation
{
	background:#333;
	height:30px;
	line-height:30px;
}

.navigation ul li
{
	float:right;
}

.navigation li a
{
	display: block;
	height:30px;
	padding:0 15px;
	color:#fff;
	text-decoration: none;
	border-left: 1px solid #fff;
}

.navigation li a:hover { background:#09F; }

/* ---------- Content -----------*/

.content
{
	margin:0 auto;
	width:960px;
	background:url(sideBarBg.jpg) repeat-y left top #eee;
}

.contentBody
{
	width:650px;
	float:right;
	padding:20px;
}

.contentBody p { text-align:justify; line-height:17px;}

.contentBody h2
{
	margin: 0 0 .5em;
}

/* ---------- Side Bar -----------*/

.sideBar
{
	width:250px;
	float:left ;
	padding:20px 10px;

}
.sideBar h3
{
	margin: 0 0 .5em;
}

/* ---------- Footer -----------*/
.footer .wrapper { width:960px;}
.footer
{
	background:#ccc;
	padding: 20px;
	text-align:left;
}

در این رابطه بخوانید

• چینش صفحه با ساختار دو ستون با عرض ثابت
• چینش صفحه با ساختار یک ستون با عرض متغیر
• چینش صفحه با ساختار یک ستون با عرض ثابت

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

در این نوع از چینش یک بخش هایی با نام sideBar و contentBody اضافه شده است . با توجه به نوع و حتی رنگ پس زمینه این بخش ها , می توان از تکنیک های متفاوتی برای چینش صفحه استفاده نمود که در ادامه توضیحات بیشتری در این زمینه ارائه خواهد شد.

مهمترین نکته در این نوع از طراحی همسان بودن ارتفاع sideBar و contentBody است . این همسانی ارتفاع در زمانی نمایان خواهد بود که تفاوت رنگ و یا طرح در پس زمینه sideBar و contentBody وجود داشته باشد و در غیر اینصورت این تفاوت ارتفاع به دلیل یکسان بودن رنگ و طرح پس زمینه از دید بازدید کنندگان پنهان خواهد بود .

در نمونه و مثال نخست با توجه به نوع طرح و رنگ یکسان پس زمینه sideBar و contentBody همسان نبودن ارتفاع از دید مخاطب پنهان خواهد ماند و نا هماهنگی در طرح ایجاد نخواهد کرد .

نمایش صفحه

ساختار HTML

<div class="container">
	<div class="header">
        <h1><a href="http://www.webtarget.ir/">webtarget.ir</a></h1>
        <h2>دو ستون - عرض ثابت</h2>
	</div>
	<div class="navigation">
		<ul>
			<li><a href="#">خانه</a></li>
			<li><a href="#">درباره ما</a></li>
			<li><a href="#">خدمات</a></li>
			<li><a href="#">ارتباط با ما</a></li>
		</ul>
	</div>
    <div class="content">
        <div class="contentBody">
            <h2>آموزش چینش صفحات وب سایت با استفاده از CSS</h2>
            <p>کد نویسی بر اساس استاندارد W3C انجام شده است</p>
            <p>چینش بر اساس زبان فارسی و از راست به چپ است - rtl </p>
            <br class="clearfloat" />
        </div>
        <div class="sideBar">
            <h3>سر فصل برای ستون کناری</h3>
            <p>با ساختار و چینش های استاندارد آشنا می شوید</p>
        </div>
        <br class="clearfloat" />
    </div>
	<div class="footer">
		Copyright©webtarget.ir|2011
	</div>
</div>

کدهای CSS

@charset "utf-8";
/* CSS Document */
/*-------------------------*/
/* Design & Style by       */
/* Amir Sorouri            */
/* Sorouri.amir@gmail.com  */
/*-------------------------*/

/*--------- reset ---------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
ol, ul {
	list-style: none;
}
body { font:62.5%/1.7em Tahoma, Arial, sans-serif;direction:rtl;}

/* ---------- Requirment ----------*/
.container {font-size:1.2em;}
.clearfloat {clear:both; height:1%;}
h1 , h2 , h3  { font-family:Arial, Helvetica, sans-serif;}
h1 { font-size:1.8em;}
h2 { font-size:1.6em;}
h3 { font-size:1.4em;}

/* ---------- Main -----------*/
.container
{
	width:960px;
	margin: 0 auto;
	background:#fff;
}

.header
{
	background:#ccc;
	padding: 20px;
}
.header h1 { text-align:left;}
.header h1 a{ text-decoration:none; color:#09F;}
.navigation
{
	background:#333;
	height:30px;
	line-height:30px;
}

.navigation ul li
{
	float:right;
}

.navigation li a
{
	display: block;
	height:30px;
	padding:0 15px;
	color:#fff;
	text-decoration: none;
	border-left: 1px solid #fff;
}

.navigation li a:hover { background:#09F; }

.content
{
	background:#eee;
}

.contentBody
{
	width:650px;
	float:right;
	padding:20px;
}

.contentBody p { text-align:justify; line-height:17px;}

.contentBody h2
{
	margin: 0 0 .5em;
}

.sideBar
{
	width:250px;

	float:left ;
	padding:20px 0 20px 20px;

}
.sideBar h3
{
	margin: 0 0 .5em;
}

.footer
{
	background:#ccc;
	padding: 20px;
	text-align:left;
}

برای ظاهر شدن این ناهماهنگی در چینش صفحه کافیست که sideBar و contentBody دارای رنگ پس زمینه متفاوتی شوند

.sideBar
{
	width:250px;
	float:left ;
	padding:20px 0 20px 20px;
    background:#ddd;

}

نکات مهم در چینش صفحه

• ارتفاع یکسان sidebar و contentBody

  ناهماهنگی در ارتفاع این دو قسمت در زمانی قابل رویت خواهد بود که ارتفاع محتوا contentBody بیشتر از sideBar باشد که به طور معمول نیز این چنین است . برای بر طرف نمودن این ناهماهنگی می توانید از تکنیک بسیار ساده و هوشمندانه زیر استفاده نمائید .

• .clearfloat

  اگر مطلب آشنایی با CSS float را مطالعه نموده باشید متوجه خواهید شد در مواردی استفاده از float می تواند باعث ایجاد نا هماهنگی در نمایش صفحات و چینش گردد . در این چینش از تکنیک clearfloat که یکی از شناخته شده ترین تکنیک ها برای بر طرف نمودن این مشکل است استفاده شده است . از این تکنیک در مواردی استفاده میشود که می خواهیم اثرات float بر یک عنصر را خنثی کنیم . در مورد این تکنیک در آینده مطالبه نوشته خواهد شد .

در ایتدا یک تصویر با رنگ پس زمینه , ارتفاع ۱px و عرض مورد نظرتان برای sideBar درست کنید . در این مثال رنگ پس زمینه #ddd و عرض مورد نظر ۲۷۰px خواهد بود .سپس این تصویر را در پس زمینه content قرار دهید و برای قرارگیری تصویر پس زمینه ساخته شده در جای مناسب از background-position استفاده نمائید . برای قرار گیری مناسب تصویر در پس زمینه sideBar با توجه به ارتفاع در نظر گرفته شده ، تصویر در جهت y تکرار خواهد شد .

در این رابطه بهتر است مطالب زیر را مطالعه نمائید

• آشنایی با مفهوم Margin , Padding , Border در CSS
• Margin , Padding – خلاصه نویسی دستورات CSS
• خلاصه نویسی دستورات CSS – Background

رنگ مورد استفاده در پس زمینه sideBar در ابتدای این مثال را نیز حذف نمائید .به همین سادگی به نظر می رسد که نا هماهنگی بر طرف شده باشد . ملاحظه می نمائید که با افزایش محتویات contentBody همچنان در چینش ناهماهنگی به وجود نخواهد آمد و contentBody و sideBar دارای ارتفاع یکسان و رنگ پس زمینه متفاوت خواهند بود .

نمایش صفحه

ساختار HTML

<div class="container">
	<div class="header">
        <h1><a href="http://www.webtarget.ir/">webtarget.ir</a></h1>
        <h2>دو ستون - عرض ثابت</h2>
	</div>
	<div class="navigation">
		<ul>
			<li><a href="#">خانه</a></li>
			<li><a href="#">درباره ما</a></li>
			<li><a href="#">خدمات</a></li>
			<li><a href="#">ارتباط با ما</a></li>
		</ul>
	</div>
    <div class="content">
        <div class="contentBody">
            <h2>آموزش چینش صفحات وب سایت با استفاده از CSS</h2>
            <p>کد نویسی بر اساس استاندارد W3C انجام شده است</p>
            <p>چینش بر اساس زبان فارسی و از راست به چپ است - rtl </p>
            <br class="clearfloat" />
        </div>
        <div class="sideBar">
            <h3>سر فصل برای ستون کناری</h3>
            <p>با ساختار و چینش های استاندارد آشنا می شوید</p>
        </div>
        <br class="clearfloat" />
    </div>
	<div class="footer">
		Copyright©webtarget.ir|2011
	</div>
</div>

کدهای CSS

@charset "utf-8";
/* CSS Document */
/*-------------------------*/
/* Design & Style by       */
/* Amir Sorouri            */
/* Sorouri.amir@gmail.com  */
/*-------------------------*/

/*--------- reset ---------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
ol, ul {
	list-style: none;
}
body { font:62.5%/1.7em Tahoma, Arial, sans-serif;/* font-size 1em = 10px */ direction:rtl;}

/* ---------- Requirment ----------*/
.container {font-size:1.2em;}
.clearfloat {clear:both; height:1%;}
h1 , h2 , h3  { font-family:Arial, Helvetica, sans-serif;}
h1 { font-size:1.8em;}
h2 { font-size:1.6em;}
h3 { font-size:1.4em;}

/* ---------- Main -----------*/
.container
{
	width:960px;
	margin: 0 auto;
	background:#fff;
}

.header
{
	background:#ccc;
	padding: 20px;
}
.header h1 { text-align:left;}
.header h1 a{ text-decoration:none; color:#09F;}
.navigation
{
	background:#333;
	height:30px;
	line-height:30px;
}

.navigation ul li
{
	float:right;
}

.navigation li a
{
	display: block;
	height:30px;
	padding:0 15px;
	color:#fff;
	text-decoration: none;
	border-left: 1px solid #fff;
}

.navigation li a:hover { background:#09F; }

.content
{
	background:url(sideBarBg.jpg) repeat-y left top #eee;
}

.contentBody
{
	width:650px;
	float:right;
	padding:20px;
}

.contentBody p { text-align:justify; line-height:17px;}

.contentBody h2
{
	margin: 0 0 .5em;
}

.sideBar
{
	width:250px;
	float:left ;
	padding:20px 10px;

}
.sideBar h3
{
	margin: 0 0 .5em;
}

.footer
{
	background:#ccc;
	padding: 20px;
	text-align:left;
}

در این رابطه بخوانید

• چینش صفحه با ساختار یک ستون با عرض متغیر
• چینش صفحه با ساختار یک ستون با عرض ثابت

در ابتدا می توانید نمونه ای از این ساختار را ملاحظه نمائید . استفاده از این ساختار که در اصطلاح به عنوان ساختار Liquid شناخته می شود با توجه به متغیر بودن عرض صفحات نمایش و رزولوشن های متفاوت تصویر در کامپیوتر های متفاوت بسیار متداول است و می توان گفت پایه تمام ساختارهای متغیر از این چینش به وجود خواهند آمد.

نمایش صفحه

ساختار HTML

<div class="container">
	<div class="header">
		<h1><a href="http://www.webtarget.ir/">webtarget.ir</a></h1>
        <h2>یک ستون – عرض متغیر</h2>
	</div>
	<div class="navigation">
		<ul>
			<li><a href="#">خانه</a></li>
			<li><a href="#">درباره ما</a></li>
			<li><a href="#">خدمات</a></li>
			<li><a href="#">ارتباط با ما</a></li>
		</ul>
	</div>
	<div class="content">
		<h2>آموزش چینش صفحات وب سایت با استفاده از CSS</h2>
		<p>کد نویسی بر اساس استاندارد W3C انجام شده است</p>
        <p>چینش بر اساس زبان فارسی و از راست به چپ است - rtl </p>
	</div>
	<div class="footer">
		Copyright©webtarget.ir|2011
	</div>
</div>

کدهای CSS

نکات مهم در چینش صفحه

• liquid

  با توجه به چینش از نوع متغیر و یا در اصطلاح liquid عرض ثابت برایcontainer در نظر گرفته نشده است . برای ایجاد فاصله از چپ و راست از margin:0 30px استفاده شده است که نشان دهنده ۳۰px فاصله از سمت چپ و راست و ۰px از بالا و پایین است. در این رابطه می توانید مطلب Margin , Padding – خلاصه نویسی دستورات CSS را برای درک بهتر مطالعه نمائید .

@charset "utf-8";
/* CSS Document */
/*-------------------------*/
/* Design & Style by       */
/* Amir Sorouri            */
/* Sorouri.amir@gmail.com  */
/*-------------------------*/

/*--------- reset ---------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
ol, ul {
	list-style: none;
}
body { font:62.5%/1.7em Tahoma, Arial, sans-serif;direction:rtl;}

/* ---------- Requirment ----------*/
.container {font-size:1.2em;}
.clearfloat {clear:both; height:1%;}
h1 , h2 , h3  { font-family:Arial, Helvetica, sans-serif;}
h1 { font-size:1.8em;}
h2 { font-size:1.6em;}
h3 { font-size:1.4em;}

/* ---------- Main -----------*/
.container
{
	margin: 0 30px;
	background:#fff;
}

.header
{
	background:#ccc;
	padding: 20px;
}
.header h1 { text-align:left;}
.header h1 a{ text-decoration:none; color:#09F;}
.navigation
{
	background:#333;
	height:30px;
	line-height:30px;
}

.navigation ul li
{
	float:right;
}

.navigation li a
{
	display: block;
	height:30px;
	padding:0 15px;
	color:#fff;
	text-decoration: none;
	border-left: 1px solid #fff;
}

.navigation li a:hover { background:#09F; }

.content
{
	padding: 20px;
	background:#eee;
}
.content p { text-align:justify; line-height:17px;}

.content h2
{
	color:#000;
	margin: 0 0 .5em;
}

.footer
{
	background:#ccc;
	padding: 20px;
	text-align:left;
}

در این رابطه بخوانید

• چینش صفحه با ساختار یک ستون با عرض ثابت

پیشنهاد میشود قبل از خواندن این مطلب آموزشهای ارائه شده در باره CSS را مرور کنید .

• آشنایی با CSS Positioning

• آشنایی با CSS float

• آشنایی با Display , Visibility در CSS

• گزینشگرهای تو در تو , گزینشگرهای گروهی در CSS

• آشنایی با مفهوم Margin , Padding , Border در CSS

• افزایش سرعت , کاهش مصرف پهنای باند – CSS Sprite

• نمایش یکسان وب سایت در مرورگرهای متفاوت – CSS Reset

• اندازه فونت متغیر و ثابت

آموزش چینش صفحه با ساختار یک ستون با عرض ثابت به وسیله CSS

این نوع از ساختار را می توان به عنوان پایه ای برای تمامی ساختارهای متداول در نظر گرفت .

کلاسها و همچنین نحوه کد نویسی بر اساس استانداردهای W3C و روش های متداول در دنیا انتخاب شده است . چینش بر اساس زبان فارسی و از راست به چپ است ( rtl )

نمایش صفحه

ساختار HTML

در این نوع ساختار صفحه به چند قسمت اصلی تقسیم بندی شده است ( container , header , navigation , content , footer )

<div class="container">
	<div class="header">
        <h1><a href="http://www.webtarget.ir/">webtarget.ir</a></h1>
        <h2>یک ستون – عرض ثابت</h2>
	</div>
	<div class="navigation">
		<ul>
			<li><a href="#">خانه</a></li>
			<li><a href="#">درباره ما</a></li>
			<li><a href="#">خدمات</a></li>
			<li><a href="#">ارتباط با ما</a></li>
		</ul>
	</div>
	<div class="content">
		<h2>آموزش چینش صفحات وب سایت با استفاده از CSS</h2>
		<p>کد نویسی بر اساس استاندارد W3C انجام شده است</p>
        <p>چینش بر اساس زبان فارسی و از راست به چپ است - rtl </p>
	</div>
	<div class="footer">
		Copyright©webtarget.ir|2011
	</div>
</div>

کدهای CSS

در این خود آموز تلاش شده است از بازگو کردن مطالب ابتدایی صرف نظر شود .

نکات مهم در چینش صفحه

• CSS Reset

  در این خود آموز از تکنیک CSS Reset برای استاندارد سازی استفاده شده است .

• استفاده از عرض ۹۶۰px

  در این نوع چینش از عرض ۹۶۰px استفاده شده است . این عرض با توجه رزولوشن ۱۰۲۴*۷۶۸ انتخاب شده است .

• margin: 0 auto

  از این تکنیک برای در مرکز قرار دادن چینش در صفحه استفاده می شود . در استفاده از این تکنیک باید به خاطر داشته باشید که یک عرض برای چینش در نظر گرفته شود. به طور مثال در چینش فوق از عرض ۹۶۰px استفاده شده است .

• اندازه فونت متغیر

  در این چینش از اندازه گذاری متغیر برای فونت استفاده شده است . برای آشنایی با این نوع از اندازه گذاری توصیه می شود مطلب اندازه فونت متغیر و ثابت

  را مطالعه نمائید .

@charset "utf-8";
/* CSS Document */
/*-------------------------*/
/* Design & Style by       */
/* Amir Sorouri            */
/* Sorouri.amir@gmail.com  */
/*-------------------------*/

/*--------- reset ---------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
ol, ul {
	list-style: none;
}
body { font:62.5%/1.7em Tahoma, Arial, sans-serif;direction:rtl;}

/* ---------- Requirment ----------*/
.container {font-size:1.2em;}
.clearfloat {clear:both; height:1%;}
h1 , h2 , h3  { font-family:Arial, Helvetica, sans-serif;}
h1 { font-size:1.8em;}
h2 { font-size:1.6em;}
h3 { font-size:1.4em;}

/* ---------- Main -----------*/
.container
{
	margin: 0 auto;
	width: 960px;
	background:#fff;
}

.header
{
	background:#ccc;
	padding: 20px;
}
.header h1 { text-align:left;}
.header h1 a{ text-decoration:none; color:#09F;}
.navigation
{
	background:#333;
	height:30px;
	line-height:30px;
}

.navigation ul li
{
	float:right;
}

.navigation li a
{
	display: block;
	height:30px;
	padding:0 15px;
	color:#fff;
	text-decoration: none;
	border-left: 1px solid #fff;
}

.navigation li a:hover { background:#09F; }

.content
{
	padding: 20px;
	background:#eee;
}
.content p { text-align:justify; line-height:17px;}

.content h2
{
	color:#000;
	margin: 0 0 .5em;
}

.footer
{
	background:#ccc;
	padding: 20px;
	text-align:left;
}

Outline properties – خواص و توانایی های Outline

element {

  outline-width: number+unit;

  outline-style: (numerous);

  outline-color: color || #hex || (rgb / % || 0-255);

}

the outline shorthand property – توانایی های Outline به صورت خلاصه نویسی شده

element {

  outline:outline-width outline-style outline-color;

}

example – مثال

element {

  outline:3px dotted gray;

}

نکته

این نکته با توجه به قسمت های قبل تکرار می شود که خلاصه نویسی دستورات CSS باید با دقت صورت گیرد . در غیر اینصورت ممکن است مقادیر پیش فرض تغییر کنند . برای توضیحات بیشتر به قسمت های قبلی مراجعه نمائید

list-style properties – خواص و توانایی های list-style

element { 

  list-style-type: (numerous);

  list-style-position:inside || outside;

  list-style-image:url(image.png);

}

list-style property defaults – مقادیر تعیین شده به صورت پیش فرض

element {

  list-style-type:disc;

  list-style-position:outside;

  list-style-image:none;

}

the list-style shorthand property – توانایی های list-style به صورت خلاصه نویسی شده

element {

  list-style:list-style-type list-style-position list-style-image);

}

example – مثال

ul li {

  list-style:square inside url(image.png);

}

نکته

در مثال فوق در صورت عدم وجود تصویر به صورت پیش فرض از square استفاده خواهد شد.

در این رابطه بخوانید

• خلاصه نویسی دستورات CSS – Border
• خلاصه نویسی دستورات CSS – Margin – Padding
• خلاصه نویسی دستورات CSS – Background
• خلاصه نویسی دستورات CSS – Font

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

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

شایان ذکر است که این راهنما اسرار بیشتر شدن رتبه ( Page Rank ) صفحات وب سایت شما را باز گو نمی کند. از تمرین های مفیدی که در زیر سر تیتر های مطالب لیست شده اند برای راحت تر بررسی کردن و داشتن درک بهتری از محتوای وب سایت خود برای موتور های جستجو استفاده کنید. بهینه سازی برای موتور های جستجو، در واقع ایجاد یک تغییر کوچک در بخشی از وب سایت است .

روش بهتر دیده شدن توسط موتورهای جستجو برای کسب رتبه بهتر و مخاطبان بیشتر به صورت هدفمند ( کسب مخاطبانی که واقعا به دنبال خدمات شما هستند .) موتورهای جستجو در معرفی و ایجاد ارتباط میان کاربران و ارائه دهندگان خدمات نقش بسیار مهمی را بر عهده دارند و بهینه سازی سایت برای موتورهای جستجو نقش بسیار تعیین کننده ای در رقابت شما برای بهتر دیده شدن دارد .

شما با برخی از موضوعات مطرح شده در این راهنما آشنا هستید چون آنها اجزاء اصلی هر وب سایتی محسوب می شوند ولی شاید شما این راهکارها را برای بهینه شدن وب سایت خود انجام نداده اید .در حقیقت مطلب اصلی این راهنما در مورد نحوه بهینه سازی وب سایت برای موتورهای جستجو است. باید درک کنید که چه چیزی برای بازدید کنندگان سایت شما بهتر است . آنها اصلی ترین مخاطبان محتوای وب سایت شما هستند و از موتور های جستجو برای یافتن خدمات و اطلاعات شما استفاده می کنند . تمرکز تنها برای تغییر رتبه ( Page Rank ) وب سایت نتیجه دلخواه را به شما نخواهد داد .

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

دانلود نسخه PDF با کیفیت بالا ( ۱٫۳۰ mb ) | دانلود نسخه PDF با کیفیت متوسط ( ۸۰۰ kb )
پسورد : webtarget.ir

فهرست مطالب منتشر شده در وبلاگ

بهینه سازی سایت برای موتورهای جستجو , SEO

اساس و پایه SEO

• ایجاد عنوان صفحات – page title – یکتا، بدون تکرار و صحیح

• استفاده از توضیحات متا تگ مناسب – meta tag description

ارتقاء دادن ساختار وب سایت

• بهبود لینک های صفحات – url

• دسترسی آسان به صفحات سایت – Easier navigation

بهینه سازی محتوای وب سایت

• ارتقاء محتوا و خدمات

• استفاده از متن های مناسب برای لینک ها

• بهبود نحوه استفاده از تصاویر

• استفاده از تگ های سر فصل و تیتر – heading tag مناسب

نحوه ایجاد ارتباط با موتور های جستجو گر (crawlers )

• استفاده موثر از فایل robots.txt

• آگاهی از rel=”nofollow” برای لینک ها

تحلیل، ترویج و تبلیغ

• تبلیغات موثر و استاندارد – استفاده از خدمات رایگان – webmaster tools