Messages

My pages

الگوی مقاله‌های بلاگ

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

seo-video

Discription.

seo-keyword

Discription.

widget-load-test

Discription.

تمام ویجت‌هایی که برای بلاگ استفاده شده، بر اساس تم سایت ۱۲۳

Discription.

seo-text

Discription.

seo-image

Discription.

تماس با ما

Discription.

template6

Discription.

ویراوب|آموزش ساخت صفحه جدید

Discription.

دامنه

Discription.

template3

Discription.

template2

Discription.

template5

Discription.

template4

Discription.

template7

Discription.

template1

Discription.

website-template

Discription.

seo-education

Discription.

editor-widget-slider

Discription.

seo-page

Discription.

شروع کار با گوگل انالاتیک

Discription.

editor-wedget-text

Discription.

صفحه اصلی سایت

Discription.

editor-widget-link

Discription.

editor-widget-image

Discription.

widget-button

Discription.

widget-group

Discription.

seo-widget-image

Discription.

حریم خصوصی

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

Pages

تست مبتنی بر خصوصیت‌ها با استفاده از JSVerify

Short description of the page

Property based testing with JS Verify

Short description of the page

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

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

How to replace the First Letter of a String with upper/lower case in JavaScript

How to replace the First Letter of a String with upper/lower case in JavaScript. A small and practical tutorial on building code for this handy little function.

Pricing | ViraWeb123

Short description of the page

Benefits of SaaS in Hotel Management Software

SaaS Hotel Management Software has lowered the barrier to entry for small- to mid-size independent hotels, allowing them the opportunity to take advantage of ‘new’ technology that was once only available to large hotel brands with deep pockets. For small, independent hotel or a small B&B, cloud hotel software offers many advantages and opportunities – here are such benefits;

چرا به یک نقشه کسب و کار نیاز داریم؟

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

Why we need a business plan?

In this post, I share the most important reasons for cofounders and startups to design a business plan, and I hope that it will be useful to you. I sincerely welcome any comments or reviews from you.

The 11 Most Popular Hotel Management Software Solutions for Small Hotels Compared

Think about it: is there anything worse than buying the wrong size pants? You spend 15 minutes trying to squeeze into them, huffing and puffing the whole time. And even if you’re successful, you feel like you’re being strangled all day long. For hotels, finding the right software fit is especially important, because without a suitable software solution, you’re wasting time and money—big things that take you away from your customers and keep you from providing a stellar guest experience.

The 11 Most Popular Hotel Management Software Solutions

Think about it: is there anything worse than buying the wrong size pants? You spend 15 minutes trying to squeeze into them, huffing and puffing the whole time. And even if you’re successful, you feel like you’re being strangled all day long. For hotels, finding the right software fit is especially important, because without a suitable software solution, you’re wasting time and money—big things that take you away from your customers and keep you from providing a stellar guest experience.

Raspberry Pi

رزبری پای (Raspberry Pi) یک رایانه تک-برد (Single-board computer) در اندازه یک کارت اعتباری است که بنیاد Raspberry Pi آن را ساخته‌ است تا آموزش علوم رایانه را در مدرسه‌ها تشویق کند.

کنسول جستجوی گوگل (GSC) چیست و چگونه از آن استفاده کنیم؟

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

Introducing Google Marketing Platform

Of course, changes in technology have meant changes for digital marketers. There’s been an explosion of channels, formats and data. Consumers are also more aware of how they’re being marketed to and how their data is being used—and they want more control.

خبرنامه اردیبهشت | ویراوب

Short description of the page

May newsletter

Short description of the page

ویژگی‌های صفحه «درباره ما» درسایت

این مقاله به بررسی نکاتی می‌پردازد که در طراحی صفحه «درباره ما» در سایت اهمیت اساسی دارند.

آناتومی صفحات سایت: چگونه یک صفحه از سایت را طراحی کنیم؟

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

Does SaaS Save Money?

SaaS rescues money for new businesses and marketers appreciate the features and benefits of SaaS(Software as a Service) such as scalability, accessibility, and availability. But how much money does it save for a company? Teams which formed cloud-based infrastructures designate that, while they are so pleased with their decision to go to the cloud, there can be notable costs associated with SaaS. In this post, I`ll show you how much money does a customer saved in our SaaS.

10 top online marketing platforms

Each agency and online marketing professionals have their own techniques and tools. However, when you are in the online marketing business, at some point there are some software you have to you use or at least try.

ViraWeb123

Short description of the page

Why Would I Use A Digital Marketing System Instead Of A Digital Agency?

One of the current topics in hotel internet marketing is around the advancement of technology based solutions to manage online marketing. There are more than a few digital marketing agencies that are scrambling to protect a business that has been pretty lucrative for them over the year

6 راه برای بهبود بازاریابی محتوی

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

The effect of prerender services on modern website design & content marketing

Recently Google introduced a built-in capability to run javascript and render the pages in a crawler. Howe ever this is the same as Halt problem, and it is not possible to find out how long does it take to render the page completely.

Widgets used in blog

All blog widgets are designed and shared in this content. Do not use in any other application.

Blog post tempate

A template used to design a new post on the blog. Do not use in any other application.

Blog page template

All pages in blog is desigend based on this template

Widgets of site

All widgets used in main site is designed and shared in this content.

Site news templates

Template of news in our site. All news must use this template.

Site page template

The template of all site pages.

ویجت‌های سایت

تمام ویجت‌هایی که برای طراحی توی سایت اصلی استفاده شدن توی این صفحه هستن. این ویجت‌ها بین همه به اشتراک گذاشته شدن.

Home Login Logout

آناتومی صفحات سایت: چگونه یک صفحه از سایت را طراحی کنیم؟

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

آناتومی صفحات سایت: چگونه یک صفحه از سایت را طراحی کنیم؟


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

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

  • قسمت بالای صفحه یا Header
  • نوار نشان‌دهنده‌ی مسیر یا Navigation
  • ناحیه‌ی محتوا Content area
  • نوارهای کناری یا Sidebars
  • پاورقی یا اصطلاحاْ Footer
  • پشت‌زمینه‌ها یا Backgrounds

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

شکل زیر نمونه‌ای از آناتومی سایت می‌باشد.

آناتومی صفحه‌های وب سایت در دید کلی

قسمت بالای صفحه یا Header

هدر یا سرآیند یک صفحه وب سایت در طراحی سایت

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

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

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

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


لینک‌های راهبری یا نویگیشن (Navigation)

نوار بقل یا سایدبار شامل لینک‌های اصلی سایت

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


انواع نویگیشن‌ها

انواع مختلفی ازنویگیشن‌ها وجود دارد که در ادامه به چند مورد اشاره می‌کنیم:

نویگیشن سلسله مراتبی (Hierarchical website navigation)

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

نویگیشن سراسری یا کلی (Global website navigation)

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

نویگیشن محلی یا (Local website navigation)

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


ناحیه‌ی محتوا Content area

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

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


نوارهای کناری یا Sidebars

نوارهای کناری موسوم به Sidebarsها نوارهایی هستند که در یک یا دو طرف بدنه اصلی می‌آیند و لینک‌های مستقیمی به سایر مطالب سایت دارند (قسمت <aside> از تصویر اول را نگاه کنید). این لینک‌ها برای سهولت در دسترسی کاربرد دارند و کاربر از طریق آن‌ها می‌تواند اطلاعات بیشتری از محتوای دیگر صفحات بدست آورد. پربازدیدترین‌ها، مطالب اخیر، پرفروش‌ترین‌ها، بهترین‌ها و امثال آن عناوین بخش‌های مختلف در نوارهای کناری هستند.


پاورقی یا اصطلاحاْ Footer

پاورقی یا فوتر یک صحفه سایت در طراحی سایت

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

پشت‌زمینه‌ها یا Backgrounds

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



نکات دیگر

توجه کردن به طیف کاربران و توقعات آن‌ها

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

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

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

به شکل زیر توجه کنید:

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


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


اما معیار خوب بودن طراحی یک صفحه از سایت چیست؟

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

LocalTheme

Help