saeed.mihan
March 23rd, 2017, 19:31
هم اکنون به مباحث اولیه و تئوری مرتبط با وب را بررسی خواهیم کرد و سپس بصورت کاملا عملی و پروژه محور صفحه اصلی یک سایت را با فتوشاپ بطور کامل طراحی میکنیم و اماده میشویم تا به مرحله بعدی یعنی تبدیل و کدنویسی آن برای وب برویم.
و همچنین میهن لرن مفتخر است برای اولین بار با روش آموزشی جدید خود : همزمان ارائه فیلم آموزشی (ارائه مفاهیم اولیه، آموزش زبان و درس مربوطه طبق سرفصل های رسمی و کاربردی، ذکر مثال ها و سپس پس از تسلط کامل کاربر انجام گام به گام پروژه عملی و همچنین ارائه فیلم آموزشی بصورت متنی در پست و PDF) در خدمت هموطنان گرامی می باشد.
تاریخچه وب
جهان وب یا وب جهان گستر ، www(World Wide Web) در سال 1989 میلادی طرح اولیه وب امروزی توسط تیم برنرز لی، دانشمند بریتانیایی علوم رایانه مطرح شد.
http://www.mihanlearn.net/wp-content/uploads/2015/04/WWW_logo_by_Robert_Cailliau-MihanLearn.net_.png (http://www.mihanlearn.net)تاریخچه وب | WWW
طرح او ابتدا ایده ای بود برای سیستم ارتباطی موسسه سرن(پژوهشگاه فیزیک هسته ای)که در آنجا کار می کرد. در CERN تیم های بزرگی وجود داشت و اعضای آن بیشتر از 12 کشور بود که بیشتر آزمایش های بسیار پیچیده را انجام میدادند که سالیان سال طول میکشید. برنزلی به این موضوع پی برد که این طرح قابلیت جهانی شدن را دارد و در سال 1989 پیشنهادی را ارئه کرد که آغازی بر وب جهانی بود. یک سال بعد یعنی در سال 1990 لی همراه با رابرت کایلیائو پیشنهادی تحت عنوان “پیوند و دسترسی به اطلاعات مختلف به صورت تارنمایی از گره هایی که کاربران به دلخواه میان آنها حرکت میکنند” را ارائه دادند و در همان سال اولین وبگاه بوجود آمد و در نهایت در سال 1993 برای همه افراد بطور رایگان قابل دسترسی شد. وب توجه دیگر پژوهشگران را به خود جلب کرد و باعث شد مارک آندرسن اولین مرورگر وب به نام Mosaic را ایجاد کند که این مرورگر در سال 1993 منتشر شد.
و در اکتبر سال 1994 کنسرسیوم جهانی وب یا W3C بوجود آمد که ریاست آن بر عهده تیم برنرز لی می باشد و هم اکنون دارای 385 سازمان عضو می باشد.
http://www.mihanlearn.net/wp-content/uploads/2015/04/W3C_MihanLearn.NET_.png (http://www.mihanlearn.net/)
کنسرسیوم جهانی وب | W3C
دلیل وجودی این کنسرسیوم کسب اطمینان در مورد سازگاری و توافق میان اعضای شرکت‌های مختلف در زمینه استفاده از استانداردهای نو است. شعار آنها این است : هدایت وب به سوی کامل شدن
نسخه های مختلفی که از وب بوجود آمدند:
نسخه 1: که در آن فقط اسناد بواسطه لینک ها بهم مرتبط شده بودند.
در ابتدا داستان با شبکه‌ای از مقالات و متن‌ها شروع شد. و مطمئناً در سال ۱۹۹۸ با ارائه پیشنهاد گوگل برای الگوریتم جدید، برای سادگی و توانایی خود در جستجو در اینترنت، بهبودی و پیشرفت قابل توجهی برای وب بود. موتور جستجوی گوگل انتظارات بعدی مصرف کنندگان که به دنبال پیدا کردن اطلاعات، محصولات و سرویس‌ها و دیگر مردم بودند را بالا برد.
http://www.mihanlearn.net/wp-content/uploads/2015/04/Google-MihanLearn.net_.png (http://www.mihanlearn.net/)وب نسخه یک – web 1.0
نسخه 2: در این مرحله وب به سمت پویاتر شدن پیش رفت و در واقع هر استفاده کننده خود می توانست محتویاتی را ایجاد کند.
http://www.mihanlearn.net/wp-content/uploads/2015/04/Web_2.0_Map-MihanLearn.NET_.png (http://www.mihanlearn.net/)وب نسخه 2 – web 2.0
نسخه 3: در این نسخه در واقع انقلابی رخ داد بطوری که W3C تکنولوژی های جدیدی را استاندارد سازی کرد که اینگونه همه دیوایس ها (موبایل ها، لپ تاب ها و..) می توانستند به وب متصل شوند و در واقع وب از همه جا قابل دسترس شد. و همچنین مفاهیم و استاندارد های جدیدی چون وب مفهومی، ویدئو روی وب (http://www.mihanlearn.net/category/learn/web-design/) و.. پدیدار شد.
http://www.mihanlearn.net/wp-content/uploads/2015/04/web-3-MihanLearn.net_.jpg (http://www.mihanlearn.net)وب نسخه 3 – Web 3.0
سرویس دهنده وب
http://www.mihanlearn.net/wp-content/uploads/2015/04/WebServices-MihanLearn.NET_.png (http://www.mihanlearn.net)
همانطور که میدانید در اینترنت ما ساختار سرویس دهنده(سرور) و مشتری(کلاینت) را داریم و می دانیم که برنامه های تحت وب را به دو روش مختلف می توانیم بنویسم یعنی برنامه های سمت سرور (که اجرای آنها بر عهده سرور می باشد) و برنامه های سمت کاربر (اجرا و نمایش در سمت کابر توسط مرورگر) که می توان از زبان های مختلفی در هر سمت استفاده کرد، بعنوان مثال از زبان هایی که در سمت کاربر بدون نیاز به سرویس دهنده خاصی می توانند اجرا شوند می توان به HTML و CSS اشاره کرد. اما بحث سمت سرور متفاوت است و برای اجرای کد ها نیازمند به سرویس دهنده وب هستیم تا برنامه های تحت وب را اجرا کند، بگذارید اینجا کمی بیشتر درخصوص web server صحبت کنیم.
وب سرور در واقع سامانه ای است برای پاسخگویی به مرورگر وب و ارسال صفحات و اطلاعات درخواستی به مرورگر جهت نمایش به کاربر. در واقع وقتی شما ادرس یک سایت را میزنید مثلا https://www.mihanlearn.net در خواست شما از طریق پروتکل http و پورت 80 به سرور مقصد ارسال می شود و سرور به شما پاسخ میدهد ( یا مثبت یا منفی مثلا چنین صفحه ای وجود ندارد ).
بهتر است که با چند وب سرور معروف آشنا شوید:
آپاچی(Apache) :
http://www.mihanlearn.net/wp-content/uploads/2015/04/apache-mihanlearn.net_.gif (http://www.mihanlearn.net/)سرویس دهنده آپاچی – Apache
به جرات می توان گفت وب سرور آپاچی محبوبترین در نوع خود می باشد و صحت این ادعا را میتوان اینگونه تایید کرد که هم اکنون بیش از 66% وب سایت های پر ترافیک جهان روی این وب سرور میزبانی می شوند و 49% سرور های جهان از آپاچی استفاده می کنند. آپاچی از سال 1995 ایجاد شده و پشتیبانی و توسعه آن بصورت متن باز تحت حمایت بنیاد آپاچی می باشد. آپاچی را معمولا روی سرور های لینوکسی نصب و راه اندازی میکنند ولی توسط سایر سیستم عامل ها از جمله مایکروسافت نیز پشتیبانی می شود و زبان های پایتون، پرل، پی اچ پی، تی سی ال برخی از زبان های رایجی هستند که توسط آپاچی پشتیبانی می شوند.
IIS مایکروسافت:
این سرویس دهنده وب فقط از پلتفرم ویندوز های مایکروسافت پشتیبانی میکند چرا که سازنده این وب سرور خود مایکروسافت است. بعد از آپاچی این سرویس دهند با در اختیار داشتن آمار 36 درصدی از سرور های جهان در رتبه دوم قرار دارد.
http://www.mihanlearn.net/wp-content/uploads/2015/04/iis8-MihanLearn.jpg (http://www.mihanlearn.net)سرویس دهنده IIS مایکروسافت
سرویس دهنده های دیگری نیز وجود دارند همانند GWS گوگل یا NginX و.. ولی 2 سرویس دهنده بالا محبوبترین و پرکاربردترین ها می باشند.
شروع طراحی قالب سایت (Mockup)
وقتی شما میخواهید یک پروژه تجاری را شروع کنید، باید بتوانید بر اساس درخواست و نظر مشتری وب سایت او را طراحی کنید و قبل از اینکه کد نویسی را شروع کنید پیشنمایش آن را آماده کنید و به مشتری تحویل دهید تا پس از تایید مشتری شروع به کد نویسی کنید و اینگونه مطمئن هستید که در پایان کار به مشکل بر نمی خورید. علاوه بر این موضوع ما برای ایجاد یک صفحه وب باید ابتدا ظاهر گرافیکی آن را در نرم افزارهایی مانند فتوشاپ طراحی کرده و سپس می توانیم آنرا تبدیل به یک صفحه وب کنیم چراکه بعضی از عناصر گرافیکی را نمی توان از طریق کدنویسی ایجاد کرد مانند یک لوگو که باید حتما در نرم افزار های گرافیکی مثل فتوشاپ ایجاد شود ولی اجزایی از صفحه مانند نوار منو، کادر ها، فوتر و.. را که در فتوشاپ طراحی میکنیم نیازی نیست که آنها را بصورت تصویری برش داده و به صفحه وب منتقل کنیم چراکه براحتی با کمی کد نویسی می توانیم انها را ایجاد کنیم و اینگونه صفحه ما خیلی سبکتر نیز می شود.
پس هم اکنون باهم میرویم تا اولین گام خود را در طراحی یک صفحه وب برداریم، در این مرحله هدف ما باید فقط طراحی صفحات زیبا و کاربرپسند برای سایت باشد و بسته به نیاز خود می توانیم بعد آن را برای هر جایی کد نویسی کنیم. هم اکنون در فتوشاپ صفحه اصلی سایت خود را طراحی میکنیم و در مراحل بعد به کمک زبان هایی که خواهیم آموخت آنرا کدنویسی و آماده برای ارسال به اینترنت و نمایش آن به مردم سراسر جهان میکنیم!
(چون محدودیت در ارسال تعداد تصاویر بود و تعداد تصاویر تاپیک 30 تا بود، تاپیک بطور کامل ارسال نشد و مجبور به حذف قسمت آموزش متنی شدم، جهت مشاهده آموزش متنی اینجا (https://www.mihanlearn.net/2015/04/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84/)کلیک کنید و یا هم فیلم آموزشی پایین تاپیک را دانلود کنید)
..خوب، پس کاملا یاد گرفتید که چگونه یک قالب سایت را در فتوشاپ طراحی کنید، برای اینکه بیشتر متوجه شوید میتوانید از فیلم آموزشی این قسمت استفاده کنید و در نهایت یک قالب شبیه تصویر زیر طراحی می کنید.
http://www.mihanlearn.net/wp-content/uploads/2015/04/19-MihanLearn-Mockup-819x1024.jpg (http://www.mihanlearn.net/)
در ادامه پیشنهاد میکنیم جهت درک بیشتر و پیش رفتن گام به گام فیلم آموزشی را دانلود و به دقت مشاهده کنید.
* دوستان جهت تولید این محتوا زحمت بسیار زیادی کشیده می شود، لطفا جهت حمایت از ما پکیج کامل را خریداری کنید.
http://www.mihanlearn.net/wp-content/uploads/download.png
مدت زمان فیلم آموزشی : 1 ساعت و 30 دقیقه
حجم : 164 مگابایت
سازنده : میهن لرن
– دانلود (http://s6.picofile.com/file/8185078376/1_WebDesign_Mockup_MihanLearn.zip.html)
– مشاهده آنلاین (http://www.namasha.com/v/5Ap5iMM9)
و همچنین میهن لرن مفتخر است برای اولین بار با روش آموزشی جدید خود : همزمان ارائه فیلم آموزشی (ارائه مفاهیم اولیه، آموزش زبان و درس مربوطه طبق سرفصل های رسمی و کاربردی، ذکر مثال ها و سپس پس از تسلط کامل کاربر انجام گام به گام پروژه عملی و همچنین ارائه فیلم آموزشی بصورت متنی در پست و PDF) در خدمت هموطنان گرامی می باشد.
تاریخچه وب
جهان وب یا وب جهان گستر ، www(World Wide Web) در سال 1989 میلادی طرح اولیه وب امروزی توسط تیم برنرز لی، دانشمند بریتانیایی علوم رایانه مطرح شد.
http://www.mihanlearn.net/wp-content/uploads/2015/04/WWW_logo_by_Robert_Cailliau-MihanLearn.net_.png (http://www.mihanlearn.net)تاریخچه وب | WWW
طرح او ابتدا ایده ای بود برای سیستم ارتباطی موسسه سرن(پژوهشگاه فیزیک هسته ای)که در آنجا کار می کرد. در CERN تیم های بزرگی وجود داشت و اعضای آن بیشتر از 12 کشور بود که بیشتر آزمایش های بسیار پیچیده را انجام میدادند که سالیان سال طول میکشید. برنزلی به این موضوع پی برد که این طرح قابلیت جهانی شدن را دارد و در سال 1989 پیشنهادی را ارئه کرد که آغازی بر وب جهانی بود. یک سال بعد یعنی در سال 1990 لی همراه با رابرت کایلیائو پیشنهادی تحت عنوان “پیوند و دسترسی به اطلاعات مختلف به صورت تارنمایی از گره هایی که کاربران به دلخواه میان آنها حرکت میکنند” را ارائه دادند و در همان سال اولین وبگاه بوجود آمد و در نهایت در سال 1993 برای همه افراد بطور رایگان قابل دسترسی شد. وب توجه دیگر پژوهشگران را به خود جلب کرد و باعث شد مارک آندرسن اولین مرورگر وب به نام Mosaic را ایجاد کند که این مرورگر در سال 1993 منتشر شد.
و در اکتبر سال 1994 کنسرسیوم جهانی وب یا W3C بوجود آمد که ریاست آن بر عهده تیم برنرز لی می باشد و هم اکنون دارای 385 سازمان عضو می باشد.
http://www.mihanlearn.net/wp-content/uploads/2015/04/W3C_MihanLearn.NET_.png (http://www.mihanlearn.net/)
کنسرسیوم جهانی وب | W3C
دلیل وجودی این کنسرسیوم کسب اطمینان در مورد سازگاری و توافق میان اعضای شرکت‌های مختلف در زمینه استفاده از استانداردهای نو است. شعار آنها این است : هدایت وب به سوی کامل شدن
نسخه های مختلفی که از وب بوجود آمدند:
نسخه 1: که در آن فقط اسناد بواسطه لینک ها بهم مرتبط شده بودند.
در ابتدا داستان با شبکه‌ای از مقالات و متن‌ها شروع شد. و مطمئناً در سال ۱۹۹۸ با ارائه پیشنهاد گوگل برای الگوریتم جدید، برای سادگی و توانایی خود در جستجو در اینترنت، بهبودی و پیشرفت قابل توجهی برای وب بود. موتور جستجوی گوگل انتظارات بعدی مصرف کنندگان که به دنبال پیدا کردن اطلاعات، محصولات و سرویس‌ها و دیگر مردم بودند را بالا برد.
http://www.mihanlearn.net/wp-content/uploads/2015/04/Google-MihanLearn.net_.png (http://www.mihanlearn.net/)وب نسخه یک – web 1.0
نسخه 2: در این مرحله وب به سمت پویاتر شدن پیش رفت و در واقع هر استفاده کننده خود می توانست محتویاتی را ایجاد کند.
http://www.mihanlearn.net/wp-content/uploads/2015/04/Web_2.0_Map-MihanLearn.NET_.png (http://www.mihanlearn.net/)وب نسخه 2 – web 2.0
نسخه 3: در این نسخه در واقع انقلابی رخ داد بطوری که W3C تکنولوژی های جدیدی را استاندارد سازی کرد که اینگونه همه دیوایس ها (موبایل ها، لپ تاب ها و..) می توانستند به وب متصل شوند و در واقع وب از همه جا قابل دسترس شد. و همچنین مفاهیم و استاندارد های جدیدی چون وب مفهومی، ویدئو روی وب (http://www.mihanlearn.net/category/learn/web-design/) و.. پدیدار شد.
http://www.mihanlearn.net/wp-content/uploads/2015/04/web-3-MihanLearn.net_.jpg (http://www.mihanlearn.net)وب نسخه 3 – Web 3.0
سرویس دهنده وب
http://www.mihanlearn.net/wp-content/uploads/2015/04/WebServices-MihanLearn.NET_.png (http://www.mihanlearn.net)
همانطور که میدانید در اینترنت ما ساختار سرویس دهنده(سرور) و مشتری(کلاینت) را داریم و می دانیم که برنامه های تحت وب را به دو روش مختلف می توانیم بنویسم یعنی برنامه های سمت سرور (که اجرای آنها بر عهده سرور می باشد) و برنامه های سمت کاربر (اجرا و نمایش در سمت کابر توسط مرورگر) که می توان از زبان های مختلفی در هر سمت استفاده کرد، بعنوان مثال از زبان هایی که در سمت کاربر بدون نیاز به سرویس دهنده خاصی می توانند اجرا شوند می توان به HTML و CSS اشاره کرد. اما بحث سمت سرور متفاوت است و برای اجرای کد ها نیازمند به سرویس دهنده وب هستیم تا برنامه های تحت وب را اجرا کند، بگذارید اینجا کمی بیشتر درخصوص web server صحبت کنیم.
وب سرور در واقع سامانه ای است برای پاسخگویی به مرورگر وب و ارسال صفحات و اطلاعات درخواستی به مرورگر جهت نمایش به کاربر. در واقع وقتی شما ادرس یک سایت را میزنید مثلا https://www.mihanlearn.net در خواست شما از طریق پروتکل http و پورت 80 به سرور مقصد ارسال می شود و سرور به شما پاسخ میدهد ( یا مثبت یا منفی مثلا چنین صفحه ای وجود ندارد ).
بهتر است که با چند وب سرور معروف آشنا شوید:
آپاچی(Apache) :
http://www.mihanlearn.net/wp-content/uploads/2015/04/apache-mihanlearn.net_.gif (http://www.mihanlearn.net/)سرویس دهنده آپاچی – Apache
به جرات می توان گفت وب سرور آپاچی محبوبترین در نوع خود می باشد و صحت این ادعا را میتوان اینگونه تایید کرد که هم اکنون بیش از 66% وب سایت های پر ترافیک جهان روی این وب سرور میزبانی می شوند و 49% سرور های جهان از آپاچی استفاده می کنند. آپاچی از سال 1995 ایجاد شده و پشتیبانی و توسعه آن بصورت متن باز تحت حمایت بنیاد آپاچی می باشد. آپاچی را معمولا روی سرور های لینوکسی نصب و راه اندازی میکنند ولی توسط سایر سیستم عامل ها از جمله مایکروسافت نیز پشتیبانی می شود و زبان های پایتون، پرل، پی اچ پی، تی سی ال برخی از زبان های رایجی هستند که توسط آپاچی پشتیبانی می شوند.
IIS مایکروسافت:
این سرویس دهنده وب فقط از پلتفرم ویندوز های مایکروسافت پشتیبانی میکند چرا که سازنده این وب سرور خود مایکروسافت است. بعد از آپاچی این سرویس دهند با در اختیار داشتن آمار 36 درصدی از سرور های جهان در رتبه دوم قرار دارد.
http://www.mihanlearn.net/wp-content/uploads/2015/04/iis8-MihanLearn.jpg (http://www.mihanlearn.net)سرویس دهنده IIS مایکروسافت
سرویس دهنده های دیگری نیز وجود دارند همانند GWS گوگل یا NginX و.. ولی 2 سرویس دهنده بالا محبوبترین و پرکاربردترین ها می باشند.
شروع طراحی قالب سایت (Mockup)
وقتی شما میخواهید یک پروژه تجاری را شروع کنید، باید بتوانید بر اساس درخواست و نظر مشتری وب سایت او را طراحی کنید و قبل از اینکه کد نویسی را شروع کنید پیشنمایش آن را آماده کنید و به مشتری تحویل دهید تا پس از تایید مشتری شروع به کد نویسی کنید و اینگونه مطمئن هستید که در پایان کار به مشکل بر نمی خورید. علاوه بر این موضوع ما برای ایجاد یک صفحه وب باید ابتدا ظاهر گرافیکی آن را در نرم افزارهایی مانند فتوشاپ طراحی کرده و سپس می توانیم آنرا تبدیل به یک صفحه وب کنیم چراکه بعضی از عناصر گرافیکی را نمی توان از طریق کدنویسی ایجاد کرد مانند یک لوگو که باید حتما در نرم افزار های گرافیکی مثل فتوشاپ ایجاد شود ولی اجزایی از صفحه مانند نوار منو، کادر ها، فوتر و.. را که در فتوشاپ طراحی میکنیم نیازی نیست که آنها را بصورت تصویری برش داده و به صفحه وب منتقل کنیم چراکه براحتی با کمی کد نویسی می توانیم انها را ایجاد کنیم و اینگونه صفحه ما خیلی سبکتر نیز می شود.
پس هم اکنون باهم میرویم تا اولین گام خود را در طراحی یک صفحه وب برداریم، در این مرحله هدف ما باید فقط طراحی صفحات زیبا و کاربرپسند برای سایت باشد و بسته به نیاز خود می توانیم بعد آن را برای هر جایی کد نویسی کنیم. هم اکنون در فتوشاپ صفحه اصلی سایت خود را طراحی میکنیم و در مراحل بعد به کمک زبان هایی که خواهیم آموخت آنرا کدنویسی و آماده برای ارسال به اینترنت و نمایش آن به مردم سراسر جهان میکنیم!
(چون محدودیت در ارسال تعداد تصاویر بود و تعداد تصاویر تاپیک 30 تا بود، تاپیک بطور کامل ارسال نشد و مجبور به حذف قسمت آموزش متنی شدم، جهت مشاهده آموزش متنی اینجا (https://www.mihanlearn.net/2015/04/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84/)کلیک کنید و یا هم فیلم آموزشی پایین تاپیک را دانلود کنید)
..خوب، پس کاملا یاد گرفتید که چگونه یک قالب سایت را در فتوشاپ طراحی کنید، برای اینکه بیشتر متوجه شوید میتوانید از فیلم آموزشی این قسمت استفاده کنید و در نهایت یک قالب شبیه تصویر زیر طراحی می کنید.
http://www.mihanlearn.net/wp-content/uploads/2015/04/19-MihanLearn-Mockup-819x1024.jpg (http://www.mihanlearn.net/)
در ادامه پیشنهاد میکنیم جهت درک بیشتر و پیش رفتن گام به گام فیلم آموزشی را دانلود و به دقت مشاهده کنید.
* دوستان جهت تولید این محتوا زحمت بسیار زیادی کشیده می شود، لطفا جهت حمایت از ما پکیج کامل را خریداری کنید.
http://www.mihanlearn.net/wp-content/uploads/download.png
مدت زمان فیلم آموزشی : 1 ساعت و 30 دقیقه
حجم : 164 مگابایت
سازنده : میهن لرن
– دانلود (http://s6.picofile.com/file/8185078376/1_WebDesign_Mockup_MihanLearn.zip.html)
– مشاهده آنلاین (http://www.namasha.com/v/5Ap5iMM9)