‫بسمه تعالی‬

‫خالصه ی فصل های اول ‪ ،‬هفتم و هشتم کتاب برنامه نویسی وب‬

‫پویا سلیمانی فر‬

‫‪980044879‬‬
 ‫برنامه نویسی ‪HTML‬‬
‫برنامه های تحت وب را میتوان به دو دسته تقسیم کرد ‪:‬‬
‫‪ 1‬برنامه های ‪Static‬‬
‫‪ 2‬برنامه های ‪Dynamic‬‬
‫برنامه های ‪ Static‬برنامههای هستند که صفحات آنها از تصاویر صوت متن و غیره تشکیل‬
‫شده است احتماال یک یا چند لینک به سایر آدرسها در آنها قرار گرفته است و در نتیجه می‬
‫توان گفت این گونه برنامه ها در تامل با کاربر قرار ندارد ‪ ،‬و کاربران تنها میتوانند از‬
‫صفحات از پیش طراحی شده استفاده‬
‫کنند‪.‬‬
‫برنامه ‪ Dynamic‬برنامههای هستند که داده ای را از کاربر دریافت میکنند ‪ ،‬مورد پردازش‬
‫قرار می دهند و نتیجه آن را در اختیار کاربر قرار میدهند پس میتوان گفت خصیصه اصلی‬
‫آنها این می باشد که با کاربر در تامل بوده و با گرفتن ورودیها از کاربر برای او تحلیل و یا‬
‫پردازشی انجام داده و با توجه به در خواست کاربر به او سرویس می‬
‫دهند‪.‬‬
‫زبان نشانه گذاری متن ‪HTML = Hyper Text Markup Language‬‬
 ‫برای نوشتن برنامه ها یا سایتهای استاتیک از نرم افزارهای گوناگونی استفاده میشود ولی‬
‫توجه داشته باشید که در انتها صفحه طراحی شده باید به فرمت فایلهای متنی و ‪ Html‬برای‬
‫نمایش در وب تبدیل‬
‫این زبان ‪ ،‬یک زبان مبتنی بر متن یا ‪ Text Base‬می باشد که ساختار آن بر تگ ها بنا شده‬
‫است‬
‫یک سند ‪ Html‬یک پرونده مبتنی بر متن است که معموال با پسوند ‪ htm‬یا ‪ ).html‬نام‬
‫گذاری شده محتویات آن از برچسبهای ‪ Html‬تشکیل می شود ‪.‬‬
‫در این می باشد که کامپایر کل برنامه رو در صورت صحیح بودن اجرا می کند اما اینتر‬
‫پرتر خط به خط کد را اجرا می کند به عبارت دیگر زماری که یک کامپایر می خواهد یک‬
‫برنامه را کامپایل کند باید به تمام کدها برنامه دسترسی داشته باشد و همه آنها را ابتدا خوانده‬
‫و بررسی کند که آی در آن خطا وجود دارد طی خیر سپس در صورتی که برنامه خطای‬
‫نداشته باشد آن را کامپایل نموده و برنامه اجرا می شود اما در اینتر پرتر روند دیگری وجود‬
‫دارد به این ترتیب که برنامه ها در هنگام فعالیت لی تفسی دستورات به صورت خط به خط‬
‫بهش رفته و در همان لحظه آن خط را اجرا کرده و نتیجه آن را نمایش می دهد اینتر پرتر در‬
‫صورت برخورد با خطا در آن خط اعالم خطا می کند اما متوقف نمی شود ‪ compiler‬با‬
‫‪ interpreter‬و هچرین اسکریپتها رو دارد فرق ‪ Html‬قابلیت تفسرو تگهای ‪interpreter‬‬
‫لی مقصر کارمی کند ‪ interpreter‬یک نرم افزار است که به صورت‪web browser : -‬‬
‫‪Web Browser‬‬
‫‪ -‬شروع کار با ‪: Html‬‬
‫برای آغاز کار با ‪ Html‬باید از یک ‪ Editor‬استفاده کنید که در این رابطه میتوان به‬
‫‪ WordPad ، Notepad‬و ‪ Microsoft Office‬اشاره کرد ‪ ،‬البته برای نوشتن دستورات‬
‫‪ Html‬ویرایشگرهای‬
‫پیشرفته وجود دارد ‪.‬‬
 ‫‪ -‬ساختار تگ ها در ‪: Html‬‬
‫یک تگ یا نشانه همیشه با عالمت کوچکتر ریاضی (>) آغاز شده و با عالمت بزرگتر () به‬
‫پایان میرسد‪.‬‬
‫فرم کلی تگها به صورت زیر است ‪:‬‬
‫< ‪>Start Tag > Text </End Tag‬‬
‫یک تگ ممکن است دارای تعدادی ویژگی باشد این ویژگی خواصی را برای آن متن بیان‬
‫می کند این ویژگی در تگ آغازین نوشته میشود و شامل موارد متعددی هستند که بسته به‬
‫نوع تگ ها متفاوت است اکثر تگ ها دارای ویژگی هستند تگ زیر خاصیت رنگ زمینه را‬
‫به رنگ قرمز تنظیم می کند ‪.‬‬
‫<‪>body bg color="red"> Text </body‬‬
‫بعضی از تگ ها از یک بخش تشکیل شدهاند که آن تگها موضوعی را در برنمی گیرند و‬
‫فقط برای انجام عملی به کار میرود و فرمول آن به شکل زیر است ‪:‬‬
‫<‪>/br‬‬
‫این تگ برای شکستن یک سطر و رفتن به سطر بعدی مورد استفاده قرار میگیرد ‪ .‬نکته قابل‬
‫توجه دیگر در مورد تگ ها این است که نحوه قرار گیری متن در بین دو تگ اهمیتی ندارد ‪.‬‬
‫سند ‪: Html‬‬
‫سند ‪ Html‬ساختاری است که با استقاده از آن یک صفحه وب را ایجاد میکند این ساختار به‬
‫صورت کلی‬
‫به شکل زیر است ‪:‬‬
‫شروع سند <‪>html‬‬
‫<‪>head‬‬
‫<‪>title‬عنوان<‪>/title‬‬
‫<‪>head/‬‬
 ‫<‪>body‬‬
‫بدنه اصلی سند‬
‫<‪>body/‬‬
‫پایان سند<‪>html‬‬
‫بعد از کامل شدن یک سند ‪ Html‬مانند سند باال باید آن را در سطح دیسک ذخیره کرد اما‬
‫توجه باید داشت‬
‫که پسوند فایل یا سند شما ) ‪ ) html.‬یا ( ‪ ) .htm‬باشد‬
‫‪ -‬متن ها در ‪Html‬‬
‫متن را بصورت برجسته نمایش میدهد متن را بصورت بزرگ نمایش میدهد متن را بصورت‬
‫مورب نمایش میدهد متن را بصورت مورب نمایش میدهد متن را بصورت کوچک نمایش‬
‫میدهد متن را بصورت برجسته نمایش میدهد متن را بصورت زیرنویس نمایش میدهد متن را‬
‫بصورت باالنویس نمایش میدهد‬
‫قطعه متنی را که در متن اصلی جا داده شده نمایش میدهد‬
‫‪ -‬پاراگراف بندی متون برای پارگراف بندی متون از تگ <‪ >p‬استفاده میکنیم که متن یک‬
‫پاراگراف با‬
‫پاراگراف بعدی به اندازه دو خط خالی می گذارد ‪.‬‬
‫‪ -‬لیستهای تعریف ‪ :‬لیستی از عبارات و توضیحات مربوط به عبارت میباشد ‪ ،‬برای تعریف‬
‫این لیست از تگ <‪ >dl‬استفاده میشود‪ .‬به این صورت که ابتدا و انتها لیست آن تگ قرار‬
‫میگیرد ‪ ،‬سپس در بدنه این لیست عناوین و عباراتی که میخواهیم تعریف کنیم را در تگ <‬
‫‪ >dt‬قرار داده و تعریف مربوط به آنها را در تگ <‪ >dd‬و بالفاصله پس از آنها قرار می‬
‫دهیم ‪.‬‬
‫‪ -‬آشنایی با تگ ‪ a:‬کار تگ ‪ a‬ساخت لینک به بقیه صفحات است‪ .‬برای ایجاد لینک از تگ <‬
‫‪ >a‬استفاده شود‪ .‬این تگ دارای یک صفت (‪ )href‬باشد که برای آدرس دهی به مقصد مورد‬
‫نظر استفاده شود‪..‬‬
‫‪ -‬اضافه کردن تصویر به صفحه ‪ :‬هرگاه بخواهید به صفحه خود به جز متن‪ ،‬تصویری را‬
‫اضافه کنید باید از تگ <‪ >img‬استفاده کرد که مخفف ‪ Image‬می باشد‬
‫این تگ دارای شناسه به نام ‪ Src‬میباشد این شناسه آدرس محل فایل عکس را به عنوان مقدار‬
‫دریافت می کند توجه داشته باشید که تگ ‪ Image‬تنها از یک قسمت تشکیل شده و قسمت‬
‫ابتدائی و انتهای ندارد ‪.‬‬
‫‪ -‬لینک های ‪ :E-mail‬در این قسمت میخواهیم لینکی ایجاد کنیم که بیننده بتواند با کلیک‬
‫برروی آن به آدرس تعیین شده ایمیل بفرسد برای اینکار از تگ <‪ >a‬استفاده میشود اما‬
‫تفاوت این لینک با لینک به یک صفحه در آدرسی است که به عنوان مقصد لینک نوشته‬
‫میشود برای اینکه مرورگر را مجبور کنیم لینک را به عنوان لینک ایمیل بشناسد باید از‬
‫عبارت ‪ mailto‬به جای ‪ Http‬در آغاز آدرس استفاده کنیم و بعد از آن آدرس ایمیل را‬
‫بنویسیم‪.‬‬
‫برنامه نویسی سوکت‬
‫جهت ارسال پیام ها در طول شبکه استفاده می شوند‪ .‬آنها فرمی ‪ Socket API‬سوکت ها و‬
‫را فراهم می کنند‪. ‬‬

‫شبکه و سوکت ها مباحث بزرگی هستند و درموردشان تحت اللفظی در کامپیوتر زیاد حرف‬

‫زده شده است‪ .‬اگر زمینه سوکت پروگرمینگ و شبکه برایتان تازه است این کامال معمولی‬
‫است که در ارتباط با واژگان و مفاهیم یه مقدار احساس دستپاچگی بکنید‬

‫‪:‬خب پس مسئله اصلی ارتباط بین کامپیوتر ها می باشد‬

‫دو مسئله اصلی مطرح می شود‪:‬‬

 ‫آدرس دهی (‪)Addressing‬‬ ‫‪‬‬

‫تعیین کامپیوتر ریموت و سرویس ها‬ ‫‪o‬‬

‫انتقال داده ها‬ ‫‪‬‬

‫آدرس دهی از طریق آدرس های ‪ IP‬انجام می گیرد‪ .‬برنامه ها و سرویس ها نیز هر کدام‬
‫شماره پورتی مخصوص به خود دارند‬
‫دو نوع پایه برای ارتباطات و انتقال وجود دارد‪:‬‬
‫جریان ها (‪ : )TCP – Streams‬کامپیوتر ها ارتباطی را با یکدیگر برقرار کرده و‬ ‫‪‬‬

‫در جریانی متصل از بایت ها (همانند یک فایل) داده های خود را ‪ read/write‬می‬
‫کنند‪ .‬این رایج ترین نوع می باشد‪.‬‬
‫دیتاگرام (‪ : )UDP‬کامپیوتر ها بسته (پیام) های جدا از هم را به یکدیگر ارسال می‬ ‫‪‬‬

‫کنند‪ .‬هر بسته شاملی تعدادی بایت می باشد‪ ،‬اما هر بسته جدا‪ ،‬مستقل و کامل می‬
‫باشد‪.‬‬
‫سوکت ‪ :‬نقطه ی پایانی یک اتصال را سوکت می گویند‪ .‬توسط ماژول کتابخانه سوکت‬
‫پشتیبانی می شود‪ .‬و در حقیقت اجازه ی برقراری اتصال و انتقال داده ها را می دهد‪.‬‬
‫همین طور که جلوتر خواهید دید‪ ،‬ما یک ‪ object‬از سوکت را با استفاده از‬
‫‪ )(socket.socket‬خواهیم ساخت و نوع سوکت را از طریق‬
‫‪ socket.SOCK_STREAM‬مشخص می کنیم‪ .‬زمانی که شما این کار را انجام دهید‪،‬‬
‫پروتوکل پیش فرضی که استفاده می کنید پروتکل ‪( TCP‬جریانی‪ )stream -‬خواهد بود‪( .‬‬
‫)‪ )Transmission Control Protocol (TCP‬این پیشفرضی خوبی خواهد بود و شما هم‬
‫در آینده تاییدش خواهید کرد‬
‫چرا باید از ‪ TCP‬استفاده کنید؟‬
‫چون که پروتکل کنرل انتقال (‪:)TCP‬‬
‫قابل اطمینان‪ :‬بسته های افتاده شده در شبکه قابل تشخیص هستند و توسط ارسال کننده‬ ‫‪‬‬

‫انتقال داده می شود‪.‬‬

‫دارای‪ ‬تحویل داده به ترتیب‪ ‬است‪ :‬داده ها د راپلیکیشن شما به تریتب ارسالی که‬ ‫‪‬‬

‫توسط ارسال کننده نوشته شده است‪ ،‬خوانده می شوند‪.‬‬

‫در مقابل‪ ،‬سوکت های پروتکل دیتاگرام کاربر (‪)User Datagram Protocol – UDP ‬‬
‫توسط ‪ socket.SOCK_DGRAM‬ساخته شده و قابل اطمینان نیست و داده ی خوانده شده‬
‫توسط گیرنده ممکن خارج از ترتیب ارسال توسط ارسال کننده باشد‪.‬‬
‫‪: Dreamweaver‬‬
‫نرم افزاری است که به شما امکان می‌دهد وب سایت طراحی کرده‪ ،‬بسازید و منتشر کنید‪.‬‬
‫این یک برنامه بومی است که به این معنی است که می‌‌توانید آن را روی رایانه شخصی یا‬
‫‪ Mac‬خود نصب می‌کنید‪.‬‬
‫این یک برنامه انعطاف پذیر است به این صورت که می‌توانید وب سایت خود را بطور کامل‬
‫از طریق ویرایشگر بصری یا فقط از طریق کد بسازید‪ .‬شما همچنین می‌توانید از این دو در‬
‫کنار هم استفاده کنید (مشروط بر این که اصول کدنویسی را بدانید) تا ببینید چطور هر یک‬
‫بر دیگری تاثیر می‌گذارد‪.‬‬
‫همچنین از طیف گسترده‌ای از زبان‌های مورد نیاز برای ساختن هر نوع وب سایت مانند‬
‫‪ HTML ، HTML5 ، CSS ، PHP ، Javascript‬و ‪ jQuery‬پشتیبانی می‌کند‪.‬‬
‫دریم ویور‪ ،‬یک ویرایشگر کد است که ویژگی‌های زیاد و کاملی دارد و به تمامی‬
‫عملکردهای استاندارد مجهز است از جمله‪:‬‬
‫‪ :Syntax Highlighting‬این یعنی دریم ویور المان‌های مختلف (مثل اپراتورها‪،‬‬ ‫‪‬‬

‫متغیرها و …) را در رنگ‌های مختلف برجسته‌سازی می‌کند تا خواندن و اصالح‬

‫کدها آسان‌تر شود‪.‬‬
 ‫‪ :Code Completion‬به همان روشی که ‪ autocomplete‬روی گوشی کار‬ ‫‪‬‬

‫می‌کند‪ ،‬فعالیت دارد‪ .‬شروع به تایپ می‌کنید و ویرایشگر آن چیزی را که قصد نوشتن‬
‫دارید پیشنهاد می‌دهد‪ .‬به این ترتیب‪ ،‬نیازی نیست که شما همه چیز را بطور کامل‬
‫تایپ کنید‪.‬‬
‫خواندن کدها را آسان‌تر‬
‫ِ‬ ‫‪ :Code Collapsing‬یکی دیگر از ویژگی‌هاست که‬ ‫‪‬‬

‫می‌کند‪ .‬به شما اجازه می‌دهد تا بخش‌هایی از کد را که به آنها نیاز ندارید‪ ،‬کوچک‬
‫کنید‪ .‬با این روش‪ ،‬نیاز نیست که کل فایل را اسکرول کنید‪ ،‬به راحتی می‌توانید فقط با‬
‫بخش‌های مورد نیاز آن کار کنید‪.‬‬
‫دریم ویور مهم‌ترین زبان‌ها را هم برای طراحی وب (‪HTML5 ،CSS ،JavaScript ،P‬‬
‫‪ )HP‬و هم موارد دیگر پشتیبانی می‌کند‪.‬‬
‫بهترین بخش‪ :‬اگر چیزی را در کد تغییر دهید‪ ،‬دریم ویور به طور خودکار آن تغییر را در‬
‫قابل دیدن است‪ ،‬نشان می‌دهد‪ .‬بنابراین می‌توانید بدون نیاز به آپلود فایل‌ها در‬
‫قسمتی که ِ‬
‫سرور یا باز کردن مرورگر‪ ،‬آن را ببینید‪.‬‬

‫جومال‪:‬‬
‫بعد از وردپرس‪ ،‬دومین سیستم مدیریت محتوای محبوب برای طراحی سایته‪ .‬برای تنظیم‬
‫یک وب سایت جدید‪ ،‬عوامل زیادی هست که باید در نظر گرفته بشه مثل طراحی و نام‬
‫دامنه‪ ،‬اما مهمترین گزینه انتخاب پلت فرم مناسبه که حیاتی ترین انتخابه و تصمیم سختی‬
‫است‪ .‬تعدادی از عوامل وجود داره که باید در نظر گرفته شوند مانند هزینه‪ ،‬زمان‪ ،‬کیفیت‪،‬‬
‫انعطاف پذیری و کاربری؛ تنها یک سیستم مدیریت محتوا وجود دارد که میلیونها نفر در‬
‫سراسر جهان از جمله برخی از شرکتهای معتبر ازش استفاده می کنن و تمام این نیازها را‬
‫برآورده میکنه که جومال است‬
‫جومال به هر شکلی که شما بخواید سفارشی سازی میشه‪ .‬هزاران قالب‪ ،‬اجزاء‪ ،‬پالگین ها و‬
‫ماژول ها وجود داره که به شما کمک می کند سایتتون رو منحصر به فرد کنید‪ .‬هر چی که‬
‫شما می خواید انجام بدید‪ ،‬توانایی انجامش رو دارید‪ .‬اگر هیچ کدوم از تم های رایگان موجود‬
‫در جومال با سلیقه شما یکی نبود با نمی دونستید که چطور در پلتفرم جومال وب سایتتون رو‬
‫توسعه بدید‪ ،‬از فروشنده هایی کمک بگیرید که تم هایی با کیفیت باال در اختیارتون قرار‬
‫میدن‪.‬‬
‫در نسخه ‪ 3.3‬جومال ‪ Microdata‬رو به بازده هسته معرفی کرد و اولین ‪ CMS‬بزرگ در‬
‫این زمینه است‪ .‬یکی از این ویژگی ها اخیراً برای کمک به زمانی که ‪ URL‬های تکراری‬
‫وجود داره مثل وقتی که یک پست در لیست دسته و یک آیتم منوی مستقیم وجود دارد‪ ،‬ارائه‬
‫شده است‪ .‬جومال شامل یک تگ ‪ URL‬کانونی در منبع می شود که گوگل می داند که هر‬
‫رتبه بندی فقط برای یک ‪ URL‬استفاده میشه‪ ،‬و البته‪ ،‬شما می توانید تمام فراداده های خود (‬
‫‪ )Metadata‬را مانند کلمات کلیدی‪ ،‬توصیف ها و عناوین صفحه کنترل کنید و اگر این کافی‬
‫نیست‪ ،‬دایرکتوری جومال صدها افزونه در رده جستجو و نمایه سازی دارد‪.‬‬

‫در حال حاضر جومال یکی از ایمن ترین سیستم های مدیریت محتواست اما بی شک به دلیل‬
‫‪ Open Source‬بودن‪ ،‬مواردی هستند که باعث کاهش امنیت میشن و مواردی هم هستند که‬
‫ما باید رعایت کنیم تا با مشکلی مواجه نشیم‬
‫در جومال شما صفحات رو در یک جا ایجاد می کنید ولی در جایی دیگر دیده میشن (این‬
‫خیلی مهمه حتما ً یادتون بمونه)‪ .‬هر چیزی که شما در جومال ایجاد می کنید به طور خودکار‬
‫در سایت شما نمایش داده نمیشه‪ ،‬بنابراین در اینجا یک راهنمای مختصر در مورد چگونگی‬
‫ایجاد یک صفحه و‪ ،‬مهمتر از آن‪ ،‬نحوه نمایش آن در وب سایت شما براتون آماده کردم ‪:‬‬
‫‪ -1‬ایجاد صفحات جومال توسط منوها‪ ،‬به اینصورت´ که از دستور – ‪Menus – Manage‬‬
‫‪ Add New Menu‬استفاده می کنیم‪.‬‬
 ‫‪ -2‬در حال حاضر شما احتماال می خواهید برخی از صفحات را در منو جدیدی که ساختید‬
‫نمایش بدید برای این کار به – ”‪Menu – “Name of the Menu you’ve just created‬‬
‫‪ Add New Menu Item‬برید و هر موردی که احتیاج دارید ایجاد کنید‪ .‬این موارد جدید‪،‬‬
‫صفحات وب سایت شماست‪.‬‬
‫‪ -3‬اگر میخواهید این صفحات در وبسایت شما ظاهر شوند‪ ،‬الزمه که ماژولها رو بهشون‬
‫اضافه کنید‪ .‬ماژول ها ابزارهای مخصوص جومال برای نمایش موارد در وب سایت هستند‪.‬‬
‫در هنگام ایجاد آیتم های منو‪ ،‬باید زبانه ای به نام ‪ Module Assignment‬ببینید که می‬
‫تونید بین ماژول هایی که در آنجا وجود دارد انتخاب کنید‪ ،‬یا اینکه می تونید به نوار ابزار‬
‫‪ Extensions – Modules‬برید که در اونجا می تونید ماژول های جدید ایجاد کنید و آیتم‬
‫های منو را به آنها اختصاص بدید‪.‬‬

‫‪google web designer‬‬

‫ابزار گوگل وب دیزاینر برنامه ای برای طراحی و ایجاد وب سایت های ‪ HTML5‬و‬
‫بنرهای تبلیغاتی است‪ .‬این یک نرم افزار مستقل برای ویندوز‪ ،‬مک و لینوکس است‪ .‬گوگل‬
‫وب دیزاینر یک ویرایشگر ‪( WYSIWYG‬آنچه میبینید همان چیزی است که دریافت‬
‫میکنید) است که به شما امکان می دهد طرح های مبتنی بر ‪ HTML5‬را ایجاد کنید‪ .‬گوگل‬
‫وب دیزاینر را می توان به عنوان یک ابزار ساده برای توسعه محتوای سازگار با صفحه‬
‫نمایش دریافت کرد‪ .‬این ابزار مبتنی بر رابط کاربری گوگل حتی برای مبتدیان ساده است‪،‬‬
‫درحالیکه توسعه دهندگان با تجربه را قادر می سازد تا عمیق تر به‪ ‬طراحی وب سایت‪ ‬و‬
‫ایجاد آن ها بپردازند‪ .‬ویژگی های اتوماسیون ‪ GWD‬به شما آزادی طراحی می دهد‪ ،‬حتی‬
‫بدون اینکه نگران نمایشگر باشید زیرا طرح های ‪ GWD‬و حرکت گرافیکی می توانند روی‬
‫تمام دستگاه ها اجرا شوند‪ .‬در ادامه به برخی از ویژگی های ‪ GWD‬پرداخته می شود‪.‬‬
 ‫گوگل برای اولین بار در سال ‪ 2013‬نرم افزار ‪ GWD‬را منتشر کرد‪ .‬این نرم افزار از آن‬
‫زمان به طور مداوم در حال پیشرفت است‪ .‬آمار نشان میدهد که بیش از ‪ 7679‬وب سایت از‬
‫‪ GWD‬استفاده کرده اند و ‪ 2175‬وب سایت همچنان با استفاده از ‪ GWD‬به فعالیت خود‬
‫ادامه می دهند‪.‬‬
‫طرح سیال گوگل وب دیزاینر به کاربران امکان می دهد هنگام تنظیم سبک های مختلف از‬
‫درصد استفاده کنند‪ .‬وقتی اندازه و موقعیت عناصر بر حسب درصد تنظیم می شوند‪ ،‬میتوانند‬
‫با حفظ ساختار کلی رشد کنند‪ .‬این مشکل اصلی برای طرح ثابت بود که با ایجاد حتی یک‬
‫تغییر کوچک در نمونه‪ ،‬کاربر را وا می داشت به صورت دستی همه عناصر را تغییر دهد‪.‬‬
‫با معرفی طرح سیال‪ ،‬کاربران می توانند هنگام تغییر اندازه طرح‪ ،‬آن را به راحتی در همان‬
‫شکل حفظ کنند‪.‬‬
‫اجزای گوگل وب دیزاینر ‪GWD‬‬
‫ناحیه ضربه‪ :‬این یک عنصر شفاف است که می تواند در هر قسمت از صفحه قرار‬ ‫‪o‬‬

‫گیرد و با لمس یا کلیک ماوس عملیاتی را آغاز کند‪.‬‬

‫ژست‪ :‬این برنامه برای ضبط تعامالت کاربری با محتوای ‪ HTML‬یا تبلیغ شما‬ ‫‪o‬‬

‫اعمال می شود‪.‬‬
‫دکمه تصویر‪ :‬این دکمه تصویر برای تشکیل دکمه ای با سه حالت بصری استفاده می‬ ‫‪o‬‬

‫شود‪.‬‬
‫ضربه برای تماس‪ :‬این یک عنصر شفاف دیگر برای شروع تماس یا پیام کوتاه است‪.‬‬ ‫‪o‬‬

‫گالری قابل کشش‪ :‬گوگل وب دیزاینر شما را قادر می کند تا یک گالری ساده برای‬ ‫‪o‬‬

‫حرکت آزادانه به عقب یا جلو از طریق تصاویر یا گروه ها راه اندازی کنید‪.‬‬
‫پیمایش گالری‪ :‬این برنامه به شما امکان می دهد یک صفحه ناوبری با موقعیت‬ ‫‪o‬‬

‫مناسب به یک گالری قابل کشش اضافه کنید‪.‬‬

 ‫گالری چرخ و فلکی‪ :‬گالری چرخ و فلکی یا ‪ Carousel‬به شما کمک می کند برای‬ ‫‪o‬‬

‫چندین تصویر‪ ،‬یک گالری مانند چرخ و فلک قابل انعطاف و چرخش بسازید تا جلوه‬
‫ای سه بعدی ارائه شود‪.‬‬
‫گالری ‪ 360‬درجه‪ :‬این ابزار یک شی را از هر طرف نشان می دهد‪.‬‬ ‫‪o‬‬

‫نقشه‪ ،‬فیلم‪ ،‬یوتیوب‪ :‬این ابزار به شما امکان می دهد یک ویدیو سفارشی‪ ،‬یوتیوبی‪،‬‬ ‫‪o‬‬

‫صدا یا نقشه را در تبلیغ خود بگنجانید‪.‬‬

‫نمای خیابان‪ :‬شما می توانید تصاویر نمای خیابان گوگل را در پروژه خود نیز‬ ‫‪o‬‬

‫بگنجانید‪.‬‬
‫افزودن تقویم‪ :‬می توانید آن را روی هر قسمت از صفحه قرار داده و یک یادآوری‬ ‫‪o‬‬

‫ایجاد کنید تا کاربران بتوانند آن را مشاهده کرده و به تقویم های خود اضافه کنند‪.‬‬

‫‪DNN‬‬
‫یکی از مزایای استفاده از ‪ DNN‬این است که بعد از نصب و راه‌اندازی´ وب سایت ‪،DNN‬‬
‫حتی کاربرانی که مهارت برنامه نویسی ندارند‪ ،‬به سادگی قادر به‪ ،‬طراحی صفحات آن‬
‫هستند‪ .‬طراحی کامالً حرفه‌ای و پویا با‪ ‬سیستم مدیریت محتوا دات نت نیوک‪ ‬دیگر امری‬
‫تخصصی نیست‪ .‬کاربرانی که تخصص برنامه نویسی ندارد نیز‪ ‬می‌توانند به سادگی صفحات‬
‫جدید ایجاد یا ویرایش نمایند‪ ،‬ماژول‌ها (ابزارهای کاربردی داخل صفحات)‪ ‬همچون اخبار و‬
‫مقاالت‪ ،‬فرم‌های تماس‪ ،‬اسالیدر‪ ،‬گالری تصاویر‪ ،‬محتوا ساز و … را برای درج محتوا و‬
‫مطالب داخل سایت خود‪ ‬استفاده نمایند‪ .‬آن‌ها می‌توانند برای محتوای سایت‪ ،‬ماژول‌ها و‬
‫صفحات دسترسی های مشخص تنظیم نمایند چرا که ‪ DNN‬دارای سیستم طراحی و تنظیم‬
‫نقش‌های امنیتی مختلف است‪ .‬سیستمی که بسیاری از ‪ CMS‬ها ندارند و برای آن نیاز به‬
‫نصب افزونه‌های جدید دارند‪ .‬با ‪ DNN‬می‌توانید به سادگی‪ ‬سایت خود را به موتورهای‬
 ‫جستجو معرفی نمایید و آن را به بهترین شکل ممکن ‪ SEO‬نمایید‪ .‬می‌توانید هر شکلی برای‬
‫ظاهر وب سایت خود تولید کنید و یا از قالب‌های آماده برای آن استفاده نمایید‪.‬‬
‫یکی از هیجان انگیز‌ترین´ قابلیت‌های ‪ DNN‬امکان مدیریت چندین وب سایت تنها با یک‬
‫هسته مرکزی سایت است! تقریبا بسیاری از ‪CMS‬ها فاقد چنین امکان فوق‌العاده‌ای هستند!‬
‫در واقع شما می‌توانید یک وب‌سایت داشته باشید و‪ ‬توسط دی ان ان چندین سایت دیگر ایجاد‬
‫کنید‪ ‬بدون این که نیاز داشته باشید از هاست و سرورهای میزبان جدا استفاده نمایید! این‬
‫امکان موجب شده بسیاری از‪ ‬شرکت‌های مادر تخصصی‪ ‬یا‪ ‬هولدینگ‌ها‪ ‬از این قابلیت برای‬
‫مدیریت و سازمان‌دهی سایت‌های شرکت‌های زیر مجموعه خود استفاده نمایند‪.‬‬
‫همچنین ‪ DNN‬ابزار بسیار ساده‌ای برای‪ ‬سفارشی سازی ظاهری سایت‪ ‬توسط‪Style ‬‬
‫‪ Sheet‬دارد‪ .‬شما می‌توانید با افزودن کدهای‪ CSS ‬در این قسمت سایت خود را کامال‬
‫سفارشی سازی کنید‪ .‬حتی این امکان را دارید که درون هر صفحه جداگانه بر اساس محتوای‬
‫آن صفحه ‪CSS‬های خود را در قسمت سربرگ تنظیمات هر ماژول اضافه نمایید‪ .‬عالوه‬
‫برای آن امکان افزودن کدهای‪ ‬جاوا اسکریپت‪ JavaScript ‬به سربرگ و پاورقی هر‬
‫صفحه را در اختیار شما قرار می‌دهد‪ .‬دست شما برای شخصی سازی کامل سایت باز است و‬
‫هیچ محدودیتی در طراحی سایت ندارید‪.‬‬
‫بسیاری از ‪CMS‬ها برای ایجاد یک‪ ‬وب سایت چند زبانه‪ ‬نیاز به نصب برنامه‌های جانبی‬
‫هستند‪ ،‬در حالی که دات نت نیوک به صورت پیش‌فرض این امکان را به شما می‌دهد تا‬
‫سایت خود را به ده‌ها زبان و‪ ‬ترجمه شده و بومی سازی شده منتشر نمایید‪ .‬در واقع عالوه بر‬
‫این که می‌توانید مستقیما متن‌های ترجمه شده را استفاده نمایید‪ ،‬می‌توانید در‬
‫قسمت‪ Resource ‬های سایت‪ ،‬ترجمه کلمات‪ ،‬عبارات و جمالت استفاده شده در ماژول‌ها‬
‫را‪ ‬برای هر زبان مشخص کنید و ‪ DNN‬به صورت هوشمند هر جایی که این کلمات یا‬
‫عبارات یا جمالت را در آن ماژول ببینید‪ ،‬در زبان مورد نظر شما به ترجمه تنظیم شده به آن‬
 ‫زبان بر می‌گرداند‪ .‬در واقع با یک بار ترجمه یک عبارت‪ ،‬در همه جا کلمه مترادف آن به‬
‫زبان جاری ترجمه شده منتظر می‌شود‪.‬‬
‫نکته مهمی که بسیاری به اشتباه به آن اشاره می‌کنند این است که احتماال دات نت نیوک‬
‫پلت‌فرم محبوبی نست‪ .‬چرا ‪ Wordpress‬تعداد زیادی از‪ ‬وب‌سایت‌های معمولی دنیا را در‬
‫اختیار دارد ولی ‪ DNN‬چندین برابر کمتر از آن همه گیر شده است؟ پس حتما اشکالی وجود‬
‫دارد‪ .‬در پاسخ به چنین طرز تفکری با یک مثال ساده در دنیایی کامال متفاوت این طور‬
‫می‌توان گفت که اگر یک خودروی پر فروش و ارزان در دنیا همه گیر شده است و یک‬
‫خودروی لوکس و گران همه گیر نمی‌شود‪ ،‬دلیلی آن بد بودن آن نیست و دالیل دیگری دارد‬
‫‪ DNN‬پلتفرم خوبی نبود هرگز سازمان‌ها و‬
‫‌‬ ‫که شاید با این مثال تشابه داشته باشد‪ .‬اگر‬
‫شرکت‌های بزرگ و حساس که مسائل امنیتی‪ ،‬کیفیت‪ ،‬توسعه پذیری و دارای ارتقاء‌‬
‫زیرساخت به سمت آن نمی‌رفتند‪ .‬چرا این سازمان‌های حساس و مهم از این پلتفرم استفاده‬
‫می‌کنند؟ این سوالی است که پاسخ به آن جواب کسانی که همه گیری یک پلت‌فرم را با پلتفرم‬
‫دیگر مقایسه می‌کنند هم هست‪.‬‬
‫‪Drupal‬‬
‫دروپال‪ ،‬نوعی سیستم مدیریت محتوا است‪ ،‬که به شما کمک می‌کند بدون داشتن دانش فنی‪،‬‬
‫در سایت خود‪ ،‬امکان درج مقاله‪ ،‬خبر‪ ،‬آگهی فروش و… را داشته باشید‪ .‬در واقع دروپال‪،‬‬
‫یک‪ cms ‬انعطاف‌پذیر‪ ،‬رایگان و منبع‌باز با یک جامعه فعال و بسیار بزگ است‪ .‬امروزه‬
‫میلیون‌ها ارگان‪ ،‬سازمان و شرکت‪ ،‬از دروپال برای سایت خود استفاده می‌کنند‪ ،‬بدون اینکه‬
‫نیازی به طراحی داشته باشند‪.‬‬
‫اولین ایده ساخت سیستم دروپال‪ ،‬در سال ‪ ۲۰۰۱‬شکل گرفت و اکنون این سیستم به نسخه پایه‬
‫‪ ۸‬به همراه هزاران ماژول کاربردی و متنوع رسیده است‪.‬‬
‫دروپال‪ ،‬نرم افزاری است که می‌توانید از آن برای ساختن یک وب‌سایت استفاده کنید‪ .‬این‬
‫نرم افزار به‌عنوان یک سیستم مدیریت محتوای مدرن‪ ،‬از ویژگی‌های بسیار خوبی برای‬
 ‫مدیریت سایت برخوردار است‪ .‬البته معایبی نیز دارد‪ .‬اما ویژگی‌‌های دروپال چیست؟ در‬
‫ادامه به برخی ویژگی‌های مثبت و منفی این نرم افزار اشاره می‌کنیم‪.‬‬
‫ماژل‌ها در نرم افزار دروپال‪ ،‬امکان افزودن امکانات مختلف و همچنین شخصی سازی را‬
‫برای این سیستم فراهم می‌کنند‪ .‬با افزودن ماژول‌ها‪ ،‬قابلیت مورد نظر مانند یک بسته نرم‬
‫افزاری جانبی به سایت اضافه خواهد شد‪.‬‬
‫دروپال یک سیستم رایگان است که هیچ گروه یا شرکتی‪ ،‬وظیفه پشتیبانی از تک تک‬
‫استفاده‌کنندگان آن را ندارد‪ .‬این سیستم تالش می‌کند با کمک ارزش آفرینی توسعه پیدا کند‪.‬‬
‫اما اگر هنگام استفاده از قالب دروپال در وب‌سایت‪ ،‬با مشکلی روبه‌رو شوید‪ ،‬باید هزینه نیاز‬
‫به یک پشتیبان برای رفع مشکل وب‌سایت را پرداخت کنید‪.‬‬
‫بدون شک‪ ،‬دروپال یکی از بزرگ‌ترین و محبوب‌ترین سیستم‌های مدیریت محتوا‪ ،‬برای‬
‫طراحی و مدیریت وب‌سایت‌های اینترنتی در دنیا به شمار می‌رود‪ .‬اگر شما به‌دنبال پلتفرمی‬
‫هستید که همراه با بودجه و کسب‌وکار شما رشد کند‪ ،‬سیستم دروپال‪ ،‬بسیار مفید و کارآمد‬
‫است‪ .‬این سیستم بر حسب نیاز هم می‌تواند به شکل ساده طراحی شود و هم می‌تواند ساختار‬
‫پیچیده‌ای داشته باشد‪ .‬در این مقاله سعی کردیم به این سوال پاسخ دهیم که دروپال چیست‪،‬‬
‫استفاده از آن چه ضرورتی دارد و همچنین ویژگی‌های آن به چه صورت است‪.‬‬
‫‪ ‬‬