بهزاد مقتدر

بهزاد مقتدر

چند مورد از برترین روندهای تجربه کاربری (UX : User Experience) در طراحی سایت که طراحان وب باید درباره آن ها بداند :

آیا سایت یا اپلیکیشنی که توسعه داده اید ، رضایت و خوشحالی کاربران را به همراه دارد یا اینکه آن ها از استفاده از وب سایت و وب اپلیکیشن شما هیچ لذتی نمی برند ؟

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

برای پاسخ به این سوالات و کسب اطلاعات بیشتر در زمبنه تجربه کاربری ux  در طراحی سایت با سئو سایت و پشتیبانی سایت وب نوش همراه باشید


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

طراحی وب سرویس ، یکی از مهمترین روندهای تجربه کاربری UX در طراحی سایت

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

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

طراحی سایت UX محور یا طراحی سایت UI محور؟

همانطور که طراحی وب سرویس با طراحی وب سایت روز به روز همپوشانی بیشتری پیدا می کند ، همه طراحان وب باید با اساس و مفهوم UX (تجربه کاربری) آشنا شوند و آن را در کارشان مد نظر داشته باشند . امروزه بنا به دلائل متعددی روش طراحی سایت UX از روش طراحی سایت UI محور رواج بیشتری یافته است و از اولویت بالاتری برخوردار شده است :

تجربه کاربری UX در طراحی سایت

تجربه کاربری UX در طراحی سایت

تنوع بیشتر در قالب سایت ها :

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

الگوهای قابل اتکاء در طراحی سایت UI :

هدف الگوهای طراحی UI (User Interface) این است که کاربری سایت برای کاربران ساده تر شود . افزایش تعداد این الگوهای طراحی واسط کاربری به این معناست که طراحان وب باید در استفاده از آن ها بسیار به تجربه کاربری کاربران از استفاده و بازدید سایتشان دقت کنند .

افزایش کاربری موبایل وب :

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

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

تجربه کاربری UX در طراحی سایت

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

میکرو اینتراکشن ها در طراحی سایت

تجربه کاربری UX در طراحی سایت

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

طراحی سایت برای تمام دستگاه ها - طراحی سایت ریسپانسیو

تجربه کاربری UX در طراحی سایت

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

تاثیر مستقیم طراحی سایت بر اساس ux تجربه کاربری بر روی سئو سایت

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

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

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

با وب نوش وب را بنوشید

دوشنبه, 11 مرداد 1395 ساعت 19:47

فریم ورک (Framework) چیست ؟

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

فریم ورک چیست ؟

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

 

فریم وردک در طراحی سیات

 

در دنیای طراحی سایت ، برای اینکه یک تعریف قابل فهم تر ارائه کنم ، فریم ورک یک فایل است که محتوای آن مجموعه ای از کدها و اسکریپت ها در زبان های مختلف توسعه وب سایت از جمله HTML , CSS , JS , PHP , … می باشد که می توان از این کدهای آماده برای حل کردن برخی مشکلات و دشواری های توسعه وب سایت استفاده کرد و یا حتی یک وب سایت را به طور کامل با استفاده از آن ها ایجاد و راه اندازی کرد .

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

چند نوع فریم ورک به طور کلی وجود دارد ؟

به طور کلی می توان فریم ورک ها را به دو دسته تقسیم کرد : فریم ورک های توسعه Back-end و فریم ورک های توسعه Front-end وب سایت .
این مسئله خیلی مهم است که ما بدانیم فریم ورک های یک ایده مفهومی هستند : یک کیت (ابزار) استاندارد از پیش آماده شده برای استفاده و پیش برد کار . مفهوم یک فریم ورک می تواند برای پروسه های متفاوت در بستر وب مورد استفاده قرار گیرد : مثلا در لایه برنامه نویسی که با استفاده از زبان PHP وب سایت را به دیتابیس متصل می کنیم و محتوا و داده های موجود را در صفحات سایت به نمایش در می آوریم ؛ یا در لایه طراحی که با باید با استفاده از اسکریپت HTML به همراه استایل هایی که با CSS برای آن تعریف کردیم ، محتوای سایت را به زیبایی در انواع بروزرها برای کاربران به نمایش بگذاریم .

فریم ورک های مربوط به توسعه Front-end (فریم ورک های CSS)

فریم ورک های front-end معمولا متشکل از بسته های شامل فایل های ساختاری و فولدرهای حاوی کدهای استاندارد شده (HTML , CSS , JS , …) هستند .

اجزاء این فریم ورک ها به طور معمول 

  • منبع کد CSS برای ایجاد یک گرید (grid) : این تکه کد به توسعه دهنده اجازه می دهد تا عناصر مختلف صفحه وب سایت را به راحتی و آنگونه که می خواهد به صورت جدول مانند چیدمان کند .
  • تعریف استایل های تایپوگرافی برای عناصر HTML
  • ارائه راه حل هایی برای مواردی از اسکریپت ها که در بروزرها پشتیبانی نمی شوند تا استایل سایت آنگونه که مد نظر طراح است در هر بروزری دیده شود .
  • ایجاد کلاس های استاندارد CSS که می توان از آن ها برای استایل دادن به اجزاء واسط کاربری (UI) به طور پیشرفته استفاده کرد .

 

فریم وردک در طراحی سیات

 

درباره فریم ورک های ریسپانسیو : اخیرا تکنیک های طراحی سایت ریسپانسیو - روشی که در آن توسعه دهنده وب سایت با تعریف ابعاد مختلف نمایشگرها توسط مدیا کوئری ها (media query) در CSS سایت ، سایت را اصطلاحا واکنش گرا یا mobile-friendly می سازد - به قدری افزایش داشته که توسعه دهندگان برای راحتی کار یک سری فریم ورک ریسپانسیو ایجاد کرده اند . به این طریق طراحی سایت ریسپانسیو نیز با استفاده از راه حل های ارائه شده توسط این فریم ورک ها ، بسیار ساده تر قبل شده است .

انتخاب فریم ورک (به تناسب نیاز پروژه) در طراحی سایت

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

فریم ورک های ساده CSS

به آن ها گرید سیستم (grid system) نیز گفته می شود . آن ها استایل هایی با سیستم ستونی ارائه می کنند تا توسعه دهنده با توجه به طرح سایت ، عناصر صفحه را مانند عناصر یک جدول چیدمان کند .

چند نمونه از این فریم ورک های گرید سیستم عبارت اند از :

1140 CSS Grid , Golden Grid System , Mueller Grid System , Responsive Grid System Graham Miller , Titan , Responsive Grid System Denis LeBlanc , Less Framework 4 , Gridiculo , Columnal , Toast , Ingrid , 960 Grid System , Base , Susy , …

فریم ورک های کامل در بحث طراحی سایت

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

چند نمونه از این فریم ورک های کامل عبارت اند از :

BootStrap , Foundation 3 , Skeleton , YAML 4 , Tuktuk , Gumby , Kube , Groundwork , ResponsiveAeon , …

چگونه از بین این همه فریم ورک ، مورد مناسب را انتخاب کنیم ؟

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

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

اگر این موارد را در نظر بگیرید ، احتمالا راحت تر می توانید در مورد انتخاب فریم ورک تصمیم بگیرید :

  • سرعت بارگذاری و راحتی در استفاده
  • راحتی در فهم عملکرد آن
  • گزینه هایی که به شما ارائه می کند
  • سازگاری با سیستمی که از آن استفاده می کند
  • ارائه پشتیبانی بلند مدت (long-term support) بهتر

آیا استفاده از فریم ورک در طراحی سایت توصیه می شود ؟

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

منبع : سئو سایت وب نوش

هفت راز نوسیندگی حرفه ای مقاله بر مبنای اصول و تکنیک های سئو :  نویسندگی مقالات و مطالب بر اساس اصول و ترفندهای سئو سایت یکی از بخش های بسیار مهم و قابل توجه بلاگ یک وب سایت است . برای جذب ترافیک و بازدید کننده به وب سایت ، سایت باید در موتورهای جست و جو از رتبه و امتیازی خوبی برخوردار باشد . برای کسب این امتیاز ، هر وب سایتی جدا از بحث طراحی سایت و توسعه سایت ، باید دارای یک تیم قدرتمند تولید محتوا باشد . قطعا در مبحث سئو سایت ، با جمله معروف “ Content is King “ مواجه شده اید ، این جمله به تنهایی نشان دهنده ارزش و اهمیت محتوای صفحات یک وب سایت و می توان از معنای آن فهمید که عمر یک سایت بستگی به محتوای آن دارد . حال تولید این محتوای مهم و ارزشمند چگونه است ؟ طبیعتا هر کاری دارای اصولی است ، تولید محتوا هم همینطور . در کنار تمام قواعد این کار ، با مفهومی به نام سئو سایت یعنی بهینه سازی سایت برای موتورهای جست و جو (SEO : Search Engine Optimization) رو به رو می شویم که یکی از پایه ها و قواعد اصلی در تولید محتوای یک وب سایت است . البته اینکه ما بخواهیم مطالب سایت را بر مبنای قواعد سئو بنویسیم دلیل نمی شود تا مفهوم و زیبایی و خوانایی مطلبمان را فدای آن کنیم ، چون در اینصورت نتیجه معکوس خواهیم گرفت و نه تنها بازدید کنندگان جذب سایت نمی شوند ، بلکه مخاطبان فعلی وب سایت را نیز از دست خواهیم داد .

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

مهمترین و اولین اصل از اصول نویسندگی بر مبنای سئو : انتخاب صحیح کلمه کلیدی (KeyWord)

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

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

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

نوشتن مطلب و توجه به کیفیت آن ها درباره موضوعاتی که برای کاربران حائز اهمیت است

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

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

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

سئو سایت

اهمیت ویراستاری مطلب برای سئو سایت بهتر

تفاوتی که یک نویسنده حرفه ای و آشنا به سئو را از یک نویسنده عادی متمایز می کند ، همین ویراستاری و تدوین مقاله پس از نوشتن آن است . ابزار زیادی برای تدوین مطلب ، از جمله بر طرف کردن غلط های املایی و آراسته سازی آن ، وجود دارد که می توان به این موارد اشاره کرد : Microsoft Office , OpenOffice , Google Docs , … . چند نکته که می توان در ادامه این بخش به آن ها اشاره کرد مواردی هستند چون پرهیز از نوشتن جملات و پاراگراف های طولانی ، قالب بندی مناسب متن ، برطرف سازی غلط های املایی ، و ... .

جمع بندی نکات نویسندگی مقاله بر مبنای سئو سایت

در آخر ، علاوه بر نکات مذکور دو نکته دیگر نیز قابل توجه است . اول ، اینکه اگر شما برای طراحی سایت از سیستم های مدیریت محتوا استفاده می کنید ، می توانید با استفاده از ابزارهای آماده ای که برای این سیستم ها موجود است به راحتی سئو سایت و مطالب و محتوای صفحات وب سایتتان را بررسی کنید ؛ مثلا برای وردپرس ، از طریق فهرست پلاگین های آن ، میتوانید با نصب پلاگین هایی مانند Yoast SEO به راحتی تمام موارد مربوط به سئو مطلب نوشته شده را پیش از انتشار کاملا بررسی کنید و از بهینه بودن آن برای موتور جست و جو مطمئن شوید .
دوم ، که بسیار بسیار مهم است و اگر انجام نشود زحمات قبلی شما برای بهینه سازی سایت بی فایده خواهد بود ، بحث Link Building و Back Link است که در واقع مربوط به لینک دادن و فراگیر ساختن دسترسی به صفحات و محتوای وب سایت می باشد . در آینده به این مورد نیز در مطلبی جداگانه خواهیم پرداخت .
با ما همراه باشید ...

موارد استفاده های کاربردی از فریم ورک جاوااسکریپت :  – AngularJS – به ویژه در ساخت وب اپلیکیشن تک صفحه ای (SPA : Single Page Application) و طراحی سایت داینامیک در مدت زمان بسیار کوتاه

 

طراحی سایت با جاوا اسکریپت


با توجه به پیشرفت های فراوان اخیر در دنیای وب و توسعه و ساخت ابزارهای بسیار پیشرفته و در دسترس برای طراحی وب سایت ، کار طراحی سایت بسیار ساده تر از گذشته شده است . یکی از این ابزارهای پیشرفته که اخیرا نیز بسیار مورد توجه و استفاده طراحان و توسعه دهندگان وب سایت ها قرار گرفته است ، فریم ورک (Framework) ها هستند . این فریم ورک ها برای تمام تکنولوژی های استاندارد وب (HTML , CSS , JavaScript , PHP , …) موجود هستند و در این مقاله قصد پرداختن به فریم ورک معروف زبان جاوااسکریپت ، یعنی AngularJS و بررسی کاربردهای آن را دارم .
AngularJS یک فریم ورک ساختاری برای وب اپلیکیشن های داینامیک است . با استفاده از این فریم ورک ، توسعه دهنده وب سایت قادر خواهد بود تا از اسکریپت HTML به عنوان زبان ساخت قالب سایت استفاده کند و همچنین این فریم ورک با ارائه دادن افزونه نوشتار HTML ، به توسعه دهنده کمک می کند تا با حداقل زحمت تمام اجزای اپلیکیشن را پیاده سازی کند . Angular بسیاری از کدهای مورد نیاز یک وب اپلیکیشن را در خود آماده دارد و اینگونه دیگر نیازی به صرف مدت زمان طولانی برای کدنویسی نیست .
علی رغم اینکه فریم ورک Angular.js با هدف ایجاد وب اپلیکیشن ها و طراحی سایت های تک صفحه ای توسعه یافته است ، اما توسعه دهندگان می توانند با استفاده از آن هر گونه اپلیکیشن و وب سایتی که مد نظر دارند طراحی و پیاده سازی کنند . از جمله ویژگی ها و امکانات این فریم ورک می توان به موارد زیر اشاره کرد :
بایندینگ دو طرفه (two-way binding) ، ساخت قالب (template) ،RESTful API handling ، modularization ، AJAX handling ، dependency injection ، ...

طریقه آغاز به کار با فریم ورک AngularJS

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

عبارات و دستورات عملیاتی فریم ورک AngularJS

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

ng-show , ng-hide : این دستورات برای نمایش دادن یا پنهان کردن یک عنصر به کار می رود که در فایل استایل های سایت می توانید آن را تنظیم کنید .

ng-class : این دستور باعث می شود تا ویژگی های داده شده به کلاس مد نظر به صورت داینامیک  پویا بارگذاری شوند .
ng-animate : این عبارت دستوری نیز برای ایجاد انیمیشن استفاده می شود که شامل پشتیبانی از انیمیشن های JavaScript و ترنزیشن های CSS3 و انیمیشن های Keyframe آن .
منابع فراوانی برای یادگیری دقیق و گام به گام این عبارات دستوری Angular را به راحتی می توانید در فضای وب بیابید .

مثال های کاربردی از طرز استفاده فریم ورک AngularJS

1. ساختن منوهای داینامیک

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

2. ساختن SPA (وب اپلیکیشن تک صفحه ای)

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

3. سایر مثال های پرکاربرد

می توانید از طریق لینک های زیر ، مثال هایی دیگر از کاربردهای رایج فریم ورک AngularJS را مشاهده کنید :

  • Todomcv – Tutorials
  • چگونه از NgAnimate در AngularJS استفاده کنیم
  • معرفی و آشنایی با Angular.js با 50 مثال

پیش بینی صنعت طراحی وب با وجود ابزارها و فریم ورک های پیشرفته

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

منبع : طراحی سایت وب نوش

سیر تکاملی ار تقاء یافتن از طراح UI به طراح محصول در طراحی وب سایت

– روند ارتقاء یافتن طراحان UI به طراحان محصول ، یک گام منطقی در عصر تکنولوژی مدرن

سوسیس ، پنیر و اپلیکیشن ایمیل

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

– طراحان UI و طراحان UX . آن ها که هستند و دقیقا چه کاری انجام می دهند ؟

طراح UX (User Experience)  و طراحی سایت

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

 

طراحی سایت ui

 

طراح UI (User Interface) در طراحی سایت

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

 

طراحی سایت ui

 

" طراحان UI باید مهارت های طراحان UX را نیز بلد باشند . "

برای توسعه یک واسط کاربری عالی به چه چیزهایی نیاز داریم ؟

چند مورد از مسائلی که بر توسعه واسط کاربری موثر است :

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

قطعا پاسخ تمام این پرسش ها " نه " است .

طراحی محصول (اپلیکیشن ها و سرویس ها)

ساخت هرگونه محصول مدرن دیجیتال یک پروسه طولانی و دشوار است

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

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

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

باز طراحی سرویس های قدیمی و یا معیوب

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

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

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

منبع طراحی سایت و سئو سایت وب نوش

چند اشتباه رایج در نوشتن اسکریپت CSS قالب سایت وردپرسی : یکی از سیستم های مدیریت محتوا (CMS : Content Management System) که امروزه بسیار مورد استقبال برای ساخت و طراحی سایت قرار گرفته است ، هسته وردپرس (WP : WordPress) می باشد . با وجود ازدیاد قالب های آماده و موجود برای سایت های وردپرسی ، یافتن یک قالب برای سایت خود دیگر کار دشوار و چالش برانگیزی نیست . تنها کافیست تا از طریق وب سایت های دانلود قالب وردپرسی ، یک پوسته (Theme) قالب مناسب برای سایت خود انتخاب کنید و با استفاده از صفحه مدیریت (dashboard) وردپرس ، به سلیقه دلخواه و طرح مورد نیاز سایتتان آن قالب را سفارشی سازی (customize) کنید که این امر یکی از مزایای سیستم وردپرس است . اما این همه کار نیست ، بلکه شما می بایست دارای دانش استفاده از تکنولوژی اسکریپت CSS نیز باشید . در این مقاله ، به چند مورد از استباهات رایجی که توسط توسعه دهندگان سایت های وردپرسی رخ می دهد ، به ویژه در نوشتن استایل های CSS سایت ، خواهیم پرداخت . مطمئنا با برطرف سازی این نواقص کار با CSS می توانید تجربه طراحی سایت موفق با هسته وردپرس را تجربه کنید .

css و طراحی سایت

 

تعریف و مفهوم سفارشی سازی قالب سایت وردپرسی

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

حال به سراغ بررسی آن اشتباهات رایج در اصلاح ، سفارشی سازی و یا نوشتن از اول فایل استایل های CSS قالب سایت وردپرسی خواهیم رفت :

1.    کم توجهی به قواعد زمینه ای در مورد انتخابگرها (Selectors)

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

{property: value; property:value;}

برای مثال ، اگر می خواهید یک متن از سایت خود را راست چین کنید و همچنین بخواهید که آن متن با رنگ آبی به نمایش در بیاید ، نوشتن چنین استایلی در فایل CSS مشابه اسکریپت زیر خواهد بود :

p {
                text-align: right;
    color: blue;
}

آنچه که بسیار حائز اهمیت است ، توجه به نوع نوشتار (Syntax) استایل ها از جمله توجه به سمی کالن (semi-colon) ، دونقطه (colon) و جایگاه باز و بسته شدن براکت ها می باشد .

2.    دقت نکردن به مسئله پشتیبانی بروزر (Browser Support) و باگ های آن

از آنجایی که کاربران با بروزرهای مختلف از سایت های موجود در فضای وب بازدید می کنند ، بنابراین قطعا ملزم می شویم تا در نوشتن استایل های CSS قالب سایت وردپرسی ، تمام استانداردهای این تکنولوژی را در نظر بگیریم و رعایت کنیم . در اینجا لیستی از مشکلات اجرایی فایل CSS بر روی بروزرها ، در صورتی که به مسئله سازگاری اسکریپت های شما با انواع بروزر (Browser-Support یا Browser-Compatibility) توجه کافی نداشته باشید ، را برای شما آماده کرده ام :

  • بهم ریختن متن روی لینک در صفحه وب سایت
  • بهم ریختن متن صفحه هنگامی که کاربر صفحه را پیمایش (scroll) می کند .
  • چیدمان (layout) صفحه در بروزرهای مختلف به طور یکسان دیده نخواهد شد .
  • تمام جلوه هایی که در نسخه جدید تکنولوژی CSS به آن اضافه شده است ، در پوسته قالب سایت وردپرسی شما در اغلب بروزرها به نمایش در نمی آیند .

3.    نوشتن اشتباه اصطلاحات مهم اسکریپت CSS

دانستن املای صحیح (Syntax) نوشتار اسکریپت های CSS یکی دیگر از موارد بسیار مهمی است که هر طراح وب سایت باید آن ها را بلد باشد . برای مثال ، نوشتن اشتباهی مقدار 10 pc به جای 10 px برای یک مشخصه (property) می تواند به کلی چیدمان صفحه را بهم بریزد . در مورد بررسی املای عبارت های CSS می توانید از ادیتورهای موجود نیز بهره ببرید .

4.    انتخاب نادرست ماژولی که قصد ویرایش آن را دارید

هنگام سفارشی سازی قالب سایت وردپرسی ، باید بسیار دقت داشته باشید که ماژولی که انتخاب کرده اید در حال ویرایش آن هستید ، همان ماژولی است که مد نظر داشتید . مثلا می خواهید استایل بخش comments.php را ویرایش کنید ، اما به اشتباه فایل comments-popup.php را انتخاب کرده اید . حتما پیش از ویرایش هر فایل ، یک فایل پشتیبان از آن را ذخیره کنید که اگر فایل را به اشتباه ویرایش کردید ، به راحتی بتوانید آن را بازیابی کنید .

5.    نداشتن اطلاعات صحیح درباره محل بارگذاری فایل ها

به عنوان یک توسعه دهنده وب ، باید بدانید که استایل ها و سایر فایل های قالب سایت ، به ویژه در وردپرس ، در کدام قسمت از سرور باید بارگذاری بشوند . مثلا فایل استایل های قالب سایت وردپرسی در فولدری به نام style.css باید قرار بگیرند .

نتیجه گیری نهایی درباره اشتباهات رایج توسعه دهندگان در نوشتن اسکریپت CSS قالب سایت وردپرسی

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

منبع : سئو سایت وب نوش

وضعیت فعلی و آینده صنعت بازی سازی با تکنولوژی های HTML5 / JavaScript :   بازی های بروزری به طور عمده توسط تکنولوژی فلش (Flash) توسعه یافته اند . به هر حال ، محصولات ساخته شده با اسکریپت HTML5 نیز به طور روز افزون در حال افزایش هستند . چه دلیلی پشت این محبوبیت رو به رشد این تکنولوژی است و چرا بیشتر بازی سازها در کار خود تکنولوژی HTML5 را جایگزین Flash می کنند ؟

پیش از دادن پاسخ به این سوال ، لازم است یک توضیح مختصری ارائه کنم :

HTML5 یک زبان برنامه نویسی نیست (علارغم به کار بردن عبارت " اپلیکیشن های HTML5 " ، بازی ها با زبان برنامه نویسی جاوااسکریپت ساخته می شوند) ، اما این زبان اسکریپتی دارای APIهای جدیدی مانند Canvas , WebGL , WebAudio , … می باشد که این ها باعث می شوند تا بازی به خوبی در بروزر اجرا شود .

اساس بازی Canvas است که ما با استفاده از آن نقاشی می کنیم ، این عنصر ویژه استفاده از گرافیک های برنامه نویسی در نمایشگرها را امکان پذیر می سازد . به علاوه ، با کمک WebGL ، Canvas برنامه نویس را قادر می سازد تا گرافیک هایی که توسط سخت افزار GPU اجرا می شوند را رسم و پیاده سازی کنیم . علاوه بر این ها ، WebGL که بر اساس OpenGL ES 2.0 ایجاد شده ، واسط های گرافیکی دو و سه بعدی نیز ارائه می کند . با توجه به تمام این امکانات ، بازی های HTML5 می توانند بسیار کارآمد ، لذت بخش و سرگرم کننده و در عین حال بسیار فراگیر شوند .

 

طراحی سایت

چرا تکنولوژی فلش (Flash) در حال جایگزینی با HTML5 در طراحی سایت است ؟


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

نقاط قوت و مزایای HTML5 :

  1. به طور مستقیم و بدون نیاز به هیچ پلاگین و افزونه اضافی ، بر روی بروزر کار می کند .
  2. یک منبع کد اجازه اجرای بازی بر روی تمام دستگاه هایی که از HTML5 پشتیبانی می کنند را می دهد .
  3. اجازه ساخت بازی برای هر دو پلتفرم موبایل ها و رایانه ها را می دهد .
  4. دارای جامعه ای گسترده ، رو به رشد و پویا .
  5. نیازی به نصب بازی بر روی دستگاه نیست .
  6. ارائه دهنده امکاناتی برای ساخت بازی های چند نفره (Multiplayer) با استفاده از ، مثلا تکنولوژی وب سوکت ها (WebSockets) برای ارتباطات Client-Server .

معایب و نقاط ضعف HTML5 :

  1. کمبود و نقص در پشتیبانی از WebGL بر روی دستگاه های موبایل .
  2. هنوز برخی از مشخصه های آن دارای نواقصی هستند .
  3. نقص کاربری در موبایل ها ، در صورتی که بازی بهینه سازی نشده باشد .

مزایای تکنولوژی فلش – Flash/AS3 :

  1. تکنولوژی با قدمت و دارای قدرت بالا در نمایش گرافیک ها .
  2. دارای تعداد زیادی ابزار پشتیبانی ساخت اپلیکیشن .
  3. پلاگین Flash Player که اجازه اجرای بازی در هر دستگاهی را می دهد .
  4. تکنولوژی AIR که اپلیکیشن ها را به اپلیکیشن های نیتیو (native) برای موبایل ها و رایانه ها رپ (wrap) می کند .

معایب تکنولوژی فلش در طراحی سایت :

  1. پلاگین آن پشتیبانی ضعیفی در موبایل ها می شود . سیستم iOS به کلی از آن پشتیبانی نمی کند .
  2. ضعف کارکرد تکنولوژی AIR در موبایل ها .

پس تکنولوژی فلش در مقایسه با HTML5 خیلی هم ضعیف نیست !؟

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

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

طی کنفرانس فناوری GDC 2014 Unity ، شرکت ارائه دهنده موتورهای بازی سازی و گرافیک 3D و 2D ، نسخه جدید این سرویس خود را رونمایی کرد .
در Unity 5 ، پلاگین Unity Player که اجازه اجرا بازی ها در بروزر را می دهد و در آن موتور بازی سازی توسعه یافته بود با HTML5 exporter که با WebGL ایجاد شده است ، جایگزین شد .

 

طراحی سایت با استفاده از html5


علاوه بر آن ، شرکت Epic Games بر روی موتور بازی سازی خود یعنی Unreal نیز کار کرده است تا در زمانی نزدیک آن هم از تکنولوژی HTML5 بهره ببرد . در آخرین نسخه این موتور بازی سازی – Unreal Engine 4 – پشتیبانی از HTML5 ارائه شده است .
از این موتورهای بازی سازی نیز بگذریم ، بسیاری فریم ورک و ابزار پیشرفته نیز برای توسعه بازی با استفاده از HTML5 و JavaScript توسط توسعه دهندگان حرفه ای ارائه شده است . تعدادی از این ابزار معروف و رایج :

Pixi.js – Phaser – Construct 2 – ImpactJS – Babylon – Turbulenz - …

 

طراحی سایت با استفاده از html5

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

خلاصه ای از مطالب مذکور درباره بازی سازی با تکنولوژی های HTML5 و JavaScript

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

Html5gamedevs.com
Html5gameengine.com
Gamedevelopment.tutsplus.com
Casualarena.com

منبع: سئو سایت و پشتیبانی سایت طراحی سایت وب نوش

نکاتی از تجربه کاربری (UX : User Experience) در طراحی سایت برای بهینه سازی مؤثر میزان کانورژن

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

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

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

بنابراین ، سوال اصلی همچنان باقیست : چگونه می توان یک تجربه کاربری ایده آل برای کاربران فراهم نمود ؟

در این مقاله به بیان چندین نکته درباره ارائه تجربه کاربری مناسب خواهم پرداخت .

عشق در نگاه اول واقعی است

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

 

طراحی سایت مدرن

 

خیلی مهم نیست که شما چگونه آن را طراحی کنید : تصویر Hero ، ویدیوی پس زمینه ، انیمیشن های جاوااسکریپت ، ... . تنها این را درنظر داشته باشید که باید از هر ترفندی که بلد هستید استفاده کنید تا کاربر مشتاق به پیمایش صفحه شود .
پیمایش صفحه وب سایت عمل عمده بازدید کننده و کاربران وب است . پیش از مشتاق ساختن کاربر برای کلیک بر روی آیتمی (CTA : Call to Action) در صفحه ، می بایست کاربر را توسط ترفندهای مختلف در طراحی سایت ، مشتاق برای پیمایش صفحه کنیم تا اطلاعات بیشتر درباره محصول / سرویسی که ارائه کرده ایم را مطالعه کند .
همچنین : از قرار دادن اطلاعات اضافی و بیش از حد اجتناب کنید !
بدانید که جایگاه قرار گرفتن CTA در نیمه بالایی صفحه ربطی به میزان کانورژن ندارد . درباره پنهان کردن / نمایش دادن دکمه ها نه ، بلکه به این معنی که هر زمان کاربر تمایل داشت CTA کند .

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

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

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

این اتفاقات اصطلاحا " اثر در معرض قرار گرفتن محض " (mere-exposure effect) نامیده می شود . اساسا ما به چیزهایی تمایل داریم که برایمان آشنا هستند . از آنجایی که کمتر کسی وقتش را صرف یادگرفتن یک الگوی جدید واسط کاربری (UI) می کند ، بهتر است از الگویی برای طراحی front-end استفاده کنید که رایج تر است .

قاعده TL;DR

به این سوال پاسخ دهید : " چند درصد از افراد به طور کامل و دقیق شرایط نصب و قوانین حریم خصوصی یک نرم افزار را پیش از نصب آن مطالعه می کنند ؟ "

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

نکته آخر درباره تجربه کاربری و تأثیر آن بر بهینه سازی میزان کانورژن

تجربه کاربری (UX) مهمترین جزء یک پروژه وب است . هر وب سایت یا وب اپلیکیشنی دارای طیف خاصی از مخاطبین است . تجربه کاربری یک اپلیکیشن یا سایت باید متناسب با مخاطبان آن باشد ، یعنی تمام اجزاء موثر بر طراحی UX از جمله تایپوگرافی وب سایت ، رنگ بندی عناصر ، لی اوت یا چیدمان صفحه ، میزان حجم متن و عکس و فیلم در محتوای سایت ، ... و به طور کلی تمام اجزاء و عناصر front-end باید بنا به سلیقه و پسند کاربران آن سایت یا اپلیکیشن انتخاب و پیاده سازی شوند .
اگر در طراحی سایت ، طراحی UX به درستی انجام شود ، بدون هیچ تلاش و کار اضافی به طور طبیعی و با گذشت زمان خواهید دید که چطور میزان کانورژن سایت شما بالا می رود .

منبع : طراحی سایت و سئو سایت وب نوش

http://www.awwwards.com/7-ux-tips-for-effective-conversion-rate-optimization.html

*** دسته بندی : طراحی سایت ***

نکاتی از تجربه کاربری (UX : User Experience) در طراحی سایت برای بهینه سازی مؤثر میزان کانورژن

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

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

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

بنابراین ، سوال اصلی همچنان باقیست : چگونه می توان یک تجربه کاربری ایده آل برای کاربران فراهم نمود ؟

در این مقاله به بیان چندین نکته درباره ارائه تجربه کاربری مناسب خواهم پرداخت .

عشق در نگاه اول واقعی است

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

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

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

پیمایش صفحه وب سایت عمل عمده بازدید کننده و کاربران وب است . پیش از مشتاق ساختن کاربر برای کلیک بر روی آیتمی (CTA : Call to Action) در صفحه ، می بایست کاربر را توسط ترفندهای مختلف در طراحی سایت ، مشتاق برای پیمایش صفحه کنیم تا اطلاعات بیشتر درباره محصول / سرویسی که ارائه کرده ایم را مطالعه کند .

همچنین : از قرار دادن اطلاعات اضافی و بیش از حد اجتناب کنید !

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

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

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

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

این اتفاقات اصطلاحا " اثر در معرض قرار گرفتن محض " (mere-exposure effect) نامیده می شود . اساسا ما به چیزهایی تمایل داریم که برایمان آشنا هستند . از آنجایی که کمتر کسی وقتش را صرف یادگرفتن یک الگوی جدید واسط کاربری (UI) می کند ، بهتر است از الگویی برای طراحی front-end استفاده کنید که رایج تر است .

قاعده TL;DR

به این سوال پاسخ دهید : " چند درصد از افراد به طور کامل و دقیق شرایط نصب و قوانین حریم خصوصی یک نرم افزار را پیش از نصب آن مطالعه می کنند ؟ "

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

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

نکته آخر درباره تجربه کاربری و تأثیر آن بر بهینه سازی میزان کانورژن

تجربه کاربری (UX) مهمترین جزء یک پروژه وب است . هر وب سایت یا وب اپلیکیشنی دارای طیف خاصی از مخاطبین است . تجربه کاربری یک اپلیکیشن یا سایت باید متناسب با مخاطبان آن باشد ، یعنی تمام اجزاء موثر بر طراحی UX از جمله تایپوگرافی وب سایت ، رنگ بندی عناصر ، لی اوت یا چیدمان صفحه ، میزان حجم متن و عکس و فیلم در محتوای سایت ، ... و به طور کلی تمام اجزاء و عناصر front-end باید بنا به سلیقه و پسند کاربران آن سایت یا اپلیکیشن انتخاب و پیاده سازی شوند .

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

 

دوشنبه, 11 مرداد 1395 ساعت 19:28

آیا در آینده HTML6 نیز خواهیم داشت ؟

آیا در آینده HTML6 نیز خواهیم داشت ؟ : دنیای طراحی وب دائما در حال پیشرفت و ارتقاء است . مثلا حدود 10 سال پیش ، راه و روش هایی چون طراحی سایت ریسپانسیو ، یا تصاویر SVG (SVG Images) ، و یا حتی وب فونت ها (Web Fonts) ، ... جزئی از فهرست مهارت های ضروری یک طراح وب سایت نبودند ، اما امروزه اینطور نیست و تمام این مهارت ها ضروری هستند و نقش مهمی در در ساخت یک وب سایت ایفا می کنند .

طراحی سایتبه طور خلاصه ، HTML زبان نشانه گذاری متن و به شکل اسکریپتی است که اسکریپت های آن بر روی بروزر کاربر تحلیل شده و تشکیل ساختار و متون یک وب سایت را می دهد .
یکی از پیشرفت های اخیر صنعت طراحی وب که تاثیر چشمگیری بر کار طراحی سایت داشته ، معرفی HTML5 است . این نسخه جدید از زبان نشانه گذاری ابر متن (HyperText Markup Language) عناصر ساختاریافته جدیدی از جمله ورودی فرم های جدید و تعدادی ویژگی پیشرفته دیگر که مناسب برای ساختن وب اپلیکیشن ها است ، مانند دخیره سازی لوکال ، drag and drop ، ... را در اختیار طراحان وب سایت قرار داده است .
در سال های اخیر پس از آمدن HTML5 ، به ندرت طراحی را می یابید که از این نسخه جدید HTML استفاده نکند . حال پرسشی که مطرح است این است که " آیا در آینده HTML6 نیز خواهیم داشت ؟ " پاسخ این سوال هم بله و هم خیر است . در ادامه این مطلب به توضیح بیشتر درباره این موضوع خواهیم پرداخت .
حالت و مشخصات ساختار HTML
در سال های اخیر ، طراحان وب سایت HTML را با استفاده از امکاناتی که نسخه های جدید آن در اختیارشان قرار داده ، توسعه داده اند ( مانند HTML4 , HTML5 , …) . بنابراین ، وقتی نسخه جدیدی منتشر می شود که دارای ویژگی ها و امکانات پیشرفته و مورد نیاز طراحان وب نیست ، باید منتظر انتشار نسخه بعدی بمانند که این امر موجب به ثمر نرسیدن طرح مطلوب آن ها می شود .
با آمدن HTML5 ، این مدل از پیشرفت نسخه های HTML و توسعه آن دیگر به پایان رسید . بعد از این نسخه HTML ، دیگر توسعه و پیشرفت این زبان به مدل سابق نخواهد بود و ویژگی های جدید و پیشرفت های بعدی این زبان به همین نسخه آن اضافه خواهد شد . به گونه ای می توان گفت که ممکن است دیگر نسخه بعدی از این زبان منتشر نخواهد شد .
بنابر مطلب فوق ، توسعه و پیشرفت تکنولوژی از مدل فعلی ، یعنی مدل نسخه بندی و شماره دادن به پیشرفت آن تکنولوژی ، خارج خواهد شد و HTML5 آخرین نسخه از HTML است و پس از این ، این تکنولوژی را تنها با نام آن یعنی HTML صدا خواهیم زد و به محض اضافه شدن امکانی جدید به این تکنولوژی ، آن را در منتشر کرده و به HTML اضافه می کنند و دیگر نیاز نیست که طراحان وب منتظر انتشار رسمی نسخه بعدی با تعدادی امکان تازه باشند .

پس تکلیف HTML6   در طراحی سایت چه می شود ؟

برگردیم به موضوع مقاله ، آیا HTML6 منتشر خواهد شد ؟ . علت اینکه در مقدمه مطلب گفتم جواب این سوال هم بله و هم خیر است ، این است که دیگر نسخه های بعدی این زبان به طور رسمی و شماره بندی شده منتشر نخواهند شد و امکانات جدید این زبان در آینده به طور آنی به آن اضافه و قابل استفاده خواهند شد . پس نبودن نسخه بعدی ، یعنی HTML6 ، به معنی توقف پیشرفت این تکنولوژی و نسخه HTML5 نیست .
در حقیقت ، تعدادی پیشرفت و تغییر اساسی در تکنولوژی HTML پس از آمدن HTML5 در سال های اخیر رخ داده است . این علت " بله " بودن آن پرسش است ، چرا که به طور حتمی پیشرفت های تازه زبان HTML همچنان جای بهبود و پیشرفت بیشتر پیدا کردن را دارد ، تنها دیگر برچسب شماره بندی شده (مثلا HTML6) بر روی پیشرفت های آتی این تکنولوژی نخواهد بود .
زبان HTML که در حال حاضر مورد استفاده قرار گرفته است ، در واقع دیگر HTML5 نیست ، اما چون این عبارت در بین طراحان وب سایت رایج و مصطلح شده است ، همچنان این واژه را برای بیان اینکه از به روزترین امکانات تکنولوژی HTML استفاده می کنند ، به کار می برند . بنا به همین دلیل ، هنوز در آگهی های اعلام فرصت های شغلی می بینید که برای استخدام یک توسعه دهنده قالب وب سایت (front-end developer) از عبارت " مسلط به HTML5 " استفاده می کنند و این مهارت را ضروری می دانند ؛ در صورتی که با توجه به مطالبی که تا اینجا درباره HTML گفته شد و همینطور در نظر گرفتن مدل فعلی توسعه آن پس از HTML5 که به مدل توسعه آنی تغییر یافته است ، ضروری دانستن داشتن مهارت به کار بگیری صحیح تکنولوژی HTML در طراحی و توسعه وب سایت بیانی صحیح و مناسب به ویژه در آگهی های استخدام و فرصت های شغلی است .

مطالعه بیشتر در زمینه تکنولوژی HTML در طراحی سایت

برای عزیزان علاقه مند به کار در زمینه وب و طراحی سایت ، برای شروع کار و یادگیری مهارت های پایه ای در این تخصص ابتدا فراگیری تکنولوژی HTML توصیه می شود . برای مطالعه درباره این زبان ، وب سایت رسمی و جهانی استانداردهای وب به آدرس www.w3.org توصیه می شود و جهت یادگیری اسکریپت های آن می توانید از وب سایت های آموزشی موجود در فضای وب ، مانند w3schools.com , beyamooz.com , codeacademy.com , … وسایر منابع آموزشی موجود به طور رایگان استفاده کنید .

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

پشتیبانی سایت

چرا حفاظت و نگهداری سایت (پشتیبانی سایت) بسیار مهم می باشد؟

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

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

به روز رسانی های وب سایت | پشتیبانی سایت

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

به روز رسانی محتوای وب سایت

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

به روز رسانی محصولات

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

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

بروز رسانی اخبار شرکت

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

برنامه ای که در آن به شرکت کنندگان جایزه می دهند.

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

افزودن ویژگی ها

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

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

رفع موضوعات و مسائل مربوط به قابلیت استفاده که به آن اشاره شده است

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

وظایف مربوط به حفاظت و پشتیبانی سایت

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

تهیه نسخه پشتیبانی از وب سایت شما

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

نظارت بر قطع و وقفه در کار وب سایت

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

تست سرعت وب سایت

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

چک کردن لینک | لینک های داخلی و خارجی سایت

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

به روز رسانی های نرم افزار | یکی از حساس ترین موارد پشتیبانی سایت

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

آمارهای مربوط به ترافیک

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

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

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

 

منبع : طراحی سایت وب نوش