سایت شخصی آموزش طراحی وب

 

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

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

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

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

در مرحله اول شما باید html , css  را یاد بگیرید. برای طراحی قالب نیز به کار با فتوشاپ احتیاج دارید. بعد از یادگیری html,css,photoshop و تبدیل با ورد پرس با کد های php  میتوانید تمامی کارهای لازم برای راه اندازی سایت وردپرسی خود را انجام دهید. اگر زبان انگلیسی را تا حد متوسط بلد باشید میتوانید سایت w3schools  را برای یادگیری انتخاب کنید. برای یادگیری با ویدئو میتوانید از یوتیوب استفاده کنید اما در یوتیوب نیز فیلم های انگلیسی کیفیت بالاتری دارند.

طراحی سایت با تکنولوژی های پیشرفته

طراحی سایت با تکنولوژی در برگیرنده کد نویسی های html,css  نیز هست. اما مسئله مهم تر در این زمینه یادگیری نحوه استفاده از فریمورک مربوطه است. برخی فریمورک ها مانند react  پیچیدگی ساختاری خاصی ندارند اما تکنولوژی های سنگین تر مانند angular  نیاز به زمان بیشتری برای یادگیری ساختار دارید. ویژگی مهم این تکنولوژی اینست که انواع اپ ها را میتوانید با این تکنولوژی ها پیاده کنید.

تکنولوژی های سمت سرور نیز شامل mvc,dotnetاز سنگین ترین ساختار های طراحی سایت هستند اما امنیت بالا و اختصاصی بودن این سایت ها از جمله ویژگی هایی است که برای سایت های تخصصی مهم است.

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

 

 

 

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

Html

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

Css

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

 

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

کاربردLess, Sass

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

JQuery

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

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

 

 

 

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

تگ های   : html خروجی هر سایت در مرورگر به زبان html  است. تگ ها در این زبان یک برچسب هستند که معرف قسمت مختلف سایت است. به طور مثال: head, title و .. از مهم ترین تگ های html  هستند.  

تگ lang:

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

Title

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

Description

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

Keywords

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

Content-Type

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

Viewport

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

Robots

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

 Google-site-vertification

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

 shortcutIcon

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

Theme-color

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

Auther

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

Generator

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

Open Graph data

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

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

Expires

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

Dns-prefech

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

Stylesheet

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

Blockguote

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

 

 

 

برای بررسی عملکرد درست سئو و تولید محتوا باید شاخص عملکرد خود را بررسی کنید. در اصلاح بررسی این کار KPI     نامیده میشود. در این مقاله KPI های مربوط به سایت را بررسی میکنیم

1)      تعداد بازدیدکننده‌های یونیک

2)      منبع ترافیک

3)      تعداد پست‌های وبلاگ

4)      نرخ تبدیل

5)      تعداد بازدید با دستگاه‌های مختلف

6)      Time on page

7)      میزان اسکرول کردن

8)      Bounce Rate

9)      تعداد دانلود

برای استفاده درست از ابزار https://analytics.google.com است. این سایت به شما قابلیت بررسی دقیق موارد بالا را میدهد.

 

1)      تعداد بازدیدکننده‌های یونیک

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

2)      منبع ترافیک

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

3)      تعداد پست‌های وبلاگ

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

4)      نرخ تبدیل

چند درصد از ورودی های شما به مشتری تبدیل میشوند. شاید لازم باید شما یک تغییری در لندینگ پیج بدهید تا کاربر وارد شده را به مشتری تبدیل کنید.

 

5)      تعداد بازدید با دستگاه‌های مختلف

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

6)      Time on page

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

7)      میزان اسکرول کردن

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

Bounce Rate(8

درصدی از بازدیدکنندگان که صفحه‌ای را باز می‌کنند و در عرض چند ثانیه آن را می‌بندند. این صفحه میتواند نشان دهنده صفحات هدف کاربر یا ناامید شدن کاربر باشد!.

9) تعداد دانلود

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

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