قابلیت استفاده از ابزار و طراحی بصری موفقیت یا شکست وب سایت را تعیین می کند. بازدید کننده صفحه تنها کسی است که با کلیک بر روی ماوس درباره همه چیز را تصمیم می گیرد، طراحی کاربر محور به عنوان یک رویکرد استاندارد برای طراحی وب سایت موفق و سودمند باید به عنوان مهمترین چیز مورد توجه قرار بگیرد.
ما نمی خواهیم درباره جزئیات پیاده سازی طرح بحث کنیم (مثلا جایی که کادر جستجو باید قرار گیرد). در عوض ما بر روی اصول اصلی، اکتشافات و رویکردهای طراحی وب سایت موثر تمرکز می کنیم، رویکردهایی که اگر به درستی مورد استفاده قرار گیرند، می توانند به تصمیم های پیچیده تر طراحی کمک کنند و روند درک اطلاعات ارائه شده را ساده تر کنند.
برای استفاده از اصول به درستی ابتدا باید بدانیم که چگونه کاربران با وب سایت ها ارتباط برقرار می کنند، چگونه فکر می کنند و الگوهای اصلی رفتار کاربران چیست.
اساسا، عادت کاربران در وب، متفاوت از عادت مشتریان فروشگاه نیست. بازدیدکنندگان به هر صفحه جدید نگاه می کنند، برخی از متن را اسکن می کنند و بر روی لینک اول که علاقه ی آنها را جذب می کند یا به صورت مبهم شبیه چیزی است که آنها دنبال آن هستند، کلیک می کنند. در حقیقت، قسمتهای بزرگی از صفحه وجود دارد که حتی به آن نگاه نمی کنند.
بیشتر کاربران دنبال چیزی جالب (یا مفید) و قابل کلیک هستند. اگر صفحه جدید انتظارات کاربران را برآورده نکند، روی دکمه برگشت آن کلیک می شود و روند جستجو ادامه می یابد. کاربران از کیفیت و اعتبار قدردانی می کنند. اگر یک صفحه محتوای با کیفیت بالا داشته باشد توجه آن ها را به طور قطع به خود جلب میکند، به همین دلیل وب سایت هایی که دارای محتوای با کیفیت بالا می باشند، در طول سال ها توجه ها رو به خود جلب کردند. محتوا مهمتر از طراحی است که آن ها را درگیر سایت می کند.
کاربران در مواجهه اولیه با صفحه آن را نمی خونند بلکه آنها اسکن می کنند. با نگاه اولیه تجزیه و تحلیل یک صفحه وب را انجام می دهند، کاربران برای برخی از نقاط ثابت یا لنگرهایی که آنها را از طریق محتوای صفحه هدایت می کند جستجو می کنند.
کاربران وب بر رضایت فوری تأکید دارند. اصل بسیار ساده: اگر وب سایت قادر به براورده کردن انتظارات کاربران با یک نگاه نباشد، طراح موفق نشد که کار خود را به درستی انجام دهد و شرکت پول را از دست می دهد.
کاربران انتخاب های مطلوب را انجام نمی دهند. کاربران سریع ترین راه را برای یافتن اطلاعاتی که دنبال می کنند جستجو می کنند. همچنین صفحات وب را به صورت خطی اسکن نمی کنند و به طور پیوسته از یک بخش سایت به بخش دیگر می روند. به محض پیدا کردن یک پیوند به نظر می رسد که ممکن است به هدف منجر شود، شانس بسیار خوبی است که آن را بلافاصله کلیک کنند. بهینه سازی سخت است و طول می کشد و رضایتمندی کارآمدتر است.
کاربران می خواهند کنترل داشته باشند، کاربران می خواهند قادر به کنترل مرورگر خود و تکیه بر ارائه اطلاعات سازگار در سراسر سایت باشند. به عنوان مثال آنها نمی خواهند که پنجره های جدید به طور غیرمنتظره ای ظاهر شوند و می خواهند بتوانند با یک دکمه «Back» به سایت قبلی خود بازگردند، بنابراین این کار خوب است که هرگز لینک ها را در پنجره های مرورگر جدید باز نکنید .
صفحه وب باید واضح و خود توضیحی باشد. هنگامی که شما در حال ایجاد یک سایت هستید، کار شما این است که از علامت سوال خلاص شوید. تصمیمات کاربران باید آگاهانه، با توجه به جوانب مثبت و منفی باشد.
اگر معماری ناوبری و سایت بصری نباشد، تعداد علامت های سوال افزایش می یابد و کاربران سخت تر درک می کند که چگونه سیستم کار می کند و چگونه از نقطه A به نقطه B بروند. ساختار واضح، سرصفحه بصری متوسط و به راحتی قابل تشخیص است لینک ها می توانند به کاربران کمک کنند تا مسیر خود را برای هدف خود پیدا کنند. این وظیفه طراح است تا اطمینان حاصل کنید که تعداد علامت های سوال نزدیک به ۰ است.
با کاهش بار شناختی، بازدیدکنندگان برای درک عقاید سیستم، راحت تر می شوند. هنگامی که این کار را انجام دادید، می توانید ارتباط برقرار کنید و بگویید چگونه کاربران می توانند از آن بهره مند شوند. مردم نمی توانند از وب سایت شما استفاده کنند اگر آنها نتوانند راه خود را در اطراف آن پیدا کنند.
در هر پروژه زمانی که قصد دارید به بازدیدکنندگان خود خدمات یا ابزار ارائه دهید، سعی کنید حداقل نیازهای کاربری خود را حفظ کنید. اقدامات کمتر از کاربران برای تست سرویس نیاز است، بیشتر احتمال دارد که یک بازدید کننده به صورت تصادفی از سایت شما بازدید می کند. بازدیدکنندگان اولیه حاضر برای بدست آوردن خدمات حاضر به پر کردن فرمهای طولانی وب برای حسابی که در آینده ممکن است استفاده کنند یا نه نیستند. اجازه دهید کاربران سایت و خدمات شما را کشف کنند بدون اینکه مجبور شوند اطلاعات خصوصی را به اشتراک بگذارند. منطقی نیست که کاربران را مجبور به وارد کردن آدرس ایمیل برای آزمایش این ویژگی کنید.
به طور ایده آل تمام موانع را حذف کنید ، در ابتدا اشتراک یا ثبت نام نیاز نداشته باشید. ثبت یک کاربر به تنهایی به عنوان یک مانع برای ناوبری کاربر برای کاهش ترافیک ورودی کافی است.
همانطور که وب سایت ها هر دو محتوای استاتیک و پویا را ارائه می دهند، برخی از جنبه های رابط کاربری توجه بیشتری نسبت به دیگران به خود جلب می کنند. بدیهی است، یکی از این موارد تصاویر چشم نواز تر از متن باشند. همانطور که جملات مشخص شده به عنوان bold(برجسته) هستند جذاب تر از متن ساده هستند.
چشم انسان یک دستگاه بسیار غیر خطی است و کاربران وب می توانند بلافاصله لبه ها، الگوها و حرکات را تشخیص دهند . به همین دلیل است که تبلیغات مبتنی بر ویدئو بسیار آزار دهنده و منحرف کننده هستند، اما از دیدگاه بازاریابی آنها به طور کامل برای به کار گرفتن توجه کاربران استفاده می کنند.
انسان کاملا از اصل تمرکز استفاده می کند. تنها عنصر که به طور مستقیم برای کاربران قابل مشاهده است، کلمه “free” است که جذاب است اما هنوز هم آرام و صرفا آموزنده است. نکات ظریف، کاربران را با اطلاعات کافی درباره چگونگی یافتن بیشتر در مورد محصول “رایگان” ارائه می دهد.
تمرکز توجه کاربران به مناطق خاص سایت با استفاده متوسط از عناصر بصری می تواند به بازدیدکنندگان شما کمک کند تا از نقطه A به نقطه B بدون فکر کردن به چگونگی انجام آن وادار کند.
طرح های مدرن وب معمولا به دلیل رویکرد خود جهت هدایت کاربران با ظاهر جذاب، دکمه های بزرگ با جلوه های بصری و غیره مورد انتقاد قرار می گیرند. اما از منظر طراحی این عناصر واقعا بد نیستند. برعکس، چنین دستورالعمل بسیار موثر است زیرا آنها را از طریق محتوای سایت هدایت می کند، به طوری که بسیار ساده و کاربر پسند است.
اجازه دادن به کاربر به در دسترس بودن عناصر یک اصل اساسی از طراحی رابط کاربری موفق است. این واقعا مهم نیست که چطور این دستاورد به دست می آید، مهم است که محتوا به خوبی درک شود و بازدیدکنندگان با این که با سیستم ارتباط برقرار می کنند، احساس راحتی کنند.
همانطور که وب از چاپ متفاوت است، لازم است که سبک نوشتاری را به ترجیحات و عادت های مرورگر تنظیم کنید. بلوک های متن طولانی بدون تصاویر و کلمات کلیدی مشخص شده به صورت برجسته (bold) و یا کج (italic) نادیده گرفته می شوند.
وقتی از کسب و کار صحبت می کنید اجتناب از نام های زیبا و هوشمندانه، نام های تجاری ناشی از بازاریابی، نام های خاص شرکت و نام های فنی ناشناخته بسیار مهم است.
نگه داشتن طراحی ساده باید هدف اصلی از طراحی سایت باشد. کاربران به ندرت در سایت برای لذت بردن از طراحی هستند، علاوه بر این، در اغلب موارد آنها با وجود طراحی، به دنبال اطلاعات هستند. طراحی پیچیده باعث تلاش اضافی کاربران برای بدست آوردن محتوای مورد نظر آن ها می شود.
از نقطه نظر مهمان، بهترین طراحی سایت یک متن خالص، بدون هیچ گونه تبلیغات و یا بلوک های محتوا بیشتر است. این یکی از دلایلی است که نسخه چاپی کاربر پسند از صفحات وب برای تجربه کاربری خوب، ضروری است.
در واقع، اهمیت فضای خالی بسیار دشوار است. نه تنها باعث کاهش بار شناختی برای بازدیدکنندگان می شود، بلکه باعث می شود اطلاعاتی که بر روی صفحه نمایش داده شده را درک کنند. وقتی یک بازدیدکننده جدید به یک طراحی نزدیک می شود، اولین کاری که او می خواهد انجام دهد این است که صفحه را اسکن کند و محتوا را به قسمت های قابل هضم اطلاعات تقسیم کند.
سازه های پیچیده برای خواندن، اسکن، تجزیه و تحلیل و کار با آنها سخت تر است. اگر انتخاب بین جداسازی دو بخش طراحی با یک خط قابل مشاهده یا با برخی از فضاهای خالی داشته باشید، معمولا بهتر است و بایستی از راه حل فضای خالی استفاده کنید. سازه های سلسله مراتبی پیچیدگی را کاهش می دهند و بهتر است که به کاربران یک حس سلسله مراتب بصری را ارائه دهیم، محتوای شما آسان تر خواهد بود.
Aaron Marcus در مقالات خود در ارتباطات موثر بصری، سه اصل اساسی در استفاده از به اصطلاح “زبان قابل مشاهده” را بیان می کند :
طراحی متعارف عناصر سایت به یک وب سایت خسته کننده منجر نمی شود. در حقیقت، کنوانسیون ها بسیار مفید هستند زیرا منحنی یادگیری را کاهش می دهند. به عنوان مثال، اگر همه وب سایت ها دارای نمایش بصری مختلف RSS بودند، این یک کابوس قابل استفاده بود. طراحی متفاوت از زندگی معمولی ما نیست، جایی که ما تمایل داریم به اصول اساسی سازماندهی داده ها (پوشه ها) یا انجام خرید (قرار دادن محصولات) بپردازیم.
با قراردادها می توانید اعتماد به نفس، اعتماد، اطمینان و اعتبار خود را به دست آورید. پیروی از انتظارات کاربران – درک آنچه انتظار دارید از ناوبری سایت، ساختار متن، قرار دادن جستجو و…
طرح بندی وب سایت در فتوشاپ – طراحی یک طرح وب سایت بیشتر از تنظیم تصاویر رنگی و پر کردن برخی از متن ها در فریم های متن است. این رویکردی است که حجم معاملات کسب و کار شما را به خود جلب می کند. رنگ و گرافیک وب سایت طبیعت کسب و کار را تعریف می کند، در حالی که کیفیت طراحی و جریان ناوبری آسان وب سایت باید کاربر را با سازمان مرتبط سازد و او را به یک مشتری بالقوه تبدیل کند.
طراحی وب سایت خوب و قابل دسترس برای هر طراحی وب سایت ضروری است . این آموزش در نظر گرفته شده است تا شما را از طریق فرایند ایجاد یک وب سایت ساده را از ابتدا مشاهده کنید. در طول فرایند، این آموزش به شما در کسب دانش بیشتر در مورد طراحی وب کمک خواهد کرد .
قبل از اینکه شما شروع به طراحی یک طرح بندی وب کنید، باید بدانید که چگونه وب سایت شما چه چیزهایی را شامل می شود و چه موضوعاتی را شامل می شود. مهم است که لیستی از عناصر طرح بندی وب سایت مورد نیاز مشتری خود را در وب سایت خود ایجاد کنید. علاوه بر این، کیفیت یک طراح خوب، آماده ساختن کل وب سایت قبل از شروع کار بر روی قالب نهایی است.
در این آموزش، قبل از شروع طرح اولیه قالب، یک نسخه مدلسازی ایجاد خواهیم کرد. من از سایه های خاکستری استفاده می کنم که امکان شناسایی بلوک مدل را دارند.
سالها قبل در حالی که سیستم عامل بسیار محدود بود و دستگاههای محدودی برای دسترسی به وب سایت ها وجود داشت، ابعاد صفحه به یک یا دو اندازه ثابت بودند. امروز سناریو کاملا متفاوت است، کاربران نهایی دسترسی به سایت ها را بر روی دسکتاپ از اندازه های مختلف، تلفن های همراه، iPad ها و تبلت ها دارند. در این موقعیت متنوع، هیچ شکی نیست که شما می توانید صفحه وب خود را به یک اندازه خاص ثابت کنید. اما برخی از استانداردهای مورد استفاده برای هر دستگاه وجود دارد. شما به آرامی اندازه دلخواه خود را پیدا خواهید کرد یا مشتری شما ممکن است یک وب سایت را برای تقلید از اندازه ها به شما معرفی کند.
در این مورد، ما در مورد ابعاد زیر کار می کنیم. نگران نباشید چون ارتفاع در طول زمان تغییر می کند. محتوای بیشتری که به وب سایت شما افزوده می شود، ارتفاع را بیشترخواهد کرد.
به خاطر داشته باشید که معمولا صفحه پایین صفحه به طور عمودی حرکت می کند، بنابراین شما نمی توانید به یک صفحه خاص برای صفحه وب خود برسید. اما لازم نیست که به صورت افقی حرکت کنید. بنابراین، عرض خود را به عنوان استانداردها لحاظ کنید.
برای وب، رزولوشن به ۷۲ محدود شده است. فقط تعداد محدودی از دستگاه ها مثل iPad ها بیشتر از ای هستند ولی حالت استاندارد همان ۷۲ می باشد.
فایل ها را با استفاده از دستور Ctrl + A انتخاب کنید و راهنماها را به طور مساوی در قالب ایجاد کنید. یک وب سایت باید منظم با هر عنصر مرتب به هم متصل به یکدیگر سازماندهی شود. و دستورالعمل های طرح بندی وب سایت به شما کمک می کند تا به آسانی آن را بدست آورید.
قرار دادن فایل mockup در قالب اصلی شما به شما کمک می کند تا صرفه جویی در وقت زیادی را صرف کنید. فتوشاپ تنها به شما در طراحی فریم ها کمک می کند. تکمیل عناصر طراحی با جزئیات، تطبیق و ترتیب نوع، زمان بیشتری را صرف طراحی رسم وب سایت می کند.
چیزی که بعد از آماده شدن چارچوب شما آماده است این است که یک طرح رنگی را انتخاب کنید. اما بهتر است قبل از شروع کار روی طراحی، رنگ خود را آماده کنید.
قبل از شروع طراحی، موارد مورد نیاز خود را آماده کنید. همه چیز از جمله آیکون ها، لوگو ، تصاویر و انتخاب رنگ باید قبل از شروع کار آماده شود. سازماندهی و برنامه ریزی کارهای شما زمان بیشتری را ذخیره می کند و در طراحی بدون انسداد بین آنها تمرکز می کند.
انتخاب رنگ ها می تواند انتخاب طراح باشد در صورتی که این یک شرکت جدید است و هویت سازمانی ندارد. در برخی موارد، مشتریان ایده ای را درباره سایه هایی که می خواهند، لوگو یا پس زمینه باید داشته باشند، ارائه می دهند.
وب سایت های متعددی وجود دارد که می تواند به شما در انتخاب میلیون ها طرح رنگ از آرشیو کمک کند. برای لذت بردن از انتخاب گسترده ای از ترکیب رنگ، از وب سایت های زیر استفاده کنید.
در اینجا من چند سایه آبی را برای استفاده از وب سایت انتخاب کردم. کل وب سایت در طرح رنگ زیر برنامه ریزی شده است. فراموش نکنید که سه یا چهار ترکیب رنگ مختلف را انتخاب کنید. هنگامی که مشتری یک طرح رنگی را نهایی می کند، مقادیر سایه را ذخیره و اطمینان حاصل کنید که رنگ ها در هر عمودی سازمان نقش حیاتی دارند(به خصوص در هویت سازمانی)
راه های زیادی برای انجام طراحی شما وجود دارد. هیچ قانون سخت افزاری و سریع وب سایت برای تعیین یا پیگیری فرآیند طراحی وجود ندارد، بیشتر این فرایند های طراحی برای راحتی طراح است.
بعضی از طراحان می خواهند کل بلوک ها و فریم ها را بسازند و شروع به کار در جزئیات در مرحله دوم و به دنبال آن نوع و در نهایت هم ترازی و تنظیمات باشند. بعضی ها، یک بخش از یک صفحه را به پایان می رسانند و سپس سراغ بخش بعدی میروند. ما سبک دوم را دنبال می کنیم.
ما وب سایت را در مراحل زیر به پایان خواهیم رساند:
قاعده کلی برای تعیین ابعاد سرصفحه یا بنر شما به خلاقیت شما منتهی می شود. با توجه به آخرین روند، وب سایت ها با یک تصویر بزرگ که تمام صفحه کامپیوتر شما را پوشش می دهد ظاهر می شود.
بعد از انتخاب رنگ بعد، ما شروع به وارد کردن لوگو و قرار دادن آن در گوشه بالا سمت چپ هدر می کنیم. شما همچنین می توانید شکل های بردار طرح بندی وب سایت را در گوشه سمت راست بالا مشاهده کنید، که برای اشتراک گذاری لینک های رسانه های اجتماعی مورد استفاده قرار می گیرد .
سپس برای قسمت اسلایدر با ابزار rectangle tool یک shape مستطیلی رسم کرده و درون آن یک تصویر دلخواه برای عکس اسلایدر و یک متن برای هدر و یک متن دیگر نیز برای توضیحات آن و همچنین یک دکمه برای ادامه مطلب قرار می دهیم.
یک تصویر مناسب برای کسب و کار را انتخاب کنید. میلیون ها تصویر در وب وجود دارد و طول می کشد تا تصویری را که مطابق نیاز شما است پیدا کنید.
در مورد مثال ما، من یک تصویر با کیفیت بالا پیدا کردم که فکر میکنم برای وب سایت من مناسب خواهد بود. من موضوع کسب و کار برای وب سایت ندارم، بنابراین می توانم هر تصویری را انتخاب کنم.
برای قسمت چرا ما؟ یک تیتر و یک متن را می نویسیم که به بهترین نحو بتواند موضوعیت سایت و یا کسب و کار ما را به بهترین شکل توصیف کند قرار می دهیم.
گام بعدی طراحی بخش خدمات وب سایت است. من یک ستاره فلزی در سایه های خاکستری برای نمایش خدمات مختلف شرکت طراحی کردم. هدف از استفاده از نماد ستاره خدمات ۵ ستاره است.
هماهنگی درون نوع و اشیا با استفاده از فضای سفید و شکاف های برابر بین عناصر طراحی به دست می آید. من از بسیاری از دستورالعمل های طرح بندی وب استفاده می کنم تا ببینیم که تمام اشیاء در فریم بایستی فاصله های مناسب را حفظ کنند که مقدار مناسبی از فضای سفید را به وجود آورند.
گام بعدی طراحی ما ایجاد بخش فرم است. در این مورد، من مخالف روش استفاده شده در طراحی بنر هستم. ما لایه تصویر را زیر لایه رنگ جامد قرار داده و لایه گرادیانت را در بالای دو لایه قرار می دهیم تا به یک نگاه بهتر برسیم. در حین قرار دادن عکس های بزرگ، بازی با حالت های ترکیب همیشه ضروری است.
انتخاب تصاویر برای این سایت دارای هیچ موضوع خاص مربوط به آن نیست. من فکر می کنم این تصویر به سایت کمک می کند.
سطح بعدی ما شامل دو فرمت متن ساده می شود. این شباهت به سطح دوم صفحه وب است و من از دو جعبه شبیه به بالای صفحه استفاده کردم. حفظ هماهنگی در هم ترازی راه خوبی برای استفاده از فضای سفید است.
همانطور که به قسمت نهایی صفحه رسیدیم، وقت آن است که دوباره ابعاد پاورقی را بررسی کنیم. طراح باید در مورد ارتفاع پایه بر اساس لینک هایی که باید از آن استفاده کند، برنامه ریزی کند.
پیوندها و تصاویر را بر حسب نیاز خود قرار دهید.
Robots.txt چیست؟ هنگامی که موتورهای جستجو به طور مرتب از سایت شما بازدید می کنند و مطالب شما را فهرست می کنند بسیار عالی است، اما اغلب موارد زمانی است که بخش هایی از محتوای آنلاین شما مستقیما چیزی نیست که شما می خواهید. به عنوان مثال، اگر شما دو نسخه از یک صفحه داشته باشید (یکی برای مرور در مرورگر و دیگری برای چاپ)، شما ترجیح می دهید نسخه چاپی را از خزیدن حذف کنید، در غیر این صورت شما یک مجازات محتوای تکراری را دریافت می کنید(یک عامل تاثیر گذار در سئو صفحات به شمار میرود). همچنین اگر شما تصور می کنید که اطلاعات حساسی در سایت شما وجود دارد و نمی خواهید کسی آن را ببینید و ترجیح می دهید که موتورهای جستجو این صفحات را نشان ندهند.
وظیفه فایل robots.txt محدود کردن دسترسی روبات های گوگل و سایر موتورهای جستجو به محتویات سایت شماست. این روبات ها بصورت کاملا اتوماتیک عمل کرده و قبل از ورود به هر سایت یا صفحه ای از وجود فایل robots.txt بر روی آن و محدود نبودن دسترسی محتوا مطمئن میشوند. تمامی روبات های استاندارد در اینترنت به این قوانین و محدودیت ها احترام گذاشته و صفحات شما را بازدید و ایندکس نخواهند کرد ولی روبات های اسپم توجهی به این فایل نخواهند داشت. اگر تمایل به حفظ امنیت محتوایی خاص و پنهان کردن آن از دید روبات های اینترنتی دارید بهتر است از پسورد گذاری صفحات استفاده کنید.
یک راه برای گفتن به موتورهای جستجو که از نمایش فایل ها و پوشه ها در وب سایت شما اجتناب شود با استفاده از متا تگ های ربات ها است. اما از آنجایی که تمام موتورهای جستجو به عنوان metatags خوانده نمی شوند، ماتاگ Robots می تواند به سادگی غیر قابل مشاهده شود. یک راه بهتر برای اطلاع دادن به موتورهای جستجو در مورد تصمیم شما این است که از فایل robots.txt استفاده کنید.
Robots.txt یک متن (نه HTML) است که در سایت خود قرار داده اید تا به روبات های جستجو بگویید که صفحاتی هستند که مایل نیستید آنها را مشاهده کنید. Robots.txt به هیچ وجه اجباری برای موتورهای جستجو نیستند، اما به طور کلی موتورهای جستجو از آنچه که از آنها خواسته نشده است اطاعت می کند. مهم این است که مشخص شود که robots.txt راه دیگری برای جلوگیری از خزش موتورهای جستجو در سایت شما نیست (یعنی یک فایروال نیست یا نوعی از حفاظت از رمز عبور) و این واقعیت است که شما یک فایل robots.txt قرار داده اید چیزی شبیه قرار دادن یادداشت “لطفا در ورودی های نام برده وارد نشوید”.
مکان robots.txt بسیار مهم است و باید در دایرکتوری اصلی باشد، زیرا در غیر این صورت عاملهای کاربران (موتورهای جستجو) قادر به پیدا کردن آن نخواهند بود. آنها کل سایت را برای فایل با نام robots.txt جستجو نمی کنند. در عوض، آنها ابتدا در دایرکتوری اصلی (به عنوان مثال http://mydomain.com/robots.txt ) نگاه می کنند و اگر آنها آن را پیدا نکنند، به سادگی فرض می کنند که این سایت فایل robots.txt ندارد. بنابراین، اگر شما robots.txt را در جای مناسب قرار ندهید، تعجب نکنید که موتورهای جستجو تمام سایت شما را فهرست می کنند.
مفهوم و ساختار robots.txt بیش از یک دهه پیش توسعه داده شده است و اگر شما علاقه مند به کسب اطلاعات بیشتر در مورد آن هستید، به وب سایت robots.txt مراجعه کنید.
ساختار robots.txt بسیار ساده است (و به سختی انعطاف پذیر) – این فهرست بی نهایت از عامل های کاربر و فایل ها و دایرکتوری های مجاز است:
User-agent نشان دهنده نوع روباتی است که نباید به صفحه دسترسی داشته باشد و dissallow برای اینکه به خزنده ها بگوید ورود به این مکان ها غیرقانونی است (دستور Disallow به رباتها میگوید که چه فولدرهایی از سایت شمارا نباید بررسی کنند). علاوه بر ورودیهای “user-agent:” و “disallow:”، میتوانید خطوطی را به صورت کامنت اضافه کنید. (با قرار دادن علامت # را در ابتدای خط)
برای مثال اگر مایل نیستید موتورهای جستجو، تصاویر سایت شمارا ایندکس کنند، میتوانید تمام تصاویر سایت را درون یک پوشه در هاستینگ خود قرار دهید و از دسترس موتورهای جستجو خارج سازید. فرض کنیم که تمام این تصاویر را به درون فولدر “Photos” منتقل کردهاید. برای آنکه به موتورهای جستجو بگویید که این تصاویر را ایندکس نکند، باید دستوری مانند زیر را بنویسید:
User-agent: *
Disallow: /photos
دستور Allow به شما امکان میدهد تا به ربات گوگل بگویید که اجازه مشاهده یک فایل، در فولدری که Disallowed شده را دارد. برای درک بهتر این دستور، اجازه بدهید که از مثال قبلی استفاده کنیم :
تصور کنید درون پوشهٔ photos ما که در هاستینگ سایت قرار دارد، تصویری به نام seo.png وجود دارد که میخواهیم Googlebot آن را ایندکس کند. با استفاده از دستور Allow میتوانیم به ربات گوگل بگوییم که این کار را انجام دهد:
* :User-agent
Disallow: /photos
Allow: /photos/seo.png
برای عدم دسترسی روبات ها به تمام محتویات سایت از کاراکتر / استفاده میکنیم :
Disallow: /
برای عدم دسترسی به یک فولدر یا دسته از سایت نام آن را وارد کنید :
Disallow: /blog/
توجه داشته باشید که فایل robots.txt نسبت به بزرگ و کوچک بودن حروف انگلیسی حساس بوده و آدرس صفحات باید به دقت وارد شوند.
هنگامی که شما شروع به ساخت فایل های پیچیده، یعنی شما تصمیم می گیرید که به عامل های مختلف کاربر دسترسی داشته باشید مشکلات می توانند شروع شوند، اگر شما توجه خاصی به تله های یک فایل robots.txt نداشته باشید. اشتباهات رایج شامل اشتباهات و دستورالعمل های متناقض است.
موتور جستجوی گوگل چندیدن نوع روبات مخصوص بخود دارد که معروفترین آنها با نام Googlebot شناخته می شود و وظیفه بررسی و ایندکس صفحات وب را برعهده دارد. روبات Gogglebot-image نیز مسئول بررسی تصاویر سایت ها و ایندکس کردن آنها می باشد.
مثالی از یک فایل robots.txt :
User-agent: *
Disallow: /temp/
User-agent: Googlebot
Disallow: /images/
Disallow: /temp/
Disallow: /cgi-bin/
با توجه به نحو ساده ی یک فایل robots.txt، شما همیشه می توانید آن را بخوانید تا ببیند آیا همه چیز خوب است یا خیر، اما می توانید از این سایت اعتبار سنج robots.txt استفاده کنید.
در این موارد، هنگامی که یک فایل robots.txt پیچیده دارید، به عنوان مثال شما دستورالعمل های مختلفی برای عوامل مختلف کاربر ارائه می دهید و یا لیستی از دایرکتوری ها و زیر شاخه ها را در اختیار ندارید، نوشتن فایل به صورت دستی می تواند یک درد واقعی باشد. اما نگران نباشید ابزارهایی وجود دارند که فایل را برای شما ایجاد می کنند.
معماری یکی از معروف ترین هنرهایی است که به زمان قبل از ساخت اهرام برمیگردد. همانطور که سالهای زیادی گذشت، خلق های پیچیده تر به جهان معرفی شد. امروزه هر کار معماری بیش از یک طراحی را نشان می دهد، هر کار دارای هویت، ویژگی های متمایز و معانی مختلف است.
حتی با تکنولوژی هایی که در اطراف زندگی مدرن ما قرار دارد، معماری همچنان رشد می کند. این که آیا این یک ساختمان مسکونی یا یک طبقه ساده از ساختمان است یا یک مقر دولتی است، هر کدام یک اثر هنری است از یک شاهکار معمار که ان را خلق کرده است.
فقط تعداد کمی از مردم می خواهند وقت خود را برای تحسین یک ساختمان یا درون آن صرف کنند. برخی ممکن است عکس بگیرند و این بیشترین چیزی است که آنها می خواهند. عکاسان معماری می دانند که چگونه ساختمان ها را به زندگی تبدیل می کنند.
معماری یک موضوع وسیع است، تقریبا در هر کجا که ما می رویم، ما را به نوعی معماری احاطه کرده است. از این رو، جای تعجب نیست که معماری یک موضوع محبوب در عکاسی است. علیرغم تنوع آن، تعدادی از اصول و تکنیک هایی وجود دارد که می توانند در بیشتر موقعیت ها مورد استفاده قرار گیرند.
هنگام عکسبرداری از معماری قدیمی، ترکیب ساده معمولا بهتر عمل می کند و زیبایی ساختمان را بهتر نشان می دهد. این معمولا کمک می کند تا برخی از مناظر اطراف را شامل شود تا زمینه را برای معماری فراهم کند. یک ترکیب ساده، احساس خوبی به ساختمان های قدیمی تر می دهد.
هنگام عکسبرداری از معماری مدرن می توانید از یک سبک مدرنتر و انتزاعی استفاده کنید. آزمایش با لنزهای زاویه ای بزرگ برای ایجاد دیدگاه شدید، و یا عکس از ساختمان از زوایای غیر معمول، همچنین به دلیل اینکه ساختمان های مدرن اغلب در نزدیکی یکدیگر قرار می گیرند، می توانید بدون ایجاد عکس های غیر طبیعی، بتوانید به راحتی بر روی ساختمان بچرخید.
سوال درباره اینکه آیا محیط اطراف ساختمان شما را نشان دهید یا نه بستگی به وضعیت و پیام مورد نظر شما دارد. از خودتان بپرسید که قرار دادن محیط اطراف ساختمان در چارچوب، عکس را بهتر می کند یا آن را تخریب می کند. اگر مناظر ساختمان عکس شما را احیا می کند، عکس های وسیع تری بگیرید، اما اگر محیط اطراف با پیامی که می خواهید منتقل کنید، متناسب نیست، آنها را قطع کنید.
به عنوان مثال یک ساختمان قدیمی در وسط یک شهر مدرن را در نظر بگیرید. اگر شما می خواهید این حس تلفیقی را ضبط کنید، مهم است که برخی از ساختمان های مدرن اطراف آن را شامل شود. اما اگر فقط بخواهید تا زیبایی قدیمی معماری را تأکید کنید، ساختمان های جدید تر از کادر عکس حذف می شوند.
عکاسی معماری معمولا به عنوان عکاسی است که از ساختمان ها و سازه های دیگر به عنوان سوژه ها استفاده می شود. این نوع دسته بندی های بسیاری دارد، اما دو نوع از رایج ترین و ساده ترین عکاسی معماری داخلی و بیرونی است.
نورپردازی بخش مهمی از عکاسی معماری است. نورپردازی های جانبی معمولا بهترین عکس های معماری را تولید می کند و همچنین سایه های طولانی و جالب را در سرتاسر ساختمان ایجاد می کند و جزئیات سطح آن را برجسته می سازد.
عکاسی معماری با جزئیات مقیاس کوچک پوشیده شده است که عکس های جذاب را به خود اختصاص می دهند، از پنجره های تزئینی گرفته تا پرده های تزئینی و…
در جستجوی این جزئیات باشید و به راحتی بر روی آن جزئیات عکس بگیرید تا شخصیت معماری را به تصویر بکشید.
هنگام عکسبرداری از معماری، در ذهن متبادر می شود که عکاسی معماری برابر با ساختمان است. بیشتر سازه های ساختمانی تحت چتر معماری قرار می گیرند – پل ها، برج ها، آسیاب های بادی، بناهای تاریخی، و حتی تیرهای چراغ برق زیرمجموعه این نوع عکاسی بشمار میروند. ببینید آیا می توانید عکس های جالبی پیدا کنید که بیشتر مردم آن ها از دست می دهند.
خرید اینترنتی (به انگلیسی: Online Shopping) نوعی خرید است که از طریق طراحی سایت فروشگاهی انجام میشود. از مهمترین و بزرگترین سایتهای خرید اینترنتی میتوان به سایتهای ebay و amazon اشاره کرد.
به دلیل موقع کرونا و شرایط حیاتی که با آن مقابله میکنیم فروشگاه های مواد غذایی که سیستم فروش به صورت انلاین را دارا بودن با وجود شرایط قرنطینگی رونق خود را از دست نداده بلکه رونق فروش پیدا کردند وروند افزایشی در کسب سود دهی پیدا کردند .
این قضییه نمایان گر کمبود یه سایت با طراحی درست وکامل به سرعت هرچه تمام تراست در واقع هرچه در روند اقدام آن سرعت بخشیم به نفع تیم فروشگاهی خود اقدام کرده ودربازار رقابتی خود را به بهترین ها تبدیل می کنیم.
اولین بار در سال ۱۹۹۱ تیم برنرز لی تجارت الکترونیک را پایهگذاری کرد و در سال ۱۹۹۴ که بانکداری آنلاین ایجاد شد، شرکت پیتزا هات اولین فروش اینترنتی خود را آغاز کرد. در همان سال شرکت نت اسکیپ ارتباط امنیت لایه انتقال (SSL) را ابداع و ایجاد کرد و خرید اینترنتی به وسیله این پروتوکل ایجاد شد. همچنین در همان سال کمپانی آلمانی اینترشاپ(Intershop) اولین سیستم فروش اینترنتی خود را ایجاد کرد. ۱۹۹۵ شرکت آمازون. کام و سال ۱۹۹۶ شرکت ئی بی نیز فعالیتهای خود را شروع کردند.
طراحی سایت فروشگاهی در واقع راحت ترین و کم هزینه ترین راه برای خرید بی واسطه برای مشتریان است. در این وب سایت ها به دلیل نداشتن محدودیت جا مدیران آن کسب و کار می توانند به راحتی تعداد بی شماری از محصولات خود را با عکس های با کیفیت و حرفه ای و گرافیک زیبا به بهترین نحو محصولات خود را به نمایش بگذارند.
همیشه هنگام خرید وقتی که شما وارد یک فروشگاه می شوید مهم ترین مسئله نحوه استقبال فروشنده از شما می باشد که این نکته درباره خرید شما از یک سایت فروشگاهی هم صدق می کند و مهم ترین نقش را در تصمیم گیری شما در خرید از آن وب سایت ایفا می کند.
سایتی که بر مبنای روانشناسی رنگ و چیدمان حرفه ای عناصر بصری آن وب سایت و محصولات آن و بر اساس استراتژی های دقیق خرید و امنیت کاربران در پرداخت آنلاین ایجاد شده باشد قطعا اعتماد و نظر مشتری را به خود جلب می کند.
مهم ترین صفحه یک وب سایت فروشگاهی صفحه اصلی آن سایت است که در واقع حکم ویترین آن فروشگاه را دارد. در این صفحه بایستی جشنواره های فروش، پیشنهادات ویژه، تخفیف ها و… به صورت کاملا استاندارد و زیبا از نظر دیداری ارائه شوند.
افراد به دلیل مشغله های روزمره خود و کمبود وقت و خستگی که به سبب دوندگی های شبانه روزی خود برای تامین معاش زندگی و خانواده دارند همواره از امکاناتی که به صورت انلاین ومجازی وجود دارد مثل؛ فروشگاه های مجازی و امکاناتی که از راه دور امکان پذیر است ونیاز به مراجعه حضوری ندارد استقبال میکنند و طرفدار آن هستند.
سایت های فروشگاه با متنوع بودن اجناس وکالا های خود به مراجعه کننده این امکان رامیدهند که بتواند از متنوع ترین اجناس کالاهای مورد نیاز خود را انتخاب کند .
پشتیبانی از سایت : پشتیبانی از سایت به صورت تمام وقت و بیست وچهارساعته و ارائه خدمت به مراجعین در هر تایمی که آنها بخواهند.
هر یک ازکاربران میتوانند در سایت فروشگاهی شما عضو شوند و از خدماتی که سایت به آنها ارائه میکند بهره مند شوند این خدمات شامل :
مقایسه محصولات مشابه از نظر کیفیت : به دلیل وجود تنوع محصولات مشابه و ایجاد برند های متفاوت از یک نوع محصول مقایسه محصولات به انتخاب کاربر کمک میکند .
نمودارقیمت محصولات : دراین نموداربه سیر افزایشی و کاهشی محصول میپردازیم .
اطلاع رسانی به ایمیل کاربر : درصورت اتمام موجودی از محصول مورد نیاز کاربر ، کاربر میتواند درخواست اطلاع رسانی کرده و فروشگاه در صورت شارژ موجودی به کاربر از طریق ایمیل و یا پیامک اطلاع رسانی کند .
نظرات کاربران : کاربران میتوانند از نظرات قبلی کسانی که از محصول استفاده کرده و از آن رضایت و یا نارضایتی داشتند استفاده کنند و از خریداری محصول اطمینان خاطر پیدا کرده وبا خیالی آسوده آن را تهیه کنند .
سازمان دهی محصولات : سازمان دهی محصولات از نظرمحصولاتی که فروش بیشتری داشتند ، محصولاتی که بازدید کننده بیشتری دارند ، محصولاتی که محبوبیت بالایی بین کاربران دارا هستند و….
گالری تصاویر از محصولات : عکاس هایی از محصولات که درسایت بارگذاری میشود برای شناخت محصول برای افرادی که برای اولین بار از آن میخواند استفاده کنند و برای سهولت درجست وجو و…
مشخصات محصول : مشخصات محصول شامل ؛ قیمت محصول ، فواید محصولاتی که غذایی هستند ، مارک وبرند محصول ، سایز محصول
کاربر با انتخاب موارد مورد نیاز خود در این سبد که به صورت خودکار جمع اقلام را برای کاربر محاسبه میکند و در اختیار وی میگذارد میتواند اقلام مورد نیاز خود را گزینش کند .
کاربر برای پرداخت اقلام خریداری شده خود میتواند به صورت الکترونیکی بااستفاده از رمز پویا خود مبلغ مربوطه را برای فروشگاه پرداخت کند .
کدهای تخفیف برای مشتریانی که به صورت ثابت از فروشگاه های انلاین استفاده میکنند و برای محصولاتی که موجودی آن ها به حداقل رسیده .
کاربران درصورت نیاز میتوانند از این امکان استفاده کرده وبا فروشگاه ارتباط نزدیک تری برقرار کنند .
کنترل موجودی محصولات و درصورت اتمام موجودی برای شارژ دوباره محصول اقدام میکنند .
ما تمامی امکاناتی که برای ایجاد یک طراحی سایت در کرج و طراحی سایت فروشگاهی حرفه ای مانند digikala به آن نیاز دارید به بهترین نحو برای طراحی سایت فروشگاهی شما پیاده سازی می کنیم. امکاناتی مانند :
با پیدایش شبکه های اجتماعی این باور به وجود آمده که نیاز به طراحی سایت شخصی کاهش پیدا کرده است. گرچه شبکه های اجتماعی می توانند یک رسانه آنلاین مناسبی برای معرفی افراد باشند، اما هیچ گاه کارایی یک وب سایت شخصی برای اطلاع رسانی متمرکز با دامنه اختصاصی افراد را ندارد.
در شبکه های اجتماعی چیزهایی که از لحاظ دیداری بسیار مهم هستند مانند قالب و گرافیگ آن به صورت غیر فابل تغییر و ثابت هستند و گرافیک و قالب مهم ترین گزینه در طراحی سایت شخصی بشمار می رود. گرافیک و نوع ساختار مهم ترین نکته برای معرفی برای معرفی افراد و زمینه کاری آن ها بشمار می رود.
در حال حاضر افراد بیشتر دیداری هستند، بنابراین بیشتر ترجیح می دهند هر چیزی را ببینند به جای اینکه بشنوند. برای معرفی تخصص و سوابق کاری رزومه شما ممکن است بگوید که شما چه تخصص و چه توانایی هایی را دارید، اما با سایت شخصی خود، شما می توانید کسی را به صورت مستقیم به وبلاگ ببرید و نشان دهد که چه چیزهایی کار شما را از از دیگران متمایز می کند. با نمونه ها، تصاویر پروژه هایی که در آن ها کار کرده اید، مقالاتی که نوشته اید، عکس های سمینار هایی که در آن ها شرکت کرده ایدو… در سایت شخصی شما می تواند بهترین و تکمیل ترین معرف شما و هویت آنلاین شما عمل کند.
طراحی سایت شخصی برای هنرمندان، عکاس ها، نویسندگان، مدیران، افراد جویای کار، استادان دانشگاه، وکلا، محققان،… برای معرفی فعالیت ها و آثار شخصی، رزومه و موارد دیگری که افراد سعی در نشان دادن آن ها به افراد دیگر دارند لازم است.
اگر شما در جستجوی شغل هستید و احساس نا امیدی می کنید؟ برای هر فرصت شغلی افراد بسیاری همچون شما برای آن فرصت شغلی با شما رقابت می کنند پس شما باید با یک روش خود را از دیگران متمایز کنید. بهترین راه این است که تصویر آنلاین خود را بسازید تا بتوانید راه موفقیت خود را در عصر اینترنت فراهم کنید. سلاح مخفی جدید شما ایجاد یک وب سایت شخصی است.
برای هر هنرمندی مهم ترین هدفی که دنبال می کند ارائه هنر او به بهترین شکل به دیگران است. بهترین و کم هزینه ترین راه برای ارائه آثار هنری قرار دادن آن ها به صورت صوت، تصویر و نوشتار درون وب سایت شخصی آن هنرمند می باشد، که نقش یک گالری بدون محدودیت فضا را برای ارائه آثار او ایفا می کند.
برای مدیران بهترین روشی که آنها را از دیگر مدیران متمایز می کند داشتن یک سایت شخصی و در دسترس قرار دادن نظرات آن ها درباره مسائل روز و سخنرانی ها و سمینارهایی که در رابطه با شغل آنها انجام داده است یا ایجاد راه های دسترسی متنوع و سریع توسط فرم های تماس درون سایت و یا موارد دیگر است.
تقریبا تمام افراد در هر شغلی که هستند برای پیشی گرفتن و ایجاد برندینگ شخصی به یک سایت شخصی احتیاج دارند. وب سایت شخصی بیل گیتس
با انواع مدل های طراحی سایت در کرج با تیم حرفه ای و مجرب دیزاینستان آماده ارائه خدمات به مشتریان عزیز هستیم.
از خصوصیت border برای تعیین مرزهای جدول در CSS استفاده می شود. مثال زیر مرز سیاه را برای عناصر
table(خود جدول) ، th(عنوان جدول) ، td(سلول های جدول) را مشخص می کند:
table, th, td {
border: 1px solid white;
}<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>خروجی :
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
توجه داشته باشید که جدول در مثال بالا دارای مرزهای دوگانه است. این به این علت است که هم جدول و عناصر th و td دارای مرزهای مجزا هستند.
خاصیت border-collapse تعیین می کند که مرزهای جدول باید به یک مرز واحد تبدیل شوند:
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid white;
}خروجی :
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
اگر فقط می خواهید یک مرز در اطراف جدول باشد، فقط ویژگی مرزی را برای table مشخص کنید:
table {
border: 1px solid white;
border-collapse: collapse;"
}خروجی :
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
عرض و ارتفاع یک جدول با ویژگی های width و height تعریف می شود. مثال زیر پهنای جدول را ۱۰۰٪ تعریف می کند و ارتفاع عنوان جدول را مقدار۵۰ پیکسل تعیین می کند :
table, td, th {
border: 1px solid white;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 50px;
}خروجی :
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
خصوصیت text-align تراز افقی (مانند چپ، راست، یا مرکز) محتوا را درون th یا td تنظیم می کند.
th {
text-align: center;
}خروجی :
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
خاصیت vertical-align تطبیق عمودی (مثل بالا، پایین، یا وسط) محتوا را در th یا td تنظیم می کند.
مثال زیر تراز عمودی متن را به پایین برای عناصر td تنظیم می کند:
td {
height: 50px;
vertical-align: bottom;
}خروجی :
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
برای کنترل فضای بین مرز و محتوا در یک جدول، از خصوصیت padding در th و td elements استفاده می شود :
th, td {
padding: 15px;
}خروجی :
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
مثال زیر رنگ پس زمینه و رنگ متن عناصر را مشخص می کند:
tr:nth-child(even){
background-color: #f2f2f2;
}
th {
background-color: #4CAF50;
color: white;
}خروجی :
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
ویژگی display مهمترین ویژگی CSS برای کنترل لایه ها است. این خصوصیات مشخص می کند که چگونه یک عنصر نمایش داده شود. هر عنصر HTML دارای مقدار پیش فرض display بسته به نوع آن عنصر است. مقدار display پیش فرض برای اکثر عناصر block یا inline است.
یک عنصر سطح block همیشه بر روی یک خط جدید شروع می شود و عرض کامل را در دسترس می گیرد (تا آنجا که ممکن است به سمت چپ و راست برسد).
مثال هایی از عناصر سطح block :
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>یک عنصر درون خطی در خط جدید شروع نمی شود و فقط به همان اندازه که لازم است، طول عرض ضفحه را می گیرد.
نمونه هایی از عناصر خطی inline :
<span>
<a>
<img>;Display: none معمولا با جاوا اسکریپت برای مخفی کردن و نمایش عناصر بدون حذف و بازسازی آنها استفاده می شود.
همانطور که گفته شد، هر عنصر یک مقدار display پیش فرض دارد. با این حال، شما می توانید آن را نادیده بگیرید.
تغییر عنصر block به یک inline یا برعکس می تواند مفید باشد برای اینکه صفحه به یک روش خاص نگاه شود و همچنان استانداردهای وب را دنبال کند. مثلا برای ایجاد منوی افقی لازم است که عناصر li به صورت inline در بیایند.
li {
display: inline;
}<ul>
<li><a href="#" target="_blank">HTML</a></li>
<li><a href="#" target="_blank">CSS</a></li>
<li><a href="#" target="_blank">JavaScript</a></li>
</ul>در display:none عنصر به همرا عرض و ارتفاعی که اشغال کرده بود از صفحف محو می شوند ولی در visibility:hidden خود عنصر از دید محو می شود ولی عرض و ارتفاعی را که از صفحه اشغال کرده بود در صفحه همچنان باقی می ماند.
طراحی سایت ریسپانسیو یک رویکرد است که طراح، یک وب سایت را ایجاد می کند که بسته به نوع دستگاه به خود را تغییر می دهد وعناصر سایت با توجه به اندازه صفحه نمایش به خوبی نمایش داده می شوند. این می تواند مانیتور رایانه ای بزرگ، لپ تاپ یا دستگاه هایی با صفحه نمایش های کوچک مانند تلفن های هوشمند و تبلت ها باشد.
این نوع طراحی وب سایت نمایش عناصر مانند طرح، اندازه متن، محتوا، ناوبری، و تصاویر به صورت خودکار تنظیم می شوند تا به وسیله ای که کاربر ترجیح می دهد با آن وب سایت را ببیند مناسب باشد.
چند بار یک صفحه وب را دیده اید که فقط روی دسکتات لپ تاپ خوب بوده، اما وقتی روی گوشی تلفن همراه خود آن را دیدید عناصر آن را بهم ریخته و نا معلوم مشاهده کردید؟ اگر وبسایت شما برای هر پلتفرم و دستگاه – تلفن همراه یا غیره – بهینه سازی نشده باشد، شما در معرض خطر، خطا قرار دادن یک تجربه متداول در اینترنت و از دست دادن یک مشتری و ناامید کردن آن هستید.
طراحی سایت ریسپانسیو به شما توانایی طراحی صفحات وب را می دهد که به راحتی در همه دستگاه ها سازگار است. این به این معنی است که وب سایت شما با موفقیت در تمامی سیستم عاملها، مشتری شما را درگیر می کند. طراحی سایت ریسپانسیو، طرح بندی، اندازه متن، محتوا و ابزارهای ناوبری را برای تطبیق با اندازه و قابلیت های مختلف صفحه نمایش، تنظیم می کند. قبل از اینکه شما حتی منتشر کنید، می توانید عملکرد پیش نمایش و بهینه سازی در انواع دستگاه ها را پیش بینی کنید.
هدف طراحی سایت ریسپانسیو، داشتن یک سایت، اما با عناصر مختلف است که در هنگام مشاهده بر روی دستگاه های اندازه های مختلف متفاوت است.
بیایید یک وب سایت سنتی “استاتیک” را در نظر بگیریم. برای مثال، هنگام مشاهده روی رایانه رومیزی، وبسایت ممکن است سه ستون را نشان دهد. اما زمانی که شما همان طرح را در یک تبلت کوچکتر مشاهده میکنید، ممکن است شما را مجبور کند به صورت افقی آن را تماشا کنید، چیزی که کاربران دوست ندارند. یا عناصر ممکن است از نظر پنهان یا خراب شده باشند.
روی یک صفحه نمایش کوچک گوشی هوشمند، وب سایت ها حتی برای دیدن چالش بیشتری دارند. تصاویر بزرگ ممکن است طرح را خراب کنند. اگر گرافیک سنگین باشد، ممکن است سایت ها برای تلفن های هوشمند دیر بارگزاریی شوند.
با این حال، اگر یک سایت از طراحی سایت در کرج ریسپانسیو استفاده کند، نسخه تبلت ممکن است به صورت خودکار تنظیم شود تا فقط دو ستون نمایش داده شود. به این ترتیب، محتوای قابل خواندن و حرکت آسان است. در یک گوشی هوشمند، ممکن است محتوا به عنوان یک ستون تنها ظاهر شود، شاید به صورت عمودی انباشته شود. تصاویر به جای تغییر ساختار یا قطع شدن عکس، تغییر اندازه می دهند.
نکته این است: با طراحی سایت ریسپانسیو، وب سایت به طور خودکار براساس دستگاهی که بیننده آن را می بیند تنظیم می شود.
سایت های ریسپانسیو از طرح بندی fluid استفاده می کنند. اگر سه ستون دارید و دقیقا نمی دانید که چقدر باید برای هر کدام از آنها فضا اختصاص دهید، باید با توجه به ستون های دیگر تصمیم بگیرید که چقدر گسترده باشد. مثلا ستون ۱ باید نیمی از صفحه را در نظر بگیرد، ستون ۲ باید ۳۰٪ و ستون ۳ باید ۲۰٪ باشد.
ماوس در مقابل لمس: طراحی برای دستگاه های تلفن همراه نیز مسئله ماوس و لمس را مطرح می کند. بر روی کامپیوترهای رومیزی، کاربر به طور معمول دارای یک موس برای حرکت و انتخاب موارد است. در تلفن هوشمند یا تبلت ها، کاربر عمدتا از انگشتان دست و لمس روی صفحه استفاده می کند. ممکن است با یک موس یک گزینه را با ماوس به راحتی انتخاب کنید ولی ممکن است با انگشت روی یک نقطه کوچک روی یک صفحه این مسئله به راحتی اتفاق نیفتد. برای همین طراح وب باید “لمس” را در نظر بگیرد.
گرافیک و سرعت دانلود: همچنین موضوع گرافیک، تبلیغات و سرعت دانلود وجود دارد. در دستگاه های تلفن همراه، ممکن است عاقلانه باشد که گرافیک کمتر از نمایشگرهای دسکتاپ را نمایش دهد به طوری که یک سایت برای بارگیری بر روی یک گوشی هوشمند، کند شود. ممکن است نیاز به تبلیغات بزرگتر بجای تبلیغات کوچکتر باشد.
برنامه ها و نسخه های تلفن همراه: در گذشته، ممکن است درباره ایجاد یک برنامه برای وب سایت خود فکر کرده باشید. مثلا یک برنامه IOS یا یک برنامه Android. یا شما یک نسخه تلفن همراه به طور خاص برای BlackBerry داشته باشید. امروزه با بسیاری از دستگاه های مختلف، ساخت برنامه ها و نسخه های مختلف برای هر دستگاه و پلتفرم سخت تر شده است.
مردم بیشتر از دستگاه های تلفن همراه استفاده می کنند. مطالعات اخیر نشان داده که بیش از ۶۰ درصد افراد برای مشاهده وب سایت از گوشی و یا تبلت استفاده می کنند.
ترافیک خود را بررسی کنید و ممکن است فقط از تعداد بازدیدکنندگان از طریق دستگاههای تلفن همراه نسبت به کامپیوترها در وبسایت خود شوکه شوید(در Google Analytics شما “مخاطبان” را در سمت چپ، سپس “موبایل” را انتخاب کنید تا میزان ترافیک را از دستگاه های تلفن همراه مشاهده کنید.)
شما ممکن است فکر کنید که سایت شما چیزی ارزشمند برای هک شدن ندارد، اما وب سایت ها همیشه در معرض خطر قرار دارند و باید امنیت وب سایت آن ها تامین شود. هکرها به طور مرتب توسط اسکریپت های خودکار نوشته می شوند و در تلاش برای سوء استفاده از مسائل امنیتی وب سایت شناخته شده در نرم افزار انجام می شود.
این ممکن است به نظرمسئله آشکاری باشد، اما اطمینان حاصل کنید که تمام نرم افزار را به روز نگه دارید، در حفظ امنیت سایت شما حیاتی است. این در مورد هر دو سیستم عامل سرور و هر نرم افزاری که ممکن است در وب سایت شما مانند CMS یا انجمن استفاده شود صدق می کند. هنگامی که سوراخ های امنیتی وب در نرم افزار یافت می شوند، هکرها سریعا تلاش می کنند تا از آنها سوء استفاده کنند.
اگر از یک راه حل مدیریت شده استفاده می کنید، نیازی به نگرانی در مورد استفاده از به روز رسانی های امنیتی برای سیستم عامل نیست زیرا شرکت میزبان باید از این امر مراقبت کند.
اگر از نرم افزار شخص ثالث در وب سایت خود مانند CMS استفاده می کنید، باید اطمینان حاصل کنید که میزبان شما سریعا برای اعمال هر گونه باگ امنیتی دست بکار می شود.
بسیاری از توسعه دهندگان از ابزارهایی مانند Composer، npm یا RubyGems برای مدیریت وابستگی های نرم افزاری خود استفاده می کنند و آسیب پذیری های امنیتی که در بسته ای که به آن وابسته است را ایجاد می کنند. اطمینان حاصل کنید که شما وابستگی خود را به روز نگه دارید و از ابزارهایی مانند Gemnasium برای دریافت اطلاعیه های خودکار زمانی استفاده می کنید.
حملات SQL Injection زمانی است که مهاجم از یک فیلد فرم وب یا پارامتر URL برای دسترسی به پایگاه داده شما استفاده می کند. هنگامی که شما از استاندارد Transact SQL استفاده می کنید، به راحتی می توانید کد ناقص را در query وارد کنید که می تواند برای تغییر جداول، اطلاعات و حذف داده ها مورد استفاده قرار گیرد. شما می توانید به راحتی این کار را همیشه با استفاده از پرس و جو های پارامتریک انجام دهید، اکثر زبان های وب این ویژگی را دارند و پیاده سازی آسان است.
این کوئری را در نظر بگیرید:
"SELECT * FROM table WHERE column = '" + parameter + "';"اگر یک مهاجم پارامتر URL را برای عبور در ‘orا’ ۱ ‘=’ ۱ تغییر داد، این باعث می شود که پرس و جو به شکل زیر باشد:
"SELECT * FROM table WHERE column = '' OR '1'='1';"از آنجا که ‘۱’ برابر با ‘۱’ است، این اجازه می دهد تا مهاجم یک query اضافی را به انتهای دستور SQL اضافه کند که اجرا شود.
شما می توانید این query را با امن کنید. به عنوان مثال، اگر از MySQLi در PHP استفاده می کنید این باید تبدیل شود به :
$stmt = $pdo->prepare('SELECT * FROM table WHERE column = :value');
$stmt->execute(array('value' => $parameter));اسکریپت (Cross-site scripting (XSS حملات جاوا اسکریپت را به صفحات شما تزریق می کند و سپس در مرورگرهای کاربران شما اجرا می شود و می تواند محتوای صفحه را تغییر دهد یا اطلاعات را مهاجم به عقب بر گرداند. به عنوان مثال، اگر شما نظر خود را در یک صفحه بدون تایید نشان می دهید، مهاجم ممکن است نظراتی حاوی برچسب های اسکریپت و جاوا اسکریپت را ارائه کند، که می تواند در هر مرورگر دیگر کاربر اجرا شود و کوکی ورود به سیستم را سرقت می کند. شما باید مطمئن شوید که کاربران نمی توانند مطالب جاوااسکریپت فعال خود را در صفحات شما تزریق کنند.
این یک نگرانی خاص در برنامه های کاربردی وب مدرن است که در آن صفحات در حال حاضر عمدتا از محتوای کاربر ساخته شده اند و در بسیاری از موارد HTML را تولید می کنند که سپس توسط چارچوب هایی مانند Angular و Ember نیز تفسیر می شود. این چارچوب ها بسیاری از محافظت های XSS را فراهم می کنند، نه تنها تزریق جاوا اسکریپت به HTML موثر است.
کلید در اینجا این است که تمرکز کنیم که چگونه محتوای کاربر ایجاد شده شما می تواند از حد انتظارات شما فرار کند و توسط مرورگر تفسیر شود به عنوان چیزی دیگری که شما در نظر داشتید. این مشابه دفاع از SQL Injection است. هنگامی که به صورت پویا HTML تولید می کنید، از توابع استفاده کنید که صریحا تغییرات مورد نظر شما را انجام می دهند (به عنوان مثال استفاده از elements.setAttribute و element.textContent که به طور خودکار توسط مرورگر escape می شود(به جای تنظیم عنصر.innerHTML با دست)، یا از توابع استفاده شود(به جای پیوند دادن رشته یا تنظیم محتوای خام HTML).
یکی دیگر از ابزارهای قدرتمند در جعبه ابزار مدافع XSS، سیاست امنیتی محتوا (CSP) است. CSP یک سرصفحه است که سرور شما می تواند به مرورگر بازگردد تا محدودیت نحوه و کد جاوا اسکریپت را در صفحه اجرا کند، مثلا برای غیرفعال کردن هر اسکریپتی که در دامنه شما میزبانی نمی شود، جاوا اسکریپت را غیر فعال کرده یا ()eval را غیرفعال کند.
مراقب اطلاعاتی که در پیام های خطایی که به کاربر داده می شود باشید. فقط خطاهای ورود اطلاعات اشتباه کاربر را برای آن ها ارائه کنید تا اطمینان حاصل کنید که اسرار موجود در سرور شما نشت نکند (به عنوان مثال کلید API یا کلمه عبور پایگاه داده). جزئیات کامل خطاها را ارائه ندهید، زیرا این می تواند حملات پیچیده مانند QL Injection را بسیار ساده تر کند. فقط به کاربران اطلاعاتی را که نیاز دارند نشان دهید.
اعتبار سنجی همیشه باید هم در مرورگر و هم طرف سرور انجام شود. مرورگر می تواند خرابی های ساده مانند فیلدهای اجباری خالی نباشد و یا هنگامی که شما متن را در فیلدهای اعداد وارد می کنید کنترل کند. باید اطمینان حاصل کنید که این اعتبارسنجی و اعتبارسنجی عمیقتر در سمت سرور انجام شود عدم این کارمی تواند به کد مخرب یا کد اسکریپت در پایگاه داده وارد شود یا موجب ایجاد نتایج نامطلوب در وب سایت شما شود.
همه می دانند که باید از کلمه عبور پیچیده استفاده کنند، اما این بدان معنی نیست که همیشه انجام می شود. مهم است که از کلمه عبور قوی برای سرور و ناحیه وبسایت خود استفاده کنید، اما برای حفظ امنیت حسابهای خود، اصلاحات لازم را برای استفاده از رمز عبور خوب انجام دهید.
همانطور که کاربران ممکن است آن را دوست نداشته باشند، اجرای الزامات رمز عبور مانند حداقل هشت کاراکتر، از جمله نامه بزرگ و شماره، به حفظ اطلاعات خود در طولانی مدت کمک می کند.
رمزهای عبور همیشه باید به عنوان مقادیر رمزگذاری ذخیره شوند، ترجیحا با استفاده از یک الگوریتم هش کردن یک طرفه مانند SHA، استفاده از این روش به این معنی است که شما در حال اعتبار سنجی از کاربران هستید که همیشه مقادیر رمزگذاری شده را مقایسه می کنید.
در صورت هک کردن و سرقت گذرواژه های شما، استفاده از گذرواژه های hash شده می تواند به محدودیت خسارت کمک کند، زیرا امکان رمزگشایی آنها وجود ندارد.
اجازه دادن به کاربران برای آپلود فایل ها به وب سایت شما می تواند یک خطر امنیتی وب سایت بزرگ باشد. خطر این است که هر فایل آپلود شده، هر چند بی خطر می تواند یک اسکریپت داشته باشد که هنگام اجرای آن بر روی سرور شما، وب سایت شما را به طور کامل باز می کند و باعث بهم ریختگی آن می شود.
اگر شما امکان آپلود فایل داشته باشید، باید تمام فایل ها را با سوء ظن زیاد درمان کنید. اگر شما به کاربران اجازه آپلود تصاویر را می دهید، نمی توانید بر روی فرمت فایل یا نوع MIME تکیه کنید تا تأیید شود که فایل یک تصویر است زیرا این ها به راحتی می توانند جعلی باشند. اکثر فرمت های تصاویر اجازه ذخیره یک بخش نظر را می دهند که می تواند شامل کد PHP است که می تواند توسط سرور اجرا شود.
پس چه کاری می توانید انجام دهید تا از این کار جلوگیری شود؟ در نهایت می خواهید کاربران را از امکان اجرای هر فایل ای که آپلود می کنید متوقف کنید. به طور پیش فرض، سرورهای وب سعی نمی کنند فایل ها را با پسوند های تصویری اجرا کنند، اما صرفا بر روی چک کردن پسوند فایل به عنوان یک فایل با نام image.jpg.php شناخته شده نیست.
برخی از گزینه ها عبارتند از تغییر نام فایل در آپلود برای اطمینان از فرمت فایل صحیح، و یا برای تغییر مجوز فایل، به عنوان مثال، chmod 0666، بنابراین نمی تواند اجرا شود. شما می توانید یک فایل .htaccess ایجاد کنید که تنها اجازه دسترسی به تنظیمات فایل را میدهد.
deny from all
<Files ~ "^\w+\.(gif|jpe?g|png)$">
order deny,allow
allow from all
</Files>در نهایت، راه حل توصیه شده جلوگیری از دسترسی مستقیم به فایل های آپلود شده به طور کامل است. به این ترتیب، هر فایل ارسال شده به وب سایت شما در یک پوشه خارج از web root یا در پایگاه داده به عنوان یک حباب ذخیره می شود. اگر پرونده های شما به طور مستقیم در دسترس نباشد، شما باید یک اسکریپت برای استخراج فایل ها از پوشه خصوصی (یا یک متد HTTP در NET.) ایجاد کنید و آنها را به مرورگر ارسال کنید. برچسب های تصویر از ویژگی src پشتیبانی می کند که یک URL مستقیم برای یک تصویر نیست، بنابراین ویژگی src شما می تواند به اسکریپت تحویل فایل شما اشاره کند که نوع محتوای صحیح آن را در هدر HTTP تنظیم می کند. مثلا:
<img src="/imageDelivery.php?id=1234" />
<?php
// imageDelivery.php
// Fetch image filename from database based on $_GET["id"]
...
// Deliver image to browser
Header('Content-Type: image/gif');
readfile('images/'.$fileName);
?>بیشتر ارائه دهندگان میزبانی با پیکربندی سرور برای شما مقابله می کنند، اما اگر شما وب سایت خود را در سرور خود میزبانی می کنید، چند چیز وجود دارد که باید بررسی کنید.
اطمینان حاصل کنید که یک فایروال نصب دارید و همه پورت های غیر ضروری را مسدود می کنید. در صورت امکان، (DMZ (Zone Demilitarized Zone تنها اجازه دسترسی به پورت ۸۰ و ۴۴۳ از دنیای خارج را فراهم می کند. اگر چه شما نمی توانید از طریق یک شبکه داخلی به سرور دسترسی داشته باشید، این ممکن است ممکن نباشد زیرا شما باید پورت ها را باز کنید تا اجازه آپلود فایل ها را داشته باشید و از راه دور به سرور خود بر روی SSH یا RDP وارد شوید.
اگر اجازه می دهید فایل ها از طریق اینترنت آپلود شوند، از روش های حمل و نقل امن به سرور خود مانند SFTP یا SSH استفاده کنید.
در نهایت، محدود کردن دسترسی فیزیکی به سرور خود را فراموش نکنید.
HTTPS یک پروتکل است که برای ارائه امنیت در اینترنت استفاده می شود. HTTPS تضمین می کند که کاربرانی که در حال صحبت کردن با سرورهایی هستند هیچ کس دیگری نمی تواند محتوایی را که در حال ردوبدل کردن هستند را ببیند یا تغییر دهد.
اگر هر چیزی را که کاربران شما ممکن است بخواهند خصوصی داشته باشند، بسیار توصیه می شود از HTTPS تنها برای ارائه آن استفاده کنید. یک فرم ورود اغلب یک کوکی را برای مثال ارسال می کند که با هر درخواست دیگر به سایت شما ارسال می شود که یک کاربر وارد شده شده است و برای تایید این درخواست ها استفاده می شود. مهاجم این سرقت را قادر می سازد به طور کامل یک کاربر تقلید و جلسه ورود به سیستم خود را بگیرد. برای شکست دادن این نوع حملات، تقریبا همیشه باید از HTTPS برای کل سایت خود استفاده کنید.
به طور قابل توجهی گوگل اعلام کرده است که اگر از HTTPS استفاده می کنید، آنها را در رتبه بندی جستجو افزایش دهید، و این به نفع SEO نیز خواهد بود.
هنگامی که شما فکر می کنید تمام کارها را انجام می دهید، زمان آن است که بتوانید امنیت وب سایت خود را آزمایش کنید. موثرترین راه برای انجام این کار از طریق استفاده از برخی از ابزارهای امنیتی وب سایت است که اغلب به عنوان تست نفوذ خوانده می شود.
بسیاری از محصولات تجاری و رایگان برای کمک به شما در این زمینه وجود دارد. آنها با استفاده از اسکریپت هکرها به همان شیوه عمل می کنند که در آن همه افراد سوء استفاده می کنند و تلاش می کنند سایت خود را با استفاده از برخی از روش های ذکر شده قبلی مانند SQL Injection تطبیق دهند.
یکی از عوامل بسیار مهم در seo و الگوریتم موتور جستجو گوگل مانند عوامل موثر دیگری مانند بک لینک ، محتوا و…، سن نام دامنه است. دامنه هایی که طول عمر بالایی دارند نمره رکورد بالاتری در گوگل به خود اختصاص می دهند.
به طور مثال، در جهان کسب و کار می بینیم که در حالی یک فروشگاه جدید در شهر با نوآوری هایی تاسیس می شوند، ولی با اینحال مردم اعتماد بیشتری به کسب و کاری که برای مدت طولانی ایجاد شده اند بیش از یک کسب و کار جدید است. همین امر برای وب سایت ها هم صدق می کند.
دو مورد که در سن نام دامنه در نظر گرفته می شود عبارتند از:
طول عمر دامنه از زمانی است که ما نام آن دامنه را ثبت می کنیم و طول عمر وب سایت زمانی است که بر روی یک دامنه یک وب سایتی را آپلود می کنیم و درون آن محتوا و مطالب خود را بارگذاری می کنیم.
در آخرین بروزرسانی گوگل که جستجوگرها با نام Jagger Update آن را می خوانند، برخی از تغییرات بزرگ دیده شده، اهمیت دادن به سن است، سن لینک های ورودی، سن محتوای وب و تاریخ ثبت دامنه می باشد. در واقع چیزهای زیادی وجود دارد که در این آخرین به روز رسانی تغییر یافتند، اما از آنجایی که ما در مورد سن دامنه صحبت می کنیم تنها با این مسئله خاص برخورد می کنیم. ما در مقالات دیگر در مورد عوامل دیگر که می خواهید اطلاع داشته باشید به طور مثال از اینکه گوگل در معیارهای ارزیابی وب سایت های خود در اینترنت تغییر کرده است، بیشتر صحبت خواهیم کرد.
یکی از راه هایی که گوگل برای کمینه کردن اسپم موتور جستجو استفاده می کند، دادن وب سایت های جدید به یک دوره انتظار ۳ تا ۴ ماه قبل از دادن هر گونه رتبه (PageRank) می باشد. از آن به عنوان “sandbox effect” اشاره شده است، دلیل آن این است که گوگل میخواهد ببیند آیا این سایت ها در مورد ماندن در اینترنت جدی هستند یا خیر. sandbox effect برای پرتاب همه سایت های جدید به یک گودال و اجازه دادن به رقابت آنها با یکدیگر، دور از همه سایت های بزرگ است. سپس، هنگامی که سایت های جدید رشد می کنند، به این ترتیب، آنها مجاز به ورود به طبقه بندی بزرگسالان می شوند.
برای کسانی که از وب سایت های جدید استفاده می کنند، ممکن است در با شنیدن این خبر ناامید شوند، اما نگران نباشید، بعضی کارهایی می توانید انجام دهید تا دوره گودال sandbox effect به پایان برسد، مانند تمرکز بر استراتژی های پشتیبان خود، تبلیغ سایت خود را از طریق پرداخت در google adwords، مقالات، RSS ها و یا روش های دیگر، با این اقدامات می توانید خود را با PageRank بزرگ شروع کنید!
گرچه سن دامنه یک عامل است، اما منتقدان معتقدند که این معیاردر الگوریتم موتورهای جستجو وزن کمی دارد. از آنجا که سن دامنه شما چیزی است که شما روی آن کنترل ندارید، لزوما به این معنی نیست که سایت شما به خوبی در صفحه نتایج موتورهای جستجو (SERPs) رتبه بندی نخواهد شد و به این معنی است که شما باید سخت کار کنید تا محبوبیت سایت خود را بالا ببرید و تمرکز کنید بر عواملی که می توانید کنترل کنید، پیوندهای ورودی و نوع محتوایی را که در وبسایت شما ارائه میدهید، در این زمینه بسیار مهم است.
چندین چیز وجود دارد که می توانید انجام دهید تا اطمینان حاصل کنید که سایت شما به علت سن دامنه از دست نرفته است:
از آنجایی که سایت های قابل اعتماد می بایست موجی از آینده باشند، فاکتور در سن دامنه یک ایده خوب است.