ورود کاربران VIP سرزمین دانلود، مرجع دانلود و آموزش رایگان نرم افزار

منوی سایت

طراحی وب

تازه های این بخش :

(مربوط به موضوع طراحی وب)

آموزش استفاده از افکت های عکس اینستاگرام در طراحی وب
 
 
آموزش استفاده از افکت های عکس اینستاگرام در طراحی وب
 
 
همانطور که اطلاع دارید، اینستاگرام یکی از محبوب ترین شبکه های اجتماعی حال حاضر در دنیا می باشد. توسط اینستاگرام می توانید تصاویر و ویدئوهای خود را با بیش از 500 میلیون کاربر عضو این شبکه به اشتراک بگذارید.
 
بسیاری از کاربران از بخش ادیت تصاویر اینستاگرام به منظور افکت گذاری بر روی تصاویر خود استفاده می کنند. فیلترهای تصویر در اینستاگرام به صورت کاملا رایگان قابل استفاده بوده و بر خلاف سایر نرم افزارهای ادیت و ویرایش تصویر، نسخه پولی و یا آنلاک شده ندارد. 
 
در این میان ممکن است برخی از مدیران و طراحان وب سایت بخواهند از افکت های تصویری برای زیباسازی عکس های درون وب سایت استفاده نمایند. به منظور ادیت عکس در محیط طراحی وب می توانید از ابزارهای مانند فتوشاپ و ... استفاده کنید.
 
در این مقاله می خواهیم به بررسی روش استفاده از افکت های اینستاگرام در طراحی وب و به صورت مستقیم بپردازیم. با سرزمین دانلود همراه باشید.
 
 
معرفی کتابخانه CSSGram
 
CSSGram یک کتابخانه کوچک و بر پایه CSS و SCSS می باشد. با استفاده از این کتابخانه می توانید بدون نیاز به فتوشاپ افکت های تصویری اینستاگرام را از طریق کدهای HTML و CSS بر روی تصاویر وب سایت اعمال کنید. 
 
برای دانلود CSSGram می توانید از تاپیک موجود در سایت GitHub استفاده نمایید.
 
 
روش استفاده از CSSGram
 
این قابلیت را نمی توان به صورت مستقیم بر روی تصاویر اعمال نمود. در واقع باید قبل از آدرس عکس و در بخش Container یا المنت های تصویر از آن استفاده نمایید. 
 
به منظور استفاده از این کتابخانه در ابتدا باید کدهای CSSGram را در صفحه اسناد HTML خود قرار دهید. روش کار این کتابخانه به این صورت است که با استفاده از CSS میزان روشنایی و سایر ویژگی های تصویر را به شکل افکت اینستاگرام تغییر خواهد داد. در ادامه کد یک عکس که با استفاده از این کتابخانه افکت گذاری شده است را می توانید مشاهده کنید:
 
آموزش استفاده از افکت های عکس اینستاگرام در طراحی وب
 
 
پس از اضافه کردن افکت 1977 که یکی از افکت های اینستاگرام می باشد. CSS به شکل زیر در خواهد آمد.
 
آموزش استفاده از افکت های عکس اینستاگرام در طراحی وب
 
 
در این مقاله به بررسی روش استفاده از CSSGram به منظور افزودن افکت به تصاویر درون وب سایت پرداختیم. در نظر داشته باشید که استفاده از این روش به مراتب بسیار بهینه تر از نرم افزارهای ادیت عکس مانند فتوشاپ می باشد. برای ارسال نظرات و سوالات خود می توانید از طریق فرم زیر با ما در تماس باشید.
 
 

این مطلب مربوط به موضوع طراحی وب میباشد.

طرز کار صفحات وب

(مربوط به موضوع طراحی وب)

طرز کار صفحات وب


در این لحظه که مشغول مطالعه این مقاله هستید قطعا:
1- پشت کامپیوتر خود نشسته اید!
2- در حال استفاده از یک مرورگر وب هستید تا بتوانید این مقاله را بخوانید. این مرورگر وب می تواند اینترنت اکسپلورر، فایرفکس، کروم، Opera، و یا Netscape باشد.
3- می خواهید طرز کار صفحات وب را یاد بگیرید و احتمالا هنر ایجاد صفحات وب خود را بیاموزید.


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


برای صحبت درباره صفحات وب و نحوه کار آنها، بایستی مفهوم 4 عبارت ساده را درک کنید:

(اگر پس از مطالعه برخی از آنها برای اولین بار کمی به نظرتان گیج کننده و تخصصی رسیدند نگران نشوید)


• صفحه وب (Web Page):

صفحه وب، یک فایل متنی ساده است که نه تنها شامل متن، بلکه حاوی مجموعه ای از تگهای اچ تی ام ال (HTML tags) نیز می باشد. که این تگها توضیح می دهند که متون برای نمایش در مرورگر، چگونه فرمت بندی شده و نمایش داده شوند. تگها دستورات ساده ای هستند که به مرورگر وب می گویند زمانی که صفحه نمایش داده می شود باید چگونه به نظر برسد. تگها به مرورگر می گویند کارهایی مثل تغییر اندازه فونتها یا رنگ آنها، یا تنظیم متون در ستونها را انجام دهد. مرورگر وب این تگها را تفسیر می کند تا تصمیم بگیرد متن را در صفحه نمایش چگونه فرمت کند.


• HTML:

HTML مخفف عبارت Hyper Text Markup Language یا "زبان نشانه گذاری متن" است. زبان نشانه گذاری، یک زبان کامپیوتری است که نحوه فرمت بندی صفحه را تعیین می کند. اگر تنها چیزی که می خواهید نمایش یک رشته طولاتی از متون سیاه و سفید است که هیچ فرمت و شکل خاصی ندارند، نیاز به استفاده از HTML نیست. ولی اگر می خواهید فونتها را تغییر داده، رنگ اضافه کنید، Headline هایی (تیتر یا سرفصل) اضافه کرده، و یا عکسهایی را در صفحه وب خود به نمایش در آورید، بایستی از زبان HTML بهره بگیرید.


• مرورگر وب (Web Browser):

یک مرورگر وب (مانند اینترنت اکسپلورر، یا فایرفاکس) یک نرم افزار کامپیوتری است که دو کار انجام می دهد:
- مرورگر وب می داند که چگونه به یک وب سرور خاص در اینترنت رجوع کرده و درخواست یک صفحه را بکند. در نتیجه مرورگر می تواند صفحه را از شبکه دریافت کرده و به داخل سیستم شما بیاورد.
- مرورگر وب می داند که چگونه مجموعه ای از تگهای HTML را در یک صفحه وب تفسیر کند تا صفحه وب دقیقا به همان صورتی نمایش یابد که مورد نظر بوده است.

 



• وب سرور (Web Server):

یک سرور وب، یک تکه برنامه کامپیوتری است که به درخواست یک مرورگر برای دریافت یک صفحه پاسخ می دهد و صفحه را از طریق اینترنت برای مرورگر وب می فرستد. شما می توانید به وب سرور به صورت یک مجتمع آپارتمانی نگاه کنید که هر آپارتمان صفحه وب یک نفر را در بر می گیرد. صفحات وبی که در این مجموعه آپارتمان زندگی می کنند می توانند توسط هرکسی در هر نقطه از جهان مشاهده و استفاده شوند. در این صورت صاحب خانه شما، Host (میزبان) نامیده می شود و اجاره شما معمولا هزینه میزبانی (Hosting Charge) نامیده می شود. روزانه میلیونها وب سرور، صفحات وب را به مرورگرهای دهها میلیون از افرادی که در سطح شبکه جهانی گسترده اند ارسال می کنند.


آزمایش کردن صفحات وب بدون استفاده از Web Server نیز امکان پذیر است. مرورگر شما می تواند از طریق کامپیوتر شخصیتان به صفحات وبی که ایجاد کرده اید دسترسی پیدا کند.

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


این مطلب مربوط به موضوع طراحی وب میباشد.
(مربوط به موضوع طراحی وب)

آشنایی با اشتباهات معمول طراحان وب سایت های اینترنتی

 


یاد گیری زبان HTML و استفاده از آن در طراحی وب سایت کار ساده ای است .حتی بدون یادگیری HTML نیز میتوان با استفاده از برنامه های کمکی مختلف مانند Front Page بدون نوشتن حتی یک دستور HTML صفحات وب را ایجاد کرد. اما چرا فقط تعدادی کمی میتوانند در این زمینه موفقیت بیشتری کسب کنند و طراحی صفحات وب را بعنوان شغل اصلی خود دنبال کنند؟عوامل بسیاری را در این زمینه میتوان ذکر کرد ولی نوع طراحی و ظاهر صفحات وب را میتوان مهمترین این عوامل دانست. در زیر تعدادی از اشتباهاتی که معمولا طراحان وب سایت در طرح های خود مرتکب میشوند را در سایت سرزمین دانلود گردآوری کرده ایم.

● نا هماهنگی صفحات یک وب سایت : حتما با وب سایتهای برخورد کرده اید که هر کدام از صفحات ظاهری متفاوب با صفحات دیگر دارد . دکمه (Button) های آنها با هم متفاوت است . رنگ زمینه (BackGround) آنها مختلف است و... این نا هماهنگی ها , یکپارچگی و زیبای یک وب سایت را از بین میبرد. سعی کنید که یک الگوی مشخصی را در صفحات وب سایت خود بکارگیرید.

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

● استفاده از پاراگرافهای بلند: برای آنکه مطالب نوشتاری وب سایت شما خواناتر باشد بهتر است مطالب خود را به پاراگرافهای کوتاهتر و منطقی تقسیم کنید و درصورت لزوم از تیترهای مناسب که نشانگر محتویات هر پارگراف است استفاده کنید.

● انتخاب نادرست نام قلمرو(Domain): اگر میخواهید سایت موفقی داشته باشید باید در انتخاب نام قلمرو, وسواس بیشتری بخرج دهید. بعضی از افراد نامهای بلندی که بخاطر سپردن آنها برای کاربران مشکل است و یا نامهایی که هیچ ارتباطی با نوع فعالیت سایت آنها ندارند انتخاب میکنند. بخاطر بسپارید بیش از 90 درصد کاربران اینترنت برای پیدا کردن اطلاعات مورد نظر خود از موتورهای جستجو (search engine) کمک میگیرند و این موتورهای جستجو نام قلمرو وب سایتها را نیز در کاوش خود در نظر میگیرند. پس سعی کنید نام قلمرویی که انتخاب میکنید مرتبط با محتویات و نوع فعالیت وب سایت شما باشد.

● استفاده از صفحات سنگین و پر حجم: سرعت بالا آمد صفحات یک وب سایت یکی از مواردی است شما بعنوان طراح صفحات وب باید به آن توجه کنید بخصوص در کشور خودمان که بیشتر کاربران از خط تلفن برای ارتباط با اینترنت بهره میگیرند و سرعت دسترسی آنها پایین است. اگر صفحات وب سایت شما بیش از 10 ثانیه برای بالا آمد وقت نیاز دارد حتما فایل HTML شما بیش از حد سنگین است. سعی کنید که از تصاویر گرافیکی کوچک را در فرمتهای درست در صفحات وب خود بکار برید. از فرمت JPEG برای تصاویر رنگی حجیم مانند تصاویر طبیعت و از فرمت GIF برای تصاویر تک رنگ و شکلکهای کوچک که معمولا در منو ها بکار میروند استفاده کنید. سعی کنید مطالب طولانی خود را به چند صفحه جداگانه که به هم لینک شده اند, تقسیم کنید.

● استفاده از فریم (Frame): اگرچه استفاده از فریم در بعضی موارد میتواند مفید باشد ولی تا حد ممکن از آن در طراحی صفحات وب استفاده نکنید. بیشتر موتورهای جستجو صفحات وب را بدون فریم آنها فهرست میکنند. فریمها به شما امکات نشانه گذاری یک صفحه مشخص را نمی دهند. فریمها میتوانند در هنگام چاپ نیز اشکال ایجاد کنند.

● resolution نادرست : درحال حاضر بیشتر کاربران کامپیوتر صفحه نمایشگر خود را برروی قدرت تفکیک 800 در 600 تنظیم میکنند. اگر شما صفحات وب خود را برای قدرت تفکیک 1024 در 768 طراحی میکنید باید به این نکته توجه کنید که کاربران برای آنکه بتوانند کل صفحه را ببیند مجبورند به چپ و یا راست پیمایش (scroll) کنند. اگر میخواهید صفحات وب شما در تمامی resolution ها درست نمایش داده شود میتوانید آنها را مبتنی بر Table پیاده سازی کنید و به جای آنکه از مقیاس Pixcel برای تعیین اندازه Table ها استفاده کنید , اندازه ها را بر حسب درصد مشخص کنید. برای مثال ویژگی width مربوط به Table را بجای 800 برابر %100 قرار دهید .

● بکار نگرفتن تک Meta : معمولا افراد مبتدی از تگ های Meta که در قسمت Head هر یک از صفحات وب جای میگیرند را مورد توجه قرار نمیدهند و از آنها بهره نمیگیرند. اگر چه تگهای Meta از دید کاربران مخفی است ولی بیشتر موتورهای جستجو اطلاعات موجود در این تگها را در فرایند جستجوهای خود در نظر میگیرند.

● استفاده بی رویه از متنهای متحرک : تگ marquee امکان ایجاد متنهای متحرک را به طراحان صفحات وب میدهد. استفاده از این تگ در بعضی موارد مفید است . از این تگ فقط برای نمایش تیترهای خبری و لینکهای مهمی که میخواهید بیشتر جلب توجه کند استفاده کنید و از آن هرگز برای نمایش بدنه اصلی متن بهره نگیرید چون کاربران علاقه ای به خواندن متنهای طولانی متحرک ندارند.

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


این مطلب مربوط به موضوع طراحی وب میباشد.
سرزمین دانلود، مرجع دانلود و آموزش نرم افزار

سرزمین دانلود را دنبال کنید !

عضویت در خبرنامه سرزمین دانلود

با وارد کردن ایمیل خود و سپس تایید آن، جدیدترین مطالب و نرم افزار ها برای شما ارسال می شود:



------------------------------------------