وبلاگ آموزشی طراحی و ساخت سایت حرفه ای

وبلاگ آموزشی طراحی و ساخت سایت حرفه ای

وبلاگ آموزشی طراحی و ساخت سایت حرفه ای

وبلاگ آموزشی طراحی و ساخت سایت حرفه ای

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

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

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

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

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

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

طراحی سایت

طراحی سایت responsive برای تلفن های همراه بخش 2

ساخت وب سایت responsive برای تلفن های همراه بخش 2

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

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

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


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

طراحی سایت

کد نویسی تارنمای اینترنتی ریسپانسیو برای تلفن های همراه پارت 1

ساخت تارنمای اینترنتی ریسپانسیو برای تلفن های همراه قسمت اول

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

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

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

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

ماژول روتیتر اخبار برای جوملا

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

تفاوت سایتهای ایستا و داینامیک

لیست مقالات به شرح زیر است.

پلاگین غیرفعال کردن موتولز motools

یکی از فایلهایی که حجم سایت های جوملایی را افزایش میده فایل موتولز هست .

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

233kb     mootools-more.js
94kb     mootools-core.js

مجموعا این دو فایل 327kb حجم دارند که تقریبا حجم قابل توجهی است .

 

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

حال به توضیح این می پردازیم که موتولز چیست ؟

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

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

خب حال ما برای این مشکل یک راه حل ارائه دادیم پلاگین فعال کردن و غیر فعال کردن موتولز .

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

 

   دانلود  

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

دانلود پلاگین درج کامپوننت در مطلب و ماژول

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

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

پلاگین درج و نمایش کامپوننت در مطلب

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

 

 

اسم این پلاگین به انگلیسی : componentanywhere هست .

بعد از نصب این پلاگین توی مطلبتون کد زیر را قرار بدید

component url

برای مثال فرم سفارشتون در منو با این آدرس هست

yoursite.com/form

پس باید کد را اینطوری بذارید

component form

برای دانلود روی دکمه زیر کلیک کنید .

   دانلود  

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

ماژول روتیتر اخبار برای جوملا 2.5

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

دکتر رضایی در جمع دانشجویان تهران                                                                                                     <------    روتیتر

جنگ ایران و عراق یک جنگ تحمیلی بود.                                                      <------    عنوان

دکتر رضایی روز پنجشنبه در دانشگاه تهران در سخنرانی خود گفتند که جنگ ما .......       <------   متن

 

 

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

ماژول به طور خودکار توضیحات متای شما را به روتیتر تبدیل میکنه و در سایت نمایش میده .

با استفاده از کدهای سی اس اس این ماژول و تغییر اون هم میتونید ماژول را به شکل دلخواه خودتون در بیارید.

امیدوارم به کارتون بیاد.

دانلود ماژول روتیتر

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 

افزونه درج ماژول در مطلب برای جوملا

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

فرض کنید یک مطلب نوشتید و می خواهید زیرش نمونه کارهاتون به صورت اسلاید نمایش داده بشه . خب شما یک ماژول نمایش تصاویر دارید اما نمی دونید چطور این ماژول را داخل مطلبتون نمایش بدید .

ماژول درج ماژول در مطلب

پس بهترین راه استفاده از پلاگین درج ماژول در مطلبه .

 

اسم این پلاگین به انگلیسی : modulesanywhere هست .

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

module name-module

برای دانلود روی دکمه زیر کلیک کنید .

   دانلود  

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

افزایش سرعت لود سایت در جوملا

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

گام اول :

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

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

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


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













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

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


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

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


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

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

سایت تست و بررسی سرعت سایت :    http://tools.pingdom.com/fpt

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

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

------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
امیدوارم از خواندن این مقالات لذت برده باشید
 
همچنین پیشنهاد می کنم مقاله های زیر را هم بخوانید
 
 
 
 
 
 

تاثیر یوزر فرندلی بودن سایت در فروش آنلاین پارت چهارم

تاثیر یوزر فرندلی بودن پایگاه در بازاریابی آنلاین پارت چهارم

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

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

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

منبع : تاثیر کاربرپسندی سایت در بازاریابی اینترنتی

طراحی سایت