آموزش متدولوژی و تکنولوژی طراحی وب ciw (بخش 6)

گرافيک هاي وب

اهداف :

1- تشريح عملکرد گرافيک در سايت شما
2- تعريف عمق رنگ و قدرت تفکيک پذيري
3- ابزارهاي ايجاد گرافيک
4- انتخاب قالبهايي براي فايلهاي گرافيکي

سئوالات قبل از شروع فصل :

1- وقتي يک صفحه وب در مرورگر بارگذاري مي شود 2 عامل مهم که کاهش زمان بارگذاري تاثير زيادي دارد چيست؟
2- شرايط کاهش سايز فايل چيست ؟
3- شرايط برنامه هاي نرم افزاري که از طرف طراحان وب براي کاربران ايجاد و در دسترس قرار مي گيرد، چيست ؟
4- سلسله مراتب درکاهش يا افزايش يک فايل گرافيک چيست ؟

مقدمه :

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


تصاوير

در طراحي سايت تصاوير ارکان اصلي هستند . کاربران انتظار دارند که اين عکسها بتوانند مشاهدات خوبي برايشان به ارمغان آورند . همچنين از عکسها براي Navigation و نقشه هاي تصويري و دگمه هاي تصويري، ( که باعث اتصال به صفحات و يا منابع ديگر مي شوند )، استفاده مي شود . روي يک سايت يکدست و يکپارچه ساختار Logo و نماد هاي تجاري براي شناسائي بسيار مهم هستند . تصاوير خوب در طراحي بايد داراي جذابيت و کارآيي و مهمتر از همه سايز کوچک باشند .

اندازه فايل به طور مستقيم بر زمان بارگذاري تاثير دارد و ملاحظات اصولي براي توسعه و انتشار وب در اين مورد بايد رعايت شود . طراحان بايد پهناي باندي که براي تصاوير بکار برده شده در صفحه مورد نياز است را ، در نظر داشته باشند .

معمولاً کاربران براي ديدن عکس بي صبر و حوصله مي شوند . مندرجات صفحات وب با بکارگيري غلط عکسها و ايجاد زمان بارگذاري طولاني نابود مي شوند .
مودم با سرعت 56 kbps در Dial Up استاندارد به کار برده مي شود ولي هنوزهم خيلي از مودم هاوجود دارند که با سرعت کمتر از آن، مورد استفاده قرار مي گيرند . اگر سايت به منظور استفاده در اينترانت بر روي شبکه ايجاد شود خيلي ازاين موانع بر طرف خواهد شد . به ياد داشته باشيد که سرور اينترانت هدف متفاوت تري نسبت به برنامه هاي کاربردي دراينترنت دارد . نمايش اينترنت براي استفاده عمومي باشد و مي تواند نماي سازمان را براي دنياي بيرون ترسيم کند ولي اينترانت براي مصارف تجاري و به مقصود دسترسي سريع و آسان به منابع و اطلاعات بنا شده است.ايجاد زرق و برق در اينترانت باعث کاهش بهروري مي گردد. شما مي توانيد اينترانت را در جهت به عمل و اينترنت را مکاني جهت نمايش و عرضه بحساب آوريد.
گرافيک ها تشريح و توضيحي بر موارد و فعاليتهاي سايت و نيز ارائه معاني Navigation در يک سايت وب مي باشند.

داده هاي متصور رقمي :

همه تصاوير ديجيتالي ويژگيهاي خاص و مهمي را دارند که مي توانند در اندازه سايز آن موثر باشند که مقدار کمي از اين ويژگيها در اين بخش بيان مي شود .

پيکسل : ( Pixel)

نقطه کوچکي در تصوير مي باشد و در يک جمله شبکه اي از بلوکهاي ساختماني براي گرافيکها و تصاويري است که مي تواند بر روي کامپيوتر نمايش داده شود . پيکسل کوچکترين واحد نمايشي کامپيوتر است .

عمق رنگ :

پيکسل به مقدار زيادي اطلاعات رنگي ايجاد مي کند . اين اطلاعات با بيت اندازه گيري مي شوند .حساب کنيد که چگونه هر پيکسل تمامي اين رنگها را مي تواند نشان دهد . براي مثال اطلاعات پيکسل 4 مي تواند بيتي در مد Gray Scale تا 16 سايه خاکستري را نشان دهد . هر 8 بيت از اطلاعات رنگ در هر پيکسل تا 256 بيت از اطلاعات رنگ را توليد مي کند و به اين ترتيب بديهي است که در درجات بالاتر بيت ( که عمق بيت نيز ناميده مي شوند ) واقع بيني رنگي بيشتري را به ارمغان مي آورد .
ضرورت تفکيک پذيري استاندارد صفحه نمايش 640*480 يا 72 نقطه در اينچ (dpi) مي باشد . شما بايد المانهاي وب را با آهنگ خاص براي کاربران جلو برده و توسعه دهيد .

جدول رنگ و الگو :

( مجموعه اي از رنگهاي قابل دسترسي در يک سيستم گرافيکي کامپيوتر ) :
اگر چه 8 بيت رنگ مي تواند ميلونها رنگ را نمايش دهد ولي فقط در يک زمان 256 رنگ حمايت مي شوند . سيستم فقط اين 256 رنگ را در سيستم گرافيکي خود ذخيره ميکند .
تذکر : تفاوت کمي مابين جعبه رنگ ويندوز ميکروسافت و جعبه رنگ مرورگر Netscape Navigator وجود دارد . Navigator از 256 رنگ حمايت مي شوند ولي ويندوز از216 رنگ استفاده مي کند . هنگامي که يک عکس 8 بيتي ايجاد مي کنيد از يک بردار و يا يک نرم افزار نمايشي استفاده مي کنيد ،خود برنامه يک جعبه ايجاد مي کند که رنگهايي که در عکس موجود مي باشند در آن جعبه رنگ نيز وجود دارد . هنگامي که تصوير اصلي نمايش داده مي شود جعبه رنگ براي نمايش رنگ اصلي تنظيم مي شود . وقتي که تصاوير متعددي بطور مرتب و يکجا به نمايش مي گذاريد دچار عدم هماهنگي در تلالو رنگها مي شويد که اين امردرخشش الگو يا عوض شدن جعبه رنگ ناميده مي شود .
درخشش الگو، زماني اتفاق مي افتد که تفاوت معني دار زيادي بين تراکم ( چگالي ) تصوير يا جعبه رنگ آن و تراکم ( چگالي ) سيستم يا جعبه رنگ آن وجود دارد . براي غلبه بر اين محدوديت مرورگر به طور اتوماتيک تکنيکي را بنام افزايش نور تصوير ايجاد مي کند .

افزايش شدت نور نمايش

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


عکسهاي با فورمات Bitmap و برداري (Vector)

عکسهاي گرافيکي وب به 2 قالب دسته بندي مي شوند Bitmap و Vector که هر قالب خود زير شاخه هايي نيز دارد .

Bitmap:

بيشترين قالب گرافيکي معمول Bitmap مي باشد .
عکسهاي Bitmap از تاثير هر رنگ نمايش به طور جداگانه ساخته شده اند . هر چقدر که رنگهاي ايجاد شده توسط يک عکس بيشتر باشد، سايز فايل مربوطه به آن عکس بيشتر مي شود . وقتي که فايل Bitmap با بزرگنمايي ديده مي شود ، فايل Bitmap شبيه به يک سري مربع کوچک مي شود که هر يک درجه رنگي دارند که در کل عکس سهم دارد .
Bitmap هنگامي که از نزديک ديده مي شود ظاهري ناصاف دارد اما هنگامي که با فاصله به آنها نگاه مي کنيد بصورت نقطه ، نقطه و شبيه به شکل واقعي و يا بصورت بلوکهاي مجزا مي باشد.
براي ساختن فايل Bitmap مرورگر موجود به طور هماهنگي در بارگذاري يک عکس با يکديگر کار مي کنند .
اطلاعات هر پيکسل ذخيره مي شود و سپس دوباره در مرورگر براي ايجاد تصوير برگردانده مي شود.چون فايلهاي فايلهاي Bitmap از تعداد ديسکهاي بيشتري براي نمايش استفاده مي کنند سايز بزرگتري دارند،فايلهاي bitmap براي عکسها اثر هاي سايه دار و لبه هاي هموار يا تيره ايجاد مي کنند.

بردار :

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

برنامه هاي گرافيکي :

شما مي توانيد با برنامه هاي گرافيکي تصاوير ديجيتالي ايجاد کنيد . اخيراً پيشرفت هاي زيادي در نرم افزارها براي ويرايشي کردن عکسها ، رتوش کردن و ارسال آن براي وب ايجاد شده است .
اين برنامه ها به 2 گروه زير تقسيم مي شوند :
ترسيم بردار ، فايلهاي از نوع نقاشي

برنامه هاي ترسيم اشکال گرافيکي برداري :

نرم افزارهاي ترسيم بردار مبنا مانند XRes و AdobeIllustrator توصيف کننده نقشه شکل مي باشد و مي توان در آن خطوط نامرئي ايجاد کرد .
اطلاعات عکس در مجموعه اي از دستورالعمل هاي رياضي ذخيره مي شود . در قبل بحث کرديم که تصاوير برداري مستقل از مانيتور هستند به اين معنا که تنظيمات مانيتور کامپيوتر بر روي سايز و اندازه تاثير گذار است و نيز اين تصاوير کوچکتر از فايلهاي مشابه خود از نوع Paint هستند . تصاوير برداري گرافيکي معمولا در ابعاد سه بعدي و در محيط هاي زبانهاي نمونه سازي فرضي VRLM- Virtual Reality Modeling Language مورد استفاده قرار مي گيرند و معمولا نمي توانند به درستي و به طور واقعي گرايانه جزئيات تصاوير را انتقال دهند و نمايش آنها در صفحه نمايش تا اندازه اي آهسته تر است ونيز براي ديدن آنها در وب نياز به plug-ins مي باشد. به هر جهت تصاوير برداري در صنعت و مصارف علمي کاربرد خيلي خوبي دارند . بعدا به معرفي برنامه هايي که از تصاوير برداري حمايت مي کنند خواهيم پرداخت.

برنامه هاي نقاشي :

برنامه هاي نقاشي از Scan از عکس تا ضبط فريم هاي ويدئويي فايلهاي Bitmap ايجاد مي کند و يا براي ايجاد کارهاي هنري از آنها استفاده مي شود .
فايلهاي Bitmap با جزئيات بيشتري نشان داده مي شوند . در قبل بحث کرديم که فايل Bitmap با نقطه هاي کوچکي که هر نقطه مطابق با يک پيکسل در صفحه نمايش مي باشد طراحي شده است .
فايلهاي Bitmap در هنگام ضرورت پيکسل به پيکسل ويرايش مي شوند .
مضرت فايلهاي Bitmap در اين است که سايز فايلهاي اصلي بزرگ هستند . ظاهر فايلهاي Bitmap به طور زيادي بر صفحه مانيتور اثر مي گذارد . هر دو قالب Jpg ، Gif از نوع Bitmap هستند .
براي ايجاد تصاوير گرافيکي خوب معمولا از نرم افزارهاي زير استفاده مي شود:
• Adobe Photoshop
• Microsoft Image Computer
• JASC Paint Shop Pro

قالبهاي فايل تصوير

تصاوير گرافيکي در قالبهاي زير ظاهر مي شوند : Bitmap (BMP) قالب TIFF (Tagged Image File Format) (Gif) Graphic Interchange Format , (WMF) Windows Meta File (JPEG) Joint Photo Graphic Express Group فقط قالبهاي Gif و JPG بطور معمول و ذاتي با مرورگرها حمايت مي شوند و فورمتهاي ديگر با کمک Plug in مشاهده مي شوند . حمايت ذاتي به اين معنا است که مرورگر نيازي به نرم افزار خاص براي نمايش عکس ندارد . هنگام ايجاد يک تصوير وب يک طراح بايد يکي از فايلهاي jpg يا gif را بر مبناي نوع عکسي که در فرمت دارد انتخاب کند . جدول زير قالبهاي گوناگوني از فايلهاي عکس و پسوندهاي آن را نشان مي دهد .

File Name Extension File Format Origin
Jpg,jpeg Joint photoGraphic Experts Group Joint Photographic Experts Group
Gif Graphic InterImage Format Compuserver.Inc
Tif Tag Image File Format Aldus Corporation
Bmp Bitmap(BMP) Microsoft Corporation
Wpg Word Perfect Graphic Word perfect Corporation
Png Protable Network Graphics Codelable INC
PCX Bitmap(BMP) Soft corporation
Graphic Interchange Format- Gif

Gif يک قالب فايل مستقل است که محدود به نمايش 256 رنگ مي باشد که بطور طبيعي بوسيله Compuserver براي سرويسهاي روي خط انتشار داده شده است . Gif براي اکثر طراحان حرفه اي وب قالب خوبي مي باشد زيرا سايز آنها کوچک هستند.
بهم تابيدگي فايلهايGif بي نظير است و بهتر است که براي فايلهاي بزرگ از اين نوع قالب استفاده شود . Gif به عنوان يک قالب کم ضرر در نظر گرفته مي شود به اين معني که تصوير فشرده مي شود در حالي که هيچ اطلاعاتي از دست نمي رود . در نتيجه يک فايل Gif نمي تواند به اندازه يک فايل Jpg فشرده شود و نيز طراح نمي تواند ميزان فشردگي را محاسبه کند .
Animated -Gif
در سال 1989 ورژني از نرم افزار مربوط به فايلهاي Gif اين امکان راداد که رشته توالي از عکسها ذخيره شده يک فايل متحرک نمايش دهد. فايلهاي Gif مي توانند انيميشن هاي کامل و افکتهاي ويدئوئي بدون نياز به Plugins را ايجاد کنند .
فايلهاي Gif ممکن است شامل يک عکس ساکن باشد ، توابع متحرک Gif مانند کارتون و ...
فايلهاي Gif ممکن است شامل فرمهاي متوالي است که تقريباً از Cach مرورگر بارگذاري ميشوند و بطور نا محدود تکرار ميشوند و يا حلقه مجبور به حرکت تقليدي ميشود. يکي از اختيارات Gif هاي متحرک اين است که آنها در درجه بالاي تصاوير متحرک قرار دارند آنها وابسته به Client - Pull و Server – Pushنيستند. هم Client – Pull و هم Server Push نياز به فايلي دارند که بتوانند بطوري در پي در پي با تعداد زيادي تغييرات بين کامپيوتر کاربر و کامپيوتر سرور بارگذاري شود .

( Server Push _Client Pull )
( Server Push _ Pull ) ترکيبي از فنون سرويس دهنده / سرويس گيرنده وب که بصورت انفرادي شامل فشردن سرويس دهنده يا کشيدن سرويس گيرنده است. در فشردن سرويس دهنده ، داده ها را در سرويس گيرنده بار گذاري ميکند . اما ارتباط داده اي همچنان باز ميماند . اين ترکيب به سرويس دهنده امکان ميدهد که در صورت که در صورت لزوم انتقال داده ها را به مرورگر ادامه دهد . در کشيدن سرويس گيرنده ، سرويس دهنده داده ها را براي سرويس گيرنده بار گذاري ميکند. اما ارتباط داده اي باز باقي نميماند. سرويس دهنده رهنمود HTML را براي مرورگر ارسال ميکند و به آن اعلام ميکند که اين ارتباط را پس از يک فاصله زماني مجدداً باز کند. تا داده هاي بيشتري را دريافت کرده يا احتمالاً URL جديدي را باز کند.

Gif شفاف

امتيازي که فايلهاي Gif نسبت به تصاوير JPG دارند اين است که طراح مي تواند يک رنگ از تصاوير Gif طراحي کند که شفاف باشد و اين ويژگي باعث رفع محدوديت ها در اشکالي مثل مربع يا مثلث مي شود . براي مثال يک طراح مي تواند يک Logo دايره اي با يک زمينه رنگ شفاف ايجاد کند . بنابراين عکس با اطلاعات شفاف و بصورت دايره ظاهر مي شود .

تمرين 5-1 ايجاد سايت عکسهاي متحرک :

در اين تمرين شما از يک سرويس دهنده بر روي اينترنت براي ايجاد يک تصوير متني و متن متحرک استفاده مي کنيد .
1- وارد سايت http://www.mediabuilder.com شويد .
2- اتصال 3D Text Maker را که در طرف چپ صفحه قرار دارد انتخاب کنيد.
3- در مرحله اول فونتي دلخواه را براي متن خود انتخاب کنيد .
4- در مرحله 2 رنگي براي فونت خود در نظر بگيريد .
5- مي توانيد ابعاد متن خود را تنظيم کنيد .
6- در اينجا شما مي توانيد افکت هاي رنگي نيز براي متن خود اعمال کنيد .
7- در ميدان متني ، متن مورد نظر خود را وارد کنيد . مي توانيد براي مثال متن My 3D Text را وارد کنيد و سپس روي Make 3D Text کليک کنيد صفحه ديگر با فايل گرافيکي کامل شده بارگذاري مي شود . شما مي توانيد تغييرات ديگري را نيز وارد کنيد و همچنين مي توانيد فايل خود را با ابزار ديگري بنام Gif Works ويرايش کنيد و آنرا بر روي هارد محلي خود ذخيره کنيد .
8- به صفحه خانگي http://www.mediabuilder.com بازگرديد و اين بار ابزار Animated Banner Maker را انتخاب کنيد .
9- دستورالعمل استفاده از اين ابزار را بخوانيد .
10- براي اين تمرين سبک Around the world را انتخاب کنيد .
11- اگر نياز باشد با اسکرول به پائين برويد و وارد اولين ميدان متني شويد .
12- بر روي دگمه Make Banner کليک کنيد Banner در صفحه اي جديد ظاهر مي شود .
13- مراحل ذخيره فايل را به هارد بخوانيد .

Joint Photographic Experts Groop -JPEG :

عکسها در قالب JPEG از رنگهاي بيشتري نسبت به فايلهاي Gif برخوردار هستند . اما معمولا به زمان بارگذاري بيشتري نيز نياز دارند .
فايلهاي JPG شامل اطلاعات 24 بيت رنگي ( 16.7 ميليون رنگ ) مي باشند و به خوبي در تصاوير يکپارچه گرافيکي و عکسبرداري ها ظاهر مي شوند . بايد به خاطر آوريد که خيلي از کاربران فقط توانايي نمايش 8 بيت رنگ را براي خود دارند و در نتيجه در نمايش عکس براي آنها به مقدار قابل ملاحظه اي افزايش نور ايجاد مي شود . ( پديده اي که قبلاً راجع به آن بحث شد)
فايلهاي JPG به طور اتوماتيک فشرده مي شوند و در هنگام ورود به صفحات وب از حالت فشردگي خارج مي شوند . اثرات فشرده سازي متفاوت هستند . فشردگي بيشتر تنزل درجه بيشتري در عکس نهايي دارد . JPG را به عنوان يک فايل زيان آور و پر اتلاف در نظر مي گيرند . به اين معني که فشردگي عکس را افزايش مي دهد . رنگها با قطره چکان از جعبه رنگ عکس برداشته مي شود و نتيجه آن تنزل در کيفيت عکس است . براي مثال يک فايل 100 kb مي تواند 10 kb فشرده شود و به هر جهت اين فشردگي کيفيت عکس را کم مي کند . يکي از مضرات استفاده از اين قالب اين است که طراح کنترلي بر چگونگي تبديل 24 bit به 256 رنگ استفاده شده با صفحه نمايش کاربر را ندارد .
همچنين تفاوت بارزي در نحوه نمايش اين قالب در 2 مرورگر IE و NetScape وجود دارد بعلاوه نحوه نمايش در PC ها نيز متفاوت تر از مکينتاش مي باشد . طراح بايد قبل از آنکه صفحه خود را به اتمام رسانيد بداند که کدام قالب منظور وي را بهتر تامين ميکند و کار خود را در دو مرورگر با سيستم عامل هاي مختلف آزمايش کند .

JPEG2000:

قالب جديد JPEG به منظور توسعه ويژگي هاي فشردگي فايلهاي JPEG استاندارد مي باشد همانطور که قبلا بحث شد قالب اخير JPEG که اطلاعاتي راجع به تصويري که فشرده شده است در بردار سودمند نسيت و اين قضيه در نتيجه روزنه هايي را در تصوير ايجاد مي کند و باعث ايجاد تصوير خالدار مي گردد . در JPEG 2000 فشرده سازي در اثر يک تکنولوژي مواج بوجود مي آيد که اطلاعات را به گونه اي متفاوت ذخيره مي کند که تعداد زيادي از تکه هايي که در تصاوير فشرده شدهاي که از طريق JPEG بوجود آمدند را از بين مي برد .

Portable Network Graphics -PNG:

قالب PNG به عنوان يک قالب جديد براي گرافيکهاي وب ظاهر شده است . براي تصاوير وب PNG بهترين ترکيب از ويژگيهاي JPG و GIF را تحت يک قالب واحد دارا مي باشد . فايلهاي PNG زيادتر هستند و همچمين از شفافيت فايلهاي GIF و از عمق رنگي JPGحمايت مي کنند . فشردگي در فايلهاي PNG با استفاده از فيلترهاي فشردگي که تا عمق 48 bit حمايت مي شوند توسعه پيدا کرده است . حمايت مرورگرها از قالب PNG هنوز معمول نشده است . Netscape 4.7 و IE5 با درجات مختلفي از PNG حمايت مي کنند . به هر جهت کميته www در 1996 فرمت PNG را پيشنهاد داد ولي فرمت استاندارد شده نيست .

تصاوير برداري مقياس پذير SVG

قالب تصاوير برداري مقياس پذير (SVG) در فاز نقشه هاي کاري W3C مي باشد . SVG در XML در تشريح اشکال اصلي کاربرد دارد . مشابه بردارهاي گرافيکي ديگر SVG هنگامي که با هنرهاي خطي و اشکال کار مي کند بهينه مي شود .


SVG به کمپانيهاي نرم افزارهايي که از SVG حمايت مي کنند را مي توانيد در سايت زير پيدا کنيد :

http://www.w3.org/graphics/svg/overview.htm8

منبع فناوري اطلاعات ايران