انجمنصفحه اولجستجوی انجمن

[hamid.adldoost]

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


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.



مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

[zeinab]

خیلی خوبه .
اما من از طراحی وب سردر نمیارم که نظر بدم. هنوز اول اول راهم. امیدوارم بتونم از دوستانی مثل شما یادبگیرم.
ممنون

[mammad_asir]

دوست من زودتر این مطالبو شروکن
بابا اصلا اگه بخوایم یه سایت طراحی کنیم چجور با اچ تی ام ال و سی اساس کد بزنیم؟
اطلا همین مانشت رو مگه میشه اینتوری نوشت؟
من یه صفحه داشتم خواستم شبیه اون درست کنم هر کاری کردم نشد؟اصلا انگار رنگا فرق میکنه و اینا یه چیزه دیگست؟
مثل سی در مقبا سیشارپ از لحاظ قشنگی!!!!!!!!!!!!

[alirrrrrr]

سلام منم منتظرم.چی شد ؟چرا شروعش نمیکنی؟

[hamid.adldoost]

سلام مجدد !
من فکر کردم کسی دنبال نمی کنه این مطلب رو آخه گفته بودم نظر بدین کسی نظر نداده بود !

ولی حالا که می بینم حداقل ۳ نفر هستند که دوست دارن شروع می کنم.

اولا خدمت اون دوستمون که گفتن مگه میشه با سی اس اس و اج تی ام ال سایتی مثل مانشت نوشت؟! باید بگم پس فکر کردین طراحی مانشت با چی هست؟! مانشت که سهله ، فیس بوک هم با اچ تی ام ال و سی اس اس هست ! اما باید تجربه و مهارت داشته باشید تا بتونید به خوبی از این ابزار ها استفاده کنید.
در ابتدای کار بهتره اینو بگم که از این به بعد هر وقت هر سایتی رو دیدید ، مثل مانشت یا هر سایت حرفه ای دیگه ، روش کلیک راست کنید و گزینه ی "view page source" رو انتخاب کنید. به این ترتیب شما می تونید قسمت عظیمی از کد اچ تی ام ال و احتمالا سی اس اس رو ببینید . هرچند نباید انتظار داشته باشید که همه اش رو ببینید که یک سری از قسمت ها داخل فایل های استایل شیت و حاوا اسکریپت هستند.

ثانیا ، یه منبع خوب معرفی می کنم که بهتره قبل از شروع کار باهاش آشنا بشین ، این منبع بهترین و جامع ترین منبع روی اینترنت برای طراحی و برنامه نویسی وب هست

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

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

فکر می کنم برای شروع کافی باشه.
منتظر نظراتتون هستم.

[Mahbanoo313]

من دنبال می کنم مباحثتون رو
تورو خدا وسطش رها نکنید از تجربیاتتون بگید تا ما هم راه بیفتیم
یه دنیااااااااااااااااااااااااااااااااااااااااااااااااا ممنووووووووووووووووووووووووووووووووووووون

[hamid.adldoost]

فکر می کنم وقتش رسیده که فصل اول رو شروع کنیم.

برای درست فهمیدن کار صفحات وب و مرورگر ها ، باید اول دید درستی از اینترنت داشته باشیم. اینترنت در کتاب های استاندارد آموزشی ، همیشه به شکل یک "ابر" رسم میشه(چرا؟) اینترنت مثل یک دستگاه نیست که هر کس بخواد ازش استفاده کنه یک فیش بهش وصل کنه و اطلاعات رو داخلش بنویسه با بیرون بکشه. در واقع اینترنت ، مجموعه کامپیوتر های بهم متصل شده هست . تمام این کامپیوتر ها با گرفتن یک آدرس مشخص "IP" قابلیت این رو دارن که بشه توی اینترنت اون ها رو پیدا کرد و از خدماتی که میدن استفاده کرد. اما فقط تعداد معدودی از کامپیوتر ها هستند که روی اینترنت خدمات ارائه می کنن. به این کامپیوتر ها میگن سرور(خدمات دهنده). هر کامپیوتری که بخواد سرور باشه ، باید سیستم عاملی داشته باشه که بتونه به درخواست های روی شبکه پاسخ بده (هرچند تمام سیستم عامل ها تا حدودی این قدرت رو دارن) اما سیستم عامل هایی که به منظور همین کار ساخته شدند و قابلیت های بیشتری دارن، سیستم عامل های سرور نام دارن. مثل windows server .

هر شبکه (از جمله اینترنت) برای استفاده ازحرکت اطلاعات از یک سمت به سمت دیگه (مثلا از یک سرویس دهنده به یک سرویس گیرنده) نیاز به این داره که توی مسیر از واسط هایی عبور کنه که این واسط ها کارشون اینه که مسیر بهینه رو توی شبکه به اطلاعات در حال ارسال نشون بدن. به این واسط ها router یا مسیر یاب گفته میشه.

تمام وب سایت هایی که روی اینترنت قرار دارن ، هر کدوم روی یک سرور قرار گرفتن که اون سرور علاوه بر اینکه دارای یک سیستم عامل سرور هست ، دارای ابزار های دیگه هم هست که به منظور پشتیبانی از تکنولوژی های ساخت وب سایت استفاده میشه. تعداد این ابزار ها خیلی زیاده و در طی گذر زمان هر روز هم قوی تر میشن. خود این ابزار ها هم روی سیستم عامل های خاصی می تونن مورد استفاده قرار بگیرن. مثلا زبان ها و تکنولوژی های معروفی مثل "جاوا" ، "php" ، "perl" ، "python" قابلیت این رو دارن که روی تقریبا تمام سیستم عامل های معروف مثل "ویندوز" ، "لینوکس" ، "مک" و ... اجرا بشن. اما این وسط تکنولوژی های دیگه هم وجود دارن مثل "دات نت" که فقط می تونه روی ویندوز اجرا بشه.

html ، css ، javascript و ... در واقع ابزار های پایه ای برای ساخت وب سایت هستند که نیاز به تکنولوژی خاصی ندارن و همه ی کامپیوتر ها و حتی موبایل ها و ... که بشه روشون مرورگر نصب کرد قابلیت پشیتبانی از اون ها رو دارن.

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

[*Najmeh*]

به نظر من خیلی خوب من در حدی نیستم که به خوام نظر بدم
ولی توی نگاه اول من خیلی مدل وبلاگی به چشم اومد

[Mahbanoo313]

خیلی عالی بود . مفاهیم رو خیلی ساده و روان توضیح دادین . بی صبررررررررررررررررررررررررررررررانه منتظرررررررررررررررررررررم تا ادامه توضیحاتتون رو دنبال کنم
ممنون

[arman405]

(۲۳ خرداد ۱۳۹۱ ۰۱:۲۱ ب.ظ)najmehdj نوشته شده توسط:  به نظر من خیلی خوب من در حدی نیستم که به خوام نظر بدم
ولی توی نگاه اول من خیلی مدل وبلاگی به چشم اومد

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

ظاهر اصلا به طراحی و ساختارهای اصلی ربطی نداره( کلی عرض میکنم )

ولی خیلی ها هستن که خوش سلیقه هستن و با فتوشاپ و فلش و ... ظاهر خوبی در میارن.

[arixooo]

من امروز اولین جلسه کلاس Dreamweaver رو شرکت کردم..قراره css و Fireworks هم یادمون بده..نظرت در مورده این محصولات شرکت Adobe چیه...یکی از دوستان میگه چندان کدهای خوبی تولید نمیکنه و بعدا اصلاحش در صورت نیاز سخت میشه..اما امروز دیدم همچین بد هم نیست..تازه میتونی اصلا دیزان نکنی..فقط کد بزنی..بعدا هی نتیجه کارتو چک کنی...به نظرت بعد از تموم شدن این دوره و یادگیری Javascript دیگه چی باید یاد بگیرم؟؟

[arman405]

(۲۳ خرداد ۱۳۹۱ ۰۴:۵۲ ب.ظ)arixooo نوشته شده توسط:  من امروز اولین جلسه کلاس Dreamweaver رو شرکت کردم..قراره css و Fireworks هم یادمون بده..نظرت در مورده این محصولات شرکت Adobe چیه...یکی از دوستان میگه چندان کدهای خوبی تولید نمیکنه و بعدا اصلاحش در صورت نیاز سخت میشه..اما امروز دیدم همچین بد هم نیست..تازه میتونی اصلا دیزان نکنی..فقط کد بزنی..بعدا هی نتیجه کارتو چک کنی...به نظرت بعد از تموم شدن این دوره و یادگیری Javascript دیگه چی باید یاد بگیرم؟؟

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

قسمت ویژوال همه کارها رو واست انجام میده...

Dreamweaver هنوزم خیلی تو بورس هست مخصوصا واسه php کارها البته نه خیلی حرفه ایی.

من خودم با Microsoft Expersion Web کار میکنم که واقعا یک کلاس بالاتر هست و همه تکنولوژی های جدید رو ساپورت میکنه. پیشنهاد میکنم حتما باهاش کار کن.

واقعا کاربر پسند هست. هم ویژوال هم کد.

در مرحله بعد برای Asp.net و مباحث بانک و کدهای سمت سرور هیچی به پای Visual Studio نمیرسه.

---

لینک کتاب آموزش فارسی:


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


----------------------
البته مقدماتی هست و مربوط به نسخه های قدیمی الان نسخه ۴ هست.

فکر کنم فیلم های آموزشی هم تو بازار و هم نت باشه.


اینم لینک فروشگاه فیلم آموزش نرم افزار ۲۲ ساعته ( شرکت خوبی هست خودم خریدم محصولاتشو )


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

[zeinab]

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

[hamid.adldoost]

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

در مورد محصولات شرکت های مختلف مثل adobe باید عرض کنم من خیلی کم از این محصولات استفاده کردم ، محصول مورد علاقه من برای طراحی وب همون visual studio هست حتی وقتی با جاوا هم کار می کنم ، بازم اول سایت رو طوی Visual studio طراحی می کنم. برای اینکه طراح خوبی باشید ، این ابزار ها نباید اثلا به شما در استفاده از امکانات کمک کنند بلکه باید فقط سرعتتون رو بالا ببره. شما باید بلد باشید هر کاری که میشه با dreamweaver انجام داد رو با notepad هم انجام بدید ! در واقع برای طراحی وب هیچ چیزی غیر از یک notepad و یک مرورگر ندارین !

به ادامه بحث می پردازم. تفاوت کد های server side و client side چی هست؟

همون طوری که از اسمشون هم میشه فهمید ، کد های سمت مشتری یا همون Client side در واقع قسمتی از وب سایت هستند که از سرور ، روی کامپیوتر کامپیوتر شما لود میشه. این قسمت معمولا فقط شامل کد های طراحی ظاهر وب سایت هست. در واقع از این فسمت ها برای برنامه نویسی که شامل نحوه انجام کار های مختلف یک برنامه هست ، قسمت های امنیتی سایت و ... استفاده نمیشه! در واقع کد هایی که قراره "اجرا" بشن ، سمت سرور باقی می مونن و کد هایی که سمت مشتری میان در واقع اجرایی نیستن! بلکه فقط تفسیر میشن! به این معنی که مثلا وقتی مرور گر این خط رو میبینه :
<img src="source" alt ="description" style="style" />
می دونه که فقط قراره به جای این خط کد یک عکس که در آدرس Source هست ، توضیحش description هست و ویژگی های ظاهریش style هست نمایش بده ! و در واقع هیچ کد اجرایی توش وجود نداره !
ستون فقرات کد سمت مشتری زبان html هست و بقیه تکنولوژی های سمت کلاینت مثل css ، java script و ... توی کد html قرار می گیرن و مرور ازشون برای نمایش بهتر وب سایت استفاده می کنه. این وسط java script کمی تفاوت داره و در واقع می تونه تا حدی کار های اجرایی انجام بده ، مثلا می تونه درست بودن فرمت تاریخ توی یک متن رو بررسی کنه ، یا یک ورودی از کاربر بگیره و توی صفحه نمایش بده . ولی بازهم کارهایی که می کنه معمولا ربطی به هسته ی وب سایت نداره کد جاوا اسکریپت هم اگر توی صفحه html نوشته شده باشه ، به صورت کامل روی کامپیوتر مشتری باارگذاری میشه.

اما کد سمت سرور ، قسمت اصلی برنامه هست که توی فضای وب وجود داره. اگه وب سایت شما فقط برای نمایش اطلاعات ثابت استفاده بشه و هیچ نیازی به تعامل با بازدید کننده نداشته باشه شما می تونید اصلا از کد های سمت سرور استفاده نکنید و همون html برای شما کافیه! اما معمولا امروزه همه ی سایت ها قابلیت انجام یک سری کارها رو دارن و تقریبا قدرت اونا معادل قدرت برنامه های نصب شدنی روی کامپیوتر هست حتی در بعضی موارد به خاطر قابلیت های بالای سرور ها ، performance بهتری هم دارن ! پیش بینی میشه در سال های آینده تقریبا ۹۹% نرم افزار ها روی وب قرار بگیره و شما دیگه نیاز به خرید cd برای نصب برنامه ها رو نداشته باشید ! شرکت هایی مثل مایکروسافت این روند رو شروع کردند و مثلا office امروزه تقریبا با تمام امکانات کاملش روی اینترنت قابل دسترسی هست! گوگل هم یک سیستم عامل به اسم کرومیوم داره ارائه می کنه که اصلا دیگه نمیشه روش برنامه نصب کرد جز یه مرورگر و بقیه برنامه ها باید از رو اینرنت اجرا بشن! حتی با امروزه در کشور های پیشرفته مثل کره ، سرعت دسترسی به اطلاعات روی اینترنت بیشتر از سرعت دسترسی به اطلاعات روی هارد دیسک شما هست ! عجیبه نه؟! اینم از قابلیت های عالیه سرور های توزیع شده و قدرتمند هست ! جالبه بدونید که وقتی گوگل موقع جستجو می نویسه مثلا ۱ میلیون نتیجه در ۰/۰۱ ثانیه بازیابی شد ، این سرعت نه تنها از روی هارد شما غیر ممکنه بلکه حتی گاهی از سرعت دسترسی به رم شما هم غیر ممکنه! و این هم از معجزه های گوگل هست !
برگردیم به بحث! تمام قسمت های برنامه که قراره مثلا به پایگاه داده وصل بشه و یا هرکاری که یک برنامه نیاز داره انجام بده ، روی سرور باقی میمونه ! برای نوشتن این قسمت از کد از زبان هایی مثل php ، جاوا ، python ، سی شارپ و ... استفاده میشه.

این وسط قسمتی از کد ها هم هستند که واسط بین دو قسمت گفته شده هستند ، این کد ها هم کارهایی رو سمت کلاینت انجام میدن و هم قسمت هایی رو سمت سرور ! در مورد این قسمت فعلا توضیح بیشتری نمیدم فقط نام میبرم که تکنولوژی هایی از جمله AJAX شامل این موضوع میشن.

فکر می کنم فعلا برای این دفعه کافی باشه.
منتظر نظرات شما دوستان عزیز هستم.

[kerm]

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