از تجربیات کاریم می‌نویسم

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

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

work with client

دریافت پروژه از مشتری :

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

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

اگر بیشتر از چیزی که مشتری نیاز دارد امکاناتی را به پروژه اضافه نمائید و بیشتر از حد معمول برای مشتری وقت بگذارید (در هر زمانی از شبانه‌روز پاسخگو باشید) این احتمال وجود دارد مورد سو استفاده قرار بگیرید و درخواستهایی خارج از قرارداد ایجاد شود.[ پیشنهاد میکنم برای خود ساعت کاری تعریف کنید و در خارج از ساعات کاری به هیچ تماس کاری پاسخ ندهید مگر اینکه قبلا به خاطر اهمیت پروژه توافقی صورت گرفته باشد. ]

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

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

free working

رایگان کار نکنید!

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

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

remot working

کار کردن به صورت ریموت :

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

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

work in office

کار کردن به صورت تمام‌ وقت در شرکت :

این روزها شرکت‌ها با دو شیوه، روال کاری را تعریف می‌کنند یا بر اساس زمان و ساعت کاری و یا بر اساس تسک و اعتماد متقابل.

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

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

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

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

contract agreement

عقد قرارداد همکاری با شرکت:

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

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

وضعیت بیمه خود را مشخص کنید!

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

annual salary

میزان حقوق من چقدر است؟

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

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

سخن آخر

روابط با همکاران :

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

کارآموز باشید:

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

سخنی با مدیر :

یک ضرب المثل یا روایتی است که من قبولش دارم، این است که اگر شخصی پیش شما پشت سر شخص دیگری غیبت می‌کند و در مورد بدی‌های شخص می‌گوید پیش بقیه هم در مورد شما می‌گوید…

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

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

قول و وعده ندهید، عمل کنید!

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

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

یک تجربه خوب شخصی

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

به خودتان و خدایتان اعتماد کنید!

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

احساس شما زندگی شما را رقم میزند، در نهایت ما آنقدر زندگی نمی‌کنیم که بخواهیم همه حالتها را تجربه کنیم پس بهتره شاد و با احساس خوب زندگی کنیم. اگر از کاری که می‌کنید راضی نیستید و احساس خوبی ندارید در انجام آن و ادامه همکاری تجدید نظر کنید!

در نهایت این ویدئوی فوق العاده را ببینید. امیدوارم این مطلب براتون مفید بوده باشه.

 

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

طراحی ریسپانسیو ( Responsive ) از ایده تا اجرا !

با شنیدن نام ریپسپانسیو ( responsive ) یا واکنش گرا این تصویر برای ما تداعی میشود که وب سایتی که واکنش‌گراست از طریق موبایل و سایر دیوایس‌ها در دسترس است، ولی واقعا چند درصد از این وب سایتهای ریسپانسیو قابل استفاده هستند؟!

یکی از مشکلات عمده اشخاصی که در حوزه UI/UX و فرانت‌اند کار می‌کنند پیاده سازی وبسایتی ریسپانسیو و کارا مطابق نظر مشتری یا صاحب پروژه است که با وجود عدم آشنایی با این مفهوم قصد دارد همه موارد داخل وبسایت که از طریق دسکتاپ قابل دسترس است روی موبایل و تبلت هم وجود داشته باشد!

قبلا در مقاله نوشته بودم که همیشه حق با مشتری نیست!

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

پرسش و پاسخ برای درک یک واقعیت!

بیایید با طرح دو سوال به سبکی بهتر به موضوع بپردازیم :

  • چرا هنگام چک کردن و یا انتقال وجه از حساب بانکی خود از  وب‌سایت اصلی بانک موردنظر استفاده نمی کنید؟
  • چرا اپلیکیشن بانک مورد نظر را دانلود و از آن برای بررسی موجودی و …. استفاده می‌کنید؟

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

پاسخ ۲ : به این خاطر که وب‌سایت فونت ریزی داره و اطلاعات اضافی زیادی وجود دارد.

پاسخ ۳ : سرعت بارگذاری پایین است، امکان انتخاب منو‌ها و آیتم‌ها سخت است و….

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

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

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

 

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

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

برای مثال یکی از دوستان من که در یکی از شرکت‌های بزرگ فروشگاهی فعالیت داشت، اظهار داشت که فروش محصولات فروشگاهی نسبت به بازدید صفحات محصول کمتر از مقدار مورد انتظار بود. بعد از تحلیل و بررسی رفتار کاربران و تغییر رنگ دکمه خرید و مکان دکمه خرید فروش محصولات را به میزان ۲۰ درصد افزایش دادند و این یعنی موفقیت در پروژه.

در نهایت لازم است تاکید کنم راه تشخیص اینکه کدام مورد بهتر و بهینه‌تر است تست و تحلیل نتایج است، یکی از راههایی که خیلی میتواند کمک کند A/B Testing است که مثلا به صورت رندم برای برخی کاربران استایل به یک سبکی نمایش داده شود و نتایج بررسی شود. این مورد مخصوصا در ایمیل مارکتینگ بسیار کاربردی و تاثیرگذار است که با استفاده از ابزارهایی همچون میل چیمپ و میلرلایت و … میتوان این موارد را تست کرد.

معرفی ابزارهایی برای آنالیز و تحلیل وب‌سایت و رفتار کاربران :

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

۱. گوگل آنالیتیک –  Google Analytics

۲. هات‌جار – Hotjar

۳. کریزی اِگ – Crazy Egg

در صورت تمایل می‌توانید کلمه Heat Map را در گوگل جستجو نمائید تا در رابطه با این موارد بیشتر مطالعه کنید.

 

نمایش لیستی از مکان‌‌ها بر روی نقشه و نمایش اطلاعات آنها

توی یکی از کارهایی که انجام می‌دادم نیاز شد که لیستی از مکانهای انتخابی ادمین سایت را روی نقشه نمایش دهم ( نمایش لیست مکان‌ها بر روی گوگل مپ ) به طوری که اگر کاربر روی یکی از اون موارد کلیک کرد اطلاعاتی از ان مکان را نمایش دهد از طرف دیگر لیستی از اون مکانها علاوه بر اینکه باید روی نقشه باشد باید در کنار نقشه نمایش داده شود :/

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

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

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

پلاگین MAPBOX :

MAPBOX Plugin

Mapbox is the location data platform for mobile and web applications. We provide building blocks to add location features like maps, search, and navigation into any experience you create.

We’re changing the way people move around cities and explore our world. Through the apps Mapbox powers, we reach more than 300 million people each month.

برای استفاده از این نقشه ابتدا باید توی وبسایت ثبت نام کنید و بعد Accrss Token  رو دریافت کنید تا بتونید توی پروژه از آن استفاده کنید.

ویژگی فوق العاده ای که داره می‌تونیم نقشه رو برای پروژه روی دیوایس‌های مختلف هم اینتگریت کنیم :

mapbox

قابلیت جالبی که داره می‌توانیم نقشه موردنظرمون رو به سبکی که دوست داریم دیزاین کنیم و کافیه توی کدها مسیر دیزاین مورد نظر را قرار دهیم تا از این دیزاین استفاده کنه.

design mapbox

همچنین میتوانید آمار بازدید نقشه‌هایی که ایجاد می‌کنید را مشاهده کنید.

mapbox statistics

استفاده از MapBox :

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

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

mapboxgl.accessToken = 'کد توکن را اینجا قرار دهید.';
// This adds the map to your page
var map = new mapboxgl.Map({
  // container id specified in the HTML
  container: 'map',
  // style URL
  style: 'mapbox://styles/mapbox/light-v9',
  // initial position in [lon, lat] format
  center: [-77.034084, 38.909671],
  // initial zoom
  zoom: 14
});

نمایش لیست مکان‌ها :

برای نمایش لیست مکان‌ها به یک لیست با فرمت JSON نیاز داریم که داخل متغیری قرار گیرد تا این مقادیر را توی لایه قرار دهیم که روی نقشه قرار گیرند.

متغیری به نام stores تعریف میکنیم و لیست داده ها را داخل آن قرار میدهیم. ساختار آن به صورت تصویر زیر است که داخل لینکی که بالاتر قراردادم میتوانید لیست این داده ها را دانلود کنید و تست کنید.

JSON data list

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

map.on('load', function(e) {
  // Add the data to your map as a layer
  map.addLayer({
    id: 'locations',
    type: 'symbol',
    // Add a GeoJSON source containing place coordinates and information.
    source: {
      type: 'geojson',
      data: stores
    },
    layout: {
      'icon-image': 'restaurant-15',
      'icon-allow-overlap': true,
    }
  });
});

در صورتیکه تا اینجا قدم به قدم انجام داده باشید همچین دمویی دارید. دمو اولیه نقشه

first demo mapbox

قرار دادن لیست مکان‌ها در کنار نقشه :

در سایدبار کناری تگی با آی‌دی موردنظرمون ( listings ) قرار میدهیم. یعنی ساختار کدهای من تا به اینجای کار به صورت زیر است :

structure html code mapbox

تابع جاوااسکریپت زیر برای ایجاد لیست مکان‌ها را به کدهای اسکریپتی که نوشتیم اضافه میکنیم.

function buildLocationList(data) {
  // Iterate through the list of stores
  for (i = 0; i < data.features.length; i++) {
    var currentFeature = data.features[i];
    // Shorten data.feature.properties to just `prop` so we're not
    // writing this long form over and over again.
    var prop = currentFeature.properties;
    // Select the listing container in the HTML and append a div
    // with the class 'item' for each store
    var listings = document.getElementById('listings');
    var listing = listings.appendChild(document.createElement('div'));
    listing.className = 'item';
    listing.id = 'listing-' + i;

    // Create a new link with the class 'title' for each store
    // and fill it with the store address
    var link = listing.appendChild(document.createElement('a'));
    link.href = '#';
    link.className = 'title';
    link.dataPosition = i;
    link.innerHTML = prop.address;

    // Create a new div with the class 'details' for each store
    // and fill it with the city and phone number
    var details = listing.appendChild(document.createElement('div'));
    details.innerHTML = prop.city;
    if (prop.phone) {
      details.innerHTML += ' · ' + prop.phoneFormatted;
    }
  }
}

در واقع این فانکشن یک مقداری دریافت میکنه و با توجه به اون مقدار لیستی ایجاد میکنه و به تگ لیست ما اضافه میکنه. اگر متغیر stores رو یادتون باشه که داده‌ها رو به صورت JSON ذخیره کرده بود را باید به این فانکشن پاس بدیم. کافیه در کدهایی که ما لایه را ایجاد کردیم ( addLayer ) بعد از آن فانکشن را فراخوانی و مقدار sores را بهش پاس بدیم.

buildLocationList(stores);

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

third demo mapbox - display list locations

نقشه را جذابتر و قابل تعاملتر کنیم!

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

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

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

function flyToStore(currentFeature) {
  map.flyTo({
    center: currentFeature.geometry.coordinates,
    zoom: 15
  });
}
function createPopUp(currentFeature) {
  var popUps = document.getElementsByClassName('mapboxgl-popup');
  // Check if there is already a popup on the map and if so, remove it
  if (popUps[0]) popUps[0].remove();
  var popup = new mapboxgl.Popup({ closeOnClick: false })
    .setLngLat(currentFeature.geometry.coordinates)
    .setHTML('<h3>Sweetgreen</h3>' +
'<h4>' + currentFeature.properties.address + '</h4>')
 .addTo(map);
}

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

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

// This will let you use the .remove() function later on
if (!('remove' in Element.prototype)) {
  Element.prototype.remove = function() {
    if (this.parentNode) {
      this.parentNode.removeChild(this);
    }
  };
}

نکته  :  توابعی که تا اینجا معرفی شدند برای اینکه متغیرهای map, link شناسایی شوند باید داخل تابع buildLocationList که بالاتر این تابع رو اضافه کرده بودیم اضافه شوند.

پس از اینکه توابع فوق را اضافه کردیم باید آنها را فراخوانی کنیم. در دو حالت این فراخوانی ایجاد میشود، در حالت اول وقتی روی لینک سایدبار کلیک میشود و در حالت دوم وقتی روی آیکون رو نقشه کلیک میشود. در هر دوحالت حرکت نقشه و نمایش پاپ‌آپ را خواهیم داشت. پس ‌‌ Event های زیر را به انتهای تابع buildLocationList اضافه میکنیم.

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

// Add an event listener for the links in the sidebar listing
link.addEventListener('click', function(e) {
  // Update the currentFeature to the store associated with the clicked link
  var clickedListing = data.features[this.dataPosition];
  // ۱. Fly to the point associated with the clicked link
  flyToStore(clickedListing);
  // ۲. Close all other popups and display popup for clicked store
  createPopUp(clickedListing);
  // ۳. Highlight listing in sidebar (and remove highlight for all other listings)
  var activeItem = document.getElementsByClassName('active');
  if (activeItem[0]) {
    activeItem[0].classList.remove('active');
  }
  this.parentNode.classList.add('active');
});

وقتی روی آیکون روی نقشه کلیک می‌شود :

// Add an event listener for when a user clicks on the map
map.on('click', function(e) {
  // Query all the rendered points in the view
  var features = map.queryRenderedFeatures(e.point, { layers: ['locations'] });
  if (features.length) {
    var clickedPoint = features[0];
    // ۱. Fly to the point
    flyToStore(clickedPoint);
    // ۲. Close all other popups and display popup for clicked store
    createPopUp(clickedPoint);
    // ۳. Highlight listing in sidebar (and remove highlight for all other listings)
    var activeItem = document.getElementsByClassName('active');
    if (activeItem[0]) {
      activeItem[0].classList.remove('active');
    }
    // Find the index of the store.features that corresponds to the clickedPoint that fired the event listener
    var selectedFeature = clickedPoint.properties.address;

    for (var i = 0; i < stores.features.length; i++) {
      if (stores.features[i].properties.address === selectedFeature) {
        selectedFeatureIndex = i;
      }
    }
    // Select the correct list item using the found index and add the active class
    var listing = document.getElementById('listing-' + selectedFeatureIndex);
    listing.classList.add('active');
  }
});

نکته  :  addEventListenerی که خود داکیومنت سایت mapbox نوشته بود درست کار نمیکرد و با توجه به اینکه من توی پروژه از jQuery  استفاده کرده بودم به صورت زیر وقتی روی لینک کلیک میشود تابع را فراخوانی میکنم.

$('.item > a').on('click',function(){
                        
    // Update the currentFeature to the store associated with the clicked link
    var clickedListing = data.features[this.dataPosition];
    // ۱. Fly to the point associated with the clicked link
    flyToStore(clickedListing);
    // ۲. Close all other popups and display popup for clicked store
    createPopUp(clickedListing);
    // ۳. Highlight listing in sidebar (and remove highlight for all other listings)
    var activeItem = document.getElementsByClassName('active');
    if (activeItem[0]) {
        activeItem[0].classList.remove('active');
    }
    this.parentNode.classList.add('active');
    
});

سفارش کردن نهایی و تغییر مارکر ( آیکون روی نقشه ) :

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

اولین مورد باید لایه ای که در ابتدا ساختیم ( map.addLayer ) و مارکر را مشخص کردیم حذف کنیم و کد زیر را جایگزین کنیم.

  // This adds the data to the map
 map.on('load', function (e) {
 // This is where your '.addLayer()' used to be, instead add only the source without styling a layer
 map.addSource("places", {
 "type": "geojson",
 "data": stores
 });
 // Initialize the list
 buildLocationList(stores);
 });

همچنین EventListenerهایی که برای دو فانکشن نوشتیم را حذف میکنیم و با استفاده از آبجکت mapboxgl.Marker() کار را انجام می‌دهیم. داخل کد جدیدی که مینویسیم کلاس marker به آن اختصاص میدهیم پس به کدهای css خود کد زیر را اضافه میکنیم و آدرس مارکر موردنظرمون رو مشخص میکنیم.

.marker {
  border: none;
  cursor: pointer;
  height: 56px;
  width: 56px;
  background-image: url(marker.png);
  background-color: rgba(0, 0, 0, 0);
}

در نهایت کد زیر را اضافه میکنیم  که Event Listner جدید را نیز در آن قرار داده ایم :

  // This is where your interactions with the symbol layer used to be
  // Now you have interactions with DOM markers instead
  stores.features.forEach(function(marker, i) {
      // Create an img element for the marker
      var el = document.createElement('div');
      el.id  = "marker-" + i;
      el.className = 'marker';
      // Add markers to the map at all points
      new mapboxgl.Marker(el, {offset: [0, -23]})
          .setLngLat(marker.geometry.coordinates)
          .addTo(map);

      el.addEventListener('click', function(e){
          // ۱. Fly to the point
          flyToStore(marker);

          // ۲. Close all other popups and display popup for clicked store
          createPopUp(marker);

          // ۳. Highlight listing in sidebar (and remove highlight for all other listings)
          var activeItem = document.getElementsByClassName('active');

          e.stopPropagation();
          if (activeItem[0]) {
              activeItem[0].classList.remove('active');
          }

          var listing = document.getElementById('listing-' + i);
          listing.classList.add('active');
      });

  });

مشاهده دموی نهایی نقشه mapbox.

شما میتوانید آخرین ادیت کدهای اسکریپت فوق ( بخش آخر سفارشی شده ) را دانلود و بررسی کنید.

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

custom mapbox demo

شما می‌توانید روی گیت‌هاب من دموی کامل را مشاهده نمائید.

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

 

ویدئوی آماده سازی ساختار فایلهای یک پروژه

در این ویدئوی آموزشی مقدمات استارت یک پروژه رو توضیح دادم که چگونه از css preprocessor برای توسعه وب سایت استفاده کنیم.

قبلا مقاله ای در این رابطه منتشر کردم : استفاده از css preprocessor برای توسعه وب سایت

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

فایل ها در گیت‌هاب

 

چگونه سیستم مدیریت محتوای (CMS) مناسب را انتخاب کنیم؟

سیستم های مدیریت محتوا (CMS) از زمان به وجود آمدن زبان های برنامه نویسی همچون PHP تبدیل به یکی از قدرتمندترین ابزارهای توسعه وب در اینترنت شده اند.

در بازاری که وب سایتها بایستی سریع تر و آسانتر ساخته شوند، بسیاری از توسعه دهندگان وب در حال روی آوردن به CMSهای منبع باز (open source) هستند تا کار خود را پیش ببرند. متاسفانه، امروزه هزاران CMS در حوزۀ وب وجود دارد و یافتن مورد مناسب به کاری دشوار تبدیل شده است.

در این مقاله به این موضوع خواهیم پرداخت که چگونه می توانید CMS مناسب خود را برای هر پروژه پیدا کنید.

سیستم محتوا CMS چیست؟

سیستم مدیریت محتوا (CMS) یک برنامه تحت وب است که از یک پایگاه داده (معمولاً MySQL) یا روش های دیگر برای ایجاد، ویرایش و ذخیره محتوای HTML به شکلی قابل کنترل استفاده می کند.

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

چرا باید از CMS استفاده کرد؟

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

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

اشتباهات رایج در انتخاب سیستم های مدیریت محتوا

اشتباه اول : انتخاب یک CMS برای افراد ناشی

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

مهم ترین ویژگی در وب سایت آن است که ببینید آیا مشتری می‌تواند همانطور که انتظار دارد از سایت استفاده کند. بنابراین، در دراز مدت، اگر یک CMS با واسط مدیریتی (admin interface) ساده  انتخاب کنید و حتی اگر مجبور باشید آن را برای تطابق با نیازهای مشتری شخصی سازی کنید، برای سلامتی خودتان بهتر خواهد بود.

اشتباه دوم : کامیونیتی و ارتباطات هرچه بزرگتر، بهتر!

مراقب CMS هایی باشید (خواه متن باز و خواه غیره) که تعداد زیاد کاربرانشان را دلیلی برای ترغیب شما به استفاده از سیستم خود می دانند. فریب وعده وجود یک جامعه کاربری بزرگ و کمک کننده و برنامه های افزودنی یا افزونه های زیبا را نخورید. این یک تله است!

اینکه تعداد زیادی از افراد از یک CMS استفاده می کنند دلیلی بر خوب بودن آن نیست. انتخاب یک CMS صرفاً به خاطر سیل عظیم کاربرانش، یک اشتباه خیلی بزرگ است. برای مثال سیل عظیمی از کاربران از ووکامرس وردپرس برای فروشگاه استفاده میکنند آیا انتخاب این فروشگاه ساز، برای هر نوع فروشگاهی، واقعا کار درستی است؟

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

 اشتباه سوم : راه رفتن با یک کوتوله!

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

اشتباه چهارم : تحقیق نکردن

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

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

در یک CMS باید به دنبال چه چیزی بود؟

می توان ویژگی های زیادی را در یک سیستم مدیریت محتوا جستجو کرد. در اینجا برخی از مهم ترینِ آن ها ذکر شده اند

  • نصب سریع و آسان
  • واسط مدیریتی(کاربری) ساده
  • توسعه سریع و آسان قابلیت های اضافی در CMS
  • دستکاری سادۀ قالب
  • جامعه کاربران کمک کننده
  • مستندات مناسب

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

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

توسعه سیستم های مدیریت محتوای منبع باز با سرعتی فزاینده در حال وقوع است. به طور پیوسته، سیستم های تازه ای پا به عرصۀ ظهور می گذارند و بسیاری از این سیستم ها امیدوارکننده به نظر می رسند. غول های دنیای CMS مانند WordPress ، Joomla و Drupal هر روز در حال تغییر و بروزرسانی هستند و با تغییرات زیادی که اعمال می شود روز به روز کاربرپسندتر می شوند.

نتیجه گیری :

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

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

پی نوشت :‌

این مقاله را قبلا در وب سایت بیلاود مارکتینگ منتشر کرده بودم.

دیباگ وب سایت روی گوشی موبایل

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

چند لینک مفید :

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

توصیه هایی برای ایجاد وب سایت های بهینه شده برای گوشی های هوشمند

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

اصول نویگیشن واکنش‌گرا در وب سایت های پیچیده

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

البته لازم است تاکید کنم که این ابزار برای دیباگ نهایی که وب سایت شما روی هاسته و به صورت آنلاین قابل مشاهده است کاربرد داره، در غیر اینصورت من خودم شخصا با Inspector گوگل کروم همه حالتهای واکنش گرایی ( responsive ) وب سایت را انجام میدم.

Google Chrome Inspector Element

دیباگ وبسایت به صورت آنلاین با مرورگر سافاری :

در صورتیکه گوشی آیفون داشته باشید، در قسمت تنظیمات مرورگر سافاری امکانی برای دولوپرها وجود داره به نام Web Inspector که در قسمت Advanced میتوانید آن را فعال نمائید.

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

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

safari developer tools

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

developer tools iphone

با تغییر ساده بالا، تغییرات را بر روی گوشی موبایل میبینیم :

safari inspector develop tools

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

دیباگ وبسایت به صورت آنلاین بر روی گوشی اندروید

برای کسانی که از گوشی اندروید استفاده میکنند خبر خوب این است که موزیلا فایرفاکس همچین امکانی را فرآهم نموده است که می توانید آن را مشاهده نمائید.

Debugging Firefox for Android over USB

شاد باشید.

اشتباهی که شرکت های درحال توسعه B2B انجام می دهند!

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

طی سالهای گذشته من با چند شرکت تولیدکننده که در حال توسعه بودند همکاری هایی داشتم که این همکاری از پیاده سازی و طراحی وب سایت شرکت شروع شد تا اینکه وارد مسائل مهمتری همچون مارکتینگ، بهینه سازی و تولید محتوای مناسب و … شدیم.

حضور در فضای مجازی نیازمند برنامه ای حساب شده

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

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

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

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

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

ما باید لقمه ای به اندازه دهن خودمون برداریم و توانایی رقابت با شرکت های بزرگ رو نداریم!

خرید سرویس و دریافت خدمات از سایر شرکت ها (outsourcing)

ضرب المثلی هست که میگه :

ما ثروتمند نیستیم که وسائل چینی بخریم!

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

و در نهایت یکی از بزرگترین مشکلاتی که من دیدم احساسی بودن در تصمیم گیری بود و همچنین حاضر به ریسک برای جهش رو به رشد شرکت نبودند.

نکته ی آخری که میتونم اشاره کنم در قالب یک سواله :

همانطور که در جریان هستید یکی از مهمترین بخش های رشد و پیشرفت یک وبسایت بخش تولید محتوای مناسب برای اون وبسایته، ولی برای شرکتی که فرضا ۳ محصول بیشتر نداره به چه میزان میشه در مورد محصولاتش نوشت تا  وبسایتش ارتقا پیدا کنه؟! ۱۰ مطلب، ۵۰ مطلب، چقدر؟ آیا اصلا امکان تولید همچین محتوایی برای این حجم کم از محصول وجود داره ؟ قطعا جواب منفیه و محدود هستیم.

پس راه اینکه شرکتها بیشتر شناخته بشن و بیشتر روی مصرف کننده تاثیر بذارند چیه ؟!

اینجاست که واجب و ضروریه مدیرعامل به نیروی متخصص باید رو بیاره و بخشی از کار رو واگذار کنه!

expert

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

شاد باشید