طراحی سایت | برنامه نویسی

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

طراحی سایت | برنامه نویسی

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

بایگانی
پیوندهای روزانه
پیوندها
۳۱تیر

۱۰ نکته ای که مشتریان طراحی وب باید بدانند و درک کنند

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

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

webdesign

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

برند تجاری خود را مشخص کرده و به آن تکیه کنید

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

بر روی طراحی واکنشگرا سرمایه گذاری کنید

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

responsive

از یک هاست قابل اعتماد استفاده کنید

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

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

بر روی سادگی تمرکز کنید

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

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

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

امنیت از بالاترین اولویت برخوردار است

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

security

هیچگاه لینک ها را فراموش نکنید

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

روی تمرینات سئو تمرکز کنید

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

ناوبری وب سایت خود را ساده سازی کنید

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

بر روی محتوا سرمایه گذاری کنید

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

اجتماعی باشید

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

social

اعتبار آنلاین خود را مدیریت کنید

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

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

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

منبع

منبع: لرن سورس


۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۱تیر

نکاتی برای سالم تر بودن یک طراح وب

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

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

healthy-freelancer

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

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

سلامت روانی خود را جدی بگیرید

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

mental-health

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

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

زندگی را نشسته ادامه ندهید

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

راه های زیادی برای حل این مشکل وجود دارد. بعضی مردم از میز های ایستاده و یا میزهایی که به شما اجازه می دهد بنشینید و یا بلند شوید، استفاده می‌کنند. اینها می‌تواند تغییرات مثبتی را ایجاد کند. اما ساده ترین و ارزانترین روش هایی که شما می توانید از آن استفاده کنید، حرکت کردن و پیاده روی است. اگر میتوانید روزانه بعد از ناهار ۱۵ دقیقه پیاده روی کنید.

healthy-freelancer

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

اجتناب از بعضی غذاها

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

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

healthy-freelancer

از کار خود لذت ببرید

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

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

منبع: لرن سورس


۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۱تیر

۱۰ مهارت کلیدی که یک طراح سایت باید آنها را بداند

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

desingweb

۱.HTML

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

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

۲.CSS

در حالی که از html برای ساختمان و اسکلت بندی یک وب سایت استفاده می شود. از زبان CSS برای زیبا سازی و طراحی نمای یک وب سایت استفاده می کنیم. از این رو زبان CSS هم یکی از مهمترین زبان هایی است که طراحان سایت باید به آن مسلط باشند. CSS یکی از مهارت های لازم و ضروری برای طراحان و توسعه دهندگان front-end است.

اگرچه یادگیری این زبان برای توسعه دهندگان back-end می تواند مفید باشد ولی آنچنان که تسلط به آن برای توسعه دهندگان front-end اهمیت دارد برای توسعه دهندگان back-end مهم نیست.

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

۳.حس طراحی

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

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

۴.JavaScript و Ajax

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

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


۵.PHP و ASP.NET

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

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

۶.پشتیبانی از موبایل

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

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

۷.مهارت های خدمات مشتری

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

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

۸.جستجوگرها

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

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

۹.مدیریت وب سرور

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

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

۱۰.مدیریت پروژه

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

منبع: لرن سورس

۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۱تیر

چه تفاوت هایی بین طراح وب و توسعه دهنده وب وجود دارد؟

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

develop

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

طراحی وب چیست؟

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

web-design

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

توسعه وب چیست؟

توسعه وب به دو دسته تقسیم می شود : توسعه ی Front-end و توسعه ی back-end . برخی از مهارت های این دو یکی بوده و با هم همپوشانی دارند، اما در حرفه طراحی وب از هر کدام برای اهداف خاصی استفاده میشود. یک طراح Front-end، طراحی ظاهری یک وبسایت را که توسط طراحان بصری از قبل ایجاد شده را کدنویسی میکند.

developing

آنها این کار را با استفاده از زبان های  HTML و CSS انجام میدهند. یک توسعه دهنده Front-end از HTML برای ساختار سایت، از CSS برای تعیین سبک و طرح بصری، و برای ایجاد تعاملات و رویداد ها در صفحه از جاوا اسکریپت استفاده میکند. برای برخی از سایت های کوچک، توسعه Front-end ممکن است تنها نوعی از توسعه باشد که نیاز است.در حالی که برای پروژه های بزرگتر و پیچیده تر، توسعه back-end نیز باید انجام شود. توسعه back-end با برنامه نویسی پیشرفته تر و تعاملات بیشتر در صفحات وب سر و کار دارد.

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

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

 توسعه دهندگان back-end هم ممکن است نیاز داشته باشند قابلیت های جدیدی را از ابتدا برنامه نویسی کنند، زیرا ممکن است هیچ بسته نرم افزاری و یا کدی از قبل نوشته شده برای آن وجود نداشته باشد.

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

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

adham-dannaway-designer-coder

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

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

منبع: لرن سورس


۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۰تیر

میخواهید وب سایتتان هک نشود پس این ۸ نکته طلایی را رعایت کنید

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

hack

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

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

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

از سرور خود محافظت کنید

1. HTTPS و TLS/SSL را برای رمزنگاری ترافیک خود تنظیم کنید

وب سایت ها به طور پیش فرض از HTTP (پروتکل انتقال فرا متن) برای انتقال اطلاعات از سرور به مرورگر و بالعکس استفاده میکنند. HTTP مانند یک بزرگراه است که همه چیز در اینترنت را به هم متصل می کند و به همین دلیل است که  قبل از نام دامنه وب سایت از "http" یا "https" استفاده میکنید. HTTPS نسخه ای امن از HTTP است. این پروتکل ترافیک یک وبسایت را از هک شدن یا ربودن محافظت می کند.

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

HTTPs-Main-Image

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

اکنون چگونه میتوان وب سایت خود را با HTTPS ایمن کنیم؟ همه آن چیزی که باید انجام دهید این است که یک گواهیSSL یا TLSدر سایت خود نصب کنید. امروزه، شما می توانید این مورد را به راحتی و در برخی موارد رایگان در هنگام خرید نام دامنه انجام دهید.

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

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

2. از فایروال ها برای محافظت از دسترسی های غیر مجاز استفاده کنید

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

firewall

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

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

3. فایل ها را با SSH/SFTP به صورت ایمن انتقال دهید

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

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

SFTP

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

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

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

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

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

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

از وب سایت خود محافظت کنید

5. سیستم مدیریت محتوا و دیگر برنامه های سایت خود را به روزرسانی کنید

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

update

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

6. ارسال اطلاعات از طریق فرم های وب سایتتان را ایمن کنید

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

SQL-Injection

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

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

7. از کلمات عبور امن و منحصر به فرد استفاده کنید

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


8. پشتیبان گیری از فایل های وب سایت و پایگاه های داده

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

سخن پایانی

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

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

امیدوارم این مقاله برای شما مفید بوده باشد! شما چگونه از وب سایت خود محافظت می کنید؟ نظرتان را در همین جا برای ما قرار دهید

منبع: لرن سورس

۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۰تیر

۶ روش برای افزایش سرعت بارگذاری صفحات وب سایت شما

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

speed

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

اگر بارگذاری سایت شما بیش از ۳ ثانیه طول بکشد، بیشتر کاربران قبل از باز شدن صفحه اصلی آن را ترک خواهند کرد. استفاده از فرمت نادرست برای تصاویر به راحتی می‌تواند حجم صفحات شما را افزایش داده و تجربه تلخی را برای کاربران شما رقم بزند. بیش از ۷۰ درصد از صفحاتی که برای دستگاه‌های موبایل طراحی می‌شوند دارای حجمی بیش از یک مگابایت هستند و تنها ۱۲ درصد از آنها حجمی بیش از ۴ مگابایت دارند.

minifycss

به خاطر داشته باشید که بارگذاری صفحه ای با حجم یک و نیم مگابایت با استفاده از یک اتصال ایده آل 3G سه ثانیه طول می‌کشد. بهترین کار این است که حجم صفحات خود را زیر نیم مگابایت در نظر بگیرید. طبق گفته  GlobalStats در سال ۲۰۱۸ رایج‌ترین رزولوشن های صفحه نمایشی که استفاده شده است عبارتند از :

  • 22.55% از رزولوشن 360 در 640 استفاده کرده اند(موبایل).
  • 11.73%  از رزولوشن 1366 در 768 استفاده کرده‌اند.
  • 8.26% از رزولوشن 1920 در  1080 استفاده کردند.
  • 4.91% از رزولوشن 375 در 667 استفاده کردند(موبایل).
  • 2.94% از رزولوشن 1440 در 900 استفاده کردند.

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

وب سایت خود را برای موبایل طراحی کنید

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

بیشتر از ۷۵ درصد از سایت های موبایلی در یک اتصال 3G ایده آل به بیش از ۱۰ ثانیه زمان برای بارگذاری خود نیاز دارند و با توجه به اینکه نیمی از ترافیک وب سایت ها از طریق موبایل بوده است این سرعت بارگذاری اصلا مناسب نیست. پس با پایین نگه داشتن حجم صفحات وب سایتتان کاربران خود را خوشحال کنید و اطمینان حاصل کنید آنها سایتتان را به خاطر  سرعت بارگذاری ترک نمی کند.

mobile-friendly

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

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

مطمئن شوید وبسایت شما کوچک سازی شده است

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

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

از بارگذاری اسکریپت هایی که نیازی به آنها ندارید صرف نظر کنید

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

از کلمات defer و async در بارگذاری فایل های جاوا اسکریپت استفاده کنید، این کار باعث می‌شود، سرعت بارگذاری صفحات شما افزایش یابد. همچنین می توانید برای اسکریپت های کوچک از روش Inline برای افزودن جاوا اسکریپت به اسناد html خود استفاده کنید.

 async به مرورگر می گوید که تجزیه و خواندن صفحات html را همزمان با دانلود فایل های جاوا اسکریپت به صورت موازی و همزمان انجام دهد. به علاوه کلمه defer به مرورگر می گوید که فایل های جاوا اسکریپ را بعد از  خواندن کامل فایل های html ، اجرا کند.

از امکان Caching و CDN استفاده کنید 

شبکه تحویل محتوا (CDN) سایت شما را بر روی سرورهایی در سراسر جهان کپی کرده و زمان انتقال داده را با اتصال بازدیدکنندگان به سرور جغرافیایی نزدیک به آنها کاهش می دهد. محتوای استاتیک نیز توسط سرورهای CDN ذخیره می شود.Cloudflare  احتمالا بهترین CDN است که شما میشناسید، اما Akamai و Amazon CloudFront  هم جایگزین های خوبی هستند.

cloud

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

از پلاگین های غیر ضروری خلاص شوید

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

 

منبع: لرن سورس


۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۰تیر

۱۰ نکته کاربردی در استفاده از Visual Studio Code

Visual Studio Code را میتوان به راحتی بهترین ویرایش گر متن در برنامه نویسی دانست. از زمان استفاده از این ویرایشگر عاشق کار با آن شده‌ام. Visual Studio Code یک برنامه جاوا اسکریپتی است که بر پایه الکترون طراحی شده است(مانند اتم یکی دیگر از ویرایشگر های رایج متون). این نرم افزار بسیار سریع بوده و از مشکلات مربوط به کارایی رنج نمی‌برد.

visual-studio-code

 چیزی که در بیشتر اپلیکیشن‌های جاوا اسکریپت دیده می شود. اما نکته ای که می تواند شما را شگفت زده کند این است که ویژوال استودیو کد یک پروژه سورس باز بوده که سورس کامل آن در گیت هاب قرار گرفته است. در این مقاله به نکاتی از این نرم افزار اشاره می‌کنم که می‌تواند در استفاده از آن به شما کمک کند.


۱.در Command Palette ویژوال استودیو کد استاد شوید

vscode

مانند نرم افزارهای Sublime و TextMate ویژوال استودیو کد نیز چیزی به نام command palette دارد. این ویژگی به شما کمک می کند که فقط با تایپ کردن دستورات به امکانات مختلف نرم افزار دسترسی پیدا کنید. 

بدون اینکه مجبور باشید از منو ها استفاده کنید می‌توانید با استفاده از ترکیب کلیدهای Ctrl + Shift + P به command palette دسترسی پیدا کنید. سپس فقط کافیست چیزی را که میخواهید تایپ کنید. پس از این گزینه ها بر اساس جستجوی شما دسته بندی می شوند. این ویژگی دسترسی به امکانات نرم افزار را بسیار سریع می کند.

۲.پوشه ای که مربوط به پروژه کار شماست را تعیین کنید

vs

اگر در نوار کناری نرم افزار بر روی Explorer کلیک کنید برای شما یک زیر پنل نمایان میشود. این پنل به دو قسمت تقسیم می شود. Open Editors (فایل ها و اسنادی که در حال حاضر باز هستند) و فولدرهایی که بسته هستند.

بر روی Open Folder کلیک کنید (و یا از منو File > Open Folder را انتخاب کنید)، سپس هر فایلی که در سیستم، مورد نظرتان است را انتخاب کنید. این کار باعث می‌شود فولدر مورد نظر در VS Code به عنوان پروژه جاری شما بارگذاری شود و به شما اجازه می دهد که به همه فایل ها و فولدر های آن دسترسی داشته باشید.

۳.چندین فایل را همزمان مشاهده کنید

vs

بیشتر ویرایشگر های پیشرفته متن امکان مشاهده چندین فایل را به صورت همزمان برای شما فراهم می آورد و به شما اجازه می دهند در بین تب های این فایلها پیمایش کنید. ویرایشگر های پیشرفته امکان ویرایش فایل ها به صورت side-by-side را به شما میدهند. این امکان در Visual Studio Code به صورت افقی پشتیبانی می شود.

البته ویرایش فایلها بصورت side-by-side در مانیتورهای کوچکتر کمی کار را سخت می‌کند. در Visual Studio Code چیزی به نام پنل های داینامیک وجود دارد. با استفاده از این امکان زمانی که تب های اسناد شما بیش از حد باریک شوند با فعال شدن هر کدام این تب ها، آنها در کل صفحه گسترش می‌یابند. این مکان می‌تواند برای شما دوست داشتنی باشد.

۴. ویرایش چندین خط به طور همزمان

vs

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

۵. به تعاریف رجوع کنید

vs

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

vs

می توانید از ترکیب کلید Alt + F12 نیز استفاده کنید. در این صورت تعریف مورد نظر در همان جایی که مکان نما قرار دارد به شما نمایش داده می شود و فایل سورس مورد نظر باز نمیشود. باالعکس برای یافتن تمام رفرنس های یک متغیر و یا تابع در برنامه می توان از ترکیب کلید های Shift + F12 استفاده نمود. به منظور کار کردن این ویژگی ها باید اطمینان حاصل کنید که فولدر مورد نظر به عنوان پروژه کار جاری باز باشد.

۶.تغییر نام در همه مکان‌ها

vs

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

اگر شما یک متغیر و یا تابع را انتخاب کنید و سپس دکمه F2 را بفشارید می توانید نام آن عنصر را تغییر داده و سپس این تغییر در کل پروژه شما اعمال خواهد شد. اگر می‌خواهید تغییرات تنها در فایل جاری شما انجام شود از ترکیب Ctrl + F2 استفاده کنید/

۷.جستجو در میان همه فایل ها

vs

زمانی که نیاز دارید به دنبال یک کلمه و یا جمله ای در همه فایل های خود بگردید می توانید از امکان جستجوی این نرم افزار استفاده کنید. با استفاده از ترکیب دکمه های Ctrl + F می توانید در فایل جاری جستجو را انجام دهید. در صورتی که بخواهید جستجو در تمام فایل های پروژه شما انجام شود از ترکیب Ctrl + Shift + F استفاده کنید.

۸.از Command Line در ویژوال استودیو کد استفاده کنید

vs

ویژوال استادیو کد شامل یک خط فرمان است. این خط فرمان در ویندوز با نام Command Prompt شناخته می‌شود. با این حال دستورات Command Line در فایل های پروژه جاری شما کار می کنند. با استفاده از این امکان می توانید دستورات مورد نظرتان را اجرا کنید.

۹.دانلود تمی جدید در جایگزین

vs

همانطور که انتظار می رود ویژوال استادیو کد به شما اجازه می دهد قالب کدهای خود را تغییر دهید. این می‌تواند برای بسیاری از اهمیت بالایی برخوردار باشد. شما می توانید از تم های رایگانی که در لینک VS Code Marketplace قرار دارد، استفاده کنید.

۱۰.نصب افزونه های خارجی

vs

آخرین ویژگی لازم و ضروری قابلیت گسترش پذیری نرم افزار Visual Studio Code است. از طریق افزونه هایی که برای این نرم افزار وجود دارد می توان قابلیت های این نرم افزار را افزایش داد. با استفاده از ترکیب کلیدهای Ctrl + Shift + X می توان به پنل Extensions در ویژوال استادیو کد دسترسی داشت. استفاده از افزونه ها می توانند کارهای شما را بسیار ساده کند. شما می توانید ابزار های گوناگونی را در این پنل پیدا کنید.

منبع: لرن سورس


۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۰تیر

۶ دلیل برای اینکه وب سایت شما به گواهینامه ssl نیاز دارد

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

need-ssl-certificate

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

محافظت از اطلاعات شما در برابر هکر ها

Unsafe-connection

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

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

بدست آوردن اعتماد بیشتر کاربران

MUO-Secure-Connection

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

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

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

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

Chrome-download

مشکل بعدی که برای وب‌سایت‌هایی که ssl ندارند به وجود می آید این است که سایت آنها در مرورگر کروم با یک هشدار روبه‌رو می‌شود. این هشدار به بازدیدکننده می گوید که سایت مورد نظر کاملاً امk نیست. این مورد زمانی کار را بیشتر سخت می‌کند که بدانید کروم محبوب ترین مرورگر کنونی است. این هشدار پیام بدی برای کاربران شما خواهد بود.

از طرفی گوگل کروم برای وب سایت هایی که از پروتکل https استفاده میکنند پیام مناسب Secure را نشان می‌دهد. در سال ۲۰۱۸ گوگل موضع خود را در مورد پروتکل های موجود در اینترنت تغییر داد و به جای پروتکل http از https به عنوان پروتکل پیش فرض استفاده کرد. پس باید به این نکته توجه کافی داشت.

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

HTTPS

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

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

افزایش سرعت وب سایت

HTTP-vs-HTTPS

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

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

هزینه نصب یک گواهینامه ssl چندان زیاد نیست

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

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

مخلص کلام

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

منبع: لرن سورس


۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۰تیر

Sass چیست و چه کاربردهایی دارد؟

Sass مخفف کلمات Syntactically Awesome Stylesheets است. Sass را می توان به عنوان یک افزونه برای css در نظر گرفت که کار با استایل ها را برای ما بسیار ساده می کند. به خصوص زمانی که فایل های css شما بسیار بزرگ و پیچیده باشند. Sass مدیریت و نگهداری استایل های css را ساده‌تر می‌کند. به لطف وجود متغیرها، mixins ها، nesting ها و وراثت در این پیش پردازنده، کد های نوشته شده کاملاً سازماندهی می شود.

sass

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

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

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

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

 اگر شما در css مبتدی هستید پیشنهاد می کنم فعلا از رفتن به سراغ پیش پردازنده ها صرف نظر کنید.

چیزی که برای ورود به این دنیای جذاب نیاز دارید این است که درک کاملی از موارد پایه ای و کدهای css داشته باشید. Sass یکی از محبوب‌ترین پیش پردازنده های css است اما Sass تنها پیش پردازنده موجود نیست. موارد دیگری نیز مانند Less و Stylus وجود دارند.

چرا بهتر است از Sass استفاده کنیم؟

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

اگر شما با یک زبان برنامه نویسی واقعی کار کرده باشید حتما اطلاع دارید که در این زبان ها از موارد کاربردی همچون تعریف متغیر ها و توابع استفاده می شود. که می تواند در کد نویسی و سازماندهی کد ها به ما کمک بسیاری بکند. اینجاست که Sass می تواند بیشتر مشکلات و نقطه ضعف های css را برطرف کند.

در واقع Sass مکمل زبان css است. با استفاده از Sass می توان متغیر ها را تعریف کرد و حتی از مفاهیمی همچون وراثت در css استفاده نمود. این ویژگی ها می توانند برای یک طراح فوق العاده باشند.

چگونه از Sass استفاده کنیم؟

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

  • SCSS : استفاده از فایلی که دارای فرمت scss. است و با css هم بسیار سازگار است.
  • SASS : استفاده از فایلی که دارای فرمت sass. است. این مورد نیز با css سازگار است و سریع‌تر نوشته می‌شود.

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

متغیرها

متغیرها بسیار قدرتمند هستند. زیرا آنها به شما اجازه می‌دهند کد خود را سریع تغییر دهید. وقتی متغیری را تعریف می‌کنید، مقداری مشخص را در آن ذخیره می‌کنید. مقادیر مجاز برای متغیرها عبارتند از :  اعداد، رشته‌ها، رنگها، null و ... . برای تعریف متغیرها در Sass باید از علامت $ استفاده کرد و به دنبال آن نام متغیر را نوشت.

در زیر متغیری به نام blue تعریف شده است. بعد از نام متغیر از علامت (:) استفاده کرده ایم. سپس بعد از علامت (:) هم میتوان مقدار متغیر را مشخص کرد. در انتها برای مشخص کردن خاتمه عبارت از علامت (;) استفاده کرده‌ایم.  

$blue: #3498db;

اکنون بیایید ببینیم متغیر ها در عمل چگونه اند :

/*
// We define the variables.
*/
$blue: #3498db;
$red: #e74c3c;
$background: #34495e;
 
/*
// We apply the variables.
*/
body {
  background-color: $background;
}
 
h1 {
  color: $blue;
}
 
p {
  color: $red;
}

کدی که در بالا نوشته شده است به زبان Sass است که در css به شکل زیر  کامپایل می شود :

body {
  background-color: #34495e;
}
 
h1 {
  color: #3498db;
}
 
p {
  color: #e74c3c;
}

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

تودرتویی در Sass

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

ul {
  list-style: none;
 
  li {
    padding: 10px;
    display: inline-block;
 
    a {
      text-decoration: none;
      font-size: 16px;
      color: #333;
    }
  }
}

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

گسترش پذیری / وراثت

 وراثت یکی از مفیدترین ویژگی های Sass است. با استفاده از گسترش پذیری می توانیم مجموعه ای از مشخصه های css را از یکی به دیگری منتقل کنیم. گسترش پذیری زمانی استفاده میشود که چندین عنصر دارای اشتراکاتی در مشخصه های css باشند. استفاده از گسترش پذیری به شدت در نوشتن کد های تکراری صرفه‌جویی می‌کند. در نمونه مثال زیر دو دکمه موردنظر فقط در مشخصه background-color تفاوت دارند :

$blue: #3498db;
$red: #e74c3c;
$white: #fff;
 
.btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  color: $white;
}
 
.btn-primary {
  @extend .btn;
  background-color: $blue;
}
 
.btn-secondary {
  @extend .btn;
  background-color: $red;
}


مثال بالا در css به شکل زیر کامپایل می‌شود :

.btn, .btn-primary, .btn-secondary {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  color: #fff;
}
 
.btn-primary {
  background-color: #3498db;
}
 
.btn-secondary {
  background-color: #e74c3c;
}

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

Mixins

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

این کار باعث می‌شود Mixins ها قابلیت انعطاف بیشتری داشته باشند. Sass از دستور  mixin@ برای تعریف Mixins ها استفاده کرده و از دستور include@ برای استفاده از آنها در برنامه بهره می‌برید. در نمونه مثال زیر یک Mixins ساده را برای مشخصه border-radius ایجاد کرده ایم که از آن برای دکمه ها استفاده می شود :

/*
// We declare the mixin.
*/
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
 
/*
// We apply it on our button.
*/
.btn {
  @include border-radius(4px);
}

 خروجی نمونه مثال بالا در css عبارت است از :

.btn {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

نمونه مثال بالا استفاده بهینه از یک Mixins را نشان می دهد.

Partialها

Partialها فایل های کوچک Sass هستند که می توان آنها را در دیگر فایل های Sass استفاده کرد این کار باعث می شود فایل های css شما حالت ماژولار داشته باشند و عیب یابی آنها ساده تر شود. نام گذاری پارشل ها به صورت partial.scss_ است. 

نتیجه

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

منبع: لرن سورس

۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۰تیر

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

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

designer-developer

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

طراحان و توسعه دهندگان وب در مقابل هم

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

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

مزایای کار کردن با همدیگر

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

مزایای دیگر این همکاری عبارتند از :

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

معایب همکاری با یکدیگر

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

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

چه کارهایی برای این همکاری باید انجام دهید؟

wireframes

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

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

۵ نکته برای طراحان سایت

اگر یک طراح سایت هستید به این ۵ نکته توجه کنید :

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

نکاتی برای توسعه دهندگان سایت

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

مهارت هایی که هرکس میتواند از آن بهره ببرد

skill

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

  • اصول طراحی مانند رنگ فضا و تایپوگرافی
  • فرمت های بهینه برای تصاویر و اندازه آنها
  • دانش پایه ای از html و css
  • نحوه استفاده از فونت های وب
  • روند توسعه و طراحی
  • درک خواسته های کاربر
  • آشنایی با فریم ورک های مشهور و کاربردی
     
منبع: لرن سورس

۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
ساخت وبلاگ در بلاگ بیان، رسانه متخصصان و اهل قلم