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

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

برای استفاده از فایرباگ از طریق context menu مرورگر کافی ست با کلیک راست کردن در سایت گزینه ی inspect element را انتخاب کرده  تا پنل فایرباگ ظاهر شود . همچنين براي باز کردن پنل فاير باگ مي توانيد روي دکمه فاير باگ کليک کنيد. با توجه به ورژن فاير فاکس شما اين آيکون در پائين صفحه سمت راست يا بالا سمت راست کنار نوار جستجو قرار مي گيرد .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

لازم به ذکر است هنگامی که پیوند لینک به صفحهء اصلی وب شما از دیگر بخش های وب سایت شما برقرار می شود، باید اطمینان حاصل فرمایید که پیوند شما به نام دامنه لینک شود .به جای گیج کردن موتورهای جستجو با داشتن دو یا چند صفحهء اصلی جداگانه مانند /index.html/ ،به موتورهای جستجو در تشخیص نام دامنه تان به عنوان Anchor text کمک کنید تا صفحهء اصلی وب سایت شما در بالاترین رتبه صفحهء نتایج موتور جستجو قرار گیرد. این اتفاق در سیستم مدیریت محتوای استانداردی مثل وردپرس هرگز اتفاق نخواهد افتاد . با رعایت موارد بالا می توانید با طراحی وب سایت مفید و استاندارد یکی از بهترین شرکت های طراحی سایت شناخته شوید .

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

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

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

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

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

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

با توجه به مقاله رتبه الکسا (Alexa Rank) چیست در این قسمت می خواهیم بدانیم افزایش رتبه سایت در الکسا چگونه است ؟

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

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

در اینگونه وب سایت ها با توجه به زبان های برنامه نویسی پیچیده ای که استفاده می شود امکاناتی نظیر صفحات هوشمند ،فرمها و جستجوهای پیچیده در آن ها امکان پذیر می باشد و پیاده سازی آن به گونه ای است که در حقیقت صفحه ای وجود ندارد و تنها با درخواست کاربر ایجاد می گردد . آدرس صفحات داینامیک اغلب دارای علامت سوال (?) است؛ همینطور وجود علامتهای % ، = ، +، $ یا & در یک آدرس می تواند بیانگر داینامیک بودن آن باشد که به تمام علامتهای بعد از ؟، Query String می گویند. برای مشاهده یک نمونه از صفحات داینامیک، در گوگل کلمه ای را جستجو کنید؛ صفحه نتایج جستجو، یک صفحه داینامیک می باشد.

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