Archive for the ‘طراحی وب سایت’ Category
معرفی تولبار ITTutorial
بازهم با خدمتی جدید آمدیم و اینبار تولبار ITTutorial . به احتمال قوی با تولبار ها و مزایای آنها آشنا هستید و شاید هم، هم اکنون از بعضی تولبارهای نرم افزارهای خارجی مانند Babylon و… استفاده میکنید و شاید هم فقط آنرا بر روی مرورگر خود نصب دارید و هیچ استفاده ای هم از آن نمیکنید. پس اجازه بدهید تا تولبار را برای آن درصد کمی از دوستان که به آن آشنایی ندارند معرفی کنم:
تولبارها، نرم افزارها و یا به عبارتی پلاگین هایی هستند که بر روی مرورگر اینترنتی شما نصب میشوند و با توجه به نوع تولبار یک سری ابزار، آدرس سایت، توایع و . . . را برای دسترسی سریعتر در اختیار شما قرار میدهند. تولباری که هم اکنون ورژن اولیه آن توسط ما برای شما آماده شده است شامل دسته بندی های زیر میباشد :
-
اخبار : در این دسته تیتر اخبار مهمترین خبرگزاریهای ایران شانل اخبار سیاسی، اجتماعی، ورزشی، IT و …. در اختیار شما قرار میگیرد
-
آموزش : در این قسمت فعلا لینک آخرین آموزشهای مهم برنامه نویسی و نرم افزارها برای شما قرار میگیرد
-
استخدام : در این قسمت لیست آخرین فرصتهای شغلی مشاغل IT و بر اساس دسته بندی موجود در سایت JobAgency.ir برای شما قرار داده میشود
-
بانکها و موسسات مالی : آدرس وب سایت تمامی بانک ها و موسسات مالی ایران در این منو قرار میگیرد
-
قیمت ارز و سکه : در این قسمت لیست بروز و لحظه ای ارز و سکه و فلزات (مانند طلا، نقره و . . .) قرار میگیرد
-
سایتها و ابزارهای مفید : این قسمت خود شامل دسته بندی های مختلفی مانند : آدرس وب سایتهای وزارتخانه ها و ادارات زیر مجموعه آنها، اطلاعات سفر و راهها، آدرس وب سایتهای مخصوص دانلود نرم افزار و بازی، آدرس تالارهای گفتمان مهم و کاربردی، آدرس برخی سایتها و ابزارهای آنلاین و . . . قرار میگیرد
-
لینکدونی : در این قسمت نیز لینکهای مفید و جالب بصورت روزانه قرار میگیرد
-
RSS : در این قسمت لیست آخرین پستهای ۳ وب سایت زیر مجموعه ما قرار میگیرد
-
آب و هوا : آخرین تغییرات آب و هوای شهر شما در این قسمت نمایش داده میشود
نکته مهم این است که بسیاری ازر این منوها به صورت اتوماتیک بروزرسانی میشوند تا شما از آخرین تغییرات آنها با خبر شوید.اما هرچند از گاهی بد نیست که از طریف اولین منو که لوگو itt میباشد عمل ارتقاء نرم افزار و بروزرسانی را بصورت دستی انجام دهید تا آخرین تغییرات برای شما اعمال گردد و اگر منوی جدید اضافه شده باشد شما آنرا داشته باشید.
شاید شما با خود فکر کنید که تمامی این اطلاعات در اینترنت موجود باشد و نیازی به داشتن آنها در کنار یکدیگر نداشته باشید، اما نکته مهمی که در استفاده از این تولبار وجود دارد ۲ موضوع است. اول اینکه جمع آوری و استفاده از این همه موضوع کار بسیار سختی است و شما تقریبا یک دایرکتوری خوب و مناسب از اطلاعات و مطالبی که بصورت روزمره به کار شما خواهد آمد در یک مکان بصورت مجتمع میتوانید استفاده کنید و نکته بعدی این است که شما میتوانید در تمامی این سایتها مشترک خوراک و یا خبرنامه شوید و آخرین اطلاعات و مطالب آنها را در ایمیل یا خوراک خوان خود داشته باشید، اما این نکته را فراموش نکنید که استفاده از این تولبار فقط در صورتیکه شما به آن نیازی داشته باشید انجام میگیرد و برای مثال صندوق پستی ایمیل شما با ایمیلهای مختلف پر نمیگردد.
همچنین ما امیدواریم با یاری شما دوستان عزیز این تولبار رو کامل و کاملتر بکنیم تا بتواند بصورت ابزاری کاربردی و مفید تبدیل گردد که همه ایرانیان بتوانند از آن استفاده کنند. در نتیجه برای کامل شدن آن ما آماده شنیدن پیشنهادات، نظرات و انتقادات و حتی معرفی سایتها و ابزارهای مفیدی که میشناسید هستیم.
طریقه نصب بسیار ساده است و در حال حاضر این تولبار برای ۳ مرورگر فایرفاکس، اینترنت اکسپلورر و سافاری در دسترس شما عزیزان است. برای نصب کافی است به صفحه مخصوص دانلود بروید.وقتی وارد این صفحه بشوید بصورت اتوماتیک مرورگر شما تشخیص داده میشود و پلاگین مخصوص آن مرورگر به کلیک بر روی دکمه DownLoad Now در اختیار شما قرار داده میشود.
مراحل نصب برای مرورگر فایرفاکس :
کافیست به صفحه فوق بروید و مراحل زیر را دنبال نمایید :
بعد از نصب یکبار مرورگر خود را بسته و راه اندازی نمایید تا این تولبار در اختیار شما قرار گیرد .
نحوه نصب برای اینترنت اکسپلورر :
کافیست به همان آدرس صفحه نصب بروید و فایل ۱٫۵ مگا بایتی را دانلود کرده و نصب نمایید.
در قسمت نظرات منتظر شنیدن نظرات انتقادات و پیشنهادات شما هستیم.
برنامه نویسی جاوا – قسمت پنجم
متغیر ها
متغیر ها واحد پایه ذخیره سازی در برنامه های جاوا هستند .هر متغیری به وسیله ترکیبی از یک شناسه ؛ نوع و مقدار اولیه تعریف می شود به علاوه همه متغیر ها دارای محدودهScope و زمان حیات Life-Time هستند. محدوده هر متغیر مشخص می کند که آن متغیر در چه قسمتهایی قابل استفاده است.
شیوه تعریف کردن متغیر ها
شکل کلی تعریف کردن متغیر ها در جاوا اینگونه است:
Type identifier [=value][, identifier[=value]…];
Type یکی از انواع تجزیه ناپذیر جاوا ؛ نام یک کلاس یا رابط است identifier نام متغیر است متغیر ها را می توان از طریق مشخص کردن یک علامت تساوی و یک مقدار مقداردهی نمود. حاصل عبارت مقداردهی باید مقداری از همان نوع مشخص شده برای متغیر باشد. کاما هم علامتی برای جدا کردن بیش از یک متغیر برای یک نوع است.
Int a,b,c; //declares three ints, a,b and c.
Int d=3,e,f=5; //declares three more ints, initializing d and f.
Byte z=22;
Double pi =3.14159;
Char x=’x’;
مقدار دهی اولیه پویا
در مثالهای بالا از ثابتها به عنوان مقدار اولیه استفاده شد اما جاوا امکان مقداردهی پویای متغیر ها را به وسیله عبارتهای معتبر در زمان تعریف آنها نیز فراهم کرده است.برنامه زیر طول وتر یک مثلث قائم الزاویه را با داشتن دو ضلع دیگر محاسبه می کند.
//demonstrate dynamic initialization.
Class DynInit{
Public static void main(string args[]) {
Double a=3.0 ,b=4.0;
//c is dynamically initialized
Double c= math.sqrt(a*a+b*b);
System.out.println(“ hypoyenuse is”+c);
} }
C به طور پویا با طول وتر مقداردهی می شود.sqrt() یکی دیگر از متدهای توکار جاوا است که عضوی از کلاسmath است و جذر آرگومان خودش را محاسبه می کند. نکته کلیدی این نوع مقدار دهی این است که در عبارت مقداردهی می توان از هر عنصری که در زمان مقداردهی معتبر است استفاده نمود از جمله متدها ؛متغیر های دیگر یا حتی لیترال ها.
محدوده دستیابی و دوره حیات متغیر ها
تا به حال تمامی متغیر های مورد استفاده ؛در ابتدای متد main() تعریف شده اند اما جاوا امکان تعریف متغیر ها را در هر بلوکی فراهم کرده است. هر بلوک محدوده ای را تعیین می کند پس هر بار که بلوک جدیدی را آغاز می کنید محدوده جدیدی ایجاد می شود و هر محدوده تعیین می کند که کدام شی ء ها برای سایر بخش ها قابل رویت است. دوره حیات آن شی ء ها نیز مشخص می شود.
زبانها ی کامپیوتری دیگر دو دسته عمومی از محدوده ها را تعیین می کنند : عمومیglobal و محلی local اما این محدوده های قدیمی به خوبی با مدل شی ء گرای جاوا مطابقت ندارد . اگر چه امکان ایجاد متغیر هایی وجود دارد که در نهایت به داشتن یک محدوده عمومی منجر شود اما انجام این کار عموما یک استثنا به شمار می آید و نه یک قاعده کلی.
در زبان جاوا دو محدوده اصلی ؛ محدوده هایی هستند که توسط یک کلاس تعریف می شوند و نیز محدوده هایی که توسط یک متد تعریف می شوند.حتی این تمایز نیز قدری مصنوعی است اما چون محدوده کلاس چندید ویژگی و خصوصیت منحصر به فرد دارد که به محدوده تعریف شده توسط یک متد اعمال نمی شوند؛ این تمایز معقول به نظر می رسد. در حال حاضر تنها به بررسی محدوده هایی می پردازیم که توسط و یا درون یک متد تعریف می شوند.
محدوده ای که توسط هر متد تعریف می شود ؛ با آکولاد Brace باز آغاز می شود اما اگر آن متد پارامتر هایی داشته باشد؛ آنها نیز در محدوده آن متد قرار می گیرند. اگر چه در این درسنامه پارامتر ها را در آینده بررسی خواهیم کرد اما فعلا به خاطر این مبحث فرض می شود که آنها نیز همچون سایر متغیر ها کار می کنند.
به طور کلی؛ متغیر هایی که در یک محدوده تعریف می شوند؛ برای قسمت های خارج از آن محدوده قابل دسترسی نیستند از این رو وقتی متغیری را درون یک محدوده تعریف می کنیم؛ در واقع آن را محلی می سازیم و آن را در مقابل دستیابی و یا تغییرات غیر مجاز محافظت می کنیم. در حقیقت ؛ قوانین محدوده؛پایه و اساس لازم برای نهان سازیencapsulation را فراهم می سازیم.
محدوده ها ممکن است تودر توnested باشند. هر بار که بلوکی ایجاد می کنیم در واقع محدوده جدید تودر تویی را ایجاد کرده ایم و با این عمل محدوده بیرونی؛ محدوده درونی را در بر می گیرد. این بدان معناست که شی ء های تعریف شده در محدوده بیرونی؛ برای دستورالعمل های محدوده درونی قابل رویت خواهند بود که البته عکس آن صادق نیست. برنامه زیر را در نظر بگیرید:
//demonstrate block scope.
Class Scope{
Public static void main(string args{}) {
Int x; // know to all code within main
X=10;
If(x==10) {//start new scope
Int y=20; //know only to this block
//x and y both know here.
System.out.println(“ x and y :” +x+” “ +y);
X=y*2;}
//y=100;//error! Y not know here
//x is still know here
System.out.println(“x is” +x);
}
}
فکر می کنم برنامه خیلی گویا باشه در هر صورت اگه سوالی بود در خدمتم!
در هر بلوک می توان متغیر ها را تعریف کرد اما متغیر ها تنها پس از تعریف شدن قابل استفاده خواهند بود از این رو اگر متغیری را در ابتدای یک متد تعریف کنید؛ در آن صورت در کل متد قابل رویت خواهد بود اما اگر متغیری را در انتهای بلوکی تعریف کنید در آن صورت عملا بی فایده خواهد بود چرا که هیچ دستورالعملی به آن دستیابی نخواهد داشت. به عنوان مثال به عبارت زیر توجه کنید:
//this fragment is wrong!
Vount=100; //oops!cannot use count before it is declared!
Int count,
همانطور که می بینید این عبارت اشتباه است چون متغیرcount پیش ار تعریف شدن قابل استفاده نیست.
به این نکته هم باید توجه کنید که متغیر ها هنگام ورود به محدوده شان ایجاد می شوند و هنگام خروج از محدوده شان نیز از بین می روند. این بدان معناست که هیچ متغیری مقدارش را پس از خروج از محدوده اش نخواهد داشت بنابراین متغیر هایی که درون یک متد تعریف می شوند ؛ مقدارشان را در فواصل زمانی بین فراخوانی متد نخواهند داشت همچنین متغیری که در یک بلوک تعریف می شود مقدار را پس از خروج از بلوک از دست خواهد داد از این رو life-time هر متغیر به محدوده اش وابسته است.
اگر متغیری در حین تعریف مقداردهی شود ؛ در آن صورت هر بار به هنگام ورود به بلوک؛ از نو مقداردهی می شود:
//demonstrate lifetime of a variable.
Class LifeTime{
Public static void main(string args[]) {
Int x;
For (x=0;x<3;x++){
Int y=-1; //y is initialized each time block is entered
System.out.printl(“y is: “ +y); //this always -1
Y=100;
System.out.printl(“y is now:” +y);
}
}
}
Out put:
Y is:-1
Y is now:100
Y is:-1
Y is now:100
Y is:-1
Y is now :100
همانگونه که می بینید هر بار به هنگام ورود به حلقه for متغیر y با ۱- مقداردهی می شود .با وجود آنکه مقدار۱۰۰ به آن اختصاص می یابد اما مقدار جدید را از دست می دهد.
و آخرین نکته: اگر چه بلوک ها می توانند تو در تو باشند اما نمی توان متغیری همنام با یکی از متغیر های محدوده بیرونی تعریف کرد:
//this program will not compile
Class ScopeErr{
Public static void main(string args[]) {
Int bar=1;
{ //creates a new scope
Int bar=2; //compile time error—bar already defined!
}
}
}
تبدیل و Casting
اگر تجربه برنامه سازی داشته باشید( که دارید) حتما می دونید که تخصیص یک نوع مقدار به متغیری از نوع دیگر نسبتا متداول است. اگر آن دو نوع سازگار باشند در آن صورت جاوا عمل تبدیل را به صورت خودکار انجام خواهد داد اما همیشه تمام داده های مختلف سازگار نیستند و از این رو همه تبدیلات به طور ضمنی ممکن نیست. به عنوان نمونه هیچ تبدیلی برای double به byte تعریف نشده است.
خوشبختانه باز هم امکان کسب رویه های تبدبل برای انواع داده های ناسازگار وجود دارد برای انجام این کار باید از Casting استفاده کنید. تبدیل صریح بین انواع داده های ناسازگار.
تبدیل خودکار جاوا
وقتی یک نوع داده به متغیری از نوع دیگر تخصیص می یابد؛ چنانچه شرایط ذیل مهیا باشد عمل تبدیل خودکار انجام می شود:
- آن دو نوع سازگار باشند
- نوع مقصد بزرگتر از نوع مبدا باشد
هرگاه این دو شرط برقرار باشد نوعی “تبدیل همراه با بزرگ سازی” widening conversion انجام می شود. مثلا نوع int همیشه برای نگهداری مقادیر byte به اندازه کافی بزرگ است بنابراین استفاده از عبارتcasting به صورت صریح ضرورت ندارد.
برای تبدیلات همراه با بزرگ سازی؛ انواع داده های عددی از جمله اعداد صحیح و اعشاری با ممیز شناور با یکدیگر سازگار هستند اما انواع داده های عددی با char یا Boolean سازگار نیستند. همچنین char و Boolean با هم نیز سازگار نیستند.
انجام Casting برای انواع داده های ناسازگار
گفتیم که برای نوع هایی که با هم سازگار نیستند نمی توانیم از تبدیلات خودکار(با وجود مفید بودنشان) استفاده کنیم. مثلا اگر بخواهیم یک مقدارint را به مقدارbyte تخصیص بدهیم؛ این تبدیل به طور خودکار انجام نمی شود زیرا byte از int کوچکتر است . این نوع تبدیل گاهی “تبدیل همراه با کوچک سازی” نامیده می شود ؛چرا که مقدار int به طور صریح کوچکتر می شود تا در مقصد قابل ذخیره باشد. برای آنکه تبدیل دو نوع ناسازگار را انجام دهید باید ازcasting استفاده کنید ؛ یعنی نبدیل صریح انواع داده ها. به صورت زیر:
(target-type) value
Target-type مشخص کننده نوع داده ای است که مقدار مورد نظر باید به آن تبدیل شود. مثال زیر را مرور می کنیم:
Int a;
Byte b;
//…
B=(byte) a;
در عبارت بالاcasting از int به byte انجام می شود. چنانچه مقدار صحیح بزرگتر از محدوده byte باشد؛ مقدارش از طریق تقسیم بر محدوده byte و به دست آوردن باقیمانده تقسیم؛ کوچک می شود.
به برنامه زیر توجه کنید:
//demonstrate casts.
Class Conversion {
Public static void main(string args[] ) {
Byte b;
Int i=257;
Double d=323.142;
System.out.println(“\nConversion of int to byte.”);
B=(byte) I;
System.out.println( “i and b”+i+ “ “ +b);
System.out.println(“\nConversion of double to int.”);
I=(int)d;
System.out.println(“d and I “+ “ “ +i);
System.out.println(“\nConversion of double to byte.”);
B=(byte)d;
System.out.println(“d and b”+d+” “+b);
}
}
Out put:
Conversion of int to byte.
1 and b 257 ۱
Conversion of double to int.
D and I 323.142 ۳۲۳
Conversion of double to byte.
D and b 323.142 ۶۷
دوست دارد برام بنویسید که در این قطعه برنامه casting ها به چه نوعی انجام شده. کار سختی نیست هم برنامه رو دارید و هم خروجی اون رو.
ارتقاء خودکار انواع داده ها در عبارتها
علاوه بر عملیات تخصیص؛ تبدیل نوع داده ها در شرایط دیگر هم محتمل است: در عبارتها.
برای درک دلیل این امر مثال زیر را در نطر بگیرید. در برخی از عبارات دقت مورد نیاز برای یک مقدار میانجی گاهی اوقات از محدوده یکی از عملوند ها تجاوز می کند:
Byte a=40;
Byte b=50;
Byte c=100;
Int d=a*b/c;
نتیجه جمله میانجیa*b از محدوده عملوند ها تجاوز می کند. برای مدیریت این گونه مسائل؛ جاوا در حین ارزیابی عبارتها؛ عملوند های نوعbyte یا short را به طور خودکار به int ارتقا promote می دهد. یعنی جمله میانجیa*b ؛ با int انجام می شود نه byte. پس نتیجه جمله(۵۰*۴۰=۲۰۰۰) حتی با وجود اینکهa وb هر دو byte هستند؛ معتبر خواهد بود.
نکته: گرچه عمل ارتقاء خودکار مفید است اما ممکن است موجب بروز خطای زمان کامپایل نیز بشود.
نکته: در مواقعی که از عواقب مسئله سر ریزoverflow آگاهی دارید باید از عمل Casting صریح استفاده کنید.
قوانین ارتقاء انواع داده ها
۱- تمام مقادیرbyte و short به گونه ای که گفته شد به int ارتقاء می یابند
۲- اگر یکی از عملوند ها از نوع long باشد کل عبارت به long ارتقاء می یابد.
۳- اگر یکی از عملوندها از نوعfloat باشد در آن صورت کل عبارت به float ارتقاء می یابد.
۴- و اگر یکی از عملوندها double باشد نتیجه همdouble خواهد بود.
خوب این هم از درسنامه پنجم. درسنامه ششم اختصاص به آرایه ها داره که موضوع مهمی در تمام زبانهای برنامه نویسی است. اگه سوالی داشتید برام e-mail بفرستید: schoneDame2294@yahoo.com
موفق و پیروز باشید
مینا هوشمند
۹ روش برای جایگزینی نوشته با تصویر با استفاده از CSS
جایگزین کردن نوشته با تصویر توسط CSS مهارتی است که هر طراح وبی به آن نیازمند است. این در حالی است که تنها حذف نوشته و نمایش یک تصویر به جای آن مشکل را حل نمی کند بلکه مشکل اساسی تری را بوجود می آورد و آن index نشدن توسط موتورهای جستجو است. برای حل این مشکل هم راه حلهای مختلفی ابداع شد. در این مقاله ۹ روش را خواهید خواند که توسط آنها می توانید جایگزینی نوشته با تصویر را به خوبی انجام دهید. در هر روش معایبق و مزایای آن ذکر شده است. در انتهای هر روش نیز یک جدول وجود دارد که وضعیت تکنیک بکار رفته را از ۵ دیدگاه مختلف گزارش می دهد.
• CSS ON / Images ON
این وضعیت پیش فرض و معمولی است که در آن هم نمایش تصاویر و هم استفاده از CSS در مرورگر کاربر فعال است. در این وضعیت تکنیک مورد استفاده باید نمره قبولی بگیرد.
• CSS ON / Images OFF
در این وضعیت نمایش تصاویر در مرورگر کاربر غیر فعال شده ولی استفاده از CSS همچنان فعال است. در این تست انتظار داریم بجای تصاویر نوشته ها نمایش داده شوند.
• CSS OFF / Images ON
در این وضعیت استفاده از CSS غیر فعال و نمایش تصاویر فعال است. هنگامیکه استفاده از CSS در یک مرورگر غیر فعال باشد، مرورگر از CSS های پیش فرض خود استفاده می کند که غالبا به نمایش نوشته ها منتهی می شود. در این وضعیت انتظار داریم که نوشته ها نمایش داده شود.
• CSS OFF / Images OFF
در این وضعیت هم نمایش تصاویر و هم استفاده از CSS غیر فعال شده است. بدین ترتیب انتظار داریم نوشته ها نمایش داده شوند.
• استفاده از Markup اضافی
استفاده از Markup اضافی تنها به دلیل جایگزینی نوشته با تصویر ایدا آل نیست. به این دلیل که می توان گفت با این کار نتوانسته ایم به درستی محتوی (content) را از طرح (Design) جدا کنیم.
تکنیک شماره ۱
<h1 id=”technique-one”>
<span>CSS-Tricks</span>
</h1>
h1#technique-one {
width: 250px;
height: 25px;
background-image: url(logo.gif);
}
h3#technique-one span {
display: none;
}
نام این تکنیک FIR یا همان “Fahrner Image Replacement“ است. مقاله های زیادس در مورد این روش نوشته شده است از جمله مقاله مفصلی که توسط List Apart در مورد مطعضلات این روش نوشته منتشر شده و همچنین مقالهای که در دفاع از این روش توسط دیوید شی نوشته شده است.
اساس این روش قرار دادن نوشته درون Header درون یک تگ span و استفاده از این تگ برای مخفی کردن نوشته است. این روش عملی است اما استفاده از display:none نوشته را از دید screan reader ها و همچنین احتمالاً از دید موتورهای جستجو پنهان میکند که این اصلاً خوب نیست.
تکنیک شماره ۲:
<h1>
CSS-Tricks
</h1>
h1.technique-two {
width: 2350px; height: 75px;
background: url(”images/header-image.jpg”) top right;
margin: 0 0 0 -2000px;
}
این تکنیک توسط رادو دارواس ابداع شد. در این روش یک باکس بسیار بزرگ ساخته میشود و در منتهی الیه سمت چپ صفحه قرار می گیرد. نوشته درون این باکس نیز طوری مرتب شدهاند که در سمت چپ قرار بگیرند(left-justified) و در نتیجه دیده نخواهند شد. تصویر جایگزین در بالا و سمت راست این جعبه قرار می گیرد. این روش کار میکند ولی مشکل آن این است که در حالت CSS ON / Images OFF نه تصویر نمایش داده میشود و نه نوشته. این باکس بزرگ هم در طرحهای پیچیده میتواند مشکل ساز باشد. در ضمن این روش از روشهای دیگر ناکارآمدتر است.
تکنیک شماره ۳:
<h1>
CSS-Tricks
</h1>
h1.technique-three {
width: 350px; height: 75px;
background: url(”images/header-image.jpg”);
text-indent: -9999px;
}
این تکنیک توسط مایک داندل ابداع شده و معروف به روش فارک (Phark) است. این روش را میتوان یکی از پر استفاده ترین روشهای جایگزین کردن نوشته با تصویر نامید. اساس این روش بسیار ساده است. تصویر مورد نظر را به عنوان یک تصویر پس زمینه برای بلوک مورد نظر که در مثال بالا h1 است تعریف کرده و نوشته را با استفاده از text-indent از صفحه و در نتیجه دید بازدیدکننده بیرون کنید. در این روش یا اینکه نوشته توسط چشم دیده نمیشود اما توسط screen reader ها خوانده می شود. تننها مشکل این روش زمانی آشکار میشود که در حالت CSS ON / Images OFF قرار داشته باشیدو در این حالت نه نوشته دیده میشود و نه تصویر. البته تلاشی برای حل این مشکل صورت گرفته ولی این راه حل نیز در بعضی از مرورگرها باعث پدیدار شدن scroll bar های ناخواسته و بزرگی می شود.
تکنیک شماره ۴:
<h1>
<a href=”#”>
<img src=”images/header-image.jpg” alt=”CSS-Tricks” />
</a>
</h1
h1.technique-four {
width: 350px; height: 75px;
background: url(”images/header-image.jpg”);
text-indent: -9999px;
}
این روش در حقیقت برگرفته از روش فارک اینکه در تکنیک قبلی شرح داده شد با این تفاوت که در روش فارک شما نوشته را با استفاده از text-indent از دید پنهان میکردید ولی در این روش یک تصویر را از دید پنهان می کنید. با این کار حتی در حالت CSS OFF / Images ON نیز یک تصویر دیده خواهد شد. به علت استفاده از Alt text نیز این روش مشکلی با موتورهای جستجو ندارد. اما این روش در حالت CSS ON / Images OFF نیز از آزمایش انجام شده سر بلند بیرون نمی آید. با غیر فعال کردن نمای تصاویر در مرورگر هیچکدام از تصاویر نمایش داده نمی شود.
نکتهای که در مورد این تکنیک باید مورد توجه قرار گیرد این است که ممکن است Alt text از نظر موتورهای جستجو به خوبی مورد توجه قرار نگیرد به همین دلیل میتوان در قسمت لینک نوشه را هم نوشت. حالا test-indent باعث میشود هم نوشته و هم تصویر از دید پنهان شوند و از طرفی به دلیل وجود نوشته مشکلی هم با موتورهای جستجو بوجود نمی آید. مشکل این روش هم وقتی است هم CSS و هم نمایش تصاویر غیر فعال شده باشند که در این صورت مشکل double text بوجود میآید که این یعنی نمایش همزمان Alt text تصویر و نوشته لینک.
تکنیک شماره ۵:
<h1>
<img src=”images/blank.gif” alt=”CSS-Tricks” />
<span>CSS-Tricks</span>
</h1>
h1.technique-five {
width: 350px; height: 75px;
background: url(”images/header-image.jpg”);
}
h1.technique-five span {
display: none;
}
این تکنیک نیز توسط رادو دارواس ابداع شده است. در این تکنیک یک تصویر Gif شفاف یک پیکسلی استفاده میشود تا بتوان با استفاده از Alt text آن مشکل را با موتورهای جستجو حل کرد. با این کار نوشته در حالت CSS ON / Images OFF دیده می شود. روش موثری است اما افزودن یک تصویر شفاف کمی بدور از منطق است. همچنین در حالت CSS OFF / Images OFF حالت double text بوجود می آید.
تکنیک شماره ۶:
<h1>
CSS-Tricks
</h1>
h1.technique-six {
width: 350px;
padding: 75px 0 0 0;
height: 0;
background: url(”images/header-image.jpg”) no-repeat;
overflow: hidden;
}
این تکنیک همزمان توسط سیموس لیهی و استوارت لانگریج ابداع شد. در این تکنیک یک باکس ساخته میشود که ارتفاع آن توسط padding تعریف شده است. و به علت استفاده از overflow: hidden به صورت خودکار نوشته نمایش داده نمیشود اما اندازه باکس برای قرار گرفتن تصویر مورد نظر مناسب خواهد بود. این تکنیک مشکلی با Screan Reader ها ندارد اما در حالت CSS OFF / Images ON جوابگو نیست. در ضمن برای درست کار کردن این روش در نسخه های قدیمی IE باید ترفند های خاصی را بکار بگیرید.
تکنیک شماره ۷:
<h1>
<span>CSS-Tricks</span>
</h1>
h1.technique-seven {
width: 350px; height: 75px;
background: url(”images/header-image.jpg”) no-repeat;
}
h1.technique-seven span {
display: block;
width: 0;
height: 0;
overflow: hidden;
}
این تکنیک توسط لئون داویر ابداع شده است. در این روش نوشته در یک باکس با طول و عرض ۰ پیکسل قرار میگیرد و سپس با استفاده از overflow: hidden از دید پنهان میشود. این روش هم مشکلی با Screen Reader ها ندارد.
تکنیک شماره ۸:
<h1>
<span>CSS-Tricks</span>
</h1>
h1.technique-eight {
width: 350px; height: 75px;
position: relative;
}
h1.technique-eight span {
background: url(”images/header-image.jpg”);
position: absolute;
width: 100%;
height: 100%;
}
این روش توسط لوین الکساندر ابداع شده است. در برای پنهان کردن نوشته آنرا زیر تصویر قرار می دهیم. مشکل اصلی این روش این است که اگر از تصاویر شفاف استفاده کرده باشید نوشته دیده خواهد شد.
تکنیک شماره ۹:
<h1>
<span>CSS-Tricks</span>
</h1>
h1.technique-nine {
width: 350px; height: 75px;
background: url(”images/header-image.jpg”) no-repeat;
font-size: 1px;
color: white;
}
این تکنیک توسط راس ویکلی ابداع شده است. در این روش شما اندازه نوشته را بسیار کوچک (۱ پیکسل)در نظر گرفته و رنگ آنرا به رنگ پس زمینه تصویر تغییر میدهید و همین باعث میشود نوشته دیده نشود. این روش در حالت CSS ON / Images OFF کارآمد نیست. به نظر میآید این روش با SEO مشکل داشته باشد هم به دلیل یک رنگ بودن نوشته با رنگ پس زمینه و هم به دلیل خیلی کوچک بودن اندازه آن.
مطلب فوق توسط مصطفی لامعی عزیز و بعنوان اولین پست میهمان از طرف ایشون نوشته شده است. البته خود مصطفی در در وبلاگش بصورت مستقل در حال نوشتن است اما به ما لطف کرد و در ITT برای شما عزیزان خودآموز نوشت و قرار هست که این رویه رو ادامه بده |
مجسمه هایی که شما را شوکه خواهند کرد
خلاقیت در کنار توانایی بالا و مهارت کافی گاهی اوقات باعث خلق آثاری میشه که هر کسی رو ممکنه که شوکه کنه. البته شوکه از جهت زیبایی و درصد واقعی به نظر رسیدن این آثار. آقای Sam Jinks که ۱۱ سال از عمرشو وقف مجسمه سازی کرده و به درجه ای از توانایی و مهارت رسیده که این آثار بسیار زیبا و به نظر واقعی رو خلق میکنه. بیشترین ماده اولیه استفاده شده در این مجسمه ها ماده سیلیکون میباشد. امیدوارم که از دیدن این تصاویر بی نظیر لذت ببرید :
پستهای مرتبط :
عکسهای واقعی که فتوشاپی به نظر میرسند
ArtWork های الگوریتمی و کد دهی شده
طرحهای خلاقانه و ساخته شده توسط مداد
اشتباهات رایج در ساخت یک وب سایت – قسمت سوم
بعد از فراخوانی که در زمینه جذب نویسنده برای سایت ITT منتشر کردیم تقریبا ۶ نفر همکاری خودشون را اعلام کردند و امروز اولین پست میهمان از سری جدید (چراکه قبلا هم پستهای میهمان داشتیم) را برای شما آماده کردم. نویسنده این مطلب آقای امین و به آدرس وبلاگ Delbar72.blogfa.com هستند که زحمت کشیدند و این مطلب را برای شما عزیزان آمده کرده اندو امیدوارم شاهد مطالب بیشتری از ایشون در سایت ITT باشیم. ایشون اولین مقالشون رو در ادامه مقاله ای که قبلا با همین عنوان و در قسمتهای یک و دو نوشته شده بود، نوشته اند :
۲۵- مشخص نکردن محیط کاری وب
معمولاً بیشتر خوانندگان یک سایت دنبال مطالب مورد نظرشان در یک وب سایت هستند نه در چندین سایت. دلیل این امر هم این است که اگر سایتی تمام اطلاعات مورد نیاز خواننده را داشته باشد خواننده دیگر وقتی صرف جستجو و باز کردن سایت های مختلف نمی کند و به همین دلیل پیشنهاد می شود که در وب نویسی هدف وب سایت خود را مشخص کنید و از گذاشتن هر مطلبی از هر کجای وب خودداری کنید.
۲۶- موضوع بندی نکردن وب سایت
این امر خوشبختانه در بیشتر وب سایت ها و وبلاگ های قوی دیده می شود اما در بیشتر وب سایت های تازه افتتاح شده یا بیشتر وبلاگ ها این امر سرسری گرفته می شود و به آن اهمیتی داده نمی شود . اگر در وب سایتی یا وبلاگی تمامی مطالب موضوع بندی شده باشند و هر مطلبی در راستای موضوع مورد نظر قرار گیرد خواننده وقت کمتری برای پیدا کردن مطلب مورد نظر صرف می کند و این کار در جذب خواننده بسیار تاثیر دارد پس بهتر است اگر شما سایت یا وبلاگی دارید با مرتب کردن آرشیو موضوعی به بهتر شدن وب سایتتان کمک کنید.
۲۷- انتخاب عنوان های بی ربط با موضوع سایت
این کار کمتر در میان وب سایت ها صورت می گیرد ولی در بین وبلاگ نویسان تازه کار این امر رواج دارد. به صورتی که نویسنده و مدیر سایت مطالب سایت و ارزش های احترام به خواننده را فراموش کرده و با انتخاب عنوانی نامناسب در صدد جذب خوانندگان بر می آید. شاید شما هم در وبلاگ های مختلف بنرهای تبلیغاتی و لینک باکس هایی را دیده باشید که با عناوین نامناسب در صدد جذب بازدید کننده هستند. ولی اگر می خواهید وبلاگی مفید و پر بازدید داشته باشید بهتر است عنوانی مناسب با محتوای وبلاگ انتخاب کنید.
۲۸- انتخاب قالب های سنگین و نامناسب
شاید شما فکر کنید که خوانندگان به قالب وبلاگ و یا زیبایی آن بیشتر از مطالب آن اهمیت دهند ولی قضیه عکس این است به طوری که در نگاه اول خواننده به قالب توجه چندانی ندارد و بیشترین چیزی که برای او اهمیت دارد سرعت لود شدن صفحات است. اگر دقت کرده باشید سایت ها و وبلاگ های قوی و معروف تمام سعی خود را می کنند تا سرعت لود شدن صفحات را بالا برده و خوانندگان را راضی نگهدارند. برای این کار در ادامه ی این مطلب به شما چند پیشنهاد می کنیم. علاوه بر انتخاب قالب مناسب باید قالب با موضوع سایت نیز متناسب باشد . اکثر وبلاگ نویسانی که از قالب های آماده شده توسط سایت های مختلف استفاده می کنند به دلیل آشنا نبودن با زبان Html از تغییر و بهینه سازی قالب ناتوان هستند و حتی قسمت های تبلیغاتی درج لوگو را هم حذف نمی کنند. علاوه بر این قالب وبسایت یا وبلاگ باید در مرورگرهای مختلفی تست شود و با آن ها هماهنگ باشد چون هیچ بازدید کننده ای به خاطر مشاهده ی یک سایت هیچوقت حاضر به عوض کردن مرورگر مورد علاقه ی خود نمی شود پس باید در انتخاب قالب دقت به خرج بدهید. در آینده در مورد قالب وبلاگ به طور کامل بحث خواهیم کرد.
۲۹- استفاده کردن از لینک باکس های مختلف
لینک باکس پدیدهای است که چند سالی است در دنیای وب فارسی آغاز به کار کرده است و به سرعت در حال زیاد شدن است و دلیل آن هم کسب در آمد یا بالا بردن بازدید وبلاگ است به صورتی که بیشتر وبلاگ های فارسی در حال حاضر از لینک باکس هایی استفاده می کنند که هیچ گونه ارزششی برای خواننده ندارد علاوه بر این تاثیر زیادی در سرعت لود شدن صفحات وب هم دارند. لیک باکس ها معمولاً دارای چند بنر و تعدادی لینک به همراه چند تبلیغ و تعدادی عنوان است که بحث رعایت نکردن عنوان نامناسب به طور واضح در این لینک باکس ها دیده می شود. به شما پیشنهاد می کنیم که اگر می خواهید وبلاگ مفیدی که دارای سرعت لود بالا باشد داشته باشید از درج لینک باکس ها جداً خودداری کنید.
۳۰- انتخاب عکس های سنگین برای وبلاگ
در بیشتر وبلاگ ها یا وب سایت هایی که معمولاً به خاطره نویسی می پردازند گاهی نیاز به وجود چند عکس دارند که اغلب نویسندگان این وب سایت ها و وبلاگ ها بدون در نظر گرفتن اندازه و حجم عکس اقدام به انتشار آن در وب خود می کنند. برای مثال در وبلاگ های فارسی به صورت آنلاین می توان سایز عکس را کوچک یا بزرگ کرد ولی این کوچک یا بزرگ کردن بیشتر برای تطبیق اندازه با قالب وبسایت است و هیچ تاثیری در بالا بردن سرعت لود صفحات ندارد چون حجم عکس و اندازه ی آن تغییری نکرده فقط در دیدن نویسنده ممکن است این طور به نظر بیاید. بهتر است عکس را در کامپیوتر خود ذخیره کرده و بعد با استفاده از نرم افزار های کم حجم کننده، اندازه و حجم آن را کم کنید و سپس آن را در وبلاگ یا وب سایت خود قرار دهید . با این کار سرعت لود صفحات را نیز بالا می برید و می توانید خوانندگانی راضی داشته باشید.
۳۱- استفاده از امکانات اضافی در قالب
در این مورد فقط کافی است به سایت های معروف و قوی سری بزنید. آیا خبری از پیغام خوش آمد گویی و یا پرسیدن نام شما و رنگ مورد علاقه ی شما و سوالاتی از این قبیل است؟ مسلماً نه. شاید شما هم به وبلاگ هایی سر زده باشید که دارای قالب یک ستونه هستند و در انتهای ستون ، بعد از امکانات اصلی تعداد زیادی از نظر سنجی ها ، آمارگیر های مختلف ، گجت های مربوط به سایت هایی مثل توییتر و یا کلوب و … عکس تصادفی ، آب و هوا ، وضعیت در یاهو و دیگر امکاناتی که در قالب وبلاگ ها کاربرد دارند ؛ آیا واقعاً از دیدن این همه امکانات لذت برده اید یا به فکر سرعت لود شدن صفحه هستید؟ مسلماً بعضی از این امکانات بسیار مفید هستند مثل آمارگیر ولی استفاده ی همزمان از چند آمارگیر کار درستی نیست و تاثیر بدی در سرعت لود شدن صفحات دارد. پس به جای استفاده از چند آمارگیر از بهترین آن ها استفاده کنید و از درج امکانات زاید خودداری کنید.
۳۲- صفحه ی اصلی شلوغ و گیج کننده
متاسفانه در بسیاری از وبلاگ ها دیده می شود که تعداد پست ها در صفحه ی اصلی زیاد است و اگر این پست ها حاوی عکس و ویدیوهای آنلاین باشند بسیار زمان گیر هستند و خوانندگان هم که وقتشان را از سر راه گیر نیاورده اند معمولاً اقدام به بستن وبلاگ می کنند. به همین سادگی وبلاگی که حتی ممکن است زیباترین عکس های دنیا را بر روی صفحه ی اصلی خود داشته باشد بدون بازدید کننده باقی می ماند و دلیل آن هم تعداد پست های زیاد در صفحه ی اصلی است که به راحتی با ساختن یک آرشیو موضوعی مناسب می توان این موضوع را حل کرد.
۳۳- درج نکردن منبع
وب سایت ها و وبلاگ های زیادی هستند که از مطالب دیگر سایت ها استفاده می کنند ولی بدون گذاشتن منبع. این کار باعث عدم اعتماد خواننده و در اکثر موارد ناراحت شدن و یا بروز مشکلات جدی و حتی شکایت توسط نویسنده ی اصلی مطلب می شود ، پس با گذاشتن یک لینک ساده و یا توضیحی در مورد نویسنده ی اصلی و منبع مطلب مورد نظر علاوه بر رعایت حقوق نویسنده اقدام به انتشار مطالب کنید.
پستهای مرتبط :
اشتباهات رایج در ساخت یک وب سایت – قسمت دوم
اشتباهات رایج در ساخت یک وب سایت – قسمت اول
هشت گام مهم برای ساخت یک وب سایت
باید ها و نباید ها در وب سایتهای امروزی






















