سیدرضا بازیار

چگونه همچین سایتی را بسازیم؟ (سایتی حرفه ای!)

من یه سایت در اینترنت دیدم که هر روز ازش استفاده میکنم و سایتی آموزشی و حرفه ای هست که 1 سال روی اون کار کردم و متوجه نشدم چطوری ساخته شده

اون سایت به هیچ وجه تبلیغاتی نیست و فقط جهت تایپ ساخته شده!!! (به هیچ وحه تبلیغاتی نیست!!! پس لطفا این مطلب را پاک نکنید)

type

این سایت یه فایل فلش داره که فقط روی خودش کار میکنه و اگه فلش ازش جدا بشه دیگه کار نمیکنه

من میخوام همچین چیزی رو با زبان فارسی بسازم (فقط واسه استفاده شخصی!)

اگه ممکنه بگید ساختار این سایت چیه و چگونه میتونم یه همچین چیزی بسازم؟

#تایپر_شوید #تایپ #تایپ_حرفه_ای
لذت یادگیری با توسینسو
به عنوان شخصی که مدت هاست از سایت توسینسو استفاده می کنم باید بگم که واقعاً یکی از بهترین مرجع ها برای ارتقاء دانش شخصی هست. دوره های سایت، راهکارها و مطالب، همگی عالی هستند.
prober

سلام

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

کسانی که عاشـق کیفیت اند بیشتر از کسانی که متخصص کیفیت اند باعث بهبود کیفیت می شوند. - پروفسور کندو- کتاب Human Motivation

درست می فرمایید

من میخواستم با css و jquery همچین چیزی رو بسازم

حتی دقیقا همین کیبورد رو با css قبلا ساختم. اما نشد :(

چرا این فایل فلش فقط روی همون سایت کار میکنه؟

prober

چرا نشد با css و jquery ؟!!!

البته این یک فایل فلش نیست که بشه دانلودش کنید و جایی دیگه اجرا کنید یک صفحه وب با تکنولوژی فلش هست یعنی فلش توی صفحه جاسازی( embed) شده بنابراین مسلمه که فقط همین سایت میتونه نمایشش بده مگر این که کد سایت رو داشته باشید که ندارید.

کسانی که عاشـق کیفیت اند بیشتر از کسانی که متخصص کیفیت اند باعث بهبود کیفیت می شوند. - پروفسور کندو- کتاب Human Motivation

میتونید یکم در ساخت این سایت من رو راهنمایی کنید یا بهم کمک کنید؟

اگه ممکنه بگید مرحله به مرحله چه کاری رو انجام بدم؟ (البته jquery رو خیلی یاد نگرفتم... در حد ابتدایی هستم)

حسین احمدی

من یه نمونه کوچیک برای عملیات تایپ این صفحه برات آماده کردم که کار مشابه همین سایت و انجام میده. چون دقیقاً کار اصلی همین بخش بررسی و چک کردن تایپه:

<!DOCTYPE>
<html>
	<head>
		<title>Opacity Menu</title>
		<style>
			.text-for-type span{
				margin: 0 5px 0 3px;
				padding: 5px;
			}
			.text-for-type span.typed{
				background-color: darkred;
				color: white;
			}
		</style>
	</head>
	<body>
		<p class="text-for-type">
			<span class="typed">T</span>
			<span>h</span><span>i</span><span>s</span><span> </span><span>i</span><span>s</span><span> </span><span>f</span><span>o</span><span>r</span><span> </span><span>t</span><span>e</span><span>s</span><span>t</span>
		</p>
		<script src="jquery.js"></script>
		<script>
			$(function(){
				$(document).on('keyup',function(e){
					var spanElements = $('.text-for-type span');
					debugger;
					var typedCharacters = 0;
					for(var counter = 0; counter < spanElements.length; counter++){
						var obj = $(spanElements[counter]);
						if(obj.hasClass('typed')){
							typedCharacters++;
							continue;
						}
						if(obj.html().charCodeAt(0) != getKeyCode(e)){
							alert('invalid!');					
						}else{
							obj.addClass('typed');
							typedCharacters++;
						}
						break;
					}
					if(typedCharacters === spanElements.length){
						alert('ok');
					}
				});				
			});
			
			function getKeyCode(e){
				if(e.keyCode!=16){
					c = String.fromCharCode(e.keyCode);
					if(e.shiftKey){
						return e.keyCode;
					}else{
						c = c.toLowerCase(c);
						return c.charCodeAt(0);
					}
				}
			}
		</script>
	</body>
</html>

فقط یادت باشه. به فایل jquery نیاز داری برای اینکار.

لطفاً سوال خود را در انجمن مطرح کنید، به سوالات در پیام خصوصی پاسخ داده نخواهد شد

البته متوجه نشدم کد آقای حسین احمدی چه کاربردی داره

یه کیبورد چیدا کردم که خیلی جالبه

کیبورد html5 + css3 + jquery توی اون کلیدی رو فشار بدید تا عکس العمل رو ببینید

البته نمیدونم چطوری سورس اون رو بردارم (چون سازنده اون سورس رو رایگان گذاشته و باز هم پس از برداشتن عملی نمیشه)

حسین احمدی

کدی که براتون گذاشتم، متنی رو صفحه نمایش میده و با فشار دادن هر کاراکتر اون متن به ترتیب، در صورت صحیح بودن توالی کاراکتر های تایپ شده اون قسمت از متن قرمز میشه. یه چیزی شبیه به وب سایتی که گذاشته بودید. برای اینکار باید از رویداد keyup استفاده کنید. کد رو داخل یک صفحه Html ذخیره کنید در کنار فایل jquery و صفحه رو تو chrome یا firefox باز کنید تا نتیجه رو ببینید.

لطفاً سوال خود را در انجمن مطرح کنید، به سوالات در پیام خصوصی پاسخ داده نخواهد شد

میتونید سورس اون کد رو که براتون گذاشتم بهم بدید (رایگانه و غیر قانونی نیست!)

واسه اینکه پس از فشار دادن هر کلید یک صدا پخش بشه باید کد جداگانه بزارم یه وسط همون مخلوط کنم؟ (واسه حل شدن مشکل لود صدا)

پارسا صفوی

برای این کار یک html video میزارید و داخل jqeury بعد از لود صفحه متد لود رو براش اجرا کنید و بعد از هر بار کلیک فقط لاظمه که یک بار اون صدا پخش بشه.

 $(function(){
    $('#mysound').load();
    //on key up event{
        $('mysound').play();
    //on key up event end} 
}
prober

از لینکی که گذاشتید منظورم کیبورد دومیه هست نمیشه چیزی جز css رو برداشت. چه جوری فهمیدید open source هست؟!!

در ضمن شما می تونید در مرورگر mozila firefox (نسخه های جدید) با فشردن دکمه های Ctrl+Shift+I روی یه صفحه وب اجزای مختلف html صفحه رو همراه با css هاشون ببینید. می تونید مثلا یکی از دکمه های کیبورد توی همون صفحه لینک رو با ماوس انتخاب کنید و box model اون ، یعنی css های div رو مشاهده کنید و الگوبرداری کنید.

اما عملیات jquery رو شما از روی کد این صفحه نمی تونید ببینید. مگر اینکه open source باشه و اگر اینطور باشه خود source code رو سازنده این web page توی سایتش برای کپی یا دانلود قرار می ده.

کسانی که عاشـق کیفیت اند بیشتر از کسانی که متخصص کیفیت اند باعث بهبود کیفیت می شوند. - پروفسور کندو- کتاب Human Motivation
پاسخ شما
برای ارسال پاسخ خود وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....