آموزش متدولوژی و روش طراحی وب سایت گام به گام

[آبجی]

ايجاد تصاوير

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

ويژگي ALT :

ويژگي ALT متون اختياري در مکانهايي از تصاوير بر روي صفحات HTML ايجاد مي کند .

ويژگي ALT براي مکان هاي زير مهم است :

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


بهينه سازي تصاوير :

يک طراح وب اگر نتواند تصاوير خود را بهينه سازي کند هيچ يک از توانمنديهاي Gif و jpg و Png تشخيص داده نمي شود. اين اشتباه غلط ازآنجا ناشي ميشود که بگويم هيچ يک از اين قالبها از ديگري بهتر نيست. در صورتيکه در قبل گفتيم که هر قالب تصوير داراي توانمندي مي باشد که آن را منحصر به فرد مي کند . به عنوان يک طراح وب بايد بياموزيد که چه نوع قالبي را براي ايجاد يک تصوير خوب و جذاب و بدون مشکل به کار بريد استفاده از قالبهاي Gif يا Jpg شما را به استفاده از تصاوير بهينه مطمئن نمي سازد .

موارد زير راهنمايي است که شما را در بهينه سازي تصاوير کمک مي کند :

● استفاده از رنگهايي که در وب امنيت دارند .
● ايجاد يک ليست از رنگهاي ممکن
● استفاده از رنگ هاي يکدست در هر جايي که ممکن باشد .
● اجتناب از اثرات بصري نامطلوب تا جايي که مقدور است .
● استفاده از امکانات بهينه سازي .

منابع بهينه سازي :

در حال حاضر خيلي از منابع وجود دارند که براي کمک به طرح بهينه سازي تصاوير در دسترس مي باشند . روش اصلي براي بهينه سازي, محاسبه کوچکترين مقدار رنگ ممکن و انتخاب قالب فايلي است که مي تواند کيفيت رنگ درخواستي شما را ايجاد کند .
بيشترين استفاده معمول در بهينه سازي استفاده از نرم افزارهاي Photo Shop ، Fire Works ، Image Ready و ... مي باشد .
2 روش بهينه ساز معمول ديگر که در حال حاضر مورد استفاده قرار مي گيرند Online Version ، Desktop Version مي باشند .

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

● Gifbot
http://www.netmechanic.com/accelerate.htm


تمرين بهينه سازي تصاوير :

در اين تمرين از سرويسهاي بهينه سازي تصاوير در روي اينترنت استفاده مي کنيد . اين تصاوير و اتصالات يک صفحه را بطور آشکار را ارزيابي مي کند و خلاصه اي از سايتهاي گرافيکي ايجاد مي کند و سپس ورژنهاي مختلفي از بهينه سازي تصاوير براي انتخاب و بارگذاري و نگهداري ، براي شما ارائه مي دهد .

1- وارد سايت http://www.netmechanic.comشويد .
2- بر روي اتصال Gifbot کليک کنيد .
3- از اين صفحه بر روي Try it کليک کنيد .
4- URL که عگس مورد نظرتان در آنجا قرار دارد را بر روي فيلد مخصوص وارد کنيد.
5- شما همچنين مي توانيد فايل را از کامپيوتر خود به کامپيوتر راه دور بفرستيد ، با استفاده از کليد Brows و آدرس Email خود را وارد کنيد و هر دو قالب Gif و Jpeg را از منوي خروجي انتخاب کنيد و Testnow را کليک کنيد .
6- حال اين سرويس شروع به بارگذاري عکس و ارزيابي آن مي کند .
7- وقتي بارگذاري کامل شد ليستي ايجاد مي شود .
8- وقتي ارزيابي تمام شد گزارش کاملي ظاهر مي شود .
9- براي ديدن کامل نتايج ، صفحه خود را اسکرول کنيد . بر روي سايز فايلي که در اتصالات سايت قرار دارد کليک کنيد تصوير بزرگتر ظاهر خواهيد شد .
10- اگر شما تا پايين صفحه اسکرول کنيد تکرار همان عکسها را خواهيد ديد . توجه داشته باشيد که هر عکسي اطلاعاتي راجع به عکس شامل نوع ، عمق رنگ ، سايز و زمان بارگذاري و نيز درصد ذخيره را به شما انتقال مي دهد و در صد سايز فايل را به شما مي دهد و مي توانيد تصوير بهينه شده را با تصوير اصلي با جابه جا کردن اشاره گر ماوس بالاي هر عکس مقايسه کنيد . اگر اينکار را انجام داديد تصوير اصلي ظاهر خواهد شد و يک مقايسه دقيق انجام مي دهيد . قبل از آنکه بخواهيد به تغييرات دقت کنيد بايد با اسکرول کردن تمامي عکسها را ديدن کنيد .
11- حال شما تصويري که بهينه شده و کيفيت خوبي در حد درخواست شما را دارد انتخاب کنيد .
12- بر روي عکس مورد نظر کليک راست کرده و آن را Save کنيد.
با بهينه سازي ، تمامي عکسهاي صفحه ( و سايت ) به طرز چشمگيري مي توانيد زبان بارگذاري را کاهش دهيد و براي کاربران يک مشاهده سريع را ايجاد کنيد .

[آبجی]

تکه تکه کردن عکس و بهم اتصال دادن

روش ديگري که براي کمک به بارگذاري عکسهاي بزرگ در زمان کم وجود دارد برش دادن عکس مي باشد .
برش تکه هاي متعددي از عکس را در بر دارد . با استفاده از جداول html يک عکس مي تواند تجديد بنا شده و در پنجره مرورگر بهم پيوند داده مي شود . برش ها نمي توانند تغييري در سايز عکس بوجود آورند اما بارگذاري عکس را سريعتر ميکنند زيرا کاربر قبل از بارگذاري عکس قسمت هايي از عکس را مي بيند .