امتیاز موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
طراحی فروشگاه اینترنتی
#1
طراحی فروشگاه اینترنتیوسایت ساز با  بیش از 130 امکان مختلف و منحصر بفرد در ایران 
قیمت فروشگاه ما 450 هزار تومان می باشد.
پاسخ
#2
مخفی کردن عناصر وب با CSS

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

چرا عناصر را در صفحه وب پنهان می کنیم؟

شاید این سوال در ذهنتان باشد که چه نیازی است عناصر را در صفحات وب مخفی و پنهان کنیم؟
البته این کار همیشه هم ضرورت ندارد، بلکه استفاده از این قابلیت در صفحات وب بستگی به شرایط و نیاز شما دارد، به طور مثال فرض کنید یک سیستم ضد ارسال هرزنامه یا اسپم ایجاد کرده اید که متکی بر پر شدن یا نشدن یک فیلد در یک فرم HTML است، به این صورت که اگر فیلد مورد نظر پر شود یعنی کاربر یک ربات است و اگر خالی باشد یعنی کاربر یک انسان است، همان طور که می دانیم ربات ها صفحات وب را معمولا بدون پردازش CSS و به صورت کد HTML دریافت می کنند، لذا آن فیلد مخفی برای آنها قابل رویت است و بنابراین به همراه سایر فیلدهای موجود در فرم، آن را هم به احتمال خیلی زیاد با عباراتی پر می کنند، اما با مخفی کردن فیلد برای کاربران عادی آنها نمی توانند در شرایط معمولی فیلد را مشاهده کنند و لذا نباید اطلاعاتی در آن وارد نمایند، حتی می توان با درج عبارتی مانند "در این فیلد چیزی ننویسید" کاربرانی که استایل CSS در مرورگرشان غیر فعال است را نیز راهنمایی کرد، یا به طور مثال اگر بخواهیم یک ابزار یا یک عبارت، بنا به دلایل مختلف فقط برای ربات ها قابل رویت باشد، نیاز به استفاده از CSS است.
استفاده از display:none

ابتدایی ترین روشی مخفی کردن عناصر در صفحات وب با CSS استفاده از خاصیت display و با مقادیر none است، به این صورت لایه یا بلاک مورد نظر با وجود اینکه در صفحه وجود دارد، ولی از چشم کاربران عادی (در شرایط معمول و با فعال بودن استایل CSS) پنهان است، برای استفاده از این خاصیت کافی است آن را به صورت یک کلاس یا آی دی و یا به صورت استایل خطی به عنصر مورد نظر نسبت دهیم.
<style type="text/css">
.hidden{
display:none;
}
</style>
نکته: بعضا مشاهده می شود که برای مخفی کردن لینک ها یا به اصطلاح فریب دادن ربات های جستجوگر مانند ربات گوگل، از این خاصیت استفاده می شود، به یاد داشته باشیم ربات ها و از جمله ربات گوگل بر اساس الگوریتم های خود این گونه موارد را شناسایی کرده و در صورت تکرار ممکن است سایت یا وبلاگ ما را در لیست سیاه خود قرار داده یا حداقل رتبه آن را کاهش دهند، لذا استفاده از display:none باید با دقت و به تعداد خیلی کم انجام شود.
استفاده از visibility:hidden

یکی دیگر از خاصیت های CSS که در مخفی کردن عناصر در صفحات وب کاربرد دارد، خاصیت visibility:hidden است، البته عملکرد visibility:hidden تا حدود زیادی مشابه display:none است، با این تفاوت که visibility:hidden اگرچه عنصر را در صفحه مخفی می کند، اما بر خلاف display:none اثر آن را به طور کامل از بین نمی برد، به عنوان مثال اگر یک بلاک با ارتفاع 200 پیکسل را با display:none مخفی کنیم، فضای 200 پیکسلی اشغال شده نیز از بین می رود، اما اگر همین کار را با visibility:hidden انجام دهیم، بلاک مخفی می شود، بدون اینکه 200 پیکسل فضای اشغال شده از بین برود.
<style type="text/css">
#visibility{
visibility:hidden;
}
</style>
استفاده از position:absolute و left

تکنیک هایی که در بالا اشاره شد اگرچه روش هایی استاندارد و در جای خود قابل استفاده هستند، اما کاربرد زیاد آنها در یک صفحه به لحاظ سئو (SEO) یا بهینه سازی موتورهای جستجو (Search Engine Optimization) توصیه نمی شود، از این رو طراحان و برنامه نویسان از روش دیگری برای مخفی نمودن عناصر HTML در صفحات وب استفاده می کنند، در این روش ابتدا با استفاده از خاصیت position:absolute عنصر را به حالت شناور در آورده و سپس با کمک left و در نظر گرفتن یک مقدار منفی برای آن، عنصر را از دید کاربران مخفی می کنند بدون اینکه تاثیری در ظاهر صفحه ایجاد شود.
<style type="text/css">
.accessible{
position:absolute;
left:-9999px;
top:auto;
width:5px;
height:5px;
overflow:hidden;
}
</style>
توضیح:
- مقادیر absolute برای خاصیت position باعث شناور شدن بلاک یا عنصر مورد نظر می شود.
- مقدار منفی برای left، عنصر را به بیرون از دید کاربر و خارج از صفحه نمایش هدایت می کند.
- مقادیر width و height می توانند صفر در نظر گرفته شوند، اما برای اطمینان از اینکه ربات هایی مانند ربات گوگل محتوای بلاک را پردازش کنند، بهتر است مقداری بیش از صفر یا 1 برای ارتفاع و عرض در نظر گرفته شود.
- خاصیت overflow با مقادیر hidden باعث می شود که محتوای مازاد بر فضای بلاک، مخفی شود.
نکته: وقتی از مقادیر منفی برای خاصیت left استفاده می کنیم، باید در نظر داشته باشیم که چینش (direction) صفحه در تگ body به صورت پیش فرض یا چپ به راست (ltr) باشد، در غیر این صورت (یعنی اگر تگ body چینش rtl یا راست به چپ داشته باشد) در صفحه اسکرول افقی خواهیم داشت، در این گونه موارد به جای left باید از right و مقادیر منفی برای کلاس مخفی استفاده کنیم یا اینکه چینش را در تگ body به حالت ltr تغییر دهیم و یا اگر ناچار به استفاده از چینش rtl هستیم، آن را به بلاک های زیرمجموعه نسبت دهیم نه به تگ body.

چگونه طراح وب سایت موفقی باشید 

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


1) نا معقول بودن:

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


2) آشنایی با ناوبری:

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


3) انعطاف پذیری:

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


4) سادگی:

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


چگونه می توان سرعت بارگذاری را افزایش داده و مشتری را راضی نگه داشت؟

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


بنیاد:

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


فشرده سازی فایل ها و اکسریپت:

با فشرده سازی فایل ها سرعت بارگذاری صفحات وب افزایش خواهد یافت . می توانید از برنامه های فشرده سازی رایگان به منظور کاهش بایت صفحات استفاده کنید که این امر نقشه به سزایی در سئو و بهینه سازی وب سایت و هم چنین بالا بردن رتبه شما در گوگل خواهد داشت.برخی از سرویس دهنده ها مانند APACHE در اختیار کاربران می باشد که با ارائه نکاتی مفید برای JAVA,CSS و HTML ساخته شده اند.


استفاده از CDN به منظور گسترش محتوا در سرور:

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


CACHE مرورگر:

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


HTTP فعال:

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


در خلاصه:

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





درب اتوماتیک راهبند جک پارکینگی کرکره اتوماتیک درب سکشنال درب ریلی اتوماتیک کرکره شفاف درب اتوماتیک شیشه ای
پاسخ


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان