خانه        بایگانی

رابط گرافیکی کاربر در طراحی وب سایت و برنامه های کاربردی بر مبنای وب [یکشنبه، 4 مردادماه 1388]

GUI را در عرصه ی دنیای اینتر نت می توان ظاهر گرافیکی دانست که برای جریان اطلاعات ترسیم می شود و کاربران را ترقیب به دنبال کردن و دریافت اطلاعات می کند.

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

وب (web)
واژه ای انگلیسی به معنی تار است. وب یک فضای اطلاعاتی جهانی است که مردم می توانند توسط اینترنت در آن بخوانند یا بنویسند. این عبارت معمولاً به صورت اشتباه به جای اینترنت به کار می رود اما وب در حقیقت یکی از خدماتی است که روی اینترنت ارایه می‌شود مانند پست الکترونیک. ‌سایت یعنی مکان و منظور از وب‌سایت، صفحات مرتبط است. واژه وب‌گاه در فارسی جایگزین وب‌سایت شده است.
طراحی صفحه های رسانه وب
طراحی یا آراستن صفحه های رسانه وب و یا سایت‌ها و نرم افزارهای وب، بوسیله اَبَرمتن یا زبان‌های نشانه‌گذاری مانند اچ‌تی‌ام‌ال، و با کمک الگوهای آبشاری وب (یا CSS) و تصویرها (یا Images)، با رعایت درست استانداردهای وب، را طراحی وب می گویند. طراحی وب یعنی طراحی یک یا تعدادی صفحه از جنس اَبَرمتن (Hyper Text)، که به یکدیگر پیوند داده شده و پیوسته به یکدیگر هستند و می تواند مجموعه ای باشد از طراحی گرافیک، طراحی رابط گرافیکی کاربری (GUI)، تصویرسازی یا کاریکاتور، پویا نمایی یا انیمیشن، متون نوشته شده ، برنامه نویسی و کد نویسی، کدهای الگوهای آبشاری وب (یا CSS) و از همه مهم‌تر، طراحی سناریو و چگونگی ساختار سایت، روش قرار گرفتن صفحه ها، یا به عبارتی ساده تر، طراحی نقشه کاربری. طراحی گرافیک تنها بخشی از طراحی وب است.
طراحی وب با طراحی بروشور و طراحی برای چاپ، تفاوت دارد. صفحه‌های وب به گونه‌ای طراحی می‌‌شوند که بر روی نمایشگر رایانه خوب دیده شوند، بنابراین بیشینه دقت تصاویر، دقت نمایشگر است. برخلاف بروشور و روش طراحی برای چاپ، که داده ها در چند صفحه و به گونه یکجا در اختیار کاربر قرار می‌‌گیرد، در صفحه‌های وب این داده ها بر روی کامپیوتر سرویس دهنده ذخیره می‌‌گردند، و کاربر تنها هر صفحه‌ای که احتیاج داشته باشد را با نرم افزار مرورگر وب (Web browser)، مرور می‌‌کند. این باعث می‌‌شود تا در بخش بندی داده ها و در دسترس گذاشتن‌ آنها، به شکلی متفاوت برخورد شود. از طرف دیگر جابجایی داده ها و در دسترس گذاشتن آنها از دید نرم افزاری، در شبکه ها، محدودیت هایی برای طراحی وب ایجاد می‌‌کند. به عبارتی دیگر، برتری این نوع از انتشار دیجیتالی - الکترونیک داده ها بر سایر رسانه‌ها آن است که باعث می شود هر کاربری در هر گوشه جهان به آسانی به آنها دسترسی داشته باشد و این برتری رسانه وب را فراگیرتر نموده.
بنابراین نرم افزارهای طراحی وب، به کلی با دیگر نرم افزارهای طراحی و چیدمان متفاوت هستند. نا آشنایی طراحان گرافیک با نرم افزارهای وب، یکی از دلیل های تمایل نداشتن آنها به طراحی وب است. در سال هايی که استفاده از وب هنوز فراگیر نشده بود، شمار کمی از طراحان گرافیک درگیر طراحی وب بودند، اما اکنون، طراحی وب، وابسته به همکاری برنامه نويسان و طراحان وب و گرافیست ها شده است و لازمه این همکاری متقابل آن است که گرافیست با اصول پایه برنامه نویسی آشنایی داشته باشد تا بتواند در بخش هایی از کار که وابسته به برنامه نویسی است از پس کار برآید.
طراحی وب، بخشی از ساخت یک وب سایت است، که می تواند شامل تنظیم وب سرور یا داده‌گاه وب، نوشتن نرم افزارهای وب و برقراری امنیت وب سرور یا «داده‌گاه» باشد.
تاریخچه
تیم برنرز لی، بنیانگذار شبکه جهانی وب، با برپایی یک سایت وب در آگوست ۱۹۹۱، نام خود را به عنوان نخستین طراح وب در تاریخ نگاشت. او در نخستین سایت وب اش، از اَبَرمتن و پیوندی برای ایمیل (پست الکترونیک) استفاده کرده بود. در آغاز، سایتهای وب با کُدهای ساده «اچ‌تی‌ام‌ال» نوشته می شدند، گونه ای از زبان کُدنویسی که ساختار ساده‌ای به وب سایت ها می داد، شامل سرتیتر و پاراگراف، و توانایی پیوند دادن به صفحه های وب دیگر، با اَبَرمتن. در مقایسه با روش های دیگر، این راه تازه و متفاوتی بود که کاربران به سادگی می توانستند با یک مرورگر، صفحه های پیوند خورده را باز کنند.
با پیشرفت وب و هنر طراحی آن، زبان کُد نویسی اش، اَبَرمتن یا اچ‌تی‌ام‌ال، پیچیده تر و پرانعطاف تر شد. ابزاری مانند جدول ها (Tables) که بیشتر برای نمایش نمودارهای داده ای بودند، بزودی مورد استفاده نادرست، برای چیدمان های پنهان در صفحه های وب قرار گرفتند. با پیدایش صفحه های الگوی وب یا «CSS»، روش نادرست طراحی با جدول های پنهان در صفحه، از گردونه خارج، و بجای آن استفاده مناسب از صفحه های الگوی وب یا «CSS»، جایگزین شد.
در گذشته برای چیدمان چاره ای جز بکارگیری جدول های پنهان وجود نداشت ولی امروزه با فراگیر شدن استفاده از CSS به مرور شاهد تصحیح روش های غلط و استاندارد سازی برای این منظور هستیم به گونه ای که سایت های بزرگی چون یاهو، ماکروسافت و اپل با این که حجم مطالب چیدمانی در صفحاتشان بسیار زیاد است و گرافیک سایت بالایی دارند با این حال حتی از یک Table برای سایت های خود استفاده نکرده اند ( به اصطلاح table less هستند ) که این جای شکفتی دارد. معروفترین و بزرگترین سایت های فارسی زبان هنوز نتوانسته اند به این مرحله از استاندارد سازی در طراحی مدرن دست پیدا کنند.
فن آوری های یکپارچه سازی داده‌گاه ها (Database)، مانند زبان‌های کُدنویسی سمت سرور (Server-Side Scripting) مانند CGI, PHP, ASP.NET, ASP, JSP و ColdFusion، و استانداردهای طراحی مدرن با الگوها (CSS)، ساختار سایت های وب را باز هم تغییر داده و آنرا پیشرفته تر کرده. با این حال هنوز استفاده از Table ها برای Layout وب سایت متداول ترین و آسانترین روش ممکن است.
همچنین با آمدن تصاویر پویا و فن آوری های پویانمایی به صفحه ها، مانند فِلَش (Flash)، چهره وب بیشتر از پیش تغییر کرد و توانمندی های تازه ای را به سازندگان رسانه و طراحان وب داده است.
نرم افزارهای طراحی وب
همان گونه که طراح های گرافیک با پيشرفت نرم افزارهای رايانه ای، ناچار شدند تا کار طراحی با آنها را فرا بگیرند، برای طراحی وب نیز ناگزیرند تا با نرم افزارهای خاص طراحی وب آشنا شوند، با این تفاوت که بجز ساختن بخش های گرافیکی یک سایت وب، کاربر می تواند همه صفحه ها را به سادگی در یک نرم افزار ویرایش کننده متن ، با رعایت استانداردهای وب ، بسازد و پس از آن، فایل های ساخته شده را، روی داده‌گاه یا سرور بفرستد. برخی از زبان های رايج برنامه نويسی و نوشتن کد اَبَرمتن برای وب عبارتند از: «اچ‌تی‌ام‌ال» (HTML)، جاوا اسکريپت، CSS ،ASP ،PHP ،CGI ،XML ، .NET ، ColdFusion و غیره. از این میان تعدادی به طور حتم برای اجرا نیاز به سرور دارند.
برخی از برنامه های مورد استفاده در طراحی وب:Adobe Photoshop ،Adobe Flash ،Adobe Dreamweaver، و . . . می باشند. همچنین نرم‌افزارهای غیر استانداردی مانند Microsoft FrontPage بیشتر با نام «تولید کننده صفحه های وب مایکروسافت» شناخته می شوند تا نرم افزار طراحی وب، به گونه ای که جفری زلدمن، از طراح های بسیار سرشناس سبک طراحی استاندارد وب، این نرم افزار را به دلیل سرکشی از استانداردها، «نرم افزار ساخت صفحه های مرورگر اینترنت مایکروسافت (یا IE)» و نه وب، معرفی کرده.
همچنین در برخی از سبک‌های طراحی وب، که بر اساس نرم افزار فلش طراحی شده اند از طراحی دستی که با نرم افزارهای گرافیکی همچون Freehand و یا Illustrator بهینه گشته اند استفاده می شود. سبک نوین در زمینه طراحی و اطلاع رسانی در جامعه کنونی وب، به سمت قالب فلش سوق پیدا کرده و به دلیل گستردگی و جانداری بیشتر در فلش، بعضی کاربران مایلند تا از این فن آوری وب برای سایت شان استفاده کنند ولی این نوع طراحی محدودیت های خاص خود را داراست که از آن جمله می توان به نبود پلاگین مربوطه برای اجرای فایل های فلش بر روی تمامی سیستم ها، حجیم بودن فایل های تولیدی و کندی اجرا بر روی سیستم هایی که سرعت اینتر نت آنها بالا نیست، محدودیت های ساخت فایل های فلش به علت حرفه ای بودن نرم افزار مربوطه برای افراد عادی و . . . اشاره کرد. آسان ترین نرم افزار برای طراحی وب، یک ویرایشگر ساده متن رایانه است، جایی که بتوان کدهای ساده را وارد کرد و آنها را روی یک داده‌گاه یا سرور، نگهداری نمود.
استانداردهای وب
عبارتی است کلی در بحث ساختار و طراحی وب، به معنی «دستورها و قانون‌ها» و مشخصات فنی وضع شده‌ای از سوی کنسرسیوم جهانی وب (W3C)، که سیمای کلی و همه جنبه‌های شبکه جهانی وب را نمایش و شرح می‌دهند. در سالهای اخیر، این عبارت بیشتر به جنبش استانداردهای وب وابسته شده‌است. جنبشی رو به گسترش، برای فراگیر ساختن «مجموعه استانداردی از روش‌های ساخت» سایت‌های اینترنتی، و تعریف فلسفه‌ای گسترده تر در سبکِ ساخت و طراحی وب، که شامل این مجموعه «روش‌های ساخت» است.
برای نمونه، قانون «ساختار متن»، یا دستور چگونگی قرار دادن متن در صفحه وب، بدون استفاده از ترفندهای غیر استاندارد، به روشی که حتی برای کاربران نابینا هم دسترسی آسانی داشته باشد، یکی از این دستورهاست که طراح وب را مجبور می‌کند تا قانون «ساختار متن» را رعایت کند.
بسیاری از این دستورها و مشخصات فنی وضع شده که بر همه جنبه‌ها و سیمای کلی اینترنت حاکم شده‌اند، و نه تنها شبکه جهانی وب، به گونه‌ای مستقیم یا غیر مستقیم، روش طراحی، مدیریت، ساخت و پیشبرد یک سایت و دیگر سرویس‌های وب را زیر تاثیر خود قرار می‌دهند. با اینکه هر یک از این دستورها و روش‌ها ممکن است «استانداردهای وب» خوانده شوند، پویندگان جنبش استانداردهای وب، به استانداردهای بالاتری که بیشتر و به گونه‌ای مستقیم، سایت‌های وب را هدف قرار داده‌اند، مانند دسترسی (یا Accessibility) و کارایی (یا Usability)، تمایل نشان می‌دهند.
تحلیلی بر روند رشد و پیشبینی آنچه در آینده رخ خواهد داد
در سالهای نخست پیدایش اینترنت و وب به علت ابتدایی بودن تکنولوژی های سخت افزاری و نرم افزاری طراحی های گرافیکی جذابی را برای استفاده در سایت های اینترنتی شاهد نبودیم. یک سایت وب از تعدادی پاراگراف متنی، و تصاویر بسیار ساده و تعدادی Hyper Link تشکیل شده بود و نهایتا جداولی نیز در آنها مورد استفاده قرار می گرفت. استاندارد های حروف نیز فقط برای تعداد محدودی که اکثرا حروف لاتین بود تعریف شده بود و حروف فارسی در وب جایگاهی نداشت.
با ورود اینترنت در سطح عمومی به ایران در حدود سال های 1996 -1997 و احساس نیاز به فارسی نویسی در وب نرم افزار های واسطی برای وارد کردن متون فارسی به محیط وب نوشته شد که نواقص بسیار زیادی داشت. کاربر حتما باید فونت مورد نظر را در سیستم خود بارگذاری می کرد و تنظیمات بسیاری را در مرورگر وب خود برای نمایش صحیح نوشته ها انجام می داد.
با توسعه سیستم های عامل از جمله ویندوز 2000 و اضافه شدن استاندارد های زبان برای حروف مختلف این نواقص به مرور مرتفع شد و حروف فارسی نیز بسیار راحتتر در وب مورد ستفاده قرار گرفت. کمبود تنوع قلم های استانداردی که در وب بتوان از آنها استفاده کرد هنوز به شدت احساس می شود. البته این نکته قابل ذکر است که کلا برای نوشتن در وب محدودیت در استفاده از قلم وجود دارد و این متخص زبان فارسی نیست.
در سالهای اخیر با توسعه مرورگر های وب و قابلیت های فراوانی که در نمایش فرمت های جدید تصویری در آنها مشاهده می شود و همچنین توجه شرکت های تولید نرم افزار های طراحی و برنامه نویسی وب از جمله Adobe و Microsoft به عنوان پیشتازان این صنعت روند رو به رشدی را با سرعت زیاد شاهد هستیم. رقابت بین این دوشرکت و ورود سریع نرم افزار ها و تکنولوژی های جدید در بهبود ظاهر و مدیریت محتوی سایت ها، بر سرعت این رشد افزوده است به طوری که در سال 2006 با خرید کلیه سهام شرکت Macromedia توسط Adobe و افزایش رابطه تعاملی بین نرم افزار های گرافیکی و طراحی وب از جمله illustrator، Photoshop، Flash و Dreamweaver در نسخه های Creative Suite 2 و 3 شاهد پیشرفت های چشمگیر در نوع Layout و طراحی قالب های وب سایت هستیم مایکروسافت نیز در سالهای اخیر برای عقب نیفتادن از این روند توسعه ای نرم افزار های Web experience و SharePoint Designer را به بازار ارائه کرده است و با طراحی فرمت جدید گرفیگی که توانایی ایجاد object های تصویری متحرک را (مانند فلش) داراست به نام Silverlight سعی در رقابت باAdobe Flash دارد.
فرمت تصویری PNG24 و پشتیبانی مرورگر های وب جدید مانند IE 7 می تواند مقدمه ای برای یک انقلاب در حوزه گرافیک وب باشد. PNG24 با قابلیت های بی نظیری مانند حالت های نیمه شفاف با درصد شفافیت 0 تا 100 درصد، خلاقیت ها و ایده های طراحی گرافیکی بسیاری را می تواند به عمل و اجرا در آورد.