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

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

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

وب چیست؟

World Wide Web (WWW)، معمولاً با عنوان وب شناخته می شود، یک سیستم اطلاعاتی است که در آن اسناد و منابع دیگر وب توسط یك منبع (یك آدرس اینترنتی، مانند https://www.example.com/) شناسایی می شود. با Hypertext متصل شده و از طریق اینترنت قابل دسترسی هستند. منابع WWW از طریق پروتکل انتقال Hypertext (HTTP) منتقل می شوند و ممکن است توسط یک برنامه نرم افزاری به نام یک مرورگر وب به کاربران دسترسی پیدا کند و توسط یک برنامه نرم افزاری به نام وب سرور منتشر شود.

Tim Berners-Lee، دانشمند بریتانیایی، شبکه جهانی وب را در سال 1989 اختراع کرد. وی اولین مرورگر وب را در سال 1990 نوشت. این مرورگر در سال 1991 در خارج از CERN منتشر شد، ابتدا به سایر موسسات تحقیقاتی از ژانویه 1991 شروع شد و سپس در اوت 1991 برای عموم مردم برای تعامل در اینترنت استفاده شد.

منابع وب ممکن است انواع مدیا دانلودی باشد، اما صفحات وب رسانه های Hypertext هستند که به زبان نشانه گذاری Hypertext (HTML) قالب بندی شده اند. چنین قالب بندی اجازه می دهد تا لینک های جاسازی شده حاوی نشانی اینترنتی را در اختیار کاربر قرار دهند و به کاربران اجازه می دهد تا به سوی منابع وب دیگر حرکت کنند. علاوه بر متن، صفحات وب ممکن است حاوی ارجاعات به تصاویر، فیلم، صوتی و مؤلفه های نرم افزاری باشد که در مرورگر وب کاربر به عنوان صفحات منسجم از محتوای چندرسانه ای نمایش داده می شوند.

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

وب سایت چیست؟

وبسایت (همچنین به عنوان وب سایت نوشته شده است) مجموعه ای از صفحات وب و مطالب مرتبط است که با یک نام دامنه مشترک شناسایی می شود و حداقل در یک سرور وب منتشر می شود. نمونه های قابل توجه wikipedia.org، google.com و amazon.com هستند. کلیه وب سایت های قابل دسترسی در سطح عمومی، شبکه جهانی وب را تشکیل می دهند. همچنین وب سایت های خصوصی وجود دارند که فقط در یک شبکه خصوصی قابل دسترسی هستند، مانند وب سایت داخلی یک شرکت برای کارمندان خود.

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

معرفی طراحی وب (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) در پایتون.

مهارت ها و تکنیک های طراحی وب

طراحی بازاریابی و ارتباطات

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

طراحی تجربه کاربر و طراحی تعاملی

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

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

طرح بندی صفحه

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

Fluid layout در سال 2000 به عنوان گزینه ای برای طرح بندی های مبتنی بر HTML و طراحی مبتنی بر شبکه در هر دو اصل طراحی چیدمان صفحه و در روش رمزگذاری، محبوبیت خود را افزایش داد، اما بسیار کند بود. این امر به دلیل ملاحظات دستگاه های خواندن صفحه و اندازه متفاوت ویندوز است که طراحان هیچ کنترلی بر روی آن ندارند. بر این اساس، یک طرح ممکن است به واحدهای (نوارهای جانبی، بلوک های محتوا، مناطق تبلیغاتی جاسازی شده، مناطق ناوبری) تقسیم شود که به مرورگر ارسال می شوند و به بهترین وجه ممکن توسط مرورگر در پنجره نمایش تعبیه خواهد شد. از آنجا که مرورگر جزئیات صفحه خواننده (اندازه پنجره، اندازه فونت نسبت به پنجره و غیره) را تشخیص می دهد، مرورگر می تواند تنظیمات خاص کاربر را در طرح بندی های سیال انجام دهد، اما نه طرح های با عرض ثابت. اگرچه چنین نمایشگری اغلب ممکن است موقعیت نسبی واحدهای اصلی را تغییر دهد، نوارهای کناری ممکن است به جای قسمت جانبی آن زیر متن بدن جابجا شوند. این نمایشگر انعطاف پذیرتر از یک طرح مبتنی بر شبکه سخت کد است که متناسب با پنجره دستگاه نیست. به طور خاص، موقعیت نسبی بلوک های محتوا ممکن است هنگام ترک محتوا در بلوک تحت تأثیر قرار نگیرد. این امر همچنین نیاز کاربر را به پیمایش صفحه به صورت افقی به حداقل می رساند.

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

تایپوگرافی

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

بارگیری قلم بعدا در ماژول فونت های CSS3 گنجانده شده و از آن زمان در صفری 3.1، اپرا 10 و موزیلا فایرفاکس 3.5 اجرا شده است. این امر بعداً باعث افزایش علاقه به تایپوگرافی وب و همچنین استفاده از فونت بارگیری شده است. صفحه بندی سایت بیشتر از فضای منفی استفاده می کند تا متن را به پاراگراف تبدیل کند و همچنین از متن متمرکز جلوگیری می کند.

گرافیک متحرک

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

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

کیفیت کد

ممکن است طراحان وب سایت مطابق با استانداردها این عمل را مناسب بدانند. این معمولاً از طریق توضیحی مشخص می شود که عنصر در حال انجام چه کاری است. عدم مطابقت با استانداردها ممکن است یک وب سایت را غیرقابل استفاده یا خطا نکند، اما استانداردها می توانند به طرح صحیح صفحات برای خوانایی و همچنین اطمینان از اینکه عناصر کدگذاری شده به درستی بسته هستند مرتبط باشد. این شامل خطاها در کد، چیدمان سازمان یافته تر کد، و اطمینان از شناسایی شناسه ها و کلاس ها به درستی است. صفحات دارای کدگذاری ضعیف گاهی به صورت محاوره ای به نام tag soup گفته می شوند. اعتبارسنجی از طریق W3C فقط در صورت انجام یک اعلامیه DOCTYPE صحیح انجام می شود، که برای برجسته سازی خطاها در کد استفاده می شود. سیستم خطاها و مناطقی را که مطابق با استانداردهای طراحی وب نیستند، شناسایی می کند. این اطلاعات پس از آن توسط کاربر قابل تصحیح است.

محتوای تولید شده

دو راه برای ایجاد وب سایت وجود دارد: به صورت ایستا یا پویا.

  • وب سایت های استاتیک

یک وب سایت استاتیک برای هر صفحه از یک وب سایت استاتیک یک فایل منحصر به فرد را ذخیره می کند. هر بار که آن صفحه درخواست شد، همان محتوا بازگردانده می شود. این محتوا یک بار، در طول طراحی وب سایت ایجاد می شود. معمولاً به صورت دستی تألیف می شود، اگرچه برخی از سایت ها از یک فرآیند ایجاد خودکار استفاده می کنند، شبیه به یک وب سایت پویا، که نتایج آن در طولانی مدت به عنوان صفحات کامل ذخیره می شود. این سایت های استاتیک ایجاد شده به طور خودکار در حدود سال 2015، با ژنراتورهایی مانند Jekyll و Adobe Muse محبوب تر شدند.

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

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

  • وب سایت های پویا

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

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

هنگامی که صفحات وب پویا برای اولین بار ایجاد شدند، آنها به طور مستقیم به زبانهایی مانند Perl، PHP یا ASP کدگذاری می شدند. برخی از این موارد، به ویژه PHP و ASP، از یک رویکرد "template" استفاده می کنند که یک صفحه سمت سرور شبیه ساختار صفحه سمت کلاینت تکمیل شده است و داده ها در مکان هایی تعریف شده توسط "برچسب ها" درج می شوند. این یک روش سریعتر از توسعه از برنامه نویسی در یک کد نویسی کاملاً رویه ای مانند Perl بود.

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

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

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

وردپرس یک ابزار متن باز و آنلاین برای ایجاد وب سایت است که با 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 در سمت سرور اجرا می شود در حالی که جاوا اسکریپت برای مشتری دانلود می شود و توسط مرورگر وب اجرا می شود.

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

سی شارپ (#C) یک زبان برنامه نویسی چند پارادایم همه منظوره است که شامل تایپ قوی، اعلامی، کاربردی، عمومی، شی گرا و از نظر لغوی محدود شده و همچنین از رشته های برنامه نویسی مبتنی بر کلاس و مؤلفه ها است. سی شارپ یکی از زبان های برنامه نویسی است که برای زیرساخت زبان مشترک (CLI) طراحی شده است. سی شارپ توسط اندرس Hejlsberg طراحی شده است و تیم توسعه آن در حال حاضر توسط Mads Torgersen هدایت می شود. از آگوست 2019، نسخه 8.0 زبان در حال نمایش است و در ویژوال استودیو 2019 پشتیبانی می شود.

سی شارپ یک زبان همه کاره است که توسط آن می توانید برنامه نویسی برنامه های ویندوز، برنامه های گوشی های هوشمند، برنامه نویسی سمت سرور، بازی سازی و غیره را انجام دهید. از دات نت و سی شارپ برای ایجاد وب سایت هایی مبتنی بر HTML5 ،CSS و JavaScript استفاده می شود که ایمن، سریع و قابل استفاده در میلیون ها کاربر باشند.

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

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

جاوا از پشتیبانی جدی برای توسعه وب برخوردار است. در حالی که جاوا روی دسکتاپ، به استثنای برنامه کاربردی مبتنی بر 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 خود اعمال كنید تا به شما اجازه دهد به سرعت سایت ها و برنامه ها را بسازید.

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

انگولار (Angular)

انگولار جی اس یک فریمورک محبوب جاوااسکریپت می باشد که توسط گوگل توسعه پیدا کرده است. با انگولار شما قادر به ساخت برنامه های تک صفحه ای (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 ویندوز، فرم های ویندوز، بنیاد نمایش ویندوز، فروشگاه ویندوز و مایکروسافت سیلورلایت استفاده می کند. کد نوشته شده می تواند کد بومی یا مدیریت شده باشد.

آیا این نوشته را دوست داشتید؟
udemy-the-modern-angular-bootcamp-2020

بوت کمپ انگولار مدرن 2020


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

1399/01/18 296 بازدید زیرنویس دارد
linkedin-wordpress-custom-post-types-and-taxonomies

آموزش وردپرس: پست تایپ ها و تکسانومی های سفارشی


در این دوره، مربی Joe Casabona نشان می دهد که چگونه پست تایپ های جدید و تکسانومی ها را ایجاد کنید، یک پلاگین theme-agnostic ایجاد کنید و قالب هایی بسا...

1399/01/18 116 بازدید زیرنویس دارد
linkedin-wordpress-building-progressive-themes-with-wp-rig

آموزش وردپرس: ساخت تم های پیشرو با WP Rig


WP Rig، ابزار جدیدی است که ساخت تم های پیشرو در وردپرس را آسان می کند. این ابزار یک استارتر تم استایل دهی شده را در بر دارد که به راحتی می تواند شخصی ...

1399/01/18 146 بازدید زیرنویس دارد
linkedin-prototyping-a-wordpress-project-in-adobe-xd

نمونه سازی اولیه پروژه وردپرس در Adobe XD


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

1399/01/16 210 بازدید زیرنویس دارد
linkedin-building-angular-and-asp-net-core-applications

آموزش ساخت اپلیکیشن های Angular و ASP NET Core


آیا می خواهید وب اپلیکیشن خود را بسازید؟ در این دوره، Ervis Trupja به شما نشان می دهد که چه چیزهایی برای ساخت یک وب اپلیکیشن با استفاده از Angular، فر...

1399/01/15 341 بازدید زیرنویس دارد
infiniteskills-how-to-use-wordpress-for-e-commerce

آموزش نحوه استفاده از وردپرس برای تجارت الکترونیک


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

1399/01/15 232 بازدید
linkedin-building-angular-and-asp-net-web-api-apps

آموزش ساخت اپلیکیشن با Angular و ASP NET Web API


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

1399/01/15 0 بازدید
linkedin-programming-foundations-apis-and-web-services

مبانی برنامه نویسی: وب سرویس ها و APIs


در این دوره مربی Kesha Williams نحوه کار با چند فناوری مشهور برای ساخت وب سرویس ها را ارائه می دهد. Kesha با آماده سازی مقدمات دوره شروع کرده و سپس به...

1399/01/14 655 بازدید
linkedin-learning-moodle-3-7

یادگیری Moodle 3.7


Moodle، سیستم مدیریت یادگیری محبوب (LMS)، آموزش را متحول کرده است. مدرسان می توانند کلاسهای آنلاین را در هر مکان و هر زمان برگزار کنند. ارزیابی ها و ف...

1399/01/12 368 بازدید
linkedin-accessibility-for-web-design

آموزش قابلیت دسترسی (Accessibility) در طراحی وب


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

1399/01/12 313 بازدید
linkedin-building-angular-and-node-apps-with-authentication

آموزش ساخت برنامه های Angular و Node با احرازهویت


آیا از قبل با Angular 2 و Node.js آشنایی دارید؟ اگر چنین است، این دوره می تواند به شما کمک کند تا این دو فریمورک محبوب را در ساخت یک وب اپلیکیشن کامل ...

1399/01/12 317 بازدید
linkedin-building-bots-with-node-js

آموزش ساخت ربات با Node.js


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

1399/01/12 468 بازدید
linkedin-building-angular-and-django-apps

آموزش ساخت اپلیکیشن های Angular و Django


دانش Angular و Django REST خود را بیازمایید. در این دوره، به Rudolf Olah بپیوندید زیرا او به بررسی پیچیدگی های جفت کردن این دو فریمورک برای ساخت وب اپ...

1399/01/12 527 بازدید زیرنویس دارد
linkedin-building-a-reactive-app-with-angular-and-spring-boot-2

ساخت برنامه های واکنشگرا با Angular و Spring Boot 2


Angular به دلیل ایجاد برنامه های تک صفحه ای غنی و داده محور (SPA) معروف است، در حالی که Spring Boot یک فریمورک محبوب و قدرتمند برای توسعه بک اند است. ...

1399/01/11 345 بازدید
linkedin-learning-symfony-4

یادگیری سیمفونی 4


اپلیکیشن های PHP را با استفاده از Symfony 4، یک فریم ورک محبوب پی اچ پی MVC، به روش مدرن بسازید. در این دوره، Mike Oram در مورد نحوه ساخت یک برنامه وب...

1399/01/10 334 بازدید زیرنویس دارد
linkedin-building-your-first-cli-app-in-node

ایجاد اولین اپلیکیشن CLI در Node


با ساختن یک برنامه CLI در Node.js. مهارت های Node.js خود را در عمل به نمایش در آورید. بسیاری از توسعه دهندگان نرم افزار معمولاً از رابط های خط فرمان (...

1399/01/08 498 بازدید
linkedin-building-react-and-asp-net-core-applications

ساخت اپلیکیشن های ری اکت و ASP.NET Core


ری اکت یک فریموورک محبوب است که برای ساخت برنامه های تک صفحه ای (SPA) به همراه هسته ASP.NET بسیار مناسب است. در این دوره، مدرس دوره، Ervis Trupja با ت...

1399/01/08 950 بازدید
linkedin-vue-js-working-with-apis

آموزش Vue js: کار با API ها


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

1399/01/07 605 بازدید زیرنویس دارد
linkedin-programming-foundations-web-security

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


مربی Kevin Skoglund توضیح می دهد که چه چیزهای هکرها را تحریک می کند و روش های معمول حمله آنها چیست و سپس شرح می دهد که تکنیک ها و طرز فکر مورد نیاز بر...

1399/01/04 1130 بازدید زیرنویس دارد
linkedin-angular-essential-training

آموزش اساسی Angular


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

1399/01/04 710 بازدید
مونا 1 هفته و 1 روز قبل

چند راهکار برای بهبود رنک سایت