درخواست های ارتباط
جستجو
لیست دوستان من
صندوق پیام
همه را دیدم
  • در حال دریافت لیست پیام ها
صندوق پیام
رویدادها
همه را دیدم
  • در حال دریافت لیست رویدادها
همه رویدادهای من
تخفیف های وب سایت
همه تخفیف ها

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

نویسنده متن پست
پاسخ به این پست
author
سیدرضا بازیار
سیدرضا بازیار
1394/04/15 09:41:27
من یه سایت در اینترنت دیدم که هر روز ازش استفاده میکنم و سایتی آموزشی و حرفه ای هست که 1 سال روی اون کار کردم و متوجه نشدم چطوری ساخته شده
اون سایت به هیچ وجه تبلیغاتی نیست و فقط جهت تایپ ساخته شده!!! (به هیچ وحه تبلیغاتی نیست!!! پس لطفا این مطلب را پاک نکنید)

type

این سایت یه فایل فلش داره که فقط روی خودش کار میکنه و اگه فلش ازش جدا بشه دیگه کار نمیکنه
من میخوام همچین چیزی رو با زبان فارسی بسازم (فقط واسه استفاده شخصی!)
اگه ممکنه بگید ساختار این سایت چیه و چگونه میتونم یه همچین چیزی بسازم؟
author
prober
46 ماه قبل
سلام
سایت جالبی بود اما فکر نمیکنم صرف استفاده از فلش بشه یه سایت رو حرفه ای حساب کنیم. با نگاهی که به عملکرد برنامه انداختم فکر می کنم بشه خیلی راحت ، بدون فلش و با تکنولوژی jquery هم همچین برنامه ای ایجاد کرد که خیلی هم سبکتر میشه و همینطور نیازی به نصب فلش پلیر روی سیستم کلاینت نداره
author
سیدرضا بازیار
سیدرضا بازیار
46 ماه قبل
درست می فرمایید
من میخواستم با css و jquery همچین چیزی رو بسازم
حتی دقیقا همین کیبورد رو با css قبلا ساختم. اما نشد :(

چرا این فایل فلش فقط روی همون سایت کار میکنه؟
author
prober
46 ماه قبل
چرا نشد با css و jquery ؟!!!
البته این یک فایل فلش نیست که بشه دانلودش کنید و جایی دیگه اجرا کنید یک صفحه وب با تکنولوژی فلش هست یعنی فلش توی صفحه جاسازی( embed) شده بنابراین مسلمه که فقط همین سایت میتونه نمایشش بده مگر این که کد سایت رو داشته باشید که ندارید.
author
سیدرضا بازیار
سیدرضا بازیار
46 ماه قبل
میتونید یکم در ساخت این سایت من رو راهنمایی کنید یا بهم کمک کنید؟
اگه ممکنه بگید مرحله به مرحله چه کاری رو انجام بدم؟ (البته jquery رو خیلی یاد نگرفتم... در حد ابتدایی هستم)
author
حسین احمدی
حسین احمدی
46 ماه قبل
من یه نمونه کوچیک برای عملیات تایپ این صفحه برات آماده کردم که کار مشابه همین سایت و انجام میده. چون دقیقاً کار اصلی همین بخش بررسی و چک کردن تایپه:

<!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 نیاز داری برای اینکار.
author
سیدرضا بازیار
سیدرضا بازیار
46 ماه قبل
البته متوجه نشدم کد آقای حسین احمدی چه کاربردی داره
یه کیبورد چیدا کردم که خیلی جالبه
کیبورد html5 + css3 + jquery توی اون کلیدی رو فشار بدید تا عکس العمل رو ببینید
البته نمیدونم چطوری سورس اون رو بردارم (چون سازنده اون سورس رو رایگان گذاشته و باز هم پس از برداشتن عملی نمیشه)
author
حسین احمدی
حسین احمدی
46 ماه قبل
کدی که براتون گذاشتم، متنی رو صفحه نمایش میده و با فشار دادن هر کاراکتر اون متن به ترتیب، در صورت صحیح بودن توالی کاراکتر های تایپ شده اون قسمت از متن قرمز میشه. یه چیزی شبیه به وب سایتی که گذاشته بودید. برای اینکار باید از رویداد keyup استفاده کنید. کد رو داخل یک صفحه Html ذخیره کنید در کنار فایل jquery و صفحه رو تو chrome یا firefox باز کنید تا نتیجه رو ببینید.
author
سیدرضا بازیار
سیدرضا بازیار
46 ماه قبل
میتونید سورس اون کد رو که براتون گذاشتم بهم بدید (رایگانه و غیر قانونی نیست!)
واسه اینکه پس از فشار دادن هر کلید یک صدا پخش بشه باید کد جداگانه بزارم یه وسط همون مخلوط کنم؟ (واسه حل شدن مشکل لود صدا)
author
parsasi
پارسا صفوی
46 ماه قبل
برای این کار یک html video میزارید و داخل jqeury بعد از لود صفحه متد لود رو براش اجرا کنید و بعد از هر بار کلیک فقط لاظمه که یک بار اون صدا پخش بشه.
 $(function(){
    $('#mysound').load();
    //on key up event{
        $('mysound').play();
    //on key up event end} 
}
author
prober
46 ماه قبل
از لینکی که گذاشتید منظورم کیبورد دومیه هست نمیشه چیزی جز css رو برداشت. چه جوری فهمیدید open source هست؟!!
در ضمن شما می تونید در مرورگر mozila firefox (نسخه های جدید) با فشردن دکمه های Ctrl+Shift+I روی یه صفحه وب اجزای مختلف html صفحه رو همراه با css هاشون ببینید. می تونید مثلا یکی از دکمه های کیبورد توی همون صفحه لینک رو با ماوس انتخاب کنید و box model اون ، یعنی css های div رو مشاهده کنید و الگوبرداری کنید.
اما عملیات jquery رو شما از روی کد این صفحه نمی تونید ببینید. مگر اینکه open source باشه و اگر اینطور باشه خود source code رو سازنده این web page توی سایتش برای کپی یا دانلود قرار می ده.

برای ارسال پست ابتدا به سایت وارد شوید

مطالب مرتبط

در حال دریافت اطلاعات