طراحی سایت
طراحی سایت چیست ؟
کاربردهای آن ؟ مناسب چه مشاغلی می باشد ؟ انواع آن ؟ چگونگی یادگیری آن و … .در این مقاله و مقاله های آتی قصد داریم به تمامی پرسش های مطرح شده در حوزه طراحی وب سایت بپردازیم .با ما همراه باشید .
اینترنت
همه ما حداقل روزی ۱ ساعت از وقت خود را صرف چرخیدن در دنیای اینترنت می کنیم .دریافت اخبار جدید ، اطلاع از فناوری های روز دنیا ، خریدهای اینترنتی ، تماشای فیلم و … .حال یک لحظه دنیای بدون اینترنت و وب را فرض کنید…. ؟؟!! وحشتناک است نه …!!!!شاید به جرات بتوان گفت اینترنت و فضای مجازی بخشی جدائی ناپذیر از زندگی روزمره ما شده است .تحمل یک ساعت دوری از فضای وب و یا قطعی اینترنت برای همه ما عذاب آور است .اینترنت در دهه ۶۰ میلادی توسط سازمان های نظامی ایالات متحده آمریکا به وجود آمد .تا قبل از دهه ۹۰ اینترنت تنها برای پروژه های تحقیقاتی و نظامی استفاده می شد .ولی بعد از آن کم کم استفاده از آن رنگ و بوی جهانی به خود گرفت .امروزه وابستگی تمامی کارهای بشر به اینترنت امری جدائی ناپذیر است .مقر اصلی حاکمیت اینترنت در کشور ایالات متحده آمریکا ، کالیفرنیا می باشد .تمامی نام های دامنه ، شماره پورت ها ، نشانی های آی پی ، و … توسط سازمان ICANN اداره و کنترل می شود.
تولد وب
وب سایت های فراوانی در دنیای اینترنت وجود دارند .اما قدیمی ترین و یا بهتر بگوئیم اولین وب سایت به گفته رجیستر ، در سال ۱۹۹۱ توسط دانشمند انگلیسی تیم برنرز لی به وجود آمد .آدرس اولین وب سایت اینترنتی ( http://info.cern.ch ) که فاقد هرگونه رنگ و فیلم و عکس بود همچنان در دسترس می باشد .به طور کلی استفاده از اینترنت در دهه ۹۰ رشد چشم گیری داشت .تا آن هنگام که در سال ۱۹۹۶ استفاده از لغت اینترنت یا وب در میان عموم عادی شد .و امروزه بسیاری از کسب و کارها از طریق اینترنت رونق بسیاری گرفته است .شما به راحتی می توانید پاسخ به پرسش های خود را درباره هر موضوعی در محیط اینترنت پیدا کنید .
تاریخچه طراحی وب
وب سایت
به طور کلی اگر بخواهیم اطلاعات خود را در اینترنت به اشتراک بگذاریم دو راه وجود دارد :
- عضویت در یکی از وب سایت های اینترنتی و استفاده از خدمات آن ها .
- مالک یک وب سایت در اینترنت شویم و خود مدیریت آن را بر عهده بگیریم .
حال ممکن است این سوال پیش بیاید که کدام بهتر است؟ تفاوت آن ها در چیست ؟یا اصلا مگر فرقی دارد ، ما که می خواهیم اطلاعات خود را به اشتراک بگذاریم .چه فرقی می کند مالک وب سایت باشیم یا اینکه از وب سایت دیگران استفاده کنیم .بگذارید پاسخ این سوال را با یک مثال ساده بیان کنیم .شما دوست دارید کارمند باشید و برای دیگران کار کنید یا اینکه خود رئیس باشید و دیگران برای شما کار کنند …؟! ( به قول معروف آقای خود باشید و نوکر خود ) .خوب با این توضیح فکر می کنم جواب سوال مطرح شده در بالا کاملا واضح است .
وب سایت ، سایت ، تارنما ، وبگاه ، و … همگی لغاتی می باشند که در مورد محیط یک سایت اینترنتی به کار می رود.به زبانی ساده وب سایت به مجموعه ای از صفحات در اینترنت گفته می شود که حاوی محتویات مختلف می باشند .مانند متن ، عکس ، فیلم و … . امروزه هر شخص ، شرکت ، مغازه و … می تواند برای خود یک سایت داشته باشد . و با استفاده از آن اطلاعات خود را در اینترنت به اشتراک بگذارد. یا اگر محصولی برای فروش دارد از طریق آن اقدام به معرفی و فروش محصول خود نماید .
طراحی وب سایت
طراحی وب به طراحی صفحات وب سایت بر روی اینترنت گفته می شود که قابل نمایش باشند .طراحی وب بیشتر بر روی طراحی وب سایت برای مرورگرهای دسکتاپ و کامپیوترها تمرکز دارد .گسترش تلفن های هوشمند دلیلی شد که از اواسط سال ۲۰۱۰ میلادی طراحی برای موبایل ها و تبلت ها هم به طور چشم گیری افزایش پیدا کند .یک طراح وب بیشتر بر روی ظاهر ، طرح بندی ، و شاید در برخی موارد بر روی محتویات سایت کار کند .منظور از ظاهر ، امور مربوط به رنگ ها ، فونت ، تصاویر استفاده شده می باشد . منظور از طرح بندی ، چگونگی دسته بندی و ساختار اطلاعات می باشد .در طراحی وب سایت سادگی اهمیت بسیاری دارد .یک لحظه خود را جای مخاطب یا کاربری که از وب سایت شما دیدن می کند بگذارید . هیچکس حال و حوصله وب سایتی شلوغ را ندارد . بسیاری از صفحات وب بر روی سادگی پیاده سازی شده اند .بنابراین هیچ گونه اطلاعات و قابلیت هائی که حواس مخاطب را پرت کند نباید در وب سایت شما ظاهر شود .
چگونگی طراحی سایت
دو روش که در طراحی وب سایت ها جهت نمایش در کامپیوتر و موبایل کاربرد دارد، روش واکنشگرا ( ریسپانسیو ) و روش انطباقی می باشد.
طراحی سایت واکنشگرا
این عبارت در سال ۲۰۱۰ توسط ایتان مارکوت ارائه شد .روشی که در آن صفحات وب سایت به صورت خودکار خود را با صفحه نمایش کاربر تطبیق می دهند .در این روش بدون توجه به دستگاه مورد استفاده توسط کاربر ، صفحات به راحتی به نمایش در می آیند .کاربر به راحتی می تواند با موبایل ، تبلت ، لپ تاپ و … سایت مورد نظر را مشاهده کند . در روش واکنشگرا یا همان ریسپانسیو ، محتوا به طور کاملا پویا و با توجه به اندازه صفحه نمایش حرکت می کند .به زبانی ساده تر طراحی واکنشگرا ، بیشتر مربوط به سمت کاربر می باشد و به گرافیک و ظاهر سایت ربط دارد .به طوری که وب سایت مورد نظر در هر صفحه نمایشی با هر ابعادی به نمایش داده می شود .در طراحی واکنشگرا یا ریسپانسیو شما فقط به یک وب سایت احتیاج دارید .طراحی ، محتوا و رابط کاربری وب سایت شما کاملا سازگار می باشد .
بنابراین بازدیدکنندگان به راحتی می توانند با هر دستگاهی و هر مرورگری از وب سایت شما بازدید کنند .در این روش دیگر احتیاجی به ساخت دو وب سایت ندارید .یک وب سایت برای رایانه های شخصی و دیگری برای تلفن های هوشمند .در واقع در این نوع طراحی سایز صفحه نمایش شما هیچ اهمیتی ندارد فقط نمایش آن ها متفاوت می باشد .
طراحی سایت انطباقی
در طراحی انطباقی ، محتوای سایت در اندازه طراحی شده که با صفحه نمایش های متداول تطابق دارد ، ثابت می شود .طراحی انطباقی بیشتر سمت سرور می باشد . یعنی وب پیچ ، سیستم کاربر را بررسی و خود را با آن تطبیق می دهد .به عنوان مثال اگر مرورگر شما جاوا اسکریپت را پشتیبانی نکند ، برای آن جایگزینی مناسب انتخاب می کند .به زبانی ساده تر در این نوع طراحی وب سایت ، شما باید برای هر نوع دستگاه یک وب سایت طراحی نمائید .یا بهتر بگوئیم در این روش از یک ساختار یکسان استفاده نمی شود . بلکه چندین ساختار برای سایزبندی ها پیش بینی شده و در زمان مناسب به نمایش در می آیند .در این روش به جای استفاده از درصد ، از پیکسل برای ابعاد ثابت استفاده می شود .برای درک بهتر این موضوع به تصاویر زیر که توسط وب سایت Froont تهیه شده توجه نمائید .
تفاوت طراحی وب ریسپانسیو و انطباقی در چیست ؟
تفاوت طراحی واکنشگرا و انطباقی
تفاوت طراحی سایت واکنشگرا و انطباقی
بعد از تعریف هر کدام ، حال نوبت به تفاوت های آن ها می رسد . در این بخش این دو تکنیک را با هم مقایسه می کنیم .مزایا و معایب هر کدام را مورد بررسی قرار می دهیم .با کمی دقت به شکل زیر می توان به تفاوت این دو نوع طراحی تا حدودی پی برد .
تفاوت انواع طراحی سایت
طراحی سایت واکنشگرا : مشکل و زمانبر
طراحی واکنشگرا معمولا زمانبر و مشکل می باشد .برای این که بتوانید یک ساختار مناسب ایجاد کنید تا در همه سایز بندی ها نشان داده شود ، نیازمند کدنویسی های دقیق CSS می باشید.اما در طراحی سایت انطباقی معمولا چند ساختار مختلف برای سایت خود تعریف می کنید .
طراحی سایت انطباقی : عدم گسترده گی
طراحی سایت انطباقی گستردگی کمتری دارد . یعنی حداکثر می توان ۳ یا ۴ سایز برای سایت مورد نظر طراحی کرد .اما یک مشکل در این نوع طراحی وجود دارد و آن عدم پاسخگوئی مناسب در انواع صفحه نمایش می باشد .
حال منظور از عدم پاسخگوئی چیست ؟
به زبانی ساده تر چون گستردگی تلفن های همراه و تبلت ها زیاد است و هر روز با انواع سایزهای نمایش متفاوت به بازار عرضه می شوند ، بنابراین در طراحی سایت انطباقی ممکن است با مشکل عدم تطبیق تصویر سایت با صفحه نمایشگر مواجه شویم .اما در طراحی سایت واکنشگرا احتیاج نداریم که برای هر سایز صفحه نمایش کد نویسی کنیم حتی با معرفی گوشی و تبلت های جدید .
افزایش سرعت سایت با طراحی واکنشگرا
در طراحی سایت واکنشگرا یک ساختار کلی برای سایت طراحی و آماده می شود .این در حالی است که در طراحی انطباقی چندین ساختار متفاوت آماده و در هنگام اتصال مخاطب به وب سایت ، بررسی و لود می شوند.در نتیجه بهترین تصویر ممکن برای مخاطب به نمایش در می آید .معمولا در طراحی سایت هائی که دارای تعداد صفحات بالا می باشند طراحی واکنشگرا انتخاب مناسبی می باشد .در مقابل سایت هائی که دارای تعداد صفحات کمتری هستند (کمتر از۲۰ صفحه) طراحی وب سایت انطباقی گزینه مناسبی می باشد .مثلا در طراحی سایت های فروشگاه اینترنتی به دلیل تعداد صفحات بالای خود ، از طراحی سایت واکنشگرا استفاده می شود .زیرا سرعت در این نوع سایت ها حائز اهمیت است .
استفاده همزمان از دو تکنیک
هر کدام از این دو تکنیک دارای مزایا و معایب خود می باشند . بهترین راه ، استفاده از مزایای این دو تکنیک به صورت همزمان می باشد .به عنوان مثال در طراحی واکنشگرا ، طراحی منوی سایت دشوار می باشد . زیرا منوها ، به سایزهای صفحه نمایش مختلفی تغییر خواهد کرد .از سوی دیگر ،در طراحی ساختار صفحات که معمولا ثابت هستند و نیازمند تغییر اساسی نیستند از تکنیک انطباقی استفاده می شود .شاید بتوان گفت بهترین راه برای پیاده سازی یک وب سایت استفاده از طراحی واکنشگرا می باشد.در این صورت بخش هائی از وب سایت همچون منوی اصلی ، هدر و یا فوتر بر اساس سایز صفحه نمایش کاربر با تکنیک طراحی انطباقی ایجاد می شود .در این صورت از مزایای هر دو تکنیک استفاده کرده ایم .در این مقاله سعی برآن شد تا حد ممکن با طراحی سایت آشنا شوید .در مقاله های بعدی با موضوعات بیشتر مانند مزایای داشتن یک وب سایت،زبان های برنامه نویسی و … آشنا می شویم.