آموزش طراحی وب

آموزش طراحی وب

آنچه در این صفحه می خوانید:

معرفی طراحی وب (Web Design)

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

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

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

قبل از ایجاد و توسعه وب سایت باید چندین موضوع را در نظر داشته باشید:

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

فرایند توسعه وب

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

  1. هدف گذاری
  2. برنامه ریزی
  3. طراحی
  4. جمع آوری محتوا
  5. ساخت
  6. تست
  7. آپلود در سرور
  8. بازاریابی و نگهداری

آشنایی با فرانت اند

در معماری نرم‌افزار، ممکن است لایه‌های زیادی بین سخت‌افزار و کاربر نهایی وجود داشته باشد. فرانت اند (Front-End) یک انتزاع (abstract) است، که لایه‌های زیرین که تقریباً توسط کاربر غیرقابل فهم است را ساده‌سازی می‌کند تا لایه نمایشی فرانت اند را بسازد و کاربر بتواند به راحتی از آن استفاده کند. طراحی سمت کاربر به این منظور است که تضمینی وجود داشته باشد تا هنگامی که کاربر سایت را باز می‌کند بتواند اطلاعات را در قالبی ساده، خوانا و مرتبط مشاهده کند. پیچیدگی این موضوع به این حقیقت بازمی‌گردد که در دنیای مدرن و تکنولوژی، کاربران از دستگاه‌های مختلف با نمایشگر مختلف استفاده می‌کنند که توسعه دهنده را مجاب می‌کند معقول‌ترین تجربه کاربری را برای کاربر به وجود آورد. به همین جهت توسعه دهنده باید از اجرا شدن سایت در مرورگرهای مختلف (Cross-browser) و سکوهای مختلف (Cross-platform) اطمینان حاصل کند.

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

برای تولید یک سایت یا یک برنامه کاربردی وب نیاز به عمل برنامه‌نویسی HTML ،CSS و JavaScript می باشد که به‌ طور مستقیم یک کاربر می‌تواند آن را ببیند و با آن در تعامل باشد. به موجب چالشی که در توسعه سمت کاربر وجود دارد توسعه دهنده همیشه نیاز دارد تا از تغییرات ابزارها و تکنیک‌هایی که در ساخت سمت کاربر یک سایت استفاده می‌شود آگاه باشد. فردی که که قالب سایت را از طریق زبان های برنامه نویسی مانند HTML ،CSS و Javascript ایجاد میکند، توسعه دهنده سمت کاربر یا توسعه دهنده فرانت‌ اند (Front-End) نامیده می شود. همچنین باید در تعامل با توسعه دهنده بک اند (Back-End) محتوای کامل سایت را به درستی نمایش دهد.

آشنایی با بک اند

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

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

برخی از مسئولیت های توسعه دهنده بک اند عبارتند از:

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

راهکارهای پیشنهادی برای طراحی وب

  1. اگر فرد مبتدی هستید، می بایست اچ تی ام ال، سی اس اس و جاوااسکریپت را فرا بگیرید و از آنها در توسعه و ایجاد وب سایت بهره بگیرید.
  2. اگر می خواهید با سیستم های آماده وب سایت ایجاد کنید، از وردپرس، جوملا و دروپال استفاده کنید.
  3. اگر به دنبال روش ساده، سریع و محبوبی برای طراحی وب هستید، پی اچ پی و مای اس کیوال را یاد بگیرید. به همین منظور، از فریمورک های محبوب پی اچ پی نظیرSymfony ،CodeIgniter ،Yii ،Phalcon ،Laravel  CakePHP و Zend استفاده کنید.سایت هایی مانند dig ،Wikipedia و Tumblr با PHP ساخته شده اند.
  4. در صورتیکه شما برنامه نویس دات نت هستید و با سی شارپ یا VB.NET آشنایی دارید، می توانید با نرم افزار ویژوال استودیو و تکنولوژی ASP.NET یا ASP.NET MVC و اس کیو ال سرور سایت های قوی طراحی کنید. سایت هایی مانند Bing، Microsoft، StackOverflow و دیجی کالا با دات نت طراحی شده اند.
  5. اگر خواهان طراحی سایتی امن و قدرتمند با یک زبان دوست داشتنی و محبوب هستید، با پایتون و فریمورک هایی نظیر فلسک و جنگو می توانید چنین سایت هایی بسازید. سایت هایی مانند YouTube، Instagram، کافه بازار و دیوار با پایتون ایجاد شده اند.
  6. چنانچه به زبان جاوا علاقه مند هستید، می توانید سایت های قدرتمندی با جاوا و فریمورک های Spring MVC و Servlet بسازید. سایت هایی مانند IBM، Linkedin و Ebay با جاوا ساخته شده اند.
  7. در سال 2009 زبان برنامه نویسی GO در شرکت گوگل ابداع و به صورت متن باز منتشر شد. علاوه بر گوگل، شرکت های بزرگی مانند YouTube، BBC، SoundCloud و غیره از این زبان برای طراحی سیستم‌های Back-end استفاده می کنند. از این زبان برای برقراری امنیت در داده ها و حافظه، سهولت بیشتر در برنامه نویسی زبان های داینامیک و تسریع در ترجمه استفاده می شود. شما نیز می توانید در صورت تمایل وب سایت های خود را با GO طراحی کنید.
  8. اگر با Javascript برنامه نویسی می کنید و می خواهید برنامه نویسی سمت سرور با جاوااسکریپت انجام دهید، از نود جی اس استفاده کنید. سایت هایی مانند PayPal، Wall Street Journal و Shutterstock با Node.js ایجاد شده اند.
  9. در صورتیکه می خواهید وب سایت تک صفحه ای ایجاد کنید، باید بدانید که اینگونه سایت ها قدرت خود را از جاوااسکریپت می گیرند و فریمورک های متعددی برای ساخت این سایت ها مورد استفاده قرار می گیرند مانند:
  1. چنانچه قصد دارید برای سایت یا اپلیکیشن خود وب سرویس یا rest api طراحی کنید، می توانید با همه تکنولوژی های ذکر شده در بالا این کار را انجام دهید. باید بدانید که برخی از تکنولوژی های ساخت rest api فریمورک مخصوص دارند. مانند Django rest framework در پایتون.

طراحی وب با وردپرس

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

اگر از وردپرس برای انتشار در وب استفاده می کنید، در شرکت خوبی هستید. بسیاری از وبلاگ های معروف، رسانه های خبری، سایت های موسیقی، شرکت های Fortune 500 و افراد مشهور از WordPress استفاده می کنند. شما با استفاده از وردپرس قادر به ساخت انواع وبسایت اعم از سایت های فروشگاهی، شرکتی، سازمانی و ... خواهید بود. شما با استفاده از وردپرس می توانید یک وبسایت را در کمتر از 24 ساعت ساخته و آن را در معرض دید قرار دهید.

بسیاری از سیستم های مدیریت وب سایت وجود دارند که می توانید هنگام ساخت یک سایت جدید از آنها استفاده کنید، سیستم های مدیریت محتوا (CMS) همان چیزی است که می تواند این مدیریت را انجام دهد. ایده CMS این است که برخی از ابزارها برای استفاده آسان در اختیار شما قرار دهد تا بتوانید بدون اطلاع از کد نویسی، محتوای سایت خود را ویرایش کنید. در اکثر موارد، از دیدگاه کاربر، آن CMS بسیار شبیه به رابط های آشنا در Facebook یا Google Docs است. شما اساساً صفحات یا اسناد جدیدی ایجاد می کنید و سپس آنها را در وب منتشر می کنید. اما به اندازه کافی با مشخصات فنی! خوشبختانه، انتخاب بهترین مورد ساده است. فقط یک پادشاه در بالای کوه وجود دارد و این وردپرس است. WordPress در بیش از 34٪ از کل وب سایت ها استفاده می شود.

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

برای دسترسی به مجموعه آموزش های وردپرس به صفحه "آموزش وردپرس (Wordpress)" مراجعه نمایید.

طراحی وب با پی اچ پی

آنچه برای ساختن یک وب سایت پی اچ پی نیاز دارید. قبل از شروع، حتماً ویرایشگر متن ساده یا محیط توسعه آماده PHP نصب کنید. می توانید برنامه نویسی PHP را با ابزاری ساده به عنوان Windows Notepad شروع کنید. همچنین باید یک سرور وب PHP برای بارگذاری پرونده های خود داشته باشید. این ممکن است یک سرور از راه دور یا یک رایانه محلی با محیط LAMP (Linux، Apache، MySQL، PHP) یا WAMP (Windows، Apache، MySQL، PHP) باشد. اگر از Windows استفاده می کنید، برای شروع این راهنمای نصب WAMP را دنبال کنید. در آخر، برای بارگذاری پرونده های خود در سرور وب خود به یک برنامه FTP نیاز خواهید داشت. با استفاده از ویندوز؟ یکی از این سرویس گیرندگان رایگان Windows FTP را امتحان کنید.

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

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

از بهترین فریمورک های PHP برای توسعه وب:

  1. Laravel
  2. CodeIgniter
  3. Symfony
  4. Zend
  5. Phalcon
  6. CakePHP
  7. Yii
  8. FuelPHP

طراحی وب با پایتون

طراحی وب با پایتون

پایتون زبان زیبایی است. یادگیری و سرگرمی آسان است، و نحو آن (قوانین) واضح و مختصر است. پایتون یک انتخاب محبوب برای مبتدیان است، اما با این وجود هنوز هم به اندازه کافی قدرتمند است تا از محبوب ترین محصولات و برنامه های جهان از شرکت هایی مانند NASA، Google، IBM، Cisco، Microsoft، Industrial Light & Magic پشتیبانی کند.

توسعه مناطقی که پایتون می درخشد، توسعه وب است. پایتون فریمورک های زیادی را ارائه می دهد که از بین آنها می توانید از جمله bott.py، فلسک، CherryPy، Pyramid، جنگو و web2py را انتخاب کنید. این فریمورک ها برای به کار بردن برخی از محبوب ترین سایت های جهان مانند Spotify، موزیلا، Reddit، واشنگتن پست و Yelp استفاده شده است. آموزش ها و مقاله های این بخش تکنیک های مورد استفاده در توسعه برنامه های وب پایتون را پوشش می دهند و به چگونگی برنامه ریزی راه حل های واقعی برای مشکلاتی که مردم عادی در واقع مایل به حل آن هستند، می پردازد.

چرا پایتون در توسعه وب متناسب است؟

از پایتون می توان برای ساخت برنامه های وب سمت سرور استفاده کرد. در حالی که یک فریمورک وب برای ساختن برنامه های وب لازم نیست، نادر است که توسعه دهندگان از کتابخانه های منبع باز موجود استفاده نکنند تا پیشرفت خود را در کار بردن برنامه های خود سرعت بخشند. پایتون در یک مرورگر وب استفاده نمی شود. زبان اجرا شده در مرورگرهایی مانند Chrome، Firefox و Internet Explorer JavaScript است. پروژه هایی مانند pyjs می توانند از Python به JavaScript کامپایل شوند. با این حال، بیشتر توسعه دهندگان Python برنامه های وب خود را با استفاده از ترکیبی از Python و JavaScript می نویسند. Python در سمت سرور اجرا می شود در حالی که جاوا اسکریپت برای مشتری دانلود می شود و توسط مرورگر وب اجرا می شود.

طراحی وب با جاوا

طراحی وب با جاوا

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

توسعه وب

اگر یک برنامه وب ایجاد می کنید (مستقل از زبان برنامه نویسی که از آن استفاده می کنید)، به طور معمول برنامه وب خود را روی یک سرور اختصاصی (و نه رایانه محلی خود) قرار می دهید. برنامه وب روی سرور اجرا می شود و افراد می توانند به آنجا دسترسی پیدا کنند. سرور یا یک ماشین واقعی (با CPU، حافظه، دیسک سخت و غیره) یا یک سرور مجازی است که در واقع یک دستگاه است که توسط نرم افزار به ماشینهای کوچکتر تقسیم می شود. استفاده از رایانه محلی شما به عنوان سرور امکان پذیر است، اما معمولاً شما می خواهید یک سرور ثابت داشته باشید که 24 ساعت در روز، 7 روز در هفته کار کند تا مشتریان وب بتوانند همیشه تحت یک آدرس از پیش تعریف شده به سرور شما برسند. به عنوان مثال، blog.vogella.com شامل وبلاگ vogella است. این وبلاگ یک برنامه وب است که توسط WordPress ساخته شده است و یک برنامه وب است که به زبان PHP نوشته شده در سمت سرور نوشته شده است.

سرور در مقابل استقرار ابری

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

Java Java یا Java EE Java

برنامه های وب جاوا به طور معمول روی سرور اجرا نمی شوند. برنامه های وب جاوا درون یک کانتینر وب در سرور اجرا می شوند. کانتینر یک محیط زمان اجرا برای برنامه های وب جاوا فراهم می کند. این برنامه برای برنامه های کاربردی وب Java است که JVM (ماشین مجازی جاوا) برای برنامه های محلی در حال اجرا جاوا است. خود کانتینر در JVM اجرا می شود. به طور کلی، جاوا دو کانتینر را مشخص می کند: کانتینر وب و کانتینر Java EE. ظروف وب معمولی در جهان جاوا Tomcat یا Jetty هستند. یک کانتینر وب از اجرای سرویس های Java و صفحات JavaServer پشتیبانی می کند. یک کانتینر Java EE از قابلیت های اضافی، به عنوان مثال، توزیع بار سرور پشتیبانی می کند. بسیاری از فریمورک های مدرن وب جاوا مبتنی بر سرویس ها هستند. فریمورک های معروف وب جاوا عبارتند از GWT، JavaServer Faces، Struts و فریمورک Spring. این فریمورک های وب معمولاً به عنوان حداقل کانتینر یک کانتینر وب نیاز دارند.

برنامه جاوا وب

برنامه وب جاوا مجموعه ای از منابع پویا (مانند Servlets، صفحات JavaServer، کلاس ها و شیشه های جاوا) و منابع استاتیک (صفحات HTML و تصاویر) است. یک برنامه وب جاوا می تواند به عنوان یک پرونده WAR (Web Archive) مستقر شود. پرونده WAR یک فایل پستی است که حاوی محتوای کامل برنامه وب مربوطه است.

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

فن آوری های استاندارد جاوا از طریق یک فرایند استاندارد به نام فرآیند اجتماع جاوا (JCP) تعریف می شوند. فن آوری های زیر از طریق JCP تعریف شده اند.

سرورلت (Servlet)

servlet یک کلاس جاوا است که "HttpServlet" را گسترش می دهد و به درخواست HTTP در یک کانتینر وب پاسخ می دهد. آخرین نسخه رسمی Servlets 3.0 است که بخشی از Java EE 6 نیز هست.

صفحه جاوا سرور

صفحات (JSP) فایل هایی هستند که حاوی کد HTML و Java هستند. کانتینر وب JSP را برای اولین بار که به JSP دسترسی پیدا می کند، وارد یک سرویس مخفی می کند. آخرین نسخه فعلی 2.1 است.

کتابخانه برچسب استاندارد JavaServer Pages

کتابخانه Tag Standard JavaServer Pages یا به اختصار (JSTL) عملکرد اصلی مشترک بسیاری از برنامه های وب را به عنوان برچسب های ساده محاسبه می کند. نسخه فعلی 1.2 بخشی از نسخه 2.1 JavaServer Pages Specification است.

لیست برتر مبتنی بر استفاده از رتبه بندی جاوا Hotframework.com و چندین منبع دیگر از جمله پست های وبلاگ و شماره بارگیری GitHub است. سه مورد برتر در این زمینه هستند:

سایر فریمورک های قابل توجه Java Web:

فریمورک های جاوا که محبوب هستند اما برای وب نیستند:

  • Hibernate (متمرکز بر داده)
  • Maven (متمرکز بر ساخت)
  • Apache Ant with Ivy (متمرکز بر ساخت)

طراحی صفحات وب با HTML و CSS

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

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

بوت استرپ (Bootstrap)

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

بوت‌استرپ یک پروژه محبوب در GitHub است که توسط NASA و MSNBC و بسیاری دیگر ازسایت ها استفاده شده است. با استفاده از اطلاعات رابط برنامه‌نویسی (API) در بوت استرپ می‌توان اجزاء واسط پیشرفته مانند scroll spy و تکمیل کننده خودکار کلمات (typeahead) را بدون نیاز به نوشتن حتی یک خط کد جاوا اسکریپت ایجاد نمود.

طراحی وب با جاوااسکریپت

جاوااسکریپت یک زبان برنامه نویسی تمام عیار است که با استفاده از یک سند HTML می تواند تعامل پویا در وب سایت ها ایجاد کند. این اختراع توسط Brendan Eich، بنیانگذار پروژه موزیلا، بنیاد موزیلا و شرکت موزیلا ساخته شده است. JavaScript بسیار دوستانه و مبتدی است. با تجربه بیشتر، شما قادر خواهید بود برای ایجاد بازی ها، گرافیک های متحرک 2D و 3D، برنامه های جامع مبتنی بر بانک اطلاعاتی و موارد دیگر استفاده کنید! خود JavaScript نسبتاً فشرده و در عین حال بسیار انعطاف پذیر است. توسعه دهندگان ابزارهای متنوعی را در بالای زبان اصلی جاوا اسکریپت نوشتند، که مقدار زیادی از کارکردهای اضافی را با حداقل تلاش باز می کنند. این شامل:

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

فریمورک های متعددی برای ساخت این سایت ها مورد استفاده قرار می گیرند مانند:

انگولار جی اس

انگولار جی اس یک فریمورک محبوب جاوااسکریپت می باشد که توسط گوگل توسعه پیدا کرده است. با انگولار شما قادر به ساخت برنامه های تک صفحه ای (Single Page) هستید. فریمورک انگولار به خوبی معماری MVC را در سمت کلاینت (کاربر) پیاده سازی می کند. انگولار از اچ تی ام ال، Css و  جاوااسکریپت استفاده می کند و تقریبا می توان گفت که نقص های آن ها را برطرف می کند. با توجه به سرویس تجزیه و تحلیل جاوا اسکریپت (Libscore)، انگولار جی اس در وب سایت های Wolfram Alpha ،NBC ،Walgreens ،Intel ،Sprint ،ABC News و بسیاری سایت های دیگر مورد استفاده قرار می گیرد. AngularJS بخش فرانت اند از MEAN-Stack است که متشکل از پایگاه داده مانگو دی بی، اکسپرس جی اس، نود جی اس و خود انگولار جی اس می باشد.

نود جی اس (Node.js)

Node.js  یک محیط زمان اجرای متن باز و cross-platform (چندسکویی) برای جاوا اسکریپت است که کد جاوا اسکریپت را در خارج از یک مرورگر اجرا می کند. Node.js  به توسعه دهندگان اجازه می دهد تا از JavaScript برای نوشتن ابزارهای خط فرمان و اسکریپت نویسی سمت سرور استفاده کنند. در نتیجه، Node.js  با یکپارچه سازی توسعه برنامه وب حول یک زبان برنامه نویسی واحد، به جای زبان های مختلف برای اسکریپت های سمت سرور و مشتری به عنوان یک نمونه  everywhere نشان داده می شود.
گرچه .js فرمت استاندارد نام پرونده برای کد JavaScript است، اما نام "Node.js" در این زمینه به پرونده خاصی اشاره نمی کند و صرفاً نام محصول است. Node.js دارای معماری مبتنی بر رویداد است که توانایی ورودی /خروجی ناهمگام یا غیر همزمان را دارد. این گزینه های طراحی با هدف بهینه سازی توان و مقیاس پذیری در برنامه های وب با بسیاری از عملیات ورودی / خروجی و همچنین برای برنامه های وب در زمان واقعی (به عنوان مثال ، برنامه های ارتباطی در زمان واقعی و بازی های مرورگر) انجام می شود.

Backbone

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

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

Knockout

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

Vuejs

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

آیونیک (Ionic)

آیونیک یک SDK کامل اوپن سورس برای توسعه نرم افزار های هیبریدی موبایل است که توسط Max Lynch ،Ben Spree و Adam Bradley از شرکت Drifty در سال 2013 ایجاد شده است. نسخه اصلی در سال 2013 منتشر شد و روی انگولار جی اس و کوردوا ساخته شده است. با این حال، آخرین نسخه به عنوان مجموعه ای از قطعات وب بازسازی شد و به کاربر اجازه می دهد که هر فریمروک رابط کاربری مانند انگولار، ری اکت یا Vue.js را انتخاب کند. همچنین امکان استفاده از اجزای آیونیک بدون فریمروک رابط کاربری را فراهم می کند.

Ionic ابزارها و خدمات برای توسعه هیبریدی تلفن همراه، دسکتاپ و برنامه های پیشرفته وب مبتنی بر فن آوری و شیوه های توسعه وب سایت های مدرن، با استفاده از فناوری های وب مانند CSS، اچ تی ام ال و SASS را فراهم می کند. به طور خاص، برنامه های تلفن همراه را می توان با استفاده از این فناوری های وب تولید کرد و سپس با استفاده از فروشگاه های برنامه های اصلی برای نصب بر روی دستگاه با استفاده از Cordova یا Capacitor توزیع نمود. آیونیک یک فریمروک توسعه ترکیبی است و از فناوری های وب برای نوشتن و ارائه برنامه استفاده می کند و برای دسترسی به ویژگی های نیتیو از فون گپ و کوردوا استفاده می کند. سپس سعی می کند که رفتار های نیتیو خود را برای ارائه بهترین تجربه کاربر، تکرار کند.

ری اکت (React)

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

Ember

Ember.js یک فریمورک منبع باز، جاوا اسکریپتی، رایگان و سمت کلاینت است که برای توسعه برنامه های کاربردی وب طراحی شده. Ember.js اجازه می دهد تا برنامه های جاوا اسکریپت سمت کلاینت با ارائه یک راه حل کامل که حاوی مدیریت داده ها و جریان برنامه باشد ایجاد شوند. نام اصلی Ember.js فریمورک SproutCore MVC بود که در سال 2011 توسط Yehuda Katz توسعه داده شد.

نرم افزارهای طراحی وب

ادوبی دریم ویور (Adobe Dreamweaver)

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

ویژوال استودیو کد (Visual Studio Code)

ویژوال استودیو کد، یک ویرایشگر کد رایگان، چندسکویی، فوق العاده سریع و سبک وزن است که توسط مایکروسافت برای ویندوز، لینوکس و Mac ایجاد شده است. از آنجا که بسیاری از توسعه دهندگان از ویندوز به عنوان محیط توسعه خود استفاده می کنند، اما تعداد زیادی از توسعه دهندگان لینوکس و مک را به کار می گیرند. بنابراین Visual studio code برای آنها نیز ساخته شده است. Visual studio code مبتنی بر فریمورک Electron می باشد که برای ساخت نرم افزار دسکتاپ چند سکویی با استفاده از فناوری های وب مورد استفاده قرار می گیرد. همچنین برای استقرار اپلیکیشن های Node.js برای اجرا بر روی دسکتاپ بر روی موتور طرح ریزی Blink استفاده می شود.

ویژوال استودیو (Visual Studio)

ویژوال استودیو مجموعه کاملی از ابزارهای توسعه برای ساخت برنامه های کاربردی وبASP.NET، خدمات وب XML، برنامه های کاربردی دسک تاپ و برنامه های کاربردی تلفن همراه است. ویژوال بیسیک، ویژوال سی سی و ویژوال سی پلاس پلاس همه از یک محیط توسعه یکپارچه (IDE) استفاده می کنند که به اشتراک گذاری ابزار و ایجاد راه حل های مخلوط زبان را آسان می کند. علاوه بر این، این زبان ها از قابلیت های چارچوب .NET استفاده می کنند که دسترسی به فن آوری های کلیدی را فراهم می کند که ساده سازی برنامه های وب ASP و خدمات وب XML را ساده می کند.

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

آیا این نوشته را دوست داشتید؟