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

خواندن ادامه

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

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

برنامه نویسی وب چیست

برخلاف طراحی وب (Web Design) که ظاهر (Frontend) یک نرم افزار تحت وب را تشکیل می دهد و در تعاریف به آن اشاره شد، برنامه نویسی وب (Web Programming) به منظور ایجاد تعامل و اجرای فرامین کاربر و همچنین ذخیره سازی داده در پایگاه داده و در سطح بالاتر به منظور ساخت یک نرم افزار تحت وب همچون سیستم های مدیریت محتوا نظیر وردپرس، جوملا و… است. زبان های برنامه نویسی تحت وب شامل php, asp.net, java, c++,c و… و همچنین فریمورک های مشتق شده از آنها می باشد. در برنامه نویسی به نوعی باطن یا هسته یک نرم افزار نوشته می شود و از همین جا می توان تفاوت بین این دو تعریف را درک کرد.

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

تجربه کاربری چیست

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

رابط کاربری چیست

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

انواع صفحات وب

  • وبسایت ایستا

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

  • وبسایت پویا

صفحه (dynamic) صفحه ای است که برای تعامل با کاربر غیر از استفاده از HTML و CSS از زبان های برنامه نویسی مانند PHP, ASP و.. برای ذخیره سازی اطلاعات و ساخت یک سیستم مدیریت محتوا استفاده می کند. به همین سبب اگر فردی اطلاعات لازم در مورد کار با زبان های تحت وب را نداشته باشد به راحتی می تواند از پیشخوان (Panel) که برای سایت طراحی شده صفحه خود را بسازد، مطلب بنویسد و یا ظاهر سایت را از طریق تنظیمات تعبیه شده تغییر دهد.

چه زمانی از وبسایت ایستا یا پویا استفاده می شود؟

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

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

نرم افزارهای کدنویسی

نکته: نرم افزارهای مختلفی برای کدنویسی وجود دارد که میتوان با توجه به امکانات، زیبایی، کارایی و… یکی را انتخاب کرد.

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

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

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

خواندن ادامه

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

طراحی وب چیست

ایجاد ظاهر وبسایت (نرم‌افزار تحت وب) با بهره گیری از طراحی گرافیک که معمولا پیاده سازی آن در نرم افزارهای طراحی انجام می‌پذیرد؛ و به وسیله زبان های طراحی تحت وب یعنی HTML, CSS به فرمتی برای اجرا در مرورگر تبدیل می شود.

در تعریف بالا چند نکته مشخص شد:

  1. طراحی وب، ظاهر یک نرم‌افزار تحت وب است.
  2. طراحی وب، زبان های مخصوص به خود را دارد.
  3. طراحی وب، دو مرحله اصلی دارد.

۱- طراحی وب، ظاهر نرم‌افزار تحت وب است

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

۲- طراحی وب، زبان های مخصوص به خود را دارد

برای یادگیری طراحی تحت وب باید زبان های مخصوص به آن را فرا گرفت. زیرا در محیط کدنویسی ایجاد می شوند. این زبان ها HTML, CSS ,JavaScript می باشند.

۳- طراحی وب، دو مرحله اصلی دارد

  • مرحله اول: طراحی گرافیک:

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

  • مرحله دوم: کدنویسی:

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

اچ تی ام ال چیست

Hyper Text Markup Language که به اختصار HTML نامیده می شود؛ به معنی زبان نشانه گذاری ابر متن است. یک فایل متنی ساده است که به این زبان نوشته (کدنویسی) می شود و با پسوند .html ذخیره شده و برای مرورگر قابل مشاهده است. HTML ساختار و بدنه اصلی طراحی تحت وب به حساب می آید. این زبان بر اساس وجود تگ هایی از پیش تعیین شده، نوشته شده و هر یک از تگ ها معرف عملکردی خاص است.

سی اس اس چیست

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

جاوااسکریپت چیست

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

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

در اینجا ۵ نکته طراحی وب برای بهینه سازی وبسایت برای موتورهای جستجو شرح داده می شود که سایت شما نمی تواند بدون آنها در زمینه SEO موفق عمل کند.

۱- اضافه کردن ویژگی واکنشگرا (Responsive)

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

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

۲- اضافه کردن متون مهم

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

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

۳- بهینه سازی تصاویر

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

  • نامگذاری تصویر با اضافه کردن کلمات کلیدی خاص
  • استفاده از ویژگی های HTML در تصویر
  • ایجاد یک عنوان (Caption) برای تعریف تصاویر

۴- داشتن ساختار ناوبری مبتنی بر متن

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

۵- تغییر مسیر را به یاد داشته باشید (Redirect)

در زمان تغییر مسیر به نسخه جدید صفحه وب، صفحات قدیمی خود را فراموش نکنید. حذف کردن صفحات قدیمی، سبب به وجود آمدن مشکل بیشتری خواهد شد؛ از آنجا که بازدیدکنندگان زمانیکه وارد صفحه جدید می شوند، به جای آن با صفحه ۴۰۴ مواجه خواهند شد. این موارد مشکلات بیشتری هستند؛ زیرا، موتورهای جستجو فکر میکنند که صفحه دیگر وجود ندارد بنابراین آن را از نتایج جستجو حذف خواهند کرد.

استفاده از تغییر مسیر ۳۰۱ برای انتقال از نسخه قدیمی وب به نسخه جدید، باتهای جستجو را آگاه می کند. این می تواند به شما برای بازگرداندن ترافیک، بهتر شدن سئو و همچنین حفظ کردن قدرت دامنه با استفاده از تلاش های سئو کمک کند. برای تغییر مسیر می توانید از افزونه های تغییر مسیر استفاده کنید. همچنین تماس با شرکت توسعه دهنده میتواند به شما برای ایجاد فایل جدید .htaccess در سرور وبسایت کمک کند.  شما حتی می توانید با شخصی سازی صفحه ۴۰۴ از آن در صورتیکه تغییر مسیر به صفحه جدید را فراموش کرده اید کمک بگیرید. به این صورت بازدیدکننده مستقیم به صفحات جایگزین هدایت می شود؛ در این صفحه میتواند پیوندهایی به صفحه اصلی وبسایت، صفحه درباره یا صفحه تماس قرار گیرد.

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