رنگ و احساس : هر رنگ در طراحی وب چه معنای دارد؟
رنگ ها می توانند حس های زیادی را منتقل کنند در طراحی یک پروژه خیلی مهم است که بدانید که رنگ ها چه تاثیری می تواند در انتقال پیغام شما داشته باشند.
رنگ ها می توانند حس های زیادی را منتقل کنند در طراحی یک پروژه خیلی مهم است که بدانید که رنگ ها چه تاثیری می تواند در انتقال پیغام شما داشته باشند.
این روزها درصد استفاده از انواع موبایل هوشمند به صورت چشمگیری رو به رشد است و چیزی نمانده تا استفاده از اینترنت های موبایل از اینترنت های خانگی گوی سبقت را بگیرد. بنابراین عادلانه به نظر نمیرسد در دنیای رو به رشد وب و طراحی, کاربران موبایل و تبلت ها درنظر گرفته نشوند.
وب سایت ، امروز ، تنها برای استفاده در سیستم کامپیوتر خانگی محدود نمیشود و طراح وب سایت سعی خواهد کرد وب سایتی قابل استفاده در ابزارهای هوشمند قابل اتصال به اینترنت و دارای مرورگر بسازد . تلفن ها و تلویزیون های هوشمند و یا تبلت ها و حتی کنسول های بازی قابل اتصال به اینترنت ابزارهای متفاوتی برای وب گردی هستند . تکنولوژی ها و رویکردهای متفاوتی برای ساخت وب سایتهای قابل استفاده در تمامی انواع دستگاه ها وجود دارد . طراحی های واکنشگرا یکی از مهمترین این رویکردها هستند .
اين داستاني است كه قدمت آن به روزهاي اوليه كامپيوتر برميگردد. داستان يك طرح دارد. رقابت و دسيسه دارد و نيز عبور از انبوهي از كشورها و زبانها. در آن ناسازگاري و حل و فصل و يك پايان خوش وجود دارد. اما تمركز اصلي بر روي كاراكترهاي 110 و 116 است. در پايان داستان، همه آنها جاي منحصر به فرد خود را در اين دنيا پيدا ميكنند.
اين داستان تعدادي از آن كاراكترها را از نزديك دنبال خواهد كرد هنگامي كه آنها از وب سرور به مرورگر و در جهت مخالف در حركت هستند. در طول مسير شما بيشتر درباره تاريخچه كاراكتر، مجموعههاي كاراكتري، Unicode و UTF8 اطلاعات پيدا خواهيد كرد، و اينكه چرا علامتهاي سوال و كاراكترهاي استرسدار (accented: علامت تكيهي صدا [بدين شكل’]) عجيب و غريب گاهي در پايگاه دادهها و فايلهاي متني ظاهر ميشوند.
آنچه در زیر مطالعه میفرمایید چکیده مطلبی است که در همایش استانداردهای وب و بستر وب باز، در تاریخ پنجشنبه ۲۹ تیر ماه ۱۳۹۱ توسط ناصر حاجلو، در ارتباط با وب فونت بیان شد.
اگر مروری بر صنعت چاپ داشته باشیم، اولین دستگاههای چاپ قادر بودند کلمات لاتین را با استفاده از حروف سربی بر روی کاغذ حک کنند. با ورود به عصر کامپیوتر، به ابزار مشابهی جهت نمایش اطلاعات در این دنیا نیاز بود، این نیازها منجر به پیدایش فونت شد. در واقع فونت ابزاری جهت نمایش اطلاعات در دنیای دیجیتال است.
یک فونت از قسمتهای مختلفی تشکیل شده است. که عبارت است از کاراکتر ها، حروف و سمبلهایی هستند که در یک فونت وجود دارند. از طرفی دیگر یک کاراکتر دارای حالات مختلفی است، برای مثال کاراکتر ب از حالات ب – بـ – ـبـ – ـب تشکیل شده است، این حالات مختلف یک کاراکتر را گلیف میگویند. ابزاری به نام موتور رندر متن با توجه به مشخصات هر کاراکتر نسبت به کاراکترهای بعد و قبل از آن یکی از حالات مختلف گلیف مورد نظر را شناسایی کرده و بر روی خروجی ترسیم میکند.
خیلی وقت ها پیش آمده که یک پروژه، در مدت 3 الی 4 روز به اتمام رسیده، اما تست وب سایت زمان زیادی را به خود اختصاص داده است. یا اینکه به دلیل رفت و آمد بازخورد و نظرات بین مشتری و برنامه نویس، کار بیش از حد توان انرژی گرفته است. فکر می کنم شما بارها و بارها با این مسئله برخورد کرده باشید . این موضوع شما را دچار نا امیدی یا استهلاک و خستگی می کند و باعث میشود که هر چه زودتر پروژه را با هزاران باگ ومشکل ببندید و تحویل مشتری دهید.
یک طراحی مناسب می تواند میزان خروج کاربران از وب سایت را کاهش داده و موجب افزایش فعالیت کاربران در وب سایت شود .ساختار استاندارد و مناسب با تکیه بر محتوای مناسب و کاربردی میتوانید میزان خروج کاربران از وب سایت قبل از بازدید تنها یک صفحه را بگیرید و بازدید کننده را ترغیب به دیدن تمامی صفحات وب سایت نماید .
در این مقاله سعی خواهیم کرد تا با واژه Bounce rate آشنا شویم و تعدادی از دلایل خروج کاربران در اولین بازدید از وب سایت را بررسی نمائیم و همچنین راه کارهایی برای کاهش میزان خروج کاربران از وب سایت – Bounce rate – ارائه کنیم .
کاهش میزان خروج کاربران از وب سایت – Bounce rate – به واسطه طراحی بهتر
هنگامي كه جي كوئری به درستي مورد استفاده قرار گيرد، ميتواند براي داشتن سايتهاي تعاملي، جالب و مهيج مفيد واقع شود. اين نوشته تعدادي از بهترين تمرينها و مثالها را براي استفاده از فريم ورک محبوب جاوا اسكريپت براي ايجاد اثرهاي نامحسوس (unobtrusive) و در دسترس اسكريپتي DOM (Document Object Mode) در بر ميگيرد. اين نوشته نشان خواهد داد چه تركيبهايي بهترين شیوهها نسبت به جاوا اسكريپت هستند و علاوه بر آن چرا جي كوئري يك فريم ورک انتخابي خوب براي پيادهسازي بهترين شيوهها است.
با گذر زمان قوانین و روشهای کاربردی تری ، برای کمک به بهبود فابلیت استفاده عمومی از وب سایت ها توسعه و گسترش یافته اند.این مقاله خلاصه ای است از ده اشتباه رایج و یا نادیده گرفته شده در طراحی وب و ارائه راه حل های جایگزین برای کمک به افزایش قابلیت استفاده از وب سایت .
یادگیری اصول کدنویسی کار بسیار پیچیده ای نیست اما آشنایی و تسلط بر این قوانین و رعایت اصول استاندارد و صحیح در کدنویسی نیاز به تجربه و کار فراوان دارد . در این مجموعه به بررسی ده اشتباه بزرگ در نوشتن کدهای HTML میپردازیم که رعایت آنها می تواند در استاندارد سازی کدهای HTML شما تاثیر بسیاری داشته باشد . شاید بتوان گفت تفاوت یک طراح وب سایت حرفه ای و آماتور در رعایت همین اصول و قوانین است که در زیر به ده مورد از آنها اشاره میشود .
بسیاری از طراحان وب سایت بر این عقیده هستند که کسب کردن استانداردهای طراحی وب سایت در استاندارد بودن کدهای HTML است وValidate بودن کدهای HTML به تنهایی نشان دهنده استاندارد بودن وب سایت طراحی شده توسط آنهاست . اما باید بدانید این تازه اول راه است !?
همه طراحان وب سایت از اهمیت تگهای Heading در بهینه سازی وب سایت برای موتورهای جستجو آشنا هستند اما آیا کاربرد این تگها فقط در بهینه سازی وب سایت خلاصه شده است ؟ آیا از ابتدا این تگها فقط برای بهینه سازی وب سایت طراحی شده اند ؟
element { outline-width: number+unit; outline-style: (numerous); outline-color: color || #hex || (rgb / % || 0-255); }
با توجه به نیاز طراحان و مدیران وب سایت و اهمیت بهینه سازی وب سایت برای موتورهای جستجو ، این کتاب همراه با مثال ها و تمرین برای درک هر چه بهتر موضوعات با استفاده از کتاب راهنمای گوگل نوشته شده است .
در ابتدا این راهنما برای متخصصان داخلی گوگل در نظر گرفته شده بود ولی تصمیم گرفته شد که یک نسخه از آن هم برای مدیران وب سایت ها جهت بهینه سازی و ایجاد اثر متقابل بین کاربران و موتور های جستجو در نظر گرفته شود.
شایان ذکر است که این راهنما اسرار بیشتر شدن رتبه ( Page Rank ) صفحات وب سایت شما را باز گو نمی کند. از تمرین های مفیدی که در زیر سر تیتر های مطالب لیست شده اند برای راحت تر بررسی کردن و داشتن درک بهتری از محتوای وب سایت خود برای موتور های جستجو استفاده کنید. بهینه سازی برای موتور های جستجو، در واقع ایجاد یک تغییر کوچک در بخشی از وب سایت است .
روش بهتر دیده شدن توسط موتورهای جستجو برای کسب رتبه بهتر و مخاطبان بیشتر به صورت هدفمند ( کسب مخاطبانی که واقعا به دنبال خدمات شما هستند .) موتورهای جستجو در معرفی و ایجاد ارتباط میان کاربران و ارائه دهندگان خدمات نقش بسیار مهمی را بر عهده دارند و بهینه سازی سایت برای موتورهای جستجو نقش بسیار تعیین کننده ای در رقابت شما برای بهتر دیده شدن دارد .
شما با برخی از موضوعات مطرح شده در این راهنما آشنا هستید چون آنها اجزاء اصلی هر وب سایتی محسوب می شوند ولی شاید شما این راهکارها را برای بهینه شدن وب سایت خود انجام نداده اید .در حقیقت مطلب اصلی این راهنما در مورد نحوه بهینه سازی وب سایت برای موتورهای جستجو است. باید درک کنید که چه چیزی برای بازدید کنندگان سایت شما بهتر است . آنها اصلی ترین مخاطبان محتوای وب سایت شما هستند و از موتور های جستجو برای یافتن خدمات و اطلاعات شما استفاده می کنند . تمرکز تنها برای تغییر رتبه ( Page Rank ) وب سایت نتیجه دلخواه را به شما نخواهد داد .
بهینه سازی وب سایت برای موتورهای جستجو، وب سایت شما را ، هنگام رویت کردن نتیجه جستجو ، در موقعیت مناسبی برای دیده شدن قرار می دهد اما در نهایت، مصرف کنندگان، کاربران شما هستند نه موتور های جستجو. سایت شما ممکن است بزرگ یا کوچکتر از مثال داخل راهنما و یا دارای محتوای زیادی باشد. اما روشهای بهینه سازی که در زیر توضیح داده ایم شامل همه سایت ها می شود، چه بزرگ و چه کوچک . ما امیدواریم که راهنمای ما به شما ایده های جدیدی در زمینه نحوه بهینه سازی وب سایتتان بدهد
امیدواریم که این تلاش کوچک مورد توجه شما دوستان عزیز قرار گیرد و با نظرات و موفقیت های خود در این زمینه ما را خوشحال نمائید
” جهت حمایت این کتاب را به خوانندگان وب سایت خود معرفی کنید “
دانلود نسخه PDF با کیفیت بالا ( 1.30 mb ) | دانلود نسخه PDF با کیفیت متوسط ( 800 kb )
پسورد : webtarget.ir
element { border-width: number+unit; border-style: (numerous); border-color: color || #hex || (rgb / % || 0-255); }
برای آشنایی بیشتر با خصوصیت Margin , Padding میتوانید مطلب مفهوم Box Model و آشنایی با مفاهیم Padding , Margin , Border را مطالعه نمائید
element { margin-top: number+unit; margin-right: number+unit; margin-bottom: number+unit; margin-left: number+unit; }
element { background-color: color || #hex || (rgb / % || 0-255); background-image:url(URI); background-repeat: repeat || repeat-x || repeat-y || no-repeat; background-position: X Y || (top||bottom||center) (left||right||center); background-attachment: scroll || fixed; }
CSS Shorthand یک مجموعه از تکنیک و دستورات است که به منظور خلاصه نویسی دستورات CSS مورد استفاده قرا میگیرد .
خلاصه نویسی دستورات CSS میتواند به ما کمک کند تا :
این مطالب به صورت یک مجموعه ارائه خواهد شد و در مطالب بعدی با خلاصه نویسی دستورات برای خصوصیات دیگر ( Background , Border , Margin and Padding , Outline , List-style ) آشنا خواهیم شد .